/* =============================================================================
   LEDGER for EmmaMerch — visual restyle of the Radzen "software" theme.

   WHAT THIS FILE IS
   The Ledger design system (see mockup/blazor-radzen/DESIGN.md) expressed as a
   token override on top of Radzen.Blazor 11.1.4 + the Trinidat vendor bundle.
   Signal Blue #1a4edb for actions, a cool ink neutral ramp, IBM Plex Sans/Mono,
   five levels of ink-tinted elevation, glass on floating surfaces only.

   HOW IT WORKS
   Radzen reads --rz-* custom properties for every colour, radius, shadow and
   size, so section 2 reaches almost every component without per-component CSS.
   Sections 3+ only exist for the handful of things variables cannot express, or
   where a narrower selector in software.css / the vendor bundle would otherwise
   win.

   LOAD ORDER  (Components/App.razor)
   This file MUST be linked after <RadzenTheme>, because RadzenTheme injects its
   own <link id="radzen-theme-link"> at runtime and the WCAG toggle injects
   immediately after that one. Token blocks use `html:root` (0,1,1) rather than
   `:root` (0,1,0) as cheap insurance against a future re-order.

   WHAT IT DELIBERATELY DOES NOT TOUCH
   - the .flexGrowContainerWithFlexGrow / .order-tabset flex chain in site.css
     and the vendor bundle: that is the app's full-height sizing contract.
     No display / overflow / flex / height rules on .rz-panel, .rz-tabview,
     .rz-stack, .rz-card, .rz-panel-content* or .rz-dialog-content.
   - .app-zoom { zoom: .9 }. Every value below is therefore nominal and lands on
     screen at 90%; see section 1 note. One opt-out block at the end.
   - the .order-sidebar-opener drawer toggles: site.css places them in their
     drawer's grid area. Do not give them a pixel `left` again.
   ============================================================================= */


/* ---------------------------------------------------------------------------
   0. FONTS — self-hosted IBM Plex (no runtime call to Google)
   Sans is a variable font: one file per subset covers 400-600.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------------------------------------------------------------------------
   1. LEDGER TOKENS
   The only place hex values live. Everything else refers to these.
   NOTE ON SCALE: .app-zoom on the RadzenLayout applies zoom: .9, so a 44px row
   below reaches the screen at ~40px and the 15px body at ~13.5px. The values
   are kept nominal (matching DESIGN.md) rather than pre-divided, because the
   app's existing information density is worth preserving — and this is still
   larger than the 14px/0.9 the software theme was giving. Section 14 has the
   one-block opt-out if you would rather see the design at true size.
   --------------------------------------------------------------------------- */
html:root {
  /* Action — one blue, used for nothing decorative */
  --lg-blue: #1a4edb;
  --lg-blue-hover: #1745c4;
  --lg-blue-active: #123aa6;
  --lg-blue-tint-1: #f3f6fe;
  --lg-blue-tint-2: #e8eefc;
  --lg-blue-tint-3: #d3ddf8;
  --lg-blue-ring: rgba(26, 78, 219, .32);

  /* Cool ink ramp — text, borders, quiet surfaces */
  --lg-ink: #0d1424;
  --lg-ink-2: #3b4457;
  --lg-ink-3: #666f80;   /* DESIGN.md #6a7385 darkened 2%: see note below */
  --lg-ink-4: #9aa3b4;
  --lg-ink-5: #c9cfd9;
  --lg-canvas: #ffffff;
  --lg-canvas-2: #f6f7fa;
  --lg-canvas-3: #eef0f4;
  --lg-hairline: #e4e7ed;
  --lg-hairline-soft: #eff1f5;

  /* Status — never the action colour */
  --lg-ok: #167a45;
  --lg-ok-tint: #e6f4ec;
  --lg-ok-border: #bfe2ce;
  --lg-warn: #8f5806;    /* DESIGN.md #a8690b darkened: 4.0:1 -> 5.3:1 on warn-tint */
  --lg-warn-tint: #fbf1de;
  --lg-warn-border: #ecd3a4;
  --lg-danger: #c0272d;
  --lg-danger-light: #d9585d;
  --lg-danger-dark: #8a1a1f;
  --lg-danger-tint: #fbe9ea;
  --lg-danger-border: #f0c2c4;

  /* Glass — permitted on five surfaces only */
  --lg-glass-bg: rgba(255, 255, 255, .72);
  --lg-glass-bg-2: rgba(255, 255, 255, .82);
  /* One step denser, for the sticky totals row: it sits directly over data
     rows, and at 82% the figures behind it read through the blur. */
  --lg-glass-bg-3: rgba(255, 255, 255, .92);
  --lg-glass-border: rgba(13, 20, 36, .08);
  --lg-glass-blur: saturate(180%) blur(12px);
  --lg-glass-hi: inset 0 1px 0 rgba(255, 255, 255, .75);

  /* Elevation — ink-tinted, five levels */
  --lg-e1: 0 1px 2px rgba(13, 20, 36, .05), 0 0 0 1px rgba(13, 20, 36, .04);
  --lg-e2: 0 1px 2px rgba(13, 20, 36, .04), 0 8px 24px -8px rgba(13, 20, 36, .12), 0 0 0 1px rgba(13, 20, 36, .04);
  --lg-e3: 0 2px 4px rgba(13, 20, 36, .04), 0 16px 48px -12px rgba(13, 20, 36, .18), 0 0 0 1px rgba(13, 20, 36, .05);
  --lg-e4: 0 4px 8px rgba(13, 20, 36, .06), 0 32px 80px -16px rgba(13, 20, 36, .26), 0 0 0 1px rgba(13, 20, 36, .06);
  --lg-inset: inset 0 1px 2px rgba(13, 20, 36, .06);

  /* Type */
  --lg-font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lg-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  /* Shape */
  --lg-r-sm: 6px;
  --lg-r-md: 10px;
  --lg-r-lg: 14px;

  /* Motion */
  --lg-d-fast: 120ms;
  --lg-d-base: 200ms;
  --lg-d-slow: 320ms;
  --lg-ease: cubic-bezier(.2, .8, .2, 1);
  --lg-ease-out: cubic-bezier(.16, 1, .3, 1);
  --lg-ease-inout: cubic-bezier(.65, 0, .35, 1);

  /* Table rhythm */
  --lg-row-h: 44px;
  --lg-row-h-compact: 36px;
}


/* ---------------------------------------------------------------------------
   2. TOKENS -> RADZEN VARIABLES
   Verified against radzen.blazor 11.1.4 / software.css. Grouped by component so
   the gaps the Ledger reference shell never had to cover are visible.
   --------------------------------------------------------------------------- */
html:root {

  /* --- 2.1 Brand ------------------------------------------------------- */
  --rz-primary: var(--lg-blue);
  --rz-primary-light: #4f78e6;
  --rz-primary-lighter: var(--lg-blue-tint-2);
  --rz-primary-dark: var(--lg-blue-hover);
  --rz-primary-darker: var(--lg-blue-active);
  --rz-on-primary: #ffffff;
  --rz-on-primary-light: #ffffff;
  --rz-on-primary-lighter: var(--lg-blue);
  --rz-on-primary-dark: #ffffff;
  --rz-on-primary-darker: #ffffff;

  /* Secondary is ink, not a second hue. There is no second accent anywhere. */
  --rz-secondary: var(--lg-ink-2);
  --rz-secondary-light: var(--lg-canvas-2);
  --rz-secondary-lighter: var(--lg-canvas-3);
  --rz-secondary-dark: var(--lg-ink);
  --rz-secondary-darker: var(--lg-ink);
  --rz-on-secondary: #ffffff;
  --rz-on-secondary-light: var(--lg-ink);
  --rz-on-secondary-lighter: var(--lg-ink-2);
  --rz-on-secondary-dark: #ffffff;
  --rz-on-secondary-darker: #ffffff;

  /* --rz-base in v11 is a light HAIRLINE tone (#dadfe2), not a text tone.
     It feeds .rz-border* utilities and the *.rz-base.rz-shade-default fills,
     so it must stay light or every ButtonStyle.Base button goes unreadable. */
  --rz-base: var(--lg-hairline);
  --rz-base-light: var(--lg-hairline-soft);
  --rz-base-lighter: var(--lg-canvas-3);
  --rz-base-dark: var(--lg-ink-5);
  --rz-base-darker: var(--lg-ink-4);
  --rz-on-base: var(--lg-ink);
  --rz-on-base-light: var(--lg-ink);
  --rz-on-base-lighter: var(--lg-ink-2);
  --rz-on-base-dark: var(--lg-ink);
  --rz-on-base-darker: var(--lg-ink);

  /* --- 2.2 Status ------------------------------------------------------ */
  --rz-success: var(--lg-ok);
  --rz-success-light: #2f9a5f;
  --rz-success-lighter: var(--lg-ok-tint);
  --rz-success-dark: #106036;
  --rz-success-darker: #0c4c2b;
  --rz-on-success: #ffffff;
  --rz-on-success-light: #ffffff;
  --rz-on-success-lighter: var(--lg-ok);
  --rz-on-success-dark: #ffffff;
  --rz-on-success-darker: #ffffff;

  --rz-warning: var(--lg-warn);
  --rz-warning-light: #c4831f;
  --rz-warning-lighter: var(--lg-warn-tint);
  --rz-warning-dark: #8a5508;
  --rz-warning-darker: #6e4306;
  --rz-on-warning: #ffffff;
  --rz-on-warning-light: #ffffff;
  --rz-on-warning-lighter: var(--lg-warn);
  --rz-on-warning-dark: #ffffff;
  --rz-on-warning-darker: #ffffff;

  --rz-danger: var(--lg-danger);
  --rz-danger-light: var(--lg-danger-light);
  --rz-danger-lighter: var(--lg-danger-tint);
  --rz-danger-dark: var(--lg-danger-dark);
  --rz-danger-darker: #6d1418;
  --rz-on-danger: #ffffff;
  --rz-on-danger-light: #ffffff;
  --rz-on-danger-lighter: var(--lg-danger);
  --rz-on-danger-dark: #ffffff;
  --rz-on-danger-darker: #ffffff;

  /* Info is the one place the action colour carries a status ("in review"). */
  --rz-info: var(--lg-blue);
  --rz-info-light: #4f78e6;
  --rz-info-lighter: var(--lg-blue-tint-2);
  --rz-info-dark: var(--lg-blue-hover);
  --rz-info-darker: var(--lg-blue-active);
  --rz-on-info: #ffffff;
  --rz-on-info-light: #ffffff;
  --rz-on-info-lighter: var(--lg-blue);
  --rz-on-info-dark: #ffffff;
  --rz-on-info-darker: #ffffff;

  /* --- 2.3 Neutral ramp ------------------------------------------------ */
  --rz-white: #ffffff;
  --rz-black: var(--lg-ink);
  --rz-base-50: #fbfcfd;
  --rz-base-100: var(--lg-canvas-2);
  --rz-base-200: var(--lg-canvas-3);
  --rz-base-300: var(--lg-hairline);
  --rz-base-400: var(--lg-ink-5);
  --rz-base-500: var(--lg-ink-4);
  --rz-base-600: var(--lg-ink-3);
  --rz-base-700: var(--lg-ink-2);
  --rz-base-800: #1f2839;
  --rz-base-900: var(--lg-ink);
  --rz-base-background-color: var(--lg-canvas);
  --rz-body-background-color: var(--lg-canvas-2);

  /* --- 2.4 Type -------------------------------------------------------- */
  --rz-text-font-family: var(--lg-font-ui);
  --rz-body-font-size: 0.9375rem;      /* 15 px */
  --rz-body-line-height: 1.5;
  --rz-text-color: var(--lg-ink);
  --rz-text-title-color: var(--lg-ink);
  --rz-text-secondary-color: var(--lg-ink-2);
  --rz-text-tertiary-color: var(--lg-ink-3);
  --rz-text-disabled-color: var(--lg-ink-4);
  --rz-text-contrast-color: #ffffff;
  --rz-text-selection-background-color: var(--lg-blue-tint-3);
  --rz-text-selection-color: var(--lg-ink);
  --rz-link-color: var(--lg-blue);
  --rz-link-hover-color: var(--lg-blue-hover);
  --rz-link-text-decoration: none;
  --rz-link-hover-text-decoration: underline;

  /* software ships clamp()ed display sizes (H4 up to 40px). Ledger's scale is
     a 28px page title, so every RadzenText style is pinned explicitly. */
  /* The display family: software leaves these at clamp()ed Material sizes up to
     96px at weight 700. Ledger tops out at 52px and never uses 700. */
  --rz-text-display-h1-font-size: 3.25rem; --rz-text-display-h1-font-weight: 600; --rz-text-display-h1-letter-spacing: -0.022em; --rz-text-display-h1-line-height: 1.08; --rz-text-display-h1-color: var(--lg-ink);
  --rz-text-display-h2-font-size: 2.75rem; --rz-text-display-h2-font-weight: 600; --rz-text-display-h2-letter-spacing: -0.022em; --rz-text-display-h2-line-height: 1.1;  --rz-text-display-h2-color: var(--lg-ink);
  --rz-text-display-h3-font-size: 2.25rem; --rz-text-display-h3-font-weight: 600; --rz-text-display-h3-letter-spacing: -0.02em;  --rz-text-display-h3-line-height: 1.14; --rz-text-display-h3-color: var(--lg-ink);
  --rz-text-display-h4-font-size: 2rem;    --rz-text-display-h4-font-weight: 600; --rz-text-display-h4-letter-spacing: -0.018em; --rz-text-display-h4-line-height: 1.16; --rz-text-display-h4-color: var(--lg-ink);
  --rz-text-display-h5-font-size: 1.625rem; --rz-text-display-h5-font-weight: 600; --rz-text-display-h5-letter-spacing: -0.014em; --rz-text-display-h5-line-height: 1.2; --rz-text-display-h5-color: var(--lg-ink);
  --rz-text-display-h6-font-size: 1.375rem; --rz-text-display-h6-font-weight: 600; --rz-text-display-h6-letter-spacing: -0.01em;  --rz-text-display-h6-line-height: 1.25; --rz-text-display-h6-color: var(--lg-ink);
  --rz-text-h1-font-size: 2.75rem; --rz-text-h1-font-weight: 600; --rz-text-h1-letter-spacing: -0.022em; --rz-text-h1-line-height: 1.12; --rz-text-h1-color: var(--lg-ink);
  --rz-text-h2-font-size: 2.25rem; --rz-text-h2-font-weight: 600; --rz-text-h2-letter-spacing: -0.02em;  --rz-text-h2-line-height: 1.15; --rz-text-h2-color: var(--lg-ink);
  --rz-text-h3-font-size: 2rem;    --rz-text-h3-font-weight: 600; --rz-text-h3-letter-spacing: -0.018em; --rz-text-h3-line-height: 1.18; --rz-text-h3-color: var(--lg-ink);
  --rz-text-h4-font-size: 1.75rem; --rz-text-h4-font-weight: 600; --rz-text-h4-letter-spacing: -0.014em; --rz-text-h4-line-height: 1.22; --rz-text-h4-color: var(--lg-ink);
  --rz-text-h5-font-size: 1.25rem; --rz-text-h5-font-weight: 600; --rz-text-h5-letter-spacing: -0.008em; --rz-text-h5-line-height: 1.3;  --rz-text-h5-color: var(--lg-ink);
  --rz-text-h6-font-size: 1.0625rem; --rz-text-h6-font-weight: 600; --rz-text-h6-letter-spacing: -0.006em; --rz-text-h6-line-height: 1.35; --rz-text-h6-color: var(--lg-ink);
  --rz-text-subtitle1-font-size: 1rem;      --rz-text-subtitle1-font-weight: 500; --rz-text-subtitle1-letter-spacing: -0.004em; --rz-text-subtitle1-line-height: 1.45; --rz-text-subtitle1-color: var(--lg-ink);
  --rz-text-subtitle2-font-size: 0.875rem;  --rz-text-subtitle2-font-weight: 500; --rz-text-subtitle2-letter-spacing: 0;        --rz-text-subtitle2-line-height: 1.45; --rz-text-subtitle2-color: var(--lg-ink-2);
  --rz-text-body1-font-size: 0.9375rem;     --rz-text-body1-font-weight: 400; --rz-text-body1-letter-spacing: 0; --rz-text-body1-line-height: 1.5;  --rz-text-body1-color: var(--lg-ink);
  --rz-text-body2-font-size: 0.875rem;      --rz-text-body2-font-weight: 400; --rz-text-body2-letter-spacing: 0; --rz-text-body2-line-height: 1.5;  --rz-text-body2-color: var(--lg-ink);
  --rz-text-caption-font-size: 0.8125rem;   --rz-text-caption-font-weight: 400; --rz-text-caption-letter-spacing: 0; --rz-text-caption-line-height: 1.4; --rz-text-caption-color: var(--lg-ink-3);
  --rz-text-button-font-size: 0.875rem;     --rz-text-button-font-weight: 500; --rz-text-button-letter-spacing: -0.003em; --rz-text-button-line-height: 1.4; --rz-text-button-color: inherit;
  --rz-text-overline-font-size: 0.6875rem;  --rz-text-overline-font-weight: 600; --rz-text-overline-letter-spacing: .06em; --rz-text-overline-line-height: 1.3; --rz-text-overline-text-transform: uppercase; --rz-text-overline-color: var(--lg-ink-3);

  /* --- 2.5 Shape, border, elevation, motion ---------------------------- */
  --rz-border-radius: var(--lg-r-sm);
  --rz-border-radius-0: 0;
  --rz-border-radius-1: 3px;
  --rz-border-radius-2: var(--lg-r-sm);
  --rz-border-radius-3: var(--lg-r-md);
  --rz-border-radius-4: var(--lg-r-lg);
  /* 5..10 exist as utility classes (rz-border-radius-6 is on the Identity
     container) and default to 20-32px; clamp them the way shadow-5..10 clamp. */
  --rz-border-radius-5: var(--lg-r-lg);
  --rz-border-radius-6: var(--lg-r-lg);
  --rz-border-radius-7: var(--lg-r-lg);
  --rz-border-radius-8: var(--lg-r-lg);
  --rz-border-radius-9: var(--lg-r-lg);
  --rz-border-radius-10: var(--lg-r-lg);
  --rz-border-width: 1px;
  --rz-border-normal: 1px solid var(--lg-hairline);
  --rz-border-hover: 1px solid var(--lg-ink-5);
  --rz-border-focus: 1px solid var(--lg-blue);
  --rz-border-disabled: 1px solid var(--lg-hairline-soft);
  --rz-outline-width: 2px;
  --rz-outline-color: var(--lg-blue);
  --rz-outline-normal: 2px solid transparent;
  --rz-outline-focus: 2px solid var(--lg-blue);
  --rz-outline-offset: 2px;

  --rz-shadow-0: none;
  --rz-shadow-1: var(--lg-e1);
  --rz-shadow-2: var(--lg-e1);
  --rz-shadow-3: var(--lg-e2);
  --rz-shadow-4: var(--lg-e2);
  --rz-shadow-5: var(--lg-e3);
  --rz-shadow-6: var(--lg-e3);
  --rz-shadow-7: var(--lg-e4);
  --rz-shadow-8: var(--lg-e4);
  --rz-shadow-9: var(--lg-e4);
  --rz-shadow-10: var(--lg-e4);

  --rz-duration-short: var(--lg-d-fast);
  --rz-duration-medium: var(--lg-d-base);
  --rz-duration-long: var(--lg-d-slow);
  --rz-easing-emphasized: var(--lg-ease);
  --rz-easing-emphasized-decelerate: var(--lg-ease-out);
  --rz-easing-emphasized-accelerate: var(--lg-ease-inout);
  --rz-transition: var(--lg-d-fast) var(--lg-ease);
  --rz-transition-all: all var(--lg-d-fast) var(--lg-ease);
  --rz-expander-transition: var(--lg-d-base) var(--lg-ease);
  --rz-ripple-duration: 0ms;

  --rz-icon-size: 1.25rem;

  /* --- 2.6 Layout: header, sidebar, body, footer ----------------------- */
  --rz-layout-background-color: var(--lg-canvas-2);
  --rz-layout-body-background-color: var(--lg-canvas-2);
  --rz-header-background-color: var(--lg-glass-bg);
  --rz-header-color: var(--lg-ink);
  --rz-header-border: 1px solid var(--lg-glass-border);
  --rz-header-shadow: var(--lg-glass-hi);
  --rz-header-min-height: 52px;
  --rz-sidebar-width: 232px;
  --rz-sidebar-background-color: var(--lg-canvas-2);
  --rz-sidebar-color: var(--lg-ink-2);
  --rz-sidebar-border-inline-end: 1px solid var(--lg-hairline);
  --rz-footer-background-color: var(--lg-canvas);
  --rz-footer-color: var(--lg-ink-3);
  --rz-footer-border: 1px solid var(--lg-hairline);

  --rz-sidebar-toggle-background-color: transparent;
  --rz-sidebar-toggle-color: var(--lg-ink-2);
  --rz-sidebar-toggle-border: none;
  --rz-sidebar-toggle-hover-background-color: rgba(13, 20, 36, .05);
  --rz-sidebar-toggle-hover-color: var(--lg-ink);
  --rz-sidebar-toggle-hover-border-radius: var(--lg-r-sm);
  --rz-sidebar-toggle-focus-outline: 2px solid var(--lg-blue);
  --rz-sidebar-toggle-focus-outline-offset: 2px;

  --rz-scrollbar-size: 10px;
  --rz-scrollbar-color: var(--lg-ink-5);
  --rz-scrollbar-background-color: transparent;
  --rz-scrollbar-border-radius: 999px;

  /* --- 2.7 Panel menu (the rail) — incl. the nested levels the Ledger
         reference shell never had. software authored these for a dark rail. -- */
  --rz-panel-menu-font-size: 0.875rem;
  --rz-panel-menu-font-weight: 500;
  --rz-panel-menu-padding-block: 0.625rem;
  --rz-panel-menu-padding-inline: 0.625rem;
  --rz-panel-menu-item-color: var(--lg-ink-2);
  --rz-panel-menu-item-background-color: transparent;
  --rz-panel-menu-item-border: none;
  --rz-panel-menu-item-border-radius: var(--lg-r-sm);
  --rz-panel-menu-item-line-height: 1.25rem;
  --rz-panel-menu-item-padding-block: 0.4375rem;
  --rz-panel-menu-item-padding-inline: 0.5rem;
  --rz-panel-menu-item-margin-block: 0.0625rem;
  --rz-panel-menu-item-margin-inline: 0;
  --rz-panel-menu-item-hover-background-color: rgba(13, 20, 36, .045);
  --rz-panel-menu-item-hover-color: var(--lg-ink);
  --rz-panel-menu-item-active-background-color: var(--lg-canvas);
  --rz-panel-menu-item-active-color: var(--lg-ink);
  --rz-panel-menu-item-active-indicator: transparent;
  --rz-panel-menu-item-transition: background-color var(--lg-d-fast) var(--lg-ease), color var(--lg-d-fast) var(--lg-ease), box-shadow var(--lg-d-base) var(--lg-ease);
  --rz-panel-menu-icon-color: var(--lg-ink-3);
  --rz-panel-menu-icon-font-size: 1.125rem;
  --rz-panel-menu-icon-width: 1.125rem;
  --rz-panel-menu-icon-height: 1.125rem;
  --rz-panel-menu-icon-margin-inline: 0 0.625rem;
  --rz-panel-menu-item-offset: 1.75rem;
  --rz-panel-menu-2nd-level-vertical-offset: 0.125rem;
  --rz-panel-menu-icon-2nd-level-icon-size: 1rem;
  --rz-panel-menu-icon-2nd-level-margin-inline: 0 0.5rem;
  --rz-panel-menu-toggle-icon-font-size: 1.125rem;
  --rz-panel-menu-toggle-icon-opacity: .55;
  --rz-panel-menu-focus-outline: 2px solid var(--lg-blue);
  --rz-panel-menu-focus-outline-offset: -2px;

  --rz-panel-menu-item-2nd-level-color: var(--lg-ink-3);
  --rz-panel-menu-item-2nd-level-background-color: transparent;
  --rz-panel-menu-item-2nd-level-border-radius: var(--lg-r-sm);
  --rz-panel-menu-item-2nd-level-font-size: 0.8125rem;
  --rz-panel-menu-item-2nd-level-font-weight: 400;
  --rz-panel-menu-item-2nd-level-hover-background-color: rgba(13, 20, 36, .045);
  --rz-panel-menu-item-2nd-level-hover-color: var(--lg-ink);
  --rz-panel-menu-item-2nd-level-active-background-color: var(--lg-blue-tint-2);
  --rz-panel-menu-item-2nd-level-active-color: var(--lg-blue);
  --rz-panel-menu-item-2nd-level-active-font-weight: 500;
  --rz-panel-menu-item-2nd-level-margin-block: 0.0625rem;
  --rz-panel-menu-item-2nd-level-margin-inline: 0;
  --rz-panel-menu-item-2nd-level-padding-block: 0.375rem;
  --rz-panel-menu-item-2nd-level-padding-inline: 0.5rem;
  --rz-panel-menu-item-2nd-level-offset: 2.125rem;
  --rz-panel-menu-item-3rd-level-color: var(--lg-ink-3);
  --rz-panel-menu-item-3rd-level-background-color: transparent;
  --rz-panel-menu-item-3rd-level-hover-background-color: rgba(13, 20, 36, .045);
  --rz-panel-menu-item-3rd-level-hover-color: var(--lg-ink);
  --rz-panel-menu-item-3rd-level-active-background-color: var(--lg-blue-tint-2);
  --rz-panel-menu-item-3rd-level-active-color: var(--lg-blue);

  /* --- 2.8 Profile menu + menu + gravatar (header user block) ---------- */
  --rz-profile-menu-background-color: var(--lg-canvas);
  --rz-profile-menu-border: 1px solid var(--lg-hairline);
  --rz-profile-menu-border-radius: var(--lg-r-md);
  --rz-profile-menu-padding-block: 0.3125rem;
  --rz-profile-menu-padding-inline: 0.3125rem;
  --rz-profile-menu-item-hover-background-color: var(--lg-canvas-2);
  --rz-profile-menu-item-icon-color: var(--lg-ink-3);
  --rz-profile-menu-toggle-button-color: var(--lg-ink-3);
  --rz-profile-menu-top-item-background-color: transparent;
  --rz-profile-menu-item-focus-outline: 2px solid var(--lg-blue);
  --rz-context-menu-box-shadow: var(--lg-e3);
  --rz-context-menu-padding-block: 0.3125rem;
  --rz-context-menu-padding-inline: 0.3125rem;
  --rz-gravatar-border-radius: 999px;
  --rz-gravatar-box-shadow: 0 0 0 1px var(--lg-hairline);

  --rz-menu-background-color: var(--lg-canvas);
  --rz-menu-border: 1px solid var(--lg-hairline);
  --rz-menu-border-radius: var(--lg-r-md);
  --rz-menu-item-color: var(--lg-ink-2);
  --rz-menu-item-border-radius: var(--lg-r-sm);
  --rz-menu-item-padding-block: 0.375rem;
  --rz-menu-item-padding-inline: 0.625rem;
  --rz-menu-item-hover-background-color: var(--lg-canvas-2);
  --rz-menu-item-hover-color: var(--lg-ink);
  --rz-menu-item-selected-background-color: var(--lg-blue-tint-2);
  --rz-menu-item-selected-color: var(--lg-blue);
  --rz-menu-item-icon-color: var(--lg-ink-3);
  --rz-menu-item-icon-hover-color: var(--lg-ink-2);
  --rz-menu-item-transition: background-color var(--lg-d-fast) var(--lg-ease), color var(--lg-d-fast) var(--lg-ease);

  /* --- 2.9 Buttons ----------------------------------------------------- */
  --rz-button-border-radius: var(--lg-r-sm);
  --rz-button-shadow: none;
  --rz-button-hover-shadow: none;
  --rz-button-active-shadow: none;
  --rz-button-focus-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lg-blue);
  --rz-button-focus-outline: none;
  --rz-button-hover-gradient: none;
  --rz-button-active-gradient: none;
  --rz-button-focus-gradient: none;
  --rz-button-background-size: auto;
  --rz-button-hover-background-size: auto;
  --rz-button-focus-background-size: auto;
  --rz-button-active-background-size: auto;
  --rz-button-disabled-opacity: .45;
  --rz-button-size-xs: 1.5rem;
  --rz-button-size-sm: 1.875rem;   /* 30 */
  --rz-button-size-md: 2.25rem;    /* 36 */
  --rz-button-size-lg: 2.75rem;    /* 44 */
  --rz-button-transition: background-color var(--lg-d-fast) var(--lg-ease), border-color var(--lg-d-fast) var(--lg-ease), color var(--lg-d-fast) var(--lg-ease), box-shadow var(--lg-d-fast) var(--lg-ease), transform var(--lg-d-fast) var(--lg-ease);

  /* --- 2.10 Inputs. The per-size variables must be set too: software's
          .rz-input-xs/sm/md/lg re-declare height/padding/font-size from them,
          so a bare --rz-input-height is a silent no-op. ------------------ */
  --rz-input-height: 2.25rem;
  --rz-input-size-xs: 1.5rem;
  --rz-input-size-sm: 1.875rem;
  --rz-input-size-md: 2.25rem;
  --rz-input-size-lg: 2.75rem;
  --rz-input-font-size: 0.875rem;
  --rz-input-font-size-xs: 0.75rem;
  --rz-input-font-size-sm: 0.8125rem;
  --rz-input-font-size-md: 0.875rem;
  --rz-input-font-size-lg: 0.9375rem;
  --rz-input-padding-block: 0.4375rem;
  --rz-input-padding-block-xs: 0.125rem;
  --rz-input-padding-block-sm: 0.25rem;
  --rz-input-padding-block-md: 0.4375rem;
  --rz-input-padding-block-lg: 0.5625rem;
  --rz-input-padding-inline: 0.75rem;
  --rz-input-padding-inline-xs: 0.375rem;
  --rz-input-padding-inline-sm: 0.5rem;
  --rz-input-padding-inline-md: 0.75rem;
  --rz-input-padding-inline-lg: 0.875rem;
  --rz-input-border-radius: var(--lg-r-sm);
  --rz-input-background-color: var(--lg-canvas);
  --rz-input-value-color: var(--lg-ink);
  /* ink-3, not ink-4: Radzen's floated FormField label reuses this variable,
     and ink-4 gives both the placeholder and the label about 2.5:1. */
  --rz-input-placeholder-color: var(--lg-ink-3);
  --rz-input-border: 1px solid var(--lg-hairline);
  --rz-input-border-block-end: 1px solid var(--lg-hairline);
  --rz-input-shadow: var(--lg-inset);
  --rz-input-hover-background-color: var(--lg-canvas);
  --rz-input-hover-border: 1px solid var(--lg-ink-5);
  --rz-input-hover-border-block-end: 1px solid var(--lg-ink-5);
  --rz-input-hover-shadow: var(--lg-inset);
  --rz-input-focus-background-color: var(--lg-canvas);
  --rz-input-focus-border: 1px solid var(--lg-blue);
  --rz-input-focus-border-block-end: 1px solid var(--lg-blue);
  --rz-input-focus-shadow: 0 0 0 3px var(--lg-blue-ring);
  --rz-input-focus-outline: none;
  --rz-input-focus-outline-offset: 0;
  --rz-input-disabled-background-color: var(--lg-canvas-2);
  --rz-input-disabled-border: 1px solid var(--lg-hairline-soft);
  --rz-input-disabled-border-block-end: 1px solid var(--lg-hairline-soft);
  --rz-input-disabled-color: var(--lg-ink-4);
  --rz-input-disabled-placeholder-color: var(--lg-ink-4);
  --rz-input-disabled-shadow: none;
  --rz-input-disabled-opacity: 1;
  --rz-input-transition: border-color var(--lg-d-fast) var(--lg-ease), box-shadow var(--lg-d-base) var(--lg-ease), background-color var(--lg-d-fast) var(--lg-ease);

  --rz-text-area-padding-block: 0.5rem;
  --rz-text-area-padding-inline: 0.75rem;
  --rz-numeric-button-background-color: transparent;
  --rz-numeric-button-color: var(--lg-ink-3);
  --rz-numeric-button-border-radius: 4px;
  --rz-numeric-button-disabled-color: var(--lg-ink-5);

  /* --- 2.11 FormField -------------------------------------------------- */
  /* These three land on .rz-form-field-content, which is also the element that
     carries the outlined BORDER (from --rz-input-border / -hover- / -focus-).
     So the shadows only supply depth and the focus ring — the border itself is
     already handled, and adding a ring here too draws a second edge. */
  --rz-form-field-shadow: var(--lg-inset);
  --rz-form-field-hover-shadow: var(--lg-inset);
  --rz-form-field-focus-shadow: var(--lg-inset), 0 0 0 3px var(--lg-blue-ring);
  /* Do NOT add --rz-form-field-label-color: Radzen 11 never reads it. The
     label's colour is four different things — resting inherits (set by a rule
     in section 6), floating takes --rz-input-placeholder-color, focused takes
     the variable below, and invalid/disabled are fixed with !important. */
  --rz-form-field-label-focus-color: var(--lg-blue);
  --rz-form-field-label-floating-background-color: var(--lg-canvas);
  --rz-form-field-filled-background-color: var(--lg-canvas-2);
  --rz-form-field-filled-border: 1px solid var(--lg-hairline);
  --rz-form-field-filled-border-radius: var(--lg-r-sm);
  --rz-form-field-filled-hover-background-color: var(--lg-canvas-3);
  --rz-form-field-filled-hover-border: 1px solid var(--lg-ink-5);
  --rz-form-field-filled-hover-shadow: none;
  --rz-form-field-filled-focus-border: 1px solid var(--lg-blue);
  --rz-form-field-filled-focus-shadow: 0 0 0 3px var(--lg-blue-ring);
  --rz-form-field-filled-underline-display: none;

  /* --- 2.12 Dropdown / listbox / autocomplete: software points item
          hover+selected at --rz-secondary-*, which would be ink slabs. ---- */
  --rz-dropdown-item-hover-background-color: var(--lg-canvas-2);
  --rz-dropdown-item-hover-color: var(--lg-ink);
  --rz-dropdown-item-selected-background-color: var(--lg-blue-tint-2);
  --rz-dropdown-item-selected-color: var(--lg-blue);
  --rz-dropdown-item-selected-hover-background-color: var(--lg-blue-tint-3);
  --rz-dropdown-item-selected-hover-color: var(--lg-blue-active);
  --rz-dropdown-item-selected-shadow: none;
  --rz-dropdown-item-padding: 0.375rem 0.625rem;
  --rz-dropdown-item-font-size: 0.875rem;
  --rz-dropdown-item-transition: background-color var(--lg-d-fast) var(--lg-ease), color var(--lg-d-fast) var(--lg-ease);
  --rz-dropdown-panel-border: 1px solid var(--lg-hairline);
  --rz-dropdown-panel-shadow: var(--lg-e3);
  --rz-dropdown-panel-padding: 0.25rem;
  --rz-dropdown-open-background-color: var(--lg-canvas);
  --rz-dropdown-open-border: 1px solid var(--lg-blue);
  --rz-dropdown-filter-border: 1px solid var(--lg-hairline);
  --rz-listbox-background-color: var(--lg-canvas);
  --rz-listbox-border: 1px solid var(--lg-hairline);
  --rz-listbox-border-radius: var(--lg-r-sm);
  --rz-listbox-focus-border: 1px solid var(--lg-blue);
  --rz-listbox-focus-shadow: 0 0 0 3px var(--lg-blue-ring);
  --rz-listbox-filter-border: 1px solid var(--lg-hairline);

  /* --- 2.13 Date picker ------------------------------------------------ */
  --rz-datepicker-trigger-icon-color: var(--lg-ink-3);
  --rz-datepicker-trigger-icon-hover-color: var(--lg-ink);
  --rz-datepicker-panel-background-color: var(--lg-canvas);
  --rz-datepicker-panel-border: 1px solid var(--lg-hairline);
  --rz-datepicker-panel-shadow: var(--lg-e3);
  --rz-datepicker-header-background-color: var(--lg-canvas);
  --rz-datepicker-header-color: var(--lg-ink);
  --rz-datepicker-header-border: 1px solid var(--lg-hairline-soft);
  --rz-datepicker-calendar-border: none;
  --rz-datepicker-calendar-header-color: var(--lg-ink-3);
  --rz-datepicker-calendar-header-text-transform: none;
  --rz-datepicker-calendar-color: var(--lg-ink);
  --rz-datepicker-calendar-hover-background-color: var(--lg-canvas-2);
  --rz-datepicker-calendar-hover-color: var(--lg-ink);
  --rz-datepicker-calendar-selected-background-color: var(--lg-blue);
  --rz-datepicker-calendar-selected-color: #ffffff;
  --rz-datepicker-calendar-selected-hover-background-color: var(--lg-blue-hover);
  --rz-datepicker-calendar-selected-hover-color: #ffffff;
  --rz-datepicker-calendar-today-background-color: var(--lg-blue-tint-2);
  --rz-datepicker-calendar-today-color: var(--lg-blue);
  --rz-datepicker-calendar-today-box-shadow: none;
  --rz-datepicker-calendar-transition: background-color var(--lg-d-fast) var(--lg-ease);
  --rz-datepicker-focus-outline: 2px solid var(--lg-blue);

  /* --- 2.14 Selection controls ----------------------------------------- */
  --rz-checkbox-width: 1rem;
  --rz-checkbox-height: 1rem;
  --rz-checkbox-border-radius: 4px;
  --rz-checkbox-border-width: 1px;
  --rz-checkbox-background-color: var(--lg-canvas);
  --rz-checkbox-border: 1px solid var(--lg-ink-5);
  --rz-checkbox-hover-border: 1px solid var(--lg-ink-4);
  --rz-checkbox-checked-background-color: var(--lg-blue);
  --rz-checkbox-checked-border: 1px solid var(--lg-blue);
  --rz-checkbox-checked-color: #ffffff;
  --rz-checkbox-checked-hover-background-color: var(--lg-blue-hover);
  --rz-checkbox-checked-hover-border: 1px solid var(--lg-blue-hover);
  --rz-checkbox-checked-icon-background-color: var(--lg-blue);
  --rz-checkbox-checked-shadow: none;
  --rz-checkbox-checked-disabled-background-color: var(--lg-ink-5);
  --rz-checkbox-checked-disabled-border: 1px solid var(--lg-ink-5);
  --rz-checkbox-focus-outline: 2px solid var(--lg-blue);
  --rz-checkbox-focus-outline-offset: 2px;
  --rz-switch-background-color: var(--lg-ink-5);
  --rz-switch-checked-background-color: var(--lg-blue);
  --rz-switch-circle-background-color: #ffffff;
  --rz-switch-checked-circle-background-color: #ffffff;
  --rz-switch-box-shadow: 0 1px 2px rgba(13, 20, 36, .2);
  --rz-switch-focus-outline: 2px solid var(--lg-blue);
  --rz-switch-focus-outline-offset: 2px;
  --rz-radio-border-width: 1px;
  --rz-radio-circle-background-color: var(--lg-canvas);
  --rz-radio-circle-hover-background-color: var(--lg-canvas-2);
  --rz-radio-circle-shadow: inset 0 0 0 1px var(--lg-ink-5);
  --rz-radio-checked-background-color: var(--lg-blue);
  --rz-radio-checked-border: 1px solid var(--lg-blue);
  --rz-radio-checked-color: #ffffff;
  --rz-radio-checked-hover-background-color: var(--lg-blue-hover);
  --rz-radio-checked-hover-shadow: none;
  --rz-radio-active-background-color: var(--lg-blue-tint-2);
  --rz-radio-active-shadow: none;
  --rz-radio-focus-outline: 2px solid var(--lg-blue);
  --rz-radio-focus-outline-offset: 2px;

  /* --- 2.15 Data grid -------------------------------------------------- */
  --rz-grid-background-color: var(--lg-canvas);
  --rz-grid-border: none;
  --rz-grid-border-radius: var(--lg-r-lg);
  --rz-grid-shadow: var(--lg-e2);
  --rz-grid-data-border-shadow: none;
  --rz-grid-header-background-color: var(--lg-glass-bg-2);
  --rz-grid-header-sorted-background-color: var(--lg-glass-bg-2);
  --rz-grid-header-color: var(--lg-ink-3);
  --rz-grid-header-font-size: 0.8125rem;
  --rz-grid-header-font-weight: 500;
  --rz-grid-header-line-height: 1.25rem;
  --rz-grid-header-text-transform: none;
  --rz-grid-header-cell-border: none;
  --rz-grid-header-cell-border-bottom: 1px solid var(--lg-hairline);
  --rz-grid-header-cell-padding: 0.625rem 0;
  --rz-grid-header-title-padding-inline: 0.875rem 0;
  --rz-grid-header-padding: 0.625rem 0.875rem;
  --rz-grid-cell-padding: 0 0.875rem;
  --rz-grid-cell-font-size: 0.875rem;
  --rz-grid-cell-line-height: 1.5rem;
  --rz-grid-cell-color: var(--lg-ink);
  --rz-grid-cell-border: 1px solid var(--lg-hairline-soft);
  --rz-grid-right-cell-border: none;             /* no vertical hairlines */
  --rz-grid-bottom-cell-border: 1px solid var(--lg-hairline-soft);
  --rz-grid-frozen-cell-background-color: var(--lg-canvas);
  --rz-grid-frozen-cell-border: none;
  --rz-grid-hover-background-color: var(--lg-canvas-2);
  --rz-grid-hover-color: var(--lg-ink);
  --rz-grid-selected-background-color: var(--lg-blue-tint-1);
  --rz-grid-selected-color: var(--lg-ink);
  --rz-grid-stripe-background-color: var(--lg-canvas);      /* no zebra */
  --rz-grid-stripe-odd-background-color: var(--lg-canvas);
  --rz-grid-frozen-stripe-background-color: var(--lg-canvas);
  --rz-grid-frozen-stripe-odd-background-color: var(--lg-canvas);
  --rz-grid-foot-background-color: var(--lg-glass-bg-3);
  --rz-grid-foot-cell-color: var(--lg-ink);
  --rz-grid-sort-icon-color: var(--lg-blue);
  --rz-grid-sort-icon-width: 1rem;
  --rz-grid-sort-icon-height: 1rem;
  --rz-grid-cell-focus-outline: 2px solid var(--lg-blue);
  --rz-grid-cell-focus-outline-offset: -2px;
  --rz-grid-cell-focus-background-color: var(--lg-blue-tint-1);
  --rz-grid-cell-focus-color: var(--lg-ink);
  --rz-grid-focus-outline: none;
  --rz-grid-focus-outline-offset: -2px;
  --rz-grid-state-transition: background-color var(--lg-d-fast) var(--lg-ease);
  --rz-grid-column-resizer-helper-background-color: var(--lg-blue);
  --rz-grid-column-resizer-helper-width: 1px;
  --rz-grid-column-resizer-width: 8px;
  --rz-grid-toolbar-background-color: var(--lg-canvas);
  --rz-grid-loading-indicator-background-color: var(--lg-canvas);
  --rz-grid-loading-indicator-background-opacity: .7;
  --rz-grid-loading-indicator-color: var(--lg-blue);
  --rz-column-drag-handle-color: var(--lg-ink-4);
  --rz-column-drag-handle-hover-color: var(--lg-ink-2);
  --rz-column-draggable-shadow: var(--lg-e3);

  /* Grid filter row / menu — not covered by the Ledger reference page. */
  --rz-grid-header-filter-icon-color: var(--lg-ink-4);
  --rz-grid-header-filter-icon-hover-color: var(--lg-ink-2);
  --rz-grid-header-filter-icon-active-color: var(--lg-blue);
  --rz-grid-header-filter-icon-font-size: 1rem;
  --rz-grid-filter-background-color: var(--lg-canvas);
  --rz-grid-filter-border: 1px solid var(--lg-hairline);
  --rz-grid-filter-color: var(--lg-ink);
  --rz-grid-filter-focus-color: var(--lg-ink);
  --rz-grid-filter-font-size: 0.8125rem;
  --rz-grid-filter-padding: 0.3125rem 0.5rem;
  --rz-grid-filter-buttons-background-color: var(--lg-canvas-2);
  --rz-grid-filter-buttons-border: 1px solid var(--lg-hairline);
  --rz-grid-apply-filter-button-background-color: var(--lg-blue);
  --rz-grid-apply-filter-button-color: #ffffff;
  --rz-grid-apply-filter-button-shadow: none;
  --rz-grid-clear-filter-button-background-color: var(--lg-canvas);
  --rz-grid-clear-filter-button-color: var(--lg-ink-2);
  --rz-grid-clear-filter-button-shadow: none;
  --rz-grid-simple-filter-icon-active-background-color: var(--lg-blue-tint-2);
  --rz-grid-simple-filter-icon-active-color: var(--lg-blue);
  --rz-grid-group-header-item-background-color: var(--lg-canvas-2);
  --rz-grid-group-header-item-border: 1px solid var(--lg-hairline);
  --rz-grid-group-header-item-border-radius: var(--lg-r-sm);
  --rz-grid-group-header-item-color: var(--lg-ink-2);
  --rz-grid-detail-template-background-color: var(--lg-canvas-2);
  --rz-grid-detail-template-border: 1px solid var(--lg-hairline-soft);
  --rz-grid-detail-template-border-radius: var(--lg-r-md);

  /* --- 2.16 Pager ------------------------------------------------------ */
  --rz-pager-background-color: var(--lg-canvas);
  --rz-pager-border: 1px solid var(--lg-hairline);
  --rz-pager-padding: 0.5rem 0.875rem;
  --rz-pager-gap: 0.25rem;
  --rz-pager-summary-color: var(--lg-ink-3);
  --rz-pager-summary-font-size: 0.8125rem;
  --rz-pager-button-border-radius: 5px;
  --rz-pager-numeric-button-background-color: transparent;
  --rz-pager-numeric-button-color: var(--lg-ink-2);
  --rz-pager-numeric-button-border: none;
  --rz-pager-numeric-button-hover-background-color: var(--lg-canvas-2);
  --rz-pager-numeric-button-hover-color: var(--lg-ink);
  --rz-pager-numeric-button-selected-background-color: var(--lg-blue-tint-2);
  --rz-pager-numeric-button-selected-color: var(--lg-blue);
  --rz-pager-numeric-button-selected-border: none;
  --rz-pager-numeric-button-min-width: 1.75rem;
  --rz-pager-back-button-background-color: transparent;
  --rz-pager-back-button-color: var(--lg-ink-2);
  --rz-pager-next-button-background-color: transparent;
  --rz-pager-next-button-color: var(--lg-ink-2);

  /* --- 2.17 Cards, panels, accordion, tabs, steps ---------------------- */
  --rz-card-background-color: var(--lg-canvas);
  --rz-card-flat-background-color: var(--lg-canvas-2);
  --rz-card-border-radius: var(--lg-r-md);
  --rz-card-shadow: var(--lg-e1);
  --rz-card-border: none;
  --rz-card-padding: 1rem 1.125rem;
  --rz-panel-background-color: var(--lg-canvas);
  /* No --rz-panel-border exists in v11, and a real `border` on .rz-panel would
     eat 2px of the inner content box inside the full-height flex chain. The
     hairline rides in the shadow instead, which changes no box metrics. */
  --rz-panel-border-radius: var(--lg-r-md);
  --rz-panel-shadow: var(--lg-e1), 0 0 0 1px var(--lg-hairline);
  --rz-panel-padding: 1rem 1.125rem;
  --rz-panel-title-font-weight: 600;
  --rz-panel-hover-color: var(--lg-ink);
  --rz-panel-toggle-icon-background-color: transparent;
  --rz-panel-toggle-icon-border-radius: var(--lg-r-sm);
  --rz-accordion-item-background-color: var(--lg-canvas);
  --rz-accordion-item-color: var(--lg-ink);
  --rz-accordion-item-border: 1px solid var(--lg-hairline);
  --rz-accordion-item-font-size: 0.9375rem;
  --rz-accordion-item-font-weight: 500;
  --rz-accordion-border-radius: var(--lg-r-md);
  --rz-accordion-shadow: var(--lg-e1);
  --rz-accordion-selected-color: var(--lg-ink);
  --rz-accordion-hover-color: var(--lg-blue);
  --rz-accordion-item-focus-outline: 2px solid var(--lg-blue);

  --rz-tabs-background-color: transparent;
  --rz-tabs-border: 1px solid var(--lg-hairline);
  --rz-tabs-border-radius: 0;
  --rz-tabs-shadow: none;
  --rz-tabs-padding: 0;
  --rz-tabs-tab-background-color: transparent;
  --rz-tabs-tab-font-size: 0.875rem;
  --rz-tabs-tab-font-weight: 500;
  --rz-tabs-tab-text-transform: none;
  --rz-tabs-tab-letter-spacing: 0;
  --rz-tabs-tab-line-height: 1.4;
  --rz-tabs-tab-color: var(--lg-ink-3);
  --rz-tabs-tab-hover-color: var(--lg-ink);
  --rz-tabs-tab-hover-background-color: transparent;
  --rz-tabs-tab-selected-color: var(--lg-ink);
  --rz-tabs-tab-selected-background-color: transparent;
  /* software draws tabs as folder tabs with a coloured TOP edge. Ledger uses a
     bottom rule instead, so the top accent is switched off and the underline is
     drawn in section 7.9. */
  --rz-tabs-tab-selected-top-border-color: transparent;
  --rz-tabs-tab-focus-background-color: transparent;
  --rz-tabs-tab-focus-color: var(--lg-ink);
  --rz-tabs-tab-focus-outline: 2px solid var(--lg-blue);
  --rz-tabs-tab-focus-outline-offset: -2px;
  --rz-tabs-tab-padding-block: 0.5rem;
  --rz-tabs-tab-padding-inline: 0.75rem;
  --rz-tabs-transition: color var(--lg-d-fast) var(--lg-ease);

  /* Exact v11 names: the selected number uses -selected-background (no -color
     suffix), and there is no --rz-steps-title-color / -line-color at all. */
  --rz-steps-color: var(--lg-ink-3);
  --rz-steps-number-background-color: var(--lg-canvas-3);
  --rz-steps-number-color: var(--lg-ink-3);
  --rz-steps-number-selected-background: var(--lg-blue);
  --rz-steps-number-selected-color: #ffffff;
  --rz-steps-number-focus-outline: 2px solid var(--lg-blue);
  --rz-steps-title-selected-color: var(--lg-ink);
  --rz-steps-button-color: var(--lg-ink-2);

  /* Slider. software points the handle at --rz-secondary (ink here) and the
     filled range at --rz-secondary-lighter, which renders as a dark tab on an
     invisible track. */
  --rz-slider-background-color: var(--lg-canvas-3);
  --rz-slider-border: none;
  --rz-slider-border-radius: 999px;
  --rz-slider-horizontal-height: 0.375rem;
  --rz-slider-range-background-color: var(--lg-blue);
  --rz-slider-range-border: none;
  --rz-slider-handle-width: 1rem;
  --rz-slider-handle-height: 1rem;
  --rz-slider-handle-border-radius: 50%;
  --rz-slider-handle-background-color: var(--lg-canvas);
  --rz-slider-handle-border: none;
  --rz-slider-handle-color: var(--lg-blue);
  --rz-slider-handle-shadow: 0 0 0 1px var(--lg-blue), 0 1px 2px rgba(13, 20, 36, .18);
  --rz-slider-handle-hover-background-color: var(--lg-canvas);
  --rz-slider-handle-hover-border: none;
  --rz-slider-handle-hover-shadow: 0 0 0 1px var(--lg-blue), 0 0 0 4px var(--lg-blue-ring);
  --rz-slider-handle-focus-outline: 2px solid var(--lg-blue);
  --rz-slider-disabled-background-color: var(--lg-canvas-3);
  --rz-slider-disabled-border: none;
  --rz-slider-disabled-range-background-color: var(--lg-ink-5);
  --rz-slider-disabled-handle-background-color: var(--lg-ink-5);
  --rz-slider-disabled-handle-border: none;

  /* Rating: unselected stars come from --rz-secondary (ink) by default. */
  --rz-rating-color: var(--lg-ink-5);
  --rz-rating-selected-color: var(--lg-blue);
  --rz-rating-focus-color: var(--lg-blue-active);
  --rz-rating-ban-icon-color: var(--lg-ink-4);
  --rz-rating-disabled-color: var(--lg-ink-5);

  /* Note Radzen's own typo: --rz-selectbar-backgorund-color. The correctly
     spelled variable below is the one the component reads for the track. */
  --rz-selectbar-focus-outline: 2px solid var(--lg-blue);
  --rz-selectbar-button-focus-outline: 2px solid var(--lg-blue);

  /* --- 2.18 Badge, alert, validator ------------------------------------ */
  --rz-badge-font-size: 0.75rem;
  --rz-badge-font-weight: 500;
  --rz-badge-letter-spacing: 0;
  --rz-badge-text-transform: none;
  --rz-badge-line-height: 1.375rem;
  --rz-badge-padding: 0 0.5rem 0 0.4375rem;
  --rz-badge-pill-padding: 0 0.5rem 0 0.4375rem;
  --rz-badge-border-radius: 999px;
  --rz-badge-pill-border-radius: 999px;

  --rz-alert-border-radius: var(--lg-r-md);
  --rz-alert-box-shadow: none;
  --rz-alert-padding: 0.75rem 0.875rem;
  --rz-alert-margin: 0;
  --rz-alert-gap: 0.625rem;
  --rz-alert-icon-size: 1.125rem;
  --rz-alert-icon-margin: 0.0625rem 0;
  --rz-alert-message-margin: 0.125rem 0;
  --rz-alert-title-color: inherit;
  --rz-alert-icon-color: currentColor;

  --rz-validator-background-color: var(--lg-danger);
  --rz-validator-color: #ffffff;
  --rz-validator-padding: 0.25rem 0.4375rem;
  --rz-validator-shadow: var(--lg-e2);

  /* --- 2.19 Overlays: dialog, notification, tooltip -------------------- */
  --rz-overlay-background-color: var(--lg-canvas);
  --rz-overlay-border: 1px solid var(--lg-hairline);
  --rz-overlay-shadow: var(--lg-e3);
  --rz-dialog-background-color: var(--lg-canvas);
  --rz-dialog-border-radius: var(--lg-r-lg);
  --rz-dialog-shadow: var(--lg-e4);
  --rz-dialog-mask-background-color: rgba(13, 20, 36, .28);
  --rz-dialog-title-background-color: var(--lg-canvas);
  --rz-dialog-title-color: var(--lg-ink);
  --rz-dialog-title-font-size: 1.0625rem;
  --rz-dialog-title-font-weight: 600;
  --rz-dialog-title-letter-spacing: -0.006em;
  --rz-dialog-title-border: none;
  --rz-dialog-close-color: var(--lg-ink-3);
  --rz-dialog-close-hover-color: var(--lg-ink);
  --rz-dialog-content-padding: 0 1.5rem 1.25rem;
  --rz-dialog-transition: opacity var(--lg-d-base) var(--lg-ease-out), transform var(--lg-d-base) var(--lg-ease-out);
  --rz-dialog-resize-bar-background-color: var(--lg-hairline);
  --rz-dialog-resize-bar-color: var(--lg-ink-4);

  --rz-notification-border-radius: var(--lg-r-md);
  --rz-notification-shadow: var(--lg-e3);
  --rz-notification-padding: 0.625rem 0.75rem;
  --rz-notification-gap: 0.5rem;
  --rz-notification-container-background-color: transparent;
  --rz-notification-success-background-color: var(--lg-ink);
  --rz-notification-success-color: #ffffff;
  --rz-notification-success-icon-color: #4fc27f;
  --rz-notification-info-background-color: var(--lg-ink);
  --rz-notification-info-color: #ffffff;
  --rz-notification-info-icon-color: #8fb0ff;
  --rz-notification-warning-background-color: var(--lg-ink);
  --rz-notification-warning-color: #ffffff;
  --rz-notification-warning-icon-color: #e6b35a;
  --rz-notification-error-background-color: var(--lg-ink);
  --rz-notification-error-color: #ffffff;
  --rz-notification-error-icon-color: #f08a8e;

  --rz-tooltip-background-color: var(--lg-ink);
  --rz-tooltip-color: #ffffff;
  --rz-tooltip-font-size: 0.75rem;
  --rz-tooltip-padding: 0.3125rem 0.5rem;
  --rz-tooltip-border-radius: 5px;
  --rz-tooltip-shadow: var(--lg-e2);

  /* --- 2.20 Select bar, progress, splitter, tree, upload, editor ------- */
  --rz-selectbar-background-color: var(--lg-canvas-3);
  --rz-selectbar-border: none;
  --rz-selectbar-border-radius: 7px;
  --rz-selectbar-color: var(--lg-ink-2);   /* ink-3 on canvas-3 is 4.3:1 */
  --rz-selectbar-selected-background-color: var(--lg-canvas);
  --rz-selectbar-selected-color: var(--lg-ink);
  --rz-selectbar-selected-border: none;

  --rz-progressbar-background-color: var(--lg-canvas-3);
  --rz-progressbar-color: var(--lg-ink-2);
  --rz-progressbar-value-background-color: var(--lg-blue);
  --rz-progressbar-border-radius: 999px;
  --rz-progressbar-value-transition: width var(--lg-d-slow) var(--lg-ease-out);
  --rz-progressbar-circular-stroke-width: 3;
  --rz-progressbar-circular-value-stroke-width: 3;

  --rz-splitter-bar-background-color: var(--lg-canvas-2);
  --rz-splitter-bar-background-color-active: var(--lg-blue-tint-2);
  --rz-splitter-bar-color: var(--lg-ink-4);
  --rz-splitter-bar-color-active: var(--lg-blue);

  --rz-tree-background-color: var(--lg-canvas);
  --rz-tree-node-hover-background-color: var(--lg-canvas-2);
  --rz-tree-node-hover-color: var(--lg-ink);
  --rz-tree-node-selected-background-color: var(--lg-blue-tint-2);
  --rz-tree-node-selected-color: var(--lg-blue);
  --rz-tree-node-selected-border-radius: var(--lg-r-sm);
  --rz-tree-node-toggle-color: var(--lg-ink-4);
  --rz-tree-node-toggle-hover-color: var(--lg-ink-2);
  --rz-tree-node-focus-outline: 2px solid var(--lg-blue);

  --rz-upload-choose-background-color: var(--lg-canvas);
  --rz-upload-choose-color: var(--lg-ink);
  --rz-upload-choose-hover-background-color: var(--lg-canvas-2);
  --rz-upload-choose-hover-color: var(--lg-ink);
  --rz-upload-choose-active-background-color: var(--lg-canvas-3);
  --rz-upload-choose-active-color: var(--lg-ink);
  --rz-upload-button-background-color: var(--lg-blue);
  --rz-upload-button-bar-background-color: var(--lg-canvas-3);
  --rz-upload-button-bar-border-radius: var(--lg-r-sm);
  --rz-upload-cancel-background-color: var(--lg-canvas);
  --rz-upload-cancel-color: var(--lg-ink-2);
  --rz-upload-files-background-color: var(--lg-canvas);
  --rz-upload-files-remove-background-color: transparent;
  --rz-upload-files-remove-color: var(--lg-ink-3);

  --rz-editor-border: 1px solid var(--lg-hairline);
  --rz-editor-border-radius: var(--lg-r-sm);
  --rz-editor-content-background-color: var(--lg-canvas);
  --rz-editor-toolbar-background-color: var(--lg-canvas-2);
  --rz-editor-focus-outline: 2px solid var(--lg-blue);

  /* --- 2.21 Charts. One categorical ramp, deep enough to clear 3:1 on
          white, with no hue that reads as a second brand accent. --------- */
  --rz-series-1:  #1a4edb;   /* Signal Blue */
  --rz-series-2:  #0e7c86;   /* deep teal */
  --rz-series-3:  #a8690b;   /* amber */
  --rz-series-4:  #167a45;   /* green */
  --rz-series-5:  #7b3fb5;   /* violet */
  --rz-series-6:  #c0272d;   /* red */
  --rz-series-7:  #3b4457;   /* ink-2 */
  --rz-series-8:  #b8456f;   /* magenta */
  --rz-series-9:  #5b82e8;
  --rz-series-10: #3fa3ab;
  --rz-series-11: #c99a4a;
  --rz-series-12: #4fa574;
  --rz-series-13: #a173d1;
  --rz-series-14: #d66a6e;
  --rz-series-15: #6a7385;
  --rz-series-16: #d1799b;
  --rz-series-17: #9bb4f2;
  --rz-series-18: #86c6cb;
  --rz-series-19: #dcc9a4;
  --rz-series-20: #91c4a8;
  --rz-series-21: #c3a6e0;
  --rz-series-22: #e8a6a8;
  --rz-series-23: #9aa3b4;
  --rz-series-24: #e3adc0;

  --rz-chart-axis-color: var(--lg-hairline);
  --rz-chart-grid-line-color: var(--lg-hairline);   /* set, not derived */
  --rz-chart-axis-label-color: var(--lg-ink-3);
  --rz-chart-axis-font-size: 0.75rem;
  --rz-chart-title-color: var(--lg-ink-2);
  /* Charts read --rz-chart-tooltip-*, NOT --rz-tooltip-*. Left light on
     purpose: the pie's data-label chips reuse this same fill. */
  --rz-chart-tooltip-background: var(--lg-canvas);
  --rz-chart-tooltip-color: var(--lg-ink);
  --rz-chart-tooltip-border-radius: var(--lg-r-sm);
  --rz-chart-tooltip-font-size: 0.8125rem;
  --rz-chart-tooltip-item-hover-background-color: var(--lg-canvas-2);
}


/* ---------------------------------------------------------------------------
   3. BASE
   Radzen never sets font-family on html/body, so site.css's Helvetica is the
   live app font until this rule lands. Without it, RadzenText would be Plex
   and every grid cell, input and label would stay Helvetica.
   --------------------------------------------------------------------------- */
html,
body {
  font-family: var(--lg-font-ui);
  background: var(--lg-canvas-2);
  color: var(--lg-ink);
  font-size: 0.9375rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

::selection { background: var(--lg-blue-tint-3); color: var(--lg-ink); }

* { scrollbar-color: var(--lg-ink-5) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--lg-ink-5); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--lg-ink-4); background-clip: content-box; }

/* Mono for every value: identifiers, amounts, dates, codes. */
.lg-mono, .lg-id, .lg-num, .lg-date, .lg-total {
  font-family: var(--lg-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}
.lg-muted { color: var(--lg-ink-3); }
.lg-overline {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--lg-ink-3);
}

/* The error pages render outside RadzenLayout, so no rz-scoped rule reaches
   them. Their headings are NOT direct children of body, so target them the same
   way the page titles are targeted (section 11.1) plus the bare elements. */
#blazor-main-body h1 { font-family: var(--lg-font-ui); color: var(--lg-ink); }


/* ---------------------------------------------------------------------------
   4. APP SHELL
   --------------------------------------------------------------------------- */

/* 4.1 Glass header. */
.rz-header {
  position: sticky;
  top: 0;
  -webkit-backdrop-filter: var(--lg-glass-blur);
  backdrop-filter: var(--lg-glass-blur);
  border-bottom: 1px solid var(--lg-glass-border);
  box-shadow: var(--lg-glass-hi);
}

/* 4.2 The logo. Logo-weiss.png is a pure-white silhouette on transparency, so
       it is invisible on any light header — including the software theme's,
       where it is already invisible today. brightness(0) paints the alpha
       shape ink; opacity trims it to the ink tone. Scoped to the link so the
       user avatar in the same header is untouched. */
.rz-header .rz-link .rz-image,
.rz-header .rz-link img {
  filter: brightness(0);
  opacity: .9;
  transition: opacity var(--lg-d-base) var(--lg-ease);
}
.rz-header .rz-link:hover .rz-image,
.rz-header .rz-link:hover img { opacity: 1; }

/* 4.3 The rail. .rz-panel-menu paints its own background from
       --rz-panel-menu-item-background-color, so the sidebar variable alone
       changes nothing visible. */
.rz-sidebar { padding: 0; }
.rz-sidebar .rz-panel-menu { background: transparent; padding-block: .625rem; }

/* Active item: a white plate raised off the rail with a blue icon.
   IMPORTANT, and the reason this is not a variable: in Radzen 11 a URL-matched
   panel-menu item gets only `.active` on its <a class="rz-navigation-item-link">.
   The classes software.css styles — .rz-navigation-item-active and
   .rz-navigation-item-wrapper-active — are never applied here, which is why the
   app has no "you are here" state in the rail today. Painting the link itself
   both fixes that and avoids needing :has(). */
.rz-panel-menu .rz-navigation-item-wrapper {
  border-radius: var(--lg-r-sm);
  transition: background-color var(--lg-d-fast) var(--lg-ease),
              color var(--lg-d-fast) var(--lg-ease),
              box-shadow var(--lg-d-base) var(--lg-ease);
}
/* .rz-navigation-item and its wrapper both clip overflow, which would cut the
   plate's soft drop. The 4px active indicator they clip is transparent here. */
.rz-panel-menu > .rz-navigation-item,
.rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper { overflow: visible; }

.rz-panel-menu .rz-navigation-item-link {
  border-radius: var(--lg-r-sm);
  transition: background-color var(--lg-d-fast) var(--lg-ease),
              color var(--lg-d-fast) var(--lg-ease),
              box-shadow var(--lg-d-base) var(--lg-ease);
}
.rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link.active {
  background: var(--lg-canvas);
  color: var(--lg-ink);
  font-weight: 600;
  box-shadow: var(--lg-e1);
}
.rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link.active .rz-navigation-item-icon {
  color: var(--lg-blue);
}

/* Nested items: a quiet indent rule instead of software's dark blocks, and a
   tint rather than a plate for the active child. */
.rz-panel-menu .rz-navigation-menu {
  position: relative;
  margin-inline-start: 1.0625rem;
  padding-inline-start: .5rem;
  border-inline-start: 1px solid var(--lg-hairline);
}
.rz-panel-menu .rz-navigation-menu .rz-navigation-item-link.active {
  background: var(--lg-blue-tint-2);
  color: var(--lg-blue);
  font-weight: 500;
  box-shadow: none;
}
.rz-panel-menu .rz-navigation-menu .rz-navigation-item-link.active .rz-navigation-item-icon { color: var(--lg-blue); }

/* A parent whose child is the current page gets a quiet marker of its own, so
   a collapsed group still says where you are. */
.rz-panel-menu > .rz-navigation-item:has(.rz-navigation-item-link.active) > .rz-navigation-item-wrapper > .rz-navigation-item-link {
  color: var(--lg-ink);
  font-weight: 600;
}

/* The expand chevron turns rather than swapping glyph (software already
   transitions it; this only supplies the Ledger duration). */
.rz-panel-menu .rz-navigation-item-icon-children { transition: transform var(--lg-d-base) var(--lg-ease-inout); }

/* 4.4 Footer: a hairline strip, not a filled bar. */
.rz-footer {
  background: var(--lg-canvas);
  border-top: 1px solid var(--lg-hairline);
  color: var(--lg-ink-3);
  font-size: 0.8125rem;
}


/* ---------------------------------------------------------------------------
   5. BUTTONS
   Two things make this the most rule-heavy section:
   (a) software draws outlined borders as an inset box-shadow at (0,4,0) and
       puts hover states inside @media (hover:hover) at (0,5,0), so equal or
       higher specificity is required;
   (b) the Trinidat bundle leaks hardcoded Bootstrap blue onto
       .rz-button.rz-primary:focus / :active at (0,3,0) — without a counter
       every primary button snaps to #0b5ed7 the moment it is clicked, and
       its label colour falls back to inherited ink on blue.
   --------------------------------------------------------------------------- */
.rz-button {
  font-family: var(--lg-font-ui);
  font-weight: 500;
  letter-spacing: -0.003em;
  text-transform: none;
  border-radius: var(--lg-r-sm);
}
.rz-button:not(.rz-state-disabled):active { transform: scale(.97); }

/* 5.1 The one primary. Counters the vendor's Bootstrap-blue focus/active leak. */
.rz-button.rz-primary.rz-variant-filled,
.rz-button.rz-primary {
  box-shadow: 0 1px 2px rgba(26, 78, 219, .24), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.rz-button.rz-primary:not(.rz-state-disabled):hover,
.rz-button.rz-primary:focus,
.rz-button.rz-primary:focus-visible,
.rz-button.rz-primary:active {
  color: #fff !important;
}
.rz-button.rz-primary:focus,
.rz-button.rz-primary:focus-visible {
  background-color: var(--lg-blue) !important;
  border-color: var(--lg-blue) !important;
}
.rz-button.rz-primary:not(.rz-state-disabled):hover { background-color: var(--lg-blue-hover) !important; border-color: var(--lg-blue-hover) !important; }
.rz-button.rz-primary:active { background-color: var(--lg-blue-active) !important; border-color: var(--lg-blue-active) !important; }
.rz-button.rz-secondary:focus, .rz-button.rz-secondary:active { background-color: var(--lg-ink) !important; color: #fff !important; }
.rz-button.rz-warning:focus, .rz-button.rz-warning:active { color: var(--lg-warn) !important; }

/* 5.2 Quiet secondary + ghost. */
.rz-button.rz-variant-outlined.rz-base,
.rz-button.rz-variant-outlined.rz-secondary {
  background: var(--lg-canvas);
  color: var(--lg-ink);
  box-shadow: inset 0 0 0 1px var(--lg-hairline), 0 1px 2px rgba(13, 20, 36, .04);
}
@media (hover: hover) {
  .rz-button.rz-variant-outlined.rz-base.rz-shade-default:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-outlined.rz-secondary.rz-shade-default:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):hover {
    background: var(--lg-canvas-2);
    color: var(--lg-ink);
    box-shadow: inset 0 0 0 1px var(--lg-ink-5), 0 1px 2px rgba(13, 20, 36, .05);
  }
  .rz-button.rz-variant-text.rz-base.rz-shade-default:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover {
    background: var(--lg-canvas-2);
    color: var(--lg-ink);
  }
  .rz-button.rz-variant-outlined.rz-danger.rz-shade-default:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):hover {
    background: var(--lg-danger-tint);
    color: var(--lg-danger);
    box-shadow: inset 0 0 0 1px var(--lg-danger-border);
  }
}
.rz-button.rz-variant-text.rz-base,
.rz-button.rz-variant-text.rz-secondary { color: var(--lg-ink-2); }
.rz-button.rz-variant-outlined.rz-danger {
  background: var(--lg-canvas);
  color: var(--lg-danger);
  box-shadow: inset 0 0 0 1px var(--lg-hairline);
}

/* 5.3 THE ONE OPINIONATED BLOCK.
   The app's detail toolbars carry 6-9 filled buttons in a
   Primary/Success/Warning/Info/Light/Secondary rainbow. Ledger allows one
   primary action per view, and remapping tokens alone would just repaint the
   rainbow in Ledger hues. So every filled button except Primary and Danger
   becomes a tinted surface with coloured text — the same vocabulary as the
   status pills. Hierarchy returns without a single markup change: one solid
   blue action, one solid red stop, everything else quiet but still colour-coded.
   Delete this block to get saturated fills back. */
.rz-button.rz-variant-filled.rz-success, .rz-button.rz-variant-flat.rz-success,
.rz-button.rz-variant-filled.rz-info, .rz-button.rz-variant-flat.rz-info,
.rz-button.rz-variant-filled.rz-warning, .rz-button.rz-variant-flat.rz-warning,
.rz-button.rz-variant-filled.rz-light, .rz-button.rz-variant-flat.rz-light,
.rz-button.rz-variant-filled.rz-secondary, .rz-button.rz-variant-flat.rz-secondary,
.rz-button.rz-variant-filled.rz-base, .rz-button.rz-variant-flat.rz-base {
  box-shadow: inset 0 0 0 1px currentColor;
  text-shadow: none;
}
.rz-button.rz-variant-filled.rz-success, .rz-button.rz-variant-flat.rz-success { background: var(--lg-ok-tint) !important; color: var(--lg-ok) !important; box-shadow: inset 0 0 0 1px var(--lg-ok-border); }
.rz-button.rz-variant-filled.rz-info, .rz-button.rz-variant-flat.rz-info { background: var(--lg-blue-tint-2) !important; color: var(--lg-blue) !important; box-shadow: inset 0 0 0 1px var(--lg-blue-tint-3); }
.rz-button.rz-variant-filled.rz-warning, .rz-button.rz-variant-flat.rz-warning { background: var(--lg-warn-tint) !important; color: var(--lg-warn) !important; box-shadow: inset 0 0 0 1px var(--lg-warn-border); }
.rz-button.rz-variant-filled.rz-light, .rz-button.rz-variant-flat.rz-light,
.rz-button.rz-variant-filled.rz-base, .rz-button.rz-variant-flat.rz-base { background: var(--lg-canvas) !important; color: var(--lg-ink) !important; box-shadow: inset 0 0 0 1px var(--lg-hairline), 0 1px 2px rgba(13, 20, 36, .04); }
.rz-button.rz-variant-filled.rz-secondary, .rz-button.rz-variant-flat.rz-secondary { background: var(--lg-canvas-3) !important; color: var(--lg-ink-2) !important; box-shadow: inset 0 0 0 1px var(--lg-hairline); }
/* ButtonStyle.Dark, narrowly. The 4 uses split two ways: ListButtonClose and the
   RoleManagement close button are icon-only and were rendering as solid ink
   slabs — the loudest control in the row — while Login.razor's Microsoft/Google
   SSO buttons carry a label and a dark fill is the conventional treatment
   there. Only the icon-only ones are quietened. */
.rz-button.rz-variant-filled.rz-dark.rz-button-icon-only {
  background: var(--lg-canvas) !important;
  color: var(--lg-ink) !important;
  box-shadow: inset 0 0 0 1px var(--lg-hairline), 0 1px 2px rgba(13, 20, 36, .04);
}
@media (hover: hover) {
  .rz-button.rz-variant-filled.rz-success:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-flat.rz-success:not(.rz-state-disabled):hover { background: #d9eee2 !important; }
  .rz-button.rz-variant-filled.rz-info:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-flat.rz-info:not(.rz-state-disabled):hover { background: var(--lg-blue-tint-3) !important; }
  .rz-button.rz-variant-filled.rz-warning:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-flat.rz-warning:not(.rz-state-disabled):hover { background: #f7e7c9 !important; }
  .rz-button.rz-variant-filled.rz-light:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-flat.rz-light:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-filled.rz-base:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-flat.rz-base:not(.rz-state-disabled):hover { background: var(--lg-canvas-2) !important; }
  .rz-button.rz-variant-filled.rz-secondary:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-flat.rz-secondary:not(.rz-state-disabled):hover { background: var(--lg-hairline) !important; }
  .rz-button.rz-variant-filled.rz-dark.rz-button-icon-only:not(.rz-state-disabled):hover { background: var(--lg-canvas-2) !important; }
}
/* Danger follows DESIGN.md exactly: "button-danger: Variant=Outlined; confirming
   twin in dialogs is Variant=Filled". So a filled Danger button is quiet in a
   row or toolbar and solid only inside a dialog.
   This matters here because of what the app actually renders: every list row's
   edit/save button is Components/Shared/ListButton/ListButtonEdit.razor and
   ListButtonSave.razor with ButtonStyle.Info FILLED, and delete is
   ListButtonDelete.razor with ButtonStyle.Danger FILLED. Tinting Info but
   leaving Danger solid would make the destructive action the single loudest
   thing in every row of every list in the app. */
.rz-button.rz-variant-filled.rz-danger,
.rz-button.rz-variant-flat.rz-danger {
  background: var(--lg-danger-tint) !important;
  color: var(--lg-danger) !important;
  box-shadow: inset 0 0 0 1px var(--lg-danger-border);
}
@media (hover: hover) {
  .rz-button.rz-variant-filled.rz-danger:not(.rz-state-disabled):hover,
  .rz-button.rz-variant-flat.rz-danger:not(.rz-state-disabled):hover {
    background: #f7dcde !important;
    color: var(--lg-danger-dark) !important;
  }
}
/* The confirming twin: inside a dialog, danger is solid and unmistakable. */
.rz-dialog .rz-button.rz-variant-filled.rz-danger,
.rz-dialog .rz-button.rz-variant-flat.rz-danger,
.rz-dialog-side .rz-button.rz-variant-filled.rz-danger,
.rz-dialog-side .rz-button.rz-variant-flat.rz-danger {
  background: var(--lg-danger) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(192, 39, 45, .24), inset 0 1px 0 rgba(255, 255, 255, .16);
}
@media (hover: hover) {
  .rz-dialog .rz-button.rz-variant-filled.rz-danger:not(.rz-state-disabled):hover,
  .rz-dialog .rz-button.rz-variant-flat.rz-danger:not(.rz-state-disabled):hover,
  .rz-dialog-side .rz-button.rz-variant-filled.rz-danger:not(.rz-state-disabled):hover,
  .rz-dialog-side .rz-button.rz-variant-flat.rz-danger:not(.rz-state-disabled):hover {
    background: var(--lg-danger-dark) !important;
    color: #fff !important;
  }
}

/* 5.4 Chips and the split button. */
.lg-chip.rz-button { border-radius: 999px !important; height: 30px; min-height: 30px; font-size: 0.8125rem; }
.lg-chip.lg-on.rz-button { background: var(--lg-blue-tint-2) !important; color: var(--lg-blue) !important; box-shadow: inset 0 0 0 1px var(--lg-blue-tint-3); }
.rz-splitbutton .rz-splitbutton-menu { border-radius: var(--lg-r-md); border: 1px solid var(--lg-hairline); box-shadow: var(--lg-e3); padding: .25rem; }

/* 5.5 Select bar as a segmented control with a raised thumb. */
.rz-selectbar { padding: 2px; gap: 0; border-radius: 7px; }
.rz-selectbar .rz-button { border-radius: 5px !important; font-size: 0.8125rem; min-height: 26px; box-shadow: none; }
.rz-selectbar .rz-button.rz-state-active { box-shadow: var(--lg-e1); background: var(--lg-canvas) !important; color: var(--lg-ink) !important; }


/* ---------------------------------------------------------------------------
   6. INPUTS AND FORM FIELDS
   software neutralises the inner control inside a RadzenFormField
   (.rz-form-field-content > * gets border:none; box-shadow:none), so a
   standalone input and a FormField input would otherwise look like two
   different systems. The ring is moved onto the form field itself.
   --------------------------------------------------------------------------- */
.rz-textbox, .rz-textarea, .rz-numeric, .rz-dropdown, .rz-datepicker, .rz-autocomplete, .rz-mask {
  font-family: var(--lg-font-ui);
}
/* NOTHING is drawn on .rz-form-field itself. Radzen's outlined border lives on
   the inner .rz-form-field-content and is already driven by --rz-input-border,
   --rz-input-hover-border and --rz-input-focus-border; the wrapper is taller
   than the content box (it reserves room for the floating label), so ringing it
   as well produced two concentric rounded rectangles around every input. The
   depth and focus ring now ride on --rz-form-field-*-shadow in section 2.11,
   which Radzen applies to the content box. */
.rz-form-field .rz-form-field-content { border-radius: var(--lg-r-sm); }
/* The floated label's colour comes from --rz-input-placeholder-color (set to
   ink-3 in section 2.10), so only the size is stated here. Not forced with
   !important on purpose: the invalid-state rule uses !important and must win. */
/* The RESTING label has no token, so without this it inherits ink and an empty
   floating-label field looks like it already holds a value. Radzen handles the
   floating, focused, invalid and disabled states at higher specificity. */
.rz-form-field .rz-form-field-label { color: var(--lg-ink-3); font-size: 0.8125rem; }
.rz-form-field.rz-state-focused .rz-form-field-label,
.rz-form-field:focus-within .rz-form-field-label { color: var(--lg-blue); }

/* Invalid state: the border says where, the message says how to fix it. */
.rz-state-invalid, .rz-textbox.rz-state-invalid, input.invalid, .invalid {
  box-shadow: inset 0 0 0 1px var(--lg-danger) !important;
  outline: none !important;
}
.validation-message, .rz-messages-error {
  color: var(--lg-danger);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.valid.modified:not([type=checkbox]) { outline: none; box-shadow: inset 0 0 0 1px var(--lg-ok); }

/* The vendor bundle ships a global `.form-label { font-weight: bold !important;
   color: black }`. Bold black labels are outside the ink ramp. */
.form-label {
  font-weight: 500 !important;
  color: var(--lg-ink-2) !important;
  font-size: 0.8125rem;
}

/* Popups: one shape, one shadow, one entrance. */
/* .rz-datepicker-panel is not a class Radzen emits; the date-picker popup
   root is .rz-datepicker-popup-container. */
.rz-dropdown-panel, .rz-autocomplete-panel, .rz-datepicker-popup-container, .rz-multiselect-panel {
  border-radius: var(--lg-r-md);
  border: 1px solid var(--lg-hairline);
  box-shadow: var(--lg-e3);
}
/* The entrance must leave the exit alone. Radzen.closePopup does not hide a
   popup: it adds .rz-close, whose rz-close animation fades it out, and sets
   display: none from the animationend handler. An animation declared here at
   the same specificity outranks .rz-close by source order, so no exit
   animation ever starts, animationend never fires and the popup stays open —
   on outside click, on Escape, on selecting an item. Every entrance animation
   on an element Radzen opens with openPopup needs this :not(.rz-close). */
.rz-dropdown-panel:not(.rz-close), .rz-autocomplete-panel:not(.rz-close),
.rz-datepicker-popup-container:not(.rz-close), .rz-multiselect-panel:not(.rz-close) {
  animation: lg-pop-in var(--lg-d-fast) var(--lg-ease-out) both;
}
.rz-dropdown-item, .rz-multiselect-item, .rz-autocomplete-item, .rz-listbox-item {
  border-radius: var(--lg-r-sm);
}


/* ---------------------------------------------------------------------------
   7. DATA GRID
   Every grid in this app is Density.Compact, and
   .rz-data-grid.rz-density-compact re-declares the cell and header metrics ON
   the grid element — so :root-level grid padding is a silent no-op and has to
   be restated here.
   Deliberately NOT copied from the reference sheet: the fixed row height with
   nowrap/ellipsis. Several pages render two-line cells, pre-wrap remittance
   text, in-cell dropdowns and inline-edit validators; a hard 36px clip would
   hide them. Rows breathe by padding instead.
   --------------------------------------------------------------------------- */
.rz-data-grid, .rz-datatable {
  border: none;
  border-radius: var(--lg-r-lg);
  box-shadow: var(--lg-e2);
  background: var(--lg-canvas);
  overflow: hidden;
}
.rz-data-grid .rz-datatable, .rz-datatable .rz-datatable { box-shadow: none; border-radius: 0; }

/* 7.1 Header: sentence case, ink-3, glass, sticky. */
.rz-data-grid .rz-grid-table thead th,
.rz-datatable .rz-grid-table thead th {
  background: var(--lg-glass-bg-2);
  -webkit-backdrop-filter: var(--lg-glass-blur);
  backdrop-filter: var(--lg-glass-blur);
  border-bottom: 1px solid var(--lg-hairline);
  text-transform: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lg-ink-3);
}
.rz-data-grid .rz-grid-table thead th .rz-column-title {
  color: var(--lg-ink-3);
  font-weight: 500;
  transition: color var(--lg-d-fast) var(--lg-ease);
}
.rz-data-grid .rz-grid-table thead th.rz-sortable-column:hover .rz-column-title { color: var(--lg-ink); }
.rz-data-grid .rz-grid-table thead th .rz-sortable-column-icon {
  color: var(--lg-blue);
  transition: transform var(--lg-d-base) var(--lg-ease-inout), opacity var(--lg-d-fast) var(--lg-ease);
}

/* 7.2 Rows: horizontal hairlines only, no zebra, hover to canvas-2. */
.rz-data-grid .rz-grid-table tbody td,
.rz-datatable .rz-grid-table tbody td {
  border-inline-end: none;
  transition: background-color var(--lg-d-fast) var(--lg-ease);
}
.rz-data-grid .rz-grid-table tbody tr > td { background-color: var(--lg-canvas); }
.rz-data-grid .rz-grid-table tbody tr:hover > td { background-color: var(--lg-canvas-2); }
.rz-data-grid .rz-grid-table tbody tr.rz-state-highlight > td { background: var(--lg-blue-tint-1); }
.rz-data-grid .rz-grid-table tbody tr.rz-state-highlight > td:first-child { box-shadow: inset 2px 0 0 var(--lg-blue); }
.rz-data-grid .rz-grid-table tbody tr.rz-state-highlight:hover > td { background: var(--lg-blue-tint-2); }

/* Re-declare the compact metrics the density class captured. */
.rz-data-grid.rz-density-compact,
.rz-datatable.rz-density-compact {
  --rz-grid-cell-line-height: 1.375rem;
  --rz-grid-cell-padding: 0.4375rem 0.75rem;
  --rz-grid-header-cell-padding: 0.5rem 0;
  --rz-grid-header-padding: 0.5rem 0.75rem;
  --rz-grid-header-title-padding-inline: 0.75rem 0;
  --rz-grid-filter-padding: 0.25rem 0.5rem;
}
.rz-pager.rz-density-compact { --rz-pager-padding: 0.375rem 0.75rem; }

/* DESIGN.md wants every figure in mono with tabular, slashed zeros. The app
   carries no lg-num column classes, and Radzen writes TextAlign.Right as an
   INLINE STYLE on the td rather than a class — so this attribute selector is
   the only markup-free way to reach a figure column. Verified safe: all five
   TextAlign.Right columns in the app are money (OpenAmount, PaidAmount,
   PaidValue, Sum); there is no right-aligned text column to catch by mistake.
   Everything else at least gets tabular figures so digits still line up. */
.rz-data-grid tbody td,
.rz-table tbody td,
.rz-data-grid tfoot td { font-variant-numeric: tabular-nums; }
.rz-data-grid tbody td[style*="text-align:right"] .rz-cell-data,
.rz-data-grid tbody td[style*="text-align: right"] .rz-cell-data {
  font-family: var(--lg-font-mono);
  font-size: 0.8125rem;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Value columns in mono. Hooks for future column CssClass use. */
.rz-data-grid .rz-cell-data.lg-id { font-family: var(--lg-font-mono); font-size: 0.8125rem; color: var(--lg-ink-3); font-feature-settings: "tnum" 1, "zero" 1; }
.rz-data-grid .rz-cell-data.lg-num { font-family: var(--lg-font-mono); font-size: 0.8125rem; font-feature-settings: "tnum" 1; }
.rz-data-grid .rz-cell-data.lg-date { font-family: var(--lg-font-mono); font-size: 0.8125rem; color: var(--lg-ink-2); font-feature-settings: "tnum" 1; }
.rz-data-grid .rz-cell-data.lg-date .lg-overdue, .lg-overdue { color: var(--lg-danger); }
.rz-data-grid .rz-cell-data.lg-primary { font-weight: 500; }

/* 7.3 Sticky glass footer for totals, where a grid is scroll-constrained. */
.rz-data-grid .rz-grid-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 3;
  font-size: 0.8125rem;
  color: var(--lg-ink-3);
  background: var(--lg-glass-bg-3);
  -webkit-backdrop-filter: var(--lg-glass-blur);
  backdrop-filter: var(--lg-glass-blur);
  box-shadow: inset 0 1px 0 var(--lg-hairline);
  border: none;
}
.rz-data-grid .rz-grid-table tfoot td .lg-total,
.rz-data-grid .rz-grid-table tfoot td.lg-total {
  font-family: var(--lg-font-mono);
  font-weight: 500;
  color: var(--lg-ink);
  font-feature-settings: "tnum" 1;
}

/* 7.4 Filter row and filter menu — the reference page never covers these. */
.rz-data-grid .rz-grid-filter-row td,
.rz-data-grid thead tr:nth-child(2) td {
  background: var(--lg-canvas);
  border-bottom: 1px solid var(--lg-hairline-soft);
}
.rz-grid-filter .rz-textbox, .rz-grid-filter .rz-dropdown, .rz-grid-filter .rz-numeric {
  font-size: 0.8125rem;
  border-radius: 5px;
}

/* 7.5 Row actions reveal on hover. */
.lg-row-actions { display: inline-flex; gap: 2px; opacity: 0; transition: opacity var(--lg-d-fast) var(--lg-ease); }
tr:hover .lg-row-actions, tr:focus-within .lg-row-actions { opacity: 1; }

/* 7.6 Pager and empty state. */
.rz-pager { border-top: 1px solid var(--lg-hairline); background: var(--lg-canvas); }
.rz-pager .rz-paginator-element { border-radius: 5px; transition: background-color var(--lg-d-fast) var(--lg-ease), color var(--lg-d-fast) var(--lg-ease); }
.rz-data-grid .rz-datatable-emptymessage,
.rz-data-grid .rz-grid-table .rz-datatable-emptymessage td {
  padding: 2.5rem 1rem;
  color: var(--lg-ink-3);
  text-align: center;
  font-size: 0.875rem;
}

/* 7.7 RadzenTable. 19 instances render .rz-grid-table with no .rz-data-grid
       ancestor and pass GridLines="Both", so they miss every rule above.
       Given the same hairline treatment so the app has one table look. */
.rz-table, table.rz-grid-table:not(.rz-data-grid .rz-grid-table) {
  --rz-grid-cell-border: 1px solid var(--lg-hairline-soft);
  /* The :root value is `0 0.875rem`, which suits a DataGrid whose row height
     comes from the density class but strips ALL vertical padding from a
     RadzenTable, whose cells have no other height source. */
  --rz-grid-cell-padding: 0.4375rem 0.75rem;
  font-size: 0.875rem;
}
/* All 19 RadzenTables pass GridLines="Both", and software feeds the SAME
   --rz-grid-cell-border token into the vertical edge as the horizontal one, so
   no token value can express "horizontal hairlines only" — it takes a rule.
   The :not(:last-child) is load-bearing for specificity: software's rule is
   (0,3,3), and without the pseudo-class this would sit at (0,2,4) and lose. */
table.rz-grid-table.rz-grid-gridlines-both > thead > tr > th:not(:last-child),
table.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child),
table.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child),
table.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) {
  border-inline-end: none;
}
.rz-table thead th, table.rz-grid-table:not(.rz-data-grid .rz-grid-table) thead th {
  text-transform: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lg-ink-3);
  background: var(--lg-canvas-2);
  border-bottom: 1px solid var(--lg-hairline);
}

/* 7.8 No radius on .rz-data-grid-data: the pager sits BELOW it, so a bottom
       radius there carves an arc through the middle of the grid. The root
       already has the radius plus overflow:hidden, which clips the real corners. */

/* 7.9 TABS.
   In Radzen 11 each tab is an <li> with borders and the clickable is a
   <button>; `.rz-tabview-selected` (not .rz-state-active) marks the current
   one, and software gives it a coloured TOP edge like a folder tab. Ledger
   wants a flat strip with a 2px rule under the selected tab that slides. */
.rz-tabview-nav {
  border-bottom: 1px solid var(--lg-hairline);
  gap: 2px;
  background: transparent;
}
.rz-tabview-nav > li,
.rz-tabview-top > .rz-tabview-nav > li,
.rz-tabview-nav > li.rz-tabview-selected,
.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected {
  position: relative;
  background: transparent;
  border: none;
  margin: 0;
  border-radius: var(--lg-r-sm) var(--lg-r-sm) 0 0;
  overflow: visible;
}
.rz-tabview-nav > li > button,
.rz-tabview-nav > li > a {
  background: transparent;
  border: none;
  color: var(--lg-ink-3);
  font-family: var(--lg-font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: color var(--lg-d-fast) var(--lg-ease);
}
.rz-tabview-nav > li:hover > button,
.rz-tabview-nav > li:hover > a { color: var(--lg-ink); }
.rz-tabview-nav > li.rz-tabview-selected > button,
.rz-tabview-nav > li.rz-tabview-selected > a { color: var(--lg-ink); }
.rz-tabview-nav > li:hover:not(.rz-tabview-selected) { background: var(--lg-canvas-2); }

/* The underline. One rule per tab, scaled to 0 until the tab is selected, so
   switching tabs reads as the rule growing rather than jumping. */
.rz-tabview-nav > li::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--lg-blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--lg-d-base) var(--lg-ease-out);
}
.rz-tabview-nav > li.rz-tabview-selected::after { transform: scaleX(1); }
.rz-tabview-panels { background: transparent; border: none; padding-top: 1rem; }
.bigger-tabs > .rz-tabview-nav > li > button { font-size: 0.9375rem; }


/* ---------------------------------------------------------------------------
   8. BADGES, ALERTS, STATUS
   --------------------------------------------------------------------------- */
.rz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--lg-font-ui);
}
/* DESIGN.md asks for Shade.Lighter on every badge, but NOT ONE of this app's 16
   RadzenBadge instances passes Shade — all 26 Shade= usages are on RadzenAlert.
   So the pill vocabulary keys off BadgeStyle alone: at (0,2,0) these tie
   software's `.rz-badge-success.rz-shade-default` and win on source order, and
   they still cover Shade.Lighter if it is ever added.
   The dot is enumerated per status rather than matched with [class*="rz-badge-"],
   which would also hit .rz-badge-pill and .rz-badge-light and put a dot in front
   of the keyboard-shortcut chips in ShortCutDialog and OverheadCostOverview. */
/* Base and Secondary DO get a dot — Extensions/EnumDisplayExtension.cs returns
   BadgeStyle.Base for the neutral OrderStatus/ReceiptState, so it is a real
   status and should read like one. Light does NOT: its 5 uses are the
   keyboard-shortcut chips in ShortCutDialog and OverheadCostOverview. */
.rz-badge.rz-badge-success::before,
.rz-badge.rz-badge-warning::before,
.rz-badge.rz-badge-danger::before,
.rz-badge.rz-badge-info::before,
.rz-badge.rz-badge-base::before,
.rz-badge.rz-badge-secondary::before,
.rz-badge.rz-badge-primary::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.rz-badge.rz-badge-success { background: var(--lg-ok-tint); color: var(--lg-ok); }
.rz-badge.rz-badge-warning { background: var(--lg-warn-tint); color: var(--lg-warn); }
.rz-badge.rz-badge-danger { background: var(--lg-danger-tint); color: var(--lg-danger); }
.rz-badge.rz-badge-info,
.rz-badge.rz-badge-primary { background: var(--lg-blue-tint-2); color: var(--lg-blue); }
.rz-badge.rz-badge-base,
.rz-badge.rz-badge-secondary,
.rz-badge.rz-badge-light { background: var(--lg-canvas-3); color: var(--lg-ink-2); }

/* Alerts are this app's dominant status pattern (38 of them), so they get the
   full pill treatment: tinted field, coloured rule, no drop shadow. */
.rz-alert { border-radius: var(--lg-r-md); box-shadow: none; font-size: 0.875rem; }
.rz-alert.rz-shade-lighter, .rz-alert.rz-variant-flat {
  border: 1px solid transparent;
  box-shadow: none;
}
.rz-alert.rz-alert-success, .rz-alert.rz-success { background: var(--lg-ok-tint); color: var(--lg-ok); border-color: var(--lg-ok-border); }
.rz-alert.rz-alert-warning, .rz-alert.rz-warning { background: var(--lg-warn-tint); color: var(--lg-warn); border-color: var(--lg-warn-border); }
.rz-alert.rz-alert-danger, .rz-alert.rz-danger { background: var(--lg-danger-tint); color: var(--lg-danger); border-color: var(--lg-danger-border); }
.rz-alert.rz-alert-info, .rz-alert.rz-info { background: var(--lg-blue-tint-2); color: var(--lg-blue); border-color: var(--lg-blue-tint-3); }
.rz-alert.rz-alert-base, .rz-alert.rz-base, .rz-alert.rz-alert-light { background: var(--lg-canvas-2); color: var(--lg-ink-2); border-color: var(--lg-hairline); }
/* 12 of the app's 38 alerts pass no Shade, so software paints their icon with
   the on-<status> colour (white) on a pale tint. Inheriting the text tone is
   correct for both the default-shade and the Shade.Lighter alerts. */
.rz-alert .rz-alert-icon { color: inherit; }
.rz-alert .rz-alert-title { font-weight: 600; color: inherit; }
/* The colour rules above set border-color only; with no style or width the
   default-shade alerts render edgeless. */
.rz-alert.rz-alert-success, .rz-alert.rz-success,
.rz-alert.rz-alert-warning, .rz-alert.rz-warning,
.rz-alert.rz-alert-danger, .rz-alert.rz-danger,
.rz-alert.rz-alert-info, .rz-alert.rz-info,
.rz-alert.rz-alert-base, .rz-alert.rz-base, .rz-alert.rz-alert-light {
  border-style: solid;
  border-width: 1px;
}
/* software re-declares the alert spacing on `.rz-alert-<size>` — on the alert
   element itself — so the :root values in section 2.18 never apply. */
.rz-alert-xs, .rz-alert-sm, .rz-alert-md, .rz-alert-lg {
  --rz-alert-padding: 0.75rem 0.875rem;
  --rz-alert-margin: 0;
  --rz-alert-gap: 0.625rem;
  --rz-alert-icon-margin: 0.0625rem 0;
  --rz-alert-message-margin: 0.125rem 0;
}

/* The dunning ladder needs three separable steps at 11px. */
.demand-status-dot { box-shadow: 0 0 0 1px rgba(13, 20, 36, .14); }
.demand-status-dot--neutral { background-color: var(--lg-ink-4); }
.demand-status-dot--info { background-color: var(--lg-blue); }
.demand-status-dot--warning { background-color: var(--lg-warn); }
.demand-status-dot--success { background-color: var(--lg-ok); }
.demand-status-dot--reminder-first { background-color: var(--lg-danger-light); }
.demand-status-dot--reminder-second { background-color: var(--lg-danger); }
.demand-status-dot--reminder-last { background-color: var(--lg-danger-dark); }


/* ---------------------------------------------------------------------------
   9. CHARTS
   --------------------------------------------------------------------------- */
.rz-chart text { font-family: var(--lg-font-ui); }
.rz-chart .rz-axis-tick-text, .rz-chart .rz-tick-text { font-family: var(--lg-font-mono); font-size: 11px; fill: var(--lg-ink-3); }
.rz-chart .rz-legend-item-text { fill: var(--lg-ink-2); font-size: 12px; }
.rz-chart .rz-grid-line, .rz-chart .rz-gridline { stroke: var(--lg-hairline); }
/* The pie's data-label chips reuse --rz-chart-tooltip-background as their fill,
   so the chip and its text are pinned explicitly. */
.rz-chart .rz-series-data-label-chip { fill: var(--lg-canvas); stroke: var(--lg-hairline); }
.rz-chart .rz-series-data-label { fill: var(--lg-ink-2); font-size: 11px; font-family: var(--lg-font-mono); }
.rz-chart-tooltip-content {
  border-radius: var(--lg-r-sm);
  box-shadow: var(--lg-e2);
  font-size: 0.8125rem;
}


/* ---------------------------------------------------------------------------
   10. OVERLAYS
   --------------------------------------------------------------------------- */
.rz-dialog { border-radius: var(--lg-r-lg); box-shadow: var(--lg-e4); }
.rz-dialog-titlebar { border-bottom: none; }
.rz-dialog-mask { background: rgba(13, 20, 36, .28); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* The glass drawer, for any side dialog opened with CssClass="ledger-drawer". */
.rz-dialog-side.ledger-drawer, .ledger-drawer .rz-dialog-side, .ledger-drawer.rz-dialog-side {
  top: 12px; bottom: 12px; right: 12px;
  height: auto;
  border-radius: var(--lg-r-lg);
  background: var(--lg-glass-bg-2);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--lg-e4), var(--lg-glass-hi);
  overflow: hidden;
}
.lg-kv { display: grid; grid-template-columns: 128px 1fr; gap: 10px 16px; font-size: 0.875rem; margin: 0; }
.lg-kv dt { color: var(--lg-ink-3); }
.lg-kv dd { margin: 0; font-weight: 500; }

/* Ink toasts. */
.rz-notification-item { font-size: 0.8125rem; border-radius: var(--lg-r-md); }
.rz-notification-title { font-weight: 500; }
.rz-notification-message { color: rgba(255, 255, 255, .72); }

.rz-tooltip-content { font-family: var(--lg-font-ui); }
/* NOT `.rz-menu`: RadzenProfileMenu's root <ul> carries `rz-menu rz-profile-menu`,
   so styling .rz-menu boxed the header user block itself in a floating card.
   The dropdown is reached through --rz-context-menu-* in section 2.8 instead.
   `.rz-context-menu` is the real class; `.rz-contextmenu` is not one Radzen emits. */
.rz-context-menu { border-radius: var(--lg-r-md); border: 1px solid var(--lg-hairline); box-shadow: var(--lg-e3); padding: .25rem; }


/* ---------------------------------------------------------------------------
   11. APP-SPECIFIC SURFACES
   These exist because the app's own CSS or the vendor bundle already claimed
   them. Each one is re-expressed in Ledger tokens rather than replaced.
   --------------------------------------------------------------------------- */

/* 11.1 Page titles. List pages get an <h2> from the vendor ListView, detail
        pages a bare <h3>. Both become the 28px Ledger page title — but the
        <h3>s inside cards and dashboard tiles must stay card-sized, and the
        ID selector means they need the ID to win. */
/*  The :not([class*="rz-text"]) guard matters: RadzenText renders a real
    <h2>..<h6> element, so an unguarded rule here (specificity 1,1,1) outranks
    .rz-text-h3 (0,1,0) and silently resizes every RadzenText heading. Only
    bare, class-less headings are page or card titles. */
#blazor-main-body > h1:not([class*="rz-text"]),
#blazor-main-body > h2:not([class*="rz-text"]),
#blazor-main-body > h3:not([class*="rz-text"]),
#blazor-main-body > div > h2:not([class*="rz-text"]),
#blazor-main-body > div > h3:not([class*="rz-text"]),
/* NOTE: the vendor ListView renders no page-title element of its own — the
   heading inside .overview-detail-card is a generic rz-text-h6 label, not the
   page name — so list pages have no 28px title until the vendor renders
   PageTopic as a heading. That needs a markup change, not CSS. */
#blazor-main-body > div > h2:not([class*="rz-text"]) {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.22;
  color: var(--lg-ink);
  margin: 0 0 .75rem;
}
#blazor-main-body .rz-card h3:not([class*="rz-text"]),
#blazor-main-body .rz-panel h3:not([class*="rz-text"]),
#blazor-main-body .rz-card h2:not([class*="rz-text"]),
#blazor-main-body .rz-panel h2:not([class*="rz-text"]) {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--lg-ink);
  margin: 0 0 .5rem;
}
/* Bare headings anywhere keep the ink ramp instead of the browser's 700 black. */
h1, h2, h3, h4, h5, h6 { font-family: var(--lg-font-ui); color: var(--lg-ink); font-weight: 600; }

/* 11.2 The overdue-reminder cell highlight. site.css points it at
        --rz-alert-background-color, which has no :root definition, so today it
        is invisible. Given a real warn tint here rather than by remapping that
        variable globally — that would repaint all 38 alerts. !important because
        the site.css rule is !important. */
/* InvoiceDemandOverview's RenderDelayedAndUnsentDemands adds this class to
   EVERY CELL of a row whose next reminder is due — so it is a row highlight,
   and on a list where most rows qualify a full warn tint turns the whole page
   orange. A whisper of warn plus ONE marker bar at the start of the row says
   "needs attention" without shouting. The bar must be :first-child, or the
   inset rule repeats on every cell.
   (Before the restyle this rule read --rz-alert-background-color, which has no
   :root value, so the highlight was invisible and nobody saw it at all.) */
td.rz-cell-warning, .rz-cell-warning {
  background-color: #fdf8ef !important;
}
.rz-data-grid td.rz-cell-warning:first-child,
td.rz-cell-warning:first-child { box-shadow: inset 3px 0 0 var(--lg-warn); }

/* 11.3 The header logout button. Four hardcoded hexes with !important, and the
        current pairing (#000 on #4f4f50) is unreadable. */
.logout-form-btn {
  background-color: transparent !important;
  color: var(--lg-ink-2) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: var(--lg-r-sm) !important;
  transition: background-color var(--lg-d-fast) var(--lg-ease), color var(--lg-d-fast) var(--lg-ease);
}
.logout-form-btn:hover {
  background-color: var(--lg-blue-tint-2) !important;
  color: var(--lg-blue) !important;
}

/* 11.4 The drawer toggles on the order's invoice and delivery-note tabs. site.css
        pins them to the drawer's right edge; the flat, borderless side is the
        one that meets the drawer's hairline. */
.order-sidebar-opener {
  border: 1px solid var(--lg-hairline);
  border-left: none;
  background-color: var(--lg-canvas) !important;
  color: var(--lg-ink-2) !important;
  border-radius: 0 var(--lg-r-sm) var(--lg-r-sm) 0;
  box-shadow: var(--lg-e2);
  transition: background-color var(--lg-d-fast) var(--lg-ease), color var(--lg-d-fast) var(--lg-ease);
}
.order-sidebar-opener:hover { background-color: var(--lg-canvas-2) !important; color: var(--lg-ink) !important; }

/* 11.4b THE IDENTITY PAGES.
        Components/Account/Shared/AccountLayoutComponent.razor is the shell for
        all 17 /Account/* routes — Login, Register, ForgotPassword, Lockout,
        AccessDenied and the confirmation pages. Until the restyle it was a
        900px two-column RadzenRow whose left column was a RadzenCard with an
        inline `background: var(--rz-primary-light) ... url(data:image/svg+xml…)`
        — the blurred four-colour gradient blob from Radzen's own sample page.
        Nothing else in this app looks remotely like that; white text on it was
        4.07:1 and AccessDenied put .text-danger on it at 1.45:1.

        The shell is now plain <div>/<header>/<div> carrying the classes below,
        for two reasons:
        - a RadzenCard or RadzenRow inside #blazor-main-body is named by
          site.css's .flexGrowContainerWithFlexGrow chain, which is the app's
          full-height contract. Owning the elements keeps this section clear of
          it. The old shell hit exactly that: the row shrank below its own
          content and its inline `overflow: hidden` then clipped the Microsoft
          sign-in row off the bottom of /Account/Login, so it never appeared.
        - the Radzen surface variables are all spoken for by components
          elsewhere in the app, so there was nothing left to retokenise.

        What is left is the vocabulary the rest of the app already uses: one
        white card at e3 on canvas-2, radius lg, a canvas-2 title block over a
        hairline, the ink ramp for type, and Signal Blue on the submit button
        and nothing else. */
.lg-auth {
  /* A flex item in #blazor-main-body's column. flex-shrink: 0 keeps the card at
     its own height — that was the old shell's clipping bug — while the auto
     block margins centre it in whatever height is left and collapse to zero
     when there is none. */
  flex: 0 0 auto;
  width: 100%;
  margin-block: auto;
  padding-block: 1.5rem;
}
.lg-auth-card {
  width: 100%;
  max-width: 27rem;
  margin-inline: auto;
  background: var(--lg-canvas);
  border-radius: var(--lg-r-lg);
  /* e3 carries its own 1px ring; no border beside it. */
  box-shadow: var(--lg-e3);
  overflow: hidden;
}

/* The title block. Pages put a heading and up to two supporting lines in the
   <Header> fragment and nothing else, so the grid gap is the only thing spacing
   them — which means the RadzenText margins and the rz-mb-6 utility have to go,
   with the !important they were set with. */
.lg-auth-head {
  display: grid;
  gap: .375rem;
  padding: 1.625rem 1.75rem 1.375rem;
  background: var(--lg-canvas-2);
  border-bottom: 1px solid var(--lg-hairline);
}
.lg-auth-head > * { margin: 0 !important; font-size: 0.875rem; line-height: 1.5; }
/* The first child is the page title whatever TextStyle the page passed —
   DisplayH3 on nine pages, H5 on three, H1 on AccessDenied. One size for all of
   them: 28px of Display type in a 432px card is a poster, not a page. */
.lg-auth-head > *:first-child {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.25;
}
/* Nine pages still carry `rz-color-white` from the old blue hero, and
   .rz-color-white is `color: var(--rz-white) !important` — white on canvas-2.
   Login.razor drops the class outright; this covers the other eight and any
   page added later. .text-danger is excluded on purpose: AccessDenied's title
   is red deliberately, and is only remapped onto the Ledger danger tone. */
.lg-auth-head > *:not(.text-danger) { color: var(--lg-ink-3) !important; }
.lg-auth-head > *:first-child:not(.text-danger) { color: var(--lg-ink) !important; }

.lg-auth-body { padding: 1.75rem; }
/* Pages that open their body with their own heading should not push it away
   from the hairline above. */
.lg-auth-body > *:first-child { margin-block-start: 0 !important; }
/* Bootstrap's red, from the vendor bundle, onto the Ledger danger tone. */
.lg-auth .text-danger { color: var(--lg-danger) !important; }
/* Lockout puts `rz-color-white` on its BODY text as well, where it has always
   been white on a white card — invisible before this restyle and after it.
   Scoped to the body so it cannot reach a page's own content colours. */
.lg-auth-body .rz-color-white { color: var(--lg-ink-2) !important; }

/* The fields. RadzenFormField floats its own label and section 6 already draws
   it, so the only thing left is the rhythm between them. */
.lg-auth-fields { display: grid; gap: 1rem; }
.lg-auth-fields .rz-form-field { width: 100%; }

/* One full-width primary action. On a card this narrow a shrink-wrapped button
   reads as an afterthought rather than as the thing you came here to press. */
.lg-auth-submit.rz-button { width: 100%; margin-top: 1.25rem; }

/* The quiet row under it — "Forgot your password?" and its siblings. */
.lg-auth-aside {
  display: flex;
  justify-content: center;
  margin-top: .875rem;
  font-size: 0.8125rem;
}

/* A labelled hairline, in the same overline vocabulary as .lg-overline
   (section 3). ink-3 rather than ink-4: it is still text, and ink-4 on canvas
   is 2.6:1. */
.lg-auth-sep {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.5rem 0 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lg-ink-3);
}
.lg-auth-sep::before,
.lg-auth-sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--lg-hairline); }

/* Provider buttons. ButtonStyle.Base + Variant.Outlined puts them on the quiet
   surface from section 5.2, so only the width and the icon size are new here.
   Radzen renders `Image` as a bare <img> with no class of its own, and both
   brand SVGs are 48x48 intrinsic — without this they arrive at treble height
   and stretch the button with them. */
.lg-auth-sso { display: grid; gap: .5rem; }
.lg-auth-provider.rz-button { width: 100%; }
.lg-auth-provider img { width: 18px; height: 18px; flex: 0 0 auto; }

/* The footer row: one sentence with one quiet action in it. */
.lg-auth-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lg-hairline-soft);
  font-size: 0.8125rem;
  color: var(--lg-ink-3);
}

/* Narrow viewports: the card gives up its padding, not its width. */
@media (max-width: 30rem) {
  .lg-auth { padding-inline: .75rem; }
  .lg-auth-head { padding: 1.25rem 1.25rem 1rem; }
  .lg-auth-body { padding: 1.25rem; }
}

/* 11.5 Panels the vendor bundle pinned with !important on one route. */
.detail-box-panel, .detail-box { border-radius: var(--lg-r-md) !important; }
.detail-box-title { font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--lg-ink); letter-spacing: -0.006em; }
.trinidat-card { border-radius: var(--lg-r-md) !important; box-shadow: var(--lg-e1) !important; border: none !important; }
/* The vendor DetailPage reads the tabs tokens as a page background and two
   border colours, so transparent leaves it edgeless. State them directly
   instead of retokenizing --rz-tabs-*, which software also reads for the tab
   strip itself. */
.detail-page-body { background: var(--lg-canvas); }
.detail-box-panel { border-color: var(--lg-hairline); }
.detail-box-title-row { border-bottom-color: var(--lg-hairline) !important; }

/* 11.6 Popups and affordances site.css declares against undefined variables. */
.compact-dropdown-popup {
  border: 1px solid var(--lg-hairline);
  background-color: var(--lg-canvas);
  box-shadow: var(--lg-e3);
  border-radius: var(--lg-r-md);
}
.supplier-files .rz-fileupload-buttonbar { background-color: var(--lg-canvas-2); border-radius: var(--lg-r-sm); }
/* 8 of the 11 uploads are NOT .drag-and-drop, and there the choose control is a
   bare span: white on the near-white button bar with no edge at all. Give it a
   real button shape. Lower specificity than the .drag-and-drop rules below, so
   the drop-zone treatment still wins where it applies. */
.rz-fileupload-buttonbar .rz-fileupload-choose {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .375rem .75rem;
  border-radius: var(--lg-r-sm);
  box-shadow: inset 0 0 0 1px var(--lg-hairline), 0 1px 2px rgba(13, 20, 36, .04);
  transition: background-color var(--lg-d-fast) var(--lg-ease), box-shadow var(--lg-d-fast) var(--lg-ease);
}
@media (hover: hover) {
  .rz-fileupload-buttonbar .rz-fileupload-choose:hover {
    box-shadow: inset 0 0 0 1px var(--lg-ink-5), 0 1px 2px rgba(13, 20, 36, .05);
  }
}
.drag-and-drop .rz-fileupload-buttonbar .rz-fileupload-choose {
  border: 1px dashed var(--lg-ink-5);
  border-radius: var(--lg-r-md);
  color: var(--lg-ink-2);
  background: var(--lg-canvas-2);
  transition: border-color var(--lg-d-base) var(--lg-ease), background-color var(--lg-d-base) var(--lg-ease), color var(--lg-d-base) var(--lg-ease);
}
.drag-and-drop .rz-fileupload-buttonbar .rz-fileupload-choose:hover {
  border-color: var(--lg-blue);
  background: var(--lg-blue-tint-1);
  color: var(--lg-blue);
}
.icon-stack .icon-badge {
  text-shadow: 0.05rem 0 0 var(--lg-canvas), -0.05rem 0 0 var(--lg-canvas), 0 0.05rem 0 var(--lg-canvas), 0 -0.05rem 0 var(--lg-canvas);
}
.icon-stack:hover .icon-badge {
  text-shadow: 0.05rem 0 0 var(--lg-canvas-2), -0.05rem 0 0 var(--lg-canvas-2), 0 0.05rem 0 var(--lg-canvas-2), 0 -0.05rem 0 var(--lg-canvas-2);
}
.demand-transaction-purpose { color: var(--lg-ink-3); }
.bigger-tabs .rz-tabview-title { font-size: 1em; font-weight: 500; }

/* 11.7 The error bar: ink, not a red slab, with the Ledger radius. */
/* The markup is <div id="blazor-error-ui" class="bg-danger">, and Bootstrap's
   .bg-danger is !important — so this cannot win on background. With
   --bs-danger-rgb remapped above, bg-danger already resolves to the Ledger
   danger; the declaration here just keeps the colour right if the class is
   ever dropped. Red is correct for a crash bar. */
#blazor-error-ui {
  background: var(--lg-danger);
  color: #fff;
  box-shadow: var(--lg-e4);
  font-size: 0.875rem;
  border-radius: var(--lg-r-md) var(--lg-r-md) 0 0;
  padding: .75rem 1.25rem;
}
/* White, not a blue tint: the bar is danger-red, where #8fb0ff is only 2.8:1. */
#blazor-error-ui .reload { color: #fff; text-decoration: underline; font-weight: 500; }
#blazor-error-ui .dismiss { color: rgba(255, 255, 255, .82); }
.blazor-error-boundary { background-color: var(--lg-danger); border-radius: var(--lg-r-md); }

/* 11.8 Bootstrap tokens. Only the vendor bundle's Bootstrap is live (the app's
        own ~/bootstrap link does not resolve), and the utilities the app uses
        read --bs-*. The variant buttons hardcode their hex, so they are named. */
html:root {
  /* Bootstrap 5.3 utilities read the *-rgb triples, not the named colours:
     `.text-info { color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) }`.
     Remapping only --bs-info leaves .text-info cyan and .bg-danger Bootstrap
     red, which is exactly what happened before these were added. */
  --bs-primary: var(--lg-blue);
  --bs-primary-rgb: 26, 78, 219;
  --bs-secondary-rgb: 59, 68, 87;
  --bs-success-rgb: 22, 122, 69;
  --bs-info-rgb: 26, 78, 219;
  --bs-warning-rgb: 143, 88, 6;
  --bs-danger-rgb: 192, 39, 45;
  --bs-light-rgb: 246, 247, 250;
  --bs-dark-rgb: 13, 20, 36;
  --bs-body-color-rgb: 13, 20, 36;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-link-color-rgb: 26, 78, 219;
  --bs-emphasis-color-rgb: 13, 20, 36;

  /* Bootstrap 5.3's alerts and subtle surfaces read the *-bg-subtle /
     *-border-subtle / *-text-emphasis families, so .alert-warning stayed
     Bootstrap's #fff3cd until these were mapped. */
  --bs-primary-bg-subtle: var(--lg-blue-tint-2);
  --bs-primary-border-subtle: var(--lg-blue-tint-3);
  --bs-primary-text-emphasis: var(--lg-blue);
  --bs-secondary-bg-subtle: var(--lg-canvas-3);
  --bs-secondary-border-subtle: var(--lg-hairline);
  --bs-secondary-text-emphasis: var(--lg-ink-2);
  --bs-success-bg-subtle: var(--lg-ok-tint);
  --bs-success-border-subtle: var(--lg-ok-border);
  --bs-success-text-emphasis: var(--lg-ok);
  --bs-info-bg-subtle: var(--lg-blue-tint-2);
  --bs-info-border-subtle: var(--lg-blue-tint-3);
  --bs-info-text-emphasis: var(--lg-blue);
  --bs-warning-bg-subtle: var(--lg-warn-tint);
  --bs-warning-border-subtle: var(--lg-warn-border);
  --bs-warning-text-emphasis: var(--lg-warn);
  --bs-danger-bg-subtle: var(--lg-danger-tint);
  --bs-danger-border-subtle: var(--lg-danger-border);
  --bs-danger-text-emphasis: var(--lg-danger);
  --bs-light-bg-subtle: var(--lg-canvas-2);
  --bs-light-border-subtle: var(--lg-hairline);
  --bs-light-text-emphasis: var(--lg-ink-2);
  --bs-dark-bg-subtle: var(--lg-ink-5);
  --bs-dark-border-subtle: var(--lg-ink-4);
  --bs-dark-text-emphasis: var(--lg-ink);
  --bs-secondary-color: var(--lg-ink-3);
  --bs-tertiary-bg: var(--lg-canvas-2);
  --bs-emphasis-color: var(--lg-ink);
  --bs-secondary: var(--lg-ink-2);
  --bs-success: var(--lg-ok);
  --bs-warning: var(--lg-warn);
  --bs-danger: var(--lg-danger);
  --bs-info: var(--lg-blue);
  --bs-light: var(--lg-canvas-2);
  --bs-dark: var(--lg-ink);
  --bs-body-color: var(--lg-ink);
  --bs-body-bg: var(--lg-canvas);
  --bs-border-color: var(--lg-hairline);
  --bs-border-radius: var(--lg-r-sm);
  --bs-link-color: var(--lg-blue);
  --bs-link-hover-color: var(--lg-blue-hover);
  --bs-font-sans-serif: var(--lg-font-ui);
  /* Reaches code, pre, kbd and samp in one stroke — the Identity pages' recovery
     codes and the error page's Request ID all render through them. */
  --bs-font-monospace: var(--lg-font-mono);
  --bs-code-color: var(--lg-ink-2);
  --bs-body-font-family: var(--lg-font-ui);
  --bs-body-font-size: 0.9375rem;
}
.btn-primary, .btn-submit, .btn-confirm, .btn-save, .btn-add {
  --bs-btn-bg: var(--lg-blue);
  --bs-btn-border-color: var(--lg-blue);
  --bs-btn-hover-bg: var(--lg-blue-hover);
  --bs-btn-hover-border-color: var(--lg-blue-hover);
  --bs-btn-active-bg: var(--lg-blue-active);
  --bs-btn-active-border-color: var(--lg-blue-active);
  background-color: var(--lg-blue);
  border-color: var(--lg-blue);
  color: #fff;
}
.btn-primary:hover, .btn-submit:hover, .btn-confirm:hover, .btn-save:hover, .btn-add:hover {
  background-color: var(--lg-blue-hover);
  border-color: var(--lg-blue-hover);
  color: #fff;
}
.btn-secondary, .btn-cancel, .btn-default {
  --bs-btn-bg: var(--lg-canvas);
  --bs-btn-color: var(--lg-ink);
  --bs-btn-border-color: var(--lg-hairline);
  --bs-btn-hover-bg: var(--lg-canvas-2);
  --bs-btn-hover-color: var(--lg-ink);
  --bs-btn-hover-border-color: var(--lg-ink-5);
}
.btn-delete { --bs-btn-bg: var(--lg-danger); --bs-btn-border-color: var(--lg-danger); --bs-btn-hover-bg: var(--lg-danger-dark); }
.btn, .btn-link { border-radius: var(--lg-r-sm); font-family: var(--lg-font-ui); font-weight: 500; }
/* Bootstrap's checkbox/radio, used by the Identity pages, which are not Radzen. */
.form-check-input {
  border: 1px solid var(--lg-ink-5);
  border-radius: 4px;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1875rem;
  background-color: var(--lg-canvas);
  transition: background-color var(--lg-d-fast) var(--lg-ease), border-color var(--lg-d-fast) var(--lg-ease), box-shadow var(--lg-d-base) var(--lg-ease);
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked { background-color: var(--lg-blue); border-color: var(--lg-blue); }
.form-check-input:focus { border-color: var(--lg-blue); box-shadow: 0 0 0 3px var(--lg-blue-ring); outline: none; }
.form-control, .form-select {
  border: 1px solid var(--lg-hairline);
  border-radius: var(--lg-r-sm);
  color: var(--lg-ink);
  font-size: 0.875rem;
  box-shadow: var(--lg-inset);
  transition: border-color var(--lg-d-fast) var(--lg-ease), box-shadow var(--lg-d-base) var(--lg-ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--lg-blue);
  box-shadow: 0 0 0 3px var(--lg-blue-ring);
  outline: none;
}
hr { border: none; border-top: 1px solid var(--lg-hairline); opacity: 1; margin: 1rem 0; }
a, .btn-link { color: var(--lg-blue); }


/* ---------------------------------------------------------------------------
   12. THE LEDGER EXTRAS
   Class hooks the reference design uses. No markup in this app carries them
   yet, so they are inert until someone opts a page in — kept so the
   vocabulary exists and a KPI row or bulk bar can be added without new CSS.
   --------------------------------------------------------------------------- */
.lg-kpi { position: relative; overflow: hidden; cursor: pointer; transition: box-shadow var(--lg-d-base) var(--lg-ease), transform var(--lg-d-base) var(--lg-ease); }
.lg-kpi:hover { box-shadow: var(--lg-e2); transform: translateY(-1px); }
.lg-kpi.lg-on { box-shadow: 0 0 0 1px var(--lg-blue), var(--lg-e1); }
.lg-kpi .lg-k-label { font-size: 0.75rem; color: var(--lg-ink-3); font-weight: 500; }
.lg-kpi .lg-k-value { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-feature-settings: "tnum" 1; margin-top: .125rem; }
.lg-kpi.lg-alert .lg-k-value { color: var(--lg-danger); }
.lg-kpi .lg-k-delta { font-size: 0.75rem; margin-top: .25rem; }
.lg-kpi .lg-k-delta.up { color: var(--lg-ok); }
.lg-kpi .lg-k-delta.down { color: var(--lg-danger); }

.lg-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  color: var(--lg-ink-2); background: var(--lg-canvas-3);
  flex: 0 0 auto;
}

.lg-selbar {
  position: fixed; left: 50%; bottom: 24px; z-index: 900;
  translate: -50% 12px; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--lg-r-md);
  background: var(--lg-glass-bg-2);
  -webkit-backdrop-filter: var(--lg-glass-blur);
  backdrop-filter: var(--lg-glass-blur);
  box-shadow: var(--lg-e3), var(--lg-glass-hi);
  transition: translate var(--lg-d-slow) var(--lg-ease-out), opacity var(--lg-d-slow) var(--lg-ease-out);
}
.lg-selbar.lg-open { translate: -50% 0; opacity: 1; pointer-events: auto; }
.lg-selbar .lg-n { font-size: 0.8125rem; font-weight: 500; font-feature-settings: "tnum" 1; }
.lg-selbar .lg-n b { color: var(--lg-blue); }
.lg-selbar .lg-divider { width: 1px; height: 18px; background: var(--lg-hairline); margin: 0 4px; }

.lg-search .rz-textbox, .rz-textbox.lg-search { font-size: 0.8125rem; }

.lg-skeleton {
  background: linear-gradient(90deg, var(--lg-canvas-3) 0%, var(--lg-canvas-2) 40%, var(--lg-canvas-3) 80%);
  background-size: 200% 100%;
  border-radius: var(--lg-r-sm);
  animation: lg-shimmer 1.4s linear infinite;
}
/* Radzen paints the value TWICE, and the copies need OPPOSITE colours:
   `.rz-progressbar-label` lies underneath and is the copy that shows over the
   blue fill, while `.rz-progressbar-label-value` is clip-path'd to the unfilled
   track and takes --rz-progressbar-color (ink-2, section 2.20). Forcing both to
   ink put ink-on-Signal-Blue at 1.4:1. */
.rz-progressbar-label { color: #fff; }
.rz-progressbar-label, .rz-progressbar-label-value {
  font-size: 0.75rem;
  font-weight: 500;
  font-feature-settings: "tnum" 1;
}
.lg-progress-quiet .rz-progressbar { height: 4px; border-radius: 999px; }
.lg-progress-quiet .rz-progressbar-label { display: none; }


/* ---------------------------------------------------------------------------
   13. MOTION
   Small, short, and only ever confirming something that happened. Nothing
   animates on scroll; nothing moves more than a few pixels.
   --------------------------------------------------------------------------- */
@keyframes lg-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes lg-dlg-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lg-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lg-flash { 0% { background-color: var(--lg-ok-tint); } 100% { background-color: transparent; } }
@keyframes lg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes lg-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Dialogs arrive with a short fade and a 1.5% scale; side dialogs slide. */
.rz-dialog:not(.rz-dialog-side) { animation: lg-dlg-in var(--lg-d-base) var(--lg-ease-out) both; }
.rz-notification-item { animation: lg-toast-in var(--lg-d-slow) var(--lg-ease-out) both; }

/* A row that just changed flashes Verdigris once. */
tr.lg-changed > td { animation: lg-flash 900ms var(--lg-ease) both; }

/* Cards and panels lift very slightly on hover where they are interactive. */
.rz-card, .rz-panel { transition: box-shadow var(--lg-d-base) var(--lg-ease); }
a .rz-card:hover, [role="button"].rz-card:hover, .rz-card[tabindex]:hover { box-shadow: var(--lg-e2); }

/* Icon buttons settle into their hover tint rather than snapping. */
.rz-button.rz-variant-text { transition: background-color var(--lg-d-fast) var(--lg-ease), color var(--lg-d-fast) var(--lg-ease), transform var(--lg-d-fast) var(--lg-ease); }

/* The checkbox tick and switch knob ease in. */
.rz-chkbox-box, .rz-checkbox-box { transition: background-color var(--lg-d-fast) var(--lg-ease), border-color var(--lg-d-fast) var(--lg-ease), box-shadow var(--lg-d-base) var(--lg-ease); }
.rz-chkbox-box .rz-chkbox-icon, .rz-checkbox-box .rz-checkbox-icon { transition: transform var(--lg-d-fast) var(--lg-ease-out), opacity var(--lg-d-fast) var(--lg-ease); }
.rz-switch-circle { transition: transform var(--lg-d-base) var(--lg-ease-out), background-color var(--lg-d-fast) var(--lg-ease); }

/* A grid that has just loaded fades its body up 4px, once. */
.rz-data-grid .rz-grid-table tbody { animation: lg-fade-up var(--lg-d-base) var(--lg-ease-out) both; }

/* The sidebar rail slides rather than snapping when toggled. */
/* opacity, not transform: Radzen animates the rail's width and opacity and the
   element carries no transform, so transitioning one would be inert. */
.rz-sidebar { transition: width var(--lg-d-base) var(--lg-ease-out), opacity var(--lg-d-base) var(--lg-ease-out); }

/* Overlays that appear near the cursor arrive with the same 120ms rise as the
   dropdown panels, so popups feel like one family. Both are opened with
   Radzen.openPopup, so both need :not(.rz-close) — see the popup rule in 6. */
.rz-tooltip:not(.rz-close), .rz-tooltip-content { animation: lg-pop-in var(--lg-d-fast) var(--lg-ease-out) both; }
.rz-context-menu:not(.rz-close) { animation: lg-pop-in var(--lg-d-fast) var(--lg-ease-out) both; }
.rz-dialog-mask { animation: lg-mask-in var(--lg-d-base) var(--lg-ease) both; }
@keyframes lg-mask-in { from { opacity: 0; } to { opacity: 1; } }

/* A validation message that appears mid-form slides down rather than popping
   the layout, so the eye follows it to the field it belongs to. */
.rz-messages-error, .validation-message { animation: lg-fade-up var(--lg-d-base) var(--lg-ease-out) both; }

/* The selected row's 2px rule grows from the top rather than blinking on. */
.rz-data-grid .rz-grid-table tbody tr > td:first-child {
  transition: box-shadow var(--lg-d-base) var(--lg-ease-out), background-color var(--lg-d-fast) var(--lg-ease);
}

/* A one-pixel nudge on the rail: enough to feel the row respond, not enough to
   shift the reading position. */
.rz-panel-menu .rz-navigation-item-link .rz-navigation-item-icon {
  transition: color var(--lg-d-fast) var(--lg-ease), transform var(--lg-d-base) var(--lg-ease-out);
}
.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { transform: translateX(1px); }

/* The splitter bar earns its handle only while you are on it. */
.rz-splitter-bar { transition: background-color var(--lg-d-fast) var(--lg-ease), color var(--lg-d-fast) var(--lg-ease); }

/* Sort direction changes flip the chevron instead of swapping it. */
.rz-data-grid thead th .rz-sortable-column-icon { transition: transform var(--lg-d-base) var(--lg-ease-inout), color var(--lg-d-fast) var(--lg-ease); }

/* Focus is always visible and always the same ring. */
:focus-visible { outline: 2px solid var(--lg-blue); outline-offset: 2px; }
/* ...except where Radzen deliberately manages its own focus treatment. */
.rz-grid-table td:focus-visible, .rz-grid-table th:focus-visible,
.rz-sidebar-toggle:focus-visible, .rz-button:focus-visible { outline: none; }
/* ...which left the outlined, text and flat buttons with NO focus indicator at
   all, because only the filled variants carry the white+blue ring. Give them the
   same ring rather than restoring an outline, so every button focuses alike. */
.rz-button.rz-variant-outlined:focus-visible,
.rz-button.rz-variant-text:focus-visible,
.rz-button.rz-variant-flat:focus-visible { box-shadow: var(--rz-button-focus-shadow); }


/* ---------------------------------------------------------------------------
   14. ACCESSIBILITY AND ESCAPE HATCHES
   --------------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .rz-header,
  .rz-data-grid .rz-grid-table thead th,
  .rz-data-grid .rz-grid-table tfoot td,
  .lg-selbar,
  .rz-dialog-side.ledger-drawer,
  .ledger-drawer .rz-dialog-side {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--lg-canvas);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* OPT-IN: see the design at true size.
   site.css puts zoom: .9 on the layout root, so everything above lands on
   screen at 90% — a 15px body reads as 13.5px and a 44px row as ~40px. That
   preserves the app's current information density, which is why it is left
   alone by default. Uncomment to render at the designed scale; expect ~11%
   less content per screen.

.app-zoom { zoom: 1 !important; height: 100vh !important; }
*/