/*
 * v4 sidebar — flat list with section separators.
 *
 * Visual contract: 48px icon-only rail, glassmorphism preserved from
 * the legacy SideNav. Section separators are thin horizontal lines
 * between groups of items. Active route gets a left-edge accent bar.
 *
 * Shortcut chips are *not* rendered next to sidebar items (no space at
 * 48px). The shortcut hint lives in the tooltip instead. See
 * SideNavV4::run() for the tooltip wiring.
 */

.sidenav-v4 {
    /* Inherits .sidebar.sidebar-collapsed.sidebar-glassmorphism rules. */
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

/* Items have to centre the inner <a> themselves — the ul's
   align-items:center centres the li in the rail, but the li is wider
   than its 48px link (Bootstrap .nav-item adds padding), so the link
   ends up flush-left without explicit centring here. */
.sidenav-v4-item {
    width: 100%;
    display: flex;
    justify-content: center;
}

.sidenav-v4-link {
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    color: var(--bs-body-color);
    border-left: 3px solid transparent;
    margin-left: 0;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.sidenav-v4-link:hover,
.sidenav-v4-link:focus {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* Style the link based on the parent <li>'s `.active` class rather
 * than its own. Some bundled script (AdminLTE / Bootstrap button
 * handling around the `.btn` class on the link) strips `.active` off
 * the anchor during page boot, leaving the LI's `.active` intact —
 * targeting the LI is therefore the resilient anchor for the rule.
 */
.sidenav-v4-item.active .sidenav-v4-link {
    border-left-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    font-weight: 500;
    color: var(--bs-primary);
}

.sidenav-v4-icon {
    font-size: 1.1rem;
    min-width: 20px;
    text-align: center;
    color: inherit;
}

/*
 * Section separator — thin horizontal line at the rail's full width.
 * `<hr>` provides the line; the wrapping `<li>` reserves vertical space
 * without disrupting the icon column.
 */
/* Separator items have to claim the rail width explicitly — the parent
   sidebar is flex-column with items sized to content, so without width:100%
   the <hr> collapses to 0 width and disappears. */
.sidenav-v4-separator {
    padding: 0;
    margin: 0.25rem 0;
    list-style: none;
    width: 100%;
    align-self: stretch;
}

.sidenav-v4-divider {
    display: block;
    width: auto;
    margin: 0.25rem 0.5rem;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    opacity: 0.6;
}

/* Labelled separators get a slightly heavier line so they read as
   intentional section boundaries (hover for the label tooltip). */
.sidenav-v4-divider-labelled {
    border-top-width: 2px;
    opacity: 0.8;
}

/* Dark mode parity — Bootstrap variables handle most of it, but the
   accent bar's contrast benefits from a small bump. */
[data-bs-theme="dark"] .sidenav-v4-item.active .sidenav-v4-link {
    background-color: rgba(var(--bs-primary-rgb), 0.18);
}

[data-bs-theme="dark"] .sidenav-v4-divider {
    border-top-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
}