/* ===================================================================
   BOOKING — foglio di stile del pannello
   ===================================================================
   Stessa pelle di FORM (form.t99.space): rail scura a sigle, superfici
   bianche su fondo caldo, bordi hairline, accento teal, IBM Plex.
   Non e' una scelta estetica isolata: chi installa e chi usa i due
   prodotti deve riconoscerli come la stessa famiglia.

   Cosa resta del pannello prenotazioni: contrasto alto, numeri grandi
   leggibili da un metro, lo stato di una prenotazione e' un colore
   prima che una parola, nessuna animazione oltre le transizioni di
   colore. Tema unico chiaro: FORM non ha una versione notte, e due
   prodotti della stessa famiglia con fondi opposti confondono piu' di
   quanto la sala buia aiuti.
   =================================================================== */

/* Font self-hosted: l'hosting non deve dipendere da Google. I woff2
   vivono accanto a questo file — il deploy resta una copia di cartelle. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;   /* font variabile: un file copre 400/500/600 */
  font-display: swap;
  src: url('plex-sans-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('plex-mono-500.woff2') format('woff2');
}

:root {
  /* Superfici e bordi */
  --sfondo:      #eff0ee;
  --superficie:  #ffffff;
  --bordo:       #dfe1de;
  --bordo-input: #dcdfdc;
  --bordo-hover: #b9c0bc;
  --filo:        #f0f1ef;   /* riga interna di liste e tabelle */
  --th-sfondo:   #f7f8f6;
  --riga-hover:  #fafbf9;
  --grigio-sf:   #f0f2ef;   /* usato anche inline dai moduli: non rinominare */

  /* Testo, dal piu' fermo al piu' spento */
  --testo:       #1b2124;
  --testo-2:     #3a4145;
  --tenue:       #6b7378;
  --debole:      #8a9198;
  --debolissimo: #a1a8ac;

  /* Rail */
  --rail-sfondo: #1b2124;
  --rail-hover:  #262e33;
  --rail-attivo: oklch(0.42 0.07 200);
  --rail-voce:   #8e979d;

  /* Accento teal: link, barre, focus. I bottoni pieni restano scuri
     come in FORM — l'accento indica dove si va, non cosa si conferma. */
  --accento:       oklch(0.5 0.1 200);
  --accento-hover: oklch(0.4 0.1 200);
  --accento-vivo:  oklch(0.62 0.11 200);
  --su-accento:    #ffffff;

  /* Semaforo: confermata, in attesa, saltata */
  --verde:     oklch(0.55 0.12 152);
  --verde-sf:  oklch(0.96 0.03 152);
  --verde-bo:  oklch(0.9 0.04 152);
  --ambra:     oklch(0.45 0.1 80);
  --ambra-sf:  oklch(0.96 0.04 80);
  --ambra-bo:  oklch(0.9 0.05 80);
  --rosso:     oklch(0.55 0.16 30);
  --rosso-sf:  oklch(0.96 0.03 30);
  --rosso-bo:  oklch(0.85 0.07 30);
  --info-sf:   oklch(0.97 0.02 200);
  --info-bo:   oklch(0.9 0.03 200);
  --info-tx:   oklch(0.42 0.07 200);

  /* Codice */
  --pre-sfondo: #171c1f;
  --pre-testo:  #d3dade;
  --tag-sfondo: #f0f2ef;
  --tag-testo:  #4d5559;

  /* Metrica condivisa dei controlli: input, select e bottoni sulla
     stessa riga devono avere la stessa altezza, altrimenti le righe di
     filtri si sfalsano. */
  --h-controllo: 36px;
  --raggio:      12px;
  --rail:        76px;

  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 14px/1.55 var(--sans);
}

a { color: var(--accento); text-decoration: none; transition: color 120ms ease; }
a:hover { color: var(--accento-hover); }

/* --- Struttura ---------------------------------------------------- */
.guscio { display: flex; min-height: 100vh; }
.colonna { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contenuto { padding: 26px 36px 72px; max-width: 1320px; width: 100%; }

/* --- Rail di navigazione ------------------------------------------ */
.rail {
  width: var(--rail);
  flex: 0 0 var(--rail);
  background: var(--rail-sfondo);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 0 20px;
  gap: 5px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  /* Su finestra bassa le voci non ci stanno e la rail scorre. La barra
     di sistema, chiara, su fondo scuro e' la cosa piu' luminosa dello
     schermo: qui diventa un filo appena piu' chiaro del fondo. Resta
     visibile — se sparisse, nessuno saprebbe che sotto c'e' dell'altro. */
  scrollbar-width: thin;
  scrollbar-color: #333c41 transparent;
}
.rail::-webkit-scrollbar { width: 6px; height: 6px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb { background: #333c41; border-radius: 3px; }
.rail:hover::-webkit-scrollbar-thumb { background: #454f55; }
.rail-voce {
  width: 54px; padding: 9px 0 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border-radius: 10px;
  color: var(--rail-voce); text-decoration: none;
  font-size: 9.5px; letter-spacing: 0.03em; text-align: center;
  flex: none;
  transition: background 120ms ease, color 120ms ease;
}
.rail-voce svg { width: 20px; height: 20px; display: block; }
.rail-voce:hover { background: var(--rail-hover); color: var(--rail-voce); }
.rail-voce.attiva { background: var(--rail-attivo); color: #fff; }

/* --- Barra superiore ---------------------------------------------- */
.barra {
  display: flex; align-items: center; gap: 18px;
  padding: 15px 36px;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
  position: sticky; top: 0; z-index: 20;
}
.spazio { flex: 1; }

/* Il marchio a sinistra e' l'unica cosa della barra che non cambia mai:
   il lato destro e' il contesto (worker, cliente, workspace, uscita). */
.marchio-barra {
  display: flex; align-items: baseline; gap: 10px;
  white-space: nowrap; color: var(--testo); text-decoration: none;
}
.marchio-barra:hover { color: var(--testo); }
.marchio-barra strong { font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; }
.marchio-barra .tagline { font-size: 13px; color: var(--tenue); }

.tenant { font-size: 13px; color: var(--testo); white-space: nowrap; }
.selettore {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--bordo-input); border-radius: 8px;
  background: var(--th-sfondo)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%238a9198' fill='none' stroke-width='1.4'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  color: var(--testo);
  padding: 7px 28px 7px 11px;
  font: 400 13.5px var(--sans);
  max-width: 260px; cursor: pointer;
  transition: background-color 120ms ease;
}
.selettore:hover { background-color: var(--grigio-sf); }
.selettore-ws { font-weight: 500; }
.esci { color: var(--tenue); font-size: 13px; white-space: nowrap; }
.esci:hover { color: var(--testo); }

/* Il battito del worker: un pallino e due parole. Se e' rosso, le email
   non partono e le provvisorie non scadono — va visto senza cercarlo. */
.battito {
  display: inline-flex; align-items: center; gap: 9px;
  font: 400 12px var(--mono); color: #5b6469; white-space: nowrap;
}
.battito .pallino { width: 7px; height: 7px; border-radius: 50%; background: var(--debole); }
.battito-vivo  .pallino { background: var(--verde); }
.battito-fermo .pallino { background: var(--rosso); }
.battito-fermo { color: var(--rosso); }

/* --- Titoli -------------------------------------------------------- */
.titolo-pagina { margin: 0 0 6px; font-size: 23px; font-weight: 600; letter-spacing: -0.01em; }
.sottotitolo { margin: 0 0 20px; color: var(--tenue); font-size: 13.5px; }

/* --- Schede e griglie ---------------------------------------------- */
.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 18px 22px 20px;
  margin: 0 0 20px;
}
.scheda h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.scheda .sotto { margin: 0 0 16px; color: var(--debole); font-size: 13px; }
.griglia { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* I numeri della giornata. Grandi di proposito: si leggono da un metro
   di distanza, che e' come li guarda chi passa davanti al monitor.
   L'etichetta sta dopo il valore nel markup ma va letta prima:
   column-reverse la porta sopra senza toccare i moduli. */
.contatore {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 20px 22px;
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 12px;
}
.contatore .valore { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.contatore .etichetta {
  font: 500 10.5px var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--debole);
}
.contatore.allarme .valore { color: var(--rosso); }

/* --- Tabelle ------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; padding: 11px 14px;
  font: 500 10px var(--mono); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--debole); border-bottom: 1px solid var(--bordo);
}
td {
  text-align: left; padding: 14px;
  border-bottom: 1px solid var(--filo);
  color: var(--testo-2); vertical-align: top;
}
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--riga-hover); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabella-scroll { overflow-x: auto; }
.vuoto { color: var(--tenue); text-align: center; padding: 32px 12px; font-size: 13.5px; }

/* --- Badge di stato ------------------------------------------------ */
.badge {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  background: var(--grigio-sf); color: var(--tenue);
}
.badge-verde  { background: var(--verde-sf); color: var(--verde); }
.badge-ambra  { background: var(--ambra-sf); color: var(--ambra); }
.badge-rosso  { background: var(--rosso-sf); color: var(--rosso); }
.badge-grigio { background: var(--grigio-sf); color: var(--tenue); }

/* --- Form ---------------------------------------------------------- */
label { display: block; margin: 0 0 5px; font-size: 12.5px; font-weight: 500; color: var(--testo); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=datetime-local],
input[type=tel], input[type=url], input[type=search], select, textarea {
  width: 100%;
  min-height: var(--h-controllo);
  padding: 8px 11px;
  border: 1px solid var(--bordo-input); border-radius: 8px;
  background: var(--superficie); color: var(--testo);
  font: 400 13.5px/1.25 var(--sans);
}
/* Date e select hanno un layout interno proprio (in Chrome restano piu'
   alti degli altri controlli): l'altezza esplicita li riallinea. */
input[type=date], input[type=time], input[type=datetime-local] {
  height: var(--h-controllo); appearance: none; -webkit-appearance: none;
}
select:not([multiple]):not([size]) { height: var(--h-controllo); }
input.mono, textarea.mono { font: 400 12.5px/1.25 var(--mono); }
textarea { min-height: 100px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, button:focus-visible, .bottone:focus-visible {
  outline: 2px solid var(--accento-vivo); outline-offset: 2px;
}
.campo { margin: 0 0 14px; }
.aiuto, .campo .aiuto { color: var(--debole); font-size: 12.5px; margin-top: 4px; }
.campi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
fieldset { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px 18px; margin: 0 0 16px; }
legend {
  padding: 0 6px; font: 500 10px var(--mono);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--debole);
}

/* --- Bottoni ------------------------------------------------------- */
/* Il pieno e' scuro, non teal: l'accento porta altrove, il bottone
   conferma qui. Stessa regola di FORM. */
.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--h-controllo);
  border: 1px solid var(--bordo-input); border-radius: 8px;
  background: var(--superficie); color: var(--testo);
  padding: 8px 15px; font: 400 13px/1.25 var(--sans);
  cursor: pointer; text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.bottone:hover { background: var(--th-sfondo); border-color: var(--bordo-hover); color: var(--testo); }
.bottone-pieno { background: var(--testo); color: #fff; border-color: var(--testo); font-weight: 500; }
.bottone-pieno:hover { background: #2c353a; border-color: #2c353a; color: #fff; }
.bottone-pericolo { background: var(--rosso); color: #fff; border-color: var(--rosso); }
.bottone-pericolo:hover { background: oklch(0.48 0.16 30); border-color: oklch(0.48 0.16 30); color: #fff; }
.bottone-piccolo { min-height: 30px; padding: 5px 11px; font-size: 12.5px; }
.bottoni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

/* --- Avvisi -------------------------------------------------------- */
.avviso {
  padding: 11px 14px; border-radius: 9px; margin: 0 0 12px;
  font-size: 13.5px; line-height: 1.5; border: 1px solid transparent;
}
.avviso-ok     { background: var(--verde-sf); color: var(--verde);   border-color: var(--verde-bo); }
.avviso-errore { background: var(--rosso-sf); color: var(--rosso);   border-color: var(--rosso-bo); }
.avviso-attesa { background: var(--ambra-sf); color: var(--ambra);   border-color: var(--ambra-bo); }
.avviso-info   { background: var(--info-sf);  color: var(--info-tx); border-color: var(--info-bo); }

/* --- Codice e monospazio ------------------------------------------- */
.mono { font: 400 12.5px var(--mono); }
code {
  background: var(--tag-sfondo); color: var(--tag-testo);
  padding: 1px 6px; border-radius: 5px; font: 400 12px var(--mono);
}
pre {
  background: var(--pre-sfondo); color: var(--pre-testo);
  padding: 14px 16px; border-radius: 10px; overflow: auto;
  font: 400 12px/1.65 var(--mono);
}
pre code { background: none; color: inherit; padding: 0; }
pre.embed { white-space: pre-wrap; word-break: break-all; }
.codice-prenotazione { font: 500 13px var(--mono); letter-spacing: 0.06em; }

/* --- Pagina di accesso --------------------------------------------- */
.pagina-accesso { min-height: 100vh; padding: 20px; }
.accesso { max-width: 380px; margin: 12vh auto; }
.accesso .marchio { text-align: center; margin-bottom: 20px; }
.accesso .logo {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--accento-vivo); color: #10161a;
  font: 500 19px var(--mono);
  display: grid; place-items: center; margin: 0 auto 12px;
}
.accesso .marchio strong { display: block; font-size: 24px; font-weight: 600; letter-spacing: 0.1em; }
/* :not(.logo) perche' il monogramma e' uno <span> dentro .marchio come la
   tagline: senza esclusione erediterebbe il corpo 13px e sparirebbe. */
.accesso .marchio span:not(.logo) { display: block; font-size: 13px; color: var(--tenue); margin-top: 4px; }
.accesso form {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 22px;
}
.accesso label { margin-top: 14px; }
.accesso label:first-of-type { margin-top: 0; }
.accesso .bottone { width: 100%; margin-top: 20px; }

/* --- Piano sala ----------------------------------------------------- */
.sala { display: flex; flex-wrap: wrap; gap: 10px; }
.tavolo {
  border: 1px solid var(--bordo); border-radius: 11px;
  padding: 12px 14px; min-width: 92px; background: var(--superficie);
}
.tavolo .nome { font-size: 14px; font-weight: 500; }
.tavolo .posti { font: 400 12px var(--mono); color: var(--debole); margin-top: 3px; }
.tavolo.occupato { border-color: var(--ambra-bo); background: var(--ambra-sf); }

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 820px) {
  :root { --rail: 100%; }
  .guscio { flex-direction: column; }
  .rail {
    flex-direction: row; height: auto; width: 100%; position: static;
    align-items: center; overflow-x: auto; justify-content: flex-start;
    padding: 10px 14px; gap: 6px;
  }
  .rail-voce { width: auto; padding: 8px 12px; }
  .rail-voce span { display: none; }
  .barra { padding: 12px 18px; flex-wrap: wrap; gap: 10px; position: static; }
  /* Su schermo stretto cade la tagline, che e' decorazione. Il battito
     del worker resta: e' il guasto piu' silenzioso del sistema e la
     barra puo' andare a capo. */
  .marchio-barra .tagline { display: none; }
  .contenuto { padding: 20px 18px 56px; }
  .griglia, .campi { grid-template-columns: 1fr; }
}