/* ATRIA ONE — console. Nero e oro del brand. Due temi: chiaro e scuro. */
:root{
  --void:#0A0B0C; --void-2:#15171A;
  --paper:#FBFAF8; --card:#FFFFFF; --panel:#F4F1EC;
  --ink:#101113; --soft:#4A4F55; --muted:#82878E;
  --line:#E3DFD8; --gold:#B4924B; --gold-lt:#C2A15E;
  --verde:#2E7D5B; --rosso:#B3372B; --ambra:#B07A1E; --blu:#2B5F94; --viola:#6A4C93;
  --ombra:0 24px 60px -20px rgba(0,0,0,.45);
  --pad:clamp(16px,3vw,32px);
}

/* Tema scuro: stesso impianto, fondali profondi e accenti più luminosi
   (i colori scuri dei badge sul nero non si leggerebbero). */
:root[data-tema="scuro"]{
  --paper:#0C0D0F; --card:#141619; --panel:#1B1E22;
  --ink:#ECEDED; --soft:#B4B9BF; --muted:#868C93;
  --line:#282C31; --gold:#C2A15E; --gold-lt:#DBC28A;
  --verde:#5FBF8F; --rosso:#E08B7F; --ambra:#D9A94E; --blu:#7BA6D4; --viola:#A98BD8;
  --ombra:0 24px 60px -20px rgba(0,0,0,.75);
}
:root[data-tema="scuro"] .topbar{background:#000;border-bottom-color:var(--gold)}
:root[data-tema="scuro"] input,
:root[data-tema="scuro"] select,
:root[data-tema="scuro"] textarea{background:#0F1114;color:var(--ink)}
:root[data-tema="scuro"] .btn{background:var(--ink);color:#0C0D0F;border-color:var(--ink)}
:root[data-tema="scuro"] .btn.chiaro{background:transparent;color:var(--ink)}
:root[data-tema="scuro"] .btn.chiaro:hover{background:var(--ink);color:#0C0D0F}
:root[data-tema="scuro"] .avviso-ok{background:rgba(95,191,143,.10);color:#8fd8b4}
:root[data-tema="scuro"] .avviso-errore{background:rgba(224,139,127,.10);color:#eaa79c}
:root[data-tema="scuro"] .avvertenza{background:rgba(224,139,127,.10);color:#eaa79c}
:root[data-tema="scuro"] .modale{background:rgba(0,0,0,.7)}
:root[data-tema="scuro"] .ph{background:linear-gradient(135deg,#141518,#0a0b0c)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--paper);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ---------- barra superiore ---------- */
.topbar{background:var(--void);color:#ECEDED;display:flex;align-items:center;gap:22px;
  padding:0 var(--pad);min-height:56px;flex-wrap:wrap;
  border-bottom:2px solid var(--gold)}
.brand{font-size:14px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;padding:14px 0}
.brand span{display:block;font-size:9px;letter-spacing:.3em;color:var(--gold-lt);margin-top:2px}
.nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.nav a{text-decoration:none;color:#B9BEC4;font-size:13.5px;padding:8px 13px;border-radius:3px}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a.on{color:var(--void);background:var(--gold-lt);font-weight:500}
.me{display:flex;align-items:center;gap:14px;font-size:12.5px;color:#9AA0A5}
.esci{color:#9AA0A5;text-decoration:none;border:1px solid rgba(255,255,255,.22);padding:5px 11px;border-radius:3px}
.esci:hover{color:#fff;border-color:#fff}
.tema{background:none;border:1px solid rgba(255,255,255,.22);color:#9AA0A5;width:30px;height:28px;
  border-radius:3px;cursor:pointer;font-size:14px;line-height:1;padding:0}
.tema:hover{color:#fff;border-color:#fff}

.wrap{max-width:1180px;margin:0 auto;padding:26px var(--pad) 60px}
.foot{text-align:center;color:var(--muted);font-size:11.5px;padding:0 0 26px}

/* ---------- intestazione pagina ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head h1{font-size:24px;font-weight:400;letter-spacing:-.01em}
.azioni{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- riquadri ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px 20px;margin-bottom:18px}
.card h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px}
.griglia{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* contatori dashboard */
.kpi{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px 18px;text-decoration:none;display:block}
.kpi:hover{border-color:var(--gold)}
.kpi .n{font-size:30px;font-weight:300;line-height:1.1}
.kpi .t{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.kpi.evidenza{border-left:3px solid var(--gold)}

/* ---------- tabelle ---------- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel)}
td.num{font-variant-numeric:tabular-nums;text-align:right}
.tab-vuota{color:var(--muted);padding:26px 10px;text-align:center}

/* ---------- badge ---------- */
.badge{display:inline-block;font-size:11px;letter-spacing:.06em;padding:3px 9px;border-radius:99px;
  border:1px solid currentColor;white-space:nowrap}
.badge-verde{color:var(--verde)} .badge-rosso{color:var(--rosso)} .badge-ambra{color:var(--ambra)}
.badge-blu{color:var(--blu)} .badge-viola{color:var(--viola)} .badge-oro{color:var(--gold)}
.badge-grigio{color:var(--muted)}

/* ---------- pulsanti e form ---------- */
.btn{display:inline-block;background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:9px 18px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-radius:3px;
  cursor:pointer;text-decoration:none;font-family:inherit;transition:background .25s,color .25s}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#1b160a}
.btn.chiaro{background:transparent;color:var(--ink)}
.btn.chiaro:hover{background:var(--ink);color:#fff}
.btn.piccolo{padding:6px 12px;font-size:11px}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:3px;padding:9px 11px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.campo{margin-bottom:14px}
.riga-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.riga-form .campo{flex:1;min-width:150px;margin-bottom:0}

/* ---------- avvisi ---------- */
.avviso{border-radius:4px;padding:11px 15px;margin-bottom:16px;font-size:14px;border-left:3px solid}
.avviso-info{background:var(--panel);border-color:var(--gold)}
.avviso-ok{background:#EAF5EF;border-color:var(--verde);color:#1d5540}
.avviso-errore{background:#FBECEA;border-color:var(--rosso);color:#8a2b1f}

/* ---------- popup centrato (mai banner in calce) ---------- */
.modale{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(10,11,12,.55);padding:20px}
.modale.aperta{display:flex}
.modale .scheda{background:var(--card);border:1px solid var(--line);border-radius:6px;
  width:100%;max-width:520px;max-height:88vh;overflow:auto;box-shadow:0 24px 60px -20px rgba(0,0,0,.45)}
.modale .testa{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.modale .testa h3{font-size:15px;font-weight:600;letter-spacing:.01em}
.modale .chiudi{background:none;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px;width:auto}
.modale .chiudi:hover{color:var(--ink)}
.modale .corpo{padding:20px}
.modale .piede{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line);
  background:var(--panel);flex-wrap:wrap}
.btn.pericolo{background:var(--rosso);border-color:var(--rosso)}
.btn.pericolo:hover{background:#8a2b1f;border-color:#8a2b1f;color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--rosso);border-color:var(--rosso);color:#fff}
.avvertenza{background:#FBECEA;border-left:3px solid var(--rosso);border-radius:0 4px 4px 0;
  padding:12px 15px;margin-bottom:16px;font-size:14px;color:#8a2b1f}

/* riga di azioni nelle tabelle */
.azioni-riga{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* griglia dei pezzi per misura (carico di un lotto) */
.misure-carico{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;margin-top:6px}
.misure-carico .pezzo{display:flex;flex-direction:column;gap:3px;margin:0}
.misure-carico .pezzo span{font-size:11px;color:var(--muted);text-align:center;letter-spacing:.06em}
.misure-carico .pezzo input{text-align:center;padding:8px 4px}

/* giacenze */
.giacenza-zero{color:var(--rosso);font-weight:600}
.giacenza-bassa{color:var(--ambra);font-weight:600}

/* elenco richiudibile */
details.piega{border:1px solid var(--line);border-radius:6px;background:var(--card);margin-bottom:18px}
details.piega>summary{cursor:pointer;padding:14px 20px;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:600;list-style:none}
details.piega>summary::-webkit-details-marker{display:none}
details.piega>summary::before{content:"▸ ";color:var(--gold)}
details.piega[open]>summary::before{content:"▾ "}
details.piega>summary:hover{color:var(--ink)}
details.piega .contenuto{padding:0 20px 18px}

/* ---------- login ---------- */
.login-box{max-width:380px;margin:9vh auto;background:var(--card);border:1px solid var(--line);
  border-radius:6px;padding:32px 30px}
.login-box h1{font-size:15px;letter-spacing:.22em;text-transform:uppercase;text-align:center;margin-bottom:4px}
.login-box .sub{text-align:center;color:var(--muted);font-size:12px;margin-bottom:24px}

/* ---------- scansione (telefono) ---------- */
.scan-esito{border-radius:6px;padding:20px;margin-bottom:18px;border:2px solid}
.scan-ok{border-color:var(--verde);background:#EAF5EF}
.scan-ko{border-color:var(--rosso);background:#FBECEA}
.scan-esito .grande{font-size:22px;font-weight:500}

/* ---------- foglio etichette (stampa) ---------- */
.foglio{background:#fff;border:1px solid var(--line);border-radius:6px;padding:10mm;
  display:grid;grid-template-columns:repeat(4,1fr);gap:4mm}
.etichetta{border:1px dashed #bbb;border-radius:2mm;padding:3mm;text-align:center;break-inside:avoid}
.etichetta svg{width:100%;height:auto;max-width:28mm}
.etichetta .mod{font-size:10pt;font-weight:700;margin-top:1mm}
.etichetta .mis{font-size:9pt}
.etichetta .lot{font-size:7pt;color:#555;letter-spacing:.04em}
@media print{
  /* In stampa il tema non conta: le etichette vanno sempre nere su bianco,
     altrimenti col tema scuro uscirebbero illeggibili (o si berrebbero il toner). */
  :root, :root[data-tema="scuro"]{
    --paper:#fff; --card:#fff; --panel:#fff; --ink:#000; --soft:#333; --muted:#555; --line:#ddd;
  }
  .topbar,.foot,.page-head,.no-print{display:none !important}
  body{background:#fff;color:#000}
  .wrap{padding:0;max-width:none}
  .foglio{border:0;padding:0;gap:3mm;background:#fff}
  .etichetta{border-color:#ddd;color:#000}
  .etichetta svg [fill]{fill:#000}
}

@media(max-width:860px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.g2{grid-template-columns:1fr}
  .nav{order:3;width:100%;padding-bottom:8px}
  table{font-size:13.5px}
  .nascondi-mobile{display:none}
}