/* Evo Sushi — "Sala di regia"
   Fondo quasi nero, smeraldo acceso, cifre enormi e strette.
   Scura per scelta dichiarata: si legge di sbieco, da lontano, a luci basse. */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo.woff2') format('woff2-variations'), url('fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: block;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/plexmono.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: block;
}

:root {
  color-scheme: dark;
  --fondo:     #070B09;
  --pannello:  #0D1310;
  --pannello-2:#121A15;
  --filo:      #1D2820;
  --filo-vivo: #2C3B32;
  --testo:     #DFE9E2;
  --testo-2:   #83988C;
  --testo-3:   #5A6B61;
  --verde:     #00E58A;
  --verde-cupo:#0B3A28;
  --verde-medio:#0E6B47;
  --ambra:     #F2B23E;
  --rosso:     #FF5C3D;
  --rosso-velo:#2A100B;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 0;
}

button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.mono { font-family: 'Plex Mono', ui-monospace, monospace; }

/* ---------- barra di stato ---------- */

.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 0 clamp(14px, 2.4vw, 28px);
  min-height: 66px;
  background: var(--pannello);
  border-bottom: 1px solid var(--filo);
}
.barra-sx { display: flex; align-items: center; gap: 10px; flex: none; }
.led {
  width: 9px; height: 9px; background: var(--verde); display: block;
  box-shadow: 0 0 10px var(--verde);
}
.barra-nome { font-weight: 700; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; font-stretch: 88%; }
.barra-sotto { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-3); }
@media (max-width: 720px) { .barra-sotto { display: none; } }

.barra-nav { display: flex; gap: 2px; margin-left: 6px; }
.barra-tasto {
  appearance: none; background: none; border: 0; color: var(--testo-3);
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  padding: 12px 14px; min-height: 46px; cursor: pointer; border-bottom: 2px solid transparent;
}
.barra-tasto:hover { color: var(--testo); }
.barra-tasto[aria-current="true"] { color: var(--verde); border-bottom-color: var(--verde); }

.barra-dx { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.barra-data {
  font-family: 'Plex Mono', monospace; font-size: .8rem; color: var(--testo-2);
  letter-spacing: .02em; white-space: nowrap;
}
@media (max-width: 860px) { .barra-data { display: none; } }

.btn-verde {
  appearance: none; border: 1px solid var(--verde); background: var(--verde); color: #04160D;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: 12px 18px; min-height: 46px; cursor: pointer;
}
.btn-verde:hover { background: #24F5A0; border-color: #24F5A0; }
@media (max-width: 720px) { .barra-dx .btn-verde { display: none; } }

.btn-filo {
  appearance: none; background: transparent; border: 1px solid var(--filo-vivo); color: var(--testo);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: 12px 16px; min-height: 46px; min-width: 46px; cursor: pointer;
}
.btn-filo:hover { border-color: var(--verde); color: var(--verde); }

/* ---------- navigazione del giorno ---------- */

.nav-giorno {
  display: flex; align-items: center; gap: 8px; margin-bottom: clamp(12px, 1.6vw, 18px);
}
.nav-giorno .nav-data {
  margin-left: 6px; font-family: 'Plex Mono', monospace; font-size: .8rem;
  letter-spacing: .06em; color: var(--testo-3); text-transform: uppercase;
}

/* ---------- griglia della regia ---------- */

main { padding: clamp(14px, 2.4vw, 26px); }

.regia {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
  align-items: stretch;
}
.regia > * { min-width: 0; }
.pannello-flusso { display: flex; flex-direction: column; }
@media (max-width: 1020px) { .pannello-flusso { max-height: 60vh; } }
@media (max-width: 1020px) { .regia { grid-template-columns: 1fr; } }

.pannello {
  background: var(--pannello);
  border: 1px solid var(--filo);
  padding: clamp(16px, 2.2vw, 26px);
}
.pannello-titolo {
  margin: 0 0 18px;
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700;
  color: var(--testo-3);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pannello-titolo .conta { color: var(--testo-2); letter-spacing: .1em; }

/* il numero enorme */
.lettura { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(20px, 4vw, 54px); }
.lettura-blocco { min-width: 0; }
.lettura-cifra {
  display: block;
  font-size: clamp(5.4rem, 17vw, 11rem);
  font-weight: 700;
  font-stretch: 76%;
  line-height: .78;
  letter-spacing: -.03em;
  color: var(--verde);
  font-variant-numeric: tabular-nums lining-nums;
}
.lettura-cifra.tenue { color: var(--testo); }
.lettura-etichetta {
  display: block; margin-top: 14px;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--testo-3);
}
.lettura-nota { margin: 6px 0 0; font-size: .84rem; color: var(--testo-2); }

/* barra dei coperti a blocchi */
.gauge { margin-top: 30px; }
.gauge-traccia { display: flex; gap: 2px; height: 30px; }
.gauge-traccia i { flex: 1 1 0; background: var(--filo); display: block; }
.gauge-traccia i.pieno { background: var(--verde-medio); }
.gauge-traccia i.pieno.ultimo { background: var(--verde); box-shadow: 0 0 12px rgba(0, 229, 138, .5); }
.gauge-scala {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: 'Plex Mono', monospace; font-size: .72rem; color: var(--testo-3);
}

.tetto-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--filo);
}
.tetto-capo { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--testo-3); font-weight: 700; }
.tetto-cifra { font-size: 1.5rem; font-weight: 700; font-stretch: 84%; min-width: 2.4ch; text-align: center; color: var(--testo); }
.tetto-spiega { flex: 1 1 20rem; margin: 0; font-size: .82rem; line-height: 1.5; color: var(--testo-2); }
.tetto-spiega b { color: var(--testo); font-weight: 700; }

/* fasce, quattro righe grosse */
.fasce-regia { display: grid; gap: 1px; background: var(--filo); border: 1px solid var(--filo); }
.fascia-riga {
  display: grid; grid-template-columns: 8.6rem 1fr 5rem; align-items: center; gap: 16px;
  background: var(--pannello); padding: 15px clamp(12px, 1.6vw, 20px);
  min-height: 68px;
}
.fascia-ora { font-family: 'Plex Mono', monospace; font-size: .92rem; color: var(--testo-2); white-space: nowrap; }
.fascia-traccia { height: 16px; background: var(--filo); position: relative; }
.fascia-traccia i { position: absolute; inset: 0 auto 0 0; background: var(--verde-medio); }
.fascia-riga.punta .fascia-traccia i { background: var(--verde); }
.fascia-num {
  text-align: right; font-size: 1.9rem; font-weight: 700; font-stretch: 78%; line-height: 1;
  color: var(--testo);
}
.fascia-riga.punta .fascia-num { color: var(--verde); }
.fascia-num small { display: block; font-size: .6rem; letter-spacing: .18em; color: var(--testo-3); font-weight: 600; font-stretch: 100%; margin-top: 4px; }
@media (max-width: 560px) { .fascia-riga { grid-template-columns: 6.6rem 1fr 4rem; gap: 10px; } }

/* ---------- flusso in arrivo ---------- */

.flusso { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.flusso li { border-bottom: 1px solid var(--filo); }
.flusso li:last-child { border-bottom: 0; }
.flusso-voce {
  display: grid; grid-template-columns: 4.2rem 1fr auto; align-items: baseline; gap: 12px;
  width: 100%; text-align: left; background: none; border: 0; color: inherit;
  padding: 13px 2px; cursor: pointer; min-height: 54px; font: inherit;
}
.flusso-voce:hover { background: var(--pannello-2); }
.flusso-ora { font-family: 'Plex Mono', monospace; font-size: .8rem; color: var(--testo-3); }
.flusso-testo { font-size: .95rem; line-height: 1.3; }
.flusso-testo small { display: block; color: var(--testo-3); font-size: .78rem; margin-top: 2px; letter-spacing: .04em; }
.flusso-coperti { font-family: 'Plex Mono', monospace; font-size: .88rem; color: var(--testo-2); }
.flusso-voce.disdetta .flusso-testo { color: var(--rosso); }
.flusso-voce.disdetta { background: var(--rosso-velo); }
.flusso-voce.modificata .flusso-testo { color: var(--ambra); }

/* ---------- tabella della serata ---------- */

.tavola-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tavola { width: 100%; min-width: 44rem; border-collapse: collapse; }
table.tavola th {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--filo-vivo);
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-3); font-weight: 700;
  white-space: nowrap;
}
table.tavola th.num, table.tavola td.num { text-align: right; }
table.tavola td { padding: 0; border-bottom: 1px solid var(--filo); }
table.tavola tr:hover td { background: var(--pannello-2); }
.cella { padding: 14px 12px; }
.cella-tasto {
  display: contents;
}
table.tavola tbody tr { cursor: pointer; }
.td-coperti { font-size: 1.5rem; font-weight: 700; font-stretch: 80%; color: var(--verde); line-height: 1; }
.td-nome { font-size: 1.02rem; font-weight: 500; }
.td-mono { font-family: 'Plex Mono', monospace; font-size: .82rem; color: var(--testo-2); white-space: nowrap; }
.td-nota { font-size: .86rem; color: var(--testo-2); max-width: 22rem; }
.td-nota.allergia { color: var(--rosso); font-weight: 600; }
tr.riga-disdetta td { background: var(--rosso-velo); }
tr.riga-disdetta .td-nome { text-decoration: line-through; color: var(--rosso); }
tr.riga-disdetta .td-coperti { color: var(--rosso); text-decoration: line-through; }

.tag {
  display: inline-block; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 4px 7px; border: 1px solid var(--filo-vivo); color: var(--testo-2); white-space: nowrap;
}
.tag.dish { border-color: var(--verde-medio); color: var(--verde); }
.tag.modificata { border-color: var(--ambra); color: var(--ambra); }
.tag.cancellata { border-color: var(--rosso); color: var(--rosso); }

.nota-vuota { color: var(--testo-3); }

/* sul telefono la tabella diventa un elenco fitto: niente colonne tagliate */
@media (max-width: 720px) {
  .tavola-scorre { overflow-x: visible; }
  table.tavola { min-width: 0; display: block; }
  table.tavola thead { display: none; }
  table.tavola tbody { display: block; }
  table.tavola tr {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    gap: 3px 12px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--filo);
    align-items: baseline;
  }
  table.tavola td { display: block; border: 0; background: none; }
  table.tavola tr:hover td { background: none; }
  table.tavola td:nth-child(2) { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  table.tavola td:nth-child(3) { grid-column: 2; grid-row: 1; }
  table.tavola td:nth-child(4) { grid-column: 3; grid-row: 1; text-align: right; }
  table.tavola td:nth-child(1) { grid-column: 2; grid-row: 2; }
  table.tavola td:nth-child(5) { grid-column: 3; grid-row: 2; text-align: right; }
  table.tavola td:nth-child(6) { grid-column: 2 / span 2; grid-row: 3; }
  .cella { padding: 0; }
  .td-coperti { font-size: 2rem; }
  .td-nota { max-width: none; margin-top: 3px; }
  .nota-vuota { display: none; }
  tr.riga-disdetta { background: var(--rosso-velo); }
  tr.riga-disdetta td { background: none; }
}

/* ---------- serata vuota ---------- */

.spenta { padding: clamp(34px, 8vw, 76px) clamp(18px, 4vw, 40px); max-width: 44rem; }
.spenta .led-spento {
  width: 11px; height: 11px; background: var(--filo-vivo); display: block; margin-bottom: 26px;
}
.spenta h2 {
  margin: 0 0 14px; font-size: clamp(1.5rem, 5.4vw, 2.3rem); font-weight: 700; font-stretch: 84%;
  letter-spacing: -.01em; line-height: 1.1;
}
.spenta p { margin: 0 0 10px; color: var(--testo-2); font-size: 1rem; }
.spenta .btn-verde, .spenta .btn-filo { margin-top: 20px; }

/* ---------- settimana ---------- */

.settimana-griglia { display: grid; gap: 1px; background: var(--filo); border: 1px solid var(--filo); }
.settimana-riga {
  display: grid; grid-template-columns: 10rem 1fr 6rem; align-items: center; gap: 16px;
  background: var(--pannello); padding: 16px clamp(12px, 1.6vw, 22px);
  width: 100%; text-align: left; border: 0; color: inherit; cursor: pointer; font: inherit;
  min-height: 74px;
}
.settimana-riga:hover { background: var(--pannello-2); }
.settimana-giorno { font-size: .96rem; font-weight: 600; }
.settimana-giorno small { display: block; font-family: 'Plex Mono', monospace; font-size: .74rem; color: var(--testo-3); font-weight: 400; margin-top: 3px; }
.settimana-traccia { height: 20px; background: var(--filo); position: relative; }
.settimana-traccia i { position: absolute; inset: 0 auto 0 0; background: var(--verde-medio); }
.settimana-riga.oggi .settimana-traccia i { background: var(--verde); }
.settimana-traccia .segno-tetto { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--rosso); }
.settimana-cifra { text-align: right; font-size: 1.8rem; font-weight: 700; font-stretch: 78%; line-height: 1; }
.settimana-riga.oggi .settimana-cifra { color: var(--verde); }
.settimana-cifra small { display: block; font-size: .6rem; letter-spacing: .18em; color: var(--testo-3); font-weight: 600; font-stretch: 100%; margin-top: 5px; }
.settimana-riga.chiuso .settimana-cifra { font-size: .74rem; letter-spacing: .18em; color: var(--testo-3); font-stretch: 100%; }
@media (max-width: 560px) { .settimana-riga { grid-template-columns: 7.4rem 1fr 4.6rem; gap: 10px; } }

.riferimento {
  margin-top: 18px; padding: 18px clamp(14px, 2vw, 22px);
  border: 1px solid var(--filo); background: var(--pannello);
  font-size: .88rem; color: var(--testo-2); line-height: 1.55;
}
.riferimento b { color: var(--verde); font-weight: 700; }

/* ---------- strato ---------- */

.strato { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.strato[hidden] { display: none; }
.strato-velo { position: absolute; inset: 0; background: rgba(0, 0, 0, .78); }

.riquadro {
  position: relative; width: min(38rem, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  background: var(--pannello); border: 1px solid var(--filo-vivo);
  padding: clamp(20px, 4vw, 32px);
}
@media (max-width: 620px) {
  .strato { align-items: flex-end; padding: 0; }
  .riquadro { width: 100%; max-height: 92dvh; border-bottom: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

.riquadro-testa { border-bottom: 1px solid var(--filo-vivo); padding-bottom: 18px; margin-bottom: 4px; }
.riquadro-testa .sopra { margin: 0 0 8px; font-family: 'Plex Mono', monospace; font-size: .78rem; color: var(--testo-3); letter-spacing: .06em; }
.riquadro-testa h2 { margin: 0; font-size: clamp(1.6rem, 5.6vw, 2.2rem); font-weight: 700; font-stretch: 84%; line-height: 1.06; }
.riquadro-testa h2.cancellata { color: var(--rosso); text-decoration: line-through; }
.riquadro-testa .coperti-grosso {
  display: block; margin-top: 12px; font-size: 3.2rem; font-weight: 700; font-stretch: 76%;
  line-height: 1; color: var(--verde);
}
.riquadro-testa .coperti-grosso small { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-3); font-stretch: 100%; margin-left: 10px; font-weight: 600; }

.righe-dato { margin: 0; }
.righe-dato > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--filo); }
.righe-dato dt { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--testo-3); font-weight: 700; padding-top: 3px; }
.righe-dato dd { margin: 0; font-size: 1rem; }
.righe-dato dd.mono { font-family: 'Plex Mono', monospace; font-size: .94rem; }
@media (max-width: 440px) { .righe-dato > div { grid-template-columns: 1fr; } }

.commento-regia {
  margin-top: 18px; padding: 16px 18px; border: 1px solid var(--verde-medio);
  font-size: 1.02rem; line-height: 1.45;
}
.commento-regia .capo { display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-3); font-weight: 700; margin-bottom: 8px; }
.commento-regia.allergia { border-color: var(--rosso); color: var(--rosso); background: var(--rosso-velo); }
.commento-regia.allergia .capo { color: var(--rosso); }
.commento-regia.assente { border-color: var(--filo); color: var(--testo-3); font-size: .94rem; }

.riquadro-nota { margin-top: 16px; font-size: .82rem; color: var(--testo-3); line-height: 1.5; }
.riquadro-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.riquadro-azioni > * { flex: 1 1 auto; }

/* modulo */
.blocco { margin-bottom: 22px; }
.blocco > label, .blocco > .capo {
  display: block; margin-bottom: 10px;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--testo-3); font-weight: 700;
}
.blocco input {
  width: 100%; padding: 14px 14px; min-height: 54px;
  background: var(--fondo); border: 1px solid var(--filo-vivo); color: var(--testo);
  font-family: 'Archivo', sans-serif; font-size: 1.06rem;
}
.blocco input::placeholder { color: var(--testo-3); }
.blocco input:focus { border-color: var(--verde); }

.tasti { display: flex; flex-wrap: wrap; gap: 6px; }
.tasto-scelta {
  appearance: none; background: var(--fondo); border: 1px solid var(--filo-vivo); color: var(--testo);
  font-family: 'Archivo', sans-serif; font-size: 1.15rem; font-weight: 600; font-stretch: 90%;
  padding: 14px 10px; min-width: 58px; min-height: 56px; cursor: pointer;
}
.tasto-scelta[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #04160D; }
.tasti.larghi .tasto-scelta { flex: 1 1 44%; font-size: .96rem; letter-spacing: .04em; }

/* ---------- tasto fisso e piede ---------- */

.tasto-fisso {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 30; display: none;
  appearance: none; border: 0; background: var(--verde); color: #04160D;
  font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: 18px; min-height: 58px; cursor: pointer;
}
@media (max-width: 720px) { .tasto-fisso { display: block; } main { padding-bottom: 92px; } }

.piede {
  padding: 26px clamp(14px, 2.4vw, 28px) 40px;
  border-top: 1px solid var(--filo);
  font-size: .78rem; color: var(--testo-3); line-height: 1.6;
}
.piede p { margin: 0 0 4px; }
@media (max-width: 720px) { .piede { padding-bottom: 92px; } }