/* Tema scuro, forme squadrate */
:root {
  color-scheme: dark;
  --sfondo: #141518;
  --laterale: #1a1b1f;
  --superficie: #1f2126;
  --superficie-2: #262830;
  --superficie-3: #2e3039;
  --bordo: #2c2e36;
  --bordo-forte: #3d4049;
  --bordo-cella: #363943; /* griglia degli elenchi di articoli: sottile ma riconoscibile */
  --testo: #e6e7ea;
  --testo-2: #a3a6ae;
  --testo-3: #71747c;
  --accento: #5b8cff;
  --accento-hover: #7aa2ff;
  --accento-sfondo: #22304f;
  --accento-testo: #bcd0ff;
  --verde: #7fd6a4;
  --verde-sfondo: #1c3a2a;
  --giallo: #f1c66b;
  --giallo-sfondo: #3b3220;
  --rosso: #ff8f8f;
  --rosso-sfondo: #3c2226;
  /* Bordi dei riquadri colorati (messaggi, pulsanti di stato): nei temi chiari cambiano con i colori (studio.css) */
  --verde-bordo: #2c5a41;
  --giallo-bordo: #5e4d2a;
  --rosso-bordo: #5c3238;
  --accento-bordo: #34508f;
  /* Colori delle righe (scelta dell'utente 23/10/2026): rosso delicato = manca qualcosa, azzurro = dal telefono */
  --incompleta-sfondo: #3a2529;
  --telefono: #6cc6f0;
  --telefono-sfondo: #1b3240;
  --raggio: 4px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  font: 14px "Segoe UI", system-ui, sans-serif; color: var(--testo); background: var(--sfondo);
}
a { color: var(--accento-testo); }
svg { width: 18px; height: 18px; flex: none; }
::selection { background: var(--accento-sfondo); }

/* --- Barra laterale --- */
.laterale {
  width: 212px; flex: none; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 10px; background: var(--laterale); border-right: 1px solid var(--bordo);
}
.ditta { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-weight: 600; line-height: 1.2; }
/* Utente dimostrativo (azienda/dimostrativo.py) */
.segno-demo { margin: -10px 8px 14px; padding: 3px 8px; border: 1px solid var(--giallo); border-radius: var(--raggio); color: var(--giallo); background: var(--giallo-sfondo); font-size: 12px; text-align: center; }
.menu-ridotto .segno-demo { display: none; }
.ditta-logo { width: 30px; height: 30px; display: grid; place-items: center; background: var(--accento-sfondo); color: var(--accento-testo); border-radius: var(--raggio); flex: none; }
.laterale nav { display: flex; flex-direction: column; gap: 2px; }
.laterale nav.in-fondo { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--bordo); }
.laterale nav a, .laterale nav button {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--raggio);
  color: var(--testo-2); text-decoration: none; font: inherit; background: none; border: 0; width: 100%; cursor: pointer; text-align: left;
}
.laterale nav a:hover, .laterale nav button:hover { background: var(--superficie-2); color: var(--testo); }
.laterale nav a.attivo { background: var(--accento-sfondo); color: var(--accento-testo); font-weight: 600; }
.laterale form { margin: 0; }
/* Menu ridotto a sole icone (pulsante accanto al nome della ditta; solo da PC, sul telefono il menu è a scomparsa) */
.riduci-menu {
  margin-left: auto; flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  color: var(--testo-3); background: none; border: 0; border-radius: var(--raggio); cursor: pointer;
}
.riduci-menu:hover { background: var(--superficie-2); color: var(--testo); }
.riduci-menu svg { transition: transform .15s ease; }
@media (min-width: 761px) {
  .menu-ridotto .laterale { width: 58px; padding: 14px 8px; overflow: hidden; }
  .menu-ridotto .laterale .etichetta, .menu-ridotto .ditta-nome, .menu-ridotto .ditta-logo, .menu-ridotto .versione { display: none; }
  .menu-ridotto .ditta { justify-content: center; padding: 4px 0 18px; }
  .menu-ridotto .laterale nav a, .menu-ridotto .laterale nav button { justify-content: center; padding: 9px 0; position: relative; }
  .menu-ridotto .laterale .contatore {
    position: absolute; top: 1px; right: 0; min-width: 0; padding: 0 3px; font-size: 9px; line-height: 14px;
    background: var(--accento-sfondo); color: var(--accento-testo);
  }
  .menu-ridotto .riduci-menu { margin: 0; width: 34px; height: 30px; }
  .menu-ridotto .riduci-menu svg { transform: scaleX(-1); }
}
.contatore { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: var(--raggio); background: var(--superficie-3); color: var(--testo-2); font-size: 12px; text-align: center; font-weight: 400; }
.contatore.avviso { background: var(--rosso-sfondo); color: var(--rosso); } /* Inventario: sotto la scorta minima, scadenze */

/* Ricerca unica (static/ricerca.js): casella in alto nel menu e finestra con i risultati raggruppati per tipo */
.cerca-ovunque {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 12px; padding: 7px 10px;
  font: inherit; color: var(--testo-3); text-align: left; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.cerca-ovunque:hover { border-color: var(--bordo-forte); color: var(--testo-2); }
.cerca-ovunque kbd {
  margin-left: auto; padding: 0 5px; font-family: inherit; font-size: 11px; line-height: 18px;
  color: var(--testo-3); border: 1px solid var(--bordo-forte); border-radius: var(--raggio);
}
@media (min-width: 761px) {
  .menu-ridotto .cerca-ovunque { justify-content: center; padding: 8px 0; }
}
.dialogo-ricerca { width: min(720px, calc(100vw - 32px)); min-width: 0; max-height: 78vh; margin: 9vh auto auto; padding: 0; overflow: hidden; }
.dialogo-ricerca[open] { display: flex; flex-direction: column; }
.ricerca-campo { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; color: var(--testo-3); border-bottom: 1px solid var(--bordo); }
.ricerca-campo input[type=search] { flex: 1; min-width: 0; padding: 9px 0; font-size: 15px; background: transparent; border: 0; }
.ricerca-campo input::-webkit-search-cancel-button { display: none; } /* c'è già il pulsante Chiudi */
.ricerca-campo .btn { background: none; border-color: transparent; }
.ricerca-risultati { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 10px; }
.ricerca-vuota { margin: 0; padding: 14px 16px 6px; }
.ricerca-gruppo h4 {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 3px; padding: 0 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--testo-3);
}
.ricerca-gruppo h4 svg { width: 15px; height: 15px; }
.ricerca-risultati a { display: block; padding: 6px 16px 6px 14px; color: var(--testo); text-decoration: none; border-left: 2px solid transparent; }
.ricerca-risultati a.scelta { background: var(--accento-sfondo); border-left-color: var(--accento); }
.ricerca-voce strong, .ricerca-voce span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ricerca-voce strong { font-weight: 500; }
.ricerca-voce span { margin-top: 1px; font-size: 12px; color: var(--testo-2); }
.ricerca-risultati a.ricerca-tutti { padding-top: 3px; padding-bottom: 5px; font-size: 12px; color: var(--accento-testo); }
.ricerca-tasti { margin: 0; padding: 8px 16px; font-size: 12px; border-top: 1px solid var(--bordo); }
@media (max-width: 760px) {
  /* Telefono: la finestra prende tutto lo schermo */
  .dialogo.dialogo-ricerca { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .ricerca-voce strong, .ricerca-voce span { white-space: normal; }
  .ricerca-risultati a { padding-top: 9px; padding-bottom: 9px; }
}

/* --- Area principale --- */
.principale { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contenuto { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 18px 22px 14px; }
.messaggi { padding: 12px 22px 0; display: flex; flex-direction: column; gap: 6px; }
.msg { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--raggio); border: 1px solid var(--bordo); background: var(--superficie); }
.msg-success { border-color: var(--verde-bordo); background: var(--verde-sfondo); color: var(--verde); }
.msg-error { border-color: var(--rosso-bordo); background: var(--rosso-sfondo); color: var(--rosso); }
.msg-warning { background: var(--giallo-sfondo); color: var(--giallo); }
.msg-annulla { margin: 0; }
.msg-annulla .btn { padding: 2px 10px; border-color: currentColor; color: inherit; }

/* Intestazione di pagina: titolo, ricerca, azioni */
.barra-sezione { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; min-height: 36px; }
.barra-sezione h1 { margin: 0; font-size: 21px; font-weight: 600; }
.barra-sezione .azioni { display: flex; gap: 8px; margin-left: auto; }
.barra-sezione form.cerca {
  margin-left: auto; display: flex; align-items: center; gap: 8px; width: 260px; padding: 0 10px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); color: var(--testo-3);
}
.barra-sezione form.cerca + .azioni { margin-left: 0; }
.barra-sezione form.cerca input { border: 0; background: transparent; padding: 8px 0; outline: none; }
.barra-sezione form.cerca:focus-within { border-color: var(--accento); }
.corpo { flex: 1; min-height: 0; display: flex; gap: 16px; }
.area-tabella { flex: 1; min-width: 0; overflow: auto; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--superficie); }

/* --- Pulsanti --- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font: inherit; color: var(--testo);
  background: var(--superficie-2); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--superficie-3); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primario { background: var(--accento); border-color: var(--accento); color: #fff; font-weight: 600; }
.btn.primario:hover:not(:disabled) { background: var(--accento-hover); }
.btn.pericolo { color: var(--rosso); border-color: var(--rosso-bordo); background: var(--rosso-sfondo); }
.btn.solo-icona { padding: 7px 8px; }
#indietro { flex: none; align-self: flex-start; justify-content: center; min-width: 32px; }
.barra-sezione #indietro { align-self: center; }
#indietro[aria-disabled="true"] { opacity: .4; cursor: default; background: var(--superficie-2); }

/* --- Campi --- */
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=datetime-local], input[type=search], input[type=password], input[type=file], select, textarea {
  width: 100%; padding: 7px 9px; font: inherit; color: var(--testo);
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--raggio);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accento); }
input[type=checkbox], input[type=radio] { accent-color: var(--accento); }

/* --- Tabelle elenco --- */
table.elenco { width: 100%; border-collapse: collapse; }
table.elenco th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 500; font-size: 12px; color: var(--testo-3);
  padding: 9px 10px; background: var(--superficie); border-bottom: 1px solid var(--bordo); white-space: nowrap;
}
table.elenco td { padding: 8px 10px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
table.elenco tbody tr { user-select: none; }
table.elenco tbody tr:hover { background: var(--superficie-2); }
table.elenco tbody tr.selezionata { background: var(--accento-sfondo); }
table.elenco tbody tr:last-child td { border-bottom: 0; }
table.elenco a { color: var(--testo); text-decoration: none; }
table.elenco a:hover { color: var(--accento-testo); text-decoration: underline; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.vuoto { padding: 28px !important; color: var(--testo-3); text-align: center; }
.tenue { color: var(--testo-3); }
th.spunta, td.spunta { width: 34px; text-align: center; display: none; }
table.con-spunte th.spunta, table.con-spunte td.spunta { display: table-cell; }
/* Lavori in corso: caselle sempre visibili, così anche dal telefono se ne completano più insieme */
table.spunte-sempre th.spunta, table.spunte-sempre td.spunta { display: table-cell; }

/* Stato */
.stato { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; background: var(--superficie-3); color: var(--testo-2); }
.stato-in_corso, .stato-inviato { background: var(--giallo-sfondo); color: var(--giallo); }
.stato-completato, .stato-accettato { background: var(--verde-sfondo); color: var(--verde); }
.stato-rifiutato, .stato-errore { background: var(--rosso-sfondo); color: var(--rosso); }
.stato-ok { background: var(--verde-sfondo); color: var(--verde); }
.stato-attenzione { background: var(--giallo-sfondo); color: var(--giallo); }

/* --- Riepilogo (cifre in alto) --- */
.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cifra { padding: 12px 16px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.cifra span { display: block; font-size: 12px; color: var(--testo-3); }
.cifra strong { display: block; margin-top: 2px; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cifra.evidenza { border-color: var(--accento-bordo); background: var(--accento-sfondo); }
.cifra.evidenza strong { color: var(--accento-testo); }

/* --- Filtri a pillola --- */
.filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filtri select {
  width: auto; padding: 5px 28px 5px 10px; font-size: 13px; color: var(--testo-2); cursor: pointer;
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a6ae' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  appearance: none; border: 1px solid var(--bordo-forte);
}
.filtri select.attivo { color: var(--accento-testo); border-color: var(--accento-bordo); background-color: var(--accento-sfondo); }
.ordina-per { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--testo-3); }
.ordine-verso {
  display: flex; align-items: center; padding: 0 9px; font-size: 11px; color: var(--testo-2); text-decoration: none;
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--raggio);
}
.ordine-verso:hover { color: var(--testo); border-color: var(--accento); }

/* --- Barra azioni (selezione) e piede --- */
.barra-selezione {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 10px 8px 14px;
  background: var(--superficie-2); border: 1px solid var(--bordo-forte); border-radius: var(--raggio);
}
.barra-selezione[hidden] { display: none; }
.barra-selezione .quanti { font-weight: 600; }
.barra-selezione .spazio { margin-left: auto; }
.piede { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px 0; color: var(--testo-3); font-size: 13px; }
.pulsanti { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 12px; }  /* finestra stretta: a capo */
.pulsanti .sep { width: 1px; height: 22px; background: var(--bordo-forte); margin: 0 4px; }
.pulsanti .destra { margin-left: auto; display: flex; gap: 8px; }

/* --- Schede (clienti, impostazioni) --- */
.scheda { width: 540px; flex: none; overflow: auto; padding: 4px 16px 16px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.scheda.larga { width: auto; flex: 1; max-width: 860px; }
.scheda.larga.piena { max-width: none; } /* tutta la larghezza, come gli elenchi (es. Impostazioni del magazzino) */
.scheda h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--testo-2); text-transform: uppercase; letter-spacing: .04em; }
.campi { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; align-items: center; }
.campi > div { min-width: 0; overflow-wrap: anywhere; }
.campi .triplo { display: grid; grid-template-columns: 76px auto minmax(0, 1fr) auto 52px; gap: 8px; align-items: center; }
.campi .doppio { display: grid; grid-template-columns: 76px auto minmax(0, 1fr); gap: 8px; align-items: center; }
input.sola-lettura { background: var(--superficie-2); color: var(--testo-2); }
.campi label { color: var(--testo-2); }
.errore { color: var(--rosso); font-size: 12px; }
.aiuto { color: var(--testo-3); font-size: 12px; }
.aiuto.errore { color: var(--rosso); }
.versione { display: block; padding: 6px 12px 0; color: var(--testo-3); font-size: 11px; text-decoration: none; }
.versione:hover { color: var(--testo-2); }
.registro-agg { max-height: 320px; overflow: auto; white-space: pre-wrap; font-size: 11px; background: var(--superficie-3); padding: 8px; border-radius: 4px; }
/* Aggiornamento in tempo reale (Stato del server): come la finestra nera di aggiorna.bat */
.agg-vivo { border: 1px solid var(--bordo, #333); border-radius: 4px; padding: 10px 12px; margin: 8px 0; }
.agg-vivo .agg-titolo { font-weight: 600; margin: 0 0 4px; }
.agg-vivo #agg-testo.errore { color: var(--rosso); }
.registro-vivo { background: #0c0c0c; color: #d8d8d8; font-family: Consolas, "Courier New", monospace; font-size: 12px; max-height: 420px; }
.file-con-anteprima img { display: block; max-height: 70px; max-width: 220px; margin-bottom: 4px; padding: 4px; background: #fff; border-radius: var(--raggio); }
.pulsanti-riga { display: flex; gap: 8px; flex-wrap: wrap; }
/* Impostazioni e pagine collegate: gruppi affiancati, tanti quanti ne stanno nella larghezza */
.voci-impostazioni { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 12px; }
.voci-impostazioni > div > span { display: block; margin-bottom: 4px; color: var(--testo-2); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.gruppi { columns: 400px; column-gap: 32px; margin-top: 18px; }
.gruppi > section { break-inside: avoid; padding-bottom: 18px; }
.gruppi > .largo { column-span: all; }
.gruppi h4 { margin-top: 0; }
.tabella-gruppo { overflow-x: auto; }
.scheda .scelta { display: flex; align-items: center; gap: 6px; cursor: pointer; }
ul.aiuto { padding-left: 18px; line-height: 1.6; }
/* Scheda del cliente o del fornitore: linguette Anagrafica e Documenti (storico, clienti/storico.py) */
.scheda > .tabs { margin: 0 -16px 4px; padding: 0 8px; }
.scheda > .tab-pannello.attivo { display: block; }
.storico-nome { margin: 12px 0 0; font-size: 15px; font-weight: 600; }
table.storico { table-layout: fixed; border: 1px solid var(--bordo); }
table.storico .st-data { width: 108px; }
table.storico .st-numero { width: 84px; }
table.storico .st-stato { width: 104px; }
table.storico .st-importo { width: 116px; }
table.storico .st-testo { overflow: hidden; text-overflow: ellipsis; }
table.storico:not(.tutte) tr.in-piu { display: none; }
table.storico tfoot td { font-weight: 600; border-top: 1px solid var(--bordo-forte); padding: 8px 10px; }
.scheda .mostra-tutti { margin-top: 6px; }
@media (max-width: 760px) {
  .scheda > .tabs { margin: 0 -10px 4px; padding: 0; }
  table.storico { table-layout: auto; }
}

/* --- Tab --- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bordo); margin-bottom: 0; }
.tabs button { padding: 8px 14px; font: inherit; color: var(--testo-2); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.tabs button:hover { color: var(--testo); }
.tabs button.attivo { color: var(--testo); border-bottom-color: var(--accento); }
/* Editor dei documenti: ricerca nelle righe a destra delle linguette (documento.js); senza spazio va sotto */
.tabs-riga { display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 10px; border-bottom: 1px solid var(--bordo); }
.tabs-riga > .tabs { flex: 1 0 auto; border-bottom: 0; }
.cerca-righe {
  align-self: center; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; color: var(--testo-3);
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.cerca-righe:focus-within { border-color: var(--accento); }
.cerca-righe svg { width: 15px; height: 15px; flex: none; }
.tabs-riga .cerca-righe input { width: 150px; padding: 1px 0; border: 0; background: transparent; outline: none; }
.cerca-righe .cerca-conto { font-size: 12px; white-space: nowrap; }
.cerca-righe button { padding: 2px 5px; font-size: 10px; color: var(--testo-2); background: none; border: 0; cursor: pointer; }
.cerca-righe button:hover { color: var(--testo); }
.tab-pannello { display: none; }
.tab-pannello.attivo { display: flex; }

/* --- Pagina documento --- */
.form-doc { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.doc-testata { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.doc-testata label { display: block; font-size: 12px; color: var(--testo-3); margin-bottom: 4px; }
.doc-testata .cliente { flex: 1; }
.doc-testata .numero, .doc-testata .numeraz, .doc-testata .listino { width: 96px; }
.doc-testata .numero input, .doc-testata .listino input { text-align: right; }
.doc-corpo { flex: 1; min-height: 0; flex-direction: column; }
.doc-corpo > .area-tabella { border-top: 0; border-radius: 0; }
table.righe { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.righe th { position: sticky; top: 0; z-index: 1; background: var(--superficie); text-align: left; font-weight: 500; font-size: 12px; color: var(--testo-3); padding: 8px 6px; border-bottom: 1px solid var(--bordo); }
table.righe td { padding: 0; border-bottom: 1px solid var(--bordo); vertical-align: top; }
table.righe input, table.righe textarea, table.righe select {
  width: 100%; border: 0; border-radius: 0; padding: 6px; background: transparent; resize: none; overflow: hidden;
}
/* field-sizing: il browser (Chrome/Edge) adatta da solo l'altezza al testo; altrove lo fa adatta() in documento.js */
table.righe textarea { display: block; min-height: 31px; line-height: 19px; field-sizing: content; }
table.righe textarea.testo-rosso { color: var(--rosso); font-weight: 600; } /* descrizione con ^^ davanti */
table.righe textarea[data-campo="codice"] { overflow-wrap: anywhere; } /* codici senza spazi: a capo dove serve */
table.righe input:focus, table.righe textarea:focus, table.righe select:focus { outline: 1px solid var(--accento); background: var(--superficie-2); }
/* Colpo d'occhio sulle righe (documento.js): azzurro = arrivata dal telefono (finché non si modifica sul PC), rosso
   delicato = manca qualcosa o lettura incerta; con tutte e due resta il rosso e la barra azzurra a sinistra.
   Prima di .attiva e .selezionata, che restano visibili sopra i colori */
table.righe tr.dal-telefono td:first-child { box-shadow: inset 4px 0 0 var(--telefono); }
table.righe tr.dal-telefono td { background: var(--telefono-sfondo); }
table.righe tr.incompleta td, table.righe tr.da-controllare td { background: var(--incompleta-sfondo); }
/* Ricerca nelle righe dell'editor (documento.js): righe trovate in giallo, quella raggiunta segnata a sinistra */
table.righe tr.trovata td { background: var(--giallo-sfondo); }
table.righe tr.attuale td:first-child { box-shadow: inset 4px 0 0 var(--giallo); }
table.righe tr.attiva td { background: var(--superficie-2); }
table.righe tr.selezionata td { background: var(--accento-sfondo); }
input.sconto-righe { width: 90px; flex: none; }
table.righe td.importo { text-align: right; padding: 6px; color: var(--testo-2); font-variant-numeric: tabular-nums; }
table.righe .num input { text-align: right; }
/* Maniglia a sinistra delle righe dei documenti: si trascina per spostare la riga o le righe selezionate */
table.righe td.maniglia { cursor: grab; }
table.righe td.maniglia::after {
  content: ""; display: block; width: 6px; height: 12px; margin: 10px auto 0; opacity: .55;
  background: radial-gradient(circle, var(--testo-2) 1.1px, transparent 1.4px) 0 0 / 3px 3px;
}
table.righe td.maniglia:hover::after { opacity: 1; }
form[data-sola-lettura] table.righe td.maniglia { cursor: default; }
form[data-sola-lettura] table.righe td.maniglia::after { display: none; }
table.righe tr.trascinata td { opacity: .45; }
table.righe tr.cade-sopra td { box-shadow: inset 0 2px 0 var(--accento); }
table.righe tr.cade-sotto td { box-shadow: inset 0 -2px 0 var(--accento); }
/* Elenchi di articoli (righe dei documenti e di Carica bolle, magazzino, PDF del fornitore): bordi tra le celle.
   Ai lati e sopra niente bordo: c'è già il riquadro di .area-tabella. Al telefono le righe sono schede (vedi sotto). */
table.righe td, table.righe th,
#elenco-articoli td, #elenco-articoli th, #pdf-fornitore-tabella td, #pdf-fornitore-tabella th { border: 1px solid var(--bordo-cella); }
table.righe tr > :first-child, #elenco-articoli tr > :first-child, #pdf-fornitore-tabella tr > :first-child { border-left: 0; }
table.righe tr > :last-child, #elenco-articoli tr > :last-child, #pdf-fornitore-tabella tr > :last-child { border-right: 0; }
table.righe th, #elenco-articoli th, #pdf-fornitore-tabella th { border-top: 0; }
#elenco-articoli tbody tr:last-child td, #pdf-fornitore-tabella tbody tr:last-child td { border-bottom: 0; }
.righe-piede { display: flex; padding: 7px 6px; color: var(--testo-3); background: var(--superficie); border: 1px solid var(--bordo); border-top: 0; font-variant-numeric: tabular-nums; }
.doc-corpo > .pulsanti { padding-top: 8px; }
.doc-fondo { display: flex; gap: 24px; padding-top: 12px; align-items: flex-start; }
.doc-fondo .commenti { flex: 1; }
.doc-fondo label { display: block; margin: 0 0 4px; font-size: 12px; color: var(--testo-3); }
.totali { width: 300px; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.totali td { padding: 6px 12px; font-variant-numeric: tabular-nums; }
.totali tr.totale td { font-weight: 600; font-size: 16px; border-top: 1px solid var(--bordo); }
.pannello-testo { flex: 1; padding: 14px 0; flex-direction: column; gap: 8px; overflow: auto; }
.pannello-testo .campi { max-width: 760px; }

/* --- Start --- */
.start { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.start .cifra strong { font-size: 28px; }
.start .nota { color: var(--testo-3); font-size: 13px; }
.riquadro { display: block; color: inherit; text-decoration: none; }

/* --- Finestra di stampa/PDF --- */
.dialogo { padding: 18px 20px; min-width: 400px; color: var(--testo); background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); }
.dialogo::backdrop { background: rgba(0, 0, 0, .55); }
.dialogo h3 { margin: 0 0 12px; font-weight: 600; font-size: 17px; }
.dialogo label { display: block; margin: 7px 0; }
.dialogo .scelta { cursor: pointer; }
.dialogo select { margin-bottom: 8px; }
.dialogo-pulsanti { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dialogo-stampa { display: flex; gap: 18px; width: min(1200px, 90vw); height: 86vh; }
.dialogo-scelte { width: 300px; flex: none; display: flex; flex-direction: column; }
.dialogo-scelte .dialogo-pulsanti { margin-top: auto; }
.dialogo-scelte #dialogo-cartelle { margin-top: 10px; }
.dialogo-scelte #dialogo-cartelle[hidden] { display: none; }
.dialogo-cartella { margin-bottom: 8px; overflow-wrap: anywhere; }
.dialogo-cartella select { width: 100%; }
.cartella-pagina { padding: 12px 0; }
.cartella-scelta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 22px; }
.cartella-scelta p { width: 100%; margin: 0; }
.cartella-scelta select { min-width: min(420px, 100%); }
.controllo-cartelle [hidden] { display: none; }
.controllo-cartelle table.elenco td, .controllo-cartelle table.elenco td:first-child { white-space: normal; overflow-wrap: anywhere; }
.controllo-cartelle td select, .controllo-cartelle td input { width: 100%; }
.controllo-cartelle td select + input { margin-top: 4px; }
.controllo-cartelle .controllo-azione { width: 84px; text-align: right; }
.cartella-dove { overflow-wrap: anywhere; }
.anteprima { position: relative; flex: 1; background: #525659; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.anteprima iframe { width: 100%; height: 100%; border: 0; display: block; }
.anteprima-attesa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ddd; background: #525659; }
.anteprima-attesa[hidden] { display: none; }
@media (max-width: 760px) {
  .dialogo-stampa { flex-direction: column; height: 90vh; }
  .dialogo-scelte { width: auto; }
}

/* --- Varie --- */
.resoconto { background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 10px 12px; font: 13px Consolas, monospace; white-space: pre-wrap; }
.login { margin: 12vh auto; width: 340px; padding: 26px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.login h1 { margin-top: 0; font-weight: 600; font-size: 22px; }
.login p { margin: 0 0 12px; }
.login label { display: block; margin-bottom: 4px; color: var(--testo-2); font-size: 13px; }
.aiuto.tasti { margin-left: auto; text-align: right; }
/* Pulsanti sotto le righe del documento: il promemoria dei tasti va a capo invece di allargare la pagina */
.barra-righe .aiuto.tasti { flex: 1 1 260px; min-width: 0; }

/* --- Allegati nella pagina del documento --- */
.allegati { width: 400px; flex: none; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.allegati.trascina { border-color: var(--accento); background: var(--accento-sfondo); }
.allegati.in-caricamento { opacity: .6; }
.allegati-testa { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--bordo); font-size: 12px; color: var(--testo-3); }
.allegati-testa .btn { padding: 3px 9px; font-size: 13px; }
.allegati-elenco { max-height: 140px; overflow: auto; }
.allegato { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px; border-bottom: 1px solid var(--bordo); font-size: 13px; }
.allegato:last-child { border-bottom: 0; }
.allegato .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--testo); }
.allegato .data { font-size: 12px; }
.allegato .btn.solo-icona { padding: 3px 5px; background: none; border-color: transparent; }
.allegato .btn.solo-icona:hover { color: var(--rosso); }
.allegato svg { width: 16px; height: 16px; }
.nessun-allegato { padding: 12px; font-size: 13px; }

/* --- Materiali da smistare --- */
.zona-carica { display: flex; align-items: center; gap: 12px; padding: 16px 18px; margin-bottom: 12px; color: var(--testo-2); border: 1px dashed var(--bordo-forte); border-radius: var(--raggio); background: var(--superficie); }
.zona-carica svg { width: 26px; height: 26px; color: var(--testo-3); }
.zona-carica.trascina { border-color: var(--accento); background: var(--accento-sfondo); color: var(--accento-testo); }
.zona-carica.in-caricamento { border-color: var(--accento); color: var(--accento-testo); }
.barra-assegna { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 10px; background: var(--superficie-2); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); }
.barra-assegna .sep { width: 1px; height: 22px; background: var(--bordo-forte); margin: 0 4px; }
#tabella-materiali td.spunta-cella { text-align: center; vertical-align: middle; }
#tabella-materiali td.lavoro-cella { padding: 2px 4px; vertical-align: middle; }
#tabella-materiali tr.da-controllare td, #tabella-materiali tr.incompleta td { background: var(--incompleta-sfondo); }
#tabella-materiali tr.inserita td.lavoro-cella, #tabella-materiali tr.inserita td.spunta-cella { opacity: .55; }

/* --- DICO --- */
.scelta-inline { display: flex !important; align-items: center; gap: 6px; height: 34px; cursor: pointer; white-space: nowrap; }
.btn.piccolo { padding: 2px 10px; font-size: 12px; margin-left: 10px; text-transform: none; letter-spacing: 0; }
.testo-istruzioni textarea { width: 100%; min-height: 220px; }
.doc-testata .lavoro { width: 260px; }
.doc-testata .cliente { min-width: 200px; }
.doc-testata .lavoro select, .doc-testata .cliente select { width: 100%; }
.scelte-riga > div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.scelte-riga label, .spunte label { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; margin: 0; }
.spunte { display: flex; flex-direction: column; gap: 5px; padding: 4px 0; }
.lista-spunte > div { display: flex; flex-direction: column; gap: 5px; }
.spunte input[type=checkbox], .scelte-riga input[type=radio] { margin-top: 3px; flex: none; }
.riga-allegato { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
svg.icona { width: 18px; height: 18px; color: var(--testo-2); }

/* --- Magazzino --- */
.dialogo-magazzino { width: min(720px, 96vw); }
.magazzino-risultati { display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow-y: auto; margin-top: 10px; }
.magazzino-risultati .articolo {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 10px; text-align: left; font: inherit; color: var(--testo);
  background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--raggio); cursor: pointer;
}
.magazzino-risultati .articolo:hover { border-color: var(--accento); }
.magazzino-risultati .articolo.aggiunto { border-color: var(--verde); }
.magazzino-risultati .articolo small { grid-column: 1 / -1; color: var(--testo-3); }
.magazzino-risultati .articolo.con-foto { grid-template-columns: 48px 1fr auto; }
.magazzino-risultati .articolo.con-foto img { grid-row: span 2; width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: var(--raggio); }
.magazzino-risultati .articolo.con-foto small { grid-column: 2 / -1; }
/* Righe dal preventivo PDF di un fornitore */
.dialogo-pdf-fornitore { width: min(900px, 96vw); }
.dialogo-pdf-fornitore label.btn { display: inline-flex; margin: 4px 0; }
.pdf-fornitore-esito { margin: 8px 0; color: var(--testo-2); }
.pdf-fornitore-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pdf-fornitore-barra label { margin: 0; }
.pdf-fornitore-barra input { width: 70px; text-align: right; }
.dialogo-pdf-fornitore .area-tabella { max-height: 50vh; overflow: auto; border: 1px solid var(--bordo); border-radius: var(--raggio); }
#pdf-fornitore-tabella td { white-space: normal; cursor: pointer; }
#pdf-fornitore-tabella td.num { white-space: nowrap; }
#pdf-fornitore-tabella tr.da-controllare td { background: var(--incompleta-sfondo); }
.magazzino-cerca { display: flex; gap: 8px; }
.magazzino-cerca input { flex: 1; }
.magazzino-cerca select { width: auto; max-width: 40%; }
td.foto-articolo { padding: 3px 6px !important; }
td.foto-articolo img { display: block; width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: var(--raggio); }
/* Elenchi dei documenti: intestazioni che ordinano */
th a.ordina { color: inherit; text-decoration: none; }
th a.ordina:hover { color: var(--testo); }
th a.ordina::after { content: " ⇅"; font-size: 10px; opacity: .5; }
th.ordine-su a.ordina::after { content: " ▲"; opacity: 1; }
th.ordine-giu a.ordina::after { content: " ▼"; opacity: 1; }
#elenco-articoli th[data-ordina] { cursor: pointer; }
#elenco-articoli th[data-ordina]:hover { color: var(--testo); }
#elenco-articoli th.ordine-su::after { content: " ▲"; font-size: 10px; }
#elenco-articoli th.ordine-giu::after { content: " ▼"; font-size: 10px; }
#elenco-articoli td.descrizione-articolo { white-space: normal; }
/* Magazzino sempre dentro lo schermo: colonne strette fisse (testo lungo con "…", intero passando col mouse),
   la descrizione prende lo spazio che resta; con lo schermo meno largo spariscono le colonne meno importanti */
#elenco-articoli td { overflow: hidden; text-overflow: ellipsis; }
#elenco-articoli td.c-codice { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 761px) {
  #elenco-articoli { table-layout: fixed; }
  #elenco-articoli .c-foto { width: 52px; }
  #elenco-articoli .c-codice { width: 125px; }
  #elenco-articoli .c-categoria { width: 115px; }
  #elenco-articoli .c-um { width: 52px; }
  #elenco-articoli .c-costo { width: 88px; }
  #elenco-articoli .c-vendita { width: 92px; }
  #elenco-articoli .c-fornitore { width: 110px; } /* la pagina la allarga quanto il fornitore con il nome più lungo */
  #elenco-articoli .c-data { width: 92px; }
  #elenco-articoli .c-usato { width: 62px; }
  #elenco-articoli .c-bolle { width: 46px; }
}
@media (min-width: 761px) and (max-width: 1350px) { #elenco-articoli .c-data, #elenco-articoli .c-usato { display: none; } }
@media (min-width: 761px) and (max-width: 1100px) { #elenco-articoli .c-categoria, #elenco-articoli .c-costo { display: none; } }
@media (min-width: 761px) and (max-width: 960px) {
  #elenco-articoli .c-fornitore, #elenco-articoli .c-um, #elenco-articoli .c-bolle { display: none; }
  #elenco-articoli .c-codice { width: 110px; }
}
.dialogo-articolo { width: min(600px, 96vw); }
.immagine-articolo { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
.immagine-articolo img { width: 120px; height: 120px; object-fit: contain; background: #fff; border-radius: var(--raggio); flex: none; }
.immagine-articolo .pulsanti-immagine { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.immagine-articolo[hidden], .dialogo-articolo .btn[hidden], .immagine-articolo img[hidden] { display: none; }
.dialogo-bolle { width: min(1100px, 96vw); }
.etichetta-simile { font-size: 11px; padding: 1px 5px; color: var(--testo-3); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); }
.tabella-categorie td { vertical-align: top; white-space: normal; }
.tabella-fornitori td { white-space: normal; vertical-align: middle; }
.tabella-sicurezza td { white-space: normal; vertical-align: top; } /* Impostazioni → Sicurezza: avvisi lunghi a capo */
.tabella-sicurezza td:first-child { white-space: nowrap; }
.rinomina-fornitore { display: flex; gap: 6px; }
.rinomina-fornitore input { flex: 1; min-width: 0; }

/* --- Invio per e-mail --- */
.dialogo-invio { width: min(640px, 96vw); }
.dialogo-invio label { margin: 10px 0 4px; color: var(--testo-2); }
.dialogo-invio .scelta { display: flex; align-items: center; gap: 6px; }
.invio-riga { display: flex; gap: 6px; margin-bottom: 4px; }
.invio-riga input { flex: 1; min-width: 0; }

/* --- Firma del cliente --- */
.dialogo-firma { width: min(760px, 96vw); }
.firma-tela { display: block; width: 100%; height: 260px; margin-bottom: 10px; background: #fff; border-radius: var(--raggio); touch-action: none; cursor: crosshair; }
@media (max-width: 760px) {
  .dialogo-firma { width: 100vw; min-width: 0; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 12px; }
  .dialogo { min-width: 0; max-width: 96vw; }
  .firma-tela { height: 55vh; }
  .dialogo-firma .dialogo-pulsanti { flex-wrap: wrap; }
  .dialogo-firma .dialogo-pulsanti .btn { flex: 1; justify-content: center; }
}
/* Firma sul telefono: finestra sul PC con QR code ed e-mail, pagina del link aperta sul telefono (firma_telefono.py) */
.dialogo-firma-telefono { width: min(660px, 96vw); }
.dialogo-firma-telefono [hidden] { display: none; }
/* Pulsante della firma nella barra del documento: rosso da firmare, verde firmato (scelta dell'utente, firma.js) */
.btn.firma-mancante { color: var(--rosso); border-color: var(--rosso-bordo); background: var(--rosso-sfondo); }
.btn.firma-fatta { color: var(--verde); border-color: var(--verde-bordo); background: var(--verde-sfondo); }
.btn.firma-tolta { color: var(--giallo); border-color: var(--giallo-bordo); background: var(--giallo-sfondo); } /* era firmato, firma tolta */
.ft-corpo { display: flex; gap: 18px; align-items: flex-start; }
.ft-qr { flex: none; width: 220px; height: 220px; padding: 10px; box-sizing: content-box; background: #fff; border-radius: var(--raggio); }
.ft-qr svg { display: block; width: 220px; height: 220px; }
.ft-non-valido .ft-qr { opacity: .12; }
.ft-testo { flex: 1; min-width: 0; }
.ft-testo p:first-child { margin-top: 0; }
.ft-testo input { width: 100%; }
.ft-link { word-break: break-all; }
#ft-invia { margin-top: 8px; }
#ft-stato { margin-top: 14px; }
body.pagina-firma { display: block; }
.firma-telefono { max-width: 760px; margin: 0 auto; padding: 16px; }
.firma-telefono header { margin-bottom: 12px; }
.firma-telefono h1 { margin: 4px 0; font-size: 18px; font-weight: 600; }
.firma-telefono .msg { margin: 12px 0; }
.firma-pagine img { display: block; width: 100%; height: auto; margin-bottom: 10px; background: #fff; border-radius: var(--raggio); }
.firma-modulo { margin-top: 18px; }
.firma-modulo h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.firma-telefono .firma-tela { height: min(45vh, 260px); }
.firma-modulo input[type=text] { width: 100%; }
.firma-telefono .dialogo-pulsanti .btn { flex: 1; justify-content: center; }

/* --- Telefono (fino a 760 px) --- */
.barra-telefono, .velo-menu { display: none; }
@media (max-width: 760px) {
  body { flex-direction: column; }
  .barra-telefono {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; position: sticky; top: 0; z-index: 20;
    background: var(--laterale); border-bottom: 1px solid var(--bordo);
  }
  .barra-telefono-titolo { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .laterale {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: 260px; overflow-y: auto;
    transform: translateX(-105%); transition: transform .2s ease;
  }
  body.menu-aperto .laterale { transform: none; }
  body.menu-aperto .velo-menu { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .5); }
  .laterale nav a, .laterale nav button { padding: 11px 10px; }
  .riduci-menu { display: none; }

  .contenuto { padding: 12px 10px; }
  .messaggi { padding: 10px 10px 0; }
  .msg { flex-wrap: wrap; }
  /* Caratteri da 16 px: il telefono non ingrandisce la pagina quando si tocca un campo */
  input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=datetime-local],
  input[type=search], input[type=password], select, textarea { font-size: 16px; }
  .btn { padding: 9px 12px; }

  .barra-sezione { flex-wrap: wrap; margin-bottom: 10px; }
  .barra-sezione h1 { font-size: 18px; width: 100%; }
  .barra-sezione form.cerca { margin-left: 0; width: 100%; order: 2; }
  .barra-sezione .azioni { margin-left: 0; flex-wrap: wrap; }
  .no-telefono { display: none !important; }
  .filtri select { max-width: 100%; min-width: 0; }
  .cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cifra { padding: 8px 10px; }
  .cifra strong, .start .cifra strong { font-size: 18px; }
  .aiuto.tasti { display: none; }

  .corpo { flex-direction: column; min-height: auto; }
  .area-tabella { max-height: none; }
  table.elenco td, table.elenco th { padding: 10px 6px; }
  table.elenco td { white-space: normal; }
  table.elenco td.num, table.elenco td:first-child { white-space: nowrap; }
  .scheda, .scheda.larga { width: 100%; max-width: none; padding: 4px 10px 12px; }
  .campi { grid-template-columns: 1fr; gap: 2px; }
  .campi > label { margin-top: 8px; }
  .campi > span:empty { display: none; }
  .campi .triplo, .campi .doppio { grid-template-columns: 1fr; }
  .pulsanti, .barra-selezione { flex-wrap: wrap; }
  /* Telefono: la pagina scorre tutta; la barra sta in basso sopra l'elenco (non sposta le righe) e solo con una
     riga scelta, perché con i pulsanti su più file coprirebbe mezzo schermo */
  .barra-selezione { position: sticky; bottom: 0; z-index: 2; }
  .barra-selezione.vuota { display: none; }
  .pulsanti .destra { margin-left: 0; width: 100%; }
  .pulsanti .destra .btn { flex: 1; justify-content: center; }
  .piede { flex-wrap: wrap; }

  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs button { white-space: nowrap; padding: 10px 12px; }
  .doc-testata { flex-wrap: wrap; }
  .doc-testata > div { flex: 1 1 40%; }
  .doc-testata .cliente, .doc-testata .lavoro { flex: 1 1 100%; width: auto; }
  .doc-fondo { flex-direction: column; gap: 12px; }
  .doc-fondo .allegati, .totali { width: 100%; }

  /* Righe del documento come schede: descrizione sopra, numeri sotto */
  table.righe, table.righe tbody { display: block; }
  table.righe colgroup, table.righe thead { display: none; }
  table.righe tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; padding: 8px;
    border-bottom: 1px solid var(--bordo-forte);
  }
  table.righe td { border: 0; display: flex; flex-direction: column; }
  table.righe td::before { content: attr(data-etichetta); font-size: 11px; color: var(--testo-3); padding: 2px 6px 0; }
  table.righe td.cella-descrizione { grid-column: 1 / -1; }
  table.righe td.maniglia { display: none; } /* sul telefono niente trascinamento: restano ▲ ▼ */
  table.righe td.importo { justify-content: flex-end; font-weight: 600; color: var(--testo); }
  table.righe input, table.righe textarea, table.righe select { background: var(--superficie-2); border-radius: var(--raggio); }
  .righe-piede > span:not(#conta-voci) { display: none; }
  .righe-piede #conta-voci { flex: 1; }
}

/* --- Cliente del documento: ricerca mentre si scrive e nuovo cliente al volo (static/cliente.js) --- */
.cerca-cliente { position: relative; }
.cerca-cliente input { width: 100%; }
.cliente-lista {
  position: absolute; z-index: 20; top: calc(100% + 2px); left: 0; right: 0; max-height: 50vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 4px; background: var(--superficie); border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.cliente-lista[hidden], .dialogo-cliente .msg[hidden] { display: none; }
.cliente-lista .tenue { padding: 6px 8px; }
.cliente-lista .voce {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; text-align: left; font: inherit;
  color: var(--testo); background: none; border: 0; border-radius: var(--raggio); cursor: pointer;
}
.cliente-lista .voce small { color: var(--testo-3); white-space: nowrap; }
.cliente-lista .voce:hover, .cliente-lista .voce.evidenziata { background: var(--accento-sfondo); }
.cliente-lista .voce-nuovo { color: var(--accento-hover); font-weight: 600; border-top: 1px solid var(--bordo); }
/* Indirizzi suggeriti nella finestra Invia (static/invio.js): fissi, la finestra non li deve tagliare */
.invio-lista { position: fixed; top: auto; right: auto; z-index: 60; }
.invio-lista .voce { flex: none; flex-direction: column; gap: 0; }
.invio-lista .voce small { overflow: hidden; text-overflow: ellipsis; }
.dialogo-cliente { width: min(640px, 96vw); }
.campi-cliente { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.campi-cliente label { color: var(--testo-2); }
.campi-cliente label input { display: block; width: 100%; margin-top: 3px; }
.campi-cliente .largo { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .campi-cliente { grid-template-columns: 1fr; }
}

/* Suggerimenti dal magazzino sotto la cella Codice/Descrizione delle righe (static/documento.js) */
.suggerimenti-magazzino {
  position: fixed; z-index: 50; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; padding: 4px;
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.suggerimenti-magazzino[hidden] { display: none; }
.suggerimenti-magazzino .suggerimento {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; text-align: left; font: inherit; color: var(--testo);
  background: none; border: 0; border-radius: var(--raggio); cursor: pointer;
}
.suggerimenti-magazzino .suggerimento:hover, .suggerimenti-magazzino .suggerimento.evidenziato { background: var(--accento-sfondo); }
.suggerimenti-magazzino img { width: 32px; height: 32px; object-fit: contain; flex: none; background: #fff; border-radius: var(--raggio); }
.suggerimenti-magazzino .testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.suggerimenti-magazzino .testo strong { font-size: 12px; color: var(--accento-testo); }
.suggerimenti-magazzino .testo strong:empty { display: none; }
.suggerimenti-magazzino .testo small { color: var(--testo-3); }
.suggerimenti-magazzino .prezzo { white-space: nowrap; font-weight: 600; }

/* CAP/comune che si compilano a vicenda e dati dalla P.IVA (static/anagrafica.js) */
.tendina-anagrafica {
  position: fixed; z-index: 60; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; padding: 4px;
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.tendina-anagrafica[hidden] { display: none; }
.tendina-anagrafica .titolo { padding: 4px 8px 6px; color: var(--testo-2); font-size: 12px; }
.tendina-anagrafica .voce {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; text-align: left; font: inherit;
  color: var(--testo); background: none; border: 0; border-radius: var(--raggio); cursor: pointer;
}
.tendina-anagrafica .voce small { color: var(--testo-3); white-space: nowrap; }
.tendina-anagrafica .voce:hover, .tendina-anagrafica .voce.evidenziata { background: var(--accento-sfondo); }
.avviso-anagrafica { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--testo-2); }
.avviso-anagrafica[hidden] { display: none; }
.avviso-anagrafica.ok { color: var(--verde); }
.avviso-anagrafica.attenzione { color: var(--giallo); }
.avviso-anagrafica.errore { color: var(--rosso); }
.avviso-anagrafica .btn { margin-left: 6px; }

/* Avviso dell'uscita automatica per inattività (static/gestionale.js) */
.avviso-uscita {
  position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; color: var(--testo);
  background: var(--superficie-2); border: 1px solid var(--accento); border-radius: var(--raggio); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.avviso-uscita[hidden] { display: none; }

/* QR code dell'accesso a due fattori: sfondo bianco per farlo leggere alla fotocamera */
.qr-due-fattori { display: inline-block; padding: 10px; background: #fff; border-radius: var(--raggio); margin: 4px 0 8px; }
.qr-due-fattori svg { display: block; width: 220px; height: 220px; }

/* Permessi degli utenti (pagina amministratore): tabella sezione x livello e profili pronti */
.profili { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.tabella-permessi { margin: 6px 0 10px; }
.tabella-permessi .centro { text-align: center; }
.tabella-permessi label { display: block; cursor: pointer; padding: 2px 0; }
.tabella-permessi input { margin: 0; }

/* Documenti collegati accanto al titolo dell'editor (generato da, generati da questo, DICO) */
.doc-collegati { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--testo-2); }
.doc-collegati span + a, .doc-collegati a + span { margin-left: 4px; }
.doc-collegati a {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 13px; color: var(--testo);
  text-decoration: none; background: var(--superficie-2); border: 1px solid var(--bordo-forte); border-radius: var(--raggio);
}
.doc-collegati a:hover { border-color: var(--accento); color: var(--accento-testo); }
.doc-collegati svg { width: 14px; height: 14px; flex: none; }

/* Più persone sullo stesso documento: chi l'ha creato/cambiato e avviso se un altro l'ha salvato nel frattempo */
.chi-modifica { font-size: 12px; color: var(--testo-2); }
.avviso-conflitto { display: block; margin-bottom: 10px; }
.avviso-conflitto .pulsanti { margin-top: 8px; }
/* Documento solo da vedere: i campi restano leggibili ma non si cambiano */
fieldset.blocco-modifica { display: contents; }
/* Pulsanti e campi nascosti a chi non ha il permesso (restano nella pagina per gli script) */
.btn[hidden], .pulsanti-immagine[hidden], .campi > label[hidden] { display: none; }
.sola-lettura-avviso { margin-bottom: 8px; }

/* Dispositivi collegati (Accesso e dispositivi, pagina amministratore): sul telefono una scheda per dispositivo */
@media (max-width: 760px) {
  table.elenco.dispositivi thead { display: none; }
  table.elenco.dispositivi, table.elenco.dispositivi tbody, table.elenco.dispositivi tr { display: block; }
  table.elenco.dispositivi tr { padding: 6px 0; border-bottom: 1px solid var(--bordo); }
  table.elenco.dispositivi td { display: block; border: 0; padding: 2px 6px; white-space: normal; }
  table.elenco.dispositivi td:empty { display: none; }
  table.elenco.dispositivi td:not(:first-child)[data-etichetta]::before { content: attr(data-etichetta) ": "; color: var(--testo-3); }
}

/* Pagine compatte (richiesta dell'utente 02/11/2026): pulsanti e campi più piccoli, più spazio alle tabelle. Si
   attiva nel template con {% block classe_contenuto %}compatta{% endblock %}. Solo da PC: sul telefono i pulsanti
   restano grandi da toccare. Le finestre (dialog) restano come sono. In fondo al file: vince sulle regole di sopra. */
@media (min-width: 761px) {
  .compatta { padding: 8px 12px 6px; font-size: 13px; }
  .compatta dialog { font-size: 14px; }

  /* Parti comuni a tutte le pagine */
  .compatta .btn:not(dialog .btn) { padding: 3px 6px; gap: 4px; font-size: 12px; }
  .compatta .btn.solo-icona:not(dialog .btn) { padding: 3px 5px; }
  .compatta .btn:not(dialog .btn) svg { width: 14px; height: 14px; }
  .compatta :is(input, select, textarea):not(dialog *) { padding: 3px 7px; }
  .compatta .barra-sezione { gap: 8px; min-height: 26px; margin-bottom: 6px; }
  .compatta .barra-sezione h1 { font-size: 16px; }
  .compatta .barra-sezione .azioni { gap: 6px; }
  .compatta .barra-sezione form.cerca { gap: 6px; padding: 0 8px; }
  .compatta .barra-sezione form.cerca svg { width: 15px; height: 15px; }
  .compatta .barra-sezione form.cerca input { padding: 3px 0; }
  .compatta .cifre { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-bottom: 6px; }
  .compatta .cifra { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 3px 10px; }
  .compatta .cifra span { font-size: 11px; white-space: nowrap; }
  .compatta .cifra strong { margin: 0; font-size: 15px; white-space: nowrap; }
  .compatta .filtri { gap: 6px; margin-bottom: 6px; }
  .compatta .filtri select { padding: 2px 26px 2px 8px; font-size: 12px; }
  .compatta .tabs button { padding: 3px 12px; }
  .compatta table.elenco th { padding: 4px 8px; font-size: 11px; }
  .compatta table.elenco td { padding: 3px 8px; }
  .compatta .stato { padding: 0 6px; font-size: 11px; }
  .compatta .barra-selezione { gap: 4px; margin-top: 6px; padding: 3px 6px 3px 10px; }
  .compatta .piede { padding: 3px 2px 0; font-size: 12px; }
  .compatta .pulsanti { gap: 4px; padding-top: 5px; }
  .compatta .pulsanti .sep { height: 16px; margin: 0 2px; }
  .compatta .pulsanti .destra { gap: 4px; }

  /* Scheda del documento: etichette accanto alle caselle, totali su una riga */
  .compatta .doc-collegati a { padding: 1px 6px; font-size: 12px; }
  .compatta .doc-testata { flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 5px; }
  .compatta .doc-testata > div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; width: auto; }
  .compatta .doc-testata .cliente { flex: 1 1 200px; } /* 200: con la tendina Manodopera resta su una riga a 1366 px */
  .compatta .doc-testata label { margin: 0; white-space: nowrap; }
  .compatta .doc-testata .cerca-cliente { flex: 1; min-width: 0; }
  .compatta .doc-testata .errore { width: 100%; }
  .compatta .doc-testata input[type=date] { width: 128px; }
  .compatta .doc-testata select { width: 110px; }
  .compatta .doc-testata .listino input { width: 76px; }
  .compatta .doc-testata .tariffa select { width: auto; }
  .compatta .doc-testata .numero input, .compatta .doc-testata .numeraz input { width: 64px; }
  .compatta table.righe th { padding: 3px 6px; font-size: 11px; }
  .compatta table.righe input, .compatta table.righe textarea, .compatta table.righe select { padding: 3px 6px; }
  .compatta table.righe textarea { min-height: 24px; line-height: 18px; }
  .compatta table.righe td.importo { padding: 3px 6px; }
  .compatta table.righe td.maniglia::after { margin-top: 6px; }
  .compatta .righe-piede { padding: 1px 6px; font-size: 12px; }
  .compatta .barra-righe .aiuto.tasti { flex: 1 1 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .compatta .doc-fondo { align-items: stretch; gap: 10px; padding-top: 5px; }
  .compatta .doc-fondo label { margin: 0 0 1px; font-size: 11px; }
  .compatta .allegati { display: flex; width: 340px; }
  .compatta .allegati-testa { flex-direction: column; justify-content: center; gap: 2px; padding: 2px 6px; border-bottom: 0; border-right: 1px solid var(--bordo); font-size: 11px; }
  .compatta .allegati-testa .btn:not(dialog .btn) { padding: 1px 5px; font-size: 12px; }
  .compatta .allegati-elenco { flex: 1; min-width: 0; max-height: 42px; }
  .compatta .allegato { gap: 6px; padding: 1px 4px 1px 8px; font-size: 12px; }
  .compatta .nessun-allegato { padding: 4px 8px; font-size: 12px; }
  .compatta .totali { display: block; width: auto; flex: none; }
  .compatta .totali tbody { display: flex; height: 100%; }
  .compatta .totali tr { display: flex; flex-direction: column; justify-content: center; padding: 2px 10px; }
  .compatta .totali tr + tr { border-left: 1px solid var(--bordo); }
  .compatta .totali td { padding: 0; text-align: right; white-space: nowrap; }
  .compatta .totali td:first-child, .compatta .totali tr.totale td:first-child { font-size: 11px; font-weight: 400; color: var(--testo-3); }
  .compatta .totali tr.totale td { font-size: 15px; border-top: 0; }

  /* Start: bilancio in alto, lavori in corso e preventivi affiancati */
  .compatta .start { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; max-width: none; }
  .compatta .start > .riquadro:first-child, .compatta .start > .nota { grid-column: 1 / -1; }
  .compatta .start .cifre { margin-bottom: 0; }
  .compatta .start .cifra { display: block; padding: 6px 12px; }
  .compatta .start .cifra strong { margin-top: 1px; font-size: 20px; }
  .compatta .start .nota { margin: 0 0 6px; font-size: 12px; }

  /* Impostazioni e pagine collegate (documenti ed elenchi non hanno .scheda) */
  .compatta .scheda { padding: 2px 12px 8px; }
  .compatta .scheda h3 { margin: 10px 0 4px; font-size: 14px; }
  .compatta .scheda h4 { margin: 10px 0 4px; font-size: 12px; }
  .compatta .scheda p { margin: 4px 0; }
  .compatta .scheda .campi { gap: 3px 8px; }
  .compatta .scheda .aiuto { font-size: 12px; }
  .compatta .voci-impostazioni { gap: 4px 20px; margin-top: 6px; }
  .compatta .voci-impostazioni > div > span { margin-bottom: 2px; font-size: 11px; }
  .compatta .voci-impostazioni .pulsanti-riga { gap: 4px; }
  .compatta .gruppi { column-gap: 24px; margin-top: 8px; }
  .compatta .gruppi > section { padding-bottom: 8px; }
  .compatta .gruppi h4 { margin: 0 0 4px; }

  /* Clienti e Fornitori: elenco con tutte le colonne a vista (i nomi lunghi finiscono con ..., testo intero nel
     suggerimento), scheda intera senza scorrere con i campi a coppie, numero di voci e pulsanti su una riga. */
  .pagina-anagrafica { display: grid; grid-template: auto minmax(0, 1fr) auto / auto minmax(0, 1fr); column-gap: 12px; }
  .pagina-anagrafica > .barra-sezione, .pagina-anagrafica > .corpo { grid-column: 1 / -1; }
  .pagina-anagrafica > .corpo { gap: 8px; }
  .pagina-anagrafica > .piede { grid-area: 3 / 1; align-self: center; padding: 5px 0 0; }
  .pagina-anagrafica > .pulsanti { grid-area: 3 / 2; }
  .pagina-anagrafica #elenco { table-layout: fixed; }
  .pagina-anagrafica #elenco td { overflow: hidden; text-overflow: ellipsis; }
  .pagina-anagrafica #elenco th:nth-child(1) { width: 56px !important; }
  .pagina-anagrafica #elenco th:nth-child(3) { width: 130px; }
  .pagina-anagrafica #elenco th:nth-child(4) { width: 44px !important; }
  .pagina-anagrafica #elenco th:nth-child(5) { width: 106px !important; }
  .pagina-anagrafica #elenco th:nth-child(6) { width: 50px !important; }
  .pagina-anagrafica .scheda { display: flex; flex-direction: column; width: 490px; }
  .pagina-anagrafica .scheda > .tabs { flex: none; margin: 0 -12px 2px; }
  .pagina-anagrafica .scheda > #tab-anagrafica.attivo { display: flex; flex: 1 0 auto; flex-direction: column; }
  .pagina-anagrafica #form-cliente { display: flex; flex: 1; flex-direction: column; min-width: 0; }
  .pagina-anagrafica .campi { grid-template-columns: 84px minmax(0, 1fr) max-content minmax(0, 1fr); }
  .pagina-anagrafica .campi:has(#id_codice_fiscale) { grid-template-columns: 84px 108px max-content minmax(0, 1fr); }
  .pagina-anagrafica .campi:has(#id_pec) { grid-template-columns: 84px 96px max-content minmax(0, 1fr); }
  .pagina-anagrafica .campi > div:is(:has(#id_ragione_sociale), :has(#id_indirizzo), :has(#id_email), .triplo) { grid-column: 2 / -1; }
  .pagina-anagrafica #id_note { flex: 1 1 60px; min-height: 60px; }
  .pagina-anagrafica .storico-nome { margin: 6px 0 0; font-size: 14px; }
  .pagina-anagrafica table.storico .st-data { width: 92px; }
  .pagina-anagrafica table.storico .st-numero { width: 76px; }
  .pagina-anagrafica table.storico .st-stato { width: 88px; }
  .pagina-anagrafica table.storico .st-importo { width: 92px; }
  .pagina-anagrafica table.storico tfoot td { padding: 3px 8px; }
}

/* Menu del tasto destro (static/menu_destro.js): solo PC, voci prese dai pulsanti della pagina */
.menu-destro {
  position: fixed; z-index: 80; min-width: 210px; max-width: 380px; max-height: calc(100vh - 8px); overflow-y: auto;
  display: flex; flex-direction: column; padding: 4px; font-size: 13px;
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.menu-destro .voce {
  display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 3px 8px; text-align: left; font: inherit; color: var(--testo);
  background: none; border: 0; border-radius: var(--raggio); cursor: pointer; white-space: nowrap;
}
.menu-destro .voce.attiva { background: var(--accento-sfondo); }
.menu-destro .voce[aria-disabled="true"] { opacity: .4; cursor: default; }
.menu-destro .voce.attiva[aria-disabled="true"] { background: none; }
.menu-destro .voce.pericolo { color: var(--rosso); }
.menu-destro .icona { display: flex; width: 15px; flex: none; color: var(--testo-2); }
.menu-destro .voce.pericolo .icona { color: inherit; }
.menu-destro .icona svg { width: 15px; height: 15px; }
.menu-destro .etichetta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-destro kbd { margin-left: 18px; font: 11px "Segoe UI", system-ui, sans-serif; color: var(--testo-3); }
.menu-destro .freccia { margin-left: 18px; color: var(--testo-3); }
.menu-destro .separatore { flex: none; height: 1px; margin: 4px 6px; background: var(--bordo); }
.appunti-appoggio { position: fixed; top: 0; left: -9999px; opacity: 0; }