/* ==================== DARK MODE TOGGLE BUTTON ==================== */
#darkModeToggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    background-color: #3b3f5c !important;
    border: 2px solid #5a5e7a !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    margin: 0 16px 0 8px !important;
    flex-shrink: 0 !important;
    z-index: 999 !important;
    position: relative !important;
}

#darkModeToggle:hover {
    background-color: #4a4e6e !important;
    border-color: #6c70a0 !important;
    box-shadow: 0 2px 12px rgba(99, 102, 240, 0.3) !important;
    transform: scale(1.08) !important;
}

#darkModeToggle:active {
    transform: scale(0.96) !important;
}

#darkModeToggle i {
    font-size: 20px !important;
    color: #f0c440 !important;
    line-height: 0 !important;
    position: absolute !important;
    transition: all 0.3s ease !important;
}

#darkModeToggle #sunIcon {
    color: #f0c440 !important;
}

#darkModeToggle #moonIcon {
    color: #a5b0ff !important;
}

/* Dark mode active state for the button */
body.dark-mode-active #darkModeToggle {
    background-color: #25273f !important;
    border-color: #454878 !important;
    box-shadow: 0 0 10px rgba(99, 102, 240, 0.3) !important;
}

body.dark-mode-active #darkModeToggle:hover {
    background-color: #303350 !important;
    border-color: #5a5d9a !important;
    box-shadow: 0 0 16px rgba(99, 102, 240, 0.4) !important;
}