.nav-fixed #layoutSidenav #layoutSidenav_nav {
    width: 20rem !important;
    height: 100vh;
    z-index: 1038;
}

.nav-fixed #layoutSidenav #layoutSidenav_content {
    padding-left: 20rem !important;
    min-height: calc(100vh - 15rem) !important;
    top: 3.625rem;
}

.sidenav-menu {
    overflow-y: scroll;
    /* or auto, but force scrollbar space */
    scrollbar-gutter: stable;
    /* new CSS property — keeps gutter visible */
}

.sidenav .sidenav-menu .nav .sidenav-menu-heading {
    padding: 0.75rem  !important;
}

/* Optional: keep sidebar width steady even when scrollbars appear */
.sidenav-menu {
    scrollbar-gutter: stable;
}

/* Smooth hover look */
.sidenav-menu .collapse {
    transition: height 0.25s ease;
}



/* ────────────────────────────────
   Collapsible "Core" Heading Colors
   ──────────────────────────────── */
.nav-link.collapsible-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a7aeb8 !important;                   /* default gray */
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    transition: color 0.25s ease;
}

/* Hovered but not active */
.nav-link.collapsible-heading:hover {
    color: #6c757d;
    text-decoration: none;
}

/* Actively opened or selected */
.nav-link.collapsible-heading.active,
.nav-link.collapsible-heading[aria-expanded="true"] {
    color: #212529 !important;                   /* black */
    
}

/* Rotate arrow smoothly when opened */
.nav-link[aria-expanded="true"] .sidenav-collapse-arrow {
    transform: rotate(-180deg);
    transition: transform 0.25s ease;
}