/* =====================================================================
   compliance.css — module 6.7 · Compliance & audit + Kennisbank +
   CLM (compliance · kennisbank · clmregister · clmsignalen).
   Alles op tokens; diepte alleen via de vaste tokens.
===================================================================== */

.cpl { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.cpl .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); display: block; margin-bottom: 6px; }
.cpl-kop { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.cpl-kop h1 { font-size: 26px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; }
.cpl-kop p { max-width: 760px; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0; }
.cpl .mono { font-family: var(--font-mono); }
.cpl-rek { flex: 1; }
.cpl .kaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--schaduw-tegel); margin-bottom: 11px; }
.cpl .kaart--strak { padding: 6px 0; }
.cpl-titel { font-size: 15px; font-weight: 800; color: var(--c-ink); display: block; margin-bottom: 3px; }
.cpl-hint { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.5; display: block; margin-bottom: 12px; max-width: 640px; }
.cpl-voetnoot { font-size: 12px; color: var(--c-ink-3); line-height: 1.55; display: block; margin-top: 8px; }
.cpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cpl-smal { max-width: 900px; }

/* tabs & chips & knoppen */
.cpl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 16px; }
.cpl-tab { font: 600 13px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 8px 16px; cursor: pointer; transition: background .16s, color .16s, border-color .16s; }
.cpl-tab:hover { border-color: var(--c-lijn-2); color: var(--c-ink); }
.cpl-tab.is-actief { background: var(--c-groen-d); border-color: var(--c-groen-d); color: var(--c-creme); }
.cpl-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 14px; }
.cpl-chipknop { font: 600 12px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 5px 13px; cursor: pointer; transition: border-color .16s, background .16s, color .16s; }
.cpl-chipknop:hover { border-color: var(--c-lijn-2); }
.cpl-chipknop.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }
.cpl-chipknop.is-amber { background: var(--c-amber-t); border-color: var(--c-oker); color: var(--c-ink); }
.cpl-teller { margin-left: auto; font-size: 11px; color: var(--c-ink-3); }
.cpl-knop { font: 700 13px var(--font-ui); color: var(--c-ink); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; box-shadow: var(--schaduw-knop); transition: border-color .16s, background .16s; width: fit-content; }
.cpl-knop:hover { border-color: var(--c-ink-3); }
.cpl-knop--klein { padding: 6px 13px; font-size: 12.5px; }
.cpl-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--c-creme); }
.cpl-knop--primair:hover { background: var(--gradient-primair-hover); }
.cpl-knop--donker { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }
.cpl-knop--rood { border-color: var(--c-rood); color: var(--c-rood); }
.cpl-knop--terra { background: var(--c-terra); border-color: var(--c-terra-d); color: var(--c-creme); }
.cpl-knop--sage { background: var(--c-sage-t); border-color: var(--c-sage); color: var(--c-groen-d); }
.cpl-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.cpl-zoek { flex: 1; min-width: 220px; max-width: 420px; padding: 9px 14px; border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel); font: 500 13px var(--font-ui); color: var(--c-ink); }
.cpl-melding { display: block; padding: 11px 15px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; margin-bottom: 13px; }
.cpl-melding.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.cpl-melding.is-blok { background: var(--c-rood-t); color: var(--c-rood); }
.cpl-melding.is-signaal { background: var(--c-amber-t); color: var(--c-ink); border: var(--lijndikte) solid var(--c-oker); }
.cpl-melding a { color: inherit; font-weight: 700; }
.cpl-balkje { width: 4px; border-radius: var(--radius-pill); flex: none; align-self: stretch; background: var(--c-lijn-2); }
.cpl-balkje.is-rood { background: var(--c-rood); }
.cpl-balkje.is-terra { background: var(--c-terra); }
.cpl-balkje.is-amber { background: var(--c-oker); }
.cpl-balkje.is-stil { background: var(--c-lijn-2); }
.cpl-balkje.is-ink { background: var(--c-ink-2); }
.cpl-balkje.is-oker { background: var(--c-oker); }
.cpl-balkje.is-groen { background: var(--c-groen); }

/* compliance: signalen / SoD / audit */
.cpl-signaal { display: flex; gap: 13px; align-items: stretch; }
.cpl-signaal > div { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--c-ink-2); }
.cpl-signaal strong { font-size: 13.5px; color: var(--c-ink); }
.cpl-signaal__kop { display: flex; align-items: center; gap: 8px; }
.cpl-signaal__kop em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.cpl-st { font-size: 10.5px; color: var(--c-ink-3); align-self: flex-start; }
.cpl-sod { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--c-ink-2); }
.cpl-sod__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cpl-sod__kop strong { font-size: 13px; color: var(--c-ink); }
.cpl-sod__regel { font-weight: 600; color: var(--c-ink-2); }
.cpl-sod em { font-size: 11.5px; color: var(--c-ink-3); font-style: normal; }
.cpl-append { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: var(--radius); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); font: 700 12px var(--font-ui); color: var(--c-groen-d); }
.cpl-append em { font-weight: 500; font-size: 10.5px; font-style: normal; }
.cpl-auditrij { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--c-ink-2); }
.cpl-auditrij__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cpl-auditrij__kop strong { font-size: 13px; color: var(--c-ink); }
.cpl-auditrij__kop em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.cpl-bg { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; color: var(--c-rood); background: var(--c-rood-t); }
.cpl-auditrij__wie { font-size: 11.5px; }
.cpl-auditrij__wie b { color: var(--c-ink); }
.cpl-auditrij__wie i { font-style: normal; color: var(--c-ink-3); }
.cpl-auditrij__wie em { font-size: 10px; color: var(--c-ink-3); font-style: normal; }
.cpl-auditrij__delta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cpl-auditrij__delta b { color: var(--c-groen-d); font-weight: 700; }
.cpl-auditrij__delta em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.cpl-oud { font: 600 11px var(--font-ui); padding: 3px 10px; border-radius: 7px; background: var(--c-rood-t); color: var(--c-rood); text-decoration: line-through; }
.cpl-nieuw { font: 600 11px var(--font-ui); padding: 3px 10px; border-radius: 7px; background: var(--c-groen-t); color: var(--c-groen-d); }
.cpl-wisproef { border: var(--lijndikte) dashed var(--c-rood); border-radius: var(--radius); background: var(--c-rood-t); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cpl-wisproef strong { font-size: 13px; color: var(--c-ink); }
.cpl-wisproef span { font-size: 12px; line-height: 1.55; color: var(--c-ink-2); }
.cpl-geweigerd { font: 700 12px var(--font-ui); color: var(--c-rood); font-style: normal; }
.cpl-bgrij { display: flex; gap: 13px; align-items: flex-start; }
.cpl-bgrij > i { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font: 700 15px var(--font-ui); color: var(--c-rood); background: var(--c-rood-t); font-style: normal; }
.cpl-bgrij > div { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--c-ink-2); }
.cpl-bgrij__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cpl-bgrij__kop strong { font-size: 13px; color: var(--c-ink); }
.cpl-bgrij__kop em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.cpl-bgrij > div > em { font-size: 11px; color: var(--c-ink-3); font-style: normal; line-height: 1.5; }
.cpl-lek { border-color: var(--c-rood); display: flex; flex-direction: column; gap: 10px; font-size: 12px; line-height: 1.55; color: var(--c-ink-2); }
.cpl-lek__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cpl-lek__kop strong { font-size: 13px; color: var(--c-ink); }
.cpl-lek a { color: var(--c-groen-d); font-weight: 700; }
.cpl-lekstappen { display: flex; gap: 6px; }
.cpl-lekstappen span { flex: 1; text-align: center; padding: 8px 6px; border-radius: 8px; font: 700 10px var(--font-ui); background: var(--c-paneel-2); color: var(--c-ink-3); }
.cpl-lekstappen .is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.cpl-lekstappen .is-bezig { background: var(--c-amber-t); color: var(--c-ink); }
.cpl-memo { margin-top: 3px; padding: 14px 16px; border-radius: var(--radius); background: var(--c-memo); border: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; gap: 4px; }
.cpl-memo strong { font-size: 12.5px; color: var(--c-ink); }
.cpl-memo span { font-size: 11.5px; line-height: 1.55; color: var(--c-ink-2); }
.cpl-dekking { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cpl-dekking.is-let { border-color: var(--c-oker); }
.cpl-dekking div { display: flex; flex-direction: column; gap: 2px; }
.cpl-dekking strong { font-size: 12.5px; color: var(--c-ink); }
.cpl-dekking span { font-size: 10.5px; color: var(--c-ink-3); }
.cpl-dekking b { font-size: 18px; font-weight: 800; }
.cpl-dekking b.is-groen { color: var(--c-groen-d); }
.cpl-dekking b.is-amber { color: var(--c-oker); }

/* kennisbank */
.kb-grid { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
.kb-lijst { display: flex; flex-direction: column; gap: 9px; max-height: 640px; overflow-y: auto; }
.kb-rij { display: flex; flex-direction: column; gap: 5px; text-align: left; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 11px 13px; cursor: pointer; font-family: var(--font-ui); transition: border-color .16s, background .16s; }
.kb-rij:hover { border-color: var(--c-lijn-2); }
.kb-rij.is-actief { background: var(--c-paneel); border-color: var(--c-groen); box-shadow: var(--schaduw-tegel); }
.kb-rij strong { font-size: 13px; line-height: 1.3; color: var(--c-ink); }
.kb-rij__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kb-rij em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.kb-rij__cat { letter-spacing: .08em; text-transform: uppercase; font-size: 9px; color: var(--c-groen-d); }
.kb-artikel { padding: 22px 24px; }
.kb-artikel__meta { font-size: 10px; letter-spacing: .08em; color: var(--c-ink-3); display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kb-artikel h2 { font-size: 21px; font-weight: 800; line-height: 1.3; color: var(--c-ink); margin: 0 0 14px; }
.kb-artikel__balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 0; border-top: var(--lijndikte) solid var(--c-lijn); border-bottom: var(--lijndikte) solid var(--c-lijn); margin-bottom: 16px; }
.kb-artikel__eig { font-size: 11px; color: var(--c-ink-3); text-align: right; font-style: normal; line-height: 1.5; }
.kb-artikel__body { font-size: 14px; line-height: 1.7; color: var(--c-ink-2); }
.kb-pub { display: inline-flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; font: 700 11.5px var(--font-ui); color: var(--c-ink); padding: 4px; border-radius: var(--radius-pill); }
.kb-pub i { width: 38px; height: 22px; border-radius: var(--radius-pill); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel-2); position: relative; transition: background .16s; }
.kb-pub i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); transition: left .16s; }
.kb-pub.is-aan i { background: var(--c-groen); border-color: var(--c-groen-d); }
.kb-pub.is-aan i::after { left: 18px; }
.kb-verlopen { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: var(--radius); background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra); margin-bottom: 16px; font-size: 12px; line-height: 1.45; color: var(--c-terra-d); }
.kb-verlopen i { font-style: normal; font-size: 15px; }
.kb-verlopen span { flex: 1; font-weight: 600; }
.kb-ctx { margin-top: 18px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kb-ctx .kicker { width: 100%; margin-bottom: 4px; }
.kb-ctx__chip { font: 600 10.5px var(--font-ui); padding: 4px 10px; border-radius: 7px; background: var(--c-groen-t); color: var(--c-groen-d); }
.kb-padgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.kb-pad { display: flex; flex-direction: column; gap: 9px; padding: 18px 19px; }
.kb-pad__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kb-pad__kop em { font-size: 9px; letter-spacing: .06em; color: var(--c-ink-3); font-style: normal; }
.kb-pad > strong { font-size: 15px; font-weight: 800; color: var(--c-ink); }
.kb-pad > em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.kb-mod { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--c-ink-2); }
.kb-mod i { width: 20px; height: 20px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font: 700 11px var(--font-ui); color: var(--c-ink-3); background: var(--c-paneel-2); font-style: normal; }
.kb-mod i.is-klaar { color: var(--c-creme); background: var(--c-groen); }
.kb-mod span { flex: 1; font-weight: 600; }
.kb-balk { display: block; height: 7px; border-radius: var(--radius-pill); background: var(--c-paneel-2); overflow: hidden; }
.kb-balk b { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen); transition: width .3s; }
.kb-gap { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.kb-gap.is-gap { border-color: var(--c-oker); }
.kb-gap strong { flex: 1; font-size: 12.5px; color: var(--c-ink); }
.kb-gap em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.kb-top { margin-bottom: 12px; }
.kb-top > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.kb-top span { font: 600 12px var(--font-ui); color: var(--c-ink); }
.kb-top em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.kb-client__kop { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.kb-client__kop i { width: 30px; height: 30px; border-radius: 9px; background: var(--c-groen); display: flex; align-items: center; justify-content: center; font: 800 13px var(--font-ui); color: var(--c-creme); font-style: normal; }
.kb-client__kop strong { font-size: 17px; font-weight: 800; color: var(--c-ink); }

/* CLM */
.clm-rij { display: grid; grid-template-columns: 1.7fr 1fr .8fr .9fr 1.1fr; gap: 12px; align-items: center; padding: 13px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 12.5px var(--font-ui); color: var(--c-ink-2); text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; cursor: pointer; }
div.clm-rij--kop { cursor: default; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.clm-rij:last-child { border-bottom: 0; }
.clm-rij:hover:not(.clm-rij--kop) { background: var(--c-creme); }
.clm-rij.is-rood { background: var(--c-rood-t); }
.clm-rij.is-amber { background: var(--c-amber-t); }
.clm-naam { display: flex; align-items: center; gap: 9px; }
.clm-naam i { font-style: normal; font-size: 14px; flex: none; }
.clm-naam i.is-groen { color: var(--c-groen-d); } .clm-naam i.is-terra { color: var(--c-terra); } .clm-naam i.is-ink { color: var(--c-ink-2); } .clm-naam i.is-oker { color: var(--c-oker); }
.clm-naam strong { font-size: 13.5px; color: var(--c-ink); }
.clm-naam em.mono { display: block; font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.clm-waarde { color: var(--c-oker); font-weight: 600; }
.clm-rij b.mono { display: block; font-size: 12px; color: var(--c-ink); margin-bottom: 3px; }
.clm-detgrid { display: grid; grid-template-columns: 1.5fr .9fr; gap: 18px; align-items: start; margin-top: 14px; }
.clm-det { padding: 22px 24px; }
.clm-det__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.clm-det__meta i { font-style: normal; font-size: 17px; }
.clm-det__meta i.is-groen { color: var(--c-groen-d); } .clm-det__meta i.is-terra { color: var(--c-terra); } .clm-det__meta i.is-ink { color: var(--c-ink-2); } .clm-det__meta i.is-oker { color: var(--c-oker); }
.clm-det__meta em { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); font-style: normal; }
.clm-det h1 { font-size: 23px; font-weight: 800; line-height: 1.15; color: var(--c-ink); margin: 0 0 4px; }
.clm-det__partij { font-size: 13.5px; color: var(--c-ink-2); }
.clm-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.clm-feiten strong { font-size: 13px; color: var(--c-ink); }
.clm-claus { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; background: var(--c-paneel); margin-bottom: 8px; font-size: 12.5px; }
.clm-claus i { width: 22px; height: 22px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font: 700 12px var(--font-ui); color: var(--c-creme); background: var(--c-groen); font-style: normal; }
.clm-claus span { flex: 1; font-weight: 600; color: var(--c-ink); }
.clm-claus em { font: 700 11px var(--font-ui); color: var(--c-groen-d); font-style: normal; }
.clm-claus.is-mist { border-color: var(--c-rood); background: var(--c-rood-t); }
.clm-claus.is-mist i { background: var(--c-rood); }
.clm-claus.is-mist em { color: var(--c-rood); }
.clm-verpl { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; margin-bottom: 8px; }
.clm-verpl i { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font: 600 14px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel-2); font-style: normal; }
.clm-verpl div { flex: 1; }
.clm-verpl strong { display: block; font-size: 12.5px; color: var(--c-ink); }
.clm-verpl em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.clm-versie { display: flex; gap: 11px; align-items: flex-start; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 12px 15px; margin-bottom: 8px; }
.clm-versie.is-cur { border-color: var(--c-groen); background: var(--c-groen-t); }
.clm-versie b { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px; background: var(--c-lijn-2); }
.clm-versie.is-cur b { background: var(--c-groen); }
.clm-versie div { flex: 1; }
.clm-versie__kop { display: flex; align-items: center; justify-content: space-between; }
.clm-versie strong { font-size: 13px; color: var(--c-ink); }
.clm-versie em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.clm-versie span { display: block; font-size: 12px; color: var(--c-ink-2); margin-top: 3px; }
.clm-bijlage { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; margin-bottom: 8px; font-size: 12.5px; }
.clm-bijlage i { font-style: normal; color: var(--c-ink-3); }
.clm-bijlage span { flex: 1; font-weight: 600; color: var(--c-ink); }
.clm-bijlage em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.clm-zij { display: flex; flex-direction: column; gap: 0; }
.clm-hero { border-radius: var(--radius); padding: 20px 22px; background: var(--c-ink); color: var(--c-creme); margin-bottom: 12px; box-shadow: var(--schaduw-tegel); }
.clm-hero .kicker { color: var(--c-creme); opacity: .55; }
.clm-hero strong { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.01em; }
.clm-hero strong.is-rood { color: var(--c-blush); }
.clm-hero strong.is-amber { color: var(--c-oker); }
.clm-hero span { display: block; font-size: 12.5px; opacity: .7; margin-top: 3px; }
.clm-hero em { display: block; font-size: 11.5px; font-style: normal; opacity: .75; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-ink-2); }
.clm-blok { display: flex; flex-direction: column; gap: 9px; }
.clm-blok__kop { display: flex; align-items: center; justify-content: space-between; }
.clm-blok strong { font-size: 12.5px; color: var(--c-ink); }
.clm-blok .cpl-knop { width: 100%; text-align: center; }
.clm-tekenaar { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; background: var(--c-creme); }
.clm-tekenaar > div { flex: 1; display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--c-ink-3); }
.clm-tekenaar__kop { display: flex; align-items: center; gap: 7px; }
.clm-tekenaar__kop strong { font-size: 12.5px; color: var(--c-ink); }
.clm-tekenaar em { font-style: normal; }
.clm-tekenaar > div > em.is-ok { color: var(--c-groen-d); font-weight: 700; }
.clm-bewijs { display: block; padding: 10px 12px; border-radius: 9px; background: var(--c-amber-t); font-size: 11px; line-height: 1.5; color: var(--c-ink-2); }
.clm-bewijs.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.clm-signaal { display: flex; align-items: center; gap: 14px; }
.clm-signaal__ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font: 600 15px var(--font-ui); font-style: normal; background: var(--c-paneel-2); color: var(--c-ink-2); }
.clm-signaal__ic.is-rood { color: var(--c-rood); background: var(--c-rood-t); }
.clm-signaal__ic.is-amber { color: var(--c-oker); background: var(--c-amber-t); }
.clm-signaal__ic.is-ink { color: var(--c-ink); background: var(--c-paneel-2); }
.clm-signaal__ic.is-oker { color: var(--c-oker); background: var(--c-amber-t); }
.clm-signaal__body { flex: 1; display: flex; flex-direction: column; gap: 2px; background: none; border: none; cursor: pointer; text-align: left; font: 500 12px var(--font-ui); color: var(--c-ink-2); padding: 0; }
.clm-signaal__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.clm-signaal__kop strong { font-size: 13.5px; color: var(--c-ink); }
.clm-signaal__kop em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.clm-signaal__actie { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.clm-signaal__actie em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.clm-signaal__actie em.is-rood { color: var(--c-rood); font-weight: 700; }

@media (max-width: 1080px) {
  .cpl-grid, .kb-grid, .clm-detgrid { grid-template-columns: 1fr; }
}

/* F7 a/b/c (16-07-2026) */
.kb-nuttig { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--c-lijn); font-size: 12.5px; }
.kb-nuttig__stand { font-size: 10.5px; color: var(--c-ink-2); margin-left: auto; }
.clm-maillog { padding: 12px 16px; margin-top: 12px; }
.clm-maillogrij { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--c-lijn); font-size: 12.5px; }
.clm-maillogrij em { display: block; font-size: 11px; color: var(--c-ink-2); font-style: normal; }

/* ---------- Redactie & contractbeheer (bewerken/intrekken) ---------- */
.cpl-knop--klein { padding: 5px 10px; font-size: .68rem; }
.clm-detacties { display: flex; gap: 6px; margin: 10px 0 2px; }