/* =========================================================
   BASE SIDEBAR
   ========================================================= */

.nav-sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 56px; /* collapsed default */
}

/* EXPANDED STATE — simple and fixed */
.nav-sidebar.nav-expanded {
    width: 240px;
}

/* Toggle header */
.nav-sidebar-header {
    margin-bottom: 6px;
}

.sidebar-toggle {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--sidebar-border);
    background: transparent;
    color: var(--text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   LINK STYLING
   ========================================================= */

.nav-sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    border-radius: 6px;
    color: var(--text-soft);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.nav-sidebar-link:hover {
    background: var(--bg);
}

.nav-sidebar-link.active {
    border-left-color: var(--org-blue);
    background: var(--bg);
    color: var(--text-soft);
		border-bottom: 1px solid var(--org-blue);
}



/* =========================================================
   ICON + LABEL
   ========================================================= */

.nav-sidebar-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* LABELS only show when expanded */
.nav-sidebar-label {
    display: none;
}

/* EXPANDED → show labels */
.nav-expanded .nav-sidebar-label {
    display: inline;
}

/* COLLAPSED → centre icons */
.nav-sidebar:not(.nav-expanded) .nav-sidebar-link {
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}



/* =========================================================
   HEADINGS + SEPARATORS
   ========================================================= */

/* Headings show only in expanded mode */
.nav-sidebar-heading {
    display: none;
}

.nav-expanded .nav-sidebar-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Separator shown only when collapsed */
.nav-section-separator {
    display: none;
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: 6px 4px;
}

.nav-sidebar:not(.nav-expanded) .nav-section-separator {
    display: block;
}

/* =========================================================
   SUBMENUS
   ========================================================= */

/* Expanded → indent */
.nav-expanded .nav-sidebar-submenu .nav-sidebar-link {
    padding-left: 26px;
}

/* Collapsed → flatten */
.nav-sidebar:not(.nav-expanded) .nav-sidebar-submenu .nav-sidebar-link {
    padding-left: 10px;
}

.nav-sidebar-header {
    position: relative;
    z-index: 10;
}

/* Prevent toggle from stealing clicks */
.sidebar-toggle span {
    pointer-events: none;
}

/* Ensure toggle stays above nothing */
.nav-sidebar-header,
.sidebar-toggle {
    position: relative;
    z-index: 10;
}

/* Ensure menu items receive clicks cleanly */
.nav-sidebar-menu {
    position: relative;
    z-index: 1;
}

.nav-sidebar-heading {
    pointer-events: none !important;
    cursor: default !important;
}