/* Ensure the main nano area is a flex column so footer pins flush bottom */
#sidebar-left .nano-content {
    display:flex;
    flex-direction:column;
    height: calc(100vh - 100px); /* viewport height minus header height */
    padding-bottom:0 !important;
}
#sidebar-left #menu.nav-main {
    flex:1 1 auto;
    overflow-y: auto; /* allow menu to scroll if too long */
}

/* Footer container flush bottom, no extra slab */
#sidebar-left .sidebar-footer {
    margin-top:auto;
    padding:0;
    background:transparent;
    border-top:1px solid rgba(255,255,255,.08);
    flex-shrink: 0; /* prevent footer from being compressed */
}
#sidebar-left .nav-main-footer {
    list-style:none;
}

/* Make the user row look like a normal nav row */
#sidebar-left .nav-user > a.nav-link {
    padding: 12px 15px;           /* match nav line height/spacing */
    color: #e5e5e5;
}
#sidebar-left .nav-user > a.nav-link:hover {
    background: rgba(255,255,255,.05);
}

/* Name/role colors per theme */
#sidebar-left .nav-user .user-name {
    color:#fff;
    font-weight:600;
    line-height:1.1;
}
#sidebar-left .nav-user .user-role {
    color:rgba(255,255,255,.55);
    line-height:1.1;
}

/* Caret matches nav + rotates when expanded */
#sidebar-left .nav-user .nav-caret {
    color:rgba(255,255,255,.65);
    font-size:12px;
    margin-left:.5rem;
    transition: transform .2s ease;
}
#sidebar-left .nav-user.nav-expanded .nav-caret {
    transform: rotate(180deg);
}

/* Avatar badge (uses sidebar bg ring so it pops on dark) */
#sidebar-left .nav-user .notif-badge {
    position:absolute;
    top:0;
    right:0;
    transform:translate(35%,-35%);
    border:2px solid #1f2429;
    border-radius:999px;
    min-width:18px;
    height:18px;
    padding:0 4px;
    font-size:11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* UPWARD submenu: same look as .nav-children, but positioned above the row */
#sidebar-left .nav-user {
    position:relative;
}
#sidebar-left .nav-user > .nav-children-up {
    position:absolute;
    left:0;
    bottom:100%;
    width:100%;
    background:#2b2b2b;
    color:#e0e0e0;
    box-shadow: 0 -6px 16px rgba(0,0,0,.35);
    border-top:1px solid rgba(255,255,255,.08);
    display:none;
    max-height:60vh;
    overflow:auto;
    z-index: 1000;
}
#sidebar-left .nav-user.nav-expanded > .nav-children-up {
    display:block;
}

/* Children links adopt nav look */
#sidebar-left .nav-children-up > li > a.nav-link {
    padding: 10px 15px;
    color:#e5e5e5;
    display:block;
}
#sidebar-left .nav-children-up > li > a.nav-link:hover {
    background: rgba(255,255,255,.05);
}

/* Notification title styling parity */
#sidebar-left .nav-children-up .notification-title {
    font-weight:600;
}

/* Remove bottom gaps */
#sidebar-left .sidebar-footer .nav-main {
    margin-bottom:0;
}
/* 1) Kill the theme’s default caret so we only see our icon */
#sidebar-left .nav-user > a.nav-link::after {
    display: none !important;   /* some themes inject a caret via ::after */
}

/* Keep/rotate our own caret */
#sidebar-left .nav-user .nav-caret {
    color: rgba(255,255,255,.65);
    font-size: 12px;
    margin-left: .5rem;
    transition: transform .2s ease;
}
#sidebar-left .nav-user.nav-expanded .nav-caret {
    transform: rotate(180deg);
}

/* 2) Badge overlap tighter on the avatar */
#sidebar-left .nav-user .notif-badge {
    top: -2px;                 /* pull slightly over the avatar */
    right: -2px;
    transform: none;           /* remove big offset */
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    border: 2px solid #1f2429; /* ring matches sidebar bg */
}

/* 3) Add a little more space between avatar and text */
#sidebar-left .nav-user > a.nav-link {
    gap: 1rem;                 /* space between avatar and label block */
}
#sidebar-left .nav-user > a.nav-link .nav-icon {
    margin-right: 0 !important; /* rely on gap, avoid double spacing */
}
/* === Collapsed sidebar: keep the user avatar + badge visible === */
html.sidebar-left-collapsed #sidebar-left .sidebar-footer {
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Center the avatar, hide text/caret in collapsed mode */
html.sidebar-left-collapsed #sidebar-left .nav-user > a.nav-link {
    justify-content: center;
    padding: 10px;
    gap: 0;                         /* no text, so no gap needed */
}
html.sidebar-left-collapsed #sidebar-left .nav-user > a.nav-link .flex-grow-1 {
    display: none !important;       /* hide name/role */
}
html.sidebar-left-collapsed #sidebar-left .nav-user .nav-caret {
    display: none !important;       /* no caret in collapsed state */
}

/* Avatar sizing stays readable when collapsed */
html.sidebar-left-collapsed #sidebar-left .nav-user .nav-icon {
    width: 36px;
    height: 36px;
    margin: 0;                      /* centered by flex */
}
html.sidebar-left-collapsed #sidebar-left .nav-user .nav-icon img {
    width: 36px;
    height: 36px;
}

/* Badge overlap tuned for the smaller avatar in collapsed mode */
html.sidebar-left-collapsed #sidebar-left .nav-user .notif-badge {
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    transform: none;                /* keep tight to the avatar edge */
    border: 2px solid #1f2429;      /* ring matches your sidebar bg */
}

/* --- COLLAPSED SIDEBAR: force footer + avatar + badge to stay visible --- */

/* Some themes hide the entire footer in collapsed mode. Force it back. */
html.sidebar-left-collapsed #sidebar-left .sidebar-footer {
    display: block !important;
    visibility: visible !important;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* The theme typically hides ALL spans; re-show ONLY our avatar span */
html.sidebar-left-collapsed #nav-user > a.nav-link .nav-icon {
    display: inline-flex !important;      /* beats display:none !important */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    visibility: visible !important;
}

/* Keep the image visible and sized */
html.sidebar-left-collapsed #nav-user > a.nav-link .nav-icon img {
    display: block !important;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* Don’t clip the badge */
html.sidebar-left-collapsed #nav-user > a.nav-link {
    justify-content: center;
    padding: 10px;
    gap: 0;
    overflow: visible !important;         /* critical: allow badge to overhang */
}

/* Hide text/caret in collapsed mode */
html.sidebar-left-collapsed #nav-user > a.nav-link .flex-grow-1,
html.sidebar-left-collapsed #nav-user > a.nav-link .nav-caret {
    display: none !important;
}

/* Badge placement on the smaller avatar */
html.sidebar-left-collapsed #nav-user .notif-badge {
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    transform: none;
    border: 2px solid #1f2429;           /* ring = sidebar bg */
    visibility: visible !important;
}

/* === Collapsed + Hover-open: show user name/role/caret just like other items === */
html.sidebar-left-collapsed #sidebar-left:hover #nav-user > a.nav-link {
    justify-content: flex-start !important;
    padding: 12px 15px !important;   /* match normal row padding */
    gap: 1rem !important;
    overflow: visible !important;     /* keep badge visible */
}

/* reveal the label + caret when the sidebar is hover-open */
html.sidebar-left-collapsed #sidebar-left:hover #nav-user > a.nav-link .flex-grow-1 {
    display: block !important;
}
html.sidebar-left-collapsed #sidebar-left:hover #nav-user > a.nav-link .nav-caret {
    display: inline-block !important;
}

/* scale avatar back to the normal size during hover-open (to align with text) */
html.sidebar-left-collapsed #sidebar-left:hover #nav-user .nav-icon {
    width: 32px !important;
    height: 32px !important;
}
html.sidebar-left-collapsed #sidebar-left:hover #nav-user .nav-icon img {
    width: 32px !important;
    height: 32px !important;
}

/* tighten the badge in hover-open (same as expanded state) */
html.sidebar-left-collapsed #sidebar-left:hover #nav-user .notif-badge {
    top: 5px !important;
    right: 0px !important;
    transform: none !important;
}

.sidebar-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.sidebar-toggle-logo {
    margin-top:5px;
    margin-left:16px;
    height: 38px;
    width: 38px;
    display: block;
}