/* Win Probability table variables */
:root {
    --pr-diff-bg: light-dark(#f0f0f0, #3a3a54);
    --high-win-bg: light-dark(#d4edda, #2d5a3d);
    --medium-win-bg: light-dark(#fff3cd, #5a5220);
    --low-win-bg: light-dark(#cce5ff, #1e3a5f);
    --neutral-win-bg: light-dark(#f8f8f8, #333344);
    --table-header: light-dark(#667eea, #4a5568);
    --table-even: light-dark(#f8f9fa, #2a2a3e);
}

/* Table base styling */
#winProbabilityTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#winProbabilityTable th,
#winProbabilityTable td {
    padding: 8px;
    text-align: center;
    border: 1px solid var(--table-border);
}

#winProbabilityTable th {
    background-color: var(--table-header);
    color: var(--text-light);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    height: auto;
}

#winProbabilityTable th small {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.8;
}

#winProbabilityTable tbody tr:nth-child(even) {
    background-color: var(--table-even);
}

/* ER Diff values styling (desktop header row, mobile match headers) */
.er-diff-header {
    background-color: var(--pr-diff-bg) !important;
    color: var(--text-color) !important;
}

/* ER value cells in mobile mode - same color as corner header */
.er-value-cell {
    background-color: var(--table-header) !important;
    color: var(--text-light) !important;
}

/* Match length cells in first column (desktop mode) */
.match-length-header {
    background-color: var(--pr-diff-bg) !important;
    color: var(--text-color) !important;
}

/* Win Probability Table hover improvements */
#winProbabilityTable tr:hover {
    background-color: light-dark(var(--table-hover), #4a4a6a);
}

#winProbabilityTable tr:hover td {
    color: light-dark(var(--text-color), #e8e8e8);
}

/* Table cell coloring classes */
.pr-diff-cell {
    background-color: var(--pr-diff-bg) !important;
}

/* Probability cell colors */
.prob-cell {
    transition: all 0.2s ease;
}

.prob-high-confidence {
    background-color: var(--high-win-bg) !important;
}

.prob-medium-confidence {
    background-color: var(--medium-win-bg) !important;
}

.prob-low-confidence {
    background-color: var(--low-win-bg) !important;
}

.prob-none {
    background-color: var(--neutral-win-bg) !important;
}

/* Table with legend container */
.table-with-legend-container {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
}

.table-container {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    overflow-x: auto;
    max-width: 100%;
}

.table-wrapper {
    overflow-x: auto;
    height: 500px;
    overflow-y: auto;
}

/* Legend styles */
.probability-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
    padding: 8px;
    font-size: 11px;
    flex-shrink: 0;
    align-self: center;
    min-width: fit-content;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid light-dark(#ccc, #555);
}

.legend-color.high-confidence {
    background-color: var(--high-win-bg);
}

.legend-color.medium-confidence {
    background-color: var(--medium-win-bg);
}

.legend-color.low-confidence {
    background-color: var(--low-win-bg);
}

.legend-color.no-data {
    background-color: var(--neutral-win-bg);
}

.legend-text {
    color: var(--text-color);
    white-space: nowrap;
}

/* Desktop: table needs horizontal scrolling */
@media (min-width: 768px) and (max-width: 1175px) {
    .table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    #winProbabilityTable {
        width: auto;
        min-width: fit-content;
    }

    #winProbabilityTable th,
    #winProbabilityTable td {
        padding: 8px;
        min-width: 45px;
    }

    #winProbabilityTable th:first-child,
    .match-length-header {
        min-width: 80px;
    }
}

/* Medium screens - no scrolling needed, legend below */
@media (min-width: 1176px) and (max-width: 1350px) {
    .table-container {
        justify-content: center;
        overflow-x: auto;
    }

    #winProbabilityTable {
        width: auto;
    }
}

/* Very large screens - side by side layout */
@media (min-width: 1351px) {
    #winProbabilityTable {
        max-width: 100%;
        width: auto;
    }

    #winProbabilityTable th,
    #winProbabilityTable td {
        padding: 8px;
        min-width: 45px;
    }

    #winProbabilityTable th:first-child,
    .match-length-header {
        min-width: 80px;
    }
}

/* Medium screens: Stack legend below table when not enough space */
@media (max-width: 1350px) {
    .table-with-legend-container {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .table-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    .probability-legend {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-top: 0;
    }

    .legend-item {
        margin: 0 8px;
    }
}

/* Responsive design for smaller screens (mobile mode) */
@media (max-width: 768px) {
    .table-with-legend-container {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .table-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .probability-legend {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        font-size: 10px;
    }

    .legend-item {
        margin: 0 4px;
    }

    #winProbabilityTable {
        max-width: 400px;
        font-size: 12px;
    }

    #winProbabilityTable th,
    #winProbabilityTable td {
        padding: 6px;
        font-size: 11px;
    }
}

/* Very small screens: Enable horizontal scrolling for table */
@media (max-width: 480px) {
    .table-container {
        width: 100%;
        padding: 0;
    }

    #winProbabilityTable {
        min-width: 320px;
    }

    .probability-legend {
        padding: 8px 4px;
        font-size: 9px;
    }

    .legend-color {
        width: 14px;
        height: 14px;
    }
}