/* Gestionale, parte 09 di 10: Seconda riga di pagine, menù «Altro», connessione persa, sottomenù, salvataggio automatico, tema scuro. 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. */
/* ---------- Versione P: seconda riga di pagine, menù «Altro», avviso di modifiche non salvate, gestione dei tavoli nella mappa ---------- */
.subtabs {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 16px;
  background: var(--grey-soft); border-bottom: 1px solid var(--rule);
}
.subtab {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-control);
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.subtab:hover { background: var(--rule); }
.subtab[aria-current="page"] { background: var(--black); color: #fff; }
@media (max-width: 720px) {
  .subtabs { padding: 6px 8px; }
  .subtab { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
}

.menu-altro { position: relative; display: inline-block; }
.menu-altro-voci {
  position: absolute; right: 0; z-index: 20; display: flex; flex-direction: column; gap: 4px; min-width: 12rem; margin-top: 4px; padding: 6px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-control);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.menu-altro-voci .btn { justify-content: flex-start; width: 100%; }

.stats-nota { margin: 0; }
.avviso-fisso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }

.mp-tavoli-gestione { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mp-tavoli-gestione > li { padding: 8px 0; border-top: 1px solid var(--rule); }
.mp-tavoli-gestione > li:first-child { border-top: 0; }
.mp-tavolo-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }

.qr-indirizzo { overflow-wrap: anywhere; font-size: 0.85rem; }
@media print { .menu-altro, .avviso-fisso, .stats-nota { display: none !important; } }

/* ---------- Versione Q ---------- */
/* Connessione persa: resta in vista in cima anche scorrendo, perché i dati sul tablet potrebbero essere vecchi. */
.avviso-connessione {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--red-soft); color: var(--red-text); border-bottom: 2px solid var(--red);
  font-size: 0.95rem;
}
@media print { .avviso-connessione { display: none !important; } }

/* ---------- Versione Q: sottomenù sotto le voci in alto (solo con il mouse o la tastiera, su schermi larghi) ---------- */
.tab-group { position: relative; display: flex; }
.tab-menu { display: none; margin: 0; padding: 0; list-style: none; }
@media (hover: hover) and (min-width: 721px) {
  .tab-menu {
    display: block; position: absolute; top: 100%; left: 0; z-index: 70; min-width: 100%; padding: 6px;
    background: var(--black); border-radius: 0 0 var(--r-control) var(--r-control); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    visibility: hidden; opacity: 0; transition: opacity 0.12s ease 0s, visibility 0s linear 0.18s;
  }
  .tab-group:hover .tab-menu, .tab-group:has(:focus-visible) .tab-menu {
    visibility: visible; opacity: 1; transition: opacity 0.12s ease 0.08s, visibility 0s linear 0.08s;
  }
  .tab-menu-voce {
    display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-control);
    color: #d9e0dc; font-weight: 600; text-decoration: none; white-space: nowrap;
  }
  .tab-menu-voce:hover { background: rgba(255, 255, 255, 0.12); }
  .tab-menu-voce[aria-current="page"] { background: #fff; color: var(--black); }
}

/* ---------- Versione Q: salvataggio automatico ---------- */
.salvataggio { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }
.salvataggio-errore { padding: 6px 10px; border-radius: var(--r-control); background: var(--red-soft); color: var(--red-text); }


/* ---------- Tema scuro del gestionale (scelta di questo dispositivo: automatico, chiaro o scuro) ---------- */
html.tema-scuro {
  color-scheme: dark;
  --paper: #121618; --surface: #1c2225; --ink: #edf1ee; --muted: #a8b3ad; --rule: #3d4743; --field-border: #6a7772;
  --link: #7fcf9f; --green-soft: #1e3a2a;
  --red-ink: #f5a89f; --red-soft: #3d1f1c; --amber-soft: #3a3115; --amber-ink: #f3dc92;
  --black: #0b0e0d; --grey-soft: #2a3230; --blue: #5b82b8;
  --red-text: #f5a89f; --green-text: #9be0b6; --on-blue: #0b0e0d;
}
html.tema-scuro .pill-green { color: #9be0b6; }
html.tema-scuro .segmented, html.tema-scuro .segmented button { border-color: #6a7772; }
html.tema-scuro .logo-preview, html.tema-scuro .testo-legale, html.tema-scuro .onboarding { background: var(--surface); }
html.tema-scuro .btn[aria-pressed="true"], html.tema-scuro .status-btn[aria-pressed="true"], html.tema-scuro .day-tab[aria-pressed="true"], html.tema-scuro .subtab[aria-current="page"] {
  outline: 2px solid #edf1ee; outline-offset: -2px;
}
@media (prefers-color-scheme: dark) {
  html.tema-auto {
    color-scheme: dark;
    --paper: #121618; --surface: #1c2225; --ink: #edf1ee; --muted: #a8b3ad; --rule: #3d4743; --field-border: #6a7772;
    --link: #7fcf9f; --green-soft: #1e3a2a;
    --red-ink: #f5a89f; --red-soft: #3d1f1c; --amber-soft: #3a3115; --amber-ink: #f3dc92;
    --black: #0b0e0d; --grey-soft: #2a3230; --blue: #5b82b8;
    --red-text: #f5a89f; --green-text: #9be0b6; --on-blue: #0b0e0d;
  }
  html.tema-auto .pill-green { color: #9be0b6; }
  html.tema-auto .segmented, html.tema-auto .segmented button { border-color: #6a7772; }
  html.tema-auto .logo-preview, html.tema-auto .testo-legale, html.tema-auto .onboarding { background: var(--surface); }
  html.tema-auto .btn[aria-pressed="true"], html.tema-auto .status-btn[aria-pressed="true"], html.tema-auto .day-tab[aria-pressed="true"], html.tema-auto .subtab[aria-current="page"] {
    outline: 2px solid #edf1ee; outline-offset: -2px;
  }
}

.finiti-elenco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.finiti-elenco li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mp-unione { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--r-control); }

/* ---------- Trascinamento (versione R) ---------- */
/* La maniglia e i tavoli trascinabili non fanno scorrere la pagina col dito: il gesto serve al trascinamento. */
.trascina-maniglia {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  border: 1px dashed var(--field-border); border-radius: var(--r-control); color: var(--muted);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; font-size: 1.2rem;
}
.mp-trascinabile { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.trascina-fantasma {
  position: fixed; z-index: 1000; max-width: 16rem; padding: 6px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 2px solid var(--ink); border-radius: var(--r-control); background: var(--surface); color: var(--ink);
  font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); pointer-events: none;
}
.trascina-sorgente { opacity: 0.45; }
body.trascina-attivo { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.mp-bersaglio { outline: 4px solid var(--green); outline-offset: 1px; }
.mp-cell.mp-bersaglio { background-color: color-mix(in srgb, var(--green) 30%, transparent); }
.mp-cell-occ { border-color: transparent; background: transparent; cursor: default; }
@media print { .trascina-maniglia, .trascina-fantasma { display: none !important; } }