/* ULTIMATE DARK MODE TOGGLE FIX */
/* Priority tinggi untuk mengatasi semua konflik CSS */

/* FORCE CSS SPECIFICITY - Override semua existing rules */
body .dark-mode-toggle .toggle-container,
html body .dark-mode-toggle .toggle-container,
body.dark-mode .dark-mode-toggle .toggle-container {
    width: 70px !important;
    height: 35px !important;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    border-radius: 35px !important;
    position: relative !important;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border: 2px solid rgba(212, 175, 55, 0.3) !important;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
}

body .dark-mode-toggle .toggle-slider,
html body .dark-mode-toggle .toggle-slider,
body.dark-mode .dark-mode-toggle .toggle-slider {
    width: 27px !important;
    height: 27px !important;
    background: linear-gradient(135deg, #d4af37 0%, #f4e17a 50%, #d4af37 100%) !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(212, 175, 55, 0.4) !important;
    will-change: transform, background !important;
}

body .dark-mode-toggle .toggle-slider i,
html body .dark-mode-toggle .toggle-slider i,
body.dark-mode .dark-mode-toggle .toggle-slider i {
    font-size: 12px !important;
    color: #2c3e50 !important;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: absolute !important;
    will-change: opacity, transform !important;
}

/* Light Mode Icons */
body .dark-mode-toggle .light-icon,
html body .dark-mode-toggle .light-icon {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
    transition-delay: 0.1s !important;
}

body .dark-mode-toggle .dark-icon,
html body .dark-mode-toggle .dark-icon {
    opacity: 0 !important;
    transform: scale(0.3) rotate(-180deg) !important;
    transition-delay: 0s !important;
}

/* Dark Mode Active State - Maximum Specificity */
body.dark-mode .dark-mode-toggle .toggle-container,
html body.dark-mode .dark-mode-toggle .toggle-container {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border-color: rgba(212, 175, 55, 0.6) !important;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 2px 5px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(212, 175, 55, 0.2) !important;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

body.dark-mode .dark-mode-toggle .toggle-slider,
html body.dark-mode .dark-mode-toggle .toggle-slider {
    transform: translateX(33px) !important;
    /* CRITICAL: Warna TETAP GOLD di dark mode! */
    background: linear-gradient(135deg, #d4af37 0%, #f4e17a 50%, #d4af37 100%) !important;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(212, 175, 55, 0.6),
        0 0 25px rgba(212, 175, 55, 0.3) !important;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

body.dark-mode .dark-mode-toggle .light-icon,
html body.dark-mode .dark-mode-toggle .light-icon {
    opacity: 0 !important;
    transform: scale(0.3) rotate(180deg) !important;
    transition-delay: 0s !important;
}

body.dark-mode .dark-mode-toggle .dark-icon,
html body.dark-mode .dark-mode-toggle .dark-icon {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
    color: #1a1a1a !important;
    transition-delay: 0.1s !important;
}

/* OVERRIDE body.dark-mode * rule dari dark-mode.css */
body.dark-mode .dark-mode-toggle,
body.dark-mode .dark-mode-toggle *,
body.dark-mode .dark-mode-toggle .toggle-container,
body.dark-mode .dark-mode-toggle .toggle-slider,
body.dark-mode .dark-mode-toggle .toggle-slider i {
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Anti-conflict rules */
body.dark-mode .dark-mode-toggle .toggle-container {
    /* Override any unwanted transitions */
    transition-property: all !important;
    transition-duration: 0.5s !important;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    transition-delay: 0s !important;
}

body.dark-mode .dark-mode-toggle .toggle-slider {
    /* Override any unwanted transitions */
    transition-property: all !important;
    transition-duration: 0.5s !important;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    transition-delay: 0s !important;
}

/* Hover states */
body .dark-mode-toggle:hover .toggle-container,
body.dark-mode .dark-mode-toggle:hover .toggle-container {
    transform: scale(1.02) !important;
}

/* Focus states for accessibility */
body .dark-mode-toggle:focus,
body.dark-mode .dark-mode-toggle:focus {
    outline: 2px solid rgba(212, 175, 55, 0.5) !important;
    outline-offset: 4px !important;
}

/* DEBUG: Uncomment untuk visual debugging */
/*
.debug-mode .dark-mode-toggle .toggle-container {
    border: 3px solid red !important;
}
.debug-mode .dark-mode-toggle .toggle-slider {
    border: 2px solid blue !important;
}
*/