/* ============================================================================ * css/dark-overrides.css — Overrides do tema dark (EJ-5580) * * ESTRUTURA (D-15): arquivo único, organizado em duas camadas: * 1. GENÉRICOS (topo) — body, painéis, th, inputs etc. escopados a * [data-theme="dark"]. Populados nas ondas seguintes (Onda 1+). * 2. POR TELA (abaixo) — ajustes específicos em seções comentadas por módulo. * * REGRA DE OURO (Req-7, D-18): no light NADA muda. Tudo aqui vive sob * [data-theme="dark"]; o light permanece 100% idêntico ao estado anterior. * * GERADO PARCIALMENTE À MÃO: este arquivo é editado manualmente (não é o token * file). O token file (css/tokens/easyjur-tokens.css) é que é gerado e nunca * editado à mão. * ============================================================================ */ /* ---------------------------------------------------------------------------- * Gating de transição na troca de tema (EJ-5580) * Durante o toggle, theme-toggle.js adiciona [data-theme-switching] no por * ~1 frame. Enquanto existir, suprime TODAS as transitions (transition: none) → * o tema troca INSTANTÂNEO e uniforme, sem o efeito escalonado de cada componente * animar no próprio ritmo e sem custo de repaint em telas pesadas. Removido o * marcador, hover/estado voltam ao normal. Vale SÓ durante a troca de tema. * * 2 regras por especificidade: a 2ª (#app .rebranding) vence as transitions * !important do bundle do Design System (saas.min.css, escopado em #app .rebranding). * ---------------------------------------------------------------------------- */ html[data-theme-switching] *, html[data-theme-switching] *::before, html[data-theme-switching] *::after { transition: none !important; } /* O [data-theme] extra eleva a especificidade para (1,3,1), vencendo as transitions * !important do saas que incluem elemento (ex.: #app .rebranding input.form-control * = (1,2,1)), que empatavam e ganhavam por ordem de carga (saas carrega após este). */ html[data-theme-switching][data-theme] #app .rebranding *, html[data-theme-switching][data-theme] #app .rebranding *::before, html[data-theme-switching][data-theme] #app .rebranding *::after { transition: none !important; } /* ---------------------------------------------------------------------------- * Toggle de tema (botão sol/lua, D-10) — swap de ícone por tema * O botão segue o padrão dos botões-ícone da topbar (botao--transparente + * .icone icone--neutro-dark): bg/hover/cor/raio vêm 100% do padrão, sem hacks. * Aqui fica APENAS o swap sol↔lua, mirando os wrappers .icone-tema e usando o * display natural do .icone (inline-flex) p/ o visível e none p/ o oculto. * Light: mostra lua, esconde sol. Dark: mostra sol, esconde lua. * Vive em ambos os temas (não é override-só-dark) para definir o estado padrão. * Genérico (sem escopo de container) para cobrir botão interno (topbar) E * botão externo (login/cadastro — Onda 3). * ---------------------------------------------------------------------------- */ /* Interno (topbar) */ .cabecalho .cabecalho__toggle-tema .icone-tema--sol { display: none; } [data-theme="dark"] .cabecalho__toggle-tema .icone-tema--lua { display: none; } [data-theme="dark"] .cabecalho__toggle-tema .icone-tema--sol { display: inline-flex; } /* Externo (login/cadastro — Onda 3): botão [data-acao="toggle-tema"] fora do .cabecalho */ [data-acao="toggle-tema"] .icone-tema--sol { display: none; } [data-theme="dark"] [data-acao="toggle-tema"] .icone-tema--lua { display: none; } [data-theme="dark"] [data-acao="toggle-tema"] .icone-tema--sol { display: inline; } /* ---------------------------------------------------------------------------- * GENÉRICOS DARK — Onda 5a (legado) * Regras estruturais dark sem cor explícita no legado. Cobertura geral de * body, painéis, cabeçalhos de tabela e inputs para o sistema legado (sgr/). * Escopadas a [data-theme="dark"] — o light permanece 100% intacto. * ---------------------------------------------------------------------------- */ /* --- Fundo e texto base do legado ------------------------------------------ */ [data-theme="dark"] body, [data-theme="dark"] html { background-color: var(--ds-body-bg); /* #1A1A1A no dark */ color: var(--ds-body-color); /* #E9ECEF no dark */ } /* --- Painéis e containers genéricos ---------------------------------------- */ [data-theme="dark"] .panel, [data-theme="dark"] .panel-default, [data-theme="dark"] .panel-body { background-color: var(--ds-card-bg); border-color: var(--ds-palette-tint-gray-border); color: var(--ds-body-color); } [data-theme="dark"] .panel-heading, [data-theme="dark"] .panel-footer { background-color: var(--ds-palette-tint-gray-bg); border-color: var(--ds-palette-tint-gray-border); color: var(--ds-body-color); } /* --- Cabeçalhos de tabela legado ------------------------------------------- */ [data-theme="dark"] table, [data-theme="dark"] table th, [data-theme="dark"] table td { border-color: var(--ds-palette-tint-gray-border); } [data-theme="dark"] table th { background-color: var(--ds-palette-tint-gray-bg); color: var(--ds-body-color); } [data-theme="dark"] table tr:nth-child(even), [data-theme="dark"] .zebra tr:nth-child(even) { background-color: var(--ds-palette-tint-gray-bg); } /* --- Inputs genéricos do legado -------------------------------------------- */ [data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--ds-input-bg); color: var(--ds-body-color); /* border completo (style+width+color): inputs nativos sem classe herdam o * border-style "inset" do browser, que vira bisel preto no topo/esquerda no * dark. Forçar "solid" uniformiza. Sem !important: inputs que definem o * próprio border (ex.: borderless) permanecem intocados. */ border: 1px solid var(--ds-palette-tint-gray-border); } /* --- input[type=number]: spinner nativo no tema escuro (global) -------------- * Por padrão o Chrome desenha a setinha (::-webkit-inner-spin-button) com fundo * claro e setas escuras — destoa no dark. color-scheme:dark faz o navegador * renderizar o controle nativo já escuro (fundo escuro + setas claras), sem * filtros/hacks. Vale para todo input numérico do sistema. */ [data-theme="dark"] input[type="number"] { color-scheme: dark; } /* --- Inputs genéricos do legado — NORMALIZAÇÃO DE BORDA NO TEMA CLARO --------- * Contraparte light da regra dark acima. A normalização de borda (inset→solid) * tinha sido feita SÓ no dark; no claro os inputs/selects/textarea nativos * mantinham o `border: 2px inset` do browser (bisel grosso e irregular — uns * mais grossos que outros). Espelhamos a MESMA regra no light, mesma * especificidade (0,2,1) e mesma lista :not, para uniformizar os DOIS temas. * O token tint-gray-border resolve para a cor clara (#D3DBDE) no light. Só * BORDA aqui — bg/cor do claro permanecem nativos (input branco, texto preto). * Sem !important: inputs com borda própria (form-control, borderless) intocados. */ [data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), [data-theme="light"] select, [data-theme="light"] textarea { border: 1px solid var(--ds-palette-tint-gray-border); } /* --- Links genéricos -------------------------------------------------------- */ [data-theme="dark"] a:not(.btn) { color: var(--ds-link); } /* --- Contêiner principal do SGR (conteúdo da página) ----------------------- */ [data-theme="dark"] #page, [data-theme="dark"] .page-content, [data-theme="dark"] .content-wrapper { background-color: var(--ds-body-bg); color: var(--ds-body-color); } /* ---------------------------------------------------------------------------- * AJUSTES POR TELA — placeholder * Seções por módulo (ex.: /* === Listagem de processos === */) entram abaixo * conforme cada onda vertical for tokenizada. * ---------------------------------------------------------------------------- */ /* ============================================================================ * Onda 2 — Listagem de processos (JANELA_processos + CONFIG_JANELA_processos) * * Resíduos genéricos do legado que não foram tokenizados pelo codemod: * cores fixas em sgr/assets/components/modal/index.css (janela__content, * header, menu, li) e sgr/assets/components/janelaItern.css (inputs). * REGRA DE OURO: apenas dark aqui — o light permanece 100% intacto (D-18). * Não inclui cores dinâmicas com tbody > tr:nth-of-type(odd) > * { background-color: var(--ds-card-bg); color: var(--ds-emphasis-color); } /* Variante .table-light (cabeçalhos/linhas claras de tabela) -------------------- * .table-light fixa --bs-table-bg/-color CLAROS. Em tabelas Bootstrap o fundo é * pintado nas CÉLULAS (th/td) via var(--bs-table-bg), não no — por isso * remapear só .bg-white/.bg-light no não resolve (as células cobrem). Aqui * remapeamos as custom properties --bs-table-* da variante para tokens dark, que * cascateiam para as células (abordagem nativa do Bootstrap). Vale para .table-light * aplicada em , , , ou célula. */ .rebrand [data-bs-theme="dark"] .table-light:not([data-theme-fixed]) { --bs-table-color: var(--ds-emphasis-color); --bs-table-bg: var(--ds-palette-tint-gray-bg); --bs-table-border-color: var(--ds-palette-tint-gray-border); --bs-table-striped-color: var(--ds-emphasis-color); --bs-table-striped-bg: var(--ds-card-bg); --bs-table-active-color: var(--ds-emphasis-color); --bs-table-active-bg: var(--ds-card-bg); --bs-table-hover-color: var(--ds-emphasis-color); --bs-table-hover-bg: var(--ds-card-bg); } /* --- Navegação (nav/tabs) -------------------------------------------------- */ .rebrand [data-bs-theme="dark"] .nav-tabs { border-color: var(--ds-palette-tint-gray-border); } .rebrand [data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--ds-text-muted); } .rebrand [data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--ds-palette-tint-gray-bg); border-color: var(--ds-palette-tint-gray-border); color: var(--ds-emphasis-color); } /* --- Dropdowns ------------------------------------------------------------- */ .rebrand [data-bs-theme="dark"] .dropdown-menu { background-color: var(--ds-card-bg); border-color: var(--ds-palette-tint-gray-border); } .rebrand [data-bs-theme="dark"] .dropdown-item { color: var(--ds-emphasis-color); } .rebrand [data-bs-theme="dark"] .dropdown-item:hover, .rebrand [data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--ds-palette-tint-gray-bg); color: var(--ds-emphasis-color); } /* --- Badges e alertas ----------------------------------------------------- */ .rebrand [data-bs-theme="dark"] .badge.bg-light { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color) !important; } /* --- Utilitários de cor ABSOLUTA do Bootstrap (generalista) ---------------- * Bootstrap define .bg-white/.bg-light/.text-dark/.text-black/.border-* com * valores fixos (#fff, #000) e !important. O seletor [data-bs-theme="dark"] * NÃO remapeia esses valores absolutos, então qualquer área marcada com * .bg-white (ex.: cards da dashboard) permanece branca no dark e a troca de * tema "não flui". Aqui remapeamos os utilitários CLAROS para tokens dark de * forma generalista, cobrindo todo .rebrand e cenários semelhantes. * * !important é necessário para vencer o !important nativo dos utilitários BS. * * ESCAPE HATCH (opt-out): adicione o atributo [data-theme-fixed] ao elemento * para preservar a cor clara original — ex.: fundo branco de logo de marca, * selo/credencial com cor institucional fixa, área que deve ignorar o dark. *
...
* --------------------------------------------------------------------------- */ /* Superfícies claras -> superfície dark */ .rebrand [data-bs-theme="dark"] .bg-white:not([data-theme-fixed]) { background-color: var(--ds-card-bg) !important; color: var(--ds-emphasis-color); } .rebrand [data-bs-theme="dark"] .bg-light:not([data-theme-fixed]) { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color); } /* Texto escuro/preto -> texto de ênfase (claro) */ .rebrand [data-bs-theme="dark"] .text-dark:not([data-theme-fixed]), .rebrand [data-bs-theme="dark"] .text-black:not([data-theme-fixed]) { color: var(--ds-emphasis-color) !important; } /* Bordas claras -> borda dark */ .rebrand [data-bs-theme="dark"] .border-white:not([data-theme-fixed]), .rebrand [data-bs-theme="dark"] .border-light:not([data-theme-fixed]) { border-color: var(--ds-palette-tint-gray-border) !important; } /* --- Modals Bootstrap 5 --------------------------------------------------- */ .rebrand [data-bs-theme="dark"] .modal-content { background-color: var(--ds-palette-tint-gray-bg); border-color: var(--ds-palette-tint-gray-border); color: var(--ds-emphasis-color); } .rebrand [data-bs-theme="dark"] .modal-header, .rebrand [data-bs-theme="dark"] .modal-footer { border-color: var(--ds-palette-tint-gray-border); } /* --- Formulários: form-control e form-select ------------------------------- */ .rebrand [data-bs-theme="dark"] .form-control, .rebrand [data-bs-theme="dark"] .form-select { background-color: var(--ds-palette-tint-gray-bg); color: var(--ds-emphasis-color); border-color: var(--ds-palette-tint-gray-border); } .rebrand [data-bs-theme="dark"] .form-control:focus, .rebrand [data-bs-theme="dark"] .form-select:focus { background-color: var(--ds-palette-tint-gray-bg); color: var(--ds-emphasis-color); border-color: var(--ds-link); box-shadow: 0 0 0 0.2rem rgb(var(--ds-link-rgb, 74 179 224) / 0.25); } /* --- Tom Select (selects ricos do rebrand) -------------------------------- * Lib de terceiros (tom-select 2.4.3) usada nos selects do rebrand (ex.: "Tipo * de Evento", "Responsável", "Grupo/Subgrupo" do filtro de widgets). Tem fundos * CLAROS fixos e não responde a [data-bs-theme]. O control e o dropdown renderizam * IN-PLACE dentro do .rebrand (confirmado), então o escopo dark alcança. * !important para vencer a especificidade da lib. */ .rebrand [data-bs-theme="dark"] .ts-control, .rebrand [data-bs-theme="dark"] .ts-dropdown { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color) !important; border-color: var(--ds-palette-tint-gray-border) !important; } .rebrand [data-bs-theme="dark"] .ts-control input, .rebrand [data-bs-theme="dark"] .ts-control .item { color: var(--ds-emphasis-color) !important; } /* itens selecionados (tags, ex.: "Minhas Agendas") */ .rebrand [data-bs-theme="dark"] .ts-control .item { background-color: var(--ds-card-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; } .rebrand [data-bs-theme="dark"] .ts-placeholder, .rebrand [data-bs-theme="dark"] .ts-control input::placeholder { color: var(--ds-text-muted) !important; } /* lista de opções (dropdown) */ .rebrand [data-bs-theme="dark"] .ts-dropdown, .rebrand [data-bs-theme="dark"] .ts-dropdown .ts-dropdown-content { background-color: var(--ds-card-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; } .rebrand [data-bs-theme="dark"] .ts-dropdown .option { color: var(--ds-emphasis-color) !important; background-color: transparent !important; } .rebrand [data-bs-theme="dark"] .ts-dropdown .option.active, .rebrand [data-bs-theme="dark"] .ts-dropdown .option:hover, .rebrand [data-bs-theme="dark"] .ts-dropdown .active { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color) !important; } .rebrand [data-bs-theme="dark"] .ts-dropdown .optgroup-header { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-text-muted) !important; } /* Tom Select — escopo LEGADO ([data-theme="dark"] no ). Páginas fora do * .rebrand (ex.: banco.php → "Contas Bancárias"/"Tipo") usam normalize-tom-select, * mas o dropdown (.ts-dropdown, anexado ao ) não é alcançado pelo escopo * .rebrand acima → abria BRANCO no dark. Estes seletores [data-theme] cobrem o * painel em qualquer lugar (control já fica dark pela regra de input legado). */ [data-theme="dark"] .ts-dropdown, [data-theme="dark"] .ts-dropdown .ts-dropdown-content { background-color: var(--ds-card-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; } [data-theme="dark"] .ts-dropdown .option { color: var(--ds-emphasis-color) !important; background-color: transparent !important; } [data-theme="dark"] .ts-dropdown .option.active, [data-theme="dark"] .ts-dropdown .option:hover, [data-theme="dark"] .ts-dropdown .active { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color) !important; } [data-theme="dark"] .ts-dropdown .optgroup-header { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-gray-350, #909294) !important; } /* Control do TomSelect no legado (espelha o .rebrand [data-bs-theme] acima). * Sem isso, em páginas legado o control fica com fundo claro por baixo do * wrapper escuro → aspecto de "select dentro do outro". */ [data-theme="dark"] .ts-control { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color) !important; border-color: var(--ds-palette-tint-gray-border) !important; } [data-theme="dark"] .ts-control input, [data-theme="dark"] .ts-control .item { color: var(--ds-emphasis-color) !important; } [data-theme="dark"] .ts-control .item { background-color: var(--ds-card-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; } /* Wrapper .ts-wrapper.form-select no legado pegava bg #212529 (azulado) + caret * escuro do Bootstrap, enquanto o .ts-control interno é #2A2A2A → "dois tons / um * dentro do outro". Uniformiza o wrapper com o control (#2A2A2A) e troca o caret * por SVG branco (no legado o BS não aplica o caret dark automático). */ [data-theme="dark"] .ts-wrapper.form-select { background-color: var(--ds-palette-tint-gray-bg) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; } /* --- Botão de status de usuário (.user-status-icon, lista de usuários) --------- * Ícone do botão habilitar/desabilitar fica sobre bg vermelho/verde → deve ser * SEMPRE branco. Em alguns renders o color veio como var(--ds-card-bg) (#242424 * escuro no dark) e o ícone sumia. Força branco no dark. */ [data-theme="dark"] .user-status-icon { color: #FFFFFF !important; } /* --- Botão "Simular Captura" (aba Simulador de Captura, Gerenciar Escritório) - * É um sem .btn → a regra genérica `a:not(.btn){color:var(--ds-link)}` pinta * o texto de azul, igual ao fundo azul do botão → texto some. Restaura branco. */ [data-theme="dark"] a.botao_simular-captura, [data-theme="dark"] a.botao_simular-captura:hover { color: #FFFFFF !important; } /* --- Autofill do Chrome no dark ----------------------------------------------- * Campos preenchidos pelo autofill (ex.: REPITA O EMAIL / NOVA SENHA ao abrir * +Novo em usuários) ganham fundo claro do navegador no dark. O truque do * box-shadow inset força a superfície escura e mantém o texto claro. Global. */ [data-theme="dark"] input:-webkit-autofill, [data-theme="dark"] input:-webkit-autofill:hover, [data-theme="dark"] input:-webkit-autofill:focus, [data-theme="dark"] input:-webkit-autofill:active { -webkit-text-fill-color: var(--ds-body-color) !important; -webkit-box-shadow: 0 0 0 1000px var(--ds-input-bg, #2A2A2A) inset !important; caret-color: var(--ds-body-color) !important; /* Mata o flash branco ao abrir: o input herda transition 0.3s e o Chrome * anima o background-color do autofill nesse intervalo. O delay gigante * impede que essa animação de cor chegue a ser exibida. */ transition: background-color 600000s 0s, color 600000s 0s !important; } /* ---------------------------------------------------------------------------- * Exclusão de logos — telas externas (01-CONTEXT.md) * Logos de marca não são invertidas no dark. A regra filter:none com !important * previne que qualquer regra genérica de inversão (ex.: invert(1) em img) afete * os logotipos das telas externas (login, cadastro, recuperar_senha, etc.). * ---------------------------------------------------------------------------- */ [data-theme="dark"] .easy_logo { filter: none !important; } [data-theme="dark"] .navbar-brand img { filter: none !important; } /* ---------------------------------------------------------------------------- * Logo EasyJur no dark (topbar interna + telas externas) * A logo padrão (vermelho+preto) tem o texto preto, ilegível no fundo escuro. * No dark trocamos pela versão de texto branco via content:url() — swap só no * render, sem tocar o tema light. Padronizada com o par interno do sistema. * * .easy_logo--ej marca APENAS as logos EasyJur das telas externas (login, * cadastro, etc.). Telas/contexto JurisAI NÃO recebem essa classe, então a logo * JurisAI permanece intocada nos dois temas (jurisai-safe). * ---------------------------------------------------------------------------- */ [data-theme="dark"] .cabecalho__logo-easyjur:not(.cabecalho__logo-os) img, [data-theme="dark"] .easy_logo--ej { content: url("/sgr/assets/rebranding/imagens/logos/EasyJur_vermelho_branca.png"); } /* EJ-5732: a logo nova "EASYJUR | OS" tem seu próprio swap SVG light↔dark * (regra no fim deste arquivo), por isso é excluída do content:url() acima. */ /* ---------------------------------------------------------------------------- * EJ-5580 (pós-Phase 1): logos pretas em features internas e modais * * Retornos #193/#196/#214/#231/#237/#238/#245 — logos com texto preto ficam * ilegíveis no dark. Mesmo mecanismo de swap via content:url() das logos acima: * só troca o pixel no render, sem tocar o tema light e sem editar os JS/PHP que * injetam as imagens. As versões brancas vivem ao lado das originais. * ---------------------------------------------------------------------------- */ /* Swap por src (não por classe): cobre todas as ocorrências da mesma imagem — * inclusive badges/headers que reusam o arquivo sem a classe do componente. */ /* #193 — Juris.AI (tela principal: ícone cérebro + "JurisAI") */ [data-theme="dark"] img[src*="chat/assets/Logo_JuisAI.png"] { content: url("/sgr/advogados/scripts/chat/assets/Logo_JurisAI_branca.png"); } /* #237 — SmartDocs (tela principal: ícone doc + "SmartDocs") */ [data-theme="dark"] img[src*="smartdocs/assets/Logo_Smartdocs.png"] { content: url("/sgr/advogados/scripts/smartdocs/assets/Logo_Smartdocs_branca.png"); } /* #214 — JurisAI Copilot (badge no header do modal da agenda + header do sidecar) */ [data-theme="dark"] img[src*="jurisai/assets/JurisAI Copilot logo.png"] { content: url("/sgr/advogados/scripts/jurisai/assets/JurisAI_Copilot_logo_branca.png"); } /* #196/#231/#238/#245 — logo EASYJUR injetada em modais ($.alert / overlays). * A imagem é inserida inline com src="./protecao/logo_easyjur.png" em dezenas de * arquivos; este único swap cobre todos os modais (atuais e futuros) de uma vez. */ [data-theme="dark"] img[src*="protecao/logo_easyjur.png"] { content: url("/sgr/assets/rebranding/imagens/logos/EasyJur_vermelho_branca.png"); } /* ---------------------------------------------------------------------------- * EJ-5580 (pós-Phase 1): widgets da dashboard com fundo de tabela azulado * * Os widgets que usam
(processos por advogado/área, * tarefas concluídas) herdam o --bs-table-bg padrão dark do Bootstrap (#212529), * que é um cinza AZULADO e destoa do card neutro (#242424). O widget de projetos * consultivos monta as linhas com
(sem .table), por isso fica neutro. * * Padronizamos: dentro do #dashboard, as células da tabela ficam transparentes * e deixam o fundo neutro do card aparecer — igual ao projetos_consultivos. * Escopo restrito ao #dashboard (grid-stack) para não afetar outras tabelas. * ---------------------------------------------------------------------------- */ [data-theme="dark"] #dashboard .table, [data-theme="dark"] #dashboard .table > :not(caption) > * > * { --bs-table-bg: transparent; background-color: transparent; } /* ---------------------------------------------------------------------------- * EJ-5580 (pós-Phase 1): hierarquia de cores no dark (topbar x body) * * No dark, topbar (#2A2A2A) e body (#1A1A1A) ficam próximos demais e a separação * não é clara. Em vez de mexer nos tokens do DS (fora de escopo agora), damos uma * hairline na base da topbar. Usamos box-shadow (não border) para NÃO alterar a * altura travada da topbar (65.25px) — box-shadow não ocupa layout. * * Precisa de !important E de especificidade (0,3,0): a topbar tem a sombra do * `.rebrand .shadow` do Bootstrap com !important (0,2,0); sem superar isso a linha * não aparece. Por isso o seletor usa as duas classes da topbar (.cabecalho.navbar). * ---------------------------------------------------------------------------- */ [data-theme="dark"] .cabecalho.navbar { box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.16), 0 4px 12px rgba(0, 0, 0, 0.30) !important; } /* ---------------------------------------------------------------------------- * EJ-5580 (pós-Phase 1): contraste no dashboard clássico (dark) * * Botões "Filtrar" (.btnFilterCard / .btnFilterCardContrato) e o toggle de * ocultar valores do Financeiro (.hide-show) usam --ds-custom-2 (azul-marinho * #151546) na borda/texto/ícone — invisível sobre o card escuro. O hover já * fica branco, por isso só aparecia ao passar o mouse. * * No dark: borda/texto/ícone em cor clara legível no repouso. !important porque * o JS desses widgets também seta a cor inline (.css('color', ...)). * O hover (fundo --ds-custom-2 + texto branco) continua intacto. * ---------------------------------------------------------------------------- */ [data-theme="dark"] .btnFilterCard, [data-theme="dark"] .btnFilterCardContrato { border-color: rgba(255, 255, 255, 0.35) !important; } [data-theme="dark"] .btnFilterCard:not(:hover) .spanBtnFilter, [data-theme="dark"] .btnFilterCard:not(:hover) .iconBtnFilter, [data-theme="dark"] .btnFilterCardContrato:not(:hover) .spanBtnFilterContrato, [data-theme="dark"] .btnFilterCardContrato:not(:hover) .iconBtnFilterContrato { color: var(--ds-body-color, #e9ecef) !important; } [data-theme="dark"] .hide-show, [data-theme="dark"] .hide-show .fa-eye, [data-theme="dark"] .hide-show .fa-eye-slash { color: var(--ds-body-color, #e9ecef) !important; } /* Legendas dos gráficos (Google Charts) — o texto da legenda é SVG , ilegível no dark. Os rótulos de fatia (%) são fill="#ffffff" * e NÃO são atingidos por este seletor. */ [data-theme="dark"] .box svg text[fill="#222222"] { fill: var(--ds-body-color, #e9ecef) !important; } /* Bar charts Material (google.charts.Bar) — esse engine IGNORA a opção * backgroundColor (ao contrário do corechart/PieChart), e pinta um * de fundo no plot, deixando o gráfico branco no dark. * Zera o fundo branco para o card escuro aparecer (mesmo visual dos PieCharts). * Escopo: containers div#barchart* (todos os Material charts começam com * "barchart"). A paleta de barras é colorida — não há barra branca — então só * os retângulos de fundo são afetados. O texto já vem claro via textStyle * injetado no draw (dark-only). EJ-5580. */ [data-theme="dark"] div[id^="barchart"] svg rect[fill="#ffffff"], [data-theme="dark"] div[id^="barchart"] svg rect[fill="#FFFFFF"] { fill: transparent !important; } /* Painéis abertos pelos botões de filtro (Agenda/Contratos) — labels e bordas * usam --ds-custom-2 (azul-marinho), invisíveis sobre o card escuro. O hover * (fundo navy + texto branco) continua intacto. */ [data-theme="dark"] .listFilterCardSpan, [data-theme="dark"] .listAgendaSpan, [data-theme="dark"] .listEventoSpan, [data-theme="dark"] .listDataSpan { color: var(--ds-body-color, #e9ecef) !important; } [data-theme="dark"] .listFilterCard, [data-theme="dark"] .listFilterCardContrato, [data-theme="dark"] .listAgenda, [data-theme="dark"] .listEvento, [data-theme="dark"] .listData { border-color: rgba(255, 255, 255, 0.25) !important; } [data-theme="dark"] .listFilterCard .listFilterCardLi, [data-theme="dark"] .listFilterCardContrato .listFilterCardLi, [data-theme="dark"] .listAgenda .listAgendaLi, [data-theme="dark"] .listEvento .listEventoLi, [data-theme="dark"] .listData .listDataLi { border-bottom-color: rgba(255, 255, 255, 0.12) !important; } /* ============================================================================ * Flatpickr — calendário popup (date/monthSelect) * * O calendário do flatpickr é anexado ao (FORA do .rebrand), então o * escopo .rebrand [data-bs-theme="dark"] NÃO o alcança. Escopamos pelo atributo * [data-theme="dark"] do (ancestral do body) — mesmo mecanismo das * exclusões de logo acima. Dark-only: nada afeta o light. * ============================================================================ */ /* Input do flatpickr (readonly) — o tema força `background-color:#fff !important` * em `.flatpickr-input[readonly]` (0,3,0) e em `input[readonly][type="text"] * .form-control.input` (0,4,1). Como tem !important, .form-control não vence. * Cobrimos com especificidade maior + !important. */ [data-theme="dark"] input.flatpickr-input[readonly], [data-theme="dark"] input[readonly][type="text"].form-control.input { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color) !important; } [data-theme="dark"] input.flatpickr-input::placeholder { color: var(--ds-text-muted) !important; } [data-theme="dark"] .flatpickr-calendar { background-color: var(--ds-card-bg) !important; color: var(--ds-emphasis-color) !important; border: 1px solid var(--ds-palette-tint-gray-border) !important; box-shadow: 0 3px 13px rgba(0, 0, 0, 0.4) !important; } /* Containers internos: o tema seta background:#fff no innerContainer/rContainer. * Sem isso, sobra um retângulo branco dentro do calendário escuro (era o único * elemento branco remanescente em ordem natural de cascata). */ [data-theme="dark"] .flatpickr-innerContainer, [data-theme="dark"] .flatpickr-rContainer { background-color: var(--ds-card-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; } /* Ponteiro (triângulo) do calendário */ [data-theme="dark"] .flatpickr-calendar.arrowTop:before, [data-theme="dark"] .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--ds-card-bg) !important; } [data-theme="dark"] .flatpickr-calendar.arrowBottom:before, [data-theme="dark"] .flatpickr-calendar.arrowBottom:after { border-top-color: var(--ds-card-bg) !important; } /* Cabeçalho: meses, mês/ano atual, dropdown de mês */ [data-theme="dark"] .flatpickr-months, [data-theme="dark"] .flatpickr-month, [data-theme="dark"] .flatpickr-current-month, [data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { background-color: var(--ds-card-bg) !important; color: var(--ds-emphasis-color) !important; fill: var(--ds-emphasis-color) !important; } [data-theme="dark"] .flatpickr-current-month input.cur-year, [data-theme="dark"] .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background-color: var(--ds-card-bg) !important; color: var(--ds-emphasis-color) !important; } /* Setas de navegação */ [data-theme="dark"] .flatpickr-prev-month svg, [data-theme="dark"] .flatpickr-next-month svg { fill: var(--ds-emphasis-color) !important; } [data-theme="dark"] .flatpickr-prev-month:hover svg, [data-theme="dark"] .flatpickr-next-month:hover svg { fill: var(--ds-link) !important; } /* Dias da semana */ [data-theme="dark"] .flatpickr-weekdays, [data-theme="dark"] span.flatpickr-weekday { background-color: var(--ds-card-bg) !important; color: var(--ds-text-muted) !important; } /* Dias */ [data-theme="dark"] .flatpickr-days, [data-theme="dark"] .dayContainer { background-color: var(--ds-card-bg) !important; } [data-theme="dark"] .flatpickr-day { color: var(--ds-emphasis-color) !important; background: transparent !important; border-color: transparent !important; } [data-theme="dark"] .flatpickr-day.prevMonthDay, [data-theme="dark"] .flatpickr-day.nextMonthDay, [data-theme="dark"] .flatpickr-day.flatpickr-disabled, [data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover { color: var(--ds-text-muted) !important; } [data-theme="dark"] .flatpickr-day:hover, [data-theme="dark"] .flatpickr-day.today:hover { background: var(--ds-palette-tint-gray-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; } [data-theme="dark"] .flatpickr-day.today { border-color: var(--ds-link) !important; } [data-theme="dark"] .flatpickr-day.selected, [data-theme="dark"] .flatpickr-day.selected:hover, [data-theme="dark"] .flatpickr-day.startRange, [data-theme="dark"] .flatpickr-day.endRange, [data-theme="dark"] .flatpickr-day.inRange { background: var(--ds-link) !important; border-color: var(--ds-link) !important; color: #fff !important; } /* Plugin monthSelect ("Selecione o mês e ano") * Prefixo .flatpickr-calendar eleva a especificidade (0,3,0) para vencer * `.flatpickr-monthSelect-theme-light .flatpickr-monthSelect-month` (0,2,0) do * plugin, que carrega depois e empatava no !important. */ [data-theme="dark"] .flatpickr-calendar .flatpickr-monthSelect-month { color: var(--ds-emphasis-color) !important; background: transparent !important; } [data-theme="dark"] .flatpickr-calendar .flatpickr-monthSelect-month:hover, [data-theme="dark"] .flatpickr-calendar .flatpickr-monthSelect-month:focus { background: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color) !important; } [data-theme="dark"] .flatpickr-calendar .flatpickr-monthSelect-month.selected { background: var(--ds-link) !important; color: #fff !important; } [data-theme="dark"] .flatpickr-calendar .flatpickr-monthSelect-month.flatpickr-disabled { color: var(--ds-text-muted) !important; } /* ============================================================================ * Hover do chrome no dark — topbar + sidebar * * Causa raiz: botões-ícone da topbar (.btn.botao--transparente) e itens da * sidebar (.barra-lateral__link / __sublink) usam var(--bs-light) como bg de * hover. O [data-bs-theme="dark"] do Bootstrap NÃO remapeia --bs-light, então * o hover renderiza CLARO (cinza-claro, fallback #acbac2/#a8b6be) sobre o chrome * escuro. Alinhamos ao hover do .dropdown-item ("Minha conta"), que já usa a * superfície dark var(--ds-palette-tint-gray-bg) + texto var(--ds-emphasis-color). * * Genérico por família: cobre TODOS os .botao--transparente (toggle de tema, * relógio/histórico, "+", sino) e todos os links/sublinks da barra lateral, em * qualquer tela — não é ajuste pontual de uma tela. * ============================================================================ */ /* Topbar — remapeia a paleta --bs-btn-* de hover/active da variante transparente * (jeito nativo do Bootstrap; vence o defining rule por especificidade 0,4,0). */ .rebrand [data-bs-theme="dark"] .btn.botao--transparente { --bs-btn-hover-bg: var(--ds-palette-tint-gray-bg); --bs-btn-hover-color: var(--ds-emphasis-color); --bs-btn-active-bg: var(--ds-palette-tint-gray-bg); --bs-btn-active-border-color: var(--ds-palette-tint-gray-border); } /* Topbar — variante "superfície": hover usa --bs-light e active fixa white. */ .rebrand [data-bs-theme="dark"] .btn.botao--superficie { --bs-btn-hover-bg: var(--ds-palette-tint-gray-bg); --bs-btn-active-bg: var(--ds-palette-tint-gray-bg); } /* Sidebar — links e sublinks: bg de hover claro -> superfície dark + texto claro */ [data-theme="dark"] .barra-lateral__link:hover, [data-theme="dark"] .barra-lateral__sublink:hover { background-color: var(--ds-palette-tint-gray-bg); color: var(--ds-emphasis-color); } /* Sidebar mobile — header com bg estático claro (var(--bs-light)) -> superfície dark */ [data-theme="dark"] .barra-lateral__menu-mobile-header { background-color: var(--ds-palette-tint-gray-bg); } /* ---------------------------------------------------------------------------- * Botão "addon" de input (.boxInput--withBtn) — quadradinho azul ao lado do * campo (Cliente, Contrário, Juiz, Timesheet etc.), usado em modais de TODOS os * módulos. É um SEM .btn, com fundo var(--ds-link) e ícone branco. A regra * genérica [data-theme="dark"] a:not(.btn) { color: var(--ds-link) } recolore * esse para azul (vence o color:#fff por especificidade) -> ícone azul sobre * fundo azul, invisível. Restauramos o branco com especificidade maior (0,3,2/3), * sem !important. O ícone ( fa) herda a cor do . * ---------------------------------------------------------------------------- */ [data-theme="dark"] .boxInput--withBtn div a, [data-theme="dark"] .boxInput--withBtn div a i { color: #FFFFFF; } /* ============================================================================ * select2 — selects ricos (lib global, usada em modais e filtros de TODOS os * módulos). Há cópias tokenizadas (sgr/css/select2.min.css) e NÃO tokenizadas * (lib/select2/4.0.8|4.1.0) com #fff/#aaa/black hardcoded — por isso o controle * fica branco no dark e aparece a borda preta de foco. O dropdown é anexado ao * , então escopamos por [data-theme="dark"] do (alcança controle * in-place E dropdown). !important para vencer a especificidade/ordem da lib. * Cobre .rebrand, legado e externas de uma vez. * ============================================================================ */ /* Controle (single + multiple) */ [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-container--default .select2-selection--multiple, [data-theme="dark"] .select2-container--classic .select2-selection--single { background-color: var(--ds-input-bg) !important; background-image: none !important; border-color: var(--ds-palette-tint-gray-border) !important; color: var(--ds-emphasis-color) !important; } /* Texto selecionado + placeholder */ [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, [data-theme="dark"] .select2-container--classic .select2-selection--single .select2-selection__rendered { color: var(--ds-emphasis-color) !important; } [data-theme="dark"] .select2-selection__placeholder { color: var(--ds-gray-500) !important; } /* Seta (triângulo) */ [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--ds-gray-500) !important; } [data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: var(--ds-gray-500) !important; border-top-color: transparent !important; } /* Borda preta de foco (hardcoded na lib) -> borda padrão temada */ [data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple, [data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--ds-link) !important; outline: 0 !important; } /* Tags (multiple) */ [data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--ds-card-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; color: var(--ds-emphasis-color) !important; } /* Estado desabilitado */ [data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single, [data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: var(--ds-palette-tint-gray-bg) !important; } /* Dropdown (anexado ao body) */ [data-theme="dark"] .select2-dropdown { background-color: var(--ds-card-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; } /* Campo de busca dentro do dropdown */ [data-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: var(--ds-input-bg) !important; color: var(--ds-emphasis-color) !important; border-color: var(--ds-palette-tint-gray-border) !important; } /* Opções */ [data-theme="dark"] .select2-container--default .select2-results__option { color: var(--ds-emphasis-color) !important; background-color: transparent !important; } [data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--ds-palette-tint-gray-bg) !important; } [data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--ds-link) !important; color: #FFFFFF !important; } [data-theme="dark"] .select2-container--default .select2-results__option[aria-disabled=true] { color: var(--ds-gray-500) !important; } /* ============================================================================ * jQuery-Confirm (jConfirm) — alerts / confirmações / loaders globais * * Lib (lib/jquery-confirm/) usada em TODO o sistema para alert/confirm/loader * (ex.: "Essa ação é irreversível", "Carregando lista..."). Renderiza no tema * jconfirm-white/-light com cores hardcoded (white) e é anexada ao , FORA * do .rebrand. Escopamos por [data-theme="dark"] do (ancestral) — mesmo * mecanismo do flatpickr. !important para vencer especificidade/ordem de carga * da lib. Cores SEMÂNTICAS dos botões (btn-blue/red/green/orange) e a borda-tipo * (jconfirm-type-*) são mantidas de propósito. * ============================================================================ */ /* Caixa + sombra */ [data-theme="dark"] .jconfirm .jconfirm-box { background-color: var(--ds-card-bg) !important; color: var(--ds-body-color) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important; } /* Título, conteúdo e X de fechar (opacity nativa .6 deixa o X discreto) */ [data-theme="dark"] .jconfirm .jconfirm-box div.jconfirm-title-c, [data-theme="dark"] .jconfirm .jconfirm-box .jconfirm-title, [data-theme="dark"] .jconfirm .jconfirm-box div.jconfirm-content-pane, [data-theme="dark"] .jconfirm .jconfirm-box div.jconfirm-content, [data-theme="dark"] .jconfirm .jconfirm-box div.jconfirm-closeIcon { color: var(--ds-emphasis-color) !important; } /* Loader: overlay branco (.loading:before) -> superfície dark; spinner -> link */ [data-theme="dark"] .jconfirm .jconfirm-box.loading:before { background: var(--ds-card-bg) !important; } [data-theme="dark"] .jconfirm .jconfirm-box.loading:after { border-bottom-color: var(--ds-link) !important; } /* Botão neutro claro -> superfície dark + texto claro. * btn-default = botão padrão da lib; btn--medium = classe de botão do APP usada * em alguns alerts (ex.: "Sua sessão foi encerrada" na tela de login). Sem isso, * o btn--medium fica com texto #212529 e bg transparente -> invisível sobre a * caixa dark (parecia "alerta sem botão"). */ [data-theme="dark"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default, [data-theme="dark"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn--medium { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color) !important; } [data-theme="dark"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover, [data-theme="dark"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn--medium:hover { background-color: var(--ds-palette-tint-gray-border) !important; color: var(--ds-emphasis-color) !important; } /* ============================================================================ * CORREÇÕES PÓS-PHASE 1 — Retornos QA 11/06/2026 * (.planning/quick/20260611-ej-5580-correcoes-dark-pos-phase1/) * Cada bloco referencia o nº do retorno. Tudo dark-only — light intacto. * ============================================================================ */ /* --- #241 Toastr: ícone fantasma atrás do ícone ----------------------------- * base.css remove o background-image PNG do toastr (ícone branco) e desenha o * ícone via :before (FontAwesome). Quando toastr.min.css carrega DEPOIS do * base.css, o background-image:url(...)!important da lib (1,1,1) reaplica o PNG * branco — invisível no fundo claro do light, mas visível no fundo escuro do * dark ("ícone atrás do ícone"). Especificidade (1,2,1) vence em qualquer ordem. */ [data-theme="dark"] #toast-container > div { background-image: none !important; } /* ════════════════════════════════════════════════════════════════════════════ * Highcharts (dashboards) — contraste no dark (global, todos os widgets) * Cores de labels/grid são hardcoded no JS dos widgets (#374151, #6b7280, #e5e7eb) * — escuras/brancas demais sobre o card escuro. Sobrescreve via SVG/HTML do * Highcharts. Dark-only; light intacto. Cobre PESSOAS POR TIPO, STATUS DOS * PROJETOS, CONTRATOS POR STATUS, FLUXO DE CAIXA, PROVISIONAMENTO, etc. * ════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .highcharts-axis-labels text, [data-theme="dark"] .highcharts-axis-title, [data-theme="dark"] .highcharts-legend-item text { fill: #cbd5e1 !important; } [data-theme="dark"] .highcharts-data-label text, [data-theme="dark"] .highcharts-data-label text tspan { fill: #e9ecef !important; stroke: none !important; } [data-theme="dark"] .highcharts-data-label, [data-theme="dark"] .highcharts-data-label span, [data-theme="dark"] .highcharts-data-label b { color: #e9ecef !important; } [data-theme="dark"] .highcharts-grid-line { stroke: rgba(255, 255, 255, 0.10) !important; } /* Toasts padronizados no dark: cada tipo (base.css) define seu próprio * background-color tintado — no dark o token de sucesso (--ds-palette-tint-green-bg) * resolve para verde saturado, destoando do erro (que fica na superfície escura). * Padroniza todos na superfície neutra (--ds-card-bg), mantendo só a borda-esquerda * + ícone coloridos como diferenciador. Dark-only; light segue com os tints. */ [data-theme="dark"] #toast-container > .toast-success, [data-theme="dark"] #toast-container > .toast-error, [data-theme="dark"] #toast-container > .toast-info, [data-theme="dark"] #toast-container > .toast-warning { background-color: var(--ds-card-bg) !important; } /* --- #226 / #181 Tippy.js: tooltip branco com texto branco ------------------- * O tema "tooltip-padrao-preto" (base.css) usa background var(--ds-emphasis-color) * + color #FFF. No dark o token emphasis vira #FFFFFF -> fundo branco + texto * branco (ilegível). Usado nas abas bloqueadas dos modais de cadastro (processos, * pessoas, receitas...) e em vários hints do sistema — correção global. * No dark: superfície escura elevada + borda para destacar do fundo da página. */ [data-theme="dark"] .tippy-box[data-theme="tooltip-padrao-preto"] .tippy-content { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color) !important; border: 1px solid var(--ds-palette-tint-gray-border); } [data-theme="dark"] .tippy-box[data-theme="tooltip-padrao-preto"] .tippy-arrow { color: var(--ds-palette-tint-gray-bg) !important; } /* Tema tippy "easyJur" (hints do Gerenciar Pop-up e afins): bg usa * rgb(var(--ds-emphasis-color-rgb)/0.7) → branco no dark (emphasis-rgb=255 255 255). * No dark: superfície escura elevada + texto/seta claros. */ [data-theme="dark"] .tippy-box[data-theme~="easyJur"] { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color) !important; border: 1px solid var(--ds-palette-tint-gray-border); } [data-theme="dark"] .tippy-box[data-theme~="easyJur"] .tippy-arrow { color: var(--ds-palette-tint-gray-bg) !important; } /* --- #218 Paginação invisível (todas as listagens legado) -------------------- * .table-footer__pagination li a tem color:#FFF sobre bg var(--ds-link), mas a * regra genérica [data-theme="dark"] a:not(.btn) (0,2,1) vence (0,1,2) e pinta * o número de azul sobre fundo azul. Restauramos o branco com (0,2,2). Mesma * família do fix .boxInput--withBtn. */ [data-theme="dark"] .table-footer__pagination li a { color: #FFFFFF; } [data-theme="dark"] .table-footer__pagination li a.current_page { background-color: transparent; color: var(--ds-emphasis-color); border-color: var(--ds-palette-tint-gray-border); } /* --- #218 (cont.) Demais sistemas de paginação do legado --------------------- * Auditoria de cobertura: o sistema acima (.table-footer__pagination) é o do * print, mas há 3 outros sistemas independentes que sofrem o mesmo problema. * Cobertos aqui para não restar buraco em nenhuma listagem. * * (a) .pag_list (base.css) — BI, Financeiro Esc., Andamentos. Links herdam * azul da regra genérica a:not(.btn); .current_page usa cinza+borda. */ [data-theme="dark"] .pag_list a:link, [data-theme="dark"] .pag_list a:visited, [data-theme="dark"] .pag_list a:active { color: var(--ds-body-color); } [data-theme="dark"] .pag_list a:hover { color: var(--ds-link); } [data-theme="dark"] .pag_list .current_page:link, [data-theme="dark"] .pag_list .current_page:visited, [data-theme="dark"] .pag_list .current_page:active, [data-theme="dark"] .pag_list .current_page span span { color: var(--ds-emphasis-color) !important; border-color: var(--ds-palette-tint-gray-border); } /* (b) .pagLegal (Legal Design) — classe só de tipografia; o herda azul. * a.pagLegal (0,2,1) empata com a:not(.btn) e vence por ordem de carga. */ [data-theme="dark"] a.pagLegal { color: var(--ds-body-color); } [data-theme="dark"] a.pagLegal.current_page { color: var(--ds-emphasis-color); } /* (c) DataTables .paginate_button (lib 1.10.12) — GED, Publicações, Analytics. * A lib fixa color:#333!important (texto escuro some no dark) e a página * .current fica com fundo BRANCO. Remapeamos para superfície/realce dark. * !important vence o !important da lib; especificidade (0,3,1) vence o * defining rule .dataTables_wrapper .dataTables_paginate .current (0,3,0). */ /* Seletor sem o ancestral .dataTables_paginate: em algumas telas (ex.: biblioteca) * os .paginate_button ficam fora desse wrapper, então a regra com ancestral não * pegava e os números ficavam #333 (ilegíveis). .paginate_button é classe * exclusiva do DataTables — seguro mirar direto. Mantidas TAMBÉM as regras com * ancestral abaixo (especificidade 0,3,1 vence a lib nas telas que o usam). */ /* Especificidade (0,4,0) com .dataTables_wrapper p/ vencer a regra da lib * `.dataTables_wrapper .dataTables_paginate .paginate_button { color:#333 !important }` * (0,3,0) — empate de !important é decidido por especificidade. */ [data-theme="dark"] .paginate_button, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--ds-emphasis-color) !important; background: transparent !important; border-color: var(--ds-palette-tint-gray-border) !important; } [data-theme="dark"] .paginate_button:hover, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: var(--ds-emphasis-color) !important; background: var(--ds-palette-tint-gray-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; } [data-theme="dark"] .paginate_button.current, [data-theme="dark"] .paginate_button.current:hover, [data-theme="dark"] .dataTables_paginate .paginate_button.current, [data-theme="dark"] .dataTables_paginate .paginate_button.current:hover { color: #FFFFFF !important; background: var(--ds-link) !important; border-color: var(--ds-link) !important; } [data-theme="dark"] .paginate_button.disabled, [data-theme="dark"] .paginate_button.disabled:hover, [data-theme="dark"] .dataTables_paginate .paginate_button.disabled, [data-theme="dark"] .dataTables_paginate .paginate_button.disabled:hover { color: var(--ds-palette-tint-gray-text) !important; background: transparent; } /* --- #221 DataTables (GED e demais listagens com a lib) ---------------------- * lib/datatables/1.10.12 hardcoda linhas brancas (#fff/#f9f9f9/#fafafa) e textos * #333 no wrapper (info/filtro/paginação) — linhas brancas com texto claro e * rodapé "Visualizando..." escuro sobre escuro no dark. */ [data-theme="dark"] table.dataTable tbody tr { background-color: var(--ds-card-bg); } [data-theme="dark"] table.dataTable.stripe tbody tr.odd, [data-theme="dark"] table.dataTable.display tbody tr.odd { background-color: var(--ds-palette-tint-gray-bg); } [data-theme="dark"] table.dataTable.hover tbody tr:hover, [data-theme="dark"] table.dataTable.display tbody tr:hover { background-color: var(--ds-palette-tint-gray-bg); } /* células das colunas ordenadas (sorting_1/2/3) — fundo claro próprio */ [data-theme="dark"] table.dataTable.display tbody tr > .sorting_1, [data-theme="dark"] table.dataTable.display tbody tr > .sorting_2, [data-theme="dark"] table.dataTable.display tbody tr > .sorting_3, [data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_1, [data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_2, [data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_3 { background-color: var(--ds-card-bg); } [data-theme="dark"] .dataTables_wrapper .dataTables_length, [data-theme="dark"] .dataTables_wrapper .dataTables_filter, [data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_processing, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--ds-body-color); } [data-theme="dark"] table.dataTable td.dataTables_empty { background-color: var(--ds-card-bg); color: var(--ds-text-muted); } /* --- #219 jQuery UI Autocomplete (bancos, e demais autocompletes legado) ----- * O dropdown (.ui-autocomplete/.ui-menu) é anexado ao . Os itens são , * então a regra genérica a:not(.btn) pinta de azul; hover (.ui-state-focus) usa * tokens/cores da lib sem contraste no dark. Normalizamos o menu inteiro. * !important vence cópias não-tokenizadas da lib (lib/jquery-ui/). */ [data-theme="dark"] .ui-autocomplete.ui-widget-content { background: var(--ds-card-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; color: var(--ds-emphasis-color) !important; } [data-theme="dark"] .ui-autocomplete .ui-menu-item, [data-theme="dark"] .ui-autocomplete .ui-menu-item a { background: transparent !important; color: var(--ds-emphasis-color) !important; } [data-theme="dark"] .ui-autocomplete .ui-menu-item a.ui-state-focus, [data-theme="dark"] .ui-autocomplete .ui-menu-item a.ui-state-hover, [data-theme="dark"] .ui-autocomplete .ui-menu-item a.ui-state-active, [data-theme="dark"] .ui-autocomplete .ui-state-focus, [data-theme="dark"] .ui-autocomplete .ui-state-active { background: var(--ds-link) !important; border-color: var(--ds-link) !important; color: #FFFFFF !important; } /* --- #6202 jQuery UI Accordion (wizard de geração de relatório) -------------- * .accordion-container (classe exclusiva deste wizard: etapa_3 "Personalizando * o Relatório" e etapa_4 "Totalizadores") usa o accordion nativo do jQuery UI. * JANELA_relatorios.php carrega o tema BASE (claro) do jQuery UI via CDN, sem * override para dark — cabeçalho e conteúdo do accordion ficam claros dentro * do modal escuro. !important vence o CSS não-tokenizado da lib. */ [data-theme="dark"] .accordion-container.ui-accordion .ui-accordion-header { background: var(--ds-card-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; color: var(--ds-emphasis-color) !important; } [data-theme="dark"] .accordion-container.ui-accordion .ui-accordion-header.ui-state-hover, [data-theme="dark"] .accordion-container.ui-accordion .ui-accordion-header.ui-state-active { background: var(--ds-link) !important; border-color: var(--ds-link) !important; color: #FFFFFF !important; } [data-theme="dark"] .accordion-container.ui-accordion .ui-accordion-content { background: var(--ds-card-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; color: var(--ds-emphasis-color) !important; } /* --- #188 Calendário legado (dhtmlgoodies) — sistema todo --------------------- * O container/células já herdam tokens dark, mas: (a) rótulos Mês/Ano (.selectBox) * usam --ds-gray-150, que no dark vira #222 (texto escuro sobre escuro); (b) as * setas de navegação são GIFs escuros (left/right/down), invisíveis no fundo * escuro. O X de fechar (close.gif, vermelho) fica fora do invert. */ [data-theme="dark"] #calendarDiv .selectBox { color: var(--ds-emphasis-color); background-color: transparent; } [data-theme="dark"] #calendarDiv .selectBoxOver { color: var(--ds-emphasis-color); background-color: var(--ds-palette-tint-gray-bg); } [data-theme="dark"] #calendarDiv img:not([src*="close"]) { filter: invert(1) brightness(1.6); } /* Setas prev/next (left.gif/right.gif): o gif tem um quadrado embutido que o * invert acima transformava em QUADRADO PRETO. Substitui o gif por um chevron * SVG transparente (sem quadrado), mantendo o clique. Vale p/ todo calendário. */ [data-theme="dark"] #calendarDiv img[src*="left"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8l5 5' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: none !important; width: 16px; height: 16px; } [data-theme="dark"] #calendarDiv img[src*="right"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: none !important; width: 16px; height: 16px; } [data-theme="dark"] #calendarDiv .monthYearPicker { background-color: var(--ds-card-bg); border-color: var(--ds-palette-tint-gray-border); color: var(--ds-body-color); } [data-theme="dark"] #calendarDiv .todaysDate { background-color: var(--ds-palette-tint-gray-bg); color: var(--ds-body-color); } /* --- #236 "Faixa preta" nas abas dos modais (box-header) ---------------------- * CAUSA RAIZ: .box-header (toolbar "+Novo"/filtros das abas de TODOS os modais * — Agenda, Andamentos, Receitas, Despesas etc. — e também em páginas) usa * background var(--ds-palette-core-ice-white): #F9F9F9 no light (elevação sutil), * mas o token vira #1A1A1A no dark -> faixa quase PRETA sobre a modal (#242424). * Transparente no dark: a faixa herda o fundo do container (modal #242424, * página #1A1A1A) e fica invisível em qualquer contexto. Variantes semânticas * (.conclusion, .negative, .procedure, .stoped) e relatórios * (.conteudo>.box-header) vencem por ordem de carga e ficam preservadas. */ [data-theme="dark"] .box-header { background: transparent; } /* Complemento: .content-header dentro de modais. Em páginas (fundo #1A1A1A) o * card #242424 é elevação correta e fica intocado; dentro da modal (#242424) * empata/inverte — transparente para fundir com o fundo do módulo (a borda do * componente mantém a estrutura do bloco de filtros). */ [data-theme="dark"] .modal_janela .content-header, [data-theme="dark"] .janela__content .content-header { background-color: transparent; } /* --- #236 Backdrop das modais legado (branco/claro no dark) ------------------ * .bg-modal usa rgb(var(--ds-emphasis-color-rgb)/0.5): no dark o token vira * 255 255 255 -> véu BRANCO atrás da modal. .fundoPRETO usa a secondary clara. * No dark o backdrop deve escurecer, nunca clarear. */ [data-theme="dark"] .bg-modal { background-color: rgb(0 0 0 / 0.6); } [data-theme="dark"] .fundoPRETO { background-color: rgb(0 0 0 / 0.63); } /* --- #198 Ícone "Indique e Ganhe" preto no dark ------------------------------- * O ícone (SVG stroke=currentColor) herda de .icone--superficie, que usa * var(--bs-brand-surface) -> superfície escura no dark -> ícone preto sobre o * pill vermelho. O pill é vermelho nos DOIS temas, então o ícone é fixo branco. */ html[data-theme="dark"] .cabecalho__botao-indique .icone { color: #FFFFFF; } /* --- #195 Topbar branca durante o load (FOUC) --------------------------------- * A topbar (.cabecalho.bg-body, filha de .rebrand) só escurece quando o * theme-toggle.js (defer) propaga data-bs-theme aos filhos do .rebrand — em * carga de página/troca de módulo ela pinta BRANCA até o script rodar. O * [data-theme] do é setado pelo inline anti-FOUC ANTES do 1º paint, * então escopar por ele elimina o flash. !important vence o bg-body do BS. */ [data-theme="dark"] .cabecalho.bg-body { background-color: var(--ds-palette-tint-gray-bg) !important; } /* --- #199 Login (externa): textos do painel direito ilegíveis ----------------- * O painel direito é uma FOTO clara fixa (não muda com o tema), mas os textos * usam tokens que clareiam no dark -> texto claro sobre foto clara. Pinamos as * cores do light (literais), já que o fundo é fixo. !important empata com o * original e vence por especificidade. */ [data-theme="dark"] .right_image-bg .baner_info_title { color: #E52940 !important; } [data-theme="dark"] .right_image-bg .baner_info_text, [data-theme="dark"] .right_image-bg .baner_info-text { color: #3E4B52 !important; } /* --- #224 Wizard "Configurar Automação de Envio" (modeloRelatorios) ---------- * Componente exclusivo deste wizard (CSS inline em JANELA_configuracao_envio). * As abas (.tabListMain li) usam color:var(--ds-card-bg) -> #242424 no dark * (texto escuro, ilegível) e a barra usa --ds-palette-secondary (#7F919A, claro * demais, destoa do modal escuro). Realinhamos ao padrão dark do sistema: * barra = superfície elevada, abas inativas muted, aba ativa = realce --ds-link. * Especificidade (0,2,0)/(0,3,1) vence o CSS inline (0,1,1)/(0,1,0). */ [data-theme="dark"] .tabListMain { background-color: var(--ds-palette-tint-gray-bg); } [data-theme="dark"] .tabListMain li { color: var(--ds-text-muted); } [data-theme="dark"] .tabListMain li.activeTabList { background-color: var(--ds-link); color: #FFFFFF; } /* --- #220 Chips de permissão (Controle de Acesso — modelo de usuário) -------- * Os chips .modulos / .modulo_ver / .modulo_ver_editar usam tokens *-border e * *-bg que no dark viraram tons MUITO escuros e saturados (vinho #2A1518, * marrom #5D4A20), com textos/ícones quase invisíveis (ex.: dourado #906e13 * sobre marrom; ícone X em #222). Redesenhamos como "soft badge" dark: fundo * translúcido da cor semântica + texto/borda na cor viva — preserva o código de * cores (azul=ver+editar, amarelo=ver, vermelho=sem acesso) com contraste legível. * !important + especificidade (0,2,0) vencem o !important (0,1,0) das regras base. */ /* sem acesso (base .modulos) — vermelho */ [data-theme="dark"] .modulos { background-color: rgb(var(--ds-palette-tint-red-text-rgb, 241 85 100) / 0.16); border-color: rgb(var(--ds-palette-tint-red-text-rgb, 241 85 100) / 0.55); } [data-theme="dark"] .modulos::after { color: var(--ds-palette-tint-red-text) !important; } /* ver + editar — azul */ [data-theme="dark"] .modulo_ver_editar { background-color: rgb(var(--ds-link-rgb, 74 179 224) / 0.16) !important; color: var(--ds-link) !important; border-color: rgb(var(--ds-link-rgb, 74 179 224) / 0.55) !important; } [data-theme="dark"] .modulo_ver_editar::after { color: var(--ds-link) !important; } /* só ver — amarelo */ [data-theme="dark"] .modulo_ver { background-color: rgb(var(--ds-palette-tint-yellow-text-rgb, 255 181 71) / 0.16) !important; color: var(--ds-palette-tint-yellow-text) !important; border-color: rgb(var(--ds-palette-tint-yellow-text-rgb, 255 181 71) / 0.55) !important; } [data-theme="dark"] .modulo_ver::after { color: var(--ds-palette-tint-yellow-text) !important; } /* --- #216/#213/#212 Foco/hover dos inputs em modais (.boxInput) -------------- * janelaItern.css força no :focus/:hover dos inputs de modal: * border: 1px solid var(--ds-custom-2) !important (+ box-shadow custom-2) * No dark, --ds-custom-2 = #2e295e (roxo-escuro), quase invisível sobre o input * escuro -> feedback de foco some. Trocamos pelo realce azul do dark (--ds-link), * consistente com o foco do .form-control do rebrand. !important + (0,3,1) vencem. * (O "outline" reclamado nos prints é a borda nativa `inset` dos inputs no tema * CLARO — pré-existente, fora do escopo dark; não tratado aqui.) */ [data-theme="dark"] .boxInput input:focus, [data-theme="dark"] .boxInput input:hover, [data-theme="dark"] .boxInput select:focus, [data-theme="dark"] .boxInput select:hover, [data-theme="dark"] .boxInput textarea:focus, [data-theme="dark"] .boxInput textarea:hover { border-color: var(--ds-link) !important; box-shadow: 0 0 3px rgb(var(--ds-link-rgb, 74 179 224) / 0.35) !important; } /* --- #210 Gerenciador Juris.AI / Produtos IA — títulos e labels invisíveis --- * O modal (gerenciador_jurisai + gerenciador_produtos_ia) usa nos títulos, * labels e no informativo Asaas: color: var(--ds-custom-2) — #2e295e (roxo-escuro) * no dark, ilegível sobre o fundo escuro. Título/informativo -> ênfase; labels * -> texto de corpo. (Botão Salvar roxo + texto branco já tem contraste, mantido.) * Especificidade (0,2,0)/(1,1,1) vence o CSS do componente sem !important. */ [data-theme="dark"] .title_assinatura_jurisai, [data-theme="dark"] .title_assinatura_jurisai span, [data-theme="dark"] .title_assinatura_produto_ia, [data-theme="dark"] .title_assinatura_produto_ia span, [data-theme="dark"] #container_informativo_asaas span { color: var(--ds-emphasis-color); } [data-theme="dark"] #formulario_assinatura_jurisai label, [data-theme="dark"] #formulario_assinatura_produto_ia label { color: var(--ds-body-color); } /* --- #197 Minha Assinatura — textos secundários com pouco contraste ---------- * Labels/subtítulos da tela (.titulo-grid, "Selecione o ano/status", etc.) usam * color: var(--ds-palette-core-slate), que no dark = #6B7C85 -> contraste ~3.3 * sobre os cards (#2A2A2A), abaixo do WCAG AA. O token é usado SÓ como cor de * texto nesta tela (0 usos em background/border), então remapeamos a variável no * escopo do container: todos os textos secundários clareiam de uma vez (~6.5:1), * preservando a hierarquia com o texto principal. Dark-only, escopado à tela. */ [data-theme="dark"] #modulo_minha_assinatura { --ds-palette-core-slate: var(--ds-palette-tint-gray-text); } /* --- #197 Filtros de status — cores fortes (estavam apagados) ----------------- * Os botões .status-filter-tag (Em aberto/Paga/Vencida) usavam fundos escuros * bem sutis (tint-*-bg) + opacity 0.6 (inativo), ficando apagados. No DARK damos * fundo VIVO na cor da semântica (tint-*-text) + texto escuro p/ contraste, + * borda na mesma cor. Botão fica forte e legível mesmo com o opacity de inativo. * DARK-ONLY; !important vence o estilo inline do PHP. */ [data-theme="dark"] #modulo_minha_assinatura .status-filter-tag[data-status="em-aberto"] { background: #7C3AED !important; color: #FFFFFF !important; border-color: #7C3AED !important; } [data-theme="dark"] #modulo_minha_assinatura .status-filter-tag[data-status="paga"] { background: #15803D !important; color: #FFFFFF !important; border-color: #15803D !important; } [data-theme="dark"] #modulo_minha_assinatura .status-filter-tag[data-status="vencida"] { background: #C92A3D !important; color: #FFFFFF !important; border-color: #C92A3D !important; } /* --- PADRÃO GERAL (DARK-ONLY): labels de listagem em TODOS os módulos ---------- * As listagens usam `Label: valor`. No * DARK o label deve herdar a cor de corpo (branco) — padrão de Agenda/Pessoas. * Escopado a [data-theme="dark"]: NÃO altera o tema claro (regra de ouro). No * claro, o pop-up mantém sua cor original (azul-marinho via popup.css). */ [data-theme="dark"] .table-item b { color: var(--ds-body-color); } /* Pop-up: regra própria com ID `#tb_pop-up b { color: var(--ds-custom-2) }` * (popup.css). (1,2,1) vence (1,0,1). ::before = label "ID:" mobile. DARK-ONLY. */ [data-theme="dark"] #tb_pop-up .table-item b { color: var(--ds-body-color); } [data-theme="dark"] #tb_pop-up [label-row]:not(:empty)::before { color: var(--ds-body-color) !important; } /* Estrelas de classificação (coluna Status): a regra #status-pop-up i (popup.css) * pintava TODAS de --ds-custom-2 (azul-marinho no light, roxo-escuro no dark). * Rating segue o padrão dourado do próprio sistema (modal de feedback): preenchida/ * meia em âmbar (tint-yellow-text, adapta-se ao tema), vazia em cinza-muted. * GLOBAL (ambos os temas). (1,1,1) vence #status-pop-up i (1,0,1). */ #status-pop-up i.fa-star, #status-pop-up i.fa-star-half-o { color: var(--ds-palette-tint-yellow-text); } #status-pop-up i.fa-star-o { color: var(--ds-text-muted); } /* --- Modal de exclusão em massa de receitas (.ej-modal) — textos ilegíveis ---- * O modal de resultado ("Nenhuma receita foi excluída... entenda o motivo") usa * --ds-custom-2 (#2e295e roxo-escuro) no título (h3), no ID da receita (h4) e no * ícone, e --ds-gray-350 no link "Ir para receita" — todos de baixo contraste no * dark. Trocamos por cores legíveis: títulos/ID -> ênfase; ícone e link -> realce * azul. DARK-ONLY; especificidade replicada (vence sem !important). O motivo (p, * gray-800) e o botão (texto branco) já são legíveis no dark. */ [data-theme="dark"] .ej-modal h3, [data-theme="dark"] .ej-modal .ej-modal-content article div:nth-child(2n) h4 { color: var(--ds-emphasis-color); } [data-theme="dark"] .ej-modal .ej-modal-content article div:first-of-type i, [data-theme="dark"] .ej-modal .ej-modal-content article div:last-of-type a { color: var(--ds-link); } /* Círculo de fundo do ícone: o ::after usa tint-blue-bg + mix-blend-mode:multiply, * que no dark vira preto (some). Trocamos por azul translúcido visível, sem blend. */ [data-theme="dark"] .ej-modal .ej-modal-content article div:first-of-type i:after { background: rgb(var(--ds-link-rgb, 74 179 224) / 0.18); mix-blend-mode: normal; opacity: 1; } /* Link "Ir para receita": mais destaque (negrito) além do azul de realce. */ [data-theme="dark"] .ej-modal .ej-modal-content article div:last-of-type a { font-weight: 600; } /* --- Abas secundárias de listagem (.content-header__title) — azul-escuro ------- * A 2ª aba (ex.: "Timesheet" na Agenda; mesmo padrão em vários módulos) usa * .opacityTitles { color: var(--ds-palette-tint-gray-border) } e as abas inativas * usam o mesmo token em .content-header__title li a. No dark esse token é #3A4561 * (azul-escuro, cor de BORDA) — ilegível como texto. Trocamos por tint-gray-text * (texto secundário claro), sem tocar o token (que é borda em outros lugares). * GLOBAL (todos os módulos). A aba ativa (li.active a) permanece body-color. */ [data-theme="dark"] .content-header__title li:not(.active) a { color: var(--ds-palette-tint-gray-text); } [data-theme="dark"] .opacityTitles { color: var(--ds-palette-tint-gray-text) !important; } /* --- bootstrap-tagsinput: wrapper branco no dark ------------------------------ * Os campos "Contendo as palavras (e)" e "Sem conter as palavras (não)" da * Jurisprudência usam data-role="tagsinput", que embrulha o num * próprio. Esse wrapper ficou branco (#fff/borda #ccc) * enquanto o input interno já recebia o dark — destoando dos demais campos. * Casamos o wrapper com o input nativo dark (mesmo bg/borda/raio do #cod_processo) * e garantimos legibilidade dos chips de tag. GLOBAL (qualquer tagsinput). */ [data-theme="dark"] .bootstrap-tagsinput { background-color: var(--ds-palette-tint-gray-bg); border: 1px solid var(--ds-palette-tint-gray-border); color: var(--ds-body-color); } [data-theme="dark"] .bootstrap-tagsinput input { background-color: transparent; color: var(--ds-body-color); } [data-theme="dark"] .bootstrap-tagsinput .tag { background-color: var(--ds-link); color: #fff; } /* --- Projetos Consultivos: títulos de card + kanban -------------------------- * 1) Grid (pg=job_lista): .box--dashboard .title usa var(--ds-custom-2) que no * dark resolve p/ índigo escuro (#2E295E) — ilegível sobre o card escuro. * Troca por texto claro (body-color). GLOBAL p/ qualquer card .box--dashboard. * 2) Kanban (pg=kanban_job): .contador_job (nº por coluna) usa * var(--ds-secondary-bg, ghostwhite); o token no dark é #2A2A2A — número * quase invisível sobre o badge colorido. Restaura o ghostwhite original. * 3) Kanban: .button_dot (menu "...") tem color preto e bg = cor do card no * dark → some. Texto claro + leve realce no hover. */ [data-theme="dark"] .box--dashboard .title { color: var(--ds-body-color); } [data-theme="dark"] .contador_job, [data-theme="dark"] .contador_oportunidade { color: ghostwhite; } /* Título do card do kanban (.grid_item_titulo, Projetos e Oportunidades) usa * var(--ds-custom-2) = #2e295e no dark → faint sobre o card escuro. Texto claro. */ [data-theme="dark"] .grid_item_titulo { color: var(--ds-body-color) !important; } /* Agenda: botão "+" por dia (#cadastrar_evento_dia) tem bg var(--ds-card-bg) = * #242424 no dark — um quadradinho que destoa da célula (#222) e aparece como * caixa escura sobre dias coloridos/selecionados. Trocamos por um branco * translúcido: realça o botão de forma sutil e funciona sobre qualquer cor de * célula (escura ou colorida). Dark-only. */ [data-theme="dark"] #cadastrar_evento_dia { background-color: rgb(var(--ds-emphasis-color-rgb) / 0.6) !important; /* Azul do claro (--ds-link light = #2784B1), um pouco mais escuro a pedido. * Sem token equivalente no escopo dark, então literal. */ color: #1F6C92; } /* --- Dashboard: botão "Aplicar Filtros" dos modais de filtro ----------------- * Classe compartilhada .btn-aplicar-filtros-widget usa btn-light + text-secondary * (botão ghost de texto cinza); no dark vira fundo apagado + texto mutado = cara * de desabilitado. Como é a ação PRIMÁRIA do modal, damos um neutro sólido * elevado + texto claro (sem virar CTA colorido). !important vence o * text-secondary/btn-light do bootstrap. Dark-only. */ [data-theme="dark"] .rebrand .btn-aplicar-filtros-widget { background-color: var(--ds-palette-tint-gray-border) !important; border-color: var(--ds-palette-tint-gray-border) !important; color: var(--ds-body-color) !important; } [data-theme="dark"] .rebrand .btn-aplicar-filtros-widget:hover { background-color: var(--ds-gray-300) !important; border-color: var(--ds-gray-300) !important; } /* --- Gerenciar Pop-up (legado): selects TomSelect brancos no dark ------------- * "Perfil do Usuário" (#seletor-usuario) e "Perfil do Contratante" * (#seletor-contratante) são TomSelect. A regra dark de TomSelect existente é * escopada a .rebrand [data-bs-theme="dark"]; este modal é legado * (#gerenciador_pop-up, [data-theme="dark"]), então não pegava → control branco. * Espelhamos no escopo legado. Dropdown do TomSelect renderiza in-place. */ [data-theme="dark"] #gerenciador_pop-up .ts-control, [data-theme="dark"] #gerenciador_pop-up .ts-dropdown { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color) !important; border-color: var(--ds-palette-tint-gray-border) !important; } [data-theme="dark"] #gerenciador_pop-up .ts-control input, [data-theme="dark"] #gerenciador_pop-up .ts-control .item { color: var(--ds-emphasis-color) !important; } [data-theme="dark"] #gerenciador_pop-up .ts-control .item { background-color: var(--ds-card-bg) !important; border-color: var(--ds-palette-tint-gray-border) !important; } [data-theme="dark"] #gerenciador_pop-up .ts-placeholder, [data-theme="dark"] #gerenciador_pop-up .ts-control input::placeholder { color: var(--ds-palette-tint-gray-text) !important; } [data-theme="dark"] #gerenciador_pop-up .ts-dropdown .option { color: var(--ds-emphasis-color) !important; background-color: transparent !important; } [data-theme="dark"] #gerenciador_pop-up .ts-dropdown .option.active, [data-theme="dark"] #gerenciador_pop-up .ts-dropdown .option:hover, [data-theme="dark"] #gerenciador_pop-up .ts-dropdown .active { background-color: var(--ds-palette-tint-gray-bg) !important; color: var(--ds-emphasis-color) !important; } /* (O check dos checkboxes do Gerenciar Pop-up — logo easy_ico.png trocado por ✓ * — foi feito direto na regra-fonte janeja_gerenciador_popup.css, nos dois temas * a pedido. Por isso não há override aqui.) */ [data-theme="dark"] .button_dot { color: var(--ds-body-color); /* No dark var(--ds-gray-150) = #222 (= cor do card) → pill some. Damos um * cinza elevado visível, paralelo ao pill claro (#e6dcdc) do tema claro. */ background-color: var(--ds-palette-tint-gray-border); } [data-theme="dark"] .button_dot:hover { background-color: var(--ds-gray-300); } /* --- Botão primário .btn--easyjur sem fundo no dark -------------------------- * .btn--easyjur define background var(--ds-custom-2) (= #2e295e no dark), mas no * dark o fundo era zerado (reset .btn do bootstrap rebrand vencendo por ordem de * carga) — sobrava só o texto branco "flutuando". Reforçamos o fundo p/ valer e * padronizar com a aba ativa .tab-modelo.active, que usa o MESMO token. Dark-only; * o claro (#151546 navy) permanece. GLOBAL (todo .btn--easyjur do sistema). */ [data-theme="dark"] .btn--easyjur { background-color: var(--ds-custom-2) !important; } [data-theme="dark"] .btn--easyjur:hover { background-color: var(--ds-custom-26) !important; } /* --- Card "Novo modelo" (biblioteca de modelos) ------------------------------ * Texto (.texto-novo-modelo) e ícone "+" (fa-plus) usam var(--ds-custom-2) = * #2e295e no dark → quase invisível sobre o card escuro. Clareamos p/ texto de * corpo. O ícone tem color INLINE, daí o !important. Dark-only. */ [data-theme="dark"] .texto-novo-modelo { color: var(--ds-body-color); } [data-theme="dark"] .icone-novo-modelo .fa-plus { color: var(--ds-body-color) !important; } /* --- JurisAI (chat): faixas de fundo no dark -------------------------------- * .container-search-bar (área central do chat) usa um tom (#2A2A2A) diferente * dos wrappers ao redor (#222222: .content, #container_chat_content), criando * faixas mais escuras no topo/esquerda/base. No claro os tokens coincidem (fundo * homogêneo). Transparente no dark → herda o #222 do pai e fica uniforme. */ [data-theme="dark"] .container-search-bar { background-color: transparent !important; } /* --- EJ-5732: header novo "EASYJUR | OS" -------------------------------------- * Swap da logo light↔dark SEM flash. Usa [data-theme] no — aplicado pelo * inline do ANTES do primeiro paint (mesmo hook das logos legadas acima). * NÃO usar [data-bs-theme], que é propagado só após o render (markChildren) e * causava a logo piscando (pintava light/preta e trocava). Prefixo html[] eleva * a especificidade p/ vencer o sizing de cabecalho.css independente da ordem. */ html[data-theme="dark"] .cabecalho__logo-os img.cabecalho__logo-os-img--light { display: none; } html[data-theme="dark"] .cabecalho__logo-os img.cabecalho__logo-os-img--dark { display: block; } /* --- Botão de suporte (#btchat, sgr/chat.php) -------------------------------- * O launcher é um SVG com fill inline `var(--ds-custom-2, #151446)` (azul-marinho). * No dark, --ds-custom-2 resolve p/ #2E295E (marinho escuro) e o ícone some sobre * o fundo escuro. Pinta com o vermelho da marca (--ds-palette-primary) p/ dar * contraste e on-brand. !important é obrigatório p/ vencer o style inline do SVG. * Light intocado (icone segue marinho). */ [data-theme="dark"] #btchat { fill: var(--ds-palette-primary, #FF4D63) !important; } /* --- Dashboard clássica: tiles/cards clicáveis (AGENDA, AGENDA ESCRITÓRIO, * INTIMAÇÕES E PUBLICAÇÕES) ---------------------------------------------------- * .box_agenda_dashboard e .box_publicacao_dashboard são cartões CLICÁVEIS. No * light aparecem como cards (borda/sombra clara). No dark a sombra deles some * sobre o card escuro — #909294 fica fraca e a sombra navy translúcida * (--ds-custom-2-rgb) some — então o tile fica sem contorno e parece que não há * card clicável. Restauramos o aspecto de cartão com leve elevação + borda no * dark. !important vence o box-shadow inline dos widgets. Light intocado. */ [data-theme="dark"] .box_agenda_dashboard, [data-theme="dark"] .box_publicacao_dashboard { background-color: var(--ds-palette-tint-gray-bg) !important; border: 1px solid var(--ds-palette-tint-gray-border) !important; box-shadow: none !important; } /* --- Tooltip custom global (.tooltip-text — addTooltipToElement, assets/menu/main.js) * Bg = rgb(var(--ds-emphasis-color-rgb)/0.7): no light o emphasis é escuro => * bolha escura + texto branco (legível). No dark o emphasis vira CLARO => bolha * clara + texto branco (#FFFFFF) = ilegível (branco no branco). Fixamos superfície * escura no dark (mantém a convenção de bolha escura do light) + borda p/ destacar * sobre modais escuros. Anexado ao (legado), [data-theme] no cobre. * Usado em muitos lugares (agenda, timesheet, etc.). Light intocado. */ [data-theme="dark"] .tooltip-text { background-color: var(--ds-palette-tint-gray-bg) !important; border: 1px solid var(--ds-palette-tint-gray-border) !important; color: #FFFFFF !important; } /* --- Timesheet (aba Timesheets da agenda): botões de ação editar/excluir ------- * São com fundo colorido (azul --ds-link / * vermelho) e ícone branco. A regra genérica do dark `a:not(.btn){color:--ds-link}` * (especificidade 0,2,1) vence o `color:#FFFFFF` dos botões e pinta o ícone de * azul → azul-no-azul (some) no editar e cor errada no excluir. Reafirmamos o * ícone branco com !important (a regra genérica não usa !important). Light intocado. */ [data-theme="dark"] .editar_button, [data-theme="dark"] .excluir_button, [data-theme="dark"] .editar_button i, [data-theme="dark"] .excluir_button i { color: #FFFFFF !important; } /* --- Botões "Mais informações" dos modais (.boxJanela__item-interaction*) ------ * sem .btn cujo :hover fica bg azul (--ds-link) + texto branco. A regra * genérica `a:not(.btn){color:--ds-link}` (0,2,1) vence o :hover (0,2,0) e mantém * o texto azul → azul-no-azul (some) ao passar o mouse. Reafirmamos branco no * hover com !important. [class*=] cobre as variantes (_pessoas/_user/_agenda), * usadas em vários modais (processos, pessoas, agenda, usuários...). Light intocado. */ [data-theme="dark"] a[class*="boxJanela__item-interaction"]:hover { color: #FFFFFF !important; } /* --- Faturamento em massa: cards "Agrupar Receitas" / "Faturar Individualmente" * Títulos (#box-selector-invoicing h4) usam --ds-custom-2 (navy #151546) e os * ícones são SVG com cor escura embutida. No dark, ambos somem sobre o * card escuro. Clareamos o título (--ds-body-color) e os ícones via filter * (brightness(0) invert => silhueta clara; cor do SVG externo não muda por CSS). * Light intocado. */ [data-theme="dark"] #box-selector-invoicing h4 { color: var(--ds-body-color) !important; } [data-theme="dark"] .svg__invoicing_I, [data-theme="dark"] .svg__invoicing_II { filter: brightness(0) invert(0.85); } /* --- Tooltip [data-tooltip]/[data-flow] (CSS puro, ::after = bolha, ::before = * seta) — padroniza com o .tooltip-text no dark: superfície --ds-palette-tint-gray-bg * + borda + texto branco, no lugar do navy (--ds-custom-2). Recolore a seta de * cada direção pra casar com a bolha. Light intocado. */ [data-theme="dark"] [data-tooltip]::after { background: var(--ds-palette-tint-gray-bg) !important; border: 1px solid var(--ds-palette-tint-gray-border) !important; color: #FFFFFF !important; } [data-theme="dark"] [data-tooltip]:not([data-flow])::before, [data-theme="dark"] [data-tooltip][data-flow="top"]::before { border-top-color: var(--ds-palette-tint-gray-bg) !important; } [data-theme="dark"] [data-tooltip][data-flow="bottom"]::before { border-bottom-color: var(--ds-palette-tint-gray-bg) !important; } [data-theme="dark"] [data-tooltip][data-flow="left"]::before { border-left-color: var(--ds-palette-tint-gray-bg) !important; } [data-theme="dark"] [data-tooltip][data-flow="right"]::before { border-right-color: var(--ds-palette-tint-gray-bg) !important; } /* --- Faturamento em massa: cards clicáveis (#body_FATURA_em_massa .card) ------- * Default tem só borda navy a 18,8% (some no dark) e sem fundo → o card não se lê * como clicável. Damos superfície elevada + borda visível no dark; o selecionado * (.card_shadow) ganha borda azul (--ds-link) p/ destacar a seleção. Light intocado. */ [data-theme="dark"] #body_FATURA_em_massa .card { background-color: var(--ds-palette-tint-gray-bg) !important; border: 1px solid var(--ds-palette-tint-gray-border) !important; } [data-theme="dark"] #body_FATURA_em_massa .card.card_shadow { border: 2px solid var(--ds-link) !important; } /* --- Acordeão "Selecione os campos" (.label-modulo, ajax_campos_assistente_relatorio) * Usado nos modais de relatório/exportação. Borda = navy a 22% (vira roxo fraco no * dark) e o :hover usa color: var(--ds-card-bg) que FLIPA escuro no dark → texto * escuro sobre o fundo navy do hover = ilegível. Damos borda neutra e texto branco * no hover. Light intocado. */ [data-theme="dark"] .label-modulo { border-color: var(--ds-palette-tint-gray-border) !important; } [data-theme="dark"] .label-modulo:hover { color: #FFFFFF !important; } /* --- Plano de contas (TomSelect): itens não selecionáveis (grupos/pais) -------- * .tom-option-disabled tinha background ice-white (#fafafa, branco fixo) → no dark * vira fundo claro, e o cinza + negrito não passavam o aspecto "desabilitado". * No dark: fundo transparente, texto muted + opacidade e peso normal, deixando * claro que a opção não é clicável. Specificity > regra da lib. Light intocado. */ [data-theme="dark"] .plano-contas-component .tom-option-disabled, [data-theme="dark"] .plano-contas-component .tom-option-disabled:hover { background-color: transparent !important; color: var(--ds-gray-350, #909294) !important; opacity: 0.7 !important; font-weight: 400 !important; } /* --- Rodapé de totais da listagem de receitas (#revenue_footer) ---------------- * Os valores (R$ ...) são pintados de navy (--ds-custom-2 => #2e295e no * dark) → ilegíveis sobre o rodapé escuro (o label fica branco). No dark, pinta os * valores com --ds-link (legível e mantém destaque vs o label). Light intocado. */ [data-theme="dark"] #revenue_footer h3 strong, [data-theme="dark"] #principalFooterAjaxReceitasLista h3 strong, [data-theme="dark"] #principalFooterDateReceitasColapse h3 strong, [data-theme="dark"] #principalFooterReceitasColapse h3 strong { color: #FFFFFF !important; } /* ════════════════════════════════════════════════════════════════════════════ * Aba "API EasyJur" (turin) — Gerenciar Escritório * A aba inteira foi construída só com cores claras literais (#fff, #e5e7eb, * #191919, #7f919a, #f9f9f9...) e não tinha nenhum tratamento dark. Classes * .api-* / .mti-* são exclusivas desta aba → sem risco de vazamento. Os modais * (Criar/Revogar token) são movidos para o , mas seguem sob [data-theme]. * Paleta dark: superfície #242424, superfície-2 #2E2E2E, borda #3A3A3A, * texto #F5F5F5, muted #9CA3AF; vermelho da marca #E5293F mantido. * ════════════════════════════════════════════════════════════════════════════ */ /* ── Superfícies (cards, tabela, boxes) ── */ [data-theme="dark"] .api-card, [data-theme="dark"] .api-tokens__tabela-wrap { background: #242424 !important; border-color: #3A3A3A !important; box-shadow: none !important; } /* Wrapper da seção de tokens: no light é transparente, mas uma regra genérica * do dark pinta #2A2A2A criando uma faixa atrás do título + botão. Zera. */ [data-theme="dark"] .api-tokens { background: transparent !important; } /* Badges de status dos tokens (ATIVO/EXPIRADO/REVOGADO): os tokens viram tons * escuros e sem contraste no dark (texto quase igual ao fundo). Cores vivas com * fundo translúcido + texto claro. */ [data-theme="dark"] .turin-tokens__badge--ativo { background-color: rgba(16, 185, 129, 0.18) !important; color: #34D399 !important; } [data-theme="dark"] .turin-tokens__badge--expirado { background-color: rgba(245, 158, 11, 0.18) !important; color: #FBBF24 !important; } [data-theme="dark"] .turin-tokens__badge--revogado { background-color: rgba(229, 41, 63, 0.18) !important; color: #FF6072 !important; } /* Mesmos badges na página "Minha Assinatura" → Integrações (.integracao__badge--*, * escopados a #modulo_minha_assinatura). Mesmo problema de tokens apagados. */ [data-theme="dark"] #modulo_minha_assinatura .integracao__badge--ativo { background-color: rgba(16, 185, 129, 0.18) !important; color: #34D399 !important; } [data-theme="dark"] #modulo_minha_assinatura .integracao__badge--expirado { background-color: rgba(245, 158, 11, 0.18) !important; color: #FBBF24 !important; } [data-theme="dark"] #modulo_minha_assinatura .integracao__badge--revogado { background-color: rgba(229, 41, 63, 0.18) !important; color: #FF6072 !important; } /* ── Títulos e textos ── */ [data-theme="dark"] .api-easyjur, [data-theme="dark"] .api-secao__titulo, [data-theme="dark"] .api-status__col-valor, [data-theme="dark"] .api-acao-card__titulo, [data-theme="dark"] .api-tokens__tabela thead th, [data-theme="dark"] .api-tokens__tabela tbody td { color: #F5F5F5 !important; } [data-theme="dark"] .api-status__eyebrow-label, [data-theme="dark"] .api-status__col-label, [data-theme="dark"] .api-status__col-sub, [data-theme="dark"] .api-acao-card__desc { color: #9CA3AF !important; } [data-theme="dark"] .api-status__col-vazio { color: #4B4B4B !important; } /* ── Botão ghost (Criar Token) ── */ [data-theme="dark"] .api-btn--ghost { background: transparent !important; color: #FF6072 !important; border-color: #E5293F !important; } [data-theme="dark"] .api-btn--ghost:hover { background: rgba(229, 41, 63, 0.12) !important; } [data-theme="dark"] .api-btn--bloqueado, [data-theme="dark"] .api-btn--bloqueado:hover { background: #2E2E2E !important; color: #6B7280 !important; border-color: #3A3A3A !important; } /* ── Chips ── */ [data-theme="dark"] .api-chip--neutro { background: rgba(255, 255, 255, 0.08) !important; color: #9CA3AF !important; } [data-theme="dark"] .api-chip--plano { background: rgba(126, 34, 206, 0.25) !important; color: #D6B4FF !important; } [data-theme="dark"] .api-chip--override { background: rgba(248, 227, 183, 0.2) !important; color: #F0D9A8 !important; } [data-theme="dark"] .api-chip--plano-antigo { background: #FFFFFF !important; color: #E5293F !important; border-color: #FFFFFF !important; } /* ── Badges de estado (translúcidos: só clareia o texto p/ contraste) ── */ [data-theme="dark"] .api-badge--neutro { background: rgba(255, 255, 255, 0.08) !important; color: #9CA3AF !important; } [data-theme="dark"] .api-badge--sucesso { color: #34D399 !important; } [data-theme="dark"] .api-badge--aviso { color: #FBBF24 !important; } [data-theme="dark"] .api-badge--info { color: #60A5FA !important; } [data-theme="dark"] .api-badge--escuro { background: rgba(255, 255, 255, 0.12) !important; color: #F5F5F5 !important; } /* ── Cards de ação ── */ [data-theme="dark"] .api-acao-card { background: #242424 !important; border-color: #3A3A3A !important; border-left-color: #3A3A3A !important; } [data-theme="dark"] .api-acao-card:hover { border-color: rgba(156, 163, 175, 0.4) !important; background: #2E2E2E !important; } [data-theme="dark"] .api-acao-card--destrutiva { border-left-color: #E5293F !important; } [data-theme="dark"] .api-acao-card--destrutiva:hover { border-color: rgba(229, 41, 63, 0.5) !important; background: rgba(229, 41, 63, 0.08) !important; } [data-theme="dark"] .api-acao-card__icone { background: rgba(255, 255, 255, 0.08) !important; color: #9CA3AF !important; } [data-theme="dark"] .api-acao-card--destrutiva .api-acao-card__icone { background: rgba(229, 41, 63, 0.18) !important; color: #FF6072 !important; } [data-theme="dark"] .api-acao-card--bloqueado, [data-theme="dark"] .api-acao-card--bloqueado:hover { background: #2E2E2E !important; border-color: #3A3A3A !important; border-left-color: #3A3A3A !important; } /* ── Tabela de tokens (bordas + zebra) ── */ [data-theme="dark"] .api-tokens__tabela thead th, [data-theme="dark"] .api-tokens__tabela tbody td { border-bottom-color: #3A3A3A !important; } [data-theme="dark"] .api-tokens__tabela tbody tr:nth-child(even) { background: #2A2A2A !important; } /* ── Aviso de bloqueio por Convênio ── */ [data-theme="dark"] .api-status__bloqueio-convenio { background: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.35) !important; color: #E5C07B !important; } [data-theme="dark"] .api-status__bloqueio-convenio strong { color: #F0D9A8 !important; } /* ──────────────────────────────────────────────────────────── * Modais da aba API (Criar / Revogar token, ações) — .mti-* / .api-modal__* * ──────────────────────────────────────────────────────────── */ [data-theme="dark"] .mti-container { background: #242424 !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .mti-header h2, [data-theme="dark"] .mti-field label, [data-theme="dark"] #mtt-step-success h2, [data-theme="dark"] .api-modal__btn--cancelar, [data-theme="dark"] .api-tier-opt__slug, [data-theme="dark"] .api-pill, [data-theme="dark"] .api-radio-card__txt, [data-theme="dark"] .mti-revogar-texto { color: #F5F5F5 !important; } [data-theme="dark"] .mti-header p, [data-theme="dark"] .mti-close, [data-theme="dark"] .api-tier-opt__det, [data-theme="dark"] .api-pill__sub { color: #9CA3AF !important; } [data-theme="dark"] .mti-close:hover { color: #F5F5F5 !important; } /* Inputs / selects / textarea dos modais */ [data-theme="dark"] .mti-field input, [data-theme="dark"] .api-select, [data-theme="dark"] .api-textarea, [data-theme="dark"] #mtt-step-success #mtt-token-key { background: #2A2A2A !important; border-color: #3A3A3A !important; color: #F5F5F5 !important; } [data-theme="dark"] .api-input--readonly { background: #2E2E2E !important; color: #9CA3AF !important; } /* Boxes informativos / sucesso */ [data-theme="dark"] .api-modal__box { background: #2A2A2A !important; border-color: #3A3A3A !important; color: #F5F5F5 !important; } [data-theme="dark"] #mtt-step-success .mti-success-warning { background: rgba(16, 185, 129, 0.15) !important; color: #34D399 !important; } /* Pills / tiers / radio cards (estados base) */ [data-theme="dark"] .api-pill, [data-theme="dark"] .api-tier-opt, [data-theme="dark"] .api-radio-card { background: #2A2A2A !important; border-color: #3A3A3A !important; } [data-theme="dark"] .api-pill:hover, [data-theme="dark"] .api-tier-opt:hover { background: #333333 !important; border-color: rgba(156, 163, 175, 0.4) !important; } [data-theme="dark"] .api-pill--ativo { background: rgba(229, 41, 63, 0.15) !important; border-color: #E5293F !important; color: #FF6072 !important; } [data-theme="dark"] .api-pill--ativo .api-pill__sub { color: #FF6072 !important; } [data-theme="dark"] .api-tier-opt--ativo, [data-theme="dark"] .api-radio-card--ativo { background: rgba(229, 41, 63, 0.1) !important; border-color: #E5293F !important; } /* Botões cancelar / back / fechar dos modais */ [data-theme="dark"] .api-modal__btn--cancelar, [data-theme="dark"] .mti-btn-back, [data-theme="dark"] .mti-btn-fechar { background: #2A2A2A !important; border-color: #3A3A3A !important; } [data-theme="dark"] .api-modal__btn--cancelar:hover, [data-theme="dark"] .mti-btn-back:hover, [data-theme="dark"] .mti-btn-fechar:hover { background: #333333 !important; } [data-theme="dark"] .api-modal__footer { border-top-color: #3A3A3A !important; } /* Footer sticky do modal grande (cancelar e reverter) — tem background: #fff inline */ [data-theme="dark"] .api-modal .mti-container--lg > .api-modal__footer { background: #242424 !important; } /* Box informativo (info) — ajustar quota / estender trial / cancelar trial */ [data-theme="dark"] .api-modal__info { background: #2A2A2A !important; border-color: #3A3A3A !important; } [data-theme="dark"] .api-modal__info-linha { color: #9CA3AF !important; } [data-theme="dark"] .api-modal__info-linha + .api-modal__info-linha { border-top-color: #3A3A3A !important; } [data-theme="dark"] .api-modal__info-linha--destaque { color: #F5F5F5 !important; } [data-theme="dark"] .api-modal__info-linha--negativo { color: #FF6072 !important; } /* Caixa de perigo (cancelar e reverter) */ [data-theme="dark"] .api-modal__box--perigo { background: rgba(229, 41, 63, 0.10) !important; border-color: rgba(229, 41, 63, 0.35) !important; } [data-theme="dark"] .api-modal__box-titulo, [data-theme="dark"] .api-modal__box-titulo i { color: #FF6072 !important; } /* Aviso amarelo (rodapé do preview) */ [data-theme="dark"] .api-modal__aviso { background: rgba(252, 211, 77, 0.10) !important; border-color: rgba(252, 211, 77, 0.35) !important; color: #FCD34D !important; } [data-theme="dark"] .api-modal__aviso i { color: #FCD34D !important; } /* Box amarelo "O que acontecerá ao confirmar" (Forçar virada / previews) — as classes --amarelo/__lista vêm de um