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

:root {
  /* ── Achtergronden ── */
  --bg: #F7F8FA;
  --bg-secondary: #F0F2F5;
  --card: #FFFFFF;
  --card-hover: #F7F8FA;

  /* ── Borders ── */
  --border: #E4E7EC;
  --border-strong: #CDD2DA;

  /* ── Tekst ── */
  --txt: #101828;
  --txt2: #475467;
  --txt3: #98A2B3;
  --txt-inverse: #FFFFFF;

  /* ── Brand ── */
  --yellow: #C9A84C;
  --yellow-bg: #FDF6E3;
  --yellow-border: #E8D5A3;
  --yellow-dark: #A67C2E;

  /* ── Status: Nieuw ── */
  --status-nieuw-bg: #F2F4F7;
  --status-nieuw-txt: #344054;
  --status-nieuw-border: #D0D5DD;

  /* ── Status: Beschikbaar ── */
  --status-beschikbaar-bg: #EFF8FF;
  --status-beschikbaar-txt: #175CD3;
  --status-beschikbaar-border: #B2DDFF;

  /* ── Status: Voorgesteld/Ingepland ── */
  --status-voorgesteld-bg: #FFFAEB;
  --status-voorgesteld-txt: #B54708;
  --status-voorgesteld-border: #FEDF89;

  /* ── Status: Bevestigd ── */
  --status-bevestigd-bg: #ECFDF3;
  --status-bevestigd-txt: #027A48;
  --status-bevestigd-border: #ABEFC6;

  /* ── Status: Issue ── */
  --status-issue-bg: #FEF3F2;
  --status-issue-txt: #B42318;
  --status-issue-border: #FECDCA;

  /* ── Status: Afgerond ── */
  --status-afgerond-bg: #F2F4F7;
  --status-afgerond-txt: #667085;
  --status-afgerond-border: #D0D5DD;

  /* ── Status: Geparkeerd ── */
  --status-geparkeerd-bg: #F4F3FF;
  --status-geparkeerd-txt: #5925DC;
  --status-geparkeerd-border: #D9D6FE;

  /* ── Prioriteit ── */
  --prio-bg: #FEF3F2;
  --prio-txt: #B42318;
  --prio-border: #FECDCA;
  --normaal-bg: #F2F4F7;
  --normaal-txt: #344054;
  --normaal-border: #D0D5DD;
  --opvulling-bg: #F9FAFB;
  --opvulling-txt: #98A2B3;
  --opvulling-border: #EAECF0;

  /* ── Onderdeel ── */
  --onderdeel-onderweg-bg: #EFF8FF;
  --onderdeel-onderweg-txt: #175CD3;
  --onderdeel-onderweg-border: #B2DDFF;
  --onderdeel-ontvangen-bg: #ECFDF3;
  --onderdeel-ontvangen-txt: #027A48;
  --onderdeel-ontvangen-border: #ABEFC6;

  /* ── Navbar ── */
  --navbar-bg: #0C1A27;
  --navbar-txt: #94A3B8;
  --navbar-txt-active: #FFFFFF;
  --navbar-accent: #C9A84C;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-md: 0 4px 8px rgba(16,24,40,0.08);
  --shadow-lg: 0 12px 24px rgba(16,24,40,0.12);

  /* ── Typografie ── */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;

  /* ── Spacing ── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Form input tokens — centraal voor consistente inputs ── */
  --input-border:        #D1D5DB;
  --input-border-strong: #9CA3AF;
  --input-border-focus:  #3B82F6;
  --input-radius:        6px;
  --input-padding-y:     8px;
  --input-padding-x:     12px;
  --input-font-size:     13px;
  --input-bg:            #FFFFFF;
  --input-bg-disabled:   #F9FAFB;
  --input-warning-border: #F59E0B;

  /* ── Backward-compat aliases ── */
  --surface: var(--card);
  --surface-2: var(--bg-secondary);
  --text-primary: var(--txt);
  --text-secondary: var(--txt2);
  --text-tertiary: var(--txt3);
  --accent: var(--yellow);
  --accent-dark: var(--yellow-dark);
  --accent-light: var(--yellow-bg);
  --accent-text: var(--txt);
  --navy: #0C1A27;
  --navy-light: #1A2E45;
  --green: var(--status-bevestigd-txt);
  --green-light: var(--status-bevestigd-bg);
  --orange: var(--status-voorgesteld-txt);
  --orange-light: var(--status-voorgesteld-bg);
  --red: var(--status-issue-txt);
  --red-light: var(--status-issue-bg);
  --shadow: var(--shadow-md);
  --radius: var(--radius-md);
}

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ── LOGIN ── */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--navy);
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}

.login-logo {
  text-align: center;
  margin-bottom: 28px;
}

.login-logo svg { width: 52px; height: 52px; }

.login-logo h1 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  margin-top: 14px;
  letter-spacing: -.02em;
}

.login-logo h1 .logo-accent { color: var(--accent); }

.login-logo p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 13px;
  color: var(--text-primary);
  font-size: 0.93rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245,197,24,0.2);
}

.btn-primary {
  width: 100%;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius);
  padding: 11px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s;
}

.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.login-fout {
  color: var(--red);
  font-size: 0.83rem;
  margin-top: 10px;
  min-height: 20px;
}


/* ═══════════════════════════════════════════════
   ADMIN SCHERM
   ═══════════════════════════════════════════════ */

.adm-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 28px;
  overflow: hidden;
}

.adm-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

.adm-tab {
  background: none;
  border: none;
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--txt2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.adm-tab:hover { color: var(--txt); }
.adm-tab.active { color: var(--yellow-dark); border-bottom-color: var(--yellow-dark); }

.adm-body {
  flex: 1;
  overflow-y: auto;
}

.adm-sectie-titel {
  font-size: 1rem;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 4px;
}

/* Sectie-header met titel links + actie-knop rechts (ronde A.2.1) */
.adm-sectie-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.adm-sectie-header .adm-sectie-titel { margin-bottom: 0; }

/* ══════════════════════════════════════════════
   Uitdraaien-tab (Ronde B2)
   ══════════════════════════════════════════════ */
.adm-uit-wrap { display: flex; flex-direction: column; gap: 16px; }

/* Pill-switcher Monteurs / Opdrachtgevers — licht thema, conform Admin */
.adm-uit-switcher {
  display: inline-flex;
  background: #f1f1f3;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.adm-pill {
  background: transparent;
  border: none;
  padding: 6px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--txt2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.adm-pill:hover { color: var(--txt); }
.adm-pill.active {
  background: var(--yellow-dark);
  color: #1a1a1a;
}

/* Filter-bar — lichte inputs, conform .adm-form-input */
.adm-uit-filters { margin-bottom: 4px; }
.adm-uit-filter-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.adm-uit-filter {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.75rem;
  color: var(--txt2);
  font-weight: 600;
}
.adm-uit-filter select,
.adm-uit-filter input[type="date"] {
  background: #fff;
  color: var(--txt);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.85rem;
  font-family: inherit;
  min-width: 140px;
}
.adm-uit-filter select:focus,
.adm-uit-filter input[type="date"]:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px var(--yellow-border);
}
.adm-uit-filter-reset { padding: 6px 14px; font-size: 0.8rem; }

/* Lege-staat — lichte achtergrond conform rest van Admin */
.adm-uit-leeg {
  padding: 32px 16px;
  text-align: center;
  color: var(--txt2);
  font-size: 0.9rem;
  background: #fafafa;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.adm-uit-table .adm-num-th { text-align: right; }
.adm-uit-rij { cursor: pointer; transition: background 0.1s; }
.adm-uit-rij:hover { background: #fafafa; }
.adm-uit-rij-actie {
  text-align: right;
  color: var(--txt2);
  font-size: 1.1rem;
  width: 30px;
}

/* Tools-tab (D5.6) ─── */
.adm-tools-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
  font-size: 0.85rem;
  color: var(--txt2);
  cursor: pointer;
}
.adm-tools-toggle input { cursor: pointer; }
.adm-tool-acties { white-space: nowrap; }
.adm-tool-acties .adm-btn-sec {
  margin-right: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
}
.adm-tool-gearchiveerd {
  opacity: 0.55;
  background: #fafafa;
}
.adm-tool-arch-label {
  font-size: 0.7rem;
  color: #888;
  margin-left: 6px;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.adm-tool-hist-tabel td { padding: 4px 8px; font-size: 0.85rem; }
.adm-tool-hist-tijd { color: var(--txt2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-tool-hist-icoon { display: inline-block; width: 1.5em; }

/* K.5 — Klus-types tabel */
.adm-klustypes-table td { padding: 4px 8px; font-size: 0.85rem; }
.adm-klustypes-table th { font-size: 0.78rem; color: var(--txt2); font-weight: 600; }
.adm-kt-cel {
  min-width: 40px;
  cursor: text;
  border-radius: 3px;
  padding: 2px 4px;
}
.adm-kt-cel:focus {
  background: #fffbe8;
  outline: 1px solid #f5c518;
}
.adm-kt-cel:hover { background: #f9fafb; }
.adm-kt-key {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--txt2);
}

/* K.6 — Dode-kolom-markering: lichte grijstint + ·-marker zodat
   Wendy/admin direct ziet dat het veld bewerkbaar is maar nog
   geen gedrag stuurt. Tooltip op th vertelt waarom. */
.adm-kt-th-inactief {
  color: #9ca3af !important;
  font-style: italic;
  cursor: help;
}
.adm-kt-inactief-mark {
  display: inline-block;
  margin-left: 2px;
  color: #d1d5db;
  font-size: 0.9em;
}

/* DEEL B — losse-regels sectie + modal (opdrachtgever-uitdraai) */
.adm-losse-sectie { margin-top: 18px; }
.adm-losse-kop {
  font-size: 13px; font-weight: 700; color: #374151;
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.adm-losse-tabel { width: 100%; max-width: 560px; }
.adm-losse-oms { font-weight: 500; }
.adm-uit-regel-uit { opacity: 0.5; }
.adm-center { text-align: center; }
.adm-btn-mini {
  background: #fff; border: 1px solid #d1d5db; border-radius: 5px;
  padding: 2px 7px; cursor: pointer; font-size: 13px;
}
.adm-btn-mini-gevaar { color: #b91c1c; border-color: #fca5a5; }
.adm-btn-mini:active { background: #f3f4f6; }

.adm-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(16,24,40,.5);
  display: flex; align-items: center; justify-content: center;
}
.adm-losse-modal { background: #fff; border-radius: 12px; padding: 20px; width: 420px; max-width: 92vw; }
.adm-losse-modal h3 { margin: 0 0 14px; font-size: 16px; }
.adm-modal-label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 10px; }
.adm-modal-label textarea, .adm-modal-label input {
  display: block; width: 100%; margin-top: 4px; box-sizing: border-box;
  padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px;
  font-family: inherit; font-size: 14px;
}
.adm-modal-fout { color: #b91c1c; font-size: 13px; min-height: 16px; margin: 4px 0 8px; }
.adm-modal-acties { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* DEEL B (marge) — marge-kolom in opdrachtgever-uitdraai (alleen admin, niet PDF) */
.adm-marge-th { border-left: 2px solid #e5e7eb; }
.adm-marge-cel { border-left: 2px solid #e5e7eb; white-space: nowrap; text-align: right; }
.adm-marge-eur { font-weight: 700; font-size: 13px; }
.adm-marge-pct { font-size: 11px; opacity: 0.8; }
.adm-marge-pos { color: #15803d; }       /* groen — winst */
.adm-marge-neg { color: #b91c1c; }        /* rood — verlies (monteur > opbrengst) */
.adm-marge-nul { color: #6b7280; }        /* grijs — break-even */
.adm-marge-foot td { background: #f9fafb; font-weight: 600; border-top: 2px solid #d1d5db; }
.adm-marge-foot-label { text-align: right; color: #374151; }

/* Factuurnummer-veld in opdrachtgever-uitdraai-header (bewerkbaar, alle statussen) */
.adm-uit-factuurnr { display: inline-flex; align-items: center; gap: 6px; }
.adm-uit-factuurnr label { font-size: 12px; color: #6b7280; font-weight: 600; }
.adm-uit-factuurnr-input {
  padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 13px; width: 130px; font-family: inherit;
}
.adm-uit-factuurnr-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.adm-uit-factuurnr-ok { font-size: 12px; min-width: 70px; }
.adm-uit-factuurnr-ok.ok { color: #15803d; }
.adm-uit-factuurnr-ok.fout { color: #b91c1c; }

/* Status-badges — lichte varianten, leesbaar op witte achtergrond */
.adm-uit-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.adm-uit-badge-concept      { background: #e5e5ea; color: #4a4a55; }
.adm-uit-badge-verstuurd    { background: #d9e8f7; color: #1d4f8a; }
.adm-uit-badge-gefactureerd { background: #d6efdd; color: #1f6a36; }

/* ── Werkscherm (B2.2) ── */
.adm-uit-werk-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.adm-uit-werk-titel h2.adm-detail-naam { margin: 0 0 4px; }
.adm-uit-werk-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--txt2);
  flex-wrap: wrap;
}
.adm-uit-werk-totaal strong { color: var(--txt); }
.adm-uit-werk-acties { display: flex; gap: 8px; }
.adm-uit-werk-locked {
  background: #fff5e0;
  border: 1px solid #f5d77b;
  color: #7a5500;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.adm-uit-werk-tabel { font-size: 0.82rem; }
.adm-uit-werk-tabel th { font-size: 0.72rem; white-space: nowrap; }
.adm-uit-werk-tabel td { padding: 4px 6px; vertical-align: middle; }
.adm-uit-werk-klant { font-weight: 600; }
.adm-uit-werk-case  { font-size: 0.72rem; color: var(--txt2); }
.adm-uit-werk-check { text-align: center; }
.adm-uit-werk-notitie { min-width: 120px; min-height: 22px; }

/* Delta-cellen (+Reis/+Werk/+Km) — gele tint bij positief,
   licht-rood bij negatief, neutraal bij 0 (B2.2.1) */
.adm-uit-delta-th { background: #fdf6e3; }
.adm-uit-delta-cel.positief,
.adm-uit-werk-rij:hover .adm-uit-delta-cel.positief { background: #fff3c4; color: #6b4f00; font-weight: 600; }
.adm-uit-delta-cel.negatief,
.adm-uit-werk-rij:hover .adm-uit-delta-cel.negatief { background: #ffe5e5; color: #8a1c1c; font-weight: 600; }
.adm-uit-delta-cel.neutraal { color: #aaa; }

/* Subtotaal-cellen — readonly euro-bedrag, lichtgrijs */
.adm-uit-werk-subtot {
  background: #f6f8fb;
  font-variant-numeric: tabular-nums;
}

/* Totaal-cel rechts — sterker geaccentueerd */
.adm-uit-werk-totaal-cel { background: #eef5ff; }

/* Start/Eind tijd-cellen — monospace voor uitlijning */
.adm-uit-werk-tijd {
  font-variant-numeric: tabular-nums;
  color: var(--txt2);
  white-space: nowrap;
}

/* Legacy override-indicator — toont oude override-waarde uit B2.2-test als
   subtle gele rand. UI schrijft override niet meer; COALESCE in
   _berekenEff respecteert hem wel zodat eff-waarde klopt. */
.adm-uit-heeft-override { box-shadow: inset 0 0 0 2px #f5d77b; }

/* Gevaar-knop (rood, voor Verwijder concept) */
.adm-btn-gevaar {
  background: #c0392b;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}
.adm-btn-gevaar:hover { background: #962b1f; }

/* PDF-knoppen (B3.3) — blauw-accent, los van bestaande knop-niveaus
   (geel-primair / oranje-waarschuw / rood-gevaar). PDF is een neutrale
   actie die zowel in concept als verstuurd-mode bestaat. */
.adm-btn-pdf {
  background: #1d4f8a;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.adm-btn-pdf:hover:not(:disabled) { background: #163d6b; }
.adm-btn-pdf:disabled { opacity: 0.7; cursor: wait; }
.adm-btn-pdf-icoon {
  background: transparent;
  border: 1px solid #1d4f8a;
  color: #1d4f8a;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.adm-btn-pdf-icoon:hover:not(:disabled) { background: #1d4f8a; color: #fff; }
.adm-btn-pdf-icoon:disabled { opacity: 0.45; cursor: not-allowed; }
.adm-btn-pdf:disabled { opacity: 0.45; cursor: not-allowed; background: #1d4f8a; }

/* Verticale scheider tussen PDF-cluster en actie-cluster */
.adm-uit-acties-scheider {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 6px;
  vertical-align: middle;
}

/* PDF-knop spinner — pure CSS, geen image */
.adm-pdf-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: adm-pdf-spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes adm-pdf-spin {
  to { transform: rotate(360deg); }
}

/* Waarschuw-knop (oranje, voor Ontgrendel verstuurd — minder destructief
   dan Gevaar maar wel een revert van een eerdere finale actie) */
.adm-btn-waarschuw {
  background: #d97706;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}
.adm-btn-waarschuw:hover { background: #b35a00; }

/* Verwijder-icoon in lijst-rij */
.adm-uit-rij-verwijder {
  background: transparent;
  border: none;
  color: #c0392b;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 4px;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.adm-uit-rij-verwijder:hover {
  opacity: 1;
  background: #ffe5e5;
}
.adm-uit-rij-pijl { color: var(--txt2); }

/* Niet-meenemen / niet-factureerbaar visueel afzwakken */
.adm-uit-werk-rij.niet-meenemen td { opacity: 0.45; }
.adm-uit-werk-rij.niet-factureerbaar:not(.niet-meenemen) td { color: #8a5500; }

/* ── Adres-zoekveld (Google Places, gedeeld admin + case-overlay) ──── */
.adres-zoek-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 6px;
}
.adres-zoek-wrap[data-adres-valid="0"] .adres-zoek-input-wrap {
  outline: 2px solid #F59E0B;
  outline-offset: 0;
  border-radius: 6px;
}
.adres-zoek-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--txt3);
}
.adres-zoek-input-wrap {
  /* PlaceAutocompleteElement wordt hier door JS in geïnjecteerd. Het
     web-component heeft eigen styling; we forceren breedte op de host. */
  width: 100%;
  display: block;
  min-height: 38px;
}
.adres-zoek-input-wrap gmp-place-autocomplete,
.adres-zoek-input-wrap gmpx-place-autocomplete {
  width: 100% !important;
}
.adres-zoek-fallback {
  font-size: 12px;
  color: #B45309;
  padding: 8px 10px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 6px;
}
.adres-zoek-preview {
  font-size: 12px;
  color: var(--txt2);
  min-height: 16px;
  line-height: 1.4;
  padding: 2px 0;
}
.adres-zoek-preview-ok      { color: #027A48; }
.adres-zoek-preview-warning { color: #B45309; }

/* Postcode-trio: drie sub-velden naast elkaar, elk met eigen label boven.
   Vervangt oude .adm-adres-trio (geen "Adres"-wrapper-label meer). */
.adm-form-rij-pc-trio {
  display: grid;
  grid-template-columns: 110px 90px 80px;
  gap: 10px;
  align-items: end;
}
.adm-form-pc-veld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.adm-form-pc-veld .adm-form-label {
  font-size: 11px;
  margin: 0;
}

/* Adres-preview onder de adres-velden */
.adm-adres-preview {
  font-size: 12px;
  color: var(--txt2);
  margin-top: 4px;
  min-height: 16px;
  line-height: 1.4;
}
.adm-adres-preview.adm-adres-preview-ok      { color: #027A48; }
.adm-adres-preview.adm-adres-preview-warning { color: #B45309; }

/* Detail-footer met Annuleren + Opslaan */
.adm-detail-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 0 0;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--bg);
  z-index: 5;
}
.adm-detail-footer .btn-actie-sec,
.adm-detail-footer .btn-actie-primair { width: auto; min-width: 100px; }

.adm-hint {
  font-size: 0.8rem;
  color: var(--txt3);
  margin-bottom: 14px;
}

.adm-fout {
  color: var(--red);
  padding: 12px;
}

/* ── Tabel ── */
.adm-table-wrap {
  overflow-x: auto;
}

.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.adm-table th {
  text-align: left;
  padding: 6px 10px;
  background: var(--bg-secondary);
  color: var(--txt2);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.adm-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.adm-table tr:hover td { background: var(--card-hover); }

/* ── Inline edit cell ── */
.adm-cel {
  min-width: 60px;
  padding: 5px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
  white-space: nowrap;
  min-height: 28px;
  line-height: 1.4;
}

.adm-cel[contenteditable]:hover { border-color: var(--border-strong); background: #fff; }
.adm-cel[contenteditable]:focus { border-color: var(--yellow); background: #fff; box-shadow: 0 0 0 2px var(--yellow-border); }

.adm-cel-readonly { color: var(--txt2); font-weight: 600; }

.adm-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Select in tabel ── */
.adm-select {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 0.82rem;
  background: transparent;
  color: var(--txt);
  cursor: pointer;
  transition: border-color 0.12s;
}

.adm-select:hover { border-color: var(--border-strong); background: #fff; }
.adm-select:focus { border-color: var(--yellow); outline: none; }

/* ── Toggle schakelaar ── */
.adm-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.adm-toggle input { display: none; }

.adm-toggle-slider {
  width: 32px;
  height: 18px;
  background: var(--border-strong);
  border-radius: 9px;
  position: relative;
  transition: background 0.2s;
}

.adm-toggle-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}

.adm-toggle input:checked + .adm-toggle-slider { background: #16A34A; }
.adm-toggle input:checked + .adm-toggle-slider::after { left: 17px; }

/* ── Badges ── */
.adm-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.adm-badge-actief { background: var(--status-bevestigd-bg); color: var(--status-bevestigd-txt); }
.adm-badge-inactief { background: var(--status-afgerond-bg); color: var(--status-afgerond-txt); }

/* ── Algemeen formulier ── */
.adm-form {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adm-form-rij {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adm-form-rij-2col {
  flex-direction: row;
  gap: 12px;
}

.adm-form-rij-2col > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.adm-form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--txt2);
}

.adm-form-input {
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 0.87rem;
  color: var(--txt);
  background: #fff;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.adm-form-input:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px var(--yellow-border);
}

.adm-opslaan-status {
  font-size: 0.8rem;
  color: var(--txt3);
  min-height: 18px;
}

/* ── Toast ── */
.adm-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.83rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 9999;
}

.adm-toast-zichtbaar { opacity: 1; transform: translateY(0); }
.adm-toast-ok { background: #ECFDF3; color: #027A48; border: 1px solid #ABEFC6; }
.adm-toast-fout { background: var(--status-issue-bg); color: var(--status-issue-txt); border: 1px solid var(--status-issue-border); }

/* ── Admin: monteur naam link ── */
.adm-naam-link {
  background: none;
  border: none;
  color: var(--yellow-dark);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.adm-naam-link:hover { background: var(--yellow-bg); }

/* ── Admin: detail view ── */
.adm-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.adm-terug-btn {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.83rem;
  color: var(--txt2);
  cursor: pointer;
  white-space: nowrap;
}
.adm-terug-btn:hover { background: var(--bg-secondary); }

.adm-detail-naam {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--txt);
}

.adm-detail-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  margin-bottom: 16px;
}

.adm-detail-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}

.adm-detail-card-wide {
  grid-column: 1 / -1;
}

.adm-card-titel {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt3);
  margin-bottom: 14px;
}

.adm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.adm-form-compact .adm-form-rij { gap: 3px; }
.adm-form-compact .adm-form-label { font-size: 0.75rem; }

.adm-form-hint {
  font-size: 0.75rem;
  color: var(--txt3);
  margin-top: 3px;
}

.adm-detail-input { font-size: 0.85rem; }

.adm-form-textarea {
  resize: vertical;
  min-height: 60px;
}

/* ── Admin: documenten lijst ── */
.adm-doc-leeg {
  color: var(--txt3);
  font-size: 0.85rem;
  padding: 12px 0;
}

.adm-doc-add-btn {
  background: var(--yellow);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.adm-doc-add-btn:hover { background: var(--yellow-dark); }

.adm-doc-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.adm-doc-rij:last-child { border-bottom: none; }

.adm-doc-icoon { font-size: 1.1rem; width: 24px; text-align: center; flex-shrink: 0; }

.adm-doc-info { flex: 1; min-width: 0; }

.adm-doc-naam {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--txt);
}

.adm-doc-meta {
  display: flex;
  gap: 12px;
  font-size: 0.77rem;
  color: var(--txt3);
  margin-top: 2px;
}

.adm-doc-verloop { font-weight: 500; }

.adm-doc-acties { display: flex; gap: 4px; }

.adm-doc-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--txt2);
}
.adm-doc-btn:hover { background: var(--bg-secondary); }
.adm-doc-btn-del { color: #B42318; }
.adm-doc-btn-del:hover { background: var(--status-issue-bg); border-color: var(--status-issue-border); }

/* ── Document modal ── */
.adm-doc-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1100;
  align-items: center;
  justify-content: center;
}
.adm-doc-overlay.actief { display: flex; }

.adm-doc-modal {
  background: var(--card);
  border-radius: 12px;
  width: 480px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

.adm-doc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.adm-doc-modal-body { padding: 20px; }

.adm-doc-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.adm-doc-status {
  font-size: 0.8rem;
  color: var(--txt3);
  margin-top: 8px;
  min-height: 18px;
}

.adm-btn-sec {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--txt2);
}
.adm-btn-sec:hover { background: var(--bg-secondary); }

.adm-btn-primair {
  background: var(--yellow);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.adm-btn-primair:hover { background: var(--yellow-dark); }
.adm-btn-primair:disabled { opacity: 0.6; cursor: not-allowed; }

/* ═══════════════════════════════════════════════
   RONDE C — BEZOEK TABS, AFGEROND TAB, FINANCIEEL
   ═══════════════════════════════════════════════ */

/* ── Cases scherm: hoofd-tabs (Actief / Afgerond) ── */
.cases-hoofd-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  padding: 0 16px;
  margin-bottom: 0;
  background: var(--card);
}

.cases-hoofd-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 10px 18px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--txt2);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cases-hoofd-tab:hover { color: var(--txt); }
.cases-hoofd-tab.active {
  color: var(--yellow-dark);
  border-bottom-color: var(--yellow-dark);
}

.cases-hoofd-tab-badge {
  background: var(--bg-secondary);
  color: var(--txt3);
  border-radius: 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.cases-hoofd-tab.active .cases-hoofd-tab-badge {
  background: var(--yellow-bg);
  color: var(--yellow-dark);
}

/* ── Afgerond cases tabel ── */
.afgerond-tabel-wrap { overflow-x: auto; }
.afgerond-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.afgerond-tabel th {
  text-align: left;
  padding: 6px 10px;
  background: var(--bg-secondary);
  color: var(--txt2);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.afgerond-tabel td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.afgerond-tabel tr:hover td { background: var(--card-hover); cursor: pointer; }
.afgerond-bezoek-badge {
  display: inline-block;
  background: var(--status-afgerond-bg);
  color: var(--status-afgerond-txt);
  border: 1px solid var(--status-afgerond-border);
  border-radius: 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 8px;
}

/* ── Case overlay: info-bar bovenaan (UX-ronde 3a → 3a.2) ── */
#co-case-info-bar {
  padding: 14px 20px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Twee subkolommen + omschrijving volle breedte eronder via grid */
.co-info-bar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
.co-info-kolom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.co-info-veld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.co-info-veld-rij {
  display: flex;
  gap: 8px;
}
.co-info-omschrijving {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.co-info-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt3);
  margin: 0;
}

/* Inputs in info-bar — hergebruiken .co-field-input tokens uit 3b. Iets
   kleiner padding voor compacte rij-hoogte. */
.co-info-input {
  font-family: var(--font);
  font-size: 13px;
  padding: 7px 10px;
  background: var(--card);
}
.co-info-input-sm { max-width: 110px; flex-shrink: 0; }

/* Omschrijving textarea: auto-groei tot max 8 regels, monteur-leesbaar */
.co-info-textarea {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 12px;
  resize: vertical;
  min-height: 64px;
  max-height: 180px;
}

/* ── Case overlay: bezoek tab-balk ── */
#co-visit-tabs-wrap {
  flex-shrink: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.overlay-tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.overlay-tabs::-webkit-scrollbar { display: none; }

.overlay-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--txt2);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.overlay-tab:hover { color: var(--txt); }
.overlay-tab.active {
  color: var(--txt);
  border-bottom-color: var(--yellow);
}
.overlay-tab-plus {
  color: var(--txt3);
  font-size: 16px;
  font-weight: 400;
}
.overlay-tab-plus:hover { color: var(--yellow-dark); background: var(--yellow-bg); border-radius: 4px; }

/* Status-indicatoren naast tab-label */
.tab-status-afgerond  { color: #16A34A; font-size: 12px; }
.tab-status-niet-uitg { color: #98A2B3; font-size: 12px; }
.tab-status-actief    { color: #3B82F6; font-size: 10px; }
.tab-status-open      { color: #D97706; font-size: 10px; }

/* ── Case overlay: visit body ──
   L-overlay-fix-3: overflow-y weg — zone-left is de enige scroll-surface.
   Voorheen creëerde dit een geneste mini-scroll binnen zone-left waardoor
   de bezoek-sectie een eigen scrollbalkje kreeg ondanks de ruimere modal. */
#co-visit-body {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  gap: 20px;
}

/* Drie kolommen binnen visit body */
.co-visit-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.co-visit-col:first-child { flex: 1.1; }
.co-visit-col:last-child { flex: 0.9; }

/* Bezoek-context regel (bezoek_nummer >= 2) */
.bezoek-context-regel {
  font-size: var(--text-xs);
  color: var(--txt3);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.bezoek-context-regel strong { color: var(--txt2); }

/* ── Financiële sectie ── */
.fin-sectie {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 12px;
}

.fin-sectie-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-secondary);
  cursor: pointer;
  user-select: none;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--txt);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.fin-sectie-header.open { border-bottom-color: var(--border); }

.fin-sectie-toggle {
  font-size: 12px;
  color: var(--txt3);
  transition: transform 0.2s;
}
.fin-sectie-toggle.open { transform: rotate(180deg); }

.fin-sectie-body {
  display: none;
  padding: 14px;
  background: var(--card);
}
.fin-sectie-body.open { display: block; }

.fin-placeholder {
  font-size: var(--text-sm);
  color: var(--txt3);
  padding: 6px 0 10px;
  line-height: 1.6;
}

.fin-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  padding: 3px 0;
  color: var(--txt2);
}
.fin-row-label { flex: 1; }
.fin-row-calc  { color: var(--txt3); font-size: var(--text-xs); margin: 0 8px; }
.fin-row-bedrag { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--txt); }

.fin-subtotaal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--txt);
  border-top: 1px solid var(--border);
  padding: 6px 0 2px;
  margin-top: 4px;
}

.fin-blok {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.fin-blok:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.fin-blok-titel {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt3);
  margin-bottom: 6px;
}

.fin-override-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--text-sm);
}
.fin-override-rij input[type="checkbox"] { cursor: pointer; }
.fin-override-rij label { flex: 1; color: var(--txt2); cursor: pointer; }
.fin-override-input {
  width: 80px;
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fin-override-input:disabled {
  background: var(--bg-secondary);
  color: var(--txt3);
  border-color: var(--border);
  cursor: default;
}
.fin-override-input:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px var(--yellow-border);
}

.fin-factureerbaar-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: var(--text-sm);
}
.fin-factureerbaar-rij label { color: var(--txt2); font-weight: 600; }

.fin-acties {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ── Nieuw bezoek modal ── */
.nieuw-bezoek-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9100;
}

.nieuw-bezoek-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9101;
  background: var(--card);
  border-radius: var(--radius-lg);
  width: 420px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.nieuw-bezoek-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-md);
}

.nieuw-bezoek-modal-body {
  padding: 20px;
  flex: 1;
}

.nieuw-bezoek-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

.nieuw-bezoek-sectie-titel {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt3);
  margin-bottom: 10px;
}

.nieuw-bezoek-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--txt);
  transition: background 0.12s;
}
.nieuw-bezoek-radio:hover { background: var(--bg-secondary); }
.nieuw-bezoek-radio input[type="radio"] { cursor: pointer; }

.nieuw-bezoek-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--txt);
  background: var(--card);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.nieuw-bezoek-input:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px var(--yellow-border);
}
.nieuw-bezoek-input.fout { border-color: #FECDCA; box-shadow: 0 0 0 2px rgba(180,35,24,0.1); }

.nieuw-bezoek-toggle-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: var(--text-sm);
  color: var(--txt2);
}

/* ── Overlay: 3-zones layout (UX-ronde 3a, fix in 3a.1)
   L-overlay-fix-2 (28 mei): bijna fullscreen op desktop omdat de
   1120px modal te krap was — wendy moest scrollen voor afspraak +
   panelen tegelijk. Nu 95vw/95vh met max 1500px zodat 't op grote
   monitoren niet absurd breed wordt. Smal scherm: bestaande media-
   query stackt zones (zie verderop). */
#case-overlay-modal {
  display: flex;
  flex-direction: column;
  width: 1500px;
  max-width: 95vw;
  height: 95vh;
  max-height: 95vh;
  overflow: hidden;
}

/* Body grid: links zone 1+2, rechts zone 3 */
#co-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
#co-zone-left {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  min-height: 0;
}
#co-zone-right {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg-secondary);
  min-height: 0;
}

/* Info-bar: omschrijving krijgt volle breedte als laatste blok */
.co-info-blok.co-info-blok-omschrijving { flex: 1 1 100%; max-width: 100%; }
.co-info-blok-omschrijving .co-val {
  background: var(--bg-secondary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* Visit-body krijgt nu alleen form-velden, geen 3-kolom grid meer */
#co-visit-body {
  padding: 14px 20px 20px;
  display: block;
  gap: 0;
}
.co-visit-tab-inhoud { display: flex; flex-direction: column; gap: 0; }

/* L-overlay-fix-3: afspraak-velden 2-koloms grid zodat de 1500px-modal
   echt gebruikt wordt. Korte velden (Duur, Aantal, Monteur, Datum, Tijd,
   Tijdvak-checkbox) komen 2-up naast elkaar. Team-monteurs-lijst en de
   uitklapbare Tijdvak-blok pakken volle breedte (grid-column: 1 / -1). */
#co-afspraak-velden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 28px;
}
#co-afspraak-velden #co-team-monteurs,
#co-afspraak-velden #co-tijd-vak,
#co-afspraak-velden #co-tijdvak-check-rij {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  #co-afspraak-velden { grid-template-columns: 1fr; }
}

/* Status banner — volle breedte, tussen header en body-grid.
   Default flex zodat een leeg banner-element nog steeds layout-flow heeft;
   wordt verborgen via :empty zodra de banner-tekst leeg is. */
#co-status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
#co-status-banner:empty { display: none; }
.co-banner-icoon { font-size: 16px; line-height: 1; }
.co-banner-tekst { line-height: 1.4; }

.co-banner-geel    { background: #FEF9C3; color: #854D0E; border-bottom-color: #FDE68A; }
.co-banner-groen   { background: #DCFCE7; color: #166534; border-bottom-color: #BBF7D0; }
.co-banner-oranje  { background: #FED7AA; color: #9A3412; border-bottom-color: #FDBA74; }
.co-banner-rood    { background: #FEE2E2; color: #991B1B; border-bottom-color: #FECACA; }
.co-banner-grijs   { background: #F3F4F6; color: #4B5563; border-bottom-color: #E5E7EB; }
.co-banner-blauw   { background: #DBEAFE; color: #1E40AF; border-bottom-color: #BFDBFE; }
.co-banner-verzet-modus { box-shadow: inset 0 -3px 0 #3B82F6; }

/* ── Team-banner modi (Fase 3 stap 2) ──────────────────────────────── */
/* Wrap-container reset wanneer mini/groot wordt gerendered — anders
   erven we de flex-row van #co-status-banner die niet past. */
#co-status-banner.co-banner-team-wrap {
  display: block;
  padding: 8px 12px;
  background: #fafbfc;
  border-bottom: 1px solid var(--border);
}
/* Mini-team: twee blokken naast elkaar, elk zelf-stylend via .co-banner-* */
.co-banner-team-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.co-banner-team-mini .co-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--text-sm);
}
/* Groot-team: samenvattende banner blijft prominent. Toggle eronder is
   secundaire actie — kleiner font, lichtere kleur, geen knop-look. */
.co-banner-team-groot {
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.co-banner-team-detail { margin-top: 4px; }
.co-banner-team-detail summary {
  cursor: pointer;
  list-style: none;  /* native disclosure-triangle weg, we tekenen 'm zelf */
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
  user-select: none;
}
.co-banner-team-detail summary::-webkit-details-marker { display: none; }
.co-banner-team-detail summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.15s ease;
}
.co-banner-team-detail[open] summary::before {
  transform: rotate(90deg);
}
.co-banner-team-detail summary:hover {
  color: #111827;
  text-decoration: underline;
}
.co-banner-team-detail-lijst {
  list-style: none;
  margin: 4px 0 0 18px;  /* indent t.o.v. toggle-positie */
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--text-sm);
}
.co-banner-team-detail-rij {
  padding: 5px 0;
  line-height: 1.4;
}
.co-banner-team-detail-rij:not(:last-child) {
  border-bottom: 1px solid #f1f5f9;
}
/* Fixed-width wrapper voor de iconen (▶ ✓ ⏳) zodat monteur-namen op
   dezelfde X-positie beginnen ondanks verschillende glyph-breedtes
   (⏳ is een emoji, ▶/✓ zijn smaller). */
.co-banner-team-detail-lijst .co-detail-icoon {
  display: inline-block;
  width: 1.5em;
  text-align: center;
}
@media (max-width: 640px) {
  .co-banner-team-mini { grid-template-columns: 1fr; }
}

/* ── Zone 3 layout (3a + 3c) ── */
.co-zone3 {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  gap: 0;
}
.co-zone3-acties {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
}

/* Secties: kop, body, subtiele scheiding daarboven */
.co-zone3-sectie {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid #E5E7EB;
  min-height: 0;
}
.co-zone3-sectie .co-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--txt3);
  margin: 0 0 2px;
}

/* Geschiedenis: scroll-container met dunne scrollbar als de lijst te lang
   wordt — andere secties verschuiven niet door content-overflow */
.co-zone3-geschiedenis { min-height: 0; }
.co-tijdlijn-scroll {
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 4px;
}
.co-tijdlijn-scroll::-webkit-scrollbar { width: 6px; }
.co-tijdlijn-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}
.co-tijdlijn-scroll::-webkit-scrollbar-track { background: transparent; }

/* Zone 3 primaire knop — groot, geel */
.co-btn-zone3-primair {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border-radius: 6px;
  background: var(--yellow);
  color: #1A1A1A;
  border: 1px solid var(--yellow-dark);
  cursor: pointer;
  line-height: 1.3;
}
.co-btn-zone3-primair:hover { background: var(--yellow-dark); }

/* Bevestigd-status: primaire knop is "rustiger" (witte basis) */
.co-btn-zone3-primair-rust {
  width: 100%;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  border-radius: 6px;
  background: #fff;
  color: #1A1A1A;
  border: 1px solid #D1D5DB;
  cursor: pointer;
}
.co-btn-zone3-primair-rust:hover { background: #F9FAFB; border-color: #9CA3AF; }

/* Secundaire knop — neutraal */
.co-btn-zone3-sec {
  width: 100%;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border-radius: 6px;
  background: transparent;
  color: var(--txt2);
  border: 1px solid var(--border);
  cursor: pointer;
}
.co-btn-zone3-sec:hover { background: #fff; color: var(--txt); }

/* Destructive link — subtiel rood, geen border */
.co-btn-zone3-link-rood {
  background: none;
  border: none;
  color: #B91C1C;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.co-btn-zone3-link-rood:hover { color: #7F1D1D; }

/* ── Case-overlay: form-velden (UX-ronde 3b) ── */
.co-field-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
}
.co-field-label {
  flex: 0 0 110px;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt2);
  padding-top: 9px;
  user-select: none;
}
.co-field-input,
input.co-field-input,
select.co-field-input {
  flex: 1;
  width: 100%;
  font-family: var(--font);
  font-size: var(--input-font-size);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--txt);
  outline: none;
  transition: border-color .12s, box-shadow .12s, background .12s;
  line-height: 1.4;
}
.co-field-input:hover:not(:disabled):not(:focus) {
  border-color: var(--input-border-strong);
}
.co-field-input:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.co-field-input:disabled {
  background: var(--input-bg-disabled);
  color: var(--txt2);
  cursor: default;
}
.co-field-input.co-field-warning {
  border-color: var(--input-warning-border);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
}
.co-field-warning-tekst {
  display: block;
  font-size: 11px;
  color: #B45309;
  margin-top: 4px;
  line-height: 1.3;
}
.co-field-sm { max-width: 90px; flex: 0 0 90px; }

/* Adres-trio in case-overlay info-zone (postcode + huisnr + toev op 1 rij) */
.co-info-veld-rij.co-adres-trio { gap: 6px; }
.co-info-veld-rij.co-adres-trio .co-info-input-sm { flex: 0 0 100px; }
.co-info-veld-rij.co-adres-trio .co-adres-nr      { flex: 0 0 60px; }
.co-info-veld-rij.co-adres-trio .co-adres-toev    { flex: 0 0 60px; }

.co-adres-preview {
  font-size: 11px;
  color: var(--txt2);
  margin-top: 4px;
  min-height: 14px;
  line-height: 1.4;
}
.co-adres-preview.co-adres-preview-ok      { color: #027A48; }
.co-adres-preview.co-adres-preview-warning { color: #B45309; }

/* Wrap rond tijd-combobox zodat warning-tekst onder de input past */
.co-tijd-wrap { flex: 1; display: flex; flex-direction: column; gap: 0; }
.co-tijd-wrap .co-field-input { width: 100%; }

/* Custom tijd-combobox: input + chevron + dropdown (vervangt datalist) */
.co-tijd-combobox {
  position: relative;
  display: block;
  width: 100%;
}
.co-tijd-combobox .co-tijd-input {
  padding-right: 30px;
  width: 100%;
}
.co-tijd-chevron {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 28px;
  background: transparent;
  border: none;
  color: var(--txt2);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--input-radius);
  transition: color .12s, background .12s;
}
.co-tijd-chevron:hover { color: var(--txt); background: var(--bg-secondary); }
.co-tijd-combobox .co-tijd-input:focus ~ .co-tijd-chevron { color: var(--input-border-focus); }

.co-tijd-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
}
.co-tijd-dropdown[hidden] { display: none; }
.co-tijd-dropdown li {
  padding: 7px 14px;
  font-size: 13px;
  color: var(--txt);
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
}
.co-tijd-dropdown li:hover,
.co-tijd-dropdown li.co-tijd-actief {
  background: var(--bg-secondary);
}
.co-tijd-dropdown li.co-tijd-actief { font-weight: 600; }
.co-tijd-dropdown li.co-tijd-leeg {
  color: var(--txt3);
  font-style: italic;
  cursor: default;
}
.co-tijd-dropdown li.co-tijd-leeg:hover { background: transparent; }

/* Aantal-monteurs display (vervangt select voor voorgesteld/bevestigd) */
.co-aantal-display {
  display: inline-flex;
  align-items: center;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: 13px;
  font-weight: 500;
  color: var(--txt);
  background: var(--bg-secondary);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  user-select: none;
  min-height: 34px;
  box-sizing: border-box;
}
.co-aantal-display[hidden] { display: none; }

/* Date-input kalender-icoon iets donkerder (browser-default is licht) */
.co-field-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}
.co-field-input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Tijdvak-checkbox rij: prominenter, klikbaar label */
.co-tijdvak-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--txt2);
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
}
.co-tijdvak-checkbox-label input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--input-border-focus);
  cursor: pointer;
  margin: 0;
}
.co-tijdvak-checkbox-label:hover { color: var(--txt); }

/* Optimizer-lock toggle (bovenaan zone 3 voor pre-bevestigd statussen) */
.co-lock-toggle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 4px;
}
.co-lock-toggle:hover { background: #FEF9C3; }
.co-lock-icoon { font-size: 18px; line-height: 1; }
.co-lock-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.co-lock-titel { font-size: 13px; font-weight: 600; color: #92400E; }
.co-lock-sub   { font-size: 11px; color: #B45309; line-height: 1.3; }
.co-lock-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.co-lock-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: #D1D5DB;
  border-radius: 999px;
  transition: background .15s;
  flex-shrink: 0;
  display: inline-block;
}
.co-lock-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.co-lock-toggle input[type="checkbox"]:checked ~ .co-lock-switch {
  background: #D97706;
}
.co-lock-toggle input[type="checkbox"]:checked ~ .co-lock-switch::after {
  transform: translateX(16px);
}

/* Overige acties als gegroepeerde link-stijl rij (3c) — één unit, subtiel
   maar duidelijk klikbaar, met hover-vlak per regel */
.co-overige-acties { display: flex; flex-direction: column; gap: 0; }
.co-actie-link {
  background: transparent;
  border: none;
  color: var(--txt2);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  padding: 8px 10px;
  min-height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  transition: background .12s, color .12s;
  width: 100%;
}
.co-actie-link:hover:not(:disabled) {
  background: #F3F4F6;
  color: var(--txt);
}
.co-actie-link:disabled { cursor: not-allowed; opacity: 0.7; }
.co-actie-icoon {
  width: 18px;
  display: inline-flex;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* Prio actieve state — gele highlight zodat 'PRIO aan' direct zichtbaar is */
.co-actie-link-prio-actief {
  background: #FEF3C7;
  color: #92400E;
}
.co-actie-link-prio-actief:hover { background: #FDE68A; color: #78350F; }
.co-actie-link-prio-auto {
  background: #FEF3C7;
  color: #92400E;
}

/* Verwijderen — destructive hover trekt iets meer aandacht */
.co-actie-link.co-actie-link-rood { color: #B91C1C; }
.co-actie-link.co-actie-link-rood:hover {
  background: #FEF2F2;
  color: #7F1D1D;
}

/* Financieel uitklap-toggle (vervangt browser-default disclosure) */
.co-actie-uitklap { display: block; padding: 0; }
.co-actie-uitklap-summary {
  list-style: none;
  user-select: none;
}
.co-actie-uitklap-summary::-webkit-details-marker { display: none; }
.co-actie-uitklap-summary::marker { content: ''; }
.co-actie-uitklap-chevron {
  transition: transform .15s;
}
.co-actie-uitklap[open] .co-actie-uitklap-chevron {
  transform: rotate(90deg);
}
.co-actie-uitklap-body {
  padding: 10px 10px 6px 36px;
  font-size: 12px;
  color: var(--txt2);
}

/* Responsive: overlay valt naar één kolom op smal scherm */
@media (max-width: 900px) {
  #co-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  #co-zone-left { border-right: none; border-bottom: 1px solid var(--border); }
  #co-zone-right { background: var(--card); }
}
@media (max-width: 768px) {
  .co-info-grid { gap: 8px 12px; }
  .co-info-blok { min-width: 100px; }
  .overlay-tabs { padding: 0 8px; }
  .overlay-tab { padding: 8px 12px; font-size: var(--text-xs); }
}

/* ── Read-only afgerond info ────────────────────────────────────── */
.co-afgerond-info { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.co-afgerond-info-rij { display: flex; gap: 12px; font-size: var(--text-sm); }
.co-afgerond-label { color: #94A3B8; min-width: 72px; flex-shrink: 0; }

/* ── Team-monteurs lijst ─────────────────────────────────────────── */
#co-team-monteurs { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 4px; }

.co-team-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  font-size: 13px;
  min-height: 38px;
}
.co-team-naam { font-weight: 500; color: var(--txt); flex: 1 0 auto; }
.co-team-meta { color: var(--txt2); font-size: 12px; }
.co-team-x {
  margin-left: auto;
  width: 22px; height: 22px;
  background: none;
  border: 1px solid transparent;
  color: var(--txt3);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .12s, background .12s, border-color .12s;
}
.co-team-x:hover { color: #B91C1C; background: #FEF2F2; border-color: #FECACA; }

.co-team-plus {
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px dashed var(--input-border-strong);
  border-radius: var(--input-radius);
  color: var(--txt2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .12s, border-color .12s, color .12s;
}
.co-team-plus:hover {
  background: var(--bg-secondary);
  border-color: var(--input-border-focus);
  color: var(--txt);
}

.co-team-waarschuwing {
  padding: 5px 10px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 6px;
  font-size: 12px;
  color: #92400E;
}

/* ── Aantal-monteurs kleine selector ─────────────────────────────── */
.co-field-sm { max-width: 80px; }

/* ── Multi-monteur invoer-rijen (beschikbaar-tak) ────────────────── */
.co-team-invoer-rij {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  margin-bottom: 6px;
}
.co-team-invoer-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ══════════════════════════════════════════════
   Klantcommunicatie — Fase 1: mail-composer + Klantmails-blok
   ══════════════════════════════════════════════ */

/* Mail-knop in overlay-header */
.co-mail-btn {
  background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 6px 12px; font-size: 13px; font-weight: 600; color: #1f2937;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.co-mail-btn:hover { background: #f3f4f6; border-color: #9ca3af; }

/* Klantmails-blok (inklapbaar, bovenaan overlay) */
.co-klantmails-blok { margin: 0 0 4px; }
.co-km-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
  cursor: pointer; user-select: none;
}
.co-km-head:hover { background: #f1f5f9; }
.co-km-titel { font-size: 13px; font-weight: 700; color: #334155; }
.co-km-chevron { font-size: 12px; color: #64748b; }
.co-km-body { padding: 4px 0; max-height: 220px; overflow-y: auto; }
.co-km-leeg { padding: 10px 16px; font-size: 13px; color: #94a3b8; }
.co-km-rij {
  display: grid; grid-template-columns: 110px 90px 28px 1fr; gap: 8px;
  align-items: center; padding: 7px 16px; font-size: 12.5px; cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}
.co-km-rij:hover { background: #f8fafc; }
.co-km-datum { color: #64748b; }
.co-km-scenario { font-weight: 600; color: #334155; }
.co-km-taal { text-align: center; }
.co-km-naar { color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Composer-modal */
.mail-composer-card { max-width: 560px; width: 92vw; }
.mail-taal-toggle { display: flex; gap: 8px; margin-bottom: 4px; }
.mail-taal-btn {
  flex: 1; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px;
  background: #fff; font-size: 13px; font-weight: 600; color: #6b7280;
  cursor: pointer; font-family: inherit;
}
.mail-taal-btn.actief { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; }
.mail-scenario-groep { display: flex; flex-direction: column; gap: 6px; }
.mail-scenario-optie {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; font-size: 13.5px;
}
.mail-scenario-optie:hover { background: #f9fafb; }
.mail-scenario-optie em { color: #9ca3af; font-style: normal; font-size: 12px; }
.mail-scenario-optie.disabled { opacity: .5; cursor: not-allowed; }
.mail-scenario-optie.disabled:hover { background: transparent; }
.mail-guard-hint { color: #b45309; }
.mail-geen-email { color: #b45309; }

/* Preview + detail */
.mail-preview {
  border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb;
  padding: 12px; max-height: 280px; overflow-y: auto;
}
.mail-preview-leeg { color: #9ca3af; font-size: 13px; font-style: italic; }
.mail-preview-subject { font-size: 13px; color: #111827; margin-bottom: 8px; }
.mail-preview-body {
  font-size: 13px; color: #374151; white-space: pre-wrap; line-height: 1.5;
  font-family: inherit;
}
.mail-detail-meta {
  font-size: 12.5px; color: #6b7280; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 2px;
}

/* Mail-modals altijd boven de case-overlay (beide 9000) */
#mail-composer-modal, #mail-detail-modal { z-index: 9100; }

/* Fase 2 — optionele blokken (checkboxes + detail-lijst) */
.mail-blok-groep { display: flex; flex-direction: column; gap: 6px; }
.mail-blok-optie {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.mail-blok-optie:hover { background: #f9fafb; }
.mail-blok-optie input { flex: none; }
.mail-detail-blokken { margin-top: 12px; font-size: 12.5px; color: #475569; }
.mail-detail-blokken ul { margin: 4px 0 0; padding-left: 18px; }
.mail-detail-blokken li { margin: 2px 0; }

/* Fase 2.5 — Resend send: status + Gmail-knop */
.mail-status { font-size: 12.5px; margin: 8px 0 0; min-height: 16px; }
.mail-status.mail-error { color: #b91c1c; }
.co-km-gmail {
  margin-left: auto; margin-right: 10px;
  background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
  padding: 3px 10px; font-size: 12px; font-weight: 600; color: #1f2937;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.co-km-gmail:hover { background: #f3f4f6; border-color: #9ca3af; }