:root{
  --bg:#FFFFFF;
  --page-bg:#E6E6E6;       /* grigio chiaro neutro del canvas della pagina, per staccare le "finestre" bianche (card/modali/topbar/sidebar) */
  --surface:#FFFFFF;
  --surface-2:#F6F7F8;
  --surface-3:#EEF0F2;
  --border:#E2E5E9;
  --text:#1C2024;
  --muted:#6B7280;
  --muted-2:#9CA3AF;
  --accent:#127F8C;        /* turchese/petrolio ispirato ad acqua e natura, usato con moderazione */
  --accent-dim:#E2EFF1;
  --warn:#B5490E;
  --warn-dim:#FBEAE2;
  --radius:10px;
  --page-px:36px;          /* padding orizzontale del contenuto, condiviso con la headbar */
}
*{box-sizing:border-box;}
body{margin:0;background:var(--page-bg);color:var(--text);font-family:'Inter',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
body.menu-aperto{overflow:hidden;}
h1,h2,h3,.display{font-family:'Space Grotesk',Arial,sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}
.link-button{background:none;border:none;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer;text-align:left;}

.app{display:block;min-height:100vh;}

/* ---------- MENU HAMBURGER (ora dentro la headbar, non più fisso sul viewport) ---------- */
.menu-toggle{
  flex-shrink:0;
  width:40px; height:40px; border-radius:9px;
  border:1px solid var(--border); background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer;
  padding:0;
}
.menu-toggle:hover{border-color:var(--muted-2);}
.menu-toggle span{display:block; width:18px; height:2px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.sidebar-overlay{
  position:fixed; inset:0; z-index:90;
  background:rgba(17,20,24,.38);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.sidebar-overlay.visible{opacity:1; pointer-events:auto;}

/* ---------- SIDEBAR (pannello a scomparsa, ancorato a destra) ---------- */
.sidebar{
  position:fixed; top:0; right:0; z-index:100;
  width:250px; max-width:85vw; height:100vh;
  background:var(--surface); border-left:1px solid var(--border);
  padding:24px 16px; display:flex; flex-direction:column; gap:24px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .25s ease;
  box-shadow:-8px 0 32px rgba(20,24,28,.14);
}
.sidebar.open{transform:translateX(0);}

.brand{display:flex;align-items:center;gap:10px;padding:0 4px;}
.brand-topbar{text-decoration:none;flex-shrink:0;padding:0 16px 0 0;margin-right:4px;border-right:1px solid var(--border);}
.brand-topbar:hover .brand-name{color:var(--accent);}
.brand-mark{width:26px;height:26px;border-radius:6px;background:var(--accent);position:relative;flex-shrink:0;}
.brand-mark::after{content:"";position:absolute;inset:6px;border:2px solid var(--bg);border-radius:3px;}
.brand-name{font-weight:700;font-size:16px;}
.nav{display:flex;flex-direction:column;gap:2px;}
.nav-section-label{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:var(--muted-2);padding:0 12px;margin:10px 0 2px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--muted);font-size:13.5px;font-weight:500;text-decoration:none;border:1px solid transparent;}
.nav-item:hover{color:var(--text);background:var(--surface-2);}
.nav-item.active{color:var(--accent);background:var(--accent-dim);font-weight:600;}

.user-box{margin-top:auto;border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:var(--surface-2);}
.user-box .name{font-size:13px;font-weight:600;}
.user-box .role{font-size:11px;color:var(--muted);text-transform:capitalize;margin-bottom:8px;}
.user-box a{font-size:12px;color:var(--warn);text-decoration:none;font-weight:600;}

/* ---------- MAIN + HEADBAR ---------- */
.main{padding:0 var(--page-px) 28px;max-width:100%;overflow-x:hidden;}

/* La headbar è "full-bleed" (esce dal padding di .main con margini negativi) e resta
   visibile in cima alla pagina durante lo scroll. È il posto dove ogni pagina può
   mostrare i propri filtri/comandi (topbar-actions), con il pulsante menu sempre
   all'estrema destra. */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin:0 calc(-1 * var(--page-px)) 24px;
  padding:14px var(--page-px);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 8px rgba(20,24,28,.04);
}
.topbar-title{margin-right:auto;}
.page-title{font-size:21px;font-weight:700;margin:0 0 4px;}
.page-sub{color:var(--muted);font-size:13px;margin:0;}

.topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.topbar-actions form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.topbar-actions input, .topbar-actions select{width:auto;min-width:140px;padding:8px 10px;font-size:12.5px;}
.topbar-actions .btn{padding:8px 12px;}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:0 1px 2px rgba(20,24,28,.04), 0 6px 16px rgba(20,24,28,.05);overflow-x:auto;}
.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.panel-title h3{font-size:14px;margin:0;font-weight:600;}
.panel-title a{font-size:12px;color:var(--accent);text-decoration:none;}

/* ---------- STAT CARDS ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden;}
.stat-card::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--stat-color,var(--accent));}
.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:8px;}
.stat-value{font-size:26px;font-weight:600;font-family:'IBM Plex Mono',monospace;}
.stat-value span{font-size:13px;color:var(--muted);font-weight:400;}
.stat-delta{font-size:11px;margin-top:6px;color:var(--muted);}

.home-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;}

.agenda-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.agenda-row:last-child{border-bottom:none;}
.agenda-time{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted);width:48px;flex-shrink:0;}
.agenda-bar{width:3px;height:26px;border-radius:2px;background:var(--accent);flex-shrink:0;}
.agenda-bar.pt{background:var(--warn);}
.agenda-info{flex:1;min-width:0;}
.agenda-title{font-size:13px;font-weight:500;}
.agenda-sub{font-size:11.5px;color:var(--muted);}
.badge{font-size:10px;padding:2px 8px;border-radius:20px;border:1px solid var(--border);color:var(--muted);white-space:nowrap;}
.badge.pt-req{color:var(--warn);border-color:#EEC2AC;background:var(--warn-dim);}
.badge.warn{color:var(--warn);border-color:#EEC2AC;background:var(--warn-dim);}
.badge.ok{color:var(--accent);border-color:#94C5CB;background:var(--accent-dim);}

/* ---------- Badge grandi e uniformi per l'header della scheda cliente ---------- */
.info-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.info-badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;padding:7px 16px;border-radius:20px;border:1.5px solid var(--border);color:var(--muted);background:var(--surface-2);}
.info-badge.ok{color:var(--accent);border-color:#94C5CB;background:var(--accent-dim);}
.info-badge.warn{color:var(--warn);border-color:#EEC2AC;background:var(--warn-dim);}
.info-badge.off{color:var(--muted);border-color:var(--border);background:var(--surface-2);}

.alert-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);}
.alert-row:last-child{border-bottom:none;}
.alert-icon{width:22px;height:22px;border-radius:6px;background:var(--warn-dim);color:var(--warn);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.alert-text{font-size:12.5px;color:var(--text);line-height:1.5;}
.alert-meta{font-size:11px;color:var(--muted-2);}

/* ---------- BUTTONS / FORMS ---------- */
.btn{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.btn:hover{border-color:var(--muted-2);}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn.danger{background:#fff;color:var(--warn);border-color:#EEC2AC;}
.quick-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}

label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 5px;}
input, select, textarea{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:7px;font-family:'Inter',sans-serif;font-size:13px;background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(20,24,28,.05), 0 2px 6px rgba(20,24,28,.05);transition:box-shadow .15s, border-color .15s;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:#94C5CB;box-shadow:0 1px 2px rgba(20,24,28,.05), 0 3px 10px rgba(18,127,140,.14);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.checkbox-row{display:flex;align-items:center;gap:8px;margin-top:14px;}
.checkbox-row input{width:auto;}

.flash{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;}
.flash.success{background:var(--accent-dim);color:var(--accent);border:1px solid #94C5CB;}
.flash.error{background:var(--warn-dim);color:var(--warn);border:1px solid #EEC2AC;}

/* ---------- MODALI (creazione/modifica record) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:120;
  background:rgba(17,20,24,.45);
  display:none; align-items:flex-start; justify-content:center;
  padding:48px 20px; overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:#fff; border-radius:12px; width:520px; max-width:100%;
  padding:22px 24px 24px; position:relative;
  box-shadow:0 24px 64px rgba(20,24,28,.30);
}
.modal-box .panel-title{margin-bottom:2px; padding-right:40px;}
.modal-close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:30px; height:30px; border-radius:7px; border:1px solid transparent;
  background:none; color:var(--muted); font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.modal-close:hover{background:var(--surface-2); color:var(--text);}
body.modal-aperto{overflow:hidden;}
.modal-box.wide{width:640px;}

/* ---------- SCHEDA PRENOTAZIONE (dettagli/pagamento/cliente a tab, aperta dal calendario) ---------- */
.tabs-nav{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:14px 0 16px;}
.tab-btn{border:none;background:none;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:var(--muted);padding:8px 4px;margin-right:16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;}
.detail-label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:4px;}
.detail-value{
  display:block; min-height:20px; font-size:13.5px; color:var(--text);
  padding:8px 10px; border:1px solid var(--border); border-radius:7px;
  background:#FBFBFC; box-shadow:0 1px 2px rgba(20,24,28,.04);
}
.detail-value a{color:var(--accent);text-decoration:none;}
.empty-hint{font-size:13px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:14px;text-align:center;}
.mini-table{font-size:12px;}
.mini-table th, .mini-table td{padding:7px 8px;}
.scheda-sezione-titolo{font-size:12px;font-weight:700;color:var(--text);margin:0 0 8px;}

/* ---------- TABLE ---------- */
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text);font-weight:700;padding:10px 12px;border-bottom:2px solid var(--border);background:#C6C6C6;}
td{padding:10px 12px;border-bottom:1px solid var(--border);}
tr:last-child td{border-bottom:none;}
.pill{display:inline-block;font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--border);}
.pill.attivo, .pill.confermata, .pill.pagato, .pill.disponibilita{color:var(--accent);border-color:#94C5CB;background:var(--accent-dim);}
.pill.sospeso, .pill.in_sospeso, .pill.in_attesa, .pill.opzionata, .pill.da_pagare, .pill.non_pagato, .pill.pagato_parziale{color:#8A6D00;border-color:#EBDB9C;background:#FBF6DF;}
.pill.scaduto, .pill.annullata, .pill.revocato, .pill.negato, .pill.no_show, .pill.disdetta, .pill.rimborsato{color:var(--warn);border-color:#EEC2AC;background:var(--warn-dim);}
.pill.pagata{color:#fff;border-color:var(--accent);background:var(--accent);font-weight:600;}
.actions-cell{display:flex;gap:8px;flex-wrap:wrap;}
.actions-cell a, .actions-cell button{font-size:12px;}
.th-sort{color:inherit;text-decoration:none;display:inline-block;}
.th-sort:hover{color:var(--accent);}

/* ---------- MODALE DI CONFERMA AZIONE (cambio stato prenotazione) ----------
   Stessa struttura per ogni operazione (conferma/segna pagata/disdici), solo il colore
   dell'header cambia in base all'esito: coerente con i colori già usati per le card del
   calendario (arancione=confermata, verde=pagata, rosso=disdetta). */
.modal-box.confirm{padding:0;overflow:hidden;}
.modal-confirm-header{padding:16px 50px 16px 22px;border-radius:12px 12px 0 0;position:relative;}
.modal-confirm-header h3{margin:0;color:#fff;font-size:15px;font-weight:700;}
.modal-confirm-header .modal-close{position:absolute;top:11px;right:12px;color:#fff;background:rgba(255,255,255,.2);border-color:transparent;}
.modal-confirm-header .modal-close:hover{background:rgba(255,255,255,.35);}
.modal-confirm-body{padding:20px 24px 24px;}
.modal-confirm-body p{font-size:13.5px;color:var(--text);line-height:1.55;margin:0;}
.modal-confirm-body .mono{color:var(--muted);}
.modal-confirm-actions{display:flex;gap:10px;margin-top:20px;}
.modal-confirm-actions form{flex:1;display:flex;}
.modal-confirm-actions .btn{flex:1;}

/* ---------- STRISCIA GIORNI (header elenco Prenotazioni) ---------- */
.icon-link-cal{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px solid var(--border);background:#fff;text-decoration:none;}
.icon-link-cal:hover{background:var(--surface-3);color:var(--accent);border-color:var(--accent);}
.day-strip{display:flex;align-items:center;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:4px;}
.day-strip-month{font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--muted);padding:0 6px 0 4px;letter-spacing:.4px;font-family:'IBM Plex Mono',monospace;}
.day-strip-chip{width:38px;height:50px;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:14px;font-weight:700;font-family:'IBM Plex Mono',monospace;color:var(--text);text-decoration:none;position:relative;}
.day-strip-chip:hover{background:var(--surface-3);}
.day-strip-chip.active{background:var(--accent);color:#fff;}
.day-strip-chip.today::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--accent);}
.day-strip-chip.active.today::after{background:#fff;}
.day-strip-chip-dow{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.3px;line-height:1;}
.day-strip-chip.active .day-strip-chip-dow{color:rgba(255,255,255,.85);}
.day-strip-chip-mese{font-size:7.5px;font-weight:700;text-transform:uppercase;color:var(--accent);letter-spacing:.3px;line-height:1;margin-top:-1px;}
.day-strip-chip.active .day-strip-chip-mese{color:#fff;}
.day-strip-nav{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--text);text-decoration:none;font-size:13px;margin-left:2px;flex-shrink:0;}
.day-strip-nav:hover{background:var(--surface-3);}

/* ---------- CALENDAR ---------- */
.nav-arrows{display:flex;gap:4px;}
.nav-arrows a, .nav-arrows button{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
.cal-range-label{font-weight:600;font-size:14px;min-width:150px;}
.view-toggle{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:3px;}
.view-toggle a{border:none;background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:5px;cursor:pointer;font-family:'Inter',sans-serif;text-decoration:none;}
.view-toggle a.active{background:var(--accent);color:#fff;}

.legend{display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);}
.legend-dot{width:8px;height:8px;border-radius:2px;display:inline-block;}

.cal-scroll{border:1px solid var(--border);border-radius:var(--radius);overflow:auto;background:var(--surface);min-height:320px;box-shadow:0 1px 2px rgba(20,24,28,.04), 0 6px 16px rgba(20,24,28,.05);}
.cal-grid{display:grid;}
.cal-head-cell{padding:10px 8px;font-size:12px;font-weight:700;text-align:center;background:#C6C6C6;border-bottom:2px solid var(--border);border-left:1px solid var(--border);position:sticky;top:0;}
.cal-head-cell:first-child{border-left:none;}
.cal-head-cell .sub{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:2px;font-family:'IBM Plex Mono',monospace;}
.time-cell{padding:6px 8px;font-size:10.5px;color:var(--muted-2);font-family:'IBM Plex Mono',monospace;text-align:right;border-top:1px solid var(--border);}
.slot-cell{border-top:1px solid var(--border);border-left:1px solid var(--border);padding:2px;overflow:hidden;}
.slot-chip{font-size:10.5px;border-radius:5px;padding:3px 6px;height:100%;cursor:pointer;line-height:1.25;background:var(--bg);border:1px solid var(--border);color:var(--muted);text-decoration:none;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.slot-chip.richiede_pt_non_coperto{background:#C0392B; border-color:#C0392B; color:#fff; font-weight:700;}
.slot-chip.bloccato{
  background:repeating-linear-gradient(45deg, #E9EAEC, #E9EAEC 6px, #F5F5F6 6px, #F5F5F6 12px);
  border-color:#D4D6D9; color:#5B5E63; font-weight:600; cursor:pointer;
}
.slot-chip.bloccato .name{font-weight:700;}
.slot-chip.chiuso{background:transparent;border:1px dashed var(--border);color:var(--muted-2);cursor:default;}
.slot-chip .name{font-weight:600;display:block;}
.slot-chip:hover{filter:brightness(0.97);}

/* ---------- CARD DI PRENOTAZIONE (slot occupato nel calendario) ----------
   Sfondo pieno e opaco (nessuna trasparenza/tinta), colore diverso per ciascuno stato della
   prenotazione, bordo bianco per staccare nettamente la card dalla griglia e dalle card
   adiacenti. Gli slot liberi restano invece card bianche vuote (vedi .slot-chip sopra):
   il colore pieno è riservato solo a ciò che è davvero occupato da una prenotazione. */
.booking-card{height:100%;border-radius:5px;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);overflow:hidden;display:flex;flex-direction:column;font-size:10.5px;line-height:1.2;color:#fff;}
.booking-card.stato-opzionata{background:#2A5DB0;}
.booking-card.stato-confermata{background:#A85813;}
.booking-card.stato-disdetta{background:#8A8D91;}
.booking-paid-check{color:#B6F0C4;font-weight:800;}
.booking-main{display:block;padding:3px 5px 1px;color:inherit;text-decoration:none;overflow:hidden;flex:1;min-height:0;border:none;background:none;width:100%;text-align:left;font-family:inherit;cursor:pointer;}
.booking-time{display:block;font-weight:700;font-family:'IBM Plex Mono',monospace;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.booking-client{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.booking-service{display:block;font-size:9.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.booking-icons{display:flex;gap:2px;padding:1px 3px 2px;flex-shrink:0;}
.icon-btn{border:none;background:rgba(255,255,255,.28);border-radius:4px;font-size:9.5px;line-height:1;padding:2px 4px;cursor:pointer;color:inherit;text-decoration:none;}
.icon-btn:hover{background:rgba(255,255,255,.45);}

.week-cell{min-height:60px;}
.week-cell .slot-chip, .week-cell .booking-card, .week-cell .booking-group{margin-bottom:3px;}
.week-cell .booking-card{height:auto;min-height:44px;}

/* ---------- RIEPILOGO DI GRUPPO (slot con più prenotazioni, risorse a capienza multipla) ---------- */
.booking-group{height:100%;border-radius:5px;border:1px solid var(--border);background:var(--bg);overflow:auto;padding:3px 4px;display:flex;flex-direction:column;gap:2px;font-size:10px;}
.booking-group-header{font-weight:700;font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--muted);margin-bottom:1px;border:none;background:none;padding:0;width:100%;text-align:left;cursor:pointer;display:block;text-decoration:underline;text-decoration-color:transparent;}
.booking-group-header:hover{color:var(--accent);text-decoration-color:var(--accent);}

/* ---------- ELENCO PARTECIPANTI ALLO SLOT (modale aperto da "X/Y posti") ---------- */
.slot-list{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto;}
.slot-list-row{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--border);border-radius:8px;padding:9px 10px;background:var(--surface-2);cursor:pointer;text-align:left;font-family:inherit;}
.slot-list-row:hover{background:var(--accent-dim);border-color:#94C5CB;}
.slot-list-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.slot-list-client{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slot-list-service{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slot-list-arrow{font-size:18px;color:var(--muted-2);flex-shrink:0;}
.booking-mini{display:block;border-radius:4px;padding:2px 5px;text-decoration:none;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);width:100%;text-align:left;font-family:inherit;font-size:inherit;cursor:pointer;}
.booking-mini.stato-opzionata{background:#2A5DB0;}
.booking-mini.stato-confermata{background:#A85813;}
.booking-mini.stato-disdetta{background:#8A8D91;}
.booking-mini-more{font-size:9px;color:var(--muted-2);padding:1px 5px;}
.booking-add{display:block;text-align:center;border-radius:4px;padding:2px 5px;text-decoration:none;color:var(--accent);border:1px dashed #94C5CB;font-weight:600;}
.booking-add:hover{background:var(--accent-dim);}

@media (max-width:900px){
  :root{--page-px:18px;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .home-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}

@media (max-width:600px){
  :root{--page-px:14px;}
  .stat-row{grid-template-columns:1fr;}
  .topbar{padding:12px var(--page-px);gap:10px;}
  .page-title{font-size:18px;}
  .brand-topbar{padding-right:10px;margin-right:2px;}
  .brand-name{font-size:14px;}
  .card{padding:16px;}
  .modal-box{padding:18px 16px 20px;}
  .modal-box.wide{width:100%;}
  .detail-grid{grid-template-columns:1fr;}
  table{font-size:12px;}
  th, td{padding:8px;}
  .topbar-actions input, .topbar-actions select{min-width:0;flex:1;}
}