/* Imballaggio — la schermata al banco.
 *
 * Parla la lingua di GoFinder: stessi token di ruolo, stessa tipografia (IBM
 * Plex), stessa semantica del colore — verde disponibile, ambra in arrivo,
 * rosso fermati. Chi sta al banco usa tutti e due gli strumenti nella stessa
 * giornata e non deve reimparare niente passando dall'uno all'altro.
 *
 * Quello che cambia rispetto a GoFinder e' il mestiere, non l'aspetto: li' si
 * legge una tabella di prezzi cercando una riga, qui si maneggia un pezzo
 * guardando lo schermo di sfuggita, con i guanti e la pistola in mano. Da qui
 * le tre scelte di questa schermata:
 *
 * 1. **il verdetto e' l'elemento piu' grande.** Dopo ogni sparata dice in una
 *    parola com'e' andata, leggibile da due metri;
 * 2. **cio' che e' fatto si ritira.** Le righe complete si comprimono: lo
 *    spazio va a quello che manca, che e' l'unica cosa da guardare;
 * 3. **i codici sono monospaziati.** Ubicazioni, GOID e contatori si
 *    confrontano a colpo d'occhio solo se stanno in colonna.
 *
 * I font sono serviti da qui, non da un CDN: in magazzino la rete e' quella
 * che e', e una schermata che aspetta un font esterno e' una schermata che
 * l'operatore vede lampeggiare a ogni apertura.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/font/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/font/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/font/ibm-plex-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/font/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/font/ibm-plex-mono-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/font/ibm-plex-mono-700.woff2") format("woff2");
}

:root {
  /* Token di ruolo, gli stessi nomi e gli stessi valori di GoFinder. */
  --pagina: #e9edf1;
  --superficie: #ffffff;
  --superficie-2: #f4f7fa;
  --superficie-scura: #0f2a4a;
  --superficie-scura-2: #103053;

  --testo: #0f2a4a;
  --testo-2: #5b7088;
  --testo-dato: #36475c;
  --testo-su-scuro: #dbe7f2;
  --testo-su-semantico: #ffffff;
  --muted: #7b8898;

  --bordo: #ccd6e1;
  --bordo-tenue: #e4eaf0;
  --bordo-forte: #cdd8e2;

  --verde: #1fa85c;
  --verde-testo: #0f7a40;
  --verde-pillola: #0d7a3e;
  --ambra: #c2790d;
  --ambra-pillola: #94590a;
  --rosso: #c0473b;
  --rosso-pillola: #b03c31;

  --verde-carta: #e6f4ec;
  --ambra-carta: #fbf1de;
  --rosso-carta: #fae9e7;

  --ombra-card: 0 4px 24px rgba(15, 42, 74, 0.1);
  --ombra-tendina: 0 8px 24px rgba(15, 42, 74, 0.16);
  --ombra-modale: 0 14px 36px rgba(15, 42, 74, 0.28);
  --anello-focus: rgba(31, 168, 92, 0.16);

  --r-card: 14px;
  --r-control: 9px;
  --r-chip: 6px;
  --r-pill: 999px;

  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Il corpo cresce con lo schermo: da un metro su un monitor sopra il banco,
     in mano su un tablet. Le due misure sono lo stesso foglio. */
  --corpo: clamp(1rem, 0.88rem + 0.45vw, 1.22rem);
  --dito: 3.25rem;
}

* { box-sizing: border-box; }

/* `hidden` vale `display: none`, ma e' una regola dell'agente utente: qualunque
   `display` scritto qui dentro la batte per specificita'. Senza questa riga la
   barra dei tasti e il contatore restano a schermo anche prima che ci sia un
   ordine aperto — con il tasto principale vuoto, che sembra un guasto. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0 0 6.5rem;
  background: var(--pagina);
  color: var(--testo);
  font-family: var(--sans);
  font-size: var(--corpo);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;  /* il doppio tocco che ingrandisce e' un fastidio */
}

/* Nascosto ma focalizzabile: con display:none il fuoco non ci andrebbe e la
   pistola scriverebbe nel nulla — che a schermo sembra un lettore rotto. */
#lettore {
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------------ testa */

/* La fascia scura di GoFinder: e' il segno che si riconosce da lontano. */
.testa {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: 0.85rem clamp(0.85rem, 3vw, 1.75rem);
  background: linear-gradient(180deg, var(--superficie-scura), var(--superficie-scura-2));
  color: var(--testo-su-scuro);
}

.occhiello {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2, #8aa0b6);
}

.testa h1 {
  margin: 0.1rem 0 0;
  font-size: clamp(1.2rem, 0.95rem + 1.25vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}

.riferimenti {
  margin: 0.18rem 0 0;
  font-family: var(--mono);
  font-size: 0.78em;
  color: var(--testo-su-scuro);
  opacity: 0.75;
}
.riferimenti:empty { display: none; }

.collo {
  display: flex;
  align-items: baseline;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #fff;
}
.collo-fatti { font-size: clamp(2rem, 1.25rem + 3vw, 3rem); font-weight: 700; }
.collo-barra {
  font-size: clamp(1.3rem, 1rem + 1.5vw, 1.9rem);
  opacity: 0.45;
  margin: 0 0.15em;
}
.collo-totali {
  font-size: clamp(1.3rem, 1rem + 1.5vw, 1.9rem);
  opacity: 0.7;
}
body.finito .collo-fatti { color: #6ee7a4; }

/* --------------------------------------------------------------- pannello */

/* La situazione del giorno. Quando c'e' un collo aperto si stringe: mentre si
   imballa lo spazio serve alle righe, non ai totali. */
.pannello {
  margin: clamp(0.6rem, 2vw, 1rem) clamp(0.5rem, 3vw, 1.75rem) 0;
  padding: 0.85rem clamp(0.9rem, 3vw, 1.5rem);
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--r-card);
  box-shadow: var(--ombra-card);
}

.cifre {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1.25rem, 4vw, 2.75rem);
  align-items: baseline;
}

.cifra { display: flex; align-items: baseline; gap: 0.45rem; }

.cifra b {
  font-family: var(--mono);
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
}
.cifra span {
  font-size: 0.78em;
  color: var(--testo-2);
  letter-spacing: -0.005em;
}

.cifra.pronti b   { color: var(--verde-pillola); }
.cifra.attesa b   { color: var(--ambra-pillola); }
.cifra.corso b    { color: var(--testo); }
.cifra.spediti b  { color: var(--testo-2); }

/* Le consegne dichiarate nelle note: "13:30 CRAMER — 1 ordine". E' quello che
   ti dice se conviene aspettare o passare ad altro. */
.attese {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--bordo-tenue);
}
.attesa-pillola {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  background: var(--ambra-carta);
  border: 1px solid #ecd6a8;
  border-radius: var(--r-pill);
  font-size: 0.82em;
  color: var(--ambra-pillola);
}
.attesa-pillola b { font-family: var(--mono); font-weight: 600; }
.attesa-pillola span { opacity: 0.8; }

/* Con un collo aperto: solo i numeri, su una riga, senza le attese. */
body.lavorando .pannello { padding: 0.5rem clamp(0.9rem, 3vw, 1.5rem); }
body.lavorando .cifra b { font-size: 1.05rem; }
body.lavorando .attese { display: none; }

/* --------------------------------------------------------------- verdetto */

/* L'elemento piu' grande della pagina: e' quello che si guarda davvero. */
.verdetto {
  margin: clamp(0.6rem, 2vw, 1rem) clamp(0.5rem, 3vw, 1.75rem) 0;
  padding: clamp(0.9rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 1.75rem);
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--r-card);
  box-shadow: var(--ombra-card);
}

.verdetto-parola {
  margin: 0;
  font-size: clamp(1.6rem, 1.05rem + 2.7vw, 2.7rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.verdetto-dettaglio {
  margin: 0.3rem 0 0;
  font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.05rem);
  color: var(--testo-2);
  max-width: 52ch;
}

body.preso   .verdetto { background: var(--verde-carta); border-color: #bfe3ce; }
body.preso   .verdetto-parola { color: var(--verde-pillola); }
body.preso   .verdetto-dettaglio { color: var(--verde-testo); }

body.ferma   .verdetto { background: var(--rosso-carta); border-color: #eec6c1; }
body.ferma   .verdetto-parola { color: var(--rosso-pillola); }
body.ferma   .verdetto-dettaglio { color: var(--rosso-pillola); opacity: 0.85; }

body.forzato .verdetto { background: var(--ambra-carta); border-color: #ecd6a8; }
body.forzato .verdetto-parola { color: var(--ambra-pillola); }
body.forzato .verdetto-dettaglio { color: var(--ambra-pillola); opacity: 0.85; }

body.finito  .verdetto { background: var(--verde-pillola); border-color: var(--verde-pillola); }
body.finito  .verdetto-parola { color: var(--testo-su-semantico); }
body.finito  .verdetto-dettaglio { color: #d7f0e2; }

/* Un lampo breve per far alzare gli occhi. Niente di piu': chi lavora non deve
   aspettare la fine di un'animazione per sapere se puo' proseguire. */
@keyframes accendi { from { opacity: 0.45; } to { opacity: 1; } }
.verdetto.acceso { animation: accendi 170ms ease-out; }
@media (prefers-reduced-motion: reduce) { .verdetto.acceso { animation: none; } }

.nastro {
  margin: 0.5rem clamp(0.5rem, 3vw, 1.75rem) 0;
  padding: 0.7rem 1rem;
  background: var(--ambra-carta);
  color: var(--ambra-pillola);
  border: 1px solid #ecd6a8;
  border-radius: var(--r-control);
  font-size: 0.9em;
}
.nastro p { margin: 0.1rem 0; }

/* ------------------------------------------------------------------ liste */

main { padding: clamp(0.6rem, 2vw, 1rem) clamp(0.5rem, 3vw, 1.75rem); }

.sezione {
  margin: 1.15rem 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
main > .sezione:first-child { margin-top: 0.35rem; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }

.voce {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.15rem 0.9rem;
  padding: 0.75rem 1rem;
  min-height: var(--dito);
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-left: 4px solid var(--bordo-forte);
  border-radius: var(--r-card);
  box-shadow: var(--ombra-card);
}

.voce.aspetta  { border-left-color: var(--ambra); background: var(--ambra-carta); }
.voce.eccede   { border-left-color: var(--rosso); background: var(--rosso-carta); }
.voce.cambiata { border-left-color: var(--rosso); border-left-style: dashed; }

/* La riga appena toccata, per ritrovarla senza cercarla. */
.voce.tocca { box-shadow: 0 0 0 2px var(--verde), var(--ombra-card); }

/* Fatto: si ritira. Meno alto, meno contrasto, niente ombra — lo spazio va a
   quello che manca ancora. */
.lista-fatte .voce {
  padding: 0.4rem 1rem;
  min-height: 0;
  background: transparent;
  border-color: transparent;
  border-left-color: var(--verde);
  box-shadow: none;
}
/* Le righe gia' nel collo si toccano per togliere un pezzo: il cursore e il
   segno a destra lo dicono senza bisogno di un pulsante in piu' per riga. */
/* La griglia ha una colonna in piu' per la crocetta: senza, lo pseudo-elemento
   scivola nella cella dopo e va a capo sotto l'ubicazione. */
.lista-fatte .voce { cursor: pointer; grid-template-columns: auto 1fr auto auto; }
.lista-fatte .voce::after {
  content: "×";
  grid-column: 4;
  grid-row: 1;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--muted);
  padding-left: 0.75rem;
}
.lista-fatte .voce:hover { background: var(--superficie-2); }
.lista-fatte .voce:hover::after { color: var(--rosso-pillola); }
.lista-fatte .nome { text-decoration: line-through; color: var(--muted); }
.lista-fatte .conta { color: var(--verde-testo); font-size: 1rem; }
.lista-fatte .dove { opacity: 0.5; }
.lista-fatte .sotto { display: none; }

/* La targhetta dello scaffale: e' la prima informazione utile, dove vado. */
.dove {
  font-family: var(--mono);
  font-size: 0.88em;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.24em 0.55em;
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
  border-radius: var(--r-chip);
  white-space: nowrap;
  color: var(--testo-dato);
}

.nome { font-weight: 600; line-height: 1.2; }

.sotto {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 0.72em;
  color: var(--muted);
  letter-spacing: -0.01em;
}

.conta {
  font-family: var(--mono);
  font-size: clamp(1.2rem, 0.95rem + 1.2vw, 1.7rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.voce.eccede .conta { color: var(--rosso-pillola); }

.marchio {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62em;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.15em 0.5em;
  border-radius: var(--r-pill);
  margin-left: 0.45rem;
  vertical-align: 0.12em;
  color: var(--testo-su-semantico);
}
.marchio.forzata  { background: var(--ambra-pillola); }
.marchio.corretta { background: var(--testo-2); }
.marchio.cambiata { background: var(--rosso-pillola); }
.marchio.aspetta  { background: var(--ambra-pillola); }

/* ------------------------------------------------------------------ barra */

.barra {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  gap: 0.5rem;
  padding: 0.65rem clamp(0.5rem, 3vw, 1.75rem);
  padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
  background: var(--superficie);
  border-top: 1px solid var(--bordo-tenue);
  box-shadow: 0 -4px 24px rgba(15, 42, 74, 0.07);
}

.tasto {
  flex: 1;
  min-height: var(--dito);
  padding: 0.55rem 1rem;
  font-family: inherit;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--testo);
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
  border-radius: var(--r-control);
  cursor: pointer;
}
.tasto:hover { background: var(--superficie-hover, #f2f5f8); }
.tasto-forte {
  flex: 2;
  background: var(--verde);
  border-color: var(--verde-pillola);
  color: var(--testo-su-semantico);
}
.tasto-forte:hover { background: var(--verde-pillola); }

/* Il verde qui dentro vuol dire "fatto, vai avanti": un tasto verde spento che
   dice "mancano 7 pezzi" comunica il contrario di quello che c'e' scritto.
   Finche' il collo non e' completo il tasto e' neutro, e diventa verde solo
   quando c'e' davvero qualcosa da fare. */
.tasto-forte:disabled {
  background: var(--superficie-2);
  border-color: var(--bordo);
  color: var(--muted);
}
.tasto:disabled { cursor: not-allowed; }
.tasto:disabled:hover { background: var(--superficie-2); }
.tasto:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

/* --------------------------------------------------------------- dialoghi */

.foglio {
  border: none;
  border-radius: var(--r-card);
  padding: 0;
  max-width: 38rem;
  width: calc(100vw - 1.5rem);
  background: var(--superficie);
  color: var(--testo);
  box-shadow: var(--ombra-modale);
}
.foglio::backdrop { background: rgba(15, 42, 74, 0.45); }
.foglio form { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.4rem; }
.foglio h2 { margin: 0; font-size: 1.2rem; letter-spacing: -0.015em; }
.foglio-nota { margin: 0; color: var(--testo-2); font-size: 0.88em; }
.foglio menu { display: flex; gap: 0.5rem; margin: 0.4rem 0 0; padding: 0; }

.motivi, .scelte { display: grid; gap: 0.4rem; }

.motivo, .scelta {
  min-height: var(--dito);
  padding: 0.6rem 0.9rem;
  text-align: left;
  font-family: inherit;
  font-size: 0.95em;
  color: var(--testo);
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
  border-radius: var(--r-control);
  cursor: pointer;
}
.motivo[aria-pressed="true"] {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--anello-focus);
}
.scelta { display: flex; align-items: center; gap: 0.75rem; }
.scelta .conta { font-size: 1.1rem; }

.campo {
  width: 100%;
  min-height: var(--dito);
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 1em;
  color: var(--testo);
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
  border-radius: var(--r-control);
}
.campo:focus-visible {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--anello-focus);
}

/* Su schermo largo: ubicazioni in colonna fissa, cosi' si leggono in fila come
   su una lista di prelievo stampata. */
@media (min-width: 58rem) {
  .voce { grid-template-columns: 8.5rem 1fr auto; padding: 0.65rem 1.1rem; }
  .barra { justify-content: flex-end; }
  .tasto { flex: 0 0 auto; min-width: 10rem; }
  .tasto-forte { min-width: 18rem; }
}