/* =====================================================================
   Gestionale magazzino — foglio di stile
   Progettato prima per il cellulare, poi ampliato per il PC
   ===================================================================== */

:root {
  --sfondo:          #0f1117;
  --superficie:      #191c26;
  --superficie-alta: #232734;
  --bordo:           #2e3342;
  --testo:           #e8eaf0;
  --testo-tenue:     #9aa1b3;
  --accento:         #4f7cff;
  --accento-scuro:   #3a63d8;
  --verde:           #2ec27e;
  --giallo:          #e5a50a;
  --rosso:           #e0455c;
  --raggio:          12px;
  --raggio-piccolo:  8px;
  --ombra:           0 4px 20px rgba(0, 0, 0, .35);
  --altezza-nav:     64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--sfondo);
  color: var(--testo);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

.nascosto { display: none !important; }

/* ------------------------------------------------------------ LOGIN */
.schermata-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.riquadro-login {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 40px 32px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: var(--ombra);
}

.logo-login { font-size: 56px; margin-bottom: 8px; }
.riquadro-login h1 { font-size: 22px; margin-bottom: 28px; font-weight: 600; }
.riquadro-login input { margin-bottom: 16px; }

/* ------------------------------------------------------------ TESTATA */
.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}

.testata-titolo { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.logo { font-size: 22px; }

/* ------------------------------------------------------------ CONTENUTO */
main {
  padding: 16px;
  padding-bottom: calc(var(--altezza-nav) + 32px + env(safe-area-inset-bottom));
  max-width: 1100px;
  margin: 0 auto;
}

/* ------------------------------------------------------------ NAVIGAZIONE */
.barra-navigazione {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  background: var(--superficie);
  border-top: 1px solid var(--bordo);
  padding-bottom: env(safe-area-inset-bottom);
}

.voce-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px;
  background: none;
  border: none;
  color: var(--testo-tenue);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s;
  min-height: var(--altezza-nav);
  justify-content: center;
}

.voce-nav.attiva { color: var(--accento); }
.icona-nav { font-size: 20px; line-height: 1; }

/* ------------------------------------------------------------ CONTROLLI */
input, select, textarea, button {
  font-family: inherit;
  font-size: 16px;   /* 16px evita lo zoom automatico su iOS */
}

input, select, textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--superficie-alta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  color: var(--testo);
  outline: none;
  transition: border-color .15s;
}

input:focus, select:focus, textarea:focus { border-color: var(--accento); }
input::placeholder { color: var(--testo-tenue); }

.bottone {
  padding: 13px 18px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  background: var(--superficie-alta);
  color: var(--testo);
  cursor: pointer;
  font-weight: 500;
  transition: filter .15s, transform .05s;
  white-space: nowrap;
}

.bottone:hover  { filter: brightness(1.15); }
.bottone:active { transform: scale(.98); }
.bottone:disabled { opacity: .45; cursor: not-allowed; }

.bottone.primario  { background: var(--accento); border-color: var(--accento); color: #fff; }
.bottone.verde     { background: var(--verde);  border-color: var(--verde);  color: #04231a; }
.bottone.rosso     { background: var(--rosso);  border-color: var(--rosso);  color: #fff; }
.bottone.fantasma  { background: transparent; }
.bottone.largo     { width: 100%; }
.bottone.piccolo   { padding: 8px 12px; font-size: 14px; }
.bottone.grande    { padding: 18px; font-size: 17px; font-weight: 600; }

/* ------------------------------------------------------------ SCHEDE */
.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 18px;
  margin-bottom: 14px;
}

.scheda-titolo {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--testo-tenue);
  margin-bottom: 14px;
  font-weight: 600;
}

/* ------------------------------------------------------------ SCANSIONE */
.riga-scansione { display: flex; gap: 8px; margin-bottom: 12px; }
.riga-scansione input { flex: 1; font-family: ui-monospace, 'SF Mono', monospace; }

#lettore-video {
  width: 100%;
  border-radius: var(--raggio);
  overflow: hidden;
  margin-bottom: 12px;
}

#lettore-video video { width: 100% !important; display: block; }

.suggerimento {
  font-size: 13px;
  color: var(--testo-tenue);
  line-height: 1.5;
}

/* --------------------------------------------- prodotto trovato */
.prodotto-trovato { border-color: var(--accento); }

.prodotto-sku {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 17px;
  font-weight: 600;
  color: var(--accento);
  word-break: break-all;
  margin-bottom: 6px;
}

.prodotto-descrizione {
  font-size: 14px;
  color: var(--testo-tenue);
  line-height: 1.5;
  margin-bottom: 14px;
}

.griglia-giacenze {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.riquadro-giacenza {
  background: var(--superficie-alta);
  border-radius: var(--raggio-piccolo);
  padding: 12px 8px;
  text-align: center;
}

.riquadro-giacenza .numero { font-size: 24px; font-weight: 700; line-height: 1.1; }
.riquadro-giacenza .etichetta {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--testo-tenue);
  margin-top: 4px;
}

.riquadro-giacenza.evidenziato { background: var(--accento); color: #fff; }
.riquadro-giacenza.evidenziato .etichetta { color: rgba(255,255,255,.75); }

/* --------------------------------------------- azioni carico/scarico */
.controllo-quantita {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.controllo-quantita input {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  padding: 12px 4px;
}

.bottone-passo {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.azioni-doppie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ------------------------------------------------------------ TABELLE */
.contenitore-tabella {
  overflow-x: auto;
  border-radius: var(--raggio);
  border: 1px solid var(--bordo);
  -webkit-overflow-scrolling: touch;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
  background: var(--superficie-alta);
  padding: 11px 12px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--testo-tenue);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

td {
  padding: 11px 12px;
  border-top: 1px solid var(--bordo);
  white-space: nowrap;
}

tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--superficie-alta); }

td.sku { font-family: ui-monospace, monospace; font-weight: 500; }
td.numerico { text-align: right; font-variant-numeric: tabular-nums; }
td.descrizione {
  white-space: normal;
  min-width: 240px;
  max-width: 420px;
  color: var(--testo-tenue);
  font-size: 13px;
}

/* ------------------------------------------------------------ ETICHETTE STATO */
.pillola {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.pillola.ok           { background: rgba(46,194,126,.15); color: var(--verde); }
.pillola.sotto_scorta { background: rgba(229,165,10,.15);  color: var(--giallo); }
.pillola.critico      { background: rgba(224,69,92,.15);   color: var(--rosso); }
.pillola.esaurito     { background: rgba(224,69,92,.28);   color: var(--rosso); }

.positivo { color: var(--verde); font-weight: 600; }
.negativo { color: var(--rosso); font-weight: 600; }

/* ------------------------------------------------------------ FILTRI */
.filtri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.filtri input[type="search"] { grid-column: 1 / -1; }

/* ------------------------------------------------------------ RIEPILOGO */
.griglia-statistiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.statistica {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 18px;
}

.statistica .numero { font-size: 30px; font-weight: 700; line-height: 1.1; }
.statistica .etichetta {
  font-size: 12px;
  color: var(--testo-tenue);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.statistica.allarme .numero { color: var(--rosso); }
.statistica.attenzione .numero { color: var(--giallo); }

/* ------------------------------------------------------------ NOTIFICHE */
.notifiche {
  position: fixed;
  bottom: calc(var(--altezza-nav) + 16px + env(safe-area-inset-bottom));
  left: 16px; right: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.notifica {
  background: var(--superficie-alta);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--accento);
  border-radius: var(--raggio-piccolo);
  padding: 14px 16px;
  box-shadow: var(--ombra);
  font-size: 14px;
  animation: entra .2s ease;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

.notifica.successo { border-left-color: var(--verde); }
.notifica.errore   { border-left-color: var(--rosso); }
.notifica.avviso   { border-left-color: var(--giallo); }

@keyframes entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------ VARIE */
.errore { color: var(--rosso); font-size: 14px; margin-top: 12px; }
.vuoto { text-align: center; padding: 48px 20px; color: var(--testo-tenue); }
.caricamento { text-align: center; padding: 40px; color: var(--testo-tenue); }

.riga-fra { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gruppo-bottoni { display: flex; gap: 8px; flex-wrap: wrap; }

.dettaglio-riga {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--bordo);
  font-size: 14px;
  gap: 16px;
}

.dettaglio-riga:last-child { border-bottom: none; }
.dettaglio-riga .chiave { color: var(--testo-tenue); flex-shrink: 0; }
.dettaglio-riga .valore { text-align: right; word-break: break-word; }

/* ------------------------------------------------------------ SCHERMI GRANDI */
@media (min-width: 820px) {
  .barra-navigazione {
    position: sticky;
    top: 61px;
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid var(--bordo);
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 0;
  }

  .voce-nav {
    flex-direction: row;
    gap: 8px;
    font-size: 14px;
    min-height: 52px;
  }

  .voce-nav.attiva { border-bottom: 2px solid var(--accento); }
  .icona-nav { font-size: 16px; }

  main { padding: 24px; padding-bottom: 60px; }
  .notifiche { bottom: 24px; left: auto; right: 24px; max-width: 400px; }
  .azioni-doppie { max-width: 480px; }
}