/* Mobile Sidebar Enhanced - Based on Tenant Project Patterns */

@media (max-width: 991.98px) {
    /* HIGHEST SPECIFICITY - Enhanced mobile sidebar with better blur effects */
    .navbar-vertical .collapse#navbarVerticalCollapse,
    .navbar-vertical #navbarVerticalCollapse.collapse,
    .navbar.navbar-vertical #navbarVerticalCollapse,
    nav.navbar-vertical #navbarVerticalCollapse,
    #navbarVerticalCollapse {
        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border-radius: 0 12px 12px 0 !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-left: none !important;
        margin-top: 0 !important;
        padding: 0 !important;
        transition: left 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
    }

    /* Dark theme for mobile sidebar - HIGHEST SPECIFICITY */
    [data-bs-theme="dark"] .navbar-vertical .collapse#navbarVerticalCollapse,
    [data-bs-theme="dark"] .navbar-vertical #navbarVerticalCollapse.collapse,
    [data-bs-theme="dark"] .navbar.navbar-vertical #navbarVerticalCollapse,
    [data-bs-theme="dark"] nav.navbar-vertical #navbarVerticalCollapse,
    [data-bs-theme="dark"] #navbarVerticalCollapse {
        background-color: rgba(26, 29, 41, 0.85) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-left: none !important;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3) !important;
        color: #e2e8f0 !important;
    }

    /* Ensure blur background when sidebar is shown - HIGHEST SPECIFICITY */
    .navbar-vertical .collapse#navbarVerticalCollapse.show,
    .navbar-vertical #navbarVerticalCollapse.collapse.show,
    .navbar.navbar-vertical #navbarVerticalCollapse.show,
    nav.navbar-vertical #navbarVerticalCollapse.show,
    #navbarVerticalCollapse.show {
        background-color: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        left: 0 !important;
    }

    [data-bs-theme="dark"] .navbar-vertical .collapse#navbarVerticalCollapse.show,
    [data-bs-theme="dark"] .navbar-vertical #navbarVerticalCollapse.collapse.show,
    [data-bs-theme="dark"] .navbar.navbar-vertical #navbarVerticalCollapse.show,
    [data-bs-theme="dark"] nav.navbar-vertical #navbarVerticalCollapse.show,
    [data-bs-theme="dark"] #navbarVerticalCollapse.show {
        background-color: rgba(26, 29, 41, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        left: 0 !important;
    }

    /* Force blur background with highest specificity */
    .navbar-vertical #navbarVerticalCollapse,
    .navbar #navbarVerticalCollapse,
    nav #navbarVerticalCollapse {
        background-color: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    [data-bs-theme="dark"] .navbar-vertical #navbarVerticalCollapse,
    [data-bs-theme="dark"] .navbar #navbarVerticalCollapse,
    [data-bs-theme="dark"] nav #navbarVerticalCollapse {
        background-color: rgba(26, 29, 41, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /* Ensure sidebar content has proper styling */
    #navbarVerticalCollapse .navbar-vertical-content {
        padding: 15px;
        background-color: transparent;
    }

    #navbarVerticalCollapse .navbar-nav {
        background-color: transparent;
    }

    #navbarVerticalCollapse .nav-item {
        background-color: transparent;
        border-bottom: 1px solid rgba(0, 166, 255, 0.1);
        margin-bottom: 0;
    }

    #navbarVerticalCollapse .nav-item:last-child {
        border-bottom: none;
    }

    #navbarVerticalCollapse .nav-link {
        background-color: transparent !important;
        border-radius: 6px;
        margin: 2px 0;
        transition: all 0.2s ease;
    }

    #navbarVerticalCollapse .nav-link:hover {
        background-color: rgba(0, 166, 255, 0.1) !important;
    }

    /* Dark theme for sidebar content */
    [data-bs-theme="dark"] #navbarVerticalCollapse .nav-item {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    [data-bs-theme="dark"] #navbarVerticalCollapse .nav-link:hover {
        background-color: rgba(0, 166, 255, 0.2) !important;
    }
}

/* FORCE BLUR BACKGROUND ON MOBILE SIDEBAR - OVERRIDE ALL PHOENIX STYLES */
@media (max-width: 991.98px) {
    /* Ultra high specificity to override Phoenix theme */
    body .navbar-vertical.navbar-dark .collapse#navbarVerticalCollapse,
    body nav.navbar.navbar-vertical.navbar-expand-lg.navbar-dark .collapse#navbarVerticalCollapse,
    body .navbar-vertical .collapse.navbar-collapse#navbarVerticalCollapse,
    html body #navbarVerticalCollapse.collapse.navbar-collapse {
        background-color: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 0 8px 8px 0 !important;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-left: none !important;
    }

    /* Dark theme with ultra high specificity */
    [data-bs-theme="dark"] body .navbar-vertical.navbar-dark .collapse#navbarVerticalCollapse,
    [data-bs-theme="dark"] body nav.navbar.navbar-vertical.navbar-expand-lg.navbar-dark .collapse#navbarVerticalCollapse,
    [data-bs-theme="dark"] body .navbar-vertical .collapse.navbar-collapse#navbarVerticalCollapse,
    [data-bs-theme="dark"] html body #navbarVerticalCollapse.collapse.navbar-collapse {
        background-color: rgba(26, 29, 41, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-left: none !important;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2) !important;
    }

    /* Force blur background when sidebar is visible */
    body #navbarVerticalCollapse.show,
    body #navbarVerticalCollapse.collapse.show,
    html body .navbar-vertical #navbarVerticalCollapse.show {
        background-color: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    [data-bs-theme="dark"] body #navbarVerticalCollapse.show,
    [data-bs-theme="dark"] body #navbarVerticalCollapse.collapse.show,
    [data-bs-theme="dark"] html body .navbar-vertical #navbarVerticalCollapse.show {
        background-color: rgba(26, 29, 41, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
}

/* Desktop - transparent background */
@media (min-width: 992px) {
    #navbarVerticalCollapse {
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
    }
}

/* OVERRIDE ACTIVE LINK COLORS - HIGHEST SPECIFICITY */
/* Light theme - keep the blue active color */
.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active,
.navbar-vertical .nav-item-wrapper .nav-link.active,
body .navbar-vertical .nav-link.active,
html body .navbar-vertical .nav-link.active {
    color: #00A6FF !important;
}

/* Dark theme - change from white to a better color */
[data-bs-theme="dark"] .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active,
[data-bs-theme="dark"] .navbar-vertical .nav-item-wrapper .nav-link.active,
[data-bs-theme="dark"] body .navbar-vertical .nav-link.active,
[data-bs-theme="dark"] html body .navbar-vertical .nav-link.active {
    color: #00A6FF !important;
}

/* Override active link icons */
.navbar-vertical .nav-item-wrapper:has(.active) .dropdown-indicator.label-1.collapsed .nav-link-text,
.navbar-vertical .nav-item-wrapper:has(.active) .dropdown-indicator.label-1.collapsed .nav-link-icon,
.navbar-vertical .nav-item-wrapper:has(.active) .nav-item:has(.active) .dropdown-indicator.collapsed .nav-link-text,
.navbar-vertical .nav-item-wrapper:has(.active) .nav-item:has(.active) .dropdown-indicator.collapsed .nav-link-icon {
    color: #00A6FF !important;
}

/* ULTRA HIGH SPECIFICITY - Force active link color change */
html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item .nav-link.active,
html body nav.navbar.navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item .nav-link.active,
html body .navbar-vertical .navbar-vertical-content .navbar-nav .nav-item .nav-link.active,
html body .navbar-vertical .nav-item .nav-link.active,
body .navbar-vertical .nav-link.active,
.navbar-vertical .nav-link.active {
    color: #00A6FF !important;
}

/* Dark theme with ultra high specificity */
[data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item .nav-link.active,
[data-bs-theme="dark"] html body nav.navbar.navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item .nav-link.active,
[data-bs-theme="dark"] html body .navbar-vertical .navbar-vertical-content .navbar-nav .nav-item .nav-link.active,
[data-bs-theme="dark"] html body .navbar-vertical .nav-item .nav-link.active,
[data-bs-theme="dark"] body .navbar-vertical .nav-link.active,
[data-bs-theme="dark"] .navbar-vertical .nav-link.active {
    color: #00A6FF !important;
}

/* Override CSS variables for active color */
:root {
    --phoenix-navbar-vertical-link-active-color: #00A6FF !important;
}

[data-bs-theme="dark"] {
    --phoenix-navbar-vertical-link-active-color: #00A6FF !important;
}

/* Force color on any active nav link in sidebar */
#navbarVerticalCollapse .nav-link.active,
#navbarVerticalCollapse .nav-link.active *,
.navbar-vertical #navbarVerticalCollapse .nav-link.active,
.navbar-vertical #navbarVerticalCollapse .nav-link.active * {
    color: #00A6FF !important;
}

/* Target specific NavLink active structure */
.navbar-vertical .nav-item-wrapper .nav-link.active .nav-link-text,
.navbar-vertical .nav-item-wrapper .nav-link.active .nav-link-icon,
.navbar-vertical .nav-item-wrapper .nav-link.active .nav-link-text-wrapper,
.navbar-vertical .nav-item-wrapper .nav-link.active .nav-link-text-wrapper .nav-link-text,
.navbar-vertical .nav-item-wrapper .nav-link.active i,
.navbar-vertical .nav-item-wrapper .nav-link.active span {
    color: #00A6FF !important;
}

/* Mobile nav link active */
.navbar-vertical .mobile-nav-link.active,
.navbar-vertical .mobile-nav-link.active *,
.navbar-vertical .mobile-nav-link.active .nav-link-text,
.navbar-vertical .mobile-nav-link.active .nav-link-icon,
.navbar-vertical .mobile-nav-link.active i,
.navbar-vertical .mobile-nav-link.active span {
    color: #00A6FF !important;
}

/* Label-1 active links */
.navbar-vertical .label-1.active,
.navbar-vertical .label-1.active *,
.navbar-vertical .label-1.active .nav-link-text,
.navbar-vertical .label-1.active .nav-link-icon,
.navbar-vertical .label-1.active i,
.navbar-vertical .label-1.active span {
    color: #00A6FF !important;
}

/* Nuclear option - target everything in active nav links */
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link.active *,
.navbar-vertical .nav-link.active > *,
.navbar-vertical .nav-link.active > * > *,
.navbar-vertical .nav-link.active > * > * > * {
    color: #00A6FF !important;
}



/* ===== DESKTOP SIDEBAR ACTIVE LINKS - WHITE COLOR ===== */
/* Desktop only - make active links white */
@media (min-width: 992px) {
    /* Override active link colors for desktop */
    .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active,
    .navbar-vertical .nav-item-wrapper .nav-link.active,
    body .navbar-vertical .nav-link.active,
    html body .navbar-vertical .nav-link.active {
        color: #fff !important;
    }

    /* Override active link icons for desktop */
    .navbar-vertical .nav-item-wrapper:has(.active) .dropdown-indicator.label-1.collapsed .nav-link-text,
    .navbar-vertical .nav-item-wrapper:has(.active) .dropdown-indicator.label-1.collapsed .nav-link-icon,
    .navbar-vertical .nav-item-wrapper:has(.active) .nav-item:has(.active) .dropdown-indicator.collapsed .nav-link-text,
    .navbar-vertical .nav-item-wrapper:has(.active) .nav-item:has(.active) .dropdown-indicator.collapsed .nav-link-icon {
        color: #fff !important;
    }

    /* Override CSS variables for desktop */
    :root {
        --phoenix-navbar-vertical-link-active-color: #fff !important;
    }

    [data-bs-theme="dark"] {
        --phoenix-navbar-vertical-link-active-color: #fff !important;
    }
}
}