/* /Components/Dialogs/KitBuildDetailDialog.razor.rz.scp.css */
/* Kit Build detail dialog — same Royal Blue / Amber system as the Kit Builds page. */

.kbd-title[b-5d4t1k052b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.kbd-title__main[b-5d4t1k052b] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
}

.kbd-title__sub[b-5d4t1k052b] {
    font-size: 0.8rem;
    color: var(--color-primary-800);
    font-weight: 600;
}

.kbd-badge[b-5d4t1k052b] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.kbd-badge--kit[b-5d4t1k052b] {
    background: var(--color-primary-50);
    color: var(--color-primary-800);
    border: 1px solid var(--color-primary-200);
}

.kbd-badge--idl[b-5d4t1k052b] {
    background: var(--color-secondary-50);
    color: var(--color-secondary-800);
    border: 1px solid var(--color-secondary-200);
}

.kbd-loading[b-5d4t1k052b] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

/* Definition grid */
.kbd-grid[b-5d4t1k052b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.5rem;
    padding: 0.25rem 0 0.5rem;
}

.kbd-field[b-5d4t1k052b] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px dashed var(--color-primary-100);
    padding-bottom: 0.45rem;
}

.kbd-label[b-5d4t1k052b] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7A8699;
}

.kbd-value[b-5d4t1k052b] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-dark);
}

.kbd-unit[b-5d4t1k052b] {
    font-size: 0.72rem;
    font-weight: 400;
    color: #7A8699;
}

/* Notes: soft amber callout */
.kbd-notes[b-5d4t1k052b] {
    margin-top: 0.75rem;
}

.kbd-notes__text[b-5d4t1k052b] {
    margin-top: 0.3rem;
    background: var(--color-secondary-50);
    border-left: 3px solid var(--color-secondary-400);
    border-radius: 0 6px 6px 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text-dark);
    white-space: pre-wrap;
}

/* Kits-in-family chips, scrollable if the family is large */
.kbd-section[b-5d4t1k052b] {
    margin-top: 0.9rem;
}

.kbd-chips[b-5d4t1k052b] {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-height: 108px;
    overflow-y: auto;
}

.kbd-chip[b-5d4t1k052b] {
    background: var(--color-primary-50);
    color: var(--color-primary-900);
    border: 1px solid var(--color-primary-100);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Attachment rows */
.kbd-attachment[b-5d4t1k052b] {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-primary-100);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-primary-800);
    font-size: 0.85rem;
    font-weight: 600;
    transition: background-color 120ms ease;
}

.kbd-attachment:hover[b-5d4t1k052b] {
    background: var(--color-primary-50);
}

.kbd-attachment__open[b-5d4t1k052b] {
    margin-left: auto;
    opacity: 0.55;
}
/* /Components/Dialogs/RequestCustomerDialog.razor.rz.scp.css */
/* Logo preview. Capped so a large source image cannot stretch the dialog, and on a tinted
   background so a white-on-transparent logo is still visible here. */

.rcd-logo-preview[b-3ylyh2xpqw] {
    max-height: 56px;
    max-width: 220px;
    object-fit: contain;
    align-self: flex-start;
    background: var(--color-page-tint, #F0F4FE);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 4px;
    padding: .35rem .5rem;
}
/* /Components/Dialogs/RequestFormFieldDialog.razor.rz.scp.css */
/* Preview of the picture that will sit beside this question on the form. Taller than the customer
   logo preview because these are product covers read for their content, not marks read for shape,
   but still capped so a large source image cannot stretch the dialog. */

.rffd-image-preview[b-vc7xjj6d3o] {
    max-height: 160px;
    max-width: 200px;
    object-fit: contain;
    align-self: flex-start;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 4px;
    padding: .25rem;
}
/* /Components/Dialogs/RequestFormPreviewDialog.razor.rz.scp.css */
/* The preview body scrolls inside the dialog rather than the dialog growing past the viewport: a
   long form (aap's marketing request is 27 fields) would otherwise push Close off screen.

   Width matches .rq-page on the public form, so line lengths and field widths read the same here
   as they do there. */

.rfp-body[b-97q8z321h7] {
    max-width: 940px;
    max-height: 62vh;
    overflow-y: auto;
    padding: .25rem .5rem .5rem;
}
/* /Components/Dialogs/RequestSubmissionDialog.razor.rz.scp.css */
/* Read-only view of one submitted request. Prefix rsd-. */

/* Label column of the header table: narrow, muted, so the values carry the eye. */
.rsd-key[b-6xlwrf9m92] {
    width: 140px;
    color: var(--color-text-dark, #1C2B3A);
    font-weight: 500;
    white-space: nowrap;
}

/* One answer: small muted label above the value, so a long form scans vertically. */
.rsd-answer[b-6xlwrf9m92] {
    padding-bottom: .25rem;
}

.rsd-mono[b-6xlwrf9m92] {
    font-family: var(--font-mono, 'Roboto Mono', ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
}

/* The tracker in the title bar, long enough for a date under each bead. */
.rsd-tracker[b-6xlwrf9m92] {
    --rtk-length: 220px;
    margin-left: .5rem;
}

/* Correspondence: the expanded email under its row. The iframe is the sandbox the body renders in. */
.rsd-mail-detail[b-6xlwrf9m92] {
    padding: .5rem 1rem 1rem;
    background: var(--color-page-tint, #F0F4FE);
}

.rsd-mail-body[b-6xlwrf9m92] {
    width: 100%;
    height: 320px;
    border: 1px solid #E4E7EB;
    border-radius: 4px;
    background: #fff;
}

.rsd-mail-text[b-6xlwrf9m92] {
    white-space: pre-wrap;
    font: inherit;
    margin: 0;
    padding: .5rem;
    background: #fff;
    border: 1px solid #E4E7EB;
    border-radius: 4px;
}

.rsd-mail[b-6xlwrf9m92]  tbody tr {
    cursor: pointer;
}

/* The tab strip sits inside the scroll area; Radzen's panel padding doubles up with rsd-scroll's. */
.rsd-scroll[b-6xlwrf9m92]  .rz-tabview-panel {
    padding: .75rem 0 0;
}

/* The pending-setup list inside a MudAlert; the default ul margins are too wide there. */
.rsd-pending[b-6xlwrf9m92] {
    margin: .25rem 0 0;
    padding-left: 1.1rem;
}

.rsd-pending li[b-6xlwrf9m92] {
    margin-bottom: .15rem;
}

/* The answers area, capped so the dialog always fits the viewport and MudBlazor's own action bar
   stays put. .mud-dialog carries both a max-height and overflow-y:auto, so without a cap here a long
   form scrolls the whole dialog and takes the buttons with it. */
.rsd-scroll[b-6xlwrf9m92] {
    max-height: 76vh;
    overflow-y: auto;
    /* Room for the focus ring and helper text of the fields at the very bottom. */
    padding: .25rem .25rem 1rem;
}

/* The status / owner / notes block. Tinted so it reads as the editable part of an otherwise
   read-only record, rather than as one more section of it. */
.rsd-workflow[b-6xlwrf9m92] {
    background: var(--color-page-tint, #F0F4FE);
    padding: 1rem;
}

/* One row inside MudBlazor's actions area: hint left, buttons right. */
.rsd-footer[b-6xlwrf9m92] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    width: 100%;
}

.rsd-footer__hint[b-6xlwrf9m92] {
    flex: 1 1 12rem;
    min-width: 0;
}

@media (max-width: 600px) {
    .rsd-scroll[b-6xlwrf9m92] { max-height: 52vh; }
    /* The hint is the first thing to go: three buttons on one line matter more. */
    .rsd-footer__hint[b-6xlwrf9m92] { display: none; }
}
/* /Components/Dialogs/RequestSubmitConfirmDialog.razor.rz.scp.css */
/* Pre-submit review. Prefix rsc-. Laid out to read like the confirmation email it mirrors. */

.rsc-body[b-9v5lh945qf] {
    max-height: 62vh;
    overflow-y: auto;
    padding-right: .25rem;
}

/* The email's header lines: label / value pairs, label column fixed so the values line up. */
.rsc-meta[b-9v5lh945qf] {
    display: grid;
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
    row-gap: .35rem;
    column-gap: 1rem;
    font-size: .875rem;
}

.rsc-meta__label[b-9v5lh945qf] {
    font-weight: 600;
    text-decoration: underline;
    color: var(--color-text-dark, #1C2B3A);
}

.rsc-email[b-9v5lh945qf] {
    overflow-wrap: anywhere;
}

/* Matches the "What you submitted:" divider in the email, in the same uncoloured section style the
   form itself uses. */
.rsc-section[b-9v5lh945qf] {
    margin: 1.25rem 0 .5rem;
    padding: .5rem .85rem;
    background: var(--color-page-tint, #F0F4FE);
    color: var(--color-primary-900, #06246A);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
    border-bottom: 2px solid var(--color-secondary-400, #E8972A);
    border-radius: 4px 4px 0 0;
}

.rsc-body[b-9v5lh945qf]  .rsc-table th[scope="row"] {
    width: 34%;
    text-align: left;
    vertical-align: top;
    font-weight: 600;
    white-space: normal;
}

.rsc-body[b-9v5lh945qf]  .rsc-table td {
    vertical-align: top;
    overflow-wrap: anywhere;
}

/* The item lines are the part GMLx acts on, so they keep their own bordered table. */
.rsc-body[b-9v5lh945qf]  .rsc-items {
    margin: .25rem 0;
}

.rsc-body[b-9v5lh945qf]  .rsc-items th,
.rsc-body[b-9v5lh945qf]  .rsc-items td {
    font-size: .8rem;
    padding: .25rem .5rem;
}

.rsc-body[b-9v5lh945qf]  .rsc-num {
    text-align: right;
}

.rsc-body[b-9v5lh945qf]  .rsc-mono {
    font-family: var(--font-mono, 'Roboto Mono', ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}
/* /Components/Dialogs/ShipmentDetailDialog.razor.rz.scp.css */
/* Shipment detail dialog — sd-prefixed, matching the kbd- convention in KitBuildDetailDialog. */

/* The title row carries the shipment's name, its tracker and its status control. Wrapping is the
   point: on a phone the control drops onto its own line instead of squeezing the title. */
.sd-title[b-srp8bovm3f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    width: 100%;
}

.sd-title__status[b-srp8bovm3f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Pushed to the right where there is room, alongside the title where there is not. */
    margin-left: auto;
}

.sd-title[b-srp8bovm3f]  .mud-input-control {
    min-width: 190px;
}
/* /Components/Dialogs/ShipmentLogBulkEditDialog.razor.rz.scp.css */
/* Each column of the mass edit is a tick plus the control it governs. The tick sits on its own
   line above the control rather than beside it: side by side, four labelled checkboxes and four
   outlined inputs cannot both stay readable inside a Small dialog. */
.sp-bulk-row[b-l2g85n6lp3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-5nway4mu89] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-5nway4mu89] {
    flex: 1;
}

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

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

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

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

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

@media (max-width: 640.98px) {
    .top-row[b-5nway4mu89] {
        justify-content: space-between;
    }

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

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

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

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

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

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

/* --- Header Page Favorites dropdown rows: label on the left, unfavorite star on the right --- */
.hdr-fav-item[b-5nway4mu89] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    cursor: grab;
    border-top: 2px solid transparent;
}

.hdr-fav-item:hover[b-5nway4mu89] {
    background: rgba(0, 0, 0, 0.05);
}

.hdr-fav-item:active[b-5nway4mu89] {
    cursor: grabbing;
}

/* Drop indicator: a coloured line above the row the dragged item will land before. */
.hdr-fav-item.drag-over[b-5nway4mu89] {
    border-top-color: var(--color-secondary-400);
}

.hdr-fav-label[b-5nway4mu89] {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}

/* Always a filled, coloured gold star (these are favorites); click to unfavorite. Material Symbols fill is
   driven by --rz-icon-fill (1 = solid), which the RadzenIcon inherits from here. */
.hdr-fav-star[b-5nway4mu89] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-secondary-400);
    --rz-icon-fill: 1;
}

#blazor-error-ui[b-5nway4mu89] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-5nway4mu89] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Fill the sidebar so the Administration group can be pushed to the bottom edge. */
.nav-shell[b-mmwx4i8isr] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* margin-top: auto eats the leftover space above, pinning Administration to the bottom. */
.nav-shell-bottom[b-mmwx4i8isr] {
    margin-top: auto;
}

/* --- Page Favorites --- */
/* Each item's clickable content is a full-width flex row so the star sits opposite the label. */
.nav-fav-row[b-mmwx4i8isr] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

.nav-fav-label[b-mmwx4i8isr] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Star is a faint outline by default so it does not compete with the label. Radzen renders Material Symbols,
   whose FILL axis is driven by --rz-icon-fill (0 = outline, 1 = solid); the icon inherits it from here. */
.nav-fav-star[b-mmwx4i8isr] {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    opacity: 0.4;
    --rz-icon-fill: 0;
}

/* Fill the star solid on hover, and solid + gold once favorited. */
.nav-fav-star:hover[b-mmwx4i8isr] {
    opacity: 1;
    --rz-icon-fill: 1;
}

.nav-fav-star.is-fav[b-mmwx4i8isr] {
    opacity: 1;
    --rz-icon-fill: 1;
    color: var(--color-secondary-400);
}

/* Ensure the Radzen item link stretches so the flex row can right-align the star. */
[b-mmwx4i8isr] .rz-navigation-item-link {
    width: 100%;
}

/* --- Draggable Page Favorites list --- */
.nav-fav-list[b-mmwx4i8isr] {
    display: flex;
    flex-direction: column;
}

/* Rows mirror the nav item feel (padding + hover) and hint that they are draggable. */
.nav-fav-item[b-mmwx4i8isr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: grab;
    border-top: 2px solid transparent;
}

.nav-fav-item:hover[b-mmwx4i8isr] {
    background: rgba(0, 0, 0, 0.05);
}

.nav-fav-item:active[b-mmwx4i8isr] {
    cursor: grabbing;
}

/* Drop indicator: a coloured line above the row the dragged item will land before. */
.nav-fav-item.drag-over[b-mmwx4i8isr] {
    border-top-color: var(--color-secondary-400);
}

/* Match the Radzen panel-menu item typography so favorites read identically to the menu below. */
.nav-fav-item-link[b-mmwx4i8isr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    font-family: var(--rz-text-font-family);
    font-size: var(--rz-body-font-size);
    font-weight: var(--rz-panel-menu-font-weight, 400);
    color: var(--rz-panel-menu-item-color);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-74yyo6aua5],
.components-reconnect-repeated-attempt-visible[b-74yyo6aua5],
.components-reconnect-failed-visible[b-74yyo6aua5],
.components-pause-visible[b-74yyo6aua5],
.components-resume-failed-visible[b-74yyo6aua5],
.components-rejoining-animation[b-74yyo6aua5] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-74yyo6aua5],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-74yyo6aua5],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-74yyo6aua5],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-74yyo6aua5],
#components-reconnect-modal.components-reconnect-retrying[b-74yyo6aua5],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-74yyo6aua5],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-74yyo6aua5],
#components-reconnect-modal.components-reconnect-failed[b-74yyo6aua5],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-74yyo6aua5] {
    display: block;
}


#components-reconnect-modal[b-74yyo6aua5] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-74yyo6aua5 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-74yyo6aua5 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-74yyo6aua5 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-74yyo6aua5]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-74yyo6aua5 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-74yyo6aua5 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-74yyo6aua5 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-74yyo6aua5 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-74yyo6aua5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-74yyo6aua5] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-74yyo6aua5] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-74yyo6aua5] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-74yyo6aua5] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-74yyo6aua5] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-74yyo6aua5] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-74yyo6aua5 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-74yyo6aua5] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-74yyo6aua5 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/CustomerRequests.razor.rz.scp.css */
/* Customer request queue. Prefix cr-.

   sp-panel / sp-title are a house SHAPE, not a shared stylesheet: their rules live in
   Shipments.razor.css, which is scoped, so the classes carry no styling outside that page. The panel
   rules below are this page's own copy -- without them the header renders as an unstyled, unpadded
   div. Same trap as RequestFormsAdmin.razor.css. */

.cr-page[b-smho3wwb50]  .sp-panel {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-primary-100, #D6E0FA);
    margin-bottom: 1.25rem;
}

/* Pronounced without colour: there is only ever one panel on this page, so a saturated band would
   be shouting a label nobody needs help finding. Weight, size and the rule underneath do the work. */
.sp-panel__header[b-smho3wwb50] {
    background: var(--color-page-tint, #F0F4FE);
    color: var(--color-primary-900, #06246A);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: .85rem 1.5rem;
    border-bottom: 3px solid var(--color-secondary-400, #E8972A);
}

.sp-panel__body[b-smho3wwb50] {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* References read as data, not prose, and align down the column. */
.cr-mono[b-smho3wwb50] {
    font-family: var(--font-mono, 'Roboto Mono', ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
    font-weight: 500;
}

/* The Assigned to filter is the one Radzen control in a row of dense MudBlazor fields. Those carry
   8px above and 4px below for the floating label (.mud-input-control-margin-dense
   .mud-input-outlined-with-label) and a 40px box, so this takes the same measurements or it sits
   high and short in the row. ::deep because the markup belongs to the Radzen component. */
.cr-page[b-smho3wwb50]  .rz-dropdown {
    min-height: 40px;
    margin: 8px 0 4px;
    align-items: center;
}

/* The tracker under the status chip: shorter than its default so the Status column stays narrow. */
.cr-tracker[b-smho3wwb50] {
    --rtk-length: 96px;
    margin-top: .25rem;
}

/* Unmatched mail: the expanded email under its row; the iframe is the sandbox it renders in. */
.cr-mail-detail[b-smho3wwb50] {
    padding: .5rem 1rem 1rem;
    background: var(--color-page-tint, #F0F4FE);
}

.cr-mail-body[b-smho3wwb50] {
    width: 100%;
    height: 320px;
    border: 1px solid #E4E7EB;
    border-radius: 4px;
    background: #fff;
}

.cr-mail-text[b-smho3wwb50] {
    white-space: pre-wrap;
    font: inherit;
    margin: 0;
    padding: .5rem;
    background: #fff;
    border: 1px solid #E4E7EB;
    border-radius: 4px;
}

/* Rows open a dialog, so they have to look clickable. */
.cr-page[b-smho3wwb50]  tbody tr:hover {
    cursor: pointer;
}

/* Six columns including two stacked sub-lines; let it scroll rather than widen the page. */
.cr-page[b-smho3wwb50]  .mud-table-container {
    overflow-x: auto;
}

@media (max-width: 600px) {
    .sp-panel__header[b-smho3wwb50] { padding: .7rem 1rem; font-size: 1rem; }
    .sp-panel__body[b-smho3wwb50] { padding: 1rem; }
}

/* The Details column: the form's answers, one per line, clamped so a long order does not make the
   row tall. The full text is in the title attribute; the row click opens the request itself. */
.cr-details[b-smho3wwb50] {
    max-width: 28rem;
    font-size: .8rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/Pages/Admin/RequestFormsAdmin.razor.rz.scp.css */
/* Request-forms admin. Prefix rfa-, following the sp-/pd-/kb- convention.

   sp-panel / sp-title are a house SHAPE, not a shared stylesheet: their rules live in
   Shipments.razor.css, which is scoped, so the classes carry no styling outside that page. The
   panel rules below are therefore this page's own copy rather than an override -- without them the
   headers render as unstyled, unpadded divs. */

.rfa-page[b-n1xdq2tj4t] {
    padding: 0;
}

.rfa-page[b-n1xdq2tj4t]  .sp-panel {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-primary-100, #D6E0FA);
    /* Sections stack full width, so the gap between them is the only thing separating them. */
    margin-bottom: 1.25rem;
    width: 100%;
}

/* Pronounced without colour, matching Customer Requests. On this page the header names what is
   being edited (the customer, then the form), so it is doing real work rather than labelling a box --
   but three saturated bands stacked down one page shout at the reader. Weight, size and the rule
   underneath carry it instead. */
.sp-panel__header[b-n1xdq2tj4t] {
    background: var(--color-page-tint, #F0F4FE);
    color: var(--color-primary-900, #06246A);
    padding: .85rem 1.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
    border-bottom: 3px solid var(--color-secondary-400, #E8972A);
}

.sp-panel__body[b-n1xdq2tj4t] {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* Buttons that sit under a table need clearing from it and lining up with the body padding. */
.rfa-actions[b-n1xdq2tj4t] {
    padding-top: 1rem;
}

/* Identifiers -- url keys, field keys, reference prefixes -- read as data, not prose. */
.rfa-mono[b-n1xdq2tj4t] {
    font-family: var(--font-mono, 'Roboto Mono', ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
}

/* A column header with an explanation behind it; the dotted underline is the only hint you get. */
.rfa-th-help[b-n1xdq2tj4t] {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

/* Who gets the notification: informational, so quieter than the controls around it. */
.rfa-notify[b-n1xdq2tj4t] {
    color: var(--mud-palette-text-secondary, #757575);
    font-size: .75rem;
}

/* The customer list is a picker, so the current row has to be obvious. */
.rfa-page[b-n1xdq2tj4t]  .rfa-row--active,
.rfa-page[b-n1xdq2tj4t]  .rfa-row--active:hover {
    background-color: var(--color-primary-50, #EBF0FD);
}

.rfa-page[b-n1xdq2tj4t]  .rfa-row--active td:first-child {
    box-shadow: inset 3px 0 0 0 var(--color-primary, #0548CB);
}

/* --- public links --- */

/* A link plus its copy button, and whatever else shares the row (the settings button). */
.rfa-linkbar[b-n1xdq2tj4t] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}

/* The link grows, the copy button does not, and the pair wraps together rather than apart. */
.rfa-link-row[b-n1xdq2tj4t] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 26rem;
    min-width: 0;
}

/* The public link is long; let it shrink rather than pushing the copy button off the row. */
.rfa-page[b-n1xdq2tj4t]  .rfa-link {
    flex: 1 1 auto;
    min-width: 0;
}

.rfa-page[b-n1xdq2tj4t]  .rfa-link input {
    font-family: var(--font-mono, 'Roboto Mono', ui-monospace, monospace);
    font-size: .8rem;
    text-overflow: ellipsis;
}

.rfa-page[b-n1xdq2tj4t]  .mud-table-container {
    overflow-x: auto;
}

/* ---- draggable field rows ------------------------------------------------------------
   A grid rather than a table because the rows are drop targets; the columns match the header
   row above them, and both come from the same template so they cannot drift apart. */

.rfa-fields[b-n1xdq2tj4t] {
    border: 1px solid var(--color-primary-100, #D6E0FA);
    border-radius: 8px;
    overflow: hidden;
}

.rfa-field[b-n1xdq2tj4t] {
    display: grid;
    grid-template-columns: 44px minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.6fr) 56px 96px;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    border-top: 1px solid var(--color-primary-50, #EBF0FD);
    background: #fff;
}

/* A conditional field, indented under the answer that reveals it.

   It stays in the one ordered list rather than moving to a section of its own, because the order of
   these rows IS the order of the form and a child has to sit where it will appear. The rail and the
   tint are what group a run of them under their parent; the indent is what makes the parent read as
   the parent. */

.rfa-field--conditional[b-n1xdq2tj4t] {
    padding-left: 2.25rem;
    background: var(--rfa-cond-tint);
    border-left: 3px solid var(--rfa-cond-rail);
}

/* One tint per branch, cycling at three. Palette colours rather than arbitrary pastels: the app's
   info, warning and success hues, dropped to a tint light enough to read black text on. Which
   branch gets which is assigned in field order by GroupConditions, so the colours are stable for a
   given form and only change when a condition does. */

.rfa-field--cond0[b-n1xdq2tj4t] {
    --rfa-cond-tint: #F0F4FE;
    --rfa-cond-rail: var(--color-info, #3A6AE0);
}

.rfa-field--cond1[b-n1xdq2tj4t] {
    --rfa-cond-tint: #FDF6E9;
    --rfa-cond-rail: var(--color-warning, #E8972A);
}

.rfa-field--cond2[b-n1xdq2tj4t] {
    --rfa-cond-tint: #EDF7F2;
    --rfa-cond-rail: var(--color-success, #1D9E75);
}

/* The condition itself, on its own line under the label: the two halves of "only show this field
   when X has this answer", so the hierarchy reads without opening the field. */
.rfa-field__condition[b-n1xdq2tj4t] {
    display: block;
    font-size: .72rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary, #757575);
}

.rfa-field__condition b[b-n1xdq2tj4t] {
    color: var(--color-primary-900, #06246A);
    font-weight: 600;
}

.rfa-field--head[b-n1xdq2tj4t] {
    border-top: 0;
    background: var(--color-primary-50, #EBF0FD);
    color: var(--color-primary-900, #06246A);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rfa-field > span[b-n1xdq2tj4t] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rfa-field__grip[b-n1xdq2tj4t] {
    color: var(--mud-palette-text-secondary, #757575);
    cursor: grab;
    display: flex;
    justify-content: center;
}

.rfa-field__actions[b-n1xdq2tj4t] {
    display: flex;
    justify-content: flex-end;
}

/* Named explicitly on the container via ItemDraggingClass rather than relying on a MudBlazor
   internal class name, and reached through ::deep because it lands on the item wrapper. */
.rfa-page[b-n1xdq2tj4t]  .rfa-field--dragging {
    opacity: .55;
    background: var(--color-primary-50, #EBF0FD);
}

@media (max-width: 600px) {
    .sp-panel__header[b-n1xdq2tj4t] { padding: .7rem 1rem; font-size: 1rem; }
    .sp-panel__body[b-n1xdq2tj4t] { padding: 1rem; }
}

@media (max-width: 960px) {
    /* One column per line with its header as a prefix -- what MudTable's DataLabel would give. */
    .rfa-field[b-n1xdq2tj4t] {
        grid-template-columns: 44px minmax(0, 1fr) 96px;
        row-gap: .15rem;
    }

    .rfa-field--head[b-n1xdq2tj4t] {
        display: none;
    }

    .rfa-field > span[data-label]:not(:nth-of-type(2))[b-n1xdq2tj4t]::before {
        content: attr(data-label) ": ";
        color: var(--mud-palette-text-secondary, #757575);
        font-size: .7rem;
        text-transform: uppercase;
    }

    .rfa-field > span[data-label]:not(:nth-of-type(2))[b-n1xdq2tj4t] {
        grid-column: 2 / span 2;
    }
}
/* /Components/Pages/Administration.razor.rz.scp.css */
/* Page Management tab — the page rows indented under their menu header. */
.page-row[b-irvyunrssu] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding-left: 2rem;
    border-top: 2px solid transparent;
}

/* Drag-to-reorder, mirroring the sidebar favorites: grab cursor on the row, and a coloured line
   above the row the dragged page will land before. */
.page-draggable[b-irvyunrssu] {
    cursor: grab;
}

.page-draggable:active[b-irvyunrssu] {
    cursor: grabbing;
}

.page-row.drag-over[b-irvyunrssu] {
    border-top-color: var(--color-secondary-400);
}
/* /Components/Pages/Imports/FinancialsImport.razor.rz.scp.css */
/* Financials Import — the same banded-panel treatment as Kit Builds, on the app's Royal Blue /
   Amber tokens (wwwroot/app.css).

   These rules are this page's own copy rather than a shared stylesheet, the same way
   CustomerRequests and RequestFormsAdmin keep theirs. Blazor CSS isolation stamps every rule with
   the DEFINING component's scope attribute, so a shared class carries no styling outside the file
   that declared it. That is also why every rule reaching markup this page does not own -- the
   MudBlazor internals, the Radzen tab chrome, and AttributeFinancialsPanel's panel -- goes through
   ::deep from .fi-page, which this page does own. */

.fi-title[b-n6rumi1qhv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fi-title__overline[b-n6rumi1qhv] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}

/* Panel = MudPaper card with a solid brand band on top. ::deep because MudPaper renders the div
   this class lands on, and because the three attribute tabs render their panel from
   AttributeFinancialsPanel -- a component that owns no styling of its own. */
.fi-page[b-n6rumi1qhv]  .fi-panel {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-primary-100);
}

.fi-page[b-n6rumi1qhv]  .fi-panel__header {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-400) 100%);
    color: #fff;
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 3px solid var(--color-secondary-400);
}

.fi-page[b-n6rumi1qhv]  .fi-panel__body {
    padding: 1rem;
}

/* Tab strip sits above the panels rather than boxing them, matching Kit Builds. */
.fi-page[b-n6rumi1qhv]  .rz-tabview {
    border: 0;
    background: transparent;
}

.fi-page[b-n6rumi1qhv]  .rz-tabview-panels {
    padding: 1rem 0 0;
    background: transparent;
}

/* History table: brand-tinted header, zebra rows, quiet hover. */
.fi-page[b-n6rumi1qhv]  .fi-table .mud-table-head th {
    background: var(--color-primary-50);
    color: var(--color-primary-900);
    font-weight: 700;
    white-space: nowrap;
}

.fi-page[b-n6rumi1qhv]  .fi-table tbody tr:nth-child(even) {
    background: var(--color-page-tint);
}

.fi-page[b-n6rumi1qhv]  .fi-table tbody tr:hover {
    background: var(--color-primary-100);
    cursor: pointer;
}

/* Eight columns at MudBlazor's stock 16px side padding spend ~256px on whitespace alone, the same
   reasoning as the kb-table rule on Kit Builds. */
.fi-page[b-n6rumi1qhv]  .fi-table .mud-table-cell {
    padding-left: 8px;
    padding-right: 8px;
}
/* /Components/Pages/PublicRequestForm.razor.rz.scp.css */
/* Public customer request forms. Prefix rq-, following the sp-/pd-/kb- convention on the Tier 2
   pages.

   ::deep on anything whose class sits on a MudBlazor or Radzen component, plain selectors for the
   divs written in the .razor itself. The previous .rq-card rules were plain selectors on a MudPaper,
   so they never matched and the cards rendered with no padding at all -- which is what this pass is
   fixing. Same trap as sp-panel: see RequestFormsAdmin.razor.css. */

.rq-page[b-brhy099wbi] {
    max-width: 940px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.rq-loading[b-brhy099wbi] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

/* --- brand bar: the customer on the left, GMLx on the right --- */

.rq-brand[b-brhy099wbi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.rq-brand__customer[b-brhy099wbi] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.rq-brand__logo[b-brhy099wbi] {
    max-height: 52px;
    max-width: 240px;
    object-fit: contain;
}

/* Fallback when the customer has no logo configured: their name, set to read as a wordmark. */
.rq-brand__name[b-brhy099wbi] {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--color-primary, #0548CB);
}

.rq-brand__gmlx[b-brhy099wbi] {
    max-height: 42px;
    max-width: 220px;
    object-fit: contain;
    flex-shrink: 0;
}

/* --- page heading --- */

.rq-header[b-brhy099wbi] {
    margin-bottom: 1.25rem;
}

/* --- panels --- */

.rq-page[b-brhy099wbi]  .rq-panel {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-primary-100, #D6E0FA);
    margin-bottom: 1.25rem;
}

/* Names the form the customer is filling in, so it carries weight rather than labelling a box.
   Pronounced without colour, matching Customer Requests: the customer's own logo is the only branding
   on this page that should be loud, and a saturated band directly under it competes with it. */
.rq-panel__header[b-brhy099wbi] {
    background: var(--color-page-tint, #F0F4FE);
    color: var(--color-primary-900, #06246A);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: .85rem 1.5rem;
    border-bottom: 3px solid var(--color-secondary-400, #E8972A);
}

.rq-panel__body[b-brhy099wbi] {
    padding: 1.5rem;
}

.rq-page[b-brhy099wbi]  .rq-message {
    max-width: 520px;
    margin: 3rem auto;
    text-align: center;
    padding: 2.5rem 2rem;
    border-radius: 10px;
    border: 1px solid var(--color-primary-100, #D6E0FA);
}

/* --- section bar for a heading field inside the form body ---
   Styled in RequestFormRenderer.razor.css, which is where the div is written. A copy here would
   carry this page's scope attribute and match nothing, which is what it did until now. */

/* --- fields, disclaimer, items table, files ---
   None of that markup is written by this page: it comes from RequestFormRenderer and the components
   in RequestFields/, each of which carries its OWN scope attribute. Rules for it therefore cannot
   live here -- every copy that did matched nothing at all. .rq-disclaimer and .rq-radzen__label are
   now in RequestFormRenderer.razor.css beside .rq-section; the rest are shared by several of those
   components at once, so they are global in wwwroot/app.css under "public request form". */

/* --- submit --- */

.rq-submit[b-brhy099wbi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

@media (max-width: 600px) {
    .rq-page[b-brhy099wbi] { padding: 1rem .75rem 3rem; }
    .rq-panel__body[b-brhy099wbi] { padding: 1rem; }
    .rq-panel__header[b-brhy099wbi] { padding: .7rem 1rem; font-size: 1rem; }
    .rq-submit[b-brhy099wbi] { flex-direction: column; align-items: stretch; }

    /* Two logos side by side do not fit; the customer's leads, ours follows. */
    .rq-brand[b-brhy099wbi] { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .rq-brand__logo[b-brhy099wbi], .rq-brand__gmlx[b-brhy099wbi] { max-height: 40px; }
}
/* /Components/Pages/RHM/FieldCounting.razor.rz.scp.css */
/* Field Counting — the same title treatment as the other RHM pages (mi-*, ir-*), fc-prefixed.
   The overline rules have to live in a scoped file next to the page that uses them: Blazor's CSS
   isolation stamps them with this component's attribute, so a class defined in another page's
   .razor.css does nothing here. */

.fc-title[b-4ls8uhfuks] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fc-title__overline[b-4ls8uhfuks] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}

/* The raw payload beside a parse failure. Monospaced and wrapping, because it is read character by
   character when a scanner turns out to be sending something unexpected, and it can be long. */
.fc-raw[b-4ls8uhfuks] {
    display: block;
    margin-top: 4px;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 0.8rem;
    word-break: break-all;
}

/* The scanner-mode banner, pulsing while a batch is open. This is the one thing on screen that says
   the gun's next trigger will be recorded, and a counter glances up from the shelf rather than
   reading it, so it moves.

   Opacity and a shadow rather than a transform: a scaling banner reflows the rows under it on every
   cycle, which is worse than not moving at all.

   This selector matches a WRAPPER DIV the page renders, not the MudAlert. Blazor's CSS isolation
   stamps its scope attribute onto a component's own elements only, so `.fc-scanning` handed to
   MudAlert as a Class compiled to `.fc-scanning[b-xxxxx]` against markup that never carried the
   attribute, and nothing animated. The radius matches MudAlert's so the halo follows its shape. */
.fc-scanning[b-4ls8uhfuks] {
    animation: fc-pulse-b-4ls8uhfuks 1.6s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes fc-pulse-b-4ls8uhfuks {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.45); }
    50%      { opacity: 0.82; box-shadow: 0 0 0 6px rgba(33, 150, 243, 0); }
}

/* Somebody who has asked their system not to animate things gets a static banner. It still reads as
   active, because the text says so. */
@media (prefers-reduced-motion: reduce) {
    .fc-scanning[b-4ls8uhfuks] {
        animation: none;
    }
}

/* Where the count is being taken: the batch, the client, and the configured fields the counter
   filled in. The secondary palette, so it reads as standing context rather than as another control
   competing with the scan box and the commit buttons.

   The colour comes from --mud-palette-secondary rather than a literal, so it follows the theme and
   the dark palette without a second rule here. color-mix gives the tint from that same variable,
   which means changing the theme's secondary changes both the bar and the wash together. */
.fc-context[b-4ls8uhfuks] {
    border-left: 3px solid var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 7%, transparent);
    border-radius: 0 4px 4px 0;
    padding: 8px 14px;
}

.fc-context__line[b-4ls8uhfuks] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-secondary);
}

/* Deliberately quieter than the line above it: the start time is reference, not identity. */
.fc-context__meta[b-4ls8uhfuks] {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* The scanning toolbar: counts on the left, Commit and Discard on the right. 599.98px is the top of
   MudBlazor's Xs range, so these rules switch exactly where Breakpoint.Sm turns the table into cards. */
.fc-toolbar[b-4ls8uhfuks] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.fc-toolbar__counts[b-4ls8uhfuks] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.fc-toolbar__actions[b-4ls8uhfuks] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* On a phone the actions take a row of their own and the two buttons share it equally: a thumb-sized
   target each, with the gap above keeping them apart. ::deep because the buttons are MudBlazor's
   markup, not this component's, so the scope attribute is not on them. */
@media (max-width: 599.98px) {
    .fc-toolbar__actions[b-4ls8uhfuks] {
        width: 100%;
        margin-left: 0;
    }

    .fc-toolbar__actions[b-4ls8uhfuks]  .mud-button-root {
        flex: 1 1 0;
    }
}

/* The scan list. On a wide screen it scrolls inside a cap so the scan box and the toolbar stay put as
   the list grows; the header stays visible because the table is FixedHeader. Below 600px the rows are
   cards and the cap comes off, so there is one thing to scroll, the page. */
@media (min-width: 600px) {
    .fc-scans[b-4ls8uhfuks]  .mud-table-container {
        max-height: 420px;
    }
}

/* Every scan is one unit, so on a phone the Qty line would say "1" on every card. */
@media (max-width: 599.98px) {
    .fc-scans[b-4ls8uhfuks]  .fc-qty {
        display: none;
    }
}
/* /Components/Pages/RHM/InventoryLoad.razor.rz.scp.css */
/* Inventory Load. Prefix il-.

   The selected-ids panel in Step 0 stays in view while the results table beside it scrolls, on
   screens wide enough for the two columns to sit side by side (MudBlazor's md breakpoint). */
@media (min-width: 960px) {
    .il-sticky[b-55vlocmves] {
        position: sticky;
        top: 1rem;
    }
}
/* /Components/Pages/RHM/InventoryRequests.razor.rz.scp.css */
.ir-title[b-cwz2hvbo3s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ir-title__overline[b-cwz2hvbo3s] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/RHM/LightHouse.razor.rz.scp.css */
.ka-title[b-xhs7wpqn9m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ka-title__overline[b-xhs7wpqn9m] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}

/* A hospital with its own lead days (an override row) stands out in the primary blue; defaults
   stay plain. ::deep because the class sits on Mud components' own elements, which do not carry
   this page's scope attribute; the ka-body wrapper is the page-owned ancestor the rules hang off.
   MudBlazor gives .mud-input its own color, so the number box needs the inner rules too. */
.ka-body[b-xhs7wpqn9m]  .ka-custom,
.ka-body[b-xhs7wpqn9m]  .ka-custom .mud-input {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.ka-body[b-xhs7wpqn9m]  .ka-custom .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
}

/* The whole row of a modified hospital is tinted, via MudTable's RowClassFunc. The hover rule
   is repeated so the tint survives the table's own hover colour. */
.ka-body[b-xhs7wpqn9m]  tr.ka-custom-row,
.ka-body[b-xhs7wpqn9m]  tr.ka-custom-row:hover {
    background-color: var(--mud-palette-primary-hover);
}

/* The kit list under a clicked Preview row. Same grey MudBlazor uses for table headers. */
.ka-body[b-xhs7wpqn9m]  td.ka-kits {
    padding: 8px 16px 12px 40px;
    background-color: var(--mud-palette-background-gray);
}

.ka-body[b-xhs7wpqn9m]  .ka-kits__list {
    margin: 0 0 8px;
    padding-left: 18px;
}
/* /Components/Pages/RHM/MissingInstruments.razor.rz.scp.css */
/* Missing Instrument Log — the same title treatment as Inventory Requests (ir-*), mi-prefixed.
   The overline rules have to live in a scoped file next to the page that uses them: Blazor's CSS
   isolation stamps them with this component's attribute, so a class defined in another page's
   .razor.css does nothing here. */

.mi-title[b-34l08zclb2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mi-title__overline[b-34l08zclb2] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/RHM/OnCallRoster.razor.rz.scp.css */
/* The Preview tab renders an editable replica of the on-call email. These inputs have to look
   like the email's text, not like form fields, so the manager is editing the email itself
   rather than a form beside it. Colours, borders, padding and fonts all come from
   OnCallMessageBuilder's public style constants applied inline; this file only strips the
   browser's own input chrome and puts a focus ring back. */

.email-cell[b-1p3e00nqdp] {
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    width: 100%;
    padding: 0;
    margin: 0;
    outline: none;
}

/* Without this the cell is indistinguishable from static text and nothing tells you it can be
   typed in. Inset so it does not fight the cell's 1px black table border. */
.email-cell:focus[b-1p3e00nqdp] {
    outline: 2px solid #1976d2;
    outline-offset: -2px;
    background: #fffbe6;
}

.email-cell:hover:not(:focus)[b-1p3e00nqdp] {
    background: rgba(25, 118, 210, 0.08);
}

/* The notice paragraph. Multi-line, so a textarea rather than an input, sized to its content
   and not resizable: the email wraps it, so a drag handle would only mislead. */
.email-notice[b-1p3e00nqdp] {
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    width: 100%;
    padding: 0;
    margin: 0;
    outline: none;
    resize: none;
    overflow: hidden;
}

.email-notice:focus[b-1p3e00nqdp] {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
    background: #fffbe6;
}

.email-notice:hover:not(:focus)[b-1p3e00nqdp] {
    background: rgba(25, 118, 210, 0.08);
}

/* The per-row + and x controls. They live in a real table cell so they line up with the rows
   exactly, but carry no border or background so they read as sitting outside the email. */
.row-gutter[b-1p3e00nqdp] {
    border: none;
    background: transparent;
    padding: 0 0 0 6px;
    white-space: nowrap;
    vertical-align: middle;
}
/* /Components/Pages/RHM/OnHandInventory.razor.rz.scp.css */
/* On Hand Inventory. Same title shape as Case Notify and Shipments (sp-title), scoped to this page. */

.sp-title[b-qvt700f89u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-title__overline[b-qvt700f89u] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/RHM/OpenOrders.razor.rz.scp.css */
.oo-title[b-tqvfckapyw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oo-title__overline[b-tqvfckapyw] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/RHM/SalesRepContacts.razor.rz.scp.css */
/* Sales Reps Contacts. Same title shape as Case Notify and Shipments (sp-title), scoped to this page. */

.sp-title[b-usvxp13bgd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-title__overline[b-usvxp13bgd] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/RHM/SubinventoryAlignment.razor.rz.scp.css */
/* Subinventory Alignment — the same title treatment as Instrument Scrap Log (mi-*), sa-prefixed.
   Scoped: Blazor CSS isolation stamps these with this page's attribute, so another page's
   .razor.css cannot supply them. */

.sa-title[b-dvrumocafe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sa-title__overline[b-dvrumocafe] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/Tier2/AncillaryCharges.razor.rz.scp.css */
/* Ancillary Charges — same banded-panel treatment as Kit Builds (kb-*), ac-prefixed. */

.ac-title[b-yy079uhzfd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ac-title__overline[b-yy079uhzfd] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}

.ancillary-charges-page[b-yy079uhzfd]  .ac-panel {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-primary-100);
}

.ac-panel__header[b-yy079uhzfd] {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-400) 100%);
    color: #fff;
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 3px solid var(--color-secondary-400);
}

.ac-panel__body[b-yy079uhzfd] {
    padding: 1rem;
}

.ancillary-charges-page[b-yy079uhzfd]  .ac-table .mud-table-head th {
    background: var(--color-primary-50);
    color: var(--color-primary-900);
    font-weight: 700;
    white-space: nowrap;
}

.ancillary-charges-page[b-yy079uhzfd]  .ac-table tbody tr:nth-child(even) {
    background: var(--color-page-tint);
}

.ancillary-charges-page[b-yy079uhzfd]  .ac-table tbody tr:hover {
    background: var(--color-primary-100);
    cursor: pointer;
}

.ancillary-charges-page[b-yy079uhzfd]  .ac-num {
    font-family: var(--font-mono);
    font-size: 0.86em;
    font-variant-numeric: tabular-nums;
}

.ancillary-charges-page[b-yy079uhzfd]  .ac-nowrap {
    white-space: nowrap;
}

.ancillary-charges-page[b-yy079uhzfd]  .ac-th-info {
    cursor: help;
}

.ancillary-charges-page[b-yy079uhzfd]  .ac-th-info .mud-icon-root {
    font-size: 0.95rem;
    vertical-align: -3px;
    margin-left: 7px;
    color: var(--color-secondary);
}

/* Seven columns at MudBlazor's stock 16px side padding spend ~224px on whitespace alone,
   which is what pushed this table into a side scroll. 8px reads just as clearly at this
   density and buys the columns back. */
.ancillary-charges-page[b-yy079uhzfd]  .ac-table .mud-table-cell {
    padding-left: 8px;
    padding-right: 8px;
}

/* Opt a header out of the nowrap above so a long label breaks onto two lines
   instead of stretching its column. */
.ancillary-charges-page[b-yy079uhzfd]  .ac-table .mud-table-head th.ac-wrap {
    white-space: normal;
    min-width: 5.5rem;
    max-width: 7rem;
}

/* Charge categories run to 85 characters and emails to whatever the customer's domain is.
   Uncapped, either one pushes the ledger into a side scroll, so clip both and let the
   cell's title tooltip (and the detail dialog) carry the full value. Desktop only: below
   the Sm breakpoint the table stacks into cards, where each value gets its own line. */
@media (min-width: 600px) {
    .ancillary-charges-page[b-yy079uhzfd]  .ac-clip {
        max-width: 11rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ancillary-charges-page[b-yy079uhzfd]  .ac-clip--email {
        max-width: 9rem;
    }
}

/* Charge # holds 2-4 digits but its header set a ~7rem floor, so the header is just "#"
   (the stacked mobile card still labels it "Charge #" via DataLabel) and the column is
   pinned narrow. */
.ancillary-charges-page[b-yy079uhzfd]  .ac-narrow {
    width: 3.5rem;
    max-width: 3.5rem;
}
/* /Components/Pages/Tier2/JasciDashboards.razor.rz.scp.css */
/* Same page title as the other 3PL pages (Shipments.razor.css). */
.sp-title[b-2bympzlabi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sp-title__overline[b-2bympzlabi] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/Tier2/KitBuilds.razor.rz.scp.css */
/* Kit Builds — banded-panel treatment echoing the legacy tier2 screen, rebuilt on the
   app's Royal Blue / Amber tokens (wwwroot/app.css). */

.kb-title[b-x6k5kobzx5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kb-title__overline[b-x6k5kobzx5] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}

/* Panel = MudPaper card with a solid brand band on top */
.kit-builds-page[b-x6k5kobzx5]  .kb-panel {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-primary-100);
}

.kb-panel__header[b-x6k5kobzx5] {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-400) 100%);
    color: #fff;
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 3px solid var(--color-secondary-400);
}

.kb-panel__body[b-x6k5kobzx5] {
    padding: 1rem;
}

/* Table: brand-tinted header, zebra rows, quiet hover */
.kit-builds-page[b-x6k5kobzx5]  .kb-table .mud-table-head th {
    background: var(--color-primary-50);
    color: var(--color-primary-900);
    font-weight: 700;
    white-space: nowrap;
}

/* Opt a header out of the nowrap above so a long label breaks onto two lines
   instead of stretching its column. */
.kit-builds-page[b-x6k5kobzx5]  .kb-table .mud-table-head th.kb-wrap {
    white-space: normal;
    min-width: 7rem;
    max-width: 9rem;
}

/* Header carrying a tooltip: the amber info glyph is the affordance, matching the KPI cards.
   cursor: help rather than pointer — hovering explains, it doesn't navigate. */
.kit-builds-page[b-x6k5kobzx5]  .kb-th-info {
    cursor: help;
}

.kit-builds-page[b-x6k5kobzx5]  .kb-th-info .mud-icon-root {
    font-size: 0.95rem;
    vertical-align: -3px;
    margin-left: 7px;
    color: var(--color-secondary);
}

.kit-builds-page[b-x6k5kobzx5]  .kb-table tbody tr:nth-child(even) {
    background: var(--color-page-tint);
}

.kit-builds-page[b-x6k5kobzx5]  .kb-table tbody tr:hover {
    background: var(--color-primary-100);
    cursor: pointer;
}

.kit-builds-page[b-x6k5kobzx5]  .kb-num {
    font-family: var(--font-mono);
    font-size: 0.86em;
    font-variant-numeric: tabular-nums;
}

.kit-builds-page[b-x6k5kobzx5]  .kb-nowrap {
    white-space: nowrap;
}

/* Compact calendar: shrink the scheduler chrome so it reads as a filter widget,
   and brand the event chips */
.kit-builds-page[b-x6k5kobzx5]  .rz-scheduler {
    font-size: 0.72rem;
    border-radius: 8px;
}

/* Days with builds are tinted green via SlotRender; the tiny event chips and the
   "+N more" overflow button only add clutter at this size, so hide them. */
.kit-builds-page[b-x6k5kobzx5]  .rz-scheduler .rz-event,
.kit-builds-page[b-x6k5kobzx5]  .rz-scheduler .rz-event-list-btn {
    display: none;
}

.kit-builds-page[b-x6k5kobzx5]  .rz-scheduler-toolbar {
    padding: 0.25rem;
}

/* Same reasoning as the ac-table rule on Ancillary Charges: eight columns at MudBlazor's
   stock 16px side padding spend ~256px on whitespace alone. */
.kit-builds-page[b-x6k5kobzx5]  .kb-table .mud-table-cell {
    padding-left: 8px;
    padding-right: 8px;
}

/* Kit family and IDL names are free text, so cap them rather than let one long name force
   a side scroll. Full name in the cell's title tooltip. Skipped below the Sm breakpoint,
   where the table stacks into cards. */
@media (min-width: 600px) {
    .kit-builds-page[b-x6k5kobzx5]  .kb-clip {
        max-width: 9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* "IDL-System Modifications" is 24 characters. Left on one line it would hold an 11rem
   column open and undo the width work above, so this cell wraps instead. */
.kit-builds-page[b-x6k5kobzx5]  .kb-wrap-cell {
    white-space: normal;
    max-width: 7.5rem;
}
/* /Components/Pages/Tier2/KitProfiles.razor.rz.scp.css */
/* Kit Profiles — banded-panel treatment matching Kit Builds, on the app's
   Royal Blue / Amber tokens (wwwroot/app.css). */

.kp-title[b-h6j2alqjxb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kp-title__overline[b-h6j2alqjxb] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}

/* Panel = MudPaper card with a solid brand band on top */
.kit-profiles-page[b-h6j2alqjxb]  .kp-panel {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-primary-100);
}

.kp-panel__header[b-h6j2alqjxb] {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-400) 100%);
    color: #fff;
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 3px solid var(--color-secondary-400);
}

.kp-panel__body[b-h6j2alqjxb] {
    padding: 1rem;
}

/* Table: brand-tinted header, zebra rows, quiet hover */
.kit-profiles-page[b-h6j2alqjxb]  .kp-table .mud-table-head th {
    background: var(--color-primary-50);
    color: var(--color-primary-900);
    font-weight: 700;
}

/* The families table has five columns inside a 5/12 panel. MudBlazor's dense
   cells reserve 40px of horizontal padding each, which pushed the action
   column past the panel edge (kp-panel clips with overflow: hidden, so the
   buttons just disappeared). Trim the trailing padding, let long headers
   wrap, and give the container its own scrollbar as a last resort. */
.kit-profiles-page[b-h6j2alqjxb]  .kp-table th.mud-table-cell,
.kit-profiles-page[b-h6j2alqjxb]  .kp-table td.mud-table-cell {
    padding-inline-end: 10px;
}

.kit-profiles-page[b-h6j2alqjxb]  .kp-table .mud-table-container {
    overflow-x: auto;
}

.kit-profiles-page[b-h6j2alqjxb]  .kp-table tbody tr:nth-child(even) {
    background: var(--color-page-tint);
}

.kit-profiles-page[b-h6j2alqjxb]  .kp-table tbody tr:hover {
    background: var(--color-primary-100);
    cursor: pointer;
}

.kit-profiles-page[b-h6j2alqjxb]  .kp-row--selected {
    background: var(--color-primary-100);
}

/* Inactive rows are the exception — dim them instead of chip-labeling every row */
.kit-profiles-page[b-h6j2alqjxb]  .kp-row--inactive {
    opacity: 0.55;
}

.kit-profiles-page[b-h6j2alqjxb]  .kp-num {
    font-family: var(--font-mono);
    font-size: 0.86em;
    font-variant-numeric: tabular-nums;
}

.kit-profiles-page[b-h6j2alqjxb]  .kp-nowrap {
    white-space: nowrap;
}

/* Bulk-import per-row errors (Task 6): keep long lists contained */
.kit-profiles-page[b-h6j2alqjxb]  .kp-errors {
    max-height: 260px;
    overflow-y: auto;
}
/* /Components/Pages/Tier2/PhotoDatabase.razor.rz.scp.css */
/* Photo Database — same banded-panel treatment as Kit Builds (kb-*), pd-prefixed. */

.pd-title[b-7zlkaatm9a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pd-title__overline[b-7zlkaatm9a] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}

.photo-database-page[b-7zlkaatm9a]  .pd-panel {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-primary-100);
}

.pd-panel__header[b-7zlkaatm9a] {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-400) 100%);
    color: #fff;
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 3px solid var(--color-secondary-400);
}

.pd-panel__body[b-7zlkaatm9a] {
    padding: 1rem;
}

.photo-database-page[b-7zlkaatm9a]  .pd-table .mud-table-head th {
    background: var(--color-primary-50);
    color: var(--color-primary-900);
    font-weight: 700;
    white-space: nowrap;
}

.photo-database-page[b-7zlkaatm9a]  .pd-table tbody tr:nth-child(even) {
    background: var(--color-page-tint);
}

.photo-database-page[b-7zlkaatm9a]  .pd-table tbody tr:hover {
    background: var(--color-primary-100);
    cursor: pointer;
}

.photo-database-page[b-7zlkaatm9a]  .pd-num {
    font-family: var(--font-mono);
    font-size: 0.86em;
    font-variant-numeric: tabular-nums;
}

.photo-database-page[b-7zlkaatm9a]  .pd-nowrap {
    white-space: nowrap;
}

/* Title left, action right. The button inherits the band's white text so it reads as part of the
   header rather than something dropped on top of it; the band gives back the vertical padding the
   button now supplies itself. */
.pd-panel__header--bar[b-7zlkaatm9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block: 0.2rem;
}

.photo-database-page[b-7zlkaatm9a]  .pd-panel__download {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.78rem;
}
/* /Components/Pages/Tier2/Shipments.razor.rz.scp.css */
/* Shipments — same banded-panel treatment as Photo Database (pd-*), sp-prefixed. */

.sp-title[b-6yguednbhm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-title__overline[b-6yguednbhm] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--mud-palette-text-secondary);
}

.shipments-page[b-6yguednbhm]  .sp-panel {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-primary-100);
}

.sp-panel__header[b-6yguednbhm] {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-400) 100%);
    color: #fff;
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 3px solid var(--color-secondary-400);
}

/* Header with an action on the right (bulk download); keeps the button off the title on narrow screens. */
.sp-panel__header--row[b-6yguednbhm] {
    display: flex;

    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.sp-panel__body[b-6yguednbhm] {
    padding: 1rem;
}

.shipments-page[b-6yguednbhm]  .sp-table .mud-table-head th {
    background: var(--color-primary-50);
    color: var(--color-primary-900);
    font-weight: 700;
    white-space: nowrap;
}

.shipments-page[b-6yguednbhm]  .sp-table tbody tr:nth-child(even) {
    background: var(--color-page-tint);
}

.shipments-page[b-6yguednbhm]  .sp-table tbody tr:hover {
    background: var(--color-primary-100);
    cursor: pointer;
}

.shipments-page[b-6yguednbhm]  .sp-num {
    font-family: var(--font-mono);
    font-size: 0.86em;
    font-variant-numeric: tabular-nums;
}

.shipments-page[b-6yguednbhm]  .sp-nowrap {
    white-space: nowrap;
}

/* Shrink-to-fit. These columns hold fixed-width controls and stamped dates, so widening the window
   -- or collapsing the sidebar -- must not pool the freed space here as a gap. The classic table
   trick: 1% is below any column's content width, so auto layout gives the column exactly its
   content and hands the slack to the text columns, which can use it. */
.shipments-page[b-6yguednbhm]  .sp-table .sp-col-fit {
    width: 1%;
}

/* Paired columns stack inside one cell so all ten fields fit the viewport without
   sideways scrolling: who+when, ship+eta, tracking+po, status+variances. */
.shipments-page[b-6yguednbhm]  .sp-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.35;
}

.shipments-page[b-6yguednbhm]  .sp-stack__sub {
    font-size: 0.72rem;
    color: #757575;
}

.shipments-page[b-6yguednbhm]  .sp-stack__tag {
    display: inline-block;
    min-width: 2rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9e9e9e;
}

.shipments-page[b-6yguednbhm]  .sp-stack__chip {
    margin-left: 0;
    align-self: flex-start;
}

/* Status cell: the tracker, and under it the control that moves it along. Stacked rather than side
   by side -- two 148px controls in a row demand ~300px of column, which is width the table has to
   take from the text columns whether or not it renders that way. */
.shipments-page[b-6yguednbhm]  .sp-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

.shipments-page[b-6yguednbhm]  .sp-status__edit {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

/* Underlined text rather than an outlined box: in a dense table the border is 24px of padding
   buying nothing, and the caret alone reads as "this opens". The width is shared with the tracker
   above it via --stk-length, so the chain and the control line up rather than nearly lining up. */
.shipments-page[b-6yguednbhm]  .sp-status {
    --stk-length: 148px;
}

.shipments-page[b-6yguednbhm]  .sp-status__select {
    width: 148px;
}

.shipments-page[b-6yguednbhm]  .sp-status__select .mud-input-slot {
    font-size: 0.78rem;
}

/* The confirm tick: a squared-off stamp, deliberately not a circle. The three beads directly above
   it are circles that mean states; keeping the one thing you press a different shape stops it
   reading as a fourth state.
   MudBlazor paints its own round hover overlay behind the button, which spills past this square
   border as a blue blob -- so every state here sets background-color explicitly and the ripple is
   turned off in the markup. Hover is a faint tint, not a fill. */
.shipments-page[b-6yguednbhm]  .sp-status__apply,
.shipments-page[b-6yguednbhm]  .sp-status__apply:hover,
.shipments-page[b-6yguednbhm]  .sp-status__apply:focus {
    margin-left: 0.25rem;
    padding: 2px;
    border: 1.5px solid var(--color-primary);
    border-radius: 7px;
    background-color: #fff;
    color: var(--color-primary);
}

.shipments-page[b-6yguednbhm]  .sp-status__apply {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    animation: sp-apply-in-b-6yguednbhm 150ms ease-out;
}

.shipments-page[b-6yguednbhm]  .sp-status__apply:hover:not(:disabled) {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-800);
    color: var(--color-primary-800);
}

.shipments-page[b-6yguednbhm]  .sp-status__apply:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.shipments-page[b-6yguednbhm]  .sp-status__apply:disabled {
    border-color: #C6CBD2;
    color: #C6CBD2;
}

/* It appears the instant a status is picked, so it arrives rather than blinks into place. */
@keyframes sp-apply-in-b-6yguednbhm {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .shipments-page[b-6yguednbhm]  .sp-status__apply {
        animation: none;
    }
}

/* --- Shipment Log --------------------------------------------------------------------------
   The 3PL lead's working ledger, and the tab that replaces a spreadsheet. It is styled to match
   the Shipment History table one tab over rather than looking like a second, unrelated product. */

.sp-log-bar[b-6yguednbhm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.shipments-page[b-6yguednbhm]  .sp-log-bar__search {
    flex: 1 1 260px;
    max-width: 380px;
}

.sp-log-bar__meta[b-6yguednbhm] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.sp-log-bar__count[b-6yguednbhm] {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.shipments-page[b-6yguednbhm]  .sp-log-bar__clear,
.shipments-page[b-6yguednbhm]  .sp-log-bar__download,
.shipments-page[b-6yguednbhm]  .sp-log-bar__bulk {
    text-transform: none;
    font-size: 0.78rem;
}

/* --- The log's header rubric -------------------------------------------------------------------

   The header row was spending roughly 360px on chrome nobody could see, and then amputating the
   words with an ellipsis to pay for it: Radzen holds 1.25rem open for a sort arrow on every
   sortable column whether or not anything is sorted (eleven columns, ~220px of air), and gives each
   filter funnel a 1.25rem glyph with a 1rem auto margin (~144px more). What was left read "GM...",
   "R..", "Date R...". Reclaiming that space is the whole fix -- no column label was shortened and
   no date format was touched.

   The labels are set as a compressed uppercase rubric over roomy tabular data, which is the
   contrast that makes a ledger scannable down a column. */

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table thead th {
    background: var(--color-primary-50);
    color: var(--color-primary-900);
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    line-height: 1.1;
    vertical-align: bottom;
}

/* Radzen sets white-space:nowrap and text-overflow:ellipsis on this inner span, so a rule on the
   th alone never reaches the text. This is the one that actually lets a header wrap. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table thead th .rz-column-title-content {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
}

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table thead th .rz-column-title {
    align-items: flex-end;
    gap: 0.15rem;
    min-width: 0;
    padding-inline-start: 0;
}

/* The sort arrow costs its full width on every sortable column while being fully transparent.
   Collapsed to nothing until a column is actually sorted, at which point it is worth the space. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table thead th .rzi-grid-sort {
    width: 0;
    overflow: hidden;
}

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table thead th .rzi-grid-sort.rzi-sort-asc,
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table thead th .rzi-grid-sort.rzi-sort-desc {
    width: 0.85rem;
    font-size: 0.85rem;
    color: var(--color-secondary-400);
}

/* The funnel earns its ink. Dormant it is a faint hairline that stays out of the label's way;
   the moment a column is actually narrowing the view it fills GMLx amber and washes its own
   header ground, so "which columns are filtered" is answerable from across the room instead of
   by opening four menus in turn. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table thead th .rz-grid-filter-icon {
    font-size: 0.95rem;
    margin-inline: auto 0;
    opacity: 0.45;
    color: var(--color-primary-900);
    flex: 0 0 auto;
}

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table thead th .rz-grid-filter-icon:hover {
    opacity: 1;
    color: var(--color-primary);
}

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table thead th:has(.rz-grid-filter-icon.rz-grid-filter-active) {
    background: var(--color-secondary-50);
    box-shadow: inset 0 -2px 0 var(--color-secondary-400);
}

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table thead th .rz-grid-filter-icon.rz-grid-filter-active {
    opacity: 1;
    color: var(--color-secondary);
}

/* All twelve columns inside the page width. Tight cell padding buys back ~90px across the row,
   and a value longer than its column is clipped instead of widening it. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table th,
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table td {
    padding: 0.25rem 0.4rem;
}

/* Radzen pads the header's inner flex box as well as the cell; without this the two stack up. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table thead th > div:not(.rz-cell-filter) {
    padding: 0.3rem 0;
}

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody td .rz-cell-data {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The editors are the exception -- clipping them would cut the dropdown arrow off. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody td .rz-cell-data:has(.rz-dropdown, input) {
    overflow: visible;
}

/* Editors sized to their column. At the stock size a dropdown in a 84px column read "R..." and
   "In T..." -- a control whose value you cannot read is not an editor. Dropping the face a step
   and cutting the inner padding fits "Received" and "In Transit" whole. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr .rz-dropdown,
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr .rz-textbox,
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr .rz-inputtext,
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr .rz-numeric {
    font-size: 0.72rem;
    min-width: 0;
}

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr .rz-dropdown-label,
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr .rz-inputtext {
    padding-inline: 0.3rem;
    text-overflow: clip;
}

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr .rz-dropdown-trigger,
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr .rz-datepicker-trigger {
    width: 1.1rem;
}

/* Qty is 46px wide. The spinner buttons would take most of it and the digits none. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr .rz-numeric-up,
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr .rz-numeric-down {
    display: none;
}

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr .rz-numeric-input {
    padding-inline: 0.3rem;
    text-align: right;
}

/* The tick column. Narrow, centred, and exempt from the clipping rule -- a hidden overflow eats
   the checkbox's focus ring, which is the only thing telling a keyboard user where they are. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table th.sp-log-check,
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table td.sp-log-check {
    text-align: center;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table td.sp-log-check .rz-cell-data {
    overflow: visible;
}

/* Radzen wraps the header template in an inline-flex .rz-column-title with its own padding,
   so the th's text-align never reaches the tick-all box. Center the flex row instead. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table thead th.sp-log-check .rz-column-title {
    justify-content: center;
    padding-inline: 0;
}

/* Save is the row's primary action, so it wears the brand anchor rather than a stock success
   green that belongs to no palette on this page. Sentence case to match every other button here. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody td.sp-log-actions .rz-button {
    text-transform: none;
    font-size: 0.72rem;
    padding-inline: 0.5rem;
    letter-spacing: 0;
}

/* Save and Cancel are the one cell that must never be clipped by the rule above. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody td.sp-log-actions .rz-cell-data {
    overflow: visible;
    display: flex;
    gap: 0.25rem;
}

/* Rows are the edit affordance now that the pencil column is gone, so they have to look clickable. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr {
    cursor: pointer;
}

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr:nth-child(even) td {
    background: var(--color-page-tint);
}

.shipments-page[b-6yguednbhm]  .sp-log-grid .rz-grid-table tbody tr:hover td {
    background: var(--color-primary-100);
}

/* Ledger numerals. Shipment numbers, counts and billing periods are records, not prose -- in the
   mono face with tabular figures they line up digit over digit down 3,000 rows, which is how you
   spot the one that is wrong. Matches the sp-num treatment on every other tier2 identifier. */
.shipments-page[b-6yguednbhm]  .sp-log-grid .sp-log-num {
    font-family: var(--font-mono);
    font-size: 0.82em;
    font-variant-numeric: tabular-nums;
}

/* Month calendar — MudBlazor has no month-grid component, so this is a plain 7-column grid. */

.sp-cal__nav[b-6yguednbhm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
}

.sp-cal__grid[b-6yguednbhm] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.sp-cal__grid--head[b-6yguednbhm] {
    margin-top: 0.5rem;
}

.sp-cal__weekday[b-6yguednbhm] {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-primary-900);
    padding: 0.2rem 0;
}

.sp-cal__blank[b-6yguednbhm] {
    aspect-ratio: 1;
}

.sp-cal__day[b-6yguednbhm] {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #757575;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    padding: 0;
}

.sp-cal__num[b-6yguednbhm] {
    line-height: 1;
}

/* Per-day shipment count: the calendar reads as a delivery schedule board, not a binary highlight. */
.sp-cal__count[b-6yguednbhm] {
    font-size: 0.58rem;
    line-height: 1;
    font-weight: 700;
    opacity: 0.75;
}

.sp-cal__day--has[b-6yguednbhm] {
    background: var(--color-secondary-100);
    color: var(--color-secondary-900);
    font-weight: 700;
    cursor: pointer;
}

.sp-cal__day--has:hover[b-6yguednbhm] {
    background: var(--color-secondary-200);
}

.sp-cal__day--today[b-6yguednbhm] {
    box-shadow: inset 0 0 0 1.5px var(--color-secondary);
}

.sp-cal__day--selected[b-6yguednbhm] {
    background: var(--color-primary);
    color: #fff;
}

.sp-cal__day:focus-visible[b-6yguednbhm] {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Always states what the table is showing (selected day vs full month). */
.sp-cal__caption[b-6yguednbhm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 0.5rem;
    min-height: 1.4rem;
}

.shipments-page[b-6yguednbhm]  .sp-cal__caption-btn {
    padding: 0 4px;
    min-width: 0;
    text-transform: none;
    font-size: 0.72rem;
}
/* /Components/Shared/RequestFormRenderer.razor.rz.scp.css */
/* Layout for the optional picture beside a question (FieldConfig.ImageBlob).

   Scoped to this component on purpose. The rq- rules in PublicRequestForm.razor.css are rewritten
   with that page's scope attribute, so they never reach the divs written here -- which is why
   .rq-field over there is a no-op. Anything this component's own markup needs belongs in this file.

   The wrapper and body divs are always present; only the --imaged modifier turns them into a row,
   so a field with no picture lays out exactly as it did before. */

.rq-field--imaged[b-4ibd9c5vh9] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* min-width: 0 or a MudBlazor input inside a flex item refuses to shrink and overflows the row. */
.rq-field--imaged .rq-field__body[b-4ibd9c5vh9] {
    flex: 1 1 auto;
    min-width: 0;
}

.rq-field-image[b-4ibd9c5vh9] {
    flex: 0 0 auto;
    width: 132px;
    margin: 0;
    text-align: center;
}

.rq-field-image img[b-4ibd9c5vh9] {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid var(--color-border, #D8DEDC);
    border-radius: 4px;
}

.rq-field-image figcaption[b-4ibd9c5vh9] {
    margin-top: .25rem;
    font-size: .72rem;
    line-height: 1.3;
    color: var(--color-text-muted, #5A6875);
}

/* On a phone the row would leave the input too narrow to type in, so the picture goes above the
   question instead -- column-reverse, because the body comes first in the markup. */
@media (max-width: 600px) {
    .rq-field--imaged[b-4ibd9c5vh9] {
        flex-direction: column-reverse;
        gap: .5rem;
    }

    .rq-field-image[b-4ibd9c5vh9] {
        width: 100%;
        max-width: 180px;
    }
}

/* --- section heading ---

   A "heading" field marks where one part of the form ends and the next begins, so it is drawn as a
   band rather than as larger text: a light blue fill with a solid rule down its leading edge, which
   reads as a divider at a glance while scrolling a long form.

   THE RULE LIVES HERE, NOT IN PublicRequestForm.razor.css. The copy that was over there carried that
   PAGE's scope attribute while this div carries this COMPONENT's, so it never matched anything and
   the headings rendered as plain unstyled text -- exactly the trap this file's own header comment
   describes for .rq-field. The dead copy is gone rather than left to be edited by mistake.

   Deliberately a step below .rq-panel__header in weight: that one names the whole form, this names
   a part of it. */

.rq-section[b-4ibd9c5vh9] {
    margin: 1.75rem 0 .35rem;
    padding: .65rem .95rem;
    border-left: 4px solid var(--color-primary, #0548CB);
    border-radius: 4px;
    background: var(--color-primary-100, #C3D2F9);
    color: var(--color-primary-900, #022880);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
}

/* The first heading opens the form body, where a gap above it would read as a mistake rather than
   as separation from the question before. */
.rq-field:first-child .rq-section[b-4ibd9c5vh9] {
    margin-top: 0;
}

@media (max-width: 600px) {
    .rq-section[b-4ibd9c5vh9] {
        margin-top: 1.25rem;
        padding: .55rem .8rem;
        font-size: .95rem;
    }
}

/* --- disclaimer ---
   Tinted and ruled down its leading edge so a block of terms is visibly not another question.
   Moved here from PublicRequestForm.razor.css, which could never match it: see .rq-section above. */

.rq-disclaimer[b-4ibd9c5vh9] {
    background: var(--color-page-tint, #F0F4FE);
    border-left: 3px solid var(--color-primary-400, #3A6AE0);
    border-radius: 4px;
    padding: 1rem 1.1rem;
}

.rq-disclaimer__body[b-4ibd9c5vh9] {
    font-size: .85rem;
    line-height: 1.55;
    color: var(--color-text-dark, #1C2B3A);
    /* The acknowledgement text is stored with newlines; keep them without needing markup. */
    white-space: pre-line;
    margin: .5rem 0 .75rem;
}

/* Radzen inputs carry no MudBlazor label, so the label is drawn to match. Also moved from the page
   file, for the same reason. */
.rq-radzen__label[b-4ibd9c5vh9] {
    display: block;
    font-size: .8rem;
    color: var(--color-text-dark, #1C2B3A);
    margin-bottom: .3rem;
}

/* The question's link. A plain anchor rather than MudLink so the external-tab attributes are
   explicit, styled to match the help text it sits beside. */

.rq-field-link[b-4ibd9c5vh9] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .3rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--color-primary, #0548CB);
    text-decoration: none;
}

.rq-field-link[b-4ibd9c5vh9]::before {
    content: "↗";   /* north-east arrow: opens away from this page */
    font-size: .85em;
}

.rq-field-link:hover[b-4ibd9c5vh9],
.rq-field-link:focus-visible[b-4ibd9c5vh9] {
    text-decoration: underline;
}
/* /Components/Shared/RequestTracker.razor.rz.scp.css */
/* Customer request tracker: three beads joined by two legs. rtk- prefix; the geometry is
   ShipmentTracker's (stk-) so the two sit at the same size in the same tables, the colours are the
   MudBlazor palette so the beads match the status chips. */

.rtk-wrap[b-i9g9txxsm8] {
    display: inline-block;
    vertical-align: middle;
}

.rtk[b-i9g9txxsm8] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    line-height: 1;
    vertical-align: middle;
    /* Override --rtk-length on any ancestor to size the chain to what it sits beside. */
    width: var(--rtk-length, 148px);
}

/* --- Beads --- */

.rtk__bead[b-i9g9txxsm8] {
    position: relative;
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: transparent;
    box-sizing: border-box;
}

.rtk__bead--off[b-i9g9txxsm8] {
    border: 1.5px solid #D8DCE1;
}

.rtk__bead--info[b-i9g9txxsm8] {
    background: var(--mud-palette-info);
}

.rtk__bead--warning[b-i9g9txxsm8] {
    background: var(--mud-palette-warning);
}

.rtk__bead--verdict[b-i9g9txxsm8] {
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.rtk__glyph[b-i9g9txxsm8] {
    display: block;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rtk__bead--success[b-i9g9txxsm8] {
    background: var(--mud-palette-success);
}

.rtk__bead--error[b-i9g9txxsm8] {
    background: var(--mud-palette-error);
}

/* Cancelled is the grey of the Default chip: the request ended without an outcome either way. */
.rtk__bead--cancelled[b-i9g9txxsm8] {
    background: #9E9E9E;
}

/* --- Dates --- */

.rtk__dates[b-i9g9txxsm8] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: var(--rtk-length, 148px);
    margin-top: 5px;
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.rtk__date[b-i9g9txxsm8] {
    text-align: center;
}

.rtk__date--start[b-i9g9txxsm8] {
    text-align: left;
}

.rtk__date--end[b-i9g9txxsm8] {
    text-align: right;
}

/* --- Legs --- */

.rtk__leg[b-i9g9txxsm8] {
    flex: 1 1 auto;
    min-width: 10px;
    height: 2px;
    border-radius: 1px;
}

.rtk__leg--off[b-i9g9txxsm8] {
    height: 1px;
    background: #E4E7EB;
}

.rtk__leg--warning[b-i9g9txxsm8] {
    background: var(--mud-palette-warning);
}

.rtk__leg--success[b-i9g9txxsm8] {
    background: var(--mud-palette-success);
}

.rtk__leg--error[b-i9g9txxsm8] {
    background: var(--mud-palette-error);
}

.rtk__leg--cancelled[b-i9g9txxsm8] {
    background: #9E9E9E;
}

/* --- The pulse: the bead that still owes something --- */

.rtk__bead--live[b-i9g9txxsm8]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: rtk-pulse-b-i9g9txxsm8 2s ease-out infinite;
    pointer-events: none;
}

.rtk__bead--info.rtk__bead--live[b-i9g9txxsm8] { color: var(--mud-palette-info); }
.rtk__bead--warning.rtk__bead--live[b-i9g9txxsm8] { color: var(--mud-palette-warning); }

@keyframes rtk-pulse-b-i9g9txxsm8 {
    0%   { transform: scale(1);   opacity: 0.75; }
    70%  { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Cancelled dims the whole track, so it reads as abandoned rather than as a request at stage one. */
.rtk--cancelled[b-i9g9txxsm8] {
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .rtk__bead--live[b-i9g9txxsm8]::after {
        animation: none;
        transform: scale(1.8);
        opacity: 0.45;
    }
}
/* /Components/Shared/ShipmentTracker.razor.rz.scp.css */
/* Shipment status tracker — three custody beads joined by two legs. stk- prefix, matching the
   kbd- / kb- / sp- convention used by the other scoped component stylesheets. */

/* Holds the chain and, when dates are passed, the row of dates under it. Shrink-to-fit, so with no
   dates it is the chain's own width and the tracker sits exactly where it always did. */
.stk-wrap[b-o1ns4jvo73] {
    display: inline-block;
    vertical-align: middle;
}

.stk[b-o1ns4jvo73] {
    display: inline-flex;
    align-items: center;
    /* Beads and legs butt against each other; the legs supply all the spacing. */
    gap: 0;
    line-height: 1;
    vertical-align: middle;
    /* The chain fills a set length rather than adding up fixed pieces, so it can be sized to line
       up with whatever it sits beside. Override --stk-length on any ancestor. */
    width: var(--stk-length, 148px);
}

/* --- Beads --- */

.stk__bead[b-o1ns4jvo73] {
    position: relative;
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: transparent;
    box-sizing: border-box;
}

/* Not reached yet: a hollow ring, so the shipment's remaining journey is visible but quiet. */
.stk__bead--off[b-o1ns4jvo73] {
    border: 1.5px solid #D8DCE1;
}

.stk__bead--gray[b-o1ns4jvo73] {
    background: #9E9E9E;
}

.stk__bead--amber[b-o1ns4jvo73] {
    background: var(--color-secondary-400);
}

/* The verdict bead is bigger because it is the only one carrying a judgement, and it needs the
   room for its glyph. */
.stk__bead--verdict[b-o1ns4jvo73] {
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* A fixed-size block centred by flex lands on the exact middle of the circle; the glyph inherits
   the bead's colour, so it is white on a filled bead and red inside the void ring. */
.stk__glyph[b-o1ns4jvo73] {
    display: block;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The void and hold beads spend 4px of their width on the ring, so their marks are drawn smaller
   to sit inside it. */
.stk--void .stk__glyph[b-o1ns4jvo73],
.stk--hold .stk__glyph[b-o1ns4jvo73] {
    width: 10px;
    height: 10px;
}

.stk__bead--green[b-o1ns4jvo73] {
    background: var(--color-success);
}

.stk__bead--red[b-o1ns4jvo73] {
    background: var(--color-error);
}

/* Void is an outline, not a fill: the shipment never reached an outcome, it was cancelled. */
.stk__bead--void[b-o1ns4jvo73] {
    border: 2px solid var(--color-error);
    color: var(--color-error);
}

/* Hold takes the same outline for the same reason -- a paused shipment has not reached an outcome
   either -- so the solid red fill stays reserved for Closed (Variance), which has. */
.stk__bead--hold[b-o1ns4jvo73] {
    border: 2px solid var(--color-error);
    color: var(--color-error);
}

/* --- Dates --- */

/* Three equal columns on the same width as the chain, so the middle date lands under the middle
   bead. Equal columns rather than space-between: with space-between the middle date drifts as the
   outer two change width, and "8/10/2026" against "—" is a wide difference. */
.stk__dates[b-o1ns4jvo73] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: var(--stk-length, 148px);
    margin-top: 5px;
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.stk__date[b-o1ns4jvo73] {
    text-align: center;
}

/* The outer two align to their beads, which sit at the ends of the chain rather than in the middle
   of a third of it. The middle one stays centred. */
.stk__date--start[b-o1ns4jvo73] {
    text-align: left;
}

.stk__date--end[b-o1ns4jvo73] {
    text-align: right;
}

/* A cancelled or held shipment's dates dim with the rest of the track, but the chain's own 0.55
   would stack on top of the secondary text colour and leave them barely legible, so they are
   excluded and given a floor of their own. */
.stk--void + .stk__dates[b-o1ns4jvo73],
.stk--hold + .stk__dates[b-o1ns4jvo73] {
    opacity: 0.75;
}

/* --- Legs --- */

/* The legs take whatever the beads leave, so the chain always fills --stk-length and the beads can
   be resized without changing how long it is. */
.stk__leg[b-o1ns4jvo73] {
    flex: 1 1 auto;
    min-width: 10px;
    height: 2px;
    border-radius: 1px;
}

/* Untravelled: a hairline, present but clearly not walked. */
.stk__leg--off[b-o1ns4jvo73] {
    height: 1px;
    background: #E4E7EB;
}

/* Travelled legs take the colour of the bead they lead into, so the chain reads forward. */
.stk__leg--amber[b-o1ns4jvo73] {
    background: var(--color-secondary-400);
}

.stk__leg--green[b-o1ns4jvo73] {
    background: var(--color-success);
}

.stk__leg--red[b-o1ns4jvo73] {
    background: var(--color-error);
}

/* --- The pulse: "this one still owes a decision" ---
   A scaling ring on a pseudo-element rather than an animated box-shadow: transform and opacity are
   composited on the GPU, and a history page can have fifty of these on screen at once. */

.stk__bead--live[b-o1ns4jvo73]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--color-secondary-400);
    animation: stk-pulse-b-o1ns4jvo73 2s ease-out infinite;
    pointer-events: none;
}

@keyframes stk-pulse-b-o1ns4jvo73 {
    0%   { transform: scale(1);   opacity: 0.75; }
    70%  { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* --- Void: the whole track is dashed and dimmed, so a cancelled shipment reads as abandoned
       rather than as a shipment sitting at stage one. --- */

.stk--void[b-o1ns4jvo73] {
    opacity: 0.55;
}

/* Hold dims to the same level, so a held row reads as "stopped" at a glance, but keeps its solid
   legs: the journey it has made is real and is not being disowned, only paused. */
.stk--hold[b-o1ns4jvo73] {
    opacity: 0.55;
}

.stk--void .stk__leg[b-o1ns4jvo73] {
    height: 0;
    background: transparent;
    border-top: 2px dashed #9E9E9E;
}

/* Reduced motion: keep the ring, drop the movement — the state is still marked, nothing animates. */
@media (prefers-reduced-motion: reduce) {
    .stk__bead--live[b-o1ns4jvo73]::after {
        animation: none;
        transform: scale(1.8);
        opacity: 0.45;
    }
}