/* ============================================================
   C-ERP CDE-hoofdscherm (platform/cde-scherm.jsx + cde-upload.jsx)
   Documenten (mappenboom, tabel, detailpaneel, raster), Mark-ups,
   Upload en Herindeling. Alles in de bestaande C-ERP-opmaak:
   witte kaarten met radius 22 en de zwevende schaduw, beige velden,
   mono-labels, tokens uit cerp/styles.css, platform.css en
   compositie.css. Licht en donker via de tokens.
   Referentie: ontwerp CDE-dag V2 (Main, Raster, Upload, Markups,
   Herindeling). Prefix: cds
   ============================================================ */
.cds { display: flex; flex-direction: column; gap: 18px; }
.cds *, .cds *::before, .cds *::after { box-sizing: border-box; }
.cds button { font-family: inherit; cursor: pointer; }
.cds button:disabled { cursor: not-allowed; }
.cds .mono { font-family: var(--mono, 'Roboto Mono', monospace); }
.cds-lbl { font-family: var(--mono, 'Roboto Mono', monospace); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.cds-kaart { background: var(--surface); border-radius: var(--radius, 22px); box-shadow: var(--shadow); }
.cds-veld { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 11px; padding: 8px 11px; font-size: 12.5px; color: var(--text-3); min-width: 0; }
.cds-veld:focus-within { border-color: var(--brand); }
.cds-veld input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 12.5px; color: var(--text); outline: none; }
.cds-veld input::placeholder { color: var(--text-3); }
.cds-veld svg { flex: none; }

/* ---- titelrij ---- */
.cds-kop { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cds-kop .page-sub { margin-top: 6px; }
.cds-kop__acties { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cds-waarschuw { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; padding: 8px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber-tekst); white-space: nowrap; }
.cds-waarschuw:hover { background: color-mix(in srgb, var(--amber) 18%, transparent); }

/* ---- drie kolommen ---- */
.cds-lay { display: flex; gap: 16px; align-items: flex-start; }
.cds-lay > .cds-boom { width: 270px; flex: none; }
.cds-lay > .cds-tabel { flex: 1; min-width: 0; }
/* WP12 blok 1: breder detailpaneel voor de tabbladen met tellers (ontwerp 22-10: ongeveer 440 px). */
.cds-lay > .cds-detail { width: 440px; flex: none; }
@media (min-width: 1600px) { .cds-lay > .cds-boom { width: 290px; } .cds-lay > .cds-detail { width: 460px; } }
@media (max-width: 1280px) { .cds-lay > .cds-detail { width: 380px; } .cds-lay > .cds-boom { width: 240px; } }
@media (max-width: 1080px) { .cds-lay { flex-wrap: wrap; } .cds-lay > .cds-boom, .cds-lay > .cds-detail { width: 100%; } }

/* ---- mappenboom ---- */
.cds-boom { display: flex; flex-direction: column; padding: 16px 10px 12px; overflow: hidden; }
.cds-boom__kop { display: flex; align-items: center; padding: 0 8px 10px; gap: 8px; }
.cds-boom__kop span:last-child { margin-left: auto; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.cds-boom__zoek { margin: 0 6px 8px; padding: 7px 10px; }
.cds-boom__lijst { display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - 380px); min-height: 240px; overflow-y: auto; scrollbar-width: thin; }
.cds-boom__sectie { display: flex; align-items: center; gap: 8px; padding: 12px 10px 5px; }
.cds-boom__sectie i { flex: 1; height: 1px; background: var(--line); }
.cds-map { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 10px; border: none; border-radius: 9px; background: transparent; color: var(--text); font-size: 12.5px; text-align: left; line-height: 1.3; }
.cds-map:hover { background: var(--bg-2); }
.cds-map.is-leeg { color: var(--text-3); }
.cds-map.is-leeg .cds-map__ico { color: var(--text-3); opacity: .7; }
.cds-map.is-on { background: var(--brand-soft); color: var(--text); font-weight: 500; }
.cds-map.is-on .cds-map__ico { color: var(--brand); }
.cds-map__chev { width: 12px; flex: none; display: inline-flex; color: var(--text-3); }
/* h94 (vraag 349): de chevron is een eigen knop van 24 bij 24 die over het pijltje van de mapknop ligt */
.cds-maprij { position: relative; flex: none; }
.cds-map__klap { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent; cursor: pointer; }
.cds-map__klap:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.cds-map__ico { flex: none; color: color-mix(in srgb, var(--amber) 70%, var(--text-3)); display: inline-flex; }
.cds-map__code { font-family: var(--mono, monospace); font-size: 10.5px; color: var(--text-3); flex: none; }
.cds-map__naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cds-map__n { margin-left: auto; font-size: 11px; color: var(--text-3); flex: none; font-variant-numeric: tabular-nums; }
.cds-map.is-on .cds-map__n { color: var(--brand); font-weight: 600; }

/* ---- tabelkaart ---- */
.cds-tabel { display: flex; flex-direction: column; overflow: hidden; }
.cds-tabel__kop { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px 0; flex-wrap: wrap; }
.cds-tabel__kop b { font-size: 17px; font-weight: 400; }
.cds-tabel__kop span { font-size: 12px; color: var(--text-3); }
.cds-filters { display: flex; align-items: center; gap: 8px; padding: 14px 18px; flex-wrap: wrap; }
.cds-filters .cds-veld { width: 250px; }
.cds-wissel { margin-left: auto; display: flex; gap: 4px; background: var(--bg-2); border-radius: 10px; padding: 3px; }
.cds-wissel button { display: inline-flex; padding: 5px 8px; border: none; border-radius: 8px; background: transparent; color: var(--text-3); }
.cds-wissel button.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(12,48,55,.10); }
[data-theme="dark"] .cds-wissel button.is-on { background: var(--brand); color: #fff; }

/* chip met keuzemenu */
.cds-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 11px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); white-space: nowrap; max-width: 100%; }
button.cds-chip:hover { border-color: var(--line-strong); }
.cds-chip b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.cds-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cds-chip.is-fout { background: color-mix(in srgb, var(--signal) 10%, transparent); border-color: color-mix(in srgb, var(--signal) 40%, transparent); color: var(--signal); }
.cds-chip svg { flex: none; }
.cds-menu { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 220px; max-width: 360px; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.cds-menu--r { left: auto; right: 0; }
.cds-menu__zoek { margin: 2px 2px 6px; padding: 6px 9px; }
.cds-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: none; border-radius: 9px; background: transparent; color: var(--text); font-size: 12.5px; text-align: left; white-space: nowrap; }
.cds-menu__item:hover { background: var(--bg-2); }
.cds-menu__item.is-on { background: var(--brand-soft); color: var(--brand); font-weight: 500; }
.cds-menu__item:disabled { color: var(--text-3); }
.cds-menu__item em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-3); }
.cds-menu__item .cds-map__code { margin-right: 2px; }
.cds-menu__naam { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cds-menu__naam small { font-size: 11px; color: var(--text-3); white-space: normal; }
.cds-menu__kop { padding: 6px 10px 4px; }
.cds-menu__leeg { padding: 10px; font-size: 12px; color: var(--text-3); }
.cds-menu--gevaar .cds-menu__item:hover { background: color-mix(in srgb, var(--signal) 10%, transparent); color: var(--signal); }

/* rijen */
.cds-rijkop { display: grid; align-items: center; gap: 6px; padding: 0 14px; height: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.cds-rijkop button { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; padding: 0; color: inherit; font: inherit; text-align: left; white-space: nowrap; overflow: hidden; }
.cds-rijkop button.is-on { color: var(--brand); }
.cds-rij { display: grid; align-items: center; gap: 6px; padding: 0 14px; min-height: 42px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text); text-align: left; width: 100%; border-left: none; border-right: none; border-top: none; background: transparent; }
.cds-rij:hover { background: var(--bg-2); }
.cds-rij.is-on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.cds-rij.is-dim { opacity: .55; }
.cds-rij > span { min-width: 0; }
.cds-rij .cds-nr { font-family: var(--mono, monospace); font-size: 12px; font-weight: 500; color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cds-rij .cds-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cds-rij .cds-grijs { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cds-rij .cds-zwak { color: var(--text-3); }
/* h23: smalle lijst (telefoon, of boom en detail ernaast): Nummer en Titel in een cel, details eronder. */
.cds-rijkop__samen { display: flex; gap: 10px; min-width: 0; }
.cds-tabel.is-compact .cds-rij { flex: none; padding-top: 7px; padding-bottom: 7px; }
.cds-samen { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cds-samen__r1 { display: flex; gap: 8px; min-width: 0; align-items: baseline; }
.cds-samen__r1 .cds-nr { flex: none; max-width: 45%; }
.cds-samen__r1 .cds-titel { min-width: 0; }
.cds-samen__r2 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 11.5px; min-width: 0; }
.cds-vink { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--line-strong); display: inline-grid; place-items: center; background: transparent; padding: 0; color: #fff; flex: none; }
.cds-vink.is-on { background: var(--brand); border-color: var(--brand); }
.cds-vink.is-deels { background: color-mix(in srgb, var(--brand) 45%, transparent); border-color: var(--brand); }
.cds-lijst { display: flex; flex-direction: column; }
.cds-lijst--scroll { max-height: calc(100vh - 430px); min-height: 200px; overflow-y: auto; scrollbar-width: thin; }
.cds-leeg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 48px 20px; color: var(--text-3); }
.cds-leeg svg { color: var(--text-3); margin-bottom: 4px; }
.cds-leeg b { font-size: 13.5px; color: var(--text-2); font-weight: 500; }
.cds-leeg span { font-size: 12px; max-width: 420px; line-height: 1.5; }
.cds-leeg--groot { padding: 70px 20px; }
.cds-leeg--groot b { font-size: 16px; }
.cds-leeg--groot span { font-size: 13px; }
.cds-laden { padding: 30px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* status- en formaatpillen; --cds-c kleurt stip en vlak, --cds-t is de tekstvariant bij groen en amber (h137, vraag 346) */
.cds-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; color: var(--cds-t, var(--cds-c, var(--text-2))); background: color-mix(in srgb, var(--cds-c, var(--text-3)) 14%, transparent); }
.cds-st i { width: 6px; height: 6px; border-radius: 50%; background: var(--cds-c, var(--text-3)); flex: none; }
.cds-st--gedeeld { --cds-c: var(--steel); }
.cds-st--gepubliceerd { --cds-c: var(--pos); --cds-t: var(--pos-tekst); }
.cds-st--wip { --cds-c: var(--amber); --cds-t: var(--amber-tekst); }
.cds-st--gearchiveerd { --cds-c: var(--text-3); }
.cds-st--ingetrokken { --cds-c: var(--signal); }
.cds-st--open { --cds-c: var(--signal); }
.cds-st--in_behandeling { --cds-c: var(--amber); --cds-t: var(--amber-tekst); }
.cds-st--opgelost { --cds-c: var(--pos); --cds-t: var(--pos-tekst); }
.cds-st--afgewezen { --cds-c: var(--text-3); }
.cds-st--te_hercontroleren { --cds-c: var(--navy); }
.cds-st--hoog { --cds-c: var(--pos); --cds-t: var(--pos-tekst); }
.cds-st--middel { --cds-c: var(--amber); --cds-t: var(--amber-tekst); }
.cds-st--laag { --cds-c: var(--signal); }
.cds-st--info { --cds-c: var(--steel); }
.cds-fmts { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.cds-fmt { font-family: var(--mono, monospace); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; color: var(--cds-t, var(--cds-c, var(--text-2))); background: color-mix(in srgb, var(--cds-c, var(--text-3)) 14%, transparent); white-space: nowrap; }
.cds-fmt--pdf { --cds-c: var(--signal); }
.cds-fmt--dwg, .cds-fmt--dxf { --cds-c: var(--steel); }
.cds-fmt--ifc, .cds-fmt--rvt { --cds-c: var(--navy); }
.cds-fmt--png, .cds-fmt--jpg, .cds-fmt--jpeg { --cds-c: var(--amber); --cds-t: var(--amber-tekst); }
.cds-fmt--xlsx, .cds-fmt--docx, .cds-fmt--txt { --cds-c: var(--text-3); }
.cds-mu { display: inline-flex; align-items: center; gap: 4px; }

/* bulkbalk */
.cds-bulk { display: flex; align-items: center; gap: 14px; margin: 12px 14px 14px; padding: 10px 16px; background: #2E3D4B; color: #fff; font-size: 12.5px; border-radius: 14px; flex-wrap: wrap; }
[data-theme="dark"] .cds-bulk { background: #22303C; border: 1px solid var(--line-strong); }
.cds-bulk b { font-weight: 500; white-space: nowrap; }
.cds-bulk i { width: 1px; height: 16px; background: rgba(255,255,255,.2); }
.cds-bulk button { display: inline-flex; align-items: center; gap: 6px; position: relative; border: none; background: transparent; color: #fff; font: inherit; font-size: 12.5px; padding: 4px 6px; border-radius: 8px; }
.cds-bulk button:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.cds-bulk button:disabled { color: rgba(255,255,255,.4); }
.cds-bulk .cds-bulk__los { margin-left: auto; color: #AFC0CF; }
.cds-bulk .cds-menu { color: var(--text); }
/* WP2 (22-10): een menu Acties bovenaan de selectie; wat niet mag staat grijs met de reden eronder. */
.cds-bulk { margin: 10px 14px 12px; }
.cds-actie { position: relative; display: inline-flex; }
.cds-bulk .cds-actie__knop { background: rgba(255,255,255,.12); padding: 5px 10px; font-weight: 500; }
.cds-bulk .cds-actie__knop:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.cds-actiemenu { position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; width: 320px; max-width: calc(100vw - 32px); max-height: min(72vh, 620px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 1px; text-align: left; color: var(--text); }
.cds-actiemenu hr { border: none; border-top: 1px solid var(--line); margin: 4px 6px; }
.cds-bulk .cds-actiemenu__item { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 7px 10px; border-radius: 9px; color: var(--text); text-align: left; white-space: normal; }
.cds-bulk .cds-actiemenu__item svg { flex: none; margin-top: 1px; }
.cds-bulk .cds-actiemenu__item:hover:not(.is-uit), .cds-bulk .cds-actiemenu__item:focus-visible { background: var(--bg-2); }
.cds-bulk .cds-actiemenu__item.is-uit { color: var(--text-3); cursor: not-allowed; }
.cds-bulk .cds-actiemenu__item.is-gevaar:not(.is-uit) { color: var(--signal); }
.cds-bulk .cds-actiemenu__item.is-gevaar:hover:not(.is-uit) { background: color-mix(in srgb, var(--signal) 10%, transparent); }
.cds-bulkvenster .cds-mrij input[type="number"] { width: 76px; }
.cds-bulkgetallen { display: flex; flex-wrap: wrap; gap: 10px; }
.cds-bulkgetallen label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.cds-bulktokens { display: flex; flex-wrap: wrap; gap: 6px; }
.cds-bulkkeuze { display: flex; flex-direction: column; gap: 6px; }
.cds-bulkkeuze__optie { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.cds-bulkkeuze__optie.is-on { border-color: var(--brand); background: var(--brand-soft); }
.cds-bulkkeuze__optie.is-uit { color: var(--text-3); cursor: not-allowed; }
.cds-bulkkeuze__optie span { display: flex; flex-direction: column; gap: 2px; }
.cds-bulkkeuze__optie small { font-size: 11.5px; color: var(--text-3); }
.cds-bulkvoorbeeld { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); font-size: 12px; }
.cds-bulkvoorbeeld__rij { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.cds-bulkvoorbeeld__rij > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cds-bulkvoorbeeld__rij b { font-weight: 500; }
.cds-bulkvoorbeeld__meer { color: var(--text-3); }
.btn.cds-knop--weg { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn.cds-knop--weg:hover:not(:disabled) { filter: brightness(1.06); }
.cds-bulkvoorbeeld__rij--twee { grid-template-columns: auto minmax(0, 1fr); }
@media (max-width: 640px) {
  .cds-bulk { gap: 10px; }
  /* Boven de zwevende knoppen onderaan (assistent, portaal, review) blijven. */
  .cds-actiemenu { position: fixed; z-index: 2000; left: 16px; right: 16px; top: auto; bottom: 88px; width: auto; max-height: calc(100vh - 200px); }
}
/* h26 (C30): de knopregel van de balk (wit op donker) mag de menu-items niet wit maken. */
.cds-bulk .cds-menu .cds-menu__item { color: var(--text); padding: 7px 10px; }
.cds-bulk .cds-menu .cds-menu__item:hover:not(:disabled) { background: var(--bg-2); }
.cds-bulk .cds-menu .cds-menu__item.is-on { background: var(--brand-soft); color: var(--brand); }
.cds-bulk .cds-menu .cds-menu__item:disabled { color: var(--text-3); }

/* ---- detailpaneel ---- */
.cds-detail { display: flex; flex-direction: column; overflow: hidden; position: sticky; top: 0; }
.cds-detail__mini { display: block; position: relative; margin: 14px 14px 0; border-radius: 14px; overflow: hidden; background: var(--bg-2); border: none; padding: 0; width: calc(100% - 28px); height: 200px; }
.cds-detail__mini img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.cds-detail__mini .cds-miniplek { position: absolute; inset: 0; display: grid; place-items: center; }
.cds-miniplek { display: grid; place-items: center; font-family: var(--mono, monospace); font-size: 22px; font-weight: 600; letter-spacing: .08em; color: color-mix(in srgb, var(--text-3) 45%, transparent); background: var(--bg-2); }
.cds-detail__kop { padding: 14px 18px 10px; display: flex; flex-direction: column; gap: 7px; }
.cds-detail__nr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cds-detail__nr .cds-nr { font-family: var(--mono, monospace); font-size: 12px; font-weight: 500; color: var(--steel); }
.cds-detail__nr .cds-rev { margin-left: auto; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.cds-detail__titel { font-size: 18px; font-weight: 300; line-height: 1.3; word-break: break-word; }
.cds-detail__acties { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; position: relative; }
.cds-knop { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); white-space: nowrap; }
.cds-knop:hover:not(:disabled) { border-color: var(--text-3); }
.cds-knop:disabled { opacity: .5; }
.cds-knop--navy { background: var(--brand); border-color: var(--brand); color: #fff; }
.cds-knop--navy:hover:not(:disabled) { filter: brightness(1.06); border-color: var(--brand); }
.cds-knop--gevaar { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, transparent); background: color-mix(in srgb, var(--signal) 8%, transparent); }
.cds-knop--klein { padding: 5px 9px; font-size: 12px; }
.cds-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; overflow-x: auto; scrollbar-width: none; }
.cds-tabs button { padding: 9px 8px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; white-space: nowrap; margin-bottom: -1px; }
.cds-tabs button.is-on { border-bottom-color: var(--brand); color: var(--text); font-weight: 500; }
.cds-tabs button em { font-style: normal; color: var(--text-3); margin-left: 3px; }
.cds-detail__body { padding: 4px 18px 14px; max-height: calc(100vh - 560px); min-height: 200px; overflow-y: auto; scrollbar-width: thin; }
.cds-mrij { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; align-items: center; }
.cds-mrij > span:first-child { color: var(--text-3); }
.cds-mrij > span:last-child { min-width: 0; word-break: break-word; }
.cds-mrij input, .cds-mrij select, .cds-mrij textarea { width: 100%; font: inherit; font-size: 12.5px; color: var(--text); padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); }
.cds-mrij input:focus, .cds-mrij select:focus, .cds-mrij textarea:focus { border-color: var(--brand); outline: none; }
.cds-detail__voet { display: flex; gap: 8px; align-items: center; padding-top: 12px; flex-wrap: wrap; }
.cds-detail__voet span { font-size: 11.5px; color: var(--text-3); }
.cds-fout { font-size: 12px; color: var(--signal); padding: 8px 0; }
.cds-revrij { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: start; font-size: 12.5px; }
.cds-revrij .cds-nr { font-size: 12px; }
.cds-revrij b { display: block; font-weight: 500; }
.cds-revrij span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.cds-revrij a, .cds-revrij button.cds-link { font-size: 11.5px; color: var(--brand); text-decoration: none; border: none; background: none; padding: 0; white-space: nowrap; }
.cds-hist { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); padding: 6px 0; }
.cds-hist span b { font-weight: 500; color: var(--text); }
.cds-hist span i { font-style: normal; color: var(--text-3); }

/* ---- raster ---- */
.cds-raster { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cds-raster__balk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cds-raster__balk .cds-wissel { background: var(--surface); box-shadow: var(--shadow); }
.cds-raster__groep { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cds-raster__groep b { font-size: 13px; font-weight: 500; }
.cds-raster__groep span { font-size: 11.5px; color: var(--text-3); }
.cds-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1400px) { .cds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .cds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cds-tegel { display: flex; flex-direction: column; overflow: hidden; color: var(--text); text-align: left; border: none; padding: 0; position: relative; }
.cds-tegel.is-on { box-shadow: 0 0 0 2px var(--brand), var(--shadow); }
.cds-tegel__beeld { position: relative; height: 170px; background: var(--bg-2); overflow: hidden; }
.cds-tegel__beeld img { width: 100%; height: 170px; object-fit: cover; object-position: 35% 35%; display: block; }
.cds-tegel__beeld .cds-miniplek { position: absolute; inset: 0; }
.cds-tegel__badge { position: absolute; top: 10px; right: 10px; }
.cds-tegel__vink { position: absolute; top: 10px; left: 10px; opacity: 0; transition: opacity .12s; }
.cds-tegel:hover .cds-tegel__vink, .cds-tegel__vink.is-on { opacity: 1; }
.cds-tegel__tekst { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.cds-tegel__nr { display: flex; align-items: center; gap: 6px; }
.cds-tegel__nr .cds-nr { font-family: var(--mono, monospace); font-size: 11.5px; color: var(--steel); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cds-tegel__nr .cds-st, .cds-tegel__nr .cds-stl { margin-left: auto; }
.cds-tegel__titel { font-size: 14px; font-weight: 300; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cds-tegel__voet { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-3); }
.cds-tegel__voet span:last-child { margin-left: auto; white-space: nowrap; }

/* ---- tweede pil-rij ---- */
.cds-pillen .bpl-tab em { font-style: normal; font-size: 11px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-3); border-radius: 8px; padding: 1px 7px; }
.cds-pillen .bpl-tab.is-on em { background: rgba(255,255,255,.2); color: #fff; }

/* ---- mark-ups ---- */
.cds-kpis { display: flex; gap: 16px; }
.cds-kpi { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; border: none; text-align: left; color: var(--text); }
button.cds-kpi:hover { box-shadow: var(--shadow-lg); }
.cds-kpi.is-on { box-shadow: 0 0 0 2px var(--brand), var(--shadow); }
.cds-kpi b { font-size: 26px; font-weight: 300; color: var(--cds-c, var(--text)); font-variant-numeric: tabular-nums; }
.cds-mk { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.cds-mk__filters { display: flex; align-items: center; gap: 6px; padding: 14px 18px; flex-wrap: wrap; }
.cds-mk__filters .cds-veld { width: 220px; margin-left: auto; }
.cds-mk__soort { color: var(--brand); display: inline-flex; }
.cds-mkdetail { width: 350px; flex: none; overflow: hidden; position: sticky; top: 0; }
@media (max-width: 1280px) { .cds-mkdetail { width: 330px; } }
.cds-mkdetail__uitsnede { position: relative; height: 220px; overflow: hidden; background: var(--bg-2); border-radius: var(--radius, 22px) var(--radius, 22px) 0 0; }
.cds-mkdetail__uitsnede canvas, .cds-mkdetail__uitsnede img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cds-mkdetail__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; max-height: calc(100vh - 480px); overflow-y: auto; scrollbar-width: thin; }
.cds-mkdetail__kop { display: flex; align-items: center; gap: 8px; }
.cds-mkdetail__kop .mono { color: var(--text-3); font-size: 12px; }
.cds-mkdetail__kop .cds-st, .cds-mkdetail__kop .cds-stl { margin-left: auto; }
.cds-mkdetail__tekst { font-size: 17px; font-weight: 300; line-height: 1.35; word-break: break-word; }
.cds-mkdetail__grid { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 5px 8px; font-size: 12px; }
.cds-mkdetail__grid span:nth-child(odd) { color: var(--text-3); }
.cds-mkdetail__acties { display: flex; gap: 6px; flex-wrap: wrap; }
.cds-verloop { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-2); }
.cds-verloop span i { font-style: normal; color: var(--text-3); }
.cds-reactie { display: flex; gap: 8px; font-size: 12px; line-height: 1.45; }
.cds-reactie__av { width: 22px; height: 22px; border-radius: 50%; background: var(--steel); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; flex: none; }
.cds-reactie b { font-weight: 500; }
.cds-reactie i { font-style: normal; color: var(--text-3); margin-left: 4px; }
.cds-reageer { display: flex; align-items: center; gap: 8px; }
.cds-reageer .cds-veld { flex: 1; }
.cds-reageer button { display: inline-flex; border: none; background: none; color: var(--brand); padding: 4px; }
.cds-motivatie { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-strong); }
.cds-motivatie textarea, .cds-motivatie input { width: 100%; font: inherit; font-size: 12.5px; color: var(--text); padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); resize: vertical; min-height: 44px; }
.cds-motivatie textarea:focus, .cds-motivatie input:focus { border-color: var(--brand); outline: none; }
.cds-motivatie div { display: flex; gap: 6px; justify-content: flex-end; }
.cds-motivatie b { font-size: 12px; font-weight: 500; }

/* ---- modaal (upload, metadata) ---- */
.cds-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(16,38,47,.42); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 30px; animation: fade .14s; }
[data-theme="dark"] .cds-overlay { background: rgba(0,0,0,.62); }
.cds-modaal { width: min(1060px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: var(--radius, 22px); box-shadow: var(--shadow-lg); }
.cds-modaal--smal { width: min(620px, 96vw); }
.cds-modaal__kop { display: flex; align-items: flex-start; gap: 10px; padding: 20px 24px 14px; }
.cds-modaal__kop b { font-size: 24px; font-weight: 300; display: block; }
.cds-modaal__kop span { font-size: 12.5px; color: var(--text-3); margin-top: 3px; display: block; }
.cds-modaal__x { margin-left: auto; border: none; background: none; color: var(--text-2); display: inline-flex; padding: 4px; border-radius: 8px; }
.cds-modaal__x:hover { background: var(--bg-2); color: var(--text); }
.cds-modaal__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.cds-modaal__voet { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.cds-modaal__voet > span { font-size: 12.5px; color: var(--text-2); }
.cds-modaal__voet > span b { font-weight: 500; }
.cds-modaal__voet .cds-modaal__knoppen { margin-left: auto; display: flex; gap: 8px; }
.cds-drop { margin: 0 24px; border: 1.5px dashed var(--line-strong); border-radius: 16px; background: var(--bg-2); padding: 16px 18px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: border-color .12s, background .12s; }
.cds-drop.is-drag { border-color: var(--brand); background: var(--brand-soft); }
.cds-drop__ico { width: 46px; height: 46px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; color: var(--brand); flex: none; box-shadow: var(--shadow); }
.cds-drop b { font-size: 14px; font-weight: 500; display: block; }
.cds-drop span { font-size: 12px; color: var(--text-3); display: block; margin-top: 2px; line-height: 1.45; }
.cds-drop .cds-knop { margin-left: auto; flex: none; }
.cds-uprijen { margin: 0 6px; }
.cds-uprij, .cds-uprijkop { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) 118px 130px 64px 30px; gap: 10px; align-items: center; padding: 11px 18px; }
.cds-uprijkop { padding: 16px 18px 8px; }
.cds-uprij { border-top: 1px solid var(--line); font-size: 12.5px; }
.cds-uprij.is-revisie { background: var(--brand-soft); }
.cds-uprij__naam { display: flex; gap: 10px; align-items: center; min-width: 0; }
.cds-uprij__naam > div { min-width: 0; }
.cds-uprij__naam b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cds-uprij__naam span { font-size: 11.5px; color: var(--text-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cds-uprij select, .cds-uprij input { width: 100%; font: inherit; font-size: 12px; color: var(--text); padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); }
.cds-uprij input.mono { text-align: center; }
.cds-uprij select:focus, .cds-uprij input:focus { border-color: var(--brand); outline: none; }
.cds-uprij__x { border: none; background: none; color: var(--text-3); display: inline-flex; padding: 4px; border-radius: 6px; }
.cds-uprij__x:hover { color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, transparent); }
.cds-uprij__extra { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding-top: 4px; }
.cds-uprij__extra label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.cds-uprij__extra input { border-radius: 11px; padding: 8px 11px; font-size: 12.5px; }
.cds-uprij__extra input.is-fout { border-color: var(--signal); }
.cds-voortgang { height: 6px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.cds-voortgang i { display: block; height: 100%; background: var(--brand); border-radius: 4px; transition: width .2s ease; }
.cds-form { padding: 6px 24px 18px; display: flex; flex-direction: column; gap: 4px; }
.cds-form .cds-mrij { grid-template-columns: 160px minmax(0, 1fr); }
.cds-notitie { margin: 12px 24px 0; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.5; color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); }

/* ---- herindeling ---- */
.cds-her { flex: 1; min-width: 0; overflow: hidden; }
.cds-her__rij, .cds-her__kop { display: grid; grid-template-columns: minmax(0, 1.1fr) 46px 22px minmax(0, 1.3fr) 130px 28px; gap: 10px; align-items: center; padding: 0 18px; }
.cds-her__kop { height: 40px; background: var(--bg-2); border-bottom: 1px solid var(--line); border-radius: var(--radius, 22px) var(--radius, 22px) 0 0; }
.cds-her__rij { min-height: 42px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.cds-her__rij:hover { background: var(--bg-2); }
.cds-her__oud { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-2); }
.cds-her__oud span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cds-her__n { text-align: right; font-variant-numeric: tabular-nums; }
.cds-her__pijl { color: var(--brand); display: inline-flex; }
.cds-her__uit { border: none; background: none; color: var(--text-3); display: inline-flex; padding: 2px; border-radius: 6px; }
.cds-her__uit:hover { background: var(--bg-2); color: var(--text); }
.cds-her__regel { display: grid; grid-template-columns: minmax(0, 1.1fr) 46px 22px minmax(0, 1.3fr) 130px 28px; gap: 10px; align-items: center; padding: 6px 18px 6px 40px; font-size: 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 50%, transparent); }
.cds-her__regel .cds-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.cds-her__aside { width: 340px; flex: none; padding: 18px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
.cds-her__cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cds-her__cijfers b { font-size: 28px; font-weight: 300; display: block; font-variant-numeric: tabular-nums; }
.cds-her__cijfers span { font-size: 12px; color: var(--text-2); line-height: 1.35; }
.cds-her__uitleg { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.cds-her__bevestig { padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.5; }
.cds-her__bevestig b { font-weight: 500; }
.cds-her__bevestig input { width: 100%; font: inherit; font-size: 12.5px; color: var(--text); padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); }
.cds-her__bevestig div { display: flex; gap: 6px; justify-content: flex-end; }
.cds-her__status { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }

/* ---------- herstelronde 1 (26-09-26) ---------- */
/* Datum uit het herindelingsvoorstel (nog niet vastgelegd). */
.cds-datum--voorstel { font-style: italic; border-bottom: 1px dotted var(--text-3); }
/* Tweede formaat (DWG) als klikbare chip in rij, tegel en detail. */
.cds-fmtknop { border: none; background: none; padding: 0; margin: 0; display: inline-flex; border-radius: 5px; cursor: pointer; }
.cds-fmtknop:hover .cds-fmt, .cds-fmtknop:focus-visible .cds-fmt { box-shadow: 0 0 0 1.5px var(--brand); }
.cds-fmtknop:focus-visible { outline: none; }
.cds-link { font: inherit; font-size: 12px; color: var(--brand); border: none; background: none; padding: 0 0 0 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cds-link--bestand { display: inline-flex; align-items: center; gap: 6px; padding: 0; text-align: left; word-break: break-word; }
/* Uitleg bovenaan de metadata van een document dat nog in een oude map staat. */
.cds-notitie--uitleg { margin: 0 0 10px; display: flex; gap: 8px; align-items: flex-start; color: var(--text-2); background: var(--bg-2); border-color: var(--line-strong); }
.cds-notitie--uitleg svg { flex: none; margin-top: 2px; color: var(--steel); }
/* Historie: veldwijzigingen op een eigen regel. */
.cds-hist > span { display: flex; flex-direction: column; gap: 2px; }
.cds-hist__diff { color: var(--text-3); padding-left: 10px; border-left: 2px solid var(--line-strong); }
/* Bulkmetadata: tekstveld met Leegmaken. */
.cds-mrij__combi { display: flex; gap: 8px; align-items: center; }
.cds-mrij__combi input[type="text"], .cds-mrij__combi input:not([type]) { flex: 1; min-width: 0; }
.cds-vinklabel { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--text-2); font-size: 12px; }
.cds-vinklabel input { width: auto; margin: 0; }
/* KPI zonder filter (doorlooptijd). */
.cds-kpi--vast { cursor: default; }
/* Mark-up op een oudere revisie: alleen-lezen met overnemen. */
.cds-oud { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.5; color: var(--text-2); background: color-mix(in srgb, var(--amber) 10%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent); }
.cds-oud > svg { flex: none; color: var(--amber); margin-top: 2px; }
.cds-oud > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.cds-oud b { font-weight: 500; color: var(--text); }
.cds-oud__lbl { font-weight: 500; color: var(--amber-tekst); }
/* Behandelaarwissel in het verloop. */
.cds-verloop span.is-behandelaar { color: var(--steel); }
.cds-hist__kop { display: block; }
.cds-hist__doc { font-family: var(--mono, monospace); font-size: 11.5px; color: var(--text); }
/* Aantal metingen in de documentrij; opent de meetmodus (METEN-01). */
.cds-meetknop { display: inline-flex; align-items: center; gap: 3px; border: none; background: var(--brand-soft); color: var(--brand); font: inherit; font-size: 11.5px; font-variant-numeric: tabular-nums; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
.cds-meetknop:hover { box-shadow: 0 0 0 1.5px var(--brand); }

/* ---- WP26 statusgang per revisie en publicatiepoort ---- */
.cds-sg { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; margin-top: 2px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); font-size: 12.5px; }
.cds-sg__kop { display: flex; align-items: center; gap: 8px; }
.cds-sg__kop b { font-weight: 500; }
.cds-sg__code { font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 6px; color: var(--pos-tekst); border: 1px solid color-mix(in srgb, var(--pos) 40%, transparent); background: color-mix(in srgb, var(--pos) 10%, transparent); }
.cds-sg__stappen { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.cds-sg__stappen li { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; font-size: 11px; white-space: nowrap; overflow: hidden; color: var(--text-3); padding: 5px 6px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.cds-sg__stappen li i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text-3); flex: none; }
.cds-sg__stappen li.is-af { color: var(--text-2); }
.cds-sg__stappen li.is-af i { background: var(--text-3); }
.cds-sg__stappen li.is-nu { color: var(--brand); border-color: var(--brand); font-weight: 500; }
.cds-sg__stappen li.is-nu i { background: var(--brand); border-color: var(--brand); }
.cds-sg__noot { font-size: 11.5px; line-height: 1.45; color: var(--text-2); }
.cds-sg__knoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.cds-sg__intr { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cds-sg__intr div { display: flex; gap: 6px; }
.cds-sg__historie summary { cursor: pointer; font-size: 11.5px; color: var(--text-2); }
.cds-sg__hrij { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); }
.cds-sg__hrij b { font-weight: 500; color: var(--text); }
.cds-sg__hrij em { display: block; font-style: normal; color: var(--text-2); margin-top: 2px; }
.cds-revrij__st { display: flex !important; align-items: center; gap: 4px; margin-top: 3px; }
.cds-ctrlkop { margin-top: 12px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.cds-ctrl { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; align-items: start; }
.cds-ctrl b { display: block; font-weight: 500; }
.cds-ctrl span span { display: block; color: var(--text-2); font-size: 12px; margin-top: 1px; }
.cds-ctrl__ico { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--cds-c, var(--text-3)); background: color-mix(in srgb, var(--cds-c, var(--text-3)) 14%, transparent); }
.cds-ctrl.is-ok { --cds-c: var(--pos); }
.cds-ctrl.is-fout { --cds-c: var(--signal); }
.cds-ctrl.is-signaal { --cds-c: var(--amber); }
.cds-ctrl textarea { width: 100%; margin-top: 6px; font: inherit; font-size: 12.5px; color: var(--text); padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); resize: vertical; min-height: 40px; }
.cds-ctrl textarea:focus { border-color: var(--brand); outline: none; }

/* h23: telefoon (375 px). Tikdoelen in het CDE minstens 32 px hoog, zoals de schil (h22);
   het vinkje houdt zijn vorm maar krijgt een groter tikvlak. */
@media (max-width: 600px) {
  .cds-chip, .cds-map, .cds-knop, .cds-wissel button, .cds-meetknop, .cds-fmtknop { min-height: 32px; }
  .cds-rijkop { height: auto; min-height: 36px; }
  .cds-rijkop button:not(.cds-vink) { min-height: 32px; }
  .cds-veld input { min-height: 30px; }
  /* h55: het vinkje zelf is 32 bij 32 px (knop zonder rand); het zichtbare vakje van 15 px
     staat als ::before in het midden, zodat het er hetzelfde uitziet. Negatieve marges houden
     de regel even hoog en de kolommen op hun plek. Vervangt de overlay van h23 en h37. */
  .cds-vink, .cds-rijkop > .cds-vink { position: relative; width: 32px; height: 32px; margin: -8.5px; border: 0; background: transparent; overflow: visible; }
  .cds-vink.is-on, .cds-vink.is-deels { background: transparent; }
  .cds-vink::before { content: ''; position: absolute; left: 8.5px; top: 8.5px; width: 15px; height: 15px; box-sizing: border-box; border-radius: 4px; border: 1.5px solid var(--line-strong); }
  .cds-vink.is-on::before { background: var(--brand); border-color: var(--brand); }
  .cds-vink.is-deels::before { background: color-mix(in srgb, var(--brand) 45%, transparent); border-color: var(--brand); }
  .cds-vink > * { position: relative; }
  /* h37: de smalle kolomkoppen (Rev, MU) krijgen links en rechts 3 px tikvlak erbij
     zonder dat de tekst verschuift. */
  .cds-rijkop > button:not(.cds-vink) { padding: 0 3px; margin: 0 -3px; }
  /* h37: rijvinkje, de hele cel (rijhoogte) blijft staan als houder van het vinkje */
  .cds-rij > span:has(> .cds-vink) { align-self: stretch; display: flex; align-items: center; }
}

/* h23: telefoon. De tabellen Mark-ups en Uitgiftes hebben vaste kolommen die samen
   breder zijn dan het scherm; ze scrollen dan binnen hun kaart zijwaarts in plaats van dat de
   kolommen rechts buiten beeld vallen. De tabs boven Metingen slaan om. */
@media (max-width: 600px) {
  .cds-kaart.cds-mk { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
  .cds-kaart.cds-mk > .cds-rijkop, .cds-kaart.cds-mk > .cds-lijst { min-width: 640px; }
  .cds-kaart.cds-mk > .cds-lijst--scroll { max-height: none; overflow: visible; }
  .cmo-seg { display: flex; flex-wrap: wrap; max-width: 100%; }
  .cds-lay > .cds-mkdetail { width: 100% !important; position: static; }
  .cds-mkdetail__body { max-height: none; }
}

/* Meldpunt Max 28-09: mappenlijst in breedte aan te passen. */
.cds-lay > .cds-boom { position: relative; }
.cds-boom__greep { position: absolute; top: 0; right: -9px; width: 10px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
.cds-boom__greep::after { content: ''; position: absolute; top: 12px; bottom: 12px; left: 4px; width: 2px; border-radius: 2px; background: transparent; transition: background .12s; }
.cds-boom__greep:hover::after, .cds-sleept .cds-boom__greep::after { background: var(--brand); }
body.cds-sleept { cursor: col-resize; user-select: none; }
@media (max-width: 1080px) { .cds-lay > .cds-boom { width: 100% !important; } .cds-boom__greep { display: none; } }

/* h100 (Q26b): documentregel in het uitgiftevenster. Op de telefoon kreeg de titel naast nummer,
   revisiekeuze en kruisje nog maar enkele tientallen pixels; dan staan nummer, revisiekeuze en
   kruisje op de eerste regel en de titel op een eigen, volle regel eronder (en mag hij omslaan). */
.cds-rij.cdu-regel { grid-template-columns: 84px minmax(0,1fr) 136px 28px; min-height: 48px; cursor: default; }
@media (max-width: 600px) {
  .cds-rij.cdu-regel { grid-template-columns: minmax(0,1fr) 136px 28px; grid-template-areas: 'nr rev x' 'titel titel titel'; row-gap: 4px; padding-top: 8px; padding-bottom: 8px; }
  .cdu-regel__nr { grid-area: nr; }
  .cdu-regel__rev { grid-area: rev; }
  .cdu-regel__x { grid-area: x; }
  .cdu-regel__titel { grid-area: titel; }
  .cdu-regel__titel .cds-titel { white-space: normal; overflow-wrap: anywhere; }
}

/* ---- WP12 blok 1: detailpaneel met tabbladen, versiekolom, commentaren, tags en log ---- */
.cds-tabs--detail button { padding: 9px 7px; font-size: 12px; }
.cds-tabs--detail button em { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--bg-2); font-size: 10.5px; line-height: 16px; text-align: center; margin-left: 4px; }
.cds-tabs--detail button.is-on em { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.cds-versie { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.cds-versie > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cds-versie__up { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--text-3); padding: 0; opacity: 0; flex: none; }
.cds-rij:hover .cds-versie__up, .cds-rij:focus-within .cds-versie__up, .cds-rij.is-on .cds-versie__up { opacity: 1; }
.cds-versie__up:hover { border-color: var(--line-strong); color: var(--brand); background: var(--bg-2); }
.cds-detail__filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 6px; }
.cds-detail__filter .cds-chip b { margin-left: 2px; color: var(--text-3); font-weight: 500; }
.cds-detail__filter .cds-chip.is-on { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.cds-soort { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); margin-right: 4px; }
.cds-soort--ronde { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.cds-tagtab { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.cds-tagtab__lijst { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; font-size: 12px; }
.cds-tag { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); max-width: 100%; }
.cds-tag__naam { font: inherit; font-size: 12px; color: var(--text); background: none; border: none; padding: 4px 4px 4px 10px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cds-tag__naam:hover { color: var(--brand); }
.cds-tag__x { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 3px; border-radius: 999px; border: none; background: transparent; color: var(--text-3); padding: 0; }
.cds-tag__x:hover:not(:disabled) { background: color-mix(in srgb, var(--signal) 12%, transparent); color: var(--signal); }
.cds-tagtab__invoer { display: flex; gap: 6px; align-items: center; }
.cds-tagtab__invoer .cds-veld { flex: 1; min-width: 0; }
.cds-tagtab__sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.cds-tagtab__sugg .cds-chip b { margin-left: 2px; color: var(--text-3); font-weight: 500; }
.cds-hist__regel { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 6px; border-bottom: 1px solid var(--line); }
.cds-hist__regel.is-extern { border-left: 2px solid color-mix(in srgb, var(--signal) 60%, transparent); padding-left: 8px; }
.cds-hist__wie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; color: var(--text-2); }
.cds-hist__naam { font-weight: 500; color: var(--text); }
.cds-hist__org { color: var(--text-3); }
.cds-rol { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.cds-rol--extern { background: color-mix(in srgb, var(--signal) 14%, transparent); color: var(--signal); }
.cds-hist__meer { align-self: flex-start; font-size: 11.5px; color: var(--brand); background: none; border: none; padding: 0; }
.cds-hist__details { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--text-2); padding: 4px 0 2px 8px; border-left: 2px solid var(--line); }
.cds-hist__details i { font-style: normal; color: var(--text-3); margin-right: 4px; }

/* WP12 blok 2: documenttaken en commentaar met opmaak en vermelding */
.cds-commentaar__nieuw { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; }
.cds-commentaar--tekst > span:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cds-commentaar__onderwerpkop { font-weight: 600; font-size: 13px; }
.cds-commentaar__acties { display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cds-commentaar__invoer { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.cds-commentaar__invoer textarea, .cds-commentaar__onderwerp { width: 100%; font: inherit; font-size: 12.5px; color: var(--text); padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); resize: vertical; }
.cds-commentaar__invoer textarea:focus, .cds-commentaar__onderwerp:focus { border-color: var(--brand); outline: none; }
.cds-commentaar__knoppen { display: flex; justify-content: flex-end; gap: 6px; }
.cds-opmaakbalk { display: flex; align-items: center; gap: 2px; }
.cds-opmaakbalk > button, .cds-opmaakbalk > span > button { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text-2); font-size: 12.5px; cursor: pointer; }
.cds-opmaakbalk > button:hover, .cds-opmaakbalk > span > button:hover { border-color: var(--brand); color: var(--brand); }
.cds-opmaakbalk .cds-menu { top: 30px; left: 0; }
.cds-opmaak { font-size: 12.5px; line-height: 1.45; color: var(--text); word-break: break-word; }
.cds-opmaak p { margin: 0; }
.cds-opmaak ul { margin: 2px 0; padding-left: 18px; }
.cds-opmaak a { color: var(--brand); text-decoration: underline; }
.cds-opmaak__ruimte { height: 6px; }
.cds-vermelding { display: inline-block; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-weight: 600; }
.cds-soort--commentaar, .cds-soort--bericht { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.cds-deelnemers { display: flex; flex-wrap: wrap; gap: 5px; }
.cds-deelnemers .cds-chip { padding: 3px 9px; font-size: 11.5px; }
.cds-mrij small { display: block; margin-top: 3px; font-size: 11px; }

/* ---- WP12 blok 3: verwachten, delen met een link, volgen ---- */
.cds-rij--verwacht { background: color-mix(in srgb, var(--amber) 6%, transparent); border-left: 3px solid var(--amber); }
.cds-rij--verwacht.is-telaat { background: color-mix(in srgb, var(--signal) 6%, transparent); border-left-color: var(--signal); }
.cds-verwacht__titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cds-verwacht__titel > .cds-grijs { font-size: 11.5px; }
.cds-verwacht__knoppen { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.cds-verwacht__telaat { color: var(--signal); font-weight: 500; }
.cds-matrixvenster { max-width: min(1100px, 96vw); }
.cds-matrix { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.cds-matrix th { text-align: left; font-weight: 500; color: var(--text-2); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cds-matrix tbody th { white-space: normal; min-width: 120px; }
.cds-matrix td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.cds-matrix__cel { font: inherit; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); cursor: pointer; white-space: nowrap; }
.cds-matrix__cel:hover { border-color: var(--brand); }
.cds-matrix__cel--groen { background: color-mix(in srgb, var(--groen) 14%, transparent); border-color: color-mix(in srgb, var(--groen) 45%, transparent); }
.cds-matrix__cel--oranje { background: color-mix(in srgb, var(--amber) 16%, transparent); border-color: color-mix(in srgb, var(--amber) 50%, transparent); color: var(--amber-tekst); }
.cds-matrix__cel--rood { background: color-mix(in srgb, var(--signal) 12%, transparent); border-color: color-mix(in srgb, var(--signal) 45%, transparent); color: var(--signal); }
.cds-ontvangers { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cds-ontvangers .cds-knop { align-self: flex-start; }
.cds-links { padding: 0; }
.cds-links .cds-tabel__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cds-linkrij { border-top: 1px solid var(--line); }
.cds-linkrij__kop { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto auto auto; gap: 12px; align-items: center; width: 100%; padding: 10px 16px; border: none; background: transparent; font: inherit; font-size: 12.5px; color: var(--text); text-align: left; cursor: pointer; }
.cds-linkrij__kop:hover, .cds-linkrij.is-open > .cds-linkrij__kop { background: var(--bg-2); }
.cds-linkrij__titel { display: flex; flex-direction: column; min-width: 0; }
.cds-linkrij__titel b { font-weight: 500; }
.cds-linkrij__titel span { font-size: 11.5px; }
.cds-linkrij__feit { font-size: 11.5px; white-space: nowrap; }
.cds-linkrij__body { padding: 4px 16px 14px 44px; }
.cds-linkdetail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.cds-linkdetail__kol { min-width: 0; }
@media (max-width: 900px) { .cds-linkrij__kop { grid-template-columns: 16px minmax(0, 1fr) auto; } .cds-linkrij__feit:nth-child(n+4) { display: none; } .cds-linkdetail { grid-template-columns: 1fr; } }
/* W1 stuk 1: prullenbak, cellen met lucht en de eerste kolom op de kaartrand */
.cds-prullenbak .tbl__t th, .cds-prullenbak .tbl__t td { padding: 9px 12px; vertical-align: top; }
.cds-prullenbak .tbl__t th:first-child, .cds-prullenbak .tbl__t td:first-child { padding-left: 18px; }
.cds-prullenbak .tbl__t th:last-child, .cds-prullenbak .tbl__t td:last-child { padding-right: 18px; }
.cds-prullenbak .tbl__t { width: 100%; }
.cds-prullenbak .tbl__t td:nth-child(2) { overflow-wrap: anywhere; min-width: 160px; }
.cds-prullenbak .tbl__t td:nth-child(6) { min-width: 120px; }

/* W1 stuk 2: sets, levend en bevroren (cde-blok4.jsx, CdeSets) */
.cds-sets { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .cds-sets { grid-template-columns: minmax(0, 1fr); } }
.cds-sets__lijst { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.cds-sets__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.cds-sets__item:hover { background: var(--bg-2); }
.cds-sets__item.is-actief { background: var(--bg-2); border-color: var(--line); }
.cds-sets__naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.cds-sets__naam .cds-grijs { font-size: 11.5px; }
.cds-sets__stand { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cds-chip--levend { border-color: color-mix(in srgb, var(--pos) 45%, transparent); background: color-mix(in srgb, var(--pos) 10%, transparent); }
.cds-sets__teken { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--amber); color: #fff; font-size: 11px; font-weight: 600; }
.cds-sets__detail { padding: 18px 20px; min-width: 0; }
.cds-sets__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cds-sets__knoppen { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cds-sets__vraag { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); font-size: 12.5px; }
.cds-sets__balk { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber-tekst); font-size: 12.5px; }
.cds-sets__detail .tbl__t { width: 100%; }
.cds-sets__detail .tbl__t th, .cds-sets__detail .tbl__t td { padding: 9px 12px; }
.cds-sets__detail .tbl__t th:first-child, .cds-sets__detail .tbl__t td:first-child { padding-left: 16px; }
.cds-sets__detail .tbl__t td:first-child { min-width: 180px; }
.cds-sets__detail .tbl__t td:nth-child(n+3), .cds-sets__detail .tbl__t th:nth-child(n+3) { white-space: nowrap; }
.cds-sets__detail tr.is-nieuwer td { background: color-mix(in srgb, var(--amber) 7%, transparent); }

/* W1 stuk 3: eigen velden per map en project */
.cds-veldenbeheer.cds-modaal { width: min(860px, calc(100vw - 32px)); }
.cds-veldenbeheer .tbl__t { width: 100%; }
.cds-veldenbeheer .tbl__t th, .cds-veldenbeheer .tbl__t td { padding: 8px 10px; vertical-align: middle; }
.cds-veldenbeheer .tbl__t td:nth-child(3) { max-width: 200px; overflow-wrap: anywhere; }
.cds-veldnieuw { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); display: flex; flex-direction: column; gap: 6px; }
.cds-eigenvelden { margin-top: 10px; }
.cds-eigenvelden .cds-ctrlkop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cds-verplicht { color: var(--amber-tekst); margin-left: 3px; font-weight: 700; }
.cds-amber { color: var(--amber-tekst); }
.cds-ctrl__velden { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cds-ctrl__velden label { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12.5px; }
@media (max-width: 560px) { .cds-ctrl__velden label { grid-template-columns: minmax(0, 1fr); } }
.cds-upwaarschuwing { margin: 0 0 10px; }

/* W1 stuk 4: snelle toegang en weergaves in de linkerkolom */
.cds-snel { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.cds-snelkop { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 10px 4px; background: none; border: 0; cursor: pointer; color: var(--text-2); text-align: left; }
.cds-snelkop i { flex: 1; height: 1px; background: var(--line); }
.cds-snelkop__n { font-size: 11px; color: var(--text-3); }
.cds-snel__leeg { margin: 2px 10px 6px 28px; font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.cds-snel__sub { margin: 6px 10px 2px 28px; font-size: 11px; color: var(--text-3); }
.cds-snelrij { position: relative; }
.cds-snelrij__acties { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; }
.cds-snelrij:hover .cds-snelrij__acties, .cds-snelrij:focus-within .cds-snelrij__acties { display: inline-flex; }
.cds-snelrij__acties button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.cds-snelrij__acties button:hover { color: var(--text); }
.cds-snelrij:hover .cds-map__n { visibility: hidden; }
.cds-knop.is-on { border-color: var(--brand); color: var(--brand); }
/* W1 stuk 5 (3.1): rechten per map */
.cds-waarschuwing { margin-top: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--amber); color: var(--amber-tekst); font-size: 12.5px; }
.cds-maprecht-kan { display: flex; flex-wrap: wrap; gap: 6px; }
.cds-maprecht-waarom { margin: 0; padding-left: 20px; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }

/* W1 stuk 6: offline op de bouwplaats in het setdetail (platform/cde-offline.jsx) */
.cds-offlinekeuze { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; }
.cds-offlinekeuze__tekst { flex: 1; min-width: 200px; }
.cds-chip-offline { display: inline-flex; padding: 1px 7px; border-radius: 9px; font-size: 11px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); }
.cds-docfotos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cds-docfotos img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }