/* Blynckr ATS -Light & Modern UI */

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Variable.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* De app heeft GEEN donker thema (bewust verwijderd; de laatste
     [data-theme="dark"]-restregels zijn 2026-08-08 opgeruimd). Met `light
     dark` mocht de browser zijn eigen donkere formulier-defaults gebruiken
     voor elk veld dat zelf geen
     achtergrond declareert -- op een Mac in dark mode werd het invoerveld in de
     plan-modal daardoor zwart. Expliciet `light` houdt formuliervelden,
     scrollbars en date-pickers in het lichte thema dat de rest van de CSS
     aanneemt. */
  color-scheme: light;

  --navy: #17384F;
  --koper: #D97B3D;
  --koper-light: #E8956A;
  --koper-subtle: rgba(217,123,61,0.08);
  --koper-50: #FFF3E8;
  --koper-300: #F2C4A0;
  --koper-500: #D97B3D;
  --koper-700: #B5612E;
  --koper-900: #8B4513;
  --koper-hover: #B5612E;
  --koper-glow: #F2C4A0;
  --deep-ink: #0D1F33;
  --steel: #2A5C7A;
  --mist: #B8CDE0;
  --warm-white: #F5F1EB;
  --sand: #E8DED3;
  --glow: #F2C4A0;
  --burnt: #B5612E;
  --white: #FFFFFF;

  --bg: #FAFAFA;
  --bg-sidebar: #F7F6F3;
  /* Zoekveld: warmgrijze pil zonder rand. Kwam uit de kandidaten-v2-handoff
     (stond als losse hex onder `.candv2` in candidate-design.css) en is sinds
     2026-09-18 de norm voor élk zoekveld in een lijstbalk. */
  --search-bg: #F5F5F3;
  --search-focus-border: #8FA7B2;
  /* De zoekbalk van WhatsApp en Inbox. Stond tot 2026-09-18 op `.wa2-root`;
     toen Inbox dezelfde balk kreeg viel de waarde daar weg (var() zonder
     definitie geeft doorzichtig, en het veld werd onzichtbaar op de witte
     lijstkolom). Hier gedefinieerd, één keer, voor beide.
     Bewust NIET hetzelfde als --search-bg: dat is de balk van de lijstpagina's
     op een witte kolom; deze is doorschijnend omdat de gesprekslijst een eigen
     achtergrond heeft. */
  --wa2-search-bg: rgba(245, 245, 245, 0.82);
  --border: rgba(0, 0, 0, 0.08);
  --border-light: rgba(0, 0, 0, 0.04);
  --border-strong: rgba(0, 0, 0, 0.12);
  --fg-primary: #1A1A1A;
  --fg-secondary: #555555;
  --fg-tertiary: #8A8680;
  --fg-quaternary: #B0ACA5;
  --fg-muted: #B0ACA5;
  --surface: #FFFFFF;
  --surface-hover: rgba(0,0,0,0.015);
  --surface-active: rgba(0,0,0,0.035);
  --surface-raised: #FFFFFF;

  --card-ring: 0 0 0 1px rgba(0,0,0,0.06);

  --glass-sidebar: #FFFFFF;
  --glass-modal: rgba(255, 255, 255, 0.97);
  --glass-topbar: rgba(250, 250, 250, 0.92);
  --glass-toast: rgba(44, 42, 38, 0.88);

  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-modal: 0 25px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
  --shadow-ring: 0 0 0 3px rgba(217,123,61,0.1);

  --bg-secondary: #F5F5F5;
  --surface-alt: #F7F7F7;
  --fg-accent: var(--koper);
  --wa-green: #25D366;
  --wa-green-deep: #1FA855;
  --wa-read-blue: #53BDEB;

  --badge-green-bg: #DCFCE7;
  --badge-green-fg: #16A34A;
  --badge-blue-bg: #DBEAFE;
  --badge-blue-fg: #1D4ED8;
  --badge-orange-bg: #FFF3E8;
  --badge-orange-fg: #D97B3D;
  --badge-purple-bg: #EDE9FE;
  --badge-purple-fg: #7C3AED;
  --badge-red-bg: #FEF2F2;
  --badge-red-fg: #DC2626;
  --badge-neutral-bg: #F0EDE8;
  --badge-neutral-fg: #8A8680;

  --status-active: #16A34A;
  --status-rejected: #DC2626;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* Typography scale */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 19px;
  --text-xl: 22px;
  --text-2xl: 30px;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--fg-primary);
  background: var(--bg);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100vh;
  height: 100dvh;
  transition: grid-template-columns 220ms ease;
}

/* Sidebar */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  color: var(--fg-secondary);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 0 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo img { height: 22px; }
.sidebar-logo span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  color: var(--koper);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(217, 123, 61, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.sidebar-nav { flex: 1; }

.nav-section {
  padding: 0;
  margin-bottom: 4px;
}

.nav-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 16px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--fg-secondary);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 440;
  transition: all var(--dur-fast) var(--ease-out);
  text-decoration: none;
}

.nav-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--fg-primary);
}

.nav-item.active {
  background: rgba(0, 0, 0, 0.06);
  color: var(--fg-primary);
  font-weight: 520;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item.active svg {
  opacity: 1;
  color: var(--koper);
}

.nav-item .badge {
  margin-left: auto;
  background: rgba(0, 0, 0, 0.04);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 999px;
}

.nav-item.active .badge {
  background: rgba(0, 0, 0, 0.08);
  color: var(--fg-secondary);
}

/* Notificatie-badge: alert-variant voor nieuwe matches / WhatsApp-berichten.
   Valt op t.o.v. de neutrale tel-badges en wordt enkel op Matching + WhatsApp
   Chat gebruikt (nergens anders). */
.nav-item .badge--notif,
.nav-item.active .badge--notif {
  background: var(--koper);
  color: #fff;
}

.nav-item.locked {
  opacity: 0.4;
  cursor: default;
  position: relative;
}

.nav-item.locked:hover {
  background: transparent;
  color: var(--fg-secondary);
}

.nav-item.locked::after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.sidebar-footer {
  margin-top: auto;
  padding: 0 0 8px;
}

.sidebar-footer .nav-section {
  padding: 0;
  margin-bottom: 0;
}

.sidebar-user {
  padding: 12px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border);
}

.sidebar-user .avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--fg-primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

.sidebar-user .user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user .user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user .user-role {
  font-size: 11px;
  color: var(--fg-tertiary);
  text-transform: capitalize;
}

.sidebar-user .logout-btn {
  background: none;
  border: none;
  color: var(--fg-quaternary);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all var(--dur-fast);
}

.sidebar-user .logout-btn:hover {
  color: var(--fg-primary);
  background: var(--surface-active);
}

/* Main content */
.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* ── Inklapbare sidebar (desktop icon-rail 240px ⇄ 72px) ─────────────────────
   State: klasse .sidebar-collapsed op #app. Alle ingeklapte regels staan in
   @media (min-width: 769px) zodat de mobiele off-canvas-lade (.sidebar.open)
   onaangetast blijft. */
.sidebar-collapse-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  color: var(--fg-quaternary);
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.sidebar-collapse-btn:hover {
  color: var(--fg-primary);
  background: var(--surface-active);
}
.sidebar-collapse-btn svg { display: block; }
/* Icoon-wissel zonder JS: panel-left-close uitgeklapt, panel-left-open ingeklapt */
.sidebar-collapse-btn .icon-expand { display: none; }
.app.sidebar-collapsed .sidebar-collapse-btn .icon-collapse { display: none; }
.app.sidebar-collapsed .sidebar-collapse-btn .icon-expand { display: block; }

@media (min-width: 769px) {
  .app.sidebar-collapsed { grid-template-columns: 72px 1fr; }

  /* Logo-wordmark + OS-badge verbergen; alleen de toggle blijft, gecentreerd */
  .app.sidebar-collapsed .sidebar-logo { justify-content: center; padding: 0 0 16px; gap: 0; }
  .app.sidebar-collapsed .sidebar-logo img,
  .app.sidebar-collapsed .sidebar-logo span { display: none; }
  .app.sidebar-collapsed .sidebar-collapse-btn { margin-left: 0; }

  /* Sectiekoppen weg; groepen scheiden met een dun lijntje */
  .app.sidebar-collapsed .nav-label { display: none; }
  .app.sidebar-collapsed .sidebar .nav-section + .nav-section {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 8px;
  }

  /* Nav-items: gecentreerd icoon, label verborgen */
  .app.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
    position: relative;
  }
  .app.sidebar-collapsed .nav-item-label { display: none; }
  .app.sidebar-collapsed .nav-item.locked::after { display: none; }

  /* Ingeklapt is er geen ruimte naast het label, dus zou elke badge op het icoon
     belanden. Dat maakte de tel-badges (aantal kandidaten, vacatures, klanten)
     visueel niet te onderscheiden van een melding: de hele rail stond oranje.
     Ingeklapt tonen we daarom ALLEEN echte meldingen -- nieuwe matches en nieuwe
     WhatsApp-berichten, de twee dragers van .badge--notif. De tellingen komen
     terug zodra de sidebar weer uitklapt. */
  .app.sidebar-collapsed .nav-item .badge { display: none; }
  .app.sidebar-collapsed .nav-item .badge--notif,
  .app.sidebar-collapsed .nav-item.active .badge--notif {
    position: absolute;
    top: 3px;
    right: 8px;
    margin-left: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--koper);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    box-shadow: 0 0 0 2px var(--bg-sidebar);
  }
  /* u-hidden wint van de display:flex hierboven: geen badge zonder telling. */
  .app.sidebar-collapsed .nav-item .badge--notif.u-hidden { display: none; }

  /* User-rij stapelt avatar/bel/logout verticaal; tekst weg */
  .app.sidebar-collapsed .sidebar-user { flex-direction: column; gap: 8px; }
  .app.sidebar-collapsed .sidebar-user .user-info { display: none; }

}

/* De collapse-toggle hoort niet in de mobiele off-canvas-lade */
@media (max-width: 768px) {
  .sidebar-collapse-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app { transition: none; }
}

/* Topbar is replaced by page-header in the redesign */

/* 24px zijkant = dezelfde kantlijn als .page-header en als de lijstpagina's
   onder .main--flush; 28px liet de inhoud 4px inspringen t.o.v. de titel.
   14px boven = exact dezelfde waarde als `.main--flush .content`, zodat de
   eerste rij op élke pagina op dezelfde hoogte begint (73px kop + haarlijn
   + 14px = 87px). Met 24px begon Dashboard/Pipeline 10px lager dan de rest. */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 24px 32px;
}

/* Chat-pagina (WhatsApp): laat de module zelf de hoogte vullen en intern
   scrollen i.p.v. de pagina. Wordt door navigate() gezet voor page==='chat'. */
.content--chat {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Buttons */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--dur-fast) var(--ease-out);
  text-decoration: none;
}

.btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
}

.btn-primary {
  font-size: 15px;
  padding: 10px 20px;
  gap: 8px;
  background: var(--fg-primary);
  color: var(--white);
}
.btn-primary:hover { background: #333; }

.btn-accent {
  background: var(--fg-primary);
  color: var(--white);
}
.btn-accent:hover { background: #333; }

.btn-secondary {
  background: var(--surface);
  color: var(--fg-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface-active); }

.btn:active { transform: scale(0.98); }
.btn-primary:active, .btn-accent:active { transform: scale(0.98); }

/* Search */
.search-box {
  position: relative;
}

.search-box input {
  font-family: var(--font-body);
  font-size: 13.5px;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg-primary);
  width: 260px;
  outline: none;
  transition: all var(--dur-fast);
}

.search-box input::placeholder { color: var(--fg-quaternary); }
.search-box input:focus {
  border-color: var(--koper);
  box-shadow: var(--shadow-ring);
}

.search-box svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  stroke: var(--fg-quaternary);
  fill: none;
  stroke-width: 1.5;
}

/* Cards */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.card:hover {
  border-color: var(--border-strong);
}

/* Stats row */
.stats-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: all var(--dur-base) var(--ease-out);
}

.stat-card:hover {
  border-color: var(--border-strong);
}

.stat-card.accent {
  border-color: rgba(217,123,61,0.2);
  background: linear-gradient(135deg, #FFFCF9, var(--white));
}

.stat-card .stat-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-tertiary);
  margin-bottom: 4px;
  margin-top: 4px;
}

.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-card .stat-sub {
  font-size: 11.5px;
  color: var(--fg-tertiary);
  margin-top: 2px;
}

.dash-widgets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Dashboard — recente-activiteitenfeed (timeline) */
.activity-feed { display: flex; flex-direction: column; }
.activity-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  padding: 10px 6px 6px;
}
.activity-group:first-child .activity-group-label { padding-top: 2px; }
.activity-item {
  display: flex;
  gap: 12px;
  align-items: stretch;
  padding: 2px 6px;
  border-radius: 8px;
}
.activity-item--click { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.activity-item--click:hover { background: var(--surface-alt); }
.activity-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30px;
  flex-shrink: 0;
}
.activity-chip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.activity-chip svg { width: 15px; height: 15px; }
.activity-line {
  flex: 1 0 auto;
  width: 2px;
  min-height: 8px;
  margin-top: 4px;
  background: var(--border);
  border-radius: 1px;
}
.activity-body {
  flex: 1;
  min-width: 0;
  padding: 4px 0 13px;
}
.activity-title {
  font-size: 13px;
  color: var(--fg-secondary);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.activity-title strong { font-weight: 600; color: var(--fg-primary); }
.activity-text,
.activity-snippet {
  font-size: 13px;
  color: var(--fg-primary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.activity-snippet {
  font-size: 12.5px;
  color: var(--fg-secondary);
  line-height: 1.5;
  margin-top: 2px;
}
.activity-item--expanded .activity-text,
.activity-item--expanded .activity-snippet {
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
.activity-item--click:focus-visible {
  outline: 2px solid var(--koper);
  outline-offset: -2px;
}
.activity-more-wrap { display: none; }
.activity-more-wrap--visible { display: inline-flex; align-items: center; gap: 7px; }
.activity-more {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--koper);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  flex-shrink: 0;
}
.activity-more:hover { text-decoration: underline; }
.activity-more:focus-visible { outline: 2px solid var(--koper); outline-offset: 2px; border-radius: 3px; }
.activity-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--fg-tertiary);
  flex-wrap: wrap;
}
.activity-dot-sep {
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}
.activity-actor { display: inline-flex; align-items: center; gap: 5px; }
.activity-actor-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dashboard expanded widget card */

/* Drag & Drop */

/* Table */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* Horizontaal scrollen wanneer de tabel breder is dan de container (bijv. na
     het verslepen van een kolombreedte), i.p.v. de rechter kolommen afkappen.
     overflow-y blijft hidden: ronde hoeken + sticky header onveranderd. */
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}

/* Sorteerbare kop. Kwam uit .candv2-table en geldt nu voor elke tabel: een
   kop waarop je kunt klikken moet dat ook laten zien, en de tekst mag niet
   geselecteerd raken bij herhaald klikken. */
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--fg-primary); }

tbody td {
  padding: 10px 12px;
  font-size: 13.5px;
  vertical-align: middle;
  color: var(--fg-secondary);
  border-bottom: 1px solid var(--border-light);
}

/* Uitlijnhelpers. Kwamen uit .cmp-scope .tbl en gelden nu overal: getallen
   horen rechts, anders vergelijk je kolommen op de verkeerde as. */
tbody td.r, thead th.r { text-align: right; }
tbody td.c, thead th.c { text-align: center; }
/* Getalkolommen lijnen alleen echt uit met cijfers van gelijke breedte. */
tbody td.r { font-variant-numeric: tabular-nums; }

tbody tr { transition: background var(--dur-fast); }

/* Handje en hover ALLEEN op rijen waar echt iets te klikken valt. Stond
   voorheen op elke rij, dus ook op statische tabellen (instellingen,
   rapportage-totalen) waar de muis interactie beloofde die er niet is.
   Klikbaarheid zit in deze codebase op drie manieren: op de rij zelf, op een
   element erin (candidates-v2 hangt de onclick per cel), of via .clk (de
   campagnetabellen). Alle drie hieronder. */
tbody tr[onclick],
tbody tr.clk,
tbody tr:has([onclick]) { cursor: pointer; }

tbody tr[onclick]:hover,
tbody tr.clk:hover,
tbody tr:has([onclick]):hover { background: var(--surface-hover); }

tbody tr:last-child td { border-bottom: none; }

/* ── Lijst als kaarten op een telefoon ───────────────────────────────────────
   Een tabel met een minimumbreedte van 520px op een scherm van 390px betekent:
   je ziet nooit de hele rij en moet zijwaarts schuiven om te weten waar je naar
   kijkt. Technisch geen fout, maar ook geen bruikbare lijst.

   Onder 768px klapt een tabel met .table-wrap--cards om naar één kaart per rij.
   De kolomkop verdwijnt en elke cel krijgt zijn label uit `data-label` -- dat
   attribuut is dus wat een lijst "om" zet. Zonder label valt de cel terug op
   alleen zijn waarde; dat is bewust, zodat de naamcel bovenaan de kaart geen
   overbodig "Naam:" krijgt.

   Cellen die op een kaart niets toevoegen (selectievakje, actieknoppen) krijgen
   .cell-hide-mobile. */
@media (max-width: 768px) {
  .table-wrap--cards {
    background: none; border: none; box-shadow: none; overflow: visible;
  }
  .table-wrap--cards table,
  .table-wrap--cards tbody,
  .table-wrap--cards tr,
  .table-wrap--cards td { display: block; width: auto; min-width: 0; }
  .table-wrap--cards thead,
  .table-wrap--cards colgroup,
  .table-wrap--cards .cell-hide-mobile { display: none; }

  .table-wrap--cards tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .table-wrap--cards tbody tr:last-child { margin-bottom: 0; }

  .table-wrap--cards tbody td {
    border-bottom: none;
    padding: 3px 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 0;
    /* Vrije tekst mag afbreken: op een kaart is er geen kolom om in te passen. */
    white-space: normal; overflow: visible; text-overflow: clip; max-width: none;
  }
  .table-wrap--cards tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 34%;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-tertiary);
  }
  /* Eerste cel is de naam: groter, geen label, en de rest hangt eronder. */
  .table-wrap--cards tbody td:first-child {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-primary);
    padding-bottom: 8px;
  }
  /* Een lege cel zou een lege regel met alleen een label opleveren. */
  .table-wrap--cards tbody td:empty { display: none; }
  /* Tikdoel: de hele kaart is aanraakbaar. */
  .table-wrap--cards tbody tr[onclick],
  .table-wrap--cards tbody tr:has([onclick]) { min-height: 44px; }

  /* Actieknoppen onderaan de kaart, met lucht erboven. `block` (niet de flex-rij
     van de andere cellen) zodat de knop de `text-align:right` van de cel volgt.

     De `width:auto` is geen opsmuk maar noodzaak: `.btn-outline` krijgt r1677
     een globale `width:100%` mee -- ooit voor de knop in de loginkaart, maar de
     regel geldt overal. In de tabel viel dat nooit op (de actiekolom is 64px
     breed, precies de knop), op een kaart is de cel 322px en werd "Omzetten"
     een balk van 308px over de hele kaart. Gemeten op staging 2026-08-16. */
  .table-wrap--cards tbody td.lead-acties {
    display: block;
    padding-top: 10px;
  }
  .table-wrap--cards tbody td.lead-acties .btn-outline { width: auto; }

  /* Kaartkop van de leadlijst: e-mail en telefoon passen niet op één regel
     naast elkaar op een telefoon. In de tabel worden ze afgekapt (daar is een
     kolombreedte), op de kaart mogen ze gewoon doorlopen. */
  .table-wrap--cards .lead-name,
  .table-wrap--cards .lead-sub { white-space: normal; overflow: visible; }
  .table-wrap--cards .lead-name-cell { align-items: flex-start; }
}

/* Badges / tags */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 550;
  padding: 3px 9px;
  border-radius: 5px;
  letter-spacing: 0.01em;
}

.badge[data-color="green"]   { background: var(--badge-green-bg);   color: var(--badge-green-fg); }
.badge[data-color="blue"]    { background: var(--badge-blue-bg);    color: var(--badge-blue-fg); }
.badge[data-color="orange"]  { background: var(--badge-orange-bg);  color: var(--badge-orange-fg); }
.badge[data-color="purple"]  { background: var(--badge-purple-bg);  color: var(--badge-purple-fg); }
.badge[data-color="red"]     { background: var(--badge-red-bg);     color: var(--badge-red-fg); }
.badge[data-color="neutral"] { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }
/* Omlijnde variant (o.a. campagnestatus 'klaar'): transparant met rand in de
   tekstkleur. De basis-.badge heeft geen border, dus 1px minder padding zodat
   de hoogte niet verspringt t.o.v. gevulde badges. */
.badge[data-outline] { background: transparent; border: 1px solid currentColor; padding: 2px 8px; }

.badge-active, .badge-klant, .badge-open, .badge-gestart, .badge-voorstel, .badge-aanbod_geaccepteerd { background: var(--badge-green-bg); color: var(--badge-green-fg); }
.badge-placed, .badge-kennismaking, .badge-voorgesteld_hr, .badge-filled { background: var(--badge-blue-bg); color: var(--badge-blue-fg); }
.badge-benaderd, .badge-intake { background: var(--badge-orange-bg); color: var(--badge-orange-fg); }
.badge-offerte, .badge-gesprek { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }
.badge-closed, .badge-afgewezen, .badge-afgevallen { background: var(--badge-red-bg); color: var(--badge-red-fg); }
.badge-lead, .badge-archived, .badge-slapend, .badge-draft, .badge-screening_cv, .badge-on_hold { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }

/* Forms */
.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-tertiary);
  margin-bottom: 5px;
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: 15px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg-primary);
  outline: none;
  transition: all var(--dur-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--koper);
  box-shadow: var(--shadow-ring);
}

.form-group textarea { resize: vertical; min-height: 80px; }

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Boven .notif-overlay/.wa-modal-overlay (z-index 1000): een confirm-dialog
     die vanuit een paneel opent (bv. "Alles verwijderen" in het notificatie-
     paneel) moet erbóvenop staan, anders is de bevestigknop onbereikbaar en
     hangt de actie. Het notificatie-paneel heeft zelf óók .modal-overlay maar
     .notif-overlay staat later in dit bestand en houdt het op 1000. */
  z-index: 1100;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 580px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  animation: modalIn var(--dur-slow) var(--ease-out);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  padding: 20px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}

/* No-header variant: hide title, keep close button top-right */
.modal.no-header .modal-header h2 { display: none; }
.modal.no-header .modal-header {
  padding: 12px 16px 0;
  justify-content: flex-end;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-quaternary);
  padding: 4px;
  border-radius: 6px;
  transition: all var(--dur-fast);
}

.modal-close:hover {
  color: var(--fg-primary);
  background: var(--surface-active);
}

/* Campagne-modals (cmp-scope) renderen hun eigen kop met sluitknop (.mhead .x);
   de gedeelde shell-close erbóven gaf twee zichtbare kruisjes tegelijk. Alleen
   verbergen als de body aantoonbaar een eigen sluitknop heeft. */
.modal.cmp-scope:has(.mhead .x) .modal-header { display: none; }

.modal-body { padding: 14px 28px 20px; }

.modal-footer {
  padding: 0 24px 20px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Pipeline kanban */
/* Pipeline als doorlopend werkvlak (2026-09-18, akkoord Coen).
   Coen: "het design van pipeline valt er wat uit met die losse kaarten".
   Dat klopte letterlijk: elke kolom was een omrand doosje op een grijze
   ondergrond, en elke kaart daarbinnen weer een omrand doosje met 6px lucht
   ertussen -- doosjes in doosjes. Nu is het één vlak, net als .table-wrap:
   één rand eromheen, kolommen gescheiden door een haarlijn, kolomkoppen in de
   stijl van `thead th`, en kaarten rand-tot-rand gescheiden door haarlijnen
   in plaats van zwevend. */
.pipeline {
  display: flex;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.pipeline-column {
  min-width: 240px;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* De scheiding tussen kolommen is een haarlijn, geen tussenruimte. De
     laatste kolom heeft er geen, anders staat hij dubbel op de buitenrand. */
  border-right: 1px solid var(--border);
}
.pipeline-column:last-child { border-right: 0; }

/* Kolomkop = tabelkop. Zelfde maat, letter en haarlijn als `thead th`
   (style.css r812), zodat het bord en de lijstpagina's één taal spreken.
   Sticky, zodat je bij een lange kolom blijft zien in welke fase je kijkt. */
.pipeline-header {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 2;
}

.pipeline-header h3 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.pipeline-header .count {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-tertiary);
  background: var(--surface-active);
  padding: 1px 7px;
  border-radius: 999px;
}

.pipeline-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 60px;
}

/* Rand-tot-rand in de kolom. Alleen een haarlijn onderaan als scheiding --
   dat leest als een rij in een tabel, niet als een zwevend kaartje. */
.pipeline-card {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.pipeline-card:last-child { border-bottom: 0; }

.pipeline-card:hover {
  background: var(--surface-hover, var(--surface-active));
}

/* Mobiel is het bord geen kanban. Gemeten op staging (18-09, 390px): zeven
   kolommen naast elkaar gaven een strook van 2381px waarvan je er 358 zag, dus
   je swipete blind door bijna zeven schermbreedtes zonder te zien in welke fase
   je was. Een lege kolom kostte evenveel ruimte als een volle.
   In plaats daarvan: een faseregel met tellingen (dezelfde pills als op
   Kandidaten) en daaronder één verticale lijst met de gekozen fase. */
.pipeline-fasetabs { display: none; }

@media (max-width: 768px) {
  .pipeline-fasetabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Tot de rand van het werkvlak schuiven, zodat de laatste fase niet half
       onder de kantlijn blijft steken. De 16px is de inhoudsmarge op mobiel. */
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
  }
  .pipeline-fasetabs::-webkit-scrollbar { display: none; }

  .pipeline { display: block; overflow-x: visible; }
  /* Alleen de gekozen fase in beeld; de rest blijft in de DOM staan zodat een
     breder venster meteen weer het hele bord toont zonder her-render. */
  .pipeline-column { display: none; }
  .pipeline-column--mobiel { display: flex; border-right: 0; min-width: 0; }
  /* De kolomkop staat mobiel al in de pills-rij hierboven, mét telling. */
  .pipeline-column--mobiel .pipeline-header { display: none; }
}

.pipeline-card[draggable="true"] {
  cursor: grab;
}

.pipeline-card[draggable="true"]:active {
  cursor: grabbing;
  opacity: 0.6;
}

/* Dode regel sinds het bord `kanban__col--dragover` zet (pipeline.js r353);
   `.drag-over` wordt nergens toegekend. Bewust laten staan zou een tweede,
   afwijkende sleepstijl in stand houden -- zie .kanban__col--dragover. */

.pipeline-card .pc-top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.pipeline-card .pc-top .pc-name { flex: 1; min-width: 0; }

.pipeline-card .pc-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-primary);
  margin-bottom: 3px;
}

/* Fase-menu op de kaart: touch-alternatief voor drag-and-drop (HTML5-DnD
   vuurt niet op iOS/Android) en op desktop sneller dan slepen. */
.pc-fase-dd { position: relative; flex: none; }

.pc-fase-btn {
  width: 28px;
  height: 28px;
  margin: -4px -6px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 6px;
  color: var(--fg-tertiary);
  cursor: pointer;
  padding: 0;
}

.pc-fase-btn:hover { background: var(--surface-active); color: var(--fg-primary); }

.pc-fase-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 60;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
}

.pc-fase-menu button {
  text-align: left;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--fg-primary);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 36px;
}

.pc-fase-menu button:hover { background: var(--surface-active); }

@media (max-width: 768px) {
  .pc-fase-btn { width: 36px; height: 36px; margin: -6px -8px 0 0; }
  .pc-fase-menu button { min-height: 44px; }
}

.pipeline-card .pc-info {
  font-size: 12px;
  color: var(--fg-tertiary);
}

.pipeline-card .pc-when {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
}

.pipeline-card .pc-when svg {
  flex: none;
  opacity: 0.75;
}

/* Gesprek is vandaag of morgen: koper, dezelfde accentkleur als de rest van de app. */
.pipeline-card .pc-when.urgent { color: var(--koper); }

/* Gesprek is geweest terwijl de kaart nog in Gesprek staat: dit is blijven liggen. */
.pipeline-card .pc-when.overdue { color: var(--status-rejected); }
/* Rondenummer, alleen vanaf het tweede gesprek. Eigen kleur i.p.v. currentColor:
   het label hoort bij de ronde, niet bij de urgentie van de datum ernaast. */
.pipeline-card .pc-ronde {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 100px;
  background: var(--koper-subtle);
  color: var(--koper-700);
  font-variant-numeric: tabular-nums;
}

/* Gesprekkenlijst in het sollicitatiepaneel (candidate-detail.js). Vervangt de
   drie losse invoervelden; één regel per gespreksronde. */
.app-details {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface-active);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.app-details .ad-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 8px;
}
.iv-list { display: flex; flex-direction: column; }
.iv-row {
  display: grid;
  grid-template-columns: 18px 84px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border-radius: var(--radius-xs);
}
.iv-row + .iv-row { border-top: 1px solid var(--border); }
.iv-row.is-active { background: var(--koper-subtle); }
.iv-mark { display: flex; align-items: center; justify-content: center; }
.iv-mark svg { width: 15px; height: 15px; }
.iv-ronde { font-size: 12px; font-weight: 500; white-space: nowrap; }
.iv-when {
  font-size: 12px;
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.iv-where { color: var(--fg-tertiary); font-size: 11.5px; }
.iv-leeg { color: var(--fg-tertiary); font-size: 12px; padding: 2px 6px 6px; }
.iv-pill {
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.iv-pill.done { background: rgba(22, 163, 74, 0.10); color: #15803D; }
.iv-pill.planned { background: var(--koper-subtle); color: var(--koper-700); }
.iv-pill.asked { background: rgba(23, 56, 79, 0.07); color: var(--navy); }
.iv-pill.cancelled { background: var(--surface-active); color: var(--fg-tertiary); }
.iv-add {
  margin-top: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  width: 100%;
}
.iv-add:hover { border-color: var(--koper); color: var(--koper); }
.iv-edit {
  font-family: inherit;
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--fg-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.iv-edit:hover { border-color: var(--koper); color: var(--koper); }

/* Inline datum/tijd-editor, verschijnt onder de regel die je wijzigt. */
.iv-edit-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-active);
  border-radius: var(--radius-xs);
}
.iv-edit-section { display: flex; flex-direction: column; gap: 2px; }
.iv-edit-section strong { font-size: 12px; color: var(--fg-primary); }
.iv-edit-section > span { font-size: 11px; color: var(--fg-tertiary); }
.iv-edit-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.iv-edit-veld { display: flex; flex-direction: column; gap: 3px; }
.iv-edit-veld > span { font-size: 11px; color: var(--fg-tertiary); }
.iv-edit-veld input {
  font-family: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  width: 100%;
  box-sizing: border-box;
}
.iv-edit-knoppen { display: flex; justify-content: flex-end; gap: 8px; }
.iv-slot-list { display: flex; flex-direction: column; gap: 6px; }
.iv-slot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: end;
}
.iv-slot-row .iv-edit-veld,
.iv-slot-row .iv-edit-veld input { min-width: 0; }
.iv-slot-remove,
.iv-slot-add {
  font: inherit;
  color: var(--fg-secondary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.iv-slot-remove { width: 28px; height: 28px; font-size: 17px; line-height: 1; }
.iv-slot-add { align-self: flex-start; padding: 5px 9px; font-size: 11px; }
.iv-slot-remove:hover,
.iv-slot-add:hover { border-color: var(--koper); color: var(--koper); }
.iv-slot-remove:disabled,
.iv-slot-add:disabled { opacity: .45; cursor: default; }
.iv-row .iv-edit:focus-visible,
.iv-add:focus-visible,
.iv-edit-veld input:focus-visible,
.iv-slot-remove:focus-visible,
.iv-slot-add:focus-visible { outline: 2px solid var(--koper); outline-offset: 2px; }

@media (max-width: 640px) {
  .iv-edit-velden { grid-template-columns: 1fr; }
  .iv-slot-row { grid-template-columns: minmax(0, 1fr) 28px; }
  .iv-slot-row .iv-edit-veld { grid-column: 1; }
  .iv-slot-row .iv-slot-remove { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

@media (max-width: 640px) {
  .iv-row { grid-template-columns: 18px 1fr; row-gap: 4px; }
  .iv-row .iv-when, .iv-row .iv-pill, .iv-row .iv-edit { grid-column: 2; justify-self: start; }
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  background: var(--surface-active);
  border-radius: var(--radius-sm);
  padding: 3px;
  width: fit-content;
}

.tab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-tertiary);
  padding: 6px 14px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  transition: all var(--dur-fast);
}

.tab:hover { color: var(--fg-primary); }
.tab.active {
  color: var(--fg-primary);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* Filter pills -alternative to tabs for status filtering */
.filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filter-pill {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 450;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: all var(--dur-fast);
}

.filter-pill:hover { border-color: var(--border-strong); color: var(--fg-primary); }

.filter-pill.active {
  background: var(--fg-primary);
  color: var(--white);
  border-color: var(--fg-primary);
}

/* Meervoudige statuschips in de filterbalk (cfg.multiPills). Zelfde .filter-pill
   als de enkelvoudige variant -- alleen het gedrag verschilt (meerdere tegelijk
   aan, leeg = alles), dus het zou verwarrend zijn ze er ánders uit te laten
   zien. Deze wrapper houdt ze alleen bij elkaar in een aflopende balk. */
.filter-bar__multi { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 768px) {
  /* Aanraakbaar, en de rij mag de volle breedte pakken zodat de chips niet
     samengeknepen worden naast het zoekveld. */
  .filter-bar__multi { flex: 1 1 100%; }
  .filter-bar__multi .filter-pill { min-height: 44px; padding: 10px 16px; }
}

/* Pipeline kolom-zichtbaarheid-toggles: variant van .filter-pill met rondere vorm */
.pipeline-fase-toggle {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.pipeline-fase-toggle:hover { border-color: var(--border-strong); color: var(--fg-primary); }
.pipeline-fase-toggle.active {
  background: var(--fg-primary);
  color: var(--white);
  border-color: var(--fg-primary);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 64px 32px;
  color: var(--fg-tertiary);
}

.empty-state svg {
  width: 48px;
  height: 48px;
  stroke: var(--border);
  fill: none;
  stroke-width: 1.5;
  margin-bottom: 16px;
}

.empty-state h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary);
  margin-bottom: 4px;
}

/* Login page */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
  background: linear-gradient(145deg, #FDFCF9 0%, #EDE7DF 100%);
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px 40px 40px;
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-modal);
  animation: modalIn var(--dur-slow) var(--ease-out);
}

.login-card img { height: 32px; margin-bottom: 32px; }

.signup-card { width: 440px; }

.auth-card-copy {
  color: var(--fg-tertiary);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  margin: -14px 0 22px;
}

.form-hint {
  display: block;
  color: var(--fg-tertiary);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 5px;
}

.signup-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--fg-secondary);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 4px;
  cursor: pointer;
}

.signup-consent input { margin-top: 2px; flex: 0 0 auto; }
.signup-consent a { color: var(--koper); }

.signup-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.auth-switch { margin-top: 14px !important; }

.auth-result-card p {
  color: var(--fg-secondary);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
  margin-bottom: 18px;
}

.auth-result-card .auth-card-copy { margin: 0 0 22px; color: var(--fg-tertiary); }

.auth-result-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px 0 20px;
  border-radius: 50%;
  background: var(--badge-green-bg);
  color: var(--badge-green-fg);
  font-size: 22px;
  font-weight: 700;
}

.login-card h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--fg-primary);
  margin-bottom: 28px;
  letter-spacing: -0.02em;
  text-align: center;
  width: 100%;
}

.login-card form { width: 100%; }
.login-card .form-group { text-align: left; }
.login-card .form-group label { font-size: 13px; }
.login-card .form-group input { padding: 10px 14px; font-size: 15px; }
.login-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 14px;
}

.login-error {
  background: var(--badge-red-bg);
  color: var(--badge-red-fg);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  display: none;
  width: 100%;
  text-align: center;
}

.login-footer {
  margin-top: 24px;
  font-size: 12px;
  color: var(--fg-quaternary);
  letter-spacing: 0.02em;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--fg-tertiary);
  font-size: 13px;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}

.btn-outline {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.btn-outline:hover {
  border-color: var(--koper);
  color: var(--koper);
}

.btn-link {
  background: none;
  border: none;
  color: var(--fg-tertiary);
  cursor: pointer;
  padding: 0;
}
.btn-link:hover { color: var(--koper); }

.btn-ghost {
  background: transparent;
  color: var(--fg-tertiary);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--surface-active);
  color: var(--fg-primary);
  border-color: var(--border-strong);
}
.btn-ghost.active {
  background: var(--surface-active);
  color: var(--fg-primary);
}

.btn-danger {
  background: var(--badge-red-fg);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(220,38,38,0.3);
}
.btn-danger:hover { background: #B91C1C; }

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--glass-toast);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--white);
  padding: 11px 20px;
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  font-size: 13px;
  font-weight: 500;
  z-index: 2000;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: all var(--dur-base) var(--ease-spring);
  pointer-events: none;
  box-shadow: var(--shadow-modal);
}

.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Toast-varianten: 'info' blijft neutraal (geen accent/icoon). success/error
   krijgen een gekleurde accent-rand en een icoon-glyph via ::before, zodat er
   geen innerHTML nodig is (frontend-hygiene-ratchet blijft ongemoeid). */
.toast--success { border-left-color: #16A34A; }
.toast--error { border-left-color: #DC2626; }
.toast--success::before,
.toast--error::before {
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}
.toast--success::before { content: "\2713"; color: #4ADE80; }
.toast--error::before { content: "\2715"; color: #F87171; }

/* Sortable headers */
th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  color: var(--fg-primary);
}

/* Selected row */
tr.selected-row {
  background: rgba(217, 123, 61, 0.06) !important;
}

/* Checkbox in table */
thead th.col-check,
tbody td.col-check {
  text-align: center;
  width: 44px;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--fg-quaternary);
  border-radius: 4px;
  cursor: pointer;
  background: var(--surface);
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
  flex-shrink: 0;
}
input[type="checkbox"]:hover {
  border-color: var(--koper);
}
input[type="checkbox"]:checked {
  background: var(--koper);
  border-color: var(--koper);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* AI response formatting */
.ai-response strong { font-weight: 600; }
.ai-response em { font-style: italic; }
.ai-response code {
  background: var(--surface-active);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
.ai-response .ai-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--fg-primary);
  margin: 16px 0 6px;
}
.ai-response .ai-h:first-child { margin-top: 0; }
.ai-response .ai-p { margin: 8px 0; }
.ai-response .ai-p:first-child { margin-top: 0; }
.ai-response .ai-p:last-child { margin-bottom: 0; }
.ai-response .ai-list { margin: 8px 0; }
.ai-response .ai-list li { margin: 3px 0; }
/* Opsommingen: eigen, consistente bullet i.p.v. de wisselend-renderende
   ::marker (die soms vaag/afwijkend oogde). */
.ai-response ul.ai-list { list-style: none; padding-left: 18px; }
.ai-response ul.ai-list > li { position: relative; }
.ai-response ul.ai-list > li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--koper);
}
.ai-response ol.ai-list { padding-left: 22px; }
.ai-response ol.ai-list > li { padding-left: 2px; }
.ai-response ol.ai-list > li::marker { color: var(--fg-tertiary); font-variant-numeric: tabular-nums; }
.ai-response .ai-table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.ai-response .ai-table th,
.ai-response .ai-table td {
  border-bottom: 1px solid var(--border);
  padding: 7px 11px;
  text-align: left;
  vertical-align: top;
}
.ai-response .ai-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--fg-secondary);
}
.ai-response .ai-table tr:last-child td { border-bottom: none; }
.ai-response .ai-table td + td,
.ai-response .ai-table th + th { border-left: 1px solid var(--border); }

@keyframes pulse {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(200%); }
}

/* Mobile hamburger */
.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 90;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}

.mobile-header img { height: 20px; }

.hamburger {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--fg-primary);
  border-radius: 6px;
}

.hamburger:active { background: var(--surface-active); }

.mobile-header .mobile-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  flex: 1;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 99;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sidebar-backdrop.open { display: block; }

/* Icon stroke consistency -global rule, overridable per-component */
svg { stroke-width: 1.5; }

/* Focus-visible ring */
:focus-visible {
  outline: 2px solid var(--koper);
  outline-offset: 2px;
}
.btn:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--koper);
  outline-offset: 2px;
  box-shadow: var(--shadow-ring);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
}

/* Enhanced card interactions */
.card:active, .stat-card:active, .pipeline-card:active { transform: scale(0.99); }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120,100,80,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,100,80,0.25); }

/* Responsive */
@media (max-width: 768px) {
  .mobile-header { display: flex; }

  /* De paginakop staat op een telefoon dubbel: de mobiele balk draagt dezelfde
     titel én een plusknop die dezelfde openAddModal() aanroept (app.js schakelt
     beide knoppen synchroon). Dat kostte ruim 90px aan het begin van elke
     pagina. De subtitel vervalt hier; op de lijstschermen staat dat aantal
     verderop toch al ("20 kandidaten · gesorteerd op ..."). */
  .page-header { display: none; }

  .app {
    grid-template-columns: 1fr;
    padding-top: 52px;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: none;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-modal);
  }

  .content {
    padding: 16px !important;
    min-height: calc(100dvh - 52px);
  }

  /* Chat-pagina: de generieke 16px !important + min-height hierboven duwde de
     composer buiten beeld (100vh > zichtbare 100dvh op iOS, en overflow:hidden
     maakt scrollen onmogelijk). De chat vult exact de zichtbare hoogte. */
  .content--chat {
    padding: 0 !important;
    min-height: 0;
    height: calc(100dvh - 52px);
  }


  /* Stats: op mobiel een net 2-koloms raster i.p.v. 5 platgedrukte kaarten.
     Base is display:flex, dus expliciet naar grid zetten anders doet
     grid-template-columns niets. */
  .stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }

  .dash-widgets-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 14px 16px;
  }

  .stat-card .stat-value {
    font-size: 20px;
  }

  /* Tables: horizontal scroll */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* :not(--cards) is essentieel. Een kaartlijst mag juist NIET 580px breed
     blijven: de tr's zijn daar blokken, dus die min-width duwde elke kaart
     ~230px buiten het scherm terwijl de wrapper (352px op een 390px-telefoon)
     netjes binnen de marge stond. Gemeten op staging 2026-08-16, en het gold
     voor élke kaartlijst (klanten, vacatures, contacten, plaatsingen), niet
     alleen leads. Deze regel staat later in het bestand dan het kaartblok en
     heeft dezelfde specificiteit, dus hij won -- vandaar de uitsluiting hier
     in plaats van een tegenregel bij de kaarten. */
  .table-wrap:not(.table-wrap--cards) table {
    min-width: 580px;
  }

  /* Tabs: scroll horizontally */
  .tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
  }

  .tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 12px;
  }

  /* Pipeline: horizontaal swipebaar bord met snap per kolom. De vroegere
     verticale stapeling gaf 8 volle-breedte kolommen onder elkaar — een
     eindeloze pagina zonder bord-gevoel. */
  .pipeline {
    gap: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .pipeline-column {
    min-width: 85vw;
    scroll-snap-align: start;
  }

  /* Modal: full-screen on mobile. 100dvh, niet 100vh: op iOS is 100vh
     de viewport zonder adresbalk, waardoor de footer met de primaire
     knop buiten beeld valt en onbereikbaar is (alleen .modal-body scrolt). */
  .modal {
    width: 100%;
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  .modal-overlay.open {
    align-items: stretch;
  }

  .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }

  .modal-header {
    padding: 16px 16px 0;
    flex-shrink: 0;
  }

  .modal-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }

  /* Forms: prevent zoom on iOS */
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px;
  }

  /* Search */
  .search-box { display: none; }

  /* All 2-col inline grids stack on mobile.
     minmax(0, 1fr) en niet 1fr: een kale fr-kolom heeft min-width auto
     (= min-content), dus brede inhoud (een datatabel, een Chart.js-canvas)
     rekt de kolom op voorbij het scherm i.p.v. te krimpen. Gemeten 16-08 op
     staging: de Verdieping op de Rapportage-tab kreeg zo één kolom van 896 px
     in 286 px ruimte -> 561 px horizontale scroll op de hele pagina. Met een
     0-minimum krimpt de kolom en scrollt de tabel binnen zijn eigen
     .table-wrap. Bewaakt door tests/test_frontend_grid_overflow.py. */
  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Login */
  .login-card {
    width: 100%;
    max-width: 360px;
    margin: 0 16px;
    padding: 32px 24px;
  }

  .signup-card { width: 100%; }

  /* Toast */
  .toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    text-align: center;
  }

  /* Iframe pages full height */
  .content iframe {
    height: calc(100vh - 52px - 32px) !important;
  }

  /* Add button in mobile header */
  .mobile-add-btn {
    background: var(--fg-primary);
    color: var(--bg);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .mobile-add-btn:active { opacity: 0.8; }
}

/* Profile sections (collapsible) in candidate detail */
.profile-section {
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--card-ring);
}
.profile-section[open] {
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.profile-section > summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
}
.profile-section > summary::-webkit-details-marker { display: none; }
.profile-section > summary::after {
  content: '+';
  font-size: 18px;
  color: var(--fg-tertiary);
  font-weight: 400;
  line-height: 1;
}
.profile-section[open] > summary::after { content: '–'; }
.profile-section > summary:hover { background: var(--surface-active); }
.profile-section .section-body {
  padding: 10px 16px 16px;
}
.profile-section .section-meta {
  font-size: 11px;
  color: var(--fg-tertiary);
  font-weight: 400;
}

/* Field grid in profile sections */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* Chip-style multi-select */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--fg-secondary);
  cursor: pointer;
  background: var(--surface);
  user-select: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--koper); color: var(--koper); }
.chip.active {
  background: var(--koper);
  color: var(--white);
  border-color: var(--koper);
  box-shadow: 0 1px 4px rgba(208,122,58,0.2);
}

/* Profile section completion indicator */

/* Wide modal variant */
.modal.wide { width: min(1280px, 96vw); height: 85vh; display: flex; flex-direction: column; }
.modal.wide .modal-body { flex: 1; overflow-y: auto; min-height: 0; }
@media (max-width: 700px) {
  .modal.wide { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

/* Smart Paste */
/* Vacature-verrijking vanaf URL */
.enrich-box {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.enrich-box__title { font-size: 13px; font-weight: 600; }
.enrich-box__hint { font-size: 12px; color: var(--fg-tertiary); margin: 2px 0 8px; }
.enrich-box__row { display: flex; gap: 8px; }
.enrich-box__row input { flex: 1; }
.enrich-preview:empty { display: none; }
.enrich-preview__head { font-size: 12.5px; font-weight: 600; margin: 12px 0 6px; }
.enrich-preview__empty { font-size: 12.5px; color: var(--fg-tertiary); margin-top: 10px; }
.enrich-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.enrich-row input[type=checkbox] { margin-top: 3px; }
.enrich-row__body { flex: 1; min-width: 0; }
.enrich-row__label { font-size: 12px; font-weight: 600; color: var(--fg-secondary); }
.enrich-row__val { font-size: 12.5px; word-break: break-word; }
.enrich-row__old { color: var(--fg-tertiary); text-decoration: line-through; }
.enrich-row__new { color: var(--koper); }

.smart-paste-zone {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1.5px dashed rgba(217,123,61,0.3);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
  overflow: hidden;
}
.smart-paste-zone:focus-within {
  border-color: var(--koper);
  border-style: solid;
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(208,122,58,.12);
}
.smart-paste-zone.drag-over { border-color: var(--koper); border-style: solid; background: rgba(217,123,61,0.04); }

.smart-paste-icon { color: var(--koper); padding-top: 4px; flex-shrink: 0; }
.smart-paste-main { flex: 1; min-width: 0; }
.smart-paste-input {
  width: 100%; border: none; background: transparent; font-size: 15px;
  font-family: var(--font-body); color: var(--fg-primary); resize: none;
  outline: none; min-height: 28px; max-height: 150px; line-height: 1.5; padding: 0;
  overflow-x: hidden; scrollbar-width: none;
}
.smart-paste-input::-webkit-scrollbar { display: none; }
.smart-paste-input::placeholder { color: var(--fg-tertiary); }

.smart-paste-file-btn, .smart-paste-send-btn, .smart-paste-mic-btn {
  flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; border: none; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast); margin-top: 0;
}
.smart-paste-file-btn { background: transparent; color: var(--fg-tertiary); }
.smart-paste-file-btn:hover { background: var(--surface-active); color: var(--fg-primary); }
.smart-paste-mic-btn { background: transparent; color: var(--fg-tertiary); }
.smart-paste-mic-btn:hover { background: var(--surface-active); color: var(--fg-primary); }
.smart-paste-mic-btn.recording { background: var(--badge-red-bg); color: var(--badge-red-fg); animation: sp-pulse 1.2s infinite; }
@keyframes sp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.smart-paste-send-btn { background: var(--fg-primary); color: var(--white); }
.smart-paste-send-btn:hover { background: #333; }

.smart-paste-processing {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  font-size: 13px; color: var(--fg-tertiary); margin-bottom: 14px;
}
.smart-paste-spinner {
  width: 16px; height: 16px; border: 2px solid var(--border);
  border-top-color: var(--koper); border-radius: 50%; animation: sp-spin .6s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

.smart-paste-preview {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 14px; overflow: hidden;
}
.sp-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--surface-active); border-bottom: 1px solid var(--border);
}
.sp-header-text { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.sp-source { color: var(--fg-tertiary); font-size: 12px; margin-left: 4px; }
.sp-fields { padding: 4px 0; }
/* Scrollende voorstellijst: meegroeien met het scherm en niet midden
   door een regel afkappen (dat las als een renderfout). */
.sp-fields--scroll { max-height: min(52vh, 460px); overflow-y: auto; scroll-padding-block: 8px; }
.sp-fields--scroll > * { break-inside: avoid; }
.sp-field-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  cursor: pointer; transition: background var(--dur-fast); font-size: 13px;
}
.sp-field-row:hover { background: var(--surface-hover); }
.sp-field-row input[type="checkbox"] { flex-shrink: 0; }
.sp-field-info { flex: 1; min-width: 0; }
.sp-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--fg-tertiary); font-weight: 600; margin-bottom: 2px; }
.sp-field-values { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-current { color: var(--fg-quaternary); text-decoration: line-through; font-size: 12.5px; }
.sp-arrow { color: var(--fg-quaternary); flex-shrink: 0; }
.sp-new { color: var(--fg-primary); font-weight: 500; }
.sp-confidence { font-size: 10px; padding: 1px 6px; border-radius: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
.sp-raw-note { padding: 8px 14px; font-size: 12px; color: var(--fg-secondary); border-top: 1px solid var(--border); background: var(--surface-active); }
.sp-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
.smart-paste-empty { display: flex; align-items: center; padding: 12px 14px; font-size: 13px; color: var(--fg-tertiary); }

/* Candidate detail hero - Horizontal layout */
.cand-hero {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 4px 0 20px;
  margin-bottom: 4px;
}
.cand-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #E3EDF5;
  color: var(--fg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-display);
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.cand-info {
  flex: 1;
  min-width: 0;
}
.cand-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.cand-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.2;
}
.cand-name-row .badge {
  font-size: 11px;
  padding: 2px 8px;
}
.cand-subtitle {
  font-size: 15px;
  color: var(--fg-secondary);
  margin-bottom: 6px;
}
.cand-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--fg-tertiary);
  margin-bottom: 2px;
}
.cand-meta a { color: var(--fg-tertiary); text-decoration: none; }
.cand-meta a:hover { color: var(--koper); }
.cand-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cand-meta-item svg { width: 13px; height: 13px; }

/* Action buttons: below hero info */
.cand-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cand-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.cand-action-btn:hover {
  border-color: var(--border-strong);
  color: var(--fg-primary);
  background: var(--surface-hover);
}
.cand-action-btn.primary {
  background: var(--fg-primary);
  color: var(--white);
  border-color: var(--fg-primary);
}
.cand-action-btn.primary:hover {
  background: #333;
  border-color: #333;
}
.cand-action-btn svg { width: 15px; height: 15px; stroke-width: 1.5; flex-shrink: 0; }

/* Badges row (no longer separate) */
.cand-badges {
  display: none;
}

/* Insights panel - larger, more readable */
.insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.insight {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast);
}
.insight:hover { border-color: var(--border-strong); }
.insight.warn { background: var(--badge-orange-bg); border-color: color-mix(in srgb, var(--badge-orange-fg) 30%, transparent); }
.insight.good { background: var(--badge-green-bg); border-color: color-mix(in srgb, var(--badge-green-fg) 30%, transparent); }

/* Stat row (alias for insights) */

/* Tab navigation - underline style */
.tab-nav {
  display: flex;
  gap: 0;
  background: none;
  border-bottom: 1px solid var(--border);
  padding: 0;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-tertiary);
  cursor: pointer;
  transition: all 150ms;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--fg-primary); }
.tab-btn.active {
  color: var(--fg-primary);
  border-bottom-color: var(--koper);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Timeline */
.timeline { padding-left: 0; }
.timeline-item {
  position: relative;
  padding: 0 0 14px 24px;
  border-left: 1px solid var(--border);
  margin-left: 6px;
}
.timeline-item:last-child { border-left: 1px solid transparent; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--koper);
  border: 2px solid var(--surface);
}
.timeline-time {
  font-size: 13px;
  color: var(--fg-tertiary);
  margin-bottom: 3px;
}
.timeline-text {
  font-size: 15px;
  color: var(--fg-primary);
  line-height: 1.4;
}

/* Quick-note */

/* AI summary card - premium */
.ai-summary {
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--koper) 3%, var(--surface)) 100%);
  border: 1px solid color-mix(in srgb, var(--koper) 12%, var(--border));
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
  position: relative;
}
.ai-summary-tags .badge {
  font-size: 12px;
  padding: 3px 10px;
}

/* Mode tabs at top of sidebar (Chat | ATS) */
/* Column picker */
/* De kolomkiezer is een native <details class="col-picker"> met een eigen,
   inline-gestylede dropdown-<div>. De oude regels hieronder (display:none +
   .col-picker.open) hoorden bij een vroegere div-dropdown die met een 'open'-
   CLASS werd getoggeld; op de <details> (die 'open' als ATTRIBUUT gebruikt)
   verborgen ze juist de hele knop. Daarom verwijderd — geen eigen CSS nodig. */

/* Clickable badge */
.clickable-badge { cursor: pointer; }
.clickable-badge:hover { filter: brightness(0.9); }

/* Inline fase select */
.inline-fase-select {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--koper);
  border-radius: 6px;
  background: var(--surface);
  color: var(--fg-primary);
  outline: none;
}

/* Contact cards */
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.contact-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.contact-card-details {
  display: flex;
  gap: 16px;
  margin-top: 6px;
}

/* --- Smart Matching --- */

.smart-match-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  color: var(--fg-secondary);
  font-size: 13px;
  background: var(--surface-active);
  border-radius: var(--radius-md);
  margin-top: 12px;
}

.smart-match-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--fg-tertiary);
  font-size: 13px;
  text-align: center;
  justify-content: center;
  margin-top: 12px;
}

/* Lege/placeholder-staat op het Matching-tabblad: gecentreerde oproep. */
.smart-match-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 44px 24px;
  color: var(--fg-tertiary);
}
.smart-match-cta__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-primary);
  margin-top: 6px;
}
.smart-match-cta p {
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 420px;
  margin: 0;
}

.smart-match-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--koper);
  margin-top: 16px;
  margin-bottom: 8px;
}

.smart-match-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Matching toolbar: filterpills links, count + view-toggle rechts */
/* De toolbar draagt sinds 2026-09-18 alleen nog de gedeelde filterbalk; de
   telling en de weergavekeuze staan in de lijstbalk eronder, zoals op elke
   andere lijstpagina. `.match-toolbar__right` en `.match-count-label` bestaan
   daardoor niet meer. */
.match-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.match-toolbar .filter-bar { flex: 1; margin-bottom: 0; }
.match-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.match-view-btn { width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; background: var(--white); color: var(--fg-quaternary); cursor: pointer; }
.match-view-btn + .match-view-btn { border-left: 1px solid var(--border); }
.match-view-btn.active { background: var(--surface-active); color: var(--fg-primary); }

/* Matching lijstweergave: zelfde tabelpatroon (.table-wrap) als de kandidaten-,
   vacature- en klantenpagina. Alleen de matching-eigen cellen staan hier. */
.match-score-cell { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.match-count-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-secondary); white-space: nowrap; }
.match-dot--tweede { margin-left: 8px; }
.match-analyse-cell.is-clickable { cursor: pointer; }
.match-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.match-dot--green { background: #16A34A; }
.match-dot--amber { background: #D97706; }
.match-row-actions { display: flex; gap: 6px; }
.match-icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--fg-tertiary); cursor: pointer; transition: all .15s ease; }
.match-icon-btn:hover { border-color: var(--border-strong); color: var(--fg-primary); background: var(--surface-active); }

/* Uitklapbare detailrij met AI-onderbouwing en sterke/aandachtspunten */
.match-expand svg { transition: transform 0.2s ease; }
.match-expand.open { color: var(--fg-primary); background: var(--surface-active); }
.match-expand.open svg { transform: rotate(180deg); }
.match-detail-row { display: none; }
.match-detail-row.open { display: table-row; }
/* Cap op leesbreedte: de cel beslaat de hele (soms horizontaal scrollende)
   tabelbreedte; zonder cap loopt de onderbouwing buiten beeld. */
.match-detail { max-width: 860px; }
.match-detail__reason { font-size: 13px; color: var(--fg-secondary); line-height: 1.5; margin-bottom: 8px; }
.match-detail__sec { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 6px; }
.match-detail__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; width: 100%; margin-bottom: 2px; }

/* Matching loader tijdens een AI-run */
.match-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 0; color: var(--fg-tertiary); }
.match-loading__spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--koper); border-radius: 50%; animation: match-spin 0.8s linear infinite; }
.match-loading__text { font-size: 13.5px; }
@keyframes match-spin { to { transform: rotate(360deg); } }

/* Overview vacatures on candidate card */
.overview-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
/* Vacancy-kaarten in dit overzicht zijn vervangen door .cand-link-list rijen
   (propose-flow sectie onderaan dit bestand). */

/* Legacy fallback */

/* Matching module page */
.matching-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Marktkansen-tab binnen Matching; volgt de bestaande kaart-, filter- en tabtokens. */
.market-opportunities { padding: 0 24px 24px; }
.market-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.market-toolbar .filter-input { flex: 1 1 260px; }
.market-toolbar input.filter-input { height: 34px; padding: 0 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--fg-primary); font: inherit; font-size: 13px; }
.market-toolbar input.filter-input:focus { border-color: var(--koper); outline: none; }
.market-progress { min-height: 22px; font-size: 12px; color: var(--fg-tertiary); }
.market-list { display: grid; gap: 12px; }
.market-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); }
.market-card__top { display: flex; justify-content: space-between; gap: 18px; }
.market-card__copy h3 { margin: 3px 0 5px; font-size: 17px; }
.market-card__eyebrow, .market-candidate__label { color: var(--koper); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.market-card__employer, .market-card__location { margin: 2px 0; color: var(--fg-secondary); font-size: 13px; }
.market-card__meta { display: flex; align-items: flex-start; gap: 10px; }
.market-card__best { font-size: 22px; font-variant-numeric: tabular-nums; }
.market-priority--high { background: rgba(217,119,6,.1); color: #B45309; }
.market-priority--normal { background: var(--surface-active); color: var(--fg-secondary); }
.market-card__facts { display: flex; gap: 20px; margin: 14px 0 8px; }
.market-card__facts div { display: contents; }
.market-card__facts dt { color: var(--fg-tertiary); font-size: 11px; }
.market-card__facts dd { margin: 0; color: var(--fg-secondary); font-size: 12px; }
.market-source-link, .market-candidate__link { color: var(--koper); font-size: 13px; }
.market-candidate__link { padding: 0; border: 0; background: none; cursor: pointer; font-weight: 600; }
.market-card__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.market-card__count { color: var(--fg-tertiary); font-size: 12px; }
.market-card__details { margin-top: 12px; }
.market-candidate { padding: 14px 0; border-top: 1px solid var(--border); }
.market-candidate__header { display: flex; justify-content: space-between; gap: 12px; }
.market-candidate__score { font-variant-numeric: tabular-nums; }
.market-candidate__reason { color: var(--fg-secondary); font-size: 13px; line-height: 1.5; }
.market-candidate__section { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.market-candidate__label { width: 100%; }
.market-tag { padding: 3px 8px; border-radius: 5px; font-size: 12px; }
.market-tag--positive { background: #DCFCE7; color: #15803D; }
.market-tag--risk { background: #FFF3E8; color: #C2410C; }
.market-task-btn { margin-top: 8px; }
.market-empty, .market-loading { padding: 42px 12px; text-align: center; color: var(--fg-tertiary); }
.market-empty--error { color: var(--badge-red-fg); }

@media (max-width: 767px) {
  .market-opportunities { margin-left: 0; margin-right: 0; padding-left: 14px; padding-right: 14px; }
  .market-toolbar > * { width: 100%; }
  .market-card__top, .market-card__facts { flex-direction: column; gap: 8px; }
}

/* Role suggestions (when no/few vacancy matches) */
.role-suggestions {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, var(--surface-active), rgba(184, 115, 51, 0.04));
  border: 1px solid var(--border);
  border-left: 3px solid var(--koper);
  border-radius: var(--radius-md);
}
.role-suggestions-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--koper);
  margin-bottom: 8px;
}
.role-suggestions-summary {
  font-size: 12.5px;
  color: var(--fg-secondary);
  font-style: italic;
  margin-bottom: 10px;
}
.role-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.role-suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.role-suggestion-level {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 10px;
  margin-top: 1px;
}
.role-suggestion-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-primary);
}
.role-suggestion-reasoning {
  font-size: 12px;
  color: var(--fg-secondary);
  margin-top: 1px;
}
.role-suggestions-tips {
  margin-top: 10px;
  font-size: 12px;
  color: var(--fg-secondary);
}
.role-suggestions-tips strong {
  color: var(--fg-primary);
  font-size: 12px;
}
.role-suggestions-tips ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
.role-suggestions-tips li {
  margin-bottom: 2px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 0.8s linear infinite;
}
.spinner {
  width: 24px; height: 24px;
  border: 3px solid rgba(139,90,43,0.15);
  border-top-color: var(--koper);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Bezig-state op een knop (via withBusy() in ui.js): dim + niet klikbaar, met
   een spinnertje achter het label. currentColor werkt op elke knopvariant. */
.is-busy {
  pointer-events: none;
  opacity: 0.72;
  position: relative;
}
.is-busy::after {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 8px;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ============================================================
   POLISH LAYER -Professional refinements
   ============================================================ */

/* 1. Custom Select Styling */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C7C82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px !important;
  cursor: pointer;
}
select:hover {
  border-color: var(--border-strong);
}
select:focus {
  border-color: var(--koper);
  box-shadow: var(--shadow-ring);
}
/* Inline fase select override */
.inline-fase-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23D07A3A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px;
  padding-right: 22px;
}

/* 2. Smooth Details/Summary Animation */
.profile-section .section-body {
  overflow: hidden;
  animation: section-open var(--dur-base) var(--ease-out);
}
@keyframes section-open {
  from { opacity: 0; max-height: 0; transform: translateY(-4px); }
  to { opacity: 1; max-height: 800px; transform: translateY(0); }
}
.profile-section > summary {
  transition: background var(--dur-fast), color var(--dur-fast);
}
.profile-section > summary::after {
  transition: transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}
.profile-section[open] > summary::after {
  transform: rotate(45deg);
}
/* Plaatsingen-detail volgt het reference-design: vlakke − chevron bij open (geen rotatie) */
.pl-detail .profile-section[open] > summary::after { transform: none; }

/* 3. Skeleton Loading */
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton-bouwstenen (via skeletonRows()/skeletonList() in ui.js). Eén tint
   met een bewegende highlight; werkt in licht en donker via de surface-tokens. */
.skeleton {
  background-color: var(--surface-active);
  background-image: linear-gradient(90deg, transparent 0%, var(--surface-hover) 45%, var(--surface-hover) 55%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s ease infinite;
}
.skeleton-bar {
  display: block;
  height: 12px;
  width: 78%;
}
.skeleton-tr td { padding: 14px 16px; }
.skeleton-tr:nth-child(2n) .skeleton-bar { width: 62%; }
.skeleton-tr:nth-child(3n) .skeleton-bar { width: 88%; }
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.skeleton-card {
  height: 64px;
  border-radius: var(--radius-md);
}

/* Foutstaat met retry (via errorState() in ui.js). Spiegelt .empty-state maar
   met een rood alert-icoon, zodat een serverfout niet als "leeg" oogt. */
.error-state {
  text-align: center;
  padding: 48px 32px;
  color: var(--fg-tertiary);
}
.error-state svg {
  width: 40px;
  height: 40px;
  stroke: var(--badge-red-fg, #DC2626);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 12px;
  opacity: 0.75;
}
.error-state h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary);
  margin-bottom: 4px;
}
.error-state p {
  font-size: 13px;
  max-width: 340px;
  margin: 0 auto;
}

/* Pager (via renderPager() in ui.js) */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px 4px;
  flex-wrap: wrap;
}
.pager__count { font-size: 13px; color: var(--fg-tertiary); }
.pager__ctrl { display: flex; align-items: center; gap: 10px; }
.pager__size {
  font-size: 12px;
  color: var(--fg-tertiary);
  display: inline-flex;
  align-items: center;
}
.pager__size select { font-size: 12px; padding: 4px 24px 4px 8px; }
.pager__page {
  font-size: 12px;
  color: var(--fg-secondary);
  min-width: 46px;
  text-align: center;
}
.pager__btn {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg-secondary);
  cursor: pointer;
}
.pager__btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--fg-primary); }
.pager__btn:disabled { opacity: 0.45; cursor: default; }

/* Mobiel: de pager staat onder élke lijst, dus hij moet met een duim te
   bedienen zijn. Knoppen van 24px hoog zijn dat niet. De telling gaat naar
   een eigen regel zodat Vorige/Volgende de volle breedte krijgen. */
@media (max-width: 768px) {
  .pager { padding: 14px 0 4px; }
  .pager__count { flex: 1 1 100%; }
  .pager__ctrl { flex: 1 1 100%; justify-content: space-between; }
  .pager__btn { min-height: 44px; padding: 10px 18px; font-size: 13px; }
  /* iOS zoomt in bij een tik op een keuzelijst < 16px en zoomt niet terug. */
  .pager__size select { font-size: 16px; min-height: 44px; }
}

/* 4. Tooltip System */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 10px;
  background: var(--fg-primary);
  color: var(--bg);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
  z-index: 9999;
  box-shadow: var(--shadow-md);
  line-height: 1.3;
}
[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--fg-primary);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast);
  z-index: 9999;
}
[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-tooltip]:hover::after {
  opacity: 1;
}
/* Tooltip below variant */
[data-tooltip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + 6px);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: var(--fg-primary);
}
[data-tooltip-pos="bottom"]:hover::before {
  transform: translateX(-50%) translateY(0);
}

/* 5. Table Refinements */
/* Subtle separator between rows */
tbody td {
  border-bottom: 1px solid var(--border-light);
}
tbody tr:last-child td {
  border-bottom: none;
}
tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}
tbody tr:hover {
  background: color-mix(in srgb, var(--koper) 3%, var(--surface));
}
/* Sortable column active indicator */
th.sorted {
  color: var(--koper);
}
th.sortable:hover {
  color: var(--koper);
  background: color-mix(in srgb, var(--koper) 3%, var(--surface));
}
/* Table cell truncation for long text */

/* 6. Notification Badge on Sidebar */
.nav-item .nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--koper);
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--glass-sidebar);
  animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* Count badge next to dot */
.nav-item .nav-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  background: var(--koper);
  color: var(--white);
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

/* 7. Card Hover Accent Glow */
.card:hover,
.stat-card:hover,
.pipeline-card:hover {
  box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--koper) 15%, transparent);
  border-color: color-mix(in srgb, var(--koper) 20%, transparent);
}
/* match-card hover is defined in the Match cards section */

/* 8. Filter/Search Toolbar Cohesion */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs), var(--card-ring);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar .search-box input {
  border-color: transparent;
  background: var(--surface-active);
  border-radius: var(--radius-sm);
}
.toolbar .search-box input:focus {
  border-color: var(--koper);
  background: var(--surface);
}
.toolbar .btn-ghost {
  font-size: 12px;
  padding: 5px 10px;
}
/* Filter chip in toolbar */

/* Active filter count indicator */

/* Smooth page transitions
   Alleen infaden, geen verticale verschuiving: bij het wisselen tussen twee
   lijstpagina's schoof élk inhoudsblok 6px omhoog, wat samen met de kop- en
   rijhoogtes las als "de pagina springt". Verticale beweging hoort bij iets
   dat binnenkomt (een bulkbalk, een melding) -- die houden page-in hieronder. */
.content > div {
  animation: page-fade var(--dur-base) var(--ease-out);
}
@keyframes page-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Selection highlight refinement */
tr.selected-row {
  background: color-mix(in srgb, var(--koper) 6%, var(--surface)) !important;
  box-shadow: inset 3px 0 0 var(--koper);
}
tr.selected-row:hover {
  background: color-mix(in srgb, var(--koper) 9%, var(--surface)) !important;
}

/* Bulk actions bar */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #FEFAF7;
  border-bottom: 1px solid var(--koper-glow);
  font-size: 13px;
  font-weight: 500;
  animation: page-in var(--dur-fast) var(--ease-out);
}
.bulk-bar .bulk-count {
  font-weight: 600;
  font-size: 13px;
  color: var(--koper);
  white-space: nowrap;
}
.bulk-bar .bulk-divider {
  width: 1px;
  height: 20px;
  background: var(--koper-glow);
}
.bulk-bar .btn {
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 6px;
}
.bulk-bar .btn-ghost {
  background: none;
  border: none;
  color: var(--fg-tertiary);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  margin-left: auto;
  padding: 4px 8px;
}
.bulk-bar .btn-ghost:hover { color: var(--fg-primary); }

/* Tag/label truncation helper */

/* ── Utility classes ────────────────────────────────────────────── */
.u-hidden { display: none; }
.u-mt-3   { margin-top: var(--space-3); }
.u-mr-1   { margin-right: var(--space-1); }
.u-text-sm { font-size: var(--text-sm); }

/* Portal login semantic helpers */
.portal-hint {
  color: var(--fg-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.portal-success {
  display: none;
  background: var(--green-bg, #f0fdf4);
  color: var(--green-fg, #166534);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  margin-bottom: 12px;
}

/* ── Reduced-motion accessibility ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REDESIGN -New design system components
   All new component classes from the Apple-inspired redesign
   ═══════════════════════════════════════════════════════════════ */

/* ── Page header / body structure ───────────────────────────── */
/* Eén kop voor de hele app: witte band met haarlijn, vaste 72px hoog. Stond
   tot 2026-09-18 alleen onder .main--flush (de lijstpagina's); Dashboard,
   Pipeline en Instellingen zweefden daardoor in het grijs en hun titel begon
   4px verderop. Vaste hoogte i.p.v. "zo hoog als de inhoud": met een knop was
   de kop 72px en zonder 63px, waardoor de lijst bij elke paginawissel
   verticaal versprong.
   GEEN display-eigenschap hier: de mobiele `.page-header { display: none }`
   (zie de 768px-media-query hierboven) staat eerder in dit bestand en zou bij
   gelijke specificiteit verliezen -- de kop zou dan op een telefoon dubbel
   staan naast de mobiele bovenbalk. */
.page-header {
  height: 72px;
  box-sizing: border-box;
  padding: 0 24px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.page-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
  height: 100%;
}

.page-header__heading { display: flex; align-items: center; gap: 20px; min-width: 0; flex: 1; }

/* Weergave-pills van de lijstpagina's (page-header.js hangt ze hier op zodra
   het scherm breed genoeg is): geen eigen marge, één regel, en schuifbaar als
   ze niet passen -- zodat de rij de vaste kophoogte nooit oprekt. */
#pageTitleContext { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
#pageTitleContext .candv2-pills,
#pageTitleContext .taken-pills {
  margin: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
#pageTitleContext .candv2-pills::-webkit-scrollbar,
#pageTitleContext .taken-pills::-webkit-scrollbar { display: none; }
#pageTitleContext .candv2-pill,
#pageTitleContext .taken-pills > * { flex: none; }
#pageTitleContext:empty { display: none; }

/* 26px/-0.015em: eind-audit A17, de maat uit de kandidaten-v2-handoff. Bewust
   app-breed doorgevoerd i.p.v. alleen op het kandidatenscherm -- twee
   verschillende paginatitels naast elkaar valt meer op dan 2px. docs/REDESIGN.md
   (typografietabel) is in dezelfde commit meegewijzigd. */
.page-header__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
  line-height: 1.15;
}

.page-header__subtitle {
  font-size: 14.5px;
  color: var(--fg-tertiary);
  margin-top: 4px;
  font-weight: 400;
}

.page-header__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.page-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 32px;
}

/* ── Sortable table headers ───────────────────────────────────── */

/* ── Buttons -new variants ──────────────────────────────────── */

/* ── Lijstbalk (modules/list-bar.js) ──────────────────────────────
   Laag 03 van het lijstpagina-skelet: telling links, kolominstellingen en
   lijstacties rechts. Vervangt de per-pagina varianten (.candv2-toolbar en de
   inline kolombalk van campaigns.js), zodat die regel overal op dezelfde plek
   staat en hetzelfde doet. */
.listbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-height: 36px;
}
.listbar__count { font-size: 13px; color: var(--fg-tertiary); }
.listbar__right { display: flex; align-items: center; gap: 6px; }

/* Presets en kolomknop dragen de app-brede .btn/.btn-secondary-stijl; deze
   twee klassen voegen alleen toe wat daar niet in zit. Een eigen knopstijl
   verzinnen zou de wildgroei herhalen die deze bouwsteen moet stoppen: in de
   campagne-controlbar staan de kolompresets pal naast de datumpresets, en die
   zijn .btn. */
.listbar__preset { white-space: nowrap; }

/* Kolommen kiezen bestaat alleen waar een tabel staat (afspraak met Coen,
   18-09-2026): zodra de lijst kaarten wordt, valt er niets te kiezen en zou de
   knop alleen ruimte kosten -- op Taken stak hij zelfs 29px buiten beeld en gaf
   horizontale scroll. Kandidaten/Vacatures/Taken wisselen op 900px naar
   kaarten, de overige lijsten (.table-wrap--cards) op 768px. */
@media (max-width: 900px) {
  .candv2 .listbar__cols,
  .taken-page .listbar__cols { display: none; }
}
@media (max-width: 768px) {
  .listbar__cols { display: none; }
}

.listbar__cols { position: relative; }
.listbar__colsbtn { list-style: none; white-space: nowrap; }
.listbar__colsbtn::-webkit-details-marker { display: none; }
.listbar__colsmenu {
  position: absolute; right: 0; top: 100%; z-index: 40; margin-top: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* Expliciet, niet via --shadow-lg: die staat app-breed bewust op `none`.
     Een zwevend paneel zonder schaduw valt weg tegen de tabel eronder. Zelfde
     recept als het paneel dat dit vervangt (--cv2-shadow-lg), maar dat token
     is gescoped op .candv2 en dus niet bruikbaar in een gedeelde bouwsteen. */
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
  padding: 6px; min-width: 200px; max-height: 60vh; overflow-y: auto;
}
.listbar__opt {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  font-size: 13px; white-space: nowrap; cursor: pointer; border-radius: 6px;
}
.listbar__opt:hover { background: var(--surface-hover); }
.listbar__opt.is-locked { cursor: default; color: var(--fg-tertiary); }
.listbar__opt input { accent-color: var(--koper); cursor: inherit; }

/* Mobiel: de balk stapelt en de knoppen worden aanraakbaar (>=44px), want
   muisformaat van 30px is op een telefoon niet te raken. */
@media (max-width: 768px) {
  .listbar { flex-wrap: wrap; row-gap: 8px; }
  .listbar__count { flex: 1 1 100%; order: 2; }
  .listbar__right { order: 1; flex: 1 1 100%; overflow-x: auto; }
  .listbar__preset, .listbar__colsbtn { min-height: 44px; padding: 10px 14px; }
  .listbar__opt { min-height: 44px; }
  /* iOS zoomt in bij een tik op een veld < 16px en zoomt niet terug. */
  .listbar__colsmenu input { font-size: 16px; }
}

/* ── Filter bar ──────────────────────────────────────────────── */
/* 12px onder, app-breed sinds 2026-09-18: was 16px met .candv2 en .taken-page
   als uitzondering op 12px. Daardoor begon de lijstbalk op die twee pagina's
   4px hoger dan op de rest. Nu één waarde, dus de rijen (kop 72 - filters 87 -
   lijstbalk 133 - data 180) liggen op elke lijstpagina gelijk. */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.filter-bar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}

/* Eén zoekveld voor de hele app: de warmgrijze pil uit de kandidaten-handoff.
   Stond tot 2026-09-18 alleen onder `.candv2`; elke andere lijst (Taken, Leads,
   Klanten, Contactpersonen, Plaatsingen, Matching, Campagnes) had een witte
   rechthoek met rand, en Campagnes bovendien een eigen maat -- naast elkaar
   gelegd las dat als vier verschillende zoekvelden. */
.filter-bar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--search-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 14px;
  min-width: 260px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.filter-bar__search:focus-within {
  background: var(--white);
  border-color: var(--search-focus-border);
  box-shadow: 0 0 0 3px rgba(25, 59, 80, 0.08);
}

.filter-bar__search svg { color: var(--fg-muted); flex-shrink: 0; }

.filter-bar__search input {
  font-family: var(--font-body);
  font-size: 13.5px;
  border: none;
  background: transparent;
  color: var(--fg-primary);
  padding: 8px 0;
  outline: none;
  width: 100%;
}

.filter-bar__search input::placeholder { color: var(--fg-muted); }

.filter-select {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 450;
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--fg-primary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color var(--dur-fast);
  outline: none;
}

.filter-select:focus {
  border-color: var(--koper);
  box-shadow: 0 0 0 3px rgba(217, 123, 61, 0.1);
}

.filter-bar__clear {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--koper);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast);
}
.filter-bar__clear:hover { background: var(--koper-subtle); }

.filter-bar__check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.filter-bar__check input { accent-color: var(--koper); cursor: pointer; }

/* ── Toolbar row ─────────────────────────────────────────────── */

/* ── Stats cards (lead-stats style) ─────────────────────────── */

/* ── Source / status badges (new style) ─────────────────────── */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 550;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
}

.status-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Leadstatus als wijzigbare cel: leest als de status-badge hiernaast, maar is
   een echte <select>. De statuskleur komt per rij uit een inline style, dus
   hier alleen de vorm. */
.lead-status-select {
  font-size: 12px;
  font-weight: 550;
  /* Binnen de Status-kolom blijven: een <select> wordt zo breed als zijn
     langste optie ("Gekwalificeerd"), ook als "Benaderd" geselecteerd is, en
     liep zo over de Datum-kolom heen. */
  max-width: 100%;
  padding: 3px 22px 3px 9px;
  border-radius: 5px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  font-family: inherit;
}

.lead-status-select:hover:not(:disabled) {
  border-color: currentColor;
}

.lead-status-select:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Het menu zelf erft de badge-kleur niet: dat zou opties onleesbaar maken. */
.lead-status-select option {
  background: var(--surface);
  color: var(--fg-primary);
}

/* Neutrale chip voor o.a. matching factors in detail-modals */
.badge-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-active);
  color: var(--fg-secondary);
}

/* ── View toggle ─────────────────────────────────────────────── */

/* ── Card view ───────────────────────────────────────────────── */

/* ── Detail panel (slide-over) ───────────────────────────────── */

@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }

@keyframes slideInPanel { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ── Convert/Create modal ────────────────────────────────────── */

/* ── Form fields (redesign) ──────────────────────────────────── */

/* ── Dashboard redesign ──────────────────────────────────────── */

.dash-widget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ── Avatar / Initials component ─────────────────────────── */
.lead-avatar {
  width: 30px; height: 30px; border-radius: 8px;
  background: #E3EDF5; color: var(--fg-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  flex-shrink: 0; letter-spacing: -0.01em;
}
.lead-name-cell { display: flex; align-items: center; gap: 10px; }
.lead-name-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lead-name { font-size: 15px; font-weight: 500; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-sub { font-size: 12px; color: var(--fg-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-klant { font-size: 13px; color: var(--fg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-klant-sub { font-size: 12px; }
.lead-klant-leeg { color: var(--fg-tertiary); }

/* ── Page tabs ───────────────────────────────────────────────── */

/* ── Progress bar ────────────────────────────────────────────── */

/* ── Score bar ───────────────────────────────────────────────── */

/* ── Kanban enhancements ─────────────────────────────────────── */
.kanban__col--dragover {
  background: rgba(217,123,61,0.06);
  outline: 2px dashed var(--koper-glow);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

/* Match-filter-pills samengevoegd met de gedeelde .filter-pill (zie boven). */

/* ── Match cards ─────────────────────────────────────────────── */
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.match-card {
  display: block;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--dur-base);
}
.match-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

.match-card__header { display: flex; align-items: flex-start; gap: 14px; padding: 16px 16px 12px; }
.match-card__score { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.match-card__score-num { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; }
.match-card__score-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-tertiary); font-weight: 600; }
.match-card__pair { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.match-card__candidate { font-size: 14px; font-weight: 500; color: var(--fg-primary); }
.match-card__arrow { color: var(--fg-muted); flex-shrink: 0; }
.match-card__vacancy { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; color: var(--fg-secondary); }
.match-card__client { font-size: 12px; color: var(--fg-tertiary); }
.match-card__body { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.match-card__section { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.match-card__section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; width: 100%; margin-bottom: 2px; }
.match-card__tag { font-size: 12px; padding: 2px 8px; border-radius: 5px; }
.match-card__tag--green { background: #DCFCE7; color: #15803D; }
.match-card__tag--orange { background: #FFF3E8; color: #C2410C; }
.match-card__actions { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); }
.match-card__chevron { transition: transform 0.2s ease; flex-shrink: 0; margin-left: 4px; }

/* Match action buttons — strak, niet vol-breed */
.match-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; font-family: var(--font-body);
  padding: 5px 12px; border-radius: var(--radius-sm);
  cursor: pointer; border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.match-action-btn--accept {
  background: var(--koper); color: #fff; border-color: var(--koper);
}
.match-action-btn--accept:hover { filter: brightness(1.08); }
.match-action-btn--reject {
  background: transparent; color: var(--badge-red-fg);
  border-color: var(--badge-red-fg);
}
.match-action-btn--reject:hover { background: rgba(220,38,38,0.06); }

/* ── Settings layout ─────────────────────────────────────────── */
.settings-layout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }

.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }

.settings-nav__item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: var(--radius-sm); border: none; background: transparent;
  color: var(--fg-secondary); font-family: var(--font-body); font-size: 13.5px;
  font-weight: 440; cursor: pointer; transition: all var(--dur-fast); text-align: left; width: 100%;
}
.settings-nav__item:hover { background: var(--surface-active); color: var(--fg-primary); }
.settings-nav__item.active { background: rgba(0,0,0,0.06); color: var(--fg-primary); font-weight: 520; }
.settings-nav__item.active svg { color: var(--koper); }
.settings-nav__divider { height: 1px; background: var(--border); margin: 8px 0; }

.settings-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.settings-card__header { padding: 20px 24px 0; }
.settings-card__header h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--fg-primary); margin-bottom: 2px; }
.settings-card__header p { font-size: 13.5px; color: var(--fg-tertiary); }
.settings-card__body { padding: 20px 24px; }
.settings-card__footer { padding: 16px 0 0; border-top: 1px solid var(--border); margin-top: 8px; display: flex; justify-content: flex-end; }

.settings-avatar {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--fg-primary);
  color: var(--white); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
}

.settings-toggle {
  position: relative; width: 40px; height: 22px; border-radius: 11px;
  border: none; background: rgba(0,0,0,0.12); cursor: pointer;
  transition: background var(--dur-fast); flex-shrink: 0; padding: 0;
}
.settings-toggle.on { background: #16A34A; }
.settings-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--dur-fast);
}
.settings-toggle.on .settings-toggle__thumb { transform: translateX(18px); }

.settings-profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }

.settings-sig-preview{font:12.5px/1.5 var(--font-body);color:var(--fg-secondary);background:var(--bg);border:1px dashed var(--border-strong);border-radius:6px;padding:10px 12px}

.settings-notif-list { display: flex; flex-direction: column; }
.settings-notif-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.03); }
.settings-notif-row:last-child { border-bottom: none; }
.settings-notif-info { display: flex; flex-direction: column; gap: 1px; }
.settings-notif-label { font-size: 14px; font-weight: 500; color: var(--fg-primary); }
.settings-notif-desc { font-size: 12.5px; color: var(--fg-tertiary); }

.settings-integrations { display: flex; flex-direction: column; gap: 4px; }
.settings-integration-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.03); }
.settings-integration-row:last-child { border-bottom: none; }
.settings-integration-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(0,0,0,0.04); display: flex; align-items: center; justify-content: center; color: var(--fg-secondary); flex-shrink: 0; }
.settings-integration-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.settings-integration-name { font-size: 14px; font-weight: 500; color: var(--fg-primary); }
.settings-integration-desc { font-size: 12.5px; color: var(--fg-tertiary); }

.settings-export-grid { display: flex; flex-direction: column; }
.settings-export-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.03); }
.settings-export-item:last-child { border-bottom: none; }
.settings-export-label { font-size: 14px; font-weight: 500; color: var(--fg-primary); display: block; }
.settings-export-desc { font-size: 12px; color: var(--fg-tertiary); display: block; }

/* ── WhatsApp Chat redesign (Blynckr OS-4 handoff) ─────────────
   Pixel-getrouwe nabouw van het hifi-ontwerp. Namespace .wa / .wa-.
   Tokens (--navy, --koper, --fg-*, --border, --radius-*, --font-display)
   komen uit :root hierboven. Fallbacks dekken ontbrekende tokens af. */

.wa {
  --wa-green: #25D366;
  --wa-green-deep: #1FA855;
  --wa-read: #53BDEB;
  --koper-burnt: #B5612E;
  flex: 1; min-height: 0; display: flex; flex-direction: column; height: 100%;
}


.wa__stage { flex: 1; min-height: 0; display: flex; padding: 18px 24px 22px; }
.wa__stage--scroll { display: block; overflow-y: auto; }

/* ── Conversations shell ──────────────────────────────────── */
.wa-shell {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
}
.wa-shell--info { grid-template-columns: 320px minmax(0, 1fr) 300px; }

/* ── Conversation list ────────────────────────────────────── */
.wa-conv-pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.wa-conv-top { padding: 14px 14px 0; flex-shrink: 0; }
.wa-conv-top__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wa-conv-head__title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; color: var(--fg-primary);
  display: flex; align-items: center;
}
.wa-conv-head__count {
  font-size: 11px; font-weight: 500; color: var(--fg-tertiary);
  background: rgba(0,0,0,0.04); padding: 2px 8px; border-radius: 999px; margin-left: 8px;
}
.wa-btn-new {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 500; color: #fff;
  background: var(--navy); border: none; border-radius: var(--radius-sm);
  padding: 6px 12px; cursor: pointer; transition: background 150ms; white-space: nowrap;
}
.wa-btn-new:hover { background: var(--deep-ink, #0D1F33); }

.wa-search {
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
  background: var(--bg, #FAFAFA); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 9px 12px;
  transition: border-color 150ms, box-shadow 150ms;
}
.wa-search:focus-within { border-color: var(--koper); box-shadow: 0 0 0 3px rgba(217,123,61,0.1); background: var(--surface); }
.wa-search svg { color: var(--fg-muted, var(--fg-quaternary)); flex-shrink: 0; }
.wa-search input { border: none; background: transparent; outline: none; font-size: 13.5px; color: var(--fg-primary); width: 100%; }
.wa-search input::placeholder { color: var(--fg-muted, var(--fg-quaternary)); }

.wa-filters { display: flex; align-items: center; gap: 6px; padding: 10px 12px; flex-shrink: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.wa-filters::-webkit-scrollbar { display: none; }
.wa-seg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--fg-secondary); background: var(--bg, #FAFAFA); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; cursor: pointer; white-space: nowrap; transition: all 130ms; }
.wa-seg:hover { border-color: rgba(0,0,0,0.18); }
.wa-seg--active { background: var(--navy); border-color: var(--navy); color: #fff; }
.wa-seg__n { font-size: 10.5px; font-weight: 600; padding: 0 5px; border-radius: 999px; background: rgba(0,0,0,0.06); color: var(--fg-tertiary); }
.wa-seg--active .wa-seg__n { background: rgba(255,255,255,0.22); color: #fff; }

/* ── Inklapbaar filterpaneel (vervangt de altijd-zichtbare pillsrij) ──────── */
.wa-conv-toolbar { display: flex; align-items: stretch; gap: 8px; padding-bottom: 12px; }
.wa-conv-toolbar .wa-search { flex: 1; min-width: 0; margin: 0; }
.wa-filter-btn { position: relative; flex-shrink: 0; width: 42px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg, #FAFAFA); color: var(--fg-secondary); cursor: pointer; transition: all 130ms; }
.wa-filter-btn:hover { border-color: rgba(0,0,0,0.18); color: var(--fg-primary); }
.wa-filter-btn--on { border-color: var(--koper); color: var(--koper); }
.wa-filter-btn--open { background: var(--navy); border-color: var(--navy); color: #fff; }
.wa-filter-btn--open.wa-filter-btn--on { color: #fff; }
.wa-filter-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--koper); border: 1.5px solid var(--surface); }
.wa-filter-panel { display: flex; flex-direction: column; gap: 12px; padding: 12px; flex-shrink: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.wa-filter-panel--collapsed { display: none; }
.wa-filter-group__label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted, var(--fg-quaternary)); margin-bottom: 6px; }
.wa-filter-segs { display: flex; flex-wrap: wrap; gap: 6px; }
/* Recruiter-tag (starter van het gesprek) in de lijst */
.wa-conv-owner { font-size: 10px; font-weight: 600; color: var(--fg-tertiary); background: rgba(0,0,0,0.05); border-radius: 999px; padding: 1px 7px; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.wa-conv-owner--none { background: transparent; border: 1px dashed var(--border-strong); color: var(--fg-muted); font-weight: 500; }

/* ── WhatsApp-config in de Instellingen (verplaatste .wa-UI) ───────────────── */
.wa-config { height: calc(100vh - 200px); min-height: 480px; }
.wa-config__stage { flex: 1; min-height: 0; display: flex; }

.wa-conv-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; }
.wa-conv-list::-webkit-scrollbar { width: 8px; }
.wa-conv-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
.wa-conv-empty { text-align: center; color: var(--fg-muted, var(--fg-quaternary)); font-size: 13px; padding: 28px 12px; }
.wa-conv-group { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted, var(--fg-quaternary)); padding: 12px 10px 5px; }

.wa-conv-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-md);
  cursor: pointer; position: relative; transition: background 120ms ease-out;
}
.wa-conv-item:hover { background: var(--surface-hover, rgba(0,0,0,0.025)); }
.wa-conv-item--active { background: rgba(217,123,61,0.08); }
.wa-conv-item--active::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--koper);
}
.wa-conv-body { flex: 1; min-width: 0; }
.wa-conv-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wa-conv-name { font-size: 13.5px; font-weight: 550; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-conv-item--unread .wa-conv-name { font-weight: 650; }
.wa-conv-time { font-size: 11.5px; color: var(--fg-muted, var(--fg-quaternary)); flex-shrink: 0; }
.wa-conv-item--unread .wa-conv-time { color: var(--koper); font-weight: 600; }
.wa-conv-row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.wa-conv-preview { font-size: 12.5px; color: var(--fg-tertiary); display: flex; align-items: center; gap: 4px; min-width: 0; }
.wa-conv-preview span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-conv-item--unread .wa-conv-preview { color: var(--fg-secondary); font-weight: 500; }
.wa-conv-preview .wa-check svg { width: 13px; height: 13px; }
.wa-conv-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wa-conv-badge {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--koper); color: #fff;
  font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.wa-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.wa-dot--lead { background: var(--koper); }
.wa-dot--candidate { background: var(--wa-green-deep, #1FA855); }
.wa-dot--unknown { background: var(--fg-muted, var(--fg-quaternary)); }

.wa-tag { flex-shrink: 0; font-size: 10.5px; font-weight: 500; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.wa-tag--unknown { background: #F0EDE8; color: var(--fg-tertiary); }
.wa-tag--candidate { background: rgba(37,211,102,0.12); color: var(--wa-green-deep); }
.wa-tag--lead { background: rgba(217,123,61,0.1); color: var(--koper-burnt, #B5612E); }

/* ── Avatars ──────────────────────────────────────────────── */
.wa-avatar {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: #fff; flex-shrink: 0; position: relative;
}
.wa-avatar--sm { width: 42px; height: 42px; border-radius: 12px; font-size: 14px; }
.wa-avatar--list { width: 44px; height: 44px; border-radius: 12px; }  /* lijst: presenter + duim-doelwit */
.wa-avatar--hero { width: 64px; height: 64px; border-radius: 18px; font-size: 22px; }
.wa-avatar--a { background: linear-gradient(135deg, #D97B3D, #B5612E); }
.wa-avatar--b { background: linear-gradient(135deg, #2A5C7A, #17384F); }
.wa-avatar--c { background: linear-gradient(135deg, #5B8C5A, #3F6B3E); }
.wa-avatar--d { background: linear-gradient(135deg, #7C6BA8, #5A4B85); }
.wa-avatar--e { background: linear-gradient(135deg, #C2566B, #9E3F52); }
.wa-avatar--f { background: linear-gradient(135deg, #4A8B9E, #2F6B7E); }
.wa-presence {
  position: absolute; right: -2px; bottom: -2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--wa-green); border: 2.5px solid var(--surface);
}

/* ── Thread ───────────────────────────────────────────────── */
.wa-thread-pane {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.wa-thread-empty { flex: 1; display: flex; align-items: center; justify-content: center; }

/* Nette lege/laadstaat (thread-paneel en lege canvas) */
.wa-placeholder { text-align: center; padding: 20px; }
.wa-placeholder__ico {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(217,123,61,0.09); color: var(--koper-burnt, #B5612E);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.wa-placeholder__title { font-size: 14px; font-weight: 600; color: var(--fg-secondary); }
.wa-placeholder__sub { font-size: 12.5px; color: var(--fg-muted, var(--fg-quaternary)); margin-top: 3px; }
.wa-thread-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wa-thread-head--click { cursor: pointer; }
.wa-thread-head--click:hover { background: var(--surface-hover, rgba(0,0,0,0.025)); }
.wa-thread-info { flex: 1; min-width: 0; }
.wa-thread-name { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-thread-status { font-size: 12.5px; color: var(--wa-green-deep); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-thread-status--off { color: var(--fg-tertiary); }
.wa-thread-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wa-icon-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--fg-tertiary); cursor: pointer; transition: all 150ms;
}
.wa-icon-btn:hover { background: var(--surface-hover, rgba(0,0,0,0.025)); color: var(--fg-primary); }
.wa-thread-back { display: none; }  /* alleen zichtbaar in het mobiele één-paneel-blok */
.wa-icon-btn--mic:hover { color: var(--koper); }
.wa-icon-btn--del:hover { background: var(--badge-red-bg, #FEF2F2); color: var(--badge-red-fg, #DC2626); border-color: rgba(220,38,38,0.2); }

/* ── Messages canvas ──────────────────────────────────────── */
.wa-canvas {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 30px 18px;
  background-color: #F7F5F2;
  background-image:
    radial-gradient(circle at 25% 12%, rgba(217,123,61,0.022) 0, transparent 42%),
    radial-gradient(circle at 78% 72%, rgba(23,56,79,0.02) 0, transparent 42%);
  display: flex; flex-direction: column; gap: 2px;
}
.wa-canvas::-webkit-scrollbar { width: 8px; }
.wa-canvas::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
.wa-canvas-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--fg-tertiary); font-size: 13px; text-align: center; }

.wa-date {
  /* Sticky: de datumchip blijft bovenin plakken tijdens het scrollen,
     zoals in de bekende chat-apps. */
  position: sticky; top: 6px; z-index: 5;
  align-self: center; font-size: 11.5px; font-weight: 500; color: var(--fg-tertiary);
  background: rgba(255,255,255,0.92); border: 1px solid var(--border);
  padding: 4px 13px; border-radius: 999px; margin: 12px 0 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* "Ongelezen"-scheider vóór het eerste ongelezen inbound-bericht */
.wa-unread-sep { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 10px 4px 4px; }
.wa-unread-sep::before, .wa-unread-sep::after { content: ""; flex: 1; height: 1px; background: rgba(217,123,61,0.28); }
.wa-unread-sep span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--koper-burnt, #B5612E); }

.wa-event { align-self: center; display: flex; align-items: center; gap: 7px; max-width: 86%; margin: 7px 0; font-size: 11.5px; color: var(--fg-tertiary); background: rgba(255,255,255,0.72); border: 1px solid var(--border-soft, rgba(0,0,0,0.05)); border-radius: 999px; padding: 5px 13px; text-align: center; }
.wa-event svg { flex-shrink: 0; }
.wa-event b { font-weight: 600; }
.wa-event--auto { color: var(--koper-burnt, #B5612E); background: rgba(217,123,61,0.08); border-color: rgba(217,123,61,0.18); }
.wa-event--status { color: var(--navy); background: rgba(23,56,79,0.05); border-color: rgba(23,56,79,0.1); }

.wa-msg { display: flex; max-width: 66%; position: relative; }
.wa-msg--in { align-self: flex-start; }
.wa-msg--out { align-self: flex-end; }
.wa-msg--gstart { margin-top: 8px; }
.wa-bubble {
  padding: 8px 12px 6px; border-radius: 13px; font-size: 14px; line-height: 1.45;
  box-shadow: 0 1px 1.5px rgba(0,0,0,0.06); word-wrap: break-word; min-width: 90px;
}
.wa-msg--in .wa-bubble { background: var(--surface); color: var(--fg-primary); border-top-left-radius: 5px; }
.wa-msg--out .wa-bubble { background: var(--wa-out-bubble, #005C4B); color: #EAF0F5; border-top-right-radius: 5px; }
.wa-msg--in.wa-msg--gstart .wa-bubble { border-top-left-radius: 13px; }
.wa-msg--out.wa-msg--gstart .wa-bubble { border-top-right-radius: 13px; }
.wa-bubble__text { white-space: pre-wrap; }
.wa-bubble__meta { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 3px; font-size: 10.5px; }
.wa-msg--in .wa-bubble__meta { color: var(--fg-muted, var(--fg-quaternary)); }
.wa-msg--out .wa-bubble__meta { color: rgba(234,240,245,0.6); }
.wa-check { display: inline-flex; }
.wa-check svg { width: 15px; height: 15px; }
.wa-check--read { color: var(--wa-read); }
.wa-check--failed { color: var(--badge-red-fg, #DC2626); }
/* Optimistisch getekend bericht: klokje tot de server bevestigt. Gedempt, zodat
   het duidelijk minder "af" oogt dan een vinkje. */
.wa-check--pending { color: var(--fg-quaternary, #9CA3AF); opacity: .85; }
.wa-check--dryrun { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #B45309; }
.wa-msg--dryrun .wa-bubble { background: transparent; border: 1.5px dashed #F59E0B; color: var(--fg-secondary); box-shadow: none; }
.wa-msg--dryrun .wa-bubble__meta { color: var(--fg-tertiary); }

.wa-msg-del { position: absolute; top: -8px; opacity: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--fg-quaternary); cursor: pointer; transition: opacity 120ms; }
.wa-msg--out .wa-msg-del { left: -30px; }
.wa-msg--in .wa-msg-del { right: -30px; }
.wa-msg:hover .wa-msg-del { opacity: 1; }
.wa-msg-del:hover { color: var(--badge-red-fg, #DC2626); border-color: rgba(220,38,38,0.2); }

.wa-attach {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 2px 2px; min-width: 200px; cursor: pointer;
}
.wa-attach__icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(217,123,61,0.12); color: var(--koper-burnt, #B5612E);
}
.wa-msg--out .wa-attach__icon { background: rgba(234,240,245,0.14); color: #EAF0F5; }
.wa-attach__meta { display: flex; flex-direction: column; min-width: 0; }
.wa-attach__name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-attach__sub { font-size: 11px; opacity: 0.7; margin-top: 1px; }

/* Inline afbeelding-preview i.p.v. generieke bestandsrij */
.wa-attach--img { display: block; min-width: 0; padding: 2px 0; }
.wa-attach__img { display: block; max-width: 240px; max-height: 280px; width: auto; height: auto; border-radius: 10px; object-fit: cover; }

.wa-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(234,240,245,0.15); }
.wa-msg--in .wa-replies { border-top-color: var(--border); }
.wa-reply {
  font-size: 12px; font-weight: 500; color: #EAF0F5;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px; padding: 4px 11px; cursor: pointer; transition: background 150ms; white-space: nowrap;
}
.wa-reply:hover { background: rgba(255,255,255,0.18); }
.wa-msg--in .wa-reply { color: var(--koper-burnt, #B5612E); background: rgba(217,123,61,0.08); border-color: rgba(217,123,61,0.25); }
.wa-msg--in .wa-reply:hover { background: rgba(217,123,61,0.16); }

/* ── Composer ─────────────────────────────────────────────── */
.wa-composer {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.wa-comp-tool {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: none; background: transparent;
  color: var(--fg-tertiary); cursor: pointer; transition: all 150ms;
}
.wa-comp-tool:hover { background: var(--surface-hover, rgba(0,0,0,0.025)); color: var(--koper); }
.wa-comp-input {
  position: relative;
  flex: 1; min-width: 0; display: flex; align-items: center;
  background: var(--bg, #FAFAFA); border: 1px solid var(--border);
  /* 22px = de halve hoogte van een lege composer, dus optisch identiek aan de
     eerdere 999px-pil. Anders dan 999px blijft de vorm bruikbaar zodra het veld
     meegroeit met een ingevoegde template: bij een stadium-radius vraten de
     ronde hoeken de eerste en laatste tekstregel op. */
  border-radius: 22px; padding: 0 6px 0 16px; transition: border-color 150ms, box-shadow 150ms;
}
.wa-comp-input:focus-within { border-color: var(--koper); box-shadow: 0 0 0 3px rgba(217,123,61,0.1); background: var(--surface); }
/* max-height loopt gelijk met de cap in autoGrow() (messages.js). 220px ~= 10
   regels: een ingevoegde template (afwijzing/uitnodiging) past zo in één keer
   in beeld; daarboven scrollt het veld. */
.wa-comp-input textarea { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 14px; color: var(--fg-primary); padding: 11px 0; resize: none; font-family: var(--font-body); line-height: 1.4; max-height: 220px; overflow-y: auto; }
.wa-comp-input textarea::placeholder { color: var(--fg-muted, var(--fg-quaternary)); }
.wa-comp-emoji { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: transparent; color: var(--fg-muted, var(--fg-quaternary)); cursor: pointer; }
.wa-comp-emoji:hover { color: var(--koper); }

/* Emoji-popover boven de composer */
.wa-emoji-pop {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: 288px; max-height: 260px; overflow-y: auto; z-index: 30;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: 0 8px 26px rgba(0,0,0,0.14);
  padding: 8px 10px;
}
.wa-emoji-pop[hidden] { display: none; }
.wa-emoji-pop::-webkit-scrollbar { width: 7px; }
.wa-emoji-pop::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
.wa-emoji-grp { margin-bottom: 6px; }
.wa-emoji-grp__label { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted, var(--fg-quaternary)); margin: 4px 2px 5px; }
.wa-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
.wa-emoji { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; font-size: 19px; line-height: 1; border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background 120ms; }
.wa-emoji:hover { background: var(--surface-hover, rgba(0,0,0,0.05)); }

/* Drijvende "naar onderen"-knop in de thread */
.wa-scroll-fab {
  position: absolute; right: 22px; bottom: 82px; z-index: 20;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--fg-secondary); cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.14); transition: color 150ms, background 150ms;
}
.wa-scroll-fab[hidden] { display: none; }
.wa-scroll-fab:hover { background: var(--surface-hover, rgba(0,0,0,0.03)); color: var(--koper); }
.wa-btn-send {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: #fff;
  background: var(--navy); border: none; border-radius: 999px;
  padding: 11px 20px; cursor: pointer; transition: background 150ms, transform 100ms; white-space: nowrap;
}
.wa-btn-send:hover { background: var(--deep-ink, #0D1F33); }
.wa-btn-send:active { transform: scale(0.97); }
/* Rust-stand bij een leeg invoerveld (puur visueel, klikken blijft mogelijk) */
.wa-btn-send--idle { opacity: 0.45; }

.wa-composer--locked { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--bg, #FAFAFA); color: var(--fg-tertiary); font-size: 13px; flex-shrink: 0; }
/* Verticale, alfabetische templatelijst (één rij per templatenaam). De
   max-hoogte houdt de composer eronder altijd in beeld; daarbinnen scrollt de
   lijst zelf. Dezelfde rijen worden hergebruikt in het wa2-templatemenu en de
   plan-modal (.wa2-tplbar deelt .wa-tpl-item). */
.wa-tpl-bar { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; max-height: 236px; overflow-y: auto; }
.wa-tpl-item { display: flex; align-items: stretch; gap: 4px; width: 100%; }
.wa-tpl-item__name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left; font-size: 12.5px; color: var(--fg, inherit);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; transition: background 120ms, border-color 120ms;
}
.wa-tpl-item__name:hover { background: rgba(0,0,0,0.04); border-color: var(--fg-tertiary); }
.wa-tpl-item__lang {
  flex: none; display: inline-flex; align-items: center; padding: 0 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--fg-tertiary);
}
/* Klikbaar taallabel: verstuurt expliciet die taalvariant */
.wa-tpl-item__lang--kies {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 0 10px; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms;
}
.wa-tpl-item__lang--kies:hover { background: rgba(0,0,0,0.04); border-color: var(--fg-tertiary); color: var(--fg, inherit); }

/* Geplande berichten: onderaan de thread, gestippeld i.p.v. de gevulde bubbel */
.wa-msg--sched .wa-bubble { background: transparent; border: 1.5px dashed var(--border); color: var(--fg-secondary); box-shadow: none; }
.wa-msg--sched .wa-bubble__meta { color: var(--fg-tertiary); justify-content: flex-start; gap: 12px; margin-top: 6px; }
.wa-bubble__channel { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--fg-tertiary); margin-bottom: 3px; }
.wa-bubble__sched-when { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--koper-burnt, #B5612E); margin-bottom: 3px; }
.wa-msg--sched-failed .wa-bubble { border-color: rgba(220,38,38,0.35); }
/* 'unknown' (R3a): aflevering onzeker, mogelijk wél bezorgd -- neutraal, geen rood */
.wa-msg--sched-unknown .wa-bubble { border-color: var(--border-strong); }
.wa-bubble__sched-error { font-size: 11.5px; color: var(--badge-red-fg, #DC2626); margin-top: 4px; }
.wa-msg--sched-unknown .wa-bubble__sched-error { color: var(--fg-secondary); }
.wa-sched-action { font-size: 11px; font-weight: 500; color: var(--fg-tertiary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wa-sched-action:hover { color: var(--koper); }

/* Plan-modal (bericht inplannen voor later) */
.wa-sched-row { display: flex; gap: 10px; }
.wa-sched-row > div { flex: 1; }
.wa-sched-tabs { display: flex; gap: 6px; }
.wa-sched-tab { flex: 1; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--fg-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 150ms; }
.wa-sched-tab--active { background: var(--navy); color: #fff; border-color: var(--navy); }
.wa-sched-tab:disabled { opacity: 0.4; cursor: not-allowed; }
.wa-sched-textarea { background: var(--surface); color: var(--fg-primary); width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font-body); font-size: 14px; resize: vertical; }

/* Globale pauze-banner in de Automatisering-tab */
.wa-pause-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--badge-orange-bg, rgba(217,123,61,0.1)); color: var(--badge-orange-fg, var(--koper-burnt, #B5612E)); border: 1px solid rgba(217,123,61,0.3); font-size: 13px; }
.wa-pause-banner span { flex: 1; }

/* Auto-scan banner boven de berichtenstroom */
.wa-scan-banner { background: var(--koper-subtle); border-bottom: 1px solid var(--koper); padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; flex-shrink: 0; }
.wa-scan-banner__label { display: flex; align-items: center; gap: 6px; color: var(--koper); }
.wa-scan-banner__actions { display: flex; gap: 6px; }
.wa-scan-banner__actions .btn { font-size: 11px; padding: 3px 10px; }

/* ── Contact panel ────────────────────────────────────────── */
.wa-ctx-pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wa-ctx-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.wa-ctx-scroll::-webkit-scrollbar { width: 7px; }
.wa-ctx-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
.wa-ctx-empty { padding: 40px 20px; text-align: center; color: var(--fg-muted, var(--fg-quaternary)); font-size: 13px; margin: auto; }
.wa-ctx-muted { font-size: 12.5px; color: var(--fg-muted, var(--fg-quaternary)); }
.wa-ctx-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 20px 18px; border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.05)); }
.wa-ctx-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--fg-muted, var(--fg-quaternary)); border-radius: var(--radius-sm); cursor: pointer; }
.wa-ctx-close:hover { background: var(--surface-hover, rgba(0,0,0,0.04)); color: var(--fg-primary); }
.wa-ctx-hero .wa-avatar { margin-bottom: 11px; }
.wa-ctx-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--fg-primary); }
.wa-ctx-role { font-size: 12.5px; color: var(--fg-tertiary); margin-top: 2px; }
.wa-ctx-tag { margin-top: 9px; font-size: 11px; font-weight: 600; padding: 3px 11px; border-radius: 999px; }
.wa-ctx-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.05)); }
.wa-ctx-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 9px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--fg-secondary); cursor: pointer; transition: all 150ms; }
.wa-ctx-act:hover { background: var(--surface-hover, rgba(0,0,0,0.025)); color: var(--fg-primary); }
.wa-ctx-act--primary { grid-column: 1 / -1; background: var(--navy); border-color: var(--navy); color: #fff; }
.wa-ctx-act--primary:hover { background: var(--deep-ink, #0D1F33); color: #fff; }
.wa-ctx-sec { padding: 16px 18px; border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.05)); }
.wa-ctx-sec--last { border-bottom: none; }
.wa-ctx-sec__title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted, var(--fg-quaternary)); margin-bottom: 11px; }
.wa-stage-track { display: flex; gap: 4px; margin-bottom: 10px; }
.wa-stage-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.wa-stage-seg--done { background: var(--koper); }
.wa-stage-now { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.wa-stage-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--koper); }
.wa-stage-sub { font-size: 11.5px; color: var(--fg-tertiary); margin-top: 2px; margin-left: 15px; }
.wa-ctx-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.wa-ctx-row__ico { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg, #FAFAFA); color: var(--fg-tertiary); }
.wa-ctx-row__main { min-width: 0; }
.wa-ctx-row__label { font-size: 11px; color: var(--fg-muted, var(--fg-quaternary)); }
.wa-ctx-row__val { font-size: 13px; color: var(--fg-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-file-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border-soft, rgba(0,0,0,0.05)); border-radius: var(--radius-md); margin-top: 8px; cursor: pointer; transition: border-color 150ms, background 150ms; }
.wa-file-row:first-of-type { margin-top: 0; }
.wa-file-row:hover { border-color: var(--koper); background: rgba(217,123,61,0.06); }
.wa-file-row__ico { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(217,123,61,0.12); color: var(--koper-burnt, #B5612E); }
.wa-file-row__meta { min-width: 0; }
.wa-file-row__name { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-file-row__sub { font-size: 10.5px; color: var(--fg-muted, var(--fg-quaternary)); margin-top: 1px; }
.wa-file-row__dl { margin-left: auto; color: var(--fg-muted, var(--fg-quaternary)); flex-shrink: 0; }
.wa-ctx-note { font-size: 12.5px; line-height: 1.55; color: var(--fg-secondary); background: var(--bg, #FAFAFA); border: 1px solid var(--border-soft, rgba(0,0,0,0.05)); border-radius: var(--radius-md); padding: 11px 13px; }

/* ── Templates / Automation scroll area ───────────────────── */
.wa-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.wa-scroll::-webkit-scrollbar { width: 8px; }
.wa-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
.wa-tpl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.wa-tpl-count { font-size: 13px; color: var(--fg-tertiary); }
.wa-btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: #fff;
  background: var(--navy); border: none; border-radius: var(--radius-sm);
  padding: 10px 18px; cursor: pointer; transition: background 150ms; white-space: nowrap;
}
.wa-btn-primary:hover { background: var(--deep-ink, #0D1F33); }
.wa-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Automation rules ─────────────────────────────────────── */
.wa-rule-list { display: flex; flex-direction: column; gap: 12px; max-width: 960px; }
.wa-rule {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px; transition: border-color 150ms, opacity 150ms;
}
.wa-rule--off { opacity: 0.6; }
.wa-rule__icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(217,123,61,0.1); color: var(--koper);
}
.wa-rule__main { flex: 1; min-width: 0; }
.wa-rule__name { font-size: 14.5px; font-weight: 600; color: var(--fg-primary); }
.wa-rule__flow { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; flex-wrap: wrap; }
.wa-rule__when { color: var(--fg-tertiary); }
.wa-rule__flow svg { color: var(--fg-muted, var(--fg-quaternary)); flex-shrink: 0; }
.wa-rule__then { color: var(--fg-secondary); font-weight: 500; }
.wa-rule__delay { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-muted, var(--fg-quaternary)); flex-shrink: 0; }
.wa-rule__tools { display: flex; gap: 6px; flex-shrink: 0; }
.wa-rule__tools .wa-icon-btn { width: 32px; height: 32px; }
.wa-switch {
  width: 40px; height: 23px; border-radius: 999px; border: none; flex-shrink: 0;
  background: rgba(0,0,0,0.14); cursor: pointer; position: relative; transition: background 180ms; padding: 0;
}
.wa-switch--on { background: var(--wa-green); }
.wa-switch__knob { position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 180ms; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.wa-switch--on .wa-switch__knob { transform: translateX(17px); }

/* ── Templates master-detail ──────────────────────────────── */
.wa-tpl-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
.wa-tpl-list-pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wa-tpl-list-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 12px; border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.05)); }
.wa-tpl-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.wa-tpl-item { padding: 11px 12px; border-radius: var(--radius-md); cursor: pointer; transition: background 120ms; }
.wa-tpl-item:hover { background: var(--surface-hover, rgba(0,0,0,0.025)); }
.wa-tpl-item--active { background: rgba(217,123,61,0.08); }
.wa-tpl-item__name { font-size: 14px; font-weight: 600; color: var(--fg-primary); }
.wa-tpl-item__sub { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.wa-tpl-item__lang { font-size: 10.5px; color: var(--fg-muted, var(--fg-quaternary)); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
.wa-tpl-detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); min-height: 0; overflow-y: auto; }
.wa-tpl-preview, .wa-tpl-editor { padding: 22px 24px; max-width: 720px; }
.wa-tpl-preview__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.wa-tpl-preview__name { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--fg-primary); }
.wa-tpl-preview__meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.wa-tpl-preview__tools { display: flex; gap: 7px; flex-shrink: 0; }
.wa-tpl-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--wa-green-deep); background: rgba(37,211,102,0.1); padding: 2px 9px; border-radius: 999px; }
.wa-tpl-status__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--wa-green-deep); }
.wa-tpl-chip-meta { padding: 2px 8px; border-radius: 5px; background: var(--bg, #FAFAFA); border: 1px solid var(--border); font-size: 11.5px; color: var(--fg-tertiary); }
.wa-tpl-sec__title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted, var(--fg-quaternary)); margin: 18px 0 9px; }
.wa-tpl-sec__title:first-of-type { margin-top: 0; }
.wa-tpl-bubble { background: var(--navy); color: #EAF0F5; border-radius: 14px; border-top-left-radius: 5px; padding: 14px 16px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; max-width: 460px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.wa-tpl-var { color: var(--koper-burnt, #B5612E); background: rgba(217,123,61,0.08); padding: 0 4px; border-radius: 4px; font-weight: 500; font-family: var(--font-display); font-size: 12.5px; }
.wa-tpl-bubble .wa-tpl-var { color: #FCE6D4; background: rgba(255,255,255,0.14); }
.wa-tpl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wa-tpl-chip { font-size: 12px; font-weight: 500; color: var(--koper-burnt, #B5612E); background: rgba(217,123,61,0.08); border: 1px solid rgba(217,123,61,0.2); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.wa-tpl-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-tpl-var-pill { font-size: 11.5px; color: var(--fg-tertiary); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-family: var(--font-display); }
.wa-tpl-preview__cta { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft, rgba(0,0,0,0.05)); }
.wa-tpl-editor__head { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 18px; }
.wa-tpl-editor__foot { display: flex; gap: 8px; margin-top: 20px; }
.wa-tpl-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: all 150ms; border: 1px solid transparent; }
.wa-tpl-btn--edit { color: var(--fg-secondary); background: var(--surface); border-color: var(--border); }
.wa-tpl-btn--edit:hover { background: var(--surface-hover, rgba(0,0,0,0.025)); }

/* ── Form fields ──────────────────────────────────────────── */
.wa-field { display: block; margin-bottom: 14px; }
.wa-field__label { display: block; font-size: 12px; font-weight: 600; color: var(--fg-secondary); margin-bottom: 6px; }
.wa-field__opt { font-weight: 400; color: var(--fg-muted, var(--fg-quaternary)); font-size: 11px; }
.wa-field__hint { font-size: 11.5px; color: var(--fg-tertiary); margin: -6px 0 14px; }
.wa-field__hint code { background: rgba(217,123,61,0.1); color: var(--koper-burnt, #B5612E); padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.wa-input, .wa-textarea { width: 100%; font-family: var(--font-body); font-size: 13.5px; color: var(--fg-primary); background: var(--bg, #FAFAFA); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 13px; outline: none; transition: border-color 150ms, box-shadow 150ms; }
.wa-textarea { resize: vertical; line-height: 1.5; white-space: pre-wrap; }
.wa-input:focus, .wa-textarea:focus { border-color: var(--koper); box-shadow: 0 0 0 3px rgba(217,123,61,0.1); background: var(--surface); }
select.wa-input { cursor: pointer; }

/* ── Modal ────────────────────────────────────────────────── */
.wa-modal-overlay { position: fixed; inset: 0; background: rgba(13,31,51,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.wa-modal { background: var(--surface); border-radius: var(--radius-xl, 18px); width: 480px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.wa-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.wa-modal__body { padding: 20px 22px; overflow-y: auto; }
.wa-modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px 22px; border-top: 1px solid var(--border); }

/* ── Template wizard ──────────────────────────────────────── */
.wa-wiz { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.wa-wiz__steps { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
.wa-wiz-step { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--fg-muted, var(--fg-quaternary)); }
.wa-wiz-step--done { color: var(--fg-secondary); cursor: pointer; }
.wa-wiz-step--active { color: var(--fg-primary); font-weight: 600; }
.wa-wiz-step__num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; background: rgba(0,0,0,0.06); color: var(--fg-tertiary); flex-shrink: 0; }
.wa-wiz-step--active .wa-wiz-step__num { background: var(--koper); color: #fff; }
.wa-wiz-step--done .wa-wiz-step__num { background: var(--wa-green, #25D366); color: #fff; }
.wa-wiz-step__sep { width: 26px; height: 1px; background: var(--border); }
.wa-wiz__main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 0; }
.wa-wiz__content { min-height: 0; overflow-y: auto; padding: 22px 24px; }
.wa-wiz__side { min-height: 0; overflow-y: auto; padding: 22px 22px; background: linear-gradient(160deg, #F7F5F2, #EFEEF3); border-left: 1px solid var(--border); }
.wa-wiz-card__title { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--fg-primary); }
.wa-wiz-card__sub { font-size: 13px; color: var(--fg-tertiary); margin: 6px 0 18px; max-width: 620px; line-height: 1.5; }
.wa-cat-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 18px; }
.wa-cat-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--fg-secondary); background: var(--surface); border: none; border-right: 1px solid var(--border); padding: 12px 8px; cursor: pointer; transition: background 130ms; }
.wa-cat-tab:last-child { border-right: none; }
.wa-cat-tab:hover { background: var(--bg, #FAFAFA); }
.wa-cat-tab--active { background: var(--navy); color: #fff; }
.wa-type-list { display: flex; flex-direction: column; gap: 8px; }
.wa-type { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all 130ms; }
.wa-type:hover { border-color: rgba(217,123,61,0.4); }
.wa-type--active { border-color: var(--koper); background: rgba(217,123,61,0.06); }
.wa-type__radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; margin-top: 1px; position: relative; transition: border-color 130ms; }
.wa-type__radio--on { border-color: var(--koper); }
.wa-type__radio--on::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--koper); }
.wa-type__main { display: flex; flex-direction: column; gap: 2px; }
.wa-type__label { font-size: 14px; font-weight: 600; color: var(--fg-primary); }
.wa-type__desc { font-size: 12.5px; color: var(--fg-tertiary); line-height: 1.45; }
.wa-wiz-grid2 { display: grid; grid-template-columns: 1fr 120px; gap: 14px; }
.wa-var-panel { border: 1px dashed rgba(217,123,61,0.4); background: rgba(217,123,61,0.04); border-radius: var(--radius-md); padding: 12px 14px; margin: 0 0 14px; }
.wa-var-panel__head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--koper-burnt, #B5612E); margin-bottom: 10px; }
.wa-var-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.wa-var-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: all 130ms; }
.wa-var-chip:hover { border-color: var(--koper); background: rgba(217,123,61,0.06); }
.wa-var-chip--used { border-color: var(--koper); background: rgba(217,123,61,0.08); }
.wa-var-chip__token { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.wa-var-chip__desc { font-size: 11px; color: var(--fg-tertiary); }
.wa-review { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; max-width: 560px; }
.wa-review__row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.05)); }
.wa-review__row:last-child { border-bottom: none; }
.wa-review__label { width: 160px; flex-shrink: 0; font-size: 12.5px; color: var(--fg-tertiary); }
.wa-review__val { font-size: 13.5px; color: var(--fg-primary); font-weight: 500; }
.wa-wiz-info__title { font-size: 13px; font-weight: 600; color: var(--fg-primary); margin-bottom: 12px; }
.wa-wiz-info__sec { margin-top: 16px; }
.wa-wiz-info__h { font-size: 12.5px; font-weight: 600; color: var(--fg-primary); margin-bottom: 4px; }
.wa-wiz-info__t { font-size: 12.5px; color: var(--fg-secondary); line-height: 1.5; }
.wa-wiz-info__hint { font-size: 11.5px; color: var(--fg-tertiary); line-height: 1.5; margin-top: 14px; }
.wa-preview-phone { display: flex; flex-direction: column; gap: 6px; }
.wa-preview-bubble { background: var(--surface); border-radius: 10px; border-top-left-radius: 3px; padding: 9px 11px 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.12); position: relative; }
.wa-preview-header { font-size: 13.5px; font-weight: 700; color: var(--fg-primary); margin-bottom: 5px; }
.wa-preview-body { font-size: 13px; color: var(--fg-primary); line-height: 1.45; white-space: pre-wrap; }
.wa-preview-footer { font-size: 11px; color: var(--fg-muted, var(--fg-quaternary)); margin-top: 7px; }
.wa-preview-time { font-size: 10px; color: var(--fg-muted, var(--fg-quaternary)); text-align: right; margin-top: 2px; }
.wa-preview-btns { display: flex; flex-direction: column; gap: 6px; }
.wa-preview-btn { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--surface); border-radius: 8px; padding: 8px; font-size: 13px; font-weight: 500; color: #2A6FDB; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.wa-wiz__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 1px solid var(--border); flex-shrink: 0; }
.wa-wiz__foot-right { display: flex; align-items: center; gap: 8px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .wa-shell--info { grid-template-columns: 300px minmax(0, 1fr) 280px; }
}
@media (max-width: 1040px) {
  .wa-shell, .wa-shell--info { grid-template-columns: 300px minmax(0, 1fr); }
  .wa-shell--info .wa-ctx-pane { display: none; }
  .wa-tpl-shell { grid-template-columns: 260px minmax(0, 1fr); }
  .wa-wiz__main { grid-template-columns: 1fr; }
  .wa-wiz__side { display: none; }
  .wa-var-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* Eén paneel tegelijk: standaard de gesprekkenlijst, met --thread-open de
     thread (klasse gezet door openConversation / back-to-list in messages.js). */
  .wa-shell, .wa-shell--info { grid-template-columns: 1fr; gap: 0; }
  .wa-thread-pane, .wa-ctx-pane { display: none; }
  .wa-shell--thread-open .wa-conv-pane { display: none; }
  .wa-shell--thread-open .wa-thread-pane { display: flex; }

  /* Edge-to-edge: stage-padding weg, panes zonder kaart-chroom */
  .wa__stage { padding: 0; }
  .wa-conv-pane, .wa-thread-pane { border: none; border-radius: 0; }

  .wa-thread-back { display: flex; }
  .wa-thread-head { padding: 10px 12px; }
  /* Kandidaatinfo-paneel en toewijzen zijn desktop-werk; de knop zou op mobiel
     onzichtbare state togglen */
  .wa-thread-actions .wa-icon-btn[data-act="toggle-info"],
  .wa-assign-select { display: none; }

  .wa-canvas { padding: 12px 12px 14px; }
  .wa-msg { max-width: 85%; }
  .wa-tpl-shell { grid-template-columns: 1fr; }

  /* Hit-targets richting 44px */
  .wa-icon-btn { width: 42px; height: 42px; }
  .wa-comp-tool { width: 44px; height: 44px; }
  .wa-conv-item { padding: 10px; }

  /* Composer compact: ronde icon-only verstuurknop + safe-area (iPhone-homebalk) */
  .wa-composer { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); gap: 4px; }
  .wa-composer--locked { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .wa-btn-send { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .wa-btn-send__label { display: none; }
  .wa-scroll-fab { right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); }

  /* De hover-only verwijderknop op een bubbel bestaat niet op touch */
  @media (hover: none) { .wa-msg-del { display: none; } }

  /* iOS zoomt in bij focus op velden < 16px — en zoomt niet terug */
  .wa-comp-input textarea,
  .wa-search input,
  .wa-input,
  .wa-textarea,
  .wa-sched-textarea { font-size: 16px; }
}

/* ── Candidate Detail Modal ──────────────────────────────────── */
.cand-detail-modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  width: min(920px, 92vw);
  max-width: 92vw;
  height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  animation: modalIn var(--dur-slow) var(--ease-out);
  overflow: hidden;
}
.cand-detail-modal .modal-body { flex: 1; overflow-y: auto; min-height: 0; padding: 14px 24px 20px; }
.cand-detail-modal .modal-footer { padding: 14px 24px; border-top: 1px solid var(--border); flex-shrink: 0; }
.cand-detail-modal .modal-header { flex-shrink: 0; }
@media (max-width: 700px) {
  .cand-detail-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

.cand-ai-summary {
  background: linear-gradient(135deg, var(--white) 0%, rgba(217,123,61,0.03) 100%);
  border: 1px solid rgba(217,123,61,0.12); border-radius: var(--radius-md);
  padding: 16px 18px; margin-bottom: 16px;
}
.cand-ai-summary__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--koper); display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
}
.cand-ai-summary p { font-size: 14.5px; color: var(--fg-primary); line-height: 1.6; margin: 0; }
.cand-ai-summary__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

/* Inzichten uit het WhatsApp-gesprek (AI-analyse bij conversie) — groen accent. */
.cand-wa-summary {
  background: linear-gradient(135deg, var(--white) 0%, rgba(0,92,75,0.04) 100%);
  border: 1px solid rgba(0,92,75,0.16); border-radius: var(--radius-md);
  padding: 16px 18px; margin-bottom: 16px;
}
.cand-wa-summary__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #05836B; display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
}
.cand-wa-summary p { font-size: 14.5px; color: var(--fg-primary); line-height: 1.6; margin: 0; }
.cand-wa-summary__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 18px; margin-top: 12px;
}
.cand-wa-fact { display: flex; flex-direction: column; gap: 1px; }
.cand-wa-fact__label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fg-quaternary);
}
.cand-wa-fact__value { font-size: 13.5px; color: var(--fg-primary); }
.cand-wa-summary__points { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }

/* Vlakke metriek-strip (calmed overview): één omrande container met
   divider-gescheiden cellen, geen gevulde kaarten of accentcel meer. */
.cand-insights {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-bottom: 22px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden;
}
.cand-insight { padding: 13px 16px; background: none; }
.cand-insight + .cand-insight { border-left: 1px solid var(--border); }
.cand-insight:nth-child(4n+1) { border-left: none; }
.cand-insight:nth-child(n+5) { border-top: 1px solid var(--border); }
.cand-insight__label { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); margin-bottom: 5px; }
.cand-insight__value { display: block; font-size: 14px; font-weight: 500; color: var(--fg-primary); line-height: 1.35; }

/* Detailblokken: platte tekst zonder vulling, het oog gaat naar de AI-samenvatting */
.cand-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 22px; }
.cand-detail-block { background: none; border-radius: 0; padding: 0; }
.cand-detail-block h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin-bottom: 6px; }
.cand-detail-block p { font-size: 14px; color: var(--fg-secondary); line-height: 1.55; margin: 0; }

.profile-section { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; }

/* ── Smart Create Modal ──────────────────────────────────────── */

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Name cell helpers ───────────────────────────────────────── */
.name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* ── Integraties: master-detail (herontwerp 2026-08-25) ──────────
   Links de lijst met koppelingen (gegroepeerd naar doel), rechts het dossier.
   De pagina staat in flushPages (app.js): rand-tot-rand, .content zonder
   zijpadding. De lijst plakt (sticky) in de scrollende .content. ── */
.main--flush .content:has(.intg) { padding: 0; }
.intg { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100%; }
.intg-loading { padding: 24px 28px; color: var(--fg-tertiary); }
.intg-err-text { color: var(--badge-red-fg); }
.intg-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 11.5px; color: var(--fg-tertiary); }
.intg-mono--strong { color: var(--fg-primary); font-size: 12.5px; }
.intg-empty { color: var(--fg-tertiary); font-size: 13.5px; max-width: 56ch; margin: 0; }

/* Lampje = status. off = niet gekoppeld / niet gecontroleerd. */
.intg-lamp { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--fg-quaternary); vertical-align: middle; }
.intg-lamp--ok { background: var(--status-active, #16A34A); }
.intg-lamp--warn { background: var(--koper); }
.intg-lamp--err { background: var(--badge-red-fg); }
.intg-lamp--off { background: transparent; border: 1.5px solid var(--fg-quaternary); }
.intg-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 11.5px; font-weight: 550; letter-spacing: 0; padding: 3px 9px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.intg-pill--ok { background: var(--badge-green-bg); color: #15803D; }
.intg-pill--warn { background: var(--badge-orange-bg); color: #A85A24; }
.intg-pill--err { background: var(--badge-red-bg); color: var(--badge-red-fg); }
.intg-pill--off { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }

/* Merk-tegel */
.intg-logo { display: inline-grid; place-items: center; border-radius: 8px; flex-shrink: 0; background: rgba(0,0,0,0.05); color: var(--fg-secondary); }
.intg-logo svg { width: 55%; height: 55%; }
.intg-logo__letter { font-family: var(--font-display); font-weight: 800; font-size: 60%; line-height: 1; }
.intg-logo--sm { width: 24px; height: 24px; border-radius: 6px; }
.intg-logo--lg { width: 52px; height: 52px; border-radius: 12px; }
.intg-logo--meta { background: #1877F2; color: #fff; }
.intg-logo--werkzoeken { background: #0F2B46; color: #fff; }
.intg-logo--fireflies { background: #F3EEE8; color: var(--fg-primary); }
.intg-item--off .intg-logo, .intg-pill--off + .intg-logo { background: rgba(0,0,0,0.05); color: var(--fg-tertiary); }

/* Lijst */
.intg-list { background: var(--surface); border-right: 1px solid var(--border); padding: 14px 12px 24px; position: sticky; top: 0; align-self: start; max-height: 100%; overflow-y: auto; }
.intg-group-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-tertiary); padding: 12px 8px 6px; }
.intg-group-label:first-child { padding-top: 4px; }
.intg-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-family: var(--font-body); color: var(--fg-primary); }
.intg-item:hover { background: var(--surface-hover); }
.intg-item--on, .intg-item--on:hover { background: var(--surface-active); }
.intg-item:focus-visible { outline: 2px solid var(--koper); outline-offset: -2px; }
.intg-item--off { opacity: 0.62; }
.intg-item__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.intg-item__text b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intg-item__text span { font-size: 11.5px; color: var(--fg-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Detail */
.intg-detail { padding: 26px 32px 40px; max-width: 900px; display: flex; flex-direction: column; gap: 16px; }
.intg-detail__body { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.intg-back { display: none; }
.intg-hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.intg-hero__text { min-width: 0; }
.intg-hero__text h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.intg-hero__text .intg-mono { display: block; margin-top: 3px; }
.intg-hero__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.intg-section { display: flex; flex-direction: column; gap: 10px; }
.intg-section__head { display: flex; justify-content: space-between; align-items: baseline; }
.intg-section__head h3 { margin: 0; font-size: 13.5px; font-weight: 600; }
.intg-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.intg-kv { display: grid; grid-template-columns: 170px minmax(0, 1fr); font-size: 13px; }
.intg-kv > div { padding: 11px 16px; border-bottom: 1px solid var(--border); min-width: 0; overflow-wrap: anywhere; }
.intg-kv > div:nth-last-child(-n+2) { border-bottom: 0; }
.intg-kv > div:nth-child(odd) { color: var(--fg-tertiary); }
.intg-kv .intg-lamp { margin-right: 4px; }
.intg-danger { border-color: rgba(220,38,38,0.25); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13px; color: var(--fg-secondary); }
.intg-btn-sm { font-size: 12px; padding: 4px 9px; }
.intg-btn-danger { color: var(--badge-red-fg); }

/* Facebook-pagina's: de gedeelde tabel (.table-wrap + generieke th/td-regels).
   Alleen aanvullingen, geprefixt met de omhulling zoals de tabelnorm vraagt. */
.table-wrap.intg-pages table { table-layout: fixed; }
.table-wrap.intg-pages col:nth-child(2) { width: 22%; }
.table-wrap.intg-pages col:nth-child(3) { width: 19%; }
.table-wrap.intg-pages col:nth-child(4) { width: 19%; }
.table-wrap.intg-pages col:nth-child(5) { width: 20%; }
.table-wrap.intg-pages b { font-weight: 500; display: block; color: var(--fg-primary); overflow-wrap: anywhere; }
.table-wrap.intg-pages .intg-mono { display: block; font-size: 10.5px; }
.table-wrap.intg-pages .intg-acts { text-align: right; }
.intg-acts .btn { white-space: normal; text-align: left; line-height: 1.25; }
.intg-select { font-family: var(--font-body); font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--fg-primary); max-width: 100%; }
.intg-check-toggle { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--fg-primary); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--fg-quaternary); }
.intg-check-toggle:focus-visible { outline: 2px solid var(--koper); outline-offset: 2px; border-radius: 3px; }
.intg-route { font-size: 12.5px; white-space: nowrap; }
.intg-route small { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; color: var(--fg-quaternary); }
.intg-checks-row[hidden] { display: none; }
.intg-checks { background: var(--bg); border-radius: 8px; padding: 10px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 12.5px; }
.intg-check { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.intg-check .intg-lamp { position: relative; top: 1px; }
.intg-check b { font-weight: 500; }
.intg-check__fix { display: block; color: #A85A24; }
.intg-checks__foot { grid-column: 1 / -1; font-size: 11.5px; color: var(--fg-quaternary); padding-top: 4px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .intg { grid-template-columns: 224px minmax(0, 1fr); }
  .intg-detail { padding: 20px 20px 40px; }
}
@media (max-width: 768px) {
  /* Lijst → dossier: op mobiel één kolom tegelijk, met terugknop. */
  .intg { grid-template-columns: 1fr; }
  .intg-list { position: static; max-height: none; border-right: 0; }
  .intg-detail { display: none; padding: 16px 16px 32px; }
  .intg--detail .intg-list { display: none; }
  .intg--detail .intg-detail { display: flex; }
  .intg-back { display: inline-flex; align-self: flex-start; font: inherit; font-size: 13px; font-weight: 500; color: var(--fg-secondary); background: none; border: 0; padding: 4px 0; cursor: pointer; }
  .intg-hero__actions { margin-left: 0; width: 100%; }
  .intg-kv { grid-template-columns: 1fr; }
  .intg-kv > div:nth-child(odd) { border-bottom: 0; padding-bottom: 0; }
  .intg-kv > div:nth-last-child(-n+2) { border-bottom: 0; }
  .intg-acts { text-align: left; }
  .intg-checks { grid-template-columns: 1fr; }
  .table-wrap.intg-pages .intg-checks-row td { padding: 0; }
  .table-wrap--cards.intg-pages .intg-checks-row { padding: 0; border: 0; background: none; }
  .table-wrap--cards.intg-pages tbody td:first-child { flex-direction: column; align-items: flex-start; gap: 2px; }
  .table-wrap--cards.intg-pages .intg-checks-row td { font-size: 12.5px; font-weight: 400; color: var(--fg-secondary); }
}

/* ── Responsive ──────────────────────────────────────────────────
   De mobile-header/.sidebar-basis staat in het eerste 768px-blok
   (bij "Mobile hamburger" hierboven); hier alleen paginaspecifieke
   mobiele regels. ── */
@media (max-width: 768px) {
  .content { padding: 16px 16px 16px; }

  .lead-stats { flex-direction: column; gap: 8px; }
  /* .stats-row blijft een 2-koloms raster (zie 768px-blok); niet platklappen. */
  .dash-grid, .dash-widgets-grid { grid-template-columns: 1fr; }
  .match-grid { grid-template-columns: 1fr; }
  /* Settings: stack nav above content on mobile */
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding-bottom: 4px;
  }
  .settings-nav__item {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 12.5px;
  }
  .settings-nav__divider { display: none; }

  /* Page header: smaller title/subtitle on mobile */
  .page-header__title, #pageTitle {
    font-size: 24px;
  }
  .page-header__subtitle {
    font-size: 13px;
  }
  .page-header {
    padding: 16px 16px 0;
  }
  .page-body {
    padding: 0 16px 24px;
  }

  /* Stats: slightly smaller value text */
  .stat-card .stat-value { font-size: 20px; }

  /* Filter bar: allow wrapping, prevent overflow */
  .filter-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .filter-bar__left {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Twee keuzelijsten per rij, niet drie. filters.js zet een INLINE
     `min-width:0;flex:1 1 110px` op elke lijst (r241-242) en inline wint van
     elke stylesheet-regel -- vandaar !important; zonder dat is deze regel dode
     code, zoals hij tot 2026-08-16 ook was. Drie lijsten van 110px passen net
     naast elkaar op een 390px-scherm, waardoor "Alle bronnen" en "Alle
     portalen" halverwege afbraken (gemeld op de leadpagina). Met een basis van
     bijna de halve rij wrapt de derde en blijft elk label heel. */
  .filter-select {
    min-width: 0;
    flex: 1 1 calc(50% - 6px) !important;
  }
  .filter-bar__search {
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
    min-height: 40px;
  }

  /* iOS zoomt in bij focus op velden < 16px — en zoomt niet terug */
  .filter-bar__search input,
  .filter-select,
  .pager__size select { font-size: 16px; }

  /* Table: tighter font on mobile */
  .table-wrap table td,
  .table-wrap table th {
    font-size: 13px;
  }

  /* Forms inside modals: stack 2-col grids */
  .modal-body .form-row,
  .modal-body [style*="display: grid"],
  .modal-body [style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }

  .cand-detail-modal { max-width: 100vw; max-height: 100dvh; border-radius: 0; width: 100%; }
  .cand-detail-grid { grid-template-columns: 1fr; }
}

/* Very small phones (up to 640px) */
@media (max-width: 640px) {
  .page-header__title, #pageTitle { font-size: 20px; }
  .page-header__subtitle { font-size: 12px; }

  /* Stat cards: single column on very small screens */
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 12px 14px; }
  .stat-card .stat-value { font-size: 19px; }
  .stat-card .stat-label { font-size: 11px; }

  /* Bewust GEEN eigen breedte voor .filter-select onder 640px: de 768px-regel
     (twee per rij) volstaat tot de kleinste telefoon. Gemeten op staging bij
     390px: een hele rij maakte elke lijst 324px terwijl het langste label
     ("Alle portalen") er ~140px van gebruikt, en het filterblok groeide naar
     196px hoog -- de eerste lead begon dan pas op 326px, bijna 40% van het
     scherm. Twee per rij scheelt een volle rij zonder dat een label afbreekt. */

  /* Tab bar: even more compact */
  .tab { padding: 5px 10px; font-size: 11.5px; }

  /* Settings nav: even more compact */
  .settings-nav__item { padding: 5px 8px; font-size: 12px; }

  /* Mobile header title */
  .mobile-title { font-size: 15px; }

  /* GEEN min-width meer: de tabel stapelt hieronder tot kaarten (zie
     .table-wrap--cards), dus zijwaarts schuiven is niet langer nodig. Een
     tabel die niet is omgezet houdt zijn eigen breedte. */

  /* Kandidaat-detail: metriek-strip van 4 naar 2 kolommen zodat de
     labels op een telefoon niet samengeknepen worden. De divider-borders
     worden voor het 2-koloms raster opnieuw bepaald (nth-child-regels
     hierboven gelden voor 4 kolommen). */
  .cand-insights { grid-template-columns: 1fr 1fr; }
  .cand-insight:nth-child(odd) { border-left: none; }
  .cand-insight:nth-child(even) { border-left: 1px solid var(--border); }
  .cand-insight:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* ============================================================
   Notification Center
   Exacte hex/px-waarden uit design_handoff_notifications/README.md
   zijn leidend; lokale CSS-tokens worden waar mogelijk hergebruikt
   maar overschreven wanneer ze afwijken van de design-specificatie.
   ============================================================ */

@keyframes notifModalIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bel-trigger in de sidebar footer ─────────────────────────── */
.sidebar__bell {
  position: relative;
}
.sidebar__bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--koper);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--white);
  line-height: 1;
  box-sizing: border-box;
}

/* Overlay + panel ──────────────────────────────────────────── */
.notif-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  padding-top: 7vh;
}

.notif-panel {
  background: var(--white);
  border-radius: 18px;
  width: 580px;
  max-width: 94vw;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  animation: notifModalIn 350ms cubic-bezier(0.22, 0.68, 0, 1);
}

.notif-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--border);
}
.notif-panel__heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.notif-panel__heading h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  margin: 0;
}
.notif-panel__count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--koper);
  background: rgba(217, 123, 61, 0.1);
  padding: 3px 11px;
  border-radius: 999px;
}

.modal-close-btn.notif-close,
.notif-panel button.modal-close-btn {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.modal-close-btn.notif-close:hover { color: var(--fg-primary); }

.notif-panel__body {
  overflow-y: auto;
  padding: 6px 0;
  flex: 1;
}

/* Groepen + items ─────────────────────────────────────────── */
.notif-group { padding: 0; }
.notif-group__label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  padding: 16px 26px 8px;
}

.notif-item {
  position: relative;
  display: flex;
  gap: 15px;
  padding: 14px 26px;
  cursor: pointer;
  transition: background 120ms ease;
}
.notif-item + .notif-item {
  border-top: 1px solid var(--border);
}
.notif-item:hover { background: var(--surface-hover); }

.notif-item--unread {
  background: rgba(217, 123, 61, 0.045);
}
.notif-item--unread:hover { background: rgba(217, 123, 61, 0.08); }
.notif-item--unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2.5px;
  background: var(--koper);
}
/* Rond alleen de uiteinden van een aaneengesloten reeks ongelezen items af */
.notif-item--unread:not(.notif-item--unread + .notif-item--unread)::before {
  border-radius: 0 2px 0 0;
}
.notif-item--unread:not(:has(+ .notif-item--unread))::before {
  border-radius: 0 0 2px 0;
}

.notif-item__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-item__icon svg { width: 20px; height: 20px; }

.notif-item__main {
  flex: 1;
  min-width: 0;
}
.notif-item__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary);
  line-height: 1.35;
  padding-right: 16px;
}
.notif-item__body {
  font-size: 13.5px;
  color: var(--fg-tertiary);
  margin-top: 3px;
  line-height: 1.45;
}

.notif-item__slots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.notif-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-secondary);
  background: var(--surface-active);
  padding: 4px 10px;
  border-radius: 7px;
}
.notif-chip svg { color: var(--fg-muted); }
.notif-item__metatag {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg-muted);
}

.notif-item__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.notif-action {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  height: 34px;
  padding: 0 15px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: all 120ms ease;
}
.notif-action:hover { border-color: var(--fg-muted); color: var(--fg-primary); }
.notif-action--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
/* Primary moet bij hover wit blijven: .notif-action:hover (0,2,0) zou anders
   de donkere fg-kleur forceren op de navy achtergrond (onleesbaar). */
.notif-action--primary:hover { background: var(--deep-ink); border-color: var(--deep-ink); color: #fff; }

/* Inline inplan-flow ──────────────────────────────────────── */
.notif-schedule { margin-top: 10px; }
.notif-schedule__label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-bottom: 7px;
}
.notif-schedule__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.notif-slot-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-secondary);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 13px;
  cursor: pointer;
  transition: all 120ms ease;
}
.notif-slot-btn svg { color: var(--fg-muted); }
.notif-slot-btn:hover {
  border-color: var(--koper);
  color: var(--koper);
  background: rgba(217, 123, 61, 0.06);
}
.notif-slot-btn:hover svg { color: var(--koper); }

.notif-scheduled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #15803D;
  background: #ECF7EF;
  padding: 8px 14px;
  border-radius: 8px;
}

/* "Bekijken" affordance op niet-actionable rijen ──────────── */
.notif-item__view-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 9px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--koper);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease;
}
.notif-item:hover .notif-item__view-link { opacity: 1; }
.notif-item__view-link:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (hover: none) {
  .notif-item__view-link { opacity: 1; }
}

.notif-item__time {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 6px;
}

.notif-item__dot {
  position: absolute;
  top: 17px;
  right: 26px;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--koper);
}

/* Empty state ─────────────────────────────────────────────── */
.notif-empty {
  text-align: center;
  padding: 48px 24px;
}
.notif-empty__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-active);
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.notif-empty__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary);
}
.notif-empty__sub {
  font-size: 13px;
  color: var(--fg-tertiary);
  margin-top: 3px;
}

/* Footer + Alles gelezen ──────────────────────────────────── */
.notif-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 26px;
  border-top: 1px solid var(--border);
}
.notif-markall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  transition: color 120ms ease;
}
.notif-markall:hover:not(:disabled) { color: var(--koper); }
.notif-markall:disabled { color: var(--fg-muted); cursor: default; opacity: 0.6; }

/* Linker actiegroep in de footer (gelezen + verwijderen) ───── */
.notif-panel__footer-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* "Alles verwijderen" — zelfde stijl als markall, met rode hint bij hover */
.notif-clearall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  transition: color 120ms ease;
}
.notif-clearall:hover:not(:disabled) { color: var(--badge-red-fg); }
.notif-clearall:disabled { color: var(--fg-muted); cursor: default; opacity: 0.6; }

/* "Sluiten" primary - kleine variant ─────────────────────── */
.btn-primary-sm {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn-primary-sm:hover { background: var(--deep-ink); border-color: var(--deep-ink); }

/* Mobile: full-screen ─────────────────────────────────────── */
@media (max-width: 600px) {
  .notif-overlay { padding-top: 0; align-items: stretch; }
  .notif-panel {
    width: 100%;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Propose-to-client flow (design handoff): koppelrijen, kebab-menu
   en voorstel-modal. Exacte kleuren per handoff.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sectieheader boven koppellijsten ─────────────────────────── */
.cand-detail-section__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.cand-detail-section__header h4 {
  font-size: 13.5px; font-weight: 600; color: var(--fg-primary); margin: 0;
}
.cand-detail-section__count {
  font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  background: var(--surface-active); color: var(--fg-tertiary);
}
/* ── Koppelrijen (kandidaat↔vacature) ─────────────────────────── */
.cand-link-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: visible;
}
.cand-link-item + .cand-link-item { border-top: 1px solid var(--border); }
.cand-link-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px;
}
.cand-link-row__sub { padding: 0 14px 12px 61px; }
.cand-link-row__sub > div:first-child { margin-top: 0 !important; }

/* Afvalreden bij een gekoppelde vacature: ingeklapte samenvatting + paneel.
   De reden is het meest gelezen element en de invoervelden het minst -- daarom
   staat de samenvatting altijd zichtbaar en vouwt het formulier alleen open als
   je het nodig hebt. Vervangt het permanent open formulier van vóór 29-07. */
/* Scheidingslijn tussen de koppelrij en de samenvattingsregel (ontwerp §3.1):
   het redenblok hoort visueel bij de koppeling, maar is een eigen laag. */
.rsn { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.rsn-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: none; border-radius: var(--radius-sm);
  background: var(--surface-hover); cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 12.5px; color: var(--fg-secondary);
}
/* Rust/hover uitsluitend via tokens (--surface-hover -> --surface-active), het
   patroon dat dit bestand overal gebruikt. Een harde rgba(0,0,0,...)-overlay
   hield geen rekening met een andere achtergrond; het token wel. */
.rsn-toggle:hover { background: var(--surface-active); }
.rsn-toggle:focus-visible { outline: 2px solid var(--koper); outline-offset: 2px; }
.rsn-chev { flex: none; color: var(--fg-muted); transition: transform var(--dur-fast) var(--ease-out); }
.rsn-toggle[aria-expanded="true"] .rsn-chev { transform: rotate(90deg); }
.rsn-summary { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsn-summary strong { font-weight: 600; color: var(--fg-primary); }
.rsn-sep { color: var(--fg-muted); margin: 0 6px; }
/* Geen vastgelegde reden: koperen attentie-icoon als CSS-mask, zodat zowel de
   server-render als de her-render na opslaan hetzelfde beeld geeft zonder dat
   de JS SVG hoeft te bouwen. */
.rsn-summary--empty { color: var(--fg-tertiary); display: flex; align-items: center; gap: 6px; }
.rsn-summary--empty::before {
  content: ''; flex: none; width: 13px; height: 13px; background: var(--koper);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rsn-cta { flex: none; font-size: 11.5px; font-weight: 600; color: var(--koper); }
.rsn-toggle:not(.rsn-toggle--empty) .rsn-cta { display: none; }
.rsn-panel {
  margin-top: 6px; padding: 10px 12px 12px;
  background: var(--surface-active); border-radius: var(--radius-sm); font-size: 12px;
}
.rsn-panel[hidden] { display: none; }
.rsn-hint { margin-top: 6px; font-size: 11px; color: var(--fg-tertiary); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .rsn-chev { transition: none; } }

.cand-link-row__person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cand-link-row__avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.cand-link-row__vacicon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--surface-active); color: var(--koper);
  display: flex; align-items: center; justify-content: center;
}
.cand-link-row__vacinfo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cand-link-row__name {
  font-size: 14px; font-weight: 600; color: var(--fg-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cand-link-row__client { font-size: 12.5px; color: var(--fg-tertiary); }

.fase-chip {
  font-size: 11.5px; font-weight: 600; padding: 2px 9px;
  border-radius: 999px; white-space: nowrap;
}

.cand-link-row__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Groene check: voorgesteld (detail zit in het ⋯ menu) */
.propose-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: #ECF7EF; color: #15803D;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Ontkoppeld + ongedaan maken */
.cand-link-row--removed {
  justify-content: flex-start; gap: 10px;
  font-size: 13px; color: var(--fg-tertiary); font-style: italic;
}
.cand-link-row__undo {
  background: none; border: none; padding: 0; font: inherit; font-style: normal;
  color: var(--koper); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ── Kebab-menu ───────────────────────────────────────────────── */
.rowmenu { position: relative; }
.rowmenu__trigger {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: none; color: var(--fg-tertiary);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast);
}
.rowmenu__trigger:hover,
.rowmenu__trigger--open { background: var(--surface-active); color: var(--fg-primary); }

.rowmenu__pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  min-width: 210px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
  padding: 6px;
  animation: menuPop 140ms var(--ease-out);
}
.rowmenu__pop--up { top: auto; bottom: calc(100% + 6px); }
@keyframes menuPop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rowmenu__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; background: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13.5px; color: var(--fg-secondary);
  cursor: pointer; text-align: left;
  transition: background var(--dur-fast);
}
.rowmenu__item:hover { background: var(--surface-active); color: var(--fg-primary); }
.rowmenu__item svg { color: var(--fg-muted); flex-shrink: 0; }
.rowmenu__item:hover svg { color: var(--fg-secondary); }

/* Voorstellen als uitgelichte actie bovenin */
.rowmenu__item--primary { color: var(--navy); font-weight: 600; }
.rowmenu__item--primary svg { color: var(--koper); }
.rowmenu__item--primary:hover { background: rgba(217,123,61,0.08); color: var(--navy); }
.rowmenu__item--primary:hover svg { color: var(--koper); }

/* Statische "al voorgesteld"-statusregel in het menu */
.rowmenu__status {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  font-size: 12.5px; font-weight: 600; color: #15803D;
}
.rowmenu__status svg { color: #15803D; flex-shrink: 0; }

.rowmenu__item--fase { font-size: 13px; padding: 6px 10px; }
.rowmenu__fase-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rowmenu__item--fase svg { margin-left: auto; color: #15803D; }
.rowmenu__item--current { color: var(--fg-primary); font-weight: 500; cursor: default; }
.rowmenu__item--current:hover { background: none; }

.rowmenu__item--danger { color: #C2410C; }
.rowmenu__item--danger svg { color: #C2410C; }
.rowmenu__item--danger:hover { background: #FEF2F2; color: #B91C1C; }
.rowmenu__item--danger:hover svg { color: #B91C1C; }

.rowmenu__label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--fg-muted); padding: 9px 10px 4px;
}
.rowmenu__divider { height: 1px; background: var(--border); margin: 6px 4px; }

/* ── Voorstel-modal (gestapeld boven het detailmodal) ─────────── */
.propose-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}

.propose-modal {
  background: var(--surface); border-radius: var(--radius-xl);
  width: 500px; max-width: 94vw; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
  animation: modalIn var(--dur-slow) var(--ease-out);
}
.propose-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
}
.propose-modal__header h2 {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--fg-primary); margin: 0;
}
.propose-modal__close {
  background: none; border: none; color: var(--fg-tertiary); cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast);
}
.propose-modal__close:hover { background: var(--surface-active); color: var(--fg-primary); }
.propose-modal__body {
  padding: 22px 24px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
}

/* expliciete keuze vóór een fasewissel naar Voorgesteld HR */
.propose-choice { width: 520px; }
.propose-choice__body { gap: 10px; }
.propose-choice__intro {
  margin: 0 0 6px; color: var(--fg-secondary); font-size: 14px;
}
.propose-choice__option {
  width: 100%; display: flex; align-items: center; gap: 13px;
  padding: 15px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface);
  color: var(--fg-primary); text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.propose-choice__option:hover,
.propose-choice__option:focus-visible {
  outline: none; border-color: var(--koper); background: var(--surface-hover);
  box-shadow: 0 0 0 3px rgba(213, 111, 47, 0.10);
}
.propose-choice__option:disabled {
  cursor: not-allowed; opacity: 0.55; box-shadow: none;
}
.propose-choice__option:disabled:hover {
  border-color: var(--border-strong); background: var(--surface);
}
.propose-choice__option--primary .propose-choice__icon {
  background: var(--navy); color: #fff;
}
.propose-choice__icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-active); color: var(--fg-secondary);
}
.propose-choice__copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.propose-choice__copy strong { font-size: 14px; font-weight: 600; }
.propose-choice__copy small { color: var(--fg-tertiary); font-size: 12.5px; line-height: 1.4; }
.propose-choice__arrow { display: flex; flex: 0 0 auto; color: var(--fg-muted); }

/* kandidaat → klant flow */
.propose-flow { display: flex; align-items: center; gap: 8px; }
.propose-flow__node {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 4px; padding: 16px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-hover);
}
.propose-flow__avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.propose-flow__avatar--client { border-radius: var(--radius-sm); background: var(--koper); }
.propose-flow__name { font-size: 14px; font-weight: 600; color: var(--fg-primary); }
.propose-flow__sub { font-size: 12px; color: var(--fg-tertiary); }
.propose-flow__arrow { flex-shrink: 0; color: var(--fg-muted); }

/* portaalstatus-banner */
.propose-portal {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-md);
  font-size: 13px; line-height: 1.45;
}
.propose-portal svg { flex-shrink: 0; margin-top: 1px; }
.propose-portal strong { font-weight: 600; }
.propose-portal--active { background: #ECF7EF; color: #15663A; }
.propose-portal--active svg { color: #15803D; }
.propose-portal--inactive { background: #FBF1E8; color: #8A4B22; }
.propose-portal--inactive svg { color: #B5612E; }
.propose-portal__text { flex: 1; }

/* notitieveld */
.propose-field { display: flex; flex-direction: column; gap: 7px; }
.propose-field label { font-size: 13px; font-weight: 500; color: var(--fg-secondary); }
.propose-field label span { color: var(--fg-muted); font-weight: 400; }
.propose-field textarea {
  font-family: var(--font-body); font-size: 13.5px; color: var(--fg-primary);
  background: var(--surface);
  padding: 11px 13px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); resize: vertical; min-height: 70px;
  transition: border-color var(--dur-fast);
}
.propose-field textarea:focus { outline: none; border-color: var(--koper); }
.propose-field textarea::placeholder { color: var(--fg-muted); }

.propose-modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--border);
}
.propose-modal__footer .btn { font-size: 13px; padding: 7px 14px; }
.propose-modal__footer .btn svg { vertical-align: -1px; margin-right: 5px; }

@media (max-width: 560px) {
  .propose-flow { flex-direction: column; }
  .propose-flow__arrow { transform: rotate(90deg); }
  .cand-link-row__sub { padding-left: 14px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Plaatsingen redesign (ats-6) — CSS letterlijk overgenomen uit
   reference/styles.css + reference/styles-pages.css (alleen @keyframes spin
   weggelaten omdat die al bestaat). Niet aanpassen zonder de reference.
   ───────────────────────────────────────────────────────────────────────── */

/* Stats cards (reference styles.css) */
.lead-stats {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.lead-stats__card {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: all var(--dur-base) var(--ease-out);
}
.lead-stats__card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.lead-stats__card--accent {
  border-color: rgba(217, 123, 61, 0.2);
  background: linear-gradient(135deg, #FFFCF9, var(--white));
}
.lead-stats__card--warn .lead-stats__value {
  color: var(--koper);
}
.lead-stats__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  line-height: 1;
}
.lead-stats__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-tertiary);
  margin-top: 4px;
}

/* btn-secondary-sm (reference styles.css) */
.btn-secondary-sm {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  color: var(--fg-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.btn-secondary-sm:hover {
  background: var(--surface-active);
  border-color: var(--border-strong);
}

/* Form fields (reference styles.css) */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.form-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-secondary);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--fg-primary);
  outline: none;
  transition: border-color var(--dur-fast);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--koper);
  box-shadow: 0 0 0 3px rgba(217, 123, 61, 0.1);
}
.form-field textarea {
  resize: vertical;
  min-height: 80px;
}
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* Form rows (reference styles.css + styles-pages.css) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-row-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-field--full { grid-column: 1 / -1; }

/* Smart-input zone buttons (reference styles-pages.css) */
.cand-paste__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-fast);
}
.cand-paste__btn:hover { background: rgba(0,0,0,0.04); color: var(--fg-primary); }
.cand-paste__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--koper);
  color: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-fast);
}
.cand-paste__send:hover { background: var(--koper-hover); }

.profile-section__chevron { color: var(--fg-muted); font-size: 16px; }

/* ── Smart Create Modal (reference styles-pages.css) ──────── */
.smart-create-modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 680px;
  max-width: 95vw;
  height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  animation: modalIn var(--dur-slow) var(--ease-out);
  overflow: hidden;
}
.smart-create__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.smart-create__title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.smart-create__title h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-primary);
  margin: 0;
}
.smart-create__title svg { color: var(--koper); }
.smart-create__zone {
  margin: 16px 24px 0;
  padding: 12px 12px 12px 16px;
  border: 1.5px dashed rgba(217,123,61,0.25);
  border-radius: var(--radius-md);
  background: rgba(217,123,61,0.02);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  transition: all var(--dur-fast);
}
.smart-create__zone--dragover {
  border-color: var(--koper);
  background: rgba(217,123,61,0.06);
  border-style: solid;
}
.smart-create__zone-icon { color: var(--koper); padding-top: 4px; flex-shrink: 0; }
.smart-create__textarea {
  flex: 1;
  min-width: 200px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-primary);
  resize: none;
  outline: none;
  line-height: 1.5;
  padding: 2px 0;
}
.smart-create__textarea::placeholder { color: var(--fg-muted); }
.smart-create__zone-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.smart-create__extracting {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--koper);
  width: 100%;
}
.smart-create__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(217,123,61,0.2);
  border-top-color: var(--koper);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.smart-create__extracted-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  color: #16A34A;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.04);
}
.smart-create__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 24px;
}
.smart-create__section {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.smart-create__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-primary);
  text-align: left;
}
.smart-create__filled {
  font-size: 11px;
  font-weight: 500;
  color: var(--koper);
  background: rgba(217,123,61,0.08);
  padding: 1px 7px;
  border-radius: 999px;
}
.smart-create__section-body {
  padding: 0 14px 14px;
}
.smart-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.smart-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-secondary);
  background: var(--white);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.smart-chip:hover { border-color: var(--koper); color: var(--koper); }
.smart-chip--active {
  background: var(--koper);
  color: var(--white);
  border-color: var(--koper);
}
.smart-create__footer {
  display: flex;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
}
@media (max-width: 768px) {
  .smart-create-modal { max-width: 100vw; height: 100dvh; border-radius: 0; }
  .form-row-wrap { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   Uitgebreid voorstel-venster (ATS) — toelichting, documenten,
   gespreksmomenten + custom datum-/tijdkiezer (datepicker.js).
   Variabelen gemapt op de ATS-tokens (style.css).
   ───────────────────────────────────────────────────────────── */

/* ruimere toelichting */
.propose-field textarea { min-height: 150px; line-height: 1.6; }
.propose-field__hint { font-size: 12px; color: var(--fg-tertiary); margin-top: -2px; }

/* document picker */
.docpick { display: flex; flex-direction: column; gap: 8px; }
.docpick__item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-alt); cursor: pointer; transition: all .15s cubic-bezier(0.22,0.68,0,1);
}
.docpick__item:hover { border-color: var(--border-strong); background: var(--surface); }
.docpick__item--on { border-color: var(--koper-300); background: #FFFCF9; box-shadow: 0 0 0 2px rgba(217,123,61,0.08); }
.docpick__check {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border-strong);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; transition: all .15s cubic-bezier(0.22,0.68,0,1);
}
.docpick__check svg { opacity: 0; }
.docpick__item--on .docpick__check { background: var(--koper); border-color: var(--koper); }
.docpick__item--on .docpick__check svg { opacity: 1; }
.docpick__ficon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: #FEF2F2; color: #C2410C;
  display: flex; align-items: center; justify-content: center;
}
.docpick__ficon--alt { background: #EAF1F6; color: var(--steel); }
.docpick__main { flex: 1; min-width: 0; }
.docpick__name { font-size: 13.5px; font-weight: 600; color: var(--fg-primary); }
.docpick__meta { font-size: 12px; color: var(--fg-tertiary); margin-top: 1px; }
.docpick__badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--koper); background: var(--koper-50); padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}
.docpick__empty { font-size: 13px; color: var(--fg-tertiary); padding: 4px 0; }
.docpick__upload {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: none; color: var(--fg-secondary); cursor: pointer; font-size: 13px; font-weight: 550;
  font-family: var(--font-body); transition: all .15s cubic-bezier(0.22,0.68,0,1); width: 100%;
}
.docpick__upload:hover { border-color: var(--koper); color: var(--koper); background: var(--koper-50); }
.docpick__upload svg { color: var(--fg-tertiary); }
.docpick__upload:hover svg { color: var(--koper); }

/* slot editor (recruiter stelt momenten voor) */
.slotedit { display: flex; flex-direction: column; gap: 8px; }
.slotedit__row { display: grid; grid-template-columns: 1.3fr 0.9fr 1fr 34px; gap: 8px; align-items: start; }
.slotedit__type {
  font-family: var(--font-body); font-size: 13px; color: var(--fg-primary);
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-alt); outline: none; width: 100%; min-height: 48px;
  appearance: none; cursor: pointer; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A8680'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.slotedit__type:focus { border-color: var(--koper); background-color: var(--surface); }
.slotedit__del {
  width: 34px; height: 48px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: none; color: var(--fg-quaternary); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s cubic-bezier(0.22,0.68,0,1);
}
.slotedit__del:hover { background: #FEF2F2; color: #C2410C; }
.slotedit__add {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 13px; font-weight: 600; color: var(--koper);
  background: none; border: none; cursor: pointer; padding: 8px 10px; margin-left: -10px;
  border-radius: var(--radius-sm); transition: background .15s cubic-bezier(0.22,0.68,0,1);
}
.slotedit__add:hover { background: var(--koper-50); }

/* gedeelde trigger-look datum-/tijdveld */
.datefield, .timefield { position: relative; }
.datefield__trigger {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--fg-primary);
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-alt); cursor: pointer; text-align: left;
  transition: all .15s cubic-bezier(0.22,0.68,0,1);
}
.datefield__trigger svg { color: var(--fg-tertiary); flex-shrink: 0; }
.datefield__trigger span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datefield__trigger:hover { border-color: var(--border-strong); }
.datefield__trigger--empty { color: var(--fg-muted); font-weight: 450; }

/* kalender-popover (op document.body) */
.dp-portal { animation: dpopIn 150ms cubic-bezier(0.22,0.68,0,1); }
.dpop {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); padding: 16px;
}
@keyframes dpopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dpop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dpop__month { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--navy); text-transform: capitalize; }
.dpop__nav {
  width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-light);
  background: var(--surface); color: var(--fg-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s cubic-bezier(0.22,0.68,0,1);
}
.dpop__nav:hover { background: var(--surface-alt); color: var(--fg-primary); border-color: var(--border-strong); }
.dpop__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dpop__grid--dow { margin-bottom: 4px; gap: 3px; }
.dpop__dow {
  text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--fg-muted); padding: 4px 0;
}
.dpop__cell {
  height: 38px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--fg-primary);
  transition: all .12s cubic-bezier(0.22,0.68,0,1);
}
.dpop__cell--empty { cursor: default; }
.dpop__cell:not(.dpop__cell--empty):hover { background: var(--koper-50); color: var(--navy); }
.dpop__cell--past { color: var(--fg-muted); }
.dpop__cell--today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.dpop__cell--sel, .dpop__cell--sel:hover { background: var(--koper); color: #fff; font-weight: 700; box-shadow: none; }

/* tijd-popover */
.tpop {
  width: 100%; max-height: 248px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-modal); padding: 6px;
}
.tpop__opt {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 500; color: var(--fg-primary);
  transition: background .12s cubic-bezier(0.22,0.68,0,1);
}
.tpop__opt:hover { background: var(--surface-alt); }
.tpop__opt--sel, .tpop__opt--sel:hover { background: var(--koper); color: #fff; font-weight: 700; }

@media (max-width: 600px) {
  .slotedit__row { grid-template-columns: 1fr 1fr; }
  .slotedit__row .slotedit__type { grid-column: 1 / span 2; }
  .slotedit__row .slotedit__del { grid-column: 2; justify-self: end; }
}

/* =========================================================
   Create Wizard (kandidaat) — static/modules/wizard.js
   Port van design_handoff_create_wizard/reference/wizard.css met de
   bestaande tokens (--koper, --fg-*, --radius-*). Maatvoering 1:1.
   Achter feature-flag (localStorage.ats_wizard / ?wizard=1).
   ========================================================= */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wizIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.wiz-overlay {
  position: fixed; inset: 0;
  background: rgba(13, 31, 51, 0.32);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadeIn var(--dur-base) var(--ease-out);
}
.wiz {
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 920px; max-width: 100%;
  height: 760px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(13,31,51,0.22);
  animation: wizIn var(--dur-slow) var(--ease-out);
}

/* Header */
.wiz__head { display: flex; align-items: center; gap: 13px; padding: 18px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.wiz__head-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--koper-subtle); color: var(--koper); display: flex; align-items: center; justify-content: center; }
.wiz__head-text { flex: 1; min-width: 0; }
.wiz__head-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-primary); line-height: 1.2; }
.wiz__head-sub { font-size: 12.5px; color: var(--fg-tertiary); margin-top: 1px; }
.wiz__autosave { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--fg-muted); margin-right: 4px; white-space: nowrap; }
.wiz__autosave-dot { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }
.wiz__close { background: none; border: none; cursor: pointer; color: var(--fg-muted); padding: 7px; border-radius: var(--radius-sm); display: flex; transition: all var(--dur-fast); }
.wiz__close:hover { background: var(--surface-active); color: var(--fg-primary); }

/* Stepper */
.wiz__steps { display: flex; align-items: center; gap: 0; padding: 14px 24px; flex-shrink: 0; border-bottom: 1px solid var(--border); background: linear-gradient(to bottom, #FCFBFA, var(--white)); }
.wiz-step { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; cursor: default; }
.wiz-step--clickable { cursor: pointer; }
.wiz-step__num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 12px; font-weight: 600; flex-shrink: 0; background: var(--white); color: var(--fg-muted); border: 1.5px solid var(--border-strong); transition: all var(--dur-base) var(--ease-out); }
.wiz-step__label { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.wiz-step__label-main { font-size: 13px; font-weight: 500; color: var(--fg-tertiary); transition: color var(--dur-base); }
.wiz-step__label-opt { font-size: 10px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg-muted); }
.wiz-step__line { flex: 1; height: 1.5px; min-width: 14px; background: var(--border-strong); margin: 0 10px; border-radius: 1px; transition: background var(--dur-base); }
.wiz-step--active .wiz-step__num { background: var(--fg-primary); border-color: var(--fg-primary); color: var(--white); box-shadow: 0 0 0 4px rgba(0,0,0,0.05); }
.wiz-step--active .wiz-step__label-main { color: var(--fg-primary); font-weight: 600; }
.wiz-step--done .wiz-step__num { background: var(--koper); border-color: var(--koper); color: var(--white); }
.wiz-step--done .wiz-step__label-main { color: var(--fg-secondary); }
.wiz-step--done + .wiz-step__line, .wiz-step__line--done { background: var(--koper); }
.wiz-step--clickable:hover .wiz-step__num { border-color: var(--koper); }
@media (max-width: 720px) { .wiz-step__label { display: none; } .wiz-step--active .wiz-step__label { display: flex; } }

/* Body */
.wiz__body { flex: 1; overflow-y: auto; position: relative; }
.wiz__screen { padding: 26px 30px 30px; animation: screenIn var(--dur-slow) var(--ease-out); }
.wiz__screen-head { margin-bottom: 20px; max-width: 640px; }
.wiz__screen-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg-primary); line-height: 1.2; display: flex; align-items: center; gap: 10px; }
.wiz__screen-opt { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg-tertiary); background: var(--surface-active); padding: 3px 9px; border-radius: 999px; }
.wiz__screen-sub { font-size: 14px; color: var(--fg-tertiary); margin-top: 6px; line-height: 1.5; }

/* Footer */
.wiz__foot { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--white); }
.wiz__foot-spacer { flex: 1; }
.wiz__foot-hint { font-size: 12px; color: var(--fg-muted); }
.wiz__foot-hint kbd { font-family: var(--font-body); font-size: 11px; background: var(--surface-active); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--fg-secondary); }
.wiz-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 13px; font-weight: 600; border-radius: var(--radius-sm); padding: 8px 16px; cursor: pointer; border: 1px solid transparent; transition: all var(--dur-fast); white-space: nowrap; }
.wiz-btn svg { flex-shrink: 0; }
.wiz-btn--ghost { background: var(--white); border-color: var(--border); color: var(--fg-secondary); font-weight: 500; }
.wiz-btn--ghost:hover { border-color: var(--border-strong); background: var(--surface-active); color: var(--fg-primary); }
.wiz-btn--primary { background: var(--koper); color: var(--white); box-shadow: 0 1px 3px rgba(217,123,61,0.3); }
.wiz-btn--primary:hover:not(:disabled) { background: var(--koper-hover); transform: translateY(-0.5px); box-shadow: 0 3px 10px rgba(217,123,61,0.32); }
.wiz-btn--primary:disabled { opacity: 0.7; cursor: default; box-shadow: none; }

/* SmartPaste intro */
.wiz-intro { max-width: 600px; margin: 0 auto; padding: 14px 0 8px; text-align: center; }
.wiz-intro__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--koper); background: var(--koper-subtle); padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; }
.wiz-intro__sub { font-size: 15px; color: var(--fg-secondary); margin-top: 0; line-height: 1.5; }
.wiz-drop { margin-top: 22px; border: 1.5px dashed var(--koper-300); border-radius: var(--radius-lg); background: var(--koper-subtle); text-align: left; transition: all var(--dur-base) var(--ease-out); position: relative; overflow: hidden; }
.wiz-drop--drag { border-color: var(--koper); border-style: solid; background: rgba(217,123,61,0.07); box-shadow: 0 0 0 4px rgba(217,123,61,0.08); }
.wiz-drop__field { width: 100%; border: none; background: transparent; resize: none; outline: none; font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: var(--fg-primary); padding: 18px 18px 8px; min-height: 132px; display: block; }
.wiz-drop__field::placeholder { color: var(--fg-muted); }
.wiz-drop__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid rgba(217,123,61,0.12); }
.wiz-drop__tool { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--fg-secondary); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 11px; cursor: pointer; transition: all var(--dur-fast); }
.wiz-drop__tool:hover { border-color: var(--koper); color: var(--koper); background: var(--koper-subtle); }
.wiz-drop__tool svg { flex-shrink: 0; }
.wiz-drop__send { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--white); background: var(--koper); border: none; border-radius: var(--radius-sm); padding: 8px 16px; cursor: pointer; transition: all var(--dur-base) var(--ease-out); box-shadow: 0 1px 3px rgba(217,123,61,0.3); }
.wiz-drop__send:hover:not(:disabled) { background: var(--koper-hover); transform: translateY(-0.5px); box-shadow: 0 3px 10px rgba(217,123,61,0.32); }
.wiz-drop__send:disabled { background: var(--sand); color: var(--fg-muted); cursor: default; box-shadow: none; }
.wiz-intro__divider { display: flex; align-items: center; gap: 12px; margin: 22px auto 0; max-width: 380px; color: var(--fg-muted); font-size: 12.5px; }
.wiz-intro__divider::before, .wiz-intro__divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.wiz-intro__skip { background: none; border: none; font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--fg-secondary); cursor: pointer; padding: 9px 16px; border-radius: var(--radius-sm); margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; transition: all var(--dur-fast); }
.wiz-intro__skip:hover { background: var(--surface-active); color: var(--fg-primary); }

/* Extraction loader / done */
.wiz-extract { max-width: 460px; margin: 8px auto; text-align: center; padding: 30px 0; }
.wiz-extract__orb { width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: var(--koper-subtle); display: flex; align-items: center; justify-content: center; color: var(--koper); position: relative; }
.wiz-extract__orb::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--koper); border-right-color: var(--koper-glow); animation: spin 0.9s linear infinite; }
.wiz-extract__orb--ok { background: #E9F7EE; color: #16A34A; }
.wiz-extract__orb--ok::before { display: none; }
.wiz-extract__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--fg-primary); }
.wiz-extract__sub { font-size: 13.5px; color: var(--fg-tertiary); margin-top: 5px; }
.wiz-extract__steps { margin: 24px auto 0; max-width: 300px; display: flex; flex-direction: column; gap: 11px; text-align: left; }
.wiz-extract__step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg-muted); transition: color var(--dur-base); }
.wiz-extract__step--done { color: var(--fg-secondary); }
.wiz-extract__step--active { color: var(--fg-primary); font-weight: 500; }
.wiz-extract__check { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-active); color: var(--fg-muted); transition: all var(--dur-base); }
.wiz-extract__step--done .wiz-extract__check { background: var(--koper); color: var(--white); }
.wiz-extract__step--active .wiz-extract__check { background: var(--koper-subtle); color: var(--koper); }
.wiz-extract__spin { width: 12px; height: 12px; border: 2px solid rgba(217,123,61,0.25); border-top-color: var(--koper); border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; }

/* AI banner + duplicate hint */
.wiz-aibanner { padding: 13px 16px; background: linear-gradient(120deg, rgba(217,123,61,0.07), rgba(217,123,61,0.02)); border: 1px solid rgba(217,123,61,0.2); border-radius: var(--radius-md); margin-bottom: 22px; }
.wiz-aibanner__hd { display: flex; align-items: center; gap: 12px; }
.wiz-aibanner__icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--koper); color: var(--white); display: flex; align-items: center; justify-content: center; }
/* De kop is de knop: de teller slaat op alle stappen, dus je moet erbij kunnen. */
.wiz-aibanner__text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 2px 0; background: none; border: 0; font-family: var(--font-body); text-align: left; cursor: pointer; color: inherit; }
.wiz-aibanner__title { display: block; font-size: 13.5px; font-weight: 600; color: var(--fg-primary); }
.wiz-aibanner__sub { display: block; font-size: 12.5px; color: var(--fg-tertiary); margin-top: 1px; }
.wiz-aibanner__text > .wiz-aibanner__title { flex: 0 1 auto; }
.wiz-aibanner__chev { width: 7px; height: 7px; margin-left: auto; flex-shrink: 0; border-right: 1.7px solid var(--fg-tertiary); border-bottom: 1.7px solid var(--fg-tertiary); transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-fast); }
.wiz-aibanner.is-open .wiz-aibanner__chev { transform: translateY(1px) rotate(-135deg); }
.wiz-aibanner__btn { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--koper); background: var(--white); border: 1px solid rgba(217,123,61,0.3); border-radius: var(--radius-sm); padding: 7px 13px; cursor: pointer; white-space: nowrap; transition: all var(--dur-fast); }
.wiz-aibanner__btn:hover { background: var(--koper-subtle); }
.wiz-aibanner__panel { margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(217,123,61,0.18); }

/* Preview van de automatisch ingevulde velden, gegroepeerd per wizardstap. */
.wiz-aigroep + .wiz-aigroep { margin-top: 16px; }
.wiz-aigroep__kop { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.wiz-aigroep__naam { font-size: 12px; font-weight: 600; color: var(--fg-secondary); }
.wiz-aigroep__acties { margin-left: auto; display: flex; gap: 14px; }
.wiz-aigroep__link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--koper); cursor: pointer; }
.wiz-aigroep__link:hover { text-decoration: underline; }
.wiz-aiveld { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; padding: 5px 0; font-size: 12.5px; line-height: 1.45; border-top: 1px solid rgba(217,123,61,0.09); }
.wiz-aigroep__kop + .wiz-aiveld { border-top: 0; }
.wiz-aiveld__label { color: var(--fg-tertiary); }
.wiz-aiveld__waarde { color: var(--fg-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wiz-aiveld__waarde.leeg { color: var(--fg-tertiary); font-style: italic; }
@media (max-width: 640px) {
  .wiz-aiveld { grid-template-columns: 1fr; gap: 1px; }
  .wiz-aibanner__text { flex-wrap: wrap; }
}
.wiz-dup { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #FFF9F0; border: 1px solid #F0D9B8; border-radius: var(--radius-md); margin-bottom: 20px; font-size: 13px; color: var(--fg-secondary); }
.wiz-dup svg { color: #C9881F; flex-shrink: 0; }
.wiz-dup strong { color: var(--fg-primary); font-weight: 600; }
.wiz-dup__link { margin-left: auto; color: var(--koper); font-weight: 600; cursor: pointer; white-space: nowrap; }
.wiz-dup__link:hover { text-decoration: underline; }

/* Sections / fields */
.wiz-section { margin-bottom: 26px; }
.wiz-section:last-child { margin-bottom: 0; }
.wiz-section__label { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 13px; display: flex; align-items: center; gap: 8px; }
.wiz-section__label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.wiz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.wiz-field--full { grid-column: 1 / -1; }
.wiz-reveal { grid-column: 1 / -1; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--koper); background: none; border: none; cursor: pointer; padding: 4px 0; display: inline-flex; align-items: center; gap: 6px; justify-self: start; }
.wiz-reveal:hover { text-decoration: underline; }
.wiz-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.wiz-field__label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--fg-secondary); }
.wiz-field__req { color: var(--koper); }
.wiz-field__ai-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--koper); background: var(--koper-subtle); padding: 1px 6px; border-radius: 999px; cursor: pointer; transition: all var(--dur-fast); }
.wiz-field__ai-tag:hover { background: var(--koper); color: var(--white); }
.wiz-field input, .wiz-field select, .wiz-field textarea { font-family: var(--font-body); font-size: 14px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--fg-primary); outline: none; width: 100%; transition: all var(--dur-fast); }
.wiz-field input:focus, .wiz-field select:focus, .wiz-field textarea:focus { border-color: var(--koper); box-shadow: 0 0 0 3px rgba(217,123,61,0.1); }
.wiz-field textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.wiz-field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.wiz-field--ai input, .wiz-field--ai select, .wiz-field--ai textarea { border-color: rgba(217,123,61,0.4); background: rgba(217,123,61,0.035); }
.wiz-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wiz-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-body); font-size: 13px; color: var(--fg-secondary); background: var(--white); cursor: pointer; transition: all var(--dur-fast); }
.wiz-chip:hover { border-color: var(--koper); color: var(--koper); }
.wiz-chip--active { background: var(--koper); color: var(--white); border-color: var(--koper); font-weight: 500; }

/* Review */
.wiz-review { max-width: 660px; }
.wiz-review__card { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; background: var(--white); }
.wiz-review__card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #FCFBFA; border-bottom: 1px solid var(--border); }
.wiz-review__card-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--fg-primary); flex: 1; }
.wiz-review__card-icon { color: var(--koper); display: flex; }
.wiz-review__edit { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--koper); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 5px; }
.wiz-review__edit:hover { background: var(--koper-subtle); }
.wiz-review__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.wiz-review__row { background: var(--white); padding: 11px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wiz-review__row--full { grid-column: 1 / -1; }
.wiz-review__row-label { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg-muted); }
.wiz-review__row-value { font-size: 14px; color: var(--fg-primary); font-weight: 450; word-break: break-word; }
.wiz-review__empty { padding: 18px 16px; font-size: 13px; color: var(--fg-muted); text-align: center; }
.wiz-review__missing { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #FFF9F0; border: 1px solid #F0D9B8; border-radius: var(--radius-md); font-size: 13px; color: var(--fg-secondary); margin-bottom: 16px; }
.wiz-review__missing svg { color: #C9881F; flex-shrink: 0; }
.wiz-payload { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: #FCFBFA; }
.wiz-payload__toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; border: none; background: none; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--fg-secondary); text-align: left; }
.wiz-payload__toggle:hover { color: var(--fg-primary); }
.wiz-payload__endpoint { margin-left: auto; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; font-weight: 600; color: var(--koper); background: var(--koper-subtle); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.wiz-payload__code { margin: 0; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--deep-ink); color: #D6E2EC; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; line-height: 1.55; overflow-x: auto; white-space: pre; }
.wiz-payload__then { display: flex; align-items: center; gap: 6px; padding: 9px 16px 0; font-size: 12px; font-weight: 600; color: var(--fg-tertiary); }
.wiz-payload__note { padding: 10px 16px; font-size: 12px; color: var(--fg-tertiary); border-top: 1px solid var(--border); }

/* ── Campagnebeheer: status-toggle + auto-sync-indicator (campaigns.js) ──────
   .toggle-switch vervangt de losse play/pauze-iconen op campagne-, ad-set- en
   ad-niveau: één klikbaar element, staat komt uit de server-status (geen los
   checkbox-element), dus een geannuleerde confirm laat 'm gewoon terugveren. */
.toggle-switch {
  width: 36px; height: 20px; border-radius: 999px; border: none; flex-shrink: 0;
  background: var(--border-strong); cursor: pointer; position: relative;
  transition: background 180ms; padding: 0; display: inline-flex; align-items: center;
}
.toggle-switch--on { background: var(--badge-green-fg); }
.toggle-switch__knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform 180ms; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle-switch--on .toggle-switch__knob { transform: translateX(16px); }
.toggle-switch--sm { width: 30px; height: 17px; }
.toggle-switch--sm .toggle-switch__knob { width: 13px; height: 13px; top: 2px; left: 2px; }
.toggle-switch--sm.toggle-switch--on .toggle-switch__knob { transform: translateX(13px); }

/* Achtergrond-sync bij het openklikken van een Meta-campagne (mgmtOpenCampaign
   -> _mgmtAutoSyncCampaign): hergebruikt de bestaande .spin-animatie. */
.mgmt-sync-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-tertiary); }
.mgmt-sync-indicator__dot {
  width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--koper); border-radius: 50%;
}

/* ── Campagne-wizard (cw-*): campagne-specifiek, bovenop de .wiz*-shell ───────── */
.cw-grid-2 { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
.cw-input { width: 100%; margin: 4px 0 4px; padding: 9px 11px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--fg-primary); }
.cw-input:focus { outline: none; border-color: var(--koper); box-shadow: 0 0 0 3px var(--koper-subtle); }
textarea.cw-input { min-height: 110px; resize: vertical; }
.cw-charcount { font-size: 11px; color: var(--fg-tertiary); text-align: right; margin: 0 2px 10px; }
.cw-charcount--warn { color: var(--koper); font-weight: 600; }
.cw-airow { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 14px;
  border-radius: var(--radius-sm); background: var(--koper-subtle); color: var(--koper-hover); font-size: 12.5px; }
.cw-airow__icon { display: flex; color: var(--koper); }
.cw-airow__text { flex: 1; }
.cw-airow__btn { background: none; border: none; color: var(--koper-hover); font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; text-decoration: underline; }
.cw-preview-wrap { position: sticky; top: 0; }

/* Social preview (origineel ontwerp, geen 1-op-1 Facebook-UI) */
.cw-fb { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.cw-fb__top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.cw-fb__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.cw-fb__who { display: flex; flex-direction: column; line-height: 1.2; }
.cw-fb__name { font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.cw-fb__spons { font-size: 11px; color: var(--fg-tertiary); }
.cw-fb__body { padding: 0 12px 10px; font-size: 13px; line-height: 1.5; color: var(--fg-primary); }
/* De ingestelde aspect-ratio moet leidend blijven. Stond de overlaytekst in de
   normale flow, dan won die van aspect-ratio zodra hij niet paste: het vak rekte
   uit, waarna background-size:cover de foto op de hoogte schaalde en de
   zijkanten wegsneed (zichtbaar als een afgekapt beeld). De tekst ligt daarom in
   een absoluut gepositioneerde laag -- die kan de hoogte niet meer beinvloeden. */
.cw-fb__media { position: relative; background: linear-gradient(135deg, var(--steel), var(--navy));
  aspect-ratio: 4 / 5; overflow: hidden; }
.cw-fb__media-overlay { position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; flex-direction: column; }
.cw-fb__media--portrait { aspect-ratio: 4 / 5; }
.cw-fb__media-kop { color: #fff; font-weight: 700; font-size: 17px; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.cw-fb__sal { color: var(--koper-glow); font-weight: 700; font-size: 14px; margin-bottom: 4px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.cw-fb__link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-active); }
.cw-fb__link-text { flex: 1; min-width: 0; }
.cw-fb__link-head { font-size: 13px; font-weight: 600; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-fb__link-desc { font-size: 12px; color: var(--fg-tertiary); }
.cw-fb__cta { flex-shrink: 0; padding: 7px 12px; border-radius: var(--radius-sm); background: var(--navy);
  color: #fff; font-size: 12.5px; font-weight: 600; }

/* Stap 1: zoekveld + vacaturekaarten + voorgeselecteerd + lege staat */
.cw-vac-search { display: flex; align-items: center; gap: 8px; background: var(--white);
  border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; margin-bottom: 10px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.cw-vac-search:focus-within { border-color: var(--koper); box-shadow: 0 0 0 3px rgba(217,123,61,0.1); }
.cw-vac-search svg { color: var(--fg-muted); flex-shrink: 0; }
.cw-vac-search input { font-family: var(--font-body); font-size: 13.5px; border: none; background: transparent;
  color: var(--fg-primary); padding: 9px 0; outline: none; width: 100%; }
.cw-vac-search input::placeholder { color: var(--fg-muted); }
.cw-vac-cap { font-size: 12px; color: var(--fg-tertiary); margin: 0 0 10px; }
.cw-vac-none { font-size: 13px; color: var(--fg-tertiary); padding: 18px 2px; margin: 0; }
.cw-vac-list { display: flex; flex-direction: column; gap: 8px; }
.cw-vac { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer;
  font: inherit; transition: border-color 150ms, background 150ms; }
.cw-vac:hover { border-color: var(--border-strong); }
.cw-vac--active { border-color: var(--koper); background: var(--koper-subtle); }
.cw-vac__logo { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--navy);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }
.cw-vac__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cw-vac__title { font-size: 14.5px; font-weight: 600; color: var(--fg-primary); }
.cw-vac__meta { font-size: 12px; color: var(--fg-tertiary); }
.cw-vac__check { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: var(--koper); }
.cw-vac--active .cw-vac__check { background: var(--koper); color: #fff; }
.cw-preselect { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--koper-subtle); border: 1px solid var(--koper-glow); }
.cw-preselect__text { flex: 1; }
.cw-preselect__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--koper-hover); }
.cw-preselect__title { font-size: 14px; font-weight: 600; color: var(--fg-primary); }
.cw-preselect__change { background: none; border: none; color: var(--koper-hover); font: inherit; font-weight: 600;
  font-size: 13px; cursor: pointer; text-decoration: underline; }
.cw-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 8px; min-height: 280px; }
.cw-empty__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--surface-active); color: var(--fg-tertiary);
  display: flex; align-items: center; justify-content: center; }
.cw-empty__title { font-size: 16px; font-weight: 600; color: var(--fg-primary); }
.cw-empty__sub { font-size: 13px; color: var(--fg-secondary); max-width: 340px; }

/* AI-laad-/eindstaten */
.cw-gen { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 36px 0; }
.cw-gen__orb { width: 70px; height: 70px; border-radius: 50%; background: var(--koper-subtle); color: var(--koper);
  display: flex; align-items: center; justify-content: center; animation: cwPulse 1.6s ease-in-out infinite; }
.cw-gen__orb--ok { background: #E9F7EE; color: #16A34A; animation: none; }
.cw-gen__title { font-size: 16px; font-weight: 600; color: var(--fg-primary); }
.cw-gen__sub { font-size: 13px; color: var(--fg-secondary); max-width: 360px; }
.cw-gen__skeleton { width: 100%; max-width: 420px; height: 12px; border-radius: 6px; margin-top: 6px;
  background: linear-gradient(90deg, var(--surface-active) 25%, var(--border) 37%, var(--surface-active) 63%);
  background-size: 400% 100%; animation: cwShimmer 1.4s ease infinite; }
@keyframes cwPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .8; } }
@keyframes cwShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .cw-gen__orb, .cw-gen__skeleton { animation: none; } }

/* Notice (waarschuwing / fout) */
.cw-notice { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 14px;
  font-size: 13px; }
.cw-notice--warn { background: #FFF3E8; border: 1px solid var(--koper-glow); color: #8a5a2b; }
.cw-notice--error { background: #FEF2F2; border: 1px solid #f3c4c4; color: #9b2c2c; }
.cw-notice__icon { display: flex; flex-shrink: 0; }
.cw-notice__title { font-weight: 600; margin-bottom: 2px; color: var(--fg-primary); }
.cw-notice__body { color: var(--fg-secondary); }
.cw-notice__actions { display: flex; gap: 8px; margin-top: 10px; }

/* Sectie-kaart met voortgangsbadge */
.cw-sec { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 14px; overflow: hidden; }
.cw-sec__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-active); }
.cw-sec__icon { display: flex; color: var(--koper); }
.cw-sec__text { display: flex; flex-direction: column; flex: 1; }
.cw-sec__title { font-size: 13.5px; font-weight: 600; color: var(--fg-primary); }
.cw-sec__sub { font-size: 12px; color: var(--fg-tertiary); }
.cw-sec__badge { font-size: 12px; font-weight: 600; color: var(--koper-hover); }
.cw-sec__body { padding: 14px; }
.cw-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin-bottom: 14px; border-radius: var(--radius-sm);
  background: var(--koper-subtle); color: var(--fg-secondary); font-size: 12.5px; line-height: 1.5; }
.cw-note svg { color: var(--koper); flex-shrink: 0; margin-top: 1px; }

/* Locaties + straal-slider */
.cw-loc { display: grid; grid-template-columns: auto 1fr auto 130px auto; align-items: center; gap: 10px; padding: 8px 0; }
.cw-loc + .cw-loc { border-top: 1px solid var(--border); }
.cw-loc__pin { display: flex; color: var(--fg-tertiary); }
.cw-loc__name { font-size: 13.5px; font-weight: 500; color: var(--fg-primary); }
.cw-loc__rad { font-size: 12px; font-weight: 600; color: var(--koper-hover); white-space: nowrap; }
.cw-loc__del { background: none; border: none; cursor: pointer; color: var(--fg-tertiary); display: flex; padding: 4px; border-radius: 6px; }
.cw-loc__del:hover { color: var(--badge-red-fg); background: var(--badge-red-bg); }
.cw-loc-empty { font-size: 13px; color: var(--fg-tertiary); padding: 4px 0 10px; }
.cw-loc-add { display: flex; gap: 8px; margin-top: 10px; }
.cw-loc-add .cw-input { margin: 0; }
.cw-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px; background: var(--sand, #E8DED3); outline: none; }
.cw-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 19px; height: 19px; border-radius: 50%; background: var(--koper); border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; }
.cw-slider::-moz-range-thumb { width: 19px; height: 19px; border-radius: 50%; background: var(--koper); border: 3px solid #fff; cursor: pointer; }

/* Budget */
.cw-eur-input { display: flex; align-items: center; gap: 6px; }
.cw-eur-input svg { color: var(--fg-tertiary); }
.cw-eur-input .cw-input { margin: 0; }
.cw-budget-presets { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cw-budget-preset { padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 13px; cursor: pointer; color: var(--fg-secondary); }
.cw-budget-preset--active { border-color: var(--koper); background: var(--koper-subtle); color: var(--koper-hover); font-weight: 600; }
.cw-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cw-cost { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-top: 4px; }
.cw-cost__head { padding: 10px 14px; background: var(--navy); color: #fff; }
.cw-cost__head-title { font-size: 13px; font-weight: 600; }
.cw-cost__rows { padding: 6px 14px; }
.cw-cost__row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; color: var(--fg-secondary); }
.cw-cost__row-val { font-weight: 600; color: var(--fg-primary); }
.cw-cost__row--total { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 10px; }
.cw-cost__row--total .cw-cost__row-val { font-size: 22px; color: var(--koper); }
.cw-cost__est { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-tertiary); background: var(--surface-active); }

/* Creative: dropzone + overlay-toggles + formaat-tabs */
.cw-drop-img { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  padding: 28px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); cursor: pointer; }
.cw-drop-img:hover { border-color: var(--koper); background: var(--koper-subtle); }
.cw-drop-img__icon { color: var(--koper); }
.cw-drop-img__title { font-size: 13.5px; font-weight: 600; color: var(--fg-primary); }
.cw-drop-img__sub { font-size: 12px; color: var(--fg-tertiary); }
.cw-drop-done { display: flex; align-items: center; gap: 12px; }
.cw-drop-thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--surface-active) center/cover no-repeat; }
.cw-drop-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cw-drop-name { font-size: 13.5px; font-weight: 500; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-drop-sub { font-size: 12px; color: var(--fg-tertiary); }
.cw-toggle { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; }
.cw-toggle input { display: none; }
.cw-toggle__track { width: 40px; height: 23px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background 150ms; flex-shrink: 0; }
.cw-toggle__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform 150ms; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.cw-toggle input:checked + .cw-toggle__track { background: var(--koper); }
.cw-toggle input:checked + .cw-toggle__track::after { transform: translateX(17px); }
.cw-toggle__label { font-size: 13.5px; color: var(--fg-primary); }
.cw-format-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.cw-format-tab { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font: inherit; }
.cw-format-tab--active { border-color: var(--koper); background: var(--koper-subtle); }
.cw-format-tab__label { font-size: 12.5px; font-weight: 600; color: var(--fg-primary); }
.cw-format-tab__sub { font-size: 11px; color: var(--fg-tertiary); }

/* Preview-media-varianten + foto + veilige zones */
.cw-fb__media--square { aspect-ratio: 1 / 1; }
.cw-fb__media--story { aspect-ratio: 9 / 16; }
.cw-fb__media--wide { aspect-ratio: 1.91 / 1; }
.cw-fb__media--photo { background-size: cover; background-position: center; }
.cw-fb__safe { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 6px, transparent 6px 12px); pointer-events: none; }
.cw-fb__safe--top { top: 0; height: 14%; }
.cw-fb__safe--bottom { bottom: 0; height: 20%; }

/* Ad-bewerkscherm als werkblad (PR 3): sectiekaarten in de cmp-designtaal
   links, live feed-preview rechts (zelfde .cw-fb-kaart als de wizard-preview).
   De modal draait sinds PR 3 onder .cmp-scope; kop/voet komen uit de gedeelde
   .mhead/.mbody/.mfoot-omlijsting. */
.ae-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.ae-editor { display: flex; flex-direction: column; gap: 16px; }
.ae-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--cmp-shadow-card); padding: 16px 18px; }
.ae-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ae-section__title { font-family: 'DM Sans'; font-size: 14px; font-weight: 600; color: var(--fg-primary); }
.ae-sub { margin-bottom: 14px; }
.ae-sub:last-child { margin-bottom: 0; }
.ae-sub__title { font-size: 12.5px; font-weight: 600; color: var(--fg-secondary); margin-bottom: 6px; }
.ae-dest-link { font-size: 13.5px; color: var(--fg-secondary); word-break: break-all; }
.ae-var-list { display: flex; flex-direction: column; gap: 8px; }
.ae-var-row { display: flex; gap: 6px; align-items: flex-start; }
.ae-var-input { flex: 1; width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg-primary); resize: vertical; }
textarea.ae-var-input { min-height: 60px; }
.ae-var-input:focus { outline: none; border-color: var(--koper); box-shadow: 0 0 0 3px var(--koper-subtle); }
.ae-var-remove { background: none; border: none; cursor: pointer; color: var(--fg-tertiary); font-size: 18px; line-height: 1; padding: 6px 8px; border-radius: 6px; flex-shrink: 0; }
.ae-var-remove:hover { color: var(--badge-red-fg); background: var(--badge-red-bg); }
.ae-var-add { margin-top: 8px; background: none; border: none; color: var(--koper-hover); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }
.ae-var-add:hover { text-decoration: underline; }
.ae-cta-select { width: 100%; padding: 9px 11px; font: inherit; font-size: 13.5px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg-primary); cursor: pointer; }
.ae-preview-col { position: sticky; top: 0; display: flex; flex-direction: column; gap: 16px; }
.ae-preview-col__label { font-size: 12px; font-weight: 600; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.ae-preview { display: flex; flex-direction: column; gap: 16px; }
.ae-preview__block--story .cw-fb { max-width: 220px; margin: 0 auto; }
/* Bevestigingsvraag in de .mfoot (leerfase-confirm); .ae-actions zelf is met
   PR 3 vervangen door de gedeelde .mfoot. */
.ae-actions__ask { margin-right: auto; font-size: 12.5px; color: var(--fg-secondary); align-self: center; }

/* Beeld wijzigen + leerfase-waarschuwing (creative-swap naar Meta) */
.ae-file { font: inherit; font-size: 12.5px; color: var(--fg-secondary); }
.ae-toggles { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 8px; }
.ae-toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-secondary); cursor: pointer; }
/* "Beeld is al af": overstemt de drie losse overlay-toggles, dus zwaarder gezet. */
.ae-toggle--primary { margin: 10px 0 4px; font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.ae-hint { font-size: 12px; color: var(--fg-tertiary); margin-top: 6px; line-height: 1.45; }
.ae-hint--error { color: var(--badge-red-fg); }
.ae-warn { border: 1px solid var(--badge-amber-fg, var(--border)); background: var(--badge-amber-bg, var(--surface-alt)); color: var(--fg-primary); border-radius: var(--radius-md); padding: 11px 13px; font-size: 12.5px; line-height: 1.5; }
.ae-preview__notes { margin: 10px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--fg-tertiary); line-height: 1.5; }
.ae-preview__notes li + li { margin-top: 5px; }

@media (max-width: 768px) {
  .ae-grid { grid-template-columns: 1fr; }
  .ae-preview-col { position: static; }
}

/* Review: platform-keuze + eindactie + gepubliceerd-orb */
.cw-foot-actions { display: flex; gap: 10px; }
.cw-btn-publish { background: var(--navy); border-color: var(--navy); color: #fff; }
.cw-btn-publish:hover:not(:disabled) { background: var(--deep-ink); }
.cw-plat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-tertiary); margin: 22px 0 8px; }
.cw-plats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cw-plat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.cw-plat--active { border-color: var(--koper); background: var(--koper-subtle); }
.cw-plat--soon { opacity: .55; }
.cw-plat__logo { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.cw-plat__text { display: flex; flex-direction: column; flex: 1; }
.cw-plat__name { font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.cw-plat__tag { font-size: 11px; color: var(--fg-tertiary); }
.cw-plat__flag { font-size: 11px; font-weight: 600; color: var(--fg-tertiary); display: flex; }
.cw-plat--active .cw-plat__flag { color: var(--koper); }
.cw-gen__orb--pub { background: #EAF4FB; color: #1877F2; animation: none; }

@media (max-width: 768px) {
  .cw-grid-2 { grid-template-columns: 1fr; }
  .cw-preview-wrap { position: static; }
  .wiz__steps { overflow-x: auto; }
  .cw-loc { grid-template-columns: auto 1fr auto; }
  .cw-loc .cw-slider { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .wiz { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .wiz-overlay { padding: 0; }
  .wiz-grid, .wiz-review__rows { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .wiz-overlay, .wiz, .wiz__screen { animation: none; }
  .wiz-btn--primary:hover:not(:disabled), .wiz-drop__send:hover:not(:disabled) { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   Privacy / AVG-tab in kandidaatdetail (design handoff Blynckr OS-6)
   Fase 1: bewaarstatus-hero, netwerkbestand-acties, toestemmings-logboek.
   ══════════════════════════════════════════════════════════════ */
.avg { display: flex; flex-direction: column; gap: 14px; }

.avg-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}

.avg-hero { padding: 22px 24px; }
.avg-hero__top { display: flex; align-items: flex-start; gap: 16px; }
.avg-hero__icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.avg-hero__icon--ok      { background: rgba(31,138,91,0.10); color: #1F8A5B; }
.avg-hero__icon--warn    { background: rgba(180,83,9,0.10);  color: #B45309; }
.avg-hero__icon--bad     { background: rgba(179,38,30,0.08); color: #B3261E; }
.avg-hero__icon--neutral { background: var(--surface-active); color: var(--fg-tertiary); }
.avg-hero__icon--placed  { background: rgba(23,56,79,0.08);  color: var(--navy); }
.avg-hero__title-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.avg-hero__title-row .avg-pill { flex-shrink: 0; }
.avg-hero__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--fg-primary); }
.avg-hero__sub { font-size: 13.5px; color: var(--fg-secondary); margin-top: 4px; max-width: 640px; }

.avg-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 99px;
}
.avg-pill__dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.avg-pill--ok      { background: rgba(31,138,91,0.10); color: #1F7A50; }
.avg-pill--warn    { background: rgba(180,83,9,0.10);  color: #A34A08; }
.avg-pill--bad     { background: rgba(179,38,30,0.08); color: #A62822; }
.avg-pill--neutral { background: var(--surface-active); color: var(--fg-secondary); }
.avg-pill--placed  { background: rgba(23,56,79,0.08);  color: var(--navy); }

.avg-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px;
}
.avg-fact { padding: 0 20px; border-left: 1px solid var(--border); }
.avg-fact:first-child { padding-left: 0; border-left: none; }
@media (max-width: 720px) {
  .avg-facts { grid-template-columns: 1fr; gap: 12px; }
  .avg-fact { padding: 0; border-left: none; }
  .avg-hero__top { flex-direction: column; gap: 10px; }
}
.avg-fact__label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); }
.avg-fact__value { font-size: 14px; font-weight: 560; color: var(--fg-primary); margin-top: 3px; }
.avg-fact__value small { font-weight: 450; color: var(--fg-tertiary); font-size: 12.5px; }

.avg-bar { margin-top: 18px; }
.avg-bar__track { position: relative; height: 6px; border-radius: 99px; background: var(--surface-active); overflow: visible; }
.avg-bar__fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; }
.avg-bar__fill--ok   { background: #2AA06B; }
.avg-bar__fill--warn { background: #D97706; }
.avg-bar__fill--bad  { background: #C2382F; }
.avg-bar__today {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 99px; background: var(--white);
  border: 3px solid var(--fg-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.avg-bar__labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--fg-tertiary); }
.avg-bar__labels b { color: var(--fg-primary); font-weight: 560; }

.avg-section { padding: 20px 24px; }
.avg-section__title { font-family: var(--font-display); font-size: 14.5px; font-weight: 650; color: var(--fg-primary); margin-bottom: 4px; }
.avg-section__desc { font-size: 13px; color: var(--fg-tertiary); margin-bottom: 14px; max-width: 620px; }

.avg-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avg-btn {
  font-family: var(--font-body); font-size: 13px; font-weight: 520;
  padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; transition: all 0.15s var(--ease-out);
}
.avg-btn--primary { background: var(--fg-primary); color: var(--white); }
.avg-btn--primary:hover { background: #000; }
.avg-btn--wa { background: #1FA855; color: #fff; }
.avg-btn--wa:hover { background: #179248; }
.avg-btn--secondary { background: var(--white); color: var(--fg-secondary); border-color: var(--border-strong); }
.avg-btn--secondary:hover { background: var(--surface-active); }
.avg-btn--danger-ghost { background: none; color: #A62822; border-color: transparent; }
.avg-btn--danger-ghost:hover { background: rgba(179,38,30,0.06); }

.avg-manual {
  margin-top: 14px; padding: 16px; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md); background: var(--bg);
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  animation: avgReveal 0.22s var(--ease-out);
}
@keyframes avgReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.avg-manual .form-group { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.avg-manual label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-tertiary); }
.avg-manual select, .avg-manual input {
  font-family: var(--font-body); font-size: 13px; color: var(--fg-primary);
  padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--white); outline: none;
}
.avg-manual select:focus, .avg-manual input:focus { border-color: var(--koper); box-shadow: 0 0 0 3px var(--koper-subtle); }
.avg-manual__hint { flex-basis: 100%; font-size: 12px; color: var(--fg-tertiary); margin-top: -2px; }
.avg-manual__spacer { flex: 1; }

.avg-log { display: flex; flex-direction: column; }
.avg-log__item { display: flex; gap: 12px; padding: 9px 0; }
.avg-log__item + .avg-log__item { border-top: 1px solid var(--border); }
.avg-log__icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-active); color: var(--fg-tertiary);
}
.avg-log__icon--ok  { background: rgba(31,138,91,0.10); color: #1F8A5B; }
.avg-log__icon--bad { background: rgba(179,38,30,0.08); color: #B3261E; }
.avg-log__text { font-size: 13px; color: var(--fg-primary); line-height: 1.45; }
.avg-log__text small { display: block; font-size: 12px; color: var(--fg-tertiary); margin-top: 1px; }
.avg-log__empty { font-size: 13px; color: var(--fg-muted); padding: 6px 0 2px; }

.avg-footer {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 24px; border-top: 1px solid var(--border);
  background: var(--bg); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.avg-footer__note { font-size: 12px; color: var(--fg-muted); margin-right: auto; }
.avg-link {
  font-size: 12.5px; font-weight: 520; color: var(--fg-secondary);
  background: none; border: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 5px;
}
.avg-link:hover { color: var(--fg-primary); }
.avg-link--danger { color: #A62822; }
.avg-link--danger:hover { color: #7E1E19; }

.avg-card--muted { opacity: 0.92; }
.avg-callout {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-radius: var(--radius-md);
  background: rgba(23,56,79,0.05); border: 1px solid rgba(23,56,79,0.10);
  font-size: 12.5px; color: var(--navy); margin-bottom: 14px; max-width: 640px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Opvolgflow-builder (wfb) — Instellingen → WhatsApp automatisering
   Design: design_handoff_opvolgflow_builder (variant A + Overzicht-frame).
   Gebruikt de bestaande tokens; geen eigen kleurwaarden buiten het design.
   ══════════════════════════════════════════════════════════════════════════ */

/* — Gedeelde modifiers — */
.wa-modal--wide { width: 560px; border-radius: 16px; }
.wa-switch--sm { width: 30px; height: 18px; flex-shrink: 0; }
.wa-switch--sm .wa-switch__knob { width: 13px; height: 13px; top: 2.5px; left: 2.5px; }
.wa-switch--sm.wa-switch--on .wa-switch__knob { transform: translateX(12px); }

/* — Overzicht (flowlijst) — */
.wfb-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.wfb-list__head { display: flex; align-items: center; justify-content: space-between; }
.wfb-row {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer; transition: border-color 150ms, box-shadow 150ms; text-align: left;
  color: var(--fg-tertiary);
}
.wfb-row:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(13,31,51,0.07); }
.wfb-row__icon {
  width: 38px; height: 38px; border-radius: 11px; background: rgba(23,56,79,0.06);
  display: flex; align-items: center; justify-content: center; color: var(--navy); flex-shrink: 0;
}
.wfb-row__main { flex: 1; min-width: 0; }
.wfb-row__name {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--fg-primary);
}
.wfb-row__desc {
  display: flex; align-items: center; gap: 7px; margin-top: 4px;
  font-size: 12px; color: var(--fg-tertiary); flex-wrap: wrap;
}
.wfb-row__meta { font-size: 11.5px; color: var(--fg-quaternary); white-space: nowrap; }
.wfb-pill {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
.wfb-pill--active { color: #15803D; background: rgba(22,163,74,0.09); }
.wfb-pill--test { color: #C2540A; background: rgba(249,115,22,0.10); }
.wfb-pill--off { color: var(--fg-tertiary); background: rgba(0,0,0,0.05); }
.wfb-tplchip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 999px; background: rgba(23,56,79,0.06); color: var(--navy);
  font-size: 11px; font-weight: 600;
}

/* — Nieuwe-opvolgflow-modal — */
.wfb-modal__intro { font-size: 12.5px; color: var(--fg-secondary); margin: 0 0 14px; line-height: 1.5; }
.wfb-tplpick { display: flex; flex-direction: column; gap: 8px; }
.wfb-radio {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); cursor: pointer; transition: border-color 150ms;
}
.wfb-radio:hover { border-color: var(--border-strong); }
.wfb-radio--on { border-color: var(--koper); box-shadow: 0 0 0 3px rgba(217,123,61,0.10); }
.wfb-radio__dot {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong);
  margin-top: 2px; flex-shrink: 0; transition: border-color 150ms, box-shadow 150ms;
}
.wfb-radio--on .wfb-radio__dot { border-color: var(--koper); box-shadow: inset 0 0 0 3.5px var(--surface); background: var(--koper); }
.wfb-radio__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wfb-radio__name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--fg-primary); }
.wfb-radio__preview {
  font-size: 12px; color: var(--fg-tertiary); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line;
}
.wfb-note {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding: 10px 12px;
  border-radius: var(--radius-md); background: rgba(217,123,61,0.08); color: #8a4a1f;
  font-size: 12px; line-height: 1.5;
}
.wfb-note svg { flex-shrink: 0; margin-top: 1px; color: var(--koper); }

/* — Builder: frame + header — */
.wfb { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.wfb-header {
  display: flex; align-items: center; gap: 14px; padding: 13px 20px;
  background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.wfb-header__title { flex: 1; min-width: 200px; }
.wfb-header__name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--fg-primary); }
.wfb-header__meta { font-size: 11.5px; color: var(--fg-tertiary); margin-top: 2px; }
.wfb-seg {
  display: inline-flex; gap: 2px; padding: 3px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
}
.wfb-seg__btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: none; background: transparent; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 500; color: var(--fg-tertiary); transition: background 150ms;
}
.wfb-seg__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.4; }
.wfb-seg__btn--on { font-weight: 600; }
.wfb-seg__btn--on .wfb-seg__dot { opacity: 1; }
.wfb-seg__btn--active { background: rgba(22,163,74,0.10); color: #15803D; }
.wfb-seg__btn--test { background: rgba(249,115,22,0.10); color: #C2540A; }
.wfb-seg__btn--off { background: rgba(0,0,0,0.06); color: var(--fg-secondary); }
.wfb-seg__dot--active { color: #16A34A; }
.wfb-seg__dot--test { color: #F97316; }
.wfb-seg__dot--off { color: var(--fg-quaternary); }

/* Volledig scherm (13-08): eigen laag over de hele viewport, zelfde patroon
   als het kandidaatdossier. z-index 95: boven de mobiele topbar (90), onder
   modals en confirms (1100) zodat een bevestigingsdialoog bereikbaar blijft.
   De builder-markup (.wfb, height 100%) vult de laag; alleen de canvas
   scrolt. */
.wfb-page { position: fixed; inset: 0; z-index: 95; background: var(--bg); }

/* — Canvas — */
.wfb-canvas {
  flex: 1; overflow: auto; padding: 26px;
  background: var(--bg) radial-gradient(rgba(23,56,79,0.07) 1px, transparent 1.2px) 0 0/18px 18px;
}
.wfb-col { display: flex; flex-direction: column; align-items: center; min-width: fit-content; }
.wfb-card {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(13,31,51,0.05);
}
.wfb-card--narrow { max-width: 470px; }
.wfb-card--wide { max-width: 640px; }
.wfb-flowwide { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; margin-top: 26px; }
.wfb-cap {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fg-quaternary);
}
.wfb-cap--row { flex-wrap: wrap; }
.wfb-zap {
  width: 24px; height: 24px; border-radius: 50%; background: rgba(217,123,61,0.12);
  color: var(--koper); display: inline-flex; align-items: center; justify-content: center;
}
.wfb-madlib { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wfb-madlib__word { font-size: 13px; color: var(--fg-secondary); }
.wfb-select {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--navy);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 9px; outline: none; max-width: 100%;
}
.wfb-select:focus { border-color: var(--koper); }
.wfb-select--inline { padding: 3px 6px; font-size: 11.5px; font-weight: 600; }
.wfb-num {
  width: 62px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--navy);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; outline: none;
}
.wfb-num:focus { border-color: var(--koper); }
.wfb-num--xs { width: 50px; padding: 3px 6px; font-size: 11.5px; }
.wfb-hintline {
  display: flex; gap: 7px; align-items: flex-start; margin-top: 10px;
  font-size: 11.5px; color: var(--fg-tertiary); line-height: 1.5;
}
.wfb-hintline svg { flex-shrink: 0; margin-top: 1px; color: var(--koper); }

/* — Openingsbericht — */
.wfb-bubble {
  background: var(--navy); color: #fff; border-radius: 12px; border-top-left-radius: 4px;
  padding: 13px 15px; font-size: 13px; line-height: 1.55; white-space: pre-line;
}
.wfb-var { color: #F2C4A0; font-weight: 600; }
.wfb-bubble__empty { color: var(--mist); font-style: italic; }
.wfb-chiprow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.wfb-chip {
  padding: 5px 12px; border-radius: 8px; background: var(--bg);
  border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--navy);
}
.wfb-fan {
  margin: 18px 0 14px; padding: 5px 14px; border: 1.5px dashed var(--border-strong);
  border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--fg-tertiary);
  background: var(--surface);
}

/* — Takken-grid — */
.wfb-branches { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(300px, 340px)); gap: 20px; justify-content: center; }
.wfb-branch { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.wfb-branchchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px;
  background: var(--navy); color: #fff; border-radius: 10px; font-size: 12.5px; font-weight: 600;
}
.wfb-branchchip__n { font-size: 10.5px; font-weight: 500; opacity: 0.75; margin-left: 3px; }
.wfb-conn { display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.wfb-conn__line { width: 2px; height: 11px; background: var(--border-strong); }
.wfb-delaywrap { position: relative; display: inline-flex; }
.wfb-delay {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 10.5px; font-weight: 600; color: var(--fg-secondary); cursor: pointer;
}
.wfb-delay:hover { border-color: var(--border-strong); }
.wfb-delay--warn { border-color: rgba(180,83,9,0.4); color: #B45309; background: #FFFBEB; }

/* — Popovers — */
.wfb-pop-overlay { position: fixed; inset: 0; z-index: 60; }
.wfb-pop {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  z-index: 61; width: 230px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px; box-shadow: 0 12px 32px rgba(13,31,51,0.14); text-align: left;
}
.wfb-pop--add { width: 265px; }
.wfb-pop__title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-quaternary); padding: 4px 9px 7px; }
.wfb-pop__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 7px 9px; border: none; background: transparent; border-radius: 8px;
  font-size: 12.5px; color: var(--fg-primary); cursor: pointer; text-align: left;
}
.wfb-pop__item:hover { background: var(--surface-active); }
.wfb-pop__item--rich { justify-content: flex-start; align-items: flex-start; }
.wfb-pop__icon { color: var(--koper); flex-shrink: 0; margin-top: 2px; }
.wfb-pop__main { display: flex; flex-direction: column; gap: 2px; }
.wfb-pop__lbl { font-weight: 600; font-size: 12.5px; }
.wfb-pop__desc { font-size: 11px; color: var(--fg-tertiary); line-height: 1.4; }
.wfb-pop__custom { display: flex; gap: 6px; align-items: center; padding: 6px 9px; }
.wfb-pop__apply {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: none; border-radius: 8px; background: var(--deep-ink); color: #fff; cursor: pointer;
}
.wfb-pop__note { font-size: 10.5px; color: var(--fg-quaternary); line-height: 1.5; padding: 7px 9px 4px; border-top: 1px solid var(--border); margin-top: 5px; }
.wfb-pop__warntext { display: flex; gap: 5px; margin-top: 6px; color: #B45309; }

/* — Stap-kaarten — */
.wfb-step {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(13,31,51,0.05);
  text-align: left;
}
.wfb-step--off { opacity: 0.55; }
.wfb-step__head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.wfb-step__num {
  width: 20px; height: 20px; border-radius: 50%; background: rgba(23,56,79,0.08);
  color: var(--navy); font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wfb-step__kind { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--fg-secondary); flex: 1; min-width: 0; }
.wfb-skipped {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,0.06); color: var(--fg-tertiary);
}
.wfb-step__tools { display: inline-flex; gap: 2px; opacity: 0; transition: opacity 150ms; }
.wfb-step:hover .wfb-step__tools { opacity: 1; }
/* Op touch is er geen hover: bewerk-/verwijderknoppen permanent zichtbaar */
@media (hover: none) { .wfb-step__tools { opacity: 1; } }
.wfb-step__text {
  width: 100%; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--fg-primary);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 9px 11px; outline: none; resize: vertical; white-space: pre-wrap; transition: border-color 150ms;
}
.wfb-step__text:focus { border-color: var(--koper); box-shadow: 0 0 0 3px rgba(217,123,61,0.1); background: var(--surface); }
/* Engelse variant (F5): visueel ondergeschikt aan de Nederlandse basis, met een
   EN-vlaggetje in de hoek zodat nooit onduidelijk is welk veld welke taal is. */
.wfb-step__text--en { margin-top: 6px; border-style: dashed; background: var(--surface-alt); }
.wfb-step__text--en::placeholder { font-style: italic; }
.wfb-opt--en { opacity: 0.85; }
.wfb-opt--en .wfb-opt__input { border-style: dashed; background: var(--surface-alt); }
/* Aan-stand van de EN-toggle in de kop: koper-accent zodat de actieve taalstand
   in één oogopslag zichtbaar is (uit-stand heeft de gewone knop-styling). */
.wfb-enbtn--on { background: var(--koper-subtle); border-color: var(--koper); color: var(--koper); font-weight: 600; }
/* Taklabel-chips in EN-stand: NL-label -> invoer voor het Engelse chatlabel. */
.wfb-chip--en { display: inline-flex; align-items: center; gap: 4px; }
.wfb-chip__input {
  font-size: 11.5px; padding: 2px 8px; border: 1px dashed var(--border); border-radius: 999px;
  background: var(--surface-alt); outline: none; min-width: 110px;
}
.wfb-chip__input:focus { border-color: var(--koper); }
.wfb-hintline--warn { color: #B45309; }
.wfb-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.wfb-opt { display: flex; align-items: center; gap: 8px; }
.wfb-opt__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--koper); flex-shrink: 0; }
.wfb-opt__input {
  flex: 1; min-width: 0; font-family: var(--font-body); font-size: 12px; color: var(--fg-primary);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; outline: none;
}
.wfb-opt__input:focus { border-color: var(--koper); }
.wfb-optadd {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  padding: 4px 9px; border: 1px dashed var(--border-strong); border-radius: 8px;
  background: transparent; font-size: 11px; font-weight: 600; color: var(--fg-tertiary); cursor: pointer;
}
.wfb-optadd:hover { color: var(--koper); border-color: var(--koper); }
.wfb-wait {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px;
  padding: 7px 9px; border-radius: 8px; background: var(--bg);
  font-size: 11px; color: var(--fg-tertiary);
}
.wfb-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--fg-secondary); }
.wfb-line--warn { border-top: 1px dashed var(--border); padding-top: 9px; color: #B45309; }
.wfb-line--warn > svg { color: #B45309; flex-shrink: 0; }
.wfb-line > svg { flex-shrink: 0; }
.wfb-line__word { font-size: 11.5px; }
.wfb-line__strong { font-weight: 700; color: var(--fg-primary); }
.wfb-line__muted { color: var(--fg-quaternary); font-size: 11px; }
.wfb-line__input {
  flex-basis: 100%; font-family: var(--font-body); font-size: 11.5px; color: var(--fg-primary);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; outline: none;
}
.wfb-line__input:focus { border-color: var(--koper); }

/* — Stap toevoegen + stop-blok — */
.wfb-addwrap { position: relative; display: inline-flex; }
.wfb-add {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  border: 1.5px dashed var(--border-strong); border-radius: 999px; background: transparent;
  font-size: 11.5px; font-weight: 600; color: var(--fg-tertiary); cursor: pointer;
}
.wfb-add:hover { color: var(--koper); border-color: var(--koper); }
.wfb-stop {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--deep-ink); color: #fff; border-radius: 12px; padding: 10px 13px;
  box-shadow: 0 2px 8px rgba(13,31,51,0.18);
}
.wfb-stop__flag {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.12);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wfb-stop__text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wfb-stop__text strong { font-size: 12px; }
.wfb-stop__text span { font-size: 10.5px; opacity: 0.75; }
.wfb-stop__tools { display: inline-flex; gap: 2px; }
.wfb-ghost { width: 100%; margin-top: 10px; opacity: 0.38; filter: saturate(0.4); pointer-events: none; display: flex; flex-direction: column; gap: 8px; }
.wfb-ghostlabel { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-tertiary); }

/* — Veiligheidsvoet — */
.wfb-safety {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin: 26px 0 8px;
  font-size: 11.5px; color: var(--fg-tertiary);
}
.wfb-safety span { display: inline-flex; align-items: center; gap: 5px; }
.wfb-safety svg { color: #16A34A; }

/* — Compacte ghost-icoonknoppen (stap-tools, stop-blok, zoomer) — */
.wfb-iconbtn {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 6px;
  color: var(--fg-quaternary); cursor: pointer; padding: 0; transition: background 150ms, color 150ms;
}
.wfb-iconbtn:hover { background: rgba(0,0,0,0.06); color: var(--fg-primary); }
.wfb-iconbtn:disabled { opacity: 0.3; cursor: default; background: transparent; }
.wfb-iconbtn--del:hover { background: var(--badge-red-bg, #FEF2F2); color: var(--badge-red-fg, #DC2626); }
.wfb-stop .wfb-iconbtn { color: rgba(255,255,255,0.75); }
.wfb-stop .wfb-iconbtn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.wfb-stop .wfb-iconbtn:disabled { color: rgba(255,255,255,0.75); }

/* — Canvas-zoom (rechtsonder, zwevend boven het scrollgebied) — */
.wfb { position: relative; }
.wfb-zoomer {
  position: absolute; right: 18px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 4px 14px rgba(13,31,51,0.10);
}
.wfb-zoomer__pct {
  min-width: 38px; text-align: center; font-size: 11px; font-weight: 600;
  color: var(--fg-secondary); font-variant-numeric: tabular-nums;
}
.wfb-zoomer__fit {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border: none; border-radius: 999px; background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--fg-tertiary);
}
.wfb-zoomer__fit:hover { background: rgba(0,0,0,0.06); color: var(--fg-primary); }

/* ============================================================
   Taken: centrale lijst van opgeslagen taken + de stateloze
   WhatsApp-werkvoorraad. De opbouw volgt Kandidaten v2: pills,
   gedeelde filter- en lijstbalk, vullende tabel en mobiele kaarten.
   ============================================================ */
.taken-page { --taken-shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.03); }
.taken-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
@media (min-width: 761px) {
}
.listbar__sort {
  padding: 5px 8px; border: 0; border-radius: 6px; background: transparent;
  color: var(--fg-secondary); cursor: pointer; font: inherit; font-size: 12px;
}
.listbar__sort:hover { background: var(--surface-hover); }
.listbar__sort span { color: var(--koper); }

.taken-table-wrap {
  overflow-x: auto; background: var(--surface); border-radius: 14px;
  box-shadow: var(--taken-shadow-sm); scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.15) transparent;
}
.taken-table { width: 100%; min-width: 880px; border-collapse: collapse; }
.taken-col-select { width: 42px; }
.taken-col-task { width: 31%; }
.taken-col-type { width: 12%; }
.taken-col-context { width: 20%; }
.taken-col-source { width: 10%; }
.taken-col-owner { width: 12%; }
.taken-col-due { width: 10%; }
.taken-col-more { width: 40px; }
.taken-table tbody td {
  max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom-color: var(--border); vertical-align: middle;
}
.taken-row { cursor: pointer; }
.taken-row.is-selected { background: rgba(217,123,61,.06); }
.taken-row.is-bulk-selected, .taken-card.is-bulk-selected { background: rgba(217,123,61,.09); }
.taken-select-cell { width: 42px; padding-right: 0; text-align: center; }
.taken-select-cell input, .taken-card__select {
  width: 16px; height: 16px; accent-color: var(--koper); cursor: pointer;
}
.taken-row:focus-visible, .taken-card:focus-visible {
  outline: 2px solid var(--koper); outline-offset: -2px;
}
.taken-row-more { color: var(--fg-muted); text-align: right; font-size: 20px; }
.taken-page .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.taken-task-cell { min-width: 0; display: flex; align-items: center; gap: 10px; }
.taken-avatar {
  flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 999px;
  background: linear-gradient(135deg,#e3edf5,#b8cde0); color: var(--navy);
  font-size: 11px; font-weight: 700;
}
.taken-avatar--large { flex-basis: 44px; width: 44px; height: 44px; font-size: 13px; }
.taken-task-copy { min-width: 0; display: flex; flex-direction: column; }
.taken-task-copy strong, .taken-task-copy small,
.taken-cell-main, .taken-cell-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taken-task-copy strong { color: var(--fg-primary); font-size: 13.5px; font-weight: 600; }
.taken-task-copy small, .taken-cell-sub { color: var(--fg-tertiary); font-size: 11.5px; }
.taken-cell-main, .taken-cell-sub { display: block; }
.taken-badge { border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.taken-badge--answer { background: #fff0e5; color: #b5612e; }
.taken-badge--follow { background: #e6eff5; color: #2a5c7a; }
.taken-badge--review { background: #f9e8e5; color: #a8402f; }
.taken-badge--manual { background: #eeece9; color: var(--fg-secondary); }
.taken-badge--done { background: #e9f5ee; color: #2f6b4f; }
.taken-owner {
  display: inline-flex; max-width: 140px; padding: 3px 8px; border-radius: 999px;
  background: var(--surface-hover); color: var(--fg-secondary); overflow: hidden;
  text-overflow: ellipsis; font-size: 10.5px; font-weight: 700;
}
.taken-owner--none {
  border: 1px dashed var(--border-strong); background: transparent; color: var(--fg-tertiary);
}
.taken-due {
  color: var(--fg-tertiary); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.taken-due--urgent, .taken-due--today { color: var(--koper); }
.taken-due--overdue { color: var(--badge-red-fg); }
.taken-due--done { color: #2f6b4f; }
.taken-cards { display: none; }
.taken-card { position: relative; }
/* Twee klassen, niet één: de algemene `input[type="checkbox"]` (0,1,1) zet
   position: relative en won van `.taken-card__select` (0,1,0). Het vinkje
   kreeg daardoor een eigen gridrij en elke kaart een lege strook bovenaan. */
.taken-card .taken-card__select { position: absolute; top: 14px; right: 14px; z-index: 1; }
/* Raakvlak van 44px rond het vinkje van 16px; ::after is het vinkje zelf. */
.taken-card .taken-card__select::before { content: ''; position: absolute; inset: -15px; }
/* Kaarten hebben geen kolomkoppen: alleen daar deze keuzelijst tonen. */
.taken-sort { display: none; align-items: center; gap: 6px; color: var(--fg-tertiary); font-size: 12px; }
.taken-sort .filter-select { flex: none !important; }
.taken-filter-toggle { display: none; }
.taken-filter-toggle__n {
  min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--navy);
  color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.taken-empty, .taken-loading, .taken-error {
  min-height: 220px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: var(--fg-tertiary); text-align: center;
}
.taken-empty strong { color: var(--fg-secondary); }
.taken-error { color: var(--badge-red-fg); }

/* Inhoud in de bestaande workspace-shell; alleen de invulling is Taken-eigen. */
.taken-ws-status { display: flex; align-items: center; gap: 8px; color: var(--fg-tertiary); font-size: 12px; }
.taken-ws-status > span:last-child { display: inline-flex; }
.taken-ws-person {
  display: flex; align-items: center; gap: 12px; padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.taken-ws-person div { min-width: 0; display: flex; flex-direction: column; }
.taken-ws-person strong { color: var(--fg-primary); font-size: 15px; }
.taken-ws-person div span { color: var(--fg-tertiary); font-size: 12px; }
.taken-ws-section { padding: 18px 0; border-bottom: 1px solid var(--border); }
.taken-ws-section h2 {
  margin: 0 0 8px; color: var(--fg-tertiary); text-transform: uppercase;
  font-size: 11px; font-weight: 650; letter-spacing: .04em;
}
.taken-ws-section p { margin: 0; color: var(--fg-primary); font-size: 13.5px; line-height: 1.55; }
.taken-ws-task-title { font-weight: 600; }
.taken-ws-meta { margin: 14px 0 0; }
.taken-ws-meta div {
  min-height: 34px; display: grid; grid-template-columns: 105px 1fr;
  align-items: center; border-top: 1px solid var(--border-light);
}
.taken-ws-meta dt { color: var(--fg-tertiary); font-size: 12px; }
.taken-ws-meta dd { margin: 0; color: var(--fg-secondary); font-size: 12.5px; }
.taken-ws-contact .taken-ws-meta { margin-top: 0; }
.taken-ws-contact .taken-ws-meta > div { grid-template-columns: 80px minmax(0, 1fr); padding: 7px 0; }
.taken-ws-contact .taken-ws-meta > div:first-child { border-top: 0; }
.taken-ws-contact dd { min-width: 0; display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.taken-ws-contact dd > a, .taken-ws-contact dd > span { min-width: 0; flex: 1; }
.taken-ws-contact a { color: var(--fg-primary); text-decoration: underline; text-underline-offset: 3px; }
.taken-ws-contact-empty { color: var(--fg-tertiary); }
.taken-ws-copy {
  flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--fg-secondary);
  font: inherit; font-size: 11px; cursor: pointer;
}
.taken-ws-copy:hover { background: var(--surface-hover); }
.taken-ws-copy:focus-visible { outline: 2px solid var(--fg-primary); outline-offset: 2px; }
.taken-ws-hint { display: block; margin-top: 5px; color: var(--fg-tertiary); font-size: 11.5px; }
.taken-ws-links { padding-top: 12px; }
.taken-ws-links > button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 8px;
  border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer;
}
.taken-ws-links > button:hover { background: var(--surface-hover); }
.taken-ws-link-icon {
  flex: 0 0 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; background: #eef3f6; color: #2a5c7a;
}
.taken-ws-links button > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.taken-ws-links strong { color: var(--fg-primary); font-size: 12.5px; }
.taken-ws-links small { color: var(--fg-tertiary); font-size: 11px; }
.taken-ws-links b { color: var(--fg-muted); font-size: 18px; }
.taken-ws-primary { width: 100%; justify-content: center; }
.taken-ws-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.taken-ws-actions .btn { justify-content: center; }
.taken-ws-actions .btn-danger-ghost {
  grid-column: 1 / -1; border-color: transparent; background: transparent;
  color: var(--badge-red-fg);
}
.taken-ws-actions .btn-danger-ghost:hover,
#takenDismissButton:hover { background: var(--badge-red-bg); color: var(--badge-red-fg); }
#takenDismissButton { border-color: transparent; background: transparent; color: var(--badge-red-fg); }
.taken-ws-manual-actions { display: flex; justify-content: flex-end; gap: 8px; }
#takenDismissButton { margin-right: auto; }
.taken-new-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.taken-ws-quote { border-left: 3px solid var(--border-strong); padding-left: 12px; color: var(--fg-secondary); white-space: pre-wrap; font-size: 13px; margin: 10px 0 0; }
.taken-ws-signature {
  margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 6px;
  background: var(--bg); color: var(--fg-secondary); font-size: 12.5px; line-height: 1.5;
}
/* De handtekening-HTML begint met eigen witruimte voor onder een mail; in een
   voorbeeldvak hoort die er niet. */
.taken-ws-signature > div:first-child, .settings-sig-preview > div:first-child,
.inbox-msg__signature > div:first-child, .inbox-csignature__preview > div:first-child { margin-top: 0 !important; }
.taken-ws-mailtools { display: flex; justify-content: flex-end; margin-top: 8px; }
.taken-ws-sigtoggle, .inbox-csigtoggle {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  color: var(--fg-secondary); font-size: 12.5px; cursor: pointer;
}
.taken-ws-sigtoggle input, .inbox-csigtoggle input { margin: 0; accent-color: var(--navy); }
/* Het mailblok is het werk van deze taak: een eigen kaart, zodat je ziet waar
   de e-mail begint en eindigt tussen de overige drawer-secties. */
.taken-ws-section.taken-ws-mail {
  margin: 18px 0; padding: 16px; border: 1px solid #d3e1ea; border-radius: 10px;
  background: #f4f8fb;
}
.taken-ws-mail .taken-ws-mail-kop {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  color: #2a5c7a; font-size: 12px;
}
.taken-ws-mail-icoon {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 7px; background: #e1ecf3; color: #2a5c7a;
}
/* :not([type="checkbox"]) erbij (R-1, eindreview): zonder die uitsluiting heeft
   deze regel dezelfde specificiteit als input[type="checkbox"]:checked
   hierboven en wint hij simpelweg omdat hij later in het bestand staat -- een
   aangevinkte checkbox (#cmSignatureOn, #cmFollowUpOn, #takenMailSignatureOn,
   #takenMailFollowUpOn) kreeg zo een wit vinkje op een witte achtergrond. */
.taken-ws-mail input:not([readonly]):not([type="checkbox"]), .taken-ws-mail textarea { background: var(--surface); }
.taken-ws-mail input[readonly] { background: transparent; }
.taken-ws-mail .taken-ws-signature { background: var(--surface); }

@media (max-width: 900px) {
  .taken-table-wrap { display: none; }
  .taken-cards { display: flex; flex-direction: column; gap: 8px; }
  .taken-card {
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px 12px;
    padding: 13px 14px; min-height: 44px; border-radius: var(--radius-md);
    background: var(--surface); box-shadow: var(--taken-shadow-sm); cursor: pointer;
  }
  .taken-card.is-selected { background: rgba(217,123,61,.06); }
  .taken-card__meta {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-right: 28px;
  }
  .taken-card__context { grid-column: 1 / -1; min-width: 0; padding-left: 42px; }
  .taken-card__foot {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding-left: 42px; color: var(--fg-tertiary); font-size: 12px;
  }
  /* De vacature stond op bodygrootte en daarmee groter dan de taaktitel. */
  .taken-card .taken-cell-main { color: var(--fg-secondary); font-size: 13px; }
  .taken-sort { display: inline-flex; }
  /* Onder de laatste kaart ruimte voor de chatknop rechtsonder. */
  .main--flush .taken-page .taken-cards { padding-bottom: 76px; }
  /* Selecteer je een taak verderop, dan blijven de acties in beeld. Sticky
     rekent vanaf de binnenrand van de padding van .content (hier 14px): met
     top 0 schoven de kaarten er 14px boven nog onderdoor. */
  .taken-page .candv2-bulk { position: sticky; top: -14px; z-index: 5; }
  .main--flush .taken-page .candv2-bulk { margin-left: 14px; margin-right: 14px; }
  .taken-page .candv2-bulk button { min-height: 44px; }
  /* Taakpaneel: aanraakformaat. De sluitknop is van de gedeelde shell; alleen
     binnen een takenpaneel groter, andere werkplekken houden hun maat. */
  .aac-side:has(.taken-ws-status) .aac-side__close { width: 44px; height: 44px; margin: -7px -7px 0 0; }
  .taken-ws-copy { min-width: 44px; min-height: 44px; }
  .taken-ws-primary, .taken-ws-actions .btn, .taken-ws-manual-actions .btn { min-height: 44px; }
}

@media (max-width: 768px) {
  /* .content krijgt op mobiel app-breed 16px !important; de eigen 14px van de
     vullende lijstschil kwam daar bovenop (30px per kant). */
  .main--flush .taken-page .taken-pills,
  .main--flush .taken-page .listbar,
  .main--flush .taken-page .taken-cards { padding-left: 0; padding-right: 0; }
  .main--flush .taken-page .candv2-bulk { top: -16px; margin-left: 0; margin-right: 0; }
  /* De gedeelde lijstbalk stapelt op mobiel; hier is rechts alleen de
     sorteerkeuze, en die past naast de telling. */
  .taken-page .listbar { flex-wrap: nowrap; }
  .taken-page .listbar__count { flex: 1 1 auto; order: 0; }
  .taken-page .listbar__right { flex: none; order: 0; overflow: visible; }
  .taken-sort .filter-select { min-height: 44px; }
  .taken-pills { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .taken-pills::-webkit-scrollbar { display: none; }
  .taken-pills .taken-view-pill { flex-shrink: 0; min-height: 44px; }
  /* Zoekveld en knop Filters op één regel; de keuzelijsten staan eronder,
     elk op volle breedte, en alleen als het paneel open is. display: contents
     maakt de onderdelen van de gedeelde filterbalk items van deze flexrij. */
  .taken-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .taken-filters .filter-bar, .taken-filters .filter-bar__left { display: contents; }
  .taken-filters .filter-bar__search { flex: 1 1 0; min-height: 44px; }
  .taken-filter-toggle { order: 1; display: inline-flex; justify-content: center; min-height: 44px; }
  .taken-filters .filter-select { order: 2; flex: 1 1 100% !important; min-height: 44px; }
  .taken-filters .filter-bar__clear { order: 3; min-height: 44px; }
  .taken-filters:not(.is-open) .filter-select,
  .taken-filters:not(.is-open) .filter-bar__clear { display: none; }
}

@media (max-width: 600px) {
  /* Regel 1: telling en Deselecteer, regel 2: de actieknoppen. */
  .taken-page .candv2-bulk { flex-wrap: wrap; row-gap: 0; }
  .taken-page .candv2-bulk::after { content: ''; order: 1; flex-basis: 100%; }
  .taken-page .candv2-bulk__div { display: none; }
  .taken-page .candv2-bulk__ghost { order: 1; margin-left: auto; }
  .taken-page .candv2-bulk__del { order: 2; margin-top: 8px; }
  .taken-card { grid-template-columns: 1fr; }
  .taken-card .taken-task-cell { padding-right: 32px; }
  .taken-card__meta { justify-content: flex-start; padding-left: 42px; }
}

/* =====================================================================
   CAMPAGNEMODULE-RESTYLING (prototype design/campagne-prototype/)
   Alles gescoped onder .cmp-scope zodat generieke namen (.panel, .tabs,
   .modal, .card, .sp) niet botsen met bestaande styling elders.
   Bron: design/campagne-prototype/styles.css — 1-op-1 overgenomen met
   .cmp-scope-prefix; alleen tokens die al bestaan zijn niet herhaald.
   ===================================================================== */
.cmp-scope {
  /* token-brug: alleen de tokens uit Step 1 die style.css nog mist,
     met exact de waarden uit design/campagne-prototype/styles.css :root */
  --ok-fg: #16A34A; --ok-bg: #DCFCE7;
  --warn-fg: #B5701F; --warn-bg: #FCEBCE;
  --err-fg: #DC2626; --err-bg: #FEF2F2;
  --steel-bg: #E3EDF5; --grey-fg: #8A8680; --grey-bg: #F0EDE8;
  --meta: #1877F2; --meta-bg: #EBF3FE;
  /* Schaduwen alleen binnen de campagnemodule (fase-2 statustaal/visuele pass);
     de app-brede --shadow-* tokens blijven ongemoeid. */
  --cmp-shadow-card: 0 1px 2px rgba(23,56,79,.06), 0 4px 16px rgba(23,56,79,.07);
  --cmp-shadow-float: 0 8px 40px rgba(15,38,56,.18);
}

/* ── Sectiekop binnen de module (advertentieniveau, campagnedetail, analytics)
   Dit is GEEN paginakop: die staat al in de app-schil (.page-header) en zegt
   "Campagnes". Tot 11-08 was deze kop 28px tegen 26px van de app-kop, met een
   gereserveerde hoogte van 78px -- twee paginakoppen boven elkaar, waarvan de
   onderste de grootste. Nu duidelijk een niveau lager, zodat je ziet dat het
   een sectie binnen de pagina is. */
.cmp-scope .phead{display:flex;align-items:flex-start;gap:16px;margin:0 0 10px}
.cmp-scope .phead>div:first-child{flex:1;min-width:0}
.cmp-scope .phead h1{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.015em;margin:0;line-height:1.2}
.cmp-scope .phead p{font-size:13px;color:var(--fg-tertiary);margin:3px 0 0;line-height:1.35;max-width:640px}
.cmp-scope .phead .sp{flex:1}
.cmp-scope .pactions{display:flex;gap:8px;align-items:center;flex-shrink:0;padding-top:4px}

/* ── Module tabs (page-area nav) - contained segment-bar met edge-fade ── */
.cmp-scope .tabwrap{position:relative;margin:18px 0 22px}
.cmp-scope .tabwrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:28px;border-radius:0 13px 13px 0;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none;opacity:0;transition:opacity var(--dur-base)}
.cmp-scope .tabwrap.overflow::after{opacity:1}
.cmp-scope .tabs{display:flex;align-items:center;gap:3px;background:#fff;border:1px solid var(--border);border-radius:13px;padding:5px;box-shadow:var(--shadow-sm);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cmp-scope .tabs::-webkit-scrollbar{height:0}
.cmp-scope .tab{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--fg-tertiary);background:none;border:none;border-radius:8px;padding:8px 12px;white-space:nowrap;flex-shrink:0;transition:all var(--dur-fast)}
.cmp-scope .tab svg{width:16px;height:16px;color:var(--fg-tertiary);transition:color var(--dur-fast)}
.cmp-scope .tab:hover{background:var(--surface-active);color:var(--fg-primary)}
.cmp-scope .tab:hover svg{color:var(--fg-secondary)}
.cmp-scope .tab.on{background:var(--navy);color:#fff;font-weight:600}
.cmp-scope .tab.on svg{color:var(--koper-glow)}
.cmp-scope .tab .flag{font-size:9px;font-weight:700;letter-spacing:.03em;padding:2px 5px;border-radius:999px;min-width:16px;text-align:center;background:var(--koper);color:#fff}
/* Op de actieve tab (navy achtergrond) een tint lichter koper, anders zakt de badge weg in het donker. */
.cmp-scope .tab.on .flag{background:var(--koper-light)}

/* Compacte campagnenavigatie in de paginakop. De zes zichtbare tabs zijn één
   onderdeelkeuze geworden; de bestemmingen en deep links blijven gelijk. */
.cmp-section-menu{position:relative}
.cmp-section-menu>summary{display:inline-flex;align-items:center;gap:5px;list-style:none;padding:5px 8px;color:var(--fg-secondary);background:var(--surface);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500}
.cmp-section-menu>summary::-webkit-details-marker{display:none}
.cmp-section-menu>summary::after{content:'⌄';color:var(--fg-tertiary)}
.cmp-section-menu>summary:hover,.cmp-section-menu[open]>summary{color:var(--fg-primary);background:var(--surface-active)}
.cmp-section-menu__pop{position:absolute;left:0;top:calc(100% + 6px);z-index:70;min-width:220px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-modal)}
.cmp-section-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;color:var(--fg-secondary);background:none;border:0;border-radius:6px;cursor:pointer;font-family:var(--font-body);font-size:12.5px;text-align:left}
.cmp-section-menu__item:hover{color:var(--fg-primary);background:var(--surface-active)}
.cmp-section-menu__item.is-active{color:var(--fg-primary);font-weight:600}
.cmp-section-menu__item.is-active::after{content:'✓';margin-left:auto;color:var(--koper)}
.cmp-section-menu__item .flag{margin-left:auto;min-width:17px;padding:1px 5px;color:#fff;background:var(--koper);border-radius:999px;font-size:9px;font-weight:700;text-align:center}

/* Campagnelijst: sinds 2026-09-18 dezelfde twee rijen als elke andere lijst --
   de gedeelde filterbalk (zoekveld + portaal) hier, en daaronder de gedeelde
   lijstbalk met de telling links en het meer-menu rechts. De eigen telling,
   het eigen 250x31-zoekveld en de knop "Filters" (die de statuskeuze verborg)
   zijn vervallen; de statuskeuze staat als pills-rij in de paginakop. */
.cmp-scope .cmp-compact-toolbar{display:flex;align-items:center;gap:8px}
.cmp-scope .cmp-compact-toolbar .filter-bar{flex:1;margin-bottom:12px}
.cmp-scope .cmp-compact-menu{position:relative}
.cmp-scope .cmp-compact-menu>summary{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;list-style:none;padding:0 10px;color:var(--fg-secondary);background:var(--surface);border:1px solid var(--border);border-radius:7px;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap}
.cmp-scope .cmp-compact-menu>summary::-webkit-details-marker{display:none}
.cmp-scope .cmp-compact-menu>summary:hover,.cmp-scope .cmp-compact-menu[open]>summary{color:var(--fg-primary);background:var(--surface-active)}
.cmp-scope .cmp-compact-menu__pop{position:absolute;right:0;top:calc(100% + 6px);z-index:65;min-width:285px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--cmp-shadow-float)}
.cmp-scope .cmp-compact-menu__pop--wide{width:min(620px,calc(100vw - 40px))}
.cmp-scope .cmp-compact-menu__title{margin-bottom:9px;color:var(--fg-tertiary);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.cmp-scope .cmp-compact-menu__divider{height:1px;margin:10px -6px 6px;background:var(--border)}
.cmp-scope .cmp-compact-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmp-scope .cmp-compact-controls>div{flex-wrap:wrap}
.cmp-scope .cmp-plan-row{background:var(--koper-subtle)}
.cmp-scope .cmp-plan-row:hover{background:rgba(217,123,61,.11)}
.cmp-scope .cmp-proposal-link{padding:0;color:var(--koper);background:none;border:0;cursor:pointer;font-family:var(--font-body);font-size:12.5px;font-weight:600;white-space:nowrap}
.cmp-scope .cmp-proposal-link:hover{color:var(--koper-hover)}
.cmp-scope .cmp-metric-period{color:var(--fg-tertiary);font-size:10.5px;font-weight:550;letter-spacing:.04em;text-transform:uppercase}

@media (max-width:700px){
  .cmp-scope .cmp-compact-toolbar{align-items:flex-start;flex-wrap:wrap}
  .cmp-scope .cmp-compact-more>summary{min-width:40px}
}

/* ── Filter pills ── */
.cmp-scope .pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.cmp-scope .fpill{font-size:12.5px;font-weight:500;color:var(--fg-secondary);background:#fff;border:1px solid var(--border-strong);border-radius:999px;padding:6px 13px;transition:all var(--dur-fast)}
.cmp-scope .fpill.on{background:var(--fg-primary);color:#fff;border-color:var(--fg-primary)}

/* ── Cards / panels ── */
.cmp-scope .card-pad{padding:18px}
.cmp-scope .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--cmp-shadow-card);margin-bottom:16px;overflow:hidden}
/* Panel met brede tabel: overflow:hidden zou kolommen onbereikbaar afknippen
   (zelfde reden als de inline override in campaigns.js bij de campagnetabel). */
.cmp-scope .panel--scroll{overflow-x:auto;overflow-y:hidden}
.cmp-scope .panel-h{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border)}
.cmp-scope .panel-h h3{font-family:'DM Sans';font-size:15px;font-weight:600;margin:0}
.cmp-scope .panel-h .sub{font-size:12.5px;color:var(--fg-tertiary);margin-top:1px}
.cmp-scope .panel-h .sp{flex:1}
.cmp-scope .panel-b{padding:18px}

/* ── Rapportage-ontwerp (augustus 2026) ────────────────────────────────
   De applicatieschil blijft eigenaar van navigatie en paginakop. Deze laag
   groepeert uitsluitend de bestaande rapportagedata en -interacties. */
.cmp-scope .rap-shell{min-width:0}
.cmp-scope .rap-reportbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--cmp-shadow-card)}
.cmp-scope .rap-eyebrow{margin-bottom:6px;color:var(--fg-tertiary);font-size:10.5px;font-weight:600;letter-spacing:.045em;text-transform:uppercase}
.cmp-scope .rap-campaign-row{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.cmp-scope .rap-campaign-select{width:min(420px,55vw);min-width:260px;font-weight:500}
.cmp-scope .rap-status,.cmp-scope .rap-source{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:600;line-height:1.4;text-transform:capitalize}
.cmp-scope .rap-status{color:var(--ok-fg);background:var(--ok-bg)}
.cmp-scope .rap-source{color:var(--meta);background:var(--meta-bg)}
.cmp-scope .rap-source.is-other{color:var(--steel);background:var(--steel-bg)}
.cmp-scope .rap-date-control{display:grid;justify-items:end;gap:6px;flex-shrink:0}
.cmp-scope .rap-periods{display:inline-flex;gap:2px;padding:3px;background:var(--surface-active);border-radius:9px}
.cmp-scope .rap-period{padding:6px 9px;color:var(--fg-tertiary);background:transparent;border:0;border-radius:6px;cursor:pointer;font-size:11.5px;font-weight:500;white-space:nowrap}
.cmp-scope .rap-period:hover{color:var(--fg-primary);background:var(--surface)}
.cmp-scope .rap-period[aria-pressed="true"]{color:#fff;background:var(--navy);box-shadow:var(--shadow-sm)}
.cmp-scope .rap-sync{min-height:17px;color:var(--fg-tertiary);font-size:10.5px}

.cmp-scope .rap-tabs{display:flex;gap:4px;margin-bottom:16px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow-sm);overflow-x:auto;scrollbar-width:none}
.cmp-scope .rap-tabs::-webkit-scrollbar{display:none}
.cmp-scope .rap-tab{padding:7px 13px;color:var(--fg-tertiary);background:transparent;border:0;border-radius:7px;cursor:pointer;font-size:12.5px;font-weight:500;white-space:nowrap}
.cmp-scope .rap-tab:hover{color:var(--fg-primary);background:var(--surface-active)}
.cmp-scope .rap-tab[aria-selected="true"]{color:#fff;background:var(--navy);font-weight:600}
.cmp-scope .rap-view[hidden]{display:none!important}
.cmp-scope .rap-view-stack{display:grid;gap:16px;min-width:0}
.cmp-scope .rap-view-stack>.panel,.cmp-scope .rap-panel-grid>.panel{min-width:0;margin-bottom:0}

.cmp-scope .rap-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--cmp-shadow-card)}
.cmp-scope .rap-kpi{min-width:0;padding:15px 16px;background:var(--surface)}
.cmp-scope .rap-kpi.is-primary{background:var(--koper-subtle);box-shadow:inset 0 3px 0 var(--koper)}
.cmp-scope .rap-kpi-label{overflow:hidden;color:var(--fg-tertiary);font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}
.cmp-scope .rap-kpi-value{margin-top:3px;color:var(--fg-primary);font-family:var(--font-display);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.cmp-scope .rap-kpi.is-primary .rap-kpi-value{color:var(--koper-hover)}
.cmp-scope .rap-kpi-sub{margin-top:3px;color:var(--fg-tertiary);font-size:10px}
.cmp-scope .rap-context{display:flex;align-items:center;gap:5px 0;min-width:0;padding:9px 12px;background:var(--steel-bg);border-radius:var(--radius-md);overflow-x:auto;scrollbar-width:thin}
.cmp-scope .rap-context-item{display:inline-flex;align-items:baseline;gap:5px;padding:0 12px;color:var(--fg-tertiary);border-right:1px solid rgba(42,92,122,.15);font-size:10.5px;white-space:nowrap}
.cmp-scope .rap-context-item:first-child{padding-left:0}
.cmp-scope .rap-context-item:last-child{border-right:0}
.cmp-scope .rap-context-item strong{color:var(--fg-secondary);font-size:11.5px;font-weight:600}
.cmp-scope .rap-context-item small{color:var(--fg-tertiary);font-size:9.5px}

.cmp-scope .rap-overview-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(230px,1fr);gap:16px;min-width:0}
.cmp-scope .rap-overview-grid>.panel{min-width:0;margin-bottom:0}
.cmp-scope .rap-flow-scroll{min-width:0;overflow-x:auto;padding-bottom:4px}
.cmp-scope .rap-flow{display:flex;align-items:center;width:max-content;min-width:100%}
.cmp-scope .rap-flow-step{position:relative;width:112px;min-height:82px;padding:12px 10px;background:var(--surface);border:1px solid var(--border);border-radius:9px;text-align:center}
.cmp-scope .rap-flow-step.is-leak{background:var(--koper-subtle);border-color:var(--koper-light)}
.cmp-scope .rap-flow-step.is-outcome{background:var(--koper-subtle);border-color:var(--koper)}
.cmp-scope .rap-flow-count{color:var(--navy);font-family:var(--font-display);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.cmp-scope .rap-flow-step.is-leak .rap-flow-count,.cmp-scope .rap-flow-step.is-outcome .rap-flow-count{color:var(--koper-hover)}
.cmp-scope .rap-flow-label{margin-top:3px;color:var(--fg-secondary);font-size:10px;line-height:1.25}
.cmp-scope .rap-flow-source{margin-top:5px;color:var(--fg-tertiary);font-size:8.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.cmp-scope .rap-flow-arrow{position:relative;width:48px;min-width:48px;height:1px;background:var(--border-strong)}
.cmp-scope .rap-flow-arrow::after{content:'';position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-top:1px solid var(--border-strong);border-right:1px solid var(--border-strong);transform:rotate(45deg)}
.cmp-scope .rap-flow-arrow span{position:absolute;left:50%;bottom:6px;color:var(--fg-tertiary);font-size:9px;transform:translateX(-50%);white-space:nowrap}
.cmp-scope .rap-candidate-groups{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.cmp-scope .rap-candidate-group{position:relative}
.cmp-scope .rap-candidate-group>summary{list-style:none;padding:5px 9px;color:var(--fg-secondary);background:var(--surface-active);border-radius:7px;cursor:pointer;font-size:10.5px;font-weight:500}
.cmp-scope .rap-candidate-group>summary::-webkit-details-marker{display:none}
.cmp-scope .rap-candidate-group[open]{width:100%}
.cmp-scope .rap-funnel-names{display:flex;gap:6px;padding:8px 0 2px;flex-wrap:wrap}

.cmp-scope .rap-attention .panel-b{display:grid;gap:12px}
.cmp-scope .rap-attention-item{display:flex;align-items:flex-start;gap:9px}
.cmp-scope .rap-attention-dot{width:8px;height:8px;margin-top:4px;background:var(--koper);border-radius:50%;flex-shrink:0}
.cmp-scope .rap-attention-dot.is-steel{background:var(--steel)}
.cmp-scope .rap-attention-item div{display:grid;gap:2px;min-width:0}
.cmp-scope .rap-attention-item strong{color:var(--fg-primary);font-size:11.5px;font-weight:600}
.cmp-scope .rap-attention-item span:last-child{color:var(--fg-tertiary);font-size:10.5px;line-height:1.4}
.cmp-scope .rap-panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;min-width:0}
.cmp-scope .rap-table-wrap{min-width:0;overflow-x:auto}
.cmp-scope .rap-empty{text-align:center;color:var(--fg-tertiary)}
.cmp-scope .rap-analytics-region{margin-top:16px}
.cmp-scope .rap-ad-performance .panel-b{min-width:0;overflow-x:auto}

@media (max-width:1000px){
  .cmp-scope .rap-overview-grid{grid-template-columns:minmax(0,1fr)}
  .cmp-scope .rap-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .cmp-scope .rap-reportbar{align-items:stretch;flex-direction:column}
  .cmp-scope .rap-campaign-select{width:100%;min-width:0}
  .cmp-scope .rap-date-control{justify-items:start}
  .cmp-scope .rap-kpis{grid-template-columns:minmax(0,1fr)}
  .cmp-scope .rap-panel-grid{grid-template-columns:minmax(0,1fr)}
  .cmp-scope .rap-context-item small{display:none}
}

/* ── Tables ──
   Alleen nog wat van de basistabel afwijkt. Kopstijl, celstijl, hover, handje
   en de laatste rij komen sinds de tabel-eenmaking uit de generieke regels
   bovenin dit bestand; .r/.c staan daar nu ook. Wat hier overblijft is
   campagne-eigen: de naamcel-opmaak.

   De rijhoogte was hier 7px padding tegen 10px elders en 11px op kandidaten --
   drie hoogtes voor hetzelfde soort rij. Alle drie staan nu op de generieke
   10px 12px. Campagnerijen worden daarmee iets ruimer dan voorheen; dat is de
   prijs van één hoogte door de hele app. */
.cmp-scope .tbl td{border-bottom-color:var(--border)}
.cmp-scope .tbl td .name{display:block;line-height:1.25}
.cmp-scope .tbl td .muted{line-height:1.25}
/* Alleen naamkolommen krijgen de min-width, niet elke eerste kolom (toggle-
   kolom ad-sets-tabel, ID-kolom beheer-lijst, breakdown-waarde) -- die
   kregen anders een lege 190px-strook of knepen dicht in smalle panels.
   Naamkolommen renderen altijd <span class="name"> in hun td (zie o.a.
   campaigns.js, campaign-audiences.js, campaign-aanvragen.js), dus :has()
   pakt precies die cellen. */
.cmp-scope .tbl td:first-child:has(.name){min-width:190px}
.cmp-scope .tbl .name{font-weight:500;color:var(--fg-primary)}
/* Lange statussen zoals "Gepubliceerd — gepauzeerd" mogen de pill op een
   laptop niet tot een hoge ovaal laten afbreken. De tabel kan horizontaal
   scrollen; alleen eventuele signaalchips ernaast mogen blijven omlopen. */
.cmp-scope .cmp-status-cell>.badge{white-space:nowrap}

/* ── Breadcrumb ── */
.cmp-scope .crumbs{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--fg-tertiary);margin-bottom:14px;flex-wrap:wrap}
.cmp-scope .crumbs a{color:var(--fg-tertiary)}.cmp-scope .crumbs a:hover{color:var(--fg-primary)}
.cmp-scope .crumbs svg{width:14px;height:14px;opacity:.6}
.cmp-scope .crumbs .cur{color:var(--fg-primary);font-weight:600}

/* ── Detail context strip ── */
.cmp-scope .ctx{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px}
.cmp-scope .ctx .c{background:#fff;padding:13px 15px}
.cmp-scope .ctx .cl{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-tertiary);display:flex;align-items:center;gap:5px}
.cmp-scope .ctx .cv{font-size:14px;font-weight:500;color:var(--fg-primary);margin-top:4px}

/* KPI-strip in de campagne-detailkop (PR 2, Task C2): 4 primaire cijfers
   boven de ctx-grid, zelfde 1px-gap-gridtaal als .ctx hierboven. */
.cmp-scope .cmp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px}
.cmp-scope .cmp-kpis .k{background:#fff;padding:14px 15px}
.cmp-scope .cmp-kpis .kl{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-tertiary)}
.cmp-scope .cmp-kpis .kv{font-family:var(--font-display);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg-primary);margin-top:4px}
.cmp-scope .cmp-kpis .ks{font-size:11px;color:var(--fg-tertiary);margin-top:3px}

/* ── signaal-badges (leerfase/issues/fatigue) ── */
.cmp-scope .sig{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:550;padding:2px 8px;border-radius:999px}
.cmp-scope .sig svg{width:12px;height:12px}
.cmp-scope .sig-learn{color:var(--warn-fg);background:var(--warn-bg)}
.cmp-scope .sig-limited{color:var(--err-fg);background:var(--err-bg)}
.cmp-scope .sig-meta{color:var(--meta);background:var(--meta-bg)}

/* ── Cockpit-lijst (PR 1): thumbnail + funnel-strip per campagnerij ── */
.cmp-scope .cmp-camp-cell{display:flex;align-items:center;gap:10px;min-width:0}
.cmp-scope .cmp-camp-cell__txt{min-width:0;flex:1}
.cmp-scope .cmp-thumb{width:44px;height:44px;border-radius:8px;flex-shrink:0;object-fit:cover;display:block;background:var(--surface-active)}
.cmp-scope .cmp-thumb--empty{display:flex;align-items:center;justify-content:center;color:var(--fg-quaternary)}
.cmp-scope .cmp-funnel{display:inline-flex;flex-direction:column;gap:4px;width:132px;vertical-align:middle}
.cmp-scope .cmp-funnel__bars{display:flex;flex-direction:column;justify-content:space-between;height:26px}
.cmp-scope .cmp-funnel__bar{height:6px;border-radius:3px}
.cmp-scope .cmp-funnel__bar--leads{background:var(--steel);opacity:.35}
.cmp-scope .cmp-funnel__bar--qual{background:var(--steel)}
.cmp-scope .cmp-funnel__bar--placed{background:var(--koper)}
.cmp-scope .cmp-funnel__cap{font-size:11px;color:var(--fg-tertiary);white-space:nowrap}

/* ── Info / notice blocks ── */
.cmp-scope .notice{display:flex;gap:10px;align-items:flex-start;padding:12px 15px;border-radius:var(--radius-md);font-size:13px;line-height:1.5;margin-bottom:14px}
.cmp-scope .notice svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.cmp-scope .notice b{font-weight:600}
.cmp-scope .notice-info{background:var(--steel-bg);color:#274b63}.cmp-scope .notice-info svg{color:var(--steel)}
.cmp-scope .notice-warn{background:var(--warn-bg);color:#7A5A22}.cmp-scope .notice-warn svg{color:var(--koper)}
.cmp-scope .notice-err{background:var(--err-bg);color:#9B2C2C}.cmp-scope .notice-err svg{color:var(--err-fg)}

/* Eén actueel Campaign Health-advies in het bestaande campagnedetail. Meer
   adviezen blijven native progressief verborgen; dit is bewust geen actieblok. */
.cmp-scope .cmp-health-guidance{margin-bottom:16px;padding:14px 16px;border:1px solid var(--border);border-left:3px solid var(--koper);border-radius:var(--radius-md);background:var(--surface);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.cmp-scope .cmp-health-guidance__label{margin-bottom:5px;color:var(--fg-tertiary);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.cmp-scope .cmp-health-guidance p{margin:3px 0 0;color:var(--fg-secondary)}
.cmp-scope .cmp-health-guidance__more{margin-top:10px;border-top:1px solid var(--border)}
.cmp-scope .cmp-health-guidance__more>summary{display:flex;min-height:44px;align-items:center;color:var(--fg-secondary);font-weight:600;cursor:pointer}
.cmp-scope .cmp-health-guidance__more ol{display:grid;gap:10px;margin:0;padding:4px 0 2px 22px}
.cmp-scope .cmp-health-guidance__more li{padding-left:3px}

/* ── Drill affordance ── */
.cmp-scope .drill{color:var(--koper);font-weight:600;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.cmp-scope .drill svg{width:14px;height:14px}

/* ── Wizard step-indicator ── */
.cmp-scope .wsteps{display:flex;align-items:center;gap:0;margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
.cmp-scope .wsteps::-webkit-scrollbar{height:0}
.cmp-scope .wstep{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cmp-scope .wstep .n{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--surface-active);color:var(--fg-tertiary)}
.cmp-scope .wstep.on .n{background:var(--koper);color:#fff}
.cmp-scope .wstep.done .n{background:var(--navy);color:#fff}
.cmp-scope .wstep .lab{font-size:13px;font-weight:500;color:var(--fg-tertiary);white-space:nowrap}
.cmp-scope .wstep.on .lab,.cmp-scope .wstep.done .lab{color:var(--fg-primary)}
.cmp-scope .wline{width:26px;height:2px;background:var(--border);margin:0 6px;flex-shrink:0}
.cmp-scope .wline.done{background:var(--navy)}

/* ── Forms ── */
.cmp-scope .fld{margin-bottom:15px}
.cmp-scope .fld label{display:block;font-size:12.5px;font-weight:600;color:var(--fg-secondary);margin-bottom:6px}
.cmp-scope .inp,.cmp-scope textarea.inp,.cmp-scope select.inp{width:100%;font-family:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--border-strong);border-radius:9px;background:#fff;color:var(--fg-primary);outline:none;transition:all var(--dur-fast)}
.cmp-scope .inp:focus{border-color:var(--koper);box-shadow:0 0 0 3px rgba(217,123,61,.1)}
/* iOS zoomt in bij focus op velden < 16px — en zoomt niet terug */
@media (max-width: 768px) { .cmp-scope .inp, .cmp-scope textarea.inp, .cmp-scope select.inp { font-size: 16px; } }
.cmp-scope textarea.inp{resize:vertical;min-height:90px;line-height:1.5}
.cmp-scope .seg{display:flex;gap:4px;background:var(--surface-active);padding:3px;border-radius:9px}
.cmp-scope .seg button{flex:1;font-size:12.5px;font-weight:500;color:var(--fg-secondary);background:none;border:none;padding:8px;border-radius:6px;transition:all var(--dur-fast)}
.cmp-scope .seg button.on{background:#fff;color:var(--fg-primary);font-weight:600;box-shadow:var(--shadow-sm)}
.cmp-scope .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* misc */
.cmp-scope .hstack{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ⋯-menu voor secundaire acties (PR 2, Task C3): native <details>/<summary>-
   dropdown (zelfde patroon als de kolomkiezer .col-picker in candidates.js),
   geen JS-state; items sluiten het menu zelf in hun onclick. */
.cmp-scope .cmp-menu{position:relative;display:inline-block}
.cmp-scope .cmp-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:34px;font-size:16px;line-height:1;padding:6px 10px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);color:var(--fg-secondary)}
.cmp-scope .cmp-menu>summary::-webkit-details-marker{display:none}
.cmp-scope .cmp-menu>summary:hover{background:var(--surface-active);color:var(--fg-primary)}
.cmp-scope .cmp-menu[open]>summary{background:var(--surface-active);color:var(--fg-primary)}
.cmp-scope .cmp-menu__pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--cmp-shadow-float);padding:6px;min-width:180px}
.cmp-scope .cmp-menu__item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;font-size:13px;padding:7px 10px;border-radius:6px;color:var(--fg-secondary);cursor:pointer;white-space:nowrap}
.cmp-scope .cmp-menu__item:hover{background:var(--surface-active);color:var(--fg-primary)}
.cmp-scope .cmp-menu__item svg{color:var(--fg-muted);flex-shrink:0}
.cmp-scope .cmp-menu__item--danger{color:var(--badge-red-fg)}
.cmp-scope .cmp-menu__item--danger svg{color:var(--badge-red-fg)}
.cmp-scope .cmp-menu__item--danger:hover{background:var(--err-bg);color:var(--err-fg)}
.cmp-scope .cmp-menu__item--danger:hover svg{color:var(--err-fg)}
/* Compacte ⋯-variant voor in de campagnerij (PR 2, Task D2a): randloos zodat
   hij naast de potlood/toggle-iconen past. */
.cmp-scope .cmp-menu--sm{vertical-align:middle}
.cmp-scope .cmp-menu--sm>summary{min-width:28px;padding:3px 8px;font-size:15px;border:none;background:none;color:var(--fg-tertiary)}
.cmp-scope .cmp-menu--sm>summary:hover{background:var(--surface-active);color:var(--fg-primary)}
/* Splitsknop naast "+ Nieuwe campagne" (PR 2, Task D2b): caret in de
   btn-primary-look, vastgeplakt aan de hoofdknop. */
.cmp-scope .cmp-split{display:inline-flex;align-items:stretch}
.cmp-scope .cmp-split>.btn{border-top-right-radius:0;border-bottom-right-radius:0}
.cmp-scope .cmp-split .cmp-menu{display:inline-flex}
.cmp-scope .cmp-split .cmp-menu>summary{min-width:0;height:100%;padding:0 9px;border:none;border-left:1px solid rgba(255,255,255,0.3);border-top-left-radius:0;border-bottom-left-radius:0;background:var(--fg-primary);color:var(--white)}
.cmp-scope .cmp-split .cmp-menu>summary:hover,
.cmp-scope .cmp-split .cmp-menu[open]>summary{background:#333;color:var(--white)}
.cmp-scope .vstack{display:flex;flex-direction:column;gap:6px}

/* change-log timeline */
.cmp-scope .log{position:relative;padding-left:6px}
.cmp-scope .log::before{content:'';position:absolute;left:12px;top:8px;bottom:8px;width:1.5px;background:var(--border)}
.cmp-scope .logit{display:flex;gap:14px;padding-bottom:20px;position:relative}
.cmp-scope .logit:last-child{padding-bottom:0}
.cmp-scope .logdot{width:13px;height:13px;border-radius:50%;background:var(--koper);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--koper);flex-shrink:0;margin-top:3px;z-index:1}
.cmp-scope .logit.err .logdot{background:var(--err-fg);box-shadow:0 0 0 1.5px var(--err-fg)}
.cmp-scope .logbd{flex:1;min-width:0}
.cmp-scope .logwhat{font-size:13.5px;font-weight:600}
.cmp-scope .logchg{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:12.5px}
.cmp-scope .logchg svg{width:12px;height:12px;color:var(--fg-muted)}
.cmp-scope .logold{color:var(--fg-tertiary);text-decoration:line-through}.cmp-scope .lognew{font-weight:600}
.cmp-scope .logmeta{font-size:12px;color:var(--fg-muted);margin-top:6px}
.cmp-scope .logres{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;margin-top:6px;padding:2px 8px;border-radius:999px}
.cmp-scope .logres.ok{color:var(--steel);background:var(--steel-bg)}
.cmp-scope .logres.err{color:var(--err-fg);background:var(--err-bg)}

/* overlay-primitief (overlay-roots dragen .cmp-scope zelf, dus beide vormen prefixen);
   de slide-over-varianten (.slideovl/.slide/.slide-wide/.slide-body/.slide-x) zijn
   vervallen met PR 2 -- het campagnedetail is een volledig scherm geworden */
.cmp-scope.ovl,.cmp-scope .ovl{position:fixed;inset:0;background:rgba(13,31,51,.32);backdrop-filter:blur(3px);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;animation:cmp-fade var(--dur-base)}
@keyframes cmp-fade{from{opacity:0}to{opacity:1}}
.cmp-scope .mhead{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--border)}
.cmp-scope .mhead h3{font-family:'DM Sans';font-size:18px;font-weight:700;margin:0}
.cmp-scope .mhead .x{margin-left:auto;background:none;border:none;color:var(--fg-muted);padding:4px;border-radius:7px}
.cmp-scope .mhead .x:hover{background:var(--surface-active);color:var(--fg-primary)}
.cmp-scope .mbody{padding:20px 22px}
.cmp-scope .mfoot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--border)}

/* preflight-checklist (publiceerdialoog, Task 7) */
.cmp-scope .pfrow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)}
.cmp-scope .pfrow:last-child{border-bottom:none}
.cmp-scope .pfic{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cmp-scope .pfic svg{width:13px;height:13px}
.cmp-scope .pfic.ok{background:var(--ok-bg);color:var(--ok-fg)}
.cmp-scope .pfic.warn{background:var(--warn-bg);color:var(--warn-fg)}
.cmp-scope .pfic.error{background:var(--err-bg);color:var(--err-fg)}
.cmp-scope .pfic.unknown{background:var(--grey-bg);color:var(--fg-tertiary)}
.cmp-scope .pfrow .bd{flex:1;min-width:0}
.cmp-scope .pfrow .t{font-size:13.5px;font-weight:600;color:var(--fg-primary)}
.cmp-scope .pfrow .d{font-size:12.5px;color:var(--fg-secondary);margin-top:2px;line-height:1.45}
.cmp-scope .pfrow .a{font-size:12px;color:var(--koper);margin-top:5px;font-weight:500}

/* result screen */
.cmp-scope .crow{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff}
.cmp-scope .crow svg{width:17px;height:17px;color:var(--ok-fg)}
.cmp-scope .crow .nm{font-size:13.5px;font-weight:500;color:var(--fg-primary)}
.cmp-scope .crow .st{margin-left:auto}
.cmp-scope .result{text-align:center;padding:20px 0}
.cmp-scope .result .rico{width:60px;height:60px;border-radius:16px;background:var(--ok-bg);color:var(--ok-fg);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.cmp-scope .result h2{font-family:'DM Sans';font-size:22px;font-weight:700;margin:0}
.cmp-scope .result p{font-size:14px;color:var(--fg-secondary);max-width:440px;margin:8px auto 0;line-height:1.55}
.cmp-scope .created{display:flex;flex-direction:column;gap:8px;max-width:420px;margin:22px auto 0;text-align:left}

/* ── Buttons (kleurvariant boven op de bestaande .btn) ── */
.cmp-scope .btn-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.cmp-scope .btn-navy:hover{background:var(--deep-ink);color:#fff}

/* ── Chip-look (campaign-status.js chips behouden hun inline kleuren) ── */
.cmp-scope .badge{border-radius:999px;font-weight:600;letter-spacing:.01em}

/* ── Monospace (bv. request-id's in de changelog) ── */
.cmp-scope .mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}

/* ── Wizard-overlay (Task 7) ──
   .wiz*-klassen zijn GEDEELD met de vacature-wizard (static/modules/wizard.js).
   Alles hier staat achter .cmp-scope (de campagnewizard zet 'wiz-overlay cmp-scope'
   op zijn overlay-element, zie campaign-wizard.js _buildShell()) zodat de
   vacature-wizard exact zijn huidige look behoudt. */
.cmp-scope .wiz__head-title{font-size:18px}
/* De vroegere .wiz-step-kleuroverrides (actief=koper/gedaan=navy) zijn
   verwijderd (cockpit PR 1, Step B6): de campagnewizard volgt nu de app-brede
   wizardtaal (actief=zwart, gedaan=koper -- zie .wiz-step hierboven in dit
   bestand), zodat er één wizardtaal geldt. */
.cmp-scope .wiz-btn{border-radius:9px}
.cmp-scope .wiz-btn--primary:disabled{opacity:.5}

/* ── Kandidatenoverzicht v2 (scherm 1, kandidaten-v2-handoff hst. 14) ─────────
   Alles gescoped onder .candv2 / unieke candv2-*-klassen. Schaduwen via eigen
   scoped tokens: de globale --shadow-* blijven none (zelfde besluit als
   candidate-workspace.css §13.1 -- geen globale wijziging). */
.candv2 {
  --cv2-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
  --cv2-shadow-md: 0 3px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
  --cv2-shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
}

/* Eind-audit A9: de fase-cel is een pill (handoff .candv2-chip, radius 999px),
   geen afgerond blokje. Alleen de vorm en alleen binnen dit scherm -- de
   app-brede .badge (radius 5px) blijft elders ongewijzigd. Geldt voor de
   tabelcel én de kaartweergave onder 900px. */
.candv2 .badge { border-radius: 999px; }

/* Statuspills met teller-badge */
.candv2-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.candv2-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--fg-secondary); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.candv2-pill:hover { border-color: var(--border-strong); color: var(--fg-primary); }
.candv2-pill--active { background: var(--navy); border-color: var(--navy); color: #fff; }
.candv2-pill__n {
  font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: rgba(0,0,0,0.06); color: var(--fg-tertiary);
}
.candv2-pill--active .candv2-pill__n { background: rgba(255,255,255,0.18); color: #fff; }

/* Filterrij: bestaande .filter-bar-componenten, marge op maat */
/* Eind-audit A8: de handoff (`.candv2-search`) laat het zoekveld groeien tot
   340px en pas daaronder krimpen tot 200px, terwijl de keuzelijsten op
   inhoudsbreedte blijven -- zo is het zoekveld het grootste element van de rij.
   Zonder `flex` sizede het op zijn inhoud en werd het juist het kleinste.

   Alleen boven het mobiele breekpunt: de bestaande mobiele regels
   (`.filter-bar__search { width:100%; flex:1 1 100% }`, `.filter-select
   { flex:1 1 120px }`, r4510-4518) hebben LAGERE specificiteit dan deze
   `.candv2`-varianten en zouden er anders door overruled worden -- op een
   360px-scherm kreeg het zoekveld dan geen eigen regel meer en kon een lange
   keuzelijst niet meer krimpen (review B1, bevinding 8). De handoff zet daar
   juist `.candv2-search{max-width:none}` (v2-theme.css r138). */
@media (min-width: 761px) {
  /* App-breed sinds 2026-09-18 (was .candv2-only): het zoekveld is op elke
     lijstpagina het grootste element van de rij, de filters ernaast blijven
     compact. Zonder de cap werden de keuzelijsten op Plaatsingen 400px+ en
     verdween het zoekveld ertussen. */
  .filter-bar__search { flex: 1; min-width: 200px; max-width: 340px; }
  /* Gemeten op staging (1203px): elke keuzelijst was 310px -- een <select>
     groeit mee met zijn LANGSTE optie, dus "Alle bronnen" duwde hem breed en
     hield het zoekveld op 260px. Met een cap van 200px haalt het zoekveld zijn
     340px en is het weer het grootste element van de rij, zoals in de handoff
     (daar gemeten: keuzelijsten 181px). De dichtgeklapte lijst toont de
     GESELECTEERDE waarde ("Alle fases", een bronnaam) en die past ruim.

     Alleen `max-width`, bewust GEEN `flex`: filters.js zet een inline
     `style="min-width:0;flex:1 1 110px"` op elke keuzelijst (r91), en een inline
     stijl wint van elke stylesheet-regel. Een `flex`-declaratie hier zou dode
     code zijn -- nagemeten op staging. */
  .filter-select { max-width: 200px; }
}
@media (max-width: 760px) {
  .filter-bar__search { max-width: none; }
}

/* Bulkbalk (navy, verschijnt bij >=1 selectie) */
.candv2-bulk {
  display: flex; align-items: center; gap: 12px; background: var(--navy);
  color: #fff; border-radius: var(--radius-md); padding: 9px 14px;
  margin-bottom: 10px; box-shadow: var(--cv2-shadow-md);
  animation: page-in var(--dur-fast) var(--ease-out);
}
.candv2-bulk__count { font-size: 13px; font-weight: 550; }
.candv2-bulk__div { width: 1px; height: 18px; background: rgba(255,255,255,0.2); }
.candv2-bulk button { font-family: var(--font-body); cursor: pointer; }
.candv2-bulk__del {
  font-size: 12.5px; font-weight: 600; background: var(--koper); color: #fff;
  border: none; border-radius: 7px; padding: 6px 14px;
}
.candv2-bulk__del:hover { background: var(--koper-hover); }
.candv2-bulk__ghost {
  font-size: 12.5px; background: none; border: none;
  color: rgba(255,255,255,0.65); margin-left: auto; padding: 4px 8px;
}
.candv2-bulk__ghost:hover { color: #fff; }

/* Tabel */
.candv2-table-wrap {
  /* Handoff: 14px, niet de globale --radius-lg (12px). */
  background: var(--surface); border-radius: 14px;
  box-shadow: var(--cv2-shadow-sm); overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent;
}
/* Alleen nog wat écht van de basistabel afwijkt. Kopstijl, sorteerbare kop,
   hover, handje-op-klikbare-rijen en de laatste rij komen sinds de
   tabel-eenmaking uit de generieke `thead th`/`tbody td`/`tbody tr`-regels
   bovenin dit bestand -- ze stonden hier woord voor woord dubbel. */
.candv2-table { min-width: 640px; }
.candv2-table thead th { font-weight: 600; letter-spacing: 0.05em; }
.candv2-table tbody td {
  border-bottom-color: var(--border);
  /* Afkappen met puntjes is hier bewust: deze lijst heeft veel kolommen met
     lange vrije tekst (functie, klant). Blijft een kandidaat-eigen keuze --
     elders knijpt dit kolommen dicht die juist alle ruimte nodig hebben. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.candv2-table tbody tr.is-sel { background: rgba(217,123,61,0.06); }
.candv2-table input[type=checkbox] { accent-color: var(--koper); cursor: pointer; width: 15px; height: 15px; }

/* Naamcel: gedeelde nameCell()-markup, avatar in de v2-look (rond, verloop) */
.candv2 .lead-avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(135deg, #E3EDF5, #B8CDE0); color: var(--navy);
}
.candv2 .lead-name { font-size: 13.5px; }

/* Kolommen die op smallere schermen wegvallen (handoff-compact-regels) */
@media (max-width: 1100px) {
  .candv2-table { min-width: 0; }
  .candv2-table thead th, .candv2-table tbody td { padding-left: 8px; padding-right: 8px; }
  .candv2-table .col-source, .candv2-table .col-created_at { display: none; }
}
@media (max-width: 1000px) and (min-width: 901px) {
  .candv2-table .col-current_role { display: none; }
}

/* Mobiele kaartweergave (<900px): tabel maakt plaats voor kaarten */
.candv2-cards { display: none; }
@media (max-width: 900px) {
  .candv2 .candv2-table-wrap { display: none; }
  .candv2 .candv2-cards { display: flex; flex-direction: column; gap: 8px; }
  .candv2-card {
    display: flex; align-items: center; gap: 12px; background: var(--surface);
    border-radius: var(--radius-md); box-shadow: var(--cv2-shadow-sm);
    padding: 13px 14px; cursor: pointer; min-height: 44px;
  }
  .candv2-card .lead-name-cell { flex: 1; min-width: 0; }
  .candv2-card .badge { flex-shrink: 0; }
}

/* ── Vullend werkvlak (main--flush): Kandidaten v2 rand-tot-rand ─────────────
   Zelfde principe als de WhatsApp-inbox (.wa2-root): geen lucht om het
   werkvlak heen -- kop, filterbalk en tabel sluiten met haarlijnen op elkaar
   en op de sidebar aan, i.p.v. als kaart in het grijs te zweven. De klasse
   staat op .main en wordt alleen gezet voor het kandidatenoverzicht v2
   (candidates.js beslist; app.js ruimt op bij navigatie naar andere
   pagina's). Alle andere pagina's behouden de bestaande zwevende kaart. */
/* De kop zelf staat sinds 2026-09-18 app-breed zo (zie .page-header): witte
   band met haarlijn, vaste 72px. Hier blijft alleen wat écht bij het vullende
   werkvlak hoort -- de inhoud zonder zijmarge, want die zit in de rijen zelf. */
.main--flush .content { padding: 14px 0 24px; background: var(--surface); }
/* Pipeline loopt net als de lijsten tot tegen de zijkanten (Coen, 18-09: "die
   kaarten van pipeline moeten dan wel tegen de randen komen, nu komen ze niet
   tegen het menu aan"). Alleen de boven- en onderrand blijven: zij- en
   hoekranden zouden het werkvlak weer als een doosje aftekenen. De filterbalk
   en lijstbalk erboven krijgen hun 24px terug van de algemene flush-regels. */
.main--flush .pipeline { border-radius: 0; border-left: 0; border-right: 0; }
.main--flush .candv2-pills { padding: 0 24px; margin-bottom: 12px; }
.main--flush .candv2 .filter-bar { padding: 0 24px; margin-bottom: 12px; }
.main--flush .listbar { padding: 0 24px; }
.main--flush .candv2-bulk { margin-left: 24px; margin-right: 24px; }
.main--flush .candv2-table-wrap { border-radius: 0; box-shadow: none; border-top: 1px solid var(--border); }
.main--flush .candv2-table thead th:first-child,
.main--flush .candv2-table tbody td:first-child { padding-left: 24px; }
.main--flush .candv2-table thead th:last-child,
.main--flush .candv2-table tbody td:last-child { padding-right: 24px; }
/* De tabel is geen kaart meer: ook de laatste rij sluit af met een haarlijn. */
.main--flush .candv2-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
/* Generieke vullende lijstschil: dezelfde behandeling voor de overige
   lijstpagina's (vacatures, klanten, taken, leads, plaatsingen,
   contactpersonen) via hun gedeelde componenten. Zelfde maten als het
   candv2-blok hierboven; app.js zet de klasse per pagina. */
.main--flush .page-body { padding: 0; }
.main--flush .filter-bar { padding: 0 24px; }
.main--flush .bulk-bar { margin-left: 24px; margin-right: 24px; }
/* In de leads-lijst zit de bulkbalk ín de tabelcontainer: daar geen inspring. */
.main--flush .table-wrap .bulk-bar { margin-left: 0; margin-right: 0; }
.main--flush .lead-stats { padding: 0 24px; }
.main--flush .taken-pills { padding: 0 24px; }
.main--flush .taken-table-wrap { border-radius: 0; box-shadow: none; border-top: 1px solid var(--border); }
.main--flush .taken-table thead th:first-child,
.main--flush .taken-table tbody td:first-child { padding-left: 24px; }
.main--flush .taken-table thead th:last-child,
.main--flush .taken-table tbody td:last-child { padding-right: 24px; }
.main--flush .taken-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
.main--flush #vacCapNote { padding: 0 24px; }
/* Campagnes: hele cmp-scope binnen de kantlijn (tabs zijn een pill-control,
   kaarten blijven kaarten). Inline 32px-padding uit campaigns.js is weg. */
.main--flush .cmp-scope { padding: 0 24px; }
.main--flush .cmp-scope .tabwrap { margin-top: 0; }
/* Cockpit-tabel rand-tot-rand (PR 1): de lijst-.panel breekt met negatieve
   marges uit de 24px-kantlijn van .main--flush .cmp-scope (toolbar en
   chips-rij houden die kantlijn) en verliest zijkaders/radius/schaduw; de
   eerste/laatste cel krijgt de 24px als celpadding terug zodat de inhoud
   op de kantlijn blijft uitlijnen. Zelfde patroon als .main--flush .table-wrap. */
.main--flush .cmp-scope .cmp-panel--flush { margin-left: -24px; margin-right: -24px; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
.main--flush .cmp-scope .cmp-panel--flush .tbl th:first-child,
.main--flush .cmp-scope .cmp-panel--flush .tbl td:first-child { padding-left: 24px; }
.main--flush .cmp-scope .cmp-panel--flush .tbl th:last-child,
.main--flush .cmp-scope .cmp-panel--flush .tbl td:last-child { padding-right: 24px; }
/* Draagt een flush panel een kop (.panel-h, bv. het ad-sets-panel op het
   detailniveau, PR 2), dan lijnt die kop mee op de 24px-kantlijn. */
.main--flush .cmp-scope .cmp-panel--flush .panel-h { padding-left: 24px; padding-right: 24px; }
/* Matching: toolbar + kaartenlijst binnen de kantlijn; de match-kaarten zelf
   behouden hun kaartvorm (zelfde keuze als de stats op plaatsingen/leads). */
.main--flush .matching-page .match-toolbar { padding: 0 24px; margin-bottom: 12px; }
.main--flush .matching-page .listbar { padding: 0 24px; }
.main--flush .matching-page .filter-bar { padding: 0; }
.main--flush #matchingSuggested, .main--flush #matchFunnelStats { padding: 0 24px; }
.main--flush .table-wrap { border-left: 0; border-right: 0; border-radius: 0; }
.main--flush .table-wrap th:first-child, .main--flush .table-wrap td:first-child { padding-left: 24px; }
.main--flush .table-wrap th:last-child, .main--flush .table-wrap td:last-child { padding-right: 24px; }
/* Checkbox-kolommen (select-all) hebben inline een vaste 32-34px-breedte; met
   de volle 24px-kantlijn erbij loopt de checkbox over de kolom heen. Verbreed
   de kolom (!important wint van de inline width) en spring minder ver in. */
.main--flush .table-wrap th:first-child:has(input[type=checkbox]),
.main--flush .table-wrap td:first-child:has(input[type=checkbox]),
.main--flush .candv2-table thead th:first-child:has(input[type=checkbox]),
.main--flush .candv2-table tbody td:first-child:has(input[type=checkbox]) { width: 52px !important; padding-left: 24px; padding-right: 0; }
.main--flush .table-wrap table:has(thead th:first-child input[type=checkbox]) col:first-child { width: 52px !important; }
.main--flush .pager { padding-left: 24px; padding-right: 24px; }
@media (max-width: 900px) {
  .main--flush .candv2-pills { padding: 0 14px; }
  .main--flush .candv2 .filter-bar { padding: 0 14px; }
  .main--flush .listbar { padding: 0 14px; }
  .main--flush .candv2-cards { padding: 0 14px; }
  .main--flush .filter-bar { padding: 0 14px; }
  .main--flush .bulk-bar { margin-left: 14px; margin-right: 14px; }
  .main--flush .table-wrap .bulk-bar { margin-left: 0; margin-right: 0; }
  .main--flush .lead-stats { padding: 0 14px; }
  .main--flush .taken-pills { padding: 0 14px; }
  .main--flush .taken-cards { padding: 0 14px; }
  .main--flush .taken-table thead th:first-child,
  .main--flush .taken-table tbody td:first-child { padding-left: 14px; }
  .main--flush .taken-table thead th:last-child,
  .main--flush .taken-table tbody td:last-child { padding-right: 14px; }
  .main--flush #vacCapNote { padding: 0 14px; }
  .main--flush .cmp-scope { padding: 0 14px; }
  /* KPI-strip (PR 2, Task C2): op mobiel 2 kolommen i.p.v. 4. */
  .cmp-scope .cmp-kpis { grid-template-columns: repeat(2, 1fr); }
  .main--flush .cmp-scope .cmp-panel--flush { margin-left: -14px; margin-right: -14px; }
  .main--flush .cmp-scope .cmp-panel--flush .tbl th:first-child,
  .main--flush .cmp-scope .cmp-panel--flush .tbl td:first-child { padding-left: 14px; }
  .main--flush .cmp-scope .cmp-panel--flush .tbl th:last-child,
  .main--flush .cmp-scope .cmp-panel--flush .tbl td:last-child { padding-right: 14px; }
  .main--flush .cmp-scope .cmp-panel--flush .panel-h { padding-left: 14px; padding-right: 14px; }
  .main--flush .matching-page .match-toolbar,
  .main--flush .matching-page .listbar { padding: 0 14px; }
  .main--flush #matchingSuggested, .main--flush #matchFunnelStats { padding: 0 14px; }
  .main--flush .table-wrap th:first-child, .main--flush .table-wrap td:first-child { padding-left: 14px; }
  .main--flush .table-wrap th:last-child, .main--flush .table-wrap td:last-child { padding-right: 14px; }
  .main--flush .table-wrap th:first-child:has(input[type=checkbox]),
  .main--flush .table-wrap td:first-child:has(input[type=checkbox]),
  .main--flush .candv2-table thead th:first-child:has(input[type=checkbox]),
  .main--flush .candv2-table tbody td:first-child:has(input[type=checkbox]) { width: 40px !important; padding-left: 14px; }
  .main--flush .table-wrap table:has(thead th:first-child input[type=checkbox]) col:first-child { width: 40px !important; }
  .main--flush .pager { padding-left: 14px; padding-right: 14px; }
}

/* ── WhatsApp-module v2 (design_handoff_whatsapp_v2) ─────────────────────────
   Eigen namespace naast de bestaande .wa-*-stijlen: v1 blijft achter de
   feature-vlag `whatsapp_v2` de terugval, en de kandidaatmodal-chat gebruikt
   .wa-canvas/.wa-composer. Die mogen dus niet meebewegen.
   Twee bewuste afwijkingen van de handoff: uitgaand groen rechts (de handoff
   draait dit om t.o.v. WhatsApp zelf) en de plan-knoppen achter een ⋯-menu.
   Layoutcontract: .wa2-root verwacht een parent met kolom-flex en vaste hoogte
   (.content--chat op #pageContent); .wa2 is de kolommen-grid daarbinnen. */
.wa2-root, .wa2-message-menu {
  --wa2-bubble-green: #DCF8C6;
}
.wa2-root, .wa2-message-backdrop {
  --wa2-menu-backdrop: rgba(40,45,40,.22);
}
.wa2-root {
  --font-display: var(--font-body);
  --fg-muted: #706D68;
  /* --wa2-search-bg staat sinds 2026-09-18 bij de globale tokens: Inbox deelt
     de zoekbalk en viel hier buiten de scope. */
  --wa2-filter-active: #E8EFF2;
  font-size: 13.5px; line-height: 1.45;
  --wa2-koper-burnt: #B5612E;
  --wa2-canvas: #F7F5F2;
  --wa2-read: #4FB6EC;
  flex: 1; min-height: 0; height: 100%;
  display: flex; flex-direction: column;
  /* Geen padding: de inbox vult het venster van rand tot rand, zoals in het
     ontwerp. De drie kolommen scheiden onderling met een haarlijn; er zit geen
     omkadering of afronding omheen. */
  padding: 0;
}
.wa2 {
  flex: 1;
  min-height: 0;
  display: grid;
  /* 360 / 340+300: exact de kolombreedtes uit reference/whatsapp-v2.css. Met de
     sidebar open levert de lijst 20px in zodat de thread niet te smal wordt. */
  grid-template-columns: 360px minmax(0, 1fr);
  /* Eén doorlopend vlak i.p.v. drie losse kaarten: geen gap, geen omkadering,
     de kolommen scheiden met een haarlijn (border-right op de lijst,
     border-left op het profiel). overflow:hidden houdt het profielpaneel
     binnen beeld wanneer het onder 1200px als overlay schuift. */
  gap: 0;
  background: var(--white);
  overflow: hidden;
}
.wa2--info { grid-template-columns: 320px minmax(0, 1fr) 340px; }

/* ── Gesprekkenlijst ──────────────────────────────────────── */
.wa2-list {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative;
}
.wa2-lhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 10px; position: relative; }
.wa2-lhead b { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--fg-primary); }
.wa2-hbtns { display: flex; gap: 8px; }
.wa2-iconbtn {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--fg-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 140ms; flex: none; padding: 0;
}
.wa2-iconbtn:hover { border-color: var(--border-strong); color: var(--fg-primary); }
.wa2-iconbtn--pri { background: var(--navy); border-color: var(--navy); color: var(--white); }
.wa2-iconbtn--pri:hover { background: var(--deep-ink); color: var(--white); }
.wa2-iconbtn--sm { width: 28px; height: 28px; }
.wa2-iconbtn--act { border-color: var(--koper); color: var(--wa2-koper-burnt); background: rgba(217,123,61,0.06); }
.wa2-menu {
  position: absolute; top: 52px; right: 16px; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(23,56,79,0.14); padding: 5px; min-width: 210px;
}
.wa2-menu--pill { top: calc(100% + 4px); left: 0; right: auto; }
.wa2-menu--up { bottom: calc(100% + 6px); top: auto; right: 0; min-width: 150px; }
.wa2-menu--rec { top: calc(100% - 4px); left: 16px; right: auto; }
.wa2-menu--tpl { min-width: 320px; max-width: 360px; padding: 8px; left: 0; right: auto; max-height: 320px; overflow-y: auto; }
.wa2-mitem {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
  color: var(--fg-primary); padding: 9px 11px; border-radius: 8px; cursor: pointer;
  background: none; border: none; width: 100%; text-align: left; font-family: inherit;
}
.wa2-mitem:hover { background: rgba(0,0,0,0.04); }
.wa2-mitem--sub { padding-left: 34px; color: var(--fg-secondary); }
/* Sneltoets-hint rechts in het menu-item: cmd-klik is anders onvindbaar. */
.wa2-mitem__hint {
  margin-left: auto; padding-left: 12px; font-style: normal;
  font-size: 11px; color: var(--fg-muted);
}
.wa2-mitem--on { background: rgba(217,123,61,0.08); color: var(--wa2-koper-burnt); }
.wa2-mhead { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); padding: 4px 8px 8px; }
.wa2-mitem--tpl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px;
  background: var(--surface); transition: all 120ms;
}
.wa2-mitem--tpl:last-child { margin-bottom: 0; }
.wa2-mitem--tpl:hover { border-color: rgba(217,123,61,0.5); background: rgba(217,123,61,0.04); }
.wa2-mitem--tpl b { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg-primary); }
/* Inbox deelt deze regels sinds 2026-09-18 (afspraak met Coen: "Inbox is niet
   gelijk aan WhatsApp qua zoekbalk en header"). Bewust dezelfde SELECTOR en
   geen tweede kopie: Inbox had een eigen blok en dat was stil uit elkaar
   gelopen -- 34px hoog met 10px-hoeken tegen 38px met een pilvorm, een andere
   achtergrond, een andere randkleur en 13px letters tegen 14px. Twee kopieën
   lopen opnieuw uit elkaar zodra iemand er één bijwerkt.
   tests/test_inbox_wa_pariteit.py bewaakt dat ze samen blijven. */
.wa2-search, .inbox-search {
  margin: 0 16px 10px; display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; color: var(--fg-muted);
}
.wa2-search:focus-within, .inbox-search:focus-within { border-color: var(--koper); box-shadow: var(--shadow-ring); background: var(--surface); }
.wa2-search input, .inbox-search input { border: none; background: transparent; outline: none; font: 400 14px/20px var(--font-body); padding: 8px 0; color: var(--fg-primary); width: 100%; min-width: 0; }
.wa2-search input::placeholder, .inbox-search input::placeholder { color: var(--fg-muted); opacity: 1; }
.wa2-pillsrow { position: relative; flex: none; }
.wa2-pills { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
.wa2-pills::-webkit-scrollbar { display: none; }
.wa2-pillwrap { position: relative; flex: none; }
.wa2-pill {
  flex: none; font-size: 12.5px; font-weight: 500; color: var(--fg-secondary);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 12px;
  white-space: nowrap; background: var(--surface); cursor: pointer; transition: all 140ms; font-family: inherit;
}
.wa2-pill:hover { border-color: rgba(0,0,0,0.2); }
/* Drie pills passen in de 360px-kolom, maar "Recruiter: <lange naam>" niet:
   die kapt af i.p.v. de rij stil te laten overlopen. */
.wa2-pill--rec { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; min-width: 95px; max-width: 146px; overflow: hidden; text-overflow: ellipsis; }
.wa2-pill--rec > span { overflow: hidden; text-overflow: ellipsis; }
.wa2-pill small { font-size: 11px; font-weight: 400; opacity: .8; margin-left: 3px; }
.wa2-pill.on { background: var(--navy); border-color: var(--navy); color: var(--white); }
.wa2-arch {
  display: flex; align-items: center; gap: 10px; margin: 0 8px; padding: 10px 8px;
  border: none; background: none; border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--fg-secondary); cursor: pointer;
  text-align: left; border-radius: 0; width: calc(100% - 16px); font-family: inherit;
}
.wa2-arch:hover { color: var(--fg-primary); }
.wa2-arch svg { color: var(--fg-muted); flex: none; }
.wa2-archcnt { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--fg-tertiary); background: rgba(0,0,0,0.05); border-radius: 999px; padding: 2px 8px; }
.wa2-items { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--border); }
.wa2-items::-webkit-scrollbar { width: 8px; }
.wa2-items::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
.wa2-empty { text-align: center; color: var(--fg-muted); font-size: 13px; padding: 28px 12px; }
/* "Meer gesprekken laden" onder de rijen: de lijst komt per pagina binnen en
   moet zelf melden dat er meer is, in plaats van stil af te kappen. */
.wa2-meer {
  display: block; width: 100%; padding: 12px; border: none; border-top: 1px solid var(--border);
  background: none; color: var(--koper); font: 500 13px var(--font-body); cursor: pointer;
}
.wa2-meer:hover { background: var(--bg); }
.wa2-meer:disabled { color: var(--fg-muted); cursor: default; }
.wa2-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer;
  position: relative; border-bottom: 1px solid rgba(0,0,0,0.04); transition: background 120ms;
}
.wa2-item:hover { background: rgba(0,0,0,0.025); }
.wa2-item.on { background: rgba(217,123,61,0.08); box-shadow: inset 3px 0 0 var(--koper); }
.wa2-item.sel { background: rgba(23,56,79,0.06); }
.wa2-ck {
  flex: none; width: 18px; height: 18px; border: 1.5px solid var(--border-strong);
  border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--white);
}
.wa2-ck.on { background: var(--navy); border-color: var(--navy); }
.wa2-ava {
  flex: none; width: 34px; height: 34px; border-radius: 999px; background: var(--sand);
  color: var(--navy); display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 600; position: relative;
}
.wa2-ava--lg { width: 40px; height: 40px; }
.wa2-ava--xl { width: 48px; height: 48px; font-size: 14px; }
.wa2-presence {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--wa-green); border: 2px solid var(--surface);
}
.wa2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.35; }
.wa2-r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wa2-r1 b { font-size: 13px; font-weight: 600; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa2-r1 i { font-style: normal; font-size: 10.5px; color: var(--fg-muted); flex: none; }
.wa2-r2 { display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: 12px; color: var(--fg-secondary); min-width: 0; }
.wa2-r2__preview { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa2-r2__meta { display: inline-flex; align-items: center; gap: 6px; flex: none; }
/* Werkvoorraad en eigenaar delen de derde regel van het inboxontwerp. */
.wa2-r3 { font-size: 11px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa2-unread {
  flex: none; min-width: 18px; height: 18px; border-radius: 999px; background: var(--koper);
  color: var(--white); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.wa2-bulkbar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--navy); color: var(--white); flex: none; flex-wrap: wrap; }
.wa2-bulkbar b { font-size: 12.5px; font-weight: 600; margin-right: 4px; white-space: nowrap; }
.wa2-bulkbar button {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--white); background: rgba(255,255,255,0.14); border: none; border-radius: 8px;
  padding: 7px 11px; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.wa2-bulkbar button:hover { background: rgba(255,255,255,0.24); }
.wa2-bulkbar button.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.3); }

/* ── Gespreksvenster ──────────────────────────────────────── */
.wa2-thread {
  background: var(--wa2-canvas);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative;
}
.wa2-thead { display: flex; align-items: center; gap: 11px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex: none; }
.wa2-back { display: none; }
.wa2-headbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.wa2-tmeta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wa2-tmeta b { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa2-tmeta span { font-size: 12px; color: var(--fg-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa2-headmeta { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.wa2-headmeta:empty { display: none; }
.wa2-statusfield { display: inline-flex; align-items: center; gap: 7px; padding-left: 9px; border-left: 1px solid var(--border); }
.wa2-statuslabel { color: var(--fg-tertiary); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.wa2-headactions { display: flex; align-items: center; gap: 11px; flex: none; }
.wa2-fchip { flex: none; font-size: 12px; font-weight: 600; color: var(--navy); background: rgba(23,56,79,0.07); border-radius: 999px; padding: 6px 13px; }
.wa2-lstatus { border: 1px solid var(--border); border-radius: 8px; font-family: inherit; cursor: pointer; max-width: 132px; padding: 5px 10px; }
.wa2-lstatus:focus { outline: 2px solid rgba(23,56,79,0.22); outline-offset: 1px; }
.wa2-lstatus--new, .wa2-phase.wa2-lstatus--new { color: #1D4ED8; background: rgba(59,130,246,0.08); }
.wa2-lstatus--contacted, .wa2-phase.wa2-lstatus--contacted { color: #C2410C; background: rgba(249,115,22,0.08); }
.wa2-lstatus--qualified,
.wa2-lstatus--converted, .wa2-phase.wa2-lstatus--qualified, .wa2-phase.wa2-lstatus--converted { color: #15803D; background: rgba(22,163,74,0.08); }
.wa2-lstatus--disqualified, .wa2-phase.wa2-lstatus--disqualified { color: #6B7280; background: rgba(156,163,175,0.08); }
.wa2-canvas { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; }
.wa2-canvas::-webkit-scrollbar { width: 8px; }
.wa2-canvas::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
.wa2-date { align-self: center; font-size: 11px; font-weight: 600; color: var(--fg-tertiary); background: rgba(0,0,0,0.05); border-radius: 999px; padding: 4px 12px; margin: 6px 0; }
.wa2-msg {
  position: relative; max-width: 62%; padding: 9px 13px; font-size: 13.5px; line-height: 1.5;
  border-radius: 13px; color: var(--fg-primary); white-space: pre-wrap; word-break: break-word;
}
/* BEWUSTE OMKERING t.o.v. de handoff: uitgaand groen rechts, inkomend wit
   links -- zoals recruiters het uit WhatsApp zelf kennen (spec §2). */
.wa2-msg--out { align-self: flex-end; background: var(--wa2-bubble-green); border-bottom-right-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
/* Citaat boven een bubbel: het bericht waarop de kandidaat antwoordt. Zelfde
   opzet als WhatsApp -- een blokje met een gekleurde rand links. */
.wa2-quote {
  display: block; margin-bottom: 6px; padding: 6px 9px; border-radius: 6px;
  border-left: 3px solid var(--koper); background: rgba(0,0,0,0.04);
  font-size: 12.5px; line-height: 1.4; color: var(--fg-secondary);
}
.wa2-quote i { display: block; font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--koper); }
.wa2-quote--weg { color: var(--fg-muted); font-style: italic; }
.wa2-msg--out .wa2-quote { background: rgba(255,255,255,0.45); }
.wa2-msg--in { align-self: flex-start; background: var(--white); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.wa2-msg > i { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-style: normal; font-size: 11px; color: var(--fg-secondary); margin-top: 3px; }
.wa2-msg .wa-check svg { width: 14px; height: 11px; }
.wa2-msg .wa-check--read { color: var(--wa2-read); }
.wa2-check { display: inline-flex; color: var(--fg-muted); }
.wa2-check.on { color: var(--wa2-read); }
/* Test-modus: geen vinkjes, wel een nadrukkelijk andere bubbel (incident 01-08). */
.wa2-msg--dryrun { background: transparent; border: 1.5px dashed #F59E0B; box-shadow: none; color: var(--fg-secondary); }
.wa2-msg--sched { background: var(--surface); border: 1px dashed var(--border-strong); box-shadow: none; align-self: flex-end; }
.wa2-msg--sched-failed { border-color: rgba(220,38,38,0.45); }
/* 'unknown' (R3a): aflevering onzeker, mogelijk wél bezorgd -- neutraal, geen rood */
.wa2-msg--sched-unknown { border-color: var(--border-strong); }
.wa2-msg-channel { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--fg-tertiary); margin-bottom: 4px; }
.wa2-schedwhen { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--fg-tertiary); margin-bottom: 4px; }
.wa2-schederr { font-size: 11px; color: var(--badge-red-fg, #DC2626); margin-top: 4px; }
.wa2-msg--sched-unknown .wa2-schederr { color: var(--fg-secondary); }
.wa2-schedact { font-size: 11px; font-weight: 600; color: var(--wa2-koper-burnt); cursor: pointer; background: none; border: none; padding: 0 0 0 8px; font-family: inherit; }
.wa2-schedact:hover { text-decoration: underline; }
.wa2-attach { display: block; margin-top: 4px; cursor: pointer; }
.wa2-attach img { max-width: 100%; border-radius: 9px; display: block; }
.wa2-attach--file { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-secondary); }
.wa2-unreadsep { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 10px 4px 4px; }
.wa2-unreadsep::before, .wa2-unreadsep::after { content: ""; flex: 1; height: 1px; background: rgba(217,123,61,0.28); }
.wa2-unreadsep span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wa2-koper-burnt); }
.wa2-ev { align-self: center; font-size: 12px; color: var(--fg-tertiary); margin: 4px 0; text-align: center; }
.wa2-ev b { color: var(--fg-secondary); }
.wa2-comp { padding: 10px 14px 12px; background: var(--surface); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; flex: none; }
.wa2-locked { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--fg-tertiary); }
.wa2-tplbar { display: flex; flex-direction: column; align-items: stretch; gap: 4px; max-height: 236px; overflow-y: auto; }

/* ── Aanbevelingsbalk + draftpaneel ───────────────────────── */
.wa2-cbar { display: flex; align-items: center; gap: 9px; border: 1px solid rgba(217,123,61,0.4); background: rgba(217,123,61,0.06); border-radius: 12px; padding: 9px 12px; position: relative; }
.wa2-sugpill {
  flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px;
  border-radius: 6px; background: rgba(181,97,46,0.1); color: var(--wa2-koper-burnt);
}
.wa2-sugpill .d { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.wa2-cbtxt { flex: 1; min-width: 0; font-size: 12.5px; color: var(--fg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa2-cbtxt b { color: var(--fg-primary); }
.wa2-cbopen { flex: none; font-size: 12px; font-weight: 600; color: var(--wa2-koper-burnt); border: 1px solid rgba(217,123,61,0.5); border-radius: 8px; padding: 6px 12px; background: var(--surface); cursor: pointer; font-family: inherit; }
.wa2-cbsend { flex: none; font-size: 12px; font-weight: 600; color: var(--white); background: var(--navy); border: none; border-radius: 8px; padding: 7px 13px; cursor: pointer; font-family: inherit; }
.wa2-cbsend:hover { background: var(--deep-ink); }
.wa2-cbsend[disabled], .wa2-lnk[disabled] { opacity: 0.55; cursor: default; }
.wa2-draft { border: 1px solid rgba(217,123,61,0.4); background: linear-gradient(180deg, rgba(217,123,61,0.07), var(--surface) 55%); border-radius: 12px; padding: 12px 14px; }
.wa2-draftline { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wa2-draftline b { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; flex: 1; }
.wa2-drafttext {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); padding: 10px 12px; font: 400 13.5px/1.55 var(--font-body);
  color: var(--fg-primary); resize: vertical; outline: none;
}
.wa2-drafttext:focus { border-color: var(--koper); box-shadow: var(--shadow-ring); }
.wa2-draftbar { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.wa2-lnk { font-size: 12px; font-weight: 600; color: var(--wa2-koper-burnt); background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; font-family: inherit; white-space: nowrap; flex-shrink: 0; }
.wa2-lnk:hover { text-decoration: underline; }
.wa2-sp { flex: 1; }

/* ── Composer-rij ─────────────────────────────────────────── */
.wa2-crow { display: flex; align-items: flex-end; gap: 9px; }
.wa2-inputwrap { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; }
.wa2-inputwrap:focus-within { border-color: var(--koper); box-shadow: var(--shadow-ring); background: var(--surface); }
/* Composer-invoerveld. Twee dingen bewust vastgelegd:
   - line-height in HELE pixels (was 1.45 x 13.5px = 19.575px). Met die
     sub-pixelrest paste de ene regel van rows="1" net niet in de berekende
     hoogte, en toonde de textarea permanent scrollbalken -- ook leeg. Op een
     Mac met "Toon schuifbalken: altijd" stonden die dus continu in beeld.
     min-height 40px = 20px regel + 2x10px padding (border-box, border: none).
   - overflow-x hard uit: een soft-wrap textarea hoort nooit horizontaal te
     scrollen, dus die balk is altijd ongewenst. Verticaal pas scrollen als
     autoGrow op max-height (220px) is uitgekomen. */
.wa2-input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none; resize: none;
  padding: 10px 14px; font: 400 13.5px/20px var(--font-body); color: var(--fg-primary);
  min-height: 40px; max-height: 220px; overflow-x: hidden; overflow-y: auto;
}
/* Resultatenlijst in "Nieuw gesprek". Op desktop een eigen scrollgebied zodat de
   modal niet meegroeit met 15 resultaten. Op mobiel juist GEEN eigen maximum:
   de modal is daar fullscreen (.modal height:100vh + .modal-body flex:1) en
   scrollt zelf al. Een max-height hier liet onderin een leeg blok staan. */
.wa-convsearch { max-height: 350px; overflow-y: auto; }
@media (max-width: 768px) {
  .wa-convsearch { max-height: none; overflow-y: visible; }
}

/* "Dit nummer lijkt bij <lead> te horen" boven een onbekend gesprek. */
.wa2-herken {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 9px 14px; background: var(--koper-50, #FFF3E8);
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--fg-secondary);
}
.wa2-herken__tekst { flex: 1; min-width: 0; }
.wa2-herken__tekst b { color: var(--fg-primary); font-weight: 600; }
.wa2-herken__vac {
  display: inline-block; margin-left: 2px; padding: 1px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.75); border: 1px solid var(--border);
  font-size: 12px; color: var(--fg-secondary); white-space: nowrap;
}
.wa2-herken__btn {
  flex: none; border: 1px solid var(--koper); background: var(--koper); color: #fff;
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.wa2-herken__btn:hover:not(:disabled) { background: var(--koper-hover); border-color: var(--koper-hover); }
.wa2-herken__btn:disabled { opacity: 0.6; cursor: default; }
.wa2-herken__x {
  flex: none; border: none; background: none; color: var(--fg-muted);
  cursor: pointer; padding: 2px; display: inline-flex; align-items: center;
}
.wa2-herken__x:hover { color: var(--fg-secondary); }

/* Melding in plaats van een leeg iframe bij een niet-toonbaar bestandstype. */
.wa2-nopreview { padding: 28px 4px 8px; text-align: center; }
.wa2-nopreview__t { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--fg-primary); }
.wa2-nopreview__s { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-tertiary); }

/* De plus bundelt de actieknoppen op mobiel; op desktop staan ze los. */
.wa2-plusonly { display: none; }
.wa2-emoji { flex: none; background: none; border: none; color: var(--fg-muted); cursor: pointer; padding: 0 10px 0 4px; display: inline-flex; align-items: center; }
.wa2-emoji:hover { color: var(--koper); }
.wa2-sendbtn {
  flex: none; width: 42px; height: 42px; border-radius: 999px; background: var(--navy); color: var(--white);
  border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.wa2-sendbtn:hover { background: var(--deep-ink); }

/* ── Contextsidebar ───────────────────────────────────────── */
.wa2-side {
  background: var(--bg); border-left: 1px solid var(--border); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto;
}
/* De naam is het belangrijkste in deze kop, maar hij was het enige dat kon
   krimpen: "Bob t Hart" werd "Bo…" en het nummer "+31…" terwijl de knop
   ernaast zijn volle breedte hield. De naamkolom krijgt daarom een echte
   basisbreedte, en de rij mag afbreken -- past de knop niet meer, dan zakt hij
   naar de volgende regel in plaats van de naam op te eten. */
.wa2-hero { display: flex; align-items: center; gap: 11px; padding: 2px 2px 0; flex-wrap: wrap; }
.wa2-hname { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wa2-hname b { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa2-hname span { font-size: 11.5px; color: var(--fg-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa2-sideclose { display: none; }
.wa2-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; flex: none; }
.wa2-card p { margin: 6px 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--fg-secondary); }
.wa2-card p b { color: var(--fg-primary); }
.wa2-ctitle { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg-primary); display: flex; align-items: center; gap: 8px; }
.wa2-track { display: flex; gap: 3px; margin-top: 10px; }
.wa2-track i { flex: 1; height: 5px; border-radius: 3px; background: rgba(0,0,0,0.07); }
.wa2-track i.on { background: var(--koper); }
.wa2-tracklbl { font-size: 12px; color: var(--fg-secondary); margin-top: 7px; }
.wa2-log { display: flex; gap: 10px; font-size: 12px; color: var(--fg-secondary); padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.wa2-log:last-child { border-bottom: 0; }
.wa2-log i { font-style: normal; flex: none; width: 44px; color: var(--fg-muted); font-size: 11px; padding-top: 1px; }
.wa2-avg { font-size: 12px; color: var(--fg-tertiary); padding: 5px 0 5px 20px; position: relative; }
.wa2-avg::before { content: '○'; position: absolute; left: 2px; color: var(--fg-muted); }
.wa2-avg.on { color: var(--fg-secondary); }
.wa2-avg.on::before { content: '●'; color: var(--koper); }
.wa2-cv__head { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.wa2-cv__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa2-cv__name { font-size: 12.5px; font-weight: 600; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa2-cv__sub { font-size: 11px; color: var(--fg-tertiary); }
.wa2-cv__frame { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.wa2-cv__frame iframe { display: block; width: 100%; height: 320px; border: 0; }
.wa2-cvbar { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

/* ── Tussenmaat: sidebar als overlay zodat de thread niet gecrusht wordt ──── */
@media (max-width: 1250px) {
  .wa2, .wa2--info { grid-template-columns: 360px minmax(0, 1fr); position: relative; }
  .wa2--info .wa2-side {
    position: absolute; right: 0; top: 0; bottom: 0; width: 300px; z-index: 20;
    box-shadow: -12px 0 32px rgba(23,56,79,0.14);
  }
  .wa2--info .wa2-sideclose { display: inline-flex; }
}

.wa2-navigation { display: none; }
.wa2-list-error { padding: 16px; font-size: 13px; color: var(--fg-secondary); }
.wa2-list-error button { display: block; margin-top: 8px; min-height: 36px; }
.wa2-pending-attachment { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.wa2-pending-attachment[hidden] { display: none; }
.wa2-pending-attachment span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wa2-pending-attachment button { border: 0; background: none; color: var(--fg-secondary); min-height: 36px; cursor: pointer; }
.modal.wa2-convert-modal { width: min(480px, 100%); border-radius: 16px; max-height: calc(100dvh - 40px); }
.wa2-convert { display: flex; flex-direction: column; gap: 16px; }
.wa2-convert-progress { margin: 0; color: var(--fg-secondary); font-size: 12px; }
.wa2-convert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wa2-convert-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--fg-secondary); font-size: 12px; }
.wa2-convert-field input, .wa2-convert-field select, .wa2-convert-field textarea { width: 100%; min-height: 42px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--surface); color: var(--fg-primary); font: 400 14px/1.4 var(--font-body); }
.wa2-convert-field textarea { min-height: 78px; resize: vertical; }
.wa2-convert-cv { border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.wa2-convert-cv h3 { margin: 0; font: 600 14px var(--font-body); }
.wa2-convert-cv-field { display: flex; align-items: flex-start; gap: 10px; }
.wa2-convert-cv-field > .wa2-convert-field { flex: 1; }
.wa2-convert-cv-field > input { margin-top: 28px; width: 18px; height: 18px; }
.wa2-convert-review { display: grid; grid-template-columns: minmax(100px, 1fr) 2fr; gap: 12px; margin: 0; font-size: 13px; }
.wa2-convert-review dt { color: var(--fg-secondary); }
.wa2-convert-review dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.wa2-convert-notice, .wa2-convert-error { margin: 0; font-size: 13px; line-height: 1.5; }
.wa2-convert-notice { color: var(--fg-secondary); }
.wa2-convert-error { color: var(--badge-red-fg); }
.wa2-convert-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--border); }
.wa2-convert-actions button { min-height: 44px; }
.wa2-message-backdrop { position: fixed; inset: 0; z-index: 149; background: var(--wa2-menu-backdrop); backdrop-filter: blur(5px); }
.wa2-message-menu { position: fixed; z-index: 150; left: 50%; top: 50%; transform: translate(-50%, -50%); right: auto; bottom: auto; width: min(390px, calc(100vw - 20px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 0; border: 0; background: none; box-shadow: none; gap: 12px; }
.wa2-message-card { background: var(--surface); border-radius: 20px; overflow: hidden; }
.wa2-message-menu .wa2-mitem { width: 100%; min-height: 50px; border-radius: 0; border-bottom: 1px solid var(--border); padding: 12px 18px; font-size: 14px; }
.wa2-message-menu .wa2-mitem:last-child { border: 0; color: var(--badge-red-fg); }
.wa2-message-preview { background: var(--surface); border-radius: 14px; padding: 12px 14px; font: 400 14px/1.5 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24dvh; overflow: auto; }
.wa2-message-preview.outgoing { background: var(--wa2-bubble-green); }
.wa2-message-close { align-self: flex-end; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--fg-secondary); font-size: 24px; cursor: pointer; }
.wa2-msg { -webkit-touch-callout: none; touch-action: pan-y; }
.wa2-msg-actions { position: absolute; top: 0; right: 0; border: 0; border-radius: 8px; background: var(--surface); color: var(--fg-secondary); width: 28px; height: 28px; cursor: pointer; opacity: 0; }
.wa2-msg:hover .wa2-msg-actions, .wa2-msg:focus-within .wa2-msg-actions { opacity: 1; }
@media (hover: none) {
  .wa2-msg-actions { display: none; }
}
.wa2-person-signals { display: flex; flex-wrap: wrap; gap: 8px; }
.wa2-side { padding: 0; gap: 0; background: var(--surface); }
.wa2-side > * { flex-shrink: 0; }
.modal.wa2-contact-dialog { background: var(--surface-alt); border-radius: 16px; width: min(480px, 100%); height: min(760px, calc(100dvh - 40px)); }
.wa2-contact-dialog .modal-body { display: flex; flex-direction: column; min-height: 0; padding: 0 18px 18px; }
.wa2-contact-search { min-height: 38px; height: 38px; flex: none; display: flex; border: 1px solid var(--border); background: var(--bg); border-radius: 999px; margin: 0 0 12px; padding: 0 12px; }
.wa2-contact-search input { width: 100%; padding: 8px 0; border: 0; background: none; font: 400 14px var(--font-body); outline: none; }
.wa2-contact-results { flex: 1; min-height: 0; overflow: auto; }
.wa2-contact-group h3 { margin: 0; padding: 10px 14px 6px; font: 600 12px var(--font-body); color: var(--fg-secondary); }
.wa2-contact-card { border: 0; border-radius: 16px; overflow: hidden; background: var(--surface); }
.wa2-contact-row { position: relative; width: 100%; min-height: 66px; display: flex; gap: 12px; align-items: center; padding: 0 14px; border: 0; background: none; text-align: left; cursor: pointer; }
.wa2-contact-row:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 64px; right: 14px; border-bottom: 1px solid var(--border); }
.wa2-contact-row:hover { background: var(--surface-hover); }
.wa2-contact-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--navy); font-size: 12px; }
.wa2-contact-text { min-width: 0; flex: 1; }
.wa2-contact-text strong, .wa2-contact-text small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa2-contact-text strong { font: 600 14px/1.45 var(--font-body); color: var(--fg-primary); }
.wa2-contact-text small { margin-top: 2px; }
.wa2-contact-text small, .wa2-contact-empty, .wa2-contact-notice { font: 400 12px/1.5 var(--font-body); color: var(--fg-secondary); }
.wa2-person-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 16px; }
.wa2-person-head h2 { margin: 0; font: 600 15px var(--font-body); }
.wa2-person-head .wa2-sideclose { display: inline-flex; width: 44px; height: 44px; }
.wa2-person-contact { padding: 18px 18px 16px; }
.wa2-person-identity { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; font-size: 16px; line-height: 1.4; }
.wa2-person-identity > div { min-width: 0; overflow-wrap: anywhere; }
.wa2-person-contact a, .wa2-owner-field { display: flex; align-items: center; gap: 8px; min-height: 28px; color: var(--fg-primary); text-decoration: none; font-size: 13px; overflow-wrap: anywhere; }
.wa2-person-contact a svg, .wa2-owner-field > svg { width: 14px; height: 14px; flex: none; color: var(--fg-muted); }
.wa2-person-contact p { margin: 0; font-size: 12px; color: var(--fg-secondary); }
.wa2-owner-field select { border: 0; background: transparent; color: var(--fg-primary); font: inherit; min-height: 36px; max-width: 100%; cursor: pointer; }
.wa2-side .wa2-card { border: 0; border-radius: 0; box-shadow: none; padding: 16px 0; margin: 0 18px; border-top: 1px solid var(--border); }
.wa2-side .wa2-ctitle { margin: 0 0 9px; font: 600 13px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; }
.wa2-side .wa2-card p { font-size: 13px; color: var(--fg-secondary); line-height: 1.5; }
.wa2-side .btn { font: 400 13px/1.4 var(--font-body); min-height: 36px; padding: 8px 12px; border-radius: 8px; white-space: normal; }
.wa2-side .wa2-profile-button { display: block; margin-top: 8px; width: 100%; }
.wa2-side .wa2-unlinked > .btn { display: flex; width: 100%; justify-content: center; }
.wa2-side .wa2-unlinked > .btn + .btn { margin-top: 8px; }
.wa2-person-contact .wa2-consent-alert { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 10px; background: #fff4e8; border-left: 3px solid #bd793d; line-height: 1.6; }
.wa2-consent-alert > svg { flex: none; margin-top: 3px; }
.wa2-panel-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.wa2-next-action { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; }
.wa2-next-action b { font-weight: 550; }
.wa2-next-action span { color: var(--fg-secondary); font-size: 12px; }
.wa2-task-link { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: 12px; color: #a15a2e; }
.wa2-vacancy { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 0; background: none; color: var(--fg-primary); padding: 0; text-align: left; font: 400 13px/1.5 var(--font-body); }
button.wa2-vacancy { cursor: pointer; }
.wa2-vacancy > span { min-width: 0; flex: 1; }
.wa2-vacancy b, .wa2-vacancy small { display: block; overflow-wrap: anywhere; }
.wa2-vacancy b { font-weight: 600; }
.wa2-vacancy small { color: var(--fg-muted); font-size: 12px; }
.wa2-vacancy > svg { flex: none; margin-top: 2px; color: var(--fg-muted); }
.wa2-phase { display: inline-block; margin-top: 7px; border-radius: 5px; padding: 2px 6px; color: #a15a2e; background: rgba(217,123,61,.1); font-size: 11px; }
/* Kaart "Vacatures": rijen onder elkaar, afgesloten vacatures gedempt. */
.wa2-vacancies .wa2-vacancy + .wa2-vacancy,
.wa2-vacancies details > .wa2-vacancy { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
.wa2-vacancy-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.wa2-vacancy-meta .wa2-phase { margin-top: 0; }
.wa2-vacancy-when { font-size: 11.5px; color: var(--fg-tertiary); }
.wa2-vacancy.is-gesloten b { color: var(--fg-secondary); font-weight: 500; }
.wa2-phase.wa2-phase--gesloten { color: #6B7280; background: rgba(156,163,175,0.12); }
.wa2-ccount { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(0,0,0,0.05); color: var(--fg-secondary); font: 600 11px/1 var(--font-body); }
.wa2-vacancies:focus { outline: none; }
.wa2-vacancies:focus-visible { outline: 2px solid rgba(23,56,79,0.22); outline-offset: 2px; }
/* Mobiel blijft de kop leeg (`.wa2-tmeta > span` verborgen); alleen breder een flexregel. */
@media (min-width: 769px) { .wa2-tmeta .wa2-tsub { display: flex; align-items: baseline; min-width: 0; } }
.wa2-tmeta .wa2-tsub > span { min-width: 0; }
.wa2-tmeta .wa2-tsub > span + span { flex: 1 1 0; margin-left: 4px; }
.wa2-tmeta .wa2-vacancy-count { font-size: 12px; line-height: inherit; margin-left: 5px; }
.wa2-activity { position: relative; border-left: 1px solid var(--border); padding: 0 0 14px 16px; font-size: 13px; line-height: 1.5; }
.wa2-activity::before { content: ''; position: absolute; left: -3px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-muted); }
.wa2-activity small { display: block; color: var(--fg-muted); font-size: 12px; margin-top: 3px; }
.wa2-side details { margin-top: 12px; font-size: 13px; }
.wa2-side summary { cursor: pointer; padding: 8px 0; min-height: 36px; }
.wa2-lead-controls { display: flex; flex-direction: column; gap: 8px; }
.wa2-lead-controls select { width: 100%; min-height: 36px; }
.wa2-document-row { display: flex; width: 100%; min-height: 44px; align-items: center; gap: 9px; border: 0; padding: 0; background: transparent; color: var(--fg-primary); cursor: pointer; text-align: left; }
.wa2-document-row + .wa2-document-row { margin-top: 12px; }
.wa2-document-row > span { flex: 1; min-width: 0; }
.wa2-document-row b, .wa2-document-row small { display: block; overflow-wrap: anywhere; }
.wa2-document-row b { font: 500 13px/1.5 var(--font-body); }
.wa2-document-row small { font: 400 12px/1.5 var(--font-body); color: var(--fg-muted); margin-top: 4px; }
.wa2-context-error { padding: 12px 20px; font-size: 13px; color: var(--fg-secondary); }
.wa2-context-error button { display: block; margin-top: 8px; }
.modal.wa2-document-modal { width: min(800px, calc(100vw - 28px)); height: auto; max-height: calc(100dvh - 28px); border-radius: 14px; }
.modal.wa2-document-compact { width: min(480px, calc(100vw - 20px)); }
.wa2-document-modal .modal-header { padding: 15px 18px; }
.wa2-document-modal .modal-body { padding: 20px; }
.wa2-document-modal .modal-footer { padding: 12px 16px; }
.wa2-document-fallback .wa2-document-canvas { height: auto; flex: none; }
.wa2-contact-dialog .modal-header { min-height: 68px; justify-content: center; padding: 18px; }
.wa2-contact-dialog .modal-header h2 { width: 100%; text-align: center; }
.wa2-contact-dialog .modal-close { position: absolute; right: 18px; }
.wa2-document-modal .modal-body { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.wa2-document-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wa2-document-canvas { flex: none; height: min(60dvh, 505px); min-height: 0; }
.wa2-document-content { border: 0; display: block; width: 100%; height: 100%; object-fit: contain; color-scheme: light; background: var(--white); }
.wa2-document-status, .wa2-document-subtitle { font-size: 13px; color: var(--fg-secondary); }
.wa2-document-status:empty { display: none; }
.wa2-document-modal .modal-footer button { min-height: 44px; }
.wa2-menu { flex-direction: column; }
#wa2PlusMenu { left: 0; right: auto; }
.wa2-person-name { border: 0; background: none; padding: 0; text-align: left; color: var(--fg-primary); font: 600 15px/1.45 var(--font-body); cursor: pointer; }
.wa2-search, .inbox-search { background: var(--wa2-search-bg); border-color: rgba(23,56,79,.08); border-radius: 999px; min-height: 38px; height: 38px; padding: 0 12px; flex: none; }
.wa2-pills { gap: 6px; }
.wa2-pill { font-size: 12px; line-height: 1.45; padding: 5px 10px; min-height: 30px; }
.wa2-pill--work { font-size: 11.5px; min-height: 28px; padding: 4px 9px; }
.wa2-pill--work.on { background: rgba(217,123,61,.1); border-color: rgba(217,123,61,.6); color: #9B5025; }
.wa2-cbar { display: block; background: var(--surface-hover); border-color: var(--border); }
.wa2-suggestion-heading { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--fg-secondary); }
.wa2-suggestion-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; border: 0; background: none; padding: 4px 0 0; text-align: left; font: 400 13.5px/1.5 var(--font-body); color: var(--fg-primary); cursor: pointer; width: 100%; }
.wa2-comp { position: relative; }
.wa2-template-entry { align-self: flex-start; border: 0; border-radius: var(--radius-sm); padding: 10px 14px; background: var(--navy); color: var(--white); font: 500 13px var(--font-body); cursor: pointer; }
.wa2-template-anchor { align-self: flex-end; }
@media (min-width: 769px) {
  .wa2-pills { flex-wrap: wrap; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .wa2-item { padding: 9px 13px; }
  .wa2-pill { font-size: 11px; padding: 5px 8px; }
  .wa2, .wa2--info { grid-template-columns: 300px minmax(0, 1fr); }
}

/* ── Mobiel: één kolom, lijst OF thread ───────────────────── */
@media (max-width: 768px) {
  body.page-chat:has(.wa2-root) .mobile-header { display: none; }
  .wa2-person-contact { padding: 18px 20px 16px; }
  .wa2-side .wa2-card { margin-left: 20px; margin-right: 20px; }
  .wa2-side .wa2-ctitle, .wa2-side .btn, .wa2-side .wa2-card p, .wa2-next-action, .wa2-activity, .wa2-vacancy, .wa2-document-row b { font-size: 14px; }
  .wa2-side .btn, .wa2-side summary, .wa2-owner-field select { min-height: 44px; }
  .modal.wa2-convert-modal { width: calc(100vw - 20px); max-width: none; max-height: calc(100dvh - 24px); border-radius: 14px; }
  .modal.wa2-document-modal { width: calc(100vw - 28px); max-width: none; max-height: calc(100dvh - 28px); border-radius: 14px; }
  .modal.wa2-contact-dialog { position: fixed; bottom: 0; left: 0; width: 100%; max-width: none; height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); border-radius: 24px 24px 0 0; }
  .wa2-contact-search { height: 36px; min-height: 36px; }
  .wa2-contact-search input { padding: 7px 0; }
  .wa2-document-modal .modal-body { padding: 18px; }
  .modal.wa2-document-compact { width: calc(100vw - 20px); }
  .wa2-contact-text strong { font-size: 15px; }
  .wa2-convert-grid { grid-template-columns: 1fr; }
  .wa2-convert-field input, .wa2-convert-field select, .wa2-convert-field textarea, .wa2-contact-search input { font-size: 16px; }
  body.page-chat:has(.wa2-root) .app { padding-top: 0; }
  body.page-chat:has(.wa2-root) .content--chat { height: 100dvh; }
  .wa2-navigation { display: inline-flex; flex: none; border: 0; background: transparent; margin-left: -4px; }
  .wa2-lhead { gap: 8px; padding-top: 8px; padding-bottom: 6px; }
  .wa2-lhead > b { flex: 1; font-size: 19px; }
  .wa2-r1 b { font-size: 13.5px; }
  .wa2-hbtns { gap: 2px; }
  .wa2-lhead [data-act="l-menu"] { border-color: transparent; background: transparent; }
  .wa2-lhead [data-act="l-new"] { position: relative; isolation: isolate; width: 44px; height: 44px; border: 0; background: transparent; }
  .wa2-lhead [data-act="l-new"]::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--navy); z-index: -1; }
  .wa2-thead { align-items: center; padding: 8px; min-height: 61px; gap: 6px; }
  .wa2-tmeta > span, .wa2-headmeta, .wa2-headactions > [data-act="t-info"], .wa2-emoji { display: none; }
  .wa2-person-name { min-height: 44px; width: 100%; font-size: 14px; }
  .wa2-search, .inbox-search { min-height: 36px; height: 36px; background: var(--bg-secondary); border-color: transparent; box-shadow: none; }
  .wa2-search input, .inbox-search input { padding: 7px 0; }
  .wa2-pills { padding-top: 4px; gap: 7px; }
  .wa2-pill { font-size: 12px; line-height: 1.5; padding: 5px 11px; }
  .wa2-pill--rec { flex: none; width: 136px; }
  .wa2-pill--work { min-height: 30px; }
  .wa2-pill.on { background: var(--wa2-filter-active); color: var(--navy); border-color: #BED0D9; }
  .wa2-arch { border-top: 0; }
  .wa2-msg { padding: 9px 12px; }
  .wa2-canvas { padding: 14px; }
  .wa2-thead .wa2-iconbtn { border: 0; background: none; width: 44px; height: 44px; flex: none; }
  .wa2-thead .wa2-ava--lg { width: 34px; height: 34px; }
  .wa2-comp { padding: 8px 8px max(8px, env(safe-area-inset-bottom)); gap: 8px; }
  .wa2-crow { align-items: center; gap: 2px; }
  .wa2-plusonly > .wa2-iconbtn { width: 44px; height: 44px; border: 0; background: none; }
  .wa2-inputwrap { border-radius: 22px; background: var(--surface); }
  .wa2-template-anchor { position: static; }
  .wa2-template-anchor #templateSelectorBar, .wa2-comp > #templateSelectorBar { position: absolute; left: 8px; right: 8px; bottom: 64px; width: auto; max-height: min(55dvh, 360px); z-index: 30; }
  .wa2-sendbtn { width: 44px; height: 44px; min-width: 44px; border-radius: 999px; }
  .wa2-draftbar { flex-wrap: wrap; gap: 10px; }
  /* Eén kolom: de lijst laat zijn scheidingslijn vallen, er staat niets naast. */
  .wa2, .wa2--info { grid-template-columns: 1fr; gap: 0; }
  .wa2-list { border-right: none; }
  .wa2--info .wa2-side { position: relative; width: auto; box-shadow: none; z-index: auto; border-left: none; }
  .wa2--mob-list .wa2-thread, .wa2--mob-list .wa2-side { display: none; }
  .wa2--mob-thread .wa2-list { display: none; }
  .wa2--mob-thread.wa2--info .wa2-thread { display: none; }
  .wa2-back { display: inline-flex; border: none; background: none; width: 30px; }
  .wa2-thead { align-items: center; gap: 6px; padding: 8px; }
  .wa2-headbody { gap: 6px; }
  .wa2-headmeta { gap: 6px; }
  .wa2-statusfield { flex-basis: 100%; border-left: none; padding-left: 0; }
  .wa2-headactions { gap: 6px; }
  .wa2-sideclose { display: inline-flex; }
  .wa2-msg { max-width: 82%; }

  /* Composer op een telefoon: vier losse actieknoppen lieten te weinig over
     voor het tekstveld. Ze zitten hier achter de plus, zoals in WhatsApp. */
  .wa2-plusonly { display: inline-flex; }
  .wa2-deskonly { display: none; }
  .wa2-crow { gap: 2px; }

  /* iOS zoomt de hele pagina in zodra een invoerveld kleiner dan 16px focus
     krijgt, en zoomt daarna niet terug -- het gesprek was onleesbaar. 16px is
     de drempel, niet een smaakkeuze. Geldt ook voor het zoekveld in de lijst. */
  .wa2-input,
  .wa2-search input, .inbox-search input { font-size: 16px; }
  /* De regelhoogte staat op desktop in hele pixels (20px) om sub-pixel-overflow
     te vermijden; bij 16px is 20px te krap voor de staarten van g/j/p. Mee
     omhoog, en de min-height mee (22px regel + 2x10px padding). */
  .wa2-input { line-height: 22px; min-height: 38px; padding: 8px 12px; }
  .wa2-cbtxt { display: none; }
}
/* v1's .wa-reply gaat uit van een witte bubbel; op de groene uitgaande bubbel
   is dat onleesbaar. */
.wa2-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wa2-msg .wa-reply { background: rgba(255,255,255,0.75); border-color: rgba(0,0,0,0.1); color: var(--fg-secondary); }
.wa2-menu[hidden], .wa2-tplbar[hidden] { display: none; }

/* ── Documenten bij een klant (offertes, contracten, tarieflijsten) ──────
   Zelfde vormgeving als de documentenlijst bij een kandidaat: een document is
   een object dat je aanklikt, dus een witte kaart op de achtergrond, met het
   bestandstype vooraan. Eigen klassen omdat dit in de klassieke modal staat en
   niet in de workspace-shell. */
.cldocs { border-radius: var(--radius-sm); transition: background .12s, box-shadow .12s; }
.cldocs--sleep { background: var(--surface-hover); box-shadow: 0 0 0 2px var(--koper, #b87333) inset; }
.cldocs--bezig { opacity: .6; pointer-events: none; }
.cldoc {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
}
.cldoc:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.cldoc__badge {
  flex-shrink: 0;
  font: 600 10px var(--font-body);
  letter-spacing: .06em;
  color: #fff;
  padding: 4px 7px;
  border-radius: 5px;
}
.cldoc__main { flex: 1; min-width: 0; }
.cldoc__naam { font: 600 13.5px var(--font-body); color: var(--fg-primary); }
.cldoc__meta { font-size: 12.5px; color: var(--fg-tertiary); margin-top: 1px; }
.cldoc__acties { display: flex; gap: 2px; flex-shrink: 0; cursor: default; }
.cldoc__btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--fg-quaternary); cursor: pointer;
}
.cldoc__btn:hover { background: var(--surface-hover); color: var(--fg-primary); }
.cldoc__btn--gevaar:hover { color: var(--badge-red-fg, #DC2626); }
.cldocs__up { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.cldocs__soort {
  display: flex; align-items: center; gap: 7px;
  font: 500 12.5px var(--font-body); color: var(--fg-secondary);
}
.cldocs__soort select { font-size: 12.5px; padding: 5px 8px; }
.cldocs__btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13.5px var(--font-body);
  color: var(--fg-secondary);
  background: none; border: none; padding: 4px 0; cursor: pointer;
}
.cldocs__btn:hover { color: var(--fg-primary); }
.cldocs__plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1;
}
.cldocs__hint { font-size: 12.5px; color: var(--fg-quaternary); }

/* ═══════════════════════════════════════════════════════════════════════════
   Vacaturetekst-editor (vacature-werkplek, static/modules/vacancy-text-editor.js)
   Gescoped op vwt-*; de tab zelf gebruikt de gedeelde clw-*-klassen.
   ═══════════════════════════════════════════════════════════════════════════ */
.vwt-toolbar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 2;
}
.vwt-btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--fg-secondary);
  cursor: pointer;
}
.vwt-btn:hover { background: var(--surface-active); color: var(--fg-primary); }
.vwt-editor {
  min-height: 320px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.65;
  outline: none;
}
.vwt-editor:focus { border-color: var(--koper); }
.vwt-editor h2 { font-size: 17px; font-weight: 600; margin: 18px 0 6px; }
.vwt-editor h3 { font-size: 14.5px; font-weight: 600; margin: 14px 0 4px; }
.vwt-editor p { margin: 0 0 10px; }
.vwt-editor ul, .vwt-editor ol { margin: 0 0 10px; padding-left: 22px; }
.vwt-editor li { margin: 2px 0; }
.vwt-editor h2:first-child, .vwt-editor h3:first-child { margin-top: 0; }

/* ============================================================
   Werkvoorraad — gedeelde chip, avatar, ···-menu en badges
   (static/modules/werkvoorraad-ui.js). Eén set klassen voor de
   inbox, de leadpagina en het dashboard: hetzelfde label hoort
   overal dezelfde kleur en dezelfde vorm te hebben.
   ============================================================ */
.wv-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
/* Koper = "de kandidaat wacht op jou": het kleurmerk van het product. */
.wv-chip--beantwoorden { color: var(--koper-burnt, #B5612E); background: #FFF3E8; }
.wv-chip--opvolgen { color: var(--steel); background: #E3EDF5; }
.wv-chip--nakijken { color: #DC2626; background: #FEF2F2; }
.wv-chip--uit { color: var(--fg-tertiary); background: var(--surface-active); }
/* De wachttijd hoort bij de chip maar mag hem niet domineren. */
.wv-since { font-weight: 500; opacity: 0.75; }

.wv-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.wv-badge--eerder { color: #B45309; background: rgba(217, 119, 6, 0.12); }
/* In de WhatsApp-gesprekskop staat de badge op een eigen regel onder het
   nummer; in v2 (kop is één rij) staat hij naast de labelchip. */
.wa-thread-eerder { margin-top: 3px; }
.wa2-thead .wv-badge { flex: none; }
.wv-badge--blok { color: #B91C1C; background: rgba(220, 38, 38, 0.12); }

/* Twee zachte rijkleuren op de leadlijst. Bewust nauwelijks zichtbaar: ze
   moeten het oog leiden, niet de tabel in vakken hakken. Volgorde is de
   voorrang -- een hersollicitant met een onbeantwoord bericht kleurt als
   'beantwoorden', want dat is het dringendst. Op de cel en niet op de rij,
   want een <tr> met border-collapse neemt geen achtergrond aan. */
.lead-row--eerder td { background: #FDFAF4; }
.lead-row--wv-beantwoorden td { background: #FFFCF8; }

/* Uitklapblok "Eerder beoordeeld": de volledige toedracht die niet in de badge
   of de tooltip past. Rustig grijs -- het is context, geen alarm. */
.lead-eerder-cel { padding-left: 36px; font-size: 12px; }
.lead-eerder-kopje {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 4px;
}
.lead-eerder-item { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 2px 0; }
.lead-eerder-kop { color: var(--fg-secondary); font-weight: 500; }
.lead-eerder-notitie { color: var(--fg-tertiary); font-style: italic; }

/* Persoonsblokkade "Niet bemiddelen". De rij wordt zachter, niet verborgen: de
   sollicitatie bestaat, wij doen er alleen niets mee. Opacity op de cel (niet
   op de rij) om dezelfde reden als de achtergronden hierboven. Het uitklapblok
   erft de eerder-beoordeeld-opmaak; alleen het kopje is rood, want dít is wél
   een besluit dat je moet zien staan. */
.lead-row--blok td { opacity: 0.6; }
.lead-row--blok td.lead-blok-cel { opacity: 1; }
.lead-blok-cel { padding-left: 36px; font-size: 12px; }
.lead-blok-kopje {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #B91C1C;
  margin-bottom: 4px;
}
.lead-blok-knop { margin-top: 8px; font-size: 11px; padding: 3px 10px; }

/* De eigenaar-avatar staat in de naamcel, tussen de naam en de badges. Kleiner
   dan in de gesprekkenlijst: de naamregel is 15px en mag door een avatar niet
   hoger worden dan de rest van de rij. */
.lead-name .av {
  width: 18px;
  height: 18px;
  font-size: 9px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.lead-name .wv-badge { margin-left: 6px; }

/* Kleine eigenaar-avatar. Geen eigenaar = leeg vlak met streepjesrand;
   nooit een tekst als "niemand" of een vraagteken dat als fout leest. */
.av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
}
.av--a { background: linear-gradient(135deg, #D97B3D, #B5612E); }
.av--b { background: linear-gradient(135deg, #2A5C7A, #17384F); }
.av--c { background: linear-gradient(135deg, #5B8C5A, #3F6B3E); }
.av--d { background: linear-gradient(135deg, #7C6BA8, #5A4B85); }
.av--e { background: linear-gradient(135deg, #C2566B, #9E3F52); }
.av--f { background: linear-gradient(135deg, #4A8B9E, #2F6B7E); }
.av--none { background: transparent; border: 1.5px dashed var(--fg-muted, #B5B0A8); }

/* ···-menu: staat altijd in de DOM, alleen `hidden` wisselt (zelfde patroon
   als .wa2-menu, zodat er geen HTML bijgebouwd hoeft te worden). */
.wv-menu-wrap { position: relative; display: inline-flex; }
.wv-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.wv-menu[hidden] { display: none; }
.wv-mitem {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--fg-primary);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.wv-mitem:hover { background: var(--surface-active); }
.wv-mitem--danger { color: #DC2626; }

/* Werkvoorraad-as in de WhatsApp-inbox (v1): altijd zichtbaar onder de
   zoekbalk, want "wie wacht op mij?" is de eerste vraag van de dag. */
.wa-actie-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 8px;
}
.wa-actie-segs { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.wa-actie-owner {
  flex: 0 0 auto;
  max-width: 130px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg-secondary);
  font-size: 12px;
}
/* Gekleurde linkerrand per label: in één oogopslag zichtbaar welke rijen op
   je wachten, ook zonder de chip te lezen. */
.wa-conv-item--wv-beantwoorden { border-left: 3px solid var(--koper); }
.wa-conv-item--wv-opvolgen { border-left: 3px solid var(--steel); }
.wa-conv-item--wv-nakijken { border-left: 3px solid #DC2626; }
.wa-conv-item--wv-beantwoorden .wa-conv-name { font-weight: 650; }

/* De werkvoorraad blijft tekstueel leesbaar; alleen selectie krijgt een rand. */
.wa2-pills--actie { flex-wrap: wrap; }
.wa2-r3 { display: flex; align-items: center; gap: 8px; min-height: 14px; font-size: 10.5px; line-height: 1.35; overflow: visible; }
.wa2-r3 > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wa2-list .wa2-r1 b { font-weight: 600; }
.wa2-list .wa2-r3 .wv-chip { background: none; border: 0; padding: 0; border-radius: 0; font-size: inherit; font-weight: 400; }
.wa2-list .wa2-r3 .wa-conv-owner { margin-left: auto; flex: none; padding: 0; border: 0; background: none; font-size: 10px; color: var(--fg-muted); white-space: nowrap; }
.wa2-list .wa2-unread { min-width: 17px; height: 17px; font-size: 10px; font-weight: 600; }

/* ── Dashboardblok Werkvoorraad ─────────────────────────────────────────────
   Rijen zijn knoppen (een klik opent het dossier of het gesprek), maar mogen
   niet als knop lezen: geen rand, geen vlak -- alleen een zachte hover, zoals
   de activiteitenregels ernaast. */
.wv-dash-groep { margin-bottom: 12px; }
.wv-dash-groep:last-child { margin-bottom: 0; }
.wv-dash-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 6px;
}
.wv-dash-n {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-tertiary);
  font-variant-numeric: tabular-nums;
}
.wv-dash-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-primary);
  text-align: left;
  cursor: pointer;
}
.wv-dash-rij:hover { background: var(--surface-active); }
.wv-dash-naam {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wv-dash-rij .wv-since {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--fg-tertiary);
  font-variant-numeric: tabular-nums;
}
.wv-dash-meer {
  display: block;
  padding: 4px 6px 2px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--koper);
  cursor: pointer;
}
.wv-dash-meer:hover { text-decoration: underline; }
.wv-dash-totaal {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-tertiary);
  font-variant-numeric: tabular-nums;
}
/* Drie kaarten in een tweekolomsraster laten de derde half leeg achter; die
   loopt daarom over de volle breedte. Op mobiel (één kolom) is het een no-op. */
.dash-widgets-grid .dash-card--breed { grid-column: 1 / -1; }

/* ── Inbox: opvang van externe contacten ─────────────────────────────────────
   Eigen namespace naast .wa2-*: die is van de WhatsApp-module en mag zijn eigen
   weg gaan. De vorm komt uit design/inbox-prototype/ (drie kolommen, rand tot
   rand, geen paginakop); de tokens zijn hier vertaald naar de ATS-variabelen.
   Layoutcontract: .inbox-root verwacht een parent met kolom-flex en vaste
   hoogte (.content--chat op #pageContent); .inbox is de kolommen-grid. */
/* .cm-draad (kandidaatdossier-mailpaneel, static/modules/candidate-mail.js,
   taak 5/D4) hergebruikt hier alleen de kleurvariabelen -- gedeelde selector
   i.p.v. de hexwaarden hieronder te kopiëren, anders lopen de twee plekken
   uiteen zodra iemand er één van wijzigt. De overige eigenschappen (volle
   hoogte, flex:1) horen bij de Inbox-pagina zelf (die IS de hoogte-eigenaar
   van zijn flex-kolom); .cm-draad zet ze direct hieronder terug, want daar
   zit hij als gewoon blok in het al scrollende paneellichaam (#wsBody). */
.inbox-root, .cm-draad {
  --inbox-canvas: #F7F5F2;
  --inbox-warn: #B5701F;
  --inbox-warn-bg: #FCEBCE;
  --inbox-note-bg: #FFF5DD;
  --inbox-mail-bg: #E3EDF5;
  --inbox-wa-bg: #DCF8C6;
  flex: 1; min-height: 0; height: 100%;
  display: flex; flex-direction: column;
  padding: 0;
}
/* Zie de moduledoc hierboven: auto-hoogte (i.p.v. 100%) + de eigen gap tussen
   bubbels. In dit ~540px brede paneel mogen bubbels breder zijn dan de 62%
   van de Inbox-pagina. Eigen achtergrond (R-3, eindreview): op de Inbox-pagina
   geeft .inbox-canvas de bubbels hun contrast (.inbox-msg--in is
   var(--surface), wit); .cm-draad heeft geen eigen canvas en zit in het
   witte zijpaneel (#wsBody), dus zonder deze achtergrond werd een inkomend
   bericht wit-op-wit en onzichtbaar. */
.cm-draad { height: auto; flex: initial; gap: 6px; background: var(--inbox-canvas); padding: 12px; border-radius: 10px; }
.cm-draad .inbox-msg { max-width: 88%; }
.inbox {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 0;
  background: var(--white);
  overflow: hidden;
}
.inbox--info { grid-template-columns: 340px minmax(0, 1fr) 320px; }

/* ── Lijstkolom ─────────────────────────────────────────────────────────── */
.inbox-list {
  position: relative; min-width: 0;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.inbox-lhead {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 16px 10px;
  /* Even hoog als .wa2-lhead (2026-09-18). Daar komt die hoogte uit de 34px
     icoonknoppen ernaast; Inbox heeft die knoppen niet -- er valt hier niets
     te starten, een inboxitem komt binnen. Zonder deze regel is de band 52px
     tegen 60px en zie je bij het wisselen tussen Inbox en WhatsApp de hele
     lijst 8px verspringen. Expliciet uitgeschreven i.p.v. de selector delen:
     de rest van .wa2-lhead (de knoppenrij) hoort hier juist NIET. */
  min-height: 60px; box-sizing: border-box;
}
.inbox-lhead b {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--fg-primary);
}
.inbox-teller {
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-active); color: var(--fg-tertiary);
  font-size: 11px; font-weight: 500;
}
.inbox-iconbtn {
  width: 34px; height: 34px; flex: 0 0 auto; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--fg-secondary);
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.inbox-iconbtn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--fg-primary); }
.inbox-iconbtn.on { border-color: var(--koper); color: var(--koper-700); background: var(--koper-subtle); }
.inbox-iconbtn:disabled { opacity: .45; cursor: not-allowed; }

/* De opmaak van .inbox-search staat bij .wa2-search (style.css r8214 + r8675):
   één regel voor beide, zodat de twee zoekbalken niet opnieuw uit elkaar
   lopen. Hier staat alleen wat Inbox-eigen is -- de lijstkolom is een
   flex-kolom en het veld mag niet meekrimpen. */
.inbox-search { flex: none; }

.inbox-pills {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 0 16px 10px;
}
.inbox-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--fg-secondary);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500; white-space: nowrap;
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.inbox-pill:hover { border-color: rgba(0, 0, 0, 0.2); }
.inbox-pill.on { background: var(--navy); border-color: var(--navy); color: var(--white); }
.inbox-pill__n {
  padding: 0 5px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.06); color: var(--fg-tertiary);
  font-size: 10.5px; font-weight: 600;
}
.inbox-pill.on .inbox-pill__n { background: rgba(255, 255, 255, 0.22); color: var(--white); }
.inbox-pillsel { appearance: none; -webkit-appearance: none; padding-right: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 12px;
}
.inbox-pillsel.on {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

.inbox-items { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--border); }
.inbox-items::-webkit-scrollbar { width: 8px; }
.inbox-items::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 4px; }
.inbox-daglabel {
  padding: 12px 16px 5px; color: var(--fg-quaternary);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.inbox-item {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; border: 0; border-bottom: 1px solid var(--border-light);
  background: var(--surface); color: inherit; text-align: left;
  font-family: var(--font-body); cursor: pointer; transition: background var(--dur-fast);
}
.inbox-item:hover { background: var(--surface-hover); }
.inbox-item.on { background: var(--koper-subtle); box-shadow: inset 3px 0 0 var(--koper); }
.inbox-item.spam .inbox-r1 b, .inbox-item.spam .inbox-r2 > span:first-child {
  color: var(--fg-tertiary); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.25);
}
.inbox-item.afgehandeld .inbox-r1 b { font-weight: 500; color: var(--fg-secondary); }
.inbox-ava {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--sand); color: var(--navy);
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
}
.inbox-ava--lg { width: 40px; height: 40px; font-size: 13px; }
.inbox-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.inbox-r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.inbox-r1 b { min-width: 0; font-size: 13px; font-weight: 600; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-r1 i { flex: 0 0 auto; font-style: normal; font-size: 11px; color: var(--fg-quaternary); }
.inbox-item.nieuw .inbox-r1 b { font-weight: 650; }
.inbox-item.nieuw .inbox-r1 i { color: var(--koper); font-weight: 600; }
.inbox-r2 { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; font-size: 12px; color: var(--fg-secondary); }
.inbox-r2 > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item.nieuw .inbox-r2 > span:first-child { color: var(--fg-primary); font-weight: 500; }
.inbox-r2meta { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.inbox-r3 { font-size: 11px; color: var(--fg-quaternary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--koper); }
.inbox-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 500; white-space: nowrap;
  background: var(--badge-neutral-bg); color: var(--badge-neutral-fg);
}
.inbox-chip--employer { color: var(--steel); background: #E3EDF5; }
.inbox-chip--callback { color: var(--inbox-warn); background: var(--inbox-warn-bg); }
.inbox-chip--contact { color: var(--badge-purple-fg); background: var(--badge-purple-bg); }
.inbox-chip--candidate { color: var(--badge-green-fg); background: var(--badge-green-bg); }
.inbox-owner {
  width: 18px; height: 18px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--navy); color: var(--white);
  font-family: var(--font-display); font-size: 8.5px; font-weight: 600;
}
.inbox-mark { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.inbox-mark--conv { background: var(--badge-green-bg); color: var(--badge-green-fg); }
.inbox-mark--reply { background: #E3EDF5; color: var(--steel); }
.inbox-mark svg { stroke-width: 2.2; }

.inbox-leeg { padding: 44px 24px; text-align: center; color: var(--fg-quaternary); font-size: 13px; }
.inbox-leeg svg { padding: 16px; margin: 0 auto 12px; border-radius: 50%; background: var(--koper-subtle); color: var(--koper-700); display: block; box-sizing: content-box; }
.inbox-leeg strong { display: block; margin-bottom: 4px; color: var(--fg-secondary); font-size: 14px; font-weight: 600; }
.inbox-listfout {
  margin: 14px 12px; padding: 14px;
  display: grid; gap: 10px; justify-items: start;
  border: 1px solid rgba(220, 38, 38, 0.25); border-radius: var(--radius-lg);
  background: var(--badge-red-bg); color: var(--fg-secondary); font-size: 12.5px; line-height: 1.45;
}
.inbox-listfout svg { color: var(--badge-red-fg); }
.inbox-listfout strong { display: block; margin-bottom: 2px; color: var(--fg-primary); font-size: 13.5px; }

/* Skeleton tijdens laden: rijen in dezelfde maat, zodat de lijst niet springt. */
.inbox-sk { position: relative; overflow: hidden; background: rgba(0, 0, 0, 0.06); border-radius: 999px; }
.inbox-sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: inbox-shimmer 1.4s infinite;
}
@keyframes inbox-shimmer { to { transform: translateX(100%); } }
.inbox-item--sk { pointer-events: none; }
.inbox-skline { display: block; height: 10px; margin: 3px 0; }

/* ── Gesprekskolom ──────────────────────────────────────────────────────── */
.inbox-thread {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--inbox-canvas);
}
.inbox-thead {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.inbox-back { display: none; border: 0; background: none; width: 30px; padding: 0; color: var(--fg-secondary); cursor: pointer; }
/* Kop zonder item (laden of fout): alleen onder 900 px, waar de terugknop de
   enige weg terug naar de lijst is. */
.inbox-thead--kaal { display: none; }
.inbox-tmeta { flex: 1; min-width: 0; }
.inbox-tmeta h2 { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-tmeta p { margin: 1px 0 0; color: var(--fg-tertiary); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-status { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.inbox-status--new { color: var(--badge-blue-fg); background: var(--badge-blue-bg); }
.inbox-status--handled { color: var(--badge-green-fg); background: var(--badge-green-bg); }
.inbox-status--spam { color: var(--badge-red-fg); background: var(--badge-red-bg); }
.inbox-menuwrap { position: relative; }
.inbox-menu {
  position: absolute; z-index: 10; top: 40px; right: 0; min-width: 220px; padding: 5px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: 0 8px 28px rgba(23, 56, 79, 0.14);
}
.inbox-mitem {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border: 0; border-radius: var(--radius-md);
  background: none; color: var(--fg-primary); text-align: left;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; cursor: pointer;
}
.inbox-mitem:hover:not(:disabled) { background: var(--surface-active); }
.inbox-mitem--rood { color: var(--badge-red-fg); }
.inbox-mitem:disabled { opacity: .5; cursor: not-allowed; }

.inbox-canvas { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; }
.inbox-canvas::-webkit-scrollbar { width: 8px; }
.inbox-canvas::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 4px; }
.inbox-datepil {
  align-self: center; margin: 6px 0; padding: 4px 12px; border-radius: 999px;
  background: var(--surface-active); color: var(--fg-tertiary); font-size: 11px; font-weight: 600;
}
.inbox-msg {
  position: relative; max-width: 62%; padding: 10px 14px; border-radius: 13px;
  color: var(--fg-primary); font-size: 13.5px; line-height: 1.5;
  word-break: break-word; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.inbox-msg--in { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 5px; }
.inbox-msg--out { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--surface); }
.inbox-msg--email { background: var(--inbox-mail-bg); }
.inbox-msg--whatsapp { background: var(--inbox-wa-bg); }
.inbox-msg--note {
  align-self: flex-end; background: var(--inbox-note-bg);
  border: 1px solid rgba(154, 91, 22, 0.18); border-bottom-right-radius: 5px;
}
.inbox-msg__tag {
  display: flex; align-items: center; gap: 5px; margin-bottom: 4px;
  color: var(--fg-tertiary); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.inbox-msg--note .inbox-msg__tag { color: var(--inbox-warn); }
.inbox-msg__sub { margin-bottom: 4px; color: var(--fg-secondary); font-size: 12px; font-weight: 600; }
.inbox-msg__body { white-space: pre-wrap; }
.inbox-msg__signature { margin-top: 14px; color: var(--fg-primary); font-size: 12.5px; line-height: 1.45; }
.inbox-msg__bijlagen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.inbox-msg__bijlage {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--fg-secondary);
  font-family: var(--font-body); font-size: 12px; cursor: pointer;
}
.inbox-msg__bijlage span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-msg__bijlage svg { flex: 0 0 auto; color: var(--fg-tertiary); }
.inbox-msg__bijlage:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--fg-primary); }
.inbox-msg__bijlage:focus-visible { outline: 2px solid var(--koper); outline-offset: 2px; }
.inbox-msg__meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 4px; color: var(--fg-quaternary); font-size: 10.5px; }
.inbox-msg__meta svg { color: var(--koper); }
.inbox-ev { align-self: center; max-width: 80%; margin: 2px 0; color: var(--fg-tertiary); font-size: 12px; text-align: center; }
.inbox-ev b { color: var(--fg-secondary); font-weight: 600; }
.inbox-ev--kaart { align-self: stretch; max-width: none; text-align: left; }
.inbox-scheider { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 8px 4px 2px; }
.inbox-scheider::before, .inbox-scheider::after { content: ""; flex: 1; height: 1px; background: rgba(217, 123, 61, 0.28); }
.inbox-scheider span { color: var(--koper-700); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.inbox-leegdetail { flex: 1; min-height: 0; display: grid; place-items: center; padding: 32px; text-align: center; }
.inbox-leegdetail svg { padding: 16px; margin: 0 auto 12px; border-radius: 50%; background: var(--koper-subtle); color: var(--koper-700); box-sizing: content-box; }
.inbox-leegdetail p { margin: 0; color: var(--fg-secondary); font-size: 14px; font-weight: 600; }

/* Composer: vier standen, plus het slot bij een afgehandeld of spam-item. */
.inbox-composer {
  flex: 0 0 auto; padding: 10px 14px 14px;
  background: var(--surface); border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 9px;
}
.inbox-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.inbox-mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--fg-secondary);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.inbox-mode:hover:not(:disabled):not(.on) { border-color: rgba(0, 0, 0, 0.2); }
.inbox-mode.on { background: var(--navy); border-color: var(--navy); color: var(--white); }
.inbox-mode.on--note { background: var(--inbox-warn); border-color: var(--inbox-warn); }
.inbox-mode:disabled { opacity: .45; cursor: not-allowed; }

/* Kopregel van een stand: aan wie, en vanaf welk adres of nummer. */
.inbox-cto {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  color: var(--fg-tertiary); font-size: 11.5px;
}
.inbox-cto b { color: var(--fg-secondary); font-weight: 600; }

.inbox-csub { display: flex; align-items: center; gap: 8px; }
.inbox-csub input {
  flex: 1; min-width: 0; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
  color: var(--fg-primary); font-family: var(--font-body); font-size: 12.5px; outline: 0;
}
.inbox-csub input:focus { border-color: var(--koper); box-shadow: var(--shadow-ring); background: var(--surface); }
.inbox-csamen {
  display: flex; align-items: flex-start; gap: 6px; margin: 0;
  padding: 7px 10px; border-radius: var(--radius-md);
  background: var(--koper-50); color: var(--koper-700); font-size: 11.5px; line-height: 1.45;
}
.inbox-csamen svg { flex: 0 0 auto; margin-top: 2px; }
.inbox-csigrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.inbox-csigrow .inbox-csigtoggle { margin-top: 0; }
.inbox-csigrow .inbox-csignature { flex: 1 1 auto; }
.inbox-csignature { margin: 0; color: var(--fg-tertiary); font-size: 11.5px; }
.inbox-csignature summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none;
}
.inbox-csignature summary::-webkit-details-marker { display: none; }
.inbox-csignature summary:hover { color: var(--fg-secondary); }
.inbox-csignature__preview {
  margin: 6px 0 0; padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--surface-active); color: var(--fg-primary); line-height: 1.45;
}
.inbox-cinput--mail textarea { min-height: 96px; }

.inbox-tplsel, .inbox-tplparam input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--fg-primary);
  font-family: var(--font-body); font-size: 12.5px;
}
.inbox-tplprev {
  margin: 0; padding: 9px 12px; border-radius: var(--radius-md);
  background: var(--inbox-wa-bg); color: var(--fg-primary);
  font-size: 12.5px; line-height: 1.45; white-space: pre-wrap;
}
.inbox-tplparams { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.inbox-tplparam { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inbox-tplparam > span {
  color: var(--fg-tertiary); font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.inbox-crow--wa { align-items: center; justify-content: space-between; gap: 12px; }
.inbox-crow--wa .inbox-chint { margin: 0; }

.inbox-cbel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inbox-outcome {
  padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--fg-secondary);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.inbox-outcome:hover:not(.on) { border-color: rgba(0, 0, 0, 0.2); }
.inbox-outcome.on { background: var(--koper); border-color: var(--koper); color: var(--white); }

/* Slot: afgehandeld of spam. Geen invoerveld, wel de weg terug. */
.inbox-clocked {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg); color: var(--fg-secondary); font-size: 12.5px;
}
.inbox-clocked > svg { flex: 0 0 auto; color: var(--fg-tertiary); }
.inbox-clocked > span { flex: 1; min-width: 0; }
.inbox-composer--slot { padding-top: 14px; }
.inbox-crow { display: flex; align-items: flex-end; gap: 9px; }
.inbox-cinput { flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.inbox-cinput textarea {
  flex: 1; min-width: 0; min-height: 40px; max-height: 220px; padding: 10px 14px;
  border: 0; outline: 0; background: transparent; color: var(--fg-primary);
  font: 400 13.5px/20px var(--font-body); resize: none;
}
.inbox-sendbtn {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: var(--navy); color: var(--white); cursor: pointer;
}
.inbox-sendbtn:disabled { opacity: .45; cursor: not-allowed; }
.inbox-chint { margin: 0; color: var(--fg-quaternary); font-size: 11px; }

/* ── Banners boven het gesprek ──────────────────────────────────────────── */
.inbox-banner {
  margin-bottom: 8px; padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--fg-secondary); font-size: 12.5px;
}
.inbox-banner > svg { flex: 0 0 auto; }
.inbox-banner > span { flex: 1; min-width: 0; }
.inbox-banner strong { display: block; color: var(--fg-primary); font-weight: 600; }
.inbox-banner small { display: block; margin-top: 1px; color: var(--fg-tertiary); font-size: 11.5px; }
.inbox-banner--ok { border-color: rgba(22, 163, 74, 0.25); background: var(--badge-green-bg); }
.inbox-banner--ok > svg { color: var(--badge-green-fg); }
.inbox-banner--done { background: var(--bg); }
.inbox-banner--done > svg { color: var(--fg-tertiary); }
.inbox-banner--spam { border-color: rgba(220, 38, 38, 0.25); background: var(--badge-red-bg); }
.inbox-banner--spam > svg { color: var(--badge-red-fg); }
.inbox-banner--dup { border-color: rgba(217, 123, 61, 0.3); background: var(--koper-50); }
.inbox-banner--dup > svg { color: var(--koper-700); }
.inbox-linkbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  border: 0; padding: 0; background: none; color: var(--koper-700);
  font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer;
}
.inbox-linkbtn:hover:not(:disabled) { text-decoration: underline; }
.inbox-linkbtn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Infokolom ──────────────────────────────────────────────────────────── */
.inbox-side {
  min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--surface); border-left: 1px solid var(--border);
}
.inbox-shead {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.inbox-shead b { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.inbox-sclose { display: none; }
.inbox-sscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 24px; }
.inbox-sscroll::-webkit-scrollbar { width: 8px; }
.inbox-sscroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 4px; }
.inbox-sec { margin-bottom: 18px; }
.inbox-seclabel { margin: 0 0 7px; color: var(--fg-quaternary); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.inbox-next { display: grid; gap: 6px; }
.inbox-next .btn { width: 100%; justify-content: center; }
.inbox-nexthint { margin: 2px 0 0; color: var(--fg-quaternary); font-size: 11px; line-height: 1.4; }
.inbox-kv {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.inbox-kvs .inbox-kv:last-child { border-bottom: 0; }
.inbox-kv svg { color: var(--fg-tertiary); }
.inbox-kv > div { min-width: 0; }
.inbox-kv span { display: block; color: var(--fg-tertiary); font-size: 10.5px; }
.inbox-kv a, .inbox-kv strong {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg-primary); font-size: 12.5px; font-weight: 500; text-decoration: none;
}
.inbox-leegveld { color: var(--fg-quaternary) !important; font-weight: 400 !important; font-style: italic; }
.inbox-typesel {
  width: 100%; border: 0; border-radius: 999px; padding: 6px 11px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  background: var(--badge-neutral-bg); color: var(--badge-neutral-fg);
}
.inbox-typesel--employer { color: var(--steel); background: #E3EDF5; }
.inbox-typesel--callback { color: var(--inbox-warn); background: var(--inbox-warn-bg); }
.inbox-typesel--contact { color: var(--badge-purple-fg); background: var(--badge-purple-bg); }
.inbox-typesel--candidate { color: var(--badge-green-fg); background: var(--badge-green-bg); }
.inbox-typesel:disabled { opacity: .75; cursor: default; }
.inbox-typenoot { margin: 6px 0 0; color: var(--fg-tertiary); font-size: 11.5px; line-height: 1.45; }
.inbox-ownersel {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 6px 10px; background: var(--surface); color: var(--fg-primary);
  font-family: var(--font-body); font-size: 12px;
}
.inbox-ownersel:disabled { opacity: .75; cursor: default; }
.inbox-match {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
}
.inbox-match--sug { border-color: rgba(217, 123, 61, 0.35); background: var(--koper-50); }
.inbox-matchmark {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: #E3EDF5; color: var(--navy); font-family: var(--font-display); font-size: 11px; font-weight: 600;
}
.inbox-matchtxt { min-width: 0; flex: 1; }
.inbox-matchtxt strong { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-matchtxt span { display: block; margin-top: 1px; color: var(--fg-tertiary); font-size: 11px; }
.inbox-geenmatch { color: var(--fg-tertiary); font-size: 12px; line-height: 1.4; }
.inbox-matchzoek { margin-top: 8px; }
.inbox-root .inbox-btn--klein { padding: 6px 11px; font-size: 12px; }
.inbox-consent { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; color: var(--fg-tertiary); font-size: 11px; line-height: 1.4; }
.inbox-consent svg { flex: 0 0 auto; margin-top: 1px; color: var(--badge-green-fg); }
.inbox-consent--warn svg { color: var(--koper-700); }
.inbox-consent a { color: var(--fg-secondary); }

.inbox-raw { margin-top: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.inbox-raw summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: var(--fg-secondary); font-size: 12px; font-weight: 500; cursor: pointer; list-style: none; }
.inbox-raw summary::-webkit-details-marker { display: none; }
.inbox-raw summary::before { content: "\25B8"; color: var(--fg-quaternary); font-size: 11px; }
.inbox-raw[open] summary::before { content: "\25BE"; }
.inbox-rawbadge { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--koper-50); color: var(--koper-700); font-size: 10.5px; font-weight: 600; }
.inbox-raw dl { margin: 0; padding: 0 12px 6px; }
.inbox-rawrij { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 12px; }
.inbox-rawrij dt { color: var(--fg-tertiary); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; }
.inbox-rawrij dt em { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--koper-50); color: var(--koper-700); font-size: 10px; font-style: normal; font-weight: 600; }
.inbox-rawrij dd { margin: 0; color: var(--fg-primary); white-space: pre-wrap; word-break: break-word; }
.inbox-rawrij--nieuw dd { color: var(--koper-700); }
.inbox-rawhint, .inbox-rawleeg { margin: 0; padding: 6px 12px 10px; color: var(--fg-quaternary); font-size: 11px; }

.inbox-tijdlijn { margin: 0; padding: 0 0 0 6px; list-style: none; border-left: 2px solid var(--border); }
.inbox-tijdlijn li { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 0 0 12px 16px; font-size: 12px; }
.inbox-tijdlijn li:last-child { padding-bottom: 2px; }
.inbox-tldot { position: absolute; left: -7px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--fg-quaternary); }
.inbox-tijdlijn li:first-child .inbox-tldot { border-color: var(--koper); }
.inbox-tltxt { color: var(--fg-secondary); }
.inbox-tltijd { color: var(--fg-quaternary); font-size: 11px; }

/* Knoppen binnen de inbox: compacter dan de generieke .btn-primary (die is
   15px/10px-20px en zou de gesprekskop uit balans trekken) en navy in plaats
   van bijna-zwart, zoals het prototype. Een knop waarvan de handeling nog niet
   bestaat staat disabled en moet dat ook te zien zijn; de generieke .btn heeft
   geen disabled-vorm. */
.inbox-root .btn { font-size: 13px; padding: 8px 13px; border-radius: var(--radius-sm); }
.inbox-root .btn svg { width: 14px; height: 14px; }
.inbox-root .btn-primary { background: var(--navy); color: var(--white); }
.inbox-root .btn-primary:hover:not(:disabled) { background: var(--deep-ink); }
.inbox-root .btn:disabled { opacity: .45; cursor: not-allowed; }
.inbox-root .btn-primary:disabled:hover { background: var(--navy); }
.inbox-thead .btn { flex: 0 0 auto; white-space: nowrap; }

/* ── Balk met Ongedaan maken ────────────────────────────────────────────────
   De gedeelde toast is puur tekst (zie ui.js) en kan dus geen knop dragen. Deze
   balk staat op dezelfde plek en verdwijnt na dezelfde soort korte tijd. */
/* De houder staat vast onderin en NIET in de kolommen-grid: als grid-item zou
   hij een lege rij aan .inbox toevoegen. */
.inbox-undowrap { position: fixed; right: 24px; bottom: 24px; z-index: 2000; }
.inbox-undo {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--radius-md);
  background: rgba(23, 56, 79, 0.94); color: var(--white);
  font-size: 13px; font-weight: 500; box-shadow: var(--shadow-modal);
}
.inbox-undo > svg { flex: 0 0 auto; color: var(--koper-300); }
.inbox-undobtn {
  border: 0; padding: 0; background: none; color: var(--white);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}

/* ── Inbox-modals ───────────────────────────────────────────────────────────
   Hangen in de gedeelde #modal-DOM, dus buiten .inbox-root: deze klassen mogen
   niet onder die scope staan. */
.inbox-mintro { margin: 0 0 16px; color: var(--fg-secondary); font-size: 13px; line-height: 1.5; }
.inbox-macties { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.inbox-mcheck {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px;
  color: var(--fg-secondary); font-size: 13px; line-height: 1.45; cursor: pointer;
}
.inbox-mcheck input { margin-top: 2px; }
.inbox-mhits { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow-y: auto; }
.inbox-hit {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: inherit; text-align: left;
  font-family: var(--font-body); cursor: pointer;
}
.inbox-hit:hover { border-color: var(--koper); background: var(--koper-subtle); }
.inbox-hit > span:last-child { min-width: 0; }
.inbox-hit strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-hit small { display: block; color: var(--fg-tertiary); font-size: 11.5px; }
.inbox-mgekozen {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border: 1px solid rgba(217, 123, 61, 0.35); border-radius: var(--radius-md);
  background: var(--koper-50); color: var(--fg-secondary); font-size: 12.5px;
}
.inbox-mleeg { margin: 6px 0 0; color: var(--fg-tertiary); font-size: 12px; }

/* ── Responsief ─────────────────────────────────────────────────────────── */
/* Tussenmaat: de infokolom wordt een overlay, zoals bij de WhatsApp-module. */
@media (max-width: 1250px) {
  .inbox, .inbox--info { grid-template-columns: 360px minmax(0, 1fr); position: relative; }
  .inbox--info .inbox-side {
    position: absolute; right: 0; top: 0; bottom: 0; width: 320px; z-index: 20;
    box-shadow: -12px 0 32px rgba(23, 56, 79, 0.14);
  }
  .inbox--info .inbox-sclose { display: inline-flex; }
}

/* Zelfde breekpunt als de WhatsApp-module: één kolom tegelijk, met terugknop. */
@media (max-width: 900px) {
  .inbox, .inbox--info { grid-template-columns: 1fr; gap: 0; }
  .inbox-list { border-right: none; }
  .inbox--info .inbox-side { position: relative; width: auto; box-shadow: none; z-index: auto; border-left: none; }
  .inbox--mob-list .inbox-thread, .inbox--mob-list .inbox-side { display: none; }
  .inbox--mob-thread .inbox-list { display: none; }
  .inbox--mob-thread.inbox--info .inbox-thread { display: none; }
  .inbox-back { display: inline-flex; align-items: center; }
  .inbox-thead--kaal { display: flex; }
  .inbox-sclose { display: inline-flex; }
  .inbox-msg { max-width: 84%; }
  .inbox-deskonly { display: none; }
  .inbox-lhead b { font-size: 20px; }
  .inbox-status { display: none; }
  .inbox-rawrij { grid-template-columns: 1fr; gap: 2px; }
  /* iOS zoomt in op een invoerveld kleiner dan 16px en zoomt niet terug. */
  /* .inbox-search input staat hier niet meer: die erft 16px van de
     gedeelde regel bij .wa2-search, zodat de twee zoekbalken mobiel niet
     alsnog uit elkaar lopen. */
  .inbox-cinput textarea, .inbox-csub input,
  .inbox-tplsel, .inbox-tplparam input { font-size: 16px; }
  .inbox-cinput textarea { line-height: 22px; min-height: 42px; }
  .inbox-crow--wa { flex-direction: column; align-items: stretch; }
  .inbox-crow--wa .btn { justify-content: center; }
  .inbox-cbel .btn { width: 100%; justify-content: center; }
  .inbox-undowrap { left: 12px; right: 12px; bottom: 12px; }
}
/* ── AI-beheer: conformiteit met het ontwerp-canvas ─────────────────────
   Scoped onder .ai-beheer (de paginawortel in brein.js) zodat dit geen
   andere pagina's raakt die dezelfde .settings-card/.stat-value-klassen
   hergebruiken (bv. Instellingen). */
.ai-beheer .settings-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.ai-beheer .settings-card__header > div:first-child { min-width: 0; }
/* Rechtergroep (knoppen/pill/link) mag niet krimpen — anders breken
   knoplabels ("Van website inlezen" e.d.) op twee regels af. */
.ai-beheer .settings-card__header > div:last-child:not(:only-child) { flex-shrink: 0; }
.ai-beheer .settings-card__header .btn { white-space: nowrap; }
.ai-beheer .stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg-primary);
}
.ai-beheer .stat-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-tertiary);
  margin-top: 6px;
}
.ai-beheer a { color: var(--koper-hover); text-decoration: none; font-weight: 500; }
.ai-beheer a:hover { color: var(--koper); }
.ai-beheer .settings-nav__item svg { width: 16px; height: 16px; }
.ai-beheer .btn svg { width: 14px; height: 14px; }
.universal-composer__context {
  max-width: 1000px;
  margin: 0 auto 6px;
  padding: 0 16px;
  color: var(--fg-tertiary);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Dashboard "Cockpit" ────────────────────────────────────────────────────
   Kerncijferstrip met trend, tegels in twee kolommen, en de tegelkiezer.
   Alles onder .dash-* zodat het buiten het dashboard niets raakt. Geen
   pagina-eigen td/th-regels (zie tests/test_list_table_norm.py). */

.dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
  position: relative;  /* anker voor de tegelpopover */
}

/* Periodekiezer: segmenten in één spoor, de actieve licht op als kaartje. */
.dash-periode {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
}

.dash-periode__knop {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-secondary);
  padding: 5px 12px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.dash-periode__knop--aan {
  background: var(--surface);
  color: var(--fg-primary);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dash-aanpassen { flex-shrink: 0; }

/* Kerncijfers: één strip met dunne scheidingslijnen in plaats van losse
   kaarten. minmax(0, 1fr) en niet 1fr: een kale 1fr heeft een
   min-content-minimum en duwt de strip breder dan de pagina. */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0;
  margin-bottom: 16px;
}

.dash-kpi {
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  min-width: 0;
}

.dash-kpi + .dash-kpi { border-left: 1px solid var(--border-light); }

.dash-kpi__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-tertiary);
}

.dash-kpi__rij {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.dash-kpi__waarde {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg-primary);
}

.dash-kpi__voet {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.dash-kpi__periode {
  font-size: 11.5px;
  color: var(--fg-tertiary);
}

.dash-kpis--leeg { padding: 16px 20px; }
.dash-kpis__melding { font-size: 13px; color: var(--fg-tertiary); }

/* Het verschil met de vorige periode. Kleur zegt 'goed of slecht', de pijl
   zegt 'omhoog of omlaag' -- die twee lopen niet altijd samen (korter
   plaatsen is omlaag én goed), en kleur alleen is geen drager. */
.dash-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dash-delta--goed { color: var(--badge-green-fg); }
.dash-delta--slecht { color: var(--badge-red-fg); }
.dash-delta--gelijk { color: var(--fg-tertiary); font-weight: 500; }

.dash-spark { flex-shrink: 0; }
.dash-spark__vlak { fill: var(--steel); fill-opacity: 0.08; }
.dash-spark__lijn {
  fill: none;
  stroke: var(--steel);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.dash-spark__punt { fill: var(--koper); stroke: var(--white); stroke-width: 1.5; }

/* Twee kolommen: het werk links (breed), de context rechts. */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 16px;
  align-items: start;
}

.dash-kolom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.dash-tegel { padding: 0; }
.dash-tegel__body { padding: 10px 12px 12px; }
.dash-tegel__body--ruim { padding: 16px 18px 18px; }

.dash-kaartkop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 0;
}

.dash-kaartkop h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: baseline;
}

.dash-kaartkop__n {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-tertiary);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}

.dash-kaartlink {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--koper);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.dash-kaartlink:hover { text-decoration: underline; }

/* Het takenblok deelt de kaartkop-vorm maar bouwt zijn eigen kop (zie
   werkvoorraadBlokHtml); de link moet daar los uitgelijnd worden. */
.wv-dash.dash-tegel > div:first-child { justify-content: space-between; }

/* Fases: één tint, het label draagt de identiteit. */
.dash-fase {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-fase + .dash-fase { margin-top: 10px; }

.dash-fase__label {
  width: 150px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--fg-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-fase__spoor {
  flex: 1;
  min-width: 0;
  height: 8px;
  border-radius: 4px;
  background: rgba(23, 56, 79, 0.08);
  overflow: hidden;
}

.dash-fase__balk {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--navy);
}

.dash-fase__n {
  width: 28px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}

.dash-leeg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--fg-tertiary);
  font-size: 13px;
  text-align: center;
  padding: 28px 0;
}

.dash-leeg svg { opacity: 0.55; }

.dash-leegstaat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 0;
  color: var(--fg-tertiary);
}

.dash-leegstaat p { margin: 0; font-size: 14px; }

/* ── Tegelkiezer ──────────────────────────────────────────────────────────── */

/* Vast gepositioneerd en aan body gehangen: het dashboard hertekent zichzelf
   bij elke tegelwissel, en in de toolbar zou de kiezer dan verdwijnen. */
/* Boven de assistent-knop (z-index 1050 in assistant.css): op een telefoon
   dekte die knop anders de onderste schakelaar van het vel af. */
.dash-tegelpopover {
  position: fixed;
  z-index: 1060;
  width: 280px;
}

.dash-tegelpopover__paneel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-modal);
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
}

.dash-tegelsheet {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: flex-end;
}

.dash-tegelsheet__paneel {
  width: 100%;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.12);
  padding: 8px 16px 28px;
  display: flex;
  flex-direction: column;
}

.dash-tegelsheet__greep {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  margin: 0 auto 12px;
}

.dash-tegelkop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px 6px;
}

.dash-tegelkop strong {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.dash-tegelsheet .dash-tegelkop strong { font-size: 16px; }

.dash-tegelkop__reset {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--koper);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.dash-tegelkop__reset:disabled {
  color: var(--fg-muted);
  cursor: default;
}

.dash-tegelrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--fg-primary);
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}

.dash-tegelrij:hover { background: var(--surface-active); }
.dash-tegelrij:focus-visible { outline: 2px solid var(--koper); outline-offset: -2px; }

/* Ruimere tikzone op een telefoon: 48px, boven de 44px-ondergrens. */
.dash-tegelsheet .dash-tegelrij { min-height: 48px; font-size: 15px; }

@media (max-width: 768px) {
  .dash-kpis {
    /* Horizontaal scrollen met snap: vijf cijfers passen niet op 390px, en
       een 2x3-raster kost 200px hoogte die de Taken-tegel wegduwt. De halve
       derde tegel maakt zichtbaar dat er meer staat. */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border: 0;
    background: transparent;
    gap: 8px;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
  }

  .dash-kpis::-webkit-scrollbar { display: none; }

  .dash-kpi {
    flex: 0 0 156px;
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
  }

  .dash-kpi + .dash-kpi { border-left: 1px solid var(--border); }

  .dash-kpi__waarde { font-size: 24px; }

  .dash-grid { grid-template-columns: minmax(0, 1fr); }

  .dash-toolbar { justify-content: space-between; }

  /* Op 390px moeten drie segmenten plus de knop naast elkaar passen. */
  .dash-periode__knop { padding: 5px 9px; font-size: 12.5px; }
  .dash-aanpassen { padding: 7px 10px; }

  /* De periodekiezer staat een paar centimeter hoger in beeld en zegt al
     welke periode het is; die regel per tegel herhalen kost alleen ruimte en
     laat de voet inconsistent afbreken. */
  .dash-kpi__periode { display: none; }

  .dash-fase__label { width: 134px; }
}