/**
 * assets/css/themes.css — Temi del sito a SCALE GRADUATE.
 *
 * Sistema a token `--c-*` (sfondo, superfici 1/2/3, bordo, testo/dim/muted/faint, accento,
 * ink-accento, linea-riga). Ogni tema ridefinisce TUTTI i token → ogni componente vira di
 * tonalità in modo armonioso, mantenendo la leggibilità. I colori SEMANTICI (verde ok,
 * rosso, ambra warning, viola "assegnato", blu info) e le MAPPE restano invariati.
 *
 * Lo SCURO è il default: nessun attributo data-theme → le pagine non ancora migrate restano
 * col loro CSS originale (rischio zero). Le pagine MIGRATE usano var(--c-*) e seguono il tema.
 * Per le pagine non migrate, sotto data-theme si attivano anche gli ALIAS legacy→token, così
 * la parte basata su variabili vira comunque (parziale finché non si migrano gli hex inline).
 */

:root {
  --c-bg:#0c0c0c; --c-surface:#111111; --c-surface-2:#1a1a1a; --c-surface-3:#0f0f0f;
  --c-border:#232323; --c-text:#e5e5e5; --c-text-dim:#bbbbbb; --c-muted:#888888; --c-faint:#666666;
  --c-accent:#d6a83f; --c-accent-ink:#1a1305; --c-row-line:rgba(255,255,255,.05);
}

/* Alias legacy → token: attivi SOLO quando un tema è selezionato (html[data-theme] esiste).
   Specificità 0,1,1 → batte le ridefinizioni locali `html,body{…}` senza editare i file. */
html[data-theme]{
  background:var(--c-bg);
  --bg:var(--c-bg); --bg-soft:var(--c-surface); --text:var(--c-text); --muted:var(--c-muted); --amber:var(--c-accent);
  --internal-bg:var(--c-bg); --internal-panel:var(--c-surface); --internal-panel-soft:var(--c-surface-2);
  --internal-border:var(--c-border); --internal-text:var(--c-text); --internal-muted:var(--c-muted); --internal-gold:var(--c-accent);
  --gold:var(--c-accent); --bg2:var(--c-surface); --border:var(--c-border);
}
html[data-theme] body{ background:var(--c-bg); color:var(--c-text); }

/* ─── Scale dei temi ─────────────────────────────────────────────────────── */
html[data-theme="chiaro"]{
  --c-bg:#eef1f5; --c-surface:#ffffff; --c-surface-2:#f3f5f8; --c-surface-3:#e9edf2;
  --c-border:#d4dae1; --c-text:#1c2127; --c-text-dim:#3a414a; --c-muted:#5b646d; --c-faint:#8a929b;
  --c-accent:#9a6604; --c-accent-ink:#ffffff; --c-row-line:rgba(0,0,0,.06);
  color-scheme:light;
}
html[data-theme="blu"]{
  --c-bg:#0a0e16; --c-surface:#111a28; --c-surface-2:#16233a; --c-surface-3:#0d1521;
  --c-border:#243650; --c-text:#dde7f3; --c-text-dim:#a9bcd4; --c-muted:#7e93ad; --c-faint:#5a6e88;
  --c-accent:#5aa0e6; --c-accent-ink:#061220; --c-row-line:rgba(120,170,230,.09);
}
html[data-theme="verde"]{
  --c-bg:#0a130d; --c-surface:#10201a; --c-surface-2:#152a20; --c-surface-3:#0c1a12;
  --c-border:#21402f; --c-text:#dceae0; --c-text-dim:#a7c5b3; --c-muted:#7ba189; --c-faint:#577a64;
  --c-accent:#46b07e; --c-accent-ink:#04130b; --c-row-line:rgba(90,190,140,.09);
}

/* ─── Navbar unica (colori cablati nel componente) ─────────────────────────── */
/* Accento navbar segue il tema (qualsiasi tema attivo) */
html[data-theme] .app-zone-label{ color:var(--c-accent); background:color-mix(in srgb,var(--c-accent) 12%,transparent); border-color:color-mix(in srgb,var(--c-accent) 26%,transparent); }
html[data-theme] .app-access-btn{ color:var(--c-accent); background:color-mix(in srgb,var(--c-accent) 12%,transparent); border-color:color-mix(in srgb,var(--c-accent) 30%,transparent); }
html[data-theme] .app-cta{ background:var(--c-accent); }
html[data-theme] .app-group-item.active,html[data-theme] .app-access-menu a:hover{ color:var(--c-accent); }
/* Sfondo navbar tinta per le scale scure */
html[data-theme="blu"] .app-nav{ background:rgba(10,14,22,.95); }
html[data-theme="verde"] .app-nav{ background:rgba(10,19,13,.95); }
/* Chiaro: navbar e tendine in chiaro */
html[data-theme="chiaro"] .app-nav{ background:rgba(255,255,255,.92); border-bottom-color:#e0e4ea; }
html[data-theme="chiaro"] .app-link{ color:#454c55; }
html[data-theme="chiaro"] .app-link:hover,html[data-theme="chiaro"] .app-link.active,html[data-theme="chiaro"] .app-group-btn.active{ color:#1c2127; background:rgba(0,0,0,.05); }
html[data-theme="chiaro"] .app-group-menu,html[data-theme="chiaro"] .app-access-menu{ background:#ffffff; border-color:#e0e4ea; box-shadow:0 18px 48px rgba(0,0,0,.16); }
html[data-theme="chiaro"] .app-group-item{ color:#454c55; }
html[data-theme="chiaro"] .app-group-item:hover{ color:#1c2127; background:rgba(0,0,0,.05); }
html[data-theme="chiaro"] .app-access-menu a{ color:#1c2127; border-top-color:#eef1f5; }
html[data-theme="chiaro"] .app-access-ic{ background:rgba(0,0,0,.04); border-color:#e0e4ea; }
html[data-theme="chiaro"] .app-user,html[data-theme="chiaro"] .app-logout,html[data-theme="chiaro"] .app-back{ color:#5b646d; }
html[data-theme="chiaro"] .app-user strong{ color:#1c2127; }
html[data-theme="chiaro"] .app-cta{ color:#fff; }

/* Striscia titolo interna (.internal-topbar, sfondo cablato): segue il tema con la stessa
   armonia dei badge/filtri — vale per tutte le pagine interne */
html[data-theme] .internal-topbar{ background:var(--c-surface); border-bottom-color:var(--c-border); }

/* Header tabelle sticky: sfondo dal token (leggibile in ogni tema) */
table.tbl-x .tbl-headrow th{ background:var(--c-surface); }

/* Tema chiaro: badge tintati più leggibili (scurisce testo+tinta) + native picker chiari */
html[data-theme="chiaro"] .tr-badge,html[data-theme="chiaro"] .ev-badge,html[data-theme="chiaro"] .cp-status,
html[data-theme="chiaro"] .cp-badge,html[data-theme="chiaro"] .dd-pill,html[data-theme="chiaro"] .dd-sem{ filter:saturate(1.25) brightness(.6); }
html[data-theme="chiaro"] input[type=date],html[data-theme="chiaro"] input[type=time]{ color-scheme:light !important; }

/* ─── Selettore tema (icona fissa in alto a destra) ────────────────────────── */
.st-theme-btn{
  position:fixed; top:9px; right:12px; z-index:10000; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); background:rgba(20,20,26,.7); color:#e8a020;
  font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:0;
}
.st-theme-btn:hover{ border-color:rgba(255,255,255,.4) }
html[data-theme="chiaro"] .st-theme-btn{ background:rgba(255,255,255,.8); border-color:rgba(0,0,0,.12); color:#9a6604 }
.st-theme-pop{
  position:fixed; top:46px; right:12px; z-index:10000; background:rgba(18,18,24,.98); color:#e8e6e1;
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:8px; min-width:172px;
  box-shadow:0 18px 48px rgba(0,0,0,.55); display:none; font-family:"Barlow",system-ui,sans-serif;
}
.st-theme-pop.open{ display:block }
html[data-theme="chiaro"] .st-theme-pop{ background:#fff; color:#1c2127; border-color:#e0e4ea; box-shadow:0 18px 48px rgba(0,0,0,.18) }
.st-theme-pop b{ display:block; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; opacity:.55; padding:2px 8px 6px }
.st-theme-opt{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:none;
  color:inherit; padding:7px 8px; border-radius:7px; cursor:pointer; font-size:.82rem; font-family:inherit }
.st-theme-opt:hover{ background:rgba(127,127,127,.14) }
.st-theme-opt.sel{ font-weight:700 }
.st-theme-opt .sw{ width:16px; height:16px; border-radius:5px; border:1px solid rgba(127,127,127,.35); flex-shrink:0 }
.st-theme-opt .ck{ margin-left:auto; opacity:.8 }
@media print{ .st-theme-btn,.st-theme-pop{ display:none !important } }