/* ========================================================================== GRIFFO Repanalytics — CAMADA MOBILE Carregar SEMPRE POR ÚLTIMO (depois de redesign.css e do CSS da tela). Media query não altera especificidade: o que faz esta camada vencer é a ordem de origem. Por isso o link precisa ser o último da . Breakpoints: <= 768px celular / tablet em retrato <= 480px celular em retrato (iPhone SE 375 · Android 360-412 · Max 430) <= 380px celular pequeno altura <= 520px + paisagem celular deitado Por que o corte por ALTURA na seção 7: deitado o celular passa dos 768px de largura (~780-950px), então a faixa de largura não o alcança e o layout caía nas regras de tablet. Altura é o que separa de verdade um telefone deitado (menos de ~520px) de um tablet em retrato (1000px ou mais). Índice: 0. Fundações sem breakpoint 1. <= 768px Fundações 2. <= 768px Por tela 3. <= 480px Fundações 4. <= 480px Por tela 5. <= 380px Ajustes finos 6. Login em retrato (faixa da marca + card) 7. Celular deitado 8. Combobox (a lista suspensa que o iPhone não desenha) ========================================================================== */ /* ========================================================================== 0. FUNDAÇÕES SEM BREAKPOINT ========================================================================== */ /* Impede que qualquer elemento largo (tabela, gráfico, banner) empurre a página inteira e crie scroll lateral — o vilão nº 1 de layout em celular. A rolagem horizontal fica contida no bloco que precisa dela (seção 1). `clip` em vez de `hidden`: `overflow-x: hidden` transforma o elemento em contêiner de rolagem e isso QUEBRA o `position: sticky` do .header (redesign.css). `clip` corta o transbordo sem criar contêiner de rolagem. A linha `hidden` fica antes como fallback para navegador sem suporte. */ html{ overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body{ overflow-x: hidden; overflow-x: clip; } /* Nada de mídia estourando a largura do container. `canvas` fica de fora de propósito: os gráficos já são dimensionados pelo container (altura fixa no card + canvas em height:100%) e mexer aqui atrapalharia o cálculo do Chart.js. */ img, svg, video, iframe{ max-width: 100%; } /* Trava o scroll do fundo enquanto a sidebar está aberta (classe posta pelo sidebar_standard.js). Sem isso o conteúdo rola atrás do menu no iOS. */ body.no-scroll{ overflow: hidden !important; position: fixed; width: 100%; } /* Altura do menu lateral. O standard_layout_style usa `min-height: 100vh`, e no celular 100vh é a altura da viewport COM A BARRA DE ENDEREÇO ESCONDIDA — maior que a área realmente visível. O painel ficava mais alto que a tela e o rodapé (Meu Perfil / Sair), ancorado no fim por `margin-top: auto`, caía fora. `dvh` é a altura visível de verdade. Como o scroll do fundo fica travado enquanto o menu está aberto, a barra do navegador não se mexe e o valor não oscila. No desktop 100dvh é igual a 100vh, então nada muda lá. */ .left-sidebar{ height: 100vh; height: 100dvh; min-height: 0 !important; max-height: 100dvh; overflow: hidden; } /* a navegação rola por dentro; o rodapé nunca encolhe */ .left-sidebar .nav-buttons{ flex: 1 1 auto; min-height: 0; overflow-y: auto; } .left-sidebar .sidebar-footer{ flex-shrink: 0; } /* A tabela é o único bloco que legitimamente passa da largura da tela. Esta regra NÃO pode ficar dentro de media query: `table thead th` tem `white-space: nowrap` em qualquer largura (redesign.css), então a tabela transborda bem antes do desktop — e o `overflow-x: clip` acima impede a página de rolar de lado. Sem um container rolável em toda largura, as colunas da direita ficam inalcançáveis (era o caso do celular deitado, entre 769px e 1024px, onde a camada mobile não chegava). Quando a tabela cabe, `overflow-x: auto` não faz nada. */ .admin-table-wrap, .abc-table-wrap, .sellout-panel, .dataTables_wrapper .row > div:has(> table), .main-content:has(> table), .main-content > form:has(> table), .main-content > div:has(> table){ overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* ========================================================================== 1. <= 768px — FUNDAÇÕES ========================================================================== */ @media screen and (max-width: 768px){ /* ---------- F3 · Header ---------- */ :root{ --header-h: 56px; } .header{ height: 56px !important; padding: 0 12px !important; padding-left: max(12px, env(safe-area-inset-left)) !important; padding-right: max(12px, env(safe-area-inset-right)) !important; gap: 10px !important; } .header-logo a img{ width: 34px !important; } .menu-hamburger{ width: 44px !important; height: 44px !important; margin-left: -6px; } /* ---------- F2 · Sidebar em tela cheia ---------- */ .left-sidebar{ max-width: 100% !important; width: 100% !important; padding-top: env(safe-area-inset-top) !important; padding-bottom: env(safe-area-inset-bottom) !important; box-shadow: none !important; border-right: 0 !important; } .sidebar-header{ padding: 16px 16px 14px !important; } .close-sidebar-button{ width: 44px !important; height: 44px !important; } .close-sidebar-button .icon-close-modal{ width: 15px !important; height: 15px !important; } /* alvos de toque confortáveis na navegação */ .sidebar-button{ min-height: 46px !important; align-items: center !important; } .sub-button{ min-height: 42px !important; } /* o overlay some: a sidebar já cobre a tela toda */ .sidebar-compliment-bg.sidebar-bg-active{ background-color: rgba(2,44,77,.75) !important; } /* ---------- F4 · Densidade do conteúdo ---------- */ .main-content, .main-content.dashboard-v2, .main-content.abc-page, .main-content.admin-page, .main-content:has(.database-info), .main-content:has(.filters-container), .main-content:has(#table_wrapper){ padding: 14px 12px 32px !important; padding-left: max(12px, env(safe-area-inset-left)) !important; padding-right: max(12px, env(safe-area-inset-right)) !important; gap: 14px !important; } /* ---------- F5 · Alvos de toque e zoom do iOS ---------- O iOS dá zoom automático ao focar campo com fonte < 16px. */ input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="search"], select, textarea{ font-size: 16px !important; min-height: 44px !important; } button, .btn, a.exclude, a.activate, a.deactivate{ min-height: 44px; } /* ---------- F6 · Tabelas ---------- Containers reais de tabela no sistema (`.page-lower` do CSS antigo NÃO existe no HTML — é regra morta e por isso não serve de gancho): .dataTables_wrapper .row > div order, produtos, clientes, fábricas, status de clientes, log de acessos .admin-table-wrap log de acessos .abc-table-wrap curva ABC .sellout-panel sell out (3 tabelas) .main-content > table detalhe do pedido (sem wrapper) .main-content > form > table edição de grupo (o `overflow-x: auto` desses containers está na seção 0, sem media query — ver o comentário lá sobre o celular deitado) */ /* A tabela passa a ter a largura do próprio conteúdo (as células estão em nowrap), com o container como piso. Assim não há nem coluna espremida nem largura mínima artificial obrigando a rolar mais do que o necessário. */ .main-content table{ width: max-content !important; min-width: 100% !important; /* redesign.css põe `overflow: hidden` na tabela para arredondar os cantos; isso a torna um contexto de recorte e ANULA o position: sticky das células. O arredondamento passa para o container. */ overflow: visible !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; } .admin-table-wrap, .abc-table-wrap{ border-radius: var(--r-md); overflow-x: auto !important; } /* tipografia densa: o padrão de 12-13px com 12px de padding ocupa muito espaço numa tela de 400px */ .main-content table th, .main-content table td{ white-space: nowrap; padding: 7px 9px !important; font-size: 11.5px !important; line-height: 1.25 !important; } .main-content table thead th{ font-size: 10px !important; letter-spacing: 0.03em !important; padding: 8px 9px !important; } /* Rede de segurança: se o scrollX do DataTables for reativado em alguma tela, o duplicado do corpo não pode virar uma faixa azul vazia (ver comentário em datatables_defaults.js). */ .dataTables_scrollBody thead th, .dataTables_scrollBody thead td{ padding: 0 !important; line-height: 0 !important; border: 0 !important; } /* Primeira coluna fixa: mantém a referência da linha durante a rolagem. A célula precisa de fundo opaco, senão o conteúdo rolando passa por baixo dela. Em vez de fixar uma cor (que perderia as listras, o hover e a linha selecionada), a célula herda o fundo da própria linha — assim acompanha .odd/.even/:hover/.selected automaticamente. */ .main-content table tbody tr{ background: var(--white); } .main-content table tbody td:first-child{ position: sticky; left: 0; z-index: 2; background: inherit !important; box-shadow: 1px 0 0 var(--gray-200); } /* o cabeçalho já tem fundo azul opaco vindo do redesign.css */ .main-content table thead th:first-child{ position: sticky; left: 0; z-index: 3; box-shadow: 1px 0 0 var(--griffo-blue-800); } /* toolbar do DataTables empilhada */ #table_wrapper > .row:first-child, .dataTables_wrapper > .row:first-child{ flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } #table_wrapper > .row:first-child > [class*="col-"], .dataTables_wrapper > .row:first-child > [class*="col-"]{ width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 8px !important; } /* "10 por página" numa linha só, sem virar um bloco alto */ .dataTables_length, #table_length{ width: 100% !important; } .dataTables_length label, #table_length label{ display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; font-size: 11.5px !important; } .dataTables_length select, #table_length select{ width: auto !important; min-width: 64px !important; height: 36px !important; min-height: 36px !important; } .dataTables_filter, #table_filter{ width: 100% !important; text-align: left !important; } .dataTables_filter label, #table_filter label{ width: 100% !important; display: flex !important; } .dataTables_filter input, #table_filter input{ width: 100% !important; min-width: 0 !important; margin-left: 0 !important; } /* PDF e Excel lado a lado: empilhados viravam dois blocos altos */ #createdButtonsContainer{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-left: 0 !important; width: 100% !important; } #createdButtonsContainer > button{ width: 100% !important; min-height: 38px !important; height: 38px !important; padding: 0 8px !important; font-size: 11.5px !important; justify-content: center !important; } .dataTables_filter input, #table_filter input{ height: 40px !important; min-height: 40px !important; } /* paginação e info: centralizadas e quebrando linha */ .dataTables_wrapper > .row:last-child{ flex-direction: column !important; gap: 6px !important; text-align: center !important; } .dataTables_info{ text-align: center !important; width: 100% !important; } .dataTables_paginate{ display: flex !important; justify-content: center !important; flex-wrap: wrap !important; width: 100% !important; } .dataTables_paginate .pagination{ flex-wrap: wrap !important; justify-content: center !important; } .dataTables_paginate .page-link{ min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* ---------- F7 · Gráficos ---------- O padrão do projeto é: o CARD tem altura explícita e o