@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');
/* TMWE 2.0 — design system condiviso (approvato con clienti.html) */
/* ═══════ TASSONOMIA UFFICIALE (v.010807 — leggere prima di aggiungere classi) ═══════
   TAB — un ruolo per sistema, non inventarne altri:
     .rtabs/.rtab  → tab di SEZIONE dentro il RecordDrawer (ux.css) — STANDARD dettaglio record
     .subtabs      → viste/stati nella lista (es. Giacenze: Tutte/Aperte)
     .septabs      → gruppi nella pagina Impostazioni
     .seztabs      → auto-generati da accordion→tab dentro un drawer (motore, non usare a mano)
     .modetg       → toggle Consulta/Modifica (ux.css)
     [legacy]      .tbar = barra azioni per-tab (Express/Cargo storici)
   RIEPILOGO / CAMPI — canonici:
     .frow (ux.css)   → riga etichetta/valore in CONSULTAZIONE (unica definizione)
     .fgrid (ux.css)  → form di MODIFICA (label sopra, input 40px)
     .kchips/.kchip   → tile riepilogo/statistiche
     [legacy specifici Express/Cargo, non estendere]: .opsum .opsrow .dgroups .kvr .hroute
   DRAWER — .rdrawer (ux.css) = STANDARD; .drawer (qui sotto) = wizard/processi SOPRA il record. */
/* INIZIO v.010803n — SISTEMA A 3 TEMI (piano PIANO_TEMA_GRAFICO.md): un set di token,
   tre pelli. data-theme su <html>: soft (default) · glass · dark. */
/* ══ INIZIO v.010822 — TEMA "PORCELLANA" (scelta Luca 08/08): blu inchiostro #22598c ·
   azzurro polvere · cognac. Max 3 colori per maschera: i semantici verde/giallo/rosso
   collassano su azzurro/cognac/terracotta. Bold leggero (600). ══ */
:root, [data-theme="soft"]{
  --bg:#eef1f5; --panel:#ffffff; --ink:#1f2b39; --muted:#68788c; --line:#e2e7ed;
  --brand:#22598c; --brand-soft:#e8f0f7; --ok:#4f83b0; --warn:#8c6748; --err:#a14a2f;
  --nav:#16283a; --nav-ink:#b6c6d6; --r:12px;
  --ink2:#3c4c5e; --ink3:#7d8b9c; --line-soft:#edf0f4; --strip:#f2f5f8; --hover:#f2f7fb;
  --hero:linear-gradient(180deg,#eaf1f7,#ffffff);
  --err-ink:#96502f; --warn-ink:#7a5a3e; --ok-ink:#8c6748;
  --sh1:0 1px 2px rgba(30,50,80,.05), 0 12px 30px rgba(30,50,80,.07);
  --warn-card:#f7f2ea; --ok-card:#eaf1f7; --err-card:#f6ede7;
  --sh2:0 2px 4px rgba(30,50,80,.06), 0 20px 46px rgba(30,50,80,.10);
  --glass-blur:none; --num-font:inherit;
  --t-az:#4f83b0; --t-br:#8c6748; --t-alarm:#a14a2f; --t-neutral:#68788c;
  /* v.011000 — alias mancanti: ogni tema li eredita dal proprio *-card, mai un fallback fisso chiaro */
  --warn-soft:var(--warn-card); --ok-soft:var(--ok-card); --err-soft:var(--err-card);
}
/* v.010822 — "LINO & CIELO" come tema chiaro ALTERNATIVO (richiesta Luca): blu sereno ·
   azzurro chiaro nelle evidenze · terra, su base lino calda. */
[data-theme="lino"]{
  --bg:#f5f3ee; --panel:#fefdfa; --ink:#332e25; --muted:#7d7466; --line:#e6e2d8;
  --brand:#38618b; --brand-soft:#e8f0f6; --ok:#5c88ad; --warn:#8a6b4d; --err:#9c4f2e;
  --nav:#29241c; --nav-ink:#cdc4b4; --r:12px;
  --ink2:#4c4536; --ink3:#8b8172; --line-soft:#eeebe2; --strip:#f4f1ea; --hover:#eef3f8;
  --hero:linear-gradient(180deg,#e8f0f6,#fefdfa);
  --err-ink:#93502c; --warn-ink:#75583c; --ok-ink:#8a6b4d;
  --sh1:0 1px 2px rgba(70,60,40,.05), 0 12px 30px rgba(70,60,40,.07);
  --warn-card:#f4efe4; --ok-card:#e8f0f6; --err-card:#f5ece3;
  --sh2:0 2px 4px rgba(70,60,40,.06), 0 20px 46px rgba(70,60,40,.10);
  --glass-blur:none; --num-font:inherit;
  --t-az:#5c88ad; --t-br:#8a6b4d; --t-alarm:#9c4f2e; --t-neutral:#8b8172;
}
/* ══ FINE v.010822 (temi chiari) ══ */
[data-theme="glass"]{
  --bg:#0e1526; --panel:rgba(255,255,255,.055); --ink:#f2f5fb; --muted:#8b96ad; --line:rgba(255,255,255,.13);
  --brand:#5b7cfa; --brand-soft:rgba(91,124,250,.16); --ok:#4ade80; --warn:#fcd34d; --err:#fb7185;
  --nav:rgba(9,14,26,.82); --nav-ink:#aebad0; --r:16px;
  --ink2:#c7d0e2; --ink3:#8b96ad; --line-soft:rgba(255,255,255,.09); --strip:rgba(255,255,255,.05);
  --hover:rgba(255,255,255,.10); --hero:linear-gradient(135deg,rgba(59,130,246,.14),rgba(139,92,246,.10));
  --err-ink:#fda4af; --warn-ink:#fcd34d; --ok-ink:#86efac;
  --sh1:0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.09);
  --warn-card:rgba(252,211,77,.08); --ok-card:rgba(74,222,128,.08); --err-card:rgba(251,113,133,.08);
  --sh2:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  --glass-blur:blur(22px); --num-font:inherit;
  --t-az:#4f94cd; --t-br:#a87c52; --t-alarm:#c06a42; --t-neutral:#5d6b7d; /* v.010822 */
}
/* v.010822 — dark PORCELLANA: stessi 3 colori (blu #4d8ec4 · azzurro #7fb3d9 · cognac #b08560)
   su base blu-notte; via l'indigo/verde/giallo/rosso e via il monospace (leggibilità). */
[data-theme="dark"]{
  --bg:#141a22; --panel:#1c2430; --ink:#e7edf4; --muted:#8fa0b4; --line:#2a3442;
  --brand:#4d8ec4; --brand-soft:rgba(77,142,196,.15); --ok:#7fb3d9; --warn:#b08560; --err:#c4714a;
  --nav:#10161e; --nav-ink:#9db0c4; --r:12px;
  --ink2:#c6d2de; --ink3:#8fa0b4; --line-soft:#242e3b; --strip:#171e28; --hover:#202a36;
  --hero:linear-gradient(180deg,#1b2530,#171e28);
  --err-ink:#d98a63; --warn-ink:#c99a72; --ok-ink:#b08560;
  --sh1:none; --sh2:0 0 0 1px #2e3a49;
  --warn-card:rgba(176,133,96,.10); --ok-card:rgba(127,179,217,.08); --err-card:rgba(196,113,74,.10);
  --glass-blur:none; --num-font:inherit;
  --t-az:#4f94cd; --t-br:#a87c52; --t-alarm:#c06a42; --t-neutral:#5d6b7d;
}
/* FINE v.010803n (token) */
*{box-sizing:border-box}
/* INIZIO v.011212 — NAV A COMPARSA: via il rail permanente 56px che si apriva da solo
   al passaggio del mouse (Luca 11/09: "eliminami quella merda che mi fa passare ad altre
   pagine da sola"). Ora: hamburger fisso, clic per aprire, sidebar intera, si chiude clic
   su un link o clic fuori. Il body non riserva più spazio: la pagina usa tutta la larghezza. */
body{margin:0;font-family:Inter,"SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     background:var(--bg);color:var(--ink);font-size:13.5px;display:flex;flex-direction:column;min-height:100vh;
     -webkit-font-smoothing:antialiased;letter-spacing:.1px}
#navburger{position:fixed;top:14px;left:14px;z-index:61;width:38px;height:38px;border-radius:10px;
     border:1px solid var(--line-soft,var(--line));background:var(--panel);box-shadow:var(--sh1);
     cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#navburger span{display:block;width:16px;height:2px;background:var(--ink);border-radius:1px}
.nav{position:fixed;left:0;top:0;bottom:0;width:264px;max-width:86vw;background:var(--nav);color:var(--nav-ink);
     padding-bottom:20px;overflow-x:hidden;overflow-y:auto;z-index:60;white-space:nowrap;
     transform:translateX(-100%);transition:transform .2s ease}
body.nav-open .nav{transform:translateX(0);box-shadow:8px 0 44px rgba(8,18,35,.45)}
#navveil{position:fixed;inset:0;background:rgba(8,18,35,.42);opacity:0;pointer-events:none;transition:opacity .15s;z-index:55}
body.nav-open #navveil{opacity:1;pointer-events:auto}
.nav .logo{padding:16px 18px 14px;text-align:left;color:#fff;font-weight:700;font-size:16px;letter-spacing:.4px}
.nav .logo .lmk{display:none}
.nav .logo .lbl small{display:block;font-weight:400;font-size:10.5px;color:#5f7691;margin-top:2px}
.nav .grp{padding:16px 18px 6px;height:auto;font-size:9.5px;letter-spacing:1.6px;color:#4e6076}
.nav a.it{padding:8px 17px;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:11px;border-left:3px solid transparent;
          font-size:13px;color:var(--nav-ink);text-decoration:none}
.nav a.it .ico{width:26px;text-align:center;font-size:16px;flex:none}
.nav a.it:hover{background:#182a41}
.nav a.it.on{background:#15325c;border-left-color:var(--brand);color:#fff}
.nav .badge{margin-left:auto;background:#e6a700;color:#101c2c;font-size:10.5px;font-weight:700;border-radius:10px;padding:1px 7px}
#pageTag{position:fixed;right:14px;bottom:12px;z-index:40;background:var(--panel);
     border:1px solid var(--line-soft,var(--line));border-radius:20px;padding:5px 12px;
     font-size:11px;font-weight:700;color:var(--muted,var(--nav-ink));box-shadow:var(--sh1);pointer-events:none}
/* FINE v.011212 */
/* SIDEBAR pagina → BARRA ORIZZONTALE in alto (v.010801d): filtri/comandi immediati sopra l'elenco */
.side{width:auto;background:var(--panel);border-bottom:1px solid var(--line);
      padding:9px 22px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 18px;
      position:sticky;top:0;z-index:30;overflow:visible}
.side h3{display:none}
.side>.cmd{display:flex;flex-direction:row;gap:7px}
.side>.fgrp{display:flex;flex-direction:row;align-items:center;gap:7px}
.side>.fgrp>label{white-space:nowrap}
.side .card{display:none}
.cmd{display:flex;flex-direction:column;gap:7px}
button{font:inherit;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:8px 12px;
       cursor:pointer;text-align:left;display:flex;align-items:center;gap:8px;color:var(--ink)}
button:hover{border-color:#c8d4e2;background:var(--hover)}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;justify-content:center}
button.primary:hover{filter:brightness(1.07)}
button.ghost{border-style:dashed;color:var(--muted)}
.fgrp{display:flex;flex-direction:column;gap:4px}
.fgrp label{font-size:11px;color:var(--muted)}
.side input,.side select{font:inherit;width:auto;min-width:150px;padding:7px 10px;border:1px solid var(--line);
      border-radius:8px;background:var(--panel);outline:none;color:var(--ink)}
.side input:focus,.side select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(23,92,211,.1)}
.chiprow{display:flex;flex-wrap:wrap;gap:5px}
/* INIZIO v.010803d — GERARCHIA TAB CHIARA (Luca 03/08): il menu PRIMARIO (sezioni/gruppi) è forte,
   con voce attiva a PILLOLA PIENA; i menu figli sono visivamente subordinati (più piccoli, sottolineatura). */
.septabs{display:flex;gap:6px;padding:8px 22px;background:var(--strip);border-bottom:2px solid var(--line);
         overflow-x:auto;position:sticky;top:0;z-index:19;white-space:nowrap;align-items:center}
.septabs a{padding:8px 16px;font-size:13px;color:var(--ink2);text-decoration:none;border-radius:9px;
           font-weight:700;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent}
.septabs a:hover{color:var(--brand);background:rgba(23,92,211,.08)}
.septabs a.on{color:#fff;background:var(--brand);box-shadow:0 3px 10px rgba(23,92,211,.30)}
.septabs a .cnt{font-size:10.5px;background:rgba(23,92,211,.12);color:var(--brand);border-radius:10px;padding:0 6px}
.septabs a.on .cnt{background:rgba(255,255,255,.25);color:#fff}
/* menu FIGLIO orizzontale (dove serve): riga più leggera, voce attiva solo sottolineata */
.subtabs{display:flex;gap:2px;padding:0 22px;background:var(--panel);border-bottom:1px solid var(--line);
         overflow-x:auto;white-space:nowrap}
.subtabs a{padding:8px 12px;font-size:12px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;font-weight:500}
.subtabs a:hover{color:var(--ink)}
.subtabs a.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:700}
/* v.010862 — MASTER-DETAIL TABS (pattern unico di sistema): rail VERTICALE soggetti a sinistra + tab ORIZZONTALI sezioni in alto. Usato in permessi utente, supplementi servizi, ecc. */
.mdt{display:flex;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.mdt-rail{flex:0 0 210px;max-width:230px;border-right:1px solid var(--line);overflow-y:auto;max-height:62vh}
.mdt-rail button{display:block;width:100%;text-align:left;padding:9px 12px;font-size:12px;background:transparent;border:0;border-left:3px solid transparent;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.mdt-rail button:hover{background:rgba(127,127,127,.08)}
.mdt-rail button.on{border-left-color:var(--brand);background:rgba(99,102,241,.12);font-weight:700;color:var(--brand)}
.mdt-rail button .sub{display:block;font-size:10px;color:var(--muted);font-weight:400;overflow:hidden;text-overflow:ellipsis}
.mdt-rail button.on .sub{color:var(--brand)}
.mdt-main{flex:1;min-width:0;display:flex;flex-direction:column}
.mdt-htabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;background:var(--panel)}
.mdt-htabs button{padding:9px 14px;font-size:12px;color:var(--muted);background:transparent;border:0;border-bottom:2px solid transparent;font-weight:600;cursor:pointer}
.mdt-htabs button:hover{color:var(--ink)}
.mdt-htabs button.on{color:var(--brand);border-bottom-color:var(--brand)}
.mdt-body{padding:14px 16px;overflow:auto}
@media(max-width:720px){.mdt{flex-direction:column}.mdt-rail{flex-basis:auto;max-width:none;max-height:140px;border-right:0;border-bottom:1px solid var(--line);display:flex;overflow-x:auto}.mdt-rail button{border-left:0;border-bottom:3px solid transparent;width:auto}.mdt-rail button.on{border-left:0;border-bottom-color:var(--brand)}}
/* v.010803i — SISTEMA UNICO TAB: barra azioni (stessa posizione in ogni tab), chips dato, badge */
.tbar{display:flex;align-items:center;gap:12px;justify-content:space-between;background:var(--panel);
      border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 12px;flex-wrap:wrap}
.tbar .tdesc{font-size:12px;color:var(--muted)}
.tbar .tacts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.tbar .tprim{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important}
/* v.010803k — GRIGLIA RIGIDA e CONTRASTO ALTO (Luca: "allineamenti inesistenti, non si legge col grigio"):
   colonne allineate a griglia fissa, etichette scure leggibili, valori quasi neri e pesanti */
.kchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px 22px;align-items:start}
.kchip{min-width:0}
.kchip .kl{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.kchip .kv{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.25}
.kchip .kv.strong{font-size:15px;font-weight:800;color:var(--brand)}
.kbadge{border-radius:14px;padding:4px 12px;font-size:12px;font-weight:700;display:inline-block}
/* v.010803h — riga SELEZIONATA nell'elenco (record aperto nel pannello): sfondo + bordo sinistro */
.tmwe tr.rowsel td{background:rgba(23,92,211,.10)!important}
.tmwe tr.rowsel td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
/* v.010803g — TAB SEZIONI dentro il pannello di dettaglio (ex accordion) */
.seztabs{display:flex;flex-wrap:wrap;gap:4px;position:sticky;top:0;z-index:6;background:var(--bg);
         padding:10px 0 8px;border-bottom:1px solid var(--line);margin:0 0 14px}
.seztabs a{padding:7px 13px;font-size:12.5px;border-radius:8px;cursor:pointer;color:var(--ink2);
           font-weight:600;border:1px solid var(--line);background:var(--panel);display:inline-flex;align-items:center;gap:6px}
.seztabs a:hover{border-color:var(--brand);color:var(--brand)}
.seztabs a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.seztabs a .scnt{font-size:10px;background:rgba(23,92,211,.12);color:var(--brand);border-radius:9px;padding:0 6px}
.seztabs a.on .scnt{background:rgba(255,255,255,.25);color:#fff}
/* v.010803g — RIEPILOGO OPERATIVO in testa al dettaglio: cliente, rotta con bandiere, date evidenziate */
.opsum{background:var(--hero);border:1px solid var(--line);border-radius:12px;
       padding:12px 16px;margin-bottom:12px;display:flex;flex-direction:column;gap:5px}
.opsum .l1{font-size:15px;font-weight:800;color:var(--ink)}
.opsum .l2{font-size:14px;font-weight:700}
.opsum .l2 .fl{font-size:17px}
.opsum .l3{font-size:12px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:4px 14px}
.opsum .hd{color:var(--brand);font-weight:700}
.opsum .warnb{background:var(--err-card);color:var(--err-ink);border-radius:9px;padding:1px 8px;font-weight:700;font-size:11px}
/* v.010803e — barra FILTRI DA CLICK: striscia RISERVATA sopra l'elenco, a sinistra.
   Altezza SEMPRE occupata (anche vuota) → i filtri compaiono/spariscono senza spostare nulla. */
.fltbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:30px;margin:0 0 6px;
        font-size:12px;justify-content:flex-start}
.fltbar .flthint{color:#b8c4d6;font-size:11px}
/* FINE v.010803d */
/* INIZIO v.010801 — chip filtro glassy + più leggibili (filtri sempre visibili e veloci) */
.chip{font-size:11.5px;border:1px solid rgba(23,92,211,.18);border-radius:20px;padding:4px 11px;cursor:pointer;
  background:rgba(255,255,255,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#546276;transition:all .12s}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:rgba(23,92,211,.14);border-color:var(--brand);color:var(--brand);font-weight:700}
/* FINE v.010801 */
.side .reset{font-size:11px;color:var(--brand);cursor:pointer;border:none;background:none;padding:0;text-align:left}
/* MAIN */
main{flex:1;min-width:0;display:flex;flex-direction:column}
/* v.010807 — CONSOLIDAMENTO (Fase 0): header.top/.wrap/.kpi erano ridefiniti in 3 blocchi
   (base + v.010803o + v.010805a). Qui il BLOCCO CANONICO UNICO coi valori finali effettivi
   della cascata; gli override sparsi in v.010803o/v.010805a sono stati rimossi. */
header.top{padding:10px 22px 8px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:var(--panel)}
header.top h1{font-size:18px;margin:0;font-weight:900;letter-spacing:-.4px}
header.top .sub{color:var(--muted);font-size:11.5px}
.kpis{margin-left:auto;display:flex;gap:16px}
.kpi{text-align:right}.kpi b{display:block;font-size:22px;font-weight:900}
.kpi span{font-size:9.5px;color:var(--muted);letter-spacing:.08em;font-weight:800}
.wrap{padding:20px 26px;overflow:auto}
/* TABELLA */
table.tmwe{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.tmwe thead th{position:sticky;top:0;background:var(--panel);text-align:left;font-size:10.5px;letter-spacing:.8px;
   color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;white-space:nowrap;z-index:2}
table.tmwe thead th:hover{color:var(--brand)}
table.tmwe thead th .dir{font-size:9px;margin-left:4px;color:var(--brand)}
/* INIZIO v.010801 — densità righe (meno spazio verticale, operativo denso) */
/* v.010805x — cap larghezza celle: una sola regola universale contro l'overflow
   orizzontale (nomi/indirizzi lunghi spingevano l'ultima colonna fuori schermo su
   clienti/cargo). max-width + ellissi sostituiscono le troncature JS a 35 char. */
table.tmwe tbody td{padding:6px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap;font-size:12.5px;max-width:280px;overflow:hidden;text-overflow:ellipsis}
/* FINE v.010801 */
table.tmwe tbody tr{cursor:pointer}
table.tmwe tbody tr:hover td{background:#f4f8ff}
.flag{font-size:15px;margin-right:6px;vertical-align:-2px}
/* INIZIO v.010801 — badge glassmorphism (trasparenza + blur) + palette ristretta (blu brand + neutro; verde/rosso solo per stato) */
.tag{font-size:10.5px;border-radius:7px;padding:2px 8px;font-weight:600;letter-spacing:.2px;white-space:nowrap;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.5)}
.tg-green{background:rgba(18,145,90,.12);color:var(--ok);border-color:rgba(18,145,90,.18)}
.tg-red{background:rgba(209,63,63,.12);color:var(--err);border-color:rgba(209,63,63,.18)}
/* le altre categorie collassano su blu-brand o neutro traslucido (max 2 colori) */
.tg-blue,.tg-cyan,.tg-purple{background:rgba(23,92,211,.10);color:#2a4fb0;border-color:rgba(23,92,211,.16)}
.tg-yellow{background:rgba(23,92,211,.07);color:#3a5a94;border-color:rgba(23,92,211,.12)}
.tg-gray{background:rgba(90,107,127,.10);color:#546276;border-color:rgba(90,107,127,.14)}
/* FINE v.010801 */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.dot.ok{background:var(--ok)} .dot.blk{background:var(--err)} .dot.wr{background:var(--warn)}
.money{font-variant-numeric:tabular-nums} .neg{color:var(--err);font-weight:600}
.empty{padding:40px;text-align:center;color:var(--muted)}
/* DRAWER */
.drawer{position:fixed;top:0;right:-960px;width:940px;max-width:96vw;height:100vh;background:var(--bg);
        box-shadow:-18px 0 40px rgba(10,25,50,.18);transition:right .35s cubic-bezier(.2,.7,.3,1);z-index:64;display:flex;flex-direction:column} /* v.010803t: drawer strumento SOPRA il record (rdrawer=60) */
.drawer.open{right:0}
.dhead{background:var(--panel);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:12px}
.dhead h2{margin:0;font-size:16px}
.dhead .x{margin-left:auto;cursor:pointer;font-size:20px;color:var(--muted);border:none;background:none;padding:4px 8px}
/* INIZIO v.010801 — drawer più compatto (meno dispersione a maschera aperta) */
.dbody{padding:12px 18px;overflow-y:auto;display:grid;gap:9px}
/* FINE v.010801 */
/* FLIP */
.flipwrap{perspective:1500px}
.flip{position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.flip.flipped{transform:rotateY(180deg)}
.faceP{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;backface-visibility:hidden}
.faceB{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;overflow:auto;
       background:#0f1b2b;color:#c3d2e3;border-radius:var(--r);padding:14px 16px;font-size:11.5px}
.flip .faceB{pointer-events:none}.flip.flipped .faceB{pointer-events:auto}.flip.flipped .faceP{pointer-events:none}
.faceB table{background:transparent;border:none;border-collapse:collapse}
.faceB td,.faceB th{border-bottom:1px solid #22364f;color:#c3d2e3;padding:4px 8px;font-size:11px;text-align:left}
.fliptg{margin-left:auto;font-size:10.5px;color:var(--muted);cursor:pointer;border:1px dashed var(--line);border-radius:6px;padding:2px 8px;white-space:nowrap}
.fliptg:hover{color:var(--brand)}
.badge-l{font-size:10px;background:#fdf3d9;color:var(--warn-ink);border-radius:6px;padding:2px 7px;font-weight:700}
/* SEZIONI a comparsa */
details.sez{border:1px solid var(--line);border-radius:10px;background:var(--panel)}
details.sez summary{cursor:pointer;padding:10px 14px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px;list-style:none}
details.sez summary::before{content:"▸";color:var(--muted);transition:transform .18s}
details.sez[open] summary::before{transform:rotate(90deg)}
details.sez .cnt{margin-left:auto;font-size:10.5px;color:var(--muted);background:#f0f3f8;border-radius:10px;padding:1px 8px}
details.sez .cnt.filled{background:var(--ok-card);color:var(--ok)}
/* INIZIO v.010801 — griglia campi più fitta (colonne più strette, meno gap) */
.grid{padding:2px 14px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
/* FINE v.010801 */
.fld{display:flex;flex-direction:column;gap:3px}
.fld label{font-size:10.5px;color:var(--muted)} .fld label b{color:var(--err)}
.fld input,.fld select,.fld textarea{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);outline:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(23,92,211,.1)}
.fld input.err{border-color:var(--err);background:var(--err-card)}
.fld input[readonly]{background:var(--strip);color:var(--muted)}
.savebar{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding:12px 0 4px;display:flex;gap:8px;justify-content:flex-end}
/* autosave dot */
.save-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:#c6cfda;transition:background .2s}
.save-dot.saving{background:var(--warn)} .save-dot.saved{background:var(--ok)} .save-dot.error{background:var(--err)}
/* griglia autosave (settings) */
table.gridset{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:12.5px}
table.gridset th{background:var(--panel);text-align:left;font-size:10.5px;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
table.gridset td{padding:5px 8px;border-bottom:1px solid var(--line-soft)}
table.gridset input,table.gridset select{font:inherit;font-size:12px;padding:5px 7px;border:1px solid transparent;border-radius:6px;background:transparent;width:100%}
table.gridset input:hover,table.gridset select:hover{border-color:var(--line);background:var(--panel)}
table.gridset input:focus,table.gridset select:focus{border-color:var(--brand);background:var(--panel);outline:none}
/* card generiche */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card h2{font-size:14px;margin:0 0 10px}
/* wizard steps */
.steps-nav{display:flex;gap:6px;margin-bottom:12px}
.step{flex:1;text-align:center;font-size:11px;padding:7px;border-radius:8px;background:var(--line-soft);color:var(--muted)}
.step.on{background:var(--brand);color:#fff;font-weight:600}
.step.done{background:var(--ok-card);color:var(--ok)}
footer.note{padding:10px 22px;color:var(--muted);font-size:11px}
/* v.011212: rimossa @media(max-width:1150px){.nav{display:none}} -- l'hamburger funziona a ogni larghezza, non serve piu' nascondere la sidebar */
/* v.010803m — bottoni professionali uniformi: stessa altezza, icone SVG allineate, niente emoji */
.tbar .hbtn,.rhead .hbtn{display:inline-flex;align-items:center;gap:5px;height:30px;font-weight:600}
.tbar .hbtn svg,.rhead .hbtn svg{flex:0 0 auto}

/* ══════ INIZIO v.010803n — LAYER EFFETTI PER TEMA (append: non tocca le regole base) ══════ */
/* — AURORA GLASS — */
[data-theme="glass"] body{position:relative}
[data-theme="glass"] body::before{content:'';position:fixed;width:640px;height:640px;border-radius:50%;
  filter:blur(110px);opacity:.45;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,#2563eb 0%,transparent 65%);top:-260px;left:-100px;
  animation:tmwefl1 16s ease-in-out infinite alternate}
[data-theme="glass"] body::after{content:'';position:fixed;width:560px;height:560px;border-radius:50%;
  filter:blur(120px);opacity:.35;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,#8b5cf6 0%,transparent 65%);bottom:-240px;right:-120px;
  animation:tmwefl2 18s ease-in-out infinite alternate}
@keyframes tmwefl1{to{transform:translate(90px,70px)}}
@keyframes tmwefl2{to{transform:translate(-80px,-60px)}}
[data-theme="glass"] .card,[data-theme="glass"] .acc,[data-theme="glass"] .tbar,
[data-theme="glass"] .ccard,[data-theme="glass"] .drawer,[data-theme="glass"] .rdrawer,
[data-theme="glass"] .side,[data-theme="glass"] .rhead,[data-theme="glass"] .fltbar{
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
[data-theme="glass"] .card,[data-theme="glass"] .acc,[data-theme="glass"] .ccard{box-shadow:var(--sh1)}
[data-theme="glass"] .septabs a.on,[data-theme="glass"] .htabs a.on,[data-theme="glass"] button.primary,
[data-theme="glass"] .tbar .tprim{background:linear-gradient(135deg,#3b82f6,#6366f1)!important;
  box-shadow:0 8px 24px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.25)!important}
[data-theme="glass"] .drawer,[data-theme="glass"] .rdrawer{background:rgba(14,21,38,.88)}
[data-theme="glass"] .tmwe th{background:rgba(255,255,255,.05)}
[data-theme="glass"] .tmwe td,[data-theme="glass"] .tmwe th{border-color:var(--line-soft)}
[data-theme="glass"] .tmwe tbody tr:hover td{background:rgba(255,255,255,.06)}
[data-theme="glass"] input,[data-theme="glass"] select,[data-theme="glass"] textarea{
  background:rgba(255,255,255,.07);color:var(--ink);border-color:var(--line)}
/* — DARK PRECISION — */
[data-theme="dark"] .card,[data-theme="dark"] .acc{box-shadow:none;border-color:var(--line)}
[data-theme="dark"] .tmwe th{background:#0e1015;color:var(--ink3)}
[data-theme="dark"] .tmwe td,[data-theme="dark"] .tmwe th{border-color:var(--line-soft)}
[data-theme="dark"] .tmwe tbody tr:hover td{background:var(--hover)}
[data-theme="dark"] .money,[data-theme="dark"] .kchip .kv,[data-theme="dark"] .d-kv{font-family:var(--num-font)}
[data-theme="dark"] .kchip .kv.strong{color:#a5b4fc;text-shadow:0 0 22px rgba(129,140,248,.45)}
[data-theme="dark"] button.primary,[data-theme="dark"] .tbar .tprim,[data-theme="dark"] .septabs a.on,
[data-theme="dark"] .htabs a.on{background:linear-gradient(180deg,#6366f1,#4f46e5)!important;
  box-shadow:0 0 0 1px rgba(99,102,241,.4), 0 4px 20px rgba(79,70,229,.45)!important}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:#15171f;color:var(--ink);border-color:#262b38}
[data-theme="dark"] .rowopen{background:#15171f!important;border-color:#262b38!important}
[data-theme="dark"] .opsum{background:var(--hero);border-color:var(--line)}
/* tag pastello: nei temi scuri diventano traslucidi (leggibili su fondo scuro) */
[data-theme="dark"] .tag,[data-theme="glass"] .tag{filter:none;border:1px solid transparent}
[data-theme="dark"] .tag.tg-green,[data-theme="glass"] .tag.tg-green{background:rgba(34,197,94,.14);color:#86efac;border-color:rgba(134,239,172,.3)}
[data-theme="dark"] .tag.tg-blue,[data-theme="glass"] .tag.tg-blue{background:rgba(59,130,246,.14);color:#93c5fd;border-color:rgba(147,197,253,.3)}
[data-theme="dark"] .tag.tg-cyan,[data-theme="glass"] .tag.tg-cyan{background:rgba(6,182,212,.14);color:#67e8f9;border-color:rgba(103,232,249,.3)}
[data-theme="dark"] .tag.tg-red,[data-theme="glass"] .tag.tg-red{background:rgba(244,63,94,.14);color:#fda4af;border-color:rgba(253,164,175,.3)}
[data-theme="dark"] .tag.tg-yellow,[data-theme="glass"] .tag.tg-yellow{background:rgba(245,158,11,.14);color:#fcd34d;border-color:rgba(252,211,77,.3)}
[data-theme="dark"] .tag.tg-gray,[data-theme="glass"] .tag.tg-gray{background:rgba(148,163,184,.14);color:#cbd5e1;border-color:rgba(203,213,225,.25)}
/* switcher tema nel nav */
.themesw{margin-top:auto;padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:6px}
.themesw{flex-direction:row;justify-content:center;padding:12px 16px}
.themesw button{width:30px;height:30px;border-radius:50%;padding:0;justify-content:center;font-size:12px;
  border:2px solid transparent;cursor:pointer}
.themesw button.on{border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.4)}
.themesw .t-soft{background:linear-gradient(135deg,#fff,#dbe6f5)}
.themesw .t-glass{background:linear-gradient(135deg,#3b82f6,#8b5cf6)}
.themesw .t-dark{background:linear-gradient(135deg,#15171f,#312e81)}
/* ══════ FINE v.010803n ══════ */

/* ══════ INIZIO v.010803o — RESTYLE BASE PREMIUM (il default deve sembrare la Proposta 3, non il vecchio) ══════ */
.card,.acc{border-radius:16px;box-shadow:var(--sh1);border-color:var(--line-soft)}
.card:hover,.acc:hover{box-shadow:var(--sh2)}
/* v.010807 — header.top/.wrap/.kpi spostati nel blocco canonico (vedi sopra) */
.side{box-shadow:0 1px 0 var(--line), 0 6px 18px rgba(16,24,40,.04)}
/* tabella: righe ariose, testata micro-maiuscola, hover pieno */
.tmwe th{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);
  padding:11px 12px;border-bottom:2px solid var(--line)}
.tmwe td{padding:11px 12px;font-size:13px;border-bottom:1px solid var(--line-soft)}
.tmwe tbody tr{transition:background .12s}
.tmwe tbody tr:hover td{background:var(--brand-soft)}
.tmwe .money{font-weight:700;font-variant-numeric:tabular-nums}
/* bottoni: raggio e peso coerenti col linguaggio premium */
button{border-radius:11px;font-weight:600;transition:.15s}
button:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(16,24,40,.08)}
button.primary{box-shadow:0 6px 18px rgba(29,90,239,.28), inset 0 1px 0 rgba(255,255,255,.22)}
button.primary:hover{box-shadow:0 10px 26px rgba(29,90,239,.4)}
.chip{border-radius:999px;font-weight:600}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 3px 10px rgba(29,90,239,.3)}
/* drawer: header più solido, corpo arioso */
.rhead{box-shadow:0 6px 18px rgba(16,24,40,.05)}
.rbody{padding:18px 24px}
/* pillole tab primari leggermente più grandi (respiro) */
.septabs a,.htabs a{padding:9px 18px}
/* ══════ FINE v.010803o ══════ */

/* ══════ INIZIO v.010803p — COMPONENTI RISTRUTTURATI PER TEMA (non solo colori) ══════ */
/* HERO ROTTA (classi condivise: il markup è unico, la FORMA cambia col tema) */
.hroute{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.haddr{flex:1;min-width:210px}
.haddr .hl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.haddr .hcity{font-size:24px;font-weight:800;letter-spacing:-.4px;color:var(--ink);line-height:1.15}
.haddr .hcity small{font-size:12px;font-weight:600;color:var(--ink3);margin-left:6px}
.haddr .hname{font-size:13px;font-weight:700;color:var(--ink2);margin-top:4px}
.haddr .hmeta{font-size:12px;color:var(--ink3);margin-top:2px;line-height:1.55}
.harrow{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:var(--brand);background:var(--brand-soft);flex:0 0 auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 14px rgba(29,90,239,.15)}
/* glass: la freccia è il cerchio luminoso della Proposta 1 */
[data-theme="glass"] .harrow{border-radius:50%;color:#93c5fd;border:1px solid rgba(147,197,253,.3);
  background:linear-gradient(135deg,rgba(59,130,246,.28),rgba(139,92,246,.28));box-shadow:0 0 34px rgba(99,102,241,.35)}
/* dark: la freccia diventa la LINEA DI ROTTA animata della Proposta 2 */
[data-theme="dark"] .harrow{width:110px;height:24px;border-radius:0;background:transparent;box-shadow:none;position:relative;color:transparent}
[data-theme="dark"] .harrow::before{content:'';position:absolute;left:0;right:0;top:11px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#312e81,#6366f1,#312e81)}
[data-theme="dark"] .harrow::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:#a5b4fc;
  top:8px;box-shadow:0 0 12px #818cf8;animation:tmwedash 2.4s linear infinite}
@keyframes tmwedash{from{left:0}to{left:102px}}
/* GRIGLIA DATI: in dark diventa la tabella-strumento a CELLE BORDATE della Proposta 2 */
[data-theme="dark"] .kchips{gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
[data-theme="dark"] .kchip{padding:13px 16px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:#0e1015;transition:.15s}
[data-theme="dark"] .kchip:hover{background:#12141c}
[data-theme="dark"] .kchip .kl{font-size:9.5px;letter-spacing:.12em;color:#5d6880}
/* glass: chips su card vetro con valori luminosi */
[data-theme="glass"] .kchip .kv.strong{background:linear-gradient(90deg,#7dd3fc,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
/* CARD EVIDENZA (istruzioni cliente / lock): leggibile in TUTTI i temi */
.evid{border-left:4px solid var(--warn);background:var(--warn-card)!important}
.evid h2,.evid .kl{color:var(--warn-ink)}
/* ══════ FINE v.010803p ══════ */

/* ══════ INIZIO v.010803q — SPINTA FINALE PER TEMA: elenchi, header record, cockpit ══════ */
/* DARK — elenchi da terminale: densi, numeri mono, testata scura incollata */
[data-theme="dark"] .tmwe{border-collapse:collapse}
[data-theme="dark"] .tmwe th{background:#0b0d12;color:#5d6880;letter-spacing:.12em;border-bottom:1px solid #262b38;position:sticky;top:0}
[data-theme="dark"] .tmwe td{padding:9px 12px;font-size:12.5px}
[data-theme="dark"] .tmwe td:first-child,[data-theme="dark"] .tmwe .money,
[data-theme="dark"] .tmwe td[data-k="id"],[data-theme="dark"] .tmwe td[data-k="AWB_forn"]{font-family:var(--num-font)}
[data-theme="dark"] .tmwe tbody tr:hover td{background:#141722}
[data-theme="dark"] .tmwe tr.rowsel td{background:rgba(99,102,241,.14)!important}
[data-theme="dark"] .tmwe tr.rowsel td:first-child{box-shadow:inset 3px 0 0 #6366f1}
/* DARK — header record: superficie notte, id mono, pillole indaco */
[data-theme="dark"] .rhead{background:#0d0f14;border-bottom:1px solid #1e222c;box-shadow:none}
[data-theme="dark"] .rhead .l1 b{font-family:var(--num-font);letter-spacing:-.5px}
[data-theme="dark"] .modetg button.on{background:#1c2030;color:#fff}
[data-theme="dark"] .rtab.on{color:#a5b4fc;border-color:#6366f1}
/* DARK — cockpit: card come celle strumento, numeri che brillano */
[data-theme="dark"] .ccard{background:linear-gradient(180deg,#101218,#0d0f14);border-color:#1e222c}
[data-theme="dark"] .ccard:hover{border-color:#2c3242;box-shadow:0 0 24px rgba(99,102,241,.12)}
[data-theme="dark"] .ccard .num{font-family:var(--num-font);text-shadow:0 0 22px rgba(129,140,248,.35)}
[data-theme="dark"] .kpi b{font-family:var(--num-font)}
/* DARK — sotto-tab sezioni: pillole scure con bordo, attiva indaco */
[data-theme="dark"] .seztabs{background:var(--bg)}
[data-theme="dark"] .seztabs a{background:#15171f;border-color:#262b38;color:#c8cede}
[data-theme="dark"] .seztabs a.on{background:linear-gradient(180deg,#6366f1,#4f46e5);border-color:#6366f1}
/* DARK — scrollbar coerente */
[data-theme="dark"] ::-webkit-scrollbar{width:10px;height:10px}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#262b38;border-radius:6px}
[data-theme="dark"] ::-webkit-scrollbar-track{background:#0a0b0f}
/* GLASS — elenchi su vetro: la tabella vive dentro una lastra */
[data-theme="glass"] .wrap>.tmwe,[data-theme="glass"] .wrap table.tmwe{
  background:rgba(255,255,255,.045);border-radius:16px;overflow:hidden;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 24px 60px rgba(0,0,0,.30)}
[data-theme="glass"] .tmwe th{background:rgba(255,255,255,.06);color:#9aa5bc}
[data-theme="glass"] .tmwe tr.rowsel td{background:rgba(91,124,250,.18)!important}
[data-theme="glass"] .rhead{background:rgba(14,21,38,.85);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--line)}
[data-theme="glass"] .ccard .num{text-shadow:0 0 26px rgba(125,211,252,.4)}
[data-theme="glass"] .rtab.on{color:#93c5fd;border-color:#5b7cfa}
/* GLASS+DARK — hbtn/rowopen sul fondo scuro */
[data-theme="glass"] .hbtn,[data-theme="glass"] .rowopen{background:rgba(255,255,255,.07)!important;border-color:var(--line)!important;color:var(--ink2)!important}
[data-theme="glass"] .fltbar{background:rgba(14,21,38,.9);border-color:var(--line)}
[data-theme="dark"] .fltbar{background:transparent}
/* KPI header dark/glass leggibili */
[data-theme="dark"] header.top .sub,[data-theme="glass"] header.top .sub{color:var(--ink3)}
/* ══════ FINE v.010803q ══════ */

/* ══════ INIZIO v.010803r — CONTRASTI GARANTITI SU TUTTI I TEMI (verifica Luca 03/08) ══════ */
/* id record su UNA riga (non spezzare il numero) */
.rhead .l1 b{white-space:nowrap}
/* chips filtro: sfondo chiaro cablato → per-tema, testo SEMPRE a contrasto */
[data-theme="dark"] .chip,[data-theme="glass"] .chip{background:rgba(255,255,255,.07);color:var(--ink2);border-color:var(--line)}
[data-theme="dark"] .chip:hover,[data-theme="glass"] .chip:hover{color:var(--ink)}
/* regola d'oro bottoni: se lo sfondo è pieno (brand/ok/err/warn) il testo è BIANCO, sempre */
button.primary,.tbar .tprim,.septabs a.on,.htabs a.on,.seztabs a.on,.chip.on,
[data-theme="dark"] .seztabs a.on{color:#fff!important}
/* bottoni con sfondo ok/verde (es. Segna controllata) */
button[style*="background:var(--ok-ink)"],.hbtn[style*="background:var(--ok-ink)"]{color:#fff!important}
/* select/input dei form dentro side e drawer nei temi scuri */
[data-theme="dark"] .side input,[data-theme="dark"] .side select,
[data-theme="glass"] .side input,[data-theme="glass"] .side select{background:rgba(255,255,255,.07);color:var(--ink);border-color:var(--line)}
/* vrail (cestini verticali) leggibile nei temi scuri */
[data-theme="dark"] #vrail a,[data-theme="glass"] #vrail a{color:var(--ink3)}
[data-theme="dark"] #vrail a[style*="background"],[data-theme="glass"] #vrail a[style*="background"]{color:var(--brand)}
/* empty-state e note piè pagina */
[data-theme="dark"] .empty,[data-theme="glass"] .empty,[data-theme="dark"] .note,[data-theme="glass"] .note{color:var(--ink3)}
/* ══════ FINE v.010803r ══════ */

/* ══════ INIZIO v.010803s — LAYOUT DENSO DEL RIEPILOGO (scaletta di importanza) ══════ */
.opsrow{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.opb{padding:6px 12px;font-size:12px;font-weight:600;border-radius:9px;height:30px;display:inline-flex;
     align-items:center;gap:5px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);cursor:pointer}
.opb:hover{border-color:var(--brand);color:var(--brand)}
.opb.pri{background:var(--brand);border-color:var(--brand);color:#fff!important}
.opb.ok{background:var(--ok);border-color:var(--ok);color:#fff!important}
.slimcard{padding:14px 18px!important;margin-bottom:10px!important}
.hroute.compact .hcity{font-size:19px}
.hroute.compact .harrow{width:42px;height:42px;font-size:17px}
[data-theme="dark"] .hroute.compact .harrow{width:90px;height:22px}
.dgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:4px 26px}
.dgt{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);
     border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:5px}
.kvr{display:flex;justify-content:space-between;gap:10px;padding:2.5px 0;font-size:12.5px;align-items:baseline}
.kvr span{color:var(--ink3);flex:0 0 auto}
.kvr b{color:var(--ink);text-align:right;font-weight:700}
.kvr b.hi{color:var(--brand)}
[data-theme="dark"] .kvr b{font-family:var(--num-font)}
/* v.010807 — .frow UNIFICATA: definizione canonica UNICA in ux.css (label 170px uppercase,
   valore forte). Rimossa la copia divergente che qui era in tmwe.css. ux.css ora è caricato
   su tutte le maschere, quindi .frow rende identica ovunque (standard Clienti/Express). */
.alrow{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center}
.alrow .kbadge{padding:3px 10px;font-size:11px}
.notein{font-size:11.5px;color:var(--warn-ink);background:var(--warn-card);border-radius:8px;padding:3px 10px}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.twocol .card{margin-bottom:0!important}
@media(max-width:980px){.twocol{grid-template-columns:1fr}}
/* ══════ FINE v.010803s ══════ */

/* v.010803u — guide attività + composizione prezzo (tab Tariffe ripensato) */
.stageguide{background:var(--brand-soft);border-left:3px solid var(--brand);border-radius:0 10px 10px 0;
  padding:9px 14px;font-size:12.5px;color:var(--ink2);margin:2px 0 12px;line-height:1.55}
.pricecompo{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink2);
  background:var(--strip);border:1px solid var(--line);border-radius:10px;padding:9px 14px;margin-bottom:10px}
.pricecompo b{color:var(--ink)}
.pricecompo .tot b{color:var(--brand);font-size:15px}

/* INIZIO v.010805a — COMANDI ERGONOMICI: barra a UNA riga, pannelli a tendina, popover.
   Obiettivo: maschera sempre leggibile, dati subito in vista. */
.cmdbar{position:sticky;top:0;z-index:46;display:flex;align-items:center;gap:8px;
  padding:8px 22px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:nowrap;min-height:48px}
.cmdbar .cbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;font:600 12.5px Inter,system-ui;
  color:var(--ink2);background:var(--panel);border:1px solid var(--line);border-radius:9px;cursor:pointer;white-space:nowrap}
.cmdbar .cbtn:hover{border-color:var(--brand);color:var(--brand)}
.cmdbar .cbtn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.cmdbar .cbtn.primary:hover{filter:brightness(1.08);color:#fff}
.cmdbar .cbtn.hasdd::after{content:'▾';font-size:9px;opacity:.6;margin-left:2px}
.cmdbar .cbtn.open{border-color:var(--brand);color:var(--brand);background:rgba(23,92,211,.06)}
.cmdbar .cbtn.has::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand);margin-right:2px}
.cmdbar .vpick{font-weight:800;font-size:14px;color:var(--ink);border:none;background:none;padding:0 4px;height:32px}
.cmdbar .vpick:hover{color:var(--brand)}
/* v.010806f — select sempre visibile nella cmdbar (Vista colonne / Stato cargo): estratta dal pannello Filtri */
.cmdbar .vsel{height:32px;padding:0 8px;font:600 12.5px Inter,system-ui;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:9px;max-width:200px;cursor:pointer}
.cmdbar .vsel:hover{border-color:var(--brand)}
.cmdbar .csearch{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:9px;font:12.5px Inter,system-ui;
  width:150px;transition:width .18s;background:var(--panel);color:var(--ink)}
.cmdbar .csearch:focus{width:240px;border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(23,92,211,.1)}
.cmdbar .kmini{margin-left:auto;margin-right:30px;display:flex;gap:14px;align-items:center;font-size:11px;color:var(--muted);white-space:nowrap}
.cmdbar .kmini b{font-size:15px;margin-right:3px;color:var(--ink)}
.cmdbar .iinfo{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:inline-flex;
  align-items:center;justify-content:center;font-size:11px;color:var(--muted);cursor:help;background:var(--panel)}
.cmdbar .iinfo:hover{border-color:var(--brand);color:var(--brand)}
/* pannello a tendina */
.ddpanel{position:fixed;z-index:71;background:var(--panel);border:1px solid var(--line);border-radius:13px;
  box-shadow:var(--sh2);padding:12px;min-width:230px;max-width:min(94vw,980px);max-height:78vh;overflow:auto}
.ddpanel .ddcols{display:flex;gap:18px}
.ddpanel .ddgroup{min-width:150px}
.ddpanel .ddgroup h4{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 5px 8px}
.ddpanel a.dditem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border-radius:8px;
  font-size:12.5px;color:var(--ink2);text-decoration:none;cursor:pointer}
.ddpanel a.dditem:hover{background:var(--hover);color:var(--brand)}
.ddpanel a.dditem.on{background:rgba(23,92,211,.09);color:var(--brand);font-weight:700}
.ddpanel .ddsec{margin-bottom:12px}
.ddpanel .ddsec>label{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.ddpanel .fgrp{margin-bottom:10px}
.ddpanel .fgrp label{display:block;font-size:10.5px;color:var(--muted);margin-bottom:4px}
.ddpanel input,.ddpanel select{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:8px;font:12.5px Inter,system-ui;background:var(--panel);color:var(--ink)}
/* popover hover */
.hoverpop{position:fixed;z-index:72;background:var(--panel);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--sh2);padding:10px 13px;max-width:380px;font-size:12px;color:var(--ink2);line-height:1.45;pointer-events:none}
/* compattazione globale: strisce più snelle SU TUTTE le pagine
   (header.top/h1 → blocco canonico v.010807) */
.side{padding:8px 22px}
.septabs{padding:5px 22px}
.septabs a{padding:6px 14px}
[data-theme="dark"] .ddpanel,[data-theme="dark"] .hoverpop{background:#14161f;border-color:var(--line)}
/* v.010805i — pannelli OPACHI: nel glass il testo della pagina trapelava dietro la tendina */
[data-theme="glass"] .ddpanel,[data-theme="glass"] .hoverpop{backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);background:rgba(15,23,44,.97);border-color:rgba(255,255,255,.16)}
/* velo dietro ogni tendina aperta (tutto il programma) */
.ddveil{display:none;position:fixed;inset:0;z-index:70;background:rgba(8,14,28,.38);backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px)}
[data-theme="soft"] .ddveil,:root .ddveil{background:rgba(16,22,35,.28)}
/* FINE v.010805a */

/* INIZIO v.010805d — cmdbar OPACA nei temi traslucidi: nel glass --panel è rgba .055 e le righe
   della tabella si vedevano SOTTO la barra sticky (screenshot Luca 03/08). */
[data-theme="glass"] .cmdbar{background:rgba(14,21,38,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
[data-theme="dark"] .cmdbar{background:var(--bg)}
.cmdbar{z-index:48}
/* FINE v.010805d */

/* INIZIO v.010805e — mini calendario mensile (prese): giorni con pickup evidenziati */
#calpick{min-width:252px}
#calpick .cphead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#calpick .cphead b{font-size:13px;text-transform:capitalize}
#calpick .cphead button{width:26px;height:26px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);cursor:pointer}
#calpick .cpgrid{display:grid;grid-template-columns:repeat(7,32px);gap:3px;justify-content:center}
#calpick .wd{font-size:9.5px;font-weight:800;color:var(--muted);text-align:center;padding-bottom:2px}
#calpick .cpd{position:relative;width:32px;height:30px;line-height:30px;text-align:center;font-size:12px;
  border-radius:8px;cursor:pointer;color:var(--ink2)}
#calpick .cpd:hover{background:var(--hover)}
#calpick .cpd.has{background:rgba(23,92,211,.10);color:var(--brand);font-weight:800}
#calpick .cpd.has i{position:absolute;top:1px;right:2px;font-style:normal;font-size:8px;font-weight:800;
  background:var(--brand);color:#fff;border-radius:7px;padding:0 3px;line-height:11px}
#calpick .cpd.sel{background:var(--brand);color:#fff}
#calpick .cpd.sel i{background:#fff;color:var(--brand)}
#calpick .cpd.tod{outline:1.5px solid var(--brand);outline-offset:-1.5px}
#calpick .cpleg{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--muted);margin-top:8px}
[data-theme="dark"] #calpick .cpd.has,[data-theme="glass"] #calpick .cpd.has{background:rgba(99,102,241,.18)}
/* FINE v.010805e */

/* INIZIO v.010805f — pallini di attesa ANIMATI in sequenza (card cockpit in caricamento) */
.ldots{display:inline-flex;gap:6px;align-items:center;height:30px}
.ldots i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.22;animation:tmweldot 1.15s ease-in-out infinite}
.ldots i:nth-child(2){animation-delay:.18s}
.ldots i:nth-child(3){animation-delay:.36s}
@keyframes tmweldot{0%,55%,100%{opacity:.22;transform:translateY(0) scale(1)}25%{opacity:1;transform:translateY(-4px) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.ldots i{animation:none;opacity:.5}}
/* FINE v.010805f */

/* INIZIO v.010805h — REGOLA DI SISTEMA: valuta e peso sempre allineati a DESTRA (tutte le tabelle) */
.tmwe th.tar,.tmwe td.tar{text-align:right}
.tmwe td.tar .tag{margin-left:auto}
/* FINE v.010805h */
/* INIZIO v.010807f — TRATTA ALLINEATA (Luca 07/08): partenza a larghezza FISSA, freccia sempre
   nella stessa posizione, destinazione allineata a sinistra — niente più slittamenti quando la
   città è corta. + colonne centrate esplicite (.tac: colli·kg, service level). */
.tmwe th.tac,.tmwe td.tac{text-align:center}
.tmwe td.tac .tag{margin:0 auto}
.r2{display:flex;align-items:center;gap:7px;min-width:0}
.r2 .ro{flex:0 0 128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r2 .ra{flex:0 0 auto;color:var(--muted)}
.r2 .rd{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
/* FINE v.010807f */

/* INIZIO v.010805k — monogramma compagnia aerea (codice IATA in cerchio) + seztabs drawer su una riga scorrevole */
.almono{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:var(--brand);color:#fff;font:800 10px Inter,system-ui;letter-spacing:.02em;vertical-align:middle}
.seztabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}
.seztabs a{white-space:nowrap;flex:0 0 auto}
/* FINE v.010805k */

/* INIZIO v.010805l — processo cargo a 3 gambe: primo miglio | CARGO | ultimo miglio */
.legs3{display:grid;grid-template-columns:1fr 26px 1.25fr 26px 1fr;gap:8px;align-items:stretch}
.legs3 .leg{border:1px solid var(--line);border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:7px;background:var(--panel)}
.legs3 .leg.main{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset, var(--sh1)}
.legs3 .leg.done{border-color:var(--ok-ink)}
.legs3 .lgt{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--muted)}
.legs3 .leg.main .lgt{color:var(--brand)}
.legs3 .lgd{font-size:12px;color:var(--ink2);line-height:1.4}
.legs3 .leg input{width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:8px;font:11.5px "JetBrains Mono",monospace;background:var(--panel);color:var(--ink)}
.legs3 .leg .opb{justify-content:center;margin-top:auto}
.legs3 .lgarrow{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--brand)}
/* v.010805n — SEMPRE affiancate in orizzontale (filosofia del sistema): niente impilamento nel drawer */
@media (max-width:640px){.legs3{grid-template-columns:1fr}.legs3 .lgarrow{transform:rotate(90deg);padding:0}}
/* FINE v.010805l */

/* v.010805o — righe bulk fallite: sfondo rosso tenue per riprovarle (review 04/08) */
/* v.011575: righe fallite senza fondo rosso: stesso pallino delle righe con problemi (vedi sotto) */
/* v.010806i — CIRCOLARITÀ: barra Collegamenti nei drawer + banner filtro di contesto */
.linkbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;padding:8px 10px;background:var(--strip);border:1px solid var(--line);border-radius:10px}
.linkbar .lb-lbl{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.lb-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--brand);background:var(--brand-soft);border:1px solid transparent;border-radius:8px;padding:5px 10px;text-decoration:none;cursor:pointer}
.lb-chip:hover{border-color:var(--brand);filter:brightness(1.02)}
.ctxbanner{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:9px 14px;background:var(--brand-soft);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:0 10px 10px 0;font-size:13px}
.ctxbanner a{color:var(--brand);font-weight:600;margin-left:6px}
/* v.010807i — DRILL-DOWN CON RITORNO: pulsante fisso "← Torna a <record>" quando si sta
   approfondendo da un'altra maschera. Prominente, sempre raggiungibile, sopra tutto. */
#backchip{position:fixed;left:70px;bottom:18px;z-index:85;display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 16px;border:none;border-radius:999px;background:var(--brand);color:#fff;
  font:600 13px Inter,system-ui;cursor:pointer;box-shadow:0 8px 24px rgba(29,90,239,.45)}
#backchip b{font-weight:800}
#backchip:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* v.010807i — GERARCHIA kchips (Luca: "tutto in bold non si legge"): etichetta piccola e muta,
   valore normale-peso; solo .strong resta forte. Vale per tutti i riepiloghi. */
.kchip .kl{font-weight:700;color:var(--ink3)}
.kchip .kv{font-weight:500}
.kchip .kv.strong{font-weight:800}
/* v.010806k — filtro primario inline nella cmdbar (data-cmdbar): compatto, label piccola sopra o inline */
/* v.010807c — FIX allineamento (Luca 07/08): il gruppo filtro inline, spostato fuori dalla side,
   ereditava flex-direction:column da .fgrp → etichetta SOPRA il controllo, gruppo più alto degli
   altri bottoni → disallineamento verticale nel cmdbar. Forzo riga + centratura + altezza coerente. */
.cmdbar .cmdfilt{display:flex;flex-direction:row;align-items:center;gap:6px;margin:0;padding:0;height:32px;background:none;border:none}
.cmdbar .cmdfilt label{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:0;white-space:nowrap}
.cmdbar .cmdfilt select{height:30px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:12.5px;padding:0 8px;max-width:190px}
.cmdbar .cmdfilt .chiprow{display:flex;gap:4px;flex-wrap:nowrap}
.cmdbar .cmdfilt .chip{font-size:11.5px;padding:3px 9px}
.cmdbar .cmdfilt input{height:30px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:12.5px;padding:0 8px;max-width:150px}

/* ══════ v.010807d — BARRA AZIONI RAGGRUPPATA + INTERRUTTORI (Luca 07/08) ══════
   Un controllo = un tipo: le azioni-wizard restano pulsanti (.opb) raggruppati sotto un'etichetta;
   gli stati della spedizione diventano veri INTERRUTTORI (.tgl) — così l'occhio distingue subito
   "apre un modulo" da "accende/spegne un flag". */
.actbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;padding:9px 12px;
  background:var(--strip);border:1px solid var(--line);border-radius:10px}
.actbar .actlbl{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.tgl{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);color:var(--ink2);cursor:pointer;font:600 12.5px Inter,system-ui}
.tgl:hover{border-color:#c8d4e2}
.tgl .sw{width:30px;height:18px;border-radius:10px;background:var(--line);position:relative;transition:.15s;flex:0 0 auto}
.tgl .sw::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tgl.on{border-color:var(--ok);color:var(--ok-ink);background:var(--ok-card)}
.tgl.on .sw{background:var(--ok)}
.tgl.on .sw::after{left:14px}
[data-theme="dark"] .tgl .sw::after,[data-theme="glass"] .tgl .sw::after{background:#e8ecf4}

/* ══ INIZIO v.010809 — WORKBENCH ERP a 2 colonne (maschera record: sinistra spedizione · destra sidebar operativa) ══ */
.wb{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:10px;align-items:start}
.wbl{min-width:0}
.wbr{display:flex;flex-direction:column;gap:8px;position:sticky;top:8px}
.sb{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 12px 10px}
.sb .sbt{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--brand);border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:6px;display:flex;align-items:center}
.sb.eco{border-left:3px solid var(--brand)}
.sb .kvr{padding:2px 0}
.sbb{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;padding-top:7px;border-top:1px dashed var(--line)}
.sbb .opb{font-size:11px;padding:4px 9px}
/* accessori a chip: acceso = attivo con valore · spento = disponibile */
.acchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.acch{border:1px solid var(--line);background:var(--strip);color:var(--ink3);border-radius:8px;padding:5px 10px;font:600 11.5px Inter,system-ui;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.acch:hover{border-color:var(--brand);color:var(--brand)}
.acch.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.acch.on b{font-weight:800}
.tgl.sm{font-size:11px;padding:4px 8px}
@media(max-width:1100px){.wb{grid-template-columns:1fr}.wbr{position:static}}
/* ══ FINE v.010809 ══ */

/* ══ INIZIO v.010810 — scheda a processo: approfondimenti richiudibili + USCITE ══ */
.rtabs:has(> .rtab:only-child){display:none}   /* scheda unica: niente barra tab */
.deep{background:var(--panel);border:1px solid var(--line);border-radius:11px;margin-top:10px;overflow:hidden}
.deep>summary{cursor:pointer;list-style:none;padding:10px 14px;font:700 12px Inter,system-ui;color:var(--ink2);display:flex;align-items:center;gap:7px;user-select:none}
.deep>summary::-webkit-details-marker{display:none}
.deep>summary:after{content:'▾';margin-left:auto;color:var(--muted);transition:transform .15s}
.deep:not([open])>summary:after{transform:rotate(-90deg)}
.deep>summary:hover{color:var(--brand)}
.deep .deepb{padding:4px 12px 12px;border-top:1px solid var(--line)}
.uscite{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:11px;padding:10px 14px 12px}
.uscite .ut{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--brand);margin-bottom:8px}
.uscite .urow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.uscita{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--strip);text-decoration:none;color:var(--ink)}
.uscita b{font-size:12.5px}
.uscita span{font-size:10.5px;color:var(--muted)}
.uscita:hover{border-color:var(--brand);background:var(--brand-soft)}
.uscita:hover b{color:var(--brand)}
@media(max-width:900px){.uscite .urow{grid-template-columns:repeat(2,1fr)}}
/* ══ FINE v.010810 ══ */

/* ══ INIZIO v.010811 — LINGUAGGIO DEI CONTROLLI (Luca 08/08): a colpo d'occhio si deve
   capire cosa è un TAB, cosa un BOTTONE e cosa un CAMPO da compilare.
   Regole: TAB = piatto, trasparente, indicatore sotto/attivo pieno · BOTTONE = rialzato
   (bordo + ombra, staccato dallo sfondo) · CAMPO = incassato (fondo diverso + ombra interna)
   · DROPDOWN = campo con freccia sempre visibile · ETICHETTA/VALORE = il grassetto va a
   UNO SOLO dei due (etichetta leggera e piccola, valore pieno). ══ */

:root, [data-theme="soft"]{ --btn-bg:#ffffff; --btn-line:#c9d4e2; --btn-shadow:0 1px 2px rgba(16,24,40,.10),0 1px 1px rgba(16,24,40,.06);
  --field-bg:#f4f7fb; --field-line:#c9d4e2; --field-inset:inset 0 1px 2px rgba(16,24,40,.07); --chevimg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%236b7a8d" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>'); }
[data-theme="glass"]{ --btn-bg:rgba(255,255,255,.10); --btn-line:rgba(255,255,255,.28); --btn-shadow:0 1px 3px rgba(0,0,0,.45);
  --field-bg:rgba(0,0,0,.28); --field-line:rgba(255,255,255,.20); --field-inset:inset 0 1px 3px rgba(0,0,0,.5); --chevimg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%238b96ad" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>'); }
[data-theme="dark"]{ --btn-bg:#1a1e29; --btn-line:#323a4c; --btn-shadow:0 1px 3px rgba(0,0,0,.5);
  --field-bg:#0b0d13; --field-line:#2a3040; --field-inset:inset 0 1px 3px rgba(0,0,0,.55); --chevimg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%2379839c" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>'); }

/* 1 ── BOTTONI: rialzati, staccati dallo sfondo (mai piatti) */
.opb,.hbtn,.ghost,.sopen,.acch,.uscita,.tgl,.tbar button,.actbar button,.savebar button{
  background:var(--btn-bg);border:1px solid var(--btn-line);box-shadow:var(--btn-shadow)}
.opb:active,.hbtn:active{transform:translateY(1px);box-shadow:none}
.opb.pri,button.primary,.savebar .primary,.sopen{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 3px color-mix(in srgb,var(--brand) 45%,transparent)}
.opb.ok{background:var(--ok-ink);border-color:var(--ok-ink);color:#fff}
.acch.on{background:var(--brand-soft);border-color:var(--brand)}
.uscita{background:var(--btn-bg)}

/* 2 ── CAMPI: incassati; DROPDOWN: campo + freccia sempre visibile */
.rbody input:not([type=checkbox]):not([type=radio]),.rbody textarea,#dbody input,#dbody textarea,
.side input,.side textarea,.cmdbar input{
  background:var(--field-bg);border:1px solid var(--field-line);box-shadow:var(--field-inset);border-radius:8px}
.rbody select,#dbody select,.side select,.cmdbar select{
  background-color:var(--field-bg);border:1px solid var(--field-line);box-shadow:var(--field-inset);border-radius:8px;
  appearance:none;-webkit-appearance:none;padding-right:26px !important;
  background-image:var(--chevimg);background-repeat:no-repeat;background-position:right 9px center}
.rbody input:focus,.rbody select:focus,.rbody textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.rbody input[readonly]{background:transparent;border-style:dashed;box-shadow:none;color:var(--ink3)}

/* 3 ── TAB: inattivo = piatto e leggero (solo testo) · attivo = PIENO brand con testo bianco.
   Così il tab non si confonde mai con un bottone (che è rialzato con bordo+ombra). */
.seztabs a,.subtabs a{background:transparent;border:1px solid transparent;box-shadow:none;font-weight:500;color:var(--ink3)}
.seztabs a:hover,.subtabs a:hover{color:var(--brand)}
.seztabs a.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:800;box-shadow:none}
.subtabs a.on{font-weight:800}
.seztabs{border-bottom:1px solid var(--line);gap:3px}

/* 4 ── ETICHETTA leggera · VALORE pieno (mai lo stesso peso) */
.frow .fl{font-weight:400;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink3)}
.frow .fv{font-weight:650}
.kvr span{font-weight:400;font-size:11px;color:var(--ink3)}
.kvr b{font-weight:650}
.fld label,.fgrp label{font-weight:400;font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink3)}
.dgt{font-weight:800}
/* ══ FINE v.010811 ══ */


/* ══ INIZIO v.010812 — GRAFICA MODERNA (Luca): BASTA RIGHE DA QUADERNO.
   La separazione la fa lo SPAZIO e l'ELEVAZIONE, non le righe: card senza bordo con ombra
   morbida e raggio ampio, niente sottolineature sotto campi/titoli, hover delicato sulle
   righe dato/valore. Vale per drawer, sidebar operativa, approfondimenti e uscite. ══ */
:root, [data-theme="soft"]{ --elev:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.06); --elev2:0 2px 4px rgba(16,24,40,.06),0 10px 28px rgba(16,24,40,.09); }
[data-theme="glass"]{ --elev:0 8px 24px rgba(0,0,0,.35); --elev2:0 12px 34px rgba(0,0,0,.45); }
[data-theme="dark"]{ --elev:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35); --elev2:0 2px 6px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.45); }

/* 1 ── CARD moderne: niente bordo, ombra morbida, raggio ampio */
.rbody .card,.sb,.deep,.uscite,#dbody .card{border:none;box-shadow:var(--elev);border-radius:16px}
.rbody .card.slimcard{padding:14px 18px}
.sb{padding:12px 16px 13px}
.sb.eco{border-left:none;box-shadow:var(--elev2);background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 5%,var(--panel)),var(--panel))}
[data-theme="dark"] .rbody .card,[data-theme="dark"] .sb,[data-theme="dark"] .deep,[data-theme="dark"] .uscite{background:rgba(255,255,255,.045)}

/* 2 ── VIA LE RIGHE: campi e titoli senza sottolineatura, hover al posto della riga */
.rbody .frow,.frow{border-bottom:none!important;padding:4px 8px;margin:0 -8px;border-radius:8px}
.rbody .frow:hover{background:var(--hover)}
.kvr{padding:3.5px 8px;margin:0 -8px;border-radius:7px}
.kvr:hover{background:var(--hover)}
.dgt{border-bottom:none;padding-bottom:2px;margin-bottom:6px;opacity:.9}
.sb .sbt{border-bottom:none;padding-bottom:2px;margin-bottom:7px}
.sbb{border-top:none;padding-top:4px}
.uscite{border-top:none}
.uscite .ut{margin-bottom:10px}
.deep .deepb{border-top:none;padding-top:0}
.deep>summary{padding:13px 18px}
.acc,.acc summary{border:none!important}

/* 3 ── dgroups (colli & pesi): colonne separate da ARIA, senza righe sotto i titoli */
.dgroups .dgrp .dgt{border-bottom:none}
.dgroups{gap:18px}

/* 4 ── hero rotta: pannello con gradiente delicato, senza bordo */
.rbody .card[style*="--hero"]{box-shadow:var(--elev2)}

/* 5 ── uscite: tessere pulite */
.uscita{border:none;box-shadow:var(--elev);background:var(--panel)}
.uscita:hover{box-shadow:var(--elev2);background:var(--brand-soft)}
[data-theme="dark"] .uscita{background:rgba(255,255,255,.06)}

/* 6 ── tabella dentro i drawer: righe leggerissime (le liste principali restano com'erano) */
.rbody table.tmwe td{border-bottom:1px solid var(--line-soft)}
/* ══ FINE v.010812 ══ */

/* ══ INIZIO v.010813 — TIPOGRAFIA APPLE (Luca): font di sistema SF Pro, corpo più grande,
   BASTA bold impastato. Il peso forte è riservato a POCHI valori chiave (prezzo, stato,
   nome cliente); tutto il resto è regular/medium, leggibile e arioso. Numeri tabellari,
   niente monospace nei valori. ══ */
body,button,input,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,sans-serif !important}
body{font-size:14px;letter-spacing:.1px;-webkit-font-smoothing:antialiased}

/* valori: MEDIUM leggibile e più grande, non bold; numeri tabellari */
.kvr{font-size:13.5px;padding:5px 8px}
.kvr span{font-size:11.5px;font-weight:400}
.kvr b{font-weight:500;font-variant-numeric:tabular-nums;font-family:inherit !important;letter-spacing:0}
.kvr b.hi{font-weight:600;color:var(--brand)}
.frow{font-size:13.5px}
.frow .fl{font-size:10.5px}
.frow .fv{font-weight:500}
.frow .fv b{font-weight:600}

/* solo i NUMERI CHIAVE restano forti */
.sb.eco .kvr b{font-weight:500}
.sb.eco .kvr b.hi{font-weight:700;font-size:15px}
.hname{font-weight:600}
.hcity{font-weight:700}

/* via il monospace dai valori del tema dark (era la causa dell'effetto impastato) */
[data-theme="dark"] .kvr b,[data-theme="dark"] .money,[data-theme="dark"] .kchip .kv,[data-theme="dark"] .d-kv,
[data-theme="dark"] .rhead .l1 b,[data-theme="dark"] .kpi b{font-family:inherit;font-variant-numeric:tabular-nums;letter-spacing:0}

/* titoli di gruppo: piccoli ma non urlati */
.dgt,.sb .sbt,.uscite .ut{font-weight:600;letter-spacing:.08em}
.sb .sbt{font-size:10.5px}

/* tabelle nei drawer: corpo più grande */
.rbody table.tmwe td{font-size:13px}
.rbody table.tmwe th{font-size:10.5px;font-weight:500;letter-spacing:.06em}

/* bottoni: medium, non gridati */
.opb,.hbtn,.ghost,.acch{font-weight:500}
.opb.pri,button.primary{font-weight:600}
.uscita b{font-weight:600;font-size:13.5px}
/* ══ FINE v.010813 ══ */
/* v.010814 — righe di comando ERP nella sidebar: etichetta a sinistra, CONTROLLO a destra */
.crow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0}
.crow>span{font-size:11.5px;color:var(--ink3);flex:0 0 auto}
.crow .sfld{flex:1;max-width:150px;height:28px;padding:3px 8px;font-size:12.5px;border-radius:7px}
.crow .sfld.num{text-align:right;font-variant-numeric:tabular-nums;max-width:110px}
.crow .sfld.num.hi{color:var(--brand);font-weight:600}
.crow input.sfld[readonly]{border-style:dashed;background:transparent;box-shadow:none}

/* ══ INIZIO v.010820 — BADGE A CONTRASTO + ANGOLO DESTRO (Luca 08/08):
   1) i badge stanno nell'ANGOLO DESTRO del proprio contenitore, i testi sempre a sinistra
      (separati); 2) colore SEMPRE a contrasto col contenitore: pieni saturi con testo bianco
      nei temi chiari, più accesi nei temi scuri — mai pastello sullo stesso sfondo. ══ */
/* --- 2) contrasto: riempimenti pieni (vince sulle regole v.010801 precedenti) --- */
.tag{background:#41506b;color:#fff;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.tg-green{background:#12855a;color:#fff;border:0}
.tg-red{background:#cf3b3b;color:#fff;border:0}
.tg-blue{background:#1d5fd0;color:#fff;border:0}
.tg-cyan{background:#0e7e94;color:#fff;border:0}
.tg-purple{background:#6d43c4;color:#fff;border:0}
.tg-yellow{background:#b07b00;color:#fff;border:0}
.tg-gray{background:#5c6775;color:#fff;border:0}
[data-theme="dark"] .tag,[data-theme="glass"] .tag{filter:none;border:0;background:#526079;color:#fff}
[data-theme="dark"] .tg-green,[data-theme="glass"] .tg-green{background:#16a34a;color:#fff}
[data-theme="dark"] .tg-red,[data-theme="glass"] .tg-red{background:#e11d48;color:#fff}
[data-theme="dark"] .tg-blue,[data-theme="glass"] .tg-blue{background:#3b82f6;color:#fff}
[data-theme="dark"] .tg-cyan,[data-theme="glass"] .tg-cyan{background:#0891b2;color:#fff}
[data-theme="dark"] .tg-purple,[data-theme="glass"] .tg-purple{background:#8b5cf6;color:#fff}
[data-theme="dark"] .tg-yellow,[data-theme="glass"] .tg-yellow{background:#d97706;color:#fff}
[data-theme="dark"] .tg-gray,[data-theme="glass"] .tg-gray{background:#64748b;color:#fff}
/* --- 1) angolo destro: contenitore relativo + riga badge ancorata in alto a destra --- */
.card,.sb,.leg,.acc,.slimcard{position:relative}
.badges{position:absolute;top:10px;right:12px;display:flex;gap:6px;flex-wrap:wrap;
  justify-content:flex-end;max-width:55%;z-index:2}
.card.evid .badges{top:12px}
.card.evid h2,.card .dgt{max-width:65%;text-align:left}
/* tabelle: il testo resta a sinistra, il badge va al bordo destro della cella */
.tmwe td .tag{float:right;margin-left:6px}
.tmwe td .tag+ .tag{margin-right:4px}
/* header record: identità a sinistra, badge nell'angolo destro della riga sotto-testata */
.rhead .l2 .hbadges{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* ══ FINE v.010820 ══ */

/* ══ INIZIO v.010822b — PORCELLANA: badge a 3 FAMIGLIE (blu·azzurro·brown) e bold leggero.
   Vince sulla mappa colori v.010820 (verde/giallo/rosso pieni) restando nel vincolo
   "max 3 colori per maschera": blu=attivo/brand · azzurro=positivo/informativo ·
   cognac=attenzione/economia · terracotta (famiglia brown)=allarme · ardesia=neutro. ══ */
.tag{background:var(--t-neutral)}
.tag.tg-blue,.tag.tg-cyan,.tag.tg-purple{background:var(--brand)}
.tag.tg-green{background:var(--t-az)}
.tag.tg-yellow{background:var(--t-br)}
.tag.tg-red{background:var(--t-alarm)}
.tag.tg-gray{background:var(--t-neutral)}
[data-theme="dark"] .tag,[data-theme="glass"] .tag{background:var(--t-neutral)}
[data-theme="dark"] .tag.tg-blue,[data-theme="glass"] .tag.tg-blue,
[data-theme="dark"] .tag.tg-cyan,[data-theme="glass"] .tag.tg-cyan,
[data-theme="dark"] .tag.tg-purple,[data-theme="glass"] .tag.tg-purple{background:var(--brand);color:#fff}
[data-theme="dark"] .tag.tg-green,[data-theme="glass"] .tag.tg-green{background:var(--t-az);color:#fff}
[data-theme="dark"] .tag.tg-yellow,[data-theme="glass"] .tag.tg-yellow{background:var(--t-br);color:#fff}
[data-theme="dark"] .tag.tg-red,[data-theme="glass"] .tag.tg-red{background:var(--t-alarm);color:#fff}
[data-theme="dark"] .tag.tg-gray,[data-theme="glass"] .tag.tg-gray{background:var(--t-neutral);color:#fff}
/* bold leggero, mai nero pesante (Luca: "carattere molto leggibile e un bold leggero") */
b,strong,h1,h2,h3,.tag,.rtab.on,button.primary{font-weight:600}
/* bottoni scuri: via i gradienti indigo, dentro il blu porcellana */
[data-theme="dark"] button.primary,[data-theme="dark"] .tbar .tprim,[data-theme="dark"] .septabs a.on,
[data-theme="dark"] .htabs a.on{background:linear-gradient(180deg,#4d8ec4,#3a76a8)!important}
[data-theme="glass"] .septabs a.on,[data-theme="glass"] .htabs a.on,[data-theme="glass"] button.primary,
[data-theme="glass"] .tbar .tprim{background:linear-gradient(135deg,#4d8ec4,#22598c)!important}
[data-theme="dark"] .kchip .kv.strong{color:#7fb3d9;text-shadow:0 0 22px rgba(127,179,217,.4)}
/* switcher: pallino del tema Porcellana + nuovo pallino Lino */
.themesw .t-soft{background:linear-gradient(135deg,#ffffff,#c9d9e8)}
.themesw .t-lino{background:linear-gradient(135deg,#fdfcf8,#d8cdb6)}
/* ══ FINE v.010822b ══ */

/* ══ INIZIO v.010842 — LEGGIBILITÀ TEMI SCURI (Luca 12/08: "il grigio leggero su sfondo scuro
   non si vede — analizza tutti i caratteri e contrasti"). Interventi mirati SOLO su glass/dark:
   1) grigi di servizio più chiari (muted/ink3: da ~6:1 a ~8.5:1 sul fondo);
   2) etichette campo: +1px e colore pieno (le maiuscole a 10px smorzate sparivano);
   3) input/select: fondo e bordo visibili (prima erano scatole nere senza confini);
   4) placeholder con contrasto esplicito. ══ */
html[data-theme="glass"]{--muted:#a7b2c9;--ink3:#a7b2c9;}
html[data-theme="dark"]{--muted:#a5b3c6;--ink3:#a5b3c6;}
html[data-theme="glass"] .fld label,html[data-theme="dark"] .fld label,
html[data-theme="glass"] .fgrp label,html[data-theme="dark"] .fgrp label{
  font-size:11px;color:var(--ink2);letter-spacing:.35px}
html[data-theme="glass"] .frow .fl,html[data-theme="dark"] .frow .fl{color:var(--ink3);font-size:11px}
html[data-theme="glass"] .dgt,html[data-theme="dark"] .dgt{font-size:10.5px;opacity:1}
html[data-theme="glass"] .fld input,html[data-theme="glass"] .fld select,html[data-theme="glass"] .fld textarea,
html[data-theme="glass"] input,html[data-theme="glass"] select{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);color:var(--ink)}
html[data-theme="dark"] .fld input,html[data-theme="dark"] .fld select,html[data-theme="dark"] .fld textarea,
html[data-theme="dark"] input,html[data-theme="dark"] select{
  background:#232d3b;border-color:#3a4656;color:var(--ink)}
html[data-theme="glass"] ::placeholder,html[data-theme="dark"] ::placeholder{color:var(--muted);opacity:.85}
html[data-theme="glass"] .fld input[readonly],html[data-theme="dark"] .fld input[readonly]{
  background:rgba(255,255,255,.04);color:var(--muted)}

/* SAVEBAR ISSATA (azbar): barra propria, niente sovrapposizioni alle card sottostanti */
.savebar.azbar{position:static;bottom:auto;z-index:2;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 12px;
  justify-content:flex-end;box-shadow:0 2px 8px rgba(0,0,0,.12)}
html[data-theme="glass"] .savebar.azbar{background:#182136}
html[data-theme="dark"] .savebar.azbar{background:#1c2430}

/* gruppi chips della maschera nuova spedizione (ordine visivo) */
.nsgrp{border:1px solid var(--line);border-radius:9px;padding:7px 9px;margin:6px 0}
.nsgrp .nsgl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:5px;display:flex;align-items:center;gap:6px}
.nsgrp .hbtn{font-size:11px;padding:3px 8px}
/* ══ FINE v.010842 ══ */

/* ══ v.010843 — RISULTATI RICERCA A ELENCO VERTICALE (Luca 12/08: "voglio l'elenco, non badge
   orizzontali affiancati; una icona che apre la tabella"). Vale per TUTTI i selettori live. ══ */
.lpwrap{position:relative;display:inline-flex;align-items:center;gap:6px}
.lpico{padding:7px 10px;border-radius:8px;font-size:14px;line-height:1;cursor:pointer}
.lpres{position:absolute;top:calc(100% + 4px);left:0;z-index:60;min-width:340px;max-width:520px;
  max-height:280px;overflow:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);display:none}
.lpres:not(:empty){display:block}
html[data-theme="glass"] .lpres{background:#16203a}
html[data-theme="dark"] .lpres{background:#1c2430}
.lpres button,.lpres .lprow{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  border:0;border-bottom:1px solid var(--line-soft);border-radius:0;background:transparent;
  padding:8px 12px;font-size:12.5px;cursor:pointer;color:var(--ink)}
.lpres button:last-child{border-bottom:0}
.lpres button:hover{background:var(--hover)}
.lpres .lps{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
.lpres .lpempty{padding:9px 12px;font-size:11.5px;color:var(--muted);cursor:default}

/* v.010844 — mini-tabella nel dropdown: colonne larghe giuste, ordinabile, niente a capo */
.lpres{min-width:620px;max-width:780px;max-height:320px}
.lpres .lptbl{width:100%;border-collapse:collapse;margin:0}
.lpres .lptbl th{position:sticky;top:0;z-index:1;text-align:left;font-size:10px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);padding:8px 12px;cursor:pointer;
  border-bottom:1px solid var(--line);background:var(--panel);white-space:nowrap;user-select:none}
html[data-theme="glass"] .lpres .lptbl th{background:#16203a}
html[data-theme="dark"] .lpres .lptbl th{background:#1c2430}
.lpres .lptbl th:hover{color:var(--brand)}
.lpres .lptbl td{padding:8px 12px;font-size:12.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:300px;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.lpres .lptbl tbody tr{cursor:pointer}
.lpres .lptbl tbody tr:hover td{background:var(--hover)}
.lpres .lptbl tbody tr:last-child td{border-bottom:0}

/* v.010845 — tab orizzontali della maschera nuova spedizione */
.nstabs{display:flex;gap:2px;margin:2px 0 0;flex-wrap:wrap}
.nstabs button{border:1px solid var(--line);border-bottom:0;background:var(--strip);color:var(--muted);
  border-radius:10px 10px 0 0;padding:9px 16px;font-size:12.5px;font-weight:600;cursor:pointer}
.nstabs button.on{background:var(--panel);color:var(--ink);border-color:var(--brand);
  box-shadow:inset 0 2px 0 var(--brand)}
html[data-theme="glass"] .nstabs button.on{background:#16203a}
html[data-theme="dark"] .nstabs button.on{background:#1c2430}
.nstabs button:hover{color:var(--ink)}

/* v.010846 — due colonne come la maschera legacy spedy + griglia indirizzo densa */
.ns2col{display:grid;grid-template-columns:1.08fr .92fr;gap:12px;align-items:start}
@media (max-width:1100px){.ns2col{grid-template-columns:1fr}}
.ns2col .fgrid{gap:8px 10px}
.nstabs{align-items:center}

/* v.010847 — la tendina non si taglia: larghezza limitata alla finestra, testo con ellissi */
.lpres{max-width:min(780px,calc(100vw - 120px))}
/* v.010864 — evidenzia la sezione aperta dai chip Accessori */
@keyframes flashseckf{0%{box-shadow:0 0 0 0 rgba(99,102,241,.55)}100%{box-shadow:0 0 0 6px rgba(99,102,241,0)}}
.flashsec{animation:flashseckf 1.2s ease-out;border-radius:10px}

/* INIZIO v.011262 -- LE FINESTRE DI TUTTO IL SISTEMA, NON DI UNA PAGINA.
   Luca 13/09: le finestre uscivano col bianco di sistema perche' le regole erano scritte a
   mano dentro le singole pagine, per i singoli id (popMissione, popCronologia, popInvito).
   Ogni finestra nuova nasceva bianca. Adesso stanno qui, valgono per ogni <dialog> di ogni
   pagina, presente e futura. Valori identici a quelli che c'erano: cambia solo a chi si
   applicano. Il doppio strato nel background serve perche' il --panel del tema scuro e'
   vetro e un <dialog> sta nel top layer: cosi' si compone in un colore pieno. */
dialog{border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh2);padding:0;
  width:min(640px,92vw);max-height:88vh;overflow:auto;color:var(--ink);
  background:linear-gradient(var(--panel),var(--panel)),var(--bg)}
dialog::backdrop{background:rgba(10,14,24,.72)}
dialog .popHead{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--panel);z-index:1}
dialog .popHead h3{margin:0;font-size:15px}
dialog .popX{border:0;background:none;font-size:16px;color:var(--muted);cursor:pointer;
  padding:4px 8px;border-radius:8px;line-height:1}
dialog .popX:hover{color:var(--ink);background:var(--hover)}
dialog .popBody{padding:18px 20px}
dialog .popPiedi{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;
  border-top:1px solid var(--line-soft);position:sticky;bottom:0;background:var(--panel)}
dialog input:not([type=checkbox]),dialog select,dialog textarea{width:100%;padding:0 12px;
  font:inherit;font-size:13.5px;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:9px;box-sizing:border-box;outline:none}
dialog input:not([type=checkbox]),dialog select{height:36px}
dialog select{cursor:pointer}
dialog input:focus,dialog select:focus,dialog textarea:focus{border-color:var(--brand)}
dialog input:disabled{color:var(--muted);background:var(--strip)}
dialog textarea{padding-top:10px;padding-bottom:10px;min-height:92px;resize:vertical;line-height:1.5}
/* FINE v.011262 */

/* INIZIO v.011575 -- riga con problemi: niente fondo rosso e niente barra, solo un pallino rosso a sinistra (Luca 18/10). La selezione resta quella di sempre. */
.tmwe tr.rowbad td:first-child,.tmwe tr.rowfail td:first-child{position:relative}
.tmwe tr.rowbad td:first-child::before,.tmwe tr.rowfail td:first-child::before{content:"";position:absolute;left:4px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#dc2626;box-shadow:0 0 0 2px rgba(220,38,38,.18)}
/* FINE v.011575 */

/* INIZIO v.011586 -- NIENTE SCATTI AL CARICAMENTO (Luca 18/10: «quando visualizza le pagine ci sono errori e scatti»).
   Misurato con layout-shift: la pagina si disegnava prima con la barra laterale e l'intestazione grezze (93 px) e il posto del
   menu vuoto, poi il codice le sostituiva con la barra unica e il menu: tutto il contenuto saltava su di 93 px e di lato di 56 px
   (CLS 0,24-0,53; sotto 0,1 è «buono»). Ora lo spazio è riservato subito, in solo CSS:
   1) il posto del menu a sinistra (56 px) c'è già quando il menu è ancora vuoto;
   2) la barra grezza e l'intestazione restano nascoste fin dal primo disegno e al loro posto c'è già lo spazio della barra unica. */
html:not(.inc) body:has(>.nav:empty)>main{margin-left:56px}
body:has(.side):has(main>header.top):not(:has(main>.cmdbar)) .side,
body:has(.side):has(main>header.top):not(:has(main>.cmdbar)) main>header.top{display:none}
body:has(.side):has(main>header.top):not(:has(main>.cmdbar)) main::before{content:'';display:block;flex:0 0 57px;height:57px}
/* altezza della barra unica uguale in tutte le pagine (53 in alcune, 57 in altre: il contenuto sotto saltava di 4 px) */
main>.cmdbar{min-height:57px;box-sizing:border-box}
/* spedizioni e cargo: la barra grezza (filtri a capo) restava alta finché la colonna laterale non la ripuliva, poi il contenuto saltava su di oltre 100 px.
   Fino a che la colonna non c'è la barra è alta quanto sarà; per sicurezza dopo 3 secondi il limite cade da solo. */
body:not(.has-rail) main>.cmdbar{height:57px;overflow:hidden;flex-wrap:nowrap;animation:cmdlib 0s 3s forwards}
@keyframes cmdlib{to{height:auto;overflow:visible}}
/* i pannelli a tendina (vista, filtri, azioni) di express e cargo stavano in pagina (oltre 100 px) finché il codice non li nascondeva: nascosti da subito; quando li si apre il codice li mostra (stile in linea) */
main>#vpickpanel,main>#fltpanel,main>#actpanel{display:none}
/* la striscia dei filtri attivi nasce nella pagina e poi il codice la sposta nella barra: finché la colonna non c'è non occupa posto (36 px che sparivano di colpo) */
body:not(.has-rail):has(main>.cmdbar) .fltbar{display:none}
/* FINE v.011586 */

/* INIZIO v.011587 -- menu a gruppi che si aprono: il primo gruppo sempre aperto, gli altri titoli con freccia; al massimo due aperti */
.nav .ngrp{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;color:#7e92a9}
.nav .ngrp:hover{color:#c4d2e3}
.nav .ngrp .car{font-size:11px;transition:transform .15s;margin-left:8px}
.nav .ngrp.open .car{transform:rotate(90deg)}
.nav .ngrp.open{color:#c4d2e3}
.nav .gbody{display:none}
.nav .gbody.open{display:block}
/* FINE v.011587 */

/* v.011588 -- pagine jolly nel menu: sfondo diverso (viola tenue), resta riconoscibile anche quando e' la pagina corrente */
.nav a.it.jolly{background:rgba(124,92,255,.20);border-left-color:rgba(124,92,255,.65);margin:1px 8px;padding-left:9px;border-radius:8px}
.nav a.it.jolly:hover{background:rgba(124,92,255,.34)}
.nav a.it.jolly.on{background:rgba(124,92,255,.55);border-left-color:#b9a6ff;color:#fff}