/* Palette e componenti condivisi da tutte le pagine.
   Sono gli stessi colori dell'ottimizzatore, cosi' passando da una pagina
   all'altra non sembra di cambiare programma. */

:root{
  --paper:#F2F3FA; --surface:#FFFFFF; --surface-2:#EFF1F9;
  --ink:#171A28; --ink-2:#565E7C; --ink-3:#8B93AE;
  --line:#E2E4F0; --line-2:#EDEFF7;
  --accent:#5B4BDB; --accent-2:#7C6CF5; --accent-soft:#EDEBFF;
  --quota:#0F8F6B; --warn:#8A5A12; --warn-soft:#FAF0DF;
  --danger:#C0392B; --danger-soft:#FBE9E7;
  --shadow:0 1px 2px rgba(23,26,40,.05), 0 12px 30px -18px rgba(23,26,40,.22);
  --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"Liberation Mono","DejaVu Sans Mono",monospace;
  --r-card:14px; --r-input:9px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1017; --surface:#171A23; --surface-2:#1E2230;
    --ink:#E7EBF5; --ink-2:#98A1BC; --ink-3:#6B7492;
    --line:#272C3B; --line-2:#1F2432;
    --accent:#9B8EFF; --accent-2:#B4A9FF; --accent-soft:#1E1B3D;
    --quota:#35D6A4; --warn:#E0A64F; --warn-soft:#2A2318;
    --danger:#F08A7E; --danger-soft:#331E1C;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
  }
}

.pagina *,.scatola *,.navbar *,#barraLavoro *,.finestraMin *,.toast *{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5}

/* ---------- barra di navigazione ---------- */
.navbar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:9px 16px;background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.navbar .logo{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--accent);
  font-size:15px;letter-spacing:-.01em;margin-right:10px;text-decoration:none}
.navbar a.voce{
  padding:6px 12px;border-radius:999px;font-size:13px;color:var(--ink-2);text-decoration:none;
  border:1px solid transparent;white-space:nowrap;
}
.navbar a.voce:hover{background:var(--surface-2);color:var(--ink)}
.navbar a.voce.attiva{background:var(--accent-soft);color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 32%,transparent);font-weight:600}
.navbar .destra{margin-left:auto;display:flex;align-items:center;gap:9px}
.navbar .chi{font-size:12px;color:var(--ink-3);font-family:var(--mono)}

.pagina{max-width:1180px;margin:0 auto;padding:20px 16px 60px}
h1.titolo{font-size:20px;margin:0 0 4px;letter-spacing:-.01em}
p.occhiello{margin:0 0 20px;color:var(--ink-2);font-size:13px}

/* ---------- riquadri ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);margin-bottom:16px}
.card>header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.card>header h2{margin:0;font-size:14px;color:var(--accent)}
.card>header .hint{margin-left:auto;font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.card .corpo{padding:14px 16px 16px}

/* ---------- comandi ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 14px;
  font-size:13px;font-family:inherit;cursor:pointer;text-decoration:none;white-space:nowrap;
}
.btn:hover{border-color:var(--accent-2);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn.pericolo{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.btn:disabled{opacity:.5;cursor:default}
.btn.piccolo{padding:4px 10px;font-size:12px}

/* Attenzione: questo foglio viaggia anche sulla pagina del taglio, insieme a
   quello dell'ottimizzatore. Le regole sui campi vanno quindi confinate ai
   nostri contenitori: una regola generica su "input, select" si allargherebbe
   ai campi dell'ottimizzatore e ne romperebbe le griglie. */
.pagina input,.pagina select,.pagina textarea,
.scatola input,.scatola select,.scatola textarea,
#barraLavoro input,#barraLavoro select,
.finestraMin input{
  width:100%;padding:8px 10px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink);border-radius:var(--r-input);font-size:13px;font-family:inherit;
}
.pagina input:focus,.pagina select:focus,.pagina textarea:focus,
.scatola input:focus,.scatola select:focus,.scatola textarea:focus,
#barraLavoro input:focus,#barraLavoro select:focus,
.finestraMin input:focus{outline:none;border-color:var(--accent-2);background:var(--surface)}
.pagina input[type=number]{font-family:var(--mono)}
label.campo{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);font-weight:600;margin-bottom:4px}
.griglia{display:grid;gap:11px}
.griglia.due{grid-template-columns:1fr 1fr}
.griglia.tre{grid-template-columns:1fr 1fr 1fr}
@media (max-width:640px){.griglia.due,.griglia.tre{grid-template-columns:1fr}}

/* ---------- tabelle ---------- */
table.dati{width:100%;border-collapse:collapse;font-size:13px}
table.dati th{
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);font-weight:700;padding:0 10px 7px 0;border-bottom:1px solid var(--line);
}
table.dati td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.dati td.n,table.dati th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.dati tr:hover td{background:var(--surface-2)}
table.dati .azioni{display:flex;gap:6px;justify-content:flex-end}

.pillola{font-size:11px;font-family:var(--mono);border-radius:999px;padding:2px 9px;
  border:1px solid var(--line);color:var(--ink-3);white-space:nowrap}
.pillola.ok{border-color:color-mix(in srgb,var(--quota) 50%,transparent);color:var(--quota);
  background:color-mix(in srgb,var(--quota) 10%,transparent)}
.pillola.bozza{border-color:color-mix(in srgb,var(--warn) 50%,transparent);color:var(--warn);
  background:color-mix(in srgb,var(--warn) 10%,transparent)}

.vuoto{padding:26px 10px;text-align:center;color:var(--ink-3);font-size:13px}
.errore{background:var(--danger-soft);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);
  color:var(--danger);border-radius:var(--r-input);padding:9px 12px;font-size:13px;margin-bottom:12px}
.ok{background:color-mix(in srgb,var(--quota) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--quota) 40%,transparent);
  color:var(--quota);border-radius:var(--r-input);padding:9px 12px;font-size:13px;margin-bottom:12px}

/* ---------- avviso a scomparsa ---------- */
.toast{
  position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-140%);
  background:var(--surface);border:1px solid var(--accent);border-radius:999px;
  padding:9px 18px;box-shadow:var(--shadow);font-size:13px;z-index:90;
  transition:transform .22s ease;max-width:92vw;
}
.toast.su{transform:translateX(-50%) translateY(0)}
.toast.male{border-color:var(--danger);color:var(--danger)}

/* ---------- pagina del taglio: barra del lavoro ---------- */
#barraLavoro{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:12.5px;
}
#barraLavoro .et{font-size:10px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);font-weight:700}
#barraLavoro input,#barraLavoro select{width:auto;min-width:150px;padding:5px 9px;font-size:12.5px}
#barraLavoro .stato{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--quota)}

/* Con il tasto della minuteria le colonne diventano sei: senza questa riga
   il sesto figlio andrebbe a capo da solo, portandosi dietro la X. */
.ghead.conMin{
  grid-template-columns:46px 14px minmax(0,1fr) minmax(0,auto) auto 26px;
}
.ghead.conMin .gname{min-width:0}

/* ---------- tasto della minuteria sull'intestazione del mobile ---------- */
.btnMin{
  display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface-2);
  color:var(--ink-3);cursor:pointer;font-family:var(--mono);font-size:11px;
}
.btnMin:hover{border-color:var(--quota);color:var(--quota)}
.btnMin.pieno{border-color:color-mix(in srgb,var(--quota) 55%,transparent);
  color:var(--quota);background:color-mix(in srgb,var(--quota) 13%,transparent);font-weight:700}
.btnMin .n:empty{display:none}

/* ---------- popup della minuteria ---------- */
.veloMin{position:fixed;inset:0;background:rgba(10,12,20,.45);z-index:80;
  display:grid;place-items:center;padding:18px}
.finestraMin{width:100%;max-width:460px;max-height:82vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--accent);border-radius:var(--r-card);
  box-shadow:var(--shadow);overflow:hidden}
.finestraMin header{display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--line-2);color:var(--quota)}
.finestraMin header h4{margin:0;font-size:13.5px;color:var(--ink);flex:1}
.finestraMin header .q{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.cercaMin{padding:11px 14px 8px}
.cercaMin input{padding:7px 10px;font-size:12.5px}
.listaMin{flex:1;overflow:auto;padding:0 10px 10px;display:flex;flex-direction:column;gap:3px}
.rigaMin{display:grid;grid-template-columns:minmax(0,1fr) 92px 58px;gap:8px;align-items:center;
  padding:6px 7px;border-radius:8px;font-size:12.5px;border:1px solid transparent}
.rigaMin.attiva{background:color-mix(in srgb,var(--quota) 10%,transparent);
  border-color:color-mix(in srgb,var(--quota) 32%,transparent)}
.rigaMin .art{display:flex;flex-direction:column;min-width:0}
.rigaMin .art .co{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.rigaMin .passo{display:grid;grid-template-columns:26px 1fr 26px;gap:3px;align-items:center;
  border:1px solid var(--line);border-radius:999px;background:var(--surface-2);padding:2px}
.rigaMin .passo button{border:none;background:var(--surface);color:var(--ink-2);border-radius:999px;
  height:22px;cursor:pointer;font-size:14px;line-height:1;font-family:inherit}
.rigaMin .passo button:hover{color:var(--accent)}
.rigaMin .passo b{text-align:center;font-family:var(--mono);font-size:12.5px}
.rigaMin .tot{font-family:var(--mono);font-size:11.5px;color:var(--quota);
  text-align:right;font-weight:700}
.rigaMin .tot.off{color:var(--ink-3);font-weight:400}
.vuotoMin{padding:22px 10px;text-align:center;color:var(--ink-3);font-size:12.5px}
.finestraMin footer{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-top:1px solid var(--line-2);background:var(--surface-2)}
.finestraMin footer .tot{margin-left:auto;font-family:var(--mono);font-size:12px;
  font-weight:700;color:var(--accent)}