/* Final layout correction for the fast sales/POS screen.
   Loaded after sale-fast-pos.css. Keeps the sales logic untouched and only stabilizes layout. */

.sale-pro-page,
.sale-pro-grid,
.sale-main,
.sale-summary,
.sale-card,
.sale-product-card,
.sale-items-card,
.sale-product-tools,
.sale-add-item-panel {
    box-sizing: border-box !important;
}

.sale-pro-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.sale-main,
.sale-summary,
.sale-card,
.sale-product-card,
.sale-items-card,
.sale-field,
.sale-scan-box,
.sale-product-search-wrap {
    min-width: 0 !important;
}

@media (min-width: 1101px) {
    .sale-pro-grid {
        display: grid !important;
        grid-template-columns: 270px minmax(0, 1fr) !important;
        grid-template-areas: "summary main" !important;
        gap: 12px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: none !important;
        direction: ltr !important;
    }

    .sale-summary {
        grid-area: summary !important;
        order: initial !important;
        width: 270px !important;
        max-width: 270px !important;
        min-width: 270px !important;
        flex: none !important;
        position: sticky !important;
        top: 12px !important;
        direction: rtl !important;
        overflow: hidden !important;
    }

    .sale-main {
        grid-area: main !important;
        order: initial !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        overflow: visible !important;
        direction: rtl !important;
    }

    .sale-main > .sale-card,
    .sale-product-card,
    .sale-items-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .sale-form-grid {
        width: 100% !important;
        grid-template-columns: minmax(230px, 1.6fr) minmax(135px, .8fr) minmax(135px, .8fr) !important;
        gap: 8px !important;
    }

    .sale-product-tools {
        width: 100% !important;
        grid-template-columns: minmax(230px, .85fr) minmax(280px, 1.15fr) !important;
        gap: 8px !important;
    }

    /* Keep all item inputs inside the product card. The action gets its own full-width row. */
    .sale-add-item-panel {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: minmax(170px, 1.5fr) 78px minmax(105px, .8fr) 84px 84px !important;
        gap: 7px !important;
        overflow: hidden !important;
    }

    .sale-add-item-panel > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .sale-add-action {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .sale-add-product-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .sale-scan-box,
    .sale-product-search-wrap,
    .sale-search-input-wrap,
    .sale-barcode-input,
    .sale-search-input-wrap .form-control {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

@media (min-width: 1101px) and (max-width: 1279px) {
    .sale-pro-grid {
        grid-template-columns: 244px minmax(0, 1fr) !important;
    }

    .sale-summary {
        width: 244px !important;
        max-width: 244px !important;
        min-width: 244px !important;
    }

    .sale-form-grid {
        grid-template-columns: minmax(210px, 1.45fr) minmax(120px, .8fr) !important;
    }

    .sale-field-customer-search {
        grid-column: 1 / -1 !important;
    }

    .sale-product-tools {
        grid-template-columns: 1fr 1.2fr !important;
    }

    .sale-add-item-panel {
        grid-template-columns: minmax(150px, 1.4fr) 74px minmax(96px, .8fr) 78px !important;
    }

    .sale-add-item-panel > .sale-field:nth-child(5) {
        grid-column: span 1 !important;
    }
}

@media (max-width: 1100px) and (min-width: 761px) {
    .sale-pro-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .sale-main,
    .sale-summary {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .sale-summary {
        position: static !important;
    }

    .sale-form-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important;
    }

    .sale-field-customer-search {
        grid-column: 1 / -1 !important;
    }

    .sale-product-tools {
        grid-template-columns: 1fr 1fr !important;
    }

    .sale-add-item-panel {
        grid-template-columns: minmax(0, 1.4fr) 90px minmax(100px, .8fr) !important;
        overflow: hidden !important;
    }

    .sale-add-action {
        grid-column: 1 / -1 !important;
    }

    .sale-add-product-btn {
        width: 100% !important;
    }
}

@media (max-width: 760px) {
    .sale-pro-page {
        overflow-x: hidden !important;
        padding-bottom: 18px !important;
    }

    .sale-pro-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        direction: rtl !important;
    }

    .sale-main,
    .sale-card,
    .sale-product-card,
    .sale-items-card,
    .sale-product-tools,
    .sale-add-item-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .sale-main {
        order: 1 !important;
    }

    .sale-summary {
        order: 2 !important;
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 10px !important;
        overflow: visible !important;
        z-index: auto !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .08) !important;
    }

    .sale-summary-head,
    .sale-summary-row,
    .sale-side-warning {
        display: none !important;
    }

    .sale-summary-final {
        min-height: 48px !important;
        margin: 0 !important;
    }

    .sale-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        margin-top: 7px !important;
    }

    .sale-actions .erp-btn {
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .sale-actions .erp-btn:nth-child(1),
    .sale-actions .erp-btn:nth-child(2) {
        display: inline-flex !important;
    }

    .sale-actions .erp-btn:first-child {
        grid-column: auto !important;
    }

    .sale-add-item-panel {
        overflow: hidden !important;
    }

    .sale-add-item-panel > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .sale-add-action,
    .sale-add-product-btn {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 560px) {
    .sale-summary {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .sale-actions {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Keep every checkout action readable and inside the summary card on tablet/mobile.
   This deliberately overrides the older fixed three-column POS bar. */
@media (max-width: 1100px) {
    .sale-pro-page .sale-summary {
        display: block !important;
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: none !important;
        overflow: visible !important;
    }

    .sale-pro-page .sale-summary .sale-summary-final {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .sale-pro-page .sale-summary .sale-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-top: 8px !important;
    }

    .sale-pro-page .sale-summary .sale-actions .erp-btn {
        display: inline-flex !important;
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        height: auto !important;
        padding: 9px 8px !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .sale-pro-page .sale-summary .sale-actions .erp-btn:first-child,
    .sale-pro-page .sale-summary .sale-actions .erp-btn-danger {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 560px) {
    .sale-pro-page .sale-summary .sale-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .sale-pro-page .sale-summary .sale-actions .erp-btn,
    .sale-pro-page .sale-summary .sale-actions .erp-btn:first-child,
    .sale-pro-page .sale-summary .sale-actions .erp-btn-danger {
        grid-column: 1 !important;
    }
}