@import '_content/Omni.SharedComponents/Omni.SharedComponents.mjejrryq92.bundle.scp.css';

/* /Features/Home/Components/CategoryPercentOfSalesChart.razor.rz.scp.css */
/* CategoryPercentOfSalesChart — PBI DC-05 (#11331), the stacked share bar. Tokens only: this file
   defines no custom property and no colour. Each segment's fill arrives inline as a series-* token
   reference (or the neutral token for the aggregate); the legend text takes the swatch's foreground.
   Fluid at every tier — no pixel width or height anywhere (ui-responsive-adaptive.md, Layer 1). */

/* PBI SH-10 (#12271) — the design's geometry (the Main artboard, 1790431504-f8f7), expressed in the
   house tokens rather than its pixel literals: this file still pins no pixel width or height. The
   spacing scale is 4px (--rr-space-1), so each design figure is a multiple of it where one exists.

   Where the slack goes. The tile is a fixed height and this block now takes only what it needs — a
   fixed band plus a legend at its content height — so the block is top-aligned under the card header
   and any spare height falls BELOW the legend, as the artboard draws it. Neither the band nor the
   legend stretches to fill it. On a tile too short for every row the legend (the one shrinkable
   child, `min-height: 0`) scrolls inside the tile instead of overflowing it. */
.category-share[b-6owuwf3rkp] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--rr-space-1) * 3.5);
    height: 100%;
    width: 100%;
    min-height: 0;
}

/* A thin measure, not a block of colour: a fixed --rr-space-4 (16px) band. The gap is what separates
   two neighbours, never the colour change alone: two segments meeting edge to edge read as one region
   to a reader who cannot tell the pair apart. Each segment's width is its flex-grow share of what
   remains once the gaps are taken out. */
.category-share-bar[b-6owuwf3rkp] {
    flex: 0 0 auto;
    display: flex;
    gap: calc(var(--rr-space-1) / 2);
    width: 100%;
    height: var(--rr-space-4);
}

.category-share-segment[b-6owuwf3rkp] {
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 0;
    border-radius: var(--kendo-border-radius-sm);
}

/* One column, one row per segment at a uniform rhythm: swatch, name, percentage — the name and figure
   as text beside every swatch, so the bar and the legend read without colour (WCAG 1.4.1). */
.category-share-legend[b-6owuwf3rkp] {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--rr-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--kendo-color-on-app-surface);
    font-size: var(--rr-text-caption);
    line-height: var(--rr-text-caption-leading);
}

.category-share-legend-item[b-6owuwf3rkp] {
    display: flex;
    align-items: center;
    gap: var(--rr-space-2);
}

/* A fixed-size rounded square (10px, 3px corners), not sized from the text, so it is the same size
   in every context the widget is hosted in. */
.category-share-swatch[b-6owuwf3rkp] {
    flex: 0 0 auto;
    width: calc(var(--rr-space-1) * 2.5);
    height: calc(var(--rr-space-1) * 2.5);
    border-radius: calc(var(--kendo-border-radius-base) * 0.75);
}

/* The name takes the free width and truncates rather than wraps. `min-width: 0` is load-bearing:
   without it the flex child refuses to shrink below its content and pushes the percentage out of the
   row. The full name stays reachable through the row's title and the bar's accessible name. */
.category-share-legend-name[b-6owuwf3rkp] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Right-aligned in tabular figures, so the percentages form a column; de-emphasised at the house
   muted pairing (--kendo-color-subtle), as the artboard mutes it. */
.category-share-legend-value[b-6owuwf3rkp] {
    flex: 0 0 auto;
    margin-inline-start: auto;
    text-align: end;
    color: var(--kendo-color-subtle);
    font-variant-numeric: tabular-nums;
}
/* /Features/Home/Components/DashboardBarChart.razor.rz.scp.css */
/* DashboardBarChart — PBI SM-37 (#11163). Tokens only; this file defines no custom property and no
   colour. The bar fill arrives as a series-* token reference on each bar; text and the baseline take
   the swatch's own foreground and border tokens, so all four theme combinations are the swatch's. */

.dashboard-bar-chart[b-fbxtlqo8a3] {
    display: block;
    overflow: hidden;
}

.dashboard-chart-text[b-fbxtlqo8a3] {
    fill: var(--kendo-color-on-app-surface);
    font-size: var(--rr-text-caption);
}

.dashboard-bar-value[b-fbxtlqo8a3] {
    font-variant-numeric: tabular-nums;
}

.dashboard-chart-baseline[b-fbxtlqo8a3] {
    stroke: var(--kendo-color-border);
    stroke-width: 1px;
}

/* ── The Bar presentation: the design's labelled row list (PBI SH-05, #12185) ──────────────────────
   One flex row per category — label · bar · figure — and no baseline, axis or rotation. Sized by its
   tile like the SVG it replaces: the list fills its host and clips, and the component withholds the rows
   that do not fit and says so, so a row is never squeezed. The gutters are the design's 96 / 42 / 64px
   expressed in rem, so they follow the reader's font size rather than pinning a pixel width.
   ⚠️ The row gap, the bar's thickness and the note's margin are restated in DashboardBarChart.razor.cs
   (RowGapPx, BarThicknessPx, OverflowNoteMarginTopPx) for the row budget — change them together. */

.dashboard-bar-list[b-fbxtlqo8a3] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: 100%;
    color: var(--kendo-color-on-app-surface);
    font-size: var(--rr-text-caption);
    line-height: var(--rr-text-caption-leading);
}

.dashboard-bar-list .dashboard-bar-row[b-fbxtlqo8a3] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* The label's fixed left gutter. A name too long for it ends in an ellipsis on one line; the row's title
   carries it in full, and the chart's accessible name carries every row. */
.dashboard-bar-list .dashboard-bar-category[b-fbxtlqo8a3] {
    flex: 0 0 6rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The track takes whatever width the two gutters leave; the bar is a percentage of it. */
.dashboard-bar-list .dashboard-bar-track[b-fbxtlqo8a3] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

/* Flat at the baseline end, rounded at the far end. A negative value runs the other way from zero, so its
   far end is on the left. */
.dashboard-bar-list .dashboard-bar[b-fbxtlqo8a3] {
    flex: 0 0 auto;
    height: 0.625rem;
    border-radius: 0 0.3125rem 0.3125rem 0;
}

.dashboard-bar-list .dashboard-bar-negative[b-fbxtlqo8a3] {
    border-radius: 0.3125rem 0 0 0.3125rem;
}

/* The figure's fixed right gutter, right-aligned in tabular figures (the .dashboard-bar-value rule above),
   so the figures line up down the column. A percentage needs less room than a count or an amount. */
.dashboard-bar-list .dashboard-bar-value[b-fbxtlqo8a3] {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.dashboard-bar-list .dashboard-bar-value-figure[b-fbxtlqo8a3] {
    width: 4rem;
}

.dashboard-bar-list .dashboard-bar-value-percent[b-fbxtlqo8a3] {
    width: 2.625rem;
}

/* BUG DG-B3 (#11868) — the "not shown" note is de-emphasised the way every caption-sized aside on the
   shell is (ui-shell-chrome.md §13's --rr-text-caption at --kendo-color-subtle); the size is the list's. */
.dashboard-bar-list .dashboard-bar-overflow-note[b-fbxtlqo8a3] {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--kendo-color-subtle);
    white-space: nowrap;
}

/* The caption-sized probe dashboardChartBox.js measures when no row is drawn — out of flow, never seen. */
.dashboard-bar-list .dashboard-bar-label-probe[b-fbxtlqo8a3] {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    pointer-events: none;
}
/* /Features/Home/Components/DashboardShareChart.razor.rz.scp.css */
/* DashboardShareChart — PBI SM-37 (#11163). Tokens only; this file defines no custom property and no
   colour. Each slice's fill arrives as a series-* token reference; the slice separator and the legend
   text take the swatch's own surface and foreground tokens. */

/* The tile is a fixed height (WidgetCard's .widget-chart), so the plot and the legend share it: the
   legend takes its content height and the plot takes the rest. `min-height: 0` is load-bearing —
   without it the plot refuses to shrink below its intrinsic size and overflows the tile. */
.dashboard-share-chart[b-vcvasqzac8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.dashboard-share-plot[b-vcvasqzac8] {
    flex: 1 1 auto;
    min-height: 0;
}

/* A hairline in the card's own surface colour between neighbouring slices. The slices already clear
   3:1 against each other; the separator only keeps a thin slice's edge crisp at a small tile size. */
.dashboard-share-slice[b-vcvasqzac8] {
    stroke: var(--kendo-color-surface-alt);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.dashboard-chart-legend[b-vcvasqzac8] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--rr-space-1) var(--rr-space-3);
    margin: 0;
    padding: var(--rr-space-2) 0 0;
    list-style: none;
    color: var(--kendo-color-on-app-surface);
    font-size: var(--rr-text-caption);
    line-height: var(--rr-text-caption-leading);
}

.dashboard-chart-legend-item[b-vcvasqzac8] {
    display: inline-flex;
    align-items: center;
    gap: var(--rr-space-1);
}

.dashboard-chart-legend-swatch[b-vcvasqzac8] {
    width: 0.75em;
    height: 0.75em;
    flex: 0 0 auto;
}
/* /Features/Home/Components/NeedsAttentionDetail.razor.rz.scp.css */
/* PBI #12097 — the Needs attention detail: the content WidgetDrillInPanel (#12096) hosts. Tokens only; no literal
   colour and no fixed width (ui-responsive-adaptive.md, Layer 1): every block is a fluid row that wraps inside
   itself at a narrow card. The panel's body scrolls when a tenant has more affected stores than fit; the heading,
   close control and onward link are the panel's and styled there. */

.needs-attention-detail[b-qutuu0j74h] {
    display: flex;
    flex-direction: column;
    gap: var(--rr-space-1);
    min-width: 0;
}

.needs-attention-detail-clear[b-qutuu0j74h],
.needs-attention-detail-note[b-qutuu0j74h] {
    font-size: var(--rr-text-secondary);
    line-height: var(--kendo-line-height-sm);
    color: var(--kendo-color-subtle);
}

.needs-attention-detail-stores[b-qutuu0j74h] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.needs-attention-detail-store[b-qutuu0j74h] {
    display: flex;
    align-items: baseline;
    gap: var(--rr-space-2);
    font-size: var(--rr-text-secondary);
    line-height: var(--kendo-line-height-sm);
}

.needs-attention-detail-store + .needs-attention-detail-store[b-qutuu0j74h] {
    border-top: 1px solid var(--rr-hairline);
}

.needs-attention-detail-store-name[b-qutuu0j74h] {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.needs-attention-detail-store-count[b-qutuu0j74h] {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-weight: var(--rr-text-weight-medium);
}
/* /Features/Home/Components/NeedsAttentionWidget.razor.rz.scp.css */
/* PBI #11330 — Needs attention panel. Tokens only; no literal colour and no fixed width.

   PBI DF-03 (#12013) — the panel's height is its catalogue entry's DefaultHeight, which is back at the
   artboard's 252 (WidgetCatalog → ShortPanelHeight, a 264px cell) — the height of the two widgets beside it.
   DG-08 (#11869) grew the card to 544 instead; this PBI takes the other lever and tightens the ROW, never by
   dropping the where-line. No height is set here, so the component and the entry cannot disagree.

   The budget, px at a 16px root. The 264px cell less the card's chrome (border 2 + header 45 + body padding
   32) leaves the panel 185. Row, before: 8 + label 20 (14 x 1.4286) + where-line 18.6 (13 x 1.4286) + 8
   = 54.6, and a 44px floor; four rows, three hairlines, the panel's 16 block padding and the note's 8 gap +
   20 line = 263 — which is why it scrolled at 252. Row, after: 1 + 17.5 (14 x 1.25) + 16.25 (13 x 1.25) + 1
   = 35.75; four rows + three hairlines 146, the note's 2 gap + two 15px caption lines 32, no block padding
   = 178 — inside 185 with the note wrapped once, as it does at a third of a laptop row.

   PBI SH-11 (#12272) — the artboard's row rhythm. The label takes the secondary role (13px) and the where-line
   the caption role (12px, the ramp's nearest step to the artboard's 11), the hairlines give way to the
   artboard's 3px list gap, and the row's block padding is 2px: 2 + 16.25 + 15 + 2 = 35.25 per row; four rows
   + three 3px gaps 150, the note's 2 gap + two caption lines 32 = 184 — still inside 185 with the note wrapped
   once. The artboard's 7px block padding would take it to 204 and scroll the panel at 252, so the budget, not
   the artboard, sets that one value.

   `overflow: auto` is deliberate and stays: it is the defence against a fifth kind arriving later, and at
   the four kinds the endpoint returns it no longer fires at the laptop / desktop card. */

.needs-attention[b-goyu4yjcvd] {
    --needs-attention-bleed: calc(var(--rr-space-1) * 1.5);
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--rr-space-1) / 2);
    padding: 0 var(--rr-space-3);
    overflow: auto;
    container: needs-attention / inline-size;
}

.needs-attention-list[b-goyu4yjcvd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--rr-space-1) * 0.75);
}

/* Fix cycle 1 (#11869) — the row never wraps. At a tablet or phone card width the old `flex-wrap: wrap`
   dropped the text column below the chip and the chevron onto a line of its own, taking a row from ~55px to
   ~96-121px and scrolling the panel. Now the chip and the chevron keep their own width, and the text column
   takes what is left (`flex: 1 1 0` + `min-width: 0`) and wraps INSIDE itself — the where-line is never
   dropped or truncated, it only takes a second line.

   PBI DF-03 (#12013) — the row's vertical rhythm is tightened: 1px block padding (the hairline and the
   lines' own half-leading separate the rows) and a 24px hit-area floor, the house floor
   (ui-responsive-adaptive.md → Touch targets). The 44px phone-tier role is kept where the pointer is coarse,
   so a finger still gets it; a mouse no longer pays 4 x 44 for it. */
.needs-attention-item[b-goyu4yjcvd] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: calc(var(--rr-space-1) * 2.5);
    min-block-size: 24px;
    padding-block: 2px;
    color: inherit;
    text-decoration: none;
    /* PBI DW-02 (#12097) — the row is a <button> now (it opens the detail), so the user agent's button chrome is
       reset to the row it replaced: full width, no border or fill, the panel's own type, start-aligned. */
    /* PBI SH-11 (#12272) — the row bleeds into the panel's inline padding by the same amount it pads itself, so
       the hover fill reaches toward the card's padding edge while the row's content stays exactly where it was. */
    inline-size: calc(100% + 2 * var(--needs-attention-bleed));
    margin-inline: calc(-1 * var(--needs-attention-bleed));
    padding-inline: var(--needs-attention-bleed);
    border: 0;
    border-radius: var(--rr-radius-sm);
    background: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

@media (pointer: coarse) {
    .needs-attention-item[b-goyu4yjcvd] {
        min-block-size: 44px;
    }
}

/* PBI DW-02 (#12097) — a row that opens a detail answers the pointer with the neutral hover FILL and focus with the
   compact inset ring (ui-shell-chrome.md §15.2 / §15.3: :focus-visible only, a transparent outline so forced-colors
   still paints one). It no longer underlines its label on hover: an underline is the link's signal, and the one
   link on this widget is the detail's onward link to the report. */
.needs-attention-item:hover[b-goyu4yjcvd] {
    background: var(--kendo-color-base-hover);
}

.needs-attention-item:focus-visible[b-goyu4yjcvd] {
    outline: 2px solid transparent;
    box-shadow: inset 0 0 0 2px var(--kendo-color-primary-on-subtle);
}

.needs-attention-text[b-goyu4yjcvd] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* PBI SH-11 (#12272) — the count chip. The count ALONE, one width for every row: a minimum of the artboard's 30px
   or the longest count on the list (--needs-attention-count-chars, set on the list) plus the chip's own padding,
   whichever is wider. Tabular figures make every digit 1ch wide, so the widest count sets the width and the
   others centre inside it. It is a minimum and the chip never clips: white-space: nowrap keeps a count whole,
   and a count longer than any before it raises the characters and widens all four chips together. The fill and
   foreground pair are one semantic family each (-subtle / -on-subtle), the pairing RRChip uses, so the swatch's
   own light / dark contrast ships rather than the artboard's light-mode literals. */
.needs-attention-count[b-goyu4yjcvd] {
    flex: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: max(30px, calc(var(--needs-attention-count-chars, 1) * 1ch + 14px));
    min-block-size: 26px;
    padding-block: 0;
    padding-inline: 7px;
    border-radius: var(--rr-radius-sm);
    font-size: var(--rr-text-caption);
    line-height: var(--rr-text-caption-leading);
    font-weight: var(--rr-text-weight-medium);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.needs-attention-count-success[b-goyu4yjcvd] {
    background-color: var(--kendo-color-success-subtle);
    color: var(--kendo-color-success-on-subtle);
}

.needs-attention-count-warning[b-goyu4yjcvd] {
    background-color: var(--kendo-color-warning-subtle);
    color: var(--kendo-color-warning-on-subtle);
}

.needs-attention-count-error[b-goyu4yjcvd] {
    background-color: var(--kendo-color-error-subtle);
    color: var(--kendo-color-error-on-subtle);
}

/* PBI SH-11 (#12272) — the label is ellipsised on overflow at a wide card, as the artboard draws it; the row's
   accessible name carries the whole label. At a narrow card it wraps instead (the container query below), so the
   #11869 promise — nothing on the row is truncated where the card is tight — still holds. */
.needs-attention-label[b-goyu4yjcvd] {
    font-size: var(--rr-text-secondary);
    line-height: var(--kendo-line-height-sm);
    font-weight: var(--rr-text-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.needs-attention-where[b-goyu4yjcvd] {
    font-size: var(--rr-text-caption);
    line-height: var(--kendo-line-height-sm);
    color: var(--kendo-color-subtle);
}

.needs-attention-chevron[b-goyu4yjcvd] {
    flex: none;
    color: var(--kendo-color-subtle);
}

/* PBI DW-02 (#12097) — the row's trailing glyph is a disclosure (a downward chevron: "more here"), not the › that
   used to promise the same thing while navigating away. The class keeps its layout slot, `chevron`. */
.needs-attention-disclosure[b-goyu4yjcvd] {
    display: inline-flex;
    align-items: center;
}

/* PBI DF-03 (#12013) — the note keeps its words; it takes the caption role at the caption leading. Set on the
   block, not the inline <small>: the block's own strut would otherwise hold each line at the panel's 20px. */
.needs-attention-note[b-goyu4yjcvd] {
    font-size: var(--rr-text-caption);
    line-height: var(--kendo-line-height-sm);
}

.needs-attention-note small[b-goyu4yjcvd] {
    font-size: 1em;
}

/* Fix cycle 2 (#11869) — a narrow CARD, not a narrow viewport. At the tablet tier the board gives this
   one-third widget a ~274px card, narrower than the ~341px card it gets at a phone column, so a viewport
   breakpoint cannot find it; the query reads the panel's own inline size (the `container` on
   `.needs-attention`). With the chip beside both lines the text column was ~140px and every row wrapped to
   four or five lines. Here the chip moves onto the TITLE line: the text column's two lines become grid items of
   the row (`display: contents`), the label sits beside the chip, and the where-line takes the whole row width
   less the chevron. Nothing is dropped or truncated; the chip keeps its count and the chevron stays on the row. */
@container needs-attention (max-width: 24rem) {
    .needs-attention-item[b-goyu4yjcvd] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "chip  label chevron"
            "where where chevron";
        column-gap: var(--rr-space-2);
        row-gap: 0;
        align-items: start;
    }

    .needs-attention-count[b-goyu4yjcvd] {
        grid-area: chip;
        align-self: start;
        margin-block-start: 2px;
    }

    .needs-attention-text[b-goyu4yjcvd] {
        display: contents;
    }

    .needs-attention-label[b-goyu4yjcvd] {
        grid-area: label;
        min-width: 0;
        white-space: normal;
    }

    .needs-attention-where[b-goyu4yjcvd] {
        grid-area: where;
        min-width: 0;
    }

    .needs-attention-chevron[b-goyu4yjcvd] {
        grid-area: chevron;
        align-self: center;
    }
}
/* /Features/Home/Components/NetSalesTrendChart.razor.rz.scp.css */
/* NetSalesTrendChart — PBI #11329. Tokens only; this file defines no custom property and no colour. The
   line and markers take the colour scheme's lead series-* token inline (ChartVM.SingleSeriesColorFor); text and the
   zero line take the swatch's foreground and border tokens, so every theme combination is the swatch's.
   No pixel width anywhere: the chart fills the card at every tier (ui-responsive-adaptive.md, Layer 1). */

.net-sales-trend[b-qc15wi3s7k] {
    height: 100%;
    width: 100%;
    /* BUG DF-B2 (#12014) — the containing block for the readout, so it is positioned against the chart's own
       box, which is the card's, and never against the page. */
    position: relative;
}

.net-sales-trend-svg[b-qc15wi3s7k] {
    display: block;
    overflow: visible;
}

.dashboard-chart-text[b-qc15wi3s7k] {
    fill: var(--kendo-color-on-app-surface);
    font-size: var(--rr-text-caption);
}

.net-sales-trend-peak-label[b-qc15wi3s7k] {
    font-weight: var(--rr-text-weight-medium);
    font-variant-numeric: tabular-nums;
}

.net-sales-trend-baseline[b-qc15wi3s7k] {
    stroke: var(--kendo-color-border);
    stroke-width: 1px;
}

.net-sales-trend-line[b-qc15wi3s7k] {
    stroke-width: 2px;
    stroke-linecap: round;
}

.net-sales-trend-hit[b-qc15wi3s7k] {
    fill: transparent;
}

/* BUG DF-B2 (#12014) — a point is focusable. The user agent's own outline is suppressed as a TRANSPARENT
   outline, never `none`, so forced-colors mode still repaints one (ui-shell-chrome.md §15.5); the visible
   indicator is a ring on the hit circle, on :focus-visible only (§15.3), in the token §15.3 measured to clear
   3:1 on every background. The ring traces the existing r="10" hit area, so the target is unchanged. */
.net-sales-trend-point[b-qc15wi3s7k] {
    outline: 2px solid transparent;
}

.net-sales-trend-point:focus-visible .net-sales-trend-hit[b-qc15wi3s7k] {
    stroke: var(--kendo-color-primary-on-subtle);
    stroke-width: 2px;
}

/* The engaged point's marker takes a halo in the card's own surface, so it reads as picked out of the line. */
.net-sales-trend-point.is-active .net-sales-trend-marker[b-qc15wi3s7k] {
    stroke: var(--kendo-color-surface);
    stroke-width: 2px;
}

/* BUG DF-B2 (#12014) — the readout. The app's type (the caption role) on the card's own plane, with the
   shell's hairline border and first elevation step. No transition, so it appears on the render that engages
   the point. pointer-events: none so it never takes the pointer from the point beneath it and flickers.
   Horizontal anchoring and vertical placement come from the component's data attributes; the 8px gap to the
   point is --rr-space-2. */
.net-sales-trend-readout[b-qc15wi3s7k] {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
    padding: var(--rr-space-1) var(--rr-space-2);
    background: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
    border: var(--rr-hairline) solid var(--kendo-color-border);
    border-radius: var(--rr-radius-sm);
    box-shadow: var(--rr-elevation-1);
    font-size: var(--rr-text-caption);
    line-height: var(--rr-text-caption-leading);
    font-weight: var(--rr-text-weight-medium);
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
}

.net-sales-trend-readout[data-anchor="start"][b-qc15wi3s7k] {
    transform: none;
}

.net-sales-trend-readout[data-anchor="end"][b-qc15wi3s7k] {
    transform: translateX(-100%);
}

.net-sales-trend-readout[data-placement="above"][b-qc15wi3s7k] {
    margin-bottom: var(--rr-space-2);
}

.net-sales-trend-readout[data-placement="below"][b-qc15wi3s7k] {
    margin-top: var(--rr-space-2);
}

/* PBI DG-05 (#11756) — the zero line's value label. De-emphasised with the shell's subtle text token
   (ui-shell-chrome.md: 5.61:1 - 5.83:1 on every shipping combination, clearing 4.5:1) rather than an opacity,
   at the same caption size as every other label on the chart. */
.net-sales-trend-baseline-label[b-qc15wi3s7k] {
    fill: var(--kendo-color-subtle);
    font-variant-numeric: tabular-nums;
}
/* /Features/Home/Components/TopSellingCategoriesBySalesChart.razor.rz.scp.css */
/* TopSellingCategoriesBySalesChart — PBI DG-06 (#11757), the ranked horizontal bar list. Tokens only: this
   file defines no custom property and no colour. The bar's fill arrives inline as the colour scheme's lead
   series-* token reference; the text takes the card surface's foreground. Fluid at every tier — no pixel
   width or height anywhere (ui-responsive-adaptive.md, Layer 1). Typography follows the share bar's legend
   (#11331): the caption role, one weight, tabular figures. */

/* Three tracks shared by every row through subgrid, so the bars start and end at the same x whatever the
   width of a row's figure: the name, the bar, the figure. The rows share the height they are given, and the
   list scrolls inside the tile rather than overflowing it if the tile is shorter than ten rows of text.
   PBI SH-05 (#12185) — the tracks are the design's row-list gutters, the same form DashboardBarChart's Bar row
   list draws: the name in a fixed left gutter (96px), the bar in what is left, and the figure in a fixed right
   gutter (64px, wider than the margin widget's 42px percentage gutter; it grows, for every row at once, only
   for a figure too wide for it), in rem so they follow the reader's
   font size rather than pinning a pixel width. */
.category-rank[b-2yngq8oaw9] {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) minmax(4rem, max-content);
    grid-auto-rows: minmax(min-content, 1fr);
    column-gap: var(--rr-space-2);
    row-gap: var(--rr-space-1);
    align-content: start;
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--kendo-color-on-app-surface);
    font-size: var(--rr-text-caption);
    line-height: var(--rr-text-caption-leading);
}

.category-rank-row[b-2yngq8oaw9] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    min-width: 0;
}

/* One line, never rotated and never wrapped: a name too long for its track ends in an ellipsis, and the
   element's title carries it in full on hover. Wrapping would give rows different heights and break the
   ranking's rhythm (PBI DG-06). */
.category-rank-name[b-2yngq8oaw9] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.category-rank-track[b-2yngq8oaw9] {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
}

/* PBI SH-05 (#12185) — the design's bar: 10px thick, flat at the baseline end and rounded at the far end. */
.category-rank-bar[b-2yngq8oaw9] {
    height: 0.625rem;
    border-radius: 0 0.3125rem 0.3125rem 0;
}

.category-rank-value[b-2yngq8oaw9] {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* PBI #12096 (DW-01) — a row that names its category is a native button, and the button is the row's subgrid,
   so the three tracks line up exactly as they did when the row was inert. The button is reset to the row: no
   fill, no edge, the list's own type and foreground. */
.category-rank-trigger[b-2yngq8oaw9] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    min-width: 0;
    /* The house floor (ui-responsive-adaptive.md, "Touch targets"): every row's hit area is at least 24px tall. */
    min-block-size: 24px;
    margin: 0;
    padding-block: 0;
    padding-inline: var(--rr-space-1);
    border: 0;
    border-radius: var(--rr-radius-sm);
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: var(--rr-duration-micro);
    transition-timing-function: var(--rr-ease-out);
}

/* Hover is the ROW's, and a fill only (ui-shell-chrome.md §15.2's treatment on a page's own content): no ring,
   no shadow, no size or foreground change. The card itself carries no hover at all, so a lifted row is the one
   thing on the widget that answers the pointer — a reader can tell a clickable row from the card around it. */
.category-rank-trigger:hover[b-2yngq8oaw9] {
    background-color: var(--kendo-color-base-hover);
}

/* Focus is a compact accent ring on :focus-visible only (§15.3), tight to the row's border box. The user agent's
   own outline is suppressed as a TRANSPARENT outline, never none, so forced-colors mode still repaints one
   (§15.5). */
.category-rank-trigger:focus[b-2yngq8oaw9] {
    outline: var(--rr-hairline) solid transparent;
}

.category-rank-trigger:focus-visible[b-2yngq8oaw9] {
    box-shadow: inset 0 0 0 2px var(--kendo-color-primary-on-subtle);
}

/* The drill-in panel's content — one store per row: the store at the left, its figure at the right, in the
   widget's own caption type and tabular figures. The app-bar store (the one the ranked list was drawn for) takes
   the medium weight, so the row that matches the widget's figure is findable at a glance. */
.category-drill-in-stores[b-2yngq8oaw9] {
    display: flex;
    flex-direction: column;
    gap: var(--rr-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--rr-text-caption);
    line-height: var(--rr-text-caption-leading);
}

.category-drill-in-store[b-2yngq8oaw9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rr-space-2);
    min-width: 0;
}

.category-drill-in-store-name[b-2yngq8oaw9] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.category-drill-in-store-value[b-2yngq8oaw9] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.category-drill-in-store-selected[b-2yngq8oaw9] {
    font-weight: var(--rr-text-weight-medium);
}

.category-drill-in-store-note[b-2yngq8oaw9] {
    color: var(--kendo-color-subtle);
    font-weight: var(--rr-text-weight-regular);
}

.category-drill-in-message[b-2yngq8oaw9] {
    margin: 0;
    font-size: var(--rr-text-caption);
    line-height: var(--rr-text-caption-leading);
}
/* /Features/Home/Components/WidgetDrillInPanel.razor.rz.scp.css */
/* WidgetDrillInPanel — PBI #12096 (DW-01). Tokens only; this file defines no custom property and no colour.

   A drill-in is a panel: --rr-radius-lg and --rr-elevation-2 are ui-shell-chrome.md §8's panel-and-popover roles,
   the same pair RRDialog takes. The fill is the CARD plane (--kendo-color-app-surface, §4) with its own
   foreground, because the panel is laid over a widget card and reads as that card's surface lifted, not as the
   content region (--kendo-color-surface) punched through it.

   Fluid at every tier (ui-responsive-adaptive.md, Layer 1): the panel is inset into its host's box and takes
   no width or height of its own, so it is exactly as wide as the widget at any tier and scrolls inside
   itself when the store list is taller than the card. */

/* The click-outside catcher. Transparent and full-viewport; it sits under the panel and under the sticky
   AppBar (z-index 1000, app.css), so a press on the AppBar still reaches the AppBar. */
.widget-drill-in-backdrop[b-ygz5zrpd78] {
    position: fixed;
    inset: 0;
    z-index: 2;
    background-color: transparent;
}

.widget-drill-in-panel[b-ygz5zrpd78] {
    position: absolute;
    inset: 0;
    z-index: 3;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    overflow: hidden;
    border: var(--rr-hairline) solid var(--kendo-color-border);
    border-radius: var(--rr-radius-lg);
    background-color: var(--kendo-color-app-surface);
    color: var(--kendo-color-on-app-surface);
    box-shadow: var(--rr-elevation-2);
    animation-name: widget-drill-in-enter-b-ygz5zrpd78;
    animation-duration: var(--rr-duration-enter);
    animation-timing-function: var(--rr-ease-decelerate);
}

/* The panel takes programmatic focus on open (tabindex -1) so Escape is raised inside it; that focus is not a
   keyboard landing on a control, so it paints no ring. Its controls keep theirs. */
.widget-drill-in-panel:focus[b-ygz5zrpd78] {
    outline: var(--rr-hairline) solid transparent;
}

.widget-drill-in-header[b-ygz5zrpd78] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rr-space-2);
    padding-block: var(--rr-space-2);
    padding-inline: var(--rr-space-3);
    border-block-end: var(--rr-hairline) solid var(--kendo-color-border);
}

.widget-drill-in-heading[b-ygz5zrpd78] {
    min-inline-size: 0;
}

.widget-drill-in-title[b-ygz5zrpd78] {
    margin: 0;
    font-size: var(--rr-text-body);
    line-height: var(--rr-text-body-leading);
    font-weight: var(--rr-text-weight-medium);
    overflow-wrap: anywhere;
}

.widget-drill-in-subtitle[b-ygz5zrpd78] {
    margin: 0;
    color: var(--kendo-color-subtle);
    font-size: var(--rr-text-caption);
    line-height: var(--rr-text-caption-leading);
}

.widget-drill-in-close-glyph[b-ygz5zrpd78] {
    font-size: var(--rr-glyph-paired);
    line-height: 1;
}

.widget-drill-in-body[b-ygz5zrpd78] {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    padding-block: var(--rr-space-2);
    padding-inline: var(--rr-space-3);
}

.widget-drill-in-footer[b-ygz5zrpd78] {
    flex: 0 0 auto;
    padding-block: var(--rr-space-2);
    padding-inline: var(--rr-space-3);
    border-block-start: var(--rr-hairline) solid var(--kendo-color-border);
}

/* The house floor (ui-responsive-adaptive.md, "Touch targets"): the link's hit area is at least 24px tall. */
.widget-drill-in-link[b-ygz5zrpd78] {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
}

/* Phone tier — the close button and the onward link are the panel's two primary touch actions, so they take
   the 44px role. The tier class is the board's (Dashboard.razor, from DeviceTierWatcher), so no breakpoint
   number lives here. */
.dashboard-board-phone .widget-drill-in-close[b-ygz5zrpd78]  .rr-button {
    min-block-size: 44px;
    min-inline-size: 44px;
}

.dashboard-board-phone .widget-drill-in-link[b-ygz5zrpd78] {
    min-block-size: 44px;
}

@keyframes widget-drill-in-enter-b-ygz5zrpd78 {
    from {
        opacity: 0;
        transform: translateY(var(--rr-space-1));
    }

    to {
        opacity: 1;
        transform: none;
    }
}
/* /Features/InventoryManagement/Components/ItemsSummaryBand.razor.rz.scp.css */
/* PBI IM-04 (#12729) — design reference §2 "Summary band". Tokens only; the design's light-mode literals pick
   the token, they are not copied. Card plane, hairline and radius match RRCard so the band reads as the
   product's own cards; the padding is the design's 12px 14px taken to the nearest ramp role. */
.items-summary-band[b-xm9r0c73as] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rr-space-3);
    margin-block-end: var(--rr-space-3);
}

.items-summary-card[b-xm9r0c73as] {
    box-sizing: border-box;
    /* flex: 1 1 0 fills the row evenly; the min-inline-size lets three cards wrap on a phone rather than
       compress past legibility (ui-responsive-adaptive.md — fluid fill, no fixed layout width). */
    flex: 1 1 0;
    min-inline-size: 10rem;
    padding: var(--rr-space-3);
    border: var(--rr-hairline) solid var(--kendo-color-border-decorative);
    border-radius: var(--rr-radius-md);
    background-color: var(--kendo-color-app-surface);
    color: var(--kendo-color-on-app-surface);
}

:root[data-rr-mode="dark"] .items-summary-card[b-xm9r0c73as] {
    background-color: var(--kendo-color-surface);
}

.items-summary-label[b-xm9r0c73as] {
    font-size: var(--rr-text-caption);
    color: var(--kendo-color-base-on-subtle);
}

.items-summary-value[b-xm9r0c73as] {
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    font-weight: var(--rr-text-weight-regular);
}

.items-summary-value--warning[b-xm9r0c73as] {
    /* Weight AND colour, never colour alone (design reference §4). */
    color: var(--kendo-color-warning-on-subtle);
    font-weight: var(--rr-text-weight-medium);
}

.items-summary-note[b-xm9r0c73as] {
    margin-block-start: var(--rr-space-1);
    font-size: var(--rr-text-caption);
    color: var(--kendo-color-base-on-subtle);
}
/* /Features/InventoryManagement/Components/SectionMoreMenu.razor.rz.scp.css */
/* PBI IM-04 (#12729) — the rail's More menu. Sits at the trailing edge of the 38px rail band. Tokens only. */
.section-more[b-6ths6a4lwt] {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 2;
}

.section-more-trigger[b-6ths6a4lwt] {
    display: inline-flex;
    align-items: center;
    gap: var(--rr-space-1);
    block-size: 38px;
    padding: 0 10px;
    border: 0;
    background: var(--kendo-color-app-surface);
    color: var(--kendo-color-base-on-subtle);
    font: inherit;
    font-size: var(--rr-text-secondary);
    cursor: pointer;
}

.section-more-trigger:hover[b-6ths6a4lwt] {
    background-color: var(--kendo-color-base-hover);
}

.section-more-trigger:focus-visible[b-6ths6a4lwt],
.section-more-item:focus-visible[b-6ths6a4lwt] {
    outline: var(--rr-hairline) solid var(--kendo-color-primary);
    outline-offset: calc(var(--rr-hairline) * -2);
}

.section-more-caret[b-6ths6a4lwt] {
    border-inline: 4px solid transparent;
    border-block-start: 5px solid currentColor;
}

/* A transparent full-viewport layer under the panel: a click anywhere else closes the menu without a
   document-level listener. */
.section-more-backdrop[b-6ths6a4lwt] {
    position: fixed;
    inset: 0;
    z-index: 1;
    border: 0;
    background: transparent;
    cursor: default;
}

.section-more-panel[b-6ths6a4lwt] {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    min-inline-size: 14rem;
    padding: var(--rr-space-1);
    border: var(--rr-hairline) solid var(--kendo-color-border-decorative);
    border-radius: var(--rr-radius-md);
    background-color: var(--kendo-color-app-surface);
    box-shadow: var(--kendo-elevation-4, 0 4px 12px rgba(0, 0, 0, 0.12));
}

.section-more-item[b-6ths6a4lwt] {
    padding: var(--rr-space-2) var(--rr-space-3);
    border: 0;
    border-radius: var(--rr-radius-sm);
    background: none;
    color: var(--kendo-color-on-app-surface);
    font: inherit;
    font-size: var(--rr-text-secondary);
    text-align: start;
    cursor: pointer;
}

.section-more-item:hover[b-6ths6a4lwt] {
    background-color: var(--kendo-color-base-hover);
}

/* Weight AND colour mark the selected section, matching the rail's own selected tab. */
.section-more-item--selected[b-6ths6a4lwt] {
    color: var(--kendo-color-primary-on-subtle);
    font-weight: var(--rr-text-weight-medium);
}
/* /Features/InventoryManagement/Components/TabStrip.razor.rz.scp.css */
/* PBI IM-04 (#12729) — the Inventory page's SECTION RAIL (design reference §2, "Section rail").
   Tab: height 38px, padding 0 10px, 13px; selected weight 500 in the accent, unselected 400 muted. The selected
   mark is a 2px underline ON the band's own hairline (left/right 10px, bottom -1px), never a box. Overflow
   scrolls on ONE row (the strip's OverflowMode="Scroll") and every section is also reachable from the More menu.

   ⚠️ Selector shape is load-bearing, exactly as app.css's PBI 6489 block records: that block's rules are
   (0,4,0) on the tab and (0,5,0) on .k-active, and ThemeManager.js re-appends the swatch link after every sheet,
   so an equal-specificity override loses on every non-default swatch. Each selector below carries the page
   class, the strip wrapper class and the full `.k-tabstrip-top > .k-tabstrip-items-wrapper` shape, which takes
   each rule above its app.css counterpart on specificity instead of on source order.

   Tokens only — the design's light-mode literals pick the token that renders at this weight; no colour is
   authored. The accent is primary-on-subtle, not primary, for the 3:1 non-text contrast reason app.css gives. */

.inventory-section-rail[b-9bc54q97t5] {
    position: relative;
}

/* The band: one row, the hairline the selected underline sits on, and room at the trailing edge for the More
   trigger so it never overlaps the last tab or the scroll affordance. */
.inventory-section-rail[b-9bc54q97t5]  .rr-tabstrip .k-tabstrip-top > .k-tabstrip-items-wrapper {
    border-block-end: var(--rr-hairline) solid var(--kendo-color-border-decorative);
    padding-inline-end: 5.5rem;
}

.inventory-section-rail[b-9bc54q97t5]  .rr-tabstrip .k-tabstrip-top > .k-tabstrip-items-wrapper .k-tabstrip-item {
    box-sizing: border-box;
    block-size: 38px;
    padding: 0 10px;
    font-size: var(--rr-text-secondary);
    font-weight: var(--rr-text-weight-regular);
    color: var(--kendo-color-base-on-subtle);
    white-space: nowrap;
}

.inventory-section-rail[b-9bc54q97t5]  .rr-tabstrip .k-tabstrip-top > .k-tabstrip-items-wrapper .k-tabstrip-item.k-active {
    font-weight: var(--rr-text-weight-medium);
    color: var(--kendo-color-primary-on-subtle);
}

/* The mark: 2px (two hairlines), inset 10px to the label's own edges, sitting ON the band's hairline. */
.inventory-section-rail[b-9bc54q97t5]  .rr-tabstrip .k-tabstrip-top > .k-tabstrip-items-wrapper .k-tabstrip-item.k-active::after {
    inset-inline: 10px;
    inset-block-end: calc(var(--rr-hairline) * -1);
    block-size: calc(var(--rr-hairline) * 2);
    border-radius: 0;
}
/* /Features/InvoiceList/Components/InvoiceSummaryBand.razor.rz.scp.css */
/* PBI #11884 (IG-07). Load-bearing on a fill-chain page: the band is a flex item in the page's flex column,
   so `0 0 auto` pins it at content height — it must neither grow nor be shrunk away by the grid claiming the
   remaining height beneath it (the same device as .store-scope-notice in app.css). No fixed width anywhere.

   PBI #12128 (IV-02). The band itself carries no chrome any more: each entry is a separated section, so the
   surface, the hairline edge and the card-role radius move from the band onto every entry, and the
   TelerikStackLayout's Spacing (--rr-space-3, 12px) is the gap between them. Tokens only — the swatch's
   surface and border tokens are what hold the sections in all four theme combinations.

   PBI #12301 (IN-04). The design's card chrome (Claude Design, `Invoices` artboard v23) and its three-line stack.
     edge    --invoices-summary-edge: --kendo-color-border kept at 19%. The swatch's border ink is 0.43 alpha in
             all four combinations, so the card edge draws at ~0.08 alpha in every one of them — the artboard's
             rgba(0,0,0,0.08) — against the 0.43 it drew before (the #12128 measurement). Derived from the
             swatch's own token, as --rr-grid-rule-* is (PBI 12127), so the mode and temperature axes still
             move it; measured in all four combinations by InvoiceSummaryBandChromeTests.
     radius  --rr-radius-md, 10px — the artboard's 10px exactly.
     inset   12px 16px (--rr-space-3 / --rr-space-4). The artboard pads 12px 14px; 14px is not a step of the
             four-step ramp (ui-shell-chrome.md §8: a surface picks a role, not a number), so the nearer step.
     rhythm  a flex column at --rr-space-1 (4px), the component-internal step, for the artboard's 3px.
     value   22px (1.375rem, AUTHORED — the --rr-text-* scale has no display-figure role between section, 16px,
             and page title; the precedent is KpiFigureWidget's 1.625rem figure, PBI #12270), tracked -0.01em,
             tabular figures.
     label   the caption role (12px), --kendo-color-subtle — the artboard's muted #686661.
     note    the caption role (12px) — down from the secondary role's 13px, the artboard's size — in a quieter
             ink than the label: --kendo-color-subtle mixed 10% toward the card's own plane. The artboard's
             #8A8782 is ~3.5:1 on its canvas, under WCAG 1.4.3's 4.5:1 for text, so the note is quieter only as
             far as 4.5:1 allows; measured in all four combinations by InvoiceSummaryBandChromeTests. */
.invoices-summary-band[b-zz4vd2uxmc] {
    flex: 0 0 auto;
    margin: 0 0 var(--rr-space-3);
}

.invoices-summary-entry[b-zz4vd2uxmc] {
    --invoices-summary-edge: color-mix(in srgb, var(--kendo-color-border) 19%, transparent);
    --invoices-summary-note-ink: color-mix(in srgb, var(--kendo-color-subtle) 90%, var(--kendo-color-app-surface));
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rr-space-1);
    padding: var(--rr-space-3) var(--rr-space-4);
    background-color: var(--kendo-color-app-surface);
    color: var(--kendo-color-on-app-surface);
    border: var(--rr-hairline) solid var(--invoices-summary-edge);
    border-radius: var(--rr-radius-md);
}

/* In a row the three share the width equally, whatever each note's length, so one long note cannot squeeze
   its neighbours; stacked (phone tier) each entry takes its own content height. */
.invoices-summary-entry-row[b-zz4vd2uxmc] {
    flex: 1 1 0;
}

.invoices-summary-label[b-zz4vd2uxmc],
.invoices-summary-figure[b-zz4vd2uxmc],
.invoices-summary-note[b-zz4vd2uxmc] {
    margin: 0;
}

.invoices-summary-label[b-zz4vd2uxmc] {
    font-size: var(--rr-text-caption);
    line-height: var(--rr-text-caption-leading);
    color: var(--kendo-color-subtle);
}

.invoices-summary-figure[b-zz4vd2uxmc] {
    font-size: 1.375rem;
    line-height: var(--rr-text-section-leading);
    font-weight: var(--rr-text-weight-medium);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* The loading block sits where the value goes; its 24px height against the value line's ~27.5px keeps the card
   from collapsing while nothing is held. The skeleton is Telerik's own, rendered inside this component, so the
   scoped class reaches it through ::deep. */
[b-zz4vd2uxmc] .invoices-summary-skeleton {
    flex: 0 0 auto;
    margin-block: calc((var(--rr-text-section-leading) * 1.375rem - 24px) / 2);
}

.invoices-summary-note[b-zz4vd2uxmc] {
    font-size: var(--rr-text-caption);
    line-height: var(--rr-text-caption-leading);
    color: var(--invoices-summary-note-ink);
}

/* An empty note (the oldest card while its read is in flight) still holds its line, so the card keeps its
   answered height. */
.invoices-summary-note:empty[b-zz4vd2uxmc]::before {
    content: "\00a0";
}

.invoices-summary-unavailable[b-zz4vd2uxmc] {
    font-size: var(--rr-text-secondary);
    line-height: var(--rr-text-secondary-leading);
    color: var(--kendo-color-subtle);
}

.invoices-summary-unavailable[b-zz4vd2uxmc] {
    flex: 0 0 auto;
    margin: 0 0 var(--rr-space-3);
}
/* /Features/ItemVelocityClassification/Page.razor.rz.scp.css */
/* BUG 8224 — the Item Velocity page's own vertical track allocation.
   ==================================================================

   THE DEFECT. `card-body rr-grid-fill` is a bounded, viewport-derived flex column (the shell chain in
   NavMenu.razor bounds it via :has(.rr-grid-fill); `.rr-grid-fill` in app.css makes it a flex column).
   Its children were the configuration panel, the metric strip and the grid host, and only the grid host
   was shrinkable — `.rr-grid-fill` gives it `flex: 1 1 auto` with `min-height: 0`, while the panel and
   the strip sit at the flex default `min-height: auto` and so never shrink below their content. So when
   the panel expanded from one summary line to an eight-row definition list (or an eight-item form), the
   whole of the deficit landed on the grid: below one row, and unreachable, because WS-RF-02 (#4340)
   deliberately scrolls inside the content region rather than the browser page.

   THE REMEDY, and why it is a track allocation rather than a `min-height` on the grid. A floor on the
   grid alone leaves the overflow with nowhere to go: the siblings above it cannot shrink, so the content
   simply exceeds the bounded card and this page has no scroll of its own to reach it. Three explicit
   tracks fix every half at once — one track that shrinks and scrolls itself (the configuration panel),
   one sized to its content that never shrinks (the metric strip), one with a floor (the grid).

   WHY THE METRIC STRIP IS A TRACK OF ITS OWN and not part of the yielding one. The first cut grouped the
   strip in with the configuration panel, because the two are the pair whose growth the grid used to
   absorb. That grouping is wrong for a track that scrolls: once the floor below was raised far enough
   that track 1 genuinely yielded, the strip — the last thing in that track — scrolled out of view
   whenever the panel was open. Measured at 1377x868 with the panel expanded, the track's visible box was
   238px against 465px of content and the strip sat at y=551, entirely below the track's 436px bottom
   edge. The strip is the aggregate readout of the classification the configuration produces, and this
   Bug's Symptom is "change a threshold, see which items move band" — so it is precisely the thing that
   may not disappear when the configuration is open. Only the panel goes in the track that yields.

   WHAT IS DELIBERATELY NOT DONE HERE.
   - The page is NOT released to scroll as a whole. `rr-grid-fill` and internal scrolling are WS-RF-02
     decisions of record; the grid still scrolls inside `.k-grid-content` with its toolbar, headers and
     pager pinned, and the configuration track scrolls inside itself.
   - Nothing touches the shell. `MainLayout.razor` and app.css's `html, body` / `#app` height rules are
     #7773's, which establishes the floor under the CONTENT REGION and bars itself from any Features/
     page. The two are complementary: #7773 decides how much height this container gets, this file
     decides how that height is divided inside it.
   - No `--rr-*` token is authored or changed. The one custom property below is page-local and carries no
     `--rr-` prefix precisely so it cannot be mistaken for a shell token step.
   - This is a Features/ page's own layout, not shell chrome, so `ui-shell-chrome.md` §5 ("shell chrome
     lives in app.css") does not route it there — and keeping it out of app.css also keeps it clear of
     both frozen regions of that file. */

.ivc-fill-tracks[b-eeap9xsm7u] {
    /* DERIVED FROM MEASUREMENT, not from Telerik's nominal sizing — the first cut of this floor was
       18rem and it is what shipped 0 full rows. It assumed a data row of roughly 30-50px; the rows on
       THIS grid are 96px, about three times a normal Telerik medium row, because the classification
       columns wrap. The arithmetic below is re-derived from the rendered page at 1377x868 with the
       Configuration panel expanded:

         grid track (the 18rem floor, honoured)                 288px
         less the grid host's own `mt-3`, live at that cut      -16px  ->  host 272px
         less the measured `.k-grid-content`                    -33px  ->  chrome 239px

       So the grid's fixed chrome — the four-tab strip, the TreeList toolbar, the column-header row and
       the pager — costs 239px, which is very close to the 236px the first cut estimated. The chrome was
       never the error; the row was. One full 96px row therefore needs a host of 239 + 96 = 335px
       (20.94rem) before any slack at all, which 18rem could not reach by construction.

       24rem (384px) gives 145px of `.k-grid-content` — one 96px row with 49px to spare. The slack is
       deliberate rather than tuned to 96: PBI #8258 is changing header wrapping in the same batch, and a
       floor cut to the exact measured row would be one wrapped header line away from failing again.
       49px is roughly two extra header lines, or a row that grows by half again.

       It remains a MINIMUM, not a height: with the panel collapsed the grid still takes everything the
       configuration track does not want, so the collapsed view shows no fewer rows than before.
       Expressed in rem so it tracks the reader's font size, like the height it is a floor on.

       PBI #11821 — AC 6 (a floor of fixed grid chrome plus eight data rows) IS DEFERRED TO THE BA
       (comment 21139268 on #11821), and this is the #8224 floor again. Eight rows need a host of ~1047px
       (279px of grid chrome + 8 x 96px wrapped rows). The shipped 67rem floor did not fit: measured on dev
       at 2048x927 the three-track container is 704px and computed `0px 145.1px 1072px`, so the
       configuration track was sized to 0px and its summary disappeared. On laptop viewports the space left
       after the configuration summary (~122px), the metric strip (~146px) and the gaps (32px) is ~404px,
       so eight rows cannot sit beside the tracks the other criteria keep on screen. A height-conditioned
       floor is a per-page breakpoint, which ui-responsive-adaptive.md forbids (PR 3623, abandoned), so the
       floor stays one rem literal. */
    --ivc-grid-floor: 24rem;

    display: grid;

    /* Three tracks, and each sizing function is doing one specific job:

         minmax(0, auto)                        track 1, the configuration panel. Max is its content
                                                height so it takes what it needs; min is ZERO so grid may
                                                size it below that and it scrolls inside itself. This is
                                                the only track that yields.
         auto                                   track 2, the metric strip. Min is min-content, so grid
                                                may never size it below the strip's own height — the
                                                strip is on screen in every panel state, which is the
                                                whole reason it is not inside track 1.
         minmax(var(--ivc-grid-floor), 1fr)     track 3, the grid. Floored below, and takes the whole
                                                remainder above, so the collapsed state loses nothing.

       THE ARITHMETIC AT 1377x868, the reported viewport, measured with the panel expanded:

         bounded container (measured 238 + 16 gap + 384 grid, cycle 1)      638px
         less two 1rem row gaps                                             -32px
         less track 3 at its floor                        24rem            -384px
         less track 2, the metric strip                                     -96px
                                                                          -------
         leaves track 1, the configuration panel                            126px

       Track 1's content is ~353px (the 465px measured content of the old combined track, less the 96px
       strip and the 16px `mt-3` that used to separate them), so it is sized well below its content and
       scrolls — which is exactly what `minmax(0, auto)` plus `overflow-y: auto` is for, and what the
       simultaneous view costs. The 126px is the number to re-measure in the browser; the three fixed
       terms above it are not adjustable without giving up something the criteria protect.

       NOTE ON THE MARGIN REMOVAL (PR review). This arithmetic has always been written as though the two
       Bootstrap margins were gone; until that review they were not, because the rules zeroing them lacked
       the `!important` needed to beat Bootstrap's own. Their 32px came off track 1 and nothing else — the
       floored track is floored on the ELEMENT, and the strip's track is sized to content plus its margin
       — so the effect was a configuration panel ~32px shorter than this sum says, scrolling that much
       more. Removing the classes makes the sum above true rather than changing what the criteria see:
       tracks 2 and 3 are unchanged, and track 1 can only grow. */
    grid-template-rows: minmax(0, auto) auto minmax(var(--ivc-grid-floor), 1fr);

    /* The 16px that used to be the grid host's `mt-3` margin and the metric strip's `mb-3`, moved onto the
       container so it applies between every pair of tracks. Both Bootstrap classes are REMOVED from the
       markup (Page.razor, VelocityMetricStrip.razor) rather than overridden here — Bootstrap 5.3.3 ships
       every spacing utility with `!important`, so a scoped `margin: 0` in this file loses to it whatever
       its specificity, and this file carried exactly that dead pair until PR review caught it. Removing
       the class is also the honest form: the spacing is declared once, in the container that owns the
       track allocation. Literal rather than a spacing token: the `--rr-*` set is frozen for this Bug and
       this file authors no shell token. */
    row-gap: 1rem;

    /* This container is what fills the bounded `card-body rr-grid-fill` column, so it inherits the two
       obligations every link in a fill chain carries (app.css, WS-RF-02): grow into the region, and be
       allowed to shrink below its content height. */
    flex: 1 1 auto;
    min-height: 0;
}

/* Track 3 — the grid host, and the half of the floor the track sizing alone does not deliver.
   `minmax(var(--ivc-grid-floor), 1fr)` floors the TRACK, and a margin on the item sits inside that track
   box — so while the host carried Bootstrap's `mt-3` the host was 16px shorter than the floor promised
   (288px track, 272px host, measured at the 18rem cut). The `mt-3` is now gone from the markup and the
   container's `row-gap` carries that spacing, so the track box and the host box are the same box.

   `min-height` here restates the track's floor ON the element. That is NOT the "min-height on the grid
   alone" remedy the header rejects — that one fails because the siblings above cannot yield, and here
   the configuration track both can and does: once the floor exceeds the space left over, track 1 is
   sized below its content height and scrolls inside itself, which is precisely the yield this page
   needs. The declaration is belt-and-braces for the case where the container is shorter than the two
   tracks want, so the height comes off the track that has somewhere to put it.

   IT IS ALSO WHAT KEPT THE MEASURED LAYOUT HONEST WHILE THE `mt-3` WAS STILL LIVE, and that is worth
   recording because it is the only reason a dead `margin-top: 0` in this file went unnoticed. A margin
   is outside the border box, so `mt-3` could never pull the HOST below this `min-height`; it grew the
   TRACK to 400px instead, and the 16px came off track 1 — the only track that yields — which simply
   scrolled a little more. The rendered measurement at 1377x868 (host 384px, `.k-grid-content` 145px =
   384 less the 239px of grid chrome) is what says so: the host was at the full floor, not 16px under it.
   The margin cost the configuration panel, never the grid, which is why every criterion still held. */
.ivc-fill-tracks > .rr-grid-fill[b-eeap9xsm7u] {
    min-height: var(--ivc-grid-floor);
}

/* Track 1 — the configuration panel, and ONLY the configuration panel.
   `minmax(0, auto)` above is what lets grid size this track down when the container is short: the max is
   the content height, the min is zero, so it takes what it needs and yields the rest to the floored
   track rather than pushing it out. `overflow-y: auto` is where the yielded height goes — the panel
   stays fully readable by scrolling this track, with the grid still on screen beside it, which is the
   simultaneous view the page exists to give. `min-height: 0` is the same fill-chain rule as above.

   Nothing else may be put in here. Anything in this track is scrolled out of view when the panel is
   open, which is fine for the panel's own lower half (the operator is scrolling the thing they opened)
   and wrong for anything the operator is meant to be reading WHILE the panel is open. The metric strip
   was in here and is now track 2 for exactly that reason. */
.ivc-config-track[b-eeap9xsm7u] {
    min-height: 0;
    overflow-y: auto;
}

/* BUG 9304 — the host for a contained child's inline placeholder, in whichever track that child stands in.
   Copied from WidgetCard.razor's `.widget-error`, which is the shipped instance of this shape, and reduced
   to what a track host needs: that one centres its banner in a fixed-height tile, while these three tracks
   are already sized by `grid-template-rows` above and simply hand the placeholder the width they have.

   FLUID BY CONSTRUCTION (ui-responsive-adaptive.md Layer 1 / Bucket L). There is no width here and there is
   no `px` anywhere in the rule: the placeholder fills its track's inline size, and `min-width: 0` is the
   same "may shrink below content" obligation the fill chain carries everywhere else in this file — without
   it the banner's own text would establish a min-content floor and put a horizontal scroll on a narrow
   window. The padding is vertical only, in rem, and is spacing rather than a layout dimension: the tracks'
   own `row-gap` handles the gaps BETWEEN tracks, and this keeps the banner off the track's edges when it
   stands in for a panel that had its own padding. AlertBanner's root is `flex: 1 1 0%`, so it stretches as
   a flex child of this box — which is the reason both shipped instances wrap it in a plain div rather than
   dropping it into the slot bare. */
.ivc-child-error[b-eeap9xsm7u] {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding-block: 0.5rem;
}

/* Track 2 — the metric strip — HAS NO RULE OF ITS OWN, and that is the whole design rather than an
   omission. The `auto` sizing in `grid-template-rows` above cannot size the track below the strip's
   min-content height, and with no `min-height: 0` and no `overflow` declared anywhere for it, the strip
   is on screen at its natural height in every panel state, expanded or collapsed. Every declaration that
   would weaken that is one this file deliberately does not write, so there is nothing left to write.

   The strip's Bootstrap `mb-3` USED to be zeroed here, through a `::deep` descendant rule, so that it
   would not double the container's `row-gap`. That rule never worked: Bootstrap 5.3.3 ships
   `.mb-3 { margin-bottom: 1rem !important }`, and `!important` beats a scoped declaration at any
   specificity — Blazor's `[b-…]` attribute raises specificity, which is not the axis that decides this.
   The class is removed from VelocityMetricStrip.razor instead, which is both the fix and the reason no
   rule belongs here. If a spacing utility reappears on that markup, remove it there; do not try to win
   the cascade from this file. `PageGridFloorTests` guards the markup for exactly that reason. */
/* /Features/PromotionOffers/Components/ConditionListDisclosure.razor.rz.scp.css */
/* The card-level disclosure, and the region headers its body carries.

   No literal colour and no fixed-pixel LAYOUT width: every value is a shell token
   (ui-shell-chrome.md §8 / §13) or a relative unit. The pixel figures that do appear are a control
   box's own min-height / min-width and a glyph's step, which ui-responsive-adaptive.md's Layer 1
   does not reach — it prohibits a fixed width on a layout-bearing surface, and names the mechanism
   for a touch floor as "an explicit min-width / min-height on the box".

   `::deep` is required for anything rendered by another component — Telerik's own elements and the
   region headers that arrive as ChildContent carry a different scope attribute, so a bare selector
   would never match them. Same note PresetGallery.razor.css carries. */

.list-disclosure-header[b-t6qgxprspi] {
    display: flex;
    align-items: center;
    gap: var(--rr-space-2, 8px);
    width: 100%;
}

/* The toggle covers everything left of the trash. Bucket L: it grows with the row and declares no
   width of its own. */
.list-disclosure-toggle[b-t6qgxprspi] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--rr-space-2, 8px);
    /* WCAG 2.5.5 AAA: at the phone tier this row is the only way to reach the list it names, so it
       takes the 44px role rather than the 24px house floor. Met on the box, never on the glyph
       (ui-responsive-adaptive.md -> Touch targets). */
    min-width: 44px;
    min-height: 44px;
    padding: var(--rr-space-1, 4px) var(--rr-space-2, 8px);
    border: none;
    border-radius: var(--rr-radius-sm, 4px);
    background: var(--kendo-color-base);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

/* Hover is a soft fill in the neutral hover token and nothing else — no ring, no shadow, no size
   or foreground change (ui-shell-chrome.md §15.2). --kendo-color-base-subtle is expressly NOT the
   token: it measures no contrast at all in dark mode. */
.list-disclosure-toggle:hover[b-t6qgxprspi] {
    background: var(--kendo-color-base-hover);
}

/* :focus-visible only — Telerik and the user agent both set :focus on a mouse click, which would
   ring the control on every press. A compact inset ring in the on-subtle primary token, one
   declaration for both modes (ui-shell-chrome.md §15.3). The outline is made transparent rather
   than removed, so forced-colors mode still paints one. */
.list-disclosure-toggle:focus-visible[b-t6qgxprspi] {
    outline: 2px solid transparent;
    box-shadow: inset 0 0 0 2px var(--kendo-color-primary-on-subtle);
}

.list-disclosure-ordinal[b-t6qgxprspi] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: var(--rr-hairline, 1px) solid var(--kendo-color-border);
    border-radius: var(--rr-radius-sm, 4px);
    font-size: var(--rr-text-caption, 12px);
}

/* A heading inside a page — §13's section role. */
.list-disclosure-title[b-t6qgxprspi] {
    flex: 0 1 auto;
    overflow: hidden;
    font-size: var(--rr-text-section, 16px);
    font-weight: var(--rr-text-weight-medium, 500);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The de-emphasized pairing §13 gives every subtitle and hint: the secondary step at the subtle
   colour. It takes the row's slack so the ellipsis lands on the summary rather than on the name. */
.list-disclosure-summary[b-t6qgxprspi] {
    /* min-width: 0 is what lets the ellipsis engage — a flex item defaults to min-width: auto and
       refuses to shrink below its own content, so the row would overflow instead of truncating. */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--kendo-color-subtle);
    font-size: var(--rr-text-secondary, 13px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* margin-inline-start: auto keeps the chevron on the trailing edge whether or not a summary is
   rendered — an open row has none, and without this the chevron would slide left. */
.list-disclosure-chevron[b-t6qgxprspi] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin-inline-start: auto;
}

/* §8's paired step: a glyph with text beside it is 20px, and the touch floor is met by the box
   above rather than by growing this. */
.list-disclosure-chevron[b-t6qgxprspi]  .k-svg-icon {
    width: var(--rr-glyph-paired, 20px);
    height: var(--rr-glyph-paired, 20px);
}

.list-disclosure-actions[b-t6qgxprspi] {
    flex: 0 0 auto;
}

.list-disclosure-body[b-t6qgxprspi] {
    margin-top: var(--rr-space-3, 12px);
}

/* The lettered region headers. They arrive as ChildContent from the list editor, so they carry that
   component's scope attribute and are reached through ::deep. */
.list-disclosure-body[b-t6qgxprspi]  .deal-region-header {
    display: flex;
    align-items: center;
    gap: var(--rr-space-2, 8px);
    width: 100%;
}

.list-disclosure-body[b-t6qgxprspi]  .deal-region-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: var(--rr-hairline, 1px) solid var(--kendo-color-border);
    border-radius: var(--rr-radius-sm, 4px);
    color: var(--kendo-color-subtle);
    font-size: var(--rr-text-caption, 12px);
}

/* Caption role — chips, counts and metadata (§13) — uppercased and tracked, which is the
   difference between a region label and a heading. */
.list-disclosure-body[b-t6qgxprspi]  .deal-region-label {
    flex: 0 0 auto;
    color: var(--kendo-color-subtle);
    font-size: var(--rr-text-caption, 12px);
    font-weight: var(--rr-text-weight-medium, 500);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* The rule runs to the right edge. One border weight in the shell, and emphasis comes from the
   colour token rather than a thicker line (§8). */
.list-disclosure-body[b-t6qgxprspi]  .deal-region-rule {
    flex: 1 1 auto;
    min-width: 0;
    border-top: var(--rr-hairline, 1px) solid var(--kendo-color-border);
}
/* /Features/PromotionOffers/Components/DealStep.razor.rz.scp.css */
/* BUG #12688: the offer-level reward region's heading - the step's section weight, not a third size. */
.deal-offer-reward-heading[b-thqgtihd8y] {
    font-size: var(--rr-text-section);
    line-height: var(--rr-text-section-leading);
    font-weight: var(--rr-text-weight-medium);
}
/* /Features/PromotionOffers/Components/PresetGallery.razor.rz.scp.css */
/* Preset gallery — Bucket L geometry only. No fixed-pixel LAYOUT width, no literal colour: every value
   is a shell token (ui-shell-chrome.md) or a relative unit. The 40px glyph square and the button floors
   below are component-internal geometry the standards name by role, not layout widths.

   `::deep` is required for anything Telerik renders — those elements do not carry this component's
   scope attribute, so a bare `.preset-card` rule would never match the card it is applied to. Same
   note BarcodeAmbiguityChooser.razor.css carries. Elements this component authors itself — the rows,
   the copy stack, the glyph square — DO carry the attribute even inside a Telerik ChildContent, so
   they are styled without it. */

.preset-gallery[b-5ox0xcr7vk] {
    width: 100%;
    max-width: 100%;
}

/* The lead paragraph is unchanged and sits above the card, on a measure a reader's eye can return
   from (ui-shell-chrome.md §13 — the body role). */
.preset-gallery-lead[b-5ox0xcr7vk] {
    max-width: 74ch;
    margin-bottom: var(--rr-space-3, 12px);
    font-size: var(--rr-text-secondary, 13px);
    color: var(--kendo-color-subtle);
}

/* One card holding the whole list. The tracks are a single 1fr, set on the GridLayout itself; this only
   stops the grid asking for more room than its container has, which is what produces a horizontal
   page scroll. */
.preset-gallery[b-5ox0xcr7vk]  .preset-gallery-card,
.preset-gallery[b-5ox0xcr7vk]  .preset-gallery-grid {
    width: 100%;
    max-width: 100%;
}

/* ── One row ─────────────────────────────────────────────────────────────────────────────────────
   The separator is a TOP hairline on every row but the first, so the list reads as separated rather
   than boxed and the card's own edge is not doubled. One border weight in the shell — emphasis comes
   from a stronger colour token, never a thicker line (ui-shell-chrome.md §8). */
.preset-row[b-5ox0xcr7vk] {
    display: flex;
    align-items: flex-start;
    gap: var(--rr-space-3, 12px);
    padding: var(--rr-space-3, 12px) 0;
    border-top: var(--rr-hairline, 1px) solid var(--kendo-color-border);
}

.preset-row-first[b-5ox0xcr7vk] {
    border-top: none;
}

/* The last row is the empty builder. It is a row of the same list, marked by its ground rather than by
   a rule or a second plane. */
.preset-row-empty[b-5ox0xcr7vk] {
    background: var(--kendo-color-base);
}

/* ── The glyph square ────────────────────────────────────────────────────────────────────────────
   A quiet 40 x 40 square at the card radius. No per-preset colour anywhere: ui-grid-chrome.md's
   "Color" makes a new colour variant a new swatch, never per-page CSS, and there is no literal hex
   here. */
.preset-row-glyph[b-5ox0xcr7vk] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--rr-radius-md, 6px);
    background: var(--kendo-color-base);
    color: var(--kendo-color-subtle);
}

/* On the empty-builder row the row's own ground is --kendo-color-base, so the square takes the surface
   token instead and keeps a hairline — a square painted on its own colour would not read as one. */
.preset-row-empty .preset-row-glyph[b-5ox0xcr7vk] {
    background: var(--kendo-color-app-surface);
    border: var(--rr-hairline, 1px) solid var(--kendo-color-border);
}

/* The glyph carries meaning alone, with no label beside it, so it takes §8's sole-carrier step. The
   selector is (0,3,0) plus the scope attribute against Kendo's (0,2,0) `.k-svg-icon.k-icon-md`, so it
   wins on specificity rather than on the swatch link's load order — the same note
   SyncStatusIndicator.razor carries. */
.preset-gallery[b-5ox0xcr7vk]  .k-svg-icon.preset-row-glyph-mark {
    width: var(--rr-glyph-solo, 24px);
    height: var(--rr-glyph-solo, 24px);
}

/* ── The copy stack ──────────────────────────────────────────────────────────────────────────────
   Name at the section role, description at the secondary role, and the example at the caption role —
   ui-shell-chrome.md §13's scale, one step per role, line height included. */
.preset-row-copy[b-5ox0xcr7vk] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.preset-row-name[b-5ox0xcr7vk] {
    font-size: var(--rr-text-section, 16px);
    line-height: var(--rr-text-section-leading, 1.25);
    font-weight: var(--rr-text-weight-medium, 500);
    overflow-wrap: anywhere;
}

.preset-row-description[b-5ox0xcr7vk] {
    margin: 0;
    font-size: var(--rr-text-secondary, 13px);
    line-height: var(--rr-text-secondary-leading, 1.4);
    color: var(--kendo-color-subtle);
    overflow-wrap: anywhere;
}

.preset-row-reads-as[b-5ox0xcr7vk] {
    margin-top: var(--rr-space-1, 4px);
    font-size: var(--rr-text-caption, 12px);
    line-height: var(--rr-text-caption-leading, 1.25);
    color: var(--kendo-color-subtle);
    overflow-wrap: anywhere;
}

/* ── The action ──────────────────────────────────────────────────────────────────────────────────
   The button is the hit target and the row is not, so the floor sits on the control itself rather than
   on the row (ui-shell-chrome.md §15.5). */
.preset-row-action[b-5ox0xcr7vk] {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
}

/* House floor is 24 x 24 at every tier (ui-responsive-adaptive.md — "Touch targets"); 36px clears it
   with room and is the desktop role this surface takes. */
.preset-gallery[b-5ox0xcr7vk]  .preset-card-choose,
.preset-gallery[b-5ox0xcr7vk]  .preset-gallery-skip-button {
    min-height: 36px;
    min-width: 36px;
}

/* ── The phone stack ─────────────────────────────────────────────────────────────────────────────
   Driven by the shared Breakpoint helper's class rather than a media query here, so the tier is read in
   one place for the whole component. Each row becomes a vertical stack and the button goes full width
   at the phone-tier primary-action role: 44 x 44, WCAG 2.5.5 AAA. */
.preset-row-stacked[b-5ox0xcr7vk] {
    flex-direction: column;
    align-items: stretch;
}

.preset-row-stacked .preset-row-action[b-5ox0xcr7vk] {
    align-items: stretch;
}

.preset-row-stacked[b-5ox0xcr7vk]  .preset-card-choose,
.preset-row-stacked[b-5ox0xcr7vk]  .preset-gallery-skip-button {
    width: 100%;
    min-height: 44px;
    min-width: 44px;
}
/* /Features/Reports/Components/ReportExportMenu.razor.rz.scp.css */
.report-export-menu[b-9nd3og9ffw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.report-export-menu-reason[b-9nd3og9ffw] {
    font-size: 0.875rem;
}
/* /Features/Reports/Components/SalesSummaryTrendChart.razor.rz.scp.css */
/* SalesSummaryTrendChart — PBI SM-40 (#11235). Tokens only: this file defines no custom property and no
   colour. Series marks take the swatch's series-a / series-b slots; text, gridlines and the legend take
   the swatch's foreground and border tokens, so all four theme combinations are the swatch's. The height
   is relative to the type scale rather than a pixel literal (ui-responsive-adaptive.md, no fixed-pixel
   scaffolding); the width is the container's. */

.ss-trend-chart[b-7qth2mtdtp] {
    margin: 0 0 var(--rr-space-4);
}

.ss-trend-title[b-7qth2mtdtp] {
    font-weight: var(--rr-text-weight-medium);
    margin-bottom: var(--rr-space-2);
}

.ss-trend-svg[b-7qth2mtdtp] {
    display: block;
    height: 24rem;
    overflow: visible;
}

.ss-trend-text[b-7qth2mtdtp] {
    fill: var(--kendo-color-on-app-surface);
    font-size: var(--rr-text-caption);
}

.ss-trend-axis-label[b-7qth2mtdtp] {
    font-variant-numeric: tabular-nums;
}

.ss-trend-gridline[b-7qth2mtdtp] {
    stroke: var(--kendo-color-border);
    stroke-width: 1px;
}

.ss-trend-column[b-7qth2mtdtp] {
    fill: var(--kendo-color-series-b);
}

.ss-trend-line[b-7qth2mtdtp] {
    stroke: var(--kendo-color-series-a);
    stroke-width: 2px;
}

.ss-trend-point[b-7qth2mtdtp] {
    fill: var(--kendo-color-series-a);
}

.ss-trend-legend[b-7qth2mtdtp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rr-space-4);
    justify-content: center;
    list-style: none;
    margin: var(--rr-space-2) 0 0;
    padding: 0;
    font-size: var(--rr-text-caption);
}

.ss-trend-legend li[b-7qth2mtdtp] {
    display: inline-flex;
    align-items: center;
    gap: var(--rr-space-2);
}

.ss-trend-swatch[b-7qth2mtdtp] {
    display: inline-block;
    width: var(--rr-space-4);
    height: var(--rr-space-2);
}

.ss-trend-swatch-line[b-7qth2mtdtp] {
    background: var(--kendo-color-series-a);
}

.ss-trend-swatch-column[b-7qth2mtdtp] {
    background: var(--kendo-color-series-b);
}
/* /Features/Reports/CurrentInventoryValuationReport.razor.rz.scp.css */
/* Fluid parameter-band fields: they grow and shrink from a relative basis and wrap when the row runs out
   of room, never a fixed width. ::deep because the band is Telerik stack layouts whose roots and inner
   elements are not all stamped with this component's scope id. */
[b-jabz8dvk3m] .civ-filter-band {
    flex-wrap: wrap;
}

/* Scoped to k-hstack, the class Telerik puts on the StackLayout root while it is a row. In the stacked
   (k-vstack) state the same shorthand would read 14rem as a height floor. */
[b-jabz8dvk3m] .civ-filter-band.k-hstack > .civ-filter-field {
    flex: 1 1 14rem;
    min-width: 0;
}

[b-jabz8dvk3m] .civ-filter-band.k-hstack > .civ-filter-field-pivot {
    flex: 0 1 auto;
    min-width: max-content;
}

[b-jabz8dvk3m] .civ-filter-band.k-hstack > .civ-filter-actions {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.civ-validation-message[b-jabz8dvk3m] {
    color: var(--kendo-color-warning);
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.civ-empty-prompt[b-jabz8dvk3m] {
    padding: 24px;
    text-align: center;
    color: var(--kendo-color-subtle);
}

/* The stale band: the result on screen no longer matches the store or date controls. */
.civ-stale-band[b-jabz8dvk3m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 8px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--kendo-color-warning);
    border-radius: 4px;
    color: var(--kendo-color-on-app-surface);
}

.civ-failure[b-jabz8dvk3m] {
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--kendo-color-error);
    border-radius: 4px;
}

/* Totals strip above the detail. Figures wrap; nothing is a fixed pixel width. */
.civ-totals[b-jabz8dvk3m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.civ-total[b-jabz8dvk3m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
}

.civ-total-label[b-jabz8dvk3m] {
    font-size: 0.75rem;
    color: var(--kendo-color-subtle);
}

.civ-total-value[b-jabz8dvk3m] {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.civ-total-note[b-jabz8dvk3m] {
    font-size: 0.75rem;
    color: var(--kendo-color-subtle);
}

.civ-grid-actions[b-jabz8dvk3m] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.civ-grid-footer[b-jabz8dvk3m] {
    text-align: right;
    font-weight: 600;
}

/* PBI 12705 - the disabled Export row shown while there is no grid to host the control. */
.civ-results-toolbar[b-jabz8dvk3m] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}
/* /Features/TillInterface/Components/TillMappingCell.razor.rz.scp.css */
/* PBI 10703 — the till-mapping cell's layout. Scoped here rather than in a <style> block in the markup, which
   rendered one copy of the rule per grid row (PR review on #10703). The div is this component's own element, so a
   bare selector matches it without ::deep. No colour lives here — the chip's tones come from RRStatusChip — and the
   one value is a shell token, so it applies identically under every light/dark swatch. */

.till-mapping-cell[b-1o1o658t2s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rr-space-2);
    min-width: 0;
}
/* /Main/Components/NotFoundPage.razor.rz.scp.css */
.rr-notfound[b-mxb3fkuhbe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    gap: 0.5rem;
}

.rr-notfound-code[b-mxb3fkuhbe] {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

.rr-notfound-title[b-mxb3fkuhbe] {
    margin: 0;
}

.rr-notfound-message[b-mxb3fkuhbe] {
    margin: 0 0 1rem;
}
/* /Main/Components/RouteTierGate.razor.rz.scp.css */
/* RouteTierGate — scoped styles, and the file is deliberately as empty of colour as its sibling
   RRModuleGate.razor.css: the panel's colour comes entirely from RRCallout's semantic token map, so
   there is no colour of any kind here, literal or otherwise. All this rule does is give the panel the
   content region's own inset and keep it fluid. */

.rr-route-tier-gate[b-8vyew8otwp] {
    /* Layer 1 (ui-responsive-adaptive.md): fluid to the container, never a fixed layout width — which
       is also what keeps the panel free of horizontal page scroll at phone width. */
    width: 100%;
    /* The region inset from the --rr-* scale (ui-shell-chrome.md §8), so the panel sits on the shell's
       own rhythm rather than flush against the AppBar above it. */
    padding: var(--rr-space-4);
}
/* /Main/Icons/RedRiverLogo.razor.rz.scp.css */
.logo[b-0zjhgdrfod] {
    padding-top: 2px;
}

.logotext[b-0zjhgdrfod] {
    paint-order: stroke fill;
    font-family: system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-transform: uppercase;
    margin-left: -7px;
    letter-spacing: -.05ch;
    line-height: 0.79;
}

.red[b-0zjhgdrfod] {
    font-weight: 800;
    font-size: 20px;
}

.river[b-0zjhgdrfod] {
    font-weight: 600;
    font-size: 20px;
    margin-left: -5px;
}

.software[b-0zjhgdrfod] {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -.03ch;
}
/* /Main/Layout/MainLayout.razor.rz.scp.css */
.page[b-jigpl4k2jq] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-jigpl4k2jq] {
    flex: 1;
}

.sidebar[b-jigpl4k2jq] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-jigpl4k2jq] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-jigpl4k2jq]  a, .top-row[b-jigpl4k2jq]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-jigpl4k2jq]  a:hover, .top-row[b-jigpl4k2jq]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-jigpl4k2jq]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (min-width: 576px) {
    .top-row[b-jigpl4k2jq] {
        justify-content: space-between;
    }

    .top-row[b-jigpl4k2jq]  a, .top-row[b-jigpl4k2jq]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    .page[b-jigpl4k2jq] {
        flex-direction: row;
    }

    .sidebar[b-jigpl4k2jq] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-jigpl4k2jq] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-jigpl4k2jq]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-jigpl4k2jq], article[b-jigpl4k2jq] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}