/*
 * Modo escuro do Chat Simples (tema Claro / Escuro / Sistema).
 *
 * CSS PURO, fora do Tailwind: o admin-tailwind.css versionado não tem variante
 * `dark:` e rebuild é proibido sem autorização (HR-016). Mesmo caminho do
 * white-label e do wtk-components.css: sobrescrever as utilidades por CSS.
 *
 * REGRA DE OURO: toda regra que muda cor está sob html[data-wtk-theme="dark"].
 * No tema claro nada aqui vale — o app fica byte a byte igual ao de antes
 * (o teste tests/js/wtk-theme-css.test.js trava isso).
 *
 * O atributo é gravado no <html> pelo script anti-piscar do <head>
 * (Standalone::print_theme_boot_script) e depois pelo window.WtkTheme.
 *
 * Doc: docs/IMPLEMENTACOES/MODO-ESCURO-TEMA-CLARO-ESCURO-SISTEMA.md
 */

/* ---------------------------------------------------------------------------
 * Tokens. Fundos/bordas/textos em tripla RGB para respeitar as utilidades de
 * opacidade do Tailwind (bg-opacity-*, que mexem em --tw-bg-opacity).
 * Os valores do :root são os de hoje; só o escuro os redefine.
 * ------------------------------------------------------------------------- */
:root {
	--wtk-bg-app-rgb: 243 244 246;
	--wtk-bg-surface-rgb: 255 255 255;
	--wtk-bg-subtle-rgb: 249 250 251;
	--wtk-bg-muted-rgb: 229 231 235;
	--wtk-bg-strong-rgb: 209 213 219;
	--wtk-border-rgb: 209 213 219;
	--wtk-border-soft-rgb: 229 231 235;
	--wtk-border-strong-rgb: 156 163 175;
	--wtk-text-rgb: 17 24 39;
	--wtk-text-body-rgb: 55 65 81;
	--wtk-text-muted-rgb: 107 114 128;
	--wtk-bubble-out: #dcf8c6;
	--wtk-bubble-in: #ffffff;
	--wtk-chat-wallpaper: #ece5dd;
	--wtk-note-bg: #fefce8;
	--wtk-note-border: #fde68a;
	--wtk-note-title: #a16207;
	--wtk-note-meta: #ca8a04;
	--wtk-note-text: #713f12;
	--wtk-quote-bg: #eff6ff;
	--wtk-quote-text: #1d4ed8;
	--wtk-canvas-dot: #d1d5db;
	--wtk-overlay-soft: rgba(0, 0, 0, 0.04);
	--wtk-scroll-track: #f1f1f1;
	--wtk-scroll-thumb: #c1c1c1;
	/* Cor da marca em RGB com vírgulas (mesmo formato do white-label, que redefine quando há cor própria). */
	--wtk-500-rgb: 34, 197, 94;
}

html[data-wtk-theme="dark"] {
	color-scheme: dark;
	--wtk-bg-app-rgb: 11 20 26;
	--wtk-bg-surface-rgb: 17 27 33;
	--wtk-bg-subtle-rgb: 26 35 41;
	--wtk-bg-muted-rgb: 32 44 51;
	--wtk-bg-strong-rgb: 42 57 66;
	--wtk-border-rgb: 42 57 66;
	--wtk-border-soft-rgb: 34 46 53;
	--wtk-border-strong-rgb: 59 74 84;
	--wtk-text-rgb: 233 237 239;
	--wtk-text-body-rgb: 209 215 219;
	--wtk-text-muted-rgb: 134 150 160;
	--wtk-bubble-out: var(--wtk-800, #005c4b);
	--wtk-bubble-in: #202c33;
	--wtk-chat-wallpaper: #0b141a;
	--wtk-note-bg: #3d3418;
	--wtk-note-border: #5c4d1c;
	--wtk-note-title: #fcd34d;
	--wtk-note-meta: #facc15;
	--wtk-note-text: #fef3c7;
	--wtk-quote-bg: #1a2a3a;
	--wtk-quote-text: #93c5fd;
	--wtk-canvas-dot: #2a3942;
	--wtk-overlay-soft: rgba(255, 255, 255, 0.04);
	--wtk-scroll-track: #111b21;
	--wtk-scroll-thumb: #3b4a54;
}

/* ---------------------------------------------------------------------------
 * Página: o admin_head do app força `body, #wpwrap { background:#fff !important }`
 * (Standalone::hide_admin_elements) — por isso o !important aqui.
 * ------------------------------------------------------------------------- */
html[data-wtk-theme="dark"],
html[data-wtk-theme="dark"] body,
html[data-wtk-theme="dark"] #wpwrap,
html[data-wtk-theme="dark"] #wpcontent,
html[data-wtk-theme="dark"] #wpbody,
html[data-wtk-theme="dark"] #wpbody-content {
	background-color: rgb(var(--wtk-bg-app-rgb)) !important;
	color: rgb(var(--wtk-text-body-rgb));
}

/* Splash de boot: primeira coisa pintada — tem de nascer escura. */
html[data-wtk-theme="dark"] #wtkBootSplash {
	background-color: rgb(var(--wtk-bg-app-rgb));
}
html[data-wtk-theme="dark"] .wtk-boot-splash-spinner {
	border-color: rgb(var(--wtk-border-rgb));
	border-top-color: var(--wtk-boot-spinner-color, #128C7E);
}
html[data-wtk-theme="dark"] .wtk-boot-splash-error {
	color: rgb(var(--wtk-text-body-rgb));
}

/* ---------------------------------------------------------------------------
 * Utilidades neutras do Tailwind. Especificidade (0,2,1) vence a utilidade
 * (0,1,0) sem !important. `hover:bg-white` NÃO entra: é o hover dos ícones
 * do cabeçalho na cor da marca, que continua igual no escuro.
 * ------------------------------------------------------------------------- */
html[data-wtk-theme="dark"] .bg-white { background-color: rgb(var(--wtk-bg-surface-rgb) / var(--tw-bg-opacity, 1)); }
html[data-wtk-theme="dark"] .bg-gray-50 { background-color: rgb(var(--wtk-bg-subtle-rgb) / var(--tw-bg-opacity, 1)); }
html[data-wtk-theme="dark"] .bg-gray-100 { background-color: rgb(var(--wtk-bg-app-rgb) / var(--tw-bg-opacity, 1)); }
html[data-wtk-theme="dark"] .bg-gray-200 { background-color: rgb(var(--wtk-bg-muted-rgb) / var(--tw-bg-opacity, 1)); }
html[data-wtk-theme="dark"] .hover\:bg-gray-50:hover { background-color: rgb(var(--wtk-bg-subtle-rgb)); }
html[data-wtk-theme="dark"] .hover\:bg-gray-100:hover { background-color: rgb(var(--wtk-bg-muted-rgb)); }
html[data-wtk-theme="dark"] .hover\:bg-gray-200:hover { background-color: rgb(var(--wtk-bg-strong-rgb)); }
html[data-wtk-theme="dark"] .hover\:bg-gray-300:hover { background-color: rgb(var(--wtk-border-strong-rgb)); }
html[data-wtk-theme="dark"] .focus\:bg-gray-50:focus { background-color: rgb(var(--wtk-bg-subtle-rgb)); }

html[data-wtk-theme="dark"] .text-gray-900,
html[data-wtk-theme="dark"] .text-gray-800 { color: rgb(var(--wtk-text-rgb) / var(--tw-text-opacity, 1)); }
html[data-wtk-theme="dark"] .text-gray-700,
html[data-wtk-theme="dark"] .text-gray-600 { color: rgb(var(--wtk-text-body-rgb) / var(--tw-text-opacity, 1)); }
html[data-wtk-theme="dark"] .text-gray-500,
html[data-wtk-theme="dark"] .text-gray-400 { color: rgb(var(--wtk-text-muted-rgb) / var(--tw-text-opacity, 1)); }
html[data-wtk-theme="dark"] .text-slate-600 { color: rgb(var(--wtk-text-body-rgb)); }
html[data-wtk-theme="dark"] .hover\:text-gray-900:hover,
html[data-wtk-theme="dark"] .hover\:text-gray-800:hover { color: rgb(var(--wtk-text-rgb)); }
html[data-wtk-theme="dark"] .hover\:text-gray-700:hover,
html[data-wtk-theme="dark"] .hover\:text-gray-600:hover,
html[data-wtk-theme="dark"] .group:hover .group-hover\:text-gray-700 { color: rgb(var(--wtk-text-body-rgb)); }
html[data-wtk-theme="dark"] .placeholder-gray-400::placeholder { color: rgb(var(--wtk-text-muted-rgb)); }

html[data-wtk-theme="dark"] .border-gray-100,
html[data-wtk-theme="dark"] .border-gray-200 { border-color: rgb(var(--wtk-border-soft-rgb) / var(--tw-border-opacity, 1)); }
html[data-wtk-theme="dark"] .border-gray-300 { border-color: rgb(var(--wtk-border-rgb) / var(--tw-border-opacity, 1)); }
html[data-wtk-theme="dark"] .border-gray-400,
html[data-wtk-theme="dark"] .border-gray-500 { border-color: rgb(var(--wtk-border-strong-rgb) / var(--tw-border-opacity, 1)); }
html[data-wtk-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html[data-wtk-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--wtk-border-soft-rgb)); }

/* ---------------------------------------------------------------------------
 * Formulários. `body :where(...)` = (0,1,2): vence o forms.css do WordPress
 * (input[type=text], 0,1,1 — lição da v3.117.1) e perde para as utilidades
 * acima (0,2,1), então um campo com bg-gray-50 continua com o tom dele.
 * ------------------------------------------------------------------------- */
html[data-wtk-theme="dark"] body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
	background-color: rgb(var(--wtk-bg-surface-rgb));
	color: rgb(var(--wtk-text-rgb));
	border-color: rgb(var(--wtk-border-rgb));
}
/*
 * Select no hover/foco: o forms.css do WP tem `.wp-core-ui select:hover` e
 * `.wp-core-ui select:focus` (0,2,1) com color #1e1e1e — o texto ficava quase preto
 * sobre o fundo escuro até o campo perder o foco (relato do gestor no modal de
 * transferência). Aqui (0,3,3) vence. A seta do WP é #555 e também some: troca
 * pela mesma seta em tom claro.
 */
html[data-wtk-theme="dark"] body.wp-core-ui select,
html[data-wtk-theme="dark"] body.wp-core-ui select:hover,
html[data-wtk-theme="dark"] body.wp-core-ui select:focus {
	color: rgb(var(--wtk-text-rgb));
	background-color: rgb(var(--wtk-bg-surface-rgb));
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%238696a0%22%2F%3E%3C%2Fsvg%3E");
}
html[data-wtk-theme="dark"] body.wp-core-ui select:hover {
	border-color: rgb(var(--wtk-border-strong-rgb));
}
html[data-wtk-theme="dark"] body.wp-core-ui select option {
	background-color: rgb(var(--wtk-bg-surface-rgb));
	color: rgb(var(--wtk-text-rgb));
}
/* Checkbox/radio nativos: o forms.css do WP pinta `input[type=checkbox|radio]` de #fff
 * (0,1,1). O visto e a bolinha (::before do WP) continuam com a cor deles. */
html[data-wtk-theme="dark"] body input[type="checkbox"],
html[data-wtk-theme="dark"] body input[type="radio"] {
	background-color: rgb(var(--wtk-bg-surface-rgb));
	border-color: rgb(var(--wtk-border-strong-rgb));
}

html[data-wtk-theme="dark"] body :where(input, textarea)::placeholder {
	color: rgb(var(--wtk-text-muted-rgb));
}

/* ---------------------------------------------------------------------------
 * Chat: fundo da conversa, bolhas, nota interna, rolagem.
 * A bolha enviada é mirada pela CLASSE arbitrária — assim a do chat interno
 * (plugin irmão, mesma classe) herda sem regra própria.
 * ------------------------------------------------------------------------- */
html[data-wtk-theme="dark"] .chat-bg { background-color: var(--wtk-chat-wallpaper); }
/* Coluna da lista de tickets: cor arbitrária bg-[#f9f9f9] (achado da validação real). */
html[data-wtk-theme="dark"] .bg-\[\#f9f9f9\] { background-color: rgb(var(--wtk-bg-app-rgb)); }
html[data-wtk-theme="dark"] .bg-\[\#DCF8C6\] { background-color: var(--wtk-bubble-out); }
html[data-wtk-theme="dark"] .rounded-bl-none.bg-white { background-color: var(--wtk-bubble-in); }
html[data-wtk-theme="dark"] .wtk-media-placeholder { background: var(--wtk-overlay-soft); }
/* Hora, "Compartilhada", ícones da bolha ENVIADA: o cinza neutro (#8696a0) dá 2,6:1
 * sobre o verde escuro da bolha. Texto claro com alfa, como o WhatsApp (≥ 4,5:1).
 * Vale para o atendimento e para o chat interno (mesma classe). Achado na F3. */
html[data-wtk-theme="dark"] .bg-\[\#DCF8C6\] :is(.text-gray-400, .text-gray-500, .text-gray-600) {
	color: rgb(var(--wtk-text-rgb) / 0.78);
}

/* Nota interna: cores vêm em style="" inline (standalone.js) — por isso !important. */
html[data-wtk-theme="dark"] .wtk-note-bubble {
	background: var(--wtk-note-bg) !important;
	border-color: var(--wtk-note-border) !important;
	border-left-color: #facc15 !important;
}
html[data-wtk-theme="dark"] .wtk-note-title { color: var(--wtk-note-title) !important; }
html[data-wtk-theme="dark"] .wtk-note-meta { color: var(--wtk-note-meta) !important; }
html[data-wtk-theme="dark"] .wtk-note-text { color: var(--wtk-note-text) !important; }

/*
 * Selos de tag/conexão/fila: a cor vem do CADASTRO, inline em style="" (não dá
 * para enumerar). brightness(2.6) clareia texto, fundo translúcido e borda juntos
 * e mantém a cor: medido nas tags reais do dev, o pior caso (#682222) sobe de
 * 3,11 para 4,74:1. Limite aceito: uma tag cadastrada em preto puro continua escura.
 * O selo neutro (#f3f4f6, "Fora de fila") fica fora e ganha o tom neutro escuro.
 */
html[data-wtk-theme="dark"] span.rounded-full[style*="color:"][style*="border: 1px solid"]:not([style*="#f3f4f6"]):not([style*="#eef2ff"]):not([style*="#fef3c7"]),
html[data-wtk-theme="dark"] span.rounded-full[style*="background-color: rgba("][style*="; color:"] {
	filter: brightness(2.6);
}
html[data-wtk-theme="dark"] span.rounded-full[style*="background-color: #f3f4f6"] {
	background-color: rgb(var(--wtk-bg-muted-rgb)) !important;
	color: rgb(var(--wtk-text-muted-rgb)) !important;
	border-color: rgb(var(--wtk-border-rgb)) !important;
}
/* Selos "Grupo (fora de fila)" e "Lead" do cabeçalho do chat (buildContactBadges): fundo
 * claro e OPACO inline (#eef2ff / #fef3c7). O brightness(2.6) acima os deixava brancos —
 * relato do gestor ao abrir um grupo pelo Kanban (v3.133.2). Saem do filtro e ganham o
 * tom escuro translúcido da própria cor, com texto claro dela. */
html[data-wtk-theme="dark"] span.rounded-full[style*="background-color: #eef2ff"] {
	background-color: rgba(99, 102, 241, 0.18) !important;
	color: #a5b4fc !important;
	border-color: rgba(165, 180, 252, 0.35) !important;
}
html[data-wtk-theme="dark"] span.rounded-full[style*="background-color: #fef3c7"] {
	background-color: rgba(245, 158, 11, 0.18) !important;
	color: #fcd34d !important;
	border-color: rgba(252, 211, 77, 0.35) !important;
}

/* Data do card da lista (formatTicketTime, cor inline por dia): roxo e anil ficam
 * abaixo de 4,5:1 sobre o fundo escuro — ganham o tom claro da mesma cor. As outras
 * quatro cores da paleta já passam. Vale para o atendimento e o chat interno. */
html[data-wtk-theme="dark"] span[style*="color: #a855f7"] { color: #c084fc !important; }
html[data-wtk-theme="dark"] span[style*="color: #6366f1"] { color: #a5b4fc !important; }

/* Modo nota interna: contador "N notas", faixa acima do composer e o próprio
 * composer quando a nota está ativa — cores inline (template e standalone.js). */
html[data-wtk-theme="dark"] #internalNotesCount {
	background: var(--wtk-note-bg) !important;
	color: var(--wtk-note-meta) !important;
}
html[data-wtk-theme="dark"] #internalNoteBanner {
	background: var(--wtk-note-bg) !important;
	color: var(--wtk-note-text) !important;
	border-color: var(--wtk-note-border) !important;
}
html[data-wtk-theme="dark"] #normalComposerArea[style*="background-color"] {
	background-color: var(--wtk-note-bg) !important;
}

/* Modal "Espionar" (ModalEspionarTicket.js): o papel de parede da conversa vem
 * em style="" inline (#ede7df) — por isso !important. Bolhas e moldura já usam
 * classes cobertas acima (.bg-white, .rounded-bl-none.bg-white, .bg-[#DCF8C6]). */
html[data-wtk-theme="dark"] [data-spy-modal-scroll] {
	background-color: var(--wtk-chat-wallpaper) !important;
}

/* Faixa do fluxo em execução/pausado/erro: o tom claro do status vem inline; no
 * escuro o fundo fica neutro e a borda (verde/âmbar/vermelha) segue indicando o status. */
html[data-wtk-theme="dark"] #flowExecutionBanner {
	background: rgb(var(--wtk-bg-subtle-rgb)) !important;
}

/* Selo "Fluxo" do cabeçalho do chat (style inline em standalone.js). */
html[data-wtk-theme="dark"] .wtk-flow-badge {
	background: rgb(139 92 246 / 0.18) !important;
	border-color: rgb(139 92 246 / 0.4) !important;
	color: #c4b5fd !important;
}

html[data-wtk-theme="dark"] .scrollbar-thin::-webkit-scrollbar-track { background: var(--wtk-scroll-track); }
html[data-wtk-theme="dark"] .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--wtk-scroll-thumb); }

/* Chave do menu de som: trilho cinza-claro some no escuro. */
html[data-wtk-theme="dark"] .wtk-toggle-slider { background-color: rgb(var(--wtk-border-strong-rgb)); }
html[data-wtk-theme="dark"] .wtk-toggle-switch input:checked + .wtk-toggle-slider { background-color: #16a34a; }

/* ---------------------------------------------------------------------------
 * Cor da marca (verde padrão ou a do white-label). Destaques (-500…-900) e o
 * cabeçalho mantêm a marca. Os tons CLAROS de fundo (-50/-100/-200) viram a
 * marca com alfa. O white-label usa !important nessas classes — daí o
 * !important com especificidade maior aqui. --wtk-500-rgb/--wtk-300 vêm do
 * white-label quando há cor própria; senão valem os defaults do :root.
 * ------------------------------------------------------------------------- */
html[data-wtk-theme="dark"] .bg-green-50,
html[data-wtk-theme="dark"] .hover\:bg-green-50:hover { background-color: rgba(var(--wtk-500-rgb), 0.12) !important; }
/* Ticket selecionado na lista: variante !bg-green-50 (já com !important no Tailwind). */
html[data-wtk-theme="dark"] .\!bg-green-50 { background-color: rgba(var(--wtk-500-rgb), 0.18) !important; }
html[data-wtk-theme="dark"] .bg-green-100,
html[data-wtk-theme="dark"] .disabled\:bg-green-100:disabled { background-color: rgba(var(--wtk-500-rgb), 0.18) !important; }
html[data-wtk-theme="dark"] .bg-green-200 { background-color: rgba(var(--wtk-500-rgb), 0.26) !important; }
html[data-wtk-theme="dark"] .border-green-200,
html[data-wtk-theme="dark"] .disabled\:border-green-200:disabled { border-color: rgba(var(--wtk-500-rgb), 0.4) !important; }
html[data-wtk-theme="dark"] .text-green-600,
html[data-wtk-theme="dark"] .text-green-700,
html[data-wtk-theme="dark"] .hover\:text-green-700:hover,
html[data-wtk-theme="dark"] .disabled\:text-green-600:disabled,
html[data-wtk-theme="dark"] .group:hover .group-hover\:text-green-600 { color: var(--wtk-300, #86efac) !important; }
html[data-wtk-theme="dark"] .text-green-800,
html[data-wtk-theme="dark"] .hover\:text-green-900:hover { color: var(--wtk-200, #bbf7d0) !important; }

/* ---------------------------------------------------------------------------
 * Demais cores: fundos claros (-50/-100/-200) viram a cor com alfa; bordas
 * claras ganham alfa; textos escuros (-600…-900) vão para o tom claro.
 * Lista gerada da varredura do markup, só com classes que existem no
 * admin-tailwind.css (classe purgada seria regra morta).
 * ------------------------------------------------------------------------- */
/* red */
html[data-wtk-theme="dark"] .bg-red-50 { background-color: rgb(239 68 68 / 0.12); }
html[data-wtk-theme="dark"] .hover\:bg-red-50:hover { background-color: rgb(239 68 68 / 0.12); }
html[data-wtk-theme="dark"] .bg-red-100 { background-color: rgb(239 68 68 / 0.18); }
html[data-wtk-theme="dark"] .bg-red-200 { background-color: rgb(239 68 68 / 0.26); }
html[data-wtk-theme="dark"] .hover\:bg-red-200:hover { background-color: rgb(239 68 68 / 0.26); }
html[data-wtk-theme="dark"] .border-red-200 { border-color: rgb(239 68 68 / .4); }
html[data-wtk-theme="dark"] .hover\:border-red-200:hover { border-color: rgb(239 68 68 / .4); }
html[data-wtk-theme="dark"] .text-red-600 { color: #fca5a5; }
html[data-wtk-theme="dark"] .hover\:text-red-600:hover { color: #fca5a5; }
html[data-wtk-theme="dark"] .text-red-700 { color: #fca5a5; }
html[data-wtk-theme="dark"] .hover\:text-red-700:hover { color: #fca5a5; }
html[data-wtk-theme="dark"] .text-red-800 { color: #fecaca; }
/* amber */
html[data-wtk-theme="dark"] .bg-amber-50 { background-color: rgb(245 158 11 / 0.12); }
html[data-wtk-theme="dark"] .bg-amber-100 { background-color: rgb(245 158 11 / 0.18); }
html[data-wtk-theme="dark"] .border-amber-100 { border-color: rgb(245 158 11 / .4); }
html[data-wtk-theme="dark"] .border-amber-200 { border-color: rgb(245 158 11 / .4); }
html[data-wtk-theme="dark"] .text-amber-600 { color: #fcd34d; }
html[data-wtk-theme="dark"] .text-amber-700 { color: #fcd34d; }
/* yellow */
html[data-wtk-theme="dark"] .bg-yellow-200 { background-color: rgb(234 179 8 / 0.26); }
html[data-wtk-theme="dark"] .text-yellow-800 { color: #fef08a; }
/* emerald */
html[data-wtk-theme="dark"] .bg-emerald-50 { background-color: rgb(16 185 129 / 0.12); }
html[data-wtk-theme="dark"] .bg-emerald-100 { background-color: rgb(16 185 129 / 0.18); }
html[data-wtk-theme="dark"] .hover\:bg-emerald-100:hover { background-color: rgb(16 185 129 / 0.18); }
html[data-wtk-theme="dark"] .hover\:bg-emerald-200:hover { background-color: rgb(16 185 129 / 0.26); }
html[data-wtk-theme="dark"] .border-emerald-200 { border-color: rgb(16 185 129 / .4); }
html[data-wtk-theme="dark"] .hover\:border-emerald-200:hover { border-color: rgb(16 185 129 / .4); }
html[data-wtk-theme="dark"] .text-emerald-600 { color: #6ee7b7; }
html[data-wtk-theme="dark"] .hover\:text-emerald-600:hover { color: #6ee7b7; }
html[data-wtk-theme="dark"] .text-emerald-700 { color: #6ee7b7; }
html[data-wtk-theme="dark"] .hover\:text-emerald-700:hover { color: #6ee7b7; }
html[data-wtk-theme="dark"] .text-emerald-900 { color: #a7f3d0; }
/* blue */
html[data-wtk-theme="dark"] .bg-blue-50 { background-color: rgb(59 130 246 / 0.12); }
html[data-wtk-theme="dark"] .hover\:bg-blue-50:hover { background-color: rgb(59 130 246 / 0.12); }
html[data-wtk-theme="dark"] .bg-blue-100 { background-color: rgb(59 130 246 / 0.18); }
html[data-wtk-theme="dark"] .bg-blue-200 { background-color: rgb(59 130 246 / 0.26); }
html[data-wtk-theme="dark"] .hover\:bg-blue-200:hover { background-color: rgb(59 130 246 / 0.26); }
html[data-wtk-theme="dark"] .border-blue-200 { border-color: rgb(59 130 246 / .4); }
html[data-wtk-theme="dark"] .text-blue-600 { color: #93c5fd; }
html[data-wtk-theme="dark"] .text-blue-700 { color: #93c5fd; }
html[data-wtk-theme="dark"] .text-blue-800 { color: #bfdbfe; }
html[data-wtk-theme="dark"] .text-blue-900 { color: #bfdbfe; }
/* indigo */
html[data-wtk-theme="dark"] .bg-indigo-100 { background-color: rgb(99 102 241 / 0.18); }
html[data-wtk-theme="dark"] .bg-indigo-200 { background-color: rgb(99 102 241 / 0.26); }
html[data-wtk-theme="dark"] .border-indigo-200 { border-color: rgb(99 102 241 / .4); }
html[data-wtk-theme="dark"] .text-indigo-700 { color: #a5b4fc; }
html[data-wtk-theme="dark"] .text-indigo-800 { color: #c7d2fe; }
/* purple */
html[data-wtk-theme="dark"] .bg-purple-100 { background-color: rgb(168 85 247 / 0.18); }
html[data-wtk-theme="dark"] .bg-purple-200 { background-color: rgb(168 85 247 / 0.26); }
html[data-wtk-theme="dark"] .border-purple-200 { border-color: rgb(168 85 247 / .4); }
html[data-wtk-theme="dark"] .text-purple-700 { color: #d8b4fe; }
html[data-wtk-theme="dark"] .text-purple-800 { color: #e9d5ff; }
/* sky */
html[data-wtk-theme="dark"] .bg-sky-50 { background-color: rgb(14 165 233 / 0.12); }
html[data-wtk-theme="dark"] .bg-sky-100 { background-color: rgb(14 165 233 / 0.18); }
html[data-wtk-theme="dark"] .border-sky-200 { border-color: rgb(14 165 233 / .4); }
html[data-wtk-theme="dark"] .text-sky-700 { color: #7dd3fc; }
/* rose */
html[data-wtk-theme="dark"] .bg-rose-50 { background-color: rgb(244 63 94 / 0.12); }
html[data-wtk-theme="dark"] .bg-rose-100 { background-color: rgb(244 63 94 / 0.18); }
html[data-wtk-theme="dark"] .border-rose-200 { border-color: rgb(244 63 94 / .4); }
html[data-wtk-theme="dark"] .text-rose-600 { color: #fda4af; }
html[data-wtk-theme="dark"] .text-rose-700 { color: #fda4af; }
/* pink */
html[data-wtk-theme="dark"] .bg-pink-200 { background-color: rgb(236 72 153 / 0.26); }
html[data-wtk-theme="dark"] .text-pink-800 { color: #fbcfe8; }
/* orange */
html[data-wtk-theme="dark"] .bg-orange-200 { background-color: rgb(249 115 22 / 0.26); }
html[data-wtk-theme="dark"] .group:hover .group-hover\:text-orange-600 { color: #fdba74; }
html[data-wtk-theme="dark"] .text-orange-800 { color: #fed7aa; }
/* teal */
html[data-wtk-theme="dark"] .bg-teal-200 { background-color: rgb(20 184 166 / 0.26); }
html[data-wtk-theme="dark"] .text-teal-800 { color: #99f6e4; }
/* cyan */
html[data-wtk-theme="dark"] .bg-cyan-200 { background-color: rgb(6 182 212 / 0.26); }
html[data-wtk-theme="dark"] .text-cyan-800 { color: #a5f3fc; }

/* ===========================================================================
 * FASE 2 (v3.130.0) — telas da SPA além de Atendimentos. Levantamento medido
 * por detector na página: spec §4.4. Os CSS dos módulos não mudam; as regras
 * escuras ficam aqui, sob o atributo, com especificidade maior.
 * ======================================================================== */

/* Família stone (selos da tela OpenAI) — só as classes existentes no CSS versionado. */
html[data-wtk-theme="dark"] .bg-stone-100 { background-color: rgb(120 113 108 / 0.2); }
html[data-wtk-theme="dark"] .border-stone-200 { border-color: rgb(120 113 108 / 0.4); }
html[data-wtk-theme="dark"] .text-stone-700 { color: #d6d3d1; }

/* Chave desligada (wtk-components.css): trilho #d1d5db some no escuro.
 * O estado ligado (`.wtk-switch-input:checked + .wtk-switch`, 0,3,0) continua vencendo. */
html[data-wtk-theme="dark"] .wtk-switch { background-color: rgb(var(--wtk-border-strong-rgb)); }

/* Cartão de opção escolhido (wtk-components.css: #ecfdf5 + #047857). */
html[data-wtk-theme="dark"] .wtk-choice-input:checked + .wtk-choice {
	background-color: rgb(16 185 129 / 0.16);
	color: #6ee7b7;
}

/* Dashboard: o shell traz `background: var(--wtk-dashboard-bg, #f9fafb) !important` inline.
 * Um !important de style="" vence qualquer folha de estilo — por isso a cor vem por
 * variável (o claro continua #f9fafb pelo fallback). */
html[data-wtk-theme="dark"] .wtk-dashboard-shell { --wtk-dashboard-bg: rgb(var(--wtk-bg-app-rgb)); }
html[data-wtk-theme="dark"] .wtk-tip-badge { background: rgb(var(--wtk-bg-muted-rgb)); color: rgb(var(--wtk-text-muted-rgb)); }

/* Conexões (admin/js/spa/modules/conexoes.css). */
html[data-wtk-theme="dark"] .wtk-conexoes-shell { background-color: rgb(var(--wtk-bg-app-rgb)); }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-table-container {
	background: rgb(var(--wtk-bg-surface-rgb));
	border-color: rgb(var(--wtk-border-soft-rgb));
}
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-table thead { background: rgb(var(--wtk-bg-subtle-rgb)); }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-table th {
	color: rgb(var(--wtk-text-muted-rgb));
	border-bottom-color: rgb(var(--wtk-border-soft-rgb));
}
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-table tbody tr { background: rgb(var(--wtk-bg-surface-rgb)); }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-table tbody tr:nth-child(even) { background: rgb(var(--wtk-bg-subtle-rgb)); }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-table td {
	color: rgb(var(--wtk-text-body-rgb));
	border-bottom-color: rgb(var(--wtk-border-soft-rgb));
}
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-status--emerald,
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-pill--emerald { background: rgb(16 185 129 / 0.16); border-color: rgb(16 185 129 / 0.4); color: #6ee7b7; }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-status--sky,
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-pill--sky { background: rgb(14 165 233 / 0.16); border-color: rgb(14 165 233 / 0.4); color: #7dd3fc; }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-status--amber { background: rgb(245 158 11 / 0.16); border-color: rgb(245 158 11 / 0.4); color: #fcd34d; }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-status--rose,
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-pill--rose { background: rgb(244 63 94 / 0.16); border-color: rgb(244 63 94 / 0.4); color: #fda4af; }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-status--stone,
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-status--gray,
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-pill--gray {
	background: rgb(var(--wtk-bg-muted-rgb));
	border-color: rgb(var(--wtk-border-rgb));
	color: rgb(var(--wtk-text-body-rgb));
}
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-action { color: rgb(var(--wtk-text-muted-rgb)); }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-action:hover { background-color: rgb(var(--wtk-bg-muted-rgb)); color: rgb(var(--wtk-text-rgb)); }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-action--success { color: #34d399; border-color: rgb(16 185 129 / 0.35); }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-action--warning { color: #fbbf24; border-color: rgb(245 158 11 / 0.35); }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-action--danger { color: #f87171; border-color: rgb(239 68 68 / 0.35); }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-action--info { color: #60a5fa; border-color: rgb(59 130 246 / 0.35); }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-action--success:hover,
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-action--warning:hover,
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-action--danger:hover,
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-action--info:hover { background-color: rgb(var(--wtk-bg-muted-rgb)); }
html[data-wtk-theme="dark"] .wtk-conexoes-shell .wtk-conexoes-default-badge {
	background: rgb(34 197 94 / 0.18);
	color: #86efac;
}

/* Selos inline da lista de Conexões (style="" — por isso !important). */
html[data-wtk-theme="dark"] [data-app-secret-warning],
html[data-wtk-theme="dark"] [data-anti-ban-badge] { background: rgb(245 158 11 / 0.18) !important; color: #fcd34d !important; }
html[data-wtk-theme="dark"] [data-coexistence-badge] { background: rgb(99 102 241 / 0.2) !important; color: #c7d2fe !important; }

/* Calendário de Agendamentos: Mês/Semana (<style> do template e agendamentos.css). */
html[data-wtk-theme="dark"] .calendar-grid,
html[data-wtk-theme="dark"] .week-grid,
html[data-wtk-theme="dark"] .wtk-agendamentos-shell .schedule-calendar-grid,
html[data-wtk-theme="dark"] .wtk-agendamentos-shell .schedule-week-grid { background-color: rgb(var(--wtk-border-soft-rgb)); }
html[data-wtk-theme="dark"] .calendar-day,
html[data-wtk-theme="dark"] .time-slot,
html[data-wtk-theme="dark"] .day-column,
html[data-wtk-theme="dark"] .wtk-agendamentos-shell .schedule-calendar-day,
html[data-wtk-theme="dark"] .wtk-agendamentos-shell .schedule-week-grid > div {
	background-color: rgb(var(--wtk-bg-surface-rgb));
	color: rgb(var(--wtk-text-body-rgb));
}
html[data-wtk-theme="dark"] .calendar-day.other-month,
html[data-wtk-theme="dark"] .wtk-agendamentos-shell .schedule-calendar-day.other-month,
html[data-wtk-theme="dark"] .wtk-agendamentos-shell .schedule-week-grid > div:nth-child(-n+8) {
	background-color: rgb(var(--wtk-bg-subtle-rgb));
	color: rgb(var(--wtk-text-muted-rgb));
}
html[data-wtk-theme="dark"] .calendar-day.today,
html[data-wtk-theme="dark"] .day-column.bg-green-50,
html[data-wtk-theme="dark"] .wtk-agendamentos-shell .schedule-calendar-day.today { background-color: rgb(16 185 129 / 0.14); }
html[data-wtk-theme="dark"] .wtk-agendamentos-shell .schedule-event-card,
html[data-wtk-theme="dark"] .wtk-agendamentos-shell [data-schedule-selected-tags] .schedule-tag-chip { color: #6ee7b7; }


/* ---------------------------------------------------------------------------
 * FASE 4 — portal de login (§4.5). O cartão, os campos e os avisos já vêm das
 * regras gerais. Fundo da página (pedido do gestor na validação): no escuro o
 * gradiente verde da marca dava pouco contraste com o cartão — vira um degradê
 * de escuros, com um leve brilho da cor da marca no topo (white-label preservado).
 * QR do 2FA (D13): continua sobre fundo branco — QR claro sobre escuro falha
 * na leitura de alguns apps autenticadores.
 * ------------------------------------------------------------------------- */
html[data-wtk-theme="dark"] body.wtk-login {
	background-image: linear-gradient(to bottom right, #13232a, #0b141a 55%, #070d11) !important;
	background-image:
		radial-gradient(ellipse at top, color-mix(in srgb, var(--wtk-primary, #128C7E) 22%, #0b141a) 0%, transparent 65%),
		linear-gradient(to bottom right, #111b21, #0b141a 55%, #070d11) !important;
}
/* Cartão destacado do fundo escuro: borda e sombra mais densa. */
html[data-wtk-theme="dark"] body.wtk-login .rounded-2xl.shadow-xl {
	border: 1px solid rgb(var(--wtk-border-rgb));
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
html[data-wtk-theme="dark"] [data-wtk-qr] {
	background-color: #ffffff !important;
	border-color: rgb(var(--wtk-border-rgb));
}
/* Links na cor da marca sobre o cartão escuro: #128C7E dá ~4,2:1 em #111b21. Tom clareado
   a partir da própria marca (o white-label continua mandando); fallback fixo antes. */
html[data-wtk-theme="dark"] body.wtk-login .text-\[\#128C7E\] {
	color: #7cc6bd !important;
	color: color-mix(in srgb, var(--wtk-primary, #128C7E) 45%, #ffffff) !important;
}
html[data-wtk-theme="dark"] body.wtk-login .hover\:text-\[\#075E54\]:hover,
html[data-wtk-theme="dark"] body.wtk-login .hover\:text-\[\#128C7E\]:hover {
	color: #b0dcd7 !important;
	color: color-mix(in srgb, var(--wtk-primary, #128C7E) 25%, #ffffff) !important;
}

/* v3.163.0 — selo "Mudou de número" (cor inline no claro; tom claro no escuro). */
html[data-wtk-theme="dark"] #changedNumberIndicator { color: #fbbf24 !important; }