/* ============================================================
   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 */
  --lt-glass:rgba(255,255,255,.56); --lt-glass-line:rgba(255,255,255,.8); --lt-glass-ink:#6E6055;   /* il vetro del piede della barra laterale */
  --lt-play-idle:#FF7A45; --lt-play-idle-shadow:0 3px 8px -2px rgba(232,93,37,.55);
  /* 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-glass:rgba(30,23,19,.55); --dk-glass-line:rgba(255,255,255,.09); --dk-glass-ink:#D9C6B6;
  --dk-play-idle:#2E2119; --dk-play-idle-shadow:none;
  --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);
  --glass:var(--lt-glass); --glass-line:var(--lt-glass-line); --glass-ink:var(--lt-glass-ink); --play-idle:var(--lt-play-idle); --play-idle-shadow:var(--lt-play-idle-shadow);
  --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);
  --glass:var(--dk-glass); --glass-line:var(--dk-glass-line); --glass-ink:var(--dk-glass-ink); --play-idle:var(--dk-play-idle); --play-idle-shadow:var(--dk-play-idle-shadow);
  --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);
    --glass:var(--dk-glass); --glass-line:var(--dk-glass-line); --glass-ink:var(--dk-glass-ink); --play-idle:var(--dk-play-idle); --play-idle-shadow:var(--dk-play-idle-shadow);
    --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. */
/* Il movimento (`marchio.css`, e chi vuole muoversi come il marchio):
   i tempi e le tre curve. `--ease-back` è solo per la crescita delle
   barre e per il pop finale. */
:root{--motion-micro:120ms; --motion-fast:240ms; --motion-standard:560ms; --motion-hero:1.8s; --motion-stagger:120ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-inout:cubic-bezier(.65,0,.35,1); --ease-back:cubic-bezier(.34,1.3,.64,1);}
: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;}
/* ============================================================
   LE TRE SOGLIE, E SONO TRE

   Fino a qui il guscio non ne aveva **nessuna**: `.app` era due colonne
   fisse a qualunque larghezza, e su un telefono la barra laterale si
   mangiava 216 dei 375 pixel disponibili senza un modo per chiuderla. Le
   pagine invece ne avevano una sessantina, sparse su una ventina di
   valori diversi (1400, 1380, 1320, 1280, 1240, 1200, 1180...), cioe'
   nessuna scala: ognuna decisa sul posto guardando quella pagina.

   Da qui in avanti sono queste tre, e si scrivono sempre uguali:

     1100px  la finestra si stringe: le griglie larghe passano a meno
             colonne, i riquadri a fianco vanno sotto
      900px  **la barra laterale diventa un cassetto** sopra al contenuto,
             che da qui in giu' prende tutta la larghezza
      640px  telefono: una colonna sola, i margini si stringono, le
             testate si impilano

   Tre e non dieci perche' una soglia in piu' e' un layout in piu' da
   guardare in tutti e due i temi, e nessuno li guarda tutti. Le soglie
   vecchie delle pagine si riportano su queste mano a mano che si passa
   di li'; non si aggiungono valori nuovi.
   ============================================================ */
.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:7px;padding:5px 8px 18px 6px;}
/* marchio come da brandkit: fulmine su gradiente primario → ambra */
.brand-mark{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-name{font-size:25px;}
.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;}
.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;}
/* Il blocco del titolo. Il nome serve allo scheletro d'avvio, che gli
   riserva la larghezza: `min-width:0` perche' un titolo lungo non deve
   poter allargare la testata oltre la finestra. */
.topbar-title{min-width:0;}
.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;}

/* ============================================================
   LE SOGLIE DEL GUSCIO, IN FONDO AL FOGLIO

   Stanno qui e non accanto alle regole che correggono, perche' a
   parita' di peso vince chi il browser legge **dopo**: messe in mezzo,
   `justify-content` della testata e la larghezza della ricerca — che
   sono scritte piu' sotto — le passavano sopra, e la testata su un
   telefono restava quella di prima. Si vedeva solo provandola.
   ============================================================ */

/* Sotto ai 900 la barra esce dal flusso — diventa un cassetto, e lo dice
   `sidebar.css` — quindi qui resta una colonna sola. Vale anche per la
   barra compressa: un `.app.rail` pesa quanto `.app` piu' uno, e senza
   nominarlo vincerebbe lui con i suoi 76px. */
@media (max-width:900px){
  .app,.app.rail{grid-template-columns:minmax(0,1fr);}
  .main{padding:16px;}
  /* Il richiamo del cassetto e' il primo figlio della testata, e con
     `space-between` finiva a un capo e il titolo in mezzo alla pagina:
     sta accanto al titolo, e sono i pulsanti a tenersi il fondo. */
  .topbar{justify-content:flex-start;align-items:center;}
  .topbar-actions{margin-left:auto;}
}
/* Su un telefono i pulsanti prendono una riga tutta loro. **Non si
   impila la testata per intero**: il richiamo del menu e il titolo sono
   la stessa cosa — dove sono e come si esce — e separarli su due righe
   costa un terzo dello schermo per niente. */
@media (max-width:640px){
  .main{padding:14px 14px 20px;}
  .topbar{gap:10px 12px;}
  .topbar h1{font-size:19px;}
  .topbar-actions{flex:1 0 100%;margin-left:0;justify-content:flex-start;}
  /* La ricerca prende quello che avanza invece di un terzo di finestra:
     `max-width:32vw` su un telefono sono centoventi pixel, dentro ai
     quali non ci sta nemmeno la parola «Cerca». */
  .search-box{flex:1 1 auto;width:auto;max-width:none;min-width:120px;}
}