/* Gestionale, parte 08 di 10: Mappa dei tavoli. 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. */
/* ---------- Mappa dei tavoli (versione O) ----------
   La sala è una griglia: colonne, righe, posizione e misura di ogni tavolo sono CLASSI (mp-cols-10, mp-c3, mp-r2, mp-w2, mp-h1),
   perché la CSP del sito vieta gli stili scritti nel markup. I colori sono mescolati con color-mix, così reggono anche il tema scuro. */
.mp-grid {
  --mp-cella: 4.8rem; display: grid; gap: 4px; justify-content: start; padding: 10px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-panel);
}
.mp-grid-edit { --mp-cella: 3.4rem; }
.mp-scorri { overflow-x: auto; }

.mp-cols-4 { grid-template-columns: repeat(4, minmax(0, 6.4rem)); }
.mp-cols-5 { grid-template-columns: repeat(5, minmax(0, 6.4rem)); }
.mp-cols-6 { grid-template-columns: repeat(6, minmax(0, 6.4rem)); }
.mp-cols-7 { grid-template-columns: repeat(7, minmax(0, 6.4rem)); }
.mp-cols-8 { grid-template-columns: repeat(8, minmax(0, 6.4rem)); }
.mp-cols-9 { grid-template-columns: repeat(9, minmax(0, 6.4rem)); }
.mp-cols-10 { grid-template-columns: repeat(10, minmax(0, 6.4rem)); }
.mp-cols-11 { grid-template-columns: repeat(11, minmax(0, 6.4rem)); }
.mp-cols-12 { grid-template-columns: repeat(12, minmax(0, 6.4rem)); }
.mp-cols-13 { grid-template-columns: repeat(13, minmax(0, 6.4rem)); }
.mp-cols-14 { grid-template-columns: repeat(14, minmax(0, 6.4rem)); }
.mp-cols-15 { grid-template-columns: repeat(15, minmax(0, 6.4rem)); }
.mp-cols-16 { grid-template-columns: repeat(16, minmax(0, 6.4rem)); }
.mp-cols-17 { grid-template-columns: repeat(17, minmax(0, 6.4rem)); }
.mp-cols-18 { grid-template-columns: repeat(18, minmax(0, 6.4rem)); }
.mp-cols-19 { grid-template-columns: repeat(19, minmax(0, 6.4rem)); }
.mp-cols-20 { grid-template-columns: repeat(20, minmax(0, 6.4rem)); }
.mp-grid-edit.mp-cols-4 { grid-template-columns: repeat(4, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-5 { grid-template-columns: repeat(5, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-6 { grid-template-columns: repeat(6, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-7 { grid-template-columns: repeat(7, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-8 { grid-template-columns: repeat(8, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-9 { grid-template-columns: repeat(9, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-10 { grid-template-columns: repeat(10, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-11 { grid-template-columns: repeat(11, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-12 { grid-template-columns: repeat(12, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-13 { grid-template-columns: repeat(13, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-14 { grid-template-columns: repeat(14, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-15 { grid-template-columns: repeat(15, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-16 { grid-template-columns: repeat(16, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-17 { grid-template-columns: repeat(17, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-18 { grid-template-columns: repeat(18, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-19 { grid-template-columns: repeat(19, minmax(2.8rem, 6.4rem)); }
.mp-grid-edit.mp-cols-20 { grid-template-columns: repeat(20, minmax(2.8rem, 6.4rem)); }
.mp-rows-3 { grid-template-rows: repeat(3, var(--mp-cella)); }
.mp-rows-4 { grid-template-rows: repeat(4, var(--mp-cella)); }
.mp-rows-5 { grid-template-rows: repeat(5, var(--mp-cella)); }
.mp-rows-6 { grid-template-rows: repeat(6, var(--mp-cella)); }
.mp-rows-7 { grid-template-rows: repeat(7, var(--mp-cella)); }
.mp-rows-8 { grid-template-rows: repeat(8, var(--mp-cella)); }
.mp-rows-9 { grid-template-rows: repeat(9, var(--mp-cella)); }
.mp-rows-10 { grid-template-rows: repeat(10, var(--mp-cella)); }
.mp-rows-11 { grid-template-rows: repeat(11, var(--mp-cella)); }
.mp-rows-12 { grid-template-rows: repeat(12, var(--mp-cella)); }
.mp-rows-13 { grid-template-rows: repeat(13, var(--mp-cella)); }
.mp-rows-14 { grid-template-rows: repeat(14, var(--mp-cella)); }

.mp-c1 { grid-column-start: 1; }
.mp-c2 { grid-column-start: 2; }
.mp-c3 { grid-column-start: 3; }
.mp-c4 { grid-column-start: 4; }
.mp-c5 { grid-column-start: 5; }
.mp-c6 { grid-column-start: 6; }
.mp-c7 { grid-column-start: 7; }
.mp-c8 { grid-column-start: 8; }
.mp-c9 { grid-column-start: 9; }
.mp-c10 { grid-column-start: 10; }
.mp-c11 { grid-column-start: 11; }
.mp-c12 { grid-column-start: 12; }
.mp-c13 { grid-column-start: 13; }
.mp-c14 { grid-column-start: 14; }
.mp-c15 { grid-column-start: 15; }
.mp-c16 { grid-column-start: 16; }
.mp-c17 { grid-column-start: 17; }
.mp-c18 { grid-column-start: 18; }
.mp-c19 { grid-column-start: 19; }
.mp-c20 { grid-column-start: 20; }
.mp-r1 { grid-row-start: 1; }
.mp-r2 { grid-row-start: 2; }
.mp-r3 { grid-row-start: 3; }
.mp-r4 { grid-row-start: 4; }
.mp-r5 { grid-row-start: 5; }
.mp-r6 { grid-row-start: 6; }
.mp-r7 { grid-row-start: 7; }
.mp-r8 { grid-row-start: 8; }
.mp-r9 { grid-row-start: 9; }
.mp-r10 { grid-row-start: 10; }
.mp-r11 { grid-row-start: 11; }
.mp-r12 { grid-row-start: 12; }
.mp-r13 { grid-row-start: 13; }
.mp-r14 { grid-row-start: 14; }
.mp-w1 { grid-column-end: span 1; }
.mp-w2 { grid-column-end: span 2; }
.mp-w3 { grid-column-end: span 3; }
.mp-w4 { grid-column-end: span 4; }
.mp-h1 { grid-row-end: span 1; }
.mp-h2 { grid-row-end: span 2; }
.mp-h3 { grid-row-end: span 3; }

.mp-tavolo {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px;
  min-width: 0; min-height: 44px; padding: 4px 8px; overflow: hidden;
  border: 2px solid var(--field-border); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.mp-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; font-weight: 700; }
.mp-posti { font-size: 0.75rem; opacity: 0.85; }
.mp-occupato .mp-posti, .mp-conto .mp-posti { opacity: 1; }
.mp-stato { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; font-weight: 700; }
.mp-icona { display: inline-block; min-width: 1em; margin-right: 2px; text-align: center; }
.mp-dettaglio { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; }
.mp-chiave { display: inline-block; width: 1.25rem; height: 1.25rem; line-height: 1; font-size: 0.7rem; font-weight: 700; text-align: center; border: 2px solid var(--field-border); border-radius: 4px; vertical-align: -2px; }
.mp-libero { background: color-mix(in srgb, var(--green) 20%, var(--surface)); border-color: var(--green); }
.mp-prenotato { background: color-mix(in srgb, var(--amber) 20%, var(--surface)); border-color: var(--amber); }
.mp-inarrivo { background: color-mix(in srgb, var(--amber) 55%, var(--surface)); border-color: var(--amber); }
.mp-occupato { background: var(--blue); border-color: #2c4468; color: var(--on-blue); }
.mp-conto { background: var(--red); border-color: var(--red-dark); color: #fff; }
.mp-attenuato { opacity: 0.38; }
/* Oltre il tempo previsto, con qualcuno in attesa: contorno tratteggiato spesso (oltre al testo «oltre di N min»), non solo un colore. */
.mp-oltre { border-style: dashed; border-width: 4px; border-color: var(--red); }
.mp-evidenzia { outline: 3px solid var(--green-dark); outline-offset: 1px; }
.mp-selezionato { box-shadow: 0 0 0 3px var(--ink); }
.mp-badge {
  position: absolute; top: 4px; right: 4px; min-width: 1.4rem; padding: 0 6px; border-radius: 999px;
  color: #fff; font-size: 0.8rem; font-weight: 700; text-align: center;
}
.mp-badge-attesa { background: var(--red); }
.mp-badge-corso { background: var(--green-dark); }
.mp-grid-edit .mp-tavolo { padding: 2px 4px; }
.mp-grid-edit .mp-nome { font-size: 0.8rem; }
.mp-grid-edit .mp-posti { font-size: 0.65rem; }

.mp-cell {
  min-height: 0; padding: 0; border: 1px dashed var(--field-border); border-radius: 6px; background: transparent; cursor: pointer;
}
.mp-cell:focus-visible { background: color-mix(in srgb, var(--green) 22%, transparent); }
@media (hover: hover) { .mp-cell:hover { background: color-mix(in srgb, var(--green) 22%, transparent); } }

/* Sul telefono la griglia sarebbe minuscola: la stessa sala si legge come elenco di riquadri. */
.mp-tiles {
  display: none; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none;
}
.mp-tiles .mp-tavolo { width: 100%; min-height: 84px; }
.mp-tiles-sempre { display: grid; }
@media (max-width: 640px) {
  .mp-grid:not(.mp-grid-edit) { display: none; }
  .mp-tiles { display: grid; }
}

.mp-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp-cerca { align-items: flex-end; }
.mp-assegna { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mp-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.mp-prenotazioni .mp-pren { flex-direction: column; align-items: stretch; gap: 6px; }
.mp-lista-tavoli { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media print { .mp-badge { display: none; } }