/* Top page specific styles */

/* Force table styling from base styles.css */
.table-wrapper {
    border: 2px solid #00E676;
    border-radius: 12px;
    overflow: hidden;
    display: inline-block;
    margin: 0px 0;
    position: relative;
}

.table-wrapper table {
    border-collapse: collapse;
    width: auto;
}

/* Override to ensure proper cell borders for top page */
#oddsTable th,
#oddsTable td,
#oddsTable2 th,
#oddsTable2 td {
    border: 1px solid #00E676;
    padding: 10px 12px;
    background-color: black;
    color: #00E676;
    white-space: nowrap;
    vertical-align: middle !important;
    font-size: 15px;
}

/* Specific padding for second row headers to prevent spacing issues */
#oddsTable thead tr:nth-child(2) th,
#oddsTable2 thead tr:nth-child(2) th {
    padding: 12px 12px !important; /* Increased top/bottom padding */
    height: auto; /* Let content determine height */
    position: sticky !important;
    /* top position removed - let odds-tables-sticky.css handle it consistently */
}

/* Add row hover effect like other pages - only certain cells should have hover */
#oddsTable tbody tr:hover td:not([data-column="player_names_real"]):not([data-column="Market"]):not([data-column="best_book"]) a,
#oddsTable2 tbody tr:hover td:not([data-column="player_names_real"]):not([data-column="Market"]):not([data-column="best_book"]) a {
    background-color: #00E676 !important;
    color: black !important;
}

/* Links in Bet column should have special hover */
#oddsTable td[data-column="player_names_real"] a:hover,
#oddsTable2 td[data-column="player_names_real"] a:hover {
    background-color: #00E676 !important;
    color: black !important;
    padding: 2px 4px;
    border-radius: 2px;
}

/* Remove edge borders to match base styles */
#oddsTable th:first-child,
#oddsTable td:first-child,
#oddsTable2 th:first-child,
#oddsTable2 td:first-child {
    border-left: none;
}

#oddsTable th:last-child,
#oddsTable td:last-child,
#oddsTable2 th:last-child,
#oddsTable2 td:last-child {
    border-right: none;
}

#oddsTable tr:last-child td,
#oddsTable2 tr:last-child td {
    border-bottom: none;
}

#oddsTable thead tr:first-child th,
#oddsTable2 thead tr:first-child th {
    border-top: none;
}

/* Dynamic column width for Bet column - controlled by resize functionality */

/* Market column (second column) */
#oddsTable th[data-column="Market"],
#oddsTable td[data-column="Market"],
#oddsTable2 th[data-column="Market"],
#oddsTable2 td[data-column="Market"] {
    width: 105px;
    max-width: 105px;
    min-width: 105px;
}

#oddsTable th[data-column="Line"],
#oddsTable td[data-column="Line"],
#oddsTable2 th[data-column="Line"],
#oddsTable2 td[data-column="Line"] {
    width: 80px;
    max-width: 80px;
    min-width: 80px;
}

/* Team column removed per user request */

#oddsTable th[data-column="date"],
#oddsTable td[data-column="date"],
#oddsTable2 th[data-column="date"],
#oddsTable2 td[data-column="date"] {
    width: 125px !important;
    max-width: 125px !important;
    min-width: 125px !important;
}

/* Ensure text doesn't overflow in table cells */
#oddsTable td,
#oddsTable2 td {
    white-space: nowrap;
}

/* Graduate filter checkbox styles */
.filter-checkbox {
    font-size: small;
    display: inline-flex;
    align-items: center;
}

.filter-checkbox label {
    display: flex;
    align-items: center;
    margin: 0;
}

.filter-checkbox input[type="checkbox"] {
    margin-left: 2px;
    margin-right: 5px;
}

/* Table wrapper inherits from base styles.css - only override what's needed */
#tableContainer .table-wrapper,
#tableContainer2 .table-wrapper {
    margin-bottom: 20px;
}

/* Tables inherit styles from base styles.css */

/* Criteria link styling */
#criteria {
    font-size: small;
    display: block;
    margin: 0;
}

/* Space between tables */
#tableContainer2 {
    margin-top: 40px;
}

/* Top controls container styling */
.top-controls-container {
    display: flex;
    align-items: flex-start; /* Changed from center to flex-start for left alignment */
    justify-content: space-between;
    margin-bottom: 10px;
    min-height: 60px;
}

/* Left controls should be left-aligned */
.left-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Ensure left alignment */
    gap: 5px;
}

/* Right controls should maintain their position */
.right-controls {
    display: flex;
    align-items: center;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Adjust top controls for mobile */
    .top-controls-container {
        gap: 8px;
        margin-bottom: 8px;
    }
    
    /* Stack controls vertically on very small screens */
    @media (max-width: 480px) {
        .top-controls-container {
            flex-direction: column;
            align-items: flex-start !important; /* Left align all items with important to override */
            padding-left: 0; /* Ensure no extra left padding */
        }
        
        .left-controls,
        .right-controls {
            width: auto; /* Don't stretch the container */
            align-items: flex-start !important; /* Ensure left alignment */
        }
        
        #betslip-toggle {
            /* Remove width: 100% to keep button at its natural size */
            margin-top: 10px;
            margin-left: 0; /* Ensure button is left-aligned */
        }
    }
    /* Override the CSS variable for mobile to ensure proper fit */
    :root {
        --player-names-column-width: 120px !important;
    }
    
    /* Ensure sticky first column is visible on mobile */
    #oddsTable th:first-child,
    #oddsTable td:first-child,
    #oddsTable2 th:first-child,
    #oddsTable2 td:first-child {
        min-width: 100px !important; /* Minimum width for visibility */
        background-color: black !important; /* Ensure contrast */
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3); /* Add shadow for depth */
    }
    
    #oddsTable th[data-column="Market"],
    #oddsTable td[data-column="Market"],
    #oddsTable2 th[data-column="Market"],
    #oddsTable2 td[data-column="Market"] {
        width: 85px;
        max-width: 85px;
        min-width: 85px;
    }
    
    /* Left align header text on mobile for better visibility */
    #oddsTable th,
    #oddsTable2 th {
        text-align: left !important;
        padding: 8px !important; /* Consistent padding all around */
    }
    
    /* Keep Bet column header centered on mobile */
    #oddsTable th[data-column="player_names_real"],
    #oddsTable2 th[data-column="player_names_real"] {
        text-align: center !important;
    }
    
    /* On very small screens, adjust first column header for better visibility */
    @media (max-width: 480px) {
        #oddsTable thead tr:first-child th:first-child .header-text-wrapper,
        #oddsTable2 thead tr:first-child th:first-child .header-text-wrapper {
            justify-content: flex-start; /* Left align on very small screens */
            padding-left: 8px;
        }
        
        #oddsTable thead tr:first-child th:first-child .bet-header-text,
        #oddsTable2 thead tr:first-child th:first-child .bet-header-text {
            text-align: left;
            width: auto; /* Don't force full width on small screens */
        }
    }
    
    /* Keep consistent padding for first column on mobile - matches desktop */
    
    /* Center align the title rows */
    #oddsTable thead tr:first-child th,
    #oddsTable2 thead tr:first-child th {
        text-align: center !important;
        padding: 10px !important; /* Smaller padding on mobile */
    }
    
    /* Hide graduate filter on very small screens if needed */
    @media (max-width: 380px) {
        .filter-checkbox {
            font-size: x-small;
        }
    }
}

/* Special styling for the two table headers - MUST override sticky positioning */
/* Use maximum specificity to override odds-tables-sticky.css */
body .page-wrapper .main-content #tableContainer .table-wrapper #oddsTable thead tr:first-child th.table-title-header,
body .page-wrapper .main-content #tableContainer2 .table-wrapper #oddsTable2 thead tr:first-child th.table-title-header,
#oddsTable thead tr:first-child th.table-title-header,
#oddsTable2 thead tr:first-child th.table-title-header,
.table-title-header {
    text-align: center !important;
    font-weight: bold;
    background-color: black !important;
    color: #00E676;
    font-size: 18px;
    padding: 12px 15px; /* Reduced vertical padding */
    border: 1px solid #00E676 !important; /* Ensure border is visible */
    position: static !important; /* Override sticky positioning - CRITICAL */
    top: auto !important; /* Reset top positioning */
    z-index: auto !important; /* Reset z-index */
    display: table-cell !important;
    /* Additional overrides to ensure visibility */
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

#oddsTable2 thead tr:first-child th.table-title-header {
    color: #FFA500 !important; /* Orange for second table */
}

/* On mobile, ensure title headers are visible and centered */
@media (max-width: 768px) {
    #oddsTable thead tr:first-child th.table-title-header,
    #oddsTable2 thead tr:first-child th.table-title-header,
    .table-title-header {
        /* Don't make sticky - let it scroll naturally with table */
        position: static !important;
        top: auto !important;
        text-align: center !important;
        white-space: nowrap !important;
        font-size: 16px !important; /* Slightly smaller on mobile */
        padding: 10px 8px !important; /* Reduce padding on mobile */
        display: table-cell !important;
        visibility: visible !important;
    }
}

/* Scroll hint styling */
.scroll-hint {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: rgba(0, 230, 118, 0.9);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* Hide scroll hint when table has been scrolled */
.has-scrolled .scroll-hint,
.table-wrapper.has-scrolled + .scroll-hint {
    opacity: 0;
}

@media (min-width: 769px) {
    /* Hide scroll hint on desktop */
    .scroll-hint {
        display: none;
    }
}

/* Graduate emoji in market cells */
td[data-column="market"]:has-text("🎓") {
    /* Could add special styling for NCAA markets if desired */
}

/* First column (Bet) sticky styling for both tables */
#oddsTable th:first-child,
#oddsTable td:first-child,
#oddsTable2 th:first-child,
#oddsTable2 td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: black !important;
}

#oddsTable th:first-child,
#oddsTable2 th:first-child {
    z-index: 4;
    position: sticky; /* Ensure sticky positioning is maintained */
}

/* Maintain sticky column background - don't change on hover */
#oddsTable tbody tr:hover td:first-child,
#oddsTable2 tbody tr:hover td:first-child {
    background-color: black !important;
    color: #00E676 !important;
}

/* Fix data-column case sensitivity */
td[data-column="market"],
td[data-column="Market"] {
    text-align: left !important;
    padding-left: 10px;
}

/* Header text wrapper for resize functionality */
.header-text-wrapper {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* For absolute positioning of resize handle */
    gap: 4px; /* Add gap between flex items */
}

.bet-header-text {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: auto; /* Changed from 100% to keep icon next to text */
}

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

/* Column resize handle styling */
.column-resize-handle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: col-resize;
    font-size: 20px;
    line-height: 1;
    user-select: none;
    opacity: 0.5;
    transition: opacity 0.2s;
    padding: 0 4px;
}

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

/* Variable for dynamic column width */
:root {
    --player-names-column-width: 175px; /* Increased to accommodate more padding */
}

/* Apply dynamic width to first column */
#oddsTable th[data-column="player_names_real"],
#oddsTable td[data-column="player_names_real"],
#oddsTable2 th[data-column="player_names_real"],
#oddsTable2 td[data-column="player_names_real"] {
    width: var(--player-names-column-width);
    max-width: var(--player-names-column-width);
    min-width: var(--player-names-column-width);
}

/* Add more padding to Bet column headers to match other pages */
#oddsTable th[data-column="player_names_real"],
#oddsTable2 th[data-column="player_names_real"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Add more padding to Bet column data cells */
#oddsTable td[data-column="player_names_real"],
#oddsTable2 td[data-column="player_names_real"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Visual feedback during resize */
body.column-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}

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

/* Resize zone hover effect */
#oddsTable th[data-column="player_names_real"].resize-hover,
#oddsTable2 th[data-column="player_names_real"].resize-hover {
    cursor: col-resize;
}

/* Visual feedback during resize */
#oddsTable th[data-column="player_names_real"].resizing,
#oddsTable2 th[data-column="player_names_real"].resizing {
    background-color: rgba(0, 230, 118, 0.1) !important;
}

/* Add a visual indicator for the resize zone */
#oddsTable th[data-column="player_names_real"].resize-hover::after,
#oddsTable2 th[data-column="player_names_real"].resize-hover::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to right, transparent, rgba(0, 230, 118, 0.2));
    pointer-events: none;
}