/* =========================================================================
   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-selected);
    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);
    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-dark);
    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-dark);
    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-semibold);
    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 svg {
        width: 12px;
    }

    .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: 1px solid var(--pos-amber);
    color: var(--pos-text-on-dark);
    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: flex;
    align-items: center;
    gap: var(--pos-space-3);
    justify-content: center;
    min-height: 40px;
}

    .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-dark);
    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);
    }

.action-grid .btn-action-green {
    border: 1px solid var(--pos-primary-border);
    background: var(--pos-primary-soft);
}

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

.action-grid .btn-action-red {
    border: 1px solid var(--pos-danger-border);
    background: var(--pos-danger-soft);
}

.action-grid .btn-action-blue {
    border: 1px solid var(--pos-blue);
    background: var(--pos-blue-soft);
}

.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);
}

/* ---- 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);
}

.section-header {
    font-size: 0.95rem;
    font-weight: var(--pos-weight-semibold);
    margin-bottom: var(--pos-space-4);
    margin-top: var(--pos-space-2);
    color: var(--pos-text);
}

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

.denom-row-classic {
    display: grid;
    grid-template-columns: 105px 80px 65px 80px;
    align-items: center;
    gap: var(--pos-space-3);
    margin-bottom: 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-dark);
    background-color: var(--pos-neutral-100);
    display: block;
}

/* 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 */
.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;
}

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

.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-strong);
    letter-spacing: 0.3px;
}

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

.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 typically drawn for light backgrounds and often has
   its own opaque white background baked into the image. That reads as a hard white patch on the
   dark register screens, so the card gives it the background it expects and matches 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-surface);
    padding: var(--pos-space-3);
    border-radius: var(--pos-radius-md);
}

/* 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;
}