/* Pannello SAF Ricambi — stile B (v5/v6): chiaro, bordi sottili, un solo colore principale */
:root {
    --blu: #1F4E8C; --blu-scuro: #163A69; --blu-chiaro: #E8EEF6; --blu-bordo: #C5D3E6;
    --scuro: #1F2933; --testo: #1F2933; --grigio: #52606D; --grigio-chiaro: #7B8794;
    --fondo: #F5F6F8; --bianco: #FFFFFF; --bordo: #D9DEE4; --bordo-chiaro: #E4E7EB; --bordo-input: #C3CCD6;
    --verde: #1E8E3E; --verde-testo: #1B6B33; --verde-fondo: #E8F5EC; --verde-bordo: #C6E6CF;
    --arancio: #D97706; --arancio-testo: #8A5A00; --arancio-fondo: #FFF4E0; --arancio-bordo: #F2CD8A;
    --rosso: #A61B1B; --rosso-fondo: #FDE8E8; --rosso-bordo: #F3B8B8;
    --giallo: #FFF8E6; --whatsapp: #1E8E3E;
    --teal: var(--blu); --teal-scuro: var(--blu-scuro);   /* compatibilità con le pagine vecchie */
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--fondo); color: var(--testo); font-variant-numeric: tabular-nums; }
a { color: var(--blu); } a:hover { color: var(--blu-scuro); }
h1 { font-size: 22px; font-weight: 700; margin: 0 0 16px; }
h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; color: var(--scuro); }
h3 { font-size: 13px; font-weight: 600; margin: 16px 0 8px; color: var(--grigio); text-transform: uppercase; letter-spacing: .05em; }
small { color: var(--grigio); font-size: 12.5px; }
.grigio { color: var(--grigio); } .grigio-chiaro { color: var(--grigio-chiaro); }
.arancio { color: var(--arancio-testo); font-weight: 600; } .verde { color: var(--verde-testo); } .rosso { color: var(--rosso); }
.mono { font-family: "IBM Plex Mono", Consolas, Menlo, monospace; }
hr { border: 0; border-top: 1px solid var(--bordo-chiaro); margin: 14px 0; }
.dx { text-align: right; } .centro { text-align: center; }

/* ---- Barra superiore ---- */
.barra { background: var(--bianco); border-bottom: 1px solid var(--bordo); color: var(--testo); display: flex; align-items: center; gap: 28px; padding: 0 28px; height: 56px; position: sticky; top: 0; z-index: 30; }
.barra-logo { font-weight: 700; font-size: 16px; white-space: nowrap; }
.barra-logo span { display: none; }
.badge { background: #E4E7EB; color: #3E4C59; border-radius: 9px; padding: 0 7px; font-size: 12px; font-weight: 600; line-height: 18px; }
.badge.rosso { background: var(--rosso-fondo); color: var(--rosso); }
.badge.arancio { background: var(--arancio-fondo); color: var(--arancio-testo); }
/* ---- v7.2: colonna di icone a sinistra (tutte le pagine) ---- */
:root { --rail: 72px; }
body { padding-left: var(--rail); }
.rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 35; background: var(--blu-scuro); display: flex; flex-direction: column; padding: 8px 0; gap: 1px; overflow-y: auto; overflow-x: visible; scrollbar-width: none; }
.rail a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 6px; color: #C5D3E6; text-decoration: none; font-size: 10px; font-weight: 500; line-height: 1.1; border-left: 3px solid transparent; white-space: nowrap; }
.rail a svg { width: 22px; height: 22px; flex: none; }
.rail a:hover { background: var(--blu); color: #fff; }
.rail a.attivo { color: #fff; border-left-color: #fff; background: rgba(255,255,255,.10); font-weight: 700; }
.rail a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.rail .rail-logo { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .05em; padding: 8px 0 12px; border: 0; }
.rail .rail-logo:hover { background: none; }
.rail-num { position: absolute; top: 3px; right: 8px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; background: #E4E7EB; color: var(--scuro); }
.rail-num.verde { background: #2DB052; color: #fff; } .rail-num.rosso { background: #E04848; color: #fff; } .rail-num.arancio { background: #F0A343; color: var(--scuro); }
.rail-sep { height: 1px; background: rgba(255,255,255,.14); margin: 6px 12px; flex: none; }
.rail-spazio { flex: 1; min-height: 8px; }
/* Descrizione al passaggio del mouse: si mostra fuori dalla colonna con position:fixed (la colonna scorre) */
.rail-tip { display: none; position: fixed; left: calc(var(--rail) + 6px); background: var(--scuro); color: #fff; padding: 5px 9px; border-radius: 5px; font-size: 12px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,.2); pointer-events: none; z-index: 80; }
.barra .barra-cerca { margin-left: 0; flex: 0 1 420px; min-width: 0; }
.barra .barra-utente { margin-left: auto; }
.rail-tip kbd { font-family: "IBM Plex Mono", Consolas, monospace; font-size: 11px; background: rgba(255,255,255,.16); border-radius: 3px; padding: 0 4px; margin-left: 7px; }
.rail a:hover .rail-tip, .rail a:focus-visible .rail-tip { display: block; }
@media (max-width: 700px) {
    body { padding-left: 0; padding-bottom: 62px; }
    .rail { top: auto; width: auto; right: 0; height: 60px; flex-direction: row; padding: 0 4px; overflow-x: auto; overflow-y: hidden; }
    .rail .rail-logo, .rail-sep, .rail-spazio, .rail-tip { display: none !important; }
    .rail a { border-left: 0; border-top: 3px solid transparent; min-width: 58px; padding-top: 7px; }
    .rail a.attivo { border-top-color: #fff; }
    .barra { padding: 0 12px; gap: 10px; } .barra .barra-logo, .barra .stato-vision, .barra .barra-cerca span, .barra .barra-cerca kbd { display: none; }
}
.barra-utente { display: flex; align-items: center; gap: 16px; color: var(--grigio); font-size: 13px; font-weight: 500; white-space: nowrap; }
.barra-utente a { color: var(--grigio); }
.stato-vision { font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.stato-vision::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #C3CCD6; }
.stato-vision.ok::before { background: var(--verde); } .stato-vision.ko::before { background: var(--rosso); }
.btn-vision-app { background: var(--scuro); color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; }
.btn-vision-app:hover { background: #000; }
.avatar { width: 28px; height: 28px; border-radius: 14px; background: #E4E7EB; color: #3E4C59; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.avatar.grande { width: 52px; height: 52px; border-radius: 26px; background: var(--blu-chiaro); color: var(--blu); font-size: 18px; font-weight: 700; }
.contenuto { max-width: 1376px; margin: 0 auto; padding: 24px 32px 40px; }
.pie { text-align: center; color: var(--grigio-chiaro); font-size: 12px; padding: 20px; }
.briciole { font-size: 13px; color: var(--grigio); margin-bottom: 14px; } .briciole a { text-decoration: none; font-weight: 500; }

/* ---- Schede (blocchi) ---- */
.scheda { background: var(--bianco); border: 1px solid var(--bordo); border-radius: 8px; padding: 18px 20px; }
.scheda.senza-padding { padding: 0; }
.scheda-testa { padding: 12px 20px; border-bottom: 1px solid var(--bordo-chiaro); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scheda-testa h2 { margin: 0; }
.scheda-corpo { padding: 16px 20px; }
.colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.colonne-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.colonne-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1000px) { .colonne, .colonne-3, .colonne-4 { grid-template-columns: 1fr; } }
.colonna { display: flex; flex-direction: column; gap: 16px; }
.pila { display: flex; flex-direction: column; gap: 16px; }
.intestazione-riga { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .intestazione-riga h1 { margin: 0; }
.intestazione-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
.intestazione-pagina h1 { margin: 0; }
.azioni { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Blocco cliente (in testa alla scheda) */
.blocco-cliente { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.blocco-cliente .chi { display: flex; align-items: center; gap: 16px; }
.blocco-cliente .nome { font-size: 22px; font-weight: 700; }
.blocco-cliente .dettagli { font-size: 14px; color: var(--grigio); margin-top: 4px; }
.riga-titolo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- Numeri ---- */
.griglia-numeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.numero { background: var(--bianco); border: 1px solid var(--bordo); border-radius: 8px; padding: 14px 18px; text-decoration: none; color: inherit; display: block; }
.numero b { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
.numero span { color: var(--grigio); font-size: 12.5px; }
a.numero:hover { border-color: var(--blu); }
.numero.evidenza { border-color: var(--verde-bordo); background: var(--verde-fondo); }
.numero b.arancio { color: var(--arancio-testo); } .numero b.rosso { color: var(--rosso); } .numero b.verde { color: var(--verde-testo); }

/* ---- Tabelle ---- */
.tabella { width: 100%; border-collapse: collapse; background: var(--bianco); border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden; }
.tabella th { text-align: left; font-size: 11px; font-weight: 600; color: var(--grigio); text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; background: var(--fondo); border-bottom: 1px solid var(--bordo-chiaro); }
.tabella td { padding: 12px 14px; border-bottom: 1px solid var(--bordo-chiaro); vertical-align: middle; font-size: 14px; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella td.dx, .tabella th.dx { text-align: right; }
.tabella b { font-weight: 600; }
.cliccabile { cursor: pointer; } .cliccabile:hover td { background: #FAFBFC; }
.tabella tr.evidenziata td { background: #FFFBF2; }
.tabella tr.nuova-riga td { background: #FFFBFB; }
.tabella-compatta td, .tabella-compatta th { padding: 7px 10px; }
.azioni-cella { white-space: nowrap; text-align: right; }
.scheda.senza-padding .tabella { border: 0; border-radius: 0; }

/* Raggruppamento per giorno / cliente */
.gruppo { background: var(--bianco); border: 1px solid var(--bordo); border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.gruppo-testa { padding: 12px 20px; border-bottom: 1px solid var(--bordo-chiaro); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gruppo-testa.oggi { background: #F5F8FC; }
.gruppo-testa b { font-size: 15px; }
.gruppo .tabella { border: 0; border-radius: 0; }

/* ---- Stati ed etichette ---- */
.stato { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; background: #E4E7EB; color: #3E4C59; white-space: nowrap; border: 1px solid transparent; }
.stato-da_lavorare, .stato-nuova { background: var(--rosso-fondo); color: var(--rosso); border-color: var(--rosso-bordo); }
.stato-da_completare, .stato-da_inviare, .stato-da_preparare, .stato-attesa { background: var(--arancio-fondo); color: var(--arancio-testo); border-color: var(--arancio-bordo); }
.stato-preventivo_bozza, .stato-inviato, .stato-pronto, .stato-info { background: var(--blu-chiaro); color: var(--blu); border-color: var(--blu-bordo); }
.stato-confermato, .stato-consegnato, .stato-ok, .stato-registrato { background: var(--verde-fondo); color: var(--verde-testo); border-color: var(--verde-bordo); }
.stato-rifiutato { background: var(--rosso-fondo); color: var(--rosso); border-color: var(--rosso-bordo); }
.stato-chiusa_senza_risposta, .stato-bozza, .stato-neutro { background: var(--fondo); color: var(--grigio); border-color: var(--bordo); }
.stato-vision-si { background: var(--verde-fondo); color: var(--verde-testo); border-color: var(--verde-bordo); }
.stato-vision-no { background: var(--arancio-fondo); color: var(--arancio-testo); border-color: var(--arancio-bordo); }
.etichetta { border: 1px solid var(--bordo-input); color: #3E4C59; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.etichetta.da-definire { background: var(--arancio-fondo); border-color: var(--arancio-bordo); color: var(--arancio-testo); letter-spacing: .04em; }
.pallino { display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: var(--bordo-input); margin-right: 6px; vertical-align: middle; }
.pallino.verde { background: var(--verde); } .pallino.arancio { background: var(--arancio); } .pallino.rosso { background: var(--rosso); }

/* Percorso a passi */
.passi { display: flex; align-items: center; gap: 14px; }
.passo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--grigio-chiaro); white-space: nowrap; }
.passo i { width: 24px; height: 24px; border-radius: 12px; border: 1px solid var(--bordo-input); background: var(--bianco); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 700; color: var(--grigio-chiaro); }
.passo.fatto { color: var(--verde-testo); font-weight: 600; } .passo.fatto i { background: var(--verde); border-color: var(--verde); color: #fff; }
.passo.attuale { color: var(--testo); font-weight: 700; } .passo.attuale i { background: var(--blu); border-color: var(--blu); color: #fff; }
.passi .linea { flex: 1; height: 1px; background: var(--bordo); min-width: 24px; max-width: 120px; }

/* ---- Form ---- */
label { display: block; font-size: 12px; font-weight: 600; color: var(--grigio); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
label.normale { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }
input[type=text], input[type=number], input[type=password], input[type=date], input:not([type]), select, textarea {
    display: block; width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--bordo-input); border-radius: 6px; font-size: 14px; font-family: inherit; background: var(--bianco); color: var(--testo); font-weight: 500;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blu-bordo); border-color: var(--blu); }
input[readonly], select:disabled { background: var(--fondo); color: var(--grigio); }
input.manca { background: var(--giallo); border-color: var(--arancio-bordo); }
textarea { resize: vertical; }
.griglia-campi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
.griglia-campi-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--bordo-input); background: var(--bianco); color: var(--testo); border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; line-height: 1.2; white-space: nowrap; }
.btn:hover { background: var(--fondo); color: var(--testo); }
.btn-primario { background: var(--blu); color: #fff; border-color: var(--blu); } .btn-primario:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); color: #fff; }
.btn-grande { padding: 14px 26px; font-size: 16px; font-weight: 700; }
.btn-verde { background: var(--bianco); color: var(--verde-testo); border: 2px solid var(--verde); font-weight: 700; } .btn-verde:hover { background: var(--verde-fondo); color: var(--verde-testo); }
.btn-verde-pieno { background: var(--verde); color: #fff; border-color: var(--verde); font-weight: 700; } .btn-verde-pieno:hover { background: #17722F; color: #fff; }
.btn-secondario { color: var(--grigio); }
.btn-piccolo { padding: 6px 11px; font-size: 13px; }
.btn-tratteggiato { border-style: dashed; color: var(--blu); width: 100%; }
.btn-link { border: 0; background: none; color: var(--blu); padding: 0; font-weight: 600; }
.btn:disabled { opacity: .5; cursor: default; }
form.inline { display: inline-block; }
details summary { cursor: pointer; color: var(--blu); font-weight: 600; margin: 8px 0; font-size: 14px; }
.avviso { padding: 10px 14px; border-radius: 6px; background: var(--fondo); border: 1px solid var(--bordo); font-size: 14px; margin: 10px 0; }
.avviso.attenzione { background: var(--arancio-fondo); border-color: var(--arancio-bordo); color: var(--arancio-testo); }
.avviso.errore { background: var(--rosso-fondo); border-color: var(--rosso-bordo); color: var(--rosso); }
.avviso.ok { background: var(--verde-fondo); border-color: var(--verde-bordo); color: var(--verde-testo); }
.avviso.info { background: var(--blu-chiaro); border-color: var(--blu-bordo); color: var(--blu); }
.vuoto { color: var(--grigio-chiaro); font-style: italic; }
.lista { margin: 0; padding-left: 18px; } .lista li { margin: 4px 0; }
.attenzione-lista li { color: var(--arancio-testo); }
.nota-pie { font-size: 13px; color: var(--grigio-chiaro); text-align: center; margin-top: 12px; }

/* Filtri: pulsanti grandi + chip */
.filtri { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filtri a, .filtri button.filtro { padding: 8px 14px; border-radius: 6px; text-decoration: none; color: #3E4C59; border: 1px solid var(--bordo-input); background: var(--bianco); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.filtri a.attivo { background: var(--scuro); color: #fff; border-color: var(--scuro); }
.filtri input[type=text] { width: 300px; margin: 0; display: inline-block; }
.filtri-grandi { display: flex; gap: 8px; flex-wrap: wrap; }
.filtri-grandi a { padding: 13px 22px; border-radius: 6px; text-decoration: none; color: var(--testo); border: 1px solid var(--bordo-input); background: var(--bianco); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 12px; }
.filtri-grandi a .badge { background: #E4E7EB; color: #3E4C59; font-size: 13px; padding: 1px 10px; border-radius: 10px; }
.filtri-grandi a.attivo { color: #fff; border-color: transparent; }
.filtri-grandi a.attivo .badge { background: #fff; }
.filtri-grandi a.rosso.attivo { background: var(--rosso); } .filtri-grandi a.rosso.attivo .badge { color: var(--rosso); }
.filtri-grandi a.arancio.attivo { background: var(--arancio-testo); } .filtri-grandi a.arancio.attivo .badge { color: var(--arancio-testo); }
.filtri-grandi a.verde.attivo { background: var(--verde); } .filtri-grandi a.verde.attivo .badge { color: var(--verde-testo); }
.filtri-grandi a.blu.attivo { background: var(--blu); } .filtri-grandi a.blu.attivo .badge { color: var(--blu); }
.filtri-grandi a.scuro.attivo { background: var(--scuro); } .filtri-grandi a.scuro.attivo .badge { color: var(--scuro); }
.ricerca { display: flex; align-items: center; gap: 10px; border: 1px solid var(--bordo-input); border-radius: 6px; padding: 8px 12px; background: var(--bianco); flex-wrap: wrap; }
.ricerca input[type=text] { border: 0; margin: 0; padding: 4px 6px; flex: 1; min-width: 200px; font-size: 15px; }
.ricerca input:focus { outline: none; }
.ricerca.attiva { border-color: var(--blu); }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--blu-chiaro); border: 1px solid var(--blu-bordo); color: var(--blu); font-weight: 600; font-size: 13px; padding: 4px 8px 4px 10px; border-radius: 4px; }
.chip a { color: var(--blu); text-decoration: none; font-size: 16px; line-height: 1; }
.chip small { color: var(--grigio); text-transform: uppercase; font-size: 10px; font-weight: 600; }

/* ---- Righe del preventivo (tabella) ---- */
.righe-testa, .riga-prev-griglia { display: grid; grid-template-columns: 2.2fr 1.4fr 0.55fr 1.15fr 0.85fr 0.7fr 1fr 0.9fr 32px; gap: 10px; align-items: center; }
.righe-testa { padding: 8px 20px; background: var(--fondo); border-top: 1px solid var(--bordo-chiaro); border-bottom: 1px solid var(--bordo-chiaro); font-size: 11px; font-weight: 600; color: var(--grigio); text-transform: uppercase; letter-spacing: .05em; }
.riga-prev { padding: 10px 20px; border-bottom: 1px solid var(--bordo-chiaro); background: var(--bianco); }
.riga-prev.incompleta { background: #FFFBF2; }
.riga-prev.nuova { background: #FAFBFC; }
.riga-prev.evidenzia { box-shadow: inset 4px 0 0 var(--blu); }
.riga-prev input, .riga-prev select { margin: 0; padding: 7px 9px; font-size: 14px; }
.riga-prev input.mono { font-family: "IBM Plex Mono", Consolas, monospace; font-weight: 600; }
.riga-prev input.dx { text-align: right; }
.riga-prev input[name=vendita_iva_incl] { border-color: var(--blu); font-weight: 700; }
.riga-prev .sotto { font-size: 12px; color: var(--grigio-chiaro); margin-top: 3px; display: flex; gap: 6px; align-items: center; }
.riga-prev .sotto input { padding: 3px 6px; font-size: 12px; color: var(--grigio); border-color: var(--bordo-chiaro); }
.riga-prev .margine { text-align: right; font-weight: 700; font-size: 14px; }
.riga-prev .margine small { display: block; font-weight: 500; }
.riga-prev-da-prendere { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 10px; margin-top: 8px; padding: 8px 10px; background: var(--arancio-fondo); border: 1px solid var(--arancio-bordo); border-radius: 6px; align-items: end; }
.riga-prev-da-prendere label { margin: 0; font-size: 11px; }
.riga-prev-da-prendere input { margin-top: 2px; }
.riga-prev-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 8px; flex-wrap: wrap; }
.riga-prev .x { background: none; border: 0; color: var(--grigio-chiaro); font-size: 20px; cursor: pointer; padding: 0; line-height: 1; }
.riga-prev .x:hover { color: var(--rosso); }
.riga-prev-testa, .riga-prev-prezzi, .riga-prev-fornitore { display: contents; }   /* compatibilità v4 */
.vision-info { display: block; font-size: 12px; color: var(--grigio); margin-top: 4px; }
.righe-pie { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--bordo-chiaro); }
.totali { display: flex; gap: 36px; }
.totali div span { display: block; font-size: 11px; font-weight: 600; color: var(--grigio); text-transform: uppercase; letter-spacing: .05em; }
.totali div b { font-size: 24px; font-weight: 700; }
.totali div small { display: block; }
.separatore-verticale { width: 1px; height: 36px; background: var(--bordo); margin: 0 4px; }
body.autosave form.riga-prev:not(.nuova) .riga-prev-pie button:not(.btn-secondario):not(.x) { display: none; }
body.autosave form.intestazione > button { display: none; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--testo); font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 500; }
label.check input { width: auto; margin: 0; }
.stato-salvataggio { position: fixed; top: 64px; right: 24px; font-size: 13px; padding: 6px 12px; border-radius: 6px; background: var(--bianco); border: 1px solid var(--bordo); z-index: 40; display: none; }
.stato-salvataggio.ok { display: block; color: var(--verde-testo); border-color: var(--verde-bordo); }
.stato-salvataggio.in-corso { display: block; color: var(--grigio); }
.stato-salvataggio.errore { display: block; color: var(--rosso); border-color: var(--rosso-bordo); }

/* Lettura AI: caselle veicolo */
.caselle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--bordo-chiaro); border-radius: 6px; overflow: hidden; }
.casella { padding: 8px 12px; border-right: 1px solid var(--bordo-chiaro); border-bottom: 1px solid var(--bordo-chiaro); }
.casella:nth-child(3n) { border-right: 0; } .casella:nth-last-child(-n+3) { border-bottom: 0; }
.casella label { margin: 0; font-size: 11px; }
.casella input { border: 0; padding: 2px 0; margin: 0; font-size: 15px; font-weight: 600; background: transparent; }
.casella input:focus { outline: none; }
.casella.manca { background: var(--giallo); } .casella.manca label { color: var(--arancio-testo); }
.casella.ktype { background: #F5F8FC; } .casella.ktype label, .casella.ktype b { color: var(--blu); }
.ricambio-richiesto { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--bordo-chiaro); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
.ricambio-richiesto b { font-size: 15px; }

/* ---- Chat ---- */
.chat-layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; background: var(--bianco); border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden; min-height: 500px; }
@media (max-width: 800px) { .chat-layout { grid-template-columns: 1fr; } }
.chat-elenco { border-right: 1px solid var(--bordo-chiaro); overflow-y: auto; max-height: 75vh; }
.conv { display: block; padding: 12px 14px; border-bottom: 1px solid var(--bordo-chiaro); text-decoration: none; color: inherit; position: relative; }
.conv:hover { background: var(--fondo); } .conv.attivo { background: var(--blu-chiaro); }
.conv b { display: block; font-weight: 600; } .conv small { display: block; }
.conv .pallino { position: absolute; right: 12px; top: 38px; width: 10px; height: 10px; background: var(--arancio); margin: 0; }
.conv .badge-nonletti { position: absolute; right: 12px; top: 12px; background: var(--verde); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 12px; font-weight: 700; }
.conv.non-letto b { color: var(--blu); }
.chat-finestra { display: flex; flex-direction: column; padding: 14px; }
.chat-testata { padding-bottom: 10px; border-bottom: 1px solid var(--bordo-chiaro); margin-bottom: 10px; }
.chat-testata-azioni { float: right; }
.chat { flex: 1; overflow-y: auto; max-height: 60vh; background: var(--fondo); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-compatta { max-height: 320px; min-height: 240px; }
.bolla { max-width: 78%; padding: 9px 13px; border-radius: 8px; font-size: 14px; line-height: 1.45; font-weight: 500; border: 1px solid var(--bordo-chiaro); }
.bolla.ricevuto { background: var(--bianco); align-self: flex-start; border-bottom-left-radius: 2px; }
.bolla.inviato { background: var(--verde-fondo); border-color: var(--verde-bordo); align-self: flex-end; border-bottom-right-radius: 2px; }
.bolla small { display: block; text-align: right; font-size: 11px; margin-top: 3px; color: var(--grigio-chiaro); }
.bolla em { color: var(--grigio); }
.separatore { align-self: center; background: #E4E7EB; color: #3E4C59; font-size: 12px; padding: 3px 10px; border-radius: 10px; margin: 6px 0; font-weight: 600; }
.chat-invio { display: flex; gap: 8px; margin-top: 10px; } .chat-invio input { margin: 0; }

/* ---- Modale ---- */
.modale-sfondo { position: fixed; inset: 0; background: rgba(31,41,51,.45); display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modale { background: var(--bianco); border-radius: 8px; width: 860px; max-width: 100%; max-height: 88vh; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modale-testa { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--bordo-chiaro); }
.modale-testa.allarme { background: var(--rosso-fondo); color: var(--rosso); }
.modale-corpo { padding: 16px 20px; }
.modale-pie { padding: 12px 20px; border-top: 1px solid var(--bordo-chiaro); display: flex; justify-content: flex-end; gap: 10px; background: var(--fondo); }
.modale.stretta { width: 560px; }
#vision-modale .modale { padding: 0; }
#vision-corpo { padding: 16px 20px; }
.btn-vision { border-color: var(--blu-bordo); color: var(--blu); white-space: nowrap; }
.btn-vision:hover { background: var(--blu-chiaro); color: var(--blu); }
.campo-con-bottone { display: flex; gap: 8px; align-items: center; } .campo-con-bottone input { margin: 0; }
.evidenzia { box-shadow: 0 0 0 3px var(--blu-bordo); }

/* Toast (avvisi in basso a destra) */
.toast-contenitore { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--scuro); color: #fff; padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.2); display: flex; align-items: center; gap: 12px; max-width: 360px; }
.toast a { color: #fff; }
.toast.verde { background: var(--verde); } .toast.rosso { background: var(--rosso); }

/* ---- Login ---- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--fondo); }
.login-box { background: var(--bianco); border: 1px solid var(--bordo); padding: 32px; border-radius: 8px; width: 360px; max-width: 92vw; }
.login-box h1 { margin: 0; color: var(--testo); } .sottotitolo { color: var(--grigio); margin: 4px 0 20px; }
.login-box .btn { width: 100%; padding: 12px; margin-top: 6px; }

.riga-veicolo { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bordo-chiaro); }
.riga-veicolo b { flex: 0 0 auto; } .riga-veicolo small { flex: 1; }
h2 small a { font-weight: 500; font-size: 13px; margin-left: 8px; }
@media print {
    .barra, .rail, .pie, .filtri, .filtri-grandi, .azioni, .btn, .ricerca, .toast-contenitore, .stato-salvataggio { display: none !important; }
    body { background: #fff; padding: 0; } .contenuto { max-width: none; padding: 0; }
    .gruppo, .scheda, .tabella { border-color: #999; break-inside: avoid; }
}

/* ---- v6: Mancanti / Da ordinare ---- */
.stato-da_ordinare { background: var(--rosso-fondo); color: var(--rosso); border-color: var(--rosso-bordo); }
.stato-ordinato { background: var(--arancio-fondo); color: var(--arancio-testo); border-color: var(--arancio-bordo); }
.stato-arrivato { background: var(--verde-fondo); color: var(--verde-testo); border-color: var(--verde-bordo); }
.etichetta.urgente { background: var(--rosso-fondo); border-color: var(--rosso-bordo); color: var(--rosso); letter-spacing: .03em; }
.gruppo-fornitore .gruppo-testa { background: #F5F8FC; }
.gruppo-fornitore.confronta { border-color: var(--arancio-bordo); }
.gruppo-fornitore.confronta .gruppo-testa { background: var(--arancio-fondo); }
.gruppo-fornitore.confronta .gruppo-testa b { color: var(--arancio-testo); }
.tabella-ordinare td { padding: 9px 12px; }
.tabella-ordinare tr.urgente td:first-child { box-shadow: inset 4px 0 0 var(--rosso); }
.tabella-ordinare input.qta { width: 64px; margin: 0; padding: 5px 6px; font-size: 14px; display: inline-block; }
.tabella-ordinare select.sel-fornitore { margin: 0; padding: 5px 8px; font-size: 13px; width: 190px; display: inline-block; }
.tabella-ordinare select.sel-fornitore.proposto { border-style: dashed; color: var(--grigio); }
.tabella-ordinare .qricambi { font-size: 11.5px; font-weight: 600; text-decoration: none; color: var(--blu); }
.tabella-ordinare .btn-link.prezzo { font-size: 14px; font-weight: 700; }
.tabella-ordinare .btn-link { cursor: pointer; font-family: inherit; font-size: 14px; }
.riga-dettaglio td { background: #F5F8FC; border-top: 0; padding: 12px 20px 14px; }
.dettaglio-griglia { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.6fr auto; gap: 14px; align-items: start; }
.dettaglio-griglia label { margin: 0; }
.dettaglio-griglia > div > label { margin-bottom: 4px; }
.dettaglio-griglia input { margin-top: 4px; padding: 6px 9px; font-size: 13px; }
.origine { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--bordo); background: var(--fondo); color: #3E4C59; }
.origine-banco { background: var(--blu-chiaro); border-color: var(--blu-bordo); color: var(--blu); }
.origine-whatsapp { background: var(--verde-fondo); border-color: var(--verde-bordo); color: var(--verde-testo); }
.origine-rettifica { background: var(--arancio-fondo); border-color: var(--arancio-bordo); color: var(--arancio-testo); }
@media print { .tabella-ordinare .azioni-cella, .tabella-ordinare .qricambi, .riga-dettaglio, #form-aggiungi, .modale-sfondo { display: none !important; } .tabella-ordinare select { border: 0; appearance: none; background: none; } }
.tabella-ordinare small.proposto { display: block; margin-top: 3px; }