/* ========================================================================== ADMIN BRUTAL — reskin visual (piloto: layout.html + painel.html) TODA regra aqui DEVE começar com "body.admin-brutal" — é o que impede vazamento para as outras ~24 telas do admin, que compartilham os mesmos dashboard-redesign.css/dashboard.css mas não têm essa classe no . Ver docs/superpowers/specs/2026-08-02-admin-brutalismo-design.md ========================================================================== */ body.admin-brutal { font-family: var(--admin-brutal-font-sys); background: var(--admin-brutal-bg); color: var(--admin-brutal-fg); /* Redefine tokens de superfície DENTRO do escopo — qualquer elemento que já usa var(--surface-card)/var(--surface-bg)/var(--text-primary) (health-section, loading-container-new, empty-state-new, stat-badge azul via ancestral, etc.) herda o valor correto automaticamente, sem precisar de regra por seletor. */ --surface-bg: var(--admin-brutal-bg); --surface-card: var(--admin-brutal-bg); --surface-card-elevated: var(--admin-brutal-bg); --surface-card-hover: var(--admin-brutal-border); --border-color: var(--admin-brutal-border); /* FIX ROUND 1 (Task 14 review, achado Important 3): --border-subtle (_admin-tokens.css:264, dentro de :root puro) nunca foi remapeada — diferente de --app-border, que JÁ tem remap explícito abaixo. Ficava fixa em #333333 nos 2 temas (quase invisível no escuro, tom errado no claro); e onde a fonte usa a forma shorthand pura (`border: var(--border-subtle)`, sem width/style), o valor computado resolve pra `0px none` — sem borda nenhuma. Remap direto resolve a cor; os seletores que usam a forma shorthand quebrada ganham override específico com width/style explícitos mais abaixo (.cf-stat, .cf-row, .cf-api-chip, .mav-card, .mav-subsection, .mav-header). */ --border-subtle: var(--admin-brutal-border); --text-primary: var(--admin-brutal-fg); /* Task 12: família --app-* (alias em _admin-tokens.css:273-280, usada por admin-resta-um.css/.js e módulos irmãos admin-artilheiro/admin-capitao/ admin-luva-ouro, ainda fora do rollout) remapeada pelo mesmo motivo acima — inclusive corrige estilos INLINE (`style="color:var(--app- warning)"` etc., ver admin-resta-um.js:172,226,355,367,382,496-497, 633,642,664,671) que nenhuma regra por seletor alcançaria sem !important por elemento. --app-border (#333333 fixo) e --app-text-muted (#9ca3af fixo) não têm indireção; --app-warning/--app-danger/--app-success encadeiam para --color-warning/danger/success GLOBAIS (não remapeados, usados fora do admin-brutal) — colapsam monocromático, mesmo precedente de "nenhuma cor de status sobrevive" já aplicado a .stat-badge, .alert- (variantes) e .mercado-dot. FIX ROUND 1 (Task 13 review, achado 2): --app-bg/--app-surface/ --app-text-primary são definidas SÓ em :root (_admin-tokens.css:273- 274,279) como var(--surface-bg)/var(--surface-card)/var(--text-primary) — indireção de 2 níveis. O comentário original desta task assumia que "vêm corretas de graça" por encadearem para --surface-bg/--surface-card/ --text-primary (redefinidas acima); medido via Playwright/ getComputedStyle que isso NÃO se sustenta na prática (retornava o valor de :root, não o override deste escopo). Remapeadas DIRETO aqui, mesmo padrão de --app-border/--app-text-muted (indireção de 1 nível só, resolvida no próprio body.admin-brutal), eliminando a indireção via :root. Corrige de uma vez `.xx-admin-header`/`.xx-card`/`.xx-stat` (Task 13, admin-artilheiro/admin-capitao/admin-luva-ouro) e `.ru-admin-header`/`.ru-card`/`.ru-stat`/`.ru-edicao-card` (Task 12, admin-resta-um) — os 9+4 overrides pontuais de background que essas tasks escreveram para compensar ficam redundantes e foram removidos. */ --app-border: var(--admin-brutal-border); --app-text-muted: var(--admin-brutal-muted); --app-warning: var(--admin-brutal-fg); --app-danger: var(--admin-brutal-fg); --app-success: var(--admin-brutal-fg); --app-bg: var(--admin-brutal-bg); --app-surface: var(--admin-brutal-bg); --app-text-primary: var(--admin-brutal-fg); /* FIX ROUND 1 (Task 15 review, achado Critical 2): --bg-card (_admin-tokens.css:259) é definida SÓ em :root como var(--surface-card) — mesma indireção de 2 níveis via :root já comprovada quebrada para --app-bg/--app-surface/--app-text-primary (Task 13 review, comentário acima). O comentário da seção FERRAMENTAS- RODADAS.CSS mais abaixo (e o da seção FLUXO-FINANCEIRO.CSS, Task 11) afirmavam "já herda de graça por derivar de --surface-card" — mesma suposição não validada que já se provou falsa para --app-bg. Remap direto aqui elimina a indireção pra qualquer descendente de body.admin-brutal, incluindo .rodadas-header (ferramentas-rodadas.css: 19,70,227) e, de graça, fluxo-financeiro.css/capitao-luxo.css (que redefinem --bg-card de novo só em :root, mesmo padrão quebrado — corrige os 2 sem exigir mudança nos arquivos-fonte). */ --bg-card: var(--admin-brutal-bg); /* Task 18 (verificação final, achado Critical): --sidebar-text/--sidebar- text-muted (style.css:33-34, #e0e0e0/#a0a0a0 fixos, pensados pro admin OLD que era permanentemente escuro) nunca foram remapeadas — diferente das ~15 variáveis acima. style.css:387 (".sidebar a, a:link, a:visited, a:active { color: var(--sidebar-text) !important }") empata em especificidade (0,2,1) com a correção em .sidebar-accordion-item acima (mesma especificidade, ambos !important) e vence por ordem de carga (style.css depois de admin-brutal.css no de gerenciar.html, detalhe-liga.html e outras ~23 telas — confirmado via medição real: rgb(224,224,224) sobre rgb(255,255,255), contraste 1.14:1). Mesmo padrão de --app-border/--text-primary: remap direto na fonte elimina a dependência de ordem de cascata em vez de tentar vencer na especificidade seletor-a-seletor. Cobre de graça .liga-item/ .liga-details (style.css:336,368, mesmas variáveis, mesmo !important). */ --sidebar-text: var(--admin-brutal-fg); --sidebar-text-muted: var(--admin-brutal-muted); } body.admin-brutal * { border-radius: 0 !important; } /* box-shadow zerado por padrão, MAS preservando :focus-visible — a regra anterior (`* { box-shadow: none !important }`) matava o outline de foco de teclado implementado via box-shadow em vários componentes (acessibilidade). */ body.admin-brutal *:not(:focus-visible) { box-shadow: none !important; } body.admin-brutal *:focus-visible { outline: 2px solid var(--admin-brutal-accent); outline-offset: 2px; } /* FIX (review final, Important 3): `body.admin-brutal *` NÃO casa ::before/::after (pseudo-elemento não é filho real do DOM que `*` percorre) — os 2 blankets acima nunca alcançaram os pseudo-elementos. Levantamento contou 20 regras de ::before/::after com border-radius não-zero e 4 com box-shadow no CSS carregado pelo admin; 12 já tinham sido neutralizadas à mão ao longo do rollout (comentários espalhados confirmam caso a caso), 8 não. Fecha a classe inteira de uma vez, no mesmo espírito dos 2 blankets acima. EXCEÇÃO: `.loading::after` (spinner circular, ver regra logo abaixo) precisa de border-radius:50% deliberado — teria virado quadrado com este blanket; override explícito dela agora usa `!important` para vencer este blanket. */ body.admin-brutal *::before, body.admin-brutal *::after { border-radius: 0 !important; box-shadow: none !important; } /* ---- Fundo do shell (app-container / app-main) ---- style.css:85-89 pinta .app-container com --bg-primary (#0a0a0a, escuro) sem nenhuma condição de tema — precisa ser sobrescrito aqui senão o tema claro do admin-brutal mostra texto escuro sobre fundo escuro. !important necessário APENAS em .app-main: ele também carrega a classe .dashboard-redesign, cuja regra em dashboard-redesign.css:9-10 já usa "background: var(--surface-bg) !important" (--surface-bg: #121212, _admin-tokens.css:30, sem variante clara) — sem !important aqui, perdemos para aquele !important existente. .app-container não tem !important concorrente, então especificidade normal já resolve. */ body.admin-brutal .app-container { background: var(--admin-brutal-bg); } body.admin-brutal .app-main { background: var(--admin-brutal-bg) !important; } /* .page-content é filho direto de .app-main.dashboard-redesign e tem SUA PRÓPRIA regra "background: var(--surface-bg) !important" em dashboard-redesign.css:14-15 — cobre 100% da área visível por cima do fix acima. Sem isto, o fundo escuro reaparece embaixo das seções que a Task 3 deixou transparent (dashboard-header, quick-actions-section etc.), reproduzindo o mesmo bug de contraste. */ body.admin-brutal .page-content { background: var(--admin-brutal-bg) !important; } /* ---- Sidebar shell ---- */ /* !important necessário: dashboard-redesign.css define background/border-right/box-shadow com !important no mesmo seletor (linhas ~1160-1173) — sem isso nossa regra (embora mais específica) perde para o !important existente. Não alteramos o arquivo original. */ body.admin-brutal .app-sidebar.sidebar-redesign { background: var(--admin-brutal-bg) !important; border-right: 3px solid var(--admin-brutal-border) !important; box-shadow: none !important; } body.admin-brutal .sidebar-logo-new { border-bottom: 2px solid var(--admin-brutal-border); background: transparent; } body.admin-brutal .sidebar-logo-new h1, body.admin-brutal .sidebar-logo-new p { color: var(--admin-brutal-fg); font-family: var(--admin-brutal-font-sys); } /* dashboard-redesign.css:1303 pinta o "Cartola" de laranja fixo — a regra é sobre o (não herdada do h1), então o color acima no h1 não basta; precisa sobrescrever o próprio span. */ body.admin-brutal .sidebar-logo-text h1 span { color: var(--admin-brutal-fg); } body.admin-brutal .sidebar-logo-icon { background: var(--admin-brutal-accent); color: var(--admin-brutal-accent-ink); border-radius: 0; } body.admin-brutal .sidebar-toggle-btn { background: var(--admin-brutal-bg); border: 2px solid var(--admin-brutal-border); color: var(--admin-brutal-fg); } /* FIX (review final, Important 3): tooltip do sidebar colapsado (dashboard-redesign.css:1237-1250, ::after com `content: attr(data- tooltip)`) usa `color: #e5e7eb` e `border: 1px solid #333` hardcoded, sem variante de tema — legível só por acaso no escuro, ilegível/ invertido no claro. `background: var(--surface-card)` já remapeado de graça (bloco raiz). box-shadow/border-radius já zerados pelo blanket novo de pseudo-elemento (nenhum !important na fonte). Presente nas 21 telas com sidebar colapsável. */ body.admin-brutal .app-sidebar.sidebar-collapsed .sidebar-accordion-header:hover::after, body.admin-brutal .app-sidebar.sidebar-collapsed .sidebar-menu-item:hover::after { color: var(--admin-brutal-fg); border-color: var(--admin-brutal-border); } /* color com !important: style.css define ".sidebar a, .sidebar a:link, .sidebar a:visited, .sidebar a:active { color: var(--sidebar-text) !important }" — .sidebar-menu-item é dentro de