/* =========================================================
   Smart HACCP - tema chiaro Lavoro Sicuro
   Palette di marca Lavoro Sicuro:
   #004366 blu (Pantone P 111-16 C) | #FFCD00 giallo (Pantone 116 C)
   Il resto sono grigi di servizio derivati dal blu, non colori di marca.
   ========================================================= */
:root{
    /* I due fondi. Il menu e la barra alta stanno su --chrome, che e'
       piu' scuro del fondo pagina: cosi' l'impalcatura si stacca dal
       contenuto senza bisogno di ombre. I riquadri bianchi restano il
       piano piu' alto dei tre. */
    --bg:#e9edf1;
    --chrome:#91aebb;
    /* La riga deve restare piu' SCURA della fascia: con il grigio chiaro
       di prima, sulla fascia nuova, si sarebbe vista al contrario. */
    --chrome-line:#7291a0;
    /* Il grigio del testo secondario va scurito quando poggia sulla
       fascia: --muted su --chrome sta a 3,4:1 e non basta. */
    --muted-chrome:#333e46;
    /* Il testo delle voci del menu. Su fondo bianco --slate bastava; sulla
       fascia grigia scendeva a 5,1 e le voci sembravano tutte spente. Questo
       sta a 7,5 sulla fascia e a 10,4 dentro il riquadro di Panoramica, che
       e' bianco: un colore solo che regge tutti e due i fondi. */
    --nav-text:#2c3a44;
    --surface:#ffffff;
    --surface-2:#fafbfc;
    --line:#e3e6ea;
    --line-2:#eef0f3;
    --navy:#004366;
    --navy-2:#00314c;
    --slate:#4a5b66;
    --text:#16242d;
    /* Scurito da #68757e: sul fondo pagina nuovo il vecchio valore stava a
       4,03 e il minimo per un testo e' 4,5. Era sotto anche prima, sul
       fondo chiaro di allora - scurendo la pagina si e' visto. */
    --muted:#5f6c76;
    --ambra:#FFCD00;
    /* Il giallo di marca scurito, per gli stati premuti. Ci va sopra il blu,
       mai il bianco: bianco su giallo non si legge. */
    --arancio:#d9ae00;
    /* Oro scuro: e' il giallo portato a un valore che si legge come TESTO su
       fondo bianco. Serve perche' il giallo di marca, usato per scrivere, e'
       illeggibile - lo si e' visto subito sulle icone del menu. */
    --oro-scuro:#7a5c00;
    /* Il fondo della voce del menu in cui ci si trova, e della pastiglia
       del ruolo in alto. E' un colore PIENO e non un velo di ambra come
       era prima: un velo giallo sopra una fascia azzurra da' un verde
       oliva - brutto, e per giunta il verde qui vuol dire conforme. */
    --attiva:#ffe89a;
    --ok:#1f9d63;
    --warn:#a37f00;
    --danger:#d64545;
    --radius:14px;
    --sidebar-w:250px;
    --shadow:0 1px 2px rgba(0,67,102,.07),0 4px 14px rgba(0,67,102,.06);

    /* I cinque toni dei macro-menu. Non sono colori nuovi: sono i due
       colori di marca e i grigi che ne derivano, messi in fila. Sono
       ordinati perche' due bottoni vicini non si somiglino - blu, oro,
       petrolio, blu scuro, ardesia - e reggono tutti il testo bianco
       sopra (il piu' debole, l'oro, sta a 6,2:1).

       Nessuno di questi e' il verde, il rosso o l'ambra: quelli tre
       vogliono dire conforme, fuori limite e da guardare, e un menu
       colorato con gli stessi colori degli esiti si legge come un esito. */
    --tono-1:#004366;
    --tono-2:#7a5c00;
    --tono-3:#2f5d6e;
    --tono-4:#00314c;
    --tono-5:#4a5b66;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
    width:var(--sidebar-w);flex-shrink:0;background:var(--chrome);
    border-right:1px solid var(--chrome-line);display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:12px;padding:18px 16px;border-bottom:1px solid var(--chrome-line)}
.brand-logo{width:42px;height:42px;object-fit:contain;display:block}
.brand-txt strong{display:block;font-size:15px;color:var(--navy);letter-spacing:-.2px}
.brand-txt small{color:var(--muted-chrome);font-size:12px}

.nav{display:flex;flex-direction:column;padding:12px 10px;gap:2px;flex:1;overflow-y:auto}
.nav-link{
    display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
    color:var(--nav-text);font-weight:600;transition:.15s;position:relative;
}
.nav-link .ic{width:20px;text-align:center;opacity:.75}
.nav-link:hover{background:rgba(255,255,255,.6);color:var(--navy)}
.nav-link.active{background:var(--attiva);color:var(--navy);font-weight:700}
.nav-link.active .ic{opacity:1;color:var(--oro-scuro)}
.nav-link.active::before{
    content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
    border-radius:0 3px 3px 0;background:var(--ambra);
}
.nav-link.disabled{opacity:.6;cursor:not-allowed}
.nav-link.disabled:hover{background:none;color:var(--nav-text)}

/* Panoramica non e' una tendina: e' il punto di partenza e resta sempre
   aperta. Ma senza niente attorno, in mezzo ai bottoni pieni degli altri
   gruppi, sembrava un avanzo. Qui prende un riquadro bianco: si vede quanto
   gli altri e resta chiaro che funziona in un altro modo - non si apre e non
   si chiude, c'e' e basta. */
.nav-panoramica {
    background: var(--surface);
    border: 1px solid var(--chrome-line);
    border-radius: 10px;
    padding: 4px 5px 6px;
    margin-bottom: 4px;
    box-shadow: var(--shadow);
}
.nav-panoramica .nav-sep { padding: 8px 9px 5px; color: var(--navy); }
/* Dentro il riquadro il fondo e' gia' bianco: il passaggio del mouse deve
   scurire, non schiarire, altrimenti non si vede niente. */
.nav-panoramica .nav-link:hover { background: var(--line-2); }

.nav-sep{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted-chrome);padding:16px 12px 6px}
.side-foot{padding:14px 16px;border-top:1px solid var(--chrome-line);font-size:12px;color:var(--muted-chrome)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
    display:flex;align-items:center;gap:16px;padding:14px 22px;
    background:var(--chrome);border-bottom:1px solid var(--chrome-line);position:sticky;top:0;z-index:5;
}
.page-title{font-size:18px;font-weight:700;flex:1;color:var(--navy)}
.burger{display:none;background:none;border:0;color:var(--navy);font-size:20px;cursor:pointer}
.user{display:flex;align-items:center;gap:10px}
.user-name{font-weight:600}
.user-role{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--attiva);color:#6b5200;font-weight:600}
.btn-logout{background:none;border:1px solid var(--chrome-line);color:var(--nav-text);padding:6px 12px;border-radius:8px;cursor:pointer;font-family:inherit}
.btn-logout:hover{color:var(--navy);border-color:var(--navy);background:rgba(255,255,255,.55)}

.content{padding:24px;max-width:1200px;width:100%}

/* ---------- KPI ---------- */

/* La cella e' piena, non bianca con una riga di colore sopra.
   Il testo dentro e' bianco: per questo il colore va dichiarato sulla cella e
   non solo sul numero - in una pagina la cella contiene un testo (.kpi-testo)
   che non ha un colore suo e lo eredita da qui. */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi-card{
    background:var(--navy);border:1px solid var(--navy);border-radius:var(--radius);
    padding:20px;box-shadow:var(--shadow);color:#fff;
}
.kpi-val{font-size:34px;font-weight:800;line-height:1;color:#fff}
/* Azzurro chiaro invece del bianco pieno: l'etichetta deve stare sotto al
   numero nella scala di lettura, non accanto. Sta a 6,8:1, ben oltre il
   minimo. */
.kpi-lbl{color:#b9d3e2;margin-top:6px;font-size:13px}

/* ---------- Panels & tables ---------- */
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:18px;margin-bottom:16px;box-shadow:var(--shadow);
}
.panel-title{margin:0 0 14px;font-size:15px;color:var(--navy)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{
    text-align:left;color:var(--muted);font-weight:700;padding:10px;
    border-bottom:2px solid var(--line);font-size:12px;text-transform:uppercase;letter-spacing:.4px;
}
.table td{padding:11px 10px;border-bottom:1px solid var(--line-2)}
.table tbody tr:hover{background:var(--surface-2)}
.table tr:last-child td{border-bottom:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--muted)}
.muted{color:var(--muted)}

.pill{display:inline-block;padding:2px 9px;border-radius:20px;background:var(--line-2);font-size:12px;font-weight:600;color:var(--slate)}
.pill-warn{background:rgba(255,205,0,.18);color:#6b5200}
.pill-allerg{background:rgba(217,174,0,.12);color:#7a5c00;margin:1px;border:1px solid rgba(217,174,0,.3)}

/* ---------- Buttons / toolbar ---------- */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
/* La barra di ricerca deve poter andare a capo e i suoi campi devono poter
   rimpicciolirsi. Senza queste due cose, su una finestra non massimizzata il
   modulo sbordava dalla barra e finiva sopra al pulsante che gli sta a
   destra: min-width e' un minimo VERO, e un campo che non puo' scendere
   sotto i 280px semplicemente esce dal contenitore invece di stringersi. */
/* La barra resta su UNA riga e si adatta stringendo il campo, non mandando
   a capo il pulsante. Il flex-wrap che c'era qui prima faceva finire
   "Cerca" sotto al campo anche con mezzo schermo libero: in un
   contenitore flex che puo' andare a capo, la larghezza naturale si
   calcola in un modo che qui dava un numero piu' stretto del contenuto
   vero, e il pulsante non ci stava per pochi pixel. Il restringimento
   del campo (flex:0 1 240px con min-width:0) copre gli schermi stretti
   meglio di quanto facesse l'andare a capo. */
.search{display:flex;gap:8px;align-items:center;min-width:0;max-width:100%}
/* Solo i CAMPI possono stringersi. Applicandolo anche ai pulsanti, la
   barra si calcolava la larghezza contando il pulsante alla sua misura
   minima - quella con il testo spezzato - e poi lo disegnava a misura
   piena: risultato, "Cerca" andava a capo con mezzo schermo libero. */
.search input,.search select,.search textarea{min-width:0}
/* Il pulsante non si stringe mai: e' l'unico modo per cui la barra si
   calcola la larghezza contandolo per intero. Lasciandolo comprimibile,
   il conto veniva piu' stretto del vero e il pulsante andava a capo. */
.search .btn{flex:none}
/* Stessa storia della barra di azioni: con la larghezza al 100% il campo di
   ricerca si prendeva tutta la riga e il pulsante "Cerca" andava a capo da
   solo anche con mezzo schermo libero.
   Si dice quanto vorrebbe essere largo (240) e che puo' stringersi ma non
   allargarsi: e' la stessa cosa che voleva dire il min-width di prima, detta
   in modo che non dipenda dalla larghezza del contenitore - che a sua volta
   dipende dal campo, e il giro si mordeva la coda. */
.search input{width:auto;flex:0 1 240px;min-width:0;margin-top:0}
.btn{
    display:inline-block;padding:9px 16px;border-radius:9px;border:1px solid var(--line);
    background:var(--surface);color:var(--navy);cursor:pointer;font-size:14px;font-weight:600;
    font-family:inherit;transition:.15s;
}
.btn:hover{border-color:var(--ambra);background:rgba(255,205,0,.08)}
.btn-primary{background:var(--ambra);border:1px solid var(--ambra);color:var(--navy)}
.btn-primary:hover{background:var(--arancio);border-color:var(--arancio);color:var(--navy)}
.btn-block{width:100%;padding:12px}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-danger{background:#fff;color:var(--danger);border-color:rgba(214,69,69,.35)}
.btn-danger:hover{background:rgba(214,69,69,.08);border-color:var(--danger)}
/* La cella delle azioni deve restare una cella di tabella: con display:flex il
   <td> esce dal flusso della riga e il suo bordo inferiore non si allinea piu'
   a quello delle altre celle. */
.row-actions{white-space:nowrap}
.row-actions>*{display:inline-block;vertical-align:middle}
.row-actions>*+*{margin-left:6px}
.row-actions form{margin:0}

/* Un modulo dentro una barra di azioni.
 *
 * Qui c'era il difetto che si vedeva sulla pagina delle forniture: il
 * pulsante "Ripeti" finiva stampato SOPRA il pulsante accanto.
 *
 * La causa: la regola generale dice che ogni input e ogni select sono larghi
 * il 100%. Dentro un contenitore che si adatta al contenuto, come un form in
 * riga, quel 100% si misura sulla larghezza finale del form - e cosi' il menu
 * a tendina se la prende tutta e il pulsante che lo segue esce fuori dal
 * form, andando a cadere addosso a quello che viene dopo. Il form risultava
 * largo esattamente quanto la sola tendina: 315 pixel per tutti e due.
 *
 * Si risolve dicendo due cose: dentro una barra di azioni i campi si
 * dimensionano sul contenuto, e il form dispone i suoi pezzi in riga per
 * conto suo invece di affidarsi al flusso in linea.
 */
.row-actions form{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}

/* In una barra in cima alla pagina i pulsanti vanno a capo quando lo spazio
   finisce. Dentro una cella di tabella no: li' il nowrap serve a tenere la
   cella una cella, e senza di esso il bordo inferiore non si allinea piu' a
   quello delle altre. Sono due posti diversi con due esigenze opposte. */
.toolbar .row-actions{
    white-space:normal;display:flex;flex-wrap:wrap;align-items:center;
    gap:6px;justify-content:flex-end;
}
.toolbar .row-actions>*+*{margin-left:0}
/* La spaziatura la mette gia' il gap: senza questo i pezzi dentro il form
   ne prenderebbero due, quella del gap e quella della regola generale. */
.row-actions form>*+*{margin-left:0}
.row-actions input,.row-actions select,.row-actions textarea{
    width:auto;max-width:100%;margin-top:0;
}

/* ---------- Forms ---------- */
input,select{
    width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line);
    background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;margin-top:6px;
}
input::placeholder{color:#a8adb5}
input:focus,select:focus{outline:none;border-color:var(--ambra);box-shadow:0 0 0 3px rgba(255,205,0,.18)}
label{display:block;font-size:13px;color:var(--slate);font-weight:600}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .col-2{grid-column:1 / -1}
.form-actions{display:flex;gap:10px;margin-top:20px}
.allerg-set{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface-2)}
.allerg-set legend{padding:0 8px;color:var(--muted);font-size:12px;font-weight:600}
.allerg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.allerg-item{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:500}
.allerg-item input{width:auto;margin:0}
.check{display:flex;align-items:center;gap:8px;color:var(--text)}
.check input{width:auto;margin:0}
/* Dentro una griglia il riquadro va allineato al campo accanto, che ha
   un'etichetta sopra di se': senza questo resterebbe appeso in alto. */
.form-grid>.check{align-self:end;padding-bottom:11px}
input[type="checkbox"]{accent-color:var(--navy)}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:14px}
.alert-ok{background:rgba(31,157,99,.16);color:#166b45;border:1px solid rgba(31,157,99,.38)}
.alert-err{background:rgba(214,69,69,.15);color:#a12f2f;border:1px solid rgba(214,69,69,.38)}
.alert-info{background:rgba(0,67,102,.11);color:#004366;border:1px solid rgba(0,67,102,.28)}
/* Giallo: non e' un errore, e' una cosa che aspetta di essere guardata.
   Serve distinguerlo dal rosso, altrimenti chi vede rosso ovunque smette di
   leggere anche i rossi veri. */
.alert-warn{background:rgba(255,205,0,.28);color:#6b5200;border:1px solid rgba(217,174,0,.55)}
.pager{margin-top:14px}
.pager a,.pager span{color:var(--muted)}

/* ---------- Login ---------- */
.login-body{
    display:grid;place-items:center;min-height:100vh;
    background:radial-gradient(900px 480px at 50% -8%,rgba(255,205,0,.22),transparent),var(--bg);
}
.login-card{
    width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);
    border-radius:18px;padding:32px 28px;margin:20px;
    box-shadow:0 2px 6px rgba(0,67,102,.06),0 18px 40px rgba(0,67,102,.10);
    border-top:4px solid var(--ambra);
}
.login-brand{text-align:center;margin-bottom:22px}
.login-logo{width:150px;max-width:70%;height:auto;display:block;margin:0 auto 6px}
.login-brand h1{margin:14px 0 4px;font-size:22px;color:var(--navy)}
.login-brand p{color:var(--muted);font-size:13px;margin:0}
.login-form label{margin-bottom:14px;color:var(--slate)}
.login-hint{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.login-hint strong{color:var(--navy)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
    .kpi-grid{grid-template-columns:repeat(2,1fr)}
    .panel-grid,.form-grid,.allerg-grid{grid-template-columns:1fr}
    .sidebar{position:fixed;left:0;top:0;z-index:30;transform:translateX(-100%);transition:.2s;box-shadow:0 0 40px rgba(0,67,102,.18)}
    .sidebar.open{transform:translateX(0)}
    .burger{display:block}
}

/* --- Moduli operativi (forniture, inventario, ricette) --- */
.form-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .form-grid-4 { grid-template-columns: 1fr; } }

.righe-editor select,
.righe-editor input[type="text"],
.righe-editor input[type="number"],
.righe-editor input[type="date"] {
    width: 100%;
    box-sizing: border-box;
}
.righe-editor td { vertical-align: middle; }
.righe-editor .cella-check { text-align: center; }
.righe-editor input[type="checkbox"] { width: 18px; height: 18px; }

/* --- Aziende clienti e fascicolo documentale --- */
textarea {
    width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line);
    background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit;
    margin-top: 6px; resize: vertical;
}
textarea:focus { outline: none; border-color: var(--ambra); box-shadow: 0 0 0 3px rgba(255,205,0,.18); }
input[type="file"] { padding: 8px 10px; background: var(--surface-2); }

.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .form-grid-3 { grid-template-columns: 1fr; } }

.pill-ok { background: rgba(31,157,99,.13); color: #166b45; }
.pill-err { background: rgba(214,69,69,.12); color: #a12f2f; }
.pill-off { background: var(--line-2); color: var(--muted); }

/* Semaforo di categoria */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--ambra); }
.dot-err { background: var(--danger); }
.dot-off { background: #c9ced6; }

/* Scheda azienda: griglia dei dati anagrafici */
.dati { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 20px; }
@media (max-width: 1100px) { .dati { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dati { grid-template-columns: 1fr; } }
.dati > div { font-size: 14px; color: var(--text); }
.dati-lbl { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.nota {
    margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--line);
    font-size: 14px; color: var(--slate);
}

/* Testo scritto a mano in un campo note: gli a capo li ha messi chi ha
   compilato, quindi vanno rispettati anche a schermo. */
.testo-lungo { margin: 4px 0 0; font-size: 14px; color: var(--text); white-space: pre-line; }

/* Categorie documento richiudibili */
.doc-cat { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: var(--surface-2); }
.doc-cat:last-child { margin-bottom: 0; }
.doc-cat > summary {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; cursor: pointer; list-style: none;
}
.doc-cat > summary::-webkit-details-marker { display: none; }
.doc-cat > summary::after { content: '+'; margin-left: auto; color: var(--muted); font-weight: 700; }
.doc-cat[open] > summary::after { content: '\2013'; }
.doc-cat[open] > summary { border-bottom: 1px solid var(--line); }
.doc-cat-nome { font-weight: 700; color: var(--navy); font-size: 14px; }
.doc-cat .table { background: var(--surface); }
.doc-cat .table th { padding-left: 14px; }
.doc-cat .table td { padding-left: 14px; }
/* Ogni categoria ha la sua tabella: senza larghezze fisse ognuna calcolerebbe
   le colonne sul proprio contenuto e le intestazioni non sarebbero incolonnate
   fra un blocco e l'altro. */
.doc-cat .table { table-layout: fixed; }
.doc-cat .table th:nth-child(1), .doc-cat .table td:nth-child(1) { width: 32%; }
.doc-cat .table th:nth-child(2), .doc-cat .table td:nth-child(2) { width: 11%; }
.doc-cat .table th:nth-child(3), .doc-cat .table td:nth-child(3) { width: 12%; }
.doc-cat .table th:nth-child(4), .doc-cat .table td:nth-child(4) { width: 13%; }
.doc-cat .table th:nth-child(5), .doc-cat .table td:nth-child(5) { width: 13%; }
.doc-cat .table th:nth-child(6), .doc-cat .table td:nth-child(6) { width: 19%; }
.doc-cat .table td:nth-child(1) { overflow-wrap: anywhere; }
.doc-vuota { margin: 0; padding: 12px 14px; font-size: 13px; }

/* Selettore unita' nella toolbar */
/* Stesso motivo: 280px erano il minimo giusto per leggere il nome di
   un'unita' locale, ma come minimo assoluto facevano sbordare la barra sulle
   finestre strette. Ora e' una larghezza PREFERITA che puo' cedere. */
.sel-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate); font-weight: 600; min-width: 0; max-width: 100%; }
.sel-inline select { flex: 1 1 280px; min-width: 0; max-width: 100%; margin-top: 0; }

/* ---------- Menu a due livelli: studio e azienda aperta ---------- */
.nav-azienda {
    margin: 14px 2px 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.55);
    border: 1px solid var(--chrome-line);
}
.nav-azienda-etichetta {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted-chrome);
    font-weight: 700;
}
.nav-azienda-nome {
    display: block;
    font-size: 14px;
    color: var(--navy);
    line-height: 1.25;
    margin: 3px 0 4px;
    overflow-wrap: anywhere;
}
.nav-azienda-cambia { font-size: 12px; color: var(--oro-scuro); font-weight: 600; }
.nav-azienda-cambia:hover { text-decoration: underline; }

/* Voce con sottomenu: <details> senza JavaScript. */
.nav-group > summary { list-style: none; cursor: pointer; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after {
    content: '+';
    margin-left: auto;
    color: var(--muted);
    font-weight: 700;
}
.nav-group[open] > summary::after { content: '\2013'; }
.nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 14px; }
.nav-sub .nav-link { padding: 7px 10px; font-size: 13px; }
.nav-sub .nav-link .ic { width: 12px; }

/* ---------- Macro-menu: i gruppi come bottoni pieni ----------

   Prima i gruppi erano scritte grigie e basta, e tutte le voci di tutti i
   gruppi stavano in fila: su un cliente con tutte le sezioni accese erano
   piu' di venti collegamenti aperti insieme. Ora ogni gruppo e' un bottone
   che si apre, tranne "Panoramica" che resta sempre aperto perche' e' il
   punto di partenza.

   Il colore lo porta l'attributo data-tono, assegnato per posizione: un
   gruppo nuovo aggiunto in config/sezioni.php prende il suo tono da solo,
   senza che nessuno debba ricordarsi di scriverlo anche qui. */
.nav-macro { margin: 9px 0 2px; }
.nav-macro[data-tono="1"] { --tono: var(--tono-1); }
.nav-macro[data-tono="2"] { --tono: var(--tono-2); }
.nav-macro[data-tono="3"] { --tono: var(--tono-3); }
.nav-macro[data-tono="4"] { --tono: var(--tono-4); }
.nav-macro[data-tono="5"] { --tono: var(--tono-5); }

.nav-macro > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 9px;
    padding: 11px 13px; border-radius: 10px;
    background: var(--tono, var(--navy)); color: #fff;
    font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: .5px;
    transition: filter .15s;
}
.nav-macro > summary::-webkit-details-marker { display: none; }
.nav-macro > summary:hover { filter: brightness(1.15); }
.nav-macro > summary::after {
    content: '+'; margin-left: auto; font-size: 15px; opacity: .85;
}
.nav-macro[open] > summary::after { content: '\2013'; }

/* Il pallino ambra dice "la pagina in cui sei sta qui dentro" anche quando
   il gruppo e' chiuso: senza, chiudendo il gruppo si perde il segno di dove
   ci si trova. */
.nav-macro.qui > summary::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ambra); flex-shrink: 0;
}

.nav-macro-corpo { display: flex; flex-direction: column; gap: 2px; padding: 5px 0 4px 6px; }

/* Dentro un macro-menu le voci sono gia' qualificate dal bottone sopra:
   la barretta ambra a sinistra basta a segnare quella attiva. */
.nav-macro-corpo .nav-link { font-size: 13.5px; }

/* ---------- Riepilogo dell'azienda aperta ---------- */
.riepilogo-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.riepilogo-testa .panel-title { margin-bottom: 4px; }
.riepilogo-sottotitolo { margin: 0; font-size: 13px; }
.riepilogo-num { text-align: right; white-space: nowrap; }

.kpi-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .kpi-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .kpi-grid-5 { grid-template-columns: repeat(2, 1fr); } }

.copertura { margin-bottom: 14px; }
.copertura-testo { font-size: 14px; color: var(--text); margin-bottom: 7px; }
.copertura-testo strong { color: var(--navy); }
.barra { height: 8px; border-radius: 20px; background: var(--line-2); overflow: hidden; }
.barra-riempimento { display: block; height: 100%; border-radius: 20px; background: var(--ambra); }

/* ---------- Accessi alla piattaforma ---------- */

/* Riquadro delle credenziali appena create: si vede una volta sola, quindi
   deve staccare dal resto della pagina senza usare un fondo scuro. */
.panel-evidenza { border-color: var(--ambra); background: rgba(255,205,0, .07); }
.panel-evidenza .panel-title { color: var(--navy); }
.mono-grande { font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: .06em; }

.form-sezione { margin: 24px 0 4px; font-size: 14px; color: var(--navy); }
.form-nota { font-size: 13px; margin: 0 0 14px; }

.user-password { font-size: 12px; color: var(--muted-chrome); text-decoration: none; }
.user-password:hover { color: var(--navy); text-decoration: underline; }

.login-nota { margin-top: 18px; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- Schede di registrazione ---------- */

/* Aiuto e messaggio d'errore sotto un campo del modulo. Stanno dentro la
   label, quindi devono tornare a peso normale: la label e' in grassetto. */
.campo-aiuto { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 5px; }
.campo-errore { display: block; font-size: 12px; color: #a12f2f; font-weight: 600; margin-top: 5px; }

/* Riga di dettaglio: anomalie, descrizioni lunghe, azione correttiva e note.
   Sta sotto la riga a cui appartiene, senza bordo in mezzo. */
.riga-dettaglio > td {
    background: var(--surface-2); border-top: 0; font-size: 13px;
    color: var(--slate); padding-top: 2px;
}
.riga-dettaglio ul { margin: 4px 0 8px; padding-left: 20px; }
.dett-voce { display: block; margin-bottom: 4px; }
.dett-voce:last-child { margin-bottom: 0; }
.dett-lbl { font-weight: 600; color: var(--navy); }

/* Un dato non numerico dentro una scheda KPI: la frequenza prevista. */
.kpi-testo { font-size: 20px; }

.elenco-limiti { margin: 6px 0 10px; padding-left: 20px; }
.elenco-limiti li { margin-bottom: 2px; }

/* Il riquadro del tipo di attivita' nell'anagrafica del cliente: le
   descrizioni dei profili stanno in un pieghevole, cosi' si leggono quando
   servono e non allungano il modulo a chi le sa gia'. */
details.form-nota > summary {
    cursor: pointer; color: var(--navy); font-weight: 600;
    padding: 4px 0; list-style: none; font-size: 13px;
}
details.form-nota > summary::-webkit-details-marker { display: none; }
details.form-nota > summary::after {
    content: '+'; margin-left: 6px; color: var(--muted); font-weight: 700;
}
details.form-nota[open] > summary::after { content: '\2013'; }
.elenco-profili { margin: 6px 0 10px; padding-left: 20px; font-size: 13px; color: var(--slate); }
.elenco-profili li { margin-bottom: 6px; }
.elenco-profili li:last-child { margin-bottom: 0; }
.elenco-profili strong { color: var(--navy); }

/* ---------- Registri attivi ---------- */

/* I registri di base: elenco di sola lettura, senza casella. */
.elenco-base { margin: 0; padding-left: 20px; font-size: 14px; color: var(--slate); }
.elenco-base li { margin-bottom: 4px; }
.elenco-base li:last-child { margin-bottom: 0; }

.registri-elenco { display: grid; gap: 10px; margin-bottom: 18px; }

/* Ogni registro e' un riquadro cliccabile per intero: la casella sta a
   sinistra, allineata alla prima riga del testo e non al centro del blocco. */
.registro-voce {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface-2); cursor: pointer; font-weight: 400;
}
.registro-voce:hover { border-color: var(--ambra); }
.registro-voce > input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.registro-acceso { border-color: var(--ambra); background: rgba(255,205,0, .07); }

.registro-testo { display: block; }
.registro-nome {
    display: block; font-weight: 600; color: var(--navy);
    font-size: 15px; margin-bottom: 4px;
}
.registro-icona { color: var(--oro-scuro); margin-right: 4px; }
.registro-descrizione { display: block; font-size: 13px; color: var(--slate); }
.registro-conteggio { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- Sopralluoghi ---------- */

/* La checklist e' larga: le colonne dei rilievi si stringono, cosi' le voci
   restano leggibili anche con l'azione correttiva e il termine in riga. */
.tabella-rilievi input[type="text"],
.tabella-rilievi input[type="date"],
.tabella-rilievi select { width: 100%; }
.tabella-rilievi td { vertical-align: top; }

.riga-rilievo.riga-nc { background: rgba(214, 69, 69, .05); }

/* La cella resta al suo posto anche quando non serve: se la nascondessimo del
   tutto, le celle successive scivolerebbero sotto l'intestazione sbagliata.
   Quindi si nasconde solo quello che c'e' dentro. */
.riga-rilievo:not(.riga-nc) .solo-nc > * { display: none; }

/* Il modulo di chiusura sta dentro una cella della tabella: data e bottone
   affiancati, senza andare a capo. */
.chiusura-rilievo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chiusura-rilievo input[type="date"] { width: auto; }

/* ---------- Pest control ---------- */

/* Il giro delle postazioni si registra da una riga sola. */
.controllo-rapido { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.controllo-rapido input[type="date"],
.controllo-rapido select { width: auto; }

/* La planimetria sta a sinistra, l'elenco delle postazioni a destra. */
.mappa-lavoro {
    display: grid; grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px; align-items: start; margin-bottom: 14px;
}

/* Il contenitore e' il riferimento dei punti: le percentuali salvate valgono
   sull'immagine, quindi il blocco si adatta a lei e non il contrario. */
.mappa-contenitore {
    position: relative; display: inline-block; max-width: 100%;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface-2); overflow: hidden;
}
.mappa-immagine { display: block; max-width: 100%; height: auto; cursor: crosshair; }

/* Il punto e' ancorato al suo centro, cosi' cade esattamente dove si e'
   fatto clic e non in alto a sinistra rispetto al dito. */
.mappa-punto {
    position: absolute; transform: translate(-50%, -50%);
    min-width: 24px; height: 24px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 2px solid var(--surface);
    background: var(--navy); color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1;
    box-shadow: 0 1px 4px rgba(0,67,102, .35); pointer-events: none;
}
.mappa-punto-off { display: none; }

.mappa-elenco { display: grid; gap: 8px; max-height: 520px; overflow-y: auto; }

.mappa-voce {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface-2); cursor: pointer; font-weight: 400;
}
.mappa-voce:hover { border-color: var(--ambra); }
.mappa-voce > input[type="radio"] { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.mappa-voce:has(> input[type="radio"]:checked) {
    border-color: var(--ambra); background: rgba(255,205,0, .07);
}

.mappa-voce-testo { display: block; flex: 1 1 auto; min-width: 0; }
.mappa-voce-nome { display: block; font-weight: 600; color: var(--navy); font-size: 14px; }
.mappa-voce-stato { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

@media (max-width: 1000px) {
    .mappa-lavoro { grid-template-columns: minmax(0, 1fr); }
    .mappa-elenco { max-height: none; }
}

/* ---------- Tracciabilita' dei lotti ---------- */

/* I filtri dell'elenco: sono collegamenti, ma si leggono come pulsanti.
   Quello aperto resta acceso, cosi' si vede sempre che cosa si sta
   guardando. */
.filtri { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 20px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--slate); text-decoration: none;
}
.filtro:hover { border-color: var(--ambra); }
.filtro-attivo { border-color: var(--ambra); background: rgba(255,205,0, .12); color: var(--navy); }
.filtro-num {
    min-width: 20px; padding: 0 6px; border-radius: 20px; text-align: center;
    background: var(--line-2); color: var(--slate); font-size: 12px;
}
.filtro-attivo .filtro-num { background: var(--ambra); color: var(--navy); }

/* Intestazione della scheda di richiamo: il codice del lotto e' il dato
   che si cerca per primo, quindi si legge da lontano. */
.lotto-codice { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: .04em; }

/* L'intestazione da stampa non serve a schermo: a video la ragione sociale
   sta nel menu e la data ce l'ha chi guarda. */
.stampa-testa { display: none; }

/* La scheda di richiamo si consegna stampata: via tutto quello che sulla
   carta non serve. */
@media print {
    .sidebar, .topbar, .form-actions, .toolbar, .pager { display: none !important; }
    .app { display: block; }
    .content { padding: 0; }
    .panel { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }

    /* Sulla carta la cella torna bianca: il pieno scuro consuma inchiostro e
       in fotocopia diventa una macchia con dentro un numero illeggibile. */
    .kpi-card { background: #fff; border: 1px solid #ccc; color: #000; box-shadow: none; }
    .kpi-val { color: #000; }
    .kpi-lbl { color: #444; }

    /* Sulla carta invece si stampa per prima: dice di chi e' il foglio,
       che cosa contiene e quando e' stato prodotto. */
    .stampa-testa {
        display: block; margin-bottom: 14px;
        padding-bottom: 10px; border-bottom: 2px solid #333;
    }
    .stampa-testa strong { display: block; font-size: 16px; color: #000; }
    .stampa-testa span { display: block; font-size: 12px; }
}

/* ---------- Lettore del codice a barre ---------- */

/* La finestra di lettura copre la pagina: chi sta inquadrando una confezione
   ha le mani impegnate e non deve poter toccare altro per sbaglio. */
.lettore-sfondo {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(0,67,102, .55);
}
.lettore {
    width: 100%; max-width: 420px;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(0,67,102, .28);
    padding: 16px;
}
.lettore-testa {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; color: var(--navy);
}
.lettore-chiudi {
    border: 0; background: none; cursor: pointer;
    font-size: 24px; line-height: 1; color: var(--muted);
}
.lettore-chiudi:hover { color: var(--navy); }

/* Il riquadro della fotocamera compare solo quando c'e' davvero qualcosa da
   mostrare: uno spazio nero vuoto sembrerebbe un guasto. */
.lettore-video { display: none; width: 100%; border-radius: 10px; background: #000; }
.lettore-video-acceso { display: block; }

.lettore-avviso { margin: 12px 0; font-size: 13px; color: var(--muted); }
.lettore-avviso-err { color: var(--danger); }

.lettore-manuale { display: flex; gap: 8px; }
.lettore-casella {
    flex: 1; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--line); font-size: 15px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.lettore-casella:focus { outline: none; border-color: var(--ambra); }
.lettore-nota { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* Il pulsante di lettura sta sotto al campo che riempie, con lo stesso
   stacco che hanno i campi dalle loro etichette. Nella barra di ricerca,
   dove sta in fila con gli altri pulsanti, quello stacco non serve. */
.btn-scan { white-space: nowrap; margin-top: 6px; }
.search .btn-scan { margin-top: 0; }

/* Il riquadro che compare quando il codice letto non e' ancora a catalogo. */
.codice-nuovo { margin-top: 12px; }
.codice-nuovo .codice-letto {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700; color: var(--navy);
}

/* ---------- Promemoria "Da fare oggi" ---------- */

/* Sta in cima al riepilogo, quindi non deve gridare: e' una tabella normale,
   a distinguere le righe bastano le pastiglie di stato. */
.promemoria .table td { vertical-align: middle; }
.promemoria-icona {
    display: inline-block; width: 22px; text-align: center;
    font-size: 15px; color: var(--muted);
}
.promemoria-nome { font-weight: 600; color: var(--navy); }
.promemoria-cadenza { font-size: 12px; margin-left: 8px; }
.promemoria-stato { width: 1%; white-space: nowrap; }
.promemoria-azione { width: 1%; white-space: nowrap; text-align: right; }
.promemoria-nota { margin: 12px 0 0; font-size: 13px; }

/* Sul telefono lo spazio serve tutto al nome del registro e a quando e'
   stato compilato l'ultima volta: la cadenza e' scritta anche nella pagina
   del registro, la pastiglia di stato dice gia' tutto da sola. */
/* =========================================================
   Schermo stretto: il telefono.

   La piattaforma completa nasce per chi lavora seduto, e va bene cosi':
   chi registra in cucina ha la vista rapida. Ma "non e' la vista pensata
   per il telefono" non puo' voler dire "sul telefono si vede male", e il
   difetto che si vedeva era grosso: la pagina INTERA scorreva di lato.

   La causa e' sempre la stessa. Una tabella con sei colonne ha una
   larghezza minima che sul telefono non ci sta; non potendo stringersi
   sfonda il riquadro, il riquadro sfonda il contenuto, e alla fine e' il
   documento a scorrere. Da li' tutto il resto sembra rotto: le
   intestazioni tagliate a meta', il pollice che sposta la pagina invece di
   scorrerla in giu'.

   La cura e' una riga sola: la tabella deve scorrere DENTRO il suo
   riquadro. Il resto di questo blocco sono aggiustamenti di misura.
   ========================================================= */

@media (max-width: 900px) {
    /* Il riquadro trattiene quello che deborda invece di allargarsi.
       -webkit-overflow-scrolling tiene lo scorrimento fluido su iOS.
       Sotto i 700 px le tabelle diventano schede e non deborda piu'
       niente: questo resta per la fascia in mezzo, il tablet in verticale. */
    .panel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Nessuno dei due deve poter allargare il documento. */
    .content { padding: 16px; min-width: 0; }
    .main, .app { max-width: 100%; overflow-x: clip; }
}

/* La larghezza minima della tabella vale SOLO nella fascia in mezzo - il
   tablet in verticale - dove la tabella resta una tabella e scorre dentro
   il riquadro. Sotto i 700 px non deve valere per nessuno: le tabelle con
   le intestazioni diventano schede, e quelle senza (le due colonne
   "voce / valore" dei riepiloghi) ci stanno gia' comode. Lasciandola
   valere anche li', quei riepiloghi si mettevano a scorrere di lato senza
   avere niente da mostrare piu' in la'. */
@media (min-width: 701px) and (max-width: 900px) {
    .table { min-width: 560px; }
}

/* ---------------------------------------------------------
   Le tabelle diventano schede.

   Sotto i 700 px una tabella a sei colonne non si legge in nessun modo:
   o si stringe fino a spezzare le parole, o scorre di lato portando le
   intestazioni fuori campo - e un numero senza la sua intestazione non
   vuol dire niente. La griglia va abbandonata, non compressa.

   Ogni riga diventa una scheda: in alto il nome (la prima colonna, che
   in tutte le tabelle della piattaforma e' cio' che la riga E'), sotto
   le altre colonne come "etichetta ..... valore" allineate ai due lati.
   Si legge in verticale, con il pollice, senza mai spostarsi di lato.

   Le etichette non sono scritte qui ne' nelle pagine: le copia dalle
   intestazioni public/js/tabelle.js, che marca la tabella con la classe
   .tabella-a-schede solo se ci e' riuscito. Se lo script non parte, si
   torna da soli alla tabella che scorre: peggio, ma non rotto.
   --------------------------------------------------------- */

@media (max-width: 700px) {
    .tabella-a-schede,
    .tabella-a-schede > tbody,
    .tabella-a-schede > tbody > tr,
    .tabella-a-schede > tbody > tr > td {
        display: block;
        width: auto;
    }

    /* Le intestazioni ora stanno dentro le celle: la riga in cima non
       serve piu' e toglierla la nasconde anche ai lettori di schermo,
       che altrimenti leggerebbero sette parole slegate prima di ogni
       elenco. */
    .tabella-a-schede > thead { display: none; }

    .tabella-a-schede > tbody > tr {
        border: 1px solid var(--line);
        border-radius: 12px;
        margin-bottom: 12px;
        background: var(--surface);
        overflow: hidden;
    }

    /* Lo sfondo al passaggio del mouse non ha senso dove non c'e' un
       mouse, e su una scheda coprirebbe tutto. */
    .tabella-a-schede > tbody > tr:hover { background: var(--surface); }

    .tabella-a-schede > tbody > tr > td {
        border: 0;
        border-top: 1px solid var(--line-2);
        padding: 9px 12px;
        text-align: right;
        font-size: 14px;
    }

    /* La prima cella e' il titolo della scheda: tutta larga, allineata a
       sinistra, su fondo appena diverso perche' si veda dove comincia una
       scheda e finisce quella prima. */
    .tabella-a-schede > tbody > tr > td:first-child {
        text-align: left;
        border-top: 0;
        background: var(--surface-2);
        padding: 11px 12px;
        font-size: 15px;
    }

    /* Le celle con un'etichetta: nome a sinistra, valore a destra.

       L'etichetta e' un elemento FLOTTANTE, non una colonna flex, e la
       differenza conta. Con il flex ogni pezzo della cella diventa un
       riquadro a se': "Luigi Tassone<br>l'email" si spezza in due
       riquadri affiancati e l'a-capo sparisce - si vedeva sulla colonna
       del referente, nome ed email appiccicati sulla stessa riga.
       Flottando, l'etichetta si mette da parte e il contenuto della cella
       resta il testo che era, con i suoi a-capo.

       flow-root serve a tenere il flottante dentro la cella: senza,
       sborderebbe sulla cella dopo. */
    .tabella-a-schede > tbody > tr > td[data-e] {
        display: flow-root;
    }

    .tabella-a-schede > tbody > tr > td[data-e]::before {
        content: attr(data-e);
        float: left;
        max-width: 45%;
        margin-right: 14px;
        text-align: left;
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        /* L'etichetta e' piu' piccola del valore: senza questo starebbe
           appesa in alto invece che sulla sua riga. */
        line-height: 20px;
    }

    /* Una cella vuota, in tabella, e' una colonna senza valore per questa
       riga: si legge dall'allineamento. Nella scheda diventerebbe una
       etichetta sola, sospesa, che sembra un dato mancante per errore. */
    .tabella-a-schede > tbody > tr > td[data-e]:empty { display: none; }

    /* I pulsanti: a capo, larghi da premere, allineati a sinistra come
       tutto il resto della scheda. Il nowrap che li tiene in riga dentro
       una cella di tabella qui li manderebbe fuori dallo schermo. */
    .tabella-a-schede .row-actions {
        white-space: normal;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        text-align: left;
    }
    .tabella-a-schede .row-actions > * + * { margin-left: 0; }
    .tabella-a-schede .row-actions .btn { min-height: 38px; display: inline-flex; align-items: center; }

    /* La riga "nessun risultato": una cella sola su tutte le colonne. */
    .tabella-a-schede > tbody > tr > td[colspan] { text-align: left; background: var(--surface); }
}

@media (max-width: 560px) {
    /* La barra alta si stringe: restano il panino, il titolo e l'uscita.
       Il nome e il ruolo si leggono nel menu, e su 360 px mandavano
       "Cambia password" a capo in mezzo alla riga. */
    .topbar { padding: 10px 12px; gap: 10px; }
    .page-title { font-size: 16px; }
    .user-name, .user-role { display: none; }
    .user { gap: 8px; }
    .user-password, .btn-logout { white-space: nowrap; font-size: 12px; padding: 6px 10px; }

    /* Le celle dei numeri restano DUE per riga, ma piu' basse.
       In colonna singola quattro riquadri alti si mangiavano due schermate
       intere prima di arrivare al contenuto della pagina. */
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
    .kpi-card { padding: 12px; }
    .kpi-val { font-size: 26px; }
    .kpi-lbl { font-size: 12px; margin-top: 3px; }

    /* La barra di ricerca prende la riga per se' e il pulsante che aggiunge
       sta sotto, largo: su 360 px stavano stretti in tre sulla stessa riga. */
    .toolbar { gap: 10px; }
    .toolbar .search { flex: 1 1 100%; }
    .toolbar > .btn { flex: 1 1 100%; text-align: center; }

    .panel { padding: 12px; }
    .panel > .table { font-size: 13px; }
}

@media (max-width: 720px) {
    .promemoria-cadenza { display: none; }
    .promemoria-icona { display: none; }
    .promemoria .table td { padding: 10px 6px; }
}

/* --- Materie prime comprate fuori dal magazzino --- */
/* Un riquadro sfondato, non una griglia come il resto del modulo: chi
   compila deve capire a colpo d'occhio che quella parte e' facoltativa e
   riguarda solo la merce che non e' passata dal magazzino. */
.riquadro-materie {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 14px 16px;
    margin-top: 18px;
}
.riquadro-titolo {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}
.riquadro-materie .form-nota { margin: 0 0 12px; }
.materia-spunta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--navy);
}
.materia-spunta input { width: auto; margin: 0; }

.materia-riga {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 14px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.materia-riga:first-child { border-top: 0; padding-top: 0; }
.materia-riga[hidden] { display: none; }
.materia-larga { grid-column: span 2; }
.materia-riga input {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .materia-riga { grid-template-columns: 1fr 1fr; }
    .materia-larga { grid-column: span 2; }
}
@media (max-width: 560px) {
    .materia-riga { grid-template-columns: 1fr; }
    .materia-larga { grid-column: span 1; }
}


/* Un valore che viene dall'ultima consegna e non e' ancora stato guardato.
   Il segno sparisce appena si tocca il campo (vedi forniture/conferma). */
.campo-ereditato {
    background: #fff8e1;
    border-color: #e0b34d;
}

/* Il riquadro di conferma prima di generare un documento.
   Si usa l'elemento <dialog> del browser invece di costruire una finestra a
   mano: si apre sopra tutto, il tasto Esc la chiude, e la pagina dietro resta
   inerte senza bisogno di codice. Il confirm() di serie non andava bene qui
   perche' deve elencare delle voci, e in quella finestrella l'elenco esce
   tutto attaccato. */
.dialogo {
    border: none;
    border-radius: 10px;
    padding: 0;
    max-width: 560px;
    width: calc(100% - 32px);
    box-shadow: 0 18px 48px rgba(0, 67, 102, .28);
    color: var(--slate);
}
.dialogo::backdrop { background: rgba(0, 67, 102, .38); }
.dialogo-testa {
    background: var(--navy);
    color: #fff;
    padding: 14px 20px;
    font-weight: 600;
}
.dialogo-corpo { padding: 16px 20px; }
.dialogo-corpo p { margin: 0 0 10px; }
.dialogo-elenco { margin: 0 0 12px; padding-left: 18px; }
.dialogo-elenco li { margin-bottom: 6px; }
.dialogo-elenco .dove { display: block; font-size: 12px; opacity: .75; }
.dialogo-piede {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 20px 18px;
}