/* 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 en het Actiecentrum.

   Alles staat onder .ck, zodat de rest van het portaal ongemoeid blijft.
   De laag heeft een eigen vast palet (grafiet, groengrijs en de signaalkleur
   amber #F2A516 voor "je kijkt naar een deel"), los van het klantaccent, en
   eigen letters: IBM Plex Sans voor tekst en Saira Semi Condensed voor grote
   getallen, zelf gehost in assets/fonts (SIL OFL 1.1, zie OFL.txt).

   Afwijking van de tokenlaag, bewust (ONTWERPSYSTEEM.md, "Cockpitlaag"): de
   lettergroottes en de kleine radii van het ontwerp staan als eigen tokens
   op .ck (--ck-fs-*, --ck-r-*) 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. */

/* ── letters (unicode-range zoals in de ontwerpexport) ─────────────────── */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/saira-semi-condensed-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/saira-semi-condensed-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/saira-semi-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/saira-semi-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/saira-semi-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/saira-semi-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens van de laag ────────────────────────────────────────────────── */
.ck {
  --ck-font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --ck-num: 'Saira Semi Condensed', 'Arial Narrow', sans-serif;

  --ck-bg: #E4E8E6;          /* pagina achter de kaarten */
  --ck-panel: #FBFCFB;       /* kaart, lijst, lichte knop */
  --ck-panel-2: #F1F4F3;     /* kopband, groepsrij, gekozen optie */
  --ck-line: #DDE2E0;        /* haarlijn */
  --ck-line-strong: #C7CECB; /* kaartrand, kolomkop, totaalrij */
  --ck-ink: #1F2629;
  --ck-ink-2: #4F5A5E;
  --ck-ink-dim: #5E686C;
  --ck-pos: #2E7A48;
  --ck-neg: #B3261E;
  --ck-neg-bg: #F8E3E0;
  --ck-filter: #F2A516;      /* signaalkleur: gefilterd, vast, niet het klantaccent */
  --ck-filter-ink: #1F2629;
  --ck-warn-ink: #8A5A00;
  --ck-warn-bg: #FFF6E2;     /* ook de lichte markering van de actieve shop */
  --ck-warn-line: #FBE9C4;
  --ck-grafiek-spoor: #E3E8E6;

  --ck-bar: #1F2629;         /* de donkere cockpitbalk */
  --ck-bar-raised: #2B3438;
  --ck-bar-line: #3A4549;
  --ck-bar-ink: #D3DAD7;
  --ck-bar-ink-2: #E8ECEA;
  --ck-bar-dim: #A9B3B0;
  --ck-bar-wit: #FFFFFF;

  --ck-shadow-pop: 0 12px 32px rgba(21, 26, 29, .22);

  /* 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 van het ontwerp: tag 3, knop 4, kaart 6 */
  --ck-r-tag: 3px;
  --ck-r: 4px;
  --ck-r-seg: 5px;          /* omlijsting van een segmentknop */
  --ck-r-kaart: 6px;
  --ck-r-kaart-binnen: 5px; /* 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 */
  margin: 0 calc(var(--space-6) * -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; }
.ck a:hover { color: #000000; text-decoration: underline; text-underline-offset: 3px; }
.ck :focus-visible { outline: 2px solid var(--ck-ink); 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;
  background: var(--ck-bar);
  color: var(--ck-bar-ink);
}
.ck-balk :focus-visible { outline-color: var(--ck-bar-ink-2); }
.ck-balk-scheiding { width: 1px; height: 28px; flex: none; background: var(--ck-bar-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-bar-ink); }
.ck-shopknop-balk .ck-ico { color: var(--ck-bar-dim); }
.ck-shopknop-balk .ck-shopknop-label { font-size: var(--ck-fs-14); font-weight: 600; color: var(--ck-bar-wit); }
.ck-shopknop-balk:hover:enabled { background: var(--ck-bar-raised); }
.ck-shopknop-balk.is-open { background: var(--ck-bar-raised); color: var(--ck-bar-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-bar-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: 600;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--ck-bar-wit);
}
.ck-periode-jaar { font-size: var(--ck-fs-13); font-weight: 400; color: var(--ck-bar-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-bar-ink);
  cursor: pointer;
}
.ck-balkknop:hover { background: var(--ck-bar-raised); }
.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-bar-line);
  border-radius: var(--ck-r);
  background: var(--ck-bar-raised);
  color: var(--ck-bar-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-bar-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-bar-dim); }
.ck-datavan > b { font-size: var(--ck-fs-125); font-weight: 500; color: var(--ck-bar-wit); }
.ck-datavan > .ck-verouderd { color: var(--ck-filter); 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);
  font-size: var(--ck-fs-14);
  font-weight: 600;
  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-ink); border-color: var(--ck-ink); color: #FFFFFF; }

/* ── 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)); }
.ck-stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.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: var(--ck-fs-24);
  font-weight: 600;
  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 (Saira 17, "−€ 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: 10%; }
.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-warn-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);
  font-size: var(--ck-fs-17);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.ck-ps-leeg { font-family: var(--ck-num); 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); fill: var(--ck-ink); }
.ck .kchart-tip {
  background: var(--ck-ink);
  border-color: var(--ck-ink);
  border-radius: var(--ck-r);
  color: #FFFFFF;
  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-bar-dim);
  white-space: nowrap;
  cursor: pointer;
}
.ck-periodeknop:hover, .ck-weergaveknop:hover { background: var(--ck-bar-raised); }
.ck-periodeknop.is-open, .ck-weergaveknop.is-open { background: var(--ck-bar-raised); border-color: var(--ck-filter); color: var(--ck-bar-ink-2); }
.ck-periode-label {
  margin-left: var(--ck-g-2);
  font-family: var(--ck-num);
  font-size: var(--ck-fs-22);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--ck-bar-wit);
}
.ck-periode-sub { font-size: var(--ck-fs-13); font-weight: 400; color: var(--ck-bar-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-bar-wit); }
.ck-weergave-sub { font-size: var(--ck-fs-115); font-weight: 400; color: var(--ck-bar-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-bar-wit);
  white-space: nowrap;
  cursor: pointer;
}
.ck-vergelijk:hover { background: var(--ck-bar-raised); }
.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-bar-line);
  transition: background .15s;
}
.ck-schakelaar i { display: block; width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--ck-bar-wit); 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-bar-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; align-items: center; gap: var(--ck-g-10); margin-left: auto; }

/* ── 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-ink); border-color: var(--ck-ink); color: #FFFFFF; }
.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-ink);
  border-radius: var(--ck-r);
  background: var(--ck-ink);
  color: #FFFFFF;
  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); font-size: var(--ck-fs-18); font-weight: 600; }
.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-ink); border-color: var(--ck-ink); color: #FFFFFF; }
.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: #FFFFFF; }
.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); }
.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-bar-dim); }
.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-line-strong);
  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: #FFFFFF; }
.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: 0 18px 40px rgba(21, 26, 29, .3); }
.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-warn-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: 600; line-height: 1; letter-spacing: -.01em; 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); font-size: var(--ck-fs-14); font-weight: 600; }
.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: #E4F1E8; border-color: #E4F1E8; 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: #FFFFFF;
  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: #151A1D;
}
.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; }
.ck-pres-titel { font-family: var(--ck-num); font-size: var(--ck-fs-20); font-weight: 700; letter-spacing: .01em; color: #FFFFFF; white-space: nowrap; }
.ck-pres-scope { font-family: var(--ck-num); font-size: var(--ck-fs-20); font-weight: 600; color: var(--ck-filter); white-space: nowrap; }
.ck-pres-sub { font-size: var(--ck-fs-14); color: var(--ck-bar-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ck-pres-teller { font-size: var(--ck-fs-13); color: var(--ck-bar-dim); white-space: nowrap; }
.ck-pres-hint { font-size: var(--ck-fs-13); color: var(--ck-bar-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-bar-line);
  border-bottom-width: 2px;
  border-radius: var(--ck-r);
  background: transparent;
  color: var(--ck-bar-ink-2);
  font-family: var(--ck-font);
  font-size: var(--ck-fs-12);
  font-weight: 600;
  cursor: pointer;
}
.ck-toets:hover { background: var(--ck-bar-raised); }
.ck-presentatie :focus-visible { outline-color: var(--ck-bar-ink-2); }
.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: #FFFFFF; }
  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; }