/* ═══════════════════════════════════════════════════════════════════ PROPOZI — CAMADA MOBILE · TOPO DO DASHBOARD ─────────────────────────────────────────────────────────────────── Cuida de tudo que fica ACIMA da lista: a trava de largura, indicadores, pastilhas de status, gráfico e "Precisa de ação". A lista de propostas em si está em mobile-lista.css. O que mudou (medido num celular de 393px): - Os 5 indicadores empilhados custavam ~1000px de rolagem. Viraram uma faixa que desliza: 86px. - O gráfico "Propostas por Mês" nasce fechado: 112px → 38px. - Os filtros eram 4 campos empilhados (190px). Agora são 2 linhas: 88px. - Da primeira proposta: 890px de rolagem → 686px. IMPORTANTE — por que tudo começa com #section-dashboard: o dashboard.js injeta o CSS dele direto no em tempo de execução, ou seja, DEPOIS deste arquivo. Empatou na especificidade, ganha o último. Usar o ID #section-dashboard garante que estas regras ganhem sem precisar espalhar !important. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* ═══ 0. A TRAVA DE LARGURA (leia isto antes de mexer) ════════════ O .dashboard-wrap é um grid que só declara LINHAS, sem colunas. Sem coluna declarada o navegador cria uma coluna "auto", e coluna auto cresce até caber o item mais largo — depois TODOS os cards esticam junto. Bastava o gráfico "Propostas por Mês" pedir 710px pra que os indicadores, o painel "Precisa de ação" e a lista de propostas virassem 710px também, e metade sumisse fora da tela. minmax(0, 1fr) diz "essa coluna nunca passa da largura da tela, não importa o que tenha dentro". É a trava mestra: qualquer bloco novo que alguém adicionar no dashboard já nasce contido. */ #section-dashboard .dashboard-wrap { grid-template-columns: minmax(0, 1fr); } #section-dashboard .dashboard-list-section, #section-dashboard .dashboard-chart-card { min-width: 0; } /* O gráfico era quem empurrava. As 6 colunas eram "1fr", que na verdade significa minmax(auto, 1fr) — o "auto" se recusa a ficar menor que o texto "R$ 159,9 mil". Com minmax(0, 1fr) elas encolhem de verdade. */ #section-dashboard .dashboard-chart-bars { grid-template-columns: repeat(6, minmax(0, 1fr)); } #section-dashboard .dashboard-chart-value { font-size: 8px; white-space: normal; text-align: center; line-height: 1.1; } /* ═══ 1. INDICADORES: FAIXA QUE DESLIZA ══════════════════════════ Cinco indicadores empilhados eram uma parede. Agora eles deslizam na horizontal, com um pedacinho do próximo aparecendo — que é o que avisa o usuário de que dá pra arrastar. */ /* O "min-width: 0" é o que faz a faixa deslizar em vez de crescer. Sem ele o flex ignora o overflow-x e estica até ~690px numa tela de 393px — era essa a origem do zoom out. */ #section-dashboard .dashboard-toolbar-top { min-width: 0; } #section-dashboard .dashboard-kpis-grid { display: flex; grid-template-columns: none; min-width: 0; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; /* sangra até a borda da tela, pra dar a sensação de "tem mais" */ margin: 0 -16px; padding: 0 16px 2px; } #section-dashboard .dashboard-kpis-grid::-webkit-scrollbar { display: none; } /* 47% = dois cartões inteiros na tela + uma fatia do terceiro aparecendo. É a fatia que avisa "dá pra arrastar" — com cartões maiores o segundo ficava cortado no meio e parecia bug. */ #section-dashboard .dashboard-kpi-card { flex: 0 0 47%; min-width: 0; min-height: 0; scroll-snap-align: start; padding: 11px 12px; border-radius: 14px; } #section-dashboard .dashboard-kpi-label { font-size: 9px; letter-spacing: 0.08em; } #section-dashboard .dashboard-kpi-value { font-size: 16px; margin: 2px 0 1px; letter-spacing: -0.02em; } /* O ícone decorativo do canto rouba largura do valor num cartão estreito — no celular ele sai. */ #section-dashboard .dashboard-kpi-icon { display: none; } /* A legenda de baixo vira uma linha só, cortada com "..." */ #section-dashboard .dashboard-kpi-foot { font-size: 10px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* O botão "Criar Nova" virou a aba "+ Nova" da barra de baixo. Some com ele: era ele que estourava a largura da tela. */ #section-dashboard .dashboard-create-btn { display: none; } #section-dashboard .dashboard-toolbar-card { padding: 14px; } /* NÃO troque este flex pra "column": a faixa de indicadores tem flex-basis de 760px, pensada como LARGURA. Em coluna essa base vira ALTURA e os cartões esticam 760px pra baixo. Os pontinhos vão fora deste bloco, direto no cartão da barra. */ #section-dashboard .dashboard-toolbar-top { gap: 12px; } /* ═══ 1b. "DÁ PRA ARRASTAR" ══════════════════════════════════════ Duas dicas visuais, porque cartão cortado sozinho pode passar por bug em vez de convite: 1) A faixa desbota na borda direita (máscara em degradê). Quando você chega no fim, a máscara some — sinal de "acabou". 2) Pontinhos embaixo, um por indicador, com o atual destacado. É o mesmo vocabulário de carrossel de foto que todo mundo já conhece de Instagram e galeria do celular. Os pontinhos são criados pelo js/mobile-dashboard.js. */ #section-dashboard .dashboard-kpis-grid { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%); mask-image: linear-gradient(to right, #000 82%, transparent 100%); transition: -webkit-mask-image 0.2s ease; } #section-dashboard .dashboard-kpis-grid.no-fim { -webkit-mask-image: none; mask-image: none; } .mob-kpi-pontos { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 1px 0 2px; } .mob-kpi-pontos span { width: 5px; height: 5px; border-radius: 999px; background: var(--muted); opacity: 0.3; transition: opacity 0.18s ease, width 0.18s ease, background 0.18s ease; } .mob-kpi-pontos span.is-active { width: 16px; opacity: 1; background: #7c4af8; } /* ═══ 2. FILTROS DE STATUS ═══════════════════════════════════════ Antes eles sumiam por trás da topbar, que tem fundo em degradê terminando em transparente. Com a topbar sólida e o z-index dela acima, os filtros voltam a ser legíveis. Aqui só ficam mais compactos e deslizam de ponta a ponta da tela. */ #section-dashboard .dashboard-summary-row { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; padding: 2px 16px 6px; margin: 0 -16px; } #section-dashboard .dashboard-summary-row::-webkit-scrollbar { display: none; } #section-dashboard .dashboard-summary-pill { flex: 0 0 auto; min-height: 34px; padding: 0 12px; font-size: 10px; } /* ═══ 3. GRÁFICO POR MÊS — FECHADO POR PADRÃO ════════════════════ No celular ele custa ~110px de rolagem e não é o motivo de você abrir o app: você abre pra ver quem precisa de cobrança e mexer nas propostas. Então ele nasce fechado, com o cabeçalho virando um botão. Abriu uma vez, fica aberto (o js/mobile-dashboard.js guarda a escolha no aparelho). */ #section-dashboard .dashboard-chart-card { padding: 12px 14px; } #section-dashboard .dashboard-chart-header { cursor: pointer; position: relative; padding-right: 22px; margin: 0; } /* Setinha desenhada em CSS, igual à das linhas de proposta */ #section-dashboard .dashboard-chart-header::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); opacity: 0.65; transform: rotate(45deg); transition: transform 0.18s ease; } body.mob-grafico-aberto #section-dashboard .dashboard-chart-header::after { transform: rotate(225deg); } /* Fechado é o padrão: só mostra as barras quando o body tem a classe */ #section-dashboard .dashboard-chart-bars { display: none; } body.mob-grafico-aberto #section-dashboard .dashboard-chart-bars { display: grid; height: 58px; gap: 3px; margin-top: 10px; } #section-dashboard .dashboard-chart-label, #section-dashboard .dashboard-chart-count { font-size: 8px; } /* ═══ 4. PAINEL "PRECISA DE AÇÃO" ════════════════════════════════ É a parte mais valiosa da tela: são propostas paradas esperando você cobrar. Fica no lugar, só encolhe e para de estourar. */ #section-dashboard .dashboard-action-panel { padding: 12px; max-width: 100%; } /* Cliente e projeto à esquerda ocupando duas linhas; dias parada e o botão Cobrar empilhados à direita. Antes eram três blocos um embaixo do outro — quase 100px por proposta. */ #section-dashboard .dashboard-action-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info dias" "info botao"; gap: 4px 10px; align-items: center; padding: 9px 11px; } #section-dashboard .dashboard-action-info { grid-area: info; min-width: 0; } #section-dashboard .dashboard-action-days { grid-area: dias; justify-self: end; font-size: 9px; padding: 3px 8px; } #section-dashboard .dashboard-action-buttons { grid-area: botao; justify-self: end; gap: 6px; } #section-dashboard .dashboard-action-btn { padding: 6px 11px; font-size: 11px; } #section-dashboard .dashboard-action-title { font-size: 12.5px; } #section-dashboard .dashboard-action-client { font-size: 12.5px; } #section-dashboard .dashboard-action-project { font-size: 11px; } #section-dashboard .dashboard-action-client, #section-dashboard .dashboard-action-project { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* ═══ 8. CABEÇALHOS DE TABELA E ESPAÇAMENTOS ═════════════════════ */ #section-dashboard .dashboard-grid-header { display: none; } #section-dashboard .dashboard-list { gap: 8px; } #section-dashboard .dashboard-list-shell { padding-right: 0; } /* ═══ 9. FILTROS EM DUAS LINHAS ══════════════════════════════════ Eram quatro campos empilhados: 190px de tela antes de chegar na primeira proposta. Agora: busca em cima, período e "limpar" lado a lado embaixo. O select "Todos os Status" some porque é exatamente o mesmo filtro das pastilhas logo abaixo (Todas / Ativas / Pendentes...) — os dois escrevem no mesmo dashboardState.status e o app já sincroniza um com o outro. Some o campo, não some a função. O !important no display não é preguiça: o dashboard.js injeta um grid de uma coluna só com !important pra esta mesma classe. Sem empatar, os três campos ficam empilhados de novo. */ #section-dashboard .dashboard-filters { display: flex !important; flex-wrap: wrap; gap: 8px; } /* base 100% = a busca sempre pega uma linha inteira pra ela */ #section-dashboard .dashboard-search-wrap { flex: 1 1 100%; } #section-dashboard #dashboard-filter-status { display: none; } #section-dashboard #dashboard-filter-period { flex: 1 1 0; min-width: 0; } #section-dashboard #dashboard-clear-filters { flex: 0 0 auto; white-space: nowrap; } /* Menos ar entre os blocos — no celular cada 10px conta */ #section-dashboard .dashboard-wrap { gap: 10px; } #section-dashboard .dashboard-list-section { gap: 8px; } }