/* Bewust klein en zonder framework: een taakvenster is 320 pixels breed en laadt in een iframe
   binnen Outlook. Elke kilobyte is er één die de gebruiker voelt bij het openen van een mail.

   ⚠️ Twee eisen die elkaar bijten, en hoe ze hier verdeeld zijn.

   Het venster hoort visueel bij Outlook: vlak en tekst volgen het thema van de host, want een
   zwart taakvenster in een witte Outlook is een storing (zie taskpane.js `pasThemaToe`). Maar het
   hoort óók herkenbaar MatterDesk te zijn, zoals de demo op matterdesk.nl/app.

   Verdeling: de HOST bepaalt achtergrond, tekstkleur en invoervelden; MATTERDESK bepaalt
   accentkleur, letters, hoeken en witruimte. Zo botst het nergens en is het toch van ons.
   `pasThemaToe` raakt alleen de eerste groep aan. */

/* Zelf gehost — de CSP van deze server staat `default-src 'self'` en zou Google Fonts sowieso
   blokkeren. Beide families zijn variabel; alleen de latijnse subset, want een taakvenster van
   320 pixels hoeft geen Cyrillisch te kunnen. */
@font-face { font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/fonts/manrope-latin.woff2) format("woff2"); }
@font-face { font-family:"Sora"; font-style:normal; font-weight:500 700; font-display:swap;
  src:url(/fonts/sora-latin.woff2) format("woff2"); }

:root {
  /* Deze waarden zijn de TERUGVAL. Zodra Office zijn thema doorgeeft, overschrijft taskpane.js
     ze met de kleuren van Outlook zelf (Office.context.officeTheme).

     Waarom dat nodig is: color-scheme volgt het bestuurssysteem, en Outlook heeft een eigen
     thema-instelling. Iemand met een donker systeem en een licht Outlook kreeg een zwart
     taakvenster in een witte Outlook. Het venster hoort bij Outlook, niet bij het systeem. */
  color-scheme: light dark;
  --vlak: #ffffff;
  --tekst: #242424;
  --veldvlak: #ffffff;
  --rand: color-mix(in srgb, currentColor 18%, transparent);
  --gedempt: color-mix(in srgb, currentColor 62%, transparent);
  /* Het groen van MatterDesk, letterlijk de --primary uit app/src/styles.css. De host overschrijft
     deze bewust NIET: dit is het enige wat het venster onmiskenbaar van ons maakt. */
  --accent: oklch(0.348 0.072 163.5);
  --accent-tekst: oklch(0.973 0.017 92.5);
  --hoek: 8px;
  --fout: #b91c1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --vlak: #1f1f1f;
    --tekst: #f5f5f5;
    --veldvlak: #2b2b2b;
    /* Donkerrood op donkergrijs is niet te lezen. */
    --fout: #f87171;
    /* Het donkere groen zakt weg tegen een donkere achtergrond. */
    --accent: oklch(0.66 0.11 165);
    --accent-tekst: oklch(0.17 0.03 165);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 12px;
  background: var(--vlak);
  color: var(--tekst);
  font: 14px/1.55 "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1, h2 { font-family: "Sora", "Segoe UI", system-ui, sans-serif; letter-spacing: -0.01em; }
h1 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }

dl.bericht { margin: 0 0 16px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
dl.bericht dt { color: var(--gedempt); }
dl.bericht dd { margin: 0; overflow-wrap: anywhere; }

label { display: block; margin: 12px 0 4px; color: var(--gedempt); }
label.keuze { display: flex; align-items: center; gap: 8px; color: inherit; }

/* De mapkeuze bij opbergen. Zelfde vorm als een invoerveld, zodat 'ie niet als iets anders leest. */
.mapkeuze {
  display: block;
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--gedempt);
}
.mapkeuze select {
  width: 100%;
  margin-top: 4px;
  padding: 7px 9px;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  background: var(--veldvlak);
  color: inherit;
  font: inherit;
}

input[type="text"], input:not([type]) {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  background: var(--veldvlak);
  color: inherit;
  font: inherit;
}

button {
  margin-top: 16px;
  width: 100%;
  padding: 9px;
  border: 0;
  border-radius: var(--hoek);
  background: var(--accent);
  /* Niet hardgecodeerd wit: in een donker thema is het accent juist licht, en dan is wit op
     lichtgroen niet te lezen. */
  color: var(--accent-tekst);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button:disabled { opacity: .55; cursor: default; }

.status { color: var(--gedempt); margin: 12px 0 0; }
.status[data-soort="fout"] { color: var(--fout); }
.status[data-soort="klaar"] { color: var(--accent); }

/* "Nieuw dossier aanmaken" is een handeling, geen navigatie — maar hij hoort ondergeschikt te
   blijven aan Opbergen. Een tweede volwaardige knop naast de eerste laat iemand twijfelen welke
   van de twee de bedoeling is. */
.nieuw {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--gedempt);
}

.alslink {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.alslink:hover {
  text-decoration: none;
}

#nieuwDossier {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
}

/* De verwijzing achter een geslaagde melding. */
.status a {
  color: inherit;
  margin-left: 4px;
}

/* De dossierlijst tekenen we zelf.
   Een <datalist> laat de BROWSER filteren, en die filtert op de waarde van de optie. Met het
   nummer als waarde verdween elk dossier zodra je op naam zocht — de suggestie werd toegevoegd
   en meteen weer verborgen. Zoeken op naam kón daardoor niet werken. */
.suggesties {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
}

.suggesties:empty { display: none; border: 0; }

.suggesties button {
  margin: 0;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.suggesties li + li button { border-top: 1px solid var(--rand); }
.suggesties button:hover,
.suggesties button:focus-visible { background: color-mix(in srgb, currentColor 10%, transparent); }
.suggesties .nummer { font-variant-numeric: tabular-nums; color: var(--gedempt); margin-right: 8px; }

/* Het gekozen dossier, zodat zichtbaar is waar het heen gaat. */
.gekozen {
  margin: 6px 0 0;
  font-size: 0.85rem;
}

/* De inhoud van het gekozen dossier. Compact: dit is een kolom van 320 pixels, en het gaat om
   herkennen ("staat mijn mail erin?"), niet om beheren. */
#inhoud { margin-top: 14px; }
#inhoud h2 { font-size: 13px; margin: 0 0 6px; color: var(--gedempt); font-weight: 600; }

.inhoud {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
}

.inhoud li {
  padding: 6px 9px;
  font-size: 0.85rem;
}

.inhoud li + li { border-top: 1px solid var(--rand); }
.inhoud .naam { display: block; overflow-wrap: anywhere; }
.inhoud .bij { display: block; color: var(--gedempt); font-size: 0.78rem; }
.inhoud .map .naam::before { content: "📁 "; }
.inhoud .mededeling { color: var(--gedempt); }

/* Zoeken over dossiers heen. Staat onderaan: opbergen is waarvoor het venster openging, zoeken is
   wat je erbij doet. */
#zoekvak { margin-top: 18px; border-top: 1px solid var(--rand); padding-top: 14px; }
#zoekvak h2 { font-size: 13px; margin: 0 0 6px; color: var(--gedempt); font-weight: 600; }

.zoekrij { display: flex; gap: 6px; }
.zoekrij input { flex: 1; min-width: 0; }
.zoekrij button { margin-top: 0; width: auto; padding: 7px 12px; }

#treffers { margin-top: 8px; }
#treffers:empty { display: none; border: 0; }
#treffers .fragment { display: block; color: var(--gedempt); font-size: 0.78rem; margin-top: 2px; }
/* De naam van een treffer is een knop — het stuk zelf tonen — maar leest als een regel in de lijst. */
#treffers .naam { display: block; text-align: left; overflow-wrap: anywhere; }
#treffers .alslink + .alslink { margin-left: 10px; }

#nieuwDocument {
  margin-top: 8px;
  padding: 0.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
}
#nieuwDocument .sub { margin: 8px 0 0; font-size: 0.78rem; color: var(--gedempt); }
.inhoud a { color: inherit; }

.suggestiekop { margin: 8px 0 2px; font-size: 0.78rem; color: var(--gedempt); }

/* Het paneel "geselecteerd bericht", zoals de mockup op matterdesk.nl/app. */
.opschrift {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
.onderwerp {
  margin: 0;
  font-family: "Sora", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.afzender {
  margin: 3px 0 14px;
  font-size: 12px;
  color: var(--gedempt);
  overflow-wrap: anywhere;
}

/* De bijlagen als lijst met naam en grootte. Een aantal tussen haakjes zegt niet wélk stuk er mee
   de container in gaat, en dat is precies wat iemand vóór het opbergen wil zien. */
.paneel {
  margin: 14px 0 0;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  overflow: hidden;
}
.paneel.leeg .paneelkop { color: var(--gedempt); }
.paneelkop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--rand);
}
.paneel.leeg .paneelkop { border-bottom: 0; }
ul.bijlagen { list-style: none; margin: 0; padding: 0; }
ul.bijlagen li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  font-size: 13px;
}
ul.bijlagen li + li { border-top: 1px solid var(--rand); }
ul.bijlagen li span:first-child { overflow-wrap: anywhere; }
ul.bijlagen li span:last-child { flex: none; color: var(--gedempt); font-size: 12px; }

/* Uitgevinkt = de bijlagen gaan niet mee. Dat hoort zichtbaar te zijn zonder de tekst te lezen. */
.paneel:has(#metBijlagen:not(:checked)) ul.bijlagen { opacity: 0.45; }

.voetnoot { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--gedempt); }
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Een opgeborgen bericht, getoond in het venster zelf (docs/47 §D). */
#bericht { margin-top: 14px; }
.berichtkop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.berichtkop h2 { margin: 0; overflow-wrap: anywhere; }
.berichtvelden { margin: 6px 0 10px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12.5px; }
.berichtvelden dt { color: var(--gedempt); }
.berichtvelden dd { margin: 0; overflow-wrap: anywhere; }
/* <pre> omdat een bericht z'n eigen regelafbrekingen heeft en die iets betekenen: een opsomming in
   platte tekst valt anders in één lap uiteen. */
.berichttekst {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 13px/1.55 inherit;
  max-height: 45vh;
  overflow-y: auto;
}

/* Macro's gevonden (docs/52 §52.2): opvallen zonder te schreeuwen. */
.waarschuwing { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--fout); border-radius: 6px; }
.waarschuwing h2 { margin-top: 0; color: var(--fout); }
.waarschuwing button + button { margin-left: 8px; }

/* Zoekfilters en "Open in MatterDesk" (docs/52 §52.6). */
.zoekfilters { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-size: 12px; }
.zoekfilters label { display: flex; align-items: center; gap: 4px; margin: 0; }
.zoekfilters select, .zoekfilters input { width: auto; font-size: 12px; }
.inhoud .consolelink { display: block; font-size: 12px; margin-top: 2px; }

/* Bijvoegen uit het dossier en antwoorden vanuit het dossier (docs/52 §52.5). */
.inhoud .bijvoegen { margin-left: auto; flex: none; font-size: 12px; }
.berichtkop .alslink + .alslink { margin-left: 8px; }

/* Bladeren met een voorbeeld (docs/52 §52.8). De knop Voorbeeld schuift naar rechts; Bijvoegen staat er dan naast. */
#voorbeeld { margin-top: 14px; }
#voorbeeld .berichtkop span { flex: none; }
.berichtkop .alslink:disabled { opacity: 0.4; cursor: default; }
.inhoud .voorbeeldknop { margin-left: auto; flex: none; font-size: 12px; }
.inhoud .voorbeeldknop + .bijvoegen { margin-left: 8px; }
/* ⚠️ Nooit breder dan de kolom: een foto van 4000 px zou het hele venster laten scrollen. */
.voorbeeldafbeelding { display: block; max-width: 100%; max-height: 60vh; height: auto; margin: 6px 0; object-fit: contain; }

/* ⚠️ Een knop of lijst met een eigen display-regel negeert anders het hidden-attribuut. */
[hidden] { display: none !important; }