/* ============================================================
   Vocus LeadEngine — huisstijl
   Kleuren komen uit de Vocus DocentenHub (globals.css):
   sage #9bbfa7 · green #8ccf9a · mint #bee8d3 · navy #2d4f7a ·
   blue #6baed6 · cream #f9f3e9
   ============================================================ */

:root {
  --vocus-sage: #9bbfa7;
  --vocus-green: #8ccf9a;
  --vocus-mint: #bee8d3;
  --vocus-navy: #2d4f7a;
  --vocus-blue: #6baed6;
  --vocus-cream: #f9f3e9;

  --ink: #24405f;
  --muted: #5c7a96;
  --line: #e2ecf2;
  --line-strong: #c9dbe7;
  --bg: #f7f4ec;               /* iets rustiger dan puur cream voor grote vlakken */
  --card: #ffffff;
  --accent: var(--vocus-navy);
  --accent-soft: #e8f1f8;
  --tag-bg: #eef6f0;

  --sidebar-bg: #1d3550;
  --sidebar-ink: #b8cbe0;
  --sidebar-active: rgba(255, 255, 255, 0.08);

  --success: #4f9468;
  --success-bg: #e3f4ea;
  --warning: #b3540a;
  --warning-bg: #fdecd8;
  --danger: #c2255c;
  --danger-bg: #fbe2e8;
  --info: #3e6d9c;
  --info-bg: #e8f1f8;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(45, 79, 122, 0.05), 0 8px 24px rgba(45, 79, 122, 0.06);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }
a { color: var(--accent); }

/* ---------- Shell ---------- */

.shell { display: flex; min-height: 100vh; }

/* Geen breedtelimiet: de inhoud loopt door tot de rand van het scherm, zodat
   brede tabellen en het tweekolomsraster van de Bel-assistent de ruimte
   krijgen die een breed scherm te bieden heeft. */
.content {
  flex: 1;
  min-width: 0;
  padding: 28px clamp(20px, 3vw, 44px) 64px;
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 248px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  gap: 26px;
}

/* Het logo staat boven "LeadEngine" en niet ernaast: het is een liggend
   wordmerk van 900x347, dus naast een label past het niet in een kolom van
   248px zonder het onleesbaar klein te maken. Logo en label staan gecentreerd
   in de kolom. */
.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  text-align: center;
}

/* Het wordmerk is een groen-naar-blauw verloop op transparant, dus het staat
   los op de donkere sidebar; een wit vlak eronder is niet nodig. */
.brand-logo {
  width: 152px;
  max-width: 100%;
  height: auto;
  display: block;
}

.brand-sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vocus-green);
}

.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--sidebar-ink);
  font-weight: 500;
  font-size: 13.5px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.nav-item:hover { background: var(--sidebar-active); color: #fff; }
.nav-item.active {
  background: var(--sidebar-active);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--vocus-green);
}
.nav-item.active svg { opacity: 1; color: var(--vocus-green); }

.nav-badge {
  margin-left: auto;
  background: var(--vocus-green);
  color: #16283d;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
}

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 8px 0;
}

/* De accountregel: wie is ingelogd, en de deur naar buiten. Staat boven de
   sync-status en verschijnt alleen als het inloggen aanstaat. */
.sidebar-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.account-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--sidebar-active);
  color: var(--vocus-green);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.account-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.account-naam {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-rol {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.account-uit {
  margin-left: auto;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-ink);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.account-uit:hover { background: var(--sidebar-active); color: #fff; }
.account-uit svg { width: 17px; height: 17px; }

.sync-status { display: flex; align-items: center; gap: 10px; }
.sync-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vocus-green);
  box-shadow: 0 0 0 3px rgba(140, 207, 154, 0.2);
  flex-shrink: 0;
}
.sync-dot.stale { background: #e2b13c; box-shadow: 0 0 0 3px rgba(226, 177, 60, 0.18); }
.sync-status-text { display: flex; flex-direction: column; line-height: 1.3; }
.sync-status-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.sync-status-time { font-size: 12.5px; color: #fff; }

/* ---------- Paginakop ---------- */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.page-header h1 {
  font-size: 24px;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-header .page-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.page-header .page-icon svg { width: 21px; height: 21px; }
.page-sub { color: var(--muted); margin: 0; font-size: 14px; }
.page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Knoppen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13.5px;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.12s ease, background 0.12s ease;
}
.btn svg { width: 15px; height: 15px; }
.btn:disabled { opacity: 0.55; cursor: progress; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.12); }

.btn-outline {
  background: var(--card);
  color: var(--accent);
  border: 1px solid var(--line-strong);
}
.btn-outline:hover:not(:disabled) { border-color: var(--accent); }

.btn-success { background: var(--success); color: #fff; }
.btn-danger-soft { background: var(--danger-bg); color: var(--danger); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }

.btn.spinning svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- KPI-tegels ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kpi-top { display: flex; align-items: center; gap: 10px; }
.kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icon svg { width: 17px; height: 17px; }
.kpi-icon.navy { background: var(--accent-soft); color: var(--accent); }
.kpi-icon.green { background: var(--tag-bg); color: var(--success); }
.kpi-icon.mint { background: var(--vocus-mint); color: #2f6a49; }
.kpi-icon.warn { background: var(--warning-bg); color: var(--warning); }
.kpi-icon.blue { background: #e7f2fa; color: #3e6d9c; }
.kpi-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.kpi-value { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.kpi-note { font-size: 12px; color: var(--muted); }
.kpi-note strong { color: var(--success); font-weight: 600; }

/* ---------- Kaarten & grids ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.card-head h2 { font-size: 15px; margin: 0; letter-spacing: -0.01em; }
.card-head .card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.card-sub { font-size: 12.5px; color: var(--muted); margin: -12px 0 16px; }

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1280px) { .dash-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } }

/* ---------- Staafdiagram (provincies) ---------- */

.bars { display: flex; flex-direction: column; gap: 11px; }
.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 42px;
  align-items: center;
  gap: 10px;
  cursor: default;
}
.bar-label {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track { display: block; height: 12px; border-radius: 4px; background: var(--line); position: relative; }
.bar-fill {
  /* display erbij: de staaf is een <span> en dus inline, waardoor de breedte
     uit het style-attribuut en de hoogte niets deden. */
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  min-width: 3px;
  transition: filter 0.1s ease;
}
.bar-row:hover .bar-fill { filter: brightness(1.25); }
.bar-value { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.chart-tooltip {
  position: fixed;
  z-index: 90;
  background: #1d3550;
  color: #fff;
  font-size: 12.5px;
  padding: 7px 11px;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(23, 40, 61, 0.35);
  max-width: 260px;
}
.chart-tooltip strong { display: block; font-size: 12px; opacity: 0.8; font-weight: 600; }

/* ---------- Data-kwaliteit meters ---------- */

.meters { display: flex; flex-direction: column; gap: 14px; }
.meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  margin-bottom: 5px;
}
.meter-name { color: var(--ink); font-weight: 500; }
.meter-pct { color: var(--muted); font-variant-numeric: tabular-nums; }
.meter-track { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--vocus-green); }
.meter-fill.low { background: #e2b13c; }
/* Het percentage zegt niets over de aantallen erachter; het absolute getal
   staat er daarom klein bij, en een toelichting eronder als het veld gevuld
   kan zijn en tóch niet klopt. */
.meter-count { color: var(--muted); opacity: 0.7; font-weight: 500; }
.meter-note { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }

/* ---------- Leerlingen per niveau ---------- */

/* Wat DUO niet aan een niveau toewijst (onderbouw, internationale stroom,
   vavo) staat onder een streep: het hoort bij het totaal, maar niet in de
   vergelijking tussen niveaus. */
.niveau-rest {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.niveau-rest-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
}
.niveau-rest-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.card-foot { font-size: 11.5px; color: var(--muted); margin: 14px 0 0; line-height: 1.5; }

/* ---------- Activiteit / wijzigingen ---------- */

.activity { display: flex; flex-direction: column; }
.activity-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.activity-row:last-child { border-bottom: none; }
.activity-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.activity-icon svg { width: 15px; height: 15px; }
.activity-icon.created { background: var(--success-bg); color: var(--success); }
.activity-icon.updated { background: var(--info-bg); color: var(--info); }
.activity-icon.skipped { background: var(--danger-bg); color: var(--danger); }
.activity-main { flex: 1; min-width: 0; }
.activity-title { font-size: 13px; font-weight: 600; }
.activity-desc {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-time { font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0; margin-top: 3px; }

/* ---------- Toolbar (zoek + filters) ---------- */

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 380px;
}
.search-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--muted);
}
.search-box input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 12px 10px 36px;
}
.search-box input:focus-visible { outline: 3px solid rgba(107, 174, 214, 0.45); outline-offset: 1px; }

.select {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
}

.toolbar-count { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }

/* De wisknop schuift naar rechts, net als de teller een regel hoger. */
.filters-clear { margin-left: auto; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--muted);
  font-weight: 600;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.tab .tab-count { opacity: 0.7; font-weight: 500; margin-left: 4px; }
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Tabellen ---------- */

.table-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfaf6;
  white-space: nowrap;
}
table.data td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr.clickable { cursor: pointer; }
table.data tbody tr.clickable:hover { background: #f6f9fb; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data th.num { text-align: right; }

.cell-main { font-weight: 600; }
.cell-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.cell-muted { color: var(--muted); }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cell-person { display: flex; align-items: center; gap: 10px; }

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.pager { display: flex; gap: 6px; }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-neutral { background: var(--tag-bg); color: #4a6a58; }
.badge-muted { background: #eef1f4; color: var(--muted); }

.pill-set { display: flex; gap: 4px; flex-wrap: wrap; }
.pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: #3f6950;
}

/* ---------- Verrijking ---------- */

/* Adresveld voor bronnen die van een eigen link worden opgehaald. */
.url-input {
  flex: 1;
  min-width: 190px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 11px;
}
.url-input::placeholder { color: var(--muted); }

.dropzone {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fbfaf6;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.dropzone:hover, .dropzone.drag { border-color: var(--vocus-blue); background: #f3f8fc; }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dropzone > svg { width: 22px; height: 22px; color: var(--muted); flex-shrink: 0; }
.dropzone-file { font-size: 13px; font-weight: 600; color: var(--ink); }
.dropzone-hint { font-size: 12.5px; color: var(--muted); }

.upload-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.batch-list { display: flex; flex-direction: column; gap: 8px; }
.batch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  flex-wrap: wrap;
}
.batch-name { font-weight: 600; flex: 1; min-width: 200px; }
.batch-meta { color: var(--muted); font-size: 12.5px; }

.selectbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 600;
}
.selectbar .btn { margin-left: 0; }
.selectbar-spacer { flex: 1; }

input[type="checkbox"].rowcheck {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.value-diff { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.value-old { color: var(--muted); text-decoration: line-through; }
.value-new { font-weight: 600; color: var(--success); }
.value-arrow { color: var(--muted); }

/* Een voorstel voor een nieuwe school: samenvatting altijd zichtbaar, het
   volledige veldenblok onder een uitklap. */
details.new-school summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
details.new-school summary::-webkit-details-marker { display: none; }
details.new-school[open] summary { margin-bottom: 8px; }

/* Bewust geen minimumbreedte: die zou de tabelkolom oprekken en de hele
   tabel horizontaal laten scrollen zodra je één rij openklapt. */
.new-school-velden { margin: 0; font-size: 12.5px; }
.new-school-velden div { display: flex; gap: 6px; padding: 1px 0; }
.new-school-velden dt { color: var(--muted); flex-shrink: 0; }
.new-school-velden dd { margin: 0; font-weight: 600; }

.new-school-attentie {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--warning);
}
.new-school-attentie svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

/* ---------- Wijzigingslog ---------- */

.log-fields { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.log-fields li { padding: 1px 0; }
.log-fields .fld { font-weight: 600; color: var(--ink); }

details.log-details summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 600;
  list-style: none;
}
details.log-details summary::-webkit-details-marker { display: none; }

/* ---------- Drawer (detailpaneel) ---------- */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 40, 61, 0.4);
  z-index: 50;
  animation: fade 0.15s ease;
}
@keyframes fade { from { opacity: 0; } }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 94vw);
  background: var(--card);
  z-index: 60;
  box-shadow: -12px 0 40px rgba(23, 40, 61, 0.2);
  overflow-y: auto;
  animation: slide 0.18s ease;
}
@keyframes slide { from { transform: translateX(30px); opacity: 0.4; } }

.drawer-head {
  position: sticky;
  top: 0;
  background: var(--card);
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  z-index: 2;
}
.drawer-head h2 { margin: 0 0 2px; font-size: 18px; letter-spacing: -0.01em; }
.drawer-head .drawer-sub { font-size: 13px; color: var(--muted); }
.drawer-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drawer-close svg { width: 15px; height: 15px; }
.drawer-body { padding: 18px 24px 40px; display: flex; flex-direction: column; gap: 18px; }

.drawer-section h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.info-list { margin: 0; display: flex; flex-direction: column; }
.info-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.info-list > div:last-child { border-bottom: none; }
.info-list dt { color: var(--muted); flex-shrink: 0; }
.info-list dd { margin: 0; font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Leerlingen per niveau in het schooldetail: label links, aantal rechts, zodat
   de kolom cijfers onder elkaar te vergelijken blijft. */
.niveau-split { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.niveau-split-row { display: flex; justify-content: space-between; gap: 14px; }
.niveau-split-row span:first-child { color: var(--muted); font-weight: 400; }
.niveau-split-row span:last-child { font-variant-numeric: tabular-nums; }

.drawer-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.drawer-contact:last-child { border-bottom: none; }
.drawer-contact-info { flex: 1; min-width: 0; }
.drawer-contact-name { font-weight: 600; font-size: 13.5px; }
.drawer-contact-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- CRM-chat ---------- */

.chat-body { padding: 18px 24px; display: flex; flex-direction: column; gap: 10px; min-height: 320px; }
.chat-empty { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 8px 0; }

.chat-msg { max-width: 88%; padding: 9px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.chat-msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.assistant { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.chat-thinking { opacity: 0.55; }

.chat-input-row {
  position: sticky;
  bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 12px 24px;
  display: flex;
  gap: 8px;
}
.chat-input-row input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  background: var(--bg);
  font-family: inherit;
}
.chat-input-row input:focus { outline: none; border-color: var(--accent); }

/* ---------- Bel-assistent ---------- */

.bel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) { .bel-grid { grid-template-columns: 1fr; } }

/* Links de bellijst, rechts de belflow: allebei een eigen scrollgebied, zodat
   je door de lijst kunt bladeren zonder het gesprek uit beeld te duwen — en
   andersom. Alleen in het tweekolomsraster; onder 1100px staan de kolommen
   onder elkaar en scrollt de pagina als geheel. De maandweergave
   (.bel-grid-onder) heeft maar één kolom en blijft er ook buiten. */
@media (min-width: 1101px) {
  .bel-grid:not(.bel-grid-onder) > .bel-kolom,
  .bel-grid:not(.bel-grid-onder) > .bel-detail {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

.bel-list { display: flex; flex-direction: column; }
.bel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  border-radius: 10px;
}
.bel-row:last-child { border-bottom: none; }
.bel-row:hover { background: #f6f9fb; }
.bel-row.selected { background: var(--accent-soft); }
.bel-row-main { flex: 1; min-width: 0; }
.bel-row-title { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bel-row-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bel-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.bel-row-visit { margin-top: 3px; }
.pill-visit { background: var(--info-bg); color: var(--info); }
.bel-row-subsidy { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bel-row-subsidy.none { color: var(--muted); font-weight: 500; }

.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.score-high { background: var(--success-bg); color: var(--success); }
.score-mid { background: var(--warning-bg); color: var(--warning); }
.score-low { background: #eef1f4; color: var(--muted); }

.bel-detail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }

.subsidy-box {
  border: 1px solid var(--vocus-sage);
  background: var(--tag-bg);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.subsidy-box.none { border-color: var(--line-strong); background: #fbfaf6; }
.subsidy-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--vocus-mint);
  color: #2f6a49;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.subsidy-icon svg { width: 18px; height: 18px; }
.subsidy-amount { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.subsidy-name { font-size: 12.5px; color: var(--muted); }

.trigger-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trigger-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.trigger-chip svg { width: 12px; height: 12px; }

.score-reasons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.score-reason { display: flex; gap: 10px; align-items: flex-start; }
.score-reason-pts {
  flex-shrink: 0;
  min-width: 36px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--success);
}
/* Aftrek, bijvoorbeeld bij een ISK-vestiging. */
.score-reason-pts.negative { background: var(--danger-bg); color: var(--danger); }
.score-reason-label { font-size: 13px; font-weight: 600; line-height: 1.35; }
.score-reason-why { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.score-line { display: flex; align-items: center; gap: 12px; }
.score-line .meter-track { flex: 1; }
.score-value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.score-value small { font-size: 12px; color: var(--muted); font-weight: 500; }

.mail-concept {
  background: #fbfaf6;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
}
.mail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Sjabloonkeuze boven de concept-opvolgmail */
.mail-picker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.mail-picker label { font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
/* min-width:0 laat de select krimpen i.p.v. de kaart op te rekken bij lange namen. */
.mail-picker .select { flex: 1; min-width: 0; font-size: 13px; padding: 8px 10px; }
.mail-manage { font-size: 12.5px; color: var(--accent); flex-shrink: 0; }

.mail-subject {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.mail-subject span { color: var(--muted); flex-shrink: 0; }
.mail-subject strong { font-weight: 600; }

.mail-warning {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 12.5px;
  line-height: 1.5;
}
.mail-warning svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.mail-warning .code { background: rgba(255, 255, 255, 0.6); white-space: nowrap; }

/* ---------- Mailinteractie (Mailchimp) ---------- */

/* Het oogje met het aantal openingen, naast de score in de bellijst. */
.bel-row-badges { display: flex; align-items: center; gap: 6px; }

.open-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #eef1f4;
  color: var(--muted);
}
.open-badge svg { width: 12px; height: 12px; }
/* Vaak of recent geopend — dit zijn de eerste belletjes. */
.open-badge.hot { background: var(--info-bg); color: var(--info); }

.mail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 520px) { .mail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mail-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbfcfd;
}
.mail-stat-value {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.mail-stat-value.small { font-size: 14px; font-weight: 600; }
.mail-stat-value small { font-size: 13px; font-weight: 600; color: var(--muted); }
.mail-stat-label { font-size: 11.5px; color: var(--muted); }

.mail-campaigns { display: flex; flex-direction: column; }
.mail-campaign {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.mail-campaign:last-child { border-bottom: none; }
.mail-campaign.unopened { opacity: 0.55; }
.mail-campaign-main { flex: 1; min-width: 0; }
.mail-campaign-title {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-campaign-sub { font-size: 11.5px; color: var(--muted); }
.mail-campaign-counts { display: flex; gap: 8px; flex-shrink: 0; }
.mail-campaign-counts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mail-campaign-counts svg { width: 13px; height: 13px; }
.mail-campaign-counts .clicked { color: var(--success); }

.mail-openers { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.mail-openers-head { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.mail-opener {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  padding: 3px 0;
}
.mail-opener span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-opener-count { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ---------- Mailsjablonen (Instellingen) ---------- */

.tpl-list { display: flex; flex-direction: column; }

.tpl-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.tpl-row:last-child { border-bottom: none; }

.tpl-main { flex: 1; min-width: 0; }
.tpl-title {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 13.5px;
}
.tpl-subject { font-size: 12.5px; margin-top: 3px; }
/* Alleen de eerste regels tonen: de volledige tekst staat in het formulier. */
.tpl-preview {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tpl-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

.mail-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  resize: vertical;
}

.tpl-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.token-chip {
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  cursor: pointer;
}
.token-chip:hover { border-color: var(--accent); background: var(--accent-soft); }

.tpl-default-toggle { gap: 6px; }
.tpl-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.tpl-check input { width: 16px; height: 16px; accent-color: var(--accent); }

@media (max-width: 720px) {
  .tpl-row { flex-wrap: wrap; }
}

/* ---------- Instellingen ---------- */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

/* Eén regel onder de tabbladen die vertelt wat er in dit onderwerp thuishoort. */
.settings-hint {
  margin: -4px 0 14px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.flow-diagram {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.flow-node {
  border: 1px solid var(--line-strong);
  background: #fbfaf6;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  text-align: center;
  flex: 1;
  min-width: 110px;
}
.flow-node .flow-title { font-weight: 700; font-size: 13px; }
.flow-node .flow-sub { font-size: 11.5px; color: var(--muted); }
.flow-node.active { border-color: var(--vocus-sage); background: var(--tag-bg); }
.flow-arrow { color: var(--muted); flex-shrink: 0; }

.code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  background: #f2f0e9;
  border-radius: 6px;
  padding: 2px 7px;
  overflow-wrap: anywhere;
}

/* ---------- Leeg / laden / toast ---------- */

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.empty-state svg { width: 36px; height: 36px; opacity: 0.4; margin-bottom: 10px; }
.empty-state h3 { margin: 0 0 4px; font-size: 15px; color: var(--ink); }
.empty-state p { margin: 0 0 16px; font-size: 13.5px; }

.sk {
  background: linear-gradient(90deg, #edeae2 25%, #f5f3ec 50%, #edeae2 75%);
  background-size: 200% 100%;
  animation: sh 1.2s infinite;
  border-radius: 8px;
}
@keyframes sh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.sk-block { height: 120px; }
.sk-row { height: 15px; margin: 14px 16px; }

.toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}
.toast {
  background: #1d3550;
  color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13.5px;
  box-shadow: 0 10px 30px rgba(23, 40, 61, 0.35);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 380px;
  animation: toast-in 0.18s ease;
}
.toast.success { border-left: 4px solid var(--vocus-green); }
.toast.error { border-left: 4px solid #e46a8f; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Login (overgenomen van Vocus DocentenHub) ---------- */

/* De vormgeving ligt paginabreed áchter de inlogkaart in plaats van naast
   een tekstkolom. Dat betekent dat de leesbaarheid uit de kaart zelf moet
   komen: die is bijna dekkend wit, met een rand en een schaduw die hem van
   de achtergrond losmaken. */
.login-page {
  position: relative;
  display: grid;
  /* minmax(0, 1fr) en niet het impliciete `auto`: anders groeit de kolom mee
     met de langste tekstregel in de kaart en loopt die op een telefoon
     rechts buiten het scherm. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 100vh;
  padding: 48px 24px;
  overflow: hidden;
  background: var(--vocus-cream);
}
.login-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Twee vlakken drijven langzaam; puur decoratief, dus uit zodra de bezoeker
   minder beweging wil. */
.art-float { transform-box: fill-box; transform-origin: center; }
.art-float-a { animation: art-drift 19s ease-in-out infinite alternate; }
.art-float-b { animation: art-drift 23s ease-in-out infinite alternate-reverse; }
@keyframes art-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(0, -26px) scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .art-float { animation: none; }
}

.login-panel {
  position: relative;
  z-index: 1;
  width: min(452px, 100%);
  padding: 44px 44px 38px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(45, 79, 122, 0.06),
              0 28px 60px -18px rgba(45, 79, 122, 0.35);
}
.login-panel-inner { width: 100%; min-width: 0; }

.login-brand {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 34px;
}
.login-logo { width: 180px; max-width: 100%; height: auto; display: block; }
.login-brand .eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.login-panel .hero h1 {
  font-size: 34px;
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.login-panel .lead { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; }

.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-input {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
}
.login-input:focus-visible { outline: 3px solid rgba(107, 174, 214, 0.5); outline-offset: 1px; }

.cta {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 10px;
  cursor: pointer;
}
.cta:hover:not(:disabled) { filter: brightness(1.12); }
.cta:disabled { opacity: 0.65; cursor: progress; }

.login-limiet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--warning);
  background: var(--warning-bg);
  color: var(--warning);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
}
.login-limiet svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.login-limiet p { margin: 0; }
/* display:flex hierboven wint anders van het hidden-attribuut */
.login-limiet[hidden] { display: none; }

.login-support { font-size: 13px; color: var(--muted); margin: 30px 0 0; line-height: 1.6; }

.login-bevestiging {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--vocus-sage);
  background: var(--tag-bg);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.login-bevestiging[hidden] { display: none; }
.login-bevestiging svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--success); margin-top: 2px; }
.login-bevestiging p { margin: 0; }
.login-bevestiging-titel { font-weight: 700; margin-bottom: 2px; }

@media (max-width: 620px) {
  /* Op een telefoon is de kaart bijna het hele scherm; de vormgeving blijft
     als rand zichtbaar in plaats van dat de tekst eroverheen moet. */
  .login-page { min-height: 100dvh; padding: 24px 16px; }
  .login-panel { padding: 32px 24px 28px; border-radius: 20px; }
  .login-panel .hero h1 { font-size: 28px; }
  .login-brand { margin-bottom: 26px; gap: 14px; }
  .login-logo { width: 148px; }
}

/* ---------- Gesprekken (bel-assistent) ---------- */

.call-list { display: flex; flex-direction: column; gap: 10px; }
.call-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.call-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
}
.call-row-head > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); }
.call-row-head .badge { margin-left: auto; }
.call-summary { font-size: 13px; line-height: 1.55; margin: 0; }
.call-actions { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); }
.call-actions li { margin: 2px 0; }

.call-block { margin-top: 10px; }
.call-block-title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Wissel tussen samenvatting en volledige transcriptie. */
.call-tabs {
  display: flex;
  gap: 4px;
  margin: 10px 0 0;
  border-bottom: 1px solid var(--line);
}
.call-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 6px 2px;
  margin-right: 14px;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
.call-tab:hover { color: var(--ink); }
.call-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.call-tab-note { font-weight: 400; color: var(--muted); }
.call-panel { margin-top: 10px; }
.call-panel[hidden] { display: none; }

.call-transcript-text {
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.call-pending {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.call-row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.call-audio { display: block; width: 100%; margin-top: 10px; height: 34px; }

/* ---------- Gebruikersbeheer ---------- */

.user-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
/* min-width:0 en width:100%: anders rekken de placeholders de gridkolommen
   op en lopen de velden buiten de kaart. */
.user-form .login-input,
.user-form .select { font-size: 13.5px; padding: 9px 12px; width: 100%; min-width: 0; }
.user-form .full { grid-column: 1 / -1; }
.user-form .btn { justify-content: center; width: 100%; }

.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.user-row:last-child { border-bottom: none; }
.user-row-info { flex: 1; min-width: 0; }
.user-row-name { font-weight: 600; font-size: 13.5px; }
.user-row-mail { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.user-row .btn { flex-shrink: 0; }

/* ---------- Puntentoekenning (Instellingen) ---------- */

/* Regels lezen als zinnen — daarom over de volle breedte, niet in een kolom. */
.card-wide { grid-column: 1 / -1; }

.rule-list { display: flex; flex-direction: column; }

.rule-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.rule-row:last-child { border-bottom: none; }
.rule-row.off { opacity: 0.5; }

.rule-switch { display: flex; align-items: center; padding-top: 2px; }
.rule-switch input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

.rule-main { flex: 1; min-width: 0; }
.rule-title {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 13.5px;
}
.rule-cond { font-size: 12.5px; color: var(--ink); margin-top: 3px; }
.rule-why { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }

.rule-points { display: flex; align-items: center; gap: 5px; flex-shrink: 0; padding-top: 1px; }
.rule-points-input {
  width: 68px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: right;
  padding: 6px 8px;
}
.rule-points-unit { font-size: 12px; color: var(--muted); }

.rule-actions { display: flex; gap: 6px; flex-shrink: 0; }

.rule-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 14px;
}

.rule-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.rule-form-title { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.rule-form .full { grid-column: 1 / -1; }

.rule-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rule-field > span { font-size: 12.5px; font-weight: 600; }
.rule-field > span small { font-weight: 400; color: var(--muted); }
/* width + min-width: anders duwen lange placeholders de gridkolommen uit elkaar. */
.rule-field .login-input,
.rule-field .select { width: 100%; min-width: 0; font-size: 13.5px; padding: 9px 12px; }
.rule-field textarea.login-input { resize: vertical; line-height: 1.45; }

.rule-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.rule-hint summary { cursor: pointer; }
.rule-tokens { margin: 6px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }

.rule-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .rule-row { flex-wrap: wrap; }
  .rule-points, .rule-actions { padding-left: 29px; }
}

/* ---------- School of persoon toevoegen (Bel-assistent) ---------- */

/* Dezelfde veldopmaak als het regelformulier (.rule-field), maar in de smallere
   lade — vandaar een eigen minimum per kolom. */
.lead-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.lead-grid .full { grid-column: 1 / -1; }
.lead-grid .rule-hint { margin: 2px 0 0; }

.lead-treffers { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

.lead-treffer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.lead-treffer:hover { border-color: var(--accent); background: var(--accent-soft); }
.lead-treffer-naam { font-weight: 600; font-size: 13.5px; }

.lead-gekozen {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: 13px;
}
.lead-gekozen .btn { margin-left: auto; }

/* ---------- Responsief ---------- */

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar {
    position: static;
    height: auto;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    overflow-x: auto;
  }
  .sidebar-nav { flex-direction: row; flex: 1; }
  .nav-item { padding: 8px 10px; font-size: 12.5px; white-space: nowrap; }
  .nav-item svg { display: none; }
  .sidebar-footer { border-top: 0; padding-top: 0; }
  .sidebar-footer .sync-status { display: none; }
  .sidebar-account { margin-bottom: 0; border-bottom: 0; }
  .content { padding: 20px 16px 48px; }
}

/* ============================================================
   Borden — Monday-achtige bordweergave
   Brede tabel met een vastgezette eerste kolom en kopregel, zodat je bij
   zeventig kolommen nog ziet naar welke rij je kijkt.
   ============================================================ */

.board-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.board-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: background .15s, color .15s, border-color .15s;
}
.board-tab svg { width: 16px; height: 16px; }
.board-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.board-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.board-tab-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}
.board-tab.active .board-tab-count { background: rgba(255,255,255,.2); color: #fff; }

.board-toolbar { flex-wrap: wrap; }

.board-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* De hoogte is begrensd zodat de kopregel iets heeft om aan te blijven kleven. */
.board-scroll {
  overflow: auto;
  max-height: calc(100vh - 300px);
}

.board-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
}

.board-table th,
.board-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f2f7fa;
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
}

/* De eerste kolom blijft staan bij horizontaal scrollen. */
.board-table .bsticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card);
  border-right: 1px solid var(--line-strong);
}
.board-table thead th.bsticky { z-index: 4; background: #f2f7fa; }

.board-table tbody tr.brow { cursor: pointer; }
.board-table tbody tr.brow:hover td { background: #f6fbfd; }
.board-table tbody tr.brow:hover td.bsticky { background: #eef7fb; }

/* Groepskopregel, met het gekleurde balkje dat Monday er ook voor zet. */
.bgroup-row { cursor: pointer; }
.bgroup-row td {
  position: sticky;
  left: 0;
  background: #fbfdfe;
  border-bottom: 1px solid var(--line-strong);
  padding: 10px 12px;
  font-weight: 700;
}
.bgroup-row:hover td { background: #f2f8fb; }
.bgroup-toggle {
  display: inline-block;
  width: 14px;
  color: var(--muted);
  transition: transform .15s;
}
.bgroup-toggle.collapsed { transform: rotate(-90deg); }
.bgroup-bar {
  display: inline-block;
  width: 4px;
  height: 15px;
  border-radius: 2px;
  margin: 0 8px -2px 4px;
  background: var(--muted);
}
.bgroup-name { color: var(--ink); }
.bgroup-count {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

/* Celopmaak */
.bcell-title { font-weight: 600; color: var(--ink); }
.bcell-empty { color: var(--line-strong); }
.bcell-muted { color: var(--muted); }
.bcell-num { display: block; text-align: right; font-variant-numeric: tabular-nums; }
.board-table td.kind-number,
.board-table td.kind-money { text-align: right; }
.bcell-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--tag-bg);
  color: var(--muted);
}
.bcell-link { color: var(--info); text-decoration: none; }
.bcell-link:hover { text-decoration: underline; }
.bcell-person { display: inline-flex; align-items: center; gap: 6px; }
.bavatar {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Statuspillen — één kleur per waarde, zoals op Monday. */
.bpill {
  display: inline-block;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.bpill-set { display: inline-flex; gap: 4px; flex-wrap: nowrap; }

.tone-green  { background: #e3f4ea; color: #2f6b45; }
.tone-teal   { background: #dff2f0; color: #22706a; }
.tone-blue   { background: #e6f0f9; color: #2f5f8c; }
.tone-purple { background: #eeeafa; color: #5a45a0; }
.tone-red    { background: #fbe2e8; color: #a01f4c; }
.tone-orange { background: #fdecd8; color: #9c4a08; }
.tone-amber  { background: #fbf3d5; color: #85610a; }
.tone-lime   { background: #eaf5da; color: #4f6f22; }
.tone-pink   { background: #fce7f1; color: #9c3372; }
.tone-brown  { background: #f0e9e2; color: #6f5442; }
.tone-slate  { background: #eaeff3; color: #4f6579; }
.tone-grey   { background: #eef1f3; color: #6b7c8a; }

/* Het groepsbalkje pakt de tekstkleur van dezelfde toon. */
.bgroup-bar.tone-green  { background: #4f9468; }
.bgroup-bar.tone-teal   { background: #2c8b83; }
.bgroup-bar.tone-blue   { background: #3e6d9c; }
.bgroup-bar.tone-purple { background: #6f57bd; }
.bgroup-bar.tone-red    { background: #c2255c; }
.bgroup-bar.tone-orange { background: #cb6110; }
.bgroup-bar.tone-amber  { background: #b3860a; }
.bgroup-bar.tone-lime   { background: #6a9430; }
.bgroup-bar.tone-pink   { background: #c2478f; }
.bgroup-bar.tone-brown  { background: #8b6b53; }
.bgroup-bar.tone-slate  { background: #6b8299; }
.bgroup-bar.tone-grey   { background: #8b9aa6; }

/* Kolomkiezer */
.colpicker { position: relative; }
.colpicker-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 300px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 10px;
}
.colpicker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.colpicker-actions { display: flex; gap: 2px; }
.colpicker-list { max-height: 340px; overflow: auto; }
.colpicker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.colpicker-item:hover { background: var(--accent-soft); }
.colpicker-sub {
  margin: 10px 6px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.board-empty-cols { padding: 40px; text-align: center; color: var(--muted); }

/* Alle velden van één rij in de zijlade */
.drawer-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.drawer-field {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.drawer-field .drawer-label { color: var(--muted); font-size: 12px; }
.drawer-field .drawer-value { word-break: break-word; }
.drawer-actions { margin-bottom: 14px; }

/* ---------- Verrijkingsflow — genummerde stappen ---------- */

.flow { display: flex; flex-direction: column; gap: 10px; }

.flow-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* De kop is de klapknop: hele regel klikbaar, maar oogt niet als knop. */
.flow-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.flow-head:hover { background: #fbfaf6; }

.flow-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.flow-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.flow-title { font-size: 14.5px; font-weight: 600; }
.flow-summary {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-chevron { flex-shrink: 0; color: var(--muted); display: inline-flex; }
.flow-chevron svg {
  width: 17px;
  height: 17px;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}
.flow-step.open .flow-chevron svg { transform: rotate(-90deg); }

/* Afgeronde stap: groen vinkje in plaats van het nummer. */
.flow-step.done .flow-num {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
  font-size: 0;                        /* het cijfer wijkt voor het vinkje */
}
.flow-step.done .flow-num::after {
  content: "✓";
  font-size: 15px;
  line-height: 1;
}

/* De stap die aan de beurt is — de eerste die nog niet af is, dus open. */
.flow-step.open { border-color: var(--line-strong); }
.flow-step.open:not(.done) .flow-num {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.flow-body { display: none; padding: 0 18px 18px 62px; }
.flow-step.open .flow-body { display: block; }
.flow-text { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.55; }

/* Binnen een stap staat de tabel al in een kaart; geen dubbele marge. */
.flow-body .toolbar { margin-top: 0; }

@media (max-width: 700px) {
  .flow-head { gap: 11px; padding: 13px 14px; }
  .flow-body { padding: 0 14px 14px; }
  .flow-summary { white-space: normal; }
}

/* ── Het slot op wegschrijven naar Monday ─────────────────────────────────
   Twee standen die op één blik te onderscheiden moeten zijn: dicht is de
   veilige stand en krijgt daarom géén alarmkleur, open juist wel — dat is
   de stand waarin de portal het bron-CRM kan wijzigen. */
.writelock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.writelock.is-locked { background: var(--bg); }
.writelock.is-open {
  background: var(--danger-bg);
  border-color: var(--danger);
}
.writelock-state { display: flex; flex-direction: column; gap: 3px; min-width: 240px; }
.writelock-state strong { font-size: 13.5px; }
.writelock-state .cell-muted { font-size: 12.5px; }

/* ---------- Subsidiewijzer ----------
   Eén voorwaarde is vier velden op een rij: het schoolveld, de operator, de
   waarde en de toelichting die in het advies bij de school terechtkomt. Onder
   900px klapt dat naar onder elkaar — vier selects naast elkaar zijn op een
   laptopscherm niet meer te lezen. */
.crit-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr) minmax(90px, 0.6fr) minmax(180px, 1.4fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .crit-row { grid-template-columns: 1fr; }
}

/* Het bolletje bij "zoekronde loopt" — zelfde schimmer als de skeletons, zodat
   het duidelijk is dat er iets loopt en niet dat er iets stilstaat. */
.sk-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Een extra regel onder de toelichting van een stap: nuance die je nodig hebt
   als je de stap gaat gebruiken, maar niet als je hem alleen doorleest. */
.flow-note {
  margin: -4px 0 12px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Data-verrijking: het paneel bovenaan ─────────────────────────────────── */
.runpanel { margin-bottom: 18px; }
.runpanel-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.runpanel-jaar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.runpanel-jaar label { font-size: 13px; font-weight: 600; }
.runpanel-jaar .select { min-width: 150px; }
.runpanel-hint { font-size: 12.5px; color: var(--muted); }
.runpanel-acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.runpanel-uitleg {
  margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55;
  max-width: 78ch;
}

/* De stand van een ronde: één regel per stap, met een icoon dat vertelt of hij
   nog moet, bezig is, gelukt is of stukliep. */
.runstand {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}
.runstand.is-busy { border-color: var(--info); }
.runstand-kop { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.runstand-kop strong { font-size: 13.5px; }
.runstand-kop .cell-muted { font-size: 12.5px; }
.runstand-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.runstap { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; }
.runstap-icoon { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; }
.runstap-icoon svg { width: 13px; height: 13px; }
.runstap.is-ok .runstap-icoon { background: var(--success-bg); color: var(--success); }
.runstap.is-fout .runstap-icoon { background: var(--danger-bg); color: var(--danger); }
.runstap.is-bezig .runstap-icoon { background: var(--info-bg); color: var(--info); }
.runstap.is-wacht .runstap-icoon,
.runstap.is-overgeslagen .runstap-icoon { background: var(--line); color: var(--muted); }
.runstap-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.runstap-tekst strong { font-weight: 600; }
.runstap-tekst span { color: var(--muted); }
.runstap.is-fout .runstap-tekst span { color: var(--danger); }
.runstap-tijd { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.spin { animation: spin 1.1s linear infinite; }

/* ── Het overzicht van wat er weggeschreven zou worden ────────────────────── */
.preview { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.preview-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preview-kop h3 { margin: 0; font-size: 14px; }
.preview-cijfers {
  display: grid; gap: 10px; margin: 12px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.preview-cijfer {
  padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card);
}
.preview-cijfer.is-nadruk { border-color: var(--accent); background: var(--accent-soft); }
.preview-getal { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.preview-label { display: block; font-size: 12.5px; font-weight: 600; }
.preview-uitleg { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.preview-tabel { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px; }
.preview-tabel th {
  text-align: left; font-weight: 600; color: var(--muted);
  padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.preview-tabel td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.preview-tabel td:nth-child(2), .preview-tabel td:nth-child(3),
.preview-tabel th:nth-child(2), .preview-tabel th:nth-child(3) { font-variant-numeric: tabular-nums; }
.preview-borden { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.7; }
.preview-borden span { white-space: nowrap; }

/* Het vinkje in de kop van een stap: doet deze stap mee als je de ronde
   automatisch laat lopen? */
.flow-auto {
  display: flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 10px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
}
.flow-auto input { cursor: pointer; }

/* ---------- Tijdlijn van een zoekronde ----------
   Eén regel per handeling: tijd, icoon, wat er gebeurde. De tijd staat in een
   vaste kolom met tabularcijfers, zodat de regels onder elkaar uitlijnen en de
   lijst te scannen is als een log en niet als proza. */
.log-timeline {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.log-timeline.live { max-height: 200px; overflow-y: auto; }
.log-line {
  display: grid;
  grid-template-columns: 62px 16px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 3px 0;
  border-bottom: 1px solid var(--line);
}
.log-line:last-child { border-bottom: 0; }
.log-time {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 11.5px;
  padding-top: 1px;
}
.log-line svg { width: 14px; height: 14px; margin-top: 2px; color: var(--muted); }
.log-line em { font-style: normal; font-weight: 600; }

/* Een stapregel is de kop van een blok handelingen, een foutregel moet opvallen. */
.log-stap { font-weight: 600; margin-top: 6px; }
.log-stap svg { color: var(--accent); }
.log-fout { color: var(--danger); }
.log-fout svg { color: var(--danger); }
.log-regeling svg { color: var(--success); }

/* Het verslag van een stap: model-tekst, dus ingeklapt en met behoud van
   regelafbrekingen — het is opgeschreven als lijstje per regeling. */
.log-verslag details { grid-column: 3; }
.log-verslag summary { cursor: pointer; }
.log-verslag-tekst {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  margin: 6px 0 0;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  max-height: 320px;
  overflow-y: auto;
}

/* ---------- De week van de beller (Bel-assistent) ----------
   Het weekdoel is een getal dat je in één blik moet kunnen lezen: naam,
   stand, balk, en wat er nog openstaat. Vandaar één rij per persoon in
   plaats van een tabel. */

.weekdoel-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "naam cijfers" "balk balk" "open open";
  gap: 6px 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.weekdoel-row:last-child { border-bottom: none; }
.weekdoel-naam { grid-area: naam; font-weight: 600; font-size: 13.5px; }
.weekdoel-cijfers {
  grid-area: cijfers;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.weekdoel-cijfers small { font-size: 12px; color: var(--muted); font-weight: 500; }
.weekdoel-row .meter-track { grid-area: balk; }
.weekdoel-open { grid-area: open; display: flex; flex-wrap: wrap; gap: 6px; }

/* De rest van het team hoort erbij maar niet vooraan: dichtgeklapt, met de
   eigen week altijd zichtbaar erboven. */
.weekdoel-rest { margin-top: 10px; }
.weekdoel-rest > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--muted);
  padding: 6px 0;
}
.weekdoel-rest[open] > summary { margin-bottom: 4px; }

/* De knoppen van de opvolgkaart: uitstellen in weken, of een eigen datum. */
.opvolg-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.opvolg-acties .login-input {
  font-size: 13px;
  padding: 8px 10px;
  width: auto;
  min-width: 150px;
  flex: 1 1 150px;
}

/* Het weekdoel in de gebruikerslijst: een klein invulveld in de regel zelf,
   zodat bijstellen niet via een apart formulier hoeft. */
/* ============================================================
   Weekplanning en maandagenda
   ============================================================ */

/* De rekenregel boven de weekplanning: doel ÷ conversie = gesprekken. Die staat
   er zodat een lijst van honderd leads geen willekeurig getal lijkt. */
.planning-som {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--tint, rgba(45, 79, 122, 0.05));
  font-size: 13px;
}
.planning-doel, .planning-nodig { font-weight: 600; color: var(--ink); }
.planning-op { color: var(--muted); }
.planning-rest {
  margin-left: auto;
  color: var(--muted);
  font-size: 12.5px;
}

/* Kop binnen een lijst: "Afspraken deze week" boven de aangevulde leads. */
.lijst-kop {
  padding: 10px 4px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.lijst-kop:not(:first-child) { border-top: 1px solid var(--line); margin-top: 6px; }

/* In de maandweergave staat de kalender boven het detailpaneel, dus daar hoeft
   het raster geen tweede kolom te reserveren. */
.bel-grid-onder { grid-template-columns: 1fr; }

/* Links staan de bellijst en, eronder, de prioriteitsweging van de gekozen
   school: die hoort bij het kiezen, niet bij het gesprek. */
.bel-kolom { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- Het gesprek als flow (Bel-assistent) ----------
   Genummerde stappen in de volgorde waarin je een belletje afwerkt. De
   verrijkingspagina heeft een eigen, uitklapbare flow (.flow-*); deze staat
   altijd open en is opgebouwd uit gewone kaarten, vandaar eigen namen. */

.belflow { display: flex; flex-direction: column; gap: 16px; position: relative; }

/* Het draadje tussen de stappen: maakt van vijf kaarten één route. */
.belflow-step { position: relative; }
.belflow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -16px;
  height: 16px;
  width: 2px;
  background: var(--line-strong);
}

.belflow-head { align-items: flex-start; }
.belflow-head h2 { display: flex; align-items: center; gap: 12px; min-width: 0; }
.belflow-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.belflow-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.belflow-hint {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

/* De openingszet, bovenaan het haakje: het enige dat je echt gelezen moet
   hebben voor je belt. */
.belflow-lead {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

/* Feiten om in het gesprek naar te verwijzen. */
.haakje-lijst {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.haakje-lijst li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
}
.haakje-lijst svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }

/* Wat je alleen soms nodig hebt, zoals de mailcijfers achter het haakje. */
.belflow-extra { margin-top: 12px; }
.belflow-extra > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.belflow-extra > summary::-webkit-details-marker { display: none; }
/* Een flex-summary verliest zijn eigen driehoekje, dus staat hier een eigen
   pijltje: zonder dat teken ziet niemand dat er iets uit te klappen valt. */
.belflow-extra > summary::before {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: var(--muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.belflow-extra[open] > summary::before { transform: rotate(90deg); }
.belflow-extra[open] > summary { margin-bottom: 12px; }

@media (max-width: 700px) {
  .belflow-step:not(:last-child)::after { display: none; }
  .belflow-hint { display: none; }
}

.agenda-nav { display: flex; align-items: center; gap: 8px; }
.agenda-nav .btn { padding: 6px 10px; }

.agenda-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.agenda-weekdag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 4px 2px;
}
.agenda-dag {
  min-height: 92px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card, #fff);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Dagen van de vorige of volgende maand horen er wel bij — een week loopt niet
   netjes bij de eerste van de maand — maar mogen niet meedingen om aandacht. */
.agenda-dag.buiten { opacity: 0.45; }
.agenda-dag.weekend { background: rgba(36, 64, 95, 0.03); }
.agenda-dag.vandaag {
  border-color: var(--vocus-blue, #2d4f7a);
  box-shadow: inset 0 0 0 1px var(--vocus-blue, #2d4f7a);
}
.agenda-dagkop { display: flex; align-items: center; justify-content: space-between; }
.agenda-dagnr { font-size: 12px; font-weight: 600; color: var(--muted); }
.agenda-dag.vandaag .agenda-dagnr { color: var(--vocus-blue, #2d4f7a); }
.agenda-dagtotaal {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}
.agenda-item {
  display: flex;
  align-items: baseline;
  gap: 5px;
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 4px 6px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  background: rgba(45, 79, 122, 0.1);
  color: var(--ink);
}
.agenda-item:hover { background: rgba(45, 79, 122, 0.18); }
.agenda-item.selected { background: var(--vocus-blue, #2d4f7a); color: #fff; }
.agenda-item.te-laat { background: rgba(200, 70, 70, 0.14); }
.agenda-item.te-laat.selected { background: #b4453f; color: #fff; }
.agenda-tijd { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.agenda-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Op een telefoon is een raster van zeven kolommen onleesbaar; dan wordt het
   een lijst van dagen met inhoud. */
@media (max-width: 760px) {
  .agenda-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .agenda-dag { min-height: 58px; padding: 3px; }
  .agenda-naam { display: none; }
  .agenda-weekdag { font-size: 9.5px; }
}

/* Datum en tijd van een terugbelmoment staan naast elkaar. */
.opvolg-wanneer { display: flex; gap: 6px; align-items: center; }
.opvolg-wanneer .login-input { min-width: 0; }
.opvolg-wanneer input[type="time"] { width: 108px; }

/* De conversieratio onder Instellingen → Bellijst. */
.conv-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.conv-veld { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.conv-veld .login-input { width: 96px; font-size: 14px; font-weight: 600; }

.user-target { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.user-target .login-input {
  width: 68px;
  padding: 7px 8px;
  font-size: 13px;
  text-align: right;
}
.user-target span { font-size: 12px; color: var(--muted); }

/* ---------- Wie werkt hier nu? (de schoolgids-check) ----------
   Zit in stap 1 van de bel-flow, ónder de contactpersoon. Het is een blok
   binnen een kaart en geen eigen kaart: het hoort bij "wie bel ik" en niet
   naast de flow. Vandaar de dunne scheidingslijn erboven in plaats van een
   eigen rand — anders leest het als een zesde stap. */
.team-blok {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.team-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.team-kop-titel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.team-kop-titel svg { width: 15px; height: 15px; color: var(--muted); }
.team-kop-bron { font-size: 12.5px; color: var(--muted); }
.team-uitleg { margin: 6px 0 10px; font-size: 12.5px; color: var(--muted); }
.team-uitleg-klein { margin: 6px 0 0; font-size: 12.5px; }

.team-bezig {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
/* Een scan doet meerdere webzoekopdrachten en duurt minuten; dit rondje is het
   verschil tussen "bezig" en "vastgelopen". */
.spinner {
  width: 13px;
  height: 13px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.team-log { margin-top: 6px; }

.team-fout {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0;
  font-size: 12.5px;
  color: var(--danger);
}
.team-fout svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.team-fout.klein { color: var(--warning); }

/* Het oordeel over onze eigen contactpersonen. Staat bovenaan omdat dit het
   enige deel is waar je gedrag van verandert: staat je contactpersoon er niet
   meer, dan bel je iemand anders — of niet. */
.team-controle {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.team-controle-rij {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--tag-bg);
}
.team-controle-rij.niet_gevonden { background: var(--warning-bg); }
.team-controle-rij.vertrokken { background: var(--danger-bg); }
.team-controle-rij.gewijzigd { background: var(--info-bg); }
.team-controle-naam { font-size: 13px; font-weight: 600; color: var(--ink); }
.team-functie-nu { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.team-controle-waarom { font-size: 12px; color: var(--muted); margin-top: 1px; }

.team-beslissers { margin-top: 12px; }
.team-subkop {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 4px;
}
.team-beslissers ul { list-style: none; margin: 0; padding: 0; }
.team-beslissers li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 3px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.team-beslissers li:last-child { border-bottom: none; }
.team-naam { font-weight: 600; color: var(--ink); }
.team-functie { color: var(--muted); font-size: 12.5px; }

.team-details { margin-top: 10px; }
.team-details > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--accent);
  padding: 4px 0;
}
.team-tabel { font-size: 12.5px; }
.team-tabel .badge { margin-left: 6px; }
/* De groepskop scheidt directie van docenten binnen dezelfde tabel: een lijst
   van honderd namen zonder kopjes is niet te doorzoeken. */
.team-groepkop td {
  background: var(--tag-bg);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
/* Een afgeleid mailadres volgt uit het patroon van de school en stond niet in
   een bron. De stippellijn is de waarschuwing: het is een gok. */
.team-mail { color: var(--accent); text-decoration: none; }
.team-mail:hover { text-decoration: underline; }
.team-mail.afgeleid {
  color: var(--warning);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.team-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
}
.team-patroon {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 6px;
}
.team-samenvatting {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.team-bron { color: var(--muted); text-decoration: underline dotted; text-underline-offset: 2px; }
.team-bron:hover { color: var(--accent); }
.team-controle-rij.onzeker { background: var(--accent-soft); }

/* ============================================================
   Marketing — campagnevoorstellen, mailings, docenten, kalender

   Hergebruikt zoveel mogelijk wat er al staat: de kaarten, de tabs, de
   kpi-tegels, de agenda-raster van de Bel-assistent en de mail-blokken. Hier
   staat alleen wat er nog niet was.
   ============================================================ */

/* De doelgroepkeuze: dezelfde vorm als een pill, maar aanklikbaar. `.pill` zelf
   is een label en geen knop, dus die krijgt hier de knopkant erbij in plaats van
   dat `.pill` overal een cursor krijgt. */
button.pill {
  border: 1px solid var(--line);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
}
button.pill:hover { border-color: var(--accent); }
button.pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Een mailingregel is een knop (hij opent het paneel), maar mag er niet als een
   knop uitzien — de regels staan onder elkaar als een lijst. */
button.mail-campaign {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  cursor: pointer;
  font: inherit;
  border-radius: 0;
}
button.mail-campaign:hover { background: var(--accent-soft); }

/* De mailings op de kalender. Blauw is gepland, groen is verstuurd, grijs is een
   concept dat toch een datum heeft. Bewust niet `.te-laat` hergebruiken: dat is
   rood, en een mailing die volgende week de deur uit gaat is niet te laat. */
.agenda-item.mkt-verstuurd { background: rgba(60, 150, 100, 0.16); }
.agenda-item.mkt-concept { background: var(--tag-bg); color: var(--muted); }
.agenda-item.mkt-geannuleerd { background: var(--tag-bg); color: var(--muted); text-decoration: line-through; }

/* De teksteditor van de mailing. Onderwerp en tekst staan onder elkaar met de
   plaatshouders eronder, zodat je ze kunt aanklikken zonder het veld te verlaten. */
.mail-editor .drawer-field { margin-bottom: 12px; }
.mail-editor textarea.mail-concept {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
}
.mail-editor .rule-tokens { margin-top: 2px; }

/* De voet van de mailingkaart heeft een datumveld naast de knoppen; die moeten
   op een smal scherm onder elkaar vallen in plaats van te knijpen. */
.card-foot .mail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card-foot .drawer-field { min-width: 170px; }

/* De segmenttabel is breed: tien kolommen met de zes kenmerken erin. Naam boven,
   plaats eronder, in één cel. Deze regels staan met opzet achter `.mkt-table` en
   niet op `.board-table`: dat laatste is het bordenoverzicht, en dat toont zijn
   cellen op één regel. */
.mkt-table td .bcell-title { display: block; }
.mkt-table td .bcell-muted { display: block; font-size: 11.5px; color: var(--muted); }
.mkt-table td .badge { margin-left: 4px; vertical-align: middle; }
.mkt-table td { vertical-align: top; }
.mkt-table input[type="checkbox"] { cursor: pointer; }