/**
 * Dark Mode Styles for WTFosphere Configurator
 * Applied when user prefers dark scheme OR toggles manually
 */

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
    --dm-bg-primary: #1a1a1a;
    --dm-bg-secondary: #252525;
    --dm-bg-tertiary: #333333;
    --dm-bg-hover: #3d3d3d;

    --dm-text-primary: #f0f0f0;
    --dm-text-secondary: #b8b8b8;
    --dm-text-muted: #888888;

    --dm-border: #404040;
    --dm-border-light: #333333;

    --dm-accent: #4ecdc4;
    --dm-accent-hover: #45b7aa;
}

/* ============================================
   Dark mode detection and manual toggle
   ============================================ */

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
    body:not(.light-mode) {
        --configurator-bg: var(--dm-bg-primary);
    }

    body:not(.light-mode) #module-library,
    body:not(.light-mode) .left-sidebar {
        background: var(--dm-bg-secondary) !important;
        border-color: var(--dm-border) !important;
    }

    body:not(.light-mode) #module-library h3,
    body:not(.light-mode) .section-title {
        color: var(--dm-text-primary) !important;
        background: var(--dm-bg-tertiary) !important;
    }

    body:not(.light-mode) .module-category {
        border-color: var(--dm-border) !important;
    }

    body:not(.light-mode) .module-category-header {
        background: var(--dm-bg-tertiary) !important;
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .module-item {
        background: var(--dm-bg-secondary) !important;
        border-color: var(--dm-border) !important;
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .module-item:hover {
        background: var(--dm-bg-hover) !important;
    }

    body:not(.light-mode) .module-item .module-name {
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .module-item .module-price,
    body:not(.light-mode) .module-item .module-category-label {
        color: var(--dm-text-secondary) !important;
    }

    /* Header */
    body:not(.light-mode) #header {
        background: var(--dm-bg-secondary) !important;
        border-color: var(--dm-border) !important;
    }

    body:not(.light-mode) .btn,
    body:not(.light-mode) .header-btn {
        background: var(--dm-bg-tertiary) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border) !important;
    }

    body:not(.light-mode) .btn:hover,
    body:not(.light-mode) .header-btn:hover {
        background: var(--dm-bg-hover) !important;
    }

    /* Keep colored buttons */
    body:not(.light-mode) .btn.teal,
    body:not(.light-mode) .header-btn.teal {
        background: #15635E !important;
        color: white !important;
    }

    body:not(.light-mode) .btn.cyan,
    body:not(.light-mode) .header-btn.cyan {
        background: #0891b2 !important;
        color: white !important;
    }

    body:not(.light-mode) .btn.pink,
    body:not(.light-mode) .header-btn.pink {
        background: #db2777 !important;
        color: white !important;
    }

    /* Dropdowns */
    body:not(.light-mode) .dropdown-panel,
    body:not(.light-mode) #share-dropdown,
    body:not(.light-mode) #more-tools-dropdown {
        background: var(--dm-bg-secondary) !important;
        border-color: var(--dm-border) !important;
    }

    body:not(.light-mode) .tool-item {
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .tool-item:hover {
        background: var(--dm-bg-hover) !important;
    }

    /* Right panel / pricing */
    body:not(.light-mode) #module-preview-section,
    body:not(.light-mode) .right-panel,
    body:not(.light-mode) .pricing-panel {
        background: var(--dm-bg-secondary) !important;
        border-color: var(--dm-border) !important;
    }

    body:not(.light-mode) .pricing-row {
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border) !important;
    }

    body:not(.light-mode) .pricing-label {
        color: var(--dm-text-secondary) !important;
    }

    /* Modals */
    body:not(.light-mode) .modal-content,
    body:not(.light-mode) .wizard-modal,
    body:not(.light-mode) .kit-modal {
        background: var(--dm-bg-secondary) !important;
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .modal-header,
    body:not(.light-mode) .modal-footer {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
    }

    body:not(.light-mode) .modal-title {
        color: var(--dm-text-primary) !important;
    }

    /* Kit cards */
    body:not(.light-mode) .kit-card {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
    }

    body:not(.light-mode) .kit-card:hover {
        background: var(--dm-bg-hover) !important;
    }

    body:not(.light-mode) .kit-name {
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .kit-description,
    body:not(.light-mode) .kit-price {
        color: var(--dm-text-secondary) !important;
    }

    /* Inputs */
    body:not(.light-mode) input,
    body:not(.light-mode) textarea,
    body:not(.light-mode) select {
        background: var(--dm-bg-tertiary) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border) !important;
    }

    body:not(.light-mode) input::placeholder,
    body:not(.light-mode) textarea::placeholder {
        color: var(--dm-text-muted) !important;
    }

    /* Tooltips and popovers */
    body:not(.light-mode) .tooltip,
    body:not(.light-mode) [role="tooltip"] {
        background: var(--dm-bg-tertiary) !important;
        color: var(--dm-text-primary) !important;
    }

    /* Unit toggle */
    body:not(.light-mode) .header-unit-toggle {
        background: var(--dm-bg-tertiary) !important;
    }

    body:not(.light-mode) .unit-toggle-btn {
        color: var(--dm-text-secondary) !important;
    }

    body:not(.light-mode) .unit-toggle-btn.active {
        background: var(--dm-accent) !important;
        color: var(--dm-bg-primary) !important;
    }

    /* Mobile panel */
    body:not(.light-mode) .mobile-bottom-panel,
    body:not(.light-mode) #mobile-modules-panel {
        background: var(--dm-bg-secondary) !important;
    }

    body:not(.light-mode) .mobile-tab {
        color: var(--dm-text-secondary) !important;
    }

    body:not(.light-mode) .mobile-tab.active {
        color: var(--dm-accent) !important;
    }

    /* Scrollbars */
    body:not(.light-mode) ::-webkit-scrollbar-track {
        background: var(--dm-bg-primary);
    }

    body:not(.light-mode) ::-webkit-scrollbar-thumb {
        background: var(--dm-bg-hover);
    }

    body:not(.light-mode) ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

/* ============================================
   Manual dark mode class (overrides system)
   ============================================ */
body.dark-mode #module-library,
body.dark-mode .left-sidebar {
    background: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode #module-library h3,
body.dark-mode .section-title {
    color: var(--dm-text-primary) !important;
    background: var(--dm-bg-tertiary) !important;
}

body.dark-mode .module-category {
    border-color: var(--dm-border) !important;
}

body.dark-mode .module-category-header {
    background: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .module-item {
    background: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .module-item:hover {
    background: var(--dm-bg-hover) !important;
}

body.dark-mode .module-item .module-name {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .module-item .module-price,
body.dark-mode .module-item .module-category-label {
    color: var(--dm-text-secondary) !important;
}

/* Header */
body.dark-mode #header {
    background: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .btn,
body.dark-mode .header-btn {
    background: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .btn:hover,
body.dark-mode .header-btn:hover {
    background: var(--dm-bg-hover) !important;
}

/* Keep colored buttons */
body.dark-mode .btn.teal,
body.dark-mode .header-btn.teal {
    background: #15635E !important;
    color: white !important;
}

body.dark-mode .btn.cyan,
body.dark-mode .header-btn.cyan {
    background: #0891b2 !important;
    color: white !important;
}

body.dark-mode .btn.pink,
body.dark-mode .header-btn.pink {
    background: #db2777 !important;
    color: white !important;
}

/* Dropdowns */
body.dark-mode .dropdown-panel,
body.dark-mode #share-dropdown,
body.dark-mode #more-tools-dropdown {
    background: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .tool-item {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .tool-item:hover {
    background: var(--dm-bg-hover) !important;
}

/* Right panel / pricing */
body.dark-mode #module-preview-section,
body.dark-mode .right-panel,
body.dark-mode .pricing-panel {
    background: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .pricing-row {
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .pricing-label {
    color: var(--dm-text-secondary) !important;
}

/* Modals */
body.dark-mode .modal-content,
body.dark-mode .wizard-modal,
body.dark-mode .kit-modal {
    background: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    background: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .modal-title {
    color: var(--dm-text-primary) !important;
}

/* Kit cards */
body.dark-mode .kit-card {
    background: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .kit-card:hover {
    background: var(--dm-bg-hover) !important;
}

body.dark-mode .kit-name {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .kit-description,
body.dark-mode .kit-price {
    color: var(--dm-text-secondary) !important;
}

/* Inputs */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dm-text-muted) !important;
}

/* Tooltips */
body.dark-mode .tooltip,
body.dark-mode [role="tooltip"] {
    background: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}

/* Unit toggle */
body.dark-mode .header-unit-toggle {
    background: var(--dm-bg-tertiary) !important;
}

body.dark-mode .unit-toggle-btn {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .unit-toggle-btn.active {
    background: var(--dm-accent) !important;
    color: var(--dm-bg-primary) !important;
}

/* Mobile panel */
body.dark-mode .mobile-bottom-panel,
body.dark-mode #mobile-modules-panel {
    background: var(--dm-bg-secondary) !important;
}

body.dark-mode .mobile-tab {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .mobile-tab.active {
    color: var(--dm-accent) !important;
}

/* Scrollbars */
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-primary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dm-bg-hover);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================
   Desktop Toolbar — Dark Mode overrides
   ============================================ */
@media (min-width: 901px) {
    body.dark-mode #header-actions,
    body:not(.light-mode) #header-actions {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: var(--dm-border) !important;
    }

    body.dark-mode #header-actions .header-btn,
    body:not(.light-mode) #header-actions .header-btn {
        color: var(--dm-text-secondary) !important;
        background: transparent !important;
    }

    body.dark-mode #header-actions .header-btn:hover,
    body:not(.light-mode) #header-actions .header-btn:hover {
        background: var(--dm-bg-hover) !important;
        color: var(--dm-text-primary) !important;
    }

    body.dark-mode .toolbar-divider,
    body:not(.light-mode) .toolbar-divider {
        background: var(--dm-border) !important;
    }

    body.dark-mode #header-actions .header-btn.share-accent,
    body:not(.light-mode) #header-actions .header-btn.share-accent {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border) !important;
    }

    body.dark-mode #header-actions .header-btn.share-accent:hover,
    body:not(.light-mode) #header-actions .header-btn.share-accent:hover {
        background: rgba(255, 255, 255, 0.18) !important;
    }

    body.dark-mode #header-actions .undo-redo-btn,
    body:not(.light-mode) #header-actions .undo-redo-btn {
        color: var(--dm-text-muted) !important;
        background: transparent !important;
    }

    body.dark-mode #header-actions .undo-redo-btn:not(:disabled),
    body:not(.light-mode) #header-actions .undo-redo-btn:not(:disabled) {
        color: var(--dm-text-secondary) !important;
    }

    body.dark-mode #header-actions .undo-redo-btn:not(:disabled):hover,
    body:not(.light-mode) #header-actions .undo-redo-btn:not(:disabled):hover {
        background: var(--dm-bg-hover) !important;
        color: var(--dm-text-primary) !important;
    }

    body.dark-mode #header-actions .start-over-btn,
    body:not(.light-mode) #header-actions .start-over-btn {
        color: var(--dm-text-muted) !important;
        border-color: var(--dm-border) !important;
        background: transparent !important;
    }

    body.dark-mode #header-actions .start-over-btn:hover,
    body:not(.light-mode) #header-actions .start-over-btn:hover {
        color: var(--dm-text-secondary) !important;
        background: var(--dm-bg-hover) !important;
    }

    /* ─── Row 2 buttons ─── */
    body.dark-mode .row2-btn,
    body:not(.light-mode) .row2-btn {
        color: var(--dm-text-muted) !important;
    }

    body.dark-mode .row2-btn:hover,
    body:not(.light-mode) .row2-btn:hover {
        background: var(--dm-bg-hover) !important;
        color: var(--dm-text-primary) !important;
    }

    body.dark-mode .row2-btn.active,
    body:not(.light-mode) .row2-btn.active {
        background: rgba(78, 205, 196, 0.15) !important;
        color: var(--dm-accent) !important;
    }

    body.dark-mode .row2-btn-cta,
    body:not(.light-mode) .row2-btn-cta {
        background: #E8AF00 !important;
        color: #1a1a1a !important;
    }

    body.dark-mode .row2-btn-cta:hover,
    body:not(.light-mode) .row2-btn-cta:hover {
        background: #FFD700 !important;
    }

    /* ─── Properties Panel ─── */
    body.dark-mode .properties-panel,
    body:not(.light-mode) .properties-panel {
        background: rgba(25, 25, 25, 0.95) !important;
        border-color: var(--dm-border) !important;
    }

    body.dark-mode .props-header,
    body:not(.light-mode) .props-header {
        color: var(--dm-text-secondary) !important;
    }

    body.dark-mode .props-header:hover,
    body:not(.light-mode) .props-header:hover {
        background: var(--dm-bg-tertiary) !important;
        color: var(--dm-text-primary) !important;
    }

    body.dark-mode .props-section.open .props-header,
    body:not(.light-mode) .props-section.open .props-header {
        color: var(--dm-text-primary) !important;
        background: var(--dm-bg-tertiary) !important;
    }

    body.dark-mode .props-section,
    body:not(.light-mode) .props-section {
        border-color: var(--dm-border-light) !important;
    }

    /* Properties panel content: env/weather/time/camera options */
    body.dark-mode .properties-panel .env-option,
    body.dark-mode .properties-panel .weather-option,
    body:not(.light-mode) .properties-panel .env-option,
    body:not(.light-mode) .properties-panel .weather-option {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
        color: var(--dm-text-secondary) !important;
    }

    body.dark-mode .properties-panel .env-option:hover,
    body.dark-mode .properties-panel .weather-option:hover,
    body:not(.light-mode) .properties-panel .env-option:hover,
    body:not(.light-mode) .properties-panel .weather-option:hover {
        background: var(--dm-bg-hover) !important;
        color: var(--dm-text-primary) !important;
    }

    body.dark-mode .properties-panel .env-option.active,
    body.dark-mode .properties-panel .weather-option.active,
    body:not(.light-mode) .properties-panel .env-option.active,
    body:not(.light-mode) .properties-panel .weather-option.active {
        background: rgba(78, 205, 196, 0.2) !important;
        border-color: var(--dm-accent) !important;
        color: var(--dm-text-primary) !important;
    }

    body.dark-mode .properties-panel .time-preset,
    body:not(.light-mode) .properties-panel .time-preset {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
        color: var(--dm-text-secondary) !important;
    }

    body.dark-mode .properties-panel .time-preset:hover,
    body:not(.light-mode) .properties-panel .time-preset:hover {
        background: var(--dm-bg-hover) !important;
        color: var(--dm-text-primary) !important;
    }

    body.dark-mode .properties-panel .time-preset.active,
    body:not(.light-mode) .properties-panel .time-preset.active {
        background: rgba(232, 175, 0, 0.2) !important;
        border-color: #E8AF00 !important;
        color: var(--dm-text-primary) !important;
    }

    body.dark-mode .properties-panel .camera-preset-btn,
    body:not(.light-mode) .properties-panel .camera-preset-btn {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
        color: var(--dm-text-secondary) !important;
    }

    body.dark-mode .properties-panel .camera-preset-btn:hover,
    body:not(.light-mode) .properties-panel .camera-preset-btn:hover {
        background: var(--dm-bg-hover) !important;
        color: var(--dm-text-primary) !important;
    }

    body.dark-mode .properties-panel .dimension-box,
    body:not(.light-mode) .properties-panel .dimension-box {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
    }

    body.dark-mode .properties-panel .dimension-label,
    body:not(.light-mode) .properties-panel .dimension-label {
        color: var(--dm-text-muted) !important;
    }

    body.dark-mode .properties-panel .dimension-value,
    body:not(.light-mode) .properties-panel .dimension-value {
        color: var(--dm-text-primary) !important;
    }

    body.dark-mode .properties-panel .dimension-toggle-btn,
    body.dark-mode .properties-panel .explode-btn,
    body:not(.light-mode) .properties-panel .dimension-toggle-btn,
    body:not(.light-mode) .properties-panel .explode-btn {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
        color: var(--dm-text-secondary) !important;
    }

    body.dark-mode .properties-panel .dimension-toggle-btn:hover,
    body.dark-mode .properties-panel .explode-btn:hover,
    body:not(.light-mode) .properties-panel .dimension-toggle-btn:hover,
    body:not(.light-mode) .properties-panel .explode-btn:hover {
        background: var(--dm-bg-hover) !important;
        color: var(--dm-text-primary) !important;
    }

    body.dark-mode .properties-panel .explode-description,
    body.dark-mode .properties-panel .explode-status,
    body:not(.light-mode) .properties-panel .explode-description,
    body:not(.light-mode) .properties-panel .explode-status {
        color: var(--dm-text-muted) !important;
    }

    body.dark-mode .properties-panel .tool-section-label,
    body:not(.light-mode) .properties-panel .tool-section-label {
        color: var(--dm-text-muted) !important;
    }

    body.dark-mode .properties-panel .sun-time-display,
    body:not(.light-mode) .properties-panel .sun-time-display {
        color: var(--dm-text-muted) !important;
    }
}

/* ============================================
   Tool Windows — Dark Mode (mobile fallback)
   These have ZERO dark mode styles currently
   ============================================ */
body.dark-mode .tool-window {
    background: var(--dm-bg-secondary) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .tool-window-header {
    background: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .tool-window-header h4 {
    color: var(--dm-accent) !important;
}

body.dark-mode .tool-window-close {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .tool-window-close:hover {
    color: #ff6b6b !important;
}

body.dark-mode .tool-window-body {
    color: var(--dm-text-primary) !important;
}

/* Tool window content: env/weather/time/camera/dimension/explode */
body.dark-mode .env-option,
body.dark-mode .weather-option {
    background: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .env-option:hover,
body.dark-mode .weather-option:hover {
    background: var(--dm-bg-hover) !important;
    border-color: var(--dm-accent) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .env-option.active,
body.dark-mode .weather-option.active {
    background: rgba(78, 205, 196, 0.2) !important;
    border-color: var(--dm-accent) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .time-preset {
    background: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .time-preset:hover {
    background: var(--dm-bg-hover) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .time-preset.active {
    background: rgba(232, 175, 0, 0.2) !important;
    border-color: #E8AF00 !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .camera-preset-btn {
    background: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .camera-preset-btn:hover {
    background: var(--dm-bg-hover) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .dimension-box {
    background: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .dimension-label {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .dimension-value {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .dimension-toggle-btn,
body.dark-mode .explode-btn {
    background: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .dimension-toggle-btn:hover,
body.dark-mode .explode-btn:hover {
    background: var(--dm-bg-hover) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .explode-description,
body.dark-mode .explode-status {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .sun-time-display {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .tool-section-label {
    color: var(--dm-text-muted) !important;
}

/* Repeat for prefers-color-scheme dark */
@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .tool-window {
        background: var(--dm-bg-secondary) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    }

    body:not(.light-mode) .tool-window-header {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
    }

    body:not(.light-mode) .tool-window-header h4 {
        color: var(--dm-accent) !important;
    }

    body:not(.light-mode) .tool-window-close {
        color: var(--dm-text-muted) !important;
    }

    body:not(.light-mode) .tool-window-close:hover {
        color: #ff6b6b !important;
    }

    body:not(.light-mode) .tool-window-body {
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .env-option,
    body:not(.light-mode) .weather-option {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
        color: var(--dm-text-secondary) !important;
    }

    body:not(.light-mode) .env-option:hover,
    body:not(.light-mode) .weather-option:hover {
        background: var(--dm-bg-hover) !important;
        border-color: var(--dm-accent) !important;
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .env-option.active,
    body:not(.light-mode) .weather-option.active {
        background: rgba(78, 205, 196, 0.2) !important;
        border-color: var(--dm-accent) !important;
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .time-preset {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
        color: var(--dm-text-secondary) !important;
    }

    body:not(.light-mode) .time-preset:hover {
        background: var(--dm-bg-hover) !important;
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .time-preset.active {
        background: rgba(232, 175, 0, 0.2) !important;
        border-color: #E8AF00 !important;
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .camera-preset-btn {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
        color: var(--dm-text-secondary) !important;
    }

    body:not(.light-mode) .camera-preset-btn:hover {
        background: var(--dm-bg-hover) !important;
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .dimension-box {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
    }

    body:not(.light-mode) .dimension-label {
        color: var(--dm-text-muted) !important;
    }

    body:not(.light-mode) .dimension-value {
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .dimension-toggle-btn,
    body:not(.light-mode) .explode-btn {
        background: var(--dm-bg-tertiary) !important;
        border-color: var(--dm-border) !important;
        color: var(--dm-text-secondary) !important;
    }

    body:not(.light-mode) .dimension-toggle-btn:hover,
    body:not(.light-mode) .explode-btn:hover {
        background: var(--dm-bg-hover) !important;
        color: var(--dm-text-primary) !important;
    }

    body:not(.light-mode) .explode-description,
    body:not(.light-mode) .explode-status {
        color: var(--dm-text-muted) !important;
    }

    body:not(.light-mode) .sun-time-display {
        color: var(--dm-text-muted) !important;
    }

    body:not(.light-mode) .tool-section-label {
        color: var(--dm-text-muted) !important;
    }
}

/* ============================================
   Dark Mode Toggle Button
   ============================================ */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ddd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s, background-color 0.3s;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
}

.dark-mode-toggle i {
    font-size: 20px;
    color: #333;
    transition: color 0.3s;
}

/* In dark mode, style the toggle button */
body.dark-mode .dark-mode-toggle,
@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .dark-mode-toggle {
        background: rgba(50, 50, 50, 0.9);
        border-color: #555;
    }

    body:not(.light-mode) .dark-mode-toggle i {
        color: #f0f0f0;
    }
}

body.dark-mode .dark-mode-toggle {
    background: rgba(50, 50, 50, 0.9);
    border-color: #555;
}

body.dark-mode .dark-mode-toggle i {
    color: #f0f0f0;
}

/* Icon switching */
.dark-mode-toggle .fa-sun {
    display: none;
}

.dark-mode-toggle .fa-moon {
    display: block;
}

body.dark-mode .dark-mode-toggle .fa-sun {
    display: block;
}

body.dark-mode .dark-mode-toggle .fa-moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .dark-mode-toggle .fa-sun {
        display: block;
    }

    body:not(.light-mode) .dark-mode-toggle .fa-moon {
        display: none;
    }
}

/* ============================================
   Smooth transitions
   ============================================ */
body,
#header,
#module-library,
.module-item,
.btn,
.modal-content,
.dropdown-panel,
input,
textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}