/* Roboto (MudBlazor's default face), self-hosted: no third-party runtime dependency, works offline
   in the PWA (same-origin → service-worker cached), and won't fight a future strict CSP.
   Variable font — one file covers weights 100-900. Subsets: latin + latin-ext (covers EN/ES). */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/roboto-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: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/roboto-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;
}

/* Manrope — the Auto UI typeface (see the Leo typography block below). Self-hosted for the same
   reasons as Roboto. Variable font, weights 200-800. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-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;
}

/* ─── Design Tokens ───────────────────────────────────────────────────────── */
:root {
  --bg: #fafafa;
  --surface: #fff;
  --muted: #f4f4f5;
  --border: #e4e4e7;
  --fg: #0b0b0e;
  --mfg: #71717a;
  --primary: #8E763E;
  --ring: #8E763E;
}

body.mud-theme-dark {
  --bg: #09090b;
  --surface: #0f0f12;
  --muted: #1a1a1e;
  --border: #27272a;
  --fg: #fafafa;
  --mfg: #a1a1aa;
  --primary: #b0924b;
  --ring: #b0924b;
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
html, body {
  font-family: 'Roboto', system-ui, sans-serif;
}

/* ─── Scrollbars ──────────────────────────────────────────────────────────── */
/* scrollbar-color inherits, so set it once on the root instead of every element. */
html {
  scrollbar-color: var(--border) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
  border: 2px solid var(--bg);
}

/* ─── Focus Ring (shadcn new-york-v4 equivalent) ──────────────────────────── */
a, button, .mud-button-root {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* <FocusOnNavigate Selector="h1"> programmatically focuses the page heading on
   every navigation (for screen readers). Suppress its visible ring — it's not a
   user focus target. (Restores the stock rule the scaffold shipped with.) */
h1:focus,
h1:focus-visible {
  outline: none;
}

/* ─── Error Boundary ──────────────────────────────────────────────────────── */
.blazor-error-boundary {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: 1rem;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

/* ─── Identity form scaffold (preserved) ──────────────────────────────────── */
/* These are referenced by the static-SSR /Account/* Identity pages (the
   Remember-me checkbox and the .form-floating fields across Login/Register/
   Manage/etc.). Kept so those pages don't regress before Task 4 restyles them. */
.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ─── App Loading Overlay ─────────────────────────────────────────────────── */
/* Shown while the Blazor circuit connects/renders an interactive page
   (prerender is off, so #app-root is briefly empty). Hidden as soon as
   content renders. Show/hide logic lives entirely in App.razor JS — do NOT
   change .app-splash--show or the keyframes. Colors only. */
.app-splash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  /* Light-mode token directly — splash fires before body.mud-theme-dark is set */
  background: #fafafa;
}

.app-splash--show {
  display: flex;
}

.app-splash__ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(142, 118, 62, 0.2);
  border-top-color: #8E763E;
  animation: app-splash-spin 0.8s linear infinite;
}

@keyframes app-splash-spin {
  to { transform: rotate(360deg); }
}

/* ═══ Sidebar nav + app bar (ElevenLabs-style) ════════════════════════════════
   Global because they target MudBlazor component DOM (.mud-appbar/.mud-drawer/
   .mud-nav-link). Bounded by the .cms-* classes added in MainLayout/NavMenu so
   they only affect the app shell. Neutral gray active/hover; brand reserved for
   the workspace logo + badges + primary buttons. Light/dark via the vars above. */

/* ── App bar ──────────────────────────────────────────────────────────────── */
.cms-appbar.mud-appbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  color: var(--fg);
}
.cms-appbar-title { font-weight: 600; color: var(--fg); }
.cms-appbar .mud-icon-button { color: var(--mfg); border-radius: 0.5rem; }
.cms-appbar .mud-icon-button:hover { background: var(--muted); color: var(--fg); }

/* ── User avatar + menu ───────────────────────────────────────────────────── */
.cms-user-avatar { background: var(--muted); color: var(--fg); cursor: pointer; border: 1px solid var(--border); }
.cms-user-head { padding: 0.5rem 1rem; min-width: 200px; }
.cms-user-name { font-weight: 500; color: var(--fg); }
.cms-logout-form { width: 100%; }
.cms-logout-btn {
  display: flex; align-items: center; width: 100%;
  background: none; border: none; cursor: pointer;
  padding: 0.5rem 1rem; font: inherit; font-size: 0.875rem;
  color: var(--fg); text-align: left;
}
.cms-logout-btn:hover { background: var(--muted); }

/* ── Drawer (full-height sidebar) ─────────────────────────────────────────── */
.cms-drawer.mud-drawer { background: var(--bg); border-right: 1px solid var(--border); box-shadow: none; }

/* ── Workspace switcher box (subdivision) ─────────────────────────────────── */
.cms-ws { padding: 0.75rem 0.75rem 0.5rem; }
.cms-ws-menu, .cms-ws-menu .mud-menu-activator { width: 100%; display: block; }
.cms-ws-box {
  display: flex; align-items: center; gap: 0.625rem; width: 100%;
  padding: 0.5rem 0.625rem; border: 1px solid var(--border); border-radius: 0.5rem;
  background: var(--surface); cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.cms-ws-box:hover { background: var(--muted); }
.cms-ws-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 0.375rem;
  background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 600; flex-shrink: 0;
}
.cms-ws-name {
  flex: 1; font-size: 0.875rem; font-weight: 500; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.cms-ws-chevron { color: var(--mfg); flex-shrink: 0; }

/* ── Sidebar nav items (neutral gray pills) ───────────────────────────────── */
.cms-nav .mud-navmenu { padding: 0.25rem 0.5rem 1rem; }
.cms-nav .mud-nav-link {
  color: var(--mfg);
  border-radius: 0.5rem;
  margin: 1px 0;
  min-height: 38px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 450;
  transition: background-color 0.1s ease, color 0.1s ease;
}
.cms-nav .mud-nav-link .mud-nav-link-icon-default,
.cms-nav .mud-nav-link .mud-icon-root { color: var(--mfg); }
.cms-nav .mud-nav-link:hover { background-color: var(--muted); color: var(--fg); }
.cms-nav .mud-nav-link:hover .mud-nav-link-icon-default,
.cms-nav .mud-nav-link:hover .mud-icon-root { color: var(--fg); }
.cms-nav .mud-nav-link.active {
  background-color: var(--muted) !important;
  color: var(--fg) !important;
  font-weight: 600;
  box-shadow: none !important;
}
.cms-nav .mud-nav-link.active::before { display: none !important; }
.cms-nav .mud-nav-link.active .mud-nav-link-icon-default,
.cms-nav .mud-nav-link.active .mud-icon-root { color: var(--fg) !important; }
.cms-nav .mud-nav-group .mud-collapse-container .mud-nav-link { font-weight: 400; }

/* ═══ Auto UI theme (final) ═══════════════════════════════════════════════════
   "Auto UI" (leo03) won the design exploration and is the shipped look. The Lab
   switcher and the other theme bundles (original/leo01/leo02-only) were removed;
   <body> carries a static data-theme="leo03" (App.razor), so the leo selectors
   below apply unconditionally. Selector shapes ([data-theme^="leo"] and
   :is(leo02, leo03)) are kept as-committed so this section stays diff-able
   against the frontend-polish exploration branch. */

/* ── Leo chrome tokens ─────────────────────────────────────────────────────────
   Bronze palette; the chrome tokens derive from MudBlazor's palette vars (which
   DO flip light↔dark on :root), so the sidebar / app bar darken in dark mode.
   Hugeicons + curated glyphs + the top-rail breadcrumb are applied in markup
   (NavMenu/MainLayout). */
body[data-theme^="leo"] {
  --bg: var(--mud-palette-background);
  --surface: var(--mud-palette-surface);
  --muted: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
  --border: var(--mud-palette-lines-default);
  --fg: var(--mud-palette-text-primary);
  --mfg: var(--mud-palette-text-secondary);
  --primary: var(--mud-palette-primary);
  --ring: var(--mud-palette-primary);
}
/* Leo 01 chrome refinements: smaller (20px) icons; the user icon is ungrouped from
   its avatar into a plain icon button matching the dark-mode / language buttons. */
body[data-theme^="leo"] .cms-appbar .mud-icon-root,
body[data-theme^="leo"] .cms-nav .mud-icon-root,
body[data-theme^="leo"] .cms-ws-box .mud-icon-root {
  font-size: 1.25rem;
}
/* MudNavLink top-aligns icon + text (align-items:flex-start), which leaves the
   smaller 20px icon ~2px above the text centre — center them. */
body[data-theme^="leo"] .cms-nav .mud-nav-link { align-items: center; }
body[data-theme^="leo"] .cms-appbar-usericon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 0.5rem;
  color: var(--mfg); cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
body[data-theme^="leo"] .cms-appbar-usericon:hover { background: var(--muted); color: var(--fg); }
/* 4px between the trailing appbar controls (dark toggle / language / user) so their
   hover squares don't touch. */
body[data-theme^="leo"] .cms-appbar .mud-spacer ~ .mud-icon-button,
body[data-theme^="leo"] .cms-appbar .mud-spacer ~ .mud-menu {
  margin-left: 4px;
}

/* Leo themes: the page title moves to a top-rail breadcrumb (AppTitle › page), so
   hide the in-content PageHeader. App title reads as the breadcrumb root. */
body[data-theme^="leo"] .cms-page-header { display: none !important; } /* beats MudBlazor's d-flex !important */
/* Many admin pages still render an inline `<MudText Typo="Typo.h4">` page title (not the
   PageHeader component). Under Leo the breadcrumb already names the page, so hide those too —
   scoped to the admin content (xl container) so resident pages (md container, no breadcrumb)
   and the Pay/Confirm amount keep their h4. Where the title shared a toolbar row with an
   action, right-align the leftover action so it stays top-right. */
body[data-theme^="leo"] .mud-container-maxwidth-xl .mud-typography-h4 { display: none; }
body[data-theme^="leo"] .mud-container-maxwidth-xl .d-flex.justify-space-between:has(> .mud-typography-h4) {
  justify-content: flex-end !important; /* beats MudBlazor's .justify-space-between !important */
}
body[data-theme^="leo"] .cms-appbar-title { font-weight: 500; }
body[data-theme^="leo"] .cms-appbar .cms-crumb-sep.mud-icon-root { font-size: 1rem; color: var(--mfg); }
body[data-theme^="leo"] .cms-crumb-current { font-weight: 500; color: var(--fg); } /* match the root crumb weight */

/* ── Leo 01 — typeface (Manrope) + nav-gap (6px), baked from the Leo Type pass ──
   Manrope mapped onto MudBlazor's typography family vars (weights/sizes preserved);
   Manrope is self-hosted (@font-face at the top). Top-level nav gap = 6px: the navmenu becomes a
   flex column so `gap` spaces only its direct children; expanded group children keep
   their own spacing. */
body[data-theme^="leo"] {
  font-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-default-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-h1-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-h2-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-h3-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-h4-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-h5-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-h6-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-body1-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-body2-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-button-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-caption-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-subtitle1-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-subtitle2-family: 'Manrope', system-ui, sans-serif;
  --mud-typography-overline-family: 'Manrope', system-ui, sans-serif;
}
body[data-theme^="leo"] .cms-nav .mud-navmenu {
  display: flex; flex-direction: column; gap: 6px;
}
body[data-theme^="leo"] .cms-nav .mud-navmenu > .mud-nav-link,
body[data-theme^="leo"] .cms-nav .mud-navmenu > .mud-nav-group {
  margin-top: 0; margin-bottom: 0;
}

/* ── Leo 01 — data tables ("simple in card") ────────────────────────────────────
   Restyle every MudDataGrid into an enclosed, rounded card with a tinted header,
   hairline row dividers and comfortable cells. Adapted from Tailwind Plus Application
   UI v4 › tables › 03-simple-in-card (desktop look). Tokens (--surface/--muted/--border/
   --fg/--mfg) derive from --mud-palette-* under Leo, so it's dark-correct. CSS-only,
   theme-gated, strippable; no markup/logic change. Mobile column-stacking is handled
   separately (MudDataGrid emits no per-cell labels, so 07-style stacking needs more
   than CSS). */

/* The grid root becomes the card: hairline border, rounded + clipped corners,
   surface fill, soft shadow-sm. Overrides MudBlazor's mud-elevation-1 shadow. */
body[data-theme^="leo"] .mud-data-grid.mud-table {
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--surface);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden; /* clip header tint + rows to the rounded corners */
}

/* Header: subtle tint, semibold sm text, hairline divider under it. */
body[data-theme^="leo"] .mud-data-grid .mud-table-head { background: var(--muted); }
body[data-theme^="leo"] .mud-data-grid .mud-table-head .mud-table-cell {
  background: transparent;
  color: var(--fg);
  font-weight: 600;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--border);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Body cells: comfortable padding, hairline row dividers via border-top (so we control
   the model rather than fighting MudBlazor's per-cell border-bottom). */
body[data-theme^="leo"] .mud-data-grid tbody .mud-table-cell {
  color: var(--fg);
  font-size: 0.875rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: none;
  border-top: 1px solid var(--border);
}
/* First row needs no top divider — the header already provides the separation. */
body[data-theme^="leo"] .mud-data-grid tbody .mud-table-row:first-child .mud-table-cell {
  border-top: none;
}

/* Edge-column gutters (matches 03's pl-6 / pr-6). */
body[data-theme^="leo"] .mud-data-grid .mud-table-cell:first-child { padding-left: 1.25rem; }
body[data-theme^="leo"] .mud-data-grid .mud-table-cell:last-child  { padding-right: 1.25rem; }

/* Gentle row hover. */
body[data-theme^="leo"] .mud-data-grid tbody .mud-table-row:hover {
  background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
}

/* Pager/footer, when present, sits inside the card with a hairline top. */
body[data-theme^="leo"] .mud-data-grid .mud-table-pagination {
  border-top: 1px solid var(--border);
}

/* Action icons (right-aligned cell): 4px apart, and a squared-off (6px) hover/ripple
   instead of MudBlazor's full circle. Applied to all grid icon-buttons (incl. header
   filter funnels) so the hover shape stays consistent across the table. */
body[data-theme^="leo"] .mud-data-grid .mud-table-cell.d-flex.justify-end { gap: 4px; }
body[data-theme^="leo"] .mud-data-grid .mud-icon-button { border-radius: 6px; }
body[data-theme^="leo"] .mud-data-grid .mud-icon-button .mud-ripple { border-radius: 6px; }

/* Header controls (sort / filter / column-options) read lighter than row content —
   16px vs the 20px chrome standard (Hugeicons swapped via MudDataGrid params under Leo). */
body[data-theme^="leo"] .mud-data-grid .mud-table-head .mud-icon-root { font-size: 16px; }

/* ═══ Better UI (leo02) + Auto UI (leo03) — dashboard P1-P3 ═══════════════════════
   Fork of Leo 01 (inherits every body[data-theme^="leo"] rule) plus the redesigned
   dashboard: equal-height KPI cards on the Leo card recipe, neutral values (state colour
   comes from MudBlazor Color only), and the aging breakdown as a consistent card.
   Scoped via :is() to leo02 AND its fork leo03 (Auto UI inherits the dashboard), so only
   Leo 01's dashboard stays the original for A/B in the Lab. */
body:is([data-theme="leo02"], [data-theme="leo03"]) .metric-card {
  display: flex; flex-direction: column; gap: 0.25rem;
  min-height: 7.25rem;                       /* one equal-height set regardless of sub line */
  padding: 1rem 1.125rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  color: var(--fg);
}
body:is([data-theme="leo02"], [data-theme="leo03"]) .metric-card-top { display: flex; align-items: center; justify-content: space-between; }
body:is([data-theme="leo02"], [data-theme="leo03"]) .metric-label { font-size: 0.8125rem; font-weight: 600; color: var(--mfg); }
body:is([data-theme="leo02"], [data-theme="leo03"]) .metric-icon { color: var(--mfg); font-size: 1.125rem; }
body:is([data-theme="leo02"], [data-theme="leo03"]) .metric-value { margin-top: 0.25rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
body:is([data-theme="leo02"], [data-theme="leo03"]) .metric-sub { font-size: 0.75rem; color: var(--mfg); min-height: 1rem; } /* reserve space so empty subs still align */

/* Aging breakdown — same card recipe, four currency buckets. */
body:is([data-theme="leo02"], [data-theme="leo03"]) .aging-card {
  margin-top: 1.5rem; padding: 1rem 1.125rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
body:is([data-theme="leo02"], [data-theme="leo03"]) .aging-title { font-size: 0.9375rem; font-weight: 600; color: var(--fg); margin-bottom: 0.75rem; }
body:is([data-theme="leo02"], [data-theme="leo03"]) .aging-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
body:is([data-theme="leo02"], [data-theme="leo03"]) .aging-bucket {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border); border-radius: 0.5rem; background: var(--muted);
}
body:is([data-theme="leo02"], [data-theme="leo03"]) .aging-k { font-size: 0.75rem; color: var(--mfg); }
body:is([data-theme="leo02"], [data-theme="leo03"]) .aging-v { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }

/* Better UI dashboard — context header (P3) + grouped section subheads (P2). */
body:is([data-theme="leo02"], [data-theme="leo03"]) .dash-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
body:is([data-theme="leo02"], [data-theme="leo03"]) .dash-header-icon { font-size: 1.25rem; color: var(--mfg); }
body:is([data-theme="leo02"], [data-theme="leo03"]) .dash-title { font-size: 1.125rem; font-weight: 600; color: var(--fg); }
body:is([data-theme="leo02"], [data-theme="leo03"]) .dash-section {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 600; color: var(--mfg); margin: 1.25rem 0 0.5rem;
}

/* Table header colour test — a light wash of the Apple Woods gold instead of the gray
   tint. leo02 + leo03 (Auto UI inherits it), so it A/Bs against Leo 01's gray header. */
body:is([data-theme="leo02"], [data-theme="leo03"]) .mud-data-grid .mud-table-head {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
/* Dark mode only (Auto UI / leo03): richer, more prominent gold on the tinted headers —
   light mode is left untouched. Relies on body[data-mode="dark"] (set by lab.js / theme.js)
   since MudBlazor 9.5 adds no dark body class. */
body[data-mode="dark"][data-theme="leo03"] .mud-data-grid .mud-table-head,
body[data-mode="dark"][data-theme="leo03"] .mud-simple-table thead th,
body[data-mode="dark"][data-theme="leo03"] .mud-dialog-title {
  background: color-mix(in srgb, var(--primary) 20%, var(--surface));
}

/* ═══ Auto UI (leo03) — component rebuild ═════════════════════════════════════════
   Comprehensive restyle of the stock-MudBlazor surfaces (dialogs, menus/selects,
   pickers, simple-tables) on top of what Auto UI already inherits from Leo 01 +
   Better UI. CSS-only + scoped to data-theme="leo03", so it's strippable and leaves
   leo01/leo02 untouched. Rules from the better-ui skill; look from Tailwind Plus v4. */

/* ── Dialogs / modals ─────────────────────────────────────────────────────────────
   Stock MudDialog had no header/footer structure and a flat surface. Give it the card
   recipe (radius, hairline, layered ambient+contact shadow — one light source) and split
   title · content · actions into clear bands with hairline dividers + 8px-scale padding. */
body[data-theme="leo03"] .mud-dialog {
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
body[data-theme="leo03"] .mud-dialog-title {
  padding: 1.125rem 1.5rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)); /* match the table header tint */
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--fg);
}
body[data-theme="leo03"] .mud-dialog-content {
  padding: 1.25rem 1.5rem;
}
body[data-theme="leo03"] .mud-dialog-actions {
  padding: 0.875rem 1.5rem;
  margin: 0;
  border-top: 1px solid var(--border);
  gap: 0.5rem;
}

/* Labels: MudBlazor tints the floated/focused label with the gold primary, which reads
   loud in a form. Quiet labels to text tones (the focus ring keeps the brand accent). */
body[data-theme="leo03"] .mud-input-label { color: var(--mfg); }
body[data-theme="leo03"] .mud-input-control.mud-focused .mud-input-label,
body[data-theme="leo03"] .mud-input-label.mud-input-label-shrink {
  color: var(--fg);
}

/* ── Inputs — contained filled fields (Tailwind-style) ────────────────────────────
   Convert MudBlazor's underline inputs (text / numeric / select / date triggers) into
   solid contained fields: subtle surface fill, hairline, rounded; the heavy underline is
   removed for a quiet primary focus ring. The floated label sits just above the box. */
body[data-theme="leo03"] .mud-input.mud-input-underline {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.5rem;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
body[data-theme="leo03"] .mud-input.mud-input-underline::before,
body[data-theme="leo03"] .mud-input.mud-input-underline::after { display: none !important; }
body[data-theme="leo03"] .mud-input.mud-input-underline.mud-focused {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
/* ── Dialog form polish (better-ui forms.md) ──────────────────────────────────────
   Keep labels visible at all times: force every field label to the floated position
   (MudBlazor's shrunk transform) whether the field is empty or filled, so the form reads
   consistently and the placeholder-label descenders (e.g. the "g" in "Slug") are no longer
   clipped by the field. Add real spacing between fields and one consistent helper-text style. */
body[data-theme="leo03"] .mud-dialog .mud-input-label {
  transform: matrix(0.75, 0, 0, 0.75, 0, -5.5) !important; /* shrunk + nudged up → ~8px gap above the field */
  transform-origin: top left;
  left: 0.75rem;                       /* align with the field's padded text */
  color: var(--mfg);
  overflow: visible;                   /* MudBlazor clips with overflow:hidden → cuts descenders (the "g" in Slug) */
  line-height: 1.5;                    /* room for descenders */
}
/* breathing room between fields (they were flush against each other) */
body[data-theme="leo03"] .mud-dialog-content .mud-input-control { margin-bottom: 1.25rem; }
/* helper text: aligned with the field text/label, and tucked close under its own field
   (proximity — it describes the field above, not the one below) */
body[data-theme="leo03"] .mud-dialog .mud-input-helper-text {
  margin-top: 0.125rem;
  padding-left: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--mfg);
}

/* ── Menus / selects / popovers ───────────────────────────────────────────────────
   Stock MudBlazor popovers were sharp-cornered, flat, with oversized rows and no
   hover/selected states (and overflowed dialogs). Give them the dropdown recipe:
   rounded + clipped, hairline + layered shadow for depth, compact rows on the 8px
   rhythm, clear hover + selected. One recipe unifies selects, the header menus
   (language / user / subdivision) and autocomplete popovers. */
body[data-theme="leo03"] .mud-popover {
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
  background: var(--surface);
  overflow: hidden;
}
body[data-theme="leo03"] .mud-popover .mud-list { padding: 0.25rem; }
body[data-theme="leo03"] .mud-popover .mud-list-item {
  border-radius: 0.375rem;
  min-height: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--fg);
  transition: background-color 0.1s ease;
}
/* MudBlazor gives the item text block my-1 margins → ~48px rows that read loose;
   reset them for a tidier ~40px row (still a comfortable tap target). */
body[data-theme="leo03"] .mud-popover .mud-list-item-text { margin-top: 0; margin-bottom: 0; }
body[data-theme="leo03"] .mud-popover .mud-list-item:hover {
  background: var(--muted);
}
/* Selected option: a quiet primary wash + medium weight instead of loud gold text. */
body[data-theme="leo03"] .mud-popover .mud-selected-item,
body[data-theme="leo03"] .mud-popover .mud-list-item.mud-selected-item:hover {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--fg);
  font-weight: 600;
}

/* ── Simple tables (account statements, audit details, prep/summary lists) ─────────
   Stock MudSimpleTable read as raw tables (loose dividers, no enclosure). Wrap them in
   the same card recipe as the data grids: hairline + rounded, gold-tinted header (to
   match the leo02/leo03 grids), hairline row dividers, comfortable cells. Scoped to
   .mud-simple-table so the MudDataGrid recipe above is untouched. */
body[data-theme="leo03"] .mud-simple-table {
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  background: var(--surface);
}
body[data-theme="leo03"] .mud-simple-table table { border: none; }
body[data-theme="leo03"] .mud-simple-table thead th {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--fg);
  font-weight: 600;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem;
}
body[data-theme="leo03"] .mud-simple-table tbody td {
  color: var(--fg);
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  border-bottom: none;
}
body[data-theme="leo03"] .mud-simple-table tbody tr:first-child td { border-top: none; }
body[data-theme="leo03"] .mud-simple-table tbody tr:hover {
  background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
}

/* ── Date pickers ─────────────────────────────────────────────────────────────────
   Stock MudDatePicker shows a big saturated-gold toolbar block (heavy) + Material
   icons. The popover already inherits the dropdown recipe (rounded + shadow + hairline);
   here we tone the toolbar to a subtle gold tint with readable text and quiet the day
   grid. Icons (calendar adornment + month chevrons) swap to Hugeicons via component
   params in markup (ThemedComponentBase.Ico). */
/* MudBlazor's .mud-theme-primary paints the toolbar gold with !important, so match it. */
body[data-theme="leo03"] .mud-picker-toolbar.mud-theme-primary {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)) !important;
  color: var(--fg) !important;
  border-bottom: 1px solid var(--border);
}
body[data-theme="leo03"] .mud-picker-toolbar .mud-button-root,
body[data-theme="leo03"] .mud-picker-toolbar .mud-typography {
  color: var(--fg) !important;
}
body[data-theme="leo03"] .mud-picker-calendar-header,
body[data-theme="leo03"] .mud-picker-calendar-header .mud-typography { color: var(--fg); }
/* Selected day keeps the brand fill; current day reads as a quiet ring. */
body[data-theme="leo03"] .mud-picker-calendar-day.mud-current:not(.mud-selected) {
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--fg);
}