/* ============================================================================
   ENTERPRISE ERP — DARK GLASS DESIGN SYSTEM
   ----------------------------------------------------------------------------
   A single, self-contained layer that turns the existing "dark" theme into the
   dark-glassmorphism language (deep navy canvas, translucent frosted panels,
   hairline blue borders, per-accent glows, pill controls, tabular numerals).

   WHY A SEPARATE FILE, WHY SCOPED TO [data-theme="dark"]:
   * Every rule is gated on the attribute that erp-shell.js already flips
     (documentElement[data-theme="dark"]), so the light theme is literally
     untouched — the sun/moon toggle still reverts to the previous design.
   * It loads AFTER app.css, so equal-specificity selectors here win without
     having to rewrite the 1,700-line base stylesheet.
   * One place to tune the whole look instead of chasing 65 pages.

   Colour values were sampled from the reference artwork, not guessed:
   mint #35E8C9 · cyan #22D3EE · sky #38BDF8 · blue #3B82F6 · indigo #6366F1
   violet #8B5CF6 · rose #F8717F · amber #FBBF77 · ink #F5F9FF
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
[data-theme="dark"] {
    /* canvas */
    --g-bg-top: #061330;
    --g-bg-base: #040E24;
    --g-bg-deep: #02071A;

    /* type */
    --g-ink: #F5F9FF;
    --g-body: #B1CAEA;
    --g-muted: #7D93B8;
    --g-faint: #5C7099;

    /* accents */
    --g-mint: #35E8C9;
    --g-cyan: #22D3EE;
    --g-sky: #38BDF8;
    --g-blue: #3B82F6;
    --g-indigo: #6366F1;
    --g-violet: #8B5CF6;
    --g-rose: #F8717F;
    --g-amber: #FBBF77;

    /* glass surfaces */
    --g-glass: linear-gradient(160deg, rgba(124, 172, 255, 0.10) 0%, rgba(10, 20, 40, 0.34) 100%);
    --g-glass-soft: linear-gradient(160deg, rgba(124, 172, 255, 0.07) 0%, rgba(10, 20, 40, 0.24) 100%);
    --g-glass-strong: linear-gradient(160deg, rgba(134, 182, 255, 0.16) 0%, rgba(9, 18, 38, 0.55) 100%);
    --g-solid: #0B1E38;
    --g-solid-2: #0A1A32;
    --g-hair: rgba(125, 175, 255, 0.18);
    --g-hair-soft: rgba(140, 180, 255, 0.10);
    --g-blur: blur(18px) saturate(125%);

    /* radii — 16 panels / 12 inner / 20 tall / pill everything else */
    --g-radius: 16px;
    --g-radius-sm: 12px;
    --g-radius-lg: 20px;
    --g-radius-pill: 999px;

    /* elevation + glow */
    --g-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --g-shadow-sm: 0 12px 30px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --g-glow-blue: 0 0 24px rgba(56, 150, 255, 0.20);
    --g-glow-cyan: 0 0 26px rgba(34, 211, 238, 0.26);
    --g-glow-mint: 0 0 26px rgba(53, 232, 201, 0.22);
    --g-glow-violet: 0 0 26px rgba(139, 92, 246, 0.24);

    /* gradients */
    --g-grad-brand: linear-gradient(135deg, #1E6FD9 0%, #4F46E5 50%, #7C3AED 100%);
    --g-grad-mint: linear-gradient(90deg, #35E8C9 0%, #22D3EE 45%, #3B82F6 100%);
    --g-grad-violet: linear-gradient(90deg, #A78BFA 0%, #6366F1 100%);
    --g-grad-sky: linear-gradient(90deg, #38BDF8 0%, #3B82F6 100%);

    /* --- remap the legacy --erp-* tokens so every existing page inherits --- */
    --erp-primary: #3B82F6;
    --erp-primary-dark: #2563EB;
    --erp-accent: #8B5CF6;
    --erp-ink: var(--g-ink);
    --erp-ink-muted: var(--g-body);
    --erp-muted: var(--g-muted);
    --erp-surface: var(--g-solid);
    --erp-bg: var(--g-bg-base);
    --erp-border: var(--g-hair);
    --erp-radius: var(--g-radius);
    --erp-radius-card: var(--g-radius);
    --erp-shadow: var(--g-shadow);
    --erp-shadow-card: var(--g-shadow);
    --erp-gradient: var(--g-grad-brand);
    --erp-pill-bg: rgba(59, 130, 246, 0.16);
    --erp-chip-bg: rgba(124, 172, 255, 0.12);
    --erp-elevated: #0E2242;
    --erp-nav-hover: rgba(140, 180, 255, 0.08);
    /* referenced with a #fff fallback by dashboard tiles — must exist here */
    --erp-card: var(--g-solid-2);
    --erp-success: var(--g-mint);
    --erp-warning: var(--g-amber);
    --erp-error: var(--g-rose);
    --erp-pos: var(--g-mint);
    --erp-neg: var(--g-rose);
    --erp-surface-muted: rgba(2, 7, 22, 0.45);
}

/* --------------------------------------------------------------- canvas -- */
[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] .mud-layout {
    background-color: var(--g-bg-base) !important;
    color: var(--g-ink) !important;
}

/* The glow field sits behind everything and never captures pointer events. */
[data-theme="dark"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(760px 520px at 12% 6%, rgba(10, 37, 80, 0.85), transparent 62%),
        radial-gradient(680px 460px at 30% 24%, rgba(11, 58, 94, 0.55), transparent 60%),
        radial-gradient(620px 460px at 66% 12%, rgba(27, 20, 80, 0.50), transparent 62%),
        radial-gradient(700px 520px at 88% 34%, rgba(10, 58, 52, 0.42), transparent 62%),
        radial-gradient(900px 620px at 8% 92%, rgba(12, 40, 88, 0.55), transparent 66%),
        linear-gradient(180deg, var(--g-bg-top) 0%, var(--g-bg-base) 42%, var(--g-bg-deep) 100%);
}

[data-theme="dark"] .app-container {
    background: transparent;
}

/* ------------------------------------------------------------ typography -- */
[data-theme="dark"] body {
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -0.011em;
}

[data-theme="dark"] .mud-text,
[data-theme="dark"] .mud-paper,
[data-theme="dark"] .mud-table {
    color: var(--g-body);
}

[data-theme="dark"] .mud-typography-h4,
[data-theme="dark"] .mud-typography-h5,
[data-theme="dark"] .mud-typography-h6,
[data-theme="dark"] .mud-typography-subtitle1,
[data-theme="dark"] .mud-table-head th {
    color: var(--g-ink);
    letter-spacing: -0.02em;
}

[data-theme="dark"] .mud-typography-caption,
[data-theme="dark"] .mud-typography-body2,
[data-theme="dark"] .mud-input-label,
[data-theme="dark"] .mud-table-footer,
[data-theme="dark"] .mud-select-text {
    color: var(--g-muted);
}

/* money / numbers line up in columns */
[data-theme="dark"] .mud-table-body td,
[data-theme="dark"] .erp-kpi .kpi-value,
[data-theme="dark"] .erp-money {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- glass surface (base) -- */
[data-theme="dark"] .mud-paper,
[data-theme="dark"] .mud-card,
[data-theme="dark"] .erp-paper,
[data-theme="dark"] .erp-card,
[data-theme="dark"] .erp-kpi,
[data-theme="dark"] .erp-toolbar,
[data-theme="dark"] .stg-card,
[data-theme="dark"] .stg-actionbar {
    background: var(--g-glass) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius) !important;
    box-shadow: var(--g-shadow) !important;
    color: var(--g-body);
}

[data-theme="dark"] .mud-card-header,
[data-theme="dark"] .mud-card-content,
[data-theme="dark"] .mud-card-actions {
    background: transparent;
    border-color: var(--g-hair-soft);
}

[data-theme="dark"] .mud-paper-outlined {
    background: var(--g-glass-soft) !important;
    border: 1px solid var(--g-hair) !important;
}

/* nested sub-cards speak the same language one size down */
[data-theme="dark"] .mud-paper.mud-paper-sub,
[data-theme="dark"] .erp-subcard {
    background: rgba(6, 16, 34, 0.55) !important;
    border: 1px solid var(--g-hair-soft) !important;
    border-radius: var(--g-radius-sm) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

[data-theme="dark"] .mud-divider,
[data-theme="dark"] .erp-card .mud-divider {
    background-color: var(--g-hair-soft) !important;
}

/* accent identity: one hue drives border + wash + icon tile + glow */
[data-theme="dark"] .erp-kpi {
    position: relative;
    overflow: hidden;
    padding: 18px;
}

[data-theme="dark"] .erp-kpi::before {
    content: "";
    position: absolute;
    inset: -40% 45% 45% -40%;
    background: radial-gradient(circle at 30% 30%, var(--kpi-wash, rgba(59, 130, 246, 0.28)), transparent 62%);
    pointer-events: none;
}

[data-theme="dark"] .erp-kpi .kpi-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--g-muted);
}

[data-theme="dark"] .erp-kpi .kpi-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--g-ink);
}

[data-theme="dark"] .erp-kpi .kpi-ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--kpi-tint, rgba(59, 130, 246, 0.14)) !important;
    color: var(--kpi-accent, var(--g-blue)) !important;
    box-shadow: 0 0 0 1px var(--kpi-ring, rgba(125, 175, 255, 0.18)) inset;
}

/* the "featured" card: brighter border + outer glow */
[data-theme="dark"] .erp-kpi.is-featured,
[data-theme="dark"] .erp-card.is-featured {
    border-color: rgba(90, 190, 255, 0.55) !important;
    box-shadow: var(--g-glow-blue), var(--g-shadow) !important;
}

/* accent variants — applied by adding one class next to erp-kpi/erp-card */
[data-theme="dark"] .erp-kpi.acc-mint { --kpi-wash: rgba(53, 232, 201, 0.22); --kpi-tint: rgba(53, 232, 201, 0.14); --kpi-accent: var(--g-mint); --kpi-ring: rgba(53, 232, 201, 0.28); }
[data-theme="dark"] .erp-kpi.acc-cyan { --kpi-wash: rgba(34, 211, 238, 0.24); --kpi-tint: rgba(34, 211, 238, 0.14); --kpi-accent: var(--g-cyan); --kpi-ring: rgba(34, 211, 238, 0.30); }
[data-theme="dark"] .erp-kpi.acc-sky  { --kpi-wash: rgba(56, 189, 248, 0.22); --kpi-tint: rgba(56, 189, 248, 0.14); --kpi-accent: var(--g-sky); --kpi-ring: rgba(56, 189, 248, 0.28); }
[data-theme="dark"] .erp-kpi.acc-blue { --kpi-wash: rgba(59, 130, 246, 0.26); --kpi-tint: rgba(59, 130, 246, 0.16); --kpi-accent: var(--g-blue); --kpi-ring: rgba(59, 130, 246, 0.30); }
[data-theme="dark"] .erp-kpi.acc-violet { --kpi-wash: rgba(139, 92, 246, 0.24); --kpi-tint: rgba(139, 92, 246, 0.14); --kpi-accent: var(--g-violet); --kpi-ring: rgba(139, 92, 246, 0.30); }
[data-theme="dark"] .erp-kpi.acc-rose { --kpi-wash: rgba(248, 113, 127, 0.20); --kpi-tint: rgba(248, 113, 127, 0.14); --kpi-accent: var(--g-rose); --kpi-ring: rgba(248, 113, 127, 0.28); }
[data-theme="dark"] .erp-kpi.acc-amber { --kpi-wash: rgba(251, 191, 119, 0.20); --kpi-tint: rgba(251, 191, 119, 0.14); --kpi-accent: var(--g-amber); --kpi-ring: rgba(251, 191, 119, 0.28); }

/* delta row (↑ 12.5%) under a KPI value */
[data-theme="dark"] .erp-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .erp-delta.up { color: var(--g-mint); }
[data-theme="dark"] .erp-delta.down { color: var(--g-rose); }
[data-theme="dark"] .erp-delta.flat { color: var(--g-muted); }

/* ---------------------------------------------------------------- tables -- */
[data-theme="dark"] .mud-table,
[data-theme="dark"] .mud-table-container {
    background: transparent !important;
    color: var(--g-body) !important;
}

[data-theme="dark"] .mud-table-head th {
    background: rgba(140, 180, 255, 0.06) !important;
    color: var(--g-ink) !important;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid var(--g-hair-soft) !important;
}

/* the header strip is a rounded translucent band in the reference */
[data-theme="dark"] .mud-table-head th:first-child { border-radius: 10px 0 0 10px; }
[data-theme="dark"] .mud-table-head th:last-child { border-radius: 0 10px 10px 0; }

[data-theme="dark"] .mud-table-body td {
    border-bottom: 1px solid var(--g-hair-soft) !important;
    color: var(--g-body);
}

[data-theme="dark"] .mud-table-hover tbody tr:hover td {
    background: rgba(140, 180, 255, 0.06) !important;
}

[data-theme="dark"] .mud-table-striped tbody tr.mud-table-row-striped td {
    background: rgba(140, 180, 255, 0.03) !important;
}

[data-theme="dark"] .mud-table-footer,
[data-theme="dark"] .mud-table-pagination-toolbar,
[data-theme="dark"] .mud-table-pagination-select {
    color: var(--g-muted) !important;
    border-top: 1px solid var(--g-hair-soft) !important;
}

[data-theme="dark"] .mud-table-pagination-actions .mud-icon-button {
    color: var(--g-body) !important;
}

[data-theme="dark"] .mud-table-empty-row,
[data-theme="dark"] .erp-empty {
    color: var(--g-muted) !important;
}

[data-theme="dark"] .erp-row-low td {
    background: rgba(251, 191, 119, 0.10) !important;
}

/* ---------------------------------------------------------------- chips --- */
[data-theme="dark"] .mud-chip,
[data-theme="dark"] .erp-chip {
    background: rgba(140, 180, 255, 0.10) !important;
    border: 1px solid transparent !important;
    border-radius: var(--g-radius-pill) !important;
    color: var(--g-body) !important;
    font-weight: 600;
}

[data-theme="dark"] .erp-chip:hover { border-color: var(--g-hair) !important; }

[data-theme="dark"] .erp-chip.active {
    background: rgba(59, 130, 246, 0.20) !important;
    color: #BFDBFE !important;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.22);
}

[data-theme="dark"] .mud-chip.mud-chip-color-primary,
[data-theme="dark"] .mud-chip.mud-chip-color-info { background: rgba(59, 130, 246, 0.18) !important; color: #BFDBFE !important; }
[data-theme="dark"] .mud-chip.mud-chip-color-success { background: rgba(53, 232, 201, 0.14) !important; color: var(--g-mint) !important; }
[data-theme="dark"] .mud-chip.mud-chip-color-warning { background: rgba(251, 191, 119, 0.14) !important; color: var(--g-amber) !important; }
[data-theme="dark"] .mud-chip.mud-chip-color-error { background: rgba(248, 113, 127, 0.14) !important; color: var(--g-rose) !important; }
[data-theme="dark"] .mud-chip.mud-chip-color-secondary { background: rgba(139, 92, 246, 0.16) !important; color: #C4B5FD !important; }

[data-theme="dark"] .mud-chip-filled.mud-chip-color-primary { background: var(--g-grad-brand) !important; color: #fff !important; }

/* status pills used across invoices / payroll / subscription lists */
[data-theme="dark"] .erp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--g-radius-pill);
    font-size: 12px;
    font-weight: 700;
    border: none;
}

[data-theme="dark"] .erp-pill.paid,
[data-theme="dark"] .erp-pill.ok { background: rgba(53, 232, 201, 0.14); color: var(--g-mint); }
[data-theme="dark"] .erp-pill.pending,
[data-theme="dark"] .erp-pill.warn { background: rgba(251, 191, 119, 0.14); color: var(--g-amber); }
[data-theme="dark"] .erp-pill.overdue,
[data-theme="dark"] .erp-pill.err { background: rgba(248, 113, 127, 0.14); color: var(--g-rose); }
[data-theme="dark"] .erp-pill.info { background: rgba(56, 189, 248, 0.14); color: var(--g-sky); }

/* --------------------------------------------------------------- buttons -- */
[data-theme="dark"] .mud-button-root {
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px;
}

[data-theme="dark"] .mud-button-filled,
[data-theme="dark"] .mud-button-outlined,
[data-theme="dark"] .mud-button-text {
    border-radius: var(--g-radius-pill) !important;
}

[data-theme="dark"] .mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(135deg, #1E6FD9 0%, #0B3E86 100%) !important;
    border: 1.5px solid rgba(90, 190, 255, 0.55) !important;
    color: #fff !important;
    box-shadow: 0 0 22px rgba(34, 211, 238, 0.24), 0 14px 30px -18px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .mud-button-filled.mud-button-filled-secondary {
    background: linear-gradient(135deg, #7C3AED 0%, #4338CA 100%) !important;
    border: 1.5px solid rgba(167, 139, 250, 0.5) !important;
    color: #fff !important;
    box-shadow: 0 0 22px rgba(139, 92, 246, 0.28) !important;
}

[data-theme="dark"] .mud-button-filled.mud-button-filled-success {
    background: linear-gradient(135deg, #35E8C9 0%, #0E9F86 100%) !important;
    color: #04231E !important;
    box-shadow: 0 0 22px rgba(53, 232, 201, 0.28) !important;
}

[data-theme="dark"] .mud-button-filled.mud-button-filled-error {
    background: linear-gradient(135deg, #F8717F 0%, #B91C1C 100%) !important;
    color: #fff !important;
}

[data-theme="dark"] .mud-button-outlined {
    background: rgba(140, 180, 255, 0.05) !important;
    border: 1px solid var(--g-hair) !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .mud-button-outlined:hover { background: rgba(140, 180, 255, 0.12) !important; border-color: rgba(125, 175, 255, 0.4) !important; }

[data-theme="dark"] .mud-button-text {
    color: var(--g-sky) !important;
}

[data-theme="dark"] .mud-button-text:hover { background: rgba(56, 189, 248, 0.12) !important; }

[data-theme="dark"] .mud-icon-button {
    color: var(--g-body) !important;
    border-radius: 12px !important;
}

[data-theme="dark"] .mud-icon-button:hover { background: rgba(140, 180, 255, 0.12) !important; color: var(--g-ink) !important; }

[data-theme="dark"] .mud-fab.mud-button-filled-primary {
    background: var(--g-grad-brand) !important;
    box-shadow: 0 0 28px rgba(59, 130, 246, 0.45) !important;
}

/* ---------------------------------------------------------------- fields -- */
[data-theme="dark"] .mud-input {
    color: var(--g-ink) !important;
}

[data-theme="dark"] .mud-input::placeholder,
[data-theme="dark"] ::placeholder {
    color: var(--g-faint) !important;
    opacity: 1;
}

[data-theme="dark"] .mud-input-label {
    color: var(--g-muted) !important;
}

[data-theme="dark"] .mud-input-label:focus,
[data-theme="dark"] .mud-input-label.mud-shrink {
    color: var(--g-sky) !important;
}

[data-theme="dark"] .mud-input > input,
[data-theme="dark"] .mud-input > textarea,
[data-theme="dark"] .mud-input-select fieldset,
[data-theme="dark"] .mud-input-control > div {
    color: var(--g-ink) !important;
}

/* outlined inputs become glass boxes with a glowing focus ring */
[data-theme="dark"] .mud-input-outlined-with-label,
[data-theme="dark"] .mud-input-outlined-border,
[data-theme="dark"] .mud-input-control > fieldset {
    border-color: var(--g-hair) !important;
    border-radius: var(--g-radius-sm) !important;
    background: rgba(6, 16, 34, 0.45);
}

[data-theme="dark"] .mud-input-control:focus-within fieldset,
[data-theme="dark"] .mud-input-control:focus-within > div {
    border-color: rgba(56, 189, 248, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14) !important;
}

[data-theme="dark"] .mud-input-underline::before,
[data-theme="dark"] .mud-input-underline::after {
    background-color: var(--g-hair) !important;
}

[data-theme="dark"] .mud-input-helper-text,
[data-theme="dark"] .mud-input-caption {
    color: var(--g-faint) !important;
}

[data-theme="dark"] .mud-input-error-text,
[data-theme="dark"] .mud-input-error {
    color: var(--g-rose) !important;
}

[data-theme="dark"] .mud-select-text,
[data-theme="dark"] .mud-input-select {
    color: var(--g-ink) !important;
}

[data-theme="dark"] .mud-icon-button.mud-input-adornment,
[data-theme="dark"] .mud-input-adornment .mud-icon-button {
    color: var(--g-muted) !important;
}

[data-theme="dark"] .mud-autocomplete .mud-popover,
[data-theme="dark"] .mud-select .mud-popover {
    background: var(--g-glass-strong) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius-sm) !important;
    box-shadow: var(--g-shadow) !important;
}

/* ============================================================================
   POPUPS — dialogs, overlays, menus, pickers, snackbars, tooltips
   Every floating surface in the app is glass: frosted fill, hairline rim,
   wide radius, deep glow, and a dimmed canvas behind it.
   ========================================================================== */
[data-theme="dark"] .mud-overlay {
    background-color: rgba(2, 7, 22, 0.72) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

[data-theme="dark"] .mud-overlay-paper {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: var(--g-radius-lg) !important;
}

[data-theme="dark"] .mud-dialog {
    background: var(--g-glass-strong) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), var(--g-glow-blue) !important;
    color: var(--g-body) !important;
    overflow: hidden;
}

/* thin light sweep across the top of every dialog header */
[data-theme="dark"] .mud-dialog::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(140, 190, 255, 0.10), transparent);
    pointer-events: none;
}

[data-theme="dark"] .mud-dialog-title {
    color: var(--g-ink) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--g-hair-soft);
    padding-bottom: 14px;
    background: transparent !important;
}

[data-theme="dark"] .mud-dialog-content {
    color: var(--g-body) !important;
    background: transparent !important;
}

[data-theme="dark"] .mud-dialog-actions {
    background: transparent !important;
    border-top: 1px solid var(--g-hair-soft);
    padding: 14px 20px;
}

[data-theme="dark"] .mud-dialog .mud-icon-button {
    color: var(--g-muted) !important;
}

/* generic popover / menu / list chrome */
[data-theme="dark"] .mud-popover {
    background: var(--g-glass-strong) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius) !important;
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.85) !important;
    color: var(--g-body) !important;
}

[data-theme="dark"] .mud-popover.mud-popover-menu .mud-list,
[data-theme="dark"] .mud-menu-list,
[data-theme="dark"] .mud-list {
    background: transparent !important;
}

[data-theme="dark"] .mud-list-item,
[data-theme="dark"] .mud-menu-item {
    color: var(--g-body) !important;
    border-radius: 10px !important;
    margin: 2px 6px;
}

[data-theme="dark"] .mud-list-item:hover,
[data-theme="dark"] .mud-menu-item:hover,
[data-theme="dark"] .mud-list-item.mud-ripple:active {
    background: rgba(140, 180, 255, 0.10) !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .mud-list-item-text,
[data-theme="dark"] .mud-list-item-icon {
    color: var(--g-body) !important;
}

[data-theme="dark"] .mud-list-subheader {
    color: var(--g-faint) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
    background: transparent !important;
}

[data-theme="dark"] .mud-divider-solid,
[data-theme="dark"] .mud-list-divider {
    background-color: var(--g-hair-soft) !important;
}

/* date / time pickers are dialogs+popovers too */
[data-theme="dark"] .mud-picker,
[data-theme="dark"] .mud-picker-day {
    background: transparent !important;
    color: var(--g-body) !important;
}

[data-theme="dark"] .mud-picker-toolbar {
    background: rgba(11, 30, 56, 0.9) !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .mud-picker-day-current {
    border-color: var(--g-sky) !important;
}

[data-theme="dark"] .mud-picker-day.mud-picker-day-selected,
[data-theme="dark"] .mud-picker-list-item .mud-button-text.mud-selected-item {
    background: var(--g-grad-brand) !important;
    color: #fff !important;
    box-shadow: var(--g-glow-blue);
}

/* snackbars — app-wide notification popups */
[data-theme="dark"] .mud-snackbar {
    background: var(--g-glass-strong) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius) !important;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85) !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .mud-snackbar.mud-snackbar-filled-success { border-color: rgba(53, 232, 201, 0.45) !important; box-shadow: var(--g-glow-mint), 0 24px 60px -24px rgba(0,0,0,.85) !important; }
[data-theme="dark"] .mud-snackbar.mud-snackbar-filled-error { border-color: rgba(248, 113, 127, 0.45) !important; box-shadow: 0 0 24px rgba(248,113,127,.22), 0 24px 60px -24px rgba(0,0,0,.85) !important; }
[data-theme="dark"] .mud-snackbar.mud-snackbar-filled-warning { border-color: rgba(251, 191, 119, 0.45) !important; }
[data-theme="dark"] .mud-snackbar.mud-snackbar-filled-info { border-color: rgba(56, 189, 248, 0.45) !important; }

[data-theme="dark"] .mud-snackbar-content-message {
    color: var(--g-ink) !important;
    font-weight: 600;
}

/* tooltips */
[data-theme="dark"] .mud-tooltip {
    background: rgba(8, 20, 40, 0.92) !important;
    border: 1px solid var(--g-hair) !important;
    border-radius: 10px !important;
    color: var(--g-ink) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* --------------------------------------------------- tabs / navigation --- */
[data-theme="dark"] .mud-tabs {
    background: transparent !important;
    border-color: var(--g-hair-soft) !important;
}

[data-theme="dark"] .mud-tab {
    color: var(--g-muted) !important;
    font-weight: 600;
    text-transform: none !important;
    border-radius: var(--g-radius-pill) !important;
}

[data-theme="dark"] .mud-tab:hover { color: var(--g-ink) !important; background: rgba(140, 180, 255, 0.07) !important; }

[data-theme="dark"] .mud-tab-active {
    color: var(--g-ink) !important;
    background: rgba(59, 130, 246, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(90, 190, 255, 0.35);
}

[data-theme="dark"] .mud-tabs-panels { color: var(--g-body) !important; background: transparent !important; }
[data-theme="dark"] .mud-tab-slider { background: var(--g-grad-mint) !important; height: 3px !important; border-radius: 999px; }

/* pill-style segmented toggles */
[data-theme="dark"] .mud-toggle-group .mud-toggle-item {
    background: rgba(6, 16, 34, 0.5) !important;
    border-color: var(--g-hair) !important;
    color: var(--g-body) !important;
}

[data-theme="dark"] .mud-toggle-item.mud-toggle-selected {
    background: rgba(59, 130, 246, 0.22) !important;
    color: var(--g-ink) !important;
    box-shadow: inset 0 0 0 1px rgba(90, 190, 255, 0.45);
}

/* ------------------------------------------------------------ indicators -- */
[data-theme="dark"] .mud-alert {
    background: rgba(6, 16, 34, 0.55) !important;
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius-sm) !important;
    color: var(--g-body) !important;
}

[data-theme="dark"] .mud-alert-text-info { border-color: rgba(56, 189, 248, 0.35) !important; }
[data-theme="dark"] .mud-alert-text-success { border-color: rgba(53, 232, 201, 0.35) !important; }
[data-theme="dark"] .mud-alert-text-warning { border-color: rgba(251, 191, 119, 0.35) !important; }
[data-theme="dark"] .mud-alert-text-error { border-color: rgba(248, 113, 127, 0.35) !important; }
[data-theme="dark"] .mud-alert-message { color: var(--g-ink) !important; }

/* progress bars: pill track + gradient fill with a glowing leading edge */
[data-theme="dark"] .mud-progress-linear { color: var(--g-cyan) !important; }

[data-theme="dark"] .mud-progress-linear-bars {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--g-hair-soft);
    border-radius: var(--g-radius-pill) !important;
    overflow: hidden;
}

[data-theme="dark"] .mud-progress-linear-bar { background: var(--g-grad-mint) !important; box-shadow: 0 0 14px rgba(34, 211, 238, 0.5); }
[data-theme="dark"] .mud-progress-circular { color: var(--g-cyan) !important; }

[data-theme="dark"] .mud-badge.mud-badge-success { background: var(--g-mint) !important; color: #04231E !important; }
[data-theme="dark"] .mud-badge.mud-badge-error { background: var(--g-rose) !important; }
[data-theme="dark"] .mud-badge.mud-badge-primary { background: var(--g-cyan) !important; color: #04231E !important; }

[data-theme="dark"] .mud-avatar {
    background: linear-gradient(135deg, #3B82F6, #6366F1) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.35);
}

[data-theme="dark"] .mud-skeleton {
    background: rgba(140, 180, 255, 0.10) !important;
    border-radius: 10px;
}

[data-theme="dark"] .mud-skeleton::after { background: rgba(140, 180, 255, 0.16) !important; }

[data-theme="dark"] .mud-switch-track { fill: rgba(140, 180, 255, 0.25) !important; }
[data-theme="dark"] .mud-checkbox-input ~ svg,
[data-theme="dark"] .mud-svg-icon { color: var(--g-body); }

[data-theme="dark"] .mud-expand-panel {
    background: transparent !important;
    border-bottom: 1px solid var(--g-hair-soft) !important;
    color: var(--g-body) !important;
}

[data-theme="dark"] .mud-expansion-panels {
    background: var(--g-glass) !important;
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
}

[data-theme="dark"] .mud-breadcrumbs,
[data-theme="dark"] .mud-link { color: var(--g-muted) !important; }
[data-theme="dark"] .mud-link.mud-link-color-primary { color: var(--g-sky) !important; }

/* ============================================================================
   APP SHELL — floating header + rounded glass sidebar card
   ========================================================================== */
[data-theme="dark"] .erp-appbar,
[data-theme="dark"] .mud-appbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--g-ink) !important;
    padding: 10px 18px !important;
}

[data-theme="dark"] .mud-appbar .mud-text,
[data-theme="dark"] .erp-appbar .mud-text { color: var(--g-ink) !important; }

[data-theme="dark"] .erp-appbar-title {
    /* background-clip:text needs the gradient as a longhand: an !important `background`
       shorthand also resets background-clip to border-box !important, which painted the
       title as a solid ice-blue plate with invisible text. */
    background-image: linear-gradient(90deg, #F5F9FF, #9ED9FF) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
}

/* the drawer is a card that stops short of the viewport bottom, per the pin.
   TWO rules learned the hard way:
   1. This geometry may only be applied while the drawer is OPEN. These are !important
      offsets, and applying them to a closed drawer neutralises MudBlazor's own hide, so a
      "closed" panel keeps sitting on top of the page at z-index 1302 with pointer-events
      auto and silently swallows every click underneath it (the UI looks frozen).
   2. The real position class is .mud-drawer-pos-right; .mud-drawer-right does not exist,
      so the old :not() guard never excluded the right-hand notifications rail. */
[data-theme="dark"] .erp-drawer.mud-drawer--open,
[data-theme="dark"] .mud-drawer.mud-drawer--open:not(.mud-drawer-temporary):not(.mud-drawer-pos-right) {
    background: var(--g-glass) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: var(--g-shadow) !important;
    top: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    height: auto !important;
    max-height: calc(100vh - 24px) !important;
    /* 3. Scroll Y, clip X only. MudBlazor scrolls a drawer on the ROOT element
       (.mud-drawer{overflow-y:auto}); .mud-drawer-content is height:100% and never scrolls
       itself. So clipping this root with overflow:hidden removed all scrolling and the long
       SuperAdmin nav was simply cut off, with no way to reach the last group. It only bit the
       dark theme because the light theme never overrode MudBlazor's own overflow. */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    color: var(--g-body) !important;
}

/* the notifications rail is a floating glass panel on the right */
[data-theme="dark"] .mud-drawer.mud-drawer-temporary.mud-drawer--open {
    background: var(--g-glass-strong) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), var(--g-glow-blue) !important;
    top: 12px !important;
    bottom: 12px !important;
    right: 12px !important;
    height: auto !important;
    max-height: calc(100vh - 24px) !important;
    /* same as the nav drawer: the rail must scroll when the notification list is long */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    color: var(--g-body) !important;
}

/* Safety net, both themes: anything that is not an open drawer is decorative as far as
   input goes, so a half-hidden panel can never trap the pointer again. */
.mud-drawer:not(.mud-drawer--open) { pointer-events: none; }

/* temporary drawers dim the canvas the same way a dialog does */
[data-theme="dark"] .mud-drawer-overlay {
    background-color: rgba(2, 7, 22, 0.66) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

[data-theme="dark"] .erp-brand-card,
[data-theme="dark"] .erp-drawer-brand {
    background: rgba(6, 16, 34, 0.45) !important;
    border: 1px solid var(--g-hair-soft) !important;
    border-radius: 14px !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .erp-brand-card .brand-badge {
    background: var(--g-grad-brand) !important;
    box-shadow: var(--g-glow-blue);
}

[data-theme="dark"] .erp-nav .nav-section-label { color: var(--g-faint) !important; }

[data-theme="dark"] .erp-nav .mud-nav-link {
    border-radius: var(--g-radius-pill) !important;
    margin: 3px 10px !important;
    color: var(--g-body) !important;
    font-weight: 500;
}

[data-theme="dark"] .erp-nav .mud-nav-link:not(.active):hover {
    background: rgba(140, 180, 255, 0.09) !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .erp-nav .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.28), rgba(34, 211, 238, 0.14)) !important;
    border: 1px solid rgba(90, 190, 255, 0.55);
    color: var(--g-ink) !important;
    font-weight: 700;
    box-shadow: var(--g-glow-cyan);
}

/* the old left accent bar fights the pill look */
[data-theme="dark"] .erp-nav .mud-nav-link.active::before { content: none !important; }

[data-theme="dark"] .erp-nav .mud-nav-link.active .mud-nav-link-icon,
[data-theme="dark"] .erp-nav .mud-nav-link .mud-nav-link-icon { color: var(--g-sky) !important; }

[data-theme="dark"] .erp-user-card {
    background: rgba(6, 16, 34, 0.55) !important;
    border: 1px solid var(--g-hair-soft) !important;
    border-radius: 14px !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .erp-user-card .u-name { color: var(--g-ink) !important; }
[data-theme="dark"] .erp-user-card .u-role { color: var(--g-muted) !important; }

/* header chrome: search pill, ⌘K chip, bell dot, avatar chip, clock pill */
[data-theme="dark"] .erp-search-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(460px, 40vw);
    height: 42px;
    padding: 0 8px 0 14px;
    border-radius: 14px;
    background: rgba(6, 16, 34, 0.55);
    border: 1px solid var(--g-hair);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--g-muted);
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="dark"] .erp-search-pill:hover,
[data-theme="dark"] .erp-search-pill:focus-within {
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.10);
}

[data-theme="dark"] .erp-search-pill input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--g-ink);
    font: inherit;
    font-size: 14px;
}

[data-theme="dark"] .erp-search-wrap { margin-left: 26px; }

/* the results drop is a dialog-grade floating panel */
[data-theme="dark"] .erp-search-results {
    background: var(--g-glass-strong) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.85) !important;
}

[data-theme="dark"] .erp-search-results .sr-item { color: var(--g-body) !important; }

[data-theme="dark"] .erp-search-results .sr-item:hover {
    background: rgba(140, 180, 255, 0.10) !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .erp-search-results .sr-group { color: var(--g-faint) !important; }

[data-theme="dark"] .erp-kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid var(--g-hair);
    background: rgba(140, 180, 255, 0.08);
    color: var(--g-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

[data-theme="dark"] .erp-bell { position: relative; }

[data-theme="dark"] .erp-bell::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--g-cyan);
    box-shadow: 0 0 10px var(--g-cyan);
}

[data-theme="dark"] .erp-bell.has-badge::after { content: none; }

[data-theme="dark"] .erp-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    border-radius: var(--g-radius-pill);
    background: rgba(6, 16, 34, 0.55);
    border: 1px solid var(--g-hair);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--g-ink);
    cursor: pointer;
}

[data-theme="dark"] .erp-user-chip:hover { border-color: rgba(90, 190, 255, 0.5); }

[data-theme="dark"] .erp-user-chip .uc-name { font-size: 13px; font-weight: 700; line-height: 1.1; }
[data-theme="dark"] .erp-user-chip .uc-plan { font-size: 11px; color: var(--g-muted); }

[data-theme="dark"] .erp-user-chip .uc-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.45);
}

[data-theme="dark"] .erp-clock-pill {
    background: rgba(6, 16, 34, 0.55) !important;
    border: 1px solid var(--g-hair);
    color: var(--g-ink) !important;
    box-shadow: var(--g-shadow-sm);
}

[data-theme="dark"] .erp-clock-pill .cp-date { color: var(--g-muted) !important; }
[data-theme="dark"] .erp-clock-pill .cp-time { color: var(--g-ink) !important; }

[data-theme="dark"] .erp-role-badge {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #BFDBFE !important;
    border: 1px solid var(--g-hair);
}

[data-theme="dark"] .erp-currency {
    background: rgba(6, 16, 34, 0.55) !important;
    border-color: var(--g-hair) !important;
    color: var(--g-ink) !important;
}

/* ------------------------------------------------------------------ misc -- */
[data-theme="dark"] .erp-page-head .erp-page-title,
[data-theme="dark"] .stg-page-title,
[data-theme="dark"] .erp-section-head .erp-section-title { color: var(--g-ink) !important; }

[data-theme="dark"] .erp-section-head .erp-section-ico {
    background: rgba(59, 130, 246, 0.16) !important;
    color: var(--g-sky) !important;
    box-shadow: inset 0 0 0 1px var(--g-hair);
}

[data-theme="dark"] .erp-money { color: var(--g-ink) !important; }
[data-theme="dark"] .erp-money.pos { color: var(--g-mint) !important; }
[data-theme="dark"] .erp-fab { box-shadow: 0 0 28px rgba(59, 130, 246, 0.45) !important; }

/* settings design system: its base rules hardcode light paper */
[data-theme="dark"] .stg-card__head { border-color: var(--g-hair-soft) !important; }
[data-theme="dark"] .stg-card__title { color: var(--g-ink) !important; }
[data-theme="dark"] .stg-banner--info { background: rgba(56, 189, 248, 0.12) !important; border-color: rgba(56, 189, 248, 0.30) !important; color: #A5DDFF !important; }
[data-theme="dark"] .stg-banner--warn { background: rgba(251, 191, 119, 0.12) !important; border-color: rgba(251, 191, 119, 0.30) !important; color: var(--g-amber) !important; }
[data-theme="dark"] .stg-seg { background: rgba(6, 16, 34, 0.55) !important; border-color: var(--g-hair) !important; }
[data-theme="dark"] .stg-seg__item { color: var(--g-muted) !important; }
[data-theme="dark"] .stg-seg__item.is-active { background: var(--g-grad-brand) !important; color: #fff !important; box-shadow: var(--g-glow-blue); }
[data-theme="dark"] .stg-preview { background: rgba(59, 130, 246, 0.10) !important; border-color: rgba(90, 190, 255, 0.28) !important; }
[data-theme="dark"] .stg-preview__pill { background: rgba(6, 16, 34, 0.6) !important; border-color: var(--g-hair) !important; color: var(--g-ink) !important; }
[data-theme="dark"] .stg-toggle-row,
[data-theme="dark"] .stg-tpl,
[data-theme="dark"] .stg-logo-drop,
[data-theme="dark"] .stg-wordmark { background: rgba(6, 16, 34, 0.5) !important; border-color: var(--g-hair) !important; }
[data-theme="dark"] .stg-toggle-row__t,
[data-theme="dark"] .stg-tpl__name,
[data-theme="dark"] .stg-account__name,
[data-theme="dark"] .stg-account__v { color: var(--g-ink) !important; }
[data-theme="dark"] .stg-logo-drop:hover,
[data-theme="dark"] .stg-tpl:hover { border-color: rgba(90, 190, 255, 0.5) !important; }
[data-theme="dark"] .stg-logo-drop__prev { background: rgba(140, 180, 255, 0.10) !important; }
[data-theme="dark"] .stg-account__head,
[data-theme="dark"] .stg-account__row { border-color: var(--g-hair-soft) !important; }
[data-theme="dark"] .stg-tpl.is-active { border-color: rgba(90, 190, 255, 0.6) !important; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18), var(--g-glow-blue) !important; }
[data-theme="dark"] .stg-tpl__lock { color: var(--g-amber) !important; background: rgba(251, 191, 119, 0.12) !important; border-color: rgba(251, 191, 119, 0.3) !important; }
[data-theme="dark"] .stg-mock { background: rgba(6, 16, 34, 0.6) !important; border-color: var(--g-hair) !important; }
[data-theme="dark"] .stg-mock__band { background: rgba(140, 180, 255, 0.08) !important; }
[data-theme="dark"] .stg-mock__meta span,
[data-theme="dark"] .stg-mock__row span,
[data-theme="dark"] .stg-mock__totals span { background: rgba(140, 180, 255, 0.16) !important; }
[data-theme="dark"] .stg-auditdetail td { border-color: var(--g-hair-soft) !important; }
[data-theme="dark"] .stg-notifytable thead th { border-color: var(--g-hair-soft) !important; }
[data-theme="dark"] .stg-idbanner { border: 1px solid var(--g-hair); box-shadow: var(--g-glow-blue); }

/* ------------------------------------------------------------- Radzen ----- */
/* axis labels / gridlines are SVG, so they need explicit theming */
[data-theme="dark"] svg text,
[data-theme="dark"] .radzen-axis-labels text,
[data-theme="dark"] .radzen-chart text,
[data-theme="dark"] .radzen-marker text {
    fill: var(--g-muted) !important;
    font-family: inherit;
}

[data-theme="dark"] .radzen-axis-lines line,
[data-theme="dark"] .radzen-y-axis line,
[data-theme="dark"] .radzen-x-axis line {
    stroke: var(--g-hair-soft) !important;
}

[data-theme="dark"] .radzen-band { fill: transparent !important; }

[data-theme="dark"] .radzen-chart .radzen-line,
[data-theme="dark"] .radzen-chart path { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.35)); }

[data-theme="dark"] .radzen-chart-tooltip,
[data-theme="dark"] .radzen-tooltip {
    background: var(--g-glass-strong) !important;
    border: 1px solid var(--g-hair) !important;
    border-radius: 12px !important;
    color: var(--g-ink) !important;
    box-shadow: var(--g-shadow) !important;
}

/* --------------------------------------------------- dashboard widgets ---- */
/* sparkline that bleeds to the card edge, per the reference KPI cards */
[data-theme="dark"] .erp-spark {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 52%;
    height: 42px;
    pointer-events: none;
    opacity: 0.9;
}

[data-theme="dark"] .erp-spark path.area { opacity: 0.28; }
[data-theme="dark"] .erp-spark path.line { fill: none; stroke-width: 2; }

/* generic glass list row (activity feeds, P&L rows) */
[data-theme="dark"] .erp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--g-hair-soft);
}

[data-theme="dark"] .erp-row:last-child { border-bottom: none; }
[data-theme="dark"] .erp-row .r-title { color: var(--g-ink); font-weight: 600; font-size: 14px; }
[data-theme="dark"] .erp-row .r-meta { color: var(--g-faint); font-size: 12px; }
[data-theme="dark"] .erp-row .r-value { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--g-ink); }
[data-theme="dark"] .erp-row .r-value.in { color: var(--g-mint); }
[data-theme="dark"] .erp-row .r-value.out { color: var(--g-rose); }

/* 44px circular icon tile with an accent wash */
[data-theme="dark"] .erp-ico-round {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--ico-tint, rgba(59, 130, 246, 0.14));
    color: var(--ico-accent, var(--g-blue));
    box-shadow: inset 0 0 0 1px var(--ico-ring, rgba(125, 175, 255, 0.18));
}

[data-theme="dark"] .erp-ico-round.ico-mint { --ico-tint: rgba(53, 232, 201, 0.14); --ico-accent: var(--g-mint); --ico-ring: rgba(53, 232, 201, 0.28); }
[data-theme="dark"] .erp-ico-round.ico-amber { --ico-tint: rgba(251, 191, 119, 0.14); --ico-accent: var(--g-amber); --ico-ring: rgba(251, 191, 119, 0.28); }
[data-theme="dark"] .erp-ico-round.ico-violet { --ico-tint: rgba(139, 92, 246, 0.14); --ico-accent: var(--g-violet); --ico-ring: rgba(139, 92, 246, 0.28); }
[data-theme="dark"] .erp-ico-round.ico-sky { --ico-tint: rgba(56, 189, 248, 0.14); --ico-accent: var(--g-sky); --ico-ring: rgba(56, 189, 248, 0.28); }
[data-theme="dark"] .erp-ico-round.ico-rose { --ico-tint: rgba(248, 113, 127, 0.14); --ico-accent: var(--g-rose); --ico-ring: rgba(248, 113, 127, 0.28); }

/* summary box (Net Profit style): bordered, rounded, tinted */
[data-theme="dark"] .erp-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(90, 190, 255, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .erp-summary .s-label { color: var(--g-ink); font-weight: 700; }
[data-theme="dark"] .erp-summary .s-value { color: var(--g-mint); font-weight: 800; font-variant-numeric: tabular-nums; }

/* gradient pill progress row (Budget Allocation) */
[data-theme="dark"] .erp-meter {
    height: 8px;
    border-radius: var(--g-radius-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--g-hair-soft);
    overflow: hidden;
}

[data-theme="dark"] .erp-meter > i {
    display: block;
    height: 100%;
    border-radius: var(--g-radius-pill);
    background: var(--g-grad-mint);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.55);
}

[data-theme="dark"] .erp-meter.meter-violet > i { background: var(--g-grad-violet); box-shadow: 0 0 12px rgba(139, 92, 246, 0.55); }
[data-theme="dark"] .erp-meter.meter-sky > i { background: var(--g-grad-sky); box-shadow: 0 0 12px rgba(56, 189, 248, 0.55); }

/* "View All" style plain link */
[data-theme="dark"] .erp-viewall {
    color: var(--g-sky) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

[data-theme="dark"] .erp-viewall:hover { color: #7DD3FC !important; }

/* monospace ids (invoice numbers, references) */
[data-theme="dark"] .erp-id {
    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--g-muted);
}

/* ---- Dashboard hero (the one number the page leads with) ---- */
[data-theme="dark"] .dash-hero { position: relative; overflow: hidden; }

[data-theme="dark"] .dash-hero::before {
    content: "";
    position: absolute;
    inset: -50% 55% 55% -50%;
    background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.22), transparent 62%);
    pointer-events: none;
}

[data-theme="dark"] .hero-eyebrow { color: var(--g-muted) !important; }

[data-theme="dark"] .hero-value {
    background: linear-gradient(92deg, #F5F9FF 0%, #9ED9FF 55%, #35E8C9 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .hero-note { color: var(--g-faint) !important; }

[data-theme="dark"] .hero-spark-cap { color: var(--g-faint) !important; }

[data-theme="dark"] .erp-spark.is-bars .bar { opacity: 0.9; }

[data-theme="dark"] .erp-summary .s-value { color: var(--g-mint) !important; }

/* ============================================================================
   CUSTOM POPUPS — every floating surface that is NOT a MudDialog:
   the checkout sheet, the Point-of-Sale workspace modals, the subscription
   gate and the two floating banners. They inherit the dialog recipe:
   frosted fill, hairline rim, wide radius, deep glow, dimmed canvas behind.
   ========================================================================== */

/* ---- CheckoutDialog -------------------------------------------------------
   Its scoped stylesheet is built entirely from custom properties, so
   remapping the token block moves the whole sheet into the glass language in
   one move. Selector specificity matches the scoped rule (.co-overlay[b-x]),
   and this file loads after the scoped bundle, so these values win. */
[data-theme="dark"] .co-overlay {
    --brand-surface: rgba(6, 16, 34, 0.55);
    --card: rgba(10, 24, 50, 0.62);
    --foreground: var(--g-ink);
    --primary: var(--g-blue);
    --primary-foreground: #ffffff;
    --accent: var(--g-cyan);
    --muted-foreground: var(--g-body);
    --border: var(--g-hair);
    --input: var(--g-hair);
    --ring: var(--g-sky);
    --destructive: var(--g-rose);
    --shadow-card: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 28px rgba(56, 150, 255, 0.18);
    --r-xl: 12px;
    --r-2xl: 16px;
    --r-3xl: 20px;
    background: rgba(2, 7, 22, 0.74);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
}

[data-theme="dark"] .co-dialog,
[data-theme="dark"] .co-card {
    background: var(--g-glass-strong) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
}

/* same light sweep that tops every Mud dialog */
[data-theme="dark"] .co-dialog::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 150px;
    background: linear-gradient(180deg, rgba(140, 190, 255, 0.12), transparent);
    pointer-events: none;
}

[data-theme="dark"] .co-pill {
    color: var(--g-cyan) !important;
    border-color: rgba(34, 211, 238, 0.45) !important;
}

[data-theme="dark"] .co-method {
    border: 1px solid var(--g-hair-soft) !important;
}

[data-theme="dark"] .co-method:hover {
    border-color: rgba(90, 190, 255, 0.45) !important;
    transform: translateY(-1px);
}

[data-theme="dark"] .co-method.active {
    border-color: rgba(90, 190, 255, 0.6) !important;
    background: rgba(59, 130, 246, 0.16) !important;
    box-shadow: var(--g-glow-cyan) !important;
}

[data-theme="dark"] .co-input {
    background: rgba(4, 14, 34, 0.5) !important;
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--r-xl) !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .co-input:focus {
    border-color: rgba(56, 189, 248, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14) !important;
}

[data-theme="dark"] .co-pay {
    background: linear-gradient(135deg, #1E6FD9 0%, #0B3E86 100%) !important;
    border: 1.5px solid rgba(90, 190, 255, 0.55) !important;
    border-radius: var(--g-radius-pill) !important;
    color: #fff !important;
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.26), 0 16px 34px -18px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .co-sent {
    border: 1px solid rgba(53, 232, 201, 0.35) !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .co-error {
    border: 1px solid rgba(248, 113, 127, 0.4) !important;
    background: rgba(248, 113, 127, 0.10) !important;
    color: #FECDD3 !important;
}

/* ---- Point of Sale --------------------------------------------------------
   POS owns a token block on .pos-root plus a private light/dark switch, so the
   whole workspace (catalog tiles, cart rail, payment sheet, receipt) converts
   by remapping those tokens. The dark form is listed too because it carries
   higher specificity than a plain .pos-root override. */
[data-theme="dark"] .pos-root,
[data-theme="dark"] .pos-root.dark {
    --bg: rgba(6, 16, 34, 0.50);
    --panel: rgba(10, 24, 50, 0.60);
    --ink: var(--g-ink);
    --mute: var(--g-body);
    --line: var(--g-hair);
    --pay: var(--g-cyan);
    --payink: #04231E;
    --warn: var(--g-amber);
    --bad: var(--g-rose);
    --sel: rgba(53, 232, 201, 0.14);
    background: linear-gradient(160deg, rgba(124, 172, 255, 0.07), rgba(6, 14, 32, 0.35)) !important;
    border: 1px solid var(--g-hair);
    border-radius: var(--g-radius-lg) !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .pos-root .top,
[data-theme="dark"] .pos-root .cart,
[data-theme="dark"] .pos-root .tot {
    background: rgba(8, 20, 42, 0.55) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    border-color: var(--g-hair-soft) !important;
}

[data-theme="dark"] .pos-root .top h1 {
    background: linear-gradient(90deg, #F5F9FF, #9ED9FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .pos-root .stat strong { color: var(--g-ink) !important; }

/* search + category chips become pills, selected chip gets the brand gradient */
[data-theme="dark"] .pos-root .tools input,
[data-theme="dark"] .pos-root .chip,
[data-theme="dark"] .pos-root .sm,
[data-theme="dark"] .pos-root .pill,
[data-theme="dark"] .pos-root .cart select,
[data-theme="dark"] .pos-root .qty button,
[data-theme="dark"] .pos-root .qty .qtyin,
[data-theme="dark"] .pos-root .row input {
    background: rgba(4, 14, 34, 0.5) !important;
    border: 1px solid var(--g-hair) !important;
    color: var(--g-body) !important;
}

[data-theme="dark"] .pos-root .tools input:focus { border-color: rgba(56, 189, 248, 0.6) !important; }

[data-theme="dark"] .pos-root .chip,
[data-theme="dark"] .pos-root .pill,
[data-theme="dark"] .pos-root .sm { border-radius: var(--g-radius-pill) !important; }

[data-theme="dark"] .pos-root .chip.on {
    background: var(--g-grad-brand) !important;
    border-color: rgba(90, 190, 255, 0.55) !important;
    color: #fff !important;
    box-shadow: var(--g-glow-blue);
}

/* product tiles: frosted cards that lift on hover */
[data-theme="dark"] .pos-root .p {
    background: var(--g-glass) !important;
    border: 1px solid var(--g-hair-soft) !important;
    border-radius: var(--g-radius) !important;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="dark"] .pos-root .p:hover:not(:disabled) {
    border-color: rgba(53, 232, 201, 0.55) !important;
    transform: translateY(-2px);
    box-shadow: var(--g-glow-mint);
}

[data-theme="dark"] .pos-root .p .pr { color: var(--g-mint); }

/* payment sheet + receipt modal = the dialog recipe */
[data-theme="dark"] .pos-root .pos-mask {
    background: rgba(2, 7, 22, 0.72) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

[data-theme="dark"] .pos-root .modal {
    background: var(--g-glass-strong) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), var(--g-glow-blue) !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .pos-root .modal h2 { color: var(--g-ink) !important; }

[data-theme="dark"] .pos-root .modal input.big,
[data-theme="dark"] .pos-root .modal input:not(.big) {
    background: rgba(4, 14, 34, 0.5) !important;
    border: 1px solid var(--g-hair) !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .pos-root .pay {
    background: linear-gradient(135deg, #35E8C9 0%, #22D3EE 55%, #3B82F6 100%) !important;
    color: #04231E !important;
    border-radius: var(--g-radius-pill) !important;
    box-shadow: 0 0 26px rgba(34, 211, 238, 0.32) !important;
}

[data-theme="dark"] .pos-root .actions .back { border-radius: var(--g-radius-pill) !important; }

[data-theme="dark"] .pos-root hr { border-top-color: var(--g-hair-soft) !important; }
[data-theme="dark"] .pos-root .erp { background: rgba(53, 232, 201, 0.10) !important; }
[data-theme="dark"] .pos-root :focus-visible { outline-color: var(--g-cyan); }

/* ---- Subscription gate (MainLayout) --------------------------------------
   A full-screen takeover, so it reads as one giant dimmed dialog. */
[data-theme="dark"] .erp-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 7, 22, 0.78);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    color: var(--g-ink);
}

[data-theme="dark"] .erp-gate-card {
    max-width: 560px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 32px;
    border-radius: var(--g-radius-lg);
    background: var(--g-glass-strong);
    border: 1px solid var(--g-hair);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), var(--g-glow-blue);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .erp-gate-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(140, 190, 255, 0.12), transparent);
    pointer-events: none;
}

[data-theme="dark"] .erp-gate-card .gate-title { color: var(--g-ink) !important; font-weight: 800 !important; }
[data-theme="dark"] .erp-gate-card .gate-reason { color: var(--g-body) !important; }
[data-theme="dark"] .erp-gate-card .gate-meta { color: var(--g-faint) !important; }
[data-theme="dark"] .erp-gate-card .gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---- Floating banners (native-shell update nag + connection state) ------- */
[data-theme="dark"] .au-banner,
[data-theme="dark"] .ns-banner {
    background: var(--g-glass-strong) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius) !important;
    color: var(--g-ink) !important;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85) !important;
}

[data-theme="dark"] .ns-banner *,
[data-theme="dark"] .au-banner * { color: inherit; }

/* ---- Notification rail rows --------------------------------------------- */
[data-theme="dark"] .notif-item {
    border-bottom: 1px solid var(--g-hair-soft) !important;
    color: var(--g-body) !important;
}

[data-theme="dark"] .notif-item:hover { background: rgba(140, 180, 255, 0.07) !important; }
[data-theme="dark"] .notif-unread { background: rgba(59, 130, 246, 0.10); }
[data-theme="dark"] .notif-ico { box-shadow: inset 0 0 0 1px var(--g-hair-soft); }
[data-theme="dark"] .notif-dot { background: var(--g-cyan) !important; box-shadow: 0 0 10px var(--g-cyan); }

/* ---- Settings design system (the stg-* family) ---------------------------
   app.css builds the settings hub from literal pale-blue surfaces (#f4f8ff /
   #e3ecfb / #e8f0fe / #fff). Left alone they would be bright slabs on a dark
   canvas, so every one of them is re-surfaced here. The light theme keeps the
   originals because nothing below matches without [data-theme="dark"]. */
[data-theme="dark"] .stg-card,
[data-theme="dark"] .stg-actionbar {
    background: var(--g-glass-soft) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius) !important;
    box-shadow: var(--g-shadow-sm) !important;
}

[data-theme="dark"] .stg-card__head { border-bottom-color: var(--g-hair-soft) !important; }
[data-theme="dark"] .stg-card__title { color: var(--g-ink) !important; }

[data-theme="dark"] .stg-banner--info {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(124, 172, 255, 0.30) !important;
    color: #BFDBFE !important;
}

[data-theme="dark"] .stg-banner--warn {
    background: rgba(251, 191, 119, 0.12) !important;
    border-color: rgba(251, 191, 119, 0.32) !important;
    color: #FBD9A4 !important;
}

/* Segmented Sandbox|Live toggle becomes a inset glass track with a glowing knob. */
[data-theme="dark"] .stg-seg {
    background: rgba(2, 7, 22, 0.55) !important;
    border-color: var(--g-hair) !important;
}

[data-theme="dark"] .stg-seg__item { color: var(--g-muted) !important; }
[data-theme="dark"] .stg-seg__item.is-active { box-shadow: 0 6px 18px -6px rgba(59, 130, 246, 0.75) !important; }

[data-theme="dark"] .stg-preview {
    background: rgba(124, 172, 255, 0.07) !important;
    border-color: var(--g-hair) !important;
}

[data-theme="dark"] .stg-preview__pill {
    background: var(--g-solid) !important;
    border-color: var(--g-hair) !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .stg-preview__pill.is-active { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.34) !important; }

[data-theme="dark"] .stg-account__head { border-bottom-color: var(--g-hair) !important; }
[data-theme="dark"] .stg-account__row { border-bottom-color: var(--g-hair-soft) !important; }

[data-theme="dark"] .stg-logo-drop {
    background: rgba(124, 172, 255, 0.05) !important;
    border-color: rgba(124, 172, 255, 0.28) !important;
}

[data-theme="dark"] .stg-logo-drop:hover { background: rgba(124, 172, 255, 0.10) !important; }
[data-theme="dark"] .stg-logo-drop__prev { background: rgba(2, 7, 22, 0.55) !important; }

[data-theme="dark"] .stg-swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important; }

[data-theme="dark"] .stg-toggle-row {
    background: var(--g-glass) !important;
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius-sm) !important;
}

/* Provider wordmarks (M-PESA / PayPal / paystack) are dark brand artwork, so the
   white plate is deliberate - keeping it white keeps the logo readable. */
[data-theme="dark"] .stg-wordmark {
    background: #fff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #0B1220 !important;
}

[data-theme="dark"] .stg-tpl {
    background: var(--g-glass) !important;
    border-color: var(--g-hair) !important;
}

[data-theme="dark"] .stg-tpl.is-active { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.34), var(--g-glow-blue) !important; }

/* The PDF thumbnails are real paper documents: they stay on paper, framed by glass.
   The template *mocks* however are drawn with the theme's own ink/muted pair, so
   they must keep a dark plate or their labels would vanish. */
[data-theme="dark"] .stg-tpl__frame {
    border-color: var(--g-hair) !important;
    background: #fff !important;
}

[data-theme="dark"] .stg-mock { background: var(--g-solid) !important; border-color: var(--g-hair) !important; }
[data-theme="dark"] .stg-mock__band { background: var(--erp-elevated) !important; }
[data-theme="dark"] .stg-auditdetail td { border-bottom-color: var(--g-hair-soft) !important; }
[data-theme="dark"] .stg-notifytable thead th { border-bottom-color: var(--g-hair) !important; }

/* Safety net for the pale hairlines written as inline styles across Settings,
   Invoices and Quotations. Matches the literal, not the element, so light mode
   is unaffected and no markup has to be touched. */
[data-theme="dark"] [style*="#e3ecfb"] { border-color: var(--g-hair) !important; }

/* ---- Super-admin console (sa-* surfaces) ---------------------------------
   The console is already token-driven, so most of it lands on glass by itself;
   these rules only add the frost, the hover glow and the two chips whose literal
   greys went flat on a dark canvas. */
[data-theme="dark"] .sa-hero,
[data-theme="dark"] .sa-card,
[data-theme="dark"] .sa-kpi {
    background: var(--g-glass) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    border-radius: var(--g-radius) !important;
    box-shadow: var(--g-shadow-sm) !important;
}

[data-theme="dark"] .sa-kpi:hover { box-shadow: var(--g-shadow), var(--g-glow-blue) !important; }
[data-theme="dark"] .sa-hero-eyebrow { color: var(--g-cyan) !important; }
[data-theme="dark"] .sa-sec-item { background: rgba(2, 7, 22, 0.45) !important; }
[data-theme="dark"] .sa-feed-row { border-bottom-color: var(--g-hair-soft) !important; }
[data-theme="dark"] .sa-feed-action { color: var(--g-ink) !important; }

/* MudChart axis + legend text. */
[data-theme="dark"] .mud-chart-text, [data-theme="dark"] .mud-chart text {
    fill: var(--g-muted) !important;
    stroke: none !important;
}

[data-theme="dark"] .mud-chart-legend .mud-chart-legend-label { color: var(--g-body) !important; }

/* Status chips: pale greys are unreadable on glass, so they become tinted pills. */
[data-theme="dark"] .sa-chip.on { background: rgba(53, 232, 201, 0.14) !important; color: var(--g-mint) !important; }
[data-theme="dark"] .sa-chip.off { background: rgba(125, 147, 184, 0.16) !important; color: var(--g-muted) !important; }

/* ---- Standalone surfaces the tokens do not reach -------------------------
   /download paints its own full-viewport light shell, and the AI assistant draws
   its own chat bubbles. Both are literal-coloured, so both are re-surfaced. */
[data-theme="dark"] .dl-shell {
    /* transparent: the fixed glow field on body is the canvas here */
    background: transparent !important;
    color: var(--g-ink) !important;
}

[data-theme="dark"] .dl-subtitle,
[data-theme="dark"] .dl-card-meta,
[data-theme="dark"] .dl-card-note {
    color: var(--g-body) !important;
}

[data-theme="dark"] .dl-card {
    background: var(--g-glass) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border-color: var(--g-hair) !important;
    box-shadow: var(--g-shadow-sm) !important;
}

[data-theme="dark"] .dl-card-recommended {
    border-color: rgba(53, 232, 201, 0.45) !important;
    box-shadow: var(--g-shadow), var(--g-glow-mint) !important;
}

[data-theme="dark"] .dl-card-icon { background: rgba(124, 172, 255, 0.12) !important; }

/* Chat: the user bubble is the brand gradient, the reply bubble is frosted glass. */
[data-theme="dark"] .chat-user {
    background: var(--g-grad-brand) !important;
    color: #fff !important;
    box-shadow: var(--g-glow-blue);
}

[data-theme="dark"] .chat-ai {
    background: var(--g-glass-soft) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hair) !important;
    color: var(--g-ink) !important;
}

/* ---------------------------------------------------------------- printing --
   Thermal receipts and invoice prints must stay on paper, whatever the theme. */
@media print {
    html[data-theme="dark"] body::before { display: none !important; }

    html[data-theme="dark"] body,
    html[data-theme="dark"] .mud-dialog,
    html[data-theme="dark"] .mud-dialog-content,
    html[data-theme="dark"] .mud-dialog-title,
    html[data-theme="dark"] .pos-root .modal {
        background: #fff !important;
        color: #000 !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    html[data-theme="dark"] .mud-overlay,
    html[data-theme="dark"] .mud-drawer-overlay,
    html[data-theme="dark"] .mud-dialog-actions {
        display: none !important;
    }
}

/* keep the auth screens on their own (light) design language untouched, but
   stop the fixed glow layer from bleeding through them */
[data-theme="dark"] .auth-shell { background: #f5f7fb; }

/* ------------------------------------------------------------ motion ------ */
@media (prefers-reduced-motion: no-preference) {
    [data-theme="dark"] .erp-kpi,
    [data-theme="dark"] .erp-card,
    [data-theme="dark"] .mud-dialog {
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    [data-theme="dark"] .biz-tile:hover,
    [data-theme="dark"] .erp-kpi:hover {
        transform: translateY(-2px);
        border-color: rgba(90, 190, 255, 0.4) !important;
    }
}

/* ------------------------------------------------------------ a11y -------- */
[data-theme="dark"] ::selection { background: rgba(34, 211, 238, 0.30); color: var(--g-ink); }

[data-theme="dark"] * { scrollbar-color: rgba(140, 180, 255, 0.35) transparent; }
[data-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(140, 180, 255, 0.28); }
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(140, 180, 255, 0.45); }

[data-theme="dark"] .mud-focus-visible:focus-visible,
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.7);
    outline-offset: 2px;
}