/* ═══════════════════════════════════════════════════════════════════════════
   AgentHub — TEMA CLARO  ("Papel Técnico")
   ---------------------------------------------------------------------------
   Direção: não é o escuro invertido. É papel de arquiteto — base off-white
   levemente quente, painéis em branco puro que "flutuam" sobre ela, hairlines
   de 1px como traço de nanquim, tinta profunda azul-grafite no texto.
   Profundidade vem de contraste de superfície + sombra curta, nunca de brilho.

   REGRA DE OURO DESTE ARQUIVO:
   - Só atua sob html[data-theme="light"]. No escuro, zero efeito colateral.
   - Não altera layout, tipografia, grid, comportamento ou lógica de módulo.
   - Só redefine tokens de cor + neutraliza cores escuras hardcoded.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── PALETA CANÔNICA DO CLARO ────────────────────────────────────────────── */
html[data-theme="light"]{
  /* superfícies — 5 níveis, do papel ao realce */
  --ah-canvas : #F2F1ED;   /* fundo da página (papel) */
  --ah-s1     : #FBFAF8;   /* painel recuado */
  --ah-s2     : #FFFFFF;   /* card principal */
  --ah-s3     : #F5F4F0;   /* botão / hover */
  --ah-s4     : #EAE8E2;   /* pressionado / faixa */
  --ah-sunken : #EDEBE5;   /* poços, inputs, table head */

  /* traço */
  --ah-line   : #E3E0D9;   /* hairline padrão */
  --ah-line2  : #D2CEC4;   /* divisor forte */
  --ah-line3  : #B8B3A6;   /* contorno de foco */

  /* tinta */
  --ah-ink    : #16181C;   /* título / número  — 15.8:1 sobre #FFF */
  --ah-ink2   : #414750;   /* corpo            —  9.6:1 */
  --ah-ink3   : #565C65;   /* legenda          —  6.9:1 */
  --ah-ink4   : #61666E;   /* rótulo fraco     —  5.6:1 — AA mesmo sobre a sidebar */

  /* semânticos — escurecidos p/ atingir AA sobre branco */
  --ah-pos    : #0E8F5A;
  --ah-pos-bg : rgba(14,143,90,.10);
  --ah-neg    : #C6303F;
  --ah-neg-bg : rgba(198,48,63,.10);
  --ah-warn   : #A9700A;
  --ah-warn-bg: rgba(169,112,10,.12);
  --ah-info   : #1D62CE;
  --ah-info-bg: rgba(29,98,206,.10);
  --ah-accent : #4B5BD6;
  --ah-accent2: #7A4FD1;

  /* sombras — curtas e frias, papel sobre papel */
  --ah-sh-1   : 0 1px 2px rgba(22,24,28,.06);
  --ah-sh-2   : 0 1px 3px rgba(22,24,28,.08), 0 6px 16px -8px rgba(22,24,28,.12);
  --ah-sh-in  : inset 0 1px 0 rgba(255,255,255,.9);

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. REMAPEAMENTO DOS TOKENS EXISTENTES
   Os módulos foram escritos em épocas diferentes e usam nomes diferentes para
   a mesma coisa (--bg / --base / --dark / --fundo / --preto ...). Aqui todos
   apontam para a paleta canônica acima. !important porque css/crm-ml-embed.css
   declara seus tokens com !important.

   O bloco é repetido em `body` de propósito: módulos como central-shopee.css
   redefinem tokens em `body.ml-mode`, e uma declaração no body vence a do html
   para todos os descendentes. Cobrindo os dois escopos, nada escapa.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"],
html[data-theme="light"] body{
  /* ── canvas ────────────────────────────────────────────────────────────── */
  --bg:var(--ah-canvas)!important;      --base:var(--ah-canvas)!important;
  --dark:var(--ah-canvas)!important;    --fundo:var(--ah-canvas)!important;
  --preto:var(--ah-canvas)!important;   --bg2:var(--ah-s1)!important;
  --bg3:var(--ah-s3)!important;

  /* ── superfícies ───────────────────────────────────────────────────────── */
  --s1:var(--ah-s1)!important;          --s2:var(--ah-s2)!important;
  --s3:var(--ah-s3)!important;          --s4:var(--ah-s4)!important;
  --dark2:var(--ah-s2)!important;       --dark3:var(--ah-s3)!important;
  --dark4:var(--ah-s4)!important;
  --panel:var(--ah-s2)!important;       --painel-a:var(--ah-s2)!important;
  --painel-b:var(--ah-s1)!important;    --panel-grad:linear-gradient(180deg,var(--ah-s2),var(--ah-s1))!important;
  --card:var(--ah-s2)!important;        --card2:var(--ah-s3)!important;
  --surface:var(--ah-s2)!important;     --surface2:var(--ah-s3)!important;
  --surface-2:var(--ah-s3)!important;   --surface-3:var(--ah-s4)!important;
  --elev:var(--ah-s3)!important;        --col:var(--ah-sunken)!important;
  --carvao:var(--ah-s2)!important;      --grafite:var(--ah-s3)!important;
  --grafite-2:var(--ah-s4)!important;   --th-bg:var(--ah-sunken)!important;
  --hover:rgba(22,24,28,.045)!important;
  --creme:var(--ah-s1)!important;

  /* ── traço ─────────────────────────────────────────────────────────────── */
  --line:var(--ah-line)!important;      --line2:var(--ah-line2)!important;
  --line3:var(--ah-line3)!important;    --border:var(--ah-line)!important;
  --border2:var(--ah-line2)!important;  --border-strong:var(--ah-line2)!important;
  --borda:var(--ah-line)!important;     --borda2:var(--ah-line2)!important;
  --borda-2:var(--ah-line2)!important;  --borda-forte:var(--ah-line2)!important;
  --grid-linha:rgba(22,24,28,.06)!important;

  /* ── tinta ─────────────────────────────────────────────────────────────── */
  --text:var(--ah-ink)!important;       --tx:var(--ah-ink)!important;
  --txt:var(--ah-ink)!important;        --texto:var(--ah-ink)!important;
  --text-2:var(--ah-ink2)!important;    --tx2:var(--ah-ink2)!important;
  --txt2:var(--ah-ink2)!important;      --texto-2:var(--ah-ink2)!important;
  --text-mid:var(--ah-ink2)!important;
  --text-3:var(--ah-ink3)!important;    --tx3:var(--ah-ink3)!important;
  --txt3:var(--ah-ink3)!important;      --texto-3:var(--ah-ink3)!important;
  --text-dim:var(--ah-ink3)!important;  --muted:var(--ah-ink3)!important;
  --dim-color:var(--ah-ink3)!important; --text-muted:var(--ah-ink4)!important;
  --tx4:var(--ah-ink4)!important;       --faint:var(--ah-ink4)!important;
  --cinza:var(--ah-ink3)!important;     --gray:var(--ah-ink3)!important;

  /* ── semânticos ────────────────────────────────────────────────────────── */
  --green:var(--ah-pos)!important;      --verde:var(--ah-pos)!important;
  --emerald:var(--ah-pos)!important;    --pos:var(--ah-pos)!important;
  --pos2:var(--ah-pos)!important;       --ok:var(--ah-pos)!important;
  --lime:#5C8A0F!important;
  --verde-dim:var(--ah-pos-bg)!important; --green-bg:var(--ah-pos-bg)!important;

  --red:var(--ah-neg)!important;        --vermelho:var(--ah-neg)!important;
  --rose:var(--ah-neg)!important;       --neg:var(--ah-neg)!important;
  --err:var(--ah-neg)!important;        --pink:#C13B7A!important;
  --vermelho-dim:var(--ah-neg-bg)!important; --red-bg:var(--ah-neg-bg)!important;

  --orange:var(--ah-warn)!important;    --amber:var(--ah-warn)!important;
  --amarelo:var(--ah-warn)!important;   --warn:var(--ah-warn)!important;
  --ambar:var(--ah-warn)!important;
  --amarelo-dim:var(--ah-warn-bg)!important; --ambar-dim:var(--ah-warn-bg)!important;
  --orange-bg:var(--ah-warn-bg)!important;

  --blue:var(--ah-info)!important;      --azul:var(--ah-info)!important;
  --info:var(--ah-info)!important;      --primary:var(--ah-info)!important;
  --primary-btn:#1750AC!important;      --blue-2:#1750AC!important;
  --azul-dim:var(--ah-info-bg)!important;
  --cyan:#0A7A8C!important;             --ciano:#0A7A8C!important;
  --cyan-bg:rgba(10,122,140,.10)!important;
  --violet:var(--ah-accent2)!important; --purple:var(--ah-accent2)!important;
  --accent:var(--ah-accent)!important;  --accent2:var(--ah-accent2)!important;
  --accent-color:var(--ah-accent)!important;
  --score-color:var(--ah-accent)!important;
  --glow:rgba(75,91,214,.07)!important;

  /* ── DRE (barras empilhadas — precisam ler sobre branco) ───────────────── */
  --dre-cmv:#5F6673!important;          --dre-comissao:#1D62CE!important;
  --dre-frete:#0E7FA8!important;        --dre-imposto:#7A4FD1!important;
  --dre-embalagem:#7A5A48!important;    --dre-ads:#1750AC!important;
  --dre-lucro:var(--ah-pos)!important;  --dre-prejuizo:var(--ah-neg)!important;

  /* ── marcas: mantidas, mas com variante legível sobre branco ──────────── */
  --shopee:#D8431F!important;           --shopee-hover:#EE4D2D!important;
  --shopee-dim:rgba(216,67,31,.10)!important;
  --amazon:#B36A00!important;           --tiktok:#E0113C!important;
  --tt:#E0113C!important;               --tt2:#0A8C93!important;
  --tt2-dim:rgba(10,140,147,.10)!important;
  --canal-shopee:#D8431F!important;     --canal-amazon:#B36A00!important;
  --canal-tiktok:#E0113C!important;     --canal-b2b:var(--ah-accent2)!important;
  --acc2:#B36A00!important;             --acc-dim:rgba(179,106,0,.14)!important;

  /* Amarelo do Mercado Livre é ilegível sobre branco: vira âmbar-tinta.
     O amarelo original permanece disponível em --ml-puro p/ chips e logos. */
  --ml-puro:#FFE600;
  --ml:#8A6D00!important;               --canal-ml:#8A6D00!important;
  --ml-dim:rgba(255,230,0,.30)!important;
  --yellow:#8A6D00!important;           --amarelo-vivo:#B38A00!important;
  --chocolate:#1D62CE!important;        --brown:#7A5A48!important;
  --conta:var(--ah-accent)!important;
  --ig-pink:#C13B7A!important;          --ig-purple:#6B2E92!important;
  --ig-orange:#B35A10!important;        --ig-yellow:#A9700A!important;

  /* ── pontos de conta (dots) ───────────────────────────────────────────── */
  --dot-chocaprime:#A87C10!important;   --dot-atacadaoshow:#0A7A8C!important;
  --dot-petfreeshop:#C13B7A!important;  --dot-petbox:#D8431F!important;
  --dot-petshow:#0A7A8C!important;

  /* ── genéricos ─────────────────────────────────────────────────────────── */
  --c:var(--ah-ink)!important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. NEUTRALIZAÇÃO DE ESCUROS HARDCODED
   Alguns módulos pintam o escuro direto no CSS, sem token. Aqui o claro
   reassume — apenas cor/fundo/sombra, nunca posição ou tamanho.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="light"],
html[data-theme="light"] body{
  background:var(--ah-canvas)!important;
  color:var(--ah-ink)!important;
}

/* Atmosfera de fundo: no escuro é halo luminoso; no claro vira grade de papel
   milimetrado, quase imperceptível. */
html[data-theme="light"] body::before{
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(75,91,214,.055), transparent 62%),
    radial-gradient(700px 420px at 8% 102%, rgba(14,143,90,.045), transparent 60%),
    linear-gradient(rgba(22,24,28,.055) 1px, transparent 1px) 0 0/100% 46px,
    linear-gradient(90deg, rgba(22,24,28,.055) 1px, transparent 1px) 0 0/46px 100%
    !important;
  opacity:.85!important;
}

/* Sidebar — no claro é uma faixa de papel um tom abaixo do canvas. */
html[data-theme="light"] .sb,
html[data-theme="light"] .sidebar,
html[data-theme="light"] aside.nav,
html[data-theme="light"] .nav-lateral{
  background:linear-gradient(180deg,var(--ah-s1),var(--ah-s3))!important;
  border-right:1px solid var(--ah-line)!important;
}

/* Topbar de vidro — no claro, vidro branco. */
html[data-theme="light"] .top,
html[data-theme="light"] .topbar,
html[data-theme="light"] header.top,
html[data-theme="light"] .barra-topo{
  background:rgba(251,250,248,.86)!important;
  border-bottom:1px solid var(--ah-line)!important;
}

/* Logo: o gradiente do escuro tem texto quase preto; mantemos o gradiente
   mas com tinta branca para o contraste virar. */
html[data-theme="light"] .sb-logo,
html[data-theme="light"] .logo-mark{
  color:#FFFFFF!important;
  box-shadow:0 0 0 1px rgba(22,24,28,.08), 0 6px 16px -8px rgba(75,91,214,.5)!important;
}

/* Botões / cards / chips: troca de brilho interno por sombra de papel. */
html[data-theme="light"] .btn,
html[data-theme="light"] button.btn,
html[data-theme="light"] .card,
html[data-theme="light"] .kpi,
html[data-theme="light"] .painel,
html[data-theme="light"] .panel,
html[data-theme="light"] .box,
html[data-theme="light"] .chip,
html[data-theme="light"] .tag,
html[data-theme="light"] .pill{
  box-shadow:var(--ah-sh-1)!important;
}
html[data-theme="light"] .card,
html[data-theme="light"] .painel,
html[data-theme="light"] .panel{
  box-shadow:var(--ah-sh-2)!important;
}
html[data-theme="light"] .btn:hover,
html[data-theme="light"] button.btn:hover{
  box-shadow:var(--ah-sh-2)!important;
}

/* Item ativo da navegação: o brilho neon do escuro vira tinta sólida. */
html[data-theme="light"] .sb-item.on::before,
html[data-theme="light"] .nav-item.ativo::before{
  box-shadow:none!important;
}
html[data-theme="light"] .sb-item.on,
html[data-theme="light"] .nav-item.ativo{
  background:var(--ah-s4)!important;
}

/* Formulários e tabelas. */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:var(--ah-s2)!important;
  color:var(--ah-ink)!important;
  border-color:var(--ah-line2)!important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{color:var(--ah-ink4)!important}
html[data-theme="light"] thead th,
html[data-theme="light"] table thead{
  background:var(--ah-sunken)!important;
  color:var(--ah-ink2)!important;
}
html[data-theme="light"] tbody tr:hover{background:rgba(22,24,28,.035)!important}

/* Scrollbar. */
html[data-theme="light"] ::-webkit-scrollbar-thumb{
  background:var(--ah-line2)!important;
  border-color:var(--ah-canvas)!important;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:var(--ah-line3)!important}

/* Logos de marketplace vinham sobre chapa branca/preta forçada. */
html[data-theme="light"] .mkl{background:#FFFFFF!important}
html[data-theme="light"] .mkl.tk{background:#111111!important}

/* Canvas de gráfico e SVG que herdavam stroke claro. */
html[data-theme="light"] svg text{fill:var(--ah-ink2)}

/* ═══════════════════════════════════════════════════════════════════════════
   3. O BOTÃO DE TEMA  (injetado por theme-toggle.js — estilizado nos 2 temas)
   ═══════════════════════════════════════════════════════════════════════════ */
.ah-theme-btn{
  --_bd:rgba(255,255,255,.14);
  --_bg:rgba(255,255,255,.05);
  --_fg:currentColor;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;
  border-radius:10px;
  border:1px solid var(--_bd);
  background:var(--_bg);
  color:var(--_fg);
  cursor:pointer;
  font:inherit;line-height:0;
  transition:background .18s cubic-bezier(.32,.72,0,1),
             border-color .18s cubic-bezier(.32,.72,0,1),
             transform .18s cubic-bezier(.32,.72,0,1);
  -webkit-tap-highlight-color:transparent;
}
.ah-theme-btn:hover{background:rgba(255,255,255,.10);transform:translateY(-1px)}
.ah-theme-btn:active{transform:translateY(0) scale(.96)}
.ah-theme-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ah-theme-btn svg{width:16px;height:16px;display:block}

/* as duas faces do ícone ocupam a mesma célula e trocam por rotação */
.ah-theme-btn .ah-ico{
  position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .26s cubic-bezier(.32,.72,0,1),
             transform .34s cubic-bezier(.32,.72,0,1);
}
.ah-theme-btn .ah-ico-sun {opacity:0;transform:rotate(-70deg) scale(.55)}
.ah-theme-btn .ah-ico-moon{opacity:1;transform:rotate(0)      scale(1)}
html[data-theme="light"] .ah-theme-btn .ah-ico-sun {opacity:1;transform:rotate(0)     scale(1)}
html[data-theme="light"] .ah-theme-btn .ah-ico-moon{opacity:0;transform:rotate(70deg) scale(.55)}

html[data-theme="light"] .ah-theme-btn{
  --_bd:var(--ah-line2);
  --_bg:var(--ah-s2);
  --_fg:var(--ah-ink2);
  box-shadow:var(--ah-sh-1);
}
html[data-theme="light"] .ah-theme-btn:hover{background:var(--ah-s3);border-color:var(--ah-line3)}

/* botão flutuante — usado quando a página não tem topbar reconhecível */
.ah-theme-btn.ah-float{
  position:fixed;right:18px;bottom:18px;z-index:2147483000;
  width:42px;height:42px;border-radius:14px;
  background:#14171B;border-color:rgba(255,255,255,.16);color:#F4F6F9;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.7);
}
html[data-theme="light"] .ah-theme-btn.ah-float{
  background:var(--ah-s2);border-color:var(--ah-line2);color:var(--ah-ink);
  box-shadow:0 8px 24px -12px rgba(22,24,28,.35);
}

/* transição suave ao alternar (desligada para quem pede menos movimento) */
html.ah-anim,
html.ah-anim body,
html.ah-anim .sb,.ah-anim .top,.ah-anim .card,.ah-anim .painel,.ah-anim .panel{
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
@media (prefers-reduced-motion:reduce){
  html.ah-anim,html.ah-anim *{transition:none!important}
  .ah-theme-btn,.ah-theme-btn .ah-ico{transition:none!important}
}