/* ============================================================
   MAIL.CSS — het opstelscherm, de selectie en Verzonden items
   Migratie 011, 21 september 2026.

   Waarom een eigen bestand naast app.css. De sectie E-MAILMODULE
   in app.css blijft staan: die is van de postbusweergave uit
   009 en 010 (de drie zones, de lijst, het bericht). Wat hier
   staat, is wat er in 011 bij kwam — de editor, de opmaakbalk,
   de chips, de sleepzone, de selectie en de bulkbalk. Eén
   sectie in app.css was ook gegaan; een eigen bestand is
   goedkoper zodra twee mensen tegelijk aan deze repo werken, en
   dat was hier de situatie.

   Alles op de tokens van app.css, dus ook in het donkere thema
   goed: er staat hieronder geen enkele letterlijke kleur, op één
   uitzondering na die erbij staat uitgelegd. Het 4-px raster van
   de rest van de Console geldt ook hier.

   Wordt geladen door mailmodule.js zelf, of door één <link> in
   index.html (dat laatste is beter: dan staat hij er vóór de
   eerste tekening en flikkert er niets).
   ============================================================ */

/* ============================================================
   1. DE SELECTIE IN DE LIJST
   Herzien 22 september 2026: HET VINKVAKJE PER REGEL IS WEG.
   Veertig vakjes onder elkaar is een kolom waar niemand naar
   kijkt, en het vakje nam de plek in van de urgentiestreep.
   Selecteren gaat met Ctrl-klik, Shift-klik en de toets x —
   ongewijzigd, alleen zonder vakje.

   Een regel blijft een <div> met de knop erin, want de drie
   icoonknoppen rechts (archiveren, verwijderen, vlag) mogen niet
   ín die knop staan: een knop in een knop is geen geldige HTML
   en werkt met de toetsen niet.
   ============================================================ */
.mrij{position:relative;border-bottom:1px solid var(--line-soft)}
.mrij:last-child{border-bottom:0}

/* Geselecteerd: --surface-2 met een accentrand van 3 px aan de RECHTERkant,
   zodat hij niet vecht met de urgentiestreep links. */
.mrij.gekozen{background:var(--surface-2);box-shadow:inset -3px 0 0 var(--accent)}
.mrij.gekozen .mr:hover{background:none}
/* Het geopende bericht: dezelfde vorm, met het accentvlak erbij. */
.mrij .mr[aria-current="true"]{background:var(--surface-2);box-shadow:inset -3px 0 0 var(--accent)}

/* De drie knoppen rechts in de regel: ALLEEN bij zweven of focus.
   Ze stonden ook aan op elk scherm dat `hover: none` meldt — een aanraakscherm,
   maar ook een laptop met een aanraakscherm en elke browser die headless
   rendert. Dat leverde een kolom knoppen naast elke regel op, en die trekt het
   oog weg van waar het bericht over gaat. Op een aanraakscherm doen de vegen
   het werk: naar links archiveren, naar rechts als gelezen markeren. */
.mracties{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:flex;gap:2px;
  opacity:0;pointer-events:none;transition:opacity .12s ease-out;background:var(--ground);
  border-radius:8px;padding:1px}
.mrij:hover .mracties,
.mrij:focus-within .mracties{opacity:1;pointer-events:auto}
.mrij.gekozen .mracties,
.mrij:hover .mracties{background:var(--surface-2)}

/* ============================================================
   2. DE BULKBALK
   Boven de lijst, zodra er meer dan één bericht is geselecteerd.
   Hij duwt de lijst naar beneden in plaats van eroverheen te
   liggen: een balk die over de bovenste regel valt, verbergt
   precies het bericht dat iemand net heeft aangewezen.

   De vier uit de brief van 22 september staan vooraan op de
   eerste rij; de andere bulkacties staan er ONVERANDERD onder.
   ============================================================ */
.mailbulk{border-bottom:1px solid var(--line);background:var(--accent-bg);
  padding:8px 12px;display:flex;flex-direction:column;gap:7px}
.mailbulk .rij{display:flex;gap:7px;align-items:center;flex-wrap:wrap;min-width:0}
.mailbulk .rij .spacer{flex:1}
.mailbulk .tel{font-size:12.5px;font-weight:600;color:var(--accent-ink);white-space:nowrap}
.mailbulk .knoppen{gap:5px}
.mailbulk .kiezer select{padding:4px 7px;border:1px solid var(--line);border-radius:7px;
  background:var(--ground);color:var(--ink);font-size:12px;max-width:170px}
.mailbulk .mini{color:var(--accent-ink)}

/* ============================================================
   3. WAT DE CONSOLE ZELF HEEFT VERSTUURD
   Boven de gespiegelde map Verzonden items. Het onderscheid is de
   hele bedoeling van dit blok: hierboven staat wat wij hebben
   goedgekeurd (direct), eronder wat er in de postbus staat
   (binnen twee minuten).
   ============================================================ */
.maileigen{border-bottom:1px solid var(--line);background:var(--surface-sunk);padding:9px 12px 11px}
.maileigen .kop{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:7px}
.maileigen .kop .lb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-ink)}
.maileigen .lijst{display:flex;flex-direction:column;gap:6px}
.maileigen .ev{border:1px solid var(--line);border-radius:9px;background:var(--ground);padding:9px 11px}
.maileigen .ev.klikbaar{cursor:pointer}
.maileigen .ev.klikbaar:hover{border-color:var(--accent);background:var(--surface)}
.maileigen .rij1{display:flex;gap:8px;align-items:center;min-width:0}
.maileigen .rij1 .spacer{flex:1}
.maileigen .ond{min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.maileigen .rij2{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:4px}
.maileigen .fout{margin:6px 0 0;color:var(--stop)}
.maileigen details{margin-top:7px}
.maileigen summary{font-size:11.5px;color:var(--ink-3);cursor:pointer}
.maileigen summary:hover{color:var(--accent-ink)}
.maileigen details .opmaak,
.maileigen details .body{margin-top:7px;padding:9px 11px;border:1px solid var(--line-soft);border-radius:8px;
  background:var(--surface);font-size:12.5px;line-height:1.6;color:var(--ink);max-height:260px;overflow-y:auto;
  overflow-wrap:anywhere}

/* ============================================================
   4. HET OPSTELVAK
   ============================================================ */

/* ---- de opmaakbalk ---- */
.opmaakbalk{display:flex;gap:3px;align-items:center;flex-wrap:wrap;margin:10px 16px 0;padding:4px;
  border:1px solid var(--line);border-radius:9px 9px 0 0;border-bottom:0;background:var(--surface-2)}
.opmaakbalk .ok{min-width:28px;height:26px;padding:0 6px;border:1px solid transparent;border-radius:6px;
  background:none;color:var(--ink-2);font-family:var(--sans);font-size:13px;line-height:1;cursor:pointer}
.opmaakbalk .ok:hover{background:var(--ground);border-color:var(--line);color:var(--ink)}
.opmaakbalk .ok:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* "Centreren" gebruikt hetzelfde teken als "links uitlijnen"; een tweede
   liggend streepjes-teken bestaat niet in de tekenset die we hier gebruiken.
   Het verschil is de uitlijning van het teken zelf, en dat leest goed genoeg —
   het opschrift staat in de tooltip en in aria-label. */
.opmaakbalk .ok.mid{text-align:center;letter-spacing:.04em}
.opmaakbalk .scheid{width:1px;height:18px;background:var(--line);margin:0 3px}
.opmaakbalk .grootte{padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:var(--ground);
  color:var(--ink);font-size:11.5px}

/* De rij voor een link klapt uit ín de balk en niet in een venster: een dialoog
   zou de dialoog "Vergroten" wegduwen, en de editor zit ín die dialoog. */
.opmaakbalk .linkrij{display:flex;gap:5px;align-items:center;flex-wrap:wrap;width:100%;
  padding:5px 2px 1px;border-top:1px solid var(--line)}
.opmaakbalk .linkrij input{flex:1;min-width:160px;padding:5px 8px;border:1px solid var(--line);
  border-radius:7px;background:var(--ground);color:var(--ink);font-size:12.5px}
.opmaakbalk .linkrij input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}

/* ---- de editor zelf ----
   320 px hoog en meegroeiend. De hoogte staat hier als min-height en niet als
   een gemeten waarde in JavaScript: een vak dat met een meting meegroeit,
   verspringt bij elke aanslag. De bovengrens is er zodat het antwoordvak van een
   brief van vier kantjes het scherm niet uit duwt; erboven schuift de editor
   zelf. */
.antwoord .vak{padding:0 16px}
.editor{min-height:320px;max-height:54vh;overflow-y:auto;border:1px solid var(--line);
  border-radius:0 0 9px 9px;background:var(--ground);color:var(--ink);padding:12px 14px;
  font-family:var(--sans);font-size:13.5px;line-height:1.65;overflow-wrap:anywhere}
.editor:focus{outline:2px solid var(--accent);outline-offset:-2px;border-color:transparent}
.editor[data-gevuld="nee"]::before{content:attr(data-leeg);color:var(--ink-3);pointer-events:none;display:block}

/* De opmaak binnen het vak. Bewust dezelfde maten als in de weergave van een
   ontvangen bericht (HtmlWeergave.Document): wat een medewerker typt, ziet er
   dan uit zoals het aankomt. */
.editor p{margin:0 0 11px}
.editor p:last-child{margin:0}
.editor h3,.editor h2,.editor h4{margin:0 0 9px;font-size:15px;font-weight:700;line-height:1.35;color:var(--ink)}
.editor ul,.editor ol{margin:0 0 11px;padding-left:22px}
.editor li{margin:0 0 4px}
.editor a{color:var(--accent-ink);text-decoration:underline}
.editor blockquote{margin:9px 0 9px 4px;padding-left:12px;border-left:2px solid var(--line);color:var(--ink-2)}
.editor hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.editor pre,.editor code{font-family:var(--mono);font-size:12.5px}
.editor pre{white-space:pre-wrap;margin:0 0 11px}

/* "Vergroten": hetzelfde element, in de dialoog, over de volle breedte. */
.grootvak{display:flex;min-height:0}
.editor.groot{min-height:min(62vh,560px);max-height:72vh;width:100%;border-radius:9px;font-size:14px}

/* ---- de geadresseerden als chips ---- */
.antwoord .veld{align-items:start}
.antwoord .veld label{padding-top:8px}
.chips{display:flex;gap:5px;align-items:center;flex-wrap:wrap;min-width:0;padding:4px;
  border:1px solid var(--line);border-radius:8px;background:var(--ground)}
.chips:focus-within{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.chips input{flex:1;min-width:140px;border:0;background:none;color:var(--ink);font-size:12.5px;
  padding:4px 5px;outline:0}
.chip.adres{display:inline-flex;gap:4px;align-items:center;max-width:100%;padding:3px 4px 3px 8px;
  border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--ink-2);
  font-family:var(--mono);font-size:11px;cursor:default}
.chip.adres span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.adres button{display:grid;place-items:center;width:16px;height:16px;padding:0;border:0;border-radius:4px;
  background:none;color:var(--ink-3);cursor:pointer}
.chip.adres button:hover{background:var(--stop-bg);color:var(--stop)}

/* ---- bijlagen en de sleepzone ---- */
.bijlzone{padding:10px 16px 0;border-radius:9px}
.antwoord[data-sleep="ja"] .bijlzone{outline:2px dashed var(--accent);outline-offset:-4px;
  background:var(--accent-bg)}
.bijlzone .sleep{margin:7px 0 0;color:var(--ink-3)}
.bijlzone .bijlagen{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* De drie standen van een bijlage: onderweg, klaar, mislukt. De voortgang is de
   stand en geen balk — met één fetch is er geen echte voortgang te meten, en een
   balk die van 0 naar 100 springt zou liegen. */
.bijl.bezig{opacity:.75;border-style:dashed}
.bijl.bezig .gr{color:var(--accent-ink);font-style:italic}
.bijl.mislukt{border-color:var(--stop);background:var(--stop-bg)}
.bijl.mislukt .gr{color:var(--stop)}

/* ---- het inklapbare citaat ---- */
.citaat{margin:10px 16px 0;border:1px solid var(--line-soft);border-radius:9px;background:var(--surface-sunk)}
.citaat summary{padding:9px 12px;font-size:12px;color:var(--ink-3);cursor:pointer;border-radius:9px}
.citaat summary:hover{color:var(--accent-ink)}
.citaat[open] summary{border-bottom:1px solid var(--line-soft);border-radius:9px 9px 0 0}
.citaat .inhoud{padding:11px 13px}
.citaat .inhoud .body{font-size:12.5px;line-height:1.6;color:var(--ink-2);max-height:220px;overflow-y:auto;
  overflow-wrap:anywhere}
.citaat .inhoud .body p{margin:0 0 9px}
.citaat .inhoud .mini{margin:8px 0 0}

/* ---- de handtekening en de voet ---- */
.handtekening .standaardmelding{margin:0 0 8px;color:var(--warn)}
.antwoord .voet .naactie{padding:5px 8px;border:1px solid var(--line);border-radius:7px;
  background:var(--ground);color:var(--ink);font-size:12px;max-width:220px}

/* ============================================================
   4b. HET VENSTER NIEUW BERICHT (22 september 2026)
   840 px breed, gecentreerd, met --shadow-float en een knop om
   het tot volledig scherm te trekken. Hetzelfde opstelvak als
   bij een antwoord — de opmaakbalk, de editor, het opgeschoonde
   plakken en de bijlagen komen uit dezelfde functies.
   ============================================================ */
.dialog.opstelkaart{width:min(840px,100%);max-width:840px}
.dialog.opstelkaart.volledig{width:min(1360px,100%);max-width:none}
.dialog.opstelkaart.volledig .editor{min-height:min(58vh,540px);max-height:64vh}
.opstel{display:flex;flex-direction:column;gap:0}
.opstel .velden{display:flex;flex-direction:column;gap:7px;padding-bottom:10px}
.opstel .veld{display:grid;grid-template-columns:72px minmax(0,1fr);gap:9px;align-items:center}
.opstel .veld label{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3)}
.opstel .veld > input,.opstel .veld > select{width:100%;min-width:0;padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--ground);color:var(--ink);font-size:13px}
.opstel .veld > input:focus,.opstel .veld > select:focus{outline:2px solid var(--accent);outline-offset:-1px;
  border-color:transparent}
.opstel .veld .chips{align-items:center}
.opstel .dossierrij .mini{color:var(--ink-3)}
.opstel .ccrij{margin-top:-2px}
.opstel .ccrij .btn{justify-self:start}
.opstel .opmaakbalk{margin:0}
.opstel .vak{padding:0}
.opstel .hsrij{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:10px 0 0}
.opstel .hsrij .mini{min-width:0;color:var(--ink-3)}
.opstel .bijlzone{padding:10px 0 0}
.opstel .bijlzone[data-sleep="ja"]{outline:2px dashed var(--accent);outline-offset:4px;border-radius:9px}
.opstel .sleeprij{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:7px}
.opstel .opstelvoet{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line)}
.opstel .opstelvoet .spacer{flex:1}

/* ============================================================
   5. DE MAPPEN VAN DE POSTBUS, MET HUN GRENS
   "laatste 30 dagen" onder de naam van de map. Dat staat er niet
   voor de sier: een map die begrensd wordt uitgelezen en dat
   niet zegt, is een map waarvan een medewerker denkt dat er
   niets in staat.
   ============================================================ */
.mapknop .lb{display:flex;flex-direction:column;gap:0;line-height:1.25}
.mapknop .grens{font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapknop[aria-current="true"] .grens{color:var(--accent-ink)}

/* ============================================================
   6. SMAL (tot 1023 px) EN TELEFOON (375 px)
   Op 375 px is er geen ruimte voor een opmaakbalk van tien
   knoppen naast een lettergrootte; hij loopt dan over twee
   regels en de editor wordt korter, zodat de knop Versturen in
   beeld blijft. Een opstelvak waarvan je de verstuurknop niet
   ziet, is een opstelvak waarin niemand durft te typen.
   ============================================================ */
@media (max-width:1023px){
  .opmaakbalk{margin:10px 12px 0}
  .opstel .opmaakbalk{margin:0}
  .antwoord .vak{padding:0 12px}
  .bijlzone{padding:10px 12px 0}
  .opstel .bijlzone{padding:10px 0 0}
  .citaat{margin:10px 12px 0}
  .maileigen{padding:9px 10px 11px}
}

@media (max-width:640px){
  .editor{min-height:240px;max-height:46vh;padding:10px 12px;font-size:13px}
  .editor.groot{min-height:52vh}
  .opmaakbalk{gap:2px;padding:3px}
  .opmaakbalk .ok{min-width:26px;height:24px;padding:0 4px;font-size:12.5px}
  .opmaakbalk .grootte{font-size:11px}
  .chips input{min-width:100px}
  .antwoord .veld{grid-template-columns:minmax(0,1fr)}
  .antwoord .veld label{padding-top:0;margin-bottom:-4px}
  .antwoord .voet .naactie{max-width:100%;width:100%;order:9}
  .antwoord .voet .naregel{width:100%}
  .mailbulk .kiezer select{max-width:100%;width:100%}
  .mailbulk .knoppen .btn{flex:1 1 auto}
  /* Het opstelvenster gaat op een telefoon over het hele scherm; 72 px etiket
     naast een adresveld van 100 px leest niemand. */
  .opstel .veld{grid-template-columns:minmax(0,1fr)}
  .opstel .veld label{margin-bottom:-4px}
  .opstel .ccrij{margin-top:0}
  .opstel .editor{min-height:200px}
}

/* ============================================================
   7. REDUCED MOTION
   De twee overgangen in dit bestand zijn het opkomen van de drie
   knoppen op een regel en de lade met de mappen. Wie beweging
   heeft uitgezet, hoort ze niet te zien bewegen.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .mracties{transition:none}
}

/* De assistent in het venster Nieuw bericht (migratie 017). Eén rij tussen de
   opmaakbalk en het vak: leeg vak = opdracht + Schrijven, tekst = de vier
   herschrijvingen. Het voorstel gebruikt .hulpvoorstel uit app.css. */
.opstel .assist:empty{display:none}
.opstel .assist{padding:8px 0 2px}
.opstel .assist .hulpvoorstel{margin:0 0 6px}
.opstel .assist .hulpvoorstel p{max-height:260px}
.opstel .assist .hulpvoorstel.fout{border-left-color:var(--stop);background:var(--stop-bg)}
.opstel .assist .hulpvoorstel.fout .lb{color:var(--stop)}
.assistrij{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 8px;border:1px solid var(--line);
  border-radius:9px;background:var(--accent-bg)}
.assistrij .ic{display:inline-flex;color:var(--accent-ink);flex:0 0 auto}
.assistrij .ic svg{width:16px;height:16px}
.assistrij .mini{color:var(--ink-2)}
.assistrij input{flex:1 1 260px;min-width:0;padding:6px 9px;border:1px solid var(--line);border-radius:7px;
  background:var(--ground);color:var(--ink);font:inherit;font-size:13px}
.assistrij input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}