/* ==========================================================================
   Dark / light mode toggle
   The colour values themselves (light & dark) are already defined by the
   Metronic bundle via [data-bs-theme="light"|"dark"] CSS variables and the
   KTThemeMode script (webroot/js/default/scripts.bundle.js). This file only
   adds the small bits Metronic doesn't ship out of the box: the header
   toggle button's icon swap and the active state for our "Appearance" menu.
   ========================================================================== */

/* ---- Header quick toggle button ---- */
.theme-toggle-btn {
    position: relative;
}

.theme-toggle-btn__icon {
    transition: opacity .15s ease, transform .15s ease;
}

/* Higher-specificity + !important: Font Awesome's own CSS (loaded after
   this file) sets `display: inline-block` directly on `.fa-solid`, which
   would otherwise win the light/dark icon swap below. */
.theme-toggle-btn .theme-toggle-btn__icon.theme-toggle-btn__icon--dark {
    display: none !important;
}

[data-bs-theme="dark"] .theme-toggle-btn .theme-toggle-btn__icon.theme-toggle-btn__icon--light {
    display: none !important;
}

[data-bs-theme="dark"] .theme-toggle-btn .theme-toggle-btn__icon.theme-toggle-btn__icon--dark {
    display: inline-block !important;
}

/* Subtle spin on click feedback */
.theme-toggle-btn:active .theme-toggle-btn__icon {
    transform: rotate(20deg) scale(0.9);
}

/* ---- "Appearance" menu (Light / Dark / System) ---- */
[data-kt-element="theme-mode-menu"] .menu-link.active {
    background-color: var(--bs-menu-link-bg-color-active);
    color: var(--bs-menu-link-color-active);
    border-radius: .65rem;
}

[data-kt-element="theme-mode-menu"] .menu-link.active .menu-icon i {
    color: var(--bs-menu-link-color-active);
}