/**
 * DH Suite — Sidebar Navigation
 *
 * Navigation item styles for the app sidebar. Extracted from Rally's
 * admin sidebar (the reference pattern). Respond's coordinator sidebar
 * is nearly identical — differences are noted and consolidated here.
 *
 * Sidebar *structure and mechanics* (position, width, show/hide) live
 * in layout.css. This file handles the nav items, section labels,
 * icons, active states, and footer.
 *
 * HTML structure (inside .app-sidebar from layout.css):
 *   <nav class="sidebar-nav" aria-label="Main navigation">
 *     <h2 class="sidebar-section-label">Section</h2>
 *     <a href="…" class="sidebar-item active">
 *       <svg>…</svg> Dashboard
 *     </a>
 *     <a href="…" class="sidebar-item">
 *       <svg>…</svg> Settings
 *       <span class="sidebar-badge">3</span>
 *     </a>
 *   </nav>
 *   <div class="sidebar-footer">
 *     <a href="…" class="sidebar-item">
 *       <svg>…</svg> Settings
 *     </a>
 *   </div>
 */

@layer layout {

/* --- Nav container ------------------------------------------------------ */

.sidebar-nav {
    flex: 1;
    padding: var(--spacing-2) 0;
}

/* --- Section labels ----------------------------------------------------- */

.sidebar-section-label {
    padding: var(--spacing-2) var(--spacing-4);
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Nav items ---------------------------------------------------------- */

.sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-gray-600);
    text-decoration: none;
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
}

.sidebar-item:hover {
    background-color: var(--color-gray-50);
    text-decoration: none;
}

.sidebar-item:focus-visible {
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--focus-ring-offset, 2px));
}

/* --- Active state ------------------------------------------------------- */

.sidebar-item.active {
    color: var(--color-primary-dark, var(--color-primary));
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-right: 3px solid var(--color-primary);
}

/* --- Icons -------------------------------------------------------------- */

.sidebar-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* --- Badge (count indicator) -------------------------------------------- */

.sidebar-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--spacing-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-full);
    background-color: var(--color-danger);
    color: white;
}

/* --- Nested / indented items -------------------------------------------- */

.sidebar-item-nested {
    padding-left: var(--spacing-8);
}

/* --- Footer ------------------------------------------------------------- */

.sidebar-footer {
    border-top: 1px solid var(--color-gray-200);
    padding: var(--spacing-2) 0;
}

} /* end @layer layout */