/* Topbalk van de back-office + dropdowns.
   Huisstijl-tokens uit tokens.css; vlakke vlakken (volledige rand + lichte
   schaduw), geen decoratieve linkerbalk. Alleen geladen door index.html.
   De globale zoekfunctie staat niet meer als veld in deze balk: die opent als
   zoekpalet (zoekpalet.css) via de zijbalk of Ctrl/Cmd+K. */

/* ---- Balk --------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: 60px;
  /* links = padding van #app (zelfde clamp), zodat de titel uitlijnt met de
     linkerrand van de content-tiles; rechts gelijk voor symmetrie. */
  padding: 0 clamp(16px, 3vw, 32px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
/* Twee kolommen: paginatitel links, actie-iconen rechts. De titel staat in de
   topbalk i.p.v. in de content - dat scheelt verticale ruimte en houdt de
   koppen overal uniform; op smalle schermen krimpt hij met ellipsis (minmax 0),
   de iconen krimpen nooit onder hun eigen breedte (auto). */
.topbar__tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
}
/* Smal scherm (B-122): een derde kolom vooraan voor de hamburger; de titel
   houdt zijn minmax(0,1fr)-kolom en dus zijn ellipsis-gedrag. Op desktop is de
   hamburger display:none en plaatst de grid titel en iconen gewoon in de twee
   kolommen hierboven. */
@media (max-width: 767px) {
  .topbar__tools { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.topbar__actions { display: flex; align-items: center; gap: 8px; justify-self: end; }

/* Hamburger in de topbalk (B-122): het UITERLIJK komt van de globale
   .topbar-icon; deze class regelt alleen de zichtbaarheid - de knop bestaat
   alleen op een smal scherm, waar de icoonrail verborgen is (layout.css). */
/* Dubbele class in de selector: .topbar-icon (het globale uiterlijk) staat
   verderop in dit bestand en zou op gelijke specificiteit dit display: none
   overschrijven. */
.topbar-icon.topbar-hamburger { display: none; }
@media (max-width: 767px) {
  .topbar-icon.topbar-hamburger { display: inline-flex; }
}

/* Paginatitel: vult de plek van de oude content-<h1>. Krimpt met ellipsis op
   smalle schermen zodat de zoekbalk en de iconen blijven passen. */
.topbar-titel {
  margin: 0;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  font-size: 1.4rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-titel[hidden] { display: none; }

/* Icoon-knop (belletje) + badge */
.topbar-pop { position: relative; }
.topbar-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--blue-700);
  cursor: pointer;
}
.topbar-icon:hover { background: rgba(0, 71, 128, .08); }
/* Primaire chrome-icoonmaat (tokens.css): gedeeld met de zijbalk-menu-iconen,
   zodat topbalk en menu gelijk blijven. */
.topbar-icon svg { width: var(--icon-chrome); height: var(--icon-chrome); }
/* Plek + maat komen uit de gedeelde .ico-teller/.badge (base.css), gelijk aan de
   menu-teller in de zijbalk; hier alleen de ring in de topbalk-achtergrond zodat
   de teller loskomt van het icoon eronder. */
.topbar-badge { border: 2px solid var(--paper); }

/* Account-knop (avatar + voornaam) */
.topbar-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 5px;
  border: 0;
  background: none;
  border-radius: 999px;
  color: var(--ink-900);
  font: inherit;
  cursor: pointer;
}
.topbar-account:hover { background: rgba(0, 71, 128, .08); }
.topbar-account__naam { font-size: .9rem; font-weight: 600; }
.topbar-account__caret { width: 16px; height: 16px; color: var(--muted); }
/* Smal scherm (B-122): alleen de avatar-badge; naam en caret kosten ruimte die
   de paginatitel hard nodig heeft. De knop blijft gewoon tapbaar op de avatar. */
@media (max-width: 767px) {
  .topbar-account__naam,
  .topbar-account__caret { display: none; }
}
.topbar-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--blue-700);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .02em;
}
.topbar-avatar--lg { width: 40px; height: 40px; font-size: .95rem; flex: 0 0 40px; }

/* ---- Dropdown-panelen --------------------------------------------------- */
.topbar-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 248px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 70;
}
/* Taken-paneel ruim breder dan het account-menu: taaktitels passen zo veel
   vaker op een regel. Een expliciete breedte i.p.v. een max-width, anders krimpt het
   paneel tot de inhoud (dan wraps de tekst alsnog). Cap op de viewport zodat het
   paneel nooit buiten beeld valt. */
.topbar-menu--taken { width: min(600px, calc(100vw - 32px)); }
/* E-mail-/agendaflyout: smaller dan het taken-paneel; de inhoud (afzender +
   onderwerp / tijd + onderwerp) past in een smallere kolom. */
.topbar-menu--flyout { width: min(420px, calc(100vw - 32px)); }

/* Smalle schermen: vanaf tablet-breedte (<= 1024px, zelfde grens waarop de
   zijbalk tot icoonrail inklapt - zie sidebar.js/layout.css) hangen de brede
   flyouts (mail/agenda/taken) rechts-uitgelijnd aan hún icoon. Dat icoon staat
   links van de accountknop, dus een breed paneel dat naar links uitklapt valt
   over de linker schermrand EN over de icoonrail. De rail wint dat bovendien
   visueel: de topbalk is een eigen stacking-context (z-index 50) waarin de
   flyout (z-index 70) gevangen zit, terwijl de ingeklapte rail als broer op
   wortelniveau z-index 60 heeft (60 > 50) - de flyout kan er met geen enkele
   eigen z-index bovenuit komen. Oplossing: anker de brede flyouts aan de
   CONTENT-KOLOM (de topbalk zelf) i.p.v. aan de triggerknop of de viewport.
   Door de trigger-.topbar-pop hier niet-gepositioneerd te maken wordt de
   sticky .topbar het containing block; de flyout ligt dan altijd rechts van de
   rail en binnen de contentkolom (geen overlap -> stacking speelt niet meer),
   ongeacht of de zijbalk 70px of 228px breed is. Rechts uitgelijnd met een
   breedte-cap zodat het op de telefoon de kolom vult en op de tablet een nette
   dropdown onder de iconen blijft. Het accountmenu (rechtste knop, smal, past
   al binnen de kolom) blijft ongemoeid. Hoogte-cap loopt via .popup-scrollbaar. */
@media (max-width: 1024px) {
  .topbar-pop:has(> .topbar-menu--flyout),
  .topbar-pop:has(> .topbar-menu--taken) { position: static; }

  .topbar-menu--flyout,
  .topbar-menu--taken {
    position: absolute;
    top: calc(100% + 6px); /* 100% = hoogte van de topbalk (containing block) */
    right: 12px;
    left: auto;
  }
  /* 100% = breedte van de contentkolom (de topbalk); - 24px = 12px marge L+R. */
  .topbar-menu--taken { width: min(600px, calc(100% - 24px)); }
  .topbar-menu--flyout { width: min(420px, calc(100% - 24px)); }
}

.topbar-menu__head { display: flex; gap: 10px; align-items: center; padding: 8px 8px 10px; }
.topbar-menu__id { display: flex; flex-direction: column; min-width: 0; }
.topbar-menu__naam { font-weight: 600; }
.topbar-menu__mail { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.topbar-rolchip {
  align-self: flex-start;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--sidebar-active);
  color: var(--blue-700);
  font-size: .72rem;
  font-weight: 600;
}

.topbar-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .9rem;
  color: var(--ink-900);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.topbar-menu__item:hover { background: rgba(0, 71, 128, .07); }
.topbar-menu__item svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--muted); }
.topbar-menu__ext { margin-left: auto; width: 14px !important; height: 14px !important; }
.topbar-menu__item--uit { color: var(--err); }
.topbar-menu__item--uit svg { color: var(--err); }
.topbar-menu__sep { height: 1px; margin: 6px 4px; background: var(--line); }

.topbar-menu__titel {
  padding: 6px 10px 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.topbar-leeg { padding: 6px 10px 12px; color: var(--muted); font-size: .9rem; }

.topbar-taak {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .88rem;
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
}
.topbar-taak:hover { background: rgba(0, 71, 128, .07); }
.topbar-taak__dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 999px; background: var(--muted); }
.topbar-taak__dot--urgent { background: var(--err); }
.topbar-taak__dot--let-op { background: var(--warn); }
.topbar-taak__dot--info { background: var(--blue-700); }
.topbar-taak__tekst { flex: 1 1 auto; }

/* ---- Rij in de e-mail-/agendaflyout ------------------------------------- */
/* Twee regels per rij, met links een vaste indicator-/tijdkolom. Zelfde
   hover/typografie als de taakrij hierboven. */
.topbar-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .88rem;
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
}
.topbar-item:hover { background: rgba(0, 71, 128, .07); }
/* Ongelezen-stip (e-mail) */
.topbar-item__dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 999px; background: var(--blue-700); }
/* Vaste starttijd-/hele-dag-kolom (agenda): gelijke breedte zodat de titels
   uitlijnen, met tabulaire cijfers. */
.topbar-item__tijd--vast {
  flex: 0 0 auto;
  min-width: 60px;
  white-space: nowrap;
  color: var(--blue-700);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.topbar-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.topbar-item__kop { display: flex; align-items: baseline; gap: 8px; }
.topbar-item__titel { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Klok-tijd rechts in de kop (e-mail): gedempt, krimpt niet weg. */
.topbar-item__tijd { flex: 0 0 auto; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.topbar-item__sub { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Daggroep-kop in de agendaflyout. */
.topbar-dag {
  padding: 10px 10px 4px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink-900);
}