/* Celercheck - foglio di stile applicativo (nessuna dipendenza esterna) */

:root {
    /* Fondali: dal piu' profondo alla superficie sollevata */
    --c-bg: #0f1420;
    --c-rail: #131a27;
    --c-surface: #161c2a;
    --c-panel: #1d2536;
    --c-raised: #212a3d;
    --c-border: #253046;
    --c-border-strong: #33405c;

    --c-text: #e8ecf4;
    --c-text-soft: #c3ccdd;
    --c-muted: #93a0b8;
    --c-faint: #6c7a93;

    /* Accento verde: azioni primarie, selezione corrente, collegamenti.
       Ha preso il posto del blu, che dall'interfaccia e' sparito del tutto. */
    --c-primary: #178048;
    --c-primary-dark: #12693a;
    --c-primary-bright: #4ade80;
    --c-primary-soft: rgba(74, 222, 128, .14);

    --c-danger: #f87171;
    --c-danger-soft: rgba(248, 113, 113, .13);
    --c-danger-line: rgba(248, 113, 113, .38);
    --c-warning: #fbbf24;
    --c-warning-soft: rgba(251, 191, 36, .13);
    --c-warning-line: rgba(251, 191, 36, .34);
    /* Informativo: teal, non verde. Il verde ora e' l'accento delle azioni e
       resta il colore di "conforme": due verdi diversi sarebbero indistinguibili. */
    --c-info: #2dd4bf;
    --c-info-soft: rgba(45, 212, 191, .13);
    --c-info-line: rgba(45, 212, 191, .34);
    --c-success: #4ade80;
    /* Arancione dei viaggi conclusi. Staccato dall'ambra dell'avviso, che
       compare nella stessa tabella sotto "Assegnato": due gialli vicini si
       leggerebbero come lo stesso stato. */
    --c-accent-orange: #f97316;
    --c-accent-orange-soft: rgba(249, 115, 22, .15);
    --c-success-soft: rgba(74, 222, 128, .13);
    --c-success-line: rgba(74, 222, 128, .34);

    --c-topbar: rgba(15, 20, 32, .82);
    --c-row-hover: rgba(255, 255, 255, .028);
    --c-badge-bg: rgba(255, 255, 255, .07);
    --c-track: rgba(255, 255, 255, .08);
    --c-hover-line: #40506f;

    /* Marchio: l'oro tiene il titolo di pagina, il pulsante di ritorno e la
       voce di menu attiva - i punti dove prima stava il verde.
       Il testo bianco sui pieni sta sopra 4.5:1, verificato col calcolo. */
    --c-title: #e0b53c;
    --c-nav: #8f660a;
    --c-nav-dark: #7a5808;
    --c-delete: #b91c1c;
    --c-delete-dark: #a11818;
    --c-menu-active: #d6a513;
    --c-menu-active-soft: rgba(214, 165, 19, .16);

    /* Fondi delle statistiche in home. Sul tema scuro un pastello vero
       accecherebbe: si usa la stessa tinta in velatura, con l'inchiostro
       dell'icona nel passo chiaro della sua famiglia. */
    --c-tile-1: rgba(214, 165, 19, .15);
    --c-tile-1-ink: #e6bb47;
    --c-tile-2: rgba(155, 109, 240, .15);
    --c-tile-2-ink: #b794f6;
    --c-tile-3: rgba(194, 56, 44, .15);
    --c-tile-3-ink: #f08a80;
    --c-tile-4: rgba(18, 162, 166, .15);
    --c-tile-4-ink: #43c9cc;
    /* Il quinto, per le scadenze: arancione caldo, il piu' lontano dagli
       altri quattro e l'unico tono che qui dice "guarda il calendario". */
    --c-tile-5: rgba(249, 115, 22, .15);
    --c-tile-5-ink: #f0a05f;

    /* Pastiglie della barra in alto: tinte piene, **le stesse nei due temi**.
       Non hanno un doppione nel blocco chiaro apposta: un pieno saturo si
       legge su entrambi i fondali, e sdoppiarlo darebbe due barre diverse per
       la stessa informazione. Ogni tinta porta il suo inchiostro perche' il
       testo ci sta sopra: sull'oro il bianco starebbe sotto 3:1, sugli altri
       quattro il bianco supera 4.5:1. */
    --c-pill-1: #e0a800;  --c-pill-1-ink: #201800;
    --c-pill-2: #7c3aed;  --c-pill-2-ink: #ffffff;
    --c-pill-3: #dc2626;  --c-pill-3-ink: #ffffff;
    --c-pill-4: #0f766e;  --c-pill-4-ink: #ffffff;
    --c-pill-5: #c2410c;  --c-pill-5-ink: #ffffff;

    /* Colori dei grafici: non sono quelli dell'interfaccia. Passano il
       validatore del metodo dataviz su tutte le coppie - banda di luminosita',
       soglia di croma, separazione CVD (peggiore 12.4, soglia 8), visione
       normale (19.4) e contrasto sulla superficie. Non modificarli a occhio.
       Il grigio degli annullati e' fuori dalla soglia di croma di proposito:
       e' la categoria inerte, e la legenda porta comunque l'etichetta. */
    --c-chart-series: #1fa35d;
    --c-chart-assigned: #bb8d12;
    --c-chart-completed: #12a2a6;
    --c-chart-progress: #9b6df0;
    --c-chart-rejected: #c2382c;
    --c-chart-cancelled: #8a93a2;
    --c-chart-grid: rgba(255, 255, 255, .07);
    --c-chart-track: rgba(255, 255, 255, .05);

    --r-control: 10px;
    --r-card: 16px;
    --shadow-pop: 0 18px 40px -12px rgba(0, 0, 0, .65), 0 4px 12px -4px rgba(0, 0, 0, .5);
    --sidebar-width: 244px;
    --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Tema chiaro ---------- */
/* Vale per l'area di lavoro. La barra laterale resta scura in ogni tema:
   e' il punto fermo dell'interfaccia e da' il contrasto al contenuto. */

[data-theme="light"] {
    --c-bg: #f2f4f7;
    --c-surface: #ffffff;
    --c-panel: #f5f7fa;
    --c-raised: #ffffff;
    --c-border: #e2e6ec;
    --c-border-strong: #c9d0da;

    --c-text: #131a26;
    --c-text-soft: #3a4658;
    --c-muted: #5c6a7d;
    --c-faint: #616e82;

    --c-primary: #157347;
    --c-primary-dark: #11603b;
    --c-primary-bright: #157347;
    --c-primary-soft: rgba(21, 115, 71, .1);

    --c-danger: #c2261c;
    --c-danger-soft: rgba(194, 38, 28, .08);
    --c-danger-line: rgba(194, 38, 28, .28);
    --c-warning: #8a5a00;
    --c-warning-soft: rgba(180, 118, 0, .1);
    --c-warning-line: rgba(180, 118, 0, .28);
    --c-info: #0f7c85;
    --c-info-soft: rgba(15, 124, 133, .09);
    --c-info-line: rgba(15, 124, 133, .26);
    --c-success: #12694f;
    --c-accent-orange: #c2410c;
    --c-accent-orange-soft: rgba(194, 65, 12, .1);
    --c-success-soft: rgba(18, 105, 79, .09);
    --c-success-line: rgba(18, 105, 79, .26);

    --c-topbar: rgba(255, 255, 255, .85);
    --c-row-hover: rgba(19, 26, 38, .028);
    --c-badge-bg: rgba(19, 26, 38, .06);
    --c-track: rgba(19, 26, 38, .08);

    --c-hover-line: #aeb8c6;

    /* Su fondo bianco l'oro chiaro sparirebbe: serve il passo scuro. */
    --c-title: #8a6408;

    /* Fondi pastello delle statistiche: qui sono pastelli veri, perche' la
       superficie e' bianca. Ogni tinta ha il suo inchiostro per l'icona. */
    --c-tile-1: #fbf1d6;
    --c-tile-1-ink: #8a6408;
    --c-tile-2: #efe7fd;
    --c-tile-2-ink: #5b32b0;
    --c-tile-3: #fce8e5;
    --c-tile-3-ink: #9e2318;
    --c-tile-4: #dff4f5;
    --c-tile-4-ink: #0b6b73;
    --c-tile-5: #fdeadd;
    --c-tile-5-ink: #9a4a10;

    /* Serie del tema chiaro, validata sulla superficie bianca:
       peggiore separazione CVD 10.8, vista normale 18.7. */
    --c-chart-series: #157347;
    --c-chart-assigned: #b0820c;
    --c-chart-completed: #0093a6;
    --c-chart-progress: #7442e0;
    --c-chart-rejected: #bd2a1e;
    --c-chart-cancelled: #5b6472;
    --c-chart-grid: rgba(19, 26, 38, .09);
    --c-chart-track: rgba(19, 26, 38, .06);
    --shadow-pop: 0 18px 40px -12px rgba(19, 26, 38, .22), 0 4px 12px -4px rgba(19, 26, 38, .12);
    color-scheme: light;
}

/* La barra laterale e la scheda di accesso non seguono il tema: si riportano
   i token scuri in locale, cosi' ogni regola scritta una volta vale per
   entrambe le zone senza doverla duplicare. */
.sidebar,
.login-wrap {
    --c-bg: #0f1420;
    --c-surface: #161c2a;
    --c-panel: #1d2536;
    --c-raised: #212a3d;
    --c-border: #253046;
    --c-border-strong: #33405c;
    --c-text: #e8ecf4;
    --c-text-soft: #c3ccdd;
    --c-muted: #93a0b8;
    --c-faint: #6c7a93;
    --c-primary-bright: #4ade80;
    --c-primary-soft: rgba(74, 222, 128, .14);
    --c-hover-line: #40506f;
    --c-badge-bg: rgba(255, 255, 255, .07);
    --c-title: #e0b53c;
    --c-menu-active: #d6a513;
    --c-menu-active-soft: rgba(214, 165, 19, .16);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; color-scheme: dark; }

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    /* IBM Plex Sans, servito dal nostro dominio (vedi fonts.css). Scelto per le
       cifre: ha le tabellari vere, e questo e' un gestionale che allinea
       colonne di numeri. Il fallback di sistema regge finche' il file arriva. */
    font-family: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-feature-settings: 'cv02', 'cv03', 'cv04';
    -webkit-font-smoothing: antialiased;
}

/* Superfici del browser: selezione, cursore, barre, focus.
   Anche cio' che non disegniamo appartiene al progetto. */
::selection { background: rgba(74, 222, 128, .3); color: #fff; }
:root { accent-color: var(--c-primary-bright); caret-color: var(--c-primary-bright); }
* { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: var(--c-border-strong);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #465877; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
    outline: 2px solid var(--c-primary-bright);
    outline-offset: 2px;
    border-radius: 6px;
}

a { color: var(--c-primary-bright); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

/* Icone: sempre allineate al testo, spessore uniforme, colore ereditato */
.icon, .nav-icon, .stat-icon svg {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -.2em;
}

/* Scala tipografica fissa, passo 1.15: molti livelli, poco contrasto */
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; color: var(--c-text); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
h4 { font-size: .9rem; }
p { margin: 0 0 .8rem; }

/* ---------- Layout ---------- */

.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: var(--c-rail);
    border-right: 1px solid var(--c-border);
    color: var(--c-muted);
    padding: 1.15rem .75rem 1.15rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    /* Colonna: il marchio in fondo si appoggia alla base anche con pochi menu */
    display: flex;
    flex-direction: column;
}
.sidebar .nav { flex: 1 0 auto; }

.sidebar-foot {
    margin-top: auto;
    padding: 1.1rem .6rem .25rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}
/* Marchio 3WEB. Smorzato: e' una firma, non una voce di menu, e a piena
   forza il bianco pieno tirerebbe l'occhio piu' della voce attiva. */
.sidebar-mark { display: block; width: 78px; height: auto; opacity: .5; }
.sidebar-mark-link { display: inline-flex; transition: opacity .15s var(--ease); }
.sidebar-mark-link:hover .sidebar-mark { opacity: .85; }
.sidebar-version { font-size: .68rem; color: var(--c-faint); font-variant-numeric: tabular-nums; }

.sidebar .brand {
    display: block;
    color: var(--c-text);
    padding: .25rem .6rem 1.5rem;
}
.sidebar .brand:hover { text-decoration: none; }
.brand-name { font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; }
.brand-logo {
    display: block;
    max-width: 100%;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left center;
}
.sidebar .brand small {
    display: block;
    margin-top: .3rem;
    font-size: .69rem;
    line-height: 1.35;
    color: var(--c-faint);
}

.nav-group + .nav-group { margin-top: 1.35rem; }
.nav-group-title {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-faint);
    padding: 0 .6rem .45rem;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: var(--r-control);
    color: var(--c-muted);
    font-size: .875rem;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav-link .nav-icon { color: var(--c-faint); transition: color .15s var(--ease); }
.nav-link:hover { background: rgba(255, 255, 255, .045); color: var(--c-text); text-decoration: none; }
.nav-link:hover .nav-icon { color: var(--c-text-soft); }
.nav-link:active { background: rgba(255, 255, 255, .07); }

.nav-link.active {
    background: var(--c-menu-active-soft);
    color: #fff;
    font-weight: 550;
}
/* L'icona resta com'era negli altri stati: qui segue solo l'accento. */
.nav-link.active .nav-icon { color: var(--c-menu-active); }

/* Accento appoggiato al bordo destro del rettangolo, dentro il suo raggio.
   Prima galleggiava fuori dalla pastiglia e la barra laterale lo tagliava:
   ora e' agganciato al rettangolo e si vede sempre. */
.nav-link.active::after {
    content: '';
    position: absolute;
    top: 50%;
    right: .45rem;
    transform: translateY(-50%);
    width: 3px;
    height: 56%;
    border-radius: 3px;
    background: var(--c-menu-active);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--c-topbar);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--c-border);
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
/* E' il contenitore a incollarsi, non la sola barra del titolo: i contatori
   devono restare in vista con lei, e due sticky annidati non lo fanno. */
.topbar-stack { position: sticky; top: 0; z-index: 10; }
.topbar strong { font-weight: 600; letter-spacing: -.01em; }
.topbar .spacer { flex: 1; }
.topbar .user { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--c-muted); }

/* ---------- Striscia dei contatori ---------- */
/* Cinque pastiglie sotto il titolo, su tutte le pagine: dicono cosa chiede
   una mossa adesso senza dover tornare al cruscotto. Sono piccole di
   proposito - stanno sopra ogni pagina, e una fascia alta ruberebbe lo
   spazio al contenuto che si e' venuti a leggere. */

.headline {
    display: flex;
    gap: .5rem;
    padding: .5rem 1.5rem .65rem;
    background: var(--c-topbar);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--c-border);
    /* Sotto una certa larghezza scorrono invece di andare a capo: la barra
       resta di un'altezza sola e prevedibile. */
    overflow-x: auto;
    scrollbar-width: thin;
}
/* Pastiglie a tinta piena. Il testo ci sta sopra, quindi ogni fondo si porta
   il suo inchiostro: sull'oro il bianco non si legge (sta sotto 3:1), sugli
   altri quattro si'. Sono gli stessi colori nei due temi, ed e' voluto - un
   pieno saturo regge sia sul fondo scuro sia su quello bianco, e cambiarlo
   darebbe due barre diverse per la stessa informazione. */
.headline .hl {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .75rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--c-pill);
    color: var(--c-pill-ink);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    transition: filter .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.headline .hl:hover { text-decoration: none; filter: brightness(1.1); transform: translateY(-1px); }
.headline .hl-icon,
.headline .hl-label { color: inherit; }
.headline .hl-icon { display: inline-flex; opacity: .9; }
.headline .hl-value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* A zero la pastiglia si spegne: resta la sua tinta, ma smorzata, cosi'
   l'occhio cade solo dove c'e' davvero qualcosa da fare. Il colore non
   sparisce mai del tutto, altrimenti la barra cambierebbe forma a ogni
   caricamento e non si troverebbe piu' la pastiglia a colpo d'occhio. */
.headline .hl:not(.alarm) { opacity: .62; }
.headline .hl.alarm { box-shadow: 0 2px 10px -3px var(--c-pill); }

.headline .hl.tile-1 { --c-pill: var(--c-pill-1); --c-pill-ink: var(--c-pill-1-ink); }
.headline .hl.tile-2 { --c-pill: var(--c-pill-2); --c-pill-ink: var(--c-pill-2-ink); }
.headline .hl.tile-3 { --c-pill: var(--c-pill-3); --c-pill-ink: var(--c-pill-3-ink); }
.headline .hl.tile-4 { --c-pill: var(--c-pill-4); --c-pill-ink: var(--c-pill-4-ink); }
.headline .hl.tile-5 { --c-pill: var(--c-pill-5); --c-pill-ink: var(--c-pill-5-ink); }

/* Sullo stretto restano il numero e l'icona: l'etichetta e' la prima cosa
   sacrificabile, il colore e la posizione bastano a riconoscere la pastiglia. */
@media (max-width: 720px) {
    .headline { padding-left: 1rem; padding-right: 1rem; }
    .headline .hl-label { display: none; }
}

.content { padding: 1.75rem 1.5rem 4rem; max-width: 1500px; width: 100%; }

/* La destinazione di un'ancora non deve finire sotto la barra incollata. */
[id="scadenze"] { scroll-margin-top: 7.5rem; }

/* Piu' spazio sopra un titolo che sotto */
.page-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.page-head .spacer { flex: 1; }
.page-head h1 { margin-bottom: .2rem; color: var(--c-title); }
.page-head .subtitle { color: var(--c-muted); font-size: .875rem; margin: 0; }

.toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar .spacer { flex: 1; }

/* ---------- Card ---------- */
/* L'elevazione si dichiara una volta sola: bordo, non bordo piu' ombra */

.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.card-head {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .spacer { flex: 1; }
.card-body { padding: 1.25rem 1.15rem; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 1.15rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---------- Statistiche ---------- */

/* Ogni riquadro porta la sua tinta: il colore distingue le quattro misure a
   colpo d'occhio, ma non e' l'unica cosa che le distingue - restano icona ed
   etichetta. La tinta si sceglie con .tile-1..4, non a caso nel markup. */
.stat {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--c-tile-bg, var(--c-surface));
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 1.15rem 1.15rem 1.25rem;
    color: inherit;
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.stat.tile-1 { --c-tile-bg: var(--c-tile-1); --c-tile-ink: var(--c-tile-1-ink); }
.stat.tile-2 { --c-tile-bg: var(--c-tile-2); --c-tile-ink: var(--c-tile-2-ink); }
.stat.tile-3 { --c-tile-bg: var(--c-tile-3); --c-tile-ink: var(--c-tile-3-ink); }
.stat.tile-4 { --c-tile-bg: var(--c-tile-4); --c-tile-ink: var(--c-tile-4-ink); }

a.stat:hover {
    text-decoration: none;
    border-color: var(--c-hover-line);
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
}

/* Pastiglia dell'icona: un tondo pieno, non un'ombra colorata */
.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: .9rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--c-tile-ink, var(--c-primary-bright));
    font-size: 1.1rem;
}
[data-theme="light"] .stat-icon { background: rgba(255, 255, 255, .72); }
.stat.alarm .stat-icon { color: var(--c-tile-ink, var(--c-warning)); }

.stat .value {
    display: block;
    font-size: 2rem;
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.03em;
    /* Era #fff fisso: sul tema chiaro spariva, bianco su scheda bianca. */
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}
.stat .label {
    display: block;
    color: var(--c-muted);
    font-size: .8125rem;
    font-weight: 500;
    margin-top: .35rem;
}

/* ---------- Grafici ---------- */
/* Segni sottili, griglia arretrata, testo con i colori del testo:
   il colore identifica il segno, non l'etichetta che gli sta accanto. */

.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart.donut { width: 200px; height: 200px; flex: 0 0 auto; }

.ch-grid { stroke: var(--c-chart-grid); stroke-width: 1; }
.ch-axis, .ch-label { fill: var(--c-faint); font-size: 11px; }
.ch-value { fill: var(--c-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-zero { stroke: var(--c-border-strong); stroke-width: 2; }

.ch-bar { fill: var(--c-chart-series); transition: opacity .12s var(--ease); }
.ch-bar:hover { opacity: .75; }
/* Corsia della barra orizzontale: dice quanto manca al massimo della scala,
   che in una graduatoria e' meta' dell'informazione. */
.ch-track-bar { fill: var(--c-chart-track); }

/* Spezzate. Il tratto e' spesso e i vertici arrotondati: una linea sottile su
   fondo scuro si perde, e gli angoli vivi fanno sembrare rumore un dato che
   oscilla. Il colore arriva dalla classe della serie, come per le fette. */
.ch-line {
    stroke: var(--c-chart-series);
    stroke-width: 2.25;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.ch-dot { fill: var(--c-chart-series); stroke: var(--c-surface); stroke-width: 1.5; }
.ch-line.ch-progress, .ch-dot.ch-progress { stroke: var(--c-chart-progress); }
.ch-dot.ch-progress { fill: var(--c-chart-progress); stroke: var(--c-surface); }
.ch-area { fill: var(--c-chart-series); opacity: .12; stroke: none; }

.ch-marker { stroke: var(--c-border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-marker-label { fill: var(--c-faint); font-size: 10px; }

.ch-track { stroke: var(--c-chart-track); }
.ch-slice { transition: opacity .12s var(--ease); }
.ch-slice:hover { opacity: .78; }
.ch-centre-value { fill: var(--c-text); font-size: 30px; font-weight: 650; letter-spacing: -.02em; }
.ch-centre-label { fill: var(--c-faint); font-size: 12px; }

/* Una sola dichiarazione per tinta: la usano fetta e quadretto di legenda */
.ch-assigned { stroke: var(--c-chart-assigned); }
.ch-progress { stroke: var(--c-chart-progress); }
.ch-completed { stroke: var(--c-chart-completed); }
.ch-rejected { stroke: var(--c-chart-rejected); }
.ch-cancelled { stroke: var(--c-chart-cancelled); }
.legend-key.ch-series { background: var(--c-chart-series); }
.legend-key.ch-assigned { background: var(--c-chart-assigned); }
.legend-key.ch-progress { background: var(--c-chart-progress); }
.legend-key.ch-completed { background: var(--c-chart-completed); }
.legend-key.ch-rejected { background: var(--c-chart-rejected); }
.legend-key.ch-cancelled { background: var(--c-chart-cancelled); }

.chart-with-legend { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; }
.legend { flex: 1; min-width: 210px; list-style: none; margin: 0; padding: 0; font-size: .8125rem; }
.legend li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--c-border);
}
.legend li:last-child { border-bottom: 0; }
.legend-key { width: .7rem; height: .7rem; border-radius: 3px; flex: 0 0 auto; }
.legend-label { flex: 1; color: var(--c-text-soft); }
.legend-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.legend-share { color: var(--c-muted); font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }

/* Legenda di una spezzata: sta sotto il grafico e su una riga sola, perche'
   le serie sono due o tre e non una tabella di percentuali. */
.legend-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: .5rem;
}
.legend-inline li { border-bottom: 0; padding: 0; gap: .45rem; }

/* ---------- Finestra di dialogo ---------- */
/* <dialog> nativo: fuoco, Esc e sfondo li gestisce il browser. */

.modal {
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    background: var(--c-surface);
    color: var(--c-text);
    padding: 0;
    width: min(94vw, 460px);
    box-shadow: var(--shadow-pop);
}
.modal::backdrop { background: rgba(6, 10, 18, .62); }
.modal-wide { width: min(96vw, 880px); max-height: 88vh; }
.modal-wide .modal-card { max-height: 88vh; overflow-y: auto; }

/* ---------- Suggerimenti ---------- */

.suggest-field { position: relative; }
.suggest-box {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 100%;
    margin: .2rem 0 0;
    padding: .25rem;
    list-style: none;
    max-height: 15rem;
    overflow-y: auto;
    background: var(--c-raised);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-control);
    box-shadow: var(--shadow-pop);
}
.suggest-box li {
    padding: .4rem .6rem;
    border-radius: 6px;
    font-size: .85rem;
    cursor: pointer;
}
.suggest-box li:hover, .suggest-box li.active { background: var(--c-primary-soft); color: var(--c-text); }

/* ---------- Tabelle ---------- */

.table-wrap { overflow-x: auto; }
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
table.data th, table.data td {
    padding: .7rem .9rem;
    text-align: left;
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
}
table.data thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-weight: 600;
    font-size: .7188rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-faint);
    background: var(--c-panel);
    white-space: nowrap;
}
table.data tbody tr { transition: background-color .12s var(--ease); }
table.data tbody tr:hover { background: var(--c-row-hover); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data td.actions { text-align: right; white-space: nowrap; }

.empty { padding: 3.5rem 1.5rem; text-align: center; color: var(--c-muted); font-size: .875rem; }

/* ---------- Form ---------- */

.form-row { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 1.15rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field.full { grid-column: 1 / -1; }
label { font-size: .8125rem; font-weight: 600; color: var(--c-text-soft); }
.hint { font-size: .76rem; color: var(--c-muted); line-height: 1.45; }

/* Si elencano i tipi da ESCLUDERE, non quelli da vestire: con l'elenco
   positivo bastava un campo `tel` o `datetime-local` per farlo ricadere
   sullo stile nativo del browser, vistosamente diverso dagli altri. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]):not([type=reset]):not([type=hidden]),
select, textarea {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-control);
    font: inherit;
    background: var(--c-panel);
    color: var(--c-text);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--c-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--c-hover-line); }
input:focus, select:focus, textarea:focus {
    outline: none;
    background: var(--c-raised);
    border-color: var(--c-primary-bright);
    box-shadow: 0 0 0 3px var(--c-primary-soft);
}
input[disabled], select[disabled], textarea[disabled],
input[readonly], textarea[readonly] {
    background: var(--c-badge-bg);
    color: var(--c-faint);
    cursor: not-allowed;
    border-color: var(--c-border);
}
input.error, select.error, textarea.error { border-color: var(--c-danger); }
input.error:focus, select.error:focus, textarea.error:focus { box-shadow: 0 0 0 3px var(--c-danger-soft); }
textarea { min-height: 92px; resize: vertical; }
.field-error { color: var(--c-danger); font-size: .76rem; }
input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=tel] {
    font-variant-numeric: tabular-nums;
}
/* Safari allarga i campi data oltre la colonna se non glielo si vieta. */
input[type=date], input[type=time], input[type=datetime-local] { min-width: 0; }
select {
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a0b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: 1.05em;
}
/* var() non e' consentito dentro url(): la freccia si ridisegna per tema. */
[data-theme="light"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6a7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

input[type=file] { width: 100%; font: inherit; font-size: .8125rem; color: var(--c-text-soft); }
input[type=file]::file-selector-button {
    margin-right: .7rem;
    padding: .4rem .8rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-control);
    background: var(--c-panel);
    color: var(--c-text);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
input[type=file]::file-selector-button:hover { background: var(--c-raised); border-color: var(--c-hover-line); }

/* Logo aziendale nelle impostazioni */
.logo-setting { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.logo-fields { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: .85rem; }
.logo-previews { display: flex; flex-direction: column; gap: .5rem; width: 220px; }
.logo-previews .hint { text-align: center; }
.logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    min-height: 84px;
    padding: .75rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-control);
}
/* Scacchiera: mostra la trasparenza di un PNG senza fondo */
.logo-preview.light {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e6e9ee 25%, transparent 25%, transparent 75%, #e6e9ee 75%),
        linear-gradient(45deg, #e6e9ee 25%, transparent 25%, transparent 75%, #e6e9ee 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    border-color: var(--c-border-strong);
}
.logo-preview.dark { background: var(--c-rail); border-color: var(--c-border-strong); }
.logo-preview img { max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; }

.check { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.check input { width: auto; }
.checks { display: flex; flex-wrap: wrap; gap: .5rem 1.15rem; }

/* ---------- Bottoni ---------- */
/* Ogni comando ha: normale, hover, focus, premuto, disattivato */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border-radius: var(--r-control);
    border: 1px solid var(--c-border-strong);
    background: var(--c-panel);
    color: var(--c-text);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover { background: var(--c-raised); border-color: var(--c-hover-line); text-decoration: none; }
.btn:active { background: var(--c-panel); }

.btn.primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn.primary:hover { background: #2f6fe0; border-color: #2f6fe0; }
.btn.primary:active { background: var(--c-primary-dark); }

.btn.danger { background: var(--c-delete); border-color: var(--c-delete); color: #fff; }
.btn.danger:hover { background: var(--c-delete-dark); border-color: var(--c-delete-dark); }
.btn.danger:active { background: #8f1414; }

/* Navigazione: riporta indietro, non modifica nulla */
.btn.back { background: var(--c-nav); border-color: var(--c-nav); color: #fff; }
.btn.back:hover { background: var(--c-nav-dark); border-color: var(--c-nav-dark); }
.btn.back:active { background: #0d5232; }

.btn.small { padding: .32rem .65rem; font-size: .7813rem; }
.btn.icon-only { padding: .4rem; width: 2rem; height: 2rem; }
.btn.icon-only .icon { width: 1.05rem; height: 1.05rem; vertical-align: 0; }

/* Si mostra l'icona di dove si va, non quella di dove si e' */
.theme-toggle .theme-light { display: none; }
[data-theme="light"] .theme-toggle .theme-dark { display: none; }
[data-theme="light"] .theme-toggle .theme-light { display: inline-flex; }
.theme-toggle span { display: inline-flex; }
.btn[disabled], .btn[aria-disabled=true] { opacity: .42; cursor: not-allowed; pointer-events: none; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* ---------- Badge e avvisi ---------- */

.badge {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .7188rem;
    font-weight: 600;
    line-height: 1.45;
    background: var(--c-badge-bg);
    color: var(--c-text-soft);
    white-space: nowrap;
}
.badge.green { background: var(--c-success-soft); color: var(--c-success); }
.badge.red { background: var(--c-danger-soft); color: var(--c-danger); }
.badge.yellow { background: var(--c-warning-soft); color: var(--c-warning); }
.badge.orange { background: var(--c-accent-orange-soft); color: var(--c-accent-orange); }
.badge.blue { background: var(--c-info-soft); color: var(--c-info); }
.badge.grey { background: var(--c-badge-bg); color: var(--c-muted); }

.alert {
    padding: .8rem 1rem;
    border-radius: var(--r-control);
    border: 1px solid;
    margin-bottom: 1.15rem;
    font-size: .875rem;
}
.alert.success { background: var(--c-success-soft); border-color: var(--c-success-line); color: var(--c-success); }
.alert.danger { background: var(--c-danger-soft); border-color: var(--c-danger-line); color: var(--c-danger); }
.alert.warning { background: var(--c-warning-soft); border-color: var(--c-warning-line); color: var(--c-warning); }
.alert.info { background: var(--c-info-soft); border-color: var(--c-info-line); color: var(--c-info); }

/* ---------- Filtri e paginazione ---------- */

.filters { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.filters .field { min-width: 150px; }
.filters .field.grow { flex: 1; min-width: 220px; }

.pagination {
    display: flex;
    gap: .35rem;
    align-items: center;
    padding: .9rem 1.15rem;
    border-top: 1px solid var(--c-border);
    font-size: .8125rem;
    flex-wrap: wrap;
}
.pagination .spacer { flex: 1; }
.pagination a, .pagination span.current {
    padding: .3rem .6rem;
    border: 1px solid var(--c-border-strong);
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
    transition: background-color .15s var(--ease);
}
.pagination a { color: var(--c-text-soft); }
.pagination a:hover { background: var(--c-panel); text-decoration: none; }
.pagination span.current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.pagination .count { color: var(--c-muted); border: 0; font-variant-numeric: tabular-nums; }

/* ---------- Dettagli ---------- */

.kv { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: .55rem 1rem; font-size: .875rem; }
.kv dt { color: var(--c-muted); }
.kv dd { margin: 0; color: var(--c-text); }

.timeline { list-style: none; margin: 0; padding: 0; font-size: .8125rem; }
.timeline li { padding: .55rem 0; border-bottom: 1px solid var(--c-border); }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { color: var(--c-faint); font-size: .75rem; font-variant-numeric: tabular-nums; }

.chain { border-left: 1px solid var(--c-border-strong); margin-left: .5rem; padding-left: 1.15rem; }
.chain > li { margin-bottom: 1rem; list-style: none; position: relative; }
.chain > li::before {
    content: '';
    position: absolute;
    left: -1.42rem;
    top: .45rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--c-primary-bright);
    box-shadow: 0 0 0 3px var(--c-surface);
}

.bar { height: 6px; background: var(--c-track); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--c-primary-bright); border-radius: 999px; }

.mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; letter-spacing: -.01em; }
.muted { color: var(--c-muted); }
.small { font-size: .8rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.num, .value { font-variant-numeric: tabular-nums; }
.mt { margin-top: 1.25rem; }
.mb0 { margin-bottom: 0; }

/* ---------- Login ---------- */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 90% at 50% 0%, #1a2338 0%, var(--c-bg) 60%);
    padding: 1rem;
}
.login-panel { width: 100%; max-width: 390px; }
/* La scheda di accesso resta scura anche in tema chiaro (vedi i token
   locali in cima): e' li' che un logo in negativo resta leggibile. */
.login-logo {
    display: block;
    max-width: 240px;
    max-height: 56px;
    width: auto;
    height: auto;
    margin: 0 auto 1.25rem;
    object-fit: contain;
}
.login-card {
    width: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 2rem 1.75rem;
    box-shadow: var(--shadow-pop);
}
.login-card h1 { text-align: center; margin-bottom: .3rem; }
.login-card .subtitle { text-align: center; color: var(--c-muted); margin-bottom: 1.75rem; font-size: .85rem; }
.login-card .btn { width: 100%; }

/* ---------- Firma del fornitore ---------- */

.app-footer {
    margin-top: auto;                 /* si appoggia al fondo anche a pagina corta */
    padding: 1.25rem 1.5rem 1.75rem;
    border-top: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
}
.footer-logo { display: block; width: 118px; height: auto; opacity: .9; }
.footer-text { margin: 0; font-size: .75rem; line-height: 1.6; color: var(--c-muted); }
.footer-text a { color: var(--c-muted); text-decoration: underline; text-underline-offset: 2px; }
.footer-text a:hover { color: var(--c-primary-bright); }
.footer-sep { color: var(--c-faint); margin: 0 .15rem; }

.login-footer { margin-top: 1.75rem; text-align: center; }
.login-footer img { width: 118px; height: auto; opacity: .75; }

/* ---------- Movimento ---------- */
/* Il movimento comunica stato, non decora. Nessuna sequenza all'apertura. */

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Stampa ---------- */
/* Le etichette e le schede escono su carta bianca: qui il tema scuro va spento. */

@media print {
    :root {
        --c-bg: #fff;
        --c-surface: #fff;
        --c-panel: #fff;
        --c-raised: #fff;
        --c-border: #ccc;
        --c-border-strong: #999;
        --c-text: #000;
        --c-text-soft: #222;
        --c-muted: #444;
        --c-faint: #555;
    }
    html { color-scheme: light; }
    body { background: #fff; color: #000; }
    .sidebar, .topbar, .toolbar, .no-print { display: none !important; }
    .content { padding: 0; max-width: none; }
    .card { border: 0; border-radius: 0; background: #fff; }
    .badge { border: 1px solid #999; background: #fff !important; color: #000 !important; }
    table.data thead th { position: static; background: #fff; color: #000; }
    a { color: #000; }
}

@media (max-width: 980px) {
    .layout { flex-direction: column; }
    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex: none;
        border-right: 0;
        border-bottom: 1px solid var(--c-border);
        padding-bottom: 1rem;
    }
    .sidebar .brand { padding-bottom: 1rem; }
    .sidebar .nav { flex: none; display: flex; flex-wrap: wrap; gap: .35rem; }
    .sidebar-foot { margin-top: 1rem; padding-top: .8rem; }
    .nav-group { display: contents; }
    .nav-group-title { display: none; }
    .nav-link.active::after { display: none; }
    .nav-link.active { box-shadow: inset 0 -2px 0 var(--c-menu-active); }
    .content { padding: 1.15rem .9rem 2.5rem; }
    table.data thead th { position: static; }
}

/* Righe del compositore di checklist: ogni voce e' un blocco a se', con un
   filo a sinistra che tiene insieme i suoi due form-row. */
.item-row {
    border-left: 3px solid var(--c-border);
    padding: .9rem 0 .1rem 1rem;
    margin-bottom: .9rem;
}
.item-row:hover { border-left-color: var(--c-primary); }
.item-row .form-row { margin-bottom: .7rem; }
.item-row.is-dragging {
    opacity: .55;
    border-left-color: var(--c-title);
    background: var(--c-row-hover);
}

/* Maniglia di trascinamento. Sta su una riga sua, sopra i campi: infilata
   accanto a un input finirebbe per essere afferrata per sbaglio proprio da
   chi voleva scrivere. */
.item-drag {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .45rem;
}
.item-drag .grip {
    display: inline-flex;
    align-items: center;
    padding: .1rem .15rem;
    border: 0;
    background: none;
    color: var(--c-muted);
    cursor: grab;
    border-radius: 6px;
    touch-action: none;
}
.item-drag .grip:hover { color: var(--c-primary); }
.item-drag .grip:active { cursor: grabbing; }
.item-drag .grip:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.item-drag .grip svg { width: 18px; height: 18px; }
.item-num {
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--c-muted);
}
.item-row .form-row:last-child { margin-bottom: 0; }

/* Anteprima di un documento caricato: sta dentro la scheda senza sfondare. */
.doc-preview {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    margin: 0 auto;
    border-radius: var(--r-card);
    border: 1px solid var(--c-border);
}
.doc-frame { width: 100%; height: 70vh; border: 1px solid var(--c-border); border-radius: var(--r-card); }

/* ---------- Fascia dei grafici in home ---------- */
/* Tre grafici in due righe: l'andamento largo, gli stati stretti accanto,
   il carico per autista sotto a tutta larghezza. Sotto i 900px si impila. */
.board {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.board > .card { margin: 0; }
.board-wide { grid-column: 1 / -1; }

@media (max-width: 900px) {
    .board { grid-template-columns: 1fr; }
}

/* Titolo che separa i blocchi della home. Serve a spezzare il muro di schede
   tutte uguali: senza, la pagina e' una colonna indistinta di riquadri. */
.section-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 2rem 0 .9rem;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--c-faint);
}
.section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}

/* ---------- Azioni di riga negli elenchi ---------- */
/* Tre icone in fondo alla riga: apri, modifica, elimina. Sono pulsanti veri
   (link o submit di un form), non icone cliccabili: restano raggiungibili da
   tastiera e il titolo dice cosa fanno, perche' un'icona da sola non lo dice. */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    justify-content: flex-end;
}
.row-actions form { display: inline-flex; margin: 0; }
.row-actions .btn.icon-only { width: 1.85rem; height: 1.85rem; padding: 0; }
.row-actions .btn.icon-only .icon { width: 1rem; height: 1rem; vertical-align: 0; }

/* Il cestino resta neutro finche' non lo si punta: una fila di pulsanti rossi
   trasformerebbe ogni elenco in un campo minato. */
.row-actions .btn.danger-ghost {
    background: transparent;
    border-color: var(--c-border);
    color: var(--c-muted);
}
.row-actions .btn.danger-ghost:hover {
    background: var(--c-danger-soft);
    border-color: var(--c-danger-line);
    color: var(--c-danger);
}

/* Il compositore delle checklist: il comando di aggiunta sta in fondo, dopo
   l'ultima voce, dove finisce lo sguardo di chi sta scrivendo l'elenco. */
.repeat-foot {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    padding-top: .35rem;
    border-top: 1px dashed var(--c-border);
    margin-top: 1.1rem;
}

/* Confronto con la checklist precedente: si evidenzia il valore CAMBIATO,
   non quello di oggi. E' la differenza a dire qualcosa, e il simbolo accanto
   evita che l'informazione viaggi sul solo colore. */
td.changed { color: var(--c-danger); font-weight: 600; }
.changed-mark { margin-left: .25rem; font-weight: 700; }

/* Riga della nota nel precompilatore del mezzo: appartiene alla voce sopra,
   quindi niente bordo che le separi e un rientro che lo faccia capire. */
tr.note-row td {
    border-bottom: 1px solid var(--c-border);
    padding-top: 0;
    padding-left: 2rem;
}
tr.note-row + tr td { padding-top: .8rem; }