/**
 * =========================================================
 * OZPro ERP — Mobile Responsive CSS
 * =========================================================
 * Responsividade completa: mobile-first, tablet, desktop
 * Complementa main.css sem quebrar o layout existente
 * =========================================================
 *
 * Breakpoints:
 *   xs  — até 360px   (celular pequeno)
 *   sm  — até 480px   (celular médio)
 *   md  — até 768px   (celular grande / landscape)
 *   lg  — até 1024px  (tablet)
 *   xl  — até 1280px  (tablet grande / laptop pequeno)
 * =========================================================
 */

/* ─── BASE UNIVERSAL ──────────────────────────────────────
   Garante que NADA ultrapasse a tela em nenhum cenário     */
*, *::before, *::after {
    box-sizing: border-box;
    max-width: 100%;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img, video, iframe, embed, object, canvas {
    max-width: 100%;
    height: auto;
}

/* ─── INLINE GRID HELPERS ─────────────────────────────────
   Classes para substituir/sobrescrever grids inline nos HTMLs */
.responsive-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.responsive-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.responsive-grid-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

/* ─── SCROLLBAR TOUCH FRIENDLY ───────────────────────────*/
@media (pointer: coarse) {
    ::-webkit-scrollbar { width: 3px; height: 3px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
}

/* =========================================================
   TABLET (≤ 1024px)
   ========================================================= */
@media (max-width: 1024px) {

    /* ── Sidebar já coberta pelo main.css (transform) ── */

    /* Header search menor */
    .header-search { max-width: 200px; }

    /* Grids inline: 2fr 1fr → 1fr */
    /* Esses são sobrescritos por JS (ver script no final) */

    /* Table overflow já funciona; garantir touch scroll */
    .table-container {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    /* Toolbar wrap */
    .toolbar { flex-wrap: wrap; }

    /* Report grid menor */
    .report-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

    /* Motoboy grid 2 cols */
    .motoboy-grid { grid-template-columns: repeat(2, 1fr); }

    /* Config grid 2 cols */
    .config-grid { grid-template-columns: repeat(2, 1fr); }

    /* Delivery grid 1 col */
    .delivery-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   MOBILE GRANDE / LANDSCAPE (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {

    /* ── Variáveis ── */
    :root {
        --header-height: 56px;
        --page-padding: 12px;
    }

    /* ── Layout ── */
    .app-layout {
        flex-direction: column;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* ── Header ── */
    .header {
        padding: 0 max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
        gap: 8px;
        flex-wrap: nowrap;
    }

    .header-left {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 48%;
        gap: 6px;
    }

    .header-left h2 {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-breadcrumb { display: none; }
    .header-search { display: none; }

    .header-right {
        gap: 5px;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .header-store-wrap {
        max-width: 140px;
        min-width: 0;
        flex: 0 1 auto;
    }
    .header-store-name {
        max-width: 100px;
    }
    .header-store-role-badge {
        display: none;
    }
    .header-action { width: 34px; height: 34px; font-size: 14px; flex-shrink: 0; }
    .header-avatar { width: 34px; height: 34px; font-size: 13px; margin-left: 2px; flex-shrink: 0; }

    /* ── Mobile menu button ── */
    .mobile-menu-btn {
        display: inline-flex !important;
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 15px;
    }

    /* ── Page Content ── */
    .page-content {
        padding: var(--page-padding, 12px);
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-x: clip; /* 35.33 · clip não vira caixa de rolagem (Android) */
    }

    /* ── Page Header inline (padrão em todas as páginas) ── */
    .page-header,
    [style*="display:flex"][style*="justify-content:space-between"][style*="margin-bottom"],
    [style*="display: flex"][style*="justify-content: space-between"] {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* ── Stat Grid ── */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .stat-card {
        padding: 14px;
    }

    .stat-card .stat-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .stat-card .stat-value { font-size: 20px; }
    .stat-card .stat-label { font-size: 11px; }
    .stat-card .stat-change { font-size: 10px; }

    /* ── Cards ── */
    .card {
        padding: 16px;
        border-radius: 12px;
    }

    .card-header {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 14px;
    }

    .card-header .btn { font-size: 12px; padding: 7px 12px; }

    /* ── Toolbar ── */
    .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 14px;
    }

    .toolbar-left {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .toolbar-right {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .toolbar-right .btn {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }

    .toolbar-search,
    .search-box {
        max-width: 100%;
        width: 100%;
    }

    .toolbar-select {
        min-width: auto;
        flex: 1;
        width: 100%;
    }

    /* ── Tables ── */
    .table-container,
    .table-responsive {
        border-radius: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
    }

    .data-table {
        min-width: 560px;
        font-size: 12px;
    }

    .data-table thead th {
        padding: 10px 12px;
        font-size: 10px;
    }

    .data-table thead th:first-child { padding-left: 14px; }
    .data-table thead th:last-child { padding-right: 14px; }

    .data-table tbody td {
        padding: 10px 12px;
        font-size: 12px;
    }

    .data-table tbody td:first-child { padding-left: 14px; }
    .data-table tbody td:last-child { padding-right: 14px; }

    /* ── Table Header ── */
    .table-header {
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* ── Buttons ── */
    .btn {
        padding: 9px 14px;
        font-size: 12px;
        gap: 6px;
        min-height: 38px; /* touch target */
    }

    .btn-lg { padding: 12px 20px; font-size: 14px; }
    .btn-sm { padding: 6px 10px; font-size: 11px; min-height: 30px; }
    .btn-icon { width: 34px; height: 34px; min-height: 34px; font-size: 13px; }

    /* ── Forms ── */
    .form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-grid .form-group.full-width {
        grid-column: 1;
    }

    .form-control {
        font-size: 16px; /* evita zoom no iOS */
        min-height: 42px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .modal-body input,
    .modal-body select,
    .modal-body textarea {
        font-size: 16px !important; /* previne zoom automático iOS */
        min-height: 42px;
    }

    .form-group textarea,
    .modal-body textarea {
        min-height: 80px;
    }

    /* ── Pagination ── */
    .pagination {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .pagination-info {
        font-size: 11px;
        width: 100%;
        text-align: center;
    }

    .pagination-buttons button,
    .pagination-btn {
        min-width: 34px;
        height: 34px;
        font-size: 12px;
    }

    /* ── Modal: regras movidas para bloco FIX DEFINITIVO abaixo ── */

    /* ── Badges ── */
    .badge-status { font-size: 10px; padding: 3px 8px; }

    /* ── Toasts no Mobile (Flutuando acima da barra inferior com margem segura) ── */
    .toast-container {
        top: auto !important;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        right: 14px !important;
        left: 14px !important;
        align-items: center !important;
        max-width: none !important;
    }

    .toast {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 11px 12px 11px 14px !important;
        border-radius: 14px !important;
        animation: toastMobileSlideUp 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    @keyframes toastMobileSlideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    /* ── Two col grid ── */
    .two-col-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* ── Report grid ── */
    .report-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
    }

    /* ── Config grid ── */
    .config-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* ── Motoboy grid ── */
    .motoboy-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* ── Categorias grid ── */
    .categorias-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .categoria-card { padding: 18px 14px; }
    .categoria-icon { width: 46px; height: 46px; font-size: 20px; }
    .categoria-name { font-size: 13px; }

    /* ── Fluxo de caixa ── */
    .fluxo-summary {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .fluxo-chart-container { height: 220px; padding: 12px; }

    /* ── Caixa ── */
    .caixa-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .caixa-payment-card { padding: 14px; }
    .caixa-payment-card .payment-value { font-size: 15px; }

    .caixa-status-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 16px;
    }

    /* ── Delivery grid ── */
    .delivery-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .delivery-card { padding: 18px; }

    /* ── Kanban (Pedidos) ── */
    .kanban-board {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding-bottom: 8px;
        /* hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .kanban-board::-webkit-scrollbar { display: none; }

    .kanban-col {
        min-width: 270px;
        max-width: 290px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .kanban-card { padding: 14px; }
    .kanban-card-client { font-size: 13px; }
    .kanban-card-total { font-size: 14px; }

    /* ── Actions cell ── */
    .actions-cell { gap: 4px; }

    /* ── Period buttons ── */
    .period-buttons {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* ── Product cell ── */
    .product-cell { gap: 8px; }
    .product-thumb { width: 32px; height: 32px; }
    .product-cell .product-name { font-size: 12px; }
    .product-cell .product-sub { font-size: 10px; }

    /* ── Chart container ── */
    .chart-container { height: 220px; padding: 4px; }

    /* ── Empty state ── */
    .empty-state { padding: 32px 16px; }
    .empty-state i { font-size: 36px; }
    .empty-state h3 { font-size: 14px; }
    .empty-state p { font-size: 12px; }

    /* ── Safe areas PWA ── */
    .header {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    /* ── Touch feedback ── */
    .btn, .btn-icon, .stat-card, .kanban-card, .menu-item,
    .header-action, .mobile-menu-btn, .cat-btn, .period-btn,
    .categoria-card, .report-card, .motoboy-card, .caixa-payment-card {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: default;
    }

    .btn:active, .btn-icon:active { transform: scale(0.96); }
    .stat-card:active, .kanban-card:active,
    .categoria-card:active, .report-card:active { transform: scale(0.98); }
    .menu-item:active { background: rgba(99,102,241,0.12); }
    .data-table tbody tr:active { background: rgba(99,102,241,0.05); }

    /* ── Prevent overscroll ── */
    /* 35.33 · sem overscroll "contain" no .page-content: no Android impedia a página de rolar */

    /* ── Mobile Bottom Bar ── */
    .mobile-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 16px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        display: flex;
        gap: 10px;
        z-index: 800;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .mobile-bottom-bar .btn { flex: 1; justify-content: center; }

    /* ── Smooth scroll ── */
    .page-content,
    .kanban-board,
    .table-container,
    .sidebar-menu,
    .modal-body {
        -webkit-overflow-scrolling: touch;
    }

    /* ── Hide scrollbars on scroll containers ── */
    .kanban-board::-webkit-scrollbar,
    .sidebar-menu::-webkit-scrollbar {
        display: none;
    }
    .kanban-board, .sidebar-menu {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* =========================================================
   MOBILE PEQUENO (≤ 480px)
   ========================================================= */
@media (max-width: 480px) {

    /* ── Page padding mínimo ── */
    .page-content { padding: 8px; }

    /* ── Stat grid: 1 coluna em vertical, 2 em horizontal ── */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-card .stat-value { font-size: 18px; }
    .stat-card .stat-label { font-size: 10px; }
    .stat-card .stat-icon { width: 34px; height: 34px; font-size: 14px; }

    /* ── Header mais compacto ── */
    .header-left h2 { font-size: 14px; max-width: 140px; }
    .header-right { gap: 4px; }
    .header-action { width: 32px; height: 32px; font-size: 13px; }
    .header-avatar { width: 30px; height: 30px; font-size: 12px; margin-left: 2px; }

    /* ── Cards ── */
    .card { padding: 12px; border-radius: 10px; }

    /* ── Categorias: 2 colunas compactas ── */
    .categorias-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .categoria-card { padding: 14px 10px; }
    .categoria-icon { width: 40px; height: 40px; font-size: 18px; margin-bottom: 10px; }
    .categoria-name { font-size: 12px; }
    .categoria-count { font-size: 11px; }

    /* ── Caixa: 1 coluna ── */
    .caixa-grid { grid-template-columns: 1fr; }

    /* ── Kanban: menor ── */
    .kanban-col { min-width: 240px; max-width: 260px; }
    .kanban-card { padding: 12px; }
    .kanban-card-client { font-size: 12px; }

    /* ── Toolbar botões full width ── */
    .toolbar-right {
        flex-direction: column;
    }

    .toolbar-right .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Action buttons menores ── */
    .btn-icon { width: 30px; height: 30px; font-size: 12px; }
    .actions-cell { gap: 3px; }

    /* ── Product thumb menor ── */
    .product-thumb { width: 28px; height: 28px; font-size: 9px; }

    /* ── Modal header handle maior ── */
    .modal-header::before { width: 44px; height: 5px; }

    /* ── Fluxo summary ── */
    .fluxo-summary { grid-template-columns: 1fr; }

    /* ── Table ajuste ── */
    .data-table { min-width: 520px; }
    .data-table tbody td { padding: 9px 10px; font-size: 11px; }
    .data-table thead th { padding: 8px 10px; font-size: 10px; }

    /* ── Period buttons: scroll horizontal ── */
    .card-header {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Motoboy card compacto ── */
    .motoboy-stats { gap: 10px; }
    .motoboy-stat-value { font-size: 13px; }
    .motoboy-stat-label { font-size: 10px; }
}

/* =========================================================
   BREAKPOINT INTERMEDIÁRIO — Large phones (≤ 640px)
   ========================================================= */
@media (max-width: 640px) {
    /* Page content */
    .page-content {
        padding: 10px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    /* Stat cards - 2 colunas sempre */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .stat-card {
        padding: 12px !important;
    }

    .stat-card .stat-value {
        font-size: 16px !important;
    }

    .stat-card .stat-label {
        font-size: 10px !important;
    }

    .stat-card .stat-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }

    /* Header */
    .header-left h2 {
        font-size: 14px !important;
        max-width: 140px !important;
    }

    .header-action {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    .header-avatar {
        width: 34px !important;
        height: 34px !important;
        font-size: 12px !important;
    }

    /* Cards */
    .card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .card-title {
        font-size: 13px !important;
    }

    /* Buttons */
    .btn {
        padding: 10px 14px !important;
        font-size: 12px !important;
        min-height: 42px !important;
    }

    .btn-sm {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }

    .btn-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }

    /* Tables */
    .data-table {
        min-width: 480px !important;
        font-size: 11px !important;
    }

    .data-table thead th {
        padding: 8px 10px !important;
        font-size: 9px !important;
    }

    .data-table tbody td {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    /* Pagination */
    .pagination {
        padding: 10px 12px !important;
    }

    .pagination-buttons button,
    .pagination-btn {
        min-width: 30px !important;
        height: 30px !important;
        font-size: 11px !important;
    }

    /* Toolbar */
    .toolbar {
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    /* Badges */
    .badge-status {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    /* Categorias */
    .categorias-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .categoria-card {
        padding: 14px 10px !important;
    }

    .categoria-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
    }

    /* Caixa */
    .caixa-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .caixa-payment-card {
        padding: 12px !important;
    }

    .caixa-payment-card .payment-value {
        font-size: 14px !important;
    }

    /* Kanban */
    .kanban-col {
        min-width: 250px !important;
        max-width: 270px !important;
    }

    .kanban-card {
        padding: 12px !important;
    }

    /* Period buttons */
    .period-btn {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }

    /* Toast */
    .toast {
        min-width: auto !important;
        max-width: calc(100vw - 20px) !important;
    }
}
@media (max-width: 360px) {

    html { font-size: 13px; }

    .page-content { padding: 6px; }

    .stat-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .stat-card { padding: 10px; }
    .stat-card .stat-value { font-size: 16px; }

    .header-left h2 { font-size: 13px; max-width: 110px; }

    .btn { padding: 8px 10px; font-size: 11px; }
    .btn-icon { width: 28px; height: 28px; }

    .card { padding: 10px; }

    .data-table { min-width: 480px; }

    .kanban-col { min-width: 220px; }
}

/* =========================================================
   DASHBOARD — Grids inline sobrescritos
   ========================================================= */
@media (max-width: 768px) {

    /* Grids inline do index.html e outras páginas */
    /* Selecionar por atributo estilo é inseguro; usamos script.
       Aqui cobrimos padrões comuns com classes utilitárias */

    .dash-grid-main {
        grid-template-columns: 1fr !important;
    }

    .dash-grid-equal {
        grid-template-columns: 1fr !important;
    }

    /* Configurações — grids de formulário */
    .config-form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Estoque / Relatório — grids de resumo */
    .summary-grid-3 {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 480px) {
    .summary-grid-3 {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   PDV — Atenção especial (tem seu próprio CSS inline)
   ========================================================= */

/* PDV já tem media queries internas no HTML.
   Aqui reforçamos alguns pontos críticos: */

@media (max-width: 768px) {
    /* FAB do carrinho maior e mais acessível */
    .pdv-mobile-toggle {
        width: 60px !important;
        height: 60px !important;
        font-size: 22px !important;
        bottom: max(20px, env(safe-area-inset-bottom)) !important;
        right: 16px !important;
    }

    /* Cart direito como bottom sheet */
    .pdv-right {
        border-radius: 20px 20px 0 0 !important;
    }

    /* Produto grid 2 colunas confortáveis */
    .product-card {
        width: calc(50% - 10px) !important;
        padding: 12px !important;
    }

    .product-card .p-thumb {
        height: 72px !important;
    }

    .product-card .p-name { font-size: 12px !important; }
    .product-card .p-price { font-size: 14px !important; }
}

@media (max-width: 480px) {
    .product-card {
        width: calc(50% - 8px) !important;
        margin: 4px !important;
        padding: 10px !important;
    }

    .product-card .p-thumb { height: 60px !important; }

    /* Botões de quantidade maiores para toque */
    .ci-qty button {
        width: 28px !important;
        height: 28px !important;
    }

    /* Payment methods: 2 colunas */
    .payment-methods {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Cart actions stack */
    .cart-actions {
        flex-wrap: wrap !important;
    }
}

/* =========================================================
   LOGIN — Premium mobile
   ========================================================= */
@media (max-width: 960px) {
    .login-brand { display: none; }
    .login-panel {
        width: 100%;
        border-left: none;
        padding: 48px 32px;
    }
}

@media (max-width: 480px) {
    .login-panel { padding: 36px 20px; }

    .login-header h2 { font-size: 22px; }
    .login-header p { font-size: 13px; }

    .form-input {
        font-size: 16px; /* evita zoom iOS */
        padding: 13px 14px 13px 44px;
    }

    .btn-login { padding: 13px; font-size: 14px; }
}

/* =========================================================
   CONFIGURAÇÕES — Layout específico
   ========================================================= */
@media (max-width: 768px) {
    .config-section { margin-bottom: 20px; }
    .config-section-title { font-size: 14px; margin-bottom: 12px; }
    .config-item { padding: 12px 14px; }
    .config-item .config-label { font-size: 12px; }
    .config-item .config-value { font-size: 12px; }
}

/* =========================================================
   RELATÓRIOS — Report cards
   ========================================================= */
@media (max-width: 768px) {
    .report-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .report-card .report-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .report-card .report-title { font-size: 13px; }
    .report-card .report-desc { font-size: 11px; }
}

@media (max-width: 480px) {
    .report-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   AUDITORIA — Tabela compacta
   ========================================================= */
@media (max-width: 768px) {
    .audit-action { font-size: 10px; padding: 2px 8px; }
}

/* =========================================================
   FLUXO DE CAIXA — Layout específico
   ========================================================= */
@media (max-width: 768px) {
    .fluxo-summary-card {
        padding: 14px;
    }

    .fluxo-summary-card .fluxo-value { font-size: 18px; }
    .fluxo-summary-card .fluxo-label { font-size: 11px; }
}

/* =========================================================
   CONTAS A PAGAR / RECEBER
   ========================================================= */
@media (max-width: 768px) {
    .conta-status { font-size: 10px; padding: 2px 8px; }

    /* Ocultar colunas menos importantes em mobile */
    /* Implementado via CSS (sem remover do HTML) */
}

/* =========================================================
   ENTREGAS — Delivery status trail
   ========================================================= */
@media (max-width: 480px) {
    .delivery-status-trail {
        gap: 0;
    }

    .trail-line { min-width: 12px; }
}

/* =========================================================
   MOTOBOYS — Cards compactos
   ========================================================= */
@media (max-width: 768px) {
    .motoboy-card { padding: 16px; }
    .motoboy-avatar { width: 42px; height: 42px; font-size: 16px; }
    .motoboy-name { font-size: 14px; }
    .motoboy-stats { gap: 12px; margin-top: 12px; padding-top: 10px; }
}

/* =========================================================
   PEDIDOS — Kanban
   ========================================================= */
@media (max-width: 768px) {
    .kanban-col-header { padding: 10px 12px; }
    .kanban-col-title { font-size: 12px; }
    .kanban-count { font-size: 10px; padding: 2px 6px; }
    .kanban-card-id { font-size: 11px; }
    .kanban-card-time { font-size: 10px; }
    .kanban-card-items { font-size: 11px; margin-bottom: 10px; }
}

/* =========================================================
   USUÁRIOS — tabela com avatar
   ========================================================= */
@media (max-width: 768px) {
    .user-avatar {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
}

/* =========================================================
   ESTOQUE — Barras de progresso
   ========================================================= */
@media (max-width: 768px) {
    .stock-bar-wrap { min-width: 60px; }
}

/* =========================================================
   CAIXA — Status bar e botões
   ========================================================= */
@media (max-width: 480px) {
    .caixa-status-bar {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }
}

/* =========================================================
   UTILITÁRIOS MOBILE EXCLUSIVOS
   ========================================================= */

/* Oculta em mobile */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: flex !important; }
}

/* Oculta em tablet */
@media (max-width: 1024px) {
    .hide-tablet { display: none !important; }
    .show-tablet { display: flex !important; }
}

/* Sempre visível */
.show-mobile { display: none; }
.show-tablet { display: none; }

/* ── Texto truncado ── */
.text-truncate-mobile {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Scroll horizontal elegante ── */
.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scroll-x::-webkit-scrollbar { display: none; }

/* ── Stack em mobile ── */
@media (max-width: 768px) {
    .stack-mobile {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .stack-mobile > * {
        width: 100% !important;
    }
}

/* =========================================================
   ACESSIBILIDADE — Focus visível em touch
   ========================================================= */
@media (pointer: coarse) {
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
}

/* =========================================================
   FIX: Elementos com min-width quebrando a tela
   ========================================================= */
@media (max-width: 768px) {
    /* Qualquer tabela dentro de container não pode ser menor que 100% do pai */
    .table-container {
        max-width: 100%;
        width: 100%;
    }

    /* Cards com stat-info (horizontal) */
    .stat-card:has(.stat-info) {
        gap: 12px;
    }

    /* Modal: max-height controlado pelo JS via visualViewport */

    /* Toast não sai da tela */
    .toast {
        min-width: unset;
        max-width: calc(100vw - 24px);
    }

    /* Sidebar overlay garante full screen */
    .mobile-overlay {
        width: 100vw;
        height: 100vh;
    }

    /* Period buttons compactos */
    .period-btn {
        padding: 5px 12px;
        font-size: 11px;
    }

    /* Badge menor */
    .menu-item .badge {
        padding: 1px 6px;
        font-size: 9px;
    }
}

/* =========================================================
   FIX: Inline grids com overflow em mobile
   Usado pelo script mobile-fix.js para adicionar classes
   ========================================================= */
@media (max-width: 768px) {

    /* Classe adicionada pelo script ao inline grid "2fr 1fr" */
    .ig-main-to-stack,
    .ig-equal-to-stack,
    .ig-three-to-stack {
        grid-template-columns: 1fr !important;
    }

    /* Classe adicionada a grids de formulário */
    .ig-form-to-stack {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .ig-main-to-stack,
    .ig-equal-to-stack,
    .ig-three-to-stack,
    .ig-form-to-stack {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* =========================================================
   PATCHES ESPECÍFICOS POR PÁGINA — Continuação
   ========================================================= */

/* ─── STAT-GRID com colunas fixas ────────────────────────
   Páginas usam style="grid-template-columns:repeat(4,1fr)"
   ou repeat(6,1fr) diretamente no stat-grid               */

@media (max-width: 1024px) {
    /* 6 colunas → 3 colunas */
    .stat-grid[style*="repeat(6"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* 4 colunas → 2 colunas */
    .stat-grid[style*="repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    /* 6 colunas → 2 colunas */
    .stat-grid[style*="repeat(6"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* 4 colunas → 2 colunas */
    .stat-grid[style*="repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* 3 colunas → 1 coluna */
    .stat-grid[style*="repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    /* Todas stat-grids fixas → 2 colunas compactas */
    .stat-grid[style*="repeat(6"],
    .stat-grid[style*="repeat(4"],
    .stat-grid[style*="repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* Stat card de caixa (valores de pagamento) */
    .stat-grid[style*="repeat(6"] .stat-card {
        padding: 10px 8px;
    }

    .stat-grid[style*="repeat(6"] .stat-value {
        font-size: 14px !important;
    }
}

/* ─── CAIXA — Layout específico ──────────────────────────*/
@media (max-width: 768px) {
    /* Card de status do caixa */
    .page-content > .card:first-child [style*="display:flex;justify-content:space-between"] {
        flex-direction: column;
        gap: 14px;
    }

    /* Botões de ação do caixa */
    #cashActions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    #cashActions .btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-height: 44px !important;
        justify-content: center !important;
        font-weight: 600 !important;
    }

    #cashActions #btnCloseCash,
    #cashActions #btnOpenCash,
    #cashActions #btnReopenCash {
        flex: 1 1 100% !important;
    }

    #cashActions .btn.hidden,
    #cashActions .btn[hidden],
    #cashActions .btn[style*="display: none"],
    #cashActions .btn[style*="display:none"] {
        display: none !important;
    }
}

/* ─── CONFIGURAÇÕES — Tabs horizontais ───────────────────*/
@media (max-width: 768px) {
    /* Container das tabs — scroll horizontal elegante */
    .card > [style*="display:flex;gap:4px;margin-bottom"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0 !important;
        padding-bottom: 0;
        flex-shrink: 0;
    }

    .card > [style*="display:flex;gap:4px;margin-bottom"]::-webkit-scrollbar {
        display: none;
    }

    /* Tab buttons compactos */
    .card > [style*="display:flex;gap:4px;margin-bottom"] .btn {
        padding: 10px 14px !important;
        font-size: 12px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Remove ícones dos tabs em mobile muito pequeno */
}

@media (max-width: 480px) {
    .card > [style*="display:flex;gap:4px;margin-bottom"] .btn i {
        display: none;
    }

    .card > [style*="display:flex;gap:4px;margin-bottom"] .btn {
        padding: 10px 10px !important;
        font-size: 11px !important;
    }
}

/* ─── CONFIGURAÇÕES — Botões Salvar/Cancelar ─────────────*/
@media (max-width: 768px) {
    /* Botões de ação de salvar no final de cada aba */
    [style*="display:flex;justify-content:flex-end;gap:10px"] {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    [style*="display:flex;justify-content:flex-end;gap:10px"] .btn {
        flex: 1;
        min-width: 100px;
        justify-content: center;
    }
}

/* ─── CONFIGURAÇÕES — Itens de configuração ──────────────*/
@media (max-width: 480px) {
    /* Items com justify-content:space-between podem ficar apertados */
    [style*="justify-content:space-between;align-items:center;padding:14px 16px"] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px !important;
    }

    /* Toggle switch mantém posição */
    .toggle-switch {
        flex-shrink: 0;
    }
}

/* ─── ESTOQUE — Grid de alertas ──────────────────────────*/
@media (max-width: 768px) {
    /* Grid de alertas de estoque */
    [style*="grid-template-columns:repeat(auto-fill,minmax(250px"] {
        grid-template-columns: 1fr !important;
    }

    [style*="grid-template-columns:repeat(auto-fill,minmax(220px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    [style*="grid-template-columns:repeat(auto-fill,minmax(220px"] {
        grid-template-columns: 1fr !important;
    }
}

/* ─── ENTREGAS — Grid de entregas ─────────────────────── */
@media (max-width: 768px) {
    /* Grid de entregas ativas */
    #activeDeliveries,
    [style*="grid-template-columns:repeat(auto-fill,minmax(360px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Grid de categorias de entrega */
    [style*="grid-template-columns:repeat(auto-fill,minmax(280px"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ─── DASHBOARD — Period buttons ─────────────────────────*/
@media (max-width: 768px) {
    /* Toolbar do dashboard: período + data */
    .toolbar[style*="margin-bottom:24px"] {
        margin-bottom: 16px !important;
    }

    /* Botões de período */
    .toolbar > [style*="display:flex;gap:6px"] {
        flex-wrap: wrap;
        gap: 6px !important;
    }

    .period-btn {
        font-size: 11px;
        padding: 5px 12px;
    }
}

@media (max-width: 480px) {
    .toolbar > [style*="display:flex;gap:6px"] {
        width: 100%;
        justify-content: space-between;
    }

    .period-btn {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
}

/* ─── MODAIS — Formulários específicos ───────────────────*/
@media (max-width: 768px) {
    /* Grid de 1fr 1fr 1fr dentro de modal */
    .modal-body [style*="grid-template-columns:1fr 1fr 1fr"],
    .modal-body [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Grid de 1fr 1fr dentro de modal */
    .modal-body [style*="grid-template-columns:1fr 1fr"],
    .modal-body [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Botões de ação em linha dentro de modal */
    .modal-body [style*="display:grid;grid-template-columns:1fr 1fr;gap:8px"] {
        grid-template-columns: 1fr 1fr !important; /* manter 2 cols para botões pequenos */
    }
}

/* ─── TODOS OS INLINE-FLEX/FLEX ──────────────────────────
   Containers flex com espaçamento entre que podem quebrar */
@media (max-width: 768px) {
    /* Qualquer flex container que possa estourar */
    .card-header {
        flex-wrap: wrap;
    }

    /* Evitar overflow em ações do header dos cards */
    .card-header > *:last-child {
        flex-shrink: 0;
    }
}

/* ─── MOVIMENTAÇÕES — Tabela ─────────────────────────────*/
@media (max-width: 768px) {
    .mov-qty { font-size: 12px; }
    .mov-type { font-size: 10px; padding: 2px 7px; }
}

/* ─── AUDITORIA — Tabela compacta ────────────────────────*/
@media (max-width: 768px) {
    /* Coluna de detalhes pode ser oculta */
    .audit-details-col { 
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ─── CLIENTES / FORNECEDORES — Linha de produto ─────────*/
@media (max-width: 768px) {
    .client-status { font-size: 10px; }
}

/* ─── COMPRAS — Status ────────────────────────────────────*/
@media (max-width: 768px) {
    .compra-status { font-size: 10px; padding: 2px 8px; }
}

/* ─── PRODUTOS — Imagens ─────────────────────────────────*/
@media (max-width: 768px) {
    .product-thumb {
        border-radius: 6px;
    }
}

/* ─── PEDIDOS — Kanban header sticky ─────────────────────*/
@media (max-width: 768px) {
    .kanban-col-header {
        position: sticky;
        top: 0;
        z-index: 5;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* ─── RELATORIOS — Filtros de data ───────────────────────*/
@media (max-width: 768px) {
    /* Filtros de relatório lado a lado → coluna */
    .report-filters,
    .filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .report-filters .form-control,
    .filter-row .form-control {
        width: 100%;
    }
}

/* ─── CONTAS PAGAR/RECEBER — Summary de valores ──────────*/
@media (max-width: 768px) {
    /* Cards de resumo financeiro */
    .conta-summary {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .conta-summary {
        grid-template-columns: 1fr;
    }
}

/* ─── USUARIOS — Avatar e roles ──────────────────────────*/
@media (max-width: 480px) {
    .user-role {
        font-size: 10px;
        padding: 2px 7px;
    }
}

/* ─── BRANDING / TEMA ────────────────────────────────────
   Fix específico para preview de branding em configurações */
@media (max-width: 768px) {
    #brandingPreview,
    .branding-preview {
        transform: scale(0.85);
        transform-origin: top left;
        width: 117%; /* compensar scale */
    }
}

/* ─── SIDEBAR ABERTA — Body sem overflow ─────────────────*/
body.sidebar-open {
    overflow: hidden;
}

/* ─── MOBILE MENU BUTTON — Garantia visual ───────────────*/
@media (max-width: 1024px) {
    .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Sidebar toggle e cartão de usuário do desktop ocultos em mobile para eliminar borda cinza residual */
    .sidebar-toggle,
    .st-user,
    #sidebar .st-user,
    .sidebar-user,
    #sidebarUser {
        display: none !important;
    }
}

/* ─── OVERLAY — cobertura total ──────────────────────────*/
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.25s;
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
}

/* ─── SIDEBAR MOBILE ABERTA ───────────────────────────────*/
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.3s ease;
        z-index: 1000;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.5);
    }

    /* Sidebar flutuante no mobile descontando o menu de ícones inferior */
    .sidebar {
        top: 10px !important;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        left: 10px !important;
        height: auto !important;
        max-height: calc(100dvh - 88px - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100vh - 88px - env(safe-area-inset-bottom, 0px)) !important;
    }

    body.no-tabbar .sidebar,
    body.b2b-page .sidebar,
    body.st-login .sidebar {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100vh - 20px - env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Sidebar menu scrollável com respiro inferior */
    .sidebar-menu {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ─── HEADER — Mobile hamburger alinhado ─────────────────*/
@media (max-width: 1024px) {
    .header-left {
        gap: 12px;
    }

    .mobile-menu-btn {
        flex-shrink: 0;
    }
}

/* ─── FIX: stat-card horizontal (com stat-info) mobile ───*/
@media (max-width: 480px) {
    /* Em telas muito pequenas, stat-card com stat-info fica compacto */
    .stat-card:has(.stat-info) {
        padding: 10px 12px;
        gap: 10px;
    }

    .stat-card:has(.stat-info) .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .stat-info .stat-value {
        font-size: 16px !important;
    }

    .stat-info .stat-label {
        font-size: 10px;
    }
}

/* ─── FIX: Table actions sempre visíveis ─────────────────*/
@media (max-width: 768px) {
    /* Coluna de actions não deve ser colapsada */
    .data-table td:last-child,
    .data-table th:last-child {
        position: sticky;
        right: 0;
        background: var(--bg-secondary);
        z-index: 1;
        box-shadow: -2px 0 6px rgba(0,0,0,0.15);
    }

    /* Em hover, manter background consistente */
    .data-table tbody tr:hover td:last-child {
        background: var(--bg-card-hover);
    }
}

/* ─── FIX: Inputs de busca do header ─────────────────────*/
@media (max-width: 768px) {
    /* Se alguma página mostrar header search, ela deve ser full */
    .header-search:not([style*="display:none"]) {
        max-width: 100%;
        margin: 0;
    }
}

/* ─── ANIMAÇÕES REDUZIDAS (prefers-reduced-motion) ───────*/
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .modal,
    .modal-overlay,
    .mobile-overlay,
    .btn,
    .stat-card,
    .kanban-card {
        transition: none !important;
        animation: none !important;
    }
}

/* ─── PRINT — Remove elementos de navegação ──────────────*/
@media print {
    .sidebar,
    .header,
    .mobile-menu-btn,
    .mobile-overlay,
    .mobile-bottom-bar,
    .toolbar,
    .pagination,
    .btn-icon,
    .actions-cell {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .page-content {
        padding: 0 !important;
    }

    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
}

/* ─── STOCK ALERTS GRID — Estoque ────────────────────────*/
@media (max-width: 768px) {
    .stock-alerts-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ─── ENTREGAS — Categorias grid ─────────────────────────*/
@media (max-width: 768px) {
    .entregas-cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 0 12px !important;
    }
}

@media (max-width: 480px) {
    .entregas-cat-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── PERIOD BUTTONS WRAP — Dashboard ────────────────────*/
@media (max-width: 768px) {
    .period-buttons-wrap {
        flex-wrap: wrap;
        gap: 6px !important;
        width: 100%;
    }

    .period-buttons-wrap .btn {
        flex: 1;
        justify-content: center;
        min-width: 70px;
    }
}

/* ─── FIX FINAL: Garantir que nada ultrapasse 100vw ───── */
@media (max-width: 768px) {
    .app-layout,
    .main-content,
    .page-content,
    .header,
    .card,
    .stat-grid,
    .toolbar,
    .kanban-board,
    .modal-overlay,
    .sidebar {
        max-width: 100vw !important;
        overflow-x: clip !important;
    }

    /* Texto longo não quebra layout */
    .card-title,
    .stat-label,
    .menu-item .menu-text,
    .kanban-card-client,
    .product-cell .product-name {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto;
    }

    /* Badge do menu sempre pequeno */
    .menu-item .badge {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 9px;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Ícones FontAwesome não encolhem */
    .fas, .far, .fab, .fa {
        flex-shrink: 0 !important;
    }

    /* Evita que imagens quebrem o layout */
    img {
        max-width: 100%;
        height: auto;
        flex-shrink: 0;
    }

    /* Previne overflow em elementos com min-width */
    [style*="min-width"] {
        min-width: 0 !important;
    }

    /* Garante que flex items não encolham abaixo do mínimo */
    .header-left,
    .header-right,
    .toolbar-left,
    .toolbar-right {
        min-width: 0;
        flex-shrink: 1;
    }

    /* Cards em grid não encolhem */
    .stat-card,
    .categoria-card,
    .report-card,
    .motoboy-card,
    .delivery-card {
        min-width: 0;
        flex-shrink: 1;
    }
}

/* =========================================================
   GLOBAL — Touch feedback melhorado
   ========================================================= */
@media (max-width: 768px) {
    /* Feedback tátil em todos os botões */
    button:active:not(:disabled),
    .btn:active:not(:disabled),
    .btn-icon:active:not(:disabled) {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }

    /* Cards com feedback tátil */
    .stat-card:active,
    .kanban-card:active,
    .categoria-card:active,
    .report-card:active,
    .delivery-card:active,
    .motoboy-card:active {
        transform: scale(0.98);
        transition: transform 0.15s ease;
    }

    /* Menu items */
    .menu-item:active {
        background: rgba(99, 102, 241, 0.15) !important;
    }

    /* Remove highlight azul no mobile */
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

/* =========================================================
   GLOBAL — Scrollbar escondida mas funcional
   ========================================================= */
@media (max-width: 768px) {
    .kanban-board,
    .table-container,
    .sidebar-menu,
    .modal-body {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .kanban-board::-webkit-scrollbar,
    .table-container::-webkit-scrollbar,
    .sidebar-menu::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar {
        display: none;
    }

    /* Mantém scroll funcionando com touch */
    .kanban-board,
    .table-container,
    .sidebar-menu,
    .modal-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
}

/* =========================================================
   TABLES — Card view para mobile muito pequeno
   ========================================================= */
@media (max-width: 480px) {
    /* Tabelas com muitas colunas viram cards no mobile */
    .table-container {
        position: relative;
    }

    /* Card view: esconde tabela tradicional e mostra cards */
    .table-card-view {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0;
    }

    .table-card-view .data-table {
        display: none;
    }

    .table-card-view .table-card-row {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        transition: var(--transition);
    }

    .table-card-view .table-card-row:active {
        border-color: var(--border-hover);
        background: var(--bg-card-hover);
    }

    .table-card-view .table-card-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        font-size: 12px;
    }

    .table-card-view .table-card-label {
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        flex-shrink: 0;
    }

    .table-card-view .table-card-value {
        color: var(--text-primary);
        font-weight: 500;
        text-align: right;
        word-break: break-word;
    }

    .table-card-view .table-card-actions {
        display: flex;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
        justify-content: flex-end;
    }

    .table-card-view .table-card-actions .btn-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* =========================================================
   TABLES — Melhorias gerais mobile
   ========================================================= */
@media (max-width: 768px) {
    .table-container {
        border-radius: 12px;
        position: relative;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
    }

    .data-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Zebra striping mais visível */
    .data-table tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.015);
    }

    /* Hover mais suave */
    .data-table tbody tr:hover {
        background: rgba(99, 102, 241, 0.04);
    }

    /* Coluna de ações sticky para facilitar acesso */
    .data-table td:last-child,
    .data-table th:last-child {
        position: sticky;
        right: 0;
        background: var(--bg-card);
        z-index: 1;
        box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
    }

    .data-table tbody tr:hover td:last-child {
        background: var(--bg-card-hover);
    }

    /* Header da tabela sempre visível ao scroll */
    .table-container {
        max-height: 60vh;
        overflow-y: auto;
    }

    .data-table thead {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .data-table thead th {
        background: var(--bg-surface);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* Scroll hint - indicador visual de scroll horizontal */
@media (max-width: 768px) {
    .scroll-hint {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        z-index: 10;
        pointer-events: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        animation: hint-pulse 2s ease-in-out infinite;
    }

    @keyframes hint-pulse {
        0%, 100% { opacity: 0.8; transform: translateY(-50%) scale(1); }
        50% { opacity: 1; transform: translateY(-50%) scale(1.08); }
    }
}

/* ─── INPUTS TOUCH TARGETS ───────────────────────────────
   Todos os elementos interativos com área de toque adequada */
@media (max-width: 768px) {
    .btn,
    .btn-icon,
    .header-action,
    .header-avatar,
    .mobile-menu-btn,
    .sidebar-toggle button,
    .menu-item,
    .cat-btn,
    .period-btn,
    .pay-method,
    .pagination-btn,
    .pagination-buttons button {
        min-height: 36px;
    }

    /* Inputs e selects com boa área de toque */
    .form-control,
    .toolbar-select,
    .toolbar-search input,
    .search-box input {
        min-height: 42px;
        font-size: 16px; /* Previne zoom iOS */
    }
}

/* =========================================================
   PATCHES FINAIS — Grids específicos por página
   ========================================================= */

/* ─── MOTOBOYS — Cards grid ──────────────────────────────*/
@media (max-width: 768px) {
    .motoboys-cards-grid,
    [style*="grid-template-columns:repeat(auto-fill,minmax(360px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }
}

/* ─── RELATÓRIOS — Grid de categorias ───────────────────*/
@media (max-width: 768px) {
    .relatorios-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 480px) {
    .relatorios-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── USUÁRIOS — Grid de perfis ──────────────────────────*/
@media (max-width: 768px) {
    .perfis-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .perfis-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── USUÁRIOS — Modal permissões ────────────────────────*/
@media (max-width: 768px) {
    /* Grid de checkboxes lado a lado em modal */
    .modal-body [style*="grid-template-columns:1fr 1fr;gap:8px"] {
        grid-template-columns: 1fr 1fr !important; /* mantém 2 colunas: espaço suficiente */
    }
}

/* ─── MOTOBOYS — Stats internos dos cards ─────────────── */
@media (max-width: 480px) {
    /* Stats em 3 colunas dos cards de motoboy ficam apertadas */
    .ig-three-to-stack[style*="gap:10px;margin-bottom:14px"] {
        grid-template-columns: repeat(3, 1fr) !important; /* mantém 3 — são curtos */
        gap: 6px !important;
    }

    .ig-three-to-stack [style*="text-align:center;padding:10px"] {
        padding: 8px 4px !important;
    }

    .ig-three-to-stack [style*="font-size:18px;font-weight:800"] {
        font-size: 15px !important;
    }

    .ig-three-to-stack [style*="font-size:11px;color:var(--text-muted)"] {
        font-size: 10px !important;
    }
}

/* ─── REPORT CARD — hover e layout ──────────────────────*/
@media (max-width: 768px) {
    .report-card [style*="display:flex;align-items:center;gap:14px"] {
        gap: 10px;
    }

    .report-card [style*="width:48px;height:48px"] {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        border-radius: 10px !important;
    }

    .report-card [style*="font-size:16px"] {
        font-size: 14px !important;
    }
}

/* ─── MOTOBOYS — Card header (avatar + nome) ─────────── */
@media (max-width: 480px) {
    /* Avatar dos motoboys */
    .motoboys-cards-grid [style*="width:52px;height:52px"] {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px;
        font-size: 16px !important;
        border-radius: 10px !important;
    }

    .motoboys-cards-grid [style*="font-size:15px"] {
        font-size: 14px !important;
    }
}

/* ─── CAIXA — Botões de ação do caixa ────────────────── */
@media (max-width: 480px) {
    #cashActions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }

    #cashActions .btn {
        width: 100% !important;
        flex: 1 1 auto !important;
        min-height: 44px !important;
    }

    #cashActions .btn.hidden,
    #cashActions .btn[hidden],
    #cashActions .btn[style*="display: none"],
    #cashActions .btn[style*="display:none"] {
        display: none !important;
    }
}

/* ─── FLUXO DE CAIXA — Tabela de lançamentos ─────────── */
@media (max-width: 768px) {
    /* Ícone de tipo de lançamento */
    .fluxo-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* ─── COMPRAS — Tabela de itens ──────────────────────── */
@media (max-width: 768px) {
    .compra-status { font-size: 10px; padding: 2px 8px; }
}

/* ─── CONTAS — Valores destacados ───────────────────────*/
@media (max-width: 768px) {
    /* Valores monetários grandes */
    [style*="font-size:22px;font-weight:800"] {
        font-size: 18px !important;
    }

    [style*="font-size:24px;font-weight:800"] {
        font-size: 20px !important;
    }

    [style*="font-size:28px;font-weight:800"],
    [style*="font-size:30px;font-weight:800"] {
        font-size: 22px !important;
    }
}

@media (max-width: 480px) {
    [style*="font-size:22px;font-weight:800"] {
        font-size: 16px !important;
    }

    [style*="font-size:24px;font-weight:800"] {
        font-size: 17px !important;
    }

    [style*="font-size:28px;font-weight:800"],
    [style*="font-size:30px;font-weight:800"] {
        font-size: 19px !important;
    }
}

/* ─── HEADER — Logo/título compacto ─────────────────────*/
@media (max-width: 768px) {
    .header-left h2 {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .header-left h2 {
        max-width: 120px;
        font-size: 13px;
    }
}

/* ─── SIDEBAR — Brand menor em mobile ───────────────────*/
@media (max-width: 1024px) {
    .sidebar-brand {
        padding: 16px;
    }

    .sidebar-brand .brand-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .sidebar-brand .brand-text h1 {
        font-size: 14px;
    }
}

/* ─── MENU ITEMS — Maior área de toque ──────────────────*/
@media (max-width: 1024px) {
    .menu-item {
        padding: 12px 16px;
        margin: 2px 6px;
        border-radius: 10px;
    }

    .menu-item i {
        font-size: 17px;
        width: 22px;
    }

    .menu-item .menu-text {
        font-size: 14px;
    }
}

/* ─── EMPTY STATE — Centralizado e legível ───────────── */
@media (max-width: 480px) {
    .empty-state {
        padding: 24px 12px;
    }

    .empty-state i {
        font-size: 32px;
    }

    .empty-state h3 {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .empty-state p {
        font-size: 12px;
        margin-bottom: 14px;
    }
}

/* ─── ALERT — Mobile compacto ────────────────────────── */
@media (max-width: 480px) {
    .alert {
        padding: 10px 12px;
        font-size: 12px;
        gap: 8px;
    }
}

/* ─── SKELETON — Mobile ──────────────────────────────── */
@media (max-width: 480px) {
    .skeleton-card { height: 80px; }
    .skeleton-title { height: 18px; }
}

/* ─── CHART CONTAINER — responsivo ──────────────────────*/
@media (max-width: 768px) {
    .chart-container,
    .fluxo-chart-container {
        height: 200px !important;
        padding: 8px !important;
    }
}

@media (max-width: 480px) {
    .chart-container,
    .fluxo-chart-container {
        height: 170px !important;
        padding: 4px !important;
    }
}

/* ─── PDV — Menu categorias scroll fluido ────────*/
@media (max-width: 768px) {
    .pdv-categories {
        padding: 6px 8px !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

/* ─── PDV — Cart summary legível ─────────────────────── */
@media (max-width: 480px) {
    .cart-summary .cs-row {
        font-size: 11px !important;
    }

    .cart-summary .cs-row.total {
        font-size: 18px !important;
    }

    .cart-actions .btn {
        padding: 10px 8px !important;
        font-size: 11px !important;
    }
}

/* ─── ÚLTIMOS AJUSTES DE PRECISÃO ───────────────────────*/

/* Evita que ícones do FontAwesome sejam cortados */
@media (max-width: 768px) {
    .fas, .far, .fab, .fa {
        flex-shrink: 0;
    }
}

/* Table — nth-child zebra mais visível no mobile */
@media (max-width: 768px) {
    .data-table tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.015);
    }
}

/* Garantia final: NADA ultrapassa a tela */
@media (max-width: 768px) {
    * {
        max-width: 100%;
    }

    /* Mas tabelas podem ter min-width para scroll funcionar */
    .data-table {
        max-width: none;
        width: 100%;
    }
}

/* =========================================================
   PATCHES FINAIS — Terceira passagem
   ========================================================= */

/* ─── TOOLBAR — Selects com width:auto ───────────────────
   Selects de filtro na toolbar precisam se adaptar em mobile */
@media (max-width: 768px) {
    .toolbar-left .toolbar-select,
    .toolbar-left .form-control,
    .toolbar-left select {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1;
    }

    .toolbar-left {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    /* Selects de filtro inline com form-input */
    .toolbar-left .form-input[style*="width:auto"],
    .toolbar-left select.form-input {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 16px;
        min-height: 42px;
    }

    /* Inputs de data na toolbar */
    input[type="date"].toolbar-select,
    input[type="date"].form-control {
        width: 100% !important;
        min-height: 42px;
    }
}

/* ─── FORM-GRID — Garantia de 1 coluna em mobile ─────────
   form-grid sem estilo inline agora responde ao CSS         */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

/* ─── RELATORIOS — Grid de cards de categoria ────────────*/
@media (max-width: 768px) {
    .relatorios-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .relatorios-grid .card {
        padding: 16px;
    }

    .relatorios-grid [style*="display:flex;align-items:center;gap:14px"] {
        gap: 10px;
    }

    .relatorios-grid [style*="width:48px;height:48px"] {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        flex-shrink: 0;
    }

    .relatorios-grid [style*="font-size:20px"] {
        font-size: 16px !important;
    }

    .relatorios-grid [style*="font-weight:700;font-size:16px"] {
        font-size: 14px !important;
    }

    .relatorios-grid [style*="font-size:12px;color:var(--text-secondary)"] {
        display: none; /* Oculta descrição longa em mobile */
    }
}

@media (max-width: 480px) {
    .relatorios-grid {
        grid-template-columns: 1fr !important;
    }

    .relatorios-grid [style*="font-size:12px;color:var(--text-secondary)"] {
        display: block; /* Mostra descrição em single column */
        font-size: 11px !important;
    }
}

/* ─── USUARIOS — Grid de perfis de acesso ─────────────── */
@media (max-width: 768px) {
    .perfis-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .perfis-grid > div {
        padding: 12px !important;
    }

    .perfis-grid [style*="font-weight:700;font-size:14px"] {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .perfis-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── COMPRAS — Tabela de itens de compra ────────────────
   Tabela dentro do modal de nova compra                    */
@media (max-width: 768px) {
    /* Tabela de adição de produtos na compra */
    .modal-body table {
        min-width: 440px;
        font-size: 12px;
    }

    .modal-body table th,
    .modal-body table td {
        padding: 8px 10px;
    }

    /* Inputs numéricos de quantidade/valor dentro de tabela */
    .modal-body table input[type="number"],
    .modal-body table input[type="text"] {
        min-height: 36px;
        width: 100%;
        font-size: 13px !important; /* tabela pode ter tamanho menor */
    }
}

/* ─── CLIENTES — Card de perfil do cliente ───────────────*/
@media (max-width: 768px) {
    /* Avatar do cliente no card de detalhe */
    [style*="width:64px;height:64px;border-radius:16px"] {
        width: 52px !important;
        height: 52px !important;
        border-radius: 12px !important;
        font-size: 20px !important;
    }

    /* Stat-grid do perfil do cliente */
    .stat-grid[style*="repeat(4,1fr);margin-bottom:20px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* ─── MOVIMENTAÇÕES — Filtro de datas ────────────────────*/
@media (max-width: 768px) {
    /* Inputs de data e select de tipo ficam em coluna */
    .toolbar-left [type="date"] {
        width: 100%;
        min-height: 42px;
    }
}

/* ─── CONTAS PAGAR/RECEBER — Totais resumo ───────────────*/
@media (max-width: 768px) {
    /* Cards de totais acima da tabela */
    .conta-totais {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .conta-totais {
        grid-template-columns: 1fr;
    }
}

/* ─── PRODUTOS — Checkbox e ações de tabela ──────────────*/
@media (max-width: 768px) {
    /* Checkbox column sempre visível e acessível */
    .data-table th input[type="checkbox"],
    .data-table td input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    /* Preview de imagem de produto no modal */
    #prodImagePreview {
        width: 64px !important;
        height: 64px !important;
        font-size: 26px !important;
    }
}

/* ─── AUDITORIA — Timeline de eventos ────────────────────*/
@media (max-width: 768px) {
    /* Linha de timeline */
    .audit-timeline-item {
        flex-direction: column;
        gap: 6px;
    }

    /* Ocultar coluna IP em mobile (pouco útil) */
    .data-table th:last-child:has(+ *),
    .audit-ip-col {
        display: none;
    }
}

/* ─── MODAIS DE PERFIL DE USUÁRIO ─────────────────────── */
@media (max-width: 768px) {
    /* Grid de permissões (checkboxes em grade) */
    .permissions-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
}

@media (max-width: 480px) {
    .permissions-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── GLOBAL — Corrige selects em toolbar que usam form-input
   Alguns usam .form-input e outros .form-control — cobrimos ambos */
@media (max-width: 768px) {
    .toolbar select,
    .toolbar .form-input,
    .toolbar .form-control,
    .toolbar input[type="date"],
    .toolbar input[type="text"],
    .toolbar input[type="search"] {
        font-size: 16px; /* Previne zoom iOS */
        min-height: 40px;
    }
}

/* ─── GLOBAL — Área de toque em ícones interativos ───────*/
@media (max-width: 768px) {
    .ci-remove {
        padding: 8px !important;
        font-size: 14px !important;
    }

    /* Botões de qty no carrinho PDV */
    .ci-qty button {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
}

/* ─── GLOBAL — Estabilidade de layout na sidebar mobile ──*/
@media (max-width: 1024px) {
    /* Garante que sidebar nunca impacte o flow do conteúdo */
    .sidebar {
        will-change: transform;
    }

    /* Evita que sidebar colapso cause layout shift */
    .app-layout {
        position: relative;
        overflow-x: hidden;
    }
}

/* ─── GLOBAL — Textos que estouravam ─────────────────────*/
@media (max-width: 768px) {
    /* Valores monetários grandes em cards */
    .stat-value,
    .fluxo-value,
    .payment-value,
    .pdv-total,
    .caixa-payment-card .payment-value {
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    /* IDs e códigos na fonte mono */
    .kanban-card-id,
    .mov-qty,
    .mono {
        font-size: 11px;
    }
}

/* =========================================================
   FORMS — Mobile otimizado
   ========================================================= */
@media (max-width: 768px) {
    /* Inputs sempre com 16px para evitar zoom no iOS */
    .form-control,
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: 44px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        touch-action: manipulation;
    }

    /* Preserva recuo à esquerda e direita quando o input possui ícones decorativos ou ações */
    .input-wrap .form-input,
    .input-wrap input,
    .input-wrap:has(> i:not(.password-toggle i)) input,
    .input-wrap > i:not(.password-toggle i) ~ input,
    .form-group:has(> .input-wrap) input,
    .uf-input-wrap .uf-input,
    .uf-input-wrap input,
    .uf-input-wrap:has(i.prefix-icon) .uf-input,
    .uf-input-wrap:has(i.prefix-icon) input,
    .uf-input-wrap:has(> i:not(.password-toggle i):not(.uf-btn-action i)) .uf-input,
    .uf-input-wrap:has(> i:not(.password-toggle i):not(.uf-btn-action i)) input,
    .uf-input-wrap i.prefix-icon ~ .uf-input,
    .uf-input-wrap i.prefix-icon ~ input,
    .uf-input-wrap > i:not(.password-toggle i):not(.uf-btn-action i) ~ .uf-input,
    .uf-input-wrap > i:not(.password-toggle i):not(.uf-btn-action i) ~ input,
    .uf-field:has(.prefix-icon) input,
    .uf-field:has(.prefix-icon) .uf-input,
    .has-icon-left input,
    .input-icon-left input,
    .search-box input,
    .toolbar-search input,
    .header-search input,
    .pdv-search-bar input,
    .modal-body .search-box input,
    .modal-body .toolbar-search input,
    .modal-body .uf-input-wrap input,
    .modal .uf-input-wrap input {
        padding-left: 46px !important;
        box-sizing: border-box !important;
    }

    .input-wrap > i:not(.password-toggle i),
    .uf-input-wrap i.prefix-icon,
    .search-box i,
    .toolbar-search i,
    .header-search i {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        pointer-events: none !important;
        z-index: 4 !important;
    }

    .input-wrap:not(:has(.password-toggle)):not(:has(button)) .form-input,
    .input-wrap:not(:has(.password-toggle)):not(:has(button)) input {
        padding-right: 16px !important;
    }

    /* Labels mais compactas */
    .form-label,
    .form-group label {
        font-size: 12px !important;
        margin-bottom: 6px !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
    }

    /* Form groups com menos espaçamento */
    .form-group {
        margin-bottom: 14px !important;
    }

    /* Textarea maior para toque */
    textarea {
        min-height: 90px !important;
        resize: vertical !important;
    }

    /* Select com seta maior */
    select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        padding-right: 36px !important;
    }

    /* Checkboxes e radios maiores */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        cursor: pointer !important;
        touch-action: manipulation;
    }

    /* Focus states mais visíveis */
    input:focus,
    select:focus,
    textarea:focus {
        outline: none !important;
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 3px var(--accent-muted) !important;
    }
}

/* =========================================================
   CARDS DE RESUMO — Melhor visual mobile
   ========================================================= */
@media (max-width: 768px) {
    .summary-card,
    .stat-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .summary-card:active,
    .stat-card:active {
        transform: scale(0.98);
    }
}

/* Animação de entrada dos cards no mobile */
@media (max-width: 768px) {
    @keyframes cardFadeIn {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .stat-card {
        animation: cardFadeIn 0.3s ease-out both;
    }

    .stat-card:nth-child(1) { animation-delay: 0.02s; }
    .stat-card:nth-child(2) { animation-delay: 0.06s; }
    .stat-card:nth-child(3) { animation-delay: 0.1s; }
    .stat-card:nth-child(4) { animation-delay: 0.14s; }
    .stat-card:nth-child(5) { animation-delay: 0.18s; }
    .stat-card:nth-child(6) { animation-delay: 0.22s; }
}

/* ─── LEGACY BROWSERS FALLBACK ───────────────────────────*/
@supports not (dvh: 1dvh) {
    /* modal max-height: gerenciado pelo visualViewport JS */
    .pdv-right { height: 85vh; }
    .sidebar { height: 100vh; }
}

/* ─── CATEGORIAS — Grid de produtos por categoria ────── */
@media (max-width: 768px) {
    .categorias-products-grid,
    #categoriesGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 0 12px !important;
    }
}

@media (max-width: 480px) {
    .categorias-products-grid,
    #categoriesGrid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   FIX CRÍTICO — Stat Cards: preço não pode quebrar linha
   Problema: valor monetário longo quebrando em 2 colunas
   ========================================================= */

@media (max-width: 768px) {

    /* Layout padrão do stat-card em mobile:
       ícone em cima, valor embaixo — sem overflow */
    .stat-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        overflow: hidden;
        min-width: 0;
    }

    /* Valor: nunca quebra, escala se necessário */
    .stat-card .stat-value {
        font-size: 18px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        letter-spacing: -0.5px;
        line-height: 1.2;
    }

    /* Label: pode quebrar mas de forma controlada */
    .stat-card .stat-label {
        font-size: 11px !important;
        white-space: normal;
        word-break: break-word;
        color: var(--text-muted);
        margin-top: 3px;
        line-height: 1.3;
    }

    /* Ícone compacto */
    .stat-card .stat-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
        margin-bottom: 10px;
        flex-shrink: 0;
    }

    /* Change badge compacto */
    .stat-card .stat-change {
        font-size: 10px !important;
        padding: 2px 6px;
        margin-top: 6px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {

    .stat-card {
        padding: 12px !important;
    }

    /* Valor monetário — fonte menor para caber */
    .stat-card .stat-value {
        font-size: 15px !important;
        letter-spacing: -0.3px;
    }

    .stat-card .stat-label {
        font-size: 10px !important;
        margin-top: 2px;
    }

    .stat-card .stat-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
        margin-bottom: 8px;
        border-radius: 8px !important;
    }

    .stat-card .stat-change {
        font-size: 9px !important;
        padding: 1px 5px;
        margin-top: 4px;
    }
}

@media (max-width: 360px) {
    .stat-card .stat-value {
        font-size: 13px !important;
    }

    .stat-card .stat-label {
        font-size: 9px !important;
    }
}

/* ─── FIX: Botão duplicado de hamburger ──────────────────
   O mobile-menu-btn com display:none no HTML do index
   era mostrado pelo CSS + criado pelo JS — duplo.
   Garantia: nunca mostrar dois botões              */
.header-left .mobile-menu-btn ~ .mobile-menu-btn {
    display: none !important;
}

/* Só mostra UM botão hamburger */
.header-left .mobile-menu-btn:not(:first-of-type) {
    display: none !important;
}

/* Botão que estava hidden com style inline — normalizar */
#mobileMenuBtn[style*="display:none"] {
    display: none !important;
}

@media (max-width: 1024px) {
    /* Garantir que o botão hamburger correto apareça */
    .mobile-menu-btn {
        display: inline-flex !important;
    }
}

/* =========================================================
   FIX DEFINITIVO — Modais mobile (bottom sheet)
   ========================================================= */

@media (max-width: 768px) {

    /* 1. Overlay: fixed, cobre tudo com backdrop suave; popup flutua no centro */
    .modal-overlay {
        position: fixed !important;
        inset: 0 !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 10px calc(20px + env(safe-area-inset-bottom, 0px)) 10px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        pointer-events: none !important;
        z-index: 10500 !important;
        box-sizing: border-box !important;
    }

    .modal-overlay.active {
        display: flex !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 2. Modal: Popup flutuante responsivo sem estourar a tela */
    .modal {
        width: 100% !important;
        max-width: min(calc(100vw - 20px), 520px) !important;
        height: auto !important;
        max-height: calc(100dvh - 90px) !important;
        max-height: calc(100vh - 90px) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 18px !important;
        margin: auto !important;
        box-sizing: border-box !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
        transform: scale(0.96);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
    }

    /* Modais Grandes de Produtividade (OS, Orçamentos, Detalhes) */
    .os-modal,
    .orc-modal,
    .os-delivery-modal,
    .os-payment-modal,
    .os-sticker-preview-modal {
        width: 100% !important;
        max-width: min(calc(100vw - 16px), 720px) !important;
        max-height: calc(100dvh - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
        margin: auto !important;
    }

    .modal-overlay.active .modal {
        transform: scale(1) !important;
    }

    /* Handle visual no topo independente do flex layout do cabeçalho */
    .modal-header::before,
    .os-modal-header::before {
        content: '' !important;
        position: absolute !important;
        top: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 42px !important;
        height: 4px !important;
        background: rgba(255, 255, 255, 0.22) !important;
        border-radius: 4px !important;
        margin: 0 !important;
        pointer-events: none !important;
        z-index: 5 !important;
    }

    /* 3. Header: tamanho natural, alinhamento limpo sem botões tortos */
    .modal-header,
    .os-modal-header {
        flex-shrink: 0 !important;
        padding: 18px 18px 14px !important;
        border-radius: 20px 20px 0 0 !important;
        border-bottom: 1px solid var(--border-color) !important;
        background: var(--bg-modal) !important;
        position: relative !important;
        top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .modal-header h3,
    .os-modal-header h3 {
        font-size: 15px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    /* 4. Body: cresce para preencher, rola internamente
          A chave é: flex-grow:1 + overflow-y:auto + min-height:0
          Sem min-height:0, o flex item não encolhe abaixo
          do tamanho do conteúdo e o scroll nunca ativa     */
    .modal-body,
    .os-modal-body {
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        flex-basis: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        padding: 18px !important;
        padding-bottom: 30px !important;
    }

    /* 5. Footer: tamanho natural, não encolhe, SEMPRE visível e proporcional */
    .modal-footer,
    .os-modal-footer {
        flex-shrink: 0 !important;
        padding: 12px 16px !important;
        padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
        background: var(--bg-modal, var(--bg-card)) !important;
        border-top: 1px solid var(--border-color) !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        position: relative !important;
        bottom: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    .modal-footer .btn,
    .os-modal-footer .btn,
    .modal-footer button,
    .os-modal-footer button {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        justify-content: center !important;
        min-height: 46px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        display: inline-flex;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 12px !important;
        white-space: normal !important;
        text-align: center !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
    }
    .modal-footer .btn[style*="display: none"],
    .modal-footer .btn[style*="display:none"],
    .os-modal-footer .btn[style*="display: none"],
    .os-modal-footer .btn[style*="display:none"],
    .modal-footer button[style*="display: none"],
    .modal-footer button[style*="display:none"],
    .os-modal-footer button[style*="display: none"],
    .os-modal-footer button[style*="display:none"] {
        display: none !important;
    }

    .modal-footer .btn:only-child,
    .os-modal-footer .btn:only-child {
        flex: 1 1 100% !important;
    }

    .modal-footer .btn i,
    .os-modal-footer .btn i,
    .modal-footer button i,
    .os-modal-footer button i {
        flex-shrink: 0 !important;
    }

    .modal-close,
    .os-modal-header .modal-close {
        min-width: 42px !important;
        min-height: 42px !important;
        width: 42px !important;
        height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        touch-action: manipulation;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    /* Inputs: 16px obrigatório no mobile (elimina o delay de 300ms e zoom do iOS) */
    .modal-body input,
    .modal-body select,
    .modal-body textarea,
    .os-modal-body input,
    .os-modal-body select,
    .os-modal-body textarea,
    .modal input,
    .modal select,
    .modal textarea {
        font-size: 16px !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
        box-sizing: border-box !important;
    }

    /* Selects em modais: abertura tátil instantânea */
    .modal-body select,
    .os-modal-body select,
    .modal select {
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    /* Ícones decorativos e prefixos nunca interceptam cliques no input */
    .search-box i,
    .toolbar-search i,
    .input-icon i,
    .prefix-icon,
    .os-field-wrapper > i {
        pointer-events: none !important;
    }

    .modal-body textarea,
    .os-modal-body textarea { min-height: 80px !important; }

    /* Grids no modal: 1 coluna */
    .modal-body .form-row,
    .modal-body .form-grid,
    .os-modal-body .form-row,
    .os-modal-body .form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

@media (max-width: 480px) {
    .modal {
        max-height: 95dvh !important;
        max-height: 95vh !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .modal-header,
    .os-modal-header { padding: 12px 14px 14px !important; }
    .modal-header h3,
    .os-modal-header h3 { font-size: 14px !important; }
    .modal-body,
    .os-modal-body { padding: 14px !important; padding-bottom: 24px !important; }
    .modal-footer,
    .os-modal-footer {
        padding: 10px 14px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
    .modal-footer:has(.btn:nth-child(3)),
    .os-modal-footer:has(.btn:nth-child(3)) {
        flex-direction: column !important;
    }
    .modal-footer:has(.btn:nth-child(3)) .btn,
    .os-modal-footer:has(.btn:nth-child(3)) .btn {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* ─── PDV — Proteção de grids internos ───────────────────
   Garante que os grids do carrinho (tipo de venda,
   pagamento, etc.) nunca sejam colapsados pelo mobile.css */
.pdv-right [style*="display:grid"],
.pdv-right [class*="ig-"],
#pdvCart [style*="display:grid"],
#pdvCart [class*="ig-"] {
    grid-template-columns: revert !important;
}

/* Tipo de venda: sempre 3 colunas */
.pdv-right [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr 1fr !important;
}

/* Payment methods: sempre 3 colunas no PDV */
.pdv-right .payment-methods {
    grid-template-columns: 1fr 1fr 1fr !important;
}

/* Endereço de entrega: 2 colunas no PDV */
.pdv-right [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
}

/* =========================================================
   PDV — Mobile otimizado
   ========================================================= */

/* PDV toggle button - maior e mais acessível */
@media (max-width: 768px) {
    .pdv-mobile-toggle {
        width: 60px !important;
        height: 60px !important;
        font-size: 22px !important;
        bottom: max(20px, env(safe-area-inset-bottom)) !important;
        right: 16px !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
        min-height: 60px !important;
        touch-action: manipulation;
    }
}

/* Cart como bottom sheet no mobile */
@media (max-width: 768px) {
    .pdv-right {
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.3) !important;
    }

    .pdv-cart-header {
        padding: 14px 16px !important;
        cursor: grab;
        touch-action: pan-y;
    }

    .pdv-cart-items {
        padding: 10px !important;
    }

    .pdv-cart-footer {
        padding: 14px 16px !important;
    }
}

/* Produtos no PDV - grid responsivo */
@media (max-width: 768px) {
    .pdv-products {
        padding: 12px !important;
    }

    .pdv-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
        gap: 10px !important;
    }

    .pdv-product-item {
        padding: 12px 8px !important;
        border-radius: 10px !important;
        min-height: 100px !important;
    }

    .pdv-product-item .price {
        font-size: 14px !important;
        margin-top: 6px !important;
    }
}

@media (max-width: 480px) {
    .pdv-product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .pdv-product-item {
        padding: 10px 6px !important;
        border-radius: 8px !important;
        min-height: 90px !important;
    }

    .pdv-product-item .price {
        font-size: 12px !important;
    }
}

/* Carrinho - itens mais compactos */
@media (max-width: 768px) {
    .pdv-cart-item {
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .ci-qty button {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        min-height: 32px !important;
        touch-action: manipulation;
    }

    .ci-remove {
        padding: 8px !important;
        font-size: 14px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        touch-action: manipulation;
    }
}

/* Métodos de pagamento */
@media (max-width: 768px) {
    .payment-methods {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    .payment-methods {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
}

/* Total do carrinho */
@media (max-width: 768px) {
    .pdv-total {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    .pdv-total {
        font-size: 20px !important;
    }
}

/* Categorias PDV com scroll fluido */
@media (max-width: 768px) {
    .pdv-categories {
        padding: 6px 8px !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

/* Cart actions */
@media (max-width: 480px) {
    .cart-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .cart-actions .btn {
        flex: 1 !important;
        min-width: 120px !important;
        justify-content: center !important;
        font-size: 12px !important;
    }
}

/* =========================================================
   PDV — Layout mobile: produtos em cima, carrinho embaixo
   ========================================================= */
@media (max-width: 768px) {
    .pdv-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr auto !important;
        height: calc(100vh - var(--header-height)) !important;
    }

    .pdv-products {
        order: 1;
        overflow-y: auto !important;
    }

    .pdv-cart {
        order: 2;
        max-height: 45vh;
        border-left: none !important;
        border-top: 1px solid var(--border-color) !important;
    }
}

/* =========================================================
   OZPro 16.2 — DESKTOP COMPACTO / 1366x768
   Mantém o layout desktop, mas reduz espaçamentos e impede
   quebra/overflow em notebooks 1280–1440 e pouca altura.
   ========================================================= */
@media (min-width: 1025px) and (max-width: 1440px),
       (min-width: 1025px) and (max-height: 900px) {
    :root {
        --sidebar-width: 220px;
        --sidebar-collapsed: 64px;
        --header-height: 56px;
    }

    html { font-size: 13px; }
    body { min-width: 0; }

    .app-layout,
    .main-content,
    .page-content,
    .card,
    .stat-card,
    .toolbar,
    .toolbar-left,
    .toolbar-right,
    .table-container,
    .form-grid,
    .form-row,
    .two-col-grid,
    .report-grid,
    .config-grid,
    .motoboy-grid,
    .delivery-grid,
    .categorias-grid,
    .caixa-grid,
    .kanban-board,
    .kanban-col {
        min-width: 0;
    }

    /* Sidebar: mantém desktop, porém ocupa menos largura/altura. */
    .sidebar { width: var(--sidebar-width); }
    .sidebar.collapsed { width: var(--sidebar-collapsed); }
    .sidebar-brand {
        min-height: 56px;
        padding: 12px 14px;
        gap: 10px;
    }
    .sidebar-brand .brand-icon { width: 32px; height: 32px; }
    .sidebar-brand .brand-text h1 { font-size: 14px; }
    .sidebar-brand .brand-text span { font-size: 9px; }
    .sidebar-menu {
        padding: 8px 7px 10px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: stable;
    }
    .menu-section { margin: 8px 7px 3px; }
    .menu-section-title { font-size: 9.5px; }
    .menu-item {
        min-height: 38px;
        padding: 8px 11px;
        gap: 10px;
        margin-bottom: 2px;
        font-size: 13px;
    }
    .menu-item i { width: 20px; font-size: 15px; }
    .sidebar-toggle { padding: 7px 10px; }
    .sidebar-toggle button { width: 32px; height: 32px; }

    /* Conteúdo principal e cabeçalho. */
    .main-content {
        margin-left: var(--sidebar-width);
        width: auto;
        max-width: none;
        min-width: 0;
    }
    .sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-collapsed); }
    .header {
        min-height: var(--header-height);
        height: var(--header-height);
        padding: 0 16px;
        gap: 10px;
    }
    .header-left,
    .header-right { min-width: 0; }
    .header-left { gap: 10px; }
    .header-left h2 { font-size: 16px; white-space: nowrap; }
    .header-breadcrumb { display: none; }
    .header-search {
        max-width: 260px;
        min-width: 150px;
        margin: 0 10px;
    }
    .header-action { width: 34px; height: 34px; font-size: 14px; }
    .header-avatar { width: 34px; height: 34px; margin-left: 2px; }

    .page-content {
        padding: 14px 16px 18px;
        overflow-x: hidden;
        overflow-x: clip; /* 35.33 · clip não vira caixa de rolagem (Android) */
    }

    /* Cabeçalhos e toolbars podem quebrar linha sem desmontar a página. */
    .page-header,
    .card-header,
    .toolbar,
    .toolbar-left,
    .toolbar-right,
    [style*="display:flex"][style*="justify-content:space-between"],
    [style*="display: flex"][style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }
    .toolbar { gap: 8px; margin-bottom: 12px; }
    .toolbar-left,
    .toolbar-right { gap: 7px; }
    .toolbar-search { max-width: 260px; min-width: 180px; }
    .toolbar-select { min-width: 120px; }

    /* Cards e indicadores compactos para caber sem zoom. */
    .card { padding: 16px; border-radius: 12px; }
    .card-header { margin-bottom: 14px; }
    .card-title { font-size: 14px; }
    .stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }
    .stat-card { padding: 13px 14px; }
    .stat-card .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
        margin-bottom: 8px;
    }
    .stat-card .stat-value { font-size: 19px; line-height: 1.2; }
    .stat-card .stat-label { font-size: 10.5px; }
    .stat-card .stat-change { font-size: 9.5px; }

    /* Grids inline antigos: permitir encolhimento real das colunas. */
    [style*="grid-template-columns:repeat(6,1fr)"],
    [style*="grid-template-columns: repeat(6,1fr)"] {
        grid-template-columns: repeat(6, minmax(0,1fr)) !important;
        gap: 8px !important;
    }
    [style*="grid-template-columns:repeat(4,1fr)"],
    [style*="grid-template-columns: repeat(4,1fr)"] {
        grid-template-columns: repeat(4, minmax(0,1fr)) !important;
        gap: 9px !important;
    }
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: minmax(0,2fr) minmax(0,1fr) !important;
    }
    [style*="grid-template-columns:1fr 2fr"],
    [style*="grid-template-columns: 1fr 2fr"] {
        grid-template-columns: minmax(0,1fr) minmax(0,2fr) !important;
    }

    .two-col-grid { gap: 12px; }
    .form-grid,
    .form-row { gap: 10px 12px; }
    .form-group { min-width: 0; }
    .form-control,
    .form-input,
    select,
    textarea,
    input { max-width: 100%; }

    /* Tabelas: a página não estoura; somente a tabela ganha scroll se precisar. */
    .table-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table {
        width: 100%;
        min-width: 720px;
        table-layout: auto;
    }
    .data-table thead th,
    .data-table tbody td { padding-top: 9px; padding-bottom: 9px; }
    .data-table thead th:first-child,
    .data-table tbody td:first-child { padding-left: 14px; }
    .data-table thead th:last-child,
    .data-table tbody td:last-child { padding-right: 14px; }
    .actions-cell { flex-wrap: nowrap; }
    .btn-icon { width: 31px; height: 31px; }

    /* Grids mais pesados das telas operacionais. */
    .report-grid { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; }
    .config-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
    .motoboy-grid { grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 12px; }
    .delivery-grid { grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 12px; }
    .categorias-grid { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; }
    .caixa-grid { grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); gap: 10px; }
    .kanban-board {
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
    }
    .kanban-col { min-width: 230px; max-width: 280px; }
    .kanban-card { padding: 12px; }

    .chart-container { height: 235px; }

    /* Modais em 768px de altura: cabeçalho/rodapé fixos e corpo rolável. */
    .modal {
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .modal-header { padding: 14px 18px; flex-shrink: 0; }
    .modal-body {
        padding: 16px 18px;
        overflow-y: auto;
        min-height: 0;
        flex: 1 1 auto;
    }
    .modal-footer { padding: 11px 18px; flex-shrink: 0; flex-wrap: wrap; }

    /* Evita que min-width inline de filtros/cards force overflow. */
    .page-content [style*="min-width:220px"],
    .page-content [style*="min-width: 220px"],
    .page-content [style*="min-width:240px"],
    .page-content [style*="min-width: 240px"],
    .page-content [style*="min-width:260px"],
    .page-content [style*="min-width: 260px"] {
        min-width: 180px !important;
    }
}

/* Ajuste fino exatamente para o padrão 1366x768 / notebooks HD. */
@media (min-width: 1280px) and (max-width: 1440px) and (max-height: 820px) {
    .page-content { padding-top: 12px; padding-bottom: 14px; }
    .stat-grid { margin-bottom: 12px; }
    .card { padding: 14px; }
    .card-header { margin-bottom: 12px; }
    .report-card,
    .delivery-card,
    .motoboy-card,
    .config-item { padding: 14px; }

    /* PDV: carrinho ligeiramente menor para manter 5 produtos por linha. */
    .pdv-right { width: 350px !important; }
    .pdv-header { min-height: 46px !important; padding: 7px 12px !important; }
    .pdv-categories { padding: 6px 12px !important; }
    .pdv-products-area { padding: 6px 9px !important; }
    .product-card {
        width: calc(20% - 8px) !important;
        margin: 4px !important;
        padding: 8px !important;
    }
    .product-card .p-thumb { height: 70px !important; margin-bottom: 5px !important; }
    .product-card .p-name { font-size: 11px !important; }
    .product-card .p-code { margin-bottom: 3px !important; }
    .product-card .p-price { font-size: 13px !important; }
}

/* Login/demonstração também precisa caber inteiro em 1366x768. */
@media (min-width: 961px) and (max-width: 1440px) and (max-height: 900px) {
    .login-brand { padding: 30px 36px !important; min-width: 0; }
    .brand-content { max-width: 430px !important; width: 100%; }
    .brand-logo {
        width: 56px !important;
        height: 56px !important;
        border-radius: 14px !important;
        font-size: 25px !important;
        margin-bottom: 16px !important;
    }
    .brand-content h1 { font-size: 31px !important; margin-bottom: 7px !important; }
    .brand-content p { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 22px !important; }
    .brand-features { gap: 9px !important; }
    .brand-feature { gap: 10px !important; padding: 10px 13px !important; }
    .brand-feature i { width: 30px !important; height: 30px !important; font-size: 13px !important; }
    .brand-feature span { font-size: 11.5px !important; }

    .login-panel {
        width: 430px !important;
        padding: 28px 38px !important;
        min-width: 390px;
    }
    .login-header { margin-bottom: 22px !important; }
    .login-header h2 { font-size: 21px !important; }
    .login-header p { font-size: 12px !important; }
    .segment-grid { gap: 7px !important; margin: 12px 0 !important; }
    .segment-card { min-height: 68px !important; padding: 9px 10px !important; gap: 8px !important; }
    .segment-card .segment-icon { font-size: 20px !important; width: 25px !important; flex-basis: 25px !important; }
    .segment-card strong { font-size: 10.5px !important; margin-bottom: 2px !important; }
    .segment-card small { font-size: 9px !important; }
    .other-segment { margin-top: 9px !important; padding-top: 10px !important; }
    .selected-segment { margin: -8px 0 14px !important; padding: 9px 11px !important; }
    .form-group { margin-bottom: 13px !important; }
    .form-label { margin-bottom: 5px !important; }
    .form-input { padding-top: 9px !important; padding-bottom: 9px !important; }
    .btn-login { padding: 11px !important; }
    .login-footer { margin-top: 18px !important; }
}
/* =========================================================
   BREAKPOINTS INTERMEDIÁRIOS — 1000px / 900px
   Suaviza transição entre desktop e tablet/mobile
   ========================================================= */

/* 1000px: tablets grandes / laptops pequenos */
@media (max-width: 1000px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.35s ease;
    }
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 8px 0 40px rgba(0,0,0,0.5);
    }
    .sidebar-toggle { display: none !important; }
    .main-content {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100vw;
    }
    .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .header-search {
        max-width: 160px;
        flex: 1;
        min-width: 100px;
    }
    .stat-grid[style*="repeat(6,1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    .stat-grid[style*="repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .kanban-board[style*="1fr 1fr 1fr"],
    .kanban-board[style*="grid-template-columns:1fr 1fr 1fr"],
    .kanban-board[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    [style*="grid-template-columns:repeat(auto-fill,minmax(360px"] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 12px !important;
    }
    .modal {
        width: 92%;
        max-width: 92%;
    }
    .table-container {
        max-height: 55vh;
        overflow-y: auto;
    }
    .toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }
    .toolbar-left {
        flex-wrap: wrap;
        gap: 8px;
    }
    .toolbar-right {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* 900px: tablets menores / mobile grande */
@media (max-width: 900px) {
    :root {
        --header-height: 54px;
    }
    .header {
        padding: 0 14px;
        gap: 8px;
    }
    .header-left h2 {
        font-size: 15px;
        max-width: 150px;
    }
    .header-search {
        max-width: 140px;
    }
    .header-action {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
    .header-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }
    .stat-grid[style*="repeat(6,1fr)"],
    .stat-grid[style*="repeat(4,1fr)"],
    .stat-grid[style*="repeat(3,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .stat-card {
        padding: 12px 14px !important;
    }
    .stat-card .stat-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    .stat-card .stat-value {
        font-size: 17px !important;
    }
    .stat-card .stat-label {
        font-size: 10px !important;
    }
    .stat-card .stat-change {
        font-size: 9px !important;
    }
    .kanban-board[style*="1fr 1fr 1fr"],
    .kanban-board[style*="grid-template-columns:1fr 1fr 1fr"],
    .kanban-board[style*="grid-template-columns: 1fr 1fr 1fr"],
    .kanban-board {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .kanban-col-body {
        max-height: none !important;
    }
    [style*="grid-template-columns:repeat(auto-fill,minmax(360px"],
    [style*="grid-template-columns:repeat(auto-fill,minmax(280px"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .stat-grid[style*="repeat(6,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .page-content > .card:first-child [style*="display:flex;justify-content:space-between"] {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .toolbar-left {
        flex-direction: column !important;
        width: 100% !important;
        gap: 6px !important;
    }
    .toolbar-right {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .toolbar-right .btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-height: 44px !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        touch-action: manipulation;
    }
    .toolbar-right .btn:only-child {
        flex: 1 1 100% !important;
    }
    .data-table td:last-child,
    .data-table th:last-child {
        position: sticky;
        right: 0;
        background: var(--bg-card) !important;
        z-index: 2;
        box-shadow: -3px 0 8px rgba(0,0,0,0.15);
        min-width: 156px !important;
        white-space: nowrap !important;
    }
    .data-table tbody tr:hover td:last-child {
        background: var(--bg-card-hover) !important;
    }
    .data-table .actions-cell {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        min-width: 156px !important;
        white-space: nowrap !important;
    }
    .data-table .btn-icon,
    .actions-cell .btn-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation;
    }
    .modal-overlay {
        align-items: flex-end !important;
    }
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 90dvh !important;
        max-height: 90vh !important;
    }
    .modal-header {
        border-radius: 16px 16px 0 0 !important;
    }
    .modal-header::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(255,255,255,0.15);
        border-radius: 4px;
        margin: 0 auto 10px;
    }
    .modal-footer .btn {
        flex: 1 !important;
        justify-content: center !important;
        min-height: 44px !important;
    }
    .page-content {
        padding: 10px !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
    .card {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    .card-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    .form-grid,
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .btn {
        min-height: 40px !important;
        touch-action: manipulation;
    }
    .toolbar-search,
    .search-box {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* MOBILE PEQUENO — 640px */
@media (max-width: 640px) {
    :root {
        --header-height: 52px;
    }
    .header {
        padding: 0 10px !important;
        gap: 6px !important;
    }
    .header-left h2 {
        font-size: 14px !important;
        max-width: 120px !important;
    }
    .header-action {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
    .header-avatar {
        width: 30px !important;
        height: 30px !important;
        font-size: 11px !important;
    }
    .stat-card {
        padding: 10px 12px !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .stat-card .stat-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }
    .stat-card .stat-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .stat-card .stat-value {
        font-size: 15px !important;
    }
    .stat-card .stat-label {
        font-size: 9px !important;
    }
    .stat-card .stat-change {
        font-size: 8px !important;
        padding: 1px 5px !important;
    }
    .card {
        padding: 12px !important;
        border-radius: 10px !important;
    }
    .table-container {
        position: relative;
    }
    .data-table tbody tr:nth-child(even) {
        background: rgba(255,255,255,0.02);
    }
    .table-container {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .modal {
        max-height: 95dvh !important;
        max-height: 95vh !important;
        border-radius: 14px 14px 0 0 !important;
    }
    .modal-header {
        padding: 12px 14px 14px !important;
    }
    .modal-header h3 {
        font-size: 14px !important;
    }
    .modal-body {
        padding: 14px !important;
    }
    .modal-footer {
        padding: 10px 14px !important;
    }
    .page-content {
        padding: 8px !important;
    }
    .caixa-status-bar {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    .period-btn {
        padding: 5px 10px !important;
        font-size: 10px !important;
    }
}

/* Login mobile */
@media (max-width: 640px) {
    .login-brand {
        display: none !important;
    }
    .login-panel {
        width: 100% !important;
        border-left: none !important;
        padding: 36px 20px !important;
        min-height: 100vh;
        min-height: 100dvh;
    }
    .login-header h2 {
        font-size: 22px !important;
    }
    .form-input {
        font-size: 16px !important;
        padding: 12px 14px 12px 48px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
    .input-wrap .form-input,
    .input-wrap input {
        padding-left: 48px !important;
        padding-right: 48px !important;
    }
    .input-wrap:not(:has(.password-toggle)):not(:has(button)) .form-input,
    .input-wrap:not(:has(.password-toggle)):not(:has(button)) input {
        padding-right: 16px !important;
    }
    .btn-login {
        padding: 13px !important;
        font-size: 14px !important;
        min-height: 48px !important;
    }
}

/* Ocultar barra de navegação mobile na tela de login */
body.st-login .st-tabbar,
body#loginPage .st-tabbar,
body:has(#loginForm) .st-tabbar,
body:has(.login-panel) .st-tabbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* FIX FINAL — Garantir que nada ultrapasse a tela */
@media (max-width: 768px) {
    .app-layout,
    .main-content,
    .page-content,
    .header,
    .card,
    .stat-grid,
    .toolbar,
    .kanban-board,
    .modal-overlay,
    .sidebar {
        max-width: 100vw !important;
        overflow-x: clip !important;
    }
    .card-title,
    .stat-label,
    .menu-item .menu-text,
    .kanban-card-client,
    .product-cell .product-name {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto;
    }
    .menu-item .badge {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 8px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .fas, .far, .fab, .fa {
        flex-shrink: 0 !important;
    }
    img {
        max-width: 100%;
        height: auto;
        flex-shrink: 0;
    }
    [style*="min-width"] {
        min-width: 0 !important;
    }
    .header-left,
    .header-right,
    .toolbar-left,
    .toolbar-right {
        min-width: 0;
        flex-shrink: 1;
    }
    .stat-card,
    .categoria-card,
    .report-card,
    .motoboy-card,
    .delivery-card {
        min-width: 0;
        flex-shrink: 1;
    }
    .kanban-board {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px !important;
        padding-bottom: 10px !important;
    }
    .kanban-col {
        min-width: 260px !important;
        max-width: 280px !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start;
    }
    .delivery-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .caixa-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .categorias-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .fluxo-summary {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .report-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .config-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .motoboy-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .two-col-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .chart-container {
        height: 200px !important;
        padding: 6px !important;
    }
    .search-box {
        max-width: 100% !important;
    }
    .badge-status {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
    .btn:active:not(:disabled) {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }
    .btn-icon:active:not(:disabled) {
        transform: scale(0.93);
    }
    .stat-card:active,
    .kanban-card:active,
    .categoria-card:active,
    .report-card:active {
        transform: scale(0.98);
        transition: transform 0.15s ease;
    }
    .menu-item:active {
        background: rgba(99,102,241,0.12) !important;
    }
    .data-table tbody tr:active {
        background: rgba(99,102,241,0.05) !important;
    }
    .btn, .btn-icon, .stat-card, .kanban-card, .menu-item,
    .header-action, .mobile-menu-btn, .cat-btn, .period-btn,
    .categoria-card, .report-card, .motoboy-card, .delivery-card {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: default;
    }
}

/* MOBILE PEQUENO — 480px */
@media (max-width: 480px) {
    :root {
        --header-height: 50px;
    }
    .header {
        padding: 0 8px !important;
        gap: 4px !important;
    }
    .header-left h2 {
        font-size: 13px !important;
        max-width: 100px !important;
    }
    .header-action {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }
    .header-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
    }
    .stat-card {
        padding: 10px !important;
        gap: 8px !important;
    }
    .stat-card .stat-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
        border-radius: 7px !important;
    }
    .stat-card .stat-value {
        font-size: 14px !important;
    }
    .stat-card .stat-label {
        font-size: 9px !important;
    }
    .stat-card .stat-change {
        font-size: 8px !important;
        padding: 1px 5px !important;
    }
    .page-content {
        padding: 6px !important;
    }
    .card {
        padding: 10px !important;
        border-radius: 8px !important;
    }
    .caixa-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .categorias-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .report-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .kanban-col {
        min-width: 240px !important;
        max-width: 260px !important;
    }
    .kanban-card {
        padding: 10px !important;
    }
    .kanban-card-client {
        font-size: 12px !important;
    }
    .kanban-card-total {
        font-size: 13px !important;
    }
    .toolbar-right {
        flex-direction: column !important;
    }
    .toolbar-right .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .btn-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }
    .actions-cell {
        gap: 3px !important;
    }
    .product-thumb {
        width: 26px !important;
        height: 26px !important;
        font-size: 9px !important;
    }
    .modal {
        max-height: 96dvh !important;
        max-height: 96vh !important;
        border-radius: 12px 12px 0 0 !important;
    }
    .modal-header {
        padding: 10px 12px 12px !important;
    }
    .modal-header h3 {
        font-size: 13px !important;
    }
    .modal-body {
        padding: 12px !important;
    }
    .modal-footer {
        padding: 8px 12px !important;
    }
    .modal-footer .btn {
        min-height: 40px !important;
        font-size: 12px !important;
    }
    .data-table {
        min-width: 480px !important;
    }
    .data-table thead th {
        padding: 8px 8px !important;
        font-size: 9px !important;
    }
    .data-table tbody td {
        padding: 8px 8px !important;
        font-size: 11px !important;
    }
    .period-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    .delivery-status-trail {
        gap: 0 !important;
    }
    .trail-line {
        min-width: 10px !important;
    }
    .trail-step::before,
    .trail-step::after {
        display: none !important;
        content: none !important;
    }
}

/* EXTRA PEQUENO — 360px */
@media (max-width: 360px) {
    html {
        font-size: 13px;
    }
    .page-content {
        padding: 4px !important;
    }
    .stat-card {
        padding: 8px !important;
        gap: 6px !important;
    }
    .stat-card .stat-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
    }
    .stat-card .stat-value {
        font-size: 13px !important;
    }
    .stat-card .stat-label {
        font-size: 8px !important;
    }
    .header-left h2 {
        font-size: 12px !important;
        max-width: 90px !important;
    }
    .btn {
        padding: 8px 10px !important;
        font-size: 11px !important;
        min-height: 36px !important;
    }
    .btn-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 10px !important;
    }
    .card {
        padding: 8px !important;
    }
    .data-table {
        min-width: 420px !important;
    }
    .data-table thead th,
    .data-table tbody td {
        padding: 6px 6px !important;
    }
    .modal {
        border-radius: 10px 10px 0 0 !important;
    }
}

/* CONTAINER QUERIES — Componentes autônomos */
@supports (container-type: inline-size) {
    .stat-card {
        container-type: inline-size;
    }
    @container (max-width: 150px) {
        .stat-card {
            flex-direction: column !important;
            align-items: flex-start !important;
        }
        .stat-card .stat-icon {
            margin-bottom: 6px !important;
        }
        .stat-card .stat-value {
            font-size: 14px !important;
        }
    }
}

/* FIM DO ARQUIVO mobile.css */

/* =========================================================
   CLASSES RESPONSIVAS — Substituem estilos inline
   ========================================================= */

/* Dashboard: charts row 2fr 1fr → 1fr em mobile/tablet */
.dash-grid-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

/* Dashboard: bottom row 1fr 1fr → 1fr em mobile/tablet */
.dash-grid-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Caixa: stat-grid com 6 colunas */
.caixa-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

/* Produtos: stat-grid com 4 colunas */
.produtos-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Clientes: stat-grid com 4 colunas */
.clientes-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Entregas: grid de entregas ativas */
.entregas-active-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Pedidos: kanban board com 3 colunas */
.pedidos-kanban-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: start;
}

/* =========================================================
   RESPONSIVE OVERRIDES PARA CLASSES NOVAS
   ========================================================= */

/* 1000px: dashboard charts empilha */
@media (max-width: 1000px) {
    .dash-grid-main {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .dash-grid-equal {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .caixa-stat-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    .produtos-stat-grid,
    .clientes-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .entregas-active-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 12px !important;
    }
    .pedidos-kanban-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* 900px: mobile grande */
@media (max-width: 900px) {
    .dash-grid-main,
    .dash-grid-equal {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .caixa-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .produtos-stat-grid,
    .clientes-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .entregas-active-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .pedidos-kanban-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* 768px: mobile */
@media (max-width: 768px) {
    .dash-grid-main,
    .dash-grid-equal {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .caixa-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .produtos-stat-grid,
    .clientes-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .entregas-active-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .pedidos-kanban-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* 480px: mobile pequeno */
@media (max-width: 480px) {
    .caixa-stat-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .produtos-stat-grid,
    .clientes-stat-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}

/* =========================================================
   FIX RESPONSIVIDADE: BUSCA & LUPINHA (CELULAR & TABLET)
   ========================================================= */
.toolbar-search,
.header-search,
.search-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.toolbar-search i,
.header-search i,
.search-box i {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    color: var(--text-muted, #94a3b8) !important;
    font-size: 14px !important;
    z-index: 3 !important;
}

.toolbar-search input,
.header-search input,
.search-box input {
    padding-left: 42px !important;
    padding-right: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .toolbar-left {
        width: 100% !important;
        flex: 1 1 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .toolbar-search {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .toolbar-search input {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .toolbar-left {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .toolbar-search {
        flex: 1 1 280px !important;
        min-width: 220px !important;
        max-width: 400px !important;
    }
    .toolbar-search input {
        height: 42px !important;
        min-height: 42px !important;
        font-size: 13.5px !important;
    }
}

/* =========================================================
   OZPRO MOBILE POLISH — CADASTROS, TABELAS & GERAL COMPLETA
   ========================================================= */
@media (max-width: 768px) {
    /* ── Header Mobile Clean ── */
    .header-breadcrumb {
        display: none !important;
    }
    .header-left h2 {
        font-size: 15px !important;
        max-width: 170px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .header-search {
        display: none !important;
    }

    /* ── Grids de Estatísticas Compactos (Clientes, Produtos, Caixa) ── */
    .clientes-stat-grid,
    .produtos-stat-grid,
    .caixa-stat-grid,
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .caixa-stat-grid .stat-card:last-child {
        grid-column: 1 / -1 !important;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(34, 211, 238, 0.08)) !important;
        border-color: var(--accent) !important;
    }

    .stat-card {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .stat-card .stat-value {
        font-size: 17px !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums !important;
    }

    .stat-card .stat-label {
        font-size: 10.5px !important;
        line-height: 1.2 !important;
    }

    /* ── Toolbars e Filtros ── */
    .toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .toolbar-left {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .toolbar-left .toolbar-select,
    .toolbar-left select {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 130px !important;
        height: 42px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    .toolbar-right {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: stretch !important;
    }

    .toolbar-right .btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-height: 42px !important;
        justify-content: center !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        touch-action: manipulation;
    }

    .toolbar-right .btn-primary {
        order: -1 !important;
    }

    /* ── Containers de Tabela: Rolagem Natural da Página quando em Cards ── */
    .table-container.st-wrap,
    .table-container:has(table.st-cards) {
        overflow: visible !important;
        max-height: none !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* ── Prevenção de Auto-Zoom no iOS Safari ── */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ── Botões Flutuantes e Área de Segurança da Barra Inferior ── */
    .ft-fab,
    .pdv-mobile-toggle {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ── Rodapés de Modais com Área Segura do Celular ── */
    .modal-footer,
    .uf-footer,
    .os-modal-footer,
    .orc-foot {
        padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FEEDBACK TÁTIL MOBILE-FIRST — RESPOSTA AO TOQUE (PASSAR O DEDO)
   Micro-interações fluidas e alvos de toque aprimorados
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
    /* Remoção de highlight cinza padrão feio do Android/WebKit */
    *, *::before, *::after {
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Feedback ao passar o dedo / tocar em botões e ações */
    button:active,
    .btn:active,
    .os-action:active,
    .orc-act:active,
    .os-m-btn:active,
    .menu-item:active,
    .btn-density-pill:active,
    .os-stk-fmt-btn:active,
    .osx-quick-copy:active {
        transform: scale(0.96) !important;
        filter: brightness(1.1) !important;
        transition: transform 0.08s ease, filter 0.08s ease !important;
    }

    /* Cards e Itens de Lista com resposta tátil ao toque */
    .os-mobile-card:active,
    .orc-table tr:active,
    .stat-card:active,
    .pdv-prod-card:active,
    .uf-device-card:active {
        transform: scale(0.985) !important;
        border-color: var(--accent) !important;
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.22) !important;
        transition: transform 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease !important;
    }

    /* Abas de navegação tátil fluida */
    .os-stage-tab:active,
    .orc-pill:active,
    .pdv-cat-btn:active {
        transform: scale(0.95) !important;
        background: rgba(99, 102, 241, 0.18) !important;
    }

    /* Alvos de toque confortáveis (mínimo recomendado para touch) */
    .btn,
    .form-control,
    .form-input,
    .os-action,
    .orc-act {
        touch-action: manipulation !important;
    }

    /* Feedback tátil avançado ao passar o dedo e tocar no celular */
    .product-card:active,
    .os-mobile-card:active,
    .orc-table tr:active,
    .stat-card:active {
        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.28), 0 0 0 1px var(--accent) !important;
        border-color: var(--accent) !important;
        transform: scale(0.985) translateY(-1px) !important;
    }
    .product-card {
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
    }
    .product-card .p-thumb:active {
        filter: brightness(1.08) saturate(1.05) !important;
    }

    /* Rolagem suave com inércia em todas as áreas rolantes (sem prender scroll da página) */
    .modal-body {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain;
    }
    .page-content,
    .table-responsive,
    .orc-table-wrap,
    .os-stage-tabs {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y pan-x !important;
    }
}

/* ─── CONTROLES DE DENSIDADE E BANNERS INTUITIVOS MOBILE ───── */
@media (max-width: 768px) {
    .product-density-selector:not(.pdv-density-selector) {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }
    .btn-density-pill:not(.pdv-density-selector .btn-density-pill) {
        flex: 1 !important;
        justify-content: center !important;
        padding: 8px 6px !important;
        font-size: 11px !important;
        min-height: 38px !important;
    }
    .mobile-screen-hint-banner {
        display: flex !important;
    }
}

.mobile-screen-hint-banner {
    display: none;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-secondary);
}
.mobile-screen-hint-banner i {
    color: var(--accent);
    margin-top: 2px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* BANNER UNIVERSAL DE DICAS & GESTÃO ÁGIL (TODAS AS TELAS)           */
/* ═══════════════════════════════════════════════════════════════════ */
.app-help-banner,
.os-mobile-help-banner,
.orc-mobile-help-banner {
    display: none;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent) 0%, color-mix(in srgb, var(--accent) 5%, transparent) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-color)) !important;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    transition: all 0.22s ease-in-out;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.app-help-banner.is-active,
.os-mobile-help-banner.is-active,
.orc-mobile-help-banner.is-active {
    display: flex !important;
}

/* Quando injetado diretamente em .main-content antes de containers dinâmicos (*Root) */
.main-content > .app-help-banner {
    margin: 16px 24px 0 24px;
    width: calc(100% - 48px);
}
@media (max-width: 768px) {
    .main-content > .app-help-banner {
        margin: 10px 12px 0 12px;
        width: calc(100% - 24px);
    }
}

.app-help-banner-icon,
.os-mobile-help-icon,
.orc-mobile-help-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-muted) !important;
    color: var(--accent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.app-help-banner-main,
.os-mobile-help-content,
.orc-mobile-help-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-help-banner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.app-help-banner-title,
.os-mobile-help-content strong,
.orc-mobile-help-content strong {
    color: var(--text-heading, #fff);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.app-help-banner-actions,
.os-mobile-help-actions,
.orc-mobile-help-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    flex-shrink: 0;
}

.btn-help-banner-action {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.18s ease;
    padding: 0;
    outline: none;
}

.btn-help-banner-action:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #fff;
    border-color: var(--accent, #6366f1);
    transform: translateY(-1px);
}

.btn-help-banner-action.btn-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

.app-help-banner-body,
.os-mobile-help-content span,
.orc-mobile-help-content span {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary, #cbd5e1);
    transition: opacity 0.2s ease, max-height 0.25s ease;
}

.app-help-banner-body b,
.os-mobile-help-content b,
.orc-mobile-help-content b {
    color: var(--text-heading, #fff);
}

/* Estado Minimizado (Apenas 1 linha discreta com ícone para reexpandir) */
.app-help-banner.is-minimized,
.os-mobile-help-banner.is-minimized,
.orc-mobile-help-banner.is-minimized {
    padding: 8px 12px !important;
    align-items: center !important;
    gap: 8px !important;
}

.app-help-banner.is-minimized .app-help-banner-icon,
.os-mobile-help-banner.is-minimized .os-mobile-help-icon,
.orc-mobile-help-banner.is-minimized .orc-mobile-help-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    margin-top: 0 !important;
}

.app-help-banner.is-minimized .app-help-banner-body,
.os-mobile-help-banner.is-minimized .os-mobile-help-content span,
.orc-mobile-help-banner.is-minimized .orc-mobile-help-content span {
    display: none !important;
}

.app-help-banner.is-minimized .app-help-banner-title,
.os-mobile-help-banner.is-minimized .os-mobile-help-content strong,
.orc-mobile-help-banner.is-minimized .orc-mobile-help-content strong {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-muted, #94a3b8) !important;
}

/* Tema Claro */
html[data-theme="light"] .app-help-banner,
html[data-theme="light"] .os-mobile-help-banner,
html[data-theme="light"] .orc-mobile-help-banner {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, #ffffff) 0%, color-mix(in srgb, var(--accent) 4%, #f8fafc) 100%) !important;
    border-color: color-mix(in srgb, var(--accent) 25%, #cbd5e1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] .btn-help-banner-action {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #64748b;
}

html[data-theme="light"] .btn-help-banner-action:hover {
    background: var(--accent-muted) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BARRA DE NAVEGAÇÃO INFERIOR MOBILE UNIVERSAL (BOTTOM NAV)
   ═══════════════════════════════════════════════════════════════════════ */
.mobile-bottom-nav,
#mobileBottomNav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }
    body {
        padding-bottom: 64px !important;
    }
    .page-content,
    .main-content,
    .content-area,
    .app-content {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Telas explicitamente sem barra inferior (B2B, Login, no-tabbar) */
    body.no-tabbar,
    body.b2b-page,
    body.st-login,
    body#loginPage {
        padding-bottom: 0 !important;
    }
    body.no-tabbar .page-content,
    body.no-tabbar .main-content,
    body.no-tabbar .content-area,
    body.no-tabbar .app-content,
    body.b2b-page .page-content,
    body.b2b-page .main-content,
    body.b2b-page .content-area,
    body.b2b-page .app-content {
        padding-bottom: 24px !important;
    }

    body.no-tabbar .st-tabbar,
    body.b2b-page .st-tabbar,
    .no-tabbar .st-tabbar,
    .b2b-page .st-tabbar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        bottom: -9999px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTÃO DE SAIR / FECHAR MENU E DOCK MOBILE
   ═══════════════════════════════════════════════════════════════════════ */
.sidebar-mobile-close,
.sidebar-mobile-exit-dock {
    display: none;
}

@media (max-width: 1024px) {
    .sidebar {
        z-index: 3500 !important;
        top: 10px !important;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        left: 10px !important;
        height: auto !important;
        max-height: calc(100dvh - 88px - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100vh - 88px - env(safe-area-inset-bottom, 0px)) !important;
    }
    body.no-tabbar .sidebar,
    body.b2b-page .sidebar,
    body.st-login .sidebar {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100vh - 20px - env(safe-area-inset-bottom, 0px)) !important;
    }
    .mobile-overlay {
        z-index: 3000 !important;
    }
    .sidebar.mobile-open {
        z-index: 3500 !important;
    }

    .sidebar-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
    }

    .sidebar-mobile-close {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: var(--text-primary, #ffffff) !important;
        font-size: 16px !important;
        cursor: pointer !important;
        margin-left: auto !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
        z-index: 5 !important;
    }

    .sidebar-mobile-close:hover,
    .sidebar-mobile-close:active {
        background: rgba(239, 68, 68, 0.2) !important;
        color: #ef4444 !important;
        border-color: rgba(239, 68, 68, 0.4) !important;
    }

    html[data-theme="light"] .sidebar-mobile-close {
        border-color: rgba(0, 0, 0, 0.12) !important;
        background: rgba(0, 0, 0, 0.05) !important;
        color: #0f172a !important;
    }

    .sidebar-menu {
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .sidebar-mobile-exit-dock {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin: 20px 14px 10px 14px !important;
        padding-top: 14px !important;
        border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    }

    .sidebar-mobile-exit-dock .btn-dock-close {
        width: 100% !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: var(--text-primary, #ffffff) !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        cursor: pointer !important;
    }

    .sidebar-mobile-exit-dock .btn-dock-logout {
        width: 100% !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        background: rgba(239, 68, 68, 0.12) !important;
        border: 1px solid rgba(239, 68, 68, 0.3) !important;
        color: #ef4444 !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        cursor: pointer !important;
    }

    html[data-theme="light"] .sidebar-mobile-exit-dock .btn-dock-close {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
        color: #0f172a !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   BLINDAGEM RESPONSIVA UNIVERSAL (TABELAS, FORMULÁRIOS E OVERFLOW)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* 1. Prevenção Universal de Quebra Lateral por Tabelas */
    .table-container,
    .table-responsive,
    .data-table-container,
    .card-body:has(> table),
    .card-body:has(> .table),
    .card-body:has(> .data-table) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain;
    }

    /* Scrollbar sutil para tabelas no mobile */
    .table-container::-webkit-scrollbar,
    .table-responsive::-webkit-scrollbar {
        height: 5px;
    }
    .table-container::-webkit-scrollbar-thumb,
    .table-responsive::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 999px;
    }
    html[data-theme="light"] .table-container::-webkit-scrollbar-thumb,
    html[data-theme="light"] .table-responsive::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 768px) {
    /* 2. Prevenção Universal de Auto-Zoom no iOS */
    input[type="text"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* 3. Garantia de Quebra Flexível em Toolbars de Ações e Filtros */
    .card-header,
    .table-toolbar,
    .page-actions,
    .filter-bar,
    .toolbar-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* 4. Prevenção de quebra de largura em modais e cards */
    .card,
    .modal-content,
    .stat-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. Blindagem Absoluta para TODO E QUALQUER POPUP / MODAL */
    .modal,
    .os-modal,
    .orc-modal,
    .pm-modal,
    .modal-dialog,
    .modal-content,
    .modal-container,
    .modal-box,
    .popup-box,
    .popup-content,
    .modal-overlay > div:not(.modal-backdrop) {
        width: 100% !important;
        max-width: min(calc(100vw - 16px), 640px) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: auto !important;
        max-height: calc(100dvh - 30px) !important;
        max-height: calc(100vh - 30px) !important;
        border-radius: 18px !important;
    }

    /* Corpo de Qualquer Modal/Popup: Rolagem Interna sem Estouro Lateral */
    .modal-body,
    .os-modal-body,
    .pm-body,
    .modal-content .modal-body,
    .modal-container .modal-body {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        box-sizing: border-box !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }

    /* Grids dentro de Modais: 1 Coluna no Celular */
    .modal-body .form-row,
    .modal-body .form-grid,
    .modal-body .grid-2,
    .modal-body .grid-3,
    .modal-body .grid-4,
    .modal-body .responsive-grid-2,
    .modal-body .responsive-grid-3,
    .modal-body [style*="grid-template-columns"],
    .modal [style*="grid-template-columns"],
    .modal-body [style*="display:grid"],
    .modal-body [style*="display: grid"],
    .modal [style*="display:grid"],
    .modal [style*="display: grid"],
    .os-modal-body .os-grid-4,
    .os-modal-body .os-grid-3,
    .os-modal-body .os-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .modal-body [style*="grid-template-columns"] > div,
    .modal [style*="grid-template-columns"] > div,
    .modal-body [style*="display:grid"] > div,
    .modal-body [style*="display: grid"] > div {
        width: 100% !important;
        min-width: 0 !important;
    }

    .modal-body [style*="grid-template-columns"] button,
    .modal-body [style*="grid-template-columns"] .btn,
    .modal [style*="grid-template-columns"] button,
    .modal [style*="grid-template-columns"] .btn {
        width: 100% !important;
        min-height: 40px !important;
    }

    /* Tabelas dentro de Modais/Popups */
    .modal-body table,
    .modal-body .data-table,
    .modal-body .table-container,
    .modal table,
    .os-modal-body table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Rodapé de Modais */
    .modal-footer,
    .os-modal-footer,
    .pm-footer {
        flex-shrink: 0 !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .modal-footer .btn,
    .os-modal-footer .btn,
    .modal-footer button,
    .os-modal-footer button {
        min-height: 44px !important;
        touch-action: manipulation !important;
    }

    /* 6. Menus Rápidos, Abas, Chips e Filtros (Zero Rolagem Lateral de Página, Swipe Horizontal Liso) */
    .tabs,
    .nav-tabs,
    .status-tabs,
    .filter-tabs,
    .tab-nav,
    .quick-filters,
    .category-pills,
    .tag-filters,
    .segmented-control,
    .pdv-categories,
    .pdv-categories.st-cats,
    #pdvCategories,
    .st-cats-fixed,
    .st-cats-list,
    .pdv-header-actions,
    .st-hero-actions,
    .ft-quick-tags,
    .module-quick-jump,
    .os-quick-chips,
    .pm-quick-bills,
    .card-tabs,
    .filter-chips,
    .stage-pills,
    .period-buttons-wrap,
    #pdvCustomerAddressesRow,
    #pdvDeliveryChipsContainer,
    .os-stage-tabs:not(.is-minimized) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        overscroll-behavior-x: contain !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 6px !important;
        padding-bottom: 3px !important;
    }

    .tabs::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar,
    .status-tabs::-webkit-scrollbar,
    .filter-tabs::-webkit-scrollbar,
    .pdv-categories::-webkit-scrollbar,
    .pdv-categories.st-cats::-webkit-scrollbar,
    #pdvCategories::-webkit-scrollbar,
    .pdv-header-actions::-webkit-scrollbar,
    .st-hero-actions::-webkit-scrollbar,
    .ft-quick-tags::-webkit-scrollbar,
    .module-quick-jump::-webkit-scrollbar,
    .os-quick-chips::-webkit-scrollbar,
    .pm-quick-bills::-webkit-scrollbar,
    #pdvCustomerAddressesRow::-webkit-scrollbar,
    #pdvDeliveryChipsContainer::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .st-cats-list {
        min-width: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .st-cats-more {
        display: none !important;
    }

    /* Itens de Menus Rápidos nunca quebram nem amassam */
    .cat-btn,
    .tab-btn,
    .filter-chip,
    .status-tab,
    .badge-filter,
    .st-hero-actions a,
    .ft-quick-tag,
    .ft-quick-label,
    .quick-jump-label,
    .module-quick-jump a,
    .os-quick-chips button,
    .pm-quick-btn,
    .period-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* Trava Absoluta contra Rolagem Lateral da Página Inteira */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        position: relative !important;
    }

    .app-layout,
    .main-content,
    .page-content,
    .content-area,
    .pdv-wrapper,
    .pdv-content,
    .pdv-left {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   AÇÕES DO CARD EM GRID 2 COLUNAS (Ordem de Serviço & Pedidos)
   ═══════════════════════════════════════════════════════════════════ */
.os-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding-top: 8px !important;
    padding-bottom: 3px !important;
    margin-top: 8px !important;
    border-top: 1px solid var(--border-color);
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    overflow: visible !important;
}
.os-card-actions:active,
.os-card-actions.is-dragging {
    cursor: default !important;
}
.os-card-actions::-webkit-scrollbar {
    display: none;
}
.os-card-actions .os-m-btn {
    width: 100% !important;
    min-height: 35px !important;
    height: 35px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
    padding: 0 8px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    touch-action: manipulation;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.os-card-actions .os-m-btn i {
    font-size: 13.5px !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    text-align: center !important;
    display: inline-block !important;
}
.os-card-actions .os-m-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent, #6366f1) 50%, var(--border-color));
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.os-card-actions .os-m-btn:active {
    transform: scale(0.96);
}
.os-card-actions .os-m-btn-wpp {
    background: rgba(37,211,102,0.12) !important;
    color: #16a34a !important;
    border-color: rgba(37,211,102,0.35) !important;
}
.os-card-actions .os-m-btn-wpp:hover {
    background: rgba(37,211,102,0.2) !important;
    border-color: #25d366 !important;
    box-shadow: 0 3px 10px rgba(37,211,102,0.25) !important;
}
.os-card-actions .os-m-btn-primary {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}
.os-card-actions .os-m-btn-primary:hover {
    background: color-mix(in srgb, var(--accent) 85%, #fff) !important;
    box-shadow: 0 3px 10px rgba(99,102,241,0.3) !important;
}
.os-card-actions .os-m-btn-success {
    background: rgba(16,185,129,0.15) !important;
    color: #10b981 !important;
    border-color: rgba(16,185,129,0.35) !important;
}
.os-card-actions .os-m-btn-success:hover {
    background: rgba(16,185,129,0.25) !important;
    border-color: #10b981 !important;
    box-shadow: 0 3px 10px rgba(16,185,129,0.25) !important;
}
.os-card-actions .os-m-btn-danger {
    color: #ef4444 !important;
    border-color: rgba(239,68,68,0.25) !important;
    background: rgba(239,68,68,0.08) !important;
}
.os-card-actions .os-m-btn-danger:hover {
    background: rgba(239,68,68,0.16) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 3px 10px rgba(239,68,68,0.25) !important;
}
.os-card-actions .os-m-btn-full,
.os-card-actions .os-m-btn:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/* FIM DO ARQUIVO mobile.css */