/**
 * Blynckr ATS — Aanbevolen-actiekaart (S6, static/modules/action-card.js).
 *
 * Eigen stylesheet naast candidate-workspace.css zodat parallelle wijzigingen
 * aan dat bestand niet conflicteren. Scoped op .acard/.acard-p__*; gebruikt
 * uitsluitend bestaande design-tokens uit style.css (§13 van de design-spec)
 * plus de workspace-scoped schaduwtokens (--ws-shadow-*, gedefinieerd op
 * .cdv2-root in candidate-workspace.css — de kaart leeft altijd daarbinnen).
 */

/* Handoff `.aac` (kandidaten.css r66): radius 12, ruimere padding en
   ondermarge, lichtere schaduw en een lichtere rand. Gemeten kaarthoogte was
   128px tegen de ≈110px die de handoff-README noemt. */
.acard {
  background: var(--surface, #fff);
  border: 1px solid #ececee;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  padding: 15px 18px 16px;
  margin-bottom: 22px;
}

.acard--failed {
  border-left: 3px solid var(--badge-red-fg);
}

.acard--loading { padding: 10px 16px; }

/* Compacte variant: de redenchips-rij (§3.2) vervangt de kaart tijdelijk en
   bevat alleen een titel + chips -- zonder de volle kaartpadding valt die
   minder als "nieuwe kaart" en meer als tussenstap. */
.acard--slim {
  padding: 10px 16px 12px;
  box-shadow: none;
  /* A4: één regel -- tekst links, chips ernaast, undo rechts (margin-left:auto
     op .acard__undo). */
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

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

/* Statusbadge-varianten (§2.3, kleuren per zichtbare status): dot kleurt mee
   via currentColor (.status-badge__dot in style.css heeft geen eigen kleur). */
.acard__badge .status-badge__dot { background: currentColor; }

/* Eind-audit A10: de toestandspill volgt de kaart-tokens uit de handoff
   (.aac-pill: 11px/600, uppercase, letter-spacing .04em, radius 6px) i.p.v.
   de generieke .status-badge (12px/550, geen uppercase, radius 5px). */
.acard .acard__badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
}
.acard__badge--sug  { background: var(--koper-subtle); color: var(--koper-700); }
.acard__badge--app  { background: var(--badge-orange-bg); color: var(--badge-orange-fg); }
.acard__badge--exec { background: var(--badge-blue-bg); color: var(--badge-blue-fg); }
.acard__badge--plan { background: var(--badge-green-bg); color: var(--badge-green-fg); }

.acard__faillabel {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--badge-red-fg);
}

/* Handoff `.aac-t`: 600 15px met -.005em. Gemeten op staging stond de titel op
   14.5px zonder letter-spacing -- klein, maar in een pixel-perfect-ronde telt
   het mee. */
.acard__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--fg-primary);
}

/* Handoff `.aac-d`: 13.5px/1.6 en niet breder dan 62ch -- een lange
   onderbouwing werd anders een regel over de volle kaartbreedte. */
.acard__evidence {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 62ch;
  color: var(--fg-tertiary);
}

.acard__failreason {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--badge-red-fg);
}

.acard__banner {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 6px);
  background: var(--badge-orange-bg);
  color: var(--badge-orange-fg);
  font-size: 12.5px;
}

.acard__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* Eind-audit A10: primaire CTA op de handoff-maten (.aac-btn.pri: 12.5px/500,
   padding 8/14, radius 8px, min-hoogte 36) i.p.v. de app-brede .btn-primary
   (15px, padding 10/20, hoogte 39) -- die domineerde de kaart en maakte 'm
   ~14% hoger dan de referentie. Alleen binnen .acard; .btn-primary elders in
   de app blijft ongemoeid. */
.acard .acard__cta {
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  min-height: 36px;
}

.acard__exectext {
  font-size: 13px;
  color: var(--fg-tertiary);
}

.acard__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--koper);
  border-radius: 50%;
  animation: acard-spin 0.8s linear infinite;
}

@keyframes acard-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .acard__spinner { animation: none; }
}

.acard__kebabwrap {
  position: relative;
  margin-left: auto;
}

.acard__kebabbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--fg-tertiary);
  cursor: pointer;
}

.acard__kebabbtn:hover {
  background: var(--surface-hover);
  color: var(--fg-primary);
}

.acard__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--ws-shadow-lg);
  padding: 4px;
  z-index: 30;
}

.acard__menu--up {
  top: auto;
  bottom: calc(100% + 6px);
}

.acard__menu[hidden] { display: none; }

.acard__menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  font-size: 13px;
  color: var(--fg-primary);
  cursor: pointer;
}

.acard__menu button:hover { background: var(--surface-hover); }

/* Doorklik naar de overige aanbevelingen (S7-doorloop B3): was een dood
   tekstregeltje, is nu een knop -- zelfde bescheiden tertiaire toon, zodat de
   kaart één primaire CTA houdt. */
.acard__more {
  display: block;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  color: var(--fg-tertiary);
  cursor: pointer;
  text-align: left;
}

.acard__more:hover {
  color: var(--koper-700);
  text-decoration: underline;
}

/* Redenchips-rij ("Niet relevant", §3.2) — inline vervanging van de kaart. */
.acard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.acard__chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  font-size: 12.5px;
  color: var(--fg-primary);
  cursor: pointer;
}

.acard__chip:hover {
  border-color: var(--koper);
  color: var(--koper-700);
  background: var(--koper-subtle);
}

/* A4 — de slanke regel is nu "Actie weggehaald · redenchips · Ongedaan maken"
   (handoff aanbevolen-actie.jsx r117-123). De Annuleren-chip die hier stond is
   vervallen: er valt niets meer te annuleren, want het dismissen gebeurt pas
   ná de redenkeuze. De bijbehorende .acard__chip--cancel-regels zijn met die
   knop mee verwijderd in plaats van als dode CSS te blijven staan. De
   flex-layout van de regel zelf staat bij .acard--slim hierboven. */
.acard__slimtext {
  font: 500 13px var(--font-body);
  color: var(--fg-tertiary);
}

.acard__undo {
  margin-left: auto;
  font: 500 12.5px var(--font-body);
  color: var(--koper-700);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.acard__undo:hover { text-decoration: underline; }

/* Paneel-inhoud (sidepanel-templates, §5) — leeft in .aac-side__bd/__foot. */
.acard-p__lead {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-primary);
}

.acard-p__foot {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--fg-quaternary);
}

.acard-p__failed {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 6px);
  background: var(--badge-red-bg);
}

.acard-p__failed b {
  font-size: 12.5px;
  color: var(--badge-red-fg);
}

.acard-p__failed span {
  font-size: 12.5px;
  color: var(--fg-primary);
}

.acard-p__note {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-hover);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-primary);
  white-space: pre-wrap;
}

/* De inzichten uitgeschreven, in dezelfde omkadering als de notitie: het is
   voorgestelde inhoud, geen metadata. Zonder deze lijst stond er alleen "4
   inzichten" en moest de recruiter aanvinken wat hij niet kon lezen. */
.acard-p__claims {
  margin: 0;
  padding: 10px 12px 10px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-hover);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-primary);
}
.acard-p__claims li + li { margin-top: 6px; }
.acard-p__claimsoort {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-tertiary);
}

.acard-p__sec {
  margin: 18px 0 8px;
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fg-tertiary);
}

.acard-p__evlist {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-primary);
}

.acard-p__evwhen {
  font-size: 11.5px;
  color: var(--fg-quaternary);
}

/* Wat tégen de match pleit krijgt een eigen kleurtje op de bullet, zodat je in
   één blik ziet welke kant een punt op wijst -- de tekst zelf blijft gewoon
   leesbaar zwart. */
.acard-p__evlist--min li::marker { color: #A8402F; }

/* Score als getal én balk: een cijfer alleen laat je rekenen, een balk alleen
   laat je schatten. Onder de 5 wordt hij gedempt rood -- dat is geen afkeuring
   maar een waarschuwing, want het voorstel blijft gewoon staan. */
.acard-score { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; }
.acard-score__n {
  font: 680 22px var(--font-display, inherit);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #2F6B4F;
}
.acard-score__balk {
  flex: 1; height: 6px; border-radius: 99px;
  background: var(--surface-hover, #F0EEEC); overflow: hidden;
}
.acard-score__vul { display: block; height: 100%; border-radius: 99px; background: #2F6B4F; }
.acard-score--laag .acard-score__n { color: #A8402F; }
.acard-score--laag .acard-score__vul { background: #A8402F; }

.acard-p__steps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-primary);
}

/* Lijst met de overige aanbevelingen (§2.4-aanvulling, S7-doorloop B3). */
.acard-p__other {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.acard-p__other:last-child { border-bottom: 0; }

.acard-p__otherhead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--fg-primary);
}

.acard-p__otherdesc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-tertiary);
}

/* Eindstand na uitvoeren (§5-pariteit, S7-doorloop B4). */
.acard-p__outcome {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 6px);
  background: var(--badge-green-bg, var(--surface-hover));
}

.acard-p__outcome b {
  font-size: 12.5px;
  color: var(--badge-green-fg, var(--fg-primary));
}

.acard-p__outcome span {
  font-size: 12.5px;
  color: var(--fg-primary);
}

.acard-p__outcome--failed { background: var(--badge-red-bg); }
.acard-p__outcome--failed b { color: var(--badge-red-fg); }

/* A2 — selectie-UI op het capture-voorstel (SmartPaste). Vinkjes staan links
   in de label-kolom, zodat de waarde-kolom uitgelijnd blijft met de andere
   ws-kv-rijen. */
/* Lange veldlabels mogen wrappen; de checkbox blijft dan op de eerste regel
   staan in plaats van te centreren op een blok van twee regels. */
.acard-sel__lbl {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  min-width: 0;
}

.acard-sel {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--koper, currentColor);
  cursor: pointer;
}

.acard-sel__all {
  margin: 10px 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  font-size: 12.5px;
  color: var(--fg-tertiary);
}

/* Eind-audit A15 — "Toewijzen aan ›": tweede niveau in hetzelfde kebab-paneel
   (teamleden + terugweg). Alleen een infoschermpje nodig voor laden/leeg/fout;
   de knoppen erven `.acard__menu button`. */
.acard__menuinfo {
  margin: 0;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--fg-tertiary);
}

/* A9 — invulformulier bij complete_profile. Maten letterlijk uit de handoff
   (action-workspace.css r67-71). Categorieën met twee invoervelden
   (contactgegevens, salarisrange) zetten die naast elkaar; de rest is één veld
   onder een label. */
.ws-velden {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ws-veld {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ws-veld .l {
  font: 500 12px var(--font-body);
  color: var(--fg-secondary);
}

.ws-veld input,
.ws-veld select {
  font: 400 14px var(--font-body);
  color: var(--fg-primary);
  border: 1px solid #e2e2e6;
  border-radius: 9px;
  padding: 9px 12px;
  outline: none;
  background: var(--surface);
}

.ws-veld input:focus,
.ws-veld select:focus { border-color: var(--fg-primary); }