/* S4 kopbalk – hoort bij shell/s4-topbar.js. Herbruikbaar in alle S4-apps.
   Huisstijl: Bahnschrift/Calibri, S4 Blauw #4FB2ED, Diepblauw #1C6FAE, oranje lijn #FF7A2F onder de kopbalk.
   Donkere variant: zet .s4-topbar-dark op de host of body.platform-shell--dark. */

.s4-topbar-host {
  --s4-topbar-bg: #FFFFFF;
  --s4-topbar-text: #404040;
  --s4-topbar-muted: #6B6B6B;
  --s4-topbar-active: #1C6FAE;
  --s4-topbar-hover: #EAF6FD;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  min-height: 76px;
  padding: 0 clamp(16px, 3vw, 48px);
  box-sizing: border-box;
  background: var(--s4-topbar-bg);
  border-bottom: 1px solid #FF7A2F;
}

.s4-topbar-host.s4-topbar-dark,
body.platform-shell--dark .s4-topbar-host {
  --s4-topbar-bg: #0F1E2D;
  --s4-topbar-text: #E3ECF4;
  --s4-topbar-muted: #9DB1C3;
  --s4-topbar-active: #8FD0F5;
  --s4-topbar-hover: rgba(79, 178, 237, 0.12);
}

.s4-topbar { display: flex; align-items: center; gap: clamp(16px, 3vw, 48px); flex: 1 1 auto; min-width: 0; }

.s4-topbar__brand { display: inline-flex; align-items: center; gap: 14px; flex: none; text-decoration: none; min-height: 44px; }
.s4-topbar__logo { display: block; height: 42px; width: auto; }
.s4-topbar__app-label { padding-left: 14px; border-left: 1px solid #D7E6F0; font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif; font-size: 15px; font-weight: 700; color: var(--s4-topbar-muted); white-space: nowrap; }
/* Vaste breedte voor de appnaam, zodat Dashboard/Rapportage/... in elke app op dezelfde plek staan
   (ruim genoeg voor "Backupcontrole"; langere namen worden afgekapt met …). */
.s4-topbar__app-label { box-sizing: content-box; width: 8.5em; overflow: hidden; text-overflow: ellipsis; }
body.platform-shell--dark .s4-topbar__app-label, .s4-topbar-dark .s4-topbar__app-label { border-left-color: rgba(255, 255, 255, 0.16); }

.s4-topbar__nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.s4-topbar__nav::-webkit-scrollbar { display: none; }
.s4-topbar__nav ul { display: flex; align-items: stretch; gap: 4px; margin: 0; padding: 0; list-style: none; }
.s4-topbar__link {
  display: inline-flex; align-items: center; min-height: 76px; box-sizing: border-box;
  padding: 3px 16px 0; border-bottom: 3px solid transparent;
  font-family: Bahnschrift, 'DIN Alternate', 'Segoe UI', sans-serif; font-weight: 600; font-size: 17px; letter-spacing: .02em;
  color: var(--s4-topbar-text); text-decoration: none; white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.s4-topbar__link:hover { background: var(--s4-topbar-hover); color: var(--s4-topbar-active); }
/* Actief: kleur + streep, zelfde letterdikte zodat de knoppen niet verschuiven. */
.s4-topbar__link[aria-current="page"] { color: var(--s4-topbar-active); border-bottom-color: #4FB2ED; }
.s4-topbar__link:focus-visible, .s4-topbar__brand:focus-visible { outline: 3px solid #4FB2ED; outline-offset: -3px; }

@media (max-width: 640px) {
  .s4-topbar-host { min-height: 64px; gap: 0 12px; }
  .s4-topbar { gap: 12px; }
  .s4-topbar__app-label { display: none; }
  .s4-topbar__logo { height: 30px; }
  .s4-topbar__link { min-height: 64px; padding: 3px 10px 0; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .s4-topbar__link { transition: none; }
}