/*
 * Workrlab — UI Components
 * Herbruikbare interface-onderdelen: buttons, forms, cards, badges,
 * alerts, table, score bar, avatar, empty state, pill-search,
 * pagination, modal, tabs, card-layout systeem
 *
 * Vereist: base.css
 */

/* ─────────────────────────────────────────
   5. Buttons
───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    transform 100ms var(--ease),
    box-shadow var(--duration) var(--ease);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}

.btn:active {
  transform: scale(.98);
}

.btn:disabled,
.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Varianten */
.btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-accent {
  background: var(--sky-500);
  color: white;
  border-color: var(--sky-500);
}

.btn-accent:hover {
  background: var(--sky-600);
  border-color: var(--sky-600);
  color: white;
}

.btn-outline,
.btn-secondary {
  background: white;
  color: var(--slate-700);
  border-color: var(--slate-200);
}

.btn-outline:hover,
.btn-secondary:hover {
  background: var(--slate-50);
  border-color: var(--slate-500);
  color: var(--slate-900);
}

.btn-ghost {
  background: transparent;
  color: var(--slate-600);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--slate-100);
  color: var(--slate-900);
}

.btn-danger {
  background: var(--red-50);
  color: var(--red-600);
  border-color: var(--red-100);
}

.btn-danger:hover {
  background: var(--red-100);
  border-color: var(--red-600);
}

/* Groottes */
.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.btn-filter-clear {
  min-height: 2.25rem;
  align-self: stretch;
  white-space: nowrap;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
}

.btn-xl {
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-lg);
}

.btn-full {
  width: 100%;
}

/* Icon button */
.btn-icon {
  padding: 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  border-color: transparent;
  color: var(--slate-500);
}

.btn-icon:hover {
  background: var(--slate-100);
  color: var(--slate-700);
}

.btn-icon svg,
.btn-icon i.lni {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}

/* Loading state */
.btn-loading {
  pointer-events: none;
  opacity: .8;
}

.btn-loading::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-left: 4px;
}

/* ─────────────────────────────────────────
   6. Form elementen
───────────────────────────────────────── */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-600);
  margin-bottom: 10px;
  letter-spacing: .01em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--slate-900);
  outline: none;
  transition:
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--slate-500);
}

.form-input:hover,
.form-select:hover {
  border-color: var(--slate-500);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--sky-500);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .12);
}

.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
  border-color: var(--red-500) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .10);
}

.form-input.is-error:focus,
.form-select.is-error:focus,
.form-textarea.is-error:focus {
  border-color: var(--red-500) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}

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

/* Dropdown arrow — distinguishes select from text input */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Input met icon */
.input-group {
  position: relative;
}

.input-group .form-input {
  padding-left: 40px;
}

.input-group .input-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-500);
  pointer-events: none;
}

.input-group .input-icon svg,
.input-group .input-icon i.lni {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}

/* Input met action rechts */
.input-group-action .form-input {
  padding-right: 44px;
}

.input-group-action .input-action {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--slate-500);
  border-radius: var(--radius-xs);
  transition: color var(--duration) var(--ease);
  display: flex;
  align-items: center;
}

.input-group-action .input-action:hover {
  color: var(--slate-700);
}

.input-group-action .input-action svg,
.input-group-action .input-action i.lni {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}

/* Form feedback */
.form-error {
  font-size: 12px;
  color: var(--red-500);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-hint {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 5px;
}

/* Checkbox & radio */
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* Eén opmaak voor elk keuzevakje in het platform. Gebruik .form-check op de
   omhullende label, of .form-check-input rechtstreeks op een los vakje dat
   geen wikkel heeft. Zonder dit valt een vakje terug op de standaard van de
   browser, en dan staan er twee soorten naast elkaar op dezelfde pagina. */
.form-check input[type="checkbox"],
.form-check input[type="radio"],
.form-check-input {
  width: 16px;
  height: 16px;
  accent-color: var(--sky-500);
  cursor: pointer;
  flex-shrink: 0;
}

/* Voor een label met een uitleg eronder: het vakje bij de eerste regel. */
.form-check--top {
  align-items: flex-start;
}

.form-check--top .form-check-input,
.form-check--top input[type="checkbox"] {
  margin-top: 2px;
}

.form-check-label {
  font-size: 13px;
  color: var(--slate-700);
  cursor: pointer;
  user-select: none;
}

/* Divider "of" */
.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.form-divider-line {
  flex: 1;
  height: 1px;
  background: var(--slate-200);
}

.form-divider-text {
  font-size: 12px;
  color: var(--slate-500);
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   7. Cards
───────────────────────────────────────── */
.card {
  background: white;
  border: 1px solid var(--vlak-rand);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .03);
}

.card-sm {
  padding: 14px 18px;
  border-radius: var(--radius-md);
}

.card-lg {
  padding: 28px 32px;
  border-radius: var(--radius-xl);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--slate-100);
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-900);
  letter-spacing: -.01em;
}

.card-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-500);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}

.card-link:hover {
  color: var(--slate-900);
}

.card-subtitle {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 2px;
}

/* ─────────────────────────────────────────
   KPI-kaart — het ene component voor elk kengetal op het platform
   (dashboards, marktanalyse, marge, scraping, platform). Icoon in een
   gekleurd vlak, label, waarde, ondertekst van één of twee regels, en
   optioneel een i-icoon naast het label met een tooltip voor de berekening.
   De ondertekst kapt niet af: op een telefoon verdween daardoor informatie.
───────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.kpi-grid-2 { grid-template-columns: repeat(2, 1fr); }
.kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-grid-5 { grid-template-columns: repeat(5, 1fr); }

/* KPI-kaart. De oude markup (kpi-icon naast kpi-body) en het rijke component
   (components/kpi_kaart.html) delen deze opbouw: iconvakje en label op één
   regel, daaronder het getal, de context en onderaan één ding (lijn, balk of
   verdeling). De oude markup komt er via display:contents op kpi-body in een
   raster terecht; één tint per kaart kleurt vakje, pil, lijn en de zachte
   cirkel rechtsonder; de eerste kaart van een rij is de blikvanger. */
.kpi-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 16px 18px 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  column-gap: 8px;
  row-gap: 8px;
  min-width: 0; /* anders duwt de inhoud een grid-track breder dan zijn 1fr-aandeel */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .03);
  transition: box-shadow .15s;
  --kpi-hue: var(--sky-600);
  --kpi-tint: var(--sky-50);
}
.kpi-card::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -44px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--kpi-tint);
  opacity: .75;
  pointer-events: none;
  /* Onder alle inhoud, ook de kinderen van .kpi-body (display: contents, dus
     geen eigen laag): een negatieve z-index binnen de eigen stapelcontext van
     de kaart (isolation) ligt boven de kaartachtergrond en onder de tekst. */
  z-index: -1;
}
/* De tint volgt het iconvakje, zodat de oude markup zonder extra klasse meekleurt. */
.kpi-card:has(.kpi-icon-blue),   .kpi-tint-blue   { --kpi-hue: var(--sky-600);    --kpi-tint: var(--sky-50); }
.kpi-card:has(.kpi-icon-cyan),   .kpi-tint-cyan   { --kpi-hue: var(--cyan-600);   --kpi-tint: var(--cyan-50); }
.kpi-card:has(.kpi-icon-green),  .kpi-tint-green  { --kpi-hue: var(--green-600);  --kpi-tint: var(--green-50); }
.kpi-card:has(.kpi-icon-violet), .kpi-tint-violet { --kpi-hue: var(--violet-600); --kpi-tint: var(--violet-50); }
.kpi-card:has(.kpi-icon-amber),  .kpi-tint-amber  { --kpi-hue: var(--amber-600);  --kpi-tint: var(--amber-50); }
.kpi-card:has(.kpi-icon-red),    .kpi-tint-red    { --kpi-hue: #dc2626;           --kpi-tint: #fef2f2; }
.kpi-card:has(.kpi-icon-slate),  .kpi-tint-slate  { --kpi-hue: var(--slate-500);  --kpi-tint: var(--slate-50); }
.kpi-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
a.kpi-card { text-decoration: none; color: inherit; }

.kpi-icon {
  grid-column: 1;
  grid-row: 1;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}
.kpi-icon-blue   { background: var(--sky-100);    color: var(--sky-600); }
.kpi-icon-green  { background: var(--green-100);  color: var(--green-600); }
.kpi-icon-violet { background: var(--violet-100); color: var(--violet-600); }
.kpi-icon-amber  { background: var(--amber-100);  color: var(--amber-600); }
.kpi-icon-slate  { background: var(--slate-100);  color: var(--slate-500); }
.kpi-icon-red    { background: #fee2e2;            color: #dc2626; }
.kpi-icon-cyan   { background: var(--cyan-100);    color: var(--cyan-600); }

/* De oude markup: label, waarde en ondertekst worden rechtstreeks rasterkinderen. */
.kpi-body { display: contents; }

.kpi-label {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate-700);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

/* De enige plek in de app waar type groot genoeg wordt voor de displayletter
   van de huisstijl. Op de landingspagina krijgen de grote getallen dezelfde
   behandeling, dus dit is waar de twee kanten elkaar raken. */
.kpi-value {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -.035em;
  line-height: 1;
  margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
}

.kpi-sub {
  grid-column: 1 / -1;
  font-size: 12px;
  margin-top: -2px;
  color: var(--slate-500);
  line-height: 1.4;
}

/* i-icoon naast het label: opent een tooltip (data-tooltip) met de berekening */
.kpi-info {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--slate-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  cursor: help;
  text-transform: none;
  letter-spacing: 0;
  flex-shrink: 0;
}
.kpi-info:hover { background: #dbeafe; color: #1d4ed8; }

/* Voortgangsbalk onder de ondertekst */
.kpi-progress {
  grid-column: 1 / -1;
  align-self: end;
  margin-top: 6px;
  height: 4px;
  background: var(--slate-100);
  border-radius: 99px;
  overflow: hidden;
}
.kpi-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--sky-500);
  transition: width .4s ease;
}
.kpi-progress-fill.green  { background: var(--green-500); }
.kpi-progress-fill.violet { background: var(--violet-500); }
.kpi-progress-fill.amber  { background: var(--amber-500); }
.kpi-progress-fill.red    { background: #ef4444; }
.kpi-progress-fill.slate  { background: var(--slate-400); }

/* Het rijke component (components/kpi_kaart.html): dezelfde kaart, maar met
   een kop-rij (vakje, label, delta-pil) en een onderkant die één ding toont. */
.kpi-rijk {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.kpi-rijk .kpi-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-rijk .kpi-label { gap: 8px; }
.kpi-rijk .kpi-value { margin: 0; }
.kpi-rijk .kpi-value-klein { font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }
.kpi-rijk .kpi-sub { margin-top: -4px; }
.kpi-rijk .kpi-progress { margin-top: 0; }
.kpi-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--kpi-tint);
  color: var(--kpi-hue);
}
.kpi-delta-plus     { background: var(--green-100); color: var(--green-600); }
.kpi-delta-min      { background: #fee2e2; color: #dc2626; }
.kpi-delta-let-op   { background: var(--amber-100); color: var(--amber-600); }
.kpi-delta-neutraal { background: var(--slate-100); color: var(--slate-600); }

/* De onderkant: lijn bij een verloop, balk bij een aandeel, verdeling bij een
   telling. Altijd onderaan, zodat een rij kaarten op één lijn eindigt. */
.kpi-onder { margin-top: auto; grid-column: 1 / -1; align-self: end; }
.kpi-spark { width: 100%; height: 40px; display: block; color: var(--kpi-hue); }
.kpi-spark-lijn  { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kpi-spark-vlak  { fill: currentColor; opacity: .12; }
.kpi-spark-basis { stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 4; opacity: .45; }
.kpi-spark-punt  { fill: currentColor; stroke: #fff; stroke-width: 2; }
/* Geblokte strook: één blokje per stuk (of naar rato boven de dertig), in de
   kleur van de fase; leeg toont een grijs streepjespatroon. */
.kpi-blokken { display: flex; gap: 2px; height: 14px; }
.kpi-blokken:empty { border-radius: 2px; background: repeating-linear-gradient(90deg, var(--slate-200) 0 4px, transparent 4px 7px); opacity: .7; }
.kpi-blokken > i { flex: 1 1 0; min-width: 3px; max-width: 14px; border-radius: 2px; }
.kpi-legenda { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--slate-500); flex-wrap: wrap; }

/* Strepen: één streep per stuk, in de kleur --c van de rij. Voor tellingen die je
   wilt kunnen aftellen (leads per fase); een balk is voor een aandeel. */
.strepen { display: flex; gap: 2px; height: 14px; min-width: 60px; }
.strepen > i { flex: 0 0 5px; border-radius: 1.5px; background: var(--c, var(--slate-400)); }
.strepen:empty { background: repeating-linear-gradient(90deg, var(--slate-200) 0 3px, transparent 3px 6px); border-radius: 2px; opacity: .6; }
/* De pipelinetabel op het dashboard. */
.pl-tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
/* Kop en cellen delen dezelfde horizontale padding, anders staat 'Waarde' niet boven de bedragen. */
.pl-tabel th { text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); font-weight: 700; padding: 0 8px 7px 0; border-bottom: 1px solid var(--slate-100); }
.pl-tabel td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--slate-50); vertical-align: middle; color: var(--slate-700); }
.pl-tabel tr:last-child td { border-bottom: 0; }
.pl-tabel .pl-r { text-align: right; padding-right: 0; padding-left: 12px; }
.pl-fase { font-weight: 600; color: var(--slate-900); white-space: nowrap; }
.pl-fase::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; background: var(--c); vertical-align: 1px; }
.pl-strepen { width: 100%; } /* de strepen krijgen de ruimte die de bedragen overlaten */
.pl-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-gew { color: var(--slate-500); }
.kpi-legenda-kort { flex-wrap: nowrap; overflow: hidden; gap: 10px; }
.kpi-legenda b { font-weight: 600; color: var(--slate-700); }
.kpi-legenda i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; }

/* De blikvanger: de eerste kaart van een rij, of de kaart met kpi-hero. Indigo,
   de kleur van de primaire knop, met witte tekst. Een rij met een expliciete
   blikvanger krijgt er niet nog een op de eerste plek. */
.kpi-grid:not(:has(.kpi-hero)) > .kpi-card:first-child,
.kpi-card.kpi-hero {
  background: linear-gradient(145deg, #4338ca 0%, #6366f1 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
  --kpi-hue: #fff;
  --kpi-tint: rgba(255, 255, 255, .16);
}
.kpi-grid:not(:has(.kpi-hero)) > .kpi-card:first-child::after,
.kpi-card.kpi-hero::after {
  right: -60px; bottom: auto; top: -60px; width: 200px; height: 200px; opacity: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
}
.kpi-grid:not(:has(.kpi-hero)) > .kpi-card:first-child .kpi-label,
.kpi-card.kpi-hero .kpi-label { color: rgba(255, 255, 255, .85); }
.kpi-grid:not(:has(.kpi-hero)) > .kpi-card:first-child .kpi-icon,
.kpi-card.kpi-hero .kpi-icon { background: rgba(255, 255, 255, .16); color: #fff; }
.kpi-grid:not(:has(.kpi-hero)) > .kpi-card:first-child .kpi-value,
.kpi-card.kpi-hero .kpi-value { color: #fff !important; font-size: 32px; } /* ook als de oude markup een kleur inline zet */
.kpi-grid:not(:has(.kpi-hero)) > .kpi-card:first-child .kpi-sub,
.kpi-card.kpi-hero .kpi-sub { color: rgba(255, 255, 255, .66) !important; }
.kpi-grid:not(:has(.kpi-hero)) > .kpi-card:first-child .kpi-info,
.kpi-card.kpi-hero .kpi-info { background: rgba(255, 255, 255, .16); color: #fff; }
.kpi-grid:not(:has(.kpi-hero)) > .kpi-card:first-child .kpi-delta,
.kpi-card.kpi-hero .kpi-delta { background: rgba(255, 255, 255, .16); color: #fff; }
.kpi-card.kpi-hero .kpi-delta-min  { color: #fecaca; }
.kpi-card.kpi-hero .kpi-delta-plus { color: #a7f3d0; }
.kpi-grid:not(:has(.kpi-hero)) > .kpi-card:first-child .kpi-progress,
.kpi-card.kpi-hero .kpi-progress { background: rgba(255, 255, 255, .18); }
.kpi-grid:not(:has(.kpi-hero)) > .kpi-card:first-child .kpi-progress-fill,
.kpi-card.kpi-hero .kpi-progress-fill { background: #fff !important; }
.kpi-card.kpi-hero .kpi-spark { color: #fff; }
.kpi-card.kpi-hero .kpi-spark-vlak { opacity: .18; }
.kpi-card.kpi-hero .kpi-spark-punt { stroke: rgba(0, 0, 0, .25); }
.kpi-card.kpi-hero .kpi-blokken:empty { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 4px, transparent 4px 7px); }
.kpi-card.kpi-hero .kpi-legenda { color: rgba(255, 255, 255, .7); }
.kpi-card.kpi-hero .kpi-legenda b { color: #fff; }
.kpi-progress-fill.amber  { background: var(--amber-500); }
.kpi-progress-fill.red    { background: #ef4444; }
.kpi-progress-fill.slate  { background: var(--slate-400); }

/* Compacte strip van kengetallen in de kop van een detailpagina (plaatsing, match):
   geen losse kaarten maar één balk met scheidingslijnen. */
.kpi-strip {
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(99,102,241,.1);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 18px;
}
.kpi-strip-item { flex: 1; padding: 12px 16px; text-align: center; position: relative; min-width: 0; }
.kpi-strip-item + .kpi-strip-item::before {
  content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: rgba(99,102,241,.12);
}
.kpi-strip-val { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--slate-800); font-variant-numeric: tabular-nums; }
.kpi-strip-lbl { font-size: 10px; font-weight: 500; color: var(--slate-500); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 1200px) { .kpi-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .kpi-grid, .kpi-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px)  { .kpi-grid-5 { grid-template-columns: repeat(2, 1fr); } .kpi-strip { flex-wrap: wrap; } .kpi-strip-item { flex-basis: 50%; } .kpi-strip-item + .kpi-strip-item::before { display: none; } }
@media (max-width: 480px)  { .kpi-grid, .kpi-grid-2, .kpi-grid-3, .kpi-grid-5 { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────
   8. Badges & pills
───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.6;
  font-size: 10px;
  border: 1px solid var(--slate-200);
  padding: 2px 8px;
  border-radius: 99px;
}

/* Varianten */
.badge-slate {
  color: var(--slate-500);
  background: var(--slate-50);
}

.badge-sky {
  background: var(--sky-100);
  color: var(--sky-700);
}

.badge-cyan {
  background: var(--cyan-100);
  color: var(--cyan-600);
}

.badge-green {
  background: var(--green-100);
  color: var(--green-600);
}

.badge-orange {
  background: var(--orange-100);
  color: var(--orange-500);
}

.badge-red {
  background: var(--red-100);
  color: var(--red-600);
}

/* Met gekleurde dot */
.badge-dot::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Pill (grotere badge) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid currentColor;
}

/* ─────────────────────────────────────────
   9. Alerts
───────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid transparent;
  margin-bottom: 20px;
}

.alert svg,
.alert i.lni {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-info {
  background: var(--sky-50);
  color: var(--sky-700);
  border-color: var(--sky-100);
}

.alert-success {
  background: var(--green-50);
  color: var(--green-600);
  border-color: var(--green-100);
}

.alert-warning {
  background: var(--orange-100);
  color: var(--orange-500);
  border-color: #FED7AA;
}

.alert-error {
  background: var(--red-50);
  color: var(--red-600);
  border-color: var(--red-100);
}

.alert-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  opacity: .6;
  padding: 0;
  flex-shrink: 0;
}

.alert-dismiss:hover {
  opacity: 1;
}

/* ─────────────────────────────────────────
   11. Filter bar
───────────────────────────────────────── */

/* Filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: white;
  border: 1px solid var(--vlak-rand);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-bar .form-input {
  flex: 1;
  min-width: 200px;
  border: none;
  box-shadow: none;
  padding: 6px 10px;
  background: var(--slate-50);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.filter-bar .form-input:focus {
  box-shadow: 0 0 0 2px var(--sky-500);
}

/* ─────────────────────────────────────────
   12. Tabel
───────────────────────────────────────── */
/* Elke tabel scrolt op een smal scherm horizontaal binnen zijn eigen wrapper, zodat
   de pagina zelf nooit breder wordt dan het scherm en geen kolom onleesbaar afvalt.
   Templates zetten deze wrapper zelf; het vangnet in layouts/app.html wikkelt
   tabellen die hem missen (ook na een htmx-swap). */
.tabel-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.tabel-scroll > table { min-width: max-content; width: 100%; }

.table-container {
  background: white;
  border: 1px solid var(--vlak-rand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Horizontaal scrollen op smalle schermen */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table thead tr {
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}

.table th {
  padding: 11px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td {
  padding: 13px 16px;
  color: var(--slate-700);
  border-bottom: 1px solid var(--slate-100);
  vertical-align: middle;
}

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

.table tbody tr {
  transition: background var(--duration) var(--ease);
}

.table tbody tr:hover td {
  background: var(--slate-50);
}

.table tbody tr.selected td {
  background: var(--sky-50);
}

.table-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--slate-500);
  font-size: 14px;
}

/* ─────────────────────────────────────────
   13. Score bar
───────────────────────────────────────── */
.score-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.score-bar-track {
  flex: 1;
  height: 5px;
  background: var(--slate-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--sky-500);
  transition: width .6s var(--ease-out);
}

.score-bar-fill.high {
  background: var(--green-500);
}

.score-bar-fill.medium {
  background: var(--sky-500);
}

.score-bar-fill.low {
  background: var(--orange-500);
}

.score-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-600);
  min-width: 36px;
  text-align: right;
}

/* ─────────────────────────────────────────
   14. Avatar
───────────────────────────────────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--sky-100);
  color: var(--sky-700);
  font-size: 11px;
  width: 32px;
  height: 32px;
}

/* Een profielfoto in de avatar vult de cirkel; zonder foto staan de initialen erin. */
.avatar > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 9px;
}

.avatar-md {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.avatar-lg {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.avatar-xl {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

.avatar-slate {
  background: var(--slate-100);
  color: var(--slate-600);
}

.avatar-sky {
  background: var(--sky-100);
  color: var(--sky-700);
}

.avatar-green {
  background: var(--green-100);
  color: var(--green-600);
}

.avatar-orange {
  background: var(--orange-100);
  color: var(--orange-500);
}

/* Avatar groep */
.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  border: 2px solid white;
  margin-left: -6px;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

/* ── Avatar stack (overlapping row, used on match runs, dashboard etc.) ── */
.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack .avatar,
.avatar-stack img {
  width: 24px;
  height: 24px;
  border: 2px solid white;
  border-radius: 50%;
  margin-left: -6px;
  transition: transform var(--duration) var(--ease);
  flex-shrink: 0;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.avatar-stack .avatar:first-child,
.avatar-stack img:first-child {
  margin-left: 0;
}

.avatar-stack .avatar:hover,
.avatar-stack img:hover {
  transform: translateY(-2px);
  z-index: 10 !important;
}

.avatar-overflow {
  background: var(--slate-100);
  color: var(--slate-500);
  font-size: 10px;
  font-weight: 600;
}

/* ─────────────────────────────────────────
/* ─────────────────────────────────────────
   Empty states
───────────────────────────────────────── */

/* ── Empty-state animations ── */
@keyframes es-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

/* ── es2: geanimeerde icon empty states ─────────────────────────────────── */
@keyframes esi-pop {
  from { opacity: 0; transform: scale(.5) }
  to   { opacity: 1; transform: scale(1) }
}
@keyframes esi-float {
  0%, 100% { transform: translateY(0) }
  50%       { transform: translateY(-5px) }
}
@keyframes esi-fade {
  from { opacity: 0; transform: translateY(6px) }
  to   { opacity: 1; transform: translateY(0) }
}

.es2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 26px;
  text-align: center;
  gap: 10px;
}
.es2-art {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: esi-pop .45s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.es2-art i {
  font-size: 30px;
  line-height: 1;
  animation: esi-float 3s ease-in-out .65s infinite;
}
.es2-art.esi-indigo { background: #eef2ff; }
.es2-art.esi-indigo i { color: #6366f1; }
.es2-art.esi-purple { background: #f5f3ff; }
.es2-art.esi-purple i { color: #8b5cf6; }
.es2-art.esi-sky    { background: #f0f9ff; }
.es2-art.esi-sky i  { color: #0ea5e9; }
.es2-art.esi-emerald { background: #ecfdf5; }
.es2-art.esi-emerald i { color: #10b981; }
.es2-art.esi-amber  { background: #fffbeb; }
.es2-art.esi-amber i { color: #f59e0b; }

.es2-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-600);
  animation: esi-fade .4s ease .35s both;
}
.es2-sub {
  font-size: 12px;
  color: var(--slate-400);
  max-width: 240px;
  line-height: 1.65;
  animation: esi-fade .4s ease .5s both;
}
@keyframes es-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(99,102,241,.10); }
  50%       { box-shadow: 0 8px 28px rgba(99,102,241,.22); }
}
@keyframes es-ring {
  0%   { transform: translate(-50%,-50%) scale(.7); opacity: .5; }
  100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}
@keyframes es-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes es-dot {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%       { transform: translateY(-8px); opacity: 1; }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtiele radiale achtergrondgloed */
.empty-state::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 40%, rgba(99,102,241,.05) 0%, transparent 70%);
  pointer-events: none;
}

/* Puls-ring achter het icoon */
.empty-state-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #ede9fe 0%, #ede9fe 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #7c3aed;
  position: relative;
  z-index: 1;
  animation: es-float 3.2s ease-in-out infinite, es-glow 3.2s ease-in-out infinite;
}

/* Radar ring */
.empty-state-icon::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(99,102,241,.3);
  animation: es-ring 2.4s ease-out infinite;
  pointer-events: none;
}
.empty-state-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(99,102,241,.2);
  animation: es-ring 2.4s ease-out infinite;
  animation-delay: .8s;
  pointer-events: none;
}

.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 6px;
  animation: es-fadein .5s ease both;
  animation-delay: .1s;
}

.empty-state-desc {
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.6;
  max-width: 280px;
  margin-bottom: 20px;
  animation: es-fadein .5s ease both;
  animation-delay: .2s;
}

/* ═══════════════════════════════════════
   Pill zoekbalk — gedeeld tussen pagina's
   ═══════════════════════════════════════ */

.pill-search {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 99px;
  height: 48px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  overflow: hidden;
  margin-bottom: 20px;
}

.pill-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  flex: 1;
  height: 100%;
  min-width: 0;
  position: relative;
}

.pill-field:hover {
  background: var(--slate-50);
}

.pill-field-icon {
  color: var(--slate-500);
  flex-shrink: 0;
}

.pill-field-inner {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.pill-field-label {
  font-size: 9px;
  font-weight: 500;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}

.pill-field input:not([type="checkbox"]):not([type="radio"]),
.pill-field select {
  border: none;
  outline: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-900);
  background: transparent;
  width: 100%;
  font-family: var(--font-sans);
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.pill-field input::placeholder {
  color: var(--slate-500);
  font-weight: 400;
}

.pill-field select {
  color: var(--slate-500);
}

.pill-field select:focus {
  color: var(--slate-900);
}

.pill-divider {
  width: 1px;
  height: 28px;
  background: var(--slate-200);
  flex-shrink: 0;
}

.pill-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--slate-900);
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 0 20px;
  height: 100%;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  flex-shrink: 0;
  transition: background .12s;
  border-radius: 0 99px 99px 0;
}

.pill-btn:hover {
  background: #1e293b;
}
.pill-btn-active {
  background: #4f46e5;
}
.pill-btn-active:hover {
  background: #4338ca;
}

.pill-clear {
  display: flex;
  align-items: center;
  padding: 0 12px 0 0;
  font-size: 11px;
  color: var(--slate-500);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .12s;
  margin: 0 10px
}

.pill-clear:hover {
  color: var(--slate-600);
}

/* ═══════════════════════════════════════
   Multi-select dropdown panel
   Panels zijn position:fixed zodat ze de overflow:hidden
   van .pill-search ontsnappen en visueel onder de balk
   verschijnen.
   ═══════════════════════════════════════ */

.pill-ms-panel {
  background: var(--white, #fff);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  padding: 5px;
  z-index: 9999;
}

[data-theme="dark"] .pill-ms-panel,
@media (prefers-color-scheme: dark) {
  .pill-ms-panel {
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-700, #334155);
  }
}

.pill-ms-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--slate-700);
  user-select: none;
  transition: background .1s;
  white-space: nowrap;
}

.pill-ms-opt:hover {
  background: var(--slate-50);
}

.pill-ms-opt--active {
  background: #ede9fe;
  color: #4f46e5;
  font-weight: 600;
}

.pill-ms-opt--active:hover {
  background: #ddd6fe;
}

.pill-ms-opt input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #6366f1;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.pill-ms-value {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill-ms-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #6366f1;
  color: #fff;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  flex-shrink: 0;
}

.pill-field--ms {
  cursor: pointer;
  user-select: none;
}

.pill-ms-clear {
  display: block;
  width: calc(100% - 10px);
  margin: 4px 5px 2px;
  padding: 5px 10px;
  background: none;
  border: none;
  border-top: 1px solid var(--slate-100);
  border-radius: 0;
  font-size: 12px;
  color: var(--slate-400);
  cursor: pointer;
  text-align: left;
}

.pill-ms-clear:hover {
  color: #6366f1;
}

.pill-field--ms .pill-field-inner {
  cursor: pointer;
}

.pill-native-select {
  all: unset;
  font-size: 13px;
  color: var(--slate-700);
  cursor: pointer;
  width: 100%;
}
.pill-native-select option { color: var(--slate-700); }

/* ═══════════════════════════════════════
   Paginering — pill stijl
   ═══════════════════════════════════════ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 24px;
}

/* Vorige / volgende — solid indigo cirkel wanneer actief */
.pagination-prev,
.pagination-next {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #4f46e5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}

.pagination-prev:hover,
.pagination-next:hover {
  background: #4338ca;
  transform: scale(1.06);
}

.pagination-prev.disabled,
.pagination-next.disabled {
  background: var(--slate-100);
  color: var(--slate-400);
  pointer-events: none;
  transform: none;
}

/* Eerste / laatste pagina (<<, >>) — outline cirkel, iets kleiner */
.pagination-edge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  color: var(--slate-400);
  border: 1.5px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all .15s;
  flex-shrink: 0;
}

.pagination-edge:hover {
  background: var(--slate-100);
  color: var(--slate-600);
  border-color: var(--slate-300);
}

.pagination-edge.disabled {
  opacity: .45;
  pointer-events: none;
}

/* Paginanummers — geen pill-achtergrond meer */
.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
}

.pagination-page {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-600);
  text-decoration: none;
  transition: all .12s;
  border: 2px solid transparent;
}

.pagination-page:hover {
  background: var(--slate-100);
  color: var(--slate-800);
}

.pagination-page.active {
  background: transparent;
  color: #4f46e5;
  font-weight: 700;
  border-color: #4f46e5;
}

.pagination-dots {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--slate-400);
  letter-spacing: 1px;
}

/* ─────────────────────────────────────────
   Card varianten & universele card structuur
   Gebruikt door: opportunities, placements,
   employees, match runs
───────────────────────────────────────── */

.card-gradient {
  background: linear-gradient(160deg, #f5f3ff 0%, white 50%);
}

.card-lift {
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all .18s ease;
  position: relative;
}

.card-lift:hover {
  border-color: var(--zand-200);
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
  transform: translateY(-3px);
}

/* Klikbare card overlay — maakt de volledige kaart klikbaar
   zonder interne links/buttons te blokkeren */
.card-click-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

/* Zorg dat interne interactieve elementen boven de overlay zitten */
.card-click-overlay ~ * {
  position: relative;
  z-index: 1;
}

.card-flush {
  padding: 0;
  overflow: hidden;
}

/* Card body */
.card-body {
  padding: 14px 14px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Tags rij */
.card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.card-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--slate-100);
  color: var(--slate-500);
  white-space: nowrap;
}

.card-tag-blue   { background: var(--sky-50);   color: var(--sky-700); }
.card-tag-green  { background: #dcfce7;          color: #15803d; }
.card-tag-red    { background: #fef2f2;          color: var(--red-600); }
.card-tag-orange { background: #fff7ed;          color: #c2410c; }
.card-tag-purple { background: #f5f3ff;          color: #6d28d9; }

/* Card header: icon + titel + sub */
.card-header-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: white;
  border: 1px solid var(--vlak-rand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--sky-600);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.card-title-wrap { flex: 1; min-width: 0; }

.card-title-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.3;
  text-decoration: none;
  display: block;
  margin-bottom: 3px;
  transition: color .12s;
}
.card-title-link:hover { color: var(--sky-600); }

.card-title-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.3;
  margin-bottom: 3px;
}

.card-sub {
  font-size: 12px;
  color: var(--slate-500);
}

/* Beschrijving */
.card-desc {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Drie regels om te scannen; hover toont de samenvatting als tooltip. Een
   uitklapknop ('Meer lezen') is er niet meer: die liet de hele kaart en de
   kaarten eronder verschuiven. */

/* Meta pills */
.card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--slate-600);
  background: var(--slate-100);
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
.card-meta-item svg,
.card-meta-item i.lni { color: var(--slate-500); }

/* Skills / extra info */
.card-skills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  /* border-bottom: 1px solid var(--slate-100); */
}

.card-skill {
  font-size: 10px;
  color: var(--slate-500);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  padding: 2px 8px;
  border-radius: 99px;
}

/* Card footer */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--slate-100);
  gap: 8px;
}

.card-footer-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--slate-900);
  letter-spacing: -.03em;
}

.card-footer-value-sm {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-900);
}

.card-footer-label {
  font-size: 10px;
  color: var(--slate-500);
  font-weight: 400;
  margin-left: 1px;
}

.card-footer-meta {
  font-size: 11px;
  color: var(--slate-500);
}

/* 3-puntjes menu */
.card-menu-wrap {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
}
/* De knoppen zweven rechtsboven over de kaart; de titel eronder moet er
   ruimte voor laten, anders loopt een lange titel onder de knoppen door. */
.card-menu-wrap ~ .card-body .card-header-row .card-title-wrap {
  padding-right: 68px;
}

.card-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--slate-200);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--slate-500);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all .12s;
  user-select: none;
}
.card-menu-btn:hover { background: var(--slate-50); color: var(--slate-600); }

.card-dropdown {
  position: absolute;
  top: 34px;
  right: 0;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 168px;
  overflow: hidden;
}

.card-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-700);
  cursor: pointer;
  transition: background .1s;
  text-decoration: none;
  border-bottom: 1px solid var(--slate-50);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
}
.card-dropdown-item:last-child { border-bottom: none; }
.card-dropdown-item:hover { background: var(--slate-50); }
.card-dropdown-item-primary { color: var(--slate-900); font-weight: 700; }

.card-dd-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}

/* Match kandidaten strip */
.card-matches {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--slate-100);
  flex-wrap: wrap;
  margin-top: auto;
}

.card-match-avatars {
  display: flex;
  align-items: center;
}

.card-match-av {
  width: 26px !important;
  height: 26px !important;
  font-size: 9px !important;
  border: 2px solid white !important;
  border-radius: 50% !important;
  object-fit: cover;
  margin-left: -6px;
}
.card-match-av:first-child { margin-left: 0; }

.card-match-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-600);
}
.card-match-label svg,
.card-match-label i.lni { color: var(--slate-500); }

.card-match-score {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
  margin-left: 2px;
}

.card-run-link {
  font-size: 11px;
  font-weight: 500;
  color: var(--slate-600);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: white;
  transition: all .12s;
}
.card-run-link:hover {
  background: var(--slate-50);
  border-color: var(--slate-500);
  color: var(--slate-900);
}

.card-rerun-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--slate-600);
  background: white;
  border: 1px solid var(--slate-200);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  margin-left: auto;
  transition: all .12s;
}
.card-rerun-btn:hover {
  background: var(--slate-50);
  border-color: var(--slate-500);
  color: var(--slate-900);
}

.card-empty-matches {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 500;
  padding: 8px 0;
  border-top: 1px solid var(--slate-100);
  margin-top: auto;
}
.card-empty-matches svg,
.card-empty-matches i.lni { color: var(--slate-500); }

/* Progress bar in card */
.card-progress-wrap { padding: 4px 0 10px; }

.card-progress-inner {
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-progress-inner.pb-ok       { background: var(--sky-50); }
.card-progress-inner.pb-warning  { background: #fff7ed; }
.card-progress-inner.pb-critical { background: #fef2f2; }

.card-pb-pct-box {
  min-width: 42px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.pb-ok       .card-pb-pct-box { background: var(--sky-500); }
.pb-warning  .card-pb-pct-box { background: #f97316; }
.pb-critical .card-pb-pct-box { background: #ef4444; }

.card-pb-track-wrap { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.card-pb-label {
  font-size: 10px;
  font-weight: 700;
}
.pb-ok       .card-pb-label { color: var(--sky-600); }
.pb-warning  .card-pb-label { color: #c2410c; }
.pb-critical .card-pb-label { color: #dc2626; }

.card-pb-segments {
  display: flex;
  gap: 3px;
  height: 7px;
}

.card-pb-seg { flex: 1; border-radius: 99px; background: var(--slate-200); }

/* Segment kleuren — lichtblauw naar vol blauw */
.card-pb-seg-1  { background: rgba(56,189,248,.15); }
.card-pb-seg-2  { background: rgba(56,189,248,.25); }
.card-pb-seg-3  { background: rgba(56,189,248,.35); }
.card-pb-seg-4  { background: rgba(56,189,248,.45); }
.card-pb-seg-5  { background: rgba(56,189,248,.55); }
.card-pb-seg-6  { background: rgba(56,189,248,.65); }
.card-pb-seg-7  { background: rgba(56,189,248,.75); }
.card-pb-seg-8  { background: rgba(56,189,248,.85); }
.card-pb-seg-9  { background: rgba(56,189,248,.92); }
.card-pb-seg-10 { background: rgba(56,189,248,1.00); }


/* ─────────────────────────────────────────
   Modal — globale standaard
   Gebruik: modal-overlay > modal-container >
            modal-header (modal-header-left + modal-close) +
            modal-body + modal-footer
───────────────────────────────────────── */

/* Alpine x-cloak: verborgen tot Alpine de x-show heeft toegepast. Globaal,
   anders staat een modal-overlay even bovenop de pagina en blokkeert hij
   alle knoppen tot Alpine klaar is. */
[x-cloak] { display: none !important; }

/* Brede grafieken op een smal scherm: de grafiek houdt een leesbare breedte en de
   houder schuift horizontaal, net als brede tabellen. Zonder dit werden de assen
   zo smal dat labels wegvielen of over elkaar heen vielen. */
.grafiek-schuif { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.grafiek-breed  { min-width: 520px; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn .15s ease;
}

.modal-container {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  box-shadow: 0 24px 64px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.06);
  border: 0.5px solid var(--slate-200);
  /* Vangnet: als de body niet kan krimpen (een wikkel ertussen), scrollt de modal
     als geheel in plaats van de voet met de knoppen af te kappen. */
  overflow: hidden auto;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  animation: fadeUp .2s var(--ease-out);
}

.modal-container-sm { max-width: 420px; }
.modal-container-lg { max-width: 680px; }

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 0.5px solid var(--slate-200);
  background: var(--slate-50);
}

.modal-header-left { flex: 1; min-width: 0; }

.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-900);
  letter-spacing: -.02em;
  line-height: 1.3;
  margin-bottom: 3px;
}

.modal-subtitle {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.4;
  margin: 0;
}

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 0.5px solid var(--slate-200);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--slate-500);
  flex-shrink: 0;
  transition: all .12s ease;
}

.modal-close:hover {
  background: var(--slate-100);
  color: var(--slate-700);
  border-color: var(--slate-500);
}

/* Accentkop — voor zware of onomkeerbare handelingen (iemand uit dienst
   zetten, een opdracht afsluiten). Niet voor gewone aanmaak/bewerk-acties:
   dat signaal verliest zijn betekenis als elke modal er zo uitziet.
   Kleuren komen overeen op .modal-header-accent zelf (achtergrond/rand) en op
   de twee subklassen .modal-icon/.modal-eyebrow erbinnen; wijzig ze samen. */
.modal-header-accent {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border-bottom-color: #e9d5ff;
}

.modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 18px;
}

.modal-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6d28d9;
  margin-bottom: 2px;
}

.modal-body { padding: 20px 24px; flex: 1; overflow-y: auto; min-height: 0; }
/* Een <form> tussen de container en de body mag de hoogte niet vastzetten. */
.modal-container > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.modal-grid-full { grid-template-columns: 1fr; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px 20px;
  border-top: 0.5px solid var(--slate-100);
}

.modal-field-tip {
  display: block;
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 4px;
  min-height: 14px;
  transition: color .15s;
}

/* ─────────────────────────────────────────
   Tabs — pill stijl
   Gebruik: tab-bar > tab-item (+ tab-item-active)
───────────────────────────────────────── */

.tab-bar {
  display: inline-flex;
  align-items: center;
  background: white;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--vlak-rand);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  margin-bottom: 30px;
}

.tab-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-500);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background .15s;
  user-select: none;
}

.tab-item:hover {
  color: var(--slate-800);
  background: var(--slate-50);
}

.tab-item-active {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  color: #6366f1 !important;
  box-shadow: 0 1px 4px rgba(99,102,241,.15);
  font-weight: 600;
}

.tab-icon {
  width: 16px;
  height: 16px;
  opacity: .5;
  flex-shrink: 0;
}

.tab-item-active .tab-icon { opacity: 1; }

/* LineIcons variant — replaces SVG .tab-icon on settings tabs */
.tab-icon-lni {
  font-size: 16px;
  line-height: 1;
  opacity: .5;
  flex-shrink: 0;
}

.tab-item-active .tab-icon-lni { opacity: 1; color: #6366f1; }

.tab-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--slate-100);
  color: var(--slate-500);
  transition: all .15s;
}

.tab-item-active .tab-count {
  background: #ede9fe;
  color: #6366f1;
}

.tab-bar-sm .tab-item { padding: 6px 12px; font-size: 12px; }
.tab-bar-lg .tab-item { padding: 10px 20px; font-size: 14px; }

@media (max-width: 640px) {
  .tab-bar {
    display: flex;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 16px;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-item { flex-shrink: 0; padding: 7px 12px; font-size: 12px; }
}
/* ─────────────────────────────────────────
   Info block — standaard informatieblok
   Gebruik: <div class="info-block"> <span class="info-block-icon"><i class="lni lni-information"></i></span> <div>…</div> </div>
───────────────────────────────────────── */
.info-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--slate-50);
  border-radius: 10px;
}
.info-block-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #dbeafe;
  flex-shrink: 0;
}
.info-block-icon i {
  font-size: 14px;
  color: #1d4ed8;
}
.info-block-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-700);
  margin-bottom: 3px;
}
.info-block-body {
  font-size: 11px;
  color: var(--slate-400);
  line-height: 1.6;
}
/* ─────────────────────────────────────────
   Tooltips — Tippy.js workrlab theme
   Gebruikt door [data-tooltip], button[title] en a[title] via initTooltips()
───────────────────────────────────────── */

/* Workrlab dark theme */
.tippy-box[data-theme~='workrlab'] {
  background-color: #1e1b4b;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .01em;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 1px 4px rgba(0,0,0,.15);
}
.tippy-box[data-theme~='workrlab'] .tippy-content {
  padding: 6px 10px;
}
.tippy-box[data-theme~='workrlab'] .tippy-arrow {
  color: #1e1b4b;
}
/* Pijlkleur per richting */
.tippy-box[data-theme~='workrlab'][data-placement^='top']    > .tippy-arrow::before { border-top-color:    #1e1b4b; }
.tippy-box[data-theme~='workrlab'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: #1e1b4b; }
.tippy-box[data-theme~='workrlab'][data-placement^='left']   > .tippy-arrow::before { border-left-color:   #1e1b4b; }
.tippy-box[data-theme~='workrlab'][data-placement^='right']  > .tippy-arrow::before { border-right-color:  #1e1b4b; }

/* shift-away animatie */
.tippy-box[data-theme~='workrlab'][data-animation='shift-away'][data-state='hidden'] {
  opacity: 0;
}
.tippy-box[data-theme~='workrlab'][data-animation='shift-away'][data-state='hidden'][data-placement^='top']    { transform: translateY(6px);  }
.tippy-box[data-theme~='workrlab'][data-animation='shift-away'][data-state='hidden'][data-placement^='bottom'] { transform: translateY(-6px); }
.tippy-box[data-theme~='workrlab'][data-animation='shift-away'][data-state='hidden'][data-placement^='left']   { transform: translateX(6px);  }
.tippy-box[data-theme~='workrlab'][data-animation='shift-away'][data-state='hidden'][data-placement^='right']  { transform: translateX(-6px); }

/* sma-theme (market_analysis pagina — rijke HTML tooltips) */
.tippy-box[data-theme~='sma'] {
  background: #1e1b4b;
  color: #e0e7ff;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.6;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.tippy-box[data-theme~='sma'] .tippy-content { padding: 9px 12px; }
.tippy-box[data-theme~='sma'] b,
.tippy-box[data-theme~='sma'] strong {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
  color: #a5b4fc;
}
.tippy-box[data-theme~='sma'][data-placement^='top']    > .tippy-arrow::before { border-top-color:    #1e1b4b; }
.tippy-box[data-theme~='sma'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: #1e1b4b; }
.tippy-box[data-theme~='sma'][data-placement^='left']   > .tippy-arrow::before { border-left-color:   #1e1b4b; }
.tippy-box[data-theme~='sma'][data-placement^='right']  > .tippy-arrow::before { border-right-color:  #1e1b4b; }


/* ─────────────────────────────────────────
   Page loader
───────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #0c0a1e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  overflow: hidden;
}
#page-loader.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* Decoratieve gloed-orbs — pulsen direct zichtbaar */
.pl-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}
.pl-orb-1 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(139,92,246,.55) 0%, transparent 70%);
  top: -120px; right: -80px;
  animation: plOrbPulse 3s ease-in-out infinite;
}
.pl-orb-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(99,102,241,.45) 0%, transparent 70%);
  bottom: -80px; left: -60px;
  animation: plOrbPulse 4s ease-in-out 1s infinite reverse;
}
.pl-orb-3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(196,181,253,.35) 0%, transparent 70%);
  top: 40%; left: 10%;
  animation: plOrbPulse 2.5s ease-in-out .5s infinite;
}
/* Puls: schaal + opacity wisselen → direct merkbaar */
@keyframes plOrbPulse {
  0%, 100% { transform: scale(1);    opacity: .7; }
  50%       { transform: scale(1.18); opacity: 1;  }
}

.page-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  user-select: none;
  position: relative;
  z-index: 1;
  animation: plContentIn .5s cubic-bezier(.22,1,.36,1) both;
}
/* Content verschijnt met fade+scale bij openen */
@keyframes plContentIn {
  from { opacity: 0; transform: scale(.88) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.page-loader-logo {
  height: 58px;
  width: auto;
  animation: plLogoPulse 2s ease-in-out .5s infinite;
}
/* Logo licht pulseren in helderheid — direct zichtbaar */
@keyframes plLogoPulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.04); }
}

.page-loader-tagline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  color: rgba(167, 139, 250, .7);
  text-transform: uppercase;
  animation: plTagFade 1.2s ease .3s both;
}
@keyframes plTagFade {
  from { opacity: 0; letter-spacing: .06em; }
  to   { opacity: 1; letter-spacing: .18em; }
}

.page-loader-bar {
  width: 180px;
  height: 3px;
  background: rgba(255, 255, 255, .1);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.page-loader-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(139, 92, 246, 1) 35%,
    rgba(216, 180, 254, 1) 50%,
    rgba(139, 92, 246, 1) 65%,
    transparent 100%
  );
  animation: loader-shimmer 1.2s linear infinite;
  transform: translateX(-100%);
}
@keyframes loader-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}


/* ─────────────────────────────────────────
   Responsive components — ≤ 640px
───────────────────────────────────────── */

@media (max-width: 640px) {
  /* Modal past volledig in het scherm */
  .modal-overlay {
    padding: 12px;
    align-items: flex-end;
  }
  .modal-container,
  .modal-container-sm,
  .modal-container-lg {
    max-width: 100%;
    border-radius: 20px 20px 12px 12px;
    max-height: 92vh;
  }

  /* Buttons in modal footer op volledige breedte stapelen */
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-footer .btn { width: 100%; justify-content: center; }

  /* Pill-search verticaal stapelen */
  .pill-search {
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-lg);
  }
  .pill-divider { display: none; }
  .pill-field { padding: 10px 14px; border-bottom: 1px solid var(--slate-100); }
  .pill-btn   { border-radius: 0 0 var(--radius-lg) var(--radius-lg); width: 100%; justify-content: center; }

  /* Tab-bar scrolt horizontaal */
  .tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-item { white-space: nowrap; }

  /* Cards volle breedte */
  .card-sm { padding: 12px 14px; }
}

/* ── Presence avatar stack ───────────────────────────────────────────────── */
.wrl-pres-stack { display: inline-flex; align-items: center; }
.wrl-pres-av {
  position: relative;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: default;
}
.wrl-pres-stack .wrl-pres-av + .wrl-pres-av { margin-left: -7px; }
/* Visuele cirkel — apart element zodat overflow:hidden de tooltip ::before niet knipt */
.wrl-pres-circle {
  position: absolute; inset: 0;
  border-radius: 50%; overflow: hidden;
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
}
.wrl-pres-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wrl-pres-ini { color: #fff; font-size: 10px; font-weight: 700; line-height: 1; pointer-events: none; }
.wrl-pres-me .wrl-pres-circle { outline: 2px solid #c7d2fe; outline-offset: 1px; }

/* ── Skill snel toevoegen ("deze skill heb ik ook") — kansenkaart en skill-gapkaart ── */
.skill-snel { display: inline-block; max-width: 100%; }
.skill-snel > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.skill-snel > summary::-webkit-details-marker { display: none; }
.skill-snel-chip { font-size: 11px; padding: 2px 8px; border-radius: 5px; background: var(--slate-50); color: var(--slate-500); border: 1px dashed var(--slate-300); }
.skill-snel-chip:hover, .skill-snel-rij:hover { color: #4338ca; border-color: #a5b4fc; }
.skill-snel-plus { font-weight: 700; color: #6366f1; }
.skill-snel[open] { display: block; width: 100%; }
.skill-snel-als-rij { display: block; }
.skill-snel-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 4px; }
.skill-snel-vraagtekst { font-size: 11px; color: var(--slate-500); margin-right: 2px; }
.skill-snel-niveau { font-family: inherit; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca; cursor: pointer; }
.skill-snel-niveau:hover { background: #e0e7ff; }
.skill-snel-rij { font-size: 12px; font-weight: 600; color: var(--slate-700); padding: 6px 0; }
.skill-snel-vraag { font-size: 11px; font-weight: 400; color: var(--slate-500); margin-left: 4px; }
/* Marktvraagbalken (skill-marktanalyse én de skill-gap-kaart op de dashboards): een lichte
   balk voor de vraag, een donkere overlay voor de dekking, rechts het cijfer en de vraag. */
.sma-bar-row { display:grid;grid-template-columns:1fr 56px;align-items:center;gap:14px;padding:5px 0; }
.sma-funnel-bar {
  position:relative;height:36px;border-radius:9px;
  background:var(--slate-100);overflow:hidden;cursor:default;
  transition:box-shadow .15s;
}
.sma-funnel-bar:hover { box-shadow:0 2px 10px rgba(0,0,0,.09); }
.sma-fb-demand {
  position:absolute;top:0;left:0;height:100%;border-radius:9px;
  width:0;transition:width .65s cubic-bezier(.4,0,.2,1);
}
.sma-fb-cov {
  position:absolute;top:0;left:0;height:100%;border-radius:9px;
  opacity:.38;width:0;transition:width .85s cubic-bezier(.4,0,.2,1);
}
.sma-funnel-label {
  position:relative;z-index:1;padding:0 12px;height:100%;
  display:flex;align-items:center;gap:8px;
}
.sma-funnel-name { font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sma-funnel-type { font-size:10px;opacity:.65;flex-shrink:0; }
.sma-bar-stat { text-align:right;line-height:1.35; }
.sma-bar-pct  { font-size:13px;font-weight:800;letter-spacing:-.02em; }
.sma-bar-cnt  { font-size:10px;color:var(--slate-400); }
@media (max-width: 768px) {
  .sma-bar-row { grid-template-columns: 1fr 46px; gap: 8px; }
}

/* Skill-gap-kaart op de dashboards: uitleg en legenda links, de marktvraagbalken rechts, in
   dezelfde opmaak als de skill-marktanalyse. Een ontbrekende skill is een <details>-rij
   waarvan de plus het niveaumenu openklapt. */
.sgk-raster { display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start; }
.sgk-meta { border-right:1px solid var(--slate-100);padding-right:24px;display:flex;flex-direction:column;gap:14px; }
.sgk-meta-titel { font-size:10px;font-weight:700;color:var(--slate-400);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px; }
.sgk-legenda-rij { display:flex;align-items:center;gap:7px;font-size:11px;color:var(--slate-600);margin-bottom:5px; }
.sgk-legenda-vlak { width:10px;height:10px;border-radius:3px;flex-shrink:0;display:inline-block; }
.sgk-telling { display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--slate-600); }
.sgk-telling b { font-size:14px;font-weight:800;letter-spacing:-.02em;margin-right:4px; }
.sgk-uitleg { background:var(--slate-50);border-radius:9px;padding:12px;font-size:11px;color:var(--slate-600);line-height:1.55; }
.sgk-uitleg strong { color:var(--slate-800);display:block;margin-bottom:4px; }
.sgk-details { display:block; }
.sgk-details > summary { list-style:none;cursor:pointer; }
.sgk-details > summary::-webkit-details-marker { display:none; }
.sgk-details > .skill-snel-menu { padding:0 0 8px;margin:0 0 4px;border-bottom:1px solid var(--slate-50); }
.sgk-plus { margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.85);color:#4338ca;font-weight:800;font-size:14px;line-height:1;flex-shrink:0; }
.sma-bar-stat-klein { font-size:9px;font-weight:600;margin-top:2px; }
@media (max-width: 768px) {
  .sgk-raster { grid-template-columns:1fr; gap:16px; }
  .sgk-meta { border-right:none;padding-right:0;border-bottom:1px solid var(--slate-100);padding-bottom:14px; }
}
/* Uitgestelde live-updates op lijstpagina's: de balk "3 nieuwe vacatures · Toon" blijft in
   beeld terwijl je scrolt; klikken haalt de nieuwe kaarten binnen zonder paginaverversing. */
.ws-uitgesteld { position: sticky; top: 8px; z-index: 20; display: flex; justify-content: center; margin: 0 0 12px; pointer-events: none; }
.ws-uitgesteld-knop { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 99px; border: 1px solid #c7d2fe; background: #4f46e5; color: #fff; box-shadow: 0 6px 18px rgba(79,70,229,.28); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.ws-uitgesteld-knop:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(79,70,229,.34); }
.ws-uitgesteld-knop i { font-size: 11px; }
.ws-uitgesteld-toon { padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.18); font-weight: 700; }
.skill-snel-klaar { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 5px; background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.skill-snel-wacht { font-weight: 500; opacity: .7; font-size: 10px; }

/* Promptvoorstellen op de leerlus: de diff en de onderbouwing achter één klik.
   De voorstellen stonden altijd volledig uitgeklapt en er zit geen bodem in de
   lijst — de cleaner schrijft er elke week een. Twee complete diffs schoven de
   rest van de pagina onder de rand (#752). Wat blijft staan is waar het besluit
   aan hangt: de versie, de toelichting en de uitslag van de schaduwrun. */
.lv-klap > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.lv-klap > summary::-webkit-details-marker { display: none; }
.lv-klap > summary:hover { background: var(--slate-50); }
.lv-klap > summary i { font-size: 11px; flex-shrink: 0; transition: transform .15s ease; }
.lv-klap[open] > summary i { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .lv-klap > summary i { transition: none; }
}