/**
 * Blynckr ATS — Klant-werkplek (achter feature flag client_action_workspace)
 *
 * Zusje van static/candidate-workspace.css: zelfde full-screen-laag +
 * gedockt-zijpaneel-patroon, toegepast op het klantdossier. Hergebruikt de
 * layout-tokens die candidate-workspace.css al op :root zet (--sol-w,
 * --ws-dur-slow, --ws-ease-out) i.p.v. ze hier te herdefiniëren -- beide
 * bestanden laden samen (static/index.html), en een tweede definitie zou de
 * eerste alleen maar overschrijven.
 *
 * Prefix: .clw- (Client WorkPlek), naar analogie van .cdv2- bij de kandidaat.
 *
 * GEDEELDE KLASSEN (bedoeld voor hergebruik door de contactpersoonkaart,
 * taak 3 -- zie CLAUDE.md-opdracht "Klant-werkplek"):
 *   .clw-root, .clw-main, .clw-wrap     -- de fullscreen-laag + scroll-body
 *   .clw-hero, .clw-hero__*             -- kop met avatar/naam/chip/acties
 *   .clw-tabs, .clw-tab, .clw-tabpanel  -- tabbladen (role=tablist-patroon)
 *   .clw-composer, .clw-composer__*     -- vaste composer-balk onderaan
 *   .clw-card, .clw-card__title         -- witte kaart, basis voor elk blok
 *   .clw-row, .clw-row__*               -- klikbare/niet-klikbare rij-layout
 *     (contactpersoon-rij, vacaturerij, tijdlijnregel -- alle drie dezelfde
 *     rij-opmaak, zie hieronder)
 *   .clw-field, .clw-field__*           -- inline-bewerkbaar veld (besluit 03)
 *   .clw-chip, .clw-chip--active        -- keuze-chip (arbeidsvoorwaarden)
 *   .clw-section (<details>)            -- uitklapsectie op de Gegevens-tab
 * De contactpersoonkaart (in het zijpaneel, .aac-side uit workspace-shell.js)
 * mag deze klassen 1-op-1 hergebruiken voor visuele pariteit; hij hoeft geen
 * nieuwe stijlen te verzinnen voor rijen, velden of chips.
 */

.clw-root {
  --ws-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
  --ws-shadow-md: 0 3px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
  --ws-shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);

  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg);
  overflow: hidden;
  display: none;
}
.clw-root.open { display: block; }

/* Zelfde reden als .cdv2-root: de mobiele .mobile-header (52px, fixed,
   z-index 90, static/style.css) ligt boven deze laag. */
@media (max-width: 768px) {
  .clw-root { top: 52px; }
}

/* Focusring alleen bij toetsenbordbediening -- zelfde ws-pointer-vlag als de
   kandidaat-werkplek (workspace-shell.js zet 'm bij elke pointerdown). */
body.ws-pointer .clw-root :focus-visible,
body.ws-pointer .clw-root .aac-side:focus-visible { outline: none; }
.clw-hero__name:focus { outline: none; }

/* Hoofdcontent + composer schuiven/verkleinen mee met het gedockte paneel
   (push-modus, >900px); op <=900px schakelt de shell zelf naar overlay. */
body.sol-open.ws-mode-push .clw-main,
body.sol-open.ws-mode-push .clw-composer {
  right: var(--sol-w);
}
body.sol-open.ws-mode-overlay .clw-main,
body.sol-open.ws-mode-overlay .clw-composer {
  right: 0;
}

.clw-main {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  transition: right var(--ws-dur-slow, 350ms) var(--ws-ease-out, ease);
}
.clw-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 40px 200px;
}
@media (max-width: 760px) {
  .clw-wrap { padding: 20px 18px 200px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.clw-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-tertiary);
  cursor: pointer;
}
.clw-hero__back:hover { color: var(--fg-primary); }

.clw-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.clw-hero__main {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.clw-hero__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #F3F4F6;
  color: #555555;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  flex-shrink: 0;
}
.clw-hero__name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.clw-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--fg-tertiary);
  margin-top: 4px;
}
.clw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.clw-chip .d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.clw-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 2px;
}
.clw-hero__iconbtn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg-secondary);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  text-decoration: none;
  flex-shrink: 0;
}
.clw-hero__iconbtn:hover { border-color: #D4D4D8; color: var(--fg-primary); }
.clw-hero__kebab { position: relative; }
.clw-hero__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--ws-shadow-lg, 0 8px 32px rgba(0,0,0,.12));
  padding: 6px;
  min-width: 210px;
}
.clw-hero__menu[hidden] { display: none; }
.clw-hero__menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--fg-primary);
  cursor: pointer;
}
.clw-hero__menu button:hover { background: var(--surface-hover); }
.clw-hero__menu button.danger { color: var(--badge-red-fg); }
@media (max-width: 700px) {
  .clw-hero__avatar { width: 50px; height: 50px; font-size: 16px; }
  .clw-hero__name { font-size: 20px; }
  /* Tikdoel-eis (min. 40x40) voor deze module. Kandidaat-werkplek houdt
     .cdv2-hero__iconbtn bewust op 36px (buiten deze opdracht om aan te
     passen) -- dit is dus een bewust, geïsoleerd verschil t.o.v. de
     kandidaat, alléén op mobiel en alléén op deze klant-/contacteigen klasse. */
  .clw-hero__iconbtn { width: 40px; height: 40px; }
  /* Dezelfde reden: "Bewerk"/"Ontkoppelen" op een contactpersoonrij en de
     portaalknoppen op de contactpersoonkaart zetten hun eigen (kleinere)
     padding/font-size inline in de HTML -- dat wint van elke gewone CSS-regel.
     !important is hier de enige manier om ze op mobiel alsnog op tikmaat te
     krijgen zonder de generatoren in client-workspace.js/contact-workspace.js
     aan te passen. */
  .clw-row__acts .btn,
  #cwPortalBlock .btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}

/* ── Vacaturebalk boven de tabs ──────────────────────────────────────── */
.clw-vacbar { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
/* Doorklik naar het tabblad Vacatures zodra de balk gecapt is. Bewust een
   rustige regel, geen kaart: hij hoort bij de lijst erboven en mag de
   aandacht niet van de vacatures zelf afhalen. */
.clw-vacbar__more {
  background: none;
  border: none;
  align-self: flex-start;
  padding: 4px 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--koper);
  cursor: pointer;
}
.clw-vacbar__more:hover { text-decoration: underline; }
.clw-vacrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  cursor: pointer;
  font-family: var(--font-body);
}
.clw-vacrow:hover { border-color: var(--border-strong); }
.clw-vacrow__main { flex: 1; min-width: 0; }
.clw-vacrow__title { font-size: 13.5px; font-weight: 600; color: var(--fg-primary); }
.clw-vacrow__sub { font-size: 12px; color: var(--fg-tertiary); margin-top: 2px; }
.clw-vacrow__pipe {
  font-size: 12px;
  color: var(--fg-tertiary);
  background: var(--surface-active);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.clw-tabs {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 30px;
  overflow-x: auto;
}
.clw-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 0 11px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-tertiary);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.clw-tab:hover { color: var(--fg-primary); }
.clw-tab[aria-selected="true"] {
  color: var(--fg-primary);
  border-bottom-color: var(--fg-primary);
  font-weight: 600;
}
.clw-tab__label::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
}
.clw-tab__count {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
  border-radius: 10px;
  font-size: 11px;
  padding: 1px 6px;
}
.clw-tabpanel[hidden] { display: none; }

/* ── Overzicht: tweekoloms-grid ──────────────────────────────────────── */
.clw-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  align-items: start;
}
/* 760px, niet 900px: gelijkgetrokken met .cdv2-grid (candidate-workspace.css,
   eind-audit A18) -- de kandidaat-werkplek is hier de norm en houdt het
   tweekoloms-grid bewust tot 760px vast. */
@media (max-width: 760px) {
  .clw-grid { grid-template-columns: 1fr; }
}
/* In het zijpaneel is de VIEWPORT breed en alleen de container smal, dus de
   media query hierboven grijpt daar nooit. De paneelinhoud krijgt daarom een
   eigen klasse die het raster onvoorwaardelijk naar één kolom zet. */
.clw-in-panel .clw-grid { grid-template-columns: 1fr; }

/* ── Kaart-basis (gedeeld) ─────────────────────────────────────────────
   Maten letterlijk gelijkgetrokken met .cdv2-side/.cdv2-sum uit
   candidate-workspace.css: radius-lg (niet radius-md), #ececee-rand,
   16px 20px-padding en dezelfde subtiele schaduw. */
.clw-card {
  background: var(--surface);
  border: 1px solid #ececee;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.clw-card__title {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-quaternary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* Zonder gap schuift een lange kop ("PORTAALTOEGANG") tegen de actielink
     ("Beheren →") aan zodra de kaart smal is, zoals in het zijpaneel. */
  gap: 12px;
}
/* De kop mag afbreken, de actielink niet: die blijft op één regel rechts. */
.clw-card__title > :first-child { min-width: 0; }
.clw-card__title > a,
.clw-card__title > button { flex: none; white-space: nowrap; }
.clw-card__empty { color: var(--fg-tertiary); font-size: 13px; padding: 6px 0; }

/* ── Merkmateriaal ───────────────────────────────────────────────────── */
.clw-material-intro { margin: 4px 0 18px; }
.clw-material-intro h1 {
  margin: 0;
  color: var(--fg-primary);
  font: 650 21px/1.25 var(--font-display);
  letter-spacing: -.015em;
}
.clw-material-intro p { margin: 4px 0 0; color: var(--fg-tertiary); font-size: 12.5px; }
.clw-material-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(250px, .78fr);
  gap: 16px;
  align-items: start;
}
.clw-material__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.clw-material__heading h2 {
  margin: 0;
  color: var(--fg-primary);
  font: 650 17px/1.25 var(--font-display);
}
.clw-material__heading p { margin: 3px 0 0; color: var(--fg-tertiary); font-size: 12px; line-height: 1.45; }
.clw-material__heading .btn { flex: none; }

/* ── Merkidentiteit ──────────────────────────────────────────────────── */
.clw-brandkit { padding: 20px; }
.clw-brandkit__headactions { display: flex; align-items: center; gap: 8px; }
.clw-brandkit__headactions .btn { min-height: 32px; padding: 6px 10px; font-size: 11.5px; }
.clw-brandkit__overall,
.clw-brandkit__status {
  border-radius: 999px;
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 8px;
}
.clw-brandkit__status--approved { background: #ECFDF3; color: #166534; }
.clw-brandkit__status--draft { background: #FFF7ED; color: #9A3412; }
.clw-brandkit__status--rejected,
.clw-brandkit__status--revoked { background: #FEF2F2; color: #991B1B; }
.clw-brandkit__welcome {
  margin: 0 0 12px;
  padding: 11px 12px;
  border: 1px solid var(--koper-300);
  border-radius: var(--radius-md);
  background: var(--koper-subtle);
  color: var(--fg-primary);
  font-size: 12.5px;
}
.clw-brandkit__welcome p { margin: 3px 0 0; color: var(--fg-secondary); font-size: 11.5px; }
.clw-brandkit__form { border-top: 1px solid var(--border); }
.clw-brandkit__section { padding: 16px 0; border-bottom: 1px solid var(--border); }
.clw-brandkit__sectionhead { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.clw-brandkit__sectionhead h3 { margin: 0; color: var(--fg-primary); font-size: 13px; font-weight: 650; }
.clw-brandkit__sectionhead p,
.clw-brandkit__sectionhead > span { margin: 2px 0 0; color: var(--fg-tertiary); font-size: 10.5px; line-height: 1.4; }
.clw-brandkit__logos { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 9px; }
.clw-brandkit__logotile { min-width: 0; padding: 9px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.clw-brandkit__logolabel { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.clw-brandkit__logolabel strong { color: var(--fg-secondary); font-size: 10.5px; }
.clw-brandkit__logolabel span { color: var(--fg-quaternary); font-size: 9px; white-space: nowrap; }
.clw-brandkit__logopreview {
  width: 100%;
  height: 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-active);
  cursor: pointer;
}
.clw-brandkit__logopreview:hover { border-color: var(--koper); background: var(--koper-subtle); }
.clw-brandkit__logopreview img { width: 100%; height: 100%; object-fit: contain; }
.clw-brandkit__logoplaceholder { color: var(--fg-quaternary); font-size: 22px; font-weight: 300; }
.clw-brandkit__logoaction {
  width: 100%;
  margin-top: 6px;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--koper-700);
  font: 600 10.5px var(--font-body);
  cursor: pointer;
}
.clw-brandkit__logoaction:hover { color: var(--koper-900); text-decoration: underline; }
.clw-brandkit__fields { display: grid; gap: 9px; }
.clw-brandkit__fields--colors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clw-brandkit__fields label,
.clw-brandkit__reason,
.clw-brandkit__fontfield { display: flex; flex-direction: column; gap: 5px; color: var(--fg-tertiary); font-size: 10.5px; }
.clw-brandkit__colorcontrol {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 9px 4px 4px;
}
.clw-brandkit__colorcontrol:focus-within { border-color: var(--koper); box-shadow: 0 0 0 2px var(--koper-subtle); }
.clw-brandkit__colorcontrol input[type="color"] {
  width: 54px;
  height: 38px;
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.clw-brandkit__colorcontrol input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.clw-brandkit__colorcontrol input[type="color"]::-webkit-color-swatch,
.clw-brandkit__colorcontrol input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; }
.clw-brandkit__colorcontrol output { color: var(--fg-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }
.clw-brandkit__section--font { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.clw-brandkit__section--font .clw-brandkit__sectionhead { grid-column: 1 / -1; }
.clw-brandkit__fontfield select {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg-primary);
  font: 12px var(--font-body);
  cursor: pointer;
}
.clw-brandkit__fontpreview { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 12px; border-left: 2px solid var(--koper-300); }
.clw-brandkit__fontpreview strong { color: var(--fg-primary); font-size: 14px; }
.clw-brandkit__fontpreview span { color: var(--fg-tertiary); font-size: 10.5px; }
.clw-brandkit__rationale { margin: 10px 0 0; color: var(--fg-tertiary); font-size: 10.5px; }
.clw-brandkit__rationale summary,
.clw-brandkit__audit summary,
.clw-brandkit__revoke summary { cursor: pointer; }
.clw-brandkit__reason { margin-top: 8px; }
.clw-brandkit__reason textarea { min-height: 58px; padding: 8px 9px; resize: vertical; border: 1px solid var(--border); border-radius: var(--radius-sm); font: 11.5px var(--font-body); }
.clw-brandkit__savebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; }
.clw-brandkit__savebar p { max-width: 390px; margin: 0; color: var(--fg-tertiary); font-size: 10.5px; line-height: 1.4; }
.clw-brandkit__savebar .btn { min-height: 34px; padding: 7px 13px; font-size: 12px; }
.clw-brandkit__decision { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 12px; border: 1px solid #F0D6C2; border-radius: var(--radius-md); background: #FFF9F4; }
.clw-brandkit__decision strong { color: var(--fg-primary); font-size: 12px; }
.clw-brandkit__decision p { margin: 3px 0 0; color: var(--fg-tertiary); font-size: 10.5px; }
.clw-brandkit__decisionactions { display: flex; align-items: flex-start; gap: 8px; }
.clw-brandkit__decisionactions .btn { min-height: 32px; padding: 6px 10px; font-size: 11px; }
.clw-brandkit__decisionactions details { color: var(--fg-tertiary); font-size: 10.5px; }
.clw-brandkit__revoke { margin-top: 12px; color: var(--fg-tertiary); font-size: 10.5px; }
.clw-brandkit__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--fg-tertiary); font-size: 10.5px; }
.clw-brandkit__footer > div { display: flex; align-items: center; gap: 12px; }
.clw-brandkit__footstatus { color: #16794C; }
.clw-brandkit__more { position: relative; }
.clw-brandkit__more > summary { color: var(--fg-secondary); cursor: pointer; list-style: none; }
.clw-brandkit__more > summary::-webkit-details-marker { display: none; }
.clw-brandkit__morepanel { width: min(330px, 80vw); position: absolute; z-index: 4; right: 0; top: 24px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--ws-shadow-md); }
.clw-brandkit__morepanel p { margin: 0 0 9px; line-height: 1.45; }
.clw-brandkit__morepanel .btn { margin-top: 9px; min-height: 30px; padding: 5px 8px; font-size: 10.5px; }
.clw-brandkit__audit { font-size: 10px; }
.clw-brandkit__audit span { display: block; overflow-wrap: anywhere; margin-top: 4px; }
/* Historische versieweergave blijft beschikbaar voor audit-/reviewstates. */
.clw-brandkit__version { border-top: 1px solid var(--border); padding: 12px 0; }
.clw-brandkit__versionhd { display: flex; justify-content: space-between; gap: 10px; color: var(--fg-primary); font-size: 12px; }
.clw-brandkit__source,
.clw-brandkit__meta { margin: 5px 0 0; color: var(--fg-tertiary); font-size: 10.5px; }
.clw-brandkit__colors { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.clw-brandkit__color { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; color: var(--fg-secondary); font-size: 10px; }
.clw-brandkit__color i { width: 10px; height: 10px; border: 1px solid rgba(0,0,0,.14); border-radius: 50%; }
.clw-brandkit__assets { margin-top: 9px; font-size: 10.5px; }
.clw-brandkit__assets ul { margin: 5px 0 0; padding: 0; list-style: none; }
.clw-brandkit__assets li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.clw-brandkit__assets small { color: var(--fg-tertiary); }

/* ── Beeldbank ───────────────────────────────────────────────────────── */
.clw-media { padding: 20px; }
.clw-media__stats { display: flex; gap: 18px; margin: -2px 0 14px; border-bottom: 1px solid var(--border); }
.clw-media__stats span { display: inline-flex; align-items: center; gap: 5px; padding: 0 1px 8px; color: var(--fg-tertiary); font-size: 11px; }
.clw-media__stats span.is-active { margin-bottom: -1px; border-bottom: 2px solid var(--koper); color: var(--fg-primary); font-weight: 600; }
.clw-media__stats b { min-width: 17px; padding: 1px 5px; border-radius: 999px; background: var(--surface-active); color: var(--fg-secondary); font-size: 9.5px; text-align: center; }
.clw-media__dropzone { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: #FCFCFC; cursor: pointer; transition: .15s ease; }
.clw-media__dropzone:hover,
.clw-media__dropzone.is-dragging { border-color: var(--koper); background: var(--koper-subtle); }
.clw-media__dropicon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--fg-secondary); font-size: 18px; }
.clw-media__dropzone > div:nth-child(2) { flex: 1; min-width: 0; }
.clw-media__dropzone strong { color: var(--fg-primary); font-size: 12.5px; }
.clw-media__dropzone p { margin: 2px 0 4px; color: var(--fg-secondary); font-size: 11px; }
.clw-media__dropzone span { color: var(--fg-quaternary); font-size: 9.5px; }
.clw-media__dropzone .btn { min-height: 32px; padding: 6px 10px; font-size: 11px; }
.clw-media__validationnote { margin: 6px 0 0; color: var(--fg-quaternary); font-size: 9.5px; text-align: right; }
.clw-media__queue { margin-top: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.clw-media__queuehead { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: var(--surface-active); color: var(--fg-tertiary); font-size: 10px; }
.clw-media__queuehead strong { color: var(--fg-secondary); font-size: 11px; }
.clw-media__queuehead button { margin-left: auto; padding: 0; border: 0; background: none; color: var(--koper-700); font: 600 9.5px var(--font-body); cursor: pointer; }
.clw-media__queuerow { min-height: 43px; display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(150px, auto); align-items: center; gap: 9px; padding: 6px 10px; border-top: 1px solid var(--border); }
.clw-media__fileicon { width: 30px; height: 26px; display: grid; place-items: center; border-radius: 5px; background: var(--surface-active); color: var(--fg-quaternary); font-size: 7.5px; font-weight: 700; }
.clw-media__filename { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.clw-media__filename strong { overflow: hidden; color: var(--fg-primary); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.clw-media__filename span { flex: none; color: var(--fg-quaternary); font-size: 9px; }
.clw-media__queueoutcome { display: flex; align-items: center; justify-content: flex-end; gap: 8px; text-align: right; }
.clw-media__queuestatus { color: var(--fg-tertiary); font-size: 9.5px; }
.clw-media__queuestatus.is-done { color: #16794C; font-weight: 600; }
.clw-media__queuestatus.is-uploading { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-secondary); }
.clw-media__queuestatus.is-uploading i { width: 10px; height: 10px; border: 1.5px solid var(--border-strong); border-top-color: var(--koper); border-radius: 50%; animation: clw-media-spin .7s linear infinite; }
@keyframes clw-media-spin { to { transform: rotate(360deg); } }
.clw-media__queueerror { color: #B42318; font-size: 9.5px; line-height: 1.3; }
.clw-media__retry { flex: none; padding: 0; border: 0; background: none; color: #B42318; font: 600 9.5px var(--font-body); text-decoration: underline; cursor: pointer; }
.clw-media__libraryhead { margin: 16px 0 8px; color: var(--fg-secondary); font-size: 10.5px; }
.clw-media__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.clw-media__item { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.clw-media__preview { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-active); }
.clw-media__preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.clw-media__badge { position: absolute; top: 8px; left: 8px; padding: 4px 7px; border-radius: 999px; background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); font-size: 9px; font-weight: 650; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.clw-media__badge--approved { background: #ECFDF3; color: #166534; }
.clw-media__badge--pending { background: #FFF7ED; color: #9A3412; }
.clw-media__badge--expired,
.clw-media__badge--blocked { background: #FEF2F2; color: #991B1B; }
.clw-media__copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 9px 10px; }
.clw-media__copy strong { overflow: hidden; color: var(--fg-primary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.clw-media__copy small { color: var(--fg-tertiary); font-size: 9.5px; }
.clw-media__copy button { grid-column: 2; grid-row: 1 / 3; padding: 3px; border: 0; background: none; color: var(--fg-quaternary); cursor: pointer; }
.clw-media__empty { margin-top: 14px; padding: 18px; border-radius: var(--radius-md); background: var(--surface-active); text-align: center; }
.clw-media__empty strong { color: var(--fg-primary); font-size: 11.5px; }
.clw-media__empty p { max-width: 480px; margin: 4px auto 0; color: var(--fg-tertiary); font-size: 10.5px; line-height: 1.45; }

/* ── Gereedheid ──────────────────────────────────────────────────────── */
.clw-readiness { padding: 20px; }
.clw-readiness__score { color: #16794C; font: 700 24px/1 var(--font-display); }
.clw-readiness ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.clw-readiness li { display: flex; align-items: center; gap: 8px; color: var(--fg-tertiary); font-size: 11.5px; line-height: 1.35; }
.clw-readiness li span { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-active); color: var(--fg-quaternary); font-size: 10px; font-weight: 700; }
.clw-readiness li.complete { color: var(--fg-secondary); }
.clw-readiness li.complete span { background: #ECFDF3; color: #15803D; }
.clw-readiness__progress { height: 5px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: var(--surface-active); }
.clw-readiness__progress i { display: block; height: 100%; border-radius: inherit; background: #22A06B; }
.clw-readiness__percentage { margin: 6px 0 0; color: var(--fg-tertiary); font-size: 9.5px; text-align: right; }
.clw-material-use { margin: 16px -4px -4px; padding: 14px 4px 4px; border-top: 1px solid var(--border); }
.clw-material-use strong { color: var(--fg-primary); font-size: 11.5px; }
.clw-material-use p { margin: 5px 0 0; color: var(--fg-tertiary); font-size: 10.5px; line-height: 1.45; }

@media (max-width: 900px) {
  .clw-material-grid { grid-template-columns: 1fr; }
  .clw-brandkit__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .clw-brandkit__fields--colors,
  .clw-media__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clw-brandkit__logos { grid-template-columns: 1fr 1fr; }
  .clw-brandkit__logotile.is-primary { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .clw-material__heading,
  .clw-brandkit__sectionhead,
  .clw-brandkit__savebar,
  .clw-brandkit__decision,
  .clw-media__dropzone { flex-direction: column; }
  .clw-material__heading .btn,
  .clw-media__dropzone .btn { width: 100%; }
  .clw-brandkit__headactions { width: 100%; justify-content: space-between; }
  .clw-brandkit__logos,
  .clw-brandkit__fields--colors,
  .clw-brandkit__section--font,
  .clw-media__grid { grid-template-columns: 1fr; }
  .clw-brandkit__section--font .clw-brandkit__sectionhead,
  .clw-brandkit__logotile.is-primary { grid-column: auto; }
  .clw-media__queuerow { grid-template-columns: 32px minmax(0, 1fr); }
  .clw-media__queueoutcome { grid-column: 2; justify-content: flex-start; text-align: left; }
}

/* Feitenlijst (Klantgegevens-kaart) */
.clw-fact { display: flex; gap: 10px; padding: 6px 0; align-items: flex-start; }
.clw-fact svg { color: var(--fg-quaternary); flex-shrink: 0; margin-top: 2px; }
.clw-fact p { margin: 0; font-size: 11.5px; color: var(--fg-tertiary); }
.clw-fact b { font-weight: 500; font-size: 13.5px; color: var(--fg-primary); }
.clw-fact b.empty { color: var(--fg-quaternary); font-weight: 400; }

/* ── Rij-patroon (gedeeld): contactpersoon, vacature, tijdlijn ──────────── */
.clw-rows { display: flex; flex-direction: column; gap: 8px; }
.clw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.clw-row__main { flex: 1; min-width: 0; }
.clw-row__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--koper);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.clw-row__name:hover { text-decoration: underline; }
.clw-row__sub { font-size: 12px; color: var(--fg-tertiary); margin-top: 2px; }
.clw-row__acts { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }

/* ── Inline-bewerkbaar veld (besluit 03) ────────────────────────────────── */
.clw-field { margin-bottom: 10px; }
.clw-field__label {
  display: block;
  font-size: 11.5px;
  color: var(--fg-tertiary);
  margin-bottom: 3px;
}
.clw-field__value {
  display: block;
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--fg-primary);
  cursor: text;
  box-sizing: border-box;
}
.clw-field__value:hover { border-color: var(--border); background: var(--surface-hover); }
.clw-field__value.empty { color: var(--fg-quaternary); }
.clw-field__input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--koper);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: var(--font-body);
  color: var(--fg-primary);
  box-sizing: border-box;
  background: var(--surface);
}
.clw-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
@media (max-width: 600px) {
  .clw-field-grid { grid-template-columns: 1fr; }
}

/* Chips (arbeidsvoorwaarden) */
.clw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.clw-chip-toggle {
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12.5px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-secondary);
}
.clw-chip-toggle.on {
  border-color: var(--koper);
  background: rgba(139,90,43,0.08);
  color: var(--koper);
}

/* ── Uitklapsectie op Gegevens (<details>) ───────────────────────────── */
.clw-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  background: var(--surface);
  overflow: hidden;
}
.clw-section__hd {
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}
.clw-section__hd::-webkit-details-marker { display: none; }
.clw-section__hd .chev { transition: transform .15s; color: var(--fg-tertiary); }
.clw-section[open] .clw-section__hd .chev { transform: rotate(90deg); }
.clw-section__hint { font-size: 11.5px; font-weight: 400; color: var(--fg-tertiary); }
.clw-section__bd { padding: 4px 16px 16px; border-top: 1px solid var(--border); }

/* Notities (alleen-lezen, besluit 05) */
.clw-notes-flag {
  font-size: 11.5px;
  color: var(--fg-tertiary);
  margin-bottom: 6px;
  font-style: italic;
}
.clw-notes-ro {
  white-space: pre-wrap;
  font-size: 13.5px;
  color: var(--fg-secondary);
  background: var(--surface-active);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

/* ── Tijdlijn ─────────────────────────────────────────────────────────── */
.clw-tl-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--fg-tertiary);
}
/* De rijstijl zelf is verhuisd naar .cdv2-tl* in candidate-workspace.css
   (gedeeld met candidate-workspace.js/client-workspace.js/contact-workspace.js
   via static/modules/activity-timeline.js, taak 5) -- geen eigen kopie meer
   hier. */

.clw-link-row {
  background: none;
  border: none;
  color: var(--koper);
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
}
.clw-link-row:hover { text-decoration: underline; }

/* ── Composer (identiek patroon aan .cdv2-composer) ─────────────────── */
.clw-composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  padding: 0 40px 22px;
  background: linear-gradient(to top, var(--bg) 55%, transparent);
  pointer-events: none;
  transition: right var(--ws-dur-slow, 350ms) var(--ws-ease-out, ease);
}
body.sol-open .clw-composer { z-index: 1295; }
.clw-composer__inner {
  max-width: 1000px;
  margin: 0 auto;
  pointer-events: auto;
  background: #fff;
  border: 1px solid #e2e2e6;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  padding: 14px 16px 10px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.clw-composer__inner.is-focus {
  border-color: #f2c4a0;
  box-shadow: 0 0 0 4px rgba(217, 123, 61, 0.09), 0 8px 28px rgba(0, 0, 0, 0.08);
}
.clw-composer.drag .clw-composer__inner {
  border-color: #d97b3d;
  box-shadow: 0 0 0 4px rgba(217, 123, 61, 0.16), 0 8px 28px rgba(0, 0, 0, 0.08);
}
.clw-composer__textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  max-height: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-primary);
  background: transparent;
  padding: 5px 0;
}
.clw-composer__textarea::-webkit-scrollbar { width: 0; height: 0; }
.clw-composer__textarea::placeholder { color: var(--fg-quaternary); }
.clw-composer__btn {
  background: none;
  border: none;
  color: var(--fg-tertiary);
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.clw-composer__btn:hover { background: var(--surface-hover); color: var(--fg-primary); }
.clw-composer__send {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--fg-primary);
  color: #fff;
}
.clw-composer__send:hover { background: #333; color: #fff; }
/* De chipbalk en de bestandsregel staan BOVEN het invoerveld, binnen
   .clw-composer -- en die container is over de volle schermbreedte gespannen
   met pointer-events:none (hij is alleen een gradient-laag). Zonder dezelfde
   max-width/centrering als .clw-composer__inner landt de chip linksonder in
   beeld i.p.v. boven het invoerveld, en zonder pointer-events:auto is hij niet
   klikbaar -- dan kun je de geraden modus niet corrigeren. Zelfde reden en
   zelfde oplossing als bij .cdv2-composer__modes; gemeld op staging 17-08. */
.clw-composer__modes {
  display: flex;
  gap: 6px;
  padding: 0 4px 8px;
  max-width: 1000px;
  margin: 0 auto;
  pointer-events: auto;
}
/* Maten gelijkgetrokken met .cdv2-mode/.cdv2-mode--actief
   (candidate-workspace.css): geen achtergrondtint in actieve stand, wel
   vetter lettergewicht -- was hier omgekeerd. */
.clw-mode {
  font-size: 12px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
  background: transparent;
  color: var(--fg-tertiary);
  cursor: pointer;
}
.clw-mode[aria-pressed="true"] { border-color: var(--koper); color: var(--koper); font-weight: 600; }
.clw-composer__file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 8px;
  font-size: 12px;
  color: var(--fg-secondary);
  max-width: 1000px;
  margin: 0 auto;
  pointer-events: auto;
}
/* Ontbrak: zonder afkapping loopt een lange bestandsnaam onder de
   composer-balk uit. Maten gelijk aan .cdv2-composer__filename. */
.clw-composer__filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}
.clw-composer__fileclear {
  background: none;
  border: none;
  color: var(--fg-tertiary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.clw-composer__fileclear:hover { color: var(--koper); }
/* Echte bug: `.clw-composer__modes`/`.clw-composer__file` zetten zelf
   `display:flex`, en die auteursregel wint van het UA-`[hidden]{display:none}`
   -- zonder deze vangregel bleven de moduschip-balk en de bestandsbadge dus
   permanent zichtbaar, ook als JS het `hidden`-attribuut zette. Zelfde val en
   zelfde vangnet als .cdv2-composer__modes[hidden] in candidate-workspace.css. */
.clw-composer__modes[hidden],
.clw-composer__file[hidden] { display: none; }
@media (max-width: 700px) {
  .clw-composer { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .clw-composer__textarea { font-size: 16px; }
}

/* ── Composer-antwoord in het gedeelde zijpaneel ─────────────────────── */
.clw-composer-answer {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-primary);
}

/* ── Aanbevolen actie (Overzicht) ─────────────────────────────────────
   Eigen, bewust kleine kaart; action-card.js is kandidaatgebonden en niet
   herbruikbaar zonder live kandidaatgedrag te raken. De kaart zelf komt uit
   de gedeelde module static/modules/action-ops.js (ook gebruikt door de
   vacaturewerkplek); deze klassen zijn daarmee gedeelde opmaak, geen
   klant-eigen opmaak. Leeg = geen aanbeveling, dan rendert de slot niets en
   valt de kaart weg. */
.clw-action {
  background: var(--surface);
  border: 1px solid var(--koper-glow, #F2C4A0);
  border-radius: var(--radius-lg, 14px);
  padding: 15px 17px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(217, 123, 61, 0.08);
}
.clw-action__label {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--koper);
  font-weight: 700;
  margin-bottom: 7px;
}
.clw-action__title {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.32;
}
.clw-action__body {
  margin: 0 0 13px;
  font-size: 13px;
  color: var(--fg-secondary);
  line-height: 1.48;
}
/* De voorgestelde inhoud zelf (notitietekst, taaktitel, aanleiding). Stond er
   eerder niet: titel en knoppen alleen lieten de gebruiker iets bevestigen dat
   hij nergens kon lezen -- de tekst zit in action.parameters. */
.clw-action__inhoud {
  margin: 0 0 13px;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 3px 10px;
  font-size: 13px;
  line-height: 1.48;
}
.clw-action__inhoud dt {
  color: var(--fg-tertiary);
  font-weight: 600;
}
.clw-action__inhoud dd {
  margin: 0;
  color: var(--fg-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.clw-action__btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}