/* cockpit-blokken.css — opmaak van de negen v2.0-blokken (docs/COCKPIT_V2.md
   §4: Dekkingsgraad, Omzet per soort, Facturatieachterstand, Afgewerkt,
   Uurtarief, Loonkosten totaal, Signalen open, Urenlek, Externe klanten) naar
   het ontwerp Cockpit MT-overleg en Urenlek en klanten. Bouwt op de tokens
   van cockpit.css (.ck): kleuren --ck-*, lettergroottes --ck-fs-*, afstanden
   via de ruimteschaal. De vier extra lettergroottes van de grote getallen en
   de kleine tussenruimtes van het ontwerp staan hier als eigen tokens op .ck;
   geometrie (hoogtes, breedtes, paddings) blijft in pixels. Alles begint met
   .ckb-; de ratel in tests/css-schaal.test.mjs bewaakt dit bestand (plafond 0). */

/* De kerncijfers in Saira krijgen een regelvak dat om de tekens past. Saira
   heeft een hoog lettervak (boven 1,135 em, onder 0,439 em): bij regelhoogte 1
   steekt het vak van een getal van 38 of 40 px ruim 11 px boven en onder zijn
   regel uit en valt het over het label erboven en de veranderingsregel eronder
   (Dekking, Signalen), ook in het ontwerp zelf, dat hetzelfde lettertype en
   dezelfde regelhoogte 1 en 4 px tussenruimte gebruikt. Deze kopie van het
   lettertype meet boven 0,916 em en onder 0,22 em: het verschil (0,696 em)
   is gelijk, dus de basislijn en de plek van elk teken blijven precies als in
   het ontwerp, en het vak omsluit nog elk teken (cijfers 0,70 em, een d of k
   0,75 em, een p of g 0,20 em onder de lijn). */
@font-face {
  font-family: 'Saira Cijfers';
  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;
  ascent-override: 91.6%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Saira Cijfers';
  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;
  ascent-override: 91.6%;
  descent-override: 22%;
  line-gap-override: 0%;
}

.ck {
  --ckb-fs-26: 26px;
  --ckb-fs-30: 30px;
  --ckb-fs-38: 38px;
  --ckb-fs-40: 40px;
  --ckb-g-3: calc(var(--space-1) * .75);
  --ckb-g-7: calc(var(--space-1) * 1.75);
  --ckb-r-2: 2px;
}

/* ── de omlijsting binnen het blok ─────────────────────────────────────── */
.ckb { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; min-height: 0; min-width: 0; }
.ckb-omzet { gap: var(--ckb-g-3); }
.ckb-urenlek { gap: var(--ck-g-10); }
.ckb-kolommen { display: flex; align-items: stretch; gap: var(--space-3); flex: 1 1 auto; min-height: 0; min-width: 0; }
.ckb-scheiding { width: 1px; background: var(--ck-line); flex-shrink: 0; }
.ckb-kop-klein { font-size: var(--ck-fs-125); font-weight: 600; color: var(--ck-ink); }
.ckb-noot { font-size: var(--ck-fs-12); line-height: 1.35; color: var(--ck-ink-dim); }
.ckb-noot b { font-weight: 600; color: var(--ck-ink-2); }
/* een notitie groeit mee met de tekst: in een smalle kolom (facturatie, doorlooptijd) staat ze onder de kop, niet erover */
.ckb .ck-notitie { margin: 0; height: auto; min-height: 32px; padding: 6px 10px; flex-shrink: 0; }
.ckb .ck-noot { flex-shrink: 0; }
.ckb-link { display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; margin-top: auto; font-size: var(--ck-fs-125); font-weight: 600; color: var(--ck-ink); text-decoration: none; }
.ckb-link:hover { color: var(--ck-ink); text-decoration: underline; }

/* ── kerncijfers ───────────────────────────────────────────────────────── */
.ckb-kpi { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
/* Kerncijfers naast elkaar (Klanten, Storingen, Omzet extern op kwart
   breedte): gelijke kolommen, en elk kerncijfer is een subgrid over de regels
   van de rij (label, getal, verandering of toelichting). Breekt één label over
   twee regels (Top 3, aandeel omzet), dan staan de getallen en veranderingen
   van de buren toch op één hoogte; een toelichting onder één getal (dagen bij
   Stilstand) duwt de getallen van de buren niet omlaag. Een kerncijfer zonder
   derde regel (zonder vergelijken) beslaat er twee: geen lege regel onderaan. */
.ckb-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-1) var(--ck-g-18); flex-shrink: 0; }
.ckb-kpis > .ckb-kpi { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-1); }
.ckb-kpis > .ckb-kpi:not(:has(> :nth-child(3))) { grid-row: span 2; }
.ckb-kpi-label { font-size: var(--ck-fs-12); font-weight: 500; color: var(--ck-ink-2); }
.ckb-kpi-regel { display: flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; }
/* een regel met label, getal en verandering: past hij niet (kwart of halve
   breedte, een langere verandering dan in het ontwerp), dan gaat het volgende
   deel naar de volgende regel in plaats van over de buurkolom of buiten het blok */
.ckb-kpi-inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); white-space: nowrap; }
.ckb-kpi-inline .ckb-kpi-label { font-size: var(--ck-fs-12); white-space: nowrap; }
.ckb-kpi-groot { gap: var(--space-1) var(--ck-g-10); flex-wrap: wrap; }
.ckb-kpi.is-neg .ckb-num { color: var(--ck-neg); }
.ckb-num { font-family: 'Saira Cijfers', var(--ck-num); font-weight: 600; line-height: 1; color: var(--ck-ink); white-space: nowrap; }
.ckb-num-18 { font-size: var(--ck-fs-18); }
.ckb-num-20 { font-size: var(--ck-fs-20); }
.ckb-num-24 { font-size: var(--ck-fs-24); letter-spacing: -.01em; }
.ckb-num-26 { font-size: var(--ckb-fs-26); letter-spacing: -.01em; }
.ckb-num-30 { font-size: var(--ckb-fs-30); letter-spacing: -.01em; }
.ckb-num-38 { font-size: var(--ckb-fs-38); letter-spacing: -.01em; }
.ckb-num-40 { font-size: var(--ckb-fs-40); }
.ckb-naast { font-size: var(--ck-fs-13); color: var(--ck-ink-2); }
.ckb-omzet .ckb-naast { font-size: var(--ck-fs-12); color: var(--ck-ink-dim); }
/* Omzet extern naast elkaar (halve en volle breedte): drie gelijke kolommen
   zolang de marge met "45,0 % van omzet" op één regel in een derde past (het
   ontwerp); past dat niet (halve breedte naast het zijmenu), dan houdt de marge
   zijn regel en delen omzet en kosten de rest, elk minstens zo breed als hun
   eigen getal en verandering. Past zelfs dat niet (grote bedragen in een smal
   venster), dan gaat de marge naar een eigen regel: nooit horizontaal schuiven
   en nooit over de buurkolom. Op kwart breedte (twee per regel) breekt
   "van omzet" onder het getal. */
.ckb-omzet:not(.is-smal) .ckb-kpis { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ck-g-18); }
.ckb-omzet:not(.is-smal) .ckb-kpis > .ckb-kpi { display: flex; flex: 1 1 0; min-width: auto; }
.ckb-omzet:not(.is-smal) .ckb-kpis > .ckb-kpi:last-child { min-width: max-content; }
.ckb-omzet.is-smal .ckb-kpi-regel { flex-wrap: wrap; row-gap: var(--ck-g-2); }
/* past bedrag en procent niet naast elkaar (kwart breedte, jaarbedragen), dan
   gaat het procent naar een tweede regel in plaats van over de buurkolom */
.ckb-delta { display: flex; min-width: 0; }
.ckb-delta .ck-delta { gap: var(--ckb-g-7); flex-wrap: wrap; row-gap: var(--ck-g-2); font-size: var(--ck-fs-12); font-weight: 500; }
.ck .ck-delta.is-neutraal { color: var(--ck-ink-dim); }

/* ── legenda, grafiek en tooltip ───────────────────────────────────────── */
/* de legenda staat rechts; past hij niet op één regel (kwart breedte), dan
   breekt hij naar een tweede regel in plaats van links buiten het blok te lopen */
.ckb-legenda { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-1) var(--ck-g-14); min-height: 18px; flex-shrink: 0; font-size: var(--ck-fs-12); color: var(--ck-ink-2); }
.ckb-legenda > span { display: inline-flex; align-items: center; gap: var(--ck-g-6); white-space: nowrap; }
.ckb-vak { display: inline-block; width: 10px; height: 10px; border-radius: var(--ckb-r-2); }
.ckb-tip-lijn { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--ck-ink); }
.ckb-tip-lijn.is-stippel { border-top-style: dashed; }
.ckb-grafiek-kolom { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }
.ckb-grafiek { position: relative; flex: 1 1 auto; min-height: 96px; min-width: 0; }
.ckb-grafiek svg { display: block; max-width: 100%; }
.ckb-gr-rooster { stroke: var(--ck-grafiek-spoor); stroke-width: 1; }
.ckb-gr-basis { stroke: var(--ck-line-strong); stroke-width: 1; }
.ckb-gr-as { font-family: var(--ck-font); font-size: var(--ck-fs-11); fill: var(--ck-ink-dim); }
.ckb-gr-as.is-huidig { font-weight: 600; fill: var(--ck-ink); }
.ckb-tip {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--ckb-g-3);
  padding: 7px 9px;
  border-radius: var(--ck-r);
  background: var(--ck-ink);
  color: #FFFFFF;
  font-size: var(--ck-fs-115);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.ckb-tip[hidden] { display: none; }
.ckb-tip b { font-weight: 600; }
.ckb-tip span { display: inline-flex; align-items: center; gap: var(--ck-g-6); }
.ckb-tip .ckb-tip-lijn { width: 12px; }

/* ── balkjes ───────────────────────────────────────────────────────────── */
.ckb-balk { display: block; flex: 1 1 auto; height: 6px; min-width: 0; overflow: hidden; border-radius: var(--ckb-r-2); background: var(--ck-grafiek-spoor); }
.ckb-balk i { display: block; height: 100%; background: #5F7D8A; }
.ckb-balk-dun { height: 3px; }

/* ── tabellen in de blokken (rijen van 22 px, zonder verticale padding) ─── */
.ckb-tbl th { white-space: normal; }
.ckb-tbl th.ckb-th-m { text-align: center; }
.ckb-tbl td { height: 22px; padding: 0 6px; white-space: nowrap; }
.ckb-tbl .ckb-totaal td { font-weight: 600; }
.ckb-tbl .ckb-warn { color: var(--ck-warn-ink); font-weight: 600; }
.ckb-tbl .ckb-sterk { font-weight: 600; }
.ckb-tbl td.ckb-trend { text-align: center; }
.ckb-spark { display: inline-block; vertical-align: middle; }
.ckb-spark-ref { stroke: var(--ck-ink-dim); stroke-width: 1; stroke-dasharray: 3 2; }
.ckb-doorloop thead th { border-bottom-color: var(--ck-line); }
.ckb-doorloop .ckb-th-rij th { border-bottom-color: var(--ck-line-strong); }
.ckb .ck-scroll-x { flex-shrink: 0; }

/* ── 1. dekkingsgraad ──────────────────────────────────────────────────── */
/* De linkerkolom is 238 px en de grafiek staat er 16 px naast (ontwerp). De
   regel Dekking totaal mag, net als in het ontwerp, de tussenruimte naar de
   grafiek gebruiken, op 4 px na: hij telt voor de kolombreedte als 12 px
   smaller dan hij is en is hooguit kolom plus 12 px breed. Die 4 px zijn
   nodig omdat de aslabels van de grafiek al 2 px na de rand beginnen (rechts
   uitgelijnd op x = 28): zo blijft er minstens 6 px tussen de regel en een
   aslabel op dezelfde hoogte. Met de tekst van het ontwerp (246 px) is de
   kolom precies 238 px. Is de regel langer dan kolom plus 12 px (een
   langere verandering dan in het ontwerp), dan groeit de kolom mee zolang de
   grafiek ruimte heeft; anders breekt de regel. De noot telt niet mee voor de
   breedte: die breekt binnen de kolom. De 1 px extra ruimte vangt de afronding
   van Chromium op (de kolom kwam 6/64 px smaller uit dan de regel en dan brak
   die ook op volle breedte). */
.ckb-dekking:not(.is-smal) .ckb-kolommen { gap: var(--space-4); }
.ckb-dekking-links { display: flex; flex-direction: column; gap: var(--ck-g-10); flex: 0 1 auto; min-width: 238px; }
.ckb-dekking-totaal { display: flex; flex-direction: column; gap: var(--space-1); }
.ckb-dekking-totaal > .ckb-noot { contain: inline-size; }
.ckb-dekking-totaal > .ckb-kpi-inline { width: max-content; max-width: calc(100% + var(--space-3) + var(--ck-g-1)); margin-right: calc(var(--space-3) * -1); }
/* naast elkaar krijgt de grafiek de ruimte die de kerncijfers overlaten (geen
   basis uit de vorige tekening): zo blijft Dekking totaal op één regel zolang het kan */
.ckb-dekking:not(.is-smal) .ckb-grafiek-kolom { flex-basis: 0; }
/* de kerncijfers links houden hun hoogte: in een laag blok (1280, halve of kwart breedte) scrollt het blok in plaats van dat de noot over het resultaat schuift */
.ckb-dekking .ckb-kolommen { flex-shrink: 0; }
.ckb-resultaat { display: flex; flex-direction: column; gap: var(--ckb-g-3); flex-shrink: 0; padding-top: 7px; border-top: 1px solid var(--ck-line); }
.ckb-resultaat-regel { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--ck-g-10); }
.ckb-resultaat-regel .ck-tag { align-self: center; margin-left: auto; }
/* is de regel te krap (halve breedte bij 1280), dan breekt eerst het label
   "Resultaat werkplaats" over twee regels en blijft de tag ernaast; pas als
   ook dat niet past (kwart breedte, smal venster) gaat de tag naar een eigen regel */
.ckb-resultaat-regel > .ckb-kop-klein { flex-grow: 1; width: min-content; max-width: max-content; }
.ckb-resultaat-regel > .ck-grow { display: none; }
.ckb-formule { font-size: var(--ck-fs-12); line-height: 1.35; color: var(--ck-ink-dim); }

/* ── 3. facturatieachterstand ──────────────────────────────────────────── */
.ckb-facturatie-links { display: flex; flex-direction: column; gap: var(--ck-g-10); width: 48%; flex-shrink: 0; min-width: 0; }
.ckb-facturatie-rechts { display: flex; flex-direction: column; gap: var(--ck-g-6); flex: 1 1 auto; min-width: 0; }
/* het label "Achterstand extern, gereed en niet gefactureerd" mag de
   tussenruimte naar de scheiding gebruiken (tot 2 px ervoor) voordat hij
   breekt: zo staat hij op 1440 op één regel, zoals in het ontwerp, en breekt
   hij pas op 1366 en 1280, waar hij anders tegen de kop Doorlooptijd liep */
.ckb-facturatie:not(.is-smal) .ckb-facturatie-links > .ckb-kpi > .ckb-kpi-label { margin-right: calc(var(--ck-g-2) - var(--space-3)); }
.ckb-verdeling { display: flex; flex-direction: column; gap: var(--ck-g-6); }
.ckb-verdeel { display: flex; height: 10px; overflow: hidden; border-radius: var(--ckb-r-2); background: var(--ck-grafiek-spoor); }
.ckb-verdeel span { display: block; height: 100%; border-right: 2px solid var(--ck-panel); box-sizing: border-box; }
.ckb-verdeel span:last-child { border-right: 0; }
/* De vier ouderdomsvakken staan in twee paren. Passen alle vier naast elkaar
   (elk vak minstens zo breed als zijn bedrag en aantal), dan één regel van vier
   gelijke vakken, zoals het ontwerp; anders gaat het tweede paar naar de
   volgende regel: twee per regel, nooit drie plus één en nooit een bedrag
   over zijn buurvak (grote bedragen op halve breedte bij 1280). */
.ckb-ouderdom { display: flex; flex-wrap: wrap; gap: var(--ck-g-6); }
.ckb-ouderdom-paar { display: flex; flex: 1 1 0; gap: var(--ck-g-6); min-width: min-content; }
.ckb-ouderdom-cel { display: flex; flex-direction: column; flex: 1 1 0; gap: var(--ck-g-1); min-width: min-content; }
/* het label mag breken: op halve breedte naast het zijmenu lopen "15–30 dagen" en "> 30 dagen" anders in elkaar */
.ckb-ouderdom-label { font-size: var(--ck-fs-12); line-height: 1.2; color: var(--ck-ink-dim); }
.ckb-ouderdom-bedrag { font-size: var(--ck-fs-125); font-weight: 600; white-space: nowrap; }
.ckb-ouderdom-n { font-size: var(--ck-fs-12); color: var(--ck-ink-dim); white-space: nowrap; }
.ckb-regels { display: flex; flex-direction: column; gap: var(--ckb-g-3); }
.ckb-regel { display: flex; align-items: center; gap: var(--space-2); font-size: var(--ck-fs-125); }
.ckb-regel-label { color: var(--ck-ink-2); }
.ckb-regel-waarde { font-weight: 600; white-space: nowrap; text-align: right; }
.ckb-regel-dim { color: var(--ck-ink-2); }

/* ── 4. afgewerkt ──────────────────────────────────────────────────────── */
.ckb-afgewerkt-links { display: flex; flex-direction: column; gap: var(--ck-g-10); width: 232px; flex-shrink: 0; min-width: 0; }
.ckb-afgewerkt-rechts { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ckb-afgewerkt-lijst { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; }
.ckb-redenen { display: flex; flex-direction: column; gap: var(--space-1); }
.ckb-reden { display: flex; align-items: center; gap: var(--ck-g-6); }
.ckb-reden-label { width: 128px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--ck-fs-12); color: var(--ck-ink-2); white-space: nowrap; }
.ckb-reden-n { width: 14px; flex-shrink: 0; font-size: var(--ck-fs-12); font-weight: 600; text-align: right; }
.ckb-toelichtingen { display: flex; flex-direction: column; }
.ckb-toelichting { display: flex; align-items: center; gap: var(--space-2); height: 23px; border-bottom: 1px solid var(--ck-line); }
.ckb-toelichting-datum { width: 38px; flex-shrink: 0; font-size: var(--ck-fs-12); color: var(--ck-ink-dim); }
.ckb-toelichting-reden { width: 128px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--ck-fs-12); font-weight: 600; color: var(--ck-ink-2); white-space: nowrap; }
.ckb-toelichting-tekst { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--ck-fs-125); white-space: nowrap; }
.ckb-toelichting-door { flex-shrink: 0; max-width: 72px; overflow: hidden; text-overflow: ellipsis; font-size: var(--ck-fs-12); color: var(--ck-ink-dim); white-space: nowrap; }
/* In een smalle kolom (halve breedte bij 1280 tot 1440: 197 tot 277 px) past
   de toelichting niet naast datum, reden en naam: dan krijgt elke toelichting
   twee regels, bovenaan datum, reden en naam, eronder de tekst over de volle
   breedte, zodat hij leesbaar blijft in plaats van tot een paar letters af te
   kappen. De vijf toelichtingen van de rekenkern en de link naar de
   audit-trail passen dan nog in het blok, zoals in het ontwerp: vijf keer
   14 + 15 + 1 + 1 (regels, witruimte en lijn) is 155 px, met de kop (17), de
   link (17) en twee keer 4 px tussenruimte 197 px, binnen de 200 px van een
   blok van vier rijen hoog. */
.ckb-afgewerkt-rechts { container-type: inline-size; }
@container (max-width: 360px) {
  .ckb-afgewerkt-lijst { gap: var(--space-1); }
  .ckb-toelichting { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 var(--space-2); align-items: baseline; height: auto; padding-bottom: 1px; line-height: 14px; }
  .ckb-toelichting .ckb-toelichting-reden { width: auto; min-width: 0; }
  .ckb-toelichting .ckb-toelichting-tekst { grid-column: 1 / -1; grid-row: 2; line-height: 15px; }
}

/* ── 5. uurtarief ──────────────────────────────────────────────────────── */
.ckb-uurtarief-kop { display: flex; align-items: baseline; gap: var(--ck-g-18); flex-wrap: wrap; flex-shrink: 0; }
.ckb-uurtarief-kop .ckb-kpi-inline { gap: var(--ck-g-6); }
/* compact op halve breedte naast het zijmenu (inhoud 1140 px): smallere
   cellen, een smalle trendkolom en een groepsnaam die de ruimte opvangt en
   afkapt (max-width 0: de kolom krijgt wat de getallen overlaten) */
.ckb-uurtarief-tbl th { padding-left: 3px; padding-right: 3px; }
.ckb-uurtarief-tbl td { padding: 0 3px; }
.ckb-uurtarief-tbl td.ckb-naamcel { max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ckb-uurtarief-tbl td.ckb-trend { padding: 0 2px; }
.ckb-uurtarief-tbl col.ckb-col-trend { width: 40px; }
.ckb-uurtarief-tbl col.ckb-col-groep { width: 22%; }
/* past de tabel nog niet (smaller venster, gemeten in pasUurtariefAan): eerst
   een kleinere letter en celruimte, dan zonder trendkolom met de noot erbij */
.ckb-uurtarief.is-krap .ckb-uurtarief-tbl th { padding-left: 2px; padding-right: 2px; font-size: var(--ck-fs-11); }
.ckb-uurtarief.is-krap .ckb-uurtarief-tbl td { padding: 0 2px; font-size: var(--ck-fs-115); }
.ckb-uurtarief.is-krap .ck-kol-greep { right: 0; }
.ckb-uurtarief.is-zonder-trend .ckb-uurtarief-tbl th[data-kol="trend"],
.ckb-uurtarief.is-zonder-trend .ckb-uurtarief-tbl td.ckb-trend,
.ckb-uurtarief.is-zonder-trend .ckb-uurtarief-tbl col[data-kol="trend"] { display: none; }
.ckb-trend-noot { display: none; }
.ckb-uurtarief.is-zonder-trend .ckb-trend-noot { display: block; }

/* ── 6. loonkosten totaal ──────────────────────────────────────────────── */
.ckb-loon { gap: var(--space-2); }
.ckb-loon .ckb-kpi-groot { gap: var(--space-1) var(--ck-g-10); }

/* ── 7. signalen open ──────────────────────────────────────────────────── */
.ckb-signalen { gap: var(--space-3); }
.ckb-signalen-kop { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-1) var(--space-2); flex-shrink: 0; }
.ckb-signalen-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ck-g-2); font-size: var(--ck-fs-12); color: var(--ck-ink-2); white-space: nowrap; }
.ckb-typen { display: flex; flex-direction: column; gap: var(--ck-g-6); flex-shrink: 0; }
.ckb-type { display: flex; flex-direction: column; gap: var(--ckb-g-3); }
.ckb-type-regel { display: flex; align-items: center; gap: var(--space-2); font-size: var(--ck-fs-125); }
.ckb-type-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ckb-type-n { font-weight: 600; white-space: nowrap; }

/* ── 8. urenlek per plancode ───────────────────────────────────────────── */
.ckb-urenlek-kop { display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; flex-shrink: 0; }
.ckb-urenlek-links { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ckb-urenlek-sub { font-size: var(--ck-fs-125); color: var(--ck-ink-2); }
.ckb-tellers { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.ckb-urenlek-tabellen { gap: var(--ck-g-18); align-items: flex-start; }
.ckb-urenlek-tabel { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 0; min-width: 0; }
.ckb-tbl td.ckb-balkcel { width: 70px; padding: 0 6px; }
.ckb-balkcel .ckb-balk { display: block; width: 100%; }

/* ── 9. externe klanten ────────────────────────────────────────────────── */
.ckb-klanten-tbl { table-layout: fixed; }
/* de klantkolom houdt ruimte voor rang en naam: is het blok smaller, dan
   scrolt de tabel in zijn strook in plaats van dat de naam tot niets afkapt
   (en in een smal venster de kop Klant over Omzet valt). Halve en volle
   breedte: de vaste kolommen (84 + 116 + 84 + 72 = 356) plus 80 voor de naam
   = 436, zodat hij op halve breedte bij 1280 nog zonder scroll past, ook met
   een zichtbare vensterschuifbalk (454 min 17 = 437 px), en bij 1024 (326 px)
   scrolt; kwart breedte: 66 + 54 + 66 = 186 plus 94. */
.ckb-klanten-tbl { min-width: 436px; }
.ckb.is-smal .ckb-klanten-tbl { min-width: 280px; }
.ckb-col-bedrag { width: 84px; }
.ckb-col-aandeel { width: 116px; }
.ckb-col-pct { width: 72px; }
.ckb-tbl td.ckb-klant { max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ckb-rang { display: inline-block; width: 16px; margin-right: var(--space-2); color: var(--ck-ink-dim); text-align: right; }
.ckb-klant-naam { vertical-align: baseline; }
.ckb-klant .ck-tag { height: 18px; margin-left: var(--ck-g-6); }
.ckb-tbl td.ckb-aandeel { padding: 0 6px; }
.ckb-aandeel-in { display: flex; align-items: center; gap: var(--ck-g-6); }
.ckb-aandeel-pct { width: 42px; flex-shrink: 0; font-size: var(--ck-fs-12); color: var(--ck-ink-2); text-align: right; white-space: nowrap; }
.ckb-aandeel-pct.is-los { width: auto; text-align: left; }
.ckb-tbl .ckb-overige td { color: var(--ck-ink-2); }

/* ── de schakelaar in de kop (Extern/Intern, Op omzet/Op marge) ────────── */
.ck-blok-kop .ck-blok-kopextra:has(.ckb-seg) { margin-left: auto; }
/* de vulruimte na de kop zou de schakelaar links houden; het ontwerp zet hem rechts, naast de infoknop */
.ck-blok-kop:has(> .ck-blok-kopextra .ckb-seg) > .ck-grow { display: none; }
.ckb-seg { flex-shrink: 0; height: 26px; padding: 1px; gap: var(--ck-g-2); }
/* alleen een schakelaar in de kop: die krimpt niet, de titel wijkt (hij valt nooit over de infoknop of het menu) */
.ck-blok-kop .ck-blok-kopextra:has(> .ckb-seg:only-child) { flex-shrink: 0; }
/* op kwart breedte past de schakelaar niet in de kop: hij staat als eerste regel in het blok (segInKop) */
.ckb-seg-regel { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); flex-shrink: 0; }
.ckb-seg-regel .ckb-kop-tekst { margin-right: 0; white-space: normal; }
.ckb-seg .ck-seg-knop { height: 22px; padding: 0 9px; font-size: var(--ck-fs-12); }
.ck-blok.is-presentatie .ckb-seg .ck-seg-knop:hover { color: var(--ck-ink-2); }
.ck-blok.is-presentatie .ckb-seg .ck-seg-knop[aria-pressed="true"]:hover { color: #FFFFFF; }
.ck-blok.is-presentatie .ckb-link:hover { text-decoration: none; }

/* ── smal (3 kolommen): alles onder elkaar ─────────────────────────────── */
.ckb.is-smal .ckb-kolommen { flex-direction: column; }
.ckb.is-smal .ckb-scheiding { display: none; }
.ckb.is-smal .ckb-dekking-links, .ckb.is-smal .ckb-facturatie-links, .ckb.is-smal .ckb-afgewerkt-links { width: auto; }
.ckb.is-smal .ckb-dekking-links { min-width: 0; }
.ckb.is-smal .ckb-dekking-totaal > .ckb-kpi-inline { max-width: 100%; margin-right: 0; }
/* kwart breedte: twee kerncijfers per regel, een oneven laatste over de hele
   breedte, 18 px tussen de regels (4 tussenruimte en 14 marge boven: de
   tussenruimte van de rij is die van het subgrid, anders telt het verschil
   op in de hoogte) */
.ckb.is-smal { container-type: inline-size; }
.ckb.is-smal .ckb-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ckb.is-smal .ckb-kpis > .ckb-kpi:nth-child(n+3) { margin-top: var(--ck-g-14); }
.ckb.is-smal .ckb-kpis > .ckb-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ckb.is-smal .ckb-num-38 { font-size: var(--ckb-fs-30); }
/* kwart breedte: altijd twee per regel; passen zelfs twee niet, dan één */
.ckb.is-smal .ckb-ouderdom-paar { flex-basis: 100%; flex-wrap: wrap; }
.ckb.is-smal .ckb-urenlek-tabellen { flex-direction: column; align-items: stretch; }
.ckb.is-smal .ckb-tellers { align-items: flex-start; max-width: 100%; }
/* een teller die niet op één regel past (kwart breedte bij 1024) breekt binnen zijn tag */
.ckb.is-smal .ckb-tellers .ck-tag { height: auto; min-height: 20px; white-space: normal; }
.ckb.is-smal .ckb-col-bedrag { width: 66px; }
.ckb.is-smal .ckb-col-pct { width: 54px; }

/* ── smal venster (1024 naast het zijmenu): gemeten aan de ruimte zelf ─── */
/* de kerncijfers op kwart breedte (142 px): onder elkaar als twee naast elkaar
   smaller dan 81 px worden */
@container (max-width: 180px) {
  .ckb.is-smal .ckb-kpis { grid-template-columns: minmax(0, 1fr); }
  .ckb.is-smal .ckb-kpis > .ckb-kpi:nth-child(n+2) { margin-top: var(--ck-g-14); }
}
/* facturatieachterstand op halve breedte in een smal venster (kolom van 156
   px bij 1024): twee per regel, zoals op kwart breedte */
.ckb-facturatie-links { container-type: inline-size; }
@container (max-width: 200px) {
  .ckb-facturatie-links .ckb-ouderdom-paar { flex-basis: 100%; flex-wrap: wrap; }
}
/* kwart breedte bij 1024 (kolom van 142 px): "23 orders" onder het bedrag en
   de waarde onder zijn label, in plaats van rechts buiten het blok */
@container (max-width: 180px) {
  .ckb-facturatie-links .ckb-kpi-regel, .ckb-facturatie-links .ckb-regel { flex-wrap: wrap; row-gap: var(--ck-g-2); }
}
/* dekking op halve breedte bij 1024 (inhoud 326 px): naast de kolom van 238
   bleef er 72 px voor de grafiek over en die tekende verkleind; onder 440 px
   (238, 16 tussenruimte en een grafiek van minstens 186 px) staan kerncijfers
   en grafiek onder elkaar, zoals op kwart breedte */
.ckb-dekking { container-type: inline-size; }
@container (max-width: 440px) {
  .ckb-dekking:not(.is-smal) .ckb-kolommen { flex-direction: column; gap: var(--space-3); }
  .ckb-dekking:not(.is-smal) .ckb-dekking-links { min-width: 0; }
  .ckb-dekking:not(.is-smal) .ckb-dekking-totaal > .ckb-kpi-inline { max-width: 100%; margin-right: 0; }
  .ckb-dekking:not(.is-smal) .ckb-grafiek-kolom { flex-basis: auto; }
}
/* afgewerkt op halve breedte: de kolommen onder elkaar zodra de toelichtingen er niet meer naast passen */
.ckb-afgewerkt { container-type: inline-size; }
@container (max-width: 400px) {
  .ckb-afgewerkt .ckb-kolommen { flex-direction: column; }
  .ckb-afgewerkt .ckb-scheiding { display: none; }
  .ckb-afgewerkt .ckb-afgewerkt-links { width: auto; }
}

/* ── loonkosten monteurs (ontwerp 04): drieledige kop Uren, Loonkosten, Opbrengst ── */
.ckb-loonmonteurs { gap: var(--ck-g-10); }
.ckb-monteurs thead th { white-space: normal; hyphens: none; }
/* past de tabel niet in het blok (gemeten, pasInBreedte): de lange koppen breken
   op hun zachte afbreekstreepje en de cellen krijgen minder ruimte */
.ckb-loonmonteurs.is-krap .ckb-monteurs thead th { hyphens: manual; padding-left: 4px; padding-right: 4px; }
.ckb-loonmonteurs.is-krap .ckb-monteurs td { padding-left: 4px; padding-right: 4px; }
.ckb-monteurs .ckb-th-groep th { padding-bottom: 2px; color: var(--ck-ink); border-bottom-color: var(--ck-line); }
.ckb-monteurs th.ckb-th-start, .ckb-monteurs td.ckb-td-start { border-left: 1px solid var(--ck-line); }
.ckb-monteurs col.ckb-col-naam { width: 150px; }
.ckb-monteurs td.ck-groep-naam { white-space: normal; }
.ckb-monteurs td.ck-groep-naam .ck-groep-aantal { white-space: nowrap; }
.ckb-cel-delta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ck-g-1); }
.ckb-cel-delta .ck-delta { font-size: var(--ck-fs-11); font-weight: 500; }

/* per functiegroep, met de sluiting op het blok loonkosten totaal */
.ckb-fg { display: flex; flex-direction: column; gap: var(--space-1); flex-shrink: 0; }
.ckb-fg-kop { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.ckb-fg-tbl td.ckb-fg-regel { white-space: nowrap; }
.ckb-fg-tbl .ck-tag { margin-left: var(--space-1); }
.ckb-sluit { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; }
.ckb-sluit.is-ok { color: var(--ck-pos); }
.ckb-sluit.is-fout { color: var(--ck-warn-ink); }

/* ── capaciteit komende weken (ontwerp 04, [AFW-V.7]) ──────────────────── */
.ckb-kop-tekst { min-width: 0; margin-right: var(--space-2); overflow: hidden; font-size: var(--ck-fs-12); color: var(--ck-ink-dim); text-overflow: ellipsis; white-space: nowrap; }
/* toelichting en schakelaar in de kop (volle breedte): de toelichting kapt af, de schakelaar blijft heel */
.ck-blok-kop .ck-blok-kopextra:has(.ckb-kop-tekst) { display: flex; align-items: center; min-width: 0; }
.ckb-capaciteit { gap: var(--ck-g-10); }
.ckb-cap-links { flex: 1 1 auto; min-width: 0; }
.ckb-cap-rechts { display: flex; flex-direction: column; gap: var(--space-2); width: 32%; flex-shrink: 0; min-width: 0; }
/* weken houden op elke breedte hun maat (ook op volle breedte in de presentatie of een smal venster):
   automatische tabelopmaak, geen afbreken in koppen en cellen, de strook scrollt en de monteur blijft links */
.ckb-cap-tbl { table-layout: auto; }
.ckb-cap-tbl th { white-space: nowrap; }
.ckb-cap-tbl td.ckb-cap-cel { white-space: nowrap; }
.ckb-cap-tbl tr > :first-child:not([colspan]) { position: sticky; left: 0; z-index: 1; background: var(--ck-panel); }
.ckb-cap-tbl thead th:first-child { width: 140px; }
.ckb-cap-tbl th .ckb-cap-week { display: block; color: var(--ck-ink); }
.ckb-cap-tbl th .ckb-cap-datum { display: block; font-weight: 400; color: var(--ck-ink-dim); }
.ckb-cap-tbl td.ckb-cap-cel { height: 32px; line-height: 1.15; text-align: center; }
.ckb-cap-cel b { display: block; font-weight: 600; }
.ckb-cap-cel span { display: block; font-size: var(--ck-fs-11); color: var(--ck-ink-dim); }
.ckb-cap-tbl tr.ckb-cap-groep td { padding-top: 6px; font-weight: 600; color: var(--ck-ink-2); }
.ckb-tbl td.ckb-cap-naam { max-width: 140px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ckb.is-smal .ckb-cap-rechts { width: auto; }
/* de tabellen bepalen de hoogte: het blok scrollt, niets schuift over de notitie (ook niet onder elkaar op halve of kwart breedte) */
.ckb-capaciteit .ckb-kolommen { flex: none; }
/* halve en kwart breedte: een smallere naamkolom */
.ckb-capaciteit.is-smal .ckb-cap-tbl thead th:first-child { width: auto; }
.ckb-capaciteit.is-smal .ckb-tbl td.ckb-cap-naam { max-width: 112px; }

/* ── vloot en kwaliteit (ontwerp 10): het kader zonder cijfers ─────────── */
.ckb-kader { gap: var(--ck-g-10); }
.ckb-kader-links, .ckb-kader-rechts { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.ckb-lease .ckb-kader-links { flex: 0 0 34%; }
.ckb-lease.is-smal .ckb-kader-links { flex: 1 1 auto; }
/* onder elkaar (halve of kwart breedte) krijgt elk deel zijn eigen hoogte: het blok scrollt, de notitie staat eronder */
.ckb-kader .ckb-kolommen { flex: none; }
.ckb-kader.is-smal .ckb-kader-links, .ckb-kader.is-smal .ckb-kader-rechts { flex: none; }
.ckb-kader-tbl th { white-space: normal; }
.ckb-kaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); flex-shrink: 0; }
.ckb-kaart { min-width: 0; padding: 8px 10px; border: 1px solid var(--ck-line); border-radius: var(--ck-r); }
/* kwart breedte: twee kaarten naast elkaar (2 x 2, ook op een breed scherm),
   één per regel als ze dan smaller dan 96 px worden (1024 naast het zijmenu).
   De ondergrens van een kolom is de helft min de tussenruimte: zo passen er
   nooit drie (3 + 1 op 1680 en 1920). */
.ckb.is-smal .ckb-kaarten { grid-template-columns: repeat(auto-fit, minmax(max(96px, calc(50% - var(--space-2))), 1fr)); }
/* halve breedte in een smal venster (1024 naast het zijmenu: 326 px): vier
   kaarten van minder dan 96 px zijn te smal voor hun label (Terugkomers steekt
   uit zijn kaart), dan twee per regel */
.ckb-kader { container-type: inline-size; }
@container (max-width: 407px) {
  .ckb-kader .ckb-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── afdrukken (Pdf): de grafiek volgt de afdrukbreedte ────────────────── */
/* De grafieken tekenen op beforeprint en bij de wisseling naar print opnieuw
   op de maat van het vlak (cockpit-blokken-v2.js, onthoudGrafiek). Blijft
   een tekening breder dan het vlak, dan schaalt hij mee in plaats van af
   te kappen. */
@media print {
  html.ck-afdruk .ckb-grafiek svg, html.ck-afdruk .ck-grafiek svg { max-width: 100%; height: auto; }
}