/* Token di colore e componenti di base — STILE-GUI §2 (scuro), §9 (chiaro), §11 (accessibilità).
   Nessun colore fuori da queste variabili. Il contrasto di ogni coppia è verificato da test/contrasto.spec.ts.
   Scostamenti dalla palette originale, imposti da WCAG AA (4.5:1 testo, 3:1 componenti):
   - testo muto scuro  #6b7280 -> #8b95a5   (prima 3.7:1)
   - badge grigio scuro, testo #6b7280 -> #9ca3af
   - testo muto chiaro #9ca3af -> #636b78   (prima 2.5:1)
   - bordo dei campi: token a parte (--bordo-campo), perché il bordo di pannello (#374151 / #e5e7eb) è sotto 3:1. */

:root {
  /* superfici (dal più profondo al più in rilievo) */
  --sfondo: #111827;
  --pannello: #1f2937;
  --incassato: #0d1117;
  --bordo: #374151;
  --bordo-rilievo: #4b5563;
  --bordo-campo: #6b7280;
  /* testo */
  --testo: #e5e7eb;
  --testo-forte: #f3f4f6;
  --testo-secondario: #9ca3af;
  --testo-muto: #8b95a5;
  /* accento di marca */
  --accento: #1d4ed8;
  --accento-hover: #2563eb;
  --accento-testo: #ffffff;
  --accento-chiaro: #60a5fa;
  --accento-piu-chiaro: #93c5fd;
  --focus: #60a5fa;
  --selezione: rgba(29, 78, 216, 0.18);
  /* stati: sempre coppia sfondo scuro + testo acceso della stessa tinta */
  --ok-sfondo: #052e16;   --ok-testo: #4ade80;
  --info-sfondo: #0c1a4a; --info-testo: #93c5fd;
  --avviso-sfondo: #431407; --avviso-testo: #fb923c;
  --sospeso-sfondo: #2e1065; --sospeso-testo: #c4b5fd;
  --errore-sfondo: #450a0a; --errore-testo: #f87171;
  --neutro-sfondo: #1f2937; --neutro-testo: #9ca3af;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  color-scheme: dark;
}

:root[data-tema="chiaro"] {
  --sfondo: #f9fafb;
  --pannello: #ffffff;
  --incassato: #f3f4f6;
  --bordo: #e5e7eb;
  --bordo-rilievo: #d1d5db;
  --bordo-campo: #6b7280;
  --testo: #111827;
  --testo-forte: #111827;
  --testo-secondario: #4b5563;
  --testo-muto: #636b78;
  --accento: #1d4ed8;
  --accento-hover: #1e40af;
  --accento-chiaro: #2563eb;
  --accento-piu-chiaro: #1d4ed8;
  --focus: #1d4ed8;
  --selezione: rgba(29, 78, 216, 0.08);
  --ok-sfondo: #d1fae5;   --ok-testo: #065f46;
  --info-sfondo: #dbeafe; --info-testo: #1e40af;
  --avviso-sfondo: #ffedd5; --avviso-testo: #9a3412;
  --sospeso-sfondo: #f3e8ff; --sospeso-testo: #6b21a8;
  --errore-sfondo: #fee2e2; --errore-testo: #991b1b;
  --neutro-sfondo: #f3f4f6; --neutro-testo: #374151;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--sfondo); color: var(--testo); font: 13px/1.4 var(--font); }
.mono { font-family: var(--mono); color: var(--accento-piu-chiaro); }
a { color: var(--accento-chiaro); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* scrollbar sottile e tematizzata */
* { scrollbar-width: thin; scrollbar-color: var(--bordo-rilievo) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--bordo-rilievo); border-radius: 3px; }

/* bottoni: primario (uno solo per vista), secondario, outline; .danger solo per Elimina */
.btn { font: inherit; font-size: 13px; border-radius: 6px; padding: 7px 14px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn-primary { background: var(--accento); color: var(--accento-testo); font-weight: 600; }
.btn-primary:hover { background: var(--accento-hover); }
.btn-secondary { background: var(--bordo); color: var(--testo); }
.btn-outline { background: transparent; color: var(--testo); border-color: var(--bordo-campo); }
.btn-outline:hover { background: var(--bordo); }
.btn-outline.danger { color: var(--errore-testo); border-color: var(--errore-testo); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* campi: etichetta sopra, errore sotto il campo */
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.campo label { font-size: 11px; color: var(--testo-secondario); white-space: nowrap; }
.campo .obbl { color: var(--errore-testo); }
.form-input, .form-select, .form-textarea { font: inherit; font-size: 13px; color: var(--testo); background: var(--sfondo); border: 1px solid var(--bordo-campo); border-radius: 6px; padding: 7px 10px; width: 100%; }
.form-input::placeholder { color: var(--testo-muto); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 2px var(--focus); }
.campo.errore .form-input, .campo.errore .form-select { border-color: var(--errore-testo); }
.errore-campo { color: var(--errore-testo); font-size: 12px; min-height: 0; }
.errore-campo:empty { display: none; }

/* badge di stato: testo sempre presente, mai solo colore */
.bdg { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; white-space: nowrap; background: var(--neutro-sfondo); color: var(--neutro-testo); }
.bdg.s-attivo, .bdg.s-ok { background: var(--ok-sfondo); color: var(--ok-testo); }
.bdg.s-admin, .bdg.s-info { background: var(--info-sfondo); color: var(--info-testo); }
.bdg.s-pianificatore, .bdg.s-avviso { background: var(--avviso-sfondo); color: var(--avviso-testo); }
.bdg.s-operatore, .bdg.s-sospeso { background: var(--sospeso-sfondo); color: var(--sospeso-testo); }
.bdg.s-errore  { background: var(--errore-sfondo); color: var(--errore-testo); }

/* logo Destriero: bianco sul tema scuro, navy sul chiaro (due immagini, ne resta visibile una) */
.logo-chiaro { display: none; }
:root[data-tema="chiaro"] .logo-scuro { display: none; }
:root[data-tema="chiaro"] .logo-chiaro { display: block; }

/* spinner e toast */
.spinner { width: 14px; height: 14px; border: 2px solid var(--bordo-rilievo); border-top-color: var(--accento-chiaro); border-radius: 50%; animation: gira .8s linear infinite; display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }
.toast { position: fixed; right: 16px; bottom: 16px; background: var(--pannello); color: var(--testo); border: 1px solid var(--bordo-rilievo); border-left-width: 3px; border-radius: 6px; padding: 10px 14px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.visibile { opacity: 1; }
.toast.ok { border-left-color: var(--ok-testo); }
.toast.err { border-left-color: var(--errore-testo); }