/* =========================================================================
   POS Register — components.css
   Reusable, page-agnostic widgets: buttons, tables, search inputs, badges,
   status toasts, grid selection, scrollbars. These are the classes future
   Register pages should share instead of re-declaring their own CSS.

   Migrated from app.css. Colors and type scales use tokens; spacing/sizing
   stay literal until the off-scale normalization ticket. Loads BEFORE
   layout.css so responsive overrides there win over these base widgets.
   ========================================================================= */

/* ---- Grid selection ---------------------------------------------------- */
.selected-row {
    background-color: var(--pos-selected) !important;
    color: var(--pos-text-on-dark) !important;
}

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

    /* Ensure selected row text is visible */
    .selected-row td {
        color: var(--pos-text-on-dark) !important;
    }

.grid-container:focus {
    outline: 2px solid var(--pos-focus-outline);
    outline-offset: -2px;
}

/* ---- Search box / inputs ----------------------------------------------- */
.search-box {
    position: relative;
}

.search-icon,
.search-icon-right {
    position: absolute;
    color: var(--pos-text-muted);
    font-size: var(--pos-font-lg);
    z-index: var(--pos-z-raised);
    pointer-events: auto;
    transition: var(--pos-transition-color);
}

.icon-title {
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-normal);
}

.search-input::placeholder {
    color: var(--pos-text-muted);
    font-weight: var(--pos-weight-normal);
}

.search-box input {
    font-size: var(--pos-font-base);
    border: 1px solid var(--pos-border-input);
    background: var(--pos-surface);
    /* Inputs don't inherit text colour (the browser default is black), so set it with the
       background, or a dark scheme's surface hides the typed text. */
    color: var(--pos-text);
    height: 36px;
    padding: var(--pos-space-4) 50px var(--pos-space-4) var(--pos-space-5);
    border-radius: var(--pos-radius);
    width: 100%;
}

.search-icon {
    background: var(--pos-blue);
    height: 36px;
    padding: var(--pos-space-4) var(--pos-space-6);
    position: absolute;
    right: 0;
    top: 0;
    border-radius: var(--pos-radius);
}

.search-input:focus {
    outline: none;
}

/* ---- Section title ----------------------------------------------------- */
.section-title {
    color: var(--pos-text-on-chrome);
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-normal);
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

/* ---- Buttons: header actions ------------------------------------------- */
.btn-action-blue {
    background-color: var(--pos-chrome);
    border: none;
    color: var(--pos-text-on-chrome);
    border: 1px solid var(--pos-fill-light);
    padding: var(--pos-space-4) var(--pos-space-6);
    border-radius: var(--pos-radius);
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-normal);
    cursor: pointer;
    transition: var(--pos-transition);
    display: inline-flex;
    align-items: center;
    gap: var(--pos-space-2);
    touch-action: manipulation;
    white-space: nowrap;
    min-height: 36px;
}

    .btn-action-blue:hover {
        background-color: var(--pos-chrome);
    }

.btn-customer-action {
    border: 1px solid var(--pos-border-muted);
    border-radius: var(--pos-radius);
    color: var(--pos-text-black);
    font-size: var(--pos-font-base);
    background-color: var(--pos-fill-muted);
    font-weight: var(--pos-weight-normal);
    display: inline-flex;
    align-items: center;
    padding: var(--pos-space-4) var(--pos-space-8);
    gap: var(--pos-space-3);
}

    .btn-customer-action svg {
        width: 14px;
        height: 14px;
    }

.header-item-scan-section .action-buttons button {
    background: var(--pos-chrome-2);
    color: var(--pos-btn-label-light);
    border: 1px solid var(--pos-fill-muted);
}

    .header-item-scan-section .action-buttons button:hover {
        background: var(--pos-chrome-2-hover);
    }

/* ---- Items table ------------------------------------------------------- */
.items-table-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    background-color: var(--pos-surface);
    border-radius: var(--pos-radius-md);
    border: 1px solid var(--pos-border);
}

.items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-normal);
    min-width: 800px;
}

    .items-table th {
        background-color: var(--pos-surface-header);
        color: var(--pos-text);
        padding: var(--pos-space-2) var(--pos-space-4);
        font-size: var(--pos-font-base);
        text-align: left;
        font-weight: var(--pos-weight-medium);
        border-bottom: 1px solid var(--pos-border);
        position: sticky;
        top: 0;
        z-index: var(--pos-z-sticky);
        white-space: nowrap;
    }

    .items-table td {
        padding: var(--pos-space-2) var(--pos-space-4);
        border-bottom: 1px solid var(--pos-surface-header);
        color: var(--pos-text);
        font-size: var(--pos-font-base);
        font-weight: var(--pos-weight-normal);
    }

    .items-table tbody tr:hover {
        background-color: var(--pos-surface-muted);
    }

    .items-table tbody tr.discounted-item {
        background-color: var(--pos-row-discount);
    }

.item-description {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-2);
}

.discount-label {
    background-color: var(--pos-danger);
    color: var(--pos-text-on-dark);
    padding: var(--pos-space-1) var(--pos-space-3);
    border-radius: var(--pos-radius-sm);
    font-size: var(--pos-font-xs);
    font-weight: var(--pos-weight-bold);
    width: fit-content;
}

.empty-cart {
    text-align: center;
    padding: 30px;
    color: var(--pos-text-subtle);
    font-style: italic;
}

/* Clickable rows */
.items-table tbody .data-row {
    cursor: pointer;
    transition: var(--pos-transition-bg);
}
    /* Hover */
    .items-table tbody .data-row:hover > td {
        background-color: var(--pos-surface-muted);
    }
    /* Discounted item */
    .items-table tbody .data-row.discounted-item > td {
        background-color: var(--pos-row-discount);
    }
    /* Selected row (HIGHEST PRIORITY) */
    .items-table tbody .data-row.selected > td {
        background-color: var(--pos-row-selected);
        color: var(--pos-text);
    }

/* ---- Buttons: tender / sidebar ----------------------------------------- */
.btn-tender {
    background: var(--pos-primary);
    border: none;
    color: var(--pos-text-on-dark);
    padding: var(--pos-space-3) var(--pos-space-8);
    border-radius: var(--pos-radius-md);
    font-size: var(--pos-font-lg);
    font-weight: var(--pos-weight-extrabold);
    cursor: pointer;
    transition: var(--pos-transition);
    min-height: 44px;
    touch-action: manipulation;
    display: inline-flex;
    gap: var(--pos-space-5);
    align-items: center;
    justify-content: center;
    line-height: 1;
}

    .btn-tender {
        position: relative;
    }

        .btn-tender .btn-label {
            order: 1;
            font-size: var(--pos-font-2xl);
        }

    .btn-tender svg {
        order: 2;
        width: 12px;
    }

    .btn-tender .icon-title {
        order: 3;
        position: absolute;
        right: var(--pos-space-8);
        top: 50%;
        transform: translateY(-50%);
    }

    .btn-tender:hover:not(:disabled) {
        background: var(--pos-primary-hover);
        transform: translateY(-1px);
    }

    .btn-tender:disabled {
        background: var(--pos-primary-disabled);
        cursor: not-allowed;
    }

.btn-sidebar-secondary {
    background: var(--pos-chrome-2-70);
    border: 2px solid var(--pos-blue);
    color: var(--pos-btn-label-soft);
    padding: var(--pos-space-2) var(--pos-space-10);
    border-radius: var(--pos-radius);
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-medium);
    cursor: pointer;
    transition: var(--pos-transition);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--pos-space-2);
    justify-content: center;
}

    .btn-sidebar-secondary .icon-section .icon-title {
        font-size: var(--pos-font-xs);
    }

    .btn-sidebar-secondary .icon-section svg {
        width: 12px;
        height: 12px;
    }

    .btn-sidebar-secondary:hover {
        background-color: var(--pos-chrome-alt-hover);
    }

.btn-sidebar-help {
    background: var(--pos-amber-soft);
    border: 2px solid var(--pos-amber);
    color: var(--pos-text-on-chrome);
    padding: var(--pos-space-2) var(--pos-space-10);
    border-radius: var(--pos-radius);
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-medium);
    cursor: pointer;
    transition: var(--pos-transition);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--pos-space-2);
    justify-content: center;
}

    .btn-sidebar-help:hover {
        background: var(--pos-amber-soft-hover);
    }

    .btn-sidebar-help small {
        font-size: var(--pos-font-xs);
        opacity: 0.9;
        margin-left: auto;
    }

/* ---- Buttons: action grid appearance ----------------------------------- */
.action-grid button {
    gap: var(--pos-space-3);
    text-align: left;
    color: var(--pos-btn-label-light);
    font-size: var(--pos-font-base);
    color: var(--pos-text-on-chrome);
    padding: var(--pos-space-4) var(--pos-space-8);
    border-radius: var(--pos-radius-lg);
    font-weight: var(--pos-weight-medium);
    cursor: pointer;
    transition: var(--pos-transition);
    display: flex;
    flex-direction: column;
    background: var(--pos-chrome);
    border: 1px solid transparent;
}

.icon-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

    .icon-section svg {
        width: 14px;
        height: 14px;
    }

    .icon-section .icon-title {
        font-size: var(--pos-font-xs);
    }

/* Function-key families. Only colours come from the --pos-key-* tokens, so a
   colour scheme can restyle the keys (solid, pastel, tinted) while their size,
   corners and border width stay the same in every scheme. */
.action-grid .btn-action-green {
    border: 1px solid var(--pos-key-green-border);
    background: var(--pos-key-green-bg);
    color: var(--pos-key-green-text);
}

.action-grid .btn-action-yellow {
    border: 1px solid var(--pos-key-amber-border);
    background: var(--pos-key-amber-bg);
    color: var(--pos-key-amber-text);
}

.action-grid .btn-action-red {
    border: 1px solid var(--pos-key-red-border);
    background: var(--pos-key-red-bg);
    color: var(--pos-key-red-text);
}

.action-grid .btn-action-blue {
    border: 1px solid var(--pos-key-blue-border);
    background: var(--pos-key-blue-bg);
    color: var(--pos-key-blue-text);
}

.btn-action-green i {
    font-size: var(--pos-font-xl);
    color: var(--pos-success);
}

.btn-action-yellow i {
    font-size: var(--pos-font-xl);
    color: var(--pos-amber);
}

.btn-action-red i {
    font-size: var(--pos-font-xl);
    color: var(--pos-danger);
}

.bottom-actions .btn-action-blue i {
    font-size: var(--pos-font-xl);
    color: var(--pos-blue-icon);
}

/* ---- Inline SVG icon colours ------------------------------------------- */
/* The Register's inline SVG icons draw in currentColor, so these rules (not
   the markup) decide their colour, and a colour scheme reaches them through
   the --pos-icon-* tokens. An icon not listed here takes its button's text
   colour: the tender arrow, the header Shipping button, the search buttons. */
.search-icon svg {
    color: var(--pos-text-on-dark);
}

.btn-customer-action svg {
    color: var(--pos-icon-on-light);
}

.btn-sidebar-secondary svg {
    color: var(--pos-icon-info);
}

.btn-sidebar-help svg {
    color: var(--pos-icon-warning);
}

.btn-logout svg {
    color: var(--pos-icon-danger);
}

.action-grid .btn-action-green svg {
    color: var(--pos-key-green-icon);
}

.action-grid .btn-action-yellow svg {
    color: var(--pos-key-amber-icon);
}

.action-grid .btn-action-blue svg {
    color: var(--pos-key-blue-icon);
}

.action-grid .btn-action-red svg {
    color: var(--pos-key-red-icon);
}

/* The thin outline drawn around a few function-key icons (Sale Comment, Void
   Sale). Set as a stroke property because the shape's fill already uses
   currentColor for the icon colour itself. */
.icon-outline {
    stroke: var(--pos-icon-outline);
}

/* ---- Buttons: primary / cancel ----------------------------------------- */
button.btn-primary {
    font-size: var(--pos-font-lg);
    background: var(--pos-primary) !important;
    border-color: var(--pos-primary) !important;
    color: var(--pos-text-on-dark);
    border-radius: var(--pos-radius);
    padding: 0 var(--pos-space-8);
    height: 40px;
    line-height: 40px;
    font-weight: var(--pos-weight-semibold);
    text-transform: capitalize !important;
}

.btn-cancel {
    font-size: var(--pos-font-lg);
    background: var(--pos-surface) !important;
    border-color: var(--pos-border-cancel) !important;
    color: var(--pos-text-cancel) !important;
    border-radius: var(--pos-radius);
    padding: 0 var(--pos-space-8);
    height: 40px;
    line-height: 40px;
    font-weight: var(--pos-weight-semibold);
    text-transform: capitalize !important;
}

/* ---- Status toast ------------------------------------------------------ */
.status-message {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: var(--pos-space-7) 18px;
    border-radius: var(--pos-radius-md);
    font-weight: var(--pos-weight-medium);
    z-index: var(--pos-z-overlay);
    display: flex;
    align-items: center;
    gap: var(--pos-space-5);
    max-width: 400px;
    box-shadow: var(--pos-shadow-md);
}

    .status-message.success {
        background-color: var(--pos-success);
        color: var(--pos-text-on-dark);
        border-left: 4px solid var(--pos-success-alt);
    }

    .status-message.error {
        background-color: var(--pos-danger);
        color: var(--pos-text-on-dark);
        border-left: 4px solid var(--pos-danger-strong);
    }

    /* ProcessSales.razor renders this variant (_IsWarning); it had no rule in
       the shared layer, so warning toasts fell back to the unstyled base. */
    .status-message.warning {
        background-color: var(--pos-amber);
        color: var(--pos-text-on-dark);
        border-left: 4px solid var(--pos-amber-dark);
    }

.close-btn {
    background: none;
    border: none;
    color: var(--pos-text-on-dark);
    font-size: var(--pos-font-2xl);
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    min-height: 24px;
    min-width: 24px;
}

    .close-btn:hover {
        opacity: 0.8;
    }

/* ---- Scrollbar (items table) ------------------------------------------- */
.items-table-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.items-table-container::-webkit-scrollbar-track {
    background: var(--pos-scroll-track);
    border-radius: var(--pos-radius);
}

.items-table-container::-webkit-scrollbar-thumb {
    background: var(--pos-border);
    border-radius: var(--pos-radius);
}

    .items-table-container::-webkit-scrollbar-thumb:hover {
        background: var(--pos-scroll-thumb-hover);
    }

/* ---- Dialog: label-on-left form (ci-*) ---------------------------------
   Shared by AddItemDialog, ChangeItemDialog, PaymentOnAccountDialog.
   Was three near-identical copies of the same scoped file.            */
.ci-form {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-3);
}

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

/* Align label to the top when the field spans multiple lines (e.g. Comment textarea) */
.ci-row--multiline {
    align-items: flex-start;
}

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

/* Short box: item key, price, quantity, accounting ID, balance */
.ci-field-short {
    width: 160px;
    min-width: 160px;
}

/* Long box: description, customer name, comment — fills remaining dialog width */
.ci-field-long {
    flex: 1;
    min-width: 0;
}

/* Right-align input text for numeric fields (prices, quantities) */
.ci-text-right input {
    text-align: right;
}

/* ---- Dialog: denomination counting grid (currency dialogs) -------------
   Shared by CashAddCurrencyDialog, CashPullCurrencyDialog and
   CloseDrawerCurrencyDialog, whose scoped files were byte-identical.  */
.currency-dialog-classic {
    max-width: 1000px;
    width: 1000px;
}

.currency-dialog-classic .mud-dialog-content {
    padding: var(--pos-space-6) var(--pos-space-8) !important;
}

.dialog-content-classic {
    padding: var(--pos-space-6) var(--pos-space-8);
}

.tillbag-field {
    margin-bottom: var(--pos-space-6);
}

/* Label beside its field on a single line (CashAddCurrencyDialog, which uses a
   standalone label rather than the floating Label the other dialogs use). */
.tillbag-row {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
    margin-bottom: var(--pos-space-6);
}

.tillbag-label {
    flex: 0 0 auto;
    min-width: 160px;
}

.tillbag-row .tillbag-field {
    flex: 1 1 auto;
    margin-bottom: 0;
}

/* Each denomination group (Paper Currency, Coins) is its own bordered panel
   with a titled header bar, so the groups read as distinct sections. */
.denom-section {
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius);
    background: var(--pos-surface);
    margin-bottom: var(--pos-space-5);
    overflow: hidden;
}

.section-header {
    font-size: 0.95rem;
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-text);
    margin: 0;
    padding: var(--pos-space-3) var(--pos-space-5);
    background: var(--pos-surface-muted);
    border-bottom: 1px solid var(--pos-border-light);
}

.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pos-space-4) var(--pos-space-10);
    padding: var(--pos-space-5);
}

.denom-row-classic {
    display: grid;
    grid-template-columns: 105px 80px 65px 105px;
    align-items: center;
    gap: var(--pos-space-3);
}

.denom-label-classic {
    font-size: 0.85rem;
    font-weight: var(--pos-weight-normal);
    color: var(--pos-text);
    white-space: nowrap;
    overflow: visible;
}

.denom-input-classic {
    width: 100%;
}

.denom-input-native {
    width: 100%;
    padding: var(--pos-space-3) var(--pos-space-4);
    font-size: 0.85rem;
    border: 1px solid var(--pos-scrim-25);
    border-radius: var(--pos-radius);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-family: inherit;
    text-align: right;
}

.denom-input-native:focus {
    outline: none;
    border-color: var(--pos-primary);
    border-width: 2px;
    padding: var(--pos-space-2) var(--pos-space-4);
}

.denom-input-native:disabled {
    background: var(--pos-scrim-05);
    cursor: not-allowed;
}

.denom-formula {
    font-size: 0.8rem;
    color: var(--pos-text-muted);
    text-align: right;
    white-space: nowrap;
}

.denom-total-classic {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: var(--pos-weight-medium);
    padding: var(--pos-space-2) var(--pos-space-4);
    background: var(--pos-surface-muted);
    border-radius: var(--pos-radius-sm);
    border: 1px solid var(--pos-border-light);
}

.grand-total-classic {
    margin-top: var(--pos-space-6);
    margin-bottom: var(--pos-space-2);
    padding: var(--pos-space-6) var(--pos-space-7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid var(--pos-primary);
    background: var(--pos-surface-muted);
    border-radius: var(--pos-radius);
}

.grand-total-label-classic {
    font-size: 1.1rem;
    font-weight: var(--pos-weight-bold);
    color: var(--pos-text);
}

.grand-total-amount-classic {
    font-size: 1.3rem;
    font-weight: var(--pos-weight-bold);
    font-family: 'Courier New', monospace;
    color: var(--pos-primary);
}

/* =========================================================================
   SalesListGrid
   Every .mud-table-* rule was already scoped to .items-datagrid under
   ::deep, so stripping ::deep leaves them correctly anchored.

   Not migrated (already identical in the shared layers):
     .sales-list-section -> layout.css
     .items-table-container, .empty-cart -> components.css
   Dropped as dead (no markup reference): .discount-label, .column-header
   ========================================================================= */


/* Item image thumbnail (shown when the Register Class enables ShowItemImages) */
.item-thumbnail {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: var(--pos-radius);
    border: 1px solid var(--pos-text-muted-on-chrome);
    background-color: var(--pos-neutral-100);
    display: block;
    cursor: pointer;
}

/* ---- Item thumbnail hover preview -------------------------------------- */
/* MudTooltip renders in the root popover layer, so this card escapes the
   items grid's overflow clipping and is never cut off on the lower rows. */
.item-thumb-tooltip {
    padding: 0;
    background-color: transparent;
}

.item-thumb-preview {
    display: flex;
    flex-direction: column;
    width: 150px;
    background-color: var(--pos-surface);
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius-md);
    box-shadow: var(--pos-shadow-lg);
    overflow: hidden;
}

.item-thumb-preview-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background-color: var(--pos-neutral-100);
    display: block;
}

.item-thumb-preview-info {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-1);
    padding: var(--pos-space-3) var(--pos-space-4);
}

.item-thumb-preview-sku {
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-bold);
    color: var(--pos-text);
}

.item-thumb-preview-desc {
    font-size: var(--pos-font-sm);
    color: var(--pos-text-muted);
    line-height: 1.3;
}

/* Narrow the leading image column so it hugs the thumbnail */
.items-datagrid .mud-table-cell.col-image {
    width: 54px;
    min-width: 54px;
    max-width: 54px;
    padding-left: var(--pos-space-2);
    padding-right: var(--pos-space-2);
}

/* Custom styling for two-row cell display

   HEIGHT IS LOAD-BEARING: these three rules, plus the .items-datagrid .mud-table-cell padding
   and border-bottom further down, add up to the 57px sale row that SalesListGrid.razor hands
   the virtualizer as ItemSize. The virtualizer works off that one number to size its scrollbar
   and decide how many rows to render, and it cannot measure the rows itself. Changing the
   padding, the gap or either min-height here means changing SaleRowHeight to match - see the
   breakdown on that constant. */
.item-cell-container {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-1);
    padding: var(--pos-space-2) 0;
}

.item-row-main {
    display: flex;
    align-items: center;
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-medium);
    color: var(--pos-text);
    min-height: 18px;
}

.item-row-details {
    display: flex;
    align-items: center;
    font-size: var(--pos-font-sm);
    font-weight: var(--pos-weight-normal);
    color: var(--pos-neutral-500);
    min-height: 16px;
}

.item-sku {
    font-weight: var(--pos-weight-semibold);
}

.item-detail-text {
    font-style: normal;
}

/* Sale-line fulfillment text. Shown only when the line's fulfillment differs from the
   Register Class default; a line using the default renders nothing (spec B.6). */
.item-fulfillment-text {
    color: var(--pos-primary-text);
    font-weight: var(--pos-weight-medium);
}

.item-detail-spacer {
    visibility: hidden;
}

/* Non-default warehouse call-out in the Whse column. A line sold out of a location other than
   the sale's own is flagged the way legacy Register flags it - a red cell - so the clerk cannot
   miss that the stock is not coming from this register's location. Vertical padding stays at 0
   on purpose: .item-row-main's height is part of the SaleRowHeight contract in SalesListGrid. */
.item-whse-alt {
    padding: 0 var(--pos-space-2);
    border-radius: var(--pos-radius-sm);
    background-color: var(--pos-danger);
    color: var(--pos-text-on-dark);
    font-weight: var(--pos-weight-semibold);
}

.comment-row-content {
    padding: 1px 0;
}

.item-comment-text {
    font-style: italic;
    font-size: var(--pos-font-sm);
    color: var(--pos-neutral-700);
}



/* Header alignment - all headers center-aligned */
.items-datagrid .mud-table-head .mud-table-cell.header-center {
    text-align: center !important;
}

.items-datagrid .mud-table-head .mud-table-cell.header-center .mud-table-cell-content {
    justify-content: center !important;
}

.items-datagrid .mud-table-head .mud-table-cell.header-center span {
    text-align: center !important;
    width: 100%;
    display: block;
    color: var(--pos-text-on-dark) !important;
}

/* Cell alignment classes */
.items-datagrid .mud-table-cell.cell-left {
    text-align: left !important;
}

.items-datagrid .mud-table-cell.cell-left .item-cell-container,
.items-datagrid .mud-table-cell.cell-left .item-row-main,
.items-datagrid .mud-table-cell.cell-left .item-row-details {
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.items-datagrid .mud-table-cell.cell-center {
    text-align: center !important;
}

.items-datagrid .mud-table-cell.cell-center .item-cell-container {
    align-items: center !important;
}

.items-datagrid .mud-table-cell.cell-center .item-row-main,
.items-datagrid .mud-table-cell.cell-center .item-row-details {
    justify-content: center !important;
    width: 100%;
}

.items-datagrid .mud-table-cell.cell-right {
    text-align: right !important;
}

.items-datagrid .mud-table-cell.cell-right .item-cell-container {
    align-items: flex-end !important;
}

.items-datagrid .mud-table-cell.cell-right .item-row-main,
.items-datagrid .mud-table-cell.cell-right .item-row-details {
    justify-content: flex-end !important;
    width: 100%;
}

/* Mixed alignment: first row right, second row center */
.items-datagrid .mud-table-cell.cell-right-center {
    text-align: right !important;
}

.items-datagrid .mud-table-cell.cell-right-center .item-cell-container {
    align-items: stretch !important;
    width: 100%;
}

.items-datagrid .mud-table-cell.cell-right-center .item-row-main {
    justify-content: flex-end !important;
    text-align: right !important;
    width: 100%;
}

.items-datagrid .mud-table-cell.cell-right-center .item-row-main span {
    text-align: right !important;
    width: 100%;
}

.items-datagrid .mud-table-cell.cell-right-center .item-row-details {
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
}

.items-datagrid .mud-table-cell.cell-right-center .item-row-details span {
    text-align: center !important;
    width: 100%;
}

/* Discount sub-row: light orange tint, compact */
.discount-row-content {
    padding: 1px 0;
}

.item-discount-text {
    font-size: var(--pos-font-sm);
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-danger-text);
    letter-spacing: 0.3px;
}

.item-discount-amount {
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-medium);
    color: var(--pos-danger-text);
}

.items-datagrid .mud-table-row.discount-row {
    background-color: var(--pos-amber-bg) !important;
}

.items-datagrid .mud-table-row.discount-row:hover {
    background-color: var(--pos-amber-bg) !important;
}

.items-datagrid .mud-table-row.discount-row .mud-table-cell {
    padding-top: var(--pos-space-1);
    padding-bottom: var(--pos-space-1);
    border-bottom: none;
}

.items-datagrid .mud-table-row.discount-row.selected {
    background-color: var(--pos-blue-bg) !important;
    border-left: 4px solid var(--pos-info);
}

/* Sale Comment row */
.sale-comment-row-content {
    padding: 1px 0;
}

.sale-comment-text {
    font-size: var(--pos-font-sm);
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-neutral-700);
}

.items-datagrid .mud-table-row.sale-comment-row {
    background-color: var(--pos-surface) !important;
}

.items-datagrid .mud-table-row.sale-comment-row:hover {
    background-color: var(--pos-neutral-100) !important;
}

.items-datagrid .mud-table-row.sale-comment-row .mud-table-cell {
    padding-top: var(--pos-space-1);
    padding-bottom: var(--pos-space-1);
    border-bottom: none;
}

/* Comment row: white background, compact, no hover highlight */
.items-datagrid .mud-table-row.comment-row {
    background-color: var(--pos-surface) !important;
}

.items-datagrid .mud-table-row.comment-row:hover {
    background-color: var(--pos-neutral-100) !important;
}

.items-datagrid .mud-table-row.comment-row .mud-table-cell {
    padding-top: var(--pos-space-1);
    padding-bottom: var(--pos-space-1);
    border-bottom: none;
}

.items-datagrid .mud-table-row.comment-row.selected {
    background-color: var(--pos-blue-bg) !important;
    border-left: 4px solid var(--pos-info);
}

/* Row hover and selection styling */
.items-datagrid .mud-table-row:hover {
    background-color: var(--pos-surface-muted) !important;
}

.items-datagrid .mud-table-row.selected {
    background-color: var(--pos-blue-bg) !important;
    border-left: 4px solid var(--pos-info);
}

.items-datagrid .mud-table-row.selected .mud-table-cell {
    font-weight: var(--pos-weight-medium);
}

.items-datagrid .mud-table-row.discounted-item {
    background-color: var(--pos-row-discount) !important;
}

.items-datagrid .mud-table-row.discounted-item.selected {
    background-color: var(--pos-blue-bg) !important;
    border-left: 4px solid var(--pos-info);
}

/* Data grid cell padding adjustments with 1px borders */
.items-datagrid .mud-table-cell {
    padding: var(--pos-space-3) var(--pos-space-4);
    border-bottom: 1px solid var(--pos-neutral-300);
    border-right: 1px solid var(--pos-neutral-300);
}

.items-datagrid .mud-table-cell:last-child {
    border-right: none;
}

.items-datagrid .mud-table-head .mud-table-cell {
    background-color: var(--pos-surface-accent) !important;
    color: var(--pos-text-on-dark) !important;
    padding: var(--pos-space-4);
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-medium);
    border-bottom: 1px solid var(--pos-neutral-800);
    border-right: 1px solid var(--pos-chrome-2);
}

.items-datagrid .mud-table-head .mud-table-cell:last-child {
    border-right: none;
}

/* Ensure all header text is white */
.items-datagrid .mud-table-head .mud-table-cell * {
    color: var(--pos-text-on-dark) !important;
}


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

/* Add vertical borders between columns */
.items-datagrid .mud-table {
    border-collapse: collapse;
}

.items-datagrid .mud-table-container {
    border: 1px solid var(--pos-border);
}

/* =========================================================================
   BrandLogo / PoweredBy

   Ported from Components/BrandLogo.razor.css and PoweredBy.razor.css when the
   Custom Branding merge landed. Both were scoped stylesheets, which this
   project does not load (index.html never links Kensium.POS.styles.css), so
   the rules had never actually applied. Reusable widgets, so they live here
   rather than in pages.css.
   ========================================================================= */

/* Applied only to a configured logo, which is drawn for the RMS Admin's dark sidebar (white
   lettering, say). The card (--pos-logo-card-bg) gives it that background on every screen and in
   every scheme, matching the treatment the RMS admin logos get.

   box-sizing keeps each screen's existing logo height/width rules intact: the card pads inward
   rather than growing the logo's footprint. */
.brand-logo-card {
    box-sizing: border-box;
    background-color: var(--pos-logo-card-bg);
    padding: var(--pos-space-3);
    border-radius: var(--pos-radius-md);
}

/* A logo drawn for light instead (black lettering, say), as the RMS Branding screen found, or one
   saved before the screen looked, which keeps the white card it always had. On a white header this
   looks like no card at all. */
.brand-logo-card.brand-logo-card-light {
    background-color: var(--pos-logo-card-light-bg);
}

/* The packaged logo on the chrome: BrandLogo (OnChrome) renders both the white
   and the dark Kensium logo, and the color scheme decides which one shows. */
img.brand-logo-for-dark-chrome {
    display: var(--pos-logo-white-display);
}

img.brand-logo-for-light-chrome {
    display: var(--pos-logo-dark-display);
}

/* The link sits inside taglines that set their own color/size, so inherit those
   and only reveal an underline on hover, keeping the design unchanged at rest. */
.powered-by-link {
    color: inherit;
    text-decoration: none;
}

.powered-by-link:hover,
.powered-by-link:focus-visible {
    text-decoration: underline;
}

.user-guide-link {
    display: inline-flex;
    align-items: center;
    gap: var(--pos-space-3);
    padding: var(--pos-space-2) var(--pos-space-5);
    border: 1px solid var(--pos-overlay-light-2);
    border-radius: 999px;
    background-color: var(--pos-overlay-light);
    color: var(--pos-text-muted-on-chrome);
    font-size: var(--pos-font-sm);
    font-weight: var(--pos-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--pos-transition);
}

.user-guide-link:hover,
.user-guide-link:focus-visible {
    background-color: var(--pos-overlay-light-2);
    border-color: var(--pos-overlay-light-50);
    color: var(--pos-text-on-chrome);
}

.user-guide-icon {
    flex-shrink: 0;
    color: currentColor;
}

.header-user-guide,
.header-install-app {
    align-self: center;
}

/* The install button reuses the user-guide pill; a <button> needs the font and cursor reset. */
.install-app-link {
    font: inherit;
    cursor: pointer;
}

/* Update overlay: a dimmed layer above the page and its dialogs, with a card in the middle. */
.app-update-overlay {
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Update card: branded, centred, with a primary-colour band across the top like the register's headers. */
.app-update-dialog {
    position: relative;
    width: min(460px, calc(100% - 32px));
    padding: var(--pos-space-11) var(--pos-space-10) var(--pos-space-10);
    border-radius: var(--pos-radius-xl);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-family: var(--pos-font-family);
    box-shadow: var(--pos-shadow-lg);
    text-align: center;
    overflow: hidden;
}

.app-update-dialog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--pos-primary);
}

.app-update-dialog-title {
    margin: 0 0 var(--pos-space-4);
    font-size: var(--pos-font-3xl);
    font-weight: 700;
    line-height: 1.25;
    color: var(--pos-text);
}

.app-update-dialog-text {
    margin: 0 auto var(--pos-space-10);
    max-width: 340px;
    font-size: var(--pos-font-xl);
    line-height: 1.5;
    color: var(--pos-text-muted);
}

.app-update-dialog-actions {
    display: flex;
    justify-content: center;
}

.app-update-dialog-actions .mud-button-root {
    min-width: 200px;
    min-height: var(--pos-touch-target, 44px);
    border-radius: var(--pos-radius-md);
    font-size: var(--pos-font-lg);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: none;
    box-shadow: var(--pos-shadow-sm);
}

/* Offline notice: fixed at the top of the screen. */
.connectivity-notice {
    position: fixed;
    top: var(--pos-space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    width: min(560px, calc(100% - 32px));
}

.install-app-steps {
    margin-top: var(--pos-space-2);
    font-size: var(--pos-font-sm);
    color: var(--pos-text-muted-on-chrome);
}

/* =========================================================================
   Touch sizing  (@media (pointer: coarse))
   Raises the small register controls to the --pos-touch-target minimum on
   touch-first screens. Keyed on the pointer, not the width (README
   "Responsive"), so mouse-driven terminals of any size keep the desktop
   look. Layout-level touch rules (action grid, bottom bar) are in
   layout.css.
   ========================================================================= */
@media (pointer: coarse) {
    .btn-action-blue,
    .btn-customer-action,
    .btn-sidebar-secondary,
    .btn-sidebar-help {
        min-height: var(--pos-touch-target);
    }

    .close-btn {
        min-height: var(--pos-touch-target);
        min-width: var(--pos-touch-target);
    }

    /* Search boxes: the input and its 21px icon "button" grow to one full
       target. The input's 50px right padding already clears the icon. */
    .pos-container .search-box input {
        height: var(--pos-touch-target);
    }

    .pos-container .search-box .search-icon {
        height: var(--pos-touch-target);
        min-width: var(--pos-touch-target);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* SalesListGrid: the type scale steps up under touch, which would push the
       item row past the 57px SaleRowHeight contract (see the HEIGHT IS
       LOAD-BEARING note above). Pinning the line boxes to the same min-heights
       keeps the row at exactly 57px with the larger text. */
    .item-row-main {
        line-height: 18px;
    }

    .item-row-details {
        line-height: 16px;
    }
}