.page-sidebar {
    height: 100%;
}

/* Updated sidebar background with new colors - only if not overridden by theme */
body:not(.mod-skin-dark):not(.mod-skin-light) .page-sidebar,
body.mod-skin-light:not(.mod-skin-dark) .page-sidebar {
    background-image: linear-gradient(270deg, rgba(51, 148, 225, .18), transparent);
    background-color: #584475;
}

/* Nav menu items use light purple color - only if not overridden by theme */
body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li a,
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li a {
    color: #bdafd1;
}

body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li a:hover,
body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li a:focus,
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li a:hover,
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li a:focus {
    background-color: rgba(0, 0, 0, .1);
}

/* Hover state - only text changes color, not icon */
body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li a:hover .nav-link-text,
body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li a:focus .nav-link-text,
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li a:hover .nav-link-text,
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li a:focus .nav-link-text {
    color: #fff;
}

body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li.active > a,
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li.active > a {
    background-color: rgba(255, 255, 255, .04);
    border-left: 3px solid rgba(136, 106, 181, 0.8);
}

/* Active state - only text changes color, not icon */
body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li.active > a .nav-link-text,
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li.active > a .nav-link-text {
    color: #fff;
}

/* Icons - purple color normally, stay purple even when active */
body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li a > .ni,
body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li a > [class*="fa-"],
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li a > .ni,
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li a > [class*="fa-"] {
    color: #876fab;
}

/* Icons stay purple when active (no color change) */
body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li.active > a > .ni,
body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li.active > a > [class*="fa-"],
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li.active > a > .ni,
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li.active > a > [class*="fa-"] {
    color: #876fab; /* Keep icon purple, don't change to white */
}

/* Enhanced hover effect for icons - stay purple on hover (no color change) */
body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li a:hover > [class*="fa-"],
body:not(.mod-skin-dark):not(.mod-skin-light) .nav-menu li a:focus > [class*="fa-"],
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li a:hover > [class*="fa-"],
body.mod-skin-light:not(.mod-skin-dark) .nav-menu li a:focus > [class*="fa-"] {
    color: #876fab; /* Keep icon purple on hover, don't change to white */
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.premium-crown svg {
    width: 48px;
    height: 48px;
    display: block;
    filter: drop-shadow(0 0 3px #ffd700)
            drop-shadow(0 0 6px #ffee58)
            drop-shadow(0 0 10px #fff176);
}

.nav-menu li.active > a:before,
.nav-menu li ul li.active > a:before {
    content: '\f413';
    font-family: 'nextgen-icons';
    position: absolute;
    top: calc(50% - 5px);
    font-size: 7px;
    color: #24b3a4;
    display: flex;
    align-items: center;
    z-index: 2;
}

.nav-menu li.active > a:before {
    right: 32px;
}

.nav-menu li ul li.active > a:before {
    right: 12px;
}

/* Fix: Don't disable arrow when CRM dropdown is active */
.nav-menu li.active > a .collapse-sign,
.nav-menu li.open > a .collapse-sign,
.nav-menu li.active.open > a .collapse-sign {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

/* Remove shadow from nav-footer */
.nav-footer.shadow-top,
.nav-footer {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
