/* =========================================================================
   Tema "officina" (ott 2026): nero asfalto + giallo Winblast, carattere Barlow.
   Caricato DOPO styles.css: ridefinisce i token e i componenti principali,
   aggiunge menu laterale, home a elenco di lavoro e dettaglio commessa a schede.
   ========================================================================= */

@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow SC"; src: url("/assets/fonts/barlow-sc-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow SC"; src: url("/assets/fonts/barlow-sc-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --font: "Barlow", "Segoe UI", system-ui, Arial, sans-serif;
  --font-titoli: "Barlow SC", "Barlow", "Segoe UI", sans-serif;
  --giallo: #FFD21E; --giallo-scuro: #E5B800;
  --nero: #1F2429; --nero-2: #2B3238; --nero-3: #3A424A;
  --sfondo: #ECEEF0; --sfondo-2: #E1E5E9; --bianco: #FFFFFF;
  --testo: #1F2429; --testo-2: #3D464E; --grigio: #59636D; --grigio-tenue: #66707A;
  --bordo: #D5DAE0; --bordo-forte: #C3CAD1; --riga: #EDF0F2;
  --verde: #2D7A3E;  --verde-tenue: #E3F2E6;  --verde-testo: #1F6631;
  --rosso: #B8322A;  --rosso-tenue: #FBE9E7;  --rosso-testo: #9E2A21;
  --arancio: #8A5A00; --arancio-tenue: #FFF1D6; --arancio-testo: #7A4F00;
  --azzurro: #22528A; --azzurro-tenue: #E6EEF8;
  --giallo-tenue: #FFF1D6; --giallo-testo: #7A4F00;
  --ombra: none; --ombra-media: 0 6px 20px rgba(20, 26, 32, .14); --ombra-forte: 0 18px 50px rgba(20, 26, 32, .30);
  --radius: 8px; --radius-sm: 6px;
  --focus: 0 0 0 3px rgba(255, 210, 30, .55);
}
:root[data-tema="scuro"] {
  --nero: #15191D; --nero-2: #22282E; --nero-3: #313940;
  --sfondo: #14171A; --sfondo-2: #20252A; --bianco: #1C2125;
  --testo: #E6E9EC; --testo-2: #C8CED4; --grigio: #A3ACB5; --grigio-tenue: #949DA6;
  --bordo: #333B43; --bordo-forte: #46505A; --riga: #262C32;
  --verde: #56B870; --verde-tenue: #17301F; --verde-testo: #7CD293;
  --rosso: #F07A6E; --rosso-tenue: #3B1F1C; --rosso-testo: #F4A097;
  --arancio: #E5A84A; --arancio-tenue: #36291A; --arancio-testo: #F0C27A;
  --azzurro: #7EB0EC; --azzurro-tenue: #1C2A3F;
  --giallo-tenue: #36291A; --giallo-testo: #F0C27A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --nero: #15191D; --nero-2: #22282E; --nero-3: #313940;
    --sfondo: #14171A; --sfondo-2: #20252A; --bianco: #1C2125;
    --testo: #E6E9EC; --testo-2: #C8CED4; --grigio: #A3ACB5; --grigio-tenue: #949DA6;
    --bordo: #333B43; --bordo-forte: #46505A; --riga: #262C32;
    --verde: #56B870; --verde-tenue: #17301F; --verde-testo: #7CD293;
    --rosso: #F07A6E; --rosso-tenue: #3B1F1C; --rosso-testo: #F4A097;
    --arancio: #E5A84A; --arancio-tenue: #36291A; --arancio-testo: #F0C27A;
    --azzurro: #7EB0EC; --azzurro-tenue: #1C2A3F;
    --giallo-tenue: #36291A; --giallo-testo: #F0C27A;
  }
}

body { font-size: 16px; line-height: 1.45; background: var(--sfondo); }
button, input, select, textarea { font-family: var(--font); }
h1, h2, h3 { font-family: var(--font-titoli); letter-spacing: 0; }
h1 { font-size: 32px; line-height: 1.1; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

/* ---------- STRUTTURA: menu laterale + contenuto ---------- */
.shell { display: flex; min-height: 100vh; }
.colonna { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { max-width: 1900px; width: 100%; margin: 0 auto; padding: 18px 20px 40px; box-sizing: border-box; }

.sidebar { width: 224px; flex: 0 0 224px; background: var(--nero); color: #DDE2E6; position: sticky; top: 0;
  height: 100vh; overflow-y: auto; padding: 18px 12px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.sb-marchio { display: flex; align-items: center; gap: 10px; padding: 2px 8px; }
.marchio-w { width: 34px; height: 34px; border-radius: 6px; background: var(--giallo); color: #1F2429; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--font-titoli); font-weight: 700; font-size: 18px; flex: 0 0 auto; }
.sb-marchio b { display: block; color: #FFFFFF; font-size: 16px; line-height: 1.1; }
.sb-marchio span.sotto { display: block; color: #A3ACB5; font-size: 13px; }
.sb-gruppo { display: flex; flex-direction: column; gap: 2px; }
.sb-titolo { font-size: 13px; color: #97A1AB; padding: 0 10px 4px; }
.sb-voce { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 0;
  border-radius: 6px; background: transparent; color: #DDE2E6; font-size: 15px; font-weight: 500; cursor: pointer; min-height: 40px; }
.sb-voce svg { flex: 0 0 auto; opacity: .9; }
.sb-voce span.et { flex: 1; }
.sb-voce:hover { background: var(--nero-2); color: #FFFFFF; }
.sb-voce.attiva { background: var(--giallo); color: #1F2429; font-weight: 700; }
.sb-voce.attiva svg { opacity: 1; }
.sb-num { font-size: 12.5px; font-weight: 600; border-radius: 10px; padding: 1px 8px; background: var(--nero-3); color: #FFFFFF; white-space: nowrap; }
.sb-num.rosso { background: #B8322A; }
.sb-num.ambra { background: #8A5A00; }
.sb-voce.attiva .sb-num { background: #1F2429; color: #FFFFFF; }
.sb-piede { margin-top: auto; border-top: 1px solid var(--nero-3); padding: 12px 6px 0; display: flex; flex-direction: column; gap: 6px; }
.sb-utente { display: flex; align-items: center; gap: 10px; padding: 0 4px 6px; }
.sb-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--nero-3); color: #FFFFFF; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.sb-utente b { color: #FFFFFF; font-size: 14px; display: block; line-height: 1.2; }
.sb-utente span { color: #A3ACB5; font-size: 12.5px; }
.sb-piccole { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-piccole button { flex: 1 1 auto; border: 1px solid var(--nero-3); background: transparent; color: #C9CFD5; border-radius: 6px;
  font-size: 13px; padding: 7px 8px; cursor: pointer; }
.sb-piccole button:hover { background: var(--nero-2); color: #FFFFFF; }

/* topbar e barra in basso solo su schermi stretti */
.topbar { background: var(--nero); box-shadow: none; padding: 10px 14px; }
.topbar .marchio { gap: 8px; }
.topbar .marchio .app { font-family: var(--font-titoli); font-size: 19px; }
.barra-telefono { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--bianco); border-top: 1px solid var(--bordo); padding: 4px 2px calc(6px + env(safe-area-inset-bottom)); }
.bt-voce { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 2px; border: 0; background: none;
  color: var(--grigio); font-size: 12px; font-weight: 600; cursor: pointer; position: relative; min-height: 48px; }
.bt-voce.attiva { color: var(--testo); }
.bt-voce.attiva::before { content: ""; position: absolute; top: -4px; left: 22%; right: 22%; height: 3px; border-radius: 2px; background: var(--giallo); }
.bt-voce .bt-num { position: absolute; top: 2px; left: 56%; background: #B8322A; color: #fff; border-radius: 9px; font-size: 10.5px; padding: 0 5px; }

@media (min-width: 901px) {
  .topbar { display: none !important; }
  .barra-telefono { display: none !important; }
}
@media (max-width: 900px) {
  .sidebar { display: none !important; }
  main { padding: 14px 14px 92px; }
  h1 { font-size: 26px; }
}

/* ---------- COMPONENTI COMUNI ---------- */
.primario { border-radius: 6px; padding: 0 16px; min-height: 42px; font-size: 15px; background: var(--giallo); color: #1F2429; }
.primario:hover { background: var(--giallo-scuro); }
.btn-scuro { border: 0; border-radius: 6px; padding: 0 14px; min-height: 40px; font-size: 14.5px; font-weight: 700;
  background: var(--testo); color: var(--bianco); cursor: pointer; white-space: nowrap; }
.btn-scuro:hover { opacity: .88; }
.btn-chiaro { border: 1px solid var(--bordo-forte); border-radius: 6px; padding: 0 14px; min-height: 40px; font-size: 14.5px;
  font-weight: 600; background: var(--bianco); color: var(--testo); cursor: pointer; white-space: nowrap; }
.btn-chiaro:hover { border-color: var(--testo); }
.chip { border-radius: 18px; font-size: 14px; padding: 6px 13px; border: 1px solid var(--bordo-forte); background: var(--bianco); color: var(--testo); }
.chip:hover { border-color: var(--testo); }
.chip.attivo { background: var(--testo); color: var(--bianco); border-color: var(--testo); }
button.mini { font-size: 13px; }
.pannello { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--radius); box-shadow: none; padding: 18px 20px; margin-bottom: 16px; }
.pannello h2 { font-size: 20px; }
.pagina-testa { margin: 0 0 16px; }
.pagina-testa h1 { font-size: 32px; }
.link-indietro { font-size: 15px; color: var(--azzurro); margin-bottom: 14px; }
.aiuto, .modale-corpo .aiuto { font-size: 14px; color: var(--grigio); }
.meta { color: var(--grigio); font-size: 14px; }
.filtri { gap: 8px; margin-bottom: 14px; }
.filtri input[type="search"], .sel-filtro { min-height: 42px; font-size: 15px; border-radius: 6px; }
.vuoto { color: var(--grigio); }

/* tabelle: intestazioni in chiaro, niente maiuscolo */
table.tab { font-size: 14.5px; }
table.tab th { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--grigio);
  background: var(--bianco); border-bottom: 1px solid var(--bordo); padding: 10px 10px; }
table.tab td { padding: 9px 10px; border-bottom: 1px solid var(--riga); }
table.tab tbody tr:nth-child(even) td { background: transparent; }
table.tab tbody tr:hover td { background: color-mix(in srgb, var(--giallo) 10%, var(--bianco)); }
table.tab .cod { font-family: var(--font-titoli); font-weight: 700; font-size: 15px; }
.tab-scroll { border-radius: var(--radius); border-color: var(--bordo); }

/* stati: etichette rettangolari, colore pieno tenue */
.pill-stato { border: 0 !important; border-radius: 4px; padding: 3px 9px; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.pill-stato.verde, .pill-stato.pl-verde { background: var(--verde-tenue); color: var(--verde-testo); }
.pill-stato.giallo, .pill-stato.tk-giallo { background: var(--arancio-tenue); color: var(--arancio-testo); }
.pill-stato.rosso, .pill-stato.tk-rosso { background: var(--rosso-tenue); color: var(--rosso-testo); }
.pill-stato.azzurro, .pill-stato.pl-azzurro, .pill-stato.tk-azzurro { background: var(--azzurro-tenue); color: var(--azzurro); }
.pill-stato.grigio, .pill-stato.pl-grigio, .pill-stato.tk-grigio { background: var(--sfondo-2); color: var(--testo-2); }
.pill-stato.lanciata { background: var(--testo); color: var(--bianco); }
.stato-tag { display: inline-block; font-size: 13.5px; font-weight: 600; padding: 4px 10px; border-radius: 4px; white-space: nowrap; }
.stato-tag.rosso { background: var(--rosso-tenue); color: var(--rosso-testo); }
.stato-tag.arancio { background: var(--arancio-tenue); color: var(--arancio-testo); }
.stato-tag.verde { background: var(--verde-tenue); color: var(--verde-testo); }
.stato-tag.azzurro { background: var(--azzurro-tenue); color: var(--azzurro); }
.stato-tag.grigio { background: var(--sfondo-2); color: var(--testo-2); }
table.tab tr.st-verde td { background: color-mix(in srgb, var(--verde-tenue) 70%, var(--bianco)) !important; }
table.tab tr.st-giallo td { background: color-mix(in srgb, var(--arancio-tenue) 70%, var(--bianco)) !important; }
table.tab tr.st-rosso td { background: color-mix(in srgb, var(--rosso-tenue) 70%, var(--bianco)) !important; }

.modale { border-radius: 10px; }
.modale-corpo label { font-size: 14px; }
.modale-corpo input, .modale-corpo select, .modale-corpo textarea { font-size: 15.5px; min-height: 42px; }
.modale-piede button { min-height: 42px; font-size: 15px; border-radius: 6px; }
.toast { font-size: 15px; border-radius: 8px; }

/* schermata di accesso */
.accesso .riquadro { border-radius: 10px; box-shadow: var(--ombra-media); }
.accesso .logo b { font-family: var(--font-titoli); font-size: 22px; }
.bottone-largo { background: var(--giallo); color: #1F2429; border-radius: 6px; min-height: 46px; font-size: 16px; }

/* ---------- HOME: elenco di lavoro ---------- */
.home-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.home-testa h1 { flex: 1 1 200px; margin: 0; }
.home-cerca { display: flex; align-items: center; gap: 8px; background: var(--bianco); border: 1px solid var(--bordo-forte);
  border-radius: 6px; padding: 0 12px; min-height: 44px; flex: 0 1 360px; }
.home-cerca input { border: 0; outline: none; background: transparent; color: var(--testo); font-size: 15.5px; flex: 1; min-width: 0; }
.home-cerca:focus-within { box-shadow: var(--focus); }
.home-schede { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 6px; border-bottom: 2px solid var(--bordo); margin-bottom: 14px; }
.home-scheda { border: 0; background: transparent; padding: 10px 12px; margin-bottom: -2px; border-bottom: 3px solid transparent;
  color: var(--grigio); font-size: 15.5px; font-weight: 500; cursor: pointer; min-height: 44px; }
.home-scheda b { font-weight: 600; font-size: 13.5px; margin-left: 4px; }
.home-scheda.attiva { color: var(--testo); font-weight: 700; border-bottom-color: var(--testo); }
.home-scheda.attiva b { background: var(--testo); color: var(--bianco); border-radius: 10px; padding: 0 7px; }
.home-filtri { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; align-items: center; }
.lavoro { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--radius); }
.lv-testa, .lv-riga { display: grid; grid-template-columns: 84px minmax(150px, 2.2fr) minmax(90px, .8fr) 150px minmax(130px, 1.3fr) 104px minmax(150px, 190px);
  gap: 12px; align-items: center; padding: 12px 18px; }
.lv-testa { font-size: 13px; color: var(--grigio); font-weight: 600; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bordo); }
.lv-riga { border-bottom: 1px solid var(--riga); cursor: pointer; }
.lv-riga:last-child { border-bottom: 0; }
.lv-riga:hover { background: color-mix(in srgb, var(--giallo) 9%, var(--bianco)); }
.lv-riga.archiviata { opacity: .6; }
.lv-num { font-family: var(--font-titoli); font-weight: 700; font-size: 20px; }
.lv-cli { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lv-cli b { font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-cli span { font-size: 14px; color: var(--grigio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-set { font-size: 14.5px; color: var(--testo-2); }
.lv-prog { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.lv-prog b { font-size: 15px; font-weight: 600; }
.lv-prog span { font-size: 13px; color: var(--grigio); }
.lv-prog.ritardo b { color: var(--rosso-testo); }
.lv-lav { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--testo-2); }
.lv-barra { width: 54px; height: 6px; border-radius: 3px; background: var(--sfondo-2); overflow: hidden; flex: 0 0 auto; }
.lv-barra > i { display: block; height: 100%; background: var(--verde); }
.lv-az { display: flex; justify-content: flex-start; }
.lv-az button { width: 100%; min-width: 0; white-space: normal; }
.lv-riga > * { min-width: 0; }
@media (max-width: 1180px) {
  .lv-testa, .lv-riga { grid-template-columns: 80px minmax(140px, 2fr) 150px minmax(120px, 1.2fr) minmax(140px, 180px); }
  .lv-set, .lv-lav, .lv-testa .h-set, .lv-testa .h-lav { display: none; }
}
@media (max-width: 760px) {
  .lv-testa { display: none; }
  .lavoro { background: transparent; border: 0; display: flex; flex-direction: column; gap: 10px; }
  .lv-riga { grid-template-columns: auto 1fr; grid-template-areas: "num cli" "stato prog" "az az"; gap: 8px 12px;
    background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--radius); padding: 12px 14px; }
  .lv-num { grid-area: num; } .lv-cli { grid-area: cli; } .lv-stato { grid-area: stato; } .lv-prog { grid-area: prog; } .lv-az { grid-area: az; }
  .lv-az button { min-height: 44px; }
  .home-cerca { flex: 1 1 100%; order: 3; }
  .home-filtri { margin-left: 0; }
}

/* ---------- DETTAGLIO COMMESSA ---------- */
.cm-testa { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-bottom: 18px; }
.cm-targa { background: var(--giallo); color: #1F2429; border-radius: 6px; padding: 10px 16px 8px; font-family: var(--font-titoli);
  font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: .5px; }
.cm-titoli { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cm-titoli h1 { margin: 0; font-size: 30px; }
.cm-titoli .cm-ogg { font-size: 16.5px; color: var(--testo-2); }
.cm-titoli .cm-info { font-size: 14px; color: var(--grigio); }
.cm-titoli .cm-azioni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cm-box { flex: 0 1 310px; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; }
.cm-box .cm-box-et { font-size: 14px; color: var(--grigio); }
.cm-box .cm-box-val { font-family: var(--font-titoli); font-weight: 700; font-size: 23px; line-height: 1.15; }
.cm-box .cm-box-nota { font-size: 13.5px; color: var(--grigio); }
.cm-box .cm-box-val.rosso { color: var(--rosso-testo); }
.cm-box .cm-box-val.verde { color: var(--verde-testo); }
.cm-passi { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--radius); overflow: hidden; }
.cm-passi li { padding: 11px 16px; border-right: 1px solid var(--bordo); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cm-passi li:last-child { border-right: 0; }
.cm-passi .pp-st { font-size: 13px; font-weight: 700; }
.cm-passi .pp-nome { font-weight: 600; font-size: 15.5px; }
.cm-passi .pp-nota { font-size: 13px; color: var(--grigio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-passi li.fatto .pp-st { color: var(--verde-testo); }
.cm-passi li.dafare { background: var(--rosso-tenue); }
.cm-passi li.dafare .pp-st, .cm-passi li.dafare .pp-nota { color: var(--rosso-testo); }
.cm-passi li.corso .pp-st { color: var(--arancio-testo); }
.cm-passi li.attesa .pp-st { color: var(--grigio); }
@media (max-width: 760px) {
  .cm-passi { grid-template-columns: 1fr; }
  .cm-passi li { border-right: 0; border-bottom: 1px solid var(--bordo); flex-direction: row; gap: 10px; align-items: baseline; }
  .cm-passi li:last-child { border-bottom: 0; }
  .cm-targa { font-size: 34px; }
  .cm-box { flex: 1 1 100%; }
}
.cm-schede { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--radius); }
.cm-tabbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--bordo); }
.cm-tab { border: 0; background: transparent; padding: 13px 12px 11px; border-bottom: 3px solid transparent; font-size: 15.5px;
  font-weight: 500; color: var(--grigio); cursor: pointer; min-height: 46px; }
.cm-tab.attiva { color: var(--testo); font-weight: 700; border-bottom-color: var(--giallo); }
.cm-tab .n { font-size: 12.5px; margin-left: 4px; }
.cm-tab .n.rosso { background: var(--rosso); color: #fff; border-radius: 10px; padding: 0 7px; }
.cm-tab-az { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; }
.cm-corpo { padding: 16px 18px 18px; }
.cm-corpo .pannello { border: 0; padding: 0; margin: 0; }
.cm-corpo .pann-testa h2 { display: none; }
.cm-corpo .sez-fabb { margin: 0; padding: 0; border: 0; }
.cm-vuoto { padding: 26px 10px; text-align: center; color: var(--grigio); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cm-vuoto b { color: var(--testo); font-size: 17px; }

/* telefono: niente doppio tasto Nuova, schede scorrevoli */
@media (max-width: 900px) { .solo-pc { display: none !important; } }
@media (max-width: 760px) {
  .cm-tabbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cm-tab { white-space: nowrap; flex: 0 0 auto; }
  .home-scheda { padding: 8px 8px; font-size: 14.5px; }
  .home-filtri { margin-left: 0; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 8px; }
  .home-filtri > * { flex: 0 0 auto; }
}

/* ===== Tabelle ordinabili / filtrabili (griglia.js) ===== */
.griglia-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; min-height: 34px; }
.griglia-conta { color: var(--grigio); font-size: 13.5px; margin-left: auto; }
.griglia-attivi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip.piccolo { font-size: 12.5px; padding: 3px 10px; min-height: 0; }
table.gtab th { padding: 0; white-space: nowrap; }
table.gtab th .gh { display: flex; align-items: stretch; }
table.gtab th .gh-tit { flex: 1; text-align: left; background: none; border: 0; padding: 9px 4px 9px 10px; font: inherit;
  color: inherit; cursor: pointer; display: flex; align-items: center; gap: 4px; min-height: 38px; }
table.gtab th.num .gh-tit { justify-content: flex-end; }
table.gtab th .gh-tit:hover { color: var(--testo); }
table.gtab th span.gh-tit { cursor: default; }
.gh-freccia { font-size: 10px; color: var(--testo); }
table.gtab th .gh-filtro { background: none; border: 0; padding: 0 8px; color: var(--grigio-tenue); font-size: 12px; cursor: pointer; border-radius: 4px; }
table.gtab th .gh-filtro:hover { background: var(--bordo); color: var(--testo); }
table.gtab th .gh-filtro.attivo { background: var(--giallo); color: #1F2429; }
table.gtab th.ordinata, table.gtab th.filtrata { color: var(--testo); }
.griglia-pop { position: absolute; z-index: 60; background: var(--bianco); border: 1px solid var(--bordo-forte); border-radius: 8px;
  box-shadow: var(--ombra-media); padding: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.griglia-pop .gf-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.griglia-pop .gf-ord { display: flex; gap: 4px; }
.griglia-pop input[type=search] { width: 100%; min-height: 36px; border: 1px solid var(--bordo-forte); border-radius: 6px; padding: 0 8px; font: inherit; }
.griglia-pop .gf-rapide { display: flex; gap: 12px; font-size: 13px; }
.griglia-pop .gf-lista { max-height: 260px; overflow: auto; display: flex; flex-direction: column; border-top: 1px solid var(--riga); border-bottom: 1px solid var(--riga); padding: 4px 0; }
.griglia-pop .gf-voce { display: flex; align-items: center; gap: 8px; padding: 5px 2px; cursor: pointer; font-weight: 400; margin: 0; }
.griglia-pop .gf-voce:hover { background: var(--sfondo); }
.griglia-pop .gf-voce span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.griglia-pop .gf-voce small { color: var(--grigio); }
.griglia-pop .gf-voce input { width: 16px; height: 16px; min-height: 0; }
.griglia-pop .gf-piede { display: flex; justify-content: flex-end; gap: 8px; }
.griglia-pop .gf-piede button { min-height: 36px; }

/* home commesse come tabella */
table.gtab.t-commesse td { padding: 10px; vertical-align: middle; }
table.gtab.t-commesse tr.archiviata td { opacity: .6; }
table.gtab.t-commesse .cli { font-weight: 600; }
table.gtab.t-commesse td.c-ogg { color: var(--testo-2); max-width: 260px; }
table.gtab.t-commesse td.c-az, table.gtab.t-commesse th.c-az { width: auto; text-align: left; }
table.gtab.t-commesse td.c-az button { width: 100%; min-width: 150px; white-space: normal; }
table.gtab.t-commesse td.c-data { white-space: nowrap; color: var(--testo-2); }
table.gtab.t-commesse td.c-cli { min-width: 170px; }
table.gtab.t-commesse td.c-prog { min-width: 150px; }
@media (max-width: 1100px) { table.gtab.t-commesse .c-set, table.gtab.t-commesse .c-lav { display: none; } }
@media (max-width: 1000px) { table.gtab.t-commesse .c-data { display: none; } }
@media (max-width: 760px) {
  table.gtab.t-commesse thead { display: block; }
  table.gtab.t-commesse thead tr { display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  table.gtab.t-commesse thead th { display: block; flex: 0 0 auto; border-radius: 6px; border: 1px solid var(--bordo); background: var(--bianco); }
  table.gtab.t-commesse thead th.c-set, table.gtab.t-commesse thead th.c-lav, table.gtab.t-commesse thead th.c-data { display: block; }
  table.gtab.t-commesse, table.gtab.t-commesse tbody { display: block; }
  .griglia-box .tab-scroll:has(table.gtab.t-commesse) { border: 0; background: transparent; overflow: visible; }
  table.gtab.t-commesse tbody tr { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin-top: 10px;
    grid-template-areas: "num cli" "tipo ogg" "stato prog" "az az";
    background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--radius); padding: 12px 14px; }
  table.gtab.t-commesse tbody td { display: block; padding: 0; border: 0; background: transparent !important; max-width: none; }
  table.gtab.t-commesse tbody td.c-num { grid-area: num; } table.gtab.t-commesse tbody td.c-cli { grid-area: cli; }
  table.gtab.t-commesse tbody td.c-tipo { grid-area: tipo; } table.gtab.t-commesse tbody td.c-ogg { grid-area: ogg; }
  table.gtab.t-commesse tbody td.c-stato { grid-area: stato; } table.gtab.t-commesse tbody td.c-prog { grid-area: prog; }
  table.gtab.t-commesse tbody td.c-az { grid-area: az; } table.gtab.t-commesse tbody td.c-az button { min-height: 44px; }
  table.gtab.t-commesse tbody td.c-data, table.gtab.t-commesse tbody td.c-set, table.gtab.t-commesse tbody td.c-lav { display: none; }
}
.home-testa > .chip { min-height: 42px; }

/* tipo commessa */
.tag-tipo { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.tag-tipo.t-spedizione { background: var(--azzurro-tenue); color: var(--azzurro); }
.tag-tipo.t-intervento { background: var(--arancio-tenue); color: var(--arancio-testo); }
.tag-tipo.t-vuoto { background: transparent; color: var(--grigio); border: 1px dashed var(--bordo-forte); text-transform: none; font-weight: 500; }
.cm-oggetto { font-size: 13px; color: var(--grigio); }
.nota { color: var(--grigio); font-size: 12.5px; }

/* modale larga (anteprime) */
.modale.largo { max-width: min(1100px, 96vw); }
.modale-corpo td input[type=checkbox], .gtab input[type=checkbox] { min-height: 0; width: 18px; height: 18px; }
.modale-corpo td .in-num { min-height: 34px; width: 90px; }

/* conferma d'ordine */
.cf-tab { max-height: 56vh; overflow: auto; }
.cf-off td { opacity: .45; }
.cf-pdf { display: flex; flex-direction: column; gap: 2px; min-width: 220px; }
.cf-pdf .cod { font-size: 13px !important; }
.cf-art { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 260px; }
.cf-art .cf-cod { width: 150px; min-height: 34px; }
.cf-cerca { display: flex; gap: 8px; align-items: center; min-width: 280px; } .cf-cerca .ca-box { flex: 1; }
.pill-stato.cf-verde { background: var(--verde-tenue); color: var(--verde-testo); }
.pill-stato.cf-ambra { background: var(--arancio-tenue); color: var(--arancio-testo); }
.pill-stato.cf-rosso { background: var(--rosso-tenue); color: var(--rosso-testo); }
.pill-stato.cf-azzurro { background: var(--azzurro-tenue); color: var(--azzurro); }
.pill-stato.cf-grigio { background: var(--sfondo-2); color: var(--testo-2); }

/* ordini fornitore collegati */
.chip-of { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.of-chip { border: 1px solid var(--bordo-forte); background: var(--bianco); color: var(--testo); border-radius: 4px; padding: 2px 7px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.of-chip:hover { border-color: var(--testo); }
.of-chip small { font-weight: 400; color: var(--grigio); }
.of-chip.ritardo { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.of-chip.ritardo small { color: #fff; }
.of-chip.comm { font-family: var(--font-titoli); }
.ritardo-txt { color: var(--rosso-testo); font-weight: 700; }
.avviso { display: block; width: 100%; text-align: left; border-radius: var(--radius); padding: 12px 14px; margin: 0 0 12px; font-size: 14.5px; border: 1px solid; }
.avviso.rosso { background: var(--rosso-tenue); color: var(--rosso-testo); border-color: var(--rosso); }
.avviso.ambra { background: var(--arancio-tenue); color: var(--arancio-testo); border-color: var(--giallo-scuro); }
.avviso.cliccabile { cursor: pointer; }
.home-scheda.rossa b { background: var(--rosso) !important; color: #fff !important; border-radius: 10px; padding: 0 7px; }
.pannello.of.in-ritardo { border-color: var(--rosso); box-shadow: inset 4px 0 0 var(--rosso); }
.pannello.of.evidenza { outline: 3px solid var(--giallo); }
.tag.ritardo { background: var(--rosso); color: #fff; }
.sb-num.rosso { background: var(--rosso); color: #fff; }

/* packing list */
.pill-stato.pl-ambra { background: var(--arancio-tenue); color: var(--arancio-testo); }
.pl-passi { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; }
.pl-passi li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 20px; background: var(--bianco);
  border: 1px solid var(--bordo); color: var(--grigio); font-size: 14px; }
.pl-passi li b { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sfondo-2); color: var(--testo-2); font-size: 13px; }
.pl-passi li.fatto { color: var(--verde-testo); } .pl-passi li.fatto b { background: var(--verde); color: #fff; }
.pl-passi li.corso { color: var(--testo); font-weight: 700; border-color: var(--testo); } .pl-passi li.corso b { background: var(--giallo); color: #1F2429; }

/* progettazione */
.pill-stato.pg-rosso { background: var(--rosso-tenue); color: var(--rosso-testo); }
.pill-stato.pg-ambra { background: var(--arancio-tenue); color: var(--arancio-testo); }
.pill-stato.pg-azzurro { background: var(--azzurro-tenue); color: var(--azzurro); }
.pill-stato.pg-verde { background: var(--verde-tenue); color: var(--verde-testo); }
.prog-in-riga { margin-left: 8px; } .prog-in-riga .pill-stato { font-size: 11.5px; padding: 1px 7px; }
button.mini.attivo-prog { background: var(--azzurro-tenue); color: var(--azzurro); border-color: var(--azzurro); font-weight: 700; }
.tag.tag-prog { background: var(--azzurro-tenue); color: var(--azzurro); margin-left: 4px; }
.seg.seg-prog { flex-wrap: wrap; } .seg.seg-prog button { flex: 1 1 45%; }
.prog-conta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.prog-box { display: inline-flex; align-items: center; gap: 8px; background: var(--bianco); border: 1px solid var(--bordo); border-radius: 8px; padding: 6px 10px; }
.prog-box b { font-size: 17px; }
.btn-scuro.piccolo, .btn-chiaro.piccolo { min-height: 32px; font-size: 13px; padding: 0 10px; white-space: nowrap; }

/* consegna richiesta */
.cm-box-rich { font-size: 13.5px; color: var(--testo-2); }
.cm-box-rich.tardi { color: var(--rosso-testo); font-weight: 600; }
.ok-txt { color: var(--verde-testo) !important; }
table.gtab.t-commesse td.c-rich { white-space: nowrap; }
@media (max-width: 1300px) { table.gtab.t-commesse .c-rich .lv-prog span { white-space: normal; } }
@media (max-width: 760px) { table.gtab.t-commesse tbody td.c-rich { display: none; } }

/* home commesse compatta: tutte le colonne in una schermata */
@media (min-width: 761px) {
  table.gtab.t-commesse { font-size: 13.5px; }
  table.gtab.t-commesse td { padding: 6px 7px; line-height: 1.25; }
  table.gtab.t-commesse th .gh-tit { padding: 7px 2px 7px 7px; font-size: 12.5px; min-height: 32px; }
  table.gtab.t-commesse th .gh-filtro { padding: 0 5px; }
  table.gtab.t-commesse .lv-num { font-size: 16px; white-space: nowrap; }
  table.gtab.t-commesse td.c-cli { min-width: 120px; }
  table.gtab.t-commesse .cli { font-size: 13.5px; }
  table.gtab.t-commesse td.c-ogg { max-width: 170px; font-size: 13px; }
  table.gtab.t-commesse td.c-set { font-size: 13px; }
  table.gtab.t-commesse td.c-prog { min-width: 110px; }
  table.gtab.t-commesse .lv-prog b { font-size: 13.5px; }
  table.gtab.t-commesse .lv-prog span { font-size: 11.5px; line-height: 1.2; }
  table.gtab.t-commesse .stato-tag { font-size: 12px; padding: 3px 7px; white-space: normal; }
  table.gtab.t-commesse .tag-tipo { font-size: 10.5px; padding: 2px 6px; }
  table.gtab.t-commesse .lv-lav { font-size: 12.5px; gap: 5px; white-space: nowrap; }
  table.gtab.t-commesse .lv-barra { width: 32px; }
  table.gtab.t-commesse td.c-az button { min-width: 108px; min-height: 32px; font-size: 12.5px; padding: 3px 8px; line-height: 1.2; }
  .home-testa { margin-bottom: 10px; }
  .home-testa h1 { font-size: 26px; }
}

.sidebar { overflow-x: hidden; }
.sb-voce { padding: 8px 8px; gap: 8px; }
.sb-voce .et { flex: 1; min-width: 0; line-height: 1.15; }
.sb-num { font-size: 11px; padding: 1px 6px; flex: 0 0 auto; }
@media (min-width: 761px) and (max-width: 1450px) {
  main { padding: 14px 12px 36px; }
  table.gtab.t-commesse td { padding: 6px 5px; }
  table.gtab.t-commesse th .gh-tit { padding: 7px 1px 7px 5px; }
  table.gtab.t-commesse th .gh-filtro { padding: 0 3px; }
  table.gtab.t-commesse td.c-cli { min-width: 100px; }
  table.gtab.t-commesse td.c-prog { min-width: 100px; }
  table.gtab.t-commesse td.c-az button { min-width: 96px; }
  table.gtab.t-commesse td.c-ogg { max-width: 140px; }
}

/* fase d'acquisto */
.fase-acq { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pill-stato.fa-rosso { background: var(--rosso-tenue); color: var(--rosso-testo); }
.pill-stato.fa-ambra { background: #FCE6C8; color: #7A4300; }
.pill-stato.fa-azzurro { background: var(--azzurro-tenue); color: var(--azzurro); }
.pill-stato.fa-giallo { background: var(--arancio-tenue); color: var(--arancio-testo); }
.pill-stato.fa-verde { background: var(--verde-tenue); color: var(--verde-testo); }
.of-chip.rdo { border-style: dashed; }