/* Dexx component styles. Loaded after tokens.css. Every value is a token; literal px only for hairlines and optical nudges. */

/* ---------- basis ---------- */
html { font-family: var(--font-ui); color: var(--text); background: var(--bg); font-size: 15px; line-height: 22px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-ui); background: var(--bg); color: var(--text); font-variant-numeric: tabular-nums; }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dx-mono, .dx-amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dx-muted { color: var(--text-3); }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --dur-flash: 0ms; }
  .dx-spin { animation: none !important; }
}

/* preview helpers (used by the component cards) */
.dx-demo { padding: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.dx-demo--col { flex-direction: column; align-items: stretch; }
.dx-demo--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); align-items: start; }
.dx-demo__cap { font-size: 13px; line-height: 18px; color: var(--text-3); margin: 0 0 var(--space-1); }

/* ---------- icoon ---------- */
.dx-icon { display: inline-block; flex: none; vertical-align: middle; }
.dx-spin { animation: dx-spin 900ms linear infinite; }
@keyframes dx-spin { to { transform: rotate(360deg); } }

/* ---------- knoppen ---------- */
.dx-btn { font: inherit; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.dx-btn--lg { height: var(--control-h-mobile); padding: 0 var(--space-5); font-size: 16px; }
.dx-btn--sm { height: var(--control-h-compact); padding: 0 var(--space-3); font-size: 13px; border-radius: var(--radius-sm); }
.dx-btn--block { display: flex; width: 100%; }
.dx-btn--primary { background: var(--primary); color: var(--on-primary); }
.dx-btn--primary:hover { background: var(--primary-hover); }
.dx-btn--primary:active { background: var(--primary-active); transform: translateY(1px); }
.dx-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.dx-btn--secondary:hover { background: var(--surface-2); }
.dx-btn--quiet { background: transparent; color: var(--primary); }
.dx-btn--quiet:hover { background: var(--hover-bg); }
.dx-btn--danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.dx-btn--danger:hover { background: var(--danger-bg); }
.dx-btn[disabled], .dx-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; transform: none; }
.dx-btn[aria-busy="true"] { opacity: 1; cursor: progress; }
.dx-iconbtn { padding: 0; width: var(--control-h); }
.dx-iconbtn.dx-btn--lg { width: var(--control-h-mobile); }
.dx-iconbtn.dx-btn--sm { width: var(--control-h-compact); }

/* ---------- velden ---------- */
.dx-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dx-field__label { font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .01em; color: var(--text-2); display: inline-flex; align-items: center; gap: var(--space-1); margin-bottom: 2px; }
.dx-field__opt { font-weight: 400; color: var(--text-3); }
.dx-field__help { font-size: 13px; line-height: 18px; color: var(--text-3); }
.dx-field__error { font-size: 13px; line-height: 18px; color: var(--danger); display: flex; gap: var(--space-1); align-items: flex-start; }
.dx-field__error .dx-icon { margin-top: 1px; }
.dx-dot-advice { width: 8px; height: 8px; border-radius: 50%; background: var(--follows-advice); display: inline-block; }
.dx-input { font: inherit; height: var(--control-h); width: 100%; padding: 0 var(--space-3); color: var(--text); background: var(--surface);
  border: 1px solid var(--line-control); border-radius: var(--radius); outline: none; transition: border-color var(--dur-fast) var(--ease); }
.dx-input::placeholder { color: var(--text-3); }
.dx-input:hover { border-color: var(--text-2); }
.dx-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; padding: 0 calc(var(--space-3) - 1px); }
.dx-input[readonly], .dx-input:disabled { background: var(--surface-2); color: var(--text-2); }
.dx-input--lg { height: var(--control-h-mobile); font-size: 16px; }
.dx-num { position: relative; display: flex; align-items: stretch; }
.dx-num .dx-input { font-family: var(--font-mono); text-align: right; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dx-num__unit { display: inline-flex; align-items: center; padding: 0 var(--space-3); font-family: var(--font-mono); font-size: 14px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line-control); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; white-space: nowrap; }
.dx-advice { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 13px; line-height: 18px; color: var(--text-3); min-height: var(--control-h-compact); }
.dx-lock { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 18px; color: var(--text-2); }

/* segmentknoppen */
.dx-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line-control); border-radius: var(--radius); }
.dx-seg__opt { font: inherit; font-size: 14px; font-weight: 500; height: calc(var(--control-h) - 8px); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease); }
.dx-seg__opt:hover { color: var(--text); background: var(--surface); }
/* v0.2.4: de gekozen optie is een keuze, geen actie: witte vulling, rand en tekst in de selectiekleur; alleen de primaire knop is gevuld */
.dx-seg__opt[aria-checked="true"] { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: inset 0 0 0 2px var(--selected-border); }
.dx-seg--lg .dx-seg__opt { height: calc(var(--control-h-mobile) - 8px); font-size: 16px; padding: 0 var(--space-4); }
/* v0.2.3: in een smal vak lopen de opties door naar een volgende regel in plaats van uit het vak */
.dx-seg--block { display: flex; flex-wrap: wrap; } .dx-seg--block .dx-seg__opt { flex: 1 1 auto; }

/* schakelaar */
.dx-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font: inherit; color: var(--text); background: none; border: 0; padding: 0; min-height: var(--tap-min); text-align: left; }
.dx-switch__track { width: 40px; height: 24px; border-radius: 12px; border: 1px solid var(--line-control); background: var(--surface-2); position: relative; flex: none; transition: background-color var(--dur) var(--ease); }
.dx-switch__thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: transform var(--dur) var(--ease); }
.dx-switch[aria-checked="true"] .dx-switch__track { background: var(--primary); border-color: var(--primary); }
.dx-switch[aria-checked="true"] .dx-switch__thumb { transform: translateX(16px); background: var(--on-primary); }
.dx-switch__state { font-size: 13px; color: var(--text-3); }

/* selectievakje */
.dx-check { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; min-height: var(--tap-min); position: relative; }
.dx-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dx-check__box { width: 20px; height: 20px; flex: none; border: 1.5px solid var(--line-control); border-radius: var(--radius-sm); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; color: var(--on-primary); transition: background-color var(--dur-fast) var(--ease); }
.dx-check input:checked + .dx-check__box { background: var(--primary); border-color: var(--primary); }
.dx-check input:focus-visible + .dx-check__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-check__text { display: flex; flex-direction: column; min-width: 0; }
.dx-check__meta { font-size: 13px; line-height: 18px; color: var(--text-3); }
.dx-check--task { min-height: var(--control-h-mobile); gap: var(--space-4); font-size: 16px; line-height: 24px; padding: var(--space-2) 0; }
.dx-check--task .dx-check__box { width: var(--check-task); height: var(--check-task); border-width: 2px; }
.dx-check--task input:checked ~ .dx-check__text .dx-check__label { color: var(--text-2); }

/* ---------- kiezer, command palette ---------- */
.dx-picker { position: relative; }
/* v0.2.5: wisknop in het veld en een lijst in de flow (voor een dialoog met overflow) */
.dx-picker__field.has-clear .dx-input { padding-right: 44px; }
.dx-picker__clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.dx-picker--inline .dx-picker__pop { position: static; margin-top: 4px; box-shadow: none; }
.dx-picker__field { position: relative; }
.dx-picker__field .dx-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.dx-picker__field .dx-input { padding-left: 38px; }
.dx-list { list-style: none; margin: 0; padding: var(--space-1); }
.dx-picker__pop { position: absolute; z-index: var(--z-popover); left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-float); max-height: 420px; overflow: auto; }
.dx-list__group { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--text-3); padding: var(--space-2) var(--space-3) var(--space-1); }
.dx-list__opt { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-h); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; }
.dx-list__opt[aria-selected="true"] { background: var(--selected-bg); }
.dx-list__opt .dx-icon { color: var(--text-2); }
.dx-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dx-list__title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-list__sub { font-size: 13px; line-height: 18px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-list__create { color: var(--primary); font-weight: 500; border-top: 1px solid var(--line); margin-top: var(--space-1); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.dx-list__create .dx-icon { color: var(--primary); }
.dx-list__empty { padding: var(--space-3); color: var(--text-2); font-size: 14px; }
.dx-mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--follows-advice); text-underline-offset: 2px; }
.dx-palette { width: 100%; max-width: 640px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); border: 1px solid var(--line); overflow: hidden; }
.dx-palette__search { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); height: 56px; border-bottom: 1px solid var(--line); }
.dx-palette__search input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; font-size: 17px; color: var(--text); height: 100%; }
.dx-palette__results { max-height: 380px; overflow: auto; }
.dx-palette__foot { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.dx-kbd { font-family: var(--font-mono); font-size: 12px; line-height: 18px; padding: 0 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--text-2); }

/* ---------- chips ---------- */
.dx-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--chip-h); padding: 0 var(--space-2); border-radius: var(--radius-sm);
  font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
.dx-chip--primary { background: var(--selected-bg); color: var(--primary); }
.dx-chip--success { background: var(--success-bg); color: var(--success); }
.dx-chip--warning { background: var(--warning-bg); color: var(--warning); }
.dx-chip--danger { background: var(--danger-bg); color: var(--danger); }
.dx-chip--info { background: var(--info-bg); color: var(--info); }
.dx-chip--outline { background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2); }
.dx-chip--unit { color: var(--on-label); }
.dx-chip__x { border: 0; background: none; padding: 0; margin-right: -2px; color: inherit; cursor: pointer; display: inline-flex; }
.dx-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--on-label); font-weight: 600; flex: none; font-size: 12px; }
.dx-avatars { display: inline-flex; } .dx-avatars .dx-avatar { box-shadow: 0 0 0 2px var(--surface); } .dx-avatars .dx-avatar + .dx-avatar { margin-left: -6px; }

/* ---------- kaarten, tabellen, tabs ---------- */
.dx-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); min-width: 0; }
.dx-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) 0; }
.dx-card__title { font-size: 17px; line-height: 24px; font-weight: 600; margin: 0; }
.dx-card__body { padding: var(--space-4); }
.dx-card--roomy .dx-card__head { padding: var(--space-5) var(--space-5) 0; } .dx-card--roomy .dx-card__body { padding: var(--space-5); }
.dx-card--flush .dx-card__body { padding: var(--space-3) 0 0; }

.dx-table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; container: dx-table / inline-size; min-width: 0; }
.dx-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.dx-table caption { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 600; }
.dx-table th { font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .01em; color: var(--text-2); background: var(--surface-2); text-align: left; padding: 0 var(--space-4); height: var(--row-h-compact); border-bottom: 1px solid var(--line); white-space: nowrap; }
.dx-table th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.dx-table td { padding: 0 var(--space-4); height: var(--row-h); border-bottom: 1px solid var(--line); vertical-align: middle; }
.dx-table tr:last-child td { border-bottom: 0; }
.dx-table--compact td { height: var(--row-h-compact); font-size: 14px; }
.dx-table .is-right { text-align: right; }
.dx-table .is-mono { font-family: var(--font-mono); font-size: 14px; }
.dx-table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.dx-table tbody tr.is-click { cursor: pointer; }
.dx-table tbody tr.is-click:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dx-table tbody tr:hover { background: var(--hover-bg); }
.dx-table tbody tr[aria-selected="true"] { background: var(--selected-bg); }
.dx-table tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--selected-border); }
.dx-table__more { display: flex; justify-content: center; padding: var(--space-2); border-top: 1px solid var(--line); }
/* v0.2.3: kaartweergave zodra de tabel zelf smaller is dan 680 px (ook naast een zijpaneel), niet pas op de telefoon */
@container dx-table (max-width: 679px) {
  .dx-table--cards thead { display: none; }
  .dx-table--cards, .dx-table--cards tbody, .dx-table--cards tr, .dx-table--cards td { display: block; width: 100%; }
  .dx-table--cards tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
  .dx-table--cards td { height: auto; padding: 2px 0; border: 0; display: flex; justify-content: space-between; gap: var(--space-3); text-align: right; }
  .dx-table--cards td::before { content: attr(data-label); color: var(--text-3); font-size: 13px; font-family: var(--font-ui); text-align: left; }
  .dx-table--cards td:first-child { font-weight: 600; font-size: 16px; } .dx-table--cards td:first-child::before { content: none; }
  .dx-table--cards tr[aria-selected="true"] td:first-child { box-shadow: none; }
  .dx-table--cards td:empty { display: none; }
  /* v0.2.4: kaarthints; titel met rechts status of bedrag, daaronder korte regels zonder label */
  .dx-table--hints tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 2px; align-items: baseline; }
  .dx-table--hints td { grid-column: 1 / -1; }
  .dx-table--hints td.dx-card-title { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 16px; justify-content: flex-start; text-align: left; }
  .dx-table--hints td.dx-card-aside { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .dx-table--hints td.dx-card-sub { font-size: 14px; color: var(--text-2); justify-content: flex-start; text-align: left; font-weight: 400; }
  .dx-table--hints td.dx-card-title::before, .dx-table--hints td.dx-card-aside::before, .dx-table--hints td.dx-card-sub::before { content: none; }
  .dx-table--hints td.dx-card-hide { display: none; }
  .dx-table.dx-table--hints td.dx-card-only { display: flex; font-size: 14px; color: var(--text-2); justify-content: flex-start; text-align: left; }
  .dx-table.dx-table--hints td.dx-card-only::before { content: none; }
  .dx-table.dx-table--hints td.dx-card-only:empty { display: none; } /* v0.2.5: lege kaartregel neemt geen ruimte */
}

.dx-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.dx-tab { font: inherit; font-weight: 500; color: var(--text-2); background: none; border: 0; padding: 0 var(--space-3); height: var(--tap-min); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.dx-tab:hover { color: var(--text); }
.dx-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); }
/* v0.2.4: rij die niet past vervaagt aan de kant waar nog tabbladen staan; op de telefoon compacter */
.dx-tabs[data-more="end"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.dx-tabs[data-more="start"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.dx-tabs[data-more="both"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
@media (max-width: 767px) { .dx-tab { padding: 0 var(--space-2); gap: 6px; } .dx-tabs { gap: 0; } }
.dx-tab__count { font-family: var(--font-mono); font-size: 12px; line-height: 18px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); }

/* v0.2.4: kolom alleen in de kaartweergave */
.dx-table th.dx-card-only, .dx-table td.dx-card-only { display: none; }
/* v0.2.4: groepen in de zijnavigatie */

.dx-topbar { height: var(--topbar-h); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-6); background: var(--surface); border-bottom: 1px solid var(--line); }
.dx-search-trigger { font: inherit; display: flex; align-items: center; gap: var(--space-2); height: var(--control-h); flex: 1; max-width: 480px; padding: 0 var(--space-3);
  border: 1px solid var(--line-control); border-radius: var(--radius); background: var(--bg); color: var(--text-3); cursor: text; text-align: left; }
.dx-search-trigger span.dx-grow { flex: 1; }
.dx-topbar__spacer { flex: 1; }
.dx-badge-wrap { position: relative; display: inline-flex; }
.dx-badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: var(--on-danger);
  font-family: var(--font-mono); font-size: 11px; line-height: 18px; text-align: center; font-weight: 500; pointer-events: none; }

.dx-banner { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: var(--space-2) var(--space-6); font-weight: 500; font-size: 14px; }
.dx-banner--support { background: var(--banner-support); color: var(--on-banner); }
.dx-banner--breakglass { background: var(--danger); color: var(--on-danger); }
.dx-banner__grow { flex: 1; }
.dx-banner .dx-btn { height: var(--control-h-compact); background: transparent; border-color: currentColor; color: inherit; }

.dx-tabbar { display: flex; height: var(--tabbar-h); background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.dx-tabbar__tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--text-2); background: none; border: 0; cursor: pointer; position: relative; min-height: var(--tap-min); }
.dx-tabbar__tab[aria-current="page"] { color: var(--primary); }
.dx-tabbar__tab[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); }
.dx-tabbar__tab .dx-badge { top: 4px; right: calc(50% - 22px); }

/* ---------- overlays ---------- */
.dx-scrim { position: fixed; inset: 0; z-index: var(--z-dialog); background: rgba(16, 39, 31, .45); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.dx-scrim--inline { position: relative; inset: auto; min-height: 100%; }
.dx-scrim--sheet { align-items: flex-end; padding: 0; }
.dx-dialog { width: 100%; max-width: var(--dialog-max); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.dx-dialog__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; }
.dx-dialog__title { flex: 1; font-size: 22px; line-height: 28px; font-weight: 600; margin: 0; }
.dx-dialog__body { padding: var(--space-3) var(--space-5) var(--space-5); overflow: auto; }
.dx-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); }
.dx-sheet { width: 100%; background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-float); padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); max-height: 90dvh; overflow: auto; }
.dx-sheet__handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto var(--space-3); }
.dx-sheet__title { font-size: 20px; line-height: 26px; font-weight: 600; margin: 0 0 var(--space-3); }
/* v0.2.4: kop van de sheet met sluitknop */
.dx-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.dx-sheet__head .dx-sheet__title { margin: 0; padding-top: 6px; }
.dx-sheet__close { flex: none; margin-right: -8px; }
/* v0.2.4: op kantoorbreedte blijft een sheet leesbaar smal, gecentreerd onderaan */
@media (min-width: 768px) { .dx-sheet { max-width: 560px; margin: 0 auto; } }
.dx-toast { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius);
  background: var(--text); color: var(--surface); box-shadow: var(--shadow-float); max-width: 480px; font-size: 15px; }
.dx-toast--danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.dx-toast__msg { flex: 1; }
.dx-toast__action { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0 var(--space-3); height: var(--control-h-compact); border-radius: var(--radius-sm); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dx-toast__close { color: inherit; background: none; border: 0; cursor: pointer; width: var(--control-h-compact); height: var(--control-h-compact); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }

/* ---------- toestanden ---------- */
.dx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-9) var(--space-4); }
.dx-empty .dx-icon { color: var(--text-3); margin-bottom: var(--space-2); }
.dx-empty__title { font-size: 17px; line-height: 24px; font-weight: 600; margin: 0; }
.dx-empty__text { color: var(--text-2); margin: 0 0 var(--space-3); max-width: 44ch; }
.dx-skel { background: var(--surface-2); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.dx-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: dx-shimmer 1.4s var(--ease) infinite; }
@keyframes dx-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .dx-skel::after { animation: none; display: none; } }
.dx-skel-row { display: flex; align-items: center; gap: var(--space-4); height: var(--row-h); padding: 0 var(--space-4); border-bottom: 1px solid var(--line); }
.dx-progress { position: relative; height: 2px; background: var(--selected-bg); overflow: hidden; }
.dx-progress::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: var(--primary); animation: dx-progress 1.2s var(--ease) infinite; }
@keyframes dx-progress { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .dx-progress::after { animation: none; width: 100%; opacity: .5; } }
.dx-progress__label { font-size: 13px; line-height: 18px; color: var(--text-3); padding: var(--space-1) var(--space-4); }
.dx-progress-overlay { position: absolute; left: 0; right: 0; top: 0; z-index: var(--z-sticky); pointer-events: none; }
.dx-errsum { background: var(--danger-bg); color: var(--text); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.dx-errsum__title { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--danger); margin: 0 0 var(--space-1); font-size: 15px; }
.dx-errsum ul { margin: 0; padding-left: calc(var(--space-6) + 4px); }
.dx-errsum li { margin: 2px 0; }
.dx-errsum a, .dx-errsum button.dx-link { color: var(--danger); font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* v0.2.4: een link-knop die over twee regels loopt, blijft links uitgelijnd naast het opsommingsteken */
.dx-errsum button.dx-link { text-align: left; vertical-align: top; }
.dx-notice { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--info-bg); color: var(--text); }
.dx-notice > .dx-icon { color: var(--info); margin-top: 1px; }
.dx-notice--warning { background: var(--warning-bg); } .dx-notice--warning > .dx-icon { color: var(--warning); }
.dx-notice--danger { background: var(--danger-bg); } .dx-notice--danger > .dx-icon { color: var(--danger); }
.dx-notice--success { background: var(--success-bg); } .dx-notice--success > .dx-icon { color: var(--success); }
.dx-notice__body { flex: 1; min-width: 0; }
.dx-notice__title { font-weight: 600; margin: 0; }
.dx-notice__text { margin: 0; color: var(--text-2); }

/* ---------- domein: offerteregel, twee plannen ---------- */
.dx-qline { border-bottom: 1px solid var(--line); background: var(--surface); }
/* v0.2.2: kiesbare regel, geselecteerde regel, regel zonder bedragen, eigen inhoud in de uitgeklapte regel */
.dx-qline--selectable .dx-qline__row { cursor: pointer; }
.dx-qline--selectable:hover { background: var(--hover-bg); }
.dx-qline[data-selected="true"] { background: var(--selected-bg); box-shadow: inset 0 0 0 2px var(--selected-border); position: relative; z-index: 1; }
.dx-qline[data-selected="true"] .dx-qline__name { color: var(--primary); font-weight: 600; }
.dx-qline--noamt .dx-qline__row { grid-template-columns: var(--control-h-compact) minmax(0, 1fr) 110px var(--control-h-compact); }
.dx-qhead--noamt { grid-template-columns: var(--control-h-compact) minmax(0, 1fr) 110px var(--control-h-compact) !important; }
.dx-qline__detail.has-custom { grid-template-columns: minmax(0, 1fr); }
.dx-qline__custom { grid-column: 1 / -1; min-width: 0; cursor: default; }
.dx-qline__row { display: grid; grid-template-columns: var(--control-h-compact) minmax(0, 1fr) 110px 128px 128px var(--control-h-compact); align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3); }
.dx-qline__what { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.dx-qline__name { font-weight: 500; }
.dx-qline__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.dx-qline__qty, .dx-qline__amt { font-family: var(--font-mono); font-size: 14px; text-align: right; white-space: nowrap; }
.dx-qline__amt.is-empty { color: var(--text-3); }
.dx-qline__toggle .dx-icon { transition: transform var(--dur) var(--ease); }
.dx-qline[data-open="true"] .dx-qline__toggle .dx-icon { transform: rotate(90deg); }
.dx-qline__detail { padding: 0 var(--space-3) var(--space-4) calc(var(--control-h-compact) + var(--space-3) * 2); display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dx-qline__sub { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--text-2); margin: 0 0 var(--space-2); }
.dx-mini { width: 100%; border-collapse: collapse; font-size: 14px; }
.dx-mini td { height: 32px; border-bottom: 1px solid var(--line); padding: 0 var(--space-2) 0 0; }
.dx-mini td:last-child { text-align: right; font-family: var(--font-mono); padding-right: 0; white-space: nowrap; }
.dx-mini tr.is-total td { font-weight: 600; border-bottom: 0; }
.dx-mini tr.is-total td:last-child { font-weight: 500; }
.dx-override { display: inline-flex; align-items: center; gap: var(--space-1); }
.dx-override .dx-icon { color: var(--primary); }
.dx-override__calc { color: var(--text-3); text-decoration: line-through; font-size: 13px; }
.dx-qhead { display: grid; grid-template-columns: var(--control-h-compact) minmax(0, 1fr) 110px 128px 128px var(--control-h-compact); gap: var(--space-3); padding: 0 var(--space-3); height: var(--row-h-compact);
  align-items: center; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--text-2); }
.dx-qhead .is-right { text-align: right; }
/* v0.2.3: regel en kop reageren op hun eigen breedte (container queries), niet op het venster.
   Onder 600 px: geen kop; hoeveelheid onder de naam; bedragen onder elkaar met "eenmalig" en "per jaar" ervoor; het menu blijft. */
.dx-qline, .dx-qhead-wrap { container: dx-qline / inline-size; }
.dx-qline[data-menu-open="true"] { position: relative; z-index: var(--z-popover); }
.dx-qline__menu { justify-self: center; }
@container dx-qline (max-width: 599px) {
  .dx-qhead { display: none; }
  .dx-qline__row, .dx-qline--noamt .dx-qline__row { grid-template-columns: var(--control-h-compact) minmax(0, 1fr) auto var(--control-h-compact);
    grid-template-areas: "tog what once menu" "tog qty year menu"; row-gap: 2px; }
  .dx-qline__toggle { grid-area: tog; }
  .dx-qline__what { grid-area: what; }
  .dx-qline__row > .dx-qline__qty { grid-area: qty; text-align: left; font-size: 13px; line-height: 18px; color: var(--text-2); }
  .dx-qline__amt--once { grid-area: once; }
  .dx-qline__amt--year { grid-area: year; }
  .dx-qline__menu { grid-area: menu; }
  .dx-qline__amt::before { font-family: var(--font-ui); font-size: 12px; color: var(--text-3); margin-right: 6px; }
  .dx-qline__amt--once::before { content: "eenmalig"; }
  .dx-qline__amt--year::before { content: "per jaar"; }
  .dx-qline__amt.is-empty { display: none; }
  .dx-qline__detail { grid-template-columns: 1fr; padding-left: var(--space-3); }
}
.dx-totals { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; min-width: 0; container: dx-totals / inline-size; }
/* v0.2.3: één raster voor alle rijen (subgrid), zodat de kolommen in elke rij even breed zijn en exact onder elkaar staan.
   Per kolom staat het euroteken links en het getal rechts; een lijn scheidt Eenmalig en Per jaar. */
.dx-totals__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(6.75rem, auto) minmax(6.75rem, auto); font-size: 14px; line-height: 20px; padding-bottom: var(--space-2); }
.dx-totals__r { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: stretch; color: var(--text-2); }
.dx-totals__r > * { padding: 6px 0; min-width: 0; }
.dx-totals__r > :first-child { padding-left: var(--space-4); padding-right: var(--space-3); }
.dx-totals__r > :not(:first-child) { padding-left: var(--space-3); padding-right: var(--space-3); text-align: right; white-space: nowrap; }
.dx-totals__r > :last-child { border-left: 1px solid var(--line); padding-right: var(--space-4); }
.dx-totals__r .dx-amount { color: var(--text); }
.dx-totals__r.is-head > * { padding-top: 14px; padding-bottom: var(--space-2); font-size: 13px; line-height: 16px; font-weight: 500; }
.dx-totals__r.is-sub { border-top: 1px solid var(--line); }
.dx-totals__r.is-sub > * { padding-top: 10px; }
.dx-totals__r.is-total { border-top: 1px solid var(--line-strong); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text); }
.dx-totals__r.is-total > * { padding-top: 10px; }
.dx-totals__r.is-total .dx-amount { font-weight: 500; }
@supports not (grid-template-columns: subgrid) {
  .dx-totals__grid { display: flex; flex-direction: column; }
  .dx-totals__r { grid-template-columns: minmax(0, 1fr) 7.25rem 7.25rem; }
}
@container dx-totals (max-width: 339px) {
  .dx-totals__grid { grid-template-columns: minmax(0, 1fr) minmax(5.75rem, auto) minmax(5.75rem, auto); font-size: 13px; }
  .dx-totals__r > :first-child { padding-left: var(--space-3); }
  .dx-totals__r > :not(:first-child) { padding-left: var(--space-2); padding-right: var(--space-2); }
  .dx-totals__r > :last-child { padding-right: var(--space-3); }
}
.dx-totals__month { display: flex; flex-direction: column; gap: var(--space-1); background: var(--selected-bg); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.dx-totals__mrow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: 15px; line-height: 22px; font-weight: 600; }
.dx-totals__mrow .dx-amount { font-weight: 500; font-size: 17px; }
.dx-totals__note { margin: 0; font-size: 13px; line-height: 18px; color: var(--text-2); }

/* ---------- domein: planbord ---------- */
/* v0.4.0: PlanningItem ook als knop (Planning-bord): rand line-strong, plaats en tijd (meta), wie (in de lijst), vlag, gemarkeerd, regelvariant */
.dx-pitem { container: dx-pitem / inline-size; display: flex; flex-direction: column; gap: 1px; width: 100%; min-height: 44px; margin: 0; padding: 6px var(--space-2); box-sizing: border-box; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); color: var(--on-label); font: inherit; font-size: 13px; line-height: 17px; text-align: left; cursor: grab; position: relative; }
.dx-pitem:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-pitem__top { display: flex; justify-content: space-between; gap: var(--space-1); font-weight: 600; min-width: 0; width: 100%; }
.dx-pitem__name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.dx-pitem__what, .dx-pitem__meta, .dx-pitem__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* v0.4.1: in een smal blok (onder 160 px) loopt het werk over twee regels in plaats van na een paar letters af te kappen */
@container dx-pitem (max-width: 159px) { .dx-pitem__what { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } }
.dx-pitem__meta { font-size: 12px; line-height: 16px; }
.dx-pitem__part { font-family: var(--font-mono); font-size: 12px; font-weight: 500; white-space: nowrap; }
.dx-pitem--visit { background: var(--surface) !important; color: var(--text); border: 2px dashed var(--line-control); }
.dx-pitem--busy { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--line) 6px 8px) !important; border-color: var(--line); cursor: default; min-height: 44px; }
.dx-pitem--drag { box-shadow: var(--shadow-float); opacity: .7; cursor: grabbing; }
.dx-pitem__flag { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; line-height: 16px; font-weight: 600; background: var(--warning-bg); color: var(--warning); border-radius: 4px; padding: 0 4px; align-self: flex-start; margin-top: 2px; }
/* v0.4.1: verplaatst is een linkerrand van 4 px in info met de vlag Verplaatst; de stippellijn leek op een opname */
.dx-pitem--moved { border-left: 4px solid var(--info); padding-left: calc(var(--space-2) - 3px); }
.dx-pitem--row.dx-pitem--moved { padding-left: 9px; }
.dx-pitem__flag.is-info { background: var(--info-bg); color: var(--info); }
.dx-pitem--hl { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.dx-pitem--static { cursor: pointer; }
.dx-pitem--row { font-size: 15px; line-height: 20px; padding: 8px 12px; gap: 2px; }
.dx-pitem--row .dx-pitem__meta, .dx-pitem--row .dx-pitem__who { font-size: 14px; line-height: 20px; }
.dx-pitem--row .dx-pitem__name, .dx-pitem--row .dx-pitem__what, .dx-pitem--row .dx-pitem__meta, .dx-pitem--row .dx-pitem__who { white-space: normal; }
@media (max-width: 767px) { .dx-pitem--row { font-size: 16px; line-height: 22px; } }

/* ---------- domein: signaal ---------- */
.dx-signal { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface); }
.dx-sev { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 500; }
.dx-sev__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dx-sev--info { color: var(--info); } .dx-sev--info .dx-sev__dot { background: var(--info); }
.dx-sev--warn { color: var(--warning); } .dx-sev--warn .dx-sev__dot { background: var(--warning); }
.dx-sev--urgent { color: var(--danger); } .dx-sev--urgent .dx-sev__dot { background: var(--danger); }
.dx-signal__main { min-width: 0; display: flex; flex-direction: column; }
.dx-signal__title { font-weight: 500; }
.dx-signal__obj { font-size: 13px; line-height: 18px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-signal__since { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.dx-signal-wrap { container: dx-signal / inline-size; }
@container dx-signal (max-width: 559px) { .dx-signal { grid-template-columns: minmax(0, 1fr) auto; } .dx-signal .dx-sev { grid-column: 1 / -1; } .dx-signal__since { display: none; } .dx-signal__obj { white-space: normal; overflow: visible; } }

/* ---------- domein: mijn dag ---------- */
.dx-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; font-size: 16px; line-height: 24px; }
.dx-day__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; }
.dx-day__time { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--text); }
.dx-day__main { padding: var(--space-2) var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.dx-day__customer { font-weight: 600; font-size: 18px; line-height: 24px; margin: 0; }
.dx-day__what { color: var(--text-2); margin: 0; }
.dx-day__addr { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-h-mobile); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none; background: var(--surface-2); font-weight: 500; }
.dx-day__addr .dx-grow { flex: 1; }
.dx-day__addr .dx-icon { color: var(--primary); }
.dx-day__tasks { padding: var(--space-1) var(--space-4); }
.dx-day__tasks .dx-check + .dx-check { border-top: 1px solid var(--line); }
.dx-day__foot { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); align-items: center; }
.dx-day__team { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--text-2); padding: 0 var(--space-4) var(--space-2); }
.dx-day__progress { font-size: 14px; color: var(--text-2); font-family: var(--font-mono); }

/* ---------- schermen (showcase) ---------- */
.dx-phone { width: 390px; max-width: 100%; margin: 0 auto; height: 780px; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; }
.dx-phone__top { padding: var(--space-5) var(--space-4) var(--space-3); background: var(--surface); border-bottom: 1px solid var(--line); }
.dx-phone__title { font-size: 20px; line-height: 26px; font-weight: 600; margin: 0; }
.dx-phone__sub { font-size: 16px; line-height: 24px; color: var(--text-2); margin: 2px 0 0; }
.dx-phone__scroll { flex: 1; overflow: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.dx-shell { display: grid; grid-template-columns: var(--sidenav-w) minmax(0, 1fr); min-height: 100%; background: var(--bg); }
.dx-shell__main { display: flex; flex-direction: column; min-width: 0; }
.dx-page { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--content-max); }
.dx-page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.dx-page__title { font-size: 28px; line-height: 34px; font-weight: 600; margin: 0; }
.dx-page__meta { font-size: 13px; line-height: 18px; color: var(--text-3); margin: 2px 0 0; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.dx-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.dx-board { display: grid; grid-template-columns: 148px repeat(5, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.dx-board__h { font-size: 13px; font-weight: 500; color: var(--text-2); background: var(--surface-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.dx-board__h.is-today { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); }
.dx-board__who { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); font-weight: 500; font-size: 14px; }
.dx-board__cell { padding: 4px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-height: 64px; }
.dx-board__cell.is-drop { background: var(--selected-bg); box-shadow: inset 0 0 0 2px var(--primary); }
.dx-board__cell.is-absent { background: var(--surface-2); color: var(--text-3); font-size: 13px; align-items: center; justify-content: center; }

/* v0.2.1 (B90): compacte maten alleen bij muisbediening; op aanraakschermen tap-min */
/* v0.2.4: op een aanraakscherm is elk tikdoel minstens tap-min (44 px): knoppen in elke maat, segmentopties, velden en compacte rijen */
@media (pointer: coarse) {
  .dx-btn, .dx-btn--sm { min-height: var(--tap-min, 44px); }
  .dx-seg { gap: 4px; }
  .dx-seg__opt { height: auto; min-height: var(--tap-min, 44px); }
  .dx-input { min-height: var(--tap-min, 44px); }
  .dx-table--compact td { height: var(--tap-min, 44px); }
  .dx-iconbtn, .dx-iconbtn.dx-btn--sm { min-width: var(--tap-min, 44px); }
  .dx-chip__x { position: relative; }
  .dx-chip__x::after { content: ""; position: absolute; inset: -14px -12px; }
}
@media (max-width: 767px) { .dx-input { font-size: 16px; } }

/* v0.2.2: wijzigingsflits. Een waarde die door een actie verandert licht op in selected-bg met primary en vloeit in dur-flash weg.
   Twee identieke animaties onder twee namen, zodat een tweede wijziging kort na de eerste de animatie opnieuw start. */
@keyframes dx-flash-a { 0%, 30% { background-color: var(--selected-bg); box-shadow: 0 0 0 3px var(--selected-bg); color: var(--primary); } 100% { background-color: transparent; box-shadow: 0 0 0 3px transparent; } }
@keyframes dx-flash-b { 0%, 30% { background-color: var(--selected-bg); box-shadow: 0 0 0 3px var(--selected-bg); color: var(--primary); } 100% { background-color: transparent; box-shadow: 0 0 0 3px transparent; } }
.dx-flash-a { animation: dx-flash-a var(--dur-flash, 1200ms) var(--ease); border-radius: 4px; }
.dx-flash-b { animation: dx-flash-b var(--dur-flash, 1200ms) var(--ease); border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .dx-flash-a, .dx-flash-b { animation: none; background-color: var(--selected-bg); box-shadow: 0 0 0 3px var(--selected-bg); }
}

/* v0.2.3: bedrag met euroteken links en getal rechts, voor kolommen met bedragen */
.dx-amount--split { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.dx-amount__cur { color: var(--text-2); font-weight: 400; }

/* v0.2.3: Menu */
.dx-menu-wrap { position: relative; display: inline-flex; }
.dx-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: var(--z-popover); min-width: 200px; max-width: min(320px, 90vw); padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-float); display: flex; flex-direction: column; cursor: default; }
.dx-menu--start { right: auto; left: 0; }
.dx-menu--up { top: auto; bottom: calc(100% + 4px); }
.dx-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--text); font: inherit; font-size: 14px; line-height: 20px; text-align: left; cursor: pointer; white-space: nowrap; }
.dx-menu__item .dx-icon { color: var(--text-2); flex: none; }
.dx-menu__item:hover, .dx-menu__item:focus-visible { background: var(--hover-bg); }
.dx-menu__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dx-menu__item[disabled] { color: var(--text-3); cursor: default; background: none; }
.dx-menu__item[disabled] .dx-icon { color: var(--text-3); }
.dx-menu__item.is-danger, .dx-menu__item.is-danger .dx-icon { color: var(--danger); }
.dx-menu__item:not(.is-danger) + .dx-menu__item.is-danger { margin-top: 4px; position: relative; }
.dx-menu__item:not(.is-danger) + .dx-menu__item.is-danger::before { content: ""; position: absolute; left: 4px; right: 4px; top: -3px; border-top: 1px solid var(--line); }
.dx-menu__sep { border-top: 1px solid var(--line); margin: 4px; }
@media (pointer: coarse) { .dx-menu__item { min-height: var(--tap-min); } }

/* v0.2.4: onderbalk voor kantoorrollen en de lijst achter Meer */
a.dx-tabbar__tab { text-decoration: none; }
.dx-more { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dx-more__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min, 44px); padding: 0 var(--space-3); border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: 500; }
.dx-more__item .dx-icon { color: var(--text-2); }
.dx-more__item:hover { background: var(--hover-bg); color: var(--text); }
.dx-more__item[aria-current="page"] { background: var(--selected-bg); color: var(--primary); }
.dx-more__item[aria-current="page"] .dx-icon { color: var(--primary); }

/* v0.2.5: Select */
.dx-select { position: relative; display: inline-flex; min-width: 0; }
.dx-select--block { display: flex; width: 100%; }
.dx-select__el { font: inherit; font-size: 15px; height: var(--control-h); width: 100%; min-width: 160px; padding: 0 36px 0 var(--space-3); color: var(--text); background: var(--surface);
  border: 1px solid var(--line-control); border-radius: var(--radius); appearance: none; -webkit-appearance: none; cursor: pointer; }
.dx-select__el:hover { border-color: var(--text-2); }
.dx-select__el:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-select__el[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.dx-select__el:disabled { background: var(--surface-2); color: var(--text-2); cursor: default; }
.dx-select > .dx-icon { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-2); }
.dx-select--lg .dx-select__el { height: var(--control-h-mobile); font-size: 16px; }
@media (pointer: coarse) { .dx-select__el { min-height: var(--tap-min, 44px); } }
@media (max-width: 767px) { .dx-select__el { font-size: 16px; } }

/* v0.2.5: FilterBar */
.dx-filterbar { container: dx-filterbar / inline-size; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.dx-filterbar__row { display: flex; flex-wrap: nowrap; gap: var(--space-3); align-items: center; }
.dx-filterbar__search { position: relative; flex: 1 1 200px; min-width: 160px; max-width: 520px; }
.dx-filterbar__search > .dx-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.dx-filterbar__search .dx-input { padding-left: 38px; width: 100%; box-sizing: border-box; }
.dx-filterbar__select { flex: 0 0 auto; }
.dx-filterbar__more.is-narrow { display: none; }
.dx-filterbar__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--selected-bg); color: var(--primary); font-family: var(--font-mono); font-size: 13px; line-height: 1; }
.dx-filterbar__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dx-filterbar__chip--narrow { display: none; }
.dx-filterbar__chips--narrow, .dx-filterbar__count--narrow { display: none; }
@container dx-filterbar (max-width: 639px) {
  .dx-filterbar__select { display: none; }
  .dx-filterbar__more.is-narrow { display: inline-flex; }
  .dx-filterbar__chip--narrow { display: inline-flex; }
  .dx-filterbar__chips--narrow { display: flex; }
  .dx-filterbar__count--narrow { display: inline-flex; }
  .dx-filterbar__count--wide { display: none; }
  .dx-filterbar__search { flex-basis: 160px; max-width: none; }
}

/* v0.2.5: voetregel onder een DataTable */
.dx-table__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--text-2); }

/* v0.2.5: voet van een BottomSheet */
.dx-sheet__foot { position: sticky; bottom: calc(-1 * (var(--space-4) + env(safe-area-inset-bottom))); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2);
  margin: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * (var(--space-4) + env(safe-area-inset-bottom)));
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.dx-sheet__foot .dx-btn--primary { flex: 1 1 auto; }

/* v0.2.5: Menu, uitleg onder een actie */
.dx-menu__item.has-hint { align-items: flex-start; padding-top: 8px; padding-bottom: 8px; white-space: normal; }
.dx-menu__item.has-hint > .dx-icon { margin-top: 1px; }
.dx-menu__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dx-menu__hint { font-size: 13px; line-height: 18px; color: var(--text-3); font-weight: 400; }
.dx-menu { width: max-content; } /* breed genoeg voor actie en hint, begrensd door max-width */
@media (pointer: coarse) { .dx-chip__x::after { inset: -15px; } } /* v0.2.5: kruisje van 14 px krijgt een tikvlak van 44 x 44 */

/* v0.2.5: PlanTotals met alleen de kolom eenmalig */
.dx-totals--once .dx-totals__grid { grid-template-columns: minmax(0, 1fr) minmax(6.75rem, auto); }
.dx-totals--once .dx-totals__r > :last-child { border-left: 0; }

/* v0.2.5: QuoteTotalsBar; de consument zet hem vast onderaan (position: sticky) */
.dx-totbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px var(--space-3); width: 100%; box-sizing: border-box; min-height: 60px;
  margin: 0; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); background: var(--surface); color: var(--text); border: 0; border-top: 1px solid var(--line);
  box-shadow: 0 -6px 16px rgba(16, 39, 31, .08); font: inherit; text-align: left; cursor: pointer; }
.dx-totbar:hover { background: var(--hover-bg); }
.dx-totbar:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dx-totbar__label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-2); }
.dx-totbar__amts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 15px; line-height: 22px; }
.dx-totbar__unit { font-size: 13px; color: var(--text-2); margin-left: 6px; font-family: var(--font-ui); }
.dx-totbar > .dx-icon { color: var(--text-2); }

/* v0.2.5: menu-actie uitgeschakeld met uitleg (aria-disabled, blijft focusbaar) */
.dx-menu__item[aria-disabled="true"] { color: var(--text-3); cursor: default; }
.dx-menu__item[aria-disabled="true"]:hover { background: none; }
.dx-menu__item[aria-disabled="true"] .dx-icon { color: var(--text-3); }
/* v0.2.5: Dialog en BottomSheet nemen met theme het thema van het scherm over (ze staan buiten .app) */
.dx-dialog, .dx-sheet { color: var(--text); font-family: var(--font-ui); }

/* v0.2.6: DataTable, kolom verborgen onder een tabelbreedte (hideBelow) en variant zonder eigen rand in een sectiekaart */
.dx-table .dx-col-hidden { display: none; }
.dx-table-wrap--bare { border: 0; border-radius: 0; background: transparent; }
/* v0.2.6: in de kaartweergave geen vaste rijhoogte, ook niet bij compact op een aanraakscherm (die regel stond later en won) */
@container dx-table (max-width: 679px) { .dx-table.dx-table--cards td { height: auto; } }

/* v0.2.6: QuoteHeader en QuoteLine met een bedragkolom (columns once of yearly) */
.dx-qhead.dx-qhead--one { grid-template-columns: var(--control-h-compact) minmax(0, 1fr) 110px 128px var(--control-h-compact); }
.dx-qline--one .dx-qline__row { grid-template-columns: var(--control-h-compact) minmax(0, 1fr) 110px 128px var(--control-h-compact); }
@container dx-qline (max-width: 599px) {
  .dx-qline--one .dx-qline__row { grid-template-columns: var(--control-h-compact) minmax(0, 1fr) auto var(--control-h-compact); }
  .dx-qline--once .dx-qline__row { grid-template-areas: "tog what once menu" "tog qty qty menu"; }
  .dx-qline--yearly .dx-qline__row { grid-template-areas: "tog what year menu" "tog qty qty menu"; }
  .dx-qline--once .dx-qline__amt--once::before { content: none; }
}

/* v0.2.6: QuoteLine op smalle breedte: lange namen breken af, geen lege menukolom, onder 360 px de bedragen onder de naam */
.dx-qline__name { overflow-wrap: break-word; hyphens: auto; }
@container dx-qline (max-width: 599px) {
  .dx-qline--nomenu .dx-qline__row { grid-template-columns: var(--control-h-compact) minmax(0, 1fr) auto; grid-template-areas: "tog what once" "tog qty year"; }
  .dx-qline--nomenu.dx-qline--once .dx-qline__row { grid-template-areas: "tog what once" "tog qty qty"; }
  .dx-qline--nomenu.dx-qline--yearly .dx-qline__row { grid-template-areas: "tog what year" "tog qty qty"; }
  .dx-qline--nomenu .dx-qline__menu { display: none; }
}
@container dx-qline (max-width: 359px) {
  .dx-qline__row { grid-template-areas: "tog what what menu" "tog qty once menu" "tog . year menu"; }
  .dx-qline--once .dx-qline__row { grid-template-areas: "tog what what menu" "tog qty once menu"; }
  .dx-qline--yearly .dx-qline__row { grid-template-areas: "tog what what menu" "tog qty year menu"; }
  .dx-qline--nomenu .dx-qline__row { grid-template-areas: "tog what what" "tog qty once" "tog . year"; }
  .dx-qline--nomenu.dx-qline--once .dx-qline__row { grid-template-areas: "tog what what" "tog qty once"; }
  .dx-qline--nomenu.dx-qline--yearly .dx-qline__row { grid-template-areas: "tog what what" "tog qty year"; }
}

/* v0.2.6: PlanTotals met alleen Per jaar, en zonder eigen rand in een sectiekaart */
.dx-totals--yearly .dx-totals__grid { grid-template-columns: minmax(0, 1fr) minmax(6.75rem, auto); }
.dx-totals--yearly .dx-totals__r > :last-child { border-left: 0; }
@supports not (grid-template-columns: subgrid) {
  .dx-totals--once .dx-totals__r, .dx-totals--yearly .dx-totals__r { grid-template-columns: minmax(0, 1fr) 7.25rem; }
}
.dx-totals--bare { border: 0; border-radius: 0; background: transparent; }

/* v0.2.6: plaatshouder van de zoekknop in de TopBar breekt niet af maar loopt uit in ... */
.dx-search-trigger span.dx-grow { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v0.2.6: Breadcrumb */
.dx-crumb { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 6px; min-width: 0; font-size: 13px; line-height: 18px; color: var(--text-3); }
.dx-crumb__link { color: var(--primary); text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap; flex-shrink: 0; }
.dx-crumb__link:hover { color: var(--primary-hover); text-decoration: underline; }
.dx-crumb__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* een regel: het laatste item loopt uit in ..., zodat tikvlakken van 44 px nooit boven elkaar komen */
.dx-crumb__cur { color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-crumb__sep { color: var(--text-3); }
@media (pointer: coarse) {
  .dx-crumb__link { position: relative; }
  .dx-crumb__link::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(calc(100% + 12px), 44px); height: 44px; transform: translate(-50%, -50%); }
}

/* v0.2.7: QuickFilters, snelfilters onder een zoekveld */
.dx-qf { container: dx-qf / inline-size; min-width: 0; }
.dx-qf__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dx-qf__chip { font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line-control); border-radius: 16px; background: var(--surface); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.dx-qf__chip:hover { background: var(--hover-bg); color: var(--text); }
.dx-qf__chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-qf__chip.is-on { background: var(--selected-bg); border-color: var(--selected-border); color: var(--primary); font-weight: 600; padding-right: 10px; }
.dx-qf__n { font-family: var(--font-mono); font-size: 13px; }
@media (pointer: coarse) { .dx-qf__chip { height: var(--tap-min); padding: 0 14px; } .dx-qf__chip.is-on { padding-right: 12px; } }
@container dx-qf (max-width: 559px) { .dx-qf__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }

/* v0.2.8: Tabs sterker. Actief in primary en halfvet met een streep van 3 px, alle tabs 16 px, een zichtbare scheidingslijn, tellers met een rand */
/* de lijn is een schaduw binnen de rij, zodat de rij (overflow-x: auto) de streep van 3 px niet afknipt */
.dx-tabs { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line-strong); }
.dx-tab { font-size: 16px; border-bottom-width: 3px; margin-bottom: 0; }
.dx-tab[aria-selected="true"] { color: var(--primary); font-weight: 600; }
.dx-tab__count { font-size: 13px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.dx-tab[aria-selected="true"] .dx-tab__count { background: var(--selected-bg); box-shadow: none; color: var(--primary); }

/* v0.2.8: navigatielinks houden hun eigen kleur bij hover en focus, ook als de pagina zelf a:hover kleurt (de tekst werd donkergroen op donkergroen) */
a.dx-tabbar__tab:not([aria-current="page"]):hover { color: var(--text); }

/* v0.2.8: Notice met een actie: in een smal vak zakt de actie onder de tekst, zodat de tekst de breedte houdt; de knoptekst lijnt uit met de tekst */
.dx-notice { flex-wrap: wrap; container: dx-notice / inline-size; }
@container dx-notice (max-width: 559px) {
  .dx-notice__body { flex-basis: calc(100% - 32px); }
  .dx-notice > .dx-btn { margin: -4px 0 -8px 20px; }
}

/* v0.2.8: PageHeader, kop op een wit vlak; de tabs hangen aan de onderrand */
.dx-phead { --dx-pp: var(--dx-page-pad, 24px); position: relative; isolation: isolate; z-index: 3; margin: calc(-1 * var(--dx-pp)) calc(-1 * var(--dx-pp)) 0; padding: 20px var(--dx-pp) 20px;
  display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* het witte vlak en de lijn zitten op een laag achter de inhoud; in een kolom met .dx-page-col lopen ze door tot de randen van die kolom (ook als de pagina een maximale breedte heeft) */
.dx-phead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line-strong); pointer-events: none; }
.dx-page-col { overflow-x: clip; }
.dx-page-col .dx-phead::before { left: -100vmax; right: -100vmax; }
.dx-phead__actions:empty { display: none; }
.dx-phead--tabs { padding-bottom: 0; gap: 12px; }
.dx-phead__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; min-width: 0; }
.dx-phead__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.dx-phead__title { margin: 0; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); overflow-wrap: anywhere; }
.dx-phead__sub { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-2); }
.dx-phead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.dx-phead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dx-phead .dx-tabs.dx-phead__tabs { box-shadow: none; margin: 0 calc(-1 * var(--space-3)); }
@media (max-width: 767px) {
  .dx-phead { --dx-pp: var(--dx-page-pad, 16px); padding-top: 16px; }
  .dx-phead .dx-tabs.dx-phead__tabs { margin: 0 calc(-1 * var(--space-2)); }
  .dx-phead__title { font-size: 24px; line-height: 30px; }
}

/* v0.2.9: module die er nog niet is (disabled): zichtbaar maar niet klikbaar, met "Binnenkort" */
.dx-more__label { flex: 1; min-width: 0; }
.dx-more__item.is-disabled { cursor: default; color: var(--text-3); }
.dx-more__item.is-disabled:hover { background: none; color: var(--text-3); }
.dx-more__item.is-disabled .dx-icon { color: var(--text-3); }
.dx-more__soon { font-size: 13px; color: var(--text-3); }

/* v0.3.0: Button en IconButton als link (href). Zelfde klassen; geen onderstreping en de kleur van de variant, ook als de pagina a, a:hover of a:visited kleurt */
a.dx-btn { text-decoration: none; }
a.dx-btn.dx-btn--primary, a.dx-btn.dx-btn--primary:link, a.dx-btn.dx-btn--primary:visited, a.dx-btn.dx-btn--primary:hover, a.dx-btn.dx-btn--primary:focus-visible, a.dx-btn.dx-btn--primary:active { color: var(--on-primary); text-decoration: none; }
a.dx-btn.dx-btn--secondary, a.dx-btn.dx-btn--secondary:link, a.dx-btn.dx-btn--secondary:visited, a.dx-btn.dx-btn--secondary:hover, a.dx-btn.dx-btn--secondary:focus-visible, a.dx-btn.dx-btn--secondary:active { color: var(--text); text-decoration: none; }
a.dx-btn.dx-btn--quiet, a.dx-btn.dx-btn--quiet:link, a.dx-btn.dx-btn--quiet:visited, a.dx-btn.dx-btn--quiet:hover, a.dx-btn.dx-btn--quiet:focus-visible, a.dx-btn.dx-btn--quiet:active { color: var(--primary); text-decoration: none; }
a.dx-btn.dx-btn--danger, a.dx-btn.dx-btn--danger:link, a.dx-btn.dx-btn--danger:visited, a.dx-btn.dx-btn--danger:hover, a.dx-btn.dx-btn--danger:focus-visible, a.dx-btn.dx-btn--danger:active { color: var(--danger); text-decoration: none; }
a.dx-btn[aria-disabled="true"] { pointer-events: none; }

/* v0.3.0: Toast op aanraken: actie en sluiten minstens tap-min */
@media (pointer: coarse) {
  .dx-toast__action { min-height: var(--tap-min, 44px); }
  .dx-toast__close { width: var(--tap-min, 44px); height: var(--tap-min, 44px); }
}
/* v0.3.0: Toast smal (venster onder 512 px, dus een melding smaller dan 480 px): de tekst houdt de breedte naast het kruisje, de actie staat eronder en lijnt uit met de tekst */
@media (max-width: 511px) {
  .dx-toast { flex-wrap: wrap; row-gap: 0; }
  .dx-toast__msg { flex: 1 1 calc(100% - 60px); }
  .dx-toast--danger .dx-toast__msg { flex-basis: calc(100% - 92px); }
  .dx-toast__close { order: 1; }
  .dx-toast__action { order: 2; margin-left: -12px; }
  .dx-toast--danger .dx-toast__action { margin-left: 20px; }
}

/* v0.3.0: Dialog onder 768 px als vel van onderen: volle breedte, afgeronde bovenhoeken, hoogstens 90dvh, de voet onderaan in duimbereik met safe-area */
@media (max-width: 767px) {
  .dx-scrim--dsheet { align-items: flex-end; padding: 0; }
  .dx-scrim--dsheet > .dx-dialog { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 90dvh; }
  .dx-scrim--dsheet > .dx-dialog::before { content: ""; flex: none; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: var(--space-2) auto 0; }
  .dx-scrim--dsheet .dx-dialog__head { padding: var(--space-3) var(--space-4) 0; }
  .dx-scrim--dsheet .dx-dialog__head .dx-iconbtn { margin: -6px -8px 0 0; }
  .dx-scrim--dsheet .dx-dialog__title { font-size: 20px; line-height: 26px; padding-top: 2px; }
  .dx-scrim--dsheet .dx-dialog__body { padding: var(--space-3) var(--space-4) var(--space-4); }
  .dx-scrim--dsheet .dx-dialog__foot { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .dx-scrim--dsheet .dx-dialog__foot .dx-btn--primary, .dx-scrim--dsheet .dx-dialog__foot .dx-btn--danger:last-child { flex: 1 1 auto; }
  .dx-scrim--dsheet .dx-dialog__body:last-child { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
}

/* v0.3.0: Card flush knipt zijn hoeken af; de onderste lijn van de inhoud (laatste SignalRow, laatste rij van een tabel) valt weg onder de rand van de kaart */
.dx-card--flush { overflow: hidden; overflow: clip; }
.dx-card--flush > .dx-card__body { margin-bottom: -1px; }
.dx-card__body > .dx-signal-wrap:last-child > .dx-signal { border-bottom: 0; }
/* v0.3.0: DataTable bare, kaartweergave: geen lijn onder de laatste kaart */
@container dx-table (max-width: 679px) { .dx-table-wrap--bare .dx-table--cards tbody tr:last-child { border-bottom: 0; } }

/* v0.3.0: DataTable, kolom met sub: hoofdregel en een tweede regel */
.dx-cell2 { display: flex; flex-direction: column; min-width: 0; padding: var(--space-2) 0; }
.dx-cell2__sub { font-size: var(--fs-small, 13px); line-height: var(--lh-small, 18px); font-weight: 400; color: var(--text-2); font-family: var(--font-ui); }
.dx-cell2__sub.is-warning { color: var(--warning); font-weight: 500; }
.dx-cell2__sub.is-danger { color: var(--danger); font-weight: 500; }
@container dx-table (max-width: 679px) { .dx-table--cards .dx-cell2 { padding: 0; } }

/* v0.3.0: PlanTotals, btw per tarief */
.dx-totals__r.is-vat > :first-child { overflow-wrap: anywhere; }

/* v0.3.0: TextArea, gelijk aan TextInput met meerdere regels */
.dx-textarea { display: block; height: auto; min-height: calc(var(--control-h) * 2); padding: var(--space-2) var(--space-3); line-height: 22px; resize: vertical; }
.dx-textarea[aria-invalid="true"] { padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px); }

/* v0.3.0: StatusNote, 13/18; warning en danger in 500 */
.dx-snote { display: block; font-size: var(--fs-small, 13px); line-height: var(--lh-small, 18px); font-weight: 400; color: var(--text-2); }
.dx-snote--warning { color: var(--warning); font-weight: 500; }
.dx-snote--danger { color: var(--danger); font-weight: 500; }
a.dx-snote, a.dx-snote:visited { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
a.dx-snote.dx-snote--warning, a.dx-snote.dx-snote--warning:visited, a.dx-snote.dx-snote--warning:hover { color: var(--warning); }
a.dx-snote.dx-snote--danger, a.dx-snote.dx-snote--danger:visited, a.dx-snote.dx-snote--danger:hover { color: var(--danger); }
a.dx-snote:not(.dx-snote--warning):not(.dx-snote--danger):hover { color: var(--primary-hover); }
a.dx-snote:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.dx-phead__meta .dx-snote { font-size: 14px; line-height: 20px; }

/* v0.3.0: FactList. 14/20, label text-2, 8 px tussen de rijen; auto zet label en waarde onder elkaar onder 560 px vakbreedte */
.dx-facts-wrap { container: dx-facts / inline-size; min-width: 0; }
.dx-facts { margin: 0; font-size: 14px; line-height: 20px; }
.dx-facts--columns, .dx-facts--auto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
.dx-facts__row { display: contents; }
.dx-facts__label { color: var(--text-2); }
.dx-facts__value { margin: 0; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.dx-facts__value.dx-mono { font-size: var(--fs-mono, 14px); }
.dx-facts__value.is-strong { font-weight: 600; }
.dx-facts__value.is-warning { color: var(--warning); font-weight: 500; }
.dx-facts__value.is-danger { color: var(--danger); font-weight: 500; }
.dx-facts__value.is-success { color: var(--success); font-weight: 500; }
.dx-facts--stacked { display: flex; flex-direction: column; gap: var(--space-2); }
.dx-facts--stacked .dx-facts__row { display: block; }
.dx-facts--stacked .dx-facts__label { font-size: var(--fs-small, 13px); line-height: var(--lh-small, 18px); }
@container dx-facts (max-width: 559px) {
  .dx-facts--auto { display: flex; flex-direction: column; gap: var(--space-2); }
  .dx-facts--auto .dx-facts__row { display: block; }
  .dx-facts--auto .dx-facts__label { font-size: var(--fs-small, 13px); line-height: var(--lh-small, 18px); }
}
.dx-facts--money { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.dx-facts--money .dx-facts__value { text-align: right; white-space: nowrap; }
.dx-facts__val { display: inline-flex; align-items: flex-start; gap: 6px; vertical-align: top; }
.dx-facts__val > .dx-icon { color: var(--text-2); margin-top: 2px; }
a.dx-facts__link, a.dx-tl__link { color: var(--primary); text-decoration: none; border-radius: var(--radius-sm); }
a.dx-facts__link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: top; }
a.dx-facts__link:visited, a.dx-tl__link:visited { color: var(--primary); }
a.dx-facts__link:hover, a.dx-tl__link:hover { color: var(--primary-hover); text-decoration: underline; }
a.dx-facts__link:focus-visible, a.dx-tl__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-facts__txt { min-width: 0; }

/* v0.3.0: Timeline. Icoon 16 px in text-2, meta 13/18 in text-3, een lijn line tussen de items */
.dx-tl { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 20px; }
.dx-tl__item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 0 var(--space-3); align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.dx-tl__item:first-child { border-top: 0; padding-top: 0; }
.dx-tl__item:last-child { padding-bottom: 0; }
.dx-tl__item > .dx-icon { color: var(--text-2); margin-top: 2px; }
.dx-tl__main { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.dx-tl__text { color: var(--text); }
.dx-tl__meta { font-size: var(--fs-small, 13px); line-height: var(--lh-small, 18px); color: var(--text-3); }
.dx-tl__aside { text-align: right; white-space: nowrap; }

/* v0.3.0: links in FactList, Timeline en StatusNote hebben op een aanraakscherm een tikvlak van 44 px zonder dat de regel hoger wordt */
@media (pointer: coarse) {
  a.dx-facts__link { display: inline-flex; align-items: center; min-height: var(--tap-min, 44px); margin: -12px 0; }
  /* v0.4.1: de link in een Timeline krijgt zijn tikvlak met binnenruimte (12 px boven en onder) en een even grote negatieve marge,
     in plaats van een minimale hoogte: een link over twee regels houdt zo zijn eigen hoogte en valt niet meer over de regel met datum en naam */
  a.dx-tl__link { display: inline-block; max-width: 100%; padding: 12px 0; margin: -12px 0; }
  a.dx-snote { display: flex; align-items: center; min-height: var(--tap-min, 44px); margin: -13px 0; }
  .dx-phead__meta a.dx-snote { margin: -12px 0; }
  .dx-facts--columns, .dx-facts--auto { row-gap: var(--space-3); }
}

/* v0.3.1: Select als keuzelijst met zoekveld; de knop houdt de maten en rand van het veld */
.dx-select__btn { display: flex; align-items: center; text-align: left; cursor: pointer; gap: var(--space-2); padding-right: var(--space-3); }
.dx-select__btn > .dx-icon { color: var(--text-2); flex: none; }
.dx-select__btn:disabled { cursor: default; }
.dx-select__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-select__val.is-empty { color: var(--text-3); }
.dx-select.is-open .dx-select__btn { border-color: var(--primary); }
.dx-select__pop { position: fixed; z-index: var(--z-popover); display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-float); overflow: hidden; font-family: var(--font-ui); }
.dx-dialog .dx-select__pop, .dx-sheet .dx-select__pop { z-index: calc(var(--z-dialog) + 1); }
.dx-select__search { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border-bottom: 1px solid var(--line); color: var(--text-2); flex: none; }
.dx-select__q { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--text); }
.dx-select__q::placeholder { color: var(--text-3); }
.dx-select__list { list-style: none; margin: 0; padding: var(--space-1) 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.dx-select__opt { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-2) var(--space-3); cursor: pointer; font-size: 15px; line-height: 20px; }
.dx-select__label { flex: 1; min-width: 0; }
.dx-select__opt.is-active { background: var(--hover-bg); }
.dx-select__opt.is-selected { color: var(--primary); font-weight: 600; }
.dx-select__opt.is-selected .dx-icon { color: var(--primary); }
.dx-select__opt.is-disabled { color: var(--text-3); cursor: default; }
.dx-select__none { padding: var(--space-3); color: var(--text-2); font-size: 14px; }
@media (pointer: coarse) { .dx-select__opt { min-height: var(--tap-min, 44px); } .dx-select__q { height: var(--tap-min, 44px); } }
@media (max-width: 767px) { .dx-select__q, .dx-select__opt { font-size: 16px; } }

/* v0.3.2: Select met toevoegen: de laatste regel, met een lijn erboven */
.dx-select__create { color: var(--primary); font-weight: 600; border-top: 1px solid var(--line); margin-top: var(--space-1);
  position: sticky; bottom: calc(-1 * var(--space-1)); background: var(--surface); }
.dx-select__create.is-active { background: linear-gradient(var(--hover-bg), var(--hover-bg)), var(--surface); }
.dx-select__create:first-child { border-top: 0; margin-top: 0; }
.dx-select__create .dx-icon { color: var(--primary); }
.dx-select__hint { margin: 0; padding: var(--space-2) var(--space-3) 0; font-size: 13px; line-height: 18px; color: var(--text-2); }

/* v0.3.5: BarChart. Smalle afgeronde staven voor dit jaar, vorig jaar als lichte schaduwstaaf erachter, zachte hulplijnen, kaartje bij aanwijzen. */
.dx-bars { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; }
.dx-bars__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.dx-bars__key { display: inline-flex; align-items: center; gap: 6px; }
.dx-bars__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dx-bars__swatch--ref { background: color-mix(in srgb, var(--chart-ref) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-ref) 55%, transparent); }
.dx-bars__chart { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 6px; }
.dx-bars__axis { position: relative; min-width: 36px; font-size: 12px; line-height: 16px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dx-bars__axis span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; }
.dx-bars__plot { position: relative; }
.dx-bars__grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--line); }
.dx-bars__grid.is-base { border-top: 1px solid var(--line-strong); }
.dx-bars__cols { position: absolute; inset: 0; display: grid; }
.dx-bars__col { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 100%; cursor: default; border-radius: 6px 6px 0 0; }
.dx-bars__col.is-active { background: var(--hover-bg); }
.dx-bars__ghost { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(78%, 40px); border-radius: 5px 5px 0 0; background: color-mix(in srgb, var(--chart-ref) 22%, transparent); }
.dx-bars__col.is-active .dx-bars__ghost { background: color-mix(in srgb, var(--chart-ref) 34%, transparent); }
.dx-bars__stack { position: relative; width: min(46%, 22px); min-height: 2px; display: flex; flex-direction: column-reverse; gap: 2px; }
.dx-bars__seg { flex-basis: 0; min-height: 2px; }
.dx-bars__seg:last-child { border-radius: 4px 4px 0 0; }
.dx-bars__col.is-dim .dx-bars__seg { opacity: .55; }
.dx-bars__cats { grid-column: 2; display: grid; font-size: 12px; line-height: 16px; color: var(--text-3); text-align: center; }
.dx-bars__cats .is-active { color: var(--text); font-weight: 600; }
.dx-bars__tip { position: absolute; z-index: 2; top: 0; width: 232px; max-width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-float); pointer-events: none; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text); }
.dx-bars__tiphead { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.dx-bars__tiphead span { font-weight: 400; color: var(--text-2); }
.dx-bars__tiprow { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; color: var(--text-2); }
.dx-bars__tiprow.is-total { color: var(--text); font-weight: 600; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.dx-bars__tiprow.is-ref { margin-top: 4px; }
.dx-bars__num { font-family: var(--font-mono); color: var(--text); text-align: right; white-space: nowrap; }
.dx-bars__tipdiff { margin-top: 6px; color: var(--text-2); }
.dx-bars__note { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }

/* v0.4.0: Stages. Lijn met stippen in line-strong, bereikt in primary, datums in text-2. Smal (vak onder 560 px): een regel en alleen de stippen. */
.dx-stages { container: dx-stages / inline-size; }
.dx-stages__compact { display: none; margin: 0 0 12px; }
.dx-stages__list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.dx-stages__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; text-align: center; min-width: 0; }
.dx-stages__step::before { content: ""; position: absolute; top: 5px; left: calc(-50% + 12px); right: calc(50% + 12px); height: 2px; background: var(--line-strong); }
.dx-stages__step:first-child::before { display: none; }
.dx-stages__step.is-done::before, .dx-stages__step.is-current::before, .dx-stages__step.is-passed::before { background: var(--primary); }
.dx-stages__dot { box-sizing: border-box; width: 12px; height: 12px; margin-bottom: 8px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); }
.dx-stages__step.is-done .dx-stages__dot, .dx-stages__step.is-current .dx-stages__dot { border-color: var(--primary); background: var(--primary); }
.dx-stages__step.is-current .dx-stages__dot { box-shadow: 0 0 0 4px var(--selected-bg); }
.dx-stages__step.is-todo .dx-stages__label, .dx-stages__step.is-passed .dx-stages__label { color: var(--text-2); }
.dx-stages__step.is-current .dx-stages__label { color: var(--primary); font-weight: 600; }
.dx-stages__btn { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0 4px 6px; width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; border-radius: var(--radius-sm); }
.dx-stages__btn:hover { background: var(--hover-bg); }
.dx-stages__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-stages__date { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.dx-stages__static { display: none; }
.dx-stages__step.is-outcome .dx-stages__label { font-weight: 600; }
.dx-stages__step.is-outcome.is-danger .dx-stages__dot { border-color: var(--danger); background: var(--danger); }
.dx-stages__step.is-outcome.is-danger .dx-stages__label { color: var(--danger); }
.dx-stages__step.is-outcome.is-success .dx-stages__dot { border-color: var(--success); background: var(--success); }
.dx-stages__step.is-outcome.is-success .dx-stages__label { color: var(--success); }
.dx-stages__step.is-outcome.is-neutral .dx-stages__dot { border-color: var(--text-2); background: var(--text-2); }
@container dx-stages (max-width: 559px) {
  .dx-stages__compact { display: block; }
  .dx-stages__btn { display: none; }
  .dx-stages__static { display: contents; }
  .dx-stages__label, .dx-stages__date { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dx-stages__dot { margin-bottom: 0; }
}

/* v0.4.0: KeyFigures. Een vlak met lijnen ertussen; label 13/16 500, waarde 28/34 mono 500, meta 13/18. Onder 720 px vakbreedte onder elkaar. */
.dx-kfig-wrap { container: dx-kfig / inline-size; }
.dx-kfig { display: grid; grid-template-columns: repeat(var(--dx-kfig-n, 3), minmax(0, 1fr)); margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.dx-kfig__item { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; min-width: 0; color: inherit; text-decoration: none; }
.dx-kfig__item + .dx-kfig__item { border-left: 1px solid var(--line); }
.dx-kfig__item--link:hover { background: var(--hover-bg); }
.dx-kfig__item--link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dx-kfig__label { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--text-2); }
.dx-kfig__value { font-size: 28px; line-height: 34px; font-weight: 500; color: var(--text); }
.dx-kfig__meta { font-size: 13px; line-height: 18px; color: var(--text-2); }
@container dx-kfig (max-width: 719px) {
  .dx-kfig { grid-template-columns: minmax(0, 1fr); }
  .dx-kfig__item { padding: 14px 16px; }
  .dx-kfig__item + .dx-kfig__item { border-left: 0; border-top: 1px solid var(--line); }
  .dx-kfig__value { font-size: 24px; line-height: 30px; }
}

/* v0.4.0: OrderGroups. Groepen met lijnen ertussen in een Card met flush; onder 600 px vakbreedte staat de hoeveelheid onder het waarom. */
.dx-og-wrap { container: dx-og / inline-size; }
.dx-og { display: flex; flex-direction: column; }
.dx-og__group { padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.dx-og__group:first-child { border-top: 0; padding-top: 4px; }
.dx-og__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.dx-og__who { display: flex; flex-direction: column; min-width: 0; }
.dx-og__name { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.dx-og__meta { font-size: 13px; line-height: 18px; color: var(--text-2); }
.dx-og__lines { list-style: none; margin: 8px 0 0; padding: 0; }
.dx-og__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.dx-og__main { display: flex; flex-direction: column; min-width: 0; }
.dx-og__open, .dx-og__title { font: inherit; font-weight: 500; color: var(--text); text-align: left; align-self: flex-start; }
.dx-og__open { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: var(--radius-sm); }
.dx-og__open:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.dx-og__open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-og__code { font-size: 13px; line-height: 18px; color: var(--text-2); }
.dx-og__note { font-size: 14px; line-height: 20px; color: var(--text-2); margin-top: 2px; }
.dx-og__qty { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.dx-og__q { font-weight: 600; color: var(--text); }
.dx-og__qsub { font-size: 13px; line-height: 18px; color: var(--text-2); }
@media (pointer: coarse) { .dx-og__open { min-height: var(--tap-min, 44px); display: inline-flex; align-items: center; } }
@container dx-og (max-width: 599px) {
  .dx-og__group { padding: 12px 16px 14px; }
  .dx-og__line { grid-template-columns: minmax(0, 1fr); }
  .dx-og__qty { align-items: flex-start; text-align: left; white-space: normal; margin-top: 4px; }
}

/* v0.4.0: PlanBoard. Het raster scrolt binnen zijn vak, nooit de pagina; de eerste kolom plakt links. Vandaag onderstreept in primary,
   de gekozen dag in selected-bg, het doelvak bij slepen selected-bg met 2 px primary. Onder 700 px de dagenlijst (als `days` er is). */
.dx-pboard { container: planboard / inline-size; display: flex; flex-direction: column; min-width: 0; }
.dx-pboard--outer { container: none; }
.dx-pboard__wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.dx-pboard__grid { display: flex; flex-direction: column; min-width: var(--dx-pb-min); }
.dx-pboard__head, .dx-pboard__row { display: grid; grid-template-columns: var(--dx-pb-cols); }
.dx-pboard__head { border-bottom: 1px solid var(--line-strong); }
.dx-pboard__row + .dx-pboard__row { border-top: 1px solid var(--line); }
.dx-pboard__corner, .dx-pboard__who { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--line); min-width: 0; }
.dx-pboard__corner { display: flex; align-items: flex-end; padding: 8px 12px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.dx-pboard__col { border-left: 1px solid var(--line); min-width: 0; }
.dx-pboard__corner + .dx-pboard__col { border-left: 0; }
.dx-pboard__colbtn, .dx-pboard__colhd { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 44px; padding: 6px 10px; box-sizing: border-box; font: inherit; color: var(--text); background: none; border: 0; text-align: left; }
.dx-pboard__colbtn { cursor: pointer; }
.dx-pboard__colbtn:hover { background: var(--hover-bg); }
.dx-pboard__colbtn:focus-visible, .dx-pboard__whobtn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dx-pboard__d1 { font-size: 13px; line-height: 18px; font-weight: 600; }
.dx-pboard__d2 { font-size: 13px; line-height: 18px; color: var(--text-2); }
.dx-pboard__col.is-today .dx-pboard__colbtn, .dx-pboard__col.is-today .dx-pboard__colhd { box-shadow: inset 0 -3px 0 var(--primary); }
.dx-pboard__col.is-today .dx-pboard__d1, .dx-pboard__col.is-today .dx-pboard__d2 { color: var(--primary); }
.dx-pboard__col.is-mark { background: var(--selected-bg); }
.dx-pboard__col.is-off .dx-pboard__colbtn, .dx-pboard__col.is-off .dx-pboard__colhd { align-items: center; padding: 6px 0; }
.dx-pboard__who { align-self: stretch; }
.dx-pboard__whobtn { display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; min-height: 44px; padding: 8px 10px; box-sizing: border-box; font: inherit; color: var(--text); background: none; border: 0; text-align: left; cursor: pointer; }
.dx-pboard__whobtn:hover { background: var(--hover-bg); }
.dx-pboard__whobtn.is-static { cursor: default; }
.dx-pboard__whobtn.is-static:hover { background: none; }
.dx-pboard__whobtn .dx-avatar { flex: none; }
.dx-pboard__wt { display: flex; flex-direction: column; min-width: 0; }
.dx-pboard__wn { font-size: 14px; line-height: 18px; font-weight: 600; }
.dx-pboard__ws { font-size: 13px; line-height: 18px; color: var(--text-2); }
.dx-pboard__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 64px; padding: 6px; border-left: 1px solid var(--line); box-sizing: border-box; }
.dx-pboard__cell.is-first { border-left: 0; }
.dx-pboard__cell.is-past { background: var(--bg); }
.dx-pboard__cell.is-mark { background: var(--selected-bg); }
.dx-pboard__cell.is-off { padding: 0; }
.dx-pboard__cell.is-band { min-height: 0; border-bottom: 1px dashed var(--line); }
.dx-pboard__cell.is-thin { min-height: 28px; }
.dx-pboard__cell.is-over { background: var(--selected-bg); outline: 2px solid var(--primary); outline-offset: -2px; }
/* blokkade in een cel (afwezigheid): een vlak met reden, aan te klikken voor details */
.dx-pboard__block { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 32px; padding: 4px 8px; box-sizing: border-box; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 13px; line-height: 17px; font-weight: 500; text-align: left; cursor: pointer; }
.dx-pboard__block:hover { background: var(--hover-bg); }
.dx-pboard__block.is-static { cursor: default; }
.dx-pboard__block.is-static:hover { background: var(--surface-2); }
.dx-pboard__block:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-pboard__blockt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (pointer: coarse) { .dx-pboard__block { min-height: var(--tap-min, 44px); } }
/* dagenlijst: het planbord onder 700 px */
.dx-pboard__days { display: none; flex-direction: column; gap: 16px; }
.dx-pboard__day { display: flex; flex-direction: column; gap: 8px; }
.dx-pboard__dh { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.dx-pboard__dsub { font-size: 14px; font-weight: 500; color: var(--primary); }
.dx-pboard__day.is-mark .dx-pboard__dh { color: var(--primary); }
.dx-pboard__none { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-2); }
.dx-pboard__busy { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.dx-pboard__busy .dx-pitem { width: 44px; flex: none; }
@container planboard (max-width: 699px) {
  .dx-pboard--list .dx-pboard__wrap { display: none; }
  .dx-pboard--list .dx-pboard__days { display: flex; }
}

/* v0.4.0: PlanQueue. Paneel "Te plannen": groepen met een kleine kop, per plaats, regels met lijnen ertussen en altijd de knop Inplannen... */
.dx-pqueue { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 0 4px; }
.dx-pqueue--bare { border: 0; padding: 0; }
.dx-pqueue__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 16px 4px; }
.dx-pqueue__h { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.dx-pqueue__n { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dx-pqueue__intro { margin: 0; padding: 0 16px 8px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.dx-pqueue__empty { margin: 0; padding: 8px 16px 12px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.dx-pqueue__grp { padding: 8px 0 0; border-top: 1px solid var(--line); }
.dx-pqueue__gh { margin: 0; padding: 0 16px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2); }
.dx-pqueue__gh.is-warning { color: var(--warning); }
.dx-pqueue__place { margin: 6px 0 0; padding: 0 16px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.dx-pqueue__list { list-style: none; margin: 0; padding: 0; }
.dx-pqueue__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-top: 1px solid var(--line); }
.dx-pqueue__item.is-draggable { cursor: grab; }
.dx-pqueue__list .dx-pqueue__item:first-child { border-top: 0; }
.dx-pqueue__item.is-hl { background: var(--selected-bg); }
.dx-pqueue__item.is-drag { opacity: .6; }
.dx-pqueue__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dx-pqueue__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dx-pqueue__name { font-weight: 600; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-pqueue__hrs { font-size: 13px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dx-pqueue__what { font-size: 14px; line-height: 20px; }
.dx-pqueue__meta { font-size: 13px; line-height: 18px; color: var(--text-2); }
.dx-pqueue__hint { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--text-2); }
.dx-pqueue__hint .dx-icon { flex: none; margin-top: 1px; color: var(--primary); }
.dx-pqueue__btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 767px) { .dx-pqueue__what, .dx-pqueue__meta, .dx-pqueue__hint { font-size: 15px; line-height: 22px; } }

/* v0.4.0: MyWeek. Lijst per dag, hooguit 720 px breed; vandaag met MyDayCard, de andere dagen als regels. Onder 600 px vakbreedte staat de tijd boven de klant. */
.dx-myweek { container: dx-myweek / inline-size; display: flex; flex-direction: column; gap: 20px; max-width: 720px; width: 100%; }
.dx-myweek__day { display: flex; flex-direction: column; gap: 8px; }
.dx-myweek__h { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.dx-myweek__today { font-size: 14px; font-weight: 500; color: var(--primary); }
.dx-myweek__none { margin: 0; font-size: 15px; line-height: 22px; color: var(--text-2); }
.dx-myweek__abs { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font-weight: 500; }
.dx-myweek__row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.dx-myweek__time { font-size: 15px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dx-myweek__past { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; color: var(--text-2); }
.dx-myweek__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dx-myweek__cust { font-weight: 600; }
.dx-myweek__what, .dx-myweek__with { color: var(--text-2); }
.dx-myweek__main .dx-btn { align-self: flex-start; margin-left: -12px; max-width: calc(100% + 12px); white-space: normal; text-align: left; }
@container dx-myweek (max-width: 599px) { .dx-myweek__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- v0.4.1: uit de UX-audit van Planning, Medewerkers, Bedrijfsonderdelen, Instellingen, Statistieken en Voorraad ---------- */

/* v0.4.1: Switch met help: uitleg onder het label, ingesprongen tot onder de tekst (baan 40 px + space-3) */
.dx-switch-wrap { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.dx-switch__help { margin: 0 0 2px; padding-left: calc(40px + var(--space-3)); font-size: 14px; line-height: 20px; color: var(--text-2); }
@media (max-width: 767px) { .dx-switch__help { font-size: 16px; line-height: 24px; } }

/* v0.4.1: SettingRow. Regels met een lijn ertussen; de eerste regel (ook als eerste kind van een lijst of host) zonder lijn */
.dx-setrow-wrap { container: dx-setrow / inline-size; min-width: 0; border-top: 1px solid var(--line); }
.dx-setrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 10px 0; }
/* de eerste regel van een lijst zonder lijn erboven, ook door een host van de dc-runtime (sc-host-x) of een li heen */
:not(.sc-host-x):not(li) > .dx-setrow-wrap:first-child, :not(li) > .sc-host-x:first-child > .dx-setrow-wrap, li:first-child > .dx-setrow-wrap:first-child, li:first-child > .sc-host-x:first-child > .dx-setrow-wrap { border-top: 0; }
:not(.sc-host-x):not(li) > .dx-setrow-wrap:first-child > .dx-setrow, :not(li) > .sc-host-x:first-child > .dx-setrow-wrap > .dx-setrow, li:first-child > .dx-setrow-wrap:first-child > .dx-setrow, li:first-child > .sc-host-x:first-child > .dx-setrow-wrap > .dx-setrow { padding-top: 0; }
.dx-setrow__act { display: flex; align-items: center; gap: var(--space-2); }
@container dx-setrow (max-width: 599px) {
  .dx-setrow { align-items: start; }
  .dx-setrow .dx-switch__help { padding-left: 0; }
}

/* v0.4.1: MailboxRow. Onder 600 px vakbreedte staan de acties onder de tekst */
.dx-mbox-wrap { container: dx-mbox / inline-size; min-width: 0; border-top: 1px solid var(--line); }
.dx-mbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; padding: 14px 0; }
/* de eerste regel van een lijst zonder lijn erboven, ook door een host van de dc-runtime (sc-host-x) of een li heen */
:not(.sc-host-x):not(li) > .dx-mbox-wrap:first-child, :not(li) > .sc-host-x:first-child > .dx-mbox-wrap, li:first-child > .dx-mbox-wrap:first-child, li:first-child > .sc-host-x:first-child > .dx-mbox-wrap { border-top: 0; }
:not(.sc-host-x):not(li) > .dx-mbox-wrap:first-child > .dx-mbox, :not(li) > .sc-host-x:first-child > .dx-mbox-wrap > .dx-mbox, li:first-child > .dx-mbox-wrap:first-child > .dx-mbox, li:first-child > .sc-host-x:first-child > .dx-mbox-wrap > .dx-mbox { padding-top: 0; }
.dx-mbox__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dx-mbox__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.dx-mbox__addr { font-weight: 600; overflow-wrap: anywhere; }
.dx-mbox__meta { font-size: 14px; line-height: 20px; color: var(--text-2); overflow-wrap: anywhere; }
.dx-mbox__alert { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.dx-mbox__acts { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
@container dx-mbox (max-width: 599px) {
  .dx-mbox { grid-template-columns: minmax(0, 1fr); }
  .dx-mbox__acts { justify-content: flex-start; }
}

/* v0.4.1: Disclosure. Secties direct onder elkaar (zonder tussenruimte): de lijnen vallen samen */
.dx-disc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: -1px; min-width: 0; }
.dx-disc__h { margin: 0; font: inherit; }
.dx-disc__btn, .dx-disc__row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: 8px 0; box-sizing: border-box; border: 0; background: none; color: var(--text); font: inherit; text-align: left; }
.dx-disc__btn { cursor: pointer; border-radius: var(--radius-sm); }
.dx-disc__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-disc__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dx-disc__label { font-size: 16px; line-height: 22px; font-weight: 600; }
.dx-disc__value { font-size: 14px; line-height: 20px; color: var(--text-2); overflow-wrap: anywhere; }
.dx-disc__value.is-warning { color: var(--warning); font-weight: 500; }
.dx-disc__value.is-danger { color: var(--danger); font-weight: 500; }
.dx-disc.is-open .dx-disc__value { display: none; }
.dx-disc__btn > .dx-icon { flex: none; color: var(--text-2); }
.dx-disc.is-open .dx-disc__btn > .dx-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .dx-disc__btn > .dx-icon { transition: transform var(--dur-fast) var(--ease); } }
.dx-disc__body { display: flex; flex-direction: column; gap: var(--space-4); padding: 4px 0 20px; min-width: 0; }
@media (max-width: 767px) { .dx-disc__value { font-size: 16px; line-height: 24px; } }

/* v0.4.1: PlanLegend. Stalen in dezelfde vorm als PlanningItem; de uitleg volgt de breedte van het PlanBoard */
.dx-plegend { container: dx-plegend / inline-size; min-width: 0; }
.dx-plegend--outer { container: none; }
.dx-plegend__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; font-size: 13px; line-height: 18px; color: var(--text-2); }
.dx-plegend__i { display: inline-flex; align-items: center; gap: 6px; }
.dx-plegend__sw { display: inline-block; flex: none; width: 22px; height: 14px; border-radius: 4px; box-sizing: border-box; }
.dx-plegend__sw--visit { border: 2px dashed var(--line-control); background: var(--surface); }
.dx-plegend__sw--moved { border: 1px solid var(--line-strong); border-left: 4px solid var(--info); background: var(--surface-2); }
.dx-plegend__sw--busy { border: 1px solid var(--line-strong); background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--line) 6px 8px); }
.dx-plegend__note.is-list { display: none; }
@container dx-plegend (max-width: 699px) { .dx-plegend__note.is-grid { display: none; } .dx-plegend__note.is-list { display: inline; } }
@container planboard (max-width: 699px) { .dx-plegend--outer .dx-plegend__note.is-grid { display: none; } .dx-plegend--outer .dx-plegend__note.is-list { display: inline; } }

/* v0.4.1: PlanQueue in te klappen tot een strook */
.dx-pqueue__h { margin-right: auto; }
.dx-pqueue__fold { margin: -6px -8px -6px 0; align-self: center; }
.dx-pqueue--rail { padding: 0; width: var(--tap-min, 44px); box-sizing: border-box; }
.dx-pqueue__rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 100%; min-height: 168px; padding: 12px 0; box-sizing: border-box; border: 0; border-radius: var(--radius); background: none; color: var(--text); font: inherit; cursor: pointer; }
.dx-pqueue__rail:hover { background: var(--hover-bg); }
.dx-pqueue__rail:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-pqueue__railn { min-width: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--selected-bg); color: var(--primary); font-size: 14px; line-height: 20px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.dx-pqueue__railt { writing-mode: vertical-rl; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-2); }

/* v0.4.1: OrderGroups compact: per leverancier een regel, zoals een FactList */
.dx-og--compact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.dx-og__crow { display: contents; }
.dx-og__cname { color: var(--text-2); }
.dx-og__cwhat { margin: 0; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
@container dx-og (max-width: 559px) {
  .dx-og--compact { display: flex; flex-direction: column; gap: var(--space-2); }
  .dx-og__crow { display: block; }
  .dx-og__cname { font-size: var(--fs-small, 13px); line-height: var(--lh-small, 18px); }
}

/* v0.4.1: Dialog summary, vast boven de voet */
.dx-dialog__summary { flex: none; margin: 0 var(--space-5) var(--space-4); padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); max-height: 35dvh; overflow-y: auto; }
.dx-dialog__sumtitle { margin: 0 0 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text); }
.dx-dialog__sumtext { margin: 0; font-size: 14px; line-height: 20px; color: var(--text); }
.dx-scrim--dsheet .dx-dialog__summary { margin: 0 var(--space-4) var(--space-3); }
@media (max-width: 767px) { .dx-dialog__sumtext { font-size: 16px; line-height: 24px; } }

/* v0.4.1: BottomSheet met footerLayout 'equal': 2 of 3 gelijke knoppen naast elkaar */
.dx-sheet__foot--equal { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.dx-sheet__foot--equal > .dx-btn, .dx-sheet__foot--equal > .sc-host-x > .dx-btn { width: 100%; min-width: 0; }

/* v0.4.1: BarChart met het toetsenbord; een periode die nog moet komen */
.dx-bars__plot:focus { outline: none; }
.dx-bars__plot:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.dx-bars__tipnone { color: var(--text-2); margin-bottom: 2px; }

/* v0.4.3: ProviderLogo, ProviderChoice en het merkteken in MailboxRow */
.dx-plogo { display: block; flex: none; }
.dx-pchoice { container: dx-pchoice / inline-size; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dx-pchoice__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); }
.dx-pchoice__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container dx-pchoice (max-width: 439px) { .dx-pchoice__row { grid-template-columns: minmax(0, 1fr); } }
.dx-pchoice__btn { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; box-sizing: border-box; width: 100%;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-control); border-radius: var(--radius);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.dx-pchoice__btn:hover { background: var(--surface-2); border-color: var(--primary); }
.dx-pchoice__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-pchoice__btn.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--selected-bg); }
.dx-pchoice__btn:disabled { opacity: .5; cursor: not-allowed; }
.dx-pchoice__btn > .dx-icon:last-child { margin-left: auto; color: var(--text-2); flex: none; }
.dx-pchoice__txt { display: flex; flex-direction: column; min-width: 0; }
.dx-pchoice__label { font-weight: 600; line-height: 22px; }
.dx-pchoice__sub { font-size: 13px; line-height: 18px; color: var(--text-2); }
.dx-pchoice__note { margin: 0; font-size: 13px; line-height: 18px; color: var(--text-2); }
.dx-mbox__id { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.dx-mbox__id > .dx-plogo { margin-top: 1px; }
@media (max-width: 767px) { .dx-pchoice__sub, .dx-pchoice__note { font-size: 14px; line-height: 20px; } }
/* v0.4.3: Tabs, een teller met toon ("verlopen" op het tabblad E-mail); ook op het actieve tabblad blijft de toon */
.dx-tab__count.is-warning, .dx-tab[aria-selected="true"] .dx-tab__count.is-warning { background: var(--warning-bg); color: var(--warning); box-shadow: none; }
.dx-tab__count.is-danger, .dx-tab[aria-selected="true"] .dx-tab__count.is-danger { background: var(--danger-bg); color: var(--danger); box-shadow: none; }
/* v0.4.4: Select, een beschrijvingsregel per optie */
.dx-select__opt.has-desc { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.dx-select__opt.has-desc > .dx-icon { margin-top: 2px; }
.dx-select__opt.has-desc > .dx-select__label { display: flex; flex-direction: column; gap: 2px; }
.dx-select__desc { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text-2); }
.dx-select__opt.is-selected .dx-select__desc { color: var(--text-2); }
@media (max-width: 767px) { .dx-select__desc { font-size: 14px; line-height: 20px; } }

/* ---------- navigatie (v0.5.0: licht en rustig; merk, organisatie en zoeken bovenaan, gebruiker en meldingen onderaan) ---------- */
.dx-sidenav { width: var(--sidenav-w); background: var(--sidenav-bg); color: var(--sidenav-text); display: flex; flex-direction: column; padding: var(--space-3) var(--space-3) 0; gap: 6px; box-sizing: border-box; border-right: 1px solid var(--sidenav-line); }
/* de schil geeft de hoogte (sticky, 100dvh, overflow-y auto); geen min-height hier, anders groeit het menu mee met de pagina en zakt de voet uit beeld */
.dx-sidenav__head { display: flex; flex-direction: column; gap: 6px; padding-bottom: var(--space-1); }
.dx-sidenav__brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 2px; }
.dx-brandmark { display: block; flex: none; }
.dx-brandmark__front { fill: var(--brand-mark-front); }
.dx-brandmark__back { fill: var(--brand-mark-back); }
.dx-wordmark { font-weight: 500; font-size: 15px; line-height: 20px; letter-spacing: .16em; color: var(--sidenav-text); }
.dx-sidenav__org { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px; padding: 0 10px; box-sizing: border-box; border: 0; border-radius: var(--radius-sm); background: none; color: var(--sidenav-text); font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; text-align: left; cursor: pointer; }
.dx-sidenav__org:hover { background: var(--sidenav-hover); }
.dx-sidenav__orgname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-sidenav__org .dx-icon { color: var(--sidenav-text-2); flex: none; }
.dx-sidenav__search { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--sidenav-line); border-radius: var(--radius-sm); background: var(--surface); color: var(--sidenav-text-2); font: inherit; font-size: 14px; line-height: 20px; cursor: text; text-align: left; }
.dx-sidenav__search:hover { border-color: var(--line-control); }
.dx-sidenav__search .dx-sidenav__label { flex: 1; min-width: 0; }
.dx-sidenav__kbd { font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--sidenav-text-2); }
.dx-sidenav__sec { display: flex; flex-direction: column; gap: 1px; }
.dx-sidenav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.dx-sidenav__group { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0; color: var(--sidenav-text-2); opacity: 1; padding: 6px 10px 2px; }
.dx-sidenav__item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; box-sizing: border-box; border-radius: var(--radius-sm); color: var(--sidenav-text); text-decoration: none; font: inherit; font-size: 14px; line-height: 20px; font-weight: 400; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.dx-sidenav__item > .dx-icon { color: var(--sidenav-text-2); flex: none; }
.dx-sidenav__item > .dx-sidenav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-sidenav__item:hover, a.dx-sidenav__item:hover, a.dx-sidenav__item:focus-visible { background: var(--sidenav-hover); color: var(--sidenav-text); }
.dx-sidenav__item[aria-current="page"], a.dx-sidenav__item[aria-current="page"]:hover, a.dx-sidenav__item[aria-current="page"]:focus-visible { background: var(--sidenav-active-bg); color: var(--sidenav-active-text); font-weight: 600; }
.dx-sidenav__item[aria-current="page"] > .dx-icon { color: var(--sidenav-icon-active); }
.dx-sidenav__item:focus-visible, .dx-sidenav__org:focus-visible, .dx-sidenav__search:focus-visible, .dx-sidenav__user:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dx-sidenav__count { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--sidenav-text-2); flex: none; }
.dx-sidenav__item[aria-current="page"] .dx-sidenav__count { color: var(--sidenav-icon-active); }
.dx-sidenav__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; }
.dx-sidenav__dot.is-danger { background: var(--danger); }
.dx-sidenav__dot.is-warning { background: var(--warning); }
/* de voet blijft onderaan in beeld, ook als het menu op een laag scherm scrolt */
.dx-sidenav__foot { margin-top: auto; display: flex; align-items: center; gap: 4px; padding: var(--space-2) 0 var(--space-1); border-top: 1px solid var(--sidenav-line); position: sticky; bottom: 0; background: var(--sidenav-bg); }
.dx-sidenav__user { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--sidenav-text); font: inherit; font-size: 14px; line-height: 20px; text-align: left; cursor: pointer; }
.dx-sidenav__user:hover { background: var(--sidenav-hover); }
.dx-sidenav__user > .dx-sidenav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-sidenav__bell .dx-iconbtn { color: var(--sidenav-text-2); }
.dx-sidenav__item.is-disabled { cursor: default; opacity: .55; }
.dx-sidenav__item.is-disabled:hover { background: none; }
.dx-sidenav__item.is-disabled { height: auto; min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
.dx-sidenav__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.dx-sidenav__soon { font-size: .75em; font-weight: 400; }
@media (pointer: coarse) { .dx-sidenav__item, .dx-sidenav__org, .dx-sidenav__search { min-height: var(--tap-min, 44px); } }
/* tablet (venster 768 tot 1100 px): iconenbalk van 76 px; de schil zet de kolom op 76 px. Labels staan als title op de links. */
@media (min-width: 768px) and (max-width: 1100px) {
  .dx-sidenav { width: 76px; padding: 10px 10px 8px; gap: 4px; }
  .dx-sidenav__head { gap: 4px; padding-bottom: 0; }
  .dx-sidenav__brand { justify-content: center; padding: 6px 0 4px; }
  .dx-wordmark, .dx-sidenav__org, .dx-sidenav__label, .dx-sidenav__kbd, .dx-sidenav__count { display: none; }
  .dx-sidenav__search { justify-content: center; padding: 0; height: 44px; }
  .dx-sidenav__item { justify-content: center; padding: 0; height: 44px; min-height: 44px; position: relative; }
  .dx-sidenav__dot { position: absolute; top: 9px; right: 11px; }
  .dx-sidenav__group { font-size: 0; line-height: 0; height: 1px; padding: 0; margin: 3px 10px; background: var(--sidenav-line); }
  .dx-sidenav__foot { flex-direction: column; gap: 2px; padding-top: 4px; }
  .dx-sidenav__user { justify-content: center; padding: 0; flex: none; width: 100%; min-height: 44px; }
}

/* v0.5.1: zoeken in alles (CommandPalette via de SideNav, Ctrl K of ⌘ K) */
.dx-scrim--palette { z-index: calc(var(--z-dialog) + 2); }
.dx-palette { display: flex; flex-direction: column; max-height: min(640px, calc(100dvh - 24vh)); }
.dx-palette__results { max-height: none; flex: 1; min-height: 0; overflow: auto; }
.dx-palette__close { display: none; }
.dx-palette .dx-list__group { display: flex; justify-content: space-between; }
@media (max-width: 767px) {
  .dx-scrim--palette { padding: 0 !important; align-items: stretch !important; }
  .dx-scrim--palette .dx-palette { max-width: none; max-height: none; height: 100dvh; border-radius: 0; border: 0; }
  .dx-palette__search { height: 60px; padding: 0 var(--space-2) 0 var(--space-4); }
  .dx-palette__search input { font-size: 17px; }
  .dx-palette__esc, .dx-palette__foot { display: none; }
  .dx-palette__close { display: inline-flex; }
}
/* v0.5.2: gebruiker en bel als link; op Mijn account of Meldingen gemarkeerd zoals een actief item */
a.dx-sidenav__user { text-decoration: none; }
a.dx-sidenav__user:hover { color: var(--sidenav-text); }
.dx-sidenav__user[aria-current="page"] { background: var(--sidenav-active-bg); color: var(--sidenav-active-text); font-weight: 600; }
.dx-sidenav__bell .dx-iconbtn.is-current { background: var(--sidenav-active-bg); color: var(--sidenav-icon-active); }