/* ============================================================ DASHBOARD OVERRIDES v2 - Layout fiel ao screenshot Adicionar APOS o CSS principal (ultimo link no ) ============================================================ */ /* 1. TELA PRINCIPAL: 3 linhas sem overflow */ .app-layout.is-financial-summary-route { --dashboard-summary-left-column: 360px; } .app-layout.is-financial-summary-route .dashboard-screen { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; min-height: 0; height: 100%; } /* 2. HERO GRID (Meta Ano + Faturamento): proporcao ajustada */ .app-layout.is-financial-summary-route .dashboard-hero-grid { grid-template-columns: var(--dashboard-summary-left-column) minmax(0, 1fr); gap: 10px; min-height: 0; align-items: stretch; } /* 3. ANALYSIS GRID: 4 colunas (coluna esquerda empilhada + 3 paineis) */ .app-layout.is-financial-summary-route .dashboard-analysis-grid { display: grid; grid-template-columns: var(--dashboard-summary-left-column) repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 10px; min-height: 0; align-items: stretch; overflow: hidden; } .app-layout.is-financial-summary-route .dashboard-analysis-stack { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 0; height: 100%; } /* 4. VELOCIMETRO: tamanho proporcional ao screenshot */ .app-layout.is-financial-summary-route .dashboard-goal-gauge { width: min(100%, 220px); height: 110px; } .app-layout.is-financial-summary-route .dashboard-goal-gauge-svg { height: 100%; } .app-layout.is-financial-summary-route .dashboard-goal-needle-shell { bottom: 24px; width: 3px; height: 46px; } .app-layout.is-financial-summary-route .dashboard-goal-cap { bottom: 19px; width: 14px; height: 14px; box-shadow: 0 0 0 4px #ffffff, 0 8px 20px rgba(23, 49, 78, 0.16); } .app-layout.is-financial-summary-route .dashboard-goal-center { inset: auto 0 8px; gap: 3px; } .app-layout.is-financial-summary-route .dashboard-goal-center strong { font-size: 1.05rem; } .app-layout.is-financial-summary-route .dashboard-goal-center small { font-size: 0.62rem; } .app-layout.is-financial-summary-route .dashboard-goal-scale { font-size: 0.62rem; padding: 0 12px; } .app-layout.is-financial-summary-route .dashboard-goal-stat { padding: 9px 11px; } .app-layout.is-financial-summary-route .dashboard-goal-stats--footer { grid-template-columns: 1fr; gap: 8px; } .app-layout.is-financial-summary-route .dashboard-goal-stat--inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .app-layout.is-financial-summary-route .dashboard-goal-stat--inline span, .app-layout.is-financial-summary-route .dashboard-goal-stat--inline strong { white-space: nowrap; line-height: 1.1; } .app-layout.is-financial-summary-route .dashboard-goal-stat--inline span { font-size: 0.76rem; letter-spacing: 0.04em; text-transform: none; } .app-layout.is-financial-summary-route .dashboard-goal-stat strong { font-size: 1rem; } /* 5. GRAFICO DE BARRAS: altura compativel com o espaco disponivel */ .app-layout.is-financial-summary-route .dashboard-monthly-bar-group { min-height: 90px; } .app-layout.is-financial-summary-route .executive-revenue-chart--timeline { display: block; flex: 0 0 auto; width: 100%; height: auto; min-height: 0; max-width: none; } .app-layout.is-financial-summary-route .executive-revenue-chart-shell--timeline { gap: 8px; height: auto; width: 100%; align-items: stretch; } .app-layout.is-financial-summary-route .executive-chart-legend--timeline { gap: 8px 14px; font-size: 0.74rem; } /* 6. PAINEIS GERAIS: sem min-height fixo, crescem pelo grid */ .app-layout.is-financial-summary-route .dashboard-panel { gap: 10px; min-height: 0; height: 100%; padding: 14px 16px; overflow: hidden; } .app-layout.is-financial-summary-route .dashboard-panel-head strong { font-size: 0.94rem; } .app-layout.is-financial-summary-route .dashboard-panel-head span { font-size: 0.76rem; } .app-layout.is-financial-summary-route .dashboard-panel-body { gap: 8px; min-height: 0; overflow: hidden; flex: 1 1 auto; } .app-layout.is-financial-summary-route .dashboard-panel--goal, .app-layout.is-financial-summary-route .dashboard-panel--monthly, .app-layout.is-financial-summary-route .dashboard-panel--bank, .app-layout.is-financial-summary-route .dashboard-panel--payment, .app-layout.is-financial-summary-route .dashboard-panel--category, .app-layout.is-financial-summary-route .dashboard-panel--subcategory, .app-layout.is-financial-summary-route .dashboard-panel--credit { min-height: 0; } .app-layout.is-financial-summary-route .dashboard-panel--monthly { padding-left: 4px; padding-right: 4px; } .app-layout.is-financial-summary-route .dashboard-panel--monthly .dashboard-panel-head { padding-left: 10px; padding-right: 10px; } .app-layout.is-financial-summary-route .dashboard-panel--monthly .dashboard-panel-body { padding-left: 0; padding-right: 0; align-items: stretch; } .app-layout.is-financial-summary-route .dashboard-goal-summary { gap: 14px; padding-left: 0; padding-right: 0; } .app-layout.is-financial-summary-route .dashboard-goal-row { gap: 10px; } .app-layout.is-financial-summary-route .dashboard-goal-copy { gap: 10px; } .app-layout.is-financial-summary-route .dashboard-goal-label { font-size: 0.94rem; flex: 1 1 auto; } .app-layout.is-financial-summary-route .dashboard-goal-value { font-size: 1.08rem; line-height: 1.05; } .app-layout.is-financial-summary-route .dashboard-goal-accent { font-size: 0.78rem; } .app-layout.is-financial-summary-route .dashboard-panel--bank, .app-layout.is-financial-summary-route .dashboard-panel--payment { width: 100%; } /* 7. BARRAS HORIZONTAIS (banco / forma de pagto): compactas */ .app-layout.is-financial-summary-route .dashboard-horizontal-track { height: 8px; } .app-layout.is-financial-summary-route .dashboard-horizontal-label { font-size: 0.72rem; } .app-layout.is-financial-summary-route .dashboard-horizontal-value { font-size: 0.72rem; } .app-layout.is-financial-summary-route .dashboard-horizontal-bars { gap: 7px; } /* 8. STATUS / BARRAS DE CATEGORIA: compactas */ .app-layout.is-financial-summary-route .executive-status-chart { gap: 7px; flex: 1 1 auto; align-content: start; } .app-layout.is-financial-summary-route .executive-status-row { gap: 5px; } .app-layout.is-financial-summary-route .executive-status-head strong { font-size: 0.8rem; line-height: 1.2; } .app-layout.is-financial-summary-route .executive-status-head span { font-size: 0.74rem; } .app-layout.is-financial-summary-route .executive-status-track { height: 10px; } /* 9. MINI BAR CHART (painel banco): altura compacta */ .app-layout.is-financial-summary-route .dashboard-mini-bar-chart { min-height: 0; max-height: 80px; width: 100%; height: 100%; } /* 10. DONUT / CARTAO DE CREDITO */ .app-layout.is-financial-summary-route .dashboard-donut-chart { width: 110px; height: 110px; } .app-layout.is-financial-summary-route .dashboard-donut-core strong { font-size: 0.84rem; } .app-layout.is-financial-summary-route .dashboard-donut-legend-item strong { font-size: 0.74rem; } .app-layout.is-financial-summary-route .dashboard-donut-legend-item span { font-size: 0.68rem; } /* 11. RESPONSIVO: em telas menores mantem scroll normal */ @media (max-width: 1280px) { .app-layout.is-financial-summary-route { --dashboard-summary-left-column: 320px; } .app-layout.is-financial-summary-route .dashboard-analysis-grid { grid-template-columns: var(--dashboard-summary-left-column) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; } .app-layout.is-financial-summary-route .dashboard-screen { grid-template-rows: auto auto auto; height: auto; overflow: visible; } } @media (max-width: 1080px) { .app-layout.is-financial-summary-route { --dashboard-summary-left-column: 100%; } .app-layout.is-financial-summary-route .dashboard-analysis-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .app-layout.is-financial-summary-route .dashboard-hero-grid { grid-template-columns: 1fr; } }