/* ============================================================
   MAGAZZINO — sezione propria, fuori dal guscio della Contabilità
   ============================================================
   Tutto sotto .mag-wrap, come fa zappy.css: serve a non pescare per
   sbaglio le classi generiche definite altrove, e a non farsi pescare.
   I colori vengono solo dai token del sistema, così il tema scuro non
   ha bisogno di una sola riga in più.
   Nessuna griglia a colonne fisse: qui dentro si usa auto-fit, perché
   la larghezza che conta è quella del contenitore, non della finestra.
   ============================================================ */

.mag-wrap {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 18px 110px;
  font-family: var(--font);
  color: var(--t1);
}

/* ---------- testata ---------- */
.mag-testata { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.mag-occhiello { font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--verde-vivo); margin-bottom: 6px; }
.mag-titolo { font-family: var(--font-display); font-size: 27px; font-weight: 700; letter-spacing: -.4px; line-height: 1.1; margin: 0; }

/* ---------- numeri in alto ---------- */
.mag-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 20px; }
.mag-kpi-card { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
.mag-kpi-card.attenzione { border-color: var(--attesa); background: var(--attesa-bg); }
.mag-kpi-lab { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); }
.mag-kpi-val { font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: -.6px; margin-top: 5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mag-kpi-nota { font-size: 12px; color: var(--t3); margin-top: 3px; line-height: 1.45; }

/* ---------- selettore di sezione ---------- */
.mag-seg { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
.mag-seg::-webkit-scrollbar { display: none; }
.mag-seg-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  min-height: 42px; padding: 8px 15px;
  background: var(--card); border: 1px solid var(--bordo); border-radius: 100px;
  font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--t2);
  cursor: pointer; white-space: nowrap; transition: border-color .18s, color .18s, background .18s;
}
.mag-seg-btn:hover { border-color: var(--verde); color: var(--t1); }
.mag-seg-btn.on { background: var(--verde); border-color: var(--verde); color: #fff; }
.mag-seg-btn.on svg { color: #fff; }
.mag-pallino { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px; background: var(--cancellato); color: #fff; font-size: 11.5px; font-weight: 700; }
.mag-pallino.calmo { background: var(--card-2); color: var(--t2); }
.mag-seg-btn.on .mag-pallino { background: rgba(255,255,255,.25); color: #fff; }

/* ---------- filtri ---------- */
.mag-filtri { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.mag-cerca { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 0; }
.mag-cerca svg { position: absolute; left: 13px; color: var(--t3); pointer-events: none; }
.mag-cerca input {
  width: 100%; min-height: 44px; padding: 10px 46px 10px 38px;
  border: 1px solid var(--bordo); border-radius: 100px; background: var(--card);
  font-family: var(--font); font-size: 14.5px; color: var(--t1); outline: none;
}
.mag-cerca input:focus { border-color: var(--verde); }
.mag-scan {
  position: absolute; right: 5px; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--verde-soft);
  color: var(--verde-ink); cursor: pointer;
}
.mag-scan:hover { background: var(--verde); color: #fff; }
.mag-select { min-height: 44px; padding: 8px 14px; border: 1px solid var(--bordo); border-radius: 100px; background: var(--card); font-family: var(--font); font-size: 13.5px; color: var(--t2); }
.mag-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13.5px; color: var(--t2); cursor: pointer; }
.mag-check.larga { flex: 1 1 100%; }
.mag-check input { width: 20px; height: 20px; accent-color: var(--verde); }
@media (hover: none) { .mag-check input { width: 22px; height: 22px; } }

/* ---------- schede prodotto ---------- */
.mag-lista { display: flex; flex-direction: column; gap: 10px; }
.mag-card { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); padding: 14px 16px; }
.mag-card.allerta { border-left: 3px solid var(--attesa); }
.mag-card-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mag-card-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1 1 260px; }
.mag-nome { font-size: 15.5px; font-weight: 700; color: var(--t1); overflow-wrap: anywhere; }
.mag-marca { font-size: 12.5px; color: var(--t3); }
.mag-fam { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 100px; background: var(--card-2); color: var(--t2); }
.mag-uso { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 100px; }
.mag-uso.rivendita { background: var(--verde-soft); color: var(--verde-ink); }
.mag-uso.cabina { background: var(--completato-bg); color: var(--completato-t); }

.mag-quantita { display: flex; gap: 8px; flex: none; }
.mag-q { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 62px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--card-2); }
.mag-q b { font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mag-q span { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--t3); margin-top: 3px; }
.mag-q.bassa { background: var(--attesa-bg); }
.mag-q.bassa b { color: var(--attesa-t); }

.mag-card-dati { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--t3); margin-top: 10px; font-variant-numeric: tabular-nums; }
.mag-card-dati .mag-margine { color: var(--verde-vivo); font-weight: 600; }
.mag-scad { color: var(--t2); }
.mag-scad.vicina { color: var(--attesa-t); font-weight: 600; }
.mag-scad.scaduto { color: var(--cancellato); font-weight: 700; }
.mag-card-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- bottoni ---------- */
.mag-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 8px 15px;
  background: var(--card); border: 1px solid var(--bordo); border-radius: 100px;
  font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--t1);
  cursor: pointer; transition: border-color .18s, color .18s, transform .18s, background .18s;
}
.mag-btn:hover { border-color: var(--verde); color: var(--verde-ink); transform: translateY(-1px); }
.mag-btn.primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.mag-btn.primario:hover { background: var(--verde-vivo); color: #fff; }
.mag-btn.rosso { color: var(--cancellato); border-color: var(--cancellato-bg); }
.mag-btn.rosso:hover { border-color: var(--cancellato); color: var(--cancellato); }
.mag-btn.piccolo { min-height: 34px; padding: 4px 10px; }
@media (hover: none) { .mag-btn, .mag-seg-btn, .mag-scan, .mag-select { min-height: 44px; } .mag-scan { width: 40px; height: 40px; } }

/* ---------- scheda prodotto / carico ---------- */
.mag-scheda { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); padding: 18px 18px 20px; }
.mag-scheda-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.mag-scheda-testa h2 { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0; }
.mag-intro { font-size: 13.5px; color: var(--t2); line-height: 1.6; margin: 0 0 16px; }
.mag-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.mag-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mag-etichetta { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--t3); }
.mag-campo input, .mag-campo select {
  width: 100%; min-height: 44px; padding: 10px 13px;
  border: 1px solid var(--bordo); border-radius: var(--r-sm); background: var(--sfondo);
  font-family: var(--font); font-size: 14.5px; color: var(--t1); outline: none;
}
.mag-campo input:focus, .mag-campo select:focus { border-color: var(--verde); background: var(--card); }
.mag-aiuto { font-size: 11.5px; color: var(--t3); line-height: 1.45; }
/* (1.80) nel carico: in quale categoria andra' la spesa */
.mag-dove-spesa { grid-column: 1 / -1; font-size: 12.5px; color: var(--t2); margin-top: -6px; }
.mag-dove-spesa[hidden] { display: none; }
/* (1.86) sotto "Spesa in Contabilità": dove andrà nella Redditività */
.mag-dest { font-size: 11.5px; line-height: 1.45; color: var(--t2); }
.mag-dest:empty { display: none; }
.mag-dest.linea { color: #3559b8; }
[data-theme="dark"] .mag-dest.linea { color: #9db8ff; }
.mag-con-scan { position: relative; display: flex; align-items: center; }
.mag-con-scan input, .mag-con-scan select { padding-right: 46px; }
.mag-scheda-piede { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }

/* ---------- blocchi, righe minori ---------- */
.mag-sotto { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.mag-blocco { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; }
.mag-blocco h3 { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); margin: 0 0 10px; }
.mag-riga-mini { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--bordo-soft); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mag-riga-mini:last-child { border-bottom: 0; }
.mag-riga-mini.rosso { color: var(--cancellato); }
.mag-mini-nota { color: var(--t3); font-size: 12.5px; }

/* ---------- movimenti ---------- */
.mag-mov { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--bordo-soft); }
.mag-mov:last-child { border-bottom: 0; }
.mag-mov-tipo { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; background: var(--card-2); color: var(--t2); flex: none; }
.mag-mov-tipo.carico { background: var(--verde-soft); color: var(--verde-ink); }
.mag-mov-tipo.vendita { background: var(--completato-bg); color: var(--completato-t); }
.mag-mov-tipo.uso { background: var(--attesa-bg); color: var(--attesa-t); }
.mag-mov-tipo.rettifica { background: var(--cancellato-bg); color: var(--cancellato-t); }
.mag-mov-nome { flex: 1 1 160px; min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.mag-mov-qta { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13.5px; }
.mag-mov-quando { font-size: 12px; color: var(--t3); }

/* ---------- da ordinare ---------- */
.mag-ordini-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.mag-riga-ordine { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--bordo-soft); cursor: pointer; }
.mag-riga-ordine:last-child { border-bottom: 0; }
.mag-riga-ordine input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--verde); flex: none; }
.mag-ord-nome { flex: 1 1 200px; min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.mag-ord-liv { display: flex; gap: 8px; flex-wrap: wrap; }
.mag-bassa { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 100px; background: var(--attesa-bg); color: var(--attesa-t); font-variant-numeric: tabular-nums; }

/* ---------- vuoto ---------- */
.mag-vuoto { text-align: center; padding: 48px 20px; color: var(--t2); }
.mag-vuoto-ico { color: var(--t3); margin-bottom: 12px; display: flex; justify-content: center; }
.mag-vuoto-tit { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--t1); margin-bottom: 6px; }
.mag-vuoto p { font-size: 14px; line-height: 1.6; max-width: 430px; margin: 0 auto; }

/* ---------- quante ne sposto ---------- */
.mag-modale { position: fixed; inset: 0; z-index: 8000; background: rgba(11,26,20,.42); display: flex; align-items: center; justify-content: center; padding: 20px; }
.mag-modale-scatola { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); padding: 22px; width: 100%; max-width: 340px; box-shadow: var(--shadow-lg); }
.mag-modale-tit { font-family: var(--font-display); font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 18px; }
.mag-stepper { display: flex; align-items: center; justify-content: center; gap: 12px; }
.mag-passo {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--bordo);
  background: var(--card-2); color: var(--t1); font-size: 24px; font-weight: 600; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--font);
}
.mag-passo:hover { border-color: var(--verde); color: var(--verde-ink); }
.mag-stepper input {
  width: 96px; height: 56px; text-align: center; border: 1px solid var(--bordo); border-radius: var(--r-sm);
  background: var(--sfondo); color: var(--t1); font-family: var(--font-display); font-size: 26px; font-weight: 800;
  font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield;
}
.mag-stepper input::-webkit-outer-spin-button, .mag-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mag-stepper input:focus { border-color: var(--verde); }
.mag-modale-nota { text-align: center; font-size: 12.5px; color: var(--t3); margin-top: 10px; }
.mag-modale-piede { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.mag-modale-piede .mag-btn { flex: 1; }

/* ---------- (1.81) vendita al banco ---------- */
.mag-testata-az { display: flex; gap: 8px; flex-wrap: wrap; }
.mag-btn.verde { border-color: var(--verde); color: var(--verde-ink); font-weight: 700; }
.mag-vendita { display: flex; flex-direction: column; gap: 14px; }
.mag-vendita-riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; }
.mag-vendita .mag-stepper { justify-content: flex-start; gap: 8px; }
.mag-vendita .mag-passo { width: 44px; height: 44px; font-size: 21px; }
.mag-vendita .mag-stepper input { width: 72px; height: 46px; min-height: 0; font-size: 21px; padding: 0; }
.mag-vendita-giacenza { margin-top: -8px; }
.mag-vendita-giacenza.attenzione { color: var(--attesa-t); font-weight: 600; }
.mag-vendita-metodi { display: flex; flex-wrap: wrap; gap: 8px; }
.mag-vendita-metodo {
  min-height: 42px; padding: 8px 16px; border-radius: 100px; border: 1.5px solid var(--bordo); background: var(--card);
  font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--t2); cursor: pointer;
}
.mag-vendita-metodo.on { border-color: var(--verde); background: var(--verde-soft); color: var(--verde-ink); }
.mag-vendita-ok { width: 100%; min-height: 52px; font-size: 15.5px; font-weight: 800; }
.mag-vendita-ok:disabled { opacity: .5; cursor: default; transform: none; }

/* ---------- scanner ---------- */
.mag-scanner {
  position: fixed; inset: 0; z-index: 9000;
  background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.mag-scanner video { width: 100%; max-width: 620px; max-height: 66vh; object-fit: cover; border-radius: var(--r); }
.mag-mirino { position: absolute; width: min(74vw, 330px); height: 130px; border: 2px solid var(--verde-vivo); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
.mag-scanner-testo { color: #fff; font-size: 14px; text-align: center; padding: 0 20px; }
.mag-scanner .mag-btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }

@media (max-width: 600px) {
  .mag-wrap { padding: 16px 14px 120px; }
  .mag-titolo { font-size: 23px; }
  .mag-testata .mag-btn { flex: 1 1 100%; }
  .mag-kpi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .mag-kpi-val { font-size: 20px; }
  .mag-scheda { padding: 16px 14px 18px; }
  .mag-card-azioni .mag-btn { flex: 1 1 auto; }
}