/* =========================================================================
   POS Register — dialogs.css
   Per-dialog rules migrated out of Components/*.razor.css.

   Rules whose class name is unique to one dialog stand alone; anything
   generic enough to collide (.mud-*, .selected-row, .btn-cancel) is
   anchored under that dialog's root class. Shared dialog primitives —
   the .ci-* form layout and the currency-dialog .denom-* block — live in
   components.css, not here.
   ========================================================================= */

/* =========================================================================
   Shared — responsive dialog shell (tablet portrait and below, <1024px)
   Reaches every MudDialog, so it sits first in the file: a dialog's own
   section further down (Tender, Shipping, the lookups) still wins on source
   order wherever it sets the same property at the same specificity.
   Desktop and tablet landscape (>=1024px) are untouched.
   ========================================================================= */

/* Any width: an action bar that runs out of room wraps instead of overflowing.
   Mud's justify-content: flex-end keeps the wrapped buttons right-aligned; a
   bar that fits on one line is unchanged. */
.mud-dialog .mud-dialog-actions {
    flex-wrap: wrap;
    row-gap: var(--pos-space-4);
}

@media (max-width: 1023.98px) {
    /* FullWidth dialogs reclaim half of Mud's 64px side margin… */
    .mud-dialog.mud-dialog-width-full {
        width: calc(100vw - 32px);
    }

    /* …and no MaxWidth may run past the viewport. Same caps as Mud's own
       .mud-dialog-width-* rules, just never wider than the screen. */
    .mud-dialog.mud-dialog-width-xs {
        max-width: min(444px, calc(100vw - 32px));
    }

    .mud-dialog.mud-dialog-width-sm {
        max-width: min(600px, calc(100vw - 32px));
    }

    .mud-dialog.mud-dialog-width-md {
        max-width: min(960px, calc(100vw - 32px));
    }

    .mud-dialog.mud-dialog-width-lg,
    .mud-dialog.mud-dialog-width-xl,
    .mud-dialog.mud-dialog-width-xxl,
    .mud-dialog.mud-dialog-width-false {
        max-width: calc(100vw - 32px);
    }

    .mud-dialog:not(.mud-dialog-fullscreen) {
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
    }

    /* Title and action bar keep their height; only the content scrolls, so the
       buttons stay on screen. Mud's content is flex:1 1 auto but min-height:auto,
       which made the whole dialog scroll instead. */
    .mud-dialog .mud-dialog-content {
        min-height: 0;
        overflow: auto;
    }

    /* Low-priority grid columns (HeaderClass/CellClass on MudDataGrid, class on
       th/td for plain tables) drop out at tablet portrait. Never put this on a
       column needed to identify or pick a row. Two classes so it outranks Mud's
       breakpoint-stacked .mud-xs-table .mud-table-cell { display: flex }. */
    .mud-dialog .dlg-col-optional {
        display: none;
    }
}

/* =========================================================================
   GiftReceiptItemsDialog — item picker, no prices shown
   ========================================================================= */
.gr-item-list {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-2);
    max-height: 320px;
    overflow-y: auto;
}

.gr-item-row {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
}

.gr-item-desc {
    flex: 1 1 auto;
}

.gr-item-qty {
    width: 90px;
}

.gr-item-of {
    color: var(--pos-text-muted);
    font-size: 0.85rem;
}

/* =========================================================================
   DiscountItemDialog / DiscountSaleDialog — the Percent/Amount checkboxes
   ========================================================================= */
.discount-item-dialog .mud-checkbox,
.discount-sale-dialog .mud-checkbox {
    margin-left: -9px;
}

    .discount-item-dialog .mud-checkbox .mud-typography,
    .discount-sale-dialog .mud-checkbox .mud-typography {
        white-space: nowrap;
    }

/* =========================================================================
   CustomerCommentsDialog 
   ========================================================================= */
.cc-group {
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius);
    padding: var(--pos-space-4) var(--pos-space-6) var(--pos-space-6);
    margin: 0 0 var(--pos-space-8);
    min-width: 0;
}

    .cc-group:last-of-type {
        margin-bottom: 0;
    }

.cc-group-legend {
    padding: 0 var(--pos-space-3);
    font-size: var(--pos-font-lg);
    color: var(--pos-text-muted);
}

.cc-list {
    height: 230px;
    overflow-y: auto;
    padding: var(--pos-space-3) var(--pos-space-5);
    border: 1px solid var(--pos-border-input);
    border-radius: var(--pos-radius);
    background: var(--pos-surface);
}

.cc-comment {
    padding: var(--pos-space-3) 0;
    border-bottom: 1px solid var(--pos-border-light);
}

    .cc-comment:last-child {
        border-bottom: none;
    }

.cc-comment-head {
    font-size: var(--pos-font-lg);
    font-weight: var(--pos-weight-bold);
    color: var(--pos-link);
}

.cc-comment-text {
    padding-left: var(--pos-space-5);
    font-size: var(--pos-font-lg);
    color: var(--pos-text);
    white-space: pre-wrap;
}

.cc-empty {
    margin: 0;
    padding: var(--pos-space-3) 0;
    font-size: var(--pos-font-lg);
    font-style: italic;
    color: var(--pos-text-muted);
}

.cc-error {
    margin: var(--pos-space-3) 0 0;
    font-size: var(--pos-font-base);
    color: var(--pos-danger);
}

/* =========================================================================
   CustomerNotesDialog — icon plus caption banner above the note text,
   echoing the legacy CCustomerNotes dialog
   ========================================================================= */
.cn-header {
    display: flex;
    align-items: center;
    gap: var(--pos-space-5);
    margin-bottom: var(--pos-space-8);
}

/* =========================================================================
   QuoteSaleConfirmDialog — label-on-left, fixed label column so the
   read-only boxes align on a common edge at a common size
   ========================================================================= */
.qs-form {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-7);
}

.qs-row {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
}

.qs-label {
    width: 120px;
    min-width: 120px;
    font-size: 0.875rem;
    color: var(--pos-text);
}

.qs-input {
    width: 300px;
    min-width: 300px;
}

/* =========================================================================
   ReprintCriteriaDialog — column layout of the legacy "Reprint Receipt"
   ========================================================================= */
.rc-form {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-7);
}

.rc-row {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
}

.rc-label {
    width: 200px;
    min-width: 200px;
}

.rc-input {
    width: 220px;
    min-width: 220px;
}

    .rc-input .mud-picker {
        width: 220px;
    }

/* Tablet portrait and below: the label/field rows wrap instead of holding
   their fixed desktop widths past the dialog edge. */
@media (max-width: 1023.98px) {
    .qs-row,
    .rc-row {
        flex-wrap: wrap;
    }

    .qs-input {
        width: min(300px, 100%);
        min-width: 0;
    }

    .rc-label {
        width: min(200px, 100%);
        min-width: 0;
    }

    .rc-input,
    .rc-input .mud-picker {
        width: min(220px, 100%);
        min-width: 0;
    }
}

/* =========================================================================
   SelectReprintDocumentTypeDialog — keyboard-navigable tile grid
   ========================================================================= */
.dt-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pos-space-6);
    padding: var(--pos-space-2) var(--pos-space-4);
}

.dt-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--pos-space-4);
    padding: var(--pos-space-9) var(--pos-space-6);
    border: 2px solid var(--pos-border-light);
    border-radius: var(--pos-radius-lg);
    cursor: pointer;
    user-select: none;
}

    .dt-tile:hover {
        border-color: var(--pos-primary);
    }

.dt-tile-selected {
    border-color: var(--pos-primary);
    background-color: var(--pos-primary-soft);
}

.dt-tile-icon {
    font-size: 32px;
    line-height: 1;
}

.dt-tile-label {
    font-weight: var(--pos-weight-medium);
}

/* =========================================================================
   SelectTransactionForReprintDialog
   ========================================================================= */
.grid-container .selected-row {
    background-color: var(--pos-surface-accent) !important;
}

    .grid-container .selected-row:hover {
        background-color: var(--pos-chrome-2) !important;
    }

    .grid-container .selected-row td {
        background-color: var(--pos-surface-accent) !important;
        color: var(--pos-text-on-dark) !important;
    }

.grid-container .mud-table-root {
    border: 1px solid var(--pos-neutral-200);
    border-radius: var(--pos-radius);
    overflow: hidden;
}

.sort-hint {
    display: flex;
    align-items: center;
    gap: var(--pos-space-8);
    font-size: 0.78rem;
    color: var(--pos-neutral-500);
    padding: 0 var(--pos-space-2);
    flex-wrap: wrap;
}

    .sort-hint span:first-child {
        font-weight: var(--pos-weight-bold);
        color: var(--pos-chrome);
    }
/* =========================================================================
   KeyboardShortcutDialog — command lookup (root: .command-lookup-dialog)
   ========================================================================= */
.command-lookup-dialog .mud-dialog-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.command-lookup-dialog .dialog-body,
.command-lookup-dialog .ks-grid-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.command-lookup-dialog .dialog-header-fixed {
    display: flex;
    align-items: center;
    gap: var(--pos-space-8);
    margin-bottom: var(--pos-space-5);
    flex: 0 0 auto;
}

.ks-category {
    width: 200px;
}

    .ks-category .mud-input-control {
        width: 100%;
    }

.ks-search {
    flex: 1;
}

.command-lookup-dialog .grid-container {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* ---- Command grid ------------------------------------------------------ */
.shortcut-grid {
    cursor: pointer;
    font-size: var(--pos-font-lg);
}

.command-lookup-dialog .grid-container .mud-table-root {
    border: none;
    border-radius: 0;
    overflow: visible;
}

.command-lookup-dialog .grid-container .mud-table-container {
    border: 1px solid var(--pos-neutral-200);
    border-radius: var(--pos-radius);
}

.shortcut-grid .mud-table-head .mud-table-cell {
    background-color: var(--pos-surface-accent) !important;
    color: var(--pos-text-on-dark) !important;
    font-weight: var(--pos-weight-semibold);
    position: sticky;
    top: 0;
    z-index: var(--pos-z-raised);
}

    .shortcut-grid .mud-table-head .mud-table-cell * {
        color: var(--pos-text-on-dark) !important;
    }

/* ---- Shortcut column — one chip per key -------------------------------- */
.shortcut-chips {
    display: flex;
    gap: var(--pos-space-2);
}

.shortcut-chip {
    background-color: var(--pos-neutral-200);
    padding: var(--pos-space-1) var(--pos-space-4);
    border-radius: var(--pos-radius);
    font-size: var(--pos-font-md);
    font-weight: var(--pos-weight-medium);
}

.command-lookup-dialog .selected-row .shortcut-chip {
    background-color: var(--pos-overlay-light-2);
    color: var(--pos-text-on-dark);
}

.command-lookup-dialog .btn-cancel {
    margin-right: var(--pos-space-4);
}

/* =========================================================================
   TenderResultsDialog
   ========================================================================= */
.tender-results-body {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-7);
    padding: var(--pos-space-9);
    background: var(--pos-surface-muted);
    min-width: 320px;
}

/* Outcome banner */
.results-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pos-space-5);
    padding: var(--pos-space-6) var(--pos-space-9);
    border: 1px solid var(--pos-primary);
    border-radius: var(--pos-radius-lg);
    background: var(--pos-primary-bg);
    color: var(--pos-primary-dark);
    font-size: var(--pos-font-2xl);
    font-weight: var(--pos-weight-bold);
}

    .results-banner .mud-icon-root {
        font-size: 24px;
        width: 24px;
        height: 24px;
        color: var(--pos-primary);
    }

/* Total tendered / refunded — the headline figure */
.results-amount-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pos-space-4);
    padding: var(--pos-space-9);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-lg);
    background: var(--pos-surface);
    box-shadow: var(--pos-shadow-sm);
}

.results-amount-caption {
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pos-text-muted);
}

.results-amount-value {
    display: flex;
    align-items: baseline;
    gap: var(--pos-space-3);
    font-size: 32px;
    font-weight: var(--pos-weight-bold);
    color: var(--pos-primary-dark);
    line-height: 1.1;
}

/* Currency code — secondary to the figure it annotates */
.results-amount-currency {
    font-size: var(--pos-font-lg);
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-text-muted);
}

/* Change due / status tiles */
.results-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--pos-space-6);
}

.results-stat {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-3);
    padding: var(--pos-space-6) var(--pos-space-7);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-lg);
    background: var(--pos-surface);
}

.results-stat-label {
    font-size: var(--pos-font-sm);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pos-text-muted);
}

.results-stat-value {
    display: flex;
    align-items: baseline;
    gap: var(--pos-space-3);
    font-size: var(--pos-font-2xl);
    font-weight: var(--pos-weight-bold);
    color: var(--pos-text);
}

.results-stat-currency {
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-text-muted);
}

.results-stat.is-change {
    border-color: var(--pos-primary);
    background: var(--pos-primary-bg);
}

    .results-stat.is-change .results-stat-value {
        color: var(--pos-primary-dark);
    }

.results-chip-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--pos-space-6);
}

/* Payment / change types as pills */
.results-chip-group {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-4);
}

.results-chip-label {
    font-size: var(--pos-font-sm);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pos-text-muted);
}

.results-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pos-space-4);
}

.results-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--pos-space-4);
    padding: var(--pos-space-3) var(--pos-space-7);
    border: 1px solid var(--pos-primary);
    border-radius: 999px;
    background: var(--pos-primary-bg);
    color: var(--pos-primary-dark);
    font-size: var(--pos-font-lg);
    font-weight: var(--pos-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .results-chip .mud-icon-root {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }

/* OK — the filled brand button, as on TenderAmountDialog's Accept */
.tender-results-dialog .btn-primary {
    padding: var(--pos-space-5) var(--pos-space-11);
    border-radius: var(--pos-radius-lg);
    font-size: var(--pos-font-lg);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.3px;
    min-height: 40px;
    background-color: var(--pos-primary);
    color: var(--pos-text-on-dark);
    border: 1px solid var(--pos-primary-border);
    box-shadow: var(--pos-shadow-sm);
    transition: var(--pos-transition);
}

    .tender-results-dialog .btn-primary:hover {
        background-color: var(--pos-primary-dark);
        border-color: var(--pos-primary-dark);
        transform: translateY(-2px);
    }

    .tender-results-dialog .btn-primary:active {
        transform: translateY(0);
        box-shadow: var(--pos-shadow-sm);
    }

/* =========================================================================
   TransactionReceiptDialog
   ========================================================================= */
.receipt-dialog-body {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-7);
    padding: var(--pos-space-4) 0;
}

.receipt-caption {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
    font-size: var(--pos-font-sm);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pos-text-muted);
}

    .receipt-caption .mud-icon-root {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }

.receipt-action-buttons {
    display: flex;
    gap: var(--pos-space-7);
}

/* Belt-and-suspenders alongside the :disabled/:not(:disabled) guards below: while a print/email
   is in flight, the buttons shouldn't respond to hover at all, not just clicks. */
.receipt-action-buttons.is-processing {
    pointer-events: none;
}

/* Action tiles: icon chip over a label and a one-line hint */
.receipt-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pos-space-3);
    padding: var(--pos-space-8) var(--pos-space-7);
    font-family: inherit;
    color: var(--pos-text-on-dark);
    background-color: var(--pos-primary);
    border: 1px solid var(--pos-primary-border);
    border-radius: var(--pos-radius-lg);
    box-shadow: var(--pos-shadow-sm);
    cursor: pointer;
    transition: var(--pos-transition);
}

    .receipt-btn:hover:not(:disabled) {
        background-color: var(--pos-primary-dark);
        border-color: var(--pos-primary-dark);
        transform: translateY(-2px);
        box-shadow: var(--pos-shadow-lg);
    }

    .receipt-btn:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: var(--pos-shadow-sm);
    }

    .receipt-btn:disabled {
        background-color: var(--pos-primary-light);
        border-color: var(--pos-primary-light);
        box-shadow: none;
        opacity: 0.7;
        cursor: not-allowed;
    }

    /* These are plain buttons, so base.css's global "button:focus { outline: 0 }" hides keyboard
       focus on them. The ring sits clear of the filled tile on the dialog's own background. */
    .receipt-btn:focus-visible {
        outline: 2px solid var(--pos-selected);
        outline-offset: 2px;
    }

.receipt-btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--pos-overlay-light-2);
}

    .receipt-btn-icon .mud-icon-root {
        font-size: 22px;
        width: 22px;
        height: 22px;
        color: var(--pos-text-on-dark);
    }

.receipt-btn-label {
    font-size: var(--pos-font-xl);
    font-weight: var(--pos-weight-bold);
}

.receipt-btn-hint {
    font-size: var(--pos-font-base);
    opacity: 0.85;
}

/* Email field card */
.receipt-email-section {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-4);
    padding: var(--pos-space-7);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-lg);
    background: var(--pos-surface);
    box-shadow: var(--pos-shadow-sm);
}

.receipt-email-label {
    font-size: var(--pos-font-sm);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pos-text-muted);
}

/* Done — quiet neutral outline, as on the tender dialogs' Cancel */
.transaction-receipt-dialog .btn-cancel {
    padding: var(--pos-space-5) var(--pos-space-9);
    border-radius: var(--pos-radius-lg);
    font-size: var(--pos-font-lg);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.3px;
    min-height: 40px;
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border: 1px solid var(--pos-neutral-300);
    box-shadow: var(--pos-shadow-sm);
    transition: var(--pos-transition);
}

    .transaction-receipt-dialog .btn-cancel:hover {
        background-color: var(--pos-neutral-100);
        border-color: var(--pos-neutral-400);
        transform: translateY(-2px);
    }

    .transaction-receipt-dialog .btn-cancel:active {
        transform: translateY(0);
        box-shadow: var(--pos-shadow-sm);
    }

/* This dialog renders its own close button (inside TitleContent, wired to _IsProcessing — see
   TransactionReceiptDialog.razor) instead of MudDialogProvider's global default
   (MainLayout.razor: CloseButton="true"), because that default has no per-instance disabled
   state. The rule below force-hides MudBlazor's own auto-rendered close button specifically in
   this dialog, so only the custom one (a different class, .receipt-dialog-close-btn) is ever
   shown or clickable here — regardless of whether DialogOptions.CloseButton=false is honored. */
.transaction-receipt-dialog .mud-button-close {
    display: none !important;
}

.transaction-receipt-dialog .receipt-dialog-close-btn {
    padding: 10px;
    border-radius: var(--pos-radius);
    background: var(--pos-primary);
    border-color: var(--pos-primary);
    color: var(--pos-text-on-dark);
}

/* =========================================================================
   Search-method dialogs (RecallQuoteSearchDialog, and the .ssh-* rules shared
   by both the Store and Customer sales-history dialogs) 
   ========================================================================= */
.rq-form,
.ssh-form {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-7);
}

.rq-row,
.ssh-row {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
}

.rq-method {
    width: 170px;
    min-width: 170px;
}

.ssh-method {
    width: 200px;
    min-width: 200px;
}

.rq-input {
    width: 360px;
    min-width: 360px;
}

.ssh-input {
    flex: 1 1 auto;
    min-width: 380px;
}

.rq-dates {
    display: flex;
    align-items: center;
    gap: var(--pos-space-2);
    width: 360px;
}

.rq-date {
    flex: 1 1 0;
    min-width: 0;
}

.ssh-dates {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
}

.ssh-date {
    flex: 0 0 190px;
    width: 170px;
    min-width: 0;
}

.ssh-count {
    display: flex;
    align-items: center;
    gap: var(--pos-space-8);
}

.ssh-count-field {
    flex: 0 0 110px;
    width: 110px;
}

/* Tablet portrait and below: method label and its input wrap onto two lines
   when the dialog is narrower than their combined fixed widths. */
@media (max-width: 1023.98px) {
    .rq-row,
    .ssh-row {
        flex-wrap: wrap;
    }

    .rq-method,
    .ssh-method {
        min-width: 0;
    }

    .rq-input,
    .rq-dates {
        width: min(360px, 100%);
        min-width: 0;
    }

    .ssh-input {
        min-width: min(380px, 100%);
    }

    .ssh-dates {
        flex-wrap: wrap;
    }
}

/* =========================================================================
   Customer/Store transaction result 
   ========================================================================= */

.transactions-grid .mud-table-head .mud-table-cell {
    background-color: var(--pos-surface-accent) !important;
    color: var(--pos-text-on-dark) !important;
    font-weight: var(--pos-weight-medium);
    border-right: 1px solid var(--pos-chrome-2);
    position: sticky;
    top: 0;
    z-index: var(--pos-z-raised);
}

    .transactions-grid .mud-table-head .mud-table-cell:last-child {
        border-right: none;
    }

    .transactions-grid .mud-table-head .mud-table-cell * {
        color: var(--pos-text-on-dark) !important;
    }

.transactions-grid .mud-table-body .mud-table-row:hover {
    background-color: var(--pos-surface-muted) !important;
}

.transactions-grid .mud-table-body .mud-table-row.tx-row-selected,
.transactions-grid .mud-table-body .mud-table-row.tx-row-selected:hover {
    background-color: var(--pos-blue-bg) !important;
    border-left: 4px solid var(--pos-info);
}

    .transactions-grid .mud-table-body .mud-table-row.tx-row-selected .mud-table-cell {
        color: var(--pos-text) !important;
        font-weight: var(--pos-weight-medium);
    }

/* =========================================================================
   Shared dialog chrome — the "Customer: <name>" subject line and the group
   box used by the Customer/Store sales-history dialogs (Criteria) and by
   TransactionInfoDialog (Details / Items / Payments / Shipping)
   ========================================================================= */
.dialog-subject {
    display: flex;
    gap: var(--pos-space-4);
    margin-bottom: var(--pos-space-8);
}

.dialog-hint {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
    margin-bottom: var(--pos-space-5);
    color: var(--pos-text-muted);
}

    .dialog-hint .mud-icon-root {
        color: var(--pos-text-muted);
        flex: 0 0 auto;
    }

.dialog-fieldset {
    border: 1px solid var(--pos-neutral-300);
    border-radius: var(--pos-radius);
    padding: var(--pos-space-6) var(--pos-space-8);
}

    .dialog-fieldset > legend {
        padding: 0 var(--pos-space-3);
        font-size: 0.85rem;
        color: var(--pos-text-muted);
    }

/* =========================================================================
   TransactionInfoDialog
   ========================================================================= */
.ti-dialog {
    max-width: 980px;
}

.ti-body {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-8);
    max-height: 72vh;
    max-height: 72dvh;
    overflow-y: auto;
    padding-right: var(--pos-space-2);
}

/* Tablet portrait and below: the items / payments tables scroll sideways
   inside their frame rather than widening the dialog. */
@media (max-width: 1023.98px) {
    .ti-table-wrap {
        overflow-x: auto;
    }
}

.ti-loading {
    display: flex;
    justify-content: center;
    padding: var(--pos-space-11);
}

/* Footer action bar: shortcut note (left) · action buttons (right). The buttons keep their natural
   width and single-line labels whatever else is on the row - letting them shrink wrapped "Copy
   Sale" onto two lines and pushed the row off the bottom of the dialog. */
.ti-dialog .mud-dialog-actions {
    flex-wrap: nowrap;
    align-items: center;
}

    .ti-dialog .mud-dialog-actions .mud-button-root {
        flex: 0 0 auto;
        white-space: nowrap;
    }

/* The shortcut note is held against the row's left edge by margin-right:auto, and is the only
   thing on the row allowed to give: on a narrow dialog it truncates (the full text stays as the
   hover title) rather than squeezing the buttons. */
.ti-actions-hint {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: auto;
    margin-bottom: 0;
}

    .ti-actions-hint .mud-typography {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.ti-dialog .mud-input.mud-input-outlined {
    background-color: var(--pos-neutral-50);
}

.ti-columns {
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    gap: var(--pos-space-3) var(--pos-space-10);
}

.ti-column {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-3);
}

.ti-row {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
}

.ti-label {
    flex: 0 0 auto;
    width: 104px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: var(--pos-weight-medium);
    color: var(--pos-text);
}

.ti-label-inline {
    width: auto;
    min-width: 56px;
}

.ti-column .ti-label-inline {
    width: 92px;
    min-width: 92px;
}

.ti-field {
    flex: 1 1 auto;
    min-width: 0;
}

.ti-field-md {
    flex: 0 0 150px;
    width: 150px;
}

.ti-field-grow {
    flex: 1 1 0;
    min-width: 0;
}

.ti-field-grow-2 {
    flex: 2 1 0;
    min-width: 0;
}

.ti-shipping {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-3);
}

.ti-table-wrap {
    border: 1px solid var(--pos-neutral-200);
    border-radius: var(--pos-radius);
    overflow: hidden;
}

.ti-table-scroll {
    max-height: 260px;
    overflow-y: auto;
}

.ti-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pos-font-md);
}

    .ti-table thead th {
        position: sticky;
        top: 0;
        z-index: var(--pos-z-raised);
        background-color: var(--pos-surface-accent);
        color: var(--pos-text-on-dark);
        font-weight: var(--pos-weight-medium);
        text-align: left;
        padding: var(--pos-space-3) var(--pos-space-4);
        border-right: 1px solid var(--pos-chrome-2);
        white-space: nowrap;
    }

        .ti-table thead th:last-child {
            border-right: none;
        }

    .ti-table td {
        padding: var(--pos-space-2) var(--pos-space-4);
        color: var(--pos-text);
    }

        .ti-table th.ti-num,
        .ti-table td.ti-num {
            text-align: right;
        }

        .ti-table td.ti-uom {
            text-align: center;
        }

.ti-item-row td {
    padding-bottom: 0;
    border-top: 1px solid var(--pos-neutral-200);
}

.ti-table tbody tr.ti-item-row:first-child td {
    border-top: none;
}

.ti-item-detail td {
    padding-top: 0;
    color: var(--pos-text-muted);
    font-size: var(--pos-font-base);
}

.ti-item-desc {
    font-style: italic;
}

.ti-item-note td {
    padding-top: 0;
    background-color: var(--pos-success-bg);
    color: var(--pos-text-muted);
    font-size: var(--pos-font-base);
}

/* A line comment can span several lines as entered; keep its breaks. */
.ti-item-comment {
    white-space: pre-wrap;
}

.ti-item-refund td {
    background-color: var(--pos-danger-bg);
}

.ti-payment-row td {
    border-bottom: 1px solid var(--pos-neutral-200);
}

.ti-table tbody tr:last-child td {
    border-bottom: none;
}

.ti-empty {
    font-style: italic;
    color: var(--pos-text-muted);
    padding: var(--pos-space-2) 0;
}

/* =========================================================================
   DrawerCountDialog
   The .mud-dialog-content compaction was bare under ::deep; it is anchored
   to .drawer-count-dialog (added to the MudDialog) so it cannot reach
   every other dialog in the app.
   ========================================================================= */
.drawer-count-dialog .mud-dialog-content {
    padding-top: var(--pos-space-4);
    padding-bottom: var(--pos-space-4);
}

.dc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--pos-space-3);
    padding-bottom: var(--pos-space-3);
    border-bottom: 1px solid var(--pos-border-light);
    font-size: var(--pos-font-lg);
}

.dc-header-label {
    color: var(--pos-text-muted);
}

.dc-header-value {
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-text);
}

.drawer-count-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--pos-space-1);
    font-size: var(--pos-font-lg);
}

    .drawer-count-table thead th {
        text-align: left;
        font-weight: var(--pos-weight-semibold);
        text-transform: uppercase;
        font-size: var(--pos-font-base);
        letter-spacing: .04em;
        color: var(--pos-text-muted);
        padding: var(--pos-space-2) var(--pos-space-6);
        border-bottom: 2px solid var(--pos-border-light);
    }

    .drawer-count-table th.num,
    .drawer-count-table td.num {
        text-align: right;
    }

    .drawer-count-table tbody td {
        padding: var(--pos-space-2) var(--pos-space-6);
        border-bottom: 1px solid var(--pos-border-light);
        font-variant-numeric: tabular-nums;
    }

    .drawer-count-table tbody tr.dc-clickable {
        cursor: pointer;
    }

/* Touch stand-in for double-clicking the cash row (denomination count).
   Hidden for mouse/keyboard, where the double-click is unchanged. */
.dc-count-btn {
    display: none;
}

@media (pointer: coarse) {
    .dc-count-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin-left: var(--pos-space-4);
        vertical-align: middle;
        padding: 0;
        border: 1px solid var(--pos-border-input);
        border-radius: var(--pos-radius);
        background: var(--pos-surface);
        color: var(--pos-primary-dark);
        cursor: pointer;
    }

        .dc-count-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        .dc-count-btn:focus-visible {
            outline: 2px solid var(--pos-selected);
            outline-offset: 2px;
        }

    .dc-cash-input {
        min-height: 44px;
    }
}

    .drawer-count-table tbody tr:hover {
        background: var(--pos-scrim-05);
    }

.dc-cash-input {
    width: 100px;
    text-align: right;
    padding: var(--pos-space-2) var(--pos-space-4);
    border: 1px solid var(--pos-border-input);
    border-radius: var(--pos-radius);
    font-size: var(--pos-font-lg);
    font-variant-numeric: tabular-nums;
}

    .dc-cash-input:focus {
        outline: none;
        border-color: var(--pos-primary);
        box-shadow: 0 0 0 2px var(--pos-primary-soft);
    }

.dc-muted {
    color: var(--pos-neutral-400);
}

.drawer-count-table tbody tr.dc-error-row td {
    color: var(--pos-danger);
    font-weight: var(--pos-weight-semibold);
}

.dc-over {
    color: var(--pos-success-strong);
    font-weight: var(--pos-weight-semibold);
}

.dc-short {
    color: var(--pos-danger);
    font-weight: var(--pos-weight-semibold);
}

/* Summary panel */
.dc-summary {
    margin-top: var(--pos-space-4);
    padding: var(--pos-space-4) var(--pos-space-7);
    background: var(--pos-surface-muted);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-md);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1px var(--pos-space-12);
    font-size: var(--pos-font-md);
}

    .dc-summary .label {
        color: var(--pos-text-muted);
    }

    .dc-summary .value {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .dc-summary .total-label,
    .dc-summary .total-value {
        font-weight: var(--pos-weight-bold);
        color: var(--pos-text);
        border-top: 1px solid var(--pos-border-light);
        padding-top: var(--pos-space-2);
        margin-top: var(--pos-space-1);
    }

.dc-notes {
    margin-top: var(--pos-space-3);
}

/* =========================================================================
   TenderDialog  (root: .tender-dialog on the MudDialog)

   Dropped as dead — the dialog was converted from a hand-rolled modal to
   MudDialog and this chrome no longer exists in markup:
     .tender-modal-overlay / -content / -header, .close-button,
     .tender-actions, .btn-tender-action, .btn-tender-cancel,
     .payment-method-btn, .green, .yellow
   The .mud-table-* overrides were bare under ::deep and are anchored to
   .tender-dialog so they cannot restyle every Mud table in the app.
   ========================================================================= */
.refund-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pos-space-5);
    background: var(--pos-danger-strong);
    color: var(--pos-text-on-dark);
    font-size: var(--pos-font-xl);
    font-weight: var(--pos-weight-bold);
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: var(--pos-radius-lg);
    padding: var(--pos-space-3) 0;
}

.refund-indicator__icon {
    font-size: 24px !important;
    color: var(--pos-text-on-dark) !important;
}

/* The dialog is opened full-height, so the content region has to flex and let
   each pane scroll on its own — otherwise the body keeps its natural height
   and leaves a dead white band above the action bar. */
.tender-dialog .mud-dialog-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.tender-modal-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--pos-surface-muted);
}

/* ---- Left section ------------------------------------------------------ */
.tender-left-section {
    width: 35%;
    padding: var(--pos-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-5);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--pos-surface-muted);
    border-right: 1px solid var(--pos-border-light);
}

    /* Never squash the cards when the pane is short (stacked tablet layout) -
       their overflow:hidden would clip the Total Owed / Remaining strips. The
       pane scrolls instead. */
    .tender-left-section > * {
        flex-shrink: 0;
    }

/* Light cards: the border carries the card edge now that both the card and the
   pane behind it are white. */
.tender-totals,
.payment-status {
    background: var(--pos-surface);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-lg);
    padding: var(--pos-space-6) var(--pos-space-7);
    color: var(--pos-text);
    box-shadow: var(--pos-shadow-sm);
    /* Clips the Total Owed strip to the card's rounded bottom corners */
    overflow: hidden;
}

.total-row,
.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pos-space-2) 0;
    font-size: var(--pos-font-md);
    font-weight: var(--pos-weight-semibold);
}

    /* Values — full black by default */
    .total-row span:last-child,
    .status-row span:last-child {
        color: var(--pos-text);
        font-size: var(--pos-font-md);
    }

    /* Discount row — mirrors the sale screen's .total-line.discount-line so the same figure
       reads the same way on both screens. Both spans are named because the default value
       colour above would otherwise win over the inherited one. */
    .total-row.discount-row span:first-child,
    .total-row.discount-row span:last-child {
        color: var(--pos-danger);
    }

    .total-row.highlight,
    .status-row.highlight {
        background: var(--pos-chrome);
        font-weight: var(--pos-weight-semibold);
        margin: var(--pos-space-5) calc(-1 * var(--pos-space-7)) calc(-1 * var(--pos-space-6));
        padding: var(--pos-space-4) var(--pos-space-7);
    }

        .total-row.highlight span:first-child,
        .total-row.highlight span:last-child,
        .status-row.highlight span:first-child,
        .status-row.highlight span:last-child {
            color: var(--pos-text-on-dark);
        }

/* ---- Payments table — light theme, accent header ----------------------- */
.tender-dialog .mud-table {
    background: var(--pos-surface) !important;
    box-shadow: var(--pos-shadow-sm) !important;
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-lg);
    overflow: hidden;
}

.tender-dialog .mud-table-head .mud-table-cell {
    background: var(--pos-chrome) !important;
    color: var(--pos-text-on-dark) !important;
    font-size: var(--pos-font-base) !important;
    font-weight: var(--pos-weight-semibold) !important;
    border-bottom: 2px solid var(--pos-chrome-2) !important;
    padding: var(--pos-space-4) var(--pos-space-6) !important;
}

.tender-dialog .mud-table-body .mud-table-row {
    background: var(--pos-surface) !important;
}

    .tender-dialog .mud-table-body .mud-table-row:nth-child(even) {
        background: var(--pos-neutral-50) !important;
    }

.tender-dialog .mud-table-body .mud-table-cell {
    color: var(--pos-text) !important;
    font-size: var(--pos-font-base) !important;
    border-bottom: 1px solid var(--pos-border-light) !important;
    background: inherit !important;
    padding: var(--pos-space-4) var(--pos-space-6) !important;
}

.tender-dialog .mud-table-body .mud-table-row:hover .mud-table-cell {
    background: var(--pos-neutral-100) !important;
}

.tender-dialog .mud-table-row.mud-table-row-selected .mud-table-cell {
    background: var(--pos-primary-soft) !important;
}

/* Empty state */
.tender-dialog .mud-table .mud-table-empty-row td {
    background: transparent !important;
    color: var(--pos-text-muted) !important;
    font-style: italic;
    text-align: center;
    padding: var(--pos-space-9) !important;
}

/* ---- Right section — payment methods, quick cash pinned below ---------- */
.tender-right-section {
    width: 65%;
    padding: var(--pos-space-9);
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-9);
    min-height: 0;
    /* Faint canvas so the white panels on top of it read as raised cards. */
    background: var(--pos-surface-muted);
}

/* Same panel shell as quick cash below: accent caption bar over a white body.
   Takes all the height quick cash doesn't need; the grid inside scrolls so a
   long list of payment types never pushes the pane past the dialog. */
.payment-methods-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-lg);
    background: var(--pos-surface);
    box-shadow: var(--pos-shadow-sm);
    overflow: hidden;
}

    /* Taller than the quick-cash caption so the icon chip has room, and it carries
   the heavier type — this is the primary panel of the two. Scoped to the section
   so it outranks the shared caption rule further down regardless of order. */
    .payment-methods-section .payment-methods-label {
        display: flex;
        align-items: center;
        gap: var(--pos-space-5);
        padding: var(--pos-space-5) var(--pos-space-7);
        font-size: var(--pos-font-lg);
    }

.panel-label-icon {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--pos-overlay-light-2);
    color: var(--pos-text-on-dark);
}

    .panel-label-icon .mud-icon-root {
        font-size: 17px;
        width: 17px;
        height: 17px;
    }

/* Sits above the scroll area, so it stays put while the tiles scroll */
.payment-methods-hint {
    flex: 0 0 auto;
    margin: 0;
    padding: var(--pos-space-6) var(--pos-space-6) 0;
    font-size: var(--pos-font-base);
    line-height: 1.55;
    color: var(--pos-text-muted);
}

.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pos-space-7);
    align-content: start;
    padding: var(--pos-space-6);
    min-height: 0;
    overflow-y: auto;
}

    /* Method tiles: white card with a leading icon chip, left-aligned label and a
   lift on hover — same treatment as the Home menu cards. The height tracks the
   viewport so the tiles fill a tall dialog without overflowing a short one. */
    .payment-methods-grid .payment-method-btn {
        min-height: clamp(52px, 8vh, 76px);
        padding: var(--pos-space-5) var(--pos-space-7);
        border: 1px solid var(--pos-neutral-300);
        border-radius: var(--pos-radius-md);
        background: var(--pos-neutral-50);
        color: var(--pos-text);
        font-size: var(--pos-font-lg);
        font-weight: var(--pos-weight-semibold);
        letter-spacing: 0.01em;
        text-align: left;
        text-transform: none;
        box-shadow: var(--pos-shadow-sm);
        transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .payment-methods-grid .payment-method-btn:hover:not(:disabled),
        .payment-methods-grid .payment-method-btn:focus-visible {
            background: var(--pos-surface);
            border-color: var(--pos-primary);
            transform: translateY(-2px);
            box-shadow: var(--pos-shadow-lg);
        }

        .payment-methods-grid .payment-method-btn:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: var(--pos-shadow-sm);
        }

        .payment-methods-grid .payment-method-btn:disabled {
            opacity: 0.55;
            box-shadow: none;
        }

        /* MudButton wraps its content in .mud-button-label; lay the tile out there */
        .payment-methods-grid .payment-method-btn .mud-button-label {
            display: flex;
            align-items: center;
            gap: var(--pos-space-5);
            width: 100%;
            white-space: normal;
        }

.pm-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--pos-primary-soft);
    color: var(--pos-primary-dark);
}

    .pm-icon .mud-icon-root {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }

.pm-label {
    min-width: 0;
}

/* ---- Quick cash -------------------------------------------------------- */
/* margin-top:auto keeps it on the bottom edge of the pane even when the methods
   above are short (or absent, e.g. no payment types configured). */
.quick-cash-section {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    margin-top: auto;
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-lg);
    background: var(--pos-surface);
    box-shadow: var(--pos-shadow-sm);
    overflow: hidden;
}

/* Caption bar shared by both right-pane panels */
.quick-cash-label,
.payment-methods-label {
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-text-on-dark);
    background: var(--pos-surface-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--pos-space-3) var(--pos-space-6);
    flex: 0 0 auto;
}

.quick-cash-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pos-space-5);
    padding: var(--pos-space-6);
}

.btn-quick-cash {
    background: var(--pos-success-strong) !important;
    color: var(--pos-text-on-dark) !important;
    border: 2px solid var(--pos-success) !important;
    border-radius: var(--pos-radius-lg) !important;
    font-size: 15px !important;
    font-weight: var(--pos-weight-semibold) !important;
    min-width: 72px !important;
    min-height: clamp(40px, 6vh, 56px) !important;
    padding: var(--pos-space-3) var(--pos-space-7) !important;
    letter-spacing: 0.3px;
}

    .btn-quick-cash:hover {
        background: var(--pos-success) !important;
        border-color: var(--pos-success) !important;
        transform: translateY(-2px);
        box-shadow: var(--pos-shadow-md) !important;
    }

    .btn-quick-cash:active {
        transform: translateY(0);
        box-shadow: var(--pos-shadow-sm) !important;
    }

/* ---- Scrollbar --------------------------------------------------------- */
.tender-left-section::-webkit-scrollbar {
    width: 6px;
}

.tender-left-section::-webkit-scrollbar-track {
    background: var(--pos-neutral-100);
}

.tender-left-section::-webkit-scrollbar-thumb {
    background: var(--pos-neutral-300);
    border-radius: var(--pos-radius-sm);
}

    .tender-left-section::-webkit-scrollbar-thumb:hover {
        background: var(--pos-neutral-400);
    }

/* ---- Responsive -------------------------------------------------------- */
/* Tablet landscape (>=1024px) keeps the 35/65 side-by-side panes; only tablet
   portrait and below stack them. */
@media (max-width: 1023.98px) {
    .tender-modal-body {
        flex-direction: column;
    }

    .tender-left-section,
    .tender-right-section {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--pos-blue);
    }

    .tender-left-section {
        max-height: 40vh;
        max-height: 40dvh;
    }

    .tender-right-section {
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    .tender-left-section,
    .tender-right-section {
        padding: var(--pos-space-7);
    }

    .payment-methods-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pos-space-6);
    }
}

@media (max-width: 480px) {
    .payment-methods-grid {
        grid-template-columns: 1fr;
        gap: var(--pos-space-5);
    }
}

/* =========================================================================
   TenderAmountDialog  (root: .tender-amount-dialog on the MudDialog)

   Dropped as dead — this dialog is now a MudDialog and the hand-rolled
   modal chrome and numeric keypad no longer exist in markup:
     .tender-amount-overlay / -content / -header / -footer, .close-button,
     .keypad-section / -grid / -btn, .clear-btn, .amount-display,
     .amount-input, .currency-label, .payment-instructions,
     .btn-force, .btn-accept
   Also dropped when the card layout replaced the stacked read-only fields:
     .payment-method-label (now .payment-method-chip), .amount-fields,
     .fx-field-row, .fx-home-field (the home-currency equivalent is now the
     .amount-stat-home / .tender-amount-home line)
   .btn-cancel is anchored to .tender-amount-dialog: the same class is
   applied to Cancel buttons in AddItem / ChangeItem / PaymentOnAccount,
   which must keep the shared components.css treatment.
   ========================================================================= */
.tender-amount-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    background: var(--pos-surface-muted);
}

/* Faint canvas — the chip, amount card, tiles and prompt card all sit on it */
.amount-left-section {
    flex: 1;
    padding: var(--pos-space-9);
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-7);
    background: var(--pos-surface-muted);
}

/* Payment method: outlined brand pill instead of a full-width banner */
.payment-method-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--pos-space-4);
    padding: var(--pos-space-3) var(--pos-space-7);
    border: 1px solid var(--pos-primary);
    border-radius: 999px;
    background: var(--pos-primary-bg);
    color: var(--pos-primary-dark);
    font-size: var(--pos-font-lg);
    font-weight: var(--pos-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .payment-method-chip .mud-icon-root {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }

/* ---- Tender amount card ------------------------------------------------ */
/* The entry field is always editable — no display/edit toggle. The currency
   code rides in the field's end adornment; there is no currency symbol. */
.tender-amount-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pos-space-5);
    padding: var(--pos-space-9);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-lg);
    background: var(--pos-surface);
    box-shadow: var(--pos-shadow-sm);
}

.tender-amount-caption {
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pos-text-muted);
}

.tender-amount-input {
    width: 280px;
    max-width: 100%;
    margin: 0;
}

    /* Big, centred figure — the input itself, so it stays keyboard-editable */
    .tender-amount-input input {
        font-size: 32px;
        font-weight: var(--pos-weight-bold);
        text-align: center;
        color: var(--pos-primary-dark);
    }

    .tender-amount-input .mud-input-adornment {
        font-size: var(--pos-font-lg);
        font-weight: var(--pos-weight-semibold);
        color: var(--pos-text-muted);
    }

/* Home-currency equivalent of the entered amount (foreign payments only) */
.tender-amount-home {
    font-size: var(--pos-font-md);
    color: var(--pos-text-muted);
}

/* ---- Remaining / Change tiles ------------------------------------------ */
.amount-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--pos-space-6);
}

.amount-stat {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-3);
    padding: var(--pos-space-6) var(--pos-space-7);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-lg);
    background: var(--pos-surface);
}

.amount-stat-label {
    font-size: var(--pos-font-sm);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pos-text-muted);
}

.amount-stat-value {
    display: flex;
    align-items: baseline;
    gap: var(--pos-space-3);
    font-size: var(--pos-font-2xl);
    font-weight: var(--pos-weight-bold);
    color: var(--pos-text);
}

/* Currency code on every field, per the home-currency requirement */
.amount-stat-currency {
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-text-muted);
}

.amount-stat-home {
    font-size: var(--pos-font-sm);
    color: var(--pos-text-muted);
}

/* Change reads as a positive amount owed back to the customer */
.amount-stat.is-change {
    border-color: var(--pos-primary);
    background: var(--pos-primary-bg);
}

    .amount-stat.is-change .amount-stat-value {
        color: var(--pos-primary-dark);
    }

/* ---- Prompt fields ----------------------------------------------------- */
/* Payment-type prompts, grouped in the same white card as the panels above */
.amount-prompts {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-6);
    padding: var(--pos-space-7);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-lg);
    background: var(--pos-surface);
    box-shadow: var(--pos-shadow-sm);
}

.amount-field {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-3);
}

    /* Same caption treatment as .amount-stat-label */
    .amount-field label {
        font-size: var(--pos-font-sm);
        font-weight: var(--pos-weight-semibold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--pos-text-muted);
    }

.required-mark {
    color: var(--pos-danger-strong);
    font-weight: var(--pos-weight-bold);
}

/* Credit card terminal hint — full-width, sits above the action buttons */
.card-payment-hint {
    margin: var(--pos-space-4) var(--pos-space-9) 0;
}

/* ---- Actions ----------------------------------------------------------- */
/* Accept is the filled brand button, Cancel the quiet outline beside it. */
.tender-amount-dialog .btn-primary,
.tender-amount-dialog .btn-cancel {
    padding: var(--pos-space-5) var(--pos-space-9);
    border-radius: var(--pos-radius-lg);
    font-size: var(--pos-font-lg);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.3px;
    min-height: 40px;
    cursor: pointer;
    transition: var(--pos-transition);
    box-shadow: var(--pos-shadow-sm);
}

.tender-amount-dialog .btn-primary {
    background-color: var(--pos-primary);
    color: var(--pos-text-on-dark);
    border: 1px solid var(--pos-primary-border);
}

    .tender-amount-dialog .btn-primary:hover {
        background-color: var(--pos-primary-dark);
        border-color: var(--pos-primary-dark);
        transform: translateY(-2px);
    }

.tender-amount-dialog .btn-cancel {
    background-color: var(--pos-surface);
    color: var(--pos-text);
    border: 1px solid var(--pos-neutral-300);
}

    .tender-amount-dialog .btn-cancel:hover {
        background-color: var(--pos-neutral-100);
        border-color: var(--pos-neutral-400);
        transform: translateY(-2px);
    }

    .tender-amount-dialog .btn-primary:active,
    .tender-amount-dialog .btn-cancel:active {
        transform: translateY(0);
        box-shadow: var(--pos-shadow-sm);
    }

/* ---- Responsive -------------------------------------------------------- */
/* Phone only (<768px), on the same breakpoints as TenderDialog above. */
@media (max-width: 767.98px) {
    .tender-amount-body {
        flex-direction: column;
    }

    .amount-left-section {
        border-right: none;
        padding: var(--pos-space-8);
    }

    .amount-stat-row {
        grid-template-columns: 1fr;
    }

    .tender-amount-dialog .btn-primary,
    .tender-amount-dialog .btn-cancel {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .amount-left-section {
        padding: var(--pos-space-7);
        gap: var(--pos-space-6);
    }

    .tender-amount-input {
        width: 100%;
    }

        .tender-amount-input input {
            font-size: 26px;
        }
}


/* =========================================================================
   Shipping & Fulfillment (KRMS-249, spec section B)
   Component rules for the Register shipping screens. Reads var(--pos-*) only.
   Lifted from design/shipping/shipping-mockup.css (the .shp-* deliverable).
   ========================================================================= */
/* ---- modal shell ---------------------------------------------------- */
.shp-dialog {
    background: var(--pos-surface);
    border-radius: var(--pos-radius-lg);
    box-shadow: var(--pos-shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Keep the taller shell within the viewport; the body scrolls if needed. */
    max-height: 92vh;
    max-width: 100%;
}

.shp-dialog--wide {
    width: 940px;
}

.shp-dialog--mid {
    width: 620px;
}

.shp-dialog--narrow {
    width: 460px;
}

.shp-dialog--sm {
    width: 380px;
}

.shp-titlebar {
    background: var(--pos-chrome);
    color: var(--pos-text-on-dark);
    padding: var(--pos-space-6) var(--pos-space-9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pos-space-8);
    flex: 0 0 auto;
}

    .shp-titlebar h3 {
        margin: 0;
        font-size: var(--pos-font-xl);
        font-weight: var(--pos-weight-semibold);
        letter-spacing: 0.01em;
    }

    .shp-titlebar .shp-tran {
        font-size: var(--pos-font-sm);
        color: var(--pos-text-muted-on-dark);
        letter-spacing: 0.04em;
    }

.shp-body {
    padding: var(--pos-space-9);
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-8);
}

/* ---- section cards --------------------------------------------------- */
.shp-card {
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-md);
    background: var(--pos-surface);
}

    .shp-card > header {
        padding: var(--pos-space-4) var(--pos-space-6);
        border-bottom: 1px solid var(--pos-border-light);
        background: var(--pos-neutral-50);
        border-radius: var(--pos-radius-md) var(--pos-radius-md) 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--pos-space-6);
    }

        .shp-card > header h4 {
            margin: 0;
            font-size: var(--pos-font-xs);
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--pos-neutral-500);
            font-weight: var(--pos-weight-semibold);
        }

    .shp-card > .shp-card-body {
        padding: var(--pos-space-6);
    }

/* ---- header split: billing address | sale-level options -------------- */
.shp-header-grid {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-md);
    overflow: hidden;
}

.shp-bill {
    background: var(--pos-neutral-50);
    padding: var(--pos-space-6);
    border-right: 1px solid var(--pos-border-light);
}

    .shp-bill .shp-eyebrow {
        margin-bottom: var(--pos-space-4);
    }

    .shp-bill .shp-cust {
        font-size: var(--pos-font-lg);
        font-weight: var(--pos-weight-semibold);
        margin-bottom: var(--pos-space-2);
    }

    .shp-bill address {
        font-style: normal;
        color: var(--pos-neutral-600);
        font-size: var(--pos-font-base);
        line-height: 1.6;
    }

    .shp-bill .shp-phone {
        margin-top: var(--pos-space-5);
        padding-top: var(--pos-space-5);
        border-top: 1px solid var(--pos-border-light);
        color: var(--pos-neutral-600);
    }

.shp-eyebrow {
    font-size: var(--pos-font-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pos-neutral-500);
    font-weight: var(--pos-weight-semibold);
}

.shp-opts {
    padding: var(--pos-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-6);
}

/* ---- form primitives (mirrors the existing .ci-form / .ci-row) ------- */
.shp-row {
    display: flex;
    align-items: center;
    gap: var(--pos-space-6);
}

.shp-row--top {
    align-items: flex-start;
}

.shp-label {
    flex: 0 0 118px;
    /* Match the ChangeItem dialog's field labels (.ci-label): 0.875rem, standard
     text colour, regular weight. */
    font-size: 0.875rem;
    color: var(--pos-text);
}

.shp-label--wide {
    flex-basis: 152px;
}
/* Required-field marker appended to a .shp-label. */
.shp-req {
    color: var(--pos-danger);
    margin-left: 2px;
}

.shp-field {
    font-family: inherit;
    font-size: var(--pos-font-base);
    padding: var(--pos-space-4) var(--pos-space-5);
    border: 1px solid var(--pos-border-input);
    border-radius: var(--pos-radius);
    background: var(--pos-surface);
    color: var(--pos-text);
    min-width: 0;
}

    .shp-field:focus-visible {
        outline: 2px solid var(--pos-selected);
        outline-offset: -1px;
    }

    .shp-field:disabled {
        background: var(--pos-neutral-100);
        color: var(--pos-neutral-400);
    }

.shp-field--grow {
    flex: 1 1 auto;
}

.shp-field--sm {
    width: 128px;
}

.shp-field--md {
    width: 190px;
}
/* Narrower fields for the sale-level Shipping date / Ship via selectors. */
.shp-field--compact {
    width: 300px;
    flex: 0 0 300px;
}
/* Half-width date / time pickers (Scheduled for / Cancel date). */
.shp-field--picker {
    width: 170px;
    flex: 0 0 170px;
}
/* Narrower time picker (Scheduled for / Cancel date time-of-day). */
.shp-field--picker-time {
    width: 120px;
    flex: 0 0 120px;
}
/* Narrower charge field on the Item Fulfillment dialog (Freight / Installation charge). */
.shp-field--charge {
    width: 170px;
    flex: 0 0 170px;
}
/* Red required marker (*) appended to a mandatory field's label. */
.shp-required {
    color: var(--pos-danger);
    margin-left: 2px;
    font-weight: var(--pos-weight-medium);
}
/* Customer-location selector: a fixed-width wrapper controls the flex child so
   the New/Edit buttons sit immediately after the dropdown rather than being
   pushed to the far right by a full-width MudSelect. */
.shp-loc-field {
    flex: 0 0 380px;
    width: 380px;
    max-width: 380px;
}
/* Extra breathing room before the inline "Ship via" label that follows the
   Shipping date field on the same row. */
.shp-label--inline {
    flex-basis: auto;
    margin-left: var(--pos-space-9);
}

.shp-loc-field .mud-input-control {
    width: 100%;
}

/* An inline label + field pair (ShippingDialog "Ship via") that wraps as one
   unit. Same gap as .shp-row, so a row that fits looks as it did before. */
.shp-row-group {
    display: flex;
    align-items: center;
    gap: var(--pos-space-6);
}

/* Tablet landscape and below: the sale-options rows (Shipping date + Ship via
   on one line) can be wider than the options column, so let them wrap. A row
   that fits is unchanged. */
@media (max-width: 1366px) {
    .shipping-dialog .shp-opts > .shp-row {
        flex-wrap: wrap;
        row-gap: var(--pos-space-4);
    }

    /* "Ship via" takes its own line, its label aligned with the other rows'. */
    .shipping-dialog .shp-row-group {
        flex: 1 0 100%;
    }

        .shipping-dialog .shp-row-group .shp-label--inline {
            flex: 0 0 118px;
            margin-left: 0;
        }
}

/* Tablet portrait and below: fixed-width fields give a little and rows wrap,
   so nothing runs past the dialog edge. */
@media (max-width: 1023.98px) {
    .shp-row {
        flex-wrap: wrap;
        row-gap: var(--pos-space-4);
    }

    .shipping-dialog .shp-header-grid {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .shp-label--inline {
        margin-left: 0;
    }

    .shp-field--compact {
        flex: 1 1 200px;
        width: auto;
        max-width: 300px;
    }

    .shp-loc-field {
        flex: 1 1 220px;
        width: auto;
        min-width: 0;
    }

    .shp-field--md {
        width: min(190px, 100%);
    }

    .shp-field--picker,
    .shp-field--charge {
        flex: 0 1 170px;
        min-width: 120px;
    }

    .shp-field--picker-time {
        flex: 0 1 120px;
        min-width: 96px;
    }
}

.shp-help {
    font-size: var(--pos-font-sm);
    color: var(--pos-neutral-500);
    margin-top: var(--pos-space-2);
}

.shp-help--warn {
    color: var(--pos-amber-dark);
}

/* ---- checkbox -------------------------------------------------------- */
.shp-check {
    display: flex;
    align-items: flex-start;
    gap: var(--pos-space-5);
    cursor: pointer;
}

    .shp-check input {
        margin: 2px 0 0;
        width: 15px;
        height: 15px;
        accent-color: var(--pos-primary);
        flex: none;
    }

    .shp-check .shp-check-text {
        font-size: var(--pos-font-lg);
    }

        .shp-check .shp-check-text b {
            font-weight: var(--pos-weight-semibold);
        }

        .shp-check .shp-check-text span {
            display: block;
            color: var(--pos-neutral-500);
            font-size: var(--pos-font-sm);
            margin-top: var(--pos-space-1);
        }

/* ---- segmented control: SaleShippingLocation / FulfillmentType ------- */
.shp-seg {
    display: inline-flex;
    border: 1px solid var(--pos-border-input);
    border-radius: var(--pos-radius-md);
    overflow: hidden;
}

    .shp-seg button {
        appearance: none;
        border: 0;
        border-right: 1px solid var(--pos-border-input);
        background: var(--pos-surface);
        font-family: inherit;
        font-size: var(--pos-font-base);
        color: var(--pos-neutral-600);
        padding: var(--pos-space-4) var(--pos-space-7);
        cursor: pointer;
        white-space: nowrap;
        transition: var(--pos-transition);
    }

        .shp-seg button:last-child {
            border-right: 0;
        }

        .shp-seg button:hover:not(:disabled):not([aria-pressed="true"]) {
            background: var(--pos-primary-soft);
        }

        .shp-seg button[aria-pressed="true"] {
            background: var(--pos-primary);
            color: var(--pos-text-on-dark);
            font-weight: var(--pos-weight-semibold);
        }

        .shp-seg button:disabled {
            background: var(--pos-neutral-100);
            color: var(--pos-neutral-400);
            cursor: not-allowed;
        }

        .shp-seg button:focus-visible {
            outline: 2px solid var(--pos-selected);
            outline-offset: -2px;
        }

/* ---- buttons --------------------------------------------------------- */
.shp-btn {
    appearance: none;
    font-family: inherit;
    font-size: var(--pos-font-base);
    padding: var(--pos-space-4) var(--pos-space-7);
    border-radius: var(--pos-radius);
    border: 1px solid var(--pos-border-input);
    background: var(--pos-surface);
    color: var(--pos-neutral-700);
    cursor: pointer;
    transition: var(--pos-transition);
    white-space: nowrap;
}

    .shp-btn:hover {
        background: var(--pos-neutral-100);
    }

    .shp-btn:disabled {
        color: var(--pos-neutral-400);
        background: var(--pos-neutral-100);
        cursor: not-allowed;
    }

    .shp-btn:focus-visible {
        outline: 2px solid var(--pos-selected);
        outline-offset: 1px;
    }

.shp-btn--primary {
    background: var(--pos-primary);
    border-color: var(--pos-primary-border);
    color: var(--pos-text-on-dark);
    font-weight: var(--pos-weight-semibold);
    padding: var(--pos-space-5) var(--pos-space-10);
}

    .shp-btn--primary:hover {
        background: var(--pos-primary-dark);
    }

.shp-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--pos-neutral-600);
    text-decoration: underline;
}

.shp-btn--cancel {
    padding: var(--pos-space-5) var(--pos-space-9);
}

.shp-btn--danger {
    border-color: var(--pos-danger);
    color: var(--pos-danger-strong);
}

/* shortcut chip inside a button — the .icon-title equivalent */
.shp-key {
    display: inline-block;
    font-size: var(--pos-font-2xs);
    letter-spacing: 0.06em;
    color: var(--pos-neutral-500);
    border: 1px solid var(--pos-neutral-300);
    border-radius: var(--pos-radius-sm);
    padding: 0 var(--pos-space-2);
    margin-left: var(--pos-space-4);
    vertical-align: 1px;
}

/* Keyboard shortcuts are off on touch (see platform.js), so drop their hints. */
@media (pointer: coarse) {
    .shp-key {
        display: none;
    }
}

.shp-btn--primary .shp-key {
    color: var(--pos-text-on-dark);
    border-color: var(--pos-overlay-light-50);
}

/* ---- inline result / consequence strip ------------------------------- */
.shp-strip {
    display: flex;
    align-items: center;
    gap: var(--pos-space-5);
    padding: var(--pos-space-4) var(--pos-space-6);
    border-radius: var(--pos-radius);
    font-size: var(--pos-font-sm);
    border: 1px solid transparent;
}

.shp-strip--ok {
    background: var(--pos-success-bg);
    border-color: var(--pos-primary-border);
    color: var(--pos-success-strong);
}

.shp-strip--warn {
    background: var(--pos-amber-bg);
    border-color: var(--pos-amber);
    color: var(--pos-amber-dark);
}

.shp-strip--info {
    background: var(--pos-blue-bg);
    border-color: var(--pos-info);
    color: var(--pos-neutral-700);
}

.shp-strip .shp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* ---- item grid ------------------------------------------------------- */
.shp-sku {
    font-weight: var(--pos-weight-semibold);
}

.shp-desc {
    color: var(--pos-neutral-500);
    font-size: var(--pos-font-sm);
    margin-top: var(--pos-space-1);
}

/* fulfillment pill — state carried by form as well as by the word */
.shp-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--pos-space-3);
    font-size: var(--pos-font-sm);
    font-weight: var(--pos-weight-semibold);
    padding: var(--pos-space-1) var(--pos-space-5) var(--pos-space-1) var(--pos-space-4);
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .shp-pill::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.shp-pill--carry {
    background: var(--pos-neutral-100);
    border-color: var(--pos-neutral-300);
    color: var(--pos-neutral-600);
}

/* Fulfillment type "None": a non-stock item that cannot be fulfilled. Set by POS, never chosen
   by the Clerk, so it reads as muted rather than as one of the selectable methods. */
.shp-pill--none {
    background: transparent;
    border-color: var(--pos-neutral-200);
    color: var(--pos-neutral-500);
}

.shp-pill--pick {
    background: var(--pos-blue-bg);
    border-color: var(--pos-info);
    color: var(--pos-neutral-700);
}

.shp-pill--ship {
    background: var(--pos-primary-bg);
    border-color: var(--pos-primary-border);
    color: var(--pos-primary-dark);
}

.shp-pill--inst {
    background: var(--pos-amber-bg);
    border-color: var(--pos-amber);
    color: var(--pos-amber-dark);
}

.shp-dest {
    margin-top: var(--pos-space-2);
    color: var(--pos-neutral-500);
    font-size: var(--pos-font-sm);
}

/* ---- footer totals (freight / installation / override, inline in the action bar) --- */
.shp-foot-totals {
    display: flex;
    align-items: center;
    gap: var(--pos-space-8);
    padding: var(--pos-space-4) var(--pos-space-8);
    background: var(--pos-neutral-100);
    border: 1px solid var(--pos-neutral-200);
    border-radius: var(--pos-radius);
}

    .shp-foot-totals .shp-tot {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: var(--pos-space-2);
    }

        .shp-foot-totals .shp-tot span {
            /* Match the "Shipping date" field label (.shp-label): full-strength text, no uppercase. */
            font-size: 0.875rem;
            color: var(--pos-text);
        }

        .shp-foot-totals .shp-tot b {
            font-size: var(--pos-font-lg);
            font-weight: var(--pos-weight-semibold);
            font-variant-numeric: tabular-nums;
        }

/* ---- footer ---------------------------------------------------------- */
.shp-foot {
    display: flex;
    align-items: center;
    gap: var(--pos-space-6);
    padding: var(--pos-space-6) var(--pos-space-9);
    background: var(--pos-neutral-50);
    border-top: 1px solid var(--pos-border-light);
    flex: 0 0 auto;
}

    .shp-foot .shp-spacer {
        margin-left: auto;
    }

.shp-foot-note {
    font-size: var(--pos-font-sm);
    color: var(--pos-neutral-500);
}

/* ---- master / detail (layout B) -------------------------------------- */
.shp-md {
    display: grid;
    grid-template-columns: 352px minmax(0, 1fr);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-md);
    overflow: hidden;
}

.shp-md-list {
    border-right: 1px solid var(--pos-border-light);
    background: var(--pos-neutral-50);
}

    .shp-md-list header {
        padding: var(--pos-space-4) var(--pos-space-6);
        border-bottom: 1px solid var(--pos-border-light);
        background: var(--pos-surface-header);
    }

        .shp-md-list header h4 {
            margin: 0;
            font-size: var(--pos-font-xs);
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--pos-neutral-600);
            font-weight: var(--pos-weight-semibold);
        }

.shp-md-item {
    display: block;
    width: 100%;
    text-align: left;
    appearance: none;
    border: 0;
    border-bottom: 1px solid var(--pos-border-light);
    border-left: 3px solid transparent;
    background: transparent;
    font-family: inherit;
    padding: var(--pos-space-5) var(--pos-space-6);
    cursor: pointer;
    transition: var(--pos-transition);
}

    .shp-md-item:hover {
        background: var(--pos-surface);
    }

    .shp-md-item.is-selected {
        background: var(--pos-surface);
        border-left-color: var(--pos-primary);
    }

    .shp-md-item:focus-visible {
        outline: 2px solid var(--pos-selected);
        outline-offset: -2px;
    }

    .shp-md-item .shp-md-top {
        display: flex;
        justify-content: space-between;
        gap: var(--pos-space-5);
        align-items: baseline;
    }

    .shp-md-item .shp-md-charge {
        font-variant-numeric: tabular-nums;
        color: var(--pos-neutral-600);
        font-size: var(--pos-font-sm);
    }

.shp-md-detail {
    padding: var(--pos-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-8);
    background: var(--pos-surface);
}

    .shp-md-detail h4 {
        margin: 0;
        font-size: var(--pos-font-lg);
        font-weight: var(--pos-weight-semibold);
    }

/* ---- paired readout: weight + ZIP + qty ------------------------------ */
.shp-readout {
    display: flex;
    gap: var(--pos-space-9);
    padding: var(--pos-space-5) var(--pos-space-6);
    background: var(--pos-neutral-50);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius);
}

    .shp-readout div {
        display: flex;
        flex-direction: column;
        gap: var(--pos-space-1);
    }

    .shp-readout span {
        font-size: var(--pos-font-base);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--pos-neutral-500);
    }

    .shp-readout b {
        font-size: var(--pos-font-md);
        font-weight: var(--pos-weight-semibold);
        font-variant-numeric: tabular-nums;
    }
    /* Inline variant (Item Fulfillment readout): label and value on one line, normal case. */
    .shp-readout.shp-readout--inline div {
        flex-direction: row;
        align-items: baseline;
        gap: 20px;
    }

    .shp-readout.shp-readout--inline span {
        text-transform: none;
        letter-spacing: normal;
    }
    /* Natural-case variant: keeps the stacked label/value layout but drops the
   all-caps treatment on the labels. */
    .shp-readout.shp-readout--natural span {
        text-transform: none;
        letter-spacing: normal;
    }

/* ---- collapsed sale-options strip (layout B) ------------------------- */
.shp-strip-opts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pos-space-4) var(--pos-space-9);
    padding: var(--pos-space-6);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius-md);
    background: var(--pos-neutral-50);
}

    .shp-strip-opts .shp-mini {
        display: flex;
        align-items: center;
        gap: var(--pos-space-4);
    }

        .shp-strip-opts .shp-mini > span {
            font-size: var(--pos-font-xs);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--pos-neutral-500);
            font-weight: var(--pos-weight-semibold);
        }

/* ---- disabled block that states its own reason ----------------------- */
.shp-blocked {
    border: 1px dashed var(--pos-neutral-300);
    border-radius: var(--pos-radius);
    padding: var(--pos-space-6);
    background: var(--pos-neutral-50);
}

    .shp-blocked .shp-blocked-why {
        display: flex;
        gap: var(--pos-space-4);
        margin-top: var(--pos-space-5);
        font-size: var(--pos-font-sm);
        color: var(--pos-neutral-500);
    }

        .shp-blocked .shp-blocked-why .shp-dot {
            margin-top: 5px;
        }

/* ---- sale-line fulfillment text (B.6) -------------------------------- */
.shp-sale-preview {
    background: var(--pos-surface);
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius-md);
    overflow: hidden;
    width: 720px;
}

.shp-fulfil-line {
    color: var(--pos-primary-dark);
    font-size: var(--pos-font-sm);
    margin-top: var(--pos-space-2);
    font-weight: var(--pos-weight-medium);
}

    .shp-fulfil-line.is-muted {
        color: var(--pos-neutral-400);
        font-style: italic;
        font-weight: var(--pos-weight-normal);
    }

/* ---- a control bar rendered above a mockup --------------------------- */
.shp-toggle-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pos-space-6);
    padding: var(--pos-space-5) var(--pos-space-6);
    background: var(--pos-surface);
    border-radius: var(--pos-radius-md);
    font-size: var(--pos-font-base);
}

    .shp-toggle-bar .shp-help {
        margin: 0;
    }


/* ---- MudDialog glue for the shipping screens -------------------------
   The shipping dialogs supply their own chrome via .shp-dialog, so strip
   MudDialog's paper background, shadow and content padding. Apply
   Class="shp-mud" on the <MudDialog>. */
.shp-mud.mud-dialog {
    background: transparent;
    box-shadow: none;
    border-radius: var(--pos-radius-lg);
    overflow: visible;
    /* Center the custom .shp-dialog shell within MudDialog's paper, so the
     screen sits centered regardless of the paper's (FullWidth) width. */
    margin: auto;
}

.shp-mud .mud-dialog-content {
    padding: 0;
    overflow: visible;
}

.shp-mud .mud-dialog-actions {
    display: none;
}
/* The .pos wrapper only scopes the design tokens; make it center its
   fixed-width shell horizontally. */
.shp-mud .pos {
    display: flex;
    justify-content: center;
}

/* ---- Shipping screen as a standard MudDialog ------------------------
   The main Shipping dialog uses MudDialog's own chrome (title bar with
   close button + DialogActions footer) so it matches the other register
   dialogs (e.g. ChangeItemDialog), instead of the hand-rolled .shp-dialog
   shell the smaller shipping dialogs still use. */
.shipping-dialog-title {
    display: flex;
    align-items: baseline;
    gap: var(--pos-space-6);
}

.shipping-dialog-title__main {
    font-size: var(--pos-font-xl);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.01em;
}

.shipping-dialog-title__sub {
    font-size: var(--pos-font-sm);
    color: var(--pos-text-muted);
    letter-spacing: 0.04em;
}

.shipping-dialog .shp-body--flush {
    padding: 0;
}
/* Footer action bar: note (left) · freight/installation/override (centre) · Accept/Cancel (right). */
.shipping-dialog .mud-dialog-actions {
    justify-content: space-between;
    gap: var(--pos-space-6);
    flex-wrap: wrap;
}

.shipping-dialog-note {
    padding-left: 20px;
}

/* Auto margins instead of space-between: same spacing on one line, and when
   the footer wraps the totals and Accept/Cancel stay right-aligned. */
.shp-foot-totals,
.shp-foot-actions {
    margin-left: auto;
}

.shp-foot-actions {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
}

.shipping-dialog .mud-dialog-content {
    overflow: hidden;
    display: flex;
    min-height: 0;
}

.shipping-dialog .pos {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.shipping-dialog .shp-body--flush {
    flex: 1 1 auto;
    min-height: 0;
}

.shipping-dialog .shp-header-grid {
    flex: 0 0 auto;
}
/* The item card takes the leftover height; its grid scrolls inside it. */
.shipping-dialog .shp-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .shipping-dialog .shp-card > header {
        flex: 0 0 auto;
    }

/* ---- items MudDataGrid ---------------------------------------------- */
.shp-items-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    .shp-items-grid .mud-table-container {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    /* Distribute the columns evenly across the full grid width instead of
   letting them hug their content on the left. */
    .shp-items-grid .mud-table-root {
        width: 100%;
        table-layout: fixed;
    }

    .shp-items-grid .shp-col-item {
        width: 30%;
    }
    /* The remaining 70% is split evenly across the six non-item columns. */
    .shp-items-grid .shp-col-even {
        width: 11.66%;
    }

    .shp-items-grid .num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
        /* Right-align the Qty / Charges header labels to sit over their values
   (MudDataGrid wraps the header title in a flex .column-header). */
        .shp-items-grid .num .column-header {
            justify-content: flex-end;
        }
    /* Match the main sales grid's header colour (dark accent + white text).
   Mud's sticky-header rule sets the cell background with high specificity,
   so !important is needed to win — same approach as .items-datagrid. */
    .shp-items-grid .mud-table-head .mud-table-cell {
        background-color: var(--pos-surface-accent) !important;
        color: var(--pos-text-on-dark) !important;
        font-weight: var(--pos-weight-medium);
    }

        .shp-items-grid .mud-table-head .mud-table-cell * {
            color: var(--pos-text-on-dark) !important;
        }

.shp-items-grid__action {
    text-align: right;
}
/* Row selected via click — mirrors the old .is-selected highlight. */

.shp-items-grid .is-selected td {
    background: var(--pos-row-selected);
}

.shp-items-grid tbody tr {
    cursor: pointer;
}

/* RecallReceiptDialog uses the shared label-on-left form primitives (.ci-* in
   components.css) so it matches ChangeItemDialog exactly. */

/* =========================================================================
   RefundSaleItemsDialog — the original sale's lines with an editable
   Return Qty column
   ========================================================================= */
/* Header details of the sale being refunded — two columns of label/value pairs, filled
   row-major so the pairs read across as they do on the legacy Refund Sale screen. */
.rf-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pos-space-3) var(--pos-space-6);
    margin-bottom: var(--pos-space-6);
}

.rf-summary-row {
    display: flex;
    align-items: baseline;
    gap: var(--pos-space-4);
    /* Without this a long customer name stretches the column instead of ellipsing. */
    min-width: 0;
}

.rf-summary-label {
    flex: 0 0 110px;
    text-align: left;
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-text);
}

.rf-summary-value {
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Sale Items:" caption over the grid. */
.rf-section-label {
    color: var(--pos-text);
    margin-bottom: var(--pos-space-2);
}

.rf-total-row {
    display: flex;
    align-items: baseline;
    gap: var(--pos-space-4);
    margin-right: auto;
    margin-left: 15px;
}

    /* The header's fixed label column would hold the pair off the right edge — here the
   label only needs to be as wide as its own text. */
    .rf-total-row .rf-summary-label {
        flex: 0 0 auto;
    }

.rf-scan-row {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
    margin-bottom: var(--pos-space-4);
}

.rf-scan-input {
    width: 280px;
    min-width: 280px;
}

/* "Return items are gifts", with its consequence spelled out beside it once ticked —
   the checkbox changes who the refund is made out to and rules out a linked card
   refund, neither of which is obvious from the label alone. */
.rf-gift-row {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
    margin-bottom: var(--pos-space-4);
}

.rf-gift-hint {
    color: var(--pos-text-muted);
    max-width: 700px;
}

/* The lines grid is a MudDataGrid wrapped in .grid-container, so the outer border,
   rounded corners and selected-row highlight come from the shared rules above and
   match SelectTransactionForReprintDialog. Only the header colour and the numeric
   columns are specific to it.

   Header: same dark accent + white text as the main sales grid. Mud's sticky-header
   rule sets the cell background with high specificity, so !important is needed to
   win — same approach as .items-datagrid and .shp-items-grid. */
.rf-items-grid .mud-table-head .mud-table-cell {
    background-color: var(--pos-surface-accent) !important;
    color: var(--pos-text-on-dark) !important;
    font-weight: var(--pos-weight-medium);
    /* Taller than a data row, so the header reads as a band rather than another line. */
    padding-top: var(--pos-space-5);
    padding-bottom: var(--pos-space-5);
    /* Pinned while the rows scroll under it. MudDataGrid's FixedHeader sets this too, but
       only when it wins the cascade — stating it here keeps the header put regardless. */
    position: sticky;
    top: 0;
    z-index: var(--pos-z-raised);
}

    .rf-items-grid .mud-table-head .mud-table-cell * {
        color: var(--pos-text-on-dark) !important;
    }

/* The shared .grid-container rule puts overflow:hidden on .mud-table-root for its rounded
   corners — but that table sits INSIDE the scrolling .mud-table-container, and an
   overflow-hidden ancestor between a sticky element and its scroll container disables
   sticky. The header scrolled away because of it. Clip on the wrapper instead, which is
   outside the scroller, so the corners still round. */
.grid-container.rf-items-grid .mud-table-root {
    overflow: visible;
}

.grid-container.rf-items-grid {
    border-radius: var(--pos-radius);
    overflow: hidden;
}

    /* Selected line. The shared .grid-container highlight is the same dark accent as the
   header, so a selected row reads as a second header row — use the light selected-row
   tint instead (as the shipping items grid does) and keep the normal text colour.
   Both classes are on the same element, which outweighs the shared rules above. */
    .grid-container.rf-items-grid .selected-row,
    .grid-container.rf-items-grid .selected-row:hover,
    .grid-container.rf-items-grid .selected-row td {
        background-color: var(--pos-row-selected) !important;
        color: var(--pos-text) !important;
    }

/* Compact rows: Mud's dense padding plus a full-height numeric field in the Return Qty
   column made every line taller than it needs to be. */
.rf-items-grid .mud-table-body .mud-table-cell {
    padding-top: var(--pos-space-1);
    padding-bottom: var(--pos-space-1);
}

/* The dialog body holds the height of the loaded layout — header + scan row + 320px
   grid + total — from the moment it opens. The lines are fetched after the dialog is
   on screen, and without this the shell opens at spinner height and then jumps.
   The header is rendered in both states, so only the part below it has to be
   reserved. The grid itself is fixed at 320px (Height on MudDataGrid) for the same
   reason: a constant size whatever the sale contains, as in the reprint grid. */
.rf-body {
    min-height: 400px;
    /* What .rf-loading-overlay is positioned against. */
    position: relative;
}

/* Full-cover loader while the sale is fetched, reusing the sales screen's spinner so the
   two read as one loading state. Opaque over the dialog's own surface rather than that
   screen's translucent scrim, which exists to dim a dark canvas: here it has to hide the
   header of empty labels underneath, which is what the cover is for. */
.rf-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--pos-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pos-surface);
}

    /* The shared text is white, for the canvas; on the dialog's light surface it needs the
       normal body colour. */
    .rf-loading-overlay .pos-loading-text {
        color: var(--pos-text);
    }

.rf-items-grid .rf-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

    /* MudDataGrid wraps a header title in a flex .column-header, which ignores
   text-align — push the numeric ones over their values. */
    .rf-items-grid .rf-num .column-header {
        justify-content: flex-end;
    }

/* Right-align the Return Qty control under its header. The field's own margin-left:auto
   did not take — MudTextField's root is not a plain block box — so the cell wrapper does
   the aligning. */
.rf-qty-cell {
    display: flex;
    justify-content: flex-end;
}

/* The Return Qty field is what actually sets the row height — a dense outlined input
   is taller than a line of text. Trim it to just fit its number and spinner. */
.rf-qty {
    width: 96px;
    flex: 0 0 auto;
}

    .rf-qty .mud-input-slot,
    .rf-qty .mud-input-root {
        min-height: 26px;
        height: 26px;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 0.875rem;
    }

    /* Mud stacks the increment/decrement arrows vertically; at this height they need to
   sit inside the box rather than set their own. */
    .rf-qty .mud-input-adornment-end {
        height: 26px;
    }

    .rf-qty .mud-input-numeric-spin-vertical {
        height: 26px;
    }

/* =========================================================================
   SelectItemDialog — item lookup
   SelectCustomerDialog — customer lookup

   Both lookups share one layout: a toolbar row (search on the left, filters
   on the right) above a flex-filling grid. The `il-` prefix belongs to the
   item lookup and `cl-` to the customer lookup; rules that are identical for
   both are grouped rather than duplicated.
   ========================================================================= */
.item-lookup-dialog .mud-dialog-content,
.customer-lookup-dialog .mud-dialog-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.il-body,
.cl-body {
    outline: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

    .il-body .mud-custom-table-section,
    .il-body .grid-container,
    .cl-body .mud-custom-table-section,
    .cl-body .grid-container {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
    }

.il-location {
    color: var(--pos-text-muted);
    margin-bottom: var(--pos-space-4);
}

.il-toolbar,
.cl-toolbar {
    display: flex;
    align-items: center;
    gap: var(--pos-space-8);
    margin-bottom: var(--pos-space-4);
}

.il-toolbar-search,
.cl-toolbar-search {
    flex: 1 1 50%;
    min-width: 0;
}

.il-toolbar-filters {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pos-space-8);
}

/* Tablet portrait and below: search takes the full row, filters wrap under it. */
@media (max-width: 1023.98px) {
    .il-toolbar {
        flex-wrap: wrap;
        row-gap: var(--pos-space-2);
    }

    .il-toolbar-search {
        flex-basis: 100%;
    }

    .il-toolbar-filters {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

.il-alert,
.cl-alert {
    flex-shrink: 0;
}

.il-grid,
.cl-grid {
    cursor: pointer;
    font-size: var(--pos-font-lg);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.item-lookup-dialog .grid-container .mud-table-root,
.customer-lookup-dialog .grid-container .mud-table-root {
    border: none;
    border-radius: 0;
    overflow: visible;
}

.item-lookup-dialog .grid-container .mud-table-container,
.customer-lookup-dialog .grid-container .mud-table-container {
    border: 1px solid var(--pos-neutral-200);
    border-radius: var(--pos-radius);
    flex: 1 1 auto;
    min-height: 0;
    max-height: 55vh;
    overflow: auto;
}

.il-num {
    text-align: right;
}

    .il-num .column-header {
        justify-content: flex-end;
    }

.il-cancel,
.cl-cancel {
    margin-right: var(--pos-space-8);
}

.item-lookup-dialog .mud-table-head .mud-table-cell,
.customer-lookup-dialog .mud-table-head .mud-table-cell,
.set-item-location-dialog .mud-table-head .mud-table-cell,
.customer-class-lookup-dialog .mud-table-head .mud-table-cell,
.uom-select-dialog .mud-table-head .mud-table-cell,
.serial-lot-browse-dialog .mud-table-head .mud-table-cell {
    background-color: var(--pos-surface-accent) !important;
    color: var(--pos-text-on-dark) !important;
    font-weight: var(--pos-weight-medium);
    border-right: 1px solid var(--pos-chrome-2);
    position: sticky;
    top: 0;
    z-index: var(--pos-z-raised);
}

    .item-lookup-dialog .mud-table-head .mud-table-cell:last-child,
    .customer-lookup-dialog .mud-table-head .mud-table-cell:last-child,
    .set-item-location-dialog .mud-table-head .mud-table-cell:last-child,
    .customer-class-lookup-dialog .mud-table-head .mud-table-cell:last-child,
    .uom-select-dialog .mud-table-head .mud-table-cell:last-child,
    .serial-lot-browse-dialog .mud-table-head .mud-table-cell:last-child {
        border-right: none;
    }

    .item-lookup-dialog .mud-table-head .mud-table-cell *,
    .customer-lookup-dialog .mud-table-head .mud-table-cell *,
    .set-item-location-dialog .mud-table-head .mud-table-cell *,
    .customer-class-lookup-dialog .mud-table-head .mud-table-cell *,
    .uom-select-dialog .mud-table-head .mud-table-cell *,
    .serial-lot-browse-dialog .mud-table-head .mud-table-cell * {
        color: var(--pos-text-on-dark) !important;
    }

.item-lookup-dialog .mud-table-body .mud-table-row:hover .mud-table-cell,
.customer-lookup-dialog .mud-table-body .mud-table-row:hover .mud-table-cell,
.set-item-location-dialog .mud-table-body .mud-table-row:hover .mud-table-cell,
.customer-class-lookup-dialog .mud-table-body .mud-table-row:hover .mud-table-cell,
.uom-select-dialog .mud-table-body .mud-table-row:hover .mud-table-cell,
.serial-lot-browse-dialog .mud-table-body .mud-table-row:hover .mud-table-cell {
    background-color: var(--pos-surface-muted) !important;
}

.item-lookup-dialog .mud-table-body .selected-row,
.item-lookup-dialog .mud-table-body .selected-row:hover,
.customer-lookup-dialog .mud-table-body .selected-row,
.customer-lookup-dialog .mud-table-body .selected-row:hover,
.set-item-location-dialog .mud-table-body .selected-row,
.set-item-location-dialog .mud-table-body .selected-row:hover,
.customer-class-lookup-dialog .mud-table-body .selected-row,
.customer-class-lookup-dialog .mud-table-body .selected-row:hover,
.uom-select-dialog .mud-table-body .selected-row,
.uom-select-dialog .mud-table-body .selected-row:hover,
.serial-lot-browse-dialog .mud-table-body .selected-row,
.serial-lot-browse-dialog .mud-table-body .selected-row:hover {
    background-color: var(--pos-blue-bg) !important;
    border-left: 4px solid var(--pos-info);
}

    .item-lookup-dialog .mud-table-body .selected-row .mud-table-cell,
    .item-lookup-dialog .mud-table-body .selected-row:hover .mud-table-cell,
    .customer-lookup-dialog .mud-table-body .selected-row .mud-table-cell,
    .customer-lookup-dialog .mud-table-body .selected-row:hover .mud-table-cell,
    .set-item-location-dialog .mud-table-body .selected-row .mud-table-cell,
    .set-item-location-dialog .mud-table-body .selected-row:hover .mud-table-cell,
    .customer-class-lookup-dialog .mud-table-body .selected-row .mud-table-cell,
    .customer-class-lookup-dialog .mud-table-body .selected-row:hover .mud-table-cell,
    .uom-select-dialog .mud-table-body .selected-row .mud-table-cell,
    .uom-select-dialog .mud-table-body .selected-row:hover .mud-table-cell,
    .serial-lot-browse-dialog .mud-table-body .selected-row .mud-table-cell,
    .serial-lot-browse-dialog .mud-table-body .selected-row:hover .mud-table-cell {
        background-color: var(--pos-blue-bg) !important;
        color: var(--pos-text) !important;
        font-weight: var(--pos-weight-medium);
    }

/* =========================================================================
   SerialLotBrowseDialog — lot / serial browse

   Only two narrow columns, so the grid always fits the dialog: pin it to the
   content width instead of letting the table and pager push a horizontal
   scrollbar onto the dialog body.
   ========================================================================= */
.serial-lot-browse-dialog .mud-dialog-content {
    overflow-x: hidden;
}

.serial-lot-browse-dialog .mud-table-container,
.serial-lot-browse-dialog .mud-table-root,
.serial-lot-browse-dialog .mud-table-pagination {
    max-width: 100%;
}

/* The pager toolbar is the widest row in this dialog; let it wrap rather than
   run past the content edge if the dialog is ever narrower than its natural
   width. */
.serial-lot-browse-dialog .mud-table-pagination-toolbar {
    flex-wrap: wrap;
    min-width: 0;
}
/* =========================================================================
   ReprintCashCountDialog
   ========================================================================= */
.reprint-cash-count-dialog .rcc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pos-space-8);
    margin-bottom: var(--pos-space-4);
}

.reprint-cash-count-dialog .rcc-header-hint {
    flex: 0 1 55%;
    text-align: right;
    color: var(--pos-text-muted);
}

.reprint-cash-count-dialog .rcc-toolbar {
    display: flex;
    align-items: flex-end;
    gap: var(--pos-space-8);
    margin-bottom: var(--pos-space-4);
}

.reprint-cash-count-dialog .rcc-date {
    flex: 1 1 50%;
    min-width: 0;
}

.reprint-cash-count-dialog .rcc-search {
    flex: 0 0 auto;
    margin-bottom: 1px;
}

.reprint-cash-count-dialog .rcc-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pos-space-4);
    margin-bottom: var(--pos-space-2);
}

.reprint-cash-count-dialog .rcc-hint,
.reprint-cash-count-dialog .rcc-empty {
    color: var(--pos-text-muted);
}

.reprint-cash-count-dialog .grid-container .mud-table-root {
    border: none;
    border-radius: 0;
    overflow: visible;
}

.reprint-cash-count-dialog .grid-container .mud-table-container {
    border: 1px solid var(--pos-neutral-200);
    border-radius: var(--pos-radius);
}

.reprint-cash-count-dialog .mud-table-head .mud-table-cell {
    background-color: var(--pos-surface-accent) !important;
    color: var(--pos-text-on-dark) !important;
    font-weight: var(--pos-weight-medium);
    border-right: 1px solid var(--pos-chrome-2);
    position: sticky;
    top: 0;
    z-index: var(--pos-z-raised);
}

    .reprint-cash-count-dialog .mud-table-head .mud-table-cell:last-child {
        border-right: none;
    }

    .reprint-cash-count-dialog .mud-table-head .mud-table-cell * {
        color: var(--pos-text-on-dark) !important;
    }

.reprint-cash-count-dialog .mud-table-body .mud-table-row:hover .mud-table-cell {
    background-color: var(--pos-surface-muted) !important;
}

.reprint-cash-count-dialog .mud-table-body .selected-row,
.reprint-cash-count-dialog .mud-table-body .selected-row:hover {
    background-color: var(--pos-blue-bg) !important;
    border-left: 4px solid var(--pos-info);
}

    .reprint-cash-count-dialog .mud-table-body .selected-row .mud-table-cell,
    .reprint-cash-count-dialog .mud-table-body .selected-row:hover .mud-table-cell {
        background-color: var(--pos-blue-bg) !important;
        color: var(--pos-text) !important;
        font-weight: var(--pos-weight-medium);
    }

/* =========================================================================
   RegisterPreferencesDialog — printer slot rows (PrinterSlotRow.razor)
   Was inline; moved here so touch can enlarge it below.
   ========================================================================= */
.register-preferences-dialog .psr-btn {
    min-width: 65px;
    padding: var(--pos-space-2) var(--pos-space-5);
}

.register-preferences-dialog .psr-btn--select {
    min-width: 75px;
}

/* =========================================================================
   Touch sizing (pointer: coarse) — 44px minimum hit area for the dialog
   buttons this file styles. Input type, not viewport width, decides this, so
   a 1366x768 touch terminal gets it and a narrow desktop window does not.
   Last in the file so it wins over each dialog's own min-height on order.
   ========================================================================= */
@media (pointer: coarse) {
    .mud-dialog .mud-button-close,
    .transaction-receipt-dialog .receipt-dialog-close-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .mud-dialog .mud-dialog-actions .mud-button-root,
    .tender-results-dialog .btn-primary,
    .transaction-receipt-dialog .btn-cancel,
    .tender-amount-dialog .btn-primary,
    .tender-amount-dialog .btn-cancel,
    .register-preferences-dialog .psr-btn {
        min-height: 44px;
    }

    .btn-quick-cash {
        min-height: clamp(44px, 6vh, 56px) !important;
    }

    .shp-btn,
    .shp-seg button,
    .shp-md-item {
        min-height: 44px;
    }

    /* The Return Qty field is trimmed to 26px for desktop row density; on touch
       it needs a full-height target. */
    .rf-qty .mud-input-slot,
    .rf-qty .mud-input-root,
    .rf-qty .mud-input-adornment-end,
    .rf-qty .mud-input-numeric-spin-vertical {
        min-height: 44px;
        height: 44px;
    }
}