/* Drie vlakken, en de volgorde is de hiërarchie: het papier (--page-plane) draagt
   de kaarten (--surface-1), en die dragen op hun beurt de genestelde vlakjes
   (--surface-2: mini-tiles, vacatureblokken, snelle links). In licht licht
   betekent "hoger" wit en "lager" grijs, in donker precies andersom. Ze lagen
   eerder allemaal binnen 1% van elkaar, waardoor geen enkele kaart een rand had
   die je kon zien — vandaar dat wit nu echt wit is en surface-2 eronder zakt. */
:root {
  --surface-1:      #ffffff;
  --surface-2:      #f4f3ef;
  --page-plane:     #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --border:         rgba(11,11,11,0.16);
  /* Kaarten liften van het papier; genestelde vlakjes niet — die horen ín de
     kaart te liggen, niet erboven. Twee lagen: een harde 1px-schaduw voor de
     rand-definitie, een zachte voor de diepte. */
  --shadow-card:    0 1px 2px rgba(11,11,11,0.05), 0 4px 14px rgba(11,11,11,0.06);

  /* De accentkleur: knoppen, focusringen, de quote-banner. De reeks --series-2
     t/m 4 en de --seq-* schaal hoorden bij de grafieken en zijn met die
     grafieken meegegaan. */
  --series-1: #ECC84B; /* gold */

  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  /* Aangepast is geen oordeel: het zegt dat er gewerkt is en dat het volgende
     rapport nog moet komen. Blauw houdt het bewust van de groen-geel-rode
     schaal af, waar het anders als "half goed" zou lezen. */
  --status-aangepast: #3b82c6;

  --radius-card: 14px;
  --radius-tile: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-1:      #1a1a19;
    --surface-2:      #201f1d;
    --page-plane:     #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --border:         rgba(255,255,255,0.16);
    /* Zwarte schaduw doet niets op een donker vlak: daar komt de lift van een
       lichte rand-schaduw plus wat diepte eronder. */
    --shadow-card:    0 0 0 1px rgba(255,255,255,0.04), 0 4px 14px rgba(0,0,0,0.35);

    --series-1: #ECC84B;
  }
}

* { 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;
}

body {
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.brand {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
}

/* Merknaam en de externe tools ernaast vormen één groep links in de topbalk;
   uitloggen blijft daardoor aan de rechterkant staan. */
.brand-groep {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-link {
  font-size: 14px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.back-link:hover { color: var(--text-primary); }

/* Terug naar het overzicht is de belangrijkste navigatie op de klantpagina en
   is daarom een echte knop, geen tekstlink. */
.btn-back,
.btn-extern {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.btn-back:hover,
.btn-extern:hover {
  background: var(--surface-2);
  border-color: var(--text-secondary);
  transform: translateY(-1px);
}

/* Een externe app (andere tool, ander tabblad) staat naast de merknaam en is
   daarom iets kleiner dan de hoofdnavigatie. De ↗ maakt zichtbaar dat je het
   dashboard verlaat, net als bij de funnel-knop. */
.btn-extern {
  padding: 8px 14px;
  font-size: 13px;
}

/* Quote banner */
.quote-banner {
  background: linear-gradient(135deg, #000000, #ECC84B);
  color: #ffffff;
  border-radius: var(--radius-card);
  padding: 40px 36px;
  margin-bottom: 32px;
}
.quote-banner p {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  max-width: 640px;
}
.quote-banner span {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
}

/* Section heading */
.section-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--text-primary);
}

/* Status columns on homepage */
.status-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.status-col {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px;
}
.status-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.status-dot.good { background: var(--status-good); }
.status-dot.warning { background: var(--status-warning); }
.status-dot.critical { background: var(--status-critical); }
.status-dot.aangepast { background: var(--status-aangepast); }

.status-col-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.status-col-list .empty {
  font-size: 13px;
  color: var(--text-muted);
}
.mini-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.mini-tile:hover {
  border-color: var(--text-secondary);
  transform: translateY(-1px);
}
.mini-tile-flag {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
/* De twee datumregels vormen samen één blokje, met een dunne scheidslijn los van
   de klantnaam erboven — zo lees je "wie" apart van "wanneer" in plaats van drie
   grijze regels op een hoop. */
.mini-tile-meta {
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  padding-top: 2px;
  border-top: 1px solid var(--gridline);
}
/* Label links, datum rechts: de datums lijnen zo in een kolom uit en zijn in één
   oogopslag te scannen. Het label is gedempt (het is de vaste noemer), de datum
   krijgt het gewicht en de sterkere kleur want dáár gaat het om.
   De twee regels krijgen een eigen scheidslijn en niet alleen wat ruimte: op
   3px afstand in dezelfde grijstint liepen ze als één grijs blokje in elkaar
   over en las je niet meer welke datum bij welk label hoorde. Dezelfde lijn als
   boven het blokje, dus het leest als een lijstje van twee en niet als een
   tabel met randen. */
.mini-tile-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  font-size: 11px;
  line-height: 1.3;
}
.mini-tile-meta-row + .mini-tile-meta-row {
  border-top: 1px solid var(--gridline);
}
.mini-tile-meta-row:last-child {
  padding-bottom: 0;
}
.mini-tile-meta-label {
  font-weight: 500;
  color: var(--text-muted);
}
/* De datum staat op de primaire tekstkleur en een maat groter dan het label:
   die twee moeten uit elkaar vallen, anders is het weer één grijze massa. */
.mini-tile-meta-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.mini-tile-meta-val.leeg {
  font-weight: 500;
  font-style: italic;
  color: var(--text-muted);
}

/* Klantenlijst: alleen navigatie. Twaalf grote tegels met enkel een naam vulden
   een schermhoogte zonder iets te vertellen; als platte lijst kost het een
   fractie daarvan en scan je de namen sneller. Het zoekveld is er voor als de
   lijst blijft groeien. */
.klanten-lijst {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.klant-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--gridline);
  transition: background 0.12s ease;
}
.klant-rij:last-child { border-bottom: none; }
.klant-rij:hover { background: var(--surface-2); }
.klant-rij:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: -2px;
}
/* De pijl verschijnt pas bij hover: twaalf pijlen onder elkaar zijn twaalf keer
   dezelfde mededeling, en dat is precies de ruis die we kwijt wilden. */
.klant-rij .pijl {
  color: var(--text-muted);
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.klant-rij:hover .pijl,
.klant-rij:focus-visible .pijl { opacity: 1; }

/* Zoekveld boven de lijst, in de kop naast "Klanten". */
.klanten-zoek {
  flex: 1;
  max-width: 260px;
  margin-left: auto;
  padding: 7px 11px;
  font: inherit;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
}
.klanten-zoek::placeholder { color: var(--text-muted); }
.klanten-zoek:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 1px;
}
.klanten-leeg {
  padding: 16px 18px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Vier kolommen naast elkaar worden krap op een smaller scherm: dan liever twee
   brede rijen dan vier kokers waar de vacaturenaam in afbreekt. */
@media (max-width: 1100px) {
  .status-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .status-columns { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .klanten-zoek { max-width: none; }
}

/* ---------- Klant detail page ---------- */

/* Zijbalk met alle klanten, zodat je van klant naar klant springt zonder eerst
   terug naar het overzicht. Hij plakt bij het scrollen: de klantpagina is lang,
   en een navigatie die alleen bovenaan bestaat is geen navigatie. */
.klant-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: start;
}
.klant-zijbalk {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  /* Meer klanten dan er passen: de lijst scrollt binnen de zijbalk in plaats van
     de pagina op te rekken. */
  max-height: calc(100vh - 48px);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.zijbalk-kop {
  flex: none;
  padding: 14px 16px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.zijbalk-lijst {
  overflow-y: auto;
  padding: 0 8px 8px;
}
.zijbalk-rij {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: background 0.12s ease, color 0.12s ease;
}
.zijbalk-rij:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.zijbalk-rij:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: -2px;
}
/* De klant waar je nu bent is geen link maar een markering: hij draagt de
   accentkleur als staaf, zodat je in één blik ziet waar je staat. */
.zijbalk-rij.actief {
  background: var(--surface-2);
  color: var(--text-primary);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--series-1);
}

/* Onder deze breedte is er geen ruimte voor 210px navigatie naast de kaarten.
   De zijbalk verdwijnt dan; "Terug naar overzicht" staat al in de topbalk, dus
   je raakt geen enkele route kwijt. */
@media (max-width: 1000px) {
  .klant-layout { grid-template-columns: 1fr; }
  .klant-zijbalk { display: none; }
}

.klant-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.klant-header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
}

.detail-row {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 16px;
  margin-bottom: 28px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .detail-row { grid-template-columns: 1fr; }
}
/* Zonder dit rekt een grid-kolom mee met haar breedste inhoud (min-width is auto):
   een lange wijziging-omschrijving zou de Vacatures-kolom oprekken en de
   Workspace-kolom platdrukken. min-width:0 laat de kolom de 1.6fr/0.9fr-verhouding
   respecteren, en pas dán bijt de ellipsis op .wijziging-tekst. */
.detail-row > .card { min-width: 0; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
}

.card h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

/* Vacatures list */
.vacature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Eén vacature: de regel met naam/status, en daaronder haar laatste wijziging.
   Het blok draagt de achtergrond, zodat beide regels bij elkaar horen. */
.vacature-blok {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}
.vacature-blok .vacature-row {
  padding: 0;
  border-radius: 0;
  background: none;
}
.vacature-wijziging {
  display: flex;
  gap: 8px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-secondary);
}
.vacature-wijziging .wijziging-datum {
  flex: none;
  font-weight: 600;
  white-space: nowrap;
}
/* Eén regel: een lange omschrijving mag de kaart niet oprekken. De volledige
   tekst staat in het title-attribuut en in het wijzigingenlog eronder. */
.vacature-wijziging .wijziging-tekst {
  /* Flex-item: zonder min-width:0 bepaalt de tekst zelf de minimale breedte en
     werkt de ellipsis niet — dan rekt de omschrijving alsnog de kaart op. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vacature-wijziging.leeg {
  font-style: italic;
  opacity: 0.7;
}
.vacature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}
.vacature-row .naam {
  font-size: 14px;
  font-weight: 600;
}

/* De funnel is een eigen knop, geen vacaturenaam die stiekem een link is. Een
   geel streepje onder de naam vertelt niemand dat daar Perspective achter zit,
   en het verschil met een vacature zonder funnelId was al helemaal niet te zien.
   Nu is dat verschil de knop: die is er, of hij is er niet. */
.btn-funnel-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn-funnel-link:hover {
  background: var(--series-1);
  border-color: var(--series-1);
  color: #0b0b0b;
}
.btn-funnel-link:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}
/* Zonder funnelId geen knop, maar wél uitleg waarom die ontbreekt — anders lijkt
   het een bug in plaats van een niet-gesyncte vacature. */
.geen-funnel {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 3px transparent;
}
.lamp.on { background: var(--status-good); box-shadow: 0 0 8px 1px rgba(12,163,12,0.55); }
.lamp.off { background: var(--status-critical); }
.vacature-gearchiveerd {
  font-size: 0.85em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  padding: 0.1em 0.5em;
}

/* Vacatures bewerken */
.vacature-edit-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vacature-edit-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vacature-edit-naam {
  flex: 1;
  padding: 9px 11px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
}
.vacature-edit-live {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}
.vacature-edit-live input { accent-color: var(--series-1); cursor: pointer; }
.vacature-edit-remove {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.vacature-edit-remove:hover { color: var(--status-critical); border-color: var(--status-critical); }
.vacature-edit-row.is-gearchiveerd .vacature-edit-naam {
  color: var(--text-muted);
}
.vacature-edit-row.is-gearchiveerd .vacature-edit-badge {
  font-size: 0.8em;
  color: var(--text-muted);
}
.btn-add-row {
  align-self: flex-start;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.btn-add-row:hover { color: var(--text-primary); border-color: var(--text-secondary); }

/* Funnel button card */
.funnel-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}
.funnel-card p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.btn-funnel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--series-1);
  color: #0b0b0b;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 10px;
  transition: opacity 0.12s ease;
}
.btn-funnel:hover { opacity: 0.88; }

/* Reports list */
.reports-card { margin-bottom: 28px; }
.reports-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.reports-head h2 { margin: 0; }
.refresh-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.refresh-btn:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.filetype-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
  vertical-align: middle;
}
.report-table td a {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--series-1);
  text-decoration-thickness: 2px;
}
.report-table td a:hover { text-decoration-color: currentColor; }
.report-table code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}
.report-table {
  width: 100%;
  border-collapse: collapse;
}
.report-table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 10px;
  border-bottom: 1px solid var(--gridline);
}
.report-table td {
  padding: 10px 10px;
  font-size: 14px;
  border-bottom: 1px solid var(--gridline);
}

/* Actiekolom in het wijzigingenlog: zo smal mogelijk, zodat de omschrijving de
   ruimte houdt. */
.report-table .kolom-acties {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
/* Het kruisje blijft neutraal tot je het aanwijst, net als de prullenbak naast
   de klantnaam: een rij weggooien mag geen knop zijn die om aandacht schreeuwt. */
.row-delete {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 7px;
}
.row-delete:hover {
  color: var(--status-critical);
  border-color: var(--status-critical);
}
.row-delete:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}
.report-table tr:last-child td { border-bottom: none; }
.report-table td.datum {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Vacature toevoegen + ophalen uit Perspective naast elkaar. */
.vacature-edit-acties {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Rapporten hangen onder hun vacature: per vacature een kop met haar status,
   daaronder haar rapporten. */
.vacature-groep + .vacature-groep {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--gridline);
}
.vacature-groep-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.vacature-groep-head h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Het archiefblok is een groep vacatures, geen vacature zelf: een genest vlak
   (--surface-2, net als andere genestelde vlakjes) en een gedempte kop
   onderscheiden "Funnel niet meer actief" van de vacaturenamen erin. */
.groep-gearchiveerd {
  background: var(--surface-2);
  border-radius: var(--radius-tile);
  padding: 16px;
}
.groep-gearchiveerd > .vacature-groep-head h3 {
  color: var(--text-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Status en live-lampje naast elkaar in de vacaturelijst. */
.vacature-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* Status per rapport: dezelfde taal als de grote status-badge, maar compact
   genoeg om in een tabelrij te staan. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.status-pill .status-dot { width: 8px; height: 8px; }
.status-pill.good { background: rgba(12,163,12,0.12); color: var(--status-good); }
.status-pill.warning { background: rgba(250,178,25,0.16); color: #a06400; }
.status-pill.critical { background: rgba(208,59,59,0.14); color: var(--status-critical); }
.status-pill.aangepast { background: rgba(59,130,198,0.14); color: var(--status-aangepast); }
@media (prefers-color-scheme: dark) {
  .status-pill.warning { color: var(--status-warning); }
}
.status-onbekend { color: var(--text-muted); }

/* Wijzigingenlog */
.wijzigingen-card { margin-bottom: 28px; }
.wijziging-form {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  /* Bovenaan uitlijnen: sleep je de omschrijving-textarea groter, dan groeit
     alleen die, in plaats van dat alle velden meestretchen tot dezelfde hoogte. */
  align-items: flex-start;
}
.wijziging-form input[type="date"],
.wijziging-form input[type="time"],
.wijziging-form textarea,
.wijziging-form select {
  padding: 9px 11px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
}
.wijziging-form input[type="date"] { flex: none; width: 150px; }
.wijziging-form input[type="time"] { flex: none; width: 110px; }
.wijziging-form select { flex: none; max-width: 240px; }
/* De omschrijving pakt de resterende breedte en is verticaal groter te slepen
   voor een grote plak tekst. min-height gelijk aan de andere velden zodat de rij
   begint op één regelhoogte; line-height iets ruimer omdat het meerdere regels
   mag worden. */
.wijziging-form textarea {
  flex: 1;
  min-height: 38px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.4;
}
.wijziging-form select:disabled,
.wijziging-form input:disabled,
.wijziging-form textarea:disabled,
.wijziging-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.wijziging-form button {
  flex: none;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: var(--series-1);
  color: #0b0b0b;
}
.wijziging-form button:hover { opacity: 0.9; }
@media (max-width: 560px) {
  .wijziging-form { flex-wrap: wrap; }
  .wijziging-form input[type="date"] { width: 100%; }
}
/* De omschrijving mag nu meerdere regels zijn: pre-wrap houdt de regeleinden die
   in het tekstvak zijn getypt, en word-break laat een lange plak zonder spaties
   afbreken in plaats van de tabel op te rekken. */
.wijziging-omschrijving-cel {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.empty-note {
  font-size: 13px;
  color: var(--text-muted);
}

/* Quick links (Canva / Meta / SharePoint) */
.quicklinks-card { margin-bottom: 8px; }
.quicklinks-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.quicklinks-head h2 { margin: 0; }
.settings-btn {
  font-size: 15px;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 9px;
  cursor: pointer;
}
.settings-btn:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.quicklink-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quicklink-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid transparent;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.quicklink-row:hover {
  border-color: var(--text-secondary);
  transform: translateY(-1px);
}
.quicklink-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
}
.quicklink-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}
.quicklink-arrow {
  color: var(--text-muted);
  font-size: 14px;
}

/* ---------- Modal (instellingen: vacatures & snelle links) ---------- */
.modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  overflow: hidden;
}
body:has(.modal[open]) { overflow: hidden; }
.modal::backdrop {
  background: rgba(11,11,11,0.5);
  backdrop-filter: blur(2px);
}
.modal[open] { animation: modal-in 0.16s ease-out; }
.modal[open]::backdrop { animation: backdrop-in 0.16s ease-out; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modal[open], .modal[open]::backdrop { animation: none; }
}

.modal-form {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--gridline);
}
.modal-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.modal-close {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--text-primary); border-color: var(--text-secondary); }

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  overflow-y: auto;
}
.modal-body > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.modal-body > label input {
  padding: 9px 11px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
}
.modal-body input:focus-visible,
.modal-body button:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 1px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--gridline);
  background: var(--surface-2);
}
.modal-actions button {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
}

.quicklink-edit-error {
  font-size: 13px;
  font-weight: 600;
  color: var(--status-critical);
  background: rgba(208,59,59,0.1);
  border-radius: 8px;
  padding: 8px 10px;
}
.btn-cancel {
  background: var(--surface-2);
  color: var(--text-secondary);
}
.btn-cancel:hover { color: var(--text-primary); }
.btn-save {
  background: var(--series-1);
  color: #0b0b0b;
  border-color: transparent;
}
.btn-save:hover { opacity: 0.9; }

/* Bevestigingsknop voor het verwijderen van een klant: rood, zodat hij zich
   duidelijk onderscheidt van Opslaan. */
.btn-danger {
  background: var(--status-critical);
  color: #ffffff;
  border-color: transparent;
}
.btn-danger:hover { opacity: 0.9; }

/* De prullenbakknop naast de klantnaam blijft neutraal tot je hem aanwijst. */
.settings-btn.danger:hover {
  color: var(--status-critical);
  border-color: var(--status-critical);
}

/* Kop met actieknop ernaast (bijv. "Klanten" + zoekveld + klant toevoegen).
   Wrapt op smalle schermen, anders wordt het zoekveld tot een spleet geknepen. */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* De titel staat hier in een flexrij naast het zoekveld. Zijn eigen ondermarge
   telt dan mee in het centreren en zet de kop scheef, terwijl er onder de rij
   nauwelijks lucht overbleef: de ruimte onder dit blok komt daarom van
   .section-head zelf. */
.section-head .section-title {
  margin-bottom: 0;
}

.btn-add-klant {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 6px 12px;
}

.btn-add-klant:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.modal-hint {
  color: var(--text-muted);
  font-size: 12px;
  margin: -4px 0 0;
}

.modal-hint code {
  font-size: 11px;
}

.optioneel {
  color: var(--text-muted);
  font-weight: 400;
}

/* ---------- Meta-koppelscherm ---------- */

/* De blokken (waarschuwingen, de drie groepen) staan los onder elkaar; één
   regel voor de tussenruimte in plaats van elke combinatie apart benoemen. */
#koppel-content > * + * {
  margin-top: 20px;
}

.koppel-groep summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.koppel-groep-inklapbaar[open] summary {
  margin-bottom: 14px;
}

.koppel-lijst {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

/* Eén campagnerij: een genest vlak, net als een vacatureblok — geen eigen
   schaduw, die hoort bij de kaart eromheen. */
.koppel-rij {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-tile);
  background: var(--surface-2);
}
.koppel-rij-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.koppel-campagnenaam {
  font-size: 14px;
  font-weight: 600;
}
.koppel-rij-keuze {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.koppel-klant-select,
.koppel-vacature-select {
  flex: 1;
  min-width: 200px;
  padding: 9px 11px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
}
.koppel-klant-select:disabled,
.koppel-vacature-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Bron-badge: "automatisch" is een voorstel, "handmatig" is een keuze. Dat
   verschil moet naast de campagnenaam in één oogopslag te zien zijn. */
.bron-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.bron-badge.bron-auto,
.bron-badge.bron-geen {
  color: var(--text-muted);
  background: var(--surface-1);
  border: 1px solid var(--border);
}
.bron-badge.bron-geen {
  font-style: italic;
}
.bron-badge.bron-handmatig {
  color: #0b0b0b;
  background: var(--series-1);
}

/* Feedback per rij: falen toont de API-fout, slagen bevestigt kort met
   "Opgeslagen." — dezelfde rood/groen-taal als elders (vgl. .status-good en
   .quicklink-edit-error), maar hier ook een geslaagde staat, want een rij die
   na opslaan stilzwijgend naar een andere groep springt is bij een lijst van
   twintig-plus campagnes geen betrouwbare bevestiging. */
.koppel-rij-feedback {
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 9px;
}
.koppel-rij-feedback.koppel-rij-feedback-fout {
  color: var(--status-critical);
  background: rgba(208, 59, 59, 0.1);
}
.koppel-rij-feedback.koppel-rij-feedback-ok {
  color: var(--status-good);
  background: rgba(12, 163, 12, 0.12);
}

/* Conflicten en meldingen: geen fout van de pagina, maar iets dat de
   gebruiker moet zien. Een gekleurde rand aan de kop, verder gewoon een kaart. */
.waarschuwing-blok {
  border-left: 3px solid var(--status-warning);
}
.waarschuwing-blok h2 {
  color: var(--status-warning);
}
.waarschuwing-lijst {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.waarschuwing-lijst li {
  line-height: 1.4;
}

/* Kon de campagnes niet worden opgehaald (bijv. een verlopen Meta-token), dan
   vervangt dit blok de hele pagina-inhoud — geen lege pagina, geen groepen
   zonder data erin. */
.fout-blok {
  border-left: 3px solid var(--status-critical);
}
.fout-blok h2 {
  color: var(--status-critical);
}
.fout-blok p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---------- Meta-klantpagina ---------- */

/* De link naar de gewone klantpagina staat rechts van de titel, los van de
   instellingen-knoppen die daar op klant.html vóór staan. */
#meta-klantpagina-link {
  margin-left: auto;
}

.meta-toolbar-card { margin-bottom: 20px; }
.meta-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
#meta-periode,
.meta-periode-datum {
  padding: 8px 11px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
}

/* De twee datumvelden van "Van datum tot datum" staan naast de keuzelijst en
   verschijnen alleen bij die keuze (hidden op de span). Ze wrappen mee: op een
   smal scherm past keuzelijst + twee datums + Ververs niet op één regel. */
.meta-periode-bereik {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* `display: flex` van de regel hierboven verslaat de UA-regel voor [hidden]
   (zelfde specificiteit, maar auteur boven UA), dus zonder deze regel staan de
   datumvelden er ook bij de vaste keuzes. */
.meta-periode-bereik[hidden] {
  display: none;
}
.meta-periode-datum {
  font-family: inherit;
}
/* Het kalendericoon in het datumveld tekent de browser zelf, en zonder deze
   regel doet hij dat in het donker nog steeds bijna zwart op ons donkere vlak.
   Alleen op deze velden, niet op :root: dat zou elk formulierveld in het
   dashboard omzetten. */
@media (prefers-color-scheme: dark) {
  .meta-periode-datum {
    color-scheme: dark;
  }
}
.meta-periode-tm {
  font-size: 13px;
  color: var(--text-secondary);
}
/* Wat er nog aan het bereik mist. Staat onder de balk zodat hij de knoppen niet
   opzij duwt zodra hij verschijnt. */
.meta-periode-melding {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--status-critical);
}

.meta-vacature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.meta-vacature-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.meta-vacature-naam {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.meta-vacature-campagne {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Een vacature met een conflict (twee campagnes wijzen ernaar) krijgt dezelfde
   accentrand als de waarschuwingskaarten elders, plus een badge naast haar
   naam: de cijfers eronder zijn dan niet gegarandeerd van de juiste campagne. */
.meta-vacature-card-conflict {
  border-left: 3px solid var(--status-warning);
}
.meta-conflict-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--status-warning);
  background: var(--surface-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* Het conflictenblok bovenaan: een genest vlak binnen de toolbar-kaart, geen
   eigen zwevend kaartje zoals op meta-koppelen.html — hier staat het naast de
   periodekiezer en de lead-uitleg, in dezelfde kaart. */
.meta-conflict-blok {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-tile);
  background: var(--surface-2);
  border-left: 3px solid var(--status-warning);
}
.meta-conflict-titel {
  font-size: 13px;
  font-weight: 700;
  color: var(--status-warning);
  margin-bottom: 6px;
}
.meta-conflict-blok .empty-note { margin: 0; }
.meta-conflict-blok .empty-note a {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--series-1);
  text-decoration-thickness: 2px;
}
.meta-conflict-lijst {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Zeven tegels (uitgaven, leads, cpl, impressies, link clicks, ctr, cpc):
   genestelde vlakjes binnen de kaart, geen eigen schaduw, die hoort bij de
   kaart eromheen, net als een koppel-rij. Een grid met auto-fit/minmax in
   plaats van flex-wrap, want zeven tegels passen op geen enkele breedte op
   één rij: dit laat ze netjes afbreken tot ze op een smal scherm onder
   elkaar staan in plaats van te knellen. */
.meta-cijfers-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.meta-cijfer-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-tile);
  background: var(--surface-2);
}
.meta-cijfer-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.meta-cijfer-waarde {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ---------- Meta-landingspagina ---------- */

#meta-koppelscherm-link { margin-left: auto; }

/* Ongekoppelde campagnes en meldingen staan boven de klantenlijst, in dezelfde
   waarschuwingsstijl als het koppelscherm — geen los ontwerp voor hetzelfde
   signaal. Tussenruimte tussen de twee blokken en de klantenlijst erna. */
#meta-overzicht-meldingen > * + * {
  margin-top: 20px;
}
#meta-overzicht-meldingen:not(:empty) {
  margin-bottom: 20px;
}

.meta-overzicht-klanten {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.meta-overzicht-klant-kop {
  margin-bottom: 14px;
}
.meta-overzicht-klant-naam {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.meta-overzicht-klant-naam:hover {
  color: var(--text-secondary);
}

/* Eén tabel per klantkaart in plaats van zeven losse label/waarde-paren per
   vacature: de labels staan één keer in de kop, de waarden eronder lijnen
   uit zodat je verticaal kunt vergelijken. Dit ís tabeldata (kolommen met
   een vaste betekenis, rijen die je naast elkaar legt), dus een echte
   <table> in plaats van een grid van divs. Dat leest ook goed voor een
   schermlezer. Alles onder .meta-overzicht-tabel: table/th/td zijn generieke
   selectors die andere onderdelen van het dashboard kunnen raken. Zelfde
   opbouw als .report-table elders in het dashboard (--gridline als
   rijscheiding, geen eigen achtergrond of schaduw: die hoort bij de
   klantkaart eromheen). */
.meta-overzicht-tabel-wrap {
  overflow-x: auto;
}
.meta-overzicht-tabel {
  width: 100%;
  border-collapse: collapse;
}
.meta-overzicht-tabel th,
.meta-overzicht-tabel td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}
.meta-overzicht-tabel tbody tr:last-child th,
.meta-overzicht-tabel tbody tr:last-child td {
  border-bottom: none;
}
.meta-overzicht-tabel thead th {
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.meta-overzicht-tabel thead th:first-child {
  text-align: left;
}
/* Getalkolommen rechts uitgelijnd, de vacaturenaam links: zonder dat
   vergelijk je niets. tabular-nums houdt cijfers even breed, zodat de
   kolommen niet trillen tussen rijen. */
.meta-overzicht-tabel tbody td {
  text-align: right;
  font-size: 14px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.meta-overzicht-tabel tbody th {
  text-align: left;
  font-weight: 600;
}
.meta-overzicht-vacature-naam-kop {
  display: flex;
  align-items: center;
  gap: 8px;
}
.meta-overzicht-vacature-naam {
  font-size: 14px;
  font-weight: 600;
}

/* Het oordeel goed/let op/slecht (zie meta-beoordeling.js). Hergebruikt
   .status-pill, alleen een maatje kleiner zodat hij naast de vacaturenaam past
   en niet met de conflict-badge om aandacht vecht. flex: none houdt hem heel
   als de naamkolom smal wordt. */
.meta-oordeel-pill {
  font-size: 11px;
  padding: 2px 9px;
  flex: none;
}

/* Zelfde signaal als op de klantpagina: een vacature waarnaar twee campagnes
   wijzen krijgt een accentrand op de naamcel, de badge zelf hergebruikt
   .meta-conflict-badge. */
.meta-overzicht-rij-conflict th {
  border-left: 3px solid var(--status-warning);
}

/* Geen koppeling, of wel gekoppeld maar geen uitgaven in deze periode: geen
   cijfers om te tonen, dus de tekst loopt over de cijferkolommen heen
   (colspan) in plaats van rechts uitgelijnd te doen alsof het een waarde is.
   white-space: normal laat de tekst wrappen in plaats van de tabel breder te
   duwen dan de cijferkolommen nodig hebben. */
.meta-overzicht-tabel td.meta-overzicht-leeg-cel {
  text-align: left;
  font-size: 13px;
  color: var(--text-muted);
  white-space: normal;
}
.meta-overzicht-tabel td.meta-overzicht-leeg-cel a {
  color: var(--text-primary);
}

/* De budgetbalk onder elke klantkaart op meta.html: uitgaven in deze periode,
   het gestorte bedrag (het enige met de hand ingevulde getal op deze pagina) en
   wat er dus over is. Geen eigen vlak maar een strook onder de tabel met een
   scheidslijn erboven: de kaart is surface-1, en dan zijn de invoervelden de
   genestelde vlakjes (surface-2) — een gevuld blok eromheen zou een derde laag
   maken die er niet is. Zelfde labels als de tabelkop erboven, zodat het als
   één geheel leest en niet als een los formulier. */
/* stretch, geen flex-end: het middelste veld is hoger dan de twee cijfervelden
   (invoerregel plus een regel voor "opgeslagen"). Op flex-end zakken de labels
   dan op drie verschillende hoogtes. Nu staan de labels van alle drie op één
   lijn bovenaan en zweeft de waarde eronder in het midden (flex: 1 op de
   waarde-regel), zodat de balk als één rij leest. */
/* Een grid en geen flexrij: een klant kan meer dan één kas hebben (twee betalers
   achter één klant), en dan komt er per kas een rij bij. In een grid lijnen de
   kolommen van die rijen vanzelf uit; met flex zou elke rij zijn eigen breedtes
   kiezen. Het kasboekje loopt over de volle breedte, direct onder zijn eigen kas.
   De eerste kolom staat alleen in de eerste rij gevuld: de uitgaven in de tabel
   horen bij de klant als geheel, niet bij één kas. */
.meta-budgetten {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 14px 28px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gridline);
}
.meta-budgetten > .meta-kas {
  grid-column: 1 / -1;
}
/* Een tweede of derde kas krijgt een eigen scheidslijn, zodat je ziet dat het
   een nieuwe kas is en niet nog een regel van de vorige. */
.meta-budget-cel-extra {
  padding-top: 14px;
  border-top: 1px solid var(--gridline);
}
@media (max-width: 720px) {
  .meta-budgetten {
    grid-template-columns: 1fr;
  }
  /* De lege cel die de eerste kolom openhoudt heeft in één kolom geen functie
     meer en zou als een gat van 14px meetellen. */
  .meta-budgetten > div.meta-budget-cel-extra:empty {
    display: none;
  }
}
.meta-budget-veld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.meta-budget-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.meta-budget-waarde {
  display: flex;
  align-items: center;
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* Meer uitgegeven dan er gestort is: hetzelfde rood als een kritieke status,
   want dat is precies het geval waarvoor deze balk bestaat. */
.meta-budget-negatief { color: var(--status-critical); }
/* Kleine regel onder een veld: wat er buiten de tabel om is uitgegeven, en of
   het bedrag al opgeslagen is. Vaste hoogte, anders springt de balk zodra de
   melding verschijnt. */
.meta-budget-noot {
  min-height: 15px;
  font-size: 11px;
  color: var(--text-muted);
}
.meta-budget-status-fout { color: var(--status-critical); }

.meta-budget-invoer {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 6px;
  flex-wrap: wrap;
}
.meta-kas-startdatum {
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
}
/* Zelfde reden als bij de periodekiezer: het kalendericoon tekent de browser
   zelf en blijft in het donker anders bijna zwart. */
@media (prefers-color-scheme: dark) {
  .meta-kas-startdatum { color-scheme: dark; }
}

/* Het kasboekje: dichtgeklapt onder de balk, want je hebt het alleen nodig als
   je iets wilt nakijken of weghalen. Open is het een genest vlak (surface-2)
   binnen de klantkaart, met daarin de startdatum, de uitleg en de regels. */
.meta-kas {
  margin-top: 12px;
}
.meta-kas > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.meta-kas > summary:hover {
  color: var(--text-primary);
}
.meta-kas-body {
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: var(--radius-tile);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.meta-kas-start {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.meta-kas-uitleg {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* De regels zelf: datum, omschrijving, bedrag, kruisje. Het bedrag rechts
   uitgelijnd met tabular-nums, zodat je de kolom kunt natellen. */
.meta-mutatie-lijst {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.meta-mutatie {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  border-top: 1px solid var(--gridline);
}
.meta-mutatie-datum {
  flex: none;
  width: 92px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.meta-mutatie-omschrijving {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
}
.meta-mutatie-bedrag {
  flex: none;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.meta-mutatie-weg {
  flex: none;
  padding: 0 4px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.meta-mutatie-weg:hover {
  color: var(--status-critical);
}
.meta-mutatie-leeg {
  color: var(--text-muted);
}

/* Het resultaat helemaal rechts, uitgelijnd op de rechterrand van de kaart —
   daar staan de cijferkolommen van de tabel erboven ook. */
.meta-budget-veld-resterend {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}
@media (max-width: 640px) {
  .meta-budget-veld-resterend {
    margin-left: 0;
    align-items: flex-start;
    text-align: left;
  }
}

/* De instellingen van een kas staan op één regel bovenin het kasboekje: naam,
   vanaf wanneer de uitgaven tellen, en de knoppen. Onderaan uitlijnen, want de
   twee velden hebben een label erboven en de knoppen niet. */
.meta-kas-start {
  align-items: flex-end;
}
.meta-kas-veld {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta-kas-naam {
  width: 150px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
}

/* De vacaturekeuze in de kas-modal. Een vacature die al bij een andere kas hoort
   staat er gedempt en uitgevinkt bij: weglaten zou de vraag oproepen waar ze
   gebleven is. */
.meta-kas-keuze {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-tile);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.meta-kas-keuze-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-primary);
}
.meta-kas-keuze-bezet {
  color: var(--text-muted);
}