/* Lead Today — subset of the house-style tokens for this app's pages.
   Full source: git@github.com:Lead-Today/huisstijl-leadtoday.git */

/* ───── Isidora Sans (huisstijl-lettertype) ───── */
@font-face {
  font-family: "Isidora Sans";
  src: url("fonts/IsidoraSans-Medium.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Isidora Sans";
  src: url("fonts/IsidoraSans-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Isidora Sans";
  src: url("fonts/IsidoraSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --lt-ink: #101820;
  --lt-blue: #0093B2;
  --lt-blue-dark: #007A94;
  --lt-blue-bg: #E0F4F9;
  --lt-orange: #FC4C02;
  --lt-orange-dark: #D93F00;
  --lt-bg: #F8FAFC;
  --lt-bg-soft: #F1F5F9;
  --lt-surface: #FFFFFF;
  --lt-border: #E2E8F0;
  --lt-text: #101820;
  --lt-text-muted: #64748B;
  --lt-success: #16A34A;
  --lt-success-bg: #DCFCE7;
  --lt-error: #DC2626;
  --lt-error-bg: #FEE2E2;
  /* Het rood van Exact Online. Apart van --lt-error: dat is 'er is iets fout',
     dit is 'dit komt uit Exact'. */
  --exact-red: #E2001A;
  --exact-red-dark: #B00016;
  --exact-red-bg: #FDF2F3;
  /* Amber: needs attention, but nothing is broken. */
  --lt-warn: #F59E0B;
  --lt-warn-bg: #FEF3C7;
  --lt-warn-ink: #92400E;
  --font-sans: "Isidora Sans", Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* No rounded corners anywhere in the app. */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
  --r-pill: 0;
  --shadow-card: 0 1px 4px rgba(16, 24, 32, 0.05), 0 4px 16px rgba(16, 24, 32, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--lt-bg);
  color: var(--lt-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.brand img { height: 40px; width: auto; }

.card {
  background: var(--lt-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 8px 16px;
}

/* Wide data tables: the table scrolls horizontally inside the card (the card
   keeps its container width and the page never scrolls sideways). */
.card.card-wide { overflow-x: auto; }

h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--lt-ink);
}

h2 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 24px 0 8px;
}

p { color: var(--lt-text-muted); margin: 0 0 16px; }

.btn {
  display: inline-block;
  background: var(--lt-orange);
  color: #fff;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.9375rem;
  /* Expliciet, want anders zijn een <button> en een <a> met deze klasse niet
     even hoog: de link erft de 1.6 van de body en de knop houdt de 'normal' uit
     de UA-stijl. Dat is 48px tegen 41px, en dat viel op zodra ze naast elkaar
     stonden. */
  line-height: 1.2;
  text-decoration: none;
  border: none;
  border-radius: 0;
  padding: 12px 24px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: background 0.15s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btn:hover { background: var(--lt-orange-dark); }

.btn-secondary { background: var(--lt-blue); }
.btn-secondary:hover { background: var(--lt-blue-dark); }

.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 6px 14px;
  border-radius: 0;
}
.status.ok { background: var(--lt-success-bg); color: var(--lt-success); }
.status.off { background: var(--lt-error-bg); color: var(--lt-error); }
.status.warn { background: #FEF3C7; color: #B45309; }
.sync-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.sync-badge.ok  { background: var(--lt-success-bg); color: var(--lt-success); }
.sync-badge.err { background: var(--lt-error-bg); color: var(--lt-error); }

.dot { width: 8px; height: 8px; border-radius: 0; background: currentColor; }

.alert {
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 16px;
  font-size: 0.9375rem;
}
.alert.ok { background: var(--lt-success-bg); color: var(--lt-success); }
.alert.err { background: var(--lt-error-bg); color: var(--lt-error); }

/* Notification banner, full-width and clickable. Amber: these ask for
   attention, unlike the red banner that reports a broken connection. */
.data-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--lt-warn-bg); color: var(--lt-warn-ink);
  border: 1px solid var(--lt-warn); border-radius: var(--r-md);
  padding: 12px 16px; margin-bottom: 20px; text-decoration: none;
  font-size: 0.9375rem;
}
.data-banner:hover { background: #FDE9B0; }
.data-banner .data-banner-btn {
  background: var(--lt-warn); color: #fff; padding: 6px 14px;
  border-radius: var(--r-md); font-weight: 700; font-size: 0.875rem; white-space: nowrap;
}

/* Exact Online authorization expired — prominent, shown on every page. */
.exact-banner {
  display: flex; align-items: center; gap: 14px;
  background: var(--lt-error); color: #fff;
  border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 20px;
  text-decoration: none; font-size: 1.0625rem;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35);
}
.exact-banner:hover { background: #B91C1C; }
.exact-banner .exact-banner-icon { font-size: 1.6rem; line-height: 1; }
.exact-banner .exact-banner-btn {
  margin-left: auto; background: #fff; color: var(--lt-error);
  padding: 8px 16px; border-radius: var(--r-md); font-weight: 700;
  font-size: 0.9375rem; white-space: nowrap;
}

/* "Bekijk als" banner: een beheerder kijkt mee door de ogen van een gebruiker. */
.impersonate-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--lt-blue-dark); color: #fff;
  border-radius: var(--r-md); padding: 12px 18px; margin-bottom: 20px;
  font-size: 0.95rem;
}
.impersonate-banner strong { font-weight: 700; }
.impersonate-banner-btn {
  margin-left: auto; background: #fff; color: var(--lt-blue-dark);
  border: 0; cursor: pointer; padding: 7px 14px; border-radius: var(--r-md);
  font-weight: 700; font-size: 0.9rem; font-family: inherit; white-space: nowrap;
}
.impersonate-banner-btn:hover { background: var(--lt-bg); }

/* "Sync loopt" banner: live progress, counts up per completed sync. */
.sync-banner {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--lt-blue-bg); color: var(--lt-blue-dark);
  border: 1px solid var(--lt-blue); border-radius: var(--r-md);
  padding: 14px 18px; margin-bottom: 20px; font-size: 0.9375rem;
}
/* display:flex would otherwise beat the hidden attribute, leaving the banner
   on screen with its placeholder text until the poll script hides it. */
.sync-banner[hidden] { display: none; }
.sync-banner.done { background: var(--lt-success-bg); color: var(--lt-success); border-color: var(--lt-success); }
.sync-banner.error { background: var(--lt-error-bg); color: var(--lt-error); border-color: var(--lt-error); }
.sync-banner-row { display: flex; align-items: center; gap: 10px; }
.sync-banner-spinner {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: sync-spin 0.8s linear infinite;
}
.sync-banner.done .sync-banner-spinner,
.sync-banner.error .sync-banner-spinner { display: none; }
@keyframes sync-spin { to { transform: rotate(360deg); } }
.sync-banner-text { font-weight: 600; }
.sync-banner-count { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; opacity: 0.85; }
.sync-banner-progress {
  width: 100%; height: 6px;
  background: rgba(0, 0, 0, 0.10); border-radius: 999px; overflow: hidden;
}
.sync-banner.done .sync-banner-progress,
.sync-banner.error .sync-banner-progress { display: none; }
.sync-banner-bar { display: block; height: 100%; width: 0; background: currentColor; border-radius: 999px; transition: width 0.45s ease; }

/* Account-manager dropdown in the Omzet-en-prognose table. */
.am-select {
  font-family: inherit; font-size: 0.85rem; padding: 4px 8px; max-width: 170px;
  border: 1px solid var(--lt-border); border-radius: var(--r-md);
  background: var(--lt-bg); color: var(--lt-ink); cursor: pointer;
}
.am-select:focus { outline: none; border-color: var(--lt-blue); background: #fff; }

/* De rolkeuze in de medewerkerstabel: dezelfde maat als de accountmanager-
   keuzelijst ernaast, met het pijltje dat de nieuwere lijsten ook hebben. */
.rol-select {
  font-family: inherit; font-size: 0.85rem; cursor: pointer;
  /* Ruimte rechts voor het pijltje. 30px en niet 26: 'Medewerker: strategie
     en consultancy' kwam er anders tegenaan. */
  padding: 4px 30px 4px 8px; min-width: 130px;
  border: 1px solid var(--lt-border); border-radius: var(--r-md);
  background-color: var(--lt-bg); color: var(--lt-ink);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' 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 7px center;
}
.rol-select:focus { outline: none; border-color: var(--lt-blue); background-color: #fff; }
.rol-select:disabled {
  cursor: default; color: var(--lt-text-muted);
  background-color: transparent; border-color: transparent; background-image: none;
  padding-left: 0;
}

/* Quadrant move suggestion: yellow warning on a chip, grey once dismissed. */
.q-warn {
  flex: none; width: 17px; height: 17px; padding: 0; margin-right: 5px;
  border: none; border-radius: 50%; cursor: pointer;
  background: #F59E0B; color: #fff;
  font-size: 0.72rem; font-weight: 800; line-height: 17px; text-align: center;
}
.q-warn:hover { background: #D97706; }
.q-warn-muted { background: var(--lt-border); color: var(--lt-text-muted); }
.q-warn-muted:hover { background: #CBD5E1; }

/* Card title with an action on the right. */
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.card-head .btn { margin-left: 0; }

/* Settings: section menu on the left, content on the right. */
/* Geen align-items:start: de menukolom moet even hoog zijn als de inhoud,
   anders heeft de meeschuivende binnenlaag geen ruimte om te bewegen. */
.settings-layout { display: grid; grid-template-columns: 210px 1fr; gap: 24px; }
.settings-nav-inner {
  display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 16px;
  /* Past het menu niet, dan scrollt het in zichzelf in plaats van dat de
     bovenkant (titel en eerste groep) uit beeld schuift. */
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.settings-title { font-size: 1.5rem; margin: 0 0 10px; }
.settings-group-title {
  margin: 0; padding: 6px 4px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--lt-text-subtle);
}
.settings-group-items { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.settings-nav a {
  padding: 8px 14px; border-radius: var(--r-md); text-decoration: none;
  color: var(--lt-text-muted); font-size: 0.9rem; font-weight: 600;
  border-left: 3px solid transparent;
}
.settings-nav a:hover { background: var(--lt-bg-soft); color: var(--lt-ink); }
.settings-nav a.active { background: var(--lt-blue-bg); color: var(--lt-blue-dark); border-left-color: var(--lt-blue); }
.settings-content { min-width: 0; }
@media (max-width: 860px) {
  .settings-layout { grid-template-columns: 1fr; gap: 14px; }
  .settings-nav-inner { position: static; max-height: none; overflow: visible; }
}

/* Capaciteit: smalle kolom met de totalen, brede kolom met de lijsten. */
/* De cijferblokken staan naast elkaar bovenaan, de lijsten eronder over de
   volle breedte. Zo lees je eerst waar de maand op uitkomt en pas daarna waar
   het vandaan komt. */
.cap-layout { display: block; }
.cap-side {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; align-items: start; margin-bottom: 20px;
}
/* De kaarten staan nu naast elkaar; de marge die ze onder elkaar uit elkaar
   hield doet hier niets meer. */
.cap-side > .card { margin-top: 0 !important; }
@media (max-width: 700px) { .cap-side { grid-template-columns: 1fr; } }

/* Sorteerbare kolomkoppen. */
.cap-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.cap-sort:hover { color: var(--lt-blue-dark); }
.cap-sort::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; }
.cap-sort[data-dir="asc"]::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; }
.cap-sort[data-dir="desc"]::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.cap-num { text-align: right; }
.cap-table td, .cap-table th { vertical-align: middle; }
/* De klantnaam blijft leesbaar als gewone tekst. */
.cap-main td.group-key a { color: inherit; text-decoration: none; }
.cap-side .bg-margin dd { font-variant-numeric: tabular-nums; }
.cap-hours { width: 78px; }
.cap-note {
  margin-top: 3px; font-size: 0.75rem; color: var(--lt-warn-ink);
  background: var(--lt-warn-bg); border-radius: var(--r-md); padding: 3px 7px; display: inline-block;
}

/* Totaalberekening: one stacked bar showing how the month is divided, with a
   matching dot in front of every line so bar and figures read as one thing. */
.cap-bar {
  display: flex; height: 12px; margin: 0 0 14px;
  border-radius: 999px; overflow: hidden; background: var(--lt-bg-soft);
}
.cap-bar-seg { display: block; height: 100%; }
.cap-dot {
  display: inline-block; width: 9px; height: 9px; margin-right: 7px;
  border-radius: 50%; vertical-align: baseline;
}
.cap-abo  { background: var(--lt-blue); }
.cap-prj  { background: var(--lt-orange); }
.cap-int  { background: var(--lt-warn); }
.cap-buiten { background: var(--lt-error); }
.cap-over { background: var(--lt-border); }
.cap-done { font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; font-size: 0.85rem; }
.cap-buiten-uursoort { font-size: 0.78rem; color: var(--lt-text-muted); margin-top: 1px; }
.cap-side .bg-margin dt { display: flex; align-items: center; }

/* Overzicht: per medewerker een brede balk waarin de uren per soort passen. */
.cap-ov-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 0.8rem; color: var(--lt-text-muted); margin: 0 0 14px 2px; }
.cap-ov-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cap-ov-team { margin: 22px 0 8px; font-size: 0.95rem; }
.cap-ov-team:first-of-type { margin-top: 0; }
.cap-ov-row {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr 92px;
  gap: 14px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--lt-border);
}
.cap-ov-row:first-child { border-top: 0; }
.cap-ov-naam { font-weight: 600; color: inherit; text-decoration: none; }
.cap-ov-naam:hover { text-decoration: underline; }
.cap-ov-bars { display: grid; gap: 6px; align-items: center; }
.cap-ov-bars:has(.cap-ov-mark) { grid-template-columns: 68px 1fr; }
.cap-ov-mark { font-size: 0.72rem; color: var(--lt-text-muted); }
.cap-ov-bar {
  position: relative;
  display: flex; height: 30px; border-radius: var(--r-md); overflow: hidden;
  background: var(--lt-bg-soft);
}
.cap-ov-bar.is-real { height: 22px; }
/* De 100%-lijn (de werkbare uren) op een vaste positie in de balk. */
.cap-ov-100 {
  position: absolute; top: 0; bottom: 0; left: 75%; width: 0;
  border-left: 2px dashed var(--lt-ink); opacity: 0.55; pointer-events: none;
}
.cap-ov-seg {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 0.78rem; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap;
}
.cap-ov-seg.cap-over { color: var(--lt-text-muted); }

/* Gedeeld abonnement/project: eigen uren én het totaal over alle medewerkers. */
/* Twee balkjes onder elkaar (gedeeld project/abonnement): het label staat boven
   het balkje, zodat de balken en percentages precies uitlijnen met de rijen die
   maar één balkje tonen. */
.cap-dual { display: flex; flex-direction: column; gap: 8px; }
.cap-dual-row { display: block; }
.cap-dual-lbl { display: block; font-size: 0.66rem; color: var(--lt-text-muted);
  text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 1px 60px; }
.cap-dual-bar { display: block; }
.cap-ov-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cap-ov-pct small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--lt-text-muted); }

/* 'Interne uren en tarief': maandgrafiek met beschikbare uren + kosten. */
.iut-chart { display: flex; gap: 10px; align-items: flex-end; min-width: 640px; padding: 6px 4px 2px; }
.iut-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 42px; }
.iut-bars { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.iut-bar { width: 18px; border-radius: 3px 3px 0 0; overflow: hidden; }
.iut-bar-hours { display: flex; flex-direction: column-reverse; background: var(--lt-bg-soft); }
.iut-bar-hours span { display: block; width: 100%; }
.iut-bar-cost { background: #94A3B8; }
.iut-avail { font-size: 0.7rem; font-weight: 600; color: var(--lt-ink); font-variant-numeric: tabular-nums; }
.iut-cost { font-size: 0.68rem; color: var(--lt-text-muted); font-variant-numeric: tabular-nums; }
.iut-month { font-size: 0.72rem; margin-top: 3px; text-transform: capitalize; white-space: nowrap; }
/* Het jaartal achter de maand: de reeks loopt over de jaargrens, dus moet er
   bij staan wélke januari het is. Kleiner en gedempt, zodat de maand leest. */
.iut-jaar { color: var(--lt-text-muted); font-size: 0.92em; }
.iut-rate { font-size: 0.74rem; font-weight: 700; color: var(--lt-blue-dark); font-variant-numeric: tabular-nums; }
.cap-ov-label { font-size: 0.72rem; color: var(--lt-text-muted); align-self: center; }
@media (max-width: 700px) { .cap-ov-row { grid-template-columns: 1fr; } }

/* Historie van de omzetprognose: stacked bars with a hovering breakdown. */
.fh-legend { display: flex; gap: 20px; font-size: 0.8rem; color: var(--lt-text-muted); margin: 0 0 10px 4px; }
.fh-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.fh-chart-wrap { position: relative; }
.fh-seg { transition: opacity 0.12s ease; }
.fh-chart-wrap:hover .fh-seg { opacity: 0.85; }
.fh-tip {
  position: absolute; bottom: 64px; transform: translateX(-50%);
  min-width: 270px; padding: 10px 12px; z-index: 5; pointer-events: none;
  background: var(--lt-surface); border: 1px solid var(--lt-border);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(16, 24, 32, 0.14);
  font-size: 0.8rem;
}
.fh-tip[hidden] { display: none; }
.fh-tip-head { font-weight: 700; margin-bottom: 6px; color: var(--lt-ink); }
.fh-tip-row { display: flex; justify-content: space-between; gap: 18px; padding: 2px 0; }
.fh-tip-row strong { font-variant-numeric: tabular-nums; }
.fh-tip-sub { margin: 2px 0 4px 10px; color: var(--lt-text-muted); font-size: 0.75rem; }
.fh-tip-row.is-total { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--lt-border); }
.kpi-link { color: inherit; text-decoration: none; }
.kpi-link:hover { text-decoration: underline; }

/* Leads: de twee grafieken naast elkaar. De leadbron krijgt precies de breedte
   die hij nodig heeft, de maandgrafiek de rest — zo staat 'Leads per maand'
   meteen in beeld. */
/* Beide kaarten even hoog: de balkgrafiek rekt mee met de Leadbron-kaart,
   die zo hoog is als zijn legenda lang is. */
.lead-charts { display: flex; gap: 20px; align-items: stretch; }
.lead-charts-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.lead-charts-main > .card { flex: 1; display: flex; flex-direction: column; }
.lead-charts-main #barWrap { flex: 1; min-height: 150px; }
.lead-charts-main .lead-bar-controls { margin-bottom: 14px; }
/* Ook de rechterkolom rekt mee: in de stand 'Leadbron' heeft de legenda van de
   linkergrafiek meer regels nodig, en dan hoort dit blok net zo hard mee te
   groeien als het andersom gebeurt. */
.lead-charts-side { flex: 0 0 auto; display: flex; flex-direction: column; }
.lead-charts-side > .card { flex: 1; }
.lead-charts h2 { margin-top: 0; }
@media (max-width: 1100px) { .lead-charts { flex-direction: column; } .lead-charts-side { width: 100%; } }

/* Abonnementsuren: a row opens into a twelve-month chart. */
.abo-row { cursor: pointer; }
.abo-row:hover { background: var(--lt-blue-bg); }
.abo-row .caret { display: inline-block; color: var(--lt-text-muted); transition: transform 0.15s ease; }
.abo-row.is-open .caret { transform: rotate(90deg); }
.abo-detail-row td { background: var(--lt-bg-soft); padding: 14px 16px !important; }
.abo-detail-head { font-weight: 700; margin-bottom: 4px; }
.abo-chart { width: 100%; height: auto; max-width: 900px; }
.abo-chart-legend { display: flex; gap: 18px; font-size: 0.78rem; color: var(--lt-text-muted); margin: 0 0 6px; }
.abo-chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }

/* Abonnementsuren: filters on the left, the running total beside them. */
.abo-top { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.abo-top > form { flex: 1 1 420px; }
.abo-sum { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; padding: 14px 20px; }
.abo-sum svg { flex-shrink: 0; }
.abo-sum .bg-margin { min-width: 190px; }
.abo-sum .bg-margin dd { font-variant-numeric: tabular-nums; }

/* The bar is the agreed hours; time booked over them sticks out in red. */
.abo-bar-wrap { display: flex; align-items: center; gap: 8px; }
.abo-bar-track {
  width: 150px; height: 14px; flex-shrink: 0;
  border-radius: 999px; background: var(--lt-blue-bg); overflow: hidden;
}
.abo-bar-fill { height: 100%; background: #67C1DB; border-radius: 999px; }
.abo-bar-over {
  height: 14px; flex-shrink: 0; margin-left: -4px;
  border-radius: 0 999px 999px 0; background: var(--lt-error);
}
.abo-bar-pct { font-size: 0.8rem; font-weight: 700; min-width: 42px; text-align: right; }

/* Uren dashboards: the status block puts the ring beside the figures, and the
   three breakdowns sit side by side until the screen gets too narrow. */
.uren-status { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
/* De uitsplitsing 'Nog niet genoeg geboekt' staat in dezelfde kaart als de ring,
   met een streep ertussen zodat het twee dingen blijven. */
.uren-achter-kop {
  margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--lt-border);
  font-size: 0.95rem;
}
.uren-status svg { flex-shrink: 0; }
.uren-status .bg-margin dd { font-variant-numeric: tabular-nums; }
/* auto-fit met een ondergrens in plaats van een vast aantal kolommen: drie naast
   elkaar alleen als er echt ruimte voor is. Met repeat(3, 1fr) werd elke kolom
   443px op een scherm van 1440 en dan valt de %-kolom buiten de kaart. */
.uren-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 16px; }
/* De twee onderste tabellen hebben een kolom extra (klantnaam én naam), dus een
   hogere ondergrens: onder ongeveer 1400px staan ze onder elkaar in plaats van
   afgekapt naast elkaar. Even breed blijven ze in beide gevallen. */
.uren-cols.uren-cols-2 { grid-template-columns: repeat(auto-fit, minmax(640px, 1fr)); }

/* Het statusblok en de declarabiliteit ernaast, elk de helft. */
.uren-boven {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-bottom: 16px; align-items: start;
}
@media (max-width: 1100px) { .uren-boven { grid-template-columns: 1fr; } }

/* Declarabiliteit: de cirkel met zijn legenda, en het lijndiagram eronder. */
.uren-decl-pie { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.uren-decl-pie svg { flex-shrink: 0; }
.uren-decl-legend { margin: 0; flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.uren-decl-legend > div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; }
.uren-decl-legend dt { display: flex; align-items: center; gap: 6px; color: var(--lt-text-muted); }
.uren-decl-legend dt i { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.uren-decl-legend dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uren-decl-total { border-top: 1px solid var(--lt-border); padding-top: 4px; margin-top: 2px; }
.uren-decl-maanden { margin-top: 16px; }
.uren-decl-chart { width: 100%; height: auto; }
.uren-table { font-size: 0.85rem; }
.uren-table td, .uren-table th { padding: 5px 8px; }
/* Alleen de getalkolommen blijven op één regel. Eerder gold dat voor elke
   kolom behalve de eerste, en dat ging mis zodra een tabel twéé tekstkolommen
   heeft (klantnaam én naam van het project of abonnement): die tweede werd dan
   ook nowrap en duwde de tabel breder dan zijn kaart. */
/* Krap aan de zijkanten: met vier getalkolommen scheelt elke pixel padding
   viermaal de breedte van de tabel. */
.uren-table td.num, .uren-table th.num { padding-left: 6px; padding-right: 6px; }
.uren-table td.num { text-align: right; white-space: nowrap; }
/* De kop mag wél afbreken: 'Declarabel' en 'Niet decl.' zetten anders de
   minimumbreedte van de kolom, en dat is precies de ruimte die de tabel te veel
   nodig had. De getallen eronder blijven op één regel. */
.uren-table th.num { text-align: right; white-space: normal; }
.uren-table td { font-variant-numeric: tabular-nums; }
/* De twee brede tabellen — per project en per abonnement — hebben twee
   tekstkolommen naast vier getalkolommen, en dat past niet vanzelf. Met een
   vaste kolomindeling passen ze altijd in hun kaart: een lange naam breekt over
   twee regels in plaats van de tabel breder te maken.
   overflow-wrap: anywhere is voor het geval één woord al te lang is — dat breekt
   anders nergens en duwt de kolom alsnog open. */
.uren-table-2col { table-layout: fixed; width: 100%; }
.uren-table-2col th:nth-child(1), .uren-table-2col td:nth-child(1) { width: 28%; }
.uren-table-2col th:nth-child(2), .uren-table-2col td:nth-child(2) { width: 31%; }
.uren-table-2col th:nth-child(3), .uren-table-2col td:nth-child(3),
.uren-table-2col th:nth-child(4), .uren-table-2col td:nth-child(4),
.uren-table-2col th:nth-child(5), .uren-table-2col td:nth-child(5) { width: 11%; }
.uren-table-2col th:nth-child(6), .uren-table-2col td:nth-child(6) { width: 8%; }
.uren-table-2col td:not(.num) { overflow-wrap: anywhere; }
/* Vangnet: past een tabel toch niet, dan schuift hij in zijn eigen kaart in
   plaats van eruit te lopen. */
.uren-cols .card { overflow-x: auto; }

/* A strip card whose hours are used up but that is still open. */
.strip-full {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--lt-error-bg); color: var(--lt-error);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}

/* The cases behind one notification. */
/* The items behind a notification: a compact table rather than a run of
   stacked lines, so seventeen projects stay scannable. */
.notif-table { margin: 4px 0; font-size: 0.85rem; }
.notif-table td { padding: 5px 12px 5px 0; border-bottom: 1px solid var(--lt-border); vertical-align: top; }
.notif-table tr:last-child td { border-bottom: none; }
.notif-table .notif-key { font-weight: 600; white-space: nowrap; }
.notif-table .notif-key a { color: var(--lt-orange); text-decoration: none; }
.notif-table .notif-key a:hover { color: var(--lt-orange-dark); text-decoration: underline; }
.notif-table .notif-key.dup { color: transparent; }
.notif-table .notif-detail { font-size: 0.8rem; white-space: nowrap; text-align: right; padding-right: 0; }

/* Notification count pill (Instellingen → Notificaties). */
.notif-count {
  display: inline-block; min-width: 30px; padding: 2px 9px; text-align: center;
  border-radius: 999px; background: var(--lt-warn-bg); color: var(--lt-warn-ink);
  font-weight: 700; font-size: 0.8rem;
}
.notif-count.is-zero { background: var(--lt-bg-soft); color: var(--lt-text-subtle); }

/* Status as a coloured dot in front of a name (Abonnementen / Projecten). */
.sub-dot {
  display: inline-block; width: 9px; height: 9px; margin-right: 7px;
  border-radius: 50%; flex: none; vertical-align: baseline;
}
.sub-dot-actief { background: var(--lt-success); }
.sub-dot-toekomstig { background: #F59E0B; }
.status-legend { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 0.85rem; color: var(--lt-text-muted); }

/* Editable hours-per-month cell; a manual value is marked as such. */
.sub-hours {
  width: 62px; text-align: right; font-family: inherit; font-size: 0.875rem;
  padding: 4px 7px; border: 1px solid var(--lt-border); border-radius: var(--r-md);
  background: var(--lt-bg); color: var(--lt-ink);
}
.sub-hours:focus { outline: none; border-color: var(--lt-blue); background: #fff; }
.sub-hours.is-override { border-color: var(--lt-blue); font-weight: 700; color: var(--lt-blue-dark); }

/* Rows of the same customer read as one block: repeat the name only once. */
.grouped tbody tr.group-start td { border-top: 2px solid var(--lt-border); }
.grouped td.dup { color: transparent; }
/* De klantnaam is een link naar de klantpagina, maar leest als gewone tekst:
   een rij blauwe onderstreepte namen maakt zo'n tabel onrustig. */
.grouped td.group-key a { color: inherit; text-decoration: none; }
/* Amounts must never break between the euro sign and the number. */
.grouped td { white-space: nowrap; }
.grouped td.group-key, .grouped td:nth-child(4) { white-space: normal; }

/* Count badge inside a tab. */
.tab-count {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.08); font-size: 0.75rem; font-weight: 700;
}
.tabs .active .tab-count { background: rgba(255, 255, 255, 0.25); }

/* Account-manager multi-select filter (Dieren quadrant). */
.am-filter { position: relative; display: inline-block; }
.am-filter > summary {
  list-style: none; cursor: pointer; user-select: none; white-space: nowrap;
  padding: 9px 34px 9px 14px; border: 1px solid var(--lt-border);
  border-radius: var(--r-md); background: var(--lt-surface); color: var(--lt-ink);
  font-size: 0.9rem; position: relative; min-width: 160px;
}
.am-filter > summary::-webkit-details-marker { display: none; }
.am-filter > summary::after {
  content: ''; position: absolute; right: 12px; top: 45%; width: 7px; height: 7px;
  border-right: 2px solid var(--lt-text-muted); border-bottom: 2px solid var(--lt-text-muted);
  transform: translateY(-50%) rotate(45deg);
}
.am-filter[open] > summary { border-color: var(--lt-blue); }
.am-filter-panel {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  min-width: 280px; max-width: 380px;
  max-height: 360px; overflow-y: auto; background: var(--lt-surface);
  border: 1px solid var(--lt-border); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.am-filter-search {
  width: 100%; font-family: inherit; font-size: 0.875rem; margin-bottom: 6px;
  padding: 7px 10px; border: 1px solid var(--lt-border); border-radius: var(--r-md);
  background: var(--lt-bg); color: var(--lt-ink);
}
.am-filter-search:focus { outline: none; border-color: var(--lt-blue); background: #fff; }
.am-filter-opt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 0.9rem; cursor: pointer; }
.am-filter-opt input { flex: none; margin: 0; accent-color: var(--lt-blue); }
/* display:flex would otherwise beat the hidden attribute while type-ahead filters. */
.am-filter-opt[hidden] { display: none; }
.am-filter-opt:hover { background: var(--lt-bg); }

/* Handmatige urenverdeling in de medewerker-dropdown (Abonnementen/Projecten):
   per medewerker een urenveld, alleen zichtbaar bij twee of meer gekozen. */
.sub-emp-opt .sub-emp-name { flex: 1; }
.sub-emp-opt .sub-emp-hours {
  width: 62px; text-align: right; display: none;
  padding: 2px 6px; border: 1px solid var(--lt-border); border-radius: 6px;
  font-family: inherit; font-size: 0.85rem; background: var(--lt-surface); color: var(--lt-ink);
}
.sub-emp.multi .sub-emp-opt input[type="checkbox"]:checked ~ .sub-emp-hours { display: inline-block; }
.am-filter-actions { display: flex; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--lt-border); }

code {
  background: var(--lt-blue-bg);
  color: var(--lt-blue-dark);
  padding: 2px 6px;
  border-radius: 0;
  font-size: 0.875em;
}

.muted { color: var(--lt-text-muted); font-size: 0.875rem; }

/* Form fields */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 6px; }
.field input, .field select {
  width: 100%; font-family: inherit; font-size: 0.9375rem;
  padding: 12px 14px; border: 1px solid var(--lt-border);
  border-radius: var(--r-md); background: var(--lt-bg); color: var(--lt-ink);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--lt-blue); background: #fff; }
/* Custom dropdown chevron so the select matches the text inputs. */
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' 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 14px center;
}

/* Tables */
.table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.table th, .table td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--lt-border); font-size: 0.9375rem;
}
.table th {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--lt-text-subtle); font-weight: 600;
}
.table tr:last-child td { border-bottom: none; }
/* Totals row (Klanten): bold summary with a clear divider above. */
.table tfoot tr.klant-totals td {
  border-top: 2px solid var(--lt-border); border-bottom: none;
  font-weight: 700; color: var(--lt-ink); background: var(--lt-bg-soft);
  position: sticky; bottom: 0;
}
/* Column group headers: certainty from Exact (red) vs potential from
   Salesforce (blue). Tinted backgrounds bracket each group so the boundary
   between them is unmistakable. */
.table thead tr.group-head th {
  text-align: center; padding: 8px 12px 6px;
  border-bottom: none; white-space: nowrap;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md);
}
.table thead tr.group-head th.group-exact {
  color: #e1141e; background: rgba(225, 20, 30, 0.08);
  border-bottom: 2px solid #e1141e;
}
.table thead tr.group-head th.group-sf {
  color: #0b9dda; background: rgba(11, 157, 218, 0.08);
  border-bottom: 2px solid #0b9dda;
}
/* Highlight the final "total" column (Totale verwachting / Gewogen
   salespotentie) with the brand accent so the bottom line stands out. */
#customers tbody td:last-child,
#prospects tbody td:last-child {
  background: rgba(252, 76, 2, 0.09);
  border-left: 1px solid rgba(252, 76, 2, 0.25);
  font-weight: 700; color: var(--lt-orange-dark);
}
#customers thead tr:not(.group-head) th:last-child,
#prospects thead tr:not(.group-head) th:last-child {
  background: rgba(252, 76, 2, 0.09);
  border-left: 1px solid rgba(252, 76, 2, 0.25);
  color: var(--lt-orange-dark);
}
.table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table th.sortable:hover { color: var(--lt-ink); }
.table th .sort-ind { font-size: 0.85em; }

/* Clickable rows (whole row navigates), in house style */
.row-link { cursor: pointer; transition: background var(--t-base, 0.15s) ease; }
.row-link:hover { background: var(--lt-blue-bg); }
.row-link td a { color: var(--lt-ink); text-decoration: none; font-weight: 600; }
.row-link:hover td a { color: var(--lt-blue-dark); }

/* Button variants */
.btn-sm { padding: 7px 14px; font-size: 0.8125rem; border-radius: 0; }
.btn-danger { background: var(--lt-error); }
.btn-danger:hover { background: #b91c1c; }

/* Section divider */
hr.sep { border: none; border-top: 1px solid var(--lt-border); margin: 28px 0; }

/* Pipeline (kanban) */
.pipeline { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
/* Customer link inside breakdown tables: orange, no underline — kept orange
   even inside a clickable row (which otherwise recolors its links). */
.cust-link { color: var(--lt-orange); text-decoration: none; }
.cust-link:hover { color: var(--lt-orange-dark); text-decoration: none; }
.row-link td a.cust-link { color: var(--lt-orange); }
.row-link:hover td a.cust-link { color: var(--lt-orange-dark); }

/* Non-interactive chart legend item (single-series charts, e.g. prospects). */
.chart-legend-item.static { cursor: default; }

/* Stage columns as a full-width grid instead of the scrolling flex row. */
.pipeline-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow-x: visible; }
.pipeline-grid.pipeline-grid-4 { grid-template-columns: repeat(4, 1fr); }
.pipeline-grid.pipeline-grid-5 { grid-template-columns: repeat(5, minmax(160px, 1fr)); overflow-x: auto; }
.pipeline-grid .pipe-col { flex: initial; min-width: 0; }
.pipe-col {
  flex: 0 0 250px; min-width: 250px;
  background: var(--lt-bg-soft); border: 1px solid var(--lt-border);
  border-radius: var(--r-lg); padding: 12px;
}
.pipe-col h3 { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--lt-ink); }
.pipe-col .col-sub { font-size: 0.8125rem; color: var(--lt-text-muted); margin: 2px 0 10px; }
.pipe-card {
  background: #fff; border: 1px solid var(--lt-border); border-radius: var(--r-md);
  padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,32,.05));
}
.pipe-card a { color: var(--lt-ink); font-weight: 600; text-decoration: none; font-size: 0.875rem; }
.pipe-card a:hover { color: var(--lt-blue-dark); }
.pipe-card .opp { font-size: 0.8125rem; color: var(--lt-text-muted); margin: 2px 0; }
.pipe-card .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 0.8125rem; }
.pipe-card .meta .amount { font-weight: 600; color: var(--lt-ink); }

/* Chart hover tooltip */
.chart-tip {
  position: absolute; pointer-events: none; opacity: 0;
  transform: translate(-50%, -135%);
  background: var(--lt-ink); color: #fff;
  font-size: 0.75rem; font-weight: 600; font-family: var(--font-sans);
  padding: 5px 9px; border-radius: 0; white-space: nowrap; z-index: 10;
  transition: opacity 0.1s ease;
}
.chart-tip .tip-sub { font-weight: 400; opacity: 0.85; font-size: 0.72rem; margin-top: 2px; }
.chart-tip .tip-sub:first-of-type { margin-top: 5px; }
.bar { transition: opacity 0.1s ease; cursor: default; }
.bar:hover { opacity: 0.8; }

/* Stat tiles (revenue figures) */
.stats { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0 28px; }
.stat {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
  min-width: 220px;
}
.stat .label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--lt-text-subtle); font-weight: 600; margin-bottom: 6px;
}
.stat .value { font-size: 1.75rem; font-weight: 700; color: var(--lt-ink); line-height: 1.2; }
.stat .sub { font-size: 0.8125rem; color: var(--lt-text-muted); margin-top: 6px; }
.stat.accent { border-color: var(--lt-blue); }
.stat.accent .value { color: var(--lt-blue-dark); }

/* KPI tiles (dashboard) — four across, coloured accent + icon */
.kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 16px 0 28px;
}
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-top: 3px solid var(--kpi-accent, var(--lt-blue));
  box-shadow: var(--shadow-card);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.kpi-head { display: flex; align-items: center; gap: 10px; }
.kpi-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--kpi-bg, var(--lt-blue-bg)); color: var(--kpi-accent, var(--lt-blue));
}
.kpi-icon svg { width: 18px; height: 18px; }
.kpi-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--lt-text-muted); font-weight: 600; line-height: 1.3;
}
.kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--lt-ink); line-height: 1.1; letter-spacing: -0.01em; }
.kpi-gauge { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lt-border); }
.kpi-gauge svg { flex-shrink: 0; }
.kpi-gauge-label { display: flex; flex-direction: column; font-size: 0.85rem; line-height: 1.4; }
.kpi-gauge-label .muted { font-size: 0.78rem; }
.kpi-sub { margin: -4px 0 0; padding-top: 10px; border-top: 1px solid var(--lt-border); display: flex; flex-direction: column; gap: 4px; }
.kpi-sub-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.kpi-sub-row dt { font-size: 0.72rem; color: var(--lt-text-muted); line-height: 1.3; }
.kpi-sub-row dd { margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--lt-ink); white-space: nowrap; }

/* Interactive chart legend (toggle categories) */
.chart-legend { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
.chart-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--lt-border); cursor: pointer;
  font: inherit; font-size: 0.8125rem; color: var(--lt-ink); padding: 5px 10px;
  transition: opacity 0.15s ease;
}
.chart-legend-item .sw { width: 12px; height: 12px; display: inline-block; flex-shrink: 0; }
.chart-legend-item.off { opacity: 0.45; }
.chart-legend-item.off .sw { opacity: 0.35; }
/* Divider between the toggleable dienst-labels and the fixed value/count keys. */
.chart-legend-sep { width: 1px; align-self: stretch; min-height: 16px; background: var(--lt-border); margin: 0 4px; }

/* ── Leads page ──────────────────────────────────────────────────────── */
.lead-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 28px 0 12px;
}
.lead-head-row h2 { margin: 0; }
.segmented { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.segmented-label {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--lt-text-muted);
}
.segmented .seg-btn, .lead-table-controls .seg-btn {
  border: 1px solid var(--lt-border); background: var(--lt-surface);
  color: var(--lt-text-muted); font: inherit; font-size: 0.8125rem;
  padding: 6px 12px; cursor: pointer; border-radius: var(--r-md);
}
.segmented .seg-btn.is-active {
  background: var(--lt-blue-bg); color: var(--lt-blue-dark);
  border-color: var(--lt-blue); font-weight: 600;
}

/* Pie chart + legend */
/* Synchronisatie: twee tabellen onder elkaar met dezelfde kolomindeling. */
.sync-table { table-layout: fixed; }

/* Tweede regel in een kolomkop: de periode waar de kolom over gaat. */
.table th .th-sub { display: block; font-weight: 400; font-size: 0.72rem; color: var(--lt-text-muted); text-transform: none; letter-spacing: 0; }

.pie-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pie-check { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; color: var(--lt-ink); cursor: pointer; }
.pie-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pie-legend { display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 1; }
.pie-legend-item {
  display: flex; align-items: center; gap: 8px; font-size: 0.85rem;
  background: none; border: none; padding: 2px 0; width: 100%; text-align: left;
  font-family: inherit; cursor: pointer;
}
.pie-legend-item.off { opacity: 0.4; }
.pie-legend-item.off .sw { opacity: 0.35; }
.pie-legend-item .sw { width: 12px; height: 12px; flex-shrink: 0; border-radius: 2px; }
.pie-legend-name { flex: 1; color: var(--lt-ink); }
.pie-legend-val { color: var(--lt-text-muted); font-variant-numeric: tabular-nums; }

/* Wraps the "Tonen per" + "Qualified ook tonen" segmented controls. */
.lead-bar-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ── Begroting ───────────────────────────────────────────────────────── */
.bg-table th, .bg-table td { white-space: nowrap; }
.bg-table .bg-num { text-align: right; font-variant-numeric: tabular-nums; }
.bg-table .bg-qh { cursor: pointer; user-select: none; }
.bg-table .bg-qh:hover { color: var(--lt-ink); }
.bg-caret { font-size: 0.7rem; color: var(--lt-blue); }
/* Month columns are hidden until their quarter is expanded. */
.bg-table .m-col { display: none; }
.bg-table.q1-open .q-col.q1, .bg-table.q2-open .q-col.q2,
.bg-table.q3-open .q-col.q3, .bg-table.q4-open .q-col.q4 { display: none; }
.bg-table.q1-open .m-col.q1, .bg-table.q2-open .m-col.q2,
.bg-table.q3-open .m-col.q3, .bg-table.q4-open .m-col.q4 { display: table-cell; }
.bg-mh { background: var(--lt-bg); font-weight: 600; cursor: pointer; user-select: none; }
.bg-mh:hover { color: var(--lt-ink); }
.bg-cat { font-weight: 600; color: var(--lt-ink); }
.bg-begroot { color: var(--lt-blue-dark); text-decoration: none; }
.bg-begroot:hover { text-decoration: underline; }
/* Begroting: de categorie staat als kopregel boven zijn rekeningen in plaats
   van in een eigen kolom — dat scheelt breedte op een smal scherm. */
.bg-cathead th {
  background: var(--lt-bg-soft); text-align: left; font-size: 0.78rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--lt-text-muted);
  padding: 8px 10px !important;
}
.bg-begroot-cell { text-align: right; white-space: nowrap; }
.bg-begroot-cell .icon-btn { margin-left: 4px; vertical-align: middle; }
/* De knoppen bij een inkoopregel: rechts in de cel, naast elkaar, en niet
   afbrekend als de kolom smal wordt. */
.wg-regel-acties { text-align: right; white-space: nowrap; }
.wg-regel-acties .icon-btn + .icon-btn { margin-left: 6px; }

.bg-pct { font-size: 0.72rem; color: var(--lt-text-muted); }
.bg-neg { color: var(--lt-error); }
.bg-pos { color: var(--lt-success); }
/* Totalen per categorie: only the category name may wrap — a broken "- € 777
   - 98%" reads as two different figures. */
.bg-cat-table td, .bg-cat-table th { white-space: nowrap; }
.bg-cat-table td:first-child, .bg-cat-table th:first-child { white-space: normal; }
.bg-cat-table th { font-size: 0.7rem; }
/* In a coloured difference cell the percentage carries the same colour as the
   amount — grey next to red or green reads as two separate figures. */
.bg-neg .bg-pct, .bg-pos .bg-pct { color: inherit; }
/* Doorgetrokken kostenverwachting: nog niet geboekt, wel begroot. */
.bg-verwacht { font-style: italic; color: var(--lt-text-subtle); }
.bg-subtotal td { font-weight: 700; border-top: 2px solid var(--lt-border); background: var(--lt-bg); }
.bg-spacer td { height: 10px; border: none; background: transparent; }
.bg-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; }
.bg-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.9rem; }
.bg-filters label { font-weight: 600; }
.bg-filters select {
  font-family: inherit; font-size: 0.9rem; padding: 7px 34px 7px 12px;
  border: 1px solid var(--lt-border); border-radius: var(--r-md);
  background: var(--lt-bg); color: var(--lt-ink); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' 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 12px center;
}
.bg-filters select:focus { outline: none; border-color: var(--lt-blue); background-color: #fff; }
.bg-rev-form { margin-bottom: 14px; }
.bg-rev-form label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; }
.bg-rev-form input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 0.9375rem;
  padding: 12px 14px; border: 1px solid var(--lt-border);
  border-radius: var(--r-md); background: var(--lt-bg); color: var(--lt-ink);
}
.bg-rev-form input:focus { outline: none; border-color: var(--lt-blue); background: #fff; }
.bg-margin { margin: 0; }
.bg-margin > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--lt-border); }
.bg-margin dt, .bg-margin dd { margin: 0; }
.bg-margin .bg-margin-total { font-weight: 700; border-bottom: none; }
.bg-months-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bg-months-grid label { display: flex; flex-direction: column; font-size: 0.8rem; gap: 3px; }

/* ── Grootboek categorieën (Instellingen) ────────────────────────────── */
.gl-cats-layout { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .gl-cats-layout { grid-template-columns: 1fr; } }
.gl-cat-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gl-cat-list li { display: flex; align-items: center; gap: 8px; }
.gl-cat-order { display: flex; flex-direction: column; gap: 2px; }
.gl-move { border: 1px solid var(--lt-border); background: var(--lt-surface); color: var(--lt-blue-dark); cursor: pointer; width: 22px; height: 16px; line-height: 1; border-radius: 4px; font-size: 0.7rem; padding: 0; }
.gl-move:disabled { color: var(--lt-border); cursor: default; }
.gl-cat-rename { display: flex; gap: 6px; flex: 1; margin: 0; }
.gl-cat-add { display: flex; gap: 8px; margin-top: 4px; }
/* These inputs sit outside a .field wrapper, so give them the same look. */
.gl-cat-rename input, .gl-cat-add input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 0.9rem;
  padding: 8px 12px; border: 1px solid var(--lt-border);
  border-radius: var(--r-md); background: var(--lt-bg); color: var(--lt-ink);
}
.gl-cat-rename input:focus, .gl-cat-add input:focus {
  outline: none; border-color: var(--lt-blue); background: #fff;
}
.gl-assign-table code { font-size: 0.82rem; }
.gl-assign-table td, .gl-assign-table th { padding: 7px 10px; }
.gl-assign-table select {
  width: 100%; font-family: inherit; font-size: 0.9rem; cursor: pointer;
  padding: 7px 32px 7px 10px; border: 1px solid var(--lt-border);
  border-radius: var(--r-md); background-color: var(--lt-bg); color: var(--lt-ink);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' 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;
}
.gl-assign-table select:focus { outline: none; border-color: var(--lt-blue); background-color: #fff; }

/* ── Klanten samenvoegen (Instellingen) ──────────────────────────────── */
.merge-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.merge-members { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.merge-members li { font-size: 0.9rem; color: var(--lt-ink); }
.merge-members code { font-size: 0.78rem; color: var(--lt-text-muted); }
.merge-badge {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: var(--lt-blue-bg); color: var(--lt-blue-dark); font-size: 0.68rem; font-weight: 700;
}
.merge-picker {
  margin-top: 8px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--lt-border); border-radius: var(--r-md);
}
.merge-pick-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--lt-border);
}
.merge-pick-row:last-child { border-bottom: none; }
.merge-pick-row:hover { background: var(--lt-bg); }
.merge-pick-main { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; flex: 1; min-width: 0; }
.merge-pick-main > span { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Winstgevendheid: het vinkje staat links van de klantnaam, niet tegen de
   rechterrand. */
#wg-customers .merge-pick-row {
  /* De rij is een <label> in een .field, en die krijgt daar display:block. */
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
}
/* Zoeken in de klantenlijst zet row.hidden, en dat werkt alleen als het de
   display uit de regels hierboven verslaat — de UA-regel voor [hidden] is
   minder specifiek dan `.merge-pick-row`, laat staan `#wg-customers .merge-pick-row`.
   Zonder deze twee regels liep het filter wel, maar bleef alles staan.
   Zelfde fix als bij .am-filter-opt[hidden]. */
.merge-pick-row[hidden],
#wg-customers .merge-pick-row[hidden] { display: none; }

/* De teller naast 'Overkoepelende inkoopregel': hoeveel regels er staan, en
   tegelijk de ingang naar het overzicht van alle regels. */
.wg-add-wrap { display: inline-flex; align-items: center; gap: 8px; }
.wg-rule-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  font-family: inherit; font-size: 0.78rem; font-weight: 700; line-height: 1;
  color: #fff; background: var(--lt-blue); border: none; border-radius: 999px;
  cursor: pointer;
}
.wg-rule-count:hover { background: var(--lt-blue-dark); }

#wg-cust-search { width: 100%; margin-top: 8px; }

.merge-primary-pick { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 0.8rem; color: var(--lt-text-muted); white-space: nowrap; cursor: pointer; }
/* The picker sits inside a .field, so undo the full-width form-input styling. */
.merge-picker input[type="checkbox"], .merge-picker input[type="radio"] {
  width: auto; margin: 0; padding: 0; flex-shrink: 0;
  accent-color: var(--lt-blue); cursor: pointer;
}

/* Startscherm: blokken naast elkaar zolang er ruimte is, met onderaan steeds
   een knop naar de volledige pagina. */
.start-kop { margin-bottom: 20px; }
.start-kop h1 { margin: 0; }
.start-rij {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px; align-items: start; margin-bottom: 20px;
}

/* Medewerkersstartscherm: twee kolommen. Links 'Status van ingediende uren' en
   'Capaciteit deze maand' onder elkaar, rechts 'Mijn klanten'. */
.start-mw {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px; align-items: start; margin-bottom: 20px;
}
.start-mw-col { display: flex; flex-direction: column; gap: 20px; }
.start-mw .card { display: flex; flex-direction: column; }
.start-mw h2 { margin: 0 0 10px; font-size: 1.05rem; }
.start-mw .card > .start-btn { margin-top: 16px; }
.start-rij > .card { display: flex; flex-direction: column; height: 100%; }
.start-rij h2 { margin: 0 0 10px; font-size: 1.05rem; }
/* De knop staat altijd onderaan de kaart, ook als de ene kaart voller is.
   En kleiner dan een gewone .btn: op het startscherm staan er zeven van, en op
   de volle maat (12/24px) domineren ze de kaarten waar ze bij horen. Dit is
   dezelfde maat als .btn-sm, dus geen nieuwe knopmaat in het ontwerp. */
.start-btn {
  margin-top: auto; align-self: flex-start;
  padding: 7px 14px; font-size: 0.8125rem;
}
.start-rij .card > .start-btn { margin-top: 16px; }
.start-groot { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.start-doel { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.85rem; }
.start-doel-baan { flex: 1; height: 8px; border-radius: 999px; background: var(--lt-bg-soft); overflow: hidden; }
.start-doel-vul { height: 100%; border-radius: 999px; background: var(--lt-orange); }

.start-notif-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.start-notif-lijst a {
  display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: var(--r-md);
  color: inherit; text-decoration: none; font-size: 0.85rem;
}
.start-notif-lijst a:hover { background: var(--lt-bg); }
.start-notif-aantal {
  flex-shrink: 0; min-width: 24px; text-align: center; padding: 1px 6px; border-radius: 999px;
  background: var(--lt-warn-bg); color: var(--lt-warn-ink); font-weight: 700; font-size: 0.78rem;
}

/* "Mijn klanten" op het medewerkers-startscherm. */
.start-klant-lijst { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.start-klant-lijst li { border-radius: var(--r-md); font-size: 0.9rem; }
.start-klant-lijst li:nth-child(odd) { background: var(--lt-bg); }
.start-klant-lijst a { display: block; padding: 5px 8px; color: inherit; text-decoration: none; border-radius: var(--r-md); }
.start-klant-lijst a:hover { background: var(--lt-blue-bg); color: var(--lt-blue-dark); }

.start-vakken { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.start-vak {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 0 10px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--lt-border); border-left: 4px solid var(--vak); border-radius: var(--r-md);
}
.start-vak-dier { grid-row: 1 / 3; font-size: 1.5rem; }
.start-vak-aantal { font-size: 1.4rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.start-vak-naam { font-size: 0.8rem; color: var(--lt-text-muted); }

.start-fases { margin-top: 4px; }
.start-fases td { padding: 6px 8px; font-size: 0.875rem; }
.start-fases tr:last-child td { border-bottom: 0; }

/* Marketingkosten: de vier onderdelen en de begrotingsindicator. */
.mk-delen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

/* De twee knoppen in de kostenregel naast elkaar, en rechts uitgelijnd zoals de
   bedragen ernaast. */
.mk-acties { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }

/* De twee leveranciersblokken naast elkaar, elk de helft. */
.mk-lev-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-items: start;
  /* Dezelfde afstand als de h2's op deze pagina. Zonder deze marge sluiten de
     twee leveranciersblokken direct op de kostenkaarten erboven aan, want
     .mk-delen heeft zelf geen ondermarge en er staat geen kop tussen. */
  margin-top: 24px;
}
@media (max-width: 1000px) { .mk-lev-cols { grid-template-columns: 1fr; } }

/* 'Begroot voor <jaar>' onder een kostenpost. Los van de bronregel erboven, met
   een streep ertussen, want het is een ander soort gegeven. */
.mk-begroot {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--lt-border);
  font-size: 0.8rem; font-weight: 600; color: var(--lt-ink);
}
.mk-deel-kop { display: flex; align-items: center; gap: 8px; }
.mk-deel-kop h3 { margin: 0; font-size: 0.95rem; }
.mk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mk-bedrag { font-size: 1.5rem; font-weight: 700; margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.mk-indicator { display: flex; gap: 48px; flex-wrap: wrap; margin-bottom: 16px; }
.mk-groot { font-size: 1.75rem; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
/* De schaal met de benchmark als streepje erin. */
.mk-schaal { position: relative; height: 14px; border-radius: 999px; background: var(--lt-bg-soft); overflow: hidden; }
.mk-schaal-balk { height: 100%; border-radius: 999px; }
.mk-schaal-merk { position: absolute; top: -3px; width: 2px; height: 20px; background: var(--lt-ink); }
/* Twee velden naast elkaar in een pop-up. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

/* Klantpagina: quadrant, winstgevendheid en accountmanager naast elkaar. */
.klant-blokken {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; align-items: start; margin-bottom: 16px;
}
/* Accountmanager + Lead Today/New Roots delen één kolom (onder elkaar). */
.klant-blok-stack { display: flex; flex-direction: column; gap: 16px; }

/* Losse tekstlink binnen een alinea (verwijzingen naar andere pagina's). */
.tekst-link { color: var(--lt-blue-dark); text-decoration: underline; font-weight: 500; }
.tekst-link:hover { color: var(--lt-blue); }

/* ── Contactpersonen (visitekaartjes) ─────────────────────────────────────── */
/* ── Klantpagina → Diensten ───────────────────────────────────────────────── */
/* Drie kaarten naast elkaar, één per categorie. Onder een smal scherm zakken ze
   onder elkaar; auto-fit met een ondergrens in plaats van repeat(3, 1fr), zodat
   dat vanzelf gaat. */
.dienst-kolommen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; align-items: start;
}
/* Elke categorie een eigen kaart; de naam staat in de card-head. */
.dienst-kolom { min-width: 0; }

/* Een tweede (of derde) blok op dezelfde tab: Abonnementen en Projecten onder de
   dienstenkaarten, en de pipeline onder de open kansen. Die stonden op eigen
   tabs; een lijn erboven zet ze los van wat erboven staat, zodat het niet één
   lange sliert wordt. */
.tab-blok { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--lt-border); }
.tab-blok > h2:first-child { margin-top: 0; }

/* Eén dienst: een regel met een vinkje, en eronder de abonnementen en projecten
   zodra je hem openklapt. */
.dienst-item {
  border: 1px solid var(--lt-border); border-radius: var(--r-md);
  background: var(--lt-surface); margin-bottom: 6px;
}
.dienst-item.is-actief { border-color: var(--lt-success); background: var(--lt-success-bg); }
/* Wel eens afgenomen, maar nu niet meer: een stippellijn, zodat het op afstand
   al anders leest. */
.dienst-item.is-verleden { border-style: dashed; border-color: var(--lt-text-muted); background: var(--lt-bg); }
/* Nooit afgenomen: uit, maar wel leesbaar. */
.dienst-item.is-uit { background: var(--lt-bg-soft); border-style: dashed; }

.dienst-kop {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; font-size: 0.85rem; line-height: 1.3;
}
/* Het driehoekje van <details> weg: het vinkje links en de teller rechts zeggen
   al genoeg, en de hele regel is aanklikbaar. */
details.dienst-item > summary { cursor: pointer; list-style: none; }
details.dienst-item > summary::-webkit-details-marker { display: none; }
details.dienst-item > summary::marker { content: ''; }
details.dienst-item > summary:hover { background: rgba(16, 24, 32, 0.04); border-radius: var(--r-md); }
details.dienst-item > summary:focus-visible { outline: 2px solid var(--lt-blue); outline-offset: -2px; }

/* Het vinkje: groen als de dienst nu loopt, grijs met een streepje als niet. */
.dienst-vink {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lt-border); color: var(--lt-text-muted);
}
.dienst-vink svg { width: 11px; height: 11px; }
.is-actief .dienst-vink { background: var(--lt-success); color: #FFFFFF; }
/* Loopt nog niet, maar er staat een kans open (tab Upsell / pipeline): een
   groene ring in plaats van een ingekleurd vinkje, en een stippellijn om de
   regel — hetzelfde onderscheid als in de Upsell matrix. De ring is een inset
   box-shadow en geen border, zodat het vakje precies 18px blijft. */
.dienst-item.is-kans { border-color: var(--lt-success); border-style: dashed; background: var(--lt-surface); }
.is-kans .dienst-vink {
  background: var(--lt-surface); color: var(--lt-success);
  box-shadow: inset 0 0 0 2px var(--lt-success);
}
.dienst-naam { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.dienst-item.is-uit .dienst-naam { color: var(--lt-text-muted); font-weight: 500; }
/* Hoeveel abonnementen en projecten eronder zitten. */
.dienst-aantal {
  flex-shrink: 0; min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: rgba(16, 24, 32, 0.08); color: var(--lt-text-muted);
  font-size: 0.7rem; font-weight: 600; text-align: center;
}

.dienst-bronnen {
  list-style: none; margin: 0; padding: 2px 10px 8px 36px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.8rem;
}
.dienst-bronnen li { min-width: 0; }
/* Een bron is een knop naar zijn rij op de tab Abonnementen of Projecten, maar
   moet lezen als tekst in het blok — geen knopvorm, wel aanwijsbaar. Groen wat
   nu loopt, grijs met een stippellijn wat verlopen is. */
.dienst-bron {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 4px 8px; border-radius: var(--r-md);
  font-family: inherit; font-size: inherit; line-height: 1.35;
  overflow-wrap: anywhere;
}
/* Wit als vulling en niet het groen van de kaart: een groen blokje op een groene
   achtergrond leest nauwelijks. De rand en de tekst dragen de kleur. */
.dienst-bron.is-loopt {
  border: 1px solid var(--lt-success); background: var(--lt-surface); color: var(--lt-success);
  font-weight: 600;
}
.dienst-bron.is-verlopen {
  border: 1px dashed var(--lt-text-muted); background: var(--lt-surface); color: var(--lt-text-muted);
}
/* Een open kans onder een dienst: leest als tekst, want er valt niets aan te
   klikken — de opportunity zelf staat in de pipeline eronder. */
.dienst-kans { display: block; padding: 3px 0; line-height: 1.35; overflow-wrap: anywhere; }
.dienst-bron:hover, .dienst-bron:focus-visible { outline: 2px solid var(--lt-blue); outline-offset: 1px; }

/* Alle kaartjes even hoog. Zonder dit is elke kaart precies zo hoog als zijn
   eigen inhoud — de een heeft een badge, de ander een functiegroep, de derde
   geen telefoonnummer — en dan staat de onderrand overal net anders.
   `grid-auto-rows: 1fr` doet de rijen onderling, het uitrekken (de standaard,
   dus géén align-items: start) doet de kaarten binnen een rij. */
.contact-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: 1fr; gap: 16px; margin: 12px 0 16px;
}
.contact-card {
  position: relative; background: var(--lt-surface); border: 1px solid var(--lt-border);
  border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column;
  gap: 6px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* Het facturatiecontact uit Exact Online, in het rood van Exact zodat je in één
   oogopslag ziet dat die kaart niet van ons komt. Hij heeft geen foto — zie het
   fragment — dus de badge staat bovenaan en de naam er direct onder. */
.contact-card-exact {
  border-color: var(--exact-red);
  background: var(--exact-red-bg);
}
.contact-card-exact .contact-badge {
  color: #fff; background: var(--exact-red);
  border-color: var(--exact-red);
  display: inline-flex; align-items: center; gap: 5px;
}
.contact-badge-logo { height: 12px; width: auto; flex-shrink: 0; }
.contact-card-exact .contact-naam { margin-top: 2px; }
.contact-card-exact .contact-meta a { color: var(--exact-red-dark); }

.contact-badge {
  align-self: flex-start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--lt-blue-dark); background: #fff;
  border: 1px solid var(--lt-blue); border-radius: 999px; padding: 2px 8px; margin-bottom: 2px;
}
.contact-avatar {
  width: 56px; height: 56px; border-radius: 50%; background-color: var(--lt-bg-soft);
  background-size: cover; background-position: center; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 1.1rem; color: var(--lt-text-muted);
}
.contact-naam { font-weight: 700; color: var(--lt-ink); }
.contact-functie { font-size: 0.85rem; color: var(--lt-text-muted); }
.contact-groep {
  align-self: flex-start; font-size: 0.72rem; font-weight: 600; color: #fff;
  background: var(--cg, #64748B); border-radius: 999px; padding: 2px 8px;
}
.contact-meta { margin: 4px 0 0; display: flex; flex-direction: column; gap: 3px; }
.contact-meta div { display: flex; gap: 6px; font-size: 0.82rem; }
.contact-meta dt { flex: 0 0 58px; color: var(--lt-text-muted); }
.contact-meta dd { margin: 0; min-width: 0; word-break: break-word; }
.contact-meta a { color: var(--lt-blue-dark); text-decoration: none; }
.contact-meta a:hover { text-decoration: underline; }
.contact-actions {
  position: absolute; top: 10px; right: 10px; display: flex; gap: 2px;
  opacity: 0; transition: opacity 0.12s;
}
.contact-card:hover .contact-actions, .contact-card:focus-within .contact-actions { opacity: 1; }
/* De twee blokken naast elkaar: links de sponsors, rechts de rest. De
   sponsorkolom is één kaart breed — het zijn er een of twee, en de vraag
   'hebben we er één?' hoort niet onder de andere kaartjes weg te zakken. Onder
   een smal scherm komen ze weer onder elkaar. */
.cp-kolommen { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 0 24px; align-items: start; }
.cp-kolom-sponsor, .cp-kolom-overig { min-width: 0; }
/* In de sponsorkolom staan de kaarten onder elkaar en niet in een raster: de
   kolom is precies één kaart breed. */
.cp-kolom-sponsor .contact-cards { grid-template-columns: 1fr; }
@media (max-width: 900px) { .cp-kolommen { grid-template-columns: 1fr; } }

/* Kop per blok op de tab Contactpersonen: de sponsors en daarna de rest. */
.cp-koptekst { margin: 18px 0 0; font-size: 1rem; }
.cp-koptekst .muted { font-weight: 400; }

/* Geen Executive sponsor / coach: een leeg vak met een grijze stippellijn. Bij
   elke klant is er minimaal één nodig, en dat moet je zien zonder de kaartjes
   af te lezen — vandaar dat het vak er is en niet alleen een regel tekst. */
.cp-geen-sponsor {
  display: flex; flex-direction: column; gap: 4px;
  margin: 12px 0 16px; padding: 20px;
  border: 2px dashed var(--lt-border); border-radius: var(--r-md);
  background: var(--lt-bg-soft); color: var(--lt-text-muted);
}
.cp-geen-sponsor strong { color: var(--lt-ink); }
.cp-geen-sponsor .muted { font-size: 0.85rem; max-width: 60ch; }

/* De vijf velden over de plek in een besluit, boven de contactgegevens. Een
   lijntje erboven zet ze los van de functiegroep. */
.contact-rol { padding-top: 6px; border-top: 1px solid var(--lt-border); }
.contact-rol dt { flex: 0 0 74px; }
/* De toelichting achter een modus ('Growth (wil groei realiseren, …)'): op een
   eigen regel in het grijs, want vet over drie regels leest niet. */
.cp-uitleg { display: block; font-size: 0.76rem; color: var(--lt-text-muted); }

/* Supporter: een balkje van -4 tot +5 met een streepje op de 0. De vulling
   loopt vanaf die 0 naar links (tegen ons) of naar rechts (voor ons), zodat de
   kant al vertelt waar iemand staat. */
.cp-supporter { margin-top: 6px; }
.cp-sup-kop { display: flex; gap: 6px; font-size: 0.82rem; }
.cp-sup-kop > span:first-child { flex: 0 0 74px; color: var(--lt-text-muted); }
.cp-sup-waarde { min-width: 0; font-weight: 600; }
.cp-sup-waarde.is-min { color: var(--lt-error); }
.cp-sup-waarde.is-plus { color: var(--lt-success); }
.cp-sup-balk {
  position: relative; height: 8px; margin: 5px 0 2px;
  background: var(--lt-bg-soft); border: 1px solid var(--lt-border); border-radius: 999px;
}
.cp-sup-vul { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.cp-sup-vul.is-min { background: var(--lt-error); }
.cp-sup-vul.is-plus { background: var(--lt-success); }
/* Het streepje op de 0 staat boven de vulling: het is de scheiding tussen
   tegen en voor, en die moet ook binnen een gevuld stuk te zien blijven. */
.cp-sup-nul {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  margin-left: -1px; background: var(--lt-ink);
}
.cp-sup-as {
  display: flex; justify-content: space-between;
  font-size: 0.68rem; color: var(--lt-text-muted);
}

/* Facturen: de kop met rechtsboven het facturatiecontact uit Exact. Onder een
   smal scherm zakt die kaart onder de kop. */
.fact-kop {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 16px;
}
/* De kop mag krimpen, anders duwt hij de kaart naar de volgende regel zodra de
   naam van de klant wat langer is. */
.fact-kop > :first-child { flex: 1 1 auto; min-width: 0; }
/* margin-left voor het geval hij tóch inpakt (smal scherm): dan staat hij nog
   steeds rechts, en pas als hij de volle breedte pakt links. */
.fact-contact { width: min(300px, 100%); margin-left: auto; gap: 4px; padding: 12px 14px; }

.cp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.cp-form-grid .cp-field-wide { grid-column: 1 / -1; }
@media (max-width: 520px) { .cp-form-grid { grid-template-columns: 1fr; } }

/* ── Export-modal (Omzet en prognose) ─────────────────────────────────────── */
.ex-seg { display: flex; gap: 18px; }
.ex-seg label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ex-rowlabel {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--lt-text-muted); margin: 16px 0 6px;
}
.ex-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-chip {
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--lt-border);
  border-radius: var(--r-md); padding: 6px 10px; font-size: 0.85rem; cursor: pointer;
  background: var(--lt-surface); user-select: none;
}
.ex-chip:has(input:checked) { border-color: var(--lt-blue); background: var(--lt-blue-bg); color: var(--lt-blue-dark); }

/* "Betrokken medewerkers" op de klantpagina: een strakke namenlijst, met per
   naam een mouse-over die toont welke abonnementen/projecten iemand beheert. */
.klant-betrokken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.klant-betrokken li { font-size: 0.9rem; color: var(--lt-ink); }
.klant-betrokken-naam { position: relative; cursor: default; border-bottom: 1px dotted var(--lt-border); }
.klant-betrokken-tip {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 220px; max-width: 320px;
  display: none; flex-direction: column; gap: 6px;
  background: var(--lt-ink); color: #fff;
  border-radius: var(--r-md); padding: 10px 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-size: 0.8rem; line-height: 1.35; white-space: normal;
}
.klant-betrokken-naam:hover .klant-betrokken-tip,
.klant-betrokken-naam:focus .klant-betrokken-tip,
.klant-betrokken-naam:focus-within .klant-betrokken-tip { display: flex; }
.klant-betrokken-tip-groep { display: flex; flex-direction: column; gap: 2px; }
.klant-betrokken-tip-kop {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  opacity: 0.7; font-weight: 700;
}
.klant-betrokken-tip-item { padding-left: 2px; }

/* "Samengevoegde klant" banner on the customer detail page. */
.merge-banner {
  border: 1px solid var(--lt-blue); background: var(--lt-blue-bg);
  border-radius: var(--r-md); padding: 12px 16px; margin: 0 0 16px;
}
.merge-banner h2 { margin: 0 0 6px; font-size: 1rem; color: var(--lt-blue-dark); }
.merge-banner ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.merge-banner li { font-size: 0.88rem; color: var(--lt-ink); }
.merge-banner code { font-size: 0.78rem; color: var(--lt-text-muted); }

/* Month switch (mirrors the year switch, JS-driven) */
.monthswitch {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px;
  border: 1px solid var(--lt-border); border-radius: var(--r-md); background: var(--lt-surface);
}
.monthswitch .mstep {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; border: none; background: none;
  color: var(--lt-blue-dark); font-size: 1.1rem; line-height: 1; font-weight: 700; cursor: pointer;
  text-decoration: none;
}
.monthswitch .mstep:hover:not(:disabled) { background: var(--lt-blue-bg); }
.monthswitch .mstep:disabled { color: var(--lt-border); cursor: default; }
.monthswitch-label { font-size: 1rem; font-weight: 700; color: var(--lt-ink); min-width: 128px; text-align: center; }
.lead-table-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Two side-by-side lead tables */
.lead-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .lead-tables { grid-template-columns: 1fr; } }
.lead-col { padding: 16px; }
.lead-col-title { margin: 0 0 12px; font-size: 1rem; }
.lead-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lead-grid th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--lt-text-subtle); font-weight: 700; padding: 0 8px 8px; border-bottom: 1px solid var(--lt-border);
  white-space: nowrap;
}
.lead-grid td { vertical-align: top; padding: 10px 8px; border-right: 1px solid var(--lt-border); }
.lead-grid td:last-child { border-right: none; }
.lead-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.lead-item { font-size: 0.85rem; color: var(--lt-ink); margin-bottom: 7px; line-height: 1.35; }
.lead-item:last-child { margin-bottom: 0; }
.lead-item-meta { color: var(--lt-text-muted); font-size: 0.78rem; }
.lead-group { margin-bottom: 16px; }
.lead-group:last-child { margin-bottom: 0; }
.lead-group-title { margin: 0 0 6px; font-size: 0.9rem; font-weight: 700; color: var(--lt-ink); }
.lead-legend-note { font-size: 0.75rem; line-height: 1.5; margin: 18px 0 0; }

/* Back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lt-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: color var(--t-base, 0.15s) ease;
}
.back-link:hover { color: var(--lt-blue-dark); }
.back-link .arrow { transition: transform var(--t-base, 0.15s) ease; }
.back-link:hover .arrow { transform: translateX(-3px); }

/* ───── App shell ─────
   De navigatie zat vroeger in een linker zijbalk; die is vervangen door de
   bovenbalk hieronder (.app-top). De regels hier zijn wat beide deelden en
   wat .app-top nog gebruikt: de nav-items, de jaarschakelaar en .main. */
.app { display: flex; min-height: 100vh; }

/* De donkere overlay achter het open mobiele menu; zichtbaar gemaakt in het
   breekpunt van dat menu (max-width: 1000px). */
.nav-backdrop { display: none; }

/* De jaarschakelaar. Staat als filter onder de titel op Omzetverwachting en
   nergens anders meer — het jaar zit in de sessie, dus je zet hem daar één keer
   en de rest van de app volgt. De omhulling .yearswitch is weg met de balk. */
.yearstep {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 4px;
  border: 1px solid var(--lt-border); border-radius: var(--r-md);
  background: var(--lt-bg);
}
.yearstep .ystep {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 0;
  color: var(--lt-blue-dark); text-decoration: none;
  font-size: 1.1rem; line-height: 1; font-weight: 700;
  transition: background var(--t-base, 0.15s) ease;
}
.yearstep .ystep:hover { background: var(--lt-blue-bg); }
.yearstep .ystep.disabled {
  color: var(--lt-border); cursor: default; pointer-events: none;
}
.yearstep .yval {
  font-size: 1.0625rem; font-weight: 700; color: var(--lt-ink);
  letter-spacing: 0.01em;
}

.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  color: var(--lt-ink); text-decoration: none;
  font-weight: 600; font-size: 0.9375rem;
  transition: background var(--t-base, 0.15s) ease;
}
.nav a:hover { background: var(--lt-bg-soft); }
.nav a.active { background: var(--lt-blue-bg); color: var(--lt-blue-dark); }
.nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav a.subnav { padding-top: 7px; padding-bottom: 7px; padding-left: 40px; font-size: 0.875rem; font-weight: 500; }
.nav-badge {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--lt-blue-bg);
  color: var(--lt-blue-dark);
  font-size: 0.75rem; font-weight: 700; line-height: 1.6;
  text-align: center;
}
.nav a.active .nav-badge { background: var(--lt-blue-dark); color: #fff; }
.nav-parent .nav-badge, .nav-parent.active .nav-badge { background: var(--lt-blue-dark); color: #fff; }

/* Collapsible nav sections */
.nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-parent {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: var(--r-md);
  background: none; border: none; cursor: pointer; text-align: left;
  color: var(--lt-ink); font-family: inherit; font-weight: 600; font-size: 0.9375rem;
  transition: background var(--t-base, 0.15s) ease;
}
.nav-parent:hover { background: var(--lt-bg-soft); }
.nav-parent.active { background: var(--lt-blue-bg); color: var(--lt-blue-dark); }
.nav-parent > svg:first-child { width: 18px; height: 18px; flex-shrink: 0; }
.nav-caret { width: 15px; height: 15px; margin-left: auto; flex-shrink: 0; transition: transform var(--t-base, 0.15s) ease; }
.nav-group:not(.open) .nav-caret { transform: rotate(-90deg); }
.subnav-wrap { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.nav-group:not(.open) .subnav-wrap { display: none; }

.main { flex: 1; min-width: 0; padding: 40px; }
.main > h1 { margin-top: 0; }

/* ───── Top navigation bar (overrides the left-sidebar shell) ───── */
.app.app-top { display: block; min-height: 100vh; }
.app-top .appbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: stretch; gap: 0 6px;
  padding: 0 20px; min-height: 56px;
  background: #fff; border-bottom: 1px solid var(--lt-border);
}
.app-top .appbar-logo { display: flex; align-items: center; padding-right: 14px; flex-shrink: 0; }
.app-top .appbar-logo img { height: 26px; width: auto; }
.app-top .hamburger { display: none; }

.app-top .nav { display: flex; flex-direction: row; align-items: stretch; gap: 2px; flex: 1; min-width: 0; }
.app-top .nav > a,
.app-top .nav-parent {
  display: flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 12px; white-space: nowrap; border-radius: 0;
  border: none; border-bottom: 2px solid transparent; background: none;
  color: var(--lt-ink); font: inherit; font-weight: 600; font-size: 0.9rem;
  text-decoration: none; cursor: pointer;
}
.app-top .nav > a > svg:first-child,
.app-top .nav-parent > svg:first-child { width: 18px; height: 18px; flex-shrink: 0; }
.app-top .nav > a:hover,
.app-top .nav-parent:hover { color: var(--lt-blue-dark); background: var(--lt-bg-soft); }
.app-top .nav > a.active,
.app-top .nav-parent.active { color: var(--lt-blue-dark); border-bottom-color: var(--lt-blue); }
.app-top .nav-caret { width: 13px; height: 13px; margin-left: 0; transition: transform 0.15s ease; }

.app-top .nav-group { position: relative; display: flex; align-items: stretch; }
/* Instellingen sits as the gear on the right on desktop; its menu entry only
   appears in the mobile hamburger. */
.app-top .nav-group.nav-mobile-only { display: none; }
.app-top .subnav-wrap {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 210px; flex-direction: column; gap: 2px; padding: 6px;
  background: #fff; border: 1px solid var(--lt-border); border-radius: var(--r-md);
  box-shadow: var(--shadow-card); display: none;
}
.app-top .nav-group:hover > .subnav-wrap,
.app-top .nav-group.open > .subnav-wrap { display: flex; }
.app-top .nav-group:hover .nav-caret,
.app-top .nav-group.open .nav-caret { transform: rotate(180deg); }
.app-top .subnav-wrap .subnav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: auto; padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--lt-ink); text-decoration: none; font-size: 0.9rem; font-weight: 500; white-space: nowrap;
}
.app-top .subnav-wrap .subnav:hover { background: var(--lt-bg-soft); }
.app-top .subnav-wrap .subnav.active { background: var(--lt-blue-bg); color: var(--lt-blue-dark); font-weight: 600; }
.app-top .subnav .nav-badge { margin-left: 0; }

.app-top .appbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; padding-left: 12px; }
.app-top .userbox { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; border: none; font-size: 0.85rem; color: var(--lt-text-muted); }
.app-top .userbox .uname { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-top .userbox .logout,
.app-top .userbox .settings-link { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; color: var(--lt-blue-dark); border-radius: var(--r-sm, 6px); }
.app-top .userbox .logout:hover,
.app-top .userbox .settings-link:hover { background: var(--lt-blue-bg); }
.app-top .userbox .logout svg,
.app-top .userbox .settings-link svg { width: 18px; height: 18px; }
.app-top .userbox .settings-link.active { background: var(--lt-blue-bg); color: var(--lt-blue-dark); }

/* De klantzoeker in de balk: een loepje dat bij hover een zoekveld uitschuift.
   Het loepje staat even groot en zonder kader als het tandwiel en het uitloggen. */
.app-top .klantzoek { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.app-top .klantzoek-knop {
  width: 30px; height: 30px; margin-left: 0; flex-shrink: 0;
  border: none; color: var(--lt-blue-dark); border-radius: var(--r-sm, 6px);
}
.app-top .klantzoek-knop:hover { background: var(--lt-blue-bg); border: none; }
.app-top .klantzoek-knop svg { width: 18px; height: 18px; }

/* Dicht: geen breedte, geen rand, niet aan te tabben (tabindex staat op -1 in de
   markup, JS zet hem op 0 zodra het veld open is). Uitschuiven doet de breedte,
   niet display — anders is er geen overgang. */
.app-top .klantzoek-veld {
  width: 0; padding: 0; border: 1px solid transparent; border-radius: var(--r-md);
  font-family: inherit; font-size: 0.875rem; color: var(--lt-ink);
  background: var(--lt-bg); opacity: 0; pointer-events: none;
  transition: width 0.18s ease, opacity 0.14s ease, padding 0.18s ease;
}
/* Open bij hover, zolang de focus erin staat, of zolang er iets getypt is
   (is-open, gezet door app.js) — anders klapt hij dicht terwijl je typt en de
   muis net buiten de balk komt. */
.app-top .klantzoek:hover .klantzoek-veld,
.app-top .klantzoek:focus-within .klantzoek-veld,
.app-top .klantzoek.is-open .klantzoek-veld {
  width: 220px; padding: 6px 10px; opacity: 1; pointer-events: auto;
  border-color: var(--lt-border);
}
.app-top .klantzoek-veld:focus { outline: none; border-color: var(--lt-blue); background: #fff; }

/* Het resultatenpaneel hangt onder het veld. z-index boven de balk (50) en de
   subnav-dropdowns (60), want die kunnen ernaast open staan. */
.app-top .klantzoek-paneel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
  width: min(360px, calc(100vw - 32px));
  background: var(--lt-surface); border: 1px solid var(--lt-border);
  border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(16, 24, 32, 0.16);
  overflow: hidden;
}
.app-top .klantzoek-paneel[hidden] { display: none; }

.app-top .main { display: block; flex: none; padding: 32px 40px; }

@media (max-width: 1000px) {
  .app-top .appbar { flex-wrap: wrap; min-height: 0; padding: 8px 16px; gap: 8px; align-items: center; }
  .app-top .hamburger { display: inline-flex; order: 2; margin-left: auto; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: none; border: 1px solid var(--lt-border); color: var(--lt-ink); cursor: pointer; }
  .app-top .hamburger svg { width: 22px; height: 22px; }
  .app-top .appbar-right { order: 3; }
  /* flex: none is nodig: de desktopregel hierboven zet `flex: 1`, en die
     flex-basis van 0% wint van `width: 100%`. Zonder deze reset blijft de
     nav op dezelfde regel als het logo staan in plaats van eronder. */
  .app-top .nav { order: 4; flex: none; flex-direction: column; width: 100%; display: none; padding-top: 6px; }
  .app-top .appbar.nav-open .nav { display: flex; }
  /* Boven de donkere overlay (z-index 55), anders valt die over het menu. */
  .app-top .appbar.nav-open { z-index: 60; background: var(--lt-surface); }
  .app-top .nav > a, .app-top .nav-parent { height: 44px; border-bottom: none; width: 100%; }
  .app-top .nav-group { flex-direction: column; }
  .app-top .nav-group.nav-mobile-only { display: flex; }
  /* Accordion: subs are closed until the parent is tapped (no hover-open on
     touch); the caret shows the state. */
  .app-top .subnav-wrap { position: static; box-shadow: none; border: none; padding: 0 0 6px 34px; min-width: 0; }
  .app-top .nav-group:hover > .subnav-wrap { display: none; }
  .app-top .nav-group.open > .subnav-wrap { display: flex; }
  .app-top .nav-caret { display: block; margin-left: auto; width: 16px; height: 16px; }
  .app-top .nav-group:not(.open) .nav-caret { transform: rotate(0deg); }
  .app-top .main { padding: 20px 16px; }
  /* De donkere overlay achter het open menu. Stond bij het breekpunt van de
     oude zijbalk (760px), waardoor tussen 761 en 1000px het menu wel opende
     maar een tik ernaast het niet sloot. */
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(16, 24, 32, 0.45);
  }
  .nav-backdrop[hidden] { display: none; }
}

/* ───── Tabs (segmented control, house style) ───── */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 20px;
  padding: 4px;
  background: var(--lt-bg-soft);
  border: 1px solid var(--lt-border);
  border-radius: var(--r-pill);
}
.tabs a, .tabs button {
  padding: 7px 16px;
  border: none;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--lt-text-muted);
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-base, 0.15s) ease, color var(--t-base, 0.15s) ease;
}
.tabs a:hover, .tabs button:hover { color: var(--lt-ink); }
.tabs a.active, .tabs button.active {
  background: var(--lt-blue);
  color: #fff;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(16, 24, 32, 0.05));
}

/* Subtabs binnen een tab (Actueel / Archief op Abonnementen en Projecten).
   Dezelfde vorm als de tabbalk, maar een maat kleiner en zonder eigen
   achtergrond — het is een keuze binnen een tab, niet een tab zelf. */
.subtabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 12px;
}
.subtabs button {
  padding: 5px 12px;
  border: 1px solid var(--lt-border); border-radius: var(--r-pill);
  background: var(--lt-surface); color: var(--lt-text-muted);
  font-family: inherit; font-weight: 600; font-size: 0.8rem;
  white-space: nowrap; cursor: pointer;
  transition: background var(--t-base, 0.15s) ease, color var(--t-base, 0.15s) ease;
}
.subtabs button:hover { color: var(--lt-ink); }
.subtabs button.active {
  background: var(--lt-blue); border-color: var(--lt-blue); color: #fff;
}
.subtabs button:focus-visible { outline: 2px solid var(--lt-blue); outline-offset: 1px; }
/* [hidden] werkt niet vanzelf als er elders display op staat; hier staat dat
   niet, maar expliciet is het veiliger dan erop vertrouwen. */
.subtab-panel[hidden] { display: none; }

/* Omzetspreiding: de twee grafieken. Breedte volgt de kaart; de hoogte zit in de
   viewBox, dus die schaalt mee. */
.spr-chart { width: 100%; height: auto; display: block; }

/* ── Upsell matrix ────────────────────────────────────────────────────────────
   Eén rij per klant, één kolom per dienst. De koppen staan verticaal: met een
   kolom per dienst passen ze horizontaal niet, en dan wordt de tabel breder dan
   het scherm. */
.upsell-table { border-collapse: separate; border-spacing: 0; }
.upsell-table th, .upsell-table td { padding: 6px 8px; }
.upsell-table thead th {
  vertical-align: bottom; text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--lt-border);
}
/* De naam van de kop schuin, van linksonder naar rechtsboven te lezen: 20° uit
   het lood (rotate(-70deg) is een kwartslag min die 20°). De andere kant op
   kantelen (-110deg) zet de letters op hun kop: voorbij het lood klapt de
   leesrichting om.
 *
 * Twee dingen die niet vanzelf goed gaan.
 *
 * Het draaipunt staat aan het begin van de tekst en niet in het midden. Draaien
 * om het midden schuift de tekst ook op langs zijn eigen richting, en hoe langer
 * de naam hoe verder — waardoor 'Webontwikkeling support en doorontwikkeling'
 * precies boven op zijn korte buur 'Webontwikkeling' belandde. Met het begin
 * vast in de eigen kolom liggen alle namen evenwijdig naast elkaar.
 *
 * En de tekst staat absoluut: een gedraaide tekst houdt in de tabelindeling zijn
 * ongedraaide breedte, dus zonder dat zou elke kolom zo breed worden als zijn
 * naam. Vandaar ook de vaste hoogte van de kop: de tekst duwt die zelf niet meer
 * open. */
.upsell-table thead th { position: relative; }
.upsell-table thead th .ups-kop-tekst {
  position: absolute; left: 50%; bottom: 18px;
  transform-origin: left bottom; transform: rotate(-70deg);
  white-space: nowrap; font-size: 0.75rem; font-weight: 600;
}
/* Hoog genoeg voor de langste dienstnaam ('Strategische en projectmanagement
   begeleiding'), met wat lucht erboven: de tekst staat absoluut en duwt de kop
   zelf niet open, dus dit is de maat waarop hij moet passen. */
.upsell-table .ups-cat, .upsell-table .ups-dienst {
  cursor: pointer; user-select: none; text-align: center; height: 280px;
}
.upsell-table .ups-cat { background: var(--lt-bg-soft); }
.upsell-table .ups-cat .ups-kop-tekst { font-weight: 700; color: var(--lt-ink); }
.upsell-table .ups-cat:hover .ups-kop-tekst, .upsell-table .ups-dienst:hover .ups-kop-tekst { color: var(--lt-blue-dark); }
.upsell-table .ups-caret { display: block; text-align: center; color: var(--lt-text-muted); }
/* De eerste dienst van een categorie krijgt een scheiding, zodat je ziet waar
   de ene categorie ophoudt. In de kop niet: de schuine namen liggen over de
   kolomgrenzen heen en die streep zou er middendoor lopen. */
.upsell-table .ups-eerste { border-left: 1px solid var(--lt-border); }
.upsell-table thead .ups-eerste { border-left: none; }
.upsell-table .ups-vak { text-align: center; }
.upsell-table .ups-vast { white-space: nowrap; }
/* De klantnaam leest als op de klantenlijst: inkt, geen streep, wat zwaarder, en
   blauw zodra je over de rij gaat. Er is geen globale a-regel in dit bestand, dus
   zonder dit valt hij terug op de blauwe onderstreepte browserlink — en die staat
   nergens anders in de app.
   De rij licht mee op: met veertien kolommen naast elkaar is dat de enige manier
   om te zien welke rij je aan het lezen bent. */
.upsell-table tbody tr:hover { background: var(--lt-blue-bg); }
.upsell-table td.ups-vast a { color: var(--lt-ink); text-decoration: none; font-weight: 600; }
.upsell-table tbody tr:hover td.ups-vast a { color: var(--lt-blue-dark); }
/* Dicht: de categoriekolom staat er, de diensten niet. Open precies omgekeerd —
   dezelfde truc als de kwartalen op Begroting, dus zonder colspan-gegoochel. */
.upsell-table .d-col { display: none; }
.upsell-table.c0-open .c-col.c0, .upsell-table.c1-open .c-col.c1,
.upsell-table.c2-open .c-col.c2 { display: none; }
.upsell-table.c0-open .d-col.c0, .upsell-table.c1-open .d-col.c1,
.upsell-table.c2-open .d-col.c2 { display: table-cell; }
/* Het vinkje: alleen als de klant de dienst afneemt. Een leeg vak is een kans,
   en die hoort leeg te zijn en niet met een kruisje vol te staan. */
.ups-vink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--lt-success); color: #FFFFFF;
}
.ups-vink svg { width: 11px; height: 11px; }
/* Eerder afgenomen, nu niet meer: lichtgrijs in plaats van groen — hetzelfde
   onderscheid als de stippellijn op de tab Diensten van de klantpagina. */
.ups-vink.is-verleden { background: var(--lt-border); color: var(--lt-text-muted); }
/* Er staat een kans open voor deze dienst: een groene ring in plaats van een
   ingekleurd vinkje. Neemt de klant hem al af, dan blijft het ingekleurde
   vinkje staan — dat is de sterkere mededeling. */
.ups-vink.is-kans {
  background: var(--lt-surface); color: var(--lt-success);
  box-shadow: inset 0 0 0 2px var(--lt-success);
}
/* Deze dienst is bij deze klant geen kans (Google Grants bij een Lead
   Today-klant): een grijs kruisje in plaats van een leeg vak. Geen bolletje
   eromheen — dan zou het net zo zwaar wegen als een vinkje, en het zegt juist
   dat er niets te halen valt. */
.ups-kruis {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; color: var(--lt-text-muted); opacity: 0.55;
}
.ups-kruis svg { width: 12px; height: 12px; }
/* Kopje per categorie in de dienstenkeuzelijst: veertien namen op een rij zijn
   zonder groepering niet te vinden. */
.am-filter-kop {
  margin: 8px 0 2px; padding: 0 4px; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--lt-text-muted);
}
.am-filter-panel .am-filter-kop:first-child { margin-top: 2px; }
.ups-aantal { margin-left: 4px; font-size: 0.72rem; color: var(--lt-text-muted); }

/* Toolbar: search + bulk action on one aligned row */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.toolbar .search { margin: 0; flex: 1 1 260px; max-width: 360px; }
.toolbar .btn { margin-left: auto; }
/* Search sits at the far right of a toolbar, after the filters. */

/* An input with its own button, kept together inside a .toolbar (where
   .toolbar .btn would otherwise push every button to the far right). */
/* stretch: the button takes the input's height, whatever the paddings are. */
.inline-field { display: inline-flex; align-items: stretch; gap: 6px; }
.inline-field .btn { margin-left: 0; display: inline-flex; align-items: center; }
.inline-field input {
  width: 92px; font-family: inherit; font-size: 0.9rem; text-align: right;
  padding: 7px 10px; border: 1px solid var(--lt-border);
  border-radius: var(--r-md); background: var(--lt-bg); color: var(--lt-ink);
}
.inline-field input:focus { outline: none; border-color: var(--lt-blue); background: #fff; }

/* Search input on list pages */
.search {
  width: 100%; max-width: 320px; font-family: inherit; font-size: 0.9375rem;
  padding: 10px 14px; border: 1px solid var(--lt-border);
  border-radius: var(--r-md); background: #fff; margin-bottom: 16px;
}
.search:focus { outline: none; border-color: var(--lt-blue); }

/* Status pill in tables */
.pill {
  display: inline-block; padding: 2px 10px; border-radius: var(--r-pill);
  font-size: 0.75rem; font-weight: 600; background: var(--lt-bg-soft); color: var(--lt-text-muted);
}
.pill.c { background: var(--lt-success-bg); color: var(--lt-success); }
.pill.p { background: var(--lt-blue-bg); color: var(--lt-blue-dark); }
.pill.s { background: var(--lt-orange-light, #FEF0E8); color: var(--lt-orange-dark); }
/* Dezelfde grenzen als de ring bij 'Status van ingediende uren': geel als er
   iets mist, rood als er veel mist. */
.pill.w { background: var(--lt-warn-bg); color: var(--lt-warn-ink); }
.pill.e { background: var(--lt-error-bg); color: var(--lt-error); }

/* Standalone auth pages (2FA verify / setup), centred like the login */
.authwrap {
  max-width: 460px; width: 100%; min-height: 100vh; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; padding: 24px;
}
.authwrap .brand { justify-content: center; }
.authwrap .card { padding: 32px; }
.authwrap .btn { width: 100%; text-align: center; margin-top: 8px; }
.qr-box { display: flex; justify-content: center; margin: 4px 0 12px; }
.qr-box img { width: 200px; height: 200px; image-rendering: pixelated; }
.secret-code {
  display: block; text-align: center; font-family: monospace; font-size: 1rem;
  letter-spacing: 0.15em; background: var(--lt-bg-soft); padding: 10px; margin-bottom: 16px;
  word-break: break-all;
}
.recovery-box { background: var(--lt-bg-soft); padding: 16px; margin: 8px 0 16px; }
.recovery-list {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
  font-family: monospace; font-size: 0.95rem; letter-spacing: 0.05em;
}
.code-input {
  text-align: center; font-size: 1.5rem !important; letter-spacing: 0.4em;
  font-family: monospace;
}
.link-btn {
  background: none; border: none; color: var(--lt-blue-dark); cursor: pointer;
  font: inherit; text-decoration: underline; padding: 0;
}

/* Sync run log per day (Instellingen) */
.log-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.log-tab {
  background: var(--lt-bg-soft); border: 1px solid var(--lt-border); cursor: pointer;
  font: inherit; font-size: 0.8125rem; padding: 6px 12px; color: var(--lt-text-muted);
}
.log-tab.active { background: var(--lt-blue-bg); color: var(--lt-blue-dark); border-color: var(--lt-blue); font-weight: 600; }

.log {
  margin: 0; max-height: 360px; overflow: auto;
  background: var(--lt-bg-soft); border: 1px solid var(--lt-border);
  padding: 12px 14px;
  font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px; line-height: 1.55; color: var(--lt-ink);
  white-space: pre-wrap; word-break: break-word;
}

/* Page header: title/intro left, primary action right */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.page-head h1 { margin: 0 0 4px; }

/* Icon-only row actions (edit / delete) */
.table td.row-actions { text-align: right; white-space: nowrap; }
.row-actions form { display: inline; margin: 0; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin-left: 4px;
  background: transparent; border: 1px solid var(--lt-border); border-radius: 0;
  color: var(--lt-text-muted); cursor: pointer; vertical-align: middle;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--lt-blue-bg); color: var(--lt-blue-dark); border-color: var(--lt-blue); }
.icon-btn-danger:hover { background: var(--lt-error-bg); color: var(--lt-error); border-color: var(--lt-error); }
/* Directe hover-tooltip (sneller dan de native title). Zet data-tip op de knop. */
.icon-btn[data-tip] { position: relative; }
.icon-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); right: 0;
  background: var(--lt-ink); color: #fff;
  font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.3; font-weight: 500; text-align: left;
  padding: 5px 8px; border-radius: var(--r-md);
  white-space: normal; width: max-content; max-width: 220px;
  box-shadow: var(--shadow-card); pointer-events: none; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(2px);
  transition: opacity 0.1s ease, transform 0.1s ease;
}
.icon-btn[data-tip]:hover::after, .icon-btn[data-tip]:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Medewerkers-instellingen: witruimte tussen de losse cards. */
.tab-panel[data-panel="medewerkers"] .card { margin-bottom: 16px; }

/* Modal dialog (house style, square corners) */
dialog.modal {
  border: none; border-radius: 0; padding: 0;
  width: min(460px, 92vw); background: var(--lt-surface); color: var(--lt-ink);
  box-shadow: 0 10px 40px rgba(16, 24, 32, 0.18);
}
/* Een modal met een tabel erin heeft meer breedte nodig dan de 460px van een
   formulier. */
dialog.modal.modal-wide { width: min(820px, 94vw); }
dialog.modal::backdrop { background: rgba(16, 24, 32, 0.45); }
dialog.modal .modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--lt-border);
}
dialog.modal .modal-head h2 { margin: 0; }
dialog.modal .modal-body { padding: 24px; }
dialog.modal .modal-close {
  background: none; border: none; cursor: pointer; line-height: 1;
  font-size: 1.5rem; color: var(--lt-text-muted); padding: 0 4px;
}
dialog.modal .modal-close:hover { color: var(--lt-ink); }

/* ───── De lijst in het zoekpaneel ───── */
.klantzoek-lijst { max-height: min(360px, 50vh); overflow-y: auto; padding: 6px; }
.klantzoek-rij {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-md);
  color: var(--lt-ink); text-decoration: none;
}
/* Eén markering voor zowel de pijltjes als de muis, zodat er nooit twee rijen
   tegelijk oplichten. */
.klantzoek-rij.is-actief { background: var(--lt-blue-bg); }
/* De naam neemt de ruimte, zodat het pilletje erachter altijd tegen de
   rechterrand staat — bij een korte én een lange naam op dezelfde plek. */
.klantzoek-naam { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klantzoek-rij .pill { flex-shrink: 0; margin-left: auto; }
.klantzoek-via {
  padding-left: 8px; font-size: 0.78rem; color: var(--lt-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%;
}
.klantzoek-status { margin: 0; padding: 12px; font-size: 0.85rem; color: var(--lt-text-muted); }

.modal-actions {
  display: flex; justify-content: flex-end; gap: 12px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--lt-border);
}

/* Segmented radio group (e.g. Omzet / Kosten in the Maandstatus line modal). */
.radio-group { display: flex; gap: 10px; }
.radio-group label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 10px 18px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--lt-border); background: var(--lt-bg);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.radio-group label:hover { border-color: var(--lt-blue); }
.radio-group label:has(input:checked) {
  border-color: var(--lt-blue); background: var(--lt-blue-bg); color: var(--lt-blue-dark);
}
.radio-group input { margin: 0; accent-color: var(--lt-blue); }

/* ── Maandstatus ─────────────────────────────────────────────────────────── */
.ms-table { width: 100%; border-collapse: collapse; }
.ms-table th, .ms-table td { padding: 10px 12px; border-bottom: 1px solid var(--lt-border); vertical-align: top; }
.ms-table thead th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--lt-text-subtle); font-weight: 700; text-align: right; white-space: nowrap;
}
.ms-table thead th.ms-th-month { text-align: left; }
.ms-table td.ms-num { text-align: right; white-space: nowrap; }
.ms-row { cursor: pointer; }
.ms-row:hover { background: var(--lt-bg-soft); }
.ms-row.open { background: var(--lt-blue-bg); }
.ms-month { font-weight: 700; white-space: nowrap; }
.ms-month .caret { display: inline-block; width: 14px; color: var(--lt-text-subtle); transition: transform 0.15s ease; }
.ms-row.open .ms-month .caret { transform: rotate(90deg); }
.ms-total { font-weight: 700; }
.ms-sub { font-size: 0.72rem; color: var(--lt-text-subtle); margin-top: 2px; white-space: nowrap; }

/* De kop boven elk van de drie tabellen (afgerond, komend, per kwartaal). */
.ms-kop { margin: 28px 0 10px; font-size: 1.05rem; }
.ms-kop:first-of-type { margin-top: 8px; }

/* De optelregels onder een tabel: geen klikbare rij, dus geen hover en geen
   caret, en met een streep erboven zodat ze los staan van de maanden. */
.ms-table tfoot .ms-sum > td {
  border-top: 2px solid var(--lt-border); border-bottom: none;
  background: var(--lt-bg-soft);
}
.ms-table tfoot .ms-sum .ms-month { font-weight: 700; white-space: normal; }
.ms-sum-uitleg {
  font-size: 0.72rem; font-weight: 400; color: var(--lt-text-subtle);
  margin-top: 2px; white-space: normal;
}
.ms-pos { color: #16A34A; }
.ms-neg { color: var(--lt-error); }
.ms-note-btn {
  background: none; border: none; cursor: pointer; color: var(--lt-text-muted);
  padding: 2px; border-radius: 6px; line-height: 0;
}
.ms-note-btn:hover { color: var(--lt-blue-dark); background: var(--lt-blue-bg); }
.ms-note-btn.has-note { color: var(--lt-blue-dark); }
/* Resultaat MMG is editable: the whole value is a button with a clear
   "editable" affordance (dashed underline + blue pencil, hover highlight). */
.ms-mmg-edit {
  display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
  background: none; border: none; cursor: pointer; font: inherit; color: inherit;
  padding: 4px 6px;
}
.ms-mmg-edit .ms-total { border-bottom: 1px dashed var(--lt-blue); }
.ms-mmg-edit svg { width: 14px; height: 14px; color: var(--lt-blue); flex-shrink: 0; }
.ms-mmg-edit:hover { background: var(--lt-blue-bg); }
.ms-mmg-edit:hover .ms-total { color: var(--lt-blue-dark); }
.ms-linecount {
  display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: var(--lt-blue-bg); color: var(--lt-blue-dark);
  font-size: 0.72rem; font-weight: 700; text-align: center;
}
.ms-actions { white-space: nowrap; text-align: right; }
.ms-actions svg { width: 16px; height: 16px; }

/* Expanded detail row */
.ms-detail-row > td { background: #fff; padding: 0; border-bottom: 2px solid var(--lt-border); }
.ms-detail { padding: 16px 12px; }
.ms-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ms-block { border: 1px solid var(--lt-border); border-radius: var(--r-md); background: var(--lt-surface); display: flex; flex-direction: column; min-height: 0; }
.ms-block h4 { margin: 0; padding: 10px 12px; font-size: 0.8rem; border-bottom: 1px solid var(--lt-border); }
.ms-block .ms-scroll { overflow-y: auto; max-height: 260px; }
.ms-list { width: 100%; border-collapse: collapse; }
.ms-list td { padding: 6px 12px; border-bottom: 1px solid var(--lt-border); font-size: 0.82rem; }
.ms-list td.num { text-align: right; white-space: nowrap; }
.ms-list tr:last-child td { border-bottom: none; }
.ms-empty { padding: 12px; color: var(--lt-text-subtle); font-size: 0.82rem; }
.ms-cmp-head { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; flex-wrap: wrap; }
.ms-cmp-head h3 { margin: 0; font-size: 0.95rem; }
.ms-diff { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.ms-diff .chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px;
  border-radius: 999px; background: var(--lt-bg-soft); font-size: 0.8rem;
}
.ms-diff .chip .amt { font-weight: 700; }
.ms-conclusion { background: var(--lt-bg-soft); border-radius: var(--r-md); padding: 12px 14px; font-size: 0.85rem; color: var(--lt-ink); }
@media (max-width: 900px) { .ms-blocks { grid-template-columns: 1fr; } }

/* ── ROTS analyse ────────────────────────────────────────────────────────── */
.ms-table td.rots-avg {
  vertical-align: middle; text-align: center;
  background: var(--lt-blue-bg); border-left: 1px solid var(--lt-border);
}
.ms-table td.rots-avg.rots-avg-year { background: rgba(252, 76, 2, 0.09); }
.ms-table td.rots-avg strong { font-size: 1.05rem; }
.rots-avg-label {
  display: block; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--lt-text-muted); margin-bottom: 2px;
}

/* Toggle switch (grootboek meetellen ja/nee). */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; inset: 0; cursor: pointer; background: var(--lt-border);
  transition: background 0.18s ease; border-radius: 999px;
}
.switch-slider::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.18s ease;
}
.switch input:checked + .switch-slider { background: var(--lt-blue); }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }
.switch input:focus-visible + .switch-slider { outline: 2px solid var(--lt-blue-dark); outline-offset: 2px; }

/* Comparison diffs shown as two separate lists: increases (+) and decreases (−)
   side by side, each a plain list of rows. */
.ms-diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ms-diff-col { display: flex; flex-direction: column; min-width: 0; }
.ms-diff-row {
  display: flex; justify-content: space-between; gap: 6px; align-items: baseline;
  font-size: 0.78rem; padding: 3px 0; border-bottom: 1px solid var(--lt-border);
}
.ms-diff-row:last-child { border-bottom: none; }
.ms-diff-row .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-diff-row .amt { font-weight: 700; white-space: nowrap; }

/* Comparison: two diff blocks side by side (wider), note full width below. */
.ms-blocks.ms-blocks-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .ms-blocks.ms-blocks-2 { grid-template-columns: 1fr; } }
.ms-blocks.ms-blocks-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .ms-blocks.ms-blocks-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ms-blocks.ms-blocks-4 { grid-template-columns: 1fr; } }

/* Months not finished yet (current + future): all text a light grey. */
.ms-table tr.ms-future td,
.ms-table tr.ms-future .ms-total,
.ms-table tr.ms-future .ms-sub,
.ms-table tr.ms-future .ms-pos,
.ms-table tr.ms-future .ms-neg,
.ms-table tr.ms-future .ms-mmg-edit,
.ms-table tr.ms-future .ms-mmg-edit svg,
.ms-table tr.ms-future .ms-note-btn { color: #AEB9C7; }
.ms-table tr.ms-future .ms-mmg-edit .ms-total { border-bottom-color: #CBD5E1; }

/* Inline delete (trash) for your own month note, in the note block header. */
.ms-block h4 .ms-note-del {
  float: right; background: none; border: none; cursor: pointer;
  color: var(--lt-error); padding: 0; line-height: 0;
}
.ms-block h4 .ms-note-del:hover { color: #b91c1c; }

/* Winstmarge bar: diverging from the centre — green right (good), red left. */
.ms-bar { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ms-bar-track { position: relative; width: 84px; height: 14px; background: var(--lt-bg-soft); flex-shrink: 0; }
.ms-bar-track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--lt-border); }
.ms-bar-fill { position: absolute; top: 2px; bottom: 2px; }
.ms-bar-fill.pos { left: 50%; background: var(--lt-success); }
.ms-bar-fill.neg { right: 50%; background: var(--lt-error); }
.ms-bar-label { min-width: 42px; text-align: right; font-weight: 700; }
.ms-table tr.ms-future .ms-bar-fill.pos,
.ms-table tr.ms-future .ms-bar-fill.neg { background: #CBD5E1; }

/* ROTS score colouring: good (green) above the threshold, bad (red) below. */
.rots-good { color: var(--lt-success); font-weight: 700; }
.rots-bad { color: var(--lt-error); font-weight: 700; }

/* ── Forecasting ─────────────────────────────────────────────────────────── */
.radio-group .fc-viewbtn {
  display: inline-flex; align-items: center; padding: 10px 16px; margin: 0;
  border: 1px solid var(--lt-border); background: var(--lt-bg);
  color: var(--lt-ink); text-decoration: none; font-weight: 500; font-size: 0.875rem;
}
.radio-group .fc-viewbtn:hover { border-color: var(--lt-blue); }
.radio-group .fc-viewbtn.active { border-color: var(--lt-blue); background: var(--lt-blue-bg); color: var(--lt-blue-dark); }
.table tr.fc-group th {
  background: var(--lt-bg-soft); font-size: 0.8rem; color: var(--lt-ink);
  text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--lt-border);
}
/* Rowspan grouping cells (Maand / Dienst) + per-group subtotal rows. */
.fc-table td.fc-rowhdr {
  vertical-align: top; font-weight: 700; color: var(--lt-ink);
  background: var(--lt-bg-soft); border-right: 1px solid var(--lt-border); white-space: nowrap;
}
.fc-table td.fc-rowhdr-sub { font-weight: 600; background: var(--lt-surface); }
.ltnr-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; line-height: 1.4;
}
.ltnr-badge.ltnr-lt { color: var(--lt-blue-dark); background: var(--lt-blue-bg); }
.ltnr-badge.ltnr-nr { color: #15803D; background: #DCFCE7; }
.fc-table tr.fc-subtotal td {
  background: var(--lt-bg-soft); font-weight: 700; color: var(--lt-ink);
  border-top: 1px solid var(--lt-border); border-bottom: 2px solid var(--lt-border);
}

/* Auto omzetverwachting: separate counter colour + distinct line styling. */
.ms-linecount.ms-linecount-auto { background: rgba(252, 76, 2, 0.14); color: var(--lt-orange-dark); }
.ms-list tr.ms-autoline td { color: var(--lt-text-muted); }
.ms-auto-tag {
  display: inline-block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--lt-orange-dark); background: rgba(252, 76, 2, 0.1);
  padding: 1px 6px; border-radius: 999px; vertical-align: middle; margin-left: 4px;
}

/* Auto strippenkaart-prognose: rose-tint counter + tag, echoing the chart's
   strippenkaart-prognose colour and distinct from the orange omzetverwachting
   and the blue manual counter. */
.ms-linecount.ms-linecount-strip { background: rgba(248, 113, 113, 0.18); color: #d6455c; }
.ms-auto-tag.ms-strip-tag { color: #d6455c; background: rgba(248, 113, 113, 0.13); }
/* Manual line tags: blue for revenue, purple for cost. */
.ms-auto-tag.ms-tag-omzet  { color: var(--lt-blue-dark); background: var(--lt-blue-bg); }
.ms-auto-tag.ms-tag-kosten { color: #6D28D9; background: rgba(139, 92, 246, 0.14); }
.ms-auto-tag.ms-tag-budget { color: #0F766E; background: rgba(13, 148, 136, 0.14); }
.ms-linecount.ms-linecount-budget { background: rgba(13, 148, 136, 0.16); color: #0F766E; }
/* Winstgevendheid: aantal kostenregels dat uit Exact op deze klant staat. */
/* Winstgevendheid: het aantal regels achter de inkoop dat uit de administratie
   komt — de kostenregels uit Exact plus de post van Ysendoorn. Heette eerst
   -exact, maar dekt nu twee bronnen. */
.ms-linecount.ms-linecount-bron { background: rgba(0, 147, 178, 0.16); color: var(--lt-blue-dark); margin-right: 6px; }
a.ms-linecount-bron { text-decoration: none; }
/* De rij zelf is hier geen link meer; alleen de klantnaam is dat. */
#wg-table.table tr.row-link { cursor: default; }
#wg-table.table tr.row-link:hover td a.wg-costs { color: var(--lt-blue-dark); }

/* Maandstatus line-type legend at the top of the page. */
.ms-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 20px; font-size: 0.82rem; color: var(--lt-text-muted); }
.ms-legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* Customer alias: official Exact name shown lighter behind the chosen name. */
.klant-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.klant-official { color: var(--lt-text-muted); font-weight: 400; font-size: 0.62em; }
.klant-adres-soort { font-size: 0.85em; opacity: 0.75; }

/* Factuurstatus op de klantpagina. */
.factuur-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.factuur-status-verzonden { background: var(--lt-bg-soft); color: var(--lt-text-muted); }
.factuur-status-ontvangen { background: #DCFCE7; color: #166534; }
.factuur-status-achterstallig { background: #FEE2E2; color: #991B1B; }

/* Master strategy plan (tab op de klantpagina). */
/* Twee kolommen: blok 1–5 links (±1/3), blok 6–9 rechts (±2/3). */
.strat-cols { display: grid; grid-template-columns: 1fr 2fr; gap: 28px; align-items: start; }
.strat-col { min-width: 0; }
/* Elk blok een kaart, op het strategieplan en op Accountmanagement. Zonder die
   vlakken worden het twee lange sliertjes invulvelden waarin de koppen wegvallen
   en niet meer te zien is waar een onderdeel begint en ophoudt. Dezelfde kaart
   als de rest van de app, met wat meer lucht dan .card zelf geeft: dit zijn
   formulierblokken en geen tabellen. */
.strat-block {
  margin: 0 0 20px;
  background: var(--lt-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  min-width: 0;
}
.strat-block h3 { margin: 0 0 8px; }
.strat-sub { color: var(--lt-text-muted); font-size: 0.85rem; margin: -4px 0 10px; }
.strat-label { display: block; font-size: 0.85rem; color: var(--lt-ink); margin: 0 0 6px; }
.strat-sublabel { font-weight: 600; margin: 14px 0 6px; font-size: 0.9rem; }
.strat-in, .strat-ta { width: 100%; font-family: inherit; font-size: 0.9rem; padding: 7px 10px;
  border: 1px solid var(--lt-border); border-radius: var(--r-md); background: var(--lt-surface); color: var(--lt-ink); }
.strat-in:focus, .strat-ta:focus { outline: none; border-color: var(--lt-blue); }
.strat-ta { resize: vertical; }
/* De afbeelding van de campagnestructuur bij punt 5: over de volle breedte van
   de kolom, met de keuzeknop eronder. Het bestandsveld zelf is weggehaald —
   je klikt op het label, dat eruitziet als de knoppen eromheen. */
.strat-afb { margin: 10px 0 0; }
.strat-afb-img { display: block; width: 100%; height: auto; margin: 0 0 8px;
  border: 1px solid var(--lt-border); border-radius: var(--r-md); }
/* Is er nog geen afbeelding, dan staat er hidden op — en die moet de display
   hierboven verslaan, want een klasse is specifieker dan de UA-regel voor
   [hidden]. Zonder deze regel staat er een leeg omlijnd vak op de pagina.
   Zelfde fix als bij .am-filter-opt[hidden]. */
.strat-afb-img[hidden] { display: none; }
.strat-afb-kies { position: relative; display: inline-block; cursor: pointer; }
.strat-afb-kies input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.strat-afb-hint { display: block; margin: 6px 0 0; font-size: 0.8rem; }

.strat-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.strat-item { display: grid; gap: 8px; align-items: start; }
.strat-prio { grid-template-columns: minmax(120px, 200px) 1fr auto; }
.strat-doel { grid-template-columns: 1fr 1fr 1fr 1fr 100px auto; }
.strat-meten { grid-template-columns: minmax(120px, 200px) 1fr auto; }
.strat-inv { grid-template-columns: 1fr 1.4fr 120px auto; }
.strat-besl { grid-template-columns: 140px 1fr 1fr 120px auto; }
.strat-kpi { grid-template-columns: 1fr auto; }
/* Kolomkoppen boven de regels. */
.strat-colhead { margin-bottom: 2px; }
.strat-colhead span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--lt-text-muted); }
.strat-del { border: 0; background: transparent; color: var(--lt-text-muted); font-size: 1.2rem;
  line-height: 1; cursor: pointer; padding: 4px 8px; }
.strat-del:hover { color: var(--lt-error); }
/* Blok 3: keuze-opties, en de LT/Klant-vinkjes in de besluitenlijst. */
.strat-opties { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.strat-chk { display: flex; align-items: center; gap: 7px; font-size: 0.88rem; cursor: pointer; }
.strat-besl-door { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* Automatische totalen (blok 6 en 8). */
.strat-total { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lt-border); font-weight: 700; font-size: 0.9rem; }
.strat-total-out { font-variant-numeric: tabular-nums; }
/* Besluitenlijst: over de volle breedte, met een eigen, rustiger uiterlijk. */
.strat-actions { margin-top: 16px; }
.strat-versies { margin-top: 16px; }
.strat-readonly [data-add], .strat-readonly [data-del], .strat-readonly .strat-actions { display: none; }
/* Wijzigingen t.o.v. de vorige versie (alleen bij het bekijken van een oude versie). */
.strat-changed, .strat-changed input, .strat-changed .strat-in, .strat-changed .strat-ta {
  background: #FEF9C3 !important; border-color: #FACC15 !important; }
.strat-changed-row { box-shadow: -3px 0 0 0 #FACC15; padding-left: 6px; }
.strat-legend { background: #FEF9C3; border: 1px solid #FACC15; border-radius: 3px; padding: 0 5px; }
/* ── Instellingen → Kosten zzp'ers ────────────────────────────────────────── */
/* Eén regel per zzp'er: zijn gegevens links, de verwijderknop rechts. Geen
   tabel, want een formulier dat meerdere cellen van een rij omvat is ongeldige
   HTML — zie het commentaar in views/instellingen/zzp_page.php. */
.zzp-regel {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--lt-border);
}
.zzp-regel:last-of-type { border-bottom: 0; }
/* De formulieren op deze pagina zijn invoer en geen filterbalk, dus ze lenen de
   huisstijl van .field -- label boven het veld -- en worden hier alleen naast
   elkaar gezet. Een knop zit niet in een .field: die zou een leeg label nodig
   hebben om uit te lijnen, en met align-items: flex-end staat hij zo al gelijk
   met de velden. De hoogtes kloppen omdat .btn en .field input dezelfde
   verticale padding en tekengrootte hebben. */
.zzp-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0; }
.zzp-form .field { flex: 1 1 180px; min-width: 0; margin-bottom: 0; }
/* Breed genoeg voor "augustus 2026" met de datumknop erachter; smaller klapt
   die tekst af. */
.zzp-form .zzp-smal { flex: 0 1 160px; }
.zzp-form .btn { white-space: nowrap; }
/* Het formulier mag de hele regel gebruiken, anders krimpt het tot zijn
   inhoudsbreedte en valt de knop 'Bewaren' naar de volgende regel. */
.zzp-regel > .zzp-form { flex: 1 1 auto; }

/* ── Klantpagina → Accountmanagement ──────────────────────────────────────── */
/* Het blad leent de .strat-*-klassen voor zijn velden en regels; alleen wat
   hier eigen is staat hieronder. Eén kolom: de blokken lezen van boven naar
   beneden en twee van hen hebben zelf al twee kolommen. */
/* Bovenaan twee kolommen: links de bureaus en het budget, rechts de grafiek.
   Die laatste wil breedte, de twee andere niet — vandaar de scheve verdeling.
   Onder een smal scherm zakken ze onder elkaar. */
/* align-items: stretch (de standaard) en niet start: de kaart met de grafiek is
   korter dan de twee kaarten links, en een kaart die net iets minder hoog is dan
   zijn buur leest als een ongelukje. */
.acc-boven { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 28px; }
.acc-boven-links { min-width: 0; }
.acc-tijd { min-width: 0; }

/* Beide velden delen de ruimte: de linkerkolom is smal, en een vaste breedte
   voor de bedrijfsnaam liet van 'Wat doen ze voor de klant' niets over. */
.acc-bureau { grid-template-columns: minmax(90px, 1fr) 1.2fr auto; }
.acc-target { grid-template-columns: 1fr 170px 150px 1fr auto; }
/* Bedrag en toelichting naast elkaar; het bedrag hoeft niet breed te zijn. */
.acc-budget { display: grid; grid-template-columns: 180px 1fr; gap: 10px 14px; align-items: start; }
/* De twee rijtjes van 'Match met de klant' en 'Samenvatting positie'. */
.acc-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; align-items: start; }
.acc-kolom { min-width: 0; }
.acc-kolom .strat-sublabel { margin-top: 0; }

/* De urengrafiek. Hij schaalt mee met de pagina, maar krimpt niet oneindig:
   onder zijn eigen breedte schuift het vak horizontaal. */
.acc-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 0.8rem; }
.acc-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.acc-swatch { width: 10px; height: 10px; border-radius: 2px; }
.acc-chart-wrap { overflow-x: auto; }
.acc-chart { display: block; max-width: 100%; height: auto; }
/* Het hele maandvak is aanklikbaar, ook waar geen staafje staat: juist bij een
   maand zonder uren wil je kunnen opschrijven waarom. */
.acc-maand { cursor: pointer; }
.acc-maand-vlak { fill: transparent; }
.acc-maand:hover .acc-maand-vlak { fill: rgba(16, 24, 32, 0.04); }
.acc-maand:focus-visible { outline: 2px solid var(--lt-blue); outline-offset: -2px; }
.acc-maand.is-open .acc-maand-vlak { fill: var(--lt-blue-bg); }
/* Een stip onder de maand betekent: hier staat een onderbouwing. Zonder deze
   regel blijft hij staan, want een klasse verslaat de UA-regel voor [hidden]. */
.acc-uitleg-stip[hidden] { display: none; }
/* De onderbouwing van de aangeklikte maand, onder de grafiek. */
.acc-uitleg { margin-top: 12px; }
.acc-uitleg-veld[hidden] { display: none; }
.acc-uitleg-veld {
  padding: 12px 14px; border: 1px solid var(--lt-blue); border-radius: var(--r-md);
  background: var(--lt-blue-bg);
}
.acc-uitleg-veld .strat-label { font-weight: 600; }

@media (max-width: 1000px) {
  .acc-boven { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .acc-budget, .acc-kolommen { grid-template-columns: 1fr; }
  .acc-bureau, .acc-target { grid-template-columns: 1fr auto; }
}

@media (max-width: 900px) {
  .strat-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .strat-prio, .strat-doel, .strat-meten, .strat-inv, .strat-besl { grid-template-columns: 1fr auto; }
  .strat-colhead { display: none; }
}
/* "Nieuwe klant" label on customers with their first revenue this year. */
.klant-new {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--lt-success-bg); color: var(--lt-success);
  font-size: 0.68rem; font-weight: 700; white-space: nowrap; vertical-align: middle;
}

/* Cancelled customers: had revenue but no active subscription/project left. */
.klant-cancelled td, .klant-cancelled td a { color: var(--lt-text-muted); }
.klant-cancelled-badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--lt-border); color: var(--lt-text-muted);
  font-size: 0.68rem; font-weight: 700; white-space: nowrap; vertical-align: middle;
}
.klant-alias-edit { color: var(--lt-text-subtle); }
.klant-alias-edit:hover { color: var(--lt-blue); }

/* Medewerkers: team split bar (share of weekly hours). */
.team-split { display: flex; width: 100%; height: 30px; border-radius: 999px; overflow: hidden; background: var(--lt-bg-soft); }
.team-split-seg { display: flex; align-items: center; justify-content: center; min-width: 0; color: #fff; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.team-split-seg span { padding: 0 10px; overflow: hidden; text-overflow: ellipsis; }
.team-split-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; font-size: 0.85rem; color: var(--lt-text-muted); }
.team-split-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }

/* ROTS filter groups: a small title above each radio-group; team + overhead
   sit side by side with a divider between them. */
.rots-filters { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px 20px; margin: 0 0 12px; }
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--lt-text-muted); font-weight: 600;
}
.filter-divider { width: 1px; align-self: stretch; background: var(--lt-border); }
/* Datumvelden in een filterbalk krijgen dezelfde maat als de keuzelijsten
   ernaast, zodat de rij één lijn houdt. */
.filter-group input[type="date"] {
  font: inherit; color: inherit; padding: 9px 12px; min-height: 42px;
  background: var(--lt-surface); border: 1px solid var(--lt-border);
  border-radius: var(--r-md);
}
.filter-group input[type="date"]:focus { outline: 2px solid var(--lt-blue); outline-offset: -1px; }

/* Strippenkaarten page */
.strip-table th.strip-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.strip-table thead th[data-sort="customer"],
.strip-table thead th[data-sort="project"],
.strip-table thead th.strip-status-th,
.strip-table thead th.strip-uren-th { text-align: left; }
/* Give the bar + numbers just enough room; let Klant/Project take the rest so
   project names stay on one line. */
.strip-table thead th.strip-status-th { width: 300px; }
.strip-table thead th.strip-uren-th { white-space: nowrap; width: 1%; }
.strip-table td.strip-uren-cell { white-space: nowrap; }
.strip-table th.strip-sort:hover { color: var(--lt-ink); }
.strip-arrow { font-size: 0.7rem; color: var(--lt-blue); }
.strip-bar-wrap { display: flex; align-items: center; gap: 12px; }
.strip-bar-lane { width: 150px; flex-shrink: 0; }
.strip-notify { white-space: nowrap; font-size: 0.85rem; }
.strip-bar-pct { font-size: 0.8rem; font-weight: 700; color: var(--lt-ink); min-width: 34px; text-align: right; }
.strip-bar-track {
  height: 14px; min-width: 10px; border-radius: 999px;
  background: var(--lt-blue-bg); overflow: hidden;
}
.strip-bar-fill { height: 100%; background: #67C1DB; border-radius: 999px; }
.strip-bar-label { font-size: 0.8rem; color: var(--lt-text-muted); white-space: nowrap; }
.strip-bar-label strong { color: var(--lt-ink); }
.strip-detail { padding: 12px 4px 4px; }
.strip-chart-legend { display: flex; gap: 18px; font-size: 0.78rem; color: var(--lt-text-muted); margin: 0 0 8px 8px; }
.strip-chart-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }
.strip-chart-legend .sw-line { height: 3px; border-radius: 2px; }
.strip-detail-row > td { background: var(--lt-surface); }

/* ── Dieren quadrant ─────────────────────────────────────────────────────── */
.q-monthbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px 20px; }
/* Every filter bar uses the same dropdown look. */
.q-monthbar select,
.rots-filters select {
  padding: 8px 10px; border: 1px solid var(--lt-border); border-radius: var(--r-md);
  background: var(--lt-surface); color: var(--lt-ink); font-size: 0.9rem; min-width: 160px;
}
.q-monthbar select:focus,
.rots-filters select:focus { outline: none; border-color: var(--lt-blue); }
.q-cmp-toggle { display: inline-flex; align-items: center; gap: 8px; }

.q-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.85rem; color: var(--lt-text-muted); }
.q-badge { padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.q-badge.q-new { background: var(--lt-success-bg); color: var(--lt-success); }
.q-badge.q-moved { background: var(--lt-blue-bg); color: var(--lt-blue-dark); }
.q-badge.q-removed { background: var(--lt-bg-soft); color: var(--lt-text-muted); }

.q-wrap { display: flex; gap: 8px; align-items: stretch; }
.q-axis-y {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 8px 0; width: 30px; flex: none;
}
.q-axis-y .q-axis-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 0.8rem; font-weight: 600; color: var(--lt-text-muted); text-align: center;
}
.q-axis-x { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.q-axis-x .q-axis-label { flex: 1; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--lt-text-muted); }
.q-axis-sign { font-size: 1.1rem; font-weight: 700; color: var(--lt-text-muted); line-height: 1; }
.q-grid-col { flex: 1; display: flex; flex-direction: column; }

.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q-box {
  border: 2px solid var(--q-color, var(--lt-border)); border-radius: var(--r-lg, 12px);
  background: var(--lt-surface); display: flex; flex-direction: column; min-height: 190px; overflow: hidden;
}
.q-box-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--lt-border); background: color-mix(in srgb, var(--q-color) 8%, var(--lt-surface));
}
.q-box-emoji { font-size: 1.15rem; line-height: 1; }
.q-box-title { font-weight: 700; color: var(--lt-ink); }
.q-box-count {
  margin-left: auto; min-width: 24px; text-align: center; padding: 1px 8px; border-radius: 999px;
  background: var(--q-color); color: #fff; font-size: 0.8rem; font-weight: 700;
}
.q-box-body {
  flex: 1; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
  transition: background 0.12s ease;
}
.q-dropover { background: color-mix(in srgb, var(--q-color, var(--lt-blue)) 12%, transparent); }

.q-chip, .q-listrow { user-select: none; }
.q-chip {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  background: var(--lt-bg-soft); border: 1.5px solid transparent; cursor: grab; font-size: 0.85rem;
  color: var(--lt-text); white-space: nowrap; max-width: 100%;
}
.q-chip .q-chip-name { overflow: hidden; text-overflow: ellipsis; }
/* Company names link to the customer page but read as plain text. */
a.q-chip-name, a.q-listrow-name { color: inherit; text-decoration: none; cursor: pointer; }
a.q-chip-name:hover, a.q-listrow-name:hover { text-decoration: underline; }
.q-chip:hover { border-color: var(--q-color, var(--lt-blue)); }
.q-chip[draggable="true"]:active { cursor: grabbing; }
.q-chip.q-dragging, .q-listrow.q-dragging { opacity: 0.45; }
.q-chip[data-diff="new"] { border-color: var(--lt-success); box-shadow: 0 0 0 1px var(--lt-success); }
.q-chip[data-diff="moved"] { border-color: var(--lt-blue); box-shadow: 0 0 0 1px var(--lt-blue); }
.q-chip-ghost { opacity: 0.5; border: 1.5px dashed var(--lt-text-muted); background: transparent; cursor: default; }
.q-chip-ghost .q-chip-name { text-decoration: line-through; }
/* Cancelled customers: greyed with an "Opgezegd" label. */
.q-chip.q-cancelled, .q-listrow.q-cancelled { opacity: 0.75; }
.q-chip.q-cancelled .q-chip-name, .q-listrow.q-cancelled .q-listrow-name { color: var(--lt-text-muted); }
.q-cancelled-badge {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: var(--lt-border); color: var(--lt-text-muted); font-size: 0.65rem; font-weight: 700; white-space: nowrap;
}

.q-list { display: flex; flex-direction: column; gap: 6px; }
.q-list.q-list-ignored { opacity: 0.85; }
.q-listrow {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border: 1px solid var(--lt-border); border-radius: var(--r-md); background: var(--lt-surface); cursor: grab;
}
.q-listrow:hover { border-color: var(--lt-blue); }
.q-listrow[draggable="true"]:active { cursor: grabbing; }
.q-listrow-name { flex: 1; font-weight: 500; }
.q-listrow-vals { display: flex; gap: 16px; font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.q-listrow-ignored .q-listrow-name { color: var(--lt-text-muted); }
.q-ignore, .q-restore {
  border: none; background: transparent; color: var(--lt-text-muted); cursor: pointer;
  padding: 4px; display: inline-flex; border-radius: var(--r-sm, 6px);
}
.q-ignore svg, .q-restore svg { width: 17px; height: 17px; }
.q-ignore:hover { color: var(--lt-error); background: var(--lt-error-bg); }
.q-restore:hover { color: var(--lt-blue-dark); background: var(--lt-blue-bg); }

.q-animal { font-size: 1.05rem; vertical-align: middle; margin-right: 2px; }

.q-pos {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--q-color) 12%, var(--lt-surface));
  border: 1.5px solid var(--q-color); color: var(--lt-ink); font-weight: 600;
}
.q-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.q-hist li {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--lt-border); font-size: 0.9rem;
}
.q-hist li:last-child { border-bottom: none; }
.q-hist-date { color: var(--lt-text-muted); min-width: 92px; font-variant-numeric: tabular-nums; }
.q-hist-move { font-weight: 500; }

.q-chart-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 0.8rem; color: var(--lt-text-muted); margin: 0 0 10px; }
.q-chart-legend .q-sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

.q-tip {
  position: fixed; z-index: 60; background: var(--lt-ink); color: #fff; padding: 6px 10px;
  border-radius: var(--r-md); font-size: 0.8rem; pointer-events: none; max-width: 340px; box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,0.15));
}

@media (max-width: 640px) {
  .q-box { min-height: 150px; }
  .q-listrow-vals { flex-direction: column; gap: 2px; text-align: right; }
}