/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
   Regras responsivas para dispositivos móveis em geral

   SEÇÕES:
     1.  Layout & Grid Base
     2.  Header Mobile (título, search, botão Nova Venda, filtros row-2)
     3.  Sale Card Base (estrutura, espaçamentos, chips)
     4.  Produtos dentro do Card (grid, imagens, badges)
     5.  Blocos Financeiros (grid 3-col)
     6.  Actions & Botões (grid 5-col, form)
     7.  Modais (filtro, info, delete, tips)
     8.  Paginação
     9.  Outros Widgets (stat card, action card, floating badge)
   ═══════════════════════════════════════════════════════════ */

/* Label dos botões de ação: oculto no desktop, exibido no mobile via Seção 6 */
.sale-action-label {
    display: none;
    font-size: 0.46rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════
   SEÇÃO 1: Layout & Grid Base
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    /* Densidade de fonte e padding base */
    .sales-index-page,
    .publications-page,
    .products-index-page,
    .publication-show-page,
    .sale-show-page {
        --app-density-font: 0.95;
        padding-inline: 0.45rem;
    }

    .sales-index-page .sales-index-header-row-1,
    .sales-index-page .sales-index-header-row-2,
    .publications-page .publications-header-row-1 {
        gap: 0.55rem;
    }

    .sales-index-page .sales-index-header-title,
    .publications-page h1 {
        font-size: clamp(1.3rem, 6vw, 1.75rem) !important;
        line-height: 1.15;
    }

    .sales-index-page .sales-index-header-row-2-left,
    .publications-page .publications-header-controls {
        width: 100%;
        flex-wrap: wrap;
    }

    .publication-show-page .container,
    .sale-show-page .container-fluid {
        padding-inline: 0.5rem !important;
    }

    .sales-index-page .sales-grid,
    .publications-page .products-grid {
        gap: 0.85rem !important;
    }

    .sales-index-page .sales-pagination-shell {
        padding: 0.75rem !important;
        gap: 0.6rem !important;
    }
}

/* Grid de vendas: 1 coluna em mobile pequeno */
@media (max-width: 639.98px) {
    .sales-index-page .sales-grid,
    .sales-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   SEÇÃO 2: Header Mobile
   Layout:  [🛒 Vendas ........]  [+ Nova Venda]
            [🔍 Buscar vendas — full width        ]
   Row-2:   [Todos pill  ↔ scroll] ... [Paginação] [Ações]
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    /* Container do header */
    .sales-index-header {
        border-radius: 1.1rem;
        margin-bottom: 0.85rem;
    }

    .sales-index-header-inner {
        padding: 0.85rem 0.75rem;
    }

    .sales-index-header-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
    .sales-index-header-icon i { font-size: 1.1rem; }

    .sales-index-header-title {
        font-size: 1.35rem !important;
    }

    /* Row 1: [Icon+Título]  [+ Nova Venda]
              [Search — full width abaixo    ] */
    .sales-index-page .sales-index-header-row-1 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.45rem;
        align-items: center;
    }

    /* Left (ícone + título): cresce para preencher a linha */
    .sales-index-page .sales-index-header-left {
        flex: 1 1 auto;
        min-width: 0;
        gap: 0.55rem;
        align-items: center;
    }

    /* Search: salta para a próxima linha, ocupa toda a largura */
    .sales-index-page .sales-index-header-search {
        order: 10;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
    .sales-index-page .sales-index-header-search input {
        font-size: 16px;
        min-height: 44px;
        border-radius: 0.85rem;
        padding-left: 2.75rem;
    }

    /* Nova Venda: compacto, sem forçar linha inteira */
    .sales-index-page .sales-index-header-btn-create {
        flex: 0 0 auto;
        justify-content: center;
        min-height: 44px;
        padding-inline: 1.1rem !important;
        white-space: nowrap;
    }

    /* Ocultar elementos desnecessários */
    .sales-index-page .sales-mobile-hide,
    .sales-index-page .sales-index-header-badges {
        display: none !important;
    }

    /* Ocultar pills que poluem o header mobile */
    .sales-index-page .sale-sort-pills,
    .sales-index-page .sale-period-pills,
    .sales-index-page .sale-perpage-pills,
    .sales-index-page .sale-filter-pill.pill-warning,
    .sales-index-page .sale-filter-pill.pill-success {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }

    /* Row-2: linha única horizontal */
    .sales-index-page .sales-index-header-row-2 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
        padding: 0.4rem 0 !important;
        min-height: 0 !important;
    }

    /* Left: pills de status — scroll horizontal */
    .sales-index-page .sales-index-header-row-2-left {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.25rem !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .sales-index-page .sales-index-header-row-2-left::-webkit-scrollbar {
        display: none;
    }

    /* Todos pill: compacto */
    .sales-index-page .sale-filter-pills:first-child {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        background: rgba(241, 245, 249, 0.9) !important;
    }

    /* Label de pill: apenas ícone em mobile */
    .sales-index-page .sale-filter-pill-label {
        padding: 0.25rem 0.42rem;
        border-right: none;
        margin-right: 0;
        background: rgba(148, 163, 184, 0.16);
        border-radius: 0.5rem;
        flex-shrink: 0;
    }
    .sales-index-page .sale-filter-pill-label span {
        display: none;
    }

    /* Right: paginação e ações */
    .sales-index-page .sales-index-header-row-2-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.25rem !important;
        flex-shrink: 0 !important;
        justify-content: flex-end !important;
        width: auto !important;
    }

    /* Paginação compacta */
    .sales-index-page .sale-pagination-compact {
        margin-right: 0 !important;
        gap: 0.15rem !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Botões de ação do header */
    .sales-index-page .sale-action-btn {
        min-width: 2.2rem !important;
        min-height: 2.2rem !important;
        width: 2.2rem !important;
        height: 2.2rem !important;
        padding: 0 !important;
    }

    /* Pills gerais */
    .sale-badge {
        font-size: 0.65rem;
        padding: 0.25rem 0.55rem;
    }
    .sale-filter-pill {
        flex: 1;
        justify-content: center;
        font-size: 0.65rem;
        padding: 0.4rem 0.3rem;
    }
    .sale-filter-pill.pill-perpage {
        flex: 1;
        min-width: 0;
        font-size: 0.62rem;
        padding: 0.35rem 0.2rem;
    }
    .sale-filter-pill-solo {
        width: 100%;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════════
   SEÇÃO 3: Sale Card Base
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .sales-grid {
        gap: 0.9rem;
    }

    .sale-card {
        border-radius: 1rem;
        padding: 0.95rem;
        gap: 0.75rem;
    }

    .sale-card-header > .flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .sale-card-header > .flex > div:last-child {
        width: 100%;
        justify-content: flex-start;
    }

    .sale-card-chip,
    .sale-card-status,
    .sale-card-tag {
        font-size: 0.68rem;
    }

    .sale-card-client {
        align-items: flex-start;
        gap: 0.65rem;
    }

    .sale-card-payment-pills {
        margin-left: 0;
        width: 100%;
    }

    .sale-card-financial {
        flex-wrap: wrap !important;
        gap: 0.55rem !important;
    }

    .sale-card-financial .sale-card-financial-block,
    .sale-card-financial .sale-card-total-block {
        flex: 1 1 calc(50% - 0.3rem) !important;
    }

    .sale-card-progress-status {
        padding: 0.45rem 0.5rem;
        gap: 0.5rem;
    }

    .sale-card-progress-status-icon {
        width: 1.65rem;
        height: 1.65rem;
        font-size: 0.8rem;
    }

    .sale-card-progress-status strong {
        font-size: 0.74rem;
    }
}


/* ═══════════════════════════════════════════════════════════
   SEÇÃO 4: Produtos dentro do Card
   ═══════════════════════════════════════════════════════════ */

/* Grade: 3 colunas em mobile (≤767.98px) */
@media (max-width: 767.98px) {
    .sale-card-products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.35rem;
        --sale-product-card-min-height: 180px;
        --sale-product-image-height: 155px;
        --sale-product-image-max-height: 100px;
    }

    .sales-grid .sale-card .sale-card-products {
        --sale-product-card-min-height: 180px !important;
        --sale-product-image-height: 155px !important;
        --sale-product-image-max-height: 100px !important;
    }

    .sales-grid .sale-card .sale-card-product .product-img-area {
        min-height: 155px !important;
        height: 155px !important;
    }

    .sale-card-product.product-card-modern .card-body {
        padding: 0.3rem 0.3rem 0.45rem 0.3rem;
        gap: 0.08rem;
    }

    .sale-card-product .product-title,
    .sale-card-client-info h3 {
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .sale-card-product .product-title {
        font-size: 0.66rem;
        line-height: 1.15;
    }

    /* Badge com código do produto: menor para caber em 3-col */
    .sale-card-product .badge-product-code,
    .sale-card-product .badge-quantity {
        font-size: 0.58rem;
        padding: 0.08rem 0.22rem;
        border-radius: 0.35rem;
    }

    /* Preços: reduzidos para 3-col */
    .sale-card-product .badge-price,
    .sale-card-product .badge-price-sale {
        font-size: 0.62rem;
        padding: 0.06rem 0.14rem;
    }

    .sales-grid .sale-card .sale-card-product .badge-product-code {
        font-size: 0.58rem !important;
        padding: 0.08rem 0.22rem !important;
    }

    .sales-grid .sale-card .sale-card-product .badge-price,
    .sales-grid .sale-card .sale-card-product .badge-price-sale {
        font-size: 0.62rem !important;
        padding: 0.06rem 0.14rem !important;
        min-width: auto !important;
    }

    .sale-card-product .price-area {
        min-height: 1.2rem;
        gap: 0.18rem;
        flex-wrap: wrap;
    }
}


/* ═══════════════════════════════════════════════════════════
   SEÇÃO 5: Blocos Financeiros
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    /* Grid financeiro: 3 colunas em linha */
    .sale-card-financial-grid {
        flex-direction: row;
        gap: 0.35rem;
    }

    .sale-card-fin-block {
        padding: 0.45rem 0.5rem;
        gap: 0.35rem;
    }

    .sale-card-fin-icon {
        width: 1.6rem;
        height: 1.6rem;
        font-size: 0.7rem;
    }

    .sale-card-fin-data span   { font-size: 0.6rem; }
    .sale-card-fin-data strong { font-size: 0.86rem; }
}

/* Financeiro empilhado em telas muito pequenas */
@media (max-width: 420px) {
    .sale-card-financial .sale-card-financial-block,
    .sale-card-financial .sale-card-total-block {
        flex: 1 1 100% !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   SEÇÃO 6: Actions & Botões
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    /* Grid de ações: 5 colunas */
    .sale-card-actions {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.4rem;
        overflow: visible;
        padding-bottom: 0;
        padding: 0.5rem !important;
    }

    .sale-card-actions::-webkit-scrollbar { height: 4px; }

    .sale-card-actions .relative {
        width: 100%;
    }

    /* Botões: coluna com ícone + label */
    .sale-card-actions .relative > a,
    .sale-card-actions .relative > button,
    .sale-card-icon-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 3.2rem !important;
        flex-direction: column !important;
        padding: 0.45rem 0.25rem 0.5rem !important;
        border-radius: 0.85rem !important;
        gap: 0.1rem !important;
        justify-content: center !important;
    }

    /* Label abaixo do ícone */
    .sale-action-label {
        display: block !important;
        font-size: 0.46rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        opacity: 0.92;
    }

    /* Ícone menor para dar espaço ao label */
    .sale-card-actions .relative > a i,
    .sale-card-actions .relative > button i,
    .sale-card-icon-btn i {
        font-size: 0.95rem !important;
        line-height: 1 !important;
    }

    /* Formulários de venda */
    .sales-btn-primary,
    .sales-btn-secondary {
        padding: 12px 16px;
        font-size: 14px;
        width: 100%;
        margin-bottom: 8px;
    }

    .sales-product-card { margin-bottom: 16px; }

    .sales-form-input {
        padding: 12px;
        font-size: 16px;
    }

    .sales-step-indicator {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════
   SEÇÃO 7: Modais
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    /* Modal de filtro */
    .sales-filter-modal-panel {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 1.2rem;
        margin: 0.5rem;
    }
    .sales-filter-modal-body {
        padding: 0.85rem;
    }
    .sales-filter-modal-body .grid {
        grid-template-columns: 1fr !important;
    }

    /* Modal de informações do card */
    .sale-card-info-modal {
        align-items: flex-end;
        padding: 0.5rem;
    }
    .sale-card-info-modal-panel {
        width: 100%;
        border-radius: 1rem;
        padding: 0.75rem;
    }
    .sale-card-info-modal-grid {
        grid-template-columns: 1fr;
    }

    /* Modal de exclusão — desliza da parte inferior */
    .sales-delete-modal-overlay {
        align-items: flex-end;
    }
    .sales-delete-modal-panel {
        padding: 0.65rem;
        max-width: 100%;
        width: 100%;
    }
    .sales-delete-modal-panel > div {
        border-radius: 1rem;
    }
    .sales-delete-modal-panel .p-6 {
        padding: 1rem;
    }

    /* Modal de dicas — desliza da parte inferior */
    .sales-tips-modal-overlay {
        align-items: flex-end;
        padding: 0.5rem;
    }
    .sales-tips-modal-panel {
        max-height: 95vh;
        border-radius: 1.25rem;
    }
    .sales-tips-modal-content {
        padding: 1rem;
        max-height: calc(95vh - 220px);
    }
    .sales-tips-modal-footer {
        padding: 0.9rem 1rem;
    }
    .sales-tips-modal-footer > div {
        gap: 0.5rem;
    }
}


/* ═══════════════════════════════════════════════════════════
   SEÇÃO 8: Paginação
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .sales-pagination-shell {
        align-items: stretch;
        gap: 0.9rem;
        padding: 0.9rem;
    }

    .sales-pagination-left,
    .sales-pagination-center,
    .sales-pagination-right {
        width: 100%;
    }

    .sales-pagination-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.55rem;
    }

    .sales-per-page {
        width: 100%;
        justify-content: space-between;
    }

    .sales-pagination-center {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.2rem;
        -webkit-overflow-scrolling: touch;
    }

    .sales-pagination-right {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
    }

    .sales-pagination-right input {
        width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════
   SEÇÃO 9: Outros Widgets
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 639.98px) {
    /* Stat card */
    .stat-card {
        min-height: 100px;
    }

    /* Action card */
    .action-card {
        padding: 1rem;
    }

    /* Badge flutuante: sem animação em mobile (performance) */
    .floating-badge {
        animation: none;
    }
}