/* =====================================================================
   WNW v51.18 — BACKSTAGE, admin realm (/wnwent)
   ---------------------------------------------------------------------
   Loads AFTER admin.css and admin-ui-v50.css and is the last word on the
   admin panel's appearance. It deliberately does not modify either of
   those files: preflight and eleven test-*.js scripts read them as text
   and assert on literal substrings, so restyling in place would break the
   release gate for purely cosmetic reasons.

   admin-ui-v50.css declares nearly everything !important but drives it
   through --ui-* custom properties. Redefining those properties retunes
   the whole panel without fighting a single !important. Only the values
   that escaped the tokens are overridden by selector below.

   Realm isolation (CLAUDE.md): this file is admin-only. The sales,
   customer and organizer realms carry their own copies on purpose. Do
   not factor a shared theme out of them.

   Canonical tokens — gold on dark glass. Duplicate into hub.css,
   sales-backstage.css and organizer-backstage.css. Do not extract a shared
   stylesheet.
     --bk-void      #080808
     --bk-deck      #080808
     --bk-panel     glass white 7%
     --bk-ink       #f4efe6
     --bk-signal    #d4af37   gold; highlight #f0d060
     --bk-sans      Cairo
     --bk-display   Cairo
     --bk-mono      Cairo
   ===================================================================== */

/* ---------- 1. instrument palette ---------- */

:root {
  --bk-void:      #080808;
  --bk-deck:      #080808;
  --bk-panel:     rgba(255,255,255,.07);
  --bk-panel-2:   rgba(255,255,255,.10);
  --bk-panel-3:   rgba(255,255,255,.14);

  --bk-rule:      rgba(255,255,255,.16);
  --bk-rule-2:    rgba(255,255,255,.22);
  --bk-rule-3:    rgba(255,255,255,.32);

  --bk-ink:       #f4efe6;
  --bk-ink-2:     #d8d2c6;
  --bk-ink-3:     #a8a296;

  --bk-signal:    #d4af37;
  --bk-signal-2:  #f0d060;
  --bk-signal-bg: rgba(212,175,55,.14);
  --bk-signal-ln: rgba(212,175,55,.42);

  --bk-go:        #3ed68b;
  --bk-go-bg:     rgba(62,214,139,.11);
  --bk-stop:      #ff5347;
  --bk-stop-bg:   rgba(255,83,71,.11);
  --bk-info:      #3fc6ed;
  --bk-info-bg:   rgba(63,198,237,.11);

  --bk-sans: 'Cairo', system-ui, sans-serif;
  --bk-display: 'Cairo', system-ui, sans-serif;
  --bk-mono: 'Cairo', system-ui, sans-serif;

  --bk-ease: cubic-bezier(.22,1,.36,1);

  /* 32px hairline grid — the deck the instruments sit on */
  --bk-grid:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 32px 100%;

  /* Sticky chrome + popups. Light mode retunes these; do not hardcode
     rgba(8,8,8) / #14110f on the surfaces that stay on screen. */
  --bk-topbar:       rgba(8,8,8,.82);
  --bk-chrome:       rgba(10,10,13,.92);
  --bk-sticky:       rgba(14,14,17,.90);
  --bk-overlay:      rgba(6,6,8,.72);
  --bk-popup:        #14141a;
  --bk-popup-shadow: 0 40px 90px -24px rgba(0,0,0,.92);
  --bk-input:        #14110f;
  --bk-chip:         rgba(255,255,255,.05);
  --bk-chip-hover:   rgba(255,255,255,.09);
}

/* ---------- 2. deck ---------- */

html { background: var(--bk-void); color-scheme: dark; }
html, body, input, select, textarea { color-scheme: dark; }

body {
  background: var(--bk-deck);
  color: var(--bk-ink);
  font-family: var(--bk-sans);
  -webkit-font-smoothing: antialiased;
}

/* Warm gold bloom — no pink, no violet. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 70% at 82% 18%, rgba(240,208,96,.12), transparent 58%),
    radial-gradient(90% 80% at 12% 82%, rgba(212,175,55,.08), transparent 62%),
    var(--bk-grid);
}

body > * { position: relative; z-index: 1; }

/* Tabular figures everywhere. Counts that jitter while polling are the
   single most distracting thing on a live operations panel. */
body, input, select, button, table, .cards, .metric {
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--bk-signal); color: #0a0a0a; }

/* ---------- 3. topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  min-height: 58px;
  background: var(--bk-topbar);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--bk-rule);
}

/* Accent tell-tale along the bottom edge — the panel is armed. */
.topbar::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bk-signal-ln), transparent);
}

.bar-mark { width: 42px; height: auto; opacity: .95; }
.bar-mark path { fill: var(--bk-ink); }

.topbar .event-context {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 5px 5px 12px;
  border: 1px solid var(--bk-rule);
  border-radius: 999px;
  background: var(--bk-panel);
}
.topbar .event-context > span {
  font-family: var(--bk-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bk-ink-3);
}
.topbar .event-context select {
  min-width: 190px;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: var(--bk-panel-2) !important;
  border: 1px solid var(--bk-rule) !important;
  color: var(--bk-ink) !important;
  font-size: 12px !important;
}
.topbar .event-context b {
  font-family: var(--bk-mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--bk-signal);
}

.who { color: var(--bk-ink); }
.who .role {
  font-family: var(--bk-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bk-ink-3);
}

.topbar #logoutBtn,
.topbar .ghost {
  padding: 8px 15px;
  border: 1px solid var(--bk-rule-2);
  border-radius: 999px;
  background: transparent;
  color: var(--bk-ink-2);
  font-family: var(--bk-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: .2s var(--bk-ease);
}
.topbar a.bk-hub-link:hover {
  border-color: var(--bk-signal-ln);
  color: var(--bk-signal-2);
  background: var(--bk-signal-bg);
}
.topbar #logoutBtn:hover {
  border-color: var(--bk-stop);
  color: var(--bk-stop);
  background: var(--bk-stop-bg);
}

/* ---------- 4. retune the v50 token set ---------- */

.dashboard-layout {
  /* admin.css re-scopes its own dark :root tokens to a LIGHT set on
     .dashboard-layout (its line 1272 block) and .side-nav flips them back.
     Retune that set here too, or every `var(--fg)` in the panel keeps
     resolving to #16191d on a black surface. */
  --bg: #080808;
  --bg-2: rgba(255,255,255,.07);
  --fg: #f4efe6;
  --fg-muted: #d8d2c6;
  --fg-faint: #a8a296;
  --line: rgba(255,255,255,.16);
  --panel-soft: rgba(255,255,255,.10);
  --panel-softer: rgba(255,255,255,.14);
  --success: #3ed68b;
  --success-soft: rgba(62,214,139,.11);
  --warning: #d4af37;
  --warning-soft: rgba(212,175,55,.14);
  --danger: #ff5347;
  --danger-soft: rgba(255,83,71,.11);

  --ui-bg: transparent;
  --ui-card: rgba(255,255,255,.07);
  --ui-card-soft: rgba(255,255,255,.10);
  --ui-text: #f4efe6;
  --ui-muted: #d8d2c6;
  --ui-faint: #a8a296;
  --ui-line: rgba(255,255,255,.16);
  --ui-line-strong: rgba(255,255,255,.22);
  --ui-accent: #d4af37;
  --ui-green: #3ed68b;
  --ui-green-bg: rgba(62,214,139,.11);
  --ui-gold: #d4af37;
  --ui-gold-bg: rgba(212,175,55,.14);
  --ui-red: #ff5347;
  --ui-red-bg: rgba(255,83,71,.11);
  --ui-shadow: none;
  background: transparent !important;
  color: var(--bk-ink) !important;
}

/* ---------- 5. side nav ---------- */

.side-nav,
.dashboard-layout .side-nav {
  position: sticky;
  top: 74px;
  padding: 14px 11px !important;
  border: 1px solid var(--bk-rule) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, var(--bk-panel) 0%, var(--bk-void) 190%) !important;
  box-shadow: none !important;
  color: var(--bk-ink) !important;
}

.side-title {
  padding: 4px 10px 12px;
  font-family: var(--bk-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bk-ink-3);
}

.dashboard-layout .side-nav .side-link,
.side-link {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--bk-ink-2) !important;
  font-family: var(--bk-sans) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  text-align: start;
  transition: color .18s var(--bk-ease), background .18s var(--bk-ease);
}

/* The signal rail. Inline-start so it lands on the right in RTL. */
.dashboard-layout .side-nav .side-link::before,
.side-link::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--bk-signal);
  transform: translateY(-50%);
  transition: height .22s var(--bk-ease);
}

.dashboard-layout .side-nav .side-link:hover,
.side-link:hover {
  background: rgba(255,255,255,.035) !important;
  color: var(--bk-ink) !important;
}

.dashboard-layout .side-nav .side-link.active,
.side-link.active {
  background: var(--bk-signal-bg) !important;
  color: var(--bk-signal-2) !important;
  font-weight: 600 !important;
}
.dashboard-layout .side-nav .side-link.active::before,
.side-link.active::before { height: 18px; }

/* LIVE gets a real beacon, not a label. */
.live-side-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--bk-mono) !important;
  font-size: 11px !important;
  letter-spacing: .06em;
}
.live-side-link::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--bk-stop);
  box-shadow: 0 0 0 0 rgba(255,83,71,.55);
  animation: bk-beacon 2s infinite;
}
@keyframes bk-beacon {
  0%   { box-shadow: 0 0 0 0 rgba(255,83,71,.5); opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(255,83,71,0); opacity: .65; }
  100% { box-shadow: 0 0 0 0 rgba(255,83,71,0); opacity: 1; }
}

.side-nav::-webkit-scrollbar-thumb { background: var(--bk-rule-2); border-radius: 3px; }

/* ---------- 6. section headers ---------- */

.dashboard-layout .admin-section > .section-head {
  border-bottom: 1px solid var(--bk-rule) !important;
  background: var(--bk-sticky) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
}

/* admin.css line 1309 uses `.admin-section > .section-head h1` — a more
   specific selector than `.section-head h1`, with a hardcoded #101317.
   Match its shape or the heading stays near-black on the dark deck. */
.dashboard-layout .admin-section > .section-head h1,
.dashboard-layout .admin-section > .section-head h2,
.dashboard-layout .admin-section > .section-head h3,
.dashboard-layout .section-head h1 {
  font-family: var(--bk-display) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  color: var(--bk-ink) !important;
  text-shadow: none !important;
}
.dashboard-layout .admin-section > .section-head h1,
.dashboard-layout .section-head h1 {
  font-size: clamp(23px, 2.3vw, 31px) !important;
}
.dashboard-layout .admin-section > .section-head {
  background: var(--bk-sticky) !important;
  border-bottom: 1px solid var(--bk-rule) !important;
}
.dashboard-layout .section-head .note,
.dashboard-layout .note {
  color: var(--bk-ink-2) !important;
  font-size: 12px !important;
  line-height: 1.75 !important;
}

/* ---------- 7. blocks ---------- */

.dashboard-layout .block,
.dashboard-layout .card,
.dashboard-layout .item,
.dashboard-layout .user-card,
.dashboard-layout .user-row,
.dashboard-layout .customer-admin-card,
.dashboard-layout .provider-card,
.dashboard-layout .finance-item,
.dashboard-layout .waitlist-row,
.dashboard-layout .seat-section-row {
  background: var(--bk-panel) !important;
  border: 1px solid var(--bk-rule) !important;
  color: var(--bk-ink) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(18px);
}
.dashboard-layout .customer-admin-card .user-meta,
.dashboard-layout .user-meta {
  background: var(--bk-panel-2) !important;
  border-bottom: 1px solid var(--bk-rule) !important;
  color: var(--bk-ink) !important;
}
.dashboard-layout .customer-admin-card .user-meta strong,
.dashboard-layout .user-meta strong {
  color: var(--bk-ink) !important;
}
.dashboard-layout .customer-admin-card > .row.tight {
  background: transparent !important;
  border-top-color: var(--bk-rule) !important;
}
.dashboard-layout .customer-control-grid label {
  color: var(--bk-ink-2) !important;
}
.dashboard-layout .operations-banner,
.dashboard-layout .ops-switch,
.dashboard-layout .critical-control,
.dashboard-layout .provider-card,
.dashboard-layout .legend-seat,
.dashboard-layout .fixed-ticket-class,
.dashboard-layout .sales-bar-controls label,
.dashboard-layout .sponsor-global-controls label {
  background: var(--bk-panel) !important;
  color: var(--bk-ink) !important;
  border-color: var(--bk-rule) !important;
}

.dashboard-layout .block {
  position: relative;
  border-radius: 14px !important;
  overflow: visible !important;
}

/* Corner tick, top inline-start. One small mechanical mark per instrument. */
.dashboard-layout .block::before {
  content: '';
  position: absolute;
  inset-inline-start: -1px;
  top: -1px;
  width: 13px;
  height: 13px;
  border-top: 1px solid var(--bk-signal-ln);
  border-inline-start: 1px solid var(--bk-signal-ln);
  border-start-start-radius: 14px;
  pointer-events: none;
}

.dashboard-layout .block h2,
.dashboard-layout .block-head h2 {
  font-family: var(--bk-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: var(--bk-ink) !important;
}

.dashboard-layout .block-head {
  border-bottom: 1px solid var(--bk-rule) !important;
}

.subsection-title,
.designer-section-label {
  font-family: var(--bk-mono) !important;
  font-size: 8.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--bk-ink-3) !important;
}

/* ---------- 8. controls ---------- */
/* Specificity must beat admin-ui-v50.css `.dashboard-layout input:not([type=checkbox])…` */

.dashboard-layout input:not([type=checkbox]):not([type=radio]):not([type=range]),
.dashboard-layout select,
.dashboard-layout textarea,
.dashboard-layout input[type="search"],
.dashboard-layout input[type="date"],
.dashboard-layout input[type="datetime-local"],
.dashboard-layout input[type="time"],
.dashboard-layout input[type="number"],
.dashboard-layout input[type="email"],
.dashboard-layout input[type="tel"],
.dashboard-layout input[type="text"],
.dashboard-layout input[type="password"],
.dashboard-layout .customer-control-grid input,
.dashboard-layout .customer-control-grid select,
.dashboard-layout #customerSearch {
  background: var(--bk-panel-2) !important;
  color: var(--bk-ink) !important;
  border: 1px solid var(--bk-rule-2) !important;
  border-radius: 9px !important;
  font-family: var(--bk-sans) !important;
  box-shadow: none !important;
  color-scheme: dark;
  transition: border-color .18s var(--bk-ease), box-shadow .18s var(--bk-ease);
}
.dashboard-layout select option {
  background: var(--bk-input) !important;
  color: var(--bk-ink) !important;
}

/* Opaque fill so Windows does not paint an empty <select> white.
   No custom chevron: a drawn arrow sits on top of the native control
   and reads as a scratch overlay, especially when the list is empty. */
.dashboard-layout select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--bk-input) !important;
  background-image: none !important;
  color: var(--bk-ink) !important;
}
.dashboard-layout select:disabled,
.dashboard-layout input:not([type=checkbox]):not([type=radio]):not([type=range]):disabled,
.dashboard-layout textarea:disabled {
  background-color: var(--bk-input) !important;
  color: var(--bk-ink-3) !important;
  opacity: 1 !important;
}
.dashboard-layout .fixed-ticket-class,
.dashboard-layout .fixed-ticket-class span {
  background: var(--bk-panel-2) !important;
  color: var(--bk-ink-2) !important;
  border-color: var(--bk-rule-2) !important;
}
.dashboard-layout .fixed-ticket-class strong {
  background: transparent !important;
  color: var(--bk-signal) !important;
}
html:not([data-bk-theme="light"]) .dashboard-layout ::-webkit-calendar-picker-indicator,
html:not([data-bk-theme="light"]) .dashboard-layout ::-webkit-search-cancel-button {
  filter: invert(1) brightness(1.2);
}
.dashboard-layout input::placeholder,
.dashboard-layout textarea::placeholder { color: #a8a296 !important; }

.dashboard-layout input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
.dashboard-layout select:focus,
.dashboard-layout textarea:focus {
  border-color: var(--bk-signal) !important;
  box-shadow: 0 0 0 3px var(--bk-signal-bg) !important;
  outline: none !important;
}
.dashboard-layout input[type=file] { background: rgba(255,255,255,.10) !important; }
.dashboard-layout input[type="checkbox"],
.dashboard-layout input[type="radio"] { accent-color: var(--bk-signal) !important; }

.dashboard-layout .field label,
.dashboard-layout .standalone-field,
.dashboard-layout .sales-bar-controls label,
.dashboard-layout .sponsor-global-controls label,
.dashboard-layout .ticket-sponsor-row label,
.dashboard-layout .ticket-sponsor-add label {
  font-family: var(--bk-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--bk-ink-2) !important;
}
.dashboard-layout .field label input,
.dashboard-layout .field label select,
.dashboard-layout .field label textarea,
.dashboard-layout .standalone-field input,
.dashboard-layout .standalone-field select {
  font-family: var(--bk-sans) !important;
  font-size: 13px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--bk-ink) !important;
}

/* Primary action = the only amber fill on the page. */
.dashboard-layout .admin-section button,
.dashboard-layout .admin-section .button-like,
.dashboard-layout .admin-section .button-link {
  background: var(--bk-signal) !important;
  color: #0a0a0a !important;
  border: 1px solid var(--bk-signal) !important;
  border-radius: 9px !important;
  font-family: var(--bk-sans) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: .18s var(--bk-ease);
}
.dashboard-layout .admin-section button:hover {
  background: var(--bk-signal-2) !important;
  border-color: var(--bk-signal-2) !important;
}
.dashboard-layout .admin-section button.ghost,
.dashboard-layout .admin-section .ghost,
.dashboard-layout .admin-section .button-link.ghost {
  background: transparent !important;
  color: var(--bk-ink-2) !important;
  border: 1px solid var(--bk-rule-2) !important;
}
.dashboard-layout .admin-section button.ghost:hover,
.dashboard-layout .admin-section .ghost:hover,
.dashboard-layout .admin-section .button-link.ghost:hover {
  color: var(--bk-ink) !important;
  border-color: var(--bk-rule-3) !important;
  background: var(--bk-chip) !important;
}
.dashboard-layout .admin-section button:disabled {
  background: var(--bk-panel-3) !important;
  color: var(--bk-ink-3) !important;
  border-color: var(--bk-rule) !important;
}
.dashboard-layout .admin-section button.danger,
.dashboard-layout .admin-section button.bad {
  background: var(--bk-stop-bg) !important;
  color: var(--bk-stop) !important;
  border-color: rgba(255,83,71,.4) !important;
}

.dashboard-layout .control-tile,
.dashboard-layout .perm-picker label,
.dashboard-layout .check,
.dashboard-layout .sales-bar-controls label,
.dashboard-layout .sponsor-global-controls label,
.dashboard-layout .ticket-type-options label,
.dashboard-layout .fixed-ticket-class,
.dashboard-layout .seat-designer-toolbar,
.dashboard-layout .ticket-amenities-editor,
.dashboard-layout .standalone-field,
.dashboard-layout .supervisor-admin-field {
  background: var(--bk-panel-2) !important;
  border-color: var(--bk-rule) !important;
  color: var(--bk-ink) !important;
}
.dashboard-layout .control-tile strong { color: var(--bk-ink) !important; }
.dashboard-layout .control-tile span,
.dashboard-layout .inventory-setting strong,
.dashboard-layout .ticket-amenities-head strong { color: var(--bk-ink-2) !important; }

.dashboard-layout .ticket-type-add { border-color: var(--bk-rule-2) !important; }
.dashboard-layout .ticket-quantity-presets button {
  background: var(--bk-panel-3) !important;
  color: var(--bk-ink-2) !important;
  border-color: var(--bk-rule-2) !important;
}
.dashboard-layout .ticket-quantity-limit {
  background: var(--bk-signal-bg) !important;
  color: var(--bk-signal) !important;
  border-color: var(--bk-signal-ln) !important;
}
.dashboard-layout .ticket-amenity-icon,
.dashboard-layout .button-link,
.dashboard-layout .button-like {
  background: var(--bk-panel-3) !important;
  border-color: var(--bk-rule-2) !important;
  color: var(--bk-ink-2) !important;
}

/* ---------- 9. tables ---------- */

.dashboard-layout .table-scroll {
  border: 1px solid var(--bk-rule) !important;
  border-radius: 11px !important;
  background: var(--bk-panel) !important;
}
.dashboard-layout table { background: transparent !important; color: var(--bk-ink) !important; }
.dashboard-layout th {
  background: var(--bk-panel-2) !important;
  border-bottom: 1px solid var(--bk-rule-2) !important;
  font-family: var(--bk-mono) !important;
  font-size: 8.5px !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--bk-ink-3) !important;
}
.dashboard-layout td {
  color: var(--bk-ink-2) !important;
  border-bottom: 1px solid var(--bk-rule) !important;
  font-size: 11.5px !important;
}
.dashboard-layout tbody tr:hover td { background: var(--bk-chip) !important; }

/* ---------- 10. status vocabulary ---------- */

.dashboard-layout .msg.ok,
.dashboard-layout .pill.good { color: var(--bk-go) !important; }
.dashboard-layout .msg.bad,
.dashboard-layout .pill.bad { color: var(--bk-stop) !important; }

.dashboard-layout .pill {
  border-radius: 999px !important;
  font-family: var(--bk-mono) !important;
  font-size: 8.5px !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  border: 1px solid currentColor !important;
  background: transparent !important;
}

.dashboard-layout .dirty-badge {
  background: var(--bk-signal-bg) !important;
  color: var(--bk-signal) !important;
  border: 1px solid var(--bk-signal-ln) !important;
  font-family: var(--bk-mono) !important;
  font-size: 8.5px !important;
  letter-spacing: .1em !important;
}

.dashboard-layout .empty,
.dashboard-layout .empty-state {
  color: var(--bk-ink-3) !important;
  font-family: var(--bk-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .04em !important;
  /* admin-ui-v50 gives .empty a near-white card background — invisible in the
     light theme, a glaring white slab on the dark deck. */
  background: rgba(255,255,255,.025) !important;
  border-color: var(--bk-rule) !important;
}

.dashboard-layout .historical-event-notice {
  border-color: var(--bk-signal-ln) !important;
  background: var(--bk-signal-bg) !important;
}
.dashboard-layout .historical-event-notice strong { color: var(--bk-signal-2) !important; }

/* Seat-map status colours are operational signals, not decoration — they
   keep their v50 meanings. Only the surface behind them changes. */
.dashboard-layout .seat-map-designer,
.dashboard-layout .admin-prebook-seat-map { background: var(--bk-void) !important; }

/* ---------- 11. arrival ---------- */

/* One orchestrated reveal when a section is switched in. Cheap (transform
   + opacity only) and short enough not to sit between an operator and the
   number they came to read. */
.dashboard-layout .admin-section:not([hidden]) > * {
  animation: bk-rise .42s var(--bk-ease) backwards;
}
.dashboard-layout .admin-section:not([hidden]) > *:nth-child(1) { animation-delay: .01s; }
.dashboard-layout .admin-section:not([hidden]) > *:nth-child(2) { animation-delay: .05s; }
.dashboard-layout .admin-section:not([hidden]) > *:nth-child(3) { animation-delay: .09s; }
.dashboard-layout .admin-section:not([hidden]) > *:nth-child(4) { animation-delay: .13s; }
.dashboard-layout .admin-section:not([hidden]) > *:nth-child(n+5) { animation-delay: .16s; }

@keyframes bk-rise {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-layout .admin-section:not([hidden]) > *,
  .live-side-link::after { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* =====================================================================
   13. AUTH — the admin login surface
   The login page loads admin.css + this file only, so these rules are
   self-contained rather than overrides.
   ===================================================================== */

.bk-auth {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 24px;
  background: var(--bk-void);
  overflow: hidden;
}

/* Slow-drifting bloom behind the module. The only thing on the page that
   moves on its own, so the eye lands on the card. */
.bk-auth-deck {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 70% at 82% 18%, rgba(240,208,96,.12), transparent 58%),
    radial-gradient(90% 80% at 12% 82%, rgba(212,175,55,.08), transparent 62%),
    var(--bk-grid);
  animation: bk-drift 24s ease-in-out infinite alternate;
}
@keyframes bk-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

.bk-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 384px;
  padding: 38px 34px 26px !important;
  border: 1px solid var(--bk-rule-2) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.055) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(0,0,0,.38);
  text-align: start !important;
  animation: bk-arrive .6s var(--bk-ease) backwards;
}
@keyframes bk-arrive {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Four corner ticks — the module is seated in its rack. */
.bk-tick {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 0 solid var(--bk-signal);
  opacity: .5;
  pointer-events: none;
}
.bk-tick-tl { top: 9px; left: 9px;  border-top-width: 1px; border-left-width: 1px; }
.bk-tick-tr { top: 9px; right: 9px; border-top-width: 1px; border-right-width: 1px; }
.bk-tick-bl { bottom: 9px; left: 9px;  border-bottom-width: 1px; border-left-width: 1px; }
.bk-tick-br { bottom: 9px; right: 9px; border-bottom-width: 1px; border-right-width: 1px; }

/* A single accent pass across the top edge, like a channel arming. */
.bk-sweep {
  position: absolute;
  inset-inline: 16px;
  top: 0;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.bk-sweep::after {
  content: '';
  position: absolute;
  inset-block: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, var(--bk-signal), transparent);
  animation: bk-sweep 4.4s var(--bk-ease) infinite;
}
@keyframes bk-sweep {
  0%        { transform: translateX(-120%); opacity: 0; }
  22%, 46%  { opacity: 1; }
  70%, 100% { transform: translateX(340%); opacity: 0; }
}

.bk-auth-head { margin-bottom: 26px; }

.bk-auth-card .login-mark {
  width: 52px;
  margin: 0 0 20px !important;
}
.bk-auth-card .login-mark path { fill: var(--bk-ink); }

.bk-kicker {
  margin: 0 0 12px;
  font-family: var(--bk-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--bk-ink-3);
  direction: ltr;
  text-align: start;
}
.bk-kicker b { color: var(--bk-signal); font-weight: 500; }

.bk-auth-title {
  margin: 0 0 6px;
  font-family: var(--bk-display);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.25;
  color: var(--bk-ink);
}
.bk-auth-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--bk-ink-3);
}

.bk-auth-card form {
  display: grid;
  gap: 15px;
  text-align: start;
}

.bk-auth-card label {
  display: grid;
  gap: 7px;
  font-family: var(--bk-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bk-ink-3);
}

.bk-auth-card input {
  padding: 13px 14px;
  border: 1px solid var(--bk-rule-2);
  border-radius: 10px;
  background: rgba(255,255,255,.028);
  color: var(--bk-ink);
  font-family: var(--bk-sans);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color .2s var(--bk-ease), box-shadow .2s var(--bk-ease), background .2s var(--bk-ease);
}
.bk-auth-card input:focus {
  border-color: var(--bk-signal);
  background: rgba(212,175,55,.05);
  box-shadow: 0 0 0 3px var(--bk-signal-bg);
  outline: none;
}
.bk-auth-card input:-webkit-autofill {
  -webkit-text-fill-color: var(--bk-ink);
  -webkit-box-shadow: 0 0 0 40px #16161b inset;
}

.bk-auth-card button[type="submit"] {
  margin-top: 4px;
  padding: 14px 20px;
  border: 1px solid var(--bk-signal);
  border-radius: 10px;
  background: var(--bk-signal);
  color: #0a0a0a;
  font-family: var(--bk-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: .2s var(--bk-ease);
}
.bk-auth-card button[type="submit"]:hover:not(:disabled) {
  background: var(--bk-signal-2);
  border-color: var(--bk-signal-2);
  transform: translateY(-1px);
}
.bk-auth-card button[type="submit"]:active:not(:disabled) { transform: none; }
.bk-auth-card button[type="submit"]:disabled {
  background: var(--bk-panel-3);
  border-color: var(--bk-rule);
  color: var(--bk-ink-3);
  cursor: default;
}

.bk-auth-card .error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,83,71,.34);
  border-radius: 9px;
  background: var(--bk-stop-bg);
  color: #ff8b81;
  font-family: var(--bk-mono);
  font-size: 10.5px;
  line-height: 1.6;
  animation: bk-nudge .3s var(--bk-ease);
}
@keyframes bk-nudge {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  75%     { transform: translateX(4px); }
}

.bk-auth-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--bk-rule);
  font-family: var(--bk-mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--bk-ink-3);
}
.bk-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bk-go);
  box-shadow: 0 0 0 0 rgba(62,214,139,.5);
  animation: bk-beacon 2.6s infinite;
  flex: 0 0 auto;
}

@media (max-width: 420px) {
  .bk-auth { padding: 14px; }
  .bk-auth-card { padding: 30px 22px 22px !important; }
  .bk-auth-title { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-auth-deck, .bk-sweep::after, .bk-auth-card, .bk-dot, .bk-auth-card .error {
    animation: none !important;
  }
}

/* =====================================================================
   14. CONSOLE — the task-first shell
   ---------------------------------------------------------------------
   Replaces the 230px sidebar + 18 flat links with a command bar, a
   two-level horizontal task rail, and a ⌘K palette. #sideNav keeps its id
   and still contains every nav control, because admin.js delegates
   section clicks from it.
   ===================================================================== */

:root {
  --console-bar-h: 58px;
  --console-nav-h: 88px;
}

/* ---------- command bar ---------- */

.console-bar { gap: 12px; }

.console-bar .console-omni {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 460px;
  min-height: 36px;
  padding: 0 12px !important;
  border: 1px solid var(--bk-rule-2) !important;
  border-radius: 10px !important;
  background: var(--bk-chip) !important;
  color: var(--bk-ink-3) !important;
  font-family: var(--bk-sans) !important;
  font-size: 12px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: text;
  transition: .18s var(--bk-ease);
}
.console-bar .console-omni:hover {
  border-color: var(--bk-signal-ln) !important;
  background: rgba(212,175,55,.06) !important;
  color: var(--bk-ink-2) !important;
}
.console-omni-icon {
  width: 13px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
}
.console-omni-icon::after {
  content: '';
  position: absolute;
  inset-inline-start: 100%;
  top: 100%;
  width: 5px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: 0 50%;
}
.console-omni-label { flex: 1; text-align: start; }
.console-omni-key {
  font-family: var(--bk-mono);
  font-size: 8.5px;
  letter-spacing: .06em;
  padding: 3px 6px;
  border: 1px solid var(--bk-rule-2);
  border-radius: 5px;
  color: var(--bk-ink-3);
  direction: ltr;
}

.console-live-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(255,83,71,.4);
  border-radius: 999px;
  background: var(--bk-stop-bg);
  color: #ff8b81;
  font-family: var(--bk-mono);
  font-size: 10px;
  letter-spacing: .14em;
  cursor: pointer;
  transition: .18s var(--bk-ease);
}
.console-live-btn:hover { background: rgba(255,83,71,.18); color: #ffb3ac; }
.console-live-btn.active { background: var(--bk-stop); border-color: var(--bk-stop); color: #fff; }
.console-live-btn i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: bk-beacon 2s infinite;
}

/* ---------- layout: no sidebar column ---------- */

.dashboard-layout.console-layout {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 1460px !important;
  padding: 0 20px 64px !important;
  gap: 0 !important;
}
.console-layout .wrap { gap: 0 !important; }

/* ---------- task rail ---------- */

.side-nav.console-nav {
  position: sticky;
  top: var(--console-bar-h);
  z-index: 55;
  pointer-events: auto;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 -20px 20px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bk-rule) !important;
  border-radius: 0 !important;
  background: var(--bk-chrome) !important;
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: none !important;
  overflow: visible !important;
}

.console-surfaces {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.console-surfaces::-webkit-scrollbar { display: none; }

.console-surface {
  position: relative;
  padding: 13px 15px;
  border: 0 !important;
  background: transparent !important;
  color: var(--bk-ink-3) !important;
  font-family: var(--bk-sans);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s var(--bk-ease);
}
.console-surface:hover { color: var(--bk-ink-2) !important; }
.console-surface.active { color: var(--bk-ink) !important; font-weight: 600; }
.console-surface.active::after {
  content: '';
  position: absolute;
  inset-inline: 10px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--bk-signal);
}

.console-tasks { min-height: 44px; }

.console-task-row {
  display: flex !important;
  pointer-events: auto;
  position: relative;
  z-index: 2;
  /* .side-sub is a vertical submenu in admin.css (flex-direction:column), so
     without this the chips stretch to full width on the cross axis. */
  flex-direction: row !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 7px 0 9px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.console-task-row::-webkit-scrollbar { display: none; }
.console-task-row[hidden] { display: none !important; }

/* Task chips — the second level. Overrides the vertical .side-link rules
   from section 5 and the .side-sub rules in admin.css. */
.console-task-row .side-link,
.dashboard-layout .console-task-row .side-link {
  width: auto !important;
  padding: 7px 13px !important;
  border: 1px solid var(--bk-rule) !important;
  border-radius: 999px !important;
  background: var(--bk-chip) !important;
  color: var(--bk-ink-2) !important;
  font-size: 12px !important;
  white-space: nowrap;
}
.console-task-row .side-link::before { display: none; }
.console-task-row .side-link:hover,
.dashboard-layout .console-task-row .side-link:hover {
  border-color: var(--bk-rule-3) !important;
  color: var(--bk-ink) !important;
  background: var(--bk-chip-hover) !important;
}
.console-task-row .side-link.active,
.dashboard-layout .console-task-row .side-link.active {
  background: var(--bk-signal) !important;
  border-color: var(--bk-signal) !important;
  color: #0a0a0a !important;
  font-weight: 600 !important;
}
.console-task-row .live-side-link {
  font-family: var(--bk-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .06em;
}
.console-task-row .live-side-link::after { margin-inline-start: 7px; }

/* Section heads stack under the rail, not under the bar. */
.console-layout .admin-section > .section-head {
  top: calc(var(--console-bar-h) + var(--console-nav-h)) !important;
}

/* Drawer is transparent on desktop so the Console rail is unchanged. */
.console-drawer { display: contents; }
.admin-side-toggle,
.admin-side-backdrop { display: none; }

/* ---------- palette ---------- */

.console-palette {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  padding: 12vh 16px 16px;
  background: var(--bk-overlay);
  backdrop-filter: blur(6px);
}
.side-nav.open .console-palette { display: block; }

.console-palette-box {
  width: min(560px, 100%);
  margin: 0 auto;
  border: 1px solid var(--bk-rule-2);
  border-radius: 16px;
  background: var(--bk-popup);
  box-shadow: var(--bk-popup-shadow);
  overflow: hidden;
  animation: bk-arrive .22s var(--bk-ease);
}

#consolePaletteInput {
  width: 100%;
  padding: 17px 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bk-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--bk-ink) !important;
  font-family: var(--bk-sans) !important;
  font-size: 15px !important;
}
#consolePaletteInput:focus { box-shadow: none !important; }
#consolePaletteInput::placeholder { color: var(--bk-ink-3) !important; }

.console-palette-results { max-height: 46vh; overflow-y: auto; padding: 7px; }

.console-palette-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 13px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--bk-ink-2) !important;
  font-family: var(--bk-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-align: start;
  cursor: pointer;
}
.console-palette-item.cursor {
  background: var(--bk-signal-bg) !important;
  color: var(--bk-signal-2) !important;
}
.console-palette-surface {
  font-family: var(--bk-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bk-ink-3);
}
.console-palette-empty,
.console-attention-clear {
  margin: 0;
  padding: 22px 14px;
  color: var(--bk-ink-3);
  font-family: var(--bk-mono);
  font-size: 11px;
  text-align: center;
}
.console-palette-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--bk-rule);
  font-family: var(--bk-mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  color: var(--bk-ink-3);
}
.console-palette-foot kbd {
  padding: 2px 5px;
  border: 1px solid var(--bk-rule-2);
  border-radius: 4px;
}

/* ---------- operations board ---------- */

.console-metrics {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0,1fr)) !important;
  gap: 10px !important;
  margin-bottom: 16px;
}
.console-metric {
  position: relative;
  padding: 15px 16px;
  border: 1px solid var(--bk-rule);
  border-radius: 13px;
  background: var(--bk-panel);
  overflow: hidden;
}
.console-metric::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--bk-rule-3), transparent);
}
.console-metric.ok::before { background: linear-gradient(180deg, var(--bk-go), transparent); }
.console-metric.warn::before { background: linear-gradient(180deg, var(--bk-signal), transparent); }
.console-metric-k {
  display: block;
  font-family: var(--bk-mono);
  font-size: 8.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bk-ink-3);
}
.console-metric-v {
  display: block;
  margin-top: 7px;
  font-family: var(--bk-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--bk-ink);
}

.console-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  align-items: start;
}
.console-board .block.wide { grid-column: 1 / -1; }

.console-attention { display: grid; gap: 7px; }

.console-attention-item {
  display: flex !important;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 12px 14px !important;
  border: 1px solid var(--bk-rule) !important;
  border-radius: 11px !important;
  background: var(--bk-chip) !important;
  color: var(--bk-ink) !important;
  font-family: var(--bk-sans) !important;
  font-weight: 400 !important;
  text-align: start;
  cursor: pointer;
  transition: .18s var(--bk-ease);
}
.console-attention-item:hover {
  border-color: var(--bk-rule-3) !important;
  background: var(--bk-chip-hover) !important;
  transform: translateX(-2px);
}
.console-attention-dot {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--bk-ink-3);
}
.console-attention-item.stop .console-attention-dot { background: var(--bk-stop); box-shadow: 0 0 8px rgba(255,83,71,.55); }
.console-attention-item.warn .console-attention-dot { background: var(--bk-signal); box-shadow: 0 0 8px rgba(212,175,55,.5); }
.console-attention-item.info .console-attention-dot { background: var(--bk-info); }
.console-attention-text { display: grid; gap: 3px; }
.console-attention-text strong { font-size: 13px; font-weight: 600; }
.console-attention-text small { font-size: 10.5px; color: var(--bk-ink-3); line-height: 1.6; }

/* Channel status tiles keep their v50 ids, restyled as a compact rail. */
#commandCards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(118px,1fr)) !important;
  gap: 7px !important;
}
#commandCards .card.ops-card {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: var(--bk-panel-2) !important;
}
#commandCards .k {
  font-family: var(--bk-mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bk-ink-3);
}
#commandCards .v { margin-top: 5px; font-size: 12.5px; font-weight: 600; }
#commandCards .ops-card.ok .v { color: var(--bk-go); }
#commandCards .ops-card.warn .v { color: var(--bk-signal); }
#commandCards .ops-card.muted .v { color: var(--bk-ink-3); }

.command-shortcuts { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------- console mobile ---------- */

@media (max-width: 900px) {
  :root { --console-nav-h: 84px; }
  .console-bar .console-omni { max-width: none; }
  .console-omni-key { display: none; }
  .dashboard-layout.console-layout { padding: 0 12px 48px !important; }
  .side-nav.console-nav {
    position: sticky;
    margin: 0 -12px 16px !important;
    padding: 0 12px !important;
  }
  .console-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .console-board { grid-template-columns: 1fr; }
  .console-palette { padding-top: 8vh; }
}

@media (max-width: 620px) {
  .console-bar .console-omni-label { font-size: 11px; }
  .console-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .console-metric-v { font-size: 19px; }
}

/* ---------- 12. mobile ---------- */

@media (max-width: 900px) {
  /* :not(.console-nav) — the Console rail stays sticky on mobile; only a
     legacy vertical sidebar collapses to static. */
  .side-nav:not(.console-nav),
  .dashboard-layout .side-nav:not(.console-nav) {
    position: static;
    background: var(--bk-panel) !important;
  }
  .topbar { min-height: 52px; padding: 0 12px; }
  .topbar .event-context { padding-inline: 8px; }
  .topbar .event-context > span { display: none; }
  .topbar .event-context select { min-width: 130px; }
  .dashboard-layout .block::before { display: none; }
}

/* ---------- 13. workspace landings (not .admin-section) ---------- */

.console-surface[hidden] { display: none !important; }

.workspace-landing {
  display: grid;
  gap: 18px;
  padding: 8px 0 40px;
}
.workspace-landing[hidden] { display: none !important; }
.workspace-landing .section-head h1 {
  margin: 0 0 6px;
  font-family: var(--bk-display);
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -.03em;
  color: var(--bk-ink);
}
.workspace-landing .section-head .note { color: var(--bk-ink-2); margin: 0; }
.workspace-landing-tasks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.workspace-landing-tasks [data-section-target] {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 16px 18px;
  border: 1px solid var(--bk-rule);
  border-radius: 14px;
  background: var(--bk-panel);
  color: var(--bk-ink);
  font-family: var(--bk-sans);
  font-size: 15px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: .18s var(--bk-ease);
}
.workspace-landing-tasks [data-section-target]:hover {
  border-color: var(--bk-signal-ln);
  background: var(--bk-panel-2);
}
.workspace-landing-tasks [data-section-target][hidden] { display: none !important; }

.topbar .bk-theme-toggle {
  min-width: 72px;
  justify-content: center;
}

/* Leftover light cards that never used .block / --ui-card. */
.dashboard-layout .block h3,
.dashboard-layout .block-head h3 {
  color: var(--bk-ink) !important;
}
.dashboard-layout .gate-admin-panel,
.dashboard-layout .gate-definition-row,
.dashboard-layout .gate-type-check,
.dashboard-layout .gate-assignment-card,
.dashboard-layout .gate-new-form,
.dashboard-layout .live-supervisor,
.dashboard-layout .live-kpi,
.dashboard-layout .live-supervisor-metrics span,
.dashboard-layout .ticket-email-designer,
.dashboard-layout .ticket-category-quick-list,
.dashboard-layout .ticket-category-chip,
.dashboard-layout .ticket-design-category-link,
.dashboard-layout .ticket-design-link-status,
.dashboard-layout .ticket-type-row,
.dashboard-layout .ticket-type-row-actions,
.dashboard-layout .ticket-type-add,
.dashboard-layout .ticket-type-inventory,
.dashboard-layout .ticket-type-options label,
.dashboard-layout .ticket-color-controls,
.dashboard-layout .ticket-amenities-editor,
.dashboard-layout .ticket-amenity-icon,
.dashboard-layout .ticket-preview-stage,
.dashboard-layout .ticket-email-preview-head,
.dashboard-layout .serial-activation-box,
.dashboard-layout .inventory-setting,
.dashboard-layout .ticket-sponsor-admin,
.dashboard-layout .ticket-sponsor-row,
.dashboard-layout .ticket-sponsor-add,
.dashboard-layout .supervisor-admin-form,
.dashboard-layout .seat-designer-toolbar,
.dashboard-layout .customer-operation-item,
.dashboard-layout .supervisor-admin-events,
.dashboard-layout .supervisor-admin-field,
.dashboard-layout .ticket-result,
.dashboard-layout .ticket-used-message,
.dashboard-layout .builder-editor,
.dashboard-layout .admin-seat-box,
.dashboard-layout .ticket-audit,
.dashboard-layout .event-admin-item,
.dashboard-layout .payment-enable,
.dashboard-layout .ticket-tabs,
.dashboard-layout .mode-segments,
.dashboard-layout .ticket-amenity-option,
.dashboard-layout .status-choice span,
.dashboard-layout .legend-seat,
.dashboard-layout .inventory-setting,
.dashboard-layout .ticket-quantity-box,
.dashboard-layout .ticket-quantity-presets button,
.dashboard-layout .button-like,
.dashboard-layout .empty,
.dashboard-layout .msg,
.dashboard-layout .check,
.dashboard-layout .check-inline,
.dashboard-layout .perm-picker label {
  background: var(--bk-panel) !important;
  color: var(--bk-ink) !important;
  border-color: var(--bk-rule) !important;
  box-shadow: none !important;
}
.dashboard-layout .gate-admin-panel h3,
.dashboard-layout .gate-definition-row label,
.dashboard-layout .gate-new-form label,
.dashboard-layout .gate-type-check,
.dashboard-layout .gate-type-check small,
.dashboard-layout .gate-supervisors,
.dashboard-layout .gate-assignment-head,
.dashboard-layout .live-supervisor-identity small,
.dashboard-layout .live-kpi small,
.dashboard-layout .ticket-type-row > label,
.dashboard-layout .ticket-type-row-actions span,
.dashboard-layout .ticket-category-chip,
.dashboard-layout .ticket-design-link-status span,
.dashboard-layout .event-admin-item h3,
.dashboard-layout .event-admin-item p,
.dashboard-layout .ticket-email-preview-head span,
.dashboard-layout .serial-activation-box small,
.dashboard-layout .serial-activation-box label,
.dashboard-layout .supervisor-admin-title span,
.dashboard-layout .supervisor-admin-field > span,
.dashboard-layout .inventory-setting strong,
.dashboard-layout .ticket-type-inventory,
.dashboard-layout .ticket-type-options label,
.dashboard-layout .ticket-amenity-copy strong,
.dashboard-layout .ticket-amenity-copy small {
  color: var(--bk-ink-2) !important;
}
.dashboard-layout .supervisor-admin-title strong,
.dashboard-layout .supervisor-admin-title {
  color: var(--bk-ink) !important;
  border-bottom-color: var(--bk-rule) !important;
}
.dashboard-layout .gate-ticket-types .field-label,
.dashboard-layout .ticket-design-link-status strong,
.dashboard-layout .ticket-category-chip strong,
.dashboard-layout .event-admin-item h3 {
  color: var(--bk-ink) !important;
}
.dashboard-layout .ticket-tabs button,
.dashboard-layout .mode-segments button {
  background: transparent !important;
  color: var(--bk-ink-2) !important;
}
.dashboard-layout .ticket-tabs button.active,
.dashboard-layout .mode-segments button.active {
  background: var(--bk-signal) !important;
  color: #0a0a0a !important;
}
.dashboard-layout .provider-card.connected,
.dashboard-layout .control-tile:has(input:checked),
.dashboard-layout .ops-switch:has(input:checked),
.dashboard-layout .check:has(input:checked),
.dashboard-layout .check-inline:has(input:checked) {
  background: var(--bk-go-bg) !important;
  border-color: rgba(62,214,139,.35) !important;
  color: var(--bk-ink) !important;
}
.dashboard-layout .provider-card.disconnected,
.dashboard-layout .critical-control,
.dashboard-layout .critical-control:has(>input:not(:checked)) {
  background: var(--bk-signal-bg) !important;
  border-color: var(--bk-signal-ln) !important;
  color: var(--bk-ink) !important;
}
.dashboard-layout .ticket-sale-status .status-choice--unavailable input:checked + span,
.dashboard-layout .ticket-amenity-option:has(input:checked) {
  background: var(--bk-signal-bg) !important;
  border-color: var(--bk-signal-ln) !important;
  color: var(--bk-signal-2) !important;
}
.dashboard-layout .ticket-sale-status .status-choice--soldout input:checked + span {
  background: var(--bk-stop-bg) !important;
  border-color: rgba(255,83,71,.4) !important;
  color: var(--bk-stop) !important;
}

/* ---------- light deck ---------- */
html[data-bk-theme="light"] {
  color-scheme: light;
  --bk-void: #f3eee6;
  --bk-deck: #f3eee6;
  --bk-panel: rgba(255,255,255,.86);
  --bk-panel-2: #ffffff;
  --bk-panel-3: #ffffff;
  --bk-rule: rgba(28,24,20,.12);
  --bk-rule-2: rgba(28,24,20,.18);
  --bk-rule-3: rgba(28,24,20,.28);
  --bk-ink: #1c1814;
  --bk-ink-2: #4a443c;
  --bk-ink-3: #7a7268;
  --bk-signal: #b8942a;
  --bk-signal-2: #8f7018;
  --bk-signal-bg: rgba(184,148,42,.12);
  --bk-signal-ln: rgba(184,148,42,.40);
  --bk-grid:
    linear-gradient(rgba(28,24,20,.055) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(28,24,20,.055) 1px, transparent 1px) 0 0 / 32px 100%;
  --bk-topbar: rgba(243,238,230,.94);
  --bk-chrome: rgba(255,252,247,.94);
  --bk-sticky: rgba(243,238,230,.94);
  --bk-overlay: rgba(28,24,20,.28);
  --bk-popup: #ffffff;
  --bk-popup-shadow: 0 28px 64px -18px rgba(28,24,20,.18);
  --bk-input: #ffffff;
  --bk-chip: rgba(28,24,20,.05);
  --bk-chip-hover: rgba(28,24,20,.09);
}
html[data-bk-theme="light"],
html[data-bk-theme="light"] body,
html[data-bk-theme="light"] input,
html[data-bk-theme="light"] select,
html[data-bk-theme="light"] textarea {
  color-scheme: light;
}
html[data-bk-theme="light"] body::before {
  background:
    radial-gradient(80% 70% at 82% 18%, rgba(212,175,55,.28), transparent 58%),
    radial-gradient(90% 80% at 12% 82%, rgba(212,175,55,.14), transparent 62%),
    var(--bk-grid);
}
html[data-bk-theme="light"] .dashboard-layout {
  --bg: #f3eee6;
  --bg-2: #ffffff;
  --fg: #1c1814;
  --fg-muted: #4a443c;
  --fg-faint: #7a7268;
  --line: rgba(28,24,20,.12);
  --panel-soft: #ffffff;
  --panel-softer: #ffffff;
  --ui-bg: transparent;
  --ui-card: rgba(255,255,255,.86);
  --ui-card-soft: #ffffff;
  --ui-text: #1c1814;
  --ui-muted: #4a443c;
  --ui-faint: #7a7268;
  --ui-line: rgba(28,24,20,.12);
  --ui-line-strong: rgba(28,24,20,.18);
  --ui-accent: #b8942a;
  --ui-gold: #b8942a;
  --ui-gold-bg: rgba(184,148,42,.12);
}
html[data-bk-theme="light"] .dashboard-layout .block,
html[data-bk-theme="light"] .dashboard-layout .card,
html[data-bk-theme="light"] .dashboard-layout .user-card,
html[data-bk-theme="light"] .dashboard-layout .customer-admin-card {
  background: rgba(255,255,255,.86) !important;
  border-color: var(--bk-rule) !important;
  box-shadow: 0 18px 44px rgba(28,24,20,.08) !important;
}
html[data-bk-theme="light"] .dashboard-layout select option {
  background: #ffffff !important;
  color: #1c1814 !important;
}
html[data-bk-theme="light"] .dashboard-layout input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-bk-theme="light"] .dashboard-layout select,
html[data-bk-theme="light"] .dashboard-layout textarea {
  background-color: #ffffff !important;
  color: #1c1814 !important;
  color-scheme: light;
}
html[data-bk-theme="light"] .dashboard-layout select {
  background-image: none !important;
}
html[data-bk-theme="light"] .dashboard-layout select:disabled,
html[data-bk-theme="light"] .dashboard-layout input:not([type=checkbox]):not([type=radio]):not([type=range]):disabled,
html[data-bk-theme="light"] .dashboard-layout textarea:disabled {
  background-color: #f3eee6 !important;
  color: #7a7268 !important;
}
html[data-bk-theme="light"] .dashboard-layout .fixed-ticket-class,
html[data-bk-theme="light"] .dashboard-layout .fixed-ticket-class span {
  background: #ffffff !important;
  color: #4a443c !important;
}
html[data-bk-theme="light"] .dashboard-layout .fixed-ticket-class strong {
  color: #b8942a !important;
}

/* ---------- phone / tablet admin shell ----------
   Desktop Console rail is unchanged. On a phone the workspace tabs
   live in a slide-out sidebar opened by #adminSideToggle. */
@media screen and (max-width: 899px),
       screen and (hover: none) and (pointer: coarse) and (max-width: 1200px) {
  :root {
    --console-bar-h: 56px;
    --console-nav-h: 0px;
  }

  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }
  body.admin-sidebar-open { overflow: hidden !important; }
  body.login-body.bk-auth,
  body.bk-auth {
    padding: max(18px, env(safe-area-inset-top, 0px)) 14px max(18px, env(safe-area-inset-bottom, 0px)) !important;
    align-items: start;
  }
  .bk-auth-card { width: 100%; max-width: 100%; }
  .bk-auth-card input,
  .bk-auth-card button,
  body.bk-auth input,
  body.bk-auth button[type="submit"] {
    min-height: 48px;
    font-size: 16px !important;
  }

  html body.console-shell > header.topbar.console-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    min-height: 56px !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 10px 8px !important;
    overflow: hidden !important;
  }
  .admin-side-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0 !important;
    border: 1px solid var(--bk-rule-2) !important;
    border-radius: 10px !important;
    background: var(--bk-chip) !important;
    color: var(--bk-ink) !important;
    cursor: pointer;
  }
  .admin-side-toggle span,
  .admin-side-toggle span::before,
  .admin-side-toggle span::after {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    position: relative;
    transition: transform .18s var(--bk-ease), opacity .18s var(--bk-ease);
  }
  .admin-side-toggle span::before,
  .admin-side-toggle span::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
  }
  .admin-side-toggle span::before { top: -6px; }
  .admin-side-toggle span::after { top: 6px; }
  body.admin-sidebar-open .admin-side-toggle {
    border-color: var(--bk-signal-ln) !important;
    background: var(--bk-signal-bg) !important;
    color: var(--bk-signal-2) !important;
  }
  body.admin-sidebar-open .admin-side-toggle span {
    background: transparent;
  }
  body.admin-sidebar-open .admin-side-toggle span::before {
    top: 0;
    transform: rotate(45deg);
  }
  body.admin-sidebar-open .admin-side-toggle span::after {
    top: 0;
    transform: rotate(-45deg);
  }
  .console-bar .bar-mark { width: 28px !important; max-width: 28px !important; }
  .console-bar .console-omni {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .console-omni-label,
  .console-omni-key,
  .console-bar .who,
  .console-bar .bk-hub-link { display: none !important; }
  .console-bar .event-context {
    display: flex !important;
    flex: 1 1 auto !important;
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .console-bar .event-context[hidden] { display: none !important; }
  .console-bar .event-context > span,
  .console-bar .event-context > b { display: none !important; }
  .console-bar .event-context select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }
  .console-bar .bk-theme-toggle,
  .console-bar #logoutBtn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  .admin-side-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: var(--bk-overlay);
  }
  body.admin-sidebar-open .admin-side-backdrop {
    display: block !important;
  }

  .side-nav.console-nav,
  .side-nav.console-nav:not(.open),
  .side-nav.console-nav.open {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    background: transparent !important;
    /* filter/transform make position:fixed children use this 0-height box */
    backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    perspective: none !important;
    contain: none !important;
  }

  .console-drawer {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    z-index: 200 !important;
    width: min(300px, 86vw) !important;
    max-width: 86vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(18px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 0 !important;
    border-inline-end: 1px solid var(--bk-rule-2) !important;
    border-radius: 0 !important;
    background: var(--bk-popup) !important;
    box-shadow: var(--bk-popup-shadow);
    transform: none !important;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
  }
  body.admin-sidebar-open .console-drawer {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
  }

  .console-surfaces {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: visible !important;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bk-rule);
  }
  .console-surface {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: start !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
  }
  .console-surface.active::after { display: none; }
  .console-surface.active {
    background: var(--bk-signal-bg) !important;
    color: var(--bk-signal-2) !important;
  }

  .console-tasks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    padding-top: 8px;
  }
  .console-task-row,
  .console-task-row.side-sub,
  .side-nav .console-task-row.side-sub {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 4px 0 10px !important;
    margin: 0 !important;
    overflow: visible !important;
    grid-template-columns: none !important;
  }
  .console-task-row[hidden] { display: none !important; }
  .console-task-row::before {
    content: attr(data-nav-group);
    display: block;
    width: 100%;
    padding: 6px 4px 0;
    font-family: var(--bk-mono);
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--bk-ink-3);
  }
  .console-task-row .side-link,
  .console-task-row.side-sub button,
  .dashboard-layout .console-task-row .side-link,
  .side-nav .console-task-row .side-link {
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    white-space: normal !important;
    text-align: start !important;
    border-radius: 10px !important;
  }

  .dashboard-layout.console-layout { padding: 0 10px 48px !important; }
  .console-layout .admin-section > .section-head,
  .dashboard-layout .admin-section > .section-head {
    position: relative !important;
    top: auto !important;
  }
  .console-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .console-board { grid-template-columns: minmax(0, 1fr) !important; }

  .dashboard-layout input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  .dashboard-layout select,
  .dashboard-layout textarea {
    font-size: 16px !important;
    min-height: 48px !important;
  }
  #consolePaletteInput { font-size: 16px !important; }
}