/* =====================================================================
   cdpsuite.css — Module 3.6 · CDP. Prototype-slate (blauwtint) →
   ink/groen-tokens. Prefix cdp-/cdps. Tokens only.
===================================================================== */

.cdps { max-width: 1240px; margin: 0 auto; padding: 26px 32px 48px; }
.cdp-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.cdp-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.cdp-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 66ch; }
.cdp-tabs { display: flex; gap: 7px; }
.cdp-boxchip { padding: 6px 15px; border-radius: 8px; cursor: pointer; font: 600 .72rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); }
.cdp-boxchip.is-actief { border-color: var(--c-ink); background: var(--c-ink); color: #fff; font-weight: 700; }
.cdp-groen { color: var(--c-groen-d); }
.cdp-terra { color: var(--c-terra-d); }
.cdp-amber { color: var(--c-amber); }
.cdp-groen-d { color: var(--c-groen-d); }
.cdp-ink { color: var(--c-ink-2); }
.cdp-stil { color: var(--c-ink-3); }

/* kanaal-iconen + balken */
.cdp-kanaalic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-size: .8rem; }
.cdp-kanaalic.is-terra { color: var(--c-terra-d); background: var(--c-terra-t); }
.cdp-kanaalic.is-groen { color: var(--c-groen-d); background: var(--c-groen-t); }
.cdp-kanaalic.is-groen-d { color: #fff; background: var(--c-groen-d); }
.cdp-kanaalic.is-amber { color: var(--c-amber); background: var(--c-amber-t); }
.cdp-kanaalic.is-ink { color: #fff; background: var(--c-ink-2); }
.cdp-kanaalic.is-stil { color: var(--c-ink-2); background: var(--c-paneel); }
.cdp-balk { height: 9px; border-radius: 5px; background: var(--c-paneel); }
.cdp-balk i { display: block; height: 100%; border-radius: 5px; min-width: 14px; background: var(--c-groen); }
.cdp-balk i.is-terra { background: var(--c-terra); }
.cdp-balk i.is-groen-d { background: var(--c-groen-d); }
.cdp-balk i.is-amber { background: var(--c-amber); }
.cdp-balk i.is-ink { background: var(--c-ink-2); }
.cdp-balk i.is-stil { background: var(--c-lijn-2); }

/* attributie */
.cdp-modusrij { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cdp-modusrij > span { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); flex: 1; min-width: 240px; }
.cdp-modus { display: flex; gap: 6px; background: var(--c-paneel); border-radius: 10px; padding: 4px; min-width: 260px; }
.cdp-modusknop { flex: 1; padding: 8px 6px; border-radius: 8px; cursor: pointer; text-align: center; font: 600 .72rem var(--font-ui); border: none; background: transparent; color: var(--c-ink-2); }
.cdp-modusknop.is-actief { background: var(--c-ink); color: #fff; font-weight: 700; }
.cdp-tabel { padding: 0; overflow: hidden; margin-top: 4px; }
.cdp-attrrij { display: grid; grid-template-columns: 2.2fr 1fr 1.4fr 1fr 1.1fr; gap: 12px; padding: 14px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn); align-items: center; }
.cdp-attrrij--kop { padding: 12px 20px; background: var(--c-creme); font-size: .56rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); }
.cdp-bron { display: flex; gap: 11px; align-items: center; min-width: 0; }
.cdp-bron strong { display: block; font-size: .78rem; }
.cdp-bron span { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cdp-rechts { text-align: right; font-size: .76rem; }
.cdp-omzet { font-weight: 700; }
.cdp-convkop { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.cdp-convkop strong { font-size: .82rem; }
.cdp-convkop .mono { font-size: .64rem; color: var(--c-ink-3); }
.cdp-inzicht { margin-top: 14px; padding: 13px 18px; border-radius: 12px; background: var(--c-groen-t); font: 400 .72rem/1.55 var(--font-ui); color: var(--c-ink-2); }

/* segmentatie */
.cdp-seggrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; margin-top: 14px; }
@media (max-width: 1000px) { .cdp-seggrid { grid-template-columns: 1fr; } }
.cdp-facetten { padding: 20px 22px; }
.cdp-facetten__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cdp-facetten__kop strong { font-size: .88rem; }
.cdp-facetgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
@media (max-width: 700px) { .cdp-facetgrid { grid-template-columns: 1fr; } }
.cdp-facet .kicker { display: block; margin-bottom: 8px; }
.cdp-optie { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 11px; border-radius: 8px; cursor: pointer; font: 500 .72rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn); background: #fff; color: var(--c-ink); margin-bottom: 6px; text-align: left; }
.cdp-optie em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.cdp-optie.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); font-weight: 700; }
.cdp-optie.is-actief em { color: var(--c-groen-d); }
.cdp-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; }
.cdp-telling { border-radius: 14px; background: var(--c-ink); padding: 24px; color: #fff; box-shadow: var(--schaduw-tegel); }
.cdp-telling .kicker { color: color-mix(in srgb, #fff 70%, transparent); }
.cdp-telling > strong { display: block; font-size: 2.4rem; line-height: 1.05; margin: 8px 0 2px; font-family: var(--font-mono); letter-spacing: -.02em; }
.cdp-telling > span { font: 500 .76rem var(--font-ui); color: color-mix(in srgb, #fff 82%, transparent); }
.cdp-telling__balk { height: 7px; border-radius: 5px; background: color-mix(in srgb, #fff 20%, transparent); margin-top: 16px; }
.cdp-telling__balk i { display: block; height: 100%; border-radius: 5px; background: #fff; }
.cdp-telling__f { display: block; font: 500 .7rem var(--font-ui); color: color-mix(in srgb, #fff 70%, transparent); margin-top: 10px; }
.cdp-opslaan { width: 100%; margin-top: 16px; justify-content: center; background: #fff; color: var(--c-ink); font-weight: 800; }
.cdp-paneel { padding: 18px 20px; }
.cdp-paneel > strong { display: block; font-size: .82rem; margin-bottom: 13px; }
.cdp-segment { display: block; width: 100%; box-sizing: border-box; border: none; background: transparent; cursor: pointer; text-align: left; font: inherit; padding: 0; margin-bottom: 14px; }
.cdp-segment > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cdp-segment strong { font-size: .74rem; }
.cdp-segment em { font-style: normal; font-size: .7rem; font-weight: 700; }
.cdp-segment .cdp-balk { height: 6px; margin: 6px 0 5px; }
.cdp-segment__voet { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }

/* identiteit */
.cdp-review { text-align: right; }
.cdp-review strong { display: block; font-size: 1.4rem; color: var(--c-terra-d); }
.cdp-review span { font: 600 .58rem var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); }
.cdp-idlijst { display: flex; flex-direction: column; gap: 16px; margin: 14px 0 18px; }
.cdp-idkaart { padding: 20px 22px; }
.cdp-idkaart__kop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cdp-ring { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c-groen-d) calc(var(--pct) * 1%), var(--c-paneel) 0); }
.cdp-ring.is-amber { background: conic-gradient(var(--c-amber) calc(var(--pct) * 1%), var(--c-paneel) 0); }
.cdp-ring.is-terra { background: conic-gradient(var(--c-terra) calc(var(--pct) * 1%), var(--c-paneel) 0); }
.cdp-ring span { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: .56rem; font-weight: 700; }
.cdp-idkaart__naam { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdp-idkaart__naam strong { font-size: .9rem; }
.cdp-idkaart__kop > div:last-child > span { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); }
.cdp-records { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cdp-record { display: flex; gap: 11px; align-items: center; padding: 9px 13px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); }
.cdp-record .cdp-kanaalic { width: 26px; height: 26px; font-size: .68rem; }
.cdp-record > div { flex: 1; min-width: 0; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); }
.cdp-record strong { color: var(--c-ink); }
.cdp-record > .mono { font-size: .6rem; color: var(--c-ink-3); white-space: nowrap; }
.cdp-conflict { display: flex; gap: 9px; align-items: flex-start; padding: 10px 13px; border-radius: 10px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); margin-bottom: 14px; font: 500 .72rem/1.45 var(--font-ui); }
.cdp-conflict span { color: var(--c-amber); }
.cdp-idacties { display: flex; gap: 10px; }
.cdp-verwerkt { font: 600 .74rem var(--font-ui); color: var(--c-groen-d); }

/* Suppressie-preview (B5a) */
.cdp-suppressie { display: flex; flex-direction: column; gap: 4px; }
.cdp-suprij { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid var(--c-lijn); color: var(--c-ink-2); }
.cdp-suprij--basis { color: var(--c-ink); font-weight: 600; }
.cdp-suprij--eind { border-bottom: 0; color: var(--c-groen-d); font-weight: 800; font-size: 13.5px; }
.cdp-supnoot { font-size: 11.5px; color: var(--c-ink-2); margin-top: 4px; }

/* Kanaal-vergelijk (B5c) */
.cdp-kanaalvgl { margin-top: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.cdp-kanaalvgl__kop { display: flex; flex-direction: column; gap: 3px; }
.cdp-kvrij { display: grid; grid-template-columns: 1.6fr .7fr .7fr 1.4fr .8fr .8fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.cdp-kvrij:last-child { border-bottom: 0; }
.cdp-kvrij--kop { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
.cdp-kvrij.is-beste { background: color-mix(in srgb, var(--c-groen) 10%, transparent); border-radius: 8px; padding-left: 6px; padding-right: 6px; }