/* Inzage-omgeving. Sober en rustig: dit is een werkomgeving voor gevoelige
   meldingen, geen marketingpagina. Alleen systeemfonts, geen externe bronnen.

   Huisstijl van RITA, terughoudend toegepast. Drie keuzes die het uitleggen waard zijn:

   1. ROOD (#ed2024) is de identiteit, niet de interactiekleur. Het haalt maar 4.35:1
      contrast op wit, te weinig voor gewone tekst (AA vraagt 4.5), en in een interface
      leest rood bovendien als "fout" of "gevaar". Het zit dus in het logo en in dingen
      die echt om aandacht vragen, niet op elke knop.
   2. PAARS (#793795) is waar je op klikt: knoppen, links, focusrand, actieve navigatie.
      7.52:1 op wit en andersom, dus veilig voor tekst en knoplabels.
   3. LILA (#d2b4e1) is een rustig vlak: tabelkoppen, de statusbadge "ontvangen".
      Zwart erop haalt 11.36:1. Bewust geen lila achtergrond over het hele scherm:
      caseworkers lezen hier lange, zware verhalen.

   Voor foutmeldingen staat een iets donkerder rood (5.80:1), want het merkrood is
   daarvoor niet leesbaar genoeg. Statuskleuren (amber, groen) blijven semantisch:
   die dragen betekenis en horen niet aan de huisstijl te worden opgeofferd. */

:root {
  --paars: #793795;
  --paars-donker: #5d2a73;
  --lila: #d2b4e1;
  --lila-licht: #f4ecf8;
  --rood: #ed2024;
  --rood-tekst: #c81a1e;
  --tekst: #000000;
  --grijs: #5d5d5d;
  --rand: #dcdcdc;
  --achtergrond: #f7f7f8;
  --groen: #1e6b3a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tekst);
  background: var(--achtergrond);
}

.kop {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid var(--rand);
}

.merk { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--tekst); letter-spacing: 0.02em; }
.merk-logo { width: 22px; height: 19px; color: var(--rood); flex: none; }
.merk-sub { font-weight: 400; color: var(--grijs); }

.kop nav { display: flex; gap: 16px; }
.kop nav a { color: var(--tekst); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.kop nav a:hover { border-bottom-color: var(--rand); }
.kop nav a.actief { border-bottom-color: var(--paars); font-weight: 600; }

.uitlog { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.wie { color: var(--grijs); font-size: 13px; }
.wie em { font-style: normal; background: var(--lila); color: var(--tekst); padding: 1px 6px; border-radius: 3px; }

main { max-width: 1100px; margin: 0 auto; padding: 24px; }

h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 20px 0 6px; color: var(--grijs); text-transform: uppercase; letter-spacing: 0.04em; }

.uitleg { color: var(--grijs); margin: 0 0 20px; max-width: 70ch; }
.klein { font-size: 13px; color: var(--grijs); }
.kruimel { margin: 0 0 12px; }
.kruimel a, main a { color: var(--paars); }

.kaart {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}
.kaart.smal { max-width: 440px; margin: 60px auto; }
.kaart.geslaagd { border-color: var(--groen); }

dl { display: grid; grid-template-columns: 220px 1fr; gap: 6px 16px; margin: 0; }
dt { color: var(--grijs); }
dd { margin: 0; }

.omschrijving {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--achtergrond);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 14px;
  max-width: 80ch;
}

.tabel { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; }
.tabel th, .tabel td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabel th { background: var(--lila-licht); font-size: 13px; color: var(--tekst); font-weight: 600; }
.tabel tr:last-child td { border-bottom: none; }
.tabel .leeg { color: var(--grijs); text-align: center; padding: 24px; }
.ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--achtergrond); border: 1px solid var(--rand); }
.badge-ontvangen { background: var(--lila); border-color: #bd97d1; color: var(--tekst); }
.badge-in_behandeling { background: #fff4e0; border-color: #f0dcb0; color: #8a5a00; }
.badge-afgerond { background: #e8f4ec; border-color: #c2e0cd; color: var(--groen); }

.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.filters label, .veld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--grijs); }
input[type='text'], input[type='email'], select {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: #fff;
  color: var(--tekst);
  min-width: 200px;
}
input:focus, select:focus, button:focus { outline: 2px solid var(--paars); outline-offset: 1px; }

.knop {
  font: inherit;
  font-weight: 600;
  padding: 9px 18px;
  border: none;
  border-radius: 6px;
  background: var(--paars);
  color: #fff;
  cursor: pointer;
}
.knop:hover { background: var(--paars-donker); }
.knop:disabled { background: var(--grijs); cursor: default; }
.knop.klein-knop { padding: 7px 14px; }
.knop-link { display: inline-block; text-decoration: none; }
main a.knop-link { color: #fff; }
.knop-tekst { font: inherit; background: none; border: none; color: var(--paars); cursor: pointer; padding: 0; text-decoration: underline; }

.status { min-height: 20px; font-size: 13px; color: var(--grijs); margin: 10px 0 0; }
.status.fout, .fout { color: var(--rood-tekst); }
.waarschuwing { background: #fff4e0; border: 1px solid #f0dcb0; border-radius: 6px; padding: 10px 14px; color: #8a5a00; }

/* Waarschuwing vlak voor het automatisch uitloggen. Bewust dekkend: zodra dit
   verschijnt hoort de inhoud van het dossier niet meer leesbaar te zijn. */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.overlay[hidden] { display: none; }
.overlay .kaart { margin: 0; max-width: 420px; border-top: 4px solid var(--rood); }
.overlay .knop-tekst { margin-left: 14px; }

.paginering { display: flex; gap: 16px; align-items: center; margin: 16px 0; font-size: 14px; }
.paginering span { color: var(--grijs); }

.bijlagen, .inzage { margin: 0; padding-left: 18px; }
.bijlagen li, .inzage li { margin-bottom: 4px; }
.inzage { list-style: none; padding: 0; font-size: 13px; color: var(--grijs); }


@media (max-width: 700px) {
  dl { grid-template-columns: 1fr; }
  dt { margin-top: 8px; }
  .kop { flex-wrap: wrap; gap: 12px; }
  main { padding: 16px; }
}