/* DARK MODE: stations-list nền tối triệt để (body KHÔNG có .white-content = dark mode) */
body:not(.white-content) .stations-list,
body:not(.white-content) #stationsList {
    background: #23263a !important;
    color: #f8fafc !important;
    border-radius: 14px !important;
    border: 1px solid #35395a !important;
    box-shadow: 0 8px 28px #23263a33, 0 2px 8px #0003 !important;
}
body:not(.white-content) .stations-list .station-card,
body:not(.white-content) #stationsList .station-card {
    background: #23263a !important;
    color: #f8fafc !important;
    border: 1px solid #35395a !important;
    box-shadow: 0 2px 8px #23263a33 !important;
}
/* DARK MODE text color for heading, label, text (KHÔNG override .aqi-value) */
body:not(.white-content) #stationsList {
    color: #f8fafc !important;
}
body:not(.white-content) #stationsList h4,
body:not(.white-content) #stationsList h6 {
    color: #ffe082 !important;
}
body:not(.white-content) #stationsList .font-weight-bold {
    color: #fff !important;
}
body:not(.white-content) #stationsList .text-muted,
body:not(.white-content) #stationsList .small {
    color: #7dd3fc !important;
}

body:not(.white-content) #airQualityResult {
    color: #f8fafc !important;
}
body:not(.white-content) #airQualityResult h4,
body:not(.white-content) #airQualityResult h6 {
    color: #ffe082 !important;
}
body:not(.white-content) #airQualityResult .font-weight-bold {
    color: #fff !important;
}
body:not(.white-content) #airQualityResult .text-muted,
body:not(.white-content) #airQualityResult .small {
    color: #7dd3fc !important;
}
body:not(.white-content) #airQualityResult .aqi-description {
    color: #b0b3c7 !important;
}
/* The switch - the box around the slider */
.switch {
    --width-of-switch: 3.5em;
    --height-of-switch: 2em;
    /* size of sliding icon -- sun and moon */
    --size-of-icon: 1.4em;
    /* it is like a inline-padding of switch */
    --slider-offset: 0.3em;
    position: relative;
    width: var(--width-of-switch);
    height: var(--height-of-switch);
    margin-bottom: 0;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #eaeaea;
    transition: .4s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: var(--size-of-icon,1.4em);
    width: var(--size-of-icon,1.4em);
    border-radius: 20px;
    left: var(--slider-offset,0.3em);
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(40deg,#ff0080,#ff8c00 70%);
;
    transition: .4s;
}

input:checked + .slider {
    background-color: #303136;
}

input:checked + .slider:before {
    left: calc(100% - (var(--size-of-icon,1.4em) + var(--slider-offset,0.3em)));
    background: #303136;
    /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}

/* Forecast section dark mode - CHỈ apply khi ở dark mode */
body:not(.white-content) #forecast-section {
    color: #f8fafc !important;
}

/* DARK MODE ONLY - forecast cards */
body:not(.white-content) #forecast-section .forecast-zigzag-card {
    background: linear-gradient(135deg, #23263a 60%, #35395a22 100%) !important;
    color: #f8fafc !important;
    border: 1px solid #35395a !important;
    box-shadow: 0 4px 16px rgba(35, 38, 58, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body:not(.white-content) #forecast-section .forecast-zigzag-card:hover {
    box-shadow: 0 8px 32px rgba(35, 38, 58, 0.6), 0 4px 16px rgba(102, 126, 234, 0.2) !important;
    transform: translateY(-6px) scale(1.05) !important;
    border-color: #667eea !important;
}

/* LIGHT MODE - đảm bảo forecast cards giữ màu trắng */
body.white-content #forecast-section .forecast-zigzag-card {
    background: linear-gradient(135deg, #fff 60%, var(--aqi-color, #00e676)22 100%) !important;
    color: #333 !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

body.white-content #forecast-section .forecast-zigzag-card:hover {
    box-shadow: 0 8px 32px #667eea33, 0 2px 8px #0001 !important;
    transform: translateY(-4px) scale(1.04) !important;
    border-color: #667eea !important;
}

/* Temperature ID và weather elements dark mode */
body:not(.white-content) #temperature {
    color: #f8fafc !important;
}

body:not(.white-content) #weatherHumidity {
    color: #f8fafc !important;
}

body:not(.white-content) .h5 {
    color: #f8fafc !important;
}

body:not(.white-content) .card .small.text-muted {
    color: #7dd3fc !important;
}

/* Navbar input-group dark mode - theme toggle button */
body:not(.white-content) .navbar .input-group {
    color: #f8fafc !important;
}

body:not(.white-content) .navbar .input-group .theme-toggle {
    color: #f8fafc !important;
}

body:not(.white-content) .navbar .input-group .theme-toggle:hover {
    color: #667eea !important;
}

body:not(.white-content) .navbar .input-group .theme-toggle .fa-moon,
body:not(.white-content) .navbar .input-group .theme-toggle .fa-sun {
    color: #f8fafc !important;
}

/* Light mode theme toggle */
body.white-content .navbar .input-group .theme-toggle {
    color: #333 !important;
}

body.white-content .navbar .input-group .theme-toggle:hover {
    color: #667eea !important;
}

body.white-content .navbar .input-group .theme-toggle .fa-moon,
body.white-content .navbar .input-group .theme-toggle .fa-sun {
    color: #333 !important;
    font-weight: bold !important;
    font-size: 1.1em !important;
    text-shadow: none !important;
}

body.white-content .navbar .input-group .theme-toggle:hover .fa-moon,
body.white-content .navbar .input-group .theme-toggle:hover .fa-sun {
    color: #667eea !important;
}

/* Additional style for better visibility */
.theme-toggle {
    background: transparent !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

body.white-content .theme-toggle {
    background: rgba(51, 51, 51, 0.05) !important;
}

body.white-content .theme-toggle:hover {
    background: rgba(102, 126, 234, 0.1) !important;
}

body:not(.white-content) .theme-toggle {
    background: rgba(248, 250, 252, 0.05) !important;
}

body:not(.white-content) .theme-toggle:hover {
    background: rgba(102, 126, 234, 0.2) !important;
}

/* Modal dark mode */
body:not(.white-content) .modal-content {
    background-color: #23263a !important;
    color: #f8fafc !important;
    border: 1px solid #35395a !important;
}

body:not(.white-content) .modal-header {
    background-color: #23263a !important;
    color: #f8fafc !important;
    border-bottom: 1px solid #35395a !important;
}

body:not(.white-content) .modal-body {
    background-color: #23263a !important;
    color: #f8fafc !important;
}