/* Daily Matters Design System 1.0 — vendored uit het ontwerppakket.
   Niet met de hand aanpassen. Bij een nieuwe versie van het design system
   opnieuw overnemen; alleen de font-urls zijn herschreven naar /fonts/.
   Projecteigen stijlen staan in aanmeldformulier.css. */

/* ============================================================
   Daily Matters — Design System 1.0
   Global stylesheet entry point.
   Consumers link THIS file. It only @imports — no rules here.
   ============================================================ */

/* ============================================================
   Daily Matters — Webfonts
   Figtree  → workhorse sans (body, UI, most headings)
   Lufga    → display face, reserved for large brand statements
   ============================================================ */

/* ---------- Figtree ---------- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/figtree-300.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/figtree-400.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/figtree-400-italic.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/figtree-500.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/figtree-500-italic.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/figtree-600.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/figtree-700.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/figtree-800.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/figtree-900.ttf") format("truetype");
}

/* ---------- Lufga (display) ---------- */
@font-face {
  font-family: "Lufga";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/lufga-700.otf") format("opentype");
}

/* ---------- Space Mono (technisch: expressies, serienummers, checksums) ---------- */
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/space-mono-400.ttf") format("truetype");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-mono-700.ttf") format("truetype");
}

/* ============================================================
   Daily Matters — Colour tokens
   ONLY the nine brand colours the client supplied. No tint/shade
   scales. A handful of interaction states (hover/press) and soft
   washes are expressed as opacity/mix of these same colours — never
   as new brand colours.
   ============================================================ */

:root {
  /* ---------- The nine brand colours ---------- */
  --dm-white:        #ffffff;
  --dm-black:        #000000;
  --dm-midnight:     #1e2b3d; /* navy — primary */
  --dm-sky:          #566581; /* slate blue */
  --dm-sky-light:    #7c8ead; /* light slate */
  --dm-ice:          #b1b9ca; /* pale blue-grey */
  --dm-biscuit:      #b99560; /* gold — accent */
  --dm-cotton:       #f1f2ee; /* warm off-white (matches the live site) */

  /* ============================================================
     Semantic aliases — reach for these in components.
     Every one resolves to a brand colour above.
     ============================================================ */

  /* Surfaces */
  --dm-bg:             var(--dm-cotton);
  --dm-surface:        var(--dm-white);
  --dm-surface-sunken: var(--dm-cotton);
  --dm-surface-sunken-soft: color-mix(in srgb, var(--dm-cotton) 45%, var(--dm-white)); /* lichter dan cotton — voor vlakken ín witte kaarten/tabellen, zodat het contrasteert met wit én met de cotton-achtergrond */
  --dm-surface-raised: var(--dm-white);
  --dm-surface-inverse:  var(--dm-midnight);
  --dm-surface-inverse-2: var(--dm-midnight);

  /* Text */
  --dm-text:            var(--dm-midnight);
  --dm-text-muted:      var(--dm-sky);
  --dm-text-subtle:     var(--dm-sky-light);
  --dm-text-inverse:       var(--dm-white);   /* white on navy — clean */
  --dm-text-inverse-muted: var(--dm-cotton);  /* off-white, still light */
  --dm-text-on-accent:  var(--dm-white); /* wit op biscuit — meer contrast dan midnight */
  --dm-text-accent:     var(--dm-biscuit);

  /* Accent + primary */
  --dm-accent:        var(--dm-biscuit);
  --dm-accent-hover:  color-mix(in srgb, var(--dm-biscuit) 88%, var(--dm-black));
  --dm-accent-press:  color-mix(in srgb, var(--dm-biscuit) 78%, var(--dm-black));
  --dm-accent-soft:   color-mix(in srgb, var(--dm-biscuit) 14%, var(--dm-white));
  --dm-primary:       var(--dm-midnight);
  --dm-primary-hover: color-mix(in srgb, var(--dm-midnight) 88%, var(--dm-black));
  --dm-primary-press: var(--dm-black);

  /* Borders & lines (flat design leans on hairlines, not shadows) */
  --dm-border:        var(--dm-ice);
  --dm-border-strong: var(--dm-sky-light);
  --dm-border-subtle: var(--dm-cotton);
  --dm-border-inverse: rgba(255, 255, 255, 0.18);
  --dm-ring:          var(--dm-biscuit);

  /* Links */
  --dm-link:          var(--dm-biscuit);
  --dm-link-hover:    color-mix(in srgb, var(--dm-biscuit) 82%, var(--dm-black));

  /* ---------- Functional / system states ----------
     Statuspalet aangeleverd door de klant (juli 2026) — groen t/m rood.
     Raw = vlakken, dots, badges, grafieken. -ink = tekstveilige variant
     (zelfde kleur richting zwart genudged, WCAG AA op wit/cotton). */
  --dm-status-green:       #449D66; /* positief / akkoord / geleverd */
  --dm-status-green-light: #79C089; /* deels / onderweg */
  --dm-status-blue:        #9BBBD3; /* informatief / in behandeling */
  --dm-status-orange:      #E67A50; /* waarschuwing / wacht op actie */
  --dm-status-red:         #D74230; /* fout / geblokkeerd / verlopen */

  --dm-success:     var(--dm-status-green);
  --dm-warning:     var(--dm-status-orange);
  --dm-danger:      var(--dm-status-red);
  --dm-info:        var(--dm-status-blue);
  --dm-success-ink: color-mix(in srgb, var(--dm-status-green) 74%, var(--dm-black));
  --dm-warning-ink: color-mix(in srgb, var(--dm-status-orange) 66%, var(--dm-black));
  --dm-danger-ink:  color-mix(in srgb, var(--dm-status-red) 76%, var(--dm-black));
  --dm-info-ink:    color-mix(in srgb, var(--dm-status-blue) 44%, var(--dm-black));
  --dm-success-bg:  color-mix(in srgb, var(--dm-status-green) 13%, var(--dm-white));
  --dm-warning-bg:  color-mix(in srgb, var(--dm-status-orange) 14%, var(--dm-white));
  --dm-danger-bg:   color-mix(in srgb, var(--dm-status-red) 12%, var(--dm-white));
  --dm-info-bg:     color-mix(in srgb, var(--dm-status-blue) 20%, var(--dm-white));

  /* Bedragen: positief blijft gewoon tekst (midnight); alleen negatief
     kleurt. Δ-kolommen (maand-op-maand) kleuren wél twee kanten op. */
  --dm-amount-neg: var(--dm-danger-ink);
  --dm-delta-pos:  var(--dm-success-ink);
  --dm-delta-neg:  var(--dm-danger-ink);

  /* Grafiekreeksen (begrotingsmonitor): merkpalet; semantisch rood
     alleen bij overschrijding. */
  --dm-chart-1:    var(--dm-midnight);  /* realisatie */
  --dm-chart-2:    var(--dm-biscuit);   /* begroting */
  --dm-chart-3:    var(--dm-sky-light);
  --dm-chart-4:    var(--dm-ice);
  --dm-chart-over: var(--dm-status-red);

  /* ============================================================
     Internal aliases — legacy names mapped onto the nine colours
     so components keep working. NOT part of the public palette;
     they never appear as a "scale" in the design system.
     ============================================================ */
  --dm-midnight-950: var(--dm-black);
  --dm-midnight-900: var(--dm-midnight);
  --dm-midnight-800: color-mix(in srgb, var(--dm-midnight) 90%, var(--dm-white));
  --dm-midnight-700: color-mix(in srgb, var(--dm-midnight) 82%, var(--dm-white));
  --dm-midnight-600: var(--dm-sky);
  --dm-slate-600:    var(--dm-sky);
  --dm-slate-500:    var(--dm-sky);
  --dm-slate-400:    var(--dm-sky-light);
  --dm-slate-300:    var(--dm-ice);
  --dm-slate-200:    var(--dm-ice);
  --dm-neutral-100:  var(--dm-cotton);
  --dm-neutral-200:  var(--dm-ice);
  --dm-neutral-300:  var(--dm-sky-light);
  --dm-biscuit-700:  var(--dm-biscuit);
  --dm-biscuit-600:  var(--dm-biscuit);
  --dm-biscuit-500:  var(--dm-biscuit);
  --dm-biscuit-400:  var(--dm-biscuit);
  --dm-biscuit-300:  var(--dm-biscuit);
  --dm-biscuit-200:  color-mix(in srgb, var(--dm-biscuit) 30%, var(--dm-white));
  --dm-biscuit-100:  color-mix(in srgb, var(--dm-biscuit) 14%, var(--dm-white));
  --dm-cotton-100:   var(--dm-cotton);
  --dm-cotton-200:   var(--dm-cotton);
  --dm-cotton-300:   color-mix(in srgb, var(--dm-cotton) 92%, var(--dm-black));
}

/* ============================================================
   Daily Matters — Typography tokens
   Figtree = workhorse (body, UI, headings).
   Lufga   = display, reserved for large brand statements/quotes.
   ============================================================ */

:root {
  /* ---------- Families ---------- */
  --dm-font-sans:    "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dm-font-display: "Lufga", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --dm-font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Cijfers ----------
     Tabelcijfers voor uitgelijnde bedragen/kolommen: zet
     `font-variant-numeric: var(--dm-numeric-tabular)` (of class .dm-num). */
  --dm-numeric-tabular: lining-nums tabular-nums; /* @kind other */

  /* ---------- Weights (Figtree ships 300–900) ---------- */
  --dm-weight-light:     300;
  --dm-weight-regular:   400;
  --dm-weight-medium:    500;
  --dm-weight-semibold:  600;
  --dm-weight-bold:      700;
  --dm-weight-extrabold: 800;
  --dm-weight-black:     900;

  /* ---------- Type scale (1.250 major-third-ish, tuned) ---------- */
  --dm-text-2xs:  0.6875rem; /* 11 — micro labels */
  --dm-text-xs:   0.75rem;   /* 12 */
  --dm-text-sm:   0.875rem;  /* 14 */
  --dm-text-base: 1rem;      /* 16 — body */
  --dm-text-md:   1.125rem;  /* 18 — lead body */
  --dm-text-lg:   1.25rem;   /* 20 */
  --dm-text-xl:   1.5rem;    /* 24 */
  --dm-text-2xl:  1.875rem;  /* 30 */
  --dm-text-3xl:  2.25rem;   /* 36 */
  --dm-text-4xl:  3rem;      /* 48 */
  --dm-text-5xl:  3.75rem;   /* 60 */
  --dm-text-6xl:  4.75rem;   /* 76 — hero display */
  --dm-text-7xl:  6rem;      /* 96 — full-bleed statement */

  /* ---------- Line heights ---------- */
  --dm-leading-none:    1;
  --dm-leading-tight:   1.1;   /* display headlines */
  --dm-leading-snug:    1.25;  /* headings */
  --dm-leading-normal:  1.5;   /* body */
  --dm-leading-relaxed: 1.65;  /* long-form paragraphs */

  /* ---------- Letter spacing ---------- */
  --dm-tracking-tighter: -0.03em; /* large display */
  --dm-tracking-tight:   -0.015em;/* headings */
  --dm-tracking-normal:  0;
  --dm-tracking-wide:    0.02em;
  --dm-tracking-wider:   0.08em;  /* eyebrows / all-caps labels */
  --dm-tracking-widest:  0.16em;
}

/* ============================================================
   Daily Matters — Spacing, radii, shadows, borders, motion
   4px base grid. Soft, generous, warm.
   ============================================================ */

:root {
  /* ---------- Spacing scale (4px base) ---------- */
  --dm-space-0:   0;
  --dm-space-px:  1px;
  --dm-space-1:   0.25rem;  /* 4  */
  --dm-space-2:   0.5rem;   /* 8  */
  --dm-space-3:   0.75rem;  /* 12 */
  --dm-space-4:   1rem;     /* 16 */
  --dm-space-5:   1.25rem;  /* 20 */
  --dm-space-6:   1.5rem;   /* 24 */
  --dm-space-7:   1.75rem;  /* 28 */
  --dm-space-8:   2rem;     /* 32 */
  --dm-space-10:  2.5rem;   /* 40 */
  --dm-space-12:  3rem;     /* 48 */
  --dm-space-14:  3.5rem;   /* 56 */
  --dm-space-16:  4rem;     /* 64 */
  --dm-space-20:  5rem;     /* 80 */
  --dm-space-24:  6rem;     /* 96 */
  --dm-space-32:  8rem;     /* 128 */
  --dm-space-40:  10rem;    /* 160 */

  /* ---------- Radii — FLAT brand: square corners.
     Only pills (buttons/chips) and circles (avatars) are round;
     form controls get a soft friendly rounding (client request).
     App-kaders (tabellen, panelen, kaarten in applicaties) kregen
     per client-besluit (juli 2026) een lichte 6px afronding. ---------- */
  --dm-radius-xs:   0;
  --dm-radius-sm:   0;
  --dm-radius-md:   0;
  --dm-radius-lg:   0;
  --dm-radius-xl:   0;
  --dm-radius-2xl:  0;
  --dm-radius-card: 6px;  /* app-kaders: tabellen, panelen, kaarten, dialogen */
  --dm-radius-field: 10px; /* inputs, selects, textareas */
  --dm-radius-check: 6px;  /* checkboxes */
  --dm-radius-pill: 999px; /* buttons, chips */
  --dm-radius-full: 50%;   /* avatars */

  /* ---------- Border widths ---------- */
  --dm-border-width:      1px;
  --dm-border-width-thick:1.5px;

  /* ---------- Shadows — FLAT brand: none.
     The brand separates with hairline borders, not shadows.
     Only the focus ring remains (accessibility). ---------- */
  --dm-shadow-xs:  none;
  --dm-shadow-sm:  none;
  --dm-shadow-md:  none;
  --dm-shadow-lg:  none;
  --dm-shadow-xl:  none;
  --dm-shadow-focus: 0 0 0 3px rgba(185, 149, 96, 0.40); /* biscuit focus ring */
  --dm-shadow-inset: none;

  /* ---------- Motion ---------- */
  --dm-ease:         cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dm-ease-in-out:  cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --dm-duration-fast:   140ms; /* @kind other */
  --dm-duration-base:   220ms; /* @kind other */
  --dm-duration-slow:   360ms; /* @kind other */

  /* ---------- Layout ---------- */
  --dm-container:      1200px;
  --dm-container-wide: 1440px;
  --dm-container-text: 68ch;

  /* ---------- Z-index ---------- */
  --dm-z-base:     0; /* @kind other */
  --dm-z-raised:   10; /* @kind other */
  --dm-z-sticky:   100; /* @kind other */
  --dm-z-overlay:  1000; /* @kind other */
  --dm-z-modal:    1100; /* @kind other */
  --dm-z-toast:    1200; /* @kind other */
}

/* ============================================================
   Daily Matters — Base element defaults
   Lightweight, opt-in resets + brand element styling.
   Kept minimal so it plays nicely inside host apps.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--dm-font-sans);
  font-size: var(--dm-text-base);
  font-weight: var(--dm-weight-regular);
  line-height: var(--dm-leading-normal);
  color: var(--dm-text);
  background-color: var(--dm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}

/* Headings — Figtree, tight, confident */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--dm-font-sans);
  font-weight: var(--dm-weight-bold);
  line-height: var(--dm-leading-snug);
  letter-spacing: var(--dm-tracking-tight);
  color: var(--dm-text);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* Links — biscuit, subtle underline that thickens on hover */
a {
  color: var(--dm-link);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dm-duration-fast) var(--dm-ease);
}
a:hover {
  color: var(--dm-link-hover);
  text-decoration: underline;
}

/* Media */
img, svg, video {
  display: block;
  max-width: 100%;
}

/* Forms inherit type */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Selection */
::selection {
  background: var(--dm-biscuit-200);
  color: var(--dm-midnight-900);
}

/* Focus-visible ring */
:focus-visible {
  outline: 2px solid var(--dm-biscuit-500);
  outline-offset: 2px;
}

hr {
  border: none;
  border-top: 1px solid var(--dm-border);
  margin: var(--dm-space-8) 0;
}

code, pre, kbd {
  font-family: var(--dm-font-mono);
}

/* ============================================================
   Daily Matters — Component styles
   Classes consumed by the React components in _ds_bundle.js.
   Imported from styles.css so consumers get it for free.
   All values come from the design tokens.
   ============================================================ */

/* ---------------------------------------------------------------
   Button
   --------------------------------------------------------------- */
.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dm-space-2);
  font-family: var(--dm-font-display);
  font-weight: var(--dm-weight-bold);
  font-size: var(--dm-text-sm);
  line-height: 1;
  letter-spacing: var(--dm-tracking-normal);
  /* Optische correctie: Lufga-inkt zit ~4% van de korpsgrootte boven het
     wiskundig midden; padding-top duwt de tekst terug naar het optisch midden. */
  padding: 0.08em var(--dm-space-5) 0;
  height: 42px;
  border-radius: var(--dm-radius-pill);
  border: var(--dm-border-width) solid transparent;
  background: var(--dm-primary);
  color: var(--dm-text-inverse);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dm-duration-fast) var(--dm-ease),
    color var(--dm-duration-fast) var(--dm-ease),
    border-color var(--dm-duration-fast) var(--dm-ease),
    box-shadow var(--dm-duration-fast) var(--dm-ease),
    transform var(--dm-duration-fast) var(--dm-ease);
}
.dm-btn:focus-visible {
  outline: none;
  box-shadow: var(--dm-shadow-focus);
}
.dm-btn:active { transform: translateY(0.5px) scale(0.985); }
.dm-btn:disabled,
.dm-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Sizes */
.dm-btn--sm { height: 34px; font-size: var(--dm-text-xs); padding: 0.08em var(--dm-space-4) 0; gap: var(--dm-space-1); }
.dm-btn--lg { height: 48px; font-size: var(--dm-text-base); padding: 0.08em var(--dm-space-6) 0; }
.dm-btn--block { width: 100%; }
.dm-btn--pill { border-radius: var(--dm-radius-pill); }

/* Variants */
.dm-btn--primary   { background: var(--dm-primary); color: var(--dm-text-inverse); }
.dm-btn--primary:hover   { background: var(--dm-primary-hover); }
.dm-btn--primary:active  { background: var(--dm-primary-press); }

.dm-btn--accent    { background: var(--dm-accent); color: var(--dm-text-on-accent); }
.dm-btn--accent:hover    { background: var(--dm-accent-hover); }
.dm-btn--accent:active   { background: var(--dm-accent-press); }

.dm-btn--secondary { background: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border-strong); }
.dm-btn--secondary:hover { background: var(--dm-surface-sunken); border-color: var(--dm-slate-300); }
.dm-btn--secondary:active{ background: var(--dm-cotton-300); }

.dm-btn--ghost     { background: transparent; color: var(--dm-text); }
.dm-btn--ghost:hover     { background: var(--dm-surface-sunken); }
.dm-btn--ghost:active    { background: var(--dm-cotton-300); }

/* Outline — thin biscuit pill, transparent fill, biscuit text.
   Works on both light and dark backgrounds. */
.dm-btn--outline {
  background: transparent;
  color: var(--dm-biscuit);
  border-color: var(--dm-biscuit);
  border-width: var(--dm-border-width-thick);
}
.dm-btn--outline:hover { background: color-mix(in srgb, var(--dm-biscuit) 12%, transparent); }
.dm-btn--outline:active { background: color-mix(in srgb, var(--dm-biscuit) 20%, transparent); }

.dm-btn--link {
  background: transparent; color: var(--dm-link);
  font-family: var(--dm-font-sans); font-weight: var(--dm-weight-semibold);
  height: auto; padding: 0; border-radius: 0;
  text-underline-offset: 0.2em;
}
.dm-btn--link:hover { color: var(--dm-link-hover); text-decoration: underline; }
.dm-btn--link:active { transform: none; }

/* On dark surfaces */
.dm-btn--on-dark.dm-btn--secondary { background: transparent; color: var(--dm-text-inverse); border-color: var(--dm-border-inverse); }
.dm-btn--on-dark.dm-btn--secondary:hover { background: rgba(255,255,255,0.08); }
.dm-btn--on-dark.dm-btn--ghost { color: var(--dm-text-inverse); }
.dm-btn--on-dark.dm-btn--ghost:hover { background: rgba(255,255,255,0.08); }

.dm-btn__icon { display: inline-flex; margin: 0 -2px; }

/* ---------------------------------------------------------------
   IconButton
   --------------------------------------------------------------- */
.dm-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--dm-radius-pill);
  border: var(--dm-border-width) solid transparent;
  background: transparent;
  color: var(--dm-text-muted);
  cursor: pointer;
  transition: background var(--dm-duration-fast) var(--dm-ease),
    color var(--dm-duration-fast) var(--dm-ease),
    box-shadow var(--dm-duration-fast) var(--dm-ease);
}
.dm-iconbtn:hover { background: var(--dm-surface-sunken); color: var(--dm-text); }
.dm-iconbtn:active { transform: scale(0.94); }
.dm-iconbtn:focus-visible { outline: none; box-shadow: var(--dm-shadow-focus); }
.dm-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.dm-iconbtn--sm { width: 36px; height: 36px; border-radius: var(--dm-radius-pill); }
.dm-iconbtn--lg { width: 52px; height: 52px; }
.dm-iconbtn--solid { background: var(--dm-primary); color: var(--dm-text-inverse); }
.dm-iconbtn--solid:hover { background: var(--dm-primary-hover); color: var(--dm-text-inverse); }
.dm-iconbtn--outline { border-color: var(--dm-border-strong); }
.dm-iconbtn--outline:hover { border-color: var(--dm-slate-300); background: var(--dm-surface-sunken); }

/* ---------------------------------------------------------------
   Badge — small status / label
   --------------------------------------------------------------- */
.dm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dm-space-1);
  font-family: var(--dm-font-sans);
  font-weight: var(--dm-weight-semibold);
  font-size: var(--dm-text-xs);
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--dm-radius-pill);
  background: var(--dm-surface-sunken);
  color: var(--dm-text-muted);
  white-space: nowrap;
}
.dm-badge--sm { font-size: var(--dm-text-2xs); padding: 3px 8px; }
.dm-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dm-badge--neutral { background: var(--dm-surface-sunken); color: var(--dm-text-muted); }
.dm-badge--accent  { background: var(--dm-biscuit-100); color: var(--dm-midnight); }
.dm-badge--navy    { background: var(--dm-midnight-900); color: var(--dm-cotton-100); }
.dm-badge--success { background: var(--dm-success-bg); color: var(--dm-success-ink); }
.dm-badge--success-soft { background: color-mix(in srgb, var(--dm-status-green-light) 20%, var(--dm-white)); color: color-mix(in srgb, var(--dm-status-green-light) 46%, var(--dm-black)); }
.dm-badge--warning { background: var(--dm-warning-bg); color: var(--dm-warning-ink); }
.dm-badge--danger  { background: var(--dm-danger-bg); color: var(--dm-danger-ink); }
.dm-badge--info    { background: var(--dm-info-bg); color: var(--dm-info-ink); }
.dm-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--dm-border-strong); color: var(--dm-text-muted); }

/* ---------------------------------------------------------------
   Tag / Chip — interactive, selectable, dismissible
   --------------------------------------------------------------- */
.dm-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--dm-space-2);
  font-family: var(--dm-font-sans);
  font-weight: var(--dm-weight-medium);
  font-size: var(--dm-text-sm);
  line-height: 1;
  padding: 7px 14px;
  border-radius: var(--dm-radius-pill);
  background: var(--dm-surface);
  color: var(--dm-text);
  border: var(--dm-border-width) solid var(--dm-border-strong);
  cursor: default;
  transition: background var(--dm-duration-fast) var(--dm-ease),
    border-color var(--dm-duration-fast) var(--dm-ease),
    color var(--dm-duration-fast) var(--dm-ease);
}
button.dm-tag { cursor: pointer; }
button.dm-tag:hover { border-color: var(--dm-slate-300); background: var(--dm-surface-sunken); }
.dm-tag:focus-visible { outline: none; box-shadow: var(--dm-shadow-focus); }
.dm-tag--selected {
  background: var(--dm-midnight-900);
  color: var(--dm-cotton-100);
  border-color: var(--dm-midnight-900);
}
.dm-tag--selected:hover { background: var(--dm-midnight-800); border-color: var(--dm-midnight-800); }
.dm-tag__close {
  display: inline-flex;
  margin-right: -4px;
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity var(--dm-duration-fast) var(--dm-ease);
}
.dm-tag__close:hover { opacity: 1; }

/* ---------------------------------------------------------------
   Avatar — circular by default
   --------------------------------------------------------------- */
.dm-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--dm-radius-full);
  background: var(--dm-midnight-800);
  color: var(--dm-cotton-100);
  font-family: var(--dm-font-sans);
  font-weight: var(--dm-weight-semibold);
  font-size: var(--dm-text-sm);
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}
.dm-avatar--rounded { border-radius: var(--dm-radius-md); }
.dm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-avatar--ring { box-shadow: 0 0 0 2px var(--dm-surface), 0 0 0 3.5px var(--dm-biscuit-400); }
.dm-avatar__status {
  position: absolute;
  right: 0; bottom: 0;
  width: 28%; height: 28%;
  border-radius: 50%;
  border: 2px solid var(--dm-surface);
  background: var(--dm-success);
}
.dm-avatar__status--busy { background: var(--dm-danger); }
.dm-avatar__status--away { background: var(--dm-warning); }
.dm-avatar-group { display: inline-flex; }
.dm-avatar-group > .dm-avatar { margin-left: -12px; box-shadow: 0 0 0 2px var(--dm-surface); }
.dm-avatar-group > .dm-avatar:first-child { margin-left: 0; }

/* ---------------------------------------------------------------
   Forms — Field, Input, Textarea, Select, Checkbox, Radio, Switch
   --------------------------------------------------------------- */
.dm-field { display: flex; flex-direction: column; gap: var(--dm-space-2); }
.dm-label {
  font-size: var(--dm-text-sm);
  font-weight: var(--dm-weight-semibold);
  color: var(--dm-text);
  display: inline-flex;
  align-items: center;
  gap: var(--dm-space-1);
}
.dm-label__req { color: var(--dm-accent); }
.dm-label__opt { font-weight: var(--dm-weight-regular); color: var(--dm-text-subtle); font-size: var(--dm-text-xs); }
.dm-hint { font-size: var(--dm-text-xs); color: var(--dm-text-muted); line-height: var(--dm-leading-normal); }
.dm-error { font-size: var(--dm-text-xs); color: var(--dm-danger-ink); display: inline-flex; align-items: center; gap: 5px; }

.dm-input, .dm-textarea, .dm-select {
  width: 100%;
  font-family: var(--dm-font-sans);
  font-size: var(--dm-text-base);
  color: var(--dm-text);
  background: var(--dm-surface);
  border: var(--dm-border-width) solid var(--dm-border);
  border-radius: var(--dm-radius-field);
  transition: border-color var(--dm-duration-fast) var(--dm-ease),
    box-shadow var(--dm-duration-fast) var(--dm-ease),
    background var(--dm-duration-fast) var(--dm-ease);
  -webkit-appearance: none;
  appearance: none;
}
.dm-input { height: 48px; padding: 0 var(--dm-space-4); }
.dm-select {
  height: 48px;
  padding: 0 var(--dm-space-4);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.dm-select:invalid, .dm-select option[value=""] { color: var(--dm-text-subtle); }
.dm-textarea { min-height: 120px; padding: 13px var(--dm-space-4); line-height: var(--dm-leading-normal); resize: vertical; }
.dm-input::placeholder, .dm-textarea::placeholder { color: var(--dm-text-subtle); }
.dm-input:hover, .dm-textarea:hover, .dm-select:hover { border-color: var(--dm-border-strong); }
/* Focus = a crisp biscuit hairline doubled from the inside — no glow.
   (The soft ring stays reserved for keyboard :focus-visible on buttons.) */
.dm-input:focus, .dm-textarea:focus, .dm-select:focus {
  outline: none;
  border-color: var(--dm-biscuit);
  box-shadow: inset 0 0 0 1px var(--dm-biscuit);
}
.dm-input:disabled, .dm-textarea:disabled, .dm-select:disabled {
  background: var(--dm-surface-sunken);
  color: var(--dm-text-subtle);
  cursor: not-allowed;
}
.dm-field--invalid .dm-input,
.dm-field--invalid .dm-textarea,
.dm-field--invalid .dm-select { border-color: var(--dm-danger); }
.dm-field--invalid .dm-input:focus,
.dm-field--invalid .dm-textarea:focus,
.dm-field--invalid .dm-select:focus { border-color: var(--dm-danger); box-shadow: inset 0 0 0 1px var(--dm-danger); }

/* Sizes */
.dm-input--sm { height: 38px; font-size: var(--dm-text-sm); border-radius: 8px; }
.dm-select--sm { height: 38px; font-size: var(--dm-text-sm); border-radius: 8px; }
.dm-input--lg { height: 56px; font-size: var(--dm-text-md); }

/* Input with adornments */
.dm-inputwrap { position: relative; display: flex; align-items: center; }
.dm-inputwrap .dm-input { width: 100%; }
.dm-inputwrap__icon {
  position: absolute; display: inline-flex; color: var(--dm-biscuit);
  pointer-events: none;
}
.dm-inputwrap__icon--left { left: var(--dm-space-4); }
.dm-inputwrap__icon--right { right: var(--dm-space-4); }
.dm-inputwrap--has-left .dm-input { padding-left: 44px; }
.dm-inputwrap--has-right .dm-input { padding-right: 44px; }

/* Select chevron */
.dm-selectwrap { position: relative; }
.dm-selectwrap .dm-select { padding-right: 42px; cursor: pointer; }
.dm-selectwrap .dm-select--sm { padding-right: 32px; }
.dm-selectwrap .dm-select--sm + .dm-selectwrap__chevron svg { width: 15px; height: 15px; }
.dm-selectwrap__chevron {
  position: absolute; right: var(--dm-space-4); top: 50%; transform: translateY(-50%);
  color: var(--dm-biscuit); pointer-events: none;
}

/* Checkbox & Radio */
.dm-check { display: inline-flex; align-items: flex-start; gap: var(--dm-space-3); cursor: pointer; font-size: var(--dm-text-base); color: var(--dm-text); line-height: 1.4; }
.dm-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.dm-check__box {
  flex-shrink: 0;
  width: 22px; height: 22px; margin-top: 1px;
  border: 1.5px solid var(--dm-border-strong);
  border-radius: var(--dm-radius-check);
  background: var(--dm-surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--dm-cotton-100);
  transition: all var(--dm-duration-fast) var(--dm-ease);
}
.dm-check--radio .dm-check__box { border-radius: 50%; }
.dm-check:hover .dm-check__box { border-color: var(--dm-slate-400); }
.dm-check input:checked + .dm-check__box {
  background: var(--dm-midnight-900);
  border-color: var(--dm-midnight-900);
}
.dm-check--radio input:checked + .dm-check__box { background: var(--dm-surface); border-color: var(--dm-midnight-900); }
.dm-check--radio input:checked + .dm-check__box::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--dm-midnight-900);
}
.dm-check__box svg { opacity: 0; transform: scale(0.5); transition: all var(--dm-duration-fast) var(--dm-ease); }
.dm-check input:checked + .dm-check__box svg { opacity: 1; transform: scale(1); }
.dm-check input:focus-visible + .dm-check__box { box-shadow: var(--dm-shadow-focus); }
.dm-check input:disabled ~ * { opacity: 0.5; }

/* Switch */
.dm-switch { display: inline-flex; align-items: center; gap: var(--dm-space-3); cursor: pointer; color: var(--dm-text); font-size: var(--dm-text-base); }
.dm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dm-switch__track {
  width: 44px; height: 26px; border-radius: var(--dm-radius-pill);
  background: var(--dm-slate-300); position: relative; flex-shrink: 0;
  transition: background var(--dm-duration-base) var(--dm-ease);
}
.dm-switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--dm-white); box-shadow: var(--dm-shadow-sm);
  transition: transform var(--dm-duration-base) var(--dm-ease);
}
.dm-switch input:checked + .dm-switch__track { background: var(--dm-midnight-900); }
.dm-switch input:checked + .dm-switch__track .dm-switch__thumb { transform: translateX(18px); }
.dm-switch input:focus-visible + .dm-switch__track { box-shadow: var(--dm-shadow-focus); }
.dm-switch input:disabled + .dm-switch__track { opacity: 0.5; }

/* ---------------------------------------------------------------
   Card
   --------------------------------------------------------------- */
.dm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--dm-surface);
  border-radius: var(--dm-radius-card);
  overflow: hidden;
}
/* flat / elevated kept as tolerant no-ops — the brand is borderless & shadowless */
.dm-card--flat,
.dm-card--elevated { background: var(--dm-surface); }
.dm-card--sunken { background: var(--dm-surface-sunken); }
.dm-card--inverse {
  background: var(--dm-midnight);
  color: var(--dm-text-inverse);
}
.dm-card--inverse .dm-card__title { color: var(--dm-text-inverse); }
.dm-card--inverse .dm-card__desc { color: var(--dm-text-inverse-muted); }
.dm-card--interactive { cursor: pointer; transition: box-shadow var(--dm-duration-base) var(--dm-ease); }
.dm-card--interactive:hover { box-shadow: inset 0 0 0 1.5px var(--dm-biscuit); }
.dm-card--accent-top { border-top: 3px solid var(--dm-biscuit); }
.dm-card__media { margin: 0; line-height: 0; background: var(--dm-surface-sunken); }
.dm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-card__body { padding: var(--dm-space-6); display: flex; flex-direction: column; gap: var(--dm-space-3); }
.dm-card__body--tight { padding: var(--dm-space-4); }
.dm-card__body--roomy { padding: var(--dm-space-8); }
.dm-card__title { font-size: var(--dm-text-lg); font-weight: var(--dm-weight-bold); letter-spacing: var(--dm-tracking-tight); color: var(--dm-text); }
.dm-card__desc { font-size: var(--dm-text-base); line-height: var(--dm-leading-normal); color: var(--dm-text-muted); }
.dm-card__footer { padding: var(--dm-space-4) var(--dm-space-6); border-top: 1px solid var(--dm-border-subtle); display: flex; align-items: center; gap: var(--dm-space-3); }

/* ---------------------------------------------------------------
   Callout / Alert
   --------------------------------------------------------------- */
.dm-callout {
  display: flex;
  gap: var(--dm-space-3);
  padding: var(--dm-space-4) var(--dm-space-5);
  border-radius: var(--dm-radius-card);
  background: var(--dm-info-bg);
  color: var(--dm-text);
  border: var(--dm-border-width) solid transparent;
  font-size: var(--dm-text-sm);
  line-height: var(--dm-leading-normal);
}
.dm-callout__icon { flex-shrink: 0; margin-top: 1px; color: var(--dm-info); }
.dm-callout__title { font-weight: var(--dm-weight-semibold); margin-bottom: 2px; color: var(--dm-text); }
.dm-callout__body { color: var(--dm-text-muted); }
.dm-callout--info    { background: var(--dm-info-bg); }
.dm-callout--info .dm-callout__icon { color: var(--dm-info); }
.dm-callout--success { background: var(--dm-success-bg); }
.dm-callout--success .dm-callout__icon { color: var(--dm-success); }
.dm-callout--warning { background: var(--dm-warning-bg); }
.dm-callout--warning .dm-callout__icon { color: var(--dm-warning); }
.dm-callout--danger  { background: var(--dm-danger-bg); }
.dm-callout--danger .dm-callout__icon { color: var(--dm-danger); }
.dm-callout--accent  { background: var(--dm-biscuit-100); }
.dm-callout--accent .dm-callout__icon { color: var(--dm-biscuit); }

/* ---------------------------------------------------------------
   Stat — big metric
   --------------------------------------------------------------- */
.dm-stat { display: flex; flex-direction: column; gap: var(--dm-space-1); }
.dm-stat__value {
  font-family: var(--dm-font-display);
  font-weight: 700;
  font-size: var(--dm-text-4xl);
  line-height: 1;
  letter-spacing: var(--dm-tracking-tight);
  color: var(--dm-text);
}
.dm-stat__value--accent { color: var(--dm-biscuit-600); }
.dm-stat__label { font-size: var(--dm-text-sm); color: var(--dm-text-muted); }
.dm-stat--inverse .dm-stat__value { color: var(--dm-cotton-100); }
.dm-stat--inverse .dm-stat__value--accent { color: var(--dm-biscuit-400); }
.dm-stat--inverse .dm-stat__label { color: var(--dm-text-inverse-muted); }

/* ---------------------------------------------------------------
   Tabs
   --------------------------------------------------------------- */
.dm-tabs { display: flex; flex-direction: column; }
.dm-tablist {
  display: flex;
  gap: var(--dm-space-1);
  border-bottom: 1px solid var(--dm-border);
}
.dm-tablist--fill .dm-tab { flex: 1; justify-content: center; }
.dm-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--dm-space-2);
  padding: var(--dm-space-3) var(--dm-space-4);
  font-family: var(--dm-font-display);
  font-size: var(--dm-text-sm);
  font-weight: var(--dm-weight-bold);
  letter-spacing: 0.01em;
  color: var(--dm-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dm-duration-fast) var(--dm-ease);
}
.dm-tab::after {
  content: "";
  position: absolute;
  left: var(--dm-space-4); right: var(--dm-space-4); bottom: -1px;
  height: 2px; border-radius: 2px;
  background: transparent;
  transition: background var(--dm-duration-base) var(--dm-ease);
}
.dm-tab:hover { color: var(--dm-text); }
.dm-tab--active { color: var(--dm-text); }
.dm-tab--active::after { background: var(--dm-biscuit-500); }
.dm-tab:focus-visible { outline: none; box-shadow: var(--dm-shadow-focus); border-radius: var(--dm-radius-sm); }
.dm-tab__count {
  font-size: var(--dm-text-2xs); font-weight: var(--dm-weight-semibold);
  padding: 1px 7px; border-radius: var(--dm-radius-pill);
  background: var(--dm-surface-sunken); color: var(--dm-text-muted);
}
.dm-tab--active .dm-tab__count { background: var(--dm-biscuit-100); color: var(--dm-midnight); }
/* Pill variant */
.dm-tablist--pill { border-bottom: none; gap: var(--dm-space-1); background: var(--dm-surface-sunken); padding: 4px; border-radius: var(--dm-radius-pill); display: inline-flex; align-self: flex-start; }
.dm-tablist--pill .dm-tab { border-radius: var(--dm-radius-pill); padding: var(--dm-space-2) var(--dm-space-4); }
.dm-tablist--pill .dm-tab::after { display: none; }
.dm-tablist--pill .dm-tab--active { background: var(--dm-surface); color: var(--dm-text); box-shadow: var(--dm-shadow-xs); }

/* ---------------------------------------------------------------
   Tooltip
   --------------------------------------------------------------- */
.dm-tooltip { position: relative; display: inline-flex; }
.dm-tooltip__bubble {
  position: absolute;
  z-index: var(--dm-z-overlay);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--dm-midnight-900);
  color: var(--dm-cotton-100);
  font-size: var(--dm-text-xs);
  font-weight: var(--dm-weight-medium);
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: var(--dm-radius-sm);
  white-space: nowrap;
  box-shadow: var(--dm-shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dm-duration-fast) var(--dm-ease), transform var(--dm-duration-fast) var(--dm-ease);
}
.dm-tooltip__bubble::after {
  content: "";
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--dm-midnight-900);
}
.dm-tooltip:hover .dm-tooltip__bubble,
.dm-tooltip:focus-within .dm-tooltip__bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------------
   Dialog / Modal
   --------------------------------------------------------------- */
.dm-dialog-overlay {
  position: fixed; inset: 0; z-index: var(--dm-z-modal);
  background: rgba(20, 29, 41, 0.5);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--dm-space-6);
  animation: dm-fade var(--dm-duration-base) var(--dm-ease);
}
.dm-dialog {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: auto;
  background: var(--dm-surface);
  border-radius: var(--dm-radius-card);
  box-shadow: var(--dm-shadow-xl);
  animation: dm-rise var(--dm-duration-base) var(--dm-ease);
}
.dm-dialog__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dm-space-4);
  padding: var(--dm-space-6) var(--dm-space-6) var(--dm-space-3);
}
.dm-dialog__title { font-size: var(--dm-text-xl); font-weight: var(--dm-weight-bold); letter-spacing: var(--dm-tracking-tight); }
.dm-dialog__body { padding: 0 var(--dm-space-6) var(--dm-space-4); color: var(--dm-text-muted); line-height: var(--dm-leading-normal); }
.dm-dialog__footer { display: flex; justify-content: flex-end; gap: var(--dm-space-3); padding: var(--dm-space-4) var(--dm-space-6) var(--dm-space-6); }
@keyframes dm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------
   Toast
   --------------------------------------------------------------- */
.dm-toast {
  display: flex; align-items: flex-start; gap: var(--dm-space-3);
  width: 340px; max-width: 100%;
  padding: var(--dm-space-4);
  background: var(--dm-midnight-900);
  color: var(--dm-cotton-100);
  border-radius: var(--dm-radius-card);
  box-shadow: var(--dm-shadow-lg);
}
.dm-toast__icon { flex-shrink: 0; color: var(--dm-biscuit-400); margin-top: 1px; }
.dm-toast__title { font-weight: var(--dm-weight-semibold); font-size: var(--dm-text-sm); }
.dm-toast__body { font-size: var(--dm-text-sm); color: var(--dm-text-inverse-muted); margin-top: 2px; line-height: var(--dm-leading-normal); }
.dm-toast__close { margin-left: auto; color: var(--dm-slate-300); display: inline-flex; background: none; border: none; cursor: pointer; padding: 2px; }
.dm-toast__close:hover { color: var(--dm-cotton-100); }
.dm-toast--success .dm-toast__icon { color: var(--dm-status-green-light); }
.dm-toast--danger .dm-toast__icon { color: color-mix(in srgb, var(--dm-status-red) 55%, var(--dm-white)); }

/* ---------------------------------------------------------------
   Application — sidenav, topbar, table, page header.
   Class-based (no React required): the flat product-UI vocabulary.
   --------------------------------------------------------------- */
.dm-app {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100%;
  background: var(--dm-bg);
  font-family: var(--dm-font-sans);
  color: var(--dm-text);
}

/* Sidenav — midnight rail, thin-line icons, biscuit active accent */
.dm-sidenav {
  background: var(--dm-midnight);
  color: var(--dm-text-inverse-muted);
  display: flex;
  flex-direction: column;
  padding: var(--dm-space-6) 0 var(--dm-space-4);
}
.dm-sidenav__brand { padding: 0 var(--dm-space-6); margin-bottom: var(--dm-space-8); }
.dm-sidenav__group {
  padding: 0 var(--dm-space-6);
  margin: var(--dm-space-6) 0 var(--dm-space-2);
  font-size: var(--dm-text-2xs);
  font-weight: var(--dm-weight-semibold);
  letter-spacing: var(--dm-tracking-widest);
  text-transform: uppercase;
  color: var(--dm-sky-light);
}
.dm-sidenav__item {
  display: flex;
  align-items: center;
  gap: var(--dm-space-3);
  padding: 10px var(--dm-space-6);
  font-family: var(--dm-font-display);
  font-size: 14px;
  font-weight: var(--dm-weight-bold);
  letter-spacing: 0.01em;
  color: var(--dm-text-inverse-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--dm-duration-fast) var(--dm-ease), color var(--dm-duration-fast) var(--dm-ease);
}
.dm-sidenav__item:hover { background: rgba(255, 255, 255, 0.06); color: var(--dm-white); }
.dm-sidenav__item--active {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: var(--dm-biscuit);
  color: var(--dm-white);
}
.dm-sidenav__item svg { flex-shrink: 0; color: var(--dm-biscuit); }
.dm-sidenav__caret { margin-left: auto; display: inline-flex; opacity: .55; transition: transform var(--dm-duration-fast) var(--dm-ease); }
.dm-sidenav__caret--open { transform: rotate(90deg); }
.dm-sidenav__caret svg { color: currentColor; }

/* Subitems — ingesprongen onder het hoofditem, Figtree (rustiger dan Lufga) */
.dm-sidenav__subitem {
  display: flex;
  align-items: center;
  padding: 7px var(--dm-space-6) 7px 54px;
  font-family: var(--dm-font-sans);
  font-size: 13.5px;
  font-weight: var(--dm-weight-medium);
  color: var(--dm-text-inverse-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--dm-duration-fast) var(--dm-ease), color var(--dm-duration-fast) var(--dm-ease);
}
.dm-sidenav__subitem:hover { background: rgba(255, 255, 255, 0.06); color: var(--dm-white); }
.dm-sidenav__subitem--active {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: var(--dm-biscuit);
  color: var(--dm-white);
  font-weight: var(--dm-weight-semibold);
}
.dm-sidenav__spacer { flex: 1; }
.dm-sidenav__user {
  display: flex;
  align-items: center;
  gap: var(--dm-space-3);
  padding: var(--dm-space-4) var(--dm-space-6) 0;
  border-top: 1px solid var(--dm-border-inverse);
  color: var(--dm-white);
  font-size: var(--dm-text-sm);
  font-weight: var(--dm-weight-semibold);
}
.dm-sidenav__user small { display: block; font-weight: var(--dm-weight-regular); color: var(--dm-sky-light); font-size: var(--dm-text-xs); }

/* Topbar — hairline separated, quiet */
.dm-topbar {
  display: flex;
  align-items: center;
  gap: var(--dm-space-4);
  height: 64px;
  padding: 0 var(--dm-space-8);
  background: var(--dm-surface);
  border-bottom: 1px solid var(--dm-border);
}
.dm-topbar__title { font-size: var(--dm-text-md); font-weight: var(--dm-weight-bold); letter-spacing: var(--dm-tracking-tight); }
.dm-topbar__spacer { flex: 1; }

/* Page header inside content */
.dm-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--dm-space-6); margin-bottom: var(--dm-space-6); }
.dm-pagehead__eyebrow {
  font-size: var(--dm-text-2xs);
  font-weight: var(--dm-weight-semibold);
  letter-spacing: var(--dm-tracking-widest);
  text-transform: uppercase;
  color: var(--dm-biscuit);
  margin-bottom: var(--dm-space-2);
}
.dm-pagehead__title { font-size: var(--dm-text-2xl); font-weight: var(--dm-weight-extrabold); letter-spacing: var(--dm-tracking-tight); margin: 0; }

/* Table — flat, hairline rows, no zebra */
.dm-table { width: 100%; border-collapse: collapse; background: var(--dm-surface); font-size: var(--dm-text-sm); }
.dm-table th {
  text-align: left;
  font-size: var(--dm-text-2xs);
  font-weight: var(--dm-weight-semibold);
  letter-spacing: var(--dm-tracking-wider);
  text-transform: uppercase;
  color: var(--dm-text-muted);
  padding: var(--dm-space-3) var(--dm-space-4);
  border-bottom: 1px solid var(--dm-border);
}
.dm-table td {
  padding: 14px var(--dm-space-4);
  border-bottom: 1px solid var(--dm-border-subtle);
  color: var(--dm-text);
  vertical-align: middle;
}
.dm-table tr:last-child td { border-bottom: none; }
.dm-table tbody tr { transition: background var(--dm-duration-fast) var(--dm-ease); }
.dm-table tbody tr:hover { background: var(--dm-surface-sunken-soft); }
.dm-table__lead { font-weight: var(--dm-weight-semibold); }
.dm-table__muted { color: var(--dm-text-muted); }

/* ---------------------------------------------------------------
   Data & financieel — uitbreidingen voor back-officeapplicaties
   (Flux e.d.): tabelvarianten, bedragen, bulk-acties, paginatie,
   combobox, read-only. NL-notatie: € 1.234,56 · dd-mm-jjjj · excl. btw.
   --------------------------------------------------------------- */

/* Tablewrap — het kader om elke tabel (hairline + 6px hoek) */
.dm-tablewrap {
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-card);
  background: var(--dm-surface);
  overflow: hidden;
}
.dm-tablewrap--scroll { overflow: auto; }

/* Dichtheid — ruim is standaard; compact als variant */
.dm-table--compact { font-size: var(--dm-text-xs); }
.dm-table--compact th { padding: 8px var(--dm-space-3); }
.dm-table--compact td { padding: 7px var(--dm-space-3); }

/* Sticky header (in een .dm-tablewrap--scroll met max-height) */
.dm-table--sticky thead th {
  position: sticky; top: 0; z-index: var(--dm-z-raised);
  background: var(--dm-surface);
  box-shadow: inset 0 -1px 0 var(--dm-border);
  border-bottom: none;
}

/* Cijferkolommen — rechts uitgelijnd, tabelcijfers */
.dm-table__num { text-align: right; font-variant-numeric: var(--dm-numeric-tabular); white-space: nowrap; }
th.dm-table__num { text-align: right; }

/* Sorteerbare kop */
.dm-table__sortbtn {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: none; padding: 0; cursor: pointer;
}
.dm-table__sortbtn:hover { color: var(--dm-text); }
.dm-table__sortbtn svg { color: var(--dm-ice); }
th[aria-sort] .dm-table__sortbtn { color: var(--dm-text); }
th[aria-sort] .dm-table__sortbtn svg { color: var(--dm-biscuit); }
.dm-table__sortbtn:focus-visible { outline: none; box-shadow: var(--dm-shadow-focus); border-radius: 4px; }

/* Selectie — checkboxkolom + geselecteerde rij */
.dm-table__check { width: 44px; padding-right: 0 !important; }
.dm-table__check .dm-check { vertical-align: middle; }
.dm-table__row--selected td { background: var(--dm-biscuit-100); }
.dm-table tbody tr.dm-table__row--selected:hover td { background: color-mix(in srgb, var(--dm-biscuit) 20%, var(--dm-white)); }

/* Groepering — tussenkop, subtotaal, totaal */
.dm-table__grouphead td {
  padding: 9px var(--dm-space-4);
  background: var(--dm-surface-sunken-soft);
  font-size: var(--dm-text-2xs);
  font-weight: var(--dm-weight-semibold);
  letter-spacing: var(--dm-tracking-wider);
  text-transform: uppercase;
  color: var(--dm-text-muted);
  border-top: 1px solid var(--dm-border-subtle);
  border-bottom: 1px solid var(--dm-border-subtle);
}
.dm-table__grouphead td .dm-badge { margin-left: var(--dm-space-2); text-transform: none; letter-spacing: normal; }
.dm-table__subtotal td {
  font-weight: var(--dm-weight-semibold);
  /* Bewust géén vulling: het getinte vlak is voor groepskoppen; het subtotaal
     onderscheidt zich als witte rij met een hairline erboven. */
  background: var(--dm-surface);
  border-top: 1px solid var(--dm-border);
}
.dm-table__total td {
  font-weight: var(--dm-weight-bold);
  border-top: 2px solid var(--dm-midnight);
  border-bottom: none;
}

/* Uitklapbare rij — detailpaneel onder een rij */
.dm-table__expandbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--dm-radius-pill);
  background: none; border: none; cursor: pointer; color: var(--dm-text-subtle);
  transition: transform var(--dm-duration-base) var(--dm-ease), color var(--dm-duration-fast) var(--dm-ease);
}
.dm-table__expandbtn:hover { color: var(--dm-text); background: var(--dm-surface-sunken); }
.dm-table__expandbtn[aria-expanded="true"] { transform: rotate(90deg); color: var(--dm-biscuit); }
.dm-table__detail td {
  background: var(--dm-surface-sunken-soft);
  padding: var(--dm-space-4) var(--dm-space-6);
  border-bottom: 1px solid var(--dm-border-subtle);
}

/* Inline bewerken — cel-input (offerte-editor, reviewschermen) */
.dm-cell-input {
  width: 100%;
  font: inherit;
  font-variant-numeric: var(--dm-numeric-tabular);
  color: var(--dm-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 8px;
  margin: -5px -8px;
  transition: border-color var(--dm-duration-fast) var(--dm-ease), background var(--dm-duration-fast) var(--dm-ease);
}
.dm-cell-input:hover { border-color: var(--dm-border); }
.dm-cell-input:focus { outline: none; background: var(--dm-surface); border-color: var(--dm-biscuit); box-shadow: inset 0 0 0 1px var(--dm-biscuit); }
.dm-cell-input--num { text-align: right; }

/* Bedragen — positief blijft midnight; alleen negatief kleurt.
   Δ (maand-op-maand) kleurt wél twee kanten op. */
.dm-amount { font-variant-numeric: var(--dm-numeric-tabular); white-space: nowrap; }
.dm-amount--neg { color: var(--dm-amount-neg); }
.dm-delta { font-variant-numeric: var(--dm-numeric-tabular); white-space: nowrap; font-weight: var(--dm-weight-semibold); }
.dm-delta--pos { color: var(--dm-delta-pos); }
.dm-delta--neg { color: var(--dm-delta-neg); }
.dm-delta--zero { color: var(--dm-text-subtle); font-weight: var(--dm-weight-regular); }

/* Technisch — serienummers, checksums, expressies */
.dm-mono { font-family: var(--dm-font-mono); font-size: 0.9em; letter-spacing: -0.01em; }

/* Bulk-actiebalk — verschijnt bij rijselectie */
.dm-bulkbar {
  display: flex; align-items: center; gap: var(--dm-space-3);
  padding: var(--dm-space-2) var(--dm-space-2) var(--dm-space-2) var(--dm-space-5);
  min-height: 54px;
  background: var(--dm-midnight);
  color: var(--dm-text-inverse);
  border-radius: var(--dm-radius-card);
}
.dm-bulkbar__count {
  font-family: var(--dm-font-display);
  font-weight: var(--dm-weight-bold);
  font-size: var(--dm-text-sm);
  color: var(--dm-white);
}
.dm-bulkbar__count strong { color: var(--dm-biscuit); }
.dm-bulkbar__spacer { flex: 1; }
.dm-bulkbar .dm-btn--ghost { color: var(--dm-cotton); }
/* Ghost op donkere balk: geen lichte vulling (tekst zou wegvallen) — subtiele overlay */
.dm-bulkbar .dm-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dm-white);
}
.dm-bulkbar__close { color: var(--dm-slate-300); background: none; border: none; cursor: pointer; display: inline-flex; padding: 8px; border-radius: var(--dm-radius-pill); }
.dm-bulkbar__close:hover { color: var(--dm-white); background: rgba(255, 255, 255, 0.08); }

/* Voorstel B — inline variant: rustige lichte balk, biscuit accentlijn,
   sluit vlak op de tabel aan (direct boven .dm-tablewrap plaatsen) */
.dm-bulkbar--inline {
  background: var(--dm-biscuit-100);
  border: 1px solid var(--dm-border);
  border-left: 2px solid var(--dm-biscuit);
  border-radius: var(--dm-radius-card);
}
.dm-bulkbar--inline + .dm-tablewrap { margin-top: calc(-1 * var(--dm-space-3) + 4px); }
.dm-bulkbar--inline .dm-bulkbar__count { color: var(--dm-text); }
.dm-bulkbar--inline .dm-bulkbar__count strong { color: var(--dm-text); }
.dm-bulkbar--inline .dm-btn--ghost { color: var(--dm-text); }
.dm-bulkbar--inline .dm-btn--ghost:hover { background: rgba(30, 43, 61, 0.07); color: var(--dm-text); }
.dm-bulkbar--inline .dm-bulkbar__close { color: var(--dm-text-muted); }
.dm-bulkbar--inline .dm-bulkbar__close:hover { color: var(--dm-text); background: rgba(30, 43, 61, 0.07); }

/* Paginatie */
.dm-pagination { display: flex; align-items: center; gap: var(--dm-space-4); }
.dm-pagination__info { font-size: var(--dm-text-sm); color: var(--dm-text-muted); font-variant-numeric: var(--dm-numeric-tabular); }
.dm-pagination__pages { display: flex; align-items: center; gap: var(--dm-space-1); }
.dm-pagination__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 var(--dm-space-2);
  border-radius: var(--dm-radius-pill);
  border: none; background: none; cursor: pointer;
  font-family: var(--dm-font-sans); font-size: var(--dm-text-sm); font-weight: var(--dm-weight-semibold);
  color: var(--dm-text-muted);
  font-variant-numeric: var(--dm-numeric-tabular);
  transition: background var(--dm-duration-fast) var(--dm-ease), color var(--dm-duration-fast) var(--dm-ease);
}
.dm-pagination__btn:hover { background: var(--dm-surface-sunken); color: var(--dm-text); }
.dm-pagination__btn[aria-current="page"] { background: var(--dm-midnight); color: var(--dm-white); }
.dm-pagination__btn:disabled { opacity: 0.35; cursor: not-allowed; background: none; }
.dm-pagination__btn:focus-visible { outline: none; box-shadow: var(--dm-shadow-focus); }
.dm-pagination__gap { color: var(--dm-text-subtle); padding: 0 2px; }

/* Read-only (rol 'Inzicht') — rustig, duidelijk niet bewerkbaar */
.dm-input[readonly], .dm-textarea[readonly] {
  background: var(--dm-surface-sunken);
  border-color: var(--dm-border-subtle);
  color: var(--dm-text);
  cursor: default;
}
.dm-input[readonly]:hover, .dm-textarea[readonly]:hover { border-color: var(--dm-border-subtle); }
.dm-input[readonly]:focus, .dm-textarea[readonly]:focus { border-color: var(--dm-border); box-shadow: none; }
.dm-field--readonly .dm-label { color: var(--dm-text-muted); }

/* Getal-/valuta-invoer — rechts uitgelijnd, tekst-affixen (€, %, excl. btw) */
.dm-input--num { text-align: right; font-variant-numeric: var(--dm-numeric-tabular); }
.dm-inputwrap__affix {
  position: absolute;
  font-size: var(--dm-text-xs);
  color: var(--dm-text-subtle);
  pointer-events: none;
  white-space: nowrap;
}
.dm-inputwrap__affix--left { left: var(--dm-space-4); }
.dm-inputwrap__affix--right { right: var(--dm-space-4); }
.dm-inputwrap--has-affix-left .dm-input { padding-left: 40px; }
.dm-inputwrap--has-affix-right .dm-input { padding-right: 64px; }

/* Combobox — doorzoekbare select (enkel/multi, async) */
.dm-combobox { position: relative; }
.dm-combobox__pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: var(--dm-z-overlay);
  background: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-card);
  max-height: 280px; overflow: auto;
  padding: var(--dm-space-1);
  animation: dm-rise var(--dm-duration-fast) var(--dm-ease);
}
.dm-combobox__opt {
  display: flex; align-items: center; gap: var(--dm-space-3);
  padding: 9px var(--dm-space-3);
  border-radius: 6px;
  font-size: var(--dm-text-sm);
  color: var(--dm-text);
  cursor: pointer;
}
.dm-combobox__opt:hover, .dm-combobox__opt--active { background: var(--dm-surface-sunken); }
.dm-combobox__opt[aria-selected="true"] { font-weight: var(--dm-weight-semibold); }
.dm-combobox__opt__check { margin-left: auto; color: var(--dm-biscuit); display: inline-flex; }
.dm-combobox__opt small { color: var(--dm-text-subtle); font-size: var(--dm-text-xs); }
.dm-combobox__state {
  display: flex; align-items: center; gap: var(--dm-space-2);
  padding: var(--dm-space-3) var(--dm-space-3);
  font-size: var(--dm-text-sm); color: var(--dm-text-muted);
}
.dm-combobox__chips { display: flex; flex-wrap: wrap; gap: var(--dm-space-2); margin-top: var(--dm-space-2); }

/* Tag met verwijderknop (multi-combobox chips) */
.dm-tag__x {
  display: inline-flex; margin-left: 2px; margin-right: -4px;
  background: none; border: none; cursor: pointer; color: var(--dm-text-subtle); padding: 2px; border-radius: 50%;
}
.dm-tag__x:hover { color: var(--dm-text); }

/* Spinner — klein, voor async laden (combobox, live Exact-data) */
.dm-spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--dm-ice);
  border-top-color: var(--dm-biscuit);
  animation: dm-spin 0.7s linear infinite;
}
@keyframes dm-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------
   Flows & overlays — stepper, banner (poorten), drawer, split-button
   --------------------------------------------------------------- */

/* Stepper — processtappen (facturatierun, offerte → factuur) */
.dm-stepper { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.dm-stepper__step { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.dm-stepper__dot {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--dm-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--dm-text-xs); font-weight: var(--dm-weight-semibold);
  font-variant-numeric: var(--dm-numeric-tabular);
}
.dm-stepper__dot--done { background: var(--dm-midnight); color: var(--dm-white); }
.dm-stepper__dot--current { background: var(--dm-surface); border: 2px solid var(--dm-biscuit); color: var(--dm-midnight); }
.dm-stepper__dot--upcoming { background: var(--dm-surface-sunken); color: var(--dm-text-muted); }
.dm-stepper__dot--blocked { background: var(--dm-danger-bg); color: var(--dm-danger-ink); }
.dm-stepper__texts { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 4px; }
.dm-stepper__label { font-size: var(--dm-text-sm); font-weight: var(--dm-weight-semibold); line-height: 1.3; }
.dm-stepper__step--upcoming .dm-stepper__label { color: var(--dm-text-muted); font-weight: var(--dm-weight-medium); }
.dm-stepper__meta { font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
.dm-stepper__line { flex: 1; height: 1px; background: var(--dm-border); margin: 14px 12px 0; min-width: 18px; }
.dm-stepper__line--done { background: var(--dm-midnight); }

/* Banner — paginabreed signaal; poorten: blokkerend / adviserend / informatief */
.dm-banner {
  display: flex; align-items: center; gap: var(--dm-space-3);
  padding: var(--dm-space-3) var(--dm-space-4) var(--dm-space-3) var(--dm-space-5);
  min-height: 52px;
  border-radius: var(--dm-radius-card);
  font-size: var(--dm-text-sm);
  line-height: var(--dm-leading-normal);
}
.dm-banner__icon { flex-shrink: 0; display: inline-flex; }
.dm-banner__content { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dm-banner__title { font-weight: var(--dm-weight-semibold); color: var(--dm-text); }
.dm-banner__body { color: var(--dm-text-muted); }
.dm-banner__actions { margin-left: auto; display: flex; align-items: center; gap: var(--dm-space-2); flex-shrink: 0; }
.dm-banner__x { display: inline-flex; padding: 7px; border-radius: var(--dm-radius-pill); background: none; border: none; cursor: pointer; color: var(--dm-text-subtle); }
.dm-banner__x:hover { color: var(--dm-text); background: rgb(30 43 61 / 0.06); }
.dm-banner--info { background: var(--dm-info-bg); }
.dm-banner--info .dm-banner__icon { color: var(--dm-info-ink); }
.dm-banner--success { background: var(--dm-success-bg); }
.dm-banner--success .dm-banner__icon { color: var(--dm-success-ink); }
.dm-banner--warning { background: var(--dm-warning-bg); }
.dm-banner--warning .dm-banner__icon { color: var(--dm-warning-ink); }
.dm-banner--danger { background: var(--dm-danger-bg); }
.dm-banner--danger .dm-banner__icon { color: var(--dm-danger-ink); }
.dm-banner--accent { background: var(--dm-biscuit-100); }
.dm-banner--accent .dm-banner__icon { color: var(--dm-biscuit-600); }

/* Drawer — zijpaneel voor detail & bewerken zonder contextverlies */
.dm-drawer-scrim {
  position: fixed; inset: 0;
  background: rgb(30 43 61 / 0.44);
  z-index: var(--dm-z-overlay);
  animation: dm-fade-in var(--dm-duration-base) var(--dm-ease);
}
.dm-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: calc(100vw - 48px);
  background: var(--dm-surface);
  z-index: var(--dm-z-overlay);
  display: flex; flex-direction: column;
  box-shadow: var(--dm-shadow-xl);
  animation: dm-slide-in var(--dm-duration-base) var(--dm-ease);
}
.dm-drawer__head {
  display: flex; align-items: flex-start; gap: var(--dm-space-3);
  padding: var(--dm-space-5) var(--dm-space-6);
  border-bottom: 1px solid var(--dm-border-subtle);
}
.dm-drawer__title {
  font-family: var(--dm-font-display); font-weight: var(--dm-weight-bold);
  font-size: var(--dm-text-lg); letter-spacing: var(--dm-tracking-tight);
  color: var(--dm-text);
}
.dm-drawer__sub { font-size: var(--dm-text-sm); color: var(--dm-text-muted); margin-top: 2px; }
.dm-drawer__x { display: inline-flex; padding: 8px; margin: -4px -8px 0 0; border-radius: var(--dm-radius-pill); background: none; border: none; cursor: pointer; color: var(--dm-text-subtle); }
.dm-drawer__x:hover { color: var(--dm-text); background: var(--dm-surface-sunken); }
.dm-drawer__body { flex: 1; overflow: auto; padding: var(--dm-space-6); display: flex; flex-direction: column; gap: var(--dm-space-5); }
.dm-drawer__foot {
  display: flex; justify-content: flex-end; gap: var(--dm-space-3);
  padding: var(--dm-space-4) var(--dm-space-6);
  border-top: 1px solid var(--dm-border-subtle);
}
@keyframes dm-fade-in { from { opacity: 0; } }
@keyframes dm-slide-in { from { transform: translateX(28px); opacity: 0; } }

/* SplitButton — primaire actie + varianten in een menu */
.dm-splitbtn { position: relative; display: inline-flex; }
.dm-splitbtn > .dm-splitbtn__main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dm-splitbtn > .dm-splitbtn__toggle {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding-left: 11px; padding-right: 13px;
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.24);
}
.dm-splitbtn > .dm-btn--secondary.dm-splitbtn__toggle,
.dm-splitbtn > .dm-btn--ghost.dm-splitbtn__toggle { box-shadow: none; margin-left: -1px; }
.dm-splitbtn__menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  z-index: var(--dm-z-overlay);
  min-width: 240px;
  background: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-card);
  padding: var(--dm-space-1);
  animation: dm-rise var(--dm-duration-fast) var(--dm-ease);
}
.dm-splitbtn__item {
  display: flex; align-items: center; gap: var(--dm-space-3);
  width: 100%; text-align: left;
  padding: 9px var(--dm-space-3);
  border-radius: 6px;
  font-family: var(--dm-font-sans); font-size: var(--dm-text-sm); color: var(--dm-text);
  background: none; border: none; cursor: pointer;
}
.dm-splitbtn__item:hover { background: var(--dm-surface-sunken); }
.dm-splitbtn__item svg { color: var(--dm-text-subtle); flex-shrink: 0; }
.dm-splitbtn__item small { margin-left: auto; color: var(--dm-text-subtle); font-size: var(--dm-text-xs); }
.dm-splitbtn__item--danger { color: var(--dm-danger-ink); }
.dm-splitbtn__item--danger svg { color: var(--dm-danger-ink); }
.dm-splitbtn__sep { height: 1px; background: var(--dm-border-subtle); margin: var(--dm-space-1) var(--dm-space-2); }

/* Menu — losstaand contextmenu (RowMenu ⋯ per tabelrij) */
.dm-menu {
  position: fixed;
  z-index: var(--dm-z-overlay);
  min-width: 224px;
  background: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-card);
  padding: var(--dm-space-1);
  box-shadow: var(--dm-shadow-lg);
  animation: dm-rise var(--dm-duration-fast) var(--dm-ease);
}
.dm-menu__item {
  display: flex; align-items: center; gap: var(--dm-space-3);
  width: 100%; text-align: left;
  padding: 9px var(--dm-space-3);
  border-radius: 6px;
  font-family: var(--dm-font-sans); font-size: var(--dm-text-sm); color: var(--dm-text);
  background: none; border: none; cursor: pointer;
}
.dm-menu__item:hover { background: var(--dm-surface-sunken); }
.dm-menu__item svg { color: var(--dm-text-subtle); flex-shrink: 0; }
.dm-menu__item small { margin-left: auto; color: var(--dm-text-subtle); font-size: var(--dm-text-xs); }
.dm-menu__item--danger { color: var(--dm-danger-ink); }
.dm-menu__item--danger svg { color: var(--dm-danger-ink); }
.dm-menu__sep { height: 1px; background: var(--dm-border-subtle); margin: var(--dm-space-1) var(--dm-space-2); }

.dm-rowmenu { display: inline-flex; }
.dm-rowmenu__btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  color: var(--dm-text-subtle);
  border-radius: var(--dm-radius-pill);
  transition: background var(--dm-duration-fast) var(--dm-ease), color var(--dm-duration-fast) var(--dm-ease);
}
.dm-rowmenu__btn:hover, .dm-rowmenu__btn[aria-expanded="true"] { background: var(--dm-surface-sunken); color: var(--dm-text); }
.dm-rowmenu__btn:focus-visible { outline: none; box-shadow: var(--dm-shadow-focus); }

/* ---------------------------------------------------------------
   Staten — skeleton (laden) & empty state
   --------------------------------------------------------------- */
.dm-skeleton {
  display: block;
  background: linear-gradient(100deg,
    var(--dm-surface-sunken) 40%,
    color-mix(in srgb, var(--dm-ice) 30%, var(--dm-white)) 50%,
    var(--dm-surface-sunken) 60%);
  background-size: 200% 100%;
  animation: dm-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
.dm-skeleton--circle { border-radius: 50%; }
@keyframes dm-shimmer { from { background-position: 130% 0; } to { background-position: -70% 0; } }
@media (prefers-reduced-motion: reduce) { .dm-skeleton { animation: none; } }

.dm-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--dm-space-2);
  padding: var(--dm-space-10) var(--dm-space-6);
}
.dm-empty__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--dm-biscuit-100); color: var(--dm-biscuit-600);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--dm-space-2);
}
.dm-empty__title { font-family: var(--dm-font-display); font-weight: var(--dm-weight-bold); font-size: var(--dm-text-lg); color: var(--dm-text); }
.dm-empty__desc { font-size: var(--dm-text-sm); color: var(--dm-text-muted); max-width: 380px; line-height: var(--dm-leading-normal); margin: 0; }
.dm-empty__actions { display: flex; gap: var(--dm-space-3); margin-top: var(--dm-space-3); }

/* ---------------------------------------------------------------
   Grafieken — merkpalet; semantisch rood alleen bij overschrijding
   --------------------------------------------------------------- */
.dm-chart { display: flex; flex-direction: column; gap: var(--dm-space-3); min-width: 0; }
.dm-chart__plot { width: 100%; height: auto; display: block; }
.dm-chart__legend { display: flex; flex-wrap: wrap; gap: var(--dm-space-2) var(--dm-space-4); font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
.dm-chart__key { display: inline-flex; align-items: center; gap: 7px; }
.dm-chart__swatch { width: 11px; height: 11px; flex-shrink: 0; }
.dm-chart__swatch--line { height: 2px; width: 16px; }
.dm-chart svg text { font-family: var(--dm-font-sans); font-variant-numeric: var(--dm-numeric-tabular); }

/* Meter — budgetuitputting / voortgang met waarschuwing en overschrijding */
.dm-meter { display: flex; flex-direction: column; gap: 7px; }
.dm-meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--dm-space-3); font-size: var(--dm-text-sm); }
.dm-meter__label { font-weight: var(--dm-weight-semibold); }
.dm-meter__value { color: var(--dm-text-muted); font-variant-numeric: var(--dm-numeric-tabular); }
.dm-meter__value--over { color: var(--dm-danger-ink); font-weight: var(--dm-weight-semibold); }
.dm-meter__track { height: 8px; background: var(--dm-surface-sunken); border-radius: 2px; overflow: hidden; }
.dm-meter__fill { height: 100%; background: var(--dm-midnight); border-radius: 2px; }
.dm-meter__fill--warn { background: var(--dm-status-orange); }
.dm-meter__fill--over { background: var(--dm-chart-over); }

/* VarianceBars — afwijking per regel vanaf een nulpunt (begrotingsmonitor) */
.dm-vbars { display: flex; flex-direction: column; gap: var(--dm-space-3); }
.dm-vbar { display: grid; grid-template-columns: minmax(150px, 230px) 1fr minmax(130px, auto); align-items: center; gap: var(--dm-space-4); font-size: var(--dm-text-sm); }
.dm-vbar__label { font-weight: var(--dm-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-vbar__label small { color: var(--dm-text-subtle); font-weight: var(--dm-weight-regular); font-size: var(--dm-text-xs); margin-left: 6px; }
.dm-vbar__track { position: relative; height: 14px; background: var(--dm-surface-sunken); border-radius: 2px; }
.dm-vbar__zero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--dm-ice); }
.dm-vbar__fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.dm-vbar__value { text-align: right; font-variant-numeric: var(--dm-numeric-tabular); white-space: nowrap; color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
.dm-vbar__value strong { color: var(--dm-text); font-weight: var(--dm-weight-semibold); font-size: var(--dm-text-sm); margin-right: 6px; }

/* Grootboek-matrix — maandkolommen; gefactureerde maanden gemarkeerd */
.dm-table th.dm-table__billed { color: var(--dm-biscuit-600); }
.dm-table__matrixlead { font-weight: var(--dm-weight-semibold); white-space: nowrap; }
.dm-table__matrixlead small { color: var(--dm-text-subtle); font-weight: var(--dm-weight-regular); margin-left: 6px; }

/* ---------------------------------------------------------------
   Offerte-editor — kolomgroepen (Verkoop | Inkoop), bundelrijen
   (verkoopregel + ingesprongen inkoopkoppelingen) en de invoerrij.
   FO 02 §5: één rij met verkoop- én inkoopvelden; "+ inkoopartikel"
   maakt de regel pas visueel een bundel.
   --------------------------------------------------------------- */

/* Kolomgroep-kop boven de gewone kolomkoppen */
.dm-table__colgroups th {
  padding: 8px var(--dm-space-4) 6px;
  font-size: var(--dm-text-2xs);
  font-weight: var(--dm-weight-semibold);
  letter-spacing: var(--dm-tracking-wider);
  text-transform: uppercase;
  color: var(--dm-text-subtle);
  border-bottom: none;
}
.dm-table__colgroup { border-left: 1px solid var(--dm-border); }
th.dm-table__colgroup, td.dm-table__colgroup { border-left: 1px solid var(--dm-border); }

/* Verkoopregel: artikelnaam + extra info (zoals op de PDF) */
.dm-table__extra {
  display: block;
  font-size: var(--dm-text-xs);
  color: var(--dm-text-muted);
  font-weight: var(--dm-weight-regular);
  margin-top: 2px;
  line-height: 1.45;
}

/* Bundel: hoofdregel + ingesprongen inkoopkoppelingen eronder */
.dm-table__bundlerow td { border-bottom: none; }
.dm-table__subrow td {
  border-bottom: none;
  padding-top: 0;
  padding-bottom: 9px;
  font-size: var(--dm-text-xs);
  color: var(--dm-text-muted);
}
.dm-table__subrow--last td { border-bottom: 1px solid var(--dm-border-subtle); padding-bottom: 13px; }
.dm-table__sublead {
  position: relative;
  padding-left: 26px !important;
}
.dm-table__sublead::before {
  content: "";
  position: absolute;
  left: 9px; top: -4px;
  width: 11px; height: 14px;
  border-left: 1px solid var(--dm-ice);
  border-bottom: 1px solid var(--dm-ice);
}
.dm-table__submuted { color: var(--dm-text-subtle); }

/* "2× per verkochte eenheid" — expliciete multiplicator */
.dm-table__multi {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--dm-radius-pill);
  background: var(--dm-biscuit-100);
  color: var(--dm-midnight);
  font-size: var(--dm-text-2xs);
  font-weight: var(--dm-weight-semibold);
  white-space: nowrap;
}

/* Marge-chip per regel */
.dm-margechip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--dm-text-xs);
  font-weight: var(--dm-weight-semibold);
  font-variant-numeric: var(--dm-numeric-tabular);
  color: var(--dm-text-muted);
  white-space: nowrap;
}
.dm-margechip--low { color: var(--dm-warning-ink); }
.dm-margechip--neg { color: var(--dm-danger-ink); }

/* Invoerrij onderaan de tabel */
.dm-table__addrow td {
  background: var(--dm-surface-sunken);
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: none;
}
.dm-table__addrow .dm-input, .dm-table__addrow .dm-select { background: var(--dm-surface); }
.dm-table__addbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dm-font-sans);
  font-size: var(--dm-text-xs);
  font-weight: var(--dm-weight-semibold);
  color: var(--dm-sky);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--dm-radius-pill);
  white-space: nowrap;
}
.dm-table__addbtn:hover { color: var(--dm-midnight); background: var(--dm-biscuit-100); }
.dm-table__addbtn svg { color: var(--dm-biscuit); }