/* ---------- Collapsible left nav ---------- */
:root{
    --nav-collapsed-w: 48px;
    --nav-expanded-w: 220px;
    --nav-bg: var(--bg-toolbar);
}

/* body state switches the active width */
body.nav-collapsed { --nav-w: var(--nav-collapsed-w); }
body.nav-expanded  { --nav-w: var(--nav-expanded-w); }

/* default state (collapsed) */
body:not(.nav-expanded) { --nav-w: var(--nav-collapsed-w); }

/* shift the main dashboard right by the nav width */
main.dashboard-3col,
main.dashboard-2col,
main.dashboard-1col,
main.dashboard-lens {
    margin-left: var(--nav-w);
    transition: margin-left .18s ease;
}

/* the vertical nav itself */
.site-nav{
    position: fixed;
    top: 100px;           /* matches your header height */
    left: 0;
    bottom: 0;
    width: var(--nav-w);
    background: var(--nav-bg);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow);
    z-index: 900;         /* below .dash-panel.maximized (2000) */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    transition: width .18s ease;
}

/* header area with the toggle button */
.site-nav__head{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: .5rem;
    border-bottom: 1px solid var(--border);
}

/* toggle button */
#navToggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

/* show/hide proper icon based on state */
#navToggle .icon-expand{ display: inline; }
#navToggle .icon-collapse{ display: none; }
body.nav-expanded #navToggle .icon-expand{ display: none; }
body.nav-expanded #navToggle .icon-collapse{ display: inline; }

/* link list */
.site-nav__list{
    list-style: none;
    margin: 0; padding: .4rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    overflow: auto;
}

/* each item is a button-like link */
.site-nav__item a{
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: .6rem;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}
.site-nav__item a:hover{
    background: var(--accent-soft);
}

/* icons in links */
.site-nav__item svg{
    width: 20px; height: 20px; flex: 0 0 20px;
}

/* hide text labels when collapsed */
body.nav-collapsed .site-nav__label{ display: none; }

/* optional: thin scrollbar in the nav */
#siteNav .site-nav__list{ scrollbar-width: thin; }

.lc-separator {
    border: 0;
    border-top: 1px solid var(--border);
    margin: .5rem 0;
}

.site-nav__item button {
    all: unset;              /* clears browser defaults (background, border, etc.) */
    cursor: pointer;         /* make sure pointer shows */
    display: flex;           /* align icon + text nicely */
    align-items: center;
    gap: 0.4rem;             /* space between icon and label */
    padding: 0.25rem 0.5rem; /* optional hit area */
}

.site-nav__item button:focus {
    outline: none;           /* remove focus outline */
}