/* menu-estiam.css — Menu latéral « Estiam · Syllabus » (MudBlazor 9.6)
   Charger APRÈS le CSS de MudBlazor. S'appuie sur les variables --mud-palette-*
   afin de suivre automatiquement le mode clair / sombre. */

.nav-estiam {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 4px 8px 8px;
}

/* ---- Contexte : année ---- */
.nav-context {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 4px 4px;
  padding: 8px 11px;
  border: 1px solid var(--mud-palette-divider);
  border-radius: 9px;
  background: var(--mud-palette-background-gray);
}
.nav-context-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mud-palette-secondary); }
.nav-context-label { font-size: .72rem; color: var(--mud-palette-text-secondary); }
.nav-context-value { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: .72rem; font-weight: 600; }

/* ---- Libellés de groupe ---- */
.nav-group-label {
  font-family: "JetBrains Mono", monospace;
  font-size: .625rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--mud-palette-text-disabled);
  padding: 12px 12px 6px;
}

/* ---- Items MudNavLink ---- */
.nav-estiam .mud-nav-link {
  border-radius: 9px;
  min-height: 42px;
  margin: 1px 0;
  color: var(--mud-palette-text-secondary);
  gap: 4px;
}
.nav-estiam .mud-nav-link .mud-icon-root { color: var(--mud-palette-text-disabled); font-size: 1.3rem; }
.nav-estiam .mud-nav-link:hover { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); }
.nav-estiam .mud-nav-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mud-palette-primary-lighten); }

/* ---- Item actif : fond tinté + barre d'accent + icône primaire ----
   !important : MudBlazor 9.6 applique un fond/graisse par défaut sur `.mud-nav-link.active`
   à spécificité équivalente ; on garantit la surcharge du design system. */
.nav-estiam .mud-nav-link.active {
  background: var(--mud-palette-primary-hover, var(--mud-palette-primary-lighten)) !important;
  color: var(--mud-palette-primary) !important;
  font-weight: 600 !important;
  position: relative;
}
.nav-estiam .mud-nav-link.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: var(--mud-palette-primary);
}
.nav-estiam .mud-nav-link.active .mud-icon-root { color: var(--mud-palette-primary); }

/* ---- Compteurs / badges ---- */
.nav-item-row { display: inline-flex; align-items: center; width: 100%; }
.nav-badge {
  margin-left: auto; font-family: "JetBrains Mono", monospace;
  font-size: .66rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; line-height: 1.5;
}
.nav-badge-neutral { color: var(--mud-palette-primary); background: var(--mud-palette-surface); }
.nav-badge-muted   { color: var(--mud-palette-text-disabled); }
.nav-badge-error   { color: #fff; background: var(--mud-palette-error); }

/* ---- Pied de menu ---- */
.nav-footer { margin-top: auto; padding: 8px 2px 2px; border-top: 1px solid var(--mud-palette-divider); }
.nav-user, .nav-theme { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 9px; }
.nav-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--mud-palette-primary-lighten); color: var(--mud-palette-primary);
  display: grid; place-items: center; font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.nav-user-meta { min-width: 0; line-height: 1.2; }
.nav-user-name { font-size: .78rem; font-weight: 600; }
.nav-user-mail { font-size: .68rem; color: var(--mud-palette-text-disabled); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-theme-label { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.nav-theme .mud-switch { margin-left: auto; }

/* ---- Mode réduit (rail) : masquer textes de groupe, contexte et pied ---- */
.mud-drawer--closed .nav-group-label,
.mud-drawer--closed .nav-context,
.mud-drawer--closed .nav-footer .nav-user-meta,
.mud-drawer--closed .nav-footer .nav-theme-label,
.mud-drawer--closed .nav-badge { display: none; }