/*
 * Tema claro/escuro do Portal Parceiros — DRY, fonte única.
 *
 * Como funciona:
 *   Cada página do Parceiros define suas variáveis CSS em :root { --bg-deep,
 *   --bg-card, etc } com valores dark (padrão histórico). Este arquivo
 *   sobrescreve as MESMAS variáveis quando html[data-theme="light"] está
 *   ativo — html+atributo tem specificity maior que :root, então vence.
 *
 *   Assim NÃO precisamos duplicar CSS light em cada página. Cada nova
 *   variável adicionada aqui se propaga pra todas as páginas que já usam
 *   aquela var no dark.
 *
 * Palette light: mesma do CRM (frontend/app/globals.css:91) — preserva
 * identidade visual entre CRM e Parceiros pra usuário que transita entre
 * os dois. NÃO desviar dessas cores sem alinhar com o CSS do CRM.
 */

/* Defaults dark GLOBAIS pras vars usadas em cores refatoradas de
   hardcoded. Se pagina declara o mesmo var no proprio :root, vence
   por vir depois no cascade — comportamento historico preservado.
   Se pagina NAO declara (ex: sidebar.js, login.php), estas caem como
   fallback e evitam texto/bg undefined em dark. Sem isto, o refactor
   quebra o dark de paginas que so tinham cores hex. */
:root {
  /* RGB (para rgba com opacidade) */
  --bg-deep-rgb:    8, 8, 16;
  --bg-card-rgb:    19, 19, 31;
  --white-rgb:      240, 239, 254;

  /* Cores base — historico do Portal Parceiros em dark */
  --bg-deep:        #080810;
  --bg-card:        #13131f;
  --bg-hover:       #1a1a2e;
  --border:         rgba(151, 54, 231, 0.18);

  /* Roxo/ciano — identidade Omni */
  --purple:         #9736E7;
  --purple-light:   #b96af5;
  --cyan:           #01B9DA;

  /* Textos */
  --white:          #f0effe;
  --text:           #e8e6ff;
  --muted:          rgba(240, 239, 254, 0.45);

  /* Superficies elevadas usadas em ranking, campanhas, cards de
     conteudo. Em dark ficam sutis (branco baixa opacidade sobre preto);
     no light precisam VIRAR bg mais escuro pra dar contraste no fundo
     lavanda — ver override abaixo. */
  --surface:        rgba(255, 255, 255, 0.04);
  --surface-2:      rgba(255, 255, 255, 0.07);
  --border-subtle:  rgba(255, 255, 255, 0.07);
  --bg:             #080810;   /* alias historico de --bg-deep */
}

html[data-theme="light"] {
  /* Bases (as mesmas var names usadas nos <style> inline das páginas) */
  --bg-deep:        #f0effe;
  --bg-card:        #ffffff;
  --bg-hover:       #e8e4fc;
  --border:         rgba(151, 54, 231, 0.18);

  /* Superficies elevadas: em light, branco 4% sobre lavanda 240,239,254
     resulta num cinza claríssimo indistinguível do fundo — cards do
     ranking ficavam invisíveis. Inverte pra sombra escura semi-
     transparente (roxo escuro 8%) que da contraste sobre o fundo
     claro sem competir com o roxo dos accents. */
  --surface:        rgba(30, 16, 53, 0.05);
  --surface-2:      rgba(30, 16, 53, 0.08);
  --border-subtle:  rgba(30, 16, 53, 0.10);
  --bg:             #f0effe;   /* alias historico de --bg-deep */

  /* RGB pras cores refatoradas de hardcoded → rgba(var(--X-rgb), Y) */
  --bg-deep-rgb:    240, 239, 254;
  --bg-card-rgb:    255, 255, 255;
  --white-rgb:      30, 16, 53;

  /* Roxo/ciano: no light o --purple-light do dark (#b96af5) fica claro
     demais sobre fundo lavanda (#f0effe) — contraste 2.4:1, abaixo de
     WCAG AA 4.5. Trocamos por roxo mais saturado pra manter identidade
     com contraste OK (7:1). Ciano mantido — já tem contraste OK em
     ambos temas quando usado como accent. */
  --purple:         #7c3aed;
  --purple-light:   #6d28d9;
  --cyan:           #0e91ab;

  /* Textos — todos escuros pra vencer fundo lavanda */
  --white:          #1e1035;
  --text:           #1e1035;
  --muted:          rgba(30, 16, 53, 0.62);

  /* Sidebar (sidebar.js declara essas vars — nomes iguais em ambos). */
  --sb-bg:          #ffffff;
  --sb-br:          rgba(151, 54, 231, 0.15);
  --sb-pur:         #9736E7;
  --sb-purl:        #b96af5;
  --sb-cyn:         #01B9DA;
  --sb-wh:          #1e1035;
  --sb-mu:          rgba(30, 16, 53, 0.55);
  --sb-hov:         rgba(151, 54, 231, 0.08);
  --sb-act:         rgba(151, 54, 231, 0.12);

  color-scheme: light;
}

/* Body — sem override do background-image (noise) porque o `body::before`
   fica bom em ambos os temas com opacity diferente. */
html[data-theme="light"] body {
  background: var(--bg-deep);
  color: var(--text);
}

html[data-theme="light"] body::before {
  opacity: 0.15;
}

/* Header sticky: cor de fundo semi-transparente precisa ser light. As
   páginas atuais definem `background: rgba(8,8,16,0.9)` hardcoded (sem
   var), então override direto. */
html[data-theme="light"] header {
  background: rgba(240, 239, 254, 0.9);
}

/* Scrollbar mais discreta no light */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f0effe; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(151, 54, 231, 0.25); }

/* Logo OmniPlay é PNG com texto branco/roxo (pensada pra fundo dark).
   No light fica invisivel/apagada sobre fundo lavanda. filter:brightness(0)
   converte pra silhueta preta pura, preservando alpha do PNG. Aplica em
   omni_logo.png (raiz Parceiros) e omni-play-3.png.webp (WP CDN). */
html[data-theme="light"] img[src*="omni_logo"],
html[data-theme="light"] img[src*="omni-play-3"] {
  filter: brightness(0);
}

/* ─── /treinamento — module-card thumbs ────────────────────
   Thumbs de video tem filter:brightness(.8) pra reforcar o overlay
   escuro do play. Em light ficam apagadas demais e o overlay preto
   fica agressivo sobre fundo claro — solta a imagem e usa overlay
   mais suave. */
html[data-theme="light"] .module-card-thumb {
  filter: brightness(0.95);
}
html[data-theme="light"] .module-card-overlay {
  background: rgba(30, 16, 53, 0.15);
}
html[data-theme="light"] .module-card:not(.locked):hover .module-card-overlay {
  background: rgba(30, 16, 53, 0.05);
}

/* ─── SIDEBAR (sidebar.js) ────────────────────────────────────────
   Sidebar.js tem cores dark hardcoded em vez de vars — override
   por seletor pra funcionar em light. Se sidebar.js for refatorado
   pra usar var(--sb-bg-gradient) etc, remover estes overrides. */
html[data-theme="light"] #sb {
  background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
  border-right-color: rgba(151, 54, 231, 0.12);
}

html[data-theme="light"] #sb-topbar {
  background: rgba(240, 239, 254, 0.92);
  border-bottom-color: rgba(151, 54, 231, 0.15);
}

html[data-theme="light"] #sb-ham {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(151, 54, 231, 0.2);
  color: #1e1035;
}

html[data-theme="light"] #sb-back { background: rgba(30, 16, 53, 0.4); }

html[data-theme="light"] .sb-admin-select option,
html[data-theme="light"] .sb-admin-list {
  background: #ffffff;
  color: #1e1035;
}

html[data-theme="light"] .sb-admin-input::placeholder,
html[data-theme="light"] .sb-admin-toggle .sb-admin-label {
  color: rgba(30, 16, 53, 0.5);
}

html[data-theme="light"] .sb-admin-item { color: #1e1035; }

/* Tooltip da sidebar mini (hover em item colapsado) */
html[data-theme="light"] #sb.mini .sb-a:hover::before {
  background: #1e1035;
  color: #f0effe;
  box-shadow: 0 4px 20px rgba(30, 16, 53, 0.25);
}

/* ─── MODAIS / OVERLAYS ────────────────────────────────────────
   Padrões comuns nas páginas do Parceiros — modal backdrop e card.
   Backdrop mantém escuro pra dar contraste em light (padrão do
   Material/Tailwind), mas o CARD do modal vira claro. */
html[data-theme="light"] .modal-content,
html[data-theme="light"] .modal-card,
html[data-theme="light"] [class*="modal-panel"],
html[data-theme="light"] [class*="modal-body"] {
  background: #ffffff;
  color: #1e1035;
  border-color: rgba(151, 54, 231, 0.18);
}

/* ─── CARDS / SEÇÕES GENÉRICAS ────────────────────────────────
   Muitas páginas usam `.card`, `.box`, `.painel`, `.section` como
   nomes de container escuro. Override direto pra bg-card. */
html[data-theme="light"] .card,
html[data-theme="light"] .box,
html[data-theme="light"] .painel,
html[data-theme="light"] .panel,
html[data-theme="light"] section.card {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}

/* Inputs e selects: browser default vira preto/branco em light. Força o
   estilo Omni pra manter consistência. */
html[data-theme="light"] input:not([type="range"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  color-scheme: light;
  background: var(--bg-hover);
  color: var(--text);
  border-color: rgba(151, 54, 231, 0.2);
}

html[data-theme="light"] select option {
  background: #ffffff;
  color: #1e1035;
}

/* Botão toggle de tema — mesma classe usada na sidebar e em landings */
.omni-tema-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  padding: 10px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted, rgba(240,239,254,0.45));
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.omni-tema-toggle:hover {
  background: rgba(151, 54, 231, 0.1);
  color: var(--purple-light, #b96af5);
}

.omni-tema-toggle:focus-visible {
  outline: 2px solid var(--purple, #9736E7);
  outline-offset: -2px;
}

.omni-tema-toggle .omni-tema-ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Ícone: mostra sol em dark (indica "clicar pra ir pro light"), lua em
   light. Duas SVGs empilhadas, uma some conforme o tema. */
.omni-tema-toggle .omni-tema-ic-sun { display: inline-block; }
.omni-tema-toggle .omni-tema-ic-moon { display: none; }
html[data-theme="light"] .omni-tema-toggle .omni-tema-ic-sun  { display: none; }
html[data-theme="light"] .omni-tema-toggle .omni-tema-ic-moon { display: inline-block; }

/* Variante compacta (usada em headers de landing pages) */
.omni-tema-toggle.omni-tema-icon-only {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(151,54,231,0.18));
}
.omni-tema-toggle.omni-tema-icon-only .omni-tema-lbl { display: none; }