/* Override Tabulator's mobile-specific styles */

/* Use a solid background to prevent gradient bleed-through on horizontal scroll */
:root {
    --table-row-bg: #0a0a0a;
}

/* Override Tabulator default #888 gray - prevents flash during touch/scroll gestures */
.tabulator,
#starting-soon-table.tabulator,
#tournaments-table.tabulator,
.starting-soon-shell .tabulator,
.live-tournaments .tabulator,
.tabulator .tabulator-tableholder,
.tabulator .tabulator-table,
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-header-contents,
.tabulator .tabulator-header .tabulator-headers,
.tabulator .tabulator-col,
.tabulator .tabulator-placeholder {
    background-color: #0a0a0a !important;
    background-image: none !important;
}

/* Apply to ALL viewports - both desktop and mobile */
.tabulator-row {
    background-color: var(--table-row-bg) !important;
}

/* Desktop - cells can be transparent since row has background */
@media (min-width: 769px) {
    .tabulator-cell {
        background-color: transparent !important;
    }
}

/* Mobile - cells need explicit background to prevent scrolling issues */
@media (max-width: 768px) {
    .tabulator-cell,
    .tabulator-row .tabulator-cell,
    #starting-soon-table .tabulator-cell,
    #tournaments-table .tabulator-cell {
        background-color: var(--table-row-bg) !important;
    }

    /* Allow status and tournament title to wrap - rows adjust for content readability */
    .tabulator-cell[tabulator-field="status"],
    .tabulator-cell[tabulator-field="title"] {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        vertical-align: middle !important;
    }

    .tabulator-cell[tabulator-field="status"] .tab-status,
    .tabulator-cell[tabulator-field="title"] .tab-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: block !important;
    }

    .tab-status.with-countdown {
        white-space: normal !important;
    }
}

/* Consistent status indicators across all viewports */
.tabulator-row.row-live {
    box-shadow: inset 4px 0 0 rgba(0, 230, 118, 0.8) !important;
}

.tabulator-row.row-upcoming {
    box-shadow: inset 4px 0 0 rgba(255, 215, 0, 0.8) !important;
}

.tabulator-row.row-completed {
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.25) !important;
}

/* Debug: Add colored borders to see structure */
.debug-mode .tabulator {
    border: 3px solid red !important;
}

.debug-mode .tabulator-tableholder {
    border: 3px solid blue !important;
}

.debug-mode .tabulator-table {
    border: 3px solid green !important;
}

.debug-mode .tabulator-row {
    border: 2px solid yellow !important;
}

.debug-mode .tabulator-cell {
    border: 1px solid orange !important;
}