/* ============================================================
   Devil Next — foglio di stile base
   Identità "Diavoli in Festa" + layout a regioni (no overlap).
   ============================================================ */

:root {
    --brand-red: #c01818;
    --brand-red-dark: #8f1212;
    --ink: #222;
    --muted: #6b7280;
    --line: #d9dee5;
    --bg: #f4f6f8;
    --panel: #ffffff;

    /* colori sale (da coloreTavoli_* del Web.config legacy) */
    --sala-1: #008080; /* Piazza */
    --sala-2: #9370DB; /* Silver */
    --sala-3: #FF4500; /* Gold */

    --header-h: 64px;
    --footer-h: 28px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-size: 14px;
}

a { color: var(--brand-red); text-decoration: none; }
code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; }

/* ---------- App shell ---------- */
.app-body { display: flex; flex-direction: column; min-height: 100vh; }

.app-header {
    height: var(--header-h);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: #fff;
    border-bottom: 3px solid var(--brand-red);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.app-brand-name { font-size: 22px; font-weight: 800; color: var(--brand-red); letter-spacing: .5px; }
.app-brand-sub { margin-left: 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

.app-user { display: flex; align-items: center; gap: 12px; }
.app-user-name { font-weight: 600; }

.app-main { flex: 1 1 auto; padding: 18px; overflow: auto; }

.app-footer {
    height: var(--footer-h);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--muted);
    background: #fff;
    border-top: 1px solid var(--line);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: #eef1f5;
    color: var(--ink);
}
.btn:hover { filter: brightness(.97); }
.btn-primary { background: var(--brand-red); color: #fff; }
.btn-primary:hover { background: var(--brand-red-dark); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }

/* ---------- Cards / pagine generiche ---------- */
.page-title { margin: 0 0 4px; font-size: 22px; }
.page-sub { margin: 0 0 18px; color: var(--muted); }

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 16px;
    max-width: 720px;
}
.card-title { margin: 0 0 12px; font-size: 16px; color: var(--brand-red); }
.card-todo { background: #fffdf5; }

.kv { border-collapse: collapse; width: 100%; }
.kv th, .kv td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.kv th { width: 220px; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }

/* ---------- Login ---------- */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #2a2a2a, #4a1010);
}
.login-card {
    width: 340px;
    background: #fff;
    border-radius: 12px;
    padding: 28px 26px;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.login-brand { text-align: center; margin-bottom: 20px; }
.login-brand-name { font-size: 24px; font-weight: 800; color: var(--brand-red); }
.login-brand-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.login-form label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.login-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 15px;
}
.login-submit { width: 100%; margin-top: 20px; padding: 11px; }
.login-error {
    background: #fdecec;
    border: 1px solid #f5b5b5;
    color: #a11;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
}
.login-error ul { margin: 0; padding-left: 18px; }

/* ============================================================
   MAP SHELL — layout a 3 regioni per la pagina mappa.
   Risolve la sovrapposizione: i pannelli laterali sono COLONNE
   reali; la mappa centrale ha il PROPRIO scroll, quindi
   aggiungere colonne di tavoli fa scorrere solo l'area mappa,
   senza mai finire sotto i pannelli.
   (Pronto per quando ricostruiremo la pagina mappa.)
   ============================================================ */
.map-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    height: calc(100vh - var(--header-h) - var(--footer-h) - 36px);
}
.map-shell.with-left { grid-template-columns: auto minmax(0, 1fr) auto; }

.map-area {
    min-width: 0;          /* fondamentale: abilita lo scroll orizzontale interno */
    height: 100%;
    overflow: auto;        /* la mappa scrolla QUI dentro */
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
}

.side-panel {
    width: 260px;
    max-height: 100%;
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
}
.side-panel h3 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--brand-red);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Schermi stretti: i pannelli scendono sotto, mai sovrapposti */
@media (max-width: 1100px) {
    .map-shell, .map-shell.with-left { grid-template-columns: 1fr; height: auto; }
    .side-panel { width: auto; }
}

/* ============================================================
   MAPPA TAVOLI
   ============================================================ */
:root {
    --st0: #5cb85c; /* libero    */
    --st1: #4aa3df; /* prenotato */
    --st2: #f0ad4e; /* attesa    */
    --st3: #d9534f; /* occupato  */
    --st4: #9aa3ab; /* collegato */
    --st5: #8e44ad; /* sospeso   */
}

/* Toolbar */
.map-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.mt-left { display: flex; gap: 6px; }
.mt-center { display: flex; align-items: center; gap: 14px; }
.mt-right { display: flex; align-items: center; gap: 8px; }
.mt-data { font-weight: 600; text-transform: capitalize; }

.map-tab {
    display: inline-block; padding: 8px 16px; border-radius: 6px 6px 0 0;
    color: var(--ink); font-weight: 700; border: 1px solid transparent; border-bottom: none;
    opacity: .82; box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.map-tab.active { opacity: 1; transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.55); font-weight: 800; }

/* Sale come metalli preziosi (vale anche per i pulsanti Dashboard .btn-sala) */
.btn-sala { color: #fff; border: 1px solid transparent; }
.map-tab.sala-1, .btn-sala.sala-1 {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 50%, #7d1f17 100%);
    color: #fff; border-color: #7d1f17; text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.map-tab.sala-2, .btn-sala.sala-2 {
    background: linear-gradient(135deg, #fafafa 0%, #cfcfcf 25%, #9a9a9a 50%, #ececec 70%, #b3b3b3 100%);
    color: #333; border-color: #8d8d8d; text-shadow: 0 1px 1px rgba(255,255,255,.6);
}
.map-tab.sala-3, .btn-sala.sala-3 {
    background: linear-gradient(135deg, #fdf3a8 0%, #e6c34d 22%, #bf953f 48%, #fcf6ba 58%, #aa771c 100%);
    color: #5a4300; border-color: #a8842a; text-shadow: 0 1px 1px rgba(255,255,255,.5);
}

.turno-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.turno-switch .turno { padding: 6px 12px; font-size: 13px; color: var(--muted); }
.turno-switch .turno.active { background: var(--brand-red); color: #fff; font-weight: 700; }
.turno-switch .turno-unico { padding: 6px 12px; font-size: 13px; color: var(--muted); font-weight: 700; cursor: default; background: #f1f3f5; }
.zoom-grp .btn { padding: 6px 12px; font-weight: 700; }

/* Override: la mappa ha il proprio canvas (no scroll del contenitore) */
.map-shell { height: calc(100vh - var(--header-h) - var(--footer-h) - 120px); }
.map-area { padding: 0; overflow: hidden; position: relative; }

.map-canvas {
    position: absolute; inset: 0; overflow: hidden;
    background: #fbfcfd; cursor: grab;
    background-image: radial-gradient(#e7ebef 1px, transparent 1px);
    background-size: 22px 22px;
}
.map-canvas.is-panning { cursor: grabbing; }
.map-stage { transform-origin: 0 0; will-change: transform; display: inline-block; }
.map-grid { display: grid; gap: 20px; padding: 28px; }

.map-hint {
    position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
    background: rgba(34,34,34,.78); color: #fff; font-size: 11px;
    padding: 4px 12px; border-radius: 20px; pointer-events: none; white-space: nowrap;
}

/* ---- Singolo tavolo ---- */
.tavolo {
    position: relative;
    display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    cursor: pointer; user-select: none; transition: transform .1s;
}
.tavolo:hover { transform: translateY(-2px); }

/* Pulsante "Mangia Tutto" (T) in alto a destra di ogni tavolo */
.t-mangia {
    position: absolute; top: -7px; right: -7px; z-index: 3;
    width: 20px; height: 20px; padding: 0; line-height: 18px;
    border-radius: 50%; border: 1px solid #b9985a; background: #fff; color: #b9985a;
    font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.2);
    transition: transform .08s, background .1s;
}
.t-mangia:hover { transform: scale(1.12); }
.t-mangia.on {
    background: linear-gradient(180deg,#e8b84b,#c8922b); color: #3a2c00;
    border-color: #8a6a1e; box-shadow: 0 0 0 2px #fff, 0 0 6px rgba(200,146,43,.8);
}
.tavolo.tavolo-focus { outline: 3px solid var(--brand-red); outline-offset: 4px; border-radius: 10px; }

/* Collegamento: evidenzia i tavoli collegabili durante la selezione del secondo tavolo */
body.linking .tavolo.link-target .t-body { outline: 2px dashed #2c6fb3; outline-offset: 2px; animation: linkpulse 1.1s ease-in-out infinite; }
body.linking .tavolo:not(.link-target) { opacity: .45; }
@keyframes linkpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(44,111,179,.45); } 50% { box-shadow: 0 0 0 6px rgba(44,111,179,0); } }

.t-row { display: flex; gap: 3px; justify-content: center; }
.t-mid { display: flex; align-items: stretch; gap: 3px; }
.t-side { display: flex; flex-direction: column; justify-content: space-around; gap: 3px; }

.t-body {
    min-width: 70px; min-height: 36px; padding: 4px 10px; display: flex;
    flex-direction: column; align-items: center; justify-content: center;
    background: #fff; border: 2px solid #b9c2cc; border-radius: 8px;
}
.tavolo.is-pieno .t-body { border-color: var(--st3); background: #fdf1f1; }
.t-id { font-weight: 800; font-size: 14px; color: var(--ink); line-height: 1; }
.t-liberi { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* forme per tipo */
.tavolo.tipo-00 .t-body { border-radius: 50%; min-width: 78px; min-height: 64px; }
.tavolo.tipo-04 .t-body { min-width: 52px; }

/* ---- Posti ---- */
.posto {
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #1b3a1b;
    border: 1px solid rgba(0,0,0,.18); border-radius: 4px;
    background: var(--st0);
}
.posto.orizz { width: 22px; height: 16px; }
.posto.vert  { width: 16px; height: 22px; }

.posto.stato-0 { background: var(--st0); }
.posto.stato-1 { background: var(--st1); color: #06283a; }
.posto.stato-2 { background: var(--st2); color: #4a3000; }
.posto.stato-3 { background: var(--st3); color: #fff; }
.posto.stato-4 { background: var(--st4); color: #fff; }
.posto.stato-5 { background: var(--st5); color: #fff; }

/* Capotesta (teste del tavolo): quando LIBERI usano un verde più scuro + numero bianco,
   così sono distinguibili dai posti liberi normali senza confondersi con gli stati operativi
   (prenotato/occupato/ecc., che mantengono il loro colore). Nessun bordo diverso. */
.posto.cap.stato-0 { background: #176b34; color: #fff; }
.dseat.cap.stato-0 { background: #176b34; color: #fff; }
.dseat.locked { cursor: not-allowed; }

/* ---- Pannello destro ---- */
.kpi { text-align: center; background: #f7f9fb; border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 14px; }
.kpi-val { font-size: 30px; font-weight: 800; color: var(--brand-red); line-height: 1; }
.kpi-lab { font-size: 11px; color: var(--muted); margin-top: 3px; }

.legenda { list-style: none; margin: 0 0 14px; padding: 0; font-size: 13px; }
.legenda li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.sw.stato-0 { background: var(--st0); } .sw.stato-1 { background: var(--st1); }
.sw.stato-2 { background: var(--st2); } .sw.stato-3 { background: var(--st3); }
.sw.stato-4 { background: var(--st4); } .sw.stato-5 { background: var(--st5); }

/* Stato tavoli: conteggio posti per stato (allineato a destra) */
.stato-tavoli li b { margin-left: auto; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.legenda-extra { border-top: 1px dashed var(--line); padding-top: 8px; font-size: 12px; }
.legenda-extra li { align-items: flex-start; }
.sw-cap { width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; background: #176b34; display: inline-block; }

/* Riquadro "Stato tavoli" minimizzabile */
.stato-acc { margin-bottom: 6px; }
.stato-acc > summary { cursor: pointer; font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 8px; list-style: revert; }
.stato-acc > summary .small { font-weight: 400; }

/* Legenda "fisarmonica" per i simboli extra */
.legenda-acc { margin-top: 4px; font-size: 12px; }
.legenda-acc > summary { cursor: pointer; font-weight: 700; color: #888; padding: 4px 0; list-style: revert; }
.legenda-acc > summary::-webkit-details-marker { color: #888; }
.legenda-acc > summary::marker { color: #888; }
.legenda-acc[open] > summary { margin-bottom: 4px; }
.legenda-acc .legenda-extra { border-top: 1px dashed var(--line); padding-top: 8px; }
.sw-t {
    width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
    background: linear-gradient(180deg,#e8b84b,#c8922b); color: #3a2c00;
    border: 1px solid #8a6a1e; font-size: 11px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}

.tavoli-liberi { list-style: none; margin: 0; padding: 0; font-size: 13px; max-height: 40vh; overflow: auto; }
.tavoli-liberi li {
    display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 5px; cursor: pointer;
}
.tavoli-liberi li:hover { background: #eef6ee; }
.tl-id { font-weight: 700; }
.tl-free { color: var(--muted); }

.small { font-size: 12px; }

/* ---- Modalità modifica (Fase 2) ---- */
.edit-mode .map-canvas { background-color: #fffaf3; }
.edit-mode .tavolo { cursor: pointer; }
.cell-add {
    display: flex; align-items: center; justify-content: center;
    min-width: 42px; min-height: 42px; color: #b9985a; font-size: 22px; font-weight: 800;
    border: 2px dashed #d8c39a; border-radius: 8px; background: rgba(255,255,255,.45); cursor: pointer;
}
.cell-add:hover { background: #fff4dd; border-color: var(--brand-red); color: var(--brand-red); }
body.moving .cell-add { border-color: var(--st0); color: var(--st0); background: #eefaef; }
.edit-hint { background: #fff8ec; border: 1px solid #f0d9a8; border-radius: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.6; margin-top: 8px; }
body.linking .map-canvas { background-color: #eef7ff; }

/* ---- Gruppi (collegamenti) ---- */
.grp-badge {
    position: absolute; top: -9px; left: -9px; z-index: 4;
    display: inline-flex; align-items: center; gap: 2px;
    background: #16a085; color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
    padding: 2px 6px 2px 4px; border-radius: 11px; border: 1px solid #0e6b57;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.grp-badge::before {
    content: ''; width: 12px; height: 12px; display: inline-block; flex: 0 0 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* badge usato dentro la legenda: posizione statica (non sovrapposto) */
.grp-badge.grp-badge-legend { position: static; top: auto; left: auto; flex: 0 0 auto; }
.tavolo.in-gruppo .t-body { box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }

.gruppi-list { list-style: none; margin: 0 0 14px; padding: 0; font-size: 13px; }
.gruppi-list li { padding: 4px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grp-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

.tavolo.grp-0 { color: #e67e22; } .grp-dot.grp-0 { background: #e67e22; }
.tavolo.grp-1 { color: #16a085; } .grp-dot.grp-1 { background: #16a085; }
.tavolo.grp-2 { color: #2980b9; } .grp-dot.grp-2 { background: #2980b9; }
.tavolo.grp-3 { color: #8e44ad; } .grp-dot.grp-3 { background: #8e44ad; }
.tavolo.grp-4 { color: #c0392b; } .grp-dot.grp-4 { background: #c0392b; }
.tavolo.grp-5 { color: #b7950b; } .grp-dot.grp-5 { background: #b7950b; }
.tavolo.grp-6 { color: #2c3e50; } .grp-dot.grp-6 { background: #2c3e50; }
.tavolo.grp-7 { color: #e84393; } .grp-dot.grp-7 { background: #e84393; }

/* Menu azioni tavolo (modalità modifica) */
.tav-actions { display: flex; flex-direction: column; gap: 8px; }
.tav-actions .btn { width: 100%; }

/* ---- Dettaglio tavolo (Fase 4) ---- */
.dett-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.dett-tipo { font-weight: 700; color: var(--brand-red); }
.dett-posti { color: var(--muted); }
.dett-stato { padding: 8px 10px; border-radius: 6px; font-size: 13px; margin-bottom: 10px; }
.dett-stato.free { background: #eefaef; color: #2e7d32; }
.dett-stato.occ { background: #e9f2fb; color: #1565c0; }
.dett-form label { display: block; font-size: 12px; font-weight: 600; margin: 8px 0 2px; }
.dett-form .swal2-input { margin: 0; width: 100%; height: 38px; font-size: 14px; box-sizing: border-box; }
.dett-actions { display: flex; gap: 10px; margin-top: 14px; }
.dett-actions .btn { flex: 1; }

/* ---- Toggle "Mangia Tutto" grande (dettaglio) ---- */
.mt-big-wrap { display: flex; justify-content: center; margin: 4px 0 16px; }
.mt-big {
    display: inline-flex; align-items: center; gap: 14px; cursor: pointer;
    padding: 10px 22px; border-radius: 12px; border: 2px solid #c9ccd1; background: #f3f4f6;
    color: #6b7280; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,.08); transition: all .12s;
}
.mt-big:hover { transform: translateY(-1px); }
.mt-big .mt-big-val {
    min-width: 44px; text-align: center; padding: 4px 10px; border-radius: 8px;
    background: #d1d5db; color: #374151; font-size: 15px;
}
.mt-big.on {
    border-color: #8a6a1e; color: #3a2c00;
    background: linear-gradient(180deg,#f4d784,#e8b84b);
    box-shadow: 0 3px 10px rgba(200,146,43,.45);
}
.mt-big.on .mt-big-val { background: #3a2c00; color: #f4d784; }

/* ---- Logo brand ---- */
.app-header .app-brand a { display: inline-flex; }
.app-logo { height: 46px; display: block; }
.login-logo { display: block; max-width: 260px; width: 100%; height: auto; margin: 0 auto 8px; }

/* ---- Barra giorni-evento (dal calendario) ---- */
.cal-strip { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px 10px; }
.cal-tab {
    flex: 0 0 auto; min-width: 56px; text-align: center; line-height: 1.15;
    padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.cal-tab:hover { border-color: var(--brand-red); }
.cal-tab.active { background: var(--brand-red); color: #fff; border-color: var(--brand-red); box-shadow: 0 3px 8px rgba(192,24,24,.3); }
.cal-tab .cal-dow, .cal-tab .cal-mon { display: block; font-size: 10px; text-transform: uppercase; color: var(--muted); }
.cal-tab .cal-day { display: block; font-size: 18px; font-weight: 800; }
.cal-tab.active .cal-dow, .cal-tab.active .cal-mon { color: rgba(255,255,255,.85); }
.mt-evento { font-weight: 800; font-size: 18px; color: var(--brand-red); letter-spacing: .2px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* la mappa lascia spazio anche alla barra giorni */
.map-shell { height: calc(100vh - var(--header-h) - var(--footer-h) - 190px); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.dash-date { margin: 0; font-size: 22px; text-transform: capitalize; }
/* l'accesso al Book è nell'header globale (_Layout), disponibile ovunque */
.app-user .btn { white-space: nowrap; }
.dash-modo { color: var(--muted); font-weight: 600; }
.dash-toolbar { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; flex-wrap: wrap; }
.dash-evento { font-weight: 700; color: var(--brand-red); }

.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 18px; }
.sala-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.sala-card-head { display: block; text-align: center; padding: 12px; font-size: 18px; font-weight: 800; text-decoration: none; }
.sala-stats { width: 100%; border-collapse: collapse; font-size: 14px; }
.sala-stats th { text-align: left; font-weight: 500; color: var(--muted); padding: 7px 12px; border-bottom: 1px solid #eef1f5; }
.sala-stats td { text-align: right; font-weight: 700; padding: 7px 12px; border-bottom: 1px solid #eef1f5; }
.sala-stats tr.tot th, .sala-stats tr.tot td { background: #f7f9fb; font-size: 15px; }
.sala-stats .book-n { color: var(--brand-red); font-weight: 800; margin-right: 10px; }

.riepilogo { max-width: 420px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.riepilogo-head { background: #555; color: #fff; text-align: center; font-weight: 700; padding: 10px; letter-spacing: .5px; text-transform: uppercase; }
.riepilogo-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.riepilogo-tab th { text-align: left; font-weight: 500; padding: 8px 14px; border-bottom: 1px solid #eef1f5; }
.riepilogo-tab td { text-align: right; font-weight: 700; padding: 8px 14px; border-bottom: 1px solid #eef1f5; }
.riepilogo-tab tr.book th, .riepilogo-tab tr.book td { color: var(--brand-red); }
.riepilogo-tab tr.tot th, .riepilogo-tab tr.tot td { background: #f0f4ff; color: #0040ff; border-top: 2px solid #d9dee5; }

/* Blocco dashboard centrato (no spazio bianco sbilanciato) */
.dash { max-width: 1400px; margin: 0 auto; }

/* Mini grafico dentro la card sala */
.sala-chart-wrap { height: 168px; padding: 12px; border-top: 1px solid #eef1f5; position: relative; }

/* Riga inferiore: riepilogo + grafico complessivo, bilanciata */
.dash-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dash-bottom .riepilogo { max-width: none; margin: 0; }
.chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.chart-card-head { background: #555; color: #fff; text-align: center; font-weight: 700; padding: 10px; text-transform: uppercase; letter-spacing: .5px; }
.chart-card-body { height: 260px; padding: 16px; position: relative; }
@media (max-width: 760px) { .dash-bottom { grid-template-columns: 1fr; } }

/* ============================================================
   GESTIONE PRENOTAZIONI (Book)
   ============================================================ */
.pren-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pren-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #f5f6f8; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.pren-toolbar input, .pren-toolbar select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; height: 38px; }
.pren-toolbar input#fNom { min-width: 220px; }
.pren-toolbar select#fData { min-width: 240px; }
.pren-counter { background: #eef2f6; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font-size: 14px; margin-bottom: 12px; }
.pren-counter .sep { color: #aaa; margin: 0 8px; }
.pren-empty { text-align: center; padding: 36px; color: var(--muted); font-style: italic; }

.pren-head, .pren-card { display: grid; grid-template-columns: 34px 92px 1fr 120px 56px 1.2fr auto; gap: 6px 10px; align-items: center; }
.pren-head { background: #37474f; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; padding: 9px 12px; border-radius: 8px 8px 0 0; font-weight: 600; }
.pren-head .ce, .pren-card .pc-pers { text-align: center; }
.pren-head .ar, .pren-card .pc-act { text-align: right; }
.pren-card .pc-act { white-space: nowrap; }
.pren-card { background: #fff; border: 1px solid #eef1f5; border-top: none; padding: 10px 12px; font-size: 13px; }
.pren-card:nth-child(even) { background: #fafbfc; }
.pren-card:hover { background: #eef6ff; }
.pc-num { color: #607d8b; font-weight: 700; text-align: right; font-size: 12px; }
.pc-data { font-weight: 600; }
.pc-nom { font-weight: 700; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pc-tel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-tick span { margin-right: 6px; }
.pc-tick .muted { color: #999; }
.pc-row2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 7px; margin-top: 6px; border-top: 1px dashed #e0e0e0; font-size: 12px; color: #666; }
.evento-chip { background: #e3f2fd; color: #0d47a1; padding: 2px 8px; border-radius: 10px; }
.btn-mini { border: none; border-radius: 5px; padding: 5px 9px; cursor: pointer; font-size: 13px; margin-left: 3px; }
.btn-mini.edit { background: #1976d2; color: #fff; }
.btn-mini.del { background: #c62828; color: #fff; }
.btn-mini.link { background: #0097a7; color: #fff; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge.ok { background: #c8e6c9; color: #1b5e20; }
.badge.ko { background: #ffcdd2; color: #b71c1c; }
.badge.wait { background: #fff3cd; color: #856404; }
.badge.info { background: #e0f7fa; color: #006064; }
.badge.sms-on { background: #c8e6c9; color: #1b5e20; }
.badge.sms-off { background: #eee; color: #616161; }
/* box link pagamento (modale SweetAlert) */
.link-pag-box { background: #e3f2fd; border: 1px solid #90caf9; padding: 12px; border-radius: 6px; margin-top: 6px; text-align: left; }
.link-pag-box label { font-size: 12px; color: #555; display: block; margin-bottom: 4px; }
.link-pag-box input { width: 100%; padding: 8px; font-family: monospace; font-size: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.link-pag-box .azioni { margin-top: 8px; display: flex; gap: 8px; }
.link-pag-box .azioni button { flex: 1; padding: 8px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; color: #fff; }

/* form modale prenotazione (dentro SweetAlert2) */
.pf-row { margin-bottom: 8px; text-align: left; }
.pf-2 { display: flex; gap: 10px; }
.pf-2 > .pf-row { flex: 1; }
.pf-row label { display: block; font-weight: 600; font-size: 12px; margin-bottom: 3px; }
.pf-row label.req::after { content: " *"; color: #d9534f; }
.pf-row input, .pf-row select, .pf-row textarea { width: 100%; padding: 7px 9px; border: 1px solid #bbb; border-radius: 5px; font-size: 14px; box-sizing: border-box; }
.pf-check { display: flex; align-items: center; gap: 8px; background: #f5f5f5; border-radius: 6px; padding: 8px; margin: 6px 0; }
.pf-check label { font-weight: normal; font-size: 13px; }
.pf-siae { background: #fff8e1; border-left: 4px solid #ffa000; border-radius: 6px; padding: 10px; margin-top: 8px; }
.pf-siae-t { font-weight: 700; color: #856404; font-size: 13px; margin-bottom: 8px; }
.pf-imp { background: #e8f5e9; border-left: 4px solid #4caf50; border-radius: 6px; padding: 8px 10px; margin-top: 8px; font-size: 14px; }

@media (max-width: 760px) {
    .pren-head { display: none; }
    .pren-card { grid-template-columns: 1fr 1fr; }
    .pren-card .pc-nom { grid-column: 1 / -1; font-size: 16px; }
    .pren-card .pc-act { grid-column: 1 / -1; text-align: left; }
}

/* ============================================================
   DETTAGLIO TAVOLO (pagina, selezione posti + collegati)
   ============================================================ */
.dett-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dett-tavoli { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; padding: 22px; background: #fbfcfd; border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; }
.dtav { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.dtav-row { display: flex; gap: 5px; justify-content: center; }
.dtav-mid { display: flex; align-items: stretch; gap: 5px; }
.dtav-side { display: flex; flex-direction: column; justify-content: space-around; gap: 5px; }
.dtav-body { min-width: 120px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 2px solid #b9c2cc; border-radius: 8px; }
.dtav-id { font-weight: 800; font-size: 20px; }
.dtav-free { font-size: 11px; color: var(--muted); }
.dseat { width: 32px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 1px solid rgba(0,0,0,.2); border-radius: 5px; cursor: pointer; user-select: none; }
.dseat.on { outline: 3px solid #0C0CF7; outline-offset: 1px; }
.dseat.stato-0 { background: var(--st0); } .dseat.stato-1 { background: var(--st1); }
.dseat.stato-2 { background: var(--st2); } .dseat.stato-3 { background: var(--st3); color: #fff; }
.dseat.stato-4 { background: var(--st4); color: #fff; } .dseat.stato-5 { background: var(--st5); color: #fff; }
.dett-hint { text-align: center; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.dett-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #f5f6f8; border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.dett-form input, .dett-form select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; height: 38px; }
.dett-form input#f_nom { min-width: 200px; }
.dett-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dett-h { margin: 18px 0 8px; color: var(--brand-red); }
.dpren { width: 100%; border-collapse: collapse; font-size: 14px; }
.dpren th { background: #37474f; color: #fff; text-align: left; padding: 8px 10px; font-size: 12px; text-transform: uppercase; }
.dpren td { padding: 8px 10px; border-bottom: 1px solid #eef1f5; }
.dpren-posti { color: var(--muted); }
.dpren-az { white-space: nowrap; }
.pren-orig { font-weight: 800; font-size: 11px; color: #8a1b1b; }
.dett-note { width: 100%; resize: vertical; min-height: 40px; border: 1px solid #cdd5df; border-radius: 6px; padding: 6px 8px; font-size: 13px; box-sizing: border-box; margin-top: 8px; font-family: inherit; }
.dpren-note td { background: #fff8e1; color: #7a5b00; font-size: 13px; border-bottom: 1px solid #eef1f5; }

/* Banner "modifica prenotazione" */
.edit-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: #e9f2fb; border: 1px solid #b6d4f0; color: #1d4e79;
    padding: 8px 12px; border-radius: 8px; margin: 0 0 10px; font-size: 13px;
}
.badge-stato { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; color: #fff; }
.badge-stato.st-0 { background: var(--st0); } .badge-stato.st-1 { background: var(--st1); }
.badge-stato.st-2 { background: var(--st2); color: #4a3000; } .badge-stato.st-3 { background: var(--st3); }
.badge-stato.st-4 { background: var(--st4); } .badge-stato.st-5 { background: var(--st5); }

/* ===== Popup "Stato Tavoli" (ordini/cucina) ===== */
.st-wrap { font-size: 13px; }
.st-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.st-refresh { width: 30px; height: 30px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; font-size: 16px; line-height: 1; flex: 0 0 30px; }
.st-refresh:hover { background: #f0f0f0; }
.st-title { font-size: 14px; }
.st-day { color: var(--muted); font-weight: 700; margin-left: 6px; }
.st-warn { background: #fff3cd; border: 1px solid #ffe69c; color: #7a5b00; padding: 8px 10px; border-radius: 6px; margin-bottom: 10px; font-size: 12px; }
.st-demo { background: #c01818; color: #fff; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 8px; margin-left: 8px; letter-spacing: .5px; }
.st-demo-warn { background: #fde8e8; border-color: #f5b5b5; color: #8a1b1b; }
.st-bars { display: flex; flex-direction: column; gap: 8px; }
.st-bar {
    width: 100%; min-height: 54px; border: none; border-radius: 14px;
    display: flex; align-items: center; gap: 13px; padding: 9px 16px; cursor: pointer; text-align: left;
    color: #16242e; box-shadow: 0 1px 2px rgba(0,0,0,.08);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.st-bar:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0,0,0,.18); filter: saturate(1.07); }
.st-bar:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.16); }
.st-ico { font-size: 23px; line-height: 1; width: 30px; flex: 0 0 30px; text-align: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.st-cnt {
    font-size: 21px; font-weight: 800; min-width: 46px; height: 40px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.6); border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.st-lab { font-size: 13px; font-weight: 700; flex: 1; letter-spacing: .2px; }
.st-chev { font-size: 22px; font-weight: 700; opacity: .45; flex: 0 0 auto; }
.st-bar:not(.has) { opacity: .55; box-shadow: none; }              /* nessun conteggio = attenuato */
.st-bar:not(.has) .st-cnt { background: rgba(255,255,255,.45); }
/* colori esistenti, sfumati (bianco / grigio / azzurro / verde / rosa / nero) */
.st-1 { background: linear-gradient(135deg, #ffffff, #e6ebef); color: #14222c; }
.st-2 { background: linear-gradient(135deg, #dadada, #b6b9bd); color: #1c1c1c; }
.st-3 { background: linear-gradient(135deg, #c2e6f4, #8ec8e2); color: #0b3a52; }
.st-4 { background: linear-gradient(135deg, #b4f1aa, #7ed079); color: #134219; }
.st-5 { background: linear-gradient(135deg, #ff9ecb, #ff5ea7); color: #59123a; }
.st-6 { background: linear-gradient(135deg, #3b3b3b, #0b0b0b); color: #f3f3f3; }
.st-6 .st-cnt { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.st-6 .st-chev { opacity: .6; }
.st-list { margin: 2px 0 6px; padding: 4px; background: #f7f9fb; border-radius: 6px; }
.st-ord { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 6px; border-bottom: 1px solid #eef1f5; cursor: pointer; font-family: monospace; font-size: 12px; }
.st-ord:hover { background: #eef5fc; }
.st-ord .st-tav { font-weight: 800; min-width: 64px; }
.st-ord .st-nom { min-width: 130px; }
.st-det { padding: 4px 10px 8px 18px; background: #fff; border-left: 3px solid #cdd5df; margin: 0 0 4px 6px; font-size: 12px; }
.st-sub { font-weight: 800; color: #556; margin-top: 4px; }
.st-av, .st-pi { font-family: monospace; padding: 1px 0; }
.st-empty { color: #888; font-style: italic; padding: 4px 6px; font-size: 12px; }
.st-foot { color: var(--muted); font-size: 11px; margin-top: 8px; }

/* Pannello "Stato cucina": flottante, trascinabile dalla testata, minimizzabile.
   Niente sfondo che blocca la mappa: il layer è solo un contenitore senza pointer-events. */
.cucina-modal { position: fixed; inset: 0; z-index: 1000; display: none; pointer-events: none; }
.cucina-modal.open { display: block; }
.cucina-box { position: fixed; top: 86px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column;
    background: #fff; border-radius: 12px; width: min(560px, calc(100vw - 20px)); max-height: calc(100vh - 110px);
    box-shadow: 0 10px 40px rgba(0,0,0,.45); pointer-events: auto; overflow: hidden; }
.cucina-box.dragged { transform: none; }                 /* dopo il drag uso left/top assoluti */
.cucina-box.min { max-height: none; }
.cucina-box.min #cucinaBody { display: none; }            /* minimizzato = solo testata */
.cucina-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #c01818; color: #fff;
    cursor: move; user-select: none; touch-action: none; border-radius: 12px 12px 0 0; }
.cucina-bar-t { font-weight: 800; font-size: 14px; }
.cucina-bar-sp { flex: 1; }
.cucina-min, .cucina-close { width: 28px; height: 28px; border: none; border-radius: 6px; background: rgba(255,255,255,.18);
    color: #fff; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
.cucina-min:hover, .cucina-close:hover { background: rgba(255,255,255,.34); }
#cucinaBody { padding: 14px 16px; overflow: auto; }

/* ============================================================
   LISTE D'ATTESA (pannello sinistro mappa)
   ============================================================ */
.attesa-panel { font-size: 12px; }
.att-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.att-head h3 { margin: 0; font-size: 15px; }
.att-day { font-size: 11px; color: var(--muted); font-weight: 700; }

.att-sec { margin-bottom: 10px; }
.att-sec-h {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 8px; border-radius: 6px; font-weight: 800; font-size: 12px; color: #fff; text-transform: uppercase; letter-spacing: .3px;
}
.att-sec-h.att-con { background: #2c6fb3; }
.att-sec-h.att-sen { background: #c98a2b; }
.att-sec-h.att-book { background: #2f8f4e; }
.att-add {
    width: 20px; height: 20px; line-height: 17px; padding: 0; border-radius: 50%;
    border: none; background: rgba(255,255,255,.9); color: #222; font-weight: 900; cursor: pointer;
}
.att-add:hover { background: #fff; }
.att-empty { color: #888; font-style: italic; font-size: 11px; padding: 6px 4px; margin: 0; }

.att-tab { width: 100%; border-collapse: collapse; margin-top: 3px; }
.att-tab th { background: #eef1f5; color: #556; font-size: 10px; text-transform: uppercase; padding: 3px 4px; text-align: left; }
.att-tab td { padding: 3px 4px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
.att-tab .att-c { text-align: center; }
.att-nome { font-weight: 700; }
.att-nome.att-ok { color: #1c7c34; }
.att-nome.att-ko { color: #c0392b; }
.att-orig { display: block; font-weight: 400; font-size: 10px; color: #777; white-space: nowrap; }
.att-op { white-space: nowrap; text-align: right; }
.att-mini { border: none; border-radius: 4px; padding: 3px 6px; margin-left: 2px; cursor: pointer; font-size: 11px; font-weight: 700; background: #dfe4ea; color: #2c3e50; }
.att-mini.sel { background: #2c6fb3; color: #fff; }
.att-mini.del { background: #c0392b; color: #fff; }
.att-mini:disabled { opacity: .5; cursor: default; }

/* form aggiungi/modifica */
.att-form { border: 1px solid #cdd5df; border-radius: 8px; padding: 8px; margin-bottom: 10px; background: #fafbfc; }
.att-form-r { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.att-form-r label { flex: 0 0 92px; font-size: 11px; font-weight: 700; color: #455; }
.att-form-r input, .att-form-r select { flex: 1; height: 28px; border: 1px solid #cdd5df; border-radius: 5px; padding: 0 6px; font-size: 12px; }
.att-form-btns { display: flex; gap: 6px; margin-top: 4px; }
.att-btn { border: 1px solid #cdd5df; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 12px; font-weight: 700; background: #fff; }
.att-btn-ok { background: #2c6fb3; color: #fff; border-color: #2c6fb3; }
.att-btn-annulla { width: 100%; margin-top: 8px; }

/* box cliente selezionato */
.att-sel { border: 2px solid #2c6fb3; border-radius: 8px; padding: 8px; margin-bottom: 10px; background: #eef5fc; }
.att-sel-h { font-weight: 800; text-transform: uppercase; font-size: 12px; color: #1d4e79; text-align: center; margin-bottom: 6px; }
.att-sel-r { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 12px; }
.att-sel-r span { color: #667; }
.att-sel-tav { margin-top: 8px; }
.att-sel-tav label { display: block; font-size: 11px; font-weight: 700; color: #455; margin-bottom: 3px; }
.att-sel-tav select { width: 100%; height: 30px; border: 1px solid #2c6fb3; border-radius: 6px; padding: 0 6px; font-size: 12px; }
.att-muted { color: #888; font-size: 11px; font-style: italic; margin: 4px 0 0; }

/* banner assegnazione sul dettaglio tavolo */
.attesa-assign {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: #eaf5ec; border: 1px solid #b6e0bf; color: #1c5e2e;
    padding: 9px 14px; border-radius: 8px; margin: 0 0 12px; font-size: 14px;
}
.attesa-assign a { color: #1c5e2e; font-weight: 700; }