/* Sidebar is isolated here so menu spacing, typography, and active states are easy to tune. */
.app-sidebar {
  background: var(--shell-sidebar-bg) !important;
  border-right: 1px solid var(--shell-sidebar-border) !important;
}

body.theme-lux-dark .app-sidebar {
  border-right-color: color-mix(in srgb, var(--theme-border-soft) 42%, transparent) !important;
}

.app-sidebar-brand {
  padding: 4px 4px 12px;
}

.app-sidebar-nav {
  gap: 8px;
}

.app-sidebar .nav-group {
  border-top-color: var(--theme-border-soft);
}

.app-sidebar .nav-group-title,
.app-sidebar .nav-group-toggle {
  color: color-mix(in srgb, var(--theme-text) 88%, var(--theme-muted));
}

.app-sidebar .nav button:not(.nav-group-toggle),
.app-sidebar .nav .nav-group-items button {
  min-height: 42px;
  padding-inline: 14px;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--theme-text) !important;
  font-size: 14px;
  font-weight: 780;
}

.app-sidebar .nav button:not(.nav-group-toggle).active,
.app-sidebar .nav .nav-group-items button.active {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-high) !important;
  color: var(--theme-primary) !important;
}

.app-sidebar-footer {
  border-top: 1px solid var(--theme-border-soft);
  padding-top: 14px;
}

body.theme-lux .app-sidebar .nav button:not(.nav-group-toggle).active,
body.theme-lux .app-sidebar .nav .nav-group-items button.active {
  border-left: 4px solid var(--theme-primary) !important;
}