/* ============================================================
   CSS CUSTOM PROPERTIES — Dark (default) + Light theme
   ============================================================ */
:root,
[data-theme="dark"] {
    --primary:        #f56a6a;
    --primary-hover:  #f78b8b;
    --bg:             #0f172a;
    --bg-card:        rgba(30, 41, 59, 0.7);
    --sidebar-bg:     rgba(15, 23, 42, 0.95);
    --topbar-bg:      rgba(13, 20, 38, 0.97);
    --text:           #f8fafc;
    --text-muted:     #94a3b8;
    --border:         rgba(255, 255, 255, 0.1);
    --success:        #10b981;
    --warning:        #f59e0b;
    --danger:         #ef4444;
    --accent:         #3b82f6;
    --select-bg:      #0f172a;
    --row-hover:      rgba(255, 255, 255, 0.025);
    --filter-bg:      rgba(255, 255, 255, 0.02);
    --th-bg:          rgba(255, 255, 255, 0.03);
    --th-sticky-bg:   #111827;   /* solid — required for position:sticky */
    --card-shadow:    rgba(0, 0, 0, 0.3);
    --topbar-height:  56px;      /* desktop default (2-row topbar overrides in @media) */
}

[data-theme="light"] {
    --bg:             #f1f5f9;
    --bg-card:        rgba(255, 255, 255, 0.95);
    --sidebar-bg:     rgba(255, 255, 255, 0.98);
    --topbar-bg:      rgba(255, 255, 255, 0.97);
    --text:           #0f172a;
    --text-muted:     #64748b;
    --border:         rgba(0, 0, 0, 0.1);
    --select-bg:      #ffffff;
    --row-hover:      rgba(0, 0, 0, 0.02);
    --filter-bg:      rgba(0, 0, 0, 0.02);
    --th-bg:          rgba(0, 0, 0, 0.03);
    --th-sticky-bg:   #e8eef6;
    --card-shadow:    rgba(0, 0, 0, 0.08);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
    transition: background-color 0.25s, color 0.25s;
}

/* ============================================================
   MOBILE TOP BAR  (hidden on desktop, visible <= 1024px)
   ============================================================ */
.mobile-topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    z-index: 1050;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    justify-content: space-between;
    padding: 0 0.875rem;
    transition: background 0.25s, border-color 0.25s;
}

.topbar-logo-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    line-height: 0;
}
.topbar-logo {
    height: 28px;
    display: block;
}

.topbar-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 38px;
    height: 38px;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.topbar-btn:hover {
    background: var(--border);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Desktop: let the sidebar grow with its content and scroll along with
       the main page (no inner scrollbar, no sticky/viewport clip). The
       parent .container is display:flex so align-items defaults to stretch
       and the bordered column still spans the full page height visually.
       Mobile @media below switches it back to a fixed off-canvas drawer
       with its own overflow so short phones can still scroll the menu. */
    min-height: 100vh;
    padding: 1.75rem 1.5rem;
    transition: transform 0.3s ease, background 0.25s, border-color 0.25s;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.logo img {
    height: 36px;
}

/* ============================================================
   THEME SWITCHER  (inside sidebar)
   ============================================================ */
.theme-switcher {
    display: flex;
    gap: 6px;
}

.theme-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0.45rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}

.theme-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.theme-btn:hover:not(.active) {
    background: var(--border);
    color: var(--text);
}

/* Mobile topbar icon: sun in dark mode (click to go light),
   moon in light mode (click to go dark).                    */
.icon-sun  { display: inline-block; }
.icon-moon { display: none; }

[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: inline-block; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav-group {
    margin-bottom: 1.75rem;
}

.nav-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    color: var(--text);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s;
    font-size: 0.875rem;
    margin-bottom: 0.2rem;
    cursor: pointer;
    user-select: none;
}

/* When .nav-link is rendered as <button> (collapsible openers), browsers apply
   their own button styling — reset font, background, border, alignment so the
   text inherits the readable --text color (the dark theme "Moneyway" was
   showing in the system buttontext color, which barely contrasted with the
   sidebar background). */
button.nav-link {
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    font: inherit;
    color: var(--text);
    line-height: inherit;
}

.nav-link:hover,
.nav-link.active {
    background: var(--border);
    color: var(--primary);
}

.nav-link.opener {
    justify-content: space-between;
}

.nav-link.opener::after {
    content: ">";
    font-size: 1.1rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.nav-link.opener.active::after {
    transform: rotate(90deg);
}

.nav-submenu {
    display: none;
    padding-left: 1.25rem;
    margin-bottom: 0.25rem;
}

.nav-submenu.active {
    display: block;
}

.nav-submenu .nav-link {
    padding: 0.45rem 0.875rem;
    font-size: 0.83rem;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
    flex: 1;
    min-width: 0; /* critical: prevents flex child from overflowing viewport */
    padding: 2rem 3rem;
}

.header {
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Short marketing intro under the H1. Pulled from seo-meta-trans.php. */
.page-intro {
    margin: -1.5rem 0 2rem;
    max-width: 75ch;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.page-intro[hidden] { display: none; }

/* Modifier when the intro is rendered after the data table (SEO copy block).
   No negative top-margin (it's not hugging an H1 anymore) and a softer tone
   so it reads as supporting content rather than a header lead. */
.page-intro--below {
    margin: 1.5rem 0 0;
    font-size: 0.875rem;
    opacity: 0.9;
}

h1 {
    font-size: 1.875rem;
    font-weight: 700;
    background: linear-gradient(to right, var(--text), var(--text-muted));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
   CARD
   ============================================================ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    overflow: hidden;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 10px 25px -5px var(--card-shadow);
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--filter-bg);
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.filter-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.select-input {
    background: var(--select-bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.45rem 0.875rem;
    border-radius: 0.4rem;
    outline: none;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}

/* Search box — realtime client-side row filter. Sits at the end of the
   filter bar after Sorting; on wide screens grows to fill the remaining
   space, on phones it just wraps onto its own line like every other
   .filter-group. */
.filter-group--search { flex: 1 1 220px; min-width: 180px; }
.search-input {
    cursor: text;
    width: 100%;
}
.search-input::-webkit-search-cancel-button { cursor: pointer; }

/* ============================================================
   DATA TABLE
   ============================================================ */
.data-table-container {
    /* No overflow here — position:sticky on thead must bind to the page viewport,
       not to a scrolling ancestor. The League column auto-hides on small phones.
       Wide multi-outcome markets (HT/FT = 9 cols, Correct Score = 19 cols)
       opt into horizontal scroll instead of overflowing the layout. */
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Wide-table mode: 4+ runner markets (HT/FT, Correct Score, …).
   Force a min-width so the runner columns keep their natural size and the
   container's horizontal scroller actually engages on typical viewports.
   Headers/cells get nowrap so labels like "1/1" don't wrap into two lines.
   Slightly smaller font + tighter padding to push more outcomes into view
   before the user has to reach for the horizontal scrollbar. */
.data-table-container.wide-table .data-table {
    min-width: 1100px;
    font-size: 0.78rem;
}
.data-table-container.wide-table .data-table th,
.data-table-container.wide-table .data-table td {
    white-space: nowrap;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}
.data-table-container.wide-table .data-table th.odds-col,
.data-table-container.wide-table .data-table td.mw-td,
.data-table-container.wide-table .data-table td.do-cell-wrap {
    min-width: 58px;
}
.data-table-container.wide-table .mw-odds   { font-size: 0.78rem; padding: 0.2rem 0.3rem; }
.data-table-container.wide-table .mw-share  { font-size: 0.7rem;  padding: 0.15rem 0.25rem; }
.data-table-container.wide-table .mw-odds-stack { min-width: 56px; }

/* Synced top scrollbar for wide tables — mirrors the bottom horizontal
   scrollbar so users on tall pages don't have to scroll down past dozens of
   rows just to find the scroll handle. Built from a slim wrapper that holds
   a 1-pixel-tall <div> matching the data table's natural width; JS keeps the
   two scroll positions in lockstep (see wireWideTableTopScroll() in app.js).
   Only shown when .wide-table is active. */
.wide-scroll-top {
    display: none;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4px;
}
.wide-scroll-top > div { height: 1px; }
.data-table-container.wide-table + .wide-scroll-top,
.wide-scroll-top.is-active { display: block; }

/* Tighten odds-column padding so 9- and 19-outcome tables stay readable
   without forcing the row off-screen on mid-size monitors. */
.data-table th.odds-col,
.data-table td.mw-td,
.data-table td.do-cell-wrap {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

/* Desktop: shrink the table to its natural content width so the leftover
   horizontal space falls on the right side of the container (after the
   Volume/Links column) instead of being absorbed by the Date/Match cell
   and pushing the 1/X/2 odds columns off to the right. Mobile keeps the
   100% width so cells fill the viewport edge-to-edge as expected. The
   wide-table mode (HT/FT, Correct Score, …) still wins via its own
   min-width:1100px rule below, so multi-outcome markets are unaffected. */
@media (min-width: 768px) {
    .data-table-container:not(.wide-table) .data-table { width: auto; }
    .data-table-container:not(.wide-table) .data-table .col-event {
        max-width: none;
        width: 1%;
    }
}

.data-table th {
    text-align: left;
    padding: 0.55rem 0.55rem;
    background: var(--th-sticky-bg);
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table td {
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tr:hover td {
    background: var(--row-hover);
}

/* Merged Date / League cell — stacked: date on top, flag + league below.
   League name is clamped to a single ellipsised line so a verbose name like
   "Japanese J. League 100 Year Vision" can’t hijack horizontal space from the
   odds columns. Full name is exposed via the row’s title attribute on hover. */
.col-dl     { white-space: nowrap; max-width: 180px; }
.dl-stack   { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 0; }
.dl-date    { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }
.dl-league  { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text); min-width: 0; }
.dl-league img { flex-shrink: 0; }
.dl-league span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }

/* Merged Match cell — stacked: home on top, away below. */
.col-match     { max-width: 180px; }
.match-stack   { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; min-width: 0; }
.match-home    { font-weight: 600; font-size: 0.85rem; color: var(--text); }
.match-away    { font-weight: 500; font-size: 0.82rem; color: var(--text-muted); }
.match-stack > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ============================================================
   MERGED EVENT CELL (Date / Match column)
   Single column with two inner rows:
     row 1 — date + flag + league (league ellipsised, full name on hover)
     row 2 — "Home \2014 Away" (truncated with ellipsis when over-long)
   Replaces the old separate Date/League and Match columns to free horizontal
   space for odds. The whole cell carries title="<full league>" via the JS
   builder so the league name is always discoverable.
   ============================================================ */
.col-event { white-space: nowrap; max-width: 260px; cursor: pointer; }
.col-event:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0.25rem; }
.col-event:hover .ev-league,
.col-event:hover .ev-match { color: var(--accent); }
.ev-stack  { display: flex; flex-direction: column; gap: 3px; line-height: 1.25; min-width: 0; }
.ev-top    { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--text-muted); min-width: 0; }
.ev-date   { font-weight: 500; flex-shrink: 0; }
.ev-top img { flex-shrink: 0; }
.ev-league { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.ev-match  { font-size: 0.85rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ev-home, .ev-away { font-weight: 600; }
.ev-dash   { color: var(--text-muted); font-weight: 400; margin: 0 2px; }

/* ============================================================
   MERGED VOLUME / LINKS CELL
   Single column with two inner rows:
     row 1 — £ traded volume
     row 2 — chart + bet icons (Betfair odds-stats graph + exchange link)
   Replaces the old separate Volume column + Stats links column.
   ============================================================ */
.col-vl    { text-align: center; white-space: nowrap; width: 1%; padding-left: 0.4rem; padding-right: 0.4rem; }
.vl-stack  { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.2; }
.vl-vol    { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: var(--accent); font-size: 0.82rem; }
.vl-links  { display: flex; align-items: center; gap: 6px; }
.vl-links a { display: inline-flex; line-height: 1; opacity: 0.85; transition: opacity 0.15s ease-in-out; }
.vl-links a:hover { opacity: 1; }

/* ============================================================
   ODDS BOX & VOLUME
   ============================================================ */
.odds-box {
    text-align: center;
    border-radius: 0.3rem;
    padding: 0.35rem 0.4rem;
    font-weight: 600;
    min-width: 56px;
    white-space: nowrap;
}

/* ============================================================
   DROPPING-ODDS specifics — two-line cell (open over current),
   directional arrow, drop-% color map.
   Color thresholds match the legacy site:
     drop ≥7% red   |  drop 3–7% orange  |  drop <3% grey
     rise ≥7% green |  rise 3–7% lime    |  rise <3% lightgreen
   These colors are intentionally kept as fixed paint (not theme vars):
   the meaning of "red drop" must be identical in dark and light mode.
   ============================================================ */
.do-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.do-arrow {
    font-size: 0.95rem;
    line-height: 1;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.do-arrow.up   { color: #16a34a; }
.do-arrow.down { color: #dc2626; }
.do-arrow.eq   { color: var(--text-muted); font-weight: 700; }

.do-odds {
    text-align: center;
    border-radius: 0.3rem;
    padding: 0.25rem 0.45rem;
    font-weight: 600;
    min-width: 54px;
    line-height: 1.15;
    color: #0f172a; /* dark text always — backgrounds are bright */
}

.do-odds .open {
    display: block;
    font-size: 0.78rem;
    opacity: 0.75;
    text-decoration: line-through;
}

.do-odds .current {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
}

/* Legacy-matching color buckets */
.do-drop-high { background: #dc2626; color: #fff; }
.do-drop-mid  { background: #f97316; color: #fff; }
.do-drop-low  { background: #9ca3af; color: #fff; }
.do-rise-high { background: #16a34a; color: #fff; }
.do-rise-mid  { background: rgb(98, 245, 10); color: #0f172a; }
.do-rise-low  { background: #bbf7a4; color: #0f172a; }
.do-eq        { background: transparent; color: var(--text); border: 1px solid var(--border); }

/* ============================================================
   DO COLOR-MAP LEGEND
   ============================================================ */
.do-legend {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    font-size: 0.75rem;
}

.do-legend-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.do-legend-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.68rem;
    min-width: 140px;
}

.do-legend-swatch {
    padding: 0.2rem 0.6rem;
    border-radius: 0.3rem;
    font-weight: 600;
}

/* ============================================================
   ROW FILTERS — client-side numeric filters (Odds / Volume / %).
   Placed below the legend; same card surface so the controls feel
   integrated. Min/max text inputs reuse .select-input visual lang.
   ============================================================ */
.row-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    font-size: 0.78rem;
}
.row-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.row-filter-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
    font-weight: 600;
}
.row-filter-input {
    width: 70px;
    padding: 0.3rem 0.45rem;
    background: var(--select-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    font-size: 0.78rem;
    text-align: right;
    /* Hide spinner — users type, no scroll-spam edits. */
    -moz-appearance: textfield;
}
.row-filter-input::-webkit-outer-spin-button,
.row-filter-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.row-filter-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.row-filters-clear {
    margin-left: auto;
    padding: 0.35rem 0.8rem;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.row-filters-clear:hover { color: var(--text); border-color: var(--accent); }
@media (max-width: 480px) {
    .row-filters { font-size: 0.72rem; padding: 0.5rem 0.6rem; gap: 0.4rem 0.6rem; }
    .row-filter-input { width: 58px; padding: 0.25rem 0.35rem; font-size: 0.72rem; }
    .row-filters-clear { margin-left: 0; }
}

/* ============================================================
   MONEYWAY two-line cell — odds on top (blue if favorite),
   volume-% + £ on the bottom with graduated red→yellow buckets.
   Color buckets are intentionally fixed paint (not theme vars):
   "deep red 99 %+" must read identically in dark and light mode.
   ============================================================ */
.mw-td {
    padding: 0.25rem !important;
}

.mw-odds-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 64px;
}

.mw-odds {
    text-align: center;
    border-radius: 0.3rem 0.3rem 0 0;
    padding: 0.25rem 0.4rem;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--bg-muted, rgba(127,127,127,0.12));
    color: var(--text);
    line-height: 1.2;
}

.mw-odds.mw-fav {
    background: rgb(0, 162, 232);
    color: #ffffff;
}

.mw-share {
    text-align: center;
    border-radius: 0 0 0.3rem 0.3rem;
    padding: 0.2rem 0.35rem 0.3rem;
    line-height: 1.15;
    color: #0f172a;
}

.mw-share .mw-pct {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
}

.mw-share .mw-vol {
    display: block;
    font-size: 0.68rem;
    opacity: 0.85;
}

/* Graduated buckets — only ≥99% is the deep "danger" red.
   Lower bands progressively soften through orange and yellow.
   The two dark-red buckets are deliberately brighter than the legacy
   #b30000 / #e70000 so white text stays legible on the dark theme,
   and we drop the .mw-vol opacity dimming on those rows for the same
   reason (otherwise the £-amount line greys out into the bg). */
.mw-share-extreme   { background: #d40000; color: #fff; }
.mw-share-very-high { background: #ef2b2b; color: #fff; }
.mw-share-high      { background: #f97316; color: #fff; }
.mw-share-mid-high  { background: #fb923c; color: #1f2937; }
.mw-share-mid       { background: #fbbf24; color: #1f2937; }
.mw-share-mid-low   { background: #fde047; color: #1f2937; }
.mw-share-low       { background: #fef08a; color: #1f2937; }
.mw-share-very-low  { background: #fef9c3; color: #1f2937; }
.mw-share-none      { background: transparent; color: var(--text); }

/* Keep the £ sub-line at full opacity on dark backgrounds; the 0.85
   dim above is fine on yellow but invisible on red. */
.mw-share-extreme   .mw-vol,
.mw-share-very-high .mw-vol,
.mw-share-high      .mw-vol { opacity: 1; }

.vol-cell {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color: var(--accent);
    white-space: nowrap;
}

/* ============================================================
   OVERLAY
   ============================================================ */
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 900;
}

.overlay.active {
    display: block;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.35s ease-out forwards;
}

/* ============================================================
   RESPONSIVE — tablet / small laptop (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    /* Single-row topbar (day filter is now a <select> in the filter bar) */
    :root { --topbar-height: 56px; }

    .mobile-topbar {
        display: flex;
    }

    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        z-index: 1001;
        height: 100dvh;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4);
        /* Re-enable scrolling on the mobile drawer — short screens may need
           it even though the desktop sidebar suppresses overflow. */
        overflow-y: auto;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        padding: calc(var(--topbar-height) + 1rem) 0.75rem 1rem;
    }

    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        margin-bottom: 1rem;
    }

    h1 {
        font-size: 1.35rem;
    }
}

/* ============================================================
   RESPONSIVE — phone (<= 600px)
   ============================================================ */
@media (max-width: 600px) {
    .main-content {
        padding: calc(var(--topbar-height) + 0.625rem) 0.375rem 0.75rem;
    }

    .filter-bar {
        padding: 0.625rem;
        gap: 0.5rem;
    }

    .select-input {
        font-size: 0.78rem;
        padding: 0.35rem 0.4rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.35rem 0.4rem;
        font-size: 0.76rem;
    }

    .odds-box {
        min-width: 40px;
        padding: 0.2rem;
        font-size: 0.76rem;
    }

    h1 {
        font-size: 1.1rem;
    }

    .card {
        border-radius: 0.625rem;
    }
}

/* ============================================================
   RESPONSIVE — small phone (<= 480px)
   Keep all columns visible (league shows after Away). Allow horizontal
   scroll on the table container only (does NOT break sticky thead because
   the container is wider than the viewport, not constrained vertically).
   ============================================================ */
@media (max-width: 480px) {
    .data-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table th,
    .data-table td {
        padding: 0.3rem 0.3rem;
        font-size: 0.72rem;
    }
    .col-league {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .col-dl, .col-match { max-width: 110px; }
    .dl-league span, .match-stack > div { max-width: 110px; }
    .col-event { max-width: 170px; }
    .ev-league, .ev-match { max-width: 170px; }
    .vl-vol  { font-size: 0.74rem; }
    .vl-links img { width: 14px; height: 14px; }

    /* Dropping-Odds: shrink arrow + box + paddings so 1/X/2 all fit inside
       a phone viewport without horizontal scrolling. Matches the moneyway
       layout's tight footprint demonstrated in mobile-mw-ok.jpg. */
    .data-table td.do-cell-wrap,
    .data-table th.odds-col {
        padding-left: 0.15rem;
        padding-right: 0.15rem;
    }
    .do-cell        { gap: 2px; }
    .do-arrow       { font-size: 0.7rem; width: 9px; }
    .do-odds        { min-width: 38px; padding: 0.15rem 0.25rem; border-radius: 0.25rem; }
    .do-odds .open    { font-size: 0.62rem; }
    .do-odds .current { font-size: 0.78rem; }

    /* MW: trim odds box too so the same fitted feel survives narrow phones. */
    .mw-odds        { font-size: 0.78rem; padding: 0.2rem 0.3rem; }
    .mw-share       { font-size: 0.66rem; padding: 0.15rem 0.2rem; }
    .mw-odds-stack  { min-width: 50px; }
}

/* Bet/Chart links column — kept visible at every breakpoint, including phones.
   Tight padding so it doesn't steal space from the odds columns. */
.data-table th.tbet,
.data-table td.tbet {
    text-align: center;
    white-space: nowrap;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    width: 1%;
}
.data-table td.tbet a {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    opacity: 0.85;
    transition: opacity 0.15s ease-in-out;
}
.data-table td.tbet a:hover { opacity: 1; }

/* ============================================================
   SITE FOOTER — disclaimer block + copyright. Lives at the end of
   <body> on purpose so the table paints first.
   ============================================================ */
.site-footer {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem 2rem;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}
.site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.footer-disclaimer { margin-bottom: 0.6rem; }
.footer-disclaimer strong { color: var(--text); }
.footer-disclaimer a {
    color: var(--accent);
    text-decoration: underline;
}
.footer-section-head {
    margin: 0.25rem 0 0.5rem;
    text-align: center;
}
.footer-section-head h3 {
    margin: 0;
    color: var(--text);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.footer-disclaimer-list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.5rem 0 0.9rem;
    font-size: 0.78rem;
    line-height: 1.55;
}
.footer-disclaimer-list li { margin-bottom: 0.45rem; }
.footer-disclaimer-list li strong { color: var(--text); }
.footer-disclaimer-list a {
    color: var(--accent);
    text-decoration: underline;
}
.footer-copy {
    font-size: 0.75rem;
    opacity: 0.85;
}
.footer-copy a { color: var(--text); text-decoration: none; }
.footer-copy a:hover { text-decoration: underline; }

@media (max-width: 1024px) {
    .site-footer { padding: 1rem 0.875rem 1.5rem; }
}
/* ============================================================
   EVENT-CELL CLICK POPOVER
   Floating card surfaced when a user taps/clicks the merged Date / Match
   cell. Stays out of the document flow (position: fixed via inline left/top
   computed in JS using window scroll offsets). Hidden by default; .is-visible
   triggers the fade-in. Designed for phones where the cell is clamped to
   ~160px so league + team names get cut with ellipsis.
   ============================================================ */
.event-popover {
    position: absolute;
    z-index: 1100;
    min-width: 220px;
    max-width: min(90vw, 360px);
    padding: 0.85rem 1rem 0.9rem;
    /* Use a solid surface (var(--th-sticky-bg) is solid in both themes) so
       the popover stays readable over busy table rows. The translucent
       --bg-card looked great on desktop but turned unreadable on dark
       mobile where rows showed through the text. */
    background: var(--th-sticky-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    backdrop-filter: none;
    font-size: 0.85rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}
.event-popover.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.event-popover-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 0.3rem;
}
.event-popover-close:hover { color: var(--text); background: var(--row-hover); }
.event-popover-row { margin-bottom: 0.4rem; }
.event-popover-row:last-child { margin-bottom: 0; }
.event-popover-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.event-popover-league {
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
    white-space: normal;
}
.event-popover-teams {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.event-popover-teams > div { display: flex; gap: 0.6rem; align-items: baseline; }
.event-popover-teams .lab {
    flex: 0 0 48px;
    font-size: 0.66rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.event-popover-teams .val {
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
    white-space: normal;
}