/* ClientPanel design tokens — single app-owned facade over DevExpress Fluent (--dxds-* on 25.2+, --DS-* on 25.1).
   App CSS references ONLY --cp-* (never raw DevExpress --DS-* / --dxds-* prefixes, nor hex). See docs/decisions/0008-design-system-cp-facade.md.
   Colour tokens verified against DevExpress.Blazor.Themes.Fluent 25.1 (modes/light.min.css). */

/* Project font: Inter, loaded via a Google Fonts <link> in App.razor. We override the DevExpress sans
   token below (this file loads after the theme, so :root wins), which flows the face to DevExpress
   controls, --cp-font-family-base and the Bootstrap bridge from one place. The system stack stays the
   fallback while the web font loads / if it fails. */

:root {
    /* Pin light. Chrome's Auto Dark Mode (force-dark) algorithmically inverts pages that do not
       declare a color-scheme, which mangled the app under OS/browser dark (dark-on-dark, unreadable
       text). Declaring the scheme is the documented opt-out. Interim until real dark support lands —
       then this becomes `light dark` alongside mode-aware tokens. */
    color-scheme: light;

    /* Project font override — feeds --cp-font-family-base (below) AND DevExpress controls, which read
       the DevExpress sans token directly. Change this one line to change the app-wide sans face. */
    --dxds-font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --cp-font-family-base: var(--dxds-font-family-sans-serif, var(--DS-font-family-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
    --cp-font-family-mono:  var(--dxds-font-family-mono,       var(--DS-font-family-mono,       ui-monospace, SFMono-Regular, Menlo, monospace));

    /* colour — dual fallback: 25.2+ (--dxds-*) -> 25.1 (--DS-*) -> literal. Names verified present in Fluent 25.1. */
    --cp-color-primary:       var(--dxds-color-content-primary-default-rest, var(--DS-color-content-primary-default-rest, #1a5fb4));
    --cp-color-content:       var(--dxds-color-content-neutral-default-rest, var(--DS-color-content-neutral-default-rest, #1d1d1d));
    /* '-subdued-rest' (opaque, mode-aware) is the secondary-text colour. NOT '-muted-rest', which is a
       transparent blend token (rgb(... / 0)) and would render text invisible. */
    --cp-color-content-muted: var(--dxds-color-content-neutral-subdued-rest, var(--DS-color-content-neutral-subdued-rest, #5f5f5f));
    --cp-color-surface:       var(--dxds-color-surface-neutral-default-rest, var(--DS-color-surface-neutral-default-rest, #ffffff));
    --cp-color-border:        var(--dxds-color-border-neutral-default-rest,  var(--DS-color-border-neutral-default-rest,  #d7d7d7));
    --cp-color-danger:        var(--dxds-color-content-danger-default-rest,  var(--DS-color-content-danger-default-rest,  #b3261e));
    --cp-color-success:       var(--dxds-color-content-success-default-rest, var(--DS-color-content-success-default-rest, #1e7d34));
    --cp-color-warning:       var(--dxds-color-content-warning-default-rest, var(--DS-color-content-warning-default-rest, #9a6700));
    --cp-color-info:          var(--dxds-color-content-info-default-rest,    var(--DS-color-content-info-default-rest,    #185fa5));
    /* text/icon on a primary-filled surface (e.g. the step-dot number); white in the Fluent light theme. */
    --cp-color-on-primary:    #ffffff;
    /* a muted panel surface — a hair off the base surface (part-preview bands, hover fills, subtle panels). */
    --cp-color-surface-muted: var(--dxds-color-surface-neutral-subdued-rest, var(--DS-color-surface-neutral-subdued-rest, #f1f3f5));
    /* the same surface one step down — the fill DevExpress paints on its own subdued surfaces when the
       pointer is over them. For an app-built panel that behaves like a control (the delivery option
       tiles): it darkens the way a DevExpress button does, rather than growing a border or a shadow. */
    --cp-color-surface-muted-hover: var(--dxds-color-surface-neutral-subdued-hover, var(--DS-color-surface-neutral-subdued-hover, #e2e6ea));

    /* semantic surface backgrounds (role) */
    --cp-color-surface-danger:         var(--dxds-color-surface-danger-default-rest,      var(--DS-color-surface-danger-default-rest,      #f8d7da));
    --cp-color-surface-warning:        var(--dxds-color-surface-warning-default-rest,     var(--DS-color-surface-warning-default-rest,     #fff3cd));
    --cp-color-surface-info:           var(--dxds-color-surface-info-default-rest,        var(--DS-color-surface-info-default-rest,        #cff4fc));
    --cp-color-surface-success:        var(--dxds-color-surface-success-default-rest,     var(--DS-color-surface-success-default-rest,     #d1e7dd));
    --cp-color-surface-info-subtle:    var(--dxds-color-surface-info-subdued-rest,        var(--DS-color-surface-info-subdued-rest,        #e7f3fb));
    --cp-color-surface-success-subtle: var(--dxds-color-surface-success-subdued-selected, var(--DS-color-surface-success-subdued-selected, #d1e7dd));

    /* Role subtle/emphasis palette for chips / pills / badges: a light tint background (the DevExpress
       '-10' shade), a readable role text colour and a light border. Sourced from DevExpress (--dxds-*)
       with a literal fallback — no --bs-* here — so components consume only these --cp-* names (see Pill).
       fg reuses --cp-color-{role}, which is itself a --dxds- content colour. */
    --cp-role-neutral-bg: var(--dxds-neutral-10, #e9ecef); --cp-role-neutral-fg: var(--cp-color-content-muted); --cp-role-neutral-border: var(--cp-color-border);
    --cp-role-primary-bg: var(--dxds-primary-10, #cfe2ff); --cp-role-primary-fg: var(--cp-color-primary);        --cp-role-primary-border: var(--dxds-primary-30, #9ec5fe);
    --cp-role-success-bg: var(--dxds-success-10, #d1e7dd); --cp-role-success-fg: var(--cp-color-success);        --cp-role-success-border: var(--dxds-success-30, #a3cfbb);
    --cp-role-warning-bg: var(--dxds-warning-10, #fff3cd); --cp-role-warning-fg: var(--cp-color-warning);        --cp-role-warning-border: var(--dxds-warning-30, #ffe69c);
    --cp-role-danger-bg:  var(--dxds-danger-10, #f8d7da);  --cp-role-danger-fg:  var(--cp-color-danger);         --cp-role-danger-border:  var(--dxds-danger-30, #f1aeb5);
    --cp-role-info-bg:    var(--dxds-info-10, #cff4fc);    --cp-role-info-fg:    var(--cp-color-info);           --cp-role-info-border:    var(--dxds-info-30, #9eeaf9);

    /* spacing — literals: DevExpress 25.1 exposes no --DS-spacing-* scale, and spacing is not mode-dependent. */
    --cp-space-1: 0.25rem;
    --cp-space-2: 0.5rem;
    --cp-space-3: 0.75rem;
    --cp-space-4: 1rem;
    --cp-space-5: var(--dxds-sizing-200, var(--DS-sizing-200, 1.25rem));
    --cp-space-6: 1.5rem;
    /* Section-scale steps. The rungs above 1.5rem are what separate whole sections of a page rather
       than elements within one, and the jumps widen accordingly — a scale that kept climbing in
       quarter-rems would be a list of every value anyone ever typed, which is the thing it exists to
       stop. A measurement that falls between two rungs belongs on the nearer one. */
    --cp-space-7: 2rem;
    --cp-space-8: 2.5rem;
    --cp-space-9: 3rem;
    --cp-space-10: 4rem;
    --cp-space-11: 5rem;
    --cp-space-12: 6rem;

    /* page shell — the one place the app's content width lives. Every page-level container (MainLayout
       .app-content, the page heading) reads these, so pages carry no width of their own and every
       screen lines up. The scroll area around them (.app-main) spans the window instead, so the
       scrollbar sits at its edge. Literals: this is app layout, not a DevExpress concern. */
    --cp-content-max: 1464px;
    --cp-content-gutter: 1.5rem;

    /* radius — track DevExpress control radius where available. */
    --cp-radius-sm: var(--dxds-border-radius-60,  var(--DS-border-radius-60,  0.375rem));
    --cp-radius:    var(--dxds-border-radius-80,  var(--DS-border-radius-80,  0.5rem));
    --cp-radius-lg: var(--dxds-border-radius-100, var(--DS-border-radius-100, var(--bs-border-radius-lg, 0.75rem)));

    /* form controls — the metrics a DevExpress editor resolves at its default size (Medium), so an
       app-built input can stand in a row of Dx editors without a seam: same height, same border,
       same Fluent focus underline. Read straight off the editor's own variables
       (--dxbl-text-edit-*-m in DevExpress.Blazor.Themes.Fluent 25.2.8), which is why the fallbacks
       are the literals those resolve to today rather than numbers anyone chose.

       Only for a control the app renders itself, where DevExpress offers nothing usable — the
       address search box, whose input has to carry role="combobox" and aria-activedescendant that
       DxTextBox does not pass through to its inner input. Reach for DxTextBox first. */
    --cp-control-radius:       var(--dxds-border-radius-40, var(--DS-border-radius-40, 0.25rem));
    --cp-control-border-width: var(--dxds-border-width-10,  var(--DS-border-width-10,  0.0625rem));
    /* 0.25rem + 0.0625rem, exactly as the editor composes its own medium padding. */
    --cp-control-padding-y:    calc(var(--dxds-spacing-40, var(--DS-spacing-40, 0.25rem))
                                  + var(--dxds-spacing-10, var(--DS-spacing-10, 0.0625rem)));
    --cp-control-padding-x:    var(--dxds-spacing-90, var(--DS-spacing-90, 0.5625rem));
    --cp-control-font-size:    var(--dxds-font-size-base-md,   var(--DS-font-size-base-md,   0.875rem));
    --cp-control-line-height:  var(--dxds-line-height-base-md, var(--DS-line-height-base-md, 1.25rem));
    --cp-control-bg:           var(--dxds-color-surface-neutral-default-rest, var(--DS-color-surface-neutral-default-rest, #ffffff));
    --cp-control-placeholder:  var(--dxds-color-content-neutral-deep-rest, var(--DS-color-content-neutral-deep-rest, #616161));
    /* The Fluent editor is bordered on three sides and underlined on the fourth: the bottom edge is
       a subdued line at rest and a thicker brand line while focused. */
    --cp-control-underline:            var(--dxds-color-content-neutral-subdued-rest,    var(--DS-color-content-neutral-subdued-rest,    #616161));
    --cp-control-underline-hover:      var(--dxds-color-content-neutral-subdued-hovered, var(--DS-color-content-neutral-subdued-hovered, #424242));
    --cp-control-underline-focus:      var(--dxds-color-content-primary-default-rest,    var(--DS-color-content-primary-default-rest,    #1a5fb4));
    --cp-control-underline-focus-size: var(--dxds-spacing-20, var(--DS-spacing-20, 0.125rem));
    --cp-control-border-hover:         var(--dxds-color-border-neutral-default-hovered,  var(--DS-color-border-neutral-default-hovered,  #c7c7c7));
    --cp-control-border-disabled:      var(--dxds-color-border-neutral-default-disabled, var(--DS-color-border-neutral-default-disabled, #ebebeb));
    --cp-control-content-disabled:     var(--dxds-color-content-neutral-default-disabled, var(--DS-color-content-neutral-default-disabled, #bdbdbd));

    /* elevation (track DevExpress shadow scale) */
    --cp-shadow-1: var(--dxds-box-shadow-shadow-1, var(--DS-box-shadow-shadow-1, 0 1px 2px rgba(0, 0, 0, 0.08)));
    --cp-shadow-2: var(--dxds-box-shadow-shadow-2, var(--DS-box-shadow-shadow-2, 0 2px 6px rgba(0, 0, 0, 0.10)));
    --cp-shadow-3: var(--dxds-box-shadow-shadow-3, var(--DS-box-shadow-shadow-3, 0 8px 24px rgba(0, 0, 0, 0.12)));

    /* typography scale (rem; confirmed 2026-07-24). */
    --cp-text-h1-size: 3rem;      --cp-text-h1-weight: 700;  --cp-text-h1-line: 1.05;  --cp-text-h1-tracking: -0.02em;
    --cp-text-h2-size: 2.25rem;   --cp-text-h2-weight: 700;  --cp-text-h2-line: 1.1;   --cp-text-h2-tracking: -0.015em;
    --cp-text-h3-size: 1.875rem;  --cp-text-h3-weight: 600;  --cp-text-h3-line: 1.1;  --cp-text-h3-tracking: -0.01em;
    --cp-text-h4-size: 1.5rem;    --cp-text-h4-weight: 600;  --cp-text-h4-line: 1.15;   --cp-text-h4-tracking: -0.005em;
    --cp-text-h5-size: 1.25rem;   --cp-text-h5-weight: 600;  --cp-text-h5-line: 1.15;   --cp-text-h5-tracking: 0;
    --cp-text-h6-size: 1.125rem;  --cp-text-h6-weight: 600;  --cp-text-h6-line: 1.15;  --cp-text-h6-tracking: 0;
    --cp-text-subtitle1-size: 0.9rem;     --cp-text-subtitle1-weight: 600; --cp-text-subtitle1-line: 1.2;  --cp-text-subtitle1-tracking: 0.009em;
    --cp-text-subtitle2-size: 0.825rem; --cp-text-subtitle2-weight: 600; --cp-text-subtitle2-line: 1.2;  --cp-text-subtitle2-tracking: 0.007em;
    --cp-text-body1-size: .9rem;     --cp-text-body1-weight: 500; --cp-text-body1-line: 1.3;   --cp-text-body1-tracking: 0.009em;
    --cp-text-body2-size: 0.825rem; --cp-text-body2-weight: 400; --cp-text-body2-line: 1.3;  --cp-text-body2-tracking: 0.011em;
    --cp-text-button-size: 0.825rem;  --cp-text-button-weight: 500;  --cp-text-button-line: 1.4; --cp-text-button-tracking: 0.02em;
    --cp-text-caption-size: 0.75rem;  --cp-text-caption-weight: 400;  --cp-text-caption-line: 1.3; --cp-text-caption-tracking: 0.03em;
    --cp-text-overline-size: 0.75rem; --cp-text-overline-weight: 600; --cp-text-overline-line: 1.5; --cp-text-overline-tracking: 0.08em;
}

/* No colour on the base: Color=Inherit (default) must inherit the parent colour; .cp-text--default sets content colour explicitly. */
.cp-text { margin: 0; font-family: var(--cp-font-family-base); }

.cp-text-h1 { font-size: var(--cp-text-h1-size); font-weight: var(--cp-text-h1-weight); line-height: var(--cp-text-h1-line); letter-spacing: var(--cp-text-h1-tracking); }
.cp-text-h2 { font-size: var(--cp-text-h2-size); font-weight: var(--cp-text-h2-weight); line-height: var(--cp-text-h2-line); letter-spacing: var(--cp-text-h2-tracking); }
.cp-text-h3 { font-size: var(--cp-text-h3-size); font-weight: var(--cp-text-h3-weight); line-height: var(--cp-text-h3-line); letter-spacing: var(--cp-text-h3-tracking); }
.cp-text-h4 { font-size: var(--cp-text-h4-size); font-weight: var(--cp-text-h4-weight); line-height: var(--cp-text-h4-line); letter-spacing: var(--cp-text-h4-tracking); }
.cp-text-h5 { font-size: var(--cp-text-h5-size); font-weight: var(--cp-text-h5-weight); line-height: var(--cp-text-h5-line); letter-spacing: var(--cp-text-h5-tracking); }
.cp-text-h6 { font-size: var(--cp-text-h6-size); font-weight: var(--cp-text-h6-weight); line-height: var(--cp-text-h6-line); letter-spacing: var(--cp-text-h6-tracking); }
.cp-text-subtitle1 { font-size: var(--cp-text-subtitle1-size); font-weight: var(--cp-text-subtitle1-weight); line-height: var(--cp-text-subtitle1-line); letter-spacing: var(--cp-text-subtitle1-tracking); }
.cp-text-subtitle2 { font-size: var(--cp-text-subtitle2-size); font-weight: var(--cp-text-subtitle2-weight); line-height: var(--cp-text-subtitle2-line); letter-spacing: var(--cp-text-subtitle2-tracking); }
.cp-text-body1 { font-size: var(--cp-text-body1-size); font-weight: var(--cp-text-body1-weight); line-height: var(--cp-text-body1-line); letter-spacing: var(--cp-text-body1-tracking); }
.cp-text-body2 { font-size: var(--cp-text-body2-size); font-weight: var(--cp-text-body2-weight); line-height: var(--cp-text-body2-line); letter-spacing: var(--cp-text-body2-tracking); }
.cp-text-button { font-size: var(--cp-text-button-size); font-weight: var(--cp-text-button-weight); line-height: var(--cp-text-button-line); letter-spacing: var(--cp-text-button-tracking); }
.cp-text-caption { font-size: var(--cp-text-caption-size); font-weight: var(--cp-text-caption-weight); line-height: var(--cp-text-caption-line); letter-spacing: var(--cp-text-caption-tracking); }
.cp-text-overline { font-size: var(--cp-text-overline-size); font-weight: var(--cp-text-overline-weight); line-height: var(--cp-text-overline-line); letter-spacing: var(--cp-text-overline-tracking); text-transform: uppercase; }

.cp-text--default { color: var(--cp-color-content); }
.cp-text--muted   { color: var(--cp-color-content-muted); }
.cp-text--primary { color: var(--cp-color-primary); }
.cp-text--danger  { color: var(--cp-color-danger); }
.cp-text--success { color: var(--cp-color-success); }
.cp-text--warning { color: var(--cp-color-warning); }

.cp-text--align-start   { text-align: start; }
.cp-text--align-center  { text-align: center; }
.cp-text--align-end     { text-align: end; }
.cp-text--align-justify { text-align: justify; }

.cp-text--gutter { margin-bottom: var(--cp-space-3); }

/* Bootstrap bridge — Bootstrap's colour / type / radius variables read from the --cp-* facade so
   utilities and components match the design system. Loaded after bootstrap.css, so these :root
   overrides win. rgb-triplet utilities (.bg-primary, .btn-primary) keep Bootstrap defaults —
   var() cannot emit an rgb triplet, and the app uses DevExpress controls for those. The role
   subtle/emphasis variants are surfaced as --cp-role-* tokens above (sourced from DevExpress shades)
   so components like Pill consume the --cp-* facade too. */
:root {
    --bs-body-bg: var(--cp-color-surface);
    --bs-body-color: var(--cp-color-content);
    --bs-secondary-color: var(--cp-color-content-muted);
    --bs-border-color: var(--cp-color-border);
    --bs-link-color: var(--cp-color-primary);
    --bs-link-hover-color: var(--cp-color-primary);
    --bs-primary: var(--cp-color-primary);
    --bs-danger: var(--cp-color-danger);
    --bs-success: var(--cp-color-success);
    --bs-warning: var(--cp-color-warning);
    --bs-info: var(--cp-color-info);
    --bs-border-radius: var(--cp-radius);
    --bs-border-radius-sm: var(--cp-radius-sm);
    --bs-body-font-family: var(--cp-font-family-base);
    --bs-body-font-size: 1rem;
}

/* 100% (not a fixed px) so rem honours the user's browser font-size / zoom preference. */
/*html { font-size: 87.5%; }*/
html { font-size: 100%; }

/* ── Warning hue remap: orange -> yellow ─────────────────────────────────────────
   DevExpress derives EVERY warning token from the --dxds-warning-{10..170} ramp: the semantic
   surface/content/border-warning tokens are var(--dxds-warning-N) (themes.fluent modes/light.min.css),
   and our --cp-color-warning / --cp-role-warning-* / --bs-warning chain off those. So redefining the
   ramp here — cp-tokens.css loads AFTER the theme, so this :root wins — retints warning EVERYWHERE
   (DevExpress controls included) from one base. The 17 stops are generated from a single base via
   color-mix, matching the stock ramp's light->dark shape (10 = lightest tint, 90 = the main colour
   used by *-default-rest, 170 = darkest). Change --cp-warning-base alone to shift the whole hue.
   NOTE: applies to both colour modes; the theme maps dark to different ramp stops, so revisit
   per-mode when real dark support lands. */
:root {
    --cp-warning-base: #eab308;   /* the single knob — warning yellow (was DevExpress orange #f7630c) */

    --dxds-warning-10:  color-mix(in srgb, var(--cp-warning-base) 12%, white);
    --dxds-warning-20:  color-mix(in srgb, var(--cp-warning-base) 22%, white);
    --dxds-warning-30:  color-mix(in srgb, var(--cp-warning-base) 33%, white);
    --dxds-warning-40:  color-mix(in srgb, var(--cp-warning-base) 46%, white);
    --dxds-warning-50:  color-mix(in srgb, var(--cp-warning-base) 56%, white);
    --dxds-warning-60:  color-mix(in srgb, var(--cp-warning-base) 64%, white);
    --dxds-warning-70:  color-mix(in srgb, var(--cp-warning-base) 74%, white);
    --dxds-warning-80:  color-mix(in srgb, var(--cp-warning-base) 87%, white);
    --dxds-warning-90:  var(--cp-warning-base);
    --dxds-warning-100: color-mix(in srgb, var(--cp-warning-base) 86%, black);
    --dxds-warning-110: color-mix(in srgb, var(--cp-warning-base) 72%, black);
    --dxds-warning-120: color-mix(in srgb, var(--cp-warning-base) 60%, black);
    --dxds-warning-130: color-mix(in srgb, var(--cp-warning-base) 47%, black);
    --dxds-warning-140: color-mix(in srgb, var(--cp-warning-base) 34%, black);
    --dxds-warning-150: color-mix(in srgb, var(--cp-warning-base) 26%, black);
    --dxds-warning-160: color-mix(in srgb, var(--cp-warning-base) 18%, black);
    --dxds-warning-170: color-mix(in srgb, var(--cp-warning-base) 11%, black);
}