body.darkTheme {
    background-color: #1a1a2e;
    color: #e0e0e0;
}

.darkTheme .logoLogin {
    background-color: #16213e;
    color: #a0c4ff;
}

.darkTheme .loginOptions a {
    color: #a0c4ff;
}

.darkTheme .logoLogin span {
    color: #c9a84c !important;
}

.darkTheme .logoLogin a {
    color: #a0c4ff;
}

.darkTheme .menuStrip {
    background: linear-gradient(to right, #0a1628, #000000);
    border-bottom: 1px solid #333;
}

.darkTheme .menuStrip a:hover {
    background-color: #0d1b36;
}

.darkTheme .activeNav {
    background-color: #060d1f;
}

.darkTheme .mainContainer {
    background-color: #1a1a2e;
    color: #e0e0e0;
}

.darkTheme footer {
    background: #16213e;
}

/* portal navigation panel */
.darkTheme .mainPortalNav {
    background: linear-gradient(to bottom, #0a1628, #0f2240e4, #12294a9d);
}

.darkTheme .activeTabNav {
    background-color: #020510;
    box-shadow: 0 0 10px #020510;
}

/* forms and inputs */
.darkTheme .form-control {
    background-color: #16213e;
    color: #e0e0e0;
    border-color: #2a3a5c;
}

.darkTheme .form-control:focus {
    background-color: #1a2744;
    color: #e0e0e0;
    border-color: #4a6fa5;
}

.darkTheme .form-control::placeholder {
    color: #8899aa;
}

/* controls bar */
.darkTheme .controlsBar {
    background: rgba(26, 26, 46, 0.95) !important;
    color: #e0e0e0 !important;
    border: 1px solid #2a3a5c;
}

.darkTheme .controlBtn {
    background: #16213e;
    color: #e0e0e0;
    border-color: #2a3a5c;
}

.darkTheme .controlBtn:hover {
    background: #1a2744;
    border-color: #4a6fa5;
}

.darkTheme .timeInfo {
    color: #a0c4ff !important;
}

.darkTheme .speedControl label,
.darkTheme .speedControl span {
    color: #8899aa !important;
}

.darkTheme .speedControl {
    border-left-color: #2a3a5c !important;
}

/* legend */
.darkTheme .legend {
    background-color: #16213e !important;
    border-color: #2a3a5c !important;
    color: #e0e0e0;
}

/* popups */
.darkTheme .leaflet-popup-content-wrapper {
    background-color: #16213e;
    color: #e0e0e0;
}

.darkTheme .leaflet-popup-tip {
    background: #16213e;
}

/* tables */
.darkTheme .table {
    color: #e0e0e0;
}

/* cards and alerts */
.darkTheme .alert-info {
    background-color: #16213e;
    color: #a0c4ff;
    border-color: #2a3a5c;
}

/* auth pages */
.darkTheme .card {
    background-color: #16213e;
    border-color: #2a3a5c;
}

.darkTheme .card-header {
    background-color: #0f2240;
    border-color: #2a3a5c;
}

/* toggle button */
.themeToggle {
    cursor: pointer;
    background: transparent;
    color: #174c92;
    border: none;
    font-size: 20px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s;
}

.themeToggle:hover {
    color: #0f3666;
}

.darkTheme .themeToggle {
    background: transparent;
    color: white;
}

.darkTheme .themeToggle:hover {
    color: #e0e0e0;
}

/* dark theme: user section */
.darkTheme .userName {
    color: white;
}

.darkTheme .userHandle {
    color: white;
}

.darkTheme .avatarWrapper {
    border-color: #a0c4ff;
}

.darkTheme .avatarWrapper:hover {
    border-color: #c9a84c;
}

.darkTheme .avatarInitials {
    background: linear-gradient(135deg, #0f2240, #2a3a5c);
}

.darkTheme .userDropdown {
    background: #16213e;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.darkTheme .userDropdown a {
    color: #e0e0e0;
}

.darkTheme .userDropdown a:hover {
    background-color: #0f2240;
    color: #a0c4ff;
}

/* tools strip & panel */
.darkTheme .toolsStrip {
    background: rgba(22, 33, 62, 0.88);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.darkTheme .toolsStripIcon {
    color: #a0c4ff;
}

.darkTheme .toolsStripIcon:hover {
    background: rgba(160, 196, 255, 0.12);
}

.darkTheme .toolsPanel {
    background: rgba(22, 33, 62, 0.55);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.darkTheme .toolsPanelHeader {
    color: #a0c4ff;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.darkTheme .toolsPanelClose {
    color: #667;
}

.darkTheme .toolsPanelClose:hover {
    color: #a0c4ff;
}

.darkTheme .toolsPanelItem {
    color: #e0e0e0;
}

.darkTheme .toolsPanelItem:hover {
    background: rgba(160, 196, 255, 0.1);
    color: #a0c4ff;
}

.darkTheme .toolsPanelItemIcon {
    color: #a0c4ff;
}

.darkTheme .toolsPanelItem.active {
    background: rgba(160, 196, 255, 0.18);
    color: #a0c4ff;
}

.darkTheme .splitLayerSelect select {
    background: rgba(22, 33, 62, 0.8);
    color: #e0e0e0;
    border-color: rgba(160, 196, 255, 0.3);
}

.darkTheme .splitLayerSelect select:focus {
    border-color: #a0c4ff;
}

.darkTheme .splitDivider {
    background: rgba(160, 196, 255, 0.2);
}

/* chart panel */
.darkTheme .chartPanel {
    background: rgba(22, 33, 62, 0.82);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.darkTheme .chartTitle {
    color: #a0c4ff;
}

.darkTheme .chartCoords {
    color: #667;
}

.darkTheme .chartPanelClose {
    color: #667;
}

.darkTheme .chartPanelClose:hover {
    color: #ff6b6b;
}

.darkTheme .chartProgress {
    background: rgba(255, 255, 255, 0.06);
}

.darkTheme .chartProgressBar {
    background: linear-gradient(90deg, #a0c4ff, #60a5fa);
}

.darkTheme .chartCompareToggle {
    color: #667;
    border-color: rgba(255,255,255,0.1);
}

.darkTheme .chartCompareToggle:hover {
    border-color: #a0c4ff;
    color: #a0c4ff;
}

.darkTheme .chartCompareToggle.active {
    background: #60a5fa;
    color: #0a1628;
    border-color: #60a5fa;
}

.darkTheme .toolsOpacityRow {
    border-top-color: rgba(255,255,255,0.06);
}

.darkTheme .toolsOpacityLabel,
.darkTheme .toolsOpacityValue {
    color: #667;
}

.darkTheme .toolsOpacityRow input[type="range"] {
    accent-color: #60a5fa;
}

.darkTheme .zonalShapeBtn {
    color: #667;
    border-color: rgba(255,255,255,0.1);
}

.darkTheme .zonalShapeBtn:hover {
    border-color: #a0c4ff;
    color: #a0c4ff;
}

.darkTheme .zonalShapeBtn.active {
    background: #60a5fa;
    color: #0a1628;
    border-color: #60a5fa;
}

.darkTheme .chartCustomLegend {
    color: #8899aa;
}

.darkTheme .chartLegendKey {
    color: #667;
}

.darkTheme .chartFocusToggle {
    color: #667;
    border-color: rgba(255,255,255,0.1);
}

.darkTheme .chartFocusToggle:hover {
    border-color: #a0c4ff;
    color: #a0c4ff;
}

.darkTheme .chartFocusToggle.active {
    background: #60a5fa;
    color: #0a1628;
    border-color: #60a5fa;
}

.darkTheme .splitLegend {
    background-color: #16213e;
    border-color: #2a3a5c;
    color: #e0e0e0;
}