/* 
   Tansi Requests — /requests hub
   Everything here is driven by MudBlazor palette vars (--mud-palette-*) and
   the design-system tokens from app.css.*/

/* --------------------------------------------------------------------------
   Shared coloured icon washes (used by stat tiles, nav cards, row icons)
   -------------------------------------------------------------------------- */
.rqh-ic--brand  { background: color-mix(in srgb, var(--mud-palette-primary)   14%, transparent); color: var(--mud-palette-primary); }
.rqh-ic--info   { background: color-mix(in srgb, var(--mud-palette-info)      14%, transparent); color: var(--mud-palette-info); }
.rqh-ic--warn   { background: color-mix(in srgb, var(--mud-palette-warning)   14%, transparent); color: var(--mud-palette-warning); }
.rqh-ic--violet { background: color-mix(in srgb, var(--mud-palette-tertiary)  16%, transparent); color: var(--mud-palette-tertiary); }
.rqh-ic--quar   { background: color-mix(in srgb, var(--mud-palette-warning)   16%, transparent); color: var(--mud-palette-warning); }
.rqh-ic--ok     { background: color-mix(in srgb, var(--mud-palette-success)   14%, transparent); color: var(--mud-palette-success); }
.rqh-ic--muted  { background: var(--mud-palette-action-default-hover);                            color: var(--mud-palette-text-secondary); }

/* Icons rendered with Color="Color.Inherit" so they take the wash colour */
.rqh-ic .mud-icon-root { font-size: 1.35rem; width: 1.35rem; height: 1.35rem; }

/* --------------------------------------------------------------------------
   Status tiles
   -------------------------------------------------------------------------- */
.rqh-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}

.rqh-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    width: 100%;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-md);
    padding: 15px 17px;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    font-family: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.rqh-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--mud-palette-primary);
}

.rqh-stat__ic {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: none;
}

.rqh-stat__ic .mud-icon-root { font-size: 1.45rem; width: 1.45rem; height: 1.45rem; }

.rqh-stat__v {
    font-size: 27px;
    font-weight: 750;
    letter-spacing: -.8px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.rqh-stat__l {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    margin-top: 3px;
}

.rqh-stat--pend   .rqh-stat__v { color: var(--mud-palette-warning); }
.rqh-stat--active .rqh-stat__v { color: var(--mud-palette-info); }

/* --------------------------------------------------------------------------
   Nav groups + cards
   -------------------------------------------------------------------------- */
.rqh-group { margin-bottom: 24px; }

.rqh-group__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.rqh-group__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--mud-palette-text-primary);
}

.rqh-group__count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rqh-group__desc {
    color: var(--mud-palette-text-disabled);
    font-size: 12.5px;
}

.rqh-group__line {
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

.rqh-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* ── Group tones ───────────────────────────────────────────────────
   Each hub group carries one colour family through three quiet cues:
   the mark beside the title, the count pill, and a hairline rule on the
   left edge of every card. Icons inside the group take the same tone so a
   group reads as a block. Tones come from the Mud palette so they follow
   the tenant theme and dark mode. */
.rqh-group { --rqh-tone: var(--mud-palette-primary); }
.rqh-group--brand  { --rqh-tone: var(--mud-palette-primary); }
.rqh-group--violet { --rqh-tone: var(--mud-palette-tertiary); }
.rqh-group--teal   { --rqh-tone: var(--mud-palette-info); }
.rqh-group--slate  { --rqh-tone: var(--mud-palette-text-secondary); }

.rqh-group__mark {
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--rqh-tone);
    flex: none;
}

.rqh-group .rqh-group__count {
    background: color-mix(in srgb, var(--rqh-tone) 14%, transparent);
    color: var(--rqh-tone);
}

.rqh-group .rqh-group__line {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rqh-tone) 35%, transparent),
        var(--mud-palette-lines-default) 40%);
}

.rqh-group .rqh-card {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--rqh-tone) 55%, transparent), var(--shadow-card);
}

.rqh-group .rqh-card:hover {
    border-color: var(--rqh-tone);
    box-shadow: inset 3px 0 0 var(--rqh-tone), var(--shadow-card-hover);
}

.rqh-group .rqh-card:hover .rqh-card__go { color: var(--rqh-tone); }

/* Icons follow the group tone; the per-action accent classes stay as the
   fallback for cards rendered outside a toned group. */
.rqh-group .rqh-card__ic {
    background: color-mix(in srgb, var(--rqh-tone) 12%, transparent);
    color: var(--rqh-tone);
}

.rqh-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.rqh-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--mud-palette-primary);
}

.rqh-card:hover .rqh-card__go {
    color: var(--mud-palette-primary);
    transform: translateX(2px);
}

.rqh-card__ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: none;
}

.rqh-card__body { flex: 1; min-width: 0; }

.rqh-card__title {
    font-weight: 700;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-primary);
}

.rqh-card__desc {
    color: var(--mud-palette-text-disabled);
    font-size: 12.5px;
    margin-top: 3px;
    line-height: 1.4;
}

.rqh-card__go {
    position: absolute;
    top: 16px;
    right: 14px;
    color: var(--mud-palette-text-disabled);
    display: inline-flex;
    transition: color .16s ease, transform .16s ease;
}

/* Count badges on cards */
.rqh-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.rqh-badge--warn { background: var(--mud-palette-warning); }
.rqh-badge--info { background: var(--mud-palette-info); }
.rqh-badge--over { background: var(--mud-palette-error); }

/* --------------------------------------------------------------------------
   Bottom panels (recent + approvals)
   -------------------------------------------------------------------------- */
.rqh-panel {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rqh-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rqh-panel__t {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--mud-palette-text-primary);
}

.rqh-panel__t .mud-icon-root { font-size: 1.1rem; width: 1.1rem; height: 1.1rem; }

.rqh-panel__cnt {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    color: var(--mud-palette-warning);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.rqh-panel__link {
    color: var(--mud-palette-primary);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
}

.rqh-panel__link:hover { text-decoration: underline; }

.rqh-panel__body {
    padding: 4px 0;
    overflow-y: auto;
    max-height: 360px;
}

/* Recent request rows */
.rqh-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: background-color .12s ease;
    width: 100%;
    text-align: left;
    background: none;
    font-family: inherit;
}

.rqh-row:last-child { border-bottom: 0; }
.rqh-row:hover { background: var(--mud-palette-action-default-hover); }

.rqh-row__ic {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex: none;
}

.rqh-row__ic .mud-icon-root { font-size: 1.05rem; width: 1.05rem; height: 1.05rem; }

.rqh-row__main { flex: 1; min-width: 0; }

.rqh-row__t {
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.rqh-row__s {
    font-size: 11.5px;
    color: var(--mud-palette-text-disabled);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

.rqh-row__meta {
    text-align: right;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.rqh-row__time {
    font-size: 11.5px;
    color: var(--mud-palette-text-disabled);
    font-variant-numeric: tabular-nums;
}

.rqh-row__dup { flex: none; }

/* Status badges */
.rqh-sbadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

.rqh-sbadge__d { width: 6px; height: 6px; border-radius: 50%; }

.rqh-sbadge--draft {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-lines-default);
}
.rqh-sbadge--draft .rqh-sbadge__d { background: var(--mud-palette-text-disabled); }

.rqh-sbadge--pending {
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    color: var(--mud-palette-warning);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 32%, transparent);
}
.rqh-sbadge--pending .rqh-sbadge__d { background: var(--mud-palette-warning); }

.rqh-sbadge--active {
    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);
    color: var(--mud-palette-info);
    border-color: color-mix(in srgb, var(--mud-palette-info) 30%, transparent);
}
.rqh-sbadge--active .rqh-sbadge__d { background: var(--mud-palette-info); }

.rqh-sbadge--approved,
.rqh-sbadge--completed {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-success);
    border-color: color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
}
.rqh-sbadge--approved .rqh-sbadge__d,
.rqh-sbadge--completed .rqh-sbadge__d { background: var(--mud-palette-success); }

.rqh-sbadge--rejected,
.rqh-sbadge--cancelled {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--mud-palette-error);
    border-color: color-mix(in srgb, var(--mud-palette-error) 28%, transparent);
}
.rqh-sbadge--rejected .rqh-sbadge__d,
.rqh-sbadge--cancelled .rqh-sbadge__d { background: var(--mud-palette-error); }

/* Approval rows */
.rqh-arow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rqh-arow:last-child { border-bottom: 0; }

.rqh-arow__av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    font-weight: 700;
    font-size: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-lines-default);
}

.rqh-arow__main { flex: 1; min-width: 0; }

.rqh-arow__t {
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.rqh-arow__s {
    font-size: 11.5px;
    color: var(--mud-palette-text-disabled);
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.rqh-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
}

.rqh-tag--po       { background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);     color: var(--mud-palette-info); }
.rqh-tag--transfer { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);  color: var(--mud-palette-primary); }
.rqh-tag--supply   { background: color-mix(in srgb, var(--mud-palette-tertiary) 16%, transparent); color: var(--mud-palette-tertiary); }

.rqh-arow__actions { flex: none; display: flex; gap: 7px; }

/* Empty state */
.rqh-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--mud-palette-text-disabled);
}

.rqh-empty .mud-icon-root {
    font-size: 2.2rem;
    width: 2.2rem;
    height: 2.2rem;
    color: var(--mud-palette-success);
    opacity: .55;
    margin-bottom: 8px;
}

.rqh-empty__h {
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Record detail (/requests/{id}) — semantic label/value pairs.
   WCAG 1.3.1: the header meta and the supply panel render as real <dl>s so a
   screen reader announces "term/definition" pairs instead of a run of text.
   Palette-var driven, so dark mode follows with no extra class.
   -------------------------------------------------------------------------- */
.rqd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 8px 0 0;
}
.rqd-meta > div { display: flex; flex-direction: column; min-width: 0; }
.rqd-meta dt {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}
.rqd-meta dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.rqd-meta dd.rqd-empty { font-weight: 500; color: var(--mud-palette-text-secondary); }

/* Stacked term/value list inside a panel (supply details). */
.rqd-dl { margin: 0; }
.rqd-dl > div {
    display: flex;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.rqd-dl > div:last-child { border-bottom: 0; }
.rqd-dl dt {
    flex: none;
    width: 140px;
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
}
.rqd-dl dd {
    margin: 0;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}
.rqd-dl dd.rqd-empty { font-weight: 500; color: var(--mud-palette-text-secondary); }

@media (max-width: 600px) {
    .rqd-dl > div { flex-direction: column; gap: 2px; }
    .rqd-dl dt { width: auto; }
}

/* --------------------------------------------------------------------------
   Responsive + reduced motion
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .rqh-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .rqh-stats { grid-template-columns: repeat(2, 1fr); }
    .rqh-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .rqh-stat, .rqh-card, .rqh-row, .rqh-card__go { transition: none; }
    .rqh-stat:hover, .rqh-card:hover { transform: none; }
}

/* REQUEST LIST — Stage chip (soft pill + dot).*/
.sr-stage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
}
.sr-stage__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.sr-stage--draft {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}
.sr-stage--pending {
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    color: var(--mud-palette-warning);
}
.sr-stage--approved {
    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);
    color: var(--mud-palette-info);
}
.sr-stage--active {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}
.sr-stage--completed {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-success);
}
.sr-stage--cancelled {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-disabled);
}
.sr-stage--rejected {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    color: var(--mud-palette-error);
}

/* Shipments card: Incoming / Outgoing toggle under the panel head */
.rqh-ship__tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rqh-ship__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.rqh-ship__tab--on {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

/* --------------------------------------------------------------------------
   Request editor: the add-items box (RequestAddItemsBar)
   The open end of the list. A faint wash marks it as the place you write,
   the field is the one bright surface in it, and the receipt line under the
   field answers each add. The dashed rule is the tear line of a requisition
   pad: what sits below it is the less common ways in.
   -------------------------------------------------------------------------- */
.rq-add {
    --rq-add-wash: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
    --rq-add-rule: color-mix(in srgb, var(--mud-palette-primary) 26%, var(--mud-palette-lines-default));
    --rq-add-control: 56px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "find scan browse"
        "receipt receipt receipt"
        "more more more";
    align-items: center;
    margin-top: 12px;
    padding: 16px 16px 4px;
    background: var(--rq-add-wash);
    border: 1px solid var(--rq-add-rule);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}

.rq-add__find { grid-area: find; min-width: 0; }
/* Spaced by margins, not column-gap: with cameras off the launcher renders
   nothing, and an empty grid track would still keep both its gaps. */
.rq-add__scan { grid-area: scan; display: flex; }
.rq-add__scan:not(:empty) { margin-left: 8px; }
.rq-add__scan[hidden],
.rq-add__scan:empty { display: none; }

.rq-add__find .mud-input-control { margin: 0; }
.rq-add__find .mud-input.mud-input-outlined { background: var(--mud-palette-surface); }

/* MudBlazor's default input outline (#bdbdbd) is 1.9:1 on white; a control's
   boundary needs 3:1 (WCAG 1.4.11). This mix is ~4:1 on white and on the
   wash, and lightens with the dark theme's secondary text. Resting state
   only: MudBlazor's hover and focus colours (both stronger) still apply. */
.rq-add__find .mud-input.mud-input-outlined:not(:focus-within) .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--mud-palette-text-secondary) 75%, var(--mud-palette-surface));
}

.rq-add__find .mud-input-slot { font-size: 1rem; }

/* The camera button and Browse share the field's height, so the three read
   as one row of controls rather than a field with things floating beside it. */
.rq-add__scan .mud-icon-button {
    width: var(--rq-add-control);
    height: var(--rq-add-control);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.rq-add .rq-add__browse {
    grid-area: browse;
    height: var(--rq-add-control);
    margin-left: 8px;
    padding: 0 20px;
    white-space: nowrap;
}

/* Receipt line: what the last add did, or what to do next. */
.rq-add__receipt {
    grid-area: receipt;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    min-height: 40px;
    padding: 8px 2px 6px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.rq-add__live { display: inline-flex; min-width: 0; }

.rq-add__note {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 75ch;
}

.rq-add__note .mud-icon-root { flex: none; margin-top: 0.5px; }
.rq-add__note--added,
.rq-add__note--info,
.rq-add__note--warning { color: var(--mud-palette-text-primary); }
.rq-add__note--added .mud-icon-root { color: var(--mud-palette-success); }
.rq-add__note--info .mud-icon-root { color: var(--mud-palette-info); }
.rq-add__note--warning .mud-icon-root { color: var(--mud-palette-warning); }

.rq-add .rq-add__inline-action { margin-left: -6px; }

/* The one animated moment: a new receipt slides up and its mark stamps in. */
.rq-add__note--fresh { animation: rq-add-receipt 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rq-add__note--fresh .mud-icon-root { animation: rq-add-stamp 420ms cubic-bezier(0.3, 1.6, 0.5, 1) 60ms both; }

@keyframes rq-add-receipt {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes rq-add-stamp {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

/* Barcode lookup in flight: a short bar runs along the top edge. */
.rq-add--busy::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 28%;
    height: 2px;
    background: var(--mud-palette-primary);
    animation: rq-add-sweep 900ms ease-in-out infinite;
}

@keyframes rq-add-sweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(360%); }
}

.rq-add__more {
    grid-area: more;
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    padding: 4px 0;
    border-top: 1px dashed var(--rq-add-rule);
}

/* Text buttons carry their own padding; pull the first label back to the
   field's left edge. */
.rq-add__more > .mud-button-root:first-child { margin-left: -8px; }

/* Locked: the reason is the whole box, set on a dashed outline, the same
   tear line, because the box is waiting for something above it. */
.rq-add--locked {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "locked";
    padding: 16px 18px;
    background: var(--mud-palette-surface);
    border-style: dashed;
}

.rq-add__locked { display: flex; gap: 12px; align-items: flex-start; }
.rq-add__locked-icon { flex: none; color: var(--mud-palette-primary); }

.rq-add__locked-reason {
    margin: 0;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.rq-add__locked-detail {
    margin: 2px 0 0;
    max-width: 70ch;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 600px) {
    .rq-add {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "find find"
            "browse scan"
            "receipt receipt"
            "more more";
        row-gap: 8px;
        padding: 12px 12px 4px;
    }

    .rq-add .rq-add__browse { height: 48px; margin-left: 0; }
    .rq-add__scan .mud-icon-button { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .rq-add__note--fresh,
    .rq-add__note--fresh .mud-icon-root { animation: none; }
    .rq-add--busy::before { animation: none; width: 100%; opacity: 0.5; }
}