﻿/* SIDEBAR ACTIVE LINK COLOR OVERRIDE - HIGHEST PRIORITY */
/* This file should be loaded LAST to override all other styles */

/* Mobile only - blue active links */
@media (max-width: 991.98px) {
    /* Override CSS variables for mobile */
    :root {
        --phoenix-navbar-vertical-link-active-color: #00A6FF !important;
    }

    [data-bs-theme="dark"] {
        --phoenix-navbar-vertical-link-active-color: #00A6FF !important;
    }
}

/* Desktop only - white active links */
@media (min-width: 992px) {
    /* 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;
    }
}

/* Mobile only - blue active links */
@media (max-width: 991.98px) {
    /* Ultra high specificity selectors for mobile active links */
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active *,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .nav-link-text,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .nav-link-icon,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active i,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active span {
        color: #00A6FF !important;
    }

    /* Dark theme overrides for mobile */
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active *,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .nav-link-text,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .nav-link-icon,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active i,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active span {
        color: #00A6FF !important;
    }
}

/* Desktop only - white active links */
@media (min-width: 992px) {
    /* Ultra high specificity selectors for desktop active links */
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active *,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .nav-link-text,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .nav-link-icon,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .nav-link-icon i,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .nav-link-icon .fas,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active i,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .fas,
    html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active span {
        color: #fff !important;
    }

    /* Dark theme overrides for desktop */
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active *,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .nav-link-text,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .nav-link-icon,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .nav-link-icon i,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .nav-link-icon .fas,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active i,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active .fas,
    [data-bs-theme="dark"] html body .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-item-wrapper .nav-link.active span {
        color: #fff !important;
    }
}

/* Mobile specific overrides */
@media (max-width: 991.98px) {
    /* Mobile nav link specific overrides */
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active *,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active .nav-link-text,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active .nav-link-icon,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active i,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active span {
        color: #00A6FF !important;
    }

    /* Label-1 specific overrides for mobile */
    html body .navbar-vertical .nav-item-wrapper .label-1.active,
    html body .navbar-vertical .nav-item-wrapper .label-1.active *,
    html body .navbar-vertical .nav-item-wrapper .label-1.active .nav-link-text,
    html body .navbar-vertical .nav-item-wrapper .label-1.active .nav-link-icon,
    html body .navbar-vertical .nav-item-wrapper .label-1.active i,
    html body .navbar-vertical .nav-item-wrapper .label-1.active span {
        color: #00A6FF !important;
    }

    /* Fallback for mobile - target any active nav link in sidebar */
    .navbar-vertical .nav-link.active,
    .navbar-vertical .nav-link.active *,
    .navbar-vertical .nav-link.active .nav-link-text,
    .navbar-vertical .nav-link.active .nav-link-icon,
    .navbar-vertical .nav-link.active i,
    .navbar-vertical .nav-link.active span,
    #navbarVerticalCollapse .nav-link.active,
    #navbarVerticalCollapse .nav-link.active *,
    #navbarVerticalCollapse .nav-link.active .nav-link-text,
    #navbarVerticalCollapse .nav-link.active .nav-link-icon,
    #navbarVerticalCollapse .nav-link.active i,
    #navbarVerticalCollapse .nav-link.active span {
        color: #00A6FF !important;
    }
}

/* Desktop specific overrides */
@media (min-width: 992px) {
    /* Desktop nav link specific overrides */
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active *,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active .nav-link-text,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active .nav-link-icon,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active .nav-link-icon i,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active .nav-link-icon .fas,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active i,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active .fas,
    html body .navbar-vertical .nav-item-wrapper .mobile-nav-link.active span {
        color: #fff !important;
    }

    /* Label-1 specific overrides for desktop */
    html body .navbar-vertical .nav-item-wrapper .label-1.active,
    html body .navbar-vertical .nav-item-wrapper .label-1.active *,
    html body .navbar-vertical .nav-item-wrapper .label-1.active .nav-link-text,
    html body .navbar-vertical .nav-item-wrapper .label-1.active .nav-link-icon,
    html body .navbar-vertical .nav-item-wrapper .label-1.active .nav-link-icon i,
    html body .navbar-vertical .nav-item-wrapper .label-1.active .nav-link-icon .fas,
    html body .navbar-vertical .nav-item-wrapper .label-1.active i,
    html body .navbar-vertical .nav-item-wrapper .label-1.active .fas,
    html body .navbar-vertical .nav-item-wrapper .label-1.active span {
        color: #fff !important;
    }

    /* Fallback for desktop - target any active nav link in sidebar */
    .navbar-vertical .nav-link.active,
    .navbar-vertical .nav-link.active *,
    .navbar-vertical .nav-link.active .nav-link-text,
    .navbar-vertical .nav-link.active .nav-link-icon,
    .navbar-vertical .nav-link.active .nav-link-icon i,
    .navbar-vertical .nav-link.active .nav-link-icon .fas,
    .navbar-vertical .nav-link.active i,
    .navbar-vertical .nav-link.active .fas,
    .navbar-vertical .nav-link.active span,
    #navbarVerticalCollapse .nav-link.active,
    #navbarVerticalCollapse .nav-link.active *,
    #navbarVerticalCollapse .nav-link.active .nav-link-text,
    #navbarVerticalCollapse .nav-link.active .nav-link-icon,
    #navbarVerticalCollapse .nav-link.active .nav-link-icon i,
    #navbarVerticalCollapse .nav-link.active .nav-link-icon .fas,
    #navbarVerticalCollapse .nav-link.active i,
    #navbarVerticalCollapse .nav-link.active .fas,
    #navbarVerticalCollapse .nav-link.active span {
        color: #fff !important;
    }

    /* Nuclear option for desktop icons - target all possible icon selectors */
    .navbar-vertical .nav-link.active i[class*="fa"],
    .navbar-vertical .nav-link.active i[class*="fas"],
    .navbar-vertical .nav-link.active i[class*="far"],
    .navbar-vertical .nav-link.active i[class*="fab"],
    .navbar-vertical .nav-link.active .nav-link-icon i[class*="fa"],
    .navbar-vertical .nav-link.active .nav-link-icon i[class*="fas"],
    .navbar-vertical .nav-link.active .nav-link-icon i[class*="far"],
    .navbar-vertical .nav-link.active .nav-link-icon i[class*="fab"],
    #navbarVerticalCollapse .nav-link.active i[class*="fa"],
    #navbarVerticalCollapse .nav-link.active i[class*="fas"],
    #navbarVerticalCollapse .nav-link.active i[class*="far"],
    #navbarVerticalCollapse .nav-link.active i[class*="fab"],
    #navbarVerticalCollapse .nav-link.active .nav-link-icon i[class*="fa"],
    #navbarVerticalCollapse .nav-link.active .nav-link-icon i[class*="fas"],
    #navbarVerticalCollapse .nav-link.active .nav-link-icon i[class*="far"],
    #navbarVerticalCollapse .nav-link.active .nav-link-icon i[class*="fab"] {
        color: #fff !important;
    }
}
