/* FutsalRange — Sporty Redesign Tokens + Scoped Styles
   All admin-profile sporty rules live here.
   Token scope: :root (global, safe to reference anywhere)
   Style scope: :is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) = admin only
*/

:root {
  --fr-bg:          #eef0f4;
  --fr-card:        #fff;
  --fr-dark:        #0e0f12;
  --fr-ink:         #14161c;
  --fr-muted:       #6b7280;
  --fr-muted2:      #9aa0ab;
  --fr-line:        #e7e9ee;
  --fr-red:         #ec2b34;
  --fr-red-2:       #c0101f;
  --fr-red-soft:    #fdecec;
  --fr-green:       #15a85a;
  --fr-green-soft:  #e6f7ee;
  --fr-green-ink:   #0c7a40;
  --fr-amber:       #f0930f;
  --fr-amber-soft:  #fdf1de;
  --fr-amber-ink:   #a3640a;
  --fr-orange:      #f0760f;
  --fr-blue:        #2f6fed;
  --fr-radius:      16px;
  --fr-shadow:      0 6px 18px -10px rgba(20,22,28,.25);
}
/* ═══════════════════════════════════════════════════════════════
   ADMIN PROFILE — BOLD & SPORTY THEME
   Scope: :is(body:has(#super-settings-btn),body:has(#fr-sporty-profile))
   Tokens — red:var(--fr-red)  green:var(--fr-green)  amber:var(--fr-amber)  blue:var(--fr-blue)
═══════════════════════════════════════════════════════════════ */

/* ── Page shell ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-dashboard-wrap {
  background: #e8ecf0 !important;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-dashboard {
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(15,23,42,0.11);
  border: none;
}

/* ── Dashboard & section titles — italic 900 ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-dashboard-title {
  font-style: italic;
  font-weight: 900;
  font-size: 1.2rem;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-section-title {
  font-style: italic;
  font-weight: 900;
  color: #111827;
  letter-spacing: 0.01em;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-section-title i { color: var(--fr-red); }

/* ── Stat cards — 4 px accent bar + bolder type ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card {
  border-left-width: 4px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--primary { border-left-color: var(--fr-blue); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--success { border-left-color: var(--fr-green); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--danger  { border-left-color: var(--fr-red); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--warning { border-left-color: var(--fr-amber); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--info    { border-left-color: var(--fr-blue); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--cyan    { border-left-color: #0891b2; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--purple  { border-left-color: #7c3aed; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card__label {
  font-style: italic;
  font-weight: 800;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card__value { font-weight: 900; }

/* ── Pending section title ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-section__title {
  font-style: italic;
  font-weight: 900;
  font-size: 0.85rem;
  color: #111827;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-section__title i { color: var(--fr-amber); }

/* ── Pending tiles ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card {
  border-left-width: 4px;
  border-radius: 12px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--idle {
  background: #f1f5f9;
  border-left-color: #94a3b8;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--active {
  border-left-color: var(--fr-amber);
  box-shadow: 0 3px 10px rgba(240,147,15,0.25);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--active:hover {
  box-shadow: 0 5px 16px rgba(240,147,15,0.35);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__name {
  font-style: italic;
  font-weight: 800;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__value { font-weight: 900; }

/* ── Auto-cancelled section title & pills ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-autocancel-section__title {
  font-style: italic;
  font-weight: 900;
  color: var(--fr-red);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-autocancel-section__title i { color: var(--fr-red); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-autocancel-pills .owner-autocancel-pill {
  font-weight: 700;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-autocancel-pills .owner-pending-pill__count {
  background: var(--fr-red);
}

/* ── Filter panel ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-filters-panel {
  border-color: var(--fr-red) !important;
  border-radius: 12px !important;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-filters-panel .owner-filters-title {
  font-style: italic;
  font-weight: 900;
  color: var(--fr-red);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-filter-pills .nav-item.bg-danger .nav-link,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-filter-pills .nav-item.bg-danger .nav-link:hover {
  background: var(--fr-red) !important;
  border-color: var(--fr-red) !important;
  color: #fff !important;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-filter-pills .nav-link:hover {
  background: #fee2e2;
  color: var(--fr-red);
  border-color: #fca5a5;
}

/* ── Date load-all button ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-date-load-all {
  font-style: italic;
  font-weight: 800;
}

/* ── Per-futsal card head ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card__title {
  font-style: italic;
  font-weight: 900;
  font-size: 1.15rem;
  color: #111827;
}

/* ── Quick summary section title ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-summary__title {
  font-style: italic;
  font-weight: 900;
  font-size: 0.875rem;
  color: #111827;
}

/* ── Quick summary tiles — 4 px bar ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile {
  border-left-width: 4px;
  border-radius: 10px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--primary { border-left-color: var(--fr-blue); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--success { border-left-color: var(--fr-green); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--teal    { border-left-color: #0d9488; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--danger  { border-left-color: var(--fr-red); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--warning { border-left-color: var(--fr-amber); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile__label {
  font-style: italic;
  font-weight: 800;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile__value { font-weight: 900; }

/* ── Per-futsal booking stat boxes — 4 px bar ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box { border-left-width: 4px; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box--primary { border-left-color: var(--fr-blue); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box--warning { border-left-color: var(--fr-amber); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box--danger  { border-left-color: var(--fr-red); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box--success { border-left-color: var(--fr-green); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box__label {
  font-style: italic;
  font-weight: 800;
}

/* ── Per-futsal income stat boxes — 4 px bar ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box { border-left-width: 4px; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--primary { border-left-color: var(--fr-blue); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--success { border-left-color: var(--fr-green); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--danger  { border-left-color: var(--fr-amber); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--profit  { border-left-color: var(--fr-green); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--loss    { border-left-color: var(--fr-red); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box__label {
  font-style: italic;
  font-weight: 800;
}
/* Profit/loss label: old gradient-era rule (.owner-futsal-card .owner-futsal-summary-section
   .admin-income-stat-box--profit .admin-income-stat-box__label) has specificity (0,4,0) and
   sets white text. Beat it with !important to restore readability. */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--profit .admin-income-stat-box__label,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--loss .admin-income-stat-box__label {
  color: var(--fr-muted) !important;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--profit .admin-income-stat-box__value,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--loss .admin-income-stat-box__value {
  color: var(--fr-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN PROFILE — BOLD & SPORTY FIX PASS (7 items)
═══════════════════════════════════════════════════════════════ */

/* ── Fix 1: Pending venue cards ── */
/* Idle = white card, hairline all-round border (no accent bar) */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card {
  background: #fff;
  border: 1px solid #e3e6ec;
  border-left-width: 1px;
  box-shadow: 0 1px 5px rgba(14,15,18,0.07);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--idle {
  background: #f8fafc;
  border-color: #e3e6ec;
  border-left-color: #e3e6ec;
  border-left-width: 1px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--idle:hover {
  background: #f1f5f9;
  box-shadow: 0 3px 10px rgba(14,15,18,0.10);
}
/* Active = white card, red 3px left accent, soft red shadow */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--active {
  background: #fff;
  border-color: #fca5a5;
  border-left-color: var(--fr-red);
  border-left-width: 3px;
  box-shadow: 0 2px 10px rgba(236,43,52,0.14);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--active:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(236,43,52,0.22);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--idle .owner-pending-card__name {
  color: var(--fr-muted);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--idle .owner-pending-card__value {
  color: #c2c6cf;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--active .owner-pending-card__name {
  color: var(--fr-red);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--active .owner-pending-card__value {
  color: var(--fr-red);
}
/* Full-width split button row at card bottom edge */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__actions {
  padding: 0;
  gap: 0;
  border-top: 1px solid #e3e6ec;
  margin-top: auto;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__action {
  flex: 1;
  border: none;
  border-radius: 0;
  min-height: 34px;
  font-size: 1rem;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__action--expense {
  background: #fef2f2;
  color: var(--fr-red);
  border-right: 1px solid #fecaca;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__action--expense:hover {
  background: var(--fr-red);
  color: #fff;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__action--onspot {
  background: #f0fdf4;
  color: var(--fr-green);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__action--onspot:hover {
  background: var(--fr-green);
  color: #fff;
}

/* ── Fix 2: Date heading — remove blue, apply ink italic-900 ── */
/* Single-futsal path: <h5 class="text-primary mb-0" id="date-range">
   Bootstrap text-primary uses !important so we need !important here too */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) h5#date-range,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) #date-range {
  color: #f4f4f6 !important;
  font-style: italic;
  font-weight: 900;
}
/* Multi-futsal path: owner-date-load-all button — base rule has color:#0d6efd */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-date-load-all {
  color: #f4f4f6 !important;
  font-style: italic;
  font-weight: 900;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-date-load-all:hover {
  color: #f4f4f6 !important;
  opacity: 0.8;
}
/* Eye icon stays red */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-date-load-all__icon {
  color: var(--fr-red) !important;
}

/* ── Fix 3: DUE quick-summary tile — remove solid red gradient ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-quick-tile--danger {
  background: #fef2f2;
  border-left: 4px solid var(--fr-red);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-quick-tile--danger .owner-futsal-quick-tile__label {
  color: var(--fr-muted);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-quick-tile--danger .owner-futsal-quick-tile__value {
  color: var(--fr-ink);
}

/* ── Fix 4: "Bookings" / "Summary" section labels inside venue card ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-section-head {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e3e6ec;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-section-head h6,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-section-head .fw-bold {
  font-style: italic;
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fr-ink);
  position: relative;
  padding-left: 10px;
  margin: 0;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-section-head h6::before,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-section-head .fw-bold::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--fr-red);
}

/* ── Fix 5: Expense Details panel header — dark bar + amber tag ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-expense-panel__head {
  background: var(--fr-dark);
  position: relative;
  padding-left: 20px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-expense-panel__head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--fr-amber);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-expense-panel__title {
  font-style: italic;
  font-weight: 900;
  font-size: 0.9rem;
}

/* ── Fix 6: Income by Field panel header — dark bar + green tag ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-hourly-panel__head {
  background: var(--fr-dark);
  position: relative;
  padding-left: 20px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-hourly-panel__head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--fr-green);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-hourly-panel__title {
  font-style: italic;
  font-weight: 900;
  font-size: 0.9rem;
}
/* Table: field links → red; tfoot → flat green tint */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-hourly-table__field {
  color: var(--fr-red);
  font-weight: 700;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-hourly-table tfoot td {
  background: var(--fr-green-soft);
  color: var(--fr-green-ink);
  font-weight: 700;
  font-style: italic;
  border-top: 1px solid #a7f3d0;
}
/* Outer panel-head title — sporty italic-900, colour kept by status */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-panel-head__title {
  font-style: italic;
  font-weight: 900;
  font-size: 0.95rem;
}

/* ── Fix 7: Low-contrast tap-hint links — chip-style, legible on light tints ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box__tap-hint,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--profit .admin-income-stat-box__tap-hint,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--loss .admin-income-stat-box__tap-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.72);
  border: 1px solid #e3e6ec;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--fr-muted);
  opacity: 1;
  margin-top: auto;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box__tap-hint i,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--profit .admin-income-stat-box__tap-hint i,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--loss .admin-income-stat-box__tap-hint i {
  color: var(--fr-muted);
  font-size: 0.75rem;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--clickable:hover .admin-income-stat-box__tap-hint,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--clickable:hover .admin-income-stat-box__tap-hint {
  background: #fff;
  color: var(--fr-ink);
  border-color: #d1d5db;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN SUMMARY TILES — COMPACT AMOUNTS
   Scope: :is(body:has(#super-settings-btn),body:has(#fr-sporty-profile))
═══════════════════════════════════════════════════════════════ */

/* Prevent tiles from forcing the grid wider than the screen */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .quick-summary-tiles .owner-futsal-quick-tile { min-width: 0; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-grid .col { min-width: 0; }

/* Smaller responsive tile values — avoids 7-digit numbers overflowing */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile__value {
  font-size: clamp(13px, 3.8vw, 18px) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Venue-summary big cards */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box__value {
  font-size: clamp(13px, 3.5vw, 1.3rem) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Top Income/Expense stat cards */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card__value {
  font-size: clamp(16px, 4vw, 1.6rem) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   BOOKING STAT BOXES + QUICK TILE TAPPABLE CUES
═══════════════════════════════════════════════════════════════ */

/* Change 2: Bookings boxes always 3 across, equal width */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stats__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* Slightly smaller value font so 3-up doesn't overflow */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box__value {
  font-size: clamp(12px, 3.2vw, 1.1rem) !important;
}

/* Change 1: › tappable cue on CONFIRMED booking stat box */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) button.admin-booking-stat-box {
  position: relative;
  cursor: pointer;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) button.admin-booking-stat-box::after {
  content: '›';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 15px;
  color: var(--fr-muted);
  opacity: 0.6;
  transition: opacity 0.15s;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) button.admin-booking-stat-box:hover::after {
  opacity: 1;
}

/* Change 1: › tappable cue on Quick-Summary BOOKINGS tile */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--clickable {
  position: relative;
  cursor: pointer;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--clickable::after {
  content: '›';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 13px;
  color: var(--fr-muted);
  opacity: 0.6;
  transition: opacity 0.15s;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--clickable:hover::after {
  opacity: 1;
  color: var(--fr-ink);
}

/* ═══════════════════════════════════════════════════════════════
   BOOKING FLOW — BOLD & SPORTY RESTYLE
   Scope: GLOBAL — component classes only, no role/page ancestor
   Parts: 1=booking card  2=Confirm/Payment modal  3=Add-ons modal
═══════════════════════════════════════════════════════════════ */

/* ── Parts 1A–1C: Booking card tints, headers, status pills ──
   Keyed off component classes only (no container ancestor) so rules
   apply identically in modal and inline div. ── */
.owner-modal-booking-wrap {
  border-radius: 12px;
  overflow: hidden;
}
.owner-modal-booking-wrap--pending {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
}
.owner-modal-booking-wrap--confirmed {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
}
.owner-modal-booking-wrap--cancelled {
  background: #fff5f5 !important;
  border: 1px solid #fecaca !important;
}
.owner-modal-booking-wrap--autocancel {
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
}
.owner-modal-booking-wrap--pending .owner-modal-booking-card__header {
  background: #fef9c3 !important;
  border-bottom: 1px solid rgba(245,158,11,0.3) !important;
}
.owner-modal-booking-wrap--confirmed .owner-modal-booking-card__header {
  background: #dcfce7 !important;
  border-bottom: 1px solid rgba(22,163,74,0.25) !important;
}
.owner-modal-booking-wrap--cancelled .owner-modal-booking-card__header {
  background: #fee2e2 !important;
  border-bottom: 1px solid rgba(220,38,38,0.25) !important;
}
.owner-modal-booking-wrap--autocancel .owner-modal-booking-card__header {
  background: #ffedd5 !important;
  border-bottom: 1px solid rgba(249,115,22,0.25) !important;
}
.owner-modal-booking-card__status--warning {
  background: #fef08a;
  color: #854d0e;
  font-style: italic;
  font-weight: 900;
}
.owner-modal-booking-card__status--success {
  background: #bbf7d0;
  color: #14532d;
  font-style: italic;
  font-weight: 900;
}
.owner-modal-booking-card__status--danger {
  background: #fecaca;
  color: #7f1d1d;
  font-style: italic;
  font-weight: 900;
}
.owner-modal-booking-card__status--muted {
  background: #e2e8f0;
  color: #334155;
  font-style: italic;
  font-weight: 900;
}

/* ── Part 1D: Action buttons — flat, no gradients ──
   :not(#\9) boosts specificity to (1,1,0) to beat the #PendingBookingsModal
   gradient rules in style-1.96.css without adding any role/page ancestor. ── */
.owner-modal-booking-grid__btn--green:not(#\9) {
  background: var(--fr-green) !important;
  color: #fff !important;
  border: none;
}
.owner-modal-booking-grid__btn--blue:not(#\9) {
  background: var(--fr-blue) !important;
  color: #fff !important;
}
.owner-modal-booking-grid__btn--yellow:not(#\9) {
  background: var(--fr-amber) !important;
  color: #fff !important;
}
.owner-modal-booking-grid__btn--yellow:not(#\9) i {
  color: #fff;
}
.owner-modal-booking-grid__btn--red:not(#\9) {
  background: var(--fr-red) !important;
  color: #fff !important;
}
.owner-modal-booking-grid__btn--red:not(#\9):hover {
  background: var(--fr-red-2) !important;
}
.owner-modal-booking-grid__btn--orange:not(#\9) {
  background: var(--fr-amber) !important;
  color: #fff !important;
}
.owner-modal-booking-grid__btn--orange:not(#\9):disabled {
  background: var(--fr-amber) !important;
  color: #fff !important;
  opacity: 0.75;
}

/* ── Part 1E: WA confirm button — neutral blue outline ── */
.owner-modal-booking-card__wa-btn--confirm {
  border-color: var(--fr-blue);
  color: var(--fr-blue);
}

/* ── Part 1F: Money rows — balance red, paid-in-full green ── */
.owner-booking-payments__balance-amount {
  color: var(--fr-red) !important;
  font-style: italic;
  font-weight: 900;
}

/* ── Part 2: DeleteBookingModal (Confirm Booking / Add Payment / Cancel) ── */
#DeleteBookingModal .login-modal-header {
  background: var(--fr-red);
}
/* Neutral input borders, red on focus only */
#confirm-fields .cf-select-wrap { border-color: #d1d5db !important; }
#confirm-fields .cf-select-wrap:focus-within { border-color: var(--fr-red) !important; }
#confirm-fields .cf-row2 .login-input-wrap { border-color: #d1d5db !important; }
#confirm-fields .cf-row2 .login-input-wrap:focus-within { border-color: var(--fr-red) !important; }
#confirm-fields .cf-amount-highlight { border-color: #d1d5db !important; }
#confirm-fields .cf-amount-highlight:focus { border-color: var(--fr-red) !important; }
/* Balance — red when owing, green when zero */
#DeleteBookingModal .text-warning { color: var(--fr-red) !important; }
#DeleteBookingModal .text-success.cf-balance-ok { color: var(--fr-green) !important; }
/* Info/hint note — amber tint */
#DeleteBookingModal .cf-group-helper {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}
/* Footer primary buttons — flat colours */
#DeleteBookingModal #confirmbtn-booking,
#DeleteBookingModal #confirmadd-time,
#DeleteBookingModal #confirm-restore,
#DeleteBookingModal #add-payment,
#DeleteBookingModal #update-payment {
  background: var(--fr-green) !important;
}
#DeleteBookingModal #deletebtn-booking,
#DeleteBookingModal #deletebtn-screenshot,
#DeleteBookingModal #confirmbtn-addon-remove {
  background: var(--fr-red) !important;
}

/* ── Fix A: Secondary buttons → neutral; primary colours kept only where spec says ── */

/* --blue: all secondary (View SS, Add-ons, +15 mins) → neutral */
.owner-modal-booking-grid__btn--blue:not(#\9) {
  background: #f7f8fa !important;
  color: var(--fr-ink) !important;
  border: 1px solid var(--fr-line) !important;
}
.owner-modal-booking-grid__btn--blue:not(#\9) i { color: var(--fr-muted) !important; }
.owner-modal-booking-grid__btn--blue:not(#\9):hover { background: #eef0f4 !important; color: var(--fr-ink) !important; }

/* --yellow: Screenshot/No Screenshot → neutral; Add Payment (ri-add-line icon) → green fill */
.owner-modal-booking-grid__btn--yellow:not(#\9):not(:has(i.ri-add-line)) {
  background: #f7f8fa !important;
  color: var(--fr-ink) !important;
  border: 1px solid var(--fr-line) !important;
}
.owner-modal-booking-grid__btn--yellow:not(#\9):not(:has(i.ri-add-line)) i { color: var(--fr-muted) !important; }
.owner-modal-booking-grid__btn--yellow:not(#\9):not(:has(i.ri-add-line)):hover { background: #eef0f4 !important; }
.owner-modal-booking-grid__btn--yellow:not(#\9):has(i.ri-add-line) {
  background: var(--fr-green) !important;
  color: #fff !important;
  border: none !important;
}
.owner-modal-booking-grid__btn--yellow:not(#\9):has(i.ri-add-line) i { color: #fff !important; }

/* --green: Invoice (ri-printer-fill) → neutral; Confirm (ri-check-line) + Restore (ri-refresh-line) stay green */
.owner-modal-booking-grid__btn--green:not(#\9):has(i.ri-printer-fill) {
  background: #f7f8fa !important;
  color: var(--fr-ink) !important;
  border: 1px solid var(--fr-line) !important;
}
.owner-modal-booking-grid__btn--green:not(#\9):has(i.ri-printer-fill) i { color: var(--fr-muted) !important; }
.owner-modal-booking-grid__btn--green:not(#\9):has(i.ri-printer-fill):hover { background: #eef0f4 !important; }

/* --orange: Cannot Restore (disabled) → neutral muted */
.owner-modal-booking-grid__btn--orange:not(#\9),
.owner-modal-booking-grid__btn--orange:not(#\9):disabled {
  background: #f7f8fa !important;
  color: #9ca3af !important;
  border: 1px solid var(--fr-line) !important;
  opacity: 0.75 !important;
  cursor: not-allowed !important;
}
.owner-modal-booking-grid__btn--orange:not(#\9) i { color: #9ca3af !important; }

/* ── Fix B: PendingBookingsModal (list) header → dark bar + status accent ── */
#pending-bookings-modal-header {
  background: var(--fr-dark) !important;
  border-left: 4px solid var(--fr-red); /* default = cancelled */
}
#pending-bookings-modal-header.login-modal-header--pending { border-left-color: var(--fr-amber) !important; }
#pending-bookings-modal-header.login-modal-header--success { border-left-color: var(--fr-green) !important; }
#pending-bookings-modal-header.login-modal-header--warning { border-left-color: var(--fr-orange) !important; }
#pending-bookings-modal-header .login-modal-title {
  color: #fff !important;
  font-style: italic;
  font-weight: 900;
}
#pending-bookings-modal-header .login-modal-subtitle { color: rgba(255,255,255,0.72) !important; }
#pending-bookings-modal-header .login-modal-icon {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
#pending-bookings-modal-header .login-modal-close { color: rgba(255,255,255,0.80) !important; }
#pending-bookings-modal-header .login-modal-close:hover { color: #fff !important; background: rgba(255,255,255,0.10) !important; }

/* ── Part 3: BookingAddonModal header & totals ── */
#BookingAddonModal .login-modal-header {
  background: var(--fr-red);
}
/* Section labels — sporty italic-900 with red left bar */
#BookingAddonModal .bam-block-label {
  font-style: italic;
  font-weight: 900;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--fr-ink);
  position: relative;
  padding-left: 12px;
}
#BookingAddonModal .bam-block-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--fr-red);
}
/* Court line label (collapsible header) */
#BookingAddonModal .bam-cline-court {
  font-style: italic;
  font-weight: 900;
}
/* Prices — already red in base; reinforce */
#BookingAddonModal .bam-price,
#BookingAddonModal .bam-cline-price { color: var(--fr-red); font-weight: 800; }
/* Summary total bar */
#BookingAddonModal .bam-summary-total {
  font-style: italic;
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--fr-red);
}
/* Save button — flat green */
#bam-save-btn { background: var(--fr-green) !important; }

/* ── Compact BAM rows ── */
#BookingAddonModal .bam-sec-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--fr-muted); margin: 16px 2px 8px;
}
#BookingAddonModal .bam-sec-label:first-child { margin-top: 4px; }
#BookingAddonModal .bam-sec-bar {
  width: 4px; height: 13px; border-radius: 3px; background: var(--fr-red); flex-shrink: 0;
}
#BookingAddonModal .bam-row {
  border: 1px solid var(--fr-line); border-radius: 13px; margin-bottom: 8px;
  overflow: hidden; background: #fff;
}
#BookingAddonModal .bam-row--added { border-color: rgba(21,168,90,.40); }
#BookingAddonModal .bam-row--customer { border-color: rgba(236,43,52,.35); background: #fff8f8; }
#BookingAddonModal .bam-row--free { border-color: rgba(21,168,90,.30); }
#BookingAddonModal .bam-rowhead {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: default;
}
#BookingAddonModal .bam-row--added .bam-rowhead,
#BookingAddonModal .bam-row--free .bam-rowhead { cursor: pointer; }
#BookingAddonModal .bam-row-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0; font-size: 17px;
}
#BookingAddonModal .bam-row-ico--game { background: #eaf1fe; color: var(--fr-blue); }
#BookingAddonModal .bam-row-ico--rkt  { background: var(--fr-red-soft); color: var(--fr-red); }
#BookingAddonModal .bam-row-ico--ball { background: var(--fr-green-soft); color: var(--fr-green); }
#BookingAddonModal .bam-row-ico--box  { background: var(--fr-amber-soft); color: var(--fr-amber); }
#BookingAddonModal .bam-row-meta { flex: 1; min-width: 0; }
#BookingAddonModal .bam-row-name {
  font-size: 14.5px; font-weight: 800; line-height: 1.25;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
#BookingAddonModal .bam-row-sub {
  font-size: 12px; color: var(--fr-muted2); font-weight: 600; margin-top: 2px;
}
#BookingAddonModal .bam-row-sub-inline {
  font-size: 12.5px; color: var(--fr-muted2); font-weight: 500;
}
#BookingAddonModal .bam-row-state {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
}
#BookingAddonModal .bam-row-addbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: #fff;
  background: var(--fr-red); border: none;
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
  transition: opacity .15s; white-space: nowrap;
}
#BookingAddonModal .bam-row-addbtn:hover { opacity: .85; }
#BookingAddonModal .bam-row-addbtn__price { font-weight: 900; }
#BookingAddonModal .bam-row-price {
  font-size: 14.5px; font-weight: 900; color: var(--fr-red); white-space: nowrap;
}
#BookingAddonModal .bam-row-chev {
  color: var(--fr-muted2); display: grid; place-items: center; font-size: 18px;
  transition: transform .2s;
}
#BookingAddonModal .bam-row--open > .bam-rowhead .bam-row-chev { transform: rotate(180deg); }
#BookingAddonModal .bam-freepill {
  font-size: 11.5px; font-weight: 900;
  color: var(--fr-green-ink); background: var(--fr-green-soft);
  padding: 6px 11px; border-radius: 20px; white-space: nowrap;
}
/* Expand panel */
#BookingAddonModal .bam-expand {
  border-top: 1px solid var(--fr-line); padding: 12px; background: #fbfbfc; display: none;
}
#BookingAddonModal .bam-row--open .bam-expand { display: block; }
#BookingAddonModal .bam-ctl-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
#BookingAddonModal .bam-ctl-row:last-child { margin-bottom: 0; }
#BookingAddonModal .bam-ctl-row--end { justify-content: flex-end; }
#BookingAddonModal .bam-ctl-label {
  font-size: 13px; color: var(--fr-muted); font-weight: 600;
}
#BookingAddonModal .bam-avail {
  font-size: 11.5px; color: var(--fr-muted2); font-weight: 500;
}
#BookingAddonModal .bam-ctl-sel {
  background: #fff; border: 1px solid var(--fr-line); border-radius: 9px;
  padding: 8px 10px; font-size: 13.5px; font-weight: 700;
  min-width: 150px; flex-shrink: 0;
}
#BookingAddonModal .bam-ctl-sel:focus { outline: none; border-color: var(--fr-red); }
#BookingAddonModal .bam-stepper {
  display: flex; align-items: center;
  border: 1px solid var(--fr-line); border-radius: 9px; overflow: hidden;
}
#BookingAddonModal .bam-stepper button {
  width: 36px; height: 36px; background: #fff; border: none;
  font-size: 18px; color: var(--fr-ink); cursor: pointer; display: grid; place-items: center;
}
#BookingAddonModal .bam-stepper button:hover { background: var(--fr-red-soft); color: var(--fr-red); }
#BookingAddonModal .bam-stepper button:disabled { opacity: .35; cursor: default; }
#BookingAddonModal .bam-stepper-val {
  min-width: 38px; text-align: center; font-weight: 900; font-size: 15px;
}
/* Override old .bam-remove-btn in this modal */
#BookingAddonModal .bam-remove-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: var(--fr-red);
  background: var(--fr-red-soft); border: 1px solid rgba(236,43,52,.3);
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
}
#BookingAddonModal .bam-remove-btn:hover { background: #fad7d9; }

/* Legacy .bam-add-btn — kept for any other usage */
.bam-add-btn {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  padding: 5px 14px; background: var(--fr-green); color: #fff;
  border: none; border-radius: 6px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity 0.15s;
}
.bam-add-btn:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════
   fr-btn-neutral — secondary/utility button utility class
   Added: Part 1 (3rd attempt) neutralise secondary buttons
   ═══════════════════════════════════════════════════════ */
.fr-btn-neutral {
  background: #f7f8fa !important;
  border: 1px solid var(--fr-line) !important;
  color: var(--fr-ink) !important;
  box-shadow: none !important;
}
.fr-btn-neutral svg,
.fr-btn-neutral i,
.fr-btn-neutral .icon { color: var(--fr-muted) !important; }

/* ═══════════════════════════════════════════════════════
   Part 2 — Modal shell restyle (admin scope)
   Flatten gradients, fix anatomy, red accent on selected
   resolution option.
   ═══════════════════════════════════════════════════════ */

/* --- Flatten default (action/red) header gradient --- */
.login-modal-header {
  background: var(--fr-red) !important;
}
.login-modal-header.login-modal-header--success {
  background: var(--fr-green) !important;
}
.login-modal-header.login-modal-header--warning,
.login-modal-header.login-modal-header--pending {
  background: var(--fr-amber) !important;
}

/* --- Icon chip: 46px, lighter glass tint --- */
.login-modal-header .login-modal-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  background: rgba(255,255,255,0.16) !important;
  border-radius: 12px !important;
  color: #fff !important;
}

/* --- Title: italic-900, subtitle 80% opacity --- */
.login-modal-header .login-modal-title {
  font-style: italic !important;
  font-weight: 900 !important;
  color: #fff !important;
}
.login-modal-header .login-modal-subtitle {
  color: rgba(255,255,255,0.80) !important;
}

/* --- Close X: 36px circle, glass tint --- */
.login-modal-header .login-modal-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: rgba(255,255,255,0.16) !important;
  border-radius: 50% !important;
  color: rgba(255,255,255,0.90) !important;
}
.login-modal-header .login-modal-close:hover {
  background: rgba(255,255,255,0.26) !important;
  color: #fff !important;
}

/* --- List/info modals keep the dark header already set via ID ---
       Nothing to add; #pending-bookings-modal-header already dark.  */

/* --- Cancel/resolution option: red accent when selected --- */
.cancel-resolve__opt:has(input:checked) {
  border-color: var(--fr-red);
  background: var(--fr-red-soft);
  border-radius: 8px;
  padding: 4px 8px;
}
.cancel-resolve__opt:has(input:checked) .cancel-resolve__title {
  color: var(--fr-red) !important;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
   Part 2 — Remaining gradient hunt (admin scope)
   Staff modal header, wallet panel, staff action btn
   ═══════════════════════════════════════════════════════ */

/* Staff management modal header + primary action button */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .staff-modal-header {
  background: var(--fr-dark) !important;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .staff-btn {
  background: var(--fr-dark) !important;
}

/* Wallet info panel — dark header with indigo left tag */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .wallet-panel__header {
  background: var(--fr-dark) !important;
  position: relative;
  padding-left: 18px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .wallet-panel__header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #4f46e5;
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER BOOKING SUMMARY — POLISHED DARK RESTYLE
   Scoped entirely to #booking-checkout; does NOT affect admin.
   ═══════════════════════════════════════════════════════════════ */

#booking-checkout {
  --bcs-bg:      #0c0d10;
  --bcs-surf:    #15171c;
  --bcs-surf2:   #1c1f26;
  --bcs-raise:   #23262e;
  --bcs-border:  #2c2f37;
  --bcs-border2: #383b45;
  --bcs-text:    #f4f5f7;
  --bcs-muted:   #9aa0ad;
  --bcs-muted2:  #6f7480;
  --bcs-red:     #ec3a42;
  --bcs-red-s:   rgba(236,58,66,.14);
  --bcs-red-l:   rgba(236,58,66,.5);
  --bcs-green:   #2bd07c;
  --bcs-green-s: rgba(43,208,124,.14);
  --bcs-green-l: rgba(43,208,124,.45);
  --bcs-amber:   #f5a524;
  --bcs-amber-s: rgba(245,165,36,.12);
  --bcs-amber-l: rgba(245,165,36,.45);
}

/* Panel shell */
#booking-checkout.booking-checkout-panel {
  background: var(--bcs-surf);
  border: 1px solid var(--bcs-border);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
}

/* Title */
#booking-checkout .booking-charges-title {
  font-style: italic;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.1px;
  color: var(--bcs-text);
}

/* Slot header label — already flex/uppercase in base; just tighten */
#booking-checkout .booking-checkout-customer-label {
  color: var(--bcs-muted);
  font-size: 10px;
  letter-spacing: 0.9px;
  margin-bottom: 8px;
}
/* Calendar icon in a small red-soft chip */
#booking-checkout .booking-checkout-customer-label i.ri-calendar-check-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--bcs-red-s);
  border: 1px solid var(--bcs-red-l);
  color: var(--bcs-red);
  font-size: 13px;
  flex-shrink: 0;
}
/* Slot count badge */
#booking-checkout .checkout-slot-count-badge {
  background: var(--bcs-border2);
  color: var(--bcs-text);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 0;
}
/* "You save" green pill */
#booking-checkout .checkout-savings-badge {
  background: var(--bcs-green-s);
  border: 1px solid var(--bcs-green-l);
  color: var(--bcs-green);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  gap: 4px;
  margin-left: auto;
}

/* Summary box — remove redundant sub-surface */
#booking-checkout .booking-checkout-summary-box.booking-checkout-customer-box {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 4px;
}
/* Slots scroll area — transparent, cards handle their own bg */
#booking-checkout .booking-checkout-summary-box .booking-checkout-summary-slots {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Slot cards — raised surface-2 */
#booking-checkout .bcs-field-row {
  background: var(--bcs-surf2);
  border-radius: 10px;
  padding: 7px 10px;
  border-top: none;
  margin-top: 0;
}
#booking-checkout .bcs-field-row + .bcs-field-row {
  border-top: none;
  margin-top: 0;
  padding-top: 7px;
}
/* Date / court name */
#booking-checkout .bcs-field-date { color: var(--bcs-muted); }
#booking-checkout .bcs-field-name { color: var(--bcs-text); }
/* Time chip */
.timechip {
  color: #2bd07c;
  background: rgba(43,208,124,.14);
  border: 1px solid rgba(43,208,124,.45);
}
/* Price */
#booking-checkout .bcs-field-price { color: var(--bcs-text); }
/* Remove × */
#booking-checkout .bcs-field-remove {
  background: rgba(236,58,66,.1);
  color: var(--bcs-red);
}
#booking-checkout .bcs-field-remove:hover {
  background: var(--bcs-red);
  color: #fff;
}
/* Game pill (court games selector) */
#booking-checkout .bcs-field-games .game-pill-checkout {
  border-color: var(--bcs-border2);
  background: var(--bcs-raise);
}
#booking-checkout .bcs-field-games .game-pill-checkout.game-pill-active {
  border-color: var(--bcs-red) !important;
  background: rgba(236,58,66,.12) !important;
}

/* ——— Add-on chips ——— */
#booking-checkout .addon-info-bullets { margin: 6px 0 4px; }
#booking-checkout .aib-chip {
  background: var(--bcs-surf2);
  border-color: var(--bcs-border2);
  color: var(--bcs-muted);
  border-radius: 9px;
}
#booking-checkout .aib-chip--idle {
  border-color: var(--bcs-red-l);
  color: var(--bcs-red);
}
#booking-checkout .aib-chip--upsell {
  background: var(--bcs-amber-s);
  border-color: var(--bcs-amber-l);
  color: var(--bcs-amber);
}
#booking-checkout .aib-chip--free,
#booking-checkout .aib-chip--selected,
#booking-checkout .aib-chip--bc-added {
  background: var(--bcs-green-s);
  border-color: var(--bcs-green-l);
  color: var(--bcs-green);
}

/* ——— Add Add-ons button ——— */
#booking-checkout #addon-btn-wrap { margin: 8px 0 6px; }
#booking-checkout .addon-open-btn {
  background: var(--bcs-raise);
  border: none;
  border-radius: 10px;
  color: var(--bcs-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  gap: 10px;
}
#booking-checkout .addon-open-btn:hover {
  background: var(--bcs-border);
  border: none;
  color: var(--bcs-text);
}
/* + icon gets a red pill */
#booking-checkout .addon-btn-idle i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bcs-red);
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
#booking-checkout .addon-open-btn--active {
  border: none !important;
  color: var(--bcs-green) !important;
  background: var(--bcs-green-s) !important;
}
#booking-checkout .addon-open-btn--active:hover {
  background: rgba(43,208,124,.2) !important;
}

/* ——— Totals section ——— */
#booking-checkout .booking-checkout-summary-box .booking-checkout-summary-totals {
  border-top: 1px solid var(--bcs-border);
  padding: 8px 2px 0;
  margin: 6px 0 0;
}
#booking-checkout .bct-row {
  color: var(--bcs-muted);
  font-size: 12px;
  font-weight: 600;
}
#booking-checkout .bct-muted { color: var(--bcs-muted2); }
#booking-checkout .bct-discount {
  color: var(--bcs-red);
  font-weight: 700;
}
#booking-checkout .bct-addon { color: var(--bcs-amber); }
/* Balance row */
#booking-checkout .bct-grand {
  font-size: 14px;
  font-weight: 800;
  color: var(--bcs-text);
  border-top: 1px solid var(--bcs-border);
  margin-top: 5px;
}
#booking-checkout .bct-grand > span:first-child {
  font-style: italic;
  font-size: 13px;
  font-weight: 600;
  color: var(--bcs-muted);
}
#booking-checkout .bct-grand > span:last-child {
  color: var(--bcs-green);
  font-size: 24px;
  font-weight: 900;
}

/* ——— Book Now button ——— */
#booking-checkout .booking-charges-btn {
  background: var(--bcs-green) !important;
  border: none !important;
  color: #06281a !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px;
  border-radius: 12px !important;
  padding: 12px !important;
  width: 100%;
  box-shadow: 0 4px 20px rgba(43,208,124,.25);
  transition: background 0.2s, box-shadow 0.2s;
}
#booking-checkout .booking-charges-btn:hover,
#booking-checkout .booking-charges-btn:focus-visible {
  background: #35e08a !important;
  color: #06281a !important;
  box-shadow: 0 6px 24px rgba(43,208,124,.45) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SELECT LOCATION — BOTTOM-SHEET POPUP
   Scoped to the customer booking flow; never appears in admin.
   ═══════════════════════════════════════════════════════════════ */

/* Scrim */
.loc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1040;
}


/* Sheet container (re-uses #loc-dropdown) */
.loc-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #15171c;
  border: 1px solid #2c2f37;
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  max-height: 88vh;
  display: flex !important;
  flex-direction: column;
  box-shadow: 0 -16px 40px -10px rgba(0,0,0,.7);
  z-index: 1050;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(.32,1,.23,1);
}
.loc-sheet.d-none { transform: translateY(100%); }
.loc-sheet.loc-sheet-open { transform: translateY(0); }

/* Drag handle */
.loc-sheet-handle {
  width: 42px;
  height: 5px;
  border-radius: 5px;
  background: #383b45;
  margin: 10px auto 4px;
  flex-shrink: 0;
}

/* Header row */
.loc-sheet-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px 14px;
  flex-shrink: 0;
}
.loc-sheet-pin {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(236,58,66,.13);
  border: 1px solid rgba(236,58,66,.55);
  display: grid;
  place-items: center;
  color: #ec3a42;
  font-size: 18px;
  flex-shrink: 0;
}
.loc-sheet-title {
  flex: 1;
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
  color: #f4f5f7;
  margin: 0;
}
.loc-sheet-x {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #23262e;
  border: 1px solid #2c2f37;
  display: grid;
  place-items: center;
  color: #9aa0ad;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.loc-sheet-x:hover { background: #2c2f37; color: #f4f5f7; }

/* Scrollable list */
.loc-sheet-list {
  overflow-y: auto;
  flex: 1;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}

/* City header */
.loc-sheet .loc-city-header {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6f7480;
  padding: 14px 16px 8px;
  background: none;
}

/* Venue row */
.loc-sheet .loc-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 2px 10px;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  min-height: 44px;
  transition: background 0.15s;
}
.loc-sheet .loc-option:hover { background: #1c1f26; }
.loc-sheet .loc-option.loc-option-active {
  background: rgba(236,58,66,.13);
}
.loc-sheet .loc-option.loc-option-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 3px;
  background: #ec3a42;
}
.loc-sheet .loc-option-name {
  font-size: 16px;
  font-weight: 800;
  color: #f4f5f7;
  flex-shrink: 0;
}
/* Sport chips */
.loc-option-sports {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  flex-wrap: wrap;
}
.loc-sport-chip {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #23262e;
  border: 1px solid #2c2f37;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
}
/* Check icon */
.loc-sheet .loc-option-check {
  color: #ec3a42;
  font-size: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}


/* ── Staff Performance ─────────────────────────────────────────────────────── */
/* Layout-only defaults (no colour) */
.sp-section { margin-bottom: 20px; }
.sp-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sp-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sp-role { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 8px; text-transform: uppercase; letter-spacing: .05em; }
.sp-metrics { display: flex; flex-direction: column; gap: 6px; }
.sp-metric { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; }
.sp-metric__label { grid-column: 1; grid-row: 1; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; }
.sp-metric__value { grid-column: 2; grid-row: 1; text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: #f3f4f6; }
.sp-bar-track { grid-column: 1 / -1; grid-row: 2; height: 4px; border-radius: 999px; overflow: hidden; margin-top: 4px; }
.sp-bar-fill { height: 100%; border-radius: 999px; transition: width .35s ease; }
.sp-self { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.sp-card { background: #1a1c22; border: 1px solid #2c2f37; border-radius: 10px; padding: 12px 14px; box-sizing: border-box; }
.sp-card--top { border-color: #ef4444; }
.sp-bar-track { background: #2a2d36; }
.sp-self__period { color: #9ca3af; }
.sp-self__tile-val { color: #f3f4f6; }
.sp-self__tile-lbl { color: #9ca3af; }

/* Summary (collapsed) list */
.sp-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sp-summary__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; }
.sp-toggle-btn { grid-column: 1 / -1; }
.sp-summary__hours { margin-left: auto; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
.sp-toggle-btn { margin-top: 6px; align-self: flex-start; background: none; border: none; padding: 4px 0; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; color: #fff; }
.sp-empty { color: #9ca3af; font-size: 13px; padding: 10px 0; }
.sp-name { flex: 1; font-size: 14px; font-weight: 600; color: #fff; }
/* Admin sporty theme — scoped to light admin profile */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-section__title {
  font-size: 13px; font-weight: 900; font-style: italic; color: #fff;
  letter-spacing: .03em; margin-bottom: 10px;
}
.sp-section__title { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-empty {
  color: #6b7280; font-size: 13px; padding: 10px 0;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-summary__row {
  background: #f8fafc;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-summary__row--top {
  background: #fff1f1;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-summary__hours {
  color: #14161c;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-toggle-btn {
  color: var(--fr-red);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-card {
  background: #fff;
  border: 1px solid #e3e6ec;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.07);
  box-sizing: border-box;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-card--top {
  border-color: #ef4444;
  box-shadow: 0 3px 12px rgba(239,68,68,0.13);
  box-sizing: border-box;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-rank {
  font-size: 11px; font-weight: 800; color: #6b7280;
  background: #f1f5f9; border-radius: 6px; padding: 2px 8px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-rank--top {
  color: #fff; background: var(--fr-red);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-name {
  flex: 1; font-size: 14px; font-weight: 800; font-style: italic; color: #14161c;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-role--cs {
  background: #fee2e2; color: #dc2626;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-role--manager {
  background: #dbeafe; color: #1d4ed8;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-role--admin {
  background: #f1f5f9; color: #475569;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-metrics {
  border-top: 1px solid #e3e6ec;
  padding-top: 10px;
  margin-top: 2px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-metric__label {
  color: #6b7280;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-metric__value {
  color: #14161c;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-bar-track {
  background: #eceef2;
}
/* Self-view */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-self__block {
  background: #fff; border: 1px solid #e3e6ec; border-radius: 16px;
  padding: 12px 14px; box-shadow: 0 2px 8px rgba(15,23,42,0.07);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-self__period {
  color: #6b7280;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-self__tile {
  background: #f8fafc; border-radius: 8px; padding: 8px 10px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-self__tile-val {
  color: #14161c;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-self__tile-lbl {
  color: #6b7280;
}