/* =========================================================================
   POS Register — layout.css
   Page structure for the Register (containers, header, columns, sidebar,
   totals, action grid) and all responsive / print media queries.

   Migrated from app.css. Colors and type scales use tokens; spacing/sizing
   stay literal until the off-scale normalization ticket. Loads AFTER
   components.css so the media overrides here still win over base widgets.
   ========================================================================= */

/* ---- Shell ------------------------------------------------------------- */

.pos-container {
    color: var(--pos-text-on-dark);
    background: var(--pos-canvas);
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    /* Keeps the register clear of notches / rounded corners now that the
       viewport is viewport-fit=cover (index.html). Every inset is 0 on a
       desktop browser, so this is padding: 0 there. */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    contain: layout style paint;
    -webkit-overflow-scrolling: touch;
}

/* ---- Header ------------------------------------------------------------ */
.pos-header {
    background-color: var(--pos-chrome);
    padding: var(--pos-space-5) var(--pos-space-8);
    border-bottom: 1px solid var(--pos-chrome);
    flex-shrink: 0;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 0;
    gap: var(--pos-space-9);
    flex-wrap: wrap;
}

/* Stacks the logo over its "powered by" tagline. */
.header-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pos-space-3);
    flex: 0 0 auto;
}

.header-logo-tagline {
    font-size: var(--pos-font-sm);
    color: var(--pos-text-on-dark);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.header-logo-img {
    height: 50px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.header-logo-text {
    font-size: var(--pos-font-3xl);
    font-weight: var(--pos-weight-bold);
    color: var(--pos-text-on-dark);
    letter-spacing: 1px;
}

.header-info-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--pos-space-5);
    flex: 0 0 auto;
}

.date-time-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--pos-space-1);
}

.date-display {
    font-size: var(--pos-font-lg);
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-text-on-dark);
    white-space: nowrap;
}

.time-display {
    font-size: var(--pos-font-base);
    color: var(--pos-text-muted-on-dark);
}

.salesperson-selector {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--pos-space-2);
}

.salesperson-label {
    font-size: var(--pos-font-sm);
    color: var(--pos-text-muted-on-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.salesperson-dropdown {
    display: flex;
    align-items: center;
    gap: var(--pos-space-3);
    padding: var(--pos-space-3) var(--pos-space-5);
    background-color: var(--pos-overlay-light);
    border-radius: var(--pos-radius);
    cursor: pointer;
    transition: var(--pos-transition-bg);
    min-height: 32px;
}

    .salesperson-dropdown:hover {
        background-color: var(--pos-overlay-light-2);
    }

.salesperson-name {
    font-size: var(--pos-font-lg);
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-text-on-dark);
}

.salesperson-dropdown i {
    font-size: var(--pos-font-xs);
    color: var(--pos-text-muted-on-dark);
}

/* ---- Action button row (container) ------------------------------------ */
.action-buttons {
    display: flex;
    gap: var(--pos-space-3);
    flex-wrap: wrap;
    flex: 1;
}

    .action-buttons .btn-customer-action {
        width: calc(100% / 3 - 10px);
    }

/* ---- Main content ------------------------------------------------------ */
.pos-main-content {
    display: flex;
    flex: 1;
    flex-direction: row;
    max-width: 100%;
    margin: 0;
    padding: var(--pos-space-5) var(--pos-space-8);
    gap: var(--pos-space-8);
    overflow: hidden;
    min-height: 0;
    background: var(--pos-canvas);
}

.left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-8);
    min-width: 0;
    order: 1;
}

/* ---- Customer info section --------------------------------------------- */
.customer-info-section {
    display: flex;
    gap: var(--pos-space-5);
    width: 100%;
    align-items: center;
    padding: var(--pos-space-9);
    background: var(--pos-surface);
    border-radius: var(--pos-radius-xl);
    justify-content: space-between;
}

.header-item-scan-section .search-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--pos-space-4);
}

.header-item-scan-section .search-box {
    flex: 1;
}

/* Takes half the header's free space on desktop; the tablet bands give it all
   of it. The desktop-only 100px offset from the logo is in the ≥1367 band. */
.header-item-scan-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pos-space-8);
    flex: 0.5;
    min-width: 0;
}

.header-item-scan-section .action-buttons {
    display: flex;
    gap: var(--pos-space-4);
    flex-wrap: nowrap;
    align-items: center;
    flex: 0 0 auto;
}

.customer-info-section .search-box {
    background: var(--pos-surface);
}

.customer-info-section .section-title {
    color: var(--pos-text-black);
}

/* Search box + the three customer buttons share one row while they fit and
   wrap onto two (box above, buttons below) when they don't — no width
   arithmetic, so no width at which the box collapses. The buttons ask for
   400px, never take more than 610px (their desktop width), and the box
   takes the rest down to 200px. */
.customer-info-section .search-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--pos-space-5);
    flex: 1 1 auto;
    min-width: 0;
}

.customer-info-section .search-box {
    display: flex;
    align-items: center;
    background: var(--pos-surface);
    border: 1px solid var(--pos-border-light);
    border-radius: var(--pos-radius);
    padding: 0;
    box-shadow: var(--pos-shadow-sm);
    transition: var(--pos-transition-slow);
    overflow: hidden;
    flex: 1 1 240px;
    min-width: 200px;
}

.customer-info-section .action-buttons {
    flex: 1 1 400px;
    flex-wrap: nowrap;
    max-width: 610px;
    min-width: 0;
}

/* ---- Sales list surface ------------------------------------------------ */
.sales-list-section {
    flex: 1;
    background-color: var(--pos-surface);
    border-radius: var(--pos-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--pos-chrome);
    min-height: 0;
}

/* ---- Right sidebar ----------------------------------------------------- */
/* 320px on desktop, easing down to 260px through tablet landscape so the sale
   list keeps its width (24vw reaches 320px at 1334px). Scrolls rather than
   clips if a short screen cannot fit the totals and every button. */
.pos-sidebar {
    width: clamp(260px, 24vw, 320px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-4);
    background: var(--pos-canvas);
    order: 2;
    min-height: 0;
    overflow-y: auto;
}

.totals-section {
    background-color: var(--pos-surface);
    border-radius: var(--pos-radius-lg);
    padding: var(--pos-space-6);
    color: var(--pos-text);
    overflow: hidden;
}

/* Sale Summary banner: dark header with a green accent and the transaction number. */
.sale-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pos-space-4);
    margin: calc(-1 * var(--pos-space-6)) calc(-1 * var(--pos-space-6)) var(--pos-space-5);
    padding: var(--pos-space-4) var(--pos-space-6);
    background-color: var(--pos-surface-accent);
}

.sale-summary-title {
    font-size: var(--pos-font-lg);
    font-weight: var(--pos-weight-bold);
    color: var(--pos-text-on-dark);
}

.sale-summary-txn {
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.5px;
    color: var(--pos-text-on-dark);
}

.totals-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-3);
    margin-bottom: var(--pos-space-5);
}

.total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pos-space-2) 0;
    font-size: var(--pos-font-base);
    color: var(--pos-text);
    font-weight: var(--pos-weight-semibold);
}

.total-line.discount-line {
    color: var(--pos-danger);
}

.sale-total-container {
    border-top: 1px solid var(--pos-border);
    padding-top: var(--pos-space-5);
    color: var(--pos-text);
    margin-top: var(--pos-space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--pos-weight-semibold);
    font-size: var(--pos-font-xl);
}

.sale-total-amount {
    text-align: right;
}

.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-5);
    padding: 0px 0px var(--pos-space-9);
}

.quote-buttons-row {
    display: flex;
    flex-direction: row;
    gap: var(--pos-space-4);
}

.quote-buttons-row .btn-sidebar-secondary {
    flex: 1;
}

/* ---- Bottom actions + action grid geometry ----------------------------- */

.bottom-actions {
    background-color: var(--pos-chrome);
    padding: var(--pos-space-5) var(--pos-space-8);
    border-top: 1px solid var(--pos-chrome);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* The ceiling applies only to the 6x2 desktop grid — the narrow breakpoints
   below stack the same commands into 3, 4 or 6 rows, which need the height.
   It never drops below two 44px rows plus gap and padding, so a short
   landscape screen squeezes the sale list, not the button labels (26dvh
   only falls under that floor below ~460px of height). Under a coarse
   pointer the ceiling is lifted entirely — see "Touch" at the end. */
@media (min-width: 992px) {
    .bottom-actions {
        max-height: 26vh;
        max-height: max(26dvh, calc(2 * var(--pos-touch-target) + var(--pos-space-6) + 2 * var(--pos-space-5)));
        overflow: hidden;
    }
}

/* 100% of the bar's content box, so the bar's own padding is respected
   (98vw ignored it). The ≥1920 band caps it at 1400px. */
.action-grid {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--pos-space-4);
    padding-right: var(--pos-space-2);
    flex: 1 1 auto;
    min-height: 0;
}

    .action-grid button {
        min-height: 0;
        overflow: hidden;
    }

/* =========================================================================
   Responsive
   Agreed bands (README "Responsive"): desktop ≥1367 · tablet landscape
   1024–1366 · tablet portrait 768–1023 · phone <768. The finer sizing steps
   below nest inside those. Every max-width ends in .98 so a fractional
   (zoomed) width never falls between two bands.
   ========================================================================= */

/* Desktop (1367px and above) */
@media (min-width: 1367px) {
    /* Sets the scan box off from the logo. Below this width the space is
       worth more to the search field itself. */
    .header-item-scan-section {
        padding-left: 100px;
    }
}

/* Tablet, portrait and landscape (768px to 1366px) */
@media (min-width: 768px) and (max-width: 1366.98px) {
    /* All of the header's free space goes to the scan box, not half. */
    .header-item-scan-section {
        flex: 1 1 0;
    }
}

/* Large Desktop (1920px and above) */
@media (min-width: 1920px) {
    .header-logo-img {
        height: 60px;
    }

    .items-table {
        font-size: var(--pos-font-md);
    }

    .action-grid {
        max-width: 1400px;
        gap: var(--pos-space-6);
    }
}
/* Desktop (1200px to 1919px) */
@media (min-width: 1200px) and (max-width: 1919.98px) {
    .header-logo-img {
        height: 50px;
    }
}
/* Laptop (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .header-logo-img {
        height: 45px;
    }

    .items-table {
        font-size: var(--pos-font-sm);
    }

    .action-grid {
        gap: var(--pos-space-4);
    }
}
/* Tablet portrait, sidebar stacked under the sale (768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {

    .header-row {
        gap: var(--pos-space-8);
        flex-wrap: nowrap
    }

    .header-item-scan-section .action-buttons button {
        padding: var(--pos-space-4) var(--pos-space-6);
    }

    .header-logo-img {
        height: 40px;
    }

    .date-display {
        font-size: var(--pos-font-base);
    }

    .pos-main-content {
        flex-direction: column;
        padding: var(--pos-space-6);
        gap: var(--pos-space-6);
    }

    .pos-sidebar {
        width: 100%;
        flex-direction: row;
        gap: var(--pos-space-6);
    }

    .totals-section {
        flex: 1;
    }

    .sidebar-actions {
        flex: 0 0 250px;
    }

    .action-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: var(--pos-space-4);
    }

    .items-table {
        font-size: var(--pos-font-sm);
    }
}
/* Phone, large / landscape (600px to 767px) */
@media (min-width: 600px) and (max-width: 767.98px) {

    .header-row {
        flex-direction: column;
        gap: var(--pos-space-6);
    }

    .header-logo-img {
        height: 38px;
    }

    .search-box {
        max-width: 100%;
    }

    .action-buttons {
        flex-direction: row;
        justify-content: space-between;
    }

    .pos-main-content {
        flex-direction: column;
        padding: var(--pos-space-5);
        gap: var(--pos-space-5);
    }

    .pos-sidebar {
        width: 100%;
        flex-direction: column;
    }

    .action-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: var(--pos-space-4);
    }
}
/* Mobile Landscape (480px to 599px) */
@media (min-width: 480px) and (max-width: 599.98px) {

    .header-row {
        flex-direction: column;
        gap: var(--pos-space-5);
    }

    .header-logo-img {
        height: 35px;
    }

    /*.action-buttons {
    flex-direction: column;
    gap: var(--pos-space-3);
}*/

    .btn-action-blue,
    .btn-customer-action {
        width: 100%;
        justify-content: center;
    }

    .pos-main-content {
        flex-direction: column;
        padding: var(--pos-space-4);
        gap: var(--pos-space-4);
    }

    .items-table {
        font-size: var(--pos-font-xs);
        min-width: 600px;
    }

    .pos-sidebar {
        width: 100%;
    }

    .totals-section {
        padding: var(--pos-space-5);
    }

    .total-line {
        font-size: var(--pos-font-xs);
    }

    .action-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: var(--pos-space-3);
    }
}
/* Print styles */
@media print {
    .pos-container {
        background-color: white;
        color: black;
    }

    .bottom-actions {
        display: none;
    }

    .pos-header,
    .sidebar-actions {
        display: none;
    }
}

/* Tablet portrait and below (up to 1023px).
   Replaces three overlapping one-offs (990–1024, ≥1025, ≤1023) that left
   exactly 1024px — iPad landscape — matched by none of them. The customer
   row needs no breakpoint any more: it wraps on its own (see
   .customer-info-section .search-container). */
@media (max-width: 1023.98px) {
    .customer-info-section .section-title {
        min-width: 100px;
    }

    /* Once wrapped onto their own line the buttons span it. */
    .customer-info-section .action-buttons {
        max-width: none;
    }

    /* SalesListGrid: drop the low-priority columns so Item, Qty and the
       prices keep a readable width. */
    .items-datagrid .mud-table-cell.col-whse,
    .items-datagrid .mud-table-cell.col-tax,
    .items-datagrid .mud-table-cell.col-price-source {
        display: none;
    }

    /* Ext Price is the last visible column now; give it the last column's
       borderless edge. */
    .items-datagrid .mud-table-cell.col-ext-price {
        border-right: none;
    }
}

@media (max-width: 640px) {
    .customer-info-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .customer-info-section .search-container {
        width: 100%;
    }

    .header-info-section {
        flex-direction: row;
        align-items: center;
    }
}

/* Phone (up to 599px): the thumbnail column goes too. */
@media (max-width: 599.98px) {
    .items-datagrid .mud-table-cell.col-image {
        display: none;
    }
}

/* Mobile Portrait (up to 479px) */
@media (max-width: 479px) {

    .header-row {
        flex-direction: column;
        gap: var(--pos-space-4);
    }

    .header-logo-img {
        height: 32px;
    }

    .date-display {
        font-size: var(--pos-font-sm);
    }

    .search-box {
        max-width: 100%;
        min-width: 100%;
    }

    .search-input {
        padding: var(--pos-space-4) var(--pos-space-11) var(--pos-space-4) var(--pos-space-5);
        font-size: var(--pos-font-base);
    }

    .action-buttons {
        gap: var(--pos-space-2);
    }

    .left-column .search-container .action-buttons {
        flex-direction: row;
    }

        .left-column .search-container .action-buttons button {
            width: calc(100% / 3 - 6px);
        }

    .pos-main-content {
        flex-direction: column;
        padding: var(--pos-space-3);
        gap: var(--pos-space-3);
    }

    .customer-info-section .action-buttons {
        flex-direction: column;
        width: 100%;
    }

    .items-table {
        font-size: var(--pos-font-2xs);
        min-width: 550px;
    }

        .items-table th,
        .items-table td {
            padding: var(--pos-space-3) var(--pos-space-2);
        }

    .empty-cart {
        padding: var(--pos-space-9);
        font-size: var(--pos-font-base);
    }

    .pos-sidebar {
        width: 100%;
        gap: var(--pos-space-4);
    }

    .totals-section {
        padding: var(--pos-space-4);
    }

    .total-line {
        font-size: var(--pos-font-xs);
    }

    .sale-total-label,
    .sale-total-amount {
        font-size: var(--pos-font-sm);
    }

    .btn-sidebar-secondary,
    .btn-sidebar-help {
        padding: var(--pos-space-4) var(--pos-space-5);
        font-size: var(--pos-font-sm);
        min-height: 38px;
    }

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

    .status-message {
        top: 10px;
        right: 10px;
        left: 10px;
        padding: var(--pos-space-6) var(--pos-space-7);
        font-size: var(--pos-font-base);
    }
}

/* =========================================================================
   Short viewports — height-driven compaction
   ========================================================================= */
@media (max-height: 1080px) {
    .pos-header {
        padding: var(--pos-space-3) var(--pos-space-8);
    }

    .header-logo-img {
        height: 42px;
    }

    .pos-main-content {
        padding: var(--pos-space-4) var(--pos-space-8);
        gap: var(--pos-space-5);
    }

    .action-grid {
        gap: var(--pos-space-3);
    }

    .action-grid button {
        padding: var(--pos-space-3) var(--pos-space-6);
    }
}

@media (max-height: 820px) {
    .pos-header {
        padding: var(--pos-space-2) var(--pos-space-8);
    }

    .header-logo-img {
        height: 34px;
    }

    .pos-main-content {
        padding: var(--pos-space-3) var(--pos-space-8);
        gap: var(--pos-space-4);
    }

    .bottom-actions {
        padding: var(--pos-space-3) var(--pos-space-8);
    }

    .action-grid {
        gap: var(--pos-space-2);
    }

    .action-grid button {
        padding: var(--pos-space-2) var(--pos-space-5);
    }

    .action-grid .icon-section {
        gap: var(--pos-space-2);
    }
}

/* =========================================================================
   Touch — layout-level sizing under @media (pointer: coarse)
   Last in the file so it wins over the width and height bands above.
   Component-level touch sizing is at the end of components.css.
   ========================================================================= */
@media (pointer: coarse) {
    /* No height ceiling: the command grid takes its natural height, so no
       row is ever squeezed below a full touch target or clipped. */
    .bottom-actions {
        max-height: none;
    }

    .action-grid button {
        min-height: var(--pos-touch-target);
    }

    /* Re-asserted here because the phone band above compacts them to 38px. */
    .btn-sidebar-secondary,
    .btn-sidebar-help {
        min-height: var(--pos-touch-target);
    }
}