/* 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;
}

/* 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;
}
