/* /Components/Dashboard/SummaryCard.razor.rz.scp.css */
.rx-summary-card[b-cbongjzrtk] {
    height: 100%;
    padding: 1.25rem;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-lg);
    background: var(--rx-color-surface);
    box-shadow: var(--rx-shadow-card);
    transition: border-color 160ms ease;
}

.rx-summary-card:hover[b-cbongjzrtk] {
    border-color: color-mix(in srgb, var(--rx-color-primary) 36%, var(--rx-color-border));
}

.rx-summary-icon[b-cbongjzrtk] {
    width: 3rem;
    height: 3rem;
}

.rx-summary-value[b-cbongjzrtk] {
    color: var(--rx-color-text-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* /Components/Layout/RestaurantSelector.razor.rz.scp.css */
.restaurant-selector-host[b-wkl3siyevo] {
    color: inherit;
}

.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector {
    max-width: 260px;
    min-width: 180px;
    height: var(--rx-context-selector-height);
    padding-right: var(--rx-context-selector-padding-x);
    padding-left: var(--rx-context-selector-padding-x);
    border-color: color-mix(in srgb, var(--rx-color-surface) 26%, var(--rx-color-primary-light));
    border-radius: var(--rx-radius-lg);
    background: color-mix(in srgb, var(--rx-color-surface) 10%, transparent);
    color: inherit;
    text-transform: none;
}

.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector:hover {
    background: color-mix(in srgb, var(--rx-color-surface) 16%, transparent);
}

.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector.mud-button-outlined {
    color: inherit;
}

.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector .mud-button-label {
    min-width: 0;
    color: inherit;
}

.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector .restaurant-selector__text {
    color: inherit;
}

.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector .mud-icon-root,
.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector .mud-button-icon-start,
.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector .mud-button-icon-end {
    color: currentColor;
}

.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector.mud-disabled .mud-icon-root,
.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector.mud-disabled .mud-button-label,
.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector.mud-disabled .restaurant-selector__text {
    color: inherit;
}

.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector:disabled,
.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector:disabled .mud-button-label,
.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector:disabled .restaurant-selector__text,
.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector:disabled .mud-icon-root {
    color: inherit !important;
}

.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector--single,
.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector--empty,
.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector--loading {
    opacity: 1;
}

.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector--single.mud-disabled,
.restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector--empty.mud-disabled {
    color: inherit !important;
}

.restaurant-selector--loading[b-wkl3siyevo] {
    display: inline-flex;
    align-items: center;
    max-width: 260px;
    min-width: 180px;
    height: var(--rx-context-selector-height);
    padding: 0 var(--rx-context-selector-padding-x);
    border: 1px solid color-mix(in srgb, var(--rx-color-surface) 26%, var(--rx-color-primary-light));
    border-radius: var(--rx-radius-lg);
    background: color-mix(in srgb, var(--rx-color-surface) 10%, transparent);
    color: inherit;
}

.restaurant-selector__text[b-wkl3siyevo],
.restaurant-selector__menu-text[b-wkl3siyevo] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.restaurant-selector__text[b-wkl3siyevo] {
    display: inline-block;
    max-width: 190px;
    color: inherit;
    font-size: var(--rx-font-label);
    font-weight: var(--rx-font-weight-semibold);
}

.restaurant-selector__menu-item[b-wkl3siyevo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 220px;
    max-width: 320px;
}

.restaurant-selector__menu-text[b-wkl3siyevo] {
    min-width: 0;
}

/*
    Mobile header presentation.

    959.98px, not the 599.98px this file already used: the app bar itself swaps
    to its mobile form at MudBlazor's Md boundary (960px) — that is where the
    page title becomes "RasoiX" and the user's name disappears. Between 600 and
    960 the header was already mobile while the selector kept its full desktop
    size, which is most of why it dominated.

    Ordered before the 599.98px block below so the narrower screens still win.

    Height, padding and radius only. The control keeps its icon, its chevron,
    its border, its tint, and its truncation — it is meant to read as part of
    the navigation, not to become a different control.
*/
@media (max-width: 959.98px) {
    /*
        Lets the selector shrink; it is the flexible element in the bar.

        `display: flex` is what makes min-width:0 safe. The host is a block, so
        shrinking it below its content does not shrink the button inside: at
        320px the host settled at 73px while the button stayed 147px and painted
        74px over the notification bell, which then won the tap. As a flex
        container the button becomes a flex item and shrinks with the host, so
        the bar stays a row of separate controls at every width.
    */
    .restaurant-selector-host[b-wkl3siyevo] {
        display: flex;
        min-width: 0;
    }

    /*
        The multi-restaurant branch nests the button inside MudMenu's wrapper, so
        the wrapper — not the button — is the host's flex item. Left at its
        default `min-width: auto` it refuses to shrink and the button overflows
        exactly as the host did. Same treatment, one level down.
    */
    .restaurant-selector-host[b-wkl3siyevo]  .mud-menu {
        display: flex;
        min-width: 0;
    }

    .restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector,
    .restaurant-selector--loading[b-wkl3siyevo] {
        /* 40px in a 48px dense bar reads as a card sitting inside the header. */
        height: 32px;
        min-width: 0;
        max-width: 200px;
        padding-right: var(--rx-space-density-sm);
        padding-left: var(--rx-space-density-sm);
        /* Still rounded, no longer a pill: lg (12px) to md (6px). */
        border-radius: var(--rx-radius-md);
    }

    /* Tighten the icon gutters so the reclaimed width goes to the name. */
    .restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector .mud-button-icon-start {
        margin-right: var(--rx-space-density-xs);
        margin-left: 0;
    }

    .restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector .mud-button-icon-end {
        margin-left: var(--rx-space-density-xs);
        margin-right: 0;
    }

    .restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector .mud-icon-root {
        font-size: 1.125rem;
    }

    .restaurant-selector__text[b-wkl3siyevo] {
        max-width: 128px;
    }

    /*
        One restaurant is context, not a control, so on mobile it stops looking
        like one: no frame, no fill, no gutters — just the icon and the name
        sitting in the bar. The border is made transparent rather than removed
        so the box metrics, and therefore the truncation width, are identical to
        the selector's.

        Single only. The empty state keeps its frame, because "No Restaurant" is
        a condition worth boxing; the 2+ selector keeps its frame, because it is
        genuinely a control.
    */
    .restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector--single {
        padding-right: 0;
        padding-left: 0;
        border-color: transparent;
        background: transparent;
    }
}

@media (max-width: 599.98px) {
    .restaurant-selector-host[b-wkl3siyevo]  .restaurant-selector,
    .restaurant-selector--loading[b-wkl3siyevo] {
        /* No floor at all on the narrowest phones: at 320px a 140px minimum is
           what pushes the bell and the account menu toward the edge. */
        min-width: 0;
        max-width: 150px;
    }

    .restaurant-selector__text[b-wkl3siyevo] {
        max-width: 88px;
    }
}
/* /Components/Layout/TopHeader.razor.rz.scp.css */
[b-y6vylfmdo8] .mud-toolbar {
    gap: 8px;
}
/* /Components/Navigation/NavMenu.razor.rz.scp.css */
[b-yu8aqyew5d] .rx-nav-menu {
    --rx-nav-item-padding-y: 9px;
    --rx-nav-icon-label-gap: 11px;
    padding: var(--rx-space-density-md) var(--rx-space-density-sm);
    background: var(--rx-color-surface);
}

.rx-nav-brand[b-yu8aqyew5d] {
    padding: var(--rx-space-density-sm) var(--rx-space-density-sm) var(--rx-space-density-md);
}

.rx-nav-brand-title[b-yu8aqyew5d] {
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: 0.01em;
    color: var(--rx-color-primary);
}

/* Category group: compact SaaS-style section labels */
[b-yu8aqyew5d] .rx-nav-group.mud-nav-group {
    margin-bottom: 0;
}

[b-yu8aqyew5d] .rx-nav-group.mud-nav-group + .rx-nav-group.mud-nav-group {
    margin-top: var(--rx-space-density-lg);
    padding-top: var(--rx-space-density-sm);
    border-top: 1px solid var(--rx-color-border);
}

/* Group header chrome (expand toggle) — keep label styling on .rx-nav-group-title */
[b-yu8aqyew5d] .rx-nav-group.mud-nav-group > .mud-nav-link {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: var(--rx-space-density-sm);
    border-left-color: transparent;
    border-radius: 0;
    background: transparent;
    color: var(--rx-color-text-secondary);
}

[b-yu8aqyew5d] .rx-nav-group.mud-nav-group > .mud-nav-link:hover,
[b-yu8aqyew5d] .rx-nav-group.mud-nav-group > .mud-nav-link:focus-visible {
    background: transparent;
    color: var(--rx-color-text-secondary);
}

[b-yu8aqyew5d] .rx-nav-group.mud-nav-group > .mud-nav-link .mud-nav-link-icon {
    display: none;
}

[b-yu8aqyew5d] .rx-nav-group.mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon,
[b-yu8aqyew5d] .rx-nav-group.mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon .mud-icon-root {
    color: var(--rx-color-text-secondary);
    opacity: 0.7;
}

/*
  MudBlazor sets .mud-nav-group > .mud-nav-link > .mud-nav-link-text { font-weight: 500 }.
  Put the real typography on .rx-nav-group-title so it wins over that child rule.
*/
    .rx-nav-group-title[b-yu8aqyew5d],
    [b-yu8aqyew5d] .rx-nav-group.mud-nav-group > .mud-nav-link > .mud-nav-link-text .rx-nav-group-title,
    [b-yu8aqyew5d] .rx-nav-group.mud-nav-group > .mud-nav-link > .mud-nav-link-text {
        display: inline-block;
        margin: 0;
        color: var(--rx-color-text-primary);
        font-size: 1.2em;
        font-weight: 700 !important;
        line-height: 1.2;
    }

.rx-nav-group-caption[b-yu8aqyew5d] {
    display: block;
    margin-top: var(--rx-space-density-xs);
    margin-bottom: var(--rx-space-density-xs);
    padding: 0 var(--rx-nav-item-padding-x);
    color: var(--rx-color-text-secondary);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
}

/*
  Subgroup label inside a section (Sales / Payments / Cash). Deliberately a label, not a nav row:
  it does not navigate, does not toggle and carries no icon, so the only clickable things in the
  menu remain the pages themselves. Sits between the section title and its links in weight.
*/
.rx-nav-subgroup-title[b-yu8aqyew5d] {
    display: block;
    margin-top: var(--rx-space-density-sm);
    margin-bottom: var(--rx-space-density-xs);
    padding: 0 var(--rx-nav-item-padding-x);
    color: var(--rx-color-text-secondary);
    font-size: 11px;
    font-weight: var(--rx-font-weight-semibold);
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
    /* Long labels wrap inside the existing sidebar width rather than widening it. */
    overflow-wrap: anywhere;
}

/* The first subgroup sits directly under the section title, so it needs no extra lead-in. */
.rx-nav-subgroup-title:first-child[b-yu8aqyew5d] {
    margin-top: 0;
}

/* Menu items within groups — normal weight */
[b-yu8aqyew5d] .rx-nav-group .mud-navmenu .mud-nav-link {
    border-left: var(--rx-nav-active-border-width) solid transparent;
    border-radius: var(--rx-radius-control);
    margin: var(--rx-nav-item-margin-y) 0;
    color: var(--rx-color-text-secondary);
    font-weight: 400;
    gap: var(--rx-nav-icon-label-gap);
}

[b-yu8aqyew5d] .rx-nav-group .mud-navmenu .mud-nav-link .mud-nav-link-text {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    font-size: inherit;
}

[b-yu8aqyew5d] .rx-nav-group .mud-navmenu .mud-nav-link .mud-nav-link-icon {
    margin-inline-end: var(--rx-nav-icon-label-gap);
}

[b-yu8aqyew5d] .rx-nav-group .mud-navmenu .mud-nav-link:hover {
    background: var(--rx-color-table-hover);
    color: var(--rx-color-primary);
}

[b-yu8aqyew5d] .rx-nav-group .mud-navmenu .mud-nav-link:hover .mud-nav-link-icon,
[b-yu8aqyew5d] .rx-nav-group .mud-navmenu .mud-nav-link:hover .mud-icon-root {
    color: var(--rx-color-primary);
}

[b-yu8aqyew5d] .rx-nav-group .mud-navmenu .mud-nav-link.active {
    border-left-color: var(--rx-color-primary);
    background: color-mix(in srgb, var(--rx-color-primary) 8%, var(--rx-color-surface));
    color: var(--rx-color-primary);
    font-weight: var(--rx-font-weight-semibold);
}

[b-yu8aqyew5d] .rx-nav-group .mud-navmenu .mud-nav-link.active .mud-nav-link-text {
    font-weight: var(--rx-font-weight-semibold);
}

[b-yu8aqyew5d] .rx-nav-group .mud-navmenu .mud-nav-link.active .mud-nav-link-icon,
[b-yu8aqyew5d] .rx-nav-group .mud-navmenu .mud-nav-link.active .mud-icon-root {
    color: var(--rx-color-primary);
}

[b-yu8aqyew5d] .mud-divider {
    margin-top: var(--rx-nav-separator-margin-y);
    margin-bottom: var(--rx-nav-separator-margin-y);
}
/* /Components/OperationProgress/OperationProgressHost.razor.rz.scp.css */
.rx-operation-progress[b-c9nmx4lk55] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--rx-operation-progress-z-index);
    height: 4px;
    overflow: hidden;
    pointer-events: none;
    background: color-mix(in srgb, var(--rx-color-primary) 14%, transparent);
}

.rx-operation-progress__bar[b-c9nmx4lk55] {
    width: 36%;
    height: 100%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(
        90deg,
        var(--rx-color-primary) 0%,
        var(--rx-color-primary-light) 42%,
        var(--rx-color-accent) 100%);
    animation: rx-operation-progress-indeterminate-b-c9nmx4lk55 1.35s cubic-bezier(0.45, 0, 0.2, 1) infinite;
    will-change: transform;
}

@keyframes rx-operation-progress-indeterminate-b-c9nmx4lk55 {
    0% {
        transform: translateX(-130%);
    }

    100% {
        transform: translateX(340%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rx-operation-progress__bar[b-c9nmx4lk55] {
        width: 100%;
        animation: none;
        opacity: 0.92;
    }
}
/* /Components/Operations/ReportContextStrip.razor.rz.scp.css */
/* Report context strip — presentation only.

   Scoped to this component rather than to a page, which is the point: the previous per-page classes
   were declared in one page's scoped stylesheet, so every other report copied the class names and
   received no styling at all. Styling the component means it looks the same wherever it is used.

   Every value below is an existing design token from app.css. No new colour, spacing step or font
   size is introduced, and nothing here carries semantic meaning — a business date is metadata, not
   a status, so it gets no KPI, financial or warning colour. */

.rx-report-context-strip[b-pvfxuuayd6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rx-space-density-sm) var(--rx-space-density-lg);
    align-items: flex-start;
}

/* Content-sized rather than stretched into equal tracks: four short fields on a wide screen should
   read as a quiet strip, not as four columns of mostly empty space. */
.rx-report-context-strip__item[b-pvfxuuayd6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 1 auto;

    /* Lets a long restaurant name or timestamp wrap inside its own item instead of forcing the
       strip wider than its container. */
    min-width: 0;
    max-width: 100%;
}

.rx-report-context-strip__label[b-pvfxuuayd6] {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--rx-color-text-secondary);
}

.rx-report-context-strip__value[b-pvfxuuayd6] {
    font-size: 0.875rem;
    line-height: 1.35;
    font-weight: var(--rx-font-weight-medium);
    color: var(--rx-color-text-primary);

    /* Long values break rather than overflow. "anywhere" is deliberate over "break-word": a
       timestamp has no convenient break opportunity. */
    overflow-wrap: anywhere;
}

/* Mobile is a designed layout, not an accidental wrap of the desktop one. A two-column grid keeps
   labels and values aligned down the page instead of leaving a ragged right edge, and the grid
   flows in DOM order so the reading order is the one the page supplied. */
@media (max-width: 599.98px) {
    .rx-report-context-strip[b-pvfxuuayd6] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--rx-space-density-sm) var(--rx-space-density-md);
    }

    .rx-report-context-strip__item[b-pvfxuuayd6] {
        flex: initial;
    }
}

/* Very narrow phones: one column, so a long value never has to share a ~140px track with another
   field and wrap a character at a time. */
@media (max-width: 359.98px) {
    .rx-report-context-strip[b-pvfxuuayd6] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Orders/Details/Delivery/DeliveryCurrentAssignment.razor.rz.scp.css */
/* Soft informational empty state — not an error treatment. */
.rx-order-delivery-empty[b-0zcbnzla87] {
    display: flex;
    align-items: center;
    gap: var(--rx-space-density-md);
    min-width: 0;
    padding: var(--rx-space-density-sm) 0;
}

.rx-order-delivery-empty-icon[b-0zcbnzla87] {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}

.rx-order-delivery-empty .mud-typography[b-0zcbnzla87] {
    min-width: 0;
}

.rx-order-delivery-assignment[b-0zcbnzla87] {
    min-width: 0;
}

.rx-order-delivery-assignment .rx-order-detail-value[b-0zcbnzla87] {
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* /Components/Orders/Details/DetailRow.razor.rz.scp.css */
.rx-order-detail-row[b-tw7nlje93f] {
    display: grid !important;
    grid-template-columns: minmax(var(--rx-detail-label-width), var(--rx-detail-label-width)) minmax(0, auto);
    column-gap: 1.25rem;
    align-items: center;
    justify-content: start;
    min-height: var(--rx-detail-row-min-height);
    padding: var(--rx-space-detail-row-padding-y) 0;
}

.rx-order-detail-label[b-tw7nlje93f] {
    white-space: nowrap;
    line-height: 1.25rem;
    text-transform: none;
}

.rx-order-detail-value[b-tw7nlje93f] {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.25rem;
    text-align: left;
}

.rx-order-detail-value-nowrap[b-tw7nlje93f] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .rx-order-detail-row[b-tw7nlje93f] {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
        align-items: start;
    }

}
/* /Components/Orders/Details/OperationalSummaryPanel.razor.rz.scp.css */
.rx-operational-summary[b-a1tjepxul6] {
    min-width: 0;
}

.rx-operational-summary-header[b-a1tjepxul6] {
    margin-bottom: var(--rx-space-density-xs);
}

.rx-operational-summary-eyebrow[b-a1tjepxul6] {
    margin: 0;
    font-weight: var(--rx-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rx-operational-summary-facts[b-a1tjepxul6] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--rx-space-density-md);
    row-gap: var(--rx-space-density-xs);
    min-width: 0;
    /* Top-align columns so Delivery height does not stretch siblings. */
    align-items: start;
    align-content: start;
    justify-items: stretch;
}

.rx-operational-summary-fact[b-a1tjepxul6] {
    min-width: 0;
    width: 100%;
    height: fit-content;
    max-height: max-content;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* ~8–10px label → chip */
    gap: 0.5rem;
}

/* Concise status summaries — natural content height only. */
.rx-operational-summary-fact--status[b-a1tjepxul6] {
    height: fit-content;
    align-self: start;
}

.rx-operational-summary-fact--delivery[b-a1tjepxul6] {
    /* Richer block: grows with content; still top-aligned in the grid track. */
    min-width: 0;
    height: fit-content;
    align-self: start;
    gap: 0.25rem;
}

.rx-operational-summary-delivery-assignment[b-a1tjepxul6] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    max-width: 100%;
    margin-top: 0.05rem;
}

.rx-operational-summary-delivery-meta[b-a1tjepxul6] {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    min-width: 0;
    max-width: 100%;
}

.rx-operational-summary-delivery-meta-icon[b-a1tjepxul6] {
    flex-shrink: 0;
    margin-top: 0.12rem;
    color: var(--rx-color-text-secondary);
    opacity: 0.85;
    font-size: 0.8125rem !important;
}

.rx-operational-summary-delivery-driver[b-a1tjepxul6] {
    margin: 0;
    min-width: 0;
    color: var(--rx-color-text-primary);
    font-size: 0.8125rem;
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.rx-operational-summary-delivery-secondary[b-a1tjepxul6] {
    margin: 0;
    min-width: 0;
    font-size: 0.6875rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
    min-width: 0;
    max-width: 100%;
    margin-top: 0.1rem;
}

/*
 * MudButton renders the interactive <button.mud-button-root> inside a child component.
 * Scoped selectors without ::deep become .class[b-xxx] on that root and never match
 * because the isolation attribute stays on this component's HTML ancestors only.
 */
.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6]  .rx-operational-summary-delivery-shortcut.mud-button-root {
    min-width: 0;
    min-height: 1.875rem; /* 30px */
    height: 1.875rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: var(--rx-font-weight-medium, 500);
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: none;
    transition:
        background-color 140ms ease-in-out,
        border-color 140ms ease-in-out,
        color 140ms ease-in-out,
        box-shadow 140ms ease-in-out;
}

.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6]  .rx-operational-summary-delivery-shortcut .mud-button-label {
    gap: 0.2rem;
}

.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6]  .rx-operational-summary-delivery-shortcut .mud-button-icon-start {
    margin-inline-end: 0;
    margin-left: 0;
    font-size: 0.875rem !important;
}

/* Change Driver (and other non-danger shortcuts): soft primary tint on hover. */
.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6]  .rx-operational-summary-delivery-shortcut.mud-button-root:not(.rx-operational-summary-delivery-shortcut--danger):hover:not(:disabled),
.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6]  .rx-operational-summary-delivery-shortcut.mud-button-root:not(.rx-operational-summary-delivery-shortcut--danger):hover:not(.mud-disabled) {
    background-color: var(--rx-action-contextual-hover-bg);
    color: var(--rx-action-contextual-hover-fg);
    box-shadow: inset 0 0 0 1px var(--rx-action-contextual-hover-border);
}

.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6]  .rx-operational-summary-delivery-shortcut.mud-button-root:not(.rx-operational-summary-delivery-shortcut--danger):hover:not(:disabled) .mud-button-icon-start,
.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6]  .rx-operational-summary-delivery-shortcut.mud-button-root:not(.rx-operational-summary-delivery-shortcut--danger):hover:not(.mud-disabled) .mud-icon-root {
    color: var(--rx-action-contextual-hover-fg);
}

.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6]  .rx-operational-summary-delivery-shortcut--danger.mud-button-root {
    color: var(--rx-action-danger-hover-fg);
}

.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6]  .rx-operational-summary-delivery-shortcut--danger.mud-button-root:hover:not(:disabled),
.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6]  .rx-operational-summary-delivery-shortcut--danger.mud-button-root:hover:not(.mud-disabled) {
    background-color: var(--rx-action-danger-hover-bg);
    color: var(--rx-action-danger-hover-fg);
    box-shadow: inset 0 0 0 1px var(--rx-action-danger-hover-border);
}

.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6]  .rx-operational-summary-delivery-shortcut--danger.mud-button-root:hover:not(:disabled) .mud-button-icon-start,
.rx-operational-summary-delivery-shortcuts[b-a1tjepxul6]  .rx-operational-summary-delivery-shortcut--danger.mud-button-root:hover:not(.mud-disabled) .mud-icon-root {
    color: var(--rx-action-danger-hover-fg);
}

.rx-operational-summary-label[b-a1tjepxul6] {
    margin: 0;
    font-weight: var(--rx-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rx-operational-summary-indicator.mud-chip[b-a1tjepxul6] {
    height: 1.375rem;
    min-height: 1.375rem;
    min-width: 0;
    max-width: 100%;
    padding-inline: var(--rx-space-density-sm);
    font-size: var(--rx-font-label);
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1;
}

.rx-operational-summary-indicator .mud-chip-content[b-a1tjepxul6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-operational-summary-attention[b-a1tjepxul6] {
    margin-top: var(--rx-space-density-sm);
    min-width: 0;
}

.rx-operational-summary-attention-label[b-a1tjepxul6] {
    display: block;
    margin: 0 0 var(--rx-space-density-xs);
    font-weight: var(--rx-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rx-operational-summary-attention-list[b-a1tjepxul6] {
    display: flex;
    flex-direction: column;
    gap: var(--rx-space-density-xs);
    min-width: 0;
}

.rx-operational-summary-attention-card[b-a1tjepxul6] {
    display: flex;
    align-items: flex-start;
    gap: var(--rx-space-density-xs);
    min-width: 0;
    padding: var(--rx-space-density-xs) var(--rx-space-density-sm);
    border: 1px solid color-mix(in srgb, var(--rx-color-warning) 28%, var(--rx-color-border));
    border-radius: var(--rx-radius-md);
    background: color-mix(in srgb, var(--rx-color-warning) 10%, var(--rx-color-surface));
}

.rx-operational-summary-attention-card--warning[b-a1tjepxul6] {
    border-color: color-mix(in srgb, var(--rx-color-warning) 28%, var(--rx-color-border));
    background: color-mix(in srgb, var(--rx-color-warning) 10%, var(--rx-color-surface));
}

.rx-operational-summary-attention-card--critical[b-a1tjepxul6] {
    border-color: color-mix(in srgb, var(--rx-color-danger) 30%, var(--rx-color-border));
    background: color-mix(in srgb, var(--rx-color-danger) 8%, var(--rx-color-surface));
}

.rx-operational-summary-attention-copy[b-a1tjepxul6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.rx-operational-summary-attention-title[b-a1tjepxul6] {
    margin: 0;
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.3;
}

.rx-operational-summary-attention-detail[b-a1tjepxul6] {
    margin: 0;
    line-height: 1.35;
}

.rx-operational-summary-attention-icon[b-a1tjepxul6] {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--rx-color-text-secondary);
}

.rx-operational-summary-attention-icon--warning[b-a1tjepxul6] {
    color: var(--rx-color-warning);
}

.rx-operational-summary-attention-icon--critical[b-a1tjepxul6] {
    color: var(--rx-color-danger);
}

.rx-operational-summary-warnings[b-a1tjepxul6] {
    margin-top: var(--rx-space-density-sm);
}

.rx-operational-summary-alert[b-a1tjepxul6] {
    margin: 0;
}

@media (max-width: 959.98px) {
    .rx-operational-summary-facts[b-a1tjepxul6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        align-content: start;
    }
}

@media (max-width: 599.98px) {
    .rx-operational-summary-facts[b-a1tjepxul6] {
        grid-template-columns: 1fr;
        align-items: start;
        align-content: start;
    }
}
/* /Components/Orders/Details/OrderBillingTab.razor.rz.scp.css */
.rx-order-billing-grid[b-ytrt1kz5q9] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
    gap: var(--rx-drawer-section-spacing);
    align-items: start;
}

.rx-order-billing-empty[b-ytrt1kz5q9] {
    min-height: 10rem;
}

.rx-order-billing-receipt[b-ytrt1kz5q9],
.rx-order-billing-payment-details[b-ytrt1kz5q9] {
    display: grid;
    gap: 0.375rem;
}

.rx-order-billing-line[b-ytrt1kz5q9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    min-height: var(--rx-detail-row-min-height);
    padding: var(--rx-space-detail-row-padding-y) 0;
}

.rx-order-billing-line-value[b-ytrt1kz5q9] {
    text-align: right;
    white-space: nowrap;
}

.rx-order-billing-line-discount[b-ytrt1kz5q9] {
    color: var(--rx-color-success);
}

.rx-order-billing-total[b-ytrt1kz5q9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    margin-top: var(--rx-space-density-md);
    padding-top: var(--rx-space-density-md);
    border-top: 1px solid var(--rx-color-border);
}

.rx-order-billing-total-label[b-ytrt1kz5q9] {
    color: var(--rx-color-text-primary);
    font-size: var(--rx-font-body);
    font-weight: var(--rx-font-weight-semibold);
}

.rx-order-billing-total-value[b-ytrt1kz5q9] {
    color: var(--rx-color-text-primary);
    font-size: var(--rx-font-section-title);
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-align: right;
    white-space: nowrap;
}

/* Capture row is hand-authored (not DetailRow), so it needs the same value-column grid. */
.rx-order-billing-capture-row[b-ytrt1kz5q9] {
    display: grid;
    grid-template-columns: minmax(var(--rx-detail-label-width), var(--rx-detail-label-width)) minmax(0, auto);
    column-gap: 1.25rem;
    align-items: center;
    justify-content: start;
    min-height: var(--rx-detail-row-min-height);
    padding: var(--rx-space-detail-row-padding-y) 0;
}

.rx-order-billing-status-value[b-ytrt1kz5q9] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.rx-order-billing-status-value .mud-chip[b-ytrt1kz5q9] {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

@media (max-width: 599.98px) {
    .rx-order-billing-capture-row[b-ytrt1kz5q9] {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
        align-items: start;
    }
}

@media (max-width: 959.98px) {
    .rx-order-billing-grid[b-ytrt1kz5q9] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 599.98px) {
    .rx-order-billing-grid[b-ytrt1kz5q9] {
        gap: 20px;
    }

    .rx-order-billing-total[b-ytrt1kz5q9] {
        align-items: start;
    }

    .rx-order-billing-total-value[b-ytrt1kz5q9] {
        font-size: var(--rx-font-card-title);
    }
}

/*
    Drill-down entry points. A text button carries MudBlazor's own horizontal padding, so its
    label sits indented from the section's content edge; pulling that back is the only styling
    these links need.

    Written through a plain host element and ::deep because Blazor stamps its scope attribute onto
    HTML elements only, never onto a child component's root — a rule aimed straight at a class on
    <MudButton> would match nothing.
*/
.rx-order-billing-drilldown-host[b-ytrt1kz5q9] {
    display: flex;
}

.rx-order-billing-drilldown-host[b-ytrt1kz5q9]  .mud-button-root {
    margin-left: -8px;
}
/* /Components/Orders/Details/OrderDetailsBody.razor.rz.scp.css */
.rx-order-details-body[b-xnp8hspn4f] {
    width: 100%;
    min-width: 0;
}

.rx-menu-configuration-panels[b-xnp8hspn4f] {
    width: 100%;
}

.rx-menu-panel-header[b-xnp8hspn4f] {
    width: 100%;
    min-width: 0;
    padding-right: var(--rx-space-density-sm);
}

.rx-menu-panel-title-row[b-xnp8hspn4f] {
    min-width: 0;
}

.rx-menu-panel-content[b-xnp8hspn4f] {
    padding: var(--rx-space-density-xs) 0;
}

.rx-order-details-panel-content[b-xnp8hspn4f] {
    min-width: 0;
}

.rx-order-details-panel-meta[b-xnp8hspn4f] {
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .rx-menu-panel-header[b-xnp8hspn4f] {
        padding-right: 0;
    }
}
/* /Components/Orders/Details/OrderDetailsHeader.razor.rz.scp.css */
.rx-order-details-header[b-f4rws3i3bt] {
    padding: 20px var(--rx-space-drawer-right) 20px var(--rx-space-drawer-left);
    border-bottom: 1px solid var(--rx-color-border);
    background: var(--rx-color-surface);
}

.rx-order-details-header-shell[b-f4rws3i3bt] {
    min-width: 0;
}

.rx-order-details-summary-row[b-f4rws3i3bt] {
    min-width: 0;
    gap: 1rem;
}

.rx-order-details-header-actions[b-f4rws3i3bt] {
    gap: 0.5rem;
    flex: 0 0 auto;
}

.rx-order-details-nav[b-f4rws3i3bt] {
    gap: 0.125rem;
    padding: 0.125rem;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-lg);
    background: var(--rx-color-surface);
}

.rx-order-details-chip-row[b-f4rws3i3bt] {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.rx-order-details-channel-row[b-f4rws3i3bt] {
    flex-wrap: wrap;
    margin-top: 12px;
    row-gap: 0.5rem;
}

.rx-order-details-restaurant[b-f4rws3i3bt] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-order-details-created[b-f4rws3i3bt] {
    margin-top: 12px;
}

@media (max-width: 599.98px) {
    .rx-order-details-header[b-f4rws3i3bt] {
        padding: 20px;
    }

    .rx-order-details-summary-row[b-f4rws3i3bt] {
        align-items: flex-start !important;
        flex-direction: column;
    }
}
/* /Components/Orders/Details/OrderItemsTab.razor.rz.scp.css */
.rx-order-items-card[b-eb9kslbngd] {
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-lg);
    overflow: hidden;
    background: var(--rx-color-surface);
    box-shadow: var(--rx-shadow-card);
}

.rx-order-items-summary[b-eb9kslbngd] {
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--rx-color-border);
}

.rx-order-items-title[b-eb9kslbngd] {
    color: var(--rx-color-text-heading);
    font-weight: 700;
    letter-spacing: 0;
}

.rx-order-items-summary-chips[b-eb9kslbngd] {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.rx-order-items-table[b-eb9kslbngd] {
    min-width: 100%;
}

.rx-order-items-header-cell[b-eb9kslbngd] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--rx-color-table-header);
    color: var(--rx-color-text-secondary);
    font-size: var(--rx-font-label);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.rx-order-item-name[b-eb9kslbngd] {
    font-weight: 700;
    color: var(--rx-color-text-primary);
}

.rx-order-items-number[b-eb9kslbngd] {
    text-align: right;
    white-space: nowrap;
}

.rx-order-items-empty[b-eb9kslbngd] {
    min-height: 12rem;
}

@media (max-width: 599.98px) {
    .rx-order-items-summary[b-eb9kslbngd] {
        flex-direction: column;
        align-items: stretch !important;
    }

    .rx-order-items-summary-chips[b-eb9kslbngd] {
        justify-content: flex-start;
    }
}
/* /Components/Orders/Details/OrderOperationsBar.razor.rz.scp.css */
.rx-order-operations-bar[b-dxnayu9nve] {
    min-width: 0;
}

.rx-order-operations-eyebrow[b-dxnayu9nve] {
    display: block;
    margin: 0 0 var(--rx-space-density-xs);
    font-weight: var(--rx-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rx-order-operations-console[b-dxnayu9nve] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rx-space-density-sm) var(--rx-space-density-lg);
    min-width: 0;
}

.rx-order-operations-console__next[b-dxnayu9nve] {
    display: flex;
    flex-direction: column;
    gap: var(--rx-space-density-xs);
    flex: 1 1 16rem;
    min-width: 0;
}

.rx-order-operations-console__primary-cluster[b-dxnayu9nve] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rx-space-density-sm) var(--rx-space-density-md);
    min-width: 0;
}

.rx-order-operations-next-action.mud-button-root[b-dxnayu9nve] {
    min-width: 10.5rem;
}

.rx-order-operations-context[b-dxnayu9nve] {
    margin: 0;
    max-width: 28rem;
    line-height: 1.35;
}

.rx-order-operations-console__secondary[b-dxnayu9nve] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rx-space-density-xs);
    flex: 0 1 auto;
    margin-inline-start: auto;
    padding-top: 0.125rem;
}

.rx-order-operations-empty[b-dxnayu9nve] {
    margin: 0;
}

.rx-order-operations-menu-group[b-dxnayu9nve] {
    display: block;
    padding: 0.5rem 0.75rem 0.25rem;
    font-weight: var(--rx-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.rx-order-operations-more-menu[b-dxnayu9nve],
.rx-order-operations-more-action.mud-button-root[b-dxnayu9nve],
.rx-order-operations-refresh[b-dxnayu9nve] {
    flex-shrink: 0;
}

.rx-order-operations-more-action.mud-button-root[b-dxnayu9nve] {
    min-height: 2.25rem;
    height: 2.25rem;
    box-shadow: none;
    border: none;
    background: transparent;
}

.rx-order-operations-refresh.mud-button-root[b-dxnayu9nve] {
    color: var(--rx-color-text-secondary);
}

.rx-order-operations-refresh.mud-button-root:hover:not(:disabled)[b-dxnayu9nve] {
    color: var(--rx-color-text-primary);
    background: color-mix(in srgb, var(--rx-color-primary) 6%, transparent);
}
/* /Components/Orders/Details/OrderOperationsCard.razor.rz.scp.css */
.rx-order-operations-card[b-de6do3d79m] {
    min-width: 0;
    /* Content-sized: do not inherit .rx-detail-section height:100% stretch. */
    height: auto;
    /* Drop title/header space; keep comfortable inset under page header. */
    padding-top: var(--rx-space-density-lg);
    padding-bottom: var(--rx-space-density-lg);
}

.rx-order-operations-card__body[b-de6do3d79m] {
    display: flex;
    flex-direction: column;
    gap: var(--rx-space-density-sm);
    min-width: 0;
}

.rx-order-operations-card__section[b-de6do3d79m] {
    min-width: 0;
    padding-bottom: var(--rx-space-density-sm);
    border-bottom: 1px solid var(--rx-color-border);
}

.rx-order-operations-card__section:last-child[b-de6do3d79m],
.rx-order-operations-card__section--actions[b-de6do3d79m] {
    padding-bottom: 0;
    border-bottom: none;
}

.rx-order-operations-card__label[b-de6do3d79m] {
    display: block;
    margin: 0 0 var(--rx-space-density-xs);
    font-weight: var(--rx-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rx-order-operations-card__workflow[b-de6do3d79m] {
    min-width: 0;
}

/* Nested inside Operations card — keep stepper chrome, drop redundant outer card weight. */
.rx-order-operations-card__workflow[b-de6do3d79m]  .rx-order-progress-stepper {
    padding: var(--rx-space-density-sm) var(--rx-space-density-md);
    box-shadow: none;
}
/* /Components/Orders/Details/OrderProgressSection.razor.rz.scp.css */
.rx-order-progress-stepper[b-09by23ierh] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    overflow-x: auto;
    padding: 16px 18px;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-lg);
    background: var(--rx-color-surface);
    box-shadow: var(--rx-shadow-card);
}

.rx-order-progress-step[b-09by23ierh] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    color: var(--rx-color-text-secondary);
}

.rx-order-progress-step-current[b-09by23ierh] {
    color: var(--rx-color-primary);
    font-weight: 700;
}

.rx-order-progress-step-complete[b-09by23ierh] {
    color: var(--rx-color-success);
}

.rx-order-progress-label[b-09by23ierh] {
    font-size: var(--rx-font-label);
    font-weight: 700;
    white-space: nowrap;
}

.rx-order-progress-arrow[b-09by23ierh] {
    flex: 0 0 auto;
    color: var(--rx-color-text-secondary);
    font-size: var(--rx-font-label);
}
/* /Components/Orders/Details/OrderSummaryBar.razor.rz.scp.css */
.rx-order-summary-bar[b-kgj74eeap4] {
    min-width: 0;
}

.rx-order-summary-bar-top[b-kgj74eeap4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rx-space-drawer-summary-gap);
    min-width: 0;
}

.rx-order-summary-metadata[b-kgj74eeap4] {
    display: grid;
    gap: var(--rx-space-density-xs);
    min-width: 0;
}

.rx-order-summary-context[b-kgj74eeap4],
.rx-order-summary-created[b-kgj74eeap4] {
    min-width: 0;
}

.rx-order-summary-context[b-kgj74eeap4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-order-summary-chip-row[b-kgj74eeap4] {
    margin-top: var(--rx-space-drawer-summary-gap);
    flex-wrap: wrap;
    row-gap: var(--rx-space-density-sm);
}

.rx-order-summary-nav[b-kgj74eeap4] {
    flex: 0 0 auto;
    gap: 0.125rem;
    padding: 0.125rem;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-lg);
    background: var(--rx-color-surface);
}

@media (max-width: 599.98px) {
    .rx-order-summary-bar-top[b-kgj74eeap4] {
        align-items: flex-start;
        flex-direction: column;
    }

    .rx-order-summary-context[b-kgj74eeap4] {
        overflow: visible;
        white-space: normal;
    }
}
/* /Components/Orders/Details/OrderTimelineTab.razor.rz.scp.css */
.rx-order-timeline-card[b-lrcwj6qp79] {
    padding: var(--rx-space-detail-section-padding);
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-lg);
    background: var(--rx-color-surface);
    box-shadow: var(--rx-shadow-card);
}

.rx-order-timeline-title[b-lrcwj6qp79] {
    color: var(--rx-color-text-heading);
    font-weight: 700;
    letter-spacing: 0;
}

.rx-order-timeline-list[b-lrcwj6qp79] {
    margin-top: var(--rx-space-density-md);
    padding-top: var(--rx-space-density-xs);
    padding-bottom: var(--rx-space-density-xs);
}

.rx-order-timeline-row[b-lrcwj6qp79] {
    padding-bottom: var(--rx-space-timeline-row-gap);
}

.rx-order-timeline-row-current .rx-order-timeline-stage[b-lrcwj6qp79] {
    color: var(--rx-color-primary);
    font-weight: 700;
}

.rx-order-timeline-content[b-lrcwj6qp79] {
    min-width: 0;
    padding: var(--rx-space-detail-row-padding-y) 0 var(--rx-space-timeline-row-gap);
}

@media (max-width: 599.98px) {
    .rx-order-timeline-card[b-lrcwj6qp79] {
        padding: var(--rx-space-detail-section-padding);
    }
}
/* /Components/Orders/Details/OrderWorkflowTab.razor.rz.scp.css */
.rx-order-information-layout[b-7z38va1l57] {
    min-width: 0;
}

.rx-order-overview-details-grid[b-7z38va1l57] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--rx-space-density-lg);
    row-gap: var(--rx-space-density-xs);
}

@media (max-width: 959.98px) {
    .rx-order-overview-details-grid[b-7z38va1l57] {
        grid-template-columns: 1fr;
    }
}

/* Order notes — full width beneath the grid at every breakpoint. A quiet bordered surface
   built from the same tokens as the other detail containers, deliberately not a status tint:
   a customer note is metadata, not an alert. */
.rx-order-notes[b-7z38va1l57] {
    display: grid;
    row-gap: var(--rx-space-density-xs);
    margin-top: var(--rx-space-density-md);
    padding: var(--rx-space-density-md);
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: var(--rx-color-surface-muted);
}

/* ::deep because the heading and the note are rendered by MudText, which does not carry this
   component's isolation scope. */
.rx-order-notes[b-7z38va1l57]  .rx-order-notes-label {
    margin: 0;
    line-height: 1.25rem;
    text-transform: none;
}

/* pre-wrap keeps the line breaks the customer typed; anywhere breaks an unspaced run so a long
   note wraps instead of widening the panel. The note is never clipped or truncated. */
.rx-order-notes[b-7z38va1l57]  .rx-order-notes-value {
    margin: 0;
    min-width: 0;
    color: var(--rx-color-text-primary);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Orders/Dialogs/DeliveryAgentPickerDialog.razor.rz.scp.css */
.rx-delivery-agent-picker[b-seew235yez] {
    min-width: 0;
}

.rx-delivery-agent-picker-list[b-seew235yez] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: var(--rx-color-surface);
}

.rx-delivery-agent-picker-item[b-seew235yez] {
    display: flex;
    align-items: flex-start;
    /*
        Buttons carry a user-agent centering default, which survives `text-align: left` because
        that only governs inline text and not how a flex container packs its items. Without this
        the driver name and its vehicle line sit centred in the row.
    */
    justify-content: flex-start;
    gap: var(--rx-space-density-sm);
    width: 100%;
    margin: 0;
    padding: var(--rx-space-density-sm) var(--rx-space-density-md);
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--rx-color-border) 80%, transparent);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.rx-delivery-agent-picker-item:last-child[b-seew235yez] {
    border-bottom: none;
}

.rx-delivery-agent-picker-item:hover[b-seew235yez] {
    background: color-mix(in srgb, var(--rx-color-primary) 6%, transparent);
}

.rx-delivery-agent-picker-item--selected[b-seew235yez] {
    background: color-mix(in srgb, var(--rx-color-primary) 10%, var(--rx-color-surface));
}

.rx-delivery-agent-picker-item-icon[b-seew235yez] {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--rx-color-text-secondary);
}

.rx-delivery-agent-picker-item-copy[b-seew235yez] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.rx-delivery-agent-picker-item-title[b-seew235yez] {
    color: var(--rx-color-text-primary);
    font-size: var(--rx-font-body);
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.3;
}

.rx-delivery-agent-picker-item-meta[b-seew235yez] {
    font-size: var(--rx-font-label);
    line-height: 1.35;
}

.rx-delivery-agent-picker-state[b-seew235yez] {
    min-height: 8rem;
    padding: var(--rx-space-density-md) 0;
}
/* /Components/Orders/OrderFilterToolbar.razor.rz.scp.css */
.rx-order-filter-toolbar[b-s5e3ut0kq1] {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.rx-order-filter-top-row[b-s5e3ut0kq1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.rx-order-filter-search[b-s5e3ut0kq1] {
    flex: 0 1 48%;
    max-width: 720px;
    min-width: 320px;
}

.rx-order-filter-actions-shell[b-s5e3ut0kq1] {
    flex: 1 1 auto;
    min-width: 0;
}

.rx-order-filter-actions[b-s5e3ut0kq1] {
    height: 100%;
    align-items: center;
    gap: 0.5rem !important;
    flex-wrap: wrap;
}

.rx-order-status-filter-slot[b-s5e3ut0kq1] {
    margin-top: 0.375rem;
}

.rx-order-filter-divider[b-s5e3ut0kq1] {
    display: none;
}

.rx-order-filter-toolbar[b-s5e3ut0kq1]  .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.rx-order-filter-toolbar[b-s5e3ut0kq1]  .mud-input-root {
    min-height: 2.125rem;
    height: 2.125rem;
}

.rx-order-filter-toolbar[b-s5e3ut0kq1]  .rx-order-search-field .mud-input-root {
    min-height: 2.125rem;
    height: 2.125rem;
}

.rx-order-filter-toolbar[b-s5e3ut0kq1]  .mud-input-adornment {
    margin-top: 0;
}

.rx-order-filter-toolbar[b-s5e3ut0kq1]  .mud-input-outlined {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.rx-order-filter-toolbar[b-s5e3ut0kq1]  .mud-input-adorned-start {
    padding-left: 0.75rem;
}

.rx-order-filter-toolbar[b-s5e3ut0kq1]  .mud-input-adorned-end {
    padding-right: 0.75rem;
}

.rx-order-filter-toolbar[b-s5e3ut0kq1]  .rx-order-filter-button {
    min-height: 2.125rem;
    height: 2.125rem;
    padding: 0.3125rem 0.875rem;
    text-transform: none;
}

.rx-order-advanced-filter-row[b-s5e3ut0kq1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid color-mix(in srgb, var(--rx-color-border) 62%, transparent);
}

.rx-order-filter-control[b-s5e3ut0kq1] {
    flex: 0 0 auto;
}

.rx-order-filter-type[b-s5e3ut0kq1] {
    width: 160px;
}

.rx-order-filter-payment[b-s5e3ut0kq1] {
    width: 180px;
}

.rx-order-filter-restaurant[b-s5e3ut0kq1] {
    width: 280px;
}

.rx-order-filter-date[b-s5e3ut0kq1] {
    position: relative;
    width: 220px;
}

.rx-order-compact-control[b-s5e3ut0kq1] {
    width: 100%;
    height: 2.125rem;
    min-height: 2.125rem;
    padding: 0.3125rem 2.125rem 0.3125rem 0.875rem;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background-color: var(--rx-color-surface);
    color: var(--rx-color-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
}

select.rx-order-compact-control[b-s5e3ut0kq1] {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--rx-color-text-secondary) 50%),
        linear-gradient(135deg, var(--rx-color-text-secondary) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 14px,
        calc(100% - 13px) 14px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

input.rx-order-compact-control[b-s5e3ut0kq1] {
    padding-right: 12px;
}

.rx-order-compact-control:hover[b-s5e3ut0kq1] {
    border-color: var(--rx-color-primary-light);
}

.rx-order-compact-control:focus[b-s5e3ut0kq1] {
    border-color: var(--rx-color-primary);
    box-shadow: 0 0 0 2px rgba(31, 47, 87, 0.12);
    outline: none;
}

.rx-order-date-range-trigger[b-s5e3ut0kq1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.125rem;
    height: 2.125rem;
    justify-content: space-between;
    padding: 0.3125rem 0.75rem 0.3125rem 0.875rem;
    border: 1px solid var(--rx-color-border);
    border-color: var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: var(--rx-color-surface);
    color: var(--rx-color-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    cursor: pointer;
}

.rx-order-date-range-trigger:hover[b-s5e3ut0kq1] {
    border-color: var(--rx-color-primary-light);
}

.rx-order-date-range-trigger:focus[b-s5e3ut0kq1] {
    border-color: var(--rx-color-primary);
    box-shadow: 0 0 0 2px rgba(31, 47, 87, 0.12);
    outline: none;
}

.rx-order-date-range-menu[b-s5e3ut0kq1] {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 20;
    width: min(300px, 86vw);
    padding: 0.75rem;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: var(--rx-color-surface);
    box-shadow: 0 12px 28px rgba(31, 47, 87, 0.14);
}

.rx-order-date-range-title[b-s5e3ut0kq1] {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--rx-color-text-secondary);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rx-order-date-range-option[b-s5e3ut0kq1] {
    display: flex;
    width: 100%;
    border: 0;
    background: transparent;
    justify-content: flex-start;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: var(--rx-radius-sm);
    color: var(--rx-color-text-primary);
    font: inherit;
    cursor: pointer;
    text-align: left;
    text-transform: none;
}

.rx-order-date-range-option:hover[b-s5e3ut0kq1],
.rx-order-date-range-option.is-selected[b-s5e3ut0kq1] {
    background: rgba(31, 47, 87, 0.08);
    color: var(--rx-color-primary);
}

.rx-order-date-range-option.is-selected[b-s5e3ut0kq1] {
    font-weight: 700;
}

.rx-order-date-range-divider[b-s5e3ut0kq1] {
    margin: 0.5rem 0 0.625rem;
}

.rx-order-custom-date-range[b-s5e3ut0kq1] {
    display: grid;
    gap: 0.5rem;
}

.rx-order-date-input[b-s5e3ut0kq1] {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 7px 10px;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-sm);
    background-color: var(--rx-color-surface);
    color: var(--rx-color-text-primary);
    font-size: 0.875rem;
}

.rx-order-date-input:focus[b-s5e3ut0kq1] {
    border-color: var(--rx-color-primary);
    box-shadow: 0 0 0 2px rgba(31, 47, 87, 0.12);
    outline: none;
}

@media (max-width: 959.98px) {
    .rx-order-filter-top-row[b-s5e3ut0kq1] {
        align-items: stretch;
        flex-direction: column;
    }

    .rx-order-filter-search[b-s5e3ut0kq1] {
        flex-basis: auto;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    /*
        Four controls that competed for one row now sit in a fixed 2x2 block:
        predictable, equal-width targets instead of a ragged wrap whose shape
        changed with the label text ("Advanced Filters" / "Hide Filters").

        All four stay visible. Apply and Reset are deliberately NOT moved behind
        the Advanced Filters disclosure — that would put the control which
        commits a search two taps away, and Apply is what makes typing count.
    */
    .rx-order-filter-actions-shell[b-s5e3ut0kq1]  .rx-order-filter-actions {
        /* MudStack renders .d-flex, whose display is !important. */
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: var(--rx-space-density-sm) !important;
    }

    /* Comfortable one-handed targets. Desktop is untouched: the toolbar's own
       height rules above anchor on a MudPaper and so never applied either. */
    .rx-order-filter-actions-shell[b-s5e3ut0kq1]  .rx-order-filter-button,
    .rx-order-filter-actions-shell[b-s5e3ut0kq1]  .rx-saved-filter-trigger {
        width: 100%;
        min-height: 40px;
        height: 40px;
    }

    .rx-order-filter-search[b-s5e3ut0kq1]  .mud-input-root {
        min-height: 40px;
        height: 40px;
    }

    /* The status strip scrolls itself; its slot must never widen the page. */
    .rx-order-status-filter-slot[b-s5e3ut0kq1] {
        min-width: 0;
        max-width: 100%;
    }

    .rx-order-filter-control[b-s5e3ut0kq1] {
        width: min(100%, 320px);
    }
}

@media (max-width: 599.98px) {
    .rx-order-filter-actions[b-s5e3ut0kq1]  .mud-button-root,
    .rx-order-filter-actions[b-s5e3ut0kq1]  .rx-saved-filter-trigger {
        flex: 1 1 auto;
    }

    .rx-order-filter-control[b-s5e3ut0kq1] {
        width: 100%;
    }
}
/* /Components/Orders/OrderGrid.razor.rz.scp.css */
.rx-order-row-actions[b-17uzg1h8pv] {
    min-height: 2rem;
    justify-content: center;
}

/*
    ---------------------------------------------------------------------------
    Mobile order cards
    ---------------------------------------------------------------------------

    MudTable already stacks each row into label/value pairs below its
    Breakpoint.Sm (960px, class .mud-sm-table). What it does not do is make that
    stack read as a record: every one of the eight cells kept the desktop grid's
    12px/14px cell padding, so a single order occupied most of a phone screen in
    mostly empty space.

    These rules turn the stack MudBlazor already produces into a card. They add
    no markup, no state, and no second table — the desktop <table> above 960px is
    untouched, and every value, chip, tooltip and action is the same element.

    Deliberately local to Orders rather than folded into
    wwwroot/delivery-agent-mobile.css: see the reuse note in the task report.
    The recipe (border, radius, surface, --rx-shadow-card) is the same one, so
    the two screens still look like one application.
*/
@media (max-width: 959.98px) {

    /*
        The cards are the boundary. Leaving the grid's own frame on would draw a
        box around a list of boxes — the same thing the Delivery Agent lists
        removed.
    */
    .rx-order-grid-host[b-17uzg1h8pv]  .rx-order-grid.rx-admin-grid-surface {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .rx-order-grid-host[b-17uzg1h8pv]  .rx-order-table.mud-sm-table {
        background-color: transparent;
        box-shadow: none;
    }

    /* One body row, one card. Scoped to .mud-table-body on purpose: MudBlazor
       hides the header row with .mud-sm-table .mud-table-root .mud-table-head
       .mud-table-row{display:none}, which this rule would otherwise outrank and
       turn back into an empty card above the list. */
    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-row {
        display: block;
        padding: var(--rx-space-density-md);
        border: 1px solid var(--rx-color-border);
        border-radius: var(--rx-radius-lg);
        background: var(--rx-color-surface);
        box-shadow: var(--rx-shadow-card);
    }

    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-row + .mud-table-row {
        margin-top: var(--rx-space-density-md);
    }

    /*
        The whitespace, which was padding rather than layout.

        app.css gives every admin-grid cell 12px/14px, which is right for a
        desktop table row and wrong for eight stacked cells: it alone put ~190px
        of air in one card. MudBlazor's own stacked cell — label left, value
        right, one line each — is kept, because with eight fields putting the
        label on its own line costs more height than the padding ever did.
    */
    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell {
        align-items: baseline;
        gap: var(--rx-space-density-md);
        padding: var(--rx-space-density-xs) 0;
        border: none;
    }

    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell:last-child {
        border-bottom: none;
    }

    /* The column name, from data-label. Quiet, never the loudest thing. */
    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell:before {
        padding-right: 0;
        padding-inline-end: 0;
        color: var(--rx-color-text-secondary);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /*
        Order, Status and Actions are self-evident, so they lose their
        labels: "#1042" and a status chip read as an order on sight, while
        "ORDER  #1042" reads as a form field.
    */
    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Order"]:before,
    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"]:before,
    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Order"] {
        padding-top: 0;
    }

    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Order"] .mud-typography {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    /* The figure the card is about. */
    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Total"] {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        text-align: start;
    }

    /* Free text of unknown length must wrap, never widen the card. */
    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell .mud-typography,
    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Customer"] {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /*
        Actions take the full width beneath the facts, separated by a rule: the
        controls already say what they do, so the label goes.
    */
    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] {
        align-items: stretch;
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .rx-order-row-actions {
        justify-content: flex-start;
    }

    /* Comfortable to tap one-handed, in motion. */
    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-height: 40px;
        min-width: 40px;
    }

    /* Empty and loading states are rows too, and must not become cards. */
    .rx-order-grid-host[b-17uzg1h8pv]  .mud-sm-table .mud-table-body .mud-table-row:has(.mud-table-cell[colspan]) {
        border: none;
        background: transparent;
        box-shadow: none;
    }
}
/* /Components/Orders/QuickStatusFilters.razor.rz.scp.css */
/*
    NOTE — the two rules below have never applied.

    They target `.rx-quick-status-list` and `.rx-quick-status-button` directly,
    which compiles to `.rx-quick-status-list[b-…]`. Those classes sit on
    <MudStack> and <MudButton>, and Blazor's CSS isolation stamps its scope
    attribute onto HTML elements only — never onto a child component's root. So
    the attribute is not there and the selectors match nothing: the desktop
    status row is MudBlazor's own small-button styling, not this.

    They are left exactly as they are on purpose. Making them live would change
    the desktop status row (25px pills, 999px radius), and desktop is frozen for
    this task. Fixing them is a separate, deliberate change.

    The mobile block underneath goes through `.rx-quick-status-host`, a plain
    <div> in this component's own markup, which does carry the scope attribute —
    so `::deep` from it reaches the MudBlazor elements and actually applies.
*/
.rx-quick-status-list[b-90czyhhjgf] {
    flex-wrap: wrap;
    min-width: 0;
    gap: 0.3125rem !important;
}

.rx-quick-status-button[b-90czyhhjgf] {
    border-radius: 999px;
    min-height: 25px;
    height: 25px;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    text-transform: none;
}

/*
    Mobile: one scrollable line, never a wrapped block.

    Eight statuses cannot fit across a phone, and wrapping them turned the filter
    row into a two-line wall that pushed the results off screen. A single strip
    the thumb can swipe keeps every status reachable at the cost of one row.

    959.98px is the breakpoint this screen's page and toolbar already use.
*/
@media (max-width: 959.98px) {
    .rx-quick-status-host[b-90czyhhjgf] {
        /* Lets the strip shrink inside the toolbar instead of widening the page. */
        min-width: 0;
        max-width: 100%;
    }

    .rx-quick-status-host[b-90czyhhjgf]  .rx-quick-status-list {
        /* Beats the .flex-wrap utility MudStack can emit, which is !important. */
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        /* Momentum scrolling on iOS, and a strip that settles on a chip. */
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        /* The cut-off chip is the affordance; a scrollbar would eat a third of
           the control's height. */
        scrollbar-width: none;
        padding-bottom: 1px;
    }

    .rx-quick-status-host[b-90czyhhjgf]  .rx-quick-status-list::-webkit-scrollbar {
        display: none;
    }

    .rx-quick-status-host[b-90czyhhjgf]  .rx-quick-status-button {
        /* Never shrink to fit: overflowing the strip is the point. */
        flex: 0 0 auto;
        /* A thumb's target, and the pill shape the desktop rule above intended. */
        min-height: 32px;
        height: 32px;
        border-radius: var(--rx-radius-pill);
        padding-right: 0.75rem;
        padding-left: 0.75rem;
        text-transform: none;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}
/* /Components/Orders/SavedFilterSelector.razor.rz.scp.css */
.rx-saved-filter-trigger[b-mk5o2f3ere] {
    border-radius: var(--rx-radius-md);
    min-height: 2.125rem;
    height: 2.125rem;
    padding: 0.3125rem 0.875rem;
    white-space: nowrap;
    text-transform: none;
}

.rx-saved-filter-selector[b-mk5o2f3ere] {
    width: min(360px, 84vw);
    padding: 0.75rem;
    background: var(--rx-color-surface);
}

.rx-saved-filter-actions[b-mk5o2f3ere] {
    align-items: center;
}

@media (max-width: 959.98px) {
    .rx-saved-filter-actions[b-mk5o2f3ere] {
        justify-content: stretch;
    }
}
/* /Components/Restaurants/RestaurantBrandingColorField.razor.rz.scp.css */
.rx-theme-color-preview[b-0rnwf1oxog] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: -0.25rem;
}

.rx-theme-color-preview-swatch[b-0rnwf1oxog] {
    height: 28px;
    width: 100%;
    border: 1px solid var(--rx-color-border, #D9DEE7);
    border-radius: 6px;
    box-sizing: border-box;
}

.rx-theme-color-preview-swatch--empty[b-0rnwf1oxog] {
    background: var(--rx-color-background, #F4F6F9);
}

.rx-theme-color-preview-swatch--cta[b-0rnwf1oxog] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: transparent;
}

.rx-theme-color-preview-swatch--outlined[b-0rnwf1oxog] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rx-color-surface, #FFFFFF);
    border-width: 1px;
    border-style: solid;
}

.rx-theme-color-preview-sample[b-0rnwf1oxog] {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}

.rx-theme-color-preview-label[b-0rnwf1oxog] {
    margin: 0;
}

.rx-theme-color-helper[b-0rnwf1oxog] {
    margin-top: 0;
}

.rx-theme-color-warning-slot[b-0rnwf1oxog] {
    min-height: 2.75rem;
}

.rx-theme-color-contrast-warning[b-0rnwf1oxog] {
    margin: 0;
}
/* /Components/Restaurants/RestaurantColorSwatch.razor.rz.scp.css */
.rx-restaurant-color-swatch[b-uoqf2d8v4a] {
    flex: 0 0 auto;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--rx-color-border, #D9DEE7);
    border-radius: 4px;
    box-sizing: border-box;
    vertical-align: middle;
}
/* /Components/Restaurants/RestaurantDetailItem.razor.rz.scp.css */
.rx-restaurant-detail-item[b-x5zkatalm6] {
    display: grid !important;
    grid-template-columns: minmax(var(--rx-detail-label-width), var(--rx-detail-label-width)) minmax(0, auto);
    column-gap: 1.25rem;
    align-items: center;
    justify-content: start;
    min-height: var(--rx-detail-row-min-height);
    padding: var(--rx-space-detail-row-padding-y) 0;
}

.rx-restaurant-detail-label[b-x5zkatalm6] {
    white-space: nowrap;
    line-height: 1.25rem;
    text-transform: none;
}

.rx-restaurant-detail-value-row[b-x5zkatalm6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
}

.rx-restaurant-detail-value[b-x5zkatalm6] {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.25rem;
    text-align: left;
}

.rx-restaurant-detail-value-nowrap[b-x5zkatalm6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .rx-restaurant-detail-item[b-x5zkatalm6] {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
        align-items: start;
    }
}
/* /Layouts/MainLayout.razor.rz.scp.css */
[b-4aq355pc2l] .rx-app-bar {
    border-bottom: 1px solid var(--rx-color-primary-light);
    background: var(--rx-color-primary);
    color: var(--rx-color-surface);
}

.rx-page-title[b-4aq355pc2l] {
    font-weight: 700;
}

[b-4aq355pc2l] .rx-profile-button {
    border-radius: var(--rx-radius-lg);
    min-height: 38px;
    padding: 0.25rem 0.6rem 0.25rem 0.35rem;
    text-transform: none;
    transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

[b-4aq355pc2l] .rx-profile-button:hover,
[b-4aq355pc2l] .rx-profile-button:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

[b-4aq355pc2l] .rx-profile-button:active {
    transform: translateY(1px);
}

[b-4aq355pc2l] .rx-profile-avatar {
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: color-mix(in srgb, var(--rx-color-primary-light) 74%, var(--rx-color-surface));
    color: var(--rx-color-surface);
    font-size: 0.75rem;
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: 0.02em;
}

[b-4aq355pc2l] .rx-profile-name {
    color: var(--rx-color-surface);
    font-weight: var(--rx-font-weight-semibold);
    letter-spacing: 0.005em;
}

[b-4aq355pc2l] .rx-account-menu .mud-popover {
    border-radius: 14px;
    background: transparent;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.17), 0 8px 22px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    animation: rx-account-menu-enter-b-4aq355pc2l 180ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
}

[b-4aq355pc2l] .rx-account-menu .mud-list,
[b-4aq355pc2l] .rx-account-menu .mud-menu-list {
    min-width: min(344px, calc(100vw - 24px));
    padding: 0;
    border: 1px solid rgba(217, 222, 231, 0.84);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
}

.rx-account-card[b-4aq355pc2l] {
    width: min(344px, calc(100vw - 24px));
    padding: 1rem 1rem 0.72rem;
    background:
        radial-gradient(circle at 15% 0%, rgba(217, 164, 65, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(31, 47, 87, 0.045) 0%, rgba(255, 255, 255, 0) 56%),
        var(--rx-color-surface);
}

.rx-account-header[b-4aq355pc2l] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: center;
    padding-bottom: 0.82rem;
}

.rx-account-avatar-shell[b-4aq355pc2l] {
    position: relative;
    display: inline-flex;
    line-height: 0;
}

[b-4aq355pc2l] .rx-account-avatar {
    width: 64px;
    height: 64px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background:
        linear-gradient(135deg, var(--rx-color-primary) 0%, var(--rx-color-primary-light) 64%, color-mix(in srgb, var(--rx-color-accent) 38%, var(--rx-color-primary-light)) 100%);
    color: var(--rx-color-surface);
    box-shadow: 0 14px 28px rgba(31, 47, 87, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-size: 1.04rem;
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: 0.035em;
}

.rx-account-presence-dot[b-4aq355pc2l] {
    position: absolute;
    right: 3px;
    bottom: 4px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--rx-color-surface);
    border-radius: 999px;
    background: var(--rx-color-success);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.12);
}

.rx-account-identity[b-4aq355pc2l] {
    min-width: 0;
}

.rx-account-name[b-4aq355pc2l] {
    overflow: hidden;
    color: var(--rx-color-text-primary);
    font-size: 1.03rem;
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-account-email[b-4aq355pc2l] {
    overflow: hidden;
    margin-top: 0.125rem;
    color: var(--rx-color-text-secondary);
    font-size: 0.76rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-account-meta[b-4aq355pc2l] {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    margin-top: 0.46rem;
    color: color-mix(in srgb, var(--rx-color-success) 62%, var(--rx-color-text-secondary));
    font-size: 0.71rem;
    font-weight: var(--rx-font-weight-medium);
}

.rx-account-meta-dot[b-4aq355pc2l] {
    width: 6px;
    height: 6px;
    border-radius: var(--rx-radius-pill);
    background: var(--rx-color-success);
}

.rx-account-section[b-4aq355pc2l] {
    padding: 0.66rem 0;
    box-shadow: inset 0 1px 0 rgba(232, 236, 242, 0.72);
}

.rx-account-section-label[b-4aq355pc2l] {
    margin-bottom: 0.26rem;
    color: color-mix(in srgb, var(--rx-color-text-secondary) 84%, var(--rx-color-surface));
    font-size: 0.66rem;
    font-weight: var(--rx-font-weight-semibold);
    letter-spacing: 0.052em;
    text-transform: uppercase;
}

.rx-account-restaurant-row[b-4aq355pc2l] {
    display: flex;
    max-width: 100%;
    align-items: center;
    gap: 0.48rem;
    color: var(--rx-color-text-primary);
    font-size: 0.86rem;
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.35;
}

.rx-account-restaurant-row span[b-4aq355pc2l] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-account-restaurant-row[b-4aq355pc2l]  .mud-icon-root {
    color: var(--rx-color-accent);
}

.rx-account-restaurant-row-empty[b-4aq355pc2l] {
    color: color-mix(in srgb, var(--rx-color-warning) 82%, var(--rx-color-text-primary));
}

.rx-account-restaurant-row-empty[b-4aq355pc2l]  .mud-icon-root {
    color: var(--rx-color-warning);
}

.rx-account-access-grid[b-4aq355pc2l] {
    display: grid;
    gap: 0.58rem;
}

.rx-account-access-primary[b-4aq355pc2l] {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--rx-color-text-primary);
    font-size: 0.94rem;
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: -0.006em;
    line-height: 1.22;
}

.rx-account-access-primary[b-4aq355pc2l]  .mud-icon-root {
    color: color-mix(in srgb, var(--rx-color-accent) 82%, var(--rx-color-primary));
    filter: drop-shadow(0 1px 1px rgba(217, 164, 65, 0.18));
}

.rx-account-access-secondary[b-4aq355pc2l] {
    overflow: hidden;
    color: var(--rx-color-text-secondary);
    font-size: 0.79rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-4aq355pc2l] .rx-account-divider {
    margin: 0;
    border-color: rgba(232, 236, 242, 0.82);
}

.rx-account-actions[b-4aq355pc2l] {
    padding: 0.38rem;
}

.rx-account-action[b-4aq355pc2l] {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 0.66rem;
    padding: 0 0.62rem;
    border-radius: var(--rx-radius-md);
    color: var(--rx-color-text-primary);
    font-size: 0.84rem;
    font-weight: var(--rx-font-weight-medium);
    outline: none;
    transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rx-account-action[b-4aq355pc2l]  .mud-icon-root {
    color: var(--rx-color-text-secondary);
    transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rx-account-action-placeholder[b-4aq355pc2l],
.rx-account-action-link[b-4aq355pc2l] {
    cursor: pointer;
}

/* The one active item in this group; anchors need their own colour and underline reset. */
.rx-account-action-link[b-4aq355pc2l] {
    text-decoration: none;
    color: var(--rx-color-text-primary);
}

.rx-account-action-placeholder:hover[b-4aq355pc2l],
.rx-account-action-placeholder:focus-visible[b-4aq355pc2l],
.rx-account-action-link:hover[b-4aq355pc2l],
.rx-account-action-link:focus-visible[b-4aq355pc2l] {
    background: color-mix(in srgb, var(--rx-color-primary) 5%, var(--rx-color-surface));
    box-shadow: inset 0 0 0 1px rgba(31, 47, 87, 0.035);
    transform: translateX(2px);
}

.rx-account-action-placeholder:hover[b-4aq355pc2l]  .mud-icon-root,
.rx-account-action-placeholder:focus-visible[b-4aq355pc2l]  .mud-icon-root,
.rx-account-action-link:hover[b-4aq355pc2l]  .mud-icon-root,
.rx-account-action-link:focus-visible[b-4aq355pc2l]  .mud-icon-root {
    color: var(--rx-color-primary);
    transform: translateX(1px);
}

.rx-account-action-placeholder:focus-visible[b-4aq355pc2l],
.rx-account-action-link:focus-visible[b-4aq355pc2l] {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--rx-color-primary) 20%, transparent),
        0 0 0 2px color-mix(in srgb, var(--rx-color-primary) 10%, transparent);
}

[b-4aq355pc2l] .rx-account-logout {
    min-height: 42px;
    margin: 0.38rem;
    padding: 0 0.68rem;
    border-radius: var(--rx-radius-md);
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
    transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

[b-4aq355pc2l] .rx-account-logout .mud-icon-root {
    color: var(--rx-color-text-secondary);
    transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

[b-4aq355pc2l] .rx-account-logout:hover,
[b-4aq355pc2l] .rx-account-logout:focus-visible {
    background: color-mix(in srgb, var(--rx-color-danger) 8%, var(--rx-color-surface));
    color: var(--rx-color-danger);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rx-color-danger) 10%, transparent);
    transform: translateX(2px);
}

[b-4aq355pc2l] .rx-account-logout:hover .mud-icon-root,
[b-4aq355pc2l] .rx-account-logout:focus-visible .mud-icon-root {
    color: var(--rx-color-danger);
    transform: translateX(1px);
}

@keyframes rx-account-menu-enter-b-4aq355pc2l {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-4aq355pc2l] .rx-account-menu .mud-popover,
    [b-4aq355pc2l] .rx-profile-button,
    .rx-account-action[b-4aq355pc2l],
    .rx-account-action[b-4aq355pc2l]  .mud-icon-root,
    [b-4aq355pc2l] .rx-account-logout,
    [b-4aq355pc2l] .rx-account-logout .mud-icon-root,
    [b-4aq355pc2l] .rx-drawer.mud-drawer,
    [b-4aq355pc2l] .rx-main-content {
        animation: none;
        transition: none;
        margin-top:10px !important;
    }
}

/* Nav is its own surface: hairline edge + right-edge depth.
   MudBlazor sets overflow-y:auto on .mud-drawer, which clips box-shadow —
   scroll lives on .mud-drawer-content so the edge shadow can paint into the workspace.

   Width: Fixed+Responsive drawers ignore MudDrawer.Width and use theme
   --mud-drawer-width-left (ThemeTokens.LayoutProperties.DrawerWidthLeft).
   Keep an explicit width here so the nav cannot fall back to the 240px default. */
[b-4aq355pc2l] .rx-drawer.mud-drawer {
    --mud-drawer-width-left: var(--rx-admin-nav-drawer-width, 320px);
    overflow: visible;
    border-right: 1px solid var(--rx-color-border-strong);
    background: var(--rx-color-surface);
    box-shadow: var(--rx-shadow-nav-edge);
    z-index: var(--mud-zindex-drawer);
    transition: transform var(--rx-workspace-transition),
                visibility var(--rx-workspace-transition),
                opacity var(--rx-workspace-transition);
}

[b-4aq355pc2l] .rx-drawer.mud-drawer.mud-drawer-pos-left.mud-drawer--open {
    width: var(--rx-admin-nav-drawer-width, 320px);
    max-width: var(--rx-admin-nav-drawer-width, 320px);
}

[b-4aq355pc2l] .rx-drawer.rx-drawer-focused-workspace.mud-drawer {
    /* Nav stays visible for orientation; dimmed and non-interactive under the workspace. */
    opacity: var(--rx-workspace-nav-dim-opacity);
    pointer-events: none;
}

[b-4aq355pc2l] .rx-drawer > .mud-drawer-content {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
}

[b-4aq355pc2l] .rx-main-content {
    padding-top:5px;
    position: relative;
    z-index: 0;
    min-height: 100vh;
    background: var(--rx-color-surface-muted);
    transition: margin var(--rx-workspace-transition),
                padding var(--rx-workspace-transition);
}

[b-4aq355pc2l] .rx-content-container {
    padding: 1rem;
}

@media (min-width: 960px) {
    [b-4aq355pc2l] .rx-content-container {
        padding: 1.5rem 2rem 2rem;
    }
}

@media (max-width: 600px) {
    .rx-account-card[b-4aq355pc2l] {
        width: min(328px, calc(100vw - 20px));
        padding: 0.9rem 0.9rem 0.65rem;
    }

    .rx-account-header[b-4aq355pc2l] {
        gap: 0.75rem;
    }

    [b-4aq355pc2l] .rx-account-avatar {
        width: 58px;
        height: 58px;
    }
}
/* /Pages/Account/SecurityPage.razor.rz.scp.css */
/* Scoped to the security page. No global, layout, or scroll-container CSS is touched. */

.rx-passkey-panel[b-s0vropjhaj] {
    max-width: 720px;
}

.rx-passkey-header[b-s0vropjhaj] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.rx-passkey-row[b-s0vropjhaj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.rx-passkey-meta[b-s0vropjhaj] {
    min-width: 0;
    flex: 1 1 12rem;
}

.rx-passkey-item[b-s0vropjhaj] {
    border-bottom: 1px solid var(--mud-palette-divider, #e5e7eb);
}

.rx-passkey-item:last-child[b-s0vropjhaj] {
    border-bottom: none;
}

.rx-passkey-gesture[b-s0vropjhaj] {
    border: 1px dashed var(--mud-palette-primary, #5b21b6);
    border-radius: 8px;
}

.rx-passkey-create[b-s0vropjhaj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 8px;
    background: var(--mud-palette-primary, #5b21b6);
    color: var(--mud-palette-primary-text, #ffffff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: normal;
    text-align: center;
}

.rx-passkey-create:focus-visible[b-s0vropjhaj] {
    outline: 2px solid var(--mud-palette-primary, #5b21b6);
    outline-offset: 2px;
}

/* Stacks cleanly at 320px, where the header and each row would otherwise crowd. */
@media (max-width: 480px) {
    .rx-passkey-header[b-s0vropjhaj] {
        flex-direction: column;
        align-items: stretch;
    }

    .rx-passkey-row[b-s0vropjhaj] {
        flex-direction: column;
        align-items: stretch;
    }

    .rx-passkey-row .mud-button-root[b-s0vropjhaj] {
        width: 100%;
    }
}
/* /Pages/Dashboard.razor.rz.scp.css */
.rx-dashboard-hero[b-w7cvhejtsd] {
    padding: 1.5rem;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-lg);
    background: var(--rx-color-surface);
    box-shadow: var(--rx-shadow-card);
}

.rx-dashboard-title[b-w7cvhejtsd] {
    color: var(--rx-color-text-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rx-dashboard-empty[b-w7cvhejtsd] {
    padding: 3rem 1.5rem;
    border: 1px dashed var(--rx-color-border);
    border-radius: var(--rx-radius-lg);
    background: var(--rx-color-surface);
}

.rx-dashboard-section[b-w7cvhejtsd] {
    padding: 1.25rem;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-lg);
    background: var(--rx-color-surface);
    box-shadow: var(--rx-shadow-card);
}

.rx-dashboard-section-title[b-w7cvhejtsd] {
    color: var(--rx-color-text-primary);
    font-weight: 700;
}

.rx-dashboard-status-item[b-w7cvhejtsd],
.rx-dashboard-channel-item[b-w7cvhejtsd] {
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: var(--rx-color-background);
}

.rx-dashboard-status-item[b-w7cvhejtsd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rx-dashboard-channel-item[b-w7cvhejtsd] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    background: var(--rx-color-surface);
}

.rx-dashboard-status-value[b-w7cvhejtsd] {
    color: var(--rx-color-text-primary);
    font-weight: 700;
}

.rx-dashboard-channel-value[b-w7cvhejtsd] {
    color: var(--rx-color-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rx-dashboard-channel-name[b-w7cvhejtsd] {
    color: var(--rx-color-text-primary);
    font-weight: 600;
}

.rx-dashboard-recent-table[b-w7cvhejtsd] {
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    overflow: hidden;
}
/* /Pages/DeliveryAgents/AgentCashMoneyChip.razor.rz.scp.css */
/*
    Ranking and sizing for the money chip.

    rx-status-chip already supplies the soft filled surface, border and text colour — all three
    derived from --rx-status-color. Each variant below sets only that property, on the wrapper, and
    lets it inherit down to the chip. No colour is restated and no literal is used.
*/

.rx-agent-cash-money[b-9iuc5mf17y] {
    display: inline-flex;
    min-width: 0;
}

/*
    Each variant sets --rx-status-color ON the chip, not on the wrapper.

    That distinction matters: .rx-status-chip declares its own neutral fallback for that property,
    and a declaration applied directly to an element always beats one inherited from an ancestor.
    Setting it on the wrapper therefore had no effect at all and every chip rendered grey. Reaching
    the chip through ::deep puts the declaration on the same element, where the higher specificity
    decides it.
*/

/* Cash still outside the restaurant. The danger semantic, which rx-status-chip renders as a soft
   tint rather than a solid fill — pale red ground, red text — so it reads as attention, not alarm. */
.rx-agent-cash-money--attention[b-9iuc5mf17y]  .rx-agent-cash-money-chip.mud-chip {
    --rx-status-color: var(--rx-color-danger);
}

/* Handed over more than was collected. A different problem from cash being out, so it keeps its
   own colour rather than sharing the one above. */
.rx-agent-cash-money--discrepancy[b-9iuc5mf17y]  .rx-agent-cash-money-chip.mud-chip {
    --rx-status-color: var(--rx-color-warning);
}

/* Settled: readable, no longer competing with the agents who are still holding cash. */
.rx-agent-cash-money--settled[b-9iuc5mf17y]  .rx-agent-cash-money-chip.mud-chip {
    --rx-status-color: var(--rx-color-text-secondary);
}

.rx-agent-cash-money[b-9iuc5mf17y]  .rx-agent-cash-money-chip.mud-chip {
    /* Dense enough for a table row without losing the filled surface. */
    min-height: 24px;
    height: 24px;
    margin: 0;

    /* Figures line up down the column. */
    font-variant-numeric: tabular-nums;
    font-weight: var(--rx-font-weight-semibold);
    white-space: nowrap;

    /* Informational, not interactive. */
    cursor: default;
}

.rx-agent-cash-money[b-9iuc5mf17y]  .rx-agent-cash-money-chip.mud-chip:hover {
    box-shadow: none;
    opacity: 1;
}
/* /Pages/DeliveryAgents/AgentCashOutstandingKpi.razor.rz.scp.css */
/*
    The positive-semantic tint for the primary outstanding figure.

    rx-ops-kpi supplies the box, the 22px bold value and the tabular figures. These rules only swap
    its neutral tint for the success semantic and re-space the label, which the base class positions
    for a label sitting above its value rather than below it.
*/

.rx-agent-cash-kpi[b-7jxckh0x31] {
    background: color-mix(in srgb, var(--rx-color-success) 10%, var(--rx-color-surface));
    border-color: color-mix(in srgb, var(--rx-color-success) 26%, var(--rx-color-border));
    min-width: 0;
}

.rx-agent-cash-kpi__value[b-7jxckh0x31] {
    /* The same readable-green expression .rx-admin-status-badge already uses: mostly text colour,
       tinted, so contrast does not rest on the accent being dark enough on its own. */
    color: color-mix(in srgb, var(--rx-color-success) 68%, var(--rx-color-text-primary));
    white-space: nowrap;
}

.rx-agent-cash-kpi__label[b-7jxckh0x31] {
    margin-top: 4px;
    margin-bottom: 0;
}
/* /Pages/DeliveryAgents/AgentCashPage.razor.rz.scp.css */
/*
    Agent Cash summary hierarchy.

    Everything here is a token or an existing global class; the rules below only arrange them and
    tint the two variants this screen needs. The KPI box itself is .rx-ops-kpi, already used by the
    Operations screens for a headline figure.
*/

.rx-agent-cash-summary[b-09kfi4wx7t] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rx-space-density-lg);
    min-width: 0;
}

.rx-agent-cash-summary-lead[b-09kfi4wx7t] {
    display: flex;
    align-items: flex-start;
    gap: var(--rx-space-density-md);

    /* Takes the room the trailing pill does not, and shrinks before the page does. */
    flex: 1 1 320px;
    min-width: 0;
}

/* Soft circular container for the existing section icon. */
.rx-agent-cash-summary-icon[b-09kfi4wx7t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--rx-radius-pill);
    background: color-mix(in srgb, var(--rx-color-primary) 10%, var(--rx-color-surface));
    color: var(--rx-color-primary);
}

.rx-agent-cash-summary-heading[b-09kfi4wx7t] {
    display: flex;
    flex-direction: column;
    gap: var(--rx-space-density-sm);
    min-width: 0;
}

.rx-agent-cash-summary-trailing[b-09kfi4wx7t] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 100%;

    /* Soft blue, set here and inherited by the rx-status-chip inside. Secondary to the green
       figure beside it: an operational count, not a second money KPI. */
    --rx-status-color: var(--rx-color-primary);
}

.rx-agent-cash-summary-trailing[b-09kfi4wx7t]  .rx-agent-cash-agents-chip.mud-chip {
    height: auto;
    min-height: var(--rx-status-badge-height);
    padding-top: 4px;
    padding-bottom: 4px;
    margin: 0;
    font-weight: var(--rx-font-weight-medium);

    /* Wraps on a narrow screen instead of pushing the card sideways. */
    white-space: normal;

    /* Informational, not a control. */
    cursor: default;
}

.rx-agent-cash-summary-trailing[b-09kfi4wx7t]  .rx-agent-cash-agents-chip.mud-chip:hover {
    box-shadow: none;
    opacity: 1;
}

/* One KPI box per currency, wrapping rather than overflowing. */
.rx-agent-cash-kpi-row[b-09kfi4wx7t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rx-space-density-md);
    min-width: 0;
}

@media (max-width: 899.98px) {
    .rx-agent-cash-summary-trailing[b-09kfi4wx7t] {
        /* Drops under the figure rather than squeezing beside it. Outstanding stays first. */
        flex: 1 1 100%;
    }
}

/* Heading for the middle band of the hierarchy: who is holding the cash. */
.rx-agent-cash-table-heading[b-09kfi4wx7t] {
    display: flex;
    align-items: center;
    gap: var(--rx-space-density-sm);
    min-width: 0;
}

.rx-agent-cash-table-heading-icon[b-09kfi4wx7t] {
    flex-shrink: 0;
    color: var(--rx-color-primary);
}

/*
    Actions column: a labelled button, not an icon button.

    The shared .rx-admin-grid-actions rules size that cell for a single icon button — 5.75rem wide,
    with every .mud-button-root inside forced to 2rem square. A text button under those rules is
    squeezed to 32px and its label clipped to "Record Hand...". These overrides are scoped to this
    grid, so every other screen keeps the icon sizing it relies on.
*/
.rx-agent-cash-grid[b-09kfi4wx7t]  .rx-admin-grid-actions {
    /* Sized to its content instead of to an icon. The minimum holds the column steady across rows
       where the action is absent, so the table does not shift as it is filtered. */
    width: 1%;
    min-width: 12.5rem;
    white-space: nowrap;
    text-align: right;
}

.rx-agent-cash-grid[b-09kfi4wx7t]  .rx-admin-grid-actions .rx-admin-grid-header {
    justify-content: flex-end;
}

.rx-agent-cash-grid[b-09kfi4wx7t]  .rx-admin-grid-actions .mud-button-root {
    /* Undoes the 2rem square: intrinsic width, real button padding, one line always. */
    width: auto;
    height: auto;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    /* In the mobile record list the cell is a card field, not a column: let it take the width it
       needs and sit with the rest of the fields. */
    .rx-agent-cash-grid[b-09kfi4wx7t]  .rx-admin-grid-actions {
        width: auto;
        min-width: 0;
        text-align: left;
    }
}
/* /Pages/DeliveryAgents/AgentCashSection.razor.rz.scp.css */
/*
    Section with a filled header band.

    Every value below is an existing token. The band reuses the pairing .rx-drawer-header already
    established for a primary-filled surface — background var(--rx-color-primary) with
    var(--rx-color-surface) text — so this introduces no new shade and inherits the same contrast.
*/

.rx-agent-cash-section[b-b078ukf98p] {
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-lg);
    background: var(--rx-color-surface);
    box-shadow: var(--rx-shadow-card);

    /* Lets the band reach the card's edges and take its rounded top corners, which is what makes
       it read as a section boundary rather than a coloured box floating inside one. */
    overflow: hidden;
}

.rx-agent-cash-section-header[b-b078ukf98p] {
    display: flex;
    align-items: flex-start;
    gap: var(--rx-space-density-md);

    /* Comfortable, not a banner: two short lines of text and an icon. */
    padding: var(--rx-space-density-md) var(--rx-space-density-lg);

    background: var(--rx-color-primary);
    color: var(--rx-color-surface);
    border-bottom: 1px solid var(--rx-color-primary-light);
}

.rx-agent-cash-section-icon[b-b078ukf98p] {
    flex-shrink: 0;

    /* Optical alignment with the title's cap height rather than its line box. */
    margin-top: 2px;
    color: var(--rx-color-surface);
}

.rx-agent-cash-section-heading[b-b078ukf98p] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rx-agent-cash-section-title[b-b078ukf98p] {
    color: var(--rx-color-surface);
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: 0;
}

.rx-agent-cash-section-description[b-b078ukf98p] {
    /* Lower emphasis than the title while still clearing contrast against the band. */
    color: color-mix(in srgb, var(--rx-color-surface) 82%, var(--rx-color-primary));
}

.rx-agent-cash-section-body[b-b078ukf98p] {
    display: flex;
    flex-direction: column;
    gap: var(--rx-space-density-lg);
    padding: var(--rx-space-density-lg);

    /* The filter row and table inside can be wide; contain them here so the page itself never
       scrolls sideways. */
    min-width: 0;
}

/* MudBlazor renders MudText and MudIcon as child components, so their elements do not carry this
   sheet's scope attribute. */
[b-b078ukf98p] .rx-agent-cash-section-title {
    color: var(--rx-color-surface);
    font-weight: var(--rx-font-weight-bold);
}

[b-b078ukf98p] .rx-agent-cash-section-description {
    color: color-mix(in srgb, var(--rx-color-surface) 82%, var(--rx-color-primary));
}

[b-b078ukf98p] .rx-agent-cash-section-icon {
    color: var(--rx-color-surface);
}

@media (max-width: 599.98px) {
    .rx-agent-cash-section-header[b-b078ukf98p] {
        /* The band stays full width; only its inner padding tightens. */
        padding: var(--rx-space-density-md);
    }

    .rx-agent-cash-section-body[b-b078ukf98p] {
        padding: var(--rx-space-density-md);
        gap: var(--rx-space-density-md);
    }
}
/* /Pages/DeliveryAgents/DeliveryAgentDetailsPage.razor.rz.scp.css */
/* Reuse Menu Details configuration panel language (scoped; Menu rules are page-scoped). */

.rx-menu-placeholder-title[b-euo7d0b7lg] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
}

.rx-menu-general-section[b-euo7d0b7lg]  .rx-detail-section-divider {
    margin-top: var(--rx-space-density-sm);
    margin-bottom: var(--rx-space-density-md);
}

.rx-menu-configuration-title[b-euo7d0b7lg] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.2;
}

.rx-menu-configuration-panels[b-euo7d0b7lg] {
    width: 100%;
}

.rx-menu-panel-header[b-euo7d0b7lg] {
    width: 100%;
    min-width: 0;
    padding-right: var(--rx-space-density-sm);
}

.rx-menu-panel-title-row[b-euo7d0b7lg] {
    min-width: 0;
}

.rx-menu-panel-content[b-euo7d0b7lg] {
    padding: var(--rx-space-density-sm) 0;
}

.rx-menu-configuration-empty[b-euo7d0b7lg] {
    padding: var(--rx-space-layout-lg) var(--rx-space-layout-md);
    border: 1px dashed var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: color-mix(in srgb, var(--rx-color-background) 72%, var(--rx-color-surface));
    text-align: center;
}

@media (max-width: 599.98px) {
    .rx-menu-panel-header[b-euo7d0b7lg] {
        gap: var(--rx-space-density-sm);
    }
}
/* /Pages/DeliveryAgents/DeliveryAgentListPage.razor.rz.scp.css */
/*
    Delivery Agents List — what is specific to this screen on mobile.

    Shared, opted into rather than restated:

      wwwroot/mobile-record-list.css   rx-mobile-record-list  on the MudTable
      wwwroot/mobile-filter-stack.css  rx-mobile-filter-stack on the filter wrapper

    They supply the card shell, cell density, label typography and the stacked
    full-width filter controls. Only what is genuinely about delivery agents
    lives below.

    960px: the width Breakpoint.Sm actually stacks a MudTable at, and the query
    both shared files use, so all three switch together. There is no min-width
    query in this file — desktop is never reached from here.

    Two anchors, both plain <div>s this page owns: rx-agents-filters and
    rx-agents-grid. Blazor stamps its scope attribute onto HTML elements only,
    never onto a MudBlazor component root, so anchoring on
    rx-admin-filter-toolbar (a MudPaper) or rx-admin-grid-table (a MudTable)
    would match nothing.
*/

@media (max-width: 960px) {

    /* ----------------------------------------------------------- the filters */

    /*
        Four controls stack: search, Catalog State, Availability, and an
        Include-inactive checkbox. The three inputs want the full content width
        and get it from the shared stack.

        The checkbox does not: stretched, its box ends up a thumb's width from
        its own label. It opts back out and sits compact beneath the selects.

        This is the same exception Menu Items and Modifier Groups make for a
        MudSwitch — a third occurrence, and the first with a checkbox rather
        than a switch. Kept local here on purpose: promoting it into the shared
        stack would change approved screens, which is reported separately.
    */
    .rx-agents-filters[b-l297sa3jkj]  .rx-admin-filter-row > .mud-checkbox {
        width: auto;
        align-self: flex-start;
        min-height: 40px;
        margin: 0;
        align-items: center;
    }

    /* ------------------------------------------------------------- the cards */

    /*
        Release the desktop column widths.

        app.css sizes .rx-admin-grid-status (8.75rem, used twice here) and
        -actions (5.75rem) as table columns. Correct for a <td> in a row; on a
        stacked card the same declaration caps the cell itself, squeezing the
        two status chips and leaving the Actions cell too narrow for its divider.
    */
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell {
        width: auto;
    }

    /*
        An agent card reads: who they are, whether they are in the catalogue,
        whether they can take work right now, then how to reach them, what they
        ride, when the record last changed — then the action.

        Done with `order` on a flex column, so no markup, no data and no desktop
        ordering changes. The DOM order is untouched — which is what a screen
        reader follows — and every value keeps its own visible label from
        data-label, so nothing is separated from what it means.
    */
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Agent"] { order: 1; }
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Catalog Status"] { order: 2; }
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Availability"] { order: 3; }
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Contact"] { order: 4; }
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Vehicle"] { order: 5; }
    /* Money the agent is still holding sits above the timestamp: it is the one value on this card
       someone may need to act on today. */
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Outstanding Cash"] { order: 6; }
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Updated"] { order: 7; }
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 8; }

    /*
        Two cells hold two values each — Agent is name over staff code, Contact
        is phone over email. Both stay columns rather than being pushed to
        opposite edges by the shared cell's space-between.
    */
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Agent"],
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Contact"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    /*
        The name is the card's title. Catalog Status directly beneath it says
        whether the agent is in the catalogue at all, so it drops its label the
        way every other RasoiX card's identity-state does.

        Availability keeps its label: "Active" and "Available" are different
        questions, and two unlabelled chips in a row would not say which is
        which. The tooltip on that chip — the UI-hint-only caveat — is untouched.
    */
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Agent"]:before,
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Catalog Status"]:before,
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Agent"] {
        padding-top: 0;
    }

    /*
        Reached through ::deep because the value sits on a MudText, whose root
        never carries the scope attribute. Mobile only.
    */
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Agent"] .rx-admin-grid-primary {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.25;
    }

    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Catalog Status"] {
        padding-top: 0;
        padding-bottom: var(--rx-space-density-xs);
    }

    /* The phone is the field an operator reaches for. */
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Contact"] .rx-admin-grid-primary {
        color: var(--rx-color-text-primary);
        font-weight: 700;
    }

    /*
        The single View action on its own line beneath a rule, at a size a thumb
        can hit. It keeps its existing target and its existing tooltip.
    */
    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] {
        justify-content: flex-end;
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-agents-grid[b-l297sa3jkj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }

    /* -------------------------------------------------------- the pager */

    /*
        This is the first refined screen with real pagination, and it sits
        outside the table so the card rules never reach it. Its two chevrons are
        Size.Small, which is a mouse target; on a phone they get a thumb's.

        Wrapping is allowed so "Page 1 of 5 (48 total)" and the chevrons never
        overflow a 320px screen. Paging behaviour itself is untouched.
    */
    .rx-agents-grid[b-l297sa3jkj]  .rx-agent-pager {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .rx-agents-grid[b-l297sa3jkj]  .rx-agent-pager .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }
}
/* /Pages/Discounts/DiscountListPage.razor.rz.scp.css */
/*
    Discount List — what is specific to this screen on mobile.

    Shared, opted into rather than restated:

      wwwroot/mobile-record-list.css   rx-mobile-record-list  on the MudTable
      wwwroot/mobile-filter-stack.css  rx-mobile-filter-stack on the filter wrapper

    They supply the card shell, cell density, label typography and the stacked
    full-width filter controls. The filter row is a search field and one Status
    select — the pair the stack was built for — and this page declares no inline
    min-widths, so nothing about the filters is repeated here.

    960px: the width Breakpoint.Sm actually stacks a MudTable at, and the query
    both shared files use, so all three switch together. There is no min-width
    query in this file — desktop is never reached from here.

    One anchor: rx-discounts-grid, a plain <div> this page owns. Blazor stamps
    its scope attribute onto HTML elements only, never onto a MudBlazor
    component root, so anchoring on rx-admin-grid-table (a MudTable) or
    rx-admin-grid-surface (a MudPaper) would match nothing.
*/

@media (max-width: 960px) {

    /*
        Retire the desktop column template on mobile.

        This table declares a <ColGroup> — 16/34/16/14/10/10. Making a row a flex
        container takes it out of the table formatting context, and the detached
        row is then sized by the first <col> rather than by the table. Offers hit
        exactly this. Measured here with the template still active: a 172px card
        inside a 330px table at 360px, against 330px once retired.

        `width: 100%` does not fix it — the percentage resolves against that same
        column box. Retiring the template does, and it is correct below 960px
        where there are no columns left to size: the rows are cards.

        Desktop keeps all six percentages.
    */
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table colgroup {
        display: none;
    }

    /*
        Release the desktop cell widths.

        app.css also sizes .rx-admin-grid-numeric (8.5rem), -status (8.75rem) and
        -actions (5.75rem) as table columns. Correct for a <td> in a row; on a
        stacked card the same declaration caps the cell itself, leaving the
        Actions cell too narrow for three controls and its divider.
    */
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell {
        width: auto;
    }

    /*
        A discount card answers: which discount, is it live, what is it worth,
        what does it apply to — then what can be done with it.

        Done with `order` on a flex column, so no markup, no data and no desktop
        ordering changes. The DOM order is untouched — which is what a screen
        reader follows — and every value keeps its own visible label from
        data-label unless it is dropped deliberately below.
    */
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Discount Code"] { order: 1; }
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Discount Name"] { order: 2; }
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Active Status"] { order: 3; }
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Discount Value"] { order: 4; }
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Apply Scope"] { order: 5; }
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 6; }

    /*
        The code leads, with the name as its subtitle.

        That is this screen's own hierarchy, not a borrowed one: the desktop
        table already treats discount_code as the primary value and
        discount_name as secondary, and the code is what a discount is referred
        to by — it is the thing entered at the till. Staff List leads with a
        person's name for the opposite reason.

        Code, name and status are self-describing in that arrangement, so all
        three drop their labels. Value and Apply Scope keep theirs.
    */
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Discount Code"]:before,
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Discount Name"]:before,
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Active Status"]:before,
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Discount Code"] {
        padding-top: 0;
        padding-bottom: 0;
    }

    /*
        Reached through ::deep because the values sit on MudText, whose root
        never carries the scope attribute. Mobile only.
    */
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Discount Code"] .rx-admin-grid-primary {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.25;
    }

    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Discount Name"] {
        padding-top: 0;
    }

    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Discount Name"] .rx-admin-grid-secondary {
        color: var(--rx-color-text-secondary);
        line-height: 1.25;
    }

    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Active Status"] {
        padding-top: var(--rx-space-density-xs);
        padding-bottom: var(--rx-space-density-xs);
    }

    /*
        The value is what the discount is worth and the reason this screen is
        opened. It carries weight rather than a larger size, so the two labelled
        rows stay aligned.

        Presentation only: DisplayDiscountValue and the percentage/fixed-value
        rules behind it are untouched, and the desktop numeric column keeps its
        own right alignment.
    */
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Discount Value"] {
        color: var(--rx-color-text-primary);
        font-weight: 700;
    }

    /*
        Apply Scope is a composed summary of unknown length, so it keeps its own
        line rather than being squeezed beside its label.
    */
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Apply Scope"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /*
        View, Clone and the activate/deactivate toggle on their own line beneath
        a rule, at a size a thumb can hit. They keep their existing order, so the
        state-changing control is never the first thing under the finger, and
        they keep the disabled state they already take from IsActionInProgress.
    */
    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] {
        justify-content: flex-end;
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-discounts-grid[b-c8if86g7j6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }
}
/* /Pages/Fees/FeeListPage.razor.rz.scp.css */
/*
    Fee List — what is specific to this screen on mobile.

    Shared, opted into rather than restated:

      wwwroot/mobile-record-list.css   rx-mobile-record-list  on the MudTable
      wwwroot/mobile-filter-stack.css  rx-mobile-filter-stack on the filter wrapper

    They supply the card shell, cell density, label typography and the stacked
    full-width filter controls. The filter row is a search field and one Status
    select — the pair the stack was built for — and this page declares no inline
    min-widths, so nothing about the filters is repeated here.

    960px: the width Breakpoint.Sm actually stacks a MudTable at, and the query
    both shared files use, so all three switch together. There is no min-width
    query in this file — desktop is never reached from here.

    One anchor: rx-fees-grid, a plain <div> this page owns. Blazor stamps its
    scope attribute onto HTML elements only, never onto a MudBlazor component
    root, so anchoring on rx-admin-grid-table (a MudTable) or
    rx-admin-grid-surface (a MudPaper) would match nothing.
*/

@media (max-width: 960px) {

    /*
        Retire the desktop column template on mobile.

        This table declares a <ColGroup> — 32/22/14/14/10/8. Making a row a flex
        container takes it out of the table formatting context, and the detached
        row is then sized by the first <col> rather than by the table. Discounts
        and Offers both hit exactly this.

        `width: 100%` does not fix it — the percentage resolves against that same
        column box. Retiring the template does, and it is correct below 960px
        where there are no columns left to size: the rows are cards.

        Desktop keeps all six percentages.
    */
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table colgroup {
        display: none;
    }

    /*
        Release the desktop cell widths.

        app.css also sizes .rx-admin-grid-numeric (8.5rem), -status (8.75rem) and
        -actions (5.75rem) as table columns. Correct for a <td> in a row; on a
        stacked card the same declaration caps the cell itself, leaving the
        Actions cell too narrow for its controls and divider.
    */
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell {
        width: auto;
    }

    /*
        A fee card answers: which fee, is it live, what is it worth, and what it
        is charged on — then what can be done with it.

        Done with `order` on a flex column, so no markup, no data and no desktop
        ordering changes. The DOM order is untouched — which is what a screen
        reader follows — and every value keeps its own visible label from
        data-label unless it is dropped deliberately below.
    */
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Fee Name"] { order: 1; }
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Active Status"] { order: 2; }
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Fee Value"] { order: 3; }
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Applies On"] { order: 4; }
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Order Type"] { order: 5; }
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 6; }

    /*
        The name leads.

        A fee has no code — dbo.fee_rules carries only fee_name — so unlike the
        Discount card there is no second identifier to demote it under. Name and
        status are self-describing in that arrangement, so both drop their
        labels. Value, Applies On and Order Type keep theirs.
    */
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Fee Name"]:before,
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Active Status"]:before,
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    /*
        Reached through ::deep because the value sits on MudText, whose root
        never carries the scope attribute. Mobile only.
    */
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Fee Name"] .rx-admin-grid-primary {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.25;
    }

    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Fee Name"] {
        padding-bottom: 0;
    }

    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Active Status"] {
        padding-top: var(--rx-space-density-xs);
        padding-bottom: var(--rx-space-density-xs);
    }

    /*
        The value is what the fee is worth and the reason this screen is opened.
        It carries weight rather than a larger size, so the labelled rows stay
        aligned.

        Presentation only: DisplayFeeValue and the percentage/flat rules behind
        it are untouched, and the desktop numeric column keeps its own right
        alignment.
    */
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Fee Value"] {
        color: var(--rx-color-text-primary);
        font-weight: 700;
    }

    /*
        "Discounted Subtotal Plus Fees" is the longest calculation base and does
        not sit beside its label at 320px, so Applies On takes its own line.
        Order Type is short enough to stay inline.
    */
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Applies On"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /*
        View and the activate/deactivate toggle on their own line beneath a rule,
        at a size a thumb can hit. They keep their existing order, so the
        state-changing control is never the first thing under the finger, and
        they keep the disabled state they already take from IsActionInProgress.
    */
    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] {
        justify-content: flex-end;
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-fees-grid[b-h1hnhh9i62]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }
}
/* /Pages/Homepage/HomepageOverviewPage.razor.rz.scp.css */
/* Homepage editor — Sections add-action toolbar (layout only). */

.rx-homepage-section-toolbar[b-nbyki21qbi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rx-space-density-sm);
    width: 100%;
    min-width: 0;
}

.rx-homepage-section-toolbar[b-nbyki21qbi]  .rx-homepage-section-toolbar__action.mud-button-root {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 13px;
    padding-left: 13px;
    border-radius: var(--rx-radius-md);
    white-space: nowrap;
    justify-content: flex-start;
}

.rx-homepage-section-toolbar[b-nbyki21qbi]  .rx-homepage-section-toolbar__action .mud-button-label {
    white-space: nowrap;
}

.rx-homepage-section-toolbar[b-nbyki21qbi]  .rx-homepage-section-toolbar__action:focus-visible {
    outline: none;
    box-shadow: var(--rx-shadow-focus-ring);
}

/* Medium: allow wrap; keep labels intact (no truncation). */
@media (max-width: 1199.98px) {
    .rx-homepage-section-toolbar[b-nbyki21qbi]  .rx-homepage-section-toolbar__action.mud-button-root {
        flex: 0 1 auto;
    }
}

/* Small: full-width stacked actions. */
@media (max-width: 767.98px) {
    .rx-homepage-section-toolbar[b-nbyki21qbi] {
        flex-direction: column;
        align-items: stretch;
    }

    .rx-homepage-section-toolbar[b-nbyki21qbi]  .rx-homepage-section-toolbar__action.mud-button-root {
        flex: 0 0 auto;
        width: 100%;
        justify-content: flex-start;
    }
}

/* Homepage revision history temporary drawer — wider desktop panel (UX only).
   MudBlazor Temporary drawer default width is ~240px. */
[b-nbyki21qbi] .rx-homepage-revision-drawer.mud-drawer {
    width: clamp(360px, 40vw, 600px) !important;
    max-width: 100%;
}

[b-nbyki21qbi] .rx-homepage-revision-drawer.mud-drawer > .mud-drawer-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.rx-homepage-revision-drawer__list[b-nbyki21qbi] {
    min-width: 0;
}

.rx-homepage-revision-drawer__card[b-nbyki21qbi] {
    min-width: 0;
}

.rx-homepage-revision-drawer__title[b-nbyki21qbi],
.rx-homepage-revision-drawer__action[b-nbyki21qbi],
.rx-homepage-revision-drawer__summary[b-nbyki21qbi] {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

.rx-homepage-revision-drawer__meta[b-nbyki21qbi] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 599.98px) {
    [b-nbyki21qbi] .rx-homepage-revision-drawer.mud-drawer {
        width: 100vw !important;
        min-width: 0;
        max-width: 100vw;
    }

    .rx-homepage-revision-drawer__meta[b-nbyki21qbi] {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
}
/* /Pages/Login.razor.rz.scp.css */
.rx-login-page[b-bh6pm2vk6r] {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 14%, rgba(43, 66, 109, 0.18), transparent 28%),
        radial-gradient(circle at 36% 82%, rgba(49, 72, 117, 0.14), transparent 34%),
        linear-gradient(135deg, #f8fafc 0%, #f5f7fb 48%, #f8fafc 100%);
}

.rx-login-page[b-bh6pm2vk6r]::before {
    content: none;
    display: none;
}

.rx-login-shell[b-bh6pm2vk6r] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: center;
    width: min(100%, 1120px);
    max-width: 1120px;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

.rx-login-brand-panel[b-bh6pm2vk6r] {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.rx-login-brand-panel[b-bh6pm2vk6r] {
    display: flex;
    flex: 0 1 520px;
    flex-direction: column;
    justify-content: center;
    width: 520px;
    max-width: 520px;
    gap: clamp(1.2rem, 2.5vh, 1.8rem);
    padding: clamp(2rem, 5vw, 5.5rem) 0 clamp(2rem, 5vw, 5.5rem) 0;
    color: var(--rx-color-text-primary);
}

.hero-illustrations[b-bh6pm2vk6r] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-illustration[b-bh6pm2vk6r] {
    position: absolute;
    width: clamp(110px, 13vw, 190px);
    height: auto;
    fill: none;
    stroke: rgba(15, 23, 42, 1);
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.045;
    animation: rx-hero-float-b-bh6pm2vk6r 24s ease-in-out infinite;
}

.hero-illustration-chef[b-bh6pm2vk6r] {
    top: 9%;
    right: 16%;
    animation-delay: -4s;
}

.hero-illustration-pizza[b-bh6pm2vk6r] {
    top: 19%;
    left: 7%;
    width: clamp(92px, 11vw, 150px);
    animation-delay: -11s;
}

.hero-illustration-burger[b-bh6pm2vk6r] {
    top: 48%;
    right: 9%;
    animation-delay: -7s;
}

.hero-illustration-receipt[b-bh6pm2vk6r] {
    left: 12%;
    bottom: 21%;
    width: clamp(88px, 10vw, 140px);
    animation-delay: -15s;
}

.hero-illustration-bag[b-bh6pm2vk6r] {
    left: 5%;
    bottom: 6%;
    animation-delay: -19s;
}

.hero-illustration-table[b-bh6pm2vk6r] {
    right: 18%;
    bottom: 9%;
    width: clamp(96px, 11vw, 150px);
    animation-delay: -2s;
}

.hero-illustration-cutlery[b-bh6pm2vk6r] {
    right: 40%;
    top: 67%;
    width: clamp(82px, 9vw, 126px);
    animation-delay: -22s;
}

.rx-brand-mark[b-bh6pm2vk6r],
.rx-brand-copy[b-bh6pm2vk6r],
.rx-trust-list[b-bh6pm2vk6r] {
    position: relative;
    z-index: 1;
    max-width: 520px;
}

.rx-brand-mark[b-bh6pm2vk6r] {
    display: inline-flex;
    align-items: flex-start;
    gap: 1rem;
    color: var(--rx-color-text-primary);
    font-size: 1.32rem;
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: -0.025em;
    margin-bottom: clamp(0.2rem, 0.8vh, 0.45rem);
}

.rx-brand-mark-icon[b-bh6pm2vk6r] {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--rx-color-primary), var(--rx-color-primary-light));
    color: var(--rx-color-surface);
    box-shadow: 0 18px 38px rgba(43, 66, 109, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-size: 1.3rem;
    font-weight: var(--rx-font-weight-bold);
}

.rx-brand-text[b-bh6pm2vk6r] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 0.1rem;
}

.rx-brand-wordmark[b-bh6pm2vk6r] {
    line-height: 1;
    font-size: 2.36rem;
    font-weight: var(--rx-font-weight-bold);
}

.rx-ai-signature[b-bh6pm2vk6r] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(100%, 285px);
    margin-top: 10px;
    color: #A66B00;
}

.rx-ai-signature-line[b-bh6pm2vk6r] {
    flex: 1;
    height: 1px;
    background: rgba(15, 23, 42, 0.1);
}

.rx-ai-signature-label[b-bh6pm2vk6r] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: currentColor;
    font-size: 18px;
    font-weight: var(--rx-font-weight-semibold);
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.25s ease, filter 0.25s ease;
}

.rx-ai-signature:hover[b-bh6pm2vk6r] {
    color: #C58612;
}

.rx-ai-signature-icon[b-bh6pm2vk6r] {
    color: currentColor;
    font-size: 15px;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(166, 107, 0, 0.15));
}

.rx-brand-eyebrow[b-bh6pm2vk6r] {
    margin: 0 0 0.7rem;
    color: color-mix(in srgb, var(--rx-color-primary) 76%, var(--rx-color-text-secondary));
    font-size: 0.7rem;
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.rx-brand-copy h1[b-bh6pm2vk6r] {
    max-width: 520px;
    margin: 0;
    color: var(--rx-color-text-primary);
    font-size: clamp(3rem, 5.6vw, 5.6rem);
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: -0.065em;
    line-height: 0.9;
}

.rx-brand-copy p:last-child[b-bh6pm2vk6r] {
    max-width: 430px;
    margin: 1.25rem 0 0;
    color: var(--rx-color-text-secondary);
    font-size: 1rem;
    line-height: 1.65;
}

.rx-trust-list[b-bh6pm2vk6r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 0.7rem 1.25rem;
    color: color-mix(in srgb, var(--rx-color-text-secondary) 82%, var(--rx-color-primary));
    font-size: 1rem;
    font-weight: var(--rx-font-weight-medium);
}

.rx-feature-item[b-bh6pm2vk6r] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: color-mix(in srgb, #64748B 88%, var(--rx-color-primary));
    line-height: 1.2;
    transition: color 0.2s ease, transform 0.2s ease;
}

.rx-feature-item:hover[b-bh6pm2vk6r] {
    transform: translateY(-1px);
}

.rx-feature-icon[b-bh6pm2vk6r] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #64748B;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rx-trust-ai .rx-feature-icon[b-bh6pm2vk6r] {
    color: #64748B;
    filter: drop-shadow(0 0 4px rgba(166, 107, 0, 0.12));
}

.rx-login-form-panel[b-bh6pm2vk6r] {
    position: relative;
    display: flex;
    flex: 0 0 520px;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 520px;
    max-width: 520px;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
}

.rx-login-form-panel[b-bh6pm2vk6r]::before,
.rx-login-form-panel[b-bh6pm2vk6r]::after {
    content: none;
    display: none;
}

.rx-login-form-card[b-bh6pm2vk6r] {
    position: relative;
    width: min(100%, 520px);
    max-width: 520px;
    padding: clamp(2.25rem, 3.4vw, 2.75rem) clamp(2.35rem, 3.8vw, 3rem);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.03);
    backdrop-filter: blur(24px);
    animation: rx-login-card-enter-b-bh6pm2vk6r 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.rx-login-header[b-bh6pm2vk6r] {
    margin-bottom: clamp(1.25rem, 2.7vh, 1.8rem);
}

.rx-login-kicker[b-bh6pm2vk6r] {
    margin: 0 0 0.45rem;
    color: var(--rx-color-primary);
    font-size: 0.76rem;
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rx-login-header h2[b-bh6pm2vk6r] {
    margin: 0;
    color: var(--rx-color-text-primary);
    font-size: clamp(2rem, 3.4vw, 2.55rem);
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: -0.045em;
    line-height: 1.04;
}

.rx-login-header p:last-child[b-bh6pm2vk6r] {
    max-width: 350px;
    margin: 0.58rem 0 0;
    color: var(--rx-color-text-secondary);
    font-size: 0.94rem;
    line-height: 1.5;
}

[b-bh6pm2vk6r] .rx-login-form {
    gap: clamp(0.85rem, 1.8vh, 1.05rem);
}

[b-bh6pm2vk6r] .rx-login-alert {
    border-radius: var(--rx-radius-lg);
}

[b-bh6pm2vk6r] .rx-login-field .mud-input-control {
    margin-top: 0;
}

[b-bh6pm2vk6r] .rx-login-field .mud-input {
    min-height: 56px;
    border-radius: 14px;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
    transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

[b-bh6pm2vk6r] .rx-login-field .mud-input-outlined-border {
    border-color: #E5E7EB;
    transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

[b-bh6pm2vk6r] .rx-login-field .mud-input > input,
[b-bh6pm2vk6r] .rx-login-field .mud-input-slot {
    background: #ffffff !important;
}

[b-bh6pm2vk6r] .rx-login-field input:-webkit-autofill,
[b-bh6pm2vk6r] .rx-login-field input:-webkit-autofill:hover,
[b-bh6pm2vk6r] .rx-login-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: var(--rx-color-text-primary);
    caret-color: var(--rx-color-text-primary);
}

[b-bh6pm2vk6r] .rx-login-field .mud-input:hover {
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

[b-bh6pm2vk6r] .rx-login-field .mud-input:hover .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--rx-color-primary) 28%, #E5E7EB);
}

[b-bh6pm2vk6r] .rx-login-field .mud-input.mud-input-focused {
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), 0 12px 24px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

[b-bh6pm2vk6r] .rx-login-field .mud-input.mud-input-focused .mud-input-outlined-border {
    border-color: var(--rx-color-primary);
}

[b-bh6pm2vk6r] .rx-login-field .mud-input-adornment-start {
    align-self: center;
    color: #94A3B8;
}

[b-bh6pm2vk6r] .rx-login-field .mud-input-adornment-start .mud-icon-root {
    color: #94A3B8;
}

.rx-login-options[b-bh6pm2vk6r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: -0.18rem;
}

[b-bh6pm2vk6r] .rx-remember-control .mud-typography {
    color: var(--rx-color-text-secondary);
    font-size: 0.82rem;
}

.rx-forgot-link[b-bh6pm2vk6r] {
    border: 0;
    border-radius: var(--rx-radius-md);
    background: transparent;
    color: var(--rx-color-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: var(--rx-font-weight-semibold);
    padding: 0.35rem 0.1rem;
    transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rx-forgot-link:hover[b-bh6pm2vk6r] {
    color: color-mix(in srgb, var(--rx-color-primary) 84%, var(--rx-color-accent));
}

.rx-forgot-link:focus-visible[b-bh6pm2vk6r] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(43, 66, 109, 0.12);
}

.rx-forgot-link:disabled[b-bh6pm2vk6r] {
    color: var(--rx-color-text-secondary);
    cursor: not-allowed;
    opacity: 0.65;
}

[b-bh6pm2vk6r] .rx-login-submit {
    min-height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #23375f 0%, var(--rx-color-primary) 46%, var(--rx-color-primary-light) 100%);
    box-shadow: 0 16px 30px rgba(43, 66, 109, 0.22);
    color: var(--rx-color-surface);
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: 0.01em;
    text-transform: none;
    transition: all 0.2s ease;
}

[b-bh6pm2vk6r] .rx-login-submit:hover,
[b-bh6pm2vk6r] .rx-login-submit:focus-visible {
    box-shadow: 0 20px 38px rgba(43, 66, 109, 0.27), 0 0 0 3px rgba(43, 66, 109, 0.1);
    filter: saturate(1.04);
    transform: translateY(-1px);
}

[b-bh6pm2vk6r] .rx-login-submit:active {
    transform: translateY(0);
}

[b-bh6pm2vk6r] .rx-login-submit.mud-button-disabled {
    background: linear-gradient(135deg, color-mix(in srgb, var(--rx-color-primary) 58%, #ffffff), color-mix(in srgb, var(--rx-color-primary-light) 52%, #ffffff));
    box-shadow: none;
    color: rgba(255, 255, 255, 0.82);
}

@keyframes rx-login-card-enter-b-bh6pm2vk6r {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rx-hero-float-b-bh6pm2vk6r {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

@media (max-width: 1100px) and (min-width: 761px) {
    .rx-login-shell[b-bh6pm2vk6r] {
        gap: 28px;
        width: min(100%, 980px);
        max-width: 980px;
    }

    .rx-login-brand-panel[b-bh6pm2vk6r] {
        flex-basis: 420px;
        width: 420px;
        max-width: 420px;
    }

    .rx-login-form-panel[b-bh6pm2vk6r] {
        flex-basis: 480px;
        width: 480px;
        max-width: 480px;
    }

    .rx-login-brand-panel[b-bh6pm2vk6r] {
          padding-top: clamp(1.75rem, 3.5vw, 3rem);
        padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
    }

    .rx-brand-copy h1[b-bh6pm2vk6r] {
        font-size: clamp(2.55rem, 5vw, 4rem);
    }

    .rx-trust-list[b-bh6pm2vk6r] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) and (min-width: 761px) {
    .rx-login-shell[b-bh6pm2vk6r] {
        gap: 24px;
        width: min(100%, 860px);
        max-width: 860px;
    }

    .rx-login-brand-panel[b-bh6pm2vk6r] {
        flex-basis: 360px;
        width: 360px;
        max-width: 360px;
    }

    .rx-login-form-panel[b-bh6pm2vk6r] {
        flex-basis: 430px;
        width: 430px;
        max-width: 430px;
    }

    .rx-login-form-card[b-bh6pm2vk6r] {
        padding: 2rem;
    }
}

@media (max-width: 760px) {
    .rx-login-page[b-bh6pm2vk6r] {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }

    .rx-login-shell[b-bh6pm2vk6r] {
        display: flex;
        min-height: 100vh;
        height: auto;
        flex-direction: column;
        gap: 0;
        overflow: visible;
    }

    .rx-login-form-panel[b-bh6pm2vk6r] {
        order: 1;
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 62vh;
        padding: 1.25rem;
        justify-content: center;
        transform: none;
    }

    .rx-login-brand-panel[b-bh6pm2vk6r] {
        order: 2;
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 38vh;
        padding: 1.5rem;
        gap: 1rem;
    }

    .rx-brand-copy h1[b-bh6pm2vk6r] {
        max-width: 420px;
        font-size: clamp(2.15rem, 10vw, 3.1rem);
    }

    .rx-brand-copy p:last-child[b-bh6pm2vk6r] {
        max-width: 360px;
    }

    .rx-trust-list[b-bh6pm2vk6r] {
        grid-template-columns: 1fr;
    }

    .hero-illustration[b-bh6pm2vk6r] {
        opacity: 0.035;
    }

    .rx-login-form-card[b-bh6pm2vk6r] {
        width: 100%;
        padding: 1.3rem;
    }

    .rx-login-options[b-bh6pm2vk6r] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }
}

@media (max-height: 760px) and (min-width: 961px) {
    .rx-login-brand-panel[b-bh6pm2vk6r] {
        padding-top: 1.45rem;
        padding-bottom: 1.45rem;
    }

    .rx-brand-copy h1[b-bh6pm2vk6r] {
        font-size: clamp(2.35rem, 5vw, 4.2rem);
    }

    .rx-brand-copy p:last-child[b-bh6pm2vk6r] {
        margin-top: 0.85rem;
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .rx-login-form-card[b-bh6pm2vk6r] {
        padding: 1.45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rx-login-form-card[b-bh6pm2vk6r],
    .hero-illustration[b-bh6pm2vk6r],
    [b-bh6pm2vk6r] .rx-login-field .mud-input,
    [b-bh6pm2vk6r] .rx-login-submit,
    .rx-forgot-link[b-bh6pm2vk6r] {
        animation: none;
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Passkey sign-in. Scoped to this page; no global or layout CSS is touched.
   --------------------------------------------------------------------------- */

.rx-login-divider[b-bh6pm2vk6r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0;
    color: var(--mud-palette-text-secondary, #6b7280);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.rx-login-divider[b-bh6pm2vk6r]::before,
.rx-login-divider[b-bh6pm2vk6r]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--mud-palette-divider, #e5e7eb);
}

.rx-passkey-button[b-bh6pm2vk6r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    /* 48px keeps the tap target comfortable down to a 320px viewport. */
    min-height: 48px;
    padding: 0.625rem 1rem;
    border: 1px solid var(--mud-palette-primary, #5b21b6);
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-primary, #5b21b6);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    /* Wraps rather than overflowing on the narrowest handsets. */
    white-space: normal;
    text-align: center;
}

.rx-passkey-button:hover:not(:disabled)[b-bh6pm2vk6r] {
    background: var(--mud-palette-action-default-hover, rgba(91, 33, 182, 0.08));
}

.rx-passkey-button:focus-visible[b-bh6pm2vk6r] {
    outline: 2px solid var(--mud-palette-primary, #5b21b6);
    outline-offset: 2px;
}

.rx-passkey-button:disabled[b-bh6pm2vk6r] {
    opacity: 0.6;
    cursor: default;
}

.rx-passkey-icon[b-bh6pm2vk6r] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rx-passkey-hint[b-bh6pm2vk6r] {
    margin: 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #6b7280);
}

@media (max-width: 360px) {
    .rx-passkey-button[b-bh6pm2vk6r] {
        font-size: 0.9375rem;
        padding: 0.625rem 0.5rem;
    }

    .rx-login-divider[b-bh6pm2vk6r] {
        font-size: 0.6875rem;
    }
}
/* /Pages/Menu/BulkTagging.razor.rz.scp.css */
/*
    Bulk Tagging — scoped styles only.

    Layout and colour come from the existing RX.Admin shell classes (rx-admin-grid-surface,
    rx-admin-filter-toolbar, rx-admin-page-header-stacked). Nothing here overrides a global
    class; these rules only arrange the elements this page introduces.
*/

/*
    Second filter row (Tag Group / Tag / result count).

    Stability requirement: this row's height must not change with the selected tag label.
    The previous flex + wrap layout was content-sized — `.rx-admin-filter` sets only
    `min-width: 180px`, so a long selected value ("Very Spicy (Spice Level)") widened the
    control, overflowed the row, and wrapped the caption onto a second line, doubling the row
    height and shifting the table below it.

    Grid with FIXED control tracks removes the cause: track width no longer depends on content,
    so nothing can reflow. MudBlazor already truncates the value
    (`.mud-input-slot { overflow:hidden; white-space:nowrap; text-overflow:ellipsis }`),
    so a long label ellipsises instead of growing the control.

    Control heights are unchanged — they still come from the `.rx-admin-filter-toolbar`
    ancestor rules in app.css, which this row remains inside.
*/
.rx-bulk-tag-filter-row-secondary[b-0lhnp6v1sq] {
    display: grid;
    grid-template-columns: 16rem 16rem 1fr;
    gap: var(--rx-filter-row-gap);
    align-items: center;
    min-height: 2rem;
    margin-top: var(--rx-filter-row-gap);
}

/*
    Let the controls fill their track instead of asserting their own intrinsic width.
    Without this, the global `.rx-admin-filter { min-width: 180px }` floor would overflow the
    single-column track at small widths.
*/
.rx-bulk-tag-filter-row-secondary[b-0lhnp6v1sq]  .rx-admin-filter {
    min-width: 0;
    width: 100%;
}

/*
    The caption sits in the third track. Because the columns are declared explicitly, the two
    controls hold their position and width whether or not it is rendered. Vertically centred by
    the grid, and `nowrap` keeps it on one line so it never adds row height.
*/
.rx-bulk-tag-showing-count[b-0lhnp6v1sq] {
    justify-self: end;
    white-space: nowrap;
    font-size: var(--rx-font-size-caption, 0.75rem);
    line-height: 1.5;
}

.rx-bulk-tag-select-cell[b-0lhnp6v1sq] {
    width: 4rem;
    text-align: center;
}

.rx-bulk-tag-grid[b-0lhnp6v1sq]  .mud-table-cell {
    vertical-align: middle;
}

.rx-bulk-tag-current-tags[b-0lhnp6v1sq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rx-bulk-tag-current-chip[b-0lhnp6v1sq] {
    margin: 0;
}

/*
    Horizontal inset comes from the platform section token (--rx-space-density-xl, 24px) — the
    same rhythm `.rx-detail-section` uses for padded card sections across RX.Admin. Vertical
    padding keeps its existing value via the matching density token (12px), so heights are
    unchanged.
*/
.rx-bulk-tag-selection-strip[b-0lhnp6v1sq] {
    padding: var(--rx-space-density-md) var(--rx-space-detail-section-padding);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rx-bulk-tag-selected-chips[b-0lhnp6v1sq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    max-height: 9rem;
    overflow-y: auto;
}

.rx-bulk-tag-selected-chip[b-0lhnp6v1sq] {
    margin: 0;
}

/*
    "Tag to add" panel. MudExpansionPanel adds no horizontal padding of its own
    (`.mud-expand-panel-header { padding: 16px 0 }`), so the heading, Clear Tag, the tag search
    field and the group list all sit at exactly this inset. Using the platform section token
    aligns them with the rest of the page instead of the previous ad-hoc 16px.
    Vertical padding is unchanged (--rx-space-density-lg is the same 16px as before).
*/
.rx-bulk-tag-panel[b-0lhnp6v1sq] {
    padding: var(--rx-space-density-lg) var(--rx-space-detail-section-padding);
}

.rx-bulk-tag-picker-panels[b-0lhnp6v1sq] {
    max-height: 22rem;
    overflow-y: auto;
}

.rx-bulk-tag-picker-group-heading[b-0lhnp6v1sq] {
    font-weight: 600;
}

.rx-bulk-tag-picker-group-body[b-0lhnp6v1sq] {
    padding-block: 0.25rem;
}

.rx-bulk-tag-picker-row[b-0lhnp6v1sq] {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    background-color: transparent;
}

.rx-bulk-tag-picker-row:hover[b-0lhnp6v1sq] {
    background-color: var(--mud-palette-action-default-hover);
}

.rx-bulk-tag-picker-row-selected[b-0lhnp6v1sq] {
    background-color: var(--mud-palette-primary-hover);
}

/*
    Below the point where two 16rem tracks plus the caption stop fitting, stack into one column.
    This is a deliberate, stable reflow at a known breakpoint — not content-driven wrapping.
*/
@media (max-width: 960px) {
    .rx-bulk-tag-filter-row-secondary[b-0lhnp6v1sq] {
        grid-template-columns: minmax(0, 1fr);
    }

    .rx-bulk-tag-showing-count[b-0lhnp6v1sq] {
        justify-self: start;
    }
}

@media (max-width: 600px) {
    .rx-bulk-tag-select-cell[b-0lhnp6v1sq] {
        width: auto;
        text-align: left;
    }

    .rx-bulk-tag-picker-panels[b-0lhnp6v1sq] {
        max-height: none;
    }
}
/* /Pages/Menu/CreateMenuItemDialog.razor.rz.scp.css */
.rx-create-menu-dialog-form[b-m3gt6ktq1t] {
    background: var(--rx-color-surface);
}
/* /Pages/Menu/MenuItemChannelOverrideDialog.razor.rz.scp.css */
.rx-menu-channel-dialog-toggle[b-ayevuxavje] {
    padding: var(--rx-space-density-md);
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: var(--rx-color-surface);
}
/* /Pages/Menu/MenuItemDetails.razor.rz.scp.css */
.rx-menu-item-details-page[b-0q8ps2t06h] {
    min-height: 100%;
}

.rx-menu-item-details-header[b-0q8ps2t06h] {
    gap: 1rem;
    padding-top: 0;
}

.rx-menu-item-details-breadcrumbs[b-0q8ps2t06h] {
    margin-bottom: calc(var(--rx-space-density-sm) * -1);
}

.rx-menu-item-details-breadcrumbs[b-0q8ps2t06h]  .mud-breadcrumb-item,
.rx-menu-item-details-breadcrumbs[b-0q8ps2t06h]  .mud-breadcrumb-separator {
    color: var(--rx-color-text-secondary);
    font-size: var(--rx-font-label);
}

.rx-menu-item-details-heading[b-0q8ps2t06h] {
    min-width: 0;
}

.rx-menu-item-details-title[b-0q8ps2t06h] {
    font-size: calc(var(--rx-font-admin-page-title) * 0.9);
    line-height: 1.12;
}

.rx-menu-status-unavailable[b-0q8ps2t06h] {
    border-color: color-mix(in srgb, var(--rx-color-warning) 26%, var(--rx-color-border));
    background: color-mix(in srgb, var(--rx-color-warning) 12%, var(--rx-color-surface));
    color: color-mix(in srgb, var(--rx-color-warning) 68%, var(--rx-color-text-primary));
}

.rx-menu-status-deleted[b-0q8ps2t06h] {
    border-color: color-mix(in srgb, var(--rx-color-danger) 26%, var(--rx-color-border));
    background: color-mix(in srgb, var(--rx-color-danger) 10%, var(--rx-color-surface));
    color: color-mix(in srgb, var(--rx-color-danger) 68%, var(--rx-color-text-primary));
}

.rx-menu-placeholder-state[b-0q8ps2t06h] {
    min-width: 0;
}

.rx-menu-placeholder-title[b-0q8ps2t06h] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
}

.rx-menu-general-section[b-0q8ps2t06h]  .rx-detail-section-divider {
    margin-top: var(--rx-space-density-sm);
    margin-bottom: var(--rx-space-density-md);
}

.rx-menu-general-available-field[b-0q8ps2t06h] {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: var(--rx-space-density-md);
    padding: 0 var(--rx-space-density-md);
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-sm);
    background: var(--rx-color-surface);
}

.rx-menu-general-available-field[b-0q8ps2t06h]  .mud-input-control {
    margin-bottom: 0;
}

.rx-menu-general-available-label[b-0q8ps2t06h] {
    color: var(--rx-form-label-color);
    font-size: var(--rx-form-label-size);
    font-weight: var(--rx-form-label-weight);
}

.rx-menu-section-toolbar[b-0q8ps2t06h],
.rx-menu-section-alert-content[b-0q8ps2t06h] {
    gap: var(--rx-space-density-md);
}

.rx-menu-configuration-title[b-0q8ps2t06h] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.2;
}

.rx-menu-configuration-panels[b-0q8ps2t06h] {
    width: 100%;
}

.rx-menu-panel-header[b-0q8ps2t06h] {
    width: 100%;
    min-width: 0;
    padding-right: var(--rx-space-density-sm);
}

.rx-menu-panel-title-row[b-0q8ps2t06h] {
    min-width: 0;
}

.rx-menu-panel-content[b-0q8ps2t06h] {
    padding: var(--rx-space-density-sm) 0;
}

.rx-menu-media-content[b-0q8ps2t06h] {
    width: 100%;
}

.rx-menu-media-content[b-0q8ps2t06h]  .mud-input-control {
    width: 100%;
    max-width: none;
}

.rx-menu-configuration-empty[b-0q8ps2t06h] {
    padding: var(--rx-space-layout-lg) var(--rx-space-layout-md);
    border: 1px dashed var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: color-mix(in srgb, var(--rx-color-background) 72%, var(--rx-color-surface));
    text-align: center;
}

.rx-menu-modifier-list[b-0q8ps2t06h] {
    width: 100%;
}

.rx-menu-modifier-row[b-0q8ps2t06h] {
    width: 100%;
    padding: var(--rx-space-density-md) 0;
}

.rx-menu-modifier-row:not(:last-child)[b-0q8ps2t06h] {
    border-bottom: 1px solid var(--rx-border-color, var(--rx-color-border));
}

.rx-menu-modifier-row-content[b-0q8ps2t06h] {
    gap: var(--rx-space-density-xs);
}

.rx-menu-modifier-row-header[b-0q8ps2t06h] {
    width: 100%;
    min-width: 0;
    gap: var(--rx-space-density-md);
}

.rx-menu-modifier-primary[b-0q8ps2t06h] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.25;
}

/* Customer-facing modifier prompt (display_name) — subordinate to the group's administrative
   identity (group_name, .rx-menu-modifier-primary) but still fully readable, never combined
   into one string with it. */
.rx-menu-modifier-display-name[b-0q8ps2t06h] {
    color: var(--rx-color-text-secondary);
    font-weight: var(--rx-font-weight-medium);
    line-height: 1.25;
    margin-top: 1px;
}

.rx-menu-modifier-summary[b-0q8ps2t06h] {
    color: var(--rx-color-text-secondary);
    font-size: var(--rx-font-label);
    line-height: 1.35;
    margin-top: 2px;
}

.rx-menu-modifier-actions[b-0q8ps2t06h] {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-left: var(--rx-space-density-lg);
    line-height: 1;
}

.rx-menu-modifier-children[b-0q8ps2t06h] {
    width: 100%;
    margin-top: var(--rx-space-density-xs);
    padding: var(--rx-space-density-sm) var(--rx-space-density-md);
    border-left: 2px solid var(--rx-color-border);
    background: color-mix(in srgb, var(--rx-color-background) 72%, var(--rx-color-surface));
    border-radius: var(--rx-radius-md);
}

.rx-menu-modifier-child-row[b-0q8ps2t06h] {
    width: 100%;
    padding: var(--rx-space-density-xs) 0;
}

.rx-menu-modifier-child-row:not(:last-child)[b-0q8ps2t06h] {
    border-bottom: 1px solid var(--rx-border-color, var(--rx-color-border));
}

.rx-menu-availability-list[b-0q8ps2t06h] {
    width: 100%;
}

.rx-menu-availability-row[b-0q8ps2t06h] {
    width: 100%;
    padding: var(--rx-space-density-md) 0;
}

.rx-menu-availability-row:not(:last-child)[b-0q8ps2t06h] {
    border-bottom: 1px solid var(--rx-border-color, var(--rx-color-border));
}

.rx-menu-availability-row-content[b-0q8ps2t06h] {
    gap: var(--rx-space-density-xs);
}

.rx-menu-availability-row-header[b-0q8ps2t06h] {
    width: 100%;
    min-width: 0;
    gap: var(--rx-space-density-md);
}

.rx-menu-availability-primary[b-0q8ps2t06h] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.25;
}

.rx-menu-availability-time[b-0q8ps2t06h] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
    font-size: var(--rx-font-label);
    line-height: 1.35;
}

.rx-menu-availability-actions[b-0q8ps2t06h] {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-left: var(--rx-space-density-lg);
    line-height: 1;
}

.rx-menu-channel-list[b-0q8ps2t06h] {
    width: 100%;
}

.rx-menu-channel-row[b-0q8ps2t06h] {
    width: 100%;
    padding: var(--rx-space-density-md) 0;
}

.rx-menu-channel-row:not(:last-child)[b-0q8ps2t06h] {
    border-bottom: 1px solid var(--rx-border-color, var(--rx-color-border));
}

.rx-menu-channel-row-content[b-0q8ps2t06h] {
    gap: var(--rx-space-density-xs);
}

.rx-menu-channel-row-header[b-0q8ps2t06h] {
    width: 100%;
    min-width: 0;
    gap: var(--rx-space-density-md);
}

.rx-menu-channel-primary[b-0q8ps2t06h] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.25;
}

.rx-menu-channel-summary[b-0q8ps2t06h] {
    color: var(--rx-color-text-secondary);
    font-size: var(--rx-font-label);
    line-height: 1.35;
}

.rx-menu-channel-actions[b-0q8ps2t06h] {
    flex: 0 0 auto;
    margin-left: var(--rx-space-density-lg);
    white-space: nowrap;
    line-height: 1;
}

.rx-menu-tags-summary[b-0q8ps2t06h] {
    min-width: 0;
}

.rx-menu-tags-summary-count[b-0q8ps2t06h] {
    color: var(--rx-color-text-secondary);
    font-weight: var(--rx-font-weight-medium);
}

.rx-menu-tags-group-list[b-0q8ps2t06h] {
    padding: var(--rx-space-density-sm) 0;
}

.rx-menu-tags-group[b-0q8ps2t06h] {
    min-width: 0;
}

.rx-menu-tags-group-label[b-0q8ps2t06h] {
    color: var(--rx-color-text-secondary);
    font-weight: var(--rx-font-weight-semibold);
    letter-spacing: 0.02em;
}

.rx-menu-tags-chip-list[b-0q8ps2t06h] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rx-space-density-sm);
}

.rx-menu-tag-chip[b-0q8ps2t06h] {
    font-weight: var(--rx-font-weight-medium);
}

@media (max-width: 599.98px) {
    .rx-menu-item-details-header[b-0q8ps2t06h] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .rx-menu-item-details-actions[b-0q8ps2t06h] {
        width: 100%;
        justify-content: flex-start;
    }

    .rx-menu-section-toolbar[b-0q8ps2t06h],
    .rx-menu-section-alert-content[b-0q8ps2t06h] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .rx-menu-panel-header[b-0q8ps2t06h] {
        gap: var(--rx-space-density-sm);
    }

    .rx-menu-general-available-field[b-0q8ps2t06h] {
        min-height: 40px;
    }

    .rx-menu-modifier-row-header[b-0q8ps2t06h] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .rx-menu-availability-row-header[b-0q8ps2t06h] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .rx-menu-channel-row-content[b-0q8ps2t06h] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .rx-menu-modifier-actions[b-0q8ps2t06h] {
        text-align: left;
    }

    .rx-menu-availability-actions[b-0q8ps2t06h] {
        margin-left: 0;
        text-align: left;
    }

    .rx-menu-channel-actions[b-0q8ps2t06h] {
        margin-left: 0;
    }
}
/* /Pages/Menu/MenuItemModifierGroupDialog.razor.rz.scp.css */
.rx-menu-modifier-picker[b-z0x6f0di3v] {
    max-height: 360px;
    overflow-y: auto;
}

.rx-menu-modifier-picker-heading[b-z0x6f0di3v] {
    display: block;
    padding-bottom: var(--rx-space-density-xs);
    border-bottom: 1px solid var(--rx-color-border);
    color: var(--rx-color-text-secondary);
    font-weight: var(--rx-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rx-menu-modifier-picker-heading-spaced[b-z0x6f0di3v] {
    margin-top: var(--rx-space-density-md);
}

.rx-menu-modifier-picker-row[b-z0x6f0di3v] {
    padding: var(--rx-space-density-md);
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: var(--rx-color-surface);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.rx-menu-modifier-picker-row:hover[b-z0x6f0di3v] {
    border-color: color-mix(in srgb, var(--rx-color-primary) 28%, var(--rx-color-border));
    background: color-mix(in srgb, var(--rx-color-primary) 2%, var(--rx-color-surface));
}

.rx-menu-modifier-picker-row-assigned[b-z0x6f0di3v] {
    background: color-mix(in srgb, var(--rx-color-primary) 3%, var(--rx-color-surface));
    cursor: default;
}

.rx-menu-modifier-picker-row-selected[b-z0x6f0di3v] {
    border-color: color-mix(in srgb, var(--rx-color-primary) 44%, var(--rx-color-border));
    background: color-mix(in srgb, var(--rx-color-primary) 5%, var(--rx-color-surface));
}

.rx-menu-modifier-picker-meta[b-z0x6f0di3v] {
    display: block;
    padding-left: 2.25rem;
    margin-top: calc(var(--rx-space-density-xs) * -1);
}

[b-z0x6f0di3v] .mud-dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    border-top: 1px solid var(--rx-color-border);
    background: var(--rx-color-surface);
}
/* /Pages/Menu/MenuItems.razor.rz.scp.css */
/*
    Menu Items — what is specific to this screen on mobile.

    Everything shared already existed and is opted into rather than restated:

      wwwroot/mobile-record-list.css   rx-mobile-record-list  on the MudTable
      wwwroot/mobile-filter-stack.css  rx-mobile-filter-stack on the filter wrapper

    Between them they supply the card shell, cell density, label typography, and
    the stacked full-width filter controls. Nothing here repeats any of it.

    960px: the width Breakpoint.Sm actually stacks a MudTable at, and the query
    both shared files use, so all three switch together. There is no
    min-width query in this file — desktop is reached by this stylesheet not at
    all.

    Two anchors, both plain <div>s this page owns: rx-menu-items-filters and
    rx-menu-items-grid. Blazor stamps its scope attribute onto HTML elements
    only, never onto a MudBlazor component root, so anchoring on
    rx-admin-filter-toolbar (a MudPaper) or rx-admin-grid-table (a MudTable)
    would match nothing.
*/

@media (max-width: 960px) {

    /* ----------------------------------------------------------- the filters */

    /*
        The shared filter stack gives every direct child of the filter row the
        full content width. That is right for the search field and the
        Availability select, and wrong for the Include-deleted switch: a
        stretched switch strands its toggle at the far edge of the screen, a
        thumb's width away from the label it belongs to.

        So the switch alone opts back out — it sits compact under the
        Availability filter, aligned to the same left edge as everything above
        it, with a comfortable target.

        This is the only place this screen overrides the shared stack, and it
        does it locally: the shared file must keep behaving as Cash, Shift and
        Till History expect.
    */
    .rx-menu-items-filters[b-h4ck7yz1to]  .rx-admin-filter-row > .mud-switch {
        width: auto;
        align-self: flex-start;
        min-height: 40px;
        margin: 0;
        align-items: center;
    }

    /* ------------------------------------------------------------- the cards */

    /*
        Identity, then state, then the facts, then the actions — the order the
        other mobile-refined Admin screens already read in.

        Done with `order` on a flex column, so no markup, no data and no desktop
        ordering changes. The DOM order is untouched — which is what a screen
        reader follows — and every value keeps its own visible label from
        data-label, so a value is never separated from what it means.
    */
    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    /*
        Release the desktop column widths.

        app.css sizes four of these cells as table columns — .rx-admin-grid-numeric
        8.5rem, -status 8.75rem, -date 9.5rem, -actions 5.75rem. That is correct for a
        <td> in a row; on a stacked card the same declaration caps the cell itself, so
        inside a 330px card the Last Updated cell was 143px and broke its date across
        three lines ("21 Aug / 2026, / 00:06"), and the Actions cell was 86px, which
        left its divider a stub and its right-alignment with nothing to align against.

        Measured, not assumed: 128 / 131 / 143 / 86px against a 330px card at 360px.
    */
    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell {
        width: auto;
    }

    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Item Name"] { order: 1; }
    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Availability"] { order: 2; }
    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Price"] { order: 3; }
    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Last Updated"] { order: 4; }
    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 5; }

    /*
        The item name is the card's title and the availability chip beneath it is
        its state. Both say what they are, so both drop their labels.
    */
    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Item Name"]:before,
    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Availability"]:before,
    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Item Name"] {
        padding-top: 0;
    }

    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Item Name"] .rx-admin-grid-primary {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Availability"] {
        padding-top: 0;
        padding-bottom: var(--rx-space-density-xs);
    }

    /*
        The price is what a card is scanned for after the name. It carries weight
        rather than a larger size, so the two labelled rows stay aligned.

        Presentation only: AdminFormat.Money and the currency from the restaurant
        context are untouched.
    */
    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Price"] {
        color: var(--rx-color-text-primary);
        font-weight: 700;
    }

    /*
        Actions sit on their own line beneath a rule, aligned right, at a size a
        thumb can hit. The cell keeps MudBlazor's flex row, so the two icon
        buttons stay side by side.
    */
    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] {
        justify-content: flex-end;
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-menu-items-grid[b-h4ck7yz1to]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }
}
/* /Pages/Menu/MenuItemTagDialog.razor.rz.scp.css */
.rx-menu-tag-picker[b-mtsoj08k27] {
    max-height: 360px;
    overflow-y: auto;
}

.rx-menu-tag-picker-panels[b-mtsoj08k27] {
    display: flex;
    flex-direction: column;
    gap: var(--rx-space-density-sm);
}

.rx-menu-tag-picker-panel[b-mtsoj08k27] {
    overflow: hidden;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: var(--rx-color-surface);
}

.rx-menu-tag-picker-panel[b-mtsoj08k27]  .mud-expand-panel-header {
    min-height: 42px;
    padding: 0 var(--rx-space-density-md);
    background: color-mix(in srgb, var(--rx-color-background) 64%, var(--rx-color-surface));
}

.rx-menu-tag-picker-panel[b-mtsoj08k27]  .mud-expand-panel-content {
    border-top: 1px solid var(--rx-color-border);
}

.rx-menu-tag-picker-group-header[b-mtsoj08k27] {
    width: 100%;
    min-width: 0;
}

.rx-menu-tag-picker-group-heading[b-mtsoj08k27] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.2;
}

.rx-menu-tag-picker-group-body[b-mtsoj08k27] {
    padding: var(--rx-space-density-sm) var(--rx-space-density-md) var(--rx-space-density-md);
}

.rx-menu-tag-picker-row[b-mtsoj08k27] {
    padding: var(--rx-space-density-sm) var(--rx-space-density-md);
    border: 1px solid transparent;
    border-radius: var(--rx-radius-sm);
    background: transparent;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.rx-menu-tag-picker-row:hover[b-mtsoj08k27] {
    border-color: color-mix(in srgb, var(--rx-color-primary) 28%, var(--rx-color-border));
    background: color-mix(in srgb, var(--rx-color-primary) 2%, var(--rx-color-surface));
}

.rx-menu-tag-picker-row-selected[b-mtsoj08k27] {
    border-color: color-mix(in srgb, var(--rx-color-primary) 44%, var(--rx-color-border));
    background: color-mix(in srgb, var(--rx-color-primary) 5%, var(--rx-color-surface));
}

.rx-menu-tag-picker-meta[b-mtsoj08k27] {
    display: block;
    padding-left: 2.25rem;
    margin-top: calc(var(--rx-space-density-xs) * -1);
}

.rx-menu-tag-selection-count[b-mtsoj08k27] {
    color: var(--rx-color-text-secondary);
    white-space: nowrap;
}

[b-mtsoj08k27] .mud-dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    border-top: 1px solid var(--rx-color-border);
    background: var(--rx-color-surface);
}
/* /Pages/Menu/ModifierGroups.razor.rz.scp.css */
/* Mirrors the group_name/display_name hierarchy established in MenuItemDetails.razor.css
   (.rx-menu-modifier-primary / .rx-menu-modifier-display-name) — Blazor CSS isolation means the
   rules must be redeclared per-component, but only existing design tokens are used, no new ones. */

.rx-modifier-groups-primary[b-xgwwobxgqh] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.25;
}

.rx-modifier-groups-display-name[b-xgwwobxgqh] {
    color: var(--rx-color-text-secondary);
    font-weight: var(--rx-font-weight-medium);
    line-height: 1.25;
    margin-top: 1px;
}

/*
    ---------------------------------------------------------------------------
    Mobile — the configuration card
    ---------------------------------------------------------------------------

    Shared, opted into rather than restated:

      wwwroot/mobile-record-list.css   rx-mobile-record-list  on the MudTable
      wwwroot/mobile-filter-stack.css  rx-mobile-filter-stack on the filter wrapper

    They supply the card shell, cell density, label typography and the stacked
    full-width filter controls. Only what is genuinely about modifier groups
    lives below.

    960px: the width Breakpoint.Sm actually stacks a MudTable at, and the query
    both shared files use, so all three switch together. There is no min-width
    query anywhere in this file — desktop is never reached from here.

    Two anchors, both plain <div>s this page owns: rx-modifier-groups-filters
    and rx-modifier-groups-grid. Blazor stamps its scope attribute onto HTML
    elements only, never onto a MudBlazor component root, so anchoring on
    rx-admin-filter-toolbar (a MudPaper) or rx-admin-grid-table (a MudTable)
    would match nothing — which is exactly why the two rules at the top of this
    file have never applied (see the note there).
*/

@media (max-width: 960px) {

    /* ----------------------------------------------------------- the filters */

    /*
        The shared stack gives every direct child of the filter row the full
        content width — right for the search field, wrong for the Include-inactive
        switch, whose toggle would end up a thumb's width from its own label. That
        one control opts back out and sits compact beneath the search.
    */
    .rx-modifier-groups-filters[b-xgwwobxgqh]  .rx-admin-filter-row > .mud-switch {
        width: auto;
        align-self: flex-start;
        min-height: 40px;
        margin: 0;
        align-items: center;
    }

    /* ------------------------------------------------------------- the cards */

    /*
        Release the desktop column widths.

        app.css sizes .rx-admin-grid-status (8.75rem), -numeric (8.5rem) and
        -actions (5.75rem) as table columns. Correct for a <td> in a row; on a
        stacked card the same declaration caps the cell itself, leaving the
        Actions cell too narrow for its divider and right alignment.
    */
    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell {
        width: auto;
    }

    /*
        A modifier group reads: which group, whether it is in use, how it is
        configured, where it sits in the list — then the actions.

        Done with `order` on a flex column, so no markup, no data and no desktop
        ordering changes. The DOM order is untouched — which is what a screen
        reader follows — and every value keeps its own visible label from
        data-label, so nothing is separated from what it means.
    */
    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Group Name"] { order: 1; }
    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] { order: 2; }
    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Selection"] { order: 3; }
    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Order"] { order: 4; }
    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 5; }

    /*
        The group name is the card's title and the status chip beneath it says
        whether the group is in use. Both say what they are, so both drop their
        labels. Selection and Order keep theirs: "Required • Min 1 • Max 1" and a
        bare number are meaningless without them.
    */
    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Group Name"]:before,
    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"]:before,
    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    /*
        The name cell holds two values — group_name over display_name — so it stays
        a column rather than being pushed to opposite edges by the shared cell's
        space-between.

        This is also where the hierarchy the two rules at the top of this file were
        meant to give actually lands, reached through ::deep because MudText is a
        component. Mobile only: desktop keeps exactly what it renders today.
    */
    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Group Name"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding-top: 0;
    }

    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Group Name"] .rx-modifier-groups-primary {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.25;
    }

    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Group Name"] .rx-modifier-groups-display-name {
        color: var(--rx-color-text-secondary);
        font-weight: var(--rx-font-weight-medium);
        line-height: 1.25;
    }

    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] {
        padding-top: 0;
        padding-bottom: var(--rx-space-density-xs);
    }

    /*
        Edit and Disable/Enable on their own line beneath a rule, at a size a
        thumb can hit. They stay side by side and stay in their existing order, so
        the destructive one is never the first thing under the finger.
    */
    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] {
        justify-content: flex-end;
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-modifier-groups-grid[b-xgwwobxgqh]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }
}
/* /Pages/MyDeliveries/MyDeliveryHistoryPage.razor.rz.scp.css */
/*
    My Delivery History — the little that is specific to this screen.

    The card shell, spacing, typography, header and action treatment all come
    from the shared Delivery Agent mobile pattern in
    wwwroot/delivery-agent-mobile.css, which this page opts into with the
    rx-agent-mobile-list class. Everything that used to live here and is now
    shared with My Deliveries was moved there, so the two screens cannot drift.

    Only rules that are genuinely about *history* belong in this file.
*/

@media (max-width: 960px) {

    /*
        History leads with Assigned rather than Order, because its rows are
        episodes on a timeline. Giving that timestamp the weight of a value
        makes the list scannable down the left edge.
    */
    [b-8ese69r7kt] .rx-agent-mobile-list.mud-sm-table .mud-table-cell[data-label="Assigned"] .mud-typography {
        color: var(--rx-color-text-primary);
        font-weight: 600;
    }

    /*
        Duration and Release Reason read as a pair — what happened, and how long
        it took. Keeping them on one line each, label above value, matches the
        shared pattern without needing its own treatment.
    */
    [b-8ese69r7kt] .rx-agent-mobile-list.mud-sm-table .mud-table-cell[data-label="Release Reason"] .mud-typography {
        overflow-wrap: anywhere;
    }
}

/* Comfortable target on every viewport, not only the narrow ones. */
.rx-my-history-touch[b-8ese69r7kt] {
    min-height: 40px;
}

/*
    The COD marker beside an order number.

    Deliberately the quietest thing in the row: a small neutral tint, not a
    status chip. It says the order was due to be collected at the door, which
    is a discovery aid — it is not an amount, and it does not describe cash the
    agent is still holding. Anything louder would read as an alert about money.

    A plain <span> rather than a MudChip, so the page's scoped attribute lands
    on it and this rule needs no ::deep.
*/
.rx-my-history-cod[b-8ese69r7kt] {
    flex: none;
    padding: 0 0.375rem;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-sm);
    background: var(--rx-color-surface-muted);
    color: var(--rx-color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5rem;
    white-space: nowrap;
}
/* /Pages/MyDeliveries/MyDeliveryOrderPage.razor.rz.scp.css */
/*
    Delivery Agent order details — mobile first.

    Base rules are the phone layout; the only media queries widen it for larger screens. Nothing
    here uses fixed positioning, viewport units, safe-area insets, or a nested scroll container:
    the page is one ordinary document flow, which is what keeps it predictable in iOS Safari and
    in home-screen/PWA mode.

    Type scale — three deliberate levels, so an agent can scan rather than read:
      primary   1.125rem / 18px   the answers: distance, customer, address, amount
      secondary 0.9375rem / 15px  supporting facts: phone, method, service, item names
      label     0.75rem  / 12px   field names, uppercase, still at readable contrast
*/

.rx-my-delivery[b-htc4fxp04n] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* The page is the only scroller. Nothing inside may scroll sideways. */
    max-width: 100%;
    overflow-x: hidden;
}

/*
    Top spacing is deliberately NOT set here.

    The gap between the app bar and the first thing on the page comes from the
    one place every Delivery Agent screen already sits inside —
    .rx-content-container in MainLayout.razor.css. Owning it there is what keeps
    My Deliveries, My Delivery History and this page aligned; a margin here was
    a third source of truth and made this screen sit lower than the other two.

    The container's `gap` still spaces Back from the order heading, so
    Back → Order is untouched.
*/
.rx-my-delivery-topbar[b-htc4fxp04n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rx-space-action-gap);
}

/* Comfortable targets for the controls an agent uses one-handed, in motion. */
.rx-my-delivery-touch[b-htc4fxp04n] {
    min-height: 44px;
}

/* ---------------------------------------------------------------- type scale */

.rx-my-delivery-field-label[b-htc4fxp04n] {
    display: block;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* The muted token, not an ad-hoc grey: labels must stay legible in daylight. */
    color: var(--mud-palette-text-secondary);
}

.rx-my-delivery-primary-value[b-htc4fxp04n] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}

.rx-my-delivery-secondary-value[b-htc4fxp04n] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

/* ------------------------------------------------------------------- header */

.rx-my-delivery-heading[b-htc4fxp04n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.rx-my-delivery-order-number[b-htc4fxp04n] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

/* ------------------------------------------------------------------ actions */

.rx-my-delivery-primary-action[b-htc4fxp04n] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Not an error state — the agent simply has nothing to do yet. */
.rx-my-delivery-waiting[b-htc4fxp04n] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-secondary);
}

.rx-my-delivery-action[b-htc4fxp04n] {
    align-self: stretch;
    margin-top: 0.5rem;
}

/* ------------------------------------------------------- distance and band */

/*
    Two figures side by side rather than one run-on line: the approximate distance and the
    business band answer different questions, and pairing each number with its own label is what
    makes them readable at a glance.
*/
.rx-my-delivery-distance[b-htc4fxp04n] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    padding-bottom: 0.25rem;
}

.rx-my-delivery-distance-figure[b-htc4fxp04n] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.rx-my-delivery-distance-primary[b-htc4fxp04n] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.rx-my-delivery-distance-band[b-htc4fxp04n] {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.rx-my-delivery-distance-note[b-htc4fxp04n] {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ----------------------------------------------------------- content blocks */

/*
    Semantic groups, separated enough to scan. A rule between them rather than more whitespace:
    the page must stay dense enough to read in one screenful.
*/
.rx-my-delivery-block[b-htc4fxp04n] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 0;
}

.rx-my-delivery-block + .rx-my-delivery-block[b-htc4fxp04n] {
    border-top: 1px solid var(--mud-palette-divider);
}

/*
    Addresses, customer names, instructions and item names are all free text of unknown length.
    `anywhere` rather than `break-word` so an unbroken token — a long street name, a pasted URL —
    still wraps instead of forcing a horizontal scrollbar. Never truncated.
*/
.rx-my-delivery-wrap[b-htc4fxp04n] {
    overflow-wrap: anywhere;
    white-space: normal;
}

.rx-my-delivery-address[b-htc4fxp04n] {
    line-height: 1.5;
}

.rx-my-delivery-instructions[b-htc4fxp04n] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    /* Warning-tinted so it is noticed, but text-first so colour is never the only signal. */
    border: 1px solid var(--mud-palette-warning);
    background-color: var(--mud-palette-warning-hover);
}

.rx-my-delivery-instructions p[b-htc4fxp04n] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
}

/* ----------------------------------------------------------------- metadata */

.rx-my-delivery-meta[b-htc4fxp04n] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--mud-palette-divider);
}

.rx-my-delivery-meta-item[b-htc4fxp04n] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
}

.rx-my-delivery-meta-item dd[b-htc4fxp04n] {
    margin: 0;
}

/* ------------------------------------------------------------------ payment */

.rx-my-delivery-payment[b-htc4fxp04n] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.rx-my-delivery-payment-amount[b-htc4fxp04n] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* The number an agent is about to ask a customer for. Deliberately the largest value on the card. */
.rx-my-delivery-amount-value[b-htc4fxp04n] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.rx-my-delivery-payment .rx-my-delivery-meta-item[b-htc4fxp04n] {
    align-self: stretch;
}

/* ---------------------------------------------------- items and the summary */

/* Secondary cards sit back visually so Delivery and Payment stay the focus. */
.rx-my-delivery-secondary-card[b-htc4fxp04n] {
    opacity: 0.96;
}

.rx-my-delivery-item[b-htc4fxp04n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
}

.rx-my-delivery-item + .rx-my-delivery-item[b-htc4fxp04n] {
    border-top: 1px solid var(--mud-palette-divider);
}

.rx-my-delivery-item-main[b-htc4fxp04n] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    /* Lets the name shrink and wrap instead of pushing the quantity off-screen. */
    min-width: 0;
    flex: 1 1 auto;
}

.rx-my-delivery-item-qty[b-htc4fxp04n] {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rx-my-delivery-total[b-htc4fxp04n] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.625rem;
    margin-top: 0.375rem;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: 1.0625rem;
    font-weight: 700;
}

/* ------------------------------------------------------------ wider screens */

/*
    Desktop widening only. The reading order is identical to mobile — the action and the
    collection button simply stop spanning the page, and the metadata becomes a row.

    600px and 960px match the breakpoints app.css already uses for this kind of shift.
*/
@media (min-width: 600px) {
    .rx-my-delivery-primary-action[b-htc4fxp04n],
    .rx-my-delivery-action[b-htc4fxp04n] {
        max-width: 22rem;
    }

    .rx-my-delivery-action[b-htc4fxp04n] {
        align-self: flex-start;
    }
}

@media (min-width: 960px) {
    .rx-my-delivery-meta[b-htc4fxp04n] {
        flex-direction: row;
        gap: 2.5rem;
    }

    .rx-my-delivery-meta-item[b-htc4fxp04n] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
        justify-content: flex-start;
    }

    .rx-my-delivery-payment[b-htc4fxp04n] {
        /* Status, amount and method read across on a wide card; the action stays below. */
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .rx-my-delivery-payment .rx-my-delivery-meta-item[b-htc4fxp04n] {
        align-self: auto;
    }

    .rx-my-delivery-payment .rx-my-delivery-action[b-htc4fxp04n] {
        flex-basis: 100%;
        margin-top: 0.25rem;
    }
}
/* /Pages/Offers/OfferCustomerExperiencePreview.razor.rz.scp.css */
.rx-cx-preview-item[b-ifstm3kqwn] {

    min-width: 0;

}



.rx-cx-preview-thumb[b-ifstm3kqwn] {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 4.5rem;

    height: 4.5rem;

    overflow: hidden;

    border: 1px solid var(--rx-color-border);

    border-radius: var(--rx-radius-md);

    background: color-mix(in srgb, var(--rx-color-primary) 6%, var(--rx-color-surface));

}



.rx-cx-preview-image[b-ifstm3kqwn] {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.rx-cx-preview-body[b-ifstm3kqwn] {

    min-width: 0;

}



.rx-cx-preview-prices[b-ifstm3kqwn] {

    flex-shrink: 0;

    text-align: right;

}



.rx-cx-preview-compare[b-ifstm3kqwn] {

    margin-top: var(--rx-space-density-xs);

    padding-top: var(--rx-space-density-sm);

    border-top: 1px solid var(--rx-color-border);

}



.rx-cx-preview-toolbar-check[b-ifstm3kqwn] {

    white-space: nowrap;

}


/* /Pages/Offers/OfferListPage.razor.rz.scp.css */
/*
    Offers List — what is specific to this screen on mobile.

    Shared, opted into rather than restated:

      wwwroot/mobile-record-list.css   rx-mobile-record-list  on the MudTable
      wwwroot/mobile-filter-stack.css  rx-mobile-filter-stack on the filter wrapper

    They supply the card shell, cell density, label typography and the stacked
    full-width filter controls. This screen has two rx-admin-filter-row rows
    rather than one, and the shared stack handles both without changes — and
    every control in them is an input, so unlike Menu Items, Modifier Groups and
    Delivery Agents there is no boolean control to opt back out. This file says
    nothing about the filters.

    960px: the width Breakpoint.Sm actually stacks a MudTable at, and the query
    both shared files use, so all three switch together. There is no min-width
    query in this file — desktop is never reached from here.

    One anchor: rx-offers-grid, a plain <div> this page owns. Blazor stamps its
    scope attribute onto HTML elements only, never onto a MudBlazor component
    root, so anchoring on rx-admin-grid-table (a MudTable) or
    rx-admin-grid-surface (a MudPaper) would match nothing.
*/

@media (max-width: 960px) {

    /*
        Release the desktop column sizing.

        Two things size these cells as table columns on desktop: app.css's
        .rx-admin-grid-status (8.75rem) and -actions (5.75rem), and this table's
        own <ColGroup> percentages. On a stacked card both cap the cell itself
        rather than a column, squeezing the status chip and leaving the Actions
        cell too narrow for three controls and its divider.
    */
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell {
        width: auto;
        max-width: none;
    }

    /*
        An offer card answers, in order: which offer, is it live, what kind of
        deal, what the customer gets, what it applies to, when it runs, when it
        last changed — then the actions.

        Done with `order` on a flex column, so no markup, no data and no desktop
        ordering changes. The DOM order is untouched — which is what a screen
        reader follows — and every value keeps its own visible label from
        data-label, so nothing is separated from what it means.
    */
    /*
        Retire the desktop column template on mobile.

        This is the only refined screen whose table declares a <ColGroup>. Making
        a row a flex container takes it out of the table formatting context, and
        the detached row is then sized by the first <col> — 16% — rather than by
        the table. Measured: a 179px card inside a 384px table, identical at
        every viewport, because the percentage is of the table and not of the
        screen. `width: 100%` does not fix it; the percentage resolves against
        that same column box.

        Hiding the colgroup removes the column template entirely, which is
        correct below 960px where there are no columns left to size — the rows
        are cards. Desktop keeps every one of its eight percentages.
    */
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table colgroup {
        display: none;
    }

    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Offer Name"] { order: 1; }
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] { order: 2; }
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Offer Type"] { order: 3; }
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Benefit"] { order: 4; }
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Applies To"] { order: 5; }
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Schedule"] { order: 6; }
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Last Updated"] { order: 7; }
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 8; }

    /*
        The offer name is the card's title and the status chip beneath it says
        whether the deal is live, scheduled, paused or done. Both say what they
        are, so both drop their labels.

        Everything else keeps its label. "Applies To", "Benefit" and "Schedule"
        are already prose summaries from the server — without their field names
        three sentences would run together with no way to tell which is which.
    */
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Offer Name"]:before,
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"]:before,
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Offer Name"] {
        padding-top: 0;
    }

    /*
        Reached through ::deep because the value sits on a MudText, whose root
        never carries the scope attribute. Mobile only.
    */
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Offer Name"] .rx-admin-grid-primary {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.25;
    }

    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] {
        padding-top: 0;
        padding-bottom: var(--rx-space-density-xs);
    }

    /*
        The benefit is what the offer actually gives, and the reason someone
        opens this screen. It carries weight rather than a larger size, so the
        labelled rows stay aligned.

        Presentation only: benefit_summary is server-supplied and untouched, as
        are the discount, eligibility and validity rules behind it.
    */
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Benefit"] .mud-typography {
        color: var(--rx-color-text-primary);
        font-weight: 700;
    }

    /*
        The three summary cells are prose of unknown length. They stay columns so
        a long sentence uses the card's full width instead of being squeezed into
        the half left over by its own label.
    */
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Applies To"],
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Benefit"],
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Schedule"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /*
        Three controls on their own line beneath a rule: Edit, Preview, and the
        permission-gated overflow menu. Spacing="0" is a desktop density that
        would put three 40px targets shoulder to shoulder, so they get a gap
        here. The menu keeps its own anchor and popover behaviour.
    */
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] {
        justify-content: flex-end;
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    /* MudStack's gap-0 utility is !important, so separating the targets must be too. */
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] > .d-flex {
        gap: var(--rx-space-density-xs) !important;
        align-items: center;
    }

    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }

    /*
        The overflow menu is a wrapper element, not a button: without this it
        keeps its intrinsic width and sits flush against the Preview icon.
    */
    .rx-offers-grid[b-cxjglzn3qw]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-menu {
        display: inline-flex;
        min-width: 0;
    }
}
/* /Pages/Operations/CashMovementHistoryPage.razor.rz.scp.css */
/*
    Cash Movement History — what is specific to this screen on mobile.

    The card shell, spacing, cell density and label typography all come from the
    shared primitive in wwwroot/mobile-record-list.css, which this page opts into
    with the rx-mobile-record-list class on its MudTable. Only rules that need to
    know something about *cash movements* belong here.

    Both blocks use 960px — the width Breakpoint.Sm actually stacks at, and the
    same query the shared primitive uses — so the two switch together.

    The filter stack comes from wwwroot/mobile-filter-stack.css, opted into with
    rx-mobile-filter-stack on the filter wrapper.

    Every selector below is anchored on rx-cash-history-grid, a plain <div> this
    page owns. Blazor stamps its scope
    attribute onto HTML elements only, never onto a MudBlazor component root, so
    anchoring on rx-admin-filter-toolbar (a MudPaper) or rx-admin-grid-table (a
    MudTable) would match nothing.
*/

@media (max-width: 960px) {

    /* ------------------------------------------------------------- the cards */

    /*
        Seven fields and an action make a long card, and the desktop column order leads with
        the timestamp — the ledger's ordering, not the reader's question. On a phone
        the record answers: what happened, how much, which way, between whom, and
        only then when and who recorded it.

        Done with `order` on a flex column, so no markup, no data and no desktop
        ordering changes. The DOM order is unchanged, which is what a screen
        reader follows; every value keeps its own visible label from data-label,
        so a value is never separated from what it means.
    */
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Type"] { order: 1; }
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Amount"] { order: 2; }
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Direction"] { order: 3; }
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Source → Destination"] { order: 4; }
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Date & Time"] { order: 7; }
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Reason"] { order: 8; }
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Created By"] { order: 9; }
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 10; }

    /*
        The eye is the card's one action, last, on its own line beneath a rule at a
        size a thumb can hit — the terminal list's treatment. It says what it is,
        so it drops its label.
    */
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] {
        justify-content: flex-end;
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }

    /*
        The route and the two named dates wrap rather than clip: an arrow line or a
        timestamp cut off is a fact cut off.
    */
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Source → Destination"] .rx-admin-grid-primary,
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Date & Time"] .rx-admin-grid-secondary {
        white-space: normal;
        overflow-wrap: anywhere;
    }


    /*
        Type is the card's title, and the cell that can hold two things — the
        movement name and its reversal badge. Left as a column so the badge sits
        under the name instead of being pushed to the opposite edge by the shared
        cell's space-between.
    */
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Type"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding-top: 0;
    }

    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Type"] .rx-admin-grid-primary {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    /*
        The money, and the direction that gives it its sign. Both self-describing
        — "Cash In" on a chip and a formatted amount need no field name — so they
        lose their labels and read as the record's headline figure.

        The amount is presentation only: AdminFormat.Money and the direction
        chip are untouched.
    */
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Type"]:before,
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Amount"]:before,
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Direction"]:before {
        content: none;
    }

    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Amount"] {
        color: var(--rx-color-text-primary);
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 1.25;
        /* The desktop numeric column is right-aligned; in a card it belongs with
           the movement it describes. */
        text-align: start;
        padding-bottom: var(--rx-space-density-xs);
    }

    /* The chip sits directly under the amount, not on its own labelled row. */
    .rx-cash-history-grid[b-cexpvd1dkm]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Direction"] {
        padding-top: 0;
    }
}
/* /Pages/Operations/CurrentSalesPage.razor.rz.scp.css */
/* Current Sales / X Report — presentation only. Every value used here is a CSS custom property
   already defined in app.css; no new colors or spacing scale are introduced. */

.rx-cs-context-strip[b-bzddxqe79l] {
    gap: var(--rx-space-density-sm);
    row-gap: var(--rx-space-density-xs);
}

.rx-cs-context-strip .rx-status-chip[b-bzddxqe79l] {
    font-weight: var(--rx-font-weight-semibold);
}

/* -------------------------------------------------------------------------------- HERO KPIs */

.rx-cs-hero[b-bzddxqe79l] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rx-space-density-lg);
}

/* Neutral by default — an operational count (Total Orders is the only tile that keeps this base
   treatment) is not a financial result, so it gets no color tint. The Sales and Collected tiles
   below override this with their own frozen KPI tone. */
.rx-cs-hero-tile[b-bzddxqe79l] {
    padding: var(--rx-space-density-lg);
    border-radius: var(--rx-radius-lg);
    background: color-mix(in srgb, var(--rx-color-text-secondary) 4%, var(--rx-color-surface));
    border: 1px solid var(--rx-color-border);
    min-width: 0;
}

/* Sales total: a very light brand tint. Text stays the same dark, existing color. */
.rx-cs-hero-tile--sales[b-bzddxqe79l] {
    background: color-mix(in srgb, var(--rx-status-confirmed) 7%, var(--rx-color-surface));
    border-color: color-mix(in srgb, var(--rx-status-confirmed) 18%, var(--rx-color-border));
}

/* Net collected: money actually received, tinted green and very slightly stronger than the
   Sales tile above. This is a "collected" signal only, never a profit signal. */
.rx-cs-hero-tile--collected[b-bzddxqe79l] {
    background: color-mix(in srgb, var(--rx-color-success) 9%, var(--rx-color-surface));
    border-color: color-mix(in srgb, var(--rx-color-success) 26%, var(--rx-color-border));
}

.rx-cs-hero-label[b-bzddxqe79l] {
    display: block;
    color: var(--rx-color-text-secondary);
    font-size: var(--rx-font-label);
    font-weight: var(--rx-font-weight-medium);
    margin-bottom: var(--rx-space-density-xs);
}

.rx-cs-hero-value[b-bzddxqe79l] {
    display: block;
    color: var(--rx-color-text-primary);
    font-size: 28px;
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.rx-cs-hero-value--muted[b-bzddxqe79l] {
    font-size: 16px;
    font-weight: var(--rx-font-weight-medium);
    color: var(--rx-color-text-secondary);
    font-style: italic;
}

@media (max-width: 720px) {
    .rx-cs-hero[b-bzddxqe79l] {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------------- CARDS */

.rx-cs-card[b-bzddxqe79l] {
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-lg);
    background: var(--rx-color-surface);
    box-shadow: var(--rx-shadow-card);
    padding: var(--rx-space-density-xl);
}

.rx-cs-card--attention[b-bzddxqe79l] {
    border-color: color-mix(in srgb, var(--rx-color-warning) 30%, var(--rx-color-border));
}

.rx-cs-grid-two[b-bzddxqe79l] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rx-space-density-lg);
    align-items: start;
}

@media (max-width: 960px) {
    .rx-cs-grid-two[b-bzddxqe79l] {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------------- LINE ITEMS */

.rx-cs-line[b-bzddxqe79l] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rx-space-density-md);
    padding: 3px 0;
    font-size: var(--rx-font-body);
    color: var(--rx-color-text-primary);
}

.rx-cs-line-label[b-bzddxqe79l] {
    min-width: 0;
}

.rx-cs-line-value[b-bzddxqe79l] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rx-cs-line--muted[b-bzddxqe79l] {
    color: var(--rx-color-text-secondary);
}

.rx-cs-line--divider[b-bzddxqe79l] {
    border-top: 1px solid var(--rx-color-border);
    margin-top: var(--rx-space-density-xs);
    padding-top: var(--rx-space-density-sm);
}

.rx-cs-line--primary .rx-cs-line-label[b-bzddxqe79l],
.rx-cs-line--primary .rx-cs-line-value[b-bzddxqe79l] {
    font-weight: var(--rx-font-weight-semibold);
}

.rx-cs-line--hero[b-bzddxqe79l] {
    padding-top: var(--rx-space-density-sm);
}

/* Size and weight only — the KPI tone (rx-kpi-tone-green-row, applied in markup) carries the
   color signal, so text stays the existing dark/normal color rather than being tinted too. */
.rx-cs-line--hero .rx-cs-line-label[b-bzddxqe79l],
.rx-cs-line--hero .rx-cs-line-value[b-bzddxqe79l] {
    font-size: 20px;
    font-weight: var(--rx-font-weight-bold);
    color: var(--rx-color-text-primary);
}

.rx-cs-line--flag .rx-cs-line-label[b-bzddxqe79l],
.rx-cs-line--flag .rx-cs-line-value[b-bzddxqe79l] {
    color: var(--rx-color-warning);
    font-weight: var(--rx-font-weight-semibold);
}

/* The shared rx-kpi-tone-*-row classes (app.css) carry no padding of their own, since they are
   also used on table rows whose cells already have padding. A div-based line item needs a touch
   of its own so the tint doesn't sit flush against the card edge. */
.rx-cs-line.rx-kpi-tone-blue-row[b-bzddxqe79l],
.rx-cs-line.rx-kpi-tone-green-row[b-bzddxqe79l],
.rx-cs-line.rx-kpi-tone-amber-row[b-bzddxqe79l] {
    padding-left: var(--rx-space-density-sm);
    padding-right: var(--rx-space-density-sm);
    border-radius: var(--rx-radius-sm);
}

.rx-cs-line-note[b-bzddxqe79l] {
    display: block;
    color: var(--rx-color-text-secondary);
    font-size: var(--rx-font-helper);
    margin-top: 1px;
}

/* -------------------------------------------------------------------------------- PAYMENT MIX */

.rx-cs-tender-row[b-bzddxqe79l] {
    padding: var(--rx-space-density-xs) 0;
}

.rx-cs-tender-head[b-bzddxqe79l] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rx-space-density-md);
    font-size: var(--rx-font-body);
}

.rx-cs-tender-name[b-bzddxqe79l] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-cs-tender-figures[b-bzddxqe79l] {
    display: flex;
    align-items: baseline;
    gap: var(--rx-space-density-sm);
    white-space: nowrap;
}

.rx-cs-tender-amount[b-bzddxqe79l] {
    font-variant-numeric: tabular-nums;
    font-weight: var(--rx-font-weight-medium);
}

.rx-cs-tender-percent[b-bzddxqe79l] {
    color: var(--rx-color-text-secondary);
    font-size: var(--rx-font-label);
    min-width: 2.5em;
    text-align: right;
}

.rx-cs-tender-bar-track[b-bzddxqe79l] {
    margin-top: 4px;
    height: 6px;
    border-radius: var(--rx-radius-pill);
    background: color-mix(in srgb, var(--rx-color-primary) 8%, var(--rx-color-background));
    overflow: hidden;
}

.rx-cs-tender-bar-fill[b-bzddxqe79l] {
    height: 100%;
    border-radius: var(--rx-radius-pill);
    background: var(--rx-color-primary);
}

/* -------------------------------------------------------------------------------- CASH / TILL */

.rx-cs-till-status-row[b-bzddxqe79l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rx-space-density-md);
    flex-wrap: wrap;
}

.rx-cs-exception-row[b-bzddxqe79l] {
    display: flex;
    align-items: flex-start;
    gap: var(--rx-space-density-sm);
    padding: var(--rx-space-density-sm) var(--rx-space-density-md);
    border-radius: var(--rx-radius-md);
    background: color-mix(in srgb, var(--rx-color-warning) 8%, var(--rx-color-surface));
    border: 1px solid color-mix(in srgb, var(--rx-color-warning) 24%, var(--rx-color-border));
}

.rx-cs-exception-row--quiet[b-bzddxqe79l] {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.rx-cs-exception-icon[b-bzddxqe79l] {
    color: var(--rx-color-warning);
    flex-shrink: 0;
    margin-top: 1px;
}

.rx-cs-exception-row--quiet .rx-cs-exception-icon[b-bzddxqe79l] {
    color: var(--rx-color-text-secondary);
}

/* -------------------------------------------------------------------------------- ORDER ACTIVITY */

.rx-cs-order-tiles[b-bzddxqe79l] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rx-space-density-md);
}

@media (max-width: 720px) {
    .rx-cs-order-tiles[b-bzddxqe79l] {
        grid-template-columns: 1fr;
    }
}

/* Neutral: these are operational counts (total/unpaid/cancelled orders), not a financial result. */
.rx-cs-order-tile[b-bzddxqe79l] {
    padding: var(--rx-space-density-md);
    border-radius: var(--rx-radius-md);
    background: color-mix(in srgb, var(--rx-color-text-secondary) 4%, var(--rx-color-background));
    border: 1px solid transparent;
    min-width: 0;
}

.rx-cs-order-tile-value[b-bzddxqe79l] {
    display: block;
    font-size: 22px;
    font-weight: var(--rx-font-weight-bold);
    color: var(--rx-color-text-primary);
    font-variant-numeric: tabular-nums;
}

.rx-cs-order-tile-label[b-bzddxqe79l] {
    display: block;
    color: var(--rx-color-text-secondary);
    font-size: var(--rx-font-label);
    font-weight: var(--rx-font-weight-medium);
    margin-top: 2px;
}

/* -------------------------------------------------------------------------------- DIAGNOSTICS */

.rx-cs-diagnostics-card[b-bzddxqe79l] {
    opacity: 0.96;
}

.rx-cs-diagnostic-row[b-bzddxqe79l] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rx-space-density-md);
    padding: 5px 0;
    font-size: var(--rx-font-body);
}

.rx-cs-diagnostic-row--attention[b-bzddxqe79l] {
    color: var(--rx-color-warning);
    font-weight: var(--rx-font-weight-semibold);
}

.rx-cs-diagnostic-value[b-bzddxqe79l] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Pages/Operations/DailySalesReportPage.razor.rz.scp.css */
/* Daily Sales / Z Report — presentation only. Brings the report into the same visual family as
   the frozen Current Sales (X Report) screen. Every value here is an existing CSS custom property
   already defined in app.css; no new colors or spacing scale are introduced. Report semantics,
   figures and calculations are unchanged. */

/* -------------------------------------------------------------------------------- MONETARY ALIGNMENT
   rx-admin-numeric is already used throughout this page's markup but was never defined anywhere
   in the design system, so every figure rendered left-aligned. This is the single biggest gap
   versus Current Sales, whose line items are all right-aligned with tabular figures. */

.rx-admin-numeric[b-u4895x7t7q] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------------- TABLE HIERARCHY
   A row already carrying a <strong> total/subtotal gets the same stronger separation Current
   Sales gives its primary line items — a top divider and consistent weight — without touching
   what the row says or how any figure is calculated. */

.rx-admin-card table tbody tr:has(strong) > td[b-u4895x7t7q] {
    border-top: 1px solid var(--rx-color-border);
    padding-top: var(--rx-space-density-sm);
    font-weight: var(--rx-font-weight-semibold);
}

/* A diagnostic or difference row already flagged by the app's own warning utility gets the same
   faint wash as the exception treatment on Current Sales. The warning classification itself is
   untouched. */
.rx-admin-card table tbody tr.mud-warning-text[b-u4895x7t7q] {
    background: color-mix(in srgb, var(--rx-color-warning) 6%, transparent);
}

/* -------------------------------------------------------------------------------- SECTION WIDTH
   rx-admin-grid-secondary is a data-grid cell class from app.css and it carries white-space:
   nowrap, which is right for the short secondary cells it was written for. This page also hangs
   sentence-length explanations off it inside table cells, and nowrap turns each of those into one
   unbreakable line. Measured, the Sales, Order activity and Diagnostics tables demanded roughly
   750-1100px against the ~310px a phone gives them, and Order activity still overflowed at
   1024px. Tenders and Reconciliation carry no in-cell explanations, which is the only reason they
   already fit: they use no responsive mechanism this page lacks.

   Letting that text wrap inside its own cell is the entire fix. Scoped to this page, so the class
   keeps its grid meaning on every other Admin screen, and the numeric column is excluded so money
   stays on one line, right-aligned, exactly as it is today.

   Deliberately not behind a media query: the overflow reaches 1024px, not just the phone breakpoint,
   and at 1280px and above this rule changes no cell's measured geometry at all. */

td[b-u4895x7t7q]  .rx-admin-grid-secondary,
td.rx-admin-grid-secondary:not(.rx-admin-numeric)[b-u4895x7t7q] {
    white-space: normal;
}

/* ------------------------------------------------------------------------- VALUE-COLUMN PROSE
   Three cells in the Cash / Till section state a condition rather than a figure — "NOT AVAILABLE",
   "Not reconciled", and the sentence explaining that no till session was opened. They sit in the
   value column and so wear rx-admin-numeric, which is nowrap so money never breaks. A 50-character
   sentence under that rule is one unbreakable line: the section measured 505px against the ~309px
   a phone gives it.

   rx-admin-value-text marks a value cell whose content is words, not a number. It keeps the right
   alignment the column already has — the figures above it are still the reference — and only lifts
   the nowrap those words never needed. Money cells are untouched: they do not carry this class. */

td.rx-admin-numeric.rx-admin-value-text[b-u4895x7t7q] {
    white-space: normal;
}

/* On the narrowest phones what is left is not wrapping but gutters: MudBlazor's dense cell padding
   is 16px each side, so a two-column row spends 64px of the ~239px a 320px screen leaves — over a
   quarter of the table on whitespace. Halving it there returns enough room for "Till reconciliation"
   and "NOT AVAILABLE" to sit on their own lines whole.

   Preferred over overflow-wrap: anywhere, which also fits but splits words mid-syllable
   ("reconcili/ation") — not something a financial report should do to its own labels. The
   breakpoint is the app's existing narrow-phone one, already used by ReportContextStrip, and the
   rule is inert at 360px and above. Vertical padding, alignment and every other spacing token are
   untouched. */

@media (max-width: 359.98px) {
    .rx-admin-card table td[b-u4895x7t7q] {
        padding-left: var(--rx-space-density-sm);
        padding-right: var(--rx-space-density-sm);
    }
}
/* /Pages/Operations/Dialogs/FinalizeBusinessDayConfirmDialog.razor.rz.scp.css */
/* The "What will happen?" list: supporting text, tight to the heading above it. Plain markup in
   this file, so the scope attribute lands on it even though the dialog renders under the provider. */
.rx-finalize-consequences[b-kyqokcen17] {
    margin: 0;
    padding-inline-start: 1.25rem;
    color: var(--rx-color-text-secondary);
    font-size: var(--rx-font-helper);
    line-height: 1.45;
}

.rx-finalize-consequences li + li[b-kyqokcen17] {
    margin-top: var(--rx-space-density-xs);
}
/* /Pages/Operations/OperationsDashboard.razor.rz.scp.css */
/* Micro-align Counted Cash with adjacent till action buttons (~4px). */
[b-08f1rnglbl] .rx-ops-counted-cash .mud-input-slot {
    min-height: 10px;
}
/* /Pages/Operations/RefundAuthorizationDetailPage.razor.rz.scp.css */
.rx-refund-review-page[b-rp09pw3sck] {
    max-width: 44rem;
}

.rx-refund-review-amount-row[b-rp09pw3sck] {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    width: 100%;
}

.rx-refund-review-actions[b-rp09pw3sck] {
    flex-wrap: wrap;
    width: 100%;
}

.rx-refund-review-reject-reason[b-rp09pw3sck] {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 599.98px) {
    .rx-refund-review-page[b-rp09pw3sck] {
        max-width: 100%;
    }
}
/* /Pages/Operations/RefundHistoryPage.razor.rz.scp.css */
/*
    Refund History — what is specific to this screen on mobile.

    The card shell, spacing, cell density and label typography come from the shared
    primitive in wwwroot/mobile-record-list.css (opted into with rx-mobile-record-list
    on the MudTable); the filter stack from wwwroot/mobile-filter-stack.css (opted into
    with rx-mobile-filter-stack on the filter wrapper). This file is the Cash Movement
    History's treatment applied to a refund: only the card order and which cells drop
    their labels are decided here.

    960px is the width Breakpoint.Sm actually stacks at and the query the shared
    primitive uses, so the two switch together. Every selector is anchored on
    rx-refund-history-grid, a plain <div> this page owns: Blazor stamps its scope
    attribute onto HTML elements only, never onto a MudBlazor component root.
*/

@media (max-width: 960px) {

    /*
        On a phone the record answers: which order, how much, what state, and only
        then how it was paid, when, why and by whom. Done with `order` on a flex
        column, so the DOM order — what a screen reader follows — is unchanged, and
        every value keeps its own visible label from data-label.
    */
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Order"] { order: 1; }
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Amount"] { order: 2; }
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] { order: 3; }
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Payment method"] { order: 4; }
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Business date"] { order: 5; }
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Reason"] { order: 6; }
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Created by"] { order: 7; }
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 8; }

    /* The eye is the card's one action, last, on its own line, at a size a thumb can hit. */
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] {
        justify-content: flex-end;
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }

    /* The two named dates and the reason wrap rather than clip: a fact cut off is a fact lost. */
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Business date"] .rx-admin-grid-secondary,
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Reason"] .rx-admin-grid-secondary {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Order is the card's title. */
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Order"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding-top: 0;
    }

    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Order"] .rx-admin-grid-primary {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    /*
        The money and its status chip are self-describing, so they lose their labels and
        read as the record's headline figure. Presentation only: the formatted amount and
        the shared lifecycle chip are untouched.
    */
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Order"]:before,
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Amount"]:before,
    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"]:before {
        content: none;
    }

    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Amount"] {
        color: var(--rx-color-text-primary);
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 1.25;
        text-align: start;
        padding-bottom: var(--rx-space-density-xs);
    }

    .rx-refund-history-grid[b-qm6tli5ucl]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] {
        padding-top: 0;
    }
}
/* /Pages/Operations/SalesByItemReportPage.razor.rz.scp.css */
/* --------------------------------------------------------------------------- MONETARY ALIGNMENT
   rx-admin-numeric is used by six report pages but is only defined inside
   DailySalesReportPage.razor.css, which is Blazor scoped CSS — its rule is rewritten with that
   component's own attribute, so it applies to Daily Sales and nowhere else. On this page the class
   was therefore inert and every figure rendered left-aligned.

   Redefining it here, scoped to this component, fixes this page without touching the shared design
   system or the other report pages. The declarations match Daily Sales exactly so the two reports
   line up: right-aligned, tabular figures that keep their columns steady as values change, and no
   wrapping mid-number.

   This works on plain <th>/<td> because those elements are written in this component's own markup
   and so carry its scope attribute. It deliberately does not reach elements rendered by MudBlazor
   components — those would need ::deep, and the KPI tiles are meant to stay left-aligned anyway,
   matching every other report. */

.rx-admin-numeric[b-vvzqma6nc0] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Pages/Operations/ShiftHistoryPage.razor.rz.scp.css */
/*
    Shift History — what is specific to this screen on mobile.

    The card shell, spacing, cell density and label typography come from the
    shared primitive in wwwroot/mobile-record-list.css, which this page opts into
    with the rx-mobile-record-list class on its MudTable. This screen is its
    third consumer, and needed no change to it — only rules that know something
    about *shifts* live here.

    960px throughout: the width Breakpoint.Sm actually stacks at, and the query
    the shared primitive uses, so the two switch together.

    The filter stack comes from wwwroot/mobile-filter-stack.css, opted into with
    rx-mobile-filter-stack on the filter wrapper.

    Every selector below is anchored on rx-shift-history-grid, a plain <div> this
    page owns. Blazor stamps its scope attribute onto HTML elements
    only, never onto a MudBlazor component root, so anchoring on
    rx-admin-filter-toolbar (a MudPaper) or rx-admin-grid-table (a MudTable)
    would match nothing.
*/

@media (max-width: 960px) {

    /* ------------------------------------------------------------- the cards */

    /*
        Ten columns, ordered for reading a shift after the fact: which shift and
        what state it ended in, then where and who, then when it ran, and last
        the cash it reconciled to.

        Done with `order` on a flex column, so no markup, no data and no desktop
        ordering changes. The DOM order is untouched — which is what a screen
        reader follows — and every value keeps its own visible label from
        data-label, so no figure is ever separated from what it means.
    */
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Shift Number"] { order: 1; }
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] { order: 2; }
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Opened By"] { order: 3; }
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Business Date"] { order: 4; }
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Opened"] { order: 5; }
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Closed"] { order: 6; }
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Expected"] { order: 7; }
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actual"] { order: 8; }
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Variance"] { order: 9; }
    /* Provenance sits with the reconciliation figures rather than beside the title: on a card it
       is context for reading the row, not the row's identity. */
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Type"] { order: 10; }
    /* Last on the card. The action follows everything it acts on, and without an explicit order
       it would otherwise jump to the front. Empty for a shift that is not open, which costs
       nothing because the cell collapses. */
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 11; }

    /*
        The shift number is the card's title, and the status chip beneath it is
        the answer to "did this one close cleanly". Both say what they are, so
        both drop their labels.
    */
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Shift Number"]:before,
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"]:before {
        content: none;
    }

    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Shift Number"] {
        padding-top: 0;
    }

    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Shift Number"] .rx-admin-grid-primary {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] {
        padding-top: 0;
        padding-bottom: var(--rx-space-density-xs);
    }

    /*
        Expected, Actual and Variance are one reconciliation, so they stay
        together, in that order, at their shared size — reading them as a group
        is the point. Variance is the figure a manager is looking for, so it
        carries the weight rather than a larger type size that would break the
        column of numbers.

        The desktop numeric columns are right-aligned; in a card the value
        belongs with its own label, which the shared cell already handles.
        AdminFormat.Money and the server-supplied cash_variance are untouched.
    */
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Variance"] {
        color: var(--rx-color-text-primary);
        font-weight: 700;
    }

    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Variance"]:before {
        color: var(--rx-color-text-primary);
    }

    /* The reconciliation triple reads as one block, not three loose rows. */
    .rx-shift-history-grid[b-jx143ex2zj]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Expected"] {
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }
}
/* /Pages/Operations/TerminalListPage.razor.rz.scp.css */
/*
    Terminal List — what is specific to this screen on mobile.

    Shared, opted into rather than restated:

      wwwroot/mobile-record-list.css   rx-mobile-record-list  on the MudTable
      wwwroot/mobile-filter-stack.css  rx-mobile-filter-stack on the filter wrapper

    They supply the card shell, cell density, label typography and the stacked
    full-width filter controls. Only what is genuinely about terminals lives
    below.

    This table declares no <ColGroup>, so the column-template problem found on
    Offers does not arise here — verified before writing any of this.

    960px: the width Breakpoint.Sm actually stacks a MudTable at, and the query
    both shared files use, so all three switch together. There is no min-width
    query in this file — desktop is never reached from here.

    One anchor: rx-terminals-grid, a plain <div> this page owns. Blazor stamps
    its scope attribute onto HTML elements only, never onto a MudBlazor
    component root, so anchoring on rx-admin-grid-table (a MudTable) or
    rx-admin-grid-surface (a MudPaper) would match nothing.
*/

@media (max-width: 960px) {

    /*
        Release the desktop column widths.

        app.css sizes .rx-admin-grid-status (8.75rem) and -actions (5.75rem) as
        table columns. Correct for a <td> in a row; on a stacked card the same
        declaration caps the cell itself, leaving the Actions cell too narrow for
        three controls and its divider.
    */
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell {
        width: auto;
    }

    /*
        A terminal card reads: which terminal, whether it is in service, the code
        it is known by, what kind of device it is, where it stands, and the
        machine it is bound to — then the actions.

        Done with `order` on a flex column, so no markup, no data and no desktop
        ordering changes. The DOM order is untouched — which is what a screen
        reader follows — and every value keeps its own visible label from
        data-label, so nothing is separated from what it means.
    */
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Terminal Name"] { order: 1; }
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] { order: 2; }
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Terminal Code"] { order: 3; }
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Type"] { order: 4; }
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Software update"] { order: 5; }
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Machine Identifier"] { order: 6; }
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 7; }

    /*
        The terminal name is the card's title and the status chip beneath it says
        whether the device is in service. Both say what they are, so both drop
        their labels.

        Everything else keeps its label. A bare code, type, location or machine
        identifier would be four unattributed strings.
    */
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Terminal Name"]:before,
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"]:before,
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Terminal Name"] {
        padding-top: 0;
    }

    /*
        Reached through ::deep because the value sits on a MudText, whose root
        never carries the scope attribute. Mobile only.
    */
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Terminal Name"] .rx-admin-grid-primary {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.25;
    }

    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] {
        padding-top: 0;
        padding-bottom: var(--rx-space-density-xs);
    }

    /* The code is how an operator refers to this terminal out loud. */
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Terminal Code"] .mud-typography {
        color: var(--rx-color-text-primary);
        font-weight: 700;
    }

    /*
        The machine identifier is a device fingerprint of unknown length and no
        word breaks. It keeps its own line so it can wrap instead of squeezing
        into the half left over by its label.
    */
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Machine Identifier"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /*
        View, Edit and the activate/deactivate toggle on their own line beneath a
        rule, at a size a thumb can hit. They keep their existing order, so the
        state-changing control is never the first thing under the finger, and
        they keep the disabled state they already take from IsActionInProgress.
    */
    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] {
        justify-content: flex-end;
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-terminals-grid[b-zsz39f75e7]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }
}
/* /Pages/Operations/TillHistoryPage.razor.rz.scp.css */
/*
    Till History — what is specific to this screen on mobile.

    Everything shared already existed and is opted into rather than restated:

      wwwroot/mobile-record-list.css   rx-mobile-record-list  on the MudTable
      wwwroot/mobile-filter-stack.css  rx-mobile-filter-stack on the filter wrapper

    Between them they supply the card shell, cell density, label typography, and
    the stacked full-width filter controls. Nothing in this file repeats any of
    it — only rules that need to know something about *tills* live here.

    960px: the width Breakpoint.Sm actually stacks at, and the query both shared
    files use, so all three switch together.

    The one anchor is rx-till-history-grid, a plain <div> this page owns. Blazor
    stamps its scope attribute onto HTML elements only, never onto a MudBlazor
    component root, so anchoring on rx-admin-grid-table (a MudTable) or
    rx-admin-grid-surface (a MudPaper) would match nothing.
*/

@media (max-width: 960px) {

    /*
        Eleven columns, ordered for investigating a till: which till and what
        state it is in, then where it lived and who opened it, and last the four
        figures that reconcile it.

        Done with `order` on a flex column, so no markup, no data and no desktop
        ordering changes. The DOM order is untouched — which is what a screen
        reader follows — and every value keeps its own visible label from
        data-label, so no figure is ever separated from what it means.
    */
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Till"] { order: 1; }
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] { order: 2; }
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Terminal"] { order: 3; }
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 4; }
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Shift"] { order: 5; }
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Opened By"] { order: 6; }
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Opened"] { order: 7; }
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Opening Float"] { order: 8; }
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Expected"] { order: 9; }
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Counted"] { order: 10; }
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Variance"] { order: 11; }

    /*
        The till number is the card's title and the status chip beneath it says
        whether it is still open, closed or reconciled. Both say what they are,
        so both drop their labels.
    */
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Till"]:before,
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"]:before {
        content: none;
    }

    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Till"] {
        padding-top: 0;
    }

    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Till"] .rx-admin-grid-primary {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] {
        padding-top: 0;
        padding-bottom: var(--rx-space-density-xs);
    }

    /*
        Opening Float, Expected, Counted and Variance are one reconciliation —
        four figures, not three as on Shift History, because a till also carries
        the float it started with. They stay together, in that order, at their
        shared size: reading them as a column of numbers is the point.

        Variance is what an investigator is looking for, so it carries the
        weight rather than a larger type size that would break that column.

        Presentation only: AdminFormat.Money and the server-supplied amounts are
        untouched.
    */
    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Opening Float"] {
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Variance"] {
        color: var(--rx-color-text-primary);
        font-weight: 700;
    }

    .rx-till-history-grid[b-pljff48sfr]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Variance"]:before {
        color: var(--rx-color-text-primary);
    }
}
/* /Pages/Orders/Index.razor.rz.scp.css */
.rx-orders-page[b-68u6tx9tdi] {
    min-height: 100%;
}

.rx-orders-header[b-68u6tx9tdi] {
    gap: 1rem;
}

.rx-orders-title[b-68u6tx9tdi] {
    color: var(--rx-color-text-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rx-orders-filter-row[b-68u6tx9tdi] {
    gap: 0.375rem;
}

@media (max-width: 959.98px) {
    .rx-orders-filter-row[b-68u6tx9tdi] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}
/* /Pages/Orders/OrderBillingDetailsPage.razor.rz.scp.css */
/*
    Billing Details.

    The receipt block below is the Order Details Billing panel's total treatment, reproduced from
    the same tokens so the two screens read as one system. Nothing here invents a colour, radius,
    weight or spacing value; the breakpoints are the ones already used across Order Details.
*/

.rx-order-billing-details-page[b-36k5266gb5] {
    width: 100%;
    min-width: 0;
}

.rx-order-billing-details-retry[b-36k5266gb5] {
    align-self: flex-start;
}

.rx-order-billing-details-receipt[b-36k5266gb5] {
    display: grid;
    gap: 0.375rem;
}

.rx-order-billing-details-total[b-36k5266gb5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    margin-top: var(--rx-space-density-md);
    padding-top: var(--rx-space-density-md);
    border-top: 1px solid var(--rx-color-border);
}

.rx-order-billing-details-total-label[b-36k5266gb5] {
    color: var(--rx-color-text-primary);
    font-size: var(--rx-font-body);
    font-weight: var(--rx-font-weight-semibold);
}

.rx-order-billing-details-total-value[b-36k5266gb5] {
    color: var(--rx-color-text-primary);
    font-size: var(--rx-font-section-title);
    font-weight: var(--rx-font-weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .rx-order-billing-details-total[b-36k5266gb5] {
        align-items: start;
    }

    .rx-order-billing-details-total-value[b-36k5266gb5] {
        font-size: var(--rx-font-card-title);
    }
}
/* /Pages/Orders/OrderDetailsPage.razor.rz.scp.css */
.rx-order-details-page[b-uonh1mlfh6] {
    width: 100%;
    min-width: 0;
}

.rx-order-details-page-state[b-uonh1mlfh6] {
    min-height: 12rem;
    padding: var(--rx-space-layout-lg) 0;
}

.rx-order-details-retry[b-uonh1mlfh6] {
    align-self: flex-start;
}
/* /Pages/Orders/OrderPaymentDetailsPage.razor.rz.scp.css */
/*
    Payment Details.

    Two columns of DetailRow on desktop, one on tablet and below — the same split Order Details
    already uses for Order Information. The reference rows are hand-authored because they carry a
    copy button, so they repeat DetailRow's label column width from the same token rather than
    introducing a second measurement.
*/

.rx-order-payment-details-page[b-sogimxzkpd] {
    width: 100%;
    min-width: 0;
}

.rx-order-payment-details-retry[b-sogimxzkpd] {
    align-self: flex-start;
}

.rx-order-payment-details-grid[b-sogimxzkpd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--rx-drawer-section-spacing);
    align-items: start;
}

.rx-order-payment-details-transaction[b-sogimxzkpd] {
    display: grid;
    gap: 0.375rem;
}

.rx-order-payment-details-reference[b-sogimxzkpd] {
    display: grid;
    grid-template-columns: minmax(var(--rx-detail-label-width), var(--rx-detail-label-width)) minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: center;
    min-height: var(--rx-detail-row-min-height);
    padding: var(--rx-space-detail-row-padding-y) 0;
}

.rx-order-payment-details-reference-value[b-sogimxzkpd] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.rx-order-payment-details-reference-value .rx-order-detail-value[b-sogimxzkpd] {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 959.98px) {
    .rx-order-payment-details-grid[b-sogimxzkpd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 599.98px) {
    .rx-order-payment-details-reference[b-sogimxzkpd] {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
        align-items: start;
    }
}
/* /Pages/Restaurants/Details.razor.rz.scp.css */
.rx-restaurant-details-page[b-bjd1detqqm] {
    min-height: 100%;
}

.rx-restaurants-header[b-bjd1detqqm] {
    gap: 1rem;
}

.rx-restaurants-detail-actions[b-bjd1detqqm] {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.rx-restaurant-details-grid[b-bjd1detqqm] {
    align-items: stretch;
}

.rx-restaurant-detail-section[b-bjd1detqqm] {
    height: 100%;
}

.rx-restaurant-detail-rows[b-bjd1detqqm] {
    min-width: 0;
}

.rx-restaurant-logo-preview[b-bjd1detqqm] {
    display: block;
    max-height: 56px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid var(--rx-color-border, #D9DEE7);
    border-radius: 6px;
    background: var(--rx-color-surface, #FFFFFF);
    padding: 4px;
}

.rx-restaurants-placeholder[b-bjd1detqqm] {
    padding: var(--rx-space-detail-section-padding);
    border: 1px dashed var(--rx-color-border);
    border-style: dashed;
    border-radius: var(--rx-radius-lg);
    background: var(--rx-color-surface);
    box-shadow: none;
}

@media (max-width: 599.98px) {
    .rx-restaurants-header[b-bjd1detqqm] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .rx-restaurants-detail-actions[b-bjd1detqqm] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* /Pages/Restaurants/Dialogs/PauseOrdersDialog.razor.rz.scp.css */
/* Pause Online Orders dialog — customer message as secondary preview copy */

[b-s54nl871je] .rx-oa-pause-dialog .rx-oa-pause-message textarea.mud-input-slot,
[b-s54nl871je] .rx-oa-pause-dialog .rx-oa-pause-message .mud-input-slot {
    font-weight: 400 !important;
    font-size: var(--rx-font-body, 0.875rem) !important;
    line-height: 1.5 !important;
    letter-spacing: normal;
    color: var(--rx-color-text-primary);
}

[b-s54nl871je] .rx-oa-pause-dialog .rx-oa-pause-message .mud-input-helper-text {
    font-size: var(--rx-font-caption, 0.75rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--rx-color-text-secondary);
}

[b-s54nl871je] .rx-oa-pause-dialog .rx-oa-pause-message .mud-input.mud-input-outlined {
    background: var(--rx-color-surface);
}
/* /Pages/Restaurants/Dialogs/RestaurantSettingsSaveConfirmDialog.razor.rz.scp.css */
/* The change list can carry long URLs; it scrolls sideways inside the dialog on a phone
   instead of pushing the dialog wider than the screen. */
.rx-restaurant-settings-change-scroll[b-221xt5javu] {
    max-width: 100%;
    overflow-x: auto;
}

.rx-restaurant-settings-change-scroll[b-221xt5javu]  td,
.rx-restaurant-settings-change-scroll[b-221xt5javu]  th {
    vertical-align: top;
    overflow-wrap: anywhere;
    min-width: 6rem;
}
/* /Pages/Restaurants/OrderingAvailabilityPage.razor.rz.scp.css */
.rx-oa-page[b-6jpslqjjpn] {
    min-height: 100%;
}

.rx-oa-header[b-6jpslqjjpn] {
    gap: var(--rx-space-density-md);
}

.rx-oa-section-gap[b-6jpslqjjpn] {
    margin-top: var(--rx-space-density-lg);
}

.rx-oa-status-chip[b-6jpslqjjpn] {
    font-weight: var(--rx-font-weight-semibold);
    letter-spacing: 0.02em;
}

.rx-oa-meta-table[b-6jpslqjjpn] {
    width: 100%;
}

.rx-oa-meta-table td[b-6jpslqjjpn] {
    padding: var(--rx-space-density-xs) 0;
    vertical-align: top;
}

.rx-oa-meta-table td:first-child[b-6jpslqjjpn] {
    width: 9.5rem;
    padding-right: var(--rx-space-density-md);
}

.rx-oa-why[b-6jpslqjjpn] {
    padding: var(--rx-space-density-md);
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: color-mix(in srgb, var(--rx-color-primary) 4%, var(--rx-color-surface));
}

.rx-oa-actions[b-6jpslqjjpn] {
    flex-wrap: wrap;
}

.rx-oa-window[b-6jpslqjjpn] {
    padding: var(--rx-space-density-sm) var(--rx-space-density-md);
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: var(--rx-color-surface);
}

.rx-oa-window-active[b-6jpslqjjpn] {
    border-color: color-mix(in srgb, var(--rx-color-success) 34%, var(--rx-color-border));
    background: color-mix(in srgb, var(--rx-color-success) 10%, var(--rx-color-surface));
}

.rx-oa-window-active-label[b-6jpslqjjpn] {
    color: color-mix(in srgb, var(--rx-color-success) 70%, var(--rx-color-text-primary));
    font-weight: var(--rx-font-weight-medium);
}

.rx-oa-schedule-toolbar[b-6jpslqjjpn] {
    flex-wrap: wrap;
}

.rx-oa-day[b-6jpslqjjpn] {
    padding: var(--rx-space-density-md);
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: color-mix(in srgb, var(--rx-color-text-secondary) 3%, var(--rx-color-surface));
}

.rx-oa-day-header[b-6jpslqjjpn] {
    margin-bottom: var(--rx-space-density-sm);
}

.rx-oa-day-window[b-6jpslqjjpn] {
    flex-wrap: wrap;
}

.rx-oa-time[b-6jpslqjjpn] {
    min-width: 8.5rem;
    max-width: 10rem;
}

@media (max-width: 960px) {
    .rx-oa-meta-table td:first-child[b-6jpslqjjpn] {
        width: 7.5rem;
    }
}
/* /Pages/Restaurants/RestaurantEdit.razor.rz.scp.css */
.rx-restaurant-edit-page[b-yc2pqxnfee] {
    min-height: 100%;
}

.rx-restaurants-edit-header[b-yc2pqxnfee] {
    gap: 1rem;
}

.rx-restaurant-logo-preview[b-yc2pqxnfee] {
    display: block;
    max-height: 56px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid var(--rx-color-border, #D9DEE7);
    border-radius: 6px;
    background: var(--rx-color-surface, #FFFFFF);
    padding: 4px;
}

.rx-restaurant-readonly-color-row[b-yc2pqxnfee] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.rx-theme-color-preview[b-yc2pqxnfee] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: -0.25rem;
}

.rx-theme-color-preview-swatch[b-yc2pqxnfee] {
    height: 28px;
    width: 100%;
    border: 1px solid var(--rx-color-border, #D9DEE7);
    border-radius: 6px;
    box-sizing: border-box;
}

.rx-theme-color-preview-swatch--empty[b-yc2pqxnfee] {
    background: var(--rx-color-background, #F4F6F9);
}

.rx-theme-color-preview-label[b-yc2pqxnfee] {
    margin: 0;
}

.rx-theme-color-helper[b-yc2pqxnfee] {
    margin-top: 0;
}

.rx-theme-color-warning-slot[b-yc2pqxnfee] {
    min-height: 2.75rem;
}

.rx-theme-color-contrast-warning[b-yc2pqxnfee] {
    margin: 0;
}

@media (max-width: 599.98px) {
    .rx-restaurants-edit-header[b-yc2pqxnfee] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .rx-restaurants-edit-actions[b-yc2pqxnfee] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* /Pages/Staff/StaffListPage.razor.rz.scp.css */
/*
    Staff List — what is specific to this screen on mobile.

    Everything shared already existed and is opted into rather than restated:

      wwwroot/mobile-record-list.css   rx-mobile-record-list  on the MudTable
      wwwroot/mobile-filter-stack.css  rx-mobile-filter-stack on the filter wrapper

    Between them they supply the card shell, cell density, label typography and
    the stacked full-width filter controls. This screen's filter row is a search
    field and a Status select — exactly the pair the stack was built for — so
    unlike Menu Items and Modifier Groups it needs no local override there at
    all, and this file says nothing about the filters.

    960px: the width Breakpoint.Sm actually stacks a MudTable at, and the query
    both shared files use, so all three switch together. There is no min-width
    query in this file — desktop is never reached from here.

    One anchor: rx-staff-list-grid, a plain <div> this page owns. Blazor stamps
    its scope attribute onto HTML elements only, never onto a MudBlazor
    component root, so anchoring on rx-admin-grid-table (a MudTable) or
    rx-admin-grid-surface (a MudPaper) would match nothing.
*/

@media (max-width: 960px) {

    /*
        Release the desktop column widths.

        app.css sizes .rx-admin-grid-status (8.75rem) and -actions (5.75rem) as
        table columns. Correct for a <td> in a row; on a stacked card the same
        declaration caps the cell itself, leaving the Actions cell too narrow for
        its divider and its right alignment.
    */
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell {
        width: auto;
    }

    /*
        A staff card reads as a person: who they are, whether their access is
        live, what they do, then the record details, then the actions.

        The desktop table leads with Staff Code because it is the stable
        identifier and sorts well in a column. On a card a human scans for the
        name, so the name leads and the code stays as a labelled field just
        below the status. No column is dropped and no value is changed.

        Done with `order` on a flex column, so no markup, no data and no desktop
        ordering changes. The DOM order is untouched — which is what a screen
        reader follows — and every value keeps its own visible label from
        data-label, so nothing is separated from what it means.
    */
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Display Name"] { order: 1; }
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] { order: 2; }
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Role"] { order: 3; }
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Staff Code"] { order: 4; }
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Created Date"] { order: 5; }
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 6; }

    /*
        The name is the card's title and the status chip beneath it says whether
        the membership is live. Both say what they are, so both drop their
        labels. Role, Staff Code and Created Date keep theirs — a bare role or a
        bare code would be ambiguous on a card.
    */
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Display Name"]:before,
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"]:before,
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Display Name"] {
        padding-top: 0;
    }

    /*
        Reached through ::deep because the value sits on a MudText, whose root
        never carries the scope attribute. Mobile only: the desktop cell keeps
        the secondary treatment it renders today.
    */
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Display Name"] .mud-typography {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.25;
    }

    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Status"] {
        padding-top: 0;
        padding-bottom: var(--rx-space-density-xs);
    }

    /* The role is what the card is scanned for after the name. */
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Role"] .mud-typography {
        color: var(--rx-color-text-primary);
        font-weight: 700;
    }

    /*
        View and Edit on their own line beneath a rule, at a size a thumb can
        hit. They keep their existing order and their existing permission gate.
    */
    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] {
        justify-content: flex-end;
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-staff-list-grid[b-2ktck0ype6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }
}
/* /Pages/Taxes/TaxListPage.razor.rz.scp.css */
/*
    Tax List — what is specific to this screen on mobile.

    Shared, opted into rather than restated:

      wwwroot/mobile-record-list.css   rx-mobile-record-list  on the MudTable
      wwwroot/mobile-filter-stack.css  rx-mobile-filter-stack on the filter wrapper

    They supply the card shell, cell density, label typography and the stacked
    full-width filter controls. The filter row is a search field and one Status
    select — the pair the stack was built for — and this page declares no inline
    min-widths, so nothing about the filters is repeated here.

    960px: the width Breakpoint.Sm actually stacks a MudTable at, and the query
    both shared files use, so all three switch together. There is no min-width
    query in this file — desktop is never reached from here.

    One anchor: rx-taxes-grid, a plain <div> this page owns. Blazor stamps its
    scope attribute onto HTML elements only, never onto a MudBlazor component
    root, so anchoring on rx-admin-grid-table (a MudTable) or
    rx-admin-grid-surface (a MudPaper) would match nothing.

    Structurally the same treatment as Fee List. That is deliberate: the two
    screens carry the same six columns and the same card hierarchy, so a Tax
    card and a Fee card should read identically. The rules live here rather than
    in a shared file because they name this screen's own column labels.
*/

@media (max-width: 960px) {

    /*
        Retire the desktop column template on mobile.

        This table declares a <ColGroup> — 32/22/14/14/10/8. Making a row a flex
        container takes it out of the table formatting context, and the detached
        row is then sized by the first <col> rather than by the table. Offers,
        Discounts and Fees all hit exactly this.

        `width: 100%` does not fix it — the percentage resolves against that same
        column box. Retiring the template does, and it is correct below 960px
        where there are no columns left to size: the rows are cards.

        Desktop keeps all six percentages.
    */
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table colgroup {
        display: none;
    }

    /*
        Release the desktop cell widths.

        app.css also sizes .rx-admin-grid-numeric (8.5rem), -status (8.75rem) and
        -actions (5.75rem) as table columns. Correct for a <td> in a row; on a
        stacked card the same declaration caps the cell itself, leaving the
        Actions cell too narrow for its controls and divider.
    */
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell {
        width: auto;
    }

    /*
        A tax card answers: which tax, is it live, what is the rate, and what it
        is charged on — then what can be done with it.

        Done with `order` on a flex column, so no markup, no data and no desktop
        ordering changes. The DOM order is untouched — which is what a screen
        reader follows — and every value keeps its own visible label from
        data-label unless it is dropped deliberately below.
    */
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Tax Name"] { order: 1; }
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Active Status"] { order: 2; }
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Tax Value"] { order: 3; }
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Applies On"] { order: 4; }
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Order Type"] { order: 5; }
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] { order: 6; }

    /*
        The name leads.

        Like a fee and unlike a discount, a tax has no code — dbo.tax_rules
        carries only tax_name — so there is no second identifier to demote it
        under. Name and status are self-describing in that arrangement, so both
        drop their labels. Value, Applies On and Order Type keep theirs.
    */
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Tax Name"]:before,
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Active Status"]:before,
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    /*
        Reached through ::deep because the value sits on MudText, whose root
        never carries the scope attribute. Mobile only.
    */
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Tax Name"] .rx-admin-grid-primary {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.25;
    }

    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Tax Name"] {
        padding-bottom: 0;
    }

    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Active Status"] {
        padding-top: var(--rx-space-density-xs);
        padding-bottom: var(--rx-space-density-xs);
    }

    /*
        The rate is what the tax is worth and the reason this screen is opened.
        It carries weight rather than a larger size, so the two labelled rows
        stay aligned.

        Presentation only: DisplayTaxValue and the percentage/flat rules behind
        it are untouched, and the desktop numeric column keeps its own right
        alignment.
    */
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Tax Value"] {
        color: var(--rx-color-text-primary);
        font-weight: 700;
    }

    /*
        "Discounted Subtotal Plus Fees" is the longest calculation base and does
        not sit beside its label at 320px, so Applies On takes its own line.
        Order Type is short enough to stay inline.
    */
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Applies On"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /*
        View and the activate/deactivate toggle on their own line beneath a rule,
        at a size a thumb can hit. They keep their existing order, so the
        state-changing control is never the first thing under the finger, and
        they keep the disabled state they already take from IsActionInProgress.
    */
    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] {
        justify-content: flex-end;
        margin-top: var(--rx-space-density-xs);
        padding-top: var(--rx-space-density-sm);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-taxes-grid[b-l298k8htw6]  .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }
}
/* /Shared/AuthLayout.razor.rz.scp.css */
[b-niqqo2ss3v] .auth-layout {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.auth-main[b-niqqo2ss3v] {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--rx-color-background);
}

.auth-container[b-niqqo2ss3v] {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    max-width: none;
    overflow: hidden;
}
/* /Shared/ImagePreview.razor.rz.scp.css */
.rx-image-preview-card[b-6xt1xlboy7] {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: var(--rx-color-surface);
}

.rx-image-preview-card-loaded[b-6xt1xlboy7] {
    border-color: color-mix(in srgb, var(--rx-color-primary) 16%, var(--rx-color-border));
}

.rx-image-preview-header[b-6xt1xlboy7] {
    gap: var(--rx-space-density-md);
    padding: var(--rx-space-density-md) var(--rx-space-density-md) 0;
}

.rx-image-preview-title[b-6xt1xlboy7] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.25;
}

.rx-image-preview-actions[b-6xt1xlboy7] {
    flex: 0 0 auto;
}

.rx-image-preview-url-indicator[b-6xt1xlboy7] {
    display: inline-flex;
    align-items: center;
    min-height: var(--rx-section-badge-height);
    padding: 0 var(--rx-space-density-sm);
    border: 1px solid color-mix(in srgb, var(--rx-color-text-secondary) 20%, var(--rx-color-border));
    border-radius: var(--rx-radius-pill);
    color: var(--rx-color-text-secondary);
    font-size: var(--rx-font-label);
    font-weight: var(--rx-font-weight-medium);
    line-height: 1;
}

.rx-image-preview-url-valid[b-6xt1xlboy7] {
    border-color: color-mix(in srgb, var(--rx-color-success) 26%, var(--rx-color-border));
    background: color-mix(in srgb, var(--rx-color-success) 8%, var(--rx-color-surface));
    color: color-mix(in srgb, var(--rx-color-success) 70%, var(--rx-color-text-primary));
}

.rx-image-preview-url-invalid[b-6xt1xlboy7] {
    border-color: color-mix(in srgb, var(--rx-color-danger) 26%, var(--rx-color-border));
    background: color-mix(in srgb, var(--rx-color-danger) 8%, var(--rx-color-surface));
    color: color-mix(in srgb, var(--rx-color-danger) 70%, var(--rx-color-text-primary));
}

.rx-image-preview-viewport[b-6xt1xlboy7] {
    position: relative;
    display: flex;
    min-height: 148px;
    max-height: 250px;
    align-items: center;
    justify-content: center;
    margin: 0 var(--rx-space-density-md);
    overflow: hidden;
    border: 1px solid var(--rx-color-border);
    border-radius: var(--rx-radius-md);
    background: color-mix(in srgb, var(--rx-color-background) 72%, var(--rx-color-surface));
}

.rx-image-preview-state[b-6xt1xlboy7] {
    min-height: 148px;
    padding: var(--rx-space-layout-md);
    text-align: center;
}

.rx-image-preview-state-title[b-6xt1xlboy7] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-semibold);
}

.rx-image-preview-recovery-actions[b-6xt1xlboy7] {
    justify-content: center;
}

.rx-image-preview-skeleton[b-6xt1xlboy7] {
    min-height: 148px;
}

.rx-image-preview-image[b-6xt1xlboy7] {
    position: absolute;
    display: block;
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.rx-image-preview-image-loaded[b-6xt1xlboy7] {
    position: static;
    opacity: 1;
    pointer-events: auto;
}

.rx-image-preview-overlay[b-6xt1xlboy7] {
    position: absolute;
    inset: auto var(--rx-space-density-md) var(--rx-space-density-md);
    display: flex;
    justify-content: center;
    gap: var(--rx-space-density-sm);
    padding: var(--rx-space-density-sm);
    border: 1px solid color-mix(in srgb, var(--rx-color-surface) 18%, var(--rx-color-primary-light));
    border-radius: var(--rx-radius-md);
    background: color-mix(in srgb, var(--rx-color-surface) 86%, transparent);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.rx-image-preview-viewport:hover .rx-image-preview-overlay[b-6xt1xlboy7],
.rx-image-preview-viewport:focus-within .rx-image-preview-overlay[b-6xt1xlboy7] {
    opacity: 1;
    transform: translateY(0);
}

.rx-image-preview-meta-row[b-6xt1xlboy7] {
    gap: var(--rx-space-density-md);
    padding: 0 var(--rx-space-density-md) var(--rx-space-density-md);
}

.rx-image-preview-meta[b-6xt1xlboy7] {
    color: var(--rx-color-text-primary);
    font-weight: var(--rx-font-weight-medium);
}

.rx-image-preview-help[b-6xt1xlboy7] {
    color: var(--rx-color-text-secondary);
}

@media (max-width: 599.98px) {
    .rx-image-preview-header[b-6xt1xlboy7],
    .rx-image-preview-meta-row[b-6xt1xlboy7] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .rx-image-preview-actions[b-6xt1xlboy7],
    .rx-image-preview-recovery-actions[b-6xt1xlboy7],
    .rx-image-preview-overlay[b-6xt1xlboy7] {
        flex-wrap: wrap;
    }
}
/* /Shared/RasoiXDialogHeader.razor.rz.scp.css */
.rx-dialog-header[b-3p048wtwys] {
    min-height: 56px;
    border-radius: var(--rx-radius-lg) var(--rx-radius-lg) 0 0;
    background: var(--rx-color-primary);
    border-bottom: 1px solid color-mix(in srgb, var(--rx-color-surface) 15%, transparent);
    color: var(--rx-color-surface);
}

.rx-dialog-header-content[b-3p048wtwys] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rx-space-density-lg);
    min-height: 56px;
    padding: 0 16px 0 24px;
}

.rx-dialog-header-title-group[b-3p048wtwys] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rx-dialog-header-title[b-3p048wtwys],
.rx-dialog-header-icon-container[b-3p048wtwys],
.rx-dialog-header-icon[b-3p048wtwys],
.rx-dialog-header-close[b-3p048wtwys] {
    color: var(--rx-color-surface);
}

.rx-dialog-header-icon-container[b-3p048wtwys] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

.rx-dialog-header-icon[b-3p048wtwys] {
    font-size: 1.25rem;
}

.rx-dialog-header-title[b-3p048wtwys] {
    overflow: hidden;
    font-weight: var(--rx-font-weight-semibold);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-dialog-header-close[b-3p048wtwys] {
    flex: 0 0 auto;
}

[b-3p048wtwys] .rx-dialog-header-close .mud-icon-root {
    color: var(--rx-color-surface);
}

[b-3p048wtwys] .rx-dialog-header-close:hover {
    background: color-mix(in srgb, var(--rx-color-surface) 12%, transparent);
}