/* cockpit.css — de cockpitlaag (.ck): het ontwerp van de cockpit per shop
   (docs/COCKPIT_PER_SHOP.md §8, ontwerp 01 t/m 05) voor het paneel
   Cockpit 2026, het Actiecentrum en TCO.

   Alles staat onder .ck, zodat de rest van het portaal ongemoeid blijft.
   Sinds herontwerp stap 4 (docs/mockups/2026-10-herontwerp, richting Rust,
   23-10-2026) volgt de laag het palet en de letter van de tokenlaag
   (tokens.css): Figtree voor tekst én getallen, het klantaccent voor
   "je kijkt naar een deel" (gefilterd, gekozen, aan), amber alleen voor
   een waarschuwing, de kaarten op het witte paneel met de radii van de
   tokenlaag. De eigen namen (--ck-*) blijven: elke waarde verwijst naar
   een token van tokens.css, zodat het klantaccent ook hier doorwerkt.
   De enige vaste kleur is --ck-op-donker (wit op een donker tooltipvlak).

   Afwijking van de tokenlaag, bewust (ONTWERPSYSTEEM.md, "Cockpitlaag"): de
   lettergroottes van het ontwerp staan als eigen tokens op .ck (--ck-fs-*)
   in plaats van op de elf typestappen; afstanden lopen via de ruimteschaal
   (--space-*, halve en kwart stappen via calc). Geometrie (hoogtes,
   breedtes, paddings) blijft in pixels. De ratel in tests/css-schaal.test.mjs
   bewaakt dit bestand met plafond 0. */

/* ── tokens van de laag ────────────────────────────────────────────────── */
.ck {
  --ck-font: var(--font-body);
  --ck-num: var(--font-head);        /* grote getallen: dezelfde letter, zwaarder en strakker */
  --ck-num-gewicht: 700;
  --ck-num-spatie: -.02em;

  --ck-bg: var(--bg);                /* pagina achter de kaarten */
  --ck-panel: var(--panel);          /* kaart, lijst, lichte knop, de balk */
  --ck-panel-2: var(--panel-2);      /* kopband, groepsrij, gekozen optie, knop in rust */
  --ck-line: color-mix(in srgb, var(--line) 55%, var(--panel)); /* haarlijn */
  --ck-line-strong: var(--line);     /* kaartrand, kolomkop, totaalrij */
  --ck-veld-line: color-mix(in srgb, var(--ink-dim) 65%, var(--line)); /* rand van een invoerveld */
  --ck-ink: var(--ink);
  --ck-ink-2: color-mix(in srgb, var(--ink) 55%, var(--ink-dim));
  --ck-ink-dim: var(--ink-dim);
  --ck-pos: color-mix(in srgb, var(--green) 80%, var(--ink));
  --ck-pos-bg: var(--green-dim);
  --ck-neg: var(--red);
  --ck-neg-bg: var(--red-dim);
  --ck-filter: var(--accent);        /* keuzekleur: gefilterd, gekozen, aan (het klantaccent) */
  --ck-filter-ink: var(--accent-ink);
  --ck-filter-hover: var(--nav-accent);
  --ck-keuze-bg: var(--accent-dim);  /* de lichte markering van een gekozen rij of kolom */
  --ck-focus-ring: color-mix(in srgb, var(--accent) 25%, transparent);
  --ck-warn-ink: color-mix(in srgb, var(--amber) 80%, var(--ink)); /* waarschuwing, verouderde data */
  --ck-warn-bg: var(--amber-dim);
  --ck-warn-line: color-mix(in srgb, var(--amber) 35%, var(--panel));
  --ck-grafiek-spoor: var(--grey-dim);
  --ck-op-donker: #FFFFFF;           /* tekst op het donkere tooltipvlak (--ck-ink), de enige vaste kleur */

  /* grafieken (cockpit-blokken.js, cockpit-blokken-v2.js): de reeksen in het
     accent van licht naar donker, lijnen in inkt, de bucket van vandaag in
     inkt op een grijs vlak; de tooltip op het donkere vlak */
  --ck-grafiek-1: var(--accent);
  --ck-grafiek-2: color-mix(in srgb, var(--accent) 80%, var(--panel));
  --ck-grafiek-3: color-mix(in srgb, var(--accent) 62%, var(--panel));
  --ck-grafiek-lijn: var(--ink);
  --ck-grafiek-lijn-2: var(--ink-dim);
  --ck-grafiek-huidig: var(--ink);
  --ck-grafiek-huidig-vlak: var(--grey-dim);
  --ck-grafiek-tiplijn: color-mix(in srgb, var(--ck-op-donker) 85%, var(--ck-ink));

  --ck-balk-bg: var(--ck-panel);     /* de lichte cockpitbalk en de bulkbalk */
  --ck-balk-hover: var(--ck-panel-2);
  --ck-balk-line: var(--ck-line-strong);
  --ck-balk-ink: var(--ck-ink-2);
  --ck-balk-ink-2: var(--ck-ink);
  --ck-balk-dim: var(--ck-ink-dim);
  --ck-balk-sterk: var(--ck-ink);

  --ck-shadow-pop: var(--shadow-overlay);

  /* lettergroottes van het ontwerp (halve stappen, zie ONTWERPSYSTEEM.md) */
  --ck-fs-11: 11px;
  --ck-fs-115: 11.5px;
  --ck-fs-12: 12px;
  --ck-fs-125: 12.5px;
  --ck-fs-13: 13px;
  --ck-fs-135: 13.5px;
  --ck-fs-14: 14px;
  --ck-fs-17: 17px;
  --ck-fs-18: 18px;
  --ck-fs-20: 20px;
  --ck-fs-22: 22px;
  --ck-fs-24: 24px;
  --ck-fs-28: 28px;

  /* radii op de ladder van de tokenlaag: tag badge, knop chip, kaart veld */
  --ck-r-tag: var(--radius-badge);
  --ck-r: var(--radius-chip);
  --ck-r-seg: calc(var(--radius-chip) + 1px);          /* omlijsting van een segmentknop */
  --ck-r-kaart: var(--radius-field);
  --ck-r-kaart-binnen: calc(var(--radius-field) - 1px); /* kopband binnen de rand van 1px */

  /* afstanden op de ruimteschaal: kwart, halve en anderhalve stappen */
  --ck-g-1: calc(var(--space-1) / 4);
  --ck-g-2: calc(var(--space-1) / 2);
  --ck-g-5: calc(var(--space-1) * 1.25);
  --ck-g-6: calc(var(--space-1) * 1.5);
  --ck-g-10: calc(var(--space-1) * 2.5);
  --ck-g-14: calc(var(--space-1) * 3.5);
  --ck-g-18: calc(var(--space-1) * 4.5);
  --ck-g-min2: calc(var(--space-1) * -0.5);

  /* raster (ontwerp): 12 kolommen, rijen van 80 px, gap 12 px */
  --ck-raster-rij: 80px;
  --ck-raster-gap: var(--space-3);

  /* het grijze vlak loopt tot de randen van de inhoud, zoals in het ontwerp
     (de zijmarge van .content: --space-8, onder 860 px --space-4) */
  margin: 0 calc(var(--space-8) * -1) calc(var(--space-10) * -1);
  padding-bottom: var(--space-6);
  min-height: 60vh;
  background: var(--ck-bg);
  color: var(--ck-ink);
  font-family: var(--ck-font);
  font-size: var(--ck-fs-13);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.ck.ck-vol { margin-top: calc(var(--space-6) * -1); }
/* smal scherm (menu als rail): .content heeft dan --space-4 zijmarge */
@media (max-width: 860px) {
  .ck { margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1); }
}
.ck a { color: var(--ck-ink); text-decoration: none; }
/* een verwijzing naar een paneel van Instellingen (docs/INSTELLINGEN.md §2.1, alleen voor wie Instellingen opent)
   is in de lopende tekst herkenbaar als link */
.ck a[href^="#/instellingen/"] { text-decoration: underline; text-underline-offset: var(--space-1); }
.ck a:hover { color: var(--ck-filter); text-decoration: underline; text-underline-offset: 3px; }
.ck :focus-visible { outline: 2px solid var(--ck-filter); outline-offset: 2px; }
.ck button { font-family: var(--ck-font); }
.ck .ck-ico { display: block; flex: none; }
.ck-grow { flex: 1 1 auto; }
.ck-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ck .ck-neg { color: var(--ck-neg); }
.ck .ck-pos { color: var(--ck-pos); }
.ck .ck-dim { color: var(--ck-ink-dim); }

/* ── cockpitbalk (ontwerp 01 en 03) ────────────────────────────────────── */
.ck-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ck-g-10);
  min-height: 60px;
  padding: 6px 24px;
  border-bottom: 1px solid var(--ck-balk-line);
  background: var(--ck-balk-bg);
  color: var(--ck-balk-ink);
}
.ck-balk :focus-visible { outline-color: var(--ck-filter); }
.ck-balk-scheiding { width: 1px; height: 28px; flex: none; background: var(--ck-balk-line); }
.ck-kiezer-anker { position: relative; flex: none; min-width: 0; }

.ck-shopknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ck-g-6);
  max-width: 320px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--ck-r);
  font-size: var(--ck-fs-125);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.ck-shopknop-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ck-shopknop:disabled { opacity: .55; cursor: default; }
.ck-shopknop-balk { height: 36px; background: transparent; color: var(--ck-balk-ink); }
.ck-shopknop-balk .ck-ico { color: var(--ck-balk-dim); }
.ck-shopknop-balk .ck-shopknop-label { font-size: var(--ck-fs-14); font-weight: 600; color: var(--ck-balk-sterk); }
.ck-shopknop-balk:hover:enabled { background: var(--ck-balk-hover); }
.ck-shopknop-balk.is-open { background: var(--ck-balk-hover); color: var(--ck-balk-ink-2); border-color: var(--ck-filter); }
.ck-shopknop.is-gefilterd,
.ck-shopknop.is-gefilterd:hover { background: var(--ck-filter); border-color: var(--ck-filter); color: var(--ck-filter-ink); }
.ck-shopknop.is-gefilterd .ck-ico,
.ck-shopknop.is-gefilterd .ck-shopknop-label { color: var(--ck-filter-ink); }
.ck-shopknop-balk.is-gefilterd.is-open { outline: 1px solid var(--ck-filter); outline-offset: 2px; }

.ck-shopknop-licht { height: 34px; background: var(--ck-panel); color: var(--ck-ink); border-color: var(--ck-line-strong); }
.ck-shopknop-licht .ck-ico { color: var(--ck-ink-2); }
.ck-shopknop-licht:hover, .ck-shopknop-licht.is-open { background: var(--ck-panel-2); }
.ck-shopknop-licht.is-gefilterd.is-open { outline: 1px solid var(--ck-filter); outline-offset: 2px; }

.ck-periode {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-g-6);
  height: 44px;
  padding: 0 10px;
  color: var(--ck-balk-dim);
  white-space: nowrap;
}
.ck-periode-weken {
  margin-left: var(--ck-g-2);
  font-family: var(--ck-num);
  font-size: var(--ck-fs-22);
  font-weight: var(--ck-num-gewicht);
  letter-spacing: var(--ck-num-spatie);
  line-height: 1;
  color: var(--ck-balk-sterk);
}
.ck-periode-jaar { font-size: var(--ck-fs-13); font-weight: 400; color: var(--ck-balk-dim); }

.ck-balkknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-balk-ink);
  cursor: pointer;
}
.ck-balkknop:hover { background: var(--ck-balk-hover); }
.ck-balkknop:disabled { opacity: .45; cursor: default; }
.ck-balkknop-verhoogd {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-g-6);
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ck-balk-line);
  border-radius: var(--ck-r);
  background: var(--ck-balk-hover);
  color: var(--ck-balk-ink-2);
  font-size: var(--ck-fs-125);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.ck-balkknop-verhoogd:hover { border-color: var(--ck-balk-dim); }
.ck-balkknop-verhoogd:disabled { opacity: .45; cursor: default; }
.ck-datavan {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  line-height: 1;
  white-space: nowrap;
}
.ck-datavan > span { font-size: var(--ck-fs-115); color: var(--ck-balk-dim); }
.ck-datavan > b { font-size: var(--ck-fs-125); font-weight: 500; color: var(--ck-balk-sterk); }
.ck-datavan > .ck-verouderd { color: var(--ck-warn-ink); font-weight: 600; }

/* ── shopkiezer (ontwerp 02) ───────────────────────────────────────────── */
.ck-kiezer {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 8px 6px 6px;
  background: var(--ck-panel);
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-r-kaart);
  box-shadow: var(--ck-shadow-pop);
  color: var(--ck-ink);
  font-family: var(--ck-font);
  text-align: left;
}
.ck-kiezer-kop {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 12px 6px;
  font-size: var(--ck-fs-12);
  color: var(--ck-ink-dim);
}
.ck-kiezer-lijst { display: flex; flex-direction: column; gap: var(--ck-g-1); }
.ck-optie {
  display: flex;
  align-items: center;
  gap: var(--ck-g-10);
  width: 100%;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-ink);
  text-align: left;
  cursor: pointer;
}
.ck-optie:hover { background: var(--ck-panel-2); }
.ck-optie[aria-selected="true"] { background: var(--ck-panel-2); }
.ck-optie:focus-visible { outline: 2px solid var(--ck-ink); outline-offset: -2px; }
.ck-optie.is-ingesprongen { padding-left: 34px; }
.ck-optie-vink { display: inline-flex; width: 15px; flex: none; color: var(--ck-ink); }
.ck-optie-tekst { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ck-optie-titel { font-size: var(--ck-fs-13); font-weight: 600; }
.ck-optie-regel2 { font-size: var(--ck-fs-12); font-weight: 400; color: var(--ck-ink-dim); }
.ck-optie-shop {
  font-size: var(--ck-fs-13);
  font-weight: 500;
  color: var(--ck-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-optie-code { display: inline-block; width: 34px; font-weight: 600; color: var(--ck-ink-2); }
.ck-optie-bedrag {
  flex: none;
  font-family: var(--ck-num); letter-spacing: var(--ck-num-spatie);
  font-size: var(--ck-fs-14);
  font-weight: var(--ck-num-gewicht);
  color: var(--ck-ink);
  white-space: nowrap;
}
.ck-optie-bedrag.is-leeg { font-weight: 500; color: var(--ck-ink-dim); }
.ck-optie-scheiding { height: 1px; margin: var(--space-1) 0; background: var(--ck-line); }

/* ── rij Blokken (chips) ───────────────────────────────────────────────── */
.ck-blokken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ck-g-6) var(--ck-g-5);
  padding: 12px 24px 0;
}
.ck-blokken-kop { margin-right: var(--ck-g-1); font-size: var(--ck-fs-12); font-weight: 500; color: var(--ck-ink-dim); white-space: nowrap; }
.ck-chips { display: flex; flex-wrap: wrap; gap: var(--ck-g-5); min-width: 0; }
.ck-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-g-6);
  height: 27px;
  padding: 0 9px;
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-r);
  background: var(--ck-panel);
  color: var(--ck-ink-2);
  font-size: var(--ck-fs-12);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.ck-chip:hover { border-color: var(--ck-ink-2); }
.ck-chip[aria-pressed="true"] { background: var(--ck-filter); border-color: var(--ck-filter); color: var(--ck-filter-ink); }

/* ── inhoud, kaarten en raster ─────────────────────────────────────────── */
.ck-main { padding: 14px 24px 0; }
.ck-main > * + * { margin-top: var(--space-3); }
.ck-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}
@media (max-width: 1100px) { .ck-grid { grid-template-columns: minmax(0, 1fr); } }

.ck-card {
  position: relative;
  min-width: 0;
  background: var(--ck-panel);
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-r-kaart);
  scroll-margin-top: 80px;
}
.ck-card-kop {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 8px 0 14px;
  background: var(--ck-panel-2);
  border-bottom: 1px solid var(--ck-line);
  border-radius: var(--ck-r-kaart-binnen) var(--ck-r-kaart-binnen) 0 0;
}
.ck-card-kop h2 {
  margin: 0;
  min-width: 0;
  font-family: var(--ck-font);
  font-size: var(--ck-fs-135);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ck-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-card-sub {
  min-width: 0;
  font-size: var(--ck-fs-12);
  color: var(--ck-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-card-kop .ck-chips { margin-left: auto; justify-content: flex-end; padding: 5px 0; }
.ck-card-body { padding: 12px 14px; }
.ck-card-body-kort { padding-bottom: 4px; }
.ck-card-flush { padding: 0 14px; }
.ck-card-flush:last-child { padding-bottom: 12px; }
.ck-card-scheiding { margin-top: var(--space-3); }
.ck-ikoonknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-ink-dim);
  cursor: pointer;
}
.ck-ikoonknop:hover, .ck-ikoonknop[aria-expanded="true"] { background: var(--ck-panel); border-color: var(--ck-line-strong); color: var(--ck-ink); }

.ck-noot { margin: 0; font-size: var(--ck-fs-12); color: var(--ck-ink-dim); }
.ck-regel { margin: 0 0 var(--ck-g-2); font-size: var(--ck-fs-125); }
.ck-voet { margin: var(--space-3) 0 0; font-size: var(--ck-fs-12); color: var(--ck-ink-dim); }
.ck-tweede { display: block; font-size: var(--ck-fs-12); color: var(--ck-ink-dim); }
.ck-subkop { margin: 0; padding: 8px 0 3px; font-size: var(--ck-fs-12); font-weight: 600; color: var(--ck-ink-2); }
.ck-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-r-tag);
  background: transparent;
  color: var(--ck-ink-2);
  font-size: var(--ck-fs-11);
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
}
.ck-tag.is-kritiek { background: var(--ck-neg-bg); border-color: var(--ck-neg-bg); color: var(--ck-neg); }
.ck-tag.is-aandacht { background: var(--ck-warn-bg); border-color: var(--ck-warn-line); color: var(--ck-warn-ink); }

.ck-notitie {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  margin: var(--space-3) 0;
  padding: 6px 10px;
  border: 1px dashed var(--ck-line-strong);
  border-radius: var(--ck-r);
  font-size: var(--ck-fs-125);
  color: var(--ck-ink-2);
}
.ck-notitie .ck-ico { color: var(--ck-ink-dim); }

.ck-fout {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  border: 1px solid var(--ck-warn-line);
  border-radius: var(--ck-r-kaart);
  background: var(--ck-warn-bg);
}
.ck-fout > .ck-ico { color: var(--ck-warn-ink); }
.ck-fout-tekst { display: flex; flex-direction: column; gap: var(--ck-g-2); flex: 1; min-width: 0; font-size: var(--ck-fs-125); }
.ck-fout-tekst b { font-size: var(--ck-fs-135); font-weight: 600; }
.ck-knop-licht {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-g-6);
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-r);
  background: var(--ck-panel);
  color: var(--ck-ink);
  font-size: var(--ck-fs-125);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.ck-knop-licht:hover { background: var(--ck-panel-2); }
.ck-knop-licht:disabled { opacity: .45; cursor: default; }
.ck-laden { display: flex; align-items: center; gap: var(--space-3); padding: 24px 0; color: var(--ck-ink-dim); }
.ck-laden .skel { width: 220px; }

/* ── kerncijfers ───────────────────────────────────────────────────────── */
.ck-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--ck-g-14) var(--ck-g-18);
}
.ck-stats.ck-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* het vak is een container: een groot getal schaalt met de kolom (drie stats in een kwartblok op 1024 px zijn
   98 px breed; Figtree 700 is breder dan de oude cijferletter, reviewronde stap 4) */
.ck-stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; container-type: inline-size; }
.ck-stat-label { font-size: var(--ck-fs-12); font-weight: 500; color: var(--ck-ink-2); }
.ck-stat-waarde {
  font-family: var(--ck-num);
  font-size: clamp(var(--ck-fs-17), 20cqi, var(--ck-fs-24));
  font-weight: var(--ck-num-gewicht);
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.ck-stat-sub { font-size: var(--ck-fs-12); color: var(--ck-ink-dim); }
.ck-card-body > .ck-stats + .ck-noot { margin-top: var(--space-3); }

/* ── tabellen ──────────────────────────────────────────────────────────── */
/* positioned: een absoluut gepositioneerd kind (.ck-sr in een kolomkop)
   blijft binnen de scroller en laat de pagina niet zijwaarts scrollen */
.ck-scroll-x { overflow-x: auto; position: relative; }
.ck-scroll-y { max-height: 340px; overflow-y: auto; }
.ck-scroll-y thead th { position: sticky; top: 0; z-index: 1; background: var(--ck-panel); }
.ck-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ck-tbl th {
  padding: 4px 6px;
  font-size: var(--ck-fs-115);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ck-ink-2);
  text-align: right;
  vertical-align: bottom;
  white-space: nowrap;
  border-bottom: 1px solid var(--ck-line-strong);
}
.ck-tbl th.ck-th-l { text-align: left; }
.ck-tbl td {
  height: 22px;
  padding: 3px 6px;
  font-size: var(--ck-fs-125);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--ck-line);
}
.ck-tbl td.ck-num { text-align: right; white-space: nowrap; }
.ck-tbl td.ck-leeg { padding: 10px 6px; color: var(--ck-ink-dim); text-align: left; }
.ck-tbl b { font-weight: 600; }

/* monteurs per standplaats (ontwerp 04) */
.ck-monteurs tr.ck-groep td {
  background: var(--ck-panel-2);
  font-weight: 600;
  border-top: 1px solid var(--ck-line-strong);
  border-bottom: 1px solid var(--ck-line);
}
.ck-monteurs td.ck-groep-naam { height: 30px; white-space: nowrap; }
.ck-groep-titel { font-size: var(--ck-fs-13); }
.ck-groep-aantal { margin-left: var(--ck-g-6); font-size: var(--ck-fs-12); font-weight: 400; color: var(--ck-ink-dim); }
.ck-monteurs td.ck-lid-naam { height: 26px; padding-left: 16px; white-space: nowrap; }
.ck-monteurs td.ck-sterk { font-weight: 600; }
.ck-ster { color: var(--ck-warn-ink); }
.ck-monteurs tfoot td {
  height: 32px;
  font-weight: 600;
  border-top: 1px solid var(--ck-line-strong);
  border-bottom: 0;
  white-space: nowrap;
}

/* ── blok Per shop (ontwerp 01) ────────────────────────────────────────── */
/* min-width: onder deze breedte scrollt de kaart in plaats van dat bedragen
   van zeven cijfers in elkaar lopen (Figtree 700 op 17 px, "−€ 1.043.815") */
.ck-pstbl {
  width: 100%;
  min-width: 1030px;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ck-pstbl col.ck-col-shop { width: 235px; }
.ck-pstbl col.ck-col-filter { width: 42px; }
/* de vier bedragkolommen breder dan procenten, uren en aantallen */
.ck-pstbl col.ck-col-bedrag { width: 11%; }
.ck-pstbl th {
  padding: 4px 6px;
  font-size: var(--ck-fs-115);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ck-ink-2);
  text-align: right;
  vertical-align: bottom;
  border-bottom: 1px solid var(--ck-line-strong);
  hyphens: manual;
}
.ck-pstbl th.ck-th-l { text-align: left; }
.ck-pstbl td {
  height: 40px;
  padding: 0 6px;
  border-bottom: 1px solid var(--ck-line);
  vertical-align: middle;
}
.ck-pstbl tr.is-afd-start td { border-top: 1px solid var(--ck-line); }
.ck-pstbl tr.is-actief td { background: var(--ck-keuze-bg); }
.ck-pstbl tr.is-actief td.ck-ps-shop { box-shadow: inset 3px 0 0 var(--ck-filter); }
.ck-ps-shop { max-width: 0; overflow: hidden; }
.ck-ps-naamregel { display: flex; align-items: center; gap: var(--ck-g-6); min-width: 0; }
.ck-ps-code { width: 30px; flex-shrink: 0; font-size: var(--ck-fs-13); font-weight: 600; color: var(--ck-ink-2); }
.ck-ps-naam {
  min-width: 0;
  font-size: var(--ck-fs-135);
  font-weight: 600;
  color: var(--ck-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-ps-tweede {
  display: block;
  padding-left: 36px;
  font-size: var(--ck-fs-12);
  font-weight: 400;
  color: var(--ck-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-ps-num { text-align: right; }
.ck-ps-waarde {
  font-family: var(--ck-num); letter-spacing: var(--ck-num-spatie);
  font-size: var(--ck-fs-17);
  font-weight: var(--ck-num-gewicht);
  line-height: 1.1;
  white-space: nowrap;
}
.ck-ps-leeg { font-family: var(--ck-num); letter-spacing: var(--ck-num-spatie); font-size: var(--ck-fs-17); font-weight: 500; color: var(--ck-ink-dim); }
.ck-ps-num.is-klikbaar { cursor: pointer; }
.ck-ps-num.is-klikbaar:hover .ck-ps-waarde { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ck-ps-filter { padding: 0 2px; text-align: right; }
.ck-filterknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-ink-2);
  cursor: pointer;
}
.ck-filterknop:hover { background: var(--ck-panel-2); border-color: var(--ck-line-strong); color: var(--ck-ink); }
.ck-pstbl tr.ck-ps-totaal td { border-top: 1px solid var(--ck-line-strong); border-bottom: 0; }
.ck-ps-totaalnaam { display: block; font-size: var(--ck-fs-14); font-weight: 600; }
.ck-ps-totaal .ck-ps-tweede { padding-left: 0; }
.ck-def { padding: 10px 14px; border-bottom: 1px solid var(--ck-line); }
.ck-def[hidden] { display: none; }
.ck-def-lijst {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: 0;
  font-size: var(--ck-fs-125);
}
.ck-def-lijst dt { font-weight: 600; }
.ck-def-lijst dd { margin: 0; color: var(--ck-ink-2); }

/* ── shoplabel (actiecentrum, ontwerp 05) ──────────────────────────────── */
.ck-shoplabel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--ck-fs-115);
  font-weight: 600;
  color: var(--ck-ink-2);
  white-space: nowrap;
  vertical-align: middle;
}
.ck-shoplabel .ck-ico { color: var(--ck-ink-dim); }

/* ── grafieken en staafjes van de v1-cockpit in de laag ────────────────── */
.ck .kchart .kgrid { stroke: var(--ck-line); }
.ck .kchart .kax { font-family: var(--ck-font); fill: var(--ck-ink-dim); }
.ck .kchart .kval { font-family: var(--ck-num); letter-spacing: var(--ck-num-spatie); fill: var(--ck-ink); }
.ck .kchart-tip {
  background: var(--ck-ink);
  border-color: var(--ck-ink);
  border-radius: var(--ck-r);
  color: var(--ck-op-donker);
  font-family: var(--ck-font);
  font-size: var(--ck-fs-12);
  font-weight: 500;
}
.ck .empty { padding: 12px 0; font-size: var(--ck-fs-125); color: var(--ck-ink-dim); text-align: left; }
.ck .empty::before { content: none; }
.ck .hbars { gap: var(--ck-g-6); margin-top: var(--space-2); }
.ck .hbar { font-size: var(--ck-fs-125); }
.ck .hbar .hb-track { height: 8px; background: var(--ck-grafiek-spoor); border-radius: var(--ck-r-tag); }
.ck .hbar .hb-track i { border-radius: var(--ck-r-tag) 0 0 var(--ck-r-tag); }
.ck .hbar .hb-val { font-family: var(--ck-font); font-size: var(--ck-fs-12); color: var(--ck-ink-2); }

/* ── actiecentrum (ontwerp 05) ─────────────────────────────────────────── */
.ck-ac-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ck-g-10);
  padding: 14px 24px;
}
.ck-ac-meta { font-size: var(--ck-fs-12); color: var(--ck-ink-dim); white-space: nowrap; }
.ck-ac-tellers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ck-ac-teller { padding: 12px 14px; background: var(--ck-panel); border: 1px solid var(--ck-line-strong); border-radius: var(--ck-r-kaart); }
.ck-ac-teller .ck-stat-waarde.is-kritiek { color: var(--ck-neg); }
.ck-ac-teller .ck-stat-waarde.is-aandacht { color: var(--ck-warn-ink); }
.ck-ac-kop-meta { margin-left: auto; font-size: var(--ck-fs-12); color: var(--ck-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ck-ac-actie { margin: 0; font-size: var(--ck-fs-125); color: var(--ck-ink); }

/* ══ v2.0-schil (docs/COCKPIT_V2.md §3 en §4) ═══════════════════════════ */
/* ── cockpitbalk: periode, weergave, vergelijken, presentatie, export ──── */
.ck-periodeknop, .ck-weergaveknop {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-g-6);
  height: 44px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-balk-dim);
  white-space: nowrap;
  cursor: pointer;
}
.ck-periodeknop:hover, .ck-weergaveknop:hover { background: var(--ck-balk-hover); }
.ck-periodeknop.is-open, .ck-weergaveknop.is-open { background: var(--ck-balk-hover); border-color: var(--ck-filter); color: var(--ck-balk-ink-2); }
.ck-periode-label {
  margin-left: var(--ck-g-2);
  font-family: var(--ck-num);
  font-size: var(--ck-fs-22);
  font-weight: var(--ck-num-gewicht);
  letter-spacing: var(--ck-num-spatie);
  line-height: 1;
  color: var(--ck-balk-sterk);
}
.ck-periode-sub { font-size: var(--ck-fs-13); font-weight: 400; color: var(--ck-balk-dim); }
.ck-balk-pijlen, .ck-balk-iconen { display: inline-flex; align-items: center; gap: var(--ck-g-2); }
.ck-balkknop[aria-pressed="true"] { color: var(--ck-filter); }
.ck-weergave-tekst { display: flex; flex-direction: column; gap: var(--space-1); line-height: 1; text-align: left; }
.ck-weergave-naam { display: inline-flex; align-items: center; gap: var(--ck-g-6); font-size: var(--ck-fs-14); font-weight: 600; color: var(--ck-balk-sterk); }
.ck-weergave-sub { font-size: var(--ck-fs-115); font-weight: 400; color: var(--ck-balk-dim); }
.ck-stip-gewijzigd { display: inline-block; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--ck-filter); }
.ck-vergelijk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-balk-sterk);
  white-space: nowrap;
  cursor: pointer;
}
.ck-vergelijk:hover { background: var(--ck-balk-hover); }
.ck-schakelaar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 30px;
  height: 18px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--ck-balk-line);
  transition: background .15s;
}
.ck-schakelaar i { display: block; width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--ck-panel); box-shadow: var(--shadow-raised); transition: transform .15s; }
.ck-vergelijk[aria-pressed="true"] .ck-schakelaar { background: var(--ck-filter); }
.ck-vergelijk[aria-pressed="true"] .ck-schakelaar i { transform: translateX(12px); }
.ck-vergelijk-tekst { display: flex; flex-direction: column; gap: var(--space-1); line-height: 1; text-align: left; }
.ck-vergelijk-tekst > span:first-child { font-size: var(--ck-fs-13); font-weight: 500; }
.ck-vergelijk-sub { font-size: var(--ck-fs-115); color: var(--ck-balk-dim); }
.ck-splits { display: inline-flex; }
.ck-splits .ck-balkknop-verhoogd:first-child { border-radius: var(--ck-r) 0 0 var(--ck-r); }
.ck-splits .ck-balkknop-verhoogd:last-child { padding: 0 12px; border-left: 0; border-radius: 0 var(--ck-r) var(--ck-r) 0; }
.ck-balk .ck-datavan { margin-left: var(--ck-g-2); }
.ck-balk-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ck-g-10); margin-left: auto; min-width: 0; }
@media (max-width: 700px) {
  .ck-balk { padding-left: 16px; padding-right: 16px; }
  .ck-balk-rechts { margin-left: 0; }
  /* het periodelabel mag afbreken: op 320 en 360 px gaf de nowrap-knop nog paginascroll (reviewronde stap 4) */
  .ck-periode-anker { flex: 0 1 auto; max-width: 100%; }
  .ck-periodeknop { max-width: 100%; height: auto; min-height: 44px; flex-wrap: wrap; white-space: normal; text-align: left; }
}

/* ── popovers ──────────────────────────────────────────────────────────── */
.ck-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  background: var(--ck-panel);
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-r-kaart);
  box-shadow: var(--ck-shadow-pop);
  color: var(--ck-ink);
  font-family: var(--ck-font);
  font-size: var(--ck-fs-13);
  line-height: 1.35;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.ck-pop[data-caret]::before {
  content: '';
  position: absolute;
  left: 36px;
  top: -7px;
  width: 12px;
  height: 12px;
  background: var(--ck-panel);
  border-left: 1px solid var(--ck-line-strong);
  border-top: 1px solid var(--ck-line-strong);
  transform: rotate(45deg);
}
.ck-periodekiezer { left: -1px; top: calc(100% + 10px); width: 600px; max-width: calc(100vw - 32px); }
.ck-weergavemenu { left: 1px; top: calc(100% + 10px); width: 380px; max-width: calc(100vw - 32px); padding: 6px; }
.ck-blokmenu { left: auto; right: 8px; top: 40px; width: 270px; }
.ck-blokdef { left: auto; right: 8px; top: 40px; width: 380px; max-width: calc(100% - 16px); }
.ck-blokdef:focus { outline: none; }

/* segmentknoppen (tabs, weergeven per, formaat) */
.ck-seg {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-g-2);
  height: 30px;
  padding: 1px;
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-r-seg);
  background: var(--ck-panel);
}
.ck-seg-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-ink-2);
  font-size: var(--ck-fs-125);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.ck-seg-knop:hover { color: var(--ck-ink); }
.ck-seg-knop[aria-pressed="true"] { background: var(--ck-filter); border-color: var(--ck-filter); color: var(--ck-filter-ink); }
.ck-seg-klein { height: 28px; }
.ck-seg-klein .ck-seg-knop { height: 24px; font-size: var(--ck-fs-12); }
.ck-knop-donker {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-g-6);
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--ck-filter);
  border-radius: var(--ck-r);
  background: var(--ck-filter);
  color: var(--ck-filter-ink);
  font-size: var(--ck-fs-125);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.ck-knop-donker:disabled { opacity: .45; cursor: default; }
.ck-knop-tekst { padding: 0; border: 0; background: transparent; color: var(--ck-ink-dim); font-size: var(--ck-fs-12); cursor: pointer; }
.ck-knop-tekst:hover { color: var(--ck-neg); text-decoration: underline; }
.ck-menu-lijn { height: 1px; margin: var(--ck-g-6) 0; background: var(--ck-line); }

/* ── periodekiezer (ontwerp Periode kiezen) ────────────────────────────── */
.ck-pk { display: flex; flex-direction: column; gap: var(--space-4); padding: 16px; }
.ck-pk-kolommen { display: flex; align-items: flex-start; gap: var(--space-3); }
.ck-pk-links { display: flex; flex-direction: column; gap: var(--space-2); width: 300px; flex-shrink: 0; }
.ck-pk-rechts { display: flex; flex-direction: column; gap: var(--ck-g-1); flex: 1; min-width: 0; padding-left: 12px; border-left: 1px solid var(--ck-line); }
.ck-pk-jaar { display: flex; align-items: center; justify-content: center; gap: var(--ck-g-6); }
.ck-pk-jaartal { font-family: var(--ck-num); letter-spacing: var(--ck-num-spatie); font-size: var(--ck-fs-18); font-weight: var(--ck-num-gewicht); }
.ck-pk-raster { display: grid; gap: var(--ck-g-6); }
.ck-pk-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ck-pk-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-pk-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ck-pk-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ck-pk-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ck-g-2); }
.ck-pk-cel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 34px;
  padding: 0;
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-r);
  background: var(--ck-panel);
  color: var(--ck-ink);
  font-size: var(--ck-fs-125);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.ck-pk-cel:hover { background: var(--ck-panel-2); }
.ck-pk-cel[aria-pressed="true"] { background: var(--ck-filter); border-color: var(--ck-filter); color: var(--ck-filter-ink); }
.ck-pk-cel.ck-pk-hoog { height: 44px; }
.ck-pk-cel.ck-pk-klein { height: 28px; font-size: var(--ck-fs-12); }
.ck-pk-cel.is-weekend { color: var(--ck-ink-dim); }
.ck-pk-cel[aria-pressed="true"].is-weekend { color: var(--ck-filter-ink); }
.ck-pk-cel-in { display: flex; flex-direction: column; align-items: center; gap: var(--ck-g-1); }
.ck-stip { display: block; width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--ck-filter); }
.ck-pk-cel[aria-pressed="true"] .ck-stip { background: var(--ck-filter-ink); }
.ck-pk-sub { display: block; margin-top: var(--ck-g-1); font-size: var(--ck-fs-11); font-weight: 400; color: var(--ck-ink-dim); }
.ck-pk-cel[aria-pressed="true"] .ck-pk-sub { color: var(--ck-filter-ink); opacity: .8; }
.ck-pk-cel.ck-pk-hoog { flex-direction: column; }
.ck-pk-maanden { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ck-g-2); }
.ck-pk-maandknop {
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-ink-2);
  font-size: var(--ck-fs-115);
  font-weight: 500;
  cursor: pointer;
}
.ck-pk-maandknop:hover { background: var(--ck-panel-2); }
.ck-pk-maandknop[aria-pressed="true"] { background: var(--ck-panel-2); border-color: var(--ck-line-strong); color: var(--ck-ink); }
.ck-pk-dagkop { font-size: var(--ck-fs-11); font-weight: 600; color: var(--ck-ink-dim); text-align: center; }
.ck-pk-vrij { display: flex; flex-direction: column; gap: var(--space-2); }
.ck-pk-veld { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--ck-fs-12); font-weight: 600; color: var(--ck-ink-2); }
.ck-invoer {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ck-veld-line);
  border-radius: var(--ck-r);
  background: var(--ck-panel);
  color: var(--ck-ink);
  font-family: var(--ck-font);
  font-size: var(--ck-fs-13);
}
.ck-pk-kop { padding: 0 8px 2px; font-size: var(--ck-fs-12); font-weight: 600; color: var(--ck-ink-2); }
.ck-pk-kop-inline { font-size: var(--ck-fs-125); font-weight: 600; color: var(--ck-ink-2); }
.ck-pk-snel {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ck-g-6);
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-ink);
  font-size: var(--ck-fs-125);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.ck-pk-snel:hover, .ck-pk-snel.is-actief { background: var(--ck-panel-2); }
.ck-pk-snel-sub { margin-left: auto; font-size: var(--ck-fs-115); font-weight: 400; color: var(--ck-ink-dim); }
.ck-pk-per { display: flex; align-items: center; gap: var(--space-3); }
.ck-pk-voet { display: flex; align-items: center; gap: var(--space-2); padding-top: 14px; border-top: 1px solid var(--ck-line); }
.ck-pk-samenvatting { display: flex; flex-direction: column; gap: var(--ck-g-2); min-width: 0; }
.ck-pk-bereik { font-size: var(--ck-fs-13); font-weight: 600; }
.ck-pk-detail { font-size: var(--ck-fs-12); color: var(--ck-ink-dim); }
@media (max-width: 700px) {
  .ck-pk-kolommen { flex-direction: column; }
  .ck-pk-links { width: 100%; }
  .ck-pk-rechts { padding-left: 0; border-left: 0; }
}

/* ── weergavemenu (ontwerp Weergave kiezen) ────────────────────────────── */
.ck-wg { display: flex; flex-direction: column; gap: var(--ck-g-2); }
.ck-wg-kop { padding: 10px 12px 4px; font-size: var(--ck-fs-12); font-weight: 600; color: var(--ck-ink-dim); }
.ck-wg-rij {
  display: flex;
  align-items: center;
  gap: var(--ck-g-10);
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-ink);
  text-align: left;
  cursor: pointer;
}
.ck-wg-rij:hover, .ck-wg-rij.is-huidig { background: var(--ck-panel-2); }
.ck-wg-vink { display: inline-flex; width: 15px; flex: none; color: var(--ck-ink); }
.ck-wg-tekst { display: flex; flex-direction: column; gap: var(--ck-g-1); min-width: 0; }
.ck-wg-naam { font-size: var(--ck-fs-13); font-weight: 500; }
.ck-wg-rij.is-huidig .ck-wg-naam { font-weight: 600; }
.ck-wg-sub { font-size: var(--ck-fs-12); color: var(--ck-ink-dim); }
.ck-wg-ster { display: inline-flex; color: var(--ck-filter); }
.ck-wg-knoppen { display: flex; align-items: center; gap: var(--space-2); padding: 4px 12px 6px; }
.ck-wg-knoppen .ck-knop-licht { height: 30px; }
.ck-wg-knoppen .ck-ster { display: inline-flex; color: var(--ck-filter); }
.ck-wg-noot { margin: 0; padding: 4px 12px 6px; font-size: var(--ck-fs-12); color: var(--ck-ink-dim); }
.ck-tag .ck-ico { margin-right: var(--ck-g-1); }

/* ── chips per groep ───────────────────────────────────────────────────── */
.ck-blokken-groep { margin: 0 var(--ck-g-1) 0 var(--space-3); font-size: var(--ck-fs-12); font-weight: 500; color: var(--ck-ink-dim); white-space: nowrap; }
.ck-blokken-groep:first-child { margin-left: 0; }
.ck-chip .ck-ico { color: var(--ck-ink-dim); }
.ck-chip[aria-pressed="true"] .ck-ico { color: var(--ck-filter-ink); }
.ck-chip-klein { height: 22px; padding: 0 7px; font-size: var(--ck-fs-115); }

/* ── raster en blokken ─────────────────────────────────────────────────── */
.ck-raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: var(--ck-raster-rij);
  gap: var(--ck-raster-gap);
}
.ck-raster.is-slepen { user-select: none; }
.ck-raster-leeg { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--ck-ink-2); }
.ck-raster-leeg p { margin: 0 0 var(--space-1); }
.ck-blok {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--ck-panel);
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-r-kaart);
  transition: opacity .12s;
}
.ck-blok.is-slepen { opacity: .35; outline: 2px dashed var(--ck-line-strong); outline-offset: -2px; }
.ck-blok.is-formaat { outline: 2px solid var(--ck-filter); outline-offset: -2px; }
.ck-blok-geest { position: fixed; z-index: 60; margin: 0; pointer-events: none; opacity: .92; box-shadow: var(--shadow-overlay); }
.ck-blok-kop {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 38px;
  padding: 0 8px;
  flex-shrink: 0;
  background: var(--ck-panel-2);
  border-bottom: 1px solid var(--ck-line);
  border-radius: var(--ck-r-kaart-binnen) var(--ck-r-kaart-binnen) 0 0;
}
.ck-blok-kop h2 {
  margin: 0;
  min-width: 0;
  font-family: var(--ck-font);
  font-size: var(--ck-fs-135);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ck-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-blok.is-presentatie .ck-blok-kop { padding-left: 10px; }
.ck-greep {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-left: var(--ck-g-min2);
  padding: 0 2px;
  border: 1px solid transparent;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-ink-dim);
  cursor: grab;
  touch-action: none;
}
.ck-greep:hover { background: var(--ck-panel); border-color: var(--ck-line-strong); color: var(--ck-ink); }
.ck-greep:active { cursor: grabbing; }
.ck-blok-slot { display: inline-flex; color: var(--ck-ink-dim); }
.ck-blok-kop h2 { flex: 0 1 auto; min-width: 48px; }
.ck-blok-stand { display: inline-flex; align-items: center; gap: var(--space-1); flex: 0 10 auto; min-width: 0; font-size: var(--ck-fs-12); color: var(--ck-ink-dim); white-space: nowrap; }
.ck-blok-stand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ck-blok-kopextra { display: flex; align-items: center; gap: var(--ck-g-6); min-width: 0; margin-left: var(--space-2); }
.ck-blok-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 14px;
  overflow: auto;
}
.ck-blok-body > .ck-stats { flex: none; }
.ck-hoek {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: flex;
  padding: 2px;
  color: var(--ck-ink-dim);
  cursor: nwse-resize;
  touch-action: none;
}
.ck-hoek:hover { color: var(--ck-ink); }

/* blokmenu en definitie */
.ck-menu { display: flex; flex-direction: column; gap: var(--ck-g-1); padding: 6px; }
.ck-menu-formaat { display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px 8px; }
.ck-menu-kop { font-size: var(--ck-fs-125); font-weight: 600; color: var(--ck-ink-2); }
.ck-menu .ck-menu-lijn { margin: var(--ck-g-2) 0 var(--space-1); }
.ck-menu-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ck-g-6);
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-ink);
  font-size: var(--ck-fs-125);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.ck-menu-item .ck-ico { color: var(--ck-ink-2); }
.ck-menu-item:hover:enabled { background: var(--ck-panel-2); }
.ck-menu-item:disabled { color: var(--ck-ink-dim); cursor: default; }
.ck-def-pop { padding: 12px 14px; }
.ck-def-pop-kop { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--ck-fs-13); font-weight: 600; }
.ck-def-pop-tekst { font-size: var(--ck-fs-125); color: var(--ck-ink-2); }
.ck-def-pop-tekst p { margin: 0 0 var(--space-2); }
.ck-def-pop-tekst p:last-child { margin-bottom: 0; }

/* ── kolommen slepen, verbreden en verbergen (contract §4, cockpit-kolommen.js) ── */
/* elke kop met data-kol is een greep: slepen verplaatst (niet de vaste
   sleutelkolom), de rechterrand verbreedt, rechtermuisknop of Enter opent
   het kolommenmenu; de geest en de invoegstreep staan los in de laag */
.ck th[data-kol] { position: relative; user-select: none; }
.ck th[data-kol]:not([data-vast]) { cursor: grab; touch-action: none; }
.ck th[data-kol]:not([data-vast]):focus-visible { outline: 2px solid var(--ck-ink); outline-offset: -2px; }
.ck th[data-kol].is-open { background: var(--ck-panel-2); }
.ck th[data-kol].is-kol-slepen { opacity: .35; }
.ck th[data-kol].is-kol-formaat { background: var(--ck-keuze-bg); }
.ck table.is-kol-slepen, .ck table.is-kol-slepen th, .ck table.is-kol-slepen td { cursor: grabbing; }
.ck-kol-greep {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  z-index: 1;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}
.ck-kol-greep::after {
  content: '';
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 3px;
  width: 2px;
  border-radius: var(--ck-r-tag);
  background: transparent;
}
.ck th[data-kol]:hover .ck-kol-greep::after, .ck-kol-greep:hover::after { background: var(--ck-line-strong); }
.ck th.is-kol-formaat .ck-kol-greep::after { background: var(--ck-filter); }
.ck-blok.is-presentatie .ck-kol-greep, .ck-presentatie .ck-kol-greep { display: none; }
.ck-blok.is-presentatie th[data-kol]:not([data-vast]), .ck-presentatie th[data-kol]:not([data-vast]) { cursor: default; }
.ck-kol-geest {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  padding: 0 6px;
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-r);
  background: var(--ck-panel);
  box-shadow: var(--ck-shadow-pop);
  color: var(--ck-ink);
  font-size: var(--ck-fs-115);
  font-weight: 600;
  white-space: nowrap;
  opacity: .92;
  pointer-events: none;
}
.ck-kol-streep { position: fixed; z-index: 59; width: 2px; background: var(--ck-filter); pointer-events: none; }
.ck-kolmenu { width: 264px; }
.ck-kolmenu.is-blok { left: auto; right: 8px; top: 40px; }
.ck-menu-titel { padding: 6px 10px 2px; font-size: var(--ck-fs-125); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-kolmenu-kop { padding: 4px 10px 2px; font-size: var(--ck-fs-115); font-weight: 600; color: var(--ck-ink-dim); }
.ck-menu-noot { margin: 0; padding: 4px 10px 6px; font-size: var(--ck-fs-12); color: var(--ck-ink-dim); }
.ck-kolmenu-vink { height: 28px; }
.ck-kolmenu-vinkje { display: inline-flex; width: 14px; flex: none; color: var(--ck-ink); }

/* ── inhoud van de blokken ─────────────────────────────────────────────── */
.ck-stats.ck-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-blok-body .ck-stats { gap: var(--space-2) var(--space-4); }
.ck-stat-naast { display: inline-block; margin-left: var(--ck-g-6); font-family: var(--ck-font); font-size: var(--ck-fs-12); font-weight: 400; color: var(--ck-ink-dim); letter-spacing: 0; white-space: nowrap; }
.ck-stat-waarde:has(.ck-stat-naast) { white-space: normal; }
.ck-kern-groot { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.ck-kern-waarde { font-family: var(--ck-num); font-size: var(--ck-fs-28); font-weight: var(--ck-num-gewicht); line-height: 1; letter-spacing: var(--ck-num-spatie); white-space: nowrap; }
.ck-kern-naast { font-size: var(--ck-fs-13); color: var(--ck-ink-2); }
.ck-kern-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ck-g-1); font-size: var(--ck-fs-12); color: var(--ck-ink-dim); text-align: right; }
.ck-delta { display: inline-flex; align-items: baseline; gap: var(--ck-g-6); font-family: var(--ck-font); font-size: var(--ck-fs-115); font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.ck-delta.is-pos { color: var(--ck-pos); }
.ck-delta.is-neg { color: var(--ck-neg); }
.ck-delta.is-gelijk { color: var(--ck-ink-dim); }
.ck-delta-pct { font-weight: 500; }
.ck-stat-sub .ck-delta { font-size: var(--ck-fs-115); }
.ck-ps-cel { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ck-g-1); }
/* lege tweede regel van een cel zonder verandering: dezelfde hoogte als .ck-delta */
.ck-ps-opvul { font-family: var(--ck-font); font-size: var(--ck-fs-115); font-weight: 500; }
.ck-pstbl.is-presentatie { min-width: 0; }
.ck-lijstje { margin: 0; padding: 0; list-style: none; }
.ck-lijstje li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 5px 0; font-size: var(--ck-fs-125); border-bottom: 1px solid var(--ck-line); }
.ck-lijstje li:last-child { border-bottom: 0; }
.ck-lijstje b { font-weight: 600; white-space: nowrap; }
.ck-link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: auto; font-size: var(--ck-fs-13); font-weight: 600; color: var(--ck-ink); }
.ck-verdeling { display: flex; height: 8px; overflow: hidden; border-radius: var(--ck-r-tag); background: var(--ck-grafiek-spoor); }
.ck-verdeling i { display: block; height: 100%; }
.ck-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--space-2); }
.ck-bucket { display: flex; flex-direction: column; gap: var(--ck-g-1); font-size: var(--ck-fs-12); }
.ck-bucket-label { color: var(--ck-ink-dim); }
.ck-bucket b { font-family: var(--ck-num); letter-spacing: var(--ck-num-spatie); font-size: var(--ck-fs-14); font-weight: var(--ck-num-gewicht); }
.ck-bucket-sub { color: var(--ck-ink-dim); }
.ck-balkjes { display: flex; flex-direction: column; gap: var(--ck-g-6); }
.ck-balkje { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: var(--space-2); font-size: var(--ck-fs-125); }
.ck-balkje-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-balkje-spoor { display: block; height: 8px; overflow: hidden; border-radius: var(--ck-r-tag); background: var(--ck-grafiek-spoor); }
.ck-balkje-spoor i { display: block; height: 100%; border-radius: var(--ck-r-tag) 0 0 var(--ck-r-tag); }
.ck-balkje-waarde { font-size: var(--ck-fs-12); color: var(--ck-ink-2); white-space: nowrap; text-align: right; }
.ck-blok-tabel { flex: none; }
.ck-blok-body .ck-scroll-x { max-width: 100%; }
.ck-tag.is-nieuw { background: var(--ck-pos-bg); border-color: transparent; color: var(--ck-pos); }
.ck-geenbron { display: flex; flex-direction: column; gap: var(--space-1); padding: 10px 12px; border: 1px dashed var(--ck-line-strong); border-radius: var(--ck-r); }
.ck-geenbron-kop { margin: 0; font-size: var(--ck-fs-13); font-weight: 600; color: var(--ck-ink-2); }
.ck-tbl tfoot td { font-weight: 600; border-top: 1px solid var(--ck-line-strong); border-bottom: 0; }

/* grafieken */
.ck-grafiek { position: relative; flex: 1 1 auto; min-height: 96px; }
.ck-grafiek svg { display: block; max-width: 100%; }
.ck-gr-rooster { stroke: var(--ck-line); }
.ck-gr-basis { stroke: var(--ck-line-strong); }
.ck-gr-as { font-family: var(--ck-font); font-size: var(--ck-fs-11); fill: var(--ck-ink-dim); }
.ck-gr-as.is-huidig { font-weight: 600; fill: var(--ck-ink); }
.ck-grafiek-tip {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--ck-g-1);
  padding: 6px 8px;
  border-radius: var(--ck-r);
  background: var(--ck-ink);
  color: var(--ck-op-donker);
  font-size: var(--ck-fs-12);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.ck-grafiek-tip[hidden] { display: none; }
.ck-grafiek-tip b { font-weight: 600; }
.ck-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--ck-fs-12); color: var(--ck-ink-2); }
.ck-legenda-item { display: inline-flex; align-items: center; gap: var(--ck-g-5); }
.ck-legenda-item i { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-badge); }

/* ── presentatiemodus (ontwerp 07) ─────────────────────────────────────── */
html.ck-presentatie-open { overflow: hidden; }
.ck-presentatie {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow: auto;
  background: var(--ck-bg);
}
.ck-presentatie:focus { outline: none; }
.ck-pres-kop { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; height: 56px; padding: 0 32px; border-bottom: 1px solid var(--ck-line-strong); background: var(--ck-panel); }
.ck-pres-titel { font-family: var(--ck-num); font-size: var(--ck-fs-20); font-weight: var(--ck-num-gewicht); letter-spacing: var(--ck-num-spatie); color: var(--ck-ink); white-space: nowrap; }
.ck-pres-scope { font-family: var(--ck-num); letter-spacing: var(--ck-num-spatie); font-size: var(--ck-fs-20); font-weight: var(--ck-num-gewicht); color: var(--ck-filter); white-space: nowrap; }
.ck-pres-sub { font-size: var(--ck-fs-14); color: var(--ck-balk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ck-pres-teller { font-size: var(--ck-fs-13); color: var(--ck-balk-dim); white-space: nowrap; }
.ck-pres-hint { font-size: var(--ck-fs-13); color: var(--ck-balk-dim); white-space: nowrap; }
.ck-pres-hint + .ck-toets { margin-left: var(--space-2); }
.ck-toets {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--ck-balk-line);
  border-bottom-width: 2px;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-balk-ink-2);
  font-family: var(--ck-font);
  font-size: var(--ck-fs-12);
  font-weight: 600;
  cursor: pointer;
}
.ck-toets:hover { background: var(--ck-balk-hover); }
.ck-presentatie :focus-visible { outline-color: var(--ck-filter); }
.ck-pres-vlak { flex: 1 1 auto; min-height: 0; padding: 16px 32px 32px; }
/* het blok vult het vlak en de inhoud zoomt 1,25 keer (ontwerp 07); de zoom
   vergroot een percentage niet, dus 100 % en niet calc(100% / 1,25) (dat gaf
   80 % van het vlak: de tabel van Per shop liep in elkaar, 973 bij 557 px op
   1280x800) */
.ck-pres-vlak > .ck-blok { zoom: 1.25; width: 100%; height: 100%; }

/* ── afdrukken (Pdf): één blok per pagina, liggend A4 ──────────────────── */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  html.ck-afdruk .sidebar, html.ck-afdruk .topbar, html.ck-afdruk .toolbar, html.ck-afdruk .ck-balk, html.ck-afdruk .ck-blokken,
  html.ck-afdruk .ck-voet, html.ck-afdruk .ck-greep, html.ck-afdruk .ck-meer, html.ck-afdruk .ck-hoek, html.ck-afdruk .ck-pop,
  html.ck-afdruk .toast, html.ck-afdruk .content:not(.active), html.ck-afdruk .ck-filterknop, html.ck-afdruk .ck-info, html.ck-afdruk .ck-kol-greep { display: none !important; }
  html.ck-afdruk body.dashboard { display: block; }
  html.ck-afdruk .main, html.ck-afdruk .content.active { display: block !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
  html.ck-afdruk .ck-blok-body .ck-scroll-x, html.ck-afdruk .ck-blok-body .ck-scroll-y { overflow: visible; }
  html.ck-afdruk .ck-pstbl { min-width: 0; }
  html.ck-afdruk .ck { margin: 0; padding: 0; min-height: 0; background: var(--ck-panel); }
  html.ck-afdruk .ck-main { padding: 0; }
  html.ck-afdruk .ck-raster { display: block; }
  html.ck-afdruk .ck-blok { display: block; height: auto !important; margin: 0 0 var(--space-4); break-inside: avoid; page-break-after: always; }
  html.ck-afdruk .ck-blok:last-child { page-break-after: auto; }
  html.ck-afdruk .ck-blok-body { display: block; overflow: visible; }
  html.ck-afdruk .ck-blok-body .ck-scroll-y { max-height: none; }
}

/* ── herstel schil ── */
/* geen toegang (schil-13): de knoppen van de balk zijn uit en zien er ook zo uit */
.ck-periodeknop:disabled, .ck-weergaveknop:disabled, .ck-vergelijk:disabled { opacity: .45; cursor: default; }
.ck-periodeknop:disabled:hover, .ck-weergaveknop:disabled:hover, .ck-vergelijk:disabled:hover, .ck-balkknop:disabled:hover { background: transparent; }
/* tab Vrij met een onbruikbare invoer (schil-7): de melding in de onderregel */
.ck-pk-samenvatting.is-fout .ck-pk-bereik { color: var(--ck-neg); }
/* ── herstel blokken ── */
/* De greep aan de rechterrand van de laatste kolomkop steekt niet buiten de
   tabel: anders is elke bloktabel die de breedte vult 4 px te breed en
   verschijnt er een horizontale scroll (ontwerp-5, uurtarief op halve breedte). */
.ck th[data-kol]:last-child > .ck-kol-greep { right: 0; }
/* De kop van een smal blok (kwart breedte, 1280 naast het zijmenu): de greep,
   het slot, de infoknop en het menu krimpen nooit en blijven in het blok; de
   tag "voorlopige definitie" kapt eerst af. Op kwart breedte (de inhoud draagt
   dan .ckb.is-smal) valt de tag weg: de titel heeft de ruimte nodig en de
   definitie achter de infoknop noemt de voorlopige definitie. */
.ck-blok-kop > .ck-greep, .ck-blok-kop > .ck-ikoonknop, .ck-blok-kop > .ck-blok-slot { flex-shrink: 0; }
.ck-blok-kop > .ck-tag { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; line-height: 18px; text-overflow: ellipsis; }
.ck-blok:has(> .ck-blok-body > .ckb.is-smal) > .ck-blok-kop > .ck-tag { display: none; }
/* Een blok op kwart breedte in een smal venster (1024 naast het zijmenu, kop
   van 154 px): greep, titel (minimaal 48 px), slot of klok, infoknop en menu
   passen alleen met een kleinere tussenruimte. --ck-kop-vast is wat die vijf
   samen minimaal vragen (greep 18, titel 48, klok of slot 13, twee knoppen van
   25 px, plus 1 px speling). De tussenruimte is de 8 px van het ontwerp zolang
   dat past (vanaf een kop van 162 px, dus op kwart breedte vanaf 1280 en op
   halve en volle breedte altijd) en zakt pas daaronder, tot 4 px: dan blijft
   het menu in het blok. De lege vulruimte kost geen extra tussenruimte: de
   infoknop duwt zichzelf naar rechts (behalve naast een schakelaar in de kop,
   die zelf al rechts staat). */
.ck-blok-kop { --ck-kop-vast: 130px; column-gap: clamp(var(--space-1), calc((100% - var(--ck-kop-vast)) / 4), var(--space-2)); }
.ck-blok-kop > .ck-grow { display: none; }
.ck-blok-kop > .ck-info { margin-left: auto; }
.ck-blok-kop:has(> .ck-blok-kopextra .ckb-seg) > .ck-info { margin-left: 0; }
/* De klok van een standblok houdt zijn plek en de tekst "stand per" kapt af;
   zonder die ondergrens kromp het vak op kwart breedte tot 0 en tekende de
   klok buiten zijn vak, bij 1024 over de infoknop. De ondergrens is de maat
   van het icoon zelf (icoonKlok(13) in cockpit-raster.js), geen stap van de
   ruimteschaal: die krimpt in de dichtheid Compact en dan viel er een stuk
   van de klok af. */
.ck-blok-kop > .ck-blok-stand { min-width: 13px; overflow: hidden; }
.ck-blok-kop > .ck-blok-stand > svg { flex-shrink: 0; }