/* ============================================================
   PALETTE
   Colori di brand: fissi, non cambiano mai con il tema.
   Estratti dai file logo del Brand_Kit ILIKI.
   Token semantici: cambiano con il tema chiaro o scuro.
   ============================================================ */
:root{
  --brand-nero:#000000;
  --brand-verde:#566938;
  --brand-verde-chiaro:#90AC6B;
  --brand-crema:#E2D8C3;

  /* tema chiaro, default: fondo crema del sito iliki.co.tz */
  --fondo:#F7F0E1;
  --superficie:#FFFFFF;
  --superficie-2:#FDFBF5;
  --testo:#000000;
  --testo-2:#6B6B66;
  --bordo:#E3DCCB;
  --accento:#566938;
  --su-accento:#FFFFFF;
  --inverso-bg:#000000;
  --inverso-testo:#FFFFFF;
  --ok-bg:#EEF3E6;
  --ok-bordo:#90AC6B;
  --ok-testo:#3D4C26;
  --cassa-bg:#F2EFE6;
  --cassa-testo:#5B5340;
  --ambra:#B8860B;
  --ambra-testo:#8A6508;
  --focus-1:#000000;
  --focus-2:#FFFFFF;
  --ambra-bg:#FDF6E3;
  --ruggine:#A33A2A;
  --ruggine-bg:#FBEEEC;
  --header-bg:#000000;
  --header-testo:#E2D8C3;
  --header-testo-2:#B9B2A2;
  --header-campo:#1C1C1C;
  --header-bordo:#3A3A3A;
  --strip-bg:#E2D8C3;
  --strip-testo:#3A3527;
  --strip-bordo:#CFC4AB;
  --skel-a:#EEEEEE;
  --skel-b:#F6F6F4;
  --zebra-a:#FBF8F0;
  --zebra-b:#F3EEE1;
  --display:#000000;
  --serie-1:#566938;
  --serie-2:#B8A87E;
  --serie-3:#90AC6B;
  --serie-4:#B9B2A2;

  --tap:44px;
  --riga:56px;
  --r:14px;
  --font:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* tema scuro: segue il sistema, a meno che il pulsante non dica altro */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="chiaro"]){
    --fondo:#0C0D0E;
    --superficie:#151619;
    --superficie-2:#1B1D21;
    --testo:#EDEDE8;
    --testo-2:#8F8F89;
    --bordo:#26282D;
    --accento:#90AC6B;
    --su-accento:#10120C;
    --inverso-bg:#EDEDE8;
    --inverso-testo:#0E0F11;
    --ok-bg:#1D2618;
    --ok-bordo:#4E6636;
    --ok-testo:#B6CE92;
    --cassa-bg:#25231C;
    --cassa-testo:#CFC4AB;
    --ambra:#E0A93B;
  --ambra-testo:#E0A93B;
  --focus-1:#EDEDE8;
  --focus-2:#0C0D0E;
    --ambra-testo:#E0A93B;
    --focus-1:#EDEDE8;
    --focus-2:#0C0D0E;
    --ambra-bg:#2A2312;
    --ruggine:#E0705E;
    --ruggine-bg:#2C1917;
    --header-bg:#000000;
    --header-testo:#E2D8C3;
    --header-testo-2:#8D8778;
    --header-campo:#141416;
    --header-bordo:#33343A;
    --strip-bg:#1B1A16;
    --strip-testo:#CFC4AB;
    --strip-bordo:#2E2C25;
    --skel-a:#202126;
    --skel-b:#2A2B31;
    --zebra-a:#191A1E;
    --zebra-b:#1E1F24;
    --display:#E2D8C3;
    --serie-1:#90AC6B;
    --serie-2:#E2D8C3;
    --serie-3:#566938;
    --serie-4:#6B6B66;
  }
}
/* il pulsante vince sul sistema, in entrambe le direzioni */
:root[data-tema="scuro"]{
  --fondo:#0C0D0E;
  --superficie:#151619;
  --superficie-2:#1B1D21;
  --testo:#EDEDE8;
  --testo-2:#8F8F89;
  --bordo:#26282D;
  --accento:#90AC6B;
  --su-accento:#10120C;
  --inverso-bg:#EDEDE8;
  --inverso-testo:#0E0F11;
  --ok-bg:#1D2618;
  --ok-bordo:#4E6636;
  --ok-testo:#B6CE92;
  --cassa-bg:#25231C;
  --cassa-testo:#CFC4AB;
  --ambra:#E0A93B;
  --ambra-testo:#E0A93B;
  --focus-1:#EDEDE8;
  --focus-2:#0C0D0E;
  --ambra-bg:#2A2312;
  --ruggine:#E0705E;
  --ruggine-bg:#2C1917;
  --header-bg:#000000;
  --header-testo:#E2D8C3;
  --header-testo-2:#8D8778;
  --header-campo:#141416;
  --header-bordo:#33343A;
  --strip-bg:#1B1A16;
  --strip-testo:#CFC4AB;
  --strip-bordo:#2E2C25;
  --skel-a:#202126;
  --skel-b:#2A2B31;
  --zebra-a:#191A1E;
  --zebra-b:#1E1F24;
  --display:#E2D8C3;
  --serie-1:#90AC6B;
  --serie-2:#E2D8C3;
  --serie-3:#566938;
  --serie-4:#6B6B66;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--fondo);
  color:var(--testo);
  font-size:17px;line-height:1.45;
  -webkit-text-size-adjust:100%;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

header{
  background:var(--header-bg);color:var(--header-testo);
  padding:12px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  position:sticky;top:0;z-index:20;border-bottom:1px solid var(--header-bordo);
}
.logo-img{height:34px;width:auto;display:block}
.sub{font-size:13px;color:var(--header-testo-2)}
.strumenti{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--header-testo-2)}
.strumenti select,.tema button{
  font:inherit;font-size:13px;background:var(--header-campo);color:var(--header-testo);
  border:1px solid var(--header-bordo);border-radius:6px;padding:6px 10px;min-height:36px;cursor:pointer;
}
.tema{display:flex;gap:0}
.tema button{border-radius:0;border-left-width:0}
.tema button:first-child{border-radius:6px 0 0 6px;border-left-width:1px}
.tema button:last-child{border-radius:0 6px 6px 0}
.tema button[aria-pressed="true"]{background:var(--brand-verde-chiaro);color:#10120C;font-weight:600;border-color:var(--brand-verde-chiaro)}

.avviso-proto{
  background:var(--strip-bg);color:var(--strip-testo);font-size:13px;padding:8px 16px;
  border-bottom:1px solid var(--strip-bordo);
}

nav{display:flex;background:var(--superficie);border-bottom:1px solid var(--bordo);position:sticky;top:60px;z-index:19}
nav button{
  flex:1;min-height:var(--tap);border:0;background:none;font:inherit;font-size:15px;
  padding:12px 8px;color:var(--testo-2);border-bottom:3px solid transparent;cursor:pointer;
}
nav button[aria-selected="true"]{color:var(--testo);font-weight:600;border-bottom-color:var(--accento)}

main{padding:16px;max-width:1100px;margin:0 auto}
.vista{display:none}
.vista.attiva{display:block}
h2{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--testo-2);margin:0 0 12px;font-weight:600}
h3{font-size:16px;margin:26px 0 10px}
.nota{font-size:14px;color:var(--testo-2);margin:10px 0 0}

.passo{font-size:13px;color:var(--testo-2);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 8px}
.famiglie{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.famiglia{
  min-height:64px;border:1px solid var(--bordo);background:var(--superficie);color:var(--testo);
  border-radius:var(--r);font:inherit;font-size:16px;cursor:pointer;padding:10px;text-align:left;line-height:1.25;
}
.famiglia[aria-pressed="true"]{background:var(--accento);border-color:var(--accento);color:var(--su-accento);font-weight:600}
.campo{
  width:100%;min-height:var(--riga);font:inherit;font-size:26px;font-variant-numeric:tabular-nums;
  padding:10px 14px;border:1px solid var(--bordo);border-radius:var(--r);
  background:var(--superficie);color:var(--testo);
}
.campo::placeholder{color:var(--testo-2)}
.campo:focus{outline:3px solid var(--accento);outline-offset:1px}
.campo.testo{font-size:17px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{
  flex:1;min-width:110px;min-height:var(--riga);border:1px solid var(--bordo);
  background:var(--superficie);color:var(--testo);border-radius:var(--r);font:inherit;font-size:16px;cursor:pointer;
}
.seg button[aria-pressed="true"]{background:var(--inverso-bg);color:var(--inverso-testo);border-color:var(--inverso-bg);font-weight:600}
.salva{
  width:100%;min-height:60px;margin-top:20px;border:0;border-radius:100px;
  background:var(--accento);color:var(--su-accento);font:inherit;font-size:19px;font-weight:600;cursor:pointer;
}
.salva:disabled{background:var(--bordo);color:var(--testo-2);cursor:not-allowed}
.conferma{
  margin-top:14px;padding:14px;border-radius:var(--r);
  background:var(--ok-bg);border:1px solid var(--ok-bordo);color:var(--testo);font-size:16px;
}
.conferma[hidden]{display:none}

.tabella-wrap{overflow-x:auto;border:1px solid var(--bordo);border-radius:var(--r);background:var(--superficie)}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--bordo);white-space:nowrap}
th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--testo-2);font-weight:600}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
tr.stornata td{color:var(--testo-2);text-decoration:line-through}
tr.correzione td{color:var(--ruggine)}
.mini{
  min-height:38px;padding:0 12px;border:1px solid var(--bordo);background:var(--superficie);
  color:var(--testo);border-radius:100px;font:inherit;font-size:14px;cursor:pointer;
}

.controlli{
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--r);
  padding:14px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
}
.gruppo{display:flex;flex-direction:column;gap:6px}
.gruppo label{font-size:13px;color:var(--testo-2);text-transform:uppercase;letter-spacing:.05em}
.gruppo input[type=date],.gruppo select{
  font:inherit;font-size:16px;min-height:var(--tap);padding:8px 10px;
  border:1px solid var(--bordo);border-radius:8px;background:var(--superficie);color:var(--testo);
}
.vista-toggle{display:flex;border:1px solid var(--inverso-bg);border-radius:8px;overflow:hidden}
.vista-toggle button{
  min-height:var(--tap);padding:0 16px;border:0;background:var(--superficie);color:var(--testo);
  font:inherit;font-size:15px;cursor:pointer;
}
.vista-toggle button[aria-pressed="true"]{background:var(--inverso-bg);color:var(--inverso-testo);font-weight:600}

.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card{
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--r);padding:16px;
  display:flex;flex-direction:column;gap:6px;min-height:150px;
  position:relative;overflow:hidden;
}
.card::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:transparent}
.card.f-ok::after{background:var(--accento)}
.card.f-attn::after{background:var(--ambra)}
.card.f-err::after{background:var(--ruggine)}
.card.larga{grid-column:span 2}
@media (max-width:560px){ .card.larga{grid-column:auto} }
.card .etichetta{font-size:14px;color:var(--testo-2)}
.card .valore{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--display)}
.card .valuta{font-size:17px;font-weight:600;color:var(--testo-2);margin-left:4px}
.tag{
  align-self:flex-start;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 8px;border-radius:5px;background:var(--fondo);color:var(--testo-2);border:1px solid var(--bordo);
}
.tag.competenza{background:var(--ok-bg);color:var(--ok-testo);border-color:var(--ok-bordo)}
.tag.cassa{background:var(--cassa-bg);color:var(--cassa-testo);border-color:var(--cassa-testo)}
.copertura{font-size:13px;color:var(--testo-2);border-top:1px dashed var(--bordo);padding-top:8px;margin-top:auto}
.copertura strong{color:var(--testo)}
.delta{font-size:14px}
.delta.su{color:var(--accento)}
.delta.giu{color:var(--ruggine)}

.card.silenzio{
  background:repeating-linear-gradient(135deg,var(--zebra-a),var(--zebra-a) 8px,var(--zebra-b) 8px,var(--zebra-b) 16px);
  border-style:dashed;
}
.card.silenzio .valore{color:var(--testo-2);font-size:22px;font-weight:600}
.card.vuoto{border-style:dashed}
.card.negato{background:var(--fondo);border-style:dashed;align-items:flex-start;justify-content:center}
.skel{background:linear-gradient(90deg,var(--skel-a),var(--skel-b),var(--skel-a));border-radius:6px;height:30px;width:70%}
.avviso{
  border-left:4px solid var(--ambra);background:var(--ambra-bg);color:var(--testo);
  padding:12px 14px;border-radius:8px;font-size:15px;margin-bottom:12px;
}
.errore{border-left-color:var(--ruggine);background:var(--ruggine-bg)}
footer{padding:24px 16px 40px;color:var(--testo-2);font-size:13px;max-width:1100px;margin:0 auto}
.formula{font-size:13px;color:var(--testo-2);font-variant-numeric:tabular-nums}
.formula b{color:var(--testo)}
.stato-ok{align-self:flex-start;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:5px;background:var(--ok-bg);color:var(--ok-testo);border:1px solid var(--ok-bordo)}
.stato-att{align-self:flex-start;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:5px;background:var(--ambra-bg);color:var(--ambra);border:1px solid var(--ambra)}
.interno{border-left:4px solid var(--brand-verde-chiaro);background:var(--ok-bg);color:var(--testo);padding:12px 14px;border-radius:8px;font-size:15px;margin:12px 0}
tr.confermata td{background:var(--ok-bg)}
.famiglia .x{color:var(--ruggine);font-weight:700;margin-left:8px}
.famiglia.aggiungi{border-style:dashed;color:var(--testo-2)}
.sugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center;min-height:24px}
.sugg .chip{min-height:38px;padding:0 14px;border:1px solid var(--accento);background:var(--ok-bg);color:var(--ok-testo);border-radius:999px;font:inherit;font-size:15px;cursor:pointer}
.sugg .nuovo{font-size:13px;color:var(--testo-2)}

/* ---------- grafici: scala di serie, mai i colori semantici ---------- */
.donutrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.donut{
  width:116px;height:116px;border-radius:50%;flex:none;
  background:conic-gradient(var(--serie-1) 0 70.4%,var(--serie-2) 70.4% 90.1%,var(--serie-3) 90.1% 100%);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 55%,#000 56%);
  mask:radial-gradient(circle at 50% 50%,transparent 55%,#000 56%);
}
.leg{display:flex;flex-direction:column;gap:8px;font-size:15px;min-width:150px;flex:1}
.leg .r{display:flex;align-items:center;gap:8px}
.leg .sw{width:10px;height:10px;border-radius:3px;flex:none}
.leg .v{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700}
.bars{display:flex;align-items:flex-end;gap:8px;height:110px;padding-top:6px}
.bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;align-items:center;min-width:0}
.bar i{display:block;width:100%;max-width:36px;border-radius:6px 6px 2px 2px;background:color-mix(in srgb,var(--serie-1) 22%,var(--superficie-2));border:1px solid var(--bordo)}
.bar.hi i{background:var(--serie-1);border-color:transparent}
.bar s{text-decoration:none;font-size:11px;color:var(--testo-2)}
.fam{display:flex;flex-direction:column;gap:10px;font-size:15px}
.fam .f{display:grid;grid-template-columns:110px 1fr 90px;gap:10px;align-items:center}
.fam .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fam .g{height:9px;border-radius:100px;background:var(--superficie-2);overflow:hidden}
.fam .g i{display:block;height:100%;border-radius:100px;background:var(--serie-1)}
.fam .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:14px}

@media (min-width:800px){ body{font-size:16px} .campo{font-size:24px} }

/* ============================================================
   ESTENSIONE DELL'APPLICAZIONE
   Tutto cio' che sta sopra e' il prototipo v7, copiato e non riscritto: e' la
   base degli stili, e si estende. Qui sotto stanno solo le aggiunte, e sono
   tre. Due sono i fix obbligatori dell'audit del 2026-08-28, la terza e' la
   navigazione in basso richiesta dalla spec 20.6.6.
   ============================================================ */

/* FIX 3, `hidden` deve nascondere davvero.
   `[hidden]` del browser vale `display:none`, ma e' una regola del foglio di
   default: qualunque classe che dichiari un display la batte. Nel prototipo
   `.card{display:flex}` e `.famiglie{display:grid}` fanno esattamente questo, e
   il prototipo se n'era accorto solo per `.conferma`, che ha la sua riga
   dedicata. Il risultato a schermo era la card «permesso negato» visibile
   INSIEME al modulo di inserimento, cioe' due messaggi che si contraddicono
   davanti a chi lavora. Trovato al collaudo del 2026-08-28.
   `!important` qui e' giusto: `hidden` non e' una preferenza di stile, e'
   un'affermazione sul fatto che quell'elemento non c'e'. */
[hidden] { display: none !important; }

/* FIX 1, focus visibile. E' l'unico stato che il prototipo non disegnava:
   `grep focus-visible` sul v7 risponde zero. Senza, chi naviga da tastiera non
   sa dove si trova, e al banco con un tablet in dock la tastiera esiste.
   L'anello e' a due colori apposta: uno chiaro e uno scuro, concentrici. Un
   anello di un colore solo sparisce su meta' delle superfici di questa app,
   che ha un'intestazione nera e superfici bianche nella stessa schermata. */
:where(a, button, input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--focus-1);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-2);
  border-radius: 6px;
}

/* FIX 2, ambra leggibile sul tema chiaro.
   L'ambra del prototipo (#B8860B su #FDF6E3) rende 3,02:1 e sta sotto il
   minimo di 4,5:1 richiesto al testo piccolo; #8A6508 rende 4,93:1. Misurati
   entrambi il 2026-08-28, non ripresi da una tabella.
   Il token semantico `--ambra` NON cambia: continua a fare il filo di stato e i
   bordi, dove non e' testo e non ha un minimo di contrasto da rispettare. Cambia
   solo cio' che si legge. */
.stato-att { color: var(--ambra-testo); }
.avviso b, .avviso strong { color: var(--ambra-testo); }

/* AGGIUNTA, navigazione in basso (spec 20.1 e 20.6.6): barra fissa, stesse voci
   su tutti gli schermi, bersagli da 44px. La `nav` in alto del prototipo resta
   definita sopra e non si usa qui: si estende, non si riscrive. */
nav.basso {
  /* `top: auto` non e' pleonastico: la `nav` del prototipo e' sticky con
     `top:60px`, e su un elemento fixed `top` e `bottom` insieme lo STIRANO da
     60px fino in fondo. La barra diventava un rettangolo opaco alto 752px
     sopra tutto il contenuto. Trovato al collaudo a schermo del 2026-08-28,
     invisibile alla suite: e' esattamente il motivo per cui il collaudo UI a
     due viewport non e' opzionale. */
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30;
  display: flex; background: var(--superficie);
  border-top: 1px solid var(--bordo); border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
nav.basso button {
  flex: 1; min-height: var(--tap); border: 0; background: none; font: inherit;
  font-size: 14px; padding: 10px 8px 12px; color: var(--testo-2);
  border-bottom: 0; border-top: 3px solid transparent; cursor: pointer;
}
nav.basso button[aria-selected="true"] {
  color: var(--testo); font-weight: 600; border-top-color: var(--accento);
}
/* Spazio sotto il contenuto perche' la barra non copra l'ultima riga. */
body.con-barra main, body.con-barra footer { padding-bottom: 96px; }

/* Riga di lettura con l'autore, usata nella schermata di Claudio. */
.autore { font-size: 13px; color: var(--testo-2); }
.identita {
  font-size: 13px; color: var(--header-testo-2);
  display: flex; align-items: center; gap: 8px;
}
.identita b { color: var(--header-testo); font-weight: 600; }

/* Chi non ha il permesso non vede la card, e questo e' cio' che si mostra al
   suo posto quando serve dirlo: mai uno zero. */
.card.negato .valore { font-size: 17px; font-weight: 600; color: var(--testo-2); }

/* Il campo importo con la valuta accanto. */
.riga-importo { display: flex; gap: 8px; align-items: stretch; }
.riga-importo .campo { flex: 1; }
.riga-importo select {
  font: inherit; font-size: 17px; min-height: var(--riga); padding: 0 12px;
  border: 1px solid var(--bordo); border-radius: var(--r);
  background: var(--superficie); color: var(--testo); cursor: pointer;
}

/* Schermata di accesso: una colonna stretta, centrata, niente altro. */
.accesso { max-width: 380px; margin: 12vh auto 0; padding: 0 16px; }
.accesso .campo { font-size: 17px; margin-bottom: 10px; }
.accesso h1 { font-size: 20px; margin: 0 0 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Classi nate dallo spostamento degli stili fuori dagli attributi: senza, la
   CSP dovrebbe ammettere `unsafe-inline` sugli stili, che su una pagina che
   regge dati finanziari e' un permesso concesso per comodita'. */
.logo-accesso { height: 44px; margin-bottom: 18px; filter: invert(1); }
:root[data-tema="scuro"] .logo-accesso { filter: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .logo-accesso { filter: none; }
}
.nota-accesso { margin: 0 0 18px; }
.etichetta-campo {
  display: block; font-size: 13px; color: var(--testo-2);
  margin: 4px 0 4px;
}
.avviso.staccato { margin-top: 16px; }
.copertura.senza-linea { border: 0; margin-top: 8px; }