/* Gedeelde stijlen voor de dynamische zijbalk.
 *
 * Bron: Shared/sit_ui/static/sit_sidebar.css
 * Kopie in elke app onder: app/static/_shared/sit_sidebar.css (via sync_sit_ui.ps1)
 * NIET direct in de app-kopie editen — verandering gaat verloren bij volgende sync.
 *
 * Hoort bij _sidebar_dynamic.html; samen renderen ze de collapsible secties en
 * de kinder-/kleinkind-links die uit [Autz].[Menu] komen.
 */

/* Sectiehoofd: <details>/<summary> is native HTML, dus geen JS voor open/dicht. */
.sit-section { margin: 2px 0; }
.sit-section > summary {
  cursor: pointer; list-style: none; user-select: none;
  padding: 6px 10px; margin: 2px 0;
  color: var(--pi-donker, #0F172A);
  font-size: 0.88rem; font-weight: 600;
  border-radius: 4px;
}
.sit-section > summary::-webkit-details-marker { display: none; }
.sit-section > summary::before {
  content: '\25B8'; display: inline-block; width: 12px;
  color: var(--pi-muted, #64748B); font-size: 0.75rem;
  transition: transform 0.15s;
}
.sit-section[open] > summary::before { transform: rotate(90deg); }
.sit-section > summary:hover { background: #F1F5F9; }

/* Kind-links onder een sectiehoofd. */
.sit-section > a {
  display: block; padding: 5px 10px 5px 24px; margin: 1px 0;
  color: var(--pi-muted, #64748B); text-decoration: none;
  font-size: 0.88rem; border-radius: 4px;
}
.sit-section > a:hover { background: #F1F5F9; color: var(--pi-donker, #0F172A); }
.sit-section > a.active { color: var(--pi-oranje, #FF6B1A); font-weight: 600; background: #FFF5EE; }

/* Kleinkinderen (3e niveau) iets verder ingesprongen. */
.sit-section .sit-sidebar-subsub { padding-left: 12px; }

/* Top-level standalone link — voor een sectiehoofd dat zelf een route heeft
 * (bv. "Mijn"). Zelfde look als een <summary> zodat het aansluit op de rest. */
.sit-section-top-link {
  display: block; text-decoration: none;
  padding: 6px 10px; margin: 2px 0;
  color: var(--pi-donker, #0F172A);
  font-size: 0.88rem; font-weight: 600;
  border-radius: 4px;
}
.sit-section-top-link:hover { background: #F1F5F9; color: var(--pi-donker, #0F172A); }
.sit-section-top-link.active { color: var(--pi-oranje, #FF6B1A); background: #FFF5EE; }