/* ============================================================
   Richting A "Werkbank met labels" (besluit Max 26-09-2026)
   Bovenbalk met tekstlabels, contextbalk, kerncijfers als raster met
   bronlabel, fasebalkjes en de kaart "Waar de cijfers vandaan komen".
   Alleen bestaande tokens; licht en donker via de tokens.
   ============================================================ */

/* ---- bovenbalk: tekstlabels in plaats van alleen pictogrammen ---- */
.tb__navitem--lbl { position: relative; height: 29px; padding: 0 11px; gap: 0; border-radius: 9px; background: transparent; }
.tb__navitem--lbl > svg,
.tb__navitem--lbl .tb__navlock { display: none; }
.tb__navitem--lbl .tb__navlabel { position: static; transform: none; opacity: 1; background: none; color: inherit; padding: 0; border-radius: 0; box-shadow: none; pointer-events: none; transition: none; font-size: 13px; font-weight: 500; z-index: auto; }
.tb__navitem--lbl .tb__navlabel::before { display: none; }
.tb__navitem--lbl:hover { background: rgba(255,255,255,.06); color: #fff; }
.tb__navitem--lbl.is-on, .tb__navitem--lbl.is-on:hover { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.tb__navitem--lbl:focus-visible { outline: 2px solid #8BB1C8; outline-offset: 1px; }
/* menubalk even hoog als het zoekveld en de pictogrammen (meldpunt 28-09) */
.tb__nav:has(.tb__navitem--lbl) { gap: 2px; align-self: center; height: 35px; padding: 3px; box-sizing: border-box; align-items: center; border-radius: 999px; }
.tb__nav:has(.tb__navitem--lbl) .tb__navitem--lbl { border-radius: 999px; }
.tb:has(.tb__navitem--lbl) { gap: 14px; }
.tb:has(.tb__navitem--lbl) .tb__cmd { flex: 0 1 300px; max-width: 300px; }

/* verbonden: alleen een stip; de stand staat in de contextbalk */
.tb__live--stip { gap: 0; padding: 0 4px; }

/* zoekveld: lange plaatshouder vanaf 1600, daaronder het woord "Zoeken" (sneltoets in de titel) */
.tb__cmdkort { display: none; }
@media (max-width: 1599px) {
  .tb:has(.tb__navitem--lbl) .tb__cmd { flex: 0 0 auto; min-width: 0; }
  .tb:has(.tb__navitem--lbl) .tb__cmdtekst { display: none; }
  .tb:has(.tb__navitem--lbl) .tb__cmdkort { display: inline; }
  .tb:has(.tb__navitem--lbl) .tb__cmd kbd { display: none; }
}
@media (max-width: 1439px) {
  .tb__navitem--lbl { padding: 0 8px; }
  .tb__navitem--lbl .tb__navlabel { font-size: 12.5px; }
}
/* DESIGNSYSTEEM-26: ook smaller dan 1280 blijven de labels staan; wat niet past gaat onder "Meer" (shell.jsx) */
@media (max-width: 1279px) {
  .tb:has(.tb__navitem--lbl) { gap: 10px; }
  .tb:has(.tb__navitem--lbl) .tb__right { gap: 6px; }
  .tb__navitem--lbl { padding: 0 7px; }
}
.tb__nav .tb__navitem--weg { display: none; }
.tb__meer { position: relative; display: flex; align-self: stretch; }
.tb__meer--weg { position: absolute; visibility: hidden; pointer-events: none; }
.tb__meerknop.tb__navitem--lbl { gap: 4px; }
.tb__meerknop.tb__navitem--lbl > svg { display: block; opacity: .8; }
.tb__meerpanel { top: 100%; right: auto; left: 0; width: 220px; }
.tb__meerpanel .tb__usermenu-item.is-on { background: var(--bg-2); color: var(--text); }
.tb__meerpanel .tb__usermenu-item.is-on svg { color: var(--brand); }

/* ---- contextbalk onder de bovenbalk (algemene pagina's) ---- */
.ctxbar { display: flex; align-items: center; gap: 16px; height: 42px; flex-shrink: 0; padding: 0 clamp(20px, 3vw, 40px); background: var(--surface); border-bottom: 1px solid var(--line); font-size: 13px; }
.ctxbar__crumb { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-2); white-space: nowrap; }
.ctxbar__crumb i { font-style: normal; color: var(--text-3); }
.ctxbar__crumb b { font-weight: 500; color: var(--text); }
.ctxbar__r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.ctxbar__stand { display: inline-flex; align-items: center; gap: 7px; font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .05em; color: var(--text-2); white-space: nowrap; }
.ctxbar__stand i { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); flex-shrink: 0; }
.ctxbar__stand.is-storing { color: var(--neg); }
.ctxbar__stand.is-storing i { background: var(--neg); }
/* h21: op een smal scherm liepen kruimelpad en "Gegevens bijgewerkt" over elkaar.
   Nu mag de balk twee regels krijgen: het kruimelpad slaat om en de stand valt
   rechts op een eigen regel. Geen tekst wordt afgekapt. */
.ctxbar__crumb > span, .ctxbar__crumb > b { min-width: 0; overflow-wrap: anywhere; }

/* ---- kerncijfers als een raster met fijne lijnen + bronlabel ---- */
.kpi-strip--raster { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.kpi-strip--raster .kpi { border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; text-align: left; }
/* scheidingslijnen als rand (valt op hele pixels, een tussenruimte van 1px niet altijd) */
.kpi-strip--raster .kpi + .kpi { border-left: 1px solid var(--line); }
.kpi-strip--raster .kpi--clk:hover { transform: none; box-shadow: inset 0 -2px 0 var(--brand); border-top: 0; border-right: 0; border-bottom: 0; }
.kpi__bron { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-size: 11.5px; color: var(--text-2); }
.kpi__bron i { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); flex-shrink: 0; }
.kpi__bron--wacht i { background: var(--amber); }

/* ---- fasebalkjes per project ---- */
.wb-fasen { display: inline-flex; gap: 3px; margin-top: 6px; }
.pf-row__id > div { min-width: 0; }
.pf-row__id .wb-fasen { display: flex; }
.wb-fasen i { width: 13px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.wb-fasen i.is-klaar { background: var(--brand); }
.wb-fasen i.is-actief { background: color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: inset 0 0 0 1px var(--brand); }

/* ---- kaart: waar de cijfers vandaan komen ---- */
.wb-bronnen { display: flex; flex-direction: column; }
.wb-bron { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.wb-bron:first-child { border-top: 0; padding-top: 2px; }
.wb-bron__l { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wb-bron__l b { font-size: 13.5px; font-weight: 500; }
.wb-bron__l span { font-size: 12px; color: var(--text-2); }
.wb-bron__r { flex-shrink: 0; text-align: right; }
.wb-bron__onb { font-size: 11.5px; color: var(--text-3); }

/* ---- compacte balken bij scrollen (html.is-ingeklapt, gezet in werkbank.jsx) ---- */
.tb, .ctxbar, .pjbar { transition: height .18s ease, padding .18s ease; }
.tb__navitem--lbl { transition: height .18s ease; }
@media (prefers-reduced-motion: reduce) { .tb, .ctxbar, .pjbar, .tb__navitem--lbl { transition: none; } }

html.is-ingeklapt .tb { height: 46px; }
/* de menuknoppen staan in de pil van 35px (regel 18) en blijven dus 29px hoog;
   46px liet ze uit de pil steken en zette "Meer" een regel lager */
html.is-ingeklapt .ctxbar { height: 30px; font-size: 12px; }
html.is-ingeklapt .ctxbar__stand { font-size: 10.5px; }

/* projectbalk: een regel met projectnaam en fasen (acties, kenmerken en voorstel komen terug bovenaan) */
html.is-ingeklapt .pjbar { display: flex; align-items: center; gap: 18px; padding-top: 6px; padding-bottom: 6px; }
html.is-ingeklapt .pjbar__top,
html.is-ingeklapt .pjbar__meta,
html.is-ingeklapt .pjbar__tags,
html.is-ingeklapt .spine2__meta,
html.is-ingeklapt .pjbar .fasevs,
html.is-ingeklapt .phx__label { display: none; }
html.is-ingeklapt .pjbar__identity { margin: 0; flex: 0 1 auto; min-width: 0; }
html.is-ingeklapt .pjbar__title { padding: 3px 8px; max-width: 440px; min-width: 0; }
html.is-ingeklapt .pjbar__title b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.is-ingeklapt .spine2 { flex: 1; min-width: 0; padding: 0; }
html.is-ingeklapt .spine2__track { padding-bottom: 0; }
html.is-ingeklapt .phx { min-width: 30px; gap: 0; padding: 2px; }
html.is-ingeklapt .phx__node { width: 22px; height: 22px; }
html.is-ingeklapt .phx__node b { font-size: 10.5px; }
html.is-ingeklapt .phx__node em { font-size: 9px; }
html.is-ingeklapt .phx__node svg { width: 11px; height: 11px; }

/* menubalken in het scherm: compacter, en de eerste blijft bovenaan staan */
html.is-ingeklapt .bpl-tabs { padding-top: 8px; padding-bottom: 4px; }
html.is-ingeklapt .bpl-tabs + .bpl-tabs { top: 48px; padding-top: 4px; }
html.is-ingeklapt .bpl-tabs__inner,
html.is-ingeklapt .psub[data-wb-plak] { padding: 3px; border-radius: 12px; }
html.is-ingeklapt .bpl-tab,
html.is-ingeklapt .psub[data-wb-plak] .psub__tab { padding: 6px 12px; font-size: 12.5px; border-radius: 9px; }
.psub[data-wb-plak] { position: sticky; top: 8px; z-index: 11; }
.plh-tabs[data-wb-plak] { position: sticky; top: 0; z-index: 11; background: var(--bg); padding-top: 6px; }

/* ---- M6 werkruimte: tabbladen onder de bovenbalk (werkruimte.jsx) ---- */
.wr-tabs { display: flex; align-items: stretch; gap: 12px; height: 34px; flex-shrink: 0; padding: 0 clamp(20px, 3vw, 40px) 0 clamp(12px, 2vw, 28px); background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 12.5px; transition: height .18s ease; }
.wr-tabs__lijst { display: flex; align-items: stretch; min-width: 0; flex: 1; overflow: hidden; }
.wr-tab { position: relative; display: flex; align-items: center; min-width: 0; max-width: 230px; flex: 0 1 auto; border-right: 1px solid var(--line); color: var(--text-2); }
.wr-tab:first-child { border-left: 1px solid var(--line); }
.wr-tab__knop { display: flex; align-items: center; gap: 7px; min-width: 0; height: 100%; padding: 0 4px 0 12px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.wr-tab__knop em { font-style: normal; font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .03em; color: var(--text-3); flex-shrink: 0; }
.wr-tab__knop span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wr-tab__x { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; flex-shrink: 0; border: 0; border-radius: 5px; background: none; color: var(--text-3); cursor: pointer; opacity: 0; }
.wr-tab:hover { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); }
.wr-tab:hover .wr-tab__x, .wr-tab.is-on .wr-tab__x, .wr-tab__x:focus-visible { opacity: 1; }
.wr-tab__x:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.wr-tab.is-on { background: var(--surface); color: var(--text); box-shadow: inset 0 2px 0 var(--brand); }
.wr-tab.is-on .wr-tab__knop span { font-weight: 500; }
.wr-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--surface); }
.wr-tab--pagina .wr-tab__knop { padding-left: 12px; }
.wr-tab__knop:focus-visible, .wr-tabs__vast:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.wr-tabs__vast { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; background: none; border: 0; color: var(--text-3); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.wr-tabs__vast:hover { color: var(--text); }

/* ingeklapt: compacte rij */
html.is-ingeklapt .wr-tabs { height: 26px; font-size: 12px; }
html.is-ingeklapt .wr-tab__knop em { display: none; }
html.is-ingeklapt .wr-tab__x { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .wr-tabs { transition: none; } }
@media (max-width: 1279px) { .wr-tab { max-width: 170px; } .wr-tab__knop em { display: none; } }

/* h21: smalle ctxbar (staat onderaan zodat hij ook de ingeklapte stand overschrijft). */
@media (max-width: 600px) {
  .ctxbar, html.is-ingeklapt .ctxbar { height: auto; min-height: 42px; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; padding-top: 6px; padding-bottom: 6px; }
  html.is-ingeklapt .ctxbar { min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
  .ctxbar__crumb { flex: 1 1 auto; flex-wrap: wrap; white-space: normal; row-gap: 0; column-gap: 8px; }
  .ctxbar__r { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .ctxbar__stand { white-space: normal; }
}

/* ============================================================
   h22: telefoonbreedte (600 px en smaller) in de gedeelde schil.
   Bovenbalk: merkteken zonder tekst, alle menu's onder "Menu",
   zoeken als pictogramknop (opent het zoekvenster), Taken, Meldingen
   en de avatar blijven staan; Postbus, Agenda en Uitleg-modus staan
   dan in het menu onder de avatar (met de postbusteller op de avatar).
   Paginakop: de actieknoppen slaan om naar een eigen regel, de
   hoofdactie vooraan. Boven 600 px verandert er niets.
   ============================================================ */
.tb__badge--smal, .tb__usermenu-item--smal { display: none; }
.tb__usermenu-tel { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 9px; background: var(--signal); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
@media (max-width: 600px) {
  .tb { padding: 0 12px; }
  .tb:has(.tb__navitem--lbl) { gap: 8px; }
  .tb__left { gap: 6px; }
  .tb__brand { min-width: 32px; min-height: 32px; }
  .tb__brand > span { display: none; }
  .tb:has(.tb__navitem--lbl) .tb__cmd { flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; margin: 0 0 0 auto; padding: 0; justify-content: center; }
  .tb:has(.tb__navitem--lbl) .tb__cmd span,
  .tb:has(.tb__navitem--lbl) .tb__cmd kbd { display: none; }
  .tb:has(.tb__navitem--lbl) .tb__right { gap: 6px; }
  .tb__right > .tb__help, .tb__right > .tb__postbus, .tb__right > .agpop { display: none; }
  .tb__badge--smal { display: flex; pointer-events: none; }
  .tb__usermenu .tb__usermenu-item--smal { display: flex; }
  .tb__usermenu .tb__usermenu-sep.tb__usermenu-item--smal { display: block; }
  .tb__meerpanel { max-height: calc(100vh - 80px); overflow-y: auto; }

  /* paginakop: acties op een eigen regel, omslaan in plaats van buiten beeld */
  .dash-head > div:first-child { min-width: 0; max-width: 100%; }
  .dash-head .page-h1 { overflow-wrap: anywhere; }
  .dash-head__actions { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .dash-head__actions > .btn--brand { order: -1; }
  .dash-head__actions .btn { white-space: normal; }
}
@media (max-width: 600px) {
  /* dashboard: periodekeuze naast "Kerncijfers" slaat om */
  .dash-kpibar { flex-wrap: wrap; }
  .dash-period { max-width: 100%; overflow-x: auto; }
  /* Instellingen, Koppelingen: naam over de volle breedte, status en knoppen eronder (was "Ex..." afgekapt) */
  .kop-conn { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; align-items: start; }
  .kop-conn__main b { white-space: normal; overflow-wrap: anywhere; }
  .kop-conn > .kop-conn__status { display: inline-flex; grid-column: 2; white-space: normal; flex-wrap: wrap; }
  .kop-conn > .kop-conn__actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .kop-conn > .prs-mini { grid-column: 2; justify-self: start; }
}
@media (max-width: 600px) {
  /* meldingenpaneel: over de volle breedte onder de bovenbalk in plaats van links buiten beeld */
  .meld-panel, .meld-panel.pm { position: fixed; top: 68px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 80px); }
  html.is-ingeklapt .meld-panel, html.is-ingeklapt .meld-panel.pm { top: 52px; max-height: calc(100vh - 64px); }
  /* h26 (A1): 100dvh is de echt zichtbare hoogte (zonder adresbalk), zodat de voet met
     Alle meldingen altijd in beeld blijft; de lijst krimpt mee en scrolt zelf. */
  .meld-panel, .meld-panel.pm { max-height: calc(100dvh - 80px); }
  html.is-ingeklapt .meld-panel, html.is-ingeklapt .meld-panel.pm { max-height: calc(100dvh - 64px); }
  .meld .meld-panel.pm { width: auto; }
  .meld-panel .pm-kop, .meld-panel .pm-tabs, .meld-panel .pm-voet { flex: none; }
  .meld-panel .pm-lijst { flex: 1 1 auto; min-height: 0; max-height: none; }
  /* tikdoelen in het paneel minstens 40 px; "Alles gelezen" breekt niet over twee regels,
     de links schuiven zo nodig naar een eigen regel */
  .meld-panel .pm-kop { align-items: center; flex-wrap: wrap; row-gap: 0; padding: 8px 12px 6px 16px; }
  .meld-panel .pm-kop__tel { white-space: nowrap; }
  .meld-panel .pm-kop__links { gap: 2px; }
  .meld-panel .pm-link { min-height: 40px; padding: 0 8px; }
  .meld-panel .pm-tabs { overflow-x: auto; scrollbar-width: none; }
  .meld-panel .pm-tab { height: 40px; flex: none; }
  .meld-panel .pm-knop { height: 36px; min-width: 40px; }
  /* uitstellen en afhandelen: op een touchscherm is er geen hover, dus altijd zichtbaar */
  .meld-panel .pm-rij__snel { width: auto; opacity: 1; }
  .meld-panel .pm-snel { width: 36px; height: 36px; }
  .meld-panel .pm-voet { padding: 4px 12px 4px 16px; }
}
/* h22 ronde 2: brede inhoud op telefoonbreedte. Alles binnen max-width 600px, dus desktop ongewijzigd.
   .plat ervoor omdat later geladen bestanden (patronen, projectkop, inkoop, calc-direct, projectrail, live)
   dezelfde klassen zonder mediaquery zetten. Principe: omslaan waar het kan, een eigen horizontale
   scroller voor echte tabellen (net als .tbl--breed en de ingebedde calculatie), nooit stil afknippen. */
@media (max-width: 600px) {
  /* kaartkop met titel links en keuzes of knoppen rechts (uren, planning, gebruikers, werkkalender, vergelijking, dekking, mijlpalen) */
  .plat .mtx-head-bar { flex-wrap: wrap; row-gap: 10px; }
  .plat .mtx-head-bar > * { min-width: 0; max-width: 100%; }
  .plat .mtx-head-bar > div, .plat .mtx-head-bar > label, .plat .plh-tools { flex-wrap: wrap; }
  /* labels (Tag) zetten nowrap inline: hier mogen ze omslaan */
  .plat .mtx-head-bar > span { white-space: normal !important; height: auto; }
  .plat .mtx-head-bar .bib-field { min-width: 0; flex: 1 1 100%; }
  .plat .mtx-head-bar select, .plat .uws-kies select { min-width: 0; max-width: 100%; }
  .plat .card__head { flex-wrap: wrap; row-gap: 10px; }
  .plat .card__head > * { min-width: 0; max-width: 100%; }
  /* inkoop: filterchips en projectkeuze/zoeken slaan om */
  .plat .ikn-chips { flex-wrap: wrap; }
  .plat .ikn-balk > * { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .plat .ikn-balk input, .plat .ikn-balk select { min-width: 0; max-width: 100%; }
  /* segmentknoppen (bijv. Privacy): zelf opzij schuiven in plaats van buiten beeld */
  .plat .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .plat .seg__btn { flex: none; }
  /* voetnoot met pictogram: gewone tekst, het vetgedrukte woord valt niet meer buiten de kaart */
  .plat .set-foot { display: block; }
  .plat .set-foot > svg { display: inline-block; vertical-align: -2px; margin-right: 6px; }
  /* Beheer en Templates: balk met knop slaat om */
  .plat .bhr-statusbar, .plat .tpl-bar, .plat .gate-banner, .plat .exp-actions, .plat .exp-actions__r { flex-wrap: wrap; }
  .plat .gate-banner .btn, .plat .tpl-bar .btn { white-space: normal; }
  /* calculatie: kopcijfers en knoppen slaan om */
  .plat .calc-bar__stats, .plat .calc-bar__actions { flex-wrap: wrap; row-gap: 8px; column-gap: 16px; min-width: 0; max-width: 100%; }
  /* h106: een chip die omslaat groeit mee (geen vaste 24px), anders valt de tweede regel over de toelichting eronder */
  .plat .calc-vbar__regime { white-space: normal; min-width: 0; max-width: 100%; flex-wrap: wrap; height: auto; min-height: 24px; padding-top: 3px; padding-bottom: 3px; line-height: 1.3; border-radius: 12px; }
  .plat .calc-vbar__acties { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  /* intake: rail en vragen onder elkaar binnen de breedte */
  .plat .intk-grid { grid-template-columns: minmax(0, 1fr); }
  .plat .intk-grid > * { min-width: 0; }
  .plat .intk-nav { flex-wrap: wrap; row-gap: 10px; }

  /* echte tabellen: eigen horizontale scroller, kolommen blijven onder elkaar uitgelijnd */
  .plat .tbl { overflow-x: auto; --tbl-kop-top: 0px; }
  .plat .reg.reg--breed { overflow-x: auto; }
  .plat .reg.reg--breed > .reg__head, .plat .reg.reg--breed > .reg__row { min-width: 640px; }
  .plat .reg.reg--breed > .cf-prow { min-width: 780px; }
  .plat .reg.reg--breed > .reg__head[style*="220px"], .plat .reg.reg--breed > .reg__row[style*="220px"] { min-width: max-content; }
  /* brede registers (.reg--breed, .reg--kaart) en tabellen (.tbl--breed, .tbl--kaart) worden een kaart per regel: zie blok h48 onderaan */
  .plat .tpl-list { overflow-x: auto; }
  .plat .tpl-list > .tpl-row { min-width: 520px; }
  .plat .calc-screen:not(.calc-screen--ingebed) .calc-table { overflow-x: auto; }
  .plat .calc-screen:not(.calc-screen--ingebed) .calc-head, .plat .calc-screen:not(.calc-screen--ingebed) .calc-row, .plat .calc-screen:not(.calc-screen--ingebed) .calc-chapter { min-width: 1180px; }
  /* planning in uitvoering: takenkolom smaller, tijdbalk krijgt ruimte */
  .plat .gantt2 { grid-template-columns: minmax(0, 46%) minmax(0, 1fr) !important; }
  .plat .gantt2__resizer { display: none; }
  /* taken: geen kolomkop, taaknaam over de volle breedte, status, eigenaar, deadline en prio eronder */
  .plat .tk-head { display: none; }
  .plat .tk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .plat .tk-row > :first-child { flex: 1 1 100%; min-width: 0; }

  /* tikdoelen van de gedeelde kop en rail minstens 32 px */
  .plat .wr-tab__x { width: 32px; height: 32px; margin-right: 0; }
  .plat .pjk-knop { height: 32px; }
  .plat .live-knop, .plat .prail__klap { min-width: 32px; min-height: 32px; }
  .plat .pjbar__title { min-height: 32px; }
  .plat .main__scroll .btn, .plat .prs-mini, .plat .seg__btn, .plat .dash-period__btn { min-height: 32px; }

  /* F30 HR-profiel: label boven de waarde, geboortedatum en uurtarief breken niet meer per woord */
  .plat .prs-kvgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .plat .prs-kv { flex-direction: column; justify-content: flex-start; gap: 2px; min-width: 0; }
  .plat .prs-kv b { text-align: left; }
  /* M3 meer- en minderwerk, Eigen regel: kostensoort over de volle breedte, knop eronder */
  .plat .mws-eigen__kies { flex-wrap: wrap; }
  .plat .mws-eigen__kies > select { flex: 1 1 100% !important; min-width: 0; }
  /* HR: medewerkerslijst en loonkostentabel scrollen zelf opzij, formulierregels onder elkaar, kopknoppen slaan om */
  .plat .np-row { grid-template-columns: minmax(0, 1fr); }
  .plat .np-row > * { min-width: 0; }
  .plat .np-row select, .plat .np-row input { max-width: 100%; }
  .plat .uws-hrkop { flex-wrap: wrap; }
  .plat .uws-hrkop .btn { white-space: normal; }
}
/* h26 (A2): tikdoelen op de telefoon minstens 32 px hoog en breed. Meting met
   M_DETAIL=1 node e2e/mobiel-375.mjs liet 29 tot 31 px zien bij chips, keuzelijsten,
   tekstknoppen en rolkeuzes en 20 tot 28 px bij pictogramknoppen. min-height en min-width
   laten een vaste height of width van het onderdeel zelf gewoon groeien. Uitgezonderd:
   schakelaars (.set-toggle), kleurstippen (.set-matdot) en vinkjes, die hebben een eigen
   vorm en een groter klikvlak via hun label of rij. */
@media (max-width: 600px) {
  .plat :is(button, select, [role="button"], [role="tab"], input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"])):not(.set-toggle):not(.set-matdot):not(.cds-vink):not(.pm-sr) { min-height: 32px; }
  /* pictogramknoppen ook 32 px breed; alleen deze, want een algemene min-width vervangt de
     min-width:auto van flexitems en liet de tabrij van Instellingen in elkaar schuiven */
  .plat :is(.np-cdel, .calc-chaptoggle, .gb-actbtn, .tk-exp, .tk-assignbtn, .tk-group__chev, .inr-dismiss, .ag-navbtn, .ag-cal__nav, .ag-sync__btn, .cds-fmtknop, .uren-week > button, .seg__btn, .cds-wissel button) { min-width: 32px; }
  .plat .tk-group__chev { min-height: 32px; }
  /* tekstknoppen in een zin: de extra hoogte komt als verticale ruimte, niet als verschoven tekst */
  .plat .link-btn { display: inline-flex; align-items: center; }
}
/* h37: bediening met een duim op de telefoon. Hoofdacties (knoppen in de paginakop, de
   primaire knop in een kaartkop, knoppen in de voet van een venster en tabs) 44 px hoog.
   Kleine vormen (schakelaar, kleurstip) houden hun uiterlijk en krijgen een groter tikvlak
   met een ::before eroverheen. !important is nodig tegen de hoge specificiteit van de
   algemene regel van h26 hierboven. Alleen onder 600 px; de desktop blijft gelijk. */
@media (max-width: 600px) {
  .plat :is(.dash-head__actions, .cds-kop__acties, .kd-head__actions) :is(button, a.btn, [role="button"]):not(.pm-sr) { min-height: 44px !important; }
  .plat .dash-head__actions .uren-week > button { min-width: 44px !important; }
  .plat :is(.card-head, .card__head, .mtx-head-bar) .btn--brand { min-height: 44px !important; }
  :is([role="dialog"], [aria-modal="true"], .bibmodal, .tk-newmodal, .pt-modal, .opl-drawer, .cds-modaal) :is([class*="__foot"], [class*="__voet"], [class*="-foot"], [class*="-voet"]) :is(button, a.btn):not(.pm-sr):not(.set-toggle):not(.cds-vink) { min-height: 44px !important; }
  .plat :is([role="tab"], .psub__tab, .bpl-tab):not(.wr-tabs *) { min-height: 44px !important; }
  /* schakelaar 36x20: tikvlak 36x34 */
  .plat .set-toggle::before { content: ''; position: absolute; inset: -7px 0; }
  /* kleurstip in de rechtenmatrix: de hele cel is het tikvlak ("klik een cel om te wisselen") */
  .plat .set-mat__cell:has(> .set-matdot--btn) { position: relative; }
  .plat .set-mat__cell > .set-matdot--btn::before { content: ''; position: absolute; inset: 0; }
}
/* h40: vensters en lades op de telefoon (375 px breed, 667 en 812 hoog). Gemeten met
   e2e/vensters-375.mjs. Een venster is elk direct kind van .cmd__overlay (behalve het
   zoekpalet, dat een eigen telefoonopmaak heeft) of van .cpop__overlay; een lade is .ikn-paneel, .opl-drawer,
   .ml-reader, .zp of .asst-eigen. Alleen onder 600 px; de desktop blijft gelijk.
   1. het venster vult de breedte en blijft binnen de hoogte van het scherm (8 px rand plus de
     veilige zone), de romp scrolt en de voet staat vast onderaan;
   2. een venster zonder romp scrolt als geheel en zijn voet blijft onderaan plakken;
   3. formulieren in twee of drie kolommen worden een kolom, velden en keuzelijsten krimpen mee
     (een lange keuze duwde het veld buiten het venster);
   4. een voet met veel knoppen of een lange toelichting slaat om in plaats van uit te lopen;
   5. scroll-padding onderaan: een veld dat in beeld schuift (focus, toetsenbord) komt boven
     de vaste voet of het plakkende invoerveld te staan.
   De zwevende knoppen gaan weg zolang een venster of lade open is (zwevende-knoppen.css). */
@media (max-width: 600px) {
  :is(.cmd__overlay:not(:has(.zkp)), .cpop__overlay, .cds-overlay, .crr-overlay) {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    align-items: flex-start !important;
  }
  :is(.cmd__overlay:not(:has(.zkp)), .cpop__overlay, .cds-overlay, .crr-overlay) > * {
    box-sizing: border-box;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    height: auto !important; max-height: 100% !important; margin: 0 !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
  }
  :is(.cmd__overlay:not(:has(.zkp)), .cpop__overlay, .cds-overlay, .crr-overlay) > * > * { flex-shrink: 0; min-width: 0; }
  :is(.cmd__overlay:not(:has(.zkp)), .cpop__overlay, .cds-overlay, .crr-overlay) > * > :is([class*="__body"], [class*="-body"], [class*="__romp"]) {
    flex: 1 1 auto; min-height: 0; overflow-y: auto !important; overscroll-behavior: contain; scroll-padding-bottom: 88px;
  }
  /* venster zonder romp: het venster zelf scrolt */
  :is(.cmd__overlay:not(:has(.zkp)), .cpop__overlay, .cds-overlay, .crr-overlay) > :not(:has(> :is([class*="__body"], [class*="-body"], [class*="__romp"]))) {
    display: block !important; overflow-y: auto !important; overscroll-behavior: contain; scroll-padding-bottom: 88px;
  }
  /* voet in de romp of in een venster dat als geheel scrolt: plakt onderaan */
  :is(.cmd__overlay:not(:has(.zkp)), .cpop__overlay, .cds-overlay, .crr-overlay) > * > * :is([class*="__foot"], [class*="__voet"], [class*="-foot"], [class*="-voet"]):last-child:has(button, .btn),
  :is(.cmd__overlay:not(:has(.zkp)), .cpop__overlay, .cds-overlay, .crr-overlay) > :not(:has(> :is([class*="__body"], [class*="-body"], [class*="__romp"]))) > :is([class*="__foot"], [class*="__voet"], [class*="-foot"], [class*="-voet"]):last-child {
    position: sticky; bottom: 0; z-index: 2; background: var(--surface);
  }
  /* voet slaat om; knoppen rechts, een toelichting krijgt een eigen regel */
  :is(.cmd__overlay, .cpop__overlay, .cds-overlay, .crr-overlay, .ikn-paneel, .opl-drawer, .ml-reader, .zp, .asst-eigen) :is([class*="__foot"], [class*="__voet"], [class*="-foot"], [class*="-voet"]):has(> button, > .btn, > div > button) { flex-wrap: wrap; row-gap: 8px; }
  /* formulieren een kolom; velden, keuzelijsten en datumvelden krimpen mee */
  :is(.cmd__overlay, .cpop__overlay, .cds-overlay, .crr-overlay) :is(.bib-row2, .bib-row3, .np-row, .np-row--3, .tm-fields),
  :is(.cmd__overlay, .cpop__overlay, .cds-overlay, .crr-overlay) :has(> .bib-field, > label > :is(input, select, textarea)) { grid-template-columns: minmax(0, 1fr) !important; }
  :is(.cmd__overlay, .cpop__overlay, .cds-overlay, .crr-overlay, .ikn-paneel, .opl-drawer, .ml-reader, .zp) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { min-width: 0; max-width: 100%; }
  :is(.cmd__overlay, .cpop__overlay, .cds-overlay, .crr-overlay, .ikn-paneel, .opl-drawer, .ml-reader, .zp) :is(.bib-field, label, .np-copy) { min-width: 0; }
  .cmd__overlay .np-copy { flex-wrap: wrap; }
  .cmd__overlay .np-copy > select { flex: 1 1 180px; }
  /* .cpop: de romp had een eigen maximale hoogte voor de desktop; hier bepaalt het venster die.
     De voet van MwsModaal heeft geen klasse: het laatste kind met knoppen slaat om. */
  .cpop__overlay .cpop__body { max-height: none !important; }
  .cpop > div:last-child:not(.cpop__body):has(> button, > .btn) { flex-wrap: wrap; row-gap: 8px; }
  /* knoppengroep in een voet (Download PDF, Sluiten, Bewerken) slaat ook om */
  :is(.cmd__overlay, .cpop__overlay, .cds-overlay, .crr-overlay) :is([class*="__foot"], [class*="__voet"]) > div:has(> button, > .btn) { flex-wrap: wrap; min-width: 0; row-gap: 8px; }
  /* CDE-documentviewer: blad en zijpaneel onder elkaar in plaats van naast elkaar (het
     paneel van 300 px liet het blad 30 px breed en duwde de viewerbalk links uit beeld);
     de viewerbalken slaan om. */
  .cdev__body { flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 8px; gap: 8px; }
  .cdev__body > .cdev__kaart { flex: none; width: 100% !important; min-width: 0; }
  .cdev__body > .cdev__kaart--blad { height: 72dvh; }
  .cdev__body > .cdev__paneel { min-height: 70dvh; }
  .cdev__vtb { flex-wrap: wrap; height: auto; min-height: 46px; padding: 6px 10px; row-gap: 4px; }
  .cdev__vtb .cdev__rechts { flex-wrap: wrap; min-width: 0; max-width: 100%; row-gap: 4px; }
  .cdev__zoekveld { width: 150px; }
  /* lades: volle breedte en hoogte van het scherm, voet boven de veilige zone */
  :is(.ikn-paneel, .opl-drawer, .ml-reader, .zp, .asst-eigen) { width: 100% !important; max-width: 100% !important; height: 100dvh; max-height: 100dvh; }
  :is(.ikn-paneel__body, .opl-drawer__body, .ml-reader__body) { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; scroll-padding-bottom: 88px; }
  :is(.ikn-paneel__foot, .ml-reader__foot, .zp__voet, .opl-drawer__foot) { flex-shrink: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* h43: de overige vensters op de telefoon, gemeten met het gerichte deel van
   e2e/vensters-375.mjs. De regels van h40 hierboven gelden nu ook voor de CDE-vensters
   (.cds-overlay: uploaden, nieuwe revisie, uitgeven, metadata, publiceren, e-mail bekijken),
   en de commentaarronde (.crr-overlay); de wizard (.wiz) en de dossiers
   (.dos) staan al in .cmd__overlay of .cpop__overlay. Hier wat die vensters nog extra nodig
   hebben, alleen onder 600 px:
   1. een raster met kolommen als secties (inline gridTemplateColumns, zoals Uitgeven) wordt
     een kolom;
   2. het sleepvlak van het uploadvenster slaat om: tekst naast het pictogram, knoppen eronder;
   3. een bestandsregel in het uploadvenster: naam over de hele breedte, map en type, discipline
     en revisie in twee kolommen eronder; de kolomkop vervalt;
   4. commentaarronde: deelnemers een kolom; de voet staat vast in de romp, dus meer
     scroll-padding zodat een veld bij open toetsenbord boven de voet komt;
   5. fasebalk van een kans slaat om in plaats van rechts buiten het venster te lopen;
   6. inrichtingswizard: werkmaatschappijen en nummerreeksen, die op de pagina zijwaarts
     scrollen, lopen in het venster onder elkaar (velden binnen de breedte). Sinds h48 geldt dat
     ook op de pagina Beheer en inrichting (.plat). */
@media (max-width: 600px) {
  :is(.cmd__overlay, .cpop__overlay, .cds-overlay, .crr-overlay) [style*="grid-template-columns"]:has(> section, > aside) { grid-template-columns: minmax(0, 1fr) !important; }
  /* een klikvlak (role=button) krijgt op de telefoon min-height 32px en kromp daardoor in een romp met veel regels */
  :is(.cmd__overlay, .cpop__overlay, .cds-overlay, .crr-overlay) > * > :is([class*="__body"], [class*="-body"], [class*="__romp"]) > [role="button"] { flex-shrink: 0; }
  .cds-overlay .cds-drop { flex-wrap: wrap; margin: 0 12px; }
  .cds-overlay .cds-drop > div { flex: 1 1 180px; min-width: 0; }
  .cds-overlay .cds-drop > .cds-knop { flex: 1 1 auto; justify-content: center; margin-left: 0 !important; }
  .cds-overlay .cds-uprijkop { display: none; }
  .cds-overlay .cds-uprij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 8px; padding: 11px 12px; }
  .cds-overlay .cds-uprij > .cds-uprij__naam { grid-column: 1 / 3; grid-row: 1; }
  .cds-overlay .cds-uprij > :nth-child(6) { grid-column: 3; grid-row: 1; }
  .cds-overlay .cds-uprij > :is(:nth-child(2), :nth-child(4)) { grid-column: 1; min-width: 0; }
  .cds-overlay .cds-uprij > :is(:nth-child(3), :nth-child(5)) { grid-column: 2; min-width: 0; }
  .cds-overlay .cds-uprij__extra { grid-template-columns: minmax(0, 1fr); }
  .crr-overlay .crr-deeln { grid-template-columns: minmax(0, 1fr); }
  .crr-overlay .crr-body { scroll-padding-bottom: 150px !important; }
  .crr-overlay .crr-voet > span { min-width: 0; flex-basis: 100%; }
  .cpop__overlay .dos__trail { flex-wrap: wrap; row-gap: 6px; overflow-x: visible; }
  .cpop__overlay .dos__trail > .dos-tline { flex: 0 0 12px; min-width: 12px; }
  :is(.cmd__overlay, .plat) .set-bvlist { overflow-x: visible; }
  :is(.cmd__overlay, .plat) .set-bvlist > .set-bvrow { min-width: 0; grid-template-columns: 46px minmax(0, 1fr) 34px 26px; gap: 4px 12px; padding: 12px 14px; }
  :is(.cmd__overlay, .plat) .set-bvrow > .set-bvchip { grid-row: 1 / 3; }
  :is(.cmd__overlay, .plat) .set-bvrow > .set-bvrow__main { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
  :is(.cmd__overlay, .plat) .set-bvrow > .set-bvkind { grid-column: 2; grid-row: 2; justify-self: start; }
  :is(.cmd__overlay, .plat) .set-bvrow > .set-bvcount { grid-column: 2; grid-row: 3; }
  :is(.cmd__overlay, .plat) .set-bvrow > :nth-child(5) { grid-column: 3; grid-row: 2; }
  :is(.cmd__overlay, .plat) .set-bvrow > :nth-child(6) { grid-column: 4; grid-row: 2; }
  :is(.cmd__overlay, .plat) .card:has(> .reeks-list) { overflow-x: visible; }
  :is(.cmd__overlay, .plat) .card:has(> .reeks-list) > .reeks-head, :is(.cmd__overlay, .plat) .reeks-list > .reeks-row { min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; padding-left: 14px; padding-right: 14px; }
  :is(.cmd__overlay, .plat) .reeks-head > :is(:nth-child(1), :nth-child(6), :nth-child(7)) { display: none; }
  :is(.cmd__overlay, .plat) .reeks-row > .reeks-lbl { grid-column: 1 / -1; }
  :is(.cmd__overlay, .plat) .reeks-row > .reeks-prev { grid-column: 1 / 3; }
  :is(.cmd__overlay, .plat) .reeks-row > .reeks-reserve { grid-column: 3 / -1; justify-self: end; }
  :is(.cmd__overlay, .plat) .reeks-in--pad { max-width: none; }
  /* planningvensters (Nieuwe taak): 30 px zijruimte van de desktop laat op de telefoon te weinig veld over */
  .cmd__overlay .taskmodal { padding-left: 16px !important; padding-right: 16px !important; }
  /* bevestigbalk (nummerreeksen, werkmaatschappijen): tekst loopt als gewone alinea, knop eronder */
  .bhr-confirmbar { flex-wrap: wrap; }
  .bhr-confirmbar p { display: block; min-width: 0; flex: 1 1 100%; }
  .bhr-confirmbar p svg { vertical-align: -2px; margin-right: 6px; }
}

/* h48 (E13): tabel als kaart op de telefoon. Brede tabellen en registers scrolden op 375 px in
   hun eigen houder opzij (Wachtrijen, Btw-tabel, financiele stand per project, HR, versies,
   projectfinancien, portaal). De helper in patronen.jsx zet de kolomkop als data-label op elke
   cel (houder data-ka, kop data-kk, regel data-kr, titelcel data-kt, cel over de volle breedte
   data-kb); hier wordt elke regel een kaart: de eerste cel als titel over de volle breedte,
   daaronder per cel het label boven de waarde, twee naast elkaar. Lange tekst en cellen zonder
   label (knoppen) krijgen de volle breedte. Een lege cel vervalt. Bewust horizontaal blijven de
   tijdbalken (Gantt, planning), het calculatieblad, de uittrekstaat, de urenweekstaat en de
   matrices (certificaten, vooruitblik): die dragen hun betekenis in de kolommen naast elkaar;
   een tabel kan zich met .tbl--scroll, .reg--scroll of data-kaart="nee" afmelden. */
@media (max-width: 600px) {
  .plat [data-ka] { overflow-x: visible !important; }
  .plat [data-kk], .plat [data-ka] > table > thead, .plat table[data-ka] > thead { display: none !important; }
  .plat [data-ka] > * { min-width: 0 !important; }
  .plat [data-ka] > table, .plat [data-ka] > table > :is(tbody, tfoot), .plat table[data-ka], .plat table[data-ka] > :is(tbody, tfoot) { display: block; width: 100% !important; min-width: 0 !important; }
  .plat [data-kr] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 16px; align-items: start; min-width: 0 !important; width: 100%; padding: 12px 16px; text-align: left; position: relative; }
  .plat tr[data-kr] { border-top: 1px solid var(--line); }
  .plat tbody > tr[data-kr]:first-child { border-top: 0; }
  .plat tr[data-kr].tbl__totaal { border-top-color: var(--line-strong); background: color-mix(in srgb, var(--bg-2) 40%, var(--surface)); }
  .plat [data-kr] > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal !important; text-align: left !important; justify-content: flex-start !important; }
  .plat [data-kr] > td { display: block; padding: 0 !important; border: 0 !important; }
  /* binnen een cel: tekst die op de desktop niet mocht afbreken en knoppenrijen slaan om */
  .plat [data-kr] > * [style*="nowrap"] { white-space: normal !important; }
  .plat [data-kr] > * :is(span, div)[style*="flex"] { flex-wrap: wrap; max-width: 100%; }
  .plat [data-kr] > :is([data-kt], [data-kb]) { grid-column: 1 / -1; }
  .plat [data-kr] > :empty { display: none !important; }
  .plat [data-kr] > [data-label]:not([data-label=""]):not([data-kt]) { flex-wrap: wrap; }
  .plat [data-kr] > [data-label]:not([data-label=""]):not([data-kt])::before { content: attr(data-label); display: block; flex: none; width: 100%; margin-bottom: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; line-height: 1.3; text-transform: uppercase; color: var(--text-3); }
  /* selectievakje links naast de kaart, de hele cel blijft klikbaar (h37) */
  .plat [data-kr]:has(> .tbl__kies) { padding-left: 52px; }
  .plat [data-kr] > .tbl__kies { position: absolute; left: 6px; top: 6px; width: 40px !important; height: 40px; display: flex !important; align-items: center; justify-content: center !important; }
  .plat [data-kr] > .tbl__acties > * { opacity: 1; }
  /* HR: een kolom die op middelbreedte verborgen is, hoort in de kaart er gewoon bij */
  .plat [data-kr].prs-row > span:nth-child(3) { display: block; }
  /* een losse link in een cel (zoals PDF bij facturen) krijgt een tikvlak van 32 px */
  .plat [data-kr] > [data-label] a:not(.btn) { display: inline-flex; align-items: center; min-height: 32px; min-width: 32px; }
}

/* h68 (bijvangst h67): op de telefoon lag de plakkende subtabbalk (bijvoorbeeld Financien:
   Overzicht, Budget, Termijnen) na een klein stukje scrollen over de knoppen van de paginakop
   (Termijnfactuur), want die staan daar direct onder de balk en het uitklappen gebeurt pas
   bovenaan. Het scherm is daar te kort voor een plakkende balk: op de telefoon scrolt hij
   gewoon mee. De compacte vorm blijft. */
@media (max-width: 600px) {
  .psub[data-wb-plak] { position: static; }
}