/* ===========================================
   F1 Fantasy League Dark Theme
   Dash 4.0 compatible

   Dash bundles its CSS inside JavaScript files.
   At runtime, JS injects <style> elements AFTER
   user CSS loads, so Dash's :root defaults would
   win by cascade order. Using !important on custom
   property declarations guarantees our dark values
   always take precedence.
   =========================================== */

/* Override ALL Dash CSS custom properties for dark theme */
:root {
    --Dash-Spacing: 4px !important;
    --Dash-Stroke-Strong: #8B8D98 !important;
    --Dash-Stroke-Weak: #555770 !important;
    --Dash-Fill-Interactive-Strong: #E10600 !important;
    --Dash-Fill-Interactive-Weak: #262A3A !important;
    --Dash-Fill-Inverse-Strong: #1E2130 !important;
    --Dash-Text-Primary: #FAFAFA !important;
    --Dash-Text-Strong: #FAFAFA !important;
    --Dash-Text-Weak: #B0B3C0 !important;
    --Dash-Text-Disabled: #8B8D98 !important;
    --Dash-Fill-Primary-Hover: rgba(225, 6, 0, 0.1) !important;
    --Dash-Fill-Primary-Active: #E10600 !important;
    --Dash-Fill-Disabled: #333649 !important;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.5) !important;
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.3) !important;
}

/* Base dark background */
body {
    background-color: #0E1117;
    color: #FAFAFA;
    font-family: 'Calibri', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Prevent white flash on load */
._dash-loading {
    background-color: transparent !important;
}

/* Graph containers */
.dash-graph {
    background-color: transparent !important;
}

/* Global text color */
div {
    color: #FAFAFA;
}

p, span, label, h1, h2, h3, h4, h5, h6 {
    color: #FAFAFA !important;
}

/* Dropdown hover state */
.dash-dropdown-option:hover {
    background: #E10600 !important;
    color: white !important;
}

/* Selected dropdown option */
.dash-options-list-option.selected {
    background: #262A3A !important;
    color: #FAFAFA !important;
}

/* Dropdown search input text */
.dash-dropdown-search-container input {
    color: #FAFAFA !important;
    background: transparent !important;
}

/* Dropdown action buttons */
.dash-dropdown-action-button {
    color: #B0B3C0 !important;
}

.dash-dropdown-action-button:hover {
    color: #E10600 !important;
}

/* Card styling */
.dashboard-card {
    background-color: #1E2130;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Table styling */
table {
    background-color: #1E2130 !important;
    color: #FAFAFA !important;
}

th {
    background-color: #E10600 !important;
    color: white !important;
    font-weight: bold !important;
    padding: 12px !important;
}

td {
    padding: 10px !important;
    border-bottom: 1px solid #8B8D98 !important;
}

tr:hover {
    background-color: #262A3A !important;
}

/* Input fields */
input {
    background: #1E2130 !important;
    color: #FAFAFA !important;
    border: 1px solid #8B8D98 !important;
}

input:focus {
    border-color: #E10600 !important;
    outline: none !important;
}

/* Dash input container */
.dash-input-container {
    background: #1E2130 !important;
    border-color: #8B8D98 !important;
}

/* Plotly chart text */
.gtitle, .xtitle, .ytitle {
    fill: #FAFAFA !important;
}

/* ===================================================
   Responsive / Mobile Layout
   =================================================== */

/* Navigation bar */
.nav-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

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

/* Four-column grid (Leaders, Race Results) */
.four-col-grid {
    display: flex;
    flex-wrap: wrap;
}

.four-col {
    flex: 1 1 25%;
    min-width: 0;
}

/* Team Analysis two-column layout */
.team-detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Horizontally scrollable wrapper for wide tables */
.scrollable-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Content area padding */
.content-area {
    box-sizing: border-box;
}

/* Refresh button */
.refresh-btn {
    white-space: nowrap;
}

/* ---- Tablet breakpoint (≤ 900px) ---- */
@media screen and (max-width: 900px) {
    /* Stack four-col into 2 × 2 grid */
    .four-col {
        flex: 1 1 48%;
        min-width: 48%;
    }

    /* Stack team analysis columns */
    .team-detail-grid {
        flex-direction: column;
    }
    .team-left-col,
    .team-right-col {
        width: 100% !important;
        display: block !important;
        margin-right: 0 !important;
    }
}

/* ---- Phone breakpoint (≤ 600px) ---- */
@media screen and (max-width: 600px) {
    /* Wrap nav vertically */
    .nav-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .nav-filter-item {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-filter-item .dash-dropdown {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Single-column leaders / race results */
    .four-col {
        flex: 1 1 100%;
        min-width: 100%;
    }

    /* Reduce content padding */
    .content-area {
        padding: 10px !important;
    }

    /* Smaller header text */
    h1 {
        font-size: 1.3rem !important;
    }
    h3 {
        font-size: 1.1rem !important;
    }

    /* Charts: prevent overflow and allow scroll */
    .dash-graph {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Plotly chart: enforce minimum usable width */
    .js-plotly-plot {
        min-width: 320px;
    }
}