/* ============================================
   V2 Backend Overrides
   Layers "Tactical Luxury" design over backend/authenticated pages.
   Loaded AFTER styles.css, BEFORE v2-styles.css (injected by v2-bootstrap.js).

   DO NOT TOUCH:
   - Bookmaker color classes (.Bet365, .FanDuel, .DraftKings, etc.)
   - Rank colors (.rank-1 through .rank-5)
   - Flash/price-change animations
   - position: sticky, z-index, overflow properties
   - .classic-table layout structure
   ============================================ */

/* === 1a. ROOT VARIABLE FALLBACKS ===
   Duplicate tokens so variables resolve immediately,
   before v2-bootstrap.js injects v2-styles.css at DOMContentLoaded */
:root {
    --bg-primary: #0A0A0F;
    --bg-elevated: #12121A;
    --bg-hover: #1A1A26;
    --border: #2A2A3A;
    --text-primary: #E8E6E3;
    --text-secondary: #8A8A9A;
    --accent: #00E676;
    --accent-dim: rgba(0, 230, 118, 0.15);
    --accent-warm: #FFD54F;
    --accent-danger: #FF5252;
    --gradient-start: #00E676;
    --gradient-end: #00BFA5;
    --font-display: 'Outfit', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* === 1b. BODY / PAGE BACKGROUND === */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === 1c. TABLE WRAPPER BORDERS === */
#tableContainer .table-wrapper {
    border-color: var(--border);
}

.table-wrapper {
    border-color: var(--border);
}

/* === 1d. TABLE HEADER BACKGROUNDS === */
thead th {
    background-color: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-display);
}

/* Override .table-wrapper table th/td borders from styles.css (specificity 0-1-2) */
.table-wrapper table th,
.table-wrapper table td {
    border-color: var(--accent) !important;
}

/* Ensure sticky headers stay opaque on scroll */
thead th[style*="sticky"],
th[style*="position: sticky"],
.sticky-header th {
    background-color: var(--bg-elevated) !important;
}

/* Table cells — keep green text to match legacy feel, just use the new accent */
/* !important on color to beat both styles.css and v2-styles.css */
/* background-color WITHOUT !important so bookmaker classes (.FanDuel etc) can win */
th, td {
    color: var(--accent) !important;
    background-color: var(--bg-primary);
    border-color: var(--accent) !important;
}

/* === TABLE GRIDLINES — swap old #4CAF50 → new #00E676 accent === */

/* Outer table wrapper border */
#tableContainer .table-wrapper,
#tableContainer2 .table-wrapper,
.table-wrapper {
    border-color: var(--accent) !important;
}

/* All table borders */
#oddsTable, #oddsTable2, .classic-table,
#middlesTable, #arbTable, #criteriaTable,
#basesLogTable, #searchResultsTable, #resultsTable, #controlsTable {
    border-color: var(--accent) !important;
}

/* Sticky first-column right border — match exact selectors from odds-tables-sticky.css */
/* Row 1 header first cell */
#oddsTable:not(.classic-table) thead tr:first-child th:first-child:not(.table-title-header),
#oddsTable2:not(.classic-table) thead tr:first-child th:first-child:not(.table-title-header) {
    border-right: 3px solid var(--accent) !important;
    background-color: var(--bg-elevated) !important;
}

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

/* Row 2 header first cell (filters) */
.table-wrapper #oddsTable:not(.classic-table) thead tr:nth-child(2) th:first-child,
.table-wrapper #oddsTable2:not(.classic-table) thead tr:nth-child(2) th:first-child {
    border-right: 3px solid var(--accent) !important;
    background-color: var(--bg-elevated) !important;
}

/* Body first cells */
.table-wrapper #oddsTable:not(.classic-table) tbody td:first-child,
.table-wrapper #oddsTable2:not(.classic-table) tbody td:first-child {
    border-right: 3px solid var(--accent) !important;
    border-bottom: 1px solid var(--accent) !important;
}

/* Header first cells generic */
#oddsTable:not(.classic-table) thead th:first-child,
#oddsTable2:not(.classic-table) thead th:first-child {
    border-right: 3px solid var(--accent) !important;
    background-color: var(--bg-elevated) !important;
}

/* Scrolled state first column */
#oddsTable:not(.classic-table).scrolled-horizontal td:first-child,
#oddsTable:not(.classic-table).scrolled-horizontal th:first-child,
#oddsTable2:not(.classic-table).scrolled-horizontal td:first-child,
#oddsTable2:not(.classic-table).scrolled-horizontal th:first-child {
    border-right: 3px solid var(--accent) !important;
}

/* Mobile first column */
@media (max-width: 768px) {
    #oddsTable:not(.classic-table) td:first-child,
    #oddsTable2:not(.classic-table) td:first-child {
        border-right: 3px solid var(--accent) !important;
    }
}

/* Maximum specificity override (matches odds-tables-sticky.css line 838) */
body .page-wrapper .main-content #tableContainer .table-wrapper #oddsTable:not(.classic-table) thead tr:first-child th:first-child,
body .page-wrapper .main-content #tableContainer2 .table-wrapper #oddsTable2:not(.classic-table) thead tr:first-child th:first-child {
    border-right: 3px solid var(--accent) !important;
}

/* Header bottom pseudo-elements (thick lines under header cells) */
#tableContainer .table-wrapper #oddsTable:not(.classic-table) thead tr:first-child th:first-child::after,
#tableContainer2 .table-wrapper #oddsTable2:not(.classic-table) thead tr:first-child th:first-child::after {
    background-color: var(--accent) !important;
}

/* ALL header cell ::after (not just first-child) */
#oddsTable:not(.classic-table) thead tr:first-child th:not(.table-title-header)::after,
#oddsTable2:not(.classic-table) thead tr:first-child th:not(.table-title-header)::after {
    background-color: var(--accent) !important;
}

/* Row 2 ALL cells ::after (including first-child which has higher specificity) */
#oddsTable:not(.classic-table) thead tr:nth-child(2) th::after,
#oddsTable2:not(.classic-table) thead tr:nth-child(2) th::after,
#oddsTable:not(.classic-table) thead tr:nth-child(2) th:first-child::after,
#oddsTable2:not(.classic-table) thead tr:nth-child(2) th:first-child::after {
    background-color: var(--accent) !important;
}

/* Header filter inputs */
#oddsTable thead th input,
#oddsTable thead th select,
#oddsTable2 thead th input,
#oddsTable2 thead th select {
    border: 1px solid var(--accent) !important;
    background-color: var(--bg-hover) !important;
}

/* Row bottom borders (tbody cells) */
#oddsTable:not(.classic-table) tbody td,
#oddsTable2:not(.classic-table) tbody td {
    border-bottom-color: var(--accent) !important;
}

/* Classic table borders */
.classic-table th,
.classic-table td {
    border-color: var(--accent) !important;
}

/* Hover on first column */
#oddsTable:not(.classic-table) th:first-child:hover:not(.hovered-cell),
#oddsTable:not(.classic-table) td:first-child:hover:not(.hovered-cell),
#oddsTable2:not(.classic-table) th:first-child:hover:not(.hovered-cell),
#oddsTable2:not(.classic-table) td:first-child:hover:not(.hovered-cell) {
    background-color: var(--bg-hover) !important;
}

/* Sticky tbody first column background */
.table-wrapper #oddsTable:not(.classic-table) tbody td:first-child,
.table-wrapper #oddsTable2:not(.classic-table) tbody td:first-child {
    background-color: var(--bg-primary) !important;
}

/* Table wrapper background */
#tableContainer .table-wrapper,
#tableContainer2 .table-wrapper {
    background-color: var(--bg-primary) !important;
}

/* Hover popup — restore original look, fully isolated from table overrides */
.hover-popup,
.hover-popup table {
    background-color: #000 !important;
    color: white !important;
}

.hover-popup td,
.hover-popup th {
    color: inherit !important;
    background-color: transparent !important;
    border-color: var(--accent) !important;
}

/* Re-apply bookmaker backgrounds inside popup (need !important to beat transparent above) */
.hover-popup .FanDuel, .hover-popup .FD, .hover-popup .fd { background-color: #0078FF !important; color: white !important; }
.hover-popup .DraftKings, .hover-popup .DK, .hover-popup .dk { background-color: #37CD3F !important; color: black !important; }
.hover-popup .BetMgm, .hover-popup .BetMGM, .hover-popup .MG, .hover-popup .mg { background-color: #C1A970 !important; color: black !important; }
.hover-popup .Bet365, .hover-popup .B3, .hover-popup .B365, .hover-popup .b3, .hover-popup .b365, .hover-popup .bet365 { background-color: green !important; color: white !important; }
.hover-popup .BetRivers, .hover-popup .BR, .hover-popup .br { background-color: #070B64 !important; color: #FFB717 !important; }
.hover-popup .Caesars, .hover-popup .CZ, .hover-popup .cz { background-color: #0A3532 !important; color: #CBB57B !important; }
.hover-popup .Bovada, .hover-popup .BV, .hover-popup .bv { background-color: #FF0000 !important; color: #FFFFFF !important; }
.hover-popup .PropBuilder, .hover-popup .PB, .hover-popup .pb { background-color: #970000 !important; color: #FFFFFF !important; }
.hover-popup .ScoreBet, .hover-popup .scorebet, .hover-popup .theScoreBet, .hover-popup .SB, .hover-popup .sb { background-color: #0a2540 !important; color: white !important; }
.hover-popup .Fanatics, .hover-popup .FN, .hover-popup .fn { background-color: #080808 !important; color: #E74536 !important; }
.hover-popup .HardRockBet, .hover-popup .HR, .hover-popup .hr { background-color: #1C1C1C !important; color: #6B52AE !important; }
.hover-popup .HardRockBet2, .hover-popup .H2, .hover-popup .h2 { background-color: #1C1C1C !important; color: #FF69B4 !important; }
.hover-popup .BetOnline, .hover-popup .BO, .hover-popup .bo, .hover-popup .betonline { background-color: #2D2E2C !important; color: #EE3536 !important; }
.hover-popup .Pinnacle, .hover-popup .PN, .hover-popup .pn { background-color: #042D59 !important; color: #fd5602 !important; }
.hover-popup .Fliff, .hover-popup .FL, .hover-popup .fl { background-color: #151544 !important; color: #0290A6 !important; }
.hover-popup .YourWay, .hover-popup .YW, .hover-popup .yw { background-color: #004C99 !important; color: white !important; }
.hover-popup .BookMaker, .hover-popup .BM, .hover-popup .bm { background-color: #000000 !important; color: #FFD700 !important; }
.hover-popup .Circa, .hover-popup .CA, .hover-popup .ca { background-color: black !important; color: white !important; }
.hover-popup .BetFred, .hover-popup .BF, .hover-popup .bf { background-color: #0000FF !important; color: #FFFFFF !important; }


table {
    border-color: var(--border);
}

/* === 1e. SCROLLBAR THEMING === */
/* !important to beat odds-tables-sticky.css (#4CAF50) and v2-styles.css (grey, loaded last) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-elevated) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--accent) !important;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00ffaa !important;
}

/* Table-wrapper specific scrollbar (odds-tables-sticky.css uses .table-wrapper scope) */
.table-wrapper::-webkit-scrollbar-track {
    background: var(--bg-elevated) !important;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: var(--accent) !important;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #00ffaa !important;
}

/* === 1f. HEADER OVERRIDES ===
   Override what header.js injects via <style> tag.
   Later stylesheet with equal specificity wins. */

#modernHeader {
    background-color: var(--bg-primary) !important;
    border-bottom-color: var(--accent) !important;
    font-family: var(--font-body) !important;
}

.header-title {
    color: var(--accent) !important;
    font-family: var(--font-display) !important;
}

.nav-link {
    color: var(--accent) !important;
    font-family: var(--font-body) !important;
}

.nav-link:hover {
    background-color: var(--bg-hover) !important;
    color: #00ffaa !important;
}

.nav-link.active {
    background-color: var(--accent) !important;
    color: var(--bg-primary) !important;
}

/* Mega menu */
.mega-menu {
    background-color: var(--bg-primary) !important;
    border-color: var(--accent) !important;
}

.mega-menu-content {
    background-color: var(--bg-primary) !important;
}

.mega-menu-title {
    color: var(--accent) !important;
    font-family: var(--font-display) !important;
    border-bottom-color: var(--border) !important;
}

.mega-menu-link {
    color: var(--text-primary) !important;
}

.mega-menu-link:hover {
    color: var(--accent) !important;
}

.menu-toggle-container {
    background-color: var(--bg-elevated) !important;
    border-bottom-color: var(--border) !important;
}

.menu-toggle-container input[type="checkbox"]:checked + .toggle-slider {
    background-color: var(--accent) !important;
}

.sport-divider {
    background-color: var(--accent) !important;
}

/* Market nav arrows */
.market-nav-arrow {
    color: var(--accent) !important;
}

.market-nav-arrow:hover:not(:disabled) {
    color: #00ffaa !important;
}

/* Hamburger menu — extra specificity to beat header.js injected <style> */
#modernHeader .hamburger-menu span,
#modernNav .hamburger-menu span,
.hamburger-menu span {
    background-color: var(--accent) !important;
}

/* Inactive market links — preserve greyed-out look */
.mega-menu-link.inactive-market {
    color: #555 !important;
}

.mega-menu-link.inactive-market:hover {
    color: #555 !important;
}

.mega-menu-link.inactive-market::after {
    background-color: var(--bg-hover) !important;
    border-color: var(--border) !important;
}

.mega-menu-link.inactive-market::before {
    border-top-color: var(--border) !important;
}

.search-inactive-market {
    color: #555 !important;
}

.search-inactive-market:hover {
    color: #555 !important;
}

/* Mobile nav */
.mobile-nav-wrapper {
    background-color: var(--bg-primary) !important;
    border-color: var(--accent) !important;
}

/* === 1h. PAGE-SPECIFIC SELECTORS === */

/* Dashboard */
.getting-started {
    background: linear-gradient(145deg, var(--bg-primary), var(--bg-elevated));
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.2);
}

.welcome-header h1 {
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.5);
}

.welcome-header p {
    color: var(--accent);
}

.step-number {
    background: linear-gradient(45deg, var(--accent), var(--gradient-end));
}

.step p {
    color: var(--accent);
}

.section-card {
    background: rgba(10, 10, 15, 0.3);
    border-color: rgba(0, 230, 118, 0.2);
}

.section-card:hover {
    box-shadow: 0 10px 20px rgba(0, 230, 118, 0.3);
    border-color: var(--accent);
}

.section-card .icon {
    color: var(--accent);
}

.section-card p,
.section-card li {
    color: var(--text-primary);
}

.section-card li {
    border-bottom-color: rgba(0, 230, 118, 0.1);
}

.section-card li:before {
    color: var(--accent);
}

.discord-section {
    background: linear-gradient(145deg, var(--bg-primary), var(--bg-elevated));
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.2);
}

.discord-section p {
    color: var(--accent);
}

/* Middles & Arbitrage */
.middle-profitable,
.middle-scenario {
    color: var(--accent);
}

.arb-profitable {
    color: var(--accent);
}

.middles-filters input,
.middles-filters select,
.arb-filters input,
.arb-filters select {
    border-color: var(--accent);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.stake-calculator {
    background: var(--bg-elevated);
    border-color: var(--accent);
}

.stake-calculator .close-btn:hover {
    color: var(--accent);
}

.scenario-value.positive {
    color: var(--accent);
}

.profit-scenarios {
    background: var(--bg-primary);
}

/* Middles/Arb table headers */
#middlesTable th,
#arbTable th {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary);
    border-color: var(--accent);
}

#middlesTable td,
#arbTable td {
    border-color: var(--border);
}

/* Alerts */
.alert-type-card {
    background: linear-gradient(145deg, var(--bg-primary), var(--bg-elevated));
    border-color: rgba(0, 230, 118, 0.3);
}

.alert-type-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.2);
}

.subtitle {
    color: var(--accent);
}

/* Alert criteria table */
#criteriaTable {
    border-color: var(--accent);
}

#criteriaTable th {
    background-color: var(--bg-elevated) !important;
    color: var(--accent);
    border-color: var(--accent);
}

#criteriaTable tbody tr td:first-child {
    background-color: var(--bg-primary) !important;
}

#criteriaTable thead tr th:first-child {
    background-color: var(--bg-elevated) !important;
    border-right-color: var(--accent);
}

.table-wrapper.scrolled-horizontal #criteriaTable tbody tr td:first-child,
.table-wrapper.scrolled-horizontal #criteriaTable thead tr th:first-child {
    box-shadow: 2px 0 4px rgba(0, 230, 118, 0.3);
}

/* Preferences */
.preference-section {
    border-color: var(--accent);
    background-color: rgba(10, 10, 15, 0.3);
}

.preference-section h2 {
    color: var(--text-primary);
}

#state,
.preference-section input[type="number"] {
    border-color: var(--accent);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.preference-section button[type="submit"],
.preference-section button[type="button"] {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: var(--bg-primary);
}

/* Admin */
.tab-nav {
    border-bottom-color: var(--accent);
}

.tab-button {
    background-color: var(--bg-elevated);
    color: var(--text-secondary);
}

.tab-button.active,
.tab-button:hover {
    background-color: var(--accent);
    color: var(--bg-primary);
}

/* Page title override for pages with inline h1 text-shadow */
h1 {
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.5);
    font-family: var(--font-display);
}

/* Scroll hint */
.scroll-hint {
    color: var(--text-secondary);
}

/* Line selector */
#lineSelectorContainer {
    font-family: var(--font-body);
}

/* Update messaging */
#updateMessaging {
    color: var(--text-secondary);
    font-family: var(--font-body);
}

/* Generic page-wrapper background */
.page-wrapper {
    background-color: var(--bg-primary);
}

/* Bases log */
.hide-btn {
    color: var(--accent);
}

.hide-btn:hover {
    background-color: var(--bg-hover);
    color: #00ffaa;
}

/* Menu button (hamburger icon in table rows) — SVG stroke color swap */
.menu-button {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke-width='1.5'%20stroke='%2300E676'%3E%3Cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M3.75%205.25h16.5M3.75%2012h16.5M3.75%2018.75h16.5'%20/%3E%3C/svg%3E") !important;
}

.menu-button:hover {
    background-color: var(--accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke-width='1.5'%20stroke='%230A0A0F'%3E%3Cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M3.75%205.25h16.5M3.75%2012h16.5M3.75%2018.75h16.5'%20/%3E%3C/svg%3E") !important;
}

.menu-button.open {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke-width='1.5'%20stroke='%2300E676'%3E%3Cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M6%2018L18%206M6%206l12%2012'%20/%3E%3C/svg%3E") !important;
}

.menu-button.open:hover {
    background-color: var(--accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke-width='1.5'%20stroke='%230A0A0F'%3E%3Cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M6%2018L18%206M6%206l12%2012'%20/%3E%3C/svg%3E") !important;
}

/* View toggle buttons (JB View / Classic View) — override generic button gradient */
.view-toggle-btn {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
}

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

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