/* =============================================================================
   ECLIPSEFAN THEME - CONTROLS & TIMELINE
   =============================================================================
   Dark/Astro theme overrides for time control, unified timeline,
   and landscape mobile mode.
   Depends on: design-tokens.css
   ============================================================================= */

/* --- Dark/Astro mode: Time control --- */
[data-theme="dark"] .time-control {
    background: var(--color-bg-elevated);
}

[data-theme="dark"] .time-control .time-control-header {
    border-color: var(--color-border);
}

[data-theme="dark"] .time-control .time-control-header:hover {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .time-control .time-control-title {
    color: var(--color-text-primary);
}

[data-theme="dark"] .time-control h4 {
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

[data-theme="dark"] .time-control label {
    color: var(--color-text-primary);
}

[data-theme="dark"] .time-control .eclipse-info {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

[data-theme="dark"] .time-control button:not(.help-btn-inline) {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="dark"] .time-control button:not(.help-btn-inline):hover {
    background: var(--color-bg-secondary);
}

[data-theme="astro"] .time-control {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
}

[data-theme="astro"] .time-control .time-control-header {
    border-color: var(--color-border);
}

[data-theme="astro"] .time-control .time-control-header:hover {
    background: var(--color-bg-secondary);
}

[data-theme="astro"] .time-control .time-control-title {
    color: var(--color-text-primary);
}

[data-theme="astro"] .time-control h4 {
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

[data-theme="astro"] .time-control label {
    color: var(--color-text-primary);
}

[data-theme="astro"] .time-control .time-display {
    color: var(--color-accent);
}

[data-theme="astro"] .time-control .eclipse-info {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

[data-theme="astro"] .time-control button:not(.help-btn-inline) {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="astro"] .time-control button:not(.help-btn-inline):hover {
    background: var(--color-bg-secondary);
}

[data-theme="astro"] .time-control button.active {
    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    border-color: var(--color-accent);
}

/* --- Dark mode: Timeline --- */
[data-theme="dark"] .unified-timeline .timeline-datetime,
[data-theme="dark"] .unified-timeline .timeline-slider-row {
    background: var(--color-bg-overlay);
}

[data-theme="dark"] .unified-timeline .step-value {
    color: var(--color-text-primary);
}

[data-theme="dark"] .unified-timeline .nav-btn {
    background: var(--color-bg-overlay);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .unified-timeline .nav-btn:hover {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .unified-timeline .nav-btn.nav-now {
    color: var(--color-accent);
}

[data-theme="dark"] .unified-timeline .separator {
    color: var(--color-text-tertiary);
}

[data-theme="dark"] .unified-timeline .timeline-slider::-webkit-slider-runnable-track {
    background: var(--color-border);
}

[data-theme="dark"] .unified-timeline .timeline-slider::-moz-range-track {
    background: var(--color-border);
}

[data-theme="dark"] .unified-timeline .slider-label {
    color: var(--color-accent);
}

/* --- Astro mode: Timeline --- */
[data-theme="astro"] .unified-timeline .timeline-datetime,
[data-theme="astro"] .unified-timeline .timeline-slider-row {
    background: var(--color-bg-overlay);
    border: 1px solid var(--color-border);
}

[data-theme="astro"] .unified-timeline .step-value {
    color: var(--color-text-primary);
}

[data-theme="astro"] .unified-timeline .nav-btn {
    background: var(--color-bg-overlay);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

[data-theme="astro"] .unified-timeline .nav-btn:hover {
    background: var(--color-bg-tertiary);
}

[data-theme="astro"] .unified-timeline .nav-btn.nav-now {
    color: var(--color-accent);
}

[data-theme="astro"] .unified-timeline .nav-btn.nav-now:hover {
    background: var(--color-bg-tertiary);
}

[data-theme="astro"] .unified-timeline .separator {
    color: var(--color-text-tertiary);
}

[data-theme="astro"] .unified-timeline .timeline-slider::-webkit-slider-runnable-track {
    background: var(--color-border);
}

[data-theme="astro"] .unified-timeline .timeline-slider::-moz-range-track {
    background: var(--color-border);
}

[data-theme="astro"] .unified-timeline .timeline-slider::-webkit-slider-thumb {
    background: var(--color-accent);
}

[data-theme="astro"] .unified-timeline .timeline-slider::-moz-range-thumb {
    background: var(--color-accent);
}

[data-theme="astro"] .unified-timeline .slider-label {
    color: var(--color-accent);
}


/* =============================================================================
   16. LANDSCAPE MOBILE MODE THEMING
   =============================================================================
   Overrides for landscape mobile (max-height: 500px and min-width: 500px)
   These need to be inside the same media query to override mobile.css
   ============================================================================= */

@media (max-height: 500px) and (min-width: 500px) {
    /* Dark mode: Bottom sheet */
    [data-theme="dark"] .bottom-sheet {
        background: var(--color-bg-primary) !important;
    }

    [data-theme="dark"] .handle-bar {
        background: var(--color-border-strong) !important;
    }

    [data-theme="dark"] .bottom-sheet-header {
        border-color: var(--color-border) !important;
    }

    [data-theme="dark"] .bs-location-name,
    [data-theme="dark"] .bs-max-time {
        color: var(--color-text-primary) !important;
    }

    [data-theme="dark"] .bs-duration {
        color: var(--color-accent) !important;
    }

    [data-theme="dark"] .bs-tabs {
        border-color: var(--color-border) !important;
    }

    [data-theme="dark"] .bs-tab {
        color: var(--color-text-secondary) !important;
    }

    [data-theme="dark"] .bs-tab.active {
        color: var(--color-accent) !important;
        border-bottom-color: var(--color-accent) !important;
    }

    [data-theme="dark"] .bs-compact-label {
        color: var(--color-text-secondary) !important;
    }

    [data-theme="dark"] .bs-compact-value {
        color: var(--color-text-primary) !important;
    }

    [data-theme="dark"] .bs-weather-stats-title {
        color: var(--color-text-primary) !important;
    }

    [data-theme="dark"] .bs-weather-stats {
        background: var(--color-bg-secondary) !important;
    }

    [data-theme="dark"] .bs-weather-stat-row {
        border-color: var(--color-border) !important;
    }

    [data-theme="dark"] .bs-weather-stat-label {
        color: var(--color-text-secondary) !important;
    }

    [data-theme="dark"] .bs-weather-stat-value {
        color: var(--color-text-primary) !important;
    }

    [data-theme="dark"] .bs-weather-years-title {
        color: var(--color-text-secondary) !important;
    }

    [data-theme="dark"] .bs-weather-year-item {
        background: var(--color-bg-tertiary) !important;
    }

    [data-theme="dark"] .bs-weather-year-label {
        color: var(--color-text-tertiary) !important;
    }

    [data-theme="dark"] .bs-weather-year-value {
        color: var(--color-text-primary) !important;
    }

    [data-theme="dark"] .bs-skyline-canvas-container {
        background: var(--color-bg-tertiary) !important;
    }

    /* Astro mode: Bottom sheet */
    [data-theme="astro"] .bottom-sheet {
        background: var(--color-bg-primary) !important;
        border-right: 1px solid var(--color-border) !important;
    }

    [data-theme="astro"] .handle-bar {
        background: var(--color-border-strong) !important;
    }

    [data-theme="astro"] .bottom-sheet-header {
        border-color: var(--color-border) !important;
    }

    [data-theme="astro"] .bs-location-name,
    [data-theme="astro"] .bs-max-time {
        color: var(--color-text-primary) !important;
    }

    [data-theme="astro"] .bs-duration {
        color: var(--color-accent) !important;
    }

    [data-theme="astro"] .bs-type-badge.total {
        background: var(--color-accent) !important;
    }

    [data-theme="astro"] .bs-tabs {
        border-color: var(--color-border) !important;
        background: var(--color-bg-primary) !important;
    }

    [data-theme="astro"] .bs-tab {
        color: var(--color-text-secondary) !important;
    }

    [data-theme="astro"] .bs-tab.active {
        color: var(--color-accent) !important;
        border-bottom-color: var(--color-accent) !important;
    }

    [data-theme="astro"] .bs-compact-label {
        color: var(--color-text-secondary) !important;
    }

    [data-theme="astro"] .bs-compact-value {
        color: var(--color-text-primary) !important;
    }

    [data-theme="astro"] .bs-weather-stats-title {
        color: var(--color-text-primary) !important;
    }

    [data-theme="astro"] .bs-weather-stats {
        background: var(--color-bg-secondary) !important;
    }

    [data-theme="astro"] .bs-weather-stat-row {
        border-color: var(--color-border) !important;
    }

    [data-theme="astro"] .bs-weather-stat-label {
        color: var(--color-text-secondary) !important;
    }

    [data-theme="astro"] .bs-weather-stat-value {
        color: var(--color-text-primary) !important;
    }

    [data-theme="astro"] .bs-weather-years-title {
        color: var(--color-text-secondary) !important;
    }

    [data-theme="astro"] .bs-weather-year-item {
        background: var(--color-bg-tertiary) !important;
    }

    [data-theme="astro"] .bs-weather-year-label {
        color: var(--color-text-tertiary) !important;
    }

    [data-theme="astro"] .bs-weather-year-value {
        color: var(--color-text-primary) !important;
    }

    [data-theme="astro"] .bs-weather-year-value.good {
        color: #993333 !important;
    }

    [data-theme="astro"] .bs-weather-year-value.medium {
        color: #aa4422 !important;
    }

    [data-theme="astro"] .bs-weather-year-value.bad {
        color: #cc3333 !important;
    }

    [data-theme="astro"] .bs-skyline-canvas-container {
        background: var(--color-bg-tertiary) !important;
    }
}