/* NSS World brand colour overrides
   ──────────────────────────────────────────────────────────────────────────
   This file MUST load after Radzen's material-dark-base.css (see App.razor).

   material-dark-base.css sets:
       --rz-primary:   #bb86fc   (purple)
       --rz-secondary: #01a299   (teal)

   Those defaults are correct for a generic Material Dark theme, but NSS World
   uses brand-red (#D60202) as the primary/secondary colour for buttons,
   progress bars, and other interactive Radzen components.

   Because CSS custom properties follow normal cascade order (last writer wins)
   and !important cannot be applied to custom property declarations, the only
   reliable way to override them is to load this file AFTER material-dark-base.css.

   app.css also declares these variables synchronously so the very first
   rendered frame already has the correct colours, but the async load of
   material-dark-base.css would override them.  This file restores them once
   all async stylesheets have settled. */

:root {
    /* Primary colour — buttons (ButtonStyle.Primary), progress bars
       (ProgressBarStyle.Primary), active tabs, focused inputs, etc. */
    --rz-primary:         #D60202;
    --rz-primary-light:   #e94984;
    --rz-primary-lighter: rgba(214, 2, 2, 0.12);
    --rz-primary-dark:    #b61651;
    --rz-primary-darker:  #9a1345;

    /* Secondary colour — matches primary so the brand red is used
       for both Primary- and Secondary-styled components. */
    --rz-secondary:         #D60202;
    --rz-secondary-light:   #e94984;
    --rz-secondary-lighter: rgba(227, 28, 101, 0.12);
    --rz-secondary-dark:    #b61651;
    --rz-secondary-darker:  #9a1345;
}

/* ── Component text font ───────────────────────────────────────────────────
   NOT declared here.  --rz-text-font-family lives only in App.razor's inline
   `html:root` rule, which outranks Radzen's `:root` on specificity.  A
   re-assertion here could only win on load order, and the async stylesheets
   apply in whatever order they arrive: one style recalc with Radzen's
   `Roboto, sans-serif` live downloads its 730 KB RobotoFlex.woff2. */

/* ── Text selection highlight ──────────────────────────────────────────────
   Radzen's material-dark-base.css declares:

       --rz-text-selection-background-color: var(--rz-primary-lighter);

   and applies it via `.rz-layout ::selection`.  That indirection is fine for
   Radzen's stock purple (rgba(187, 134, 252, 0.12)) — a *light* colour, so
   even at 12% alpha it lifts all three channels above a dark background.

   It breaks for our brand red.  --rz-primary-lighter is rgba(214, 2, 2, 0.12),
   and 12% of a *dark*, saturated red composited over the app's dark surfaces
   (#000 body, #1e1e1e inputs) yields rgb(52, 27, 27) — a 1.05:1 contrast ratio
   against the field background.  Selected text was effectively unhighlighted
   in every input on the site.

   Fix: decouple the selection colour from --rz-primary-lighter and give it its
   own value with enough alpha to actually read (2.24:1 against #1e1e1e).
   --rz-text-selection-color is deliberately left at Radzen's `inherit` so the
   selected glyphs keep their normal colour — #e0e0e0 on this highlight is
   5.6:1, and it degrades gracefully on light surfaces too.

   Literal rgba() rather than var(--nss-red-bright): rgba() cannot take a hex
   custom property as its colour argument. */
:root {
    --rz-text-selection-background-color: rgba(255, 31, 31, 0.6);
}

/* Radzen's rule only covers descendants of .rz-layout.  This bare ::selection
   gives the same highlight to any text outside it (error screens, the init
   pill, anything rendered before the Radzen layout mounts) so selection looks
   the same everywhere.  Lower specificity than `.rz-layout ::selection`, so it
   never competes with the rule above — it just fills the gap. */
::selection {
    background-color: rgba(255, 31, 31, 0.6);
}

/* Info-style buttons — Radzen maps ButtonStyle.Info to the --rz-info colour
   (a blue).  Override to red so they match the rest of the admin UI. */
.rz-button.rz-button-info,
.rz-button.rz-info {
    background-color: #D60202 !important;
    border-color: #D60202 !important;
}

.rz-button.rz-button-info:hover,
.rz-button.rz-info:hover {
    background-color: #b61651 !important;
    border-color: #b61651 !important;
}