/* Agenda (Outlook via Graph). Afspraken per dag, vlakke kaarten, 1px-randen. */

/* Fullbleed (B-46) + Outlook-linkerpaneel (F6.1-F6.3): paneel links (Afspraak
   maken, mini-kalender, agendalijsten), rechts de hoofdkolom met navigatie en
   rooster. Week-/dag-/maandrooster rekken mee tot de onderrand; alleen bij
   plaatsgebrek scrolt de hoofdkolom zelf. */
.view--agenda {
  display: flex;
  height: 100%;
  min-height: 0;
}
.agenda-hoofd {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px clamp(16px, 3vw, 32px) clamp(16px, 3vw, 32px);
  overflow-y: auto;
}
.agenda-hoofd .agenda-nav { flex: 0 0 auto; }

/* ---- Linkerpaneel (F6.1-F6.3): zelfde paneelpatroon als het mail-mappenpaneel - */
.agenda-zij {
  flex: 0 0 248px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--bg-50);
}
.agenda-zij__kop {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}
.agenda-zij__nieuw { flex: 1 1 auto; }
.agenda-zij__nieuw-ico { display: none; }
.agenda-zij__klap { border: 0; background: none; flex: 0 0 auto; }
/* De inklapknop toont per stand het juiste chevron-paar (geen her-render nodig). */
.agenda-zij:not(.agenda-zij--dicht) .agenda-zij__ico-open { display: none; }
.agenda-zij--dicht .agenda-zij__ico-dicht { display: none; }
.agenda-zij__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px; }
.agenda-zij__subkop {
  display: block;
  padding: 0 2px 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--blue-700);
}

/* Ingeklapt (F6.3): smalle rail met de uitklapknop en een plus-knop, zodat
   "Afspraak maken" bereikbaar blijft; mini en lijsten verdwijnen. */
.agenda-zij--dicht { flex-basis: 52px; }
.agenda-zij--dicht .agenda-zij__kop { flex-direction: column; gap: 8px; padding: 8px 4px; }
.agenda-zij--dicht .agenda-zij__klap { order: -1; }
.agenda-zij--dicht .agenda-zij__nieuw { display: none; }
.agenda-zij--dicht .agenda-zij__nieuw-ico {
  display: inline-flex;
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--blue-700);
}
.agenda-zij--dicht .agenda-zij__nieuw-ico:hover:not(:disabled) { background: var(--gold-300); }
.agenda-zij--dicht .agenda-zij__scroll { display: none; }

/* ---- Mini-maandkalender (F6.1) --------------------------------------------- */
.agenda-mini__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.agenda-mini__titel {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-900);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-mini__pijlen { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.agenda-mini__pijlen .btn-ico { width: 24px; height: 24px; border: 0; background: none; }
.agenda-mini__pijlen .btn-ico:hover:not(:disabled) { background: var(--blue-100); }
.agenda-mini__pijlen .btn-ico svg { width: 14px; height: 14px; }
/* Kolom 1 is het ISO-weeknummer (F6.6); daarnaast de dagen. De mini toont altijd
   zeven dagen (default); de weekstart-voorbeeldkop in Applicatiebeheer hergebruikt
   .agenda-mini__wk en zet --agenda-dagen op zes als de zondag verborgen is (B-94). */
.agenda-mini__wk, .agenda-mini__grid { display: grid; grid-template-columns: 20px repeat(var(--agenda-dagen, 7), 1fr); }
.agenda-mini__wknr {
  align-self: center;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: .6rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.agenda-mini__wknr:hover { background: var(--blue-100); color: var(--blue-700); }
.agenda-mini__wknr:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.agenda-mini__wk span {
  text-align: center;
  padding: 2px 0 4px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
}
.agenda-mini__dag {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 1px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: .72rem;
  color: var(--ink-900);
  cursor: pointer;
}
.agenda-mini__dag:hover { background: var(--blue-100); }
.agenda-mini__dag:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.agenda-mini__dag.is-buiten { color: var(--muted); }
.agenda-mini__dag.is-selectie { background: var(--blue-100); color: var(--blue-700); font-weight: 600; }
/* Vandaag: blauwe cirkel (wint van de selectie-accentuering). */
.agenda-mini__dag.is-vandaag { background: var(--blue-700); color: #fff; font-weight: 600; }

/* ---- Agendalijsten-blok (F6.2) ---------------------------------------------- */
.agenda-lijsten { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.agenda-lijsten__rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  color: var(--ink-900);
  cursor: pointer;
}
.agenda-lijsten__rij:hover { background: var(--blue-100); }
.agenda-lijsten__rij input { accent-color: var(--blue-700); cursor: pointer; margin: 0; }
.agenda-lijsten__stip { width: 10px; height: 10px; border-radius: 999px; background: var(--blue-700); flex: 0 0 10px; }

/* Lege-staat-hint als vlakke kaart: bij een uitgevinkte eigen agenda (F6.2) en
   als "geen afspraken"-hint boven de rasterweergaven (F6.37). */
.agenda-uit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--muted);
  font-size: var(--fs-data);
}
.agenda-uit svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--blue-700); }
.agenda-uit p { margin: 0; }

.agenda {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Vult de resterende hoogte van de view; het actieve rooster rekt mee. De
     lijstweergave (dagkaarten) blijft smal via een eigen cap op .agenda__dag. */
  flex: 1 1 auto;
  min-height: 0;
}

.agenda__dag {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  width: 100%;
  max-width: 760px;
}

.agenda__dagkop {
  margin: 0;
  padding: 10px 16px;
  font-size: var(--fs-data);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: capitalize;
  color: var(--blue-700);
  background: var(--bg-50);
  border-bottom: 1px solid var(--line);
}

.agenda__item {
  display: flex;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  /* Lijstregels zijn klikbaar en focusbaar (F6.34: roving tabindex, Enter = peek). */
  cursor: pointer;
}
.agenda__item:last-child { border-bottom: 0; }

.agenda__tijd {
  flex: 0 0 92px;
  font-size: var(--fs-data);
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
}

.agenda__detail { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agenda__ond { font-size: var(--fs-data); color: var(--ink-900); }
.agenda__loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-data);
  color: var(--muted);
}
.agenda__loc svg { width: 13px; height: 13px; }

/* Vandaag krijgt een subtiel accent op de dagkop (geen dikke balk). */
.agenda__dag:first-child .agenda__dagkop { color: var(--blue-700); background: var(--blue-100); }

.agenda__bezig { padding: 20px 4px; color: var(--muted); font-size: var(--fs-data); }
.agenda__leeg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 18px;
  color: var(--muted);
  font-size: var(--fs-data);
  text-align: center;
}
.agenda__leeg svg { width: 32px; height: 32px; color: var(--blue-100); }
/* Foutstaat (F6.37, F3.10-patroon): zelfde lege-staat-opmaak, waarschuwend icoon. */
.agenda__leeg--fout svg { color: var(--err); }

/* ---- Skeletonstaten per weergave (F6.37): pulserende plekken op de plaats
   van het echte rooster, zodat het laden nooit een leeg vlak toont. ---------- */
.agenda-skelet { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.agenda-skelet__balk {
  display: block;
  height: 9px;
  border-radius: 4px;
  background: var(--line);
  animation: agenda-skelet-puls 1.4s ease-in-out infinite;
}
.agenda-skelet__balk--kort { width: 42%; }
/* Maand: zelfde roosteropbouw als .agenda-grid, cellen met 0-2 balkjes. */
.agenda-skelet__grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--agenda-dagen, 7), 1fr);
  grid-auto-rows: minmax(112px, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.agenda-skelet__cel { background: var(--paper); padding: 28px 8px 8px; display: flex; flex-direction: column; gap: 7px; }
/* Week/werkweek/dag: tijdgoot + dagkolommen met blokjes op vaste plekken. */
.agenda-skelet__rooster {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 48px repeat(var(--dagen, 7), 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.agenda-skelet__gutter { border-right: 1px solid var(--line); background: var(--bg-50); }
.agenda-skelet__kolom { position: relative; border-right: 1px solid var(--line); }
.agenda-skelet__kolom:last-child { border-right: 0; }
.agenda-skelet__blok {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 4px;
  background: var(--line);
  animation: agenda-skelet-puls 1.4s ease-in-out infinite;
}
/* Lijst: dagkaart-silhouetten (kop + rijen), zelfde cap als .agenda__dag. */
.agenda-skelet__lijst { display: flex; flex-direction: column; gap: 18px; }
.agenda-skelet__kaart {
  width: 100%;
  max-width: 760px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.agenda-skelet__kaartkop { padding: 13px 16px; background: var(--bg-50); border-bottom: 1px solid var(--line); }
.agenda-skelet__kaartkop .agenda-skelet__balk--kort { width: 30%; }
.agenda-skelet__rij { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.agenda-skelet__rij:last-child { border-bottom: 0; }
.agenda-skelet__rij .agenda-skelet__balk--kort { flex: 0 0 92px; }
.agenda-skelet__rij .agenda-skelet__balk:not(.agenda-skelet__balk--kort) { flex: 1 1 auto; max-width: 55%; }
@keyframes agenda-skelet-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .agenda-skelet__balk, .agenda-skelet__blok { animation: none; opacity: .6; }
}

/* ---- Navigatiebalk: vorige/vandaag/volgende, datumkiezer, week/maand --------- */
.agenda-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.agenda-nav__knoppen { display: flex; align-items: center; gap: 10px; min-width: 0; }
.agenda-nav__rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.agenda-nav .btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-sm);
  color: var(--blue-700);
  cursor: pointer;
}
.agenda-nav .btn-ico:hover { background: var(--bg-50); }
.agenda-nav .btn-ico svg { width: 18px; height: 18px; }
/* Deze display:inline-flex staat gelijk aan de guard .btn-ico[hidden] (mailbox.css) en
   wint de bronvolgorde-tie, dus de generieke guard verbergt niets. Eigen, specifiekere
   guard (0,3,0) zodat bv. de tijdschaal-knop echt verdwijnt in maand-/lijstweergave. */
.agenda-nav .btn-ico[hidden] { display: none; }

/* Vorige/volgende als één segmentgroep (zoals Outlook), met deelrand ertussen. */
.agenda-nav__stappen {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.agenda-nav__stappen .btn-ico { border: 0; border-radius: 0; }
.agenda-nav__stappen .btn-ico + .btn-ico { border-left: 1px solid var(--line); }

.agenda-nav .btn-vandaag {
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-sm);
  color: var(--blue-700);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.agenda-nav .btn-vandaag:hover { background: var(--bg-50); }

/* De datumtitel is een knop (F6.35): klik = springen naar een datum via de
   gedeelde datumkiezer (het "Ga naar datum"-veld opent zijn kalender). */
.agenda-nav__label {
  margin-left: 4px;
  padding: 2px 6px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-900);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.agenda-nav__label:hover { background: var(--bg-50); color: var(--blue-700); }
.agenda-nav__label:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }

/* "Ga naar datum": kalender-icoon + veld als één nette pil (label, dus klik op het
   icoon focust het veld en opent de gedeelde datumkiezer). */
.agenda-nav__datumveld {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
}
.agenda-nav__datumveld:focus-within { border-color: var(--blue-700); }
.agenda-nav__datumveld svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 15px; }
.agenda-nav__datum {
  width: 86px;
  border: 0;
  padding: 0;
  background: none;
  color: var(--ink-900);
  font: inherit;
  font-size: .85rem;
}
.agenda-nav__datum:focus { outline: none; }

.agenda-nav__periode {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.agenda-nav__periode button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  border: 0;
  background: var(--paper);
  color: var(--blue-700);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
/* Scheidingslijnen tussen de segmenten; de dag-split-knop (F6.5) is een eigen
   segment met intern een dunne deellijn tussen "Dag" en de chevron. */
.agenda-nav__periode > * + * { border-left: 1px solid var(--line); }
.agenda-nav__dagsplit { display: inline-flex; }
.agenda-nav__periode .agenda-nav__dagmenu { padding: 0 7px; border-left: 1px solid var(--line); }
.agenda-nav__dagmenu svg { width: 14px; height: 14px; }
.agenda-nav__periode button.is-actief { background: var(--blue-700); color: #fff; }
.agenda-nav__periode button:not(.is-actief):hover { background: var(--bg-50); }

/* ---- Maandrooster (grid) -------------------------------------------------- */
.agenda-grid {
  display: grid;
  /* Aantal dagkolommen volgt de weekweergave (B-94): 7, of 6 als de zondag
     verborgen is. De containers zetten --agenda-dagen inline. */
  grid-template-columns: repeat(var(--agenda-dagen, 7), 1fr);
  /* Rij 1 = dagnamen (auto), de weekrijen verdelen de resthoogte gelijk maar
     worden nooit lager dan 112px; bij plaatsgebrek scrolt de view (fullbleed). */
  grid-template-rows: auto;
  grid-auto-rows: minmax(112px, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
/* Met weeknummer-kolom (F6.6): een smalle eerste kolom voor de ISO-weeknummers. */
.agenda-grid--wknr { grid-template-columns: 34px repeat(var(--agenda-dagen, 7), 1fr); }
.agenda-grid__wk {
  background: var(--bg-50);
  padding: 7px 8px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--blue-700);
}
.agenda-grid__wk--hoek { padding: 7px 2px; text-align: center; color: var(--muted); }
.agenda-grid__wknr {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 2px;
  border: 0;
  background: var(--bg-50);
  font: inherit;
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.agenda-grid__wknr:hover { background: var(--blue-100); color: var(--blue-700); }
.agenda-grid__wknr:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.agenda-grid__dag {
  background: var(--paper);
  /* Geen eigen min-height: de rijhoogte komt uit grid-auto-rows op .agenda-grid. */
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* Houd alle kolommen exact even breed: zonder min-width:0 groeit een cel mee
     met een lange afspraaktitel en wordt het rooster scheef. */
  min-width: 0;
  /* Quick create (F6.36): een klik op een lege plek start een nieuwe afspraak. */
  cursor: cell;
}
.agenda-grid__dag.is-buiten { background: var(--bg-50); }
.agenda-grid__dag.is-buiten .agenda-grid__nr { color: var(--muted); }
/* Weekendcellen gedempt (F6.9), zelfde stille tint als dagen buiten de maand. */
.agenda-grid__dag.is-weekend { background: var(--bg-50); }
.agenda-grid__nr { font-size: .78rem; font-weight: 600; color: var(--ink-900); }
.agenda-grid__dag.is-vandaag .agenda-grid__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--blue-700);
  color: #fff;
}
.agenda-grid__items { display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; }
/* De rij-wrappers van het ARIA-grid (F6.34) doen niet mee in de layout: de
   cellen blijven directe grid-items van .agenda-grid. */
.agenda-grid__rij { display: contents; }
/* Een chip is een knop (F6.34: focusbaar via de roving tabindex); de resets
   houden het uiterlijk van de oude span-chip. */
.agenda-chip {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  font-family: inherit;
  text-align: left;
  font-size: .72rem;
  line-height: 1.3;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--blue-100);
  color: var(--blue-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-chip:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
/* Langere afspraken mogen hun titel over 2 regels tonen; kortere blijven 1 regel
   met ellipsis. De duur bepaalt de klasse (zie tekenMaand in agenda.js). */
.agenda-chip--ruim {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.agenda-chip--heledag { background: var(--gold-300); color: var(--ink-900); }
/* "+N meer" is een knop (F6.10): opent de dag-flyout met alle afspraken. */
.agenda-chip--meer {
  background: none;
  border: 0;
  color: var(--muted);
  padding: 0 5px;
  font: inherit;
  font-size: .72rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.agenda-chip--meer:hover { color: var(--blue-700); text-decoration: underline; }
.agenda-chip--meer:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.agenda-chip:not(.agenda-chip--meer) { cursor: pointer; }
/* Lijstregels zijn focusbaar (F6.34: roving tabindex, Enter = peek); cursor staat
   bij de hoofddefinitie van .agenda__item. */
.agenda__item:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }

/* ---- Doorlopende balken in de maand (F6.11): hele dag of meerdaags ---------- */
/* Een balk staat in zijn eerste cel van de weekrij en rekt met een berekende
   breedte (in agenda.js) over de volgende cellen heen; spacers (--leeg) houden
   de lanen in alle cellen uitgelijnd. De balken-container mag niet knippen. */
.agenda-grid__balken { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; min-width: 0; }
/* Een balk is een knop (F6.34: focusbaar via de roving tabindex); de resets
   houden het uiterlijk van de oude span-balk. */
.agenda-balk {
  position: relative;
  z-index: 1;
  height: 17px;
  padding: 1px 5px;
  border: 0;
  border-radius: 4px;
  background: var(--blue-100);
  color: var(--blue-700);
  font-family: inherit;
  font-size: .72rem;
  line-height: 1.3;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.agenda-balk:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.agenda-balk--heledag { background: var(--gold-300); color: var(--ink-900); }
/* Doorloop buiten de zichtbare rij: vlakke hoek + pijl aan die kant. */
.agenda-balk--door-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.agenda-balk--door-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.agenda-balk--leeg { visibility: hidden; }
.agenda-balk:hover { background: var(--blue-700); color: #fff; }
.agenda-balk--heledag:hover { background: var(--gold-500); color: var(--ink-900); }
.agenda-balk:hover:not(.agenda-balk--heledag) .agenda-ico-teams { color: #fff; }
.agenda-balk--heledag .agenda-ico-teams { color: var(--ink-900); }
.agenda-balk__pijl { width: 11px; height: 11px; vertical-align: -2px; }

/* ---- Afspraak-detail ------------------------------------------------------ */
/* Icoon + waarde: het icoon op de EERSTE regel laten staan (niet verticaal
   gecentreerd tegen een meerregelige waarde), zoals .pl-tab__leeg. */
.detail-rij { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; font-size: var(--fs-data); color: var(--ink-900); }
.detail-rij svg { width: 16px; height: 16px; color: var(--blue-700); flex: 0 0 16px; margin-top: 1px; }
.detail-body { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); min-height: 150px; background: var(--paper); margin-top: 6px; }
.detail-body--tekst {
  margin: 6px 0 0;
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-sans);
  font-size: var(--fs-data);
  color: var(--ink-900);
  max-height: 240px;
  overflow: auto;
}
.btn--gevaar { background: var(--paper); border: 1px solid var(--err); color: var(--err); }
.btn--gevaar:hover { background: var(--err); color: #fff; }

/* ---- Weekrooster (uurrooster) --------------------------------------------- */
.week {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
  /* Vult de resterende viewporthoogte (fullbleed); de body scrolt intern. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.week__kop, .week__alledag { flex: 0 0 auto; }
.week__kop,
.week__alledag,
.week__body { display: grid; grid-template-columns: 48px repeat(var(--dagen, 7), 1fr); }
.week__kop { border-bottom: 1px solid var(--line); }
.week__dagkop { padding: 7px 4px; text-align: center; font-size: .78rem; border-right: 1px solid var(--line); }
.week__dagkop.is-vandaag { background: var(--blue-100); color: var(--blue-700); font-weight: 700; }
.week__dagnaam { text-transform: capitalize; }
.week__dagnr { color: var(--muted); }
.week__gutter-kop { border-right: 1px solid var(--line); }
.week__alledag { border-bottom: 1px solid var(--line); min-height: 26px; }
.week__gutter-cel { font-size: .66rem; color: var(--muted); padding: 4px; border-right: 1px solid var(--line); display: flex; align-items: center; }
/* Hele-dag-rij (F6.11): het vlak naast de goot is een eigen grid; de cellen
   tekenen alleen de kolomlijnen, de balken spannen via grid-column over de
   dagen en stapelen per laan (grid-row). */
.week__alledag-vlak {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(var(--dagen, 7), 1fr);
  grid-auto-rows: 22px;
  padding: 2px 0;
}
.week__alledag-cel { border-right: 1px solid var(--line); }
.week-balk {
  min-width: 0;
  margin: 1px 3px;
  padding: 1px 6px;
  border: 0;
  border-radius: 4px;
  background: var(--blue-100);
  color: var(--blue-700);
  font: inherit;
  font-size: .72rem;
  line-height: 1.3;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.week-balk--heledag { background: var(--gold-300); color: var(--ink-900); }
/* Doorloop buiten de zichtbare dagen: vlakke hoek + pijl aan die kant. */
.week-balk--door-l { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.week-balk--door-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.week-balk:hover { background: var(--blue-700); color: #fff; }
.week-balk--heledag:hover { background: var(--gold-500); color: var(--ink-900); }
.week-balk:hover:not(.week-balk--heledag) .agenda-ico-teams { color: #fff; }
.week-balk--heledag .agenda-ico-teams { color: var(--ink-900); }
.week-balk:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.week__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.week__uren { border-right: 1px solid var(--line); }
.week__uur { font-size: .64rem; color: var(--muted); padding: 0 5px; text-align: right; box-sizing: border-box; }
.week__kolom { position: relative; border-right: 1px solid var(--line); cursor: cell; }
.week__lijn { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
/* Werkuren-arcering (F6.9): de uren buiten de werkuren (standaard 08:00-18:00)
   en weekendkolommen zijn gedempt; de werkuren zelf blijven wit. */
.week__buiten { position: absolute; left: 0; right: 0; background: var(--bg-50); pointer-events: none; }
.week__kolom--weekend { background: var(--bg-50); }
/* Huidige-tijd-indicator (F6.8): lijn met bolletje op de kolom van vandaag. */
.week__nu { position: absolute; left: 0; right: 0; z-index: 4; border-top: 2px solid var(--err); pointer-events: none; }
.week__nu-bol { position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 999px; background: var(--err); }
.week-event {
  position: absolute;
  left: 2px;
  right: 2px;
  overflow: hidden;
  padding: 2px 5px;
  border: 0;
  border-radius: 4px;
  background: var(--blue-100);
  color: var(--blue-700);
  font: inherit;
  font-size: .72rem;
  line-height: 1.2;
  text-align: left;
  cursor: grab;
  /* Slepen op pointer events (F6.16): zonder touch-action zou aanraken scrollen. */
  touch-action: none;
  /* Dun licht randje zodat overlappende blokken (F6.7) zich aftekenen. */
  box-shadow: 0 0 0 1px var(--paper);
}
.week-event:hover { background: var(--blue-700); color: #fff; z-index: 7; }
.week-event__tijd { font-weight: 600; }
/* Sleepgrepen boven- en onderaan een blok (F6.15): begin- of eindtijd oprekken. */
.week-event__resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  cursor: ns-resize;
}
.week-event__resize--boven { top: 0; bottom: auto; }
/* Tijdens het slepen blijft het blok gedimd op zijn plek staan (het schaduwblok
   toont de doelpositie, F6.14); pointer-events none zodat elementFromPoint de
   kolom of de hele-dag-rij eronder kan vinden. */
.week-event.is-slepen { pointer-events: none; opacity: .45; cursor: grabbing; }
/* Toetsenbordfocus op een eventblok (F6.34): zelfde gouden ring als elders. */
.week-event:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; z-index: 7; }

/* ---- Sleep-visuals (F6.14): schaduwblok op de doelpositie + tijd-tooltip ----- */
.week-schaduw {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 6;
  border: 1px dashed var(--blue-700);
  border-radius: 4px;
  background: var(--blue-100);
  opacity: .65;
  pointer-events: none;
}
.week-tip {
  position: fixed;
  z-index: 90;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--ink-900);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
/* Doel-markering in de hele-dag-rij (F6.15): daar wordt de afspraak een hele dag. */
.week-balk--schaduw {
  border: 1px dashed var(--blue-700);
  background: var(--gold-300);
  opacity: .65;
  pointer-events: none;
}

/* ---- Inline composer voor quick create (F6.13): vlakke kaart naast de selectie - */
.agenda-composer {
  position: fixed;
  z-index: 80;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.agenda-composer__titel {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  font-size: var(--fs-data);
  color: var(--ink-900);
}
.agenda-composer__titel:focus { outline: none; border-color: var(--blue-700); }
.agenda-composer__tijd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: var(--fs-data);
  color: var(--ink-900);
  text-transform: capitalize;
}
.agenda-composer__tijd svg { width: 14px; height: 14px; color: var(--blue-700); flex: 0 0 14px; }
.agenda-composer__fout { margin: 0; font-size: var(--fs-data); color: var(--err); }
.agenda-composer__fout[hidden] { display: none; }
.agenda-composer__acties { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- Velden in de afspraak-modal ------------------------------------------ */
/* Nieuwe-afspraak-modal: een vast-hoog venster zodat het Bericht-veld (de
   richteksteditor) de resterende hoogte vult, precies zoals de nieuwe-mail
   (NFR-9 uniform). Zonder vaste hoogte zou de editor een dun strookje onderaan
   blijven; nu groeit hij mee met het venster. */
#agenda-modal .mail-modal__venster { height: min(88vh, 820px); }
#agenda-modal .mail-modal__form { flex: 1 1 auto; min-height: 0; }
#agenda-modal .mail-veld--blok:has(#af-tekst-houder) { flex: 1 1 auto; min-height: 0; }
#agenda-modal #af-tekst-houder { flex: 1 1 auto; min-height: 0; display: flex; }
#agenda-modal #af-tekst-houder .rte { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#agenda-modal #af-tekst-houder .rte__veld { flex: 1 1 auto; min-height: 180px; max-height: none; }
.agenda-veldrij { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.agenda-veldrij .mail-veld { flex: 1 1 auto; }
.mail-veld--vink { flex-direction: row; align-items: center; gap: 8px; }
.mail-veld--vink > span { font-weight: 400; color: var(--ink-900); }
.mail-veld--vink input { width: auto; }
/* .mail-veld is display:flex; deze guard laat el.hidden de velden echt verbergen
   (bij het Teams-succespaneel). Gescoped op de agenda-formulieren (.agenda-form =
   het aanmaak- EN het bewerken-formulier, NFR-9 uniform). */
.agenda-form .mail-veld[hidden] { display: none; }

/* Agenda-formulier: label LINKS van de invoer (zelfde patroon als de compose-modal),
   in zowel het aanmaak- als het bewerken-formulier (.agenda-form). Dat scheelt veel
   verticale ruimte t.o.v. labels erboven. Checkbox-velden (.mail-veld--vink), het
   berichtveld met de richteksteditor (.mail-veld--blok, F6.24) en de compacte
   tijd-/duurvelden (.agenda-tijdveld, F6.22) houden hun eigen layout. */
.agenda-form .mail-veld:not(.mail-veld--vink):not(.mail-veld--blok):not(.agenda-tijdveld) { flex-direction: row; align-items: center; gap: 12px; }
.agenda-form .mail-veld:not(.mail-veld--vink):not(.mail-veld--blok):not(.agenda-tijdveld) > span { flex: 0 0 118px; text-align: left; }
/* Zowel een kale input als een input+knop-rij (genodigden) vult de veldkolom, zodat
   ze net zo breed zijn als de andere velden en de compose-modal (NFR-9, uniform). */
.agenda-form .mail-veld:not(.mail-veld--vink):not(.mail-veld--blok):not(.agenda-tijdveld) > input,
.agenda-form .mail-veld:not(.mail-veld--vink):not(.mail-veld--blok):not(.agenda-tijdveld) > .mail-veld__rij { flex: 1 1 auto; min-width: 0; }
/* Tijd-/duurveld naast een datumveld (F6.22): compact, label inline; geldt voor het
   aanmaak- en het bewerken-formulier (beide zetten de velden in een veldrij). */
.agenda-veldrij .agenda-tijdveld { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; }
.agenda-veldrij .agenda-duur { min-width: 96px; }
/* Uitlijning begint/eindigt-rijen (F6.22): in een rij MET een tijdveld hugt het
   datumveld zijn inhoud (label + het app-brede compacte datumveld van 142px) i.p.v.
   mee te groeien met de rijbreedte. Zonder dit werd de begint-rij (alleen Van)
   breder dan de eindigt-rij (Tot + Duur), waardoor "Van" en "Tot" niet onder elkaar
   stonden en Duur los rechts bungelde. Nu zijn beide rijen even breed tot aan het
   tijdveld en lijnen Van en Tot uit; Duur sluit rechts op de eindigt-rij aan. De
   :has-scope laat de andere veldrijen (herhaling, herinnering) hun meegroeiende
   selects gewoon behouden. */
.agenda-veldrij:has(.agenda-tijdveld) .mail-veld:not(.agenda-tijdveld) { flex: 0 0 auto; }
/* Gelijk labelbreedtje voor Van/Tot/Duur zodat hun invoervelden netjes uitlijnen. */
.agenda-veldrij .agenda-tijdveld > span { min-width: 32px; }
/* Het datumveld (DD-MM-JJJJ) mag nooit smaller worden dan zijn inhoud: de generieke
   veldinput-regel hierboven geeft het flex:1 1 auto + min-width:0, waardoor het bij
   krappe breedte kon inkrimpen en het jaartal wegviel ("06/07/" i.p.v. "06/07/2026").
   Pin het op de compacte app-breedte (142px, gelijk aan de max-width in invoer.css) en
   laat de veldrij desnoods afbreken (flex-wrap hierboven) i.p.v. het datumveld te knijpen. */
.agenda-form .mail-veld:not(.mail-veld--vink):not(.mail-veld--blok):not(.agenda-tijdveld) > input[data-datumkiezer] {
  flex: 0 0 auto;
  min-width: 142px;
}

/* ---- Herhaling (F6.26) en opties (F6.28) in de afspraak-formulieren --------- */
/* Selects in dezelfde stijl als de tekstvelden (NFR-9, uniform). */
.mail-veld select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-data);
  color: var(--ink-900);
  background: var(--paper);
}
.mail-veld select:focus { outline: 2px solid var(--blue-100); outline-offset: 0; border-color: var(--blue-700); }
/* Het herhaling-blok (keuze + subvelden) als eigen kolom met de formulier-gap;
   verborgen bij een exemplaar van een reeks (F6.27). */
.agenda-herhaal-blok { display: flex; flex-direction: column; gap: 12px; }
.agenda-herhaal-blok[hidden] { display: none; }
.agenda-herhaal { display: flex; flex-direction: column; gap: 8px; }
.agenda-herhaal[hidden] { display: none; }
.agenda-herhaal__rij { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.agenda-herhaal__rij[hidden] { display: none; }
/* "Op"-label voor de weekdag-vinkjes lijnt uit met de veldlabels erboven. */
.agenda-herhaal__label { flex: 0 0 118px; font-size: var(--fs-data); font-weight: 600; color: var(--ink-900); }
/* Weekdag-vinkjes als compacte pillen (ma t/m zo). */
.agenda-herhaal__dag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: var(--fs-data);
  color: var(--ink-900);
  cursor: pointer;
}
.agenda-herhaal__dag:hover { border-color: var(--blue-700); }
.agenda-herhaal__dag:has(input:checked) { background: var(--blue-100); border-color: var(--blue-700); color: var(--blue-700); font-weight: 600; }
.agenda-herhaal__dag input { margin: 0; }
.agenda-herhaal__dag:focus-within { outline: 2px solid var(--blue-100); outline-offset: 0; }
/* Smalle nummer-invoer (interval, aantal keer); de id-scope wint van de brede
   veldregel van het aanmaak-formulier hierboven. */
.agenda-herhaal__rij input[type="number"],
.agenda-form .agenda-herhaal__rij .mail-veld > input[type="number"] { width: 84px; flex: 0 0 84px; }
/* Verwijderen (prullenbak) linksonder in de actiebalk van het bewerken-formulier
   (detail-popup-conventie): de subtiele rode .lg-verwijder duwt zichzelf naar links,
   Terug/Opslaan blijven rechts. */
.mail-modal__acties .lg-verwijder { margin-right: auto; }

/* ---- Teams-vergadering: callout in detail/bevestiging + indicatie in lijst --- */
/* Vlakke kaart (volledige 1px-rand + lichte schaduw), geen accentbalk. */
.agenda-teams {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-50);
  box-shadow: var(--shadow);
}
/* display:flex overschrijft de [hidden]-UA-regel; zo blijft het succespaneel verborgen. */
.agenda-teams[hidden] { display: none; }
.agenda-teams__kop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-weight: 700;
  color: var(--blue-700);
}
.agenda-teams__kop svg { width: 16px; height: 16px; }
.agenda-teams__detail { margin: 0; font-size: var(--fs-data); color: var(--muted); }

/* ---- Gekoppelde taken in het afspraak-detail (crosslink met "Mijn taken") ---- */
/* Zelfde vlakke kaart als het Teams-blok: volledige 1px-rand, geen accentbalk. */
.detail-taken {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-50);
  box-shadow: var(--shadow);
}
.detail-taken__kop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-weight: 700;
  color: var(--blue-700);
}
.detail-taken__kop svg { width: 16px; height: 16px; }
.detail-taken__leeg { margin: 0; font-size: var(--fs-data); color: var(--muted); }
.detail-taken__fout { margin: 0; font-size: var(--fs-data); color: var(--err); }
/* Een gekoppelde taak is een knop (opent de taak-modal); knop-uiterlijk neutraliseren. */
.detail-taak {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-data);
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
}
.detail-taak .taak__dot { margin-top: 0; }
.detail-taak:hover .detail-taak__titel { color: var(--blue-700); text-decoration: underline; }
.detail-taak:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Afgeronde gekoppelde taak: blijft zichtbaar (gedempt, doorgestreept) met Heropenen. */
.detail-taak--afgerond { cursor: default; }
.detail-taak--afgerond .taak__dot { background: var(--line); }
.detail-taak--afgerond .detail-taak__titel { color: var(--muted); text-decoration: line-through; }
.detail-taak--afgerond .btn-actie { margin-left: 6px; }

/* Klein Teams-icoon vooraan in chips, weekblokken en lijstitems. */
.agenda-ico-teams {
  width: 11px;
  height: 11px;
  vertical-align: -1px;
  margin-right: 3px;
  color: var(--blue-700);
}
.agenda-chip--heledag .agenda-ico-teams { color: var(--ink-900); }
.week-event:hover .agenda-ico-teams { color: #fff; }

/* Teams-indicatie + Deelnemen-link in de lijstweergave. */
.agenda__teams {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-data);
  color: var(--muted);
}
.agenda__teams .agenda-ico-teams { margin-right: 0; }
.agenda-join { color: var(--blue-700); font-weight: 600; text-decoration: underline; }
.agenda-join:hover { color: var(--gold-700, var(--blue-700)); }

/* ---- Dag-flyout bij "+N meer" (F6.10): vlakke kaart naast de dagcel --------- */
.agenda-flyout {
  position: fixed;
  z-index: 80;
  width: 300px;
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.agenda-flyout__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  padding: 2px 4px 6px;
  border-bottom: 1px solid var(--line);
}
.agenda-flyout__titel {
  font-size: .82rem;
  font-weight: 700;
  color: var(--blue-700);
  text-transform: capitalize;
}
.agenda-flyout__sluit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.agenda-flyout__sluit:hover { background: var(--bg-50); color: var(--blue-700); }
.agenda-flyout__sluit svg { width: 14px; height: 14px; }
.agenda-flyout__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: var(--fs-data);
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
}
.agenda-flyout__item:hover { background: var(--blue-100); }
.agenda-flyout__item:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.agenda-flyout__tijd { flex: 0 0 92px; font-weight: 600; white-space: nowrap; }
.agenda-flyout__ond { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-flyout__leeg { margin: 0; padding: 8px; color: var(--muted); font-size: var(--fs-data); }

/* ---- Weergeven-als-status op blokken en chips (F6.18) ------------------------ */
/* Voorlopig: gearceerd (dunne diagonale strepen, zoals Outlook). */
.week-event.is-voorlopig, .agenda-chip.is-voorlopig {
  background: repeating-linear-gradient(135deg, var(--blue-100) 0 5px, var(--paper) 5px 8px);
}
/* Vrij: alleen omlijnd (wit vlak met dunne blauwe ring). */
.week-event.is-vrij, .agenda-chip.is-vrij {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--blue-700);
}
.week-event.is-vrij { box-shadow: inset 0 0 0 1px var(--blue-700), 0 0 0 1px var(--paper); }
/* Afwezig: rustige paarse tint die zich aftekent tegen het blauwe bezet-vlak. */
.week-event.is-afwezig, .agenda-chip.is-afwezig { background: #e9e1f3; color: #5b3d8a; }
.week-event.is-afwezig .agenda-ico-teams, .agenda-chip.is-afwezig .agenda-ico-teams { color: #5b3d8a; }
/* Hover blijft overal het volle blauwe vlak (leesbaar in elke status). */
.week-event.is-voorlopig:hover, .week-event.is-vrij:hover, .week-event.is-afwezig:hover {
  background: var(--blue-700);
  color: #fff;
  box-shadow: 0 0 0 1px var(--paper);
}
/* Herhaal-icoon en slotje (F6.18): klein, kleurt mee met de tekst van blok/chip. */
.agenda-ico-klein { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; flex: 0 0 auto; }

/* ---- Tijdvelden in de inline composer (F6.23): tijdkiezer in kwartier-stappen - */
.agenda-composer__tijden { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.agenda-composer__tijden input {
  width: 72px;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  font-size: var(--fs-data);
  color: var(--ink-900);
}
.agenda-composer__tijden input:focus { outline: none; border-color: var(--blue-700); }

/* ---- Event-peek (F6.19): compacte callout bij een blok ----------------------- */
.agenda-peek {
  position: fixed;
  z-index: 80;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.agenda-peek__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.agenda-peek__titel { margin: 0; font-size: .95rem; font-weight: 700; color: var(--ink-900); overflow-wrap: anywhere; }
.agenda-peek__sluit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
}
.agenda-peek__sluit:hover { background: var(--bg-50); color: var(--blue-700); }
.agenda-peek__sluit:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.agenda-peek__sluit svg { width: 14px; height: 14px; }
.agenda-peek .detail-rij { margin: 2px 0; }
.agenda-peek__bezig { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-data); }
.agenda-peek__fout { margin: 4px 0 0; color: var(--err); font-size: var(--fs-data); }
.agenda-peek__fout[hidden] { display: none; }
/* Bewerken/RSVP-knoppen plakken onderaan: de peek scrollt (max-height 420px,
   overflow-y auto), dus bij een lange beschrijving/veel genodigden mogen de
   acties niet uit beeld scrollen. Eigen achtergrond + 1px-lijn dekken de
   doorschemerende inhoud af; negatieve marges trekken de balk tot de vakranden
   en de onderpadding van de peek gaat weg zodat de balk flush onderaan zit. */
.agenda-peek:has(.agenda-peek__acties) { padding-bottom: 0; }
.agenda-peek__acties {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px -14px 0;
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

/* ---- RSVP-status van genodigden (F6.20), in peek en detail ------------------- */
/* Compacte pil per genodigde met statusicoon: vinkje = geaccepteerd, vraagteken =
   voorlopig, kruis = geweigerd; zonder icoon = nog geen reactie. */
.detail-genodigden { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; }
.detail-genodigden__sub { color: var(--muted); margin-right: 2px; }
.detail-genodigden__meer { color: var(--muted); font-size: .78rem; }
.detail-rij--demp { color: var(--muted); }
.rsvp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-50);
  font-size: .78rem;
  color: var(--ink-900);
}
.rsvp svg { width: 12px; height: 12px; flex: 0 0 12px; }
.rsvp--ja svg { color: var(--ok); }
.rsvp--misschien svg { color: var(--warn); }
.rsvp--nee svg { color: var(--err); }

@media (max-width: 720px) {
  .agenda-grid { grid-auto-rows: minmax(96px, 1fr); }
}

/* ---- Responsief (F6.40): drawer-paneel, compacte kiezer, minder labels ------- */
/* De paneelknop in de navigatie en de scrim bestaan alleen op smal scherm. */
.agenda-nav__paneelknop { display: none; }
.agenda-zij-scrim { display: none; }

/* Tot 940px: het linkerpaneel wordt een drawer OVER de inhoud (zelfde patroon
   als het mail-mappenpaneel): dicht = helemaal weg (geen icoonrail), open =
   paneel + scrim; openen via de paneelknop, sluiten via inklapknop/scrim/Esc.
   De weergavekiezer en de datumtitel worden compacter. */
@media (max-width: 940px) {
  .view--agenda { position: relative; }
  .agenda-zij {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(300px, 85vw);
    box-shadow: var(--shadow);
  }
  .agenda-zij--dicht { display: none; }
  .agenda-zij:not(.agenda-zij--dicht) + .agenda-zij-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 35;
    background: rgba(28, 42, 57, .35);
  }
  .agenda-nav__paneelknop { display: inline-flex; }
  .agenda-nav { gap: 8px; }
  .agenda-nav__knoppen, .agenda-nav__rechts { gap: 8px; }
  .agenda-nav__periode button { padding: 0 9px; font-size: .78rem; }
  .agenda-nav__label { font-size: .92rem; }
}

/* Tot 700px: de overbodige labels wijken - de grote periodetitel verdwijnt (de
   datumkiezer en de mini-kalender in de drawer blijven de weg om te springen)
   en de kiezer wordt nog iets compacter. */
@media (max-width: 700px) {
  .agenda-nav__label { display: none; }
  .agenda-nav__periode button { padding: 0 7px; font-size: .74rem; }
  .agenda-nav__datum { width: 78px; }
}

/* ---- AG55+: meerdere + gedeelde agenda's in het lijsten-blok ----------------- */
/* De overige agenda's (eigen extra + gedeelde) onder de hoofdagenda; elk met een
   kleurstip en vinkje, een gedeelde agenda met een sluitknop. */
.agenda-lijsten__overige { display: flex; flex-direction: column; }
.agenda-lijsten__rij--overig { justify-content: space-between; gap: 4px; }
.agenda-lijsten__keuze {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  cursor: pointer;
}
.agenda-lijsten__keuze input { accent-color: var(--blue-700); cursor: pointer; margin: 0; flex: 0 0 auto; }
.agenda-lijsten__naam {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
}
.agenda-lijsten__sub { font-size: .72rem; color: var(--muted); }
.agenda-lijsten__verwijder {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.agenda-lijsten__verwijder:hover { background: var(--blue-100); color: var(--blue-700); }
.agenda-lijsten__verwijder:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.agenda-lijsten__verwijder svg { width: 13px; height: 13px; }
.agenda-lijsten__toevoegen {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 6px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-data);
  color: var(--blue-700);
  cursor: pointer;
}
.agenda-lijsten__toevoegen:hover { text-decoration: underline; }
.agenda-lijsten__toevoegen:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; border-radius: var(--radius-sm); }
.agenda-lijsten__toevoegen svg { width: 15px; height: 15px; flex: 0 0 15px; }

/* Legenda met de kleur per actieve agenda (boven het raster) tijdens een overlay. */
.agenda-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: var(--shadow);
  font-size: var(--fs-data);
  color: var(--ink-900);
}
.agenda-legenda__item { display: inline-flex; align-items: center; gap: 6px; }
.agenda-legenda__stip { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 10px; }

/* Gekleurde stip in de lijstweergave (overlay): kleurt de afspraak per agenda. */
.agenda-kleurstip { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 6px; vertical-align: 0; flex: 0 0 9px; }

/* Eventblokken/chips/balken in de overlay dragen hun agendakleur inline; deze
   klassen houden de hover leesbaar (de inline kleur wint van de blauwe basis,
   daarom een neutrale, donkere hover). */
.week-event--kleur:hover,
.week-balk--kleur:hover,
.agenda-balk--kleur:hover { filter: brightness(0.92); }
.agenda-chip--kleur { font-weight: 500; }

/* ---- AG43: agenda-kiezer (de keuzelijst staat in de bestaande veld-layout) --- */
/* Geen eigen regels nodig: de select erft .mail-veld select hieronder. */

/* ---- AG41: reactieopties als uitklapbare "Opties"-sectie -------------------- */
.agenda-opties {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-50);
}
.agenda-opties__kop {
  padding: 9px 12px;
  font-size: var(--fs-data);
  font-weight: 600;
  color: var(--blue-700);
  cursor: pointer;
  list-style: none;
}
.agenda-opties__kop::-webkit-details-marker { display: none; }
/* Het uitklap-driehoekje via clip-path (geen border-balk, conform de huisstijl). */
.agenda-opties__kop::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--blue-700);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  vertical-align: 0;
  transition: transform .15s ease;
}
.agenda-opties[open] .agenda-opties__kop::before { transform: rotate(90deg); }
.agenda-opties__kop:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; border-radius: var(--radius-sm); }
.agenda-opties__inhoud { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 12px; }
.agenda-opties__inhoud .mail-veld--vink { gap: 8px; }

/* ---- AG46: locatie-autocomplete (combobox onder het locatieveld) ------------- */
.agenda-locatie { position: relative; flex: 1 1 auto; min-width: 0; }
.agenda-locatie > input {
  width: 100%;
  box-sizing: border-box;
}
.agenda-locatie__uitslag {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.agenda-locatie__uitslag[hidden] { display: none; }
.agenda-locatie__optie {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: var(--fs-data);
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
}
.agenda-locatie__optie:hover,
.agenda-locatie__optie.is-actief { background: var(--blue-100); }
.agenda-locatie__optie svg { width: 14px; height: 14px; color: var(--muted); flex: 0 0 14px; }
.agenda-locatie__naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-locatie__sub { margin-left: auto; padding-left: 10px; color: var(--muted); font-size: .72rem; white-space: nowrap; }

/* ---- AG48: bijlagestrook in de editor + bijlagen in het detail --------------- */
.agenda-bijlagen-veld { gap: 8px; }
.agenda-bijlagen { display: flex; flex-wrap: wrap; gap: 8px; }
.agenda-bijlagen:empty { display: none; }
.agenda-bijlagen__toevoegen { display: inline-flex; align-items: center; gap: 7px; }
.agenda-bijlagen__toevoegen svg { width: 14px; height: 14px; }
/* Knop + toelichting op een rij, net als de nieuwe-mail (NFR-9 uniform). */
.agenda-bijlagen__rij { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.agenda-bijlagen__hint { font-size: var(--fs-data); color: var(--muted); }
.agenda-bijlage-tegel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.agenda-bijlage-tegel--fout { border-color: var(--err); }
.agenda-bijlage-tegel--klik {
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.agenda-bijlage-tegel--klik:hover { background: var(--bg-50); border-color: var(--blue-700); }
.agenda-bijlage-tegel--klik:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.agenda-bijlage-tegel__ico { flex: 0 0 auto; display: inline-flex; color: var(--blue-700); }
.agenda-bijlage-tegel--fout .agenda-bijlage-tegel__ico { color: var(--err); }
.agenda-bijlage-tegel__ico svg { width: 16px; height: 16px; }
.agenda-bijlage-tegel__tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Afbreken met zichtbare extensie komt uit de globale .bestandsnaam (base.css). */
.agenda-bijlage-tegel__naam { font-weight: 600; font-size: var(--fs-data); }
.agenda-bijlage-tegel__info { font-size: .72rem; color: var(--muted); }
.agenda-bijlage-tegel--fout .agenda-bijlage-tegel__info { color: var(--err); }
.agenda-bijlage-tegel__knop {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.agenda-bijlage-tegel__knop:hover { background: var(--bg-50); color: var(--blue-700); }
.agenda-bijlage-tegel__knop:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.agenda-bijlage-tegel__knop[disabled] { opacity: .5; cursor: default; }
.agenda-bijlage-tegel__knop svg { width: 14px; height: 14px; }

/* Bijlagen-blok in het afspraak-detail: vlakke kaart, zelfde patroon als taken. */
.detail-bijlagen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-50);
  box-shadow: var(--shadow);
}
.detail-bijlagen:empty { display: none; }
.detail-bijlagen__kop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-weight: 700;
  color: var(--blue-700);
}
.detail-bijlagen__kop svg { width: 16px; height: 16px; }
.detail-bijlagen__leeg { margin: 0; font-size: var(--fs-data); color: var(--muted); }
.detail-bijlagen__fout { margin: 0; font-size: var(--fs-data); color: var(--err); }

/* ---- XC15: agenda-zoeken (zoekveld in de navigatiebalk + resultaten-overlay) - */
.agenda-zoek {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.agenda-zoek:focus-within { border-color: var(--blue-700); }
.agenda-zoek__ico { width: 15px; height: 15px; color: var(--muted); flex: 0 0 15px; }
.agenda-zoek__veld {
  width: 150px;
  border: 0;
  padding: 0;
  background: none;
  color: var(--ink-900);
  font: inherit;
  font-size: .85rem;
}
.agenda-zoek__veld:focus { outline: none; }
.agenda-zoek__wis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.agenda-zoek__wis:hover { background: var(--bg-50); color: var(--blue-700); }
.agenda-zoek__wis:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.agenda-zoek__wis svg { width: 13px; height: 13px; }
/* display:inline-flex wint anders van het UA-[hidden]; guard zodat het wis-kruisje
   verdwijnt zolang het zoekveld leeg is. */
.agenda-zoek__wis[hidden] { display: none; }
/* De resultaten-overlay hangt aan body (verankerd onder het zoekveld). */
.agenda-zoek__uitslag {
  position: fixed;
  z-index: 80;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.agenda-zoek__melding { margin: 0; padding: 12px; font-size: var(--fs-data); color: var(--muted); }
.agenda-zoek__melding--fout { color: var(--err); }
.agenda-zoek__optie {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.agenda-zoek__optie:hover,
.agenda-zoek__optie.is-actief { background: var(--blue-100); }
.agenda-zoek__optie:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.agenda-zoek__ond { font-size: var(--fs-data); color: var(--ink-900); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-zoek__meta { font-size: .72rem; color: var(--muted); }

@media (max-width: 940px) {
  /* Op smal scherm wordt het zoekveld compacter zodat de navigatie niet uitloopt. */
  .agenda-zoek__veld { width: 110px; }
}
@media (max-width: 700px) {
  .agenda-zoek__veld { width: 84px; }
}

/* ---- AG18: tijdschaal/zoom (subtiele hulplijnen in het tijdraster) ----------- */
/* De halfuur-/kwartierlijnen staan tussen de volle uurlijnen en zijn lichter
   (stippellijn) zodat het uurritme leidend blijft. De uurhoogte zelf wordt via
   UUR_HOOGTE in de view ingesteld (15/30/60 minuten per blok). */
.week__lijn--sub { border-top: 1px dotted var(--line); opacity: .7; }

/* ---- AG26: badge voor afspraken buiten beeld (boven/onder het tijdraster) ----- */
/* Subtiele, klikbare indicator die sticky in de scrollende body blijft hangen en
   naar de eerste afspraak buiten beeld scrolt; verborgen tot er iets buiten valt.
   De badges spannen over alle kolommen (grid-column 1 / -1) in dezelfde rij als de
   uren/kolommen en zijn zelf hoogteloos, zodat ze het rooster niet verschuiven; de
   pil zweeft binnen die ruimte en plakt verticaal aan de boven-/onderrand. */
.week__buiten-beeld {
  position: sticky;
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 5;
  justify-self: center;
  align-self: start;
  height: 0;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--blue-700);
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  line-height: 22px;
  cursor: pointer;
}
.week__buiten-beeld[hidden] { display: none; }
.week__buiten-beeld--boven { top: 4px; align-self: start; }
.week__buiten-beeld--onder { bottom: 4px; top: auto; align-self: end; }
.week__buiten-beeld:hover { background: var(--blue-700); color: #fff; border-color: var(--blue-700); }
.week__buiten-beeld:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.week__buiten-beeld svg { width: 13px; height: 13px; flex: 0 0 13px; }

/* ---- AG67: Mijn dag-paneel (rechterpaneel met afspraken en taken van vandaag) - */
.agenda-mijndag {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--bg-50);
}
.agenda-mijndag[hidden] { display: none; }
.agenda-mijndag__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.agenda-mijndag__titel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-700);
}
.agenda-mijndag__titel svg { width: 17px; height: 17px; color: var(--gold-500); }
.agenda-mijndag__sluit { border: 0; background: none; flex: 0 0 auto; color: var(--muted); }
.agenda-mijndag__sluit:hover { color: var(--blue-700); }
.agenda-mijndag__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 16px; }
.agenda-mijndag__sectie { display: flex; flex-direction: column; gap: 6px; }
.agenda-mijndag__sectiekop {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.agenda-mijndag__datum { margin: 0 0 2px; font-size: .78rem; color: var(--muted); text-transform: capitalize; }
.agenda-mijndag__melding, .agenda-mijndag__leeg { margin: 0; font-size: var(--fs-data); color: var(--muted); }
.agenda-mijndag__fout { margin: 0; font-size: var(--fs-data); color: var(--err); }

/* Een afspraak in het paneel: vlakke kaart, tijd + onderwerp, optioneel locatie/Teams. */
.agenda-mijndag__afspraak {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.agenda-mijndag__afspraak:hover { border-color: var(--blue-700); background: var(--blue-100); }
.agenda-mijndag__afspraak:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.agenda-mijndag__tijd {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--blue-700);
}
.agenda-mijndag__ond {
  font-size: var(--fs-data);
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-mijndag__loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-mijndag__loc svg { width: 12px; height: 12px; flex: 0 0 12px; }
.agenda-mijndag__join {
  align-self: flex-start;
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--blue-700);
}
.agenda-mijndag__join:hover { text-decoration: underline; }

/* Een taak in het paneel: urgentie-stip + titel + optionele einddatum. */
.agenda-mijndag__taak {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.agenda-mijndag__taak:hover { border-color: var(--blue-700); background: var(--blue-100); }
.agenda-mijndag__taak:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.agenda-mijndag__taaktitel {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-data);
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-mijndag__taakdatum {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  color: var(--muted);
}
.agenda-mijndag__taakdatum svg { width: 11px; height: 11px; }

/* Op smal scherm (zelfde grens als het linkerpaneel) wordt Mijn dag een drawer
   over de inhoud, zodat het smalle raster niet verder inknelt. */
@media (max-width: 940px) {
  .agenda-mijndag:not([hidden]) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: min(300px, 85vw);
    box-shadow: var(--shadow);
  }
}