/* =============================================================
   ControllerHabil — Identidade visual (v2: dirigida por marca)
   -------------------------------------------------------------
   Camada de identidade aplicada SOBRE as classes utilitárias já
   escritas nas telas, na mesma técnica do tema-claro.css: as telas
   usam a escala slate (herança do Regente, azulada) e o acento
   índigo antigo; esta folha remapeia essas classes para a paleta
   da MARCA DO CLIENTE, sem tocar nos módulos.

   O que mudou na v2: não há mais um hex escrito aqui. Toda cor é
   um token `--ch-*` que `core/marca.php` emite no <head>, montado
   a partir de `clients/<slug>/marca.php`. Esta folha virou a
   FIAÇÃO — quem decide a cor é a declaração do cliente. Era o que
   travava o multi-marca: o verde da Ferraz estava escrito aqui em
   sessenta lugares, e o Lago Center abria o sistema dele pintado
   com a cor de outra empresa.

   Papéis dos tokens (definidos em core/marca.php):
   - --ch-brand-50..950  escala do acento — o que se clica.
   - --ch-ink-50..950    neutros tingidos do matiz institucional.
   - --ch-abismo/fundo   os dois degraus abaixo do 950, só no escuro.

   Regras:
   - html.dark remapeia os neutros do tema escuro (padrão).
   - html.light complementa o tema-claro.css (carregada DEPOIS
     dele, então vence no empate de especificidade).
   - Índigo era a marca antiga → vira brand. Violet/purple ficam:
     são cores de categoria, não de marca.
   - Se esta folha não carregar, a aplicação continua funcional
     com a paleta antiga.

   Nota de fidelidade: `.text-indigo-400` e `.text-indigo-300` no
   tema escuro eram dois verdes escolhidos a olho (#56C6A9,
   #7DD3BC) que não pertenciam a passo nenhum da escala. Foram
   aterrados nos passos 300 e 200, os vizinhos mais próximos em
   luminosidade. É a única diferença visível entre a v1 e a v2 para
   quem usa a marca padrão, e ela clareia — não escurece — o texto
   sobre fundo escuro.
   ============================================================= */

/* ── ESCURO: superfícies slate → ink esverdeado ─────────────── */
html.dark .bg-slate-950 { background-color: var(--ch-abismo) !important; }
html.dark .bg-slate-900 { background-color: var(--ch-fundo) !important; }
html.dark .bg-slate-800,
html.dark .bg-gray-800   { background-color: var(--ch-ink-950) !important; }
html.dark .bg-slate-700,
html.dark .bg-gray-700   { background-color: var(--ch-ink-900) !important; }
html.dark .bg-slate-600,
html.dark .bg-gray-600   { background-color: var(--ch-ink-800) !important; }
html.dark .bg-slate-500  { background-color: var(--ch-ink-700) !important; }

html.dark [class~="bg-slate-800/10"] { background-color: rgba(var(--ch-ink-950-rgb),0.10) !important; }
html.dark [class~="bg-slate-800/20"] { background-color: rgba(var(--ch-ink-950-rgb),0.20) !important; }
html.dark [class~="bg-slate-800/25"] { background-color: rgba(var(--ch-ink-950-rgb),0.25) !important; }
html.dark [class~="bg-slate-800/30"] { background-color: rgba(var(--ch-ink-950-rgb),0.30) !important; }
html.dark [class~="bg-slate-800/40"] { background-color: rgba(var(--ch-ink-950-rgb),0.40) !important; }
html.dark [class~="bg-slate-800/50"] { background-color: rgba(var(--ch-ink-950-rgb),0.50) !important; }
html.dark [class~="bg-slate-800/60"] { background-color: rgba(var(--ch-ink-950-rgb),0.60) !important; }
html.dark [class~="bg-slate-800/70"] { background-color: rgba(var(--ch-ink-950-rgb),0.70) !important; }
html.dark [class~="bg-slate-800/80"] { background-color: rgba(var(--ch-ink-950-rgb),0.80) !important; }

html.dark [class~="bg-slate-700/20"] { background-color: rgba(var(--ch-ink-900-rgb),0.20) !important; }
html.dark [class~="bg-slate-700/30"] { background-color: rgba(var(--ch-ink-900-rgb),0.30) !important; }
html.dark [class~="bg-slate-700/40"] { background-color: rgba(var(--ch-ink-900-rgb),0.40) !important; }
html.dark [class~="bg-slate-700/50"] { background-color: rgba(var(--ch-ink-900-rgb),0.50) !important; }
html.dark [class~="bg-slate-700/60"] { background-color: rgba(var(--ch-ink-900-rgb),0.60) !important; }
html.dark [class~="bg-slate-600/20"] { background-color: rgba(var(--ch-ink-800-rgb),0.20) !important; }
html.dark [class~="bg-slate-600/30"] { background-color: rgba(var(--ch-ink-800-rgb),0.30) !important; }
html.dark [class~="bg-slate-600/40"] { background-color: rgba(var(--ch-ink-800-rgb),0.40) !important; }
html.dark [class~="bg-slate-600/50"] { background-color: rgba(var(--ch-ink-800-rgb),0.50) !important; }

html.dark [class~="bg-slate-900/20"] { background-color: rgba(var(--ch-fundo-rgb),0.20) !important; }
html.dark [class~="bg-slate-900/30"] { background-color: rgba(var(--ch-fundo-rgb),0.30) !important; }
html.dark [class~="bg-slate-900/40"] { background-color: rgba(var(--ch-fundo-rgb),0.40) !important; }
html.dark [class~="bg-slate-900/50"] { background-color: rgba(var(--ch-fundo-rgb),0.50) !important; }
html.dark [class~="bg-slate-900/60"] { background-color: rgba(var(--ch-fundo-rgb),0.60) !important; }
html.dark [class~="bg-slate-900/70"] { background-color: rgba(var(--ch-fundo-rgb),0.70) !important; }
html.dark [class~="bg-slate-900/80"] { background-color: rgba(var(--ch-fundo-rgb),0.80) !important; }
html.dark [class~="bg-slate-900/90"] { background-color: rgba(var(--ch-fundo-rgb),0.90) !important; }
html.dark [class~="bg-slate-900/95"] { background-color: rgba(var(--ch-fundo-rgb),0.95) !important; }
html.dark [class~="bg-slate-950/20"] { background-color: rgba(var(--ch-abismo-rgb),0.20) !important; }
html.dark [class~="bg-slate-950/30"] { background-color: rgba(var(--ch-abismo-rgb),0.30) !important; }
html.dark [class~="bg-slate-950/40"] { background-color: rgba(var(--ch-abismo-rgb),0.40) !important; }
html.dark [class~="bg-slate-950/50"] { background-color: rgba(var(--ch-abismo-rgb),0.50) !important; }
html.dark [class~="bg-slate-950/60"] { background-color: rgba(var(--ch-abismo-rgb),0.60) !important; }
html.dark [class~="bg-slate-950/70"] { background-color: rgba(var(--ch-abismo-rgb),0.70) !important; }
html.dark [class~="bg-slate-950/80"] { background-color: rgba(var(--ch-abismo-rgb),0.80) !important; }

/* Hovers de superfície (o tema claro nunca cobriu; aqui cobre) */
html.dark [class~="hover:bg-slate-800"]:hover { background-color: var(--ch-ink-950) !important; }
html.dark [class~="hover:bg-slate-700"]:hover { background-color: var(--ch-ink-900) !important; }
html.dark [class~="hover:bg-slate-600"]:hover { background-color: var(--ch-ink-800) !important; }
html.dark [class~="hover:bg-slate-800/40"]:hover { background-color: rgba(var(--ch-ink-950-rgb),0.40) !important; }
html.dark [class~="hover:bg-slate-800/60"]:hover { background-color: rgba(var(--ch-ink-950-rgb),0.60) !important; }
html.dark [class~="hover:bg-slate-800/80"]:hover { background-color: rgba(var(--ch-ink-950-rgb),0.80) !important; }
html.dark [class~="hover:bg-slate-700/40"]:hover { background-color: rgba(var(--ch-ink-900-rgb),0.40) !important; }
html.dark [class~="hover:bg-slate-700/50"]:hover { background-color: rgba(var(--ch-ink-900-rgb),0.50) !important; }
html.dark [class~="hover:bg-slate-700/60"]:hover { background-color: rgba(var(--ch-ink-900-rgb),0.60) !important; }

/* ── ESCURO: bordas ─────────────────────────────────────────── */
html.dark .border-slate-900,
html.dark [class~="border-slate-900/30"] { border-color: var(--ch-fundo) !important; }

html.dark .border-slate-800,
html.dark [class~="border-slate-800/30"],
html.dark [class~="border-slate-800/40"],
html.dark [class~="border-slate-800/50"],
html.dark [class~="border-slate-800/60"],
html.dark [class~="border-slate-800/70"],
html.dark [class~="border-slate-800/80"] { border-color: var(--ch-ink-900) !important; }

html.dark .border-slate-700,
html.dark [class~="border-slate-700/30"],
html.dark [class~="border-slate-700/40"],
html.dark [class~="border-slate-700/50"],
html.dark [class~="border-slate-700/60"],
html.dark [class~="border-slate-700/70"],
html.dark [class~="border-slate-700/80"] { border-color: var(--ch-ink-800) !important; }

html.dark .border-slate-600,
html.dark .border-gray-600,
html.dark [class~="border-slate-600/30"],
html.dark [class~="border-slate-600/40"],
html.dark [class~="border-slate-600/50"] { border-color: var(--ch-ink-700) !important; }

html.dark [class*="divide-slate-"] > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--ch-ink-900) !important;
}

/* ── ESCURO: texto neutro ───────────────────────────────────── */
html.dark .text-slate-100 { color: var(--ch-ink-100) !important; }
html.dark .text-slate-200 { color: var(--ch-ink-200) !important; }
html.dark .text-slate-300 { color: var(--ch-ink-300) !important; }
html.dark .text-slate-400 { color: var(--ch-ink-400) !important; }
html.dark .text-slate-500 { color: var(--ch-ink-500) !important; }
html.dark .text-slate-600 { color: var(--ch-ink-600) !important; }
html.dark .placeholder-slate-500::placeholder,
html.dark .placeholder-slate-600::placeholder { color: var(--ch-ink-500) !important; }

/* ── Índigo (marca antiga) → verde-petróleo, tema escuro ────── */
html.dark .text-indigo-400 { color: var(--ch-brand-300) !important; }
html.dark .text-indigo-300 { color: var(--ch-brand-200) !important; }
html.dark .bg-indigo-600   { background-color: var(--ch-brand-600) !important; }
html.dark .bg-indigo-500   { background-color: var(--ch-brand-500) !important; }
html.dark [class~="hover:bg-indigo-500"]:hover { background-color: var(--ch-brand-500) !important; }
html.dark [class~="hover:bg-indigo-700"]:hover { background-color: var(--ch-brand-700) !important; }
html.dark [class~="bg-indigo-500/5"]  { background-color: rgba(var(--ch-brand-500-rgb),0.07) !important; }
html.dark [class~="bg-indigo-500/20"] { background-color: rgba(var(--ch-brand-500-rgb),0.18) !important; }
html.dark [class~="border-indigo-500/20"] { border-color: rgba(var(--ch-brand-500-rgb),0.25) !important; }
html.dark [class~="border-indigo-500/30"] { border-color: rgba(var(--ch-brand-500-rgb),0.35) !important; }
html.dark [class~="focus:ring-indigo-500"]:focus { --tw-ring-color: var(--ch-brand-400) !important; }
html.dark [class~="shadow-indigo-500/25"] { --tw-shadow-color: rgba(var(--ch-brand-600-rgb),0.35) !important; }

/* ── Índigo → verde-petróleo, tema claro (vence o tema-claro.css
      por vir depois dele no <head>) ──────────────────────────── */
html.light .text-indigo-400, html.light [class*="text-indigo-400/"] { color: var(--ch-brand-700) !important; }
html.light .text-indigo-300, html.light [class*="text-indigo-300/"] { color: var(--ch-brand-800) !important; }
html.light .bg-indigo-600   { background-color: var(--ch-brand-600) !important; }
html.light .bg-indigo-500   { background-color: var(--ch-brand-500) !important; }
html.light [class~="hover:bg-indigo-500"]:hover { background-color: var(--ch-brand-700) !important; }
html.light [class~="hover:bg-indigo-700"]:hover { background-color: var(--ch-brand-800) !important; }
html.light [class~="bg-indigo-500/5"]  { background-color: rgba(var(--ch-brand-600-rgb),0.06) !important; }
html.light [class~="bg-indigo-500/20"] { background-color: rgba(var(--ch-brand-600-rgb),0.14) !important; }
html.light [class~="border-indigo-500/20"] { border-color: rgba(var(--ch-brand-600-rgb),0.30) !important; }
html.light [class~="border-indigo-500/30"] { border-color: rgba(var(--ch-brand-600-rgb),0.40) !important; }
html.light [class~="focus:ring-indigo-500"]:focus { --tw-ring-color: var(--ch-brand-600) !important; }
html.light [class~="shadow-indigo-500/25"] { --tw-shadow-color: rgba(var(--ch-brand-600-rgb),0.20) !important; }

/* ── CLARO: tons brand-3xx/4xx/5xx são pensados para fundo escuro
      e perdem contraste no branco ────────────────────────────── */
html.light .text-brand-300 { color: var(--ch-brand-800) !important; }
html.light .text-brand-400 { color: var(--ch-brand-700) !important; }
html.light .text-brand-500, html.light [class*="text-brand-500/"] { color: var(--ch-brand-600) !important; }
html.light [class~="hover:text-brand-300"]:hover,
html.light [class~="hover:text-brand-400"]:hover { color: var(--ch-brand-800) !important; }

/* ── O painel do SlimSelect é opaco, e o remapeamento acima não o alcança ──
      O SlimSelect COPIA a lista de classes do <select> original para os
      elementos que ele gera — inclusive a .ss-content, que ele pendura no
      <body>. Como os campos de filtro nascem com `bg-slate-800/50`, o
      remapeamento genérico de opacidade lá de cima pegava o dropdown junto e o
      deixava meio transparente: a lista de opções ficava legível por cima do
      texto da página, e escolher a categoria virava adivinhação.

      As regras de .ss-* do header.php não resolvem porque vêm ANTES deste
      arquivo e empatam em especificidade. O `[class]` a mais desempata. */
html.dark  .ss-content[class] { background-color: var(--rg-ground)  !important; }
html.dark  .ss-main[class]    { background-color: var(--rg-surface) !important; }
html.light .ss-content[class] { background-color: var(--rg-surface) !important; }
html.light .ss-main[class]    { background-color: var(--rg-surface) !important; }

/* ── As duas versões do logotipo ─────────────────────────────
   O manual do Lago Center traz o símbolo colorido para fundo
   claro e as versões monocromáticas para fundo escuro, e o motivo
   é concreto: um dos três traços do símbolo é o azul-marinho
   institucional, que sobre o fundo escuro do sistema simplesmente
   desaparece. As telas emitem as DUAS e o tema escolhe.

   Mora aqui, e não no <style> do header, porque o login e o
   seletor de empresa não passam pelo header — e são justamente as
   duas telas em que o logo é o elemento principal. */
html.light .marca-no-escuro { display:none; }
html.dark  .marca-no-claro  { display:none; }