html:not(.hydrated) .collapse {
    transition: none !important;
}

#sidebar {
    height: calc(100vh - 50px);
    width: 228px;
    transition: width .2s ease;
}

/* Keep a 50px rail when collapsed via Bootstrap */
#sidebar.collapse:not(.show) {
    display: block;          /* prevent full disappearance */
    width: 50px;             /* rail width */
    overflow: hidden;    /* clip labels */
}

#sidebar.collapse.show {
    display: block;
    width: 228px;            /* expanded width */
}

#sidebar-nav {
    height: 100%;
    min-height: 100% !important;
    width: 100%;
    overflow: hidden;
    transition: padding .2s ease;
}

#sidebar.collapse:not(.show) #sidebar-nav > ul.nav {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

#sidebar .nav-item {
    width: 100%;
}

#sidebar .nav-link {
   border-radius: 8px;
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

/* Icons: consistent size */
#sidebar .nav-link img,
#sidebar .nav-link .sidebar-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Hide labels when collapsed (wrap text in span or .sidebar-label) */
#sidebar.collapse:not(.show) .nav-link > span,
#sidebar.collapse:not(.show) .nav-link > .sidebar-label {
    opacity: 0;
    width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Center icons when collapsed */
#sidebar.collapse:not(.show) .nav-link {
    justify-content: center;
    gap: 0;
    padding-left: .5rem;
    padding-right: .5rem;
}

/* Active styles (kept) */
#sidebar .nav-link.active {
    background-color: rgba(244,244,245,1) ;
    color: rgb(var(--bs-primary-rgb)) !important;
}




.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: rgb(var(--bs-primary-rgb));
}

/* Offcanvas (unchanged) */
.offcanvas.offcanvas-end { }

#offcanvasRoute  {
    left: 229px;
    right: 400px;
}


#subnav .nav-item .nav-link.active {
    border-bottom: 2px solid var(--bs-primary);
}