/* ============================================================
   BetScores — Light Theme Tokens & Components
   Migration target: Image 2 (light sportsbook UI)
   Stage 1: LEFT SIDEBAR
   ------------------------------------------------------------
   This stylesheet is intentionally scoped (mostly) to the left
   sidebar (#navDrawer) so the rest of the page can be migrated
   incrementally without visual breakage.
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --bs-bg:            #0b6e5a;   /* page canvas: deep teal */
  --bs-bg-strong:     #0a5e4d;   /* darker teal for header band */
  --bs-surface:       #ffffff;   /* cards, sidebar */
  --bs-surface-2:     #f6f8fa;   /* subtle row hover / inset */
  --bs-surface-3:     #eef1f4;   /* deeper inset (odd buttons, search bg) */

  /* ---- Borders ---- */
  --bs-border:        #e6e8eb;
  --bs-border-strong: #d8dde2;
  --bs-divider:       #eef0f3;

  /* ---- Text ---- */
  --bs-text:          #1f2937;   /* slate-800 */
  --bs-text-muted:    #6b7280;   /* slate-500 */
  --bs-text-soft:     #9ca3af;   /* slate-400 */
  --bs-text-invert:   #ffffff;

  /* ---- Brand ---- */
  --bs-primary:        #0f766e;  /* teal-700 — top nav, active icons */
  --bs-primary-strong: #115e59;
  --bs-primary-soft:   #e6f4f2;
  --bs-primary-ink:    #ffffff;

  /* ---- Accent ---- */
  --bs-accent:        #f5b400;   /* gold — favourites, popular header, active tab */
  --bs-accent-strong: #d99a00;
  --bs-accent-soft:   #fff6d6;
  --bs-accent-ink:    #1f2937;

  /* ---- Status ---- */
  --bs-live:          #dc2626;   /* red LIVE badge */
  --bs-live-ink:      #ffffff;
  --bs-up:            #16a34a;   /* green for rising odds / active underline */
  --bs-down:          #dc2626;

  /* ---- Radii ---- */
  --bs-r-xs: 4px;
  --bs-r-sm: 6px;
  --bs-r:    8px;
  --bs-r-lg: 12px;
  --bs-r-pill: 999px;

  /* ---- Shadows ---- */
  --bs-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --bs-shadow:    0 2px 6px rgba(15, 23, 42, .06);
  --bs-shadow-lg: 0 8px 28px rgba(15, 23, 42, .10);

  /* ---- Type ---- */
  --bs-font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ============================================================
   LEFT SIDEBAR — full re-skin (scoped to #navDrawer)
   Overrides legacy dark/glass/Tailwind utilities so the live
   JS-injected HTML continues to render but in the new theme.
   ============================================================ */

#navDrawer {
  /* Reset legacy chrome */
  background: var(--bs-surface) !important;
  color: var(--bs-text) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
  box-shadow: var(--bs-shadow-sm) !important;
  backdrop-filter: none !important;
  font-family: var(--bs-font);
  overflow: hidden;
}

/* Mobile drawer keeps full height behaviour from original CSS;
   we only restyle the surface. */
@media (max-width: 1023px) {
  #navDrawer {
    border-radius: 0 !important;
    box-shadow: 8px 0 40px rgba(15, 23, 42, .15) !important;
  }
}

/* ---- Generic text colour reset inside sidebar ---- */
#navDrawer,
#navDrawer * {
  border-color: var(--bs-border);
}
#navDrawer .text-gray-300,
#navDrawer .text-gray-400,
#navDrawer .text-gray-500,
#navDrawer .text-fuchsia-200,
#navDrawer .text-fuchsia-300,
#navDrawer .text-fuchsia-400,
#navDrawer .text-purple-100,
#navDrawer .text-emerald-300,
#navDrawer .text-emerald-400,
#navDrawer .text-amber-100,
#navDrawer .text-amber-200,
#navDrawer .text-amber-300 {
  color: var(--bs-text) !important;
}
#navDrawer .text-gray-500 { color: var(--bs-text-soft) !important; }
#navDrawer .text-gray-400 { color: var(--bs-text-muted) !important; }

/* Neutralise legacy dark backgrounds on injected nodes */
#navDrawer .bg-black\/30,
#navDrawer .bg-black\/40,
#navDrawer .bg-black\/60,
#navDrawer .bg-black\/70,
#navDrawer .bg-fuchsia-500\/10,
#navDrawer .bg-fuchsia-500\/15,
#navDrawer .bg-fuchsia-500\/20,
#navDrawer .bg-fuchsia-500\/25,
#navDrawer .bg-fuchsia-600\/15,
#navDrawer .bg-fuchsia-600\/25,
#navDrawer .bg-purple-500\/10,
#navDrawer .bg-purple-500\/15,
#navDrawer .bg-amber-500\/10,
#navDrawer .bg-amber-500\/15 {
  background: transparent !important;
}
#navDrawer [class*="border-fuchsia-"],
#navDrawer [class*="border-purple-"],
#navDrawer [class*="border-amber-"],
#navDrawer [class*="border-white"] {
  border-color: var(--bs-border) !important;
}

/* ---- Mobile header bar ---- */
#navDrawer .lg\:hidden.flex.items-center.justify-between {
  background: var(--bs-surface);
  border-bottom: 1px solid var(--bs-border);
}
#navDrawer #navClose {
  background: var(--bs-surface);
  border: 1px solid var(--bs-border) !important;
  color: var(--bs-text);
}

/* ============================================================
   FAVOURITES pill (dark teal, gold star — matches screenshot)
   ============================================================ */
.ls-fav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px;
  padding: 10px 12px;
  background: var(--bs-primary-strong);
  border: 1px solid var(--bs-primary-strong);
  border-radius: var(--bs-r);
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.ls-fav__left {
  display: inline-flex; align-items: center; gap: 8px;
}
.ls-fav__star {
  color: var(--bs-accent);
  font-size: 14px;
}
.ls-fav__chev {
  color: rgba(255,255,255,.8);
  font-size: 11px;
  transition: transform .15s ease;
}
.ls-fav.is-open .ls-fav__chev { transform: rotate(180deg); }

/* ============================================================
   LEAGUE TABS  (TOP LEAGUES / MY LEAGUES)
   ============================================================ */
.ls-tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 14px 10px;
}
.ls-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  border-radius: var(--bs-r-sm);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--bs-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ls-tab.is-active {
  color: var(--bs-accent-ink);
  background: transparent;
  position: relative;
}
.ls-tab.is-active::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px; bottom: -6px;
  height: 2px;
  background: var(--bs-accent);
  border-radius: 2px;
}
.ls-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--bs-surface-3);
  color: var(--bs-text-muted);
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--bs-r-pill);
}

/* ============================================================
   TOP LEAGUES list (#topLeagues — JS-injected buttons)
   ============================================================ */
#topLeagues {
  padding: 2px 6px 8px !important;
  max-height: 38vh;
}
#topLeagues > button {
  /* override JS-applied tailwind classes */
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bs-divider) !important;
  border-radius: 0 !important;
  padding: 9px 10px !important;
  margin: 0 !important;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: var(--bs-text) !important;
  font-weight: 600;
  transition: background .12s ease;
}
#topLeagues > button:last-child { border-bottom: 0 !important; }
#topLeagues > button:hover:not([disabled]) {
  background: var(--bs-surface-2) !important;
}
#topLeagues > button[disabled] { opacity: .45; cursor: not-allowed; }
#topLeagues > button > span:nth-child(2) {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--bs-text) !important;
}
/* Active league chip */
#topLeagues > button.bg-amber-500\/15,
#topLeagues > button[class*="bg-amber-500"] {
  background: var(--bs-accent-soft) !important;
  border-left: 3px solid var(--bs-accent) !important;
  padding-left: 7px !important;
}
/* LIVE badge inside top leagues */
#topLeagues .bg-rose-600\/80,
#topLeagues [class*="bg-rose-600"] {
  background: var(--bs-live) !important;
  color: var(--bs-live-ink) !important;
  border-radius: var(--bs-r-xs) !important;
  padding: 2px 5px !important;
  font-size: 9px !important;
  letter-spacing: .08em;
}
#topLeagues .text-emerald-300,
#topLeagues .text-emerald-400 {
  color: var(--bs-up) !important;
  font-weight: 700;
}

/* ============================================================
   SEARCH bar
   ============================================================ */
#navDrawer .ls-search {
  padding: 10px 12px;
  background: var(--bs-surface);
  border-top: 1px solid var(--bs-border);
  border-bottom: 1px solid var(--bs-border);
  position: relative;
}
#navSearch {
  width: 100%;
  padding: 9px 30px 9px 32px !important;
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border-strong) !important;
  border-radius: var(--bs-r) !important;
  color: var(--bs-text) !important;
  font-size: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: none !important;
}
#navSearch::placeholder { color: var(--bs-text-soft); }
#navSearch:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12) !important;
}
.ls-search__icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--bs-primary);
  pointer-events: none;
}
#navSearchClear {
  background: var(--bs-surface-3) !important;
  color: var(--bs-text-muted) !important;
  border: 0 !important;
}
#navSearchResults {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border-strong) !important;
  border-radius: var(--bs-r) !important;
  box-shadow: var(--bs-shadow-lg) !important;
  color: var(--bs-text) !important;
  backdrop-filter: none !important;
}

/* ============================================================
   MENU header + filter tabs (TOUS / LIVE / À VENIR)
   ============================================================ */
.ls-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 6px;
  background: var(--bs-surface);
  border-bottom: 0;
}
.ls-menu-head__title {
  font-size: 13px;
  font-weight: 800;
  color: var(--bs-text);
  letter-spacing: .02em;
  text-transform: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.ls-menu-head__status {
  font-size: 10px;
  color: var(--bs-text-soft);
}

.ls-kindbar {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 4px 14px 6px !important;
  background: var(--bs-surface) !important;
  border-bottom: 1px solid var(--bs-border) !important;
  overflow-x: auto;
}
/* Override JS-applied classes on .kind-tab — use !important everywhere
   because realtime.js rewrites className on click. */
#navDrawer .kind-tab {
  flex: 0 0 auto !important;
  padding: 8px 2px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--bs-text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  text-transform: none !important;
  position: relative;
  cursor: pointer;
}
#navDrawer .kind-tab:hover { color: var(--bs-text) !important; }
#navDrawer .kind-tab.is-active,
#navDrawer .kind-tab[data-kind="all"].is-active,
#navDrawer .kind-tab.bg-fuchsia-500\/25,
#navDrawer .kind-tab.bg-emerald-500\/20 {
  color: var(--bs-text) !important;
  background: transparent !important;
  border: 0 !important;
}
#navDrawer .kind-tab.is-active::after,
#navDrawer .kind-tab.bg-fuchsia-500\/25::after,
#navDrawer .kind-tab.bg-emerald-500\/20::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--bs-accent);
  border-radius: 2px;
}
/* the inline live dot inside LIVE tab */
#navDrawer .kind-tab .bg-emerald-400 {
  background: var(--bs-live) !important;
}

/* ============================================================
   SPORT TREE  (#sportTree — JS-injected)
   ============================================================ */
#sportTree {
  background: var(--bs-surface) !important;
  padding: 4px 6px 8px !important;
}
#sportTree .tree-sport,
#sportTree .tree-country,
#sportTree .tree-league {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--bs-r-sm) !important;
  color: var(--bs-text) !important;
  transition: background .12s ease;
}
#sportTree .tree-sport {
  padding: 9px 8px !important;
  font-weight: 700;
  border-bottom: 1px solid var(--bs-divider) !important;
  border-radius: 0 !important;
}
#sportTree .tree-sport:hover,
#sportTree .tree-country:hover,
#sportTree .tree-league:hover {
  background: var(--bs-surface-2) !important;
}
#sportTree .tree-sport span.text-lg { color: var(--bs-text); }
#sportTree .tree-sport span.font-bold { color: var(--bs-text) !important; }

/* Active states (any of the legacy active backgrounds) */
#sportTree .tree-sport[class*="bg-fuchsia-600"],
#sportTree .tree-country[class*="bg-purple-500"],
#sportTree .tree-league[class*="bg-fuchsia-500"] {
  background: var(--bs-primary-soft) !important;
  color: var(--bs-primary-strong) !important;
  border: 0 !important;
}
#sportTree .tree-league[class*="bg-fuchsia-500"] {
  border-left: 3px solid var(--bs-primary) !important;
}

/* LIVE badges inside tree */
#sportTree [class*="bg-rose-600"] {
  background: var(--bs-live) !important;
  color: var(--bs-live-ink) !important;
  border-radius: var(--bs-r-xs) !important;
  padding: 2px 5px !important;
  font-size: 9px !important;
  letter-spacing: .08em;
}

/* Counts on the right — grey rounded pill (matches screenshot) */
#sportTree .text-emerald-300,
#sportTree .text-emerald-400 {
  color: var(--bs-text-muted) !important;
  background: var(--bs-surface-3) !important;
  font-weight: 700;
  padding: 1px 7px !important;
  border-radius: var(--bs-r-pill) !important;
  font-size: 10px !important;
}
#sportTree .text-gray-300,
#sportTree .text-gray-400,
#sportTree .text-gray-500 { color: var(--bs-text-muted) !important; }

/* Disclosure carets */
#sportTree .opacity-50,
#sportTree .opacity-60 {
  opacity: 1 !important;
  color: var(--bs-text-soft) !important;
  font-size: 10px;
}

/* Empty / loading text */
#sportTree .text-gray-500.text-center,
#topLeagues .text-gray-500 {
  color: var(--bs-text-soft) !important;
}

/* ============================================================
   FOOTER strip (version + sync time)
   ============================================================ */
#navDrawer > .border-t,
#navDrawer > div:last-child {
  background: var(--bs-surface-2) !important;
  border-top: 1px solid var(--bs-border) !important;
  color: var(--bs-text-soft) !important;
}
#navVer, #navSync { color: var(--bs-text-soft) !important; }

/* ============================================================
   Scrollbars (sidebar only)
   ============================================================ */
#navDrawer .scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
#navDrawer .scroll-thin::-webkit-scrollbar-thumb {
  background: var(--bs-border-strong);
  border-radius: 3px;
}
#navDrawer .scroll-thin::-webkit-scrollbar-thumb:hover {
  background: var(--bs-text-soft);
}

/* ============================================================
   STAGE 2 — PAGE SHELL + CENTER COLUMN (light theme)
   ============================================================ */

/* ---- Page shell ---- */
html.bg-\[\#050505\],
html { background: var(--bs-bg) !important; color: var(--bs-text) !important; }
body {
  background: var(--bs-bg) !important;
  color: var(--bs-text) !important;
  font-family: var(--bs-font);
}

/* Header bar (top app nav) — flip glass to white */
header.sticky.top-0 {
  background: var(--bs-primary) !important;
  border-bottom: 1px solid var(--bs-primary-strong) !important;
  backdrop-filter: none !important;
  color: var(--bs-primary-ink);
}
header.sticky.top-0 a,
header.sticky.top-0 .text-gray-400 { color: rgba(255,255,255,.92) !important; }
header.sticky.top-0 .hover\:text-fuchsia-400:hover { color: #fff !important; }
header.sticky.top-0 .neon { text-shadow: none !important; }
header.sticky.top-0 .brand-bet,
header.sticky.top-0 .brand-scores { -webkit-text-fill-color: #fff; color: #fff; background: none; text-shadow: none; }
header.sticky.top-0 .brand-tld { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); }

/* Generic light card primitive */
.bs-app .glass {
  background: var(--bs-surface) !important;
  backdrop-filter: none !important;
  border-color: var(--bs-border) !important;
  color: var(--bs-text);
  box-shadow: var(--bs-shadow-sm);
}
.bs-app .border-purple-500\/20,
.bs-app .border-purple-500\/15,
.bs-app .border-purple-500\/30,
.bs-app .border-purple-500\/40,
.bs-app .border-fuchsia-500\/20,
.bs-app .border-fuchsia-500\/30,
.bs-app .border-fuchsia-500\/40,
.bs-app .border-yellow-500\/20,
.bs-app .border-yellow-500\/30,
.bs-app .border-yellow-500\/40,
.bs-app .divide-purple-500\/10 > * + * { border-color: var(--bs-border) !important; }

/* ============================================================
   DATE STRIP
   ============================================================ */
#dateStrip { background: var(--bs-surface); }
#dateStrip .bs-date-tab {
  color: var(--bs-text-muted) !important;
  background: transparent !important;
  border-color: var(--bs-border) !important;
  padding: 10px 4px !important;
  box-shadow: none !important;
}
#dateStrip .bs-date-tab .text-gray-400 { color: var(--bs-text-soft) !important; }
#dateStrip .bs-date-tab:hover { background: var(--bs-surface-2) !important; color: var(--bs-text) !important; }
#dateStrip .bs-date-tab.active {
  background: var(--bs-surface) !important;
  color: var(--bs-primary) !important;
  box-shadow: inset 0 -2px 0 var(--bs-primary) !important;
}
#dateStrip .bs-date-tab.active .text-gray-400,
#dateStrip .bs-date-tab.active .text-gray-300 { color: var(--bs-primary) !important; }

/* ============================================================
   SPORT STRIP — circular icons with teal ring on active
   ============================================================ */
#sportStrip {
  background: var(--bs-surface) !important;
  border-top: 1px solid var(--bs-border);
  padding: 8px 4px;
  gap: 4px;
}
#sportStrip .bs-sport-tab {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent !important;
  border: 0 !important;
  color: var(--bs-text-muted) !important;
  padding: 4px 2px !important;
  box-shadow: none !important;
  position: relative;
}
#sportStrip .bs-sport-tab > i:first-child {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bs-surface);
  border: 1.5px solid var(--bs-border-strong);
  color: var(--bs-text) !important;
  font-size: 16px !important;
  text-shadow: none !important;
  transition: border-color .15s, color .15s, transform .08s;
}
#sportStrip .bs-sport-tab:hover > i:first-child {
  border-color: var(--bs-text-muted);
  color: var(--bs-text);
}
#sportStrip .bs-sport-tab > div {
  font-size: 10px !important;
  letter-spacing: 0;
  text-transform: capitalize;
  color: var(--bs-text-muted) !important;
  font-weight: 600;
}
#sportStrip .bs-sport-tab.active {
  background: transparent !important;
  color: var(--bs-primary) !important;
  box-shadow: none !important;
}
#sportStrip .bs-sport-tab.active > i:first-child {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  box-shadow: 0 0 0 3px rgba(15,118,110,.10);
}
#sportStrip .bs-sport-tab.active > div { color: var(--bs-primary) !important; font-weight: 700; }

/* ============================================================
   FEATURED MATCH STRIP (cards above the table)
   ============================================================ */
#featuredStrip .glass { background: var(--bs-surface) !important; }
#featuredStrip .bs-feat-card {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
  box-shadow: var(--bs-shadow-sm);
  color: var(--bs-text);
  padding: 12px !important;
}
#featuredStrip .bs-feat-card:hover {
  border-color: var(--bs-primary) !important;
  transform: none;
}
#featuredStrip .bs-feat-card .text-gray-400,
#featuredStrip .bs-feat-card .text-gray-500 { color: var(--bs-text-muted) !important; }
#featuredStrip .bs-feat-card .text-fuchsia-300\/70 { color: var(--bs-text-soft) !important; }
#featuredStrip .bs-feat-card .text-white { color: var(--bs-text) !important; }
#featuredStrip .bs-feat-card .text-emerald-400 { color: var(--bs-up) !important; }

/* ============================================================
   "EN DIRECT MAINTENANT" / table title bar
   ============================================================ */
.bs-table-head {
  background: var(--bs-surface) !important;
  border-bottom: 1px solid var(--bs-border) !important;
  color: var(--bs-text) !important;
}
.bs-table-head h2 {
  color: var(--bs-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}
.bs-table-head .text-amber-300,
.bs-table-head .fa-bolt { color: var(--bs-accent) !important; }
.bs-table-head .text-gray-400 { color: var(--bs-text-soft) !important; }

/* ============================================================
   TABLE SPORT FILTER chips
   ============================================================ */
#tableSportFilter {
  background: var(--bs-surface) !important;
  border-bottom: 1px solid var(--bs-border) !important;
  padding: 6px 8px !important;
  gap: 6px !important;
}
.bs-row-sport {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  color: var(--bs-text-muted) !important;
  border-radius: var(--bs-r-pill) !important;
  padding: 4px 10px !important;
  font-weight: 600;
  font-size: 11px !important;
}
.bs-row-sport:hover {
  background: var(--bs-surface-2) !important;
  color: var(--bs-text) !important;
}
.bs-row-sport.active {
  background: var(--bs-primary-soft) !important;
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* ============================================================
   MARKET BAR (1X2 / Double Chance / Total / GG-NG selects)
   ============================================================ */
.bs-mkt-bar {
  background: var(--bs-surface-2) !important;
  border-bottom: 1px solid var(--bs-border) !important;
  color: var(--bs-text-muted) !important;
}
.bs-mkt-bar > div { border-color: var(--bs-border) !important; }
.bs-mkt-sel {
  color: var(--bs-text) !important;
  background: transparent !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
}
.bs-mkt-sel option { background: var(--bs-surface) !important; color: var(--bs-text) !important; }

/* Sub-header column codes (1, X, 2, OVER, UNDER, …) */
.bs-app .grid-cols-12.bg-black\/40 {
  background: var(--bs-surface) !important;
  border-bottom: 1px solid var(--bs-border) !important;
  color: var(--bs-text-muted) !important;
}
.bs-app .grid-cols-12.bg-black\/40 .text-gray-500,
.bs-app .grid-cols-12.bg-black\/40 .text-gray-400 { color: var(--bs-text-soft) !important; font-weight: 700; }

/* ============================================================
   MATCH LIST  (#matchList — JS-injected groups + rows)
   ============================================================ */
#matchList { background: var(--bs-surface) !important; }
#matchList > div + div { border-top: 1px solid var(--bs-divider); }

/* league group header inside #matchList (sport › country › league) */
#matchList header {
  background: var(--bs-surface-2) !important;
  border-bottom: 1px solid var(--bs-border) !important;
  color: var(--bs-text) !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
}
#matchList header .text-fuchsia-300,
#matchList header .text-fuchsia-300\/80,
#matchList header .text-gray-300 { color: var(--bs-text) !important; font-weight: 600; }
#matchList header .text-gray-600 { color: var(--bs-text-soft) !important; }
#matchList header .text-gray-500 { color: var(--bs-text-soft) !important; }

/* row wrap */
#matchList .bs-rowwrap { background: var(--bs-surface) !important; border-bottom: 1px solid var(--bs-divider); }
#matchList .bs-rowwrap:last-child { border-bottom: 0; }
#matchList .row-line { display: flex; align-items: stretch; }
#matchList .bs-row {
  background: var(--bs-surface) !important;
  color: var(--bs-text) !important;
  min-height: 64px !important;
  flex: 1 1 auto;
}
#matchList .bs-row:hover { background: var(--bs-surface-2) !important; }
#matchList .bs-row .ev .text-gray-400,
#matchList .bs-row .ev .text-gray-500 { color: var(--bs-text-soft) !important; }
#matchList .bs-row .ev .text-fuchsia-300\/80,
#matchList .bs-row .ev .text-fuchsia-300\/70,
#matchList .bs-row .ev .text-fuchsia-200 { color: var(--bs-primary) !important; font-weight: 700; }
#matchList .bs-row .ev .text-gray-100 { color: var(--bs-text) !important; font-weight: 600 !important; }
#matchList .bs-row .ev a:hover .text-gray-100 { color: var(--bs-primary) !important; }

/* odds column dividers */
#matchList .bs-row .o-1x2,
#matchList .bs-row .o-dc,
#matchList .bs-row .o-tot,
#matchList .bs-row .o-bts {
  border-left: 1px solid var(--bs-divider) !important;
  padding: 6px !important;
  gap: 4px !important;
  align-content: center;
}

/* expand chevron button on the right of each row */
#matchList .exp-btn {
  width: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bs-surface) !important;
  border: 0;
  border-left: 1px solid var(--bs-divider);
  color: var(--bs-accent) !important;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
}
#matchList .exp-btn:hover { background: var(--bs-surface-2) !important; }

/* ============================================================
   ODDS BUTTONS  (.bs-odd) — light grey bg, code dark, value green
   ============================================================ */
.bs-odd {
  background: var(--bs-surface-3) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-sm) !important;
  color: var(--bs-text) !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 10px !important;
  min-height: 36px !important;
  box-shadow: none !important;
  transition: border-color .12s, background .12s;
}
.bs-odd:hover {
  border-color: var(--bs-primary) !important;
  background: var(--bs-surface) !important;
  box-shadow: 0 0 0 1px var(--bs-primary) inset !important;
}
.bs-odd > div:first-child {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--bs-text) !important;
  text-transform: uppercase;
  letter-spacing: 0;
  opacity: 1 !important;
}
.bs-odd .odd-val {
  color: var(--bs-up) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-family: 'Inter', system-ui, sans-serif;
}
.bs-odd.locked {
  background: var(--bs-surface-2) !important;
  filter: none !important;
  color: var(--bs-text-soft) !important;
}
.bs-odd.empty {
  background: var(--bs-surface-2) !important;
  border: 1px dashed var(--bs-border-strong) !important;
  color: var(--bs-text-soft) !important;
  justify-content: center !important;
}
.bs-odd.empty .fa-lock { color: var(--bs-text-soft) !important; }

/* fluctuation flash overlays — re-tinted for light bg */
.bs-odd.flash-up {
  animation: bsFlashUp 1.1s ease;
}
.bs-odd.flash-down {
  animation: bsFlashDown 1.1s ease;
}
@keyframes bsFlashUp {
  0%   { background: #dcfce7 !important; border-color: var(--bs-up) !important; }
  100% { background: var(--bs-surface-3) !important; }
}
@keyframes bsFlashDown {
  0%   { background: #fee2e2 !important; border-color: var(--bs-down) !important; }
  100% { background: var(--bs-surface-3) !important; }
}
/* Up/Down indicator arrow (rendered after .odd-val when dir present) */
.bs-odd.flash-up .odd-val::after {
  content: ' \25B2';  /* ▲ */
  color: var(--bs-up);
  font-size: 8px;
  margin-left: 3px;
}
.bs-odd.flash-down .odd-val::after {
  content: ' \25BC';  /* ▼ */
  color: var(--bs-down);
  font-size: 8px;
  margin-left: 3px;
}

/* odd-active (selected in betslip) */
.odd-active {
  background: var(--bs-primary-soft) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 1px var(--bs-primary) inset !important;
  color: var(--bs-text) !important;
}
.odd-active .odd-val { color: var(--bs-primary-strong) !important; }

/* ============================================================
   LIVE pill (red rectangle, white text) — used in match rows
   ============================================================ */
.bs-live-pill {
  background: var(--bs-live) !important;
  color: var(--bs-live-ink) !important;
  border-radius: var(--bs-r-xs) !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  box-shadow: none !important;
}
.bs-live-pill::before { display: none; }

/* "À VENIR" / upcoming inline tag */
#matchList .text-fuchsia-300\/70 { color: var(--bs-text-soft) !important; }

/* Stats icon */
.stats-icon {
  color: var(--bs-primary) !important;
  text-shadow: none !important;
}
.stats-icon:hover {
  color: var(--bs-primary-strong) !important;
  transform: scale(1.12);
  text-shadow: none !important;
}

/* "lastSync" pulse dot in title bar */
.bs-table-head #pulse { background: var(--bs-up) !important; }

/* ============================================================
   Responsive: collapse odds columns on mobile (preserve original behaviour)
   ============================================================ */
@media (max-width: 1023px) {
  #matchList .bs-row .o-1x2,
  #matchList .bs-row .o-dc,
  #matchList .bs-row .o-tot,
  #matchList .bs-row .o-bts { border-left: 0 !important; }
}

/* ============================================================
   STAGE 3 — RIGHT COLUMN (Fast Code, Search Bets, Betslip, Popular Bets)
   ============================================================ */

/* ---- Right-column wrapper ---- */
.rs-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- Generic right-side card primitive ---- */
.rs-card {
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-r-lg);
  box-shadow: var(--bs-shadow-sm);
  overflow: hidden;
  color: var(--bs-text);
  font-family: var(--bs-font);
}
.rs-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--bs-text);
  border-bottom: 1px solid var(--bs-border);
  background: var(--bs-surface);
}
.rs-card__head--gold {
  background: var(--bs-accent);
  color: var(--bs-accent-ink);
  border-bottom: 0;
}
.rs-card__head .rs-info {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  opacity: .7;
  margin-left: 6px;
  cursor: help;
}
.rs-card__body { padding: 12px 14px; }

/* ---- Light input + checkbox primitives ---- */
.rs-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border-strong);
  border-radius: var(--bs-r);
  color: var(--bs-text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.rs-input::placeholder { color: var(--bs-text-soft); }
.rs-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.rs-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--bs-text-muted);
  cursor: pointer;
  user-select: none;
  margin-top: 8px;
}
.rs-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--bs-border-strong);
  border-radius: 4px;
  background: var(--bs-surface);
  cursor: pointer;
  position: relative;
  margin: 0;
}
.rs-check input:checked {
  border-color: var(--bs-primary);
  background: var(--bs-primary);
}
.rs-check input:checked::after {
  content: '';
  position: absolute;
  inset: 2px 3px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  height: 8px; width: 4px;
  top: 1px; left: 4px;
}

/* ---- Inline group: select + input (Search bets) ---- */
.rs-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--bs-border-strong);
  border-radius: var(--bs-r);
  overflow: hidden;
  background: var(--bs-surface);
}
.rs-group:focus-within {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}
.rs-group select.rs-input,
.rs-group input.rs-input {
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}
.rs-group select.rs-input {
  flex: 0 0 auto;
  width: auto;
  background: var(--bs-surface);
  font-weight: 700;
  color: var(--bs-text);
  border-right: 1px solid var(--bs-border);
  padding-right: 28px;
}
.rs-group input.rs-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* ============================================================
   BETSLIP (#slipSheet) — full re-skin
   ============================================================ */

#slipSheet > .glass {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
  box-shadow: var(--bs-shadow-sm) !important;
  backdrop-filter: none !important;
  color: var(--bs-text);
}
@media (max-width: 1023px) {
  #slipSheet > .glass {
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -10px 50px rgba(15, 23, 42, .25) !important;
  }
}

/* mobile drag handle */
#slipSheet .lg\:hidden.flex.justify-center > span {
  background: var(--bs-border-strong) !important;
}

/* Header */
#slipSheet > .glass > .px-3.py-2:first-of-type,
#slipSheet > .glass > div.bg-gradient-to-r {
  background: var(--bs-surface) !important;
  border-bottom: 1px solid var(--bs-border) !important;
}
#slipSheet h3.gold {
  color: var(--bs-text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
#slipSheet h3.gold .fa-receipt { color: var(--bs-text-muted); }
#slipSheet #slipCount {
  background: var(--bs-accent) !important;
  color: var(--bs-accent-ink) !important;
  font-weight: 800 !important;
  border-radius: var(--bs-r-pill) !important;
  font-size: 10px !important;
}
#slipCloseM {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  color: var(--bs-text-muted) !important;
}

/* Tabs (SEUL / MULTIPLE / SYSTÈME) */
#slipSheet .grid.grid-cols-3 {
  background: var(--bs-surface) !important;
  border-bottom: 1px solid var(--bs-border) !important;
}
#slipSheet .bs-slip-tab {
  color: var(--bs-text-muted) !important;
  background: transparent !important;
  border: 0 !important;
  text-shadow: none !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  padding: 10px 0 !important;
  position: relative;
}
#slipSheet .bs-slip-tab:hover { color: var(--bs-text) !important; background: var(--bs-surface-2) !important; }
#slipSheet .bs-slip-tab.active,
#slipSheet .bs-slip-tab.gold {
  color: var(--bs-accent-strong) !important;
  background: var(--bs-surface) !important;
  box-shadow: none !important;
}
#slipSheet .bs-slip-tab.active::after,
#slipSheet .bs-slip-tab.gold::after {
  content: '';
  position: absolute;
  left: 18%; right: 18%; bottom: 0;
  height: 2px;
  background: var(--bs-accent);
  border-radius: 2px;
}

/* System box */
#slipSystemBox {
  background: var(--bs-accent-soft) !important;
  border-bottom: 1px solid var(--bs-border) !important;
  color: var(--bs-text) !important;
}
#slipSystemBox .text-amber-200\/90 { color: var(--bs-accent-strong) !important; }
#slipSystemBox .text-gray-400 { color: var(--bs-text-muted) !important; }
#slipSystemK {
  background: var(--bs-surface) !important;
  color: var(--bs-text) !important;
  border: 1px solid var(--bs-border-strong) !important;
}

/* Slip items list */
#slipItems { padding: 14px !important; }
#slipItems > li.text-center {
  /* Empty state — dashed-border centered icon + caption */
  border: 1.5px dashed var(--bs-border-strong);
  border-radius: var(--bs-r-lg);
  padding: 28px 12px !important;
  color: var(--bs-text-muted) !important;
  background: var(--bs-surface);
}
#slipItems > li.text-center i {
  display: block !important;
  margin: 0 auto 10px !important;
  width: 44px; height: 44px;
  border: 1.5px solid var(--bs-border-strong);
  border-radius: 8px;
  display: flex !important;
  align-items: center; justify-content: center;
  color: var(--bs-text-soft) !important;
  opacity: 1 !important;
  font-size: 18px !important;
  background: var(--bs-surface-2);
}

/* populated items (.bs-slip-item — JS-injected) */
.bs-slip-item {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r) !important;
  padding: 10px !important;
  color: var(--bs-text) !important;
}
.bs-slip-item.locked {
  border-color: var(--bs-down) !important;
  background: #fef2f2 !important;
}
.bs-slip-item .text-gray-400,
.bs-slip-item .text-gray-500,
.bs-slip-item .text-gray-600 { color: var(--bs-text-muted) !important; }
.bs-slip-item .text-fuchsia-300\/80 { color: var(--bs-primary) !important; }
.bs-slip-item .text-gray-100 { color: var(--bs-text) !important; }
.bs-slip-item .gold { color: var(--bs-up) !important; text-shadow: none !important; }
.bs-slip-item .x-rm { color: var(--bs-text-soft) !important; }
.bs-slip-item .x-rm:hover { color: var(--bs-down) !important; }

/* Clear-all + cog row */
#slipSheet .px-3.py-1\.5.border-t {
  background: var(--bs-surface) !important;
  border-top: 1px solid var(--bs-border) !important;
  color: var(--bs-text-soft) !important;
}
#slipSheet .px-3.py-1\.5.border-t .text-gray-500 { color: var(--bs-text-soft) !important; }
#slipSheet .px-3.py-1\.5.border-t a:hover { color: var(--bs-primary) !important; }
#slipSheet [data-slip-clear] { color: var(--bs-text-muted) !important; }
#slipSheet [data-slip-clear]:hover { color: var(--bs-down) !important; }

/* Combo / stake / totals box */
#slipSheet > .glass > .px-3.py-2.border-t {
  background: var(--bs-surface-2) !important;
  border-top: 1px solid var(--bs-border) !important;
  color: var(--bs-text) !important;
}
#slipSheet > .glass > .px-3.py-2.border-t .text-gray-400 { color: var(--bs-text-muted) !important; }
#slipSheet > .glass > .px-3.py-2.border-t .text-fuchsia-300 { color: var(--bs-primary) !important; }
#slipStake {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border-strong) !important;
  color: var(--bs-text) !important;
  font-weight: 700;
}
#slipStake:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 2px rgba(15,118,110,.15) !important;
}
#slipSheet dl .border-b.border-white\/5 { border-color: var(--bs-border) !important; }
#slipSheet dl .text-gray-400 { color: var(--bs-text-muted) !important; }
#slipSheet dl .gold,
#slipSheet dl .text-white { color: var(--bs-text) !important; text-shadow: none !important; }
#slipSheet #slipPot { color: var(--bs-text) !important; font-weight: 800 !important; }

/* Action buttons (PLACER / RÉSERVER / SE CONNECTER) */
#slipSheet > .glass > .p-3.space-y-2 {
  background: var(--bs-surface) !important;
  border-top: 1px solid var(--bs-border) !important;
}
#placeBtn,
#slipSheet a[href$="login.php"] {
  background: var(--bs-accent) !important;
  background-image: none !important;
  color: var(--bs-accent-ink) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  border-radius: var(--bs-r) !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 12px !important;
  font-size: 13px !important;
}
#placeBtn:hover:not(:disabled),
#slipSheet a[href$="login.php"]:hover {
  background: var(--bs-accent-strong) !important;
  box-shadow: var(--bs-shadow) !important;
}
#placeBtn:disabled { opacity: .55 !important; cursor: not-allowed; }
#reserveBtn {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border-strong) !important;
  color: var(--bs-text) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  letter-spacing: .04em !important;
  border-radius: var(--bs-r) !important;
  padding: 12px !important;
  font-size: 13px !important;
}
#reserveBtn:hover {
  background: var(--bs-surface-2) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}
#slipMsg .text-emerald-400 { color: var(--bs-up) !important; }
#slipMsg .text-rose-400    { color: var(--bs-down) !important; }
#slipMsg .gold             { color: var(--bs-text) !important; text-shadow: none !important; font-weight: 800; }

/* ============================================================
   POPULAR BETS card
   ============================================================ */
.rs-popular__list { display: flex; flex-direction: column; }
.rs-popular__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--bs-divider);
  background: var(--bs-surface);
}
.rs-popular__row:first-child { border-top: 0; }
.rs-popular__row:hover { background: var(--bs-surface-2); }
.rs-popular__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bs-surface-3);
  color: var(--bs-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex: 0 0 auto;
}
.rs-popular__main {
  flex: 1 1 auto;
  min-width: 0;
}
.rs-popular__teams {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-popular__market {
  font-size: 10.5px;
  color: var(--bs-text-muted);
  margin-top: 1px;
}
.rs-popular__odds {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
}
.rs-popular__code {
  font-size: 11px;
  font-weight: 700;
  color: var(--bs-text-muted);
}
.rs-popular__val {
  font-size: 13px;
  font-weight: 800;
  color: var(--bs-text);
}

/* ============================================================
   STAGE 4 — CORRECTIONS
   Target: white floating cards on a deep TEAL canvas, gold
   accent bars on Menu / Betslip / Popular Bets, solid-green
   selected odds, and a teal CTA in the betslip.
   ============================================================ */

/* ---- Canvas: deep teal everywhere ---- */
html, body {
  background: var(--bs-bg) !important;
  color: var(--bs-text) !important;
}

/* The top app header sits on a slightly darker teal band */
header.sticky.top-0 {
  background: var(--bs-bg-strong) !important;
  border-bottom: 1px solid rgba(0,0,0,.15) !important;
}

/* Kill the previous blanket "make every .glass card white" rule:
   only specific containers should be white now. */
.bs-app .glass {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The date-strip + sport-strip wrapper had a white card around it
   in my last pass — make it transparent so icons sit on teal. */
.bs-app .glass.rounded-xl.border.border-purple-500\/20.overflow-hidden.mb-2,
.bs-app .glass.rounded-xl.overflow-hidden.mb-2 {
  background: transparent !important;
  border: 0 !important;
}

/* ============================================================
   DATE STRIP — sits inside a white pill on teal
   ============================================================ */
#dateStrip {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: var(--bs-shadow-sm);
}

/* ============================================================
   SPORT STRIP — circular icons floating on teal canvas
   ============================================================ */
#sportStrip {
  background: transparent !important;
  border-top: 0 !important;
  margin-bottom: 12px;
  padding: 0 !important;
}
#sportStrip .bs-sport-tab {
  background: transparent !important;
  color: rgba(255,255,255,.85) !important;
}
#sportStrip .bs-sport-tab > i:first-child {
  background: var(--bs-surface) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: var(--bs-text) !important;
  width: 44px !important; height: 44px !important;
  font-size: 17px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
#sportStrip .bs-sport-tab > div {
  color: rgba(255,255,255,.9) !important;
  font-weight: 600;
}
#sportStrip .bs-sport-tab:hover > i:first-child {
  border-color: rgba(255,255,255,.45) !important;
}
#sportStrip .bs-sport-tab.active > i:first-child {
  border: 2px solid var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  background: var(--bs-surface) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
#sportStrip .bs-sport-tab.active > div {
  color: #fff !important;
}

/* ============================================================
   LIVE NOW table — turn the legacy "one big white card" into
   discrete floating cards (header + each row = its own card)
   ============================================================ */
/* The outer .glass wrapper around #matchList already transparent
   via the rule above. Now style the title bar + filter chip strip
   as their own white pill. */
.bs-table-head {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) var(--bs-r-lg) 0 0 !important;
  margin-top: 0;
  padding: 12px 14px !important;
}
#tableSportFilter {
  background: var(--bs-surface) !important;
  border-left: 1px solid var(--bs-border) !important;
  border-right: 1px solid var(--bs-border) !important;
  border-bottom: 1px solid var(--bs-border) !important;
  border-radius: 0 0 var(--bs-r-lg) var(--bs-r-lg) !important;
  margin-bottom: 12px;
  padding: 10px 12px !important;
}

/* The market-bar + sub-header sit on top of the FIRST group card.
   Float them as their own banner. */
.bs-mkt-bar {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
  margin-bottom: 10px;
  padding: 4px 0 !important;
  box-shadow: var(--bs-shadow-sm);
}
.bs-app .grid-cols-12.bg-black\/40 {
  background: transparent !important;
  border: 0 !important;
  margin-bottom: 10px;
  padding: 0 4px !important;
}

/* Each league group becomes a white card with rounded corners */
#matchList { background: transparent !important; }
#matchList > div {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: var(--bs-shadow-sm);
}
#matchList > div + div { border-top: 1px solid var(--bs-border); }

/* Group header inside each card */
#matchList header {
  background: var(--bs-surface-2) !important;
  border-bottom: 1px solid var(--bs-border) !important;
}

/* Individual match rows: keep them inside the card but separated by hairlines */
#matchList .bs-rowwrap {
  background: var(--bs-surface) !important;
  border-bottom: 1px solid var(--bs-divider) !important;
}
#matchList .bs-rowwrap:last-child { border-bottom: 0 !important; }

/* ============================================================
   ODDS BUTTONS — selected state must be SOLID GREEN with white text
   ============================================================ */
.odd-active,
.bs-odd.odd-active {
  background: var(--bs-up) !important;
  border-color: var(--bs-up) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.odd-active > div:first-child,
.bs-odd.odd-active > div:first-child {
  color: #fff !important;
}
.odd-active .odd-val,
.bs-odd.odd-active .odd-val {
  color: #fff !important;
}

/* ============================================================
   LEFT SIDEBAR — gold accents on Menu + active sport
   ============================================================ */

/* Make sure left sidebar stays white on the teal canvas */
#navDrawer { background: var(--bs-surface) !important; }

/* "Menu" header bar: solid gold, dark text */
.ls-menu-head {
  background: var(--bs-accent) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
}
.ls-menu-head__title {
  color: var(--bs-accent-ink) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px !important;
}
.ls-menu-head__title i { color: var(--bs-accent-ink) !important; }
.ls-menu-head__status { color: rgba(31,41,55,.55) !important; }

/* Kind-bar (All / Live / À venir) — teal text, gold underline on active */
.ls-kindbar {
  background: var(--bs-surface) !important;
  border-bottom: 1px solid var(--bs-border) !important;
}
#navDrawer .kind-tab {
  color: var(--bs-primary) !important;
  font-weight: 700 !important;
}
#navDrawer .kind-tab:hover { color: var(--bs-primary-strong) !important; }
#navDrawer .kind-tab.is-active,
#navDrawer .kind-tab.bg-fuchsia-500\/25,
#navDrawer .kind-tab.bg-emerald-500\/20 {
  color: var(--bs-primary-strong) !important;
}
#navDrawer .kind-tab.is-active::after,
#navDrawer .kind-tab.bg-fuchsia-500\/25::after,
#navDrawer .kind-tab.bg-emerald-500\/20::after {
  background: var(--bs-accent) !important;   /* gold underline */
  height: 2.5px;
}

/* Active sport in #sportTree: gold left-border indicator */
#sportTree .tree-sport[class*="bg-fuchsia-600"] {
  background: var(--bs-accent-soft) !important;
  border-left: 3px solid var(--bs-accent) !important;
  border-radius: 0 !important;
  padding-left: 7px !important;
  color: var(--bs-text) !important;
}
#sportTree .tree-sport[class*="bg-fuchsia-600"] span.font-bold {
  color: var(--bs-text) !important;
}

/* ============================================================
   RIGHT SIDEBAR — gold headers + teal CTA
   ============================================================ */

/* BETSLIP card: gold header bar */
#slipSheet > .glass {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
}
#slipSheet > .glass > .px-3.py-2:first-of-type,
#slipSheet > .glass > div.bg-gradient-to-r {
  background: var(--bs-accent) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  border-radius: var(--bs-r-lg) var(--bs-r-lg) 0 0 !important;
  padding: 12px 14px !important;
}
#slipSheet h3.gold {
  color: var(--bs-accent-ink) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-weight: 900 !important;
}
#slipSheet h3.gold .fa-receipt { color: var(--bs-accent-ink) !important; }
#slipSheet #slipCount {
  background: var(--bs-surface) !important;
  color: var(--bs-accent-ink) !important;
}
#slipCloseM {
  background: rgba(255,255,255,.4) !important;
  border-color: rgba(0,0,0,.1) !important;
  color: var(--bs-accent-ink) !important;
}

/* Slip tabs: teal text, gold underline on active (matches Image 2's right column) */
#slipSheet .grid.grid-cols-3 { background: var(--bs-surface) !important; }
#slipSheet .bs-slip-tab { color: var(--bs-text-muted) !important; }
#slipSheet .bs-slip-tab.active,
#slipSheet .bs-slip-tab.gold {
  color: var(--bs-primary-strong) !important;
}
#slipSheet .bs-slip-tab.active::after,
#slipSheet .bs-slip-tab.gold::after {
  background: var(--bs-accent) !important;
  left: 14%; right: 14%;
}

/* Place-bets CTA must be TEAL (green), not gold */
#placeBtn,
#slipSheet a[href$="login.php"] {
  background: var(--bs-primary) !important;
  color: #fff !important;
  border-radius: var(--bs-r) !important;
}
#placeBtn:hover:not(:disabled),
#slipSheet a[href$="login.php"]:hover {
  background: var(--bs-primary-strong) !important;
}

/* Popular Bets — gold header */
.rs-card__head--gold {
  background: var(--bs-accent) !important;
  color: var(--bs-accent-ink) !important;
  font-weight: 900 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 14px !important;
}

/* Fast code + Search bets cards: keep clean white, just ensure
   they sit cleanly on the teal canvas */
.rs-card {
  box-shadow: var(--bs-shadow-sm);
}

/* ============================================================
   Misc readability fixes on teal canvas
   ============================================================ */
/* Featured strip cards on teal */
#featuredStrip .bs-feat-card {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  box-shadow: var(--bs-shadow-sm);
}

/* Footer of left sidebar (version / sync) */
#navDrawer > div:last-child {
  background: var(--bs-surface) !important;
  border-top: 1px solid var(--bs-border) !important;
}

/* Avoid blank "ghost" cards if a content area is empty: keep teal showing */
.bs-app > section,
.bs-app > div {
  background: transparent;
}


/* ============================================================
   STAGE 5 — PIXEL-PERFECT CORRECTIONS (from 4 reference images)
   Scope: odds buttons, per-row match cards, left-sidebar tabs,
   uniform gold right-sidebar headers. Additive overrides only.
   ============================================================ */

/* ============================================================
   5.1 — ODDS BUTTONS  (the most important fix)
   Target: separate light-grey blocks with gap, label LEFT dark
   grey, value RIGHT green, locked = green padlock right-aligned.
   ============================================================ */

/* Group containers (.o-1x2 / .o-dc / .o-tot / .o-bts): real
   spacing between buttons, no internal dividers, padding so the
   buttons float as distinct chips inside the row. */
#matchList .bs-row .o-1x2,
#matchList .bs-row .o-dc,
#matchList .bs-row .o-tot,
#matchList .bs-row .o-bts {
  border-left: 0 !important;
  padding: 8px 4px !important;
  gap: 6px !important;
  align-content: center;
  background: transparent !important;
}

/* Each odd button: solid light-grey block, dark label LEFT,
   green value RIGHT. NO border, slight radius, generous height. */
.bs-odd,
.bs-odd.odd-btn {
  background: #f4f5f7 !important;
  border: 1px solid #f4f5f7 !important;
  border-radius: 6px !important;
  color: #4b5563 !important;          /* dark grey label */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
  min-height: 38px !important;
  height: 38px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.bs-odd:hover {
  background: #eceef2 !important;
  border-color: #d8dbe0 !important;
  box-shadow: none !important;
}
.bs-odd > div:first-child {
  color: #4b5563 !important;          /* dark grey label "1" / "X" / "2" */
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
  font-family: 'Inter', system-ui, sans-serif;
}
.bs-odd .odd-val {
  color: var(--bs-up) !important;     /* solid green value */
  font-size: 14px !important;
  font-weight: 800 !important;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0 !important;
}

/* Locked: JS emits the value as 🔒 emoji inside .odd-val. Hide
   the emoji and inject a clean green padlock glyph (FA-style
   Unicode) right-aligned. */
.bs-odd.locked {
  background: #f4f5f7 !important;
  border-color: #f4f5f7 !important;
  pointer-events: none;
  filter: none !important;
}
.bs-odd.locked > div:first-child {
  color: #4b5563 !important;
  opacity: 1 !important;
}
.bs-odd.locked .odd-val {
  font-size: 0 !important;            /* hide the 🔒 emoji */
}
.bs-odd.locked .odd-val::after {
  content: "\f023";                   /* Font Awesome padlock */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  font-size: 12px !important;
  color: var(--bs-up) !important;
}

/* Empty cell (no odds available): centered green padlock,
   match the same light-grey background — no dashed border. */
.bs-odd.empty {
  background: #f4f5f7 !important;
  border: 1px solid #f4f5f7 !important;
  justify-content: center !important;
  min-height: 38px !important;
  height: 38px !important;
}
.bs-odd.empty .fa-lock,
.bs-odd.empty i.fa-solid {
  color: var(--bs-up) !important;
  font-size: 12px !important;
  opacity: .9;
}

/* SELECTED odd (in betslip): solid dark green block with white
   text — keep contrast against the new light-grey resting state. */
.bs-odd.odd-active,
.odd-active {
  background: var(--bs-up) !important;
  border-color: var(--bs-up) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.bs-odd.odd-active > div:first-child,
.odd-active > div:first-child {
  color: #fff !important;
}
.bs-odd.odd-active .odd-val,
.odd-active .odd-val {
  color: #fff !important;
}

/* Up/down flash arrows: keep but tweak position for the new layout */
.bs-odd.flash-up .odd-val::after,
.bs-odd.flash-down .odd-val::after { margin-left: 4px; font-size: 9px; }

/* ============================================================
   5.2 — MATCH ROWS as INDIVIDUAL floating cards
   The league group container (#matchList > div) becomes
   transparent; each .bs-rowwrap becomes the white card with
   margin-bottom, rounded corners, shadow. The group header is
   restyled as a subtle teal-on-white inline label.
   ============================================================ */

/* Group container: transparent, no card chrome */
#matchList > div {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}

/* Group header: hide the redundant "sport › country › league"
   strip — the league name is repeated per-card already, and the
   target design has no separate group header band. */
#matchList > div > header { display: none !important; }

/* Each row = its own floating white card */
#matchList .bs-rowwrap {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
#matchList .bs-rowwrap:last-child { margin-bottom: 0 !important; }

#matchList .row-line { background: var(--bs-surface) !important; }
#matchList .bs-row { background: var(--bs-surface) !important; }
#matchList .bs-row:hover { background: var(--bs-surface) !important; }

/* Event column: more breathing room, team names larger */
#matchList .bs-row .ev { padding: 8px 12px !important; }
#matchList .bs-row .ev .text-gray-100 {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Top meta row (time + LIVE + league label) — make league name
   visible on the right. JS emits time on the left; we keep that. */
#matchList .bs-row .ev .text-[10px],
#matchList .bs-row .ev > div:first-child {
  font-size: 11px !important;
}

/* Expand chevron: transparent, soft grey */
#matchList .exp-btn {
  background: transparent !important;
  border-left: 1px solid var(--bs-divider) !important;
  color: var(--bs-text-soft) !important;
}
#matchList .exp-btn:hover { color: var(--bs-primary) !important; background: var(--bs-surface-2) !important; }

/* Market header bar above the list ("1x2 v"  "Total v" pill).
   The existing sub-header div (col-span-12 grid with col-grp
   children) becomes one continuous white rounded pill. */
.bs-app .grid.grid-cols-12.bg-black\/40 {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
  margin-bottom: 10px !important;
  padding: 8px 4px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  text-align: center;
}
.bs-app .grid.grid-cols-12.bg-black\/40 > div {
  color: var(--bs-text) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.bs-app .grid.grid-cols-12.bg-black\/40 > div::after {
  content: "  \25BE";  /* ▾ dropdown caret */
  color: var(--bs-text-soft);
  font-size: 10px;
  margin-left: 4px;
}

/* ============================================================
   5.3 — LEFT SIDEBAR: kind-tabs active = GREEN (not gold)
   "All" / "Today" / "3h" — active gets dark green text + green
   bottom border. Override the Stage 4 gold underline.
   ============================================================ */
#navDrawer .kind-tab.is-active,
#navDrawer .kind-tab.bg-fuchsia-500\/25,
#navDrawer .kind-tab.bg-emerald-500\/20 {
  color: var(--bs-primary-strong) !important;
  background: transparent !important;
}
#navDrawer .kind-tab.is-active::after,
#navDrawer .kind-tab.bg-fuchsia-500\/25::after,
#navDrawer .kind-tab.bg-emerald-500\/20::after {
  background: var(--bs-primary) !important;   /* GREEN underline */
  height: 2.5px !important;
}

/* Active sport in sport tree: green left-border (was gold) */
#sportTree .tree-sport[class*="bg-fuchsia-600"] {
  background: rgba(15,118,110,.06) !important;
  border-left: 3px solid var(--bs-primary) !important;
}

/* Sport-tree LIVE pills should be the same rectangular red */
#sportTree .tree-sport [class*="text-rose"],
#sportTree .tree-sport [class*="bg-red"],
#sportTree .tree-sport [class*="text-red"] {
  background: var(--bs-live) !important;
  color: var(--bs-live-ink) !important;
  border-radius: var(--bs-r-xs) !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  border: 0 !important;
}

/* ============================================================
   5.4 — RIGHT SIDEBAR: EVERY card header is gold
   The HTML has <div class="rs-card__head"> for Fast code + Search
   bets (no --gold modifier). Promote the base header to gold so
   all four cards match the target uniformly.
   ============================================================ */
.rs-card__head {
  background: var(--bs-accent) !important;
  color: var(--bs-accent-ink) !important;
  border-bottom: 0 !important;
  font-weight: 800 !important;
  padding: 12px 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
}
.rs-card__head .rs-info {
  border-color: var(--bs-accent-ink) !important;
  color: var(--bs-accent-ink) !important;
  opacity: .85;
}
/* Inputs inside Fast code / Search bets: clean white pill with
   subtle border, on a white card body. */
.rs-card__body { background: var(--bs-surface) !important; padding: 12px 14px !important; }
.rs-input {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r) !important;
  color: var(--bs-text) !important;
}
.rs-input:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 2px rgba(15,118,110,.15) !important;
}

/* Right column outer wrapper: keep the 8-10px gap between cards
   so each one looks like a distinct floating panel on teal. */
.col-span-12.lg\:col-span-3 > .rs-card,
.col-span-12.lg\:col-span-3 > #slipSheet,
.col-span-12.xl\:col-span-3 > .rs-card,
.col-span-12.xl\:col-span-3 > #slipSheet { margin-bottom: 0; }

/* Betslip empty state: white bg, soft icon, muted text */
#slipItems .empty-state,
#slipItems .text-center.text-gray-500 {
  background: var(--bs-surface) !important;
  color: var(--bs-text-soft) !important;
  padding: 18px 12px !important;
}
#slipItems .fa-receipt,
#slipItems i.fa-solid.fa-receipt {
  color: var(--bs-text-soft) !important;
  font-size: 36px !important;
  opacity: .55;
}

/* Popular bets list rows: circle icon left, stacked text middle,
   bold odd value right. */
.rs-pop-row,
.rs-card .rs-pop-row,
.rs-card__body > a,
.rs-card__body .pop-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--bs-divider) !important;
  color: var(--bs-text) !important;
  text-decoration: none !important;
}
.rs-card .rs-pop-row:last-child { border-bottom: 0 !important; }

/* ============================================================
   5.5 — MISC
   ============================================================ */
/* Avoid the old box-shadow on .bs-odd:hover that made buttons
   look joined */
.bs-odd:hover { box-shadow: none !important; }

/* Group header used to be the only place the league name lived.
   Since we hid it (5.2), make sure the in-row league hint (if any)
   shows on the right side of the meta row. */
#matchList .bs-row .ev > div:first-child { justify-content: flex-start; }


/* ============================================================
   STAGE 6 — HTML restructure follow-ups
   Matches the new 5-button row (1/X/2 + Over/Under), the 2-select
   market bar, and the compact scrollable sport strip.
   ============================================================ */

/* ---- New compact sport strip (overrides Stage 4 grid rules) ---- */
#sportStrip.bs-sportstrip {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 8px !important;
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
  margin-bottom: 12px;
  box-shadow: var(--bs-shadow-sm);
}
#sportStrip.bs-sportstrip::-webkit-scrollbar { height: 6px; }
#sportStrip.bs-sportstrip::-webkit-scrollbar-thumb { background: var(--bs-border); border-radius: 3px; }

#sportStrip.bs-sportstrip .bs-sport-tab {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  padding: 6px 4px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  color: var(--bs-text) !important;
}
#sportStrip.bs-sportstrip .bs-sport-tab > i {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  color: var(--bs-text) !important;
  font-size: 14px !important;
  transition: border-color .12s, color .12s;
}
#sportStrip.bs-sportstrip .bs-sport-tab > div {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--bs-text) !important;
  white-space: nowrap;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sportStrip.bs-sportstrip .bs-sport-tab:hover > i {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}
#sportStrip.bs-sportstrip .bs-sport-tab.active > i {
  border: 2px solid var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  background: var(--bs-surface) !important;
}
#sportStrip.bs-sportstrip .bs-sport-tab.active > div {
  color: var(--bs-primary-strong) !important;
}

/* ---- Market dropdown bar: 2 pills only ---- */
.bs-app .bs-mkt-bar {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 10px 0 !important;
  margin: 0 !important;
}
.bs-mkt-pill {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
  display: flex; align-items: center;
  padding: 0 14px;
  min-height: 40px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.bs-mkt-pill .bs-mkt-sel {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: var(--bs-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  width: 100%;
  cursor: pointer;
  padding-right: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b7280' d='M0 0l5 6 5-6z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right .25rem center !important;
}
.bs-mkt-pill .bs-mkt-sel option { background: var(--bs-surface); color: var(--bs-text); }

/* ---- New odds-button label slot (.odd-lbl) ---- */
.bs-odd > .odd-lbl {
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-odd > .odd-val {
  flex: 0 0 auto;
  text-align: right;
  padding-left: 8px;
}
/* Selected/active overrides label colour too */
.bs-odd.odd-active > .odd-lbl,
.odd-active > .odd-lbl { color: #fff !important; }
.bs-odd.locked > .odd-lbl { color: #4b5563 !important; }
.bs-odd.empty > .odd-lbl {
  color: #4b5563 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.bs-odd.empty > i { color: var(--bs-up) !important; font-size: 11px !important; opacity: .9; }

/* ---- New row grid (5 buttons, no DC, no BTS) ---- */
#matchList .bs-row {
  display: grid !important;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr) !important;
  align-items: stretch;
  min-height: 64px;
}
#matchList .bs-row .ev   { grid-column: auto !important; }
#matchList .bs-row .o-1x2 {
  grid-column: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 6px !important;
  padding: 8px 4px !important;
  border-left: 0 !important;
}
#matchList .bs-row .o-tot {
  grid-column: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 6px !important;
  padding: 8px 8px 8px 4px !important;
  border-left: 0 !important;
}

@media (max-width: 1023px) {
  #matchList .bs-row {
    grid-template-columns: 1fr !important;
    min-height: auto;
  }
  #matchList .bs-row .o-1x2,
  #matchList .bs-row .o-tot {
    grid-column: 1 / -1 !important;
    padding: 4px 8px !important;
  }
}

/* ---- Featured cards: BB pill + LIVE pill on top row, 1/X/2 inside ---- */
#featuredStrip .bs-feat-card {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-shadow: var(--bs-shadow-sm);
}
#featuredStrip .bs-feat-card .feat-odds {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 6px !important;
  margin-top: 4px;
}
#featuredStrip .bs-feat-card .text-white { color: var(--bs-text) !important; font-weight: 700 !important; }
#featuredStrip .bs-feat-card .text-emerald-400 { color: var(--bs-text) !important; }

/* The legacy sub-header column-codes row was deleted in HTML; if any
   leftover rule was applied to it we no longer need it. */


/* ============================================================
   STAGE 7 — Full-width layout + BETSLIP empty-state to match
   the target screenshot exactly.
   ============================================================ */

/* ---- App shell: full-width (no 1700px container) ---- */
.bs-app {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Header bar should also stretch */
header.sticky.top-0 > .max-w-\[1700px\],
header.sticky.top-0 .max-w-\[1700px\] {
  max-width: 100% !important;
}

/* Slightly tighter gutters at very wide screens */
@media (min-width: 1400px) {
  .bs-app { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---- Betslip card frame: white card, gold header ---- */
#slipSheet > .glass {
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-r-lg) !important;
  box-shadow: var(--bs-shadow-sm) !important;
}

/* Header bar (gold) */
#slipSheet > .glass > div.bg-gradient-to-r {
  background: var(--bs-accent) !important;
  border-bottom: 0 !important;
  border-radius: var(--bs-r-lg) var(--bs-r-lg) 0 0 !important;
  padding: 12px 14px !important;
}
#slipSheet h3.gold {
  color: var(--bs-accent-ink) !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
}
#slipSheet h3.gold .fa-receipt { color: var(--bs-accent-ink) !important; }
#slipSheet #slipCount {
  background: var(--bs-surface) !important;
  color: var(--bs-accent-ink) !important;
  border: 1px solid rgba(0,0,0,.1);
}

/* Collapse "−" button */
.bs-slip-collapse {
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  color: var(--bs-accent-ink) !important;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}
.bs-slip-collapse:hover { background: rgba(0,0,0,.06) !important; }

/* ---- Tabs row (Seul / Multiple / Système) ---- */
#slipSheet > .glass > .grid.grid-cols-3 {
  background: var(--bs-surface) !important;
  border-bottom: 1px solid var(--bs-border) !important;
}
#slipSheet .bs-slip-tab {
  color: var(--bs-text-muted) !important;
  border-color: transparent !important;
  padding: 10px 0 !important;
  font-weight: 700 !important;
  position: relative;
}
#slipSheet .bs-slip-tab.active,
#slipSheet .bs-slip-tab.gold {
  background: transparent !important;
  color: var(--bs-primary-strong) !important;
  box-shadow: none !important;
}
#slipSheet .bs-slip-tab.active::after,
#slipSheet .bs-slip-tab.gold::after {
  content: "";
  position: absolute; left: 14%; right: 14%; bottom: 0;
  height: 2.5px;
  background: var(--bs-accent);
}

/* ---- EMPTY STATE (matches target image exactly) ---- */
#slipSheet #slipItems {
  background: var(--bs-surface) !important;
  padding: 0 !important;
  max-height: none !important;
}
.bs-slip-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 28px 16px 24px !important;
  background: var(--bs-surface) !important;
  text-align: center;
  list-style: none;
}
.bs-slip-empty__icon {
  font-size: 44px !important;
  color: #9ca3af !important;
  opacity: .9;
}
.bs-slip-empty__text {
  font-size: 13px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
}
.bs-slip-empty__btn {
  margin-top: 4px;
  background: var(--bs-surface) !important;
  border: 1px solid var(--bs-border) !important;
  color: var(--bs-text) !important;
  border-radius: var(--bs-r) !important;
  padding: 10px 22px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.bs-slip-empty__btn:hover {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

/* Hide the controls/footer blocks while empty so the empty state
   looks like the target (icon + text + Enter Booking Code button) */
#slipSheet > .glass:has(#slipItems > .bs-slip-empty) > .grid.grid-cols-3,
#slipSheet > .glass:has(#slipItems > .bs-slip-empty) > #slipSystemBox,
#slipSheet > .glass:has(#slipItems > .bs-slip-empty) > .px-3.py-1\.5,
#slipSheet > .glass:has(#slipItems > .bs-slip-empty) > .px-3.py-2,
#slipSheet > .glass:has(#slipItems > .bs-slip-empty) > .p-3.space-y-2 {
  display: none !important;
}

/* ---- Right-column gaps between cards ---- */
.col-span-12.lg\:col-span-3 > .rs-card,
.col-span-12.lg\:col-span-3 > #slipSheet,
.col-span-12.xl\:col-span-3 > .rs-card,
.col-span-12.xl\:col-span-3 > #slipSheet {
  margin-bottom: 10px;
}

/* ---- Popular bets rows ---- */
.rs-popular__list { background: var(--bs-surface); }
.rs-popular__row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bs-divider);
}
.rs-popular__row:last-child { border-bottom: 0; }
.rs-popular__icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bs-surface-2);
  color: var(--bs-text);
  font-size: 14px;
  flex: 0 0 auto;
}
.rs-popular__main { flex: 1 1 auto; min-width: 0; }
.rs-popular__teams {
  font-size: 12px; font-weight: 600;
  color: var(--bs-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-popular__market { font-size: 11px; color: var(--bs-text-soft); margin-top: 1px; }
.rs-popular__odds {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex: 0 0 auto;
}
.rs-popular__code { font-size: 11px; font-weight: 700; color: var(--bs-primary-strong); }
.rs-popular__val  { font-size: 13px; font-weight: 800; color: var(--bs-text); }

/* ---- Place-bet CTA: teal, larger like target ---- */
#placeBtn,
#slipSheet a[href$="login.php"] {
  background: #0d5f50 !important;
  color: #fff !important;
  border-radius: var(--bs-r) !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  letter-spacing: .1em !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}
#placeBtn:hover:not(:disabled),
#slipSheet a[href$="login.php"]:hover { background: #0a4f43 !important; }

/* "Use rapid mode" + "Bet Code" pill inside right column */
.rs-card__body .bs-rapid-mode { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bs-text); }