/* ============================================================
   IL CARATTERE

   Inter sta qui accanto, non su una CDN: la policy di sicurezza del server
   non consente fogli di stile esterni (`style-src 'self'`) e i file del
   font nemmeno (`default-src 'self'`), quindi da Google Fonts non
   arriverebbe niente e ogni schermata cadeva sul carattere di sistema —
   un'app che sul Mac e sul PC non era la stessa app. Stessa scelta gia'
   fatta per le icone.

   E' il file variabile: un peso qualunque fra 400 e 800 esce da qui, senza
   un file per grado.
   ============================================================ */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
    U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   TOKEN — due palette, una sola volta

   I valori stanno qui e basta: `--lt-*` per il chiaro, `--dk-*` per lo
   scuro. Sotto ci sono solo tre mappature che dicono quale delle due
   alimenta i token veri. Così una tinta si cambia in un punto solo, e le
   due rese non possono più divergere di nascosto.
   ============================================================ */
:root{
  /* ---- palette chiara: «Corallo Solare» ---- */
  --lt-bg:#FFF9F5; --lt-sidebar:#ffffff; --lt-card:#ffffff; --lt-border:#FBE7DA;
  --lt-text:#2E2119; --lt-muted:#9C8A7D;
  --lt-primary:#FF7A45; --lt-primary-soft:#FFEADD; --lt-primary-mid:#FFC2A0; --lt-primary-dark:#E85D25;
  /* Il pieno che deve reggere del testo bianco sopra anche di notte: e'
     l'unico arancione che non si schiarisce al buio, perche' se lo facesse
     il bianco ci sparirebbe. Vive sulla pastiglia delle notifiche. */
  --lt-primary-deep:#E85D25;
  /* Un gradino piu' chiaro di `--primary-soft`: la riga selezionata di una
     tabella e il riquadro scelto fra tanti. `--primary-soft` li' griderebbe. */
  --lt-primary-tint:#FFF4EE;
  --lt-track:#F3EDE7;
  --lt-green:#17C989; --lt-green-soft:#DCF7EC; --lt-green-dark:#0E8F63;
  --lt-amber:#FFB020; --lt-amber-soft:#FFF3DC; --lt-amber-dark:#9C6200;
  --lt-red:#FF4661;   --lt-red-soft:#FFE3E7;   --lt-red-dark:#C81C3D;
  --lt-blue:#1d5fd6;  --lt-blue-soft:#e6f0ff;
  --lt-violet:#8035c9; --lt-violet-soft:#f3e8fd;
  /* Neutri caldi: un grigio freddo in mezzo alla crema si legge come sporco,
     non come neutro. */
  --lt-hover:#FBF5F0;       /* superficie al passaggio del mouse */
  --lt-field:#FFFCFA;       /* fondo dei campi e delle righe alternate */
  --lt-neutral-ink:#6E6055; /* testo sui fondi neutri: --muted sotto gli 11px non arriva al contrasto */
  --lt-dim:#D9C8BA;         /* icone, pallini e bordi spenti */
  --lt-line-soft:#FDF2EA;   /* separatore fra le righe di una stessa lista */
  --lt-seg-3:#FFA26B; --lt-seg-4:#C94A1B;
  --lt-shadow:0 1px 2px rgba(20,20,43,.04),0 4px 14px rgba(20,20,43,.04);
  --lt-shadow-lift:0 2px 4px rgba(46,33,25,.05),0 12px 28px rgba(46,33,25,.10);
  --lt-scrim:rgba(20,20,43,.4);      /* il velo sotto modali e pannelli */
  /* Superfici rovesciate: tooltip, notifiche, barra di salvataggio, barra
     della selezione. Di giorno sono scure sul chiaro. Di notte non possono
     rovesciarsi di nuovo — diventerebbero chiare su chiaro — quindi
     restano scure e si staccano di un gradino dal fondo. */
  --lt-inverse:#2E2119; --lt-on-inverse:#FFF4EC; --lt-on-inverse-dim:#D9C6B6; --lt-on-inverse-neg:#FFA9B8;
  --lt-pink:#ec4899; --lt-pink-soft:#fdeaf3;   /* compleanni e incassi: l'unica famiglia che non dice uno stato */
  /* I grafici del Report: le ore non fatturate (una tinta del marchio piu'
     chiara del primario, che sta sopra senza gridare), il confronto col
     periodo precedente (un fantasma tratteggiato) e le righe di griglia. */
  --lt-nonbill:#FFC7A8; --lt-ghost:#E7DCD3; --lt-grid:#F1E7DF;
  --lt-on-accent:#ffffff;   /* testo e icone sopra un pieno di colore */

  /* ---- palette scura ----
     Stessa famiglia calda, spenta: i neutri tengono la punta di bruno della
     crema, se no di notte l’app diventa un’altra app. Le coppie tenue/scuro
     lavorano a rovescio: `--amber-soft` è il fondo e `--amber-dark` il testo
     che ci va sopra, quindi qui il fondo scende e il testo si schiarisce.
     Il primario invece non si muove: l’arancio di marca regge su tutti e due
     i fondi, e tenerlo uguale vuol dire che il bianco che ci va sopra ha di
     notte lo stesso contrasto che ha di giorno, non uno peggiore. */
  --dk-bg:#17120F; --dk-sidebar:#1B1613; --dk-card:#211A16; --dk-border:#3A2F27;
  --dk-text:#F6EEE7; --dk-muted:#A39386;
  --dk-primary:#FF7A45; --dk-primary-soft:#3A2419; --dk-primary-mid:#8A452A; --dk-primary-dark:#FFA97F;
  --dk-primary-deep:#E85D25;
  --dk-primary-tint:#2B1C15;
  --dk-track:#2E2620;
  --dk-green:#2ADFA0; --dk-green-soft:#10312A; --dk-green-dark:#5FE9BA;
  --dk-amber:#FFC04D; --dk-amber-soft:#3A2B12; --dk-amber-dark:#FFD488;
  --dk-red:#FF6376;   --dk-red-soft:#3C1C22;   --dk-red-dark:#FF9DAA;
  --dk-blue:#6FA3FF;  --dk-blue-soft:#16233C;
  --dk-violet:#B98BEA; --dk-violet-soft:#2A1B3D;
  --dk-hover:#2A221C;
  --dk-field:#1A1511;
  --dk-neutral-ink:#C6B6A8;
  --dk-dim:#6B5B4E;
  --dk-line-soft:#2A221C;
  --dk-seg-3:#FF9F6B; --dk-seg-4:#E0622C;
  /* Di notte l’ombra non si vede: quello che stacca una card dal fondo è il
     bordo. Le ombre restano, più profonde, per i livelli sospesi. */
  --dk-shadow:0 1px 2px rgba(0,0,0,.30),0 4px 14px rgba(0,0,0,.28);
  --dk-shadow-lift:0 2px 4px rgba(0,0,0,.34),0 12px 28px rgba(0,0,0,.44);
  --dk-scrim:rgba(0,0,0,.66);
  --dk-inverse:#352A23; --dk-on-inverse:#F6EEE7; --dk-on-inverse-dim:#A39386; --dk-on-inverse-neg:#FF9DAA;
  --dk-pink:#F472B6; --dk-pink-soft:#3A1526;
  --dk-nonbill:#7A4A33; --dk-ghost:#3E3029; --dk-grid:#2C221C;
  --dk-on-accent:#ffffff;   /* il pieno primario non cambia, quindi non cambia nemmeno cosa ci si scrive sopra */

  --radius:14px;
}

/* ---- mappatura: chiaro ----
   `.theme-light` è l’isola chiara per le pagine non ancora convertite. I
   token si ridichiarano sull’elemento e i figli li ereditano: la regola
   scura vale sulla radice e lì dentro non arriva. */
:root, .theme-light{
  color-scheme:light;
  --bg:var(--lt-bg); --sidebar:var(--lt-sidebar); --card:var(--lt-card); --border:var(--lt-border);
  --text:var(--lt-text); --muted:var(--lt-muted);
  --primary-deep:var(--lt-primary-deep);
  --primary:var(--lt-primary); --primary-soft:var(--lt-primary-soft); --primary-mid:var(--lt-primary-mid); --primary-dark:var(--lt-primary-dark); --primary-tint:var(--lt-primary-tint);
  --track:var(--lt-track);
  --green:var(--lt-green); --green-soft:var(--lt-green-soft); --green-dark:var(--lt-green-dark);
  --amber:var(--lt-amber); --amber-soft:var(--lt-amber-soft); --amber-dark:var(--lt-amber-dark);
  --red:var(--lt-red); --red-soft:var(--lt-red-soft); --red-dark:var(--lt-red-dark);
  --blue:var(--lt-blue); --blue-soft:var(--lt-blue-soft);
  --violet:var(--lt-violet); --violet-soft:var(--lt-violet-soft);
  --hover:var(--lt-hover); --field:var(--lt-field); --neutral-ink:var(--lt-neutral-ink);
  --dim:var(--lt-dim); --line-soft:var(--lt-line-soft);
  --seg-3:var(--lt-seg-3); --seg-4:var(--lt-seg-4);
  --shadow:var(--lt-shadow); --shadow-lift:var(--lt-shadow-lift);
  --scrim:var(--lt-scrim); --on-accent:var(--lt-on-accent);
  --inverse:var(--lt-inverse); --on-inverse:var(--lt-on-inverse); --on-inverse-dim:var(--lt-on-inverse-dim); --on-inverse-neg:var(--lt-on-inverse-neg);
  --pink:var(--lt-pink); --pink-soft:var(--lt-pink-soft);
  --nonbill:var(--lt-nonbill); --ghost:var(--lt-ghost); --grid:var(--lt-grid);

}

/* ---- mappatura: scuro, scelto a mano ---- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:var(--dk-bg); --sidebar:var(--dk-sidebar); --card:var(--dk-card); --border:var(--dk-border);
  --text:var(--dk-text); --muted:var(--dk-muted);
  --primary-deep:var(--dk-primary-deep);
  --primary:var(--dk-primary); --primary-soft:var(--dk-primary-soft); --primary-mid:var(--dk-primary-mid); --primary-dark:var(--dk-primary-dark); --primary-tint:var(--dk-primary-tint);
  --track:var(--dk-track);
  --green:var(--dk-green); --green-soft:var(--dk-green-soft); --green-dark:var(--dk-green-dark);
  --amber:var(--dk-amber); --amber-soft:var(--dk-amber-soft); --amber-dark:var(--dk-amber-dark);
  --red:var(--dk-red); --red-soft:var(--dk-red-soft); --red-dark:var(--dk-red-dark);
  --blue:var(--dk-blue); --blue-soft:var(--dk-blue-soft);
  --violet:var(--dk-violet); --violet-soft:var(--dk-violet-soft);
  --hover:var(--dk-hover); --field:var(--dk-field); --neutral-ink:var(--dk-neutral-ink);
  --dim:var(--dk-dim); --line-soft:var(--dk-line-soft);
  --seg-3:var(--dk-seg-3); --seg-4:var(--dk-seg-4);
  --shadow:var(--dk-shadow); --shadow-lift:var(--dk-shadow-lift);
  --scrim:var(--dk-scrim); --on-accent:var(--dk-on-accent);
  --inverse:var(--dk-inverse); --on-inverse:var(--dk-on-inverse); --on-inverse-dim:var(--dk-on-inverse-dim); --on-inverse-neg:var(--dk-on-inverse-neg);
  --pink:var(--dk-pink); --pink-soft:var(--dk-pink-soft);
  --nonbill:var(--dk-nonbill); --ghost:var(--dk-ghost); --grid:var(--dk-grid);

}

/* ---- mappatura: scuro, seguendo il sistema ----
   Serve perché vale già al primo colore dipinto: aspettare che il
   JavaScript legga la preferenza farebbe lampeggiare la crema. Chi ha
   scelto «Chiaro» a mano non viene toccato. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:var(--dk-bg); --sidebar:var(--dk-sidebar); --card:var(--dk-card); --border:var(--dk-border);
    --text:var(--dk-text); --muted:var(--dk-muted);
    --primary-deep:var(--dk-primary-deep);
    --primary:var(--dk-primary); --primary-soft:var(--dk-primary-soft); --primary-mid:var(--dk-primary-mid); --primary-dark:var(--dk-primary-dark); --primary-tint:var(--dk-primary-tint);
    --track:var(--dk-track);
    --green:var(--dk-green); --green-soft:var(--dk-green-soft); --green-dark:var(--dk-green-dark);
    --amber:var(--dk-amber); --amber-soft:var(--dk-amber-soft); --amber-dark:var(--dk-amber-dark);
    --red:var(--dk-red); --red-soft:var(--dk-red-soft); --red-dark:var(--dk-red-dark);
    --blue:var(--dk-blue); --blue-soft:var(--dk-blue-soft);
    --violet:var(--dk-violet); --violet-soft:var(--dk-violet-soft);
    --hover:var(--dk-hover); --field:var(--dk-field); --neutral-ink:var(--dk-neutral-ink);
    --dim:var(--dk-dim); --line-soft:var(--dk-line-soft);
    --seg-3:var(--dk-seg-3); --seg-4:var(--dk-seg-4);
    --shadow:var(--dk-shadow); --shadow-lift:var(--dk-shadow-lift);
    --scrim:var(--dk-scrim); --on-accent:var(--dk-on-accent);
    --inverse:var(--dk-inverse); --on-inverse:var(--dk-on-inverse); --on-inverse-dim:var(--dk-on-inverse-dim); --on-inverse-neg:var(--dk-on-inverse-neg);
    --pink:var(--dk-pink); --pink-soft:var(--dk-pink-soft);
    --nonbill:var(--dk-nonbill); --ghost:var(--dk-ghost); --grid:var(--dk-grid);

  }
}

/* `color` si eredita gia' calcolato, non si ricalcola guardando i token:
   dentro l'isola va rifatto a mano, se no il testo resta quello del tema
   di fuori — bianco su crema. */
.theme-light{color:var(--text);}
/* `.main` non ha un fondo suo: si vede quello del body. Sull'isola chiara
   il body e' scuro, quindi il fondo se lo deve dipingere da se'. */
.main.theme-light{background:var(--bg);}

/* ============================================================
   DENSITA' E MOVIMENTO — due preferenze di chi guarda

   Non sono temi: sono due attributi sulla radice che `applyLook()` mette
   leggendo `DB.settings`. La densita' vive come token perche' le tabelle
   dell'app sono decine e nessuna deve conoscere l'impostazione: usano
   `--row-y` e basta. Il movimento ridotto non spegne le transizioni, le
   accorcia a zero: cosi' nessun `transitionend` resta appeso.
   ============================================================ */
/* La densita' non e' solo una tabella. `--row-y` e `--head-y` coprivano
   `td` e `th`, e basta: liste, schede e cartoncini della bacheca avevano
   le loro spaziature scritte a mano, quindi «compatta» stringeva le
   tabelle e lasciava tutto il resto com'era. Tre token, tre mestieri:

   - `--row-y`  la riga di una tabella e di un elenco;
   - `--head-y` l'intestazione di una tabella;
   - `--card-y` il respiro dentro a una scheda o a un cartoncino. */
:root{--row-y:10px; --head-y:9px; --card-y:18px;}
:root[data-density="compact"]{--row-y:6px; --head-y:6px; --card-y:12px;}
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after{
  transition-duration:.001ms!important;
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  scroll-behavior:auto!important;
}

*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.app{display:grid;grid-template-columns:216px minmax(0,1fr);height:100vh;min-height:100vh;overflow:hidden;}

/* SIDEBAR */
.sidebar{background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 12px 14px 12px;height:100vh;overflow:hidden;}
.brand{display:flex;align-items:center;gap:10px;padding:5px 8px 18px 8px;}
/* marchio come da brandkit: fulmine su gradiente primario → ambra */
.brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--amber));display:flex;align-items:center;justify-content:center;color:var(--on-accent);flex-shrink:0;}
.brand-mark svg{width:16px;height:16px;}
.brand-name{font-weight:700;font-size:14.5px;letter-spacing:-.2px;}
.nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;}
.nav-item:hover{background:var(--hover);color:var(--text);}
.nav-item.active{background:var(--primary-soft);color:var(--primary-dark);}
.nav-item svg{width:16px;height:16px;flex-shrink:0;}
.nav-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-divider{height:1px;background:var(--border);margin:10px 4px;}
.avatar{position:relative;overflow:hidden;width:29px;height:29px;border-radius:50%;background:var(--primary);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
/* la favicon copre le iniziali; se non carica viene rimossa e riemergono */
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:15%;background:var(--lt-card);}
.avatar.sm{width:21px;height:21px;font-size:9.5px;}
.avatar.lg{width:52px;height:52px;font-size:18px;border-radius:14px;}

/* MAIN */
/* `scrollbar-gutter:stable` e non `auto`: senza, la barra di scorrimento
   compare quando il contenuto supera lo schermo e in quel momento **tutto
   si stringe di una quindicina di pixel**. Si vede all'avvio — lo
   scheletro e' corto, la pagina vera e' lunga — ma succede anche
   aggiungendo una riga a una tabella lunga quanto lo schermo. Lo spazio
   si riserva sempre: una striscia vuota a destra e' meglio di un salto. */
.main{height:100vh;overflow-y:auto;scrollbar-gutter:stable;padding:20px 24px 24px 24px;max-width:none;width:100%;min-width:0;position:relative;}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;flex-wrap:wrap;gap:14px;}
.topbar h1{font-size:21px;margin:0 0 3px 0;letter-spacing:-.3px;}
.topbar .sub{color:var(--muted);font-size:13px;}
.topbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
/* Il menu «...» della pagina: alto come gli altri pulsanti della testata,
   ma quadrato, perche' dentro c'e' solo l'icona. */
.topbar-actions .action-menu>.btn{padding:9px 11px;}
.search-box{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 12px;color:var(--muted);font-size:13px;width:260px;max-width:32vw;position:relative;}
.search-box input{border:none;outline:none;background:transparent;font-size:13px;width:100%;color:var(--text);}
.btn{border:none;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;white-space:nowrap;}
.btn svg{width:15px;height:15px;}
.btn-primary{background:var(--primary);color:var(--on-accent);}
.btn-primary:hover{background:var(--primary-dark);}
.btn-ghost{background:var(--card);border:1px solid var(--border);color:var(--text);}
.btn-ghost:hover{background:var(--hover);}
.btn-soft{background:var(--primary-soft);color:var(--primary-dark);}
.btn-danger{background:var(--red-soft);color:var(--red-dark);}
/* Il rosso scarico: l'azione distruttiva resta leggibile e a misura piena, ma
   non chiede di essere guardata per prima. Il bordo trasparente non si vede,
   serve a tenere la stessa altezza di `.btn-ghost`, che il bordo ce l'ha. */
.btn-danger-ghost{background:transparent;border:1px solid transparent;color:var(--red-dark);}
.btn-danger-ghost:hover{background:var(--red-soft);}
.btn.sm{padding:6px 10px;font-size:12px;}
/* Il terzo gradino: i bottoni dentro una riga di elenco o una card, dove
   anche `sm` ruba troppa altezza. */
.btn.xs{padding:4px 9px;font-size:11.5px;border-radius:8px;gap:5px;}
.btn.xs svg{width:13px;height:13px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
select.plain{border:1px solid var(--border);border-radius:10px;padding:8px 26px 8px 11px;font-size:13px;background-color:var(--card);color:var(--text);}
.date-range-picker{display:flex;align-items:center;gap:8px;}