/* ============================================================================
   FoodFlow — foglio di stile unico dell'interfaccia operativa.

   Impostazione: "registro d'ufficio". Carta manila, inchiostro, filetti sottili,
   cifre tabellari, stati come timbri. Densita' alta e nessuna decorazione: e'
   uno strumento da guardare otto ore di fila, non una pagina di presentazione
   (spec. sez. 8: GUI volutamente operativa, non grafica/marketing).

   Niente build: CSS statico servito da public/, font self-hostati. Un tool
   interno non deve dipendere da una CDN per rendersi leggibile.
   ========================================================================= */

/* ── Caratteri ──────────────────────────────────────────────────────────────
   Barlow Semi Condensed per etichette e navigazione: condensato, quindi denso
   e leggibile in colonne strette. Barlow per il testo corrente. Fira Mono per
   ogni cifra, codice e stato: le colonne numeriche devono incolonnarsi. */
@font-face{font-family:Barlow;src:url(../fonts/barlow-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/barlow-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/barlow-600.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow SC';src:url(../fonts/barlow-sc-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow SC';src:url(../fonts/barlow-sc-600.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Fira Mono';src:url(../fonts/fira-mono-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Fira Mono';src:url(../fonts/fira-mono-500.woff2)format('woff2');font-weight:500;font-display:swap}

:root{
  /* carta e inchiostro */
  --paper:#efece4;        /* fondo: manila */
  --sheet:#fbfaf7;        /* il foglio su cui stanno tabelle e schede */
  --sheet-2:#f5f2eb;      /* intestazioni di tabella, fasce */
  --ink:#16191c;
  --ink-2:#5c6167;        /* etichette, testo secondario */
  --ink-3:#8d9199;        /* placeholder, vuoti */
  --rule:#d8d3c8;         /* filetto */
  --rule-2:#e7e3da;       /* filetto interno, piu' chiaro */

  /* un solo accento: verde bottiglia. Sobrio, non verde-supermercato. */
  --accent:#1f4b3f;
  --accent-ink:#f4f1e8;
  --accent-soft:#e4eae5;

  /* timbri di stato */
  --stamp-red:#9b2c2c;
  --stamp-amber:#8a5a00;
  --stamp-green:#1f4b3f;
  --stamp-blue:#28506e;

  --sidebar:232px;
  --row:1.65rem;          /* altezza riga tabella: densa */
  --radius:2px;           /* quasi squadrato: e' un modulo, non una card */
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 13.5px/1.45 Barlow,'Segoe UI',sans-serif;
  font-variant-numeric:tabular-nums;   /* le cifre si incolonnano ovunque */
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-bottom-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:1px}

/* ── Struttura: barra laterale fissa + colonna di lavoro ───────────────────
   La razionalizzazione principale sta qui. Prima erano 26 link in fila in un
   header: impossibile trovare qualcosa. Ora sono raggruppati per funzione e
   sempre presenti, cosi' la posizione di un modulo si impara una volta sola. */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}

.rail{
  background:var(--accent);
  color:var(--accent-ink);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:rgba(244,241,232,.25)}

/* testata: nome, ambiente, filetto. Poco piu' di una carta intestata. */
.masthead{padding:.7rem 1rem .55rem;border-bottom:1px solid rgba(244,241,232,.22);position:sticky;top:0;background:var(--accent);z-index:1}
.masthead .mark{
  font:600 1.15rem/1 'Barlow SC',Barlow,sans-serif;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink);
  display:block;border-bottom:0;
}
.masthead .sub{
  display:block;margin-top:.25rem;
  font:400 .625rem/1 'Fira Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,241,232,.62);
}

.rail nav{padding:.35rem 0 .9rem;flex:1}
/* ── Macro-aree richiudibili ────────────────────────────────────────────────
   L'intestazione di gruppo era un semplice <p>: ora e' il <summary> di un
   <details>, quindi cliccabile e raggiungibile da tastiera senza una riga di JS.
   Il segno e' un +/- in monospaziato, non una freccia arrotondata: qui siamo in
   un registro, non in un pannello di controllo. */
.rail details.grp{border-bottom:1px solid rgba(244,241,232,.08)}
.rail details.grp:last-child{border-bottom:0}

.rail .group{
  margin:0;padding:.5rem 1rem .38rem;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font:600 .625rem/1 'Barlow SC',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,241,232,.5);
  list-style:none;                  /* via il triangolo di serie */
  user-select:none;
}
.rail .group::-webkit-details-marker{display:none}
.rail .group:hover{color:rgba(244,241,232,.85);background:rgba(244,241,232,.05)}
.rail .group:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}
.rail .group::after{
  content:'+';
  font:400 .75rem/1 'Fira Mono',monospace;color:rgba(244,241,232,.45);
}
.rail details[open] > .group::after{content:'\2212'}   /* meno tipografico */
.rail details[open] > .group{color:rgba(244,241,232,.7)}

/* Apertura appena accennata: e' un menu, non uno spettacolo. */
/* Il display:flex sul <summary> disturba la regola predefinita di <details>:
   ad area chiusa le voci restavano visibili. La si dichiara esplicitamente. */
.rail details.grp:not([open]) > .voci{display:none}
.rail .voci{animation:apri .14s ease-out;padding-bottom:.3rem}
@keyframes apri{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rail .voci{animation:none}}

/* Comando unico, su una riga sua: in posizione assoluta nella testata finiva
   addosso al marchio. */
.barra-tutto{margin:0;padding:.3rem .9rem .1rem;text-align:right}
.tutto{
  background:none;border:0;padding:.1rem .2rem;cursor:pointer;
  font:400 .5625rem/1 'Fira Mono',monospace;letter-spacing:.06em;
  color:rgba(244,241,232,.45);
}
.tutto:hover{color:var(--accent-ink)}
.tutto:focus-visible{outline:1px solid var(--accent-ink);outline-offset:2px}
.rail a{
  display:block;padding:.17rem 1rem .17rem .9rem;
  color:rgba(244,241,232,.9);border-bottom:0;border-left:3px solid transparent;
  font:500 .8125rem/1.42 'Barlow SC',Barlow,sans-serif;letter-spacing:.02em;
}
.rail a:hover{background:rgba(244,241,232,.09);color:#fff}
.rail a[aria-current="page"]{
  background:rgba(244,241,232,.14);border-left-color:var(--accent-ink);color:#fff;font-weight:600;
}

/* ── Barra superiore: dove sono, chi sono, esci ────────────────────────────*/
.topbar{
  display:flex;align-items:baseline;gap:1rem;justify-content:space-between;
  padding:.55rem 1.4rem;background:var(--sheet);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:5;
}
.crumb{font:500 .6875rem/1 'Barlow SC',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.crumb b{color:var(--ink);font-weight:600}
.who{font:400 .75rem/1 'Fira Mono',monospace;color:var(--ink-2);display:flex;align-items:center;gap:.6rem}
.who .role{
  border:1px solid var(--rule);padding:.1rem .35rem;border-radius:var(--radius);
  font-size:.625rem;letter-spacing:.1em;color:var(--ink-2);background:var(--sheet-2);
}
.who button{
  background:none;border:0;padding:0;color:var(--accent);cursor:pointer;
  font:inherit;border-bottom:1px solid transparent;
}
.who button:hover{border-bottom-color:currentColor}

main{padding:1.3rem 1.4rem 3rem;max-width:1500px}

/* ── Titoli ────────────────────────────────────────────────────────────────*/
h1{
  font:600 1.3rem/1.2 'Barlow SC',sans-serif;letter-spacing:.02em;
  margin:0 0 .15rem;
}
.h1rule{height:2px;background:var(--ink);width:2.2rem;margin-bottom:1.1rem}
h2{
  font:600 .9rem/1.2 'Barlow SC',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  margin:1.8rem 0 .5rem;color:var(--ink-2);
}

/* ── Il foglio: contenitore di tabelle e schede ────────────────────────────*/
.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius)}

/* ── Tabelle: il cuore dell'interfaccia ────────────────────────────────────
   Righe basse, filetti sottili invece di ombre, intestazione che resta
   visibile allo scorrimento. Le colonne numeriche vanno in mono e a destra. */
.tablewrap{overflow-x:auto;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse}
th,td{
  text-align:left;padding:.3rem .7rem;height:var(--row);
  border-bottom:1px solid var(--rule-2);vertical-align:middle;
}
thead th,table>tr:first-child th{
  position:sticky;top:0;z-index:1;
  background:var(--sheet-2);border-bottom:1px solid var(--rule);
  font:600 .625rem/1 'Barlow SC',sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);
  white-space:nowrap;
}
tbody tr:hover,table tr:hover{background:#f2eee5}
tr:last-child td{border-bottom:0}
td.num{font-family:'Fira Mono',monospace;font-size:.78rem;text-align:right;white-space:nowrap}
td.mono{font-family:'Fira Mono',monospace;font-size:.78rem}
td.empty{color:var(--ink-3);font-style:italic}
.rowcount{
  margin:.45rem 0 0;font:400 .6875rem/1 'Fira Mono',monospace;color:var(--ink-3);
}
/* tabella chiave/valore della scheda */
.record th{width:34%;background:var(--sheet-2);font-weight:600;text-transform:none;letter-spacing:.02em;
  font-family:'Barlow SC',sans-serif;font-size:.75rem;color:var(--ink-2);position:static}

/* ── Timbri di stato ───────────────────────────────────────────────────────
   Gli enum (stato ordine, canale, ruolo) diventano timbri: mono, maiuscolo,
   spaziato, con un filetto colorato. Si leggono a colpo d'occhio in colonna. */
.stamp{
  display:inline-block;padding:.05rem .35rem;
  font:500 .625rem/1.5 'Fira Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--sheet-2);color:var(--ink-2);white-space:nowrap;
}
.stamp-ok{color:var(--stamp-green);border-color:#b9c9bf;background:var(--accent-soft)}
.stamp-warn{color:var(--stamp-amber);border-color:#ddc79a;background:#f7f0e0}
.stamp-bad{color:var(--stamp-red);border-color:#ddb4b4;background:#f8ebeb}
.stamp-info{color:var(--stamp-blue);border-color:#b4c4d2;background:#e9eff4}

/* ── Riquadri numerici delle dashboard ─────────────────────────────────────
   Non "card" con ombra: caselle di un modulo prestampato. Il numero domina,
   l'etichetta e' un'intestazione di colonna. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:0;
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;margin-bottom:.4rem}
.tile{background:var(--sheet);padding:.7rem .8rem .75rem;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tile .n{font:400 1.5rem/1.12 'Fira Mono',monospace;letter-spacing:-.02em;color:var(--ink)}
/* Non tutti gli indicatori sono numeri: "non configurato" a 1,5rem si
   spezzava a meta' parola. Un valore testuale ha una taglia sua. */
.tile .n.is-text{font-family:Barlow,sans-serif;font-size:.95rem;line-height:1.25;
  overflow-wrap:break-word;color:var(--ink-2)}
.tile .l{margin-top:.3rem;font:600 .625rem/1.25 'Barlow SC',sans-serif;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2)}
.tile.is-alert .n{color:var(--stamp-red)}

/* ── Moduli di inserimento ─────────────────────────────────────────────────*/
form.sheet{padding:1.1rem 1.2rem;max-width:660px}
.field{margin-bottom:.75rem}
label{display:block;margin-bottom:.2rem;
  font:600 .6875rem/1.2 'Barlow SC',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=datetime-local],select,textarea{
  width:100%;padding:.34rem .5rem;background:#fff;color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--radius);
  font:400 .8125rem/1.4 Barlow,sans-serif;
}
input[type=number],input[type=date],input[type=datetime-local]{font-family:'Fira Mono',monospace;font-size:.78rem}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--stamp-red);background:#fdf7f7}
input[type=checkbox]{width:auto;accent-color:var(--accent);transform:translateY(1px)}
textarea{resize:vertical}

/* ── Pulsanti ──────────────────────────────────────────────────────────────*/
.btn{
  display:inline-block;padding:.32rem .8rem;cursor:pointer;
  font:600 .6875rem/1.5 'Barlow SC',sans-serif;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--accent);border-radius:var(--radius);
  background:var(--accent);color:var(--accent-ink);
}
.btn:hover{background:#173a30;border-color:#173a30}
.btn-ghost{background:var(--sheet);color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{background:var(--sheet-2);border-color:var(--ink-2)}
.btn-danger{background:var(--sheet);color:var(--stamp-red);border-color:#ddb4b4}
.btn-danger:hover{background:var(--stamp-red);color:#fff;border-color:var(--stamp-red)}
.btn-action{background:var(--sheet);color:var(--stamp-amber);border-color:#ddc79a}
.btn-action:hover{background:var(--stamp-amber);color:#fff;border-color:var(--stamp-amber)}
.btn-sm{padding:.1rem .4rem;font-size:.625rem}
.toolbar{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:.9rem 0}
.rowacts{display:flex;gap:.3rem;align-items:center;white-space:nowrap}
.rowacts form{display:inline}

/* ── Avvisi ────────────────────────────────────────────────────────────────*/
.note{
  padding:.45rem .7rem;margin:0 0 1rem;border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 var(--radius) var(--radius) 0;font-size:.8125rem;
}
.note-bad{border-left-color:var(--stamp-red);background:#f8ebeb}
.note-info{border-left-color:var(--stamp-blue);background:#e9eff4;color:var(--ink-2)}
.err{color:var(--stamp-red);font-size:.75rem;margin:.2rem 0 0}
.hint{color:var(--ink-3);font-size:.75rem}

/* ── Accesso ───────────────────────────────────────────────────────────────
   Unica pagina non densa: qui si fa una cosa sola. */
.gate{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:var(--paper);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px);
  background-size:100% 2rem;background-position:0 -1px;
}
.gate form{width:min(340px,100%);background:var(--sheet);border:1px solid var(--rule);
  border-top:3px solid var(--accent);border-radius:var(--radius);padding:1.4rem 1.4rem 1.5rem}
.gate .mark{font:600 1.35rem/1 'Barlow SC',sans-serif;letter-spacing:.12em;text-transform:uppercase;margin:0}
.gate .sub{margin:.3rem 0 1.2rem;font:400 .6875rem/1 'Fira Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.gate .btn{width:100%;margin-top:.9rem;padding:.45rem}

/* ── Schermi stretti: la barra diventa una fascia in alto ──────────────────*/
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:column}
  .rail nav{display:flex;flex-wrap:wrap;gap:.1rem;padding:.4rem .6rem .7rem}
  .rail .group{width:100%;margin:.5rem .4rem .1rem}
  .rail a{border-left:0;border-bottom:2px solid transparent;padding:.2rem .5rem}
  .rail a[aria-current="page"]{border-left:0;border-bottom-color:var(--accent-ink)}
  main{padding:1rem .8rem 2.5rem}
}

/* ── Stampa: un gestionale si stampa, e deve venire su carta come un modulo ─*/
@media print{
  :root{--paper:#fff;--sheet:#fff;--sheet-2:#fff}
  .rail,.topbar,.toolbar,.rowacts,.btn,.tutto{display:none!important}
  details.grp>.voci{display:block!important}
  .app{display:block}
  main{padding:0;max-width:none}
  body{font-size:10pt;background:#fff}
  .tablewrap,.sheet{border-color:#000}
  th,td{border-bottom:1px solid #999;padding:.15rem .3rem}
  thead th{background:#fff;color:#000;border-bottom:1.5px solid #000}
  .stamp{border-color:#000;color:#000;background:#fff}
  a{color:#000}
}

/* ── Chat col segretario: terza colonna ────────────────────────────────────
   Sta accanto al lavoro, non sopra: nessun overlay che copra la tabella che
   si sta leggendo. Chiusa resta una linguetta, e la scelta si ricorda. */
.app{grid-template-columns:var(--sidebar) minmax(0,1fr) 21rem}
.app.chat-chiusa{grid-template-columns:var(--sidebar) minmax(0,1fr) 2.6rem}

.chat{
  border-left:1px solid var(--rule);background:var(--sheet);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;min-width:0;
}
.chat-testa{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.45rem .6rem;border-bottom:1px solid var(--rule);
  font:600 .68rem/1 'Barlow SC',sans-serif;letter-spacing:.14em;text-transform:uppercase;
}
.chat-testa button{
  background:none;border:1px solid var(--rule);border-radius:var(--radius);
  padding:.12rem .35rem;cursor:pointer;font:inherit;letter-spacing:.08em;color:inherit;
}
.chat-corpo{display:flex;flex-direction:column;flex:1;min-height:0}
.app.chat-chiusa .chat-corpo{display:none}
.app.chat-chiusa .chat-testa{writing-mode:vertical-rl;padding:.6rem .3rem;gap:.8rem}

.chat-storico{flex:1;overflow-y:auto;padding:.55rem .6rem;font-size:.82rem}
.chat-vuoto{color:var(--muted);margin:0}
.chat .msg{margin:0 0 .55rem}
.chat .msg p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.chat .msg-user p{
  background:var(--sheet-2);border-left:2px solid var(--accent);
  padding:.25rem .4rem;color:var(--muted);
}
.chat .msg-link{
  display:block;margin-top:.25rem;padding:.18rem .3rem;
  border:1px solid var(--rule);border-radius:var(--radius);border-bottom:1px solid var(--rule);
}
.chat .msg-link span{
  display:inline-block;margin-right:.35rem;color:var(--muted);
  font:600 .58rem/1.6 'Barlow SC',sans-serif;letter-spacing:.12em;text-transform:uppercase;
}
.chat-form{display:flex;gap:.35rem;padding:.45rem .6rem;border-top:1px solid var(--rule)}
.chat-form textarea{flex:1;min-width:0;font:inherit;font-size:.82rem;padding:.25rem .35rem;
  border:1px solid var(--rule);border-radius:var(--radius);resize:vertical}
.chat-form button{align-self:flex-end;font:inherit;font-size:.8rem;padding:.25rem .5rem;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--sheet-2);cursor:pointer}
.chat-etichetta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Sotto i 1100px la colonna non ci sta accanto al contenuto: la chat resta
   comunque sul bordo destro, sovrapposta e richiamabile dalla linguetta,
   invece di finire in fondo alla pagina dove non la si trova piu'. */
@media (max-width:1100px){
  .app,.app.chat-chiusa{grid-template-columns:var(--sidebar) minmax(0,1fr)}
  .chat{position:fixed;top:0;right:0;z-index:20;width:min(21rem,88vw);
    box-shadow:-2px 0 10px rgba(0,0,0,.14)}
  .app.chat-chiusa .chat{width:2.6rem;box-shadow:none}
  main{padding-right:3.6rem}
}

@media print{.chat{display:none!important}}