:root {
    /* App-wide brand palette - reusable across controls (semantic names, --app- prefix). THIS is the single
       source of truth for the brand colours: each token holds the literal, and the Onyx palette's matching
       --onyx-* brand tokens point back here via var(--app-*). On non-Onyx themes (which don't load
       onyx-palette.css) these literals apply directly, so a chip looks identical on every theme. Each role
       carries -fg (text) and -border (outline) for solid filled chips; the Onyx -fg tokens keep their own
       theme-side routing (the shared uipack text colour), so only base + border invert to --app-*. */
    --app-danger: #FF4040;
    --app-danger-fg: #fff;
    --app-danger-border: #e62e2e;
    --app-danger-soft: #FF6347;
    --app-danger-soft-fg: #3a1410; /* coral - softer danger fill (Due tasks, error-message on Triton); dark text for AA contrast on the bright fill */
    --app-danger-strong: #4a1f1f;
    --app-danger-strong-fg: #fecaca; /* deep error surface (error-message + status list on Onyx) */

    --app-success: #2E9E2E;
    --app-success-fg: #fff;
    --app-success-border: #1f8a1f;

    --app-info: #2aabd2;
    --app-info-fg: #fff;
    --app-info-border: #2188a7;

    --app-primary: #2d6ca2;
    --app-primary-fg: #fff;
    --app-primary-border: #22517a;

    --app-primary-strong: #6a1b9a;
    --app-primary-strong-fg: #fff;
    --app-primary-strong-border: #54157a; /* bold violet companion to primary - Submitted / Add-as-master; no Onyx token */

    --app-warning: #ef6c00; /* orange warning */
    --app-warning-fg: #fff;
    --app-warning-border: #d96100; 

    --app-warning-strong: var(--app-yellow); /* bright yellow - keep-yellow fills/glyphs (.delayed-row, flag, inline yellow) + kpi-expiring on Onyx. Fine as a fill; weak as text on light, so kpi-expiring uses --app-golden-yellow there. */
    --app-warning-strong-fg: #1b1b1b;
    --app-warning-strong-border: #a67c00;

    --app-accent-bright: #00bcd4;
    --app-accent-bright-fg: #fff;
    --app-accent-bright-border: #0097a7; /* "will sync" - matches --onyx-accent-bright */
    --app-accent: #2980b9; /* link / brand accent (content links, link-buttons); --onyx-accent points here */
    --app-accent-deep: #024059;

    /* Black ShopCtrl logo → brand blue-grey (~#bccfe1). Shared by the light-theme
       top-bar logo (main-toolbar.css) and the Onyx login logo (Login.css). Filter
       chain via sosuke.github.io/2020/03/filter-converter (approximate). */
    --app-logo-filter: brightness(0) saturate(100%) invert(89%) sepia(11%) saturate(610%) hue-rotate(178deg) brightness(95%) contrast(86%);

    --app-yellow: #fff000; /* yellow - value behind --app-warning-strong (name legacy; good as a fill, weak as text on light themes) */
    --app-golden-yellow: #D4A017; /* yellowish text for light themes */

    /* ─────────────────────────────────────────────────────────────────────
       App-wide row / field STATE colours, shared across ALL themes (grid rows, chosen fields, notes).
       The rules consume these by name so a state looks identical on every theme. error / done / delayed
       rows reuse the brand danger / success / warning tokens above (var(--app-danger|success|warning));
       highlight, dirty and new have no brand equivalent, so they are defined here. (.delayed-row also
       keeps a cell-level Onyx rule, since its base styles the row, not the cells.) */
    --app-highlight-bg: #FDE68A;
    --app-highlight-fg: #1B1B1B; /* highlighted-row + chosen-field + notes */
    --app-dirty-bg: #F59E3D;
    --app-dirty-fg: #4A2A02; /* modified / unsaved */
    --app-new-bg: #C8FFC8;
    --app-new-fg: #1B5E20; /* newly-added unsaved row */
}

/* Recolour the raw browser-blue content links to the brand link colour.
   a[href] = real links only; :not([class*="x-"]) spares Ext.NET chrome
   (buttons / tabs / menu items / tree nodes / paging all render as classed
   x-* anchors), while still covering classed content links (.grid-entity-link). */
a[href]:not([class*="x-"]) {
    color: var(--app-accent);
}

/* Content-link hover: brighten to the app accent-bright (cyan), app-wide, so every
   content link (and link-styled buttons that opt in, e.g. .mirakl-linkbtn) hovers the same. */
a[href]:not([class*="x-"]):hover {
    color: var(--app-accent-bright);
}

/* ── Hard-coded red/green/yellow → palette Danger/Success tokens ────────────
   Grid cell renderers and many controls hard-code red/green via inline
   styles (e.g. <span style="color:red;">…</span>, profit / over-due /
   validation highlights) and the legacy <td bgcolor="red"> attribute
   (emitted by metaData.tdAttr in the SLA/invoice over-due renderers).
   Literal red/green read too bright and harsh in every theme, so remap
   them to the muted Danger / Success values everywhere.

   Generic by design — no per-page or per-renderer change needed; it
   keys off the inline style / attribute itself, so it covers every page
   that ships these colours, present and future. Applies to all themes
   (no theme scope on the selector).

   Notes:
   · Inline styles / presentational attributes are beaten by an author
     !important, which is why every rule carries it (it still loses to an
     inline `… !important`, which these renderers don't use).
   · `i` makes the match case-insensitive (catches "red"/"Red"/"RED");
     both "color:red" and "color: red" spacings are listed.
   · Onyx draws from its --onyx-* palette tokens; every other theme has
     no --onyx-* defined and falls back to the inline hex — the same
     muted values. */

/* Text colour. Guarded with :not() so the "color:red" substring does not
   also fire on "background-color:red" (handled separately below) — without
   it, a cell that sets only a red BACKGROUND would get its TEXT recoloured
   to the same danger red, i.e. invisible text. */
[style*="color:red" i]:not([style*="background-color:red" i]),
[style*="color: red" i]:not([style*="background-color: red" i]) {
    color: var(--app-danger) !important;
}

[style*="color:green" i]:not([style*="background-color:green" i]),
[style*="color: green" i]:not([style*="background-color: green" i]) {
    color: var(--app-success) !important;
}

[style*="color:yellow" i]:not([style*="background-color:yellow" i]),
[style*="color: yellow" i]:not([style*="background-color: yellow" i]) {
    color: var(--app-warning-strong) !important;
}

/* Inline background-color. (Today the app sets cell backgrounds via the
   bgcolor attribute below, not this inline style, so these match nothing
   yet — kept for completeness / future use.) */
[style*="background-color:red" i],
[style*="background-color: red" i] {
    background-color: var(--app-danger) !important;
}

[style*="background-color:green" i],
[style*="background-color: green" i] {
    background-color: var(--app-success) !important;
}

[style*="background-color:yellow" i],
[style*="background-color: yellow" i] {
    background-color: var(--app-warning-strong) !important;
}

/* Legacy presentational bgcolor attribute, e.g. <td bgcolor="red">. Exact
   match (=) since the value is the whole attribute, not a style substring.
   The renderers pair this with an inline color:white, which stays readable
   on the muted danger/success fills. */
[bgcolor="red" i] {
    background-color: var(--app-danger) !important;
}

[bgcolor="green" i] {
    background-color: var(--app-success) !important;
}

[bgcolor="yellow" i] {
    background-color: var(--app-warning-strong) !important;
}