/* ═══ STILE PORTALE — blocco comune dell'ecosistema (ppx-ecosistema/blocchi/stile-portale)
   Origine: megasim-hub app/static/css/main.css, 02/10/2026 (restyle in produzione).
   Tolte le sezioni del dominio dell'Hub (colore per tipo, Prova API, griglia scenari).
   Restano alcune classi nate su pagine dell'Hub ma riusabili: elenco nel LEGGIMI.
   Regola: il portale che lo monta cambia SOLO il gruppo --lime (accento); il resto
   si tiene com'è, così pagine e componenti si copiano 1:1. Le migliorie tornano qui. ═══ */
/* ════════════════════════════════════════════════════════════════════
   MEGASIM HUB — main.css
   Impianto «SaaS professionale» (riferimento Superdesign, 01/10/2026):
   superfici bianche su Mist, bordi da 1px al posto delle ombre, Inter in
   pesi 400–700. L'accento resta il Drive Lime. Contrasti verificati
   (audit 01/10/2026): ogni testo ≥ 4,5:1 sui fondi in uso, bordi dei
   campi ≥ 3:1, indicatore di focus scuro su tutto ciò che si raggiunge
   da tastiera.
   Un solo file CSS, sezioni commentate.
   ════════════════════════════════════════════════════════════════════ */

/* ── VARIABILI ──────────────────────────────────────────────────── */
:root {
    /* Accento: Drive Lime, obbligatorio. Mai come colore di testo su
       bianco (non si legge): per testi e icone «accese» c'è --lime-testo. */
    --lime:        #C7EF02;  /* azione primaria, barre, indicatori        */
    --lime-scuro:  #B4D902;  /* hover del lime                            */
    --lime-tenue:  #F1FAC8;  /* fondi leggeri: voce attiva, badge, bolle  */
    --lime-testo:  #5A6B00;  /* testo/icone accese su fondo chiaro        */
    --secondario:  #F4A13A;  /* seconda serie nei grafici, avvisi         */
    --secondario-tenue: #FEF1DE;

    --ink:         #111827;  /* titoli e testo principale                 */
    --grafite:     #181818;  /* superfici scure (terminale Prova API)     */
    --mist:        #F6F6F4;  /* sfondo dell'applicazione (Mist Drive Easy, caldo) */
    --hover:       #F3F4F6;  /* hover di voci e righe                     */
    --binario:     #EBEBE6;  /* fondo delle schede a segmenti (sul Mist)  */
    --binario-bordo: #E0E0DA;
    --grigio:      #5C6370;  /* testo secondario/label (≥ 5,4:1 su ogni fondo) */
    --sottile:     #686C73;  /* didascalie, intestazioni tabelle (≥ 4,7:1)   */
    --bianco:      #FFFFFF;  /* superfici (card, input)                   */
    --bordo:       #E5E7EB;
    --bordo-chiaro:#F0F0F0;  /* separatori di riga                        */
    --bordo-input: #8F949C;  /* bordo dei campi: 3:1 sul bianco (WCAG 1.4.11) */
    --focus:       0 0 0 2px var(--bianco), 0 0 0 4px var(--ink);  /* anello di focus */

    --raggio:      12px;     /* card                                      */
    --raggio-sm:   8px;      /* bottoni, campi, voci di menu              */
    --ombra:       0 1px 2px rgba(0, 0, 0, 0.05);

    /* Semantici (feedback): il «sì» parla la lingua dell'accento */
    --ok-bg: #F1FAC8;   --ok-testo: #4D5C00;   --ok-bordo: #C7EF02;
    --no-bg: #FEF2F2;   --no-testo: #B91C1C;   --no-bordo: #FCA5A5;
    --attesa-bg: #FEF1DE; --attesa-testo: #92560A; --attesa-bordo: #F4A13A;
    --info-bg: #EFF6FF; --info-testo: #1D4ED8; --info-bordo: #BFDBFE;

    /* Colore per TIPO di cosa (solo icone e loro tessere, mai fondi di card o testi):
       gruppo indaco, autoscuola verde acqua, postazione lime (il prodotto),
       licenza magenta. Scelti per non confondersi con i colori che hanno già un
       significato: lime azione, rosso errore, ambra attesa, blu info, viola admin. */
    --tipo-gruppo: #4338CA;     --tipo-gruppo-bg: #EEF0FF;
    --tipo-autoscuola: #0F766E; --tipo-autoscuola-bg: #E3F5F2;
    --tipo-postazione: #5A6B00; --tipo-postazione-bg: #F1FAC8;
    --tipo-licenza: #A3216B;    --tipo-licenza-bg: #FCEEF6;

    /* Contenuti visibili solo all'admin: colore univoco, non usato altrove */
    --admin-testo: #6A3FB5;

    /* Tinte di contorno, un tempo scritte a mano nelle regole (16/10/2026, modalità scura:
       ogni colore deve avere un nome per poter cambiare col tema) */
    --bordo-forte: #D1D5DB;     /* bordo dei pulsanti, barra di scorrimento, freccia «↕» */
    --lime-bordo: #A3C402;      /* bordo delle superfici lime (pulsante primario, interruttore acceso) */
    --lime-bordo-scuro: #8FAC02;
    --secondario-testo: #9A5A0C; /* testo sulla tinta secondaria tenue */
    --mist-scuro: #EDEDE9;      /* Mist un tono sotto: i pozzi del trascinamento */
    --scheda-hover: rgba(255, 255, 255, 0.7);  /* passaggio del mouse sulle schede a segmenti */
    --velo-leggero: rgba(17, 24, 39, 0.06);    /* fondo appena accennato (contatori nelle schede) */

    /* Costanti che NON cambiano col tema: il testo sul lime è sempre scuro, il bianco
       pieno resta bianco (testo sulle superfici grafite) */
    --su-lime: #111827;
    --bianco-puro: #FFFFFF;
}

/* ── MODALITÀ SCURA (16/10/2026, 06-STILE-COMUNE §2-bis) ─────────────────
   Lo stile di sempre è la modalità chiara. La scura ridefinisce SOLO i token:
   nessuna regola cambia, le pagine non sanno in che tema sono. Si accende con
   `data-tema="scuro"` sull'<html>, che base.html mette PRIMA del foglio di stile
   leggendo la scelta della persona (localStorage `tema`), e si cambia con
   l'interruttore «Modalità scura» in fondo al menu (static/js/tema.js). Il lime
   resta l'accento; `--lime-testo` diventa il lime stesso, perché sul fondo scuro
   si legge. Contrasti: testo ≥ 4,5:1 sulle superfici, bordi dei campi ≥ 3:1.
   Un portale con un accento suo ridefinisce qui anche il gruppo --lime. */
:root[data-tema="scuro"] {
    color-scheme: dark;         /* tendine, calendari e barre native scure */
    --lime-scuro:  #D4F53A;     /* hover del lime: più chiaro, non più scuro */
    --lime-tenue:  #2B3407;     /* fondi leggeri: voce attiva, pastiglie */
    --lime-testo:  #C7EF02;     /* testo e icone accese: il lime stesso (≥ 11:1) */
    --secondario-tenue: #3A2708;

    --ink:         #ECEDEF;     /* testo principale */
    --mist:        #121214;     /* sfondo dell'applicazione */
    --hover:       #26272B;
    --binario:     #1A1B1E;     /* fondo delle schede a segmenti */
    --binario-bordo: #2E3035;
    --grigio:      #A7ADB8;     /* testo secondario (≥ 7:1 sulle superfici) */
    --sottile:     #9CA2AD;
    --bianco:      #1D1E22;     /* superfici: card, campi, voce attiva delle schede */
    --bordo:       #2F3136;
    --bordo-chiaro:#26272B;
    --bordo-input: #6F7580;     /* 3,3:1 sulla superficie (WCAG 1.4.11) */
    --focus:       0 0 0 2px var(--bianco), 0 0 0 4px #E5E7EB;
    --ombra:       0 1px 2px rgba(0, 0, 0, 0.4);

    --ok-bg: #26300A;   --ok-testo: #D6F25C;   --ok-bordo: #8DA800;
    --no-bg: #3B1619;   --no-testo: #F5A3A3;   --no-bordo: #7F1D1D;
    --attesa-bg: #3A2708; --attesa-testo: #F7C57E; --attesa-bordo: #B45309;
    --info-bg: #15213A; --info-testo: #9DBCF7; --info-bordo: #1E3A8A;

    --tipo-gruppo: #A5B4FC;     --tipo-gruppo-bg: #23264A;
    --tipo-autoscuola: #5EEAD4; --tipo-autoscuola-bg: #0F2E2B;
    --tipo-postazione: #C7EF02; --tipo-postazione-bg: #2B3407;
    --tipo-licenza: #F0A6D2;    --tipo-licenza-bg: #3D1230;

    --admin-testo: #B99BF0;

    --bordo-forte: #3F4147;
    --lime-bordo: #8DA800;
    --lime-bordo-scuro: #A3C402;
    --secondario-testo: #F4B860;
    --mist-scuro: #0C0C0E;
    --scheda-hover: rgba(255, 255, 255, 0.06);
    --velo-leggero: rgba(255, 255, 255, 0.08);
}
/* la sidebar resta grafite in tutti e due i temi: nella scura si stacca dal fondo
   con il suo bordo, un filo più chiaro */
:root[data-tema="scuro"] .sidebar { --sb-bordo: #2C2C2E; }
/* L'interruttore «Modalità scura» in fondo al menu (markup nel LEGGIMI): una voce come
   le altre (icona `palette` e testo allineati alle voci sopra) con a destra un binario
   sole | luna; il pomello lime sta sul lato acceso e porta l'icona del tema in uso */
button.side-link { width: 100%; background: none; border: 0; font-family: inherit; text-align: left;
    cursor: pointer; color: var(--sb-testo); }
.side-tema-testo { flex: 1; }
.tema-interruttore { position: relative; width: 44px; height: 22px; border-radius: 999px;
    flex-shrink: 0; background: var(--sb-campo); box-shadow: inset 0 0 0 1px var(--sb-guida); }
.tema-interruttore .ico { width: 12px; height: 12px; }
.tema-sole, .tema-luna { position: absolute; top: 50%; transform: translateY(-50%);
    display: inline-flex; color: var(--sb-sottile); }
.tema-sole { left: 6px; }
.tema-luna { right: 6px; }
.tema-pomello { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--lime); color: var(--su-lime);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .15s ease; }
:root[data-tema="scuro"] .tema-pomello { transform: translateX(22px); }
:root:not([data-tema="scuro"]) #side-tema .se-scuro,
:root[data-tema="scuro"] #side-tema .se-chiaro { display: none; }

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--mist);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bordo-forte); border-radius: 4px; }
/* Pallini di stato: icona("●") pieno, icona("○") vuoto, col colore del testo */
.punto, .punto-vuoto { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; vertical-align: 0.1em; flex-shrink: 0; }
.punto-vuoto { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
/* <small> di serie è all'83%: mai sotto la soglia di leggibilità */
small { font-size: max(11px, 0.85em); }
/* filtro «dal … al …» nelle testate: va a capo sui telefoni */
.filtro-periodo { flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--grigio); }
.filtro-periodo label { display: inline-flex; align-items: center; gap: 6px; }
/* elenco puntato dentro un avviso */
.alert-elenco { margin: 8px 0 0; padding-left: 20px; }
.alert-elenco li + li { margin-top: 3px; }
/* codici, chiavi, uuid: monospazio leggibile, non va a capo */
.codice { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95em;
    font-weight: 600; white-space: nowrap; }
/* Classi d'uso comune al posto degli stili scritti a mano nei template */
.tenue { color: var(--grigio); }
.nota { color: var(--grigio); font-size: 12px; line-height: 1.5; }
.nota-sopra { color: var(--grigio); font-size: 12px; line-height: 1.5; margin: 0 0 10px; }
.piccolo { font-size: 11px; }
.leggero { font-weight: 400; }
.no-a-capo { white-space: nowrap; }
.cresce { flex: 1; }
.in-riga { display: inline; }
.a-destra { text-align: right; }
.testo-codice { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
/* i link dentro le frasi si riconoscono: sottolineati */
.card p a:not(.btn), .alert a:not(.btn), .muted a:not(.btn), .nota a:not(.btn),
.page-sub a:not(.btn), .sottolineato { text-decoration: underline; text-underline-offset: 2px; }
/* Testo di contorno (spiegazioni sotto un titolo o in una card) */
.muted { color: var(--grigio); font-size: 13px; line-height: 1.5; }
/* Separatore orizzontale dentro una card */
.divider { border: 0; border-top: 1px solid var(--bordo); margin: 16px 0; }
/* Testo solo per gli screen reader (titoli e etichette nascoste a vista) */
/* l'attributo hidden vince sempre, anche sui .btn che hanno un display loro */
[hidden] { display: none !important; }
/* un'etichetta nascosta in una cella si posiziona sulla sua cella: senza, finiva
   fuori dalla card e allargava la pagina sul telefono */
.table :is(th, td):has(> .sr-only) { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--sottile); }

/* Icone lineari (app/icone.py): ereditano colore e misura dal contenitore */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em;
    flex-shrink: 0; }
/* le emoji tenute (⚠️) non hanno la scatola fissa dell'icona: il glifo è più
   alto di 1em e così scendeva sotto la riga del testo */
.ico.ico-emoji { width: auto; height: auto; line-height: 1; font-size: 0.95em;
    vertical-align: -0.05em; }

/* ── ANIMAZIONI (entrate scaglionate a onde da 0,05 s) ─────────────
   Lo stato finale è `transform: none`, non translate(0): una trasformazione
   rimasta applicata farebbe da contenitore ai `position: fixed` interni
   (le finestre modali dentro le card). */
@keyframes sdSu      { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sdDaSx    { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes sdDaDx    { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes sdCresci  { from { transform: scaleY(0); } to { transform: none; } }
@keyframes sdRiempi  { from { width: 0; } }

.anim-su    { animation: sdSu 0.5s ease-out both; }
.anim-cresci { animation: sdCresci 0.6s ease-out both; transform-origin: bottom; }
.anim-riempi { animation: sdRiempi 0.8s ease-out both; }

/* Entrata a cascata SOLO alla prima pagina della sessione (di solito la
   dashboard dopo il login): la classe `anim-ingresso` la mette base.html una
   volta per scheda. Nelle pagine successive il contenuto è subito leggibile,
   perché in un gestionale si naviga di continuo. La sidebar non si anima mai. */
.anim-ingresso .main-content > *, .anim-ingresso .stat-grid > *,
.anim-ingresso .quick-grid > * { animation: sdSu 0.4s ease-out both; }
.anim-ingresso .main-content > :nth-child(2), .anim-ingresso .stat-grid > :nth-child(2), .anim-ingresso .quick-grid > :nth-child(2) { animation-delay: 0.05s; }
.anim-ingresso .main-content > :nth-child(3), .anim-ingresso .stat-grid > :nth-child(3), .anim-ingresso .quick-grid > :nth-child(3) { animation-delay: 0.10s; }
.anim-ingresso .main-content > :nth-child(4), .anim-ingresso .stat-grid > :nth-child(4), .anim-ingresso .quick-grid > :nth-child(4) { animation-delay: 0.15s; }
.anim-ingresso .main-content > :nth-child(n+5), .anim-ingresso .stat-grid > :nth-child(n+5), .anim-ingresso .quick-grid > :nth-child(n+5) { animation-delay: 0.20s; }

/* Movimento ridotto: si tolgono le entrate e gli spostamenti, restano i
   cambi di colore brevi (hover, focus, stato), che aiutano a capire cosa succede */
/* ── CAMBIO PAGINA (01/10/2026) ─────────────────────────────────────
   Navigazione fra pagine del portale senza lampi: il browser tiene la pagina
   vecchia finché la nuova è pronta e scambia in un colpo solo (nessuna
   dissolvenza). Sidebar e barra in basso dell'app hanno un nome loro: restano
   ferme mentre cambia il contenuto. Chi non supporta la funzione naviga come
   prima. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
.sidebar { view-transition-name: sidebar; }
::view-transition-group(sidebar), ::view-transition-old(sidebar),
::view-transition-new(sidebar) { animation: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
    #cb-fab, .side-gruppo > summary .side-freccia { transition: none !important; }
}

/* ── FOCUS DA TASTIERA ──────────────────────────────────────────────
   Un anello scuro (bianco + inchiostro) su tutto ciò che si raggiunge col
   Tab: il lime sul bianco non si vede (1,3:1). Sul grafite della sidebar
   l'anello diventa lime, che lì contrasta. Solo :focus-visible, così il
   clic del mouse non lascia contorni. */
:focus-visible { outline: none; box-shadow: var(--focus); }
.sidebar :focus-visible { box-shadow: 0 0 0 2px var(--lime); }
.table th.ordinabile:focus-visible { box-shadow: inset var(--focus); }

/* ── SIDEBAR (240px, grafite di default, accento lime sulla voce attiva) ──
   I colori stanno in variabili --sb-*: la sidebar è scura di default;
   la variante chiara si ottiene aggiungendo la classe `chiara` all'<aside>. */
.app-layout { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar {
    --sb-bg: var(--grafite);  --sb-bordo: #262626;   --sb-guida: #2E2E2E;
    --sb-testo: #A3A3A0;      --sb-forte: #FFFFFF;   --sb-sottile: #8C8C88;
    --sb-hover: #232323;      --sb-attivo-bg: #242424;
    --sb-attivo-ico: var(--lime); --sb-campo: #222222;
    width: 240px; flex-shrink: 0;
    background: var(--sb-bg); color: var(--sb-forte);
    border-right: 1px solid var(--sb-bordo);
    display: flex; flex-direction: column;
    /* --barra-sotto: altezza di una barra fissa in fondo (la barra dei ruoli in
       sviluppo locale), così non copre il piede della sidebar */
    position: sticky; top: 0; height: calc(100vh - var(--barra-sotto, 0px)); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--sb-bordo) transparent;
}
.sidebar.chiara {
    --sb-bg: var(--bianco);   --sb-bordo: var(--bordo); --sb-guida: var(--bordo);
    --sb-testo: var(--grigio); --sb-forte: var(--ink);  --sb-sottile: var(--sottile);
    --sb-hover: var(--hover); --sb-attivo-bg: var(--hover);
    --sb-attivo-ico: var(--lime-testo); --sb-campo: var(--bianco);
}
.sidebar::-webkit-scrollbar-thumb { background: var(--sb-bordo); }

.side-brand { display: flex; align-items: center; gap: 10px; padding: 22px 20px 18px; }
/* marchio Megasim (SVG bianco, 400×165): l'altezza comanda, la larghezza segue */
.side-brand .brand-logo { height: 18px; width: auto; display: block; flex-shrink: 0; }
.sidebar.chiara .side-brand .brand-logo { filter: invert(1); }
.side-brand .brand-nome { font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
    line-height: 1.15; }
/* pulsante del menu: c'è solo su schermo stretto (vedi MOBILE) */
.side-apri { display: none; margin-left: auto; width: 44px; height: 44px; border: 0;
    border-radius: var(--raggio-sm); background: transparent; color: var(--sb-forte);
    font-size: 22px; align-items: center; justify-content: center; cursor: pointer; }
.side-apri:hover { background: var(--sb-hover); }
.side-apri .ico-modifica { display: none; }
.sidebar.aperta .side-apri .ico-normale { display: none; }
.sidebar.aperta .side-apri .ico-modifica { display: inline-flex; }

.side-nav { flex: 1; padding: 2px 12px 16px; }

/* Voce di menu: icona lineare 17px + etichetta 13px */
.side-link {
    display: flex; align-items: center; gap: 12px;
    min-height: 36px; padding: 8px 12px; border-radius: var(--raggio-sm);
    font-size: 13px; color: var(--sb-testo);
    transition: background 0.15s ease, color 0.15s ease;
    margin-bottom: 2px; line-height: 1.2;
}
.side-ico { width: 17px; flex-shrink: 0; display: inline-flex; align-items: center;
    justify-content: center; font-size: 17px; line-height: 1; }
.side-ico .ico-emoji { font-size: 14px; }
.side-link:hover { background: var(--sb-hover); color: var(--sb-forte); }
/* voce attiva: l'icona entra in una tessera lime piena (icona scura), la riga
   prende appena un fondo più chiaro e il testo diventa forte. Niente barretta
   laterale. La tessera è lime pieno anche se una variabile del tema arrivasse
   vuota (migliorìa ecosistema 02/08, blocco sidebar-personalizzabile). Il
   margine negativo tiene l'etichetta allineata alle voci non attive. */
.side-link.attivo { background: var(--sb-attivo-bg); color: var(--sb-forte); font-weight: 600; }
.side-link.attivo .side-ico { width: 26px; height: 26px; margin: -4px -4px -4px -4.5px;
    border-radius: 7px; background: var(--lime); color: var(--su-lime); font-size: 15px; }
.side-sotto .side-link.attivo .side-ico { width: 22px; height: 22px; margin: -3px -3.5px;
    border-radius: 6px; font-size: 13px; }

/* Gruppo richiudibile: freccia allineata a destra con flex (niente float) */
.side-gruppo { margin-bottom: 2px; }
.side-gruppo > summary {
    display: flex; align-items: center; gap: 12px;
    min-height: 36px; padding: 8px 12px; border-radius: var(--raggio-sm);
    font-size: 13px; color: var(--sb-testo); line-height: 1.2;
    cursor: pointer; list-style: none; user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.side-gruppo > summary::-webkit-details-marker { display: none; }
.side-gruppo > summary:hover { background: var(--sb-hover); color: var(--sb-forte); }
.side-gruppo[open] > summary { color: var(--sb-forte); font-weight: 500; }
.side-gruppo > summary .side-freccia {
    margin-left: auto; color: var(--sb-sottile); font-size: 13px; display: inline-flex;
    transition: transform 0.15s ease; }
.side-gruppo[open] > summary .side-freccia { transform: rotate(90deg); }

/* Sottovoci: rientro con linea guida verticale, stessa griglia di allineamento */
.side-sotto { margin: 2px 0 6px 20px; padding-left: 8px;
    border-left: 1px solid var(--sb-guida); }
.side-sotto .side-link { min-height: 32px; padding: 6px 10px; font-size: 12.5px; gap: 10px; }
.side-sotto .side-ico { font-size: 15px; width: 15px; }

/* Personalizzazione del menu (stelline, trascinamento, strumenti) */
.side-mini-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--sb-sottile); padding: 8px 12px 6px; }
.side-sep { height: 1px; background: var(--sb-bordo); margin: 8px 4px 10px; }
.side-stella { margin-left: auto; display: none; font-size: 13px; color: var(--sb-sottile);
    flex-shrink: 0; }
.side-link[data-preferita="1"] .side-stella { color: var(--lime); }
.side-link[data-preferita="1"] .side-stella .ico { fill: currentColor; }
.side-occhio .se-nascosta, .side-link[data-nascosta="1"] .side-occhio .se-visibile { display: none; }
.side-link[data-nascosta="1"] .side-occhio .se-nascosta { display: inline-flex; }
.side-occhio > span { display: inline-flex; }
.sidebar.chiara .side-link[data-preferita="1"] .side-stella { color: var(--secondario); }
.side-edit .side-stella { display: inline; cursor: pointer; }
.side-occhio { display: none; font-size: 12px; flex-shrink: 0; opacity: 0.8; }
.side-edit .side-occhio { display: inline; cursor: pointer; margin-left: auto; }
.side-edit .side-stella { margin-left: 6px; }
/* voci nascoste: invisibili nell'uso normale, semitrasparenti in modifica */
.side-link[data-nascosta="1"] { display: none; }
.side-edit .side-link[data-nascosta="1"] { display: flex; opacity: 0.4; }
.side-edit .side-link[data-id] { cursor: grab; }
.side-edit .side-link[data-id]:active { cursor: grabbing; }
.side-edit .side-link.trascina-sopra { box-shadow: 0 -2px 0 0 var(--lime); }
.side-edit .side-gruppo > summary.trascina-dentro { outline: 1px dashed var(--sb-attivo-ico); }
/* Strumenti in fondo: stesse voci del menu; quelle solo-edit compaiono
   soltanto in modalità personalizza */
#side-tools { padding: 10px 12px 8px; border-top: 1px solid var(--sb-bordo); }
#side-tools .side-link, #side-pdor .side-link, #side-vedi-come .side-link,
#side-tema .side-link { font-size: 12.5px; min-height: 32px; padding: 6px 12px; }
#side-tools .solo-edit { display: none; }
body.side-edit #side-tools .solo-edit { display: flex; }
/* il selettore "Home dell'app" è un blocco (label sopra, tendina sotto) */
body.side-edit #side-tools div.solo-edit { display: block; }
.side-home-label { display: block; font-size: 11px; color: var(--sb-sottile); margin-bottom: 4px; }
.side-home-select { width: 100%; font-size: 12px; padding: 6px 8px;
    background: var(--sb-campo); color: var(--sb-forte); border-color: var(--sb-bordo); }
body.side-edit #side-personalizza { background: var(--lime); color: var(--su-lime);
    font-weight: 600; }
#side-personalizza .ico-modifica { display: none; }
body.side-edit #side-personalizza .ico-normale { display: none; }
body.side-edit #side-personalizza .ico-modifica { display: inline-flex; }
/* i blocchi sotto gli strumenti hanno lo stesso rientro: le voci restano allineate */
#side-pdor, #side-vedi-come, #side-tema { padding: 0 12px 8px; }

/* Modalità personalizza: la sidebar si allarga (le etichette non vanno a capo
   accanto a stella e occhio), compare l'aiuto in cima, le voci si riconoscono
   come trascinabili e stella/occhio diventano pulsantini veri */
.sidebar { transition: width 0.2s ease; }
body.side-edit .sidebar { width: 320px; }
body.side-edit .side-link[data-id] > span:not([class]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.side-aiuto { display: none; margin: 0 12px 10px; padding: 10px 12px; border-radius: var(--raggio-sm);
    background: var(--sb-hover); border: 1px solid var(--sb-bordo); font-size: 12px; line-height: 1.45;
    color: var(--sb-testo); flex-direction: column; gap: 4px; }
.side-aiuto strong { color: var(--sb-forte); font-weight: 600; font-size: 12.5px; }
.side-aiuto-legenda { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.side-aiuto-legenda > span { display: inline-flex; align-items: center; gap: 5px; }
body.side-edit .side-aiuto { display: flex; }
body.side-edit .side-link[data-id] { border: 1px dashed transparent; }
body.side-edit .side-link[data-id]:hover { border-color: var(--sb-bordo); background: var(--sb-hover); }
body.side-edit :is(.side-stella, .side-occhio) { display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px; font-size: 14px; flex-shrink: 0; opacity: 1; }
body.side-edit :is(.side-stella, .side-occhio):hover { background: rgba(255, 255, 255, 0.08); color: var(--sb-forte); }
body.side-edit .side-occhio { margin-left: auto; color: var(--sb-sottile); }
body.side-edit .side-stella { margin-left: 2px; }
/* voci senza occhio (non si nascondono): la stella resta nella sua colonna */
body.side-edit .side-link:not(:has(.side-occhio)) .side-stella { margin-left: auto; }
body.side-edit .side-link[data-nascosta="1"] .side-occhio { color: var(--sb-forte); }
.side-home { padding: 8px 12px; }
.sidebar.chiara .side-aiuto { background: var(--mist); }

/* Piede: utente con iniziali, nome/ruolo e uscita, tutto su una griglia */
.side-utente {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-top: 1px solid var(--sb-bordo);
}
.side-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: var(--lime); color: var(--su-lime);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.side-chi { flex: 1; min-width: 0; line-height: 1.3; }
.side-chi .chi-nome { display: block; font-size: 12.5px; font-weight: 600;
    color: var(--sb-forte); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
.side-chi .chi-ruolo { display: block; font-size: 11px; color: var(--sb-sottile); }
.nav-esci { font-size: 16px; color: var(--sb-sottile); flex-shrink: 0; padding: 6px;
    border-radius: var(--raggio-sm); display: inline-flex; transition: background 0.15s, color 0.15s; }
.nav-esci:hover { color: var(--sb-forte); background: var(--sb-hover); }
.pill-ruolo { background: var(--sb-hover); color: var(--sb-testo); }

/* ── LAYOUT ─────────────────────────────────────────────────────── */
.main-content { flex: 1; min-width: 0; max-width: 1320px; margin: 0 auto;
    padding: 28px 32px 40px; }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.025em;
    line-height: 1.25; margin-bottom: 24px; }
/* Testata di pagina con sottotitolo e azioni a destra (facoltativa) */
.page-head { display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head .page-title { margin-bottom: 0; }
.page-sub { font-size: 13px; color: var(--grigio); margin-top: 4px; }
/* barre di comandi (testata, card): 12px fra filtri, menu a tendina e pulsanti */
.page-azioni { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── SCHEDE (sottonavigazione di sezione e filtri a gruppo) ───────
   `schede-sezione` ripete le voci della sidebar (Anagrafiche, Console): su
   schermo largo la sidebar basta e le schede si nascondono; su telefono,
   dove il menu parte chiuso, restano come scorciatoia dentro la sezione. */
@media (min-width: 641px) { .schede.schede-sezione { display: none; } }
.schede { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
    margin-bottom: 20px; background: var(--binario); border-radius: 10px; max-width: 100%;
    box-shadow: inset 0 0 0 1px var(--binario-bordo); }
.schede a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
    border-radius: var(--raggio-sm); font-size: 12.5px; font-weight: 500; color: var(--grigio);
    transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; }
.schede a .ico { font-size: 14px; }
.schede a:hover { color: var(--ink); background: var(--scheda-hover); }
.schede a.attiva { background: var(--bianco); color: var(--ink); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px var(--bordo); }
.schede a.attiva .ico { color: var(--lime-testo); }
/* selettore di vista nella testata (es. Organizzazione: Albero | Riassegna) */
.page-azioni .schede { margin: 0; }
/* filtro dentro la pagina: più leggero, senza il fondo grigio */
.schede-filtro { background: none; padding: 0; gap: 6px; margin-bottom: 16px; }
.schede-filtro a { border: 1px solid var(--bordo); background: var(--bianco); padding: 4px 10px;
    font-size: 12px; }
.schede-filtro a.attiva { background: var(--lime-tenue); border-color: var(--lime-scuro);
    box-shadow: none; }

/* ── MODELLI DI PAGINA (app/templates/layouts) ─────────────────────
   Le pagine scelgono un modello e dichiarano solo i contenuti; qui le
   poche regole di struttura che i modelli condividono. */
.page-head-testo { min-width: 0; flex: 1 1 420px; }
.page-head > .page-azioni { flex-shrink: 0; }
/* icona o emoji in apertura di un avviso */
.alert > .ico:first-child { margin-right: 6px; }
/* Scheda (e dashboard): colonna principale larga, laterale stretta */
.scheda-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 16px; align-items: start; }
.scheda-griglia.senza-laterale { grid-template-columns: minmax(0, 1fr); }
.scheda-principale > .card:last-child, .scheda-laterale > .card:last-child { margin-bottom: 0; }
.scheda-griglia { margin-bottom: 16px; }
.scheda-laterale { display: flex; flex-direction: column; gap: 16px; }
.scheda-laterale > .card { margin-bottom: 0; }
/* righe «etichetta: valore» nei riepiloghi della colonna laterale */
.riepilogo { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; }
.riepilogo dt { color: var(--grigio); }
.riepilogo dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
/* Modulo: conferme strette e centrate, creazioni a tutta larghezza */
.modulo-pagina.focalizzato { max-width: 560px; }
.form-group.campo-largo { grid-column: 1 / -1; }
/* Impostazioni: indice delle sezioni a sinistra, sezioni a destra */
.impostazioni { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start; }
.impostazioni:not(:has(.imp-indice)) { grid-template-columns: minmax(0, 1fr); }
.imp-indice { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; }
.imp-indice { padding-top: 2px; }
.imp-indice a { font-size: 13px; color: var(--grigio); padding: 8px 12px; border-radius: var(--raggio-sm);
    line-height: 1.35; transition: background 0.15s ease, color 0.15s ease; }
.imp-indice a:hover { background: var(--hover); color: var(--ink); }
/* intestazione di un gruppo di sezioni nell'indice */
.imp-gruppo { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sottile); padding: 14px 12px 4px; }
.imp-gruppo:first-child { padding-top: 2px; }
@media (max-width: 960px) { .imp-gruppo { display: none; } }
.imp-indice a.attiva { background: var(--bianco); color: var(--ink); font-weight: 600;
    box-shadow: 0 0 0 1px var(--bordo); }
.imp-sezioni > .card { scroll-margin-top: 16px; }
/* Gruppo di campi dentro un modulo (es. AnyDesk): riquadro Mist con titoletto */
fieldset.riquadro { border: 1px solid var(--bordo); border-radius: 10px; background: var(--mist);
    padding: 12px 14px 4px; margin: 4px 0 14px; min-width: 0; }
fieldset.riquadro > legend { font-size: 12.5px; font-weight: 600; padding: 0 6px; margin-left: -4px;
    display: inline-flex; align-items: center; gap: 6px; }
fieldset.riquadro .form-row { gap: 16px; }
fieldset.riquadro .form-row > .form-group { flex: 1 1 220px; }
/* valore nascosto che si mostra al clic (password) */
.rivela { cursor: pointer; text-decoration: underline dotted; }
/* azioni che non si annullano: in una card a parte, separate da Salva */
.zona-delicata { border-color: var(--no-bordo); }
.zona-delicata .card-title > .ico:first-child { color: var(--no-testo); }
.zona-delicata form + p, .zona-delicata p + .azioni-modulo { margin-top: 8px; }
.zona-delicata form { margin-bottom: 14px; }
.zona-delicata .muted { margin-bottom: 8px; }
/* Legenda di un grafico: campione di colore + voce */
.legenda { display: inline-flex; align-items: center; gap: 6px 8px; flex-wrap: wrap;
    font-size: 12px; color: var(--grigio); }
.campione { display: inline-block; width: 12px; height: 10px; border-radius: 2px; }
.campione + * , .legenda .campione:not(:first-child) { margin-left: 6px; }
.campione-acceso { background: var(--bordo-input); }
.campione-uso { background: var(--lime); }
/* Tabella di impostazioni (nome e spiegazione a sinistra, un controllo per colonna) */
.tabella-impostazioni td { vertical-align: top; }
.tabella-impostazioni td:first-child { width: auto; }
.tabella-impostazioni :is(th, td):not(:first-child) { width: 250px; }
.tabella-impostazioni td:first-child .nota { margin-top: 3px; }
.tabella-impostazioni :is(select, input:not([type="checkbox"])) { width: 100%; max-width: 260px; }
.tabella-impostazioni tfoot td { border-top: 1px solid var(--bordo); border-bottom: none; padding-top: 14px; vertical-align: top !important; }
/* i pulsanti in fondo partono tutti dalla stessa riga; la nota va sotto il suo */
.tabella-impostazioni tfoot .azioni-in-riga { flex-direction: column; align-items: flex-start; gap: 6px; }
.tabella-impostazioni tbody tr:hover { background: transparent; }
.azioni-in-riga { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* su telefono: una scheda per impostazione, controlli uno sotto l'altro con la loro etichetta */
@media (max-width: 640px) {
    .tabella-impostazioni thead { display: none; }
    .tabella-impostazioni, .tabella-impostazioni tbody, .tabella-impostazioni tfoot,
    .tabella-impostazioni tr, .tabella-impostazioni td { display: block; width: 100% !important; }
    .tabella-impostazioni tr { padding: 10px 0; border-bottom: 1px solid var(--bordo-chiaro); }
    .tabella-impostazioni td { border: none; padding: 4px 0; }
    .tabella-impostazioni td[data-etichetta]::before { content: attr(data-etichetta); display: block;
        font-size: 12px; color: var(--grigio); margin: 6px 0 4px; }
    .tabella-impostazioni :is(select, input:not([type="checkbox"])), .tabella-impostazioni .con-unita { max-width: none; }
    .tabella-impostazioni tfoot td:empty { display: none; }
    .tabella-impostazioni tfoot td { border-top: none; padding-top: 8px; }
}
/* campo numerico con l'unità accanto (es. «30 min») */
/* Campo con unità di misura («min», «€», «%»): l'unità sta dentro il campo, a
   destra, e non si seleziona né si cancella; un clic sull'unità va nel campo */
.con-unita { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 260px; }
.con-unita input { flex: 1; min-width: 0; padding-right: 48px; }
.con-unita > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 13px; color: var(--grigio); pointer-events: none; user-select: none; }
/* frecce del campo numerico: nascoste, l'unità prende il loro posto */
.con-unita input[type="number"] { -moz-appearance: textfield; }
.con-unita input[type="number"]::-webkit-inner-spin-button,
.con-unita input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Impostazioni di guida di un allievo in una cella sola (Utenti & accessi) */
.guida-mini { display: grid; grid-template-columns: auto auto auto auto; gap: 1px 8px;
    font-size: 12px; margin: 0; }
.guida-mini dt { color: var(--grigio); }
.guida-mini dd { margin: 0; font-weight: 500; white-space: nowrap; }
.table tr[data-simulato] > td { background: var(--mist); }
/* Stato vuoto: icona, frase che dice cosa fare, azione */
.vuoto { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 28px 16px; color: var(--grigio); font-size: 13px; }
.vuoto-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--hover);
    display: flex; align-items: center; justify-content: center; font-size: 18px; }
@media (max-width: 960px) {
    .scheda-griglia, .impostazioni { grid-template-columns: minmax(0, 1fr); }
    .imp-indice { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* ── CARD ───────────────────────────────────────────────────────── */
.card {
    background: var(--bianco); border: 1px solid var(--bordo);
    border-radius: var(--raggio); padding: 20px; margin-bottom: 16px;
    box-shadow: var(--ombra);
}
/* Larghezze: card, avvisi e numeri vanno sempre a tutta larghezza (bordi
   allineati in ogni pagina) e i testi informativi la occupano tutta, senza
   a capo anticipati. Unica eccezione la card focalizzata, sola nella pagina
   (conferme). */
/* Modulo dentro una card (modello comune): i campi si dispongono in colonne
   da 260px in su, tante quante ci stanno; tutto il resto (titoletti, righe di
   campi, caselle, note, bottoni) occupa la riga intera. */
.card form:has(> .form-group) { display: grid; column-gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.card form:has(> .form-group) > :not(.form-group),
.card form:has(> .form-group) > .form-group:has(textarea),
.card form:has(> .form-group) > .form-group:has(input[type="checkbox"]:only-child),
.card form:has(> .form-group) > .form-group:has(> label > input[type="checkbox"]),
.card form:has(> .form-group) > .form-group:has(> small, > p, > .muted, > div, > label ~ label) { grid-column: 1 / -1; }
/* campo a riga intera: il controllo resta della sua misura, la spiegazione sotto legge bene */
.card form:has(> .form-group) > .form-group:has(> small, > p, > .muted, > div) > :is(input:not([type="checkbox"]):not([type="radio"]), select) { max-width: calc(50% - 8px); }
@media (max-width: 640px) {
    .card form:has(> .form-group) > .form-group > :is(input, select) { max-width: none; }
    /* stessa precedenza della regola da computer, che altrimenti vinceva (02/10/2026) */
    .card form:has(> .form-group) > .form-group:has(> small, > p, > .muted, > div) > :is(input:not([type="checkbox"]):not([type="radio"]), select) { max-width: none; }
}
/* bottoni del modulo: in un contenitore «azioni» su una riga sua; l'azione
   distruttiva (danger) va in fondo a destra, lontana da Salva */
.azioni-modulo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px; margin-top: 8px; }
.azioni-modulo > .btn-danger { margin-left: auto; }
.card form:has(> .form-group) > :is(.btn, button, a.btn) { grid-column: 1 / -1; justify-self: start; }
/* Campi affiancati: i controlli stanno alla stessa altezza anche se un'etichetta
   va su due righe. static/js/moduli.js aggiunge sopra le etichette più basse lo
   spazio che manca (padding-top): il testo resta attaccato al suo campo */
.card form > .form-row { gap: 16px; }
.card form > .form-row > .form-group { flex: 1 1 220px; }
.card-focalizzata { max-width: 560px; }
.card-header { display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
/* l'icona sta in riga col testo (niente flex: le parole in <strong> restano parole) */
.card-title > .ico:first-child { font-size: 16px; color: var(--grigio); margin-right: 8px;
    vertical-align: -0.2em; }
/* testata seguita da una frase di spiegazione: titolo in alto e frase vicina,
   non staccata dall'altezza dei controlli a destra */
.card-header:has(+ p) { align-items: flex-start; margin-bottom: 8px; }
.page-title > .ico { font-size: 0.9em; margin-right: 10px; vertical-align: -0.08em;
    color: var(--grigio); }
/* controlli affiancati nella testata (filtri, bottoni): sempre centrati tra loro */
.card-header > div, .card-header > form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Ritmo dentro una card: 12px fra i blocchi che si susseguono (testo, moduli,
   tabelle, righe di azioni), niente in più subito sotto la testata. Nei moduli
   a colonne i campi hanno già il loro spazio: si aggiunge solo sotto i testi. */
.card > :not(.card-header) + :not(input[type="hidden"]):not(script):not(style),
.card > div:not([class]) > * + *,
.card form:not(:has(> .form-group)) > * + *:not(input[type="hidden"]) { margin-top: 12px; }
.card > .card-header + * { margin-top: 0; }
/* il ritmo vale fra i blocchi della card, non dentro le celle di una tabella:
   un modulo in una cella (hidden + pulsante) restava 12px più in basso */
.card .table form:not(:has(> .form-group)) > * + *:not(input[type="hidden"]) { margin-top: 0; }
/* linea divisoria fra due parti della card: stesso spazio sopra e sotto */
.card > .divider { margin: 20px 0 !important; }
.card > .divider + * { margin-top: 0 !important; }
/* moduli fatti di un solo bottone (azioni secondarie: prova, invia, copia):
   in fila sulla stessa riga invece che uno sotto l'altro */
.card > form:not(:has(.form-group, .form-row, textarea, select, p, input:not([type="hidden"]))) {
    display: inline-flex; vertical-align: top; margin-right: 8px; }
.card > form:not(:has(.form-group, .form-row, textarea, select, p, input:not([type="hidden"]))) .azioni-modulo { margin-top: 0; }
.card form:has(> .form-group) > :is(p, .muted, .nota, h3) { margin-bottom: 12px; }
.card p { font-size: 13.5px; line-height: 1.55; }
.card p.muted, .card p.nota, .card p.nota-sopra { font-size: 13px; }
/* titolo con una frase sotto, nella testata di una card */
.card-header > .card-header-testo { display: block; min-width: 0; flex: 1 1 320px; }
.card-header-testo > .muted { margin-top: 2px; }

/* ── STATISTICHE (numeri chiave) ────────────────────────────────── */
/* Pagina Statistiche (01/10/2026): barre, righe senza dati raccolte, allarmi */
.barra { display: inline-block; width: 64px; height: 8px; border-radius: 6px; background: var(--bordo);
    vertical-align: middle; margin-right: 6px; overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 6px; background: var(--lime); }
.riga-assenti { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--bordo); font-size: 13px; color: var(--grigio); }
.riga-assenti > svg.ico { margin-top: 3px; color: var(--sottile); }
.riga-assenti strong { color: var(--ink); }
.stat-di { font-size: 16px; font-weight: 500; color: var(--grigio); letter-spacing: 0; }
.stat-card.stat-allarme { border-color: var(--no-bordo); background: var(--no-bg); }
.stat-card.stat-allarme .stat-value { color: var(--no-testo); }
.table tr.riga-allarme > td { background: var(--no-bg); }
.testo-attenzione { color: var(--attesa-testo); font-weight: 600; }
/* classifiche a due colonne (errori, esiti, versioni): il nome largo, la barra stretta */
.tabella-classifica td:first-child { width: 45%; }
/* fasce orarie: celle quadrate e centrate, numeri piccoli */
.tabella-fasce { font-size: 11px; }
.tabella-fasce :is(th, td) { text-align: center; padding: 6px 4px; }
.tabella-fasce td:first-child, .tabella-fasce th:first-child { text-align: left; padding-left: 8px; }
.stat-grid {
    /* al massimo 4 per riga: 7 numeri vanno su 4 + 3 invece di 5 + 2, e
       2 numeri si dividono la riga a metà (auto-fit) */
    display: grid; gap: 16px; margin-bottom: 16px;
    grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - 48px) / 4)), 1fr));
}
/* da 1 a 3 riquadri: ognuno largo quanto il suo contenuto, lo spazio avanzato
   si divide in parti uguali (una versione lunga accanto a un solo numero non
   finisce stretta mentre il numero galleggia in metà riga) */
.stat-grid:not(:has(> :nth-child(4))) { display: flex; }
.stat-grid:not(:has(> :nth-child(4))) > * { flex: 1 1 auto; min-width: 200px; }
/* numeri dentro una card: tessere piatte su Mist, non card dentro una card */
.card .stat-grid { gap: 10px; margin-bottom: 12px; }
.card .stat-card { border: none; box-shadow: none; background: var(--mist); padding: 14px 16px; }
.stat-card {
    position: relative;
    background: var(--bianco); border: 1px solid var(--bordo);
    border-radius: var(--raggio); padding: 20px;
    box-shadow: var(--ombra);
}
/* titolo del riquadro: stessa misura dei titoli delle card (.card-title, «Scorciatoie») */
.stat-label { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
    line-height: 1.3; padding-right: 40px; margin-bottom: 10px; }
/* riquadro cliccabile: porta alla sua sezione, come le scorciatoie */
a.stat-card { display: block; color: inherit; transition: border-color 0.15s ease, background 0.15s ease; }
a.stat-card:hover { border-color: var(--lime-scuro); background: var(--lime-tenue); }
a.stat-card:hover .stat-ico { background: var(--bianco); }
a.stat-card::after { content: ""; position: absolute; right: 16px; bottom: 16px; width: 14px; height: 14px;
    background: var(--sottile); opacity: 0; transition: opacity 0.15s ease;
    -webkit-mask: var(--freccia) center / contain no-repeat; mask: var(--freccia) center / contain no-repeat; }
a.stat-card:hover::after, a.stat-card:focus-visible::after { opacity: 1; }
:root { --freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.05em;
    line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 11px; color: var(--sottile); margin-top: 6px; }
/* icona in alto a destra, colorata secondo il tipo di numero */
.stat-ico { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
    border-radius: var(--raggio-sm); display: flex; align-items: center;
    justify-content: center; font-size: 16px;
    background: var(--hover); color: var(--grigio); }   /* neutra: il colore lo dà il tipo */
.stat-ico.sec  { background: var(--secondario-tenue); color: var(--secondario-testo); }
.stat-ico.info { background: var(--hover); color: var(--grigio); }
.stat-ico.no   { background: var(--no-bg); color: var(--no-testo); }
.stat-ico.neutro { background: var(--hover); color: var(--grigio); }

/* Indicatore di tendenza (pastiglia compatta con freccia) */
.trend { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px;
    border-radius: 4px; font-size: 11px; font-weight: 600;
    background: var(--lime-tenue); color: var(--lime-testo); }
.trend.giu { background: var(--no-bg); color: var(--no-testo); }

/* Barre di avanzamento (7px, traccia grigia, riempimento animato) */
.progresso { height: 7px; border-radius: 4px; background: var(--hover); overflow: hidden; }
.progresso > span { display: block; height: 100%; border-radius: 4px; background: var(--lime);
    animation: sdRiempi 0.8s ease-out both; }
.progresso > span.sec { background: var(--secondario); }

/* Riga di stato compatta (repo dei contenuti, componenti): il colore sta nel
   fondo e nel pallino iniziale, non in un bordo laterale */
.riga-stato { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 4px 8px; border-radius: 6px; background: var(--hover); }
.riga-stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--sottile); }
.riga-stato.ok { background: var(--lime-tenue); }
.riga-stato.ok::before { background: var(--lime-scuro); }
.riga-stato.indietro { background: var(--secondario-tenue); }
.riga-stato.indietro::before { background: var(--secondario); }

/* Pallino di stato accanto a un numero ("Sano", "Stabile") */
.stato-punto { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
    font-weight: 500; color: var(--lime-testo); }
.stato-punto::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--lime); }
.stato-punto.sec { color: var(--secondario-testo); }
.stato-punto.sec::before { background: var(--secondario); }

/* ── TABELLE ────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
    text-align: left; padding: 10px 12px; background: var(--bianco);
    font-size: 11px; font-weight: 600; color: var(--sottile);
    text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--bordo);
}
.table td { padding: 11px 12px; border-bottom: 1px solid var(--bordo-chiaro);
    vertical-align: middle; }
.table td strong { font-weight: 600; }
/* le intestazioni delle colonne di importi seguono la colonna (.table th vinceva su .a-destra) */
.table th.a-destra { text-align: right; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background 0.12s ease; }
.table tbody tr:hover { background: var(--mist); }
.table .pill, .table .badge { vertical-align: middle; }
.row-inactive { opacity: 0.55; }

/* Larghezze secondo il contenuto (tabelle.js, misura): le corte si stringono
   e non vanno a capo, i codici restano interi, il testo prende il resto */
.table .col-stretta { width: 1%; }
.table td.col-stretta, .table td.col-intera { white-space: nowrap; }
/* intestazioni su una riga; vanno a capo fra le parole solo se la tabella
   altrimenti non entra (tabelle.js mette .testate-a-capo) */
.table th { white-space: nowrap; }
.table.testate-a-capo th { white-space: normal; }
/* Numeri che filtrano un elenco (Utenti): sono pulsanti, acceso = filtro attivo */
.filtri-rapidi > button.stat-card { font: inherit; text-align: left; cursor: pointer; display: block; width: 100%;
    transition: border-color .15s ease, background .15s ease; }
.filtri-rapidi > button.stat-card > span { display: block; }
.filtri-rapidi > button.stat-card:hover { border-color: var(--lime-scuro); }
.filtri-rapidi > button.stat-card.acceso { border-color: var(--lime-bordo); background: var(--lime-tenue); box-shadow: inset 0 0 0 1px var(--lime-bordo); }
.filtro-attivo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Schede di un elenco con il conteggio accanto */
.schede.schede-conteggio { margin-bottom: 0; }
.conta-scheda { font-size: 11.5px; font-weight: 600; color: var(--grigio); background: var(--bianco);
    border-radius: 999px; padding: 0 7px; margin-left: 2px; }
.schede a.attiva .conta-scheda { background: var(--lime-tenue); color: var(--lime-testo); }
/* Elenco utenti: nome, ruolo e stato sulla stessa riga, email sotto; crediti a zero in ambra */
.persona-riga { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.credito-zero strong { color: var(--attesa-testo); }
.elenco-utenti .col-spunta { width: 36px; }
.elenco-utenti .col-azioni { width: 56px; text-align: right; }
/* Menu «⋯» di una riga: le azioni meno frequenti e quelle delicate, fuori dalla vista */
details.menu-azioni { position: relative; display: inline-block; }
details.menu-azioni > summary { list-style: none; }
details.menu-azioni > summary::-webkit-details-marker { display: none; }
.table td details.menu-azioni > summary { padding: 0 9px; margin: 0; font-weight: 500; }
.table td details.menu-azioni > summary::before { content: none; }
.menu-azioni-voci { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px;
    background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio-sm);
    box-shadow: 0 8px 24px rgba(17, 24, 39, .12); padding: 4px; text-align: left; }
details.menu-azioni:not([open]) > .menu-azioni-voci { display: none; }   /* chiuso non occupa spazio (allargava la pagina sul telefono) */
.menu-azioni-voci form { margin: 0 !important; display: block; }
.menu-azioni-voci a, .menu-azioni-voci button { display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 10px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 13px;
    color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.menu-azioni-voci a:hover, .menu-azioni-voci button:hover { background: var(--hover); }

/* Scheda a schede (utente): due card affiancate dentro una scheda, una sotto l'altra
   sotto i 1100px; la finestra «Fallo entrare» più larga delle conferme */
.scheda-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.scheda-due > .card { margin-bottom: 0; }
/* numeri dentro una card stretta: vanno a capo invece di uscire dalla card */
.scheda-due .card .stat-grid { flex-wrap: wrap; }
.scheda-due .card .stat-grid > * { min-width: 130px; }
.vista-scheda > * + * { margin-top: 16px; }
@media (max-width: 1100px) { .scheda-due { grid-template-columns: minmax(0, 1fr); } }
/* le quattro impostazioni di guida in due colonne: una schermata invece di due */
#vista-guida [data-form="imp-sim"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
@media (max-width: 900px) { #vista-guida [data-form="imp-sim"] { grid-template-columns: minmax(0, 1fr); } }
.modale-corpo.modale-larga { max-width: 760px; }
.modale-larga > .azioni-in-riga { justify-content: flex-end; }
.modale-larga #pannello-abilita > .card { margin-top: 0 !important; border: 0; box-shadow: none; padding: 0; }

/* Azioni di una tessera da associare (Console → Tessere): due righe larghe uguali */
.azioni-tessera { display: flex; flex-direction: column; gap: 8px; min-width: 300px; }
.azioni-tessera-riga { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.azioni-tessera-riga > select { flex: 1; min-width: 0; }
.azioni-tessera-riga > form { margin: 0; display: flex; }
.azioni-tessera > .nota { margin: 0; }

/* Tendine nelle celle di una tabella: contenuti in alto (aprendo, il resto della
   riga resta fermo) e la tendina come un piccolo comando con la freccia, non il
   triangolo del browser */
.table.con-tendine td { vertical-align: top; }
.table td details > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    list-style: none; padding: 2px 8px 2px 4px; margin: -2px 0 0 -4px; border-radius: 6px;
    font-weight: 500; color: var(--ink); user-select: none; }
.table td details > summary::-webkit-details-marker { display: none; }
.table td details > summary::before { content: ""; width: 14px; height: 14px; flex-shrink: 0;
    background: var(--grigio); transition: transform .15s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.table td details[open] > summary::before { transform: rotate(90deg); }
.table td details > summary:hover { background: var(--hover); }
.table td details > summary:focus:not(:focus-visible) { box-shadow: none; }
.table td details > ul { margin: 6px 0 0 18px; padding: 0; }
.table td details > ul > li + li { margin-top: 4px; }
/* tabelle con tendine nelle celle: larghezze lette a tendine aperte e fissate da tabelle.js */
.table.larghezze-fisse { table-layout: fixed; }
.table.larghezze-fisse td { overflow-wrap: anywhere; }
.table td.col-stretta .pill, .table td.col-stretta .badge { white-space: nowrap; }
/* una tabella più larga della card scorre dentro la card, la pagina no */
.card:has(> .table), .card:has(> div > .table) { overflow-x: auto; }

/* Tabelle vive (tabelle.js): ordinamento e filtri per colonna */
.table th.ordinabile { cursor: pointer; user-select: none; }
.table th.ordinabile:hover { color: var(--ink); }
.table th.ordinabile::after { content: "\00a0↕"; color: var(--bordo-forte); }
.table th.ord-asc::after { content: "\00a0↑"; color: var(--ink); }
.table th.ord-desc::after { content: "\00a0↓"; color: var(--ink); }
.tavola-filtri th { padding: 4px 8px 10px; background: var(--bianco); }
.tavola-filtri input { width: 100%; padding: 5px 8px; font-size: 12px;
    border: 1px solid var(--bordo-input); border-radius: 6px; min-width: 52px; }
.tavola-conta { caption-side: bottom; text-align: right; font-size: 11px;
    color: var(--sottile); padding-top: 8px; }

/* ── PILL E BADGE ───────────────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.5;
    background: var(--hover); color: var(--grigio);
}
.pill-ok     { background: var(--ok-bg); color: var(--ok-testo); }
.pill-no     { background: var(--no-bg); color: var(--no-testo); }
.pill-attesa { background: var(--attesa-bg); color: var(--attesa-testo); }
.pill-lime   { background: var(--lime); color: var(--su-lime); }
.badge {
    display: inline-block; padding: 2px 6px; border-radius: 4px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-testo); }
.badge-no { background: var(--no-bg); color: var(--no-testo); }
.badge-grigio { background: var(--hover); color: var(--grigio); }
/* una pastiglia è un'etichetta sola: non va mai a capo */
.badge, .pill { white-space: nowrap; }
/* la voce principale di un gruppo di badge (es. la modalità di avvio di una licenza) */
.badge-lime { background: var(--lime-tenue); color: var(--lime-testo); box-shadow: inset 0 0 0 1px rgba(90, 107, 0, 0.25); }
/* più valori nella stessa cella, uno per riga, allineati a sinistra */
.impilati { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* Contenuto visibile solo all'admin (regola generale, 15/09/2026): sempre
   in questo colore, MAI un altro, così si riconosce a colpo d'occhio che
   quel dato/quel controllo un ruolo diverso non lo vede nemmeno. Il
   controllo di visibilità resta lato server ({% if current_user.ruolo ==
   'admin' %}): la classe è solo il segnale visivo, non la protezione. */
.solo-admin { color: var(--admin-testo); }
.form-group.solo-admin label { color: var(--admin-testo); }

/* ── BOTTONI (lime = azione primaria, testo scuro) ──────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--raggio-sm);
    /* bordo più marcato delle card: sul Mist il contorno del bottone bianco deve
       leggersi quanto il fondo pieno del primario, che altrimenti sembra più grande */
    border: 1px solid var(--bordo-forte); background: var(--bianco); box-shadow: var(--ombra);
    font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
    line-height: 1.4; vertical-align: middle; text-align: center;
    cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--hover); border-color: var(--bordo-input); }
/* l'etichetta di un bottone non va mai a capo */
.btn { white-space: nowrap; }
/* primario: bordino un tono sotto il lime, così ha lo stesso contorno dei bottoni
   bianchi e non sembra più grande */
.btn-primary { background: var(--lime); border-color: var(--lime-bordo); color: var(--su-lime); font-weight: 600; }
.btn-primary:hover { background: var(--lime-scuro); border-color: var(--lime-bordo-scuro); }
.btn-danger { background: var(--bianco); border-color: var(--no-bordo); color: var(--no-testo); }
.btn-danger:hover { background: var(--no-bg); border-color: var(--no-bordo); }
/* Disabilitato: grigio e non cliccabile, qualunque variante (anche il lime primario) */
.btn:disabled, .btn[disabled] {
    background: var(--hover); border-color: var(--hover); color: var(--sottile);
    cursor: not-allowed; font-weight: 500;
}
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-full { width: 100%; }
/* pulsante solo icona: senza contorno, nelle righe e nelle testate; sempre con aria-label
   (aggiunto il 02/10/2026 da Deborah: STILE.md lo citava ma non c'era) */
.btn.btn-icona { padding: 4px 6px; border-color: transparent; background: transparent;
    box-shadow: none; color: var(--grigio); }
.btn.btn-icona:hover { background: var(--hover); border-color: var(--bordo); color: var(--ink); }

/* ── FORM ───────────────────────────────────────────────────────── */
/* Stile base per TUTTI i campi, anche fuori da .form-group
   (filtri nelle testate, ricerche, ecc.): stessa altezza dei bottoni */
input[type="text"], input[type="search"], input[type="email"], input[type="url"],
input[type="password"], input[type="number"], input[type="date"],
input[type="time"], input:not([type]), select, textarea {
    padding: 7px 10px; border: 1px solid var(--bordo-input);
    border-radius: var(--raggio-sm); font-family: inherit; font-size: 13px;
    background: var(--bianco); color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--sottile); }
/* Un'altezza sola per campi, menu a tendina e bottoni (34px): affiancati in una
   riga si allineano. Il menu a tendina ha la sua freccia disegnata, staccata
   dal bordo, al posto di quella del browser. */
input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"], input:not([type]), select {
    height: 34px; line-height: 1.2; }
select { -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6370' 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 10px center; background-size: 14px; }
select[multiple], select[size]:not([size="1"]) { height: auto; background-image: none; padding-right: 10px; }
.table .tavola-filtri input { height: 30px; }
.btn { min-height: 34px; }
.btn-sm { min-height: 28px; }
/* nelle barre degli strumenti (testate, azioni, filtri) anche i bottoni piccoli
   hanno l'altezza dei campi accanto */
:is(.card-header, .page-azioni, .azioni-modulo, .filtro-periodo) .btn-sm { min-height: 34px; }
/* Campi: al focus bordo inchiostro + alone lime (il bordo porta il contrasto,
   l'alone porta il colore del marchio) */
input:focus, select:focus, textarea:focus, input:focus-visible, select:focus-visible,
textarea:focus-visible {
    outline: none; border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(199, 239, 2, 0.55);
}
/* caricamento file: il pulsante del browser prende l'aspetto dei .btn */
input[type="file"] { font-family: inherit; font-size: 13px; color: var(--grigio); max-width: 100%; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 500; color: var(--ink);
    padding: 6px 12px; margin-right: 10px; border: 1px solid var(--bordo-input);
    border-radius: var(--raggio-sm); background: var(--bianco); cursor: pointer;
    transition: background 0.15s ease; }
input[type="file"]::file-selector-button:hover { background: var(--hover); }

/* Interruttore on/off: ogni casella singola (sì/no) è <input type="checkbox" role="switch">.
   Le caselle restano tali solo per selezionare righe di tabella e per le dichiarazioni */
input[type="checkbox"][role="switch"] {
    appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative;
    width: 34px; height: 20px; margin: 0; border-radius: 999px; cursor: pointer;
    background: var(--bordo-forte); border: 1px solid var(--bordo-forte); transition: background .15s ease, border-color .15s ease;
}
input[type="checkbox"][role="switch"]::before {
    content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--bianco-puro); box-shadow: 0 1px 2px rgba(17, 24, 39, .25); transition: transform .15s ease;
}
input[type="checkbox"][role="switch"]:checked { background: var(--lime); border-color: var(--lime-bordo); }
input[type="checkbox"][role="switch"]:checked::before { transform: translateX(14px); }
input[type="checkbox"][role="switch"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
input[type="checkbox"][role="switch"]:disabled { opacity: .45; cursor: not-allowed; }
label:has(> input[role="switch"]) { gap: 10px; }
.form-group input[type="checkbox"][role="switch"] { width: 34px; }
/* in una cella di tabella (matrice): l'interruttore da solo, centrato nella cella */
.interruttore-cella { display: inline-flex; margin: 0; }

/* Scelte multiple: pastiglie da accendere (canali, tipi, tecnici, patenti, lingue…).
   La casella resta nel markup per il form e la tastiera, ma non si vede */
.scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.form-group .scelte label.scelta, label.scelta {
    position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0;
    min-height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bordo-input);
    background: var(--bianco); color: var(--ink); font-size: 13px; font-weight: 500;
    white-space: nowrap; cursor: pointer; user-select: none;
    transition: background .15s ease, border-color .15s ease;
}
label.scelta:hover, .form-group .scelte label.scelta:hover { background: var(--hover); }
label.scelta > input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* scelta accesa: lime pieno. Il selettore lungo serve: la regola dei .form-group
   (bianco) era più specifica e la scelta accesa restava bianca con la sola spunta */
label.scelta:has(> input:checked), .form-group .scelte label.scelta:has(> input:checked) { background: var(--lime); border-color: var(--lime-bordo); color: var(--su-lime); padding-left: 10px; }
label.scelta:has(> input:checked):hover, .form-group .scelte label.scelta:has(> input:checked):hover { background: var(--lime-scuro); }
label.scelta:has(> input:checked)::before {
    content: ""; width: 14px; height: 14px; background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
label.scelta:has(> input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
label.scelta:has(> input:disabled) { opacity: .45; cursor: not-allowed; }

/* Checkbox e radio: allineati al testo, accento coerente, tutta la riga cliccabile */
input[type="checkbox"], input[type="radio"] {
    width: 15px; height: 15px; accent-color: var(--lime-testo);
    vertical-align: -2px; margin-right: 7px; cursor: pointer;
}
label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer; line-height: 1.4;
}
label:has(input[type="checkbox"]) input, label:has(input[type="radio"]) input {
    margin-right: 0; vertical-align: baseline;
}

.form-group { margin-bottom: 14px; }
.form-group label {
    display: block; font-size: 12px; font-weight: 500; color: var(--grigio); margin-bottom: 5px;
}
.form-group input, .form-group select, .form-group textarea { width: 100%; }
/* spiegazione del campo: sotto il controllo, in grigio */
.form-group > small { display: block; margin-top: 5px; color: var(--grigio); line-height: 1.45; }
.form-group label:has(input[type="checkbox"]),
.form-group label:has(input[type="radio"]) { display: inline-flex; color: var(--ink); }
.form-group input[type="checkbox"], .form-group input[type="radio"] { width: 15px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Azioni che non si annullano (eliminazione, ripristino del database): card col
   bordo rosso tenue e pulsante rosso pieno (testo bianco 6:1, il rosso di prima
   arrivava a 3,9:1) */
.card.card-pericolo { border-color: var(--no-bordo); }
.btn.btn-pericolo { background: var(--no-testo); border-color: #991B1B; color: #fff; }
.btn.btn-pericolo:hover { background: #991B1B; }
/* editor della guida web: un capitolo si distingue dalle sue pagine col fondo Mist */
.card.card-capitolo { background: var(--mist); }

/* ── ALERT (messaggi flash) ─────────────────────────────────────── */
.alert { padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 13px;
    font-weight: 500; border: 1px solid; }
.alert-success { background: var(--ok-bg); color: var(--ok-testo); border-color: var(--ok-bordo); }
.alert-danger  { background: var(--no-bg); color: var(--no-testo); border-color: var(--no-bordo); }
.alert-warning { background: var(--attesa-bg); color: var(--attesa-testo); border-color: var(--attesa-bordo); }
.alert-info    { background: var(--info-bg); color: var(--info-testo); border-color: var(--info-bordo); }

/* ── LOGIN (card centrata sullo sfondo dell'app) ────────────────── */
.login-page {
    min-height: 90vh; display: flex; align-items: center; justify-content: center;
    background-image: radial-gradient(circle at 1px 1px, var(--bordo) 1px, transparent 0);
    background-size: 22px 22px;
}
.login-container {
    background: var(--bianco); border: 1px solid var(--bordo); border-radius: 16px;
    padding: 36px; width: 100%; max-width: 380px; box-shadow: var(--ombra);
    animation: sdSu 0.5s ease-out both;
}
/* marchio MS nel cerchio nero, lo stesso del favicon */
.login-icona { width: 64px; height: 64px; border-radius: 50%; display: block;
    margin: 0 auto 16px; }
.login-logo { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; text-align: center; }
.login-logo::after { content: ""; display: block; width: 32px; height: 3px; border-radius: 2px;
    background: var(--lime); margin: 8px auto 0; }
.login-sotto { text-align: center; }
.login-sotto { font-size: 13px; color: var(--grigio); margin: 10px 0 24px; }

/* ── QUICK LINK (scorciatoie dashboard, come i pulsanti-opzione) ── */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.quick-link {
    display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center;
    background: var(--bianco); border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm); padding: 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
a.quick-link:hover { border-color: var(--lime-scuro); background: var(--lime-tenue); }
.quick-icon { grid-row: span 2; width: 32px; height: 32px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    background: var(--hover); color: var(--grigio); }
a.quick-link:hover .quick-icon:not(:has(> [class*="ico-tipo-"])) { background: var(--bianco); color: var(--lime-testo); }
.quick-title { font-weight: 500; font-size: 12.5px; line-height: 1.3; }
.quick-sub { font-size: 11px; color: var(--sottile); line-height: 1.35; }

/* ── FINESTRA MODALE (generica, 16/09/2026) ── */
.modale { position: fixed; inset: 0; z-index: 60; }
.modale-sfondo { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.35);
    backdrop-filter: blur(2px); }
.modale-corpo {
    position: relative; background: var(--bianco); border: 1px solid var(--bordo);
    border-radius: var(--raggio); padding: 22px; width: calc(100% - 32px); max-width: 480px;
    max-height: calc(100vh - 60px); overflow-y: auto; margin: 30px auto;
}

/* ── TRASCINAMENTO (componenti comuni) ─────────────────────────────
   Due ruoli che non si devono confondere:
   .trascinabile  la cosa che si prende: scheda bianca in rilievo, maniglia
                  (icona grip, disegnata con una maschera) in una colonna sua;
   .pozzo         il posto dove si lascia: fondo piatto Mist dentro il suo
                  contenitore; vuoto diventa tratteggiato con l'invito (.invito).
   Durante il trascinamento la pagina mette sul <body> la classe
   `trascina-<tipo>`: i pozzi che accettano quel tipo (data-accetta) si
   accendono, gli altri si attenuano. Sul pozzo sotto il puntatore va
   .bersaglio (va bene) o .non-valido (qui no). */
.trascinabile[draggable] { position: relative; display: block; padding: 8px 10px 8px 30px;
    background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio-sm);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06); cursor: grab;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; }
.trascinabile[draggable]::before { content: ""; position: absolute; left: 8px; top: 50%;
    width: 16px; height: 16px; margin-top: -8px; background: var(--sottile);
    -webkit-mask: var(--maniglia) center / contain no-repeat; mask: var(--maniglia) center / contain no-repeat; }
.trascinabile[draggable]:hover { border-color: var(--lime-scuro);
    box-shadow: 0 3px 8px rgba(17, 24, 39, 0.08); }
.trascinabile[draggable]:hover::before { background: var(--ink); }
.trascinabile[draggable]:active { cursor: grabbing; }
.trascinabile.trascinato { opacity: 0.45; }
:root { --maniglia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Ccircle cx='9' cy='5' r='1.6'/%3E%3Ccircle cx='9' cy='12' r='1.6'/%3E%3Ccircle cx='9' cy='19' r='1.6'/%3E%3Ccircle cx='15' cy='5' r='1.6'/%3E%3Ccircle cx='15' cy='12' r='1.6'/%3E%3Ccircle cx='15' cy='19' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); }

.pozzo { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 10px;
    background: var(--mist-scuro); border: 1px solid transparent;   /* Mist un tono sotto: si vede anche sul Mist */
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
.pozzo:not(:has(.trascinabile)) { justify-content: center; min-height: 52px;
    border: 1px dashed var(--bordo-input); background: transparent; }
.pozzo .invito { font-size: 12px; color: var(--grigio); text-align: center; line-height: 1.4;
    padding: 4px 8px; }
.pozzo:has(.trascinabile) .invito { display: none; }
/* durante il trascinamento: compatibili accesi, gli altri attenuati */
body[class*="trascina-"] .pozzo { opacity: 0.4; }
body.trascina-sede .pozzo[data-accetta="sede"],
body.trascina-simulatore .pozzo[data-accetta="simulatore"] { opacity: 1;
    border: 1px dashed var(--lime-testo); background: var(--lime-tenue); }
.pozzo.bersaglio { opacity: 1; border: 1px solid var(--lime-testo) !important;
    background: var(--lime-tenue); box-shadow: 0 0 0 3px rgba(199, 239, 2, 0.45); }
.pozzo.non-valido { opacity: 1; border: 1px dashed var(--no-bordo) !important;
    background: var(--no-bg) !important; }

/* Tabella lunga dentro una card di altezza fissa: il corpo scorre, la card no */
/* Elenco lungo: niente scorrimento interno (scorre la pagina), ma le
   intestazioni restano agganciate in alto mentre si scorre */
.tabella-scroll .table thead th { position: sticky; top: 0; z-index: 1; }

/* ── MOBILE ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .app-layout { flex-direction: column; }
    /* il menu parte chiuso: la pagina comincia dal contenuto, la testata della
       sidebar resta in alto col pulsante per aprirlo */
    .sidebar { width: 100%; height: auto; max-height: calc(100vh - var(--barra-sotto, 0px));
        position: sticky; top: 0; z-index: 40; border-right: none;
        border-bottom: 1px solid var(--sb-bordo); }
    .side-brand { padding: 6px 8px 6px 16px; }
    .side-apri { display: inline-flex; }
    .sidebar.aperta { z-index: 70; overflow-y: auto; }   /* sopra la bolla di Pdor (60) */
    .sidebar:not(.aperta) .side-nav, .sidebar:not(.aperta) #side-tools,
    .sidebar:not(.aperta) #side-pdor, .sidebar:not(.aperta) #side-vedi-come,
    .sidebar:not(.aperta) #side-tema, .sidebar:not(.aperta) .side-utente { display: none; }
    .side-nav { padding-bottom: 6px; }
    /* aree toccabili da 44px (bottoni, voci, campi) */
    .side-link, .side-gruppo > summary, .side-sotto .side-link { min-height: 44px; }
    .btn, .btn-sm,
    :is(.card-header, .page-azioni, .azioni-modulo, .filtro-periodo) .btn-sm { min-height: 44px; }
    .btn-testo { display: inline-flex; align-items: center; min-height: 44px; }
    input[type="file"] { min-height: 44px; }
    input[type="text"], input[type="search"], input[type="email"], input[type="password"],
    input[type="number"], input[type="date"], input[type="time"], input:not([type]),
    select { min-height: 44px; }
    .nav-esci { padding: 12px; }
    .schede a { min-height: 40px; }
    .main-content { padding: 18px 16px 28px; width: 100%; max-width: 100vw; }
    .page-head > .page-azioni { flex-shrink: 1; width: 100%; }
    /* le tabelle larghe scorrono dentro la loro card, la pagina resta ferma */
    .card { overflow-x: auto; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-grid:not(:has(> :nth-child(4))) { flex-wrap: wrap; }
    .stat-grid:not(:has(> :nth-child(4))) > * { min-width: min(100%, 150px); }
    .stat-card { padding: 16px; }
    .stat-value { font-size: 24px; }
}

/* Record "in potenza": arrivati dal CRM in attesa di conferma manuale
   (12/08/2026). Piazzati al loro posto ma sfumati; il click resta attivo. */
.in-potenza { opacity: .5; }
tr.in-potenza td { background: repeating-linear-gradient(135deg,
    transparent, transparent 7px, rgba(199,239,2,.10) 7px, rgba(199,239,2,.10) 9px); }
.albero .in-potenza { opacity: .55; }
.pill-potenza { background: transparent; color: var(--grigio);
    border: 1px dashed var(--lime); }

/* Campi data in formato italiano gg/mm/aaaa con calendario nativo (18/08/2026) */
.dateit { display: inline-flex; align-items: center; gap: 4px; }
.dateit-txt { width: 120px; }
.dateit-cal { position: relative; display: inline-flex; align-items: center;
    justify-content: center; width: 30px; height: 30px; border: 1px solid var(--bordo);
    border-radius: 6px; cursor: pointer; font-size: 14px; background: var(--bianco); user-select: none; }
.dateit-cal input[type=date] { position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: 0; padding: 0; }