/* Dark/Light Mode Variables */
.light-mode {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-sidebar: #f0f2f5;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --hover-bg: #e9ecef;
}

.dark-mode {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-sidebar: #0d1117;
    --bg-card: #161b22;
    --bg-card-hover: #1c2333;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --border-color: #30363d;
    --hover-bg: #1c2333;
    --accent-blue: #58a6ff;
    --accent-green: #3fb950;
    --accent-orange: #d29922;
    --accent-red: #f85149;
    --accent-purple: #bc8cff;
    --glow-blue: rgba(88,166,255,0.15);
    --glow-green: rgba(63,185,80,0.1);
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#app-container {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Desktop: lock to viewport so panels scroll independently */
    height: 100vh;
    overflow: hidden;
}

.top-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.6rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
}
.dark-mode .top-bar {
    background-color: #010409 !important;
    border-bottom-color: var(--border-color) !important;
    box-shadow: 0 1px 0 var(--border-color) !important;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.control-label {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.sidebar {
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    /* Responsive width: shrinks with viewport, respects min/max */
    width: clamp(220px, 26%, 380px);
    min-width: 220px;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
}
.dark-mode .sidebar {
    background-color: #010409 !important;
    border-right-color: var(--border-color) !important;
}

.game-button {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.15rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.88em;
    line-height: 1.4;
}

.game-button:hover {
    background-color: var(--hover-bg);
    border-left-color: var(--accent-blue, #1f77b4);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dark-mode .game-button {
    background-color: transparent !important;
    border-color: transparent !important;
    border-left: 3px solid transparent !important;
}
.dark-mode .game-button:hover {
    background-color: var(--hover-bg) !important;
    border-left-color: var(--accent-blue) !important;
}

.game-button-selected {
    background-color: #d1ecf1 !important;
    border: 1px solid #0c5460 !important;
    border-left: 3px solid #0c5460 !important;
}
.dark-mode .game-button-selected {
    background-color: rgba(88,166,255,0.08) !important;
    border: 1px solid rgba(88,166,255,0.3) !important;
    border-left: 3px solid var(--accent-blue) !important;
    color: #e6edf3 !important;
    box-shadow: 0 0 8px rgba(88,166,255,0.06) !important;
}

.game-button-flash {
    background-color: #fff3cd !important;
    border: 2px solid #ffc107 !important;
    animation: goal-flash 1s ease-in-out 3;
}
.dark-mode .game-button-flash {
    background-color: #4a3f00 !important;
    border: 2px solid #ffc107 !important;
}

.favorite-star {
    cursor: pointer;
    font-size: 1.2em;
    padding: 0.3rem;
    transition: transform 0.2s ease;
    display: inline-block;
    vertical-align: middle;
}

.favorite-star:hover {
    transform: scale(1.3);
}

.main-content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow-y: auto;  /* scrolls independently on desktop */
}
.dark-mode .main-content {
    background-color: #0d1117 !important;
}

/* The flex row that holds sidebar + main content */
#app-container > div:nth-child(2) {
    overflow: hidden;  /* clips each panel to its own scroll */
    flex: 1;
    min-height: 0;     /* critical: lets flex children shrink below content height */
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.nav-tabs .nav-link.active {
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    border-bottom-color: var(--bg-primary);
}

.export-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ========== RESPONSIVE SLIDERS ========== */

#games-slider {
    min-width: clamp(120px, 20vw, 400px);
}

#time-range-slider {
    min-width: clamp(120px, 15vw, 280px);
}

.control-group:has(#games-slider) {
    min-width: clamp(140px, 18vw, 260px);
}

.control-group:has(#time-range-slider) {
    min-width: clamp(140px, 15vw, 300px);
}

/* ============================================
   HAMBURGER / MOBILE HEADER
   Hidden on desktop, shown on mobile via media query
   ============================================ */

.topbar-mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
}

.topbar-brand {
    font-size: 1.1em;
    font-weight: 700;
    color: #1f77b4;
}

.hamburger-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1.3em;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    color: var(--text-primary);
    line-height: 1;
}

.dark-mode .hamburger-btn {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    background: transparent !important;
}

/* Desktop: always show controls, never show mobile header */
.topbar-controls { display: block; }
.topbar-controls.collapsed { display: block; }

/* Desktop brand — hidden on mobile (hamburger has its own) */
.desktop-brand { display: flex; align-items: center; }

/* Collapsible league groups in sidebar */
.league-group {
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.3rem;
}
.league-group:last-child {
    border-bottom: none;
}
.league-summary {
    cursor: pointer;
    padding: 0.45rem 0.4rem;
    list-style: none;
    display: flex;
    align-items: center;
    user-select: none;
    transition: background-color 0.15s ease;
    border-radius: 4px;
    gap: 0;
}
.league-summary:hover {
    background-color: var(--hover-bg);
}
.league-summary::-webkit-details-marker,
.league-summary::marker {
    display: none;
    content: '';
}
details.league-group > summary {
    list-style: none;
}
details.league-group > summary::-webkit-details-marker {
    display: none;
}
.league-summary::before {
    display: none;
}
.dark-mode .league-group {
    border-bottom-color: var(--border-color);
}

/* Scrollbar — subtle dark style */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ============================================
   COMPREHENSIVE DARK MODE OVERRIDES
   These use !important to override inline styles
   ============================================ */

/* --- Structural backgrounds --- */
.dark-mode {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}
.dark-mode .main-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}
.dark-mode .top-bar {
    background-color: #010409 !important;
    color: var(--text-primary) !important;
}

/* Card/panel backgrounds — darken ALL content divs in dark mode */
/* This catches every card regardless of inline backgroundColor */
.dark-mode .main-content > div {
    background-color: var(--bg-card) !important;
}
.dark-mode .main-content > div > div {
    background-color: transparent !important;
}

/* Betting notes card */
.dark-mode #betting-notes-card {
    background-color: var(--bg-card) !important;
}

/* Context display box */
.dark-mode #context-display {
    background-color: var(--bg-card) !important;
}

/* Accuracy report dark mode */
.dark-mode #accuracy-main-panel,
.dark-mode #accuracy-main-content {
    background-color: var(--bg-primary) !important;
}
/* Accuracy rows — override inline white/green/red backgrounds */
.dark-mode #accuracy-main-content div[style*="background-color: rgb(255, 255, 255)"],
.dark-mode #accuracy-main-content div[style*="backgroundColor: #ffffff"] {
    background-color: var(--bg-card) !important;
}
.dark-mode #accuracy-main-content div[style*="background-color: rgb(240, 255, 240)"],
.dark-mode #accuracy-main-content div[style*="backgroundColor: #f0fff0"] {
    background-color: #0d2818 !important;
}
.dark-mode #accuracy-main-content div[style*="background-color: rgb(255, 245, 245)"],
.dark-mode #accuracy-main-content div[style*="backgroundColor: #fff5f5"] {
    background-color: #280d0d !important;
}
/* Accuracy header and row borders */
.dark-mode #accuracy-main-content div[style*="border-bottom"] {
    border-color: var(--border-color) !important;
}
/* Accuracy sidebar tab content */
.dark-mode #accuracy-report-content {
    background-color: transparent !important;
}
.dark-mode #accuracy-report-content div[style*="background-color: rgb(255, 255, 255)"],
.dark-mode #accuracy-report-content div[style*="backgroundColor: #ffffff"] {
    background-color: var(--bg-card) !important;
}
.dark-mode #accuracy-report-content div[style*="background-color: rgb(240, 255, 240)"] {
    background-color: #0d2818 !important;
}
.dark-mode #accuracy-report-content div[style*="background-color: rgb(255, 245, 245)"] {
    background-color: #280d0d !important;
}

/* Inner step cards (matrix logic) — structural override */
.dark-mode .logic-step-card,
.dark-mode .logic-final-card {
    border-radius: 8px !important;
}

/* The colored-border section cards (SAPS, Notes, Context) — keep border color, darken bg */
.dark-mode .main-content > div[style*="border: 3px solid"],
.dark-mode .main-content > div[style*="border: 2px solid"] {
    background-color: var(--bg-card) !important;
    border-width: 1px !important;
    border-left-width: 3px !important;
    border-radius: 8px !important;
}

/* Analysis modules card */
.dark-mode .main-content > div[style*="border: 2px solid #dee2e6"] {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* --- Text: force all text to be legible --- */
.dark-mode p,
.dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode span,
.dark-mode label,
.dark-mode div {
    color: var(--text-primary) !important;
}
/* Plotly charts: let Plotly handle its own text colors */
.dark-mode .js-plotly-plot text {
    color: unset !important;
}
.dark-mode .js-plotly-plot div {
    color: unset !important;
}

/* Secondary/muted text — slightly dimmer but still readable */
.dark-mode p[style*="color: #555"],
.dark-mode p[style*="color: #666"],
.dark-mode p[style*="color: #444"],
.dark-mode p[style*="color: #999"],
.dark-mode p[style*="color: #6c757d"],
.dark-mode p[style*="color: #495057"],
.dark-mode span[style*="color: #555"],
.dark-mode span[style*="color: #666"],
.dark-mode span[style*="color: #444"],
.dark-mode span[style*="color: #495057"] {
    color: var(--text-secondary) !important;
}

/* Preserve white text on colored backgrounds */
.dark-mode *[style*="color: white"],
.dark-mode *[style*="color:#fff"],
.dark-mode *[style*="color: #fff"] {
    color: white !important;
}

/* Preserve intentionally colored text — these must come AFTER the general rule */
.dark-mode span[style*="color: #28a745"] { color: #28a745 !important; }
.dark-mode span[style*="color: #dc3545"] { color: #dc3545 !important; }
.dark-mode span[style*="color: #fd7e14"] { color: #fd7e14 !important; }
.dark-mode span[style*="color: #1f77b4"] { color: #1f77b4 !important; }
.dark-mode p[style*="color: #1f77b4"]   { color: #1f77b4 !important; }
.dark-mode h3[style*="color: #1f77b4"]  { color: #4da6ff !important; }
.dark-mode h4[style*="color: #28a745"]  { color: #5cd98a !important; }
.dark-mode h4[style*="color: #1f77b4"]  { color: #4da6ff !important; }
.dark-mode h5[style*="color: #495057"]  { color: var(--text-secondary) !important; }
.dark-mode h5[style*="color: #6f42c1"]  { color: #b388ff !important; }
.dark-mode h2[style*="color: #1f77b4"]  { color: #4da6ff !important; }
.dark-mode h2[style*="color: #28a745"]  { color: #5cd98a !important; }

/* Italic reasoning text */
.dark-mode p[style*="italic"] {
    color: var(--text-secondary) !important;
}

/* --- Form inputs --- */
.dark-mode input[type="text"],
.dark-mode input[type="search"],
.dark-mode textarea {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* --- Dash dropdowns (Select component) --- */
.dark-mode .Select-control,
.dark-mode .Select-placeholder,
.dark-mode .Select-value-label,
.dark-mode .Select-input input {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .Select-menu-outer,
.dark-mode .Select-option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .Select-option.is-focused {
    background-color: var(--hover-bg) !important;
}

.dark-mode .VirtualizedSelectOption {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .VirtualizedSelectFocusedOption {
    background-color: var(--hover-bg) !important;
}

/* --- Dash dcc.Dropdown — broad dark mode (Safari + Chrome + Firefox) --- */
.dark-mode .dash-dropdown .Select-control,
.dark-mode .dash-dropdown .Select-multi-value-wrapper,
.dark-mode .dash-dropdown .Select-placeholder,
.dark-mode .dash-dropdown .Select-value-label,
.dark-mode .dash-dropdown .Select-input > input,
.dark-mode .dash-dropdown .Select--single > .Select-control,
.dark-mode .dash-dropdown .Select--multi > .Select-control {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .dash-dropdown .Select-menu-outer {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .dash-dropdown .Select-option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.dark-mode .dash-dropdown .Select-option.is-focused,
.dark-mode .dash-dropdown .Select-option.is-selected {
    background-color: var(--hover-bg) !important;
}
.dark-mode .dash-dropdown .Select-arrow-zone,
.dark-mode .dash-dropdown .Select-clear-zone {
    color: var(--text-secondary) !important;
}

/* Dropdown container dark mode (no wildcard — avoids breaking nested elements) */
.dark-mode .dash-dropdown .Select,
.dark-mode .dash-dropdown .Select-control,
.dark-mode .dash-dropdown .Select-multi-value-wrapper,
.dark-mode .dash-dropdown .Select-menu-outer,
.dark-mode .dash-dropdown .Select-noresults,
.dark-mode .dash-dropdown .Select-input,
.dark-mode .dash-dropdown .Select-input input {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
/* Restore focused/selected option highlight */
.dark-mode .dash-dropdown .Select-option.is-focused,
.dark-mode .dash-dropdown .Select-option.is-selected,
.dark-mode .dash-dropdown .VirtualizedSelectFocusedOption {
    background-color: var(--hover-bg) !important;
}

/* --- Date picker dark mode --- */
.dark-mode .DateRangePickerInput,
.dark-mode .DateRangePickerInput__withBorder,
.dark-mode .DateInput,
.dark-mode .DateInput_input,
.dark-mode .DateInput_fang {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .DateRangePickerInput_arrow svg {
    fill: var(--text-secondary) !important;
}
/* Calendar popup */
.dark-mode .DayPicker,
.dark-mode .DayPicker__withBorder,
.dark-mode .CalendarMonth,
.dark-mode .CalendarMonth_table,
.dark-mode .CalendarMonthGrid,
.dark-mode .CalendarDay__default,
.dark-mode .DayPicker_weekHeader,
.dark-mode .DayPicker_weekHeader_li {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .CalendarDay__selected {
    background-color: #1f77b4 !important;
    color: white !important;
}
.dark-mode .CalendarDay__hovered_span,
.dark-mode .CalendarDay__selected_span {
    background-color: var(--hover-bg) !important;
}
.dark-mode .DayPickerNavigation_button {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .DayPickerNavigation_svg__horizontal {
    fill: var(--text-primary) !important;
}

/* --- Slider dark mode --- */
.dark-mode .rc-slider-rail {
    background-color: #444 !important;
}
.dark-mode .rc-slider-mark-text {
    color: var(--text-secondary) !important;
}
/* Slider tooltip */
.dark-mode .rc-slider-tooltip-inner {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* --- Top bar inputs: force dark on all white backgrounds --- */
.dark-mode .top-bar input,
.dark-mode .top-bar select,
.dark-mode .top-bar .Select,
.dark-mode .top-bar .Select * {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* --- Bootstrap tabs --- */
.dark-mode .nav-tabs {
    border-bottom-color: var(--border-color) !important;
}
.dark-mode .nav-tabs .nav-link {
    background-color: transparent !important;
    color: var(--text-secondary) !important;
    border-color: transparent !important;
    border-bottom: 2px solid transparent !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85em !important;
    transition: all 0.15s ease !important;
}
.dark-mode .nav-tabs .nav-link:hover {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
.dark-mode .nav-tabs .nav-link.active {
    background-color: transparent !important;
    color: var(--accent-blue) !important;
    border-color: transparent !important;
    border-bottom: 2px solid var(--accent-blue) !important;
}

.dark-mode .tab-content {
    background-color: transparent !important;
}

/* --- DatePicker --- */
.dark-mode .DateInput_input,
.dark-mode .DateRangePickerInput {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* --- Sidebar items --- */
.dark-mode .sidebar {
    background-color: #010409 !important;
}

/* --- Top-bar control labels --- */
.dark-mode .control-label {
    color: var(--text-secondary) !important;
}

/* --- Collapsible buttons (Bootstrap primary) --- */
.dark-mode .btn-primary {
    background-color: #2c5282 !important;
    border-color: #2c5282 !important;
    color: #e9ecef !important;
}

/* --- Preserve explicitly colored elements --- */
/* Green/red/orange/blue badges, confidence chips, H2H tags etc. */
.dark-mode span[style*="background"],
.dark-mode span[style*="backgroundColor"] {
    /* inherit from inline — do not override */
}

/* Preserve white text on colored backgrounds */
.dark-mode *[style*="color: white"],
.dark-mode *[style*="color:#fff"],
.dark-mode *[style*="'color': 'white'"] {
    color: white !important;
}

/* --- Matrix Logic wrapper --- */
.dark-mode .logic-analysis-wrapper {
    background-color: var(--bg-secondary) !important;
    border-color: #4da6ff !important;
}

/* H2H result team name colors */
.h2h-win  { color: #28a745 !important; font-weight: bold; }
.h2h-lose { color: #dc3545 !important; font-weight: bold; }
.h2h-draw { color: #fd7e14 !important; font-weight: bold; }
.dark-mode .h2h-win  { color: #5cd98a !important; }
.dark-mode .h2h-lose { color: #ff6b6b !important; }
.dark-mode .h2h-draw { color: #ffb347 !important; }

/* Risk flag text white in dark mode */
.dark-mode .risk-flag-item { color: #e9ecef !important; }
.dark-mode .weather-card {
    background-color: #0d2230 !important;
    color: #a8d8ea !important;
    border-color: rgba(88,166,255,0.2) !important;
}
/* Live Bet Analysis — light mode defaults */
.live-bet-card { background-color: #fff; }
.live-bet-title { color: #333; }
.live-bet-score { color: #333; }
.live-bet-reason { color: #555; }
.live-bet-market { background-color: rgba(0,0,0,0.02); }
.live-bet-goals { background-color: rgba(23,162,184,0.06); }

/* Dark mode: Live Bet Analysis */
.dark-mode .live-bet-card {
    background-color: var(--bg-card) !important;
    border-color: var(--accent-red) !important;
}
.dark-mode .live-bet-title { color: #e9ecef !important; }
.dark-mode .live-bet-score { color: #e9ecef !important; }
.dark-mode .live-bet-reason { color: #bbb !important; }
.dark-mode .live-bet-market {
    background-color: rgba(255,255,255,0.05) !important;
    color: #e9ecef !important;
}
.dark-mode .live-bet-market span { color: inherit; }
.dark-mode .live-bet-goals {
    background-color: rgba(23,162,184,0.15) !important;
    color: #e9ecef !important;
}

/* Dark mode: Standings table */
.dark-mode .standings-table {
    border-color: #444 !important;
}
.dark-mode .standings-header {
    background-color: var(--bg-secondary) !important;
    border-color: var(--accent-blue) !important;
    color: var(--text-primary) !important;
}
.dark-mode .standings-row {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.dark-mode .standings-row:hover {
    background-color: var(--hover-bg) !important;
}

.dark-mode .perf-comparison-card {
    background-color: var(--bg-card) !important;
    border-color: var(--accent-purple) !important;
    color: var(--text-primary) !important;
}
.dark-mode .perf-comparison-card div[style*="borderBottom"] {
    border-color: var(--border-color) !important;
}
.dark-mode .perf-comparison-card div[style*="backgroundColor: #ddd"] {
    background-color: var(--border-color) !important;
}

/* Team Profile butterfly card dark mode */
.dark-mode div[style*="border: 2px solid rgb(31, 119, 180)"],
.dark-mode div[style*="border: 2px solid #1f77b4"] {
    background-color: var(--bg-card) !important;
}
.dark-mode div[style*="backgroundColor: #e8eef4"],
.dark-mode div[style*="background-color: rgb(232, 238, 244)"] {
    background-color: var(--bg-secondary) !important;
}
.dark-mode div[style*="backgroundColor: #fafafa"],
.dark-mode div[style*="background-color: rgb(250, 250, 250)"] {
    background-color: var(--bg-card) !important;
}
.dark-mode div[style*="borderBottom: 1px solid #f0f0f0"],
.dark-mode div[style*="border-bottom: 1px solid rgb(240, 240, 240)"] {
    border-color: var(--border-color) !important;
}

/* Fatigue meter bar background in dark mode */
.dark-mode .logic-step-card div[style*="backgroundColor: #e9ecef"] {
    background-color: var(--border-color) !important;
}

/* --- Matrix Logic step cards (Step 1/2/3) --- */
.dark-mode .logic-step-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
}
.dark-mode .logic-step-card p,
.dark-mode .logic-step-card div {
    color: var(--text-primary) !important;
}
.dark-mode .logic-step-card p[style*="color: #555"],
.dark-mode .logic-step-card p[style*="color: #666"],
.dark-mode .logic-step-card p[style*="color: #999"],
.dark-mode .logic-step-card span[style*="color: #555"],
.dark-mode .logic-step-card span[style*="color: #888"],
.dark-mode .logic-step-card span[style*="color: #999"] {
    color: var(--text-secondary) !important;
}
/* Preserve colored text: W/D/L boxes, team colors, tag badges */
.dark-mode .logic-step-card span[style*="backgroundColor"] {
    color: white !important;
}
.dark-mode .logic-step-card span[style*="color: #28a745"] { color: #5cd98a !important; }
.dark-mode .logic-step-card span[style*="color: #dc3545"] { color: #ff6b6b !important; }
.dark-mode .logic-step-card span[style*="color: #fd7e14"] { color: #ffb347 !important; }
.dark-mode .logic-step-card span[style*="color: #ffc107"] { color: #ffe066 !important; }
.dark-mode .logic-step-card span[style*="color: #1f77b4"] { color: #4da6ff !important; }
.dark-mode .logic-step-card span[style*="color: #6f42c1"] { color: #b388ff !important; }
.dark-mode .logic-step-card span[style*="color: #ccc"]    { color: #555 !important; }
/* H2H match card background */
.dark-mode .logic-step-card p[style*="backgroundColor: #f8f9fa"],
.dark-mode .logic-step-card div[style*="backgroundColor: #f8f9fa"] {
    background-color: var(--bg-secondary) !important;
}

/* --- Matrix Logic final recommendation card --- */
.dark-mode .logic-final-card {
    background-color: #0d2818 !important;
    border: 1px solid rgba(63,185,80,0.3) !important;
    border-left: 4px solid var(--accent-green) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 15px rgba(63,185,80,0.06) !important;
}
.dark-mode .logic-final-card p,
.dark-mode .logic-final-card div,
.dark-mode .logic-final-card span,
.dark-mode .logic-final-card li,
.dark-mode .logic-final-card h6,
.dark-mode .logic-final-card ul {
    color: var(--text-primary) !important;
}
.dark-mode .logic-final-card h5[style*="color: #28a745"] { color: #5cd98a !important; }
.dark-mode .logic-final-card span[style*="color: #1f77b4"] { color: #4da6ff !important; }
.dark-mode .logic-final-card span[style*="backgroundColor"] { color: white !important; }

/* --- Analysis toggles checklist --- */
.dark-mode .form-check-label {
    color: var(--text-primary) !important;
}

/* --- dcc.Loading wrapper --- */
.dark-mode .dash-loading {
    background-color: var(--bg-secondary) !important;
}

/* --- Context Intelligence outer card --- */
.dark-mode .context-intelligence-card,
.dark-mode div[style*="border: 3px solid #28a745"] {
    background-color: var(--bg-secondary) !important;
    border-color: #28a745 !important;
}

/* Preserve green H2 heading inside context card */
.dark-mode .context-intelligence-card h2,
.dark-mode div[style*="border: 3px solid #28a745"] h2 {
    color: #5cd98a !important;
}

/* --- Bootstrap Alerts in dark mode --- */
.dark-mode .alert-success {
    background-color: #0d2b0d !important;
    color: #5cd98a !important;
    border-color: #28a745 !important;
}
.dark-mode .alert-warning {
    background-color: #2b1f00 !important;
    color: #ffc107 !important;
    border-color: #ffc107 !important;
}
.dark-mode .alert-danger {
    background-color: #2b0000 !important;
    color: #ff6b6b !important;
    border-color: #dc3545 !important;
}
.dark-mode .alert-info {
    background-color: #00222b !important;
    color: #63d4f5 !important;
    border-color: #17a2b8 !important;
}
.dark-mode .alert h4,
.dark-mode .alert p,
.dark-mode .alert hr {
    color: inherit !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* --- Context display monospace box --- */
.dark-mode #context-display {
    background-color: #1a1a2e !important;
    color: #a8d8a8 !important;
    border-color: var(--border-color) !important;
}

/* --- Scrollbars in dark mode --- */
.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-secondary) !important;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border-color) !important;
}


/* ============================================
   MOBILE RESPONSIVE DESIGN  (≤ 768px)
   ============================================ */

@media (max-width: 768px) {

    /* ===== UNLOCK VIEWPORT — scrollable page ===== */
    #app-container {
        height: auto !important;
        overflow: visible !important;
    }
    #app-container > div:nth-child(2) {
        flex-direction: column !important;
        overflow: visible !important;
        flex: none !important;
        min-height: 0 !important;
    }

    /* ===== TOP BAR — compact mobile menu ===== */
    .top-bar {
        padding: 0.4rem 0.75rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    /* Hide desktop brand on mobile */
    .desktop-brand { display: none !important; }

    /* Show hamburger row */
    .topbar-mobile-header {
        display: flex !important;
        margin-bottom: 0 !important;
    }

    /* Controls hidden by default, shown on hamburger tap */
    .topbar-controls {
        display: none !important;
    }
    .topbar-controls:not(.collapsed) {
        display: block !important;
        margin-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        border-top: 1px solid var(--border-color) !important;
    }
    .topbar-controls.collapsed {
        display: none !important;
    }

    /* Stack all control rows vertically */
    .topbar-controls > div {
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-top: 0.4rem !important;
    }

    /* Each control full width */
    .control-group {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-bottom: 0.3rem !important;
        flex: none !important;
    }
    .control-group[style*="minWidth"] {
        min-width: 100% !important;
        flex: none !important;
    }

    /* Sliders full width */
    #games-slider, #time-range-slider { min-width: 100% !important; }
    .larger-slider { height: 30px !important; }
    .control-label { font-size: 0.8em !important; }

    /* Date picker full width */
    .DateRangePickerInput, .DateInput { width: 100% !important; }

    /* Filter dropdowns full width */
    .topbar-controls .Select-control,
    .topbar-controls .dash-dropdown,
    .topbar-controls div[style*="minWidth"] {
        min-width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    /* Hide non-essential top-bar items */
    .top-bar .control-group:has(#view-mode) { display: none !important; }
    .top-bar .control-group:has(#export-csv-btn) { display: none !important; }
    #debug-toggle-btn, #settings-toggle-btn { display: none !important; }

    /* Action buttons: compact row */
    .topbar-controls div[style*="gap: 0.4rem"] {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    /* ===== SIDEBAR — game list ===== */
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 35vh !important;
        min-height: 100px !important;
        overflow-y: auto !important;
        border-right: none !important;
        border-bottom: 2px solid #1f77b4 !important;
        padding: 0.5rem !important;
    }
    #games-list { font-size: 0.85em !important; }
    .game-button {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.82em !important;
        margin-bottom: 0.2rem !important;
    }
    .favorite-star { display: none !important; }

    /* ===== MAIN CONTENT ===== */
    .main-content {
        width: 100% !important;
        padding: 0.5rem !important;
        overflow: visible !important;
        overflow-y: visible !important;
        min-width: 0 !important;
    }

    /* ===== GLOBAL OVERFLOW PREVENTION ===== */
    .main-content, .main-content > div, .logic-step-card {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* ===== LOGIC STEP CARDS — both teams must show ===== */
    /* Force step card layout containers to stack vertically */
    .logic-step-card div {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Only force block on the top-level layout divs (the flex row holding left/right columns) */
    .logic-step-card > div > div[style*="display: flex"][style*="gap"] {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    /* Make left/right column children full width */
    .logic-step-card > div > div > div[style*="flex"] {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Step card titles */
    .logic-step-card h5 { font-size: 1.1em !important; }

    /* H2H match rows: wrap text */
    .h2h-win, .h2h-lose, .h2h-draw { font-size: 0.78em !important; }

    /* Step 3 mini chart: full width, visible */
    .logic-step-card .js-plotly-plot {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 200px !important;
    }

    /* Final recommendation */
    .logic-final-card p { font-size: 1em !important; }

    /* ===== COLLAPSIBLE CARDS — keep all visible on mobile ===== */
    /* Only hide: betting notes, context intelligence, debug/settings panels */
    #betting-notes-card { display: none !important; }
    .context-intelligence-card { display: none !important; }
    #debug-info-panel { display: none !important; }
    #analysis-modules-card { display: none !important; }

    /* ===== CHARTS ===== */
    #game-figure, #butterfly-figure, #totals-butterfly {
        height: auto !important;
        min-height: 350px !important;
    }

    /* Form charts 2x2 grid → 1 column on mobile */
    .main-content div[style*="gridTemplateColumns: 1fr 1fr"],
    .main-content div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* ===== NEWS ROW ===== */
    #news-row { flex-direction: column !important; }
    #news-row > div { width: 100% !important; margin-bottom: 0.5rem !important; }

    /* ===== TABS ===== */
    .nav-tabs .nav-link { font-size: 0.8em !important; padding: 0.35rem 0.6rem !important; }

    /* ===== AI SECTIONS ===== */
    #saps-analysis-output, #context-display {
        font-size: 0.85em !important;
        padding: 0.75rem !important;
    }
    #ai-mode-toggle, #refresh-ai-btn, #bypass-cache-btn { display: none !important; }

    /* ===== IFRAMES (Opta etc.) ===== */
    .main-content iframe {
        height: 500px !important;
    }

    /* ===== TYPOGRAPHY ===== */
    h2 { font-size: 1.2em !important; }
    h4 { font-size: 1em !important; }
    h5 { font-size: 0.95em !important; }

    /* ===== DROPDOWNS ===== */
    .Select-control, .dash-dropdown { min-width: 100% !important; }

    /* ===== TABLES ===== */
    .main-content table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
    }
    .main-content pre {
        white-space: pre-wrap !important;
        word-break: break-all !important;
    }
}

/* ============================================
   TABLET OPTIMIZATION (769px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {

    .sidebar {
        width: clamp(160px, 28%, 280px) !important;
        min-width: 160px !important;
    }
    .top-bar { padding: 0.75rem !important; }

    /* Hamburger hidden on tablet — show full bar */
    .topbar-mobile-header { display: none !important; }
    .topbar-controls { display: block !important; }
    .topbar-controls.collapsed { display: block !important; }
}

/* Large screens: give sidebar a bit more room */
@media (min-width: 1400px) {
    .sidebar {
        width: clamp(220px, 18%, 360px);
    }
}


/* Force sidebar to appear BEFORE main content */
#app-container > div:nth-child(2) > div:first-child {
    order: 1 !important;
}

#app-container > div:nth-child(2) > div:last-child {
    order: 2 !important;
}


/* ===== FORCE CHARTS TO STACK VERTICALLY ON MOBILE ===== */

/* Make subplot containers stack vertically */
.subplot,
.plotly .subplot {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
}

/* Force full width for chart containers */
#game-figure .js-plotly-plot,
#butterfly-figure .js-plotly-plot,
#totals-butterfly .js-plotly-plot {
    width: 100% !important;
    height: auto !important;
}



#butterfly-figure,
#totals-butterfly {
    height: auto !important;
    min-height: 800px !important;
}

/* Override Plotly grid layout on mobile */
.plotly .gridlayer,
.plotly .plot {
    width: 100% !important;
}

/* Make each subplot full width */
.plotly .subplot {
    width: 100% !important;
}


.dashboard-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    gap: 0.5rem;
}

.graph-container {
    height: 60vh;
    min-height: 500px;
    max-height: 800px;
}

.info-cards-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scroll-snap-type: x mandatory;
}

.info-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 8px;
    background: white;
}

@media (max-width: 768px) {
    .graph-container {
        height: 50vh;
        min-height: 400px;
    }
}

/* ── Goal flash animation ─────────────────────────────────── */
@keyframes goal-flash {
    0%   { background-color: #fff3cd; }
    50%  { background-color: #ffc107; }
    100% { background-color: #fff3cd; }
}

/* ── Live score pulse ─────────────────────────────────────── */
@keyframes pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.6; }
    100% { opacity: 1; }
}

/* ── Tooltip for quick stats on hover ─────────────────────── */
.game-row .hover-tooltip {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    min-width: 280px;
    max-width: 340px;
    font-size: 0.78em;
    pointer-events: none;
    white-space: normal;
}
.game-row:hover .hover-tooltip {
    display: block;
    animation: tooltip-fade 1s forwards;
}

@keyframes tooltip-fade {
    0%   { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}
.dark-mode .game-row .hover-tooltip {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Debug panel dark mode */
.dark-mode #debug-info-panel {
    background-color: #2a2a3a !important;
    border-color: #665500 !important;
}
.dark-mode #debug-info-panel * {
    color: #e0d8b0 !important;
}
.dark-mode #debug-info-panel strong {
    color: #f0d870 !important;
}
.dark-mode #debug-info-panel span[id] {
    background-color: #3a3520 !important;
    color: #f5e880 !important;
    border-color: #665500 !important;
}

/* Settings panel dark mode */
.dark-mode #analysis-modules-card {
    background-color: #2a2a3a !important;
    border-color: #495057 !important;
}
.dark-mode #analysis-modules-card strong {
    color: #b0b0b0 !important;
}

/* Toast notification dark mode */
.dark-mode .toast {
    background-color: #2a2a3a !important;
    border-color: #495057 !important;
    color: #e9ecef !important;
}
.dark-mode .toast .toast-header {
    background-color: #343a40 !important;
    color: #e9ecef !important;
    border-bottom-color: #495057 !important;
}
.dark-mode .toast .toast-header .btn-close {
    filter: invert(1) !important;
}
.dark-mode .toast .toast-body {
    color: #ccc !important;
}

/* Dark mode: Leagues DataTable */
.dark-mode .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: #2a2a3a !important;
    color: #e9ecef !important;
    border-color: #444 !important;
}
.dark-mode .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: #3a3a5a !important;
    color: #e9ecef !important;
    border-color: #555 !important;
}
.dark-mode .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input {
    background-color: #333 !important;
    color: #e9ecef !important;
}
.dark-mode .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:nth-child(odd) td {
    background-color: #333345 !important;
}
.dark-mode .dash-table-container .previous-next-container .page-number {
    color: #e9ecef !important;
}
.dark-mode .dash-table-container .previous-next-container button {
    color: #e9ecef !important;
}

/* Dark mode: Plotly charts — minimal CSS overrides (Python handles the rest) */
/* Only set container background; chart internals are styled by Plotly callbacks */
.dark-mode .js-plotly-plot .plot-container {
    background: transparent !important;
}

/* ============================================
   PROF4.PY — Desktop defaults
   ============================================ */

/* Desktop: sidebar-panel always shows, top-bar hamburger hidden */
#prof-app-container .top-bar .topbar-mobile-header {
    display: none;
}

#prof-app-container .sidebar-panel {
    display: flex !important;
}

#prof-app-container .sidebar-panel.collapsed {
    display: flex !important;
}

/* Prof4 sidebar: constrain width and prevent overflow */
#prof-app-container .sidebar {
    width: clamp(280px, 25%, 380px);
    min-width: 280px;
    max-width: 380px;
    flex-shrink: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box;
}

/* All children inside prof4 sidebar must respect container width */
#prof-app-container .sidebar > div,
#prof-app-container .sidebar .dash-slider,
#prof-app-container .sidebar .rc-slider,
#prof-app-container .sidebar .Select,
#prof-app-container .sidebar input,
#prof-app-container .sidebar .dash-dropdown {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================
   PROF4.PY — Mobile (≤ 768px)
   ============================================ */

@media (max-width: 768px) {

    #prof-app-container {
        height: auto !important;
        overflow: visible !important;
    }

    #prof-app-container .top-bar .topbar-mobile-header {
        display: flex !important;
    }

    #prof-app-container .sidebar-panel {
        flex-direction: column !important;
        overflow: visible !important;
    }

    #prof-app-container .sidebar-panel.collapsed .sidebar {
        display: none !important;
    }

    #prof-app-container .sidebar-panel .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: 12px 16px !important;
    }

    #prof-app-container .main-content {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0.5rem !important;
        overflow-x: hidden !important;
    }

    /* Main dashboard chart: responsive height */
    #prof-app-container #main-dashboard {
        height: auto !important;
        min-height: 600px !important;
    }

    /* Slider overflow fix */
    #prof-app-container .sidebar .rc-slider,
    #prof-app-container .sidebar .dash-slider {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #prof-app-container .sidebar .rc-slider-mark {
        font-size: 10px !important;
    }

    /* Logic step cards stack vertically */
    #prof-app-container .logic-step-card > div > div[style*="display: flex"] {
        flex-direction: column !important;
    }

    #prof-app-container .logic-step-card div[style*="flex: 1"],
    #prof-app-container .logic-step-card div[style*="flex: 0"] {
        min-width: 100% !important;
        width: 100% !important;
    }

    /* Overflow prevention */
    #prof-app-container .main-content,
    #prof-app-container .main-content > div {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* News row stacks */
    #prof-app-container #news-row {
        flex-direction: column !important;
    }

    #prof-app-container #news-row > div {
        width: 100% !important;
    }
}