/* ================= Ronin Pizza — shared stylesheet =================
   Used by both index.html (staff console) and book.html (customer).
   ================================================================== */
:root{
  color-scheme:dark;              /* makes native selects, dates and scrollbars dark too */
  --bg:#14100e;
  --bg-2:#1c1714;
  --surface:#221c18;
  --surface-2:#2b241f;
  --line:#382f28;
  --text:#f4ece5;
  --muted:#a89a8e;
  --red:#e0402c;
  --red-soft:#ff5a42;
  --gold:#e8b23c;
  --green:#4caf7d;
  --blue:#5b9dd9;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Thai",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
/* the hidden attribute must beat any display rule below (grid/flex would override it) */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:var(--red-soft)}
.dim{color:var(--muted)}
.tiny{font-size:12px}
.warn{color:#ff8272}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:var(--radius-sm);border:1px solid transparent;
  background:var(--surface-2);cursor:pointer;font-weight:600;font-size:14px;
  text-decoration:none;transition:transform .06s ease,background .15s ease,border-color .15s ease,opacity .15s;
}
.btn:hover{background:#352c26}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-soft)}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:transparent;border-color:#5a2b25;color:#ff8272}
.btn-danger:hover{background:#3a201c}
/* Call the guest — the step that unlocks Confirm. Solid green: it is the one
   thing to do on a pending booking, and green reads as "go" next to the red
   primary buttons rather than competing with them. */
.btn-call{background:#1f8a55;border-color:#1f8a55;color:#fff}
.btn-call:hover{background:#25a065}
.btn-block{width:100%}
.btn-sm{padding:7px 12px;font-size:13px}
/* Walk-in is pressed with a queue at the door, often one-handed on a
   tablet. Big enough to hit without looking, and a soft glow so the eye
   finds it before anything else on the plan card. */
.btn-walkin{
  padding:15px 30px;font-size:18px;font-weight:700;letter-spacing:.02em;
  border-radius:12px;min-height:52px;
  box-shadow:0 6px 18px rgba(226,74,50,.35);
}
.btn-walkin:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(226,74,50,.45)}
.btn-walkin:active{transform:translateY(1px)}
@media (max-width:640px){ .btn-walkin{width:100%;font-size:17px} }
.btn-xl{padding:17px 22px;font-size:17px;width:100%;border-radius:14px}
.icon-btn{
  background:transparent;border:1px solid var(--line);border-radius:10px;
  width:40px;height:40px;cursor:pointer;font-size:18px;
}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>span{font-size:13px;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea,
select,input[type=date],input[type=time]{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;outline:none;width:100%;color:var(--text);
}
.field input:focus,.field select:focus,.field textarea:focus,select:focus{
  border-color:var(--red);background:#241d19;
}
.field textarea{resize:vertical;min-height:74px}
option{background:var(--surface);color:var(--text)}
.form-error{color:#ff8272;font-size:13px;margin-bottom:10px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1 1 160px}
.inline-input{
  width:auto;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:8px 11px;font-size:13px;color:var(--text);
}

/* ================= AUTH ================= */
.auth-screen{min-height:100dvh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}
.auth-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 500px at 15% -10%,rgba(224,64,44,.30),transparent 60%),
    radial-gradient(700px 500px at 90% 110%,rgba(232,178,60,.18),transparent 60%);
  pointer-events:none;
}
.auth-card{
  position:relative;width:100%;max-width:420px;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);
}
.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.auth-logo{width:56px;height:56px;border-radius:14px;object-fit:cover;border:1px solid var(--line)}
.auth-brand h1{font-size:21px}
.auth-brand p{font-size:13px;color:var(--muted)}
.auth-foot{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}

/* Honeypot. Off-screen rather than display:none, because the better bots
   skip anything that is display:none or hidden. A person never sees or
   tabs into it; a script that fills every input walks straight in. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ================= STAFF SHELL ================= */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100dvh}
.sidebar{
  background:var(--bg-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 14px;gap:18px;position:sticky;top:0;height:100dvh;
}
.brand{display:flex;align-items:center;gap:11px;padding:0 6px}
.brand-logo{width:42px;height:42px;border-radius:11px;object-fit:cover;border:1px solid var(--line)}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text small{color:var(--gold);font-size:12px;font-weight:600}
.nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow:auto}
.nav button{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border:0;border-radius:10px;
  background:transparent;cursor:pointer;color:var(--muted);font-weight:600;font-size:14px;text-align:left;
}
.nav button:hover{background:var(--surface);color:var(--text)}
.nav button.active{background:var(--red);color:#fff}
.nav .ico{width:20px;text-align:center;font-size:15px}
.nav .badge{margin-left:auto;background:var(--gold);color:#23180a;border-radius:999px;padding:1px 7px;font-size:11px}
.nav button.active .badge{background:#fff;color:var(--red)}
.sidebar-foot{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.who{display:flex;align-items:center;gap:10px}
.avatar{
  width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-weight:700;flex:none;
}
.who-text{min-width:0;line-height:1.3}
.who-text strong{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-text small{color:var(--muted);font-size:12px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:14px;padding:16px 26px;
  border-bottom:1px solid var(--line);background:rgba(20,16,14,.85);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:5;
}
.topbar-title h2{font-size:19px}
.topbar-title p{font-size:13px;color:var(--muted)}
.topbar-right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pill{
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-size:12px;color:var(--muted);white-space:nowrap;
}
.pill.strong{color:var(--text);font-weight:600;border-color:#4a3d33}

/* branch switcher — styled to match the dark theme, not the OS default */
.branch-pick{
  width:auto;min-width:170px;background:var(--surface-2);color:var(--text);
  border:1px solid #4a3d33;border-radius:999px;padding:7px 34px 7px 14px;
  font-size:13px;font-weight:600;cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.branch-pick:hover{border-color:var(--red)}
.branch-pick:focus{outline:none;border-color:var(--red);background-color:#312720}
.branch-pick option{background:var(--surface);color:var(--text)}

/* Fills the window. This used to stop at 1300px, which left a wide screen
   half empty — the console is a working tool, not an article, so tables and
   floor plans should get the room. */
.page-wrap{padding:22px 26px 90px;width:100%}
.only-mobile{display:none}
.mobilenav{display:none}

/* live-sync indicator */
.conn-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.conn{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.conn.online{background:var(--green);box-shadow:0 0 0 3px rgba(76,175,125,.18)}
.conn.offline{background:#8a7466}

/* ================= CARDS / GRID ================= */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:16px;
}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-head h3{font-size:16px}
.card-head .sub{font-size:13px;color:var(--muted)}
.card-head .right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:14px}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stat .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.stat .v{font-size:28px;font-weight:800;margin-top:6px}
.stat .d{font-size:12px;color:var(--muted);margin-top:4px}
.stat.accent{border-color:#4a2a22;background:linear-gradient(180deg,#2c1e19,#221c18)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);
  cursor:pointer;font-size:14px;font-weight:600;color:var(--text);text-align:center;
}
.chip:hover:not([disabled]){border-color:var(--red)}
.chip.sel{background:var(--red);border-color:var(--red);color:#fff}
.chip[disabled]{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.chip small{display:block;font-size:11px;font-weight:500;opacity:.75;margin-top:2px}
.chip.swatch{width:44px;height:32px;padding:0}
/* Every sitting of the day, laid out in full. This used to be a 104px box
   with its own scrollbar, so picking a late slot meant scrolling inside a
   little window — on a working console the whole day should be one click. */
.slot-strip{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));
  gap:8px;max-height:none;overflow:visible;
}
.slot-strip .chip{padding:10px 4px}

/* steps (booking wizard) */
.step{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.step-n{
  width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;
}
.step h4{font-size:14px}

/* ================= FLOOR PLAN ================= */
/* Date, slot strip and the walk-in button ride under the top bar, so the
   time being looked at stays on screen while the plan is scrolled. */
.floor-bar{position:sticky;top:var(--topbar-h,68px);z-index:4}

/* ---- the plaque ----
   Branch, slot and the table count sit inside one engraved box, like the
   brass sign by a restaurant door. Name and time are set identically —
   the time is part of the sign, not a highlighted number — and the count
   underneath is the small line staff glance at mid-service. */
.floor-plaque{
  display:inline-flex;flex-direction:column;gap:6px;align-items:center;
  padding:14px 26px;border-radius:10px;
  border:1px solid rgba(232,178,60,.45);
  background:linear-gradient(180deg,rgba(232,178,60,.10),rgba(232,178,60,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
/* Name and slot are two columns with a hairline between them, so the eye
   lands on the time without it being coloured differently — same engraving,
   its own compartment. */
.floor-plaque .plaque-row{display:flex;align-items:center;gap:14px}
.plaque-row .plaque-div{
  width:1px;align-self:stretch;min-height:22px;
  background:linear-gradient(180deg,transparent,rgba(232,178,60,.55),transparent);
}
.card-head .floor-plaque h3.floor-title,
.floor-plaque .floor-time{
  font-family:Georgia,"Times New Roman",serif;
  font-size:21px;font-weight:400;letter-spacing:.10em;line-height:1.15;
  text-transform:uppercase;color:#f6e3bd;white-space:nowrap;
}
.floor-plaque .floor-count{
  font-size:12px;letter-spacing:.20em;text-transform:uppercase;color:var(--muted);
}
.floor-plaque .floor-count b{color:#f6e3bd;font-weight:700}
@media (max-width:640px){
  .floor-plaque{width:100%;padding:12px 16px}
  .floor-plaque .plaque-row{gap:10px}
  .card-head .floor-plaque h3.floor-title,
  .floor-plaque .floor-time{font-size:17px;letter-spacing:.07em}
  .floor-plaque .floor-count{font-size:11px;letter-spacing:.14em}
}

.plan-wrap{
  position:relative;width:100%;overflow:hidden;border:1px solid var(--line);
  border-radius:12px;background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/40px 40px,
    #191411;
}
.plan-stage{position:relative;transform-origin:0 0}
/* one block per floor, stacked down the page */
.plan-floor+.plan-floor{margin-top:18px}
.plan-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 2px 8px}
.plan-head .sub{font-size:12px;color:var(--muted)}
.plan-head .right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.plan-name{font-size:15px;font-weight:700;letter-spacing:.02em}
.plan-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:12px}
.plan-legend .lg{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.plan-legend .lg.free{background:#12854f;box-shadow:0 0 0 1px #2ee08a inset}
.plan-legend .lg.busy{background:#c02718;box-shadow:0 0 0 1px #ff6a52 inset}
.plan-legend .lg.off{background:#5d5148}

.pl-tbl{
  position:absolute;border:2px solid #4d4038;background:#2a221d;border-radius:10px;
  display:grid;place-items:center;text-align:center;user-select:none;
}
.pl-tbl.round{border-radius:50%}
/* clip the text, not the tile. The tile must not clip, or the resize
   handle in the corner is cut away by a round table's border-radius —
   which is exactly why circles could not be resized by dragging. */
.pl-tbl .pl-in{padding:4px;line-height:1.2;pointer-events:none;overflow:hidden;max-width:100%}
.pl-tbl b{display:block}
.pl-tbl span{color:var(--muted);display:block}
.pl-label{
  display:block;max-width:100%;overflow-wrap:anywhere;
  transition:font-size .12s ease;
}
/* Free and taken have to be readable across a room, at a glance, by
   someone holding two plates. Real green and real red, not tinted
   charcoal — a busy floor is scanned, not studied. */
.pl-tbl.free{border-color:#2ee08a;background:#12854f;color:#fff}
.pl-tbl.free span{color:#d7f7e6}
.pl-tbl.busy{border-color:#ff6a52;background:#c02718;color:#fff}
.pl-tbl.busy span{color:#ffdbd4}
.pl-tbl.off{border-style:dashed;opacity:.45}
.pl-tbl.blocked{opacity:.3;pointer-events:none}
.pl-tbl:not(.blocked):not(.edit){cursor:pointer}
/* gold for "you are pointing at it" and "you picked it" — red now means
   taken, so it cannot also mean chosen */
.pl-tbl:not(.blocked):not(.edit):hover{border-color:var(--gold)}
.pl-tbl.picked{border-color:var(--gold);background:#7a5a12;color:#fff;box-shadow:0 0 0 3px rgba(232,178,60,.35)}
.pl-tbl.picked span{color:#f7e6c2}
.pl-tbl.edit,.pl-deco.edit{cursor:grab;touch-action:none}
.pl-tbl.edit:active,.pl-deco.edit:active{cursor:grabbing}
.pl-tbl.sel,.pl-deco.sel{outline:2px solid var(--gold);outline-offset:2px}

.pl-deco{
  position:absolute;border:1px dashed #57483d;border-radius:10px;
  display:grid;place-items:center;color:var(--muted);font-size:13px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;user-select:none;
}
.pl-res{
  position:absolute;right:-1px;bottom:-1px;width:16px;height:16px;z-index:3;
  background:var(--gold);border-radius:4px 0 10px 0;cursor:nwse-resize;
  box-shadow:0 0 0 2px rgba(20,16,14,.55);
}
/* On a circle the true bottom-right corner is outside the shape, so the
   handle sits on the rim instead — at 45°, about 85% along each axis. */
.pl-tbl.round .pl-res{right:8%;bottom:8%;border-radius:4px}

/* type a name straight onto the shape — and onto a floor's heading */
.pl-label.typable,.plan-name.typable{
  pointer-events:auto;cursor:text;outline:none;
  border-radius:4px;padding:0 3px;
}
.pl-label.typable:hover,.plan-name.typable:hover{background:rgba(232,178,60,.14)}
.pl-label.typable:focus,.plan-name.typable:focus{
  background:rgba(232,178,60,.22);box-shadow:0 0 0 2px var(--gold);cursor:text;
}
.pl-tbl.edit .pl-in,.pl-deco.edit .pl-label{pointer-events:none}
.pl-tbl.edit .pl-in .typable,.pl-deco.edit .typable{pointer-events:auto}
.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
/* the plan stage is 1600px wide and only shrunk by a CSS transform, which does not
   change its layout size — without min-width:0 the grid track refuses to shrink */
.editor-grid>*,.card,.cust-card{min-width:0}
.plan-wrap{max-width:100%}

/* ================= TABLES / DATA ================= */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.data{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
table.data th{
  text-align:left;padding:11px 14px;font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;background:var(--bg-2);
  border-bottom:1px solid var(--line);position:sticky;top:0;
}
table.data td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--surface-2)}

/* status badges */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.b-pending{background:#3d3113;color:var(--gold)}
.b-confirmed{background:#123528;color:#6fdcaa}
.b-seated{background:#12293d;color:#8dc6f2}
.b-done{background:#2a2521;color:var(--muted)}
.b-cancelled{background:#3d1a15;color:#ff8272}
.b-noshow{background:#3a1f2e;color:#f08bb4}

/* guest tiers */
.tier{
  display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-left:6px;
  background:#2a2521;color:var(--muted);
}
.tier.new{background:#25201c;color:#9a8b7e}
.tier.regular{background:#123528;color:#6fdcaa}
.tier.silver{background:#26303a;color:#9fc6e0}
.tier.gold{background:#3d3113;color:var(--gold)}
/* the guest has been rung — replaces the Call button once the call is made,
   lower case because it is a note about what happened, not a tier */
.tier.called{background:#123528;color:#6fdcaa;text-transform:none;letter-spacing:0;font-weight:600}
/* a party seated across tables pushed together — staff have to move
   furniture for it, so it is loud on purpose */
.tier.join{background:#3a2a12;color:var(--gold);box-shadow:inset 0 0 0 1px rgba(232,178,60,.45)}
.join-note{
  font-size:13px;color:var(--gold);background:rgba(232,178,60,.10);
  border-left:3px solid var(--gold);border-radius:8px;padding:8px 11px;margin:8px 0 0;
}
.join-box{
  background:rgba(232,178,60,.10);border:1px solid rgba(232,178,60,.35);
  border-radius:10px;padding:11px 13px;margin:12px 0;
}
.join-box b{color:var(--gold)}
.join-box p{margin:5px 0 0;font-size:13px;color:var(--text)}
.guest-strip{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-bottom:14px;
}
.guest-hint{
  font-size:13px;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:8px;padding:9px 12px;margin-bottom:14px;
}

/* booking cards */
.bk{
  display:flex;gap:14px;align-items:flex-start;padding:15px;border:1px solid var(--line);
  border-radius:12px;background:var(--bg-2);margin-bottom:10px;
}
.bk .when{background:var(--surface-2);border-radius:10px;padding:9px 12px;text-align:center;flex:none;min-width:74px}
.bk .when .d{font-size:20px;font-weight:800;line-height:1}
.bk .when .m{font-size:11px;color:var(--muted);text-transform:uppercase}
.bk .info{flex:1;min-width:0}
.bk .info h4{font-size:15px;margin-bottom:4px}
.bk .info p{font-size:13px;color:var(--muted)}
.bk .acts{display:flex;flex-direction:column;gap:6px;align-items:flex-end}

.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .big{font-size:40px;margin-bottom:10px}

/* menu grid (customer page) */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.mi{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg-2)}
.mi .t{display:flex;justify-content:space-between;gap:10px;font-weight:700}
.mi .price{color:var(--gold);white-space:nowrap}
.mi .d{font-size:13px;color:var(--muted);margin-top:5px}

/* ================= MODAL + TOAST ================= */
.modal-back{
  position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px;z-index:50;
}
.modal{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;
  width:100%;max-width:520px;box-shadow:var(--shadow);max-height:88dvh;overflow:auto;
}
.modal h3{font-size:17px;margin-bottom:6px}
.modal .modal-sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.modal-acts{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-of-type{border-bottom:0}
.kv .k{color:var(--muted)}
.code-big{
  font-family:ui-monospace,Menlo,monospace;font-size:28px;font-weight:700;letter-spacing:.14em;
  text-align:center;background:var(--bg-2);border:1px dashed var(--line);
  border-radius:12px;padding:18px;margin:8px 0 16px;color:var(--gold);
}
/* A rule the customer has to act on — too important for a toast that
   slides away. Used for the per-phone booking caps on book.html. */
.modal.stop{border-color:var(--red);border-width:2px}
.stop-mark{
  width:64px;height:64px;margin:2px auto 14px;border-radius:50%;
  display:grid;place-items:center;font-size:32px;
  background:rgba(224,64,44,.14);border:2px solid var(--red);color:var(--red-soft);
}
.stop-title{text-align:center;font-size:22px;margin-bottom:8px}
.stop-lead{text-align:center;font-size:15px;line-height:1.5;margin-bottom:14px}
.stop-count{
  text-align:center;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:14px;
}
.stop-count b{display:block;font-size:34px;line-height:1.1;color:var(--red-soft)}
.stop-count span{font-size:13px;color:var(--muted)}
.stop-next{font-size:14px;line-height:1.6;color:var(--text);margin:0 0 4px}
.stop-next li{margin-bottom:6px}
.stop-next ol{margin:6px 0 0;padding-left:20px}

.toasts{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:9px;z-index:99}
.toast{
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:10px;padding:12px 16px;font-size:14px;box-shadow:var(--shadow);
  animation:slide .22s ease;max-width:330px;
}
.toast.err{border-left-color:var(--red)}
@keyframes slide{from{opacity:0;transform:translateX(20px)}}

/* ================= CUSTOMER PAGE ================= */
.cust-body{
  background:
    radial-gradient(900px 500px at 50% -10%,rgba(224,64,44,.18),transparent 65%),
    var(--bg);
  min-height:100dvh;display:flex;flex-direction:column;
}
.cust-top{
  position:sticky;top:0;z-index:10;background:rgba(20,16,14,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.cust-top-in{
  max-width:760px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;gap:12px;
}
.cust-top-acts{display:flex;gap:8px;flex:none}
.cust-logo{width:40px;height:40px;border-radius:11px;object-fit:cover;border:1px solid var(--line)}
.cust-title{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.cust-title strong{font-size:16px}
.cust-title small{color:var(--muted);font-size:12px}

.cust-wrap{max-width:760px;width:100%;margin:0 auto;padding:20px 16px 24px;flex:1}
.cust-hero{margin-bottom:18px}
.cust-hero h1{font-size:28px;margin-bottom:6px}
.cust-hero p{color:var(--muted);font-size:15px}
.cust-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:18px;margin-bottom:14px;
}
.cust-card.slim{padding:14px 18px}
/* the "your group is bigger than any one table" card */
.cust-card.join-card{border-color:rgba(232,178,60,.45);background:linear-gradient(180deg,rgba(232,178,60,.08),transparent)}
.join-check{
  display:flex;align-items:center;gap:12px;margin:12px 0 8px;padding:12px 14px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;cursor:pointer;
  font-size:15px;font-weight:600;color:var(--text);
}
.join-check:hover{border-color:var(--gold)}
.join-check input{width:22px;height:22px;flex:none;accent-color:var(--gold);cursor:pointer}
.cust-h{font-size:15px;margin-bottom:12px}
.cust-h-row{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.cust-h-row .cust-h{margin-bottom:0;flex:1}

.chips.big .chip{padding:12px 16px;font-size:15px;min-width:64px}
.chips.big .chip.num{min-width:56px;font-size:16px}

/* The day row can be a month long, so it scrolls sideways instead of
   wrapping into a wall of buttons. */
.chips.days{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch}
.chips.days .chip{flex:none;scroll-snap-align:start}
.chips.days::-webkit-scrollbar{height:6px}
.chips.days::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

/* A field the customer still has to fill in */
.field.missing input,.field.missing select{border-color:#ff8272}
.field-hint{color:#ff8272;font-size:12px;margin-top:-8px;margin-bottom:12px}
.need-list{color:#ff8272;font-size:13px;margin:0 0 10px;text-align:left}
.time-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.time-grid .chip{padding:10px 6px}

.cust-summary{
  position:sticky;bottom:0;z-index:8;margin-top:6px;padding:20px 0 14px;
  background:linear-gradient(180deg,rgba(20,16,14,0),rgba(20,16,14,.97) 26%);
}
.sum-line{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:14px;color:var(--muted);margin-bottom:10px;
}
.sum-line b{color:var(--text)}

.done-card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:26px;text-align:center;max-width:520px;margin:20px auto;
}
.done-card h1{font-size:24px;margin-bottom:6px}
.done-card .kv{text-align:left}
.done-tick{
  width:58px;height:58px;border-radius:50%;background:#123528;color:#6fdcaa;
  font-size:30px;display:grid;place-items:center;margin:0 auto 14px;
}
.done-acts{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.visit-note{
  margin-top:14px;font-size:13px;color:var(--gold);
  background:#2b2213;border:1px solid #4a3a19;border-radius:10px;padding:10px;
}

.cust-foot{
  border-top:1px solid var(--line);padding:14px 16px;text-align:center;
  color:var(--muted);font-size:12px;display:flex;gap:8px;justify-content:center;align-items:center;
}
.dot-sep{opacity:.5}

/* ================= RESPONSIVE ================= */
@media (max-width:1100px){
  .editor-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:250px;z-index:40;
    transform:translateX(-100%);transition:transform .22s ease;
  }
  .sidebar.open{transform:none;box-shadow:var(--shadow)}
  .only-mobile{display:inline-flex}
  .page-wrap{padding:18px 15px 100px}
  .topbar{padding:13px 15px}
  .topbar-right{gap:6px}
  .branch-pick{min-width:0;max-width:150px}
  .mobilenav{
    display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--bg-2);
    border-top:1px solid var(--line);z-index:30;padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mobilenav button{
    flex:1;background:transparent;border:0;color:var(--muted);font-size:11px;font-weight:600;
    display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;cursor:pointer;
  }
  .mobilenav button .ico{font-size:17px}
  .mobilenav button.active{color:var(--red-soft)}
  .bk{flex-wrap:wrap}
  .bk .acts{flex-direction:row;width:100%}
  .cust-hero h1{font-size:24px}
}
@media (max-width:480px){
  .chips.big .chip{padding:11px 13px;font-size:14px}
  .time-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  /* On a phone the whole day of slots is taller than the screen, so pinning
     it would leave no room for the plan. It scrolls with the page instead. */
  .floor-bar{position:static}
  .slot-strip{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}
}

/* ================= SERVER HEALTH PAGE ================= */
.health-wrap{max-width:900px}

.health-hero{
  display:flex;align-items:center;gap:18px;
  background:var(--bg-1);border:1px solid var(--line);border-left-width:4px;
  border-radius:16px;padding:22px 24px;margin-bottom:18px;
}
.health-hero.good{border-left-color:var(--green)}
.health-hero.warn{border-left-color:#d8a24a}
.health-hero.bad{border-left-color:var(--red)}
.health-hero h1{font-size:24px;margin-bottom:4px}

.health-dot{width:16px;height:16px;border-radius:50%;flex:none;background:var(--muted)}
.health-dot.good{background:var(--green);box-shadow:0 0 0 6px rgba(76,175,125,.16)}
.health-dot.warn{background:#d8a24a;box-shadow:0 0 0 6px rgba(216,162,74,.16)}
.health-dot.bad{background:var(--red);box-shadow:0 0 0 6px rgba(200,60,50,.18);
  animation:pulseBad 1.4s ease-in-out infinite}
@keyframes pulseBad{50%{box-shadow:0 0 0 11px rgba(200,60,50,0)}}

.health-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;margin-bottom:18px;
}
.health-tile{
  background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
}
.health-tile.good{border-color:rgba(76,175,125,.35)}
.health-tile.warn{border-color:rgba(216,162,74,.45)}
.health-tile.bad{border-color:rgba(200,60,50,.5)}
.ht-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.ht-value{font-size:22px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums}
.ht-note{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4}

.spark{
  display:flex;align-items:flex-end;gap:3px;height:90px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:10px;
}
.spark i{flex:1;min-width:3px;border-radius:3px 3px 0 0;background:var(--green);opacity:.85}
.spark i.warn{background:#d8a24a}
.spark i.bad{background:var(--red)}

/* ---------- walk-in: two taps, no typing ---------- */
.wi-step{
  display:flex;align-items:center;gap:9px;margin:18px 0 10px;
  font-size:13px;font-weight:600;color:var(--muted);
}
.wi-num{
  width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-size:12px;flex:none;
}
.wi-tables{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;
  max-height:280px;overflow-y:auto;
}
.wi-table{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;cursor:pointer;text-align:left;color:var(--text);
}
.wi-table:hover{border-color:var(--red)}
.wi-table.sel{background:var(--red);border-color:var(--red);color:#fff}
.wi-table.sel .dim{color:rgba(255,255,255,.75)}
.wi-table b{font-size:15px}
.wi-table small{font-size:11px}

/* the two clock columns in the reservations table */
td.stamp{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}

/* ---------- the blocking screen: no server, no system ---------- */
.blocker{
  position:fixed;inset:0;z-index:9999;
  background:rgba(20,16,14,.94);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:24px;
}
.blocker-card{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:30px 28px;max-width:400px;text-align:center;box-shadow:var(--shadow);
}
.blocker-card h2{font-size:20px;margin:16px 0 8px}
.blocker-card p{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:8px}
.blocker-card .btn{margin-top:16px}
.blocker-spin{
  width:34px;height:34px;margin:0 auto;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--red);
  animation:blockSpin .9s linear infinite;
}
@keyframes blockSpin{to{transform:rotate(360deg)}}

/* ---------- maintenance: System page ---------- */
.sys-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.sys-actions .btn{
  flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  padding:13px 15px;height:100%;
}
.sys-actions .btn small{font-weight:500;color:var(--muted);line-height:1.45;font-size:11.5px}
.sys-actions .btn-danger small{color:#c98d84}
.pill input{margin-right:6px;vertical-align:-1px}

/* ---------- logo card (Settings, and System for maintenance) ---------- */
.logo-row{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.logo-preview{
  width:96px;height:96px;border-radius:20px;object-fit:cover;
  border:1px solid var(--line);background:var(--bg-2);flex:none;
}
.logo-side{flex:1 1 240px;display:flex;flex-direction:column;gap:12px}
.logo-acts{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- booking conditions, shown before anything is confirmed ---------- */
.terms{
  list-style:none;margin:0 0 4px;padding:0;
  max-height:44vh;overflow-y:auto;
}
.terms li{
  position:relative;padding:9px 4px 9px 26px;font-size:13.5px;line-height:1.55;
  color:var(--muted);border-bottom:1px solid var(--line);
}
.terms li:last-child{border-bottom:0}
.terms li::before{
  content:"";position:absolute;left:8px;top:16px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.terms li b{color:var(--text);font-weight:700}
.terms li .mono{color:var(--text)}

/* ---------- "is this right?" check before booking ---------- */
.check-card{
  display:flex;gap:16px;align-items:stretch;
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-bottom:14px;
}
.check-when{
  flex:none;width:96px;text-align:center;padding-right:16px;
  border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;
}
.cw-time{font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cw-day{font-size:13px;font-weight:700;color:var(--gold);margin-top:5px}
.cw-date{font-size:11px;color:var(--muted);margin-top:2px}
.check-what{flex:1;min-width:0}
.check-what .kv{padding:5px 0;border:0}
.check-what .kv .k{font-size:12px}

.check-contact{
  background:rgba(76,175,125,.09);border:1px solid rgba(76,175,125,.32);
  border-radius:12px;padding:12px 14px;margin-bottom:14px;
}
.check-contact b{display:block;font-size:13px;margin-bottom:5px}
.check-contact p{font-size:13px;color:var(--text);line-height:1.5}
.check-contact .dim{margin-top:6px}

.terms-wrap{border:1px solid var(--line);border-radius:12px;padding:4px 12px;margin-bottom:4px}
.terms-wrap summary{
  cursor:pointer;padding:9px 2px;font-size:13px;font-weight:600;color:var(--muted);
  list-style:none;
}
.terms-wrap summary::-webkit-details-marker{display:none}
.terms-wrap summary::before{content:"▸ ";color:var(--gold)}
.terms-wrap[open] summary::before{content:"▾ "}

@media (max-width:480px){
  .check-card{flex-direction:column;gap:10px}
  .check-when{
    width:auto;flex-direction:row;gap:10px;align-items:baseline;justify-content:flex-start;
    border-right:0;border-bottom:1px solid var(--line);padding:0 0 10px;
  }
  .cw-time{font-size:22px}
}