/*
 * Finance OS design system — one token layer and the shared components of every portal:
 * work portal (/app), employee portal (/employee), admin listener (monitoring-static), customer
 * portal (/kundenportal), portal chooser, auth gate and training pages.
 * Guide: docs/ui-modernization/design-system.md (tokens, components, rules, Phase-2 checklist).
 *
 * Display modes (set on <html> before first paint by /display-preferences-boot.js):
 *   data-theme="system|light|dark"      colour scheme; system follows prefers-color-scheme (default)
 *   data-contrast="standard|high"       resolved contrast (preference "system" follows prefers-contrast)
 *   data-text-scale="100|115|130|150|175|200"  root font size; every rem length scales with it
 *   data-motion="system|reduce|full"    reduce = no animation/transition (system follows the OS)
 *   data-spacing="normal|relaxed"       relaxed = larger gaps, line height and word spacing
 * Colours are light-dark() pairs, so one declaration serves light and dark; high contrast overrides
 * the pairs (light-hc and dark-hc).  tests/design_tokens_contrast_test.py checks every pair.
 *
 * Cascade layers (declared at the top of every stylesheet):
 *   reset     element defaults (tag selectors only) and [hidden]
 *   legacy    styles.css, employee.css, admin.css, portal.css
 *   features  features.css, training.css, agent.css, crm-detail.css
 *   ds        this file: components, shells, legacy class mappings
 *   overrides the few feature rules that deliberately refine a design-system component
 * Tokens and display-mode switches are unlayered.  Rules for new code: rem only (px only for
 * hairlines ≤ 2px and shadows), colours only from --color-* tokens, icons always with text,
 * one primary action per view, every control ≥ 2.75rem (44px) high.
 * Font: Figtree (self-hosted, static/fonts, OFL), weights 400 / 500 / 600 / 700.
 */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@layer reset, legacy, features, ds, overrides;

/* =============================================================== 1. COLOUR TOKENS
   light-dark(<light>, <dark>).  Standard contrast: body text ≥ 7:1, every other text ≥ 4.5:1
   (incl. muted, placeholder, disabled), control boundaries and focus ≥ 3:1.
   border / border-subtle are decorative separators (cards also carry a shadow); every control
   boundary uses border-control. */
:root {
  color-scheme: light dark;
  --color-canvas: light-dark(#f3f5f8, #0f1318);
  --color-surface: light-dark(#ffffff, #161b22);
  --color-surface-subtle: light-dark(#f8f9fb, #1a2029);
  --color-surface-sunken: light-dark(#eceff4, #212833);
  --color-surface-hover: light-dark(#e8ecf2, #232b36);
  --color-surface-selected: light-dark(#dfe8fb, #1f3156);
  --color-sidebar-bg: light-dark(#f8f9fb, #11161d);
  --color-topbar-bg: light-dark(#ffffff, #161b22);
  --color-text: light-dark(#0f1722, #eef2f7);
  --color-text-secondary: light-dark(#1d2633, #dde3eb);
  --color-text-tertiary: light-dark(#323c4b, #c7cfda);
  --color-text-muted: light-dark(#4a5465, #aab4c2);
  --color-text-placeholder: light-dark(#566072, #9da7b5);
  --color-text-disabled: light-dark(#5a6475, #98a2b0);
  --color-border: light-dark(#d9dee6, #2c343f);
  --color-border-subtle: light-dark(#e6e9ef, #232a34);
  --color-border-control: light-dark(#6f7a8b, #7b8696);
  --color-border-strong: light-dark(#4f5a6b, #9aa5b4);
  --color-accent: light-dark(#2449a8, #9dbaff);
  --color-accent-hover: light-dark(#1d3d91, #b5cbff);
  --color-accent-active: light-dark(#17337c, #c9d8ff);
  --color-on-accent: light-dark(#ffffff, #0a1630);
  --color-accent-text: light-dark(#1f42a0, #a9c3ff);
  --color-accent-soft: light-dark(#e9effc, #1a2740);
  --color-accent-border: light-dark(#8ea7e0, #3d5a92);
  --color-selected-bg: light-dark(#dfe8fb, #1f3156);
  --color-selected-text: light-dark(#14327f, #dbe6ff);
  --color-selected-indicator: light-dark(#2449a8, #9dbaff);
  --color-focus: light-dark(#1d4ed8, #8fb2ff);
  --color-focus-halo: light-dark(#ffffff, #0f1318);
  --color-success-text: light-dark(#0f5c31, #7ad7a3);
  --color-success-bg: light-dark(#e6f4ec, #0f2a1b);
  --color-success-border: light-dark(#3d8a5f, #3f9a6a);
  --color-success-fill: light-dark(#17703f, #7ad7a3);
  --color-on-success-fill: light-dark(#ffffff, #06210f);
  --color-warning-text: light-dark(#6e3f00, #f3c56b);
  --color-warning-bg: light-dark(#fdf2dc, #2e2410);
  --color-warning-border: light-dark(#a8741c, #a8822e);
  --color-warning-fill: light-dark(#9a5800, #f3c56b);
  --color-on-warning-fill: light-dark(#ffffff, #231500);
  --color-danger-text: light-dark(#9b1c12, #ffa198);
  --color-danger-bg: light-dark(#fdecea, #3b1613);
  --color-danger-border: light-dark(#c4473b, #d0665c);
  --color-danger-fill: light-dark(#b42318, #ffa198);
  --color-on-danger-fill: light-dark(#ffffff, #2b0503);
  --color-info-text: light-dark(#0b5279, #84cdf5);
  --color-info-bg: light-dark(#e3f1fa, #0f2736);
  --color-info-border: light-dark(#3b82ad, #3f8bb5);
  --color-neutral-text: light-dark(#323c4b, #c7cfda);
  --color-neutral-bg: light-dark(#eceff4, #252d38);
  --color-inverse-bg: light-dark(#111827, #eef2f7);
  --color-inverse-text: light-dark(#f8fafc, #0f1722);
  --color-inverse-muted: light-dark(#c3cbd6, #3a4453);
  --color-overlay: light-dark(#0f172299, #000000b3);
  --color-chart-income: light-dark(#2b7a52, #57c08c);
  --color-chart-expense: light-dark(#76839a, #8592a8);
  --color-chart-1: light-dark(#2449a8, #9dbaff);
  --color-chart-2: light-dark(#2b7a52, #57c08c);
  --color-chart-3: light-dark(#b25c00, #f3a64a);
  --color-chart-4: light-dark(#7a3fbf, #c4a5ff);
  --color-tag-violet-text: light-dark(#5a2fae, #cdb8ff);
  --color-tag-violet-bg: light-dark(#f1ecfd, #251c3d);
  --color-tag-indigo-text: light-dark(#3a30b0, #bdb8ff);
  --color-tag-indigo-bg: light-dark(#ecebfd, #1f1d40);
  --color-tag-teal-text: light-dark(#0b5f58, #7fd6cb);
  --color-tag-teal-bg: light-dark(#e2f4f1, #122c2a);
  --color-tag-sky-text: light-dark(#075478, #8fd0f5);
  --color-tag-sky-bg: light-dark(#e2f1f9, #102736);
  --color-tag-rose-text: light-dark(#a0102f, #ff9db3);
  --color-tag-rose-bg: light-dark(#fdebef, #36161f);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* High contrast (light-hc / dark-hc): beyond AAA — every text ≥ 10:1, body text ≥ 15:1, all
   boundaries ≥ 7:1.  Status and selection are never colour only: tinted backgrounds become plain
   surfaces with a status border and an icon; the selected item keeps a thick indicator bar. */
html[data-contrast="high"] {
  --color-canvas: light-dark(#ffffff, #000000);
  --color-surface: light-dark(#ffffff, #000000);
  --color-surface-subtle: light-dark(#ffffff, #000000);
  --color-surface-sunken: light-dark(#f0f0f0, #141414);
  --color-surface-hover: light-dark(#e6e6e6, #262626);
  --color-surface-selected: light-dark(#e6e6e6, #262626);
  --color-sidebar-bg: light-dark(#ffffff, #000000);
  --color-topbar-bg: light-dark(#ffffff, #000000);
  --color-text: light-dark(#000000, #ffffff);
  --color-text-secondary: light-dark(#000000, #ffffff);
  --color-text-tertiary: light-dark(#141414, #f2f2f2);
  --color-text-muted: light-dark(#262626, #e0e0e0);
  --color-text-placeholder: light-dark(#333333, #d4d4d4);
  --color-text-disabled: light-dark(#333333, #d4d4d4);
  --color-border: light-dark(#000000, #ffffff);
  --color-border-subtle: light-dark(#4d4d4d, #b3b3b3);
  --color-border-control: light-dark(#000000, #ffffff);
  --color-border-strong: light-dark(#000000, #ffffff);
  --color-accent: light-dark(#002e8a, #a8c8ff);
  --color-accent-hover: light-dark(#00226a, #c8dcff);
  --color-accent-active: light-dark(#001a52, #dde9ff);
  --color-on-accent: light-dark(#ffffff, #000000);
  --color-accent-text: light-dark(#002a80, #b3d1ff);
  --color-accent-soft: light-dark(#ffffff, #000000);
  --color-accent-border: light-dark(#002e8a, #a8c8ff);
  --color-selected-bg: light-dark(#ffffff, #000000);
  --color-selected-text: light-dark(#000000, #ffe14d);
  --color-selected-indicator: light-dark(#000000, #ffe14d);
  --color-focus: light-dark(#000000, #ffe14d);
  --color-focus-halo: light-dark(#ffffff, #000000);
  --color-success-text: light-dark(#003a19, #8cf0b5);
  --color-success-bg: light-dark(#ffffff, #000000);
  --color-success-border: light-dark(#003a19, #8cf0b5);
  --color-success-fill: light-dark(#003a19, #8cf0b5);
  --color-on-success-fill: light-dark(#ffffff, #000000);
  --color-warning-text: light-dark(#422400, #ffd27a);
  --color-warning-bg: light-dark(#ffffff, #000000);
  --color-warning-border: light-dark(#422400, #ffd27a);
  --color-warning-fill: light-dark(#422400, #ffd27a);
  --color-on-warning-fill: light-dark(#ffffff, #000000);
  --color-danger-text: light-dark(#6b0000, #ffb0a8);
  --color-danger-bg: light-dark(#ffffff, #000000);
  --color-danger-border: light-dark(#6b0000, #ffb0a8);
  --color-danger-fill: light-dark(#6b0000, #ffb0a8);
  --color-on-danger-fill: light-dark(#ffffff, #000000);
  --color-info-text: light-dark(#00314f, #9fdcff);
  --color-info-bg: light-dark(#ffffff, #000000);
  --color-info-border: light-dark(#00314f, #9fdcff);
  --color-neutral-text: light-dark(#000000, #ffffff);
  --color-neutral-bg: light-dark(#ffffff, #000000);
  --color-inverse-bg: light-dark(#000000, #ffffff);
  --color-inverse-text: light-dark(#ffffff, #000000);
  --color-inverse-muted: light-dark(#e0e0e0, #262626);
  --color-overlay: light-dark(#000000cc, #000000e6);
  --color-chart-income: light-dark(#003a19, #8cf0b5);
  --color-chart-expense: light-dark(#333333, #d4d4d4);
  --color-chart-1: light-dark(#002e8a, #a8c8ff);
  --color-chart-2: light-dark(#003a19, #8cf0b5);
  --color-chart-3: light-dark(#5c2e00, #ffc27a);
  --color-chart-4: light-dark(#4a0d8f, #dcc8ff);
  --color-tag-violet-text: light-dark(#000000, #ffffff);
  --color-tag-violet-bg: light-dark(#ffffff, #000000);
  --color-tag-indigo-text: light-dark(#000000, #ffffff);
  --color-tag-indigo-bg: light-dark(#ffffff, #000000);
  --color-tag-teal-text: light-dark(#000000, #ffffff);
  --color-tag-teal-bg: light-dark(#ffffff, #000000);
  --color-tag-sky-text: light-dark(#000000, #ffffff);
  --color-tag-sky-bg: light-dark(#ffffff, #000000);
  --color-tag-rose-text: light-dark(#000000, #ffffff);
  --color-tag-rose-bg: light-dark(#ffffff, #000000);
}
/* @fallback-start: generated by `python tests/design_system/contrast.py --write-fallback` */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --color-canvas: #f3f5f8;
    --color-surface: #ffffff;
    --color-surface-subtle: #f8f9fb;
    --color-surface-sunken: #eceff4;
    --color-surface-hover: #e8ecf2;
    --color-surface-selected: #dfe8fb;
    --color-sidebar-bg: #f8f9fb;
    --color-topbar-bg: #ffffff;
    --color-text: #0f1722;
    --color-text-secondary: #1d2633;
    --color-text-tertiary: #323c4b;
    --color-text-muted: #4a5465;
    --color-text-placeholder: #566072;
    --color-text-disabled: #5a6475;
    --color-border: #d9dee6;
    --color-border-subtle: #e6e9ef;
    --color-border-control: #6f7a8b;
    --color-border-strong: #4f5a6b;
    --color-accent: #2449a8;
    --color-accent-hover: #1d3d91;
    --color-accent-active: #17337c;
    --color-on-accent: #ffffff;
    --color-accent-text: #1f42a0;
    --color-accent-soft: #e9effc;
    --color-accent-border: #8ea7e0;
    --color-selected-bg: #dfe8fb;
    --color-selected-text: #14327f;
    --color-selected-indicator: #2449a8;
    --color-focus: #1d4ed8;
    --color-focus-halo: #ffffff;
    --color-success-text: #0f5c31;
    --color-success-bg: #e6f4ec;
    --color-success-border: #3d8a5f;
    --color-success-fill: #17703f;
    --color-on-success-fill: #ffffff;
    --color-warning-text: #6e3f00;
    --color-warning-bg: #fdf2dc;
    --color-warning-border: #a8741c;
    --color-warning-fill: #9a5800;
    --color-on-warning-fill: #ffffff;
    --color-danger-text: #9b1c12;
    --color-danger-bg: #fdecea;
    --color-danger-border: #c4473b;
    --color-danger-fill: #b42318;
    --color-on-danger-fill: #ffffff;
    --color-info-text: #0b5279;
    --color-info-bg: #e3f1fa;
    --color-info-border: #3b82ad;
    --color-neutral-text: #323c4b;
    --color-neutral-bg: #eceff4;
    --color-inverse-bg: #111827;
    --color-inverse-text: #f8fafc;
    --color-inverse-muted: #c3cbd6;
    --color-overlay: #0f172299;
    --color-chart-income: #2b7a52;
    --color-chart-expense: #76839a;
    --color-chart-1: #2449a8;
    --color-chart-2: #2b7a52;
    --color-chart-3: #b25c00;
    --color-chart-4: #7a3fbf;
    --color-tag-violet-text: #5a2fae;
    --color-tag-violet-bg: #f1ecfd;
    --color-tag-indigo-text: #3a30b0;
    --color-tag-indigo-bg: #ecebfd;
    --color-tag-teal-text: #0b5f58;
    --color-tag-teal-bg: #e2f4f1;
    --color-tag-sky-text: #075478;
    --color-tag-sky-bg: #e2f1f9;
    --color-tag-rose-text: #a0102f;
    --color-tag-rose-bg: #fdebef;
  }
  html[data-contrast="high"] {
    --color-canvas: #ffffff;
    --color-surface: #ffffff;
    --color-surface-subtle: #ffffff;
    --color-surface-sunken: #f0f0f0;
    --color-surface-hover: #e6e6e6;
    --color-surface-selected: #e6e6e6;
    --color-sidebar-bg: #ffffff;
    --color-topbar-bg: #ffffff;
    --color-text: #000000;
    --color-text-secondary: #000000;
    --color-text-tertiary: #141414;
    --color-text-muted: #262626;
    --color-text-placeholder: #333333;
    --color-text-disabled: #333333;
    --color-border: #000000;
    --color-border-subtle: #4d4d4d;
    --color-border-control: #000000;
    --color-border-strong: #000000;
    --color-accent: #002e8a;
    --color-accent-hover: #00226a;
    --color-accent-active: #001a52;
    --color-on-accent: #ffffff;
    --color-accent-text: #002a80;
    --color-accent-soft: #ffffff;
    --color-accent-border: #002e8a;
    --color-selected-bg: #ffffff;
    --color-selected-text: #000000;
    --color-selected-indicator: #000000;
    --color-focus: #000000;
    --color-focus-halo: #ffffff;
    --color-success-text: #003a19;
    --color-success-bg: #ffffff;
    --color-success-border: #003a19;
    --color-success-fill: #003a19;
    --color-on-success-fill: #ffffff;
    --color-warning-text: #422400;
    --color-warning-bg: #ffffff;
    --color-warning-border: #422400;
    --color-warning-fill: #422400;
    --color-on-warning-fill: #ffffff;
    --color-danger-text: #6b0000;
    --color-danger-bg: #ffffff;
    --color-danger-border: #6b0000;
    --color-danger-fill: #6b0000;
    --color-on-danger-fill: #ffffff;
    --color-info-text: #00314f;
    --color-info-bg: #ffffff;
    --color-info-border: #00314f;
    --color-neutral-text: #000000;
    --color-neutral-bg: #ffffff;
    --color-inverse-bg: #000000;
    --color-inverse-text: #ffffff;
    --color-inverse-muted: #e0e0e0;
    --color-overlay: #000000cc;
    --color-chart-income: #003a19;
    --color-chart-expense: #333333;
    --color-chart-1: #002e8a;
    --color-chart-2: #003a19;
    --color-chart-3: #5c2e00;
    --color-chart-4: #4a0d8f;
    --color-tag-violet-text: #000000;
    --color-tag-violet-bg: #ffffff;
    --color-tag-indigo-text: #000000;
    --color-tag-indigo-bg: #ffffff;
    --color-tag-teal-text: #000000;
    --color-tag-teal-bg: #ffffff;
    --color-tag-sky-text: #000000;
    --color-tag-sky-bg: #ffffff;
    --color-tag-rose-text: #000000;
    --color-tag-rose-bg: #ffffff;
  }
}
/* @fallback-end */

/* =============================================================== 2. SCALE TOKENS
   Every length is rem, so html[data-text-scale] (root font size) zooms the whole interface. */
:root {
  --font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* Type scale (px at 100 %): 14 / 15 / 17 / 19 / 22 / 26 / 32.  Body text is --text-base (17px). */
  --text-xs: 0.875rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.1875rem;
  --text-lg: 1.375rem;
  --text-xl: 1.625rem;
  --text-2xl: 2rem;
  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-body: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --letter-spacing-body: 0;
  --word-spacing-body: normal;
  --measure: 70ch;
  --paragraph-gap: 0.75em;

  /* Spacing (rem), multiplied by --density (relaxed spacing = 1.25). */
  --density: 1;
  --space-1: calc(0.25rem * var(--density));
  --space-2: calc(0.5rem * var(--density));
  --space-3: calc(0.75rem * var(--density));
  --space-4: calc(1rem * var(--density));
  --space-5: calc(1.5rem * var(--density));
  --space-6: calc(2rem * var(--density));
  --space-7: calc(3rem * var(--density));
  --space-8: calc(4rem * var(--density));

  /* Sizes: every interactive control is at least 2.75rem (44px) tall and wide. */
  --target-min: 2.75rem;
  --control-h: 2.75rem;
  --control-h-lg: 3.25rem;
  --control-pad-x: 1rem;
  --icon-sm: 1rem;
  --icon: 1.25rem;
  --icon-lg: 1.5rem;
  --sidebar-w: 17rem;
  --topbar-h: 4rem;
  /* Content fills the area next to the sidebar; only prose keeps a line length (--measure-prose).
     Side padding of the content column grows with the window. */
  --content-max: none;
  --page-pad-x: clamp(1rem, 2.5vw, 3rem);
  --measure-prose: 75ch;
  --card-pad: calc(1.25rem * var(--density));

  /* Shape */
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-full: 999px;
  --border-w: 1px;
  --border-w-control: 1px;
  --indicator-w: 0.25rem;
  /* Shape, weight and state mechanics of the components.  Every visual style (static/design-styles.css)
     sets its own values; these defaults are the standard look. */
  --shape-control: var(--radius);
  --shape-field: var(--radius);
  --shape-card: var(--radius-lg);
  --shape-overlay: var(--radius-lg);
  --control-weight: var(--weight-semibold);
  --selected-weight: var(--weight-bold);
  --state-pressed-scale: 1;
  --state-pressed-shift: 0rem;
  --motion-state: var(--motion-fast);
  --ease-state: var(--ease);

  /* Focus: a --focus-w ring in --color-focus, separated from the element by a --color-focus-halo gap,
     so it keeps ≥ 3:1 against both neighbours on any background. */
  --focus-w: 0.1875rem;
  --focus-offset: 0.125rem;
  --focus-ring: 0 0 0 var(--focus-offset) var(--color-focus-halo), 0 0 0 calc(var(--focus-offset) + var(--focus-w)) var(--color-focus);

  /* Elevation */
  --shadow-xs: 0 1px 2px light-dark(rgb(15 23 34 / 6%), rgb(0 0 0 / 30%));
  --shadow-sm: 0 1px 2px light-dark(rgb(15 23 34 / 5%), rgb(0 0 0 / 28%)), 0 1px 3px light-dark(rgb(15 23 34 / 6%), rgb(0 0 0 / 22%));
  --shadow-md: 0 2px 4px light-dark(rgb(15 23 34 / 5%), rgb(0 0 0 / 28%)), 0 6px 16px light-dark(rgb(15 23 34 / 8%), rgb(0 0 0 / 30%));
  --shadow-overlay: 0 12px 32px light-dark(rgb(15 23 34 / 16%), rgb(0 0 0 / 50%)), 0 2px 6px light-dark(rgb(15 23 34 / 8%), rgb(0 0 0 / 30%));

  /* Motion (all zero with reduced motion) */
  --motion-fast: 120ms;
  --motion: 200ms;
  --motion-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Stacking */
  --z-sticky: 30;
  --z-topbar: 60;
  --z-drawer: 80;
  --z-dropdown: 100;
  --z-dialog: 1000;
  --z-toast: 1100;
  --z-skip: 1200;
}
html[data-contrast="high"] {
  --border-w: 2px;
  --border-w-control: 2px;
  --indicator-w: 0.375rem;
  --focus-w: 0.25rem;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-overlay: 0 0 0 2px light-dark(#000000, #ffffff);
}
html[data-spacing="relaxed"] {
  --density: 1.25;
  --leading-body: 1.75;
  --leading-snug: 1.55;
  --letter-spacing-body: 0.012em;
  --word-spacing-body: 0.06em;
  --paragraph-gap: 1.5em;
}
/* Text size / zoom: percentages of the browser's default font size (respects the user's browser setting). */
html[data-text-scale="115"] { font-size: 115%; }
html[data-text-scale="130"] { font-size: 130%; }
html[data-text-scale="150"] { font-size: 150%; }
html[data-text-scale="175"] { font-size: 175%; }
html[data-text-scale="200"] { font-size: 200%; }
html[data-motion="reduce"] { --motion-fast: 0ms; --motion: 0ms; --motion-slow: 0ms; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) { --motion-fast: 0ms; --motion: 0ms; --motion-slow: 0ms; }
}

/* =============================================================== 3. ALIASES (legacy names)
   Older stylesheets use --ds-* and the first-generation names below.  They resolve to the tokens
   above, so every mode reaches them.  New code uses only --color-*, --text-*, --space-* … */
:root {
  --ds-bg: var(--color-canvas);
  --ds-surface: var(--color-surface);
  --ds-surface-2: var(--color-surface-subtle);
  --ds-surface-3: var(--color-surface-sunken);
  --ds-row-hover: var(--color-surface-hover);
  --ds-hover-bg: var(--color-surface-hover);
  --ds-border: var(--color-border);
  --ds-border-row: var(--color-border-subtle);
  --ds-border-strong: var(--color-border-control);
  --ds-border-hover: var(--color-border-strong);
  --ds-text: var(--color-text);
  --ds-text-2: var(--color-text-secondary);
  --ds-text-3: var(--color-text-tertiary);
  --ds-muted: var(--color-text-muted);
  --ds-placeholder: var(--color-text-placeholder);
  --ds-subtle: var(--color-text-disabled);
  --ds-on-accent: var(--color-on-accent);
  --ds-accent: var(--color-accent);
  --ds-accent-hover: var(--color-accent-hover);
  --ds-accent-active: var(--color-accent-active);
  --ds-accent-soft: var(--color-accent-soft);
  --ds-accent-line: var(--color-accent-border);
  --ds-accent-text: var(--color-accent-text);
  --ds-selected-bg: var(--color-selected-bg);
  --ds-selected-text: var(--color-selected-text);
  --ds-selected-icon: var(--color-selected-indicator);
  --ds-success: var(--color-success-text);
  --ds-success-soft: var(--color-success-bg);
  --ds-success-line: var(--color-success-border);
  --ds-success-strong: var(--color-success-fill);
  --ds-success-fill: var(--color-success-fill);
  --ds-warning: var(--color-warning-text);
  --ds-warning-soft: var(--color-warning-bg);
  --ds-warning-line: var(--color-warning-border);
  --ds-warning-strong: var(--color-warning-fill);
  --ds-warning-fill: var(--color-warning-fill);
  --ds-danger: var(--color-danger-text);
  --ds-danger-soft: var(--color-danger-bg);
  --ds-danger-line: var(--color-danger-border);
  --ds-neutral-soft: var(--color-neutral-bg);
  --ds-inverse-bg: var(--color-inverse-bg);
  --ds-inverse-bg-2: var(--color-inverse-bg);
  --ds-inverse-text: var(--color-inverse-text);
  --ds-inverse-muted: var(--color-inverse-muted);
  --ds-violet: var(--color-tag-violet-text);
  --ds-violet-soft: var(--color-tag-violet-bg);
  --ds-violet-line: var(--color-border);
  --ds-violet-fill: var(--color-chart-4);
  --ds-indigo: var(--color-tag-indigo-text);
  --ds-indigo-soft: var(--color-tag-indigo-bg);
  --ds-teal: var(--color-tag-teal-text);
  --ds-teal-soft: var(--color-tag-teal-bg);
  --ds-sky: var(--color-tag-sky-text);
  --ds-sky-soft: var(--color-tag-sky-bg);
  --ds-rose: var(--color-tag-rose-text);
  --ds-rose-soft: var(--color-tag-rose-bg);
  --ds-chart-income: var(--color-chart-income);
  --ds-chart-expense: var(--color-chart-expense);
  --ds-sidebar-bg: var(--color-sidebar-bg);
  --ds-shadow-xs: var(--shadow-xs);
  --ds-shadow-sm: var(--shadow-sm);
  --ds-shadow-md: var(--shadow-md);
  --ds-shadow-overlay: var(--shadow-overlay);
  --ds-font: var(--font-sans);
  --ds-mono: var(--font-mono);
  --ds-text-xs: var(--text-xs);
  --ds-text-sm: var(--text-sm);
  --ds-text-base: var(--text-base);
  --ds-text-md: var(--text-md);
  --ds-text-lg: var(--text-md);
  --ds-text-xl: var(--text-lg);
  --ds-text-2xl: var(--text-xl);
  --ds-space-1: var(--space-1);
  --ds-space-2: var(--space-2);
  --ds-space-3: var(--space-3);
  --ds-space-4: var(--space-4);
  --ds-space-5: var(--space-5);
  --ds-space-6: var(--space-6);
  --ds-space-7: var(--space-7);
  --ds-radius-sm: var(--radius-sm);
  --ds-radius: var(--radius);
  --ds-radius-md: var(--radius-md);
  --ds-radius-lg: var(--radius-lg);
  --ds-radius-full: var(--radius-full);
  --ds-focus-ring: var(--focus-ring);
  --ds-control-h: var(--control-h);
  --ds-control-h-sm: var(--control-h);
  --ds-control-h-lg: var(--control-h-lg);
  --ds-sidebar-w: var(--sidebar-w);
  --ds-topbar-h: var(--topbar-h);
  --ds-content-max: var(--content-max);
  --ds-card-pad: var(--card-pad);
  /* First-generation names */
  --bg: var(--color-canvas);
  --surface: var(--color-surface);
  --surface-muted: var(--color-surface-sunken);
  --surface-strong: var(--color-surface-sunken);
  --panel: var(--color-surface);
  --border: var(--color-border);
  --line: var(--color-border);
  --ui-line: var(--color-border-control);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --blue: var(--color-accent);
  --blue-soft: var(--color-accent-soft);
  --ui-accent: var(--color-accent);
  --primary: var(--color-accent);
  --primary-strong: var(--color-accent-active);
  --green: var(--color-success-text);
  --green-soft: var(--color-success-bg);
  --amber: var(--color-warning-text);
  --amber-soft: var(--color-warning-bg);
  --red: var(--color-danger-text);
  --red-soft: var(--color-danger-bg);
  --shadow: none;
}

/* =============================================================== 4. DISPLAY MODES (unlayered)
   Focus: one ring for every focusable element, beating every layered rule.  Components that sit in
   clipping containers switch to an inset ring with --focus-ring-offset / --focus-ring-halo. */
:root :focus-visible {
  outline: var(--focus-w) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset, var(--focus-offset));
  box-shadow: var(--focus-ring-halo, 0 0 0 var(--focus-offset) var(--color-focus-halo));
}
:root :focus:not(:focus-visible) { outline: none; }
/* Reduced motion: chosen in the panel, or the OS setting unless the user chose "full". */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition: none !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *, html:not([data-motion="full"]) *::before, html:not([data-motion="full"]) *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition: none !important; scroll-behavior: auto !important;
  }
}

/* =============================================================== 5. BASE ELEMENTS */
@layer reset {
html {
  /* The root is the size container "page": @container page (max-width: 60rem) reflows with the
     text size (rem follows html[data-text-scale]), unlike @media, which only sees device pixels. */
  container: page / inline-size;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-canvas);
}
body {
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: var(--letter-spacing-body);
  word-spacing: var(--word-spacing-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
button, input, select, textarea { font-family: inherit; }
b, strong { font-weight: var(--weight-semibold); }
h1, h2, h3, h4 { color: var(--color-text); font-weight: var(--weight-semibold); letter-spacing: 0; text-wrap: balance; }
h1 { font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: -0.01em; }
h2 { font-size: var(--text-md); line-height: var(--leading-snug); }
h3 { font-size: var(--text-base); line-height: var(--leading-snug); }
p { line-height: var(--leading-body); }
a { color: var(--color-accent-text); text-underline-offset: 0.18em; text-decoration-thickness: from-font; }
a:hover { color: var(--color-accent-hover); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
small { font-size: var(--text-sm); }
th, summary, legend { font-weight: var(--weight-semibold); }
:where(button, a, input, select, textarea, summary) { scroll-margin-block: calc(var(--topbar-h) + var(--space-5)); }
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]), select, textarea) {
  min-height: var(--control-h);
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border: var(--border-w-control) solid var(--color-border-control);
  border-radius: var(--shape-field);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
select { padding-right: 2rem; }
textarea { min-height: 6rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-text-placeholder); opacity: 1; }
input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; accent-color: var(--color-accent); }
button, select, summary { min-height: var(--target-min); }
table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: var(--text-base); }
th {
  padding: var(--space-3) var(--space-3); border-bottom: var(--border-w) solid var(--color-border-control);
  background: var(--color-surface); color: var(--color-text-secondary);
  font-size: var(--text-sm); text-align: left; white-space: nowrap;
}
td {
  height: var(--target-min); padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary); vertical-align: middle;
}
td small { display: block; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-snug); }
}

/* =============================================================== 6. COMPONENTS (ds-*) */
@layer ds {
/* ---------------------------------------------------------------- utilities */
.ds-sr-only, .ds-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ds-skip-link, .skip-link {
  position: fixed; inset-inline-start: var(--space-4); inset-block-start: var(--space-3); z-index: var(--z-skip);
  display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-4);
  border-radius: var(--radius); background: var(--color-accent); color: var(--color-on-accent);
  font-weight: var(--weight-semibold); text-decoration: underline; transform: translateY(-200%);
}
.ds-skip-link:focus, .skip-link:focus { transform: none; color: var(--color-on-accent); }
.ds-prose { max-width: var(--measure); }
.ds-prose > * + * { margin-top: var(--paragraph-gap); }
.ds-muted { color: var(--color-text-muted); }
.ds-num, .amount, td.amount { font-variant-numeric: tabular-nums; }
.ds-stack { display: grid; gap: var(--space-4); align-content: start; }
.ds-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ds-grid-min, 18rem)), 1fr)); }
/* Inline links are underlined in every mode (WCAG 1.4.1: never colour alone). */
.ds-link, .ds-prose a, p a:not([class]), li a:not([class]), td a:not([class]), dd a:not([class]) {
  color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 0.18em;
}
kbd.ds-kbd, .ds-kbd {
  display: inline-block; min-width: 1.6em; padding: 0 0.35em; border: 1px solid var(--color-border-control);
  border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--color-surface-subtle);
  font: var(--weight-semibold) 0.85em/1.5 var(--font-mono); text-align: center;
}

/* ---------------------------------------------------------------- buttons
   <button class="ds-btn ds-btn--primary">Speichern</button>
   Variants: --primary (one per view), --secondary, --ghost, --danger (solid, final confirmation),
   --danger-outline.  States: :disabled / aria-disabled="true", aria-busy="true" (loading). */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); min-width: var(--target-min); margin: 0; padding: 0 var(--control-pad-x);
  border: var(--border-w-control) solid transparent; border-radius: var(--shape-control);
  background: transparent; color: var(--color-text);
  font: var(--control-weight) var(--text-base)/var(--leading-tight) var(--font-sans);
  text-align: center; text-decoration: none; white-space: normal; cursor: pointer;
  transition: background-color var(--motion-state) var(--ease-state), border-color var(--motion-state) var(--ease-state), color var(--motion-state) var(--ease-state),
    box-shadow var(--motion-state) var(--ease-state), transform var(--motion-state) var(--ease-state);
}
/* Pressed: one mechanic for every button; the style decides scale and shift (standard: none). */
:is(.ds-btn, .ds-icon-btn, .primary-button, .secondary-button, .ghost-button, .danger-button, .icon-button):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(var(--state-pressed-shift)) scale(var(--state-pressed-scale));
}
/* Toggle buttons (aria-pressed="true"): selected surface, indicator border and a check mark, never colour alone. */
.ds-btn[aria-pressed="true"] {
  background: var(--color-selected-bg); border-color: var(--color-selected-indicator); color: var(--color-selected-text); font-weight: var(--selected-weight);
  box-shadow: inset 0 0 0 1px var(--color-selected-indicator);
}
.ds-btn[aria-pressed="true"]:not([aria-busy="true"])::before { content: "✓" / ""; font-weight: var(--weight-bold); }
.ds-btn svg, .ds-btn .ds-icon { width: var(--icon); height: var(--icon); flex: none; }
.ds-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.ds-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-on-accent); }
.ds-btn--primary:active:not(:disabled) { background: var(--color-accent-active); }
.ds-btn--secondary { background: var(--color-surface); border-color: var(--color-border-control); color: var(--color-text); box-shadow: var(--shadow-xs); }
.ds-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.ds-btn--ghost { background: transparent; color: var(--color-accent-text); }
.ds-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-surface-hover); color: var(--color-accent-hover); }
.ds-btn--danger { background: var(--color-danger-fill); border-color: var(--color-danger-fill); color: var(--color-on-danger-fill); }
.ds-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(0.92); }
.ds-btn--danger-outline { background: var(--color-surface); border-color: var(--color-danger-border); color: var(--color-danger-text); }
.ds-btn--danger-outline:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-danger-bg); }
.ds-btn--lg { min-height: var(--control-h-lg); padding: 0 1.25rem; font-size: var(--text-md); }
.ds-btn--block { display: flex; width: 100%; }
.ds-btn:is(:disabled, [aria-disabled="true"]) {
  background: var(--color-surface-sunken); border-color: var(--color-border-control); border-style: dashed;
  color: var(--color-text-disabled); box-shadow: none; cursor: not-allowed; filter: none;
}
/* Loading: the label stays, a spinner joins it; aria-busy tells assistive tech. */
.ds-btn[aria-busy="true"] { cursor: progress; }
.ds-btn[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; flex: none; border: 0.15em solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: ds-spin 0.8s linear infinite;
}
.ds-icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--target-min); height: var(--target-min); min-width: var(--target-min); min-height: var(--target-min); padding: 0;
  border: var(--border-w-control) solid transparent; border-radius: var(--shape-control);
  background: transparent; color: var(--color-text-secondary); font-size: var(--text-md); line-height: 1; cursor: pointer;
  transition: background-color var(--motion-state) var(--ease-state), box-shadow var(--motion-state) var(--ease-state), transform var(--motion-state) var(--ease-state);
}
.ds-icon-btn:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text); }
.ds-icon-btn svg { width: var(--icon); height: var(--icon); }
.ds-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- form fields
   <div class="ds-field">
     <label class="ds-label" for="iban">IBAN <span class="ds-required">Pflichtfeld</span></label>
     <p class="ds-hint" id="iban-hint">22 Zeichen, beginnt mit DE.</p>
     <input class="ds-input" id="iban" aria-describedby="iban-hint iban-error" aria-invalid="true" required>
     <p class="ds-error" id="iban-error">Die IBAN ist zu kurz.</p>
   </div>  Labels are always visible; hints and errors are linked with aria-describedby. */
.ds-field { display: grid; gap: var(--space-1); align-content: start; min-width: 0; margin: 0; }.ds-label { color: var(--color-text); font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.ds-required { margin-left: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.ds-required::before { content: "("; }
.ds-required::after { content: ")"; }
.ds-hint { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-snug); max-width: var(--measure); }
.ds-error, .field-error {
  display: flex; align-items: flex-start; gap: var(--space-2); margin: 0;
  color: var(--color-danger-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug);
}
.ds-error:not(:empty)::before, .field-error:not(:empty)::before {
  content: "!" / ""; display: inline-grid; place-items: center; flex: none; width: 1.25em; height: 1.25em;
  border-radius: 50%; background: var(--color-danger-fill); color: var(--color-on-danger-fill); font-size: 0.85em; font-weight: var(--weight-bold);
}
.ds-error:empty { display: none; }
.ds-input, .ds-select, .ds-textarea {
  /* border-box: pages without a global reset (Kundenportal) must not grow the field by padding + border past its form. */
  box-sizing: border-box; display: block; width: 100%; max-width: 100%; min-height: var(--control-h); margin: 0; padding: 0.5rem 0.75rem;
  border: var(--border-w-control) solid var(--color-border-control); border-radius: var(--shape-field);
  background: var(--color-surface); color: var(--color-text);
  font: var(--weight-regular) var(--text-base)/var(--leading-snug) var(--font-sans);
}
.ds-textarea { min-height: 7rem; resize: vertical; }
:is(.ds-input, .ds-select, .ds-textarea, input, select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--color-border-strong); }
:is(.ds-input, .ds-select, .ds-textarea, input, select, textarea):focus-visible { border-color: var(--color-focus); }
:is(.ds-input, .ds-select, .ds-textarea, input, select, textarea)[aria-invalid="true"], .is-invalid {
  border-color: var(--color-danger-border); border-width: 2px; background-color: var(--color-danger-bg);
}
:is(.ds-input, .ds-select, .ds-textarea, input, select, textarea):disabled, input[readonly], textarea[readonly] {
  background-color: var(--color-surface-sunken); border-style: dashed; color: var(--color-text-disabled); cursor: not-allowed;
}
input[readonly], textarea[readonly] { cursor: text; color: var(--color-text-secondary); }

/* Checkbox / radio rows: the whole label is the target (≥ 44px). */
.ds-check, .ds-radio {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-height: var(--target-min); padding-block: 0.5rem; cursor: pointer; line-height: var(--leading-snug);
}
.ds-check input, .ds-radio input { flex: none; width: 1.375rem; height: 1.375rem; margin: 0.0625rem 0 0; accent-color: var(--color-accent); cursor: pointer; }
.ds-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ds-fieldset > legend { margin-bottom: var(--space-2); padding: 0; color: var(--color-text); font-size: var(--text-base); font-weight: var(--weight-semibold); }

/* Switch: <label class="ds-switch"><input type="checkbox" role="switch"><span class="ds-switch__track" aria-hidden="true"></span>
   <span class="ds-switch__label">Bewegungen reduzieren</span></label>.  State is shape + position + ✓, not colour. */
.ds-switch { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); cursor: pointer; }
.ds-switch input { position: absolute; inset-inline-start: 0; width: 3.25rem; height: 2rem; margin: 0; opacity: 0; cursor: pointer; }
.ds-switch__track {
  position: relative; flex: none; width: 3.25rem; height: 2rem; border: 2px solid var(--color-border-control);
  border-radius: var(--radius-full); background: var(--color-surface-sunken); transition: background-color var(--motion) var(--ease);
}
.ds-switch__track::after {
  content: ""; position: absolute; inset-block-start: 0.1875rem; inset-inline-start: 0.1875rem; display: grid; place-items: center;
  width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--color-text-muted);
  color: var(--color-on-accent); font-size: 0.85rem; font-weight: var(--weight-bold); line-height: 1;
  transition: transform var(--motion) var(--ease), background-color var(--motion) var(--ease);
}
.ds-switch input:checked + .ds-switch__track { border-color: var(--color-accent); background: var(--color-accent); }
.ds-switch input:checked + .ds-switch__track::after { content: "✓" / ""; transform: translateX(1.25rem); background: var(--color-on-accent); color: var(--color-accent); }
.ds-switch input:focus-visible + .ds-switch__track {
  outline: var(--focus-w) solid var(--color-focus); outline-offset: var(--focus-offset); box-shadow: 0 0 0 var(--focus-offset) var(--color-focus-halo);
}
.ds-switch input:disabled + .ds-switch__track { border-style: dashed; opacity: 0.7; }

/* Segmented choice (radio group shown as buttons): <fieldset class="ds-segmented"><legend>…</legend>
   <label><input type="radio" name="theme" value="light"><span>Hell</span></label> …</fieldset> */
.ds-segmented { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.ds-segmented > legend { width: 100%; margin-bottom: var(--space-2); padding: 0; font-weight: var(--weight-semibold); }
.ds-segmented label { position: relative; display: inline-flex; flex: 1 1 auto; }
.ds-segmented input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ds-segmented label > span {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%;
  min-height: var(--target-min); min-width: var(--target-min); padding: 0.375rem 0.875rem;
  border: var(--border-w-control) solid var(--color-border-control); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-text); font-weight: var(--weight-medium); text-align: center;
}
.ds-segmented input:hover + span { background: var(--color-surface-hover); }
.ds-segmented input:checked + span {
  border-color: var(--color-selected-indicator); border-width: 2px; background: var(--color-selected-bg);
  color: var(--color-selected-text); font-weight: var(--weight-bold);
}
.ds-segmented input:checked + span::before { content: "✓" / ""; font-weight: var(--weight-bold); }
.ds-segmented input:focus-visible + span {
  outline: var(--focus-w) solid var(--color-focus); outline-offset: var(--focus-offset); box-shadow: 0 0 0 var(--focus-offset) var(--color-focus-halo);
}

/* ---------------------------------------------------------------- cards */
.ds-card {
  min-width: 0; padding: var(--card-pad);
  border: var(--border-w) solid var(--color-border); border-radius: var(--shape-card);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm);
}
.ds-card .ds-card { box-shadow: none; }
.ds-card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.ds-card__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.ds-card__desc { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.ds-card__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.ds-card--interactive { position: relative; transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); }
.ds-card--interactive:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.ds-card--interactive:focus-within { border-color: var(--color-focus); }
.ds-kpi { display: grid; gap: var(--space-1); align-content: start; }
.ds-kpi__label { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.ds-kpi__value { color: var(--color-text); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- tables
   <div class="ds-table-wrap" tabindex="0" role="region" aria-label="Rechnungen">
     <table class="ds-table ds-table--stack"> <thead><tr><th scope="col" aria-sort="descending">
       <button type="button" class="ds-sort">Datum</button></th>…</tr></thead>
       <tbody><tr><td data-label="Datum">…</td>…</tr></tbody></table></div>
   --stack: below 40rem of table width the rows become labelled cards (data-label), also when the
   text is enlarged.  --zebra: alternating rows.  .is-num: right-aligned tabular numbers. */
.ds-table-wrap {
  container: table / inline-size; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  border: var(--border-w) solid var(--color-border); border-radius: var(--shape-card); background: var(--color-surface);
}
.ds-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-base); }
.ds-table caption { padding: var(--space-3) var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); text-align: left; caption-side: top; }
.ds-table th {
  position: sticky; top: var(--ds-table-sticky-top, 0); z-index: 1;
  padding: var(--space-3) var(--space-4); border-bottom: var(--border-w-control) solid var(--color-border-control);
  background: var(--color-surface-sunken); color: var(--color-text-secondary);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); text-align: left; white-space: nowrap;
}
.ds-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text); vertical-align: top; }
.ds-table tbody tr:last-child > td { border-bottom: 0; }
.ds-table--zebra tbody tr:nth-child(even) > td { background: var(--color-surface-subtle); }
.ds-table tbody tr:hover > td { background: var(--color-surface-hover); }
.ds-table tbody tr[aria-selected="true"] > td { background: var(--color-selected-bg); color: var(--color-selected-text); }
.ds-table tbody tr[aria-selected="true"] > td:first-child { box-shadow: inset var(--indicator-w) 0 0 var(--color-selected-indicator); }
.ds-table .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-sort {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); margin: calc(-1 * var(--space-3)) 0;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.ds-sort::after { content: "↕" / ""; color: var(--color-text-muted); font-weight: var(--weight-regular); }
th[aria-sort="ascending"] .ds-sort::after { content: "▲" / ""; color: var(--color-text); }
th[aria-sort="descending"] .ds-sort::after { content: "▼" / ""; color: var(--color-text); }
.ds-table-wrap:focus-visible { --focus-ring-offset: calc(-1 * var(--focus-w)); --focus-ring-halo: none; }
@container table (max-width: 40rem) {
  .ds-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* border-box: width 100% plus the tbody/td padding made the cards wider than the table (horizontal scroll at 390 px). */
  .ds-table--stack, .ds-table--stack tbody, .ds-table--stack tr, .ds-table--stack td { display: block; box-sizing: border-box; width: 100%; }
  .ds-table--stack tbody { display: grid; gap: var(--space-3); padding: var(--space-3); }
  .ds-table--stack tr { border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  /* height: the base td height is a minimum only inside table layout; as a grid it would clip multi-line cells. */
  .ds-table--stack td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-1) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); height: auto; min-height: var(--target-min); }
  .ds-table--stack td::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .ds-table--stack td:not([data-label])::before { content: none; }
  .ds-table--stack td:not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  .ds-table--stack td.is-num { text-align: left; }
  /* A second line in a cell ("text<br><small>ref</small>") stays in the value column, under the value, in both the
     two-column and the stacked one-column card (no implicit column that squeezes the label). */
  .ds-table--stack td[data-label] > br { display: none; }
  .ds-table--stack td[data-label] > * { grid-column: -2 / -1; min-width: 0; }
  .ds-table--stack tbody tr:last-child > td:not(:last-child) { border-bottom: 1px solid var(--color-border-subtle); }
}
@container table (max-width: 24rem) {
  .ds-table--stack td { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- tabs
   <div class="ds-tabs" role="tablist" aria-label="Rechnung"> <button class="ds-tab" role="tab"
   aria-selected="true" aria-controls="p1" id="t1">Positionen</button> … </div>
   <div class="ds-tabpanel" role="tabpanel" id="p1" aria-labelledby="t1" tabindex="0">…</div>
   Arrow keys / Home / End: FinanceUI.tabs (design-system.js). */
.ds-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-4); border-bottom: var(--border-w) solid var(--color-border); }
.ds-tab {
  --focus-ring-offset: calc(-1 * var(--focus-w));
  --focus-ring-halo: inset 0 0 0 calc(var(--focus-w) + var(--focus-offset)) var(--color-focus-halo);
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); margin: 0 0 -1px; padding: 0 var(--space-4);
  border: 0; border-bottom: var(--indicator-w) solid transparent; border-radius: var(--radius) var(--radius) 0 0;
  background: transparent; color: var(--color-text-tertiary); font: var(--weight-medium) var(--text-base)/var(--leading-tight) var(--font-sans); cursor: pointer;
}
.ds-tab:hover { background: var(--color-surface-hover); color: var(--color-text); }
.ds-tab[aria-selected="true"] { border-bottom-color: var(--color-selected-indicator); color: var(--color-selected-text); font-weight: var(--weight-bold); }
.ds-tabpanel:focus-visible { --focus-ring-offset: var(--focus-offset); }

/* ---------------------------------------------------------------- dialogs
   <dialog class="ds-dialog" aria-labelledby="d-title"> <header class="ds-dialog__header"><h2 id="d-title">…</h2>
   <button class="ds-icon-btn" data-ds-close aria-label="Schließen">✕</button></header>
   <div class="ds-dialog__body">…</div> <footer class="ds-dialog__footer">…</footer></dialog>
   Open with FinanceUI.dialog.open(dialog, trigger): modal, focus inside, Esc closes, focus returns. */
.ds-dialog {
  width: min(40rem, 100% - 2rem); max-width: none; max-height: min(90dvh, 100% - 2rem); margin: auto; padding: 0;
  border: var(--border-w) solid var(--color-border-control); border-radius: var(--shape-overlay);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-overlay);
}
.ds-dialog[open] { display: flex; flex-direction: column; animation: ds-dialog-in var(--motion) var(--ease); }
.ds-dialog::backdrop { background: var(--color-overlay); }
.ds-dialog--wide { width: min(64rem, 100% - 2rem); }
.ds-dialog__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border);
}
.ds-dialog__header h2 { margin: 0; font-size: var(--text-lg); }
.ds-dialog__body { flex: 1 1 auto; min-height: 0; padding: var(--space-5); overflow: auto; }
.ds-dialog__footer {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-surface);
}
.ds-dialog__footer > :is(.ds-btn--secondary, .ds-btn--ghost):first-child { margin-right: auto; }
@keyframes ds-dialog-in { from { opacity: 0; transform: translateY(0.5rem); } }
@container page (max-width: 30rem) {
  .ds-dialog { width: 100%; max-height: 100%; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .ds-dialog__footer > * { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- menus (disclosure)
   <details class="ds-menu-button"><summary class="ds-btn ds-btn--secondary">Weitere Aktionen</summary>
   <div class="ds-menu"><button class="ds-menu__item">Exportieren</button>…</div></details>
   A plain list of buttons/links (no role=menu); FinanceUI closes it on Esc and outside clicks. */
.ds-menu-button { position: relative; display: inline-block; }
.ds-menu-button > summary { list-style: none; }
.ds-menu-button > summary::-webkit-details-marker { display: none; }
/* One chevron for every disclosure menu ("Weitere Aktionen", user menus), drawn with borders in the text colour
   (no image: the admin listener's CSP allows no data: images; forced colours keep currentColor); it turns while
   the menu is open. Same shape as the lucide chevron-down of the CRM record menu. */
.ds-menu-button > summary::after {
  content: "" / ""; display: inline-block; flex: none; box-sizing: border-box; width: 0.5em; height: 0.5em;
  margin-inline: var(--space-2) 0.125em; border-right: 0.125em solid currentColor; border-bottom: 0.125em solid currentColor;
  transform: translateY(-0.15em) rotate(45deg); transition: transform var(--motion-fast) var(--ease);
}
.ds-menu-button[open] > summary::after { transform: translateY(0.1em) rotate(225deg); }
.ds-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + var(--space-1)); z-index: var(--z-dropdown);
  display: grid; gap: 2px; min-width: 14rem; max-width: min(24rem, 100vw - 2rem); padding: var(--space-2);
  border: var(--border-w) solid var(--color-border-control); border-radius: var(--shape-overlay);
  background: var(--color-surface); box-shadow: var(--shadow-overlay);
}
.ds-menu[hidden] { display: none; }
.ds-menu__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--target-min); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius); background: transparent; color: var(--color-text);
  font: var(--weight-medium) var(--text-base)/var(--leading-tight) var(--font-sans); text-align: left; text-decoration: none; cursor: pointer;
}
.ds-menu__item:hover { background: var(--color-surface-hover); color: var(--color-text); }
.ds-menu__item svg { width: var(--icon); height: var(--icon); color: var(--color-text-muted); }
.ds-menu__item .ds-kbd { margin-left: auto; }
.ds-menu__sep { height: 1px; margin: var(--space-1) 0; background: var(--color-border); }

/* ---------------------------------------------------------------- badges / status chips
   <span class="ds-badge ds-badge--success">Bezahlt</span> — the glyph (✓ ! ✕ i •) carries the
   status next to the colour; the text says it in words. */
.ds-badge {
  display: inline-flex; align-items: center; gap: 0.375em; min-height: 1.75rem; max-width: 100%; padding: 0.125rem 0.625rem;
  border: 1px solid var(--color-border-control); border-radius: var(--radius-full);
  background: var(--color-neutral-bg); color: var(--color-neutral-text);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); white-space: nowrap;
}
.ds-badge::before { content: "•" / ""; font-weight: var(--weight-bold); }
.ds-badge--success { border-color: var(--color-success-border); background: var(--color-success-bg); color: var(--color-success-text); }
.ds-badge--success::before { content: "✓" / ""; }
.ds-badge--warning { border-color: var(--color-warning-border); background: var(--color-warning-bg); color: var(--color-warning-text); }
.ds-badge--warning::before { content: "!" / ""; }
.ds-badge--danger { border-color: var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger-text); }
.ds-badge--danger::before { content: "✕" / ""; }
.ds-badge--info { border-color: var(--color-info-border); background: var(--color-info-bg); color: var(--color-info-text); }
.ds-badge--info::before { content: "i" / ""; font-style: italic; font-family: Georgia, serif; }
.ds-badge--plain::before { content: none; }

/* ---------------------------------------------------------------- notices (inline alerts) */
.ds-notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: start;
  padding: var(--space-3) var(--space-4); border: var(--border-w) solid var(--color-info-border);
  border-inline-start-width: var(--indicator-w); border-radius: var(--radius-md); background: var(--color-info-bg); color: var(--color-text);
}
.ds-notice::before { content: "i" / ""; grid-row: span 2; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-info-text); color: var(--color-surface); font: italic var(--weight-bold) var(--text-sm)/1 Georgia, serif; }
.collection-pager { margin-bottom: var(--space-4); align-items: center; }
.collection-pager p { margin: 0; }
.collection-pager button { grid-column: 2; justify-self: start; }
.ds-notice--success { border-color: var(--color-success-border); background: var(--color-success-bg); }
.ds-notice--success::before { content: "✓" / ""; background: var(--color-success-fill); color: var(--color-on-success-fill); font-style: normal; font-family: var(--font-sans); }
.ds-notice--warning { border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.ds-notice--warning::before { content: "!" / ""; background: var(--color-warning-fill); color: var(--color-on-warning-fill); font-style: normal; font-family: var(--font-sans); }
.ds-notice--danger { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.ds-notice--danger::before { content: "✕" / ""; background: var(--color-danger-fill); color: var(--color-on-danger-fill); font-style: normal; font-family: var(--font-sans); }
.ds-notice__title { margin: 0; font-weight: var(--weight-semibold); }
.ds-notice p { margin: 0; }

/* ---------------------------------------------------------------- toasts
   <div class="ds-toast-region" role="status" aria-live="polite"> … </div>  FinanceUI.toast(text, {tone}).
   Passive status: the region never takes clicks (pointer-events: none), only a close button does. */
.ds-toast-region {
  position: fixed; inset-inline-end: var(--space-4); inset-block-end: var(--space-4); z-index: var(--z-toast);
  display: grid; gap: var(--space-2); width: min(26rem, 100% - 2rem); pointer-events: none;
}
.ds-toast {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: var(--border-w) solid var(--color-border-control);
  border-inline-start: var(--indicator-w) solid var(--color-info-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-overlay);
  font-weight: var(--weight-medium); pointer-events: none; animation: ds-toast-in var(--motion) var(--ease);
}
.ds-toast::before { content: "i" / ""; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-info-text); color: var(--color-surface); font: italic var(--weight-bold) var(--text-sm)/1 Georgia, serif; }
.ds-toast--success { border-inline-start-color: var(--color-success-fill); }
.ds-toast--success::before { content: "✓" / ""; background: var(--color-success-fill); color: var(--color-on-success-fill); font-style: normal; font-family: var(--font-sans); }
.ds-toast--error { border-inline-start-color: var(--color-danger-fill); }
.ds-toast--error::before { content: "✕" / ""; background: var(--color-danger-fill); color: var(--color-on-danger-fill); font-style: normal; font-family: var(--font-sans); }
.ds-toast--warning { border-inline-start-color: var(--color-warning-fill); }
.ds-toast--warning::before { content: "!" / ""; background: var(--color-warning-fill); color: var(--color-on-warning-fill); font-style: normal; font-family: var(--font-sans); }
.ds-toast__close { pointer-events: auto; margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0; }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(0.5rem); } }
@container page (max-width: 30rem) {
  .ds-toast-region { inset-inline: var(--space-3); width: auto; }
}

/* ---------------------------------------------------------------- empty / loading / error states
   <div class="ds-state ds-state--empty"><h2 class="ds-state__title">Noch keine Rechnungen</h2>
   <p>…</p><div class="ds-state__actions"><button class="ds-btn ds-btn--primary">…</button></div></div>
   Loading: .ds-state--loading with aria-busy="true" on the region and a .ds-spinner. */
.ds-state {
  display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-5);
  border: 1px dashed var(--color-border-control); border-radius: var(--radius-lg); background: var(--color-surface-subtle); color: var(--color-text);
}
.ds-state__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.ds-state p { margin: 0; max-width: var(--measure); color: var(--color-text-muted); }
.ds-state__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.ds-state--error { border-style: solid; border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.ds-state--error .ds-state__title::before { content: "✕ " / ""; color: var(--color-danger-text); }
.ds-state--loading { grid-template-columns: auto minmax(0, 1fr); align-items: center; border-style: solid; }
.ds-spinner {
  display: inline-block; width: 1.5rem; height: 1.5rem; border: 0.1875rem solid var(--color-border);
  border-top-color: var(--color-accent); border-radius: 50%; animation: ds-spin 0.9s linear infinite;
}
html[data-motion="reduce"] .ds-spinner { border-style: dotted; border-color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .ds-spinner { border-style: dotted; border-color: var(--color-accent); } }
.ds-skeleton { display: block; height: 1em; border-radius: var(--radius-sm); background: var(--color-surface-sunken); }

/* ---------------------------------------------------------------- page header
   <header class="ds-page-header"><div class="ds-page-header__text"><h1>Rechnungen</h1>
   <p class="ds-page-header__desc">…</p></div><div class="ds-page-header__actions">
   <button class="ds-btn ds-btn--primary">Neue Rechnung</button> <details class="ds-menu-button">…</details></div></header>
   One primary action; everything else goes into "Weitere Aktionen". */
.ds-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-5); }
.ds-page-header__text { flex: 1 1 20rem; min-width: 0; }
.ds-page-header h1 { margin: 0; font-size: var(--text-xl); overflow-wrap: anywhere; }
.ds-page-header__desc { margin: var(--space-1) 0 0; max-width: var(--measure); color: var(--color-text-muted); }
/* Title with a status badge on one line (payroll "Alpha"); notes and disclaimers go into a .ds-notice below the
   header, so every header is title (+ badge, description) | primary action + "Weitere Aktionen". */
.ds-page-header__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ds-page-header__title-row > * { min-width: 0; }
.ds-page-header__title-row > .ds-badge { max-width: 100%; white-space: normal; }
.ds-page-header + .ds-notice { margin: calc(-1 * var(--space-2)) 0 var(--space-5); }
.ds-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-1); padding: 0; list-style: none; color: var(--color-text-muted); font-size: var(--text-sm); }
.ds-breadcrumb li + li::before { content: "›" / ""; margin-right: var(--space-2); }

/* ---------------------------------------------------------------- navigation shell
   <div class="ds-shell" data-ds-shell>
     <a class="ds-skip-link" href="#main">Zum Inhalt springen</a>
     <header class="ds-topbar"> <button class="ds-icon-btn ds-shell__menu" data-ds-shell-toggle aria-controls="nav" aria-expanded="false" aria-label="Navigation">☰</button>
       <a class="ds-brand" href="/app">…</a> <form class="ds-search" role="search">…</form> <div class="ds-topbar__end">…user menu…</div></header>
     <nav class="ds-sidebar" id="nav" aria-label="Hauptnavigation">
       <details class="ds-nav-group" open><summary>Finanzen</summary><ul class="ds-nav-list">
         <li><a class="ds-nav-link" href="#" aria-current="page"><svg …/>Rechnungen</a></li></ul></details></nav>
     <main class="ds-main" id="main" tabindex="-1">…</main></div>
   Below 60rem of page width (also at 200 % text on a 1280 px screen) the sidebar becomes a drawer. */
.ds-shell {
  display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "topbar topbar" "sidebar main"; min-height: 100dvh; background: var(--color-canvas);
}
.ds-topbar {
  grid-area: topbar; position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--topbar-h); padding: var(--space-2) var(--space-5);
  border-bottom: var(--border-w) solid var(--color-border); background: var(--color-topbar-bg);
}
.ds-topbar__end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.ds-shell__menu { display: none; }
.ds-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: var(--target-min); color: var(--color-text); font-weight: var(--weight-semibold); text-decoration: none; }
.ds-brand__mark { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--weight-bold); }
.ds-search { position: relative; display: flex; flex: 1 1 22rem; max-width: 36rem; min-width: 0; }
.ds-search input { width: 100%; background: var(--color-surface-sunken); }
.ds-search:has(svg) input { padding-left: 2.5rem; }
.ds-search svg { position: absolute; inset-inline-start: 0.75rem; top: 50%; width: var(--icon); height: var(--icon); color: var(--color-text-muted); transform: translateY(-50%); pointer-events: none; }
.ds-sidebar {
  grid-area: sidebar; position: sticky; top: var(--topbar-h); align-self: start; height: calc(100dvh - var(--topbar-h)); overflow-y: auto;
  padding: var(--space-4) var(--space-3); border-right: var(--border-w) solid var(--color-border); background: var(--color-sidebar-bg);
  scrollbar-width: thin;
}
.ds-main { grid-area: main; min-width: 0; padding: var(--space-5) var(--page-pad-x) var(--space-7); }
.ds-main:focus { outline: none; }
.ds-nav-group { margin: 0 0 var(--space-2); }
.ds-nav-group > summary {
  --focus-ring-offset: calc(-1 * var(--focus-w));
  --focus-ring-halo: inset 0 0 0 calc(var(--focus-w) + var(--focus-offset)) var(--color-focus-halo);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--target-min);
  padding: 0 var(--space-3); border-radius: var(--radius); color: var(--color-text-tertiary);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); list-style: none; cursor: pointer;
}
.ds-nav-group > summary::-webkit-details-marker { display: none; }
.ds-nav-group > summary::after { content: "▸" / ""; transition: transform var(--motion-fast) var(--ease); }
.ds-nav-group[open] > summary::after { transform: rotate(90deg); }
.ds-nav-group > summary:hover { background: var(--color-surface-hover); color: var(--color-text); }
/* A collapsed group still shows that it holds the current page. */
.ds-nav-group:not([open]):has([aria-current="page"]) > summary { color: var(--color-selected-text); box-shadow: inset var(--indicator-w) 0 0 var(--color-selected-indicator); }
.ds-nav-list { display: grid; gap: 2px; margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.ds-nav-link {
  --focus-ring-offset: calc(-1 * var(--focus-w));
  --focus-ring-halo: inset 0 0 0 calc(var(--focus-w) + var(--focus-offset)) var(--color-focus-halo);
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius); background: transparent; color: var(--color-text-secondary);
  font: var(--weight-medium) var(--text-base)/var(--leading-snug) var(--font-sans); text-align: left; text-decoration: none; cursor: pointer; width: 100%;
}
.ds-nav-link svg { width: var(--icon); height: var(--icon); flex: none; color: var(--color-text-muted); }
.ds-nav-link:hover { background: var(--color-surface-hover); color: var(--color-text); }
.ds-nav-link[aria-current="page"], .ds-nav-link[aria-current="true"] {
  background: var(--color-selected-bg); color: var(--color-selected-text); font-weight: var(--weight-bold);
  box-shadow: inset var(--indicator-w) 0 0 var(--color-selected-indicator);
}
.ds-nav-link[aria-current="page"] svg { color: var(--color-selected-indicator); }
.ds-shell__backdrop { display: none; }
@container page (max-width: 60rem) {
  .ds-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main"; }
  .ds-shell__menu { display: inline-grid; }
  .ds-topbar { flex-wrap: wrap; padding-inline: var(--space-3); }
  .ds-search { order: 10; flex-basis: 100%; max-width: none; }
  .ds-sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--z-drawer); width: min(22rem, 100% - 3rem); height: 100dvh;
    box-shadow: var(--shadow-overlay); transform: translateX(-105%); visibility: hidden;
    transition: transform var(--motion) var(--ease), visibility 0s linear var(--motion);
  }
  .ds-shell[data-nav-open] .ds-sidebar { transform: none; visibility: visible; transition: transform var(--motion) var(--ease); }
  .ds-shell[data-nav-open] .ds-shell__backdrop { display: block; position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--color-overlay); }
  .ds-main { padding: var(--space-4) var(--space-3) var(--space-6); }
}

/* ---------------------------------------------------------------- user menu (top bar) */
.ds-user-menu { position: relative; }
.ds-user-menu__button {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); max-width: 16rem; padding: 0 var(--space-3) 0 var(--space-1);
  border: var(--border-w) solid transparent; border-radius: var(--radius-full); background: transparent; color: var(--color-text); font: inherit; font-weight: var(--weight-medium); cursor: pointer;
}
.ds-user-menu__button:hover, .ds-user-menu__button[aria-expanded="true"] { background: var(--color-surface-hover); border-color: var(--color-border); }
.ds-avatar { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-text); font-size: var(--text-sm); font-weight: var(--weight-bold); }

/* ---------------------------------------------------------------- "Darstellung" panel
   Rendered by FinanceDisplayPreferences.open() into a .ds-dialog (static/display-preferences.js). */
.ds-display-panel .ds-dialog__body { display: grid; gap: var(--space-5); }
.ds-display-panel .ds-segmented label { flex: 1 1 7rem; }
/* Text size: "✓ 100 %" stays on one line (the check mark wrapped it to two); six short options share a row. */
.ds-display-panel .ds-segmented[data-display-group="textScale"] label { flex-basis: 5rem; }
.ds-display-panel .ds-segmented[data-display-group="textScale"] label > span { gap: var(--space-1); padding-inline: var(--space-2); white-space: nowrap; }
.ds-display-panel [data-display-group="textScale"] label { flex: 1 1 4.5rem; }
.ds-display-panel__preview {
  padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle);
}
.ds-display-panel__preview p { margin: 0; max-width: var(--measure); }
.ds-display-panel__preview p + p { margin-top: var(--paragraph-gap); }
.ds-display-panel__status { min-height: 1.5em; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.ds-display-trigger { display: inline-flex; align-items: center; gap: var(--space-2); }
/* "Über / Version": last line of the user menu and of the Darstellung panel.
   <p class="ds-about"><span data-app-version></span><span data-release-notes-slot></span></p> */
.ds-about { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }
.ds-link-button {
  display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--color-accent-text);
  font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}
.ds-about .ds-link-button, .ds-about a { display: inline-flex; align-items: center; min-height: var(--target-min); }
}

/* =============================================================== 7. HIGH CONTRAST & FORCED COLOURS */
@layer ds {
html[data-contrast="high"] a:not([class]), html[data-contrast="high"] :is(p, li, td, dd, label, small, span) a,
html[data-contrast="high"] .ds-link { text-decoration: underline; text-decoration-thickness: 0.1em; }
html[data-contrast="high"] :is(.ds-btn--ghost, .ds-icon-btn, .ghost-button, .icon-button) { border-color: var(--color-border-control); }
html[data-contrast="high"] :is(.ds-card, .panel, .ds-table-wrap, .ds-dialog, .ds-menu, .ds-toast) { border-width: 2px; border-color: var(--color-border); }
html[data-contrast="high"] :is(input, select, textarea, .ds-input, .ds-select, .ds-textarea) { border-width: 2px; }
html[data-contrast="high"] :is(.ds-nav-link, .nav-item, .employee-nav-item)[aria-current="page"],
html[data-contrast="high"] :is(.nav-item, .employee-nav-item, .crm-tab).is-active { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.25em; }
html[data-contrast="high"] .ds-tab[aria-selected="true"] { text-decoration: underline; text-underline-offset: 0.3em; }
html[data-contrast="high"] ::placeholder { font-style: italic; }
}
@media (forced-colors: active) {
  :root :focus-visible { outline-color: Highlight; box-shadow: none; }
  .ds-badge, .badge, .status-badge, .ds-toast, .ds-notice, .ds-state, .ds-segmented label > span { border: 1px solid CanvasText; forced-color-adjust: auto; }
  .ds-nav-link[aria-current="page"], .ds-segmented input:checked + span, [aria-current="page"], .is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .ds-switch__track { border-color: CanvasText; }
  .ds-switch input:checked + .ds-switch__track { background: Highlight; }
  .ds-switch input:checked + .ds-switch__track::after { background: HighlightText; }
  .ds-btn:is(:disabled, [aria-disabled="true"]) { color: GrayText; border-color: GrayText; }
}

/* =============================================================== 8. LEGACY CLASS MAPPINGS
   The portals' existing markup (primary-button, panel, nav-item, toolbar-options …) styled with the
   tokens above.  Phase 2 replaces these classes per portal with the ds-* components; until then
   they look and behave like them.  Media queries here pair with the portals' own breakpoints. */
@layer ds {
/* ===== Language switcher ===== */
.finance-language-switcher {
  position: fixed;
  right: max(0.875rem, env(safe-area-inset-right));
  bottom: max(0.875rem, env(safe-area-inset-bottom));
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5625rem;
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  border: 1px solid var(--color-border-control);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-overlay);
  backdrop-filter: blur(10px);
  font: 600 var(--text-sm)/1.2 var(--font-sans);
}

.finance-language-switcher select {
  background: var(--color-surface);
  cursor: pointer;
}

.finance-language-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .finance-language-switcher {
    right: max(0.625rem, env(safe-area-inset-right));
    bottom: max(0.625rem, env(safe-area-inset-bottom));
    padding: 0.375rem 0.4375rem;
  }
}

/* Inline placement inside page headers/toolbars (data-language-switcher-slot):
   takes its own space in the layout, so it never covers content, sidebar
   cards or the agent launcher in the lower right corner. */
.finance-language-slot {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

.finance-language-switcher.is-inline {
  position: static;
  z-index: auto;
  margin: 0;
  padding: 0;
  gap: 0.375rem;
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.finance-language-switcher.is-inline select {
  min-width: 0;
  min-height: var(--target-min);
  padding: 0.375rem 1.625rem 0.375rem 0.5rem;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border-color: var(--color-border-control);
  border-radius: 0.5rem;
}

.employee-card .finance-language-slot {
  display: flex;
}

.portal-header .finance-language-slot {
  margin-left: auto;
}

@media (max-width: 860px) {
  .finance-language-switcher.is-inline select {
    min-height: 2.75rem;
  }
}

@media (max-width: 720px) {
  .portal-header .finance-language-slot {
    margin-left: 0;
  }
}

/* ===== Touch and narrow layouts ===== */
@media (max-width: 1100px) {
  .action-field, .action-fields, .panel, .table-wrap, .admin-topbar > *, .employee-topbar > * {
    min-width: 0;
  }

  .action-field, .action-modal-header, .action-modal-actions,
  .table-wrap td, .panel-header, .profile-field, .portal-card {
    overflow-wrap: anywhere;
  }

  .action-modal-header, .action-modal-actions, .admin-topbar,
  .admin-toolbar, .page-actions {
    flex-wrap: wrap;
  }

  .admin-toolbar { min-width: 0; }
  .admin-toolbar select { width: 100%; }

  .accounting-flow fieldset { margin: 0.75rem 0; padding: 0.75rem; }
  .accounting-flow legend { max-width: 100%; }
  .accounting-flow [data-preview] { min-width: 0; }
}
@media (max-width: 860px) {
  /* 16px inputs avoid automatic focus zoom on iOS. */

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .employee-nav-item, .admin-links a { min-height: 2.75rem; }

  .action-modal-actions > button { flex: 1 1 8.125rem; }
  .action-modal-header > strong { flex: 1 1 11.25rem; }
  .action-field :is(input, select, textarea) { width: 100%; }
  .compact-action-fields { grid-template-columns: 1fr; }
  .mobile-app-bar { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
  .mobile-admin-link { display: inline-flex; }

  .workspace, .employee-workspace, .admin-workspace {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
  .table-wrap td > * { min-width: 0; max-width: 100%; }
  .table-wrap td[colspan] { display: block; }
  .table-wrap td[colspan]::before { content: none; }
  /* Work portal card rows (label | value grid from styles.css): a second line in a cell
     ("<br><small>…") stays in the value column instead of dropping under the label. */
  .workspace .table-wrap td:not([colspan]) > br { display: none; }
  /* -2 / -1 = the last explicit column: the value column of a label | value card, and the only column when a
     narrow card stacks the label above the value (grid-column: 2 there made an implicit 0px label column, "T e x t"). */
  .workspace .table-wrap td:not([colspan]) > * { grid-column: -2 / -1; }
}

@media (max-width: 600px) {
  .admin-nav {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .admin-nav-item { flex: 0 0 auto; width: auto; }
  .admin-sidebar { min-width: 0; }
  .accounting-flow .action-modal { padding: 0.75rem; }
  .accounting-flow .allocation-row { padding: 0.625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

@media (max-width: 1100px) {
  .compact-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .compact-filter-row { grid-template-columns: 1fr; }
  .global-search-results { min-width: 0; width: 100%; }
  .crm-saved-views-bar, .crm-saved-views-bar > div,
  .personal-cockpit-header { flex-wrap: wrap; }
}
@media (max-width: 1100px) {
  .crm-process-guide { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
  .crm-process-guide > * { min-width: 0; }
}

@media (max-width: 860px) {
  .toolbar { grid-template-columns: minmax(0, 1fr) auto; }

  .toolbar-options { grid-column: 1 / -1; }

  .toolbar-options > * { width: 100%; min-width: 0; }
  .access-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .access-banner > p, .access-banner > .badge { grid-column: 1 / -1; }
  .finance-language-switcher { position: static; margin: 0.75rem; }
}

@media (max-width: 860px) {
  button[class], a.secondary-button, .action-field input, .action-field select {
    min-height: 2.75rem;
  }
}

@media (max-width: 860px) {
  .toolbar > #logout-button { grid-column: 1 / -1; }
}

.work-company-name { align-self: center; padding: 0.625rem 0; overflow-wrap: anywhere; }
@media (max-width: 860px) { .work-company-name { min-width: 0; } }

/* ===== Shared reading and interaction defaults ===== */
/* Shared interaction and reading defaults for every portal. */


:is(.panel-header, .page-heading, .employee-topbar, .admin-topbar) p, :is(.metric, .personal-cockpit-card) > span, :is(.settings-profile-card, .crm-configurator-module) small { color: var(--color-text-muted); }
:is(.metric, .personal-cockpit-card) > span { font-size: var(--text-sm); }

.table-wrap { max-width: 100%; scrollbar-width: thin; }

tbody tr[data-record-view]:hover, tbody tr.selectable-row:hover { background: var(--color-surface-subtle); }input:not([type=checkbox]):not([type=radio]) { border-color: var(--color-border-control); }

.ui-empty-state { justify-items: start; white-space: normal; }

.ui-empty-state p { max-width: 56ch; font-weight: 400; }

.chart:has(> .ui-empty-state) { display: block; height: auto; }
.chart-balance { color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; }
.chart-column { min-width: 0; }
/* Context stays available without competing with each page's main action. */

.toolbar { position: relative; }
.toolbar-options-toggle { display: inline-flex; }
.toolbar-options { display: none; }
.toolbar-options.is-open {
  display: grid;
  position: absolute;
  right: 0;
  z-index: 100;
  grid-template-columns: minmax(0, 1fr);
}
.context-field { display: grid; gap: 0.3125rem; }
.context-field select { width: 100%; }
.access-banner { padding-block: 0.625rem; font-size: var(--text-sm); }
.access-banner > p { margin-block: 0; }
/* Four labelled groups scale without a horizontal navigation strip. */
.crm-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: visible; }
.crm-nav-group { min-width: 0; padding: 0 0.625rem; }
.crm-nav-group + .crm-nav-group { border-left: 1px solid var(--color-border); }
.crm-nav-group-label { display: block; margin: 0 0.5rem 0.375rem; }
.crm-nav-group-items { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.crm-tab { min-width: 0; white-space: normal; text-align: left; }

.crm-tab svg { flex-shrink: 0; }
.global-search-results { max-width: calc(100vw - 2.5rem); }

.training-tools { flex-wrap: wrap; }
@media (max-width: 1200px) {
  .crm-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 0; }
  .crm-nav-group:nth-child(3) { border-left: 0; }
}
@media (max-width: 860px) {
  .toolbar-options.is-open { position: static; }
  .toolbar-options { order: 5; }

  .crm-nav-group-items { display: grid; grid-template-columns: minmax(0, 1fr); }
}
.table-wrap:has(> table > tbody > tr:only-child .ui-empty-state) { overflow: visible; }
.table-wrap > table:has(> tbody > tr:only-child .ui-empty-state) { table-layout: fixed; min-width: 0; width: 100%; }
.table-wrap > table:has(> tbody > tr:only-child .ui-empty-state) > thead { display: none; }
.table-wrap .ui-empty-state { overflow-wrap: anywhere; }
.table-wrap .ui-empty-state p { min-width: 0; white-space: normal; }
.chart-column { height: auto; grid-template-rows: 1fr auto auto; }
.bar { min-height: 0; }

.content-grid, .lower-grid { align-items: start; }
.summary-scope-note { color: var(--color-text-muted); font-size: var(--text-sm); margin: -0.25rem 0 1.125rem; }

.navigation-history { align-items: center; }
.navigation-history button { gap: 0.375rem; white-space: nowrap; }

@media (max-width: 1100px) {
  .navigation-history { width: fit-content; }
}

/* CRM review: compact context, one presentation, clear work and history. */

#crm-view .crm-page-heading { margin-bottom: 0.625rem; }

#crm-view .crm-page-heading p { margin: 0.25rem 0; }
.crm-context { margin: 0 0 0.75rem; border-bottom: 1px solid var(--color-border); }
.crm-context > summary { cursor: pointer; padding: 0.5625rem 0; }
.crm-context .crm-workspace-profile { margin: 0.5rem 0; padding: 0.75rem; }

.crm-pipeline-filters, #crm-view .crm-work-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 0.75rem; }
.crm-pipeline-filters label, .crm-work-filters label { display: grid; gap: 0.3125rem; flex: 1 1 11.25rem; }
.crm-pipeline-filters input, .crm-pipeline-filters select { width: 100%; min-height: var(--target-min); }
.crm-workflow-buttons { display: flex; flex-wrap: wrap; align-items: start; gap: 0.4375rem; }
.crm-workflow-buttons > .primary-button { white-space: normal; text-align: left; }
.crm-action-menu summary { cursor: pointer; padding: 0.5rem; color: var(--color-text-tertiary); font-size: var(--text-base); }
.crm-action-menu > div { display: flex; flex-direction: column; gap: 0.3125rem; padding: 0.3125rem; border: 1px solid var(--color-border-control); border-radius: 0.5rem; background: var(--color-surface); }
.crm-deal-card-footer { flex-wrap: wrap; gap: 0.375rem; color: var(--color-text-tertiary); }
.crm-overdue { display: block; }
#crm-data-warning:empty { display: none; }
#crm-data-warning:not(:empty) { padding: 0.75rem; background: var(--color-warning-bg); color: var(--color-warning-text); border-radius: 0.5rem; }
[data-crm-note] { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
[data-crm-note] label { display: grid; gap: 0.5rem; }
[data-crm-note] textarea { width: 100%; }
[data-crm-note] button { justify-self: start; }
.crm-detail-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-detail-timeline { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .crm-pipeline-filters > *, #crm-view .crm-work-filters > * { flex-basis: 100%; }

  .crm-workflow-buttons { flex-direction: column; }
}
@media (max-width: 860px) {
  .crm-tabs { margin-inline: 0; }
  .crm-workflow-form .action-fields > label { min-width: 0; }
  .crm-workflow-form :is(input, select, textarea) { max-width: 100%; min-width: 0; box-sizing: border-box; font-size: var(--text-md); }
}
.crm-pipeline-filters input { border: 1px solid var(--color-border-control); border-radius: 0.5rem; padding: 0.5625rem 0.75rem; background: var(--color-surface); color: var(--color-text-secondary); font: inherit; }
#crm-deals-table td > small { display: block; margin-top: 0.25rem; color: var(--color-text-muted); }

.toolbar-options.is-open { max-height: calc(100vh - 6.875rem); overflow: auto; }
@media (min-width: 1201px) {
  .topbar .work-company-name { max-width: 11.875rem; text-overflow: ellipsis; }
}

/* Shared phone layout: readable controls, compact context and contained tables. */
@media(max-width:860px){
  .workspace { min-width:0; }
  .mobile-app-bar { min-height:3.75rem; padding-inline:max(0.75rem,env(safe-area-inset-left)); }
  .mobile-app-bar .icon-button{min-width:2.75rem;min-height:2.75rem}

  .topbar .navigation-history{display:flex;width:100%;gap:0.5rem}
  .navigation-history button { flex:1; justify-content:center; }
  .panel { min-width:0; }

  .page-heading h1 { line-height:1.2; overflow-wrap:anywhere; }
  .page-heading p { line-height:1.5; }
  .table-wrap { max-width:100%; overscroll-behavior-x:contain; }
  .view input:not([type=checkbox]):not([type=radio]),.view select,.view textarea{font-size:var(--text-md);max-width:100%;box-sizing:border-box}
  .view input:not([type=checkbox]):not([type=radio]),.view select{min-height:2.75rem}

  .workspace:has(#agent-view.is-visible)>.topbar{margin-bottom:0.5rem}
  .workspace:has(#agent-view.is-visible)>.topbar>.search{display:none}
}

a:hover { color: var(--color-accent-active); }

:where(button, a, summary, [tabindex]):focus-visible {
  --focus-ring-offset: var(--focus-offset);
}

.ds-muted { color: var(--color-text-muted); }
.amount, td.amount, .metric strong, .planning-kpi strong, .crm-metric strong, .invoice-summary strong, .invoice-total, .account-card strong { font-variant-numeric: tabular-nums; }

/* Uppercase eyebrow kickers were decorative; page titles carry the context. */
.page-heading .crm-eyebrow,
.page-heading .crm-section-kicker,
.crm-page-heading .crm-eyebrow,
.personal-cockpit-header .crm-section-kicker { display: none; }
.panel-header .crm-section-kicker, .crm-panel-toolbar .crm-section-kicker,
.crm-process-guide-copy .crm-section-kicker, .crm-workspace-profile .crm-section-kicker { display: none; }
.crm-eyebrow, .crm-section-kicker {
  color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; text-transform: none;
}

/* ---------------------------------------------------------------- buttons
   primary-button / secondary-button / ghost-button / danger-button = ds-btn --primary / --secondary /
   --ghost / --danger-outline.  compact-button keeps the 44px target, only the padding is smaller. */
.primary-button, .secondary-button, .ghost-button, .danger-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--control-pad-x);
  border: var(--border-w-control) solid transparent; border-radius: var(--shape-control);
  font-size: var(--text-base); font-weight: var(--control-weight); line-height: var(--leading-tight); white-space: nowrap;
  text-decoration: none; box-shadow: none; cursor: pointer;
  transition: background-color var(--motion-state) var(--ease-state), border-color var(--motion-state) var(--ease-state), color var(--motion-state) var(--ease-state),
    box-shadow var(--motion-state) var(--ease-state), transform var(--motion-state) var(--ease-state);
}
.primary-button { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-xs); }
.primary-button:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-on-accent); }
.primary-button:active:not(:disabled) { background: var(--color-accent-active); }
.secondary-button { background: var(--color-surface); border-color: var(--color-border-control); color: var(--color-text); box-shadow: var(--shadow-xs); }
.secondary-button:hover:not(:disabled) { background: var(--color-surface-hover); border-color: var(--color-border-strong); color: var(--color-text); }
.secondary-button:active:not(:disabled) { background: var(--color-surface-sunken); }
.ghost-button { background: transparent; border-color: transparent; color: var(--color-accent-text); }
.ghost-button:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-accent-hover); }
.danger-button { background: var(--color-surface); border-color: var(--color-danger-border); color: var(--color-danger-text); box-shadow: var(--shadow-xs); }
.danger-button:hover:not(:disabled) { background: var(--color-danger-bg); border-color: var(--color-danger-text); }
.compact-button, .primary-button.compact-button, .secondary-button.compact-button, .ghost-button.compact-button, .danger-button.compact-button {
  min-height: var(--control-h); padding: 0 var(--space-3); border-radius: var(--shape-control); font-size: var(--text-sm);
}
.large-button, .primary-button.large-button, .secondary-button.large-button {
  min-height: var(--control-h-lg); padding: 0 1.25rem; font-size: var(--text-md);
}
.icon-button {
  display: inline-grid; place-items: center;
  width: var(--target-min); min-width: var(--target-min); height: var(--target-min); min-height: var(--target-min); padding: 0;
  border: var(--border-w-control) solid var(--color-border-control); border-radius: var(--shape-control);
  background: var(--color-surface); color: var(--color-text-secondary);
}
.icon-button:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text); }
.topbar svg { width: var(--icon-sm); height: var(--icon-sm); }
button:disabled, .primary-button:disabled, .secondary-button:disabled, .ghost-button:disabled, .icon-button:disabled {
  opacity: 1; cursor: not-allowed;
}
/* Disabled: dashed boundary + muted text (still ≥ 4.5:1), never only a lighter colour. */
:is(.primary-button, .secondary-button, .danger-button, .icon-button):disabled {
  background: var(--color-surface-sunken); border-color: var(--color-border-control); border-style: dashed; color: var(--color-text-disabled); box-shadow: none;
}
.ghost-button:disabled { color: var(--color-text-disabled); background: transparent; }
:is(.primary-button, .secondary-button, .ghost-button, .danger-button)[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; flex: none; border: 0.15em solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: ds-spin 0.8s linear infinite;
}
.button-row, .page-actions, .employee-actions { gap: var(--space-2); }
input:not([type=checkbox]):not([type=radio]):focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-focus); }
input[type=checkbox], input[type=radio] { accent-color: var(--color-accent); width: 1.25rem; height: 1.25rem; }
[aria-invalid="true"], .is-invalid { border-color: var(--color-danger-border) !important; }
.action-field { gap: var(--space-1); }
.action-field > span, .context-field, .invoice-editor label, .crm-work-filters label, .crm-pipeline-filters label {
  color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
/* Required: an asterisk in text colour (the required attribute is announced by screen readers). */
.action-field:has(:required) > span::after { content: " *" / ""; color: var(--color-danger-text); font-weight: var(--weight-bold); }
.action-field small { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-regular); }
[role="alert"]:not(:empty) { color: var(--color-danger-text); }

/* ------------------------------------------------------------- surfaces */
.panel, .account-card, .report-panel, .invoice-card, .invoice-summary article, .crm-detail-card, .personal-cockpit, .crm-saved-views-bar, .crm-process-guide, .welcome-band, .employee-info-card, .work-home, .crm-offer-terms, .training-intro, .crm-module-card, .crm-product-card, .crm-deal-card, .crm-pipeline-column, .changelog-card {
  border: 1px solid var(--color-border);
  border-radius: var(--shape-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
/* Cards nested in a card stay flat: one shadow level per surface. */
:is(.panel, .invoice-card, .crm-detail-card, .personal-cockpit, .work-home) :is(.panel, .account-card, .crm-deal-card, .crm-product-card, .crm-module-card, .changelog-card, .employee-info-card, .metric) { box-shadow: none; }
.panel { padding: var(--card-pad); }
.panel-header { min-height: 2rem; margin-bottom: 1rem; gap: 0.75rem; }
.panel-header h2, .crm-detail-card > h2, .crm-detail-card-header h2, .invoice-card h2 { font-size: var(--text-md); font-weight: 600; }
.panel-header p { color: var(--color-text-muted); font-size: var(--text-sm); }
.content-grid { gap: 1.25rem; margin-bottom: 1.25rem; }
/* Main column takes the room, the side panel stays a readable card width; stacked below 90rem, so the
   main table keeps its columns on a laptop instead of turning into cards. */
.content-grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); }
@container page (max-width: 90rem) { .content-grid { grid-template-columns: minmax(0, 1fr); } }
/* Archive: the 8-column document table needs the full width; the short retention list goes below it. */
@container page (max-width: 130rem) { #archive-view > .content-grid { grid-template-columns: minmax(0, 1fr); } }
.metric-grid { gap: 1rem; margin-bottom: 1.25rem; }

/* Page header: title, optional one-line context, actions on the right. */
.page-heading, .crm-page-heading, .invoice-heading {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  gap: 0.75rem 1.5rem; margin: 0 0 1.5rem;
}
.page-heading h1, .crm-page-heading h1, .invoice-heading h1, #crm-view .crm-page-heading h1 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -.015em; }
.page-heading p, .crm-page-heading p, .invoice-heading p { margin-top: 0.25rem; color: var(--color-text-muted); font-size: var(--text-base); max-width: 72ch; }
/* Prose keeps a readable line length although the content column is fluid. Zero specificity, so any
   component rule with its own width wins. */
:where(.workspace, .employee-workspace, .admin-workspace, .ds-main, .cp-main) :where(p, .ds-hint, .ds-prose, .employee-balance-note) { max-inline-size: var(--measure-prose); }
.page-actions { align-items: center; }
.status-pill { display: none; }

/* ----------------------------------------------------------------- KPIs */
.metric, .planning-kpi, .crm-metric, .invoice-summary article, .employee-info-card {
  display: grid; align-content: start; gap: 2px;
  min-width: 0; min-height: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border); border-radius: var(--shape-card);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm);
}
.metric > span, .planning-kpi > span, .crm-metric > span, .invoice-summary span, .employee-info-card > span {
  color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-snug);
  overflow-wrap: break-word;
}
.metric strong, .planning-kpi strong, .crm-metric strong, .invoice-summary strong, .employee-info-card strong {
  display: block; margin: 0.25rem 0 0; overflow: hidden;
  color: var(--color-text); font-size: var(--text-lg); font-weight: 600; line-height: 1.25; letter-spacing: -.015em;
  /* Amounts are never cut off: a long value wraps instead of ending in "…". */
  font-variant-numeric: tabular-nums; overflow-wrap: break-word;
}
.metric .delta, .planning-kpi small, .crm-metric small, .employee-info-card small {
  display: block; min-height: 0; margin: 0; padding: 0;
  border-radius: 0; background: none; color: var(--color-text-muted);
  font-size: var(--text-xs); font-weight: 400; line-height: 1.4;
}
.metric .delta.warning { color: var(--color-warning-text); }
.metric .delta.danger { color: var(--color-danger-text); }
.metric .delta:empty { display: none; }
.crm-metric::after { display: none; }
.crm-metric-primary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.crm-metric-primary span, .crm-metric-primary small { color: var(--color-text-muted); }
.crm-metric-grid { gap: 0.75rem; }

/* KPI rows: as many cards per row as fit (empty tracks collapse, so few cards share the full width);
   rem based, so the row reflows with the text size. Phones keep two per row (RESPONSIVE below). */
.metric-grid, #summary-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.invoice-summary { gap: 0.75rem; margin: 0 0 1rem; }
.invoice-summary article { padding: 0.875rem 1rem; }
.invoice-summary strong { margin-top: 2px; font-size: var(--text-lg); }

.summary-scope-note { display: none; }
.absence-kpis, .planning-kpis, .vacation-account-metrics { gap: 0.75rem; }

/* --------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
/* Column headers in sentence case (uppercase is harder to read), whatever older feature CSS says. */
:where(th) { text-transform: none; letter-spacing: 0; }
/* Header cells stick to the top of any table container that scrolls vertically. */
thead th { position: sticky; top: 0; z-index: 1; }
tbody tr:last-child > td { border-bottom: 0; }
tbody tr > td { transition: background-color .1s ease; }
tbody tr:hover > td { background: var(--color-surface-hover); }
tbody tr.is-selected > td, tbody tr[aria-selected="true"] > td { background: var(--color-selected-bg); }
tbody tr.is-selected > td:first-child, tbody tr[aria-selected="true"] > td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); }
td.amount, th.amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.amount.positive { color: var(--color-success-text); }
.amount.negative { color: var(--color-danger-text); }
.panel > .table-wrap, .invoice-card > .table-wrap { width: auto; max-width: none; margin-inline: calc(-1 * var(--card-pad)); border-radius: 0; }
.panel > .table-wrap th:first-child, .panel > .table-wrap td:first-child,
.invoice-card > .table-wrap th:first-child, .invoice-card > .table-wrap td:first-child { padding-left: var(--card-pad); }
.panel > .table-wrap th:last-child, .panel > .table-wrap td:last-child,
.invoice-card > .table-wrap th:last-child, .invoice-card > .table-wrap td:last-child { padding-right: var(--card-pad); }
.panel > .table-wrap:last-child, .invoice-card > .table-wrap:last-child { margin-bottom: calc(-1 * var(--card-pad)); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* --------------------------------------------------------------- badges */
.badge, .status-badge, .crm-detail-number {
  display: inline-flex; align-items: center; gap: 0.375em;
  min-height: 1.75rem; padding: 0.125rem 0.625rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-neutral-bg); color: var(--color-neutral-text);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); white-space: nowrap;
}
/* Reference / document-number cells (AR-DEMO-VS-001) stay on one line; file names break after "_" and "-" (<wbr> from
   renderDocuments; Rechnung_AR-DEMO-VS-001_Final.pdf has no spaces), so the narrow columns never squeeze a reference into 4 lines.
   Stacked phone cards (.ds-table--stack) wrap them again (.ds-shell .ds-table--stack td is more specific). */
.ds-cell-ref, td.ds-cell-ref, .invoice-list .invoice-link { white-space: nowrap; }
.ds-cell-file, td.ds-cell-file { min-width: 10rem; overflow-wrap: anywhere; }
/* Status badges carry a glyph next to the colour (same as .ds-badge--*). */
.badge.paid, .badge.success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); }
.badge.planned, .badge.due, .badge.warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.badge.review { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info-text); }
.badge.danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-text); }
.badge:is(.paid, .success)::before { content: "✓" / ""; font-weight: var(--weight-bold); }
.badge:is(.planned, .due, .warning)::before { content: "!" / ""; font-weight: var(--weight-bold); }
.badge.danger::before { content: "✕" / ""; font-weight: var(--weight-bold); }
.badge.review::before { content: "i" / ""; font: italic var(--weight-bold) 1em/1 Georgia, serif; }

/* ------------------------------------------------ filters / segmented tabs */
.invoice-filters, .work-home-tabs, .dms-worklists, .crm-analytics-periods {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
  padding: 0.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-xs);
}
.work-home-tabs span { margin-left: 0.375rem; color: inherit; opacity: .75; font-weight: 500; font-variant-numeric: tabular-nums; }
.invoice-filters .ghost-button, .invoice-filters [data-invoice-reset] { background: transparent; }

/* ---------------------------------------------------------- empty states */
.ui-empty-state, .empty-state, .crm-empty-state, .invoice-empty, .work-home-empty, .crm-detail-empty, .mobile-empty-state {
  display: block; gap: 0.25rem; padding: 0.75rem 0; min-height: 0;
  border: 0; background: none; box-shadow: none;
  color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 400; text-align: left;
}
.ui-empty-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.ui-empty-state strong { color: var(--color-text-tertiary); font-size: var(--text-sm); font-weight: 500; }
.ui-empty-state p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.ui-empty-state .secondary-button, .ui-empty-state .ghost-button {
  min-height: var(--target-min); margin: 0; padding: 0 var(--space-1); border: 0; background: none;
  color: var(--color-accent-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: underline;
}
.ui-empty-state .secondary-button:hover, .ui-empty-state .ghost-button:hover { background: none; text-decoration: underline; }
.dms-empty, .crm-empty-state, .empty-state, .invoice-empty { color: var(--color-text-muted); }
.dms-empty strong, .crm-empty-state strong, .invoice-empty strong { color: var(--color-text-tertiary); font-weight: 500; }
.dms-empty p, .crm-empty-state p, .invoice-empty p { margin: 2px 0 0; font-size: var(--text-sm); }
.chart:has(> .ui-empty-state) { min-height: 0; }
.table-wrap .ui-empty-state { padding: 1.25rem 0; }

/* ------------------------------------------------------ dialogs & toasts */
.action-modal, .employee-detail-modal, .inventory-dialog {
  border: 1px solid var(--color-border); border-radius: var(--shape-overlay);
  background: var(--color-surface); box-shadow: var(--shadow-overlay);
}
.workspace-page .action-modal, .workspace-page .employee-detail-modal,
.employee-workspace-page .action-modal, .employee-workspace-page .employee-detail-modal { box-shadow: none; }
.action-modal-header { padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.action-modal-header span { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; text-transform: none; letter-spacing: 0; }
.action-modal-header strong { font-size: var(--text-lg); font-weight: 600; }
.action-modal-actions {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem;
  margin-top: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.action-modal-actions > :is(.secondary-button, .ghost-button):first-child { margin-right: auto; }

/* Toasts contain passive status text; clicks must reach the controls beneath them. */
.toast-stack { pointer-events: none; }

.toast {
  border: 1px solid var(--color-border); border-left-width: 4px; border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-overlay); font-weight: 500;
}
.toast.success { border-left-color: var(--color-success-text); color: var(--color-text); background: var(--color-surface); }
.toast.error { border-left-color: var(--color-danger-text); color: var(--color-text); background: var(--color-surface); }
/* Alpha disclaimer / test agreement dialog (static/alpha-agreement.js). */
.alpha-agreement__document { margin-bottom: var(--space-5); }
.alpha-agreement__document h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-base); }
.alpha-agreement__confirm { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-4); font-weight: 600; }
.alpha-agreement__error { color: var(--color-danger-text); }
/* "Problem melden" in an error toast with an error id: the one clickable part of a toast. */
.toast .toast-report { pointer-events: auto; color: var(--color-accent-text); font-weight: 600; text-decoration: underline; }

/* Connection/staleness status during a failover: calm, non-blocking, above content. */
.connection-notice {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1000; max-width: min(35rem, calc(100vw - 2rem));
  padding: 0.5rem 0.875rem; border: 1px solid var(--color-warning-border); border-radius: var(--radius-md);
  background: var(--color-warning-bg); color: var(--color-warning-text); box-shadow: var(--shadow-overlay); font-weight: 500; pointer-events: none;
}
.connection-notice[hidden] { display: none; }
.view-refresh-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; margin: 0 0 0.75rem; color: var(--color-text-muted); }

/* ======================================================= WORK PORTAL SHELL */
@media (min-width: 861px) { .app-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } }
/* The sidebar colour runs down the full page height, also on long pages. */
.app-shell {
  background: linear-gradient(90deg, var(--color-sidebar-bg) calc(var(--sidebar-w) - 1px), var(--color-border) calc(var(--sidebar-w) - 1px), var(--color-border) var(--sidebar-w), transparent var(--sidebar-w));
}
.sidebar {
  padding: 1rem 0.75rem 1.25rem;
  background: var(--color-sidebar-bg); color: var(--color-text);
  border-right: 1px solid var(--color-border);
  scrollbar-width: thin;
}
.brand {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0 0 0.75rem; padding: 0.25rem 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.brand-mark, .employee-mark {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 2.125rem; height: 2.125rem; border-radius: var(--radius-md);
  background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-sm); font-weight: 700; letter-spacing: .02em;
}
.brand > div:last-child, .employee-brand > div:last-child { min-width: 0; }
.brand strong, .brand .brand-company {
  display: block; overflow: hidden; color: var(--color-text); font-size: var(--text-base); font-weight: 600; line-height: 1.3;
  text-overflow: ellipsis; white-space: nowrap;
}
.brand span, .brand div > span {
  display: block; margin-top: 1px; overflow: hidden; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.3;
  text-overflow: ellipsis; white-space: nowrap;
}

/* Sidebar navigation: section headers with chevrons, items as rows; the selected item is a filled pill
   (see "Selected state" below) and the section that contains it keeps an accent label. */
.nav-list { gap: 2px; padding-bottom: 0.75rem; }
.nav-section { gap: 2px; }
.nav-section + .nav-section { margin-top: 0.5rem; }
.nav-toggle, .sidebar .nav-toggle {
  min-height: var(--target-min); padding: 0.25rem 0.625rem;
  border-radius: var(--radius);
  color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; text-transform: none;
}
.nav-toggle:hover { background: var(--color-surface-hover); color: var(--color-text); }
.nav-toggle svg { width: 0.875rem; height: 0.875rem; opacity: .8; }
.nav-section:has(> .nav-item.is-active) > .nav-toggle { color: var(--color-selected-text); }
/* A collapsed section still shows where you are: a small accent dot after its label. */
.nav-section:not([open]):has(> .nav-item.is-active) > .nav-toggle > span::after {
  content: ""; display: inline-block; width: 0.375rem; height: 0.375rem; margin-left: 0.5rem; vertical-align: middle;
  border-radius: 50%; background: var(--color-accent);
}
.nav-item, .employee-nav-item, .admin-nav-item {
  min-height: var(--target-min); padding: 0.4375rem 0.625rem; gap: 0.625rem;
  border: 0; border-radius: var(--radius);
  background: transparent; color: var(--color-text-tertiary);
  font-size: var(--text-base); font-weight: 500; line-height: 1.3;
  cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
/* Alpha marker of modules still in trial (payroll, ELSTER, banking); quiet, after the label. */
.nav-item .nav-alpha-badge { margin-left: auto; min-height: 0; padding: 0 0.4rem; font-size: var(--text-xs, 0.75rem); }
.nav-item .nav-alpha-badge::before { content: none; }
/* Long status badges in a page header (e.g. payroll "Alpha – Vorerfassung …") wrap on narrow screens instead of widening the page. */
.ds-page-header__text > .ds-badge { white-space: normal; max-width: 100%; height: auto; }
:is(.nav-item, .employee-nav-item, .admin-nav-item) svg { width: 1.0625rem; height: 1.0625rem; flex: 0 0 auto; color: var(--color-text-muted); }
:is(.nav-item, .employee-nav-item, .admin-nav-item):hover:not(.is-active) { background: var(--color-surface-hover); color: var(--color-text); }
:is(.nav-item, .employee-nav-item, .admin-nav-item):hover:not(.is-active) svg { color: var(--color-text-tertiary); }

/* Top bar: back/forward, search, language and user menu; stays visible while the page scrolls. */
.workspace { padding: 0 var(--page-pad-x) 3rem; }
.topbar {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 0.5rem;
  margin: 0 -2rem 1.75rem; padding: 0.625rem 2rem;
  min-height: var(--topbar-h);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
}
@media (min-width: 861px) {
  .workspace > .topbar { position: sticky; top: 0; z-index: 60; }
  /* Page header (title + actions) stays under the top bar on long pages. */
  .workspace > .view > :is(.page-heading, .crm-page-heading):first-child {
    position: sticky; top: var(--topbar-h); z-index: 30;
    margin-top: -0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; margin-bottom: 0.75rem;
    background: var(--color-canvas);
  }
}
.navigation-history { display: flex; flex: 0 0 auto; gap: 2px; }
.navigation-history button, .navigation-history .secondary-button {
  width: var(--target-min); min-width: var(--target-min); min-height: var(--target-min); height: var(--target-min); padding: 0;
  border-color: transparent; background: transparent; box-shadow: none; color: var(--color-text-tertiary);
}
.navigation-history button:hover:not(:disabled) { background: var(--color-surface-hover); border-color: transparent; }
.navigation-history button:disabled { opacity: 1; color: var(--color-text-disabled); background: transparent; }
.navigation-history button > span:first-child { font-size: var(--text-md); line-height: 1; }
.navigation-history button > span:not(:first-child) {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.topbar .search, .search {
  flex: 1 1 22.5rem; max-width: 35rem; min-height: var(--target-min); gap: 0.5rem; padding: 0 0.75rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.search:hover { border-color: var(--color-border-control); }
.search:focus-within { border-color: var(--color-accent); box-shadow: var(--focus-ring); background: var(--color-surface); }
.search svg { width: 1rem; height: 1rem; color: var(--color-text-muted); }
.search input { min-height: 2.5rem; padding: 0; border: 0; background: transparent; box-shadow: none !important; font-size: var(--text-base); }
.search input:focus { box-shadow: none; }
.topbar > .toolbar, .toolbar { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 0.5rem; min-width: 0; }
.global-search-results { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.global-search-results button { border-radius: var(--radius); }
.global-search-results button:hover { background: var(--color-surface-hover); }

/* Company name stays available to assistive tech; the sidebar shows it visually. */
.topbar .work-company-name {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.finance-language-slot { gap: 0.375rem; }
.finance-language-slot .finance-language-switcher, .topbar .finance-language-switcher {
  position: static; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none;
  color: var(--color-text-muted); font: 500 var(--text-sm)/1.2 var(--font-sans);
}
.finance-language-switcher select {
  min-height: var(--target-min); min-width: 0; padding: 0 1.625rem 0 0.5rem;
  border: 1px solid var(--color-border-control); border-radius: var(--radius);
  background-color: var(--color-surface); color: var(--color-text-tertiary); font: 500 var(--text-sm)/1.2 var(--font-sans);
}
.finance-language-switcher svg, .finance-language-switcher [aria-hidden="true"] { color: var(--color-text-muted); }

/* Account menu */
.toolbar-options-toggle.account-menu-button {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: var(--target-min); max-width: 15rem; padding: 0 0.625rem 0 0.25rem;
  border: 1px solid transparent; border-radius: var(--radius-full); background: transparent; box-shadow: none; color: var(--color-text-secondary);
  font-weight: 500;
}
.toolbar-options-toggle.account-menu-button:hover { background: var(--color-surface-hover); border-color: transparent; }
.toolbar-options-toggle.account-menu-button[aria-expanded="true"] { background: var(--color-surface-hover); border-color: var(--color-border); }
.account-avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 1.875rem; height: 1.875rem; border-radius: 50%;
  background: var(--color-accent-soft); color: var(--color-accent-text);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em;
}
.account-menu-name { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.account-menu-button svg { width: 0.875rem; height: 0.875rem; color: var(--color-text-muted); }
.toolbar-options.is-open {
  top: calc(100% + 0.5rem); width: min(21.25rem, calc(100vw - 2rem)); padding: 0.5rem; gap: 0.25rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-overlay);
}
.toolbar-options .access-banner {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  margin: 0 0 0.25rem; padding: 0.5rem 0.5rem 0.625rem;
  border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: none;
}
.toolbar-options .access-banner span { color: var(--color-text-muted); font-size: var(--text-xs); }
.toolbar-options .access-banner strong { font-size: var(--text-sm); font-weight: 600; }
.toolbar-options .access-banner p { color: var(--color-text-muted); font-size: var(--text-xs); }
.toolbar-options .access-banner .badge { justify-self: start; margin-top: 0.25rem; }
.toolbar-options .context-field { padding: 0.25rem 0.5rem; }
.toolbar-options .context-field select { min-height: var(--target-min); font-size: var(--text-sm); }
.toolbar-options > a.secondary-button, .toolbar-options > .ghost-button, .toolbar-options > button {
  justify-content: flex-start; width: 100%; min-height: var(--target-min); padding: 0 0.5rem;
  border: 0; background: transparent; box-shadow: none; color: var(--color-text-secondary); font-weight: 500; font-size: var(--text-sm);
}
.toolbar-options > a.secondary-button:hover, .toolbar-options > .ghost-button:hover, .toolbar-options > button:hover { background: var(--color-surface-hover); }
.toolbar-options > a.secondary-button:first-of-type { margin-top: 0.25rem; border-top: 1px solid var(--color-border); border-radius: 0; padding-top: 0.25rem; }
.toolbar > #logout-button { min-height: var(--target-min); }

/* Mobile app bar */
.mobile-app-bar { border-bottom: 1px solid var(--color-border); background: var(--color-surface); box-shadow: none; }
.mobile-app-bar strong { font-size: var(--text-base); font-weight: 600; }
.mobile-app-bar span { color: var(--color-text-muted); font-size: var(--text-xs); }
.mobile-app-bar .icon-button { border-color: transparent; background: transparent; }
.mobile-nav-backdrop { background: color-mix(in srgb, var(--color-inverse-bg) 40%, transparent); }

/* ---------------------------------------------------------- dashboard */
.personal-cockpit { margin: 0 0 1.25rem; padding: var(--card-pad); background: var(--color-surface); }
.personal-cockpit-header { align-items: center; margin-bottom: 0.75rem; }
.personal-cockpit-header h2 { margin: 0; font-size: var(--text-md); }
.personal-cockpit-header p { display: none; }
.personal-cockpit-grid { grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr)); gap: 0.5rem; }
.personal-cockpit-card {
  grid-template-columns: auto 1fr auto; gap: 0 0.625rem; padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); color: var(--color-text);
  transition: background-color .12s ease, border-color .12s ease;
}
.personal-cockpit-card:hover { border-color: var(--color-border-control); background: var(--color-surface); transform: none; }
.personal-cockpit-card svg { width: 1rem; color: var(--color-text-muted); }
.personal-cockpit-card span { color: var(--color-text-tertiary); font-size: var(--text-sm); font-weight: 500; }
.personal-cockpit-card strong { font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.personal-cockpit-card small { color: var(--color-text-muted); font-size: var(--text-xs); }
#work-home { margin-top: 1rem; }
.work-home-toolbar { gap: 0.5rem; margin-bottom: 0.75rem; }
.work-home-toolbar label { gap: 0.375rem; color: var(--color-text-tertiary); font-size: var(--text-sm); font-weight: 500; }
.work-home-toolbar input { min-height: var(--target-min); padding: 0.4375rem 0.625rem; border-color: var(--color-border-control); }
.work-home-item { gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--color-border-subtle); }
.work-home-item h3 { margin: 2px 0; font-size: var(--text-base); font-weight: 600; }
.work-home-item p { margin: 2px 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.work-home-kind { color: var(--color-text-muted); font-size: var(--text-xs); }
.work-home-reason { padding: 0.375rem 0.625rem; border-radius: var(--radius); background: var(--color-warning-bg); color: var(--color-warning-text); font-size: var(--text-sm); }
.work-home-pager { margin-top: 0.75rem; }
.queue-item {
  display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0;
  border: 0; border-bottom: 1px solid var(--color-border-subtle); border-radius: 0; background: none;
}
.queue-item span { color: var(--color-text-muted); font-size: var(--text-xs); }
.account-grid.compact { gap: 0.5rem; }
.account-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; align-content: start; gap: 2px 0.75rem;
  min-height: 0; padding: 1rem 1.125rem;
}
.account-card > * { grid-column: 1; min-width: 0; margin: 0; }
.account-card > span { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; }
.account-card > strong { font-size: var(--text-md); font-weight: 600; line-height: 1.35; }
.account-card > small { color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.4; }
.account-card > .delta {
  grid-column: 2; grid-row: 1; justify-self: end;
  display: inline-flex; min-height: 1.375rem; padding: 1px 0.5625rem; border-radius: var(--radius-full);
  background: var(--color-neutral-bg); color: var(--color-text-tertiary); font-size: var(--text-xs); font-weight: 500; white-space: nowrap;
}
.account-card > .delta.positive { background: var(--color-success-bg); color: var(--color-success-text); }
.account-card > .delta.warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.account-card > .delta.danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.work-home-item button { min-height: var(--control-h); padding: 0 0.625rem; font-size: var(--text-sm); }
.personal-cockpit-header .page-actions { gap: 0.25rem; }
.chart { min-height: 13.75rem; gap: 0.75rem; }
.bar { width: 0.875rem; border-radius: 0.25rem 0.25rem 0 0; }
.bar.income { background: var(--color-chart-income); }
.bar.expense { background: var(--color-chart-expense); }
.income-dot { background: var(--color-chart-income); }
.expense-dot { background: var(--color-chart-expense); }

/* ------------------------------------------------------------- CRM hub */
.crm-context > summary { color: var(--color-text-tertiary); font-size: var(--text-sm); }
.crm-tabs {
  margin-bottom: 1.25rem; padding: 0.75rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.crm-nav-group { padding: 0.25rem 0.5rem; }
.crm-nav-group-label { margin: 0 0.5rem 0.5rem; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; }
.crm-nav-group + .crm-nav-group { border-left-color: var(--color-border); }
.crm-tab svg { width: 1rem; height: 1rem; }
.crm-metric { padding: 1rem 1.125rem; }
.crm-metric strong { font-size: var(--text-lg); }
.crm-deal-card { padding: 0.75rem 0.875rem; }
.crm-deal-card:hover { border-color: var(--color-border-control); transform: none; box-shadow: var(--shadow-md); }
.crm-pipeline-column { background: var(--color-surface-subtle); box-shadow: none; }
.crm-process-guide { background: var(--color-surface); }
.crm-workspace-profile { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.crm-workspace-mark { border-radius: var(--radius-md); }
.crm-activity-icon { border-radius: var(--radius); background: var(--color-neutral-bg); color: var(--color-text-tertiary); }
.crm-product-card-icon, .crm-module-icon, .changelog-icon { border-radius: var(--radius); background: var(--color-neutral-bg); color: var(--color-text-tertiary); }
.crm-overdue { color: var(--color-danger-text); font-size: var(--text-xs); }

/* ------------------------------------------------ CRM record detail (align) */
.crm-record-page {
  --crm-line: var(--color-border);
  --crm-soft: var(--color-surface-subtle);
  --crm-text-2: var(--color-text-tertiary);
}
.crm-detail-hero { border-color: var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.crm-record-page .crm-detail-entity-icon { border-radius: var(--radius-lg); }
.crm-record-page .crm-detail-header p.crm-detail-kicker { font-weight: 600; letter-spacing: 0; }

/* ------------------------------------------------------------ invoices */
.invoice-workspace { max-width: none; }
.invoice-heading { align-items: flex-start; }
.invoice-toolbar { gap: 0.5rem; margin: 0 0 0.75rem; }
.invoice-toolbar > label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-tertiary); }
.invoice-toolbar > [data-invoice-search] { min-height: var(--target-min); padding: 0.4375rem 0.625rem; border-color: var(--color-border-control); border-radius: var(--radius); }
.invoice-card { padding: var(--card-pad); }
.invoice-card h2 { margin: 0 0 0.75rem; }
.invoice-link { color: var(--color-accent-text); font-weight: 600; }
.invoice-list small { margin-top: 2px; color: var(--color-text-muted); }
.invoice-list small.invoice-overdue { color: var(--color-danger-text); font-weight: 500; }
.invoice-steps li { border-top-width: 3px; border-top-color: var(--color-border-control); background: var(--color-surface-subtle); border-radius: 0 0 var(--radius) var(--radius); }
.invoice-steps .is-done { border-top-color: var(--color-success-text); background: var(--color-success-bg); }
.invoice-next { border-color: var(--color-accent-border); border-radius: var(--radius-lg); background: var(--color-accent-soft); padding: var(--card-pad); }
.invoice-next h2 { font-size: var(--text-md); }
.invoice-source { border-color: var(--color-border); border-radius: var(--radius); }
.invoice-editor input, .invoice-editor select, .invoice-editor textarea, .invoice-workspace .invoice-card > label > input:not([type=checkbox]) {
  padding: 0.4375rem 0.6875rem; border-color: var(--color-border-control); border-radius: var(--radius);
}
.invoice-edit-line { background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.invoice-readiness { border-color: var(--color-warning-border); background: var(--color-surface); }
.invoice-workspace button:focus-visible, .invoice-toolbar button:focus-visible, #work-home :focus-visible { --focus-ring-offset: var(--focus-offset); }
.invoice-total { font-size: var(--text-lg); font-weight: 600; }

/* ---------------------------------------------------------- calendars */
.calendar-day, .employee-calendar-day { border-color: var(--color-border); border-radius: var(--radius-md); }
.calendar-weekdays, .employee-calendar-weekdays { font-weight: 600; }
.calendar-day span { font-weight: 600; }

/* ================================================== EMPLOYEE PORTAL SHELL */
@media (min-width: 961px) { .employee-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } }
.employee-shell { background: var(--color-canvas); }
.employee-sidebar {
  padding: 1rem 0.75rem 1.25rem; background: var(--color-sidebar-bg); color: var(--color-text);
  border-right: 1px solid var(--color-border);
}
.employee-brand { gap: 0.75rem; margin-bottom: 0.75rem; padding: 0.25rem 0.5rem 1rem; border-bottom: 1px solid var(--color-border); }
.employee-brand strong { color: var(--color-text); font-size: var(--text-base); font-weight: 600; }
.employee-brand span { color: var(--color-text-muted); font-size: var(--text-xs); }
.employee-card {
  gap: 2px; margin: 0 0 0.75rem; padding: 0.25rem 0.5rem 0.75rem;
  border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: none; color: var(--color-text);
}
.employee-card > span:first-child { display: none; }
.employee-card strong { color: var(--color-text); font-size: var(--text-sm); font-weight: 600; }
.employee-card small, .employee-card span { color: var(--color-text-muted); font-size: var(--text-xs); }
.employee-user-switch { margin-top: 0.5rem; gap: 0.25rem; }
.employee-user-switch select, .employee-topbar-user-switch select {
  min-height: var(--target-min); padding: 0 1.625rem 0 0.5rem;
  border: 1px solid var(--color-border-control); border-radius: var(--radius);
  background-color: var(--color-surface); color: var(--color-text-secondary); font-size: var(--text-sm);
}
.employee-card .finance-language-slot { margin-top: 0.5rem; }
.employee-nav { gap: 2px; }
.employee-workspace { padding: 0 var(--page-pad-x) 3rem; }
.employee-topbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem;
  margin: 0 calc(-1 * var(--page-pad-x)) 1.75rem; padding: 0.625rem var(--page-pad-x); min-height: var(--topbar-h);
  border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
}
@media (min-width: 961px) { .employee-workspace > .employee-topbar { position: sticky; top: 0; z-index: 40; } }
.employee-topbar > div:not(.employee-actions) { flex: 1 1 auto; min-width: 0; order: 1; }
.employee-topbar > .navigation-history { order: 0; }
.employee-topbar > .employee-actions { order: 2; }
.employee-topbar h1, #employee-page-title { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; }
#employee-page-subtitle { display: none; }
/* The user switch lives in the sidebar; the header keeps only actions. */
.employee-topbar-user-switch { display: none; }
.employee-actions { align-items: center; }
.welcome-band { padding: var(--card-pad); align-items: center; }
.welcome-band > div > span { color: var(--color-text-muted); font-size: var(--text-xs); }
.welcome-band button span, .welcome-band .page-actions span { color: inherit; font-size: inherit; }
.welcome-band strong { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; }
.welcome-band p { display: none; }
.employee-info-card { padding: 1rem 1.125rem; }
.profile-field span { color: var(--color-text-muted); font-size: var(--text-xs); }
.profile-field strong { font-weight: 500; }
.profile-avatar { border-radius: 50%; background: var(--color-neutral-bg); color: var(--color-text-tertiary); font-weight: 600; }
.mobile-feature-tile { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.mobile-feature-tile.primary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.mobile-feature-tile svg { color: var(--color-accent); }

/* ================================================ PORTAL CHOOSER & GATE */
.portal-shell { max-width: 60rem; gap: 2rem; }
.portal-header { gap: 1rem; }
.portal-header .brand-mark { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); font-size: var(--text-md); }
.portal-header h1 { margin: 0 0 0.25rem; font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -.02em; }
.portal-header p { color: var(--color-text-muted); font-size: var(--text-md); }
.portal-grid { gap: 1.25rem; }
.portal-card {
  min-height: 11.875rem; padding: 1.5rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.portal-card:hover { border-color: var(--color-accent-border); box-shadow: var(--shadow-md); transform: none; }
.portal-card svg { width: 1.375rem; height: 1.375rem; padding: 0.625rem; box-sizing: content-box; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent); }
.portal-card strong { font-size: var(--text-md); font-weight: 600; }
.portal-card span { color: var(--color-text-muted); }
html.auth-pending.auth-failed .auth-gate {
  max-width: 26.25rem; margin: 18vh auto; padding: 2rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md);
  font: 400 var(--text-base)/1.5 var(--font-sans);
}
html.auth-pending.auth-failed .auth-gate::before {
  content: "GK"; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; font-size: var(--text-base);
}
.auth-gate > a {
  display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-height: var(--control-h); padding: 0 1rem;
  border-radius: var(--radius); background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; text-decoration: none;
}
.auth-gate > a:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.auth-gate .legal-links { padding-top: 1rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); opacity: 1; }
.auth-gate .legal-links a { color: var(--color-text-muted); }
/* Phones: keep the 16px page gutter around the sign-in card. */
@media (max-width: 440px) { html.auth-pending.auth-failed .auth-gate { margin: 12vh 1rem; } }

/* ======================================================== RESPONSIVE */
@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  :root { --ds-card-pad: 16px; }
  .workspace, .employee-workspace { padding: 0 1rem 1.5rem; }
  .app-shell { background: var(--color-canvas); }
  .sidebar { box-shadow: var(--shadow-overlay); }
  .topbar {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.5rem; margin: 0 -1rem 1rem; padding: 0.5rem 1rem; min-height: 0;
    backdrop-filter: none; background: var(--color-surface);
  }
  .topbar .navigation-history { grid-column: auto; width: auto; gap: 2px; }
  .navigation-history button, .navigation-history .secondary-button {
    flex: 0 0 auto; width: var(--target-min); min-width: var(--target-min); height: var(--target-min); min-height: var(--target-min);
  }
  .topbar .search { flex: 1 1 11.25rem; max-width: none; min-height: var(--target-min); }
  .topbar > .toolbar { display: flex; flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
  .topbar .finance-language-slot { width: auto; flex: 0 0 auto; }
  .topbar .finance-language-switcher { margin: 0; }
  .topbar .finance-language-switcher select { min-height: var(--target-min); min-width: 6.875rem; }
  .toolbar-options-toggle.account-menu-button { min-height: 2.75rem; max-width: calc(100% - 9.375rem); min-width: 0; margin-left: auto; }
  .toolbar-options.is-open { flex: 1 1 100%; order: 10; border: 1px solid var(--color-border); box-shadow: none; width: 100%; }
  .toolbar > #logout-button { flex: 1 1 100%; min-height: 2.75rem; }
  .page-heading, .crm-page-heading, .invoice-heading { gap: 0.75rem; margin-bottom: 1rem; }
  .page-heading h1, .crm-page-heading h1, .invoice-heading h1 { font-size: var(--text-lg); }
  .page-actions { width: 100%; justify-content: flex-start; }
  .panel { border-radius: var(--radius-lg); }

  .metric-grid, #summary-metrics, .invoice-summary { gap: 0.75rem; }
  .metric, .invoice-summary article { padding: 0.75rem 0.875rem; }
  .metric strong, .invoice-summary strong { font-size: var(--text-lg); }
  .personal-cockpit-grid { grid-template-columns: minmax(0, 1fr); }
  .invoice-filters, .work-home-tabs, .dms-worklists {
    display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none;
    /* Scroll cue: a shadow at the edge that still hides tabs ("Überfällig" was cut off without a hint). The
       surface-coloured covers scroll with the content (local) and hide the shadows (scroll) at either end. */
    background:
      linear-gradient(to right, var(--color-surface) 40%, transparent) left center / 2.5rem 100% no-repeat local,
      linear-gradient(to left, var(--color-surface) 40%, transparent) right center / 2.5rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--color-text) 28%, transparent), transparent) left center / 0.875rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--color-text) 28%, transparent), transparent) right center / 0.875rem 100% no-repeat scroll,
      var(--color-surface);
  }
  .invoice-filters button, .work-home-tabs button, .dms-worklists button { flex: 0 0 auto; min-height: var(--target-min); white-space: nowrap; }
  .employee-topbar { margin: 0 -1rem 1rem; padding: 0.5rem 1rem; backdrop-filter: none; background: var(--color-surface); }
  /* Touch targets in the navigation drawer. */
  .nav-item, .admin-nav-item { min-height: 2.75rem; }
  .employee-sidebar { border-right: 0; }
}
@media (max-width: 480px) {
  .metric strong, .invoice-summary strong { font-size: var(--text-md); }
}

/* ---------------------------------------------------- invoice list chrome */
.invoice-toolbar > label[for="invoice-search"] {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.invoice-filters { margin: 0 0 0.75rem; vertical-align: middle; }
.invoice-filter-reset { margin: 0 0 0.75rem 0.5rem; vertical-align: middle; }
.invoice-list .invoice-pager { justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 0 0; }
/* Pagers: buttons never touch; disabled uses the normal disabled style (features.css lost its opacity: .4 = 2.07:1). */
.invoice-pager, .work-home-pager, .dms-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
details.panel > summary { cursor: pointer; color: var(--color-text-secondary); font-size: var(--text-base); font-weight: 500; }
details.panel[open] > summary { margin-bottom: 0.75rem; }
.account-grid .account-card > strong, .account-grid .account-card > span, .account-grid .account-card > small { display: block; margin: 0; }
.account-grid .account-card > .delta { margin: 0; }

/* Page headers whose actions are direct children (no .page-actions wrapper). */
.page-heading { column-gap: 0.5rem; }
.page-heading > div:first-child { flex: 1 1 17.5rem; min-width: 0; margin-right: 1rem; }
.page-heading > :is(button, a, details, .invoice-create-actions) { flex: 0 0 auto; }
/* Action bars with many buttons wrap instead of pushing the page wider than the viewport. */
.page-heading { flex-wrap: wrap; row-gap: 0.5rem; }
.page-heading > .page-actions { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.invoice-create-actions { gap: 0.5rem; }

/* -------------------------------------------------------------- DMS */
#dms-view { --dms-accent: var(--color-accent); --dms-line: var(--color-border); }
.dms-worklists { margin: 0 0 1rem; }
.dms-detail-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); }
.dms-document-select, .crm-relation-open strong { color: var(--color-accent-text); font-weight: 600; }
.dms-dropzone { border-color: var(--color-border-control); border-radius: var(--radius-lg); background: var(--color-surface-subtle); color: var(--color-text-muted); }
.dms-dropzone.is-dragging { background: var(--color-accent-soft); border-color: var(--color-accent); }
#dms-view td { padding: 0.625rem 0.75rem; }
#dms-view button:focus-visible, .dms-upload-page button:focus-visible { --focus-ring-offset: var(--focus-offset); }
#dms-view summary, .crm-context > summary { font-weight: 500; }
#dms-view .ui-empty-state, #dms-view .empty-state { text-align: left; }

/* Employee portal on tablets/phones: the sidebar becomes a compact header. */
@media (max-width: 960px) {
  .employee-sidebar { position: static; height: auto; padding: 0.625rem 0.75rem; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .employee-brand { padding: 0.25rem 0.25rem 0.625rem; }
  .employee-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.5rem; padding: 0.25rem 0.25rem 0.625rem; }
  .employee-card > strong, .employee-card > small { grid-column: 1; }
  .employee-card .employee-user-switch { grid-column: 1; margin: 0; }
  .employee-card .finance-language-slot { grid-column: 2; grid-row: 3; margin: 0; }
  /* The navigation becomes a horizontal strip of pills; the selected pill stays filled. */
  .employee-nav { display: flex; gap: 0.25rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .employee-nav-item { flex: 0 0 auto; width: auto; min-height: var(--target-min); padding: 0.5rem 0.75rem; }
}
@media (max-width: 680px) {
  .employee-sidebar, .employee-workspace { width: 100%; }
  .employee-nav-item { min-height: 2.75rem; }
  .welcome-band { background: var(--color-surface); color: var(--color-text); }
  .welcome-band > div > span { color: var(--color-text-muted); }
  .welcome-band .secondary-button { background: var(--color-surface); color: var(--color-text-secondary); }
  .mobile-feature-tile { min-height: 0; gap: 0.25rem; padding: 0.75rem; box-shadow: none; }
  .mobile-feature-tile strong { font-size: var(--text-lg); font-weight: 600; }
  .mobile-feature-tile small { color: var(--color-text-muted); }
  .employee-topbar { flex-wrap: nowrap; }
  .employee-brand { display: none; }
  .employee-user-switch > span { display: none; }
  .mobile-command-panel, .mobile-time-console { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
  .mobile-command-panel span, .mobile-time-console span, .mobile-time-console small { color: var(--color-text-muted); }
  .mobile-command-panel strong, .mobile-time-console strong { font-size: var(--text-lg); font-weight: 600; }
  .mobile-command-panel button span, .mobile-time-console button span { color: inherit; }
}

/* Phone tables render as labelled cards (styles.css); keep them light. */
@media (max-width: 860px) {
  .table-wrap td { height: auto; }
  .panel > .table-wrap, .invoice-card > .table-wrap,
  .panel > .table-wrap:last-child, .invoice-card > .table-wrap:last-child { margin-inline: 0; margin-bottom: 0; }
  .panel > .table-wrap th:first-child, .panel > .table-wrap td:first-child,
  .panel > .table-wrap th:last-child, .panel > .table-wrap td:last-child { padding-left: 0.625rem; padding-right: 0.625rem; }
  .table-wrap tr { border-color: var(--color-border); border-radius: var(--radius-lg); }
  .table-wrap td { border-bottom: 1px solid var(--color-border-subtle); }
  .table-wrap td:last-child { border-bottom: 0; }
  .table-wrap td::before { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; text-transform: none; letter-spacing: 0; }
  tbody tr:hover > td { background: none; }
}

/* Secondary tool rows under a page header: quieter, compact buttons. */
.view > .filter-row { flex-wrap: wrap; gap: 0.375rem; margin: -0.5rem 0 1rem; }
.view > .filter-row > :is(.secondary-button, .ghost-button) { min-height: var(--target-min); padding: 0 0.625rem; font-size: var(--text-sm); }
.view > .filter-row > .secondary-button svg { color: var(--color-text-muted); }
.settings-summary dt { color: var(--color-text-muted); }
.settings-summary dd { font-weight: 500; }
.settings-profile-avatar { border-radius: 50%; background: var(--color-neutral-bg); color: var(--color-text-tertiary); font-weight: 600; }
.panel > .table-wrap:first-child, .invoice-card > .table-wrap:first-child { margin-top: calc(-1 * var(--card-pad)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.panel > .table-wrap:first-child:last-child { border-radius: var(--radius-lg); }
@media (max-width: 860px) { .panel > .table-wrap:first-child, .invoice-card > .table-wrap:first-child { margin-top: 0; } }
.report-panel { padding: var(--card-pad); }
.report-panel svg { color: var(--color-text-muted); }
.report-panel h2 { margin-top: 0.5rem; }
header.invoice-heading { justify-content: flex-start; align-items: center; gap: 0.75rem; }
header.invoice-heading h1 { font-size: var(--text-lg); }
.action-modal-header span:empty { display: none; }
.auth-gate-title { font-size: var(--text-md); font-weight: 600; }
html.auth-pending.auth-failed .auth-gate p { margin: 0; color: var(--color-text-secondary); }
/* Employee views: the top bar already names the view; the section heading stays for screen readers. */
.employee-view > .page-heading > div:first-child:has(> h2:only-child) {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.employee-view > .page-heading { justify-content: flex-end; margin-bottom: 1rem; }
.employee-view > .page-heading:not(:has(> :not(div:first-child))) { margin: 0; }
.time-week-strip article, .employee-card-list article { border-color: var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.time-week-strip article.paid { border-color: var(--color-success-border); }

/* Agent chat: icons instead of decorative glyphs. */
.agent-chat-mark { border-radius: var(--radius); background: var(--color-neutral-bg); color: var(--color-text-tertiary); }
.agent-chat-mark svg { width: 1.125rem; height: 1.125rem; }
.agent-welcome-mark { border-radius: var(--radius-lg); background: var(--color-surface-subtle); border-color: var(--color-border); color: var(--color-text-muted); }
.agent-welcome-mark svg { width: 1.625rem; height: 1.625rem; }
.agent-new-chat { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: var(--radius); border-color: var(--color-border-control); font-weight: 500; }
.agent-chat-suggestions button { border-color: var(--color-border); border-radius: var(--radius-lg); }
.agent-chat-suggestions button > svg { width: 1.25rem; height: 1.25rem; color: var(--color-text-muted); }
.agent-chat-welcome h2 { font-size: var(--text-lg); letter-spacing: -.01em; color: var(--color-text); }
.agent-history-label { text-transform: none; letter-spacing: 0; font-weight: 600; }
@media (max-width: 760px) { .agent-chat-suggestions button > svg { grid-row: 1 / 3; } }
/* Phones: KPI cards two per row; an odd last card spans the row instead of standing alone. */
@container page (max-width: 30rem) {
  :is(.metric-grid, #summary-metrics, .invoice-summary) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.metric-grid, #summary-metrics, .invoice-summary) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Containers that scroll sideways show it: their trailing edge fades out (mask) until the end is reached.
   A scroll-driven animation moves the fade, so a table that fits has no fade at all (inactive timeline);
   browsers without scroll timelines simply show no cue. The mask lies above cell backgrounds, so it works
   in every style. The first column stays in view while scrolling; :where() keeps it below hover, zebra and
   selection backgrounds. Stacked (card) tables are unaffected. */
@property --scroll-cue-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes ds-scroll-cue { from, 92% { --scroll-cue-end: 2.5rem; } to { --scroll-cue-end: 0px; } }
@supports (animation-timeline: scroll(self inline)) {
  :is(.table-wrap, .ds-table-wrap, .adm-table, .crm-detail-tabs, .invoice-filters, .work-home-tabs, .dms-worklists, .ds-scroll-cue) {
    mask-image: linear-gradient(to left, color-mix(in srgb, var(--color-text) 12%, transparent), var(--color-text) var(--scroll-cue-end));
    animation: ds-scroll-cue linear both; animation-duration: auto; animation-timeline: scroll(self inline);
  }
}
@container table (min-width: 40.0625rem) {
  :where(.table-wrap, .ds-table-wrap, .adm-table) > table > :where(thead, tbody) > tr > :where(th, td):first-child { position: sticky; left: 0; z-index: 1; }
  :where(.table-wrap, .ds-table-wrap, .adm-table) > table > tbody > tr > :where(td:first-child) { background-color: var(--color-surface); }
  :where(.table-wrap, .ds-table-wrap, .adm-table) > table > thead > tr > :where(th:first-child) { z-index: 2; }
  :where(.table-wrap, .ds-table-wrap, .adm-table) > table > tbody > tr > :where([colspan]:first-child) { position: static; }
}
/* Record titles rendered as text buttons inside table cells (CRM work list, offers) wrap like text: one long
   title must not stretch its column to 900 px and push the action columns out of view. */
td > :is(.ghost-button, .secondary-button):not(.compact-button) { white-space: normal; text-align: start; justify-content: flex-start; }
/* Audit evidence hashes stay complete but may break anywhere, so the column does not grow to 650 px. */
:is(#audit-table, #audit-standalone-table) td code { word-break: break-all; font-size: var(--text-xs); }
/* One active company: hide the "Firma" column (th.col-tenant) of its lists; empty-state rows (colspan) stay. */
:root[data-tenant-scope="single"] table:has(> thead > tr > th.col-tenant:first-child) > :is(thead, tbody, tfoot) > tr > :first-child:not([colspan]) { display: none; }
:root[data-tenant-scope="single"] table:has(> thead > tr > th.col-tenant:nth-child(2)) > :is(thead, tbody, tfoot) > tr > :nth-child(2) { display: none; }
/* Laptop widths (table area 40-64rem, e.g. 1280 px with sidebar): tighter cell padding and wrapping column
   headers, so lists with 7-8 columns fit without sideways scrolling more often. */
@container table (min-width: 40.0625rem) and (max-width: 64rem) {
  :is(.table-wrap, .ds-table-wrap) > table > :is(thead, tbody, tfoot) > tr > :is(th, td) { padding-inline: var(--space-2); hyphens: auto; }
  :is(.table-wrap, .ds-table-wrap) > table > thead > tr > th { white-space: normal; }
  :is(.table-wrap, .ds-table-wrap) > table > tbody > tr > td > :is(.primary-button, .secondary-button, .ghost-button).compact-button { white-space: normal; text-align: center; }
}
/* Card grids: auto-fit, so a handful of cards fills the row instead of leaving empty tracks. */
.account-grid, .report-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.account-grid.compact { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
td[colspan] { color: var(--color-text-muted); }
@media (max-width: 860px) {
  .panel-header { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .panel-header > .ghost-button { margin-left: auto; }
}

/* Release notes and training: flat surfaces instead of gradient heroes. */
.changelog-hero {
  padding: 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text); box-shadow: none;
}
.changelog-hero h2 { font-size: var(--text-lg); line-height: 1.35; color: var(--color-text); }
.changelog-hero p { color: var(--color-text-muted); line-height: 1.5; }
.changelog-hero .crm-section-kicker { display: none; }
.changelog-hero-stats article { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-subtle); backdrop-filter: none; }
.changelog-hero-stats strong { font-size: var(--text-lg); color: var(--color-text); }
.changelog-hero-stats span { color: var(--color-text-muted); }
.changelog-release-badge { border-color: var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.changelog-release-badge strong { font-size: var(--text-md); color: var(--color-text); }
.training-intro { padding: 1rem; border-color: var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); }
.training-intro h2 { font-size: var(--text-md); margin-bottom: 0.25rem; }
.training-intro p { color: var(--color-text-muted); }
.page-heading > .badge { display: none; }
@media (max-width: 480px) {
  .primary-button, .secondary-button, .ghost-button, .danger-button { white-space: normal; text-align: center; }
}
/* Unclassed buttons on generated pages get the secondary button look. */
/* Toggle and tab buttons (aria-pressed / role=tab) keep the shared selection look. */
:is(.party-merge-page, .workspace-page) button:not([class]):not([aria-pressed]):not([role="tab"]) {
  min-height: var(--control-h); padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-border-control); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-text-secondary); font: 500 var(--text-base)/1.3 var(--font-sans); cursor: pointer;
}
:is(.party-merge-page, .workspace-page) button:not([class]):not([aria-pressed]):not([role="tab"]):hover:not(:disabled) { background: var(--color-surface-subtle); }
.party-merge-page [data-suggestion] { border-radius: var(--radius); }

.mobile-feature-hub .mobile-feature-tile svg, .mobile-feature-hub .mobile-feature-tile.primary svg { color: var(--color-text-muted); }
.mobile-section-title span { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; }
.mobile-section-title strong { font-size: var(--text-md); font-weight: 600; }

/* Legal links (sidebars, portal chooser): quiet, still underlined on hover. */
.legal-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.portal-shell .legal-links a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--color-text-muted); font-size: var(--text-sm); }
:is(.sidebar, .employee-sidebar) .legal-links { gap: 0.25rem 1rem; padding: 0.5rem 0.625rem; opacity: 1; font-size: var(--text-xs); }
:is(.sidebar, .employee-sidebar) .legal-links a { color: var(--color-text-muted); text-decoration: none; }
:is(.sidebar, .employee-sidebar) .legal-links a:hover { color: var(--color-text); text-decoration: underline; }

/* ===== Admin (legacy page): same light shell as the work portal ===== */
.admin-sidebar { background: var(--color-sidebar-bg); color: var(--color-text); border-right: 1px solid var(--color-border); }
.admin-brand span, .admin-links span { color: var(--color-text-muted); }
.admin-nav { gap: 2px; }
.admin-links a { border: 0; border-radius: var(--radius); color: var(--color-text-tertiary); }
.admin-links a:hover { background: var(--color-surface-hover); color: var(--color-text); }
.identity-tabs { gap: 0.25rem; padding-block: 0.5rem; }
.identity-tab::after { content: none; }

/* ===== Selected state: one look for every navigation and selection pattern =====
   Sidebar items, CRM area tabs, record-detail tabs, saved views, DMS worklists and tabs,
   invoice/liquidity filters, work-inbox tabs and admin tabs (customer-portal.css mirrors it):
   unselected = quiet text, hover = neutral tint, selected = filled accent pill + accent text + 600,
   keyboard focus = separate outline ring (inset, so scroll strips never clip it). */
/* Plain selector list (not :is) so every entry keeps its own specificity. */
.crm-tab, .crm-saved-view, .crm-detail-tabs button, .dms-detail-tabs button, .invoice-filters button,
.work-home-tabs button, .dms-worklists button, .crm-analytics-periods button, .identity-tab {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: var(--target-min); margin: 0; padding: 0 0.75rem;
  border: 0; border-radius: var(--radius); background: transparent; box-shadow: none;
  color: var(--color-text-tertiary); font-size: var(--text-sm); font-weight: 500; line-height: 1.25;
  cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
.crm-tab { min-height: var(--target-min); padding: 0.375rem 0.625rem; }
.crm-saved-view { border: 1px solid var(--color-border); background: var(--color-surface); }
.crm-detail-tabs button.is-empty { color: var(--color-text-disabled); }
/* Labels laid out as grids (label text above its control): the control may shrink below its longest option. */
.crm-offer-terms label, .crm-configurator-head label { grid-template-columns: minmax(0, 1fr); min-width: 0; }
/* Empty relation rows stay one quiet line: the 44px add button sets the height, not extra padding. */
.crm-rel-row.is-empty { padding-block: 0; }
:is(.crm-tab, .crm-saved-view, .crm-detail-tabs button, .dms-detail-tabs button, .invoice-filters button,
    .work-home-tabs button, .dms-worklists button, .crm-analytics-periods button, .identity-tab, [data-crm-presentation])
  :is(svg) { flex: 0 0 auto; color: currentColor; opacity: .8; }
:is(.crm-tab, .crm-saved-view, .crm-detail-tabs button, .dms-detail-tabs button, .invoice-filters button,
    .work-home-tabs button, .dms-worklists button, .crm-analytics-periods button, .identity-tab):hover:not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not(:disabled) {
  background: var(--color-surface-hover); color: var(--color-text);
}

:is(.nav-item, .employee-nav-item, .admin-nav-item, .crm-tab, .crm-saved-view, .identity-tab, .agent-history-item).is-active,
.agent-history-item[aria-current="true"],
:is(.crm-detail-tabs, .dms-detail-tabs, .work-home-tabs, [role="tablist"]) [role="tab"][aria-selected="true"],
.dms-detail-tabs button[aria-selected="true"],
:is(.invoice-filters, .dms-worklists, .crm-analytics-periods) button[aria-pressed="true"],
[data-crm-presentation][aria-pressed="true"] {
  background: var(--color-selected-bg); border-color: transparent;
  box-shadow: inset 0 calc(-1 * var(--indicator-w)) 0 var(--color-selected-indicator);
  color: var(--color-selected-text); font-weight: var(--weight-bold);
}
/* Vertical navigation: the indicator bar sits on the leading edge (shape, not only colour). */
:is(.nav-item, .employee-nav-item, .admin-nav-item, .agent-history-item).is-active,
.agent-history-item[aria-current="true"] { box-shadow: inset var(--indicator-w) 0 0 var(--color-selected-indicator); }
.crm-saved-view.is-active { border-color: var(--color-accent-border); }
:is(.nav-item, .employee-nav-item, .admin-nav-item, .crm-tab, .crm-saved-view).is-active svg,
:is(.crm-detail-tabs, .dms-detail-tabs, .work-home-tabs) [aria-selected="true"] svg { color: var(--color-selected-indicator); opacity: 1; }
.work-home-tabs [aria-selected="true"] span { opacity: 1; }
:is(.nav-item, .employee-nav-item, .admin-nav-item, .nav-toggle, .crm-tab, .crm-saved-view, .crm-detail-tabs button, .dms-detail-tabs button,
    .invoice-filters button, .work-home-tabs button, .dms-worklists button, .crm-analytics-periods button, .identity-tab):focus-visible {
  --focus-ring-offset: calc(-1 * var(--focus-w)); --focus-ring-halo: inset 0 0 0 calc(var(--focus-w) + var(--focus-offset)) var(--color-focus-halo);
}
@media (max-width: 860px) {
  .crm-tab, .crm-saved-view, .crm-detail-tabs button, .dms-detail-tabs button, .invoice-filters button,
  .work-home-tabs button, .dms-worklists button, .identity-tab { min-height: 2.75rem; }
}
/* Rows and cards that can be picked. */
.training-card[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-selected-bg); }
.training-card:hover:not([aria-pressed="true"]) { border-color: var(--color-border-control); background: var(--color-surface); }
.employee-calendar-day.is-selected, .calendar-day.is-selected { border-color: var(--color-accent); background: var(--color-selected-bg); }

/* ===== Generic list components (registers, document lists) ===== */
/* .ds-register: a card holding labelled rows (key facts, register entries) with calm separators.
   .ds-doc-list: a list of documents/files with icon, title, meta line and trailing actions. */
.ds-register { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
/* The label column is sized to the labels (at most 18rem), so label and value stay together on wide screens. */
.ds-register > * { display: grid; grid-template-columns: minmax(8.75rem, min(32%, 18rem)) minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 1rem; padding: 0.75rem var(--card-pad); border-bottom: 1px solid var(--color-border-subtle); }
.ds-register > :last-child { border-bottom: 0; }
.ds-register dt, .ds-register .ds-register-label { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; }
.ds-register dd, .ds-register .ds-register-value { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.ds-register-section { margin: 1.5rem 0 0.5rem; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; }
.ds-doc-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ds-doc-list > li, .ds-doc-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border-subtle); }
.ds-doc-list > li:last-child { border-bottom: 0; }
.ds-doc-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--color-surface-sunken); color: var(--color-text-muted); }
.ds-doc-icon svg { width: 1.125rem; height: 1.125rem; }
.ds-doc-title { overflow: hidden; color: var(--color-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ds-doc-meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.ds-doc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
@media (max-width: 600px) {
  .ds-register > * { grid-template-columns: minmax(0, 1fr); }
  .ds-doc-list > li, .ds-doc-item { grid-template-columns: auto minmax(0, 1fr); }
  .ds-doc-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
}

/* Demo installation marker (static/display-preferences.js renderDemoBadge): visible on every portal,
   never intercepts clicks. It sits in the header flow ([data-demo-badge-slot]) so it never covers the search,
   the brand or a title; only pages without a slot get the fixed corner variant. */
.ds-demo-slot { display: inline-flex; flex: none; align-items: center; }
.ds-demo-slot:empty { display: none; }
.ds-demo-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 0.0625rem 0.5rem;
  border-radius: var(--radius-full, 999rem);
  background: var(--color-danger-fill);
  color: var(--color-on-danger-fill);
  font: 700 0.6875rem/1.4 system-ui, sans-serif;
  letter-spacing: 0.12em;
  white-space: nowrap;
  pointer-events: none;
}
.ds-demo-badge--corner {
  position: fixed;
  inset-inline-start: 0;
  inset-block-end: 0;
  z-index: 2147483000;
  border-radius: 0 0.5rem 0 0;
  box-shadow: var(--shadow-sm, none);
}
@media print { .ds-demo-badge--corner { position: static; } }

/* Work home: setup checklist of a new company (static/setup-checklist.js). */
.setup-checklist { margin: 0 0 1.25rem; padding: var(--card-pad); background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md, 0.5rem); }
.setup-checklist[hidden] { display: none; }
.setup-checklist__header h2 { margin: 0 0 0.25rem; font-size: var(--text-lg, 1.125rem); }
.setup-checklist__header p { margin: 0 0 0.5rem; color: var(--color-text-muted); }
.setup-checklist__steps { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.setup-checklist__step { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--color-border-subtle); }
.setup-checklist__label { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.setup-checklist__state { flex: 0 0 auto; padding: 0.125rem 0.5rem; border-radius: 999rem; font-size: var(--text-sm, 0.875rem); background: var(--color-warning-bg); color: var(--color-warning-text); }
.setup-checklist__step.is-done .setup-checklist__state { background: var(--color-success-bg); color: var(--color-success-text); }
.setup-checklist__hint { color: var(--color-text-muted); font-size: var(--text-sm, 0.875rem); }