/* Sidebar navigation */
.app-sidebar {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: var(--spacing-5) var(--spacing-4);
}
.sidebar__brand {
    /* The whole brand block is the hide / show button, so it needs the button reset and a hover. */
    appearance: none;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.sidebar__brand:hover { background: var(--color-surface-alt); }
.sidebar__brand:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sidebar__logo {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}

/* Collapsed to a rail: only the mark stays, centred, so it can be clicked to bring the menu back. */
html.is-sidebar-collapsed .app-sidebar { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
html.is-sidebar-collapsed .sidebar__brand { justify-content: center; width: auto; margin-left: auto; margin-right: auto; }
html.is-sidebar-collapsed .sidebar__brand-text,
html.is-sidebar-collapsed .sidebar__nav,
html.is-sidebar-collapsed .sidebar__footer { display: none; }
.sidebar__brand-text { line-height: 1.15; }
.sidebar__brand-name {
    font-family: var(--font-brand);
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-navy);
    font-size: var(--font-size-md);
}
.sidebar__brand-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
}
.sidebar__nav { display: flex; flex-direction: column; gap: var(--spacing-05); flex: 1; }
.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    position: relative;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.sidebar__link:hover { background: var(--color-surface-alt); color: var(--color-text); }
.sidebar__link.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}
.sidebar__link.is-active::before {
    content: "";
    position: absolute;
    left: -4px; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}
.sidebar__link .icon { color: currentColor; flex-shrink: 0; }
.sidebar__section {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-1);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.sidebar__footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-05);
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-3);
    margin-top: var(--spacing-3);
}