/* ==========================================================================
   Segretly — le schermate del pannello nelle schede di /funzionalita/food

   Caricato SOLO da `funzionalita-food.hbs`, come `booking.css` dalla pagina
   della call: `home.css` e' gia' a cinquemilacinquecento righe e questo serve
   a una pagina sola.

   Le regole del posto, tutte ereditate da `home.css` e da rispettare:
   - la cornice e' `.bo-tablet` + `.bo-tablet__screen`, che sono li' dentro:
     hanno `container-type: inline-size` e il corpo in `cqi`, quindi qui si
     misura in `em` e la schermata scala con la larghezza dell'apparecchio;
   - le recite si accendono da fuori. `setupChat` (home.js) mette `.is-booked`
     sull'elemento indicato da `data-books` quando la conversazione a fianco
     arriva in fondo, e `.is-freed` su quello di `data-frees`. Qui non si
     scrive JavaScript: si scrivono i due stati;
   - **tutto dev'essere leggibile anche da fermo.** Le transizioni stanno
     dietro `.has-js`, cosi' senza JavaScript — e con "riduci movimento", dove
     `setupChat` porta subito allo stato finale — la schermata mostra la
     serata gia' completa invece di una tabella mezza vuota.
   ========================================================================== */

/* ==========================================================================
   Sala — la plancia del servizio (`views/restaurant/Board.vue`)
   ========================================================================== */

.bo-hall {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  height: 100%;
  padding: 1.4em 1.6em;
}

.bo-hall__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}
.bo-hall__heading strong {
  display: block;
  font-size: 1.5em;
}
.bo-hall__heading span {
  color: var(--gray-700);
}
/* i due turni della giornata: quello in corso e' acceso */
.bo-hall__turns {
  display: flex;
  flex-shrink: 0;
  border: 1px solid rgba(32, 32, 32, 0.16);
  border-radius: 0.4em;
  overflow: hidden;
}
.bo-hall__turns span {
  padding: 0.5em 0.9em;
}
.bo-hall__turns .is-active {
  background: rgba(129, 103, 41, 0.14);
  color: var(--laiton-strong);
}

/* --- i contatori in cima ------------------------------------------------ */

.bo-hall__tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6em;
}
.bo-hall__tile {
  padding: 0.6em 0.8em;
  border: 1px solid var(--line);
  border-radius: 0.4em;
  background: #fff;
}
.bo-hall__tile b {
  display: block;
  font-size: 1.45em;
  line-height: 1.1;
}
/* `block` e non ereditato dal `b`: quando il numero e' un contatore che
   cambia diventa `inline-grid`, e senza questo l'etichetta gli si appiccica
   accanto ("88/120COPERTI"). */
.bo-hall__tile i {
  display: block;
  font-style: normal;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.bo-hall__tile.--good b {
  color: #2e7d32;
}
.bo-hall__tile.--bad b {
  color: #c62828;
}

/* Il numero che cambia quando la prenotazione a fianco si chiude: i due
   valori sono impilati nello stesso spazio, cosi' la colonna non si allarga
   sotto gli occhi. Da fermo si legge quello finale — vedi la nota in testa. */
/* `.bo-hall__tile b` lo dichiara `block`, e fra i due vince la specificita'
   piu' alta: senza questo selettore il numero resta un blocco e i due valori
   non si sovrappongono. */
.bo-hall__tile .bo-hall__count {
  display: inline-grid;
  justify-items: start;
}
.bo-hall__count > span {
  grid-area: 1 / 1;
}
.bo-hall__count .--before {
  opacity: 0;
}
.has-js .bo-hall__count .--before {
  opacity: 1;
}
.has-js .bo-hall__count .--after {
  opacity: 0;
}
.has-js .is-booked .bo-hall__count .--before,
.has-js .is-freed .bo-hall__count .--before {
  opacity: 0;
}
.has-js .is-booked .bo-hall__count .--after,
.has-js .is-freed .bo-hall__count .--after {
  opacity: 1;
}
.has-js .bo-hall__count > span {
  transition: opacity 0.4s var(--ease-out);
}

/* --- l'elenco della serata ---------------------------------------------- */

.bo-hall__list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 0.3em;
  overflow: hidden;
  background: #fff;
}
.bo-hall__cols,
.bo-hall__row {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr) 3.6em minmax(0, 0.8fr) 7.4em;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.8em;
}
.bo-hall__cols {
  border-bottom: 1px solid var(--line);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.bo-hall__row + .bo-hall__row {
  border-top: 1px solid rgba(32, 32, 32, 0.07);
}
.bo-hall__row b {
  font-weight: 600;
}
.bo-hall__who {
  min-width: 0;
}
.bo-hall__who span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Occasione e allergie: si leggono **prima** di andare al tavolo, ed e' il
   motivo per cui la segretaria quella domanda la fa. */
.bo-hall__chips {
  display: flex;
  gap: 0.3em;
  margin-top: 0.25em;
}
.bo-hall__chip {
  padding: 0.1em 0.5em;
  border-radius: 1em;
  font-size: 0.74em;
  white-space: nowrap;
}
.bo-hall__chip.--occasion {
  background: rgba(129, 103, 41, 0.14);
  color: var(--laiton-strong);
}
.bo-hall__chip.--allergy {
  background: rgba(198, 40, 40, 0.12);
  color: #c62828;
}
.bo-hall__room {
  overflow: hidden;
  padding: 0.2em 0.5em;
  border: 1px solid rgba(32, 32, 32, 0.16);
  border-radius: 0.3em;
  font-size: 0.86em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gray-700);
}
.bo-hall__acts {
  display: flex;
  gap: 0.3em;
}
.bo-hall__btn {
  padding: 0.3em 0.6em;
  border: 1px solid var(--laiton);
  border-radius: 0.3em;
  font-size: 0.8em;
  white-space: nowrap;
  color: var(--laiton-strong);
}
.bo-hall__btn.--done {
  background: var(--laiton);
  border-color: var(--laiton);
  color: #fff;
}

/* La riga che nasce dalla conversazione a fianco. Stessa meccanica di
   `.bo-cal__ev.--new` in home.css: senza JavaScript e' semplicemente li'. */
.bo-hall__row.--new {
  background: rgba(129, 103, 41, 0.09);
  box-shadow: inset 0.2em 0 0 var(--laiton);
}
.has-js .bo-hall__row.--new {
  opacity: 0;
  transform: translateY(-0.4em);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.has-js .is-booked .bo-hall__row.--new {
  opacity: 1;
  transform: none;
}

/* La riga che invece si spegne: il tavolo che ha detto "non veniamo". */
.has-js .bo-hall__row.--leaving {
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.has-js .is-freed .bo-hall__row.--leaving {
  opacity: 0.45;
  transform: scale(0.99);
}
.bo-hall__row.--leaving .bo-hall__gone {
  display: none;
}
.has-js .is-freed .bo-hall__row.--leaving .bo-hall__gone {
  display: inline;
}
.has-js .is-freed .bo-hall__row.--leaving .bo-hall__acts {
  display: none;
}
.bo-hall__gone {
  padding: 0.3em 0.6em;
  border-radius: 0.3em;
  background: rgba(198, 40, 40, 0.12);
  font-size: 0.8em;
  color: #c62828;
}

/* Su schermo stretto il tablet sparisce (regola di `home.css`), quindi qui
   non serve nessun breakpoint: quello che resta e' il telefono. */

/* ==========================================================================
   Menu digitale — la carta che la segretaria legge
   (`views/restaurants/Menu.vue`, `components/restaurant/MenuEditor.vue`)
   ========================================================================== */

.bo-menu {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  height: 100%;
  padding: 1.4em 1.6em;
}
.bo-menu__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}
.bo-menu__heading strong {
  display: block;
  font-size: 1.5em;
}
.bo-menu__heading span {
  color: var(--gray-700);
}
.bo-menu__btn {
  flex-shrink: 0;
  padding: 0.55em 1em;
  border-radius: 0.35em;
  background: var(--laiton);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

/* La riga della validita': quello che il pannello mostra sotto le caselle e'
   la frase che la segretaria dira' davvero, e qui si vede la stessa cosa. */
.bo-menu__valid {
  padding: 0.55em 0.8em;
  border: 1px dashed rgba(129, 103, 41, 0.5);
  border-radius: 0.4em;
  background: rgba(129, 103, 41, 0.07);
  color: var(--laiton-strong);
}
.bo-menu__valid b {
  font-weight: 600;
}

.bo-menu__list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 0.3em;
  overflow: hidden;
  background: #fff;
}
.bo-menu__cat {
  padding: 0.4em 0.8em;
  border-bottom: 1px solid var(--line);
  background: var(--gray-100);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-700);
}
.bo-menu__row {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr) 4.2em;
  align-items: center;
  gap: 0.7em;
  padding: 0.5em 0.8em;
  border-bottom: 1px solid rgba(32, 32, 32, 0.07);
}
/* il quadratino della foto del piatto: un piatto senza foto e' il caso
   normale, e si vede che il posto c'e' comunque */
.bo-menu__pic {
  aspect-ratio: 1;
  border-radius: 0.3em;
  background: linear-gradient(135deg, #d9cfae, #b79a5f);
}
.bo-menu__pic.--empty {
  background: repeating-linear-gradient(
    -45deg,
    rgba(32, 32, 32, 0.05) 0 4px,
    transparent 4px 8px
  );
  border: 1px solid var(--line);
}
.bo-menu__dish {
  min-width: 0;
}
.bo-menu__dish b {
  display: block;
  font-weight: 600;
}
.bo-menu__dish span {
  display: block;
  overflow: hidden;
  font-size: 0.86em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gray-400);
}
.bo-menu__price {
  text-align: right;
  font-weight: 600;
}
.bo-menu__tags {
  display: flex;
  gap: 0.3em;
  margin-top: 0.25em;
}
.bo-menu__tag {
  padding: 0.1em 0.5em;
  border-radius: 1em;
  background: rgba(198, 40, 40, 0.12);
  font-size: 0.72em;
  color: #c62828;
}
.bo-menu__tag.--free {
  background: rgba(46, 125, 50, 0.14);
  color: #2e7d32;
}
/* I piatti che rispondono alla domanda della chat a fianco. Da fermo sono
   gia' segnati: e' la riga giusta comunque, non un effetto. */
.bo-menu__row.--match {
  background: rgba(46, 125, 50, 0.08);
  box-shadow: inset 0.2em 0 0 #2e7d32;
}
.has-js .bo-menu__row.--match {
  background: transparent;
  box-shadow: none;
  transition:
    background 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}
.has-js .is-booked .bo-menu__row.--match {
  background: rgba(46, 125, 50, 0.08);
  box-shadow: inset 0.2em 0 0 #2e7d32;
}

/* --- la lettura del menu di carta --------------------------------------- */

.bo-scan {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 1em;
  height: 100%;
  padding: 1.4em 1.6em;
}
.bo-scan__paper {
  display: flex;
  flex-direction: column;
  /* il foglio e' alto quanto il suo contenuto: tirato a tutta colonna
     lascerebbe sotto mezzo palmo di carta bianca */
  align-self: start;
  gap: 0.5em;
  padding: 1em;
  border: 1px solid var(--line);
  border-radius: 0.3em;
  background: #fbf7ec;
  /* la foto di un menu di carta non e' mai dritta */
  transform: rotate(-1.2deg);
}
.bo-scan__paper strong {
  text-align: center;
  font-size: 1.2em;
  letter-spacing: 0.08em;
}
.bo-scan__paper i {
  font-style: normal;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--laiton-strong);
}
.bo-scan__line {
  display: flex;
  justify-content: space-between;
  gap: 0.6em;
  font-size: 0.88em;
}
.bo-scan__line span:last-child {
  color: var(--gray-700);
}
.bo-scan__side {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  min-width: 0;
}

/* ==========================================================================
   Ordini — asporto e consegna (`views/restaurant/Orders.vue`)
   ========================================================================== */

.bo-ord {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  height: 100%;
  padding: 1.4em 1.6em;
}
.bo-ord__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}
.bo-ord__heading strong {
  display: block;
  font-size: 1.5em;
}
.bo-ord__heading span {
  color: var(--gray-700);
}
.bo-ord__tabs {
  display: flex;
  flex-shrink: 0;
  border: 1px solid rgba(32, 32, 32, 0.16);
  border-radius: 0.4em;
  overflow: hidden;
}
.bo-ord__tabs span {
  padding: 0.5em 0.9em;
  white-space: nowrap;
}
.bo-ord__tabs .is-active {
  background: rgba(129, 103, 41, 0.14);
  color: var(--laiton-strong);
}

.bo-ord__list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 0.3em;
  overflow: hidden;
  background: #fff;
}
.bo-ord__cols,
.bo-ord__row {
  display: grid;
  grid-template-columns: 6.4em minmax(0, 1fr) 5.4em 4.6em 8.2em;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.8em;
}
.bo-ord__cols {
  border-bottom: 1px solid var(--line);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.bo-ord__row + .bo-ord__row {
  border-top: 1px solid rgba(32, 32, 32, 0.07);
}
/* Il numero d'ordine si legge a gruppi di quattro, come nel pannello e nel
   messaggio al cliente: e' quello che si detta al telefono e al banco. */
.bo-ord__num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.bo-ord__who {
  min-width: 0;
}
.bo-ord__who b {
  display: block;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bo-ord__who span {
  display: block;
  overflow: hidden;
  font-size: 0.86em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gray-400);
}
.bo-ord__when b {
  font-weight: 600;
}
.bo-ord__when span {
  display: block;
  font-size: 0.78em;
  color: var(--gray-400);
}
.bo-ord__total {
  text-align: right;
  font-weight: 600;
}
/* La tendina dello stato: il colore si legge da lontano mentre si lavora, ed
   e' il motivo per cui nel pannello e' un chip dentro la select. */
.bo-ord__state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4em;
  padding: 0.25em 0.5em;
  border: 1px solid rgba(32, 32, 32, 0.16);
  border-radius: 0.3em;
  font-size: 0.8em;
}
.bo-ord__chip {
  padding: 0.15em 0.55em;
  border-radius: 1em;
  white-space: nowrap;
}
.bo-ord__chip.--new {
  background: rgba(129, 103, 41, 0.16);
  color: var(--laiton-strong);
}
.bo-ord__chip.--work {
  background: rgba(2, 119, 189, 0.14);
  color: #01579b;
}
.bo-ord__chip.--out {
  background: rgba(245, 124, 0, 0.16);
  color: #e65100;
}
.bo-ord__chip.--done {
  background: rgba(46, 125, 50, 0.14);
  color: #2e7d32;
}
.bo-ord__caret {
  color: var(--gray-400);
}
.bo-ord__kind {
  padding: 0.1em 0.5em;
  border-radius: 1em;
  background: var(--gray-200);
  font-size: 0.74em;
  white-space: nowrap;
  color: var(--gray-700);
}

/* La richiesta scritta a parole, sotto la riga del piatto. **Non ha due
   pulsanti**, e non e' una semplificazione da vetrina: quelli sono stati
   tolti dal pannello perche' facevano la domanda sbagliata — davanti a «al
   sangue» il locale non risponde si' o no, sistema l'ordine e manda il
   riepilogo. E' un avviso informativo, dello stesso azzurro del pannello. */
.bo-ord__ask {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0.8em 0.6em;
  padding: 0.5em 0.7em;
  border-radius: 0.35em;
  background: rgba(129, 103, 41, 0.1);
  font-size: 0.86em;
  color: var(--laiton-strong);
}
.bo-ord__ask i {
  font-style: normal;
  color: var(--gray-400);
}

/* L'ordine che entra dalla pagina del carrello a fianco. */
.bo-ord__row.--new {
  background: rgba(129, 103, 41, 0.09);
  box-shadow: inset 0.2em 0 0 var(--laiton);
}
.has-js .bo-ord__row.--new,
.has-js .bo-ord__ask.--new {
  opacity: 0;
  transform: translateY(-0.4em);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.has-js .is-booked .bo-ord__row.--new,
.has-js .is-booked .bo-ord__ask.--new {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Il telefono con il carrello: e' una pagina web e non WhatsApp, quindi la
   barra in cima e' quella dell'indirizzo. Il resto della cornice — scocca,
   notch, barra di stato — resta quello di `home.css`.
   ========================================================================== */

.tw-cart {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--gray-100);
  font-size: 0.9em;
}
.tw-cart__url {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.7em;
  background: #e8e8e8;
  font-size: 0.78em;
  color: var(--gray-700);
}
.tw-cart__url b {
  overflow: hidden;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tw-cart__lock {
  flex-shrink: 0;
  color: var(--gray-400);
}
.tw-cart__head {
  padding: 0.7em 0.8em;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.tw-cart__head strong {
  display: block;
  font-size: 1.05em;
}
.tw-cart__head span {
  font-size: 0.82em;
  color: var(--gray-400);
}
.tw-cart__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.6em 0.8em;
}
.tw-cart__cat {
  margin: 0.3em 0 0.4em;
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.tw-cart__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0;
  border-bottom: 1px solid rgba(32, 32, 32, 0.07);
}
.tw-cart__item b {
  display: block;
  font-weight: 600;
}
.tw-cart__item i {
  font-style: normal;
  font-size: 0.8em;
  color: var(--gray-400);
}
.tw-cart__qty {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
}
.tw-cart__step {
  display: grid;
  place-items: center;
  width: 1.6em;
  aspect-ratio: 1;
  border: 1px solid var(--laiton);
  border-radius: 50%;
  color: var(--laiton-strong);
}
.tw-cart__note {
  margin-top: 0.3em;
  padding: 0.35em 0.5em;
  border-radius: 0.3em;
  background: rgba(245, 124, 0, 0.12);
  font-size: 0.78em;
  color: #e65100;
}
/* la barra fissa in fondo: sul telefono il pulsante che chiude l'ordine sta
   sotto la piega per tutto il tempo, ed e' il motivo per cui esiste */
.tw-cart__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding: 0.6em 0.8em;
  background: #fff;
  border-top: 1px solid var(--line);
}
.tw-cart__bar strong {
  font-size: 1.05em;
}
.tw-cart__send {
  padding: 0.5em 0.9em;
  border-radius: 0.35em;
  background: var(--laiton);
  color: #fff;
  font-weight: 600;
}

/* ==========================================================================
   Consegne — la plancia del giro (`views/restaurant/Riders.vue`)
   ========================================================================== */

.bo-rid {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  height: 100%;
  padding: 1.4em 1.6em;
}
.bo-rid__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}
.bo-rid__heading strong {
  display: block;
  font-size: 1.5em;
}
.bo-rid__heading span {
  color: var(--gray-700);
}
.bo-rid__who {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-shrink: 0;
  padding: 0.4em 0.7em;
  border: 1px solid var(--line);
  border-radius: 2em;
  background: #fff;
}
.bo-rid__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 0.9em;
  flex: 1;
  min-height: 0;
}
.bo-rid__list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 0.3em;
  overflow: hidden;
  background: #fff;
}
.bo-rid__stop {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0.8em;
}
.bo-rid__stop + .bo-rid__stop {
  border-top: 1px solid rgba(32, 32, 32, 0.07);
}
/* il numero del giro: il primo della lista e' la prossima consegna, e
   l'ordine lo decide il locale con le frecce */
.bo-rid__pos {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--laiton);
  font-size: 0.8em;
  font-weight: 600;
  color: #fff;
}
.bo-rid__addr {
  min-width: 0;
}
.bo-rid__addr b {
  display: block;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bo-rid__addr span {
  display: block;
  overflow: hidden;
  font-size: 0.84em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gray-400);
}
.bo-rid__eta {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}
.bo-rid__eta span {
  display: block;
  font-size: 0.76em;
  font-weight: 400;
  color: var(--gray-400);
}

/* La mappa: non e' una mappa vera e non deve sembrarlo — e' lo sfondo su cui
   si legge dov'e' il rider e da quanto la posizione e' ferma. */
.bo-rid__map {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 0.3em;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(129, 103, 41, 0.1), transparent 60%),
    repeating-linear-gradient(
      0deg,
      rgba(32, 32, 32, 0.05) 0 1px,
      transparent 1px 14%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(32, 32, 32, 0.05) 0 1px,
      transparent 1px 12%
    ),
    #f3f1ea;
}
/* le due strade grosse, giusto per non lasciare la griglia nuda */
.bo-rid__road {
  position: absolute;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(32, 32, 32, 0.06);
}
.bo-rid__road.--h {
  left: -5%;
  right: -5%;
  top: 46%;
  height: 6%;
  transform: rotate(-4deg);
}
.bo-rid__road.--v {
  top: -5%;
  bottom: -5%;
  left: 38%;
  width: 5%;
}
.bo-rid__dot {
  position: absolute;
  width: 0.9em;
  aspect-ratio: 1;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(32, 32, 32, 0.3);
}
/* verde: la posizione e' viva. Arancione: e' ferma, e lo diciamo invece di
   spacciare per aggiornato un puntino che non lo e'. */
.bo-rid__dot.--live {
  background: #2e7d32;
}
.bo-rid__dot.--stale {
  background: #ef6c00;
}
.bo-rid__dot.--home {
  background: var(--laiton);
}
.bo-rid__pin {
  position: absolute;
  padding: 0.2em 0.5em;
  border-radius: 0.3em;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(32, 32, 32, 0.18);
  font-size: 0.76em;
  white-space: nowrap;
}

/* Il filo fra il locale e il rider: senza, la mappa e' una griglia con due
   pallini e non si capisce che stanno sulla stessa consegna. */
.bo-rid__path {
  position: absolute;
  left: 38%;
  top: 42%;
  width: 24%;
  height: 30%;
  border-left: 2px dashed rgba(129, 103, 41, 0.55);
  border-top: 2px dashed rgba(129, 103, 41, 0.55);
  border-top-left-radius: 1.2em;
}

/* Sotto i 900px il tablet passa sotto il telefono e prende tutta la riga
   (regola di `home.css`): a quella larghezza le due schermate a colonne si
   impilano. La misura e' sul contenitore e non sulla finestra, perche' il
   `.bo-tablet` e' gia' un container. */
@container (max-width: 560px) {
  .bo-scan,
  .bo-rid__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .bo-scan__paper {
    display: none;
  }
  .bo-rid__map {
    min-height: 8em;
  }
}

/* ==========================================================================
   Il foglio della personalizzazione — quello che si apre da «Personalizza»
   sul carrello (`app/templates/takeaway.hbs`, sezione `change-sheet`).

   Sui piatti che il locale ha dichiarato componibili si spuntano caselle che
   ha scritto lui, col loro prezzo: non c'e' niente da approvare e il
   pagamento resta aperto. L'avviso della revisione appartiene all'altro ramo
   — il testo libero — e qui dentro non ci va, o direbbe il falso.
   ========================================================================== */

.tw-sheet {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-top: auto;
  padding: 0.8em;
  border-top-left-radius: 0.9em;
  border-top-right-radius: 0.9em;
  background: #fff;
  box-shadow: 0 -10px 30px rgba(32, 32, 32, 0.18);
}
.tw-sheet strong {
  font-size: 1.05em;
}
.tw-sheet__group p {
  margin: 0 0 0.3em;
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.tw-sheet__opt {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0;
}
.tw-sheet__box {
  display: grid;
  place-items: center;
  width: 1.15em;
  aspect-ratio: 1;
  flex-shrink: 0;
  border: 1.5px solid rgba(32, 32, 32, 0.35);
  border-radius: 0.25em;
  font-size: 0.9em;
  line-height: 1;
  color: transparent;
}
.tw-sheet__opt.--on .tw-sheet__box {
  border-color: var(--laiton);
  background: var(--laiton);
  color: #fff;
}
/* barrato: l'ingrediente spuntato in «Rimuovi» esce dal piatto, e vederlo
   barrato e' l'unico modo per non confonderlo con uno da aggiungere */
.tw-sheet__opt.--on.--remove span {
  text-decoration: line-through;
  color: var(--gray-400);
}
/* Il testo della voce, che e' l'unico span senza classe della riga: con un
   `.tw-sheet__opt span` secco la regola prendeva anche la casella, e
   `flex: 1` su un quadratino con `aspect-ratio` lo faceva grande quanto il
   foglio. */
.tw-sheet__opt > span:not([class]) {
  flex: 1;
}
.tw-sheet__opt i {
  font-style: normal;
  color: var(--gray-700);
}
.tw-sheet__acts {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
  margin-top: 0.2em;
}
.tw-sheet__ghost {
  padding: 0.45em 0.8em;
  border: 1px solid rgba(32, 32, 32, 0.2);
  border-radius: 0.35em;
  color: var(--gray-700);
}
.tw-sheet__save {
  padding: 0.45em 0.9em;
  border-radius: 0.35em;
  background: var(--laiton);
  color: #fff;
  font-weight: 600;
}

/* Il cartellino del piatto finito. «Finito per oggi» e non «Esaurito»: domani
   c'e', e la differenza e' se questa persona torna. */
.tw-cart__out {
  display: inline-block;
  margin-right: 0.4em;
  padding: 0.1em 0.45em;
  border-radius: 1em;
  background: rgba(198, 40, 40, 0.12);
  font-size: 0.72em;
  font-weight: 600;
  color: #c62828;
}
.tw-cart__item.--out b,
.tw-cart__item.--out i {
  color: var(--gray-400);
}

/* Il riassunto delle porzioni e del massimo per turno, come sul pulsante
   della riga nel listino del pannello: «2 porz. · max 20/20». */
.bo-menu__cap {
  padding: 0.15em 0.5em;
  border: 1px solid rgba(32, 32, 32, 0.16);
  border-radius: 0.3em;
  font-size: 0.76em;
  white-space: nowrap;
  color: var(--gray-700);
}
.bo-menu__row.--limited {
  background: rgba(129, 103, 41, 0.07);
}

/* ==========================================================================
   La plancia a quattro schede (`views/restaurant/Board.vue`)

   Elenco, Timing, Mappa e Lista d'attesa sono quattro modi di leggere la
   stessa serata, e nessuno sostituisce gli altri. Qui si disegna il Timing,
   che e' quello che l'Elenco — gia' visto nella prima scheda — non sa dire:
   fino a che ora il tavolo da quattro e' occupato.
   ========================================================================== */

.bo-hall__tabs {
  display: flex;
  gap: 1.2em;
  border-bottom: 1px solid var(--line);
}
.bo-hall__tabs span {
  position: relative;
  padding: 0.5em 0;
  letter-spacing: 0.02em;
  color: var(--gray-400);
}
.bo-hall__tabs .is-active {
  font-weight: 600;
  color: var(--laiton-strong);
}
.bo-hall__tabs .is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--laiton);
}
/* quanti aspettano si legge senza aprire la scheda: e' il numero che dice se
   qualcuno sta per andarsene */
/* `.bo-hall__tabs span` colora tutte le linguette e batte per specificita' un
   `.bo-hall__badge` secco: senza il selettore lungo il numero resta grigio sul
   fondo scuro, cioe' invisibile. */
.bo-hall__tabs .bo-hall__badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  margin-left: 0.4em;
  padding: 0.05em 0.35em;
  border-radius: 1em;
  background: var(--laiton);
  font-size: 0.78em;
  color: #fff;
}

/* --- Timing: una corsia per tavolo -------------------------------------- */

.bo-tl {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 0.3em;
  overflow: hidden;
  background: #fff;
}
.bo-tl__row {
  display: grid;
  grid-template-columns: 5.4em minmax(0, 1fr);
  align-items: stretch;
}
.bo-tl__row + .bo-tl__row {
  border-top: 1px solid rgba(32, 32, 32, 0.07);
}
.bo-tl__row.--head {
  border-bottom: 1px solid var(--line);
  font-size: 0.8em;
  color: var(--gray-400);
}
.bo-tl__gutter {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.6em;
  border-right: 1px solid var(--line);
}
.bo-tl__gutter b {
  font-weight: 600;
}
.bo-tl__gutter span {
  font-size: 0.8em;
  color: var(--gray-400);
}
/* la pista delle ore: le tacche sono lo sfondo, cosi' non servono dieci
   elementi vuoti per corsia */
.bo-tl__track {
  position: relative;
  min-height: 2.1em;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(32, 32, 32, 0.08) 0 1px,
    transparent 1px 12.5%
  );
}
.bo-tl__row.--head .bo-tl__track {
  min-height: 0;
  background: none;
}
.bo-tl__hours {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  padding: 0.35em 0;
}
.bo-tl__hours span {
  padding-left: 0.3em;
}
/* --from/--to sono ottavi di serata: 0 = 19:00, 8 = 23:00 */
.bo-tl__block {
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: calc(var(--from) * 12.5%);
  width: calc((var(--to) - var(--from)) * 12.5%);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 0.5em;
  border-radius: 0.25em;
  background: var(--laiton);
  font-size: 0.78em;
  white-space: nowrap;
  color: #fff;
}
.bo-tl__block.--seated {
  background: #2e7d32;
}
.bo-tl__block.--soon {
  background: rgba(129, 103, 41, 0.28);
  color: var(--laiton-strong);
}
/* «adesso»: la riga che dice a che punto e' la serata */
.bo-tl__now {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--at) * 12.5%);
  width: 2px;
  background: #c62828;
}
.bo-tl__now b {
  position: absolute;
  top: -1.55em;
  left: -1.4em;
  padding: 0.05em 0.35em;
  border-radius: 0.25em;
  background: #c62828;
  font-size: 0.72em;
  font-weight: 400;
  color: #fff;
}

/* ==========================================================================
   Mappa della sala (`components/restaurant/BoardMap.vue`)

   La pianta e' **manuale e non entra nel calcolo della capienza**: serve a
   decidere dove far sedere due che sono entrati, non a dire se c'e' posto.
   Occupato e' rosso pieno, libero e' il fondo chiaro col bordo — la stessa
   legenda del pannello, che qui sotto si ripete perche' senza un colore da
   solo non vuol dire niente.
   ========================================================================== */

.bo-map {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0.6em;
}
/* l'ora a cui si sta guardando la sala: la mappa non e' "adesso", e'
   l'istante scelto con il cursore */
.bo-map__when {
  display: flex;
  align-items: center;
  gap: 0.8em;
}
.bo-map__when b {
  font-size: 1.2em;
  font-weight: 600;
}
.bo-map__slider {
  position: relative;
  flex: 1;
  height: 0.28em;
  border-radius: 1em;
  background: rgba(32, 32, 32, 0.14);
}
.bo-map__slider span {
  position: absolute;
  top: 50%;
  left: 46%;
  width: 0.85em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--laiton);
  transform: translate(-50%, -50%);
}
.bo-map__floor {
  position: relative;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 0.3em;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(32, 32, 32, 0.04) 0 1px,
      transparent 1px 10%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(32, 32, 32, 0.04) 0 1px,
      transparent 1px 8%
    ),
    #fff;
}
.bo-map__room {
  position: absolute;
  padding: 0.15em 0.45em;
  border-radius: 0.25em;
  background: var(--gray-100);
  font-size: 0.76em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.bo-map__table {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid var(--laiton);
  border-radius: 0.3em;
  background: rgba(129, 103, 41, 0.16);
  font-size: 0.78em;
  font-weight: 600;
  color: var(--laiton-strong);
  transform: translate(-50%, -50%);
}
.bo-map__table.--round {
  border-radius: 50%;
}
/* occupato a quell'ora: rosso pieno, come nel pannello */
.bo-map__table.--busy {
  border-color: #c62828;
  background: #c62828;
  color: #fff;
}
.bo-map__legend {
  display: flex;
  align-items: center;
  gap: 1.2em;
  font-size: 0.8em;
  color: var(--gray-400);
}
.bo-map__legend span {
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.bo-map__key {
  width: 0.8em;
  aspect-ratio: 1;
  border: 1px solid var(--laiton);
  border-radius: 0.2em;
  background: rgba(129, 103, 41, 0.16);
}
.bo-map__key.--busy {
  border-color: #c62828;
  background: #c62828;
}

/* --- lo scambio fra Timing e Mappa -------------------------------------- */

/* Le due viste stanno nello stesso posto: e' una plancia, non due. */
.bo-hall__views {
  display: grid;
  flex: 1;
  min-height: 0;
}
.bo-hall__view {
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1;
  min-height: 0;
}
/* Ferma — niente animazioni, o JavaScript spento — si vede la **Mappa**, che
   e' quello che questa scheda ha da mostrare in piu' rispetto alla prima. Il
   Timing sta sotto e non si vede: due viste sovrapposte a caso sarebbero
   illeggibili, e il tablet ha un'altezza fissa che non le contiene entrambe. */
.bo-hall__view.--tl {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* Il giro: si guarda il Timing, il puntatore va sulla linguetta Mappa, la
     preme, e la sala compare. Dodici secondi, in loop. */
  .bo-hall__view.--tl {
    animation: boViewA 12s var(--ease-out) infinite;
  }
  .bo-hall__view.--map {
    animation: boViewB 12s var(--ease-out) infinite;
  }
  .bo-hall__tabs .--tl {
    animation: boTabA 12s steps(1) infinite;
  }
  .bo-hall__tabs .--map {
    animation: boTabB 12s steps(1) infinite;
  }
  .bo-cursor.--tab {
    display: block;
    animation: boTabCursor 12s var(--ease-out) infinite;
  }

  @keyframes boViewA {
    0%,
    36% {
      opacity: 1;
    }
    42%,
    94% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes boViewB {
    0%,
    36% {
      opacity: 0;
    }
    42%,
    94% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  /* La linguetta accesa segue la vista, e cambia di scatto: un colore che
     sfuma su una tendina non l'ha mai fatto nessuno. */
  @keyframes boTabA {
    0%,
    36% {
      color: var(--laiton-strong);
      font-weight: 600;
    }
    39%,
    100% {
      color: var(--gray-400);
      font-weight: 400;
    }
  }
  @keyframes boTabB {
    0%,
    36% {
      color: var(--gray-400);
      font-weight: 400;
    }
    39%,
    94% {
      color: var(--laiton-strong);
      font-weight: 600;
    }
    97%,
    100% {
      color: var(--gray-400);
      font-weight: 400;
    }
  }
  /* Le percentuali sono la posizione vera della linguetta «Mappa» dentro lo
     schermo del tablet: entra da destra, si ferma sopra, preme, esce. */
  @keyframes boTabCursor {
    0%,
    12% {
      opacity: 0;
      left: 42%;
      top: 40%;
      transform: scale(1);
    }
    20% {
      opacity: 1;
    }
    34% {
      opacity: 1;
      left: 19.5%;
      top: 17.5%;
      transform: scale(1);
    }
    37% {
      opacity: 1;
      left: 19.5%;
      top: 17.5%;
      transform: scale(0.82);
    }
    41%,
    58% {
      opacity: 1;
      left: 19.5%;
      top: 17.5%;
      transform: scale(1);
    }
    70%,
    100% {
      opacity: 0;
      left: 19.5%;
      top: 17.5%;
      transform: scale(1);
    }
  }
}

/* La linguetta accesa qui la decide l'animazione, non la classe: senza,
   `is-active` disegnerebbe la sottolineatura sotto quella sbagliata per meta'
   del giro. */
.bo-hall__tabs .--tl.is-active::after,
.bo-hall__tabs .--map.is-active::after {
  content: none;
}