/* Mailbox (Microsoft Graph). Werkbalk + mappen, lijst en leesvenster.
   Vlakke kaarten, 1px-randen, geen decoratieve accentbalken (huisstijl). */

/* ---- View-kolom (fullbleed, B-46) ------------------------------------------ */
/* De mail-view vult de volle hoogte van #app.app--fullbleed: werkbalk bovenin met
   vaste hoogte, daaronder het mail-vlak dat de rest vult. Geen paginascroll. */
.view--mail {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ---- Werkbalk -------------------------------------------------------------- */
/* Outlook-model (F3.2): de balk wrapt nooit; de actiegroep knijpt en wat niet
   past wijkt naar het ...-overloop-menu (zie .mail-overloop hieronder). */
.mail-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 16px;
  background: var(--paper);
}
.mail-bar__sep { width: 1px; height: 24px; flex: 0 0 auto; background: var(--line); }
.mail-bar__spacer { flex: 1 1 auto; }
.mail-bar__selectie { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; color: var(--muted); white-space: nowrap; }
/* De meetbare actiegroep: knoppen op een regel, overtollige knoppen krijgen
   is-overloop (display none) en verschijnen in het ...-menu. Bewust GEEN
   overflow: hidden (dat zou het "Verplaatsen"-dropdownmenu afknippen); de
   meting in mailbox.js telt de knopbreedtes op tegen de beschikbare ruimte. */
.mail-bar__acties {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
}
.mail-bar__acties .btn-actie { flex: 0 0 auto; white-space: nowrap; }
/* Vaste balk-elementen (Nieuwe mail, icoonknoppen) knijpen of wrappen nooit mee. */
.mail-bar > .btn-actie,
.mail-bar .btn-ico { flex: 0 0 auto; white-space: nowrap; }
.mail-bar .is-overloop { display: none !important; }

/* Splitsknop "Nieuwe mail" (F7.10): een hoofdknop + een smalle chevron-knop,
   naadloos aaneengesloten (de hoofdknop rondt links af, de chevron rechts) met
   een dunne 1px-scheiding ertussen. Geen accentbalk; beide delen delen de
   --primair-stijl uit base.css. De groep knijpt of wrapt nooit mee. */
.mail-nieuw { display: inline-flex; align-items: stretch; flex: 0 0 auto; }
.mail-nieuw__hoofd { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mail-nieuw__chevron {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid var(--blue-700);
  padding-left: 6px;
  padding-right: 6px;
}
.mail-nieuw__chevron svg { width: 16px; height: 16px; }

/* .btn-actie (incl. --primair/--gevaar) is de globale werkbalk-knopstijl en
   staat in base.css; ook de agenda, taken en het listgrid gebruiken die. */

/* Het hidden-attribuut werkt alleen als de display-regel het niet overschrijft: de
   UA-regel [hidden]{display:none} verliest van een class met `display`. Daarom expliciet,
   zodat verborgen knoppen (selectie-afhankelijk of via het tandwiel uitgezet) echt weg zijn. */
.btn-ico[hidden] { display: none; }

.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;
}
.btn-ico:hover:not(:disabled) { background: var(--bg-50); }
/* Blauwe (primaire) variant: een gevulde merk-blauwe icoonknop met lichte icoon -
   dezelfde blauw/licht-paring als de .btn-hover in de huisstijl. Hover keert om naar
   lichtblauw vlak met blauw icoon (= de is-actief/hover-tint). Eén bron, app-breed
   herbruikbaar. ELKE modal/popup Sluiten-icoonknop (data-sluit / data-record-sluit)
   krijgt dit blauwe thema automatisch, zodat alle popups app-breed gelijk sluiten -
   geen losse class per modal nodig (verzoek Harm). */
.btn-ico--blauw,
.btn-ico[data-sluit],
.btn-ico[data-record-sluit] {
  border-color: var(--blue-700);
  background: var(--blue-700);
  color: var(--blue-100);
}
.btn-ico--blauw:hover:not(:disabled),
.btn-ico[data-sluit]:hover:not(:disabled),
.btn-ico[data-record-sluit]:hover:not(:disabled) { background: var(--blue-100); color: var(--blue-700); }
/* Globale uit-stand: een icoon-knop zonder werking (bv. undo/redo zonder historie)
   oogt duidelijk inactief. Eén bron, zodat elke .btn-ico dezelfde uit-stijl krijgt. */
.btn-ico:disabled { opacity: .4; cursor: default; }
.btn-ico svg { width: 18px; height: 18px; }

/* Tandwiel-menu (weergave-instellingen, bv. leesvenster rechts/onder). */
.mail-instel { position: relative; }
.mail-instel__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 232px;
  /* Werkbalk-anker (onder topbalk + balk): reserve voor .popup-scrollbaar zodat
     het menu binnen beeld blijft en zelf scrollt (base.css). */
  --popup-reserve: 176px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mail-instel__menu[hidden] { display: none; }
.mail-instel__kop {
  padding: 4px 8px 2px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
/* De generieke menu-knoppen; de gedeelde voetlink (.menu-voetlink, base.css) valt
   hier bewust buiten zodat zijn eigen uiterlijk blijft staan. */
.mail-instel__menu button:not(.menu-voetlink) {
  text-align: left;
  padding: 7px 8px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .85rem;
  color: var(--ink-900);
  cursor: pointer;
}
.mail-instel__menu button:not(.menu-voetlink):hover { background: var(--bg-50); }
.mail-instel__menu button.is-actief { background: var(--blue-100); color: var(--blue-700); font-weight: 600; }

/* Tweede kop ("Knoppen in deze map") wat ruimte van de paneelkeuze erboven geven. */
.mail-instel__menu .mail-instel__kop + button { margin-top: 0; }
.mail-instel__menu .mail-instel__scheiding {
  height: 1px;
  margin: 6px 4px;
  background: var(--line);
}
/* De tandwiel-flyout (Leesvenster/Dichtheid/Knoppen + de ingang naar het volledige
   instellingen-venster) gebruikt nu de GLOBALE .instelflyout-opzet (base.css), zelfde
   als de werkschermen; vandaar geen eigen knoppen-/optie-/herstel-/voet-styling meer. */

/* "Verplaatsen naar..."-knop met dropdown (mappenlijst als doel). */
.mail-verplaats { position: relative; }
.mail-verplaats[hidden] { display: none; }
.btn-actie svg.mail-verplaats__caret { width: 14px; height: 14px; opacity: .65; }
.mail-verplaats__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  /* Werkbalk-anker: reserve voor .popup-scrollbaar (base.css), zelfde als het
     tandwiel-menu; vervangt de oude vaste max-height. */
  --popup-reserve: 176px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mail-verplaats__menu[hidden] { display: none; }
.mail-verplaats__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .85rem;
  color: var(--ink-900);
  cursor: pointer;
  white-space: nowrap;
}
.mail-verplaats__item:hover,
.mail-verplaats__item:focus-visible { background: var(--bg-50); outline: none; }
.mail-verplaats__item svg { width: 16px; height: 16px; flex: none; color: var(--blue-700); }
.mail-verplaats__naam { overflow: hidden; text-overflow: ellipsis; }
.mail-verplaats__bezig { padding: 8px; font-size: .82rem; color: var(--muted); }

/* ---- Verplaatsen-kiezer (F5.5) ---------------------------------------------- */
/* Zoekveld bovenin, daaronder "Recent" (max 5) en de volledige mappenboom; de
   items lenen de opmaak van het oude verplaats-menu (.mail-verplaats__item).
   De kiezer staat IN de werkbalk-dropdown of in de zwevende variant hieronder. */
.mail-mapkiezer { display: flex; flex-direction: column; min-width: 240px; }
.mail-mapkiezer__zoek {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin: 2px 2px 6px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-50);
}
.mail-mapkiezer__zoek:focus-within { border-color: var(--blue-700); background: var(--paper); }
.mail-mapkiezer__zoek svg { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }
.mail-mapkiezer__zoek input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .85rem;
  color: var(--ink-900);
  outline: none;
}
.mail-mapkiezer__lijst {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  max-height: 264px;
}
.mail-mapkiezer__kop {
  padding: 4px 8px 3px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.mail-mapkiezer__scheiding { height: 1px; margin: 5px 4px; background: var(--line); flex: 0 0 auto; }
.mail-mapkiezer__item--sub { padding-left: 26px; }
/* Zwevende variant (overloopmenu en rij-contextmenu): zelfde beeldtaal als het
   contextmenu (vlak wit kaartje, 1px-rand, lichte schaduw), geklemd binnen de
   viewport door de view. */
.mail-mapkiezer-zweef {
  position: fixed;
  z-index: 95;
  width: 280px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

/* ---- Categorieen (F5.17/F5.18) ----------------------------------------------- */
/* "Categoriseren"-knop met dropdown in de werkbalk (zelfde opzet als
   Verplaatsen); het menu zelf leent de schaal van .mail-verplaats__menu. */
.mail-cat { position: relative; }
.mail-cat[hidden] { display: none; }
/* Het Categoriseren-menu: kleurstip + naam per categorie, een vinkje bij elke
   categorie die alle gekozen berichten dragen, onderin de beheer-ingang. */
.mail-catmenu { display: flex; flex-direction: column; gap: 1px; min-width: 220px; }
.mail-catmenu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .85rem;
  color: var(--ink-900);
  cursor: pointer;
  white-space: nowrap;
}
.mail-catmenu__item:hover,
.mail-catmenu__item:focus-visible { background: var(--bg-50); outline: none; }
.mail-catmenu__item:disabled { opacity: .55; cursor: default; }
.mail-catmenu__naam { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.mail-catmenu__item svg.mail-catmenu__vink { width: 14px; height: 14px; flex: none; color: var(--blue-700); visibility: hidden; }
.mail-catmenu__item svg.mail-catmenu__vink.is-aan { visibility: visible; }
/* De beheer-ingang onderin is nu de gedeelde voetlink .menu-voetlink (base.css). */
/* Zwevende variant (contextmenu, overloop-menu, leeskop-knop): zelfde
   beeldtaal als de zwevende Verplaatsen-kiezer. */
.mail-catmenu-zweef {
  position: fixed;
  z-index: 95;
  width: 260px;
  /* Zwevend (JS klemt 'm in beeld): kleine reserve voor .popup-scrollbaar zodat
     hij ook bij veel categorieen binnen de viewport scrollt (base.css). */
  --popup-reserve: 24px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

/* Categorie-chips (kleurstip + naam): in de berichtrij compact tussen afzender
   en tijd (max 2 + een +N-rest), in de leeskop iets ruimer onder de
   afzenderregel, en als stip in de categorie-filterchip naast de zoekbalk. */
.mail__cat-stip { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; display: inline-block; }
.mail__cats { display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; margin-left: auto; overflow: hidden; }
.mail__cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 9em;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-50);
  font-size: .68rem;
  color: var(--muted);
  white-space: nowrap;
}
.mail__cat-naam { overflow: hidden; text-overflow: ellipsis; }
.mail__cat--rest { flex: none; }
/* Chips in de rij wijken (net als het tijdstip en het mapnaam-label) zodra de
   hover-snelacties verschijnen. */
.mail__item:focus-within:has(.mail__snel) .mail__cats { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .mail__item:hover:has(.mail__snel) .mail__cats { visibility: hidden; }
}
.mail__lijst--compact .mail__cats { margin-left: 0; }
/* De categorie-filterchip naast de zoekbalk (F5.18): zelfde chip als de
   actieve-filterchip, met de kleurstip van de gekozen categorie erin. */
.mail-filter__chip--cat .mail__cat-stip { width: 9px; height: 9px; }
/* Chips in de leeskop: iets groter en in inkt-kleur (alleen-tonen). */
.mail__lezen-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mail__lezen-cats[hidden] { display: none; }
.mail__lezen-cats .mail__cat { max-width: 14em; padding: 2px 9px; font-size: .75rem; color: var(--ink-900); }

/* Sleep-label bij het verslepen van berichten (F5.6): klein donkerblauw
   plaatje aan de cursor met het aantal (of het onderwerp); buiten beeld
   geparkeerd, de browser tekent hem als drag image. */
.mail__sleep-label {
  position: fixed;
  top: 0;
  left: -9999px;
  z-index: 120;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 12px;
  background: var(--blue-700);
  color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: .8rem;
  font-weight: 600;
}

/* ---- Overloop-menu van de werkbalk (F3.2, Outlook) -------------------------- */
/* Het ...-menu leent de opmaak van het tandwiel-menu (.mail-instel__menu) maar
   hangt links uitgelijnd onder de knop (de knop staat midden in de balk; naar
   rechts uitklappen blijft zo altijd binnen beeld). */
.mail-overloop { position: relative; flex: 0 0 auto; }
.mail-overloop[hidden] { display: none; }
/* Erft .mail-instel__menu (incl. --popup-reserve); hoogte-cap + scroll komen uit
   de gedeelde .popup-scrollbaar (base.css). */
.mail-overloop__menu { right: auto; left: 0; }
.mail-overloop__menu button:focus-visible { background: var(--bg-50); outline: none; }
.mail-overloop__menu button:disabled { opacity: .45; cursor: default; }
.mail-overloop__menu button:disabled:hover { background: none; }
.mail-overloop__menu .mail-overloop__gevaar { color: var(--err); }
/* Submenu-pijl van het "Verplaatsen"-item (opent de kiezer, F5.5). */
.mail-overloop__sub { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.mail-overloop__sub svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }

/* ---- Hoofdindeling: mappen | (lijst + leesvenster) ------------------------- */
/* Het mail-vlak vult de resterende viewporthoogte (fullbleed-keten via .view--mail);
   lijst en leesvenster scrollen intern, de pagina zelf nooit. Geen kaartrand of
   schaduw meer: dit is een werkblad van rand tot rand, alleen een lijn boven. */
.mail {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
/* Mappenpaneel: eigen kolom links van de lijst (Outlook-model, B-46). Kop met
   inklapknop, daaronder het scrollende mappengebied: eerst de Favorieten-sectie
   (F5.7, B-47), dan het kopje "Mappen" met de gewone lijst. Ingeklapt = smalle
   icoonrail. De breedte is versleepbaar (F1.5): de splitter zet
   --mail-mappen-breedte op het mail-vlak; zonder versleepte maat geldt 256px. */
.mail__mappen {
  flex: 0 0 var(--mail-mappen-breedte, 256px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--bg-50);
}
.mail__mappen-kop {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}
.mail__mappen-titel {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--blue-700);
  white-space: nowrap;
}
.mail__mappen-knop { border: 0; background: none; }
.mail__mappen-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }
/* Het vaste kopje boven de gewone lijst (de Favorieten-sectie staat erboven). */
.mail__mappen-subkop { display: block; padding: 6px 4px 4px; }
/* De inklapknop toont per stand het juiste chevron-paar (geen her-render nodig). */
.mail:not(.mail--mappen-dicht) .mail__mappen-ico-open { display: none; }
.mail--mappen-dicht .mail__mappen-ico-dicht { display: none; }
/* Laad-/lege-/foutstate van het paneel: bescheiden tekst, nooit een leeg gat. */
.mail__mappen-melding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  font-size: .82rem;
  color: var(--muted);
}
.mail__mappen-opnieuw {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--blue-700);
  cursor: pointer;
}
.mail__mappen-opnieuw:hover { background: var(--blue-100); }

/* ---- Favorieten-sectie (F5.7, besluit B-47) -------------------------------- */
/* Inklapbaar kopje boven de favoriete maprijen; geen favorieten = sectie weg
   (hidden-attribuut). De guard hieronder houdt dat ook vol waar latere regels
   een display op de sectie zetten (de horizontale rail op smal scherm). */
.mail__fav { margin-bottom: 6px; }
.mail__fav[hidden] { display: none !important; }
.mail__fav-knop {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 6px 4px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mail__fav-knop:hover { background: rgba(0, 71, 128, .07); }
.mail__fav-knop:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 0; }
.mail__fav-knop svg { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }
/* De chevron volgt de stand (zelfde patroon als de paneel-inklapknop). */
.mail__fav:not(.is-dicht) .mail__fav-ico-dicht { display: none; }
.mail__fav.is-dicht .mail__fav-ico-open { display: none; }
.mail__fav.is-dicht .mail__fav-lijst { display: none; }

/* ---- Gedeelde postvakken (MO38) ---------------------------------------------- */
/* Per gedeeld postvak een inklapbaar kopje (zelfde patroon als Favorieten) met de
   mappen eronder, gevolgd door de "+ Gedeeld postvak toevoegen"-regel. De
   verwijderknop (x) verschijnt op hover/focus, net als de favoriet-ster. */
.mail__postvakken { margin-top: 6px; }
.mail__postvak { margin-bottom: 4px; }
.mail__postvak-kop { display: flex; align-items: center; }
.mail__postvak-knop { flex: 1 1 auto; min-width: 0; }
.mail__postvak-knop .mail__postvak-ico { width: 15px; height: 15px; color: var(--blue-700); }
/* Mailbox-titel (eigen postvak en elk gedeeld postvak): een ingetogen kop, bewust
   kleiner dan de oude basismaat zodat hij niet uit de toon valt tegen de Favorieten/
   Mappen-kopjes. Eigen en gedeelde postvakken delen deze stijl, zodat ze gelijk ogen. */
.mail__postvak-knop .mail__map-naam { font-weight: 600; font-size: .82rem; color: var(--ink-900); }
.mail__postvak:not(.is-dicht) .mail__fav-ico-dicht { display: none; }
.mail__postvak.is-dicht .mail__fav-ico-open { display: none; }
.mail__postvak.is-dicht .mail__postvak-lijst { display: none; }
/* Het eigen postvak is ook een inklapbare groep; zijn mappenlijst is .mail__mappen-lijst. */
.mail__eigen-postvak.is-dicht .mail__mappen-lijst { display: none; }
/* De verwijderknop hergebruikt de ster-stijl (verschijnt bij hover/focus). */
.mail__postvak-weg svg { width: 14px; height: 14px; }
.mail__postvak-toevoegen { margin-top: 2px; }

/* Ingeklapt (desktop): smalle rail met alleen iconen; de mapnaam zit in de
   title-tooltip en de mappen blijven gewoon klikbaar. Favorieten staan bovenaan
   met een scheidingslijntje eronder; het sectiekopje en de sterren doen in de
   rail niet mee (display: none haalt ze ook uit de tab-volgorde). */
.mail--mappen-dicht .mail__mappen { flex-basis: 52px; }
.mail--mappen-dicht .mail__mappen-titel,
.mail--mappen-dicht .mail__map-naam,
.mail--mappen-dicht .mail__map-telt,
.mail--mappen-dicht .mail__map-totaal,
.mail--mappen-dicht .mail__fav-knop,
.mail--mappen-dicht .mail__map-ster,
.mail--mappen-dicht .mail__map-klap,
.mail--mappen-dicht .mail__map-nieuw,
.mail--mappen-dicht .mail__postvakken,
.mail--mappen-dicht .mail__postvak-toevoegen,
.mail--mappen-dicht .mail__mappen-melding { display: none; }
/* In de smalle rail negeert het eigen postvak zijn inklapstand: de mapiconen blijven
   altijd zichtbaar (de kop met de toggle is in de rail toch verborgen). */
.mail--mappen-dicht .mail__eigen-postvak.is-dicht .mail__mappen-lijst { display: block; }
.mail--mappen-dicht .mail__map-rij--sub { padding-left: 0; }
.mail--mappen-dicht .mail__mappen-kop { justify-content: center; padding: 8px 4px; }
.mail--mappen-dicht .mail__mappen-scroll { padding: 8px 6px; }
/* In de smalle icoon-rail tonen we GEEN favorieten: ze horen bij een postvak (met de
   mailbox-tag), wat in een rail met losse iconen niet leesbaar is. De eigen mappen
   blijven als iconen staan; favorieten gebruik je in het uitgeklapte paneel. */
.mail--mappen-dicht .mail__fav { display: none; }
.mail--mappen-dicht .mail__map { justify-content: center; gap: 0; padding: 9px 0; }
.mail__rechts { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
.mail--rechts .mail__rechts { flex-direction: row; }
.mail--onder .mail__rechts { flex-direction: column; }

/* De lijstmaat is versleepbaar (F1.5): per leesvensterstand een eigen variabele
   (breedte bij rechts, hoogte bij onder), elk met de oude vaste maat als standaard. */
.mail__lijst-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* De scheiding lijst <-> leesvenster is een PANEELgrens, geen rij-lijntje: 2px zodat
   hij niet wegvalt tussen de berichtrijen (de leeskop-tint hieronder doet de rest). */
.mail--rechts .mail__lijst-wrap { flex: 0 0 var(--mail-lijst-breedte, clamp(360px, 44%, 560px)); border-right: 2px solid var(--line); }
.mail--onder .mail__lijst-wrap { flex: 0 0 var(--mail-lijst-hoogte, 46%); border-bottom: 2px solid var(--line); }

/* ---- Splitters tussen de panelen (F1.5) ------------------------------------ */
/* Het gedeelde component (paneel-splitter.js/.css) verzorgt look en gedrag; hier
   alleen welke splitter wanneer meedoet: bij een ingeklapt mappenpaneel valt er
   niets te slepen, en van het lijst-paar is alleen het handvat van de actieve
   leesvensterstand zichtbaar (verticaal bij rechts, horizontaal bij onder). */
.mail--mappen-dicht .mail__splitter--mappen { display: none; }
.mail--rechts .mail__splitter--lijsth { display: none; }
.mail--onder .mail__splitter--lijstb { display: none; }

.mail__lijst-kop { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
/* Alles-selecteren staat LINKS van het zoekveld op dezelfde rij (een rij,
   zoals Outlook; verzoek 12/06/2026) en krimpt niet mee met het zoekveld. */
.mail__alles { display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; font-size: .8rem; color: var(--muted); cursor: pointer; }
.mail__lijst { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* Zoeken boven de berichtenlijst (zoals elke webmail). position: relative is
   het anker voor de suggestie-dropdown (F5.10). */
.mail__zoek { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-50); }
.mail__zoek svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.mail__zoek input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .85rem;
  color: var(--ink-900);
}
.mail__zoek input:focus { outline: none; }
.mail__zoek-wis { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.mail__zoek-wis:hover { color: var(--ink-900); }
.mail__zoek-wis[hidden] { display: none; }
.mail__zoek-wis svg { width: 14px; height: 14px; }

/* ---- Zoeksuggesties onder het zoekveld (F5.10) ------------------------------ */
/* Dropdown met recente zoekopdrachten en personen-treffers; de focus blijft in
   het veld (aria-activedescendant), opties krijgen is-actief bij pijltjes. */
.mail__zoek-sugg {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(28, 42, 57, .14);
}
.mail__zoek-sugg[hidden] { display: none; }
.mail__zoek-sugg-kop { display: block; padding: 4px 8px 2px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mail__zoek-sugg-rij { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: .82rem; color: var(--ink-900); cursor: pointer; }
.mail__zoek-sugg-rij:hover, .mail__zoek-sugg-rij.is-actief { background: var(--bg-50); }
.mail__zoek-sugg-rij > svg { width: 13px; height: 13px; color: var(--muted); flex: none; }
.mail__zoek-sugg-tekst { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__zoek-sugg-sub { display: block; font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.mail__zoek-sugg-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.mail__zoek-sugg-x:hover { color: var(--ink-900); background: var(--blue-100); }
.mail__zoek-sugg-x svg { width: 12px; height: 12px; }
.mail__zoek-sugg-wisalles { display: block; width: 100%; margin-top: 4px; padding: 7px 8px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: .76rem; font-weight: 600; color: var(--blue-700); text-align: left; cursor: pointer; }
.mail__zoek-sugg-wisalles:hover { background: var(--bg-50); }

/* ---- Zoekstaat boven de resultaten (F5.9/F5.11/F5.12) ----------------------- */
/* Resultaten-kop ("N resultaten voor 'term' ..."), de scope-keuze (Alle mappen /
   In deze map) en de filterchips Van / Datum / Bijlagen / Ongelezen. */
.mail__zoekstaat { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
.mail__zoekstaat[hidden] { display: none; }
.mail__zoekkop { font-size: .78rem; color: var(--muted); }
.mail__zoekkop:empty { display: none; }
.mail__zoekfilters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mail__zoekscope { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
/* display:inline-flex wint anders van het UA-[hidden]; guard zodat de zoekbereik-toggle echt verdwijnt. */
.mail__zoekscope[hidden] { display: none; }
.mail__zoekscope button { padding: 3px 10px; border: 0; background: var(--paper); font: inherit; font-size: .76rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.mail__zoekscope button + button { border-left: 1px solid var(--line); }
.mail__zoekscope button:hover { color: var(--blue-700); }
.mail__zoekscope button.is-actief { background: var(--blue-100); color: var(--blue-700); }

/* Filterchips (F5.11): zelfde pilvorm als de filterchip van F2.8; een actieve
   chip kleurt blauw en krijgt een los wis-kruisje ernaast (geen knop-in-knop). */
.mail-zoekchip { position: relative; display: inline-flex; align-items: center; flex: none; }
.mail-zoekchip__knop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 14em;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
  cursor: pointer;
}
.mail-zoekchip__knop:hover { border-color: var(--blue-700); }
.mail-zoekchip__knop.is-actief { background: var(--blue-100); border-color: var(--blue-100); color: var(--blue-700); }
.mail-zoekchip__knop span { overflow: hidden; text-overflow: ellipsis; }
.mail-zoekchip__knop svg { width: 12px; height: 12px; flex: none; }
/* Het kruisje IN de aan/uit-chips (Bijlagen/Ongelezen) alleen in actieve stand. */
.mail-zoekchip__knop svg.mail-zoekchip__x { display: none; }
.mail-zoekchip__knop[aria-pressed="true"] svg.mail-zoekchip__x { display: inline-block; }
.mail-zoekchip__wis { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--blue-700); cursor: pointer; }
.mail-zoekchip__wis:hover { background: var(--blue-100); }
.mail-zoekchip__wis[hidden] { display: none; }
.mail-zoekchip__wis svg { width: 12px; height: 12px; }
.mail-zoekchip__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 250px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(28, 42, 57, .14);
}
.mail-zoekchip__menu[hidden] { display: none; }
.mail-zoekchip__menu--keuzes { min-width: 160px; display: flex; flex-direction: column; }
.mail-zoekchip__menu input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); font: inherit; font-size: .82rem; color: var(--ink-900); }
.mail-zoekchip__lijst { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; margin-top: 6px; }
.mail-zoekchip__optie { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: .82rem; color: var(--ink-900); text-align: left; cursor: pointer; }
.mail-zoekchip__optie:hover, .mail-zoekchip__optie.is-actief { background: var(--bg-50); }
.mail-zoekchip__optie:focus-visible { background: var(--bg-50); outline: none; }
.mail-zoekchip__optie span { font-size: .74rem; color: var(--muted); }
.mail-zoekchip__melding { padding: 6px 8px; font-size: .76rem; color: var(--muted); }

/* Trefwoord-highlighting in de zoekresultaten (F5.12): subtiel goud, huisstijl. */
.mail__mark { padding: 0 1px; border-radius: 2px; background: var(--gold-300); color: inherit; }

/* Mapnaam-label bij een mailbox-brede zoektreffer (F5.9): klein pilletje tussen
   afzender en tijd; wijkt tijdens hover net als het tijdstip voor de snelacties. */
.mail__rij-map { flex: 0 1 auto; max-width: 9em; margin-left: auto; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-50); font-size: .68rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__item:focus-within:has(.mail__snel) .mail__rij-map { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .mail__item:hover:has(.mail__snel) .mail__rij-map { visibility: hidden; }
}
.mail__lijst--compact .mail__rij-map { flex: 0 0 auto; margin-left: 0; }

/* ---- Filter- en sorteermenu boven de lijst (F2.8, Outlook) ------------------ */
/* Zoekbalk, actieve-filterchip en de filterknop op een rij; het menu zelf leent
   de opmaak van het tandwiel-menu (.mail-instel__menu) en hangt rechts
   uitgelijnd onder de knop. Tijdens een zoekterm staat de knop uit (title legt
   uit waarom: Graph $search kan niet met $filter/$orderby). */
.mail__zoek-rij { display: flex; align-items: center; gap: 6px; }
.mail__zoek-rij .mail__zoek { flex: 1 1 auto; min-width: 0; }
.mail-filter { position: relative; flex: none; }
.mail-filter .btn-ico.is-actief { background: var(--blue-100); border-color: var(--blue-100); }
.mail-filter .btn-ico:disabled { opacity: .45; cursor: default; }
.mail-filter__menu button:focus-visible { background: var(--bg-50); outline: none; }
#mail-geav-knop.is-actief,
#mail-geav-knop[aria-expanded="true"] { background: var(--blue-100); border-color: var(--blue-100); }

/* Geavanceerd zoekformulier (OR35): een uitklapbaar paneel onder de zoekbalk
   met losse velden. Vlak (volledige 1px-onderrand, geen accentbalk), inline in
   de lijstkop zodat het de drie-paneel-layout niet verstoort. */
.mail-geav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: var(--shadow);
}
/* Het hidden-attribuut werkt alleen als de display-regel het niet overschrijft:
   de UA-regel [hidden]{display:none} verliest van een class met `display`. Daarom
   expliciet, zodat het paneel echt dicht is tot de trechterknop het opent. */
.mail-geav[hidden] { display: none; }
.mail-geav__rij { display: flex; gap: 10px; flex-wrap: wrap; }
.mail-geav__rij--opties { align-items: center; justify-content: space-between; }
.mail-geav__veld { flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mail-geav__veld--breed { flex-basis: 100%; }
.mail-geav__veld > span { font-size: var(--fs-data); color: var(--muted); }
.mail-geav__veld input {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  color: var(--ink-900);
}
.mail-geav__veld input:focus-visible { border-color: var(--blue-700); outline: none; }
.mail-geav__vink { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-data); cursor: pointer; }
.mail-geav__scope { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.mail-geav__scope button {
  padding: 5px 10px;
  border: none;
  background: var(--paper);
  font: inherit;
  font-size: var(--fs-data);
  color: var(--ink-900);
  cursor: pointer;
}
.mail-geav__scope button + button { border-left: 1px solid var(--line); }
.mail-geav__scope button.is-actief { background: var(--blue-700); color: var(--paper); }
.mail-geav__scope button:focus-visible { outline: 2px solid var(--blue-100); outline-offset: -2px; }
.mail-geav__uitleg { margin: 0; font-size: var(--fs-data); color: var(--err); min-height: 1em; }
.mail-geav__uitleg:empty { min-height: 0; }
.mail-geav__knoppen { display: flex; gap: 8px; }

/* De chip met de actieve filter (wis-kruisje), zoals Outlook hem naast de
   zoekbalk toont; klikken wist de filter. */
.mail-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  max-width: 10em;
  padding: 4px 9px;
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  background: var(--blue-100);
  color: var(--blue-700);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.mail-filter__chip[hidden] { display: none; }
.mail-filter__chip:hover { border-color: var(--blue-700); }
.mail-filter__chip span { overflow: hidden; text-overflow: ellipsis; }
.mail-filter__chip svg { width: 12px; height: 12px; flex: none; }

/* Paperclip-aanduiding bij een bericht met bijlagen. */
.mail__ond-clip { width: 13px; height: 13px; margin-right: 4px; color: var(--muted); vertical-align: -2px; }

/* [Concept]-label in de onderwerpregel van de Concepten-lijst (F4.5): rood,
   zoals Outlook; de rij toont daar ook de ontvanger in plaats van de afzender. */
.mail__concept { color: var(--err); font-weight: 600; }

/* Statusiconen in de rij (F2.13, Outlook): hoge urgentie (rood uitroepteken),
   lage urgentie (blauw pijltje omlaag), agenda-uitnodiging (kalender) en gevlagd
   (gevuld vlaggetje: fill op de Feather-outline). In de onderwerpregel naast de
   paperclip; normale berichten tonen niets. */
.mail__st { display: inline-flex; margin-right: 4px; vertical-align: -2px; }
.mail__st svg { width: 13px; height: 13px; }
.mail__st--hoog { color: var(--err); }
.mail__st--laag { color: var(--blue-700); }
.mail__st--agenda { color: var(--blue-700); }
.mail__st--vlag { color: var(--err); }
.mail__st--vlag svg { fill: currentColor; }
.mail__st--voltooid { color: var(--ok); }
/* Outlook-indicator (MO): pijltje als er op het bericht is geantwoord/doorgestuurd. */
.mail__st--beantwoord, .mail__st--doorgestuurd { color: var(--blue-700); }

/* "Meer laden" onder aan de lijst. */
.mail__meer {
  display: block;
  width: 100%;
  padding: 10px;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue-700);
  cursor: pointer;
}
.mail__meer:hover:not(:disabled) { background: var(--bg-50); }
.mail__meer:disabled { color: var(--muted); cursor: default; }

/* ---- Bijlaad-sentinel onder aan de lijst (F2.9) ----------------------------- */
/* Skeleton-rijen kondigen aan dat er meer berichten volgen; de Intersection-
   Observer op de sentinel laadt automatisch bij. De "Meer laden"-knop erin is de
   stille fallback (klein en gedempt) voor als de observer niet vuurt; de status-
   regel (aria-live) is de subtiele bezig-indicator. */
.mail__sentinel { border-top: 1px solid var(--line); padding-bottom: 2px; }
.mail__skelet { display: flex; align-items: center; gap: 10px; padding: 10px 12px; animation: mail-skelet-puls 1.4s ease-in-out infinite; }
.mail__skelet-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--line); }
.mail__skelet-tekst { display: flex; flex: 1 1 auto; flex-direction: column; gap: 7px; min-width: 0; }
.mail__skelet-balk { height: 9px; border-radius: 4px; background: var(--line); }
.mail__skelet-balk--kort { width: 42%; }
@keyframes mail-skelet-puls {
  0%, 100% { opacity: .45; }
  50% { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .mail__skelet { animation: none; opacity: .6; }
}
.mail__sentinel-status { display: block; padding: 0 12px; font-size: var(--fs-data); color: var(--muted); text-align: center; }
.mail__sentinel-status:empty { display: none; }
.mail__meer--stil { border-top: 0; padding: 6px 10px; background: transparent; font-size: var(--fs-data); font-weight: 600; color: var(--muted); }
.mail__meer--stil:hover:not(:disabled) { background: transparent; color: var(--blue-700); }

/* Nette einde-melding bij zoekresultaten (F2.10): zoeken kent geen bijladen. */
.mail__einde { padding: 12px; border-top: 1px solid var(--line); font-size: var(--fs-data); color: var(--muted); text-align: center; }

.mail__lezen { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }

/* ---- Mappen (rijen in het mappenpaneel) ------------------------------------ */
/* Vlakke rijen: icoon + naam + teller, actief = blauwe tint (geen accentbalk).
   Elke rij is een wrapper met de mapknop plus een ster-knop ernaast (F5.7); de
   ster is een sibling (geen knop-in-knop) en ligt rechts over de tellerplek.
   In de boom (F5.4) staat voor de mapknop een chevron-slot (uitklapknop of
   lege plaatshouder, zodat de namen uitlijnen) en springen submappen in. */
.mail__map-rij { position: relative; display: flex; align-items: center; margin: 1px 0; }
.mail__map-rij--sub { padding-left: 18px; }
.mail__map {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 7px 10px;
  margin: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .86rem;
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
}
/* Uitklap-chevron van een map met submappen (F5.4): muisdoel (tabindex -1, het
   toetsenbord klapt met pijl links/rechts op de mapknop zelf). */
.mail__map-klap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.mail__map-klap:hover { color: var(--blue-700); background: rgba(0, 71, 128, .12); }
.mail__map-klap svg { width: 13px; height: 13px; }
.mail__map-klap--leeg { cursor: default; }
/* Drop-doel bij het slepen van berichten naar een map (F5.6). */
.mail__map-rij.is-sleepdoel .mail__map { background: var(--blue-100); color: var(--blue-700); }
.mail__map-rij.is-sleepdoel .mail__map svg { color: var(--blue-700); }
/* "+ Nieuwe map"-regel onder aan het paneel (F5.4). */
.mail__map-nieuw {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  margin: 4px 0 0;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .82rem;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.mail__map-nieuw:hover { background: rgba(0, 71, 128, .07); color: var(--blue-700); }
.mail__map-nieuw:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 0; }
.mail__map-nieuw svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mail__map svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.mail__map:hover { background: rgba(0, 71, 128, .07); }
.mail__map:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 0; }
.mail__map.is-actief { background: var(--sidebar-active); color: var(--blue-700); font-weight: 600; }
.mail__map.is-actief svg { color: var(--blue-700); }
.mail__map-naam { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mailbox-tag rechts op een favorietregel (cross-mailbox favorieten): toont op DEZELFDE
   regel bij welk postvak de favoriet hoort. Rustig (grijs, klein) en ingekort. */
.mail__fav-pv {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: .72rem;
}
/* Mapkleur-stip (OR12): een ronde kleurvlek naast de naam van een eigen map met
   een ingestelde kleur. Bewust een stip (geen accentbalk); dunne 1px-rand zodat
   een lichte kleur op het lichte paneel zichtbaar blijft. */
.mail__map-stip {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: 2px;
  border-radius: 50%;
  border: 1px solid rgba(28, 42, 57, .2);
}
/* Ster: favoriet maken/verwijderen (F5.7). Onzichtbaar en niet aanklikbaar tot
   de rij gehoverd of met het toetsenbord gefocust is (dan wijkt de teller even);
   gevuld goud voor een map die favoriet is. Tab bereikt de ster altijd: focus
   maakt hem via :focus-within vanzelf zichtbaar. */
.mail__map-ster {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  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;
}
/* De hover-onthulling van de ster is DESKTOP-gedrag. Op touch bestaat hover niet
   en behandelt iOS een tik op een rij waarvan :hover de inhoud en hit-testing
   verandert (opacity + pointer-events + de padding-verschuiving hieronder) als
   "eerste tik = hover, tweede tik = klik": een map openen kostte daardoor twee
   tikken. Zonder deze media query is de ster gewoon altijd zichtbaar en opent
   een map bij de eerste tik; de favoriet-toggle blijft zo ook op mobiel werken. */
@media (hover: hover) and (pointer: fine) {
  .mail__map-ster { opacity: 0; pointer-events: none; }
  .mail__map-rij:hover .mail__map-ster,
  .mail__map-rij:focus-within .mail__map-ster { opacity: 1; pointer-events: auto; }
}
.mail__map-ster:hover { color: var(--blue-700); background: rgba(0, 71, 128, .12); }
.mail__map-ster:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 0; }
.mail__map-ster svg { width: 14px; height: 14px; }
.mail__map-ster.is-aan { color: var(--gold-500); }
.mail__map-ster.is-aan svg { fill: var(--gold-500); }
/* Op hover/focus verschijnt de ster (absoluut, rechts). Maak daar plek voor door de
   knopinhoud iets naar links te schuiven, zodat de teller ZICHTBAAR blijft in plaats
   van te verdwijnen. Alleen op rijen die echt een ster hebben (eigen postvak +
   favorieten); een gedeeld-postvak-rij zonder ster houdt zijn teller ongemoeid. */
/* Alleen in het UITGEKLAPTE paneel: in de smalle rail staan de iconen gecentreerd en
   is de ster verborgen (maar nog in de DOM, dus :has matcht), waardoor deze padding
   de iconen op hover zou laten verspringen. */
/* Basis (touch): de ster staat er altijd, dus de plek ervoor ook - geen
   verspringende rijen. Op hover-apparaten geldt de verschuiving alleen tijdens
   hover/focus (de media query hieronder), zoals voorheen. */
.mail:not(.mail--mappen-dicht) .mail__map-rij:has(.mail__map-ster) .mail__map { padding-right: 34px; }
@media (hover: hover) and (pointer: fine) {
  .mail:not(.mail--mappen-dicht) .mail__map-rij:has(.mail__map-ster) .mail__map { padding-right: 10px; } /* = de rustwaarde uit .mail__map */
  .mail:not(.mail--mappen-dicht) .mail__map-rij:hover:has(.mail__map-ster) .mail__map,
  .mail:not(.mail--mappen-dicht) .mail__map-rij:focus-within:has(.mail__map-ster) .mail__map { padding-right: 34px; }
}
/* Bij Concepten: het totale aantal tussen haken, grijs (Outlook-gedrag, F1.4). */
.mail__map-totaal { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-data); }
.mail__map-telt {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: .68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Berichtenlijst (met selectievinkje) ---------------------------------- */
/* Datumgroep-kopjes (F2.1, Outlook): klein en vet boven elke periode; geen
   focusdoel, gewoon tekst tussen de rijen. */
.mail__groep {
  padding: 10px 12px 4px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--ink-900);
  background: var(--paper);
  /* Ook de datumgroep-koppen virtualiseren (BB34): ze zijn siblings van de rijen,
     dus content-visibility overslaat ook hun layout buiten beeld. */
  content-visibility: auto;
  contain-intrinsic-size: auto 28px;
}
/* Lijstvirtualisatie (BB34): CSS render-virtualisatie via content-visibility.
   De browser slaat het renderen/layouten van rijen BUITEN beeld over zonder ze
   uit de DOM te halen, dus alle gedrag dat aan de DOM-structuur hangt blijft
   intact: roving tabindex, het selectiemodel, slepen naar mappen, de
   IntersectionObserver-sentinel, scrollpositie-behoud en aria. Bewust gekozen
   boven JS-windowing (rijen echt verwijderen + spacers), dat al die gedragingen
   handmatig had moeten heropbouwen en veel risicovoller was.
   contain-intrinsic-size geeft per rij een geschatte hoogte zodat de scrollbar
   en de scrollpositie kloppen voordat een rij is gerenderd; het `auto`-trefwoord
   laat de browser de ECHT gerenderde hoogte onthouden, zodat een rij die een keer
   in beeld is geweest niet meer verspringt. De 76px is afgestemd op de
   Gemiddeld-dichtheid (1 voorbeeldregel); Volledig en Compact stellen hem bij. */
.mail__item {
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  content-visibility: auto;
  contain-intrinsic-size: auto 76px;
}
.mail__item:hover { background: var(--bg-50); }
.mail__item.is-gekozen { background: rgba(0, 71, 128, .06); }
/* De actieve (geopende) rij wint van de selectietint - bij een gewone klik is een
   rij beide tegelijk (F2.5). De focusring aan de binnenkant markeert de rovende
   tab-stop bij toetsenbordgebruik (F2.6). */
.mail__item.is-actief { background: var(--blue-100); }
.mail__item:focus-visible { outline: 2px solid var(--blue-700); outline-offset: -2px; }

/* Snelacties per rij (F2.7, Outlook): verschijnen bij hoveren (of toetsenbordfocus
   op de rij), rechts in de rij over de plek van het tijdstip, met een vlakje
   eronder zodat ze de datum/preview netjes maskeren. */
.mail__snelacties {
  position: absolute;
  /* Uitgelijnd op de bovenste regel (afzender + tijdstip), niet gecentreerd in de
     hele rij: de snelacties maskeren het tijdstip, en dat staat in de bovenregel.
     19px = padding-top van .mail__open (10px) + halve regelhoogte van de datumregel
     (0.75rem x line-height 1.5 = 18px -> 9px). Bij meerdere voorbeeldregels blijft de
     bovenregel op dezelfde plek, dus deze waarde klopt voor elke dichtheid; alleen de
     compacte 1-regel-stand wordt hieronder weer gecentreerd. */
  top: 19px;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  padding-left: 16px;
  background: linear-gradient(to right, transparent, var(--bg-50) 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
/* Hover-onthulling = desktop-gedrag (iOS-dubbeltik, zie B-122/v0.5.18):
   op touch telt de eerste tik anders als hover en pas de tweede als klik.
   De :focus-within-variant staat bewust BUITEN deze media query: focus komt
   pas na de interactie en blokkeert geen tik, en zo blijft het toetsenbord
   overal werken. */
.mail__item:focus-within .mail__snelacties { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .mail__item:hover .mail__snelacties { opacity: 1; pointer-events: auto; }
}
/* Het tijdstip wijkt zodra er snelacties verschijnen (F2.7, Outlook). Per
   knop-soort gekoppeld aan de config-gating hieronder: staat de hele set uit
   (config + mapcontext), dan blijft het tijdstip gewoon staan. */
.mail:not(.mail--geen-archiveer) .mail__item:focus-within:has(.mail__snel--archiveer) .mail__datum,
.mail:not(.mail--geen-verwijder) .mail__item:focus-within:has(.mail__snel--verwijder) .mail__datum,
.mail:not(.mail--geen-gelezen) .mail__item:focus-within:has(.mail__snel--gelezen) .mail__datum,
.mail:not(.mail--geen-ongelezen) .mail__item:focus-within:has(.mail__snel--ongelezen) .mail__datum,
.mail .mail__item:focus-within:has(.mail__snel--vlag) .mail__datum { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .mail:not(.mail--geen-archiveer) .mail__item:hover:has(.mail__snel--archiveer) .mail__datum,
  .mail:not(.mail--geen-verwijder) .mail__item:hover:has(.mail__snel--verwijder) .mail__datum,
  .mail:not(.mail--geen-gelezen) .mail__item:hover:has(.mail__snel--gelezen) .mail__datum,
  .mail:not(.mail--geen-ongelezen) .mail__item:hover:has(.mail__snel--ongelezen) .mail__datum,
  .mail .mail__item:hover:has(.mail__snel--vlag) .mail__datum { visibility: hidden; }
}
.mail__snel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--blue-700);
  cursor: pointer;
}
.mail__snel:hover { background: var(--blue-100); }
.mail__snel:disabled { opacity: .5; cursor: default; }
.mail__snel svg { width: 15px; height: 15px; }
.mail__snel--verwijder:hover { color: var(--err); }
/* Vlag-snelactie (F5.19): kleur en vulling volgen de huidige stand. */
.mail__snel--vlag.is-gevlagd { color: var(--err); }
.mail__snel--vlag.is-gevlagd svg { fill: currentColor; }
.mail__snel--vlag.is-voltooid { color: var(--ok); }
/* Config-gating (Beheer > Instellingen, kaart Werkbalken): verberg de snelactie als de actie uit staat.
   De gelezen/ongelezen-toggle volgt de actie die hij op DIT moment uitvoert. */
.mail--geen-archiveer .mail__snel--archiveer { display: none; }
.mail--geen-verwijder .mail__snel--verwijder { display: none; }
.mail--geen-gelezen .mail__snel--gelezen { display: none; }
.mail--geen-ongelezen .mail__snel--ongelezen { display: none; }

/* Avatar + selectievakje (F2.4, Outlook): links in de rij staat de avatar met
   initialen (vaste huisstijlkleur per afzender, zelfde palet als de personen-
   kiezer); het vakje ligt eroverheen en verschijnt bij hover op de rij, bij
   toetsenbordfocus, op een geselecteerde rij en in de selectiestand (zodra er
   iets geselecteerd is toont ELKE rij zijn vakje). Klik op de avatar = het
   label = het vakje togglen; de rij opent daarbij niet (guard in mailbox.js). */
.mail__kies { position: relative; display: flex; align-items: center; padding: 0 6px 0 12px; cursor: pointer; }
.mail__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  user-select: none;
}
.mail__avatar--1 { background: var(--blue-700); color: var(--paper); }
.mail__avatar--2 { background: var(--gold-500); color: var(--blue-700); }
.mail__avatar--3 { background: var(--blue-100); color: var(--blue-700); }
.mail__avatar--4 { background: var(--gold-300); color: var(--ink-900); }
.mail__kiesvink {
  position: absolute;
  left: 19px; /* 12px padding + (32px avatar - 18px vakje) / 2: gecentreerd op de avatarplek */
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}
.mail__kies:focus-within .mail__kiesvink,
.mail__item.is-gekozen .mail__kiesvink,
.mail__lijst--selectie .mail__kiesvink { opacity: 1; }
.mail__kies:focus-within .mail__avatar,
.mail__item.is-gekozen .mail__avatar,
.mail__lijst--selectie .mail__avatar { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .mail__item:hover .mail__kiesvink { opacity: 1; }
  .mail__item:hover .mail__avatar { visibility: hidden; }
}
.mail__kiesvink:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 2px; }
.mail__open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 10px 4px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mail__item-rij { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mail__van { font-size: var(--fs-data); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__datum { flex: 0 0 auto; font-size: var(--fs-data); color: var(--muted); }
.mail__ond { font-size: var(--fs-data); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__voorb { font-size: var(--fs-data); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ongelezen (F2.3, Outlook): vette afzender + onderwerp, blauwe tijd, en een
   smalle blauwe indicatorstreep aan de binnenkant van de rij. Bewust een
   afgerond achtergrond-element (pseudo-element), geen border-left (huisstijl:
   geen dikke linker-accentbalk). */
.mail__item--ongelezen .mail__van,
.mail__item--ongelezen .mail__ond { font-weight: 700; }
.mail__item--ongelezen .mail__datum { color: var(--blue-700); font-weight: 600; }
.mail__item--ongelezen::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--blue-700);
  pointer-events: none;
}

/* ---- Lijstdichtheid (F2.12, Outlook) ---------------------------------------
   Drie standen via een modifier-klasse op de lijst (live, zonder her-render):
   Gemiddeld = de basisopmaak hierboven (avatar + 1 regel voorbeeldtekst). Het
   aantal voorbeeldregels (F7.9) staat los van de dichtheid: de view berekent
   het effectieve aantal (auto volgt de dichtheid, Compact = altijd 0) en zet de
   modifier --voorb-0 / --voorb-2; --voorb-1 is de basisopmaak (geen modifier). */
/* Twee regels voorbeeldtekst (regelklem in plaats van ellipsis). */
.mail__lijst--voorb-2 .mail__voorb {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow: hidden;
}
/* Virtualisatie-hoogte (BB34) bijstellen aan het aantal voorbeeldregels: een
   tweede voorbeeldregel maakt de rij hoger, geen voorbeeldregel lager. Zo blijft
   de geschatte scrollhoogte kloppen voordat rijen in beeld komen. */
.mail__lijst--voorb-2 .mail__item { contain-intrinsic-size: auto 94px; }
.mail__lijst--voorb-0 .mail__item { contain-intrinsic-size: auto 58px; }
/* Geen voorbeeldtekst (F7.9, of de Compact-dichtheid). */
.mail__lijst--voorb-0 .mail__voorb { display: none; }
/* Avatars uit (F7.9): de gekleurde initialen weg; het selectievakje blijft op
   die plek staan (vast zichtbaar, zoals bij Compact). Compact verbergt avatars
   sowieso al via de eigen regel hieronder. */
.mail__lijst--geen-avatar .mail__avatar { display: none; }
.mail__lijst--geen-avatar .mail__kiesvink { position: static; transform: none; opacity: 1; }
/* Compact: 1 strakke regel (afzender | onderwerp | tijd) zonder voorbeeldtekst;
   geen avatar maar een VAST zichtbaar selectievakje (Outlook). display: contents
   tilt afzender en tijd uit hun subrij, zodat de hele rij een flexregel wordt. */
/* Compacte rij is veel lager (een strakke regel): virtualisatie-hoogte navenant
   (BB34). Staat na --voorb-0 zodat deze waarde wint bij de compacte stand. */
.mail__lijst--compact .mail__item { contain-intrinsic-size: auto 34px; }
.mail__lijst--compact .mail__open { flex-direction: row; align-items: center; gap: 10px; padding: 5px 12px 5px 4px; }
.mail__lijst--compact .mail__item-rij { display: contents; }
.mail__lijst--compact .mail__van { flex: 0 0 clamp(110px, 28%, 200px); }
.mail__lijst--compact .mail__ond { flex: 1 1 auto; min-width: 0; order: 1; }
.mail__lijst--compact .mail__datum { order: 2; }
.mail__lijst--compact .mail__voorb { display: none; }
.mail__lijst--compact .mail__avatar { display: none; }
.mail__lijst--compact .mail__kies { padding: 0 4px 0 12px; }
.mail__lijst--compact .mail__kiesvink { position: static; transform: none; opacity: 1; }
.mail__lijst--compact .mail__item--ongelezen::before { top: 5px; bottom: 5px; }
/* Compact is een enkele regel: de snelacties dan gewoon in het midden van de rij
   (de bovenregel-uitlijning hierboven geldt voor de meerregelige dichtheden). */
.mail__lijst--compact .mail__snelacties { top: 50%; }

/* ---- Leespaneel ------------------------------------------------------------ */
.mail__lezen-art { display: flex; flex-direction: column; min-height: 0; height: 100%; }
/* Leesvensterkop in Outlook-stijl (F3.1): onderwerp bovenaan, daaronder een rij
   met avatar + afzender + uitklapbare Aan/Cc-regel links en rechts de compacte
   icoonrij met het tijdstip eronder. Op een smal leesvenster wrapt de rij; de
   icoonrij blijft dan rechts uitgelijnd (margin-left: auto). */
/* Lichte tint op de leeskop (onderwerp + afzender): markeert onmiskenbaar de START
   van het leesvenster t.o.v. de witte lijstrijen, en geeft het gevoel van spacing
   tussen de secties zonder de layout te verbouwen. De body eronder blijft wit. */
.mail__lezen-kop { padding: 14px 18px 12px; border-bottom: 1px solid var(--line); background: var(--bg-50); }
.mail__lezen-kop h2 { margin: 0 0 10px; font-size: 1.1rem; color: var(--blue-700); }
.mail__lezen-rij { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.mail__lezen-avatar { flex: 0 0 36px; width: 36px; height: 36px; font-size: .82rem; }
.mail__lezen-wie { flex: 1 1 200px; min-width: 0; }
.mail__lezen-van { margin: 1px 0 0; font-size: var(--fs-data); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__lezen-adres { color: var(--muted); font-size: var(--fs-data); }
/* Externe-afzender-label (F3.5): subtiel pilletje achter de afzendernaam, vlak
   in huisstijl (1px rand, geen accentbalk). */
.mail__lezen-extern {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-50);
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: 1px;
}
/* De uitklapbare Aan/Cc-regel: compacte tekst met chevron; de uitklap (detail)
   toont alle ontvangers en de volledige verzenddatum. */
.mail__lezen-aanknop {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-top: 1px;
  padding: 1px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .8rem;
  color: var(--muted);
  cursor: pointer;
}
.mail__lezen-aanknop:hover { color: var(--blue-700); }
.mail__lezen-aanknop:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 0; }
.mail__lezen-aankort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__lezen-aanknop svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .12s ease; }
.mail__lezen-aanknop.is-uitgeklapt svg { transform: rotate(180deg); }
.mail__lezen-detail {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-50);
}
.mail__lezen-detail[hidden] { display: none; }
.mail__lezen-meta { margin: 2px 0; font-size: var(--fs-data); color: var(--muted); word-break: break-word; }
/* Compacte icoonrij rechtsboven (reageren + taak/beheer) met het tijdstip eronder. */
.mail__lezen-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; margin-left: auto; }
.mail__lezen-iconen { display: flex; align-items: center; gap: 2px; }
.mail__lezen-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--blue-700);
  cursor: pointer;
}
.mail__lezen-ico:hover:not(:disabled) { background: var(--blue-100); }
.mail__lezen-ico:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 0; }
.mail__lezen-ico:disabled { opacity: .45; cursor: default; }
.mail__lezen-ico[hidden] { display: none; }
.mail__lezen-ico svg { width: 16px; height: 16px; }
.mail__lezen-ico--verwijder:hover:not(:disabled) { color: var(--err); }
/* "Allen beantwoorden": twee overlappende reply-pijlen vormen samen het dubbele-
   pijl-icoon (Feather kent geen reply-all; uitsluitend geldige namen gebruiken). */
.mail__lezen-ico--allen svg { width: 14px; height: 14px; }
.mail__lezen-ico--allen svg + svg { margin-left: -9px; }
.mail__lezen-sep { width: 1px; align-self: stretch; min-height: 18px; margin: 0 4px; background: var(--line); }
.mail__lezen-tijd { font-size: var(--fs-data); color: var(--muted); white-space: nowrap; }
.mail__bijlagen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
/* Zonder bijlagen blijft de balk leeg en `hidden`; de display:flex hierboven zou
   het hidden-attribuut anders overschrijven en een leeg bandje met onderrand tonen. */
.mail__bijlagen[hidden] { display: none; }
.mail__bijlagen-kop { font-size: .8rem; font-weight: 600; color: var(--muted); }
/* Een bijlage is een chip (F3.6): de naam opent de viewer, de chevron ernaast
   opent het actiemenu (Openen in viewer, Downloaden). De chip heeft de rand; de
   knoppen zelf zijn vlak, met een dunne 1px-scheidingslijn ertussen (geen
   decoratieve accentbalk). Geen overflow: hidden (zou het uitklapmenu afknippen);
   de hoeken ronden via de knoppen zelf. */
.mail__bijlage-rij {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  background: var(--bg-50);
  border-radius: var(--radius-sm);
}
.mail__bijlage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 280px;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: none;
  font: inherit;
  font-size: .8rem;
  color: var(--blue-700);
  cursor: pointer;
}
.mail__bijlage svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* De naam zelf komt uit de globale .bestandsnaam-component (base.css): breekt
   de naam af, dan blijft de extensie altijd zichtbaar. */
.mail__bijlage:hover:not(:disabled) { background: var(--blue-100); }
.mail__bijlage:disabled { cursor: default; color: var(--ink-900); }
.mail__bijlage-grootte { flex: 0 0 auto; color: var(--muted); font-size: .72rem; }
/* Chevron-knop van het chip-menu (op de plek van de oude opslaan-knop). */
.mail__bijlage-menuknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: none;
  color: var(--blue-700);
  cursor: pointer;
}
.mail__bijlage-menuknop:hover { background: var(--blue-100); }
.mail__bijlage-menuknop:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 0; }
.mail__bijlage-menuknop svg { width: 14px; height: 14px; }
/* Het uitklapmenu per chip: zelfde vlakke menustijl als de andere menu's. */
.mail__bijlage-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 184px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mail__bijlage-menu[hidden] { display: none; }
.mail__bijlage-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 7px 8px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .85rem;
  color: var(--ink-900);
  cursor: pointer;
  white-space: nowrap;
}
.mail__bijlage-menu button:hover,
.mail__bijlage-menu button:focus-visible { background: var(--bg-50); outline: none; }
.mail__bijlage-menu svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--blue-700); }
/* "Alles downloaden" achter de chips (alleen bij 2+ bijlagen), chip-hoogte. */
.mail__bijlagen-alles { height: 28px; padding: 0 10px; font-size: .78rem; }

/* ---- Banner "Externe afbeeldingen zijn geblokkeerd" (F3.4) ------------------ */
/* Vlakke balk tussen kop/bijlagen en de berichtinhoud: tekst links, de
   laad-knop rechts. Alleen zichtbaar als er echt iets is tegengehouden. */
.mail__afb-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-50);
  font-size: .82rem;
  color: var(--ink-900);
}
.mail__afb-banner svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.mail__afb-banner span { flex: 1 1 auto; }
.mail__afb-banner .btn-actie { flex: 0 0 auto; height: 28px; padding: 0 10px; font-size: .78rem; }

/* ---- OWA-deeplink: origineel bericht binnen Connect openen ------------------
   Native actie boven de berichtinhoud bij een reactie-notificatie (iemand
   reageert met een emoji) of een "Ga naar bericht"-link, zodat het originele
   bericht in Connect opent i.p.v. een externe Outlook-tab. Vlakke balk in de
   huisstijl (1px onderrand + lichte tint), geen decoratieve accentbalk. */
.mail__owa {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-50);
}
.mail__owa-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--blue-700);
}
.mail__owa-ico svg { width: 18px; height: 18px; }
.mail__owa-ico--emoji { font-size: 18px; line-height: 1; }
.mail__owa-tekst { flex: 1 1 auto; min-width: 0; font-size: .86rem; color: var(--ink-900); }
.mail__owa-titel { margin: 0; }
.mail__owa-sub {
  margin: 2px 0 0;
  font-size: .82rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail__owa-knop { flex: 0 0 auto; }
.mail__owa-toon { flex: 0 0 auto; }
.mail__owa-toon.is-uitgeklapt svg { transform: rotate(180deg); }
/* De rauwe Outlook-HTML kan bij een reactie-notificatie ingeklapt zijn: guard
   tegen de [hidden]-valkuil (een author-display zou het anders overrulen). */
.mail__body[hidden] { display: none; }

/* ---- Bijlage-viewer (tonen zonder downloaden) ----------------------------- */
.mail-viewer__venster {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  height: min(88vh, 860px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mail-viewer__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
/* De titel bevat de globale .bestandsnaam-component (extensie blijft zichtbaar);
   min-width laat de kop krimpen naast de bladerknoppen. */
.mail-viewer__titel {
  margin: 0;
  font-size: 1rem;
  color: var(--blue-700);
  min-width: 0;
}
.mail-viewer__kop-acties { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* Bladeren tussen de bijlagen van het bericht (F3.6): positie tussen de pijlen. */
.mail-viewer__positie { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.mail-viewer__positie[hidden] { display: none; }
.mail-viewer__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: var(--bg-50);
}
.mail-viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mail-viewer__frame { width: 100%; height: 100%; border: 0; background: var(--paper); }
.mail-viewer__media { padding: 24px; width: 100%; display: flex; justify-content: center; }
.mail-viewer__media audio { width: min(520px, 100%); }
.mail-viewer__video { max-width: 100%; max-height: 100%; }
.mail-viewer__tekst {
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, monospace);
  font-size: .85rem;
  color: var(--ink-900);
  background: var(--paper);
}
/* Word-voorbeeld (.docx) in de viewer: een vel papier met eenvoudige document-
   typografie. Alle inhoud komt volledig ge-escaped uit lib/docx-voorbeeld.js. */
.mail-viewer__doc { align-self: stretch; width: 100%; padding: 20px; }
.docx-vb {
  max-width: 820px;
  margin: 0 auto;
  padding: 44px 52px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-900);
  word-break: break-word;
}
.docx-vb p { margin: 0 0 .6em; }
.docx-vb p:empty { min-height: 1.2em; } /* lege Word-alinea = bewuste witregel */
.docx-vb h1, .docx-vb h2, .docx-vb h3, .docx-vb h4, .docx-vb h5, .docx-vb h6 {
  margin: 1em 0 .4em;
  line-height: 1.25;
  color: var(--blue-700);
}
.docx-vb h1 { font-size: 1.35rem; }
.docx-vb h2 { font-size: 1.18rem; }
.docx-vb h3 { font-size: 1.05rem; }
.docx-vb h4, .docx-vb h5, .docx-vb h6 { font-size: .95rem; }
.docx-vb ul, .docx-vb ol { margin: 0 0 .6em; padding-left: 1.6em; }
.docx-vb li > ul, .docx-vb li > ol { margin-bottom: 0; }
.docx-vb__tabel { border-collapse: collapse; margin: 0 0 .8em; max-width: 100%; }
.docx-vb__tabel td { border: 1px solid var(--line); padding: 4px 8px; vertical-align: top; }
.docx-vb__tabel td.docx-vb__celleeg { border: 0; background: transparent; } /* ingesprongen rij (gridBefore) */
.docx-vb__tabel p { margin: 0; }
.docx-vb__tab { display: inline-block; width: 28px; }
.docx-vb__afb { max-width: 100%; height: auto; }
.docx-vb__afb-weg { color: var(--muted); font-size: .8rem; }
.docx-vb__pagina-einde { border: 0; border-top: 1px dashed var(--line); margin: 1.2em 0; }
.docx-vb__uitlijn-center { text-align: center; }
.docx-vb__uitlijn-right { text-align: right; }
.docx-vb__uitlijn-justify { text-align: justify; }
.docx-vb__leeg { color: var(--muted); }
.mail-viewer__geen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 24px;
  text-align: center;
  color: var(--muted);
}
.mail-viewer__geen svg { width: 36px; height: 36px; color: var(--blue-100); }
.mail-viewer__geen-sub { font-size: var(--fs-data); }
.mail__body { flex: 1 1 auto; width: 100%; border: 0; min-height: 280px; background: var(--paper); }
.mail__body--tekst {
  margin: 0;
  padding: 16px 18px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-sans);
  font-size: var(--fs-data);
  color: var(--ink-900);
}

/* ---- Lege/bezig-staten ----------------------------------------------------- */
.mail__bezig { padding: 16px; color: var(--muted); font-size: var(--fs-data); }
.mail__leeg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 24px 18px;
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
}
.mail__leeg svg { width: 30px; height: 30px; color: var(--blue-100); margin-bottom: 4px; }
/* Lege-map-staat (F7.7): een herkenbare kop en een korte uitleg eronder. */
.mail__leeg-kop { margin: 0; color: var(--ink-900); font-weight: 600; }
.mail__leeg-tekst { margin: 0; max-width: 30ch; }
/* Foutstaat (F3.10): zelfde opbouw als de lege staat, het icoon kleurt rood. */
.mail__leeg--fout svg { color: var(--err); opacity: .55; }
/* Eerste-lading skeleton (F7.7): een rij berichtsilhouetten, hergebruikt het
   sentinel-skelet (.mail__skelet). De wrapper draagt de aria-status. */
.mail__skelet-groep { display: block; }

/* ---- Foutbalk boven de berichtenlijst (F3.10) ------------------------------ */
/* Een mislukte herlading wist de lijst nooit: deze vlakke balk (volledige
   1px-scheidingslijn onder, geen accentbalk) meldt het met een opnieuw-knop. */
.mail__foutbalk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(179, 38, 30, .05);
  font-size: .82rem;
  color: var(--ink-900);
}
.mail__foutbalk[hidden] { display: none; }
.mail__foutbalk > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--err); }
.mail__foutbalk span { flex: 1 1 auto; }
.mail__foutbalk .btn-actie { flex: 0 0 auto; height: 28px; padding: 0 10px; font-size: .78rem; }
.mail__foutbalk .btn-ico { flex: 0 0 auto; width: 28px; height: 28px; border: 0; color: var(--muted); }
/* Selectie-staat in het leesvenster (F2.5, Outlook): bij 2+ geselecteerde berichten
   een teller met bulkacties in plaats van een bericht. */
.mail__selectiestaat-telt { margin: 0; font-size: .95rem; font-weight: 600; color: var(--ink-900); }
.mail__selectiestaat-acties { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }

/* ---- Opstel-modal (nieuwe mail) ------------------------------------------- */
/* Zelfde popup-structuur als de listgrid-modal (voertuigen, besluit B-50): venster
   bovenin (7vh), kop staat vast, alleen de inhoud scrolt en de actieknoppen
   plakken onderaan (scroll-lock) zodat Annuleren/Opslaan nooit uit beeld raken. */
.mail-modal { position: fixed; inset: 0; z-index: 80; }
.mail-modal[hidden] { display: none; }
.mail-modal__scrim { position: absolute; inset: 0; background: rgba(28, 42, 57, .45); }
.mail-modal__venster {
  position: relative;
  /* Breed genoeg om comfortabel een mail op te stellen op desktop (rich-text-editor +
     ontvangervelden); op smallere schermen begrensd tot 94vw. */
  margin: 7vh auto 0;
  width: min(860px, 94vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(28, 42, 57, .28);
}
.mail-modal__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.mail-modal__kop h2 { margin: 0; font-size: 1.05rem; color: var(--blue-700); }
/* Icoonknoppen rechts in de kop (bv. Bewerken-potlood naast Sluiten), zelfde
   patroon als .lg-modal__kopknoppen in het listgrid. */
.mail-modal__kopknoppen { display: flex; align-items: center; gap: 6px; }
/* Opslagstatus van de concepten-autosave (F4.2): "Opslaan...", "Concept
   opgeslagen HH:MM" of een eerlijke foutmelding, rechts naast de titel. */
.mail-modal__status {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 10px;
  text-align: right;
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-modal__status.is-fout { color: var(--err); }
.mail-modal__form { padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }

/* Werkbalk bovenin het opstelvenster: sjabloon, urgentie, opties en handtekening,
   rechts uitgelijnd (de spacer duwt ze naar rechts). Verzenden en Verwijderen staan
   sinds de global popup-layout onderin (.mail-opstel__voet); sluiten kan via het
   kruisje in de kop, Esc of de scrim (autosave-flush, F4.2). */
.mail-opstel__balk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

/* ---- Compose-modal: labels LINKS + maximale editor-hoogte -----------------------
   Gescoped op #mail-modal (de "Nieuwe mail"-modal), zodat de agenda-modal die dezelfde
   klassen deelt (#agenda-modal) ongemoeid blijft. Labels naast de invoer i.p.v. erboven
   scheelt veel verticale ruimte; die ruimte gaat naar de berichteditor, die de
   resterende hoogte vult zodat je een mail kunt schrijven zonder te scrollen. */
#mail-modal .mail-modal__venster { position: relative; display: flex; flex-direction: column; height: min(88vh, 820px); }
#mail-modal .mail-modal__form { flex: 1 1 auto; min-height: 0; }

/* Korte velden (Aan/Cc/Bcc/Onderwerp): label links, invoer rechts. */
#mail-modal .mail-veld { flex-direction: row; align-items: center; gap: 12px; }
#mail-modal .mail-veld > span { flex: 0 0 82px; text-align: left; }
#mail-modal .mail-veld > input,
#mail-modal .mail-veld > textarea,
#mail-modal .mail-veld__rij { flex: 1 1 auto; min-width: 0; }

/* De ontvanger-/onderwerpregels (Aan/Cc/Bcc/Onderwerp/Van) gebruiken bewust
   DEZELFDE opmaak als de genodigden in de afspraak-modal (NFR-9 uniform, verzoek
   Harm): label links + een omkaderde chips-/invoerbox met de collega-kiezer-knop
   ernaast. Dat komt vanzelf uit de globale .mail-veld + .ochips; hier hoeft dus
   geen aparte "regel"-stijl meer te staan. */

/* Van-veld (MO38): de verzendadres-keuzelijst staat alleen in beeld als er een
   gedeeld postvak is; zelfde omkaderde selectstijl als de andere velden. */
.mail-opstel__van[hidden] { display: none; }
#mail-modal .mail-opstel__van-keuze {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 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);
  cursor: pointer;
}
#mail-modal .mail-opstel__van-keuze:focus { outline: 2px solid var(--blue-100); outline-offset: 0; border-color: var(--blue-700); }

/* Cc/Bcc-links rechts in de Aan-regel (F4.8, Outlook): tonen het bijbehorende
   veld en verdwijnen dan zelf. */
.mail-veld__ccbcc { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; }
.mail__ccbcc-link {
  border: 0;
  background: none;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--blue-700);
  cursor: pointer;
}
.mail__ccbcc-link:hover { background: var(--bg-50); text-decoration: underline; }
.mail__ccbcc-link:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 0; }
.mail__ccbcc-link[hidden] { display: none; }

/* Bericht + Bijlagen blijven volle breedte (kolom). Het Bericht-veld vult de resterende
   hoogte zodat de editor groot is. */
#mail-modal .mail-veld:has(#opstel-editor),
#mail-modal #opstel-bijlagen-veld { flex-direction: column; align-items: stretch; gap: 4px; }
#mail-modal .mail-veld:has(#opstel-editor) > span,
#mail-modal #opstel-bijlagen-veld > span { flex: none; text-align: left; }
#mail-modal .mail-veld:has(#opstel-editor) { flex: 1 1 auto; min-height: 0; }
#mail-modal #opstel-editor { flex: 1 1 auto; min-height: 0; display: flex; }
#mail-modal #opstel-editor .rte { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#mail-modal #opstel-editor .rte__veld { flex: 1 1 auto; min-height: 200px; max-height: none; }
.mail-veld { display: flex; flex-direction: column; gap: 4px; }
/* Net als bij de knoppen hierboven: zonder dit verliest [hidden] van display:flex,
   waardoor Cc/Bcc altijd zichtbaar blijven en de "Cc / Bcc toevoegen"-toggle niets lijkt te doen. */
.mail-veld[hidden] { display: none; }
.mail-veld > span { font-size: var(--fs-data); font-weight: 600; color: var(--ink-900); }
.mail-veld input,
.mail-veld textarea {
  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);
  resize: vertical;
}
.mail-veld input:focus,
.mail-veld textarea:focus { outline: 2px solid var(--blue-100); outline-offset: 0; border-color: var(--blue-700); }
/* Ontvangersveld (Aan/Cc/Bcc) met de collega-kiezer-knop ernaast. */
.mail-veld__rij { display: flex; gap: 6px; align-items: stretch; }
.mail-veld__rij input { flex: 1 1 auto; min-width: 0; }
.mail-veld__personen {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--blue-700);
  cursor: pointer;
}
.mail-veld__personen:hover { background: var(--bg-50); border-color: var(--blue-700); }
.mail-veld__personen:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 0; }
.mail-veld__personen svg { width: 18px; height: 18px; }
.mail-modal__fout { margin: 0; color: var(--err); font-size: var(--fs-data); }
/* Herkansingsknop in de foutregel van het opstelvenster (F4.21). */
.mail-modal__fout .btn-actie { margin-left: 8px; vertical-align: middle; }
/* Scroll-lock: actieknoppen die onderaan een scrollend formulier plakken. Zowel de
   opstel-modal (Verzenden/Verwijderen in .mail-opstel__voet) als de agenda-modals
   delen deze global popup-voet. */
.mail-modal__acties {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 4px -16px 0;
  padding: 10px 16px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.mail-modal__acties .btn { padding: 5px 12px; font-size: .8rem; }
/* Onderpadding 0 zodra er een vastgeplakte actiebalk is: anders schemert het
   formulier door in de strook onder de knoppen (zelfde bug als de
   listgrid-formulier-modal, 12/06/2026). */
.mail-modal__form:has(.mail-modal__acties) { padding-bottom: 0; }
.btn--licht { background: var(--paper); border: 1px solid var(--line); color: var(--ink-900); }
.btn--licht:hover { background: var(--bg-50); }

/* Rij met de bestand-knop en de groottelimiet in het opstelvenster. */
.opstel-bijlagen__rij { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.opstel-bijlagen__limiet { font-size: var(--fs-data); color: var(--muted); }

/* ---- Vensterknoppen in de modal-kop (F4.19) -------------------------------- */
/* Alleen de opstel-modal: de agenda-modals delen .mail-modal__kop. */
#mail-modal .mail-modal__kop { gap: 6px; }
#opstel-max .opstel-max__terug { display: none; }
#mail-modal.mail-modal--max #opstel-max .opstel-max__groot { display: none; }
#mail-modal.mail-modal--max #opstel-max .opstel-max__terug { display: block; }

/* Maximaal (de pop-out-variant binnen de pagina, MO37): bijna-schermvullend. */
#mail-modal.mail-modal--max .mail-modal__venster {
  width: calc(100vw - 28px);
  height: calc(100vh - 28px);
  max-height: none;
  margin: 14px auto 0;
}

/* Geminimaliseerd (F4.19): het venster wordt een compact balkje rechtsonder
   (zoals Outlook); de scrim verdwijnt zodat lijst en leesvenster gewoon
   bedienbaar blijven. Boven het toast-vlak (z-index 80 van .mail-modal zelf). */
.mail-opstel__dock { display: none; }
#mail-modal.mail-modal--min { inset: auto 18px 14px auto; }
#mail-modal.mail-modal--min .mail-modal__scrim { display: none; }
#mail-modal.mail-modal--min .mail-modal__venster {
  width: 300px;
  height: auto;
  max-height: none;
  margin: 0;
  box-shadow: 0 10px 28px rgba(28, 42, 57, .25);
}
#mail-modal.mail-modal--min .mail-modal__kop,
#mail-modal.mail-modal--min .mail-opstel__balk,
#mail-modal.mail-modal--min .mail-modal__form { display: none; }
#mail-modal.mail-modal--min .mail-opstel__dock {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
}
.mail-opstel__dock-open {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--blue-700);
  text-align: left;
  cursor: pointer;
}
.mail-opstel__dock-open:hover { background: var(--bg-50); }
.mail-opstel__dock-open:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 0; }
.mail-opstel__dock-open svg { width: 16px; height: 16px; flex: none; }
.mail-opstel__dock-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-opstel__dock-sluit { border: 0; }

/* ---- Urgentie-toggles en handtekening-wisselknop in de actiebalk ------------ */
/* Hoog = rood uitroepteken, laag = blauwe pijl omlaag (F4.20, zelfde beeldtaal
   als de lijstindicatoren van F2.13); rechts in de balk, met de penknop (F4.18). */
.mail-opstel__balk-spacer { flex: 1 1 auto; }
.mail-opstel__urgentie--hoog { color: var(--err); }
.mail-opstel__urgentie.is-actief { background: var(--blue-100); border-color: var(--blue-700); }
.mail-opstel__urgentie--hoog.is-actief { background: #f9e4e2; border-color: var(--err); }
.mail-opstel__handtekening { position: relative; }
.mail-opstel__handtekening-menu { min-width: 200px; }
.mail-opstel__handtekening-leeg {
  padding: 6px 8px;
  font-size: .8rem;
  color: var(--muted);
  font-style: italic;
}

/* Splitsknop Verzenden + "Later verzenden" (MO19): de chevron sluit aan op de
   Verzenden-knop met een dunne 1px-scheiding (geen accentbalk). */
.mail-opstel__verstuur { position: relative; }
.mail-opstel__verstuur #opstel-verstuur {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.mail-opstel__verstuur .mail-nieuw__chevron { padding: 0 6px; }
.mail-opstel__later-menu { left: 0; right: auto; min-width: 240px; }
.mail-opstel__later-menu button { display: flex; align-items: center; gap: 8px; }
.mail-opstel__later-menu svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
/* Verzenden/Verwijderen onderin het opstelvenster (global popup-layout): de
   "Later verzenden"-keuzelijst klapt vanaf de voet naar BOVEN open en lijnt rechts
   uit, zodat hij binnen het venster blijft. */
.mail-opstel__voet { gap: 8px; }
.mail-opstel__voet .mail-opstel__later-menu { top: auto; bottom: calc(100% + 4px); left: auto; right: 0; }

/* Berichtopties-menu (MO21): leesbevestiging/bezorgbevestiging als vinkjes. */
.mail-opstel__opties { position: relative; }
.mail-opstel__opties-menu { min-width: 248px; }
.mail-opstel__opties-menu button { display: flex; align-items: center; gap: 8px; }
.mail-opstel__optie-vink { width: 15px; height: 15px; flex: 0 0 auto; visibility: hidden; color: var(--blue-700); }
.mail-opstel__opties-menu button[aria-checked="true"] .mail-opstel__optie-vink { visibility: visible; }

/* Planning-banner (MO19): vlak bandje met de geplande verzendtijd en een knop
   om de planning te annuleren. Vlak (volledige 1px-rand), geen accentbalk. */
.mail-opstel__planbanner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--blue-100);
  color: var(--ink-900);
  font-size: .85rem;
}
.mail-opstel__planbanner[hidden] { display: none; }
.mail-opstel__planbanner svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--blue-700); }
.mail-opstel__planbanner > span { flex: 1 1 auto; }

/* Smalle chevron-knop in de leeskop-icoonrij (XC12, doorstuuropties). */
.mail__lezen-ico--smal { padding-left: 2px; padding-right: 2px; }
.mail__lezen-ico--smal svg { width: 13px; height: 13px; }

/* Urgentie-indicator in de leesvensterkop (F4.20). */
.mail__lezen-urgentie {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  vertical-align: -2px;
}
.mail__lezen-urgentie svg { width: 16px; height: 16px; }
.mail__lezen-urgentie--hoog { color: var(--err); }
.mail__lezen-urgentie--laag { color: var(--blue-700); }
/* Vlagstatus voor het onderwerp (F5.19): gevuld vlaggetje bij gevlagd, groen
   vinkje bij voltooid - zelfde beeldtaal als de rij-indicatoren (F2.13). */
.mail__lezen-vlag { display: inline-flex; margin-right: 6px; vertical-align: -2px; color: var(--err); }
.mail__lezen-vlag svg { width: 16px; height: 16px; fill: currentColor; }
.mail__lezen-vlag--voltooid { color: var(--ok); }
.mail__lezen-vlag--voltooid svg { fill: none; }

/* ---- Bijlage-tegels (F4.17, opstelvenster en inline antwoordvak) ------------ */
/* Tegel in Outlook-stijl: bestandsicoon naar type, naam, grootte of voortgang
   (F4.16) en een chevron-menu. Vlak: volledige 1px-rand met lichte schaduw,
   geen accentbalk. */
.bijlage-tegels { display: flex; flex-wrap: wrap; gap: 8px; }
.bijlage-tegels:empty { display: none; }
.bijlage-tegel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 230px;
  max-width: 100%;
  padding: 6px 4px 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(28, 42, 57, .06);
  font-size: .8rem;
  color: var(--ink-900);
}
.bijlage-tegel--fout { border-color: var(--err); }
.bijlage-tegel__ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--bg-50);
  color: var(--blue-700);
}
.bijlage-tegel--fout .bijlage-tegel__ico { color: var(--err); }
.bijlage-tegel__ico svg { width: 16px; height: 16px; }
.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). */
.bijlage-tegel__naam { font-weight: 600; }
.bijlage-tegel__info { font-size: .72rem; color: var(--muted); }
.bijlage-tegel--fout .bijlage-tegel__info { color: var(--err); }
/* Dunne voortgangsbalk tijdens het uploaden (F4.16). */
.bijlage-tegel__balk { height: 4px; border-radius: 2px; background: var(--blue-100); overflow: hidden; }
.bijlage-tegel__balkdeel { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--blue-700); transition: width .2s ease; }
.bijlage-tegel__knop {
  flex: 0 0 auto;
  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;
}
.bijlage-tegel__knop:hover { background: var(--bg-50); color: var(--blue-700); }
.bijlage-tegel__knop:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 0; }
.bijlage-tegel__knop svg { width: 15px; height: 15px; }
.bijlage-tegel__menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 30;
  min-width: 180px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: 0 6px 18px rgba(28, 42, 57, .14);
}
.bijlage-tegel__menu[hidden] { display: none; }
.bijlage-tegel__menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: .8rem;
  color: var(--ink-900);
  cursor: pointer;
  text-align: left;
}
.bijlage-tegel__menu button:hover,
.bijlage-tegel__menu button:focus-visible { background: var(--bg-50); outline: none; }
.bijlage-tegel__menu button svg { width: 14px; height: 14px; color: var(--muted); }

/* ---- Drop-overlay voor bestanden (F4.15) ------------------------------------ */
/* Verschijnt zodra er bestanden boven het opstelvenster of het inline
   antwoordvak hangen; pointer-events none zodat de drop gewoon doorkomt.
   Dunne gestippelde rand rondom (volledige rand, geen accentbalk). De
   dragers (#mail-modal .mail-modal__venster en .mail__antwoord) hebben
   position: relative in hun eigen regels. */
.mail-drop {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: inherit;
  background: rgba(247, 249, 252, .9);
  pointer-events: none;
}
.mail-drop[hidden] { display: none; }
.mail-drop__vak {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 26px;
  border: 2px dashed var(--blue-700);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--blue-700);
  font-size: .9rem;
  font-weight: 600;
}
.mail-drop__vak svg { width: 18px; height: 18px; }

/* ---- Outlook-indicator "beantwoord/doorgestuurd" in de leeskop (MO) --------- */
/* Subtiele tekstregel onder de leeskop ("Je hebt dit bericht beantwoord op ..."),
   met het reply-/forward-pijltje. Geen kaart/accentbalk; lege slot = geen ruis. */
.mail__lezen-actie {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  font-size: var(--fs-data);
  color: var(--blue-700);
}
.mail__lezen-actie svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ---- RSVP-balk bij een agenda-uitnodiging (F3.12) --------------------------- */
/* Vlakke balk onder in de leeskop (volledige 1px-rand, geen accentbalk):
   Accepteren / Onder voorbehoud / Weigeren; na het reageren de gekozen status. */
.mail__rsvp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-50);
  font-size: .82rem;
  color: var(--ink-900);
}
.mail__rsvp > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--blue-700); }
.mail__rsvp-vraag { flex: 1 1 auto; }
.mail__rsvp-acties { display: flex; flex-wrap: wrap; gap: 8px; }
.mail__rsvp-acties .btn-actie { height: 28px; padding: 0 10px; font-size: .78rem; }
.mail__rsvp-acties .btn-actie[aria-busy="true"] { opacity: .6; }
.mail__rsvp-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.mail__rsvp-status svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mail__rsvp-status--accepteren { color: var(--ok); }
.mail__rsvp-status--voorbehoud { color: var(--blue-700); }
.mail__rsvp-status--weigeren { color: var(--muted); }

/* ---- Inline antwoordvak onder het bericht (F3.11, Outlook-model) ------------ */
/* Vast blok onder de berichtinhoud (dunne scheidingslijn erboven): titelregel
   met "In venster openen", de ontvangersregel(s), de richteksteditor en de
   verzend-/verwijderknoppen. Het leesvenster scrolt als het samen niet past. */
.mail__antwoord {
  position: relative; /* draagvlak voor de drop-overlay (F4.15) */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-50);
}
.mail__antwoord-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mail__antwoord-kop-acties { display: inline-flex; align-items: center; gap: 4px; }
/* De tegels in het vak (F4.17) op het lichte vlak: tegel zelf blijft paper. */
.mail__antwoord-bijlagen { margin-top: 2px; }
.mail__antwoord-titel { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 700; color: var(--blue-700); }
.mail__antwoord-titel svg { width: 15px; height: 15px; }
.mail__antwoord-veld { display: flex; align-items: center; gap: 10px; font-size: .8rem; }
.mail__antwoord-veld[hidden] { display: none; }
.mail__antwoord-veld > span { flex: 0 0 30px; font-weight: 600; color: var(--ink-900); }
.mail__antwoord-veld .mail-veld__rij { flex: 1 1 auto; min-width: 0; }
.mail__antwoord-veld input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .85rem;
  color: var(--ink-900);
  background: var(--paper);
}
.mail__antwoord-veld input:focus { outline: 2px solid var(--blue-100); outline-offset: 0; border-color: var(--blue-700); }
/* De editor compacter dan in de opstel-modal; bij veel tekst scrolt het veld. */
.mail__antwoord .rte__veld { min-height: 110px; max-height: 38vh; }
/* Scroll-lock: Verzenden/Verwijderen plakken onderaan zodat ze altijd in beeld
   blijven terwijl het leesvenster door het antwoord (en het bericht erboven)
   scrolt - zelfde aanpak als de opstel-modal (.mail-modal__acties). De eigen
   achtergrond + 1px-lijn dekken de doorschemerende inhoud af; de negatieve
   marges trekken de balk tot de vakranden, en de parent-bottompadding gaat weg
   zodat de balk flush onderaan zit (zelfde truc als .mail-modal__form). */
.mail__antwoord:has(.mail__antwoord-acties) { padding-bottom: 0; }
.mail__antwoord-acties {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -18px;
  padding: 12px 18px;
  background: var(--bg-50);
  border-top: 1px solid var(--line);
}

/* ---- Leesvensterstand "Verbergen" + paginavullende berichtweergave (F3.7) -- */
/* Stand verbergen: de lijst vult de volle breedte; het leesvenster en de twee
   lijst-splitters doen niet mee. Een bericht openen zet .mail--bericht op het
   mail-vlak: de lijst wijkt en het leesvenster vult het hele vlak (kolom), met
   de terugbalk erboven (terug-pijl + vorige/volgende). Het mappenpaneel blijft
   gewoon staan (Outlook). */
.mail--verbergen .mail__lijst-wrap { flex: 1 1 auto; }
.mail--verbergen .mail__splitter--lijstb,
.mail--verbergen .mail__splitter--lijsth { display: none; }
.mail--verbergen:not(.mail--bericht) .mail__lezen { display: none; }
.mail--bericht .mail__rechts { flex-direction: column; }
.mail--bericht .mail__lijst-wrap,
.mail--bericht .mail__splitter--lijstb,
.mail--bericht .mail__splitter--lijsth { display: none; }

/* De terugbalk boven de paginavullende berichtweergave: vlak, met een dunne
   scheidingslijn eronder (geen accentbalk); de knoppen zijn randloze iconen. */
.mail__bericht-balk {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.mail__bericht-balk[hidden] { display: none; }
.mail__bericht-balk .btn-ico { border: 0; }
.mail__bericht-balk .btn-ico:disabled { opacity: .4; cursor: default; }
.mail__bericht-balk-vak { display: flex; gap: 2px; margin-left: 6px; }

/* Mappenknop in de werkbalk (opent de drawer) en de scrim erachter: bestaan
   alleen op een smal scherm (zie de 700px-trap hieronder). */
.mail-bar__mappenknop { display: none; }
.mail__mappen-scrim { display: none; }

/* ---- Responsief: paneel-voor-paneel inklappen, getrapt zoals Outlook (F3.8) - */
/* Trap 1 (tot 1200px): de werkbalkknoppen verliezen hun tekstlabel (alleen
   iconen); het label blijft beschikbaar via de title en in het overloop-menu. */
@media (max-width: 1200px) {
  .mail-bar .mail-bar__tekst { display: none; }
}

/* Trap 2 (tot 940px): het leesvenster verdwijnt (gedrag = stand Verbergen): de
   lijst vult de breedte en een bericht opent paginavullend (.mail--bericht).
   De splitters doen niet mee; de vaste verdeling en versleepte maten vervallen. */
@media (max-width: 940px) {
  .mail:not(.mail--bericht) .mail__lezen { display: none; }
  .mail__splitter--lijstb, .mail__splitter--lijsth { display: none; }
  .mail--rechts .mail__lijst-wrap,
  .mail--onder .mail__lijst-wrap { flex: 1 1 auto; border-right: 0; border-bottom: 0; }
}

/* Trap 3 (tot 700px): het mappenpaneel wordt een drawer OVER de inhoud, met een
   scrim erachter; openen via de mappenknop in de werkbalk, sluiten via de
   inklapknop, de scrim of Esc. Dicht = helemaal weg (geen icoonrail). */
@media (max-width: 700px) {
  .mail { position: relative; }
  .mail__mappen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(300px, 85vw);
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .mail--mappen-dicht .mail__mappen { display: none; }
  .mail__splitter--mappen { display: none; }
  .mail:not(.mail--mappen-dicht) .mail__mappen-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 35;
    background: rgba(28, 42, 57, .35);
  }
  .mail-bar__mappenknop { display: inline-flex; }
}

/* Indicator automatische antwoorden (OR45): subtiel balkje boven de lijst zolang
   ze aan staan. Zelfde plat-balk-opzet als de foutbalk (alleen een onderlijn,
   geen accentbalk links). */
.mail__autoantw {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(232, 180, 0, .12);
  font-size: .82rem;
  color: var(--ink-900);
}
.mail__autoantw[hidden] { display: none; }
.mail__autoantw > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--blue-700); }
.mail__autoantw-tekst { flex: 1 1 auto; }
.mail__autoantw .btn-actie { flex: 0 0 auto; height: 28px; padding: 0 10px; font-size: .78rem; }

/* Banner in Ongewenste e-mail (OR30): geruststellende melding boven de lijst. */
.mail__junkbanner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-50);
  font-size: .82rem;
  color: var(--muted);
}
.mail__junkbanner[hidden] { display: none; }
.mail__junkbanner > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ok, #2e7d52); }
.mail__junkbanner span { flex: 1 1 auto; }