@layer components {
  .app-sidebar {
    display: flex; flex-direction: column; width: 16rem; height: 100%;
    background-color: var(--sidebar); border-right: 1px solid var(--sidebar-border);
    flex-shrink: 0; transition: width 200ms ease;
    &[data-state='collapsed'] { width: 3.5rem; overflow: hidden; }
  }
  .sidebar-header { display: flex; align-items: center; padding: 1rem; gap: 0.5rem; border-bottom: 1px solid var(--sidebar-border); }
  .sidebar-logo { font-size: 0.875rem; font-weight: 600; color: var(--sidebar-foreground); }
  .sidebar-nav { display: flex; flex-direction: column; padding: 0.5rem; gap: 0.125rem; flex: 1; overflow-y: auto; }
  .sidebar-link {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md); font-size: 0.875rem; color: var(--sidebar-foreground);
    text-decoration: none; transition: background-color 150ms ease;
    &:hover { background-color: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
    &[data-active='true'] { background-color: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 500; }
    & svg { width: 1rem; height: 1rem; flex-shrink: 0; }
  }
  .sidebar-section-title { padding: 0.75rem 0.75rem 0.375rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
  .sidebar-footer { padding: 1rem; border-top: 1px solid var(--sidebar-border); font-size: 0.75rem; color: var(--muted-foreground); & p { margin: 0; } }
}