/* Mobile Sidebar Blur Background - Same as Mobile Navbar */

@media (max-width: 991.98px) {
    /* HIGHEST SPECIFICITY - Make mobile sidebar have visible blur background */
    .navbar-vertical .collapse#navbarVerticalCollapse,
    .navbar-vertical #navbarVerticalCollapse.collapse,
    .navbar.navbar-vertical #navbarVerticalCollapse,
    nav.navbar-vertical #navbarVerticalCollapse,
    #navbarVerticalCollapse {
        background-color: rgba(255, 255, 255, 0.85) !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.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !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.1) !important;
        color: #e2e8f0 !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;
    }

    /* ===== UPDATED MOBILE RESPONSIVE SIZING TO MATCH GLOBAL SYSTEM ===== */

    /* Mobile sidebar content sizing */
    .navbar-vertical-content {
        padding: 0.5rem !important;
    }

    .navbar-nav {
        padding: 0 !important;
    }

    .nav-item-wrapper {
        margin-bottom: 0.25rem !important;
    }

    .nav-link {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.9rem !important;
        border-radius: 0.5rem !important;
        margin: 0 !important;
    }

    .nav-link-icon {
        font-size: 1rem !important;
        margin-right: 0.75rem !important;
        min-width: 1.25rem !important;
    }

    .nav-link-text {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
    }

    .navbar-vertical-label {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
        margin: 0.5rem 0 0.75rem 0 !important;
        font-weight: 600 !important;
    }

    .navbar-vertical-footer {
        padding: 0.75rem 0.5rem !important;
    }

    .navbar-vertical-toggle {
        font-size: 0.85rem !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 0.5rem !important;
    }
}

/* ===== SMALLER MOBILE SCREENS (576px and below) ===== */
@media (max-width: 576px) {
    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 {
        border-radius: 0 6px 6px 0 !important;
    }

    .navbar-vertical-content {
        padding: 0.25rem !important;
    }

    .nav-item-wrapper {
        margin-bottom: 0.125rem !important;
    }

    .nav-link {
        padding: 0.625rem 0.375rem !important;
        font-size: 0.85rem !important;
        border-radius: 0.375rem !important;
    }

    .nav-link-icon {
        font-size: 0.9rem !important;
        margin-right: 0.5rem !important;
        min-width: 1rem !important;
    }

    .nav-link-text {
        font-size: 0.85rem !important;
    }

    .navbar-vertical-label {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.5rem !important;
        margin: 0.375rem 0 0.5rem 0 !important;
    }

    .navbar-vertical-footer {
        padding: 0.5rem 0.25rem !important;
    }

    .navbar-vertical-toggle {
        font-size: 0.8rem !important;
        padding: 0.375rem 0.5rem !important;
        border-radius: 0.375rem !important;
    }
}

/* ===== VERY SMALL SCREENS (375px and below) ===== */
@media (max-width: 375px) {
    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 {
        border-radius: 0 4px 4px 0 !important;
        box-shadow: 1px 0 8px rgba(0, 0, 0, 0.1) !important;
    }

    .navbar-vertical-content {
        padding: 0.125rem !important;
    }

    .nav-item-wrapper {
        margin-bottom: 0.0625rem !important;
    }

    .nav-link {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.8rem !important;
        border-radius: 0.25rem !important;
    }

    .nav-link-icon {
        font-size: 0.85rem !important;
        margin-right: 0.375rem !important;
        min-width: 0.875rem !important;
    }

    .nav-link-text {
        font-size: 0.8rem !important;
    }

    .navbar-vertical-label {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.375rem !important;
        margin: 0.25rem 0 0.375rem 0 !important;
    }

    .navbar-vertical-footer {
        padding: 0.375rem 0.125rem !important;
    }

    .navbar-vertical-toggle {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.375rem !important;
        border-radius: 0.25rem !important;
    }

    .navbar-vertical-footer-text {
        font-size: 0.75rem !important;
    }
}
}