/* =========================================================================
   DIRK — portal stylesheet
   Wit papier variant van DIRK-UI-STYLEGUIDE.md
   VT323 terughoudend: alleen voor DIRK's eigen stem (terminal, LCD-tag).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Inter:wght@400;500;600;700&display=swap');

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

:root {
  /* Canvas — wit papier */
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --surface: #ffffff;
  --border: #e5e4dc;
  --border-soft: #f0efe8;
  --border-strong: #cdccc2;

  /* Tekst */
  --text: #1a1a1a;
  --text-muted: #6e6e66;
  --text-faint: #9a9890;
  /* --text-dim: zelfde token als wiz-body op het advies-formulier.
     Gebruikt voor secondary cues binnen velden (€-prefix, %-suffix,
     kosten-tabel kolomtitels, .hint-tekstjes). */
  --text-dim: rgba(0,0,0,0.42);

  /* --panel-2: subtiele canvas-tint binnen blokken. Gebruikt door
     .kosten-panel zodat de tabel zich visueel onderscheidt van de
     omliggende tx-block. */
  --panel-2: var(--bg-soft);

  /* DIRK LCD (olive) */
  --lcd-bg: #a6b285;
  --lcd-bg-dark: #8c9871;
  --lcd-bezel: #6b7a4a;
  --lcd-ink: #1a1a1a;

  /* Merk / accenten */
  --teer-red: #D4010C;
  --teer-red-hover: #a4000b;
  --teer-red-bg: rgba(212, 1, 12, 0.08);
  --olive: #6b7a4a;
  --warm: #e8a935;

  /* Status */
  --status-green: #5a9e3f;
  --status-orange: #e8a935;
  --status-red: #D4010C;
  --status-blue: #3a7bc8;
  --status-grey: #888;

  /* DIRK-paneel (donker) */
  --panel-bg: #1a1a1a;
  --panel-bg-soft: #222;
  --panel-border: #2a2a2a;

  /* Utilities */
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(0,0,0,0.04);
}

html, body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* =========================================================================
   HEADER
   ========================================================================= */

.topbar {
  background: #1a1a1a;
  border-bottom: 2px solid var(--teer-red);
  position: sticky; top: 0; z-index: 50;
}
/* 3-koloms grid: brand (1fr) | nav (auto, centraal) | user-chip (1fr).
   Doordat links en rechts gelijke fracties krijgen blijft de nav altijd
   dezelfde positie houden ongeacht de lengte van de pagina-titel. */
.topbar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 28px; max-width: 1440px; margin: 0 auto;
  gap: 16px;
  position: relative;
}
.brand { display: flex; align-items: center; gap: 18px; justify-self: start; min-width: 0; }
.nav { justify-self: center; }
.user-chip { justify-self: end; }

/* Hamburger (alleen mobiel) */
.nav-toggle {
  display: none;
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  color: #bbb; font-size: 18px; line-height: 1; cursor: pointer;
  padding: 6px 10px; border-radius: 3px;
  font-family: inherit;
}
.nav-toggle:hover { color: #fff; background: #2a2a2a; border-color: rgba(255,255,255,0.3); }
.dirk-slot { display: flex; align-items: center; gap: 10px; }
.dirk-lcd {
  background: var(--lcd-bg); border: 1px solid var(--lcd-bezel);
  border-radius: 4px; padding: 3px 14px 1px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.dirk-lcd-text {
  font-family: 'VT323', monospace; font-size: 30px;
  color: var(--lcd-ink); letter-spacing: 5px; line-height: 1;
  display: block;
}
.dirk-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--status-green);
  box-shadow: 0 0 6px rgba(90,158,63,0.7);
  animation: breathe 2.2s ease-in-out infinite;
  margin-left: 2px;
}
.dirk-subtitle {
  font-size: 13px; color: #bbb; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  color: #bbb; padding: 7px 14px; font-size: 13px;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.nav a.active { background: var(--teer-red); color: #fff; }
.nav a:hover:not(.active) { background: #2a2a2a; color: #fff; }

.user-chip {
  display: flex; align-items: center; gap: 10px;
  color: #ddd; font-size: 12px;
}
.user-chip .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--teer-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11px; letter-spacing: 0.5px;
}
.user-chip a { color: #888; font-size: 11px; text-decoration: none; }
.user-chip a:hover { color: #fff; }

/* ===== Beheer-tandwiel — directe link naar /beheer-overzicht =====
   Rood, transparant, op zichzelf staand. Match-hoogte met de
   2-regelige user-chip (naam + uitloggen). Glow on hover.
   Alleen zichtbaar voor role=admin. */
.admin-cog {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent;
  border: none; border-radius: 0; padding: 0;
  color: var(--teer-red);
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.admin-cog svg { width: 28px; height: 28px; display: block; }
.admin-cog:hover {
  filter: drop-shadow(0 0 6px rgba(212, 1, 12, 0.85))
          drop-shadow(0 0 14px rgba(212, 1, 12, 0.45));
  transform: rotate(-15deg);   /* wrench: kantelen, niet roteren als tandwiel */
}
.admin-cog.active {
  filter: drop-shadow(0 0 4px rgba(212, 1, 12, 0.7));
}

/* =========================================================================
   MAIN LAYOUT
   ========================================================================= */

main { max-width: 1440px; margin: 0 auto; padding: 14px 28px 40px; }

.page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 20px; gap: 16px; flex-wrap: wrap;
}
.page-head h1 {
  font-size: 24px; font-weight: 500; letter-spacing: -0.01em;
}
.page-head .page-sub {
  font-size: 13px; color: var(--text-muted);
}

.greeting { margin-bottom: 24px; }
.greeting h1 { font-size: 26px; font-weight: 500; margin-bottom: 4px; letter-spacing: -0.01em; }
.greeting p { color: var(--text-muted); font-size: 14px; }
.dirk-inline {
  font-family: 'VT323', monospace; font-size: 16px;
  background: var(--lcd-bg); color: var(--lcd-ink);
  padding: 1px 6px; border-radius: 2px;
  border: 1px solid var(--lcd-bezel);
  letter-spacing: 1px; display: inline-block; line-height: 1.2;
  vertical-align: baseline;
}

/* =========================================================================
   SUB-BAR (formulier: context + acties)
   ========================================================================= */

.subbar {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 28px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  position: sticky; top: 52px; z-index: 40;
  min-height: 54px;
  box-sizing: border-box;
}

/* Uniform hoogte voor alle interactieve subbar-elementen, zodat de subbar
   geen sprong maakt tussen pagina's (eerder: select 29px, input 30px, btn 43px
   op transacties → veroorzaakte 9px verschil in totaal-hoogte). */
.subbar select,
.subbar input[type="text"],
.subbar input[type="search"],
.subbar .btn,
.subbar .btn.sm {
  height: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  line-height: 1;
}
.subbar .subbar-inner {
  max-width: 1440px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 14px;
}
.subbar .sub-title { font-weight: 600; }
.subbar .sub-meta { color: var(--text-muted); font-size: 12px; }
.subbar .sub-spacer { flex: 1; }

/* Klein uppercase context-label vóór een filter ("Vestiging", "Jaar", "Type"). */
.subbar .ctx-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted); font-weight: 500;
}

/* Subbar-select: rechte hoeken, custom chevron-SVG ipv native pijltje.
   Vervangt de inline-style die in 4 mockup-templates gedupliceerd was. */
.subbar select {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0; padding: 0 24px 0 10px;
  font-family: inherit; font-size: 13px; color: var(--text);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236e6e66' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
  cursor: pointer; width: auto;
}

/* =========================================================================
   KPI TILES — Inter, subtle olive-accent (geen full LCD)
   ========================================================================= */

.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 24px;
}
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.kpi-label {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500;
}
.kpi-value {
  font-size: 28px; font-weight: 500; color: var(--text);
  letter-spacing: -0.01em; line-height: 1.1;
}
/* Kleinere variant — voor secundaire KPI's of meta-info-tegels
   (bv. "Laatste sync: 2u geleden"). */
.kpi-value.small { font-size: 15px; line-height: 1.35; padding-top: 4px; }
.kpi-sub {
  font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px; margin-top: auto;
}
.kpi.accent { border-left: 3px solid var(--olive); }
.kpi.accent-red { border-left: 3px solid var(--teer-red); }
.kpi.accent-warm { border-left: 3px solid var(--warm); }
.kpi-value.pos { color: var(--status-green); }
.kpi-value.neg { color: var(--teer-red); }
.trend-up { color: var(--status-green); }
.trend-down { color: var(--status-red); }

/* TODO-lint: diagonale ribbon in de rechterbovenhoek voor placeholders
   (KPIs / modules die nog niet zijn aangesloten op real data). Content
   binnen het tegel/blok wordt gedimd zodat het direct visueel duidelijk
   is dat de cijfers nog niet kloppen. Gebruik: <div class="kpi is-todo">. */
.is-todo {
  position: relative;
  overflow: hidden;
}
.is-todo::after {
  content: 'TO DO';
  position: absolute;
  top: 14px;
  right: -36px;
  transform: rotate(45deg);
  background: var(--warm);
  color: #1a1a1a;
  font-family: 'VT323', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 3px 40px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  z-index: 2;
  pointer-events: none;
}
.is-todo .kpi-value,
.is-todo .kpi-sub,
.is-todo .module-title,
.is-todo .row {
  opacity: 0.42;
}

/* Progress-bar binnen .kpi (budget-realisatie). 6 px hoog, olive default,
   teer-rood bij over-budget via .kpi-progress span.over (of nesting). */
.kpi .progress, .kpi-progress {
  margin-top: 10px; height: 6px;
  background: var(--border-soft); overflow: hidden;
}
.kpi .progress span, .kpi-progress span {
  display: block; height: 100%;
  background: var(--olive);
}
.kpi .progress span.over, .kpi-progress span.over {
  background: var(--teer-red);
}

/* =========================================================================
   MODULE CARDS
   ========================================================================= */

.modules { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }

.card, .module {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0; padding: 18px 20px;
}
.card.mb-2 { margin-bottom: 16px; }

/* Form-card breedte — gebaseerd op desktop als basis (volle main-
   breedte voelt te wijd voor 1-koloms-formulier; 1200px geeft genoeg
   ruimte voor 3-koloms-grids in grote vensters). Below max-content
   automatisch responsive via grid media-queries in macros. */
.card.narrow {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.card h2 {
  font-size: 14px; font-weight: 600; margin-bottom: 12px;
}
.card h2 .muted {
  color: var(--text-muted); font-weight: 400; font-size: 12px;
}

.module-header, .card-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
}
.module-title, .card-title {
  font-size: 14px; font-weight: 600;
}
.module-meta { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.module-action {
  font-size: 12px; color: var(--olive);
  display: inline-flex; align-items: center; gap: 4px;
}
.module-action:hover { text-decoration: underline; }

h2 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
h3 { font-size: 13px; font-weight: 600; margin-bottom: 8px; }

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: 12px; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 20px; }
.mb-2 { margin-bottom: 16px; }

/* =========================================================================
   ROWS (list items)
   ========================================================================= */

.row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 13px; gap: 10px;
}
.row:last-child { border-bottom: none; }
.row-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.row-label { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.row-amount { color: var(--text); font-weight: 500; white-space: nowrap; }

/* =========================================================================
   HOME-TENANT-BAR — persoonlijke header boven de greeting, toont TEER-
   tag + vestigingsnaam + medewerker. Maakt direct visueel duidelijk
   dat alles op deze pagina is gefilterd voor jouw vestiging/account.
   ========================================================================= */
.home-tenant-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 8px 14px;
  background: #f8f6ef;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'VT323', monospace;
  font-size: 16px;
  letter-spacing: 0.6px;
  color: var(--text);
}
.home-tenant-tag {
  background: var(--teer-red);
  color: white;
  padding: 2px 9px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
}
.home-tenant-vestiging {
  font-weight: 600;
  color: var(--text);
}
.home-tenant-medewerker {
  color: var(--text-muted);
  font-size: 14px;
}

/* =========================================================================
   DIRK-GREETING (LCD-display waar DIRK jou proactief toespreekt)
   ========================================================================= */

.dirk-greeting {
  background:
    linear-gradient(180deg, var(--lcd-bg) 0%, var(--lcd-bg-dark) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.045) 0 1px, transparent 1px 3px);
  background-blend-mode: multiply;
  border: 1px solid var(--lcd-bezel);
  border-left: 6px solid var(--warm);   /* default-accent: BRIEFING (warm) */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.07);
  color: var(--lcd-ink);
  padding: 18px 24px 16px;
  margin-bottom: 24px;
  font-family: 'VT323', monospace;
  position: relative;
  overflow: hidden;
}
.dirk-greeting::after {
  /* Glans bovenaan: simuleert glas-reflectie op CRT */
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 100%);
  pointer-events: none;
}
/* === Variants per badge-type (left-border-accent) === */
.dirk-greeting.alert       { border-left-color: var(--teer-red); }
.dirk-greeting.tip         { border-left-color: var(--lcd-bg); border-left-color: #5a9e3f; }
.dirk-greeting.bewaking    { border-left-color: var(--olive); }
.dirk-greeting.klaar       { border-left-color: var(--olive); }
.dirk-greeting.alert .dg-mode { background: var(--teer-red); border-color: var(--teer-red); }
.dirk-greeting .dg-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(26,26,26,0.22);
}
.dirk-greeting .dg-lcd {
  background: #1a1a1a; color: var(--lcd-bg);
  padding: 3px 12px 1px;
  font-family: 'VT323', monospace; font-size: 18px; letter-spacing: 3px;
  border: 1px solid rgba(0,0,0,0.5);
  line-height: 1;
}
.dirk-greeting .dg-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--status-green);
  box-shadow: 0 0 6px rgba(90,158,63,0.7);
  animation: breathe 2.2s ease-in-out infinite;
}
.dirk-greeting .dg-mode {
  font-family: 'VT323', monospace; font-size: 13px; letter-spacing: 2px;
  color: #fff; background: #1a1a1a;
  border: 1px solid #1a1a1a; padding: 2px 8px 0;
}
.dirk-greeting .dg-time {
  margin-left: auto; font-family: 'VT323', monospace;
  color: rgba(26,26,26,0.55); font-size: 15px; letter-spacing: 1px;
}
.dirk-greeting .dg-speech {
  font-size: 20px; line-height: 1.5; color: var(--lcd-ink);
  letter-spacing: 0.4px;
}
.dirk-greeting .dg-speech p { margin: 0; }
.dirk-greeting .dg-speech .prompt { color: var(--warm); }
.dirk-greeting .dg-reply {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(26,26,26,0.22);
}
.dirk-greeting .dg-reply .rprompt {
  color: var(--warm); font-family: 'VT323', monospace; font-size: 20px;
}
.dirk-greeting .dg-reply input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: 'VT323', monospace; font-size: 18px;
  color: var(--lcd-ink); letter-spacing: 0.4px; padding: 2px 0;
}
.dirk-greeting .dg-reply input::placeholder { color: rgba(26,26,26,0.38); }
.dirk-greeting .dg-reply .soon {
  font-family: 'Inter', sans-serif;
  font-size: 10px; color: rgba(26,26,26,0.6);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 2px 7px;
  border: 1px solid rgba(26,26,26,0.25);
}

/* === Reply-zone met knoppen ipv input (gebruiker praat tegen DIRK) === */
.dirk-greeting .dg-reply.actions { gap: 12px; flex-wrap: wrap; }
.dirk-greeting .dg-reply.actions .rprompt { color: rgba(26,26,26,0.55); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.dirk-greeting .dg-reply.actions .spacer { flex: 1; }
.dirk-greeting .dg-btn {
  font-family: 'VT323', monospace;
  font-size: 18px; letter-spacing: 1px;
  padding: 7px 16px; border-radius: 4px;
  cursor: pointer; transition: all .12s ease;
  border: 1px solid #1a1a1a;
}
.dirk-greeting .dg-btn.primary {
  background: #1a1a1a; color: var(--lcd-bg);
}
.dirk-greeting .dg-btn.primary:hover {
  background: var(--teer-red); border-color: var(--teer-red); color: #fff;
}
.dirk-greeting .dg-btn.ghost {
  background: transparent; color: rgba(26,26,26,0.55);
  border-color: rgba(26,26,26,0.25);
}
.dirk-greeting .dg-btn.ghost:hover {
  background: rgba(26,26,26,0.08); color: var(--lcd-ink); border-color: #1a1a1a;
}

/* === Diff-list binnen DIRK-paneel (gebruikt door PAS OP) === */
.dirk-greeting .dg-diff {
  margin: 10px 0 4px;
  padding: 10px 14px;
  background: rgba(26,26,26,0.07);
  border-left: 3px solid var(--lcd-ink);
}
.dirk-greeting .dg-diff .head {
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(26,26,26,0.55); margin-bottom: 4px;
}
.dirk-greeting .dg-diff p { display: flex; gap: 8px; margin: 0; padding: 2px 0; font-size: 18px; }
.dirk-greeting .dg-diff p::before { content: ">"; font-weight: bold; flex-shrink: 0; }
.dirk-greeting .dg-diff time { margin-left: auto; opacity: 0.65; }

/* === Voortgangsrail: stale-marker (! badge bij stap die hergeneratie nodig heeft) === */
.rail-step .stale-mark,
.stap-rail li .stale-badge {
  position: absolute; top: 8px; right: 10px;
  background: var(--teer-red); color: #fff;
  font-family: 'VT323', monospace; font-size: 16px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold;
  cursor: help;
}
.stap-rail li.is-stale { position: relative; }
.stap-rail li.is-stale > .num {
  /* zachte rode-glow op het stap-bolletje zelf */
  box-shadow: 0 0 0 2px rgba(212,1,12,0.18);
}

/* === Refs browse-modal (Fiona-feature 2026-04-26) === */
.refs-actions .refs-pinned-indicator {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 99px;
  background: var(--warm); color: var(--lcd-ink);
  font-size: 12px; font-weight: 500; cursor: help;
}
.refs-actions .refs-reset-btn {
  background: transparent; border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 5px; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--text-muted);
}
.refs-actions .refs-reset-btn:hover { border-color: var(--teer-red); color: var(--teer-red); }
.refs-actions .refs-browse-btn {
  background: var(--teer-red); color: #fff;
  border: 1px solid var(--teer-red);
  padding: 6px 14px; border-radius: 5px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
}
.refs-actions .refs-browse-btn:hover { background: #b50108; }

.refs-browse-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20,18,15,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.refs-browse-modal {
  background: var(--surface);
  width: 1200px; max-width: 100%; max-height: 92vh;
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  border-left: 6px solid var(--teer-red);
}
.refs-browse-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
}
.refs-browse-head h2 { margin: 0; font-size: 18px; }
.refs-browse-head .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.refs-browse-head .close {
  background: none; border: none; font-size: 28px; cursor: pointer;
  color: var(--text-muted); line-height: 1;
}
.refs-browse-head .close:hover { color: var(--teer-red); }
.refs-browse-body {
  overflow: auto; flex: 1; padding: 0 24px 16px;
}
.refs-browse-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  margin-top: 8px;
  table-layout: fixed;  /* respect col-widths */
}
.refs-browse-table th {
  text-align: left; padding: 10px 8px;
  border-bottom: 2px solid var(--border);
  font-weight: 500; color: var(--text-muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  user-select: none;
}
/* Sortable headers */
.refs-browse-table th[data-sort] { cursor: pointer; transition: color .12s; }
.refs-browse-table th[data-sort]:hover { color: var(--text); }
.refs-browse-table th[data-sort]::after {
  content: ' ↕'; opacity: 0.3; font-size: 10px; margin-left: 2px;
}
.refs-browse-table th.sort-asc::after  { content: ' ↑'; opacity: 1; color: var(--teer-red); }
.refs-browse-table th.sort-desc::after { content: ' ↓'; opacity: 1; color: var(--teer-red); }
.refs-browse-table th.sort-active { color: var(--text); }
/* Long-text cells: ellipsis ipv table-stretch */
.refs-browse-table td.adres-cell,
.refs-browse-table td.type-cell {
  overflow: hidden;
}
.refs-browse-table td.adres-cell strong {
  display: block; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.refs-browse-table td.adres-cell small {
  display: block; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.refs-browse-table td.type-cell {
  white-space: nowrap; text-overflow: ellipsis;
}
.refs-browse-table td {
  padding: 10px 8px; border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.refs-browse-table tr:hover td { background: rgba(212,1,12,0.025); }
.refs-browse-table tr.is-active td { background: rgba(106,123,77,0.07); }
.refs-browse-table .thumb-wrap {
  position: relative;
  width: 48px; height: 36px;
}
.refs-browse-table .thumb {
  width: 48px; height: 36px; background: #ddd center/cover; border-radius: 3px;
}
.refs-browse-table .thumb.empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-faint); background: var(--bg-soft);
}
/* Top-3 positie-pill bovenop thumb (1, 2 of 3) */
.refs-browse-table .thumb-pos-pill {
  position: absolute;
  top: -7px; left: -7px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--olive);
  color: #fff;
  font-family: 'VT323', monospace;
  font-size: 14px; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: help;
  line-height: 1;
}
.refs-browse-table .prijs { font-family: 'VT323', monospace; font-size: 16px; }
.refs-browse-table .match { font-family: 'VT323', monospace; font-size: 15px; font-weight: 500; }
.refs-browse-table .match-sterk    { color: var(--olive); }
.refs-browse-table .match-goed     { color: var(--olive); opacity: 0.85; }
.refs-browse-table .match-redelijk { color: var(--warm); }
.refs-browse-table .match-zwak     { color: var(--text-faint); }
.refs-browse-table small.muted { color: var(--text-muted); }
.refs-browse-table .badge-active {
  background: var(--olive); color: #fff;
  padding: 2px 8px; border-radius: 99px;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
}
.swap-menu { position: relative; display: inline-block; }
.swap-btn {
  background: var(--surface); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 4px; cursor: pointer;
  font-family: inherit; font-size: 12px; white-space: nowrap;
}
.swap-btn:hover { border-color: var(--teer-red); color: var(--teer-red); }
.swap-dropdown {
  display: none;
  position: absolute; right: 0; top: 100%;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  white-space: nowrap; z-index: 5; min-width: 180px;
  margin-top: 2px;
}
.swap-menu.open .swap-dropdown { display: block; }
.swap-dropdown a {
  display: block; padding: 8px 16px;
  color: var(--text); text-decoration: none; font-size: 13px;
  border-bottom: 1px solid var(--border-soft);
}
.swap-dropdown a:last-child { border-bottom: none; }
.swap-dropdown a:hover { background: rgba(212,1,12,0.06); color: var(--teer-red); }

/* === DIRK-modal-scrim: hergebruikt voor mismatch-uitsluiten en
       toekomstige DIRK-conversatie-modals (zoals stap-6 blokkade) === */
.dirk-modal-scrim {
  display: none;
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20,18,15,0.55);
  align-items: center; justify-content: center;
  padding: 24px;
}
.dirk-modal-scrim.is-open { display: flex; }
.dirk-modal-stage {
  width: 640px; max-width: 100%;
  max-height: 90vh; overflow: auto;
}
/* Modal-context: zorg dat dirk-greeting niet meer onderaan main-flow
   marges aanhoudt (anders schiet 'ie naar beneden) */
.dirk-modal-stage > .dirk-greeting {
  margin-bottom: 0;
}

/* === DIRK-greeting wijzigingen-lijst (.dg-diff)
       Gebruikt door stap-6 blokkade om wijzigingen na laatste
       tekstgeneratie op te sommen. Reusable voor andere "DIRK
       toont je wat is veranderd"-situaties === */
.dirk-greeting .dg-diff {
  margin: 10px 0 6px;
  padding: 10px 14px;
  background: rgba(26,26,26,0.07);
  border-left: 3px solid var(--lcd-ink);
  font-family: 'VT323', monospace;
  font-size: 18px;
  line-height: 1.45;
}
.dirk-greeting .dg-diff .head {
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(26,26,26,0.55);
  margin-bottom: 4px;
}
.dirk-greeting .dg-diff p {
  margin: 0; padding: 2px 0;
  display: flex; gap: 8px; align-items: baseline;
}
.dirk-greeting .dg-diff p::before {
  content: ">"; font-weight: bold; flex-shrink: 0;
}
.dirk-greeting .dg-diff time {
  margin-left: auto; opacity: 0.65;
  font-size: 16px;
}

/* === Manual-add modal: form + result-card === */
.refs-actions .refs-manual-btn {
  background: transparent; color: var(--teer-red);
  border: 1px dashed var(--teer-red);
  padding: 6px 14px; border-radius: 5px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
}
.refs-actions .refs-manual-btn:hover {
  background: rgba(212,1,12,0.08);
}

/* === Handmatig-badge op ref-card in stap 2
       Toont voor referenties die de gebruiker zelf via postcode-zoek
       heeft toegevoegd (i.p.v. door matcher gekozen). === */
.ref-card.is-manual {
  /* Iets gele undertone om handmatige refs visueel te onderscheiden */
  box-shadow: inset 0 0 0 1px rgba(232,169,53,0.35);
}
.ref-card .ref-manual-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--warm);
  color: var(--lcd-ink);
  padding: 3px 9px 2px;
  font-family: 'VT323', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 3px;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: help;
}
.ref-card .ref-card-score.score-manual {
  background: rgba(232,169,53,0.18);
  color: var(--warm);
  border: 1px dashed var(--warm);
  font-family: 'VT323', monospace;
}

/* Single free-text input — gebruiker tikt natuurlijk tegen DIRK */
.dirk-greeting .manual-input-row {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 4px;
  font-family: 'VT323', monospace;
}
.dirk-greeting .manual-input-row .prompt {
  color: var(--warm); font-size: 22px; font-weight: bold;
}
.dirk-greeting .manual-input-row input {
  flex: 1;
  background: rgba(255,255,255,0.45); border: 1px solid rgba(26,26,26,0.25);
  border-radius: 3px; padding: 8px 12px;
  font-family: 'VT323', monospace; font-size: 19px;
  color: var(--lcd-ink); letter-spacing: 0.5px;
  outline: none; transition: border-color .12s, background .12s;
}
.dirk-greeting .manual-input-row input::placeholder {
  color: rgba(26,26,26,0.35);
}
.dirk-greeting .manual-input-row input:focus {
  border-color: var(--teer-red); background: rgba(255,255,255,0.7);
}

.dirk-greeting .manual-result {
  margin-top: 12px;
  font-family: 'VT323', monospace;
  font-size: 18px; line-height: 1.45;
  color: var(--lcd-ink);
}
.dirk-greeting .manual-result .prompt {
  color: var(--warm); font-weight: bold;
}
.dirk-greeting .manual-miss p,
.dirk-greeting .manual-warn { margin: 4px 0; }

.dirk-greeting .hit-headline { margin: 0 0 10px; font-size: 18px; }
.dirk-greeting .hit-card {
  display: flex; gap: 14px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(26,26,26,0.18);
  border-radius: 5px;
  padding: 12px;
  margin-bottom: 12px;
}
.dirk-greeting .manual-thumb {
  width: 130px; height: 90px; flex-shrink: 0;
  background: #ddd center/cover; border-radius: 3px;
}
.dirk-greeting .manual-thumb.empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; background: rgba(26,26,26,0.08);
}
.dirk-greeting .hit-info { flex: 1; min-width: 0; font-family: 'Inter', sans-serif; font-size: 13px; }
.dirk-greeting .hit-info .hit-adres {
  font-size: 16px; font-weight: 600; color: var(--lcd-ink);
}
.dirk-greeting .hit-info .hit-sub {
  font-size: 12px; opacity: 0.7; margin-bottom: 8px;
}
.dirk-greeting .hit-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: rgba(26,26,26,0.7);
  margin-bottom: 6px;
}
.dirk-greeting .hit-meta strong { color: var(--lcd-ink); }
.dirk-greeting .hit-prijs {
  font-family: 'VT323', monospace; font-size: 16px;
}
.dirk-greeting .hit-target {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: rgba(26,26,26,0.05);
  border-left: 3px solid var(--lcd-ink);
  border-radius: 0 3px 3px 0;
  font-family: 'Inter', sans-serif;
}
.dirk-greeting .hit-target label {
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(26,26,26,0.55);
}
.dirk-greeting .hit-target select {
  font-family: 'VT323', monospace; font-size: 16px;
  padding: 6px 10px; border: 1px solid rgba(26,26,26,0.25);
  border-radius: 3px; background: rgba(255,255,255,0.6);
  color: var(--lcd-ink);
}

/* Multi-result: lijst van compacte adres-kaarten met per-rij actie */
.dirk-greeting .manual-hits {
  margin-top: 6px;
  font-family: 'VT323', monospace;
}
.dirk-greeting .hit-intro {
  margin: 0 0 10px;
  font-size: 18px; color: var(--lcd-ink);
}
.dirk-greeting .hit-intro .prompt { color: var(--warm); font-weight: bold; }
.dirk-greeting .hit-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 50vh; overflow-y: auto;
  padding: 4px;
}
.dirk-greeting .hit-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(26,26,26,0.18);
  border-radius: 5px;
  padding: 8px 10px;
  transition: border-color .12s, background .12s;
}
.dirk-greeting .hit-row:hover {
  border-color: var(--teer-red);
  background: rgba(255,255,255,0.75);
}
.dirk-greeting .hit-thumb {
  width: 64px; height: 48px; flex-shrink: 0;
  background: #ddd center/cover; border-radius: 3px;
}
.dirk-greeting .hit-thumb.empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: rgba(26,26,26,0.08);
}
.dirk-greeting .hit-row .hit-info {
  flex: 1; min-width: 0;
  font-family: 'Inter', sans-serif;
}
.dirk-greeting .hit-row .hit-adres {
  font-size: 14px; font-weight: 600; color: var(--lcd-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dirk-greeting .hit-row .hit-sub {
  font-size: 11px; color: rgba(26,26,26,0.65); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dirk-greeting .hit-row .hit-prijs {
  font-family: 'VT323', monospace; font-size: 15px;
  color: rgba(26,26,26,0.85); margin-top: 2px;
}
.dirk-greeting .hit-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.dirk-greeting .hit-actions select {
  font-family: 'VT323', monospace; font-size: 13px;
  padding: 4px 6px; border: 1px solid rgba(26,26,26,0.25);
  border-radius: 3px; background: rgba(255,255,255,0.7);
  color: var(--lcd-ink);
}
.dirk-greeting .hit-actions .hit-go {
  font-size: 14px; padding: 6px 12px;
}

/* =========================================================================
   VESTIGINGEN / HORIZONTALE BUDGET-BARS
   ========================================================================= */

.vestig-list { display: flex; flex-direction: column; gap: 4px; }
.vestig-row {
  display: grid;
  grid-template-columns: 120px 1fr 64px;
  gap: 12px; align-items: center;
  font-size: 13px; padding: 5px 0;
}
.vestig-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vestig-bar-bg {
  background: var(--border-soft);
  height: 8px; border-radius: 4px; overflow: hidden;
  min-width: 0;
}
/* Budget-bar kleuren conform styleguide §19 (Patronen → Statuskleur):
   groen = akkoord (target gehaald, ≥100%); oranje = wacht (nog onderweg,
   <100%). Rood is gereserveerd voor blokkades — niet voor "haalt budget
   nog niet". Sluit aan bij KPI-heatmap-divergent-conventie (Verkoopprijs
   vs. advies §14): groen=boven-doel, oranje=op-doel-richting. */
.vestig-bar {
  height: 100%; background: var(--status-orange);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.vestig-bar.over { background: var(--status-green); }
.vestig-pct {
  font-size: 13px; color: var(--text-muted);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* TEER-totaalrij bovenaan de lijst — zwaarder, met dunne scheidslijn
   eronder zodat de eigen vestiging visueel een eigen blok wordt. */
.vestig-row.is-totaal {
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 2px;
}
.vestig-row.is-totaal .vestig-name {
  letter-spacing: 1px;
}
/* Maand-rijen onder de eigen vestiging — ingesprongen, smaller, subtieler
   zodat ze visueel "kinderen" van de vestigingsregel zijn. */
.vestig-row.is-maand {
  font-size: 12px;
  padding: 2px 0;
  color: var(--text-muted);
}
.vestig-row.is-maand .vestig-name {
  padding-left: 14px;
  color: var(--text-muted);
}
.vestig-row.is-maand .vestig-bar-bg { height: 4px; }
.vestig-row.is-maand .vestig-pct {
  font-size: 12px;
}

/* =========================================================================
   STATUS DOTS + BADGES
   ========================================================================= */

.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.dot-green  { background: var(--status-green); }
.dot-orange { background: var(--status-orange); }
.dot-red    { background: var(--status-red); }
.dot-blue   { background: var(--status-blue); }
.dot-grey   { background: var(--status-grey); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 0;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px; text-transform: uppercase;
  white-space: nowrap;
}
/* Rounded variant van .badge (pill-shape) — voor sectie-headers in tx-block,
   waar het visueel "afdeling/categorie" benadrukt ipv lijn-status. */
.badge-section {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; white-space: nowrap;
}

.badge-nieuw { background: #e7f3ff; color: #0b5ba3; }
.badge-in_behandeling { background: #fef5e3; color: #8a6100; }
.badge-definitief { background: #eef1f4; color: #3a4450; }
.badge-verzonden { background: #e7f4ff; color: #1e5fb0; }
.badge-akkoord_klant { background: #e7f5ec; color: #1f7a3f; }
.badge-afgewezen_klant { background: #fbe8ea; color: #a01720; }
/* Onderzoek = "Iets klopt niet"-rollback, team moet uitzoeken.
   Opvallender dan de andere badges: amber-vol + ⚠ icoon vooraan +
   subtiele puls zodat het oog er direct heen getrokken wordt. */
.badge-onderzoek {
  background: #e8a935;
  color: #1a1a1a;
  font-weight: 600;
  padding-left: 18px;
  position: relative;
  box-shadow: 0 0 0 0 rgba(232, 169, 53, 0.5);
  animation: badge-onderzoek-pulse 2.4s ease-in-out infinite;
}
.badge-onderzoek::before {
  content: '⚠';
  position: absolute; left: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
}
@keyframes badge-onderzoek-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 169, 53, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(232, 169, 53, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .badge-onderzoek { animation: none; }
}
.badge-vraag { background: #fff0d6; color: #8a5500; }
/* Dossier-statussen (dirk_dossiers) — kleur-grouping per fase: */
.badge-op_pauze { background: #f5f1e3; color: #6e5500; }
.badge-gesloten { background: #e7f5ec; color: #1f7a3f; }
.badge-afgehaakt { background: #fbe8ea; color: #a01720; }

/* Transactie-soort badges (verkoop / aankoop / opstart) — gebruikt in
   transactie-maand-overzicht. Zelfde footprint als .badge maar met
   eigen kleur-mapping per transactiesoort. */
.badge-verkoop { background: #e7f5ec; color: #1f7a3f; }
.badge-aankoop { background: #e7f3ff; color: #0b5ba3; }
.badge-opstart { background: #fef5e3; color: #8a6100; }

/* Identiteit-badges (BSN-bekend, ID-status) — neutraal of groen.
   Met inline SVG-icoon van Lucide voor visuele scan-baarheid. */
.badge-identiteit {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; white-space: nowrap;
  background: #eef1f4; color: #6e6e66;
}
.badge-identiteit.ok { background: #e7f5ec; color: #1f7a3f; }
.badge-identiteit svg { width: 12px; height: 12px; }

/* Wwft-status-pill in Verkopers-tabel (5e kolom).
   Aggregaat-status uit wwft_profile.last_overall_status; klikbaar
   naar Legitimatie-blok onderaan dossier-detail (#wwft-blok).
     todo    ⏳ grijs    — een of meer checks nog niet uitgevoerd
     clear   ✓  groen    — alle vereiste checks geslaagd
     hit     !  oranje   — een check heeft hit, review nodig
     blocked ⊘  rood     — hard-blokkade (CCBR/sancties), OTD blokkeren
     expired ↻  geel     — re-screen nodig
*/
/* OTD-ready-banner — bovenaan OTD-tx-block. Twee varianten:
   - --ok       groen, klaar voor (auto-)verzending naar Signhost
   - --blocked  rood/oranje, met opsomming van blockers per persoon
   Sinds v638. */
.otd-ready-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft, #e8e8df);
  border-bottom: 1px solid var(--border-soft, #e8e8df);
}
.otd-ready-banner--ok      { background: #eef7ef; }
.otd-ready-banner--blocked { background: #fdf1e6; }
.otd-ready-banner--sent    { background: #eaf2fb; }
.otd-ready-banner--final   { background: #e3f2e6; }
.otd-ready-icon {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.otd-ready-banner--ok      .otd-ready-icon { background: #1f7a3f; color: #fff; }
.otd-ready-banner--blocked .otd-ready-icon { background: #b85b00; color: #fff; }
.otd-ready-banner--sent    .otd-ready-icon { background: #1d4f8c; color: #fff; }
.otd-ready-banner--final   .otd-ready-icon { background: #1a6b2e; color: #fff; }
.otd-ready-body { flex: 1; min-width: 0; }
.otd-ready-title {
  font-size: 13px; font-weight: 700;
  margin: 0 0 2px;
}
.otd-ready-sub {
  font-size: 12px; color: #555;
  margin: 0;
}
.otd-ready-count {
  font-size: 11px; font-weight: 500;
  color: #8a4a00; margin-left: 6px;
}
.otd-ready-list {
  margin: 6px 0 0 0; padding: 0 0 0 16px;
  font-size: 12px;
}
.otd-ready-list li { margin-bottom: 3px; }
.otd-ready-list a { color: var(--text); text-decoration: underline; }
.otd-ready-pill {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.3px;
  margin-left: 6px;
}
.otd-ready-pill--bad    { background: #f5c8cd; color: #8a1a23; }
.otd-ready-pill--warn   { background: #fef0d4; color: #8a6100; }
.otd-ready-pill--status { background: #cfe0f5; color: #1d4f8c; }

.wwft-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; padding: 0; border-radius: 0;
  font-size: 12px; font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer; transition: opacity 0.15s;
}
.wwft-pill:hover { opacity: 0.75; }
.wwft-pill-todo    { background: #ececea; color: #555548; }
.wwft-pill-clear   { background: #e7f5ec; color: #1f7a3f; }
.wwft-pill-hit     { background: #fef0d4; color: #8a6100; }
.wwft-pill-blocked { background: #fbe8ea; color: #a01720; }
.wwft-pill-expired { background: #fef9ed; color: #8a6100;
                     border: 1px dashed #e0d4b8; }

/* Wwft-rapport in Legitimatie-blok (dossier-detail).
   Per opdrachtgever uitklapbaar (<details>), met 11-rijen check-tabel. */
.wwft-rapport {
  padding: 4px 0;
}
.wwft-persoon {
  border-top: 1px solid var(--border-soft);
}
.wwft-persoon[open] {
  background: #fafaf8;
}
.wwft-persoon-head {
  list-style: none;
  cursor: pointer;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  user-select: none;
}
.wwft-persoon-head::-webkit-details-marker { display: none; }
.wwft-persoon-head::before {
  content: '▸';
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.15s;
  display: inline-block;
}
.wwft-persoon[open] > .wwft-persoon-head::before {
  transform: rotate(90deg);
}
.wwft-persoon-naam {
  font-weight: 600;
  flex: 1;
}
.wwft-overall {
  /* iets breder dan de standaard wwft-pill voor de tekst-pill */
  width: auto;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.wwft-checks-table {
  margin: 0 0 8px;
  background: white;
}
.wwft-checks-table th {
  background: #f6f5ee;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.wwft-checks-table td {
  padding: 8px 12px;
  vertical-align: top;
}
.wwft-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 0;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.wwft-icon-clear   { background: #e7f5ec; color: #1f7a3f; }
.wwft-icon-hit     { background: #fef0d4; color: #8a6100; }
.wwft-icon-stub    { background: #ececea; color: #555548; }
.wwft-icon-expired { background: #fef9ed; color: #8a6100;
                     border: 1px dashed #e0d4b8; }
.wwft-icon-nvt     { background: transparent; color: var(--text-muted); }
.wwft-icon-todo    { background: transparent; color: var(--text-muted); }

.wwft-drilldown {
  margin-top: 6px;
}
.wwft-drilldown summary {
  cursor: pointer; padding: 2px 0;
  font-size: 11px;
}
.wwft-drilldown pre {
  background: #f6f5ee;
  border: 1px solid var(--border-soft);
  padding: 8px 10px;
  font-size: 11px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 4px 0;
}

/* =========================================================================
   TABLES
   ========================================================================= */

table.data {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
table.data th {
  text-align: left; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
table.data td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
table.data tr:hover td { background: var(--bg-soft); }
table.data tr:last-child td { border-bottom: none; }
table.data .thumb {
  width: 44px; height: 34px; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--border);
  display: block;
}
table.data .owner .name { font-weight: 600; }
table.data .owner .sub { color: var(--text-muted); font-size: 12px; }
table.data .addr { color: var(--text); }
table.data .addr .plaats { color: var(--text-muted); font-size: 12px; }
table.data a.row-link { color: var(--text); }
table.data a.row-link:hover { color: var(--teer-red); }
table.data .delete-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 10px;
  font-size: 13px;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
table.data .delete-btn:hover {
  /* Rood icoon + rode rand op licht achtergrond — consistent met
     .relatie-remove-danger in dossier_relaties.html. SVG-icoon
     reageert via stroke=currentColor op deze color. */
  color: #b91c1c;
  border-color: #b91c1c;
  background: #fef2f2;
}
table.data .delete-btn svg { display: inline-block; }

/* =========================================================================
   TX-BLOCK + TX-DATA (data-module met header + compactere tabel)
   Wordt gebruikt door transactie-, leads- en stats-overzichten.
   Eerder gedupliceerd in inline-style van 3 templates → nu hier canonical.
   ========================================================================= */

.tx-block {
  background: var(--surface); border: 1px solid var(--border);
  overflow: hidden;
}
.tx-block-header {
  padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-soft);
}
.tx-block-header h2 {
  font-size: 14px; font-weight: 600; margin: 0;
  display: flex; align-items: center; gap: 10px;
}
/* Count-tekst naast titel (eg "Verkoop · 4 regels"). */
.tx-block-header h2 .count {
  color: var(--text-muted); font-weight: 400; font-size: 13px;
}

/* Totaal-tag rechts in tx-block-header — "12 TOTAAL" */
.tx-block-header .totaal-tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tx-block-header .totaal-tag strong { color: var(--text); font-weight: 600; }

/* Status-filter pills binnen .tx-block, tussen header en tabel.
   Padding past bij block-padding ipv standaard .pill-row margin. */
.tx-block .pill-row {
  padding: 10px 18px; margin-bottom: 0;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

table.tx-data {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.tx-data th {
  text-align: left; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
table.tx-data th.num,
table.tx-data td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table.tx-data td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
table.tx-data tr:hover td { background: var(--bg-soft); }
table.tx-data tr[data-href] { cursor: pointer; }
table.data tr[data-href] { cursor: pointer; }
table.tx-data tr.totaal td {
  background: var(--bg-soft);
  font-weight: 600;
  border-bottom: none;
}
table.tx-data .muted { color: var(--text-muted); }
table.tx-data .neg { color: var(--teer-red); font-weight: 600; }
table.tx-data .pos { color: var(--status-green); font-weight: 600; }

/* Sortable headers — generiek op .data en .tx-data.
   Class .sortable op th + .sort-asc / .sort-desc voor actieve richting. */
table.data th.sortable,
table.tx-data th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.12s;
}
table.data th.sortable:hover,
table.tx-data th.sortable:hover { color: var(--text); }
table.data th.sortable::after,
table.tx-data th.sortable::after {
  content: ' ↕'; opacity: 0.35; font-size: 10px; margin-left: 3px;
}
table.data th.sort-asc::after,
table.tx-data th.sort-asc::after {
  content: ' ▲'; opacity: 1; color: var(--teer-red);
}
table.data th.sort-desc::after,
table.tx-data th.sort-desc::after {
  content: ' ▼'; opacity: 1; color: var(--teer-red);
}
table.data th.sort-active,
table.tx-data th.sort-active { color: var(--text); }

/* Pagination-toolbar — onder een data-tabel binnen .tx-block.
   Page-size links · pagina-knoppen centraal · range-indicator rechts. */
.pagination-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; gap: 14px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-soft);
  font-size: 12px; color: var(--text-muted);
  flex-wrap: wrap;
}
.pagination-toolbar .page-size {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;     /* "Rijen per pagina" blijft op 1 regel */
  flex: 0 0 auto;
}
.pagination-toolbar .page-size select {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0;
  padding: 3px 18px 3px 6px;   /* compact: max 3-cijferige waarde + chevron */
  font-family: inherit; font-size: 12px; color: var(--text);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236e6e66' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 5px center;
  cursor: pointer;
  width: auto;
  flex: 0 0 auto;
}
.pagination-toolbar .pagination { margin: 0; gap: 2px; }
.pagination-toolbar .pagination a,
.pagination-toolbar .pagination span {
  min-width: 26px; height: 26px;
  font-size: 12px; padding: 0 6px;
}
.pagination-toolbar .range-indicator { font-variant-numeric: tabular-nums; }
.pagination-toolbar .range-indicator strong { color: var(--text); font-weight: 600; }

/* =========================================================================
   KPI-HEAT (maand-funnel-heatmap)
   Per onderwerp 2-4 uitkomsten × 12 maanden, intensiteit = volume.
   Drie modi:
     - default     → rood-graduatie (volume / negatief)
     - .scale-positive (op container OF op single .kpi-heat-row)
                   → groen-graduatie (gewenste uitkomst)
     - per-cell up-/down-/mid (divergent)
                   → boven (groen) / op (warm) / onder (rood) een doelwaarde
   Use-cases (zie STYLEGUIDE.md §15):
     1. Advies-trechter (uitgebracht / akkoord / getekend / concurrent)
     2. Verkoopprijs vs. advies (boven / op / onder advies)
     3. Telefoontjes-norm (binnen / buiten norm)
   ========================================================================= */

.kpi-heat {
  display: grid;
  grid-template-columns: 120px repeat(12, 1fr);
  gap: 2px;
  font-size: 11px;
}
.kpi-heat-row { display: contents; }
.kpi-heat-lab {
  padding: 4px 6px;
  font-weight: 500; color: var(--text-muted);
  text-align: right; font-size: 12px;
}
.kpi-heat-cell {
  padding: 6px 4px;
  text-align: center;
  background: var(--bg-soft);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Header-rij: maand-namen — geen achtergrond */
.kpi-heat-hdr .kpi-heat-cell {
  background: transparent;
  font-weight: 600;
  color: var(--text-muted);
}

/* Lege/inactieve cell (toekomstige maanden) */
.kpi-heat-cell.h-0 {
  background: #f7f7f3;
  color: var(--text-faint);
}

/* Default = rood-graduatie (volume / negatief) */
.kpi-heat-cell.h-1 { background: rgba(212,1,12,0.14); }
.kpi-heat-cell.h-2 { background: rgba(212,1,12,0.45); color: #fff; }
.kpi-heat-cell.h-3 { background: var(--teer-red);     color: #fff; font-weight: 600; }

/* Variant: positieve schaal (groen) — scope op container of single rij */
.kpi-heat.scale-positive       .kpi-heat-cell.h-1,
.kpi-heat-row.scale-positive   .kpi-heat-cell.h-1 { background: rgba(90,158,63,0.14); color: var(--text); }
.kpi-heat.scale-positive       .kpi-heat-cell.h-2,
.kpi-heat-row.scale-positive   .kpi-heat-cell.h-2 { background: rgba(90,158,63,0.50); color: #fff; }
.kpi-heat.scale-positive       .kpi-heat-cell.h-3,
.kpi-heat-row.scale-positive   .kpi-heat-cell.h-3 { background: var(--status-green); color: #fff; font-weight: 600; }

/* Variant: divergent — per cell zelf classen ipv via container.
   Gebruik voor gemengde rijen (boven/op/onder doelwaarde). */
.kpi-heat-cell.up-1   { background: rgba(90,158,63,0.14); color: var(--text); }
.kpi-heat-cell.up-2   { background: rgba(90,158,63,0.50); color: #fff; }
.kpi-heat-cell.up-3   { background: var(--status-green);  color: #fff; font-weight: 600; }
.kpi-heat-cell.mid    { background: rgba(232,169,53,0.22); color: var(--text); }
.kpi-heat-cell.down-1 { background: rgba(212,1,12,0.14); }
.kpi-heat-cell.down-2 { background: rgba(212,1,12,0.45); color: #fff; }
.kpi-heat-cell.down-3 { background: var(--teer-red);      color: #fff; font-weight: 600; }

/* =========================================================================
   PILL FILTERS
   ========================================================================= */

.pill-row {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px;
  align-items: center;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 4px;
  font-size: 12px; font-weight: 400;
  background: transparent; color: var(--text-muted);
  border: 1px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.pill:hover { background: var(--bg-soft); color: var(--text); }
.pill.active {
  /* Subtiele actief-state: olive-tint + olive-tekst, geen rode knal. */
  background: rgba(91, 96, 65, 0.08);
  color: var(--olive);
  border-color: rgba(91, 96, 65, 0.25);
  font-weight: 500;
}
.pill .count {
  /* Telling als kleine inline-tekst, geen alarm-bubble. */
  background: transparent;
  color: inherit;
  opacity: 0.55;
  padding: 0;
  font-size: 11px; font-weight: 500;
}
.pill:hover .count, .pill.active .count { opacity: 1; }
/* Lege bucket — extra dimmen of helemaal verbergen via render-logic. */
.pill.empty { opacity: 0.45; }
.pill.empty:hover { opacity: 1; }
/* Onderzoek-pill — amber-accent zodat 'ie visueel hetzelfde signaal
   draagt als de "Verkoopadvies follow-up"-banner op /advice/<id>.
   Status 'onderzoek' = klant trekt akkoord in via security-link en team
   moet uitzoeken wat er is gebeurd. */
.pill.pill-onderzoek {
  background: #fff3d6;
  border-color: #f0d18a;
  color: #6b4d00;
}
.pill.pill-onderzoek:hover {
  background: #ffe9b3;
  color: #4a3500;
}
.pill.pill-onderzoek.active {
  background: #e8a935;
  border-color: #e8a935;
  color: #1a1a1a;
}
/* Scheidingsdot tussen primary-filters (Alle/Open/Afgerond) en
   de detail-status-pills, ipv visuele drukte. */
.pill-row .pill-sep {
  color: var(--border); font-size: 12px;
  margin: 0 4px; user-select: none;
}

/* =========================================================================
   TEER-DIALOG  —  gestileerde alert/confirm i.p.v. native popup.
   Dynamisch toegevoegd aan body door static/js/teer-dialog.js.
   ========================================================================= */
.teer-dialog {
  /* Expliciet centreren — native <dialog>'s default-positioning werkt
     niet altijd consistent over browsers heen. inset:0 + margin:auto
     zet de dialog in het midden van de viewport. */
  position: fixed;
  inset: 0;
  margin: auto;

  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  min-width: 320px; max-width: 480px;
  width: max-content; height: max-content;
  background: white;
  color: var(--text);
  box-shadow: 0 12px 32px rgba(15,23,42,0.18),
              0 2px 6px rgba(15,23,42,0.08);
}
.teer-dialog::backdrop {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
}
.teer-dialog .teer-dialog-title {
  padding: 12px 18px;
  font-size: 14px; font-weight: 600;
  color: white; background: var(--teer-red);
  border-top-left-radius: 7px; border-top-right-radius: 7px;
}
.teer-dialog .teer-dialog-message {
  padding: 18px;
  font-size: 13px; line-height: 1.55;
  white-space: pre-wrap;
}
.teer-dialog .teer-dialog-actions {
  padding: 12px 18px;
  display: flex; gap: 8px; justify-content: flex-end;
  background: #fafaf8;
  border-top: 1px solid var(--border-soft);
  border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;
}
.teer-dialog .btn-danger {
  background: var(--teer-red) !important;
  color: white !important;
  border-color: var(--teer-red) !important;
}
.teer-dialog .btn-danger:hover {
  background: #a1010a !important;
  border-color: #a1010a !important;
}

/* =========================================================================
   EIGENAARS-MATCH DIALOG  —  kadaster→persons match-pop-over.
   Dynamisch toegevoegd aan body door static/js/eigenaars-match.js.
   Side-by-side: links PDF-eigenaar, rechts kandidaten met scores.
   ========================================================================= */
.eigenaars-match-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  width: min(1100px, 96vw);
  max-height: 92vh;
  background: white;
  color: var(--text);
  box-shadow: 0 12px 32px rgba(15,23,42,0.22),
              0 2px 6px rgba(15,23,42,0.10);
  overflow: hidden;
}
/* display: flex MAG ALLEEN bij [open]-state — anders overruled het
   browser-default 'dialog:not([open]) { display:none }' en blijft de
   pop-over visueel zichtbaar na .close(). */
.eigenaars-match-dialog[open] {
  display: flex; flex-direction: column;
  animation: em-fade-in 450ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.eigenaars-match-dialog:not([open]) {
  display: none;
}
.eigenaars-match-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  animation: em-backdrop-in 300ms ease-out both;
}
/* Soft entrance: ruime lift van onderaf + scale-up, signaleert dat dit
   het vervolgscherm is na de kadaster-first modal. Bewust groot genoeg
   om duidelijk zichtbaar te zijn tegen de fade-out van de vorige modal. */
@keyframes em-fade-in {
  from { opacity: 0; transform: translateY(48px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes em-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Match-modal-header: neutrale applicatie-chrome — DIRK is hier uit beeld
   (zie .dirk-announce-dialog hieronder voor de aankondigings-stap). */
.eigenaars-match-dialog .em-header {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 22px;
  background: white;
  border-top-left-radius: 7px; border-top-right-radius: 7px;
  border-bottom: 1px solid var(--border);
}
.eigenaars-match-dialog .em-title-block {
  flex: 1; min-width: 0;
}
.eigenaars-match-dialog .em-title {
  margin: 0; font-size: 16px; font-weight: 600;
  color: var(--text); letter-spacing: 0;
}
.eigenaars-match-dialog .em-subtitle {
  margin-top: 4px; font-size: 13px; color: var(--text-muted);
}
.eigenaars-match-dialog .em-close {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 18px; line-height: 1; cursor: pointer;
  padding: 4px 8px; border-radius: 4px;
  flex-shrink: 0;
}
.eigenaars-match-dialog .em-close:hover {
  background: var(--bg-soft); color: var(--text);
}

.eigenaars-match-dialog .em-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
  background: #fafaf8;
}

.eigenaars-match-dialog .em-loading {
  padding: 40px 20px; text-align: center; color: var(--text-muted);
  font-size: 13px;
}
.eigenaars-match-dialog .em-loading.em-error { color: var(--teer-red); }
.eigenaars-match-dialog .em-loading button { margin-top: 14px; }
.eigenaars-match-dialog .em-empty {
  padding: 30px; text-align: center; color: var(--text-muted);
  font-size: 13px;
  background: white; border: 1px dashed var(--border-soft);
  border-radius: 6px;
}

/* Per-eigenaar blok = LINKS+RECHTS */
.eigenaars-match-dialog .em-eigenaar-block {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  margin-bottom: 18px;
  background: white;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  overflow: hidden;
}
.eigenaars-match-dialog .em-eigenaar-block:last-child { margin-bottom: 0; }

.eigenaars-match-dialog .em-side {
  padding: 14px 16px;
}
.eigenaars-match-dialog .em-side-input {
  background: #fbf8f0;
  border-right: 1px solid var(--border-soft);
}
.eigenaars-match-dialog .em-side-cands {
  background: white;
}
.eigenaars-match-dialog .em-side-header {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border-soft);
}

.eigenaars-match-dialog .em-input-naam {
  font-size: 15px; font-weight: 600; color: var(--text);
  margin-bottom: 8px;
}
.eigenaars-match-dialog .em-input-velden {
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px 10px; margin: 0;
  font-size: 12px;
}
.eigenaars-match-dialog .em-input-velden dt {
  color: var(--text-muted); font-weight: 500;
}
.eigenaars-match-dialog .em-input-velden dd {
  margin: 0; color: var(--text);
}

/* Kandidaat-card */
.eigenaars-match-dialog .em-cand {
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fcfcfb;
}
.eigenaars-match-dialog .em-cand:last-of-type { margin-bottom: 0; }
.eigenaars-match-dialog .em-cand-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.eigenaars-match-dialog .em-cand-naam {
  font-weight: 600; color: var(--text);
  text-decoration: none;
}
.eigenaars-match-dialog .em-cand-naam:hover { text-decoration: underline; }
.eigenaars-match-dialog .em-cand-id { font-size: 11px; }
.eigenaars-match-dialog .em-cand-meta {
  font-size: 12px; color: var(--text-muted);
  margin-bottom: 8px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.eigenaars-match-dialog .em-cand-sep { opacity: 0.5; }

.eigenaars-match-dialog .em-score-pill {
  display: inline-block;
  min-width: 36px; padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px; font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.eigenaars-match-dialog .em-score-pill.score-strong {
  background: #dcf3df; color: #1a6b2e; border: 1px solid #9bd6a8;
}
.eigenaars-match-dialog .em-score-pill.score-possible {
  background: #fff3d9; color: #835c00; border: 1px solid #f0c870;
}
.eigenaars-match-dialog .em-score-pill.score-weak {
  background: #f3e0e0; color: #8a2222; border: 1px solid #d99595;
}

/* Field-matches (per-veld vergelijking) */
.eigenaars-match-dialog .em-field-matches {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin: 6px 0 10px;
  padding: 6px 8px;
  background: #f6f5ee;
  border-radius: 4px;
  font-size: 11px;
}
.eigenaars-match-dialog .em-fm {
  display: flex; gap: 4px; align-items: baseline;
}
.eigenaars-match-dialog .em-fm-icon {
  font-weight: 700; min-width: 12px;
  font-variant-numeric: tabular-nums;
}
.eigenaars-match-dialog .em-fm-veld {
  color: var(--text-muted); text-transform: capitalize;
}
.eigenaars-match-dialog .em-fm-db {
  color: var(--text); font-weight: 500;
}
.eigenaars-match-dialog .em-fm-match .em-fm-icon { color: #1a6b2e; }
.eigenaars-match-dialog .em-fm-fuzzy .em-fm-icon { color: #835c00; }
.eigenaars-match-dialog .em-fm-verschil .em-fm-icon { color: #8a2222; }
.eigenaars-match-dialog .em-fm-leeg .em-fm-icon { color: var(--text-muted); }
.eigenaars-match-dialog .em-fm-extra .em-fm-icon { color: #1a6b2e; }

.eigenaars-match-dialog .em-cand-actions {
  display: flex; flex-direction: column; gap: 6px;
  align-items: stretch;
  margin-top: 8px;
}
.eigenaars-match-dialog .em-update-gp {
  font-size: 11px; color: var(--text-muted);
  display: flex; gap: 5px; align-items: center;
}
.eigenaars-match-dialog .em-btn-confirm {
  align-self: flex-end;
}

.eigenaars-match-dialog .em-actions-eig {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-soft);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.eigenaars-match-dialog .em-actions-fallback {
  justify-content: space-between;
}

.eigenaars-match-dialog .em-no-matches,
.eigenaars-match-dialog .em-already-linked {
  padding: 12px 14px;
  background: #fbf8f0;
  border-radius: 5px;
  font-size: 13px; color: var(--text);
  margin-bottom: 10px;
}
.eigenaars-match-dialog .em-already-linked a {
  color: var(--olive); margin-left: 6px;
  font-weight: 500;
}

.eigenaars-match-dialog .em-footer {
  padding: 12px 18px;
  display: flex; justify-content: flex-end; align-items: center;
  background: #fafaf8;
  border-top: 1px solid var(--border-soft);
  border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;
}

.eigenaars-match-dialog .em-status {
  padding: 10px 18px;
  font-size: 13px; font-weight: 500;
  border-top: 1px solid var(--border-soft);
}
.eigenaars-match-dialog .em-status-success {
  background: #dcf3df; color: #1a6b2e;
}
.eigenaars-match-dialog .em-status-error {
  background: #f3e0e0; color: #8a2222;
}
.eigenaars-match-dialog .em-status-info {
  background: #fff3d9; color: #835c00;
}

@media (max-width: 800px) {
  .eigenaars-match-dialog .em-eigenaar-block {
    grid-template-columns: 1fr;
  }
  .eigenaars-match-dialog .em-side-input {
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
  .eigenaars-match-dialog .em-field-matches {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   DIRK-aankondiging — kleine donker terminal-dialog die voorafgaat aan
   een applicatie-modal. DIRK spreekt z'n stuk, gebruiker bevestigt met
   "Doe ik", dan opent de neutrale applicatie-UI. Stijl matcht de KFM
   (kadaster-first-modal) zodat DIRK-uitingen visueel consistent zijn.
   ========================================================================= */
.dirk-announce-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  padding: 0;
  background: #1a1a1a;
  color: #a6b285;
  border-radius: 10px;
  width: 560px;
  max-width: 92vw;
  height: max-content;
  max-height: 80vh;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  overflow: hidden;
  transition: opacity .28s ease, transform .28s ease;
}
.dirk-announce-dialog[open] {
  animation: da-fade-in 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dirk-announce-dialog:not([open]) { display: none; }
.dirk-announce-dialog.is-closing {
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
}
.dirk-announce-dialog::backdrop {
  background: rgba(0,0,0,0.55);
  transition: opacity .28s ease;
}
.dirk-announce-dialog.is-closing::backdrop { opacity: 0; }
@keyframes da-fade-in {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.dirk-announce-dialog .da-body {
  padding: 28px 28px 8px;
  font-family: 'VT323', monospace; font-size: 19px;
  line-height: 1.55; color: #a6b285; letter-spacing: 0.4px;
  min-height: 90px;
}
.dirk-announce-dialog .da-body p { margin: 4px 0; }
.dirk-announce-dialog .da-body .prompt {
  color: #e8a935; margin-right: 4px;
}
.dirk-announce-dialog .em-dirk-cursor {
  display: inline-block;
  width: 9px; height: 16px;
  background: #a6b285;
  vertical-align: text-bottom;
  margin-left: 3px;
  animation: blink 1.1s step-end infinite;
}
.dirk-announce-dialog .da-footer {
  display: flex; justify-content: flex-end;
  padding: 14px 22px 22px;
}
.dirk-announce-dialog .da-btn {
  background: #a6b285; color: #1a1a1a;
  border: 1px solid #6b7a4a;
  padding: 8px 22px;
  font-family: 'VT323', monospace;
  font-size: 17px; letter-spacing: 1.5px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, transform .08s;
}
.dirk-announce-dialog .da-btn:hover {
  background: #b9c594;
}
.dirk-announce-dialog .da-btn:active {
  transform: translateY(1px);
}

/* =========================================================================
   BUTTONS
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teer-red); color: #fff;
  border: none; border-radius: 0;
  padding: 8px 16px; font-size: 13px; font-weight: 500;
  font-family: inherit;
  transition: filter 0.12s, background 0.12s;
  cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
.btn:hover { filter: brightness(0.92); text-decoration: none; }
.btn:disabled, .btn[disabled] {
  opacity: 0.45; cursor: not-allowed;
  filter: none !important;
}
.btn.sm { padding: 5px 12px; font-size: 12px; }

.btn.ghost, .btn-ghost {
  background: transparent; color: var(--olive);
  border: 1px solid var(--border);
  padding: 7px 14px;
}
.btn.ghost:hover, .btn-ghost:hover {
  background: var(--bg-soft); border-color: var(--olive);
}

.btn.secondary, .btn-secondary {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
}
.btn.secondary:hover, .btn-secondary:hover { background: var(--bg-soft); border-color: var(--border-strong); }

.btn.primary { background: var(--teer-red); color: #fff; border: none; }

/* =========================================================================
   FORMS
   ========================================================================= */

.input, .select, .textarea, input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], input[type=tel], input[type=url], textarea, select {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 12px;
  font-family: inherit; font-size: 13px; color: var(--text);
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus,
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(107,122,74,0.15);
}
.label, label.fld {
  display: block;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: 6px; font-weight: 500;
}
label.fld { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); font-weight: 500; }
label.fld input, label.fld textarea, label.fld select { margin-top: 4px; font-weight: 400; }

.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.form-grid .full { grid-column: 1 / -1; }

/* 6-koloms form-grid voor compactere transactie/lead-formulieren waar
   datum/factuurnr/etc nevenelkaar moeten kunnen staan. Span-modifiers
   bepalen hoe breed elk veld is. Op smalle schermen: 1-koloms. */
.form-grid-6 {
  display: grid; gap: 14px 16px;
  grid-template-columns: repeat(6, 1fr);
}
.form-grid-6 .field {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--text); margin: 0;
}
.form-grid-6 .field .muted { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.form-grid-6 .field input,
.form-grid-6 .field select,
.form-grid-6 .field textarea {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  font-family: inherit; font-size: 13px; color: var(--text);
  width: 100%; font-weight: 400;
}
.form-grid-6 .field input:focus,
.form-grid-6 .field select:focus,
.form-grid-6 .field textarea:focus {
  outline: none; border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(107,122,74,0.12);
}
.form-grid-6 .field input[readonly] { background: var(--bg-soft); color: var(--text-muted); }
.form-grid-6 .span-2 { grid-column: span 2; }   /* 1/3 van rij */
.form-grid-6 .span-3 { grid-column: span 3; }   /* 1/2 van rij */
.form-grid-6 .full   { grid-column: 1 / -1; }
@media (max-width: 480px) {
  .form-grid-6 { grid-template-columns: 1fr; }
  .form-grid-6 .span-2,
  .form-grid-6 .span-3 { grid-column: 1 / -1; }
}

/* Field-label: uppercase 11px muted label boven een groep velden binnen
   een card. Semantisch verschillend van .card-title (die is 14px h2). */
.field-label {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500; margin-bottom: 4px;
}

/* Soort-chips: radio-button-strip waar elk option als chip wordt getoond.
   Klikbaar; .chk.checked = geselecteerd (rood-tinted bg + rand). */
.soort-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.chk {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 6px;
  border: 1px solid var(--border); cursor: pointer;
  background: var(--surface);
  transition: border-color 0.1s, background 0.1s;
}
.chk input { margin: 0; accent-color: var(--teer-red); }
.chk:hover { background: var(--bg-soft); }
.chk.checked { border-color: var(--teer-red); background: rgba(212,1,12,0.04); }

/* E-mail typeahead-dropdown — verschijnt onder een input zodra de
   gebruiker '@' typt. Activeer via JS-helper EmailTypeahead.init(input)
   uit static/js/email-typeahead.js. */
.email-autocomplete { position: relative; }
.email-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid #d8d8d8;
  border-radius: 8px;
  z-index: 50; max-height: 260px; overflow-y: auto;
  /* Multi-layer shadow voor duidelijke popover-elevatie boven witte
     achtergronden — klein onderaan voor crispness, breed eromheen
     voor diepte. */
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08),
              0 12px 32px rgba(15, 23, 42, 0.18);
}
.email-suggestions[hidden] { display: none; }
.email-suggestion {
  padding: 9px 12px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.1s;
}
.email-suggestion:last-child { border-bottom: none; }
.email-suggestion strong { color: var(--teer-red); font-weight: 600; }
.email-suggestion:hover,
.email-suggestion.selected { background: #eef4fb; color: var(--text); }

/* Klant-search: input met dropdown voor autocomplete-suggesties.
   .sugg .item = bestaande klant; .sugg .new = "nieuwe klant aanmaken". */
.klant-search { position: relative; }
.klant-search .sugg {
  margin-top: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.klant-search .sugg .item {
  padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
  cursor: pointer; transition: background 0.1s;
}
.klant-search .sugg .item:hover { background: var(--bg-soft); }
.klant-search .sugg .item .naam { font-weight: 600; font-size: 13px; }
.klant-search .sugg .item .adres { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.klant-search .sugg .item .meta { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.klant-search .sugg .new {
  padding: 10px 14px; font-size: 13px; color: var(--teer-red); font-weight: 500;
  cursor: pointer; background: var(--bg-soft);
}
.klant-search .sugg .new:hover { background: rgba(212,1,12,0.06); }

/* Coupling-hint: info-banner met teer-rood links accent.
   Voor "deze transactie hangt aan dat verkoopadvies"-suggesties. */
.coupling-hint {
  padding: 10px 14px;
  background: var(--teer-red-bg);
  border-left: 3px solid var(--teer-red);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text);
}
.coupling-hint a { color: var(--teer-red); font-weight: 500; text-decoration: underline; }

/* Form-actions: rechts-uitgelijnde knoppenrij onderaan een formulier. */
.form-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 10px;
}

/* Flex helpers */
.flex { display: flex; }
.gap-2 { gap: 10px; }
.gap-3 { gap: 16px; }
.spacer { flex: 1; }   /* generic flex-spacer (vs .sub-spacer binnen .subbar) */

/* =========================================================================
   RESPONSIVE UTILITIES — vier viewports
   Mobile ≤480 · Tablet 481-768 · Laptop 769-1199 · Desktop ≥1200
   ========================================================================= */

/* Grid-utilities: vaste kolom-aantallen die collapsen.
   .grid-2 → 2 cols, op tablet+mobile 1 col.
   .grid-3 → 3 cols, op laptop 2 cols, op tablet+mobile 1 col.
   .grid-4 → 4 cols, op tablet 2 cols, op mobile 1 col. */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

@media (max-width: 1199px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4         { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* Visibility-utilities — tonen/verbergen per viewport. */
.hide-mobile       { /* default visible */ }
.hide-tablet-down  { /* default visible */ }
.hide-laptop-down  { /* default visible */ }
.show-mobile       { display: none !important; }
@media (max-width: 1199px) { .hide-laptop-down  { display: none !important; } }
@media (max-width: 768px)  { .hide-tablet-down  { display: none !important; } }
@media (max-width: 480px)  {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
  /* Voor inline-elementen die op mobile zichtbaar moeten worden */
  .show-mobile.inline { display: inline !important; }
  .show-mobile.inline-block { display: inline-block !important; }
  .show-mobile.flex { display: flex !important; }
}

/* Stack-utility — verticaal ritme zonder per-element margin.
   Geleend uit Every Layout (Heydon Pickering). */
.stack > * + * { margin-top: var(--stack-gap, 14px); }

/* Kolom-priority voor data-tabellen — verberg minder belangrijke kolommen
   wanneer viewport te smal wordt. Werkt op zowel <th> als <td>.
     prio-1 → altijd zichtbaar (identifier-kolom)
     prio-2 → weg op kleine tablet portrait (≤640)
     prio-3 → weg op tablet (≤768)
     prio-4 → weg op laptop (≤1199)
   Op mobile (≤480) overschrijft .table-collapse-mode dit — daar
   tonen alle kolommen als kaart-rijen. */
@media (max-width: 1199px) { .col-prio-4 { display: none; } }
@media (max-width: 768px)  { .col-prio-3 { display: none; } }
@media (max-width: 640px)  { .col-prio-2 { display: none; } }

/* =========================================================================
   TABLE-COLLAPSE — tabel → gestapelde kaarten op mobile (≤480)
   =========================================================================
   .tx-block automatisch collapse op mobile. Elke <tr> wordt een blok-
   kaart; cells krijgen hun kolom-label voor de waarde via data-label
   attribute + ::before pseudo-element.

   _components/_data_table.html-partial zet data-label="..." automatisch
   op basis van header.label. Voor handgemaakte tabellen: voeg
   data-label="Maand" etc. handmatig toe op <td>'s.
   ========================================================================= */

@media (max-width: 480px) {
  .tx-block table.tx-data,
  .tx-block table.tx-data thead,
  .tx-block table.tx-data tbody,
  .tx-block table.tx-data tr,
  .tx-block table.tx-data th,
  .tx-block table.tx-data td {
    display: block;
  }
  /* Header-rij verbergen (labels verschijnen per cell via ::before). */
  .tx-block table.tx-data thead { display: none; }

  /* Elke rij = kaart */
  .tx-block table.tx-data tr {
    border-bottom: 1px solid var(--border);
    padding: 12px 14px 8px;
  }
  .tx-block table.tx-data tr:last-child { border-bottom: none; }
  .tx-block table.tx-data tr:hover td { background: transparent; }

  /* Elke cell = label-waarde-paar */
  .tx-block table.tx-data td {
    padding: 4px 0;
    border-bottom: none;
    text-align: left !important;     /* num-cells niet meer rechts */
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
  }
  .tx-block table.tx-data td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
  }
  /* Cells zonder data-label (decoratief, lege actie-kolom) verbergen */
  .tx-block table.tx-data td:not([data-label]):empty { display: none; }

  /* Totaal-rij: tonen als compacte sub-kaart met accent-kleur */
  .tx-block table.tx-data tr.totaal {
    background: var(--bg-soft);
    font-weight: 600;
  }
  .tx-block table.tx-data tr.totaal td[colspan] { display: none; }

  /* Op mobile: alle col-prio-N override naar block (alles tonen in kaart) */
  .tx-block table.tx-data .col-prio-2,
  .tx-block table.tx-data .col-prio-3,
  .tx-block table.tx-data .col-prio-4 { display: flex; }
  .tx-block table.tx-data thead .col-prio-2,
  .tx-block table.tx-data thead .col-prio-3,
  .tx-block table.tx-data thead .col-prio-4 { display: none; }
}

/* Backwards-compat aliases voor .two-col / .meta-row uit eerdere stap.
   Beide waren 2-col / 3-col met collapse op 900. Mappen nu naar 768
   conform 4-viewport-plan. */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px; margin-bottom: 18px;
}
.meta-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 14px;
}
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; }
  .meta-row { grid-template-columns: 1fr; }
}

/* Bar-row: horizontale balk met label / track / fill / waarde.
   Voor herkomst-bronnen, conversie-percentages, top-N-lijsten. */
.bar-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 13px;
}
.bar-row .label { width: 170px; font-weight: 500; }
.bar-row .track {
  flex: 1; height: 18px; background: var(--border-soft);
  position: relative; overflow: hidden;
}
.bar-row .track .fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: var(--teer-red);
}
.bar-row .val {
  width: 60px; text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Chart-host: wit-papier container voor chart.js canvas. */
.chart-host {
  background: var(--surface); border: 1px solid var(--border);
  padding: 18px 20px; min-height: 340px; margin-bottom: 14px;
}
.chart-host canvas { max-height: 320px; }

/* Totaal-block: samenvattings-blok onder een lijst transacties.
   Linkse kolom met label + bedrag, rechtse kolom met budget + verschil. */
.totaal-block {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  padding: 20px 22px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.totaal-block .lbl {
  color: var(--text-muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.totaal-block .big {
  font-size: 26px; font-weight: 500; letter-spacing: -0.01em;
}
.totaal-block .big .unit {
  color: var(--text-muted); font-weight: 400; font-size: 15px;
}
.totaal-block .mid {
  font-size: 18px; font-weight: 500; margin-top: 2px;
}
.totaal-block .mid .unit {
  color: var(--text-muted); font-weight: 400; font-size: 13px;
}
.totaal-block .negative {
  color: var(--teer-red); font-weight: 600;
}

/* =========================================================================
   SEARCH BOX
   ========================================================================= */

.search-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.search-box input {
  border: none; padding: 0; font-size: 14px;
  background: transparent;
}
.search-box input:focus { box-shadow: none; }
.search-box .icon { color: var(--text-faint); }

/* =========================================================================
   PAGINATION
   ========================================================================= */

.pagination {
  display: flex; gap: 4px; justify-content: center;
  margin: 20px 0 0;
}
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-muted);
  background: var(--surface);
}
.pagination a:hover { border-color: var(--olive); color: var(--text); }
.pagination .current { background: var(--teer-red); color: #fff; border-color: var(--teer-red); font-weight: 500; }

/* =========================================================================
   DIRK-PANEL (agent-laag)
   ========================================================================= */

.dirk-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 18px 22px;
  color: #e6e6e6;
  position: relative;
  margin-top: 24px;
}
.dirk-panel-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--panel-border);
}
.dirk-tag {
  background: var(--lcd-bg); color: var(--lcd-ink);
  padding: 3px 10px 1px; border-radius: 3px;
  font-family: 'VT323', monospace; font-size: 18px; letter-spacing: 3px;
  border: 1px solid var(--lcd-bezel);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
  line-height: 1;
}
.dirk-mode {
  font-family: 'VT323', monospace; font-size: 13px;
  letter-spacing: 2px; padding: 2px 7px 0;
  border-radius: 2px; line-height: 1.4;
  color: var(--warm); border: 1px solid #4a4033; background: #252018;
}
.dirk-mode.actie   { color: #ff6a48; border-color: #5a2618; background: #2a1510; }
.dirk-mode.reactie { color: #8bd167; border-color: #2a4a1a; background: #14200d; }
.dirk-panel-title {
  font-family: 'VT323', monospace; font-size: 15px;
  color: #9a9a9a; letter-spacing: 1px;
}
.dirk-ts {
  font-family: 'VT323', monospace; color: #666;
  font-size: 15px; margin-left: auto; letter-spacing: 1px;
}
.dirk-message, .dirk-body {
  font-family: 'VT323', monospace; font-size: 18px;
  line-height: 1.5; color: var(--lcd-bg); letter-spacing: 0.4px;
}
.dirk-message .prompt, .dirk-body .prompt { color: var(--warm); }
.dirk-message p, .dirk-body p { margin-bottom: 2px; }
.dirk-cursor {
  display: inline-block; width: 9px; height: 16px; background: var(--lcd-bg);
  vertical-align: text-bottom; margin-left: 3px;
  animation: blink 1.1s step-end infinite;
}
.dirk-panel.attention::after {
  content: ''; position: absolute; top: 0; right: -3px; bottom: 0;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--warm);
}
.dirk-panel.attention.reactie::after { background: var(--status-green); }
.dirk-panel.attention.actie::after { background: var(--teer-red); }

.dirk-input-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--panel-border);
  font-family: 'VT323', monospace;
}
.dirk-input-row .prompt { color: var(--warm); font-size: 20px; }
.dirk-input-row input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--lcd-bg); font-family: 'VT323', monospace;
  font-size: 18px; letter-spacing: 0.4px; padding: 0;
}
.dirk-input-row input::placeholder { color: #5a6442; }
.dirk-input-row input:focus { box-shadow: none; }

/* =========================================================================
   FOOTER
   ========================================================================= */

footer.site-footer {
  max-width: 1440px; margin: 24px auto 0; padding: 16px 28px 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-faint);
  gap: 16px; flex-wrap: wrap;
}
.tenant-line { display: flex; align-items: center; gap: 8px; }
.tenant-prefix {
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-faint);
}
.tenant-name {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 14px; color: var(--text);
}
.tenant-meta { color: var(--text-faint); }
.footer-lcd {
  font-family: 'VT323', monospace; font-size: 14px;
  color: var(--olive); letter-spacing: 1px;
}

/* =========================================================================
   STAP RAIL (formulier 6-staps)
   ========================================================================= */

.layout-wizard {
  display: grid; grid-template-columns: 260px 1fr; gap: 24px;
  align-items: start;
}
.stap-rail {
  position: sticky; top: 110px;
}
/* Rail-card heeft rechte hoeken en strakke top-padding — zo staat de
   "Voortgang"-titel op exact dezelfde hoogte als de eerste stap-header. */
.stap-rail .card { padding: 14px 12px 16px; border-radius: 0; }
.stap-rail .card-title { padding-left: 8px; margin-bottom: 10px; }
.stap-rail ol { list-style: none; padding: 0; margin: 0; }
.stap-rail li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  margin-bottom: 2px; position: relative;
  cursor: pointer;
  transition: background 0.1s;
}
.stap-rail li:hover { background: var(--bg-soft); }
.stap-rail li:not(:last-child)::after {
  content: ""; position: absolute;
  left: 25px; top: 38px; bottom: -2px; width: 2px;
  background: var(--border);
}
.stap-rail li.done::after { background: var(--olive); }
.stap-rail li .num {
  flex: 0 0 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border-strong);
  font-weight: 700; font-size: 13px;
  color: var(--text-muted);
  z-index: 1;
}
.stap-rail li.done .num { background: var(--olive); color: #fff; border-color: var(--olive); }
.stap-rail li.active .num { background: var(--teer-red); color: #fff; border-color: var(--teer-red); }
.stap-rail li .t {
  flex: 1; font-size: 13px; color: var(--text-muted);
  line-height: 1.3; padding-top: 5px;
}
.stap-rail li.done .t { color: var(--text); }
.stap-rail li.active .t { color: var(--text); font-weight: 600; }
.stap-rail li .t small {
  display: block; font-size: 11px; color: var(--text-muted);
  font-weight: 400; margin-top: 2px;
}

/* Property preview card (top of formulier) */
.prop-preview {
  display: grid; grid-template-columns: 120px 1fr; gap: 14px;
  align-items: center;
  padding: 14px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 16px;
}
.prop-preview img {
  width: 120px; height: 90px; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--border);
}
.prop-preview .addr { font-size: 16px; font-weight: 700; }
.prop-preview .meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* =========================================================================
   ANIMATIONS
   ========================================================================= */

@keyframes breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.82); }
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* =========================================================================
   RESPONSIVE — vier viewports
   Mobile ≤480 · Tablet 481-768 · Laptop 769-1199 · Desktop ≥1200
   Module-grid en wizard-rail collapsen op laptop omdat ze
   2-koloms-grids te krap rijen op een 1366-laptop.
   ========================================================================= */

@media (max-width: 1199px) {
  .modules { grid-template-columns: 1fr; }
  .layout-wizard { grid-template-columns: 1fr; }
  .stap-rail { position: static; }
}

/* Hamburger-nav onder 1000px. Boven 1000 toont de volle nav-bar (8 items).
   KPI's collapsen pas bij echt smal scherm (<768) naar 2-col. */
@media (max-width: 999px) {
  .topbar-inner { grid-template-columns: auto 1fr auto; }
  .brand { grid-column: 1; }
  .user-chip { grid-column: 2; justify-self: end; margin-right: 10px; }
  .user-chip > div { display: none; }   /* verberg naam-regel, houd avatar */
  .nav-toggle { display: inline-flex; grid-column: 3; justify-self: end; }

  .nav {
    display: none;
    position: absolute; top: 100%; right: 0; left: 0;
    background: #1a1a1a;
    flex-direction: column;
    padding: 6px 0;
    border-top: 1px solid var(--teer-red);
    gap: 0;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: 12px 28px;
    border-radius: 0;
    font-size: 15px;
    color: #ddd;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav a:last-child { border-bottom: none; }
  .nav a.active { background: var(--teer-red); color: #fff; }
}

@media (max-width: 768px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: KPI's volledig 1-col, page padding compacter. */
@media (max-width: 480px) {
  main { padding: 18px 14px 32px; }
  .topbar-inner { padding: 10px 14px; gap: 12px; }
  .kpis { grid-template-columns: 1fr; }
  .subbar { padding: 10px 14px; }
  .page-head h1 { font-size: 20px; }
  .dirk-subtitle { display: none; }
}

/* ============ Kostenopzet — gedeelde tabel ============
   Wordt gebruikt op /advice/<id> (verkoopadvies-formulier) én op
   /dossiers/verkoop/<id> (verkoopdossier-detail). Eén plek, één look. */
.kosten-panel {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px 12px;
}
.kosten-table {
  display: grid;
  grid-template-columns: 1fr 140px 130px;
  column-gap: 18px;
  row-gap: 2px;
  width: 100%;
}
.kosten-head,
.kosten-row {
  display: contents;
}
.kosten-head > div {
  font-size: 9pt;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--border);
}
/* Rechter kolom-header (Prijs) volgt de uitlijning van de bedragen
   eronder (text-align: right). */
.kosten-head > .kosten-head-right { text-align: right; }
.kosten-row > div {
  align-self: center;
  padding: 10px 0;
  font-size: 10pt;
}
.kosten-row .kosten-label {
  color: var(--text);
  font-weight: 500;
}
.kosten-row .kosten-dash {
  color: var(--text-dim);
}
.kosten-row .kosten-euro {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
}
/* Extra's-subsectie binnen de panel: subheader spant alle 3 kolommen. */
.kosten-subhead {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 9pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
/* Doorlopende horizontale scheidingslijn — spant alle 3 kolommen. */
.kosten-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border-strong);
  margin: 4px 0 2px;
}
.kosten-row.kosten-total > div {
  padding-top: 10px;
  font-weight: 700;
  font-size: 11pt;
}
.kosten-row.kosten-total .kosten-euro {
  color: var(--text);
}
/* Inputs/selects binnen de tabel vullen hun kolom. */
.kosten-table .input-with-suffix,
.kosten-table .input-with-prefix {
  width: 100%;
}
.kosten-table .input-with-suffix input,
.kosten-table .input-with-prefix input,
.kosten-table .input-with-prefix select {
  width: 100%;
  padding: 9px 12px;
  font-size: 10.5pt;
  font-family: inherit;
}
/* Drone-label binnen Extra's matcht visueel de DRONE-OPNAME-styling
   die het advies-formulier krijgt via .form-group label-cascade. Hier
   expliciet uitgeschreven zodat de tabel zelf-dragend is.
   white-space: nowrap voorkomt dat 'Drone-opname' wraps zodra de
   eerste kolom krap wordt (bv. wanneer de hele tabel in een smallere
   rechter-kolom van de dossier-cockpit zit). */
.kosten-row-extra .kosten-label label span {
  font-size: 9pt;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.kosten-row-extra .kosten-label { min-width: 0; }
.kosten-row-extra .kosten-label label { white-space: nowrap; }

/* ============ Autosave-toast — globale visuele waarheid ============
   Wordt aangestuurd door window.dirkAutosave.show(text, kind) uit
   static/js/dirk-autosave.js. Eén plek aanpassen → hele app volgt.

   Visueel: floating chip rechtsonder, donkere achtergrond, getypte
   feedback-kleur (groen/rood/amber/grijs) — past op zowel het lichte
   advies-formulier als de witte dossier-detail-pagina. */
.dirk-autosave-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1500;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 10pt;
  font-weight: 500;
  color: #e5e5e5;
  background: #2d2b2f;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.dirk-autosave-toast.is-visible { opacity: 1; }

/* Generieke .hint — kleine helper-tekst onder een veld of tabel.
   Eerder leefde dit alleen in .form-group .hint (formulier-context);
   nu globaal zodat ook /dossiers/verkoop/<id> dezelfde styling krijgt
   voor de onderschrift-regel "Op basis van beoogde vraagprijs ...". */
.hint {
  font-size: 8.5pt;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ===== Input met prefix/suffix-overlay =====
   Wordt o.a. gebruikt voor "€ 795" (select met €-prefix) en "1,10 %"
   (number-input met %-suffix). Wrapper is position:relative; prefix/
   suffix worden absoluut binnen de input gepositioneerd. Zonder deze
   rules vallen de spans gewoon BUITEN de input (boven/onder), zoals
   gebeurde op /dossiers/verkoop/<id> vóór deze styling werd gedeeld. */
.input-with-suffix {
  position: relative;
}
.input-with-suffix > input {
  width: 100% !important;
  padding-right: 30px !important;
}
.input-with-suffix > .suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 9pt;
  pointer-events: none;
  user-select: none;
}
.input-with-prefix {
  position: relative;
}
.input-with-prefix > input,
.input-with-prefix > select {
  width: 100% !important;
  padding-left: 26px !important;
}
.input-with-prefix > .prefix {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 10pt;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}