/* ============================================================
   SCORR - THEME.CSS
   Global CSS variable system - dark mode (default) + light mode
   Imported by every page on the site.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500&display=swap');

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

/* ── DARK MODE (default) ─────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:            #0d0d0d;
  --bg-surface:    #1a1a1a;
  --bg-elevated:   #222222;

  /* Borders */
  --border:        #333333;
  --border-strong: #444444;

  /* Text */
  --text:          #e8e8e8;
  --text-sub:      #999999;
  --text-muted:    #666666;

  /* Brand */
  --gold:          #C9A84C;
  --gold-dim:      rgba(201, 168, 76, 0.12);
  --gold-border:   rgba(201, 168, 76, 0.2);
  --on-gold:       #0d0d0d;   /* text colour placed on top of a gold background */

  /* Status colours (same both modes, kept here for consistency) */
  --success:       #2ECC71;
  --danger:        #E74C3C;
  --live:          #2ECC71;
  --live-bg:       rgba(46, 204, 113, 0.12);

  /* Shadow */
  --shadow:        0 8px 28px rgba(0, 0, 0, 0.5);
  --page-shadow:   0 0 60px rgba(0, 0, 0, 0.8);
  --card-shadow:   none;
}
/* ── LIGHT MODE (toggled via body.light) ─────────────────────── */
body.light {
  --bg:            #f2f0ec;
  --bg-surface:    #ffffff;
  --bg-elevated:   #e9e6df;

  --border:        #ddd8ce;
  --border-strong: #c7c1b4;

  --text:          #111111;
  --text-sub:      #4d4d4d;
  --text-muted:    #808080;

  --gold:          #A6791E;
  --gold-dim:      rgba(166, 121, 30, 0.10);
  --gold-border:   rgba(166, 121, 30, 0.4);
  --on-gold:       #0d0d0d;

  --success:       #1e8449;
  --danger:        #c0392b;
  --live:          #1e8449;
  --live-bg:       rgba(30, 132, 73, 0.10);

  --shadow:        0 8px 28px rgba(0, 0, 0, 0.08);
  --page-shadow:   0 0 40px rgba(0, 0, 0, 0.06);
  --card-shadow:   0 1px 3px rgba(0, 0, 0, 0.08);
}
/* ── TYPOGRAPHY SCALE ─────────────────────────────────────────── */
:root {
  --font-display: 'Barlow Condensed', sans-serif;  /* headings, nav, labels */
  --font-body:    'Barlow', sans-serif;             /* paragraphs, body copy */

  --h1-size:  clamp(28px, 5vw, 44px);
  --h2-size:  clamp(20px, 3vw, 28px);
  --h3-size:  18px;
  --body-size: 15px;
  --small-size: 13px;

  --tracking-tight: 1px;
  --tracking-wide:  2px;
}

/* ── LAYOUT VARIABLES ─────────────────────────────────────────── */
:root {
  --max-width:  900px;

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  --radius:     8px;
  --radius-sm:  4px;
}

/* ── BASE STYLES ──────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.5;
  transition: background 0.3s, color 0.3s;
}

h1, h2, h3, .heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--gold);
}

h1 { font-size: var(--h1-size); font-weight: 800; letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--h2-size); font-weight: 700; letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--h3-size); font-weight: 600; letter-spacing: var(--tracking-tight); }

.sub-label {
  font-family: var(--font-display);
  font-size: var(--small-size);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-sub);
  margin-top: var(--space-sm);
}
a { color: var(--gold); text-decoration: none; }

.page {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) 90px var(--space-md);
  background: var(--bg);
  box-shadow: var(--page-shadow);
  transition: background 0.3s, box-shadow 0.3s;
  min-height: 100vh;
}

@media (max-width: 480px) {
  .page {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}
/* ── SCHEDULE / FIXTURE ROWS ──────────────────────────────────── */
.schedule-day-header {
  font-family: var(--font-display);
  font-size: var(--small-size);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  box-shadow: var(--card-shadow);
}

.schedule-teams {
  font-family: var(--font-body);
  font-size: var(--body-size);
  color: var(--text);
}

.schedule-score {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.match-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--gold);
  white-space: nowrap;
}

.match-status {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── STANDINGS TABLE TIER BACKGROUNDS ─────────────────────────── */
/* These four tiers are generic and reused across every competition.
   Which POSITIONS map to which tier is NOT decided here - that logic
   lives in each competition's config/render code (e.g. EPL: top 4 =
   ucl, 5th = europa; Champions League itself: top 8 = ucl,
   9th-24th = a playoff tier). Never hardcode a league's position
   thresholds into this CSS file. */
:root {
  --tier-ucl:            #3498DB;  /* Champions League - solid accent */
  --tier-europa:         #F1C40F;  /* Europa League - solid accent */
  --tier-conference:     #27AE60;  /* Conference League - solid accent */
  --tier-relegation:     #C0392B;  /* Relegation zone - solid accent */

  --tier-ucl-bg:         rgba(52, 152, 219, 0.11);
  --tier-europa-bg:      rgba(241, 196, 15, 0.11);
  --tier-conference-bg:  rgba(39, 174, 96, 0.11);
  --tier-relegation-bg:  rgba(192, 57, 43, 0.12);
}

body.light {
  --tier-ucl-bg:         rgba(52, 152, 219, 0.09);
  --tier-europa-bg:      rgba(241, 196, 15, 0.10);
  --tier-conference-bg:  rgba(39, 174, 96, 0.09);
  --tier-relegation-bg:  rgba(192, 57, 43, 0.09);
}

.tier-row--ucl        { background: var(--tier-ucl-bg); }
.tier-row--europa     { background: var(--tier-europa-bg); }
.tier-row--conference { background: var(--tier-conference-bg); }
.tier-row--relegation { background: var(--tier-relegation-bg); }

/* ── LIVE STATUS ──────────────────────────────────────────────── */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--live);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: live-pulse 1.5s ease-in-out infinite;
}

.live-score {
  color: var(--live);
  animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ── MODE TOGGLE BUTTON (nav) ─────────────────────────────────── */
.mode-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--gold);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.mode-toggle:hover {
  border-color: var(--gold-border);
}

.mode-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

/* Show the sun icon in dark mode (invites switching to light),
   show the moon icon in light mode (invites switching to dark) */
.mode-toggle .icon-moon { display: none; }
body.light .mode-toggle .icon-sun  { display: none; }
body.light .mode-toggle .icon-moon { display: block; }

/* ── SESSION 9: TOGGLE CONTROLS (switch style) ───────────────── */
.controls-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.switch {
  display: grid;
  grid-template-columns: 90px 55px auto 55px;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  user-select: none;
}
.switch-label-left {
  text-align: right;
}
.switch-label-right {
  text-align: left;
}
.switch:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.switch-caption {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-right: 2px;
}
.switch-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
}
.switch-label.active { color: var(--text); }
.switch-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  position: relative;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.switch-track.on { background: var(--gold); border-color: var(--gold); }
.switch-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s, background 0.2s;
}
.switch-track.on .switch-thumb {
  transform: translateX(16px);
  background: var(--on-gold);
}

/* Hide scores: blank out the score and status, keep kickoff time.
   The score itself stays visibility:hidden (keeps its layout space),
   and a "VS" label is overlaid in the same spot via ::after. */
body.hide-scores .match-score,
body.hide-scores .status-badge {
  visibility: hidden;
}

body.hide-scores .match-score-wrap {
  position: relative;
}

body.hide-scores .match-score-wrap::after {
  content: "v";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  visibility: visible;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-sub);
}

/* Session 18g fix: the two-column stacked card (Session 18c redesign,
   competition.html's .match-stack / .stack-score / .match-stack-status)
   uses a completely different DOM structure from the single-column
   .match-main layout above - the original hide-scores rules only ever
   targeted .match-score / .status-badge / .match-score-wrap, none of
   which exist inside .match-stack, so hide-scores silently did nothing
   in two-column mode. These mirror the same behaviour for the stacked
   card's own classes. Note .match-stack-status is reused for BOTH the
   kickoff time (NS fixtures) and the live/finished status badge -
   only the status/badge case should hide, so this is scoped to
   .is-live or a finished match, not a plain kickoff-time row.
   Single-column is untouched by any of this. */
body.hide-scores .stack-score {
  visibility: hidden;
}

body.hide-scores .match-row.is-live .match-stack-status,
body.hide-scores .match-row[data-status="FT"] .match-stack-status,
body.hide-scores .match-row[data-status="AET"] .match-stack-status,
body.hide-scores .match-row[data-status="PEN"] .match-stack-status {
  visibility: hidden;
}

/* Hide completed: remove finished match rows entirely */
body.hide-completed .match-row[data-status="FT"],
body.hide-completed .match-row[data-status="AET"],
body.hide-completed .match-row[data-status="PEN"] {
  display: none;
}

/* Layout toggle: desktop-only switch, desktop-only two-column grid */
#layout-toggle { display: none; }
@media (min-width: 768px) {
  #layout-toggle { display: grid; }

  body.layout-double #schedule {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    /* Bug fix (World Cup follow-up session, 12 July 2026): default grid
       align-items is stretch, which forces every card sharing a grid
       row to match the height of the tallest one. That meant expanding
       one match's event panel visually "grew" its unrelated row-
       sibling too, even though the sibling had no new content - just
       empty stretched space filling the gap. align-items: start lets
       each card size to its own content independently, so only the
       card that's actually expanded grows. */
    align-items: start;
  }
  body.layout-double #schedule .day-header {
    grid-column: 1 / -1;
  }
  body.layout-double #schedule .match-row {
    margin-top: 0;
  }
  /* When a team filter is active, the shared date header forces a new
     grid row every time - with only ~1 match per date left visible,
     that leaves one column full and the other empty. Hide the shared
     headers in this case and let matches flow freely into both
     columns; each card shows its own date inline instead (see
     .row-date-label in competition.html). Unfiltered view is untouched. */
 body.layout-double.team-filtered #schedule .day-header {
    display: none;
  }
}

/* Session 15 fix: mobile gets the same treatment as desktop's
   two-column team-filtered view - hide the shared date header and
   rely on each row's own inline date label, so a filtered team's
   fixtures don't show the date twice. */
@media (max-width: 767px) {
  body.team-filtered #schedule .day-header {
    display: none;
  }
}

/* ── SESSION 9: TODAY'S MATCHES FLOATING BUTTON ──────────────── */
.jump-btn {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--gold);
  color: var(--on-gold);
  border: none;
  border-radius: 20px;
  padding: 10px 22px;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 1000;
  transition: opacity 0.2s;
}
.jump-btn:hover { opacity: 0.85; }

/* ── SESSION 10: SITE NAV (page-to-page navigation) ─────────────── */
.site-nav {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-sm) 0;
  position: sticky;
  top: 0;
  z-index: 110;
}
.site-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: 0 var(--space-md);
}
.site-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.site-nav-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-sub);
  transition: color 0.2s;
}
.site-nav-link:hover,
.site-nav-link.active {
  color: var(--gold);
}
.site-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--gold);
}
.site-wordmark:hover {
  opacity: 0.85;
}
/* Hamburger button - hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--gold);
  border-radius: 1px;
}

/* Mobile: swap link row for hamburger */
@media (max-width: 600px) {
  .site-nav { display: none; }
}

/* ── SESSION 10 FIX: mobile hamburger lives in the page header itself ── */
.mobile-nav-wrap {
  display: none;
  position: relative;
}
.mobile-nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.mobile-nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--gold);
  border-radius: 1px;
}
.mobile-nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  width: 260px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  flex-direction: column;
  gap: var(--space-md);
  z-index: 500;
  box-shadow: var(--shadow);
}
.mobile-nav-dropdown.open { display: flex; }

@media (max-width: 600px) {
  .mobile-nav-wrap { display: block; }
}

/* ── SESSION 18d: NAV COMPETITIONS DROPDOWN (desktop hover) ──────
   Sits inside .site-nav-links, wrapping the existing "Competitions"
   link. The link keeps navigating to index-dev.html as before -
   this menu is a hover-only enhancement layered on top, populated
   by window.ScorrCompetitions.renderNavDropdown() (js/competitions.js).
   Mobile equivalent (tap-driven, inside .mobile-nav-dropdown) is a
   later step - this block is desktop-only via the :hover trigger,
   but is not itself media-query-gated since .site-nav already
   disappears below 600px. */
.nav-comp-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-comp-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  max-width: 300px;
  max-height: 440px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-sm) calc(var(--space-sm) + 4px) var(--space-sm) var(--space-sm);
  z-index: 500;
  /* Firefox thin scrollbar matching theme instead of default chrome */
  scrollbar-width: thin;
  scrollbar-color: var(--gold-border) transparent;
}
.nav-comp-menu::-webkit-scrollbar {
  width: 6px;
}
.nav-comp-menu::-webkit-scrollbar-track {
  background: transparent;
}
.nav-comp-menu::-webkit-scrollbar-thumb {
  background: var(--gold-border);
  border-radius: 3px;
}
.nav-comp-dropdown:hover .nav-comp-menu,
.nav-comp-dropdown:focus-within .nav-comp-menu {
  display: block;
}
.nav-comp-section-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 8px 4px;
}
.nav-comp-link {
  display: block;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: var(--small-size);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  border-radius: var(--radius-sm);
}
.nav-comp-link:hover {
  background: var(--gold-dim);
  color: var(--gold);
}
.nav-comp-country-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: var(--small-size);
  font-weight: 400;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-comp-country-toggle:hover {
  background: var(--gold-dim);
  color: var(--gold);
}
.nav-comp-country-toggle .nav-chevron {
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.nav-comp-country-toggle[aria-expanded="true"] .nav-chevron {
  transform: rotate(90deg);
}
.nav-comp-country-list {
  display: none;
  padding-left: 12px;
}
.nav-comp-country-list.open {
  display: block;
}
.nav-comp-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-sm) 0;
}
.nav-comp-empty {
  font-family: var(--font-body);
  font-size: var(--small-size);
  color: var(--text-sub);
  padding: 6px 8px;
}

/* ── SESSION 18d (mobile step): tap-to-expand Competitions inside
   .mobile-nav-dropdown. Reuses .nav-comp-section-label / .nav-comp-link /
   .nav-comp-country-toggle / .nav-comp-country-list / .nav-comp-divider /
   .nav-comp-empty from the desktop dropdown above - only the outer
   container differs, since mobile needs an inline expanding block
   rather than an absolutely positioned floating menu. ─────────── */
.nav-mobile-comp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.nav-mobile-comp-row .nav-mobile-comp-link {
  flex: 1;
}
.nav-mobile-comp-chevron-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--gold);
  transition: border-color 0.2s, background 0.2s;
}
.nav-mobile-comp-chevron-btn:hover,
.nav-mobile-comp-chevron-btn:active {
  border-color: var(--gold-border);
  background: var(--gold-dim);
}
.nav-mobile-comp-chevron-btn .nav-chevron {
  transition: transform 0.2s ease;
}
.nav-mobile-comp-chevron-btn[aria-expanded="true"] .nav-chevron {
  transform: rotate(90deg);
}
.nav-mobile-comp-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--border);
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-border) transparent;
}
.nav-mobile-comp-menu::-webkit-scrollbar {
  width: 6px;
}
.nav-mobile-comp-menu::-webkit-scrollbar-track {
  background: transparent;
}
.nav-mobile-comp-menu::-webkit-scrollbar-thumb {
  background: var(--gold-border);
  border-radius: 3px;
}
.nav-mobile-comp-menu.open {
  display: flex;
}

/* ── SESSION 10: TEAM / VENUE FILTERS ────────────────────────────── */
.filter-bar {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.filter-clear-btn {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  font-size: var(--small-size);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.filter-clear-btn:hover {
  background: var(--gold);
  color: var(--on-gold);
}
.filter-select {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--small-size);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.filter-select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.match-row.filtered-out {
  display: none;
}
/* ── SESSION 11: HIGHLIGHT MODE ──────────────────────────────── */
:root {
  --highlight-1:     #9B59B6;  /* purple */
  --highlight-2:     #E67E22;  /* orange */
  --highlight-3:     #3498DB;  /* blue */
  --highlight-4:     #E84393;  /* pink */

  --highlight-1-bg:  rgba(155, 89, 182, 0.14);
  --highlight-2-bg:  rgba(230, 126, 34, 0.14);
  --highlight-3-bg:  rgba(52, 152, 219, 0.14);
  --highlight-4-bg:  rgba(232, 67, 147, 0.14);
}

body.light {
  --highlight-1:     #8E44AD;
  --highlight-2:     #CA6F1E;
  --highlight-3:     #2E86C1;
  --highlight-4:     #C2185B;

  --highlight-1-bg:  rgba(142, 68, 173, 0.10);
  --highlight-2-bg:  rgba(202, 111, 30, 0.10);
  --highlight-3-bg:  rgba(46, 134, 193, 0.10);
  --highlight-4-bg:  rgba(194, 24, 91, 0.10);
}

/* Right-side border + tint, deliberately not left border, so it never
   competes visually with .is-live's left border or the pulsing score */
.match-row.highlight-1 { background: var(--highlight-1-bg); border-right: 4px solid var(--highlight-1); }
.match-row.highlight-2 { background: var(--highlight-2-bg); border-right: 4px solid var(--highlight-2); }
.match-row.highlight-3 { background: var(--highlight-3-bg); border-right: 4px solid var(--highlight-3); }
.match-row.highlight-4 { background: var(--highlight-4-bg); border-right: 4px solid var(--highlight-4); }

/* Highlight controls row (dropdown + button + pills) */
.highlight-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: var(--small-size);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--text);
}
.highlight-pill-1 { background: var(--highlight-1-bg); border: 1px solid var(--highlight-1); }
.highlight-pill-2 { background: var(--highlight-2-bg); border: 1px solid var(--highlight-2); }
.highlight-pill-3 { background: var(--highlight-3-bg); border: 1px solid var(--highlight-3); }
.highlight-pill-4 { background: var(--highlight-4-bg); border: 1px solid var(--highlight-4); }
.highlight-pill-remove {
  cursor: pointer;
  font-weight: 800;
  color: var(--text-muted);
}
.highlight-pill-remove:hover { color: var(--danger); }
.highlight-msg {
  font-family: var(--font-body);
  font-size: var(--small-size);
  color: var(--text-muted);
}
/* ── SESSION 13: FLOATING CONTROLS PANEL (mobile only) ───────── */
.controls-panel-toggle {
  display: none;
}

@media (max-width: 767px) {
  .controls-float {
    position: fixed;
    top: var(--space-sm);
    left: var(--space-md);
    right: var(--space-md);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .controls-panel-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    color: var(--gold);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--small-size);
    padding: 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: var(--shadow);
  }

.controls-panel {
    display: none;
    flex-direction: column;
    gap: var(--space-md);
    max-height: 65vh;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-sm);
    box-shadow: var(--shadow);
  }

  .controls-panel.open {
    display: flex;
  }
}
/* ── SESSION 13: TAB BAR ──────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
   top: calc(var(--nav-h, 0px) + var(--header-h, 0px));
  z-index: 90;
}
.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-sm) 2px;
  margin-bottom: -1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-sub);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.tab:hover:not(.disabled) {
  color: var(--text);
}

.tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.tab.disabled {
  color: var(--text-muted);
  cursor: default;
  opacity: 0.5;
}

/* ── Session 25 (18 July 2026): nav team-search styles ──────────────
   Moved here from four identical per-page copies (index-dev,
   competition, team, competitions) when the search input surfaced
   UNSTYLED on about-dev/privacy - the nav component injects the
   markup on every page, so its styles belong in the shared sheet,
   not in per-page <style> blocks. Do not re-add page copies. */
.nav-team-search-wrap {
  position: relative;
}
.nav-team-search-input {
  width: 150px;
  box-sizing: border-box;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
}
.nav-team-search-wrap-mobile .nav-team-search-input {
  width: 100%;
  /* iOS zoom-on-focus fix - any font-size under 16px triggers it. */
  font-size: 16px;
}
.nav-team-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--card-shadow);
  max-height: 220px;
  overflow-y: auto;
  z-index: 200;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-border) transparent;
}
.nav-team-search-results.open {
  display: block;
}
.nav-team-search-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--body-size);
  cursor: pointer;
}
.nav-team-search-result:hover {
  background: var(--gold-dim);
}
.nav-team-search-empty {
  padding: 8px 12px;
  color: var(--text-muted);
  font-size: var(--small-size);
}

/* ── Session 25 (18 July 2026): UEFA crest legibility - the uefa-crest chip.
   UCL/UEL/UECL artwork is dark navy on transparent and all but vanishes
   on the dark surface (Andy's screenshots, 16 July). Fix: a soft
   OFF-WHITE chip behind those three crests, DARK MODE ONLY - light mode
   renders them fine. Andy's choice 18 July: UEFA-only (not all crests),
   off-white not match-card grey - the grey is barely lighter than the
   page background, so navy-on-grey would still vanish; the chip must be
   light to do its job, and 242/242/242 avoids pure-white glare.
   HOW without config flags (the Section 12.11 drift trap the S25 spec
   warned about): each competition's crest is a unique api-sports asset -
   UCL=leagues/2.png, UEL=leagues/3.png, UECL=leagues/848.png - so the
   CSS targets the image URL itself. No manifest fields, no per-comp
   knowledge outside this block. Covers every place comp crests render
   today: dashboard group titles, competitions-page cards, team-page
   comp badges. If a fourth dark crest ever appears, add its asset URL
   here - one line, still no flags. (18 July evening: + .dash-card-comp-crest,
   the per-card comp line added to dashboard match cards.) */
body:not(.light) .dash-group-crest[src$="leagues/2.png"],
body:not(.light) .dash-group-crest[src$="leagues/3.png"],
body:not(.light) .dash-group-crest[src$="leagues/848.png"],
body:not(.light) .comp-card-crest[src$="leagues/2.png"],
body:not(.light) .comp-card-crest[src$="leagues/3.png"],
body:not(.light) .comp-card-crest[src$="leagues/848.png"],
body:not(.light) .team-match-comp-crest[src$="leagues/2.png"],
body:not(.light) .team-match-comp-crest[src$="leagues/3.png"],
body:not(.light) .team-match-comp-crest[src$="leagues/848.png"],
body:not(.light) .dash-card-comp-crest[src$="leagues/2.png"],
body:not(.light) .dash-card-comp-crest[src$="leagues/3.png"],
body:not(.light) .dash-card-comp-crest[src$="leagues/848.png"] {
  background: rgba(242, 242, 242, 0.92);
  border-radius: 4px;
  padding: 2px;
  box-sizing: content-box;
}