/* ============================================================================
   File:        _rc-tokens.css
   Purpose:     Semantic recipe tokens for ReportCenter variant-API primitives
                PLUS ReportCenter reporting-surface palettes (dashboard-card
                light variants, summary surfaces, matrix-neutral chrome, and
                sidebar chrome).
   Consumes:    variables.css tokens (--color-primary, --bg-*, --text-*, etc.).
   Rendered by:
                - Variant-API primitives: <RcButton>, <RcIconButton>, <RcPill>,
                  <RcLinkAction>.
                - Surface-invariant consumers:
                * RcDashboardCard.razor.css              (consumes --rc-card-light-* in
                                                             light mode and --rc-card-variant-*
                                                             dark-mode fallbacks)
                    * ReportCenterLayout.razor.css          (consumes --rc-chrome-dark-mode-toggle-*)
                    * ReportCenterNavMenu.razor.css         (consumes --rc-chrome-sidebar-topbar-bg,
                                                             --rc-chrome-nav-inverse-fg)
                    * ReportCenterNavFilter.razor.css       (consumes --rc-chrome-nav-inverse-fg,
                                                             --rc-chrome-nav-error-fg)
                    * RcReportCenterContent.razor.css       (consumes --rc-report-danger-*
                                                             affordance tokens)
   Loaded via:  <link> in Pages/_Layout.cshtml, AFTER wwwroot/css/shared/variables.css.
   Layer:       1.5 (semantic recipe tokens + surface contexts)
   Contract:    size tokens are primitive-local density tiers (Xs/Sm/Md may
                render at different heights across primitives). Variant-API
                color tokens are surface-dependent (rebound by .rc-surface-dark).
                Surface context is never a prop — applied as a class on an ancestor.
                ReportCenter reporting-surface palettes in Section 3 are shared
                semantic values for production reporting chrome. Dense status
                palettes remain separate from light elevated-card palettes so
                changing cards does not silently change matrix/status cells.
   Boundary:    RC-specific semantic palettes (dashboard-card variants, sidebar
                chrome) live HERE. Universal cross-app design tokens live in
                wwwroot/css/shared/variables.css (read-only from ReportCenter).
   Consumers note: to add a new tone (e.g., Danger) for variant-API primitives,
                follow Pages/ReportCenter/VARIANT_API_PLAN.md §9.4 checklist. Tokens + primitive
                recipes + enum member + docs.
   ============================================================================ */

/* ============================================================================
   SECTION 1 — Primitive geometry tokens (size tiers per primitive family)

   Why per-primitive: a text button and an icon button need different intrinsic
   heights at the same "Sm" density tier. A pill is chip-geometry. Sharing a
   single --rc-control-h-sm would force false consistency. Each primitive has
   its own h/px/gap/fs scale here; the variant-API class selectors in
   _rc-buttons.css / _rc-icon-buttons.css / _rc-pills.css / _rc-link-actions.css
   pull these in mechanically.
   ============================================================================ */

:root {
    /* RcButton — box-style text button, min-width clamped to avoid sub-label squish. */
    --rc-btn-h-xs: 24px;
    --rc-btn-h-sm: 28px;
    --rc-btn-h-md: 36px;

    --rc-btn-px-xs: var(--space-2, 0.5rem);
    --rc-btn-px-sm: var(--space-3, 0.75rem);
    --rc-btn-px-md: var(--space-4, 1rem);

    --rc-btn-fs-xs: var(--font-size-xs, 0.75rem);
    --rc-btn-fs-sm: var(--font-size-xs, 0.75rem);
    --rc-btn-fs-md: var(--font-size-sm, 0.875rem);

    --rc-btn-gap-xs: var(--space-1, 0.25rem);
    --rc-btn-gap-sm: var(--space-1, 0.25rem);
    --rc-btn-gap-md: var(--space-2, 0.5rem);

    --rc-btn-radius: var(--radius-md, 0.375rem);
    --rc-btn-border-width: 1px;
    --rc-btn-min-width-md: 80px;

    /* RcIconButton — square. Width = height. */
    --rc-icon-btn-h-xs: 24px;
    --rc-icon-btn-h-sm: 32px;
    --rc-icon-btn-h-md: 40px;
    --rc-icon-btn-radius: var(--radius-md, 0.375rem);
    --rc-icon-btn-border-width: 1px;
    --rc-icon-btn-svg-xs: 12px;
    --rc-icon-btn-svg-sm: 16px;
    --rc-icon-btn-svg-md: 20px;

    /* RcPill — chip geometry. Small, rounded-full. */
    --rc-pill-h-xs: 18px;
    --rc-pill-h-sm: 22px;
    --rc-pill-px-xs: var(--space-2, 0.5rem);
    --rc-pill-px-sm: var(--space-3, 0.75rem);
    --rc-pill-fs-xs: 0.6875rem;   /* ~11px */
    --rc-pill-fs-sm: var(--font-size-xs, 0.75rem);
    --rc-pill-gap: var(--space-1, 0.25rem);
    --rc-pill-radius: var(--radius-full, 9999px);
    --rc-pill-border-width: 1px;

    /* RcLinkAction — inline text, underline. No box geometry. */
    --rc-link-action-fs-xs: var(--font-size-xs, 0.75rem);
    --rc-link-action-fs-sm: var(--font-size-sm, 0.875rem);
    --rc-link-action-underline-offset: 2px;
    --rc-link-action-underline-thickness: 1px;

    /* Focus ring — shared across all primitives. Color varies by surface
       (light = brand primary; dark = translucent white). */
    --rc-focus-ring-width: 2px;
    --rc-focus-ring-offset: 2px;

    /* Motion — shared with variables.css --transition-fast. Aliased here so
       primitive recipes don't need to know about Layer 1 variable names. */
    --rc-motion-fast: var(--transition-fast, 0.15s ease);
}

/* ============================================================================
   SECTION 2 — Surface contexts

   Each surface rebinds the "recipe" tokens that primitive CSS reads. Dimension
   tokens above are surface-invariant; only colors/opacity change here.

   :root  === .rc-surface-light === default (no wrapper class needed).
   .rc-surface-dark — applied to the sidebar wrapper in ReportCenterLayout.
   body.dark-mode .rc-surface-dark — deepened for dark mode.
   .rc-modal-container.rc-surface-light — explicit reset class on every modal
       container (defense-in-depth for modals declared under a dark surface).
   ============================================================================ */

/* --------------------------------------------------------------------------
   Light surface — default. Every primitive consumes these; .rc-surface-light
   is a no-op selector on top of :root so it can appear explicitly (e.g., on
   an RcModal that resets inside a dark sidebar subtree).
   -------------------------------------------------------------------------- */
:root,
.rc-surface-light {
    /* -- Tone: Neutral (lowest emphasis; default for most buttons) -- */
    --rc-tone-neutral-solid-bg:          var(--bg-primary, #ffffff);
    --rc-tone-neutral-solid-fg:          var(--text-primary, #111827);
    --rc-tone-neutral-solid-border:      var(--border-primary, #e5e7eb);
    --rc-tone-neutral-solid-bg-hover:    var(--bg-tertiary, #f3f4f6);
    --rc-tone-neutral-solid-border-hover: var(--border-secondary, #d1d5db);

    --rc-tone-neutral-outline-fg:        var(--text-secondary, #6b7280);
    --rc-tone-neutral-outline-border:    var(--border-secondary, #d1d5db);
    --rc-tone-neutral-outline-bg-hover:  var(--bg-tertiary, #f3f4f6);
    --rc-tone-neutral-outline-fg-hover:  var(--text-primary, #111827);

    --rc-tone-neutral-ghost-fg:          var(--text-secondary, #6b7280);
    --rc-tone-neutral-ghost-bg-rest:     transparent;   /* barely-visible at rest on light surface */
    --rc-tone-neutral-ghost-bg-hover:    var(--bg-tertiary, #f3f4f6);
    --rc-tone-neutral-ghost-fg-hover:    var(--text-primary, #111827);

    /* -- Tone: Primary (brand emphasis) -- */
    --rc-tone-primary-solid-bg:          var(--color-primary, #4CA7BB);
    --rc-tone-primary-solid-fg:          var(--text-inverse, #ffffff);
    --rc-tone-primary-solid-border:      var(--color-primary, #4CA7BB);
    --rc-tone-primary-solid-bg-hover:    var(--color-primary-hover, #3D8A9A);
    --rc-tone-primary-solid-border-hover: var(--color-primary-hover, #3D8A9A);

    --rc-tone-primary-outline-fg:        var(--color-primary, #4CA7BB);
    --rc-tone-primary-outline-border:    var(--color-primary, #4CA7BB);
    --rc-tone-primary-outline-bg-hover:  var(--color-primary-light, #E8F4F7);
    --rc-tone-primary-outline-fg-hover:  var(--color-primary-hover, #3D8A9A);

    --rc-tone-primary-ghost-fg:          var(--color-primary, #4CA7BB);
    --rc-tone-primary-ghost-bg-rest:     transparent;
    --rc-tone-primary-ghost-bg-hover:    var(--color-primary-light, #E8F4F7);
    --rc-tone-primary-ghost-fg-hover:    var(--color-primary-hover, #3D8A9A);

    /* -- Pill tone tokens (shape is chip, not button). Soft = tinted bg. -- */
    --rc-pill-tone-neutral-soft-bg:      var(--bg-tertiary, #f3f4f6);
    --rc-pill-tone-neutral-soft-fg:      var(--text-secondary, #6b7280);
    --rc-pill-tone-neutral-soft-bg-hover: var(--bg-tertiary, #f3f4f6);
    --rc-pill-tone-neutral-soft-fg-hover: var(--text-primary, #111827);
    --rc-pill-tone-neutral-outline-fg:   var(--text-secondary, #6b7280);
    --rc-pill-tone-neutral-outline-border: var(--border-secondary, #d1d5db);
    --rc-pill-tone-neutral-outline-bg-hover: var(--bg-tertiary, #f3f4f6);
    --rc-pill-tone-neutral-outline-fg-hover: var(--text-primary, #111827);

    --rc-pill-tone-primary-soft-bg:      var(--color-primary-light, rgba(76, 167, 187, 0.12));
    --rc-pill-tone-primary-soft-fg:      var(--color-primary, #4CA7BB);
    --rc-pill-tone-primary-soft-bg-hover: var(--color-primary, #4CA7BB);
    --rc-pill-tone-primary-soft-fg-hover: var(--text-inverse, #ffffff);
    --rc-pill-tone-primary-outline-fg:   var(--color-primary, #4CA7BB);
    --rc-pill-tone-primary-outline-border: var(--color-primary, #4CA7BB);
    --rc-pill-tone-primary-outline-bg-hover: var(--color-primary-light, #E8F4F7);
    --rc-pill-tone-primary-outline-fg-hover: var(--color-primary-hover, #3D8A9A);

    /* -- Link-action tone tokens (underline + text color only) -- */
    --rc-link-action-tone-neutral-fg:        var(--text-secondary, #6b7280);
    --rc-link-action-tone-neutral-fg-hover:  var(--text-primary, #111827);
    --rc-link-action-tone-primary-fg:        var(--color-primary, #4CA7BB);
    --rc-link-action-tone-primary-fg-hover:  var(--color-primary-hover, #3D8A9A);

    /* -- Icon-button tone tokens (subtle by default; hover brightens). -- */
    --rc-icon-btn-tone-neutral-fg:           var(--text-tertiary, #9ca3af);
    --rc-icon-btn-tone-neutral-bg-hover:     var(--bg-tertiary, #f3f4f6);
    --rc-icon-btn-tone-neutral-fg-hover:     var(--text-secondary, #6b7280);
    --rc-icon-btn-tone-neutral-fg-pressed:   var(--color-primary, #4CA7BB);  /* aria-pressed=true */
    --rc-icon-btn-tone-neutral-border-pressed: var(--color-primary, #4CA7BB);
    --rc-icon-btn-tone-neutral-bg-pressed:   var(--color-primary-light, rgba(76,167,187,0.12));
    --rc-icon-btn-tone-primary-fg:           var(--color-primary, #4CA7BB);
    --rc-icon-btn-tone-primary-bg-hover:     var(--color-primary-light, #E8F4F7);
    --rc-icon-btn-tone-primary-fg-hover:     var(--color-primary-hover, #3D8A9A);

    /* -- Disabled / focus. Surface-invariant values but live here so dark
          surface can override opacity if needed. -- */
    --rc-control-disabled-opacity: 0.5;
    --rc-focus-ring-color:         var(--color-primary, #4CA7BB);

    /* -- Badge chip on .rc-btn. Contrast over solid/outline/ghost differs. -- */
    --rc-btn-badge-bg:  rgba(255, 255, 255, 0.2);
    --rc-btn-badge-fg:  currentColor;

}

/* ============================================================================
   SECTION 3 — ReportCenter reporting-surface palettes

   These tokens define production-reporting chrome above the primitive recipe
   layer: light report surfaces, elevated KPI cards, summary/popover controls,
   matrix-neutral surfaces, and the existing dense status/sidebar palettes.

   Important split:
     - `--rc-card-light-*` is the light-mode RcDashboardCard/elevated-card
       palette.
     - `--rc-card-variant-*` remains the saturated dense status palette used by
       matrix/status cells and old dark-mode card fallbacks. Do not repurpose it
       for light cards.
     - `--rc-chrome-*` remains sidebar/dark-chrome vocabulary.
   Dark-mode behavior for the saturated palette is still encoded via explicit
   `-dm` suffix token pairs.

   Consumed by (as of Phase D):
     - ReportCenterLayout.razor.css (dark-mode-toggle fg variants)
     - ReportCenterNavMenu.razor.css (sidebar top-row bg, inverse fg)
     - ReportCenterNavFilter.razor.css (inverse fg, error fg)
     - RcDashboardCard.razor.css (all five rc-card-variant-* triplets + dm overrides)
     - RcReportCenterContent.razor.css (report danger affordance tokens)
   ============================================================================ */

:root {
    /* -- Light report surface vocabulary. -- */
    --rc-report-surface-bg:                 #f6f8fb;
    --rc-report-surface-bg-soft:            #eef3f7;
    --rc-report-surface-panel:              #ffffff;
    --rc-report-surface-panel-subtle:       #f8fafc;
    --rc-report-surface-panel-muted:        #f1f5f9;
    --rc-report-surface-fg:                 #172033;
    --rc-report-surface-muted-fg:           #5f6f83;
    --rc-report-surface-subtle-fg:          #7c8a9b;
    --rc-report-surface-border:             #dbe4ee;
    --rc-report-surface-border-strong:      #c6d3df;
    --rc-report-surface-shadow:             0 10px 24px rgba(15, 23, 42, 0.08);
    --rc-report-surface-shadow-strong:      0 18px 42px rgba(15, 23, 42, 0.14);
    --rc-report-edge-highlight:             rgba(255, 255, 255, 0.88);
    --rc-report-edge-shadow:                rgba(15, 23, 42, 0.1);

    /* -- Summary bar + chips. -- */
    --rc-summary-bg-start:                  #ffffff;
    --rc-summary-bg-end:                    #eef4f8;
    --rc-summary-fg:                        var(--rc-report-surface-fg);
    --rc-summary-muted-fg:                  var(--rc-report-surface-muted-fg);
    --rc-summary-border:                    var(--rc-report-surface-border);
    --rc-summary-divider:                   rgba(95, 111, 131, 0.22);
    --rc-summary-chip-bg:                   rgba(76, 167, 187, 0.08);
    --rc-summary-chip-border:               rgba(76, 167, 187, 0.22);
    --rc-summary-chip-fg:                   #365567;

    /* -- Light controls and popovers in reporting surfaces. -- */
    --rc-report-control-bg:                 #ffffff;
    --rc-report-control-bg-hover:           #eef7fa;
    --rc-report-control-fg:                 var(--rc-report-surface-fg);
    --rc-report-control-muted-fg:           var(--rc-report-surface-muted-fg);
    --rc-report-control-border:             var(--rc-report-surface-border);
    --rc-report-control-border-hover:       rgba(76, 167, 187, 0.38);
    --rc-report-control-focus:              rgba(76, 167, 187, 0.42);
    --rc-report-popover-bg-start:           #ffffff;
    --rc-report-popover-bg-end:             #f5f9fc;
    --rc-report-popover-fg:                 var(--rc-report-surface-fg);
    --rc-report-popover-muted-fg:           var(--rc-report-surface-muted-fg);
    --rc-report-popover-border:             var(--rc-report-surface-border);
    --rc-report-popover-shadow:             0 20px 44px rgba(15, 23, 42, 0.18);

    /* -- Light warning/danger affordances. -- */
    --rc-report-warning-bg:                 rgba(245, 158, 11, 0.13);
    --rc-report-warning-bg-hover:           rgba(245, 158, 11, 0.2);
    --rc-report-warning-border:             rgba(169, 103, 18, 0.28);
    --rc-report-warning-border-strong:      rgba(169, 103, 18, 0.46);
    --rc-report-warning-fg:                 #724307;
    --rc-report-danger-bg:                  rgba(239, 68, 68, 0.12);
    --rc-report-danger-border:              rgba(178, 64, 53, 0.34);
    --rc-report-danger-fg:                  #8f1f19;
    --rc-report-status-success-fg:          #166534;
    --rc-report-status-warning-fg:          #92400e;
    --rc-report-status-danger-fg:           #b91c1c;

    /* -- Light RcDashboardCard variants. Dense status cells do not use these. -- */
    --rc-card-light-default-gradient-start: #ffffff;
    --rc-card-light-default-gradient-end:   #f3f7fb;
    --rc-card-light-default-fg:             var(--rc-report-surface-fg);
    --rc-card-light-default-muted-fg:       var(--rc-report-surface-muted-fg);
    --rc-card-light-default-border:         var(--rc-report-surface-border);

    --rc-card-light-success-gradient-start: #f0fdf4;
    --rc-card-light-success-gradient-end:   #dcfce7;
    --rc-card-light-success-fg:             #065f46;
    --rc-card-light-success-muted-fg:       #047857;
    --rc-card-light-success-border:         rgba(16, 185, 129, 0.28);

    --rc-card-light-warning-gradient-start: #fffbeb;
    --rc-card-light-warning-gradient-end:   #fef3c7;
    --rc-card-light-warning-fg:             #92400e;
    --rc-card-light-warning-muted-fg:       #a96712;
    --rc-card-light-warning-border:         rgba(245, 158, 11, 0.32);

    --rc-card-light-danger-gradient-start:  #fef2f2;
    --rc-card-light-danger-gradient-end:    #fee2e2;
    --rc-card-light-danger-fg:              #991b1b;
    --rc-card-light-danger-muted-fg:        #b91c1c;
    --rc-card-light-danger-border:          rgba(239, 68, 68, 0.3);

    --rc-card-light-info-gradient-start:    #eff6ff;
    --rc-card-light-info-gradient-end:      #dbeafe;
    --rc-card-light-info-fg:                #1e40af;
    --rc-card-light-info-muted-fg:          #2563eb;
    --rc-card-light-info-border:            rgba(59, 130, 246, 0.28);

    --rc-card-light-shadow:                 0 8px 20px rgba(15, 23, 42, 0.1);
    --rc-card-light-shadow-hover:           0 14px 30px rgba(15, 23, 42, 0.16);

    /* -- Matrix neutral chrome. Status cells keep --rc-card-variant-* semantics. -- */
    --rc-matrix-neutral-surface:            #f8fafc;
    --rc-matrix-neutral-surface-strong:     #e8f0f6;
    --rc-matrix-neutral-header-start:       #ffffff;
    --rc-matrix-neutral-header-end:         #e7f0f6;
    --rc-matrix-neutral-cell-start:         #ffffff;
    --rc-matrix-neutral-cell-end:           #edf4f8;
    --rc-matrix-neutral-fg:                 var(--rc-report-surface-fg);
    --rc-matrix-neutral-muted-fg:           var(--rc-report-surface-muted-fg);
    --rc-matrix-neutral-border:             rgba(95, 111, 131, 0.2);
    --rc-matrix-neutral-grid-line:          rgba(95, 111, 131, 0.18);

    /* -- Chrome / layout-specific tokens. -- */
    --rc-chrome-sidebar-topbar-bg:              #3f4f5f;              /* mobile top-row background */
    --rc-chrome-dark-mode-toggle-fg:            #fbbf24;              /* amber sun icon */
    --rc-chrome-dark-mode-toggle-fg-hover:      #fde68a;
    --rc-chrome-nav-error-fg:                   #fca5a5;              /* rose-300 — validation errors on dark nav */
    --rc-chrome-nav-inverse-fg:                 #ffffff;              /* explicit white fg on dark chrome */

    /* Dark-surface gradient (sidebar + dashboard summary). Used by ReportCenterLayout.razor.css,
       RcReportCenterContent.razor.css, and the VariantGallery page's dark-surface painter.
       Matches the pre-migration scoped literals exactly; -dm suffix = body.dark-mode deepened. */
    --rc-chrome-dark-surface-gradient-start:    #4a5568;
    --rc-chrome-dark-surface-gradient-end:      #3a4455;
    --rc-chrome-dark-surface-gradient-start-dm: #3a4455;
    --rc-chrome-dark-surface-gradient-end-dm:   #2d3748;

    /* -- RcDashboardCard variant gradients + foregrounds. Five variants: default (dark-steel),
          success (emerald), warning (amber), danger (crimson), info (sapphire). -dm suffix =
          body.dark-mode deepened variant (same hue, slightly darker). -- */
    --rc-card-variant-default-gradient-start:   #2d3748;
    --rc-card-variant-default-gradient-end:     #1a202c;
    --rc-card-variant-default-fg:               #e2e8f0;

    --rc-card-variant-success-gradient-start:   #155e3d;
    --rc-card-variant-success-gradient-end:     #0d3b26;
    --rc-card-variant-success-fg:               #a7f3d0;

    --rc-card-variant-warning-gradient-start:   #7c4a15;
    --rc-card-variant-warning-gradient-end:     #5c370e;
    --rc-card-variant-warning-fg:               #fde68a;

    --rc-card-variant-danger-gradient-start:    #8b1a1a;
    --rc-card-variant-danger-gradient-end:      #611313;
    --rc-card-variant-danger-fg:                #fca5a5;

    --rc-card-variant-info-gradient-start:      #1e3a6e;
    --rc-card-variant-info-gradient-end:        #152a52;
    --rc-card-variant-info-fg:                  #93c5fd;

    /* Dark-mode deepened variants (same hues, slightly darker). */
    --rc-card-variant-default-gradient-start-dm: #1a202c;
    --rc-card-variant-default-gradient-end-dm:   #111827;
    --rc-card-variant-success-gradient-start-dm: #0d3b26;
    --rc-card-variant-success-gradient-end-dm:   #07291a;
    --rc-card-variant-warning-gradient-start-dm: #5c370e;
    --rc-card-variant-warning-gradient-end-dm:   #422808;
    --rc-card-variant-danger-gradient-start-dm:  #611313;
    --rc-card-variant-danger-gradient-end-dm:    #450e0e;
    --rc-card-variant-info-gradient-start-dm:    #152a52;
    --rc-card-variant-info-gradient-end-dm:      #0f1e3d;
}

body.dark-mode {
    --rc-report-surface-bg:                 #0f172a;
    --rc-report-surface-bg-soft:            #111827;
    --rc-report-surface-panel:              #1e293b;
    --rc-report-surface-panel-subtle:       #172033;
    --rc-report-surface-panel-muted:        #243447;
    --rc-report-surface-fg:                 #e2e8f0;
    --rc-report-surface-muted-fg:           #a7b6c8;
    --rc-report-surface-subtle-fg:          #7f8fa3;
    --rc-report-surface-border:             rgba(226, 232, 240, 0.14);
    --rc-report-surface-border-strong:      rgba(226, 232, 240, 0.24);
    --rc-report-surface-shadow:             0 12px 28px rgba(0, 0, 0, 0.34);
    --rc-report-surface-shadow-strong:      0 22px 48px rgba(0, 0, 0, 0.44);
    --rc-report-edge-highlight:             rgba(255, 255, 255, 0.08);
    --rc-report-edge-shadow:                rgba(0, 0, 0, 0.4);

    --rc-summary-bg-start:                  #1e293b;
    --rc-summary-bg-end:                    #111827;
    --rc-summary-fg:                        var(--rc-report-surface-fg);
    --rc-summary-muted-fg:                  var(--rc-report-surface-muted-fg);
    --rc-summary-border:                    var(--rc-report-surface-border);
    --rc-summary-divider:                   rgba(226, 232, 240, 0.16);
    --rc-summary-chip-bg:                   rgba(255, 255, 255, 0.08);
    --rc-summary-chip-border:               rgba(226, 232, 240, 0.16);
    --rc-summary-chip-fg:                   rgba(226, 232, 240, 0.78);

    --rc-report-control-bg:                 rgba(255, 255, 255, 0.08);
    --rc-report-control-bg-hover:           rgba(255, 255, 255, 0.14);
    --rc-report-control-fg:                 var(--rc-report-surface-fg);
    --rc-report-control-muted-fg:           var(--rc-report-surface-muted-fg);
    --rc-report-control-border:             rgba(226, 232, 240, 0.16);
    --rc-report-control-border-hover:       rgba(226, 232, 240, 0.28);
    --rc-report-control-focus:              rgba(226, 232, 240, 0.62);
    --rc-report-popover-bg-start:           #1e293b;
    --rc-report-popover-bg-end:             #111827;
    --rc-report-popover-fg:                 var(--rc-report-surface-fg);
    --rc-report-popover-muted-fg:           var(--rc-report-surface-muted-fg);
    --rc-report-popover-border:             rgba(226, 232, 240, 0.16);
    --rc-report-popover-shadow:             0 22px 48px rgba(0, 0, 0, 0.46);

    --rc-report-warning-bg:                 rgba(245, 158, 11, 0.18);
    --rc-report-warning-bg-hover:           rgba(245, 158, 11, 0.25);
    --rc-report-warning-border:             rgba(253, 230, 138, 0.26);
    --rc-report-warning-border-strong:      rgba(253, 230, 138, 0.44);
    --rc-report-warning-fg:                 #fde68a;
    --rc-report-danger-bg:                  rgba(239, 68, 68, 0.16);
    --rc-report-danger-border:              rgba(252, 165, 165, 0.3);
    --rc-report-danger-fg:                  #fca5a5;
    --rc-report-status-success-fg:          rgb(134, 239, 172);
    --rc-report-status-warning-fg:          rgb(253, 224, 71);
    --rc-report-status-danger-fg:           rgb(252, 165, 165);

    --rc-card-light-default-gradient-start: #1e293b;
    --rc-card-light-default-gradient-end:   #111827;
    --rc-card-light-default-fg:             var(--rc-report-surface-fg);
    --rc-card-light-default-muted-fg:       var(--rc-report-surface-muted-fg);
    --rc-card-light-default-border:         var(--rc-report-surface-border);

    --rc-matrix-neutral-surface:            #111827;
    --rc-matrix-neutral-surface-strong:     #0f172a;
    --rc-matrix-neutral-header-start:       #1e293b;
    --rc-matrix-neutral-header-end:         #111827;
    --rc-matrix-neutral-cell-start:         #1f2937;
    --rc-matrix-neutral-cell-end:           #111827;
    --rc-matrix-neutral-fg:                 var(--rc-report-surface-fg);
    --rc-matrix-neutral-muted-fg:           var(--rc-report-surface-muted-fg);
    --rc-matrix-neutral-border:             rgba(226, 232, 240, 0.14);
    --rc-matrix-neutral-grid-line:          rgba(226, 232, 240, 0.12);
}

/* --------------------------------------------------------------------------
   Dark surface — sidebar region. Applied to `.sidebar` in
   ReportCenterLayout.razor via the `rc-surface-dark` class. All rgba literals
   assume a dark gradient behind them. Hover states intensify translucency.
   -------------------------------------------------------------------------- */
.rc-surface-dark {
    --rc-tone-neutral-solid-bg:          rgba(255, 255, 255, 0.15);
    --rc-tone-neutral-solid-fg:          rgba(255, 255, 255, 0.9);
    --rc-tone-neutral-solid-border:      transparent;
    --rc-tone-neutral-solid-bg-hover:    rgba(255, 255, 255, 0.25);
    --rc-tone-neutral-solid-border-hover: transparent;

    --rc-tone-neutral-outline-fg:        rgba(255, 255, 255, 0.8);
    --rc-tone-neutral-outline-border:    rgba(255, 255, 255, 0.3);
    --rc-tone-neutral-outline-bg-hover:  rgba(255, 255, 255, 0.12);
    --rc-tone-neutral-outline-fg-hover:  #ffffff;

    --rc-tone-neutral-ghost-fg:          rgba(255, 255, 255, 0.8);
    --rc-tone-neutral-ghost-bg-rest:     rgba(255, 255, 255, 0.1);   /* Clear pill at rest — preserves pre-migration visual */
    --rc-tone-neutral-ghost-bg-hover:    rgba(255, 255, 255, 0.2);   /* matches pre-migration Clear hover */
    --rc-tone-neutral-ghost-fg-hover:    #ffffff;

    --rc-tone-primary-solid-bg:          rgba(255, 255, 255, 0.2);
    --rc-tone-primary-solid-fg:          #ffffff;
    --rc-tone-primary-solid-border:      transparent;
    --rc-tone-primary-solid-bg-hover:    rgba(255, 255, 255, 0.3);
    --rc-tone-primary-solid-border-hover: transparent;

    --rc-tone-primary-outline-fg:        rgba(255, 255, 255, 0.9);
    --rc-tone-primary-outline-border:    rgba(255, 255, 255, 0.4);
    --rc-tone-primary-outline-bg-hover:  rgba(255, 255, 255, 0.12);
    --rc-tone-primary-outline-fg-hover:  #ffffff;

    --rc-tone-primary-ghost-fg:          rgba(255, 255, 255, 0.9);
    --rc-tone-primary-ghost-bg-rest:     rgba(255, 255, 255, 0.1);
    --rc-tone-primary-ghost-bg-hover:    rgba(255, 255, 255, 0.12);
    --rc-tone-primary-ghost-fg-hover:    #ffffff;

    /* Pills on dark surface. */
    --rc-pill-tone-neutral-soft-bg:      rgba(255, 255, 255, 0.1);
    --rc-pill-tone-neutral-soft-fg:      rgba(255, 255, 255, 0.85);
    --rc-pill-tone-neutral-soft-bg-hover: rgba(255, 255, 255, 0.18);
    --rc-pill-tone-neutral-soft-fg-hover: #ffffff;
    --rc-pill-tone-neutral-outline-fg:   rgba(255, 255, 255, 0.6);
    --rc-pill-tone-neutral-outline-border: rgba(255, 255, 255, 0.25);
    --rc-pill-tone-neutral-outline-bg-hover: rgba(255, 255, 255, 0.1);
    --rc-pill-tone-neutral-outline-fg-hover: rgba(255, 255, 255, 0.9);

    --rc-pill-tone-primary-soft-bg:      rgba(255, 255, 255, 0.18);
    --rc-pill-tone-primary-soft-fg:      #ffffff;
    --rc-pill-tone-primary-soft-bg-hover: rgba(255, 255, 255, 0.28);
    --rc-pill-tone-primary-soft-fg-hover: #ffffff;
    --rc-pill-tone-primary-outline-fg:   #ffffff;
    --rc-pill-tone-primary-outline-border: rgba(255, 255, 255, 0.4);
    --rc-pill-tone-primary-outline-bg-hover: rgba(255, 255, 255, 0.12);
    --rc-pill-tone-primary-outline-fg-hover: #ffffff;

    /* Link actions on dark. */
    --rc-link-action-tone-neutral-fg:        rgba(255, 255, 255, 0.7);
    --rc-link-action-tone-neutral-fg-hover:  #ffffff;
    --rc-link-action-tone-primary-fg:        rgba(255, 255, 255, 0.9);
    --rc-link-action-tone-primary-fg-hover:  #ffffff;

    /* Icon buttons on dark. */
    --rc-icon-btn-tone-neutral-fg:           rgba(255, 255, 255, 0.6);
    --rc-icon-btn-tone-neutral-bg-hover:     rgba(255, 255, 255, 0.15);
    --rc-icon-btn-tone-neutral-fg-hover:     #ffffff;
    --rc-icon-btn-tone-neutral-fg-pressed:   #ffffff;
    --rc-icon-btn-tone-neutral-border-pressed: rgba(255, 255, 255, 0.4);
    --rc-icon-btn-tone-neutral-bg-pressed:   rgba(255, 255, 255, 0.18);
    --rc-icon-btn-tone-primary-fg:           rgba(255, 255, 255, 0.85);
    --rc-icon-btn-tone-primary-bg-hover:     rgba(255, 255, 255, 0.18);
    --rc-icon-btn-tone-primary-fg-hover:     #ffffff;

    --rc-focus-ring-color: rgba(255, 255, 255, 0.6);

    --rc-btn-badge-bg:  rgba(255, 255, 255, 0.2);
    --rc-btn-badge-fg:  currentColor;
}

/* --------------------------------------------------------------------------
   Dark-mode × dark-surface — deepen selected tokens so the sidebar maintains
   visual separation when the site-wide dark mode is on (sidebar gradient also
   deepens per ReportCenterLayout.razor.css).
   -------------------------------------------------------------------------- */
body.dark-mode .rc-surface-dark {
    /* Slightly brighter primary + neutral hovers to cut through the darker
       gradient; borders stay subtle. */
    --rc-tone-neutral-outline-border:    rgba(255, 255, 255, 0.25);
    --rc-tone-neutral-outline-bg-hover:  rgba(255, 255, 255, 0.08);
    --rc-tone-neutral-ghost-bg-hover:    rgba(255, 255, 255, 0.08);

    --rc-tone-primary-outline-border:    rgba(255, 255, 255, 0.35);
    --rc-tone-primary-outline-bg-hover:  rgba(255, 255, 255, 0.1);
    --rc-tone-primary-ghost-bg-hover:    rgba(255, 255, 255, 0.1);

    --rc-pill-tone-neutral-soft-bg:      rgba(255, 255, 255, 0.08);
    --rc-pill-tone-primary-soft-bg:      rgba(255, 255, 255, 0.14);

    --rc-icon-btn-tone-neutral-fg:       rgba(255, 255, 255, 0.55);
    --rc-icon-btn-tone-neutral-bg-hover: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   Modal-container reset — when an <RcModal> is declared under the dark
   sidebar subtree (see ReportCenterNavFilter.razor rendering the modals
   inline), the modal's .rc-surface-light class REBINDS tokens back to light
   defaults on the modal element itself. Same-element class beats ancestor
   inheritance.
   -------------------------------------------------------------------------- */
.rc-modal-container.rc-surface-light {
    /* Explicitly redeclare ALL light tokens here so any ancestor .rc-surface-dark
       cascade is fully defeated. Duplication is the point — we want a guaranteed
       reset, not a partial override. */
    --rc-tone-neutral-solid-bg:          var(--bg-primary, #ffffff);
    --rc-tone-neutral-solid-fg:          var(--text-primary, #111827);
    --rc-tone-neutral-solid-border:      var(--border-primary, #e5e7eb);
    --rc-tone-neutral-solid-bg-hover:    var(--bg-tertiary, #f3f4f6);
    --rc-tone-neutral-solid-border-hover: var(--border-secondary, #d1d5db);

    --rc-tone-neutral-outline-fg:        var(--text-secondary, #6b7280);
    --rc-tone-neutral-outline-border:    var(--border-secondary, #d1d5db);
    --rc-tone-neutral-outline-bg-hover:  var(--bg-tertiary, #f3f4f6);
    --rc-tone-neutral-outline-fg-hover:  var(--text-primary, #111827);

    --rc-tone-neutral-ghost-fg:          var(--text-secondary, #6b7280);
    --rc-tone-neutral-ghost-bg-rest:     transparent;
    --rc-tone-neutral-ghost-bg-hover:    var(--bg-tertiary, #f3f4f6);
    --rc-tone-neutral-ghost-fg-hover:    var(--text-primary, #111827);

    --rc-tone-primary-solid-bg:          var(--color-primary, #4CA7BB);
    --rc-tone-primary-solid-fg:          var(--text-inverse, #ffffff);
    --rc-tone-primary-solid-border:      var(--color-primary, #4CA7BB);
    --rc-tone-primary-solid-bg-hover:    var(--color-primary-hover, #3D8A9A);
    --rc-tone-primary-solid-border-hover: var(--color-primary-hover, #3D8A9A);

    --rc-tone-primary-outline-fg:        var(--color-primary, #4CA7BB);
    --rc-tone-primary-outline-border:    var(--color-primary, #4CA7BB);
    --rc-tone-primary-outline-bg-hover:  var(--color-primary-light, #E8F4F7);
    --rc-tone-primary-outline-fg-hover:  var(--color-primary-hover, #3D8A9A);

    --rc-tone-primary-ghost-fg:          var(--color-primary, #4CA7BB);
    --rc-tone-primary-ghost-bg-rest:     transparent;
    --rc-tone-primary-ghost-bg-hover:    var(--color-primary-light, #E8F4F7);
    --rc-tone-primary-ghost-fg-hover:    var(--color-primary-hover, #3D8A9A);

    --rc-pill-tone-neutral-soft-bg:      var(--bg-tertiary, #f3f4f6);
    --rc-pill-tone-neutral-soft-fg:      var(--text-secondary, #6b7280);
    --rc-pill-tone-neutral-soft-bg-hover: var(--bg-tertiary, #f3f4f6);
    --rc-pill-tone-neutral-soft-fg-hover: var(--text-primary, #111827);
    --rc-pill-tone-neutral-outline-fg:   var(--text-secondary, #6b7280);
    --rc-pill-tone-neutral-outline-border: var(--border-secondary, #d1d5db);
    --rc-pill-tone-neutral-outline-bg-hover: var(--bg-tertiary, #f3f4f6);
    --rc-pill-tone-neutral-outline-fg-hover: var(--text-primary, #111827);

    --rc-pill-tone-primary-soft-bg:      var(--color-primary-light, rgba(76,167,187,0.12));
    --rc-pill-tone-primary-soft-fg:      var(--color-primary, #4CA7BB);
    --rc-pill-tone-primary-soft-bg-hover: var(--color-primary, #4CA7BB);
    --rc-pill-tone-primary-soft-fg-hover: var(--text-inverse, #ffffff);
    --rc-pill-tone-primary-outline-fg:   var(--color-primary, #4CA7BB);
    --rc-pill-tone-primary-outline-border: var(--color-primary, #4CA7BB);
    --rc-pill-tone-primary-outline-bg-hover: var(--color-primary-light, #E8F4F7);
    --rc-pill-tone-primary-outline-fg-hover: var(--color-primary-hover, #3D8A9A);

    --rc-link-action-tone-neutral-fg:        var(--text-secondary, #6b7280);
    --rc-link-action-tone-neutral-fg-hover:  var(--text-primary, #111827);
    --rc-link-action-tone-primary-fg:        var(--color-primary, #4CA7BB);
    --rc-link-action-tone-primary-fg-hover:  var(--color-primary-hover, #3D8A9A);

    --rc-icon-btn-tone-neutral-fg:           var(--text-tertiary, #9ca3af);
    --rc-icon-btn-tone-neutral-bg-hover:     var(--bg-tertiary, #f3f4f6);
    --rc-icon-btn-tone-neutral-fg-hover:     var(--text-secondary, #6b7280);
    --rc-icon-btn-tone-neutral-fg-pressed:   var(--color-primary, #4CA7BB);
    --rc-icon-btn-tone-neutral-border-pressed: var(--color-primary, #4CA7BB);
    --rc-icon-btn-tone-neutral-bg-pressed:   var(--color-primary-light, rgba(76,167,187,0.12));
    --rc-icon-btn-tone-primary-fg:           var(--color-primary, #4CA7BB);
    --rc-icon-btn-tone-primary-bg-hover:     var(--color-primary-light, #E8F4F7);
    --rc-icon-btn-tone-primary-fg-hover:     var(--color-primary-hover, #3D8A9A);

    --rc-focus-ring-color: var(--color-primary, #4CA7BB);
    --rc-btn-badge-bg:  rgba(255, 255, 255, 0.2);
    --rc-btn-badge-fg:  currentColor;
}