/* One border value for the dark theme (owner 2026-09-28): 22 percent white on every screen, 35 on
   iOS, where the same line reads fainter ("more in iphone safari"). Every border on the site reads
   var(--bv-line) (or --bv-line-solid where a solid grey is needed), so this is the one place to move it. */
:root { --bv-line: rgba(255,255,255,0.15); --bv-line-solid: #35354f; --bv-lift: 0 1px 3px rgba(255,255,255,0.06); }
/* One value on every device (owner 2026-09-28): the stronger iPhone line of 2026-09-27 answered a Safari extension (Noir) darkening the page, not the phone. */
/* ═══════════════════════════════════════════════════════════════════════
   BOOKVELT UI — module design system (de-boxed)
   ─────────────────────────────────────────────────────────────────────────
   Single source of truth for how site modules LOOK. One labeled section per
   module. Pages and blades must not carry design CSS — only layout glue.
   Loaded LAST in app/user/panel layouts so it overrides legacy styles.
   ROLLBACK: remove the <link rel="stylesheet" href="/css/bookvelt-ui.css">
   from the three layouts. Nothing else references this file.

   Design rules this file encodes (vs Airbnb/Booking reference):
     · ONE container level per module — inside a card: hairline rows, no boxes
     · two surfaces max (page + card); depth from spacing, not strokes
     · section titles are typography, not bordered/labeled panels
     · row actions are quiet text/icon links; one filled button per view
     · facts read as muted meta lines / dots, not bordered chips
     · tabular-nums wherever digits align
   STAGE 1 covers: business panel (#bizPanel), events cards (af-*), orders
   lists (#ordersTable). STAGE 2 (todo): public fixture/calendar cards,
   locations map cards, box office, seating chart, form fields (cwf) — then
   migrate the inline <style> blocks out of business-panel.blade.php.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ──────────────────────────────────────────────────────── */
:root {
  --ui-page:   #0c0e13;
  --ui-card:   #151821;
  --ui-card-2: #1a1e29;              /* hover / raised, use sparingly */
  --ui-line:   rgba(255,255,255,.07); /* THE stroke. The only one. */
  --ui-line-2: rgba(255,255,255,.30); /* stronger: event/venue separators */
  --ui-text:   #e9ecf2;
  --ui-muted:  #8d95a6;
  --ui-faint:  #5d6474;
  --ui-accent: #4aa1d9;
  --ui-green:  #66b32e;
  --ui-gold:   #eab308;
  --ui-live:   #ef4444;
  --ui-radius: 16px;
  --ui-radius-sm: 12px;
}

/* ── 2 · PRIMITIVES (use these for NEW markup) ───────────────────────── */
.ui-card  { background: var(--ui-card); border-radius: var(--ui-radius); }
.ui-rows > * + * { border-top: 1px solid var(--ui-line); }
.ui-h2    { font-size: 1.06rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 12px; }
.ui-h2 small { color: var(--ui-faint); font-weight: 500; font-size: .82em; margin-left: 8px; }
.ui-meta  { color: var(--ui-muted); font-size: .8rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ui-dot   { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ui-act   { color: var(--ui-muted); font-size: .8rem; font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; }
.ui-act:hover, .ui-act:focus-visible { color: var(--ui-accent); outline: none; }
.ui-num   { font-variant-numeric: tabular-nums; }

/* ── 3 · MODULE: section headings & date separators ──────────────────────
   Was: uppercase label, accent bar left / centered with rule lines.
   Now: plain heading on the surface; space does the separating.          */
#bizPanel .bp-sec {
  border-left: 0; padding-left: 0;
  font-size: .78rem; letter-spacing: .1em; color: var(--ui-faint);
  margin: 30px 0 10px;
}
#bizPanel .bp-org > .bp-sec:first-child, #bizPanel .bp-loc > .bp-sec:first-child { margin-top: 0; }

/* ── 4 · MODULE: business-panel shell & tabs ─────────────────────────── */
/* FULL-WIDTH SHELL (user decision — do not re-cap):
   the viewport is the container; 40px side padding is the only frame.  */
#bizPanel { max-width: none !important; width: 100%; padding: 32px 40px 64px !important; }
@media (max-width: 760px) { #bizPanel { padding: 24px 16px 48px !important; } }
/* Top navbar: full width to match — logo hard left, account hard right. */
.navbar .container { max-width: none !important; width: 100%; padding-left: 40px; padding-right: 40px; }
@media (max-width: 760px) { .navbar .container { padding-left: 16px; padding-right: 16px; } }
/* Full-width row hygiene: keep table columns from ballooning absurdly and
   stop toolbars scattering with space-between gaps. */
#bizPanel .table-toolbar { justify-content: flex-start; gap: 10px 16px; }
#ordersTable .data-table tbody tr:not(.date-separator),
#bizPanel #ordersTable .data-table tbody tr:not(.date-separator) {
  grid-template-columns: 140px 1.1fr 1.2fr 1fr 0.75fr 0.75fr 1.5fr;
}
#bizPanel .bp-tab {
  background: none; border: 0; border-radius: 0; padding: 10px 2px 12px;
  font-weight: 600; color: var(--ui-muted);
}
#bizPanel .bp-tab:hover { color: var(--ui-text); }
#bizPanel .bp-tab.active {
  background: none; color: var(--ui-text);
  box-shadow: inset 0 -2px 0 var(--ui-accent);
}

/* ── 5 · MODULE: org & location cards (business panel) ───────────────────
   Was: bordered box, inner bordered stat tiles, bordered plan pills.
   Now: one surface; stats are numbers on the card; pills become text.    */
#bizPanel .bp-org, #bizPanel .bp-loc {
  border: 0; background: var(--ui-card);
  border-radius: var(--ui-radius); padding: 24px 26px; margin-bottom: 20px;
}
#bizPanel .bp-stats { gap: 28px; margin-top: 14px; }
#bizPanel .bp-stat { background: none; border: 0; border-radius: 0; padding: 0; min-width: 0; }
#bizPanel .bp-stat-v { font-size: 1.1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
#bizPanel .bp-stat-l { font-weight: 600; letter-spacing: .07em; color: var(--ui-faint); }
#bizPanel .bp-pill { padding: 0; border-radius: 0; letter-spacing: .05em; }
#bizPanel .bp-pill-plan { background: none; border: 0; }
#bizPanel .bp-pill-role { background: none; border: 0; }
#bizPanel .bp-loc-logo { border: 0; }
#bizPanel .bp-tier { background: none; border: 1px solid var(--ui-line); }
#bizPanel .bp-tier.is-current { border-color: var(--ui-accent); }
#bizPanel .bp-subtab { background: none; border: 0; padding: 6px 2px; margin-right: 12px; }
#bizPanel .bp-subtab.active { background: none; border: 0; color: var(--ui-text); box-shadow: inset 0 -2px 0 var(--ui-accent); }
/* Org overview: About block = definition rows with hairlines */
#bizPanel .bp-about-row { display: flex; gap: 16px; padding: 10px 0; font-size: .85rem; border-top: 1px solid var(--ui-line); }
#bizPanel .bp-sec + .bp-about-row { border-top: 0; }
#bizPanel .bp-about-l { width: 160px; flex-shrink: 0; color: var(--ui-faint); font-size: .78rem; font-weight: 600; letter-spacing: .02em; padding-top: 1px; }
#bizPanel .bp-about-v { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { #bizPanel .bp-about-row { flex-direction: column; gap: 2px; } #bizPanel .bp-about-l { width: auto; } }
/* Overview list rows (locations / invoices): hairlines, no trailing rule */
#bizPanel .bpt-row { border-bottom-color: var(--ui-line); padding: 11px 0; }
#bizPanel .bpt-row:last-child { border-bottom: 0; padding-bottom: 2px; }

/* ── 6 · MODULE: event cards (admin fixtures/events + business Events tab)
   Was: blue-bordered card + accent bar, bordered footer buttons, loud pills.
   Now: surface card (live keeps its red edge — semantic), quiet actions. */
.af-card, #staffEventsContainer .af-card {
  border: 0; background: var(--ui-card);
  border-radius: var(--ui-radius-sm); margin-bottom: 10px;
}
.af-card-live, #staffEventsContainer .af-card-live {
  border-left: 3px solid var(--ui-live); /* semantic: live now */
}
.af-card-main, #staffEventsContainer .af-card-main { padding: 14px 18px; }
.af-card-header, .af-card-footer { border-color: var(--ui-line-2) !important; }
.af-loc-rows, #staffEventsContainer .af-loc-rows { border-top: 1px solid var(--ui-line-2) !important; }
.af-loc-row:not(:last-child), #staffEventsContainer .af-loc-row:not(:last-child) { border-bottom: 1px solid var(--ui-line-2) !important; }
.af-card-main, #staffEventsContainer .af-card-main { border-bottom: 1px solid var(--ui-line-2) !important; }
.af-loc-row-top, #staffEventsContainer .af-loc-row-top { padding: 10px 18px 4px; }
.af-loc-row-bottom, #staffEventsContainer .af-loc-row-bottom { padding: 0 18px 10px; }
.af-loc-row-venue, #staffEventsContainer .af-loc-row-venue { font-size: .82rem; }
/* footer/venue actions: text links, not boxed buttons */
.af-footer-btn, #staffEventsContainer .af-footer-btn {
  border: 0; background: none; padding: 4px 2px;
  font-size: .7rem; letter-spacing: .05em; color: var(--ui-muted);
}
.af-footer-btn:hover, .af-footer-btn.af-seat-btn-active,
#staffEventsContainer .af-footer-btn:hover { background: none; border: 0; color: var(--ui-accent); }
/* category (TV) pills: rounded rectangle tinted with the category color,
   label readable (user request 2026-07-05 — replaced the quiet-dot look). */
.af-cat-pill, #staffEventsContainer .af-cat-pill {
  background: var(--cat-color, var(--ui-accent)) !important;
  border: 0;
  color: #101318 !important;
  font-weight: 700 !important; font-size: .62rem !important; letter-spacing: .02em;
  padding: 3px 9px !important; border-radius: 6px !important;
  display: inline-flex; align-items: center;
  line-height: 1.35;
}
.af-cat-pill::before { display: none; }
/* Shell B (business panel): venue rows are a staff surface — the admin
   controls (publish check / edit / open-in-tab) do not render here.      */
body:has(#bshellRail) .af-loc-row-actions { display: none !important; }

/* Shell B on phones/tablets: venue row stacks into exactly three rows —
   1) venue name  2) TV pills on ONE line (equal columns, no wrapping)
   3) ORDERS + SEATS as equal-width buttons.                              */
@media (max-width: 900px) {
  body:has(#bshellRail) .af-loc-row-bottom { flex-wrap: wrap; row-gap: 10px; }
  body:has(#bshellRail) .af-footer-pills { flex: 1 1 100%; flex-wrap: nowrap; gap: 6px; }
  body:has(#bshellRail) .af-footer-pills .af-cat-pill {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding-left: 4px !important; padding-right: 4px !important;
  }
  body:has(#bshellRail) .af-footer-actions { flex: 1 1 100%; margin-left: 0; display: flex; gap: 8px; }
  body:has(#bshellRail) .af-footer-btn { flex: 1; justify-content: center; min-height: 40px; }
}

/* ── 7 · MODULE: orders list (admin + business panel) ────────────────────
   Was: each order a bordered card with colored full border + left bar.
   Now: surface rows; the 3px left edge STAYS — it encodes order type.   */
#ordersTable .data-table tbody tr:not(.date-separator),
#bizPanel #ordersTable .data-table tbody tr:not(.date-separator) {
  border: 0; background: var(--ui-card);
  border-radius: var(--ui-radius-sm); margin-bottom: 8px; padding: 14px 18px;
}
#ordersTable .data-table tbody tr:has(.ord-type-res),
#bizPanel #ordersTable .data-table tbody tr:has(.ord-type-res)    { border: 0; box-shadow: inset 3px 0 0 var(--ui-green); }
#ordersTable .data-table tbody tr:has(.ord-type-evt),
#bizPanel #ordersTable .data-table tbody tr:has(.ord-type-evt)    { border: 0; box-shadow: inset 3px 0 0 var(--ui-accent); }
#ordersTable .data-table tbody tr:has(.ord-type-walkin),
#bizPanel #ordersTable .data-table tbody tr:has(.ord-type-walkin) { border: 0; box-shadow: inset 3px 0 0 var(--ui-gold); }
#ordersTable .data-table tbody tr:not(.date-separator):hover,
#bizPanel #ordersTable .data-table tbody tr:not(.date-separator):hover {
  transform: none; box-shadow: inset 3px 0 0 var(--ui-accent), 0 0 0 9999px rgba(255,255,255,.015) inset;
}

/* ── 8 · STAGE 2 (planned, do NOT style piecemeal elsewhere) ─────────────
   · public fixture & calendar cards  (.fixture-card system, frontpage.css)
   · locations map info card          (.map-loc-info / .ld-*)
   · box office / order sidebar       (order.js surfaces)
   · seating chart wrapper            (public + admin)
   · form fields                      (.cwf family → move out of blades)
   Each lands here as its own labeled section; the legacy declarations are
   then deleted from panel.css / frontpage.css / blade <style> blocks.    */
/* discount pill stays loud — it sells */
.af-cat-pill.af-pill-off {
  background: #ef4444 !important; border: 0;
  color: #fff !important; letter-spacing: .03em;
}
.af-cat-pill.af-pill-off::before { display: none; }

/* ── 9 · MODULE: app shell (Shell B — work surfaces: business panel) ──────
   Rail + slim top bar chassis. Site chrome is hidden on shell pages;
   the shell owns the viewport. Consumer pages never load this markup.  */
body:has(#bshellRail) .navbar,
body:has(#bshellRail) .footer,
body:has(#bshellRail) .browse-section,
body:has(#bshellRail) .bottom-nav { display: none !important; }
/* #spa-content (.page-container) WRAPS the whole page — never hide it.
   Its padding-top offsets the consumer navbar, which shell pages don't have. */
body:has(#bshellRail) #spa-content { margin-top: 0 !important; padding-top: 0 !important; }

.bshell-rail { position: fixed; inset: 0 auto 0 0; width: 232px; z-index: 60;
  background: var(--ui-card); border-right: 1px solid var(--ui-line);
  display: flex; flex-direction: column; padding: 14px 12px; box-sizing: border-box; }
.bshell-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; text-decoration: none; }
.bshell-brand-img { height: 24px; width: auto; display: block; }
.bshell-brand-tag { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-accent); }
.bshell-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.bshell-group { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-faint); margin: 16px 8px 6px; }
.bshell-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--ui-muted); font-size: .86rem; font-weight: 600; text-decoration: none; }
.bshell-item img { opacity: .7; }
.bshell-item:hover { color: var(--ui-text); background: rgba(255,255,255,.04); }
.bshell-item.active { color: var(--ui-text); background: rgba(74,161,217,.10); box-shadow: inset 2px 0 0 var(--ui-accent); }
.bshell-foot { border-top: 1px solid var(--ui-line); padding-top: 8px; }

.bshell-top { position: fixed; top: 0; left: 232px; right: 0; height: 56px; z-index: 55;
  display: flex; align-items: center; gap: 16px; padding: 0 24px; box-sizing: border-box;
  background: rgba(12,14,19,.88); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ui-line); }
.bshell-burger { display: none; background: none; border: 0; color: var(--ui-muted); cursor: pointer; padding: 6px; }
.bshell-search-wrap { position: relative; flex: 1; max-width: 460px; }
.bshell-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .5; }
.bshell-search { width: 100%; box-sizing: border-box; background: var(--ui-card); border: 0; border-radius: 999px;
  padding: 9px 16px 9px 34px; color: var(--ui-text); font-size: .85rem; outline: none; }
.bshell-search:focus { box-shadow: 0 0 0 1px var(--ui-accent); }
.bshell-search::placeholder { color: var(--ui-faint); }
.bshell-avatar { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; background: var(--ui-accent);
  color: #0b1017; font-size: .78rem; font-weight: 800; display: grid; place-items: center; text-decoration: none; }

/* the shell pushes the panel; top bar height = 56px */
body:has(#bshellRail) #bizPanel { margin-left: 232px; max-width: none !important; width: auto; padding: 64px 40px 64px !important; }
body:has(#bshellRail) #bizPanel .bp-subtabs { display: none; } /* org subtabs live in the rail */
.bshell-sub { padding: 6px 10px 6px 28px; font-size: .8rem; font-weight: 500; }
.bshell-sub i { font-size: 13px !important; width: 16px; text-align: center; opacity: .75; }
.bshell-sub.active i, .bshell-sub:hover i { opacity: 1; }
/* Org switcher (top bar) — rendered ONLY for multi-org accounts */
.bshell-orgswitch {
  background: var(--ui-card); color: var(--ui-text);
  border: 1px solid var(--ui-line); border-radius: 8px;
  padding: 7px 10px; font-size: .82rem; font-weight: 600;
  max-width: 200px; cursor: pointer;
}
.bshell-orgswitch:focus-visible { outline: none; border-color: var(--ui-accent); }

@media (max-width: 900px) {
  .bshell-rail { transform: translateX(-100%); transition: transform .2s ease; }
  body.bshell-open .bshell-rail { transform: none; box-shadow: 24px 0 60px rgba(0,0,0,.5); }
  .bshell-top { left: 0; }
  .bshell-burger { display: block; }
  body:has(#bshellRail) #bizPanel { margin-left: 0; padding: 72px 16px 48px !important; }
}

/* ── 10 · IMPORTED: admin settings save-card pattern (panel.css) ─────────
   Card = .bp-loc.es-section. Save button in .es-actions renders as a 28px
   icon top-right: green check (saved) / pulsing orange floppy (.es-unsaved)
   / green pop (.es-saved-flash). Same classes as /admin location settings. */
.es-section { position: relative; transition: border-color 0.25s, box-shadow 0.25s; }
.es-section .es-actions {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 0 !important;
  border-top: none !important;
  margin: 0 !important;
  z-index: 5;
  display: flex;
  gap: 6px;
}
.es-section .es-actions .btn,
.es-section .es-actions button {
  width: 28px !important;
  height: 28px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 6px;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background: #16a34a;
  border: none;
  display: block !important;
  position: relative;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  text-indent: -9999px;
  overflow: hidden;
}
.es-section .es-actions .btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  text-indent: 0;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.es-section.es-unsaved {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 1px #f59e0b inset, 0 0 14px rgba(245,158,11,0.18);
}
.es-section.es-unsaved .es-actions .btn { background: #f59e0b; animation: es-pulse 1.2s ease-in-out infinite; }
.es-section.es-unsaved .es-actions .btn::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><polyline points='17 21 17 13 7 13 7 21'/><polyline points='7 3 7 8 15 8'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><polyline points='17 21 17 13 7 13 7 21'/><polyline points='7 3 7 8 15 8'/></svg>") center/contain no-repeat;
}
.es-section.es-saved-flash .es-actions .btn { background: #16a34a; animation: es-saved 0.6s ease-out; }
@keyframes es-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.65); transform: scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(245,158,11,0); transform: scale(1.06); }
}
@keyframes es-saved {
  0% { transform: scale(0.85); }
  45% { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(22,163,74,0.32); }
  100% { transform: scale(1); }
}
.es-section .es-section-header { padding-right: 56px; }

/* Single-button cycle on the org About card: pencil (read) → floppy (edit)
   → orange floppy (dirty) → green check flash (saved) → pencil again. */
.es-section .es-actions .btn.es-btn-edit { background: var(--ui-accent, #4aa1d9); }
.es-section .es-actions .btn.es-btn-edit::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/></svg>") center/contain no-repeat;
}
.es-section.es-editing .es-actions .btn { background: var(--ui-accent, #4aa1d9); }
.es-section.es-editing .es-actions .btn::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><polyline points='17 21 17 13 7 13 7 21'/><polyline points='7 3 7 8 15 8'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><polyline points='17 21 17 13 7 13 7 21'/><polyline points='7 3 7 8 15 8'/></svg>") center/contain no-repeat;
}
/* dirty always wins over the editing base state */
.es-section.es-editing.es-unsaved .es-actions .btn { background: #f59e0b; animation: es-pulse 1.2s ease-in-out infinite; }

/* Exact-field highlight while unsaved: the edited control glows orange */
.cwf.field-dirty .cwf-input { box-shadow: 0 0 0 1px #f59e0b inset !important; border-color: #f59e0b !important; }
.cwp.field-dirty { box-shadow: 0 0 0 1px rgba(245,158,11,.75); border-radius: 10px; }
.oh-day-row.field-dirty { box-shadow: 0 0 0 1px rgba(245,158,11,.75); border-radius: 10px; }
#bpkSel.field-dirty { box-shadow: 0 0 0 1px rgba(245,158,11,.75); border-radius: 10px; padding: 6px; }

/* Business panel: EVERY save card cycles EDIT(pencil) → SAVE(floppy, orange
   when dirty) → CHECK(flash) → EDIT again. Blocks are locked (pointer-events)
   until the pencil is clicked. */
#bizPanel .es-section .es-actions .btn { background: var(--ui-accent, #4aa1d9); }
#bizPanel .es-section .es-actions .btn::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/></svg>") center/contain no-repeat;
}
#bizPanel .es-section.es-editing .es-actions .btn::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><polyline points='17 21 17 13 7 13 7 21'/><polyline points='7 3 7 8 15 8'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><polyline points='17 21 17 13 7 13 7 21'/><polyline points='7 3 7 8 15 8'/></svg>") center/contain no-repeat;
}
#bizPanel .es-section.es-editing.es-unsaved .es-actions .btn { background: #f59e0b; animation: es-pulse 1.2s ease-in-out infinite; }
#bizPanel .es-section.es-saved-flash .es-actions .btn { background: #16a34a !important; animation: es-saved 0.6s ease-out; }
#bizPanel .es-section.es-saved-flash .es-actions .btn::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat !important;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat !important;
}
/* Locked until the pencil is pressed */
#bizPanel .es-section[data-blk]:not(.es-editing) > *:not(.es-actions):not(.es-section-header),
#bizPanel [data-org].es-section:not(.es-editing) > *:not(.es-actions):not(.es-section-header) {
  pointer-events: none;
}
#bizPanel .es-section[data-blk]:not(.es-editing) .oh-editor,
#bizPanel .es-section[data-blk]:not(.es-editing) [data-pick] { opacity: .75; }

/* ── 6b · Shell B event-card design pass (2026-07-05) ───────────────────── */
/* Header time stack: the kickoff line leads, end time + date step back */
body:has(#bshellRail) .af-center { text-align: center; }
body:has(#bshellRail) .af-center .af-time {
  display: block; font-weight: 600; color: var(--ui-muted);
  font-size: .82rem; line-height: 1.5; text-align: center;
}
body:has(#bshellRail) .af-center .af-date-sm { display: block; text-align: center; }
body:has(#bshellRail) .af-center .af-time::first-line {
  font-size: 1.08rem; font-weight: 800; color: var(--ui-text);
}
body:has(#bshellRail) .af-date-sm { color: var(--ui-faint); font-size: .68rem; letter-spacing: .06em; }

/* Venue rows: name carries the hierarchy; steady 16px rhythm */
body:has(#bshellRail) .af-loc-row-top { padding: 14px 16px 8px; }
body:has(#bshellRail) .af-loc-row-venue { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; }
body:has(#bshellRail) .af-loc-row-venue i,
body:has(#bshellRail) .af-loc-row-venue img { opacity: .55; }
body:has(#bshellRail) .af-loc-row-bottom { padding: 0 16px 14px; }

/* Action buttons: raised surface, alive states, honest touch height */
body:has(#bshellRail) .af-footer-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #cfd5df;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  padding: 7px 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, color .15s, border-color .15s;
}
body:has(#bshellRail) .af-footer-btn:hover { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
body:has(#bshellRail) .af-footer-btn:active { background: rgba(255,255,255,.1); }
body:has(#bshellRail) .af-footer-btn.af-seat-btn-active {
  background: rgba(74,161,217,.16); border-color: var(--ui-accent); color: #bfe0f7;
}
@media (max-width: 900px) {
  body:has(#bshellRail) .af-footer-btn { min-height: 36px; }
  body:has(#bshellRail) .af-footer-pills .af-cat-pill { height: 24px; }
}

/* Slide-panel header = the event card block; X floats top-right; venue row */
.slide-panel .panel-header.panel-header-ev {
  padding: 0 !important; display: block; position: relative;
  border-bottom: 1px solid var(--ui-line-2);
}
.panel-header-ev .af-card-main {
  padding: 16px 46px 14px 16px; border: 0;
}
body:has(#bshellRail) .panel-close-float {
  position: absolute; top: 10px; right: 10px; z-index: 3;
}
.panel-evvenue {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-bottom: 1px solid var(--ui-line);
  font-size: .85rem; font-weight: 650;
}
.panel-evvenue i { opacity: .55; }
/* Venue row as the panel's TOP bar: name left, X right, strong separator. */
.panel-evvenue-top { border-bottom: 1px solid var(--ui-line-2); padding: 12px 12px 12px 18px; }
.panel-evvenue-top > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-evvenue-top .panel-close { margin-left: auto; flex: 0 0 auto; }
.panel-header-ev .af-card-main { padding: 16px 16px 14px; }

/* Order-card in-cell labels (icon + text; replaces data-label ::before) */
.ord-cell-lbl { font-size: .7rem; text-transform: uppercase; color: var(--text-muted, var(--ui-muted));
  letter-spacing: .04em; font-weight: 600; margin-bottom: 3px; }
.ord-cell-lbl i { opacity: .6; margin-right: 5px; font-size: 11px !important; }
.ord-cell-lbl span { vertical-align: middle; }

/* Slide-panel event-info block (ORDERS/SEATS headers) */
.panel-evinfo { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.panel-evinfo-row { display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 500; color: var(--ui-muted); }
.panel-evinfo-row i { opacity: .65; width: 14px; text-align: center; }

/* ── 12 · MODULE: side panel — ONE shell for every Shell B slide-over ────
   ORDERS/SEATS panel (.slide-panel), order detail (.ord-bookvelt-panel) and
   .bp-side share container, overlay, header and close-button treatment.   */
body:has(#bshellRail) .slide-panel,
body:has(#bshellRail) .ord-bookvelt-panel,
body:has(#bshellRail) .bp-side {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 92vw;
  background: var(--ui-card);
  border-left: 1px solid var(--ui-line-2);
  box-shadow: -24px 0 60px rgba(0,0,0,.45);
  overflow-y: auto; box-sizing: border-box;
  z-index: 10000;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
body:has(#bshellRail) .slide-panel-overlay,
body:has(#bshellRail) .ord-bookvelt-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(4,6,10,.55); backdrop-filter: blur(2px);
}
/* header: title block left, X right — identical across panels */
body:has(#bshellRail) .ord-bookvelt-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 18px 14px; border-bottom: 1px solid var(--ui-line);
  position: sticky; top: 0; background: var(--ui-card); z-index: 2;
}
body:has(#bshellRail) .ord-bookvelt-header h3,
body:has(#bshellRail) .panel-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
body:has(#bshellRail) .panel-close,
body:has(#bshellRail) .ord-bookvelt-close {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--ui-muted); cursor: pointer;
}
body:has(#bshellRail) .panel-close:hover,
body:has(#bshellRail) .ord-bookvelt-close:hover { background: rgba(255,255,255,.07); color: #fff; }
body:has(#bshellRail) .ord-bookvelt-panel > *:not(.ord-bookvelt-header) { margin-left: 18px; margin-right: 18px; }
@media (max-width: 560px) {
  body:has(#bshellRail) .slide-panel,
  body:has(#bshellRail) .ord-bookvelt-panel,
  body:has(#bshellRail) .bp-side { width: 100vw; max-width: 100vw; border-left: 0; }
}

/* ── 11 · RESPONSIVE FOUNDATION (Shell B on phones & tablets) ─────────────
   Bar staff run this panel one-handed on a phone behind the bar. Rules:
   primary nav within thumb reach (bottom tab bar), 44px touch targets,
   16px inputs (iOS zoom), content never hides under fixed chrome.       */

/* Drawer scrim — sits under the rail, above everything else */
.bshell-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(4,6,10,.55);
  backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
body.bshell-open .bshell-scrim { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { .bshell-scrim { display: none; } }

/* Bottom tab bar — phones/tablets only. Dashboard / Orders / Events / Menu. */
.bshell-tabbar { display: none; }
@media (max-width: 900px) {
  .bshell-rail { z-index: 61; }   /* drawer above the scrim */
  .bshell-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(12,14,19,.92); backdrop-filter: blur(10px);
    border-top: 1px solid var(--ui-line);
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .bshell-tab { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 48px; padding: 4px 2px; border: 0; background: none; border-radius: 10px;
    color: var(--ui-muted); font-size: .6rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; text-decoration: none; font-family: inherit; cursor: pointer; }
  .bshell-tab i { font-size: 17px !important; opacity: .8; }
  .bshell-tab:active { background: rgba(255,255,255,.05); }
  .bshell-tab.active { color: var(--ui-accent); }
  .bshell-tab.active i { opacity: 1; }
  /* content clears the fixed tab bar */
  body:has(#bshellRail) #bizPanel { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  /* top bar breathes on small screens */
  .bshell-top { padding: 0 12px; gap: 10px; }
  .bshell-orgswitch { max-width: 132px; }
}

/* Touch targets on coarse pointers (phones + tablets) */
@media (pointer: coarse) {
  .bshell-item { min-height: 44px; }
  .bshell-burger { min-width: 44px; min-height: 44px; }
  #bizPanel .ui-act { padding: 8px 6px; }
}

/* iOS Safari zooms the page when a focused input is under 16px */
@media (max-width: 760px) {
  .bshell-search,
  #bizPanel .cwf-input,
  #bizPanel select,
  #bizPanel textarea,
  #bizPanel input[type="search"],
  #bizPanel input[type="text"],
  #bizPanel input[type="email"],
  #bizPanel input[type="tel"] { font-size: 16px !important; }
}

/* Orders rows on phones: 2-col card (ref/type strip spans both columns) —
   overrides the blade's single-column stack; this file loads last.       */
@media (max-width: 720px) {
  #ordersTable .data-table tbody tr:not(.date-separator),
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) {
    grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px 14px;
  }
  /* pills strip + location each own a full row; then EVENT|DATE+TIME and
     CUSTOMER|PEOPLE+TABLES flow as two 2-col rows (6 | 3+3 rhythm). */
  #ordersTable .data-table tbody tr:not(.date-separator) > td:first-child,
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td:first-child,
  #ordersTable .data-table tbody tr:not(.date-separator) > td.ord-td-loc,
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td.ord-td-loc {
    grid-column: 1 / -1;
  }
}
/* Shell B orders — two layouts (user spec):
   ≤720px stacked card; ≥721px pills-left grid:
     [pills] | LOCATION | EVENT | COMPETITION
             | DATE | TIME | NAME · PEOPLE · TABLE                        */
@media (max-width: 720px) {
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) {
    grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px 14px;
  }
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td:first-child,
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td.ord-td-loc,
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td.ord-td-last {
    grid-column: 1 / -1;
  }
  /* pills strip lies horizontal on phones */
  #bizPanel #ordersTable .ord-type-id { flex-direction: row; align-items: center; gap: 6px; width: 100%; }
  #bizPanel #ordersTable .ord-type-id > span { flex: 1 1 0; min-width: 0; }
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td:nth-child(4),
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td:nth-child(6) { text-align: right; }
  /* TABLE hugs the card's right edge like TIME/COMPETITION above */
  #bizPanel #ordersTable .ord-dt-3 > div:last-child { text-align: right; }
}
@media (min-width: 721px) {
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) {
    grid-template-columns: 150px 1.3fr .8fr 1.3fr 1.1fr .6fr;
    gap: 10px 16px; padding: 14px 18px; align-items: start;
  }
  /* pills: vertical stack, col 1, spans both rows */
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td:first-child { grid-column: 1; grid-row: 1 / span 2; }
  #bizPanel #ordersTable .ord-type-id { flex-direction: column; width: 100%; }
  /* col 2: LOCATION (row 2 empty) */
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td.ord-td-loc { grid-column: 2; grid-row: 1; }
  /* col 3: DATE / TIME */
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td:nth-child(5) { grid-column: 3; grid-row: 1; }
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td:nth-child(6) { grid-column: 3; grid-row: 2; }
  /* col 4: EVENT / COMPETITION */
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td:nth-child(3) { grid-column: 4; grid-row: 1; }
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td:nth-child(4) { grid-column: 4; grid-row: 2; }
  /* cols 5+6: split the merged NAME/PEOPLE/TABLE cell into grid items */
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td.ord-td-last { display: contents !important; }
  #bizPanel #ordersTable .ord-td-last .ord-dt { display: contents; }
  #bizPanel #ordersTable .ord-td-last .ord-dt > div:nth-child(1) { grid-column: 5; grid-row: 1; }
  #bizPanel #ordersTable .ord-td-last .ord-dt > div:nth-child(2) { grid-column: 6; grid-row: 1; }
  #bizPanel #ordersTable .ord-td-last .ord-dt > div:nth-child(3) { grid-column: 6; grid-row: 2; }
}
/* Title row: page name left, count pill right (rounded rectangle) */
.bp-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.bp-count-pill { background: rgba(74,161,217,.13); border: 1px solid rgba(74,161,217,.4);
  color: #8fc4e8; border-radius: 8px; padding: 3px 12px;
  font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
/* Shell B filter rows: equal columns, selects fill their track */
body:has(#bshellRail) #bizPanel .table-toolbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
}
body:has(#bshellRail) #bizPanel .table-toolbar .filter-select { width: 100%; box-sizing: border-box; }

/* labels never break mid-word (PEO PLE) */
.ord-cell-lbl { white-space: nowrap; }

/* The merged Name/People/Table cell is the 7th td; panel.css hides
   td:nth-child(7) (the admin eye column) and late-loads, so win by class. */
#ordersTable .data-table td.ord-td-last,
#bizPanel #ordersTable .data-table td.ord-td-last { display: block !important; }

/* in-cell splits — all widths. .ord-dt-3: customer gets double width. */
.ord-dt { display: flex; gap: 12px; }
.ord-dt > div { flex: 1; min-width: 0; }
/* NAME absorbs leftover space; PEOPLE + TABLE are content-sized and hug the
   right edge as one cluster — more tables widen the cluster leftward. */
.ord-dt-3 > div:first-child { flex: 1 1 auto; min-width: 0; }
.ord-dt-3 > div:nth-child(2), .ord-dt-3 > div:last-child { flex: 0 0 auto; min-width: 0; }
@media (max-width: 720px) {
  #ordersTable .data-table tbody tr:not(.date-separator) > td.ord-td-last,
  #bizPanel #ordersTable .data-table tbody tr:not(.date-separator) > td.ord-td-last { grid-column: 1 / -1; }
}

/* Slide-over side panels own the whole viewport on small phones */
@media (max-width: 480px) { .bp-side { width: 100vw; border-left: 0; } }

/* Reduced motion: no sliding drawer, no pulsing save button */
@media (prefers-reduced-motion: reduce) {
  .bshell-rail, .bshell-scrim { transition: none; }
  .es-section.es-unsaved .es-actions .btn,
  #bizPanel .es-section.es-editing.es-unsaved .es-actions .btn { animation: none; }
}

/* Seating panel read-only (employees): board stays visible, toggles inert,
   contact-a-manager rows sit above the grid. */
.af-sd-ro .af-sd-vt-wrap, .af-sd-ro .af-sd-tbl-toggle { pointer-events: none; }
.af-sd-readonly { border: 1px solid var(--bv-line); background: rgba(255,255,255,.04); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.af-sd-ro-note { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.af-sd-contact { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--bv-line); }
.af-sd-ro-note + .af-sd-contact { border-top: 0; }
.af-sd-contact-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.af-sd-cname { font-size: .84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.af-sd-contact-role { font-size: .52rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-sd-contact-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.af-sd-cbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--bv-line); text-decoration: none; transition: all 0.15s; }
.af-sd-cbtn:active { transform: scale(.94); }
.af-sd-cbtn-wa { color: #25d366; }
.af-sd-cbtn-wa:hover { border-color: #25d366; }
.af-sd-cbtn-tel { color: #4aa1d9; }
.af-sd-cbtn-tel:hover { border-color: #4aa1d9; }

/* VIEW ONLY pill in the seating header (read-only mode). */
.af-sd-ro-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: rgba(255,255,255,.07); border: 1px solid var(--bv-line); padding: 4px 10px; border-radius: 7px; }

/* Open panel/sidebar = page scroll locked; only the panel scrolls.
   (iOS Safari ignores this on body — the JS lock in business-panel.blade.php
   position-fixes the body there; this stays as the desktop/spec path.) */
html:has(.slide-panel-overlay.open),
html:has(#staffOrderSidebar:not([hidden])),
html:has(.ord-bookvelt-panel:not([hidden])),
body:has(.slide-panel-overlay.open),
body:has(#staffOrderSidebar:not([hidden])),
body:has(.ord-bookvelt-panel:not([hidden])) { overflow: hidden; }
.slide-panel, .bp-side, .ord-bookvelt-panel { overscroll-behavior: contain; }
.slide-panel-overlay { overscroll-behavior: contain; }


/* Status pill in the order sidebar: equal breathing room on both sides. */
.bp-status-pillwrap > * { padding-left: 10px !important; padding-right: 10px !important; }

/* Order sidebar SEATING = Box Office pill model (label pills + values). */
.bp-seat-grid { display: grid; gap: 8px 10px; margin: 6px 0 2px; }
.bp-seat-grid + .bp-seat-grid { margin-top: 12px; }
.bp-seat-pill { background: var(--accent, #4aa1d9); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-align: center; padding: 6px 4px; border-radius: 8px; }
.bp-seat-val { text-align: center; font-weight: 800; font-size: 1.05rem; }

/* The hidden attribute must actually hide rail entries — .bshell-item's
   display:flex otherwise overrides the UA's [hidden]{display:none}. */
.bshell-item[hidden], .bshell-group[hidden], .bshell-tab[hidden] { display: none !important; }

/* Fixture details slide panel */
.fx-score { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px 0 4px; }
.fx-score-num { font-size: 2.2rem; font-weight: 800; }
.fx-score-sep { font-size: 1.6rem; color: var(--text-muted, #8a8f98); }
.fx-score-state { text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #8a8f98); margin-bottom: 8px; }
.fx-score-state.fx-live { color: #22c55e; }
.fx-rows { padding: 6px 0; }
.fx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--bv-line); }
.fx-row:first-child { border-top: 0; }
.fx-row-label { display: inline-flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #8a8f98); white-space: nowrap; }
.fx-row-label i { opacity: .6; }
.fx-row-val { font-size: .88rem; font-weight: 700; text-align: right; min-width: 0; }
.fx-pill { font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: 6px; background: rgba(74,161,217,.15); color: var(--accent, #4aa1d9); border: 1px solid rgba(74,161,217,.4); }
.fx-pill-live { background: rgba(34,197,94,.15); color: #22c55e; border-color: rgba(34,197,94,.5); }
/* match header: bigger date under kickoff (end time removed) */
.af-card-main .af-date-sm { font-size: .92rem; font-weight: 700; }

/* Slide panel keeps EXACTLY 4 table cells per row (user spec). */
body:has(#bshellRail) .slide-panel .af-sd-tables { grid-template-columns: repeat(4, 1fr); }

/* ORDERS slide panel: pro header + staff-sidebar card vocabulary */
.af-ord-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px 12px; border-bottom: 2px solid var(--border, var(--bv-line-solid)); }
.af-ord-title { display: inline-flex; align-items: center; gap: 9px; font-size: 1.02rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.af-ord-head .af-ord-count { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.af-ord-list { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.af-ord-card { padding: 14px 16px 16px; background: rgba(0,0,0,.28); border: 1px solid var(--border, var(--bv-line-solid)); border-left: 3px solid var(--accent, #4aa1d9); border-radius: 12px; }
.af-ord-top { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.af-ord-top .af-ord-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; font-weight: 700; margin-bottom: 0; }
.af-ord-top .af-ord-ref { flex: 0 0 auto; }

/* global search overlay */
.sbs-overlay[hidden]{display:none}
.sbs-overlay{position:fixed;inset:0;z-index:1200;background:rgba(5,5,10,.6);backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px}
.sbs-panel{width:100%;max-width:560px;background:var(--bg-card,#161622);border:1px solid var(--border-hover,rgba(255,255,255,.14));border-radius:var(--radius-lg,14px);overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.sbs-inputrow{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border,var(--bv-line))}
.sbs-inputrow img{opacity:.6}
.sbs-input{flex:1;background:none;border:none;outline:none;color:var(--text,#fff);font-size:1rem;font-family:inherit}
.sbs-input::placeholder{color:var(--text-muted,#64748b)}
.sbs-close{background:none;border:none;cursor:pointer;padding:4px;opacity:.7}
.sbs-close:hover{opacity:1}
.sbs-list{max-height:56vh;overflow-y:auto}
.sbs-row{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer}
.sbs-row:hover,.sbs-row.on{background:var(--bg-hover,rgba(255,255,255,.06))}
.sbs-ic{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex:none}
.sbs-ic img{max-width:26px;max-height:26px;object-fit:contain;border-radius:50%}
.sbs-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.sbs-tx b{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbs-tx i{font-style:normal;font-size:.78rem;color:var(--text-secondary,#94a3b8)}
.sbs-type{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#64748b);border:1px solid var(--border,var(--bv-line));border-radius:999px;padding:2px 8px;flex:none}
.sbs-empty{padding:22px;text-align:center;color:var(--text-muted,#64748b);font-size:.9rem}
body.sbs-open{overflow:hidden}

/* Panel language switcher. The site's own switcher lives in the navbar and the
   offcanvas menu, both hidden on shell pages, so the panel carries its own.
   Flag only in the bar; the list drops from it. */
/* Takes the free space so it lands beside the avatar rather than trailing
   the search box. When it is absent the avatar keeps its own auto margin,
   so the bar still right-aligns. */
.bshell-lang { position: relative; flex: 0 0 auto; display: flex; margin-left: auto; }
.bshell-lang + .bshell-avatar { margin-left: 0; }
.bshell-lang-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; padding: 0;
  border: 1px solid var(--ui-line, var(--bv-line));
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.bshell-lang-btn img { display: block; border-radius: 2px; }
.bshell-lang-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.20); }
.bshell-lang.open .bshell-lang-btn { border-color: var(--ui-accent, #4aa1d9); }
.bshell-lang-btn:focus-visible { outline: 2px solid var(--ui-accent, #4aa1d9); outline-offset: 1px; }

.bshell-lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 210px; max-height: 60vh; overflow-y: auto;
  padding: 6px;
  background: var(--ui-card, #14141e);
  border: 1px solid var(--ui-line, var(--bv-line));
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.bshell-lang-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 8px;
  background: none; color: var(--ui-text-muted, #94a3b8);
  font: inherit; font-size: .85rem; font-weight: 600; text-align: left; cursor: pointer;
}
.bshell-lang-opt img { flex: 0 0 auto; border-radius: 2px; }
.bshell-lang-opt:hover { background: rgba(255,255,255,.06); color: var(--ui-text, #fff); }
.bshell-lang-opt.active { color: var(--ui-text, #fff); background: rgba(74,161,217,.15); }

/* Org switcher lives in the RAIL, directly under the brand, as the first
   thing in the panel. Rendered only for multi-org accounts. */
.bshell-orgpick { padding: 0 12px 12px; }
.bshell-orgpick .bshell-orgswitch { width: 100%; max-width: none; }


/* ── The notice strip inside the business shell (owner 2026-09-04) ─────────
   The strip is on every page, the panel included. There the site navbar is
   hidden and the shell's own 56px bar is fixed over the top, with the rail
   232px down the left, so the band takes those offsets instead of the site's
   --nav-height. The panel's own 64px of breathing room comes off while a
   notice is holding that space. */
body:has(#bshellRail) .bv-notices { position: fixed; top: 56px; left: 232px; right: 0; margin: 0; z-index: 54; }
body:has(#bshellRail).has-bv-notice #bizPanel { padding-top: calc(16px + var(--bv-notice-h, 0px)) !important; }
/* The bell flows in before the language switcher and touches nothing else:
   .bshell-avatar keeps its own margin-left:auto, so the right-hand cluster
   stays where it was whether the bell is shown or hidden. */
.bshell-top .bshell-bell .nav-bell-btn {
  background: none; border: 0; color: var(--ui-muted); cursor: pointer;
  padding: 6px; display: inline-flex; align-items: center;
}
.bshell-top .bshell-bell .nav-bell-btn:hover { color: var(--ui-text); }
@media (max-width: 900px) {
  body:has(#bshellRail) .bv-notices { left: 0; }
  body:has(#bshellRail).has-bv-notice #bizPanel { padding-top: calc(16px + var(--bv-notice-h, 0px)) !important; }
}

/* ── Food menu (owner 2026-09-22) ──────────────────────────────────────────
   Section name biggest, dish name next, dotted leaders out to the price, the
   description under it and smaller. The leader is a repeating gradient, so it
   stretches to whatever space is left instead of a row of typed dots. */
.fm-overlay{align-items:flex-start;padding:6vh 16px 16px}
.fm-dialog{width:100%;max-width:620px;max-height:84vh;display:flex;flex-direction:column;background:var(--bg-card,#161622);border:1px solid var(--bv-line);border-radius:16px;overflow:hidden}
.fm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--bv-line)}
.fm-head-title{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;color:var(--text,#fff)}
.fm-close{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--bv-line);background:rgba(255,255,255,.04);color:var(--text,#fff);cursor:pointer}
.fm-close:hover{background:rgba(255,255,255,.09)}
.fm-venue{padding:10px 16px 0;color:var(--text-secondary,#94a3b8);font-size:.85rem}
.fm-body{padding:14px 16px 20px;overflow:auto}
.fm-section+.fm-section{margin-top:22px}
.fm-section-name{margin:0 0 10px;font-size:1.18rem;font-weight:900;letter-spacing:.01em;color:var(--text,#fff)}
.fm-dishes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
/* A dish is a thumbnail and its text; the thumbnail opens the dish larger. */
.fm-dish{display:flex;align-items:flex-start;gap:12px}
.fm-dish-body{flex:1;min-width:0}
.fm-thumb{flex:none;width:64px;height:64px;padding:0;border:1px solid var(--bv-line);border-radius:10px;overflow:hidden;background:var(--bg-glass,rgba(255,255,255,.04));cursor:pointer}
.fm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* A real photo fills the square; the placeholder FITS it, or the crop eats the
   cutlery and leaves a smudge. */
.fm-thumb img.is-ph{object-fit:contain;padding:7px}
.fm-thumb:hover{border-color:var(--accent,#4aa1d9)}
.fm-photo-overlay{z-index:1300;align-items:center;padding:16px}
.fm-photo-dialog{position:relative;width:100%;max-width:560px;background:var(--bg-card,#161622);border:1px solid var(--bv-line);border-radius:16px;overflow:hidden}
.fm-photo-close{position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,0,0,.55)}
.fm-photo-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg-glass,rgba(255,255,255,.04))}
.fm-photo-text{padding:14px 16px 18px}
.fm-photo-line{display:flex;align-items:baseline;gap:12px}
.fm-photo-name{flex:1;min-width:0;font-size:1.1rem;font-weight:800;color:var(--text,#fff)}
.fm-photo-price{flex:none;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text,#fff)}
.fm-photo-desc{margin:6px 0 0;font-size:.88rem;color:var(--text-secondary,#94a3b8)}
@media (max-width:720px){.fm-thumb{width:54px;height:54px}}
.fm-dish-line{display:flex;align-items:baseline;gap:8px}
.fm-dish-name{font-size:1rem;font-weight:700;color:var(--text,#fff)}
.fm-leader{flex:1 1 auto;min-width:18px;height:1px;align-self:flex-end;margin-bottom:5px;background-image:radial-gradient(circle,var(--text-muted,#64748b) 1px,transparent 1.2px);background-size:6px 2px;background-repeat:repeat-x;opacity:.6}
.fm-dish-price{flex:none;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text,#fff);white-space:nowrap}
.fm-dish-desc{margin-top:3px;font-size:.84rem;color:var(--text-secondary,#94a3b8)}
.fm-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;line-height:1;border-radius:8px;border:1px solid var(--accent,#4aa1d9);background:var(--accent,#4aa1d9);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.06em;cursor:pointer}
.fm-btn:hover{filter:brightness(1.12);color:#fff}
/* The icon is the text, same size: no fixed-width box, no own line height, and
   the card heading rule (18px box, 0.7 opacity) must not reach inside the button. */
.fm-btn i,.ld-sidebar-card>h3 .fm-btn i{font-size:1em;width:auto;height:auto;line-height:1;opacity:1}
.fm-btn span{line-height:1}
@media (max-width:720px){.fm-overlay{padding:4vh 10px 10px}.fm-section-name{font-size:1.08rem}.fm-dish-name{font-size:.94rem}}
/* The FOOD heading holds its MENU button in the title row, left aligned beside
   the word, never pushed to the right edge (owner 2026-09-22). */
.ld-food-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ld-food-head>span{margin-right:2px}
.ld-food-head .fm-btn{margin-left:auto}

/* A food word in a venue's prose that opens its menu popup (2026-09-22). Reads as
   text with the brand-blue link colour, never as a button. */
.fm-link{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;color:var(--accent,#4aa1d9);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.fm-link:hover{text-decoration-thickness:2px}

/* Report a problem (2026-10-02): the opener closes every entity page, the
   dialog rides the food menu overlay (.sbs-overlay + .fm-dialog). */
.rp-wrap{padding:8px 0 28px}
.rp-inner{display:flex;justify-content:center}
.rp-inline{padding:24px 0 8px}
.rp-inline .rp-inner{justify-content:flex-start}
.rp-open{color:#b8bfcc}
.rp-dialog{max-width:480px;box-shadow:var(--bv-lift)}
.rp-body{display:flex;flex-direction:column;gap:12px;padding:16px;overflow:auto}
.rp-q{font-weight:700;font-size:.95rem;color:var(--text,#fff)}
.rp-opts{display:flex;flex-direction:column;gap:8px}
.rp-opt{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--bv-line);border-radius:10px;background:rgba(255,255,255,.02);cursor:pointer;color:var(--text,#fff);font-size:.92rem}
.rp-opt:hover{background:rgba(255,255,255,.05)}
.rp-opt input{position:absolute;opacity:0;pointer-events:none}
.rp-radio{flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:1px solid var(--bv-line);background:transparent}
.rp-opt:has(input:checked){border-color:var(--brand-blue,#4aa1d9);background:rgba(74,161,217,.08)}
.rp-opt:has(input:checked) .rp-radio{border:5px solid var(--brand-blue,#4aa1d9)}
.rp-opt:has(input:focus-visible){outline:2px solid var(--brand-blue,#4aa1d9);outline-offset:2px}
.rp-note-label{font-size:.82rem;color:#b8bfcc;margin-top:4px}
.rp-note{width:100%;min-height:76px;resize:vertical;padding:12px;border:1px solid var(--bv-line);border-radius:10px;background:rgba(255,255,255,.03);color:var(--text,#fff);font:inherit;font-size:.92rem}
.rp-note:focus{outline:none;border-color:var(--brand-blue,#4aa1d9)}
.rp-err{color:#f87171;font-size:.85rem}
.rp-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.rp-done{align-items:center;text-align:center;padding:24px 16px}
.rp-done-icon{color:#22c55e}
.rp-done-title{font-weight:800;font-size:1rem;color:var(--text,#fff)}
.rp-done-text{margin:0;color:#b8bfcc;font-size:.92rem}
.rp-done .rp-actions{justify-content:center}