/*
 * nav -- senkrechte Navigationsliste. Steht in beiden Drawern und in der
 * Seitenspalte der Verwaltung, überall gleich aufgebaut.
 * nav__group fasst Einträge unter einer Überschrift zusammen, nav__link ist
 * ein Eintrag, nav__note eine Zusatzangabe rechts.
 * Ein Zustand: nav__link--current für die Seite, auf der man gerade steht.
 */

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.nav__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__title {
  padding-inline: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding-inline: var(--space-3);
  border-radius: var(--radius-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav__link:hover {
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.nav__link--current {
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.nav__note {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}