/* ============================================================ custom.css — Microvil | Chatwoot v4.16.1 — SKIN "MASTER CHAT" Visual alvo: Master Chat Soluções (Whaticket dark) — sidebar única preta com seções Gerência/Administração, topbar de saudação, tema quase-preto, acento teal, badges vermelhos. Injetado via nginx sub_filter; pares com custom.js (que monta #mv-topbar, #mv-menu e renomeia abas). Tokens validados contra _next-colors.scss v4.16.1. Dark = classe .dark no . CLARO (19/10, "volta o claro, completo"): cada regra com cor fixa pensada pro escuro ganhou ao lado a sua versão em body:not(.dark) (ou :not(.dark *)) — WhatsApp Web claro: fundo #f0f2f5/#fff, texto #111b21/#54656f, acento teal. As regras do escuro não foram tocadas: o escuro continua igual, e o claro só vale sem .dark no . ============================================================ */ /* ── 1. TOKENS DARK QUASE-PRETO (Tier 1+2, cobrem ~95% da UI) ── */ .dark { --background-color: 11 11 13; /* #0b0b0d — app, sidebar, páginas */ --surface-1: 13 13 16; /* lista de conversas + área do chat */ --surface-2: 19 19 22; --solid-1: 19 19 22; /* #131316 — replybox, inputs, cards */ --solid-2: 19 19 22; /* cartões CardLayout, tooltips */ --solid-3: 31 31 35; --solid-active: 38 38 44; --surface-active: 38 38 44; --card-color: 19 19 22; --alpha-3: 19, 19, 22, 0.97; /* popovers/modais/dropdowns */ --alpha-1: 24, 24, 28, 0.85; --button-color: 26 26 30; --label-background: 26 26 30; --border-weak: 30 30 35; --border-strong: 44 44 50; --slate-1: 13 13 15; --slate-2: 19 19 22; /* conversa selecionada */ --slate-3: 26 26 30; --slate-4: 32 32 37; --slate-5: 40 40 46; } /* ── 2. ACENTO TEAL (estilo Master Chat) no lugar do azul #2781F6 compilado (n-brand é hex fixo no build — só se troca por classe) ── */ :root { --mv-teal: #12A594; /* botões/acento (≈ teal-9 nativo) */ --mv-teal-hover: #0E9384; --mv-teal-texto: #2CD3BA; /* títulos/aba ativa no dark */ --mv-vermelho: #E92A31; /* badges Microvil */ --mv-verde-wa: #25D366; /* WhatsApp */ } /* claro: os tons que só leem bem no preto escurecem (#2CD3BA e #25D366 no branco ficam abaixo de 2:1 de contraste). O :not(.dark *) cobre as telas de login (/app/login, v3), que põem o .dark no e não no : sem ele a variável clara herdava pro escuro de lá (botões link/faded do MFA) */ body:not(.dark):not(.dark *) { --mv-teal-texto: #0B7A6E; /* mesmo teal do acento, mais fechado: 5,2:1 no branco */ --mv-verde-wa: #169445; /* verde WhatsApp mais fechado: 3,2:1+ nos chips claros */ } .bg-n-brand { background-color: var(--mv-teal) !important; } .after\:bg-n-brand::after { background-color: var(--mv-teal) !important; } .text-n-brand, .hover\:text-n-brand:hover, .group-hover\:text-n-brand { color: var(--mv-teal) !important; } .border-n-brand, .checked\:border-n-brand:checked, .focus\:border-n-brand:focus { border-color: var(--mv-teal) !important; } .checked\:bg-n-brand:checked, .indeterminate\:bg-n-brand:indeterminate { background-color: var(--mv-teal) !important; } .outline-n-brand, .focus\:outline-n-brand:focus, .focus-within\:outline-n-brand:focus-within, .focus-visible\:outline-n-brand:focus-visible { outline-color: var(--mv-teal) !important; } .ring-n-brand, .focus\:ring-n-brand:focus { --tw-ring-color: var(--mv-teal) !important; } .bg-n-brand\/5:not(.dark *) { background-color: rgb(18 165 148 / 0.05) !important; } .bg-n-brand\/10, .hover\:bg-n-brand\/10:hover { background-color: rgb(18 165 148 / 0.1) !important; } .hover\:bg-n-brand\/80:hover { background-color: rgb(18 165 148 / 0.8) !important; } .hover\:bg-n-brand\/90:hover { background-color: var(--mv-teal-hover) !important; } /* links/realces azuis do dark viram teal (aba ativa, botões faded…) */ .dark .text-n-blue-11 { color: var(--mv-teal-texto) !important; } .dark .bg-n-blue-3 { background-color: rgb(18 165 148 / 0.18) !important; } /* claro: o mesmo troca-azul-por-teal (sem isso a aba ativa e os botões faded/ outline/link ficavam com texto azul ao lado do sublinhado/fundo teal). :not(.dark *) = mesmo peso das duas regras acima, então os badges vermelhos da seção 5 continuam ganhando, como no escuro */ .text-n-blue-11:not(.dark *) { color: var(--mv-teal-texto) !important; } .bg-n-blue-3:not(.dark *) { background-color: rgb(18 165 148 / 0.12) !important; } /* Títulos de página em teal (Relatórios, Contatos, Configurações…) — h1 via CSS; headings de outras tags o custom.js pinta com --mv-titulo */ :root { --mv-titulo: #0E9384; } .dark { --mv-titulo: #2CD3BA; } main h1, main span.text-heading-1, main span.text-xl.font-medium.truncate { color: var(--mv-titulo) !important; } /* ── 3. SIDEBAR: esconde o menu nativo — o custom.js monta o #mv-menu no lugar (mesma