/* ============================================================
   DASHBOARD-COMPONENT
   Een statisch browservenster met zijbalk, statistiekblokken en
   een tabel. Puur HTML en CSS — geen JavaScript nodig.

   GEBRUIK
   1. Neem dashboard.css op in je pagina.
   2. Plak de markup uit dashboard.html waar je hem wilt tonen.
   3. Pas hieronder de variabelen aan. De rest volgt vanzelf.

   Alle klassen beginnen met "dash-", dus ze botsen niet met je
   bestaande stijlen.
============================================================ */

.dash {
  /* ── Kleuren ─────────────────────────────────────────── */
  --dash-venster:        #0A0A0A;               /* achtergrond van het venster */
  --dash-zijbalk:        #050505;               /* zijbalk, iets donkerder */
  --dash-kaart:          #111111;               /* statistiekblokken en tabel */
  --dash-balk:           #050505;               /* de browserbalk bovenin */
  --dash-tekst:          #FFFFFF;
  --dash-gedempt:        rgba(255, 255, 255, 0.62);
  --dash-lijn:           rgba(255, 255, 255, 0.12);
  --dash-accent:         #CFFA38;               /* vervang door je eigen merkkleur */
  --dash-accent-zacht:   rgba(207, 250, 56, 0.12);

  /* Accentkleur wanneer die als TEKST wordt gebruikt. Op een donkere achtergrond
     kan dat dezelfde kleur zijn. Op een lichte achtergrond niet: limegroen op wit
     haalt maar 1,2:1 en is dan onleesbaar. Zie het lichte thema hieronder. */
  --dash-accent-tekst:   var(--dash-accent);

  /* ── Statuskleuren ───────────────────────────────────── */
  --dash-bezig:          #FFBD2E;
  --dash-klaar:          #27C93F;
  --dash-neutraal:       rgba(255, 255, 255, 0.06);

  /* ── Typografie ──────────────────────────────────────── */
  --dash-font:           'Manrope', system-ui, -apple-system, sans-serif;
  --dash-font-kop:       'Archivo Black', 'Manrope', sans-serif;
  --dash-font-mono:      'JetBrains Mono', ui-monospace, monospace;

  /* ── Vorm ────────────────────────────────────────────── */
  --dash-radius:         14px;
  --dash-radius-klein:   8px;
  --dash-schaduw:        0 40px 120px rgba(0, 0, 0, 0.5);

  /* ── Afmetingen ──────────────────────────────────────── */
  --dash-zijbalk-breedte: 210px;
}

/* Licht thema: zet class="dash dash-licht" op het venster. */
.dash-licht {
  --dash-venster:      #FFFFFF;
  --dash-zijbalk:      #F5F5F3;
  --dash-kaart:        #FAFAF8;
  --dash-balk:         #EFEFEC;
  --dash-tekst:        #0A0A0A;
  --dash-gedempt:      rgba(10, 10, 10, 0.62);
  --dash-lijn:         rgba(10, 10, 10, 0.12);
  --dash-neutraal:     rgba(10, 10, 10, 0.05);
  --dash-schaduw:      0 30px 80px rgba(0, 0, 0, 0.12);

  /* Vlakken houden de merkkleur, maar tekst wordt donker: de accentkleur zelf
     is op wit niet te lezen. Gebruik je een andere merkkleur, zet dan hier een
     donkere variant daarvan neer (streef naar minimaal 4,5:1 op wit). */
  --dash-accent-tekst: #4A5D06;
  --dash-accent-zacht: rgba(207, 250, 56, 0.30);
}

/* ── Het venster ──────────────────────────────────────────── */
.dash {
  font-family: var(--dash-font);
  color: var(--dash-tekst);
  background: var(--dash-venster);
  border: 1px solid var(--dash-lijn);
  border-radius: var(--dash-radius);
  overflow: hidden;
  box-shadow: var(--dash-schaduw);
  max-width: 1180px;
  margin: 0 auto;
  line-height: 1.5;
}
.dash *, .dash *::before, .dash *::after { box-sizing: border-box; }

/* ── Browserbalk ──────────────────────────────────────────── */
.dash-balk {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: var(--dash-balk);
  border-bottom: 1px solid var(--dash-lijn);
}
.dash-stippen { display: flex; gap: 6px; flex: 0 0 auto; }
.dash-stippen span { width: 11px; height: 11px; border-radius: 50%; display: block; }
.dash-stippen span:nth-child(1) { background: #FF5F57; }
.dash-stippen span:nth-child(2) { background: #FFBD2E; }
.dash-stippen span:nth-child(3) { background: #27C93F; }
.dash-url {
  flex: 1;
  text-align: center;
  font-family: var(--dash-font-mono);
  font-size: 11px;
  color: var(--dash-gedempt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-url strong { color: var(--dash-accent-tekst); font-weight: 500; }

/* ── Indeling ─────────────────────────────────────────────── */
.dash-body {
  display: grid;
  grid-template-columns: var(--dash-zijbalk-breedte) 1fr;
  min-height: 420px;
}

/* ── Zijbalk ──────────────────────────────────────────────── */
.dash-zijbalk {
  padding: 22px 16px;
  background: var(--dash-zijbalk);
  border-right: 1px solid var(--dash-lijn);
}
.dash-merk {
  font-family: var(--dash-font-kop);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 6px 12px;
  margin-bottom: 20px;
}
.dash-merk span { color: var(--dash-accent-tekst); }

.dash-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dash-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--dash-radius-klein);
  font-size: 13px;
  color: var(--dash-gedempt);
}
.dash-menu li[aria-current="page"] {
  background: var(--dash-accent-zacht);
  color: var(--dash-accent-tekst);
}
.dash-menu .dash-ic {
  width: 16px;
  text-align: center;
  font-family: var(--dash-font-mono);
  font-size: 11px;
  flex: 0 0 auto;
}
.dash-menu .dash-badge {
  margin-left: auto;
  font-family: var(--dash-font-mono);
  font-size: 10px;
  color: var(--dash-accent-tekst);
}

.dash-scheiding { margin: 18px 0; border-top: 1px solid var(--dash-lijn); }

.dash-gebruiker { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.dash-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--dash-accent);
  color: #0A0A0A;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  flex: 0 0 auto;
}
.dash-gebruiker .dash-naam { font-size: 12px; font-weight: 600; }
.dash-gebruiker .dash-mail { font-size: 10px; color: var(--dash-gedempt); }

/* ── Hoofdgedeelte ────────────────────────────────────────── */
.dash-main { padding: 26px 30px; min-width: 0; }

.dash-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.dash-kop h3 {
  font-family: var(--dash-font-kop);
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 4px;
}
.dash-kop .dash-sub { font-size: 12px; color: var(--dash-gedempt); }

.dash-melding {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--dash-accent);
  border-radius: 999px;
  background: var(--dash-accent-zacht);
  color: var(--dash-accent-tekst);
  font-family: var(--dash-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dash-melding::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dash-accent);
}

/* ── Statistiekblokken ────────────────────────────────────── */
.dash-cijfers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.dash-cijfer {
  padding: 16px;
  background: var(--dash-kaart);
  border: 1px solid var(--dash-lijn);
  border-radius: var(--dash-radius-klein);
  min-width: 0;
}
.dash-cijfer .dash-label {
  font-family: var(--dash-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dash-gedempt);
  margin-bottom: 8px;
}
.dash-cijfer .dash-waarde {
  font-family: var(--dash-font-kop);
  font-size: 30px;
  line-height: 1;
  overflow-wrap: break-word;
}
.dash-cijfer .dash-toelichting {
  margin-top: 6px;
  font-family: var(--dash-font-mono);
  font-size: 10px;
  color: var(--dash-accent-tekst);
}

/* ── Tabel ────────────────────────────────────────────────── */
.dash-tabel {
  background: var(--dash-kaart);
  border: 1px solid var(--dash-lijn);
  border-radius: var(--dash-radius-klein);
  overflow: hidden;
}
.dash-rij, .dash-tabelkop {
  display: grid;
  grid-template-columns: 1.6fr 1.1fr 0.9fr 1.1fr 0.7fr;
  gap: 14px;
  align-items: center;
}
.dash-tabelkop {
  padding: 12px 18px;
  border-bottom: 1px solid var(--dash-lijn);
  font-family: var(--dash-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dash-gedempt);
}
.dash-rij {
  padding: 13px 18px;
  border-bottom: 1px solid var(--dash-lijn);
  font-size: 13px;
}
.dash-rij:last-child { border-bottom: none; }

.dash-persoon { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dash-persoon .dash-avatar {
  background: var(--dash-neutraal);
  border: 1px solid var(--dash-lijn);
  color: var(--dash-accent-tekst);
  width: 30px; height: 30px;
  font-size: 10px;
}
.dash-persoon .dash-detail { font-size: 11px; color: var(--dash-gedempt); }

.dash-status {
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dash-status[data-status="bezig"]  { background: rgba(255,189,46,0.12); color: var(--dash-bezig); border: 1px solid rgba(255,189,46,0.3); }
.dash-status[data-status="gezien"] { background: var(--dash-accent-zacht); color: var(--dash-accent-tekst); border: 1px solid var(--dash-accent); }
.dash-status[data-status="wacht"]  { background: var(--dash-neutraal); color: var(--dash-gedempt); border: 1px solid var(--dash-lijn); }
.dash-status[data-status="klaar"]  { background: rgba(39,201,63,0.12); color: var(--dash-klaar); border: 1px solid rgba(39,201,63,0.3); }

.dash-meta { font-family: var(--dash-font-mono); font-size: 11px; color: var(--dash-gedempt); }
.dash-actie { font-family: var(--dash-font-mono); font-size: 11px; color: var(--dash-accent-tekst); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .dash-body { grid-template-columns: 1fr; }
  .dash-zijbalk { display: none; }
  .dash-rij, .dash-tabelkop { grid-template-columns: 1.5fr 1fr 0.9fr; }
  .dash-verbergen-klein { display: none; }
}
/* Vier blokken naast elkaar wordt krap zodra de zijbalk verdwijnt;
   vanaf hier twee per rij. */
@media (max-width: 860px) {
  .dash-cijfers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .dash-main { padding: 20px 16px; }
  .dash-kop h3 { font-size: 21px; }
}
@media (max-width: 460px) {
  .dash-cijfers { gap: 8px; }
  .dash-cijfer { padding: 13px 11px; }
  .dash-cijfer .dash-waarde { font-size: 23px; }
  .dash-rij, .dash-tabelkop { padding: 10px 12px; gap: 8px; font-size: 12px; }
  .dash-url { font-size: 10px; }
}

/* Wie verminderde beweging heeft ingesteld, krijgt geen overgangen. */
@media (prefers-reduced-motion: reduce) {
  .dash * { transition: none !important; animation: none !important; }
}

/* ============================================================
   MATCHSUITE-THEMA  (toevoeging, niet uit het originele component)
   Gebruik:  <div class="dash dash-licht dash-matchsuite"> … </div>

   Waarom deze laag bestaat:
   - De site host lettertypen LOKAAL (AVG: geen Google Fonts-verzoeken).
     Archivo Black en JetBrains Mono staan niet op de server, dus die worden
     hier vervangen door Fraunces (display) en de systeem-monospace.
   - De merkkleur is teal. Op wit haalt --teal (#0f8f86) maar ~3,3:1, dus voor
     TEKST gebruiken we --teal-deep (#0d665f, ~5,4:1 → WCAG AA).
   - Vlakken/paneel volgen de papier-kleuren van de site i.p.v. grijstinten.
============================================================ */
.dash-matchsuite {
  --dash-font:         'Manrope', system-ui, -apple-system, sans-serif;
  --dash-font-kop:     'Fraunces', Georgia, serif;
  --dash-font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --dash-accent:       #0f8f86;
  --dash-accent-zacht: rgba(15, 143, 134, 0.14);
  --dash-accent-tekst: #0d665f;

  --dash-venster:      #fffaf1;
  --dash-zijbalk:      #f8efe2;
  --dash-kaart:        #fffaf1;
  --dash-balk:         #f3eee5;
  --dash-tekst:        #121b2d;
  --dash-gedempt:      #5d6879;
  --dash-lijn:         rgba(18, 27, 45, 0.12);
  --dash-neutraal:     rgba(18, 27, 45, 0.05);

  /* Let op: op de crème achtergrond haalt het originele amber (#e9a93e) maar
     2,0:1 als tekstkleur. Daarom hier een donkere variant (±5,4:1). */
  --dash-bezig:        #8a5a05;
  --dash-klaar:        #0d665f;

  --dash-radius:       16px;
  --dash-schaduw:      0 16px 44px rgba(18, 27, 45, 0.08);
}

/* Statusvlakken meekleuren met het MatchSuite-palet (het origineel had een
   groene "klaar"-tint; die botst met de teal tekstkleur). */
.dash-matchsuite .dash-status[data-status="bezig"] {
  background: rgba(233, 169, 62, 0.16);
  border-color: rgba(138, 90, 5, 0.35);
}
.dash-matchsuite .dash-status[data-status="klaar"] {
  background: rgba(15, 143, 134, 0.12);
  border-color: rgba(15, 143, 134, 0.35);
}

/* ============================================================
   MATCHSUITE-APPLAAG — nabootsing van het échte platformscherm
   Gebruik:  <div class="dash dash-licht dash-matchsuite dash-app"> … </div>

   Deze laag bouwt op het component en zet het om naar de indeling van
   het echte MatchSuite-dashboard: donkere zijbalk met menugroepen, een
   witte werkbalk, vier KPI-tegels, de lijst "Vandaag prioriteit" met een
   aandacht-kolom ernaast, en de pipeline-strip onderaan.

   Alles is HTML + CSS. Geen JavaScript, geen screenshot: het blijft
   scherp op elk scherm en schaalt mee op mobiel.
============================================================ */
.dash-app {
  --dash-blauw:        #2563eb;
  --dash-blauw-diep:   #1d4ed8;
  --dash-navy:         #0f1a2b;
  --dash-navy-2:       #16233a;
  --dash-werkvlak:     #f4f6fa;
  --dash-zijbalk-breedte: 228px;

  --dash-venster:      #ffffff;
  --dash-kaart:        #ffffff;
  --dash-balk:         #eef1f6;
  --dash-tekst:        #101a2b;
  --dash-gedempt:      #5a677d;
  --dash-lijn:         #e3e8f0;
  --dash-radius:       16px;
  --dash-radius-klein: 12px;
}
.dash-app .dash-body { background: var(--dash-werkvlak); min-height: 520px; }

/* ── Donkere zijbalk ──────────────────────────────────────── */
.dash-app .dash-zijbalk {
  background: var(--dash-navy);
  border-right: none;
  padding: 18px 12px 20px;
  color: rgba(255, 255, 255, 0.72);
}
.dash-app .dash-merk {
  font-family: var(--dash-font);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #ffffff;
  padding: 4px 10px 0;
  margin-bottom: 2px;
}
.dash-app .dash-merk span { color: #35c9bd; }
.dash-app .dash-merk-sub {
  padding: 0 10px;
  margin-bottom: 20px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
}
.dash-app .dash-groep {
  padding: 0 10px;
  margin: 16px 0 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.dash-app .dash-menu li {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 9px;
}
.dash-app .dash-menu li[aria-current="page"] {
  background: var(--dash-navy-2);
  color: #ffffff;
  font-weight: 700;
}
.dash-app .dash-menu .dash-ic {
  width: 17px;
  height: 17px;
  color: rgba(255, 255, 255, 0.62);
  display: grid;
  place-items: center;
}
.dash-app .dash-menu .dash-ic svg { width: 14px; height: 14px; }
.dash-app .dash-menu li[aria-current="page"] .dash-ic { color: #7ba9ff; }
.dash-app .dash-menu .dash-badge {
  font-family: var(--dash-font);
  font-weight: 800;
  font-size: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d92d3c;
  color: #ffffff;
  display: inline-grid;
  place-items: center;
}
.dash-app .dash-scheiding { border-color: rgba(255, 255, 255, 0.14); margin: 14px 6px; }

/* ── Werkbalk bovenin het werkvlak ────────────────────────── */
.dash-app .dash-main { padding: 0; display: flex; flex-direction: column; }
.dash-werkbalk {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--dash-lijn);
  flex-wrap: wrap;
}
.dash-werkbalk-titel { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dash-werkbalk-titel h3 {
  font-family: var(--dash-font);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.015em;
  margin: 0;
}
.dash-werkbalk-titel .dash-sub { font-size: 11.5px; color: var(--dash-gedempt); margin-top: 1px; }
.dash-zoek {
  flex: 1 1 190px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--dash-lijn);
  border-radius: 9px;
  background: #fbfcfe;
  color: #66738a;
  font-size: 12px;
}
.dash-zoek svg { width: 14px; height: 14px; flex: 0 0 auto; }
.dash-knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.dash-knop svg { width: 14px; height: 14px; }
.dash-knop-rand { border: 1px solid #c4d3ee; color: var(--dash-blauw-diep); background: #ffffff; }
.dash-knop-vol { background: var(--dash-blauw); color: #ffffff; }
.dash-rond {
  width: 32px;
  height: 32px;
  border: 1px solid var(--dash-lijn);
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #55627a;
  background: #ffffff;
  flex: 0 0 auto;
}
.dash-rond svg { width: 15px; height: 15px; }

/* ── Inhoud ───────────────────────────────────────────────── */
.dash-werkvlak { padding: 16px 20px 20px; display: grid; gap: 14px; }

.dash-app .dash-cijfers { margin-bottom: 0; gap: 14px; }
.dash-app .dash-cijfer {
  padding: 15px 16px;
  border-radius: var(--dash-radius-klein);
  border-color: var(--dash-lijn);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
}
.dash-app .dash-cijfer .dash-label {
  grid-column: 1;
  font-family: var(--dash-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #45526a;
  margin-bottom: 6px;
}
.dash-app .dash-cijfer .dash-chip { grid-column: 2; grid-row: 1 / span 3; }
.dash-app .dash-cijfer .dash-waarde {
  grid-column: 1;
  font-family: var(--dash-font);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
}
.dash-app .dash-cijfer .dash-toelichting {
  grid-column: 1;
  font-family: var(--dash-font);
  font-size: 11px;
  color: var(--dash-gedempt);
  margin-top: 5px;
}

.dash-chip {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #eaf0fb;
  color: #2c4a86;
}
.dash-chip svg { width: 15px; height: 15px; }
.dash-chip[data-kleur="teal"] { background: #e1f4f0; color: #0d665f; }
.dash-chip[data-kleur="amber"] { background: #fbeed6; color: #85570a; }
.dash-chip[data-kleur="rood"] { background: #fbe7e8; color: #a3252f; }
.dash-chip[data-kleur="paars"] { background: #ede7fb; color: #563aad; }

/* ── Twee kolommen: prioriteitenlijst + aandacht ──────────── */
.dash-kolommen { display: grid; grid-template-columns: 1.6fr 0.85fr; gap: 14px; align-items: start; }
.dash-paneel {
  background: var(--dash-kaart);
  border: 1px solid var(--dash-lijn);
  border-radius: var(--dash-radius-klein);
  overflow: hidden;
}
.dash-paneel-kop {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px 12px;
  flex-wrap: wrap;
}
.dash-paneel-kop h4 {
  font-family: var(--dash-font);
  font-weight: 800;
  font-size: 14px;
  margin: 0;
}
.dash-paneel-kop .dash-paneel-sub {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--dash-gedempt);
}
.dash-paneel-kop .dash-link {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--dash-blauw-diep);
  white-space: nowrap;
}
.dash-paneel-kop .dash-telling { margin-left: auto; font-size: 11px; color: var(--dash-gedempt); }

.dash-taak {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--dash-lijn);
}
.dash-taak-titel { font-size: 13px; font-weight: 700; }
.dash-taak-tekst { font-size: 11.5px; color: var(--dash-gedempt); margin-top: 2px; }
.dash-taak .dash-pijl { color: #8d99ad; }
.dash-taak .dash-pijl svg { width: 14px; height: 14px; display: block; }

.dash-aandacht-item {
  margin: 0 14px 12px;
  padding: 12px;
  border: 1px solid var(--dash-lijn);
  border-radius: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}
.dash-aandacht-item .dash-taak-titel { font-size: 12.5px; }
.dash-aandacht-item .dash-groot {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 2px 0 1px;
}

/* ── Pipeline-strip ───────────────────────────────────────── */
.dash-fases { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; padding: 0 14px 14px; }
.dash-fase {
  border: 1px solid var(--dash-lijn);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.dash-fase .dash-chip { margin: 0 auto 7px; }
.dash-fase-getal { font-weight: 800; font-size: 18px; }
.dash-fase-naam { font-size: 10px; color: var(--dash-gedempt); margin-top: 3px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1080px) {
  .dash-app .dash-cijfers { grid-template-columns: repeat(2, 1fr); }
  .dash-fases { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) {
  .dash-kolommen { grid-template-columns: 1fr; }
  .dash-werkbalk .dash-zoek { order: 3; flex-basis: 100%; }
}
@media (max-width: 620px) {
  .dash-werkvlak { padding: 12px 12px 14px; }
  .dash-werkbalk { padding: 12px 14px; gap: 10px; }
  .dash-fases { grid-template-columns: repeat(2, 1fr); }
  .dash-app .dash-cijfer .dash-waarde { font-size: 25px; }
  .dash-verbergen-smal { display: none; }
}

/* De "Voorbeeldweergave"-pill staat als los item in het grid-werkvlak; zonder
   justify-self zou hij over de volle breedte uitrekken. */
.dash-app .dash-werkvlak > .dash-melding { justify-self: start; }

/* Het e-mailadres onderin de zijbalk erft --dash-gedempt, en dat is in deze laag
   een donkergrijs voor lichte kaarten: op de navy zijbalk haalt dat maar 3,1:1.
   Hier expliciet een lichte tint (±9:1). */
.dash-app .dash-gebruiker .dash-mail { color: rgba(255, 255, 255, 0.7); }


/* ═══════════════════════════════════════════════════════════════════════════
   MINI-SCHERMEN — nabootsing van pipeline, matchfinder en matchregister

   Geen screenshots: net als het dashboard is dit HTML, zodat het scherp blijft
   op elk scherm, meeschaalt op mobiel en leesbaar is voor zoekmachines.
   De getoonde gegevens zijn voorbeelden en komen overeen met het echte product.
   ═══════════════════════════════════════════════════════════════════════════ */
.mini {
  background: var(--dash-werkvlak);
  font-family: var(--dash-font);
  color: var(--dash-tekst);
  padding: 14px;
  display: grid;
  gap: 12px;
  min-height: 340px;
  align-content: start;
}

/* Kop van het scherm: titel links, knop rechts. */
.mini-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mini-kop strong { display: block; font-size: 15px; letter-spacing: -0.01em; }
/* Alleen de ondertitel naast de schermnaam, niet elke span in de kop: de knop
   rechts is ook een span en kreeg zo grijze tekst op een blauw vlak. */
.mini-kop > div span { display: block; font-size: 11px; color: var(--dash-gedempt); }
.mini-knop {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--dash-blauw);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.mini-knop-rand {
  background: #fff;
  color: var(--dash-blauw);
  border: 1px solid var(--dash-lijn);
}

/* Rij met filterpillen, zoals boven de kolommen in de pipeline. */
.mini-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-pil {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--dash-lijn);
  color: var(--dash-gedempt);
  white-space: nowrap;
}
.mini-pil[data-actief] { background: var(--dash-blauw); border-color: var(--dash-blauw); color: #fff; }

/* ── Pipeline: kolommen met kaarten ──────────────────────────────────────── */
.mini-kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini-kolom {
  background: #fff;
  border: 1px solid var(--dash-lijn);
  border-radius: 12px;
  padding: 9px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.mini-kolom-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.mini-kolom-kop b {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--dash-werkvlak);
  color: var(--dash-gedempt);
}
.mini-kaart {
  border: 1px solid var(--dash-lijn);
  border-radius: 9px;
  padding: 8px 9px;
  display: grid;
  gap: 3px;
}
.mini-kaart strong { font-size: 11.5px; letter-spacing: -0.01em; }
.mini-kaart span { font-size: 10px; color: var(--dash-gedempt); line-height: 1.35; }
.mini-vlag {
  justify-self: start;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  background: var(--dash-werkvlak);
  color: var(--dash-gedempt);
  border: 1px solid var(--dash-lijn);
}
.mini-vlag[data-kleur="teal"] { background: rgba(15,143,134,0.12); color: #0d665f; border-color: rgba(15,143,134,0.28); }
.mini-vlag[data-kleur="blauw"] { background: rgba(27,58,99,0.10); color: #1b3a63; border-color: rgba(27,58,99,0.22); }
.mini-vlag[data-kleur="amber"] { background: rgba(233,169,62,0.18); color: #8a5a12; border-color: rgba(233,169,62,0.34); }

/* ── Matchfinder: kerngetallen en suggesties ─────────────────────────────── */
.mini-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini-cijfer {
  background: #fff;
  border: 1px solid var(--dash-lijn);
  border-radius: 12px;
  padding: 10px 11px;
  display: grid;
  gap: 2px;
}
.mini-cijfer span { font-size: 10px; color: var(--dash-gedempt); }
.mini-cijfer strong { font-size: 22px; letter-spacing: -0.03em; line-height: 1.1; }
.mini-cijfer em { font-style: normal; font-size: 9.5px; color: var(--dash-gedempt); }

.mini-lijst {
  background: #fff;
  border: 1px solid var(--dash-lijn);
  border-radius: 12px;
  overflow: hidden;
}
.mini-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border-bottom: 1px solid var(--dash-lijn);
}
.mini-rij:last-child { border-bottom: none; }
.mini-rij strong { display: block; font-size: 11.5px; letter-spacing: -0.01em; }
.mini-rij span { display: block; font-size: 10px; color: var(--dash-gedempt); }
/* De selector is bewust specifiek: de algemene regel voor `span` in de
   lijst- en tabelrijen won anders van de kleur hieronder, waardoor het cijfer
   grijs werd op een gekleurd vlak. */
.mini .mini-score {
  min-width: 30px;
  text-align: center;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(15,143,134,0.12);
  color: #0d665f;
}
.mini .mini-score[data-niveau="midden"] { background: rgba(233,169,62,0.18); color: #8a5a12; }

/* ── Matchregister: tabel ────────────────────────────────────────────────── */
.mini-tabel { background: #fff; border: 1px solid var(--dash-lijn); border-radius: 12px; overflow: hidden; }
.mini-tabelkop, .mini-tabelrij {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) 42px minmax(0, 0.95fr);
  gap: 9px;
  align-items: center;
  padding: 9px 11px;
}
.mini-tabelkop {
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dash-gedempt);
  border-bottom: 1px solid var(--dash-lijn);
  font-weight: 700;
}
.mini-tabelrij { border-bottom: 1px solid var(--dash-lijn); font-size: 11px; }
.mini-tabelrij:last-child { border-bottom: none; }
.mini-tabelrij b { font-weight: 700; letter-spacing: -0.01em; }
.mini-tabelrij span { color: var(--dash-gedempt); font-size: 10.5px; line-height: 1.3; }

@media (max-width: 1080px) {
  /* Naast de tekstkolom wordt het venster smal; dan is de derde kolom te veel. */
  .mini-kolommen, .mini-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-kolommen > :nth-child(3), .mini-cijfers > :nth-child(3) { display: none; }
}
@media (max-width: 900px) {
  /* Onder de 900 px staat het venster over de volle breedte: alles past weer. */
  .mini-kolommen, .mini-cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mini-kolommen > :nth-child(3), .mini-cijfers > :nth-child(3) { display: grid; }
}
@media (max-width: 560px) {
  .mini-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-kolommen > :nth-child(3) { display: none; }
  .mini-tabelkop, .mini-tabelrij { grid-template-columns: minmax(0, 1.2fr) 40px minmax(0, 1fr); }
  .mini-tabelkop > :nth-child(2), .mini-tabelrij > :nth-child(2) { display: none; }
}