/* =====================================================
   QuickSale — POS-flow page scoped styles
   Tokens only: glasstock-design-system.css is the source.
   No inline styles allowed.
   ===================================================== */

/* Two-column layout on wide screens: cart on the left, summary on the right.
   Mobile-first: stacked single column. */
.qs-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-space-4);
}

@media (min-width: 1024px) {
    .qs-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: var(--gs-space-5);
        align-items: start;
    }
}

/* Customer + warehouse two-up grid. */
.qs-customer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-space-3);
}

@media (min-width: 768px) {
    .qs-customer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.qs-card-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-4);
}

/* =====================================================
   Barcode input — POS-grade focused input
   ===================================================== */
.qs-barcode-row {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-2);
}

@media (min-width: 768px) {
    .qs-barcode-row {
        flex-direction: row;
        align-items: stretch;
    }
}

.qs-barcode {
    flex: 1 1 auto;
    width: 100%;
    /* Larger and bolder so a cashier sees it from a distance. */
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.7rem 0.875rem;
    /* iOS won't auto-zoom thanks to the >=16px font size. */
    border: 2px solid var(--gs-primary);
    border-radius: var(--gs-radius);
    background: var(--gs-surface);
    color: var(--gs-text);
    outline: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.qs-barcode:focus {
    border-color: var(--gs-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.qs-barcode-hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--gs-text-muted);
}

/* The "secondary" search dropdown should not visually compete with the barcode bar. */
.qs-product-search {
    margin-top: var(--gs-space-3);
}

/* =====================================================
   Cart inline edit inputs (numeric)
   ===================================================== */
.qs-line-input {
    width: 100%;
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
    border: 1px solid var(--gs-border);
    border-radius: 6px;
    background: var(--gs-surface);
    color: var(--gs-text);
    text-align: right;
    box-sizing: border-box;
}

.qs-line-input:focus {
    outline: none;
    border-color: var(--gs-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* iOS Safari zooms inputs whose computed font-size is < 16px. */
@media (max-width: 768px) {
    .qs-line-input {
        font-size: 16px;
    }
}

.qs-line-total {
    display: inline-block;
    min-width: 5.5rem;
    font-weight: 700;
    text-align: right;
}

.qs-line-detail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--gs-border);
    background: transparent;
    color: var(--gs-text-muted);
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
    border-radius: 6px;
    cursor: pointer;
}

.qs-line-detail-toggle:focus {
    color: var(--gs-text);
    border-color: var(--gs-primary);
    outline: none;
}

@media (hover: hover) and (pointer: fine) {
    .qs-line-detail-toggle:hover {
        color: var(--gs-text);
        border-color: var(--gs-primary);
        outline: none;
    }
}

.qs-line-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gs-space-2);
    align-items: center;
    margin-top: var(--gs-space-2);
    padding: var(--gs-space-2) var(--gs-space-3);
    background: var(--gs-surface-alt, var(--gs-bg-muted, #f8f9fa));
    border-radius: 6px;
}

.qs-line-detail-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--gs-text-muted);
}

.qs-line-detail-row .qs-line-input {
    width: 5.5rem;
}

/* =====================================================
   Mobile cart card layout (used by ResponsiveTable mobile slot)
   ===================================================== */
.qs-mobile-card {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-2);
}

.qs-mobile-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gs-space-2);
}

.qs-mobile-card__title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qs-mobile-card__title strong {
    font-size: 0.95rem;
    color: var(--gs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qs-mobile-card__title small {
    color: var(--gs-text-muted);
    font-size: 0.75rem;
}

.qs-mobile-card__row {
    display: grid;
    grid-template-columns: 1fr 7rem;
    gap: var(--gs-space-2);
    align-items: center;
}

.qs-mobile-card__row label {
    font-size: 0.85rem;
    color: var(--gs-text-muted);
}

.qs-mobile-card__row .qs-line-total {
    text-align: right;
}

/* =====================================================
   Summary
   ===================================================== */
.qs-summary {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-2);
}

.qs-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.25rem 0;
    font-size: 0.95rem;
}

.qs-summary__row--discount {
    color: var(--gs-danger);
}

.qs-summary__row--grand {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gs-primary);
    padding-top: var(--gs-space-2);
    border-top: 1px solid var(--gs-border);
    margin-top: var(--gs-space-2);
}

.qs-summary__vat-breakdown {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--gs-space-1) 0;
    padding: var(--gs-space-2) var(--gs-space-3);
    background: var(--gs-surface-alt, var(--gs-bg-muted, #f8f9fa));
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--gs-text-muted);
}

.qs-summary__vat-row {
    display: flex;
    justify-content: space-between;
}

.qs-checkout-btn {
    width: 100%;
    margin-top: var(--gs-space-3);
}

/* Desktop-only sticky behavior so the right column follows scroll. */
@media (min-width: 1024px) {
    .qs-summary--desktop {
        position: sticky;
        top: var(--gs-space-6);
    }
}

/* =====================================================
   Sticky mobile bottom bar
   The mobile summary becomes a fixed bottom sheet so the
   "complete sale" CTA is always one thumb-tap away.
   ===================================================== */
.qs-summary--mobile {
    display: block;
}

@media (min-width: 1024px) {
    .qs-summary--mobile {
        display: none;
    }
}

@media (max-width: 1023.98px) {
    .qs-summary--desktop {
        display: none;
    }

    .qs-mobile-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: var(--gs-surface);
        border-top: 1px solid var(--gs-border);
        padding: var(--gs-space-3) var(--gs-space-4);
        padding-bottom: calc(var(--gs-space-3) + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        gap: var(--gs-space-3);
    }

    .qs-mobile-bar__totals {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.1;
        flex: 0 0 auto;
        min-width: 8rem;
    }

    .qs-mobile-bar__label {
        font-size: 0.7rem;
        color: var(--gs-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .qs-mobile-bar__amount {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--gs-primary);
    }

    .qs-mobile-bar__cta {
        flex: 1 1 auto;
    }

    /* Make sure the page content does not hide behind the bar. */
    .qs-page-bottom-spacer {
        height: calc(7rem + env(safe-area-inset-bottom));
    }
}

@media (min-width: 1024px) {
    .qs-mobile-bar,
    .qs-page-bottom-spacer {
        display: none;
    }
}

/* =====================================================
   Inline error under SearchableSelect for required customer
   ===================================================== */
.qs-inline-error {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: var(--gs-space-2);
    font-size: 0.82rem;
    color: var(--gs-danger);
}

/* =====================================================
   Optional (collapsible) section
   ===================================================== */
.qs-optional-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gs-space-2);
    min-height: 36px;
    padding: var(--gs-space-2) var(--gs-space-3);
    font-family: var(--gs-font-sans);
    font-size: var(--gs-text-sm);
    font-weight: 600;
    color: var(--gs-text);
    background: var(--gs-bg);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition:
        border-color var(--gs-transition-fast),
        color var(--gs-transition-fast),
        background-color var(--gs-transition-fast);
}

.qs-optional-toggle:focus {
    border-color: var(--gs-primary);
    color: var(--gs-primary);
    outline: none;
}

@media (hover: hover) and (pointer: fine) {
    .qs-optional-toggle:hover {
        border-color: var(--gs-primary);
        color: var(--gs-primary);
        outline: none;
    }
}

.qs-optional-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-space-3);
}

@media (min-width: 768px) {
    .qs-optional-grid {
        grid-template-columns: 1fr 2fr;
    }
}

/* =====================================================
   Confirm dialog details — 2-column key/value rows
   ===================================================== */
.qs-confirm-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.qs-confirm-row--total {
    color: var(--gs-primary);
    font-weight: 700;
    font-size: 1rem;
    margin-top: var(--gs-space-2);
    padding-top: var(--gs-space-2);
    border-top: 1px solid var(--gs-border);
}