:root{
  --navy:#1F3864; --navy2:#2b4c86; --amber:#D98C00; --amber-l:#f5b942;
  --grey:#595959; --red:#C00000; --green:#4E7A27;
  --bg:#f4f6fa; --card:#ffffff; --line:#e2e7f0; --txt:#1b2333; --muted:#6b7688;
  --shadow:0 1px 3px rgba(20,30,60,.08), 0 6px 18px rgba(20,30,60,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:14px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased}
a{color:var(--navy2);text-decoration:none}
button{font:inherit;cursor:pointer}

/* ---------- login ---------- */
#login{position:fixed;inset:0;background:linear-gradient(145deg,#16264a,#1F3864 55%,#2b4c86);
  display:flex;align-items:center;justify-content:center;z-index:100}
#login .box{background:#fff;padding:34px 38px;border-radius:14px;width:340px;
  box-shadow:0 18px 60px rgba(0,0,0,.35)}
#login h1{margin:0 0 4px;font-size:19px;color:var(--navy)}
#login p{margin:0 0 20px;color:var(--muted);font-size:12.5px}
#login input{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:8px;
  font-size:15px;outline:none}
#login input:focus{border-color:var(--navy2)}
#login button{width:100%;margin-top:14px;padding:11px;background:var(--navy);color:#fff;
  border:0;border-radius:8px;font-weight:600}
#login button:hover{background:var(--navy2)}
#login .err{color:var(--red);font-size:12.5px;margin-top:10px;min-height:16px}
/* cambio password: stessa scheda del login, sopra la dashboard */
#cambio-pw{position:fixed;inset:0;background:rgba(22,38,74,.72);z-index:60;display:flex;
  align-items:center;justify-content:center}
#cambio-pw .box{background:#fff;padding:30px 34px;border-radius:14px;width:360px;max-width:calc(100vw - 32px)}
#cambio-pw h1{margin:0 0 4px;font-size:18px;color:var(--navy)}
#cambio-pw p{margin:0 0 16px;color:var(--muted);font-size:12.5px}
#cambio-pw input{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;
  margin-bottom:10px;font-size:14px;box-sizing:border-box}
#cambio-pw button{width:100%;margin-top:4px;padding:10px;background:var(--navy);color:#fff;
  border:0;border-radius:8px;font-size:14px;cursor:pointer}
#cambio-pw button.sec{background:transparent;color:var(--muted);margin-top:6px}
#cambio-pw .err{color:var(--red);font-size:12.5px;margin-top:8px;min-height:16px}
header .chi{margin-top:3px}
header .chi a{color:#fff;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}

/* ---------- layout ---------- */
#app{display:none}
header{background:var(--navy);color:#fff;padding:0 18px;display:flex;align-items:center;
  gap:22px;height:52px;position:sticky;top:0;z-index:40}
header .logo{font-weight:700;letter-spacing:.3px;font-size:15px}
header .logo span{color:var(--amber-l)}
nav{display:flex;gap:2px;flex:1}
nav button{background:transparent;border:0;color:#c9d4ea;padding:8px 14px;border-radius:7px;
  font-size:13.5px;font-weight:500}
nav button:hover{background:rgba(255,255,255,.10);color:#fff}
nav button.on{background:var(--amber);color:#fff;font-weight:600}
header .meta{font-size:11.5px;color:#9fb0d0;text-align:right;line-height:1.3}

/* ---------- filtri ---------- */
/* barra filtri: griglia, non flex-wrap. Con 11 filtri il wrap creava colonne di larghezza
   casuale e un blocco altissimo; la griglia dà celle uguali e prevedibili. */
#filtri{background:var(--card);border-bottom:1px solid var(--line);padding:9px 18px 10px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:8px 10px;
  align-items:end;position:sticky;top:52px;z-index:35}
.fg{display:flex;flex-direction:column;gap:3px;min-width:0}
.fg>label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg.wide{grid-column:span 2}
.ms{position:relative;min-width:0}
.ms>.btn{width:100%;min-width:0;padding:7px 24px 7px 10px;border:1px solid var(--line);
  border-radius:7px;background:#fff;text-align:left;font-size:13px;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.ms>.btn:after{content:"▾";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:10px}
.ms>.btn.act{border-color:var(--amber);background:#fffaf0;font-weight:600;
  padding-right:30px}
.ms .pop{display:none;position:absolute;top:100%;left:0;margin-top:5px;
  width:400px;max-width:calc(100vw - 28px);
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 4px 10px rgba(20,30,60,.10),0 14px 40px rgba(20,30,60,.16);
  z-index:60;padding:9px}
.ms .pop.dx{left:auto;right:0}          /* si apre verso sinistra se sfora a destra */
.ms.open .pop{display:block}
.ms .pop input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;
  font-size:13px;margin-bottom:7px;outline:none}
.ms .pop input:focus{border-color:var(--navy2)}
.ms .list{max-height:300px;overflow-y:auto;overflow-x:hidden}
.ms .list label{display:grid;grid-template-columns:15px minmax(0,1fr) auto;gap:9px;
  align-items:center;padding:6px 7px;border-radius:6px;font-size:13px;cursor:pointer;
  line-height:1.3}
.ms .list label:hover{background:#f2f5fb}
.ms .list label input{margin:0;width:15px;height:15px}
.ms .list .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ms .list .n{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums;
  white-space:nowrap;padding-left:6px}
.ms .list label.on{background:#fffaf0}
.ms .list label.on .nm{font-weight:600}
.ms .act-row{display:flex;gap:7px;margin-top:7px;border-top:1px solid var(--line);padding-top:8px;
  align-items:center}
.ms .act-row button{padding:5px 11px;border:1px solid var(--line);background:#fff;
  border-radius:6px;font-size:12px;color:var(--grey)}
.ms .act-row button:hover{background:#f2f5fb}
.ms .act-row .cnt{margin-left:auto;font-size:11.5px;color:var(--muted)}
input[type=date],select,input.txt{width:100%;padding:7px 8px;border:1px solid var(--line);
  border-radius:7px;font-size:13px;background:#fff;outline:none;color:var(--txt);min-width:0}
input[type=date]:focus,select:focus,input.txt:focus{border-color:var(--navy2)}
#filtri .sp{display:none}
.btn-rst{width:100%;padding:7px 10px;border:1px solid var(--line);background:#fff;
  border-radius:7px;color:var(--grey);font-size:13px;white-space:nowrap}
.btn-rst:hover{background:#f2f5fb;border-color:var(--navy2);color:var(--navy)}
.btn-rst.act{border-color:var(--amber);background:#fffaf0;color:#9a5c00;font-weight:600}
.chip{display:inline-flex;align-items:center;gap:5px;background:#eef2f9;border-radius:20px;
  padding:2px 9px;font-size:11.5px;color:var(--navy)}

/* ---------- contenuto ---------- */
main{padding:16px 18px 60px}
.page{display:none}
.page.on{display:block}
h2.sec{margin:22px 0 10px;font-size:14px;color:var(--navy);text-transform:uppercase;
  letter-spacing:.6px;font-weight:700}
h2.sec:first-child{margin-top:4px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px}
.kpi{background:var(--card);border-radius:11px;padding:13px 15px;box-shadow:var(--shadow);
  border-left:3px solid var(--amber)}
.kpi .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:600}
.kpi .v{font-size:23px;font-weight:700;color:var(--navy);margin-top:3px;
  font-variant-numeric:tabular-nums}
.kpi .s{font-size:11.5px;color:var(--muted);margin-top:1px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
/* 420px minimo: con 5 card per riga i nomi lunghi (ragioni sociali, categorie) restavano
   tagliati a 12 caratteri. Meglio 3 card larghe che 5 illeggibili. */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:13px}
.card{background:var(--card);border-radius:11px;padding:14px 16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 11px;font-size:12.5px;color:var(--navy);text-transform:uppercase;
  letter-spacing:.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.card h3 .hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);
  font-size:11.5px}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);font-weight:700;padding:6px 8px;border-bottom:1.5px solid var(--line);
  white-space:nowrap;position:sticky;top:0;background:var(--card);z-index:2}
th.sortable{cursor:pointer}
th.sortable:hover{color:var(--navy)}
td{padding:6px 8px;border-bottom:1px solid #f0f3f8;vertical-align:middle}
tr:hover td{background:#f8fafd}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* colonne di testo: si tagliano coi puntini (nome intero nel tooltip) così le colonne
   numeriche restano sempre leggibili anche con ragioni sociali lunghissime */
.tw{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-lg{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-sm{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
th.num{text-align:right}
.scroll{overflow:auto;max-height:560px}
.mini{font-size:11.5px;color:var(--muted)}
.bar{height:5px;background:#eef2f9;border-radius:3px;overflow:hidden;min-width:52px}
.bar>i{display:block;height:100%;background:var(--navy2);border-radius:3px}

/* ---- classifiche a barre: larghezze garantite, il numero non si schiaccia mai ---- */
.ranks{display:flex;flex-direction:column}
.rk{display:grid;grid-template-columns:minmax(0,1fr) minmax(36px,22%) 100px;
  gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid #f2f5fa;font-size:13px}
.rk:last-child{border-bottom:0}
.rk:hover{background:#f8fafd}
.rk-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rk-b{height:6px;background:#eef2f9;border-radius:3px;overflow:hidden}
.rk-b>i{display:block;height:100%;background:var(--navy2);border-radius:3px}
.rk-b>i.neg{background:var(--red)}
.rk-v{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--navy)}
@media(max-width:1200px){.rk{grid-template-columns:minmax(0,1fr) 96px}.rk-b{display:none}}
.pill{display:inline-block;padding:1px 8px;border-radius:11px;font-size:11px;font-weight:600;
  white-space:nowrap}
.p-gdo{background:#e6eefb;color:#1F3864}
.p-non{background:#fdf0e0;color:#9a5c00}
.p-ing{background:#e9f3e5;color:#3d6420}
.p-det{background:#e5f2f5;color:#1f5e6b}
.p-dir{background:#f3eaf7;color:#6b3184}
.p-onl{background:#e4f0e9;color:#186b45}
.p-con{background:#fde8e8;color:#9c1c1c}
.p-roy{background:#f0e6d8;color:#6b4a1c}
.p-exp{background:#eae7f7;color:#3f3585}
.p-cedi{background:#e8eaf0;color:#4a5468}
.warn{color:var(--red);font-weight:600}
/* ogni numero negativo e' rosso, ovunque (Matteo, 25/09/2026). Il grassetto NO: `warn`
   segnala una soglia superata ed e' un richiamo, qui si sta solo dicendo «questo numero
   ha il segno meno». Se fossero identici la soglia smetterebbe di distinguersi. */
.negv{color:var(--red)}
.ok{color:var(--green);font-weight:600}
.lnk{color:var(--navy2);cursor:pointer;text-decoration:none;border-bottom:1px dotted #b9c6e0}
.lnk:hover{color:var(--amber);border-bottom-color:var(--amber)}

/* grafici svg */
svg.ch{display:block;width:100%;overflow:visible}
svg.ch text{font-size:10px;fill:var(--muted)}
svg.ch .gl{stroke:#eef2f9;stroke-width:1}

/* tendina disabilitata: la dimensione non si applica alla pagina corrente (es. canale o
   agente sul White space, che sono attributi dei PV che serviamo) */
.ms.na .btn{opacity:.45;cursor:not-allowed;font-style:italic;background:#f6f8fc}
.ms.na .btn:hover{background:#f6f8fc}

/* ---- White space: filtri propri della pagina ----
   Sono separati da quelli in alto di proposito: i filtri globali lavorano su `store`, cioe'
   sui PV che serviamo, e qui per definizione i PV non sono nel venduto. */
#wfiltri{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin:0 0 14px;box-shadow:var(--shadow)}
#wfiltri .fg{display:flex;flex-direction:column;gap:4px;min-width:150px}
#wfiltri .fg.wide{min-width:250px;flex:1}
#wfiltri label{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
#wfiltri .chk{display:flex;align-items:center;gap:6px;height:31px;font-size:12.5px;
  color:var(--txt);text-transform:none;letter-spacing:0;cursor:pointer;white-space:nowrap}
#wfiltri .chk input{margin:0}
#wfiltri input.txt{height:31px}

/* ---- espositori: in evidenza nella scheda filiale ---- */
/* la card sta subito sotto i KPI e ha un bordo ambra a sinistra: e' la prima cosa da
   guardare aprendo una scheda, serve a decidere se sostituire l'espositore */
/* Il margine era 0 perche' la card stava attaccata alla riga dei KPI. Dal 03/09/2026 sta
   in fondo alla scheda, sotto la griglia delle foto, e serve lo stesso stacco delle
   altre card di fondo pagina. */
.card-esp{margin-top:13px;border-left:4px solid var(--amber)}
.esp-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;
  background:#fff8e8;border:1px solid var(--amber-l);border-radius:8px;padding:10px 12px}
.esp-hero > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.esp-hero .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:#8a6a12}
.esp-hero .v{font-size:16px;font-weight:700;color:#3d2b00;overflow:hidden;text-overflow:ellipsis}
.esp-hero .v.warn{color:var(--red)}
/* Note nostre sulla filiale: campo libero salvato in build/note_pv.csv. Sta in ALTO
   nel pannello, non in fondo, perche' e' fatto per essere letto appena si apre il PV.
   Bordo blu come le card di dato, non ambra: l'ambra in questa dashboard vuol dire
   "espositore", e due significati sullo stesso colore si confondono. */
.card-nota{border-left:4px solid var(--navy2)}
.card-nota textarea{width:100%;box-sizing:border-box;padding:9px 11px;font:inherit;
  font-size:13px;line-height:1.5;border:1px solid var(--line);border-radius:8px;
  resize:vertical;min-height:74px;background:#fcfdff;color:#1a2540}
.card-nota textarea:focus{outline:none;border-color:var(--navy2);background:#fff}
.nota-barra{display:flex;align-items:center;gap:11px;margin-top:8px}
.bt-nota{padding:7px 15px;border:0;border-radius:7px;background:var(--navy);color:#fff;
  font-size:12.5px;font-weight:700}
.bt-nota:hover{background:var(--navy2)}
.bt-nota:disabled{background:#9aa7bf;cursor:default}
.badge-nota{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:11px;
  background:#e8effc;color:var(--navy);font-size:11px;font-weight:700;white-space:nowrap;
  border:1px solid #c5d5f2}

/* badge nell'intestazione del pannello di dettaglio */
.badge-esp{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:11px;
  background:var(--amber);color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
.badge-esp.na{background:transparent;color:#f0d9a8;border:1px dashed #f0d9a8;font-weight:600}

/* scheda filiale: voci fuori dall'immesso in fondo alla tabella articoli, distinte a
   occhio perche' NON sommano ai KPI (sono espositori, royalties, anticipi, premi, note) */
tr.sep td{background:#eef1f7;color:var(--muted);font-size:11.5px;line-height:1.45;
  padding:7px 8px;border-top:2px solid var(--line)}
tr.sep td b{color:var(--txt)}
tr.extra td{background:#fafbfe;color:var(--muted)}
tr.extra td b{color:var(--grey);font-weight:600}

/* confronto col pari periodo: riga delta sotto il KPI. Piccola e secondaria, cosi' il
   numero del periodo resta il protagonista e il confronto non raddoppia la pagina. */
.dl{margin-top:6px;padding-top:5px;border-top:1px dashed var(--line);font-size:11.5px;
  font-weight:600;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl.up{color:var(--green)} .dl.down{color:var(--red)} .dl.flat{color:var(--muted)}
.dl.na{color:var(--muted);font-weight:400;font-style:italic}
.dl .dlb{color:var(--muted);font-weight:400}
/* checkbox nella barra filtri, allineata come gli altri controlli */
#filtri .chk{display:flex;align-items:center;gap:6px;height:31px;font-size:12.5px;
  color:var(--txt);cursor:pointer;white-space:nowrap}
#filtri .chk input{margin:0}
.ch .leg text{font-size:11px;fill:var(--muted)}

/* avviso di perimetro / periodi non confrontabili */
.avviso{margin:0 18px 12px;padding:10px 14px;border-radius:9px;font-size:12.8px;
  line-height:1.5;background:#fff8e8;border:1px solid var(--amber-l);
  border-left:4px solid var(--amber);color:#5a4000}
.avviso b{color:#3d2b00}

/* foto */
.fotogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:9px}
.fotogrid figure{margin:0;background:#f6f8fc;border-radius:8px;overflow:hidden;
  border:1px solid var(--line)}
/* scatto successivo dello STESSO passaggio: bordo tratteggiato, cosi' si vede a occhio
   che non e' un altro passaggio ma un'altra angolazione della stessa visita */
.fotogrid figure.scatto-cont{border-style:dashed;background:#fafbfe}
.fotogrid img{width:100%;height:118px;object-fit:cover;display:block;background:#e8ecf4}
.fotogrid figcaption{font-size:10.5px;padding:4px 6px;color:var(--muted);text-align:center}
.thumb-s{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--line);
  background:#eef1f7;display:block}
.pimg{width:46px;height:46px;object-fit:contain;background:#fff;border:1px solid var(--line);
  border-radius:6px;display:block}

/* drawer dettaglio PV */
#drawer{position:fixed;inset:0;background:rgba(16,24,44,.5);display:none;z-index:80}
#drawer.on{display:block}
#drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(1080px,96vw);background:var(--bg);
  overflow:auto;box-shadow:-8px 0 40px rgba(0,0,0,.25)}
#drawer .dh{background:var(--navy);color:#fff;padding:15px 20px;position:sticky;top:0;z-index:5;
  display:flex;align-items:flex-start;gap:14px}
#drawer .dh h2{margin:0;font-size:16px;font-weight:650}
#drawer .dh .sub{font-size:12px;color:#a9bade;margin-top:3px}
#drawer .dh button{margin-left:auto;background:rgba(255,255,255,.14);border:0;color:#fff;
  width:30px;height:30px;border-radius:7px;font-size:17px;line-height:1}
#drawer .db{padding:15px 20px 50px}

.tl{display:flex;gap:3px;flex-wrap:wrap}
.tl .m{width:44px;text-align:center;font-size:9.5px;padding:4px 0 3px;border-radius:5px;
  background:#f0f3f8;color:var(--muted);line-height:1.3;cursor:default;
  border:1px solid rgba(31,56,100,.06)}
.tl .m b{display:block;font-size:13px;font-weight:700;color:var(--txt);
  font-variant-numeric:tabular-nums}
.tl .m s{display:block;text-decoration:none;font-size:9.5px;color:#2b4c86;
  font-variant-numeric:tabular-nums}
.tl .m.ord b,.tl .m.both b{color:#33571a}
.tl .m.ord{background:#d8ecc8;color:#33571a}
.tl .m.vis{background:#dbe8fa;color:#1F3864}
.tl .m.both{background:linear-gradient(160deg,#d8ecc8 50%,#dbe8fa 50%);color:#243}
/* Scheda PV con un periodo selezionato: la timeline resta INTERA (serve a vedere il
   contorno dello storico) ma i mesi fuori finestra sono sbiaditi, e quelli dentro hanno
   un anello ambra. Senza, 19 riquadri sopra un KPI che ne somma 4 fanno sembrare
   sbagliato il KPI. Si sbiadisce invece di nascondere: il dato resta leggibile e il
   passaggio del mouse lo dichiara. */
.tl .m.fuori{opacity:.34;filter:grayscale(.55)}
.tl .m.inw{box-shadow:0 0 0 2px var(--amber)}
/* mese tagliato a meta' dalla finestra: il numero in cella e' del mese intero */
.tl .m.inw.parz{box-shadow:0 0 0 2px var(--amber-l)}
.tl .m.inw.parz::after{content:'~';display:block;font-size:9px;line-height:1;
  color:var(--amber);margin-top:-1px}
/* riga secondaria di un KPI: lo stesso numero su TUTTO lo storico. Non e' una
   variazione, quindi niente colore: e' contesto, e va letto come tale. */
.kpi .dl.sto{color:var(--muted);font-weight:400}
.kpi .dl.sto b{color:var(--grey);font-weight:600}
/* righe della tabella Ordini che cadono dentro la finestra: la tabella resta su tutto
   lo storico, ma queste sono quelle che fanno il KPI Immesso */
tr.inw td{background:#fdf6e8;box-shadow:inset 2px 0 0 var(--amber)}
/* striscia che dichiara la finestra in testa alla scheda */
.per-strip{background:#f7f9fd;border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:9px;padding:9px 12px;margin:0 0 13px;line-height:1.5}
.per-strip b{color:var(--txt)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:9px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;
  vertical-align:-1px}
.empty{padding:26px;text-align:center;color:var(--muted);font-size:13px}
.spin{padding:26px;text-align:center;color:var(--muted);font-size:13px}
.note{background:#fffaf0;border:1px solid #f0dcb8;border-radius:9px;padding:10px 13px;
  font-size:12.5px;color:#7a5200;margin-bottom:13px}
.note b{color:#5c3d00}
@media(max-width:1000px){.grid2{grid-template-columns:1fr}}

/* ---- intestazioni ordinabili -------------------------------------------------
   Sulle pagine-elenco (Punti vendita, Senza ordini, elenco White space) il clic
   richiama il server: quelle tabelle contengono una fetta e riordinarla nel browser
   darebbe una classifica falsa. Sulle tabelle intere (Prodotti, Agenti, riepiloghi,
   scheda PV) l'ordinamento e' nel browser, immediato. */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--navy)}
th.sortable:hover .ord{opacity:1}
th.on{color:var(--navy)}
th .ord{margin-left:3px;font-size:8.5px;vertical-align:1.5px;color:var(--amber)}

/* ---- tasto per scaricare la presentazione (pagina Agenti) ---- */
.btn-deck{display:inline-block;padding:3px 10px;border-radius:6px;background:var(--navy);
  color:#fff;font-size:11.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.btn-deck:hover{background:var(--navy2)}
.btn-deck.off{background:transparent;color:var(--muted);border:1px dashed var(--line);
  font-weight:400;cursor:default}

/* ---------- barra dell'assortimento (pagina Zone) ----------
   Le quote per famiglia sommano a 100 per riga, quindi una barra in pila con le
   larghezze in percento E' un 100% stacked senza bisogno di una libreria di grafici.
   I colori sono gli stessi del deck (FAM_COL in build_deck.js) e nello stesso ordine:
   se Time e' navy in presentazione e grigio a schermo, chi guarda i due documenti
   accanto crede di leggere due cose diverse. */
.mixbar{display:flex;height:16px;border-radius:3px;overflow:hidden;
  border:1px solid var(--line);min-width:150px}
.mixbar i{display:block;height:100%}
.mixbar i:hover{filter:brightness(1.12)}
.mixleg{display:flex;flex-wrap:wrap;gap:4px 15px;margin:9px 0 2px;font-size:11.5px;
  color:var(--muted)}
.mixleg span{display:flex;align-items:center;gap:5px}
.mixleg i{width:11px;height:11px;border-radius:2px;display:inline-block}
/* «n.d.» sull'assortimento: la zona ha troppi pochi ordini perche' la quota per
   famiglia significhi qualcosa. Grigio e tratteggiato, cosi' non si confonde con
   una barra vera che per caso e' tutta di un colore. */
.mixbar.nd{background:repeating-linear-gradient(45deg,#f2f3f6 0 6px,#e8eaef 6px 12px)}