/* ===== Plancia Terrazza — app collegata. Stessa lingua visiva del prototipo. ===== */
:root{
  --nav:#212a3b; --nav-muted:#8a94a8; --nav-active:#ffffff;
  --amber:#F4A62A; --amber-d:#E0951A; --amber-soft:#FDF1D8; --amber-line:#F1CE85;
  --green:#46B84E; --green-d:#3AA342; --green-soft:#E7F6E9;
  --orange:#F26A2E; --red:#D8503F; --red-soft:#FBE7E3;
  --blue:#3E7CB1; --blue-soft:#E3EEF6;
  --ink:#1f242c; --ink-soft:#59616e; --muted:#98a0ac; --line:#E6E8ED; --line-soft:#EFF1F4;
  --bg:#ffffff; --bg-2:#F6F7F9;
  --sh:0 1px 2px rgba(20,28,40,.06),0 4px 14px rgba(20,28,40,.06);
  --sh-lg:0 18px 50px rgba(20,28,40,.22);
}
:root:not([data-theme="light"]){ color-scheme:dark light; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --nav:#0c1119; --nav-muted:#7c8698;
    --amber:#F4A62A; --amber-d:#F6B94E; --amber-soft:rgba(244,166,42,.16); --amber-line:#5a4a24;
    --green:#57c65f; --green-d:#77d67f; --red:#E4685A; --red-soft:rgba(216,80,63,.22);
    --blue:#6aa6d8; --blue-soft:rgba(62,124,177,.22);
    --ink:#e8ecf3; --ink-soft:#b0b9c7; --muted:#7e8797; --line:#2b3340; --line-soft:#232a34;
    --bg:#151b23; --bg-2:#1d242e;
    --sh:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --nav:#0c1119; --nav-muted:#7c8698;
  --amber:#F4A62A; --amber-d:#F6B94E; --amber-soft:rgba(244,166,42,.16); --amber-line:#5a4a24;
  --green:#57c65f; --green-d:#77d67f; --red:#E4685A; --red-soft:rgba(216,80,63,.22);
  --blue:#6aa6d8; --blue-soft:rgba(62,124,177,.22);
  --ink:#e8ecf3; --ink-soft:#b0b9c7; --muted:#7e8797; --line:#2b3340; --line-soft:#232a34;
  --bg:#151b23; --bg-2:#1d242e;
  --sh:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg-2);color:var(--ink);
  font-family:"Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}

/* ---------- topbar ---------- */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;
  background:var(--nav);color:#fff;padding:11px 16px;box-shadow:var(--sh)}
.top .brand{font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:9px}
.top .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(244,166,42,.22)}
.top .sub{color:var(--nav-muted);font-weight:600;font-size:12.5px}
.top .spacer{flex:1}
.live{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--nav-muted)}
.live .led{width:8px;height:8px;border-radius:50%;background:var(--muted);transition:background .2s}
.live.on .led{background:var(--green);box-shadow:0 0 0 4px rgba(70,184,78,.22)}
.live.on{color:#dfe6f0}
.whoami{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#e7ecf4}
.whoami .role{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  background:rgba(255,255,255,.12);padding:2px 8px;border-radius:20px;color:#fff}
.linkbtn{background:none;border:none;color:var(--nav-muted);font-weight:700;font-size:12.5px}
.linkbtn:hover{color:#fff;text-decoration:underline}

/* ---------- nav ---------- */
.nav{display:flex;gap:4px;margin-left:8px}
.navb{background:transparent;border:none;color:var(--nav-muted);font-weight:800;font-size:13px;
  padding:7px 13px;border-radius:10px;display:flex;align-items:center;gap:7px}
.navb:hover{color:#fff;background:rgba(255,255,255,.06)}
.navb.on{color:#fff;background:rgba(255,255,255,.12)}
.badge{background:var(--amber);color:#3a2a06;font-size:11px;font-weight:900;border-radius:20px;
  min-width:19px;height:19px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:640px){.top .brand .sub{display:none}.navb{padding:7px 10px}}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:18px 16px 90px}
.daybar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.daybar h1{font-size:20px;margin:0;font-weight:900;letter-spacing:-.2px}
.daybar .date{color:var(--ink-soft);font-weight:700}
.chip{font-size:11px;font-weight:800;border-radius:20px;padding:3px 10px;background:var(--bg);border:1px solid var(--line);color:var(--ink-soft)}
.chip.closed{background:var(--red-soft);border-color:transparent;color:var(--red)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stat{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:13px 15px;box-shadow:var(--sh)}
.stat .k{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.stat .v{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;margin-top:3px}
.stat .v small{font-size:13px;font-weight:700;color:var(--muted)}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

.cols{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr}}

.card{background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);overflow:hidden}
.card>h2{margin:0;padding:14px 16px;font-size:14px;font-weight:800;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:9px}
.card>h2 .count{font-size:11.5px;font-weight:800;color:var(--muted);background:var(--bg-2);border-radius:20px;padding:2px 9px}

/* ---------- reservations list ---------- */
.rlist{list-style:none;margin:0;padding:6px}
.rrow{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;cursor:default}
.rrow+.rrow{border-top:1px solid var(--line-soft)}
.rrow .time{font-weight:900;font-variant-numeric:tabular-nums;font-size:15px;width:52px;flex:none}
.rrow .who{flex:1;min-width:0}
.rrow .who .nm{font-weight:800;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rrow .who .meta{font-size:12px;color:var(--ink-soft);margin-top:1px}
.pill{font-size:10.5px;font-weight:800;border-radius:20px;padding:2px 8px;text-transform:uppercase;letter-spacing:.3px}
.pill.cena{background:var(--amber-soft);color:var(--amber-d)}
.pill.drink{background:var(--blue-soft);color:var(--blue)}
.pill.vip{background:var(--amber);color:#3a2a06}
.pill.seat{background:var(--green-soft);color:var(--green-d)}
.pill.rich{background:var(--bg-2);color:var(--muted)}
.pill.tav{background:var(--bg-2);color:var(--ink-soft);border:1px solid var(--line)}
.rrow .act{display:flex;gap:6px;flex:none}
.btn{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;
  padding:7px 12px;font-weight:800;font-size:12.5px;white-space:nowrap}
.btn:hover{border-color:var(--amber-line)}
.btn.p{background:var(--amber);border-color:var(--amber-d);color:#3a2a06}
.btn.p:hover{background:var(--amber-d)}
.btn.g{background:var(--green);border-color:var(--green-d);color:#08320d}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:default}
.empty{padding:26px 16px;text-align:center;color:var(--muted);font-weight:700}

/* ---------- sala map ---------- */
.salawrap{padding:12px}
.salagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.tav{border:1.5px solid var(--line);border-radius:14px;padding:11px 10px;background:var(--bg);text-align:left;
  min-height:74px;display:flex;flex-direction:column;gap:3px;transition:transform .05s}
.tav:active{transform:scale(.98)}
.tav .code{font-weight:900;font-size:16px}
.tav .lvl{font-size:10.5px;color:var(--muted);font-weight:700}
.tav .st{font-size:11px;font-weight:800;margin-top:auto}
.tav.free{border-color:var(--green);background:var(--green-soft)}
.tav.free .st{color:var(--green-d)}
.tav.occ{border-color:var(--red);background:var(--red-soft)}
.tav.occ .st{color:var(--red)}
.tav.blk{border-color:var(--muted);background:var(--bg-2);opacity:.7}
.tav.blk .st{color:var(--muted)}
.tav.sel{outline:3px solid var(--amber);outline-offset:1px}

/* ---------- form / modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(15,20,28,.5);display:flex;align-items:center;justify-content:center;
  padding:16px;z-index:40;opacity:0;pointer-events:none;transition:opacity .15s}
.scrim.open{opacity:1;pointer-events:auto}
.modal{width:min(460px,100%);background:var(--bg);border-radius:18px;box-shadow:var(--sh-lg);overflow:hidden;
  max-height:90vh;display:flex;flex-direction:column}
.modal h3{margin:0;padding:16px 18px;font-size:15px;font-weight:900;border-bottom:1px solid var(--line-soft)}
.modal .body{padding:16px 18px;overflow:auto}
.modal .foot{padding:13px 18px;border-top:1px solid var(--line-soft);display:flex;gap:9px;justify-content:flex-end}
label.f{display:block;margin-bottom:12px}
label.f .lab{font-size:12px;font-weight:800;color:var(--ink-soft);margin-bottom:5px;display:block}
.tin{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;
  background:var(--bg);color:var(--ink);font-family:inherit}
.tin:focus{outline:2px solid var(--amber);border-color:var(--amber)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg{display:flex;gap:8px}
.seg button{flex:1;border:1.5px solid var(--line);background:var(--bg);border-radius:10px;padding:9px;font-weight:800;color:var(--ink-soft)}
.seg button.on{border-color:var(--amber);background:var(--amber-soft);color:var(--amber-d)}
.err{color:var(--red);font-weight:700;font-size:12.5px;margin-top:4px;min-height:16px}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;
  background:radial-gradient(1200px 500px at 50% -10%,rgba(244,166,42,.10),transparent),var(--bg-2)}
.loginbox{width:min(420px,100%);background:var(--bg);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--sh-lg);overflow:hidden}
.loginhead{padding:22px 22px 8px}
.loginhead .brand{font-weight:900;font-size:20px;display:flex;align-items:center;gap:10px}
.loginhead .brand .dot{width:11px;height:11px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(244,166,42,.22)}
.loginhead .sub{color:var(--ink-soft);font-weight:700;font-size:13px;margin-top:5px}
.tabs{display:flex;gap:8px;padding:14px 22px 0}
.tab{flex:1;border:none;background:var(--bg-2);border-radius:11px 11px 0 0;padding:11px;font-weight:800;color:var(--ink-soft)}
.tab.on{background:var(--bg);color:var(--ink);box-shadow:inset 0 -3px 0 var(--amber)}
.loginbody{padding:18px 22px 24px}
.staffgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.staffbtn{border:1.5px solid var(--line);background:var(--bg);border-radius:14px;padding:15px 12px;text-align:left;font-weight:800}
.staffbtn:hover{border-color:var(--amber-line)}
.staffbtn .r{font-size:11px;color:var(--muted);font-weight:700;margin-top:2px}
.staffbtn .lock{float:right;color:var(--muted)}

/* ---------- toast ---------- */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--nav);color:#fff;padding:11px 16px;border-radius:12px;font-weight:700;font-size:13px;
  box-shadow:var(--sh-lg);max-width:90vw;animation:tin .2s ease}
.toast.warn{background:var(--red)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.fab{position:fixed;right:20px;bottom:22px;z-index:20;background:var(--amber);color:#3a2a06;border:none;
  border-radius:16px;padding:14px 18px;font-weight:900;font-size:14px;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:8px}
.fab:hover{background:var(--amber-d)}

/* ---------- da gestire ---------- */
.gestcols{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
@media(max-width:900px){.gestcols{grid-template-columns:1fr}}
.ecard{border:1px solid var(--line);border-left-width:4px;border-radius:14px;background:var(--bg);
  padding:13px 15px;margin:10px}
.ecard.da{border-left-color:var(--amber)}
.ecard.corso{border-left-color:var(--blue)}
.ecard.fatta{border-left-color:var(--green);opacity:.85}
.ecard .ehead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ecard .enm{font-weight:900;font-size:15px}
.est{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;border-radius:20px;padding:2px 9px}
.est.da{background:var(--amber-soft);color:var(--amber-d)}
.est.corso{background:var(--blue-soft);color:var(--blue)}
.est.fatta{background:var(--green-soft);color:var(--green-d)}
.ereason{font-size:11px;font-weight:800;color:var(--ink-soft);background:var(--bg-2);border-radius:20px;padding:2px 9px}
.ecard .emeta{font-size:12.5px;color:var(--ink-soft);margin-top:5px}
.ecard .esum{font-size:13.5px;color:var(--ink);margin-top:7px;line-height:1.45}
.ecard .ereply{font-size:12.5px;color:var(--ink-soft);background:var(--bg-2);border-radius:10px;padding:8px 11px;margin-top:9px}
.ecard .ereply b{color:var(--ink)}
.ecard .eact{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.gest-empty{padding:26px 16px;text-align:center;color:var(--muted);font-weight:700}
.replybox{width:100%;min-height:70px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-family:inherit;font-size:14px;background:var(--bg);color:var(--ink);resize:vertical}
.replybox:focus{outline:2px solid var(--amber);border-color:var(--amber)}