/* ============================================
   V3 Theme — "Refined Glass" (Theme A)
   Approved mocks: static/mockups/a2-{homepage,jb-view,classic-view}.html
   Loaded LAST behind the V3_THEME flag (v3_enabled context processor).
   Rollback = unset V3_THEME + restart; this file is additive only.

   Scope: theme refinements AROUND the tables (chrome, headers,
   hairlines, mono numerals). Table structure, sticky/z-index/overflow,
   bookmaker colors and flash animations are untouched.
   !important is used only where v2-backend-overrides.css already uses
   it on the same property (later sheet + equal weight wins).
   ============================================ */

/* === V3 TOKENS (additions to the v2 set) === */
:root {
    --row-line: #1B1B26;                      /* soft tbody hairline */
    --glass: rgba(15, 20, 32, 0.72);
    --glass-edge: rgba(255, 255, 255, 0.07);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --glow-sm: 0 0 10px rgba(0, 230, 118, 0.15);
    --glow-md: 0 0 12px rgba(0, 230, 118, 0.2);
    --glow-lg: 0 6px 20px rgba(0, 230, 118, 0.25);
    --glow-table: 0 0 22px rgba(0, 230, 118, 0.10);
    --focus-ring: 0 0 0 2px var(--accent-dim);
    --success: var(--accent);
    --danger: var(--accent-danger);
    --warn: var(--accent-warm);
}

/* === GLASS CHROME === */

/* Public header/footer (server-rendered partials, styled in chrome.css) */
.header {
    background: var(--glass);
    border-bottom-color: var(--glass-edge);
}

/* v3 homepage has no hero logo, so the header logo no longer waits for
   scroll (chrome.css/free-header.js fade it in via .show-logo for v2) */
.is-homepage .header-logo-container {
    opacity: 1;
}

.footer {
    background: var(--glass);
    border-top-color: var(--glass-edge);
}

/* Authed header (built by header.js; v2-backend-overrides uses !important) */
#modernHeader {
    background: var(--glass) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: var(--glass-edge) !important;
}

.mobile-nav-wrapper {
    background-color: rgba(10, 10, 15, 0.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: var(--glass-edge) !important;
}

/* === TITLE BAR === */

/* Kill the green glow text-shadow from v2-backend-overrides */
h1 {
    text-shadow: none;
    letter-spacing: -0.01em;
}

/* Live status line under/next to the title ("Last updated …") */
#updateMessaging {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.04em;
}

#updateMessaging::before {
    content: '●';
    margin-right: 6px;
    animation: jb-pulse 2s infinite;
}

@keyframes jb-pulse {
    50% { opacity: 0.35; }
}

/* === VIEW TOGGLE PILL (JB View / Classic View) === */
.view-toggle-wrapper {
    gap: 0;
    padding-right: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.view-toggle-wrapper::after {
    display: none;
}

.view-toggle-btn {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 12px;
    padding: 8px 16px;
}

.view-toggle-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--accent) !important;
}

.view-toggle-btn.active {
    background: var(--accent) !important;
    color: var(--bg-primary) !important;
    font-weight: 700;
}

/* === JB VIEW TABLE POLISH === */

/* Wrapper: 1px accent border + soft emerald glow */
#tableContainer .table-wrapper,
#tableContainer2 .table-wrapper,
.table-wrapper {
    border-width: 1px !important;
    border-color: var(--accent) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--glow-table);
}

/* Soft row hairlines instead of green gridlines (v2-backend uses
   `th, td { border-color: var(--accent) !important }`) */
#oddsTable:not(.classic-table) tbody td,
#oddsTable2:not(.classic-table) tbody td,
.table-wrapper #oddsTable:not(.classic-table) tbody td:first-child,
.table-wrapper #oddsTable2:not(.classic-table) tbody td:first-child {
    border-color: var(--row-line) !important;
}

/* …but keep the accent rail on the sticky first column */
#oddsTable:not(.classic-table) tbody td:first-child,
#oddsTable2:not(.classic-table) tbody td:first-child,
.table-wrapper #oddsTable:not(.classic-table) tbody td:first-child,
.table-wrapper #oddsTable2:not(.classic-table) tbody td:first-child {
    border-right-color: var(--accent) !important;
}

/* Header cells: neutral border, secondary text, display font
   (the thick accent under-lines are ::after elements — untouched) */
#oddsTable:not(.classic-table) thead th,
#oddsTable2:not(.classic-table) thead th {
    border-color: var(--border) !important;
    font-size: 11px;
}

#oddsTable:not(.classic-table) thead th:first-child,
#oddsTable2:not(.classic-table) thead th:first-child {
    border-right-color: var(--accent) !important;
}

/* Filter inputs: neutral chrome (amber .filter-active state preserved) */
#oddsTable thead th input:not(.filter-active),
#oddsTable thead th select:not(.filter-active),
#oddsTable2 thead th input:not(.filter-active),
#oddsTable2 thead th select:not(.filter-active) {
    border: 1px solid var(--border) !important;
    background-color: var(--bg-primary) !important;
    border-radius: var(--radius-md);
    font-size: 12px;
}

/* Mono numerals on numeric columns */
.table-wrapper td[data-column="best_odds"],
.table-wrapper td[data-column="second_best_odds"],
.table-wrapper td[data-column="avg_excl_max_american"],
.table-wrapper td[data-column="best_prob"],
.table-wrapper td[data-column="mkt_prob"],
.table-wrapper td[data-column="prob_diff"],
.table-wrapper td[data-column="prob_diff_mkt"],
.table-wrapper td[data-column="value_percent_vs_2nd"],
.table-wrapper td[data-column="value_percent_vs_avg"],
.table-wrapper td[data-column="value_plus_vs_2nd"],
.table-wrapper td[data-column="value_plus_vs_avg"],
.table-wrapper td[data-column="kelly"],
.table-wrapper td[data-column="books_reporting"],
.table-wrapper td[data-column="line"],
.table-wrapper td[data-column="spread"],
.table-wrapper td[data-column="total"] {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* Cell color hierarchy from the mock: context columns dim, name/team
   columns body-text, numbers stay accent (v2-backend colors all green) */
.table-wrapper td[data-column="type"],
.table-wrapper td[data-column="date"],
.table-wrapper td[data-column="matchup"],
.table-wrapper td[data-column="away_team"],
.table-wrapper td[data-column="home_team"] {
    color: var(--text-secondary) !important;
}

.table-wrapper td[data-column="player_names_real"],
.table-wrapper td[data-column="team"],
.table-wrapper td[data-column="winner"],
.table-wrapper td[data-column="market"] {
    color: var(--text-primary) !important;
    font-weight: 500;
}

.table-wrapper td[data-column="kelly"] {
    color: var(--accent-warm) !important;
}

/* Refined best-odds highlight */
.table-wrapper #oddsTable td[data-column="best_odds"],
.table-wrapper #oddsTable2 td[data-column="best_odds"] {
    font-weight: 700;
    background-color: rgba(0, 230, 118, 0.13);
    box-shadow: inset 0 0 0 1px rgba(0, 230, 118, 0.3);
    border-radius: var(--radius-sm);
}

/* === CLASSIC VIEW TABLE POLISH === */

/* Dark hairlines instead of green grid (classic stays black).
   Specificity must beat v2-backend's `.table-wrapper table td` (0-1-2)
   and classic-view.css's `#oddsTable.classic-table …` ID rules. */
.table-wrapper .classic-table td,
#oddsTable.classic-table td,
#oddsTable2.classic-table td {
    border-color: var(--bg-hover) !important;
}

.table-wrapper .classic-table th,
#oddsTable.classic-table th,
#oddsTable2.classic-table th {
    border-color: var(--bg-hover) !important;
}

/* Accent line under headers (classic-view.css hardcodes #4CAF50) */
#oddsTable.classic-table thead th,
#oddsTable2.classic-table thead th,
.table-wrapper .classic-table thead th {
    border-bottom-color: var(--accent) !important;
}

/* Accent rail on the sticky player column */
#oddsTable.classic-table thead th:first-child,
#oddsTable2.classic-table thead th:first-child,
#oddsTable.classic-table tbody td:first-child,
#oddsTable2.classic-table tbody td:first-child,
.table-wrapper .classic-table thead th:first-child,
.table-wrapper .classic-table tbody td:first-child {
    border-right-color: var(--accent) !important;
}

/* Odds cells in mono */
.classic-odds-cell {
    font-family: var(--font-mono);
}

/* Best-odds: legacy #4CAF50 → brand emerald */
.classic-odds-cell.best-odds {
    background: rgba(0, 230, 118, 0.30) !important;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 230, 118, 0.35);
    border-radius: var(--radius-sm);
}

/* Game banner rows */
.classic-game-matchup {
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 600;
}

.classic-game-datetime {
    color: var(--text-secondary);
}

/* === FOCUS VISIBILITY === */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .orb,
    .grid-bg {
        display: none;
    }

    #updateMessaging::before,
    .eyebrow::before,
    .live::before {
        animation: none;
    }

    .flash-increase,
    .flash-decrease {
        animation-duration: 0.01ms !important;
    }
}