/* Dark Theme Overrides */
body, html {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

#map {
    left: 60px !important;
    bottom: 100px !important;
}

/* Header Dark Theme */
.header {
    top: 0 !important;
    left: 60px !important;
    height: 60px !important;
    background: #1f1f1f !important;
    border-bottom: 1px solid #333 !important;
    border-radius: 0 !important;
}

/* Timeline Dark Theme */
.timeline-control {
    left: 60px !important;
    height: 100px !important;
    background: #1f1f1f !important;
    border-top: 1px solid #333 !important;
}

.play-button {
    background: #3b82f6 !important;
}

.play-button:hover {
    background: #2563eb !important;
}

.current-date {
    color: #ffffff !important;
}

.date-button {
    background: transparent !important;
    border: 1px solid #444 !important;
    color: #9ca3af !important;
}

.date-button:hover {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

.year-labels {
    color: #9ca3af !important;
}

.frame-counter-label {
    color: #9ca3af !important;
}

.frame-counter-value {
    color: #ffffff !important;
}

/* Time Series Panel Dark Theme */
.time-series-panel {
    background: #1f1f1f !important;
    border: 1px solid #333 !important;
    top: 80px !important;
    bottom: 120px !important;
}

.panel-header {
    border-bottom: 1px solid #333 !important;
}

.panel-title h3 {
    color: #ffffff !important;
}

.panel-title p {
    color: #9ca3af !important;
}

.close-button {
    background: transparent !important;
    border: 1px solid #444 !important;
    color: #9ca3af !important;
}

.close-button:hover {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

.stat-card {
    background: #2a2a2a !important;
    border: 1px solid #333 !important;
}

.stat-label {
    color: #9ca3af !important;
}

.stat-value {
    color: #ffffff !important;
}

.stat-unit {
    color: #9ca3af !important;
}

.chart-title {
    color: #ffffff !important;
}

.chart-wrapper {
    background: #2a2a2a !important;
    border: 1px solid #333 !important;
}

.table-wrapper {
    background: #2a2a2a !important;
    border: 1px solid #333 !important;
}

.measurements-table thead {
    background: #1f1f1f !important;
}

.measurements-table th {
    color: #ffffff !important;
    border-bottom: 1px solid #333 !important;
}

.measurements-table td {
    color: #9ca3af !important;
    border-bottom: 1px solid #333 !important;
}