/**
 * Classic View Styles
 * Traditional game-centric odds display
 */

/* =====================================================
   CSS VARIABLES FOR COLUMN WIDTHS
   ===================================================== */

:root {
    --classic-player-col-width: 150px;
}

@media (max-width: 768px) {
    :root {
        --classic-player-col-width: 100px;
    }
}

@media (max-width: 480px) {
    :root {
        --classic-player-col-width: 80px;
    }
}

/* =====================================================
   FOUC PREVENTION - Hide table until Classic table renders
   ===================================================== */

/* Hide table container in Classic View until classic table is rendered */
body.classic-view-active #tableContainer:not(:has(.classic-table)) {
    visibility: hidden;
}

/* =====================================================
   VIEW TOGGLE (matches .line-tab styling from lineSelector.js)
   ===================================================== */

.view-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 0;
    padding-right: 15px;
    position: relative;
}

.view-toggle-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 26px;
    width: 1px;
    background-color: #666;
}

.view-toggle-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #1a1a1a;
    color: #ccc;
    border: 1px solid #333;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.2s;
    white-space: nowrap;
}

.view-toggle-btn:hover {
    background-color: #2a2a2a;
    border-color: #4CAF50;
    color: #4CAF50;
}

.view-toggle-btn.active {
    background-color: #4CAF50;
    color: #000;
    border-color: #4CAF50;
    font-weight: 600;
}

.view-toggle-btn.active:hover {
    color: #000;
}

/* Mobile adjustments - 3-row stacked layout */
@media (max-width: 768px) {
    .view-toggle-btn {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Hide pipe separators on mobile */
    .view-toggle-wrapper::after,
    .line-controls .altlines-container::after,
    .line-selector-wrapper[data-market-type="prop"] .line-tabs::after {
        display: none;
    }

    /* Remove separator padding on mobile */
    .view-toggle-wrapper {
        margin-right: 0;
        padding-right: 0;
    }

    .line-controls .altlines-container {
        margin-right: 0;
        padding-right: 0;
    }

    .line-selector-wrapper[data-market-type="prop"] .line-tabs {
        margin-right: 0;
        padding-right: 0;
    }
}

@media (max-width: 480px) {
    .view-toggle-btn {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* Divider before Betslip button - using pseudo element for better visibility */
.line-controls .altlines-container {
    position: relative;
    margin-right: -8px;
    padding-right: 15px;
}

.line-controls .altlines-container::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 26px;
    width: 1px;
    background-color: #666;
}

/* For prop pages without altlines, add divider after line-tabs */
.line-selector-wrapper[data-market-type="prop"] .line-tabs {
    position: relative;
    margin-right: 0;
    padding-right: 15px;
}

.line-selector-wrapper[data-market-type="prop"] .line-tabs::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 26px;
    width: 1px;
    background-color: #666;
}

/* =====================================================
   CLASSIC TABLE STRUCTURE
   ===================================================== */

.classic-table-wrapper {
    position: relative;
    max-height: calc(100vh - 120px);
    border: 2px solid #4CAF50;
    border-radius: 12px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
    width: auto;
    max-width: calc(100vw - 40px);
    overflow: auto;
    background-color: #000000;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: none;
}

.classic-table,
#oddsTable.classic-table,
#oddsTable2.classic-table {
    width: 100%;
    border-collapse: separate !important; /* Must be separate for sticky headers to work */
    border-spacing: 0 !important; /* Remove gaps between cells */
    background: #000;
    color: #fff;
    font-size: 13px;
}

.classic-table thead {
    position: relative;
    z-index: 10;
    /* Solid background to prevent content showing through gaps */
    background-color: #111;
}

/* Header row solid background */
#oddsTable.classic-table thead tr:first-child,
#oddsTable2.classic-table thead tr:first-child {
    background-color: #000;
}

/* First header cell - sticky left */
#oddsTable.classic-table thead tr:first-child th:first-child,
#oddsTable2.classic-table thead tr:first-child th:first-child {
    position: sticky;
    left: 0;
    z-index: 20;
    border-top-left-radius: 10px;
}

/* Last header cell - rounded corner */
#oddsTable.classic-table thead tr:first-child th:last-child,
#oddsTable2.classic-table thead tr:first-child th:last-child {
    border-top-right-radius: 10px;
}

.classic-table thead tr {
    background: #000; /* Solid background for the header row */
}

.classic-table th {
    background: #111;
    color: #4CAF50;
    font-weight: 600;
    padding: 10px 12px;
    text-align: center;
    border-bottom: 2px solid #4CAF50;
    white-space: nowrap;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sticky header row - use ID selector for higher specificity over odds-tables-sticky.css */
#oddsTable.classic-table thead th,
#oddsTable2.classic-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    /* Use actual border, not pseudo-element */
    border-bottom: 2px solid #4CAF50 !important;
    /* Subtle shadow for visual separation */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Solid background for non-book headers only (Player, Line, Selection, etc.) */
#oddsTable.classic-table thead th:not(.classic-book-header),
#oddsTable2.classic-table thead th:not(.classic-book-header) {
    background-color: #111 !important;
}

/* Book headers need solid backgrounds too - but use their brand colors (defined below)
   Using class-only selector so brand color rules (also class-only) can override via cascade order */
.classic-table thead th.classic-book-header {
    /* Default fallback if no brand color matches */
    background-color: #222;
}

/* Disable ALL pseudo-elements on classic table headers (cells and rows) */
#oddsTable.classic-table thead th::before,
#oddsTable.classic-table thead th::after,
#oddsTable.classic-table thead tr::before,
#oddsTable.classic-table thead tr::after,
#oddsTable2.classic-table thead th::before,
#oddsTable2.classic-table thead th::after,
#oddsTable2.classic-table thead tr::before,
#oddsTable2.classic-table thead tr::after {
    display: none !important;
    content: none !important;
}

.classic-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #222;
    text-align: center;
    vertical-align: middle;
}

/* =====================================================
   CLASSIC PROPS TABLE (PLAYER-FOCUSED)
   ===================================================== */

/* Game header row (props) - full-width banner, NOT sticky */
.classic-game-header-row {
    background: #1a1a1a;
    cursor: pointer;
    /* Lower z-index so it goes BEHIND sticky header when scrolling down */
    position: relative;
    z-index: 1;
}

.classic-game-header-row:hover {
    background: #222;
}

.classic-game-header-row td {
    border-bottom: 1px solid #333;
}

.classic-game-header-cell {
    text-align: left !important;
    padding: 12px 16px !important;
    font-weight: 600;
    /* Lower z-index so it goes BEHIND sticky header when scrolling */
    position: relative !important;
    z-index: 1 !important;
}

.classic-game-matchup {
    color: #4CAF50;
    font-size: 14px;
    margin-right: 16px;
}

.classic-game-datetime {
    color: #888;
    font-size: 12px;
}

/* =====================================================
   COLLAPSIBLE GAME GROUPS
   ===================================================== */

/* Collapse indicator (chevron) */
.collapse-indicator {
    display: inline-block;
    color: #888;
    font-size: 12px;
    margin-right: 8px;
    transition: transform 0.2s ease;
    vertical-align: middle;
}

/* Rotate chevron when collapsed (props only) */
.classic-game-header-row.collapsed .collapse-indicator {
    transform: rotate(-90deg);
}

/* Collapse animation keyframes */
@keyframes collapse-row {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes expand-row {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Collapsing animation (before hiding) */
tr.collapsing-row {
    animation: collapse-row 0.25s ease-out forwards;
}

/* Expanding animation (after showing) */
tr.expanding-row {
    animation: expand-row 0.25s ease-out forwards;
}

/* Hidden state */
tr.collapsed-row {
    display: none !important;
}

/* Hover effect for collapse indicator (props only) */
.classic-game-header-row:hover .collapse-indicator {
    color: #4CAF50;
}

/* Player row */
.classic-player-row {
    background: #000;
    transition: background 0.15s ease;
}

.classic-player-row:hover {
    background: #0a0a0a;
}

.classic-player-cell {
    text-align: left !important;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    padding-left: 16px !important;
    min-width: 150px;
}

.classic-line-cell {
    color: #aaa;
    font-size: 12px;
    white-space: nowrap;
    min-width: 60px;
}

/* =====================================================
   CLASSIC MAINLINES TABLE (GAME-FOCUSED)
   ===================================================== */

.classic-game-cell {
    text-align: left !important;
    vertical-align: top;
    padding: 10px 12px !important;
    background: #0a0a0a;
    min-width: 100px;
}

.classic-game-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.classic-team-cell {
    text-align: left !important;
    font-weight: 500;
    min-width: 120px;
    white-space: nowrap;
}

.classic-away-row .classic-team-cell {
    color: #ddd;
}

.classic-home-row .classic-team-cell {
    color: #fff;
}

.classic-spread-cell,
.classic-total-cell {
    color: #bbb;
    font-size: 12px;
    min-width: 70px;
}

/* Team rows - consistent styling for both rows in a game matchup */
.classic-team-row {
    background: #000;
    transition: background 0.15s ease;
}

.classic-team-row:hover {
    background: #0a0a0a;
}

/* =====================================================
   MAINLINES BORDER CONSISTENCY (h2h/spreads/totals)
   Fix for rowspan causing second row to have different borders
   ===================================================== */

/* Game cell right border - separates game column from team column */
.classic-mainlines-table .classic-game-cell {
    border-right: 2px solid #4CAF50;
}

/* First row bottom border - grid line between two team rows */
.classic-mainlines-table .classic-first-row td {
    border-bottom: 1px solid #333;
}

/* Second row team cell - needs left border since it's visually at the edge
   after game cell's rowspan. The :first-child rule removes borders, so we restore them */
.classic-mainlines-table .classic-second-row .classic-team-cell {
    border-left: 2px solid #4CAF50;
}

/* Ensure team cells have consistent styling regardless of position (first-child vs not) */
.classic-team-row .classic-team-cell {
    background: transparent;
}

/* No hover highlight on Classic View cells - just show the popup */
.classic-table .hovered-cell {
    background-color: transparent !important;
    color: inherit !important;
}

/* Ensure second row team cells match first row team cells in mainlines */
.classic-mainlines-table .classic-second-row .classic-team-cell {
    background: transparent !important;
}

/* Hover state for ALL team cells in mainlines - consistent for both rows */
.classic-mainlines-table .classic-team-cell:hover {
    background-color: #2a2a2a !important;
}

/* Game spacer row */
.classic-game-spacer {
    height: 6px;
    background: #111;
}

.classic-game-spacer td {
    padding: 0;
    border: none;
}

/* Game header styling */
.classic-mainlines-table thead th.classic-game-header {
    text-align: left !important;
    padding-left: 12px !important;
    min-width: 100px;
}

/* =====================================================
   ODDS CELLS
   ===================================================== */

.classic-odds-cell {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    color: #ccc;
    min-width: 55px;
    transition: background 0.15s ease;
}

/* Positive odds (plus money) */
.classic-odds-cell:not(:empty) {
    color: #ccc;
}

/* Best odds highlighting */
.classic-odds-cell.best-odds {
    background: rgba(76, 175, 80, 0.35) !important;  /* 35% opacity - visible green tint */
    color: #4CAF50;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.3);  /* Subtle inner glow */
}

/* Empty odds cell */
.classic-odds-cell:contains('-'),
.classic-odds-cell:empty {
    color: #555;
}

/* Book header styling */
.classic-book-header {
    min-width: 50px;
    cursor: default;
    padding: 8px 10px !important;
}

/* Only round outside edges of first/last book headers */
.classic-book-header:first-of-type {
    border-radius: 4px 0 0 4px;
}

.classic-book-header:last-of-type {
    border-radius: 0 4px 4px 0;
}


/* =====================================================
   STICKY FIRST COLUMN - Matches JB View behavior
   Uses :first-child for universal application
   ===================================================== */

/* First column HEADER - sticky on BOTH axes (top AND left) */
.classic-table thead th:first-child {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 101 !important;  /* Same as JB View - highest for corner cell */
    background-color: #1a1a1a !important;
    border-right: 3px solid #4CAF50 !important;
    box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.8);
}

/* First column BODY cells - sticky left only */
.classic-table tbody td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;  /* Same as JB View - above scrolled content */
    background-color: #0a0a0a !important;
    border-right: 3px solid #4CAF50 !important;
    border-bottom: 1px solid #4CAF50 !important;
    /* Prevent line break on resize */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Hover state for first column body cells */
.classic-table tbody td:first-child:hover {
    background-color: #2a2a2a !important;
    transition: background-color 0.2s ease;
}

/* Other header columns - sticky top only */
.classic-table thead th:not(:first-child) {
    position: sticky !important;
    top: 0 !important;
    z-index: 10;
    background-color: #111 !important;
}

/* =====================================================
   MAINLINES: DISABLE ALL STICKY COLUMNS
   h2h/spreads/totals use standard scrolling (no sticky)
   ===================================================== */

/* Override ALL sticky behavior for mainlines tables */
#oddsTable.classic-mainlines-table th,
#oddsTable.classic-mainlines-table td,
#oddsTable.classic-mainlines-table th:first-child,
#oddsTable.classic-mainlines-table td:first-child,
#oddsTable2.classic-mainlines-table th,
#oddsTable2.classic-mainlines-table td,
#oddsTable2.classic-mainlines-table th:first-child,
#oddsTable2.classic-mainlines-table td:first-child {
    position: static !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
}

/* Override sticky borders for mainlines - game cell (row 1 first-child) */
#oddsTable.classic-mainlines-table .classic-first-row .classic-game-cell,
#oddsTable2.classic-mainlines-table .classic-first-row .classic-game-cell {
    border-right: 2px solid #4CAF50 !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: 1px solid #222 !important;
    background-color: #0a0a0a !important;
}

/* Override sticky borders for mainlines - second row team cell (is first-child due to rowspan) */
#oddsTable.classic-mainlines-table .classic-second-row .classic-team-cell,
#oddsTable2.classic-mainlines-table .classic-second-row .classic-team-cell {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid #222 !important;
    background-color: transparent !important;
}

/* Override borders for mainlines - second row odds cells */
#oddsTable.classic-mainlines-table .classic-second-row .classic-odds-cell,
#oddsTable2.classic-mainlines-table .classic-second-row .classic-odds-cell {
    border-bottom: 1px solid #222 !important;
    border-top: none !important;
}

/* First row team cell - ensure no extra borders */
#oddsTable.classic-mainlines-table .classic-first-row .classic-team-cell,
#oddsTable2.classic-mainlines-table .classic-first-row .classic-team-cell {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    background-color: transparent !important;
}


/* Bet header styling (matches JB View) */
.classic-bet-header {
    white-space: nowrap !important;
    position: relative;
    overflow: hidden !important;
    min-width: 120px !important;
}

.classic-bet-header .bet-header-text {
    display: inline-block;
    vertical-align: middle;
}

.classic-bet-header .table-hover-icon {
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle;
    margin-left: 4px;
    display: inline-block;
}

/* =====================================================
   COLUMN RESIZE INDICATORS - Classic View
   ===================================================== */

/* Resize handle (six dots) - matches JB View styling */
.classic-bet-header .column-resize-handle {
    float: right;
    margin-right: 0;
    cursor: col-resize;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    color: #4CAF50;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.classic-bet-header .column-resize-handle:hover {
    opacity: 1;
}

/* Resize hover cursor - when hovering over resize zone */
.classic-table thead th:first-child.resize-hover,
.classic-bet-header.resize-hover {
    cursor: col-resize !important;
    background-color: #2a2a2a !important;
    border-right-color: #69c56e !important;
    border-right-width: 5px !important;
}

/* Active resizing state */
.classic-table thead th:first-child.resizing,
.classic-bet-header.resizing {
    cursor: col-resize !important;
    background-color: #333 !important;
    border-right-color: #fff !important;
    border-right-width: 5px !important;
}

/* Success feedback after resize */
.classic-table thead th:first-child.grab-success,
.classic-bet-header.grab-success {
    animation: classicResizeSuccess 0.6s ease-out;
}

@keyframes classicResizeSuccess {
    0% { background-color: #4CAF50; }
    100% { background-color: #1a1a1a; }
}

/* Body column resizing cursor */
body.column-resizing .classic-table {
    cursor: col-resize !important;
}

body.column-resizing .classic-table * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Bet cell styling (first column body cells) */
.classic-bet-cell {
    text-align: left !important;
    font-weight: 500;
    color: #fff;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-left: 12px !important;
    padding-right: 8px !important;
}

/* Game header row (props) - full-width, NOT sticky left */
.classic-game-header-row td {
    position: static !important;
    left: auto !important;
    background-color: #1a1a1a !important;
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */

@media (max-width: 768px) {
    .classic-table {
        font-size: 12px;
    }

    .classic-table th {
        padding: 8px 6px;
        font-size: 10px;
    }

    .classic-table td {
        padding: 6px 4px;
    }

    .classic-odds-cell {
        font-size: 11px;
        min-width: 45px;
    }

    .classic-player-cell {
        min-width: 100px;
        padding-left: 8px !important;
        /* Ensure sticky background on mobile */
        background-color: #000 !important;
    }

    /* Mainlines game cell on tablet */
    .classic-mainlines-table .classic-game-cell {
        min-width: 90px;
        padding: 8px 10px !important;
    }

    .classic-game-matchup {
        font-size: 12px;
    }

    .classic-game-datetime {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .classic-table th {
        padding: 6px 4px;
        font-size: 9px;
    }

    .classic-odds-cell {
        font-size: 10px;
        min-width: 40px;
    }

    .classic-player-cell {
        min-width: 80px;
        font-size: 11px;
        /* Ensure sticky background on mobile */
        background-color: #000 !important;
    }

    .classic-selection-cell {
        min-width: 90px;
        font-size: 11px;
        /* Ensure sticky background on mobile */
        background-color: #000 !important;
    }

    /* Mainlines game cell on mobile */
    .classic-mainlines-table .classic-game-cell {
        min-width: 70px;
        padding: 6px 8px !important;
    }
}

/* =====================================================
   CLASSIC FUTURES TABLE
   ===================================================== */

.classic-futures-table .classic-selection-header {
    text-align: left !important;
    min-width: 150px;
}

.classic-futures-row {
    background: #000;
    transition: background 0.15s ease;
}

.classic-futures-row:hover {
    background: #0a0a0a;
}

.classic-selection-cell {
    text-align: left !important;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    padding-left: 16px !important;
    min-width: 150px;
}

/* Futures/Golf sticky rules are now in the main sticky column section above */

@media (max-width: 768px) {
    .classic-selection-cell {
        min-width: 120px;
        padding-left: 10px !important;
    }
}

@media (max-width: 480px) {
    .classic-selection-cell {
        min-width: 100px;
        font-size: 11px;
    }
}

/* =====================================================
   BODY CLASS MODIFIERS
   ===================================================== */

/* Hide JediBets-specific columns when in classic view */
body.classic-view-active [data-column="best_book"],
body.classic-view-active [data-column="alt"],
body.classic-view-active [data-column="best_odds"],
body.classic-view-active [data-column="second_best_odds"],
body.classic-view-active [data-column="value_percent_vs_2nd"],
body.classic-view-active [data-column="value_plus_vs_2nd"],
body.classic-view-active [data-column="prob_diff"],
body.classic-view-active [data-column="avg_excl_max_american"],
body.classic-view-active [data-column="value_percent_vs_avg"],
body.classic-view-active [data-column="value_plus_vs_avg"],
body.classic-view-active [data-column="kelly"],
body.classic-view-active [data-column="books_reporting"] {
    display: none !important;
}

/* Ensure JediBets view shows all columns */
body.jedibets-view-active .classic-table {
    display: none !important;
}

/* =====================================================
   PAGE TYPE SPECIFIC COLUMN HIDING
   ===================================================== */

/* Hide Pinnacle (PN) column on props, futures, and golf pages
   - JB View uses data-column="PN" (short code)
   - Classic View uses data-book="pinnacle" (full name)
*/

/* JB View - short code PN */
body.page-type-props [data-column="PN"],
body.page-type-futures [data-column="PN"],
body.page-type-golf [data-column="PN"] {
    display: none !important;
}

/* Classic View - full name pinnacle */
body.page-type-props [data-book="pinnacle"],
body.page-type-futures [data-book="pinnacle"],
body.page-type-golf [data-book="pinnacle"] {
    display: none !important;
}

/* =====================================================
   BOOKLINKS IN ODDS CELLS
   ===================================================== */

.classic-odds-cell a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    transition: color 0.15s ease;
}

.classic-odds-cell a:hover {
    color: #4CAF50;
}

.classic-odds-cell.best-odds a {
    color: #4CAF50;
}

.classic-odds-cell.best-odds a:hover {
    color: #66BB6A;
}

/* =====================================================
   BOOK HEADER COLORS (Classic View)
   Must be in this file (loads last) to override odds-tables-sticky.css
   Colors match td styles in styles.css
   ===================================================== */

.classic-table thead th.B3,
.classic-table thead th.B365 {
    background-color: green !important;
    color: white !important;
}

.classic-table thead th.BR {
    background-color: #070B64 !important;
    color: #FFB717 !important;
}

.classic-table thead th.SB {
    background-color: #0a2540 !important;
    color: white !important;
}

.classic-table thead th.FD {
    background-color: #0078FF !important;
    color: white !important;
}

.classic-table thead th.DK {
    background-color: #37CD3F !important;
    color: black !important;
}

.classic-table thead th.MG {
    background-color: #C1A970 !important;
    color: black !important;
}

.classic-table thead th.CZ {
    background-color: #0A3532 !important;
    color: #CBB57B !important;
}

.classic-table thead th.FN {
    background-color: #080808 !important;
    color: #E74536 !important;
}

.classic-table thead th.FL {
    background-color: #151544 !important;
    color: #0290A6 !important;
}

.classic-table thead th.BO {
    background-color: #2D2E2C !important;
    color: #EE3536 !important;
}

.classic-table thead th.BV {
    background-color: #FF0000 !important;
    color: #FFFFFF !important;
}

.classic-table thead th.PB {
    background-color: #970000 !important;
    color: #FFFFFF !important;
}

.classic-table thead th.HR {
    background-color: #1C1C1C !important;
    color: #6B52AE !important;
}

.classic-table thead th.H2 {
    background-color: #1C1C1C !important;
    color: #FF69B4 !important;
}

.classic-table thead th.BF {
    background-color: #0000FF !important;
    color: #FFFFFF !important;
}

.classic-table thead th.PN {
    background-color: #042D59 !important;
    color: #fd5602 !important;
}

.classic-table thead th.CA {
    background-color: black !important;
    color: white !important;
}

.classic-table thead th.BM {
    background-color: #000000 !important;
    color: #FFD700 !important;
}

.classic-table thead th.YW {
    background-color: #004C99 !important;
    color: white !important;
}

/* =====================================================
   WEBSOCKET REAL-TIME UPDATE ANIMATIONS
   ===================================================== */

/* Flash animations for odds changes */
@keyframes classic-flash-green {
    0% { background-color: rgba(76, 175, 80, 0.5); }
    100% { background-color: transparent; }
}

@keyframes classic-flash-red {
    0% { background-color: rgba(244, 67, 54, 0.5); }
    100% { background-color: transparent; }
}

@keyframes classic-flash-yellow {
    0% { background-color: rgba(255, 193, 7, 0.3); }
    100% { background-color: transparent; }
}

/* Flash class for positive changes (odds improved) */
.classic-odds-cell.flash-increase {
    animation: classic-flash-green 0.5s ease-out;
}

/* Flash class for negative changes (odds worsened) */
.classic-odds-cell.flash-decrease {
    animation: classic-flash-red 0.5s ease-out;
}

/* Flash class for neutral updates */
.classic-odds-cell.flash-update {
    animation: classic-flash-yellow 0.5s ease-out;
}

/* New row highlight animation */
@keyframes classic-row-highlight {
    0% { background-color: rgba(76, 175, 80, 0.3); }
    70% { background-color: rgba(76, 175, 80, 0.15); }
    100% { background-color: transparent; }
}

.classic-table tr.new-row-highlight {
    animation: classic-row-highlight 3s ease-out;
}

/* Ensure best-odds cells keep their flash animation visible */
.classic-odds-cell.best-odds.flash-increase {
    animation: classic-flash-green 0.5s ease-out;
}

.classic-odds-cell.best-odds.flash-decrease {
    animation: classic-flash-red 0.5s ease-out;
}

/* Row removal fade-out transition (applied via JS) */
.classic-table tr {
    transition: opacity 0.3s ease-out;
}