/* =====================================================================
   App sala - interfaccia neutra, giorno e notte.
   Il colore e' riservato a cio' che richiede attenzione:
   rosso = in ritardo / urgente, ambra = da fare, blu = selezione.
   ===================================================================== */
body {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-ui);
  /* giorno */
  --bg: #f2f2f4; --surface: #ffffff; --surface-2: #f7f7f8; --surface-3: #ebebee;
  --line: rgba(0, 0, 0, .08); --line-2: rgba(0, 0, 0, .14);
  --text: #18181b; --muted: #63636c; --faint: #9b9ba4;
  --primary-bg: #18181b; --primary-ink: #ffffff;
  --late: #d92d20; --late-bg: #fdecea; --late-ink: #8f1d14;
  --todo: #c26a00; --todo-bg: #fff3dc; --todo-ink: #7a4300;
  --ok: #1f8a4c; --ok-bg: #e5f5ec;
  --sel: #2563eb; --sel-ink: #ffffff;
  /* tavoli */
  --t-free: #ffffff; --t-free-line: #c8c5bf; --t-free-ink: #3f3f46;
  --t-wait: #e8ebe6; --t-wait-line: #a5aea2; --t-wait-ink: #2a3028;
  --t-seat: #d8d4ce; --t-seat-line: #b0ab9f; --t-seat-ink: #3d3830;
  --t-next: #c08830;
  --room: #fafafa; --room-line: #dedee3;
  --shadow: 0 12px 40px rgba(0, 0, 0, .14);
  background: var(--bg); color: var(--text); font-family: var(--font-ui);
  overscroll-behavior: none;
}
body[data-theme="dark"] {
  --bg: #0e0e10; --surface: #17171a; --surface-2: #1f1f23; --surface-3: #2a2a2f;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
  --text: #f2f2f4; --muted: #a0a0aa; --faint: #6c6c76;
  --primary-bg: #f2f2f4; --primary-ink: #111113;
  --late: #ff6a5c; --late-bg: rgba(255, 90, 72, .14); --late-ink: #ffb4ab;
  --todo: #f5b23d; --todo-bg: rgba(245, 178, 61, .14); --todo-ink: #ffd99a;
  --ok: #4cc27f; --ok-bg: rgba(76, 194, 127, .14);
  --sel: #4b83f5; --sel-ink: #ffffff;
  --t-free: #1c1c20; --t-free-line: #4a4a52; --t-free-ink: #c7c7cf;
  --t-wait: #252e24; --t-wait-line: #4a5e48; --t-wait-ink: #ccd8c8;
  --t-seat: #323028; --t-seat-line: #504e44; --t-seat-ink: #c4c0b4;
  --t-next: #c89030;
  --room: #141417; --room-line: #2c2c32;
  --shadow: 0 16px 50px rgba(0, 0, 0, .6);
}

html, body { height: 100%; }
body { font-size: 16px; line-height: 1.35; -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 var(--ring); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ============================================================ struttura */
.shell { height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.bar { min-width: 0; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--line); background: var(--surface); position: relative; z-index: 3; }
.place { display: grid; line-height: 1.1; flex: 0 0 auto; }
.place b { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.place small { font-size: 12px; color: var(--muted); }
.bar .spacer { flex: 1; }
.bar .title { font-size: 20px; font-weight: 650; }
.view { overflow: hidden; position: relative; min-height: 0; }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; height: 100%; }

.nav { display: flex; gap: 2px; background: var(--surface-3); padding: 3px; border-radius: 12px; }
.nav button { border: 0; background: none; height: 36px; padding: 0 14px; border-radius: 9px; font-size: 14.5px; font-weight: 550; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.nav button[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.badge { min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--todo); color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
body[data-theme="dark"] .badge { color: #1a1206; }
.badge.late { background: var(--late); color: #fff; }
.badge:empty { display: none; }
.me { border: 1px solid var(--line-2); background: none; height: 38px; min-width: 38px; padding: 0 12px; border-radius: 10px; color: var(--text); font-size: 14px; font-weight: 550; }
.clk { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; padding: 5px 10px; border-radius: 10px; background: var(--surface-3); flex: 0 0 auto; color: var(--text); }

.datenav { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-3); border-radius: 12px; padding: 3px; position: relative; }
.datenav .arrow { width: 36px; height: 36px; border: 0; background: none; border-radius: 9px; color: var(--text); font-size: 20px; line-height: 1; }
.datenav .arrow:active { background: var(--surface); }
.datenav .lbl { border: 0; background: none; height: 36px; padding: 0 8px; color: var(--text); font-size: 14.5px; font-weight: 550; white-space: nowrap; }
.datenav .lbl b { font-weight: 700; margin-right: 6px; }
.datenav .lbl.past { color: var(--muted); }
.datenav input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.seg { display: inline-flex; background: var(--surface-3); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; height: 36px; padding: 0 13px; border-radius: 9px; color: var(--muted); font-size: 14.5px; font-weight: 550; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.seg button small { font-size: 12.5px; color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.seg button[aria-pressed="true"] small { color: var(--muted); }
.seg button .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--late); animation: blink 1.2s infinite; }

.tabbar { display: none; }

/* ============================================================ bottoni */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: 15.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .1s; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--primary-bg); color: var(--primary-ink); border-color: transparent; }
.btn.todo { background: var(--todo); color: #fff; border-color: transparent; }
body[data-theme="dark"] .btn.todo { color: #1a1206; }
.btn.late { background: var(--late); color: #fff; border-color: transparent; }
.btn.ok { background: var(--ok); color: #fff; border-color: transparent; }
.btn.danger { color: var(--late); }
.btn.ghost { background: none; }
.btn.sm { height: 38px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.btn.xs { height: 34px; padding: 0 11px; border-radius: 9px; font-size: 13.5px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > .btn { flex: 1 1 auto; }

.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.chip.warn { background: var(--todo-bg); color: var(--todo-ink); }
.chip.st-nuova { background: var(--todo-bg); color: var(--todo-ink); }
.chip.st-confermata { background: var(--t-wait); color: var(--t-wait-ink); }
.chip.st-arrivata { background: var(--t-seat); color: var(--t-seat-ink); }
.chip.st-alternativa { background: var(--surface-3); color: var(--text); }
.chip.st-noshow, .chip.st-rifiutata, .chip.st-annullata { background: var(--late-bg); color: var(--late-ink); }
.chip.late { background: var(--late); color: #fff; }

.toggle { position: relative; width: 50px; height: 30px; flex: 0 0 auto; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.toggle span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); transition: background .2s; }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s var(--ease); }
.toggle input:checked + span { background: var(--late); }
.toggle.pos input:checked + span { background: var(--ok); }
.toggle input:checked + span::after { transform: translateX(20px); }

/* ============================================================ accesso */
.login { height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--bg); color: var(--text); }
.login-card { width: min(400px, 100%); display: grid; gap: 22px; justify-items: center; text-align: center; }
.login .place b { font-size: 22px; }
.login h1 { margin: 0; font-size: 17px; font-weight: 550; color: var(--muted); }
.profiles { display: flex; gap: 12px; }
.profile { width: 124px; height: 108px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); display: grid; place-items: center; align-content: center; gap: 8px; font-size: 15.5px; font-weight: 600; }
.profile .ini { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: 18px; font-weight: 700; }
.profile[aria-pressed="true"] { border-color: var(--sel); box-shadow: inset 0 0 0 1px var(--sel); }
.pin { display: flex; gap: 14px; height: 16px; }
.pin i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--faint); }
.pin i.on { background: var(--text); border-color: var(--text); }
.pin.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 74px); gap: 12px; }
.keypad button { height: 74px; border-radius: 50%; border: 0; background: var(--surface); color: var(--text); font-size: 28px; font-weight: 400; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.keypad button:active { background: var(--surface-3); }
.keypad .fn { font-size: 14px; color: var(--muted); background: none; box-shadow: none; }
.login .hint { font-size: 13px; color: var(--faint); }

/* ============================================================ pannello priorità */
.todo-box { display: grid; gap: 8px; }
.todo-head { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 2px 2px; }
.todo-head h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.todo-head span { font-size: 13px; color: var(--faint); }
.calm { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 14.5px; }
.calm::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.alert { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: left; color: var(--text); position: relative; overflow: hidden; }
.alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c, var(--line-2)); }
.alert .lab { font-size: 12.5px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; color: var(--c, var(--muted)); }
.alert .who { font-size: 16.5px; font-weight: 650; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert .sub { font-size: 13.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert .acts { display: flex; gap: 6px; }
.alert.late { --c: var(--late); --ring: var(--late); background: var(--late-bg); border-color: transparent; animation: ring 1.6s infinite; }
.alert.late .lab { animation: blink 1.2s infinite; }
.alert.todo { --c: var(--todo); --ring: var(--todo); background: var(--todo-bg); border-color: transparent; animation: ring 1.6s infinite; }
.alert.todo .lab { animation: blink 1.2s infinite; }
.alert.req { --c: var(--todo); }
.alert.soon { --c: var(--t-wait-line); }
.alert > div { min-width: 0; }
.alert.late { grid-template-columns: 1fr; }
.alert.late .acts .btn.late { flex: 1; }

/* ============================================================ richieste */
.req { display: grid; grid-template-columns: minmax(330px, 390px) 1fr; height: 100%; }
.req-list { border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 12px 40px; background: var(--bg); }
.req-detail { overflow-y: auto; padding: 24px 30px 40px; background: var(--surface); }
.sec-title { margin: 18px 4px 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.sec-title:first-child { margin-top: 4px; }
.card { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; color: var(--text); }
.card[aria-current="true"] { border-color: var(--sel); box-shadow: inset 0 0 0 1px var(--sel); }
.card .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card .name { font-size: 17px; font-weight: 650; }
.card .age { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.card .age.late { color: #fff; background: var(--late); padding: 2px 7px; border-radius: 6px; }
.card .what { margin-top: 3px; font-size: 14.5px; }
.card .what b { font-weight: 650; }
.card .chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.card .note { margin-top: 6px; font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.new { box-shadow: inset 4px 0 0 var(--todo); }
.card.new[aria-current="true"] { box-shadow: inset 4px 0 0 var(--todo), inset 0 0 0 1px var(--sel); }
.card.overdue { box-shadow: inset 4px 0 0 var(--late); }
.empty { padding: 44px 20px; text-align: center; color: var(--muted); }
.empty .t { font-size: 18px; font-weight: 650; color: var(--text); margin-bottom: 4px; }

.detail-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.detail-head h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.detail-head .sub { margin-top: 8px; color: var(--muted); font-size: 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0; }
.fact { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.fact .k { font-size: 12px; font-weight: 600; color: var(--muted); }
.fact .v { margin-top: 2px; font-size: 18px; font-weight: 650; }
.fact .v small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.callout { border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-size: 15px; line-height: 1.4; background: var(--surface-2); border: 1px solid var(--line); }
.callout .k { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.callout.warn { background: var(--todo-bg); border-color: transparent; }
.callout.warn .k { color: var(--todo-ink); }
.callout.danger { background: var(--late-bg); border-color: transparent; }
.callout.danger .k { color: var(--late-ink); }
.avail { margin: 18px 0; }
.avail h3, .block-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.meter { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; margin: 7px 0; font-size: 14.5px; }
.meter .track { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.meter .fill { height: 100%; border-radius: 99px; background: var(--muted); }
.meter.full .fill { background: var(--late); }
.meter .val { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 92px; text-align: right; }
.meter.off { opacity: .45; }
.actions { display: grid; gap: 8px; margin-top: 20px; }
.actions .row .btn { flex: 1; }

/* ============================================================ serata */
.night { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: 100%; }
.map-pane { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; }
.map-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px 0; flex-wrap: wrap; }
.legend { display: flex; gap: 12px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 13px; height: 13px; border-radius: 4px; background: var(--t-free); border: 1px solid var(--t-free-line); }
.legend i.w { background: var(--t-wait); border-color: var(--t-wait-line); }
.legend i.s { background: var(--t-seat); border-color: var(--t-seat-line); }
.legend i.l { background: var(--late); border-color: var(--late); }
.legend i.al { width: 9px; height: 9px; border-radius: 50%; background: var(--todo); border: 0; }
.legend i.nx { background: var(--t-seat); border: 2px solid var(--t-next); }
.map-wrap { min-height: 0; min-width: 0; overflow: auto; padding: 8px 16px 16px; display: grid; place-items: start center; }
.map-wrap svg { width: 100%; height: 100%; max-height: 100%; display: block; touch-action: manipulation; }
.side { border-left: 1px solid var(--line); overflow-y: auto; padding: 14px 14px 40px; background: var(--bg); display: grid; align-content: start; gap: 14px; }
.summary { display: flex; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.summary span { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.summary b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.side .row .btn { flex: 1; }
.fullrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.fullrow:last-child { border-bottom: 0; }
.fullrow small { display: block; font-size: 12.5px; color: var(--muted); }
.panel-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 2px 14px; }
details.panel-box summary { list-style: none; padding: 12px 0; font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; cursor: pointer; }
details.panel-box summary::-webkit-details-marker { display: none; }
details.panel-box summary span { color: var(--muted); font-weight: 500; font-size: 14px; }
details.panel-box summary span.on { color: var(--late); font-weight: 700; }
.blist { display: grid; gap: 6px; }
.bitem { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 12px; padding: 8px 8px 8px 12px; min-height: 54px; cursor: pointer; }
.bitem .time { font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 650; }
.bitem .who { min-width: 0; }
.bitem .who b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bitem .who small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bitem .tab { font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 700; padding: 4px 8px; border-radius: 7px; background: var(--t-wait); color: var(--t-wait-ink); white-space: nowrap; }
.bitem.st-arrivata .tab { background: var(--t-seat); color: var(--t-seat-ink); }
.bitem.st-arrivata .time { color: var(--muted); }
.bitem.st-conclusa, .bitem.st-noshow, .bitem.st-annullata { opacity: .5; }
.bitem.st-conclusa .tab, .bitem.st-noshow .tab, .bitem.st-annullata .tab { background: var(--surface-3); color: var(--muted); }
.bitem .flag { width: 8px; height: 8px; border-radius: 50%; background: var(--todo); display: inline-block; margin-left: 6px; vertical-align: 2px; }
.bitem .q { min-width: 0; }
.bitem.is-late { border-color: var(--late); background: var(--late-bg); }
.bitem.is-late .time { color: var(--late); }

/* pianta SVG */
.room { fill: var(--room); stroke: var(--room-line); stroke-width: .03; }
.room.off { fill: url(#hatch); }
.area-label { fill: var(--muted); font-family: var(--font-ui); font-size: .28px; font-weight: 700; letter-spacing: .02px; text-transform: uppercase; }
.area-label.off { fill: var(--late); }
.tv { cursor: pointer; }
.tv .shape { fill: var(--t-free); stroke: var(--t-free-line); stroke-width: .03; pointer-events: all; }
.tv .n { fill: var(--t-free-ink); font-size: .28px; font-family: var(--font-ui); font-weight: 650; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.tv .p { fill: var(--faint); font-size: .17px; font-family: var(--font-ui); text-anchor: middle; pointer-events: none; }
.tv.off { opacity: .25; pointer-events: none; }
.tv.busy .shape { fill: none; stroke: var(--line-2); }
.tv.busy .n { fill: currentColor; opacity: .5; font-size: .17px; dominant-baseline: alphabetic; text-anchor: end; }
.tv.busy.st-confermata { color: var(--t-wait-ink); }
.tv.busy.st-arrivata { color: var(--t-seat-ink); }
.bk .blk { stroke-width: .03; }
.bk.st-confermata .blk { fill: var(--t-wait); stroke: var(--t-wait-line); }
.bk.st-confermata { color: var(--t-wait-ink); }
.bk.st-arrivata .blk { fill: var(--t-seat); stroke: var(--t-seat-line); }
.bk.st-arrivata { color: var(--t-seat-ink); }
.bk .nm { fill: currentColor; font-family: var(--font-ui); font-weight: 700; font-size: .2px; text-anchor: middle; pointer-events: none; }
.bk .ps { fill: currentColor; opacity: .8; font-family: var(--font-ui); font-size: .17px; text-anchor: middle; pointer-events: none; font-variant-numeric: tabular-nums; }
.bk .al { fill: var(--todo); }
.bk .nx { fill: var(--t-next); }
.bk.late .blk { fill: var(--late); stroke: var(--late); animation: blink 1.2s infinite; }
.bk.late { color: #fff; }
.tv.busy.late { color: #fff; }
/* assegnazione */
.assign .tv.free .shape { stroke: var(--sel); stroke-width: .04; stroke-dasharray: .12 .07; }
.assign .tv.pref .shape { fill: color-mix(in srgb, var(--sel) 8%, var(--t-free)); }
.assign .tv.sel .shape { fill: var(--sel); stroke: var(--sel); stroke-dasharray: none; }
.assign .tv.sel .n { fill: var(--sel-ink); }
.assign .tv.sel .p { fill: var(--sel-ink); opacity: .8; }
.assign .bk { opacity: .45; }
.assign .bk.late { animation: none; }

.unassigned-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--todo); color: #fff; font-weight: 700; font-size: 14px; --ring: var(--todo); animation: ring 1.6s infinite; }
body[data-theme="dark"] .unassigned-pill { color: #1a1206; }

/* ============================================================ numeri e impostazioni */
.page { max-width: 1040px; margin: 0 auto; padding: 22px 20px 60px; }
.page h2 { font-size: 26px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 4px; }
.page .lead { color: var(--muted); margin: 0 0 18px; max-width: 70ch; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.stat .v { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 16px; font-weight: 600; }
.stat .k { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.hbar { display: grid; grid-template-columns: 92px 1fr 70px; gap: 12px; align-items: center; margin: 9px 0; font-size: 14.5px; }
.hbar .track { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 99px; background: var(--text); opacity: .75; }
.hbar .val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 170px; margin-top: 8px; }
.col { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; text-align: center; font-size: 12.5px; color: var(--muted); }
.col .stack { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.col .s1 { background: var(--muted); border-radius: 0 0 5px 5px; }
.col .s2 { background: var(--t-wait-line); border-radius: 5px 5px 0 0; }
.col .s1:only-child, .col .s2:only-child { border-radius: 5px; }
.keyline { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin-top: 10px; flex-wrap: wrap; }
.keyline i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row .t { font-weight: 600; }
.set-row .d { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-3); border-radius: 12px; padding: 3px; }
.stepper button { width: 38px; height: 38px; border-radius: 9px; border: 0; background: none; color: var(--text); font-size: 20px; }
.stepper button:active { background: var(--surface); }
.stepper output { min-width: 34px; text-align: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.days, .pills { display: flex; gap: 6px; flex-wrap: wrap; }
.days button, .pills button { height: 40px; min-width: 50px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: 14.5px; font-weight: 550; text-transform: none; font-variant-numeric: tabular-nums; }
.days button { text-transform: capitalize; }
.days button[aria-pressed="true"] { background: var(--late); border-color: transparent; color: #fff; }
.pills button[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-ink); border-color: transparent; }
.pills button:disabled { opacity: .35; }
.links { display: grid; gap: 8px; }
.link-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.link-row code { font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

/* ============================================================ sheet */
#overlay:empty { display: none; }
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 24px; animation: fade .15s ease; }
.sheet { width: min(620px, 100%); max-height: min(88dvh, 900px); overflow-y: auto; background: var(--surface); color: var(--text); border-radius: 20px; box-shadow: var(--shadow); padding: 20px 22px 22px; animation: rise .2s var(--ease); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 6px; }
.sheet-head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.sheet-head .sub { color: var(--muted); font-size: 14px; margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface-3); color: var(--text); font-size: 20px; line-height: 1; flex: 0 0 auto; }
.field { display: grid; gap: 6px; margin: 12px 0; }
.field label { font-size: 13px; font-weight: 650; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 11px; padding: 11px 13px; font-size: 16px; min-height: 46px; color: var(--text); }
.field textarea { min-height: 140px; line-height: 1.45; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sel) 20%, transparent); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* assegnazione a schermo intero */
.assign-screen { position: fixed; inset: 0; z-index: 15; background: var(--bg); display: grid; grid-template-rows: auto auto 1fr auto; animation: fade .12s ease; }
.assign-head { display: flex; align-items: center; gap: 14px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.assign-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.assign-head .sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.assign-head .grow { flex: 1; min-width: 0; }
.counter { font-size: 15px; font-weight: 700; padding: 9px 13px; border-radius: 11px; background: var(--surface-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter.ok { background: var(--sel); color: var(--sel-ink); }
.counter.short { background: var(--todo-bg); color: var(--todo-ink); }
.assign-foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); align-items: center; }
.assign-foot .hint { flex: 1; color: var(--muted); font-size: 14px; }

/* toast */
#toasts { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 40; display: grid; gap: 8px; width: min(480px, calc(100% - 24px)); pointer-events: none; }
.toast { pointer-events: auto; background: var(--primary-bg); color: var(--primary-ink); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); font-size: 15px; display: flex; gap: 12px; align-items: center; animation: drop .2s var(--ease); }
.toast b { font-weight: 700; }
.toast.err, .toast.late { background: var(--late); color: #fff; cursor: pointer; }
.toast.new { background: var(--todo); color: #fff; cursor: pointer; }
body[data-theme="dark"] .toast.new { color: #1a1206; }
.toast .tt { flex: 1; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
@keyframes drop { from { transform: translateY(-12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .alert.late, .alert.todo, .unassigned-pill { animation: none; } }

/* ============================================================ tablet verticale */
@media (max-width: 1099px) and (min-width: 768px) {
  .night { grid-template-columns: 1fr; grid-template-rows: minmax(400px, 55%) 1fr; }
  .side { border-left: 0; border-top: 1px solid var(--line); }
  .req { grid-template-columns: 310px 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .bar { flex-wrap: wrap; row-gap: 10px; }
  .bar .place { order: 0; } .bar .spacer { order: 1; } .bar .nav { order: 2; } .bar .me { order: 3; }
  .bar .datenav { order: 4; } .bar .seg.turni { order: 5; flex: 1; }
  .bar .seg.turni button { flex: 1; justify-content: center; }
}

/* ============================================================ telefono */
@media (max-width: 767px) {
  .shell { grid-template-rows: auto 1fr auto; }
  .bar { flex-wrap: wrap; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 10px; }
  .bar .nav { display: none; }
  .bar .clk { order: 2; font-size: 14px; }
  .bar .datenav { order: 3; flex: 1 1 100%; justify-content: space-between; }
  .bar .seg.turni { order: 4; flex: 1 1 100%; }
  .bar .seg.turni button { flex: 1; justify-content: center; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: var(--surface); padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
  .tabbar button { border: 0; background: none; color: var(--muted); height: 50px; display: grid; place-items: center; align-content: center; gap: 2px; font-size: 11.5px; font-weight: 600; position: relative; }
  .tabbar button .ico { width: 24px; height: 22px; display: block; }
  .tabbar button[aria-current="true"] { color: var(--text); }
  .tabbar .badge { position: absolute; top: 2px; left: calc(50% + 5px); height: 19px; min-width: 19px; font-size: 11.5px; }
  .req { grid-template-columns: 1fr; }
  .req-detail { display: none; }
  .req-list { border: 0; padding: 10px 10px 30px; }
  .night { grid-template-columns: 1fr; display: block; overflow-y: auto; height: 100%; }
  .night .side { border: 0; padding: 10px 10px 30px; overflow: visible; }
  .map-pane { height: auto; display: block; }
  .map-wrap { display: block; overflow-x: auto; padding: 8px 10px 12px; place-items: start; }
  .map-wrap svg { height: auto; max-height: none; max-width: none; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid2 { grid-template-columns: 1fr; }
  .page { padding: 14px 12px 40px; }
  .scrim { padding: 0; place-items: end stretch; }
  .sheet { width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); }
  .two { grid-template-columns: 1fr; }
  .assign-head { flex-wrap: wrap; position: relative; padding-right: 60px; }
  .assign-head .grow { flex: 1 1 100%; }
  .assign-head .x { position: absolute; right: 12px; top: calc(12px + env(safe-area-inset-top)); }
  .assign-foot { flex-wrap: wrap; }
  .assign-foot .hint { flex-basis: 100%; }
  .assign-foot .btn { flex: 1; }
  .assign-screen .map-wrap { overflow: auto; }
  .link-row { grid-template-columns: 1fr auto; }
  .link-row code { grid-column: 1 / -1; grid-row: 2; }
  .bitem { grid-template-columns: 44px 1fr auto auto; }
}