/* ============================================================
   fg2-postbus.css  —  V2, scherm 1: DE POSTBUS
   Gebouwd 16/10/2026, na de goedgekeurde tekening van dezelfde dag.

   De acht wetten van V2 (14/10) gelden hier letterlijk:
   2. één naamruimte  : alles begint met .fg2pb-
   3. nul hardgecodeerde kleuren in de ONDERDELEN: elk onderdeel leest een token.
      De tokenlaag hieronder is de enige plek waar een waarde staat, en die
      waarden komen waar het kan uit fg-theme.css (--brand, --ink, --line…).
      De twee uitzonderingen staan er met uitleg bij: het werkvlak moet WIT
      blijven met ZWARTE tekst, ook als de rest van de CRM donker staat.
      Dat is Patricks beslissing van 14/10 (donker omhulsel, licht werkvlak)
      en van 16/10 (op wit echt zwart, geen grijs).
   4. nul keer !important — nergens in dit bestand.
   6. erft niets van fg-ui.css: geen enkele .fg-* of .fgm* klasse wordt hier
      gebruikt, aangevuld of overschreven.
   ============================================================ */

/* ---------- 1. De tokenlaag. De ENIGE plek met waarden. ----------
   17/10/2026 — ook .fg2pb-popup krijgt deze tokens. Het zwevende opstelvenster
   hangt sinds deze build aan de PAGINA en niet meer in de tegel, zodat geen
   enkele hertekening van de schil het nog kan wegvagen. Daardoor staat het
   buiten .fg2pb en moet het zijn kleuren zelf meekrijgen. */
.fg2pb, .fg2pb-popup{
  /* Omhulsel: donker. Vast, niet thema-afhankelijk — het omhulsel is altijd donker. */
  --pb-omhul:        #15181f;
  --pb-omhul-2:      #1b1f28;
  --pb-omhul-inkt:   #f3f5f8;
  --pb-omhul-zacht:  #a7b0bf;
  --pb-omhul-lijn:   rgba(255,255,255,.10);
  --pb-omhul-hover:  rgba(255,255,255,.07);
  --pb-omhul-aan:    rgba(255,255,255,.12);

  /* Werkvlak: licht, met echt zwarte tekst. */
  --pb-vlak:         #ffffff;
  --pb-grond:        #f6f7f9;
  --pb-inkt:         #000000;
  --pb-inkt-zacht:   #42474f;   /* contrast 9,4 op wit — leesbaar, niet lichtgrijs */
  --pb-inkt-flets:   #5a616b;   /* contrast 6,4 op wit */
  --pb-lijn:         #e3e6ea;
  --pb-lijn-hard:    #c9ced6;
  /* 16/10/2026 — Patrick: "er is overal nog veel orange aanwezig". Klopte.
     Het accent staat vanaf nu op DRIE plaatsen en nergens anders:
       1. de streep links bij een ongelezen gesprek
       2. de knop Nieuw bericht
       3. de open map in de rail
     Al de rest wordt neutraal, zoals in Outlook. Daarvoor deze twee grijzen. */
  --pb-gekozen:      #e7eaee;
  --pb-zweef:        #f1f3f5;

  /* 16/10/2026 — bouwsteen vuilbak. Rood is hier BETEKENIS (weg), geen
     huisstijl: het staat enkel op de vuilbak bij zweven en op die ene regel
     in het rechtsklikmenu. Waarde uit fg-theme.css waar die bestaat. */
  --pb-gevaar:       var(--danger, #b3261e);
  --pb-gevaar-zacht: color-mix(in srgb, var(--danger, #b3261e) 10%, #fff);
  /* Tekst op een gekleurde knop. Eén token, zodat er nergens anders in dit
     blad nog een kleurwaarde hoeft te staan. */
  --pb-op-accent:    #ffffff;
  /* 17/10/2026 — Patrick: "voor de kleuren, kan je niet enkele standaard
     kleuren geven aub, rood, blauw, groen bv". Drie vaste kleuren voor de
     tekst in een mail. Ze staan HIER en niet in de JS, want dat blad kent
     geen kleuren (wet 3 van V2). */
  --pb-rood:         #c62828;
  --pb-blauw:        #1565c0;
  --pb-groen:        #2e7d32;
  --pb-schaduw:      0 1px 2px rgba(0,0,0,.06);
  --pb-schaduw-menu: 0 10px 28px rgba(0,0,0,.18);

  /* Accent: de huisstijl van de afdeling, uit public.tegels via fg-kleuren.css. */
  --pb-accent:       var(--brand);
  --pb-accent-zacht: color-mix(in srgb, var(--brand) 13%, #fff);
  --pb-accent-inkt:  color-mix(in srgb, var(--brand) 78%, #000);

  /* Maten en vormen komen uit fg-theme.css. */
  --pb-r:            var(--r-sm, 10px);
  --pb-r-groot:      var(--r-md, 14px);
  --pb-font:         var(--font, 'Inter', system-ui, sans-serif);
  --pb-mono:         ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --pb-rail:         206px;
  --pb-lijst:        390px;
  --pb-duur:         var(--dur-fast, 120ms);
  --pb-ease:         var(--ease, cubic-bezier(.22,.61,.36,1));
}

/* ---------- 2. Het raamwerk ---------- */
.fg2pb{
  /* 17/10/2026 — het zwevende opstelvenster hangt BINNEN dit element, niet in
     de gastheer eromheen. Dat moest wel: alle kleuren van V2 staan als tokens
     op .fg2pb, en een venster dat ernaast hing erfde er geen enkele van.
     Patrick, met een foto erbij: "is echt niet leesbaar?" — alles stond toen
     grijs op grijs. */
  position: relative;
  font-family: var(--pb-font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--pb-inkt);
  background: var(--pb-vlak);
  border: 1px solid var(--pb-omhul-lijn);
  border-radius: var(--pb-r-groot);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  box-shadow: var(--shadow-md, 0 2px 4px rgba(0,0,0,.4));
}
.fg2pb *, .fg2pb *::before, .fg2pb *::after{ box-sizing: border-box; }
.fg2pb button{ font: inherit; cursor: pointer; }
.fg2pb :focus-visible{ outline: 2px solid var(--pb-accent); outline-offset: 2px; }

/* ---------- 3. De bovenbalk (omhulsel) ---------- */
.fg2pb-balk{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--pb-omhul);
  color: var(--pb-omhul-inkt);
  border-bottom: 1px solid var(--pb-omhul-lijn);
}
.fg2pb-merk{ font-weight: 750; letter-spacing: -.01em; white-space: nowrap; }
.fg2pb-merk span{ color: var(--pb-accent); }
.fg2pb-zoek{
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  background: var(--pb-omhul-hover);
  border: 1px solid var(--pb-omhul-lijn);
  border-radius: var(--pb-r);
  padding: 6px 10px;
  color: var(--pb-omhul-inkt);
  font-size: 13px;
}
.fg2pb-zoek input{
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; color: inherit; font: inherit;
}
.fg2pb-zoek input::placeholder{ color: var(--pb-omhul-zacht); }
.fg2pb-knop{
  border: 1px solid var(--pb-omhul-lijn);
  background: var(--pb-omhul-aan);
  color: var(--pb-omhul-inkt);
  border-radius: var(--pb-r);
  padding: 6px 11px;
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
  transition: background var(--pb-duur) var(--pb-ease);
}
.fg2pb-knop:hover{ background: var(--pb-omhul-hover); }
.fg2pb-knop[data-hoofd]{
  background: var(--pb-accent);
  border-color: var(--pb-accent);
  color: var(--on-brand);
}

/* ---------- 4. Drie kolommen ---------- */
/* 16/10/2026 — Patrick: "de linkerkant kunnen verbreden, net als de postvakken".
   Tussen de kolommen staan nu twee grepen, zoals in Outlook. De breedtes zijn
   gewone tokens (--pb-rail en --pb-lijst), dus het verslepen hoeft alleen die
   twee waarden te zetten; de rest van het blad weet er niets van. */
.fg2pb-drie{
  display: grid;
  grid-template-columns: var(--pb-rail) 6px minmax(0, var(--pb-lijst)) 6px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}
.fg2pb-greep{
  border: 0; padding: 0; margin: 0;
  background: var(--pb-lijn);
  cursor: col-resize;
  touch-action: none;
}
.fg2pb-greep[data-donker]{ background: var(--pb-omhul-lijn); }
.fg2pb-greep:hover,
.fg2pb-greep[data-bezig]{ background: var(--pb-lijn-hard); }
.fg2pb-greep:focus-visible{ outline: 2px solid var(--pb-accent); outline-offset: -2px; }

/* ---------- 5. De rail (omhulsel) ---------- */
.fg2pb-rail{
  background: var(--pb-omhul-2);
  color: var(--pb-omhul-inkt);
  border-right: 1px solid var(--pb-omhul-lijn);
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;
}
.fg2pb-railkop{
  font-size: var(--fs-label, 11.5px);
  letter-spacing: var(--ls-label, .08em);
  text-transform: uppercase;
  font-weight: var(--fw-label, 600);
  color: var(--pb-omhul-zacht);
  padding: 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fg2pb-railgroep{ display: flex; flex-direction: column; gap: 1px; }
.fg2pb-map{
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 7px;
  color: var(--pb-omhul-inkt); font-weight: 550;
  background: none; border: 0; text-align: left; width: 100%;
  transition: background var(--pb-duur) var(--pb-ease);
}
.fg2pb-map:hover{ background: var(--pb-omhul-hover); }
.fg2pb-map-tel{
  margin-left: auto;
  font-family: var(--pb-mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--pb-omhul-zacht);
}
.fg2pb-map[aria-current="true"]{
  background: var(--pb-omhul-aan);
  font-weight: 750;
  box-shadow: inset 2px 0 0 var(--pb-accent);
}
.fg2pb-map[aria-current="true"] .fg2pb-map-tel{ color: var(--pb-accent); font-weight: 600; }
.fg2pb-postbus{
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 7px;
  font-size: 12.5px; color: var(--pb-omhul-zacht);
  background: none; border: 0; text-align: left; width: 100%;
  white-space: nowrap; overflow: hidden;
}
.fg2pb-postbus:hover{ background: var(--pb-omhul-hover); color: var(--pb-omhul-inkt); }
.fg2pb-postbus[aria-current="true"]{ background: var(--pb-omhul-aan); color: var(--pb-omhul-inkt); font-weight: 650; }
.fg2pb-postbus span:last-child{ overflow: hidden; text-overflow: ellipsis; }
/* De bolletjes voor elke postbus waren allemaal oranje — samen was dat de helft
   van al het oranje in beeld. Een postbus met ongelezen mail herken je nu aan het
   getal rechts, niet aan een kleurvlekje. */
.fg2pb-bol{ width: 6px; height: 6px; border-radius: 50%; background: var(--pb-omhul-zacht); flex: none; }
.fg2pb-bol[data-stil]{ background: var(--pb-omhul-lijn); }

/* ---------- 6. De lijst (werkvlak) ---------- */
.fg2pb-lijst{
  background: var(--pb-vlak);
  border-right: 1px solid var(--pb-lijn);
  display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto;
}
/* De balk boven de lijstkop: sorteren en filteren. Hij blijft bovenaan staan
   als je scrollt, net als de kop eronder — anders moet je terug naar boven om
   van sortering te wisselen. */
.fg2pb-lijstbalk{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 14px;
  border-bottom: 1px solid var(--pb-lijn);
  background: var(--pb-grond);
  position: sticky; top: 0; z-index: 2;
}
.fg2pb-kies{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--pb-inkt-flets);
}
.fg2pb-kies select{
  border: 1px solid var(--pb-lijn-hard); border-radius: var(--pb-r);
  background: var(--pb-vlak); color: var(--pb-inkt);
  font: inherit; font-size: 12px; padding: 2px 4px;
}
.fg2pb-meer{
  display: flex; justify-content: center; align-items: center;
  padding: 12px 14px 18px;
  font-size: 12px; color: var(--pb-inkt-flets); text-align: center;
}
.fg2pb-lijstkop{
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--pb-lijn);
  font-size: 12px; color: var(--pb-inkt-zacht);
  position: sticky; top: 0; background: var(--pb-vlak); z-index: 1;
}
.fg2pb-lijstkop b{ color: var(--pb-inkt); }
.fg2pb-datumkop{
  padding: 9px 14px 5px;
  font-size: var(--fs-label, 11.5px);
  letter-spacing: var(--ls-label, .08em);
  text-transform: uppercase; font-weight: 700;
  color: var(--pb-inkt-flets);
  background: var(--pb-grond);
  border-bottom: 1px solid var(--pb-lijn);
}
.fg2pb-rij{
  /* De zweefknopjes liggen rechts OVER de regel, dus de regel is hun anker.
     Zo verspringt de hoogte van de lijst niet als ze verschijnen. */
  position: relative;
  display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 10px;
  padding: 10px 14px 11px;
  border-bottom: 1px solid var(--pb-lijn);
  background: var(--pb-vlak); border-left: 0; border-right: 0; border-top: 0;
  text-align: left; width: 100%; color: var(--pb-inkt);
  transition: background var(--pb-duur) var(--pb-ease);
}
.fg2pb-rij:hover{ background: var(--pb-zweef); }
/* Plaats 1 van de drie: de streep links. Verder GEEN kleur over de rij. */
.fg2pb-rij[data-ongelezen]{ box-shadow: inset 3px 0 0 var(--pb-accent); }
.fg2pb-rij[aria-selected="true"]{ background: var(--pb-gekozen); }
.fg2pb-vink{
  width: 16px; height: 16px; margin: 2px 0 0;
  border: 1.5px solid var(--pb-lijn-hard); border-radius: 4px;
  accent-color: var(--pb-accent);
}
.fg2pb-wie{ display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.fg2pb-naam{
  font-weight: 600; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fg2pb-rij[data-ongelezen] .fg2pb-naam{ font-weight: 800; }
.fg2pb-aantal{
  flex: none;
  font-family: var(--pb-mono); font-size: 11px; font-weight: 600;
  color: var(--pb-inkt-zacht);
  background: var(--pb-grond);
  border: 1px solid var(--pb-lijn-hard);
  border-radius: var(--r-pill, 999px);
  padding: 0 6px;
}
.fg2pb-onderw{ margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg2pb-rij[data-ongelezen] .fg2pb-onderw{ font-weight: 700; }
.fg2pb-frag{
  margin-top: 1px; font-size: 12.5px; color: var(--pb-inkt-zacht);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fg2pb-aanregel{
  margin-top: 4px; display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--pb-inkt-flets); min-width: 0;
}
.fg2pb-aanregel-tekst{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg2pb-chip{
  flex: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--pb-lijn-hard); border-radius: 5px; padding: 1px 5px;
  color: var(--pb-inkt-zacht); background: var(--pb-grond);
}
/* Het Cc-blokje was het enige oranje in de lijst dat ook BETEKENIS heeft, maar het
   schreeuwde harder dan de mail zelf. Nu een neutraal blokje met een smal
   accentstreepje links: je ziet het meteen, het overstemt niets. */
.fg2pb-chip[data-cc]{
  border-color: var(--pb-lijn-hard);
  color: var(--pb-inkt);
  background: var(--pb-vlak);
  box-shadow: inset 2px 0 0 var(--pb-accent);
  padding-left: 8px;
}
.fg2pb-rechts{ display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.fg2pb-tijd{
  font-family: var(--pb-mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--pb-inkt-zacht); white-space: nowrap;
}
.fg2pb-rij[data-ongelezen] .fg2pb-tijd{ color: var(--pb-inkt); font-weight: 700; }
.fg2pb-iconen{ display: flex; gap: 6px; color: var(--pb-inkt-flets); font-size: 12px; }
.fg2pb-leeg{ padding: 28px 16px; text-align: center; color: var(--pb-inkt-flets); }

/* ---------- 7. Het leesvenster (werkvlak) ---------- */
.fg2pb-lees{
  background: var(--pb-vlak);
  padding: 16px 20px 20px;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0; min-height: 0; overflow-y: auto;
}
.fg2pb-leeskop h2{
  margin: 0 0 6px;
  font-size: var(--fs-h2, 19px); line-height: var(--lh-h2, 26px);
  font-weight: var(--fw-h2, 620); letter-spacing: var(--ls-h2, -.012em);
  color: var(--pb-inkt); text-wrap: balance;
}
/* 17/10/2026 — Patrick: "waar staat mijn vertaalknop? ik zie hem niet ze".
   Hij stond er wel, maar de knoppen in de leesruit erfden de stijl van de
   donkere bovenbalk: lichtgrijze letters op een wit vlak. Onzichtbaar dus.
   Hier krijgen ze hun eigen rand en inkt — op wit moet je een knop kunnen zien
   zonder te zoeken. */
.fg2pb-leesmeta .fg2pb-knop{
  border: 1px solid var(--pb-lijn-hard);
  background: var(--pb-vlak);
  color: var(--pb-inkt);
  font-weight: 600;
}
.fg2pb-leesmeta .fg2pb-knop:hover{ background: var(--pb-zweef); }
/* 17/10/2026 — het vuilbakje boven de mail. Rood pas bij zweven: het mag
   opvallen wanneer je het zoekt, en rustig blijven wanneer je leest. */
.fg2pb-leesmeta .fg2pb-knop[data-gevaar]{
  display: inline-flex; align-items: center; gap: 5px;
}
.fg2pb-leesmeta .fg2pb-knop[data-gevaar]:hover{
  border-color: var(--pb-gevaar);
  color: var(--pb-gevaar);
  background: var(--pb-gevaar-zacht);
}
/* De logo-knoppen en het gekozen logo in de handtekening. */
.fg2pb-handvak img{ cursor: pointer; }
.fg2pb-handvak img:hover{ outline: 2px solid var(--pb-accent); outline-offset: 2px; }
.fg2pb-leesmeta .fg2pb-knop[data-hoofd]{
  background: var(--pb-accent);
  color: var(--pb-op-accent);
  border-color: transparent;
}
.fg2pb-leesmeta{
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 12.5px; color: var(--pb-inkt-zacht);
}
.fg2pb-draad{ border: 1px solid var(--pb-lijn); border-radius: var(--pb-r); overflow: hidden; }
.fg2pb-draadregel{
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--pb-lijn);
  font-size: 13px; background: var(--pb-vlak); border-left: 0; border-right: 0; border-top: 0;
  text-align: left; width: 100%; color: var(--pb-inkt);
}
.fg2pb-draadregel:last-child{ border-bottom: 0; }
.fg2pb-draadregel[aria-expanded="true"]{ background: var(--pb-grond); }
.fg2pb-pil{
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--pb-gekozen); color: var(--pb-inkt-zacht);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.fg2pb-brief{ border: 1px solid var(--pb-lijn); border-radius: var(--pb-r); padding: 14px; color: var(--pb-inkt); }
.fg2pb-brief p{ margin: 0 0 9px; max-width: 64ch; }
.fg2pb-brief p:last-child{ margin-bottom: 0; }
.fg2pb-brief img{ max-width: 100%; height: auto; }
.fg2pb-brief table{ max-width: 100%; }
.fg2pb-bijl{
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--pb-lijn-hard); border-radius: var(--pb-r);
  padding: 5px 9px; font-size: 12.5px;
  background: var(--pb-grond); color: var(--pb-inkt);
}
.fg2pb-bijl-maat{ font-family: var(--pb-mono); color: var(--pb-inkt-flets); font-size: 11.5px; }
/* Een bijlage met role=button is aanklikbaar; dat mag je ook zien en voelen. */
.fg2pb-bijl[role="button"]{ cursor: pointer; }
.fg2pb-bijl[role="button"]:hover{ background: var(--pb-vlak); border-color: var(--pb-inkt-flets); }
.fg2pb-bijl[aria-busy="true"]{ opacity: .6; cursor: progress; }
.fg2pb-vinklabel{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--pb-inkt-zacht); font-size: 12px; cursor: pointer;
}
.fg2pb-vinklabel input{
  width: 15px; height: 15px; margin: 0;
  accent-color: var(--pb-accent);
}

/* ---------- 8. Adresblokjes (één naam per blokje, met domein) ---------- */
.fg2pb-adresveld{ display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 8px; }
.fg2pb-adreslabel{ color: var(--pb-inkt-flets); font-size: 12px; width: 28px; flex: none; }
.fg2pb-adrchip{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--pb-grond); border: 1px solid var(--pb-lijn-hard);
  border-radius: var(--r-pill, 999px); padding: 2px 4px 2px 8px;
  font-size: 12.5px; color: var(--pb-inkt); max-width: 100%;
}
.fg2pb-adrchip-naam{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg2pb-adrchip-dom{ font-family: var(--pb-mono); font-size: 11.5px; color: var(--pb-inkt-flets); }
.fg2pb-adrchip-x{
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: var(--pb-lijn-hard); color: var(--pb-vlak);
  border: 0; display: grid; place-items: center; font-size: 10px; line-height: 1;
}
.fg2pb-adrchip-x:hover{ background: var(--danger); }
.fg2pb-adrinput{
  flex: 1 1 120px; min-width: 100px;
  border: 0; background: none; font: inherit; color: var(--pb-inkt); padding: 3px 2px;
}

/* ---------- 8b. Het opstelvenster ----------
   16/10/2026. Outlook opent een nieuw bericht en een antwoord in het
   LEESVENSTER, niet in een los zwevend kader: de lijst blijft staan, je ziet
   waar je vandaan komt, en er valt niets over je scherm. Dat doen we hier ook,
   dus het opstelvenster neemt gewoon de derde kolom over.

   De knoppenbalk staat BOVENAAN en blijft staan bij het scrollen — zoals in
   Outlook — zodat Verzenden nooit buiten beeld valt bij een lange mail.      */
.fg2pb-opstel{
  display: flex; flex-direction: column;
  min-height: 0; height: 100%;
  background: var(--pb-vlak); color: var(--pb-inkt);
}
.fg2pb-opstelbalk{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pb-lijn);
  background: var(--pb-vlak);
  position: sticky; top: 0; z-index: 2;
}
.fg2pb-opstelkop{
  padding: 10px 14px 0;
  font-size: var(--fs-label, 11.5px);
  letter-spacing: var(--ls-label, .08em);
  text-transform: uppercase; font-weight: 700;
  color: var(--pb-inkt-flets);
}
.fg2pb-opstelvelden{ padding: 10px 14px 0; }
.fg2pb-opstelrij{
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--pb-lijn);
  padding-bottom: 6px; margin-bottom: 8px;
  position: relative;
}
.fg2pb-opstelrij > .fg2pb-adresveld{ margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.fg2pb-vanveld{
  border: 0; background: none; font: inherit; color: var(--pb-inkt);
  padding: 3px 2px; max-width: 100%;
}
.fg2pb-onderwerpveld{
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; font: inherit; font-weight: 600;
  color: var(--pb-inkt); padding: 3px 2px;
}
/* De suggestielijst hangt onder het veld waar je typt. */
.fg2pb-sugg{
  position: absolute; left: 36px; right: 0; top: 100%;
  z-index: 5; max-height: 232px; overflow-y: auto;
  margin-top: 2px; padding: 4px;
  background: var(--pb-vlak);
  border: 1px solid var(--pb-lijn-hard);
  border-radius: var(--pb-r-groot);
  box-shadow: var(--pb-schaduw-menu);
}
.fg2pb-suggknop{
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; text-align: left;
  padding: 6px 9px; border: 0; border-radius: var(--pb-r);
  background: none; color: var(--pb-inkt); font: inherit; cursor: pointer;
}
.fg2pb-suggknop:hover, .fg2pb-suggknop[aria-selected="true"]{ background: var(--pb-zweef); }
.fg2pb-suggadres{ font-family: var(--pb-mono); font-size: 11.5px; color: var(--pb-inkt-flets); }

.fg2pb-opsteltekst{
  flex: 1 1 auto; min-height: 180px;
  margin: 0 14px;
  border: 0; resize: none;
  background: none; color: var(--pb-inkt);
  font: inherit; line-height: 1.55;
  padding: 6px 2px;
}
/* De handtekening staat ZICHTBAAR onder de tekst, niet pas in de verzonden
   mail. Je kan er niet in typen: dat is een eigen instelling per postbus. */
.fg2pb-hand{
  margin: 4px 14px 0;
  padding: 10px 0 0;
  border-top: 1px dashed var(--pb-lijn-hard);
  color: var(--pb-inkt-zacht); font-size: 13px;
}
.fg2pb-hand img{ max-width: 100%; height: auto; }
.fg2pb-handkop{
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--pb-inkt-flets); margin-bottom: 6px;
}
.fg2pb-bijlrij{
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px 0;
}
.fg2pb-opstelvoet{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px 12px;
  color: var(--pb-inkt-flets); font-size: 12px;
}

/* ---------- 9. Sneltoetsenbalk ---------- */
.fg2pb-toetsen{ display: flex; flex-wrap: wrap; gap: 6px; }
.fg2pb-kbd{
  font-family: var(--pb-mono); font-size: 11px;
  border: 1px solid var(--pb-lijn-hard); border-bottom-width: 2px; border-radius: 5px;
  padding: 2px 6px; background: var(--pb-grond); color: var(--pb-inkt-zacht);
}

/* ---------- 9b. Handelen: zweefknopjes, rechtsklikmenu, ongedaan ----------
   16/10/2026 — Patrick: "en de vuilbakjes om mails te verwijderen? zoals bij
   outlook of microsoft?"

   De knopjes staan rechts OVER de regel op een eigen wit plaatje, en ze komen
   pas in beeld bij zweven, bij toetsenbordaandacht of als de regel open staat.
   Dat is precies hoe Outlook het doet, en het houdt de lijst rustig: geen rij
   knopjes op elke regel.                                                     */
/* 17/10/2026 — Patrick: "de 3 oplichtende knopjes staan over de tekst, zet
   die mooi recht onderaan aub!" Ze hingen op halve hoogte (top:50%), en dat
   is net de regel met het fragment. Nu staan ze onderaan rechts, waar enkel
   witruimte is. */
.fg2pb-acties{
  position: absolute;
  top: auto;
  bottom: 6px;
  right: 8px;
  transform: none;
  display: flex; gap: 4px;
  padding: 3px;
  border-radius: var(--pb-r);
  background: var(--pb-vlak);
  box-shadow: var(--pb-schaduw);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pb-duur) var(--pb-ease);
}
.fg2pb-rij:hover .fg2pb-acties,
.fg2pb-rij:focus-within .fg2pb-acties,
.fg2pb-rij[aria-selected="true"] .fg2pb-acties{ opacity: 1; pointer-events: auto; }
.fg2pb-actie{
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 13px; line-height: 1;
  border: 1px solid var(--pb-lijn-hard);
  border-radius: var(--pb-r);
  background: var(--pb-vlak);
  color: var(--pb-inkt-zacht);
  cursor: pointer;
  transition: background var(--pb-duur) var(--pb-ease);
}
.fg2pb-actie:hover{ background: var(--pb-grond); color: var(--pb-inkt); }
/* De enige rode plek in het hele scherm, en enkel bij zweven. */
.fg2pb-actie[data-actie="trash"]:hover{
  border-color: var(--pb-gevaar);
  color: var(--pb-gevaar);
  background: var(--pb-gevaar-zacht);
}

/* Het rechtsklikmenu hangt IN .fg2pb, niet in de body: zo erft het de
   tokenlaag en blijft het wit met zwarte tekst, ook in een donkere CRM. */
.fg2pb-menu{
  position: fixed;
  z-index: 60;
  min-width: 224px;
  padding: 5px;
  background: var(--pb-vlak);
  color: var(--pb-inkt);
  border: 1px solid var(--pb-lijn-hard);
  border-radius: var(--pb-r-groot);
  box-shadow: var(--pb-schaduw-menu);
  font-family: var(--pb-font);
  font-size: 13.5px;
}
.fg2pb-menukop{
  padding: 6px 10px 7px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--pb-lijn);
  font-size: 11.5px;
  color: var(--pb-inkt-flets);
  max-width: 320px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fg2pb-menuknop{
  display: block; width: 100%; text-align: left;
  padding: 7px 10px;
  border: 0; border-radius: var(--pb-r);
  background: none; color: var(--pb-inkt);
  font: inherit; cursor: pointer;
}
.fg2pb-menuknop:hover, .fg2pb-menuknop:focus-visible{ background: var(--pb-zweef); }
.fg2pb-menuknop[data-gevaar]{ color: var(--pb-gevaar); }
.fg2pb-menuknop[data-gevaar]:hover,
.fg2pb-menuknop[data-gevaar]:focus-visible{ background: var(--pb-gevaar-zacht); }

/* Een wis is altijd omkeerbaar: mail-delete verplaatst enkel naar de
   prullenmand. Zolang dit balkje staat, haal je het met één klik terug. */
.fg2pb-ongedaan{
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--pb-lijn);
  background: var(--pb-grond);
  font-size: 12.5px; color: var(--pb-inkt-zacht);
}
.fg2pb-bezig{
  font-family: var(--pb-mono);
  font-variant-numeric: tabular-nums;
  color: var(--pb-inkt-flets);
}

/* ---------- 9c. Slepen naar een map ----------
   De regel die je vasthebt wordt flets, en de map waar je boven hangt krijgt
   een stippellijn. Bewust GEEN oranje: dit is een tijdelijk signaal, geen
   huisstijl, en de rail is al donker. De zweefknopjes gaan tijdens een sleep
   uit, anders vang je ze onder je cursor.                                   */
.fg2pb-rij[data-sleept]{ opacity: .45; }
.fg2pb-rij[data-sleept] .fg2pb-acties{ opacity: 0; pointer-events: none; }
.fg2pb-map[data-over]{
  background: var(--pb-omhul-aan);
  color: var(--pb-omhul-inkt);
  outline: 2px dashed var(--pb-omhul-zacht);
  outline-offset: -3px;
}

/* ---------- 10. Smal scherm ---------- */
@media (max-width: 900px){
  .fg2pb-drie{ grid-template-columns: 1fr; }
  .fg2pb-greep{ display: none; }   /* op een gsm versleep je niets */
  .fg2pb-rail, .fg2pb-lijst{ border-right: 0; border-bottom: 1px solid var(--pb-omhul-lijn); }
  .fg2pb-rail{ flex-direction: row; gap: 8px; overflow-x: auto; }
  .fg2pb-railgroep[data-postbussen]{ display: none; }
  .fg2pb-lijst{ max-height: 46vh; }
}
/* ---------- 8c. HET ZWEVENDE OPSTELVENSTER ----------
   17/10/2026 — Patrick: "nieuw bericht moet toch een pop up zijn?" In Outlook
   is een nieuw bericht, een antwoord en een doorsturing een EIGEN venster.
   Het zweeft binnen het postbusscherm (niet over de hele CRM), zodat de rail
   en de lijst zichtbaar blijven en je de mail die je beantwoordt kan nalezen.
   Hij begint rechtsonder; verslepen zet left/top en gooit right/bottom weg. */
.fg2pb-gastheer{ position: relative; }
.fg2pb-popup{
  /* 17/10/2026 — vast aan het VENSTER, niet aan de tegel. Patrick, twee keer:
     "en dan opeens pop up terug weg, voor ik kon versturen???" en "oke ik had
     nog niks geschreven, maar dan nog mag hij niet verdwijnen he!!!"
     Hij hing in het postbusscherm, en de schil hertekent dat scherm bij van
     alles (tellers, tabwissel, klok). Dan is het venster weg, hoe goed je het
     van binnenuit ook beschermt. Nu hangt het aan de pagina zelf: geen enkele
     hertekening van de CRM raakt het nog. */
  position: fixed;
  z-index: 1200;
  /* Plaats en maat worden in het scherm GEZET en onthouden; hier staan alleen
     de grenzen. Patrick: "kan de pop up verschuifbaar worden, en uittrekbaar,
     en laatste positie onthouden worden?" */
  min-width: 380px;
  min-height: 260px;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--pb-vlak);
  color: var(--pb-inkt);
  border: 1px solid var(--pb-lijn-hard);
  border-radius: var(--pb-r-groot);
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
  overflow: hidden;
  /* Uittrekken aan de rechteronderhoek, zoals een Outlook-venster. */
  resize: both;
}
.fg2pb-popup > .fg2pb-opstel{
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  background: var(--pb-vlak);
  color: var(--pb-inkt);
}
.fg2pb-popkop{
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 8px 14px;
  background: var(--pb-omhul);
  color: var(--pb-omhul-inkt);
  cursor: move;
  touch-action: none;
  user-select: none;
}
.fg2pb-poptitel{
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
}
.fg2pb-popknop{
  flex: 0 0 auto;
  width: 26px; height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pb-omhul-zacht);
  line-height: 1;
}
.fg2pb-popknop:hover{ background: var(--pb-omhul-hover); color: var(--pb-omhul-inkt); }
/* Opgerold: enkel de titelbalk blijft staan, zoals een geminimaliseerd
   Outlook-venster onderaan je scherm. */
.fg2pb-popup[data-opgerold] > .fg2pb-opstel > *:not(.fg2pb-popkop){ display: none; }
.fg2pb-popup[data-opgerold]{ min-height: 0; }

/* Het schrijfvak neemt de hoogte die overblijft en scrolt zelf; zo blijven de
   adresvelden boven en de voetregel onder altijd zichtbaar, ook als je het
   venster kleiner trekt. */
.fg2pb-popup .fg2pb-opsteltekst[contenteditable]{
  flex: 1 1 auto;
  min-height: 120px;
}

/* 17/10/2026 — Patrick: "en cc en bcc niet standaard maar aanklikbaar, zo
   winnen we ruimte". Die rijen WAREN al verborgen met het hidden-attribuut,
   maar .fg2pb-opstelrij zet display:flex en dat wint van hidden. Daardoor
   stonden ze er toch. Eén regel zet dat recht. */
.fg2pb-opstelrij[hidden]{ display: none; }

/* Het naamveld naast de Van-keuze: de naam die de ontvanger ziet. */
.fg2pb-vannaamveld{
  flex: 0 1 220px;
  min-width: 0;
  border: 0;
  border-bottom: 1px dashed var(--pb-lijn-hard);
  padding: 2px 6px;
  background: transparent;
  color: var(--pb-inkt);
  font: inherit;
}
.fg2pb-vannaamveld::placeholder{ color: var(--pb-inkt-flets); }
.fg2pb-vannaamveld:focus{
  outline: none;
  border-bottom-color: var(--pb-accent);
}

/* 17/10/2026 — Patrick: "kon ook geen bijlage opladen?" De knoppen Bijlage,
   Cc, Bcc en Verwerpen stonden NIET uit — ze waren onleesbaar. Die knoppen
   zijn gemaakt voor de DONKERE bovenbalk (lichte tekst zonder achtergrond),
   en in het zwevende venster staan ze op een wit vlak. Dus lichtgrijs op wit:
   je ziet ze amper en je denkt dat ze uit staan.
   Hier krijgen ze een eigen uiterlijk voor op het witte vlak. */
.fg2pb-popup .fg2pb-opstelbalk{
  background: var(--pb-grond);
  border-bottom: 1px solid var(--pb-lijn);
}
.fg2pb-popup .fg2pb-opstelbalk .fg2pb-knop{
  background: var(--pb-vlak);
  color: var(--pb-inkt);
  border: 1px solid var(--pb-lijn-hard);
}
.fg2pb-popup .fg2pb-opstelbalk .fg2pb-knop:hover{
  background: var(--pb-zweef);
}
.fg2pb-popup .fg2pb-opstelbalk .fg2pb-knop[data-hoofd]{
  background: var(--pb-accent);
  color: var(--pb-op-accent);
  border-color: transparent;
}

/* ---------- 8d. DE OPMAAKBALK ----------
   Overgezet uit het oude opstelvenster, dat deze balk al sinds build 869 had.
   Patrick stuurde er de foto van: "het oude opstelvenster heeft die opmaakbalk
   al". Dit is dus overzetten, niet uitvinden. */
.fg2pb-opmaak{
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 6px 12px;
  border-top: 1px solid var(--pb-lijn);
  border-bottom: 1px solid var(--pb-lijn);
  background: var(--pb-grond);
}
.fg2pb-opmaak button{
  min-width: 28px; height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pb-inkt-zacht);
  font-size: 13px;
  line-height: 1;
}
.fg2pb-opmaak button:hover{ background: var(--pb-zweef); color: var(--pb-inkt); }
.fg2pb-opmaaksep{
  width: 1px; height: 16px;
  margin: 0 5px;
  background: var(--pb-lijn-hard);
}
.fg2pb-kleurknop{ font-weight: 800; }
/* De microfoon. Rood zolang hij luistert, zodat je nooit per ongeluk aan het
   inspreken blijft. */
.fg2pb-micro[data-aan]{
  background: var(--pb-gevaar) !important;
  color: #fff !important;
  animation: fg2pb-klop 1.1s ease-in-out infinite;
}
@keyframes fg2pb-klop{
  0%, 100% { box-shadow: 0 0 0 0 rgba(179,38,30,.55); }
  50%      { box-shadow: 0 0 0 5px rgba(179,38,30,0); }
}
@media (prefers-reduced-motion: reduce){
  .fg2pb-micro[data-aan]{ animation: none; }
}
.fg2pb-micro[hidden]{ display: none; }

/* 17/10/2026 — de vertaling, boven het origineel. Ze krijgt een eigen vlak
   met de accentkleur van de afdeling, zodat je in één oogopslag ziet dat dit
   NIET de woorden van de afzender zijn maar een vertaling. */
.fg2pb-vertaald{
  margin: 0 14px 10px;
  padding: 10px 12px;
  border: 1px solid var(--pb-lijn-hard);
  border-left: 3px solid var(--pb-accent);
  border-radius: var(--pb-r);
  background: var(--pb-grond);
}
.fg2pb-vertaald[hidden]{ display: none; }
.fg2pb-vertaalkop{
  margin-bottom: 6px;
  color: var(--pb-accent-inkt);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.fg2pb-vertaaltekst{
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pb-inkt);
  white-space: normal;
}
/* 17/10/2026 — de knop draagt zelf de kleur die hij zet, anders zie je vijf
   dezelfde grijze A-tjes. De selector is bewust zwaarder dan de zweef-regel
   hierboven, zodat de kleur ook bij zweven blijft staan. */
.fg2pb-opmaak .fg2pb-kleurknop[data-opkleur="--pb-accent"]{ color: var(--pb-accent); }
.fg2pb-opmaak .fg2pb-kleurknop[data-opkleur="--pb-inkt"]{ color: var(--pb-inkt); }
.fg2pb-opmaak .fg2pb-kleurknop[data-opkleur="--pb-rood"]{ color: var(--pb-rood); }
.fg2pb-opmaak .fg2pb-kleurknop[data-opkleur="--pb-blauw"]{ color: var(--pb-blauw); }
.fg2pb-opmaak .fg2pb-kleurknop[data-opkleur="--pb-groen"]{ color: var(--pb-groen); }

/* 17/10/2026 — een echte kleurkiezer en een grootte, zoals in Outlook. */
.fg2pb-kleurkiezer{
  width: 26px; height: 24px;
  padding: 0;
  border: 1px solid var(--pb-lijn-hard);
  border-radius: 6px;
  background: var(--pb-vlak);
  cursor: pointer;
}
/* De handtekening-editor, in hetzelfde venster. */
.fg2pb-handbewerk{
  margin-left: 8px;
  border: 1px solid var(--pb-lijn-hard);
  border-radius: 999px;
  padding: 1px 10px;
  background: var(--pb-vlak);
  color: var(--pb-inkt-zacht);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}
.fg2pb-handbewerk:hover{ background: var(--pb-zweef); color: var(--pb-inkt); }
/* De logo's van de afdeling, als knopjes boven het handtekeningvak. */
.fg2pb-logorij{
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.fg2pb-logokop{
  font-size: 11px;
  color: var(--pb-inkt-flets);
  margin-right: 4px;
}
.fg2pb-logoknop{
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px;
  padding: 2px 6px;
  border: 1px solid var(--pb-lijn-hard);
  border-radius: var(--pb-r);
  background: var(--pb-vlak);
}
.fg2pb-logoknop:hover{ border-color: var(--pb-accent); background: var(--pb-zweef); }
.fg2pb-logoknop img{ max-height: 26px; max-width: 110px; display: block; }

.fg2pb-handvak{
  min-height: 90px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--pb-lijn-hard);
  border-radius: var(--pb-r);
  background: var(--pb-vlak);
  color: var(--pb-inkt);
}
.fg2pb-handvak:empty::before{
  content: attr(data-leeg);
  color: var(--pb-inkt-flets);
  pointer-events: none;
}
.fg2pb-handknoppen{
  display: flex; gap: 8px;
  margin-top: 8px;
}
.fg2pb-handknoppen .fg2pb-knop{
  background: var(--pb-vlak);
  color: var(--pb-inkt);
  border: 1px solid var(--pb-lijn-hard);
}
.fg2pb-handknoppen .fg2pb-knop[data-hoofd]{
  background: var(--pb-accent);
  color: var(--pb-op-accent);
  border-color: transparent;
}

.fg2pb-maatkiezer{
  height: 24px;
  margin-left: 2px;
  border: 1px solid var(--pb-lijn-hard);
  border-radius: 6px;
  background: var(--pb-vlak);
  color: var(--pb-inkt);
  font: inherit;
  font-size: 12px;
}
.fg2pb-kleurknop[data-accent]{ color: var(--pb-accent); }

/* Het schrijfvak is geen <textarea> meer maar een echt schrijfvak, anders kan
   er geen opmaak in staan. Leeg toont het de uitnodiging. */
.fg2pb-opsteltekst:empty::before{
  content: attr(data-leeg);
  color: var(--pb-inkt-flets);
  pointer-events: none;
}
.fg2pb-opsteltekst[contenteditable]{
  min-height: 180px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.fg2pb-opsteltekst[contenteditable] a{ color: var(--pb-accent); }
.fg2pb-opsteltekst[contenteditable] ul,
.fg2pb-opsteltekst[contenteditable] ol{ margin: 6px 0 6px 22px; }

/* ---------- 10b. DE BOOM IN DE RAIL ----------
   17/10/2026 — Patrick: "maak dit gewoon uitklapbaar toch?" en "per postbus
   afdeling zou ik een duidelijke mooie knop maken, bv in de kleur van de
   afdeling met witte tekst van de afdeling, nu staat FAST MOVERS en FASTHELP
   gewoon mee in de rij".
   De afdelingskleur komt als --pb-afd uit de databank (public.tegels.kleur);
   staat er geen kleur, dan valt de balk terug op het omhulsel. In dit blad
   staat dus nog altijd geen enkele kleurwaarde van een merk. */
.fg2pb-afdeling{
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 6px;
  padding: 7px 10px;
  border-radius: var(--pb-r);
  background: var(--pb-omhul);
  color: var(--pb-omhul-zacht);
  font-size: var(--fs-label, 11.5px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fg2pb-afdeling[data-gekleurd]{
  background: var(--pb-afd, var(--pb-omhul));
  color: var(--pb-afd-inkt, #ffffff);
}
.fg2pb-afdeling > span:first-child{ flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg2pb-afd-tel{
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.fg2pb-boombus{ display: block; }
.fg2pb-vouw{
  flex: 0 0 auto;
  width: 14px;
  text-align: center;
  color: var(--pb-omhul-zacht);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
.fg2pb-vouw:hover{ color: var(--pb-omhul-inkt); }
.fg2pb-busnaam{ flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* De mappen van ÉÉN postbus, ingesprongen onder hun eigen postbus. */
.fg2pb-boommappen{
  display: flex; flex-direction: column;
  margin: 2px 0 6px 18px;
  padding-left: 8px;
  border-left: 1px solid var(--pb-omhul-lijn);
}
.fg2pb-boommap{
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  border: 0;
  padding: 5px 8px;
  border-radius: var(--pb-r);
  background: transparent;
  color: var(--pb-omhul-zacht);
  text-align: left;
  font-size: 13px;
}
.fg2pb-boommap > span:first-child{ flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg2pb-boommap:hover{ background: var(--pb-omhul-hover); color: var(--pb-omhul-inkt); }
.fg2pb-boommap[aria-current="true"]{
  background: var(--pb-omhul-aan);
  color: var(--pb-omhul-inkt);
  box-shadow: inset 2px 0 0 var(--pb-accent);
  font-weight: 600;
}

/* ---------- 11. De volle tegel ----------
   17/10/2026 — Patrick, bij de postbus in een tegel: "niet over het ganse
   scherm?". Klopte: .fg2pb had enkel een MINIMUMhoogte, en de gastheer van
   de oude inbox is een smalle kaart. Gevolg: een klein kadertje met witruimte
   errond. De gastheer krijgt nu de klasse hieronder en zijn hoogte wordt in
   het scherm GEMETEN (afstand tot de onderkant van het venster), want die
   hangt af van de koptekst van de tegel en die verschilt per afdeling.
   Een vast getal zou hier stil verouderen. */
.fg2pb-gastheer{
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.fg2pb-gastheer > .fg2pb{
  height: 100%;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

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