/* ==========================================================================
   XD Arena — Management System
   Dark design system matched to the XD Arena UI mockup (Media (2).jfif)
   ==========================================================================

   CLASS CATALOG (for page modules)
   Layout:      .panel .panel-title .grid .cols-2/3/4 .row .mt .mb .muted .small .right
   Stats:       .stat + .stat-ico (.ico-green/.ico-blue/.ico-orange/.ico-purple/.ico-red/.ico-teal)
                .stat-label .stat-value .stat-sub .up .down
                .mini + .mini-head .mini-big .mini-sub  (service count cards)
   Floor:       .fcard .f-running .f-free .f-inuse .f-paused .f-maint
                .fcard-name .fcard-status .fcard-timer .fcard-amt .fcard-sub .fsection .fsection-title
   Tabs/segs:   .pill-tabs>button(.on)  .seg>button(.on)  .radio-line .radio-dot(.on)
   Service sel: .svc-cards .svc-card(.on) .svc-card-ico .svc-card-lbl
   Forms:       .field label .input .row  .switch(.on)  .btn .btn-primary .btn-green .btn-blue
                .btn-dark .btn-outline .btn-danger .btn-sm .btn-block
   Session:     .runbar .runbar-head .run-timer .kv-row .kv
   POS:         .pos-wrap .pos-search .item-grid .pos-item .pos-item-img .cart-line .qty-btn
   Bill:        .cust-box .avatar .badge-gold .badge-silver .badge-regular .inv-grid
                .tbl .totals-line .totals-grand .pay-pills>button(.on)
   Subnav:      .subnav-wrap .subnav>button(.on)   (Reports/Settings inner sidebar)
   Charts:      .chart-wrap .chart-tooltip .legend-row .legend-chip .hbar-row .hbar-track .hbar-fill
   Misc:        .modal-overlay .modal .toast .lock-screen .act-line .dot
   ========================================================================== */

/* ---------------------------------------------------------------------------
   THEME. Every colour in the app comes from these variables, so the light
   theme below is a straight swap — no component needs to know which mode it
   is in. Series colours differ per mode because they must stay legible
   against their own surface.
   Theme is stored in settings and stamped on <html data-theme="…">.
   --------------------------------------------------------------------------- */
:root, :root[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces */
  --bg:        #0a0a0d;
  --panel:     #121216;
  --card:      #17171c;
  --card-2:    #1d1d23;
  --card-3:    #24242b;
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(255,255,255,0.13);

  /* ink */
  --ink:   #ffffff;
  --ink-2: #b9b8c0;
  --ink-3: #82818a;

  /* brand gold — taken from the XD Arena mark */
  --brand:      #d4a32c;
  --brand-hi:   #f0cf62;
  --brand-dk:   #8a6212;
  --brand-soft: rgba(212,163,44,0.14);
  --on-brand:   #17130a;   /* text that sits on a gold fill */

  /* status */
  --green:       #22c55e;
  --green-soft:  rgba(34,197,94,0.10);
  --green-brd:   rgba(34,197,94,0.45);
  --red:         #ef4444;
  --red-soft:    rgba(239,68,68,0.09);
  --red-brd:     rgba(239,68,68,0.40);
  --yellow:      #eab308;
  --yellow-soft: rgba(234,179,8,0.10);
  --yellow-brd:  rgba(234,179,8,0.45);
  --gray:        #6b6b74;
  --blue:        #3b82f6;
  --purple:      #a855f7;
  --orange:      #f97316;

  /* chart chrome + categorical series (validated for the dark surface) */
  --series-blue: #3987e5;
  --grid-line:   #26262c;
  --axis:        #35353c;
  --s-open:      #3987e5;
  --s-exec:      #d95926;
  --s-ps5:       #199e70;
  --s-tournament:#c98500;
  --s-massage:   #d55181;
  --s-hf:        #008300;
  --s-tokens:    #9085e9;
  --s-cafe:      #e66767;
  --s-other:     #82818a;

  /* felt + console art */
  --felt:        #1f7a4d;
  --felt-2:      #17603c;
  --felt-rail:   #6b3f1f;
  --felt-line:   rgba(255,255,255,.18);

  /* elevation — layered so surfaces read as physically stacked */
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 10px 26px -12px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 26px 60px -20px rgba(0,0,0,.85);
  --edge:      inset 0 1px 0 rgba(255,255,255,.055);
  --sheen:     linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%);
  --glow:      0 0 0 1px rgba(212,163,44,.35), 0 6px 20px -6px rgba(212,163,44,.55);

  --radius: 14px;
  --radius-sm: 10px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #f4f5f7;
  --panel:     #ffffff;
  --card:      #ffffff;
  --card-2:    #f1f2f5;
  --card-3:    #e4e6eb;
  --border:    rgba(16,18,27,0.10);
  --border-2:  rgba(16,18,27,0.18);

  --ink:   #14161c;
  --ink-2: #4a4d57;
  --ink-3: #7a7d88;

  --brand:      #a9750b;
  --brand-hi:   #8a5f06;   /* darker than dark-mode so it reads on white */
  --brand-dk:   #6d4a04;
  --brand-soft: rgba(169,117,11,0.10);
  --on-brand:   #ffffff;

  --green:       #128a3d;
  --green-soft:  rgba(18,138,61,0.09);
  --green-brd:   rgba(18,138,61,0.40);
  --red:         #c62828;
  --red-soft:    rgba(198,40,40,0.07);
  --red-brd:     rgba(198,40,40,0.35);
  --yellow:      #a76a00;
  --yellow-soft: rgba(167,106,0,0.10);
  --yellow-brd:  rgba(167,106,0,0.38);
  --gray:        #83868f;
  --blue:        #1d4ed8;
  --purple:      #7c3aed;
  --orange:      #c2560d;

  --series-blue: #2a78d6;
  --grid-line:   #e3e5ea;
  --axis:        #c8cbd3;
  --s-open:      #2a78d6;
  --s-exec:      #eb6834;
  --s-ps5:       #1baf7a;
  --s-tournament:#eda100;
  --s-massage:   #e87ba4;
  --s-hf:        #008300;
  --s-tokens:    #4a3aa7;
  --s-cafe:      #e34948;
  --s-other:     #898781;

  --felt:        #1d8a54;
  --felt-2:      #157043;
  --felt-rail:   #7b4a24;
  --felt-line:   rgba(255,255,255,.28);

  --shadow:    0 1px 2px rgba(16,18,27,.06), 0 8px 22px -12px rgba(16,18,27,.28);
  --shadow-lg: 0 2px 6px rgba(16,18,27,.08), 0 26px 60px -22px rgba(16,18,27,.35);
  --edge:      inset 0 1px 0 rgba(255,255,255,.9);
  --sheen:     linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 45%);
  --glow:      0 0 0 1px rgba(169,117,11,.25), 0 6px 18px -6px rgba(169,117,11,.35);
}

/* the sidebar needs its own tone in light mode, otherwise white-on-white
   leaves the navigation floating with no edge */
:root[data-theme="light"] .sidebar { background: #fbfbfc; }
:root[data-theme="light"] .topbar { background: var(--bg); }
:root[data-theme="light"] .pos-item-img { background: var(--card-2); }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(212,163,44,.09), transparent 60%),
    radial-gradient(900px 520px at 6% 4%, rgba(59,130,246,.07), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-feature-settings: "cv02","cv03","cv04","ss01";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  min-height: 100vh;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(169,117,11,.06), transparent 60%),
    radial-gradient(900px 520px at 6% 4%, rgba(29,78,216,.045), transparent 62%),
    var(--bg);
}
button { font-family: inherit; }
a { color: inherit; }

/* icons inherit the colour of whatever they sit in */
.ic { display: inline-block; vertical-align: -0.18em; flex: none; }

/* ================= LAYOUT ================= */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 224px; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 30%), var(--panel);
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 0 rgba(0,0,0,.35), 14px 0 40px -24px rgba(0,0,0,.9);
  display: flex; flex-direction: column;
  padding: 18px 11px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  scrollbar-width: thin;
  transition: width .15s;
  z-index: 50;
}
.app.side-collapsed .sidebar { width: 64px; }
.app.side-collapsed .brand-name, .app.side-collapsed .nav-lbl,
.app.side-collapsed .nav-badge, .app.side-collapsed .btn-new-session { display: none; }

.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 18px; }
.brand-logo {
  background: linear-gradient(145deg, #fbeaa8, var(--brand) 45%, var(--brand-dk));
  color: var(--on-brand); font-weight: 900; font-size: 19px; font-style: italic;
  padding: 6px 10px; border-radius: 10px; letter-spacing: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 6px rgba(0,0,0,.3),
    0 4px 14px -2px rgba(212,163,44,.5);
}
.logo-mark-svg { display: block; flex: none; }
.logo-img { display: block; flex: none; border-radius: 8px; }

/* The logo artwork is a tall lockup (crown, monogram, table, wordmark).
   At sidebar size we frame the crown and monogram only — the rest turns to
   mush below about 90px, and the wordmark sits next to it in text anyway. */
.brand-mark {
  display: block; flex: none; width: 46px; height: 46px; border-radius: 11px;
  background-color: #08080a;
  background-repeat: no-repeat;
  background-size: 168%;
  background-position: 50% 21%;
  box-shadow: inset 0 0 0 1px rgba(212,163,44,.35), 0 4px 14px -4px rgba(0,0,0,.8);
}
.brand-full { display: block; max-width: 100%; height: auto; }
.brand-name {
  font-weight: 800; letter-spacing: 4.5px; font-size: 13.5px;
  background: linear-gradient(180deg, #fdf3cf, var(--brand));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] .brand-name {
  background: linear-gradient(180deg, #4a3405, var(--brand-dk));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.btn-new-session { width: 100%; margin-bottom: 14px; }

.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  color: var(--ink-2); cursor: pointer; user-select: none;
  font-weight: 500; font-size: 13px; text-decoration: none; white-space: nowrap;
  position: relative; transition: background .13s, color .13s;
}
.nav-item:hover { background: var(--card-2); color: var(--ink); }
.nav-item.active {
  background: linear-gradient(135deg, var(--brand-hi), var(--brand) 55%, var(--brand-dk));
  color: var(--on-brand); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px -4px rgba(212,163,44,.5);
}
.nav-item.active::before {
  content: ''; position: absolute; left: -11px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--brand-hi);
  box-shadow: 0 0 10px 1px rgba(240,207,98,.75);
}
.nav-ico { width: 19px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: .92; }
.nav-item.active .nav-ico { opacity: 1; }
.nav-badge {
  margin-left: auto; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 6px;
}
.nav-item.active .nav-badge { background: #fff; color: var(--brand); }
.nav-sep { border-top: 1px solid var(--border); margin: 6px 4px; }

/* The by-hand charge sits in a row of small buttons and is reached far more
   often than any of them — an hour of PS5 nobody started, four frames on a
   table already switched off. It is sized for that, not for the row. */
.bill-manual-btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 13px;
  gap: 7px;
  display: inline-flex; align-items: center;
  white-space: nowrap;
}

/* The suppliers screen: one card each, the balance big enough to read across
   a counter. */
.ven-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ven-head-l { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-3); }
.ven-head-v { font-size: 30px; font-weight: 900; letter-spacing: -.5px; line-height: 1.15; }
.ven-list { display: flex; flex-direction: column; gap: 8px; }
.ven-card {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--border-2);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.ven-card.is-owed { border-left-color: var(--red); }
.ven-card.is-off { opacity: .6; }
.ven-name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ven-bal { text-align: right; min-width: 120px; }
.ven-bal-v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ven-bal-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-3); }
.ven-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 820px) {
  .ven-card { grid-template-columns: 1fr; gap: 10px; }
  .ven-bal { text-align: left; }
  .ven-act { justify-content: flex-start; }
}

/* A dashboard figure that opens what it was added up from. */
.dash-drill { cursor: pointer; }
.dash-drill .stat, .dash-drill.hero { transition: transform .12s ease, box-shadow .12s ease; }
.dash-drill:hover .stat, .dash-drill.hero:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.6);
  border-color: var(--brand);
}
@media (prefers-reduced-motion: reduce) {
  .dash-drill .stat, .dash-drill.hero { transition: none; }
  .dash-drill:hover .stat, .dash-drill.hero:hover { transform: none; }
}

/* A folding heading in the sidebar, and the pages under it. */
.nav-group { cursor: pointer; }
.nav-group .nav-lbl { font-weight: 700; letter-spacing: .2px; }
.nav-fold {
  margin-left: auto; display: flex; align-items: center; opacity: .55;
  transform: rotate(-90deg); transition: transform .16s ease;
}
.nav-fold.open { transform: rotate(0deg); }
.nav-item.nav-child { padding-left: 26px; font-size: 12.5px; }
.nav-item.nav-child .nav-ico { width: 17px; opacity: .8; }
.app.side-collapsed .nav-fold { display: none; }
.app.side-collapsed .nav-item.nav-child { padding-left: 11px; }

/* A stat card being used as a filter — pressed, and obviously pressed. */
.stat-on .stat {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  box-shadow: 0 6px 18px -8px rgba(212,163,44,.55);
}

/* The bill photo attached to a delivery — Inventory → Stock in. */
.bill-thumb { display: flex; align-items: center; gap: 12px; }
.bill-thumb img {
  width: 74px; height: 74px; object-fit: cover; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--border); background: #fff;
}
input.input[type=file] { padding: 7px 9px; font-size: 12px; cursor: pointer; }
input.input[type=file]::file-selector-button {
  margin-right: 10px; padding: 5px 12px; border: 0; cursor: pointer;
  border-radius: 7px; font-weight: 700; font-size: 12px;
  background: var(--card-3); color: var(--ink);
}

/* The menu while the till is still finding out who is standing at it. Rows the
   shape of the real ones and nothing to press — see sidebarSkeleton(). */
.nav-wait { display: flex; flex-direction: column; gap: 1px; }
.nav-wait-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--radius-sm);
}
.nav-wait-ico, .nav-wait-lbl {
  background: var(--card-2); border-radius: 5px;
  animation: navWait 1.25s ease-in-out infinite;
}
.nav-wait-ico { width: 19px; height: 19px; flex-shrink: 0; border-radius: 6px; }
.nav-wait-lbl { height: 9px; flex: 1; max-width: 108px; }
.nav-wait-row:nth-child(3n) .nav-wait-lbl { max-width: 84px; }
.nav-wait-row:nth-child(4n) .nav-wait-lbl { max-width: 126px; }
.nav-wait-row:nth-child(2n) .nav-wait-ico,
.nav-wait-row:nth-child(2n) .nav-wait-lbl { animation-delay: .18s; }
.nav-wait-row:nth-child(3n) .nav-wait-ico,
.nav-wait-row:nth-child(3n) .nav-wait-lbl { animation-delay: .36s; }
.nav-wait-note {
  padding: 10px 11px 0; font-size: 11px; color: var(--ink-3);
  animation: navWait 1.25s ease-in-out infinite;
}
@keyframes navWait { 0%, 100% { opacity: .85; } 50% { opacity: .38; } }
@media (prefers-reduced-motion: reduce) {
  .nav-wait-ico, .nav-wait-lbl, .nav-wait-note { animation: none; }
}
.app.side-collapsed .nav-wait-lbl, .app.side-collapsed .nav-wait-note { display: none; }

.main { flex: 1; padding: 0 22px 60px; min-width: 0; }

/* ================= TOPBAR ================= */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}
.tb-burger {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border-2); color: var(--ink-2);
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.tb-burger:hover { color: var(--ink); }
.tb-welcome { line-height: 1.25; }
.tb-welcome b { font-size: 14px; }
.tb-welcome span { display: block; font-size: 11px; color: var(--ink-3); }
.tb-spacer { flex: 1; }
.tb-chip {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 13px; font-size: 12.5px; font-weight: 620;
  color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.tb-icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border);
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  color: var(--ink-2);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.tb-icon:hover { color: var(--ink); border-color: var(--border-2); }
.tb-icon .bub {
  position: absolute; top: -5px; right: -5px;
  background: linear-gradient(180deg, #f36565, var(--red)); color: #fff;
  font-size: 9px; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 9px; line-height: 16px; padding: 0 4px;
  box-shadow: 0 2px 8px -1px rgba(239,68,68,.8);
}

.page-title {
  font-size: 22px; font-weight: 800; margin: 18px 0 15px; letter-spacing: -.025em;
}
.page { display: none; }
.page.active { display: block; }

/* ================= GENERIC ================= */
.grid { display: grid; gap: 12px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.panel {
  background: var(--sheen), var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 17px;
  box-shadow: var(--shadow), var(--edge);
}
.panel-title {
  font-weight: 700; font-size: 13.5px; margin-bottom: 13px;
  letter-spacing: -.01em;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  /* the right-hand side often carries a button; let it drop below the heading
     on a narrow screen instead of pushing the panel wider than the page */
  flex-wrap: wrap;
}
/* Those headers usually hold a search box + button pair. Let the pair wrap and
   let the box shrink past its inline width rather than widening the page. */
.panel-title > * { min-width: 0; }
.panel-title span { flex-wrap: wrap; }
.panel-title .input { max-width: 100%; }

/* Page heading + its action buttons (Snooker, PS5). Same reason as above. */
.page-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin: 16px 0 14px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 9px 16px; font-weight: 620; font-size: 13px;
  cursor: pointer; color: var(--ink);
  background: linear-gradient(180deg, var(--card-3), var(--card-2));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .08s, filter .12s, box-shadow .12s;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(.96); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }
.btn-primary {
  background: linear-gradient(180deg, #f6d979, var(--brand) 55%, var(--brand-dk));
  color: var(--on-brand); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 16px -4px rgba(212,163,44,.55);
}
.btn-green {
  background: linear-gradient(180deg, #22a85a, #157a3c 60%, #0f5a2c); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 14px -5px rgba(21,128,61,.6);
}
.btn-blue {
  background: linear-gradient(180deg, #3b7ff5, #1d4ed8 60%, #163fae); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 14px -5px rgba(29,78,216,.55);
}
.btn-orange {
  background: linear-gradient(180deg, #fb923c, #ea7317 60%, #c2560d); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px -5px rgba(234,115,23,.55);
}
.btn-dark { background: linear-gradient(180deg, var(--card-2), var(--card)); border-color: var(--border-2); }
.btn-outline { background: transparent; border-color: var(--border-2); box-shadow: none; }
.btn-outline:hover { background: var(--card-2); }
.btn-danger {
  background: linear-gradient(180deg, #b62828, #8b1a1a 60%, #6d1212); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px -5px rgba(139,26,26,.6);
}
.btn-sm { padding: 6px 11px; font-size: 12px; gap: 5px; }
.btn-block { width: 100%; }

.input, select.input, textarea.input {
  width: 100%; background: var(--card-2);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  color: var(--ink); padding: 10px 12px; font-size: 13px; font-family: inherit;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.28);
  transition: border-color .12s, box-shadow .12s;
}
:root[data-theme="light"] .input { box-shadow: inset 0 1px 2px rgba(16,18,27,.06); }
.input:hover { border-color: var(--ink-3); }
.input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.28), 0 0 0 3px rgba(212,163,44,.22);
}
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 11.5px; color: var(--ink-2); margin-bottom: 5px; font-weight: 600; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
/* For rows of fixed-width controls (date picker + buttons) that would otherwise
   push the page sideways on a tablet. */
.row.wrap { flex-wrap: wrap; row-gap: 10px; }

/* Grid and flex children are min-width:auto by default, so one wide child — a
   table, a long customer name, the live-floor strip — refuses to shrink and
   drags the whole page sideways instead of scrolling inside its own box.
   Letting them shrink is what makes .live-strip's own overflow-x work at all. */
.grid > *, .row > *, .subnav-wrap > *, .panel { min-width: 0; }

/* Wide tables scroll in place rather than widening the page. */
.tbl-wrap { overflow-x: auto; }

.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.right { text-align: right; }
.mt { margin-top: 13px; }
.mb { margin-bottom: 13px; }
.up { color: var(--green); }
.down { color: var(--red); }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; color: var(--ink-3); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: .9px;
  padding: 9px 10px; border-bottom: 1px solid var(--border-2);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}
.tbl td { padding: 10px; border-bottom: 1px solid var(--border); }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover { background: rgba(255,255,255,.028); }
:root[data-theme="light"] .tbl tbody tr:hover { background: rgba(16,18,27,.028); }
.tbl tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ================= STAT CARDS ================= */
.stat {
  position: relative; overflow: hidden;
  background: var(--sheen), var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 16px;
  display: flex; gap: 13px; align-items: flex-start;
  box-shadow: var(--shadow), var(--edge);
}
.stat::after {           /* soft corner light so the tile reads as a surface */
  content: ''; position: absolute; right: -30px; top: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.05), transparent 68%);
  pointer-events: none;
}
.stat-ico {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px -6px rgba(0,0,0,.8);
}
.ico-green  { background: linear-gradient(145deg, rgba(34,197,94,.28), rgba(34,197,94,.10));  color: #4ade80; }
.ico-blue   { background: linear-gradient(145deg, rgba(59,130,246,.28), rgba(59,130,246,.10)); color: #7cb0ff; }
.ico-orange { background: linear-gradient(145deg, rgba(249,115,22,.28), rgba(249,115,22,.10)); color: #ffa860; }
.ico-purple { background: linear-gradient(145deg, rgba(168,85,247,.28), rgba(168,85,247,.10)); color: #cfa1ff; }
.ico-red    { background: linear-gradient(145deg, rgba(239,68,68,.28), rgba(239,68,68,.10));  color: #ff8f8f; }
.ico-teal   { background: linear-gradient(145deg, rgba(20,184,166,.28), rgba(20,184,166,.10)); color: #4fdccb; }
:root[data-theme="light"] .ico-green  { color: #0f7a37; }
:root[data-theme="light"] .ico-blue   { color: #1a4fc4; }
:root[data-theme="light"] .ico-orange { color: #b8560f; }
:root[data-theme="light"] .ico-purple { color: #6d28d9; }
:root[data-theme="light"] .ico-red    { color: #b02525; }
:root[data-theme="light"] .ico-teal   { color: #0d7a70; }
:root[data-theme="light"] .stat-ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 10px -6px rgba(16,18,27,.5); }

.stat-label { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .9px; font-weight: 750; }
.stat-value {
  font-size: 23px; font-weight: 800; margin-top: 4px; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.stat-sub { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }

/* mini service-count card */
.mini {
  background: var(--sheen), var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  box-shadow: var(--shadow), var(--edge);
  transition: transform .12s, border-color .12s;
}
.mini:hover { transform: translateY(-2px); border-color: var(--border-2); }
.mini-head {
  display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--ink-3);
  font-weight: 750; text-transform: uppercase; letter-spacing: .8px;
}
.mini-head .ic { opacity: .8; }
.mini-body { display: flex; gap: 16px; margin-top: 8px; align-items: baseline; }
.mini-big { font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mini-sub { font-size: 11px; color: var(--ink-3); }

/* ================= FLOOR CARDS ================= */
.fsection { margin-bottom: 14px; }
.fsection-title {
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-3); font-weight: 800; margin-bottom: 8px;
}
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

.fcard {
  border-radius: 12px; padding: 12px 10px; text-align: center;
  border: 1px solid var(--border-2); background: var(--card);
  cursor: pointer; user-select: none; min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.fcard:hover { filter: brightness(1.15); }
.fcard-name { font-weight: 800; font-size: 13px; letter-spacing: .3px; }
.fcard-status { font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.fcard-timer { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fcard-amt { font-size: 12px; font-weight: 700; }
.fcard-sub { font-size: 10.5px; color: var(--ink-3); }

.f-running { background: linear-gradient(180deg, rgba(34,197,94,.13), rgba(34,197,94,.05)); border-color: var(--green-brd); }
.f-running .fcard-name, .f-running .fcard-timer { color: #e8ffee; }
.f-running .fcard-status { color: var(--green); }
.f-running .fcard-amt { color: var(--green); }

.f-free { background: linear-gradient(180deg, rgba(239,68,68,.12), rgba(239,68,68,.04)); border-color: var(--red-brd); }
.f-free .fcard-status { color: var(--red); }

.f-paused { background: linear-gradient(180deg, rgba(234,179,8,.12), rgba(234,179,8,.04)); border-color: var(--yellow-brd); }
.f-paused .fcard-status, .f-paused .fcard-amt { color: var(--yellow); }

.f-inuse { background: linear-gradient(180deg, rgba(234,179,8,.12), rgba(234,179,8,.04)); border-color: var(--yellow-brd); }
.f-inuse .fcard-status { color: var(--yellow); }
.f-inuse .fcard-amt { color: var(--yellow); }

.f-maint { background: var(--card); border-color: var(--border); opacity: .65; }
.f-maint .fcard-status { color: var(--gray); }

.legend { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ================= TABS / SEGMENTS / RADIO ================= */
.pill-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }
.pill-tabs button {
  background: var(--card); border: 1px solid var(--border-2); color: var(--ink-2);
  padding: 7px 15px; border-radius: 18px; font-weight: 600; font-size: 12px; cursor: pointer;
}
.pill-tabs button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 700; }

.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  background: var(--card-2); border: 1px solid var(--border-2);
  color: var(--ink-2); border-radius: var(--radius-sm);
  padding: 8px 15px; font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.seg button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 700; }

.radio-line { display: flex; gap: 18px; align-items: center; }
.radio-item { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.radio-item.on { color: var(--ink); }
.radio-dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--ink-3); display: inline-block; position: relative;
}
.radio-item.on .radio-dot { border-color: var(--brand); }
.radio-item.on .radio-dot::after {
  content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--brand);
}

/* service selector cards (Start New Session) */
.svc-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-bottom: 14px; }
.svc-card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border-2); border-radius: 12px;
  padding: 11px 4px; text-align: center; cursor: pointer;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .11s, box-shadow .11s;
  color: var(--ink-2);
}
.svc-card:hover { transform: translateY(-2px); color: var(--ink); }
.svc-card.on {
  background: linear-gradient(180deg, #f6d979, var(--brand) 55%, var(--brand-dk));
  border-color: var(--brand-hi); color: var(--on-brand);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px -5px rgba(212,163,44,.55);
}
.svc-card-ico { display: flex; justify-content: center; }
.svc-card-lbl { font-size: 9.5px; font-weight: 700; margin-top: 5px; line-height: 1.2; }

/* toggle switch */
.switch {
  /* inline-block matters: as a bare inline <span> in a table cell the width
     and height would be ignored and the track would collapse to a hairline */
  display: inline-block; vertical-align: middle;
  width: 40px; height: 22px; border-radius: 12px; background: var(--card-3);
  border: 1px solid var(--border-2); cursor: pointer; position: relative; flex: none;
  transition: background .15s;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3);
  transition: left .15s, background .15s;
}
.switch.on { background: var(--green); border-color: var(--green); }
.switch.on::after { left: 20px; background: #fff; }
.switch-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; }

/* ================= SESSION RUNNING ================= */
.runbar {
  background: var(--panel); border: 1px solid var(--green-brd);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 12px;
}
.runbar-head {
  background: linear-gradient(90deg, rgba(34,197,94,.22), rgba(34,197,94,.08));
  padding: 10px 16px; display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 14px;
}
.runbar-badge {
  background: var(--green); color: #04140a; font-size: 10px; font-weight: 800;
  padding: 3px 10px; border-radius: 10px; text-transform: uppercase; letter-spacing: 1px;
}
.runbar-badge.paused { background: var(--yellow); }
.runbar-body { padding: 14px 16px; }
.kv-row { display: flex; gap: 26px; flex-wrap: wrap; }
.kv { min-width: 70px; }
.kv .k { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.kv .v { font-size: 13.5px; font-weight: 700; margin-top: 2px; }
.run-timer {
  font-size: 34px; font-weight: 900; color: var(--green);
  font-variant-numeric: tabular-nums; letter-spacing: 1px; margin: 10px 0 12px;
}

/* ================= CAFE POS ================= */
.pos-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 13px; align-items: start; }
.pos-search { margin-bottom: 12px; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 9px; }
.pos-item {
  background: var(--sheen), var(--panel); border: 1px solid var(--border); border-radius: 13px;
  padding: 10px; text-align: center; cursor: pointer; user-select: none;
  box-shadow: var(--shadow), var(--edge);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.pos-item:hover {
  transform: translateY(-3px); border-color: var(--brand);
  box-shadow: var(--shadow-lg), var(--edge);
}
.pos-item:active { transform: translateY(-1px); }
.pos-item-img {
  height: 66px; border-radius: 10px; padding: 4px;
  background: radial-gradient(circle at 50% 25%, var(--card-3), var(--card-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -10px 16px -10px rgba(0,0,0,.8);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.pos-item-img svg { width: 100%; height: 100%; }

/* small product thumbnail used in the menu & inventory tables */
.art-chip {
  display: inline-flex; width: 30px; height: 30px; padding: 2px; flex: none;
  border-radius: 7px; background: var(--card-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.art-chip svg { width: 100%; height: 100%; }
.pos-item .nm { font-weight: 600; font-size: 11.5px; }
.pos-item .pr { color: var(--brand-hi); font-weight: 700; font-size: 11.5px; margin-top: 2px; }
.pos-item .stk { font-size: 9.5px; color: var(--ink-3); margin-top: 1px; }
.pos-item .stk.low { color: var(--yellow); }
.pos-item.out { opacity: .4; }

.cart-line { display: flex; align-items: center; gap: 7px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.cart-line .nm { flex: 1; }
.qty-btn {
  width: 22px; height: 22px; border-radius: 6px; border: none; flex: none;
  background: var(--card-3); color: var(--ink); font-weight: 700; cursor: pointer; line-height: 1;
}
.qty-btn:hover { background: var(--brand); }
.cart-tot { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--ink-2); }
.cart-grand { font-size: 16px; font-weight: 800; color: var(--ink); }

/* ================= BILL ================= */
.cust-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; gap: 12px; align-items: center;
}
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--card-3), var(--card-2));
  border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; color: var(--ink-2);
}
.avatar.lg { width: 74px; height: 74px; font-size: 26px; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
/* when a photo is set it comes through as a background image */
.avatar[style*="background-image"] { background-size: cover; background-position: center; color: transparent; }
.badge-gold, .badge-silver, .badge-regular, .badge-platinum, .badge-vip {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 9px; border-radius: 9px; text-transform: uppercase; white-space: nowrap;
}
.badge-gold { background: linear-gradient(135deg, #b8860b, #ffd700); color: #241a00; }
.badge-silver { background: linear-gradient(135deg, #7c7c85, #d8d8e0); color: #17171c; }
.badge-platinum { background: linear-gradient(135deg, #4b5563, #cbd5e1); color: #10131a; }
.badge-vip { background: linear-gradient(135deg, #6d28d9, #c084fc); color: #fff; }
.badge-regular { background: var(--card-3); color: var(--ink-2); }

.inv-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 12.5px; }
.inv-grid .k { color: var(--ink-3); }
.inv-grid .v { text-align: right; font-weight: 600; }

.totals-line { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--ink-2); }
.totals-grand { display: flex; justify-content: space-between; padding: 9px 0 0; font-size: 19px; font-weight: 800; color: var(--ink); border-top: 1px solid var(--border-2); margin-top: 7px; }
.totals-grand .v { color: var(--brand-hi); }

.pay-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.pay-pills button {
  background: var(--card-2); border: 1px solid var(--border-2); color: var(--ink-2);
  padding: 7px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: 12px; cursor: pointer;
}
.pay-pills button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 700; }
.pay-pills button:disabled { opacity: .35; cursor: not-allowed; }

/* ================= SUB NAV (Reports / Settings / Services) ================= */
.subnav-wrap { display: grid; grid-template-columns: 185px 1fr; gap: 13px; align-items: start; }
.subnav { display: flex; flex-direction: column; gap: 3px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.subnav button {
  background: none; border: none; text-align: left; color: var(--ink-2);
  padding: 8px 11px; border-radius: 8px; font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.subnav button:hover { background: var(--card-2); color: var(--ink); }
.subnav button.on { background: var(--brand); color: var(--on-brand); font-weight: 700; }

/* ================= CHARTS ================= */
.chart-wrap { position: relative; }
/* Donut legend: without these a long service name ("Executive Room") keeps the
   legend column at its intrinsic width and pushes past the panel on a phone. */
.chart-wrap > div { min-width: 0; }
.chart-wrap > div > span { flex-wrap: wrap; }
.chart-wrap svg { max-width: 100%; }
.chart-tooltip {
  position: absolute; pointer-events: none; display: none;
  background: var(--card-3); border: 1px solid var(--border-2);
  border-radius: 8px; padding: 7px 10px; font-size: 12px; z-index: 5;
  white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.legend-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.legend-row span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.legend-chip { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

.hbar-row { display: grid; grid-template-columns: 125px 1fr 118px; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.hbar-track { background: var(--card-2); border-radius: 4px; height: 13px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; background: var(--series-blue); }
.hbar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 11.5px; }
/* 125 + 118 of fixed columns no longer fit beside a bar on a small phone */
@media (max-width: 480px) {
  .hbar-row { grid-template-columns: 92px 1fr 88px; gap: 7px; font-size: 11.5px; }
  .hbar-val { font-size: 10.5px; }
}

/* ================= ACTIVITY ================= */
.act-line { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; align-items: baseline; }
.act-line:last-child { border-bottom: none; }
.act-time { color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 11px; }
.act-amt { margin-left: auto; font-weight: 700; white-space: nowrap; }

/* ================= MODALS / TOAST / LOCK ================= */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 18px;
}
.modal {
  background: var(--sheen), var(--panel); border: 1px solid var(--border-2);
  border-radius: 18px; width: 100%; max-width: 540px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-lg), var(--edge);
  animation: modalIn .16s ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.modal.wide { max-width: 760px; }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 20px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--panel); z-index: 1;
}
.modal-title { font-weight: 800; font-size: 15.5px; }
.modal-x {
  background: none; border: none; color: var(--ink-3); font-size: 15px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
}
.modal-x:hover { background: var(--card-3); color: var(--ink); }
.modal-body { padding: 16px 20px 20px; }

.rate-box {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 14px;
  display: flex; justify-content: space-between; align-items: center; margin: 13px 0;
  gap: 12px; flex-wrap: wrap;
}
.rate-box .lbl { color: var(--ink-2); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.rate-box .val { font-weight: 800; font-size: 15px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--card-3); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 12px 20px; font-weight: 600; font-size: 13px;
  /* BELOW the modal overlay (z-index 100), deliberately. At 300 the toast — and
     its 60-second Undo button — floated over an open modal at the bottom
     centre, which is exactly where a modal's own buttons sit and exactly where
     a thumb lands on a touch till. A tap meant for Cancel could put a stopped
     table back on the clock. */
  z-index: 90; box-shadow: 0 6px 20px rgba(0,0,0,.55);
}

.lock-screen {
  position: fixed; inset: 0; background: var(--bg); z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}

/* ================= SAVE ALARM ================= */

.save-alarm {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000;
  background: var(--red); color: #fff;
  padding: 12px 18px; font-size: 13.5px; line-height: 1.6; text-align: center;
  box-shadow: 0 -6px 24px rgba(0,0,0,.45);
}

/* ================= CLOUD ================= */

.cloud-chip { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.cloud-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.cloud-ok   .cloud-dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.cloud-wait .cloud-dot { background: var(--yellow); animation: cloudPulse 1.1s ease-in-out infinite; }
.cloud-err  .cloud-dot { background: var(--red); }
.cloud-off  .cloud-dot { background: var(--ink-3); }
@keyframes cloudPulse { 50% { opacity: .35; } }

/* ================= USER GUIDE ================= */

.gd-steps, .gd-bullets {
  padding-left: 20px; margin: 0;
  line-height: 1.95; color: var(--ink-2); font-size: 13.5px;
}
.gd-steps li, .gd-bullets li { margin-bottom: 6px; }
.gd-lead { line-height: 1.85; font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px; }
.gd-key { font-weight: 700; color: var(--ink); }

/* Urdu. No web font is loaded — the counter machine may have no internet and a
   CDN font would simply fail — so we ask for the good Nastaliq faces if Windows
   has them and fall back to the Naskh faces that ship with it, which render
   Urdu correctly even if less beautifully. */
.gd-ur {
  font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Alvi Nastaleeq',
               'Urdu Typesetting', 'Segoe UI', Tahoma, sans-serif;
  line-height: 2.15;                 /* Urdu needs the extra leading to breathe */
}
.gd-ur .gd-steps, .gd-ur .gd-bullets { padding-left: 0; padding-right: 20px; line-height: 2.15; font-size: 14px; }
.gd-ur .gd-lead { line-height: 2.1; font-size: 14px; }
.gd-ur .panel-title { font-size: 14.5px; }
.gd-ur .tbl th, .gd-ur .tbl td { text-align: right; line-height: 2; }
.gd-ur .callout { border-left: none; border-right: 3px solid var(--brand); padding-left: 13px; padding-right: 13px; }
.gd-ur .muted.small { line-height: 2; font-size: 12.5px; }
/* Latin names, dates and figures inside Urdu text keep their own direction —
   without this "05-Aug-2026" is reordered into "Aug-2026-05". */
.gd-ur b, .gd-ur .gd-key { unicode-bidi: isolate; }
.gd-ur bdi { unicode-bidi: isolate; direction: ltr; }

/* ================= PROFILE MENU ================= */

.tb-user-wrap { position: relative; }
/* the account button on the far right of the top bar */
.tb-avatar {
  border: 1.5px solid var(--brand); border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-hi);
}
.tb-avatar:hover { background: var(--brand); color: var(--on-brand); }

.usr-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
  min-width: 214px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.usr-menu-head { padding: 9px 11px 10px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.usr-menu-head b { display: block; font-size: 13.5px; }
.usr-menu-head span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.usr-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border: none; border-radius: var(--radius-sm);
  background: none; color: var(--ink-2); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left;
}
.usr-menu button:hover { background: var(--card-2); color: var(--ink); }
.usr-menu button.danger { color: var(--red); }
.usr-menu .sep { height: 1px; background: var(--border); margin: 5px 0; }
/* opened from the right edge, it must grow leftward or it leaves the screen */
.usr-menu-right { left: auto; right: 0; }

/* ================= SIGN IN ================= */
/* Sits above everything including modals — a locked counter must not leak the
   screen underneath, and the running timers keep counting behind it. */
.auth-screen {
  position: fixed; inset: 0; z-index: 900;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 26px; text-align: center;
}
/* A block-level image ignores the card's text-align:center — it needs auto
   side margins of its own, or it sits hard against the left edge. */
.auth-card .brand-full { margin: 0 auto 6px; }
.auth-sub { font-size: 13px; color: var(--ink-2); font-weight: 600; margin-bottom: 16px; }
.auth-note {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 16px; text-align: left;
}
.auth-err { color: var(--red); font-size: 12.5px; font-weight: 700; min-height: 18px; margin-top: 10px; }

.auth-people { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; text-align: left; }
.auth-person {
  display: flex; align-items: center; gap: 11px; width: 100%; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; color: var(--ink);
}
.auth-person:hover { border-color: var(--border-2); }
.auth-person.on { border-color: var(--brand); background: var(--card-2); }
.auth-av {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 12.5px;
}
.auth-who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.auth-who b { font-size: 13.5px; }
.auth-who span { font-size: 11.5px; color: var(--ink-3); }

/* Printed demo PINs. Deliberately quiet — they unlock only accounts that
   announce themselves as demo, and they disappear once those are deleted. */
.auth-demo {
  margin-top: 12px; font-size: 11.5px; line-height: 1.6; color: var(--ink-3);
  background: var(--card-2); border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.auth-or {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.auth-pin { display: flex; gap: 8px; }
.auth-pin .input { flex: 1; text-align: center; letter-spacing: .4em; font-size: 17px; font-weight: 700; }
.auth-pin .btn { flex: none; }

@media (max-width: 480px) {
  .auth-card { padding: 22px 16px; }
}

/* ================= STATION BOARDS (snooker felt / PS5 console) ================= */
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 13px; }

.board-card {
  position: relative; overflow: hidden;
  background: var(--sheen), var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px;
  box-shadow: var(--shadow), var(--edge);
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.board-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--edge); }
.board-card.is-running {
  border-color: var(--green-brd);
  box-shadow: var(--shadow), var(--edge), 0 0 0 1px rgba(34,197,94,.16), 0 10px 34px -18px rgba(34,197,94,.75);
}
.board-card.is-paused {
  border-color: var(--yellow-brd);
  box-shadow: var(--shadow), var(--edge), 0 0 0 1px rgba(234,179,8,.16);
}
.board-card.is-maint { opacity: .55; filter: grayscale(.5); }

.board-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.board-name { font-weight: 750; font-size: 14px; letter-spacing: -.01em; }
.board-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.bb-running { background: linear-gradient(180deg, #34d27a, #16a34a); color: #05230f; }
.bb-free    { background: linear-gradient(180deg, #f36565, #d33a3a); color: #fff; }
.bb-paused  { background: linear-gradient(180deg, #f6cd3f, #d99a09); color: #241a00; }
.bb-maint   { background: linear-gradient(180deg, #8a8d95, #6b6b74); color: #fff; }

.board-art {
  width: 100%; display: block; border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 8px 22px -14px rgba(0,0,0,.9);
}

.board-timer {
  text-align: center; font-size: 23px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .4px; color: var(--green);
  text-shadow: 0 0 22px rgba(34,197,94,.35);
}
:root[data-theme="light"] .board-timer { text-shadow: none; }
.board-card.is-paused .board-timer { color: var(--yellow); }
.board-meta { text-align: center; font-size: 11.5px; color: var(--ink-2); }
.board-meta b { color: var(--ink); }
.board-rate { text-align: center; font-size: 11.5px; color: var(--ink-3); }
.board-amt { text-align: center; font-size: 13px; font-weight: 800; color: var(--brand-hi); }
.board-actions { display: flex; gap: 7px; }
.board-actions .btn { flex: 1; }

/* compact boards — art shrinks so a full floor fits on one screen */
.board-grid.compact { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 9px; }
.board-grid.compact .board-card { padding: 9px; gap: 6px; }
/* let the artwork keep its own 200:112 ratio — forcing a height squashes it */
.board-grid.compact .board-art { height: auto; }
.board-grid.compact .board-timer { font-size: 17px; }
.board-grid.compact .board-name {
  font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.board-grid.compact .board-badge { font-size: 8px; padding: 3px 7px; }
.board-grid.compact .board-rate,
.board-grid.compact .board-meta { font-size: 10px; }
.board-grid.compact .btn-sm { padding: 5px 7px; font-size: 11px; }

/* toast with an action (Undo) */
.toast { display: none; align-items: center; gap: 14px; }
.toast-act {
  background: var(--brand); border: none; color: var(--on-brand); font-weight: 700; font-size: 12px;
  padding: 5px 12px; border-radius: 7px; cursor: pointer; flex: none;
}
.toast-act:hover { filter: brightness(1.12); }

/* quick search rows */
.qs-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px;
  cursor: pointer; border: 1px solid transparent;
}
.qs-row:hover { background: var(--card-2); border-color: var(--border-2); }
.qs-ico {
  width: 30px; height: 30px; border-radius: 8px; flex: none; color: var(--brand);
  display: flex; align-items: center; justify-content: center; background: var(--card-2);
}

/* voided bill row */
tr.is-void td { opacity: .55; text-decoration: line-through; }
tr.is-void td .badge-void { text-decoration: none; opacity: 1; }
.badge-void {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .8px;
  padding: 2px 7px; border-radius: 9px; background: var(--red); color: #fff;
}

/* touch mode — bigger hit targets for a counter touchscreen */
body.touch .btn { padding: 12px 18px; font-size: 14px; }
body.touch .btn-sm { padding: 9px 13px; font-size: 13px; }
body.touch .input { padding: 13px 13px; font-size: 14px; }
body.touch .nav-item { padding: 12px 11px; font-size: 14px; }
body.touch .pill-tabs button, body.touch .seg button { padding: 10px 17px; font-size: 13.5px; }
body.touch .qty-btn { width: 30px; height: 30px; }
body.touch .tbl td { padding: 13px 10px; }

/* ================= MEMBERSHIP CARDS ================= */
.chip-on, .chip-off, .chip-bad {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .6px;
  padding: 2px 8px; border-radius: 9px; text-transform: uppercase;
}
.chip-on  { background: rgba(34,197,94,.18); color: var(--green); }
.chip-off { background: var(--card-3); color: var(--ink-3); }
.chip-bad { background: rgba(239,68,68,.18); color: var(--red); }

/* callout — a short piece of guidance the cashier needs to notice but not
   act on immediately; the left rule carries the meaning, not a loud fill */
.callout {
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  background: var(--card-2); border-radius: 10px;
  padding: 10px 12px; font-size: 12px; line-height: 1.55; color: var(--ink-2);
}
.callout .t {
  display: block; font-weight: 800; font-size: 12.5px;
  color: var(--ink); margin-bottom: 2px;
}
.callout.good { border-left-color: var(--green); }
.callout.good .t { color: var(--green); }
.callout b { color: var(--ink); }
.callout .btn { margin-top: 8px; }

/* kiosk balance panel — meant to be turned toward the customer */
.kiosk {
  border-radius: var(--radius); padding: 22px;
  background: radial-gradient(120% 150% at 80% 0%, rgba(212,163,44,.16), transparent 60%), var(--panel);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg), var(--edge);
  text-align: center;
}
.kiosk-bal {
  font-size: 46px; font-weight: 900; letter-spacing: -.03em; color: var(--brand-hi);
  font-variant-numeric: tabular-nums; line-height: 1.05; margin: 4px 0;
}
:root[data-theme="light"] .kiosk-bal { color: var(--brand); }
.kiosk-name { font-size: 19px; font-weight: 800; }
.kiosk-meta { color: var(--ink-2); font-size: 12.5px; }
.card-input {
  font-size: 22px !important; letter-spacing: 5px; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 700;
}

/* scan strip at the top of the billing screen */
.scan-bar {
  display: flex; gap: 9px; align-items: center; margin-bottom: 12px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  border: 1px dashed var(--border-2); background: var(--card-2);
}
.scan-bar .ic { color: var(--brand); }

/* ================= DASHBOARD HERO + LIVE STRIP ================= */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius); padding: 18px 20px 14px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(212,163,44,.20), transparent 58%),
    var(--sheen), var(--panel);
  box-shadow: var(--shadow-lg), var(--edge);
  display: flex; flex-direction: column; gap: 4px;
  color: var(--brand-hi);           /* the sparkline inherits this */
}
.hero-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 750; letter-spacing: .9px;
  text-transform: uppercase; color: var(--ink-3);
}
.hero-value {
  font-size: 34px; font-weight: 850; letter-spacing: -.03em; line-height: 1.05;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hero-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.pill-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 750; font-size: 11.5px; padding: 3px 9px; border-radius: 20px;
}
.pill-delta.up { background: rgba(34,197,94,.16); color: var(--green); }
.pill-delta.down { background: rgba(239,68,68,.16); color: var(--red); }
.pill-delta.down .ic { transform: scaleY(-1); }
.hero .spark { width: 100%; height: 54px; display: block; margin-top: 8px; }
.hero-target { margin-top: 8px; }
.hero-target .bar {
  height: 6px; border-radius: 4px; background: var(--card-3); overflow: hidden; margin-bottom: 4px;
}
.hero-target .bar span {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-hi));
}

.live-strip { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 3px; }
.live-chip {
  display: flex; align-items: center; gap: 9px; flex: none; cursor: pointer;
  padding: 9px 13px; border-radius: 11px;
  border: 1px solid var(--border-2);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .12s, border-color .12s;
}
.live-chip:hover { transform: translateY(-2px); border-color: var(--green-brd); }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  animation: livePulse 1.9s ease-in-out infinite;
}
.live-dot.is-paused { background: var(--yellow); box-shadow: 0 0 0 3px rgba(234,179,8,.18); animation: none; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.06); } }
.live-name { font-weight: 700; font-size: 12.5px; }
.live-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12.5px; color: var(--green); }
.live-chip .live-amt { font-size: 12px; font-weight: 700; color: var(--brand-hi); }

/* dashboard quick actions */
.quick-actions { display: flex; flex-direction: column; gap: 7px; }
.quick-actions .qa {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border-2); color: var(--ink);
  border-radius: var(--radius-sm); padding: 9px 12px;
  font-weight: 600; font-size: 12.5px; cursor: pointer; text-align: left;
}
.quick-actions .qa:hover { background: var(--card-2); border-color: var(--brand); }
.quick-actions .qa-i { width: 20px; text-align: center; font-size: 14px; }

/* theme toggle */
.theme-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; }
.theme-toggle button {
  background: transparent; border: none; color: var(--ink-3);
  padding: 7px 11px; font-size: 13px; cursor: pointer; line-height: 1;
}
.theme-toggle button.on { background: var(--brand); color: var(--on-brand); }

/* ================= PRINT ================= */
#receipt-print { display: none; }

@media print {
  /* --- receipt mode --- */
  body.rc-print { background: #fff; }
  body.rc-print .app, body.rc-print .modal-overlay, body.rc-print .toast { display: none !important; }
  /* THE RECEIPT WAS PRINTING A WHOLE PAGE FOR A HANDFUL OF LINES.
     Two reasons, and both had to go. It was positioned ABSOLUTE, which takes it
     out of the flow — so as far as the browser was concerned the page had no
     content in it at all and it fed a full sheet. And nothing ever told the
     browser the paper was a 76mm roll, so it laid the receipt out on A4 and the
     printer advanced an A4's worth of blank paper after every bill. The page
     size is set in JS at the moment of printing (see rcPagePaper), because an
     @page rule here would put every report onto a 76mm strip as well. */
  body.rc-print { margin: 0; padding: 0; }
  body.rc-print #receipt-print {
    display: block !important;
    position: static;
    width: auto; padding: 3mm 3mm 2mm;
    background: #fff; color: #000;
    font-family: "Courier New", monospace; font-size: 12px;
    /* A thermal head burns what the browser hands it. Three things were making
       that faint: the browser lightening ink to save it, grey anti-aliasing
       around every glyph, and a normal weight at 11px leaving strokes one dot
       wide that the paper barely takes. All three are refused here. */
    font-weight: 700;
    line-height: 1.35;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    -webkit-font-smoothing: none;
  }
  /* Nothing inside a receipt is grey. A muted class or an inherited variable
     resolving to #666 prints as a dither pattern, which on 58mm paper reads as
     smudge rather than text. */
  body.rc-print #receipt-print * {
    color: #000 !important;
    background: transparent !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: inherit;
  }
  body.rc-print #receipt-print b,
  body.rc-print #receipt-print h2,
  body.rc-print #receipt-print .rc-tot { font-weight: 900; }
  /* A trailing margin on the last line is another few millimetres of roll. */
  body.rc-print #receipt-print > *:last-child { margin-bottom: 0; }
  body.rc-print #receipt-print table { margin: 0; }
  body.rc-print #receipt-print p { margin: 2px 0; }
  #receipt-print h2 { text-align: center; font-size: 15px; margin-bottom: 2px; }
  #receipt-print .rc-center { text-align: center; white-space: pre-line; }
  #receipt-print .rc-line { border-top: 1px solid #000; margin: 5px 0; }
  #receipt-print table { width: 100%; border-collapse: collapse; font-size: 11px; }
  #receipt-print td { padding: 1px 0; vertical-align: top; }
  #receipt-print .rc-r { text-align: right; }
  #receipt-print .rc-tot { font-weight: bold; font-size: 13px; }

  /* --- normal print (reports etc.): readable light output --- */
  body:not(.rc-print) { background: #fff; }
  body:not(.rc-print) * {
    background: #fff !important; color: #000 !important;
    border-color: #555 !important; box-shadow: none !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    text-shadow: none !important; opacity: 1 !important;
  }
  body:not(.rc-print) .sidebar,
  body:not(.rc-print) .topbar,
  body:not(.rc-print) .btn,
  body:not(.rc-print) .seg, body:not(.rc-print) .pill-tabs,
  body:not(.rc-print) input, body:not(.rc-print) select,
  body:not(.rc-print) .subnav,
  body:not(.rc-print) .toast,
  body:not(.rc-print) .modal-overlay { display: none !important; }
  body:not(.rc-print) .hbar-fill { background: #555 !important; }
  body:not(.rc-print) .dot, body:not(.rc-print) .legend-chip { background: #555 !important; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1150px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .pos-wrap { grid-template-columns: 1fr; }
  .svc-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .subnav-wrap { grid-template-columns: 1fr; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .sidebar { width: 64px; }
  .sidebar .brand-name, .sidebar .nav-lbl, .sidebar .nav-badge, .sidebar .btn-new-session,
  .sidebar .nav-wait-lbl, .sidebar .nav-wait-note { display: none; }
}

/* The topbar is a flex row of fixed-width chips and buttons — it cannot shrink,
   so on a narrow counter screen it used to push the whole page sideways. Drop
   the least useful controls in tiers instead, cheapest first. */
@media (max-width: 900px) {
  #tb-keys, #tb-full { display: none; }        /* shortcuts need a keyboard; fullscreen is desktop-only */
}
@media (max-width: 700px) {
  #tb-date { display: none; }                  /* the date is already on every receipt */
  .tb-welcome span { display: none; }
}
@media (max-width: 560px) {
  /* padding-right leaves room for the bell's notification bubble, which hangs
     5px past its button and would otherwise scroll the whole page */
  .topbar { gap: 8px; padding-right: 6px; }
  #tb-time, .tb-welcome { display: none; }
}

/* ==========================================================================
   v1.5 — PREMIUM POLISH LAYER
   A cascade layer, on purpose: every rule here overrides the base by coming
   later, so the structural CSS above stays untouched and reviewable. Nothing
   in this layer moves layout — colour, depth, motion and focus only.
   ========================================================================== */

/* ---- depth: the whole app sits on a lit stage, not a flat sheet ---- */
body {
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(212,163,44,.13), transparent 58%),
    radial-gradient(1000px 560px at 4% 2%, rgba(59,130,246,.08), transparent 60%),
    linear-gradient(180deg, #0c0c10, var(--bg) 340px);
  background-attachment: fixed;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(212,163,44,.14), transparent 58%),
    linear-gradient(180deg, #f2efe7, var(--bg) 340px);
  background-attachment: fixed;
}

/* ---- typography: quiet authority ---- */
body { font-family: "Segoe UI Variable Text", "Inter", "Segoe UI", system-ui, sans-serif; }
.page-title, .panel-title, .modal-title, .stat-value, .mini-big, .run-timer, .totals-grand {
  font-family: "Segoe UI Variable Display", "Inter", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.page-title { position: relative; padding-bottom: 2px; }
.page-title::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 44px; height: 3px;
  border-radius: 2px; background: linear-gradient(90deg, var(--brand-hi), transparent);
}

/* ---- panels & cards: a soft key-light from the top-left ---- */
.panel, .stat, .mini, .fcard, .board-card, .modal, .auth-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 32px -14px rgba(0,0,0,.6);
}
:root[data-theme="light"] .panel, :root[data-theme="light"] .stat, :root[data-theme="light"] .mini,
:root[data-theme="light"] .fcard, :root[data-theme="light"] .board-card,
:root[data-theme="light"] .modal, :root[data-theme="light"] .auth-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 26px -16px rgba(30,25,10,.35);
}
.stat, .mini, .fcard, .pos-item, .svc-card, .auth-person {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.stat:hover, .mini:hover, .fcard:hover, .pos-item:hover, .svc-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 36px -14px rgba(0,0,0,.65);
}

/* ---- buttons: pressable, not paintable ---- */
.btn { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px) scale(.99); filter: brightness(.96); }
.btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 22px -4px rgba(212,163,44,.7);
}
.btn:focus-visible, .input:focus-visible, .nav-item:focus-visible,
.tb-icon:focus-visible, .subnav button:focus-visible {
  outline: 2px solid var(--brand-hi); outline-offset: 2px;
}

/* ---- forms: the focused field is unmistakably the live one ---- */
.input { transition: border-color .13s, box-shadow .13s, background .13s; }
.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft), inset 0 1px 2px rgba(0,0,0,.25);
}
.field label { letter-spacing: .015em; }

/* ---- sidebar: the active page glows, the rest wait their turn ---- */
.nav-item { transition: background .13s, color .13s, transform .13s, box-shadow .13s; }
.nav-item:hover { transform: translateX(2px); }
.nav-item.active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 20px -6px rgba(212,163,44,.55);
}
.nav-item .ic-rich { filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.nav-item.active .ic-rich { filter: drop-shadow(0 1px 2px rgba(58,44,8,.5)); }

/* ---- topbar: chips share one quiet language ---- */
.tb-chip, .tb-icon {
  transition: background .13s, border-color .13s, color .13s, transform .13s;
}
.tb-icon:hover { transform: translateY(-1px); border-color: var(--border-2); }

/* ---- tables: header whispers, rows answer on hover ---- */
.tbl thead th, .tbl tr:first-child th {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--card-2) 70%, transparent); }

/* ---- modals: arrive like a card dealt, not a page loaded ---- */
.modal-overlay { backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); }
.modal { animation: modalIn .2s cubic-bezier(.2,.9,.3,1.2); }

/* ---- toasts: gold-edged slips, sliding up from the counter ---- */
.toast {
  border-left: 3px solid var(--brand);
  animation: toastIn .22s cubic-bezier(.2,.9,.3,1.15);
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(212,163,44,.12);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(14px); } }

/* ---- scrollbars: present when needed, silent otherwise ---- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-3) 38%, transparent);
  border-radius: 5px; border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-dk); border: 2px solid transparent; background-clip: content-box; }

/* ---- the payment moment deserves ceremony ---- */
.totals-grand {
  padding-top: 10px; margin-top: 6px;
  border-top: 1px dashed var(--border-2);
}
.totals-grand .v { text-shadow: 0 0 22px rgba(212,163,44,.35); }

/* ---- selection & little things ---- */
::selection { background: var(--brand); color: var(--on-brand); }
.badge-gold { box-shadow: 0 0 12px -2px rgba(212,163,44,.5); }
.dot { box-shadow: 0 0 8px -1px currentColor; }

/* ==========================================================================
   MEMBERSHIP CARD — the plastic, drawn
   A card the customer already holds in their hand. Showing them a number in a
   table asks them to trust that it is theirs; showing them the card they are
   holding does not. The tier is the whole design language: brushed silver,
   warm gold, deep platinum, each with its own sheen.
   ========================================================================== */

.mcard {
  position: relative;
  aspect-ratio: 1.586;                 /* ID-1, the real credit-card ratio */
  width: 100%; max-width: 380px;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -1px 0 rgba(0,0,0,.35) inset,
    0 18px 40px -18px rgba(0,0,0,.85),
    0 2px 6px rgba(0,0,0,.35);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.mcard:hover { transform: translateY(-3px) rotate(-.35deg); }

/* the sweep of light across the plastic */
.mcard::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 22%,
                    rgba(255,255,255,0) 42%, rgba(255,255,255,.10) 68%, rgba(255,255,255,0) 82%);
}
/* fine brushed-metal grain, so the gradient does not read as flat plastic */
.mcard::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .16;
  background: repeating-linear-gradient(115deg,
    rgba(255,255,255,.55) 0 1px, rgba(255,255,255,0) 1px 4px);
  mix-blend-mode: overlay;
}
.mcard > * { position: relative; z-index: 3; }

.mcard-silver   { background: linear-gradient(135deg, #7d8590 0%, #cfd6de 28%, #8e97a2 55%, #e8edf2 74%, #6f7883 100%); color: #10151b; }
.mcard-gold     { background: linear-gradient(135deg, #7a5510 0%, #e6be5c 26%, #a87c1d 52%, #f6dc94 74%, #6d4a0c 100%); color: #241802; }
.mcard-platinum { background: linear-gradient(135deg, #1d2430 0%, #59657a 26%, #2a3342 52%, #8794a8 76%, #161c26 100%); color: #f2f6ff; }
.mcard-regular  { background: linear-gradient(135deg, #23262e 0%, #3b414f 30%, #22252c 60%, #4a5162 80%, #1b1e24 100%); color: #e9edf5; }
.mcard-vip      { background: linear-gradient(135deg, #3b0d3f 0%, #8e3fa0 28%, #4b1352 54%, #c47ad4 76%, #2c0930 100%); color: #fdf2ff; }

.mcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mcard-brand { font-weight: 900; letter-spacing: 2.2px; font-size: 13px; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.mcard-brand small { display: block; font-size: 8px; letter-spacing: 1.4px; opacity: .72; font-weight: 700; margin-top: 1px; }
.mcard-tier {
  font-size: 9.5px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px;
  background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(2px);
}

.mcard-mid { display: flex; align-items: center; gap: 12px; }

/* EMV chip — the detail that makes a rectangle read as a card */
.mcard-chip {
  width: 42px; height: 32px; border-radius: 6px; flex: 0 0 auto;
  background: linear-gradient(135deg, #f6dfa0, #c99f34 45%, #f7e6b4 70%, #a67c1c);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.4);
  position: relative;
}
.mcard-chip::before, .mcard-chip::after {
  content: ''; position: absolute; background: rgba(0,0,0,.42);
}
.mcard-chip::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.mcard-chip::after  { top: 4px; bottom: 4px; left: 50%; width: 1.5px; transform: translateX(-50%); }

.mcard-wifi { opacity: .8; flex: 0 0 auto; }

.mcard-no {
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Consolas, monospace;
  font-size: 17px; font-weight: 800; letter-spacing: 2.6px;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 -1px 0 rgba(0,0,0,.35);
}
.mcard-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.mcard-holder { min-width: 0; }
.mcard-label { font-size: 7.5px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .65; font-weight: 800; }
.mcard-name {
  font-size: 13px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px;
}
.mcard-valid { text-align: right; }
.mcard-valid b { font-size: 12.5px; font-weight: 850; letter-spacing: .6px; }

/* states the plastic itself should show */
.mcard.is-dead { filter: grayscale(.72) brightness(.72); }
.mcard-stamp {
  position: absolute; z-index: 4; top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(-13deg);
  font-size: 20px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
  color: #fff; padding: 6px 18px; border: 3px solid #fff; border-radius: 8px;
  background: rgba(190,25,25,.82); text-shadow: 0 1px 2px rgba(0,0,0,.5);
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.9);
}
@media (max-width: 520px) { .mcard-no { font-size: 14px; letter-spacing: 1.6px; } }

/* ==========================================================================
   FINISH — the layer that makes it feel like a product, not a page
   Appended last on purpose: every rule here is a deliberate override, and
   deleting this whole block returns the app to exactly how it looked before.
   ========================================================================== */

/* Type. The single biggest tell of a money screen is whether its digits line
   up in a column. They did not. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.tbl .num, .stat-value, .kiosk-bal, .board-amt, .board-rate, .board-timer,
.totals-line span:last-child, .totals-grand .v, .mini-big, .inv-grid .v,
.rate-box .val, .live-amt, .live-time {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.page-title { letter-spacing: -.02em; }
.panel-title { letter-spacing: -.008em; }

/* Depth. One ambient shadow doing all the work reads flat; a tight contact
   shadow under a wide soft one is what a raised surface actually looks like. */
.panel, .board-card, .stat-card, .cust-box, .kiosk {
  box-shadow:
    0 1px 1px rgba(0,0,0,.28),
    0 4px 10px -6px rgba(0,0,0,.45),
    0 22px 46px -28px rgba(0,0,0,.65),
    var(--edge);
}
:root[data-theme="light"] .panel,
:root[data-theme="light"] .board-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .cust-box,
:root[data-theme="light"] .kiosk {
  box-shadow:
    0 1px 1px rgba(16,18,27,.05),
    0 4px 10px -6px rgba(16,18,27,.10),
    0 22px 46px -30px rgba(16,18,27,.22),
    var(--edge);
}

/* Stat cards carry the numbers the owner looks at first, so they get the
   strongest treatment: a wash of brand light from the corner the icon sits in. */
.stat-card { position: relative; overflow: hidden; }
.stat-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 140% at 100% 0%, rgba(212,163,44,.10), transparent 55%);
}
:root[data-theme="light"] .stat-card::after {
  background: radial-gradient(120% 140% at 100% 0%, rgba(169,117,11,.09), transparent 55%);
}
.stat-value { letter-spacing: -.02em; }

/* Tables: a row you can follow across a wide screen. */
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.tbl th {
  font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase;
  font-weight: 800; opacity: .72;
}

/* Buttons: a real press, and a primary that glows rather than just brightens. */
.btn { will-change: transform; }
.btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 1px 2px rgba(0,0,0,.35),
    0 8px 20px -10px rgba(212,163,44,.65);
}
.btn-primary:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.32); }

/* The sidebar's live page should be obvious from across the counter. */
.nav-item { transition: background .14s, color .14s, transform .12s; }
.nav-item:hover { transform: translateX(2px); }
.nav-item.active { position: relative; }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand);
  box-shadow: 0 0 10px -1px var(--brand);
}

/* Modals sit ON the app, so the app should recede behind them. */
.modal-overlay { backdrop-filter: blur(3px) saturate(.85); }
.modal { box-shadow: 0 32px 80px -24px rgba(0,0,0,.8), var(--edge); }

/* Scrollbars, because a default grey bar undoes a dark panel. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 20px; border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--brand) 55%, transparent); background-clip: content-box; }

/* A running table should be visibly alive, not merely green-bordered. */
@keyframes xdPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.board-card.is-running .bb-running { animation: xdPulse 2.4s ease-in-out infinite; }
.live-dot:not(.is-paused) { animation: xdPulse 2s ease-in-out infinite; }

/* Nobody wants a counter screen animating in their face all evening. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .mcard:hover, .nav-item:hover, .board-card:hover { transform: none; }
}

/* ---- product tiles: a thing on a shelf, not a sticker on a square ---- */
.pos-item-img {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,.10), transparent 58%),
    radial-gradient(circle at 50% 25%, var(--card-3), var(--card-2));
}
/* the surface it is standing on */
.pos-item-img::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 5px; height: 8px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
}
:root[data-theme="light"] .pos-item-img::after {
  background: radial-gradient(closest-side, rgba(16,18,27,.22), transparent);
}
.pos-item-img svg { position: relative; z-index: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
:root[data-theme="light"] .pos-item-img svg { filter: drop-shadow(0 2px 3px rgba(16,18,27,.22)); }
.pos-item:hover .pos-item-img svg { transform: translateY(-2px) scale(1.04); }
.pos-item-img svg { transition: transform .16s cubic-bezier(.2,.7,.3,1); }

/* ---- station artwork: room light above, floor below ---- */
.board-art {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.09), transparent 60%),
    var(--card-2);
}
.board-card.is-running .board-art {
  box-shadow:
    inset 0 0 0 1px rgba(34,197,94,.22),
    inset 0 0 34px -12px rgba(34,197,94,.45),
    0 8px 22px -14px rgba(0,0,0,.9);
}
.board-card.is-paused .board-art {
  box-shadow:
    inset 0 0 0 1px rgba(234,179,8,.22),
    0 8px 22px -14px rgba(0,0,0,.9);
}

/* one column, so a caller centring with flex cannot lay the id beside the card */
.mcard-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 380px; }
.mcard-sub { text-align: center; margin-top: 8px; }

/* ==========================================================================
   OPEN TABS — the counter keeps several pages in hand at once
   ========================================================================== */
.tab-bar {
  display: flex; align-items: flex-end; gap: 3px;
  padding: 8px 14px 0; margin: 0 0 -1px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--panel) 55%, transparent));
}
.tab-bar::-webkit-scrollbar { height: 0; }
.tab-bar:empty { display: none; }

.tab {
  display: flex; align-items: center; gap: 7px; flex: 0 0 auto;
  max-width: 190px; padding: 8px 10px 8px 13px;
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: color-mix(in srgb, var(--card-2) 70%, transparent);
  color: var(--ink-2); font-size: 12.5px; font-weight: 600;
  cursor: pointer; user-select: none; position: relative; top: 1px;
  transition: background .13s, color .13s;
}
.tab:hover { background: var(--card-3); color: var(--ink); }
.tab.on {
  background: var(--panel); color: var(--ink);
  border-color: var(--border);
  box-shadow: 0 -2px 0 var(--brand) inset, 0 -8px 14px -10px rgba(0,0,0,.6);
}
/* the live tab joins the page below it rather than sitting on top of it */
.tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--panel);
}
.tab-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-x {
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 3px 4px; border-radius: 5px;
  opacity: .5; flex: 0 0 auto;
}
.tab-x:hover { opacity: 1; background: var(--red-soft, rgba(220,80,80,.18)); color: var(--red); }
.tab-add {
  flex: 0 0 auto; margin-left: 4px; align-self: center;
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px dashed var(--border); background: none; color: var(--ink-3);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.tab-add:hover { color: var(--brand-hi); border-color: var(--brand); border-style: solid; }

/* the picker behind "+" */
.tab-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.tab-pick-btn {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 12px 13px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card-2); color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 600;
}
.tab-pick-btn:hover { border-color: var(--brand); background: var(--card-3); }

@media (max-width: 700px) {
  .tab-bar { padding: 6px 10px 0; }
  .tab { max-width: 130px; font-size: 12px; padding: 7px 8px 7px 11px; }
}

/* ---- "a new version is ready" ---- */
.pwa-update {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 9000; display: flex; align-items: center; gap: 16px;
  padding: 11px 14px 11px 18px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--brand);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(212,163,44,.18);
  font-size: 13.5px; color: var(--ink); max-width: calc(100vw - 24px);
  animation: pwaUp .3s cubic-bezier(.2,.7,.3,1);
}
.pwa-update span { display: flex; align-items: center; gap: 8px; }
@keyframes pwaUp { from { opacity: 0; transform: translate(-50%, 14px); } }
@media (max-width: 520px) {
  .pwa-update { flex-direction: column; align-items: stretch; gap: 10px; left: 12px; right: 12px; transform: none; }
  @keyframes pwaUp { from { opacity: 0; transform: translateY(14px); } }
}

/* a real photo of the shop's own table, in place of the drawing */
.board-photo {
  aspect-ratio: 200 / 112;
  background-size: cover; background-position: center;
}
.st-thumb { width: 74px; height: 42px; object-fit: cover; border-radius: 6px; display: block;
  border: 1px solid var(--border); }