/* Gestionale, parte 04 di 10: Statistiche, gestione del menù, schermi stretti. 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. */
/* ---------- Statistiche ---------- */
.stats-wide { grid-template-columns: repeat(4, 1fr); }
.stats-small { grid-template-columns: repeat(2, 1fr); }
.stats-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 16px; align-items: start; }
.stats-columns > .panel h3 { margin-top: 6px; }

.chart { display: block; width: 100%; height: auto; max-height: 240px; }
.chart-bar { fill: var(--green); }
.chart-bar:hover { fill: var(--green-dark); }
.chart-axis { stroke: var(--field-border); stroke-width: 1; }
.chart-scale { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 0.85rem; }

.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bars li { display: grid; grid-template-columns: minmax(6rem, 0.8fr) 2fr minmax(4.5rem, auto); align-items: center; gap: 10px; }
.bars-label { overflow-wrap: anywhere; }
.bars-value { text-align: right; color: var(--muted); font-size: 0.9rem; }
progress.bar {
  appearance: none; -webkit-appearance: none; width: 100%; height: 14px; border: 0; border-radius: 999px;
  background: var(--grey-soft); overflow: hidden;
}
progress.bar::-webkit-progress-bar { background: var(--grey-soft); border-radius: 999px; }
progress.bar::-webkit-progress-value { background: var(--green); border-radius: 999px; }
progress.bar::-moz-progress-bar { background: var(--green); border-radius: 999px; }

.heat { width: 100%; border-collapse: separate; border-spacing: 4px; text-align: center; }
.heat th { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.heat tbody th { text-align: left; text-transform: capitalize; }
.heat td { padding: 8px 6px; border-radius: var(--r-control); font-variant-numeric: tabular-nums; }
.heat-0 { background: var(--grey-soft); color: var(--muted); }
.heat-1 { background: color-mix(in srgb, var(--green) 15%, var(--surface)); }
.heat-2 { background: color-mix(in srgb, var(--green) 32%, var(--surface)); }
.heat-3 { background: color-mix(in srgb, var(--green) 50%, var(--surface)); }
.heat-4 { background: color-mix(in srgb, var(--green) 70%, var(--surface)); color: var(--on-accent); }
.heat-5 { background: var(--green); color: var(--on-accent); font-weight: 700; }

.top-list { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 6px; }
.top-list li { padding-left: 4px; }
.top-list li > span:first-child { font-weight: 600; margin-right: 8px; }

.forecast { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.forecast li { display: grid; grid-template-columns: 8.5rem 1fr 5.5rem; align-items: center; gap: 10px; }
.forecast-day { font-weight: 600; text-transform: capitalize; }
.forecast-closed { grid-column: 2 / -1; }
.forecast-value { text-align: right; }

.feedback-summary { display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr; gap: 16px; align-items: start; }
.feedback-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feedback-list li { padding: 12px 0; border-top: 1px solid var(--rule); }
.feedback-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.feedback-comment { margin-top: 6px; overflow-wrap: anywhere; }
.stars { color: var(--amber); letter-spacing: 2px; white-space: nowrap; }

/* ---------- Menù (gestione) ---------- */
.menu-category-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dish-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r-control); background: var(--rule); flex: 0 0 auto; }
.dish-photo-preview { display: block; width: 160px; height: 120px; object-fit: cover; border-radius: var(--r-control); background: var(--rule); }
.dish-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dish { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.dish:first-child { border-top: 0; }
.dish-out .dish-title strong { text-decoration: line-through; }
.dish-main { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dish-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dish-en { font-size: 0.85rem; }
.dish-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dish-toggle { font-size: 0.9rem; }

/* ---------- Schermi stretti ---------- */
@media (max-width: 960px) {
  .service-columns, .shift-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .stats, .stats-wide { grid-template-columns: repeat(2, 1fr); }
  .stats-import { grid-template-columns: 1fr; }
  .feedback-summary { grid-template-columns: 1fr; }
  .bars li { grid-template-columns: 1fr minmax(4.5rem, auto); }
  .bars li > progress.bar { grid-column: 1 / -1; grid-row: 2; }
  .forecast li { grid-template-columns: 6.5rem 1fr 4.5rem; }
  .dish-actions { align-items: flex-start; }
  .search-row { flex-wrap: wrap; }

  /* Nome e «Esci» sulla prima riga, le tre schede sulla seconda. */
  .topbar { gap: 4px 12px; }
  .topbar-name { order: 1; flex: 1 1 auto; }
  .topbar-user { order: 2; margin-left: 0; }
  .tabs { order: 3; flex: 1 1 100%; }
  .tab { flex: 1 1 auto; justify-content: center; padding: 0 10px; }

  .table thead { position: absolute; left: -9999px; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tr { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
  .table td { padding: 4px 0; border: 0; }
  .table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 0.85rem; }
  .table td[data-label="Nome"]::before { content: ""; }
  .cell-action { text-align: left; }
}

@media (max-width: 520px) {
  .topbar-email { display: none; }
  .toolbar-actions { width: 100%; align-items: stretch; }
  .toolbar-actions .btn { flex: 1 1 0; }
  .search-row > .grow, .search-row > .btn { flex: 1 1 100%; }
  .segmented { display: flex; width: 100%; }
  .status-btn { flex: 1 1 0; padding: 0 6px; }
  .booking, .waitlist-item { grid-template-columns: 3.4rem 1fr; gap: 10px; }
  .booking-time { font-size: 1.25rem; }
  .booking-controls { grid-template-columns: 1fr; }
  .custom-row { grid-template-columns: 1fr; }
  .date-nav { flex-wrap: wrap; }
  .text-pair { grid-template-columns: 1fr; }
  .preview-frame { height: 520px; }
}