/* =========================================================================
   PRFactory — Cascade neutralization (Epic 17 M2 W1).

   ROOT CAUSE this file fixes: App.razor loads, in order,
     1. lib/bootstrap/bootstrap.min.css   — reboot `body{background:#fff}`,
        `.card{--bs-card-bg:#fff;background:var(--bs-card-bg)}`, `.btn`,
        `.bg-*`, `.list-group`, `.table`, `.form-control`, `.text-muted` …
     2. _content/Radzen.Blazor/css/material-base.css — its own `.card`,
        surface and reboot rules.
     3. css/site.css → tokens.css / variables.css / app.css — defines the
        dual-mode `--color-*` design tokens, BUT app.css's `.card` only sets
        `border:none;box-shadow` (no background), so Bootstrap's white
        `--bs-card-bg` still wins → white cards on the dark canvas.
     4. PRFactory.Web.styles.css — component-scoped CSS (cannot reach the
        global Bootstrap base rules).

   Approved-libs constraint (CLAUDE.md): bootstrap.min.css and Radzen STAY
   (other components depend on them). This stylesheet is loaded LAST and
   re-points every conflicting Bootstrap/Radzen *base surface* rule at the
   canonical design tokens so the token system wins the cascade in BOTH
   dark and light. It adds NO new library; it only neutralizes conflicts.
   No gradients — flat tokenized fills only.
   ========================================================================= */

/* ---- Bootstrap :root variable re-map -------------------------------- */
/* Bootstrap 5.3 declares --bs-link-color, --bs-primary, --bs-body-color
   and ~30 other colour variables on :root. Any Bootstrap component that
   reads those variables (nav-link, badge, breadcrumb, code, etc.) will
   show Bootstrap's hard-coded palette instead of the design tokens unless
   we re-point those variables HERE at the one CSS root where they live.
   This is the single authoritative mapping; no scattered !important needed.
   Applied to :root AND both theme overrides so the redirection wins in
   every theme state (default dark, explicit dark, explicit light). */
:root,
[data-theme="dark"],
[data-theme="light"] {
    /* Link colours — drives every element that uses var(--bs-link-color). */
    --bs-link-color:             var(--color-accent-text);
    --bs-link-hover-color:       var(--color-accent-hover);
    --bs-link-color-rgb:         var(--color-accent-text);
    --bs-link-hover-color-rgb:   var(--color-accent-hover);

    /* Body / emphasis text — drives .text-body, text shadow, etc. */
    --bs-body-color:             var(--color-text);
    --bs-body-bg:                var(--color-bg-base);
    --bs-emphasis-color:         var(--color-text);
    --bs-secondary-color:        var(--color-text-secondary);
    --bs-secondary-bg:           var(--color-surface-2);
    --bs-tertiary-color:         var(--color-text-muted);
    --bs-tertiary-bg:            var(--color-bg-sunken);

    /* Primary brand — drives .btn-primary variants not yet migrated.
       Note: .text-primary uses --bs-primary-rgb (numeric r,g,b) but CSS
       custom properties cannot split a hex color into rgb components.
       .text-primary on un-migrated markup is overridden directly below. */
    --bs-primary:                var(--color-accent);

    /* Nav — drives nav-link, nav-tabs, navbar, breadcrumb colours. */
    --bs-nav-link-color:         var(--color-text-secondary);
    --bs-nav-link-hover-color:   var(--color-text);
    --bs-nav-link-disabled-color: var(--color-text-faint);
    --bs-nav-tabs-border-color:  var(--color-divider);
    --bs-nav-tabs-link-active-color: var(--color-text);
    --bs-nav-tabs-link-active-bg:    transparent;
    --bs-nav-tabs-link-active-border-color: var(--color-divider) var(--color-divider) transparent;

    /* Breadcrumb. */
    --bs-breadcrumb-divider-color: var(--color-text-muted);
    --bs-breadcrumb-item-active-color: var(--color-text);

    /* Border. */
    --bs-border-color:           var(--color-border);
    --bs-border-color-translucent: var(--color-border-soft);

    /* Code. */
    --bs-code-color:             var(--color-accent-text);

    /* Focus ring. */
    --bs-focus-ring-color:       var(--color-accent-soft);

    /* Typography base. Bootstrap's reboot sizes <body> from
       --bs-body-font-size (1rem = 16px), which left every inherited text
       run — form labels, modal bodies, alerts — a step above the token
       scale. The app's body size is --fs-body. */
    --bs-body-font-size:         var(--fs-body);

    /* Heading. */
    --bs-heading-color:          var(--color-text);
}

/* ---- Canvas ---------------------------------------------------------- */
html,
body {
    background-color: var(--color-bg-base);
    color: var(--color-text);
}

/* Bootstrap maps these to its own greys; re-point at tokens. */
.bg-body,
.bg-white,
.bg-light {
    background-color: var(--color-surface-1) !important;
}

.bg-body-tertiary,
.bg-body-secondary {
    background-color: var(--color-bg-sunken) !important;
}

/* Bootstrap's foreground helpers are the cascade-paired partners of the
   .bg-* remap above. If the surface goes dark but `.text-dark`/`.text-body`
   /`.text-black` stay Bootstrap's near-black, unmigrated markup that uses
   `bg-light text-dark` (badges, board cards, event rows) becomes dark-on-dark
   and unreadable. Re-point the whole foreground helper family at the canonical
   text tokens so legibility holds in BOTH dark and light. */
.text-dark,
.text-body,
.text-body-emphasis,
.text-black,
.text-white,
.text-light,
.text-body-secondary {
    color: var(--color-text) !important;
}

/* Bootstrap .text-primary uses --bs-primary-rgb (numeric) which cannot be
   derived from a hex token. Override directly so un-migrated markup using
   text-primary gets the accent colour rather than Bootstrap blue. */
.text-primary {
    color: var(--color-accent-text) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

.text-success {
    color: var(--color-success-text) !important;
}

.text-danger {
    color: var(--color-danger-text) !important;
}

.text-warning {
    color: var(--color-warning-text) !important;
}

.text-info {
    color: var(--color-info-text) !important;
}

a {
    color: var(--color-accent-text);
}

a:hover {
    color: var(--color-accent-hover);
}

hr {
    border-color: var(--color-divider);
    color: var(--color-divider);
    opacity: 1;
}

/* ---- Bootstrap / Radzen card base ----------------------------------- */
/* Override Bootstrap's --bs-card-* custom props so EVERY raw .card (and
   any not-yet-migrated page using it) inherits the mockup card look. */
.card {
    --bs-card-bg: var(--color-surface-1);
    --bs-card-color: var(--color-text);
    --bs-card-border-color: var(--color-border);
    --bs-card-cap-bg: var(--color-surface-1);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: var(--radius-lg);
    background-color: var(--color-surface-1);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card:hover {
    border-color: var(--color-border-strong);
}

.card-header {
    background-color: var(--color-surface-1);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-divider);
    font-weight: var(--fw-semibold);
}

.card-body {
    color: var(--color-text);
}

.card-footer {
    background-color: var(--color-surface-1);
    border-top: 1px solid var(--color-divider);
}

/* ---- Radzen (material-base.css) neutralization ---------------------- */
/* The Radzen Material theme derives EVERY widget surface (cards, panels,
   grids, dropdowns, date pickers, calendars, tab panels, menus, popups,
   inputs, paginator) from a tiny set of root anchors: `--rz-white`, the
   `--rz-base-*` greyscale, and `--rz-text-*`. Re-pointing those anchors at
   the canonical tokens retargets the whole widget set in BOTH modes in one
   place (the cleanest override per the approved-libs rule — Radzen stays,
   only its variables are re-mapped). The targeted widget rules below cover
   the few surfaces Radzen hard-codes a literal color for. */
:root,
[data-theme="dark"],
[data-theme="light"] {
    --rz-white: var(--color-surface-1);
    --rz-black: var(--color-text);
    --rz-base: var(--color-surface-2);
    --rz-base-background-color: var(--color-surface-1);
    --rz-body-background-color: var(--color-bg-base);
    --rz-content-background-color: var(--color-surface-1);

    --rz-base-50: var(--color-bg-sunken);
    --rz-base-100: var(--color-surface-2);
    --rz-base-200: var(--color-surface-2);
    --rz-base-300: var(--color-border);
    --rz-base-400: var(--color-border-strong);
    --rz-base-500: var(--color-text-faint);
    --rz-base-600: var(--color-text-muted);
    --rz-base-700: var(--color-text-secondary);
    --rz-base-800: var(--color-text);
    --rz-base-900: var(--color-text);
    --rz-on-base: var(--color-text);

    --rz-text-color: var(--color-text);
    --rz-text-title-color: var(--color-text);
    --rz-text-secondary-color: var(--color-text-secondary);
    --rz-text-tertiary-color: var(--color-text-muted);
    --rz-text-disabled-color: var(--color-text-faint);

    /* Radzen inputs and their dropdown items read this (default 1rem). */
    --rz-input-font-size: var(--fs-body);

    --rz-border-base-300: var(--color-border);
    --rz-border-normal: var(--rz-border-width, 1px) solid var(--color-border);
    --rz-grid-border: 1px solid var(--color-divider);

    --rz-input-background-color: var(--color-bg-sunken);
    --rz-input-value-color: var(--color-text);
    --rz-input-placeholder-color: var(--color-text-faint);

    --rz-panel-background-color: var(--color-surface-1);
    --rz-card-background-color: var(--color-surface-1);
    --rz-card-flat-background-color: var(--color-surface-1);
}

/* Container surfaces. */
.rz-card,
.rz-panel,
.rz-datatable,
.rz-paginator,
.rz-dialog,
.rz-tabview,
.rz-tabview-panels {
    background-color: var(--color-surface-1);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* DataGrid header + cells. */
.rz-grid-table,
.rz-grid-table td,
.rz-grid-table th,
.rz-datatable-data td,
.rz-cell-data {
    background-color: var(--color-surface-1);
    color: var(--color-text);
    border-color: var(--color-divider);
}

.rz-datatable-thead th,
.rz-grid-table thead th,
.rz-column-title {
    background-color: var(--color-bg-sunken);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.rz-datatable tbody tr:hover td,
.rz-grid-table tbody tr:hover td {
    background-color: var(--color-surface-2);
    color: var(--color-text);
}

/* Inputs: textbox, dropdown, datepicker, numeric, calendar. */
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-datepicker,
.rz-numeric,
.rz-spinner,
.rz-lookup,
.rz-autocomplete,
.rz-multiselect {
    background-color: var(--color-bg-sunken);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.rz-textbox::placeholder,
.rz-textarea::placeholder {
    color: var(--color-text-faint);
}

/* Tab nav. */
.rz-tabview-nav,
.rz-tabview-nav li .rz-tabview-title {
    background-color: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-divider);
}

.rz-tabview-nav li.rz-state-active .rz-tabview-title {
    color: var(--color-text);
}

/* Popups, overlays, dropdown panels, calendars, menus. */
.rz-popup,
.rz-overlaypanel,
.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-autocomplete-panel,
.rz-datepicker-panel,
.rz-datepicker-calendar,
.rz-menu,
.rz-tooltip-content {
    background-color: var(--color-surface-3);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.rz-dropdown-item,
.rz-multiselect-item,
.rz-menu .rz-menuitem-link {
    color: var(--color-text);
}

.rz-dropdown-item:hover,
.rz-multiselect-item:hover,
.rz-menu .rz-menuitem-link:hover,
.rz-state-highlight {
    background-color: var(--color-surface-2);
    color: var(--color-text);
}

/* Paginator controls. */
.rz-paginator .rz-paginator-element {
    background-color: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-divider);
}

.rz-paginator .rz-paginator-element.rz-state-active {
    background-color: var(--color-accent-soft);
    color: var(--color-accent-text);
}

/* Radzen chart text/grid lines onto tokens so the donut card is readable. */
.rz-chart text {
    fill: var(--color-text-secondary);
}

/* ---- List groups (still used by not-yet-migrated pages) -------------- */
.list-group {
    --bs-list-group-bg: var(--color-surface-1);
    --bs-list-group-color: var(--color-text);
    --bs-list-group-border-color: var(--color-divider);
    --bs-list-group-action-color: var(--color-text);
    --bs-list-group-action-hover-bg: var(--color-surface-2);
    --bs-list-group-action-hover-color: var(--color-text);
    --bs-list-group-action-active-bg: var(--color-surface-2);
}

.list-group-item {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-divider);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--color-surface-2);
    color: var(--color-text);
}

/* ---- Tables --------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-divider);
    color: var(--color-text);
}

.table thead th {
    background-color: var(--color-bg-sunken);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.table td,
.table th {
    border-color: var(--color-divider);
}

/* ---- Forms ---------------------------------------------------------- */
/* Bootstrap hard-codes form sizes in rem (1rem controls, .875em help
   text), off the token scale. The sizes below are the mockup facit's:
   controls at body size, labels at --fs-sm, help/validation at --fs-xs. */
.form-control,
.form-select {
    background-color: var(--color-bg-sunken);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
}

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
    font-size: var(--fs-sm);
}

.form-control-lg,
.form-select-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
    font-size: var(--fs-h2);
}

.input-group-text {
    font-size: var(--fs-body);
}

.form-text,
.invalid-feedback,
.valid-feedback {
    font-size: var(--fs-xs);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-surface-1);
    color: var(--color-text);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.form-control::placeholder {
    color: var(--color-text-faint);
}

.form-label,
.form-check-label,
.col-form-label {
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
}

.col-form-label-sm {
    font-size: var(--fs-xs);
}

.col-form-label-lg {
    font-size: var(--fs-body);
}

/* ---- Bootstrap dropdown menu base ------------------------------------ */
.dropdown-menu {
    --bs-dropdown-font-size: var(--fs-sm);
}

/* ---- Bootstrap button sizing --------------------------------------- */
/* Bootstrap sizes .btn at 1rem with .375rem/.75rem padding, off the token
   scale. The mockup facit's buttons are --fs-sm on a --control-h box with
   --space-4 side padding, and .btn-sm is --fs-xs on --control-h-sm with
   --space-3. Vertical padding is derived so the box keeps the control height. */
.btn {
    --bs-btn-font-size: var(--fs-sm);
    --bs-btn-font-weight: var(--fw-medium);
    --bs-btn-padding-x: var(--space-4);
    --bs-btn-padding-y: calc((var(--control-h) - 2 * var(--bs-btn-border-width) - var(--bs-btn-line-height) * var(--bs-btn-font-size)) / 2);
}

.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-font-size: var(--fs-xs);
    --bs-btn-padding-x: var(--space-3);
    --bs-btn-padding-y: calc((var(--control-h-sm) - 2 * var(--bs-btn-border-width) - var(--bs-btn-line-height) * var(--bs-btn-font-size)) / 2);
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-font-size: var(--fs-body);
    --bs-btn-padding-x: var(--space-4);
    --bs-btn-padding-y: calc((var(--control-h-lg) - 2 * var(--bs-btn-border-width) - var(--bs-btn-line-height) * var(--bs-btn-font-size)) / 2);
}

/* The facit draws every button icon at 14px, whatever the button's text size,
   so icon-only small buttons keep a legible glyph. line-height:1 keeps the
   larger glyph from growing the line box past the control height. */
.btn .bi {
    font-size: 14px;
    line-height: 1;
}

/* ---- Bootstrap button base (not-yet-migrated pages) ------------------ */
/* Map the raw Bootstrap variants used across un-migrated pages onto the
   mockup palette so they don't render as Bootstrap's saturated fills.
   Migrated UI/* buttons use .btn-prf and are unaffected. */
.btn-primary {
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-color: var(--color-text-on-accent);
    --bs-btn-hover-bg: var(--color-accent-hover);
    --bs-btn-hover-border-color: var(--color-accent-hover);
    --bs-btn-active-bg: var(--color-accent-press);
    --bs-btn-disabled-bg: var(--color-accent);
    --bs-btn-disabled-border-color: var(--color-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-accent-text);
    --bs-btn-border-color: var(--color-accent-line);
    --bs-btn-hover-bg: var(--color-accent-soft);
    --bs-btn-hover-color: var(--color-accent-text);
    --bs-btn-hover-border-color: var(--color-accent);
    --bs-btn-active-bg: var(--color-accent-soft);
    --bs-btn-active-color: var(--color-accent-text);
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-bg: var(--color-surface-2);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-surface-3);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-border-color: var(--color-border-strong);
}

.btn-outline-info {
    --bs-btn-color: var(--color-info-text);
    --bs-btn-border-color: var(--color-info-line);
    --bs-btn-hover-bg: var(--color-info-soft);
    --bs-btn-hover-color: var(--color-info-text);
}

.btn-outline-warning {
    --bs-btn-color: var(--color-warning-text);
    --bs-btn-border-color: var(--color-warning-line);
    --bs-btn-hover-bg: var(--color-warning-soft);
    --bs-btn-hover-color: var(--color-warning-text);
}

.btn-close {
    filter: none;
    color: var(--color-text-muted);
}

/* ---- Bootstrap alert base (not-yet-migrated pages) ------------------- */
.alert {
    font-size: var(--fs-sm);
}

.alert-info {
    --bs-alert-bg: var(--color-info-soft);
    --bs-alert-border-color: var(--color-info-line);
    --bs-alert-color: var(--color-info-text);
}

.alert-success {
    --bs-alert-bg: var(--color-success-soft);
    --bs-alert-border-color: var(--color-success-line);
    --bs-alert-color: var(--color-success-text);
}

.alert-warning {
    --bs-alert-bg: var(--color-warning-soft);
    --bs-alert-border-color: var(--color-warning-line);
    --bs-alert-color: var(--color-warning-text);
}

.alert-danger {
    --bs-alert-bg: var(--color-danger-soft);
    --bs-alert-border-color: var(--color-danger-line);
    --bs-alert-color: var(--color-danger-text);
}

/* ---- Code / pre ----------------------------------------------------- */
code,
kbd,
pre {
    color: var(--color-accent-text);
}