/* =====================================================================
   NIGHTPASS — Design System
   Tema scuro premium per nightlife. Token centralizzati + componenti.
   ===================================================================== */
:root {
  /* Palette base */
  --bg:            #0a0a0f;
  --bg-2:          #0f0e16;
  --surface:       #16141f;
  --surface-2:     #1c1a28;
  --surface-3:     #241f34;
  --border:        rgba(255,255,255,.07);
  --border-strong: rgba(168,85,247,.28);

  /* Accenti */
  --violet:   #a855f7;
  --violet-2: #7c3aed;
  --fuchsia:  #d946ef;
  --cyan:     #22d3ee;
  --grad:     linear-gradient(135deg, #7c3aed 0%, #a855f7 45%, #d946ef 100%);

  /* Testo */
  --text:      #ececf2;
  --text-2:    #b7b7c6;
  --text-3:    #7c7c8c;

  /* Stato */
  --success: #34d399;
  --danger:  #f87171;
  --warning: #fbbf24;
  --info:    #38bdf8;

  /* Forma */
  --r-sm: 10px;  --r: 14px;  --r-lg: 20px;  --r-xl: 26px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px;
  --shadow:   0 14px 36px rgba(0,0,0,.40);
  --shadow-lg: 0 26px 64px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(168,85,247,.35);
  --tr: 160ms cubic-bezier(.4,0,.2,1);

  /* Tipografia */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --touch: 48px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(124,58,237,.16), transparent 55%),
    radial-gradient(1000px 600px at -10% 10%, rgba(217,70,239,.10), transparent 50%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0 0 .4em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { color: var(--text-2); }
small { color: var(--text-3); }

/* ---- Layout app --------------------------------------------------- */
.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.sidebar {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-right: 1px solid var(--border);
  padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-5); padding: 0 var(--sp-2); }
.brand .logo {
  width: 38px; height: 38px; border-radius: 11px; background: var(--grad);
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(168,85,247,.45);
}
.brand .logo svg { color: #fff; }
.brand b { font-size: 1.15rem; letter-spacing: -.02em; }
.brand span { color: var(--text-3); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; display: block; }

.nav-section { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: var(--sp-4) var(--sp-2) var(--sp-1); }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px var(--sp-3);
  border-radius: var(--r); color: var(--text-2); font-weight: 500; font-size: .93rem;
  transition: background var(--tr), color var(--tr); min-height: 44px;
}
.nav-item svg { width: 19px; height: 19px; flex: 0 0 auto; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.is-active { background: var(--surface-3); color: #fff; box-shadow: inset 0 0 0 1px var(--border-strong); }
.nav-item.is-active svg { color: var(--violet); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  background: rgba(10,10,15,.72); backdrop-filter: blur(14px);
}
.topbar .who { display: flex; align-items: center; gap: 12px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-3);
  display: grid; place-items: center; font-weight: 600; color: var(--violet); box-shadow: inset 0 0 0 1px var(--border-strong); }
.content { padding: var(--sp-6); max-width: 1440px; width: 100%; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }

/* ---- Card / surfaces --------------------------------------------- */
.card {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow);
}
.card.tight { padding: var(--sp-4); }
.grid { display: grid; gap: var(--sp-4); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Stat card ---------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat .label { color: var(--text-3); font-size: .8rem; display: flex; align-items: center; gap: 8px; }
.stat .value { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.stat .value.sm { font-size: 1.4rem; }
.stat .chip { align-self: flex-start; }

/* ---- Buttons ------------------------------------------------------ */
.btn {
  --bg-btn: var(--surface-3);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 18px; min-height: var(--touch); border-radius: var(--r);
  border: 1px solid var(--border); background: var(--bg-btn); color: var(--text);
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: transform var(--tr), filter var(--tr), background var(--tr);
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(168,85,247,.35); }
.btn.ghost { background: transparent; }
.btn.danger { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.4); color: #fecaca; }
.btn.success { background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.4); color: #bbf7d0; }
.btn.lg { min-height: 60px; font-size: 1.05rem; padding: 0 26px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Forms -------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--sp-4); }
.field label { font-size: .85rem; color: var(--text-2); font-weight: 500; }
.input, .select, textarea.input {
  width: 100%; min-height: var(--touch); padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text); font: inherit; transition: border var(--tr), box-shadow var(--tr);
}
textarea.input { min-height: 96px; resize: vertical; }
.input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--violet); box-shadow: var(--ring); }
.input.big { font-size: 1.4rem; letter-spacing: .12em; text-align: center; min-height: 64px; }
.field .error-text { color: var(--danger); font-size: .82rem; }
.field.has-error .input { border-color: var(--danger); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 46px; height: 26px; border-radius: 999px; background: var(--surface-3); position: relative; transition: background var(--tr); }
.switch .track::after { content:""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--tr); }
.switch input:checked + .track { background: var(--violet-2); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

/* ---- Badges / chips ---------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); }
.chip.violet { background: rgba(168,85,247,.16); color: #e9d5ff; border-color: var(--border-strong); }
.chip.success { background: rgba(52,211,153,.14); color: #bbf7d0; border-color: rgba(52,211,153,.35); }
.chip.danger { background: rgba(248,113,113,.14); color: #fecaca; border-color: rgba(248,113,113,.35); }
.chip.warning { background: rgba(251,191,36,.14); color: #fde68a; border-color: rgba(251,191,36,.35); }
.chip.muted { background: var(--surface-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---- Tables ------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border);
  /* Ombra di scorrimento: appare a destra/sinistra quando la tabella è più
     larga dello schermo (tablet/telefono) e si nasconde ai bordi. */
  background:
    linear-gradient(to right, var(--surface-2) 30%, rgba(28,26,40,0)) left center / 26px 100% no-repeat,
    linear-gradient(to left, var(--surface-2) 30%, rgba(28,26,40,0)) right center / 26px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.5), rgba(0,0,0,0)) left center / 13px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.5), rgba(0,0,0,0)) right center / 13px 100% no-repeat;
  background-attachment: local, local, scroll, scroll; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th, table.data td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); }
table.data th { color: var(--text-3); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; background: var(--bg-2); position: sticky; top: 0; }
table.data tbody tr { transition: background var(--tr); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Alerts / toast ---------------------------------------------- */
.alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-2); margin-bottom: var(--sp-4); }
.alert.success { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.1); }
.alert.error { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); }
.alert.warning { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); }
.alert.info { border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.1); }
#toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; }
.toast { min-width: 260px; max-width: 380px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-3);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); animation: slideIn var(--tr); }
.toast.success { border-color: rgba(52,211,153,.5); }
.toast.error { border-color: rgba(248,113,113,.5); }
@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Empty state / skeleton -------------------------------------- */
.empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-3); }
.empty .icon { width: 56px; height: 56px; margin: 0 auto var(--sp-3); border-radius: 16px; background: var(--surface-2); display: grid; place-items: center; }
.empty .icon svg { width: 26px; height: 26px; color: var(--violet); }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: var(--r); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- Utilities ---------------------------------------------------- */
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.muted { color: var(--text-3); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.pill-tabs { display: inline-flex; gap: 4px; background: var(--bg-2); padding: 4px; border-radius: 999px; border: 1px solid var(--border); }
.pill-tabs a { padding: 8px 16px; border-radius: 999px; font-size: .88rem; color: var(--text-2); }
.pill-tabs a.is-active { background: var(--surface-3); color: #fff; }
.breadcrumb { color: var(--text-3); font-size: .85rem; margin-bottom: 4px; }
.pagination { display: flex; gap: 6px; margin-top: var(--sp-4); }
.pagination a, .pagination span { padding: 8px 13px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); font-size: .88rem; }
.pagination .current { background: var(--surface-3); color: #fff; border-color: var(--border-strong); }

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 1024px) {
  .cols-4 { grid-template-columns: repeat(2,1fr); }
  .cols-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 60; transform: translateX(-100%); width: 264px; transition: transform var(--tr); }
  .sidebar.open { transform: none; }
  .content { padding: var(--sp-4); }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .menu-toggle { display: inline-flex !important; }
}
.menu-toggle { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* ---- Club picker cards (area developer) --------------------------- */
.club-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(380px,100%), 520px));
  gap:28px; justify-content:center; }
.club-card { display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:20px; min-height:300px; padding:38px 36px; position:relative;
  transition:border-color var(--tr), transform var(--tr), box-shadow var(--tr); }
.club-card:hover { border-color: var(--border-strong) !important; transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.42); }
.club-logo { width:172px; height:172px; border-radius:30px; overflow:hidden; flex:0 0 auto;
  background:var(--surface-3); display:grid; place-items:center; box-shadow: inset 0 0 0 1px var(--border); }
.club-logo img { width:100%; height:100%; object-fit:contain; padding:20px; }
.club-logo svg { width:66px; height:66px; color:var(--violet); }
.club-meta { min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.club-meta b { line-height:1.2; font-size:1.45rem; }
.club-meta small { font-size:.88rem; }
.club-card > .chip { position:absolute; top:16px; right:16px; }
@media (max-width:600px){ .club-grid{ gap:18px; } .club-card{ min-height:260px; padding:30px 24px; }
  .club-logo{ width:150px; height:150px; } }
.club-thumb { width:36px; height:36px; border-radius:9px; object-fit:cover; background:var(--surface-3); }

/* =====================================================================
   RESPONSIVE MOBILE (revisione completa) — topbar, drawer, tipografia
   ===================================================================== */
@media (max-width: 860px) {
  /* Topbar che non sfonda MAI: si adatta e manda a capo le azioni se serve */
  .topbar { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
  .topbar > .row { min-width: 0; flex: 1 1 auto; }
  .topbar > .row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .who { gap: 8px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  /* Il nome del locale si tronca con i puntini invece di andare a capo su 4 righe */
  .topbar .who .chip { max-width: 200px; }
  .topbar .who .chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  /* Sfondo scuro cliccabile quando il menu laterale è aperto */
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(4,3,8,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 55; opacity: 0; animation: npFade .18s forwards; }
  body.nav-open { overflow: hidden; }
}
@keyframes npFade { to { opacity: 1; } }

@media (max-width: 600px) {
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.15rem; }
  .stat .value { font-size: 1.6rem; }
  .content { padding: var(--sp-4) var(--sp-3); }
  .topbar { padding: 10px var(--sp-3); }
  .topbar .who .btn { padding: 0 13px; min-height: 42px; font-size: .9rem; }
  .topbar .who .chip { max-width: 42vw; }
  .page-head { gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .card { padding: var(--sp-4); }
  table.data th, table.data td { padding: 11px 12px; }
  /* Tabelle: suggerisci lo scorrimento e non stringere troppo le celle */
  table.data { font-size: .88rem; min-width: 560px; }
  /* Barre di tab/filtri scorrevoli in orizzontale invece di rompere il layout */
  .pill-tabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .row.wrap { gap: var(--sp-2); }
  .row.wrap .input, .row.wrap .select { max-width: 100% !important; flex: 1 1 100%; }
  .pagination { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .topbar .who .chip { max-width: 36vw; }
  .btn { padding: 0 14px; }
  h1 { font-size: 1.25rem; }
}

/* =====================================================================
   FIX DEFINITIVO OVERFLOW — celle griglia/carte che si restringono
   (senza questo, una tabella larga dentro una .card allarga tutta la pagina)
   ===================================================================== */
.grid > * { min-width: 0; }
.card { min-width: 0; }
/* Layout "menu stretto + contenuto" (pagine ruoli): collassa su schermi molto stretti */
.aside-2 { display: grid; grid-template-columns: 240px 1fr; gap: 20px; }
.aside-2 > * { min-width: 0; }
@media (max-width: 720px) { .aside-2 { grid-template-columns: 1fr; } }
.main, .content { min-width: 0; max-width: 100%; }
.table-wrap { max-width: 100%; }
/* la tabella scorre dentro il suo contenitore, non oltre la pagina */
@media (max-width: 600px) { table.data { min-width: 520px; } }

/* ---- Banner modalità DEMO ---- */
.demo-banner{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:9px 16px;background:linear-gradient(90deg,var(--violet-2),var(--fuchsia));color:#fff;font-size:.9rem;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.demo-banner .btn{min-height:36px;padding:0 13px;font-size:.85rem;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);color:#fff}
.demo-banner .btn:hover{background:rgba(255,255,255,.26)}
.demo-banner form{display:inline;margin:0}

/* ---- Contesto locale attivo (sidebar) ---- */
.locale-ctx{margin:2px 0 12px;padding:12px 13px;border-radius:12px;background:var(--surface-3);border:1px solid var(--border-strong)}
.locale-ctx small{color:var(--text-3);font-size:.66rem;text-transform:uppercase;letter-spacing:.12em}
.locale-ctx b{display:block;font-size:1rem;margin-top:2px;line-height:1.2;color:#fff}
.nav-item.is-cta{background:var(--grad);color:#fff;font-weight:700;margin-bottom:6px}
.nav-item.is-cta svg{color:#fff}
.nav-item.is-cta:hover{filter:brightness(1.08);background:var(--grad);color:#fff}

/* =====================================================================
   RESTYLING soft + TEMA CHIARO/SCURO (interruttore).
   Scuro = default (brand notturno). Chiaro = [data-theme="light"].
   Colori brand invariati (viola/fucsia). Tutto a token: vale su ogni pagina.
   ===================================================================== */

/* --- rifiniture morbide condivise (entrambi i temi) --- */
.card { border-radius: var(--r-xl); }
.nav-item { border-radius: 14px; }
.input, .select, textarea.input { border-radius: 14px; }
.btn { border-radius: 14px; }
.stat .value { font-size: 2.05rem; }
.stat { gap: 8px; }
.card.stat { transition: transform var(--tr), box-shadow var(--tr); }
.card.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pill-tabs a.is-active { box-shadow: var(--shadow); }
.avatar, .brand .logo { border-radius: 13px; }
.avatar { border-radius: 50%; }
.topbar { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#themeToggle { min-width: 44px; padding: 0 12px; }

/* --- TEMA CHIARO --- */
[data-theme="light"] {
  --bg:        #eef1f8;
  --bg-2:      #e6e9f4;
  --surface:   #ffffff;
  --surface-2: #f6f7fc;
  --surface-3: #eef1f8;
  --border:        rgba(23,23,54,.09);
  --border-strong: rgba(168,85,247,.30);
  --text:   #171733;
  --text-2: #4b4b66;
  --text-3: #8a8aa2;
  --shadow:    0 12px 30px rgba(40,40,90,.10);
  --shadow-lg: 0 26px 60px rgba(40,40,90,.16);
  --ring: 0 0 0 3px rgba(168,85,247,.28);
  color-scheme: light;
}
[data-theme="light"] body {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(124,58,237,.10), transparent 55%),
    radial-gradient(1000px 600px at -10% 10%, rgba(217,70,239,.07), transparent 50%),
    var(--bg);
}
[data-theme="light"] .sidebar { background: linear-gradient(180deg, #ffffff, #f6f7fc); }
[data-theme="light"] .card { background: var(--surface); }
[data-theme="light"] .topbar { background: rgba(255,255,255,.78); }
[data-theme="light"] .nav-item:hover { background: #f0f2fa; color: var(--text); }
[data-theme="light"] .nav-item.is-active { background: rgba(168,85,247,.10); color: var(--violet-2); }
[data-theme="light"] .nav-item.is-active svg { color: var(--violet-2); }
[data-theme="light"] .pill-tabs a.is-active { background: #fff; color: var(--violet-2); }
[data-theme="light"] .pagination .current { color: #fff; }
[data-theme="light"] .locale-ctx { background: rgba(168,85,247,.08); }
[data-theme="light"] .locale-ctx b { color: var(--violet-2); }
[data-theme="light"] .avatar { color: var(--violet-2); background: rgba(168,85,247,.10); }
[data-theme="light"] .input, [data-theme="light"] .select, [data-theme="light"] textarea.input { background: #fff; }
[data-theme="light"] table.data th { background: var(--surface-2); }
[data-theme="light"] .empty .icon { background: var(--surface-2); }

/* chip/stati leggibili su chiaro */
[data-theme="light"] .chip { color: var(--text-2); background: var(--surface-3); }
[data-theme="light"] .chip.violet  { color:#6b21a8; background:rgba(168,85,247,.12); }
[data-theme="light"] .chip.success { color:#047857; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.30); }
[data-theme="light"] .chip.danger  { color:#b91c1c; background:rgba(239,68,68,.10);  border-color:rgba(239,68,68,.28); }
[data-theme="light"] .chip.warning { color:#92600a; background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.32); }
[data-theme="light"] .chip.muted   { background: var(--surface-2); }
[data-theme="light"] .btn.danger   { color:#b91c1c; background:rgba(239,68,68,.10);  border-color:rgba(239,68,68,.35); }
[data-theme="light"] .btn.success  { color:#047857; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.40); }
[data-theme="light"] .alert.success { background:rgba(16,185,129,.10); }
[data-theme="light"] .alert.warning { background:rgba(245,158,11,.12); }
[data-theme="light"] .alert.error   { background:rgba(239,68,68,.10); }
[data-theme="light"] .alert.info    { background:rgba(56,189,248,.12); }

/* =====================================================================
   RIORGANIZZAZIONE — elementi condivisi (valgono in entrambi i temi)
   ===================================================================== */
.stat .label svg { width: 16px; height: 16px; }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: .84rem; border-radius: 11px; }
.btn.sm svg { width: 16px; height: 16px; }

/* Riquadro "stai gestendo" in cima al menu del locale */
.locale-ctx .ctx-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.locale-ctx .ctx-actions .btn { flex: 1 1 auto; }

/* Intestazione pagina: titolo + riga che spiega a cosa serve */
.page-head .lead { margin: 4px 0 0; color: var(--text-3); max-width: 720px; }
.page-head .head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Schede di sezione (es. Card: Prepara · Elenco · Link NFC) */
.section-tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--bg-2); padding: 5px;
  border-radius: 16px; border: 1px solid var(--border); margin-bottom: var(--sp-5); width: fit-content; max-width: 100%; }
.section-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px;
  font-size: .9rem; font-weight: 600; color: var(--text-2); transition: background var(--tr), color var(--tr); }
.section-tabs a svg { width: 17px; height: 17px; }
.section-tabs a:hover { color: var(--text); background: var(--surface-2); }
.section-tabs a.is-active { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.section-tabs a.is-active svg { color: var(--violet); }
@media (max-width: 600px) { .section-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; } .section-tabs a { white-space: nowrap; } }

/* Percorso guidato (checklist) */
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center;
  padding: 16px 4px; border-top: 1px solid var(--border); }
.step:first-child { border-top: 0; }
.step .num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: var(--surface-3); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); }
.step .num svg { width: 18px; height: 18px; }
.step.done .num { background: rgba(52,211,153,.16); color: var(--success); box-shadow: inset 0 0 0 1px rgba(52,211,153,.4); }
.step.next .num { background: var(--grad); color: #fff; box-shadow: 0 6px 16px rgba(168,85,247,.35); }
.step .txt b { display: block; font-weight: 650; }
.step .txt small { display: block; font-size: .84rem; margin-top: 2px; }
.step.done .txt b { color: var(--text-2); }
.step.locked { opacity: .55; }
.step .opt { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-left: 6px; font-weight: 600; }
@media (max-width: 600px) { .step { grid-template-columns: 36px 1fr; } .step .act { grid-column: 2; } }

/* Fasi della serata (Crea → Prepara → Apri → Chiudi → Report) */
.lifecycle { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 var(--sp-5); color: var(--text-3); font-size: .85rem; }
.lifecycle span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-weight: 600; }
.lifecycle span b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem;
  background: var(--surface-3); color: var(--violet); }
.lifecycle i { color: var(--text-3); font-style: normal; }

/* Scorciatoie (pagina developer) */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.quick { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--border); transition: border-color var(--tr), transform var(--tr); }
.quick:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.quick .ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(168,85,247,.14); color: var(--violet);
  display: grid; place-items: center; flex: 0 0 auto; }
.quick b { display: block; font-size: .95rem; }
.quick small { display: block; font-size: .8rem; }

/* =====================================================================
   TABLET — uso principale del gestionale
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
.toast.warning { border-color: rgba(251,191,36,.55); }

/* Tablet in orizzontale (iPad 1024–1180) e portatili piccoli:
   menu un po' più stretto, più spazio a tabelle e moduli. */
@media (min-width: 861px) and (max-width: 1280px) {
  .app { grid-template-columns: 232px 1fr; }
  .sidebar { padding: var(--sp-4) var(--sp-3); }
  .content { padding: var(--sp-5); }
  .topbar { padding: var(--sp-3) var(--sp-5); }
}

/* Schermi touch: bersagli grandi (min 44px) e feedback al tocco */
@media (pointer: coarse) {
  .btn { min-height: 50px; }
  .btn.sm { min-height: 44px; padding: 0 14px; font-size: .9rem; }
  .nav-item { min-height: 50px; }
  .section-tabs a { padding: 12px 18px; }
  .pagination a, .pagination span { padding: 11px 16px; }
  .input, .select { min-height: 50px; }
  .switch .track { width: 54px; height: 30px; }
  .switch .track::after { width: 24px; height: 24px; }
  .switch input:checked + .track::after { transform: translateX(24px); }
  table.data th, table.data td { padding-top: 15px; padding-bottom: 15px; }
  .btn:active, .nav-item:active, .quick:active { transform: scale(.97); }
}
/* Sui touch l'effetto "hover" resta bloccato dopo il tocco: niente sollevamenti */
@media (hover: none) {
  .card.stat:hover, .quick:hover, .club-card:hover { transform: none; box-shadow: var(--shadow); }
}
/* Avvisi: su tablet in verticale in alto, per non coprire i pulsanti in basso */
@media (max-width: 880px) {
  #toasts { top: 76px; bottom: auto; left: 16px; right: 16px; }
  .toast { max-width: none; }
}

/* tabella: ombre di scorrimento in versione chiara */
[data-theme="light"] .table-wrap {
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 26px 100% no-repeat,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 26px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(40,40,90,.14), rgba(0,0,0,0)) left center / 13px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(40,40,90,.14), rgba(0,0,0,0)) right center / 13px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* Riorganizzazione: rifiniture tema chiaro */
[data-theme="light"] .section-tabs a.is-active { background: #fff; color: var(--violet-2); }
[data-theme="light"] .section-tabs a.is-active svg { color: var(--violet-2); }
[data-theme="light"] .quick .ic, [data-theme="light"] .lifecycle span b { color: var(--violet-2); }

/* =====================================================================
   DASHBOARD — serata in corso, report serata e panoramica generale
   ===================================================================== */
.dash-top { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--sp-4); align-items: start; }
.dash-grid2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--sp-4); align-items: start; }
.card.kpi-hero { background: var(--grad); color: #fff; border: none; position: relative; overflow: hidden; box-shadow: 0 18px 40px rgba(168,85,247,.35); }
.kpi-hero .ico { position: absolute; right: 20px; top: 20px; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.kpi-hero .lbl { opacity: .92; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.kpi-hero .val { font-size: 2.6rem; font-weight: 760; letter-spacing: -.02em; margin: 6px 0; color: #fff; }
.kpi-hero .sub { opacity: .9; font-size: .86rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); }
.kpi-tile { position: relative; display: flex; flex-direction: column; gap: 4px; }
.kpi-ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(168,85,247,.14); display: grid; place-items: center; color: var(--violet); margin-bottom: 6px; }
.kpi-tile .val { font-size: 1.7rem; font-weight: 730; letter-spacing: -.02em; }
.kpi-tile .lbl { color: var(--text-3); font-size: .82rem; }
.kpi-badge { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.kpi-tile .kpi-badge { position: absolute; right: 0; top: 0; }
.kpi-badge.up { background: rgba(16,185,129,.16); color: #10b981; }
.kpi-badge.down { background: rgba(248,113,113,.16); color: #ef4444; }
.kpi-badge.flat { background: var(--surface-3); color: var(--text-3); }
.kpi-hero .kpi-badge { background: rgba(255,255,255,.24); color: #fff; }
.donut-card h3 { margin-bottom: 2px; }
.donut-wrap { position: relative; display: grid; place-items: center; min-height: 190px; margin-top: 6px; }
.donut-center { position: absolute; text-align: center; pointer-events: none; }
.donut-center .n { font-size: 1.5rem; font-weight: 760; letter-spacing: -.02em; }
.donut-center .t { color: var(--text-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.cat-legend { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.cat-legend .r { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; gap: 10px; }
.cat-legend .k { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cat-legend .k span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-dot { width: 11px; height: 11px; border-radius: 4px; flex: 0 0 auto; }
.cat-legend b { font-variant-numeric: tabular-nums; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h3 { margin: 0; }

/* Panoramica: riquadro "prossima serata / serata in corso" */
.next-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.next-card .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(168,85,247,.14); color: var(--violet); }
.next-card.live .ic { background: rgba(52,211,153,.16); color: var(--success); }
.next-card .txt { flex: 1 1 260px; min-width: 0; }
.next-card .txt b { display: block; font-size: 1.05rem; }
.next-card .txt small { display: block; color: var(--text-3); margin-top: 2px; }
.next-card .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.next-card .todo { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.next-card .todo a { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .9rem; }
.next-card .todo a svg { width: 16px; height: 16px; color: #fbbf24; flex: 0 0 auto; }

/* Barre orizzontali (metodi di pagamento, giorni della settimana) */
.hbars { display: flex; flex-direction: column; gap: 14px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 128px) 1fr auto; gap: 12px; align-items: center; font-size: .9rem; }
.hbar .name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hbar .name svg { width: 16px; height: 16px; color: var(--violet); flex: 0 0 auto; }
.hbar .name small { display: block; color: var(--text-3); font-size: .76rem; }
.hbar .track { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.hbar .fill { height: 100%; border-radius: inherit; background: var(--grad); min-width: 4px; }
.hbar b { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.pill-tabs a { display: inline-flex; align-items: center; }
@media (pointer: coarse) { .pill-tabs a { min-height: 44px; padding: 0 18px; } }
@media (max-width: 980px) { .dash-top, .dash-grid2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .kpi-row { grid-template-columns: 1fr; } .kpi-hero .val { font-size: 2.1rem; } }
@media print { .next-card, .pill-tabs, .section-tabs { display: none; } }