/* =========================================================================
   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);
    min-height: 100vh;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: hidden;
    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-base);
    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: column;
    gap: var(--pos-space-4);
}

.header-item-scan-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pos-space-4);
}

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

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

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

.customer-info-section .search-container {
    display: flex;
    align-items: flex-start;
    gap: var(--pos-space-5);
    width: calc(100% - 120px);
}

.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;
    width: calc(100% - 620px);
}

/* ---- 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 ----------------------------------------------------- */
.pos-sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-4);
    background: var(--pos-canvas);
    order: 2;
}

.totals-section {
    background-color: var(--pos-surface-accent);
    border-radius: 0px;
    padding: var(--pos-space-6);
    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-on-dark);
}

.sale-total-container {
    border-top: 1px solid var(--pos-text-on-dark);
    padding-top: var(--pos-space-5);
    color: var(--pos-text-on-dark);
    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-base);
}

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

.action-grid {
    width: 98vw;
    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);
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* 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: 1919px) {
    .header-logo-img {
        height: 50px;
    }
}
/* Laptop (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .header-logo-img {
        height: 45px;
    }

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

    .action-grid {
        gap: var(--pos-space-4);
    }
}
/* Tablet Landscape (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {

    .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);
    }
}
/* Tablet Portrait (600px to 767px) */
@media (min-width: 600px) and (max-width: 767px) {

    .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: 599px) {

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

@media (min-width: 990px) and (max-width: 1024px) {
    .customer-info-section .section-title {
        min-width: 100px;
    }

    .customer-info-section,
    .customer-info-section .search-container {
        flex-direction: column;
        width: 100%;
    }

    .action-buttons,
    .customer-info-section .search-box {
        width: 100%;
    }
}

@media (min-width: 1025px) {
    .header-row {
        justify-content: space-between;
    }

    .header-item-scan-section {
        width: 420px;
    }

    .left-column {
        width: calc(100% - 350px);
    }
}

@media (max-width: 1023px) {
    .customer-info-section .section-title {
        min-width: 100px;
    }

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

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

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

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

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

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