/* =========================================================================
   RoofRunner — Monochrome Override Layer
   Loaded LAST so it wins over every per-page stylesheet.

   Goal: a pure monochrome (Trade Republic style) language. Every decorative
   colour and gradient introduced by the legacy per-page CSS is neutralised
   here in one place instead of editing 30 files. Emphasis is achieved through
   inversion (.rr-highlight) and weight — never colour.
   ========================================================================= */

:root {
    --rr-invert-bg: #111111;
    --rr-invert-text: #ffffff;
    --rr-neutral-icon-bg: #f4f4f5;
}

/* -------------------------------------------------------------------------
   1) Kill decorative gradients on surface-like elements.
   Scoped to cards / tiles / heroes / kpis / stats / panels so input
   adornments and real icons (which also use background-image) stay intact.
   ------------------------------------------------------------------------- */
[class*="-card"],
[class*="-tile"],
[class*="-widget"],
[class*="-hero"],
[class*="-kpi"],
[class*="-summary"],
[class*="-stat"],
[class*="-panel"],
[class*="-main-card"],
[class*="-state-card"],
[class*="-empty-card"],
[class*="-overview"],
[class*="-search"],
[class*="-box"],
[class*="-tabs"],
[class*="-section"],
[class*="-host"],
.rr-card,
.mud-paper {
    background-image: none !important;
}

/* Decorative gradient overlays are almost always painted on ::before/::after */
[class*="-card"]::before,
[class*="-card"]::after,
[class*="-kpi"]::before,
[class*="-kpi"]::after,
[class*="-hero"]::before,
[class*="-hero"]::after,
[class*="-main-card"]::before,
[class*="-main-card"]::after,
[class*="-summary"]::before,
[class*="-summary"]::after {
    background-image: none !important;
    background: transparent !important;
}

/* -------------------------------------------------------------------------
   2) Neutralise coloured icon chips / badges (.success/.warning/.danger/…)
   ------------------------------------------------------------------------- */
[class*="-icon"].success,
[class*="-icon"].warning,
[class*="-icon"].danger,
[class*="-icon"].error,
[class*="-icon"].violet,
[class*="-icon"].info,
[class*="-icon"].positive,
[class*="-icon"].negative,
[class*="-icon"].neutral,
.dashboard-stat-icon,
.dashboard-card-icon,
.finance-kpi-icon {
    background: var(--rr-neutral-icon-bg) !important;
    color: var(--rr-text) !important;
    border-color: var(--rr-border) !important;
}

/* -------------------------------------------------------------------------
   3) Brand-coloured borders on surfaces → neutral divider colour.
   ------------------------------------------------------------------------- */
[class*="-card"],
[class*="-tile"],
[class*="-widget"],
[class*="-hero"],
[class*="-kpi"],
[class*="-summary"],
[class*="-stat"],
[class*="-panel"],
[class*="-main-card"] {
    border-color: var(--rr-border) !important;
}

/* -------------------------------------------------------------------------
   4) Coloured accent bars / left borders → solid black.
   ------------------------------------------------------------------------- */
[class*="-accent"],
[class*="-leftbar"],
[class*="-card-bar"],
[class*="-rail"] {
    background: var(--rr-primary) !important;
    background-image: none !important;
}

/* -------------------------------------------------------------------------
   5) Positive/negative semantic text → monochrome.
   ------------------------------------------------------------------------- */
[class*="positive"],
[class*="negative"],
.violet-chip,
.dashboard-card-icon.success,
.dashboard-card-icon.warning,
.dashboard-card-icon.danger {
    color: var(--rr-text) !important;
}

.violet-chip {
    background: var(--rr-neutral-icon-bg) !important;
}

/* -------------------------------------------------------------------------
   6) MudBlazor semantic colour utilities → monochrome safety net.
   (The theme palette already greys these; this catches inline-coloured icons.)
   ------------------------------------------------------------------------- */
.mud-success-text,
.mud-warning-text,
.mud-info-text,
.mud-secondary-text {
    color: var(--rr-text-secondary) !important;
}

/* -------------------------------------------------------------------------
   6b) Validation — the ONE intentional hue. Form field error feedback only.
   Everything else stays monochrome; this re-introduces red so users can see
   which field is missing/invalid (e.g. empty required field, bad IBAN).
   Scoped strictly to MudBlazor's form-error classes — does not touch
   .finance-amount-negative or success/warning/info severities.
   ------------------------------------------------------------------------- */

/* Error/helper text under an invalid field; field text + floating label in error
   state. Mirrors MudBlazor's own .mud-error-text / .mud-input-error rules — which
   point at --mud-palette-error (greyed by our theme) — and overrides them last. */
.mud-error-text,
.mud-input-error,
.mud-input-error .mud-input-label {
    color: var(--rr-validation) !important;
}

/* Outlined field border in error state */
.mud-input-error .mud-input-outlined-border {
    border-color: var(--rr-validation) !important;
}

/* Filled / underline variant bottom border in error state */
.mud-input-error::after {
    border-bottom-color: var(--rr-validation) !important;
}

/* Form-level error summary banner (MudAlert Severity.Error, used across dialogs) */
.mud-alert-outlined-error,
.mud-alert-text-error {
    color: var(--rr-validation) !important;
}

.mud-alert-outlined-error {
    border-color: var(--rr-validation) !important;
}

.mud-alert-outlined-error .mud-alert-icon,
.mud-alert-text-error .mud-alert-icon {
    color: var(--rr-validation) !important;
}

/* -------------------------------------------------------------------------
   7) The one and only highlight mechanism: inversion.
   Use class="rr-highlight" on the single most important widget of a page.
   ------------------------------------------------------------------------- */
.rr-highlight {
    background: var(--rr-invert-bg) !important;
    background-image: none !important;
    color: var(--rr-invert-text) !important;
    border-color: var(--rr-invert-bg) !important;
}

.rr-highlight :is(h1, h2, h3, h4, h5, h6, p, span, div, .mud-typography),
.rr-highlight .mud-icon-root {
    color: var(--rr-invert-text) !important;
}