/* =========================================================
   DB PDV · responsivo / mobile e tablets
   Arquivo separado por área para facilitar manutenção.
   ========================================================= */

@media (max-width: 1120px) {
    .sidebar {
        width: 260px;
    }

    .main {
        margin-left: 260px;
    }

    .pdv,
    .dash-grid,
    .report-grid {
        grid-template-columns: 1fr;
    }

    .cart {
        position: static;
        height: auto;
    }

    .plans,
    .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .sidebar {
        position: static;
        width: auto;
        min-height: auto;
    }

    .main {
        margin-left: 0;
    }

    .page-head,
    .toolbar,
    .pdv-search,
    .form-grid,
    .plans,
    .metrics,
    .metrics.three {
        grid-template-columns: 1fr;
    }

    .page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .span-2 {
        grid-column: auto;
    }

    .page-head h1 {
        font-size: 34px;
    }

    .pdv,
    .metrics,
    .dash-grid,
    .report-grid {
        padding-left: 18px;
        padding-right: 18px;
    }

    .card,
    .toolbar,
    .balance-band,
    .trial-band,
    .actions-row {
        margin-left: 18px;
        margin-right: 18px;
    }

    .cart-row {
        grid-template-columns: 1fr 70px;
    }
}

/* =========================================================
   Correção responsiva geral — smartphone/tablet + PDV mobile
   Mantém desktop intacto e impede estouro lateral.
   ========================================================= */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.app-body,
.main,
.card,
.list-card,
.toolbar,
.actions-row,
.report-filter,
.modal-box,
.receipt-paper,
.cash-report-paper,
.pdv,
.pdv-catalog,
.cart,
.pdv-checkout-card,
.cart-footer,
.pdv-checkout-footer {
    min-width: 0 !important;
    max-width: 100% !important;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

/* Páginas internas: tabelas e formulários não podem quebrar a tela */
body:not(.pdv-mode) .list-card,
body:not(.pdv-mode) .table-wrap,
body:not(.pdv-mode) .purchase-items,
body:not(.pdv-mode) .inventory-list,
body:not(.pdv-mode) .recent-closures-card,
body:not(.pdv-mode) .cash-report-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

body:not(.pdv-mode) .toolbar,
body:not(.pdv-mode) .actions-row,
body:not(.pdv-mode) .report-filter,
body:not(.pdv-mode) .filter-toolbar,
body:not(.pdv-mode) .card-head {
    flex-wrap: wrap !important;
}

body:not(.pdv-mode) .toolbar > *,
body:not(.pdv-mode) .actions-row > *,
body:not(.pdv-mode) .report-filter > *,
body:not(.pdv-mode) .filter-toolbar > * {
    min-width: 0 !important;
}

@media (max-width: 900px) {
    body:not(.pdv-mode) .main {
        width: 100% !important;
        margin-left: 0 !important;
        overflow-x: hidden !important;
    }

    body:not(.pdv-mode) .bar {
        width: 100% !important;
    }

    body:not(.pdv-mode) .card,
    body:not(.pdv-mode) .list-card,
    body:not(.pdv-mode) .toolbar,
    body:not(.pdv-mode) .balance-band,
    body:not(.pdv-mode) .trial-band,
    body:not(.pdv-mode) .actions-row,
    body:not(.pdv-mode) .report-filter,
    body:not(.pdv-mode) .stock-alert-dash,
    body:not(.pdv-mode) .cash-control-grid,
    body:not(.pdv-mode) .cash-closed-grid {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    body:not(.pdv-mode) .toolbar,
    body:not(.pdv-mode) .actions-row,
    body:not(.pdv-mode) .report-filter,
    body:not(.pdv-mode) .filter-toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    body:not(.pdv-mode) .toolbar .btn,
    body:not(.pdv-mode) .actions-row .btn,
    body:not(.pdv-mode) .report-filter .btn,
    body:not(.pdv-mode) .filter-toolbar .btn,
    body:not(.pdv-mode) .toolbar input,
    body:not(.pdv-mode) .toolbar select,
    body:not(.pdv-mode) .actions-row input,
    body:not(.pdv-mode) .actions-row select,
    body:not(.pdv-mode) .report-filter input,
    body:not(.pdv-mode) .report-filter select,
    body:not(.pdv-mode) .filter-toolbar input,
    body:not(.pdv-mode) .filter-toolbar select {
        width: 100% !important;
        min-width: 0 !important;
    }

    body:not(.pdv-mode) .metrics,
    body:not(.pdv-mode) .compact-metrics,
    body:not(.pdv-mode) .payment-grid,
    body:not(.pdv-mode) .report-grid,
    body:not(.pdv-mode) .payment-report-grid {
        grid-template-columns: 1fr !important;
    }

    body:not(.pdv-mode) .dash-grid,
    body:not(.pdv-mode) .report-grid,
    body:not(.pdv-mode) .cash-control-grid,
    body:not(.pdv-mode) .cash-closed-grid {
        grid-template-columns: 1fr !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 14px !important;
    }

    body:not(.pdv-mode) .modal-box,
    body:not(.pdv-mode) .modal-box.large {
        width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 24px) !important;
        overflow: auto !important;
        border-radius: 18px !important;
    }
}

/* PDV: layout próprio para celular — catálogo em cima, carrinho abaixo, sem corte lateral */
@media (max-width: 980px) {
    html:has(body.pdv-mode),
    body.pdv-mode {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    body.pdv-mode .main {
        width: 100% !important;
        min-height: 100dvh !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    body.pdv-mode .bar {
        height: auto !important;
        min-height: 62px !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 60 !important;
        background: rgba(255, 249, 239, .97) !important;
        backdrop-filter: blur(8px);
    }

    body.pdv-mode .brand.mini,
    body.pdv-mode .brand {
        min-width: 0 !important;
        gap: 9px !important;
        font-size: 22px !important;
        flex: 1 1 auto !important;
    }

    body.pdv-mode .brand.mini strong,
    body.pdv-mode .brand strong {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.pdv-mode .brand-bolt {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
    }

    body.pdv-mode .pdv-top-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        gap: 8px !important;
    }

    body.pdv-mode .pdv-top-actions .btn {
        min-height: 42px !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
    }

    body.pdv-mode .toast {
        width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
        padding: 13px 14px !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    body.pdv-mode .pdv {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 12px !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    body.pdv-mode .pdv-catalog {
        width: 100% !important;
        display: block !important;
        overflow: visible !important;
    }

    body.pdv-mode .pdv-search {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    body.pdv-mode .pdv-search input,
    body.pdv-mode .pdv-search select {
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        font-size: 14px !important;
        border-radius: 14px !important;
    }

    body.pdv-mode .product-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    body.pdv-mode .product-tile {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 146px !important;
        padding: 10px !important;
        border-radius: 14px !important;
        gap: 5px !important;
    }

    body.pdv-mode .product-tile img {
        height: 58px !important;
        padding: 4px !important;
        border-radius: 10px !important;
        object-fit: contain !important;
    }

    body.pdv-mode .product-tile strong {
        font-size: 13px !important;
        line-height: 1.15 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
    }

    body.pdv-mode .product-tile span {
        font-size: 18px !important;
        line-height: 1.05 !important;
    }

    body.pdv-mode .product-tile small {
        font-size: 10.5px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    body.pdv-mode .pdv-checkout-card,
    body.pdv-mode .cart {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-rows: auto auto auto !important;
        overflow: visible !important;
        border-radius: 18px !important;
        position: relative !important;
        top: auto !important;
    }

    body.pdv-mode .cart-header {
        min-height: 48px !important;
        padding: 9px 12px !important;
        gap: 8px !important;
    }

    body.pdv-mode .cart-header h2,
    body.pdv-mode .cart h2 {
        font-size: 21px !important;
        min-width: 0 !important;
    }

    body.pdv-mode .cart-clear {
        min-width: 0 !important;
        flex: 0 0 auto !important;
        padding: 0 10px !important;
    }

    body.pdv-mode .cart-body {
        width: 100% !important;
        min-height: 96px !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 9px 10px !important;
    }

    body.pdv-mode .cart-body .empty,
    body.pdv-mode [data-cart-empty] {
        padding: 26px 10px !important;
        font-size: 17px !important;
        line-height: 1.25 !important;
    }

    body.pdv-mode .cart-items {
        width: 100% !important;
        gap: 7px !important;
    }

    body.pdv-mode .cart-row {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) 84px 58px 28px !important;
        gap: 5px !important;
        padding: 7px !important;
        border-radius: 13px !important;
        min-height: 54px !important;
    }

    body.pdv-mode .cart-item-main {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    body.pdv-mode .cart-product-img,
    body.pdv-mode .cart-product-placeholder {
        width: 34px !important;
        height: 34px !important;
        border-radius: 9px !important;
    }

    body.pdv-mode .cart-item-main strong {
        font-size: 12.5px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    body.pdv-mode .cart-item-main small {
        font-size: 9.8px !important;
        line-height: 1.05 !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
    }

    body.pdv-mode .qty-control {
        grid-template-columns: 24px minmax(26px, 1fr) 24px !important;
        gap: 2px !important;
    }

    body.pdv-mode .qty-control input {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 2px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    body.pdv-mode .qty-control button,
    body.pdv-mode .cart-remove {
        width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
    }

    body.pdv-mode .cart-line-total {
        font-size: 12px !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    body.pdv-mode .cart-footer,
    body.pdv-mode .pdv-checkout-footer {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        bottom: auto !important;
        display: grid !important;
        gap: 8px !important;
        padding: 9px 10px 12px !important;
        overflow: visible !important;
        max-height: none !important;
        box-shadow: 0 -8px 18px rgba(37, 23, 20, .06) !important;
    }

    body.pdv-mode .checkout-summary {
        width: 100% !important;
        padding: 9px 10px !important;
        border-radius: 14px !important;
    }

    body.pdv-mode .checkout-summary span {
        font-size: 12px !important;
    }

    body.pdv-mode .checkout-summary strong {
        font-size: 18px !important;
        gap: 8px !important;
        line-height: 1 !important;
    }

    body.pdv-mode .checkout-summary strong b {
        font-size: clamp(26px, 9vw, 34px) !important;
        line-height: .95 !important;
        white-space: nowrap !important;
    }

    body.pdv-mode .checkout-form-grid {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    body.pdv-mode .customer-select,
    body.pdv-mode .discount-field input,
    body.pdv-mode .payment-select-wrap select,
    body.pdv-mode .pdv-payment-fields input,
    body.pdv-mode .payment-grid input {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        font-size: 14px !important;
        border-radius: 13px !important;
    }

    body.pdv-mode .payment-title {
        gap: 8px !important;
    }

    body.pdv-mode .payment-title strong {
        font-size: 13.5px !important;
    }

    body.pdv-mode .payment-title small {
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    body.pdv-mode .payment-box,
    body.pdv-mode .compact-payment-box {
        width: 100% !important;
        padding: 9px !important;
        border-radius: 14px !important;
        gap: 7px !important;
    }

    body.pdv-mode .pdv-payment-fields,
    body.pdv-mode .payment-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        gap: 6px !important;
    }

    body.pdv-mode .payment-status span {
        min-height: 32px !important;
        padding: 6px 9px !important;
        font-size: 12px !important;
    }

    body.pdv-mode .payment-status b {
        font-size: 17px !important;
    }

    body.pdv-mode .finish-sale {
        width: 100% !important;
        position: static !important;
        bottom: auto !important;
        min-height: 52px !important;
        height: auto !important;
        padding: 0 14px !important;
        border-radius: 15px !important;
        gap: 10px !important;
    }

    body.pdv-mode .finish-sale span {
        font-size: 16px !important;
        white-space: nowrap !important;
    }

    body.pdv-mode .finish-sale b {
        font-size: 18px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 430px) {
    body.pdv-mode .bar {
        padding: 9px 10px !important;
    }

    body.pdv-mode .brand.mini,
    body.pdv-mode .brand {
        font-size: 20px !important;
    }

    body.pdv-mode .brand-bolt {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }

    body.pdv-mode .pdv-top-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    body.pdv-mode .pdv-top-actions .btn {
        width: 100% !important;
        min-height: 40px !important;
        font-size: 13px !important;
    }

    body.pdv-mode .pdv {
        padding: 8px !important;
        gap: 10px !important;
    }

    body.pdv-mode .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.pdv-mode .product-tile {
        min-height: 136px !important;
        padding: 8px !important;
    }

    body.pdv-mode .product-tile img {
        height: 50px !important;
    }

    body.pdv-mode .product-tile strong {
        font-size: 12px !important;
    }

    body.pdv-mode .product-tile span {
        font-size: 16px !important;
    }

    body.pdv-mode .product-tile small {
        font-size: 9.5px !important;
    }

    body.pdv-mode .cart-header h2,
    body.pdv-mode .cart h2 {
        font-size: 20px !important;
    }

    body.pdv-mode .cart-row {
        grid-template-columns: minmax(0, 1fr) 78px 28px !important;
        grid-template-areas:
            "info qty remove"
            "info total remove" !important;
        align-items: center !important;
    }

    body.pdv-mode .cart-item-main { grid-area: info !important; }
    body.pdv-mode .qty-control { grid-area: qty !important; }
    body.pdv-mode .cart-line-total { grid-area: total !important; text-align: center !important; }
    body.pdv-mode .cart-remove { grid-area: remove !important; }

    body.pdv-mode .cart-product-img,
    body.pdv-mode .cart-product-placeholder {
        display: none !important;
    }

    body.pdv-mode .cart-item-main {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.pdv-mode .checkout-summary strong {
        flex-wrap: wrap !important;
    }

    body.pdv-mode .checkout-summary strong b {
        margin-left: auto !important;
        font-size: clamp(25px, 10vw, 31px) !important;
    }

    body.pdv-mode .payment-title small {
        display: none !important;
    }

    body.pdv-mode .finish-sale span {
        font-size: 14px !important;
    }

    body.pdv-mode .finish-sale b {
        font-size: 16px !important;
    }
}

@media (max-width: 360px) {
    body.pdv-mode .product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Hotfix PDV mobile · múltiplos pagamentos com rolagem e botão acessível */
@media (max-width: 980px) {
    body.pdv-mode .pdv.is-mixed-payment .pdv-checkout-footer,
    body.pdv-mode .pdv-checkout-footer.is-mixed-payment,
    body.pdv-mode .cart.is-mixed-payment .cart-footer {
        position: sticky !important;
        bottom: 0 !important;
        max-height: min(72vh, 520px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    }

    body.pdv-mode .pdv.is-mixed-payment .pdv-payment-fields,
    body.pdv-mode .pdv.is-mixed-payment .payment-grid {
        max-height: 156px !important;
        overflow-y: auto !important;
    }

    body.pdv-mode .pdv.is-mixed-payment .finish-sale {
        position: sticky !important;
        bottom: 0 !important;
        min-height: 52px !important;
    }
}