/* ================================================================================================
   Intention V2 — Create Intention wizard redesign + Intentions list redesign
   ------------------------------------------------------------------------------------------------
   Every rule in this file belongs to the Intention-area redesign gated behind
   FEATURE_INTENTION_CREATE_V2 (see Constants.Features.IntentionCreateV2). With the flag off none of
   these class names are ever emitted, so the whole file is inert -- that is exactly why it is split
   out of the global app.css: a reviewer can see the feature's entire global surface area in one
   place, and deleting the feature is deleting one file plus one <link>.

   Why these rules are global at all, rather than Blazor-scoped .razor.css:

     1. Composition-level layout. Rules like .dealv2-step (the Deal step's two-column grid) position
        sibling components relative to each other. That is the parent page's concern, and it is not
        expressible from inside either child's scoped stylesheet.
     2. Telerik renders outside the component's scope. Grid/tooltip/popup internals are projected to
        the document root with no [b-hash] attribute on them, so an isolated .razor.css can never
        reach them. Where the target is one component's own root element the rules DO live in its
        .razor.css (DealCardListPanel, DealDetailPanel, ...) -- note that those must not use ::deep
        for the root, because ::deep compiles to a descendant selector and an element is not a
        descendant of itself.

   Design tokens (--nyle-*, --shadow-*, --fg-*) deliberately stay in app.css's :root block rather
   than moving here: they are shared vocabulary that outlives this feature flag, several predate it,
   and redeclaring :root across two files makes the precedence question worse, not better. This file
   only consumes them, always with a literal fallback so a missing token degrades to the reference
   design's own value instead of to nothing.

   Loaded by wwwroot/index.html immediately after app.css, so the tokens above are defined first.
   ================================================================================================ */

/* create-intention-ui-redesign: two-column layout for the redesigned "Select a Deal" step
   (deal list left, detail panel right). Global rather than scoped to SelectDealStepV2.razor —
   Blazor CSS isolation was not reliably delivering this rule to the WASM host across a rebuild,
   and this is genuinely page-composition layout rather than one component's internal styling, so
   it lives here instead of chasing the isolation pipeline further. The child components'
   (DealCardListPanel, DealDetailPanel) own internal styling stays in their own scoped .razor.css
   files, which do apply correctly. */
.dealv2-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 24px;
    align-items: start;
    font-family: var(--font-sans, "Inter", sans-serif);
    margin-top: 16px;
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 900px) {
    .dealv2-step {
        grid-template-columns: 1fr;
    }
}

/* create-intention-ui-redesign: selected-deal banner shown above the search/filter bar (rendered
   directly by SelectDealStepV2.razor -- see the comment on .dealv2-step above for why this lives
   in the global stylesheet rather than that component's own scoped CSS). */
/* Background/radius matched to the approved reference's .ci-selbar rule -- a light blue tint
   (brand color at ~8% opacity), not the neutral grey this used before. */
.dealv2-selected-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-brand-alpha-10, rgba(35, 113, 196, 0.08));
    border: 1px solid var(--nyle-action-blue, #2371C4);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 22px;
    color: var(--fg-1, #040C17);
}

.dealv2-selected-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: var(--nyle-action-blue, #2371C4);
    color: #fff;
}

.dealv2-clear-link {
    margin-left: auto;
    color: var(--nyle-action-blue, #2371C4);
    font: var(--label-sm-strong, 700 11px/14px sans-serif);
    cursor: pointer;
    text-decoration: none;
}

/* Search/filter toolbar, full width above both the deal-list and detail cards (moved here from
   SelectDealStepV2.razor for the same CSS-isolation-reliability reason as .dealv2-step above).
   Values matched to the approved reference's .ci-search/.ci-res-foot rules: 36px search height,
   4px radius. flex-wrap: wrap (not nowrap) plus min-width: 0 on every flex child is what actually
   avoids horizontal overflow -- flex items refuse to shrink below their own content width unless
   min-width is reset. */
.dealv2-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--nyle-border-hairline, #E7E9E9);
    border-radius: 8px;
    background: var(--nyle-bg-card, #FFFFFF);
    box-shadow: var(--shadow-xs, 0 1px 2px 0 rgba(16, 24, 40, 0.06));
    padding: 12px 14px;
    margin-bottom: 16px;
}

.dealv2-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 0;
    height: 36px;
    border: 1px solid var(--nyle-border-input, #CFD3D3);
    border-radius: 4px;
    padding: 0 12px;
    background: var(--nyle-bg-card, #FFFFFF);
    color: var(--fg-3, #77787A);
    box-sizing: border-box;
}

.dealv2-search-input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 0;
    font: var(--body-sm, 400 12px/16px sans-serif);
    color: var(--fg-2, #333333);
}

.dealv2-filters-label {
    flex: 0 0 auto;
    font: var(--label-sm-strong, 700 11px/14px sans-serif);
    letter-spacing: 0.05em;
    color: var(--fg-3, #77787A);
}

.dealv2-filter {
    width: 150px;
    flex: 0 0 150px;
}

.dealv2-filter .k-input {
    height: 36px;
    min-height: 36px;
}

.dealv2-count {
    flex: 1 1 auto;
    text-align: right;
    font: var(--body-sm, 400 12px/16px sans-serif);
    color: var(--fg-3, #77787A);
    white-space: nowrap;
}

.dealv2-clear-link:hover {
    text-decoration: underline;
}

/* create-intention-ui-redesign: a custom, single-row stepper for the Create Intention
   header, rendered only when FEATURE_INTENTION_CREATE_V2 is on (CreateIntention.razor's
   TitleTemplate). WizardStepper.razor -- the shared component this replaces for that one flag --
   is used by four other, unrelated wizards, so it and its scoped CSS are intentionally left alone;
   this markup is new and only reachable behind the flag. Lives here (global), not in
   CreateIntention.razor's own scoped .razor.css, for the same CSS-isolation-reliability reason as
   the rest of this feature's global rules (see .dealv2-step above) -- that component's own scoped
   CSS reliability had not been proven, so this sidesteps the question entirely. */
.dealv2-page-header {
    align-items: center;
    gap: 36px;
}

.dealv2-stepper {
    display: flex;
    align-items: center;
}

.dealv2-stepper-step {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.dealv2-stepper-circle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1.5px solid var(--nyle-grey-300, #B0B3B3);
    background: var(--nyle-bg-card, #FFFFFF);
    color: var(--fg-3, #77787A);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Green fill matched to the reference's own measured computed style (DevTools: span.num,
   background #078A04 -- exactly --nyle-success) rather than WizardStepper.razor.css's legacy
   current/done color (#47BC8A), which this rule was previously aliased to for visual continuity
   with the stepper this replaces -- that continuity turned out not to match the actual design. */
.dealv2-stepper-circle-active {
    background: var(--nyle-success, #078A04);
    border-color: var(--nyle-success, #078A04);
    color: #FFFFFF;
}

.dealv2-stepper-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--fg-3, #77787A);
}

.dealv2-stepper-label-done {
    font-size: 14px;
    font-weight: 400;
    color: var(--fg-1, #040C17);
}

.dealv2-stepper-label-active {
    font-size: 14px;
    font-weight: 700;
    color: var(--fg-1, #040C17);
}

.dealv2-stepper-connector {
    flex: 0 0 auto;
    width: 28px;
    height: 2px;
    margin: 0 8px;
    background: var(--nyle-grey-300, #B0B3B3);
}

/* create-intention-ui-redesign — Detail step (Step 2: toolbar + Buy/Sell "ledger" cards +
   contracts grid + template info strip). Global for the same recurring Blazor CSS-isolation
   reliability gap Step 1 already worked around (see .dealv2-step above) -- composition-level
   classes for the toolbar/ledger-card layout live here; each component's own internal styling
   stays in its scoped .razor.css. Literal hex values from the approved reference are translated to
   the existing --nyle-, --fg-, --shadow- and --font-sans tokens wherever an equivalent already
   existed (--nyle-primary-blue -> --nyle-action-blue, the reference's #21a453 green ->
   --nyle-success); --nyle-danger-strong (added to app.css's :root block) was the one genuinely
   missing token, aliased onto the existing --red-primary rather than a new raw color. */
.dv2-toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 12px 16px 14px; margin-bottom: 18px; }
.dv2-tf { display: flex; flex-direction: column; gap: 4px; }
.dv2-tf > span { font: 500 11px/14px var(--font-sans); color: var(--fg-3); }
.dv2-tf .input { height: 30px; padding-top: 0; padding-bottom: 0; font-size: 12px; min-width: 110px; }
.dv2-tf .input.num { min-width: 76px; width: 76px; font-variant-numeric: tabular-nums; }
.dv2-qty { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.dv2-qty span { font: 500 11px/14px var(--font-sans); color: var(--fg-3); }
.dv2-qty b { font: 600 18px/24px var(--font-sans); color: var(--fg-1); font-variant-numeric: tabular-nums; }

/* Loads/Capacity are NumericTextBoxField, which -- unlike the DropDownField-based Method/Subtype/
   Units above -- declares a CssClass parameter but never actually applies it to its own
   TelerikNumericTextBox (confirmed by reading NumericTextBoxField.razor: no Class="@CssClass" on
   the element at all), so ".dv2-tf .input.num" above never reaches these two fields no matter what
   class name is passed. Targeted by the real, always-rendered Id instead -- this is what was making
   them both oversized and vertically misaligned from the rest of the row. */
#Dv2LoadCountTextBox, #Dv2LoadCountTextBox input,
#Dv2CapacityTextBox, #Dv2CapacityTextBox input {
    height: 30px;
    font-size: 12px;
    width: 76px;
}

.dv2-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; }
.dv2-ledcol { min-width: 0; } /* border/radius/background/shadow/padding are inline on the element -- see ContractLedgerCard.razor */

@media (max-width: 900px) {
    .dv2-ledger {
        grid-template-columns: 1fr;
    }
}

.dv2-ledcol-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dv2-ledcol-head h3 { font: 600 14px/18px var(--font-sans); color: var(--fg-1); margin: 0; }
.dv2-ledcol-head .mt { font: var(--body-sm); color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv2-ledcol-head .dv2-zone { margin-left: auto; height: 34px; padding-top: 0; padding-bottom: 0; font-size: 13px; max-width: 190px; flex: 0 0 auto; width: auto; }

.dv2-meter { height: 6px; border-radius: 3px; background: var(--nyle-grey-100, #eef0f3); overflow: hidden; margin-bottom: 4px; }
.dv2-meter i { display: block; height: 100%; border-radius: 3px; background: var(--nyle-action-blue); }
.dv2-meter.dest i { background: var(--nyle-success); } /* sell side */

/* A plain round <button>, not TelerikButton+Icon -- see ContractLedgerCard.razor's comment for
   why (no ArrowUpRight/ArrowDownRight icon exists in this app's Telerik.SvgIcons, and rotating the
   closest available icons via a Telerik-internal-markup selector wasn't rendering). The inline SVG
   inside it already draws pointing up-right; .dest just rotates that same SVG 90° clockwise to
   point down-right instead, so both directions share one path. */
.dv2-round-btn { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: white; border: none; cursor: default; flex-shrink: 0; }
.dv2-round-btn.origin { background: var(--nyle-success); }
.dv2-round-btn.dest { background: var(--nyle-danger-strong, #dc3545); }
.dv2-round-btn.dest svg { transform: rotate(90deg); }

.ci-table-wrap { overflow-x: auto; border: 1px solid var(--nyle-border-hairline); border-radius: 6px; }
.ci-table td.num, .ci-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ci-vol { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
/* .add-row-btn was ported from the reference stylesheet here but no component ever used it -- the
   Detail step's contracts grid has no inline "add row" affordance. Removed rather than kept
   "just in case": this stylesheet is loaded unconditionally (see the file header), so an
   unprefixed, unused class name is a standing collision risk against the rest of the app for no
   benefit. */
.ci-del { font: var(--label-sm-strong); color: var(--nyle-action-blue); }

.shp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-pill); font: var(--label-sm-strong); white-space: nowrap; }
.shp-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
/* Mapped to this app's real Constants.Contract.Status values (Active/Completed/Closed) --
   ContractStatusPill.cs is the single source of truth for which variant each status gets. */
.shp-pill-blue { background: var(--color-brand-alpha-10); color: var(--nyle-action-blue); }
.shp-pill-green { background: rgba(7, 138, 4, 0.08); color: var(--nyle-success); }
.shp-pill-grey { background: var(--nyle-grey-100); color: var(--fg-3); }
/* intentions-list-redesign: intention-status variants, reusing the .shp-pill/.dot base above.
   Colors ported verbatim from the approved reference stylesheet's own .shp-pill.scheduled /
   .transit / .unsched / .delivered rules -- Scheduled and In Transit need to read differently,
   which the legacy <Badge>'s 3-bucket palette could not express. See IntentionStatusPill.cs. */
.shp-pill-scheduled { background: var(--color-brand-alpha-10); color: var(--nyle-primary-blue, #336094); }
.shp-pill-amber { background: var(--nyle-warning, #F8F0AE); color: var(--color-yellow-110, #7A5A0C); }
.shp-pill-delivered { background: var(--nyle-success-bg, #CDE8CD); color: var(--color-green-110, #045F02); }

.dv2-cntr-count-note b { color: var(--nyle-action-blue); }

/* create-intention-ui-redesign — Detail step's full named "TEMPLATE" banner (MatchedTemplateBanner.
   razor, DESIGN.md §3.6), restoring what TemplateFieldsNote's lighter info strip stood in for
   before ResolveTemplateMatchAsync existed. Token-translated the same way the rest of this file
   was (--nyle-primary-blue -> --nyle-action-blue); --label-sm has no existing equivalent in
   app.css's :root (only the strong weight exists), so the label keeps this file's existing
   small-caption literal (500 11px/14px, same as .dv2-tf > span above) rather than inventing a new
   token for one rule. */
.tmpl-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--color-brand-alpha-10); border: 1px solid var(--nyle-border-brand-soft, #9dc2ff); border-radius: 6px; margin-bottom: 12px; }
.tmpl-banner .tb-label { font: 500 11px/14px var(--font-sans); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; }
.tmpl-banner .tb-name { font: var(--label-md-strong); color: var(--nyle-action-blue); }
.tmpl-banner .tb-crit { display: flex; gap: 6px; }
.dv2-crit-chip { font: var(--label-sm-strong); color: var(--fg-2); background: var(--nyle-bg-card); border: 1px solid var(--nyle-border-hairline); border-radius: var(--radius-pill); padding: 2px 9px; }
.tmpl-banner .spacer { flex: 1; }
.tmpl-banner .tb-note { font: var(--body-sm); color: var(--fg-3); }

/* create-intention-ui-redesign — Schedule/Summary steps (DESIGN.md §3.8/§3.9). Composition-level
   layout for the new ScheduleStepV2/SummaryStepV2 folders; card border/shadow/background stay
   inline on each element for the same guaranteed-render reason as every other card in this feature
   (see ContractLedgerCard.razor's comment) -- this class is only the section-title look repeated
   across those cards.

   A .dv2-recap-item/-label/-value trio also sat here, for a label-over-value pair inside the
   recap card. No component ever rendered them -- BookingSection.razor uses .dv2-recap-card for
   the container and styles its own label/value spans inline -- so they were removed along with
   .add-row-btn above, for the same reason: this stylesheet loads unconditionally, so unused
   rules in it are permanent dead weight a reader has to rule out. */
.dv2-sched-section-title { font: var(--label-md-strong, 700 13px/18px var(--font-sans)); color: var(--fg-1); text-transform: uppercase; letter-spacing: 0.04em; }

/* Summary step's read-only "Details" card (DetailToolbar's ReadOnly branch, §3.9) -- a disabled-
   looking dropdown box (border + trailing chevron) instead of plain bold text, matching the
   reference's own read-only Program/Commodity/Method/Subtype/Units fields. */
.dv2-ro-field { display:flex; align-items:center; justify-content:space-between; gap:6px; height:34px; padding:0 10px; border:1px solid var(--nyle-border-input, #CFD3D3); border-radius:6px; background:var(--nyle-bg-card, #FFFFFF); font:600 13px/18px var(--font-sans); color:var(--fg-1); box-sizing:border-box; }
.dv2-ro-field .chev { color: var(--fg-3, #77787A); flex:0 0 auto; font-size:11px; }

/* Summary step's read-only Origin/Destination "location" field (SummarySideDetailsCard, §3.9) --
   the reference shows this one as a search-styled box (magnifying-glass icon + rounded input chrome)
   rather than the plain dropdown look .dv2-ro-field already covers for Program/Commodity/Market Zone. */
.dv2-ro-search { display:flex; align-items:center; gap:8px; height:34px; padding:0 10px; border:1px solid var(--nyle-border-input, #CFD3D3); border-radius:6px; background:var(--nyle-bg-card, #FFFFFF); font:600 13px/18px var(--font-sans); color:var(--fg-1); box-sizing:border-box; }
.dv2-ro-search .search-ic { color: var(--fg-3, #77787A); flex:0 0 auto; }

/* SummarySideDetailsCard's Market Zone -- a real disabled <select> (matches the reference's own
   genuine <select disabled> element, not a styled div), just given the same box treatment as
   .dv2-ro-field/.dv2-ro-search for visual consistency with this card's other fields. Native select
   chevron/disabled greying is left alone rather than stripped with appearance:none. */
.dv2-ro-select { display:block; width:100%; height:34px; padding:0 10px; border:1px solid var(--nyle-border-input, #CFD3D3); border-radius:6px; background:var(--nyle-bg-card, #FFFFFF); font:600 13px/18px var(--font-sans); color:var(--fg-1); box-sizing:border-box; }
.dv2-ro-select:disabled { opacity:1; color:var(--fg-1); background:var(--nyle-bg-card, #FFFFFF); }

/* BookingSection's text/date fields (Schedule step, §3.8) -- were reusing .dv2-tf .input, a class
   tuned for the Detail step's compact single-row toolbar (height:30px, zero vertical padding,
   min-width:110px), which read as too small/barely visible in this card's more spacious layout.
   Values below are taken directly from the reference's own measured computed style for its input
   fields (border/radius/padding/font/transition), not reused from an unrelated component. */
.dv2-booking-input { display:block; width:100%; box-sizing:border-box; font:var(--body-md, 400 14px/20px var(--font-sans)); color:var(--fg-1); background-color:var(--nyle-bg-card, #FFFFFF); border:1px solid var(--nyle-border-input, #CFD3D3); border-radius:4px; padding:9px 12px; outline:none; transition:border-color 100ms var(--ease-out, cubic-bezier(0.22,0.61,0.36,1)), box-shadow 100ms var(--ease-out, cubic-bezier(0.22,0.61,0.36,1)); }

/* Create Schedule / Schedule recap grids (ScheduleGrid.razor, ScheduleRecapGrid.razor, §3.8/§3.9) --
   the reference has no vertical column-divider lines, only the horizontal row separators Kendo's
   theme already draws by default; this only strips the border-right/border-left every td/th also
   gets from that same theme. Scoped to this wrapper class (added around each <TuiGrid>, not a
   parameter on the shared TuiGrid component itself) rather than a bare ".k-grid" rule, so it can't
   affect any other grid in the app -- TuiGrid has no CssClass parameter to hang this off of instead.
   Both k-grid/k-table-* selectors covered since TuiGrid.razor.css's own rules target both. */
.dv2-sched-grid .k-grid td,
.dv2-sched-grid .k-grid th,
.dv2-sched-grid .k-table-td,
.dv2-sched-grid .k-table-th {
    border-inline-start: none;
    border-inline-end: none;
}

/* AppliedVolumeBreakdownCard's ORIGIN/DESTINATION tab pair (Summary step, §3.9) -- matches the
   approved reference's own tab treatment: active tab is solid and visually "docks" into the
   green-bordered card directly below it (no bottom border, negative margin already handles the
   overlap in the component's own inline layout); inactive tab is a plain white bordered pill.
   Active ORIGIN is green, active DESTINATION is red -- confirmed via DevTools computed style on
   the reference (button.od-tab.dest.active: background #DC3545, padding 9px 18px), matching the
   same green-Buy/red-Sell convention already used for this card's own contract-side badge. */
.dv2-avb-tab { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border:1px solid var(--nyle-border-hairline, #E7E9E9); border-bottom:none; border-radius:6px 6px 0 0; background:var(--nyle-bg-card, #FFFFFF); color:var(--fg-2, #333333); font:var(--label-sm-strong, 700 11px/14px var(--font-sans)); letter-spacing:0.03em; cursor:pointer; }
.dv2-avb-tab.active-origin { background:var(--nyle-success, #078A04); border-color:var(--nyle-success, #078A04); color:#FFFFFF; }
.dv2-avb-tab.active-dest { background:var(--nyle-danger-strong, #DC3545); border-color:var(--nyle-danger-strong, #DC3545); color:#FFFFFF; }

/* create-intention-ui-redesign: the V2 wizard body container (CreateIntention.razor's flag-gated
   wrapper) plus suppression of the browser's dotted focus outline that appears around the wizard
   body *on click*. The element that actually takes that focus is Kendo's own internal step-content
   wrapper (TelerikWizard gives it a tabindex for keyboard step navigation), whose generated class
   this app never names.

   Two deliberate constraints, both corrections to an earlier version of this rule:
   1. Scoped to .civ2-wizard, not #WizardContainer. #WizardContainer is the *shared* wizard shell
      (Wizard.razor) -- ScheduleMoveWizard, IntentionMoveWizardView and the three InventoryManagement
      application wizards all render inside it. Targeting it restyled five wizards this feature does
      not own, and broke the "flag off changes nothing" guarantee.
   2. :focus:not(:focus-visible), not a blanket :focus. That suppresses the ring for mouse and
      programmatic focus (the reported symptom) while leaving it intact for keyboard focus, so no
      keyboard user loses their focus indicator -- WCAG 2.4.7. The previous version also matched
      :focus-visible, removing the ring from every focusable non-form-control descendant. */
.civ2-wizard { background: var(--nyle-grey-25, #F9F9F9); padding: 16px; border-radius: 8px; }
.civ2-wizard *:focus:not(:focus-visible) { outline: none; }

/* ============================================================================================
   Intentions list V2 (Pages/Intention/ListV2/, gated by FEATURE_INTENTION_CREATE_V2 -- see
   Intentions.razor's own flag comment).

   Ported from the approved reference implementation's own stylesheet (the "Shipping Intentions
   (standalone)" mock the user supplied), with its cx- and shp- prefixes renamed to ilv2- so they
   cannot collide with
   this app's own existing .shp-pill block above. Values are copied, not re-derived: earlier passes
   that eyeballed colors/padding from screenshots were rejected, so these now match the reference
   rule-for-rule (.cx-filterbar, .cx-pill, .shp-combo, .cx-table, .cf-pager, .method-chip).

   Global rather than per-component .razor.css for the same Blazor CSS-isolation reliability
   reason the rest of this feature area already works around (see .dealv2-step's own comment). */

/* Filter bar -- reference .cx-filterbar: a flat full-width bar with a hairline underline, NOT a
   bordered/rounded card. The card-with-wrapped-rows shape a previous pass used was the specific
   "not aligned as per the design" complaint. */
.ilv2-filterbar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:10px 18px; border-bottom:1px solid var(--nyle-border-hairline, #E7E9E9); background:var(--nyle-bg-card, #FFFFFF); position:relative; }
.ilv2-filterbar .lbl { font:700 10px/1 var(--font-sans); letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-3, #77787A); margin-right:4px; }
.ilv2-filterbar .spacer { flex:1; }

.ilv2-search { position:relative; flex:0 0 220px; height:28px; }
.ilv2-search input { width:100%; height:28px; border:1px solid var(--nyle-border-input, #CFD3D3); border-radius:5px; padding:0 8px 0 28px; font:500 12px/1 var(--font-sans); color:var(--fg-1, #040C17); background:var(--nyle-bg-card, #FFFFFF); }
.ilv2-search input::placeholder { color:var(--fg-4, #B0B3B3); }
.ilv2-search input:focus { outline:none; border-color:var(--nyle-action-blue, #2371C4); box-shadow:0 0 0 3px var(--color-brand-alpha-30, rgba(35,113,196,0.30)); }
.ilv2-search .ic { position:absolute; left:8px; top:50%; transform:translateY(-50%); color:var(--fg-4, #B0B3B3); pointer-events:none; display:inline-flex; }

/* Filter pill -- reference .cx-pill. A real button showing "Name: Value ⌄" that opens a popover;
   deliberately NOT a bordered wrapper around a native <select>/Kendo picker (that approach was
   explicitly rejected -- the embedded controls could not be made to line up). */
.ilv2-pill-wrap { position:relative; display:inline-flex; }
/* The capsule is the <span>; the open control and the clear "x" are sibling <button>s inside it
   (nesting one interactive element in another is invalid and leaves the inner one unfocusable).
   The buttons are visually transparent so the capsule supplies the single border/background. */
.ilv2-pill { display:inline-flex; align-items:center; gap:2px; padding:0 4px 0 0; background:var(--nyle-bg-card, #FFFFFF); border:1px solid var(--nyle-border-input, #CFD3D3); border-radius:5px; font:600 11.5px/1 var(--font-sans); color:var(--fg-2, #333333); height:28px; white-space:nowrap; }
.ilv2-pill:hover { border-color:var(--nyle-grey-300, #B0B3B3); background:var(--nyle-grey-25, #F9F9F9); }
.ilv2-pill-main { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 4px 0 10px; border:none; background:transparent; font:inherit; color:inherit; cursor:pointer; white-space:nowrap; }
.ilv2-pill-x { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0; border:none; border-radius:3px; background:transparent; color:var(--fg-4, #B0B3B3); cursor:pointer; }
.ilv2-pill-x:hover { color:var(--nyle-action-blue, #2371C4); background:var(--nyle-grey-100, #E7E9E9); }
.ilv2-pill .name { color:var(--fg-3, #77787A); font-weight:600; }
.ilv2-pill .name::after { content:":"; margin-right:2px; color:var(--fg-4, #B0B3B3); }
.ilv2-pill .val { color:var(--fg-1, #040C17); font-weight:700; max-width:132px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ilv2-pill .chev { color:var(--fg-3, #77787A); display:inline-flex; }
.ilv2-pill.active { border-color:var(--nyle-action-blue, #2371C4); background:rgba(35,113,196,0.06); }
.ilv2-pill .x { color:var(--fg-4, #B0B3B3); padding-left:2px; display:inline-flex; }
.ilv2-pill .x:hover { color:var(--nyle-action-blue, #2371C4); }
.ilv2-pill.add { border-style:dashed; color:var(--fg-3, #77787A); }
.ilv2-pill.add:hover { color:var(--nyle-action-blue, #2371C4); border-color:var(--nyle-action-blue, #2371C4); }

/* Popover -- reference .shp-combo. The backdrop is a transparent full-viewport button so an
   outside click closes the panel without any JS interop / document-level listener. */
.ilv2-pop-backdrop { position:fixed; inset:0; z-index:39; background:transparent; border:none; padding:0; margin:0; cursor:default; }
.ilv2-pop { position:absolute; top:calc(100% + 6px); left:0; z-index:40; min-width:232px; padding:8px; border:1px solid var(--nyle-border-hairline, #E7E9E9); border-radius:6px; background:var(--nyle-bg-card, #FFFFFF); box-shadow:var(--shadow-md, 0 4px 16px -2px rgba(16,24,40,0.10)); }
.ilv2-pop.right { left:auto; right:0; }
.ilv2-pop-find { position:relative; padding:2px 2px 6px; border-bottom:1px solid var(--nyle-border-hairline, #E7E9E9); margin-bottom:4px; }
.ilv2-pop-find input { width:100%; height:30px; padding:0 10px 0 28px; border:1px solid var(--nyle-border-input, #CFD3D3); border-radius:4px; font:var(--label-md, 500 13px/16px var(--font-sans)); color:var(--fg-1, #040C17); background:var(--nyle-bg-card, #FFFFFF); }
.ilv2-pop-find input:focus { outline:none; border-color:var(--nyle-action-blue, #2371C4); box-shadow:0 0 0 3px var(--color-brand-alpha-30, rgba(35,113,196,0.30)); }
.ilv2-pop-find .ic { position:absolute; left:10px; top:9px; color:var(--fg-4, #B0B3B3); pointer-events:none; display:inline-flex; }
.ilv2-pop-list { max-height:248px; overflow:auto; }
/* A <button>, not a div with a click handler, so the options are keyboard-reachable; these resets
   keep it looking like the full-width row it replaced. */
.ilv2-pop-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:7px 10px; border:none; border-radius:4px; background:transparent; cursor:pointer; font:var(--body-md, 400 14px/20px var(--font-sans)); color:var(--fg-1, #040C17); }
.ilv2-pop-item:hover { background:var(--nyle-grey-50, #F3F4F4); }
.ilv2-pop-item .cbx { width:16px; height:16px; border:1.5px solid var(--nyle-grey-300, #B0B3B3); border-radius:3px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--nyle-bg-card, #FFFFFF); color:#FFFFFF; }
.ilv2-pop-item .cbx.on { background:var(--nyle-action-blue, #2371C4); border-color:var(--nyle-action-blue, #2371C4); }
.ilv2-pop-item .txt { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ilv2-pop-foot { display:flex; justify-content:space-between; gap:8px; padding:6px 2px 0; margin-top:4px; border-top:1px solid var(--nyle-border-hairline, #E7E9E9); }
.ilv2-pop-foot button { background:none; border:none; font:var(--label-sm-strong); color:var(--nyle-action-blue, #2371C4); cursor:pointer; padding:4px 6px; }
.ilv2-pop-foot button:hover { text-decoration:underline; }
.ilv2-pop-field { display:flex; flex-direction:column; gap:4px; padding:4px 2px; font:var(--label-sm-strong); color:var(--fg-3, #77787A); }
.ilv2-pop-field input { height:30px; min-width:230px; padding:0 8px; border:1px solid var(--nyle-border-input, #CFD3D3); border-radius:4px; font:500 12px/1 var(--font-sans); color:var(--fg-1, #040C17); background:var(--nyle-bg-card, #FFFFFF); }
.ilv2-pop-field input:focus { outline:none; border-color:var(--nyle-action-blue, #2371C4); box-shadow:0 0 0 3px var(--color-brand-alpha-30, rgba(35,113,196,0.30)); }
.ilv2-pop-hint { font:var(--body-sm, 400 12px/16px var(--font-sans)); color:var(--fg-3, #77787A); padding:2px 2px 4px; }

/* Card shell holding filter bar + table + pager as one surface (reference .shp-landing-page). */
.ilv2-card { border:1px solid var(--nyle-border-hairline, #E7E9E9); border-radius:6px; background:var(--nyle-bg-card, #FFFFFF); overflow:visible; margin-bottom:16px; }
.ilv2-table-wrap { overflow-x:auto; max-width:100%; }

/* Table -- reference .cx-table. Hand-rolled instead of TuiGrid/Kendo: the Kendo chrome (its own
   toolbar, locked-column panes, column menus, pager) is what kept reading as "still the legacy
   grid", and its duplicated Move/Actions rendering could not be styled away. */
.ilv2-table { width:100%; border-collapse:separate; border-spacing:0; font:500 11.5px/1 var(--font-sans); color:var(--fg-2, #333333); table-layout:fixed; }
.ilv2-table thead th { position:sticky; top:0; z-index:2; background:var(--nyle-grey-50, #F3F4F4); color:var(--fg-3, #77787A); font:700 9.5px/1 var(--font-sans); letter-spacing:0.09em; text-transform:uppercase; text-align:left; padding:11px 8px; border-bottom:1px solid var(--nyle-border-hairline, #E7E9E9); white-space:nowrap; }
/* Sorting lives on a real <button> inside the <th> (a th cannot take focus), reset to look like
   the header text it replaced. */
.ilv2-th-sort { display:inline-flex; align-items:center; gap:4px; padding:0; border:none; background:transparent; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer; }
.ilv2-th-sort:hover { color:var(--fg-1, #040C17); }
.ilv2-table thead th .sort { color:var(--nyle-action-blue, #2371C4); }
.ilv2-table tbody td { padding:5px 8px; height:33px; border-bottom:1px solid var(--nyle-border-hairline, #E7E9E9); vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ilv2-table tbody tr:hover td { background:rgba(35,113,196,0.04); }
.ilv2-table tbody tr.selected td { background:rgba(35,113,196,0.08); }
.ilv2-table td.code { font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--nyle-action-blue, #2371C4); letter-spacing:-0.01em; cursor:pointer; }
.ilv2-table td.code:hover { text-decoration:underline; }
.ilv2-table td.cp { color:var(--fg-1, #040C17); font-weight:500; }
.ilv2-table td.muted { color:var(--fg-3, #77787A); }
.ilv2-table td.link { color:var(--nyle-action-blue, #2371C4); font-weight:600; cursor:pointer; }
.ilv2-table td.link:hover { text-decoration:underline; }
/* One anchor per contract code in the Buy/Sell cells -- block so multiple codes stack, ellipsised
   so a long code can't widen the fixed-layout column. */
.ilv2-cell-link { display:block; color:var(--nyle-action-blue, #2371C4); font-weight:600; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ilv2-cell-link:hover { text-decoration:underline; }
.ilv2-table .cb-cell { text-align:center; }
.ilv2-table input[type="checkbox"] { width:14px; height:14px; accent-color:var(--nyle-action-blue, #2371C4); cursor:pointer; display:block; margin:0 auto; }
.ilv2-empty { padding:28px 8px; text-align:center; color:var(--fg-3, #77787A); font:var(--body-sm, 400 12px/16px var(--font-sans)); }

/* Transport chip -- reference .method-chip (one merged Method · SubMethod cell). */
.ilv2-method-chip { display:inline-flex; align-items:center; gap:6px; max-width:100%; overflow:hidden; text-overflow:ellipsis; font:var(--label-sm-strong); color:var(--fg-2, #333333); background:var(--nyle-grey-50, #F3F4F4); border:1px solid var(--nyle-border-hairline, #E7E9E9); border-radius:var(--radius-pill, 9999px); padding:3px 10px; white-space:nowrap; }
.ilv2-method-chip .sub { color:var(--fg-3, #77787A); }
.ilv2-method-chip .cntr { color:var(--nyle-primary-blue, #336094); }

.ilv2-ico-btn { border:none; background:none; cursor:pointer; color:var(--fg-3, #77787A); display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:4px; }
.ilv2-ico-btn:hover { color:var(--fg-1, #040C17); background:var(--nyle-grey-50, #F3F4F4); }

/* Pager -- reference .cf-pager. */
.ilv2-pager { display:flex; align-items:center; gap:4px; padding:12px 18px; background:var(--nyle-bg-card, #FFFFFF); border-top:1px solid var(--nyle-border-hairline, #E7E9E9); }
.ilv2-pager .pg { min-width:28px; height:28px; padding:0 8px; border:1px solid var(--nyle-border-input, #CFD3D3); border-radius:4px; background:var(--nyle-bg-card, #FFFFFF); color:var(--fg-2, #333333); font:600 12px/1 var(--font-sans); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.ilv2-pager .pg.on { background:var(--nyle-action-blue, #2371C4); color:#FFFFFF; border-color:var(--nyle-action-blue, #2371C4); }
.ilv2-pager .pg:disabled { opacity:0.4; cursor:default; }
.ilv2-pager .spacer { flex:1; }
.ilv2-pager .meta { font:500 12px/1 var(--font-sans); color:var(--fg-3, #77787A); }
.ilv2-pager .pp-select { display:inline-flex; align-items:center; gap:9px; margin-left:14px; cursor:pointer; }
.ilv2-pager .pp-select select { height:28px; border:1px solid var(--nyle-border-input, #CFD3D3); border-radius:4px; background-color:var(--nyle-bg-card, #FFFFFF); padding:0 8px; font:600 12px/1 var(--font-sans); color:var(--fg-2, #333333); }
.ilv2-pager .pp-select .pp-label { font:500 12px/1 var(--font-sans); color:var(--fg-3, #77787A); }

/* Page-head buttons: solid Create pill + outlined secondary (Export/Move), per the reference's
   own page head. */
.ilv2-create-btn { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 16px; border-radius:6px; background:var(--nyle-action-blue, #2371C4); color:#FFFFFF; font:var(--label-sm-strong, 700 11px/14px var(--font-sans)); text-decoration:none; cursor:pointer; border:1px solid var(--nyle-action-blue, #2371C4); }
.ilv2-create-btn:hover { background:var(--nyle-primary-blue-hover, #27486F); color:#FFFFFF; }
.ilv2-create-btn-disabled { background:var(--nyle-grey-300, #B0B3B3); border-color:var(--nyle-grey-300, #B0B3B3); color:#FFFFFF; cursor:not-allowed; }
.ilv2-head-btn { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border:1px solid var(--nyle-border-input, #CFD3D3); border-radius:6px; background:var(--nyle-bg-card, #FFFFFF); color:var(--fg-2, #333333); font:600 12px/1 var(--font-sans); cursor:pointer; }
.ilv2-head-btn:hover:not(:disabled) { background:var(--nyle-grey-25, #F9F9F9); color:var(--fg-1, #040C17); }
.ilv2-head-btn:disabled { opacity:0.45; cursor:default; }