/* Gestionale, parte 02 di 10: Foglio di sala (barra, statistiche), lista d'attesa, pranzo/cena, stati e tabelle. Spostato da app.css nella versione X senza cambiare una regola; i file si caricano in ordine (vedi index.html), che è l'ordine di prima. */
/* ---------- Foglio di sala: barra e statistiche ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.date-nav { display: flex; align-items: center; gap: 6px; }
.date-input { width: auto; min-width: 11rem; }
.day-title { font-size: 1.5rem; }
.day-title::first-letter { text-transform: uppercase; }

.board { display: flex; flex-direction: column; gap: 16px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--rule); border-left-width: 6px; border-radius: var(--r-control);
}
.stat-value { font: 600 2rem/1 var(--font-display); }
.stat-label { color: var(--ink); font-size: 0.95rem; font-weight: 600; }
.stat-hint { color: var(--muted); font-size: 0.8rem; }
.stat-lunch { border-left-color: var(--amber); }
.stat-dinner { border-left-color: var(--blue); }
.stat-return { border-left-color: var(--green); }
.stat-noshow { border-left-color: var(--red); }

/* ---------- Lista d'attesa ---------- */
.waitlist {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: var(--r-panel);
}
.waitlist-item {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 12px;
  padding: 12px 0; border-top: 1px dashed var(--amber);
}
.waitlist-item:first-child { border-top: 0; }

/* ---------- Servizio: pranzo e cena ---------- */
.service-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.service {
  padding: 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-panel);
}
.service-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }

.booking-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.booking {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 12px;
  padding: 14px 0; border-top: 1px solid var(--rule);
}
.booking:first-child { border-top: 0; }
.booking-time { font: 600 1.5rem/1.1 var(--font-display); }
.booking-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.booking-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.booking-name { font-size: 1.1rem; overflow-wrap: anywhere; }
.booking-phone { width: fit-content; }
.booking-controls { display: grid; grid-template-columns: minmax(12rem, 0.8fr) 1fr; gap: 8px; }
.booking-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.note-alert {
  padding: 6px 10px; border-radius: var(--r-control);
  background: var(--red-soft); color: var(--red-text); font-weight: 700;
}
.note-customer { color: var(--muted); font-style: italic; }

.segmented { display: inline-flex; border: 1px solid #aeb7b0; border-radius: var(--r-control); overflow: hidden; }
.status-btn {
  min-height: 44px; padding: 0 14px; border: 0; border-right: 1px solid #aeb7b0; white-space: nowrap;
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.status-btn:last-child { border-right: 0; }
@media (hover: hover) { .status-btn:hover { background: var(--grey-soft); } }
/* Il pulsante scelto di un gruppo (Formato, Periodo, Servizio, Sala…) si vede: fondo scuro. Sta prima delle regole .st-* (stessa forza, vince l'ultima) così «Arrivato», «Uscito», «No-show» e gli stati del tavolo tengono i loro colori (versione W). */
.status-btn[aria-pressed="true"] { background: var(--black); color: #fff; }
/* Lo stesso per ogni pulsante «a scelta» fatto con .btn (stato del tavolo nella finestra della mappa, filtri, interruttori): prima, fuori da .view-bar e da pochi altri contenitori, il pulsante scelto non si distingueva (versione W). */
.btn[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: #fff; }
/* Il verde di «Arrivato» e il rosso di «No-show» sono solo nel testo; il fondo pieno compare soltanto quando il pulsante è scelto (aria-pressed). */
.st-arrived { color: var(--green-text); }
.st-noshow { color: var(--red-text); }
.st-arrived[aria-pressed="true"] { background: var(--green); color: #fff; }
.st-left[aria-pressed="true"] { background: #6b7571; color: #fff; }
.st-noshow[aria-pressed="true"] { background: var(--red); color: #fff; }

.status-arrivata .booking-time { color: var(--green-text); }
.status-uscita { opacity: 0.65; }
.status-nonPresentata .booking-name { color: var(--red-text); text-decoration: line-through; }

/* Il segno "Adesso" separa chi è già passato da chi deve ancora arrivare. */
.now-marker {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  color: var(--red-text); font-size: 0.9rem; font-weight: 700;
}
.now-marker::before { content: ""; flex: 0 0 18px; height: 2px; background: currentColor; }
.now-marker::after { content: ""; flex: 1; height: 2px; background: currentColor; }

/* ---------- Finestre: walk-in ---------- */
.number-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.number-btn { min-height: 64px; font: 600 1.5rem var(--font-display); }
.details-body { padding-top: 10px; }

/* ---------- Tabelle (clienti, SuperAdmin) ---------- */
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.table th { background: var(--grey-soft); color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.cell-action { text-align: right; white-space: nowrap; }
.table .pill + .pill { margin-left: 4px; }

.custom-row { display: grid; grid-template-columns: minmax(6rem, 0.6fr) 1fr auto; gap: 8px; align-items: center; }
.custom-key { font-weight: 600; overflow-wrap: anywhere; }
.search-row { flex-wrap: nowrap; }