/* ADS Premium — design system */ :root { /* TEMA PADRAO DO SISTEMA: Dasho (Phoenixcoded, Bootstrap 5) https://html.phoenixcoded.net/dasho/bootstrap/default/ Paleta oficial do template: primary #2196f3 (azul), success #4caf50, danger #f44336, warning #ff9800, info #00acc1, secondary #7e858e, dark #263238 (grafite azulado material). Bootstrap 5.3.8 vendorado em static/vendor/bootstrap e carregado antes deste arquivo no base.html -- este arquivo e a camada de tema Dasho por cima do Bootstrap. */ --bg: #f4f7fa; --bg-alt: #f8fafc; --surface: #ffffff; --surface-solid: #ffffff; --border: #e3e8ee; --border-strong: #cfd8dc; --brand: #2196f3; --brand-dark: #1976d2; --brand-soft: #e3f2fd; --brand-glow: rgba(33, 150, 243, 0.25); /* Neutro/secundario (botoes de cancelar e acoes de apoio). */ --neutral: #7e858e; --neutral-dark: #6c757d; --neutral-soft: #eceff1; /* Danger (excluir/sair/confirmacoes destrutivas). */ --danger: #f44336; --danger-dark: #d32f2f; --ink: #263238; /* Menu lateral: grafite escuro azulado (dark oficial do Dasho). */ --dark: #263238; --dark-alt: #2f3e46; --dark-soft: #455a64; /* Fundo do menu lateral, tokens PROPRIOS -- nao reaproveita --dark/--dark-alt de proposito (2026-08-11, "quero as cores do fundo da barra de menu lateral mais nitida mais viva, hj esta muito opaca e acinzentada"). --dark/--dark-alt tem saturacao baixa (~19-20%, cinza-azulado quase sem cor) e --dark e' usado em 11 outros lugares do sistema (tooltip, alguns badges) -- mudar o token global arriscaria descolorir esses tambem, sem necessidade. Os tokens novos sobem a saturacao pra ~58-62% (navy vivido na mesma familia de matiz do --brand) mantendo luminosidade parecida -- contraste contra o texto do menu (#e9ecef) medido e confirmado bem acima do minimo AA (10-13:1, era 9-11:1 antes). */ --sidebar-bg-alt: #183859; --sidebar-bg: #0f253e; --text: #37474f; --text-muted: #78909c; --text-faint: #b0bec5; --success-bg: #e8f5e9; --success-text: #2e7d32; --error-bg: #fdecea; --error-text: #c62828; --info-bg: #e0f7fa; --info-text: #00838f; --warning-bg: #fff3e0; --warning-text: #ef6c00; --radius-lg: 12px; --radius-md: 8px; --radius-sm: 6px; --shadow-sm: 0 1px 2px rgba(33, 37, 41, 0.06); --shadow-md: 0 4px 16px rgba(33, 37, 41, 0.07); --shadow-lg: 0 12px 32px rgba(33, 37, 41, 0.16); /* Tokens de movimento -- toda transicao/animacao do sistema usa essas curvas/duracoes pra manter o mesmo "sentimento" de movimento em todas as telas (consistencia de primeira qualidade). */ --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1); --dur-fast: 0.14s; --dur-base: 0.22s; --dur-slow: 0.38s; /* Altura padrao unica de controle (input/select/button) usada em todo o sistema -- qualquer input e qualquer botao devem ter exatamente essa altura sempre que estiverem lado a lado, pra nunca ficar um maior que o outro. Nao aplicada a textarea (altura variavel por design/rows). */ --field-h: 2.35rem; } /* Tema escuro (pedido do usuario, 2026-07-27: "se possivel tbm um dark theme, onde tema e idioma pode ser escolhido no header") -- ativado via [data-theme="dark"] no , alternado pelo botao no topbar (toggleTheme() em base.html) e persistido em localStorage (mesmo padrao ja usado pro menu lateral recolhido/expandido). Sobrescreve so os TOKENS (variaveis) -- nenhuma regra de componente precisa mudar, ja que o sistema inteiro usa var(--...) em vez de cor solta. */ :root[data-theme="dark"] { --bg: #121820; --bg-alt: #1a222c; --surface: #1e2733; --surface-solid: #1e2733; --border: #2c3947; --border-strong: #3a4a5a; --brand: #42a5f5; --brand-dark: #64b5f6; --brand-soft: rgba(66, 165, 245, 0.16); --brand-glow: rgba(66, 165, 245, 0.35); --neutral: #9aa5b1; --neutral-dark: #b0bec5; --neutral-soft: rgba(158, 167, 178, 0.16); --danger: #ef5350; --danger-dark: #ff8a80; --ink: #eceff1; --dark: #0d1117; --dark-alt: #161d24; --dark-soft: #26333f; /* Mesma logica do bloco claro acima -- navy vivido proprio do menu, so' um pouco mais escuro pra combinar com o resto do tema escuro. */ --sidebar-bg-alt: #11243b; --sidebar-bg: #091525; --text: #e3e8ee; --text-muted: #94a3b3; --text-faint: #64758a; --success-bg: rgba(76, 175, 80, 0.16); --success-text: #81c784; --error-bg: rgba(244, 67, 54, 0.16); --error-text: #ef9a9a; --info-bg: rgba(0, 172, 193, 0.16); --info-text: #4dd0e1; --warning-bg: rgba(255, 152, 0, 0.16); --warning-text: #ffb74d; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.55; } ::selection { background: var(--brand-soft); color: var(--brand-dark); } /* Scrollbar tematizada (WebKit) -- detalhe de acabamento premium. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(33, 37, 41, 0.18); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(33, 37, 41, 0.32); } /* Entrada suave dos blocos principais ao carregar a pagina -- movimento curto e discreto (nao atrapalha o uso), mesmo easing em tudo. */ @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Acessibilidade: quem prefere menos movimento nao ve nenhuma animacao. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif; color: var(--ink); letter-spacing: -0.01em; margin: 0 0 0.35rem; } h2 { font-size: 1.4rem; font-weight: 700; } h3 { font-size: 1.08rem; font-weight: 700; } h4 { font-size: 0.95rem; font-weight: 700; } p { color: var(--text-muted); margin: 0 0 0.6rem; } a { color: var(--brand); text-decoration: none; font-weight: 600; } a:hover { color: var(--brand-dark); } hr { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; } /* Buttons */ button, input, textarea, select { font: inherit; } /* Hierarquia de botoes estilo Bootstrap: - padrao (sem classe) = PRIMARIO verde solido (confirmar/acao principal) - .secondary-dark = NEUTRO cinza solido (cancelar/acoes de apoio) - .button-danger = DANGER vermelho solido (excluir/sair/destrutivo) Todos flat (sem gradiente), borda 1px na propria cor, mesmo raio e mesma altura --field-h. */ button, .button-link { border: 1px solid var(--brand); border-radius: var(--radius-sm); /* Altura padrao do sistema (--field-h) -- so padding horizontal aqui, a vertical fica por conta da altura fixa, garantindo que todo botao meca exatamente o mesmo que um input ao lado dele. */ height: var(--field-h); padding: 0 1.2rem; background: var(--brand); color: white; cursor: pointer; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: var(--shadow-sm); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } button:hover, .button-link:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: white; } button:active, .button-link:active { transform: scale(0.98); } button:focus-visible, .button-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-glow); } button.secondary { background: transparent; color: #eef3ee; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: none; } button.secondary:hover { background: rgba(255, 255, 255, 0.08); box-shadow: none; } /* Botao NEUTRO (cinza Bootstrap #6c757d) -- cancelar, fechar, acoes de apoio. O nome .secondary-dark e historico (era um botao escuro), mantido pra nao tocar em todos os templates. */ .secondary-dark { background: var(--neutral); border-color: var(--neutral); color: #fff; box-shadow: var(--shadow-sm); } .secondary-dark:hover { background: var(--neutral-dark); border-color: var(--neutral-dark); } .secondary-dark:focus-visible { box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.3); } .button-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.1rem; } /* Layout */ .layout { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; transition: grid-template-columns var(--dur-base) var(--ease-out); } .layout.no-sidebar { grid-template-columns: 1fr; } .sidebar { /* Fundo mais nitido/profissional (2026-08-10, pedido do usuario) -- os 2 halos radiais eram grandes e difusos (`transparent 45%`/`55%`, cobrindo quase o painel inteiro) e a diagonal em 200deg com stop em 68% misturava as 2 cores numa faixa larga, lendo como "borrado" em vez de definido. Halos agora concentrados/menores (leem como luz vinda de um canto, nao neblina cobrindo tudo) e a diagonal fica mais perto do vertical (165deg, mais "painel elevado" que "faixa diagonal"), com transicao mais curta (55% em vez de 68%) pra um corte mais definido entre os 2 tons. As orbs animadas (.sidebar-glow-1/2/3, ja existentes) continuam intactas por cima -- sao o toque "premium com movimento", isto aqui e' so a base parada por baixo delas. */ background: radial-gradient(circle at 100% 0%, rgba(33, 150, 243, 0.20), transparent 34%), radial-gradient(circle at 4% 100%, rgba(255, 255, 255, 0.05), transparent 30%), linear-gradient(165deg, var(--sidebar-bg-alt) 0%, var(--sidebar-bg) 55%); color: #e9ecef; padding: 1.75rem 1.35rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; transition: padding var(--dur-base) var(--ease-out); /* Separacao/profundidade da coluna de conteudo (2026-08-02) -- uma linha de 1px bem sutil na borda direita + uma sombra rasa jogada pra direita, em vez de nenhuma fronteira visivel entre o menu escuro e o conteudo. Somado (2026-08-10) um traco fino de luz no TOPO (`inset`, blur 0 -- nunca borrado) pra dar uma borda definida de "painel de vidro elevado" em vez do fundo se dissolver direto na topbar. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 1px 0 0 rgba(255, 255, 255, 0.05), 6px 0 24px rgba(0, 0, 0, 0.10); /* BUG REAL corrigido (2026-08-06, reportado pelo usuario): o menu suspenso (flyout do sidebar recolhido, `body.sidebar-collapsed .nav-group-items`, z-index:60) escapa da caixa do menu via `position:absolute; left:100%` pra sobrepor a coluna de conteudo -- mas SEM z-index proprio aqui, `.sidebar` (position:sticky, sem z-index) cai no balde de pintura "z-index:auto, ordem do documento" do CSS (spec CSS2.1 apendice E, camada 5). `.dash-chart-box` (os cards de grafico do Dashboard, mais abaixo no arquivo) e' `position:relative` -- SEM z-index tambem -- ou seja, cai NO MESMO balde, e por vir DEPOIS no HTML (dentro do `.content`, que fica depois do `.sidebar` no layout), pinta POR CIMA do sidebar inteiro, inclusive do que escapa dele (o z-index:60 do flyout so' vale DENTRO do proprio contexto de empilhamento do sidebar, nao contra um irmao de fora). A versao MOBILE do `.sidebar` (mais abaixo, dentro do media query) ja' tinha `z-index: 50` -- documentado la' como "acima da topbar (40), abaixo dos modais (60)" -- so' faltava aplicar o MESMO valor aqui, na regra padrao/desktop. */ z-index: 50; } /* Regiao ROLAVEL do menu (2026-08-16, "a altura esta ficando errada e cortada") -- envolve so' `