/* Kandidaten — prototype 4. Presentation only, scoped to the existing renderers.
   Keep status colours, field editors and shared workspace-shell behaviour intact. */
.cdv2-root, .candv2 {
  --candidate-bg: #f7f6f3;
  --candidate-line: #e8e7e2;
  --candidate-muted: #687067;
  --candidate-radius: 12px;
  --candidate-accent: #193b50;
}
.cdv2-root { background: var(--candidate-bg); }
.cdv2-wrap { max-width: 1184px; padding: 16px 32px 100px; }
.cdv2-hero__back { min-height: 38px; margin: 0 0 4px; color: var(--candidate-muted); }
.cdv2-hero {
  align-items: center; padding: 20px 24px 24px; gap: 16px; margin: 0;
  background: #fff; border: 1px solid var(--candidate-line); border-bottom: 0;
  border-radius: 16px 16px 0 0;
}
.cdv2-hero__main, .cdv2-hero__main > div { min-width: 0; }
.cdv2-hero__avatar { width: 54px; height: 54px; background: #e9e1d7; color: var(--candidate-accent); font-size: 18px; }
.cdv2-hero__name { font-size: 25px; line-height: 1.35; letter-spacing: -.5px; overflow-wrap: anywhere; }
.cdv2-hero__meta { font-size: 13px; color: var(--candidate-muted); overflow-wrap: anywhere; }
.cdv2-hero__actions { gap: 7px; flex-shrink: 0; }
.cdv2-hero__iconbtn { width: 38px; height: 38px; border-radius: 50%; border-color: var(--candidate-line); }
.cdv2-hero__iconbtn--wa { width: auto; padding: 0 12px; gap: 7px; border-radius: 8px; background: var(--candidate-accent); color: #fff; border-color: var(--candidate-accent); font: 500 13px var(--font-body); }
.cdv2-hero__iconbtn--wa:hover { background: #254c62; color: #fff; border-color: #254c62; }
.cdv2-tabs {
  position: sticky; top: 0; z-index: 3; gap: 25px; padding: 0 24px;
  margin-bottom: 20px; background: #fff; border: 1px solid var(--candidate-line);
  border-top: 0; border-radius: 0 0 var(--candidate-radius) var(--candidate-radius);
  scrollbar-width: none;
}
.cdv2-tabs::-webkit-scrollbar { display: none; }
.cdv2-tab { min-height: 49px; padding: 10px 0 12px; font-size: 13px; flex-shrink: 0; }
.cdv2-tab[aria-selected="true"] { color: var(--candidate-accent); border-bottom-color: var(--candidate-accent); }
.cdv2-tab:focus-visible { outline-offset: -3px; }
.cdv2-grid { grid-template-columns: minmax(0,1.7fr) minmax(285px,1fr); gap: 20px; }
.cdv2-grid > *, .cdv2-data-grid > * { min-width: 0; }
.cdv2-section, .cdv2-root .cdv2-sum--compact, .cdv2-side,
.cdv2-gsec, .cdv2-root #cdv2ActivityPreview,
.cdv2-root .cdv2-solgroup, .cdv2-root #cdv2Content_documenten,
.cdv2-root #cdv2Content_activiteit, .cdv2-root #cdv2Content_privacy {
  background: #fff; border: 1px solid var(--candidate-line);
  border-radius: var(--candidate-radius); padding: 19px 22px; box-shadow: none; min-width: 0;
}
.cdv2-section, .cdv2-root .cdv2-sum--compact, .cdv2-gsec { margin: 0 0 16px; }
.cdv2-section__title, .cdv2-sum__label, .cdv2-side__title, .cdv2-gsec__title {
  font: 600 14px var(--font-body); letter-spacing: 0; text-transform: none;
  color: var(--fg-primary); margin: 0 0 12px;
}
.cdv2-root .cdv2-sum p { font-size: 14px; line-height: 1.75; }
.cdv2-sum__acts { margin-top: 8px; }
.cdv2-root .cdv2-sum__acts button, .cdv2-link-row { color: var(--candidate-accent); min-height: 32px; }
.cdv2-root #cdv2ActionSlot:empty { display: none; }
.cdv2-root .acard { border-radius: var(--candidate-radius); box-shadow: none; border-color: var(--candidate-line); margin-bottom: 16px; }
.cdv2-fact { gap: 10px; padding: 9px 0; border: 0; align-items: flex-start; }
.cdv2-fact > div { min-width: 0; }
.cdv2-fact p { font-size: 12px; color: var(--candidate-muted); margin-bottom: 3px; }
.cdv2-fact b { font-size: 13px; overflow-wrap: anywhere; }
.cdv2-root #cdv2ProcBar .cdv2-proc { margin: 0; border: 0; box-shadow: none; }
.cdv2-root #cdv2ProcBar .cdv2-proc__row { padding: 12px 0; }
.cdv2-root .cdv2-proc__main { min-width: 0; }
.cdv2-root .cdv2-proc__head b { overflow-wrap: anywhere; }
.cdv2-data-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: start; }
.cdv2-data-grid .cdv2-dsec { border: 0; padding: 0; }
.cdv2-data-grid .cdv2-drow { padding: 10px 0; align-items: flex-start; }
.cdv2-data-grid .cdv2-drow__l { width: 120px; font-size: 12px; padding-top: 3px; }
.cdv2-data-grid .cdv2-drow__v { min-height: 26px; font-size: 13px; }
.cdv2-data-grid .cdv2-drow.geg-row--editing .geg-edit__err { margin-left: 0; }
.cdv2-alle { border: 1px solid var(--candidate-line); background: #fff; border-radius: var(--candidate-radius); padding: 14px 22px; }
.cdv2-alle__btn { min-height: 36px; color: var(--candidate-accent); }
.cdv2-root .cdv2-doc { box-shadow: none; border-color: var(--candidate-line); border-radius: 8px; }
.cdv2-root .cdv2-doc__name { font-size: 13px; }
.cdv2-root .cdv2-tl-title { font-size: 14px; letter-spacing: 0; text-transform: none; margin-top: 0; }
.cdv2-root .cdv2-tl__body p { font-size: 13px; line-height: 1.65; }
.cdv2-root .cdv2-sol-add { color: var(--candidate-accent); }
.cdv2-root :is(input,textarea,select):focus-visible { outline: 2px solid #466d84; outline-offset: 2px; }

/* Existing list controls and mobile cards; no additional filter semantics. */
/* De pilvorm van dit zoekveld is sinds 2026-09-18 de app-brede norm: de regels
   staan nu op `.filter-bar__search` in style.css (met de tokens --search-bg en
   --search-focus-border), zodat Taken, Leads, Klanten, Contactpersonen,
   Plaatsingen, Matching, Campagnes en Pipeline hetzelfde zoekveld hebben.
   De pil is de omhullende `.filter-bar__search` (rand, loepje, padding), niet
   het invoerveld erin -- eerder kreeg alleen de <input> de grijze pilvorm: dat
   gaf een pil in een omrande rechthoek, met het loepje erbuiten. */
.candv2-pills { gap: 7px; }
.candv2-pill { min-height: 34px; padding: 5px 12px; font-size: 13px; }
.candv2-pill--active { background: #edf1f2; color: var(--candidate-accent); border-color: #cdd8dc; }
.candv2-pill--active .candv2-pill__n { background: transparent; color: var(--candidate-accent); }
.candv2 .lead-avatar { background: #e9e1d7; color: var(--candidate-accent); }
.candv2-table thead th { text-transform: none; letter-spacing: 0; font-size: 12px; }
.candv2-table tbody td { border-color: var(--candidate-line); }
.candv2 .badge { border-radius: 5px; }
.candv2-table tbody tr.is-sel { background: #edf2f4; }
.candv2-table input[type=checkbox] { accent-color: var(--candidate-accent); }

@media (max-width: 900px) {
  .cdv2-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .cdv2-hero { flex-wrap: wrap; }
  .cdv2-hero__main { flex-basis: 100%; }
  .cdv2-hero__actions { margin-left: 70px; }
  .candv2 .candv2-cards { gap: 0; background: #fff; }
  .candv2-card { box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--candidate-line); min-height: 76px; }
  .candv2-card .lead-name { font-size: 14px; }
  .candv2-card .lead-avatar { width: 38px; height: 38px; }
}
@media (max-width: 700px) {
  .cdv2-wrap { padding: 8px 12px calc(80px + env(safe-area-inset-bottom)); }
  .cdv2-hero { padding: 16px; gap: 12px; }
  .cdv2-hero__avatar { width: 43px; height: 43px; font-size: 16px; }
  .cdv2-hero__main { gap: 12px; }
  .cdv2-hero__name { font-size: 21px; }
  .cdv2-hero__actions { margin-left: 55px; }
  .cdv2-hero__iconbtn { min-width: 44px; min-height: 44px; }
  .cdv2-tabs { gap: 22px; padding: 0 16px; margin-bottom: 16px; }
  .cdv2-tab { min-height: 45px; font-size: 12px; }
  .cdv2-data-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .cdv2-section, .cdv2-root .cdv2-sum--compact, .cdv2-side, .cdv2-gsec,
  .cdv2-root #cdv2ActivityPreview, .cdv2-root .cdv2-solgroup,
  .cdv2-root #cdv2Content_documenten, .cdv2-root #cdv2Content_activiteit,
  .cdv2-root #cdv2Content_privacy { padding: 16px; }
  .cdv2-data-grid .cdv2-drow__v { min-height: 34px; }
  .cdv2-root :is(input:not([type=checkbox]):not([type=radio]),textarea,select) { font-size: 16px; }
  .cdv2-alle { padding: 12px 16px; }
  .cdv2-root .cdv2-docup { flex-wrap: wrap; }
  .candv2-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 5px; }
  .candv2-pill { flex-shrink: 0; min-height: 38px; }
  /* min-height 40px + 16px invoer staan sinds 2026-09-18 app-breed in
     style.css (mobiele filter-regels); hier niet meer dubbel. */
  .candv2-bulk { flex-wrap: wrap; }
}
/* Onder 760px stapelt `.cdv2-drow` (candidate-workspace.css): het label krijgt
   een eigen regel en het potlood staat absoluut rechtsboven. De kolomregel
   hierboven is specifieker en hield het label op 120px, waardoor de waarde
   over de volle breedte tot ónder het potlood doorliep (lange e-mailadressen
   braken achter het icoon af). Zelfde breekpunt als het basisbestand. */
@media (max-width: 760px) {
  .cdv2-data-grid .cdv2-drow__l { width: 100%; }
  .cdv2-data-grid .cdv2-drow__pen { right: 0; top: 10px; }
  .cdv2-data-grid .cdv2-drow__txt { padding-right: 26px; }
}
/* Bewerkstand van een gegevensrij. De kolomregel hierboven zet de rijen op
   `padding: 10px 0` zodat ze uitlijnen met de kaartkop; de grijze
   bewerkachtergrond (candidate-workspace.css) kwam daardoor zonder binnenruimte
   tegen label, veld en knoppen aan. Binnenruimte + even grote negatieve marge:
   het vlak groeit de kaartmarge in (16px mobiel, 22px desktop) terwijl label en
   waarde exact onder de niet-bewerkte rijen blijven staan. */
.cdv2-data-grid .cdv2-drow.geg-row--editing {
  padding: 10px 12px 12px;
  margin-inline: -12px;
  border-radius: 10px;
  border-bottom-color: transparent;
}
/* "van €" / "tot €" is een tekstknoop naast het veld in hetzelfde flex-label;
   bij weinig breedte brak hij over twee regels in plaats van het veld te laten
   krimpen. */
.cdv2-data-grid .geg-range__lbl { white-space: nowrap; }
.cdv2-data-grid .geg-range__lbl .geg-input { flex: 1; min-width: 0; }
/* Mobiel: ✓ en × op een eigen regel onder het veld, 44px tikvlak. Naast het
   veld passen ze niet zonder de editor te knijpen -- de salariseditor (twee
   velden met "van €"/"tot €") hield op 390px zo te weinig breedte over dat de
   labels afbraken en de × buiten beeld viel. Eén patroon voor alle editors. */
@media (max-width: 760px) {
  .cdv2-data-grid .geg-row--editing .geg-edit { flex-wrap: wrap; gap: 10px 8px; }
  .cdv2-data-grid .geg-row--editing .geg-edit__ctl { flex-basis: 100%; }
  .cdv2-data-grid .geg-row--editing .geg-ok { margin-left: auto; gap: 8px; }
  .cdv2-data-grid .geg-row--editing .geg-ok__btn { width: 44px; height: 44px; }
  .cdv2-data-grid .geg-row--editing .geg-input { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .cdv2-root *, .candv2 * { transition: none; animation: none; scroll-behavior: auto; }
}