/* ============================================================ GNZ — Padrão mobile compartilhado (body.is-mobile) Inclua este CSS nas páginas que adotam o padrão. Pareado com o script de viewport UA-detect no . ============================================================ */ body.is-mobile { overflow-x: hidden; } html.is-mobile { overflow-x: hidden; } /* ───── Safe-area + nav-bar bottom spacing ───── No iOS Safari / Chrome Android, a barra de URL/voltar cobre o fim da página. Adicionamos padding-bottom em todos os containers de scroll para garantir respiro até o último elemento. */ body.is-mobile .page-content, body.is-mobile .page-container, body.is-mobile .main-content, body.is-mobile .container, body.is-mobile .content-area, body.is-mobile .content-wrapper, body.is-mobile .main-wrapper { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; } /* Wrappers customizados por módulo */ body.is-mobile .bling-page, body.is-mobile .production-page, body.is-mobile .catalogo-page, body.is-mobile .fiscal-page, body.is-mobile .ml-page, body.is-mobile .cp-page, body.is-mobile .notifications-container { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; } /* ───── Containers de página padrão ───── */ body.is-mobile .page-content, body.is-mobile .page-container { padding: 14px !important; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box; overflow-x: hidden; max-width: 100vw; } body.is-mobile .main-content { overflow-x: hidden; } /* Containers inline-styled comuns (seller-dashboard, equipe-vendas-kpi) */ body.is-mobile main.main-content div[style*="padding: 24px"], body.is-mobile main.main-content div[style*="padding:24px"], body.is-mobile main.main-content div[style*="padding: 30px"], body.is-mobile main.main-content div[style*="padding:30px"] { padding: 14px !important; } body.is-mobile main.main-content > div[style*="display:flex"], body.is-mobile main.main-content > div[style*="display: flex"] { flex-wrap: wrap !important; } /* ───── Page header (cor accent / gradiente) compacto ───── */ body.is-mobile .page-header { padding: 14px 16px !important; border-radius: 14px !important; margin-bottom: 14px !important; min-height: 0 !important; gap: 12px !important; flex-wrap: wrap !important; align-items: flex-start !important; } body.is-mobile .page-header-icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; flex-shrink: 0 !important; } body.is-mobile .page-header-icon i { font-size: 18px !important; } body.is-mobile .page-header-info { flex: 1 1 calc(100% - 56px); min-width: 0; } body.is-mobile .page-header-info h1 { font-size: 17px !important; margin: 0 !important; } body.is-mobile .page-header-info p { font-size: 11px !important; line-height: 1.3 !important; } body.is-mobile .page-header > div:not(.page-header-icon):not(.page-header-info):not(.page-header-actions) { flex: 1 1 calc(100% - 56px); min-width: 0; } body.is-mobile .page-header > div:not(.page-header-icon):not(.page-header-info):not(.page-header-actions) h1 { font-size: 17px !important; margin: 0 !important; } body.is-mobile .page-header > div:not(.page-header-icon):not(.page-header-info):not(.page-header-actions) p { font-size: 11px !important; line-height: 1.3 !important; } /* Page header actions: quebra pra linha de baixo, ocupa 100%, botões em grid de 2 */ body.is-mobile .page-header-actions { width: 100% !important; margin-left: 0 !important; margin-top: 4px; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; flex-shrink: 1 !important; } body.is-mobile .page-header-actions > a, body.is-mobile .page-header-actions > button { padding: 8px 12px !important; font-size: 12px !important; flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; justify-content: center !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Grupos aninhados (ex: .campaign-buttons em seller-dashboard) também participam do wrap */ body.is-mobile .page-header-actions > div { display: flex !important; gap: 6px !important; flex: 1 1 100% !important; flex-wrap: wrap; } body.is-mobile .page-header-actions > div > button, body.is-mobile .page-header-actions > div > a { padding: 8px 12px !important; font-size: 12px !important; flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; justify-content: center !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ───── Global header (3-coluna) — limpo, sem cluttered icons ───── */ body.is-mobile .global-header { padding: 0 10px !important; } body.is-mobile .global-header-actions { gap: 10px !important; flex-wrap: nowrap !important; justify-content: flex-end; overflow: visible; } body.is-mobile .global-header-action-btn, body.is-mobile .global-header-notification { width: 30px !important; height: 30px !important; font-size: 14px !important; flex-shrink: 0; } body.is-mobile .global-header-actions a[href="/users.html"], body.is-mobile .global-header-actions a[href="/user-permissions.html"], body.is-mobile .global-header-actions a[href="/settings.html"], body.is-mobile .global-header-actions .gh-bling-import-btn, body.is-mobile .global-header-actions .gh-bday-wrapper, body.is-mobile .global-header-actions .gh-ticket-pending-btn, body.is-mobile .global-header-actions .global-header-action-btn.logout, body.is-mobile .global-header-actions .global-header-user-name, body.is-mobile .global-header-actions button[onclick*="openExportFeedsModal"], body.is-mobile .global-header-actions .gh-conn-status, body.is-mobile .global-header-actions .gh-bling-status { display: none !important; } body.is-mobile .global-header-user { padding: 0 !important; gap: 0 !important; } body.is-mobile .global-header-user-avatar { width: 32px !important; height: 32px !important; font-size: 13px !important; } body.is-mobile .global-header-nav { gap: 2px !important; } body.is-mobile .global-header-nav-btn { width: 28px !important; height: 28px !important; font-size: 13px !important; } /* ───── Mega menu "Mais módulos" — lista vertical full-width ───── */ body.is-mobile .mega-menu-bar { padding: 8px 12px !important; gap: 8px; } body.is-mobile .mmb-overflow-dropdown { /* Em vez de top calculado por JS, ancorar no topo do viewport (logo abaixo do header sticky) e ocupar até o rodapé */ top: 100px !important; bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; left: 8px !important; right: 8px !important; max-width: none !important; min-width: 0 !important; width: auto !important; max-height: none !important; /* removido: usa top+bottom no lugar */ height: auto !important; padding: 14px !important; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 16px !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } body.is-mobile .mmb-overflow-grid { grid-template-columns: 1fr !important; gap: 6px !important; } body.is-mobile .mmb-overflow-item { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; padding: 12px 14px !important; border-radius: 12px !important; text-align: left !important; width: 100% !important; } body.is-mobile .mmb-overflow-item .mmb-icon-circle { width: 42px !important; height: 42px !important; } body.is-mobile .mmb-overflow-item .mmb-icon-circle i { font-size: 18px !important; } body.is-mobile .mmb-overflow-item-label { font-size: 15px !important; font-weight: 600 !important; max-width: none !important; white-space: normal !important; text-align: left !important; color: var(--text-primary) !important; } body.is-mobile .mmb-dropdown.active { left: 8px !important; right: 8px !important; max-width: none !important; width: auto !important; max-height: calc(100vh - 200px - env(safe-area-inset-bottom, 0px)) !important; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* ───── CTA banner rodapé "Solicite suporte" ───── */ body.is-mobile .ticket-cta-banner { min-height: 38px; font-size: 12px; } body.is-mobile .ticket-cta-msg { font-size: 12px !important; gap: 6px !important; padding: 0 36px 0 10px; } body.is-mobile .ticket-cta-user-avatar { width: 22px !important; height: 22px !important; } body.is-mobile .ticket-cta-arrow { padding: 0 10px !important; font-size: 13px; } /* ───── Tabs genéricas (.tabs) — scroll horizontal com snap ───── */ body.is-mobile .tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; margin-bottom: 14px; gap: 6px; padding-bottom: 2px; } body.is-mobile .tabs::-webkit-scrollbar { display: none; } body.is-mobile .tab { flex: 0 0 auto; padding: 8px 14px !important; font-size: 12px !important; scroll-snap-align: start; white-space: nowrap; } /* ───── Grids genéricos ───── */ body.is-mobile .stats-grid-4, body.is-mobile .stats-grid-5, body.is-mobile .metrics-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* ───── Section titles ───── */ body.is-mobile .section { margin-bottom: 22px; } body.is-mobile .section-title { font-size: 15px !important; gap: 8px !important; } /* ───── View tabs (segmented) — scroll horizontal com snap ───── */ body.is-mobile .view-tabs { overflow-x: auto; flex-wrap: nowrap !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.is-mobile .view-tabs::-webkit-scrollbar { display: none; } body.is-mobile .view-tab { flex: 0 0 auto !important; padding: 8px 14px !important; font-size: 12px !important; scroll-snap-align: start; white-space: nowrap; } /* ───── Filters bar (filtros tipo .filters-bar) — selects ocupam linha cheia ───── */ body.is-mobile .filters-bar { padding: 12px !important; gap: 8px !important; border-radius: 12px !important; } body.is-mobile .filters-bar select, body.is-mobile .filters-bar input { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; width: 100%; padding: 8px 10px !important; font-size: 12px !important; } body.is-mobile .filters-bar input[type="text"] { flex: 1 1 100% !important; } /* ───── Stats bar (.stats-bar com .stat-card flex:1) ───── */ body.is-mobile .stats-bar { gap: 6px !important; } body.is-mobile .stats-bar .stat-card { flex: 1 1 calc(50% - 3px) !important; min-width: 0 !important; padding: 10px 12px !important; } body.is-mobile .stats-bar .stat-card .stat-value { font-size: 16px !important; } body.is-mobile .stats-bar .stat-card .stat-label { font-size: 10px !important; } body.is-mobile .stats-bar .stat-card .stat-icon { font-size: 16px !important; } /* ───── Tabelas com overflow horizontal interno ───── */ body.is-mobile .leads-table-wrap, body.is-mobile .table-wrap, body.is-mobile [class*="-table-wrap"] { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* ───── Bulk action bar ───── */ body.is-mobile .bulk-bar { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 12px !important; font-size: 12px !important; } body.is-mobile .bulk-bar select { padding: 6px 8px !important; font-size: 11px !important; } body.is-mobile .bulk-bar button { padding: 6px 10px !important; font-size: 11px !important; } /* ───── Modais genéricos: ajuste de largura/scroll ───── */ body.is-mobile .modal-dialog, body.is-mobile .modal-content { max-width: 95vw !important; width: 95vw !important; } /* ───── Containers comuns das páginas do CRM (produção, logística, etc) ───── */ body.is-mobile .envios-container, body.is-mobile .anomalias-container, body.is-mobile .etiquetas-container, body.is-mobile .events-container, body.is-mobile .content-area, body.is-mobile .imp-container, body.is-mobile .calc-container, body.is-mobile .ddm-container, body.is-mobile .av-container, body.is-mobile .tipos-container, body.is-mobile .producao-container, body.is-mobile .logistica-container, body.is-mobile .entregas-container, body.is-mobile .checklist-container, body.is-mobile .relatorio-container { padding: 14px !important; max-width: 100vw; box-sizing: border-box; overflow-x: hidden; } /* ───── Grids fixos com 4+ colunas → 2 colunas no mobile (inline-style) ───── */ body.is-mobile [style*="grid-template-columns:repeat(5"], body.is-mobile [style*="grid-template-columns: repeat(5"], body.is-mobile [style*="grid-template-columns:repeat(6"], body.is-mobile [style*="grid-template-columns: repeat(6"], body.is-mobile [style*="grid-template-columns:repeat(7"], body.is-mobile [style*="grid-template-columns: repeat(7"], body.is-mobile [style*="grid-template-columns:repeat(8"], body.is-mobile [style*="grid-template-columns: repeat(8"], body.is-mobile [style*="grid-template-columns:repeat(4"], body.is-mobile [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } /* Grids 3-col → 1-col em mobile estreito */ body.is-mobile [style*="grid-template-columns:1fr 1fr 1fr"], body.is-mobile [style*="grid-template-columns: 1fr 1fr 1fr"], body.is-mobile [style*="grid-template-columns:repeat(3"], body.is-mobile [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } /* CSS-class-based grids comuns */ body.is-mobile .stats-cards, body.is-mobile .anomalias-stats, body.is-mobile .summary-grid, body.is-mobile .stats-grid, body.is-mobile .propostas-summary, body.is-mobile .detail-stats, body.is-mobile .progress-steps { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } /* Form row 2-col → 1 col no mobile */ body.is-mobile .form-row, body.is-mobile .motivo-options, body.is-mobile .charts-grid { grid-template-columns: 1fr !important; gap: 12px !important; } /* KPI grid 4-col → 2 col no mobile */ body.is-mobile .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* Tops container (Top 5 Fornecedores / Clientes em /fiscal) → 1 col */ body.is-mobile .tops-container { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 14px !important; } body.is-mobile .top-box { padding: 14px !important; border-radius: 12px !important; } /* Grids de colaboradores/membros/contas (cards 320px) → 1 col */ body.is-mobile .colab-grid, body.is-mobile .members-grid, body.is-mobile .accounts-grid { grid-template-columns: 1fr !important; gap: 12px !important; } /* Cards genéricos com padding grande */ body.is-mobile .kpi-card, body.is-mobile .chart-card, body.is-mobile .section-card { padding: 14px !important; border-radius: 12px !important; } /* Grids inline com minmax >= 280px → 1 coluna no mobile (não estouram) */ body.is-mobile [style*="minmax(28"][style*="1fr)"], body.is-mobile [style*="minmax(29"][style*="1fr)"], body.is-mobile [style*="minmax(30"][style*="1fr)"], body.is-mobile [style*="minmax(31"][style*="1fr)"], body.is-mobile [style*="minmax(32"][style*="1fr)"], body.is-mobile [style*="minmax(33"][style*="1fr)"], body.is-mobile [style*="minmax(34"][style*="1fr)"], body.is-mobile [style*="minmax(35"][style*="1fr)"], body.is-mobile [style*="minmax(36"][style*="1fr)"], body.is-mobile [style*="minmax(37"][style*="1fr)"], body.is-mobile [style*="minmax(38"][style*="1fr)"], body.is-mobile [style*="minmax(39"][style*="1fr)"], body.is-mobile [style*="minmax(40"][style*="1fr)"], body.is-mobile [style*="minmax(41"][style*="1fr)"], body.is-mobile [style*="minmax(42"][style*="1fr)"], body.is-mobile [style*="minmax(43"][style*="1fr)"], body.is-mobile [style*="minmax(44"][style*="1fr)"], body.is-mobile [style*="minmax(45"][style*="1fr)"] { grid-template-columns: 1fr !important; } /* Grids class-based comuns com minmax grande (>280px) */ body.is-mobile .seller-grid, body.is-mobile .alarms-grid, body.is-mobile .cards-grid, body.is-mobile .types-grid, body.is-mobile .portfolio-grid { grid-template-columns: 1fr !important; gap: 12px !important; } /* ───── Tabelas longas: scroll horizontal interno (não estoura página) ───── */ body.is-mobile table.data-table, body.is-mobile table[class*="-table"] { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; white-space: nowrap; } body.is-mobile .rl-table-container, body.is-mobile .bling-orders-container, body.is-mobile .pagination-container { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Cards/painéis com padding interno grande — só os que sabidamente passam de 16px */ body.is-mobile .av-card, body.is-mobile .anomalia-card, body.is-mobile .envio-card, body.is-mobile .ddm-card { padding: 14px !important; border-radius: 12px !important; } /* ───── Filtros (.filters-row + .filter-group) — mais respiro entre campos ───── */ body.is-mobile .filters-row { grid-template-columns: 1fr !important; gap: 14px !important; margin-bottom: 16px !important; } body.is-mobile .filter-group { gap: 8px !important; min-width: 0; } body.is-mobile .filter-group label { font-size: 13px !important; margin-bottom: 2px; } body.is-mobile .filter-group input, body.is-mobile .filter-group select { padding: 10px 12px !important; font-size: 14px !important; width: 100%; box-sizing: border-box; } body.is-mobile .filter-group-search { grid-column: span 1 !important; } body.is-mobile .production-filters { padding: 14px !important; border-radius: 12px !important; margin-bottom: 16px !important; } body.is-mobile .filter-toggles { flex-wrap: wrap !important; gap: 8px !important; } /* ───── Grids específicos comuns em modules sociais/insights ───── Force 2-col (ou 1-col) em grids que costumam estar fixos em 3+ cols. */ body.is-mobile .video-grid, body.is-mobile .posts-grid, body.is-mobile .media-grid, body.is-mobile .insights-grid, body.is-mobile .demographics-grid, body.is-mobile .audience-grid, body.is-mobile .modal-metrics, body.is-mobile .metrics-grid, body.is-mobile .reports-grid, body.is-mobile .ads-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } /* Em telas muito estreitas (< 360px), force 1 coluna */ @media (max-width: 360px) { body.is-mobile .video-grid, body.is-mobile .posts-grid, body.is-mobile .media-grid { grid-template-columns: 1fr !important; } }