/* Thème v2 du panel Tony SAV : même univers que le site public Chez Tony (bleu nuit, or, boutons arrondis).
   Chargé après app.css quand le cookie theme=v2 est présent (/theme/v2 pour l'activer, /theme/v1 pour revenir).
   Gère aussi le mode sombre existant (bouton soleil/lune) : mêmes sélecteurs que app.css. */
:root {
  --bg: #F6F7FA; --surface: #FFFFFF; --surface-2: #F1F3F8;
  --ink: #1D2438; --ink-strong: #0E1424; --muted: #5E687F;
  --line: #E1E5EE; --line-strong: #CBD2E1;
  --accent: #0E1424; --accent-2: #2B3550; --accent-soft: #F7E8C2;
  --ok: #15803D; --ok-soft: #DDF5E5;
  --warn: #B45309; --warn-soft: #FEF0D5;
  --danger: #B91C1C; --danger-soft: #FDE8E8;
  --info: #0891B2;
  --gold: #8A6209; --gold-soft: #F7E8C2;
  --link: #7A5810;
  --radius: 18px; --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(14, 20, 36, .04), 0 12px 32px rgba(14, 20, 36, .06);
  --shadow-accent: 0 8px 20px rgba(14, 20, 36, .2);
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Sora", "Figtree", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0F1D; --surface: #111A2E; --surface-2: #16213A;
    --ink: #D5DBEA; --ink-strong: #FFFFFF; --muted: #9AA5BF;
    --line: #1E2A47; --line-strong: #2B3A5E;
    --accent: #3A4A78; --accent-2: #5468A0; --accent-soft: #2E2712;
    --ok: #4ADE80; --ok-soft: #14301F;
    --warn: #FBBF77; --warn-soft: #33260F;
    --danger: #F87171; --danger-soft: #3B1A1A;
    --gold: #F0C969; --gold-soft: #2E2712;
    --link: #F0C969;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .4);
    --shadow-accent: 0 8px 20px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0F1D; --surface: #111A2E; --surface-2: #16213A;
  --ink: #D5DBEA; --ink-strong: #FFFFFF; --muted: #9AA5BF;
  --line: #1E2A47; --line-strong: #2B3A5E;
  --accent: #3A4A78; --accent-2: #5468A0; --accent-soft: #2E2712;
  --ok: #4ADE80; --ok-soft: #14301F;
  --warn: #FBBF77; --warn-soft: #33260F;
  --danger: #F87171; --danger-soft: #3B1A1A;
  --gold: #F0C969; --gold-soft: #2E2712;
  --link: #F0C969;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .4);
  --shadow-accent: 0 8px 20px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

body { font-size: 14.5px; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: 24px; }
a { color: var(--link); }
:focus-visible { outline-color: #C8962B; }

/* ---------- Menu latéral : bleu nuit comme le site ---------- */
.sidebar { background: radial-gradient(rgba(255, 255, 255, .06) 1.2px, transparent 1.4px) 0 0 / 16px 16px, #0E1424; border-right: 0; padding: 22px 14px; }
.brand { gap: 12px; padding: 2px 8px 6px; }
.brand-mark { width: 44px; height: 44px; border-radius: 50%; background: url(/static/img/tony-logo.webp) -6px 3px / 56px auto no-repeat, #F7E8C2; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #C8962B; }
.brand-mark svg { display: none; }
.brand b { font-family: var(--display); font-size: 18px; font-weight: 800; }
.sidebar .brand b { color: #fff; }
.nav-label { color: #7F89A3; }
.nav-item { color: #B9C0D2; font-weight: 600; border-radius: 12px; }
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-item.active { background: rgba(240, 201, 105, .16); color: #fff; box-shadow: none; }
.nav-item.active svg { color: #F0C969; }

/* ---------- Barre du haut ---------- */
.topbar { padding: 12px 26px; }
.top-search { background: var(--surface); border-color: var(--line-strong); }
.top-search:focus-within { border-color: #C8962B; box-shadow: 0 0 0 4px rgba(200, 150, 43, .16); }
.whoami b { font-weight: 800; }

/* ---------- Boutons ---------- */
button, .btn { border-radius: 999px; font-weight: 700; }
button:hover, .btn:hover { filter: none; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(14, 20, 36, .26); }
button.ghost, .btn.ghost, button.linkish, .btn-sm { border-radius: 999px; }
button.ghost:hover, .btn.ghost:hover { border-color: #C8962B; transform: none; box-shadow: none; }
.icon-btn:hover, .icon-btn { box-shadow: none; transform: none; }
button.linkish { color: var(--link); }
button.danger:hover { transform: none; }

/* ---------- Champs ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea { border-width: 1.5px; border-radius: 12px; padding: 9px 13px; }
input:focus, select:focus, textarea:focus { border-color: #C8962B; box-shadow: 0 0 0 4px rgba(200, 150, 43, .18); }

/* ---------- Connexion ---------- */
.auth { background: radial-gradient(circle at 50% -10%, rgba(200, 150, 43, .3), transparent 55%), radial-gradient(rgba(255, 255, 255, .07) 1.3px, transparent 1.5px) 0 0 / 18px 18px, #0E1424; }
.login { width: 380px; padding: 34px 32px; border: 0; border-radius: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.login h1 { font-size: 26px; }

/* ---------- Chiffres et cartes ---------- */
.kpi, .stat-card, .card, .ticket-row { border-radius: var(--radius); }
.kpi .val, .stat-n { font-family: var(--display); font-weight: 800; font-size: 26px; }
.kpi.hero, .stat-card.highlight { background: radial-gradient(rgba(255, 255, 255, .07) 1.3px, transparent 1.5px) 0 0 / 16px 16px, linear-gradient(135deg, #0E1424, #26325A); }
.ticket-row { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.ticket-row:hover { border-color: #E3CF9C; transform: translateY(-2px); box-shadow: 0 18px 38px rgba(14, 20, 36, .12); }
.queue-grid > section:last-child .ticket-row::before { background: #C8962B; }
.col h2 { font-size: 17px; }

/* ---------- Texte « accent » : lisible en clair et en sombre ---------- */
.ticket-row .ref, .badge-assigned, .gs-ref, .guide h2 .num, .notes-panel .count { color: var(--link); background: var(--accent-soft); }
.amount-wrap strong, .summary-title, .eg-total, .ping-toast b { color: var(--link); }
.qr-btn:hover, .guide-toc a:hover { border-color: #C8962B; color: var(--link); }
.remember-check input { accent-color: #0E1424; }

@media (max-width: 860px) {
  .sidebar.open { box-shadow: 0 0 0 100vw rgba(14, 20, 36, .55); }
  .topbar { padding: 10px 16px; }
}