/* ===== Sidebar Visual Enhancements ===== */

/* Override CSS variables: icons brighter, headings more readable, active bg visible */
[data-bs-theme=light] {
    --bs-app-sidebar-light-menu-link-icon-color: #1B84FF;
    --bs-app-sidebar-light-menu-heading-color: #7E8299;
    --bs-app-sidebar-light-menu-link-bg-color-active: #EEF6FF;
}

[data-bs-theme=dark] {
    --bs-app-sidebar-light-menu-link-icon-color: #4DA3FF;
    --bs-app-sidebar-light-menu-heading-color: #8080A0;
    --bs-app-sidebar-light-menu-link-bg-color-active: #1A2E4A;
}

/* Subtle depth for the sidebar */
[data-kt-app-layout=light-sidebar] .app-sidebar {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.05) !important;
}

/* Logo area bottom divider */
[data-kt-app-layout=light-sidebar] .app-sidebar .app-sidebar-logo {
    border-bottom: 1px solid #F1F1F2 !important;
}

/* Section dividers */
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.pt-5 {
    border-top: 1px solid #F1F1F2;
    margin-top: 0.25rem;
    padding-top: 0.6rem !important;
}

[data-bs-theme=dark][data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.pt-5 {
    border-top-color: #2B2B40;
}

/* Menu link smooth transitions */
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link {
    transition: background-color 0.15s ease;
    border-radius: 8px;
}

/* Bootstrap icons size and color */
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-icon .bi {
    font-size: 1.2rem;
    color: var(--bs-app-sidebar-light-menu-link-icon-color);
    transition: color 0.15s ease;
}

/* SVG icons in menu (passport / onboarding) */
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-icon svg {
    fill: var(--bs-app-sidebar-light-menu-link-icon-color);
    color: var(--bs-app-sidebar-light-menu-link-icon-color);
    transition: fill 0.15s ease, color 0.15s ease;
}

/* Active link: highlighted background + left accent bar */
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    background-color: #EEF6FF !important;
    box-shadow: inset 3px 0 0 #1B84FF;
}

[data-bs-theme=dark][data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    background-color: #1A2E4A !important;
    box-shadow: inset 3px 0 0 #4DA3FF;
}

/* Active state: Bootstrap icons */
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon .bi {
    color: var(--bs-primary);
}

/* Active state: SVG icons */
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon svg {
    fill: var(--bs-primary);
    color: var(--bs-primary);
}

/* Hover state: Bootstrap icons */
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active) .menu-icon .bi {
    color: var(--bs-app-sidebar-light-menu-link-icon-color);
}

/* Hover state: SVG icons */
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active) .menu-icon svg {
    fill: var(--bs-app-sidebar-light-menu-link-icon-color);
    color: var(--bs-app-sidebar-light-menu-link-icon-color);
}

/* Toggle button: border and hover */
@media (min-width: 992px) {
    [data-kt-app-layout=light-sidebar] .app-sidebar .app-sidebar-toggle {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        border: 1.5px solid #E4E6EF !important;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    [data-kt-app-layout=light-sidebar] .app-sidebar .app-sidebar-toggle:hover {
        background-color: #1B84FF !important;
        border-color: #1B84FF !important;
        color: #ffffff !important;
    }
}