/* Custom CSS for sidebar menu with active submenu items */

/* Style active submenu item */
.menu-item.active {
    background-color: var(--sidebar-active-bg, #e6f0ff);
    color: var(--sidebar-active-text, #0a58ca) !important;
    font-weight: bold;
    border-left: 3px solid var(--sidebar-active-border, #0a58ca);
    border-radius: 4px;
    position: relative;
}

/* Remove default active state from parent menu when only a submenu item is active */
.nav-item.has-sub.active:not(.explicitly-active) > a {
    background-color: transparent !important;
    color: var(--sidebar-text) !important;
    border-left: none !important;
}

/* Remove the left bar from parent when only a submenu item is active */
.nav-item.has-sub.active:not(.explicitly-active)::after {
    display: none !important;
}

/* Ensure parent menu is open when a submenu item is active */
.nav-item.has-sub.active .submenu-content {
    display: block !important;
    max-height: 1000px !important;
}

/* Keep parent menu's chevron rotated when open */
.nav-item.has-sub.active > a::before {
    transform: rotate(90deg) !important;
    -webkit-transform: rotate(90deg) !important;
    -moz-transform: rotate(90deg) !important;
    -ms-transform: rotate(90deg) !important;
    -o-transform: rotate(90deg) !important;
}

/* Add a visual indicator for active submenu items */
.menu-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: var(--sidebar-active-border, #0a58ca);
}

/* Fine-tune submenu item appearance */
.submenu-content .menu-item {
    position: relative;
    transition: all 0.3s ease;
    padding-left: 15px !important; 
}

/* Add a hover effect for submenu items */
.submenu-content .menu-item:hover {
    background-color: rgba(230, 240, 255, 0.5);
    padding-left: 18px !important;
}

/* Make the submenu active item more visible */
.submenu-content .menu-item.active {
    padding-left: 18px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Add a bullet point to active submenu item */
.submenu-content .menu-item.active::after {
    content: "•";
    position: absolute;
    right: 15px;
    color: var(--sidebar-active-text, #0a58ca);
}

/* Fix for explicitly active parent items */
.nav-item.has-sub.explicitly-active::after {
    background: var(--sidebar-active-border, #0a58ca) !important;
    display: block !important;
}