:root {
  --ikn-blue-dark:  #0e7ba3;
  --ikn-blue:       #1487ab;
  --ikn-blue-light: #5fb8d9;
  --ikn-blue-pale:  #eaf6fb;

  --surface-1:      #fcfcfb;
  --page-plane:     #f4f7f8;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border-hairline: rgba(11,11,11,0.10);

  --series-1: #2a78d6; --series-2: #1baf7a; --series-3: #eda100; --series-4: #008300;
  --series-5: #4a3aa7; --series-6: #e34948; --series-7: #e87ba4; --series-8: #eb6834;

  --status-good: #0ca30c; --status-warning: #fab219; --status-serious: #ec835a; --status-critical: #d03b3b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-1: #1a1a19; --page-plane: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7;
    --text-muted: #898781; --gridline: #2c2c2a; --baseline: #383835; --border-hairline: rgba(255,255,255,0.10);
    --series-1: #3987e5; --series-2: #199e70; --series-3: #c98500; --series-4: #008300;
    --series-5: #9085e9; --series-6: #e66767; --series-7: #d55181; --series-8: #d95926;
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--page-plane); color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------- login screen ---------------- */
.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
}
.login-card {
  background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: 14px;
  padding: 32px 34px; width: 340px; box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.login-card .logo { width: 64px; height: 64px; display: block; margin: 0 auto 14px; border-radius: 50%; object-fit: cover; }
.login-card h1 { font-size: 17px; text-align: center; margin: 0 0 4px; }
.login-card .sub { font-size: 12.5px; text-align: center; color: var(--text-muted); margin-bottom: 20px; }
.login-card label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; margin-top: 12px; }
.login-card input {
  width: 100%; padding: 9px 11px; border-radius: 7px; border: 1px solid var(--border-hairline);
  background: var(--page-plane); color: var(--text-primary); font-size: 13.5px;
}
.login-card .btn.primary { width: 100%; margin-top: 18px; padding: 10px; }
.login-error { color: var(--status-critical); font-size: 12.5px; margin-top: 10px; text-align: center; }
.login-hint { font-size: 11.5px; color: var(--text-muted); text-align: center; max-width: 340px; }

/* ---------------- header / nav ---------------- */
:root { --ikn-green: #b7d436; --ikn-green-ink: #2e3a08; }
header.app-header {
  display: flex; align-items: center; gap: 16px;
  background: var(--ikn-green);
  color: var(--ikn-green-ink); padding: 14px 24px;
}
header.app-header .logo { width: 76px; height: 76px; flex: none; border-radius: 50%; object-fit: cover; }
header.app-header h1 { font-size: 28px; margin: 0; font-weight: 700; }
header.app-header .sub { font-size: 12.5px; opacity: 0.9; margin-top: 2px; }
header.app-header .spacer { flex: 1; }
header.app-header .badge { font-size: 12px; background: rgba(255,255,255,0.18); padding: 5px 10px; border-radius: 20px; }
header.app-header .user-box { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
header.app-header .user-box .role-badge { background: rgba(255,255,255,0.45); padding: 3px 9px; border-radius: 10px; font-weight: 600; }
header.app-header .user-box button { background: rgba(46,58,8,0.12); border: none; color: var(--ikn-green-ink); padding: 6px 11px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
header.app-header .user-box button:hover { background: rgba(46,58,8,0.22); }

.header-banner { background: var(--surface-1); padding: 10px 0 8px; }
.banner-tagline {
  text-align: center;
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive; font-style: italic;
  color: #d0392c; font-size: 18px; font-weight: 700;
}

nav.tabs { display: flex; gap: 2px; background: var(--surface-1); border-bottom: 1px solid var(--border-hairline); padding: 0 20px; overflow-x: auto; }
nav.tabs button { background: none; border: none; padding: 13px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
nav.tabs button:hover { color: var(--text-primary); }
nav.tabs button.active { color: var(--ikn-blue-dark); border-bottom-color: var(--ikn-blue); }

main { padding: 20px 24px 60px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* --- snelzoekvak op het overzicht --- */
.zoek-vak {
  background: var(--surface-1); border: 1px solid var(--border-hairline); border-left: 5px solid var(--ikn-blue);
  border-radius: 10px; padding: 16px 20px 14px; margin-bottom: 18px;
}
.zoek-vak .zoek-titel { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ikn-blue-dark); margin-bottom: 9px; }
.zoek-vak input {
  width: 100%; padding: 13px 16px; font-size: 15px; border-radius: 9px;
  border: 2px solid var(--ikn-blue-light); background: var(--page-plane); color: var(--text-primary);
}
.zoek-vak input:focus { outline: none; border-color: var(--ikn-blue); }
.zoek-resultaat {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; cursor: pointer;
  border-bottom: 1px solid var(--gridline); font-size: 13.5px;
}
.zoek-resultaat:hover { background: var(--ikn-blue-pale); }
.zoek-resultaat .zr-naam { font-weight: 700; min-width: 180px; }
.zoek-resultaat .zr-adres { color: var(--text-secondary); flex: 1; }
.zoek-resultaat .zr-type { color: var(--text-muted); font-size: 12px; }
.zoek-leeg { padding: 9px 10px; color: var(--text-muted); font-size: 12.5px; }
@media (prefers-color-scheme: dark) { .zoek-vak .zoek-titel { color: var(--ikn-blue-light); } .zoek-resultaat:hover { background: rgba(20,135,171,0.18); } }

/* --- notities met datumstempel --- */
.notitie-overlay { z-index: 70; }
.modal.notitie-popup {
  max-width: 1000px;
  border: 1px solid rgba(237,161,0,0.55);
  border-left: 6px solid #eda100;
  background: #fdf6e3;
  padding: 24px 30px 24px;
}
.notitie-popup .notitie { background: #fffdf5; border-color: rgba(237,161,0,0.35); padding: 10px 13px; margin-bottom: 8px; }
.notitie-popup .notitie-tekst { font-size: 13.5px; }
.notitie-tekst { white-space: pre-line; }
.notitie-popup .gift-form input { background: #fffdf5; border-color: rgba(237,161,0,0.45); }
.notitie-popup .oude-opmerking { border-bottom-color: rgba(237,161,0,0.45); }
.notitie-lijst { max-height: 60vh; overflow-y: auto; }
@media (prefers-color-scheme: dark) {
  .modal.notitie-popup { background: #26200f; border-color: rgba(224,170,48,0.4); }
  .notitie-popup .notitie { background: #2e2814; border-color: rgba(224,170,48,0.3); }
  .notitie-popup .gift-form input { background: #2e2814; border-color: rgba(224,170,48,0.4); }
}
.btn.btn-geel { background: #fab219; border: 1px solid #e09a00; color: #3d2e00; font-weight: 700; }
.btn.btn-geel:hover { background: #e09a00; }
.btn.btn-groen { background: #0ca30c; border: 1px solid #0a8f0a; color: #ffffff; font-weight: 700; }
.btn.btn-groen:hover { background: #0a8f0a; }
/* Bovenste knoppenbalk op de donateurskaart (Bewerken/Verwijderen) */
.kaart-top-acties { border-top: none; margin-top: 6px; margin-bottom: 6px; padding-top: 0; }
/* Actieknoppen onderaan de kaart, in de kleuren van de acties */
.btn.actie-set-btn { color: #ffffff; font-weight: 700; }
.btn.actie-btn-rood   { background: #d03b3b; border: 1px solid #b92f2f; }
.btn.actie-btn-rood:hover   { background: #b92f2f; }
.btn.actie-btn-oranje { background: #e8632a; border: 1px solid #cf5320; }
.btn.actie-btn-oranje:hover { background: #cf5320; }
.btn.actie-btn-geel   { background: #fab219; border: 1px solid #e09a00; color: #3d2e00; }
.btn.actie-btn-geel:hover   { background: #e09a00; }
.btn.actie-btn-groen  { background: #0ca30c; border: 1px solid #0a8f0a; }
.btn.actie-btn-groen:hover  { background: #0a8f0a; }
.btn.actie-btn-paars  { background: #6d28d9; border: 1px solid #5b21b6; }
.btn.actie-btn-paars:hover  { background: #5b21b6; }
/* actieve (aangezette) actieknop krijgt een duidelijke rand */
.btn.actie-set-btn.actief { box-shadow: 0 0 0 3px rgba(0,0,0,0.35) inset, 0 0 0 2px #232a1e; }
.afhandel-form { display: flex; gap: 6px; align-items: center; }
.afhandel-form .afh-opm { min-width: 220px; padding: 5px 8px; }
.afhandel-form .btn { font-size: 12px; padding: 5px 10px; }
.pc-hint { font-size: 11px; color: var(--text-muted); margin-top: 3px; min-height: 13px; }
.result-count-groot { font-size: 15px; font-weight: 800; color: var(--ikn-blue-dark); background: var(--ikn-blue-pale); padding: 6px 14px; border-radius: 8px; }
@media (prefers-color-scheme: dark) { .result-count-groot { color: var(--ikn-blue-light); background: rgba(20,135,171,0.14); } }
.archief-banner { background: #d03b3b; border: 1px solid #a02a2a; border-radius: 9px; padding: 14px 18px; margin-bottom: 16px; font-size: 13.5px; color: #ffffff; font-weight: 600; box-shadow: 0 2px 8px rgba(208,59,59,0.35); }
.archief-banner strong { color: #ffffff; }
@media (prefers-color-scheme: dark) { .archief-banner { background: #c23636; border-color: #e66767; color: #ffffff; } }

/* Gearchiveerde donateur: de hele kaart krijgt een opvallend rood kader zodat direct zichtbaar is dat dit oud/gearchiveerd is. */
.modal.kaart-gearchiveerd { border: 3px solid #d03b3b; box-shadow: 0 0 0 4px rgba(208,59,59,0.15); }
.modal.kaart-gearchiveerd .kaart-kop h3 { color: #a02a2a; }
@media (prefers-color-scheme: dark) { .modal.kaart-gearchiveerd .kaart-kop h3 { color: #e66767; } }

/* Gearchiveerde rijen in de donateurslijst vallen rood op. */
table.data-table tbody tr.rij-gearchiveerd { background: rgba(208,59,59,0.08); }
table.data-table tbody tr.rij-gearchiveerd:hover { background: rgba(208,59,59,0.16); }
table.data-table tbody tr.rij-gearchiveerd td:first-child { box-shadow: inset 3px 0 0 #d03b3b; }

/* Gearchiveerde donateurkaart in de kaartweergave krijgt hetzelfde rode kader. */
.donor-card.kaart-gearchiveerd { border: 2px solid #d03b3b; background: rgba(208,59,59,0.05); }

/* --- filterbalk Donateurs --- */
.filter-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 10px 12px; background: var(--ikn-blue-pale); border: 1px solid var(--border-hairline); border-radius: 9px; }
.filter-balk .filter-label { font-size: 12.5px; font-weight: 700; color: var(--ikn-blue-dark); }
.filter-balk select, .filter-balk input { padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border-hairline); background: var(--surface-1); color: var(--text-primary); font-size: 12.5px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--ikn-blue); color: #fff; font-size: 12px; padding: 4px 6px 4px 10px; border-radius: 14px; }
.filter-chip strong { font-weight: 700; }
.filter-chip .chip-x { background: rgba(255,255,255,0.25); border: none; color: #fff; width: 17px; height: 17px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.filter-chip .chip-x:hover { background: rgba(255,255,255,0.45); }
@media (prefers-color-scheme: dark) { .filter-balk { background: rgba(20,135,171,0.12); } .filter-balk .filter-label { color: var(--ikn-blue-light); } }

.strato-rij { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--gridline); }
.strato-rij .strato-naam { font-weight: 700; min-width: 160px; }
.strato-rij .n { flex: 1; }
.strato-select { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-hairline); background: var(--surface-1); color: var(--text-primary); font-size: 12.5px; }
.machtiging-select { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-hairline); background: var(--surface-1); color: var(--text-primary); font-size: 12.5px; font-weight: 600; }
.machtiging-select.active { background: #0ca30c; border-color: #0ca30c; color: #fff; }
.adres-suggesties {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 80;
  background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); max-height: 230px; overflow-y: auto; margin-top: 2px;
}
.adres-sug { padding: 8px 12px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--gridline); }
.adres-sug:last-child { border-bottom: none; }
.adres-sug:hover { background: var(--ikn-blue-pale); }
@media (prefers-color-scheme: dark) { .adres-sug:hover { background: rgba(20,135,171,0.2); } }
.oude-opmerking { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--gridline); }
.notitie { padding: 8px 10px; border-radius: 8px; background: var(--surface-1); border: 1px solid var(--border-hairline); margin-bottom: 6px; }
.notitie-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; font-size: 11.5px; }
.notitie-stempel { font-weight: 800; color: #9a6a00; }
.notitie-kop .notitie-del { margin-left: auto; }
.notitie-tekst { font-size: 13px; }
@media (prefers-color-scheme: dark) { .notitie-stempel { color: #e0aa30; } }

/* --- groen invoervak op het overzicht --- */
.invoer-vak {
  background: rgba(12,163,12,0.08); border: 1px solid rgba(12,163,12,0.45); border-left: 5px solid #0ca30c;
  border-radius: 10px; padding: 16px 20px 14px; margin-bottom: 18px; cursor: pointer; color: #0d6b0d;
  user-select: none;
}
.invoer-vak:hover { background: rgba(12,163,12,0.16); }
.invoer-vak .zoek-titel { color: #0d6b0d; }
.invoer-vak .invoer-tekst { font-size: 14.5px; font-weight: 600; }
@media (prefers-color-scheme: dark) { .invoer-vak { color: #3fc492; background: rgba(63,196,146,0.10); } .invoer-vak .zoek-titel { color: #3fc492; } }

/* --- brede actielijst-balk op het overzicht --- */
.actie-balk {
  background: rgba(208,59,59,0.16); border: 1px solid rgba(208,59,59,0.45); border-left: 5px solid #d03b3b;
  border-radius: 10px; padding: 16px 20px 14px; margin-bottom: 18px; cursor: pointer;
  color: #a02a2a;
}
.actie-balk .zoek-titel { color: #a02a2a; }
.actie-balk:hover { background: rgba(208,59,59,0.24); }
.actie-balk .actie-balk-tekst { font-size: 14.5px; font-weight: 600; color: #a02a2a; }
.actie-balk.leeg { background: var(--surface-1); border-color: var(--border-hairline); border-left-color: var(--baseline); color: var(--text-muted); box-shadow: none; }
.actie-balk.leeg .zoek-titel, .actie-balk.leeg .actie-balk-tekst { color: var(--text-muted); }
.actie-balk.leeg:hover { background: var(--surface-1); cursor: default; }
@media (prefers-color-scheme: dark) { .actie-balk { color: #e66767; background: rgba(230,103,103,0.14); border-color: rgba(230,103,103,0.4); } .actie-balk .zoek-titel, .actie-balk .actie-balk-tekst { color: #e66767; } }

/* --- dubbele records-balk op de actielijst --- */
.dubbel-balk {
  background: rgba(250,178,25,0.10); border: 1px solid rgba(250,178,25,0.5); border-left: 5px solid #fab219;
  border-radius: 10px; padding: 13px 18px; margin-bottom: 14px; cursor: pointer;
  color: #8a5e00; font-size: 13.5px;
}
.dubbel-balk:hover { background: rgba(250,178,25,0.2); }
@media (prefers-color-scheme: dark) { .dubbel-balk { color: #fab219; } }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat-tile { background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: 10px; padding: 14px 16px; }
.stat-tile .label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.stat-tile .value { font-size: 26px; font-weight: 700; color: var(--text-primary); }
.stat-tile .value.warn { color: var(--status-serious); }
.stat-tile .value.crit { color: var(--status-critical); }
.stat-tile .foot { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

.card { background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.card h2 { font-size: 15px; margin: 0 0 14px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card h2 .n { color: var(--text-muted); font-weight: 500; font-size: 12.5px; }
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .card-grid { grid-template-columns: 1fr; } }

.bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 12.5px; }
.bar-row .name { width: 150px; flex: none; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .track { flex: 1; background: var(--gridline); height: 18px; border-radius: 4px; position: relative; }
.bar-row .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; min-width: 3px; }
.bar-row .val { width: 64px; flex: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 600; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.toolbar input[type=text], .toolbar input[type=password], .toolbar select {
  padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border-hairline);
  background: var(--surface-1); color: var(--text-primary); font-size: 13px;
}
.toolbar input[type=text] { min-width: 220px; }
.btn { padding: 8px 13px; border-radius: 7px; border: 1px solid var(--border-hairline); background: var(--surface-1); color: var(--text-primary); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.btn.primary { background: var(--ikn-blue); border-color: var(--ikn-blue); color: #fff; }
.btn.danger { background: var(--status-critical); border-color: var(--status-critical); color: #fff; }
.btn:hover { filter: brightness(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; }
.toolbar .spacer { flex: 1; }
.result-count { font-size: 12.5px; color: var(--text-muted); }

.view-toggle { display: flex; border: 1px solid var(--border-hairline); border-radius: 7px; overflow: hidden; }
.view-toggle .vt-btn { padding: 8px 14px; border: none; background: var(--surface-1); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.view-toggle .vt-btn.active { background: var(--ikn-blue); color: #fff; }

.donor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.donor-card { background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: 10px; padding: 13px 15px; cursor: pointer; font-size: 12.8px; }
.donor-card:hover { border-color: var(--ikn-blue-light); }
.dc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; margin-bottom: 6px; }
.dc-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.dc-tags { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.dc-address { color: var(--text-secondary); margin-bottom: 8px; line-height: 1.4; }
.dc-row { display: flex; flex-wrap: wrap; gap: 10px; color: var(--text-secondary); margin-bottom: 6px; }
.dc-row:last-child { margin-bottom: 0; }
.dc-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--gridline); color: var(--text-secondary); font-size: 11px; font-weight: 600; }
.dc-badge.ok { background: rgba(12,163,12,0.14); color: #0d6b0d; }
@media (prefers-color-scheme: dark) { .dc-badge.ok { color: #0ca30c; } }

.table-scroll { overflow: auto; max-height: calc(100vh - 300px); border: 1px solid var(--border-hairline); border-radius: 10px; }
table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.8px; }
table.data-table th { text-align: left; padding: 9px 10px; color: var(--text-secondary); font-weight: 600; border-bottom: 1px solid var(--gridline); cursor: pointer; white-space: nowrap; position: sticky; top: 0; z-index: 1; background: var(--surface-1); box-shadow: 0 1px 0 var(--gridline); }
table.data-table th.sorted::after { content: " \25be"; color: var(--ikn-blue); }
table.data-table th.sorted.asc::after { content: " \25b4"; }
table.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--gridline); vertical-align: top; }
table.data-table tbody tr { cursor: pointer; }
table.data-table tbody tr:hover { background: var(--ikn-blue-pale); }
table.data-table tbody tr.run-row.actief { background: var(--ikn-blue-pale); box-shadow: inset 3px 0 0 var(--ikn-blue); }
table.data-table tbody tr.run-row.actief td:first-child { font-weight: 700; }
.actie-select {
  padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border-hairline);
  background: var(--surface-1); color: var(--text-secondary); font-size: 12px; cursor: pointer;
}
.actie-select.active { background: #d03b3b; border-color: #d03b3b; color: #ffffff; font-weight: 700; }
.actie-select.active.geel { background: #fab219; border-color: #fab219; color: #3d2e00; }
.actie-select.active.groen { background: #0ca30c; border-color: #0ca30c; color: #ffffff; }
.actie-select.active.paars { background: #6d28d9; border-color: #6d28d9; color: #ffffff; }
.actie-select.active.oranje { background: #e8632a; border-color: #e8632a; color: #ffffff; }
.actie-badge {
  display: inline-block; padding: 3px 10px; border-radius: 10px;
  background: #d03b3b; color: #ffffff; font-size: 11.5px; font-weight: 700;
}
.actie-badge.geel { background: #fab219; color: #3d2e00; }
.actie-badge.groen { background: #0ca30c; color: #ffffff; }
.actie-badge.paars { background: #6d28d9; color: #ffffff; }
.actie-badge.oranje { background: #e8632a; color: #ffffff; }
.bk-badge { display: inline-block; padding: 2px 9px; border-radius: 6px; background: #fab219; border: 1px solid #e09a00; color: #3d2e00; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mailing-groepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.mailing-groep { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--border-hairline); border-radius: 8px; background: var(--surface-1); cursor: pointer; font-size: 13px; }
.mailing-groep:hover { border-color: var(--ikn-blue-light); }
.mailing-groep .mg-label { font-weight: 600; }
.mailing-groep .mg-aantal { margin-left: auto; }
.afhandel-btn, .bk-afhandel-btn { font-size: 12px; padding: 5px 10px; white-space: nowrap; }
.afhandel-cel { white-space: nowrap; text-align: right; }
.chk-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chk-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  padding: 4px 9px; background: var(--gridline); border-radius: 6px; cursor: pointer;
}
.chk-chip input { margin: 0; }

.mailing-badge {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  background: var(--ikn-blue); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
}
.gift-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.gift-form input { padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border-hairline); background: var(--page-plane); color: var(--text-primary); font-size: 12.5px; }
.gift-del { background: none; border: none; color: var(--status-critical); font-size: 16px; cursor: pointer; padding: 0 6px; line-height: 1; }
.gift-table td { font-size: 12.5px; }
.gift-total td { border-bottom: none; background: var(--ikn-blue-pale); }
@media (prefers-color-scheme: dark) { .gift-total td { background: rgba(20,135,171,0.18); } }
.mailing-row { cursor: pointer; }
.date-input { padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border-hairline); background: var(--surface-1); color: var(--text-primary); font-size: 12.5px; }
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.status-badge.st-open { background: var(--ikn-blue); color: #fff; }
.status-badge.st-ok { background: #0ca30c; color: #fff; }
.status-badge.st-fail { background: #d03b3b; color: #fff; }
.status-badge.st-off { background: var(--gridline); color: var(--text-secondary); }
.ronde-row { cursor: pointer; }
.cat-badge { display: inline-block; padding: 2px 9px; border-radius: 10px; background: #6a4a97; color: #fff; font-size: 11px; font-weight: 700; }
.koppel-rij td { background: var(--ikn-blue-pale); }
@media (prefers-color-scheme: dark) { .koppel-rij td { background: rgba(20,135,171,0.15); } }

.tag { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 700; margin-right: 3px; }
.tag.warn { background: rgba(250,178,25,0.18); color: #8a5e00; }
.tag.crit { background: rgba(208,59,59,0.15); color: #a02a2a; }
.tag.ok { background: rgba(12,163,12,0.14); color: #0d6b0d; }
@media (prefers-color-scheme: dark) { .tag.warn { color: #fab219; } .tag.crit { color: #e66767; } .tag.ok { color: #0ca30c; } }

/* Inklapbare, contrasterende blokken op het Incasso's-tabblad */
.inklap-kaart { border-radius: 12px; border: 1px solid var(--border-hairline); border-left-width: 6px; padding: 16px 22px; margin-bottom: 16px; background: var(--surface-1); }
.inklap-kaart.kg-blauw  { border-left-color: #2a78d6; background: rgba(42,120,214,0.07); }
.inklap-kaart.kg-oranje { border-left-color: #eb6834; background: rgba(235,104,52,0.07); }
.inklap-kaart.kg-groen  { border-left-color: #1baf7a; background: rgba(27,175,122,0.08); }
.inklap-kop { cursor: pointer; user-select: none; margin: 0; font-size: 17px; }
.inklap-kaart.kg-blauw  .inklap-kop { color: #2a78d6; }
.inklap-kaart.kg-oranje .inklap-kop { color: #c74e1d; }
.inklap-kaart.kg-groen  .inklap-kop { color: #128a5f; }
.inklap-kop .n { color: var(--text-secondary); }
.inklap-kop::after { content: "\25BE"; float: right; opacity: 0.55; font-size: 0.8em; margin-left: 8px; font-weight: normal; }
.inklap-kaart.ingeklapt .inklap-kop::after { content: "\25B8"; }
.inklap-inhoud { margin-top: 14px; }
.inklap-kaart.ingeklapt .inklap-inhoud { display: none; }
@media (prefers-color-scheme: dark) {
  .inklap-kaart.kg-blauw  .inklap-kop { color: #6aa7ee; }
  .inklap-kaart.kg-oranje .inklap-kop { color: #ef8b60; }
  .inklap-kaart.kg-groen  .inklap-kop { color: #3fc492; }
}

.pagination { display: flex; gap: 6px; align-items: center; margin-top: 14px; justify-content: flex-end; font-size: 12.5px; }
.pagination button { padding: 5px 10px; }
.pagination button:disabled { opacity: 0.4; cursor: default; }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 50; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 26px 16px; }
.modal-overlay.open { display: flex; }
.modal { background: var(--surface-1); border-radius: 12px; max-width: 1300px; width: 100%; padding: 28px 40px 32px; position: relative; }
.modal.modal-smal { max-width: 720px; }
.modal .close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); }
.modal h3 { margin: 0 0 2px; font-size: 18px; }
.modal .modal-sub { color: var(--text-muted); font-size: 12.5px; margin-bottom: 16px; }
.modal .modal-actions { display: flex; gap: 8px; margin-top: 18px; border-top: 1px solid var(--gridline); padding-top: 16px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 13px; margin-bottom: 16px; }
.field-grid .f-label { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.field-grid .f-value { color: var(--text-primary); }

/* --- donateurskaart: kop en gekleurde groepen --- */
.kaart-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 26px 16px 0; }
.kaart-kop h3 { margin: 0; font-size: 21px; }
.kaart-nummer { font-size: 13px; font-weight: 700; color: var(--ikn-blue-dark); background: var(--ikn-blue-pale); padding: 3px 11px; border-radius: 10px; }
.kaart-groep { border-radius: 10px; padding: 13px 16px 11px; margin-bottom: 12px; border: 1px solid var(--border-hairline); border-left-width: 5px; }
.kg-titel { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
/* Inklapbare onderwerpen op de donateurskaart: kop is klikbaar (één klik) */
#modal-content .kg-titel { cursor: pointer; user-select: none; }
#modal-content .kg-titel::after { content: "\25B8"; float: right; font-size: 0.95em; opacity: 0.55; margin-left: 8px; }
#modal-content .kaart-groep:not(.ingeklapt) > .kg-titel::after { content: "\25BE"; }
#modal-content .kaart-groep.ingeklapt { padding-bottom: 11px; }
#modal-content .kaart-groep.ingeklapt > .kg-titel { margin-bottom: 0; }
#modal-content .kaart-groep.ingeklapt > :not(.kg-titel) { display: none; }
#tab-instellingen .kg-titel { cursor: pointer; user-select: none; }
#tab-instellingen .kg-titel::after { content: "\25B8"; float: right; font-size: 0.95em; opacity: 0.55; margin-left: 8px; }
#tab-instellingen .kaart-groep:not(.ingeklapt) > .kg-titel::after { content: "\25BE"; }
#tab-instellingen .kaart-groep.ingeklapt { padding-bottom: 11px; }
#tab-instellingen .kaart-groep.ingeklapt > .kg-titel { margin-bottom: 0; }
#tab-instellingen .kaart-groep.ingeklapt > :not(.kg-titel) { display: none; }
.kg-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 4px; }
@media (max-width: 900px) { .kg-grid { grid-template-columns: repeat(2, 1fr); } }
.kg-blauw  { border-left-color: #2a78d6; background: rgba(42,120,214,0.06); }
.kg-blauw  .kg-titel { color: #2a78d6; }
.kg-groen  { border-left-color: #1baf7a; background: rgba(27,175,122,0.07); }
.kg-groen  .kg-titel { color: #128a5f; }
.kg-oranje { border-left-color: #eb6834; background: rgba(235,104,52,0.06); }
.kg-oranje .kg-titel { color: #c74e1d; }
.kg-geel   { border-left-color: #eda100; background: rgba(237,161,0,0.08); }
.kg-geel   .kg-titel { color: #9a6a00; }
.kg-paars  { border-left-color: #6a4a97; background: rgba(106,74,151,0.06); }
.kg-paars  .kg-titel { color: #6a4a97; }
.kg-grijs  { border-left-color: var(--baseline); background: rgba(128,128,120,0.05); }
.kg-grijs  .kg-titel { color: var(--text-secondary); }
.kg-rood   { border-left-color: #d03b3b; background: rgba(208,59,59,0.06); }
.kg-rood   .kg-titel { color: #b02a2a; }
.kg-cyaan  { border-left-color: #0e9aa7; background: rgba(14,154,167,0.07); }
.kg-cyaan  .kg-titel { color: #0b7d88; }
.kg-roze   { border-left-color: #d1489b; background: rgba(209,72,155,0.06); }
.kg-roze   .kg-titel { color: #b23583; }
.kg-indigo { border-left-color: #4b52c3; background: rgba(75,82,195,0.06); }
.kg-indigo .kg-titel { color: #3a41a8; }
.kg-limoen { border-left-color: #7a9c1c; background: rgba(122,156,28,0.08); }
.kg-limoen .kg-titel { color: #5f7b12; }
.kg-bruin  { border-left-color: #9c6b3f; background: rgba(156,107,63,0.07); }
.kg-bruin  .kg-titel { color: #7d5430; }
@media (prefers-color-scheme: dark) {
  .kg-blauw { background: rgba(57,135,229,0.10); } .kg-blauw .kg-titel { color: #6aa7ee; }
  .kg-groen { background: rgba(25,158,112,0.12); } .kg-groen .kg-titel { color: #3fc492; }
  .kg-oranje { background: rgba(217,89,38,0.12); } .kg-oranje .kg-titel { color: #ef8b60; }
  .kg-geel { background: rgba(201,133,0,0.12); } .kg-geel .kg-titel { color: #e0aa30; }
  .kg-paars { background: rgba(144,133,233,0.10); } .kg-paars .kg-titel { color: #a99ff0; }
  .kg-rood { background: rgba(230,103,103,0.11); } .kg-rood .kg-titel { color: #e88080; }
  .kg-cyaan { background: rgba(34,180,194,0.12); } .kg-cyaan .kg-titel { color: #3fc9d6; }
  .kg-roze { background: rgba(224,110,180,0.11); } .kg-roze .kg-titel { color: #ec8fc4; }
  .kg-indigo { background: rgba(110,116,225,0.12); } .kg-indigo .kg-titel { color: #969bf0; }
  .kg-limoen { background: rgba(150,186,40,0.12); } .kg-limoen .kg-titel { color: #b5cf5a; }
  .kg-bruin { background: rgba(180,130,85,0.12); } .kg-bruin .kg-titel { color: #ca9b70; }
}
.field-full { grid-column: 1 / -1; }
.timeline { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
.timeline .chip { font-size: 10.5px; padding: 3px 7px; border-radius: 5px; background: var(--gridline); color: var(--text-muted); }
.timeline .chip.active { background: var(--series-1); color: #fff; font-weight: 700; }

/* editable form */
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; font-size: 13px; margin-bottom: 10px; }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid .f-full { grid-column: 1 / -1; }
.form-grid label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border-hairline);
  background: var(--page-plane); color: var(--text-primary); font-size: 13px; font-family: inherit;
}
.form-grid textarea { resize: vertical; min-height: 50px; }

.quality-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--gridline); font-size: 13px; }
.quality-item:last-child { border-bottom: none; }
.quality-item .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.quality-klik { cursor: pointer; padding-left: 8px; padding-right: 8px; margin: 0 -8px; border-radius: 6px; }
.quality-klik:hover { background: var(--surface-2, rgba(0,0,0,0.04)); }

details.dup-group { border: 1px solid var(--border-hairline); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; font-size: 12.5px; }
details.dup-group summary { cursor: pointer; font-weight: 600; }
details.dup-group .dup-row { padding: 5px 0 5px 14px; color: var(--text-secondary); border-top: 1px solid var(--gridline); margin-top: 5px; cursor: pointer; }

footer.app-footer { text-align: center; color: var(--text-muted); font-size: 11.5px; padding: 18px; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13px; }
.note-banner { background: var(--ikn-blue-pale); border: 1px solid var(--ikn-blue-light); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: #0e5570; margin-bottom: 16px; }
@media (prefers-color-scheme: dark) { .note-banner { background: rgba(95,184,217,0.12); border-color: rgba(95,184,217,0.35); color: #bfe4f2; } }
.warn-banner { background: rgba(250,178,25,0.14); border: 1px solid rgba(250,178,25,0.4); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: #8a5e00; margin-bottom: 16px; }
.bank-bulk-balk { display: flex; justify-content: flex-end; margin: 8px 0; }
.bank-bulk-balk:empty { display: none; }
.log-del-cel { text-align: right; white-space: nowrap; }
.bank-suggestie { margin-top: 4px; padding: 6px 8px; border-left: 3px solid var(--ikn-green, #4a9d5b); background: rgba(74,157,91,0.08); border-radius: 6px; font-size: 12px; }
@media (prefers-color-scheme: dark) { .bank-suggestie { background: rgba(74,157,91,0.16); } }
@media (prefers-color-scheme: dark) { .warn-banner { color: #fab219; } }

.hidden { display: none !important; }