/* =========================================================================
   HappyNurse Match — stylesheet
   HappyNurse huisstijl: sky-blue primary + oranje accent, warme Nunito.
   ========================================================================= */

/* Zorg dat [hidden] altijd wint, ook als een class display overschrijft */
[hidden] { display: none !important; }

/* =========================================================================
   Dagdeel-iconen — eigen icon-fonts uit HappyOne (hn-app-mobile).
   Koppeling op de daytime-naam uit s_plan.t_shift_const_daytime.
   Zie timeOfDayIcon.dart. Gebruik via dagdeelIcon(name) in dagdeel.js.
   ========================================================================= */
@font-face {
  font-family: "Icodaytime";
  src: url("/static/fonts/icodaytime.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "IcomoonUren";
  src: url("/static/fonts/icomoon-uren.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "BedIcon";
  src: url("/static/fonts/bedIcon.ttf") format("truetype");
  font-display: swap;
}

.dagdeel-ico {
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  vertical-align: -1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
  color: var(--color-text);
  font-size: 1.05em;
  margin-left: 5px;
}
.dagdeel-ico--ochtend::before     { font-family: "Icodaytime";  content: "\e801"; }
.dagdeel-ico--middag::before      { font-family: "Icodaytime";  content: "\e800"; }
.dagdeel-ico--dag::before         { font-family: "IcomoonUren"; content: "\e900"; }
.dagdeel-ico--avond::before       { font-family: "IcomoonUren"; content: "\e901"; }
.dagdeel-ico--nacht::before       { font-family: "IcomoonUren"; content: "\e902"; }
.dagdeel-ico--slaapdienst::before { font-family: "BedIcon";     content: "\e96a"; }

/* =========================================================================
   Datumkiezer (gedeeld: /flexwerker-diensten dag→periode, /diensten week→dag)
   De pill toont de nette datum; het native date/week-input ligt er transparant
   overheen zodat een klik overal op de pill de systeemkalender opent.
   ========================================================================= */
.datepick__mode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.datepick__field { display: flex; align-items: center; gap: 8px; }
.datepick__flabel { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.datepick__arrow { color: var(--color-text-muted); flex-shrink: 0; }
.datepick__pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer;
  font: inherit; color: var(--color-text);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.datepick__pill:hover { border-color: var(--color-primary); background: var(--color-primary-softer); }
.datepick__pill:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-softer); }
.datepick__cal { color: var(--color-primary); flex-shrink: 0; }
.datepick__chev { color: var(--color-text-muted); flex-shrink: 0; }
.datepick__label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.datepick__pill--empty .datepick__label { font-weight: 600; color: var(--color-text-muted); }
.datepick__native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: none; padding: 0; margin: 0;
}
.datepick__native::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.datepick__link {
  border: none; background: none; padding: 4px 2px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--color-primary-dark);
}
.datepick__link:hover { color: var(--color-primary); text-decoration: underline; }

/* =========================================================================
   Flexwerker-switcher — "Wijzig"-knop naast de naam + zoek-popover
   ========================================================================= */
.fw-switch-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  background: var(--color-surface); color: var(--color-primary-dark);
  border: 1.5px solid var(--color-border);
  transition: border-color .12s, background .12s, color .12s;
  vertical-align: middle;
}
.fw-switch-btn:hover { border-color: var(--color-primary); background: var(--color-primary-softer); color: var(--color-primary); }
.fw-switch-btn svg { width: 13px; height: 13px; }

.fw-switch-pop {
  position: fixed; z-index: 500; width: 320px; max-width: calc(100vw - 24px);
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.fw-switch-pop[hidden] { display: none; }
.fw-switch-pop__input {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; color: var(--color-text);
}
.fw-switch-pop__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-softer); }
.fw-switch-pop__listbox { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.fw-switch-pop__item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: var(--radius-sm); cursor: pointer;
}
.fw-switch-pop__item.is-active { background: var(--color-primary-softer); }
.fw-switch-pop__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-switch-pop__meta { font-size: 11px; color: var(--color-text-muted); }
.fw-switch-pop__empty, .fw-switch-pop__footer { padding: 10px; font-size: 12px; color: var(--color-text-muted); text-align: center; }

:root {
  /* HappyNurse huisstijl-kleuren */
  --color-primary: #00AEEF;          /* HappyNurse sky-blue */
  --color-primary-dark: #0085B8;
  --color-primary-darker: #006991;
  --color-primary-soft: #E0F5FD;
  --color-primary-softer: #F0FAFE;

  /* Werkhistorie-rij (PGR-319) — laag 2, structureel. ÉÉN token voor alle vier de
     niveaus; intensiteit uitsluitend via het AANTAL stippen, nooit via verzadiging of
     open-versus-gevuld. Zelfde hue als het planning-blauw (197° tegen 196°) maar
     onverzadigd (57% tegen 100%), zodat planning het sterkste blauwe signaal blijft.
     Contrast op wit 3,44:1 — informatiedragend grafisch element, geen decoratie.
     Let op: "planning-token minus twee stappen" uit PGR-319 comment 45356 landt op
     --color-primary (#00AEEF) met 2,53:1 en haalt die ~3:1-eis niet; daarom een eigen
     token (PO-go comment 45360, besluit 1). */
  --color-hist: #4C93B0;

  /* Actieve-opdracht-rij (PGR-308) — laag 3, verplichting.
     Kleur overgenomen van HappyOne, waar de intercedent de opdracht vandaan kent:
     #b9d5ff is de basiskleur van .app-planner-assignments-block-* in de planner
     (hn-app-main/src/assets/sass/custom/_planner.scss). Wij nemen ALLEEN die basis over,
     niet de statusvarianten: HappyOne varieert alpha (70/90) en randstijl (solid/dashed)
     voor bevestigd/onbevestigd/gewerkt, en dat onderscheid hoort hier niet — de rij zegt
     "er ligt een verplichting", niet in welke status die staat.
     ⚠ De VULLING kan het contrast hier niet dragen en dat is meetbaar, geen mening:
     #b9d5ff geeft 1,50:1 op wit, met HappyOne's eigen alpha zelfs 1,18–1,25:1. Ver onder
     de ~3:1 die PGR-319 aanhoudt voor informatiedragende grafiek. In HappyOne werkt het
     omdat het blok ín een omrande tabelcel van de planner staat; onze balk zweeft op een
     open card. Daarom komt de rand mee (#98a2b3, ook van HappyOne) en dóet die het werk:
     de vulling levert de herkenning, de rand de leesbaarheid.
     Dark heeft geen HappyOne-equivalent — die tool heeft geen darkmode. #b9d5ff vol
     dekkend zou daar 10,69:1 halen en het luidste element van de card worden, luider dan
     de Werkpatroon-stippen (7,09:1): een omkering van de rangorde uit 45438. De
     dark-waarde is daarom HappyOne's eigen alpha-90-recept over ONS cardoppervlak
     gerekend — zelfde kleur, zelfde methode, ons vlak. Zie het dark-blok. */
  --color-opdr: #b9d5ff;
  --color-opdr-rand: #98a2b3;


  --color-accent: #F7941D;           /* HappyNurse warm oranje (CTAs) */
  --color-accent-dark: #E07B0E;
  --color-accent-soft: #FEF3E4;

  --color-bg: #F7FAFC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1F5F8;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E0;

  --color-text: #1A365D;             /* Diep marineblauw, warmer dan pure zwart */
  --color-text-muted: #4A5568;
  --color-text-soft: #718096;

  --color-success: #38A169;
  --color-warning: #ED8936;
  --color-danger: #E53E3E;

  --color-whatsapp: #25D366;
  --color-phone: #3182CE;

  /* Shell */
  --color-sidebar: #EEF5FA;
  --color-topbar: #FFFFFF;

  /* Surfaces — uitgebreid */
  --color-surface-soft: #FAFCFD;
  --color-surface-elevated: #FFFFFF;
  /* Terugtredend oppervlak: "hier is niets" (PGR-336, dagkaartjes open/dicht).
     Semantisch het tegendeel van --color-surface-elevated en daarom een eigen token:
     in BEIDE modi wijst het weg van het cardoppervlak, richting de pagina-achtergrond.
     In lichte modus is dat dezelfde waarde als --color-surface-alt; in dark kán dat niet,
     want --color-surface-alt gaat daar juist omhóog (#1A2D42 boven card #0F223B). Gebruik
     --color-surface-alt hier dus niet als alias. */
  --color-surface-recessed: #F1F5F8;

  /* Borders — uitgebreid */
  --color-border-soft: rgba(226, 232, 240, 0.5);
  --color-border-dashed: #C8D8E8;
  /* Rand van een inert element waarvan de dimming op de kinderen zit in plaats van op het
     element zelf (PGR-336, dagkaartjes). Waarde = --color-border op 55% over het
     cardoppervlak, dus exact wat de rand rendert wanneer `opacity: 0.55` nog op het element
     staat. Niet --color-border-dashed gebruiken: die is een stuk donkerder (#C8D8E8) en
     maakt de lege staat crisper dan hij was. */
  --color-border-dimmed: #EFF2F7;

  /* Primary states */
  --color-primary-hover: #009ED6;

  /* Status-soft */
  --color-success-soft: #EFF9F4;
  --color-warning-soft: #FFF7EE;
  --color-danger-soft: #FFF5F5;

  /* Purple — voor MOCK-pil */
  --color-purple: #7C3AED;
  --color-purple-soft: #F3EFFE;

  /* Chart */
  --color-chart-aangeboden: #00AEEF;
  --color-chart-succesvol: #38A169;
  --color-chart-grid: #EEF2F7;
  --color-chart-axis: #718096;

  /* Schaduwen — ietsje warmer, met blauw-tint */
  --shadow-sm: 0 1px 2px rgba(26, 54, 93, 0.05), 0 1px 3px rgba(26, 54, 93, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 54, 93, 0.06), 0 2px 6px rgba(26, 54, 93, 0.05);
  --shadow-lg: 0 12px 32px rgba(26, 54, 93, 0.10), 0 4px 12px rgba(26, 54, 93, 0.06);
  --shadow-card: 0 4px 16px rgba(26, 54, 93, 0.08), 0 2px 6px rgba(26, 54, 93, 0.05);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;                /* Ronder dan eerst — HappyNurse-feel */

  /* Typografie — Nunito: warm, rond, HappyNurse-feel */
  --font-sans: 'Nunito', 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --duration-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --duration-med: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------------------- */
/* Reset & basis                                                             */
/* ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.bg-orb--one {
  width: 520px; height: 520px;
  background: radial-gradient(circle, #B3E6F8 0%, transparent 70%);
  top: -180px; right: -140px;
}
.bg-orb--two {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #FDE0B8 0%, transparent 70%);
  bottom: -120px; left: -100px;
  opacity: 0.4;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
p { margin: 0; }

/* ------------------------------------------------------------------------- */
/* Header — HappyNurse-stijl met duidelijke primary                           */
/* ------------------------------------------------------------------------- */
.header {
  position: relative;
  z-index: 2;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.header__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand__mark {
  width: 46px; height: 46px;
  border-radius: 50%;                 /* Rond, HappyNurse-feel */
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 174, 239, 0.35);
}
.brand__mark svg,
.brand__mark img { width: 28px; height: 28px; }
.brand__name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-primary-darker);
}
.brand__name span {
  color: var(--color-accent);
  font-weight: 700;
}
.brand__tagline {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-top: 2px;
}
.header__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
}
.header__status .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-warning);
  box-shadow: 0 0 0 3px rgba(237, 137, 54, 0.2);
}
.header__status.is-ok .dot { background: var(--color-success); box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.2); }
.header__status.is-err .dot { background: var(--color-danger); box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.2); }

/* Freshness indicator */
.freshness-ind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.freshness-ind--ok      { color: var(--color-text-muted); background: transparent; }
.freshness-ind--warn    { color: #92400E; background: #FEF3E4; border-color: #F59E0B; }
.freshness-ind--stale   { color: #C53030; background: #FFF5F5; border-color: #FED7D7; }
.freshness-ind--unknown { color: var(--color-text-soft); background: var(--color-surface-alt); border-color: var(--color-border); }

/* ------------------------------------------------------------------------- */
/* Container                                                                 */
/* ------------------------------------------------------------------------- */
.container {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 36px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ------------------------------------------------------------------------- */
/* Cards                                                                     */
/* ------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);           /* Ronder */
  padding: 28px 30px;
  box-shadow: var(--shadow-sm);
  animation: cardIn 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section-head {
  margin-bottom: 20px;
}
.section-head--results {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.view-toggle {
  display: flex;
  gap: 2px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 3px;
  flex-shrink: 0;
}
.view-toggle__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.view-toggle__btn.is-active {
  background: #fff;
  color: var(--color-primary-darker);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.view-toggle__btn:hover:not(.is-active) { color: var(--color-text); }
.section-head__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
}
.section-head__sub {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-weight: 500;
}
.section-head__week {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* ------------------------------------------------------------------------- */
/* Filter-grid — met harde breedte-lockdown voor lange klantnamen            */
/* ------------------------------------------------------------------------- */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* minmax(0,…) is de truc */
  gap: 14px;
}
@media (min-width: 1024px) {
  .filter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;                /* Extra verzekering tegen grid-blow-out */
}
.field__label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.field__select,
.field__input {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 11px 36px 11px 14px;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
  cursor: pointer;

  /* Truncation voor lange option-teksten (Chrome toont de gekozen value) */
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.field__input {
  background-image: none;
  padding-right: 14px;
  cursor: text;
}
.field__select:hover, .field__input:hover {
  border-color: var(--color-border-strong);
}
.field__select:focus, .field__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.15);
}
/* Option-elementen in de dropdown zelf kunnen altijd breed zijn */
.field__select option {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  padding: 4px 8px;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dashed var(--color-border);
  flex-wrap: wrap;
}
.result-count {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-left: auto;
  font-weight: 600;
}

/* Geïntegreerde filter bar */
.card--diensten { padding: 0; overflow: hidden; }
.filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  flex-wrap: wrap;
}
.filters-bar__controls {
  display: flex;
  gap: 8px;
  flex: 1 1 0;
  flex-wrap: wrap;
  min-width: 0;
}
.filters-bar__controls .field__select,
.filters-bar__controls .field__input {
  flex: 1;
  min-width: 110px;
  max-width: 180px;
  font-size: 13px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.filters-bar__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}
.filters-bar__meta .result-count { margin-left: 0; }
.aw-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}
.aw-sort-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: var(--color-primary-softer);
}
.aw-sort-btn.is-active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-darker);
}
.aw-sort-icon { transition: transform 0.18s; flex-shrink: 0; }
.card--diensten .table-wrap { border-radius: 0; }

/* ── Filter chips ─────────────────────────────────────────────────── */
.fchip.is-hidden { display: none; }
.fchip {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
}

.fchip__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
}
.fchip__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: var(--color-primary-softer);
}
.fchip__btn:hover .fchip__plus {
  background: var(--color-primary);
  color: #fff;
}
.fchip.is-open .fchip__btn {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.18);
}

/* Filled state: split-pill with clear button */
.fchip.is-active .fchip__btn {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-darker);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.fchip.is-active.is-open .fchip__btn {
  box-shadow: none;
}

.fchip__label-text { font-weight: 700; }
.fchip__sep { font-weight: 400; color: var(--color-primary-dark); }
.fchip__val-text { font-weight: 600; }

.fchip__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--color-border);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-text-soft);
  transition: background var(--duration-fast), color var(--duration-fast);
}

.fchip__clear {
  align-items: center;
  justify-content: center;
  padding: 0 10px 0 6px;
  background: var(--color-primary-soft);
  border: 1.5px solid var(--color-primary);
  border-left: none;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-darker);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
  line-height: 1;
}
.fchip__clear:not([hidden]) { display: inline-flex; }
.fchip__clear:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Floating panel — fixed so it escapes card's overflow:hidden.
   NOTE: display is NOT set here — [hidden] attr controls display:none via UA sheet.
   .fchip__panel { display:flex } would override [hidden] and show all panels. */
.fchip__panel {
  position: fixed;
  z-index: 300;
  min-width: 220px;
  max-width: 340px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  flex-direction: column;
  gap: 6px;
}
.fchip__panel:not([hidden]) {
  display: flex;
}

.fchip__search {
  width: 100%;
  padding: 7px 11px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-surface-alt);
  outline: none;
  transition: border-color var(--duration-fast);
}
.fchip__search:focus { border-color: var(--color-primary); }

/* PGR-349 — vraagregel boven de opties in een filterpaneel.
   "Ja" en "Nee" zijn zonder de vraag geen antwoord, en een horizon (hier 8 weken) past niet
   op een chip. De regel staat daarom ín het paneel, waar je hem leest op het moment dat je
   kiest. De ⓘ ernaast gaat naar de handleiding voor de rest van het verhaal.
   Zelfde grootte en tint als de chip-aantallen, zodat het uitleg blijft en geen kop wordt. */
.fchip__uitleg {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 2px 10px 6px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: normal;
}
.fchip__help {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  margin-top: 1px; color: var(--color-text-soft); text-decoration: none;
}
.fchip__help:hover, .fchip__help:focus-visible { color: var(--color-primary); }

.fchip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}
.fchip__list:empty::after {
  content: "Geen opties";
  display: block;
  padding: 10px;
  font-size: 13px;
  color: var(--color-text-soft);
  text-align: center;
}
.fchip__list li {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.fchip__list li:hover { background: var(--color-primary-softer); color: var(--color-primary-dark); }
/* PGR-349 — de opties zijn focusbaar (roving tabindex in fchip.js), dus ze hebben een
   zichtbare focus nodig. Een ring en niet alleen een achtergrond: hover en focus moeten uit
   elkaar te houden zijn, anders lijkt de muis de toetsenbordpositie te bepalen.
   `:focus-visible` en niet `:focus`, zodat een muisklik geen ring achterlaat. */
.fchip__list li:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background: var(--color-primary-softer);
  color: var(--color-primary-dark);
}
.fchip__list li.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary-darker);
  font-weight: 700;
}
.fchip__list li[hidden] { display: none; }

/* Week chip — styled like a pill wrapping a native date input */
.fchip--week {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
}
.fchip--week:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-softer);
}
.fchip--week:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.18);
}
.fchip__week-icon { color: var(--color-text-soft); flex-shrink: 0; }
.fchip--week input[type="week"] {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  outline: none;
  padding: 0;
  min-width: 120px;
}
.table-loading {
  text-align: center;
  padding: 40px 0;
  color: var(--color-text-soft);
  font-size: 14px;
}

/* ------------------------------------------------------------------------- */
/* Buttons                                                                   */
/* ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 999px;                 /* Volledig rond — HappyNurse-stijl */
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast);
  letter-spacing: 0;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--color-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.3);
}
.btn--color-primary:active:not(:disabled) { transform: translateY(0); }

.btn--color-accent {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(247, 148, 29, 0.35);
}
.btn--color-accent:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(247, 148, 29, 0.45);
}

.btn--large { padding: 14px 30px; font-size: 15px; }

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.btn--ghost:hover { background: var(--color-surface-alt); color: var(--color-text); border-color: var(--color-border-strong); }

.btn--compact { padding: 10px 14px; }
.btn--sm { padding: 7px 14px; font-size: 13px; }

/* ------------------------------------------------------------------------- */
/* Tabellen                                                                  */
/* ------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  margin: 0 -6px;
}
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  min-width: 760px;
}
.data-table th {
  text-align: left;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 12px 16px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table th:first-child { border-top-left-radius: var(--radius-md); }
.data-table th:last-child  { border-top-right-radius: var(--radius-md); }
/* Eerste kolom inspringen zoals op /flexwerkers (PGR-340, verzoek PO).
   Gemeten vóór: de tekst van de eerste kolom begon 11px van de cardrand, tegen 29px op
   /flexwerkers — de klantnaam op /opdrachten/kandidaten en de datum op /diensten stonden
   daardoor bijna tegen de menubalk. De 34px is niet willekeurig: 28px cardinspringing (wat
   `.fw-table` bereikt met een wrapper op `padding: 0 28px` en `padding-left: 0` op de eerste
   cel) plus 6px om de negatieve marge van `.table-wrap` te compenseren. Verandert die marge,
   dan verandert dit getal mee. */
.data-table th:first-child,
.data-table td:first-child { padding-left: 34px; }
.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
  font-weight: 500;
}
.data-table tbody tr {
  cursor: pointer;
  transition: background var(--duration-fast);
}
.data-table tbody tr:hover td { background: var(--color-primary-softer); }
.data-table tbody tr.is-selected td {
  background: var(--color-primary-soft);
  color: var(--color-primary-darker);
  font-weight: 700;
}
.data-table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 0 var(--color-primary);
}
.data-table tbody tr:last-child td { border-bottom: none; }

.align-right { text-align: right; }

.status-pill {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--color-primary-soft);
  color: var(--color-primary-darker);
}
.status-pill--neutral { background: var(--color-surface-alt); color: var(--color-text-muted); }
.status-pill--warm { background: var(--color-accent-soft); color: var(--color-accent-dark); }

.th--filterable { position: relative; white-space: nowrap; }
.col-filter-btn {
  background: none; border: none; cursor: pointer;
  padding: 2px 3px; margin-left: 4px;
  color: var(--color-text-soft); border-radius: var(--radius-sm);
  vertical-align: middle; line-height: 0;
  transition: color var(--duration-fast);
}
.col-filter-btn:hover { color: var(--color-primary); }
.col-filter-btn.is-active { color: var(--color-primary); }
.col-filter-btn.is-active svg { fill: var(--color-primary-soft); }
.col-filter-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  z-index: 50; min-width: 160px; padding: 4px;
}
.col-filter-option {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 7px 12px;
  cursor: pointer; border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font-sans); color: var(--color-text);
  transition: background var(--duration-fast);
}
.col-filter-option:hover { background: var(--color-surface-alt); }
.col-filter-option.is-active { background: var(--color-primary-softer); color: var(--color-primary-dark); font-weight: 700; }
.col-filter-option--clear { color: var(--color-text-soft); border-top: 1px solid var(--color-border); margin-top: 2px; padding-top: 9px; }

.data-table--results tbody tr { cursor: default; }
.data-table--results tbody tr:hover td { background: transparent; }

.rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 13px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}
.rank--1 {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(247, 148, 29, 0.4);
}
.rank--2 { background: var(--color-primary-soft); color: var(--color-primary-darker); }
.rank--3 { background: var(--color-primary-softer); color: var(--color-primary-dark); }

.person {
  display: flex;
  align-items: center;
  gap: 12px;
}
.person__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #B3E6F8, #5FCDF0);
  color: var(--color-primary-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 174, 239, 0.15);
}
.person__name {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}
.person__id {
  font-size: 12px;
  color: var(--color-text-soft);
  margin-top: 2px;
  font-weight: 500;
}

.score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
}
.score__bar {
  width: 68px; height: 6px;
  background: var(--color-surface-alt);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.score__bar-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 3px;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.score--strong { color: var(--color-primary-darker); }
.score--strong .score__bar-fill { background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); }
.score--good   { color: #007BA3; }
.score--good   .score__bar-fill { background: linear-gradient(90deg, #5FCDF0, var(--color-primary)); }
.score--ok     { color: var(--color-accent-dark); }
.score--ok     .score__bar-fill { background: linear-gradient(90deg, #FFC076, var(--color-accent)); }
.score--weak   { color: var(--color-danger); }
.score--weak   .score__bar-fill { background: linear-gradient(90deg, #FEB2B2, var(--color-danger)); }
/* Geen score (null) — eigen neutrale band, niet de zwak-tak (PGR-350 B5). */
.score--none   { color: var(--color-text-soft, #94a3b8); }
.score--none   .score__bar-fill { background: var(--color-border); }

/* PGR-471 — motivatie-popover op /flexwerker-diensten. De knop staat naast de score omdat de
   motivatie die score toelicht; hij blijft gedempt tot de rij of de knop aandacht krijgt,
   zodat een kolom van 200 rijen niet uit uitroeptekens bestaat. */
.score-cel { display: inline-flex; align-items: center; gap: 8px; }
.motiv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
  color: var(--color-text-soft, #94a3b8);
  opacity: .45;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}
tr:hover .motiv-btn { opacity: 1; }
.motiv-btn:hover,
.motiv-btn:focus-visible {
  opacity: 1;
  color: var(--color-primary-dark);
  background: var(--color-primary-softer);
}
.motiv-pop {
  position: fixed; z-index: 60;
  max-width: 340px;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
  font-size: 12.5px; line-height: 1.45;
  color: var(--color-text);
}
.motiv-pop[hidden] { display: none; }

.motivation {
  color: var(--color-text-muted);
  font-size: 13px;
  max-width: 380px;
  line-height: 1.45;
  font-weight: 500;
}

.actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;                 /* Rond */
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast);
  text-decoration: none;
}
.icon-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.icon-btn--color-whatsapp {
  background: var(--color-whatsapp);
  border-color: var(--color-whatsapp);
  color: #fff;
}
.icon-btn--color-whatsapp:hover { background: #1EB055; border-color: #1EB055; }
.icon-btn--color-phone {
  background: var(--color-phone);
  border-color: var(--color-phone);
  color: #fff;
}
.icon-btn--color-phone:hover { background: #2B6CB0; border-color: #2B6CB0; }
.icon-btn--disabled {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-soft);
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------------------------------------------------- */
/* Card-varianten                                                            */
/* ------------------------------------------------------------------------- */
.card--action {
  background: linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 100%);
  border: none;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.card--action .action-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
/* PGR-340 — HappyOne-link en de actieknop als één groep rechts in de blauwe balk.
   Niet met `margin-left: auto` op de link: `.action-inner` staat op `space-between`, en in
   die combinatie eindigde de link rechts VAN de knop in plaats van ernaast. Een eigen
   flex-groep maakt de volgorde eenduidig, ongeacht hoeveel items de balk krijgt. */
.action-acties { display: flex; align-items: center; gap: 14px; }
/* Secundaire knop óp de blauwe actiebalk. .btn--ghost kan hier niet: die zet de tekst op
   --color-text-muted, wat op de blauwe gradient wegvalt. Wit-op-transparant met een witte
   rand houdt de knop duidelijk secundair naast de oranje primaire actie, en het HappyOne-
   icoon leest tegen de lichte rand. */
.btn--op-donker {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  text-decoration: none;
}
.btn--op-donker:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #fff;
  color: #fff;
}
/* Het favicon is een gekleurd plaatje op een halftransparante ondergrond; een wit vlakje
   eronder houdt het leesbaar zonder de knop zwaarder te maken dan de primaire actie. */
.btn--op-donker img { background: #fff; border-radius: 4px; padding: 1px; }

.action-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}
.action-shift {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.card--results {
  background:
    linear-gradient(180deg, var(--color-primary-softer) 0%, var(--color-surface) 140px);
}

.source-badge {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-darker);
  background: var(--color-primary-soft);
  padding: 5px 12px;
  border-radius: 999px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
}

/* ------------------------------------------------------------------------- */
/* Assistant                                                                 */
/* ------------------------------------------------------------------------- */
.assistant {
  margin-top: 8px;
  padding: 30px 32px;
  background: linear-gradient(135deg, var(--color-primary-softer) 0%, var(--color-accent-soft) 100%);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-xl);
  display: flex;
  gap: 24px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.assistant::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 148, 29, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.assistant__avatar {
  position: relative;
  flex-shrink: 0;
}
.assistant__avatar img {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: var(--shadow-md);
  display: block;
}
.assistant__avatar-fallback {
  display: none;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.assistant__bubble {
  flex: 1;
  min-width: 0;
  position: relative;
}
.assistant__greeting {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}
.assistant__greeting em {
  font-style: normal;
  color: var(--color-accent-dark);
  background: #fff;
  padding: 0 6px;
  border-radius: 4px;
}

.assistant__row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.assistant__row input {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 13px 18px;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  transition: all var(--duration-fast);
}
.assistant__row input::placeholder { color: var(--color-text-soft); }
.assistant__row input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.15);
}

.assistant__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-darker);
  background: #fff;
  border: 1px solid var(--color-primary-soft);
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--duration-fast);
}
.chip:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------------- */
/* Footer                                                                    */
/* ------------------------------------------------------------------------- */
.footer {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 32px 32px;
  font-size: 12.5px;
  color: var(--color-text-soft);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-weight: 500;
}
.footer__env { font-family: 'SF Mono', Menlo, Consolas, monospace; }

/* ------------------------------------------------------------------------- */
/* Toast                                                                     */
/* ------------------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-text);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 600;
  opacity: 0;
  transition: all var(--duration-med);
  max-width: 480px;
}
.toast.is-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast--error { background: var(--color-danger); }

/* ------------------------------------------------------------------------- */
/* Loading                                                                   */
/* ------------------------------------------------------------------------- */
.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.data-table tbody tr {
  animation: rowIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.data-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.data-table tbody tr:nth-child(2) { animation-delay: 40ms; }
.data-table tbody tr:nth-child(3) { animation-delay: 80ms; }
.data-table tbody tr:nth-child(4) { animation-delay: 120ms; }
.data-table tbody tr:nth-child(5) { animation-delay: 160ms; }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------------- */
/* Responsive                                                                */
/* ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .container { padding: 24px 18px 40px; }
  .card { padding: 22px 20px; }
  .header__inner { padding: 14px 20px; }
  .brand__tagline { display: none; }
  .assistant { flex-direction: column; padding: 22px 20px; }
  .card--action .action-inner { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   MATCH DETAIL PAGE
   ========================================================================= */

.brand--link { text-decoration: none; color: inherit; }

.container--match { gap: 32px; }
#content { display: flex; flex-direction: column; gap: 32px; }

/* --- MATCH PAGE GRID (unified 3-column layout) --- */
.match-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 20px;
}
.match-page-grid__wide { grid-column: 1 / 3; }
.match-page-grid__cap  { grid-column: 3 / 4; grid-row: 2 / 4; }
.match-page-grid__full { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .match-page-grid { grid-template-columns: 1fr; }
  .match-page-grid__wide,
  .match-page-grid__cap,
  .match-page-grid__full { grid-column: 1; grid-row: auto; }
}

.loading-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 80px 20px;
  color: var(--color-text-muted); font-weight: 600;
}
.loading-spin {
  width: 32px; height: 32px;
  border: 3px solid var(--color-primary-soft);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

/* PGR-471 — laadtoestand van het kandidatenblok op /diensten.
   Alles ná de kop verdwijnt en alleen de spinner blijft; twee regels in plaats van een
   `hidden` per blok, want die blokken (chiprij, laag-2-melding, afkapping, kaartweergave)
   hebben elk hun eigen zichtbaarheidsregels die een laadtoestand niet mag overschrijven.
   De spinner staat daarom standaard op display:none en niet op het hidden-attribuut. */
#candidates-loading { display: none; }
.card--results.is-zoekend .section-head--results ~ * { display: none; }
.card--results.is-zoekend #candidates-loading { display: flex; }

/* --- HERO --- */
/* Unified page grid: hero + filters + capaciteit in één raster zodat kolomranden uitlijnen */
.match-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.match-page-grid__wide {
  grid-column: 1 / 3;
}
.match-page-grid__cap {
  grid-column: 3;
  grid-row: 2 / 4;
  align-self: stretch;
}
.match-page-grid__full {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .match-page-grid { grid-template-columns: 1fr; }
  .match-page-grid__wide,
  .match-page-grid__cap,
  .match-page-grid__full { grid-column: 1; grid-row: auto; }
}
/* Behoud hero-card stijlen — nu directe grid-kinderen i.p.v. match-hero kinderen */
.match-hero {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .match-hero { grid-template-columns: 1fr; }
}
.match-hero__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 20px 22px 44px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.match-hero__card--fw {
  background: linear-gradient(135deg, #EAF5FD 0%, var(--color-surface) 70%);
  border-color: #C8E8F8;
}
.match-hero__card--dienst {
  background: linear-gradient(135deg, #FEF3E8 0%, var(--color-surface) 70%);
  border-color: #F5D9B8;
}
.match-hero__card--radar {
  flex-direction: column;
  align-items: stretch;
  padding: 18px;
  position: relative;
  background: radial-gradient(circle at 30% 40%, #E6F6FD 0%, var(--color-surface) 65%);
  border-color: #C8E8F8;
}
.radar-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.radar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1.5;
}
.happyone-link {
  position: absolute;
  bottom: 12px;
  right: 14px;
  opacity: 0.45;
  transition: opacity 0.15s;
  line-height: 0;
  display: block;
}
.happyone-link:hover { opacity: 1; }
.happyone-link img { display: block; width: 18px; height: 18px; }

/* ── Decision card ─────────────────────────────────────────── */
.decision-card {
  display: flex;
  gap: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.decision-card__accent {
  width: 5px;
  flex-shrink: 0;
}
.decision-card__inner {
  flex: 1;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.decision-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.decision-card__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 20px;
}
.decision-card__score {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
/* Welke schaal het getal is (Model score / Match score) — zelfde woorden als het
   radar-scorelabel, zodat kaart en radar aantoonbaar over hetzelfde getal praten. */
.decision-card__scale {
  font-size: 11px;
  color: var(--color-text-soft);
  letter-spacing: .02em;
}
.decision-card__text {
  font-size: 14px;
  color: var(--color-text);
  margin: 0;
  line-height: 1.55;
}
.decision-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.decision-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: opacity 0.12s, box-shadow 0.12s;
}
.decision-card__btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,174,239,.25);
}
.decision-card__btn--primary:hover { opacity: 0.9; }
.decision-card__btn--secondary {
  background: var(--color-primary-soft);
  color: var(--color-primary-darker);
  border: 1px solid var(--color-primary-soft);
}
.decision-card__btn--secondary:hover { background: var(--color-primary-softer); }
.decision-card__btn--ghost {
  background: none;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.decision-card__btn--ghost:hover { color: var(--color-text); border-color: var(--color-border-strong); }

/* Gedimde WhatsApp-knop: score-signaal in de zwak-band, GEEN disabled-toestand
   (PGR-350 B7). De knop blijft klikbaar en houdt zijn kleur en schaduw — daarmee is
   hij visueel te onderscheiden van .icon-btn--disabled (grijs vlak, pointer-events
   uit) dat "geen telefoonnummer" betekent. aria-disabled blijft false. */
.decision-card__btn--dimmed {
  opacity: 0.62;
  box-shadow: none;
}
.decision-card__btn--dimmed:hover { opacity: 1; }
.decision-card__btn--dimmed:focus-visible { opacity: 1; }

/* Bandvarianten — één kleurvocabulaire met de tabel en de radar: de vier
   scorekleuren plus grijs voor "geen score". Geen groen (PGR-350 B4). */
.decision-card--strong .decision-card__accent { background: #006991; }
.decision-card--strong .decision-card__label  { background: var(--color-primary-soft); color: #006991; }
.decision-card--good   .decision-card__accent { background: #007BA3; }
.decision-card--good   .decision-card__label  { background: var(--color-primary-soft); color: #007BA3; }
.decision-card--ok     .decision-card__accent { background: var(--color-accent); }
.decision-card--ok     .decision-card__label  { background: #fff4e5; color: #b05e00; }
.decision-card--weak   .decision-card__accent { background: var(--color-danger, #e53e3e); }
.decision-card--weak   .decision-card__label  { background: #fff0f0; color: #c0392b; }
.decision-card--none   .decision-card__accent { background: var(--color-border-strong); }
.decision-card--none   .decision-card__label  { background: var(--color-surface-alt); color: var(--color-text-muted); }

/* ── Score-why ─────────────────────────────────────────────── */
.score-why__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}
.score-why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.score-why__item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
}
.score-why__icon {
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 0;
}
.score-why__item--ok   .score-why__icon { color: #27ae60; }
.score-why__item--fail .score-why__icon { color: var(--color-danger, #e53e3e); }
.score-why__item--warn .score-why__icon { color: var(--color-accent); }
.score-why__item--ok   .score-why__text { color: var(--color-text); }
.score-why__item--fail .score-why__text { color: var(--color-text-muted); }
.score-why__item--warn .score-why__text { color: var(--color-text-muted); }
.score-why__empty {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

/* ── Debug accordion ───────────────────────────────────────── */
.debug-accordion {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-surface);
}
.debug-accordion__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--color-surface-alt);
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.debug-accordion__toggle:hover { background: var(--color-surface); }
.debug-accordion__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.debug-accordion__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
}
.debug-accordion__sub {
  font-size: 11px;
  color: var(--color-text-soft);
}
.debug-accordion__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.2s;
}
.debug-accordion__toggle[aria-expanded="true"] .debug-accordion__chevron {
  transform: rotate(180deg);
}
.debug-accordion__content {
  padding: 20px;
  overflow-x: auto;
}

/* Dark mode overrides for new components */
@media (prefers-color-scheme: dark) {
  .decision-card--strong .decision-card__label { background: rgba(0,105,145,.22);  color: #7fd3ef; }
  .decision-card--good   .decision-card__label { background: rgba(0,123,163,.20);  color: #5fcdf0; }
  .decision-card--ok     .decision-card__label { background: rgba(242,140,24,.15); color: #f6a94a; }
  .decision-card--weak   .decision-card__label { background: rgba(229,62,62,.15);  color: #fc8181; }
  .decision-card--none   .decision-card__label { background: rgba(148,163,184,.18); color: #cbd5e1; }
  .decision-card__btn--primary { box-shadow: none; }
}

.hero-identity {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.hero-identity__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hero-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #B3E6F8, #5FCDF0);
  color: var(--color-primary-darker);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}
.hero-label {
  font-size: 11.5px; font-weight: 800; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.hero-name {
  font-size: 22px; font-weight: 800; color: var(--color-text);
  letter-spacing: -0.02em; line-height: 1.2;
}
/* De flexwerkernaam op /match is een link naar zijn pagina. Hij erft de kop-typografie en
   krijgt géén permanente linkkleur of onderstreping: dat zou de kop tot een knop maken en
   de hiërarchie van de hero-card omgooien. Onderstreping en kleur komen op hover/focus, zoals
   bij de naamlinks in de lijstschermen (`.fw-naam-link`). */
.hero-name__link {
  color: inherit; text-decoration: none;
}
.hero-name__link:hover,
.hero-name__link:focus-visible {
  color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px;
}

/* Doorklik-bereiken onder de chips van de flexwerker-card: één gelabeld blok met drie
   outline-pillen ("maandag 3 augustus" · "hele week 32" · "komende weken").

   Vorm volgt de card en niet een eigen idee: de hero bestaat uit `.chip-row`-blokken met
   dezelfde radius en randkleur, en de pil is in deze app al het teken voor "hier kun je heen"
   (`.fw-week-btn` op de weekrijen van /flexwerkers). Daarom hetzelfde formaat, dezelfde
   `999px`-radius en dezelfde accentrand — géén vierde knopvorm erbij.

   De pillenrij mag afbreken: "maandag 3 augustus" is lang en de card is smal in het
   3-kolomsraster van /match. */
.fw-scope {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.fw-scope__label {
  display: block; margin-bottom: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.fw-scope__opts {
  display: flex; flex-wrap: wrap; gap: 6px;
}
/* Zelfde maatvoering als .fw-week-btn, zodat de twee oppervlakken niet twee soorten pillen
   tonen voor hetzelfde soort stap. */
.fw-scope__btn {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; text-decoration: none;
  background: var(--color-surface); color: var(--color-accent-dark);
  border: 1px solid var(--color-accent);
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.fw-scope__btn:hover,
.fw-scope__btn:focus-visible {
  background: var(--color-accent-soft); color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}
/* De dark-variant staat in het `prefers-color-scheme`-blok verderop, pal naast die van
   `.chip-row` — daar staat de rest van deze card ook, en gescheiden zouden de twee uiteenlopen. */
.hero-meta {
  font-size: 14px; color: var(--color-text-muted); font-weight: 600;
}
.hero-sub {
  font-size: 13.5px; color: var(--color-text-muted); font-weight: 500;
}
.hero-chips {
  margin: 12px 0 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.hero-rank {
  margin-top: 10px;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.01em;
}
.hero-rank--loading { color: var(--color-text-muted); opacity: 0.4; }
.hero-rank--in  { color: var(--color-primary-dark); opacity: 0.75; }
.hero-rank--out { color: var(--color-text-muted);   opacity: 0.6; }
.chip-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: 13px;
}
.chip-row dt {
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 0;
}
.chip-row dd {
  margin: 0;
  font-weight: 700;
  color: var(--color-text);
}

/* Radar */
.radar-score-wrap {
  text-align: center;
  margin-bottom: 8px;
}
.radar-score-label {
  font-size: 11.5px; font-weight: 800; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.radar-score {
  font-size: 42px; font-weight: 900; line-height: 1;
  color: var(--color-primary-darker);
  letter-spacing: -0.03em;
}
.radar-score.score--strong { color: var(--color-primary-darker); }
.radar-score.score--good   { color: #007BA3; }
.radar-score.score--ok     { color: var(--color-accent-dark); }
.radar-score.score--weak   { color: var(--color-danger); }
.radar-score.score--none   { color: var(--color-text-soft, #94a3b8); }

.radar { width: 100%; max-width: 320px; }
.radar-axis-label .label {
  font-size: 11px; font-weight: 700; fill: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.radar-axis-label .value {
  font-size: 12px; font-weight: 800; fill: var(--color-text);
}

/* --- Hard-filter checks --- */
.check-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.check-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.check-item--ok { background: #F0FAF4; border-color: #C6EDD3; }
.check-item--fail { background: #FEF2F2; border-color: #FCC9C9; }
.check-item--neutral { background: var(--color-surface-alt); }
/* Vierde toestand (PGR-316): let op, maar geen blokkade. Bestaat omdat opt-in sinds v54
   géén harde uitsluiting meer is — rood zou een uitsluiting beloven die er niet is
   (PO-eis 1). De rand draagt hier de zichtbaarheid; #D97706 haalt 3,19:1 op de card,
   dezelfde afweging als bij .fw-afkapping. */
.check-item--warn { background: var(--color-warning-soft); border-color: #D97706; }
/* SVG-variant (PGR-412): de eisen-regels gebruiken de iconen uit eisen.js in plaats van
   losse tekens, zodat alle oppervlakken dezelfde iconografie delen en `deels` en `geen`
   niet op hetzelfde teken uitkomen. De SVG's tekenen met currentColor, dus ze erven de
   witte voorgrond van de gekleurde cirkel. */
.check-icon--svg svg { width: 15px; height: 15px; display: block; }
.check-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  flex-shrink: 0;
}
.check-item--ok .check-icon { background: var(--color-success); color: #fff; }
.check-item--fail .check-icon { background: var(--color-danger); color: #fff; }
.check-item--neutral .check-icon { background: var(--color-border-strong); color: var(--color-text-muted); }
.check-item--warn .check-icon { background: #D97706; color: #fff; }
.check-body { flex: 1; min-width: 0; }
.check-label {
  font-weight: 700; font-size: 14px; color: var(--color-text);
}
.check-detail {
  font-size: 12.5px; color: var(--color-text-muted);
  margin-top: 2px;
}

/* --- Weekuur heatmap --- */
.heatmap-wrap {
  overflow-x: auto;
  margin: 0 -6px 10px -6px;
}
.heatmap-svg {
  width: 100%; min-width: 520px;
  max-width: 720px;
  height: auto;
}
.wk-cell {
  transition: stroke 120ms;
  stroke: transparent; stroke-width: 1.5;
}
.wk-cell:hover { stroke: var(--color-primary-dark); }
.wk-cell--dienst {
  stroke: var(--color-accent);
  stroke-width: 2.5;
}
.wk-hdr {
  font-size: 10px; fill: var(--color-text-muted); font-weight: 700;
  text-anchor: middle;
}
.wk-day {
  font-size: 11px; fill: var(--color-text-muted); font-weight: 700;
  text-anchor: end; text-transform: uppercase;
}
.heatmap-legend {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--color-text-muted);
  font-weight: 600;
}
.heatmap-legend__bar {
  width: 120px; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, rgba(0,174,239,0.08), rgba(0,174,239,1));
}
.heatmap-legend__divider { color: var(--color-border-strong); }
.heatmap-legend__marker {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2.5px solid var(--color-accent);
  border-radius: 3px;
}

/* --- Grid 2-kolom voor de rest --- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* --- Functie-lijst --- */
.func-list, .affinity-list, .similar-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.func-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: 14px; font-weight: 600;
}
.func-item--yes { background: #F0FAF4; border-color: #C6EDD3; color: var(--color-text); }
.func-item--no { background: var(--color-surface-alt); color: var(--color-text-muted); }
.func-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
}
.func-item--yes .func-icon { background: var(--color-success); color: #fff; }
.func-item--no .func-icon { background: var(--color-border-strong); color: #fff; }
.func-name { flex: 1; min-width: 0; }
.func-badge {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
}
.func-badge--main {
  background: var(--color-accent-soft); color: var(--color-accent-dark);
}

.affinity-box {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--color-primary-softer);
  border: 1px solid var(--color-primary-soft);
}
.affinity-box__title {
  font-size: 12px; font-weight: 800; color: var(--color-primary-darker);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.aff-item {
  display: grid;
  grid-template-columns: 1fr 80px 36px;
  gap: 10px; align-items: center;
  font-size: 13px;
}
.aff-label { font-weight: 600; color: var(--color-text); }
.aff-bar {
  height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden;
}
.aff-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 3px;
}
.aff-weight {
  font-weight: 800; color: var(--color-primary-darker); font-size: 13px;
  text-align: right;
}

/* --- Ervaring --- */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.exp-stat {
  padding: 18px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  text-align: center;
}
.exp-stat--color-accent {
  background: linear-gradient(135deg, var(--color-primary-softer), var(--color-surface));
  border-color: var(--color-primary-soft);
}
.exp-stat-value {
  font-size: 26px; font-weight: 900;
  color: var(--color-primary-darker);
  letter-spacing: -0.02em;
  line-height: 1;
}
.exp-stat--color-accent .exp-stat-value { color: var(--color-primary-dark); }
.exp-stat-label {
  margin-top: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* --- Geo map --- */
.geo-map {
  width: 100%; height: auto;
  border-radius: var(--radius-md);
  background: var(--color-primary-softer);
}
.geo-label {
  font-size: 11px; font-weight: 700;
  fill: var(--color-text);
  pointer-events: none;
}

/* --- Reisafstand card --- */
.section-head--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.verdict-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.verdict-chip--goed { background: #E6F9F0; color: #166534; }
.verdict-chip--twijfelachtig { background: #FEF3E4; color: #92400E; }
.verdict-chip--oppassen { background: #FEF2F2; color: #991B1B; }

/* Mini-kaart boven, stats eronder als horizontale rij */
.reisafstand-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.geo-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.geo-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}
.geo-stat-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-text);
  letter-spacing: -0.5px;
}
.geo-stat-sub {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.geo-stat-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.geo-stat-badge--ok { background: #E6F9F0; color: #166534; }
.geo-stat-badge--fail { background: #FEF2F2; color: #991B1B; }

.travel-band { margin-bottom: 18px; }
.travel-band__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.travel-band__title { font-size: 13px; font-weight: 600; color: var(--color-text); }
.travel-band__source { font-size: 11px; color: var(--color-text-muted); }
.travel-band__svg { display: block; width: 100%; }
.travel-band__legend {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.travel-band__hint {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 5px;
}

.geo-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-accent-soft);
  border: 1px solid #F6D7A6;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-top: 4px;
}
.geo-disclaimer__icon { flex-shrink: 0; margin-top: 1px; }
.geo-disclaimer__body { font-size: 12.5px; line-height: 1.55; color: #5A3200; }
.geo-disclaimer__title { font-weight: 700; display: block; margin-bottom: 2px; }

/* --- Similar nurses --- */
.similar-item {
  display: grid;
  grid-template-columns: 1fr 120px 40px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 13.5px;
}
.similar-title {
  font-weight: 700; color: var(--color-text);
}
.similar-meta {
  font-size: 12px; color: var(--color-text-muted);
  margin-top: 2px;
}
.similar-bar {
  height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden;
}
.similar-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-soft), var(--color-primary));
  border-radius: 4px;
}
.similar-count {
  font-weight: 800; color: var(--color-primary-darker);
  text-align: right;
}

/* --- Detail-knop in kandidaten-tabel --- */
.rank-link, .person-link { text-decoration: none; color: inherit; display: inline-block; }
.rank-link:hover .rank { transform: scale(1.08); }
.rank { transition: transform var(--duration-fast); }
.person-link:hover .person__name { color: var(--color-primary-dark); }
.icon-btn--detail {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
  color: var(--color-primary-darker);
}
.icon-btn--detail:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ------------------------------------------------------------------------- */
/* Assistant — chat berichten                                                */
/* ------------------------------------------------------------------------- */
.assistant__messages {
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}
.assistant__messages:empty { display: none; }

.assistant__msg {
  display: flex;
  flex-direction: column;
  max-width: 82%;
  animation: msg-in 0.18s ease;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.assistant__msg--user { align-self: flex-end; align-items: flex-end; }
.assistant__msg--bot  { align-self: flex-start; align-items: flex-start; }

.assistant__msg-text {
  padding: 10px 15px;
  border-radius: 16px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  word-break: break-word;
}
.assistant__msg-text ul, .assistant__msg-text .chat-ul { margin: 6px 0 4px 16px; padding: 0; }
.assistant__msg-text li { margin-bottom: 3px; }
.assistant__msg-text strong { font-weight: 800; }
.chat-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
  background: var(--color-primary-softer); color: var(--color-primary-dark);
  border: 1px solid rgba(0,174,239,.25); text-decoration: none;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.chat-link:hover { background: rgba(0,174,239,.18); border-color: var(--color-primary); }
.chat-link--match {
  background: #F0FDF4; color: #166534; border-color: #BBF7D0;
}
.chat-link--match:hover { background: #DCFCE7; border-color: #86EFAC; }
.assistant__msg--user .assistant__msg-text {
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.assistant__msg--bot .assistant__msg-text {
  background: #fff;
  color: var(--color-text);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.09);
}

.assistant__typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.09);
  width: fit-content;
}
.assistant__typing span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  display: inline-block;
  animation: typing-dot 1.3s infinite ease-in-out;
}
.assistant__typing span:nth-child(2) { animation-delay: 0.18s; }
.assistant__typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); background: var(--color-primary-soft); }
  30% { transform: translateY(-7px); background: var(--color-primary); }
}

.assistant__status {
  font-size: 11.5px;
  color: var(--color-text-soft);
  margin-top: 4px;
  min-height: 16px;
}
.assistant__status.is-error { color: var(--color-danger); }

/* ------------------------------------------------------------------------- */
/* VG chip in header — erft .fchip stijlen, minimale overrides              */
/* ------------------------------------------------------------------------- */

/* Kolom-truncation in diensten-tabel */
.cell-clip {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-clip--klant   { max-width: 22ch; }
.cell-clip--locatie { max-width: 16ch; }
.cell-clip--afdeling{ max-width: 20ch; }

/* p_success kolom */
.th--psuccess {
  width: 52px;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-soft);
  font-weight: 600;
  white-space: nowrap;
}
.td--psuccess {
  text-align: center;
}

/* p_success hint badge in diensten-tabel */
.p-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 4px;
  vertical-align: middle;
  cursor: default;
  user-select: none;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.p-success-icon--hoog {
  background: var(--color-primary-soft);
  color: var(--color-primary-darker);
}
.p-success-icon--laag {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

/* Geen vestiging-toegang: plain tekst zonder chipvorm */
.vg-chip--no-access .fchip__btn,
.vg-chip--no-access .fchip__btn:hover {
  background: none;
  border-color: transparent;
  color: var(--color-text-soft);
  box-shadow: none;
}

/* ---- FLOATING CHAT (gedeeld over alle pagina's) -------------------------- */
.chat-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 174, 239, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  transition: all var(--duration-med);
}
.chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 32px rgba(0, 174, 239, 0.55);
}
.chat-fab__badge {
  position: absolute;
  top: -2px; right: -2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

.chat-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 80px);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(15, 42, 46, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 60;
  animation: chatIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--color-border);
}
@keyframes chatIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-panel[hidden] { display: none !important; }

.chat-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
}
.chat-panel__avatar {
  flex-shrink: 0;
  background: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.chat-panel__heading { flex: 1; min-width: 0; }
.chat-panel__name { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.chat-panel__status {
  font-size: 11.5px;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-weight: 600;
}
.chat-panel__status .pulse-dot { background: #fff; }
.chat-panel__status .pulse-dot::before { background: rgba(255,255,255,0.7); }
.chat-panel__close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.chat-panel__close:hover { background: rgba(255,255,255,0.3); }

.chat-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-primary-softer);
}

.chat-msg { display: flex; flex-direction: column; gap: 6px; }
.chat-msg--bot { align-items: flex-start; }
.chat-msg--user { align-items: flex-end; }

.chat-msg__bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.45;
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(15, 42, 46, 0.05);
  font-weight: 500;
}
.chat-msg--bot .chat-msg__bubble { border-top-left-radius: 4px; }
.chat-msg--user .chat-msg__bubble {
  background: var(--color-primary);
  color: #fff;
  border-top-right-radius: 4px;
}
.chat-msg__quick { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-quick {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
  color: var(--color-primary-darker);
  border: 1.5px solid var(--color-primary-soft);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--duration-fast);
}
.chat-quick:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.chat-panel__input {
  display: flex;
  gap: 8px;
  padding: 14px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.chat-panel__input input {
  flex: 1;
  font-family: inherit;
  font-size: 13.5px;
  padding: 11px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  outline: none;
  font-weight: 500;
}
.chat-panel__input input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,174,239,0.15);
}
.chat-send {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast);
}
.chat-send:hover { background: var(--color-primary-dark); transform: scale(1.08); }

.typing-dots { display: inline-flex; gap: 4px; align-items: center; height: 16px; }
.typing-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-text-soft);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* ---- PAGINATION ---------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 0 6px;
}
.pg-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  min-width: 32px; height: 32px;
  padding: 0 6px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--duration-fast);
  line-height: 1;
}
.pg-btn:hover:not([disabled]):not(.pg-btn--active) {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pg-btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  cursor: default;
}
.pg-btn--nav {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  border-color: var(--color-border);
}
.pg-btn--nav:hover:not([disabled]) {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}
.pg-btn[disabled] { opacity: 0.3; cursor: default; }
.pg-ellipsis {
  font-size: 13px;
  color: var(--color-text-muted);
  width: 24px;
  text-align: center;
  line-height: 32px;
  user-select: none;
}

/* ---- CANDIDATES GEO MAP -------------------------------------------------- */
#candidates-map-wrap { padding: 8px 0 4px; }
.cmap-head {
  display: flex; gap: 16px; align-items: center;
  padding: 0 4px 8px; justify-content: flex-end;
}
.cmap-head__title { font-size: 12px; font-weight: 600; color: var(--color-text-muted); margin-right: auto; }
.cmap-legend { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-muted); }
.cmap-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cmap-dot--high  { background: #007BA3; }
.cmap-dot--mid   { background: #F7941D; }
.cmap-dot--low   { background: #E53E3E; }
.cmap-leaflet { height: 380px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }

/* Leaflet marker overrides */
.cmap-fw-marker {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; font-family: inherit;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
}
.cmap-afd-marker {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.cmap-popup-wrap .leaflet-popup-content-wrapper {
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
  padding: 0;
  overflow: hidden;
}
.cmap-popup-wrap .leaflet-popup-content { margin: 0; width: auto !important; }
.cmap-popup-wrap .leaflet-popup-tip-container { margin-top: -1px; }
.cmap-popup {
  padding: 14px 16px 12px;
  min-width: 200px;
  font-family: inherit;
  font-size: 13px;
}
.cmap-popup__head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.cmap-popup__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800;
  flex-shrink: 0;
}
.cmap-popup__name { font-weight: 700; font-size: 13px; color: var(--color-text); }
.cmap-popup__vg   { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.cmap-popup__motivation { font-size: 11px; color: var(--color-text-muted); margin-bottom: 10px; }
.cmap-popup__actions { display: flex; gap: 6px; }
.cmap-fw-marker--highlighted {
  transform: scale(1.35);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.35), 0 2px 6px rgba(0,0,0,0.2);
}
tr.is-map-highlighted td { background: rgba(0, 174, 239, 0.07); }
.vg-match-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-right: 5px;
  vertical-align: middle;
  position: relative; top: -1px;
  flex-shrink: 0;
}

/* Opt-in-indicatie (PGR-316) — één icoon in de Opt-in-kolom van /dienst, /diensten,
   /flexwerker-diensten en /flexwerker, en in de kaart-popovers.

   Twee zichtbare toestanden en één lege. Oranje betekent "hier kun je iets doen", niet
   "geblokkeerd": sinds v54 is opt-in een business rule (b_opt_in = 0,90) en geen harde
   uitsluiting meer, dus rood zou een uitsluiting beloven die er niet is (PO-eis 1).
   #D97706 in plaats van --color-warning (#ED8936, 2,55:1 op wit) om boven de 3:1 voor
   een UI-grens te blijven — dezelfde afweging als bij .fw-afkapping en .check-item--warn.
   De 'in'-toestand is bewust ingetogen: staat de flexwerker wél op de lijst, dan is er
   niets te doen, en bij een opt-in-klant draagt vrijwel elke rij dat icoon. */
.optin-ind {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}
.optin-ind--niet { color: #D97706; }
.optin-ind--in   { color: var(--color-text-muted); opacity: .75; }
.optin-ind--nvt  { color: var(--color-text-muted); opacity: .5; }
@media (prefers-color-scheme: dark) {
  .optin-ind--niet { color: var(--color-warning); }
}

/* Kwalificatie- en RVH-dekking (PGR-412) — de Eisen-kolom op /dienst, /diensten,
   /flexwerker-diensten en /flexwerker, plus de kaart-popovers.

   VIJF toestanden, en de vijfde is de reden dat dit component bestaat. `match = 2` is vacuüm
   waar zodra er niets vereist is, en dat geldt voor 88,7% van de matchbare diensten — zonder
   een eigen "geen eisen" zou negen van de tien rijen een groen vinkje dragen dat niets zegt.

   TWEE GRIJZE TOESTANDEN, ÉÉN KLEUR. "Geen eisen" (streepje) en "eisen niet bekend" (klokje)
   delen `--color-text-muted` en verschillen alleen in hun icoon. Bewust: allebei zijn ze
   "niets te melden" voor de scanleesbaarheid van de kolom, maar ze betekenen iets anders
   zodra je erop let — n.v.t. tegenover onbekend. Kleur zou dat verschil harder maken dan het
   is en de kolom onrustig maken op rijen waar niets aan de hand is.

   OUTLINE, GEEN FILL. Fill is op deze pagina's al bezet: de score-badge vult (blauw/oranje/
   rood) en dimming draagt beschikbaarheid. Eén kanaal, één betekenis — de werkpatroon-regel.
   Dit component gebruikt daarom alleen randkleur + icoon + tekst, zodat een oranje eisen-badge
   naast een oranje score-badge niet als hetzelfde signaal leest.

   CONTRAST. #B45309 (5,02:1 op wit) en #C53030 (5,47:1) in plaats van de --color-warning/
   --color-danger-tokens, omdat hier TEKST in de badge staat en niet alleen een rand — de
   3:1-grens voor UI-randen is dan niet genoeg.

   ⚠ --color-success (#38A169) haalt maar 3,25:1 en zakt daarmee onder de 4,5:1 die voor
   normale tekst geldt; 11,5px bold telt níét als "large text" (die grens ligt op 18,66px
   bold). Eerder stond hier dat groen "alleen op een icoon plus een cijfer" staat — dat was
   fout, want .eis-ind__txt erft de kleur van de variant en het cijfer stond dus óók in
   groen. Daarom draagt bij 'volledig' alleen het ICOON de kleur en krijgt de tekst
   --color-text. Oranje en rood halen de norm wel en houden hun kleur. (Copilot PR #150.) */
.eis-ind {
  display: inline-flex; align-items: center; gap: 4px;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
  white-space: nowrap;
}
.eis-ind__txt { font-size: 11.5px; font-weight: 700; }
.eis-ind--volledig   { color: var(--color-success); }
/* Alleen het icoon groen; de tekst ernaast moet 4,5:1 halen — zie de noot hierboven. */
.eis-ind--volledig .eis-ind__txt { color: var(--color-text); }
.eis-ind--deels      { color: #B45309; }
.eis-ind--geen       { color: #C53030; }
.eis-ind--geen-eisen { color: var(--color-text-muted); opacity: .5; }
.eis-ind--onbekend   { color: var(--color-text-muted); opacity: .75; }
/* Twee assen naast elkaar (alleen als er op beide iets te melden valt — 2,1% van de diensten). */
.eis-ind-groep { display: inline-flex; align-items: center; gap: 6px; }

/* Ontbrekende typen als losse chips (PGR-412) — op /match en op de "Beste match"-kaart.

   Waarom chips en niet de zin uit de tooltip: wát er ontbreekt is de handeling voor de
   intercedent ("bel hem over zijn BHV"), en dat hoort zonder hover leesbaar te zijn. In een
   opsomming verdwijnt dat zodra het er meer dan twee zijn — bij RVH loopt dat op tot 16 typen
   op één dienst. Losse chips blijven scanbaar en breken netjes af over meerdere regels.

   Rood-omrand en niet rood-gevuld: gevuld rood is in deze codebase de score-badge (laagste
   band) en de "Niet compliant"-pill. Deze chips zeggen iets anders — ze benoemen een gat, geen
   afkeuring — en moeten daarom als een eigen soort object lezen. */
.eis-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* Chip-row die stapelt: kopregel (label + badge) met de chips eronder. Zonder chips oogt hij
   identiek aan een gewone .chip-row, zodat de kaart niet verspringt tussen kandidaten. */
.chip-row--stack { flex-direction: column; align-items: stretch; gap: 0; }
.chip-row--stack .chip-row__kop { display: flex; justify-content: space-between; align-items: center; }
.eis-chip {
  display: inline-block;
  font-size: 11px; font-weight: 600; line-height: 1.35;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(197, 48, 48, 0.30);
  background: rgba(197, 48, 48, 0.06);
  color: #C53030;
}
@media (prefers-color-scheme: dark) {
  .eis-chip { border-color: rgba(252, 129, 129, 0.35); background: rgba(252, 129, 129, 0.10); color: #FC8181; }
}

/* Aanmeldregime (PGR-412) — "Verplicht" / "Signalering" / "Geen blokkade".

   TWEE KANALEN, TWEE ONDERWERPEN. Kleur zegt of DEZE FLEXWERKER de eisen heeft (groen/oranje/
   rood/grijs, zie .eis-ind). Dit pilletje zegt wat ONS SYSTEEM doet bij een aanmelding, en dat
   is een andere vraag over een ander onderwerp — dus een ander kanaal: de LIJNSTIJL van de rand.
   Doorgetrokken = verplicht, gestreept = signalering, gestippeld = geen blokkade. Zou het regime
   ook kleur pakken, dan gaat op één regel niet meer te zien welke kleur waarover gaat.

   Bewust ingetogen van kleur: neutraal grijsblauw voor alle drie. "Verplicht" krijgt zijn nadruk
   van de doorgetrokken rand en het vette woord, niet van rood — rood is hier al de kleur van
   "deze persoon mist alles", en die twee mogen niet op elkaar lijken.

   ⚠ Nooit renderen als het veld ontbreekt: geen pill is "regime onbekend", niet "geen blokkade".
   Zie eisenModus(), dat dan null geeft. */
.eis-modus {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-muted);
  vertical-align: 1px;
}
.eis-modus--streng { border: 1.5px solid var(--color-text-muted); color: var(--color-text); }
.eis-modus--zacht  { border: 1.5px dashed var(--color-border-strong); }
.eis-modus--geen   { border: 1.5px dotted var(--color-border-strong); opacity: .8; }
/* De regime-uitleg staat onder de chips en is bewust rustiger dan de dekkingszin erboven:
   het is context bij de eis, niet de bevinding over deze kandidaat. */
.check-detail--modus { margin-top: 6px; font-style: italic; opacity: .85; }

@media (prefers-color-scheme: dark) {
  /* Op donker halen de lichtere tokens ruim boven de 4,5:1, dus daar geen eigen hex —
     zelfde afweging als bij .optin-ind--niet en .check-item--warn. */
  .eis-ind--deels { color: var(--color-warning); }
  .eis-ind--geen  { color: #FC8181; }
}

/* Capaciteit-kaart: strip de inner wk-cap wrapper styling (card geeft al border/achtergrond) */
.match-page-grid__cap .wk-cap {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Capaciteit-blok */
.wk-cap {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px 12px;
}
.wk-cap__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.wk-cap__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.wk-cap__week {
  font-size: 11px;
  color: var(--color-text-soft);
}
.wk-cap__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}
.wk-cap__cell {
  padding: 8px 6px;
  text-align: center;
  border-right: 1px solid var(--color-border);
}
.wk-cap__cell:last-child { border-right: none; }
.wk-cap__num {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.5px;
}
.wk-cap__sub {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.wk-cap__bar-track {
  height: 5px;
  border-radius: 3px;
  background: var(--color-border);
  overflow: hidden;
}
.wk-cap__bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
  transition: width .5s ease;
}

/* Week-diensten lijst */
.wk-diensten {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.wk-diensten__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.wk-diensten__empty {
  font-size: 12.5px;
  color: var(--color-text-soft);
}
.wk-shift-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wk-shift {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  background: var(--color-surface);
}
.wk-shift--gewerkt   { border-left-color: var(--color-success); }
.wk-shift--gepland   { border-left-color: var(--color-primary-dark); }
.wk-shift--aangemeld { border-left-color: var(--color-accent); }
.wk-shift--current   { box-shadow: 0 0 0 1px var(--color-primary); border-left-width: 3px; background: var(--color-primary-soft); }
.wk-shift__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wk-shift__col--time {
  flex-shrink: 0;
  min-width: 80px;
}
.wk-shift__col--klant {
  flex: 1;
  min-width: 0;
}
.wk-shift__col--status {
  flex-shrink: 0;
  align-items: flex-end;
}
.wk-shift__current-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.wk-shift--gepland   .wk-shift__current-label { color: var(--color-primary-dark); }
.wk-shift--aangemeld .wk-shift__current-label { color: var(--color-accent); }
.wk-shift--gewerkt   .wk-shift__current-label { color: var(--color-success); }
.wk-shift__date {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text);
}
.wk-shift__time {
  font-size: 11.5px;
  color: var(--color-text-muted);
}
.wk-shift__klant {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-shift__afd {
  font-size: 11px;
  color: var(--color-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status-badges voor week-diensten */
.wk-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.wk-badge--gewerkt    { background: rgba(56,161,105,0.12); color: #38A169; }
.wk-badge--gepland    { background: rgba(0,174,239,0.12);  color: var(--color-primary-dark); }
.wk-badge--aangemeld  { background: rgba(247,148,29,0.12); color: var(--color-accent); }

/* Functie-badge: FW's hoofdfunctie */
.func-badge--fw {
  background: rgba(247,148,29,0.15);
  color: var(--color-accent);
  border: 1px solid rgba(247,148,29,0.25);
}

/* =========================================================================
   Aandachtsfactor — chip, werklijst, uitleg modal, tiebreaker toggle
   ========================================================================= */

/* ── Aandacht chip (in kandidaten-tabel en werklijst) ────────────────── */
.aandacht-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all var(--duration-fast);
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  margin-left: 6px;
}
.aandacht-chip:hover { opacity: 0.85; transform: translateY(-1px); }
.aandacht-chip--high {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  border-color: #F7941D40;
}
.aandacht-chip--mid {
  background: var(--color-primary-soft);
  color: var(--color-primary-darker);
  border-color: #00AEEF40;
}
.aandacht-chip--low {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}


/* ── Tiebreaker toggle ───────────────────────────────────────────────── */
.tiebreaker-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tiebreaker-toggle__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-soft);
  white-space: nowrap;
}
.tiebreaker-segmented {
  display: flex;
  gap: 2px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 3px;
}
.tiebreaker-segmented__btn {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
  white-space: nowrap;
}
.tiebreaker-segmented__btn.is-active {
  background: #fff;
  color: var(--color-primary-darker);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.tiebreaker-segmented__btn:hover:not(.is-active) { color: var(--color-text); }

/* ── Uitleg modal ────────────────────────────────────────────────────── */
.uitleg-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.uitleg-modal[hidden] { display: none !important; }
.uitleg-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 54, 93, 0.35);
  backdrop-filter: blur(2px);
  animation: backdropIn 180ms ease;
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
.uitleg-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  animation: uitlegIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes uitlegIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.uitleg-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border);
}
.uitleg-modal__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.uitleg-modal__title {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text);
}
.uitleg-modal__close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast);
  flex-shrink: 0;
}
.uitleg-modal__close:hover { background: var(--color-surface-alt); color: var(--color-text); }
.uitleg-modal__body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.uitleg-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-weight: 700;
}
.uitleg-score-factor {
  font-size: 28px;
  font-weight: 900;
  color: var(--color-accent-dark);
}
.uitleg-score-op {
  font-size: 18px;
  color: var(--color-text-soft);
}
.uitleg-score-markt {
  font-size: 14px;
  color: var(--color-text-muted);
}
.uitleg-score-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: rgba(0,174,239,0.10);
  padding: 1px 6px;
  border-radius: 6px;
  vertical-align: middle;
}
.uitleg-score-eff {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary-darker);
  margin-left: auto;
}
.uitleg-section__label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-soft);
  margin-bottom: 6px;
}
.uitleg-reden {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}
.uitleg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.uitleg-list li {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 6px 10px;
  background: var(--color-primary-softer);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.uitleg-list li strong { color: var(--color-text); font-weight: 700; }
.uitleg-list--overgangen li {
  background: var(--color-surface-alt);
}
.uitleg-list--overgangen li strong {
  color: var(--color-primary-darker);
}
.overgang-arrow {
  display: inline-block;
  font-weight: 800;
  font-size: 14px;
  width: 18px;
  flex-shrink: 0;
}
.overgang-arrow--up   { color: #16A34A; }
.overgang-arrow--down { color: #DC2626; }
.overgang-arrow--neutral { color: var(--color-text-soft); font-size: 12px; }

/* ── Werklijst (aandacht.html) ───────────────────────────────────────── */
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 0;
  flex-wrap: wrap;
}
.card-head h2 { font-size: 20px; }
.card-head p { font-size: 13.5px; color: var(--color-text-muted); margin-top: 4px; font-weight: 500; }
.card--aandacht { padding: 0; overflow: hidden; }
.aw-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 20px 28px 32px;
}
.aw-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}
.aw-group__title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aw-group__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.aw-group__dot--high { background: var(--color-accent); }
.aw-group__dot--mid  { background: var(--color-primary); }
.aw-group__dot--low  { background: var(--color-text-muted); }
.aw-group__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}
.aw-group__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
}
.aw-group__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.fw-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow var(--duration-fast), transform var(--duration-fast);
  position: relative;
  overflow: hidden;
}
.fw-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fw-card--niet-compliant {
  border-color: rgba(197, 48, 48, 0.35);
}
.fw-card--niet-compliant::before {
  content: 'NIET COMPLIANT';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.12em;
  -webkit-text-stroke: 1px rgba(197, 48, 48, 0.25);
  color: rgba(197, 48, 48, 0.45);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* Top row: avatar + name/sub + score box */
.fw-card__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.fw-card__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #E8F7FD;
  color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.fw-card__info { flex: 1; min-width: 0; }
.fw-card__name {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.fw-card__sub {
  font-size: 11px;
  color: var(--color-text-soft);
  margin-top: 3px;
  font-weight: 500;
}
.fw-card__badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
}
.fw-card__badge--uzk { background: rgba(0,174,239,0.12); color: var(--color-primary-dark); }
.fw-card__badge--zzp { background: rgba(247,148,29,0.12); color: var(--color-accent-dark); }

.fw-niet-compliant-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(229,62,62,0.10);
  color: #C53030;
  border: 1px solid rgba(229,62,62,0.25);
  vertical-align: middle;
}

/* Score badge — top-right, dominant */
.fw-card__score {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; line-height: 1;
}
.fw-card__score--high { background: rgba(247,148,29,0.12); color: var(--color-accent-dark); }
.fw-card__score--mid  { background: rgba(0,174,239,0.10); color: var(--color-primary-darker); }
.fw-card__score--low  { background: var(--color-surface-alt); color: var(--color-text-muted); }

/* Body: bucket label + date */
.fw-card__body { display: flex; flex-direction: column; gap: 4px; }
.fw-card__bucket-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fw-card__bucket {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.fw-card__waarom-btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--duration-fast);
}
.fw-card__waarom-btn:hover { color: var(--color-primary); }

/* Footer: ghost CTA */
.fw-card__footer {
  margin-top: auto;
  padding-top: 4px;
}
.fw-card__diensten-btn {
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  background: var(--color-primary-softer);
  color: var(--color-primary-dark);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-primary-soft);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-fast);
}
.fw-card__diensten-btn:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-darker);
}
.fw-card__meta {
  font-size: 11px;
  color: var(--color-text-soft);
  font-weight: 500;
}
.aw-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
}

/* =========================================================================
   App-shell — sidebar + topbar
   ========================================================================= */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar base: always 64px, expands on hover or when pinned ---- */
.sidebar {
  width: 64px;
  min-height: 100vh;
  background: var(--color-sidebar);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 300;
  transition: width var(--duration-med), transform var(--duration-med);
  overflow: hidden;
}
/* Hover expand (overlay — content does NOT shift) */
.sidebar.is-hover { width: 220px; }
/* Pinned expand */
.sidebar.is-pinned { width: 220px; }

/* ---- Brand area ---- */
.sidebar__brand {
  display: flex;
  align-items: center;
  padding: 14px 13px;
  border-bottom: 1px solid var(--color-border);
  min-height: 64px;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
}
/* Brand link (logo + text): hidden by default, visible when expanded */
.sidebar__brand-link {
  display: none;
  align-items: center;
  gap: 10px;
  flex: 1;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.sidebar.is-hover .sidebar__brand-link,
.sidebar.is-pinned .sidebar__brand-link { display: flex; }

.sidebar__brand-text {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary-darker);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.sidebar__brand-text span { color: var(--color-accent); font-weight: 700; }

/* Hamburger button */
.sidebar__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast), color var(--duration-fast);
  margin-left: auto;
}
/* In collapsed state: hamburger is the only brand content, center it */
.sidebar:not(.is-hover):not(.is-pinned) .sidebar__hamburger { margin-left: 0; }
.sidebar__hamburger:hover { background: var(--color-primary-soft); color: var(--color-primary); }

/* Icon switching */
.sidebar__ham-icon--pinned { display: none; }
.sidebar.is-pinned .sidebar__ham-icon--open { display: none; }
.sidebar.is-pinned .sidebar__ham-icon--pinned { display: block; }

/* ---- Nav items ---- */
.sidebar__nav { flex: 1; padding: 8px 0; }

.sidebar__footer-nav {
  padding: 8px 0;
  border-top: 1px solid var(--color-border);
}

/* Handleiding staat onderaan de zijbalk (PGR-351): .sidebar__nav heeft flex:1, dus
   alles wat erna komt zakt naar de onderkant. Boven het beheerblok, dat alleen voor
   beheerders zichtbaar is. */
.sidebar__hulp-nav {
  padding: 8px 0;
  border-top: 1px solid var(--color-border);
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  margin: 2px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background var(--duration-fast), color var(--duration-fast);
  white-space: nowrap;
  justify-content: center;
}
/* Expanded nav items */
.sidebar.is-hover .sidebar__item,
.sidebar.is-pinned .sidebar__item { justify-content: flex-start; padding: 10px 20px; }

.sidebar__item svg { flex-shrink: 0; }
.sidebar__item:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.sidebar__item.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
}
.sidebar__item--stub { opacity: 0.45; pointer-events: none; }
.sidebar__item--soon .sidebar__item-label { font-style: italic; }

.sidebar__item-label { display: none; }
.sidebar.is-hover .sidebar__item-label,
.sidebar.is-pinned .sidebar__item-label { display: inline; }

/* Nav section divider + label */
.sidebar__nav-section-label {
  display: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
  padding: 14px 20px 4px;
  border-top: 1px solid var(--color-border-soft);
  margin-top: 4px;
}
.sidebar.is-hover .sidebar__nav-section-label,
.sidebar.is-pinned .sidebar__nav-section-label { display: block; }

/* Icon wrapper for soon-dot positioning */
.sidebar__icon-slot {
  position: relative;
  display: flex;
  flex-shrink: 0;
}
.sidebar__soon-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-soft);
  border: 1.5px solid var(--color-sidebar);
}

/* ---- Shell main ---- */
.shell-main {
  flex: 1;
  margin-left: 64px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--duration-med);
  min-width: 0;
}
/* Only pinned sidebar pushes content */
.app-shell.sidebar-pinned .shell-main { margin-left: 220px; }

.shell-main > .container,
.shell-main > main.container { margin-left: 0; margin-right: 0; max-width: none; }
.shell-main > main.landing { width: 100%; }

/* ---- Topbar ---- */
.topbar {
  height: 60px;
  background: var(--color-topbar);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 200;
  flex-shrink: 0;
}
.topbar__spacer { flex: 1; }
#topbar-menu-btn { display: none; }

/* ---- Mobile sidebar overlay ---- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 299;
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-220px); width: 220px; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar.is-open .sidebar__brand-link { display: flex; }
  .sidebar.is-open .sidebar__item-label { display: inline; }
  .sidebar.is-open .sidebar__item { justify-content: flex-start; padding: 10px 20px; }
  .sidebar.is-open .sidebar__nav-section-label { display: block; }
  .sidebar-overlay.is-visible { display: block; }
  .shell-main { margin-left: 0 !important; }
  #topbar-menu-btn { display: flex; }
}

/* ---- Overlay sidebar mode (match.html — sidebar never pins, always overlay) ---- */
.app-shell.shell--overlay-sidebar .shell-main { margin-left: 64px !important; }
.app-shell.shell--overlay-sidebar #topbar-menu-btn { display: flex; }
/* Topbar hamburger opens sidebar as overlay on desktop (not pinnable) */
.app-shell.shell--overlay-sidebar .sidebar.is-open { width: 220px; }
.app-shell.shell--overlay-sidebar .sidebar.is-open .sidebar__brand-link { display: flex; }
.app-shell.shell--overlay-sidebar .sidebar.is-open .sidebar__item-label { display: inline; }
.app-shell.shell--overlay-sidebar .sidebar.is-open .sidebar__item { justify-content: flex-start; padding: 10px 20px; }
.app-shell.shell--overlay-sidebar .sidebar.is-open .sidebar__nav-section-label { display: block; }
.app-shell.shell--overlay-sidebar .sidebar-overlay.is-visible { display: block; }

/* =========================================================================
   Components — MetricCard
   ========================================================================= */
.metric-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metric-card__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
}
.metric-card__value {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.metric-card__sub {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 2px;
}
.metric-card--mock {
  border: 1.5px dashed var(--color-border-dashed);
  background: var(--color-surface-soft);
  box-shadow: none;
}
.metric-card--mock .metric-card__value { color: var(--color-text-soft); }
.mock-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--color-purple-soft);
  color: var(--color-purple);
  font-size: 11px;
  font-weight: 700;
  margin-top: 8px;
  align-self: flex-start;
}

/* =========================================================================
   Components — ScoreBadge
   ========================================================================= */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.score-badge--high   { background: var(--color-primary-soft);  color: var(--color-primary-darker); }
.score-badge--mid    { background: var(--color-accent-soft);   color: var(--color-accent-dark); }
.score-badge--low    { background: var(--color-danger-soft);   color: var(--color-danger); }

/* =========================================================================
   Components — StatusPill uitbreidingen
   ========================================================================= */
.status-pill--success { background: var(--color-success-soft); color: var(--color-success); }
.status-pill--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.status-pill--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }

/* =========================================================================
   Components — Button hover met --color-primary-hover
   ========================================================================= */
.btn--color-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 174, 239, 0.4);
}

/* =========================================================================
   Dark mode — één blok, achteraan (cascade wint van alle bovenstaande regels)
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:        #009FE3;
    --color-primary-dark:   #00AEEF;
    --color-primary-darker: #0085B8;
    --color-primary-soft:   #073A56;
    --color-primary-softer: #071C2E;
    --color-primary-hover:  #18B7F2;

    /* Werkhistorie-rij, darkmode. Op een donkere card is onderscheid van het
       planning-blauw (#0085B8) alleen naar bóven te halen: dimmer zou onder de ~3:1
       op de card-surface duiken. Deze waarde geeft 7,09:1 op --color-surface
       (#0F223B) en 1,84:1 tegen planning — dezelfde scheiding als de 1,78:1 in
       lichte modus. De hiërarchie "planning is het sterkste blauw" wordt hier door
       verzadiging gedragen (38% tegen 100%), niet door helderheid. */
    --color-hist: #7FB4CC;

    /* Opdrachtbalk, darkmode. HappyOne heeft geen darkmode, dus er is geen kleur om over
       te nemen — alleen een methode. Dit is HappyOne's eigen alpha-90-recept (#b9d5ff op
       ~56%) gerekend over ONS cardoppervlak #0F223B: dezelfde kleur, dezelfde dekking,
       ander vlak. Levert 4,30:1 op de card en blijft daarmee onder de Werkpatroon-stip
       (7,09:1), zodat de rangorde uit 45438 overeind blijft: laag 3 is niet luider dan
       laag 2. #b9d5ff vol dekkend zou hier 10,69:1 halen en die rangorde omkeren.
       De rand is op dezelfde manier afgeleid uit #98a2b3. */
    --color-opdr: #6E86A9;
    --color-opdr-rand: #5C6A7E;

    --color-accent:      #FFAA45;
    --color-accent-dark: #F9A840;
    --color-accent-soft: #3A2714;

    --color-bg:           #071426;
    --color-sidebar:      #0A1830;
    --color-topbar:       #08182D;
    --color-surface:      #0F223B;
    --color-surface-soft: #132A46;
    --color-surface-elevated: #162F50;
    --color-surface-alt:  #1A2D42;
    /* Zie de toelichting in :root. Eén stap ónder het cardoppervlak (#0F223B) richting de
       pagina-achtergrond (#071426) — niet erboven, ook al gaat de elevatieconventie van het
       systeem in dark omhoog. Twee redenen: "hier is niets" moet in beide modi dezelfde
       richting hebben, en de Werkpatroon-stip staat op het ongewijzigde cardoppervlak, dus
       lichtere cellen zouden met die stip om helderheid concurreren (rangorde uit 45438).
       Waarde na de vrijgegeven stap uit het STOP 1-akkoord: #0C1C33 gaf 1,07:1 en las in
       screenshot A niet als toestand, dus één stap verder richting de pagina-achtergrond.
       1,13:1 tegen de card. Verder kán bijna niet: de card is zelf al bijna zwart, dus zelfs
       de pagina-achtergrond zelf (#071426) haalt maar 1,15:1. Deze waarde pakt vrijwel het
       hele beschikbare bereik en houdt de card nog een eigen rand tegen de pagina. */
    --color-surface-recessed: #091729;
    --color-border:       #243B5A;
    --color-border-soft:  rgba(203, 213, 224, 0.16);
    --color-border-dashed:#4A5D78;
    /* Zie :root. --color-border (#243B5A) op 55% over de card (#0F223B). */
    --color-border-dimmed: #1B304C;
    --color-border-strong:#3A5472;

    --color-text:      #EAF4FF;
    --color-text-muted:#A9B8CC;
    --color-text-soft: #7F90A8;

    --color-success:      #4ADE80;
    --color-success-soft: #103822;
    --color-warning:      #FACC15;
    --color-warning-soft: #3B3212;
    --color-danger:       #FB7185;
    --color-danger-soft:  #3B1821;

    --color-purple:      #A78BFA;
    --color-purple-soft: #251B45;

    --color-chart-aangeboden: #38BDF8;
    --color-chart-succesvol:  #4ADE80;
    --color-chart-grid:       rgba(169, 184, 204, 0.14);
    --color-chart-axis:       #7F90A8;

    --shadow-sm:   0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
    --shadow-lg:   0 12px 32px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.30);
    --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.22);
  }

  /* Decoratieve achtergrond-bollen */
  .bg-orb--one { background: radial-gradient(circle, #0A3A55 0%, transparent 70%); opacity: 0.6; }
  .bg-orb--two { background: radial-gradient(circle, #3A1F05 0%, transparent 70%); opacity: 0.5; }

  /* Hero-kaart gradients */
  .match-hero__card--fw     { background: linear-gradient(135deg, #071C2E 0%, var(--color-surface) 80%); }
  .match-hero__card--dienst { background: linear-gradient(135deg, #2A1A08 0%, var(--color-surface) 80%); }
  .match-hero__card--radar  { background: radial-gradient(circle at center, #0A2A3F 0%, var(--color-surface) 60%); }
  .hero-avatar { background: linear-gradient(135deg, #0A3A55, #1A6A8A); border-color: var(--color-surface); }

  /* Hero chips — rgba(white) werkt niet op donker; vervang door oppervlakkleur */
  .chip-row { background: var(--color-surface-alt); border-color: var(--color-border); }
  /* Het doorklik-blok deelt de rgba(white)-ondergrond van .chip-row en dus ook deze correctie;
     zonder deze regel wordt het op donker een grijze waas in plaats van een blok. */
  .fw-scope { background: var(--color-surface-alt); border-color: var(--color-border); }

  /* Harde-filter check items */
  .check-item--ok      { background: #0A2010; border-color: #1A5030; }
  .check-item--fail    { background: #2A0A0A; border-color: #5A1818; }
  .check-item--neutral { background: var(--color-surface-alt); }
  /* Op donker haalt --color-warning (#FACC15) 10,45:1; het eigen #D97706-token is daar
     onnodig, zelfde afweging als bij .fw-afkapping. */
  .check-item--warn      { background: var(--color-warning-soft); border-color: var(--color-warning); }
  .check-item--warn .check-icon { background: var(--color-warning); color: #1A1A1A; }

  /* Functie-fit items */
  .func-item--yes { background: #0A2010; border-color: #1A5030; color: var(--color-text); }

  /* Reisafstand kaart */
  .verdict-chip--goed          { background: #052E16; color: #6EE7A0; }
  .verdict-chip--twijfelachtig { background: #2A1A08; color: #FBB96E; }
  .verdict-chip--oppassen      { background: #2A0A0A; color: #FC8181; }
  .geo-stat-badge--ok          { background: #052E16; color: #6EE7A0; }
  .geo-stat-badge--fail        { background: #2A0A0A; color: #FC8181; }
  .geo-disclaimer              { background: #2A1A08; border-color: #5A3800; }
  .geo-disclaimer__body        { color: #FBB96E; }

  /* Week-capaciteit */
  .wk-cap, .wk-diensten { background: var(--color-surface-alt); border-color: var(--color-border); }
  .wk-cap__row { border-color: var(--color-border); }
  .wk-cap__cell { border-right-color: var(--color-border); }
  .wk-shift { background: var(--color-surface); border-color: var(--color-border); }
  .wk-shift--current { background: var(--color-primary-soft); box-shadow: 0 0 0 1px var(--color-primary); }
  .wk-badge--gewerkt   { background: rgba(72,187,120,0.12); color: var(--color-success); }
  .wk-badge--gepland   { background: rgba(41,191,255,0.12); color: var(--color-primary); }
  .wk-badge--aangemeld { background: rgba(247,148,29,0.12); color: var(--color-accent-dark); }

  /* Chat / Aisha */
  .assistant__avatar img           { border-color: var(--color-surface); }
  .assistant__avatar-fallback      { background: var(--color-surface); border-color: var(--color-surface); }
  .assistant__greeting em          { background: var(--color-surface-alt); color: var(--color-accent-dark); }
  .assistant__row input            { background: var(--color-surface-elevated); border-color: var(--color-border); color: var(--color-text); }
  .chip                            { background: var(--color-surface-elevated); border-color: var(--color-border); color: var(--color-primary); }
  .chip:hover                      { background: var(--color-primary-soft); border-color: var(--color-primary); }
  .assistant__msg--bot .assistant__msg-text { background: var(--color-surface-elevated); box-shadow: 0 1px 5px rgba(0,0,0,0.30); }
  .assistant__typing               { background: var(--color-surface-elevated); box-shadow: 0 1px 5px rgba(0,0,0,0.30); }
  .chat-link--match                { background: #052E16; color: #6EE7A0; border-color: #1A5030; }
  .chat-link--match:hover          { background: #0A3D1F; border-color: #22703B; }

  /* Chat-panel (Aisha op flexwerker-detail) */
  .chat-panel                      { box-shadow: 0 20px 60px rgba(0,0,0,0.55); }
  .chat-msg--bot .chat-msg__bubble { background: var(--color-surface-elevated); color: var(--color-text); box-shadow: 0 1px 3px rgba(0,0,0,0.30); }
  .chat-quick                      { background: var(--color-surface-elevated); color: var(--color-primary-hover); border-color: var(--color-border-strong); }
  .chat-quick:hover                { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
  .chat-panel__input input         { background: var(--color-surface-alt); color: var(--color-text); border-color: var(--color-border); }
  .chat-panel__input input::placeholder { color: var(--color-text-soft); }
  /* at-msg bubbles (inline-stijlen in flexwerker_detail.html via CSS-variabelen — geen override nodig) */
}

/* ==========================================================================
   Aanmeldingen pagina
   ========================================================================== */

/* ── Page nav ── */
.page-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 3px;
}
.page-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
}
.page-nav__link:hover { color: var(--color-text); background: rgba(255,255,255,0.6); }
.page-nav__link.is-active {
  background: var(--color-surface);
  color: var(--color-primary-darker);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

/* ── Status tab filter ── */
.status-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.status-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
  white-space: nowrap;
}
.status-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: var(--color-primary-softer);
}
.status-tab.is-active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-darker);
}
.status-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 800;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.status-tab.is-active .status-tab__count {
  background: var(--color-primary);
  color: #fff;
}

/* ── Aanmelding groep ── */
.aanmeld-list {
  display: flex;
  flex-direction: column;
}
.aanmeld-group { /* tbody — visual separation handled via border-top on dienst-row */ }
.aanmeld-group__dienst {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: linear-gradient(90deg, var(--color-primary-softer) 0%, var(--color-surface) 60%);
}
.aanmeld-dienst-top {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}
.aanmeld-datum {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.aanmeld-tijd {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.aanmeld-klant { font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.aanmeld-locatie, .aanmeld-afdeling { font-size: 13.5px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 2; }
.aanmeld-sep { color: var(--color-border-strong); font-size: 12px; flex-shrink: 0; }
.aanmeld-dienst-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 4px;
}
.dienst-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.dienst-tag--functie {
  background: var(--color-surface-alt);
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
}
.dienst-tag--vestiging {
  background: var(--color-surface-alt);
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
}
.dienst-tag--uzk {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-darker);
}
.dienst-tag--zzp {
  background: var(--color-purple-soft);
  border-color: var(--color-purple);
  color: var(--color-purple);
}

/* Kans meter */
.aanmeld-kans {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.aanmeld-kans__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.aanmeld-kans__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aanmeld-kans__bar {
  width: 72px;
  height: 7px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
.aanmeld-kans__fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-primary-soft), var(--color-primary));
  transition: width 0.4s;
}
.aanmeld-kans__pct {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-primary-darker);
  min-width: 36px;
  text-align: right;
}

/* Count badge */
.aanmeld-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.aanmeld-count-badge::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ── Aanmelding tabel ── */
.aanmeld-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
  animation: cardIn 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.aanmeld-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  table-layout: auto;
}

/* Dienst header row — spans all columns */
.aanmeld-group__dienst-row > td { padding: 0; border-bottom: 1px solid var(--color-border); }
/* Visual gap between groups: thick bg-colored top border simulates 12px spacing */
.aanmeld-group + .aanmeld-group .aanmeld-group__dienst-row > td {
  border-top: 12px solid var(--color-bg);
}

/* Column label row (replaces thead — each tbody has its own header row) */
.aanmeld-col-header {
  background: var(--color-surface-alt);
  border-bottom: 1.5px solid var(--color-border);
}
.aanmeld-col-header th {
  padding: 9px 14px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Eerste kolom inspringen zoals op /flexwerkers (PGR-340, verzoek PO): de naam stond met
   14px bijna tegen de menubalk. 28px is dezelfde inspringing als daar; deze tabel heeft geen
   negatieve wrapper-marge, dus hier is geen compensatie nodig zoals bij `.data-table`.
   Ook op de kopregel, anders lopen kop en cel uit elkaar. */
.aanmeld-col-header th:first-child,
.aanmeld-table td:first-child { padding-left: 28px; }
.aanmeld-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aanmeld-group tr:last-child td { border-bottom: none; }
.aanmeld-table tbody tr:not(.aanmeld-group__dienst-row):not(.aanmeld-col-header):hover {
  background: var(--color-primary-softer);
}
/* Pinned min-widths for badge/action columns; text columns size freely to content */
/* Column order: Naam | Vestiging | Aandacht | Functie | Contract | Status | Aangemeld op | Score | Acties */
.aanmeld-col-header th:nth-child(3) { min-width: 68px; }    /* Aandacht */
.aanmeld-col-header th:nth-child(5) { min-width: 72px; }    /* Contract */
.aanmeld-col-header th:nth-child(6) { min-width: 110px; }   /* Status */
.aanmeld-col-header th:nth-child(7) { min-width: 100px; }   /* Aangemeld op */
.aanmeld-col-header th:nth-child(8) { min-width: 90px; }    /* Score */
.aanmeld-col-header th:nth-child(9) { min-width: 80px; text-align: right; }  /* Acties */
.aanmeld-table td:nth-child(3),
.aanmeld-table td:nth-child(8) { overflow: visible; white-space: normal; }
.aanmeld-table td:nth-child(9) { text-align: right; white-space: nowrap; overflow: visible; }

/* Score cell */
.aanmeld-score {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
}
.aanmeld-score__pct {
  font-size: 13.5px;
  font-weight: 800;
  min-width: 38px;
}
.aanmeld-score__bar {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  min-width: 40px;
}
.aanmeld-score__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.35s;
}
.aanmeld-score--loading {
  color: var(--color-text-soft);
  font-style: italic;
  font-size: 12.5px;
}
.score-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* Aanmelding status badge */
.aanmeld-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.aanmeld-status-badge--verzamelen { background: #EBF8FF; color: #2B6CB0; border: 1px solid #BEE3F8; }
.aanmeld-status-badge--opt_in     { background: #FAF5FF; color: #553C9A; border: 1px solid #D6BCFA; }
.aanmeld-status-badge--wacht      { background: #FFFAF0; color: #C05621; border: 1px solid #FEEBC8; }
.aanmeld-status-badge--default    { background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.aanmeld-status-badge--aangemeld  { background: #EBF8FF; color: #2B6CB0; border: 1px solid #BEE3F8; }
.aanmeld-status-badge--interesse  { background: #FFFAF0; color: #C05621; border: 1px solid #FEEBC8; }

/* Action buttons */
.aanmeld-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.aanmeld-btn--ok {
  width: 32px; height: 32px;
  background: #F0FFF4;
  border-color: var(--color-success);
  color: var(--color-success);
  opacity: 0.45;
  cursor: not-allowed;
}
.aanmeld-btn--no {
  width: 32px; height: 32px;
  background: #FFF5F5;
  border-color: var(--color-danger);
  color: var(--color-danger);
  opacity: 0.45;
  cursor: not-allowed;
}


/* Empty state */
.aanmeld-empty {
  padding: 56px 32px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
}
.aanmeld-empty svg { opacity: 0.25; margin-bottom: 14px; display: block; margin-left: auto; margin-right: auto; }

/* Dienst status badge */
.dienst-status-tag {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------------------- */
/* Feedback in topbar + popover                                               */
/* ------------------------------------------------------------------------- */
.feedback-fab {
  position: relative;
  display: flex;
  align-items: center;
}

.feedback-fab__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: none;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  font-family: inherit;
  white-space: nowrap;
}
.feedback-fab__btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border-strong, var(--color-border));
}
.feedback-fab__btn:active { opacity: 0.85; }
.feedback-fab__btn svg { flex-shrink: 0; }

.feedback-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 500;
}

.feedback-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--color-border);
}

.feedback-popover__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.feedback-popover__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast);
  font-family: inherit;
}
.feedback-popover__close:hover { color: var(--color-text); }

.feedback-popover__body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feedback-popover__tip {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.feedback-popover__textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 100px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color var(--duration-fast);
}
.feedback-popover__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.12);
}

.feedback-popover__counter {
  font-size: 11.5px;
  color: var(--color-text-muted);
  text-align: right;
}

.feedback-popover__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--color-border);
}

.feedback-popover__disclaimer {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .feedback-popover {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

/* ── Flexwerkers lijst (flexwerkers.html) ────────────────────────────── */
.fw-table { width: 100%; border-collapse: collapse; }
.fw-table thead th {
  text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-text-muted); padding: 0 16px 14px;
  border-bottom: 1.5px solid var(--color-border);
}
.fw-table thead th:first-child { padding-left: 0; }
.fw-table thead th.fw-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.fw-table thead th.fw-th-sort:hover { color: var(--color-primary-dark); }
.fw-table thead th.fw-th-sort.is-sorted { color: var(--color-primary-dark); }
.fw-sort-ind { font-size: 9px; margin-left: 3px; }
/* Aandacht-cijfer is zelf klikbaar (opent de uitleg-modal) */
.aandacht-chip-btn {
  cursor: pointer; font: inherit; font-weight: 700;
  transition: box-shadow .15s, transform .1s;
}
.aandacht-chip-btn:hover { box-shadow: 0 0 0 3px var(--color-primary-softer); }
.aandacht-chip-btn:active { transform: scale(0.96); }
/* Contracttype-filter op /flexwerkers */
/* PGR-340 besluit B2 — de filterrij is een rij van gelabelde GROEPEN, elk één dimensie.
   Komt er een tweede groep bij (actieve opdracht, PGR-349), dan staat die hier naast met
   eigen label en eigen role="group"; de scheiding maakt zichtbaar dat het een andere soort
   keuze is dan een zesde contract-chip. column-gap ruimer dan de chip-gap, zodat de
   groepsgrens leesbaar is zonder scheidingslijn. */
.fw-filterrij { display: flex; align-items: center; gap: 8px 26px; flex-wrap: wrap; padding: 4px 0 16px; }
.fw-filter-groep { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fw-contract-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 16px; }
.fw-contract-filter__label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.fw-contract-filter__chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* Aantal per chip: het getal is ondergeschikt aan het label, dus lichter en smaller.
   Op de actieve chip erft het de witte tekstkleur, vandaar currentColor met opacity. */
.fw-chip-aantal { font-weight: 700; font-variant-numeric: tabular-nums; color: currentColor; opacity: .6; margin-left: 2px; }
/* Afkapping — eigen element, nooit een breuk in de teller (besluit B1). Waarschuwend van
   toon omdat het betekent dat er gegevens ontbreken; komt bij een vestigingsgroep niet voor.

   De RAND draagt hier de zichtbaarheid, niet de vulling: --color-warning-soft haalt maar
   1,06:1 op de witte card (1,26:1 op de donkere), dus als blok is het vlak nauwelijks te
   onderscheiden. Vandaar een eigen randtoken i.p.v. --color-warning: die is #ED8936 en komt
   op wit niet verder dan 2,55:1, onder de 3:1 die een UI-grens nodig heeft. #D97706 haalt
   3,19:1 op de card en 3,00:1 op de eigen vulling. In donkere modus haalt --color-warning
   (#FACC15) 10,45:1 en is een eigen token onnodig.
   De tekst staat op --color-text: 11,44:1 in beide thema's. */
/* PGR-442 STOP 2 — de melding dat een BEWAARDE filterstand is uitgezet.
 *
 * ⚠ Bewust GEEN `.fw-afkapping`. Die twee stonden als identieke oranje balken onder elkaar
 * terwijl ze verschillende vragen beantwoorden: de afkapping zegt "de lijst is onvolledig",
 * deze zegt "jouw instelling is weggehaald". Alleen de tweede vraagt om een handeling.
 *
 * Het onderscheid zit in de PLAATSING en niet in kleur alleen (PO-eis): deze notitie hangt
 * onder de CHIPRIJ — daar staat wat er is uitgezet — en de afkapping staat bij de LIJST.
 * Daarmee zegt de positie al wat het onderwerp is, en het werkt ook voor wie kleur slecht
 * onderscheidt.
 *
 * Waarom niet samenvoegen tot één balk: dat suggereert één oorzaak, en de afkapping zegt
 * niets over je filters. Bovendien verschijnt de afkapping vaak en deze zelden — in één
 * element valt het zeldzame weg in het gewende.
 *
 * Vorm: geen gevulde waarschuwingsbalk maar een aangehechte notitie. Hij zit tegen de chips
 * aan (negatieve marge boven) zodat hij er zichtbaar bij hoort.
 */
.kf-uitgezet {
  /* `inline-flex` en niet `flex`: hij hoort om zijn tekst heen te zitten. Over de volle
     breedte raakt hij ook de tabel eronder aan en leest hij alsnog als een band over de
     lijst — precies het onderscheid dat hier het punt is. */
  display: inline-flex; align-items: flex-start; gap: 8px;
  max-width: 100%;
  margin: -6px 0 12px; padding: 8px 12px;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 6px 6px 0;
  background: var(--color-primary-softer);
  font-size: 12.5px; line-height: 1.45; color: var(--color-text);
}
.kf-uitgezet svg { flex: 0 0 auto; margin-top: 1px; color: var(--color-primary-darker); }

@media (prefers-color-scheme: dark) {
  /* ⚠ Direct ná de basisregel, om dezelfde reden als bij `.fw-afkapping` hieronder: een media
     query verhoogt de specificiteit niet, dus tussen twee `.kf-uitgezet`-regels wint puur de
     volgorde in het bestand. */
  .kf-uitgezet {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-left-color: var(--color-primary);
  }
  .kf-uitgezet svg { color: var(--color-primary); }
}

.fw-afkapping {
  --fw-afkapping-rand: #D97706;
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px;
  padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.45;
  background: var(--color-warning-soft);
  border: 1.5px solid var(--fw-afkapping-rand);
  color: var(--color-text);
}
.fw-afkapping svg { flex: 0 0 auto; margin-top: 1px; color: var(--fw-afkapping-rand); }
/* In donkere modus is --color-warning #FACC15 en haalt die 10,45:1 op de card, dus daar is
   het eigen token onnodig.

   ⚠ Deze media query moet ÍN dit blok blijven staan, direct ná de basisregel. Een media
   query verhoogt de specificiteit niet, dus tussen twee `.fw-afkapping`-regels wint puur de
   volgorde in het bestand. Hij stond eerst 600 regels hoger in het grote dark-blok en
   verloor daardoor stil van `--fw-afkapping-rand: #D97706` hieronder: donkere modus kreeg de
   lichte-modus-rand (nog altijd 5,02:1, dus niet kapot — wel dode CSS en een comment die
   iets anders beloofde dan er gebeurde). Gevonden door Copilot als low-confidence opmerking. */
@media (prefers-color-scheme: dark) {
  .fw-afkapping { --fw-afkapping-rand: var(--color-warning); }
}

/* PGR-430 — herstelmelding. Bewust NIET dezelfde vorm als .fw-afkapping hierboven.

   Besluit B1 van PGR-340: een selectie en een afkapping mogen er niet hetzelfde uitzien.
   Sinds dit ticket zijn er drie soorten meldingen boven een lijst, en die moeten alle drie
   te onderscheiden zijn:
     - afkapping   "je ziet niet alles omdat het er te veel zijn"  → waarschuwend, oranje rand
     - herstel     "je ziet minder omdat jij zelf iets aan hebt"   → informatief, neutrale rand
     - vervallen   "het stond aan en leverde niets op"             → zelfde vorm als herstel
   Herstel en vervallen delen hun vorm omdat het twee lezingen van dezelfde gebeurtenis zijn;
   de tekst verschilt en de knop verdwijnt als er niets meer te wissen is.

   Geen waarschuwingskleur: er is niets mis, er staat alleen iets aan. Een driehoek zou de
   afkappingsmelding devalueren, en die gaat over iets waar de gebruiker niets aan kan doen.
   De rand draagt de begrenzing (--color-border haalt de 3:1 die een UI-grens nodig heeft),
   de tekst staat op --color-text. */
.dnst-filterherstel {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.45;
  background: var(--color-surface-alt, var(--color-surface));
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
}
.dnst-filterherstel svg { flex: 0 0 auto; color: var(--color-text-muted); }
.dnst-filterherstel .btn { margin-left: auto; }

.fw-contract-chip {
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--color-surface); border: 1.5px solid var(--color-border); color: var(--color-text-muted);
  transition: border-color .12s, background .12s, color .12s;
}
.fw-contract-chip:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.fw-contract-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.contract-pill {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: var(--color-primary-softer);
  color: var(--color-primary-dark); border: 1px solid var(--color-primary-soft); vertical-align: middle;
}
.fw-row { cursor: pointer; transition: background 0.13s; }
/* Alleen gesloten rijen krijgen de blauwe hover; een open rij houdt zijn
   rustige neutrale actieve staat (geen blauwe hover-vlek). */
.fw-row:not(.fw-row--open):hover { background: var(--color-primary-softer); }
.fw-row td { padding: 13px 16px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.fw-row td:first-child { padding-left: 0; }
/* Rijen zijn fw-row + fw-expand-row paren, dus .fw-row:last-child matcht niet
   meer. Haal de rand weg van de laatste hoofd-rij (nth-last-child(2)) én van de
   laatste (uitklap-)rij, zodat de tabel zonder trailing hairline eindigt —
   dicht én open. */
#fw-tbody tr:nth-last-child(2) > td,
#fw-tbody tr:last-child > td { border-bottom: none; }
.fw-naam-cell { display: flex; align-items: center; gap: 12px; }
.fw-avatar {
  width: 40px; height: 40px; border-radius: 50%; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0.02em;
  background: var(--color-primary-soft); color: var(--color-primary-darker);
}
.fw-naam { font-weight: 700; font-size: 14px; color: var(--color-text); line-height: 1.3; }
.fw-vestiging { font-size: 13px; color: var(--color-text-muted); font-weight: 600; }
.fw-aandacht-cell { width: 160px; vertical-align: middle; }
.cap-cell { min-width: 180px; }
.cap-summary {
  font-size: 12.5px; font-weight: 600; color: var(--color-text-muted);
  margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}
.cap-over { font-size: 11.5px; font-weight: 700; color: var(--color-danger); }
.cap-bar { height: 6px; background: var(--color-border); border-radius: 999px; overflow: hidden; }
.cap-bar__fill { height: 100%; border-radius: 999px; background: var(--color-primary); transition: width 0.5s cubic-bezier(0.16,1,0.3,1); }
.cap-bar__fill--full { background: var(--color-danger); }
.cap-bar__fill--low  { background: var(--color-success); }

/* Uitklap-rij capaciteit per week (PGR-286 navigatie + PGR-287 paneel) */
.fw-expand-btn {
  width: 26px; height: 26px; flex-shrink: 0; padding: 0; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
  background: transparent; color: var(--color-text-muted); transition: background 0.13s, color 0.13s;
}
.fw-expand-btn:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.fw-expand-btn svg { transition: transform 0.18s cubic-bezier(0.16,1,0.3,1); }
.fw-row--open .fw-expand-btn svg { transform: rotate(90deg); }
/* Open rij: rustige, neutrale actieve staat (geen blauwe vlek). */
.fw-row--open { background: var(--color-surface-soft); }
.fw-naam-link { color: inherit; text-decoration: none; }
.fw-naam-link:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* Uitklap-paneel als 'lade': neutrale goot met een witte kaart erin,
   één sky-blue rail als koppeling naar de open rij. Geen blauwe slab. */
.fw-expand-row > td { padding: 0; border-bottom: 1px solid var(--color-border); background: var(--color-surface-alt); }
.fw-expand-panel { padding: 12px 28px 16px 20px; }
.fw-expand-loading, .fw-expand-empty { font-size: 13px; font-weight: 600; color: var(--color-text-muted); padding: 14px 8px; }
/* Paneel-kop met horizon-switcher (4/8/12 weken). */
.fw-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 8px; padding: 0 2px;
}
.fw-panel-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.fw-horizon { display: inline-flex; align-items: center; gap: 2px; }
.fw-horizon-btn {
  min-width: 28px; padding: 3px 8px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-muted);
  font-size: 12px; font-weight: 800; cursor: pointer;
  border-radius: 0; margin-left: -1px; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fw-horizon-btn:first-of-type { border-radius: 999px 0 0 999px; margin-left: 0; }
.fw-horizon-btn:last-of-type { border-radius: 0 999px 999px 0; }
.fw-horizon-btn:hover { color: var(--color-primary-dark); border-color: var(--color-primary); z-index: 1; position: relative; }
.fw-horizon-btn.is-active {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff; z-index: 2; position: relative;
}
.fw-horizon-suffix { font-size: 12px; font-weight: 700; color: var(--color-text-muted); margin-left: 8px; }

/* Paneel-tabel: één kopregel + weekrijen in vaste kolommen (tabular figures). */
.fw-week-table {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.fw-week-head, .fw-week-row {
  display: grid;
  grid-template-columns: minmax(215px, 1.4fr) 62px 62px 72px 92px minmax(132px, max-content);
  align-items: center;
  column-gap: 14px;
  padding: 7px 16px;
}
.fw-week-head {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.fw-week-head .fw-h-num { text-align: right; }
.fw-week-row {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.12s;
}
.fw-week-row:last-child { border-bottom: none; }
.fw-week-row:hover { background: var(--color-surface-soft); }
.fw-week-row--empty { background: var(--color-surface-soft); }
.fw-week-row--empty .fw-week-lbl, .fw-week-row--empty .fw-week-range { color: var(--color-text-soft); }
.fw-week-cell { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fw-week-lbl { font-weight: 900; font-size: 14px; color: var(--color-text); white-space: nowrap; letter-spacing: -0.01em; min-width: 22px; }
.fw-week-range { font-size: 12px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.fw-col-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; color: var(--color-text); }
.fw-col-num--rest-ok { color: var(--color-success); }
.fw-col-num--rest-over { color: var(--color-danger); }
.fw-week-row--empty .fw-col-num { color: var(--color-text-soft); font-weight: 700; }
.fw-col-bar .cap-bar { width: 100%; }
.fw-week-note { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); padding: 9px 4px 2px; }
.fw-week-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: 12px; font-weight: 800; padding: 5px 13px; border-radius: 999px;
  background: var(--color-surface); color: var(--color-accent-dark);
  border: 1px solid var(--color-accent); transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.fw-week-btn:hover { background: var(--color-accent-soft); color: var(--color-accent-dark); border-color: var(--color-accent-dark); }

/* ── Flexwerker detail (flexwerker_detail.html) ───────────────────────── */
.fw-page-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fw-page-main  { display: flex; flex-direction: column; gap: 20px; }
.fw-top-card { display: flex; gap: 16px; align-items: stretch; }
.fw-top-left {
  flex: 0 0 50%;
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(135deg, var(--color-primary-softer) 0%, var(--color-surface) 80%);
  position: relative;
  box-sizing: border-box;
}
.fw-top-divider { display: none; }
.fw-top-right {
  flex: 0 0 43%;
  padding: 20px;
  display: flex; flex-direction: column; gap: 0;
}
.fw-top-filters { margin-top: 4px; }
/* PGR-430 Fase 3 — de chiprij van /flexwerker-diensten staat op /flexwerker binnen de
   hero-card, niet als eigen balk boven een lijst. `.filters-bar` brengt daar zijn eigen
   `padding: 14px 20px` mee en die duwt de rij uit de kaartuitlijning; alleen de horizontale
   marge hoort weg te vallen, de verticale ruimte tussen chips en samenvatting blijft. */
.fw-top-filters .filters-bar { padding: 0 0 10px; }
.fw-top-summary {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .fw-top-card { flex-direction: column; }
  .fw-top-right { flex: 1 1 auto; }
}
.fw-suggestie-card { display: flex; flex-direction: column; gap: 0; }
.fw-suggestie-card--actief {
  border: 1.5px solid var(--color-primary);
  background: var(--color-primary-soft);
}
.fw-suggestie-sub { font-size: 12px; color: var(--color-text-muted); margin: 0 0 12px; line-height: 1.4; }
.fw-suggestie-body { flex: 1; min-height: 240px; }
.fw-suggestie-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--color-border); margin-top: 8px; }
.fw-sug-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-md);
  font-size: 12px; font-weight: 700; border: 1.5px solid transparent;
  cursor: pointer; transition: background 0.13s, border-color 0.13s, color 0.13s;
  line-height: 1;
}
.fw-sug-btn img { display: block; border-radius: 2px; }
.fw-sug-btn--wa   { background: #E8F8EE; color: #1A7A3E; border-color: #A8DDB9; }
.fw-sug-btn--wa:hover { background: #25D366; color: #fff; border-color: #25D366; }
.fw-sug-btn--aisha { background: var(--color-primary-softer); color: var(--color-primary); border-color: var(--color-primary-light); }
.fw-sug-btn--aisha:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.fw-sug-btn--h1 { background: var(--color-surface-alt); color: var(--color-text-muted); border-color: var(--color-border); }
.fw-sug-btn--h1:hover { background: var(--color-surface-hover); color: var(--color-text); }
.fw-sug-btn--aanpassen { background: var(--color-surface); color: var(--color-primary-darker); border-color: var(--color-primary); }
.fw-sug-btn--aanpassen:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Pakket — tijdlijn-markering */
.shift-row--in-pakket { border-left: 3px solid var(--color-primary); background: var(--color-primary-softer); padding-left: 5px; }
.shift-row--dimmed { opacity: 0.4; }
.shift-row--dimmed * { pointer-events: none; }
.shift-row--dimmed .pkt-checkbox { pointer-events: auto; opacity: 1; }
.pkt-checkbox { flex-shrink: 0; margin: 0; width: 15px; height: 15px; cursor: pointer; accent-color: var(--color-primary); }

/* Pakket bijsturing-modus — extra checkbox-kolom in grid */
.shifts-list--pkt .shift-row         { grid-template-columns: 20px 88px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 44px minmax(0,1fr) 68px 20px 62px 22px 44px 58px 32px; }
.shifts-list--pkt .shift-row--no-contract { grid-template-columns: 20px 88px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 0 minmax(0,1fr) 68px 20px 62px 22px 44px 58px 32px; }
.shifts-list--pkt .shifts-header     { grid-template-columns: 20px 88px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 44px minmax(0,1fr) 68px 20px 62px 22px 44px 58px 32px; }
.shifts-list--pkt .shifts-header.shift-row--no-contract { grid-template-columns: 20px 88px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 0 minmax(0,1fr) 68px 20px 62px 22px 44px 58px 32px; }
.shifts-list--pkt .shifts-header::before { content: ""; display: block; }

/* Pakket — banner dienst-lijst */
.pkt-svc-list { display: flex; flex-direction: column; gap: 9px; }
.pkt-svc-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.pkt-svc-main { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; min-width: 130px; }
.pkt-svc-datum { font-weight: 700; color: var(--color-text); white-space: nowrap; text-transform: capitalize; }
.pkt-svc-tijd { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pkt-svc-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pkt-svc-klant { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); font-weight: 600; }
.pkt-svc-loc { font-size: 11px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-hero-row { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.fw-chips-section { display: flex; flex-direction: column; gap: 10px; }
.fw-chips-section + .fw-chips-section { margin-top: 4px; }
.fw-chips-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-text-muted);
}
.fw-chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dag-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.dag-chip--0 { background: var(--color-surface-alt); color: var(--color-text-soft); }
.dag-chip--1 { background: #E0F5FD; color: var(--color-primary-darker); }
.dag-chip--2 { background: #B3E6F8; color: var(--color-primary-dark); }
.dag-chip--3 { background: var(--color-primary); color: #fff; }
.functie-chip {
  display: inline-flex; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--color-surface-alt); color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.functie-chip--main {
  background: var(--color-primary-softer); color: var(--color-primary);
  border-color: var(--color-primary-light); font-weight: 900;
}
.summary-strip { display: contents; }
.summary-kpi    { display: flex; flex-direction: column; gap: 2px; }
.summary-kpi__val { font-size: 24px; font-weight: 900; color: var(--color-text); letter-spacing: -0.02em; line-height: 1; }
.summary-kpi__lbl { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.summary-divider  { width: 1px; height: 36px; background: var(--color-border); flex-shrink: 0; }
.zoek-drempel-wrap { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.zoek-drempel-lbl  { font-size: 12px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.zoek-drempel-wrap input[type=range] { flex: 1; max-width: 220px; accent-color: var(--color-primary); }
#zoek-drempel-val  { font-size: 13px; font-weight: 700; color: var(--color-primary-dark); min-width: 36px; }
.zoek-drempel-sep  { width: 1px; height: 20px; background: var(--color-border); flex-shrink: 0; margin: 0 4px; }
.candidates-limit-input { width: 64px; padding: 3px 6px; font-size: 13px; font-weight: 600; border: 1px solid var(--color-border); border-radius: 6px; text-align: center; color: var(--color-text); background: var(--color-surface); }
.week-card__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  cursor: pointer; user-select: none;
}
.week-card__head:hover .week-title { color: var(--color-primary-dark); }
.week-card__head::after { content: '▾'; margin-left: 4px; color: var(--color-text-muted); font-size: 11px; display: inline-block; transition: transform 0.15s; }
.week-card--collapsed .week-card__head::after { transform: rotate(-90deg); }
.week-card--collapsed .shifts-list { display: none; }
.week-card--collapsed .week-card__head { margin-bottom: 0; }
.week-card--collapsed { margin-bottom: 6px; }
.week-title  { font-size: 15px; font-weight: 900; color: var(--color-text); letter-spacing: -0.01em; transition: color 0.13s; white-space: nowrap; }
.week-dates  { font-size: 12px; color: var(--color-text-muted); font-weight: 600; white-space: nowrap; padding-left: 4px; border-left: 2px solid var(--color-border); }
.week-count  {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
  background: var(--color-surface-alt); padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.week-count strong { color: var(--color-text); }
.shifts-list { display: flex; flex-direction: column; }
.day-group   { margin-bottom: 4px; }
.day-group:last-child { margin-bottom: 0; }
.day-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-muted);
  padding: 12px 0 4px; border-top: 1px solid var(--color-border);
}
.day-group:first-child .day-label { border-top: none; padding-top: 4px; }
/* 13-kolom grid: tijd | klant | locatie | afdeling | type | functie | status | vgd | afstand |
   opt-in | eisen | score | wa.

   ⚠ De tijdkolom is 88px en niet 70px. Bij 70px paste "15:00–22:30" plus het dagdeel-icoon
   niet (84px inhoud gemeten): `.sr-time` heeft `nowrap` zonder `overflow`, dus het icoon liep
   de klantkolom in en overlapte de klantnaam met 6px. Verbreden en niet clippen — het icoon
   draagt betekenis (dagdeel) en mag niet half wegvallen.

   De opt-in-kolom (PGR-316) staat direct links van de score, en dat is op alle vier de
   lijsten zo: het is een business-regel die de score verlaagt, dus hij leest naast het
   getal dat hij beïnvloedt. Wie hier een kolom toevoegt of verplaatst, doet dat in álle
   zeven grid-definities hieronder én in de .shifts-header-markup van
   templates/flexwerker_detail.html — die vier varianten (pkt / no-contract / header)
   moeten identiek blijven, anders schuift de kop op t.o.v. de rijen. */
.shift-row {
  display: grid;
  grid-template-columns: 88px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 44px minmax(0,1fr) 68px 20px 62px 22px 44px 58px 32px;
  align-items: center; gap: 8px;
  padding: 7px 8px; margin: 0 -8px;
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast);
}
.shift-row:last-child { border-bottom: none; }
.shift-row:hover { background: var(--color-primary-softer); }
.sr-time    { font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-cell    { font-size: 12px; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sr-cell--bold  { font-weight: 700; }
.sr-cell--muted { color: var(--color-text-muted); }
.sr-center  { display: flex; align-items: center; justify-content: center; }
.sr-right   { display: flex; align-items: center; justify-content: flex-end; }
.sr-num     { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; text-align: right; padding-left: 8px; }
.shifts-header {
  display: grid;
  grid-template-columns: 88px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 44px minmax(0,1fr) 68px 20px 62px 22px 44px 58px 32px;
  gap: 8px; padding: 4px 8px 5px; margin: 4px -8px 0;
  font-size: 9.5px; font-weight: 800; color: var(--color-text-muted);
  letter-spacing: 0.05em; text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
}
.fw-contact-btns { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-shrink: 0; }
.toon-meer-btn {
  font-size: 12px; font-weight: 700; color: var(--color-primary-dark);
  background: none; border: none; cursor: pointer; padding: 6px 0;
  font-family: inherit; text-decoration: underline;
}
.toon-meer-btn:hover { color: var(--color-primary); }
.shift-row--no-contract { grid-template-columns: 88px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 0 minmax(0,1fr) 68px 20px 62px 22px 44px 58px 32px; }
.shift-row--gepland { background: var(--color-surface-soft); cursor: default; }
.shift-row--gepland:hover { background: var(--color-surface-soft); }
.shift-row--bevestigd { background: var(--color-success-soft); box-shadow: inset 0 0 0 1.5px var(--color-success); }
.shift-row--bevestigd:hover { background: var(--color-success-soft); filter: brightness(0.97); }
.shift-row--gewerkt { background: var(--color-success-soft); box-shadow: inset 0 0 0 1.5px var(--color-success); cursor: default; }
.shift-row--gewerkt:hover { background: var(--color-success-soft); }
.shift-row--pending { background: var(--color-warning-soft); outline: 1.5px dashed var(--color-warning); outline-offset: -1.5px; }
.shift-row--pending:hover { background: var(--color-warning-soft); filter: brightness(0.97); }
.shift-status-badge {
  display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px;
  font-size: 10.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; vertical-align: middle;
  background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border);
}
.shift-status-badge--bevestigd {
  background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success);
}
.shift-status-badge--pending {
  background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning);
}
.shift-applicant-pill {
  display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px;
  font-size: 10.5px; font-weight: 800; line-height: 1.4; white-space: nowrap; vertical-align: middle;
  background: var(--color-primary-softer); color: var(--color-primary-dark); border: 1px solid rgba(0,174,239,.2);
}
.shift-eye-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  color: var(--color-text-muted); flex-shrink: 0;
}
.shift-row--pending:hover .shift-eye-icon { color: var(--color-primary-dark); }
.shift-voorgesteld-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; color: var(--color-primary-dark); flex-shrink: 0;
}
.fwd-hero-chips { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }

/* Compacte datum+filter-regel (PGR-289 Fix 2): naast elkaar, wrapt op smal. */
.fwd-controls-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 28px; }
.fwd-controls-row > .ctrl-group { margin: 0; flex: 0 1 auto; }

/* Week/dag-groepskoppen op /flexwerker-diensten (PGR-289, periode-modus). */
/* Witruimte-hiërarchie in de Diensten-tabel (PGR-319, comment 45400).
   Drie niveaus in oplopende afstand, zodat de groepering uit de VORM blijkt en niet
   alleen uit de koppen — het probleem is dichtheid, dus opgelost met ruimte en niet met
   nieuwe scheidingslijnen of achtergrondvlakken.
     1. binnen een dag, tussen dienstregels — 14px celpadding boven+onder, ongewijzigd;
     2. tussen dagen, boven de dagkop — 14 + 30 = ~44px;
     3. tussen weken, boven de weekbalk — 14 + 44 = ~58px.
   Vóór deze wijziging was de dagovergang (14 + 9 = 23px) krapper dan de ruimte tussen
   twee dienstregels (28px), waardoor een nieuwe dag optisch dichter op de vorige stond
   dan twee diensten van dezelfde dag. */
.week-group-head > td { padding: 0 !important; background: var(--color-surface-alt); border-top: 2px solid var(--color-border); }
.week-group-head__inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; }
.week-group-head__lbl { font-size: 13px; font-weight: 800; color: var(--color-primary-darker); text-transform: uppercase; letter-spacing: 0.03em; }
.week-group-head__range { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.week-group-head__cap { margin-left: auto; }
.week-group-head__nocap { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.day-group-head > td { padding: 0 !important; background: var(--color-surface); border-top: 1px solid var(--color-border); }
/* Scroll-offset = sticky topbar (60px) + 16px marge; navigator is niet meer sticky (PGR-306). */
.day-group-head { scroll-margin-top: 76px; }
.day-group-head__inner { display: flex; align-items: baseline; gap: 10px; padding: 30px 14px 6px; }
/* Eerste dag van een week volgt direct op de weekbalk: die draagt de weekafstand al,
   dus hier geen tweede gat erbovenop. */
.week-group-head + .day-group-head .day-group-head__inner { padding-top: 10px; }
.day-group-head__date { font-size: 13px; font-weight: 700; color: var(--color-text); }
.day-group-head__count { font-size: 11px; font-weight: 600; color: var(--color-text-soft); }

/* Doorloper-rij: dienst die vóór het venster startte, gedempt bovenaan de startdag. */
.dienst-row--doorloper { opacity: 0.6; }
.doorloper-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--color-surface-alt); color: var(--color-text-muted); white-space: nowrap; }

/* Week-navigator (PGR-289) — 7-daagse strip, sticky bovenaan de lijst. */
.fwd-week-nav { position: sticky; top: 8px; z-index: 5; margin: 4px 0 14px; padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.fwd-week-nav__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.fwd-week-nav__title { font-size: 13px; font-weight: 800; color: var(--color-primary-darker); text-transform: uppercase; letter-spacing: 0.03em; }
/* Weekbereik achter het weeknummer (R1-g): "· 27 jul – 2 aug 2026". Dit draagt de maand voor de
   hele week, zodat de aparte maandregel boven het rooster kon vervallen. Stiller en niet-vet,
   zodat het weeknummer het label blijft en dit de toelichting is; wél binnen dezelfde span, dus
   het wrapt mee in plaats van de kopregel te verbreden. */
.fwd-week-nav__bereik { font-weight: 600; color: var(--color-text-soft); text-transform: none; letter-spacing: 0; }
.fwd-week-nav__legend { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; color: var(--color-text); }
.fwd-nav-lg { display: inline-flex; align-items: center; gap: 6px; }
/* Legenda-vlakje: dezelfde vúlling als een dichte dagcel (het labelt die cel), maar
   bewust een zwaardere rand — --color-border-strong tegen --color-border op de cel.
   Reden: de swatch is de enige plek waar het grijs zónder aangrenzend wit te zien is, dus
   daar ontbreekt de referentie die de vulling in de rij van zeven cellen wél heeft. Op
   1,10:1 licht en 1,13:1 dark is een vlakje van 14px met alleen de celrand niet te vinden.
   De vulling zelf is niet aangepast — dit is legenda-chroom, geen datakanaal. */
.fwd-nav-lg__vlak { width: 14px; height: 14px; border-radius: 3px; background: var(--color-surface-recessed); border: 1px solid var(--color-border-strong); display: inline-block; }
.fwd-week-nav__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
/* Celvulling draagt open/dicht (PGR-336): wit = er zijn open passende diensten, grijs =
   geen. min-height blijft 86px als VLOER; de zeven cellen zijn grid-items op één rij en
   strekken dus vanzelf mee met de drukste dag van de weergegeven week. Daardoor is de
   hoogte per week uniform zonder JS-meting, houdt een normale week exact de huidige
   hoogte, en verandert offsetHeight alleen bij weekwissel — het regressiepunt dat in
   PGR-319 al is afgedekt. */
.fwd-nav-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 8px; min-height: 86px; border: 1.5px solid var(--color-border); border-radius: 10px; background: var(--color-surface); font-family: inherit; cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast); }
.fwd-nav-cell--dicht { background: var(--color-surface-recessed); }
.fwd-nav-cell:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-softer); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
/* Geen achtergrond op de geselecteerde dag: de vulling is een datakanaal en selectie mag
   dat kanaal niet bezetten (PGR-336). De accentrand draagt de selectie alleen, verzwaard
   met een inset-ring zodat hij het ook op beide vullingen zonder arcering redt — inset en
   niet border-width, want een dikkere rand zou de celinhoud een halve pixel verschuiven. */
.fwd-nav-cell.is-active { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
/* Lege staat = "geen scroll-doel in de huidige weergave" (gefilterd), NIET "geen open
   diensten" (dat is de vulling). Drie kanalen, drie betekenissen, geen overlap. Gevolg dat
   we aanvaarden: bij een actief filter kan een witte, gedimde cel voorkomen.
   ⚠ De dimming zit op de KINDEREN en niet op de button, en dat is geen stijlkeuze maar een
   correctheidseis. `opacity` op het element mengt óók de celvulling terug naar het
   cardoppervlak, waardoor een dichte gedimde cel lichter — dus "opener" — leest dan een
   dichte niet-gedimde cel: de vulling zei dan het omgekeerde van de waarheid. Meting:
   1,10:1 → 1,05:1 licht en 1,13:1 → 1,07:1 dark, terwijl "open tegen dicht" zelf maar
   1,10:1 is. De rand krijgt daarom een expliciete kleur (--color-border-dimmed) in plaats
   van dat `opacity` hem dempt. Zet de dimming nooit terug op de button. */
.fwd-nav-cell--empty, .fwd-nav-cell:disabled { cursor: default; border-style: dashed; border-color: var(--color-border-dimmed); }
.fwd-nav-cell--empty > *, .fwd-nav-cell:disabled > * { opacity: 0.55; }
.fwd-nav-cell__dag { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; }
.fwd-nav-cell__num { font-size: 15px; font-weight: 800; color: var(--color-text); line-height: 1; }
/* Maand als ACHTERVOEGSEL op het dagcijfer, alleen in de cel waar de maand wisselt — de
   kalenderconventie uit R1-g, die de zwevende maandbandregel vervangt. Kleiner en stiller dan
   het dagcijfer: het cijfer blijft het element dat je scant, de maand is de kwalificatie
   erbij. Geen eigen regel, dus geen extra hoogte op weken binnen één maand. */
.fwd-nav-cell__maand { font-size: 10px; font-weight: 700; color: var(--color-text-soft); margin-left: 2px; text-transform: lowercase; }

/* Werkpatroon-rij (PGR-319/PGR-338) — laag 2, ONDER de dagkaartjes. Eigen grid met exact
   de kolomdefinitie van .fwd-week-nav__grid, zodat de stippen onder hun weekdag uitlijnen
   zonder dat de dagkaartjes zelf iets van laag 2 hoeven te weten.
   ⚠ De klassenamen blijven .fwd-hist-* terwijl de rij in de interface "Werkpatroon" heet.
   Dat is een bewuste keuze van PGR-338 (geen gebruikerswaarde, wel merge-risico) en geen
   op te ruimen inconsistentie. */
.fwd-hist { margin-top: 8px; }
/* De rijtitel is het anker van de popover: de rij heeft geen legenda-item, dus het
   info-icoon hangt hier. position: relative maakt de popover-positionering hieraan vast. */
.fwd-hist__label {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-text-muted); margin-bottom: 4px;
}
.fwd-hist__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fwd-hist-cell {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  min-height: 14px;
}
/* Weinig bewijs = heel lichte GEVULDE stip, geen leeg rondje: naast een blokkade-teken
   (zelf een rondje met streep) zou een leeg rondje op stipformaat maar één schuine lijn
   verschil houden. Eén, twee, drie stippen lopen zo op in zichtbaarheid en het
   blokkade-teken is het enige ronde-met-lijn element in de rij. */
.fwd-hist-dot {
  width: 6px; height: 6px; border-radius: 999px; display: inline-block;
  background: var(--color-hist);
}
.fwd-hist-blok { width: 13px; height: 13px; color: var(--color-hist); flex-shrink: 0; }
.fwd-hist__melding {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--color-text-muted);
}
.fwd-hist__melding .fwd-hist-blok { width: 14px; height: 14px; }

/* Het enige info-icoon van deze card; alle uitleg zit erachter. */
.fwd-hist-info {
  border: none; background: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--color-text-muted); display: inline-flex; align-items: center;
}
.fwd-hist-info:hover { color: var(--color-primary); }
/* ── Uitleg-popover bij een besturingselement (uitlegpop.js) ─────────────────────────
   Vervangt de CSS-only `.tiebreaker-tooltip`, die geen link kon bevatten en alleen op
   `:hover` werkte. Vorm bewust gelijk aan `.fwd-hist-pop` hieronder: het is hetzelfde
   soort ding op hetzelfde soort plek, en twee popover-vormen naast elkaar leest als twee
   betekenissen. */
.uitlegpop { position: relative; display: inline-flex; align-items: center; }
.uitlegpop__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: none; border: none; border-radius: 50%;
  color: var(--color-text-muted); cursor: pointer;
}
.uitlegpop__btn:hover { color: var(--color-primary); background: var(--color-surface-alt, rgba(0,0,0,.04)); }
/* ⚠ Zichtbare focus: deze knop is met het toetsenbord te bereiken — dat was precies wat de
   CSS-tooltip niet was — en dan hoort te zien te zijn waar je staat. */
.uitlegpop__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.uitlegpop__pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: min(340px, calc(100vw - 32px));
  padding: 14px 16px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.14));
  font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--color-text);
  white-space: normal; text-align: left; cursor: default;
  /* Rechts verankerd: deze knoppen staan rechts in hun balk, dus links uitlijnen zou de
     popover van het scherm af duwen. Zelfde reden als bij de oude tooltip. */
  text-transform: none; letter-spacing: normal;
}
.uitlegpop__titel { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.uitlegpop__pop p { margin: 0 0 8px; }
.uitlegpop__link {
  display: inline-block; margin-top: 2px;
  font-weight: 700; color: var(--color-primary); text-decoration: none;
}
.uitlegpop__link:hover { text-decoration: underline; }

.fwd-hist-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  width: min(360px, calc(100vw - 32px));
  padding: 14px 16px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.14));
  font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--color-text);
  white-space: normal; text-align: left; cursor: default;
  /* De popover hangt in .fwd-hist__label, dat kapitalen en letterspatiëring zet voor de
     rijtitel. Zonder deze reset zou de hele uitleg in kapitalen renderen. */
  text-transform: none; letter-spacing: normal;
}
.fwd-hist-pop__title { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.fwd-hist-pop p { margin: 0 0 8px; }
.fwd-hist-pop p:last-child { margin-bottom: 0; }
/* Eén tijdregel per geplande dienst, onder elkaar. Gecentreerd blijven: dat is de uitlijning
   van de huidige enkele regel, en omdat elke regel exact even breed is (HH:MM–HH:MM) lijnen
   ze gecentreerd net zo goed onder elkaar uit als links. Alleen een regel mét "+1" is iets
   breder; die paar pixels wegen niet op tegen een uitlijningswijziging die buiten scope valt
   (PGR-336 §1.8, comment 45397). */
.fwd-nav-cell__body { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fwd-nav-time { font-size: 10.5px; font-weight: 700; color: var(--color-text); line-height: 1.25; text-align: center; }
/* Eindtijd en "+1" horen bij elkaar: nooit afbreken tussen die twee. Het afbreekpunt van
   een smalle cel is de <wbr> ná de en-dash, dus achter de starttijd. */
.fwd-nav-time__tot { white-space: nowrap; }

/* Afwezigheidsmarkering (PGR-318) — laag 1, in het tijdenslot van de dagcel.
   ALLEEN een icoon: geen arcering, geen textuur, geen achtergrondkleur en geen zichtbare
   typenaam-tekst in de cel (besluit 1 uit comment 45562). Het icoon is een monochroom
   stroke-SVG in currentColor, dus het erft de celkleur en introduceert geen zesde tint.
   Bewust GEEN eigen kleur: --color-opdr is van laag 3, accent-oranje van de selectie, en de
   celvulling draagt open/dicht. Dit kanaal mag geen van die drie lenen.
   Bewust ook geen `opacity` hier: de dimming van een lege cel zit op de KINDEREN van de
   button (zie .fwd-nav-cell--empty > *), en dit icoon is zo'n kind — het wordt dus al
   meegedempt zonder dat deze regel er iets aan hoeft te doen. */
.fwd-afw { display: inline-flex; align-items: center; justify-content: center; }
/* NEUTRALE VOORGRONDKLEUR (R1-a, comment 45567). De tussenversie op HappyOne's kernkleur
   #FF1100 is afgekeurd en mag niet terugkomen: 45338 vroeg de VORM van HappyOne over te nemen
   en monochroom te blijven, zeven verzadigde glyphs winnen de aandachtshiërarchie van de card
   terwijl geen laag luider mag zijn dan de werkpatroon-stip (waargenomen luidheid, niet alleen
   contrastratio), en rood is foutsemantiek terwijl verlof geen fout is.
   GEWICHT OPGETROKKEN NAAR PARITEIT MET DE WERKPATROON-STIP (R2-a). De eerste neutrale versie
   stond op --color-text-soft en dáármee sloeg de hiërarchie om: het structurele, zwakke signaal
   (hoe vaak werkt iemand meestal op deze weekdag) domineerde visueel over het harde,
   planningsblokkerende feit. Nu --color-text-muted, het bestaande neutrale token — geen eigen
   hex, geen verzadigde kleur, geen extra kanaal.
   Gemeten tegen het cardoppervlak: stip 3,44:1 licht en 7,09:1 dark; --color-text-soft 4,02:1
   en 4,92:1 (in dark dus aantoonbaar STILLER dan de stip — de omslag die R2-a signaleert);
   --color-text-muted 7,53:1 en 7,94:1. In dark is dat pariteit met de stip.
   ⚠ In licht ligt de ratio boven die van de stip, en dat is bewust: het plafond van principe 5
   gaat over WAARGENOMEN luidheid en niet over de ratio alleen. De stip is een massief gevuld
   punt in een verzadigd blauw, dit is een 2,4px omtreklijn — een lijn heeft meer contrast nodig
   om even zwaar te wegen als een vlak. Vergelijk dus niet de getallen maar de weergave.
   Zichtbaarheid komt in beide modi uit de VOORGROND (stroke): geen achtergrond, geen arcering,
   geen textuur.
   Ook géén eigen dekkingsregel: de bestaande celdimming (.fwd-nav-cell--empty > *) regelt dat,
   en dat is een bekend openstaand punt (zie de bevinding in de PR). */
.fwd-afw-ico { display: block; color: var(--color-text-muted); }
/* Iets boven de tijden losgetrokken zodat de markering niet aan de laatste tijdregel plakt
   bij een botsing (geplande dienst én afwezigheid op dezelfde dag). Alleen wanneer er
   werkelijk een tijdregel boven staat — anders zou een dag zonder planning het icoon laag
   in de cel zetten. */
.fwd-nav-time + .fwd-afw { margin-top: 2px; }

/* Tekstregels onder het rooster: één per periode, met typenaam en absolute periode. Sibling
   van #fwd-week-nav, dus GEEN vierde rij in de navigator-card en buiten het bereik van de
   ResizeObserver die #fwd-week-nav meet. */
.fwd-afwezig { margin-top: 10px; }
.fwd-afw-blok { display: flex; flex-direction: column; gap: 4px; }
/* Zelfde regelvorm als de opdrachtregel (.fwd-opdr__regel): alleen de NAAM mag krimpen, de
   staart met de datums blijft altijd volledig zichtbaar. In een smalle card is dat het
   verschil tussen een leesbare regel en een halve einddatum. */
.fwd-afw-regel { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }
.fwd-afw-regel > span[aria-hidden] { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fwd-afw-ico--regel { flex: 0 0 auto; }
.fwd-afw-regel__naam { font-weight: 700; color: var(--color-text); flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwd-afw-regel__staart { flex: 0 0 auto; }

/* Weekrij op /flexwerkers: hetzelfde icoon, naast het weekbereik. Geen zichtbare typenaam —
   scanoppervlak. De sr-only-span binnen het icoon draagt de volledige zin (PGR-308-vangnet:
   een aria-label op een span zonder rol wordt niet door elke schermlezer gehonoreerd). */
.fwd-afw--week { margin-left: 6px; vertical-align: middle; }
/* Kleinste maat, gedempte tint, hooggeplaatst — zwakste element in de cel. De expliciete
   font-size en line-height houden <sup> uit de regelhoogte, zodat een "+1"-regel niet
   hoger wordt dan een gewone tijdregel. */
.fwd-nav-plus1 { font-size: 8px; font-weight: 800; color: var(--color-text-soft); line-height: 0; vertical-align: super; margin-left: 1px; }

/* Actieve-opdracht-rij (PGR-308) — laag 3, ONDER de Werkpatroon-rij. Eigen vocabulaire:
   dagspannende balk + tekstregel, geen stippen (laag 2), geen celvulling (laag 1), geen
   accent-oranje (selectie). Geen legenda-item en geen info-icoon: de tekstregel benoemt
   zichzelf voluit, inclusief de klantnaam en de absolute einddatum. */
/* 12px en niet de 8px van .fwd-hist: laag 2 (stippen) en laag 3 (balk) zijn beide dunne
   horizontale elementen en lezen bij 8px als één blok. Laag 2 heeft die ruimte niet nodig,
   want dáárboven staat een rij van zeven kaartjes die zichzelf al afbakent. */
.fwd-opdr { margin-top: 12px; }
/* Eigen rijtitel, spiegel van .fwd-hist__label — maar ZONDER position: relative en zonder
   info-icoon: laag 3 heeft geen popover, en het enige info-icoon van deze card hangt aan
   laag 2 (PGR-319). De titel bestaat omdat twee dunne horizontale lagen onder elkaar
   anders als één blok lezen. */
.fwd-opdr__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-text-muted); margin-bottom: 4px;
}
/* Exact de kolomdefinitie van .fwd-week-nav__grid, zodat de balk onder zijn weekdagen
   uitlijnt zonder dat de dagkaartjes iets van laag 3 hoeven te weten — zelfde afspraak
   als .fwd-hist__row. row-gap houdt gestapelde balken los van elkaar. */
/* Row-gap 5px en niet 3px (R1-c): balken met een verschillende periodevorm mogen niet tegen
   elkaar aan liggen, want dan lezen twee balken als één balk met een naad. Identieke vormen
   vallen sinds R1-c al samen in JS, dus wat hier nog stapelt is écht verschillend en moet dat
   ook laten zien. Column-gap blijft 6px — dat is de uitlijning op de dagkolommen. */
.fwd-opdr__balken { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px 6px; }
/* Géén track achter de balk. Dat is het structurele verschil met .cap-bar (PGR-288/289):
   zonder track is er geen noemer, dus geen "x van y"-lezing, dus geen verwarring met
   bezetting of beschikbaarheid. De balk dekt dagen, niet een aandeel. */
.fwd-opdr-balk {
  height: 10px; border-radius: 3px; min-width: 10px;
  background: var(--color-opdr);
  /* De rand is niet decoratie maar het leesbaarheidskanaal: de pastelvulling haalt 1,50:1
     op wit. Zelfde constructie als het opdrachtblok in de HappyOne-planner. Verwijder deze
     rand dus niet "omdat de balk al een kleur heeft" — dan is de balk in lichte modus weg. */
  border: 1px solid var(--color-opdr-rand);
}
/* Open uiteinde = de opdracht loopt door buiten de getoonde week. De rand valt aan die
   zijde weg en de hoek wordt recht: een blok dat netjes op zondag afsluit terwijl de
   opdracht nog maanden doorloopt, liegt over de duur. Randweglating in plaats van de
   eerdere pijlpunt, omdat een clip-path de rand doorsnijdt en het blok dan een kapotte
   omlijning krijgt. Twee losse regels: ze vullen elkaar in de cascade netjes aan, dus
   "beide zijden open" — de meest voorkomende vorm — heeft geen eigen regel nodig. */
.fwd-opdr-balk--open-links {
  border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.fwd-opdr-balk--open-rechts {
  border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;
}
/* Tekstregel over de volle breedte: de balk kan de tekst niet dragen (een balk van twee
   dagen is te smal), dus de splitsing is functioneel. Zelfde maat en tint als
   .fwd-hist__melding — laag 3 is niet luider dan laag 2. */
.fwd-opdr__regel {
  margin-top: 5px;
  font-size: 12px; font-weight: 600; color: var(--color-text-muted); line-height: 1.35;
}
/* De regel is een flexrij met drie delen: kop ("Actieve opdracht bij"), klantnaam, staart
   ("t/m 31 januari 2027"). Alleen de KLANTNAAM krimpt en breekt af; kop en staart staan op
   flex: 0 0 auto. Zonder deze verdeling knipt een smalle cel de datum af — en juist die
   datum maakt de bewering zelf-documenterend, dus die mag nooit het eerste zijn dat sneuvelt. */
.fwd-opdr__regel > span[aria-hidden],
.fw-opdr-regel > span[aria-hidden] {
  display: flex; align-items: baseline; min-width: 0; white-space: nowrap;
}
.fwd-opdr__kop, .fwd-opdr__staart { flex: 0 0 auto; white-space: pre; }
.fwd-opdr__klant {
  flex: 0 1 auto; min-width: 3ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700; color: var(--color-text);
}

/* PGR-308 — dezelfde regel op de flexwerkers-lijst, als tweede tekstregel in de naam-cel.
   Er is op die lijst geen kaart en geen metadata-gebied: het is een <tr> in .fw-table. Maat
   en tint volgen het aandachtsfactor_reden-subregeltje in de kolom ernaast, zodat de regel
   ondergeschikt blijft aan de naam. Dezelfde string-bouwer als de weekrooster-card. */
/* De regel is hier de KORTE vorm ("Actieve opdracht(en)"), dus er is geen klantnaam die de
   kolom kan oprekken. De eerdere ingreep op de intrinsieke sizing (`width: 0` +
   `min-width: 100%`, plus `flex: 1 1 auto; min-width: 0` op .fw-naam) is daarmee vervallen
   en verwijderd — gemeten: kolommen identiek met en zonder de regel. Komt de lange vorm hier
   ooit terug, dan komt die ingreep mee terug: een lange klantnaam herverdeelde de kolommen
   (kolom 1 van 667 naar 778px ten koste van Vestiging). */
.fw-opdr-regel {
  font-size: 11px; color: var(--color-text-muted); line-height: 1.3;
  margin-top: 3px;
}

/* ============================================================================
   PGR-306 — drie-cards-herindeling /flexwerker-diensten (weekweergave + dagmodus)
   ============================================================================ */
/* Kaartenband boven de dienstentabel. Breed: 3 kolommen; middel: 2 (pakket vol);
   smal: gestapeld (Card 1 → 2 → 3 → tabel). */
.fwd-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.9fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 14px; /* kopband + tabel lezen als één geheel (PGR-306 styling-micro) */
}
.fwd-card { min-width: 0; }
.fwd-card__title {
  font-size: 13px; font-weight: 800; color: var(--color-primary-darker);
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 12px;
}
/* Hero binnen Card 1: de bestaande border-bottom scheidt hero van datum/filters. */
.fwd-card--fw .dienst-header { padding-top: 0; margin-bottom: 16px; }
.fwd-card--fw .fwd-controls-row { margin: 0; }

/* Navigator binnen Card 2: niet meer sticky (PO-keuze 1, v1). De card levert de
   omranding/padding; de navigator zelf wordt "plat". */
.fwd-card .fwd-week-nav {
  position: static; top: auto; z-index: auto;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
}

/* Card 3 — Aanbevolen pakket (compacte lege staat + gevulde staat). */
.fwd-card--pakket { display: flex; flex-direction: column; }
.pkg-card__empty { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.pkg-card__sub { font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.pkg-card__note { font-size: 11px; color: var(--color-text-muted); line-height: 1.4; margin-bottom: 12px; }
.pkg-card__actions { margin-top: 14px; }
.pkt-svc-list + .pkg-card__actions { padding-top: 14px; border-top: 1px solid var(--color-border); }
.fwd-card--pakket .fw-sug-btn--wa { width: 100%; justify-content: center; }
/* Scoped tot de pakketcard — geen globale disabled-styling op .fw-sug-btn (elders gebruikt). */
.fwd-card--pakket .fw-sug-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pkt-remove {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); font-size: 15px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.pkt-remove:hover { background: var(--color-danger-soft); color: var(--color-danger); border-color: var(--color-danger); }

@media (max-width: 1100px) {
  .fwd-cards { grid-template-columns: 1fr 1fr; }
  .fwd-card--pakket { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .fwd-cards { grid-template-columns: 1fr; }
  .fwd-card--pakket { grid-column: auto; }
}

/* Compacte week-regel (PGR-306) — vervangt de oude week-group-head-strip. Enige
   capaciteitscijferbron per week: weeknr · bereik · gepland/cap/resterend · open. */
.week-line {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 44px 14px 10px; font-size: 12px; color: var(--color-text-muted);
}
/* De bovenste weekbalk grenst aan de tabelkop, niet aan een vorige week: daar zou de
   weekafstand als een gat onder de koprij lezen. */
#diensten-tbody > tr:first-child .week-line { padding-top: 12px; }
.week-line__wk {
  font-size: 13px; font-weight: 800; color: var(--color-primary-darker);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.week-line__range { font-weight: 700; color: var(--color-text); }
.week-line__mid { color: var(--color-border); }
.week-line__cap { font-weight: 600; }
.week-line__cap b { color: var(--color-text); font-weight: 800; }
/* Hogere specificiteit dan '.week-line__cap b' zodat de resterend-kleur niet wordt
   overschreven (Copilot PR #101): resterend 0u = danger (vol). */
.week-line__cap b.week-line__num--over { color: var(--color-danger); }
.week-line__cap b.week-line__num--ok { color: var(--color-text); }
.week-line__nocap { font-weight: 600; }
/* Open-teller subtiel (PGR-306 styling-micro): het oog gaat naar de capaciteitscijfers
   links, niet naar dit getal rechts. */
.week-line__open {
  margin-left: auto; font-weight: 600; color: var(--color-text-soft);
  font-size: 11px; white-space: nowrap;
}

/* Week-stappers ‹ › op de Weekrooster-card (PGR-306): 1 klik = 1 week verder/terug. */
.fwd-week-nav__weekstep { display: inline-flex; align-items: center; gap: 8px; }
.fwd-week-step {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-primary-dark); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.fwd-week-step:hover { border-color: var(--color-primary); background: var(--color-primary-softer); }

/* Dag-vouw (PGR-306): "Toon nog N diensten" / "Toon minder" onder de dag-cap van 5. */
.fold-row > td { padding: 0 !important; background: var(--color-surface); border-top: 1px dashed var(--color-border); }
.fold-btn {
  width: 100%; text-align: left; padding: 8px 14px; border: 0; background: transparent;
  color: var(--color-primary-dark); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.fold-btn:hover { background: var(--color-primary-softer); }

.week-cap-prominent { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.wcp-num  { font-size: 15px; font-weight: 900; color: var(--color-text); letter-spacing: -0.02em; line-height: 1; }
.wcp-num--ok   { color: var(--color-success); }
.wcp-num--over { color: var(--color-danger); }
.wcp-lbl  { font-size: 11px; font-weight: 700; color: var(--color-text-muted); }
.wcp-sep  { font-size: 12px; color: var(--color-border); }
.aside-card-title { font-size: 13px; font-weight: 800; color: var(--color-text); margin: 0 0 14px; }
.filter-section + .filter-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.filter-section__label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: 8px;
}
.filter-chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-muted);
  cursor: pointer; font-family: inherit; line-height: 1;
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}
.filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary-darker); }
.filter-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.cap-aside-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 0; border-bottom: 1px solid var(--color-border);
}
.cap-aside-row:last-child { border-bottom: none; }
.cap-aside-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cap-aside-week { font-size: 13px; font-weight: 700; color: var(--color-text); }
.cap-aside-uren { font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); }
.cap-aside-bar  { height: 5px; background: var(--color-surface-alt); border-radius: 999px; overflow: hidden; }
.cap-aside-fill { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width 0.4s; }
.cap-aside-fill--full { background: var(--color-danger); }
.cap-aside-fill--low  { background: var(--color-success); }
.empty-state { text-align: center; padding: 48px 24px; color: var(--color-text-muted); }
.empty-state__title { font-size: 16px; font-weight: 800; color: var(--color-text); margin-bottom: 6px; }
.empty-state__sub   { font-size: 13px; font-weight: 500; }
.fw-error-wrap { padding: 32px; }
.topbar-back {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--color-text-muted);
  text-decoration: none; padding: 6px 10px; border-radius: var(--radius-sm);
  transition: background var(--duration-fast), color var(--duration-fast);
  white-space: nowrap; flex-shrink: 0;
}
.topbar-back:hover { background: var(--color-surface-alt); color: var(--color-primary-darker); }
.topbar-back svg { flex-shrink: 0; }
#topbar-fw-title {
  font-size: 14px; font-weight: 700; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

/* ==========================================================================
   Topbar profiel-dropdown
   ========================================================================== */
.topbar-profile {
  position: relative;
  cursor: pointer;
}
.topbar-profile__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0;
  user-select: none;
}
.topbar-profile__menu {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--color-surface-elevated, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  z-index: 200;
  overflow: hidden;
}
.topbar-profile__menu.is-open { display: block; }
.topbar-profile__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 16px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--color-text); background: none; border: none; cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast);
}
.topbar-profile__item:hover { background: var(--color-surface-alt, #f5f5f5); }

/* ==========================================================================
   WhatsApp-sjabloon modal
   ========================================================================== */
.wa-modal { display: none; position: fixed; inset: 0; z-index: 500; }
.wa-modal.is-open { display: block; }
.wa-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
.wa-modal__box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--color-surface-elevated, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow-y: auto;
  padding: 24px 28px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.wa-modal__head {
  display: flex; align-items: center; justify-content: space-between;
}
.wa-modal__title { font-size: 16px; font-weight: 800; color: var(--color-text); }
.wa-modal__close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--color-text-muted); line-height: 1;
  padding: 2px 6px; border-radius: var(--radius-sm);
}
.wa-modal__close:hover { background: var(--color-surface-alt); }
.wa-modal__intro { font-size: 13px; color: var(--color-text-muted); line-height: 1.55; margin: 0 0 14px; }
.wa-modal__hint { font-size: 12px; color: var(--color-text-soft); margin: 0 0 6px; }
.wa-modal__hint--muted { font-size: 11px; color: var(--color-text-muted); margin: 6px 0 0; }
.wa-modal__wa-bg--center { display: flex; justify-content: center; }
.wa-modal__vars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wa-var-chip {
  font-size: 11px; font-family: monospace; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: var(--color-primary-softer); color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-light, #93c5fd);
  cursor: pointer; transition: background var(--duration-fast), transform var(--duration-fast);
}
.wa-var-chip:hover { background: var(--color-primary-light, #93c5fd); transform: translateY(-1px); }
.wa-modal__textarea {
  font-family: monospace; font-size: 13px; line-height: 1.55;
  padding: 10px 14px;
  background: var(--color-surface-alt, #f9f9f9);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  resize: vertical; width: 100%; box-sizing: border-box;
  transition: border-color var(--duration-fast);
}
.wa-modal__textarea:focus { outline: none; border-color: var(--color-primary); }
.wa-modal__preview-label { font-size: 11px; font-weight: 700; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.wa-modal__preview {
  white-space: pre-wrap;
}
.wa-modal__footer {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px;
}
.wa-modal__status { font-size: 12px; min-height: 16px; }
.wa-modal__status.is-ok    { color: var(--color-success); }
.wa-modal__status.is-error { color: var(--color-danger); }
.wa-modal__tabs { display: flex; gap: 4px; }
.wa-tab {
  flex: 1; padding: 7px 6px; font-size: 13px; font-weight: 600;
  /* Drie tabs (PGR-347): "Enkele dienst" mag niet over twee regels vallen en zo de rij
     hoger maken dan de andere twee. Onder 420px wint leesbaarheid van de vaste maat. */
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  background: none; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); cursor: pointer; color: var(--color-text-muted);
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.wa-tab.is-active { background: var(--color-primary-softer); border-color: var(--color-primary); color: var(--color-primary-dark); }
.wa-tab:hover:not(.is-active) { background: var(--color-surface-alt); }
.wa-modal__char-count { font-size: 11px; color: var(--color-text-soft); text-align: right; margin-top: -8px; }
.wa-modal__char-count.is-warn { color: var(--color-warning, #f59e0b); font-weight: 700; }
.wa-modal__split { display: flex; gap: 20px; align-items: flex-start; }
.wa-modal__editor { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.wa-modal__preview-pane { flex: 0 0 280px; position: sticky; top: 24px; }
.wa-modal__wa-bg {
  background: #e5ddd5; border-radius: var(--radius-md);
  padding: 14px; min-height: 80px;
}
.wa-bubble {
  background: #dcf8c6; border-radius: 8px 0 8px 8px;
  padding: 8px 12px; display: inline-block; max-width: 100%;
  box-shadow: 0 1px 0.5px rgba(0,0,0,.13);
  font-size: 13px; line-height: 1.6; color: #111; word-break: break-word;
}
.wa-emoji-input {
  width: 32px; font-size: 16px; text-align: center; line-height: 1;
  padding: 2px 4px; border-radius: 999px;
  border: 1.5px dashed var(--color-border);
  background: none; cursor: text; outline: none; color: var(--color-text);
}
.wa-emoji-input::placeholder { color: var(--color-text-muted); font-size: 14px; }
.wa-emoji-input:focus { border-color: var(--color-primary); }
.wa-bubble__meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 4px; }
.wa-bubble__time { font-size: 11px; color: #999; }
.wa-bubble__checks { display: block; flex-shrink: 0; }
.wa-modal__divider { border: none; border-top: 1px solid var(--color-border); margin: 14px 0 12px; }
.wa-modal__section-head { font-size: 12px; font-weight: 700; color: var(--color-text); margin: 0 0 8px; }
@media (max-width: 720px) {
  /* align-items: flex-start uit de basisregel laat de kolommen hier op max-content sizen,
     waardoor de editor (±400px) breder werd dan de modal zelf. In kolomrichting moeten ze
     stretchen. (Gevonden bij de smal-viewport-check van PGR-347; raakt alle drie de tabs.) */
  .wa-modal__split { flex-direction: column; align-items: stretch; }
  .wa-modal__editor { width: 100%; }
  .wa-modal__preview-pane { flex: none; width: 100%; position: static; }
}
@media (max-width: 420px) {
  .wa-tab { font-size: 12px; padding: 7px 4px; }
}
.btn--danger-outline {
  color: var(--color-danger); border: 1.5px solid var(--color-danger);
  background: transparent;
}
.btn--danger-outline:hover { background: var(--color-danger-soft); }

/* =========================================================================
   Overzicht pagina (PGR-146)
   ========================================================================= */

/* ── Pagina-container ── */
.ov-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 32px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Hero ── */
.ov-hero { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ov-hero h1 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--color-text);
  line-height: 1.2;
  margin: 0;
}
.ov-hero__name {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ov-hero p {
  font-size: 15px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin: 0;
}

/* ── KPI-strip: 4 tegels (default), 3-tegel variant ── */
.ov-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.ov-kpi-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* MetricCard — klikbaar variant */
a.metric-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--duration-med), box-shadow var(--duration-med), border-color var(--duration-med);
}
a.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
a.metric-card.metric-card--mock:hover {
  border-color: var(--color-border-dashed);
}

/* MetricCard — header-rij voor label + MOCK-pil naast elkaar */
.metric-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.metric-card__header .mock-pill { margin-top: 0; flex-shrink: 0; }

/* Inline mock-pill naast titel (in ov-card) */
.ov-inline-mock {
  vertical-align: middle;
  margin: 0 0 0 6px;
  margin-top: 0 !important;
}

/* ── Content grid 2×2 ── */
.ov-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* ── Content card ── */
.ov-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 260px;
}
.ov-card--mock {
  border: 1.5px dashed var(--color-border-dashed);
  background: var(--color-surface-soft);
  box-shadow: none;
}
.ov-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.ov-card__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
}
.ov-card__title-sep { color: var(--color-text-soft); font-weight: 600; }
.ov-card__sub {
  font-size: 12px;
  color: var(--color-text-soft);
  font-weight: 500;
  margin-top: 3px;
}
.ov-card__link {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.ov-card__link:hover { text-decoration: underline; }
.ov-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ov-card__body--chart { min-height: 200px; }
.ov-card__foot {
  padding-top: 10px;
  border-top: 1px solid var(--color-border-soft);
  flex-shrink: 0;
}

/* ── Lege/laad staat ── */
.ov-loading {
  font-size: 13px;
  color: var(--color-text-soft);
  padding: 16px 0;
}
.ov-empty {
  font-size: 13px;
  color: var(--color-text-soft);
  padding: 12px 0;
  font-style: italic;
}

/* ── Diensten van vandaag — rijen ── */
.ov-dienst-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.ov-dienst-row:last-child { border-bottom: none; }
.ov-dienst-row__time {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  width: 72px;
  flex-shrink: 0;
}
.ov-dienst-row__main { flex: 1; min-width: 0; }
.ov-dienst-row__klant {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-dienst-row__sub {
  font-size: 11px;
  color: var(--color-text-soft);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-dienst-row__match {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-soft);
  text-align: right;
  flex-shrink: 0;
}
.ov-dienst-match-skeleton {
  display: inline-block;
  width: 32px;
  height: 12px;
  background: var(--color-border);
  border-radius: 4px;
  animation: ov-skeleton-pulse 1.6s ease-in-out infinite;
  vertical-align: middle;
}

/* ── Aandachtslijst ── */
.ov-aandacht-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border-soft);
  text-decoration: none;
  color: inherit;
  transition: background var(--duration-fast);
  border-radius: 4px;
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
}
.ov-aandacht-row:last-child { border-bottom: none; }
.ov-aandacht-row:hover .ov-aandacht-row__name { color: var(--color-primary); }
.ov-aandacht-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  transition: color var(--duration-fast);
}
/* Avatar kleur per urgentie-niveau */
.ov-aandacht-avatar--high { background: var(--color-accent-soft);   color: var(--color-accent-dark); }
.ov-aandacht-avatar--mid  { background: var(--color-primary-soft);  color: var(--color-primary-darker); }
.ov-aandacht-avatar--low  { background: var(--color-surface-alt);   color: var(--color-text-muted); }
.ov-aandacht-row__info { flex: 1; min-width: 0; }
.ov-aandacht-row__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--duration-fast);
}
.ov-aandacht-row__loc {
  font-size: 11px;
  color: var(--color-text-soft);
  font-weight: 500;
}

/* Reden-pillen — kleur op urgentie-niveau (aandachtsfactor) */
.reason-pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.6;
}
/* high (≥8): hoogste urgentie — accent oranje */
.reason-pill--high { background: var(--color-accent-soft);  color: var(--color-accent-dark); }
/* mid (5-7): gemiddeld — primary blauw */
.reason-pill--mid  { background: var(--color-primary-soft); color: var(--color-primary-darker); }
/* low (<5): minder prioriteit — muted */
.reason-pill--low  { background: var(--color-surface-alt);  color: var(--color-text-muted); }

/* ── Automations chart ── */
.ov-chart-legend {
  display: flex;
  gap: 14px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.ov-chart-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
}
.ov-chart-legend__dot {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ov-chart-svg { display: block; width: 100%; overflow: visible; }

/* ── Slimme suggesties — rij-vorm ── */
.ov-sug-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border-soft);
  text-decoration: none;
  color: inherit;
  transition: background var(--duration-fast);
}
.ov-sug-row:last-child { border-bottom: none; }
.ov-sug-row__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ov-sug-row__body { flex: 1; min-width: 0; }
.ov-sug-row__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--duration-fast);
}
.ov-sug-row:hover .ov-sug-row__title { color: var(--color-primary); }
.ov-sug-row__why {
  font-size: 11px;
  color: var(--color-text-soft);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-sug-row__cta {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Skeleton animatie ── */
@keyframes ov-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ov-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .ov-grid      { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ov-page      { padding: 20px 16px 60px; }
  .ov-kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ── DevTools ── */
.dt-section { margin-bottom: 32px; }
.dt-section h2 {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: 12px;
}
.dt-table {
  width: 100%; border-collapse: collapse; background: var(--color-surface);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card);
}
.dt-table thead th {
  text-align: left; padding: 10px 16px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted);
  background: var(--color-surface-alt); border-bottom: 1.5px solid var(--color-border);
}
.dt-table td {
  padding: 10px 16px; border-bottom: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums; font-size: 13px;
}
.dt-table tr:last-child td { border-bottom: none; }
.ok   { color: #1a7a4a; font-weight: 700; }
.warn { color: #b05a00; font-weight: 700; }
.err  { color: #b00000; font-weight: 700; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-ok   { background: #e6f4ed; color: #1a7a4a; border: 1px solid #b7dfc9; }
.badge-warn { background: #fff3e0; color: #b05a00; border: 1px solid #fdd9a5; }
.badge-err  { background: #fdecea; color: #b00000; border: 1px solid #f5c6c6; }
#dt-status  { font-size: 12px; color: var(--color-text-muted); margin-top: 8px; }

/* ── Screenreader-only utility ───────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Omnisearch — topbar (PGR-234) ──────────────────────────────────────── */
.hn-search {
  position: relative;
  flex: 1;
  max-width: 360px;
}
.hn-search__wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 16px;
  transition: border-color 120ms, box-shadow 120ms;
}
.hn-search__wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 0 120 212), 0.12);
}
.hn-search__icon { color: var(--color-text-soft); flex-shrink: 0; }
.hn-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  outline: none;
  min-width: 0;
}
.hn-search__input::placeholder { color: var(--color-text-soft); }
.hn-search__input::-webkit-search-cancel-button { display: none; }

.hn-search__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 600;
  max-height: 360px;
  overflow-y: auto;
}
.hn-search__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
}
.hn-search__item.is-active,
.hn-search__item:hover { background: var(--color-surface-alt); }
.hn-search__item-name { flex: 1; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-search__mark { background: transparent; color: var(--color-primary); font-weight: 700; }
.hn-search__item-meta { font-size: 11px; color: var(--color-text-muted); flex-shrink: 0; }
.hn-search__item-modus {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.hn-search__item-modus--uzk { background: #e8f0fe; color: #1a56db; }
.hn-search__item-modus--zzp { background: #fef3e2; color: #b45309; }
.hn-search__empty,
.hn-search__footer {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}
.hn-search__footer { border-top: 1px solid var(--color-border); margin-top: 2px; }

/* ── PGR-468: kolom "Resterend" in de kandidatentabel ──────────────────────────
   Hoeveel uur er in de week van deze dienst nog over is binnen de EIGEN urenvoorkeur
   van de flexwerker. Zie static/urenvoorkeur.js voor de rekenregel en de woorden.

   ⚠ Bewust één getal en geen balk. De cel staat direct naast de scorekolom, en die
   heeft al een balk; een tweede balk ernaast leest als een tweede score. De kleur
   draagt hier het signaal, en de `title` de uitleg.

   ⚠ Rood op 0 u betekent "op of boven de eigen voorkeur" en NIET "mag niet werken" —
   de harde grens van 60 uur is al server-side toegepast en is hier nooit zichtbaar.
   Gebruik hier dus geen slot-, verbods- of "niet beschikbaar"-vocabulaire. */
.th--urenvoorkeur {
  width: 74px;
  text-align: right;
  white-space: nowrap;
}
.td--urenvoorkeur {
  text-align: right;
  white-space: nowrap;
}
.uv-rest {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.uv-rest--ruimte {
  color: var(--color-success);
}
.uv-rest--vol {
  color: var(--color-danger);
}
/* Onbekend is niet nul: geen kleur, want er valt niets te signaleren. */
.uv-rest--onbekend {
  color: var(--color-text-muted);
  font-weight: 600;
}