/* Frisbee, huisstijl Big Friends. Warm crème en koningsblauw, met het volle
   palet (mint, zand, rood) in vlakken en blokjes. Le Brond als display-letter
   voor koppen, titels en grote getallen; Montserrat als werkletter. Vierkante,
   sportieve vormen. Fonts worden zelf gehost: geen verzoeken naar derden. */

@font-face {
  font-family: 'Le Brond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/statisch/fonts/lebrond.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/statisch/fonts/montserrat.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('/statisch/fonts/montserrat-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/statisch/fonts/dmsans.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/statisch/fonts/dmsans-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/statisch/fonts/fraunces.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/statisch/fonts/fraunces-italic.woff2') format('woff2');
}

:root {
  --bf-blue: #203A85;
  --bf-blue-tint: rgba(32, 58, 133, 0.15);
  --bf-blue-soft: rgba(32, 58, 133, 0.06);
  --bg: #F7F4ED;
  --ink: #14213D;
  --muted: #5A6789;
  --bf-mint: #B8E0E0;
  --bf-mint-bg: #D5EDED;
  --bf-red: #F02048;
  --bf-red-soft: rgba(240, 32, 72, 0.10);
  --bf-sand: #E8D098;
  --bf-sand-bg: #F1E4BE;

  --font-display: 'Le Brond', 'Arial Narrow', 'Oswald', sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Vierkante, sportieve vormen: kleine radii, geen ronde pillen. */
  --radius: 6px;
  --radius-sm: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--bg); }
body {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--bf-blue); }

:focus-visible {
  outline: 2px solid var(--bf-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Kop en navigatie ─────────────────────────────── */

.kop {
  border-bottom: 1px solid var(--bf-blue-tint);
  padding: 14px 0 0;
}
/* Zelfde kader als de inhoud, zodat het menu (Dashboard) links uitlijnt
   met de paginatitels eronder. */
.kop-binnen {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 28px;
}
/* Bovenste rij loopt de kantlijn in: het woordmerk staat bewust links
   buiten het inhoudskader, alleen het menu lijnt uit met de inhoud. */
.kop-boven {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 28px;
}
.woordmerk {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--bf-blue);
  text-decoration: none;
}
/* Domeinbalk: het bovenste navigatieniveau (CRM / Intern / Finance),
   prominenter dan de itembalk eronder. */
.kop-domeinen { display: flex; gap: 22px; margin-top: 8px; }
.kop-domeinen a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 16px;
  padding: 6px 0 10px;
}
.kop-domeinen a[aria-current='page'] {
  color: var(--bf-blue);
  border-bottom: 2px solid var(--bf-blue);
}
/* Itembalk: de onderdelen van het actieve domein, bewust subtieler. */
.kop-items { display: flex; gap: 20px; margin-top: 2px; }
.kop-items a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
  padding: 4px 0 8px;
}
.kop-items a[aria-current='page'] {
  color: var(--bf-blue);
  font-weight: 600;
  border-bottom: 2px solid var(--bf-blue);
}
/* Teller op een tabblad (bijv. ongelezen logboekregels), in Big Friends-rood.
   Bij nul ongelezen regels is er niets te zien: [hidden] wint expliciet van
   display, anders toont de klasse een leeg rood pilletje. */
.nav-teller[hidden] {
  display: none;
}
.nav-teller {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--bf-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  vertical-align: 2px;
}
.kop-rechts {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kop-gebruiker { font-size: 14px; color: var(--muted); text-align: right; line-height: 1.3; }
.kop-gebruiker strong { display: block; color: var(--ink); font-weight: 600; }

/* ── Hoofdinhoud ──────────────────────────────────── */

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 28px 90px;
}
main.smal { max-width: 440px; padding-top: 8vh; }
main.aanmeld { max-width: 680px; padding-top: 6vh; } /* publieke aanmeldformulieren: compact maar niet mobiel-smal */
/* Groepskoppen in het vervolgformulier (aanmelding / gegevens kind / jouw gegevens). */
.aanmeld .formulier-kop {
  font-size: 16px;
  margin: 28px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--bf-blue-tint);
}
.aanmeld .formulier-kop:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* Op desktop mogen de publieke aanmeldformulieren breder en met grotere
   tekst; mobiel blijft de compacte maat. */
@media (min-width: 760px) {
  main.aanmeld { max-width: 840px; font-size: 17px; }
  .aanmeld label,
  .aanmeld legend { font-size: 15px; }
  .aanmeld .formulier-kop { font-size: 19px; }
}
main.breed { max-width: 1240px; } /* lijsten met veel kolommen (matchbudgetten) */
main.portaal { max-width: 880px; } /* screeningsportaal: breed genoeg voor alle vijf tabbladen op één regel */

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 42px;
  line-height: 0.98;
  letter-spacing: 0.005em;
  color: var(--bf-blue);
  margin-bottom: 8px;
}
.onder-titel { color: var(--muted); margin-bottom: 36px; max-width: 65ch; }

h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bf-blue);
  margin: 46px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Sportief blokje als sectiemarkering, in het rood. Uitgelijnd op het
   optische midden van de kapitalen (Le Brond zit iets hoog in de regel). */
h2::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  background: var(--bf-red);
  flex-shrink: 0;
}
/* Losse inline-tekst in een h2 (bijv. datumbereik) niet in kapitalen. */
h2 .stil { font-family: var(--font-body); }

p { max-width: 65ch; }

/* ── Vlak (formulierkaart) ─────────────────────────── */

.vlak {
  background: #fff;
  border: 2px solid var(--bf-blue-tint);
  border-radius: var(--radius);
  padding: 34px 32px;
}
main.smal .vlak { margin-top: 18px; }
main.smal h1 { text-align: left; }

/* ── Formulieren ──────────────────────────────────── */

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}
.veld { margin-bottom: 18px; }
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='tel'],
input[type='date'],
input[type='time'],
select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--bf-blue-tint);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
input:focus, select:focus { border-color: var(--bf-blue); }

input.code {
  font-size: 26px;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Instelpagina inlogcode-app (TOTP) */
.totp-stappen { padding-left: 20px; margin: 0 0 16px; }
.totp-stappen li { margin-bottom: 8px; }
.totp-qr { width: 200px; max-width: 100%; margin: 0 auto 16px; background: #fff; }
.totp-qr svg { display: block; width: 100%; height: auto; }
.totp-handmatig { margin-bottom: 18px; }
.totp-handmatig summary { cursor: pointer; font-size: 14px; color: var(--bf-blue); }
.totp-geheim { font-size: 16px; letter-spacing: 0.05em; word-break: break-all; user-select: all; }

.knop {
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--bf-blue);
  border: 1px solid var(--bf-blue);
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  cursor: pointer;
}
.knop:hover { background: #1a3070; }
.knop-stil {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--bf-blue);
  background: transparent;
  border: 1px solid var(--bf-blue-tint);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
}
.knop-stil:hover { background: var(--bf-blue-soft); }
/* Onomkeerbare actie (definitief verwijderen, AVG). Bewust ingetogen en pas
   zichtbaar in de uitgeklapte gevaar-zone, zodat het niet per ongeluk gebeurt. */
.gevaar-zone { border: 1px solid #d9534f; border-radius: var(--radius-sm); padding: 10px 14px; }
.gevaar-zone > summary { color: #b02a25; font-weight: 700; cursor: pointer; }
.knop-gevaar {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #c0392b;
  border: 1px solid #a93226;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
}
.knop-gevaar:hover { background: #a93226; }
.knop-tekst {
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

.formulier-voet { margin-top: 24px; display: flex; align-items: center; gap: 16px; }

/* ── Meldingen ────────────────────────────────────── */

.melding {
  background: var(--bf-mint);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 22px;
  font-size: 15px;
  font-weight: 500;
}
.fout {
  background: #fff;
  border: 2px solid rgba(240, 32, 72, 0.4);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 22px;
  font-size: 15px;
  font-weight: 500;
}
.fout::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bf-red);
  margin-right: 10px;
  vertical-align: 1px;
}
/* Voortgangsindicator vóór elk screeningsonderdeel op het dossier. */
.screen-vink {
  display: inline-block;
  min-width: 18px;
  color: rgba(20, 33, 61, 0.35);
  font-weight: 700;
}
.screen-vink.af {
  color: #1a7f37;
}
/* Bij screeningsonderdelen staat het vinkje helemaal vooraan; het
   uitklap-pijltje komt erna als eigen element (native marker uit). */
.uitklap > summary:has(.screen-vink) { list-style: none; }
.uitklap > summary:has(.screen-vink)::-webkit-details-marker { display: none; }
.uitklap-pijl { display: inline-block; margin-right: 7px; color: var(--ink); }
.uitklap-pijl::before { content: '▸'; display: inline-block; transition: transform 0.12s ease-out; }
details[open] > summary .uitklap-pijl::before { transform: rotate(90deg); }

/* Veldmarkering bij live-validatie: rood zodra je een fout veld verlaat. */
input.ongeldig,
select.ongeldig,
textarea.ongeldig {
  border-color: var(--bf-red);
  background: rgba(240, 32, 72, 0.04);
}

/* ── Tabellen ─────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--bf-blue-tint);
  white-space: nowrap;
}
td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--bf-blue-soft);
  vertical-align: middle;
}
td form { display: inline-flex; gap: 8px; align-items: center; }

.stil { color: var(--muted); font-size: 14px; }
.etiket {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bf-blue-soft);
  color: var(--bf-blue);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
}

/* ── Dashboard ────────────────────────────────────── */

.overzicht-regel {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  align-items: baseline;
  margin: 26px 0 8px;
}
.groot-getal {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 60px;
  letter-spacing: 0;
  color: var(--bf-blue);
  line-height: 0.9;
  margin-right: 4px;
}
.activiteit { list-style: none; }
.activiteit li {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bf-blue-soft);
  font-size: 15px;
}
.activiteit time { color: var(--muted); white-space: nowrap; font-size: 14px; }
/* Gestapelde tijdlijn (dossier en match): kopregel met tijd, soort en wie,
   daaronder de tekst over de volle breedte — geen smalle tekstkolom meer. */
.activiteit.gestapeld li { display: block; padding: 10px 0; }
.activiteit.gestapeld .regel-kop { color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.activiteit.gestapeld .regel-tekst { max-width: 72ch; white-space: pre-line; }

/* OPGELET-lijst op het dashboard: rood-getinte blokken die opvallen zonder te
   schreeuwen. Vrijwilligers die matchen terwijl de screening nog niet af is. */
.opgelet-lijst { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.opgelet-lijst li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 16px;
  background: var(--bf-red-soft);
  border: 1px solid rgba(240, 32, 72, 0.35);
  border-radius: var(--radius);
}
.opgelet-lijst a { font-weight: 700; text-decoration: none; color: var(--bf-blue); }
.opgelet-lijst a:hover { text-decoration: underline; }

/* ── Vrijwilligersovereenkomst: leesblok en handtekening ─────────────── */
.top-meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bf-blue);
  margin-bottom: 8px;
}
.overeenkomst-inhoud {
  max-height: 60vh;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
}
/* Korte verklaringen (toestemmingsformulier) lopen gewoon door in de pagina:
   een scrollvak verstopt anders het mediadeel vlak boven de mediakeuze. */
.overeenkomst-inhoud.doorlopend { max-height: none; overflow: visible; }
.overeenkomst-inhoud > :first-child { margin-top: 0; }
.overeenkomst-inhoud p { max-width: none; margin-bottom: 10px; }
.overeenkomst-inhoud h1, .overeenkomst-inhoud h2, .overeenkomst-inhoud h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--bf-blue);
  letter-spacing: 0.01em;
  margin: 18px 0 8px;
  display: block;
}
.overeenkomst-inhoud h1 { font-size: 22px; }
.overeenkomst-inhoud h2 { font-size: 18px; }
.overeenkomst-inhoud h3 { font-size: 15px; text-transform: none; }
.overeenkomst-inhoud h1::before, .overeenkomst-inhoud h2::before, .overeenkomst-inhoud h3::before { content: none; }
.overeenkomst-inhoud ul { margin: 8px 0; padding-left: 1.9em; list-style: none; }
/* De nummering (Artikel 1., a., i.) staat als tekst in het lijstitem zelf
   (server-side berekend), dus de eigen opsommingstekens verbergen we. */
.overeenkomst-inhoud ol { margin: 8px 0; padding-left: 1.9em; list-style: none; }
.overeenkomst-inhoud ol ol { margin: 4px 0; }
.overeenkomst-inhoud li { margin: 6px 0; }
/* Ademruimte tussen de hoofd-items (artikelen/overwegingen/ondergetekenden):
   een uniforme 'enter' via padding — dat collapst niet en blijft dus gelijk
   over de losse <ol>-blokken die mammoth per tussenzin aanmaakt. Sub-items
   (a., i.) houden hun krappe onderlinge afstand. */
.overeenkomst-inhoud > ol { margin: 0; }
.overeenkomst-inhoud > ol > li { margin: 0; padding-top: 18px; }
/* Sectie-inleidingen (Overwegingen:, Komen overeen als volgt:) die ná een lijst
   komen ademruimte erboven geven — anders plakken ze tegen het vorige item. */
.overeenkomst-inhoud ol + p, .overeenkomst-inhoud ul + p { margin-top: 18px; }
.overeenkomst-inhoud img { max-width: 180px; height: auto; }
/* Briefhoofd-logo uit het Word-document netjes rechtsboven. */
.overeenkomst-inhoud .contract-logo { float: right; max-width: 150px; margin: 0 0 12px 20px; }
/* Ondertekenblok: Word levert dit als tabel (vrijwilliger | organisatie). De
   generieke tabelstijl (celranden, volle breedte, mobiel stapelen) hoort daar
   niet — cellen naast elkaar, bovenaan uitgelijnd, zonder randen. */
.overeenkomst-inhoud table { width: auto; margin: 12px 0; display: table; }
.overeenkomst-inhoud tr { display: table-row; }
.overeenkomst-inhoud td { display: table-cell; border: none; padding: 0 40px 0 0; vertical-align: top; }
/* De vrijwilligerskolom ruim houden zodat de organisatie-kolom (naam +
   handtekening) een stuk naar rechts staat en er ademruimte tussen zit. */
.overeenkomst-inhoud td:first-child { min-width: 240px; padding-right: 100px; }
.overeenkomst-inhoud td:last-child { padding-right: 0; }
.handtekening-plek { color: var(--muted); font-style: italic; }

.handtekening-vak {
  position: relative;
  height: 170px;
  background: #fff;
  border: 2px dashed var(--bf-blue-tint);
  border-radius: var(--radius);
  touch-action: none;
}
#handtekening-canvas { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.handtekening-lijn {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 42px;
  border-bottom: 1px solid var(--bf-blue-tint);
  pointer-events: none;
}

/* ── Mobiel ───────────────────────────────────────── */

@media (max-width: 720px) {
  .kop { padding: 12px 0 0; }
  .kop-binnen { padding: 0 18px; }
  .kop-boven { padding: 0 18px; }
  .kop-boven { flex-wrap: wrap; gap: 10px 16px; }
  .kop-rechts { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  .kop-domeinen { flex-wrap: wrap; gap: 4px 16px; }
  .kop-items { flex-wrap: wrap; gap: 4px 16px; }
  main { padding: 28px 18px 70px; }
  h1 { font-size: 32px; }
  .vlak { padding: 26px 20px; }
  table, thead, tbody, tr { display: block; }
  thead { display: none; }
  td { display: block; border: none; padding: 3px 0; }
  tr { border-bottom: 1px solid var(--bf-blue-tint); padding: 12px 0; }
}

/* ── CRM (fase 1) ─────────────────────────────────── */

.filterbalk {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.filterbalk form { display: flex; gap: 10px; flex-wrap: wrap; }
.filterbalk input[type='text'], .filterbalk select { width: auto; min-width: 170px; }

.kolommen {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px 56px;
  align-items: start;
}
@media (max-width: 860px) {
  .kolommen { grid-template-columns: 1fr; }
}

dl.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; font-size: 15px; }
dl.gegevens dt { color: var(--muted); }
dl.gegevens dd { margin: 0; }

.uitklap { margin: 16px 0; }
.uitklap summary {
  cursor: pointer;
  color: var(--bf-blue);
  font-size: 14px;
  font-weight: 500;
  padding: 4px 0;
}
.uitklap form { margin-top: 14px; padding: 18px; background: var(--bf-blue-soft); border-radius: var(--radius); }

/* Twee gelijkwaardige acties naast elkaar (bijvoorbeeld Excel en PDF). */
.knoppenrij { display: flex; flex-wrap: wrap; gap: 10px; }

/* Bewerk- en foto-acties direct onder de gegevens: knop-achtige toggles,
   die opengeklapt de hele kolombreedte pakken zodat het formulier ruim staat. */
.profiel-acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 10px 0 6px; }
.profiel-acties .acties-uitklap { margin: 0; }
.profiel-acties summary {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--bf-blue);
  background: var(--bf-blue-soft);
  border: 1px solid var(--bf-blue-tint);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  list-style: none;
}
.profiel-acties summary::-webkit-details-marker { display: none; }
.profiel-acties summary:hover { border-color: var(--bf-blue); }
.profiel-acties .acties-uitklap[open] { flex: 1 1 100%; }
.profiel-acties .acties-uitklap[open] summary {
  background: var(--bf-blue);
  color: #fff;
  border-color: var(--bf-blue);
  margin-bottom: 14px;
}

.veld-rij { display: flex; gap: 12px; }
.veld-rij .veld { flex: 1; }
/* Op smalle schermen onder elkaar (bijv. geboorteplaats en geboorteland). */
@media (max-width: 560px) {
  .veld-rij { flex-direction: column; gap: 0; }
  .veld-rij .veld { max-width: none !important; }
}

.keuzerij { border: none; }
/* Een <legend> plakt standaard tegen de bovenrand van de fieldset, buiten de
   kaartpadding. Float haalt hem de normale flow in, netjes binnen het kader. */
.keuzerij > legend { float: left; width: 100%; }
.keuzerij legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
/* De uitleg volledig laten uitlopen (niet op 65ch afbreken zoals gewone p's). */
.keuzerij p { max-width: none; }
.keuze { display: flex; clear: both; gap: 8px; align-items: center; font-weight: 400; font-size: 15px; margin-bottom: 6px; }
.keuze input { width: auto; }

.notitie-formulier { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; align-items: flex-start; }
.notitie-formulier textarea { width: 100%; resize: vertical; overflow: hidden; }

/* Handmatige tijdlijn-acties: de naam van de medewerker in het rood, zodat
   ze in één oogopslag te onderscheiden zijn van automatische systeemstappen. */
.tijdlijn-door { color: var(--bf-red); font-weight: 600; font-size: 13px; }

a.knop, a.knop-stil { text-decoration: none; display: inline-block; }

/* Sorteerbare kolomkoppen (lijst.js) */
th .sorteer-knop {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
th[aria-sort] .sorteer-knop { color: var(--bf-blue); }
th[aria-sort='ascending'] .sorteer-knop::after { content: ' \2191'; }
th[aria-sort='descending'] .sorteer-knop::after { content: ' \2193'; }

/* Profielkop met foto of initialen */
.profiel-kop { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--bf-blue-tint);
  flex-shrink: 0;
}
.avatar-initialen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bf-blue-soft);
  color: var(--bf-blue);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
}
.profiel-kop h1 { margin-bottom: 2px; }
.kaart-knop { margin-left: auto; align-self: flex-start; white-space: nowrap; }

/* Kolomkop-filters (lijst.js): pijltje met aanvinkbare opties */
th { position: relative; }
.filter-knop {
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  margin-left: 4px;
}
.filter-knop.actief { color: var(--bf-red); }
.filter-popover[hidden] { display: none; }
.filter-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--bf-blue-tint);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(20, 33, 61, 0.1);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}
.filter-popover label {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  white-space: nowrap;
}
.filter-popover input[type='checkbox'] { width: auto; }
.filter-popover .bereik { display: flex; gap: 10px; }
.filter-popover .bereik label { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-weight: 600; font-size: 12px; }
.filter-popover .bereik input { width: 76px; padding: 6px 8px; }
.filter-popover .knop-tekst { align-self: flex-start; padding: 0; }

/* Exportblok: kolomkeuze in een compacte kolommenlijst */
.export-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 18px;
  max-width: 640px;
}

/* KPI-blokken op het dashboard: sportieve vierkante vlakken die het palet
   door de funnel heen laten oplopen (neutraal → mint → zand → vol blauw). */
.kpi-regel { display: flex; flex-wrap: wrap; gap: 12px; }
.kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--bf-blue-tint);
  border-radius: var(--radius);
  padding: 16px 20px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  transition: transform 0.08s ease, border-color 0.08s ease;
}
.kpi:hover { border-color: var(--bf-blue); transform: translateY(-2px); }
.kpi-getal {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: 0;
  color: var(--bf-blue);
  line-height: 0.9;
}
/* Palet-progressie per funnel-stap. */
.kpi-regel .kpi:nth-child(2) { background: var(--bf-mint-bg); border-color: var(--bf-mint); }
.kpi-regel .kpi:nth-child(3) { background: var(--bf-sand-bg); border-color: var(--bf-sand); }
.kpi-regel .kpi:nth-child(4) { background: var(--bf-blue); border-color: var(--bf-blue); color: #fff; }
.kpi-regel .kpi:nth-child(4) .kpi-getal { color: #fff; }
.kpi-regel .kpi:nth-child(2):hover,
.kpi-regel .kpi:nth-child(3):hover { border-color: var(--bf-blue); }
.kpi-regel .kpi:nth-child(4):hover { background: #1a3070; border-color: #1a3070; }

/* Matches-funnel: begeleid (wit) — actief (donkerblauw) — prematch (lichtblauw) — matchvoorstel (beige). */
.kpi-regel.kpi-matches .kpi:nth-child(2) { background: var(--bf-blue); border-color: var(--bf-blue); color: #fff; }
.kpi-regel.kpi-matches .kpi:nth-child(2) .kpi-getal { color: #fff; }
.kpi-regel.kpi-matches .kpi:nth-child(2):hover { background: #1a3070; border-color: #1a3070; }
.kpi-regel.kpi-matches .kpi:nth-child(3) { background: #DCE5F7; border-color: #B9C7EE; color: var(--ink); }
.kpi-regel.kpi-matches .kpi:nth-child(3) .kpi-getal { color: var(--bf-blue); }
.kpi-regel.kpi-matches .kpi:nth-child(3):hover { border-color: var(--bf-blue); }
.kpi-regel.kpi-matches .kpi:nth-child(4) { background: var(--bf-sand-bg); border-color: var(--bf-sand); color: var(--ink); }
.kpi-regel.kpi-matches .kpi:nth-child(4) .kpi-getal { color: var(--bf-blue); }
.kpi-regel.kpi-matches .kpi:nth-child(4):hover { background: var(--bf-sand-bg); border-color: var(--bf-blue); }

.etiket-attentie { background: var(--bf-red-soft); color: #a3122f; }
/* Nog te doen, maar niet alarmerend: aan te vragen, nog te dekken. */
.etiket-zand { background: var(--bf-sand-bg); color: #6B5414; }
/* Binnen: toegekend en ontvangen in het dekkingsplan. */
.etiket-groen { background: rgba(62, 142, 90, 0.16); color: #2A6B41; }
/* Nog niet eerder gezien in het logboek (verdwijnt na dit bezoek). */
.etiket-nieuw { background: var(--bf-red); color: #fff; }

/* Statuskleuren: het palet codeert de plek in de funnel. Basis (e-mail
   ingevuld, aangemeld, matchvoorstel, pre-match) blijft rustig blauw. */
.etiket-in_screening   { background: var(--bf-sand-bg); color: #7a5a12; }
.etiket-ready_to_match { background: var(--bf-mint-bg); color: #12545a; }
.etiket-big_bunch      { background: var(--bf-mint-bg); color: #12545a; }
.etiket-match          { background: var(--bf-blue); color: #fff; }
.etiket-dematch,
.etiket-teruggetrokken,
.etiket-doorverwezen,
.etiket-afgewezen      { background: var(--bf-red-soft); color: #a3122f; }
textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--bf-blue-tint);
  border-radius: 9px;
  padding: 10px 12px;
}

/* Compacte lijstrijen */
.knop-compact { white-space: nowrap; padding: 3px 10px; font-size: 13px; }
table[data-lijst] td { padding-top: 8px; padding-bottom: 8px; }

/* Matches: hele rij klikbaar (naar de match), naamkolommen krap met afbreken,
   startdatum op één regel zodat er meer rijen in beeld passen. */
.matches-tabel tbody tr[data-href] { cursor: pointer; }
.matches-tabel tbody tr[data-href]:hover { background: var(--bf-blue-soft); }
.matches-tabel .match-datum { white-space: nowrap; }
.matches-tabel .match-naam { max-width: 13ch; }
.matches-tabel .match-naam a { white-space: normal; overflow-wrap: anywhere; }

/* Big Friends-logo in de kop (bewust in de kantlijn) */
.logo-link { display: block; }
.logo { height: 48px; width: auto; display: block; }

/* Referentenformulier: een omkaderd blok per referent */
.referent-blok { border: 1px solid var(--bf-blue-soft); border-radius: var(--radius); padding: 14px 16px 4px; margin-bottom: 16px; }
.referent-blok > legend { font-weight: 600; padding: 0 6px; }

/* Plan-rij voor evaluaties: drie gelijke regelaars naast elkaar */
.plan-rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin-top: 12px; }
.plan-rij select, .plan-rij input { width: auto; }
.plan-rij .knop-stil { padding: 10px 16px; }

/* Takenlijst: datum links, daarnaast de taak met naam en soort eronder */
.taken-lijst li {
  display: grid;
  grid-template-columns: 10.5em 1fr;
  gap: 4px 16px;
  align-items: baseline;
}
.taken-lijst .taak-body { display: flex; flex-direction: column; gap: 1px; }
.taken-lijst .taak-actie { font-weight: 600; }
.taken-lijst .taak-meta { font-size: 13px; color: var(--muted); }
.taken-lijst time { white-space: normal; }
@media (max-width: 720px) {
  .taken-lijst li { grid-template-columns: 1fr; gap: 2px; }
}

/* Screeningsportaal: tabbladen met een vinkje per afgerond onderdeel */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid var(--bf-blue-soft); padding-bottom: 0; }
.tab {
  display: inline-block;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border: 2px solid transparent;
  border-bottom: none;
  margin-bottom: -2px;
}
.tab:hover { color: var(--bf-blue); }
.tab[aria-current='page'] {
  color: var(--bf-blue);
  background: var(--paper, #fff);
  border-color: var(--bf-blue-soft);
  border-bottom: 2px solid var(--paper, #fff);
}
.tab-vink { color: #1a7f37; font-weight: 700; }
@media (max-width: 720px) {
  .tabs { border-bottom: none; }
  .tab { border: 2px solid var(--bf-blue-soft); margin-bottom: 0; }
  .tab[aria-current='page'] { border-color: var(--bf-blue); }
}

/* Witruimte: een sectiekop die bovenaan een wit vlak staat krijgt geen extra
   marge (de kaart heeft al padding). */
.vlak > h2:first-child { margin-top: 0; }

/* Referenten stap voor stap in het portaal: elk blok is een inklapbare details */
details.referent-blok { padding: 14px 16px; }
details.referent-blok > summary { font-weight: 600; cursor: pointer; }
details.referent-blok > summary .referent-samenvatting { font-weight: 400; margin-left: 4px; }

/* Kopieerknopje achter een waarde die naar het bankscherm moet (naam, IBAN).
   Wordt door kopieer.js toegevoegd; blijft subtiel tot je erover gaat. */
.kopieer-knop {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: 6px;
  border-radius: 4px;
  opacity: 0.55;
}
.kopieer-knop:hover, .kopieer-knop:focus-visible { opacity: 1; background: var(--bf-blue-soft); }
.kopieer-knop.gelukt { opacity: 1; color: #1a7f37; }

/* ── Begroting en dekkingsplan ────────────────────── */

/* Strakke financiële tabel, geënt op het Excel-dekkingsplan van Big Friends:
   witte ondergrond met een kader, categoriebanden in het palet, ingesprongen
   omschrijvingen, rechts uitgelijnde bedragkolommen met een eigen lijn, vette
   subtotalen per categorie en een geaccentueerde totaalregel onderaan. */
.plan-tabel {
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--bf-blue-tint);
}
.plan-tabel th, .plan-tabel td { padding: 7px 12px; }
.plan-tabel th { letter-spacing: 0.08em; border-bottom: 1px solid var(--bf-blue-tint); }
.plan-tabel td { border-bottom: 1px solid var(--bf-blue-soft); }
.plan-tabel .bedrag {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 118px;
  border-left: 1px solid var(--bf-blue-soft);
}
.plan-tabel .plan-naam { padding-left: 30px; }
/* Gevers onder een verzamelrij (Bedrijven, Particulieren): een stap verder
   ingesprongen en gedempt, zodat de rij zelf de hoofdregel blijft. */
.plan-tabel .plan-gever td { color: var(--muted); font-size: 14px; padding-top: 4px; padding-bottom: 4px; }
.plan-tabel .plan-gever .plan-naam { padding-left: 52px; }
.plan-band td {
  font-weight: 700;
  background: var(--bf-blue-soft);
  border-bottom: 1px solid var(--bf-blue-tint);
  padding-top: 6px;
  padding-bottom: 6px;
}
/* Dekkingscategorieën: subsidie zand, fondsen, goede doelen en giften
   blauw. Alles als zachte tint zodat de tabel rustig blijft. */
.plan-band-subsidie td { background: var(--bf-sand-bg); }
.plan-band-fonds td, .plan-band-goededoel td, .plan-band-gift td { background: #DCE5F7; }
.plan-subtotaal td { font-weight: 700; border-top: 1px solid var(--bf-blue-tint); }
/* De begroting (kostenkant): categoriebanden blauw, subtotalen en het
   totaal zonder vlak. */
.plan-begroting .plan-band td { background: #DCE5F7; }
.plan-begroting .plan-totaal td { background: none; }
.plan-totaal td {
  font-weight: 700;
  font-size: 15px;
  background: var(--bf-mint-bg);
  border-top: 2px solid var(--bf-blue);
}
/* Actiekolom: potloodje en kruisje, subtiel tot je erover gaat. */
.plan-tabel .acties { width: 74px; white-space: nowrap; text-align: right; }
.knop-icoon {
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 4px 6px;
  opacity: 0.6;
}
.knop-icoon:hover, .knop-icoon:focus-visible, .knop-icoon.actief { opacity: 1; color: var(--bf-blue); background: var(--bf-blue-soft); }
.knop-icoon-gevaar:hover, .knop-icoon-gevaar:focus-visible { color: #b02a25; background: var(--bf-red-soft); }
/* Afgewezen aanvragen: aparte lijst onder het dekkingsplan, gedempt zodat
   het dekkingsplan zelf de aandacht houdt. */
.plan-afgewezen td,
.plan-reserve td { color: var(--muted); }
/* Opengeklapte bewerk-rij: een rustig blauw vlak onder de rij, formulieren
   als blok in plaats van de inline-weergave die cellen normaal krijgen. */
.bewerk-rij > td { background: var(--bf-blue-soft); padding: 16px 18px; }
.bewerk-rij form { display: block; }
.bewerk-rij .status-formulier {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bf-blue-tint);
}
/* Stap-afhankelijke velden (datum, bedragen) worden door begroting.js met
   het hidden-attribuut aan- en uitgezet; dat moet ook winnen van .keuze's
   eigen display:flex. */
.status-formulier [data-stap-veld][hidden] { display: none !important; }
/* Aanvraagblok in de bewerk-rij: datum, snapshot-link en de documenten
   (projectplan, begeleidende brief) met uploadformulier. */
.aanvraag-blok {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bf-blue-tint);
}
.aanvraag-documenten { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.aanvraag-documenten li { display: flex; align-items: center; gap: 8px; }
.aanvraag-documenten form { display: inline-flex; }
.aanvraag-upload { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
@media (max-width: 720px) {
  .plan-tabel .bedrag { text-align: left; border-left: none; width: auto; }
  .plan-tabel .plan-naam { padding-left: 0; }
  .plan-tabel .plan-gever .plan-naam { padding-left: 16px; }
  .plan-tabel .acties { text-align: left; }
}

/* Compacte lijst met veel kolommen (matchbudgetten, kinderhulp): alles op één
   regel, korte datums (16-07-26) en iets krappere cellen. */
.budget-tabel { font-size: 14px; }
.budget-tabel td, .budget-tabel th { white-space: nowrap; padding-right: 6px; }
.budget-tabel th { letter-spacing: 0.06em; }
.budget-tabel .budget-naam a { white-space: nowrap; }
.budget-tabel .knop-stil { padding: 4px 10px; font-size: 13px; }
.budget-tabel .etiket { font-size: 10px; }
.budget-tabel .budget-besteding { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }

/* Logboek van een fondsaanvraag: nieuwste bovenaan, statuswissels rustiger. */
.logboek { list-style: none; margin: 18px 0 0; padding: 0; }
.logboek-regel { padding: 14px 0; border-top: 1px solid var(--bf-blue-tint); }
.logboek-regel:first-child { border-top: none; }
.logboek-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.logboek-kop .logboek-verwijder { margin-left: auto; display: inline-flex; }
.logboek-wissel { margin-top: 6px; font-size: 14px; }
.logboek-inhoud { margin-top: 6px; white-space: pre-wrap; max-width: 75ch; }
.logboek-regel .aanvraag-documenten { margin-top: 8px; font-size: 14px; }
.logboek-door { margin-top: 6px; font-size: 13px; }
.logboek-status { color: var(--muted); }