/* ============================================================================
   OCTOPUS APEX — Sistema visual do app (rodada 8, 27/08/2026)
   ----------------------------------------------------------------------------
   Adaptacao da linguagem "apex" do JustCall para a marca Octopus, conforme
   JustCall_Identidade_Visual.md. Regra do documento: replicar o sistema inteiro
   trocando SOMENTE o acento azul pelo dourado Octopus.

   COMO FUNCIONA
   Esta folha e uma CAMADA DE PELE. Ela nao altera markup nem JavaScript: apenas
   redefine os tokens que o app ja usa (--bg, --surface, --accent, --text, ...) e
   corrige, por componente, os pontos onde havia cor cravada no CSS antigo.
   Tudo vive sob :root[data-skin="apex"]. Sem esse atributo o app volta 100% ao
   visual antigo, sem nenhum resquicio.

   ORDEM DAS SECOES
     0. Tipografia
     1. Tokens (remapeamento do design system)
     2. Base e chrome da pagina
     3. Sidebar (unica area escura da tela)
     4. Cabecalhos de pagina e secao
     5. Botoes
     6. Abas
     7. Cards e KPIs
     8. Tabelas
     9. Campos de formulario
    10. Pills, badges e chips
    11. Modais e overlays
    12. Kanban e CRM
    13. Agenda e calendario
    14. Graficos
    15. Ajustes finais e mobile
    16. Painel do Cliente (client.php)
    17. Telas de entrada e sobras da era escura
    18. Estilos escuros cravados no atributo style
    19. Icones de linha
   ========================================================================== */


/* ===== 0. TIPOGRAFIA =====================================================
   Decisao do Lucas (27/08): sem arquivo de fonte, sem CDN. A interface usa a
   pilha nativa do sistema, o mesmo caminho de GitHub, Tailwind e Vercel:
   Segoe UI Variable no Windows, San Francisco no Mac e iPhone, Roboto no
   Android. Zero download, zero flash de troca de fonte, e o app fica com a
   cara nativa de cada aparelho.
   Playfair Display fica SO na assinatura da marca (secao 4), nunca na UI.
   ========================================================================= */
:root[data-skin="apex"] {
  --apex-fonte: "Segoe UI Variable Text", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --apex-fonte-marca: "Playfair Display", Georgia, serif;
}


/* ===== 1. TOKENS =========================================================
   Duplo atributo ([data-skin][data-theme]) para vencer :root[data-theme="dark"]
   e :root[data-theme="light"] por especificidade, sem depender de ordem de load.
   ========================================================================= */
:root[data-skin="apex"],
:root[data-skin="apex"][data-theme],
:root[data-skin="apex"][data-theme="dark"],
:root[data-skin="apex"][data-theme="light"],
:root[data-skin="apex"][data-theme="auto"] {

  /* --- acento dourado ---
     Dois papeis, porque dourado nao se comporta como o azul do JustCall:
       PREENCHIMENTO (#CEA046) — fundo de botao, sublinhado de aba, borda do nav
         ativo, serie de grafico. Aqui o dourado da identidade brilha.
       TEXTO (#8A6A20) — dourado como COR DE TEXTO sobre branco. #CEA046 em
         branco da 2,3:1 de contraste e fica ilegivel; #8A6A20 da 5,1:1 e passa
         em AA mantendo a leitura dourada. Decisao de adaptacao, sujeita ao ok
         do Lucas: se ele preferir, basta igualar os dois valores. */
  --apex-primaria:        #CEA046;
  --apex-primaria-hover:  #B08A38;
  --apex-primaria-texto:  #8A6A20;
  --apex-primaria-fraca:  rgba(206,160,70,.12);

  /* --- neutras (identicas ao JustCall) --- */
  --apex-fundo:      #F5F7FA;
  --apex-branco:     #FFFFFF;
  --apex-texto:      #101828;
  --apex-corpo:      #303030;
  --apex-muted:      #667085;
  --apex-borda:      #E4E7EC;
  --apex-hover:      #F9FAFB;
  --apex-th:         #F9FAFB;
  --apex-zebra:      #F7F9FE;
  --apex-pag-ativa:  #F2F4F7;

  /* --- sidebar --- */
  --apex-sidebar:        linear-gradient(176deg,#101828 0%,#111B2E 100%);
  --apex-sidebar-ativo:  #141E33;
  --apex-sidebar-rodape: #1C2838;
  --apex-sidebar-idle:   #98A2B3;
  --apex-sidebar-borda:  rgba(255,255,255,.08);
  --apex-nav-acento:     #E0B45C;   /* dourado clareado p/ contraste no escuro */

  /* --- feedback (pills pastel) --- */
  --apex-ok-txt:    #027A48;  --apex-ok-bg:    #ECFDF3;
  --apex-erro-txt:  #B42318;  --apex-erro-bg:  #FEF3F2;
  --apex-aviso-txt: #B54708;  --apex-aviso-bg: #FFFAEB;
  --apex-info-txt:  #175CD3;  --apex-info-bg:  #EFF8FF;

  /* --- graficos: dourado como serie principal, resto basico --- */
  --apex-graf-1: #CEA046;
  --apex-graf-2: #7E56E3;
  --apex-graf-3: #0BA5EC;
  --apex-graf-4: #38B56A;
  --apex-graf-5: #667085;

  /* ------------------------------------------------------------------
     REMAPEAMENTO: as variaveis que o app inteiro ja consome.
     Trocando aqui, cada var(--x) espalhado pelos 6.000 registros de CSS
     passa a falar apex sem uma linha de markup mudar.
     ------------------------------------------------------------------ */
  --bg:        var(--apex-fundo);
  --surface:   var(--apex-branco);
  --surface2:  var(--apex-hover);
  --border:    var(--apex-borda);
  --border2:   var(--apex-borda);

  /* --accent vira o dourado de TEXTO: no app ele aparece muito mais como cor
     de letra (titulos, links, item ativo) do que como fundo. Os poucos usos de
     preenchimento sao corrigidos um a um nas secoes 5 a 14. */
  --accent:    var(--apex-primaria-texto);
  --accent2:   var(--apex-primaria);

  --green:  var(--apex-ok-txt);
  --red:    var(--apex-erro-txt);
  --yellow: var(--apex-aviso-txt);
  --blue:   var(--apex-info-txt);

  --text:   var(--apex-texto);
  --muted:  var(--apex-muted);
  --muted2: var(--apex-muted);

  --radius:     8px;   /* cards */
  --radius-sm:  4px;   /* botoes e campos */

  --shadow-card: none;             /* a UI nova aboliu sombra em card */
  --input-bg:    var(--apex-branco);

  /* aliases legados (octopus-v3.js usa --sidebar-bg como fundo de MODAL,
     por isso ele fica branco, e a sidebar de verdade e pintada na secao 3) */
  --sidebar-bg:  var(--apex-branco);
  --text-muted:  var(--apex-muted);
  --border-color: var(--apex-borda);
  --warning: var(--apex-aviso-txt);
  --success: var(--apex-ok-txt);
  --danger:  var(--apex-erro-txt);
  --info:    var(--apex-info-txt);

  --sub-bg: var(--apex-sidebar-ativo);

  color-scheme: light;
}


/* ===== 2. BASE E CHROME DA PAGINA ======================================== */

:root[data-skin="apex"] body {
  font-family: var(--apex-fonte);
  font-size: 14px;
  color: var(--apex-corpo);
  background: var(--apex-fundo);
  -webkit-font-smoothing: antialiased;
}

/* Familia unica em TODA a UI. A assinatura da marca reabre a excecao na sec. 4 */
:root[data-skin="apex"] body,
:root[data-skin="apex"] button,
:root[data-skin="apex"] input,
:root[data-skin="apex"] select,
:root[data-skin="apex"] textarea,
:root[data-skin="apex"] h1, :root[data-skin="apex"] h2, :root[data-skin="apex"] h3,
:root[data-skin="apex"] h4, :root[data-skin="apex"] h5, :root[data-skin="apex"] h6 {
  font-family: var(--apex-fonte);
}

:root[data-skin="apex"] .main,
:root[data-skin="apex"] .team-main { background: var(--apex-fundo); }

/* Barra de rolagem discreta, no tom das neutras */
:root[data-skin="apex"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-skin="apex"] ::-webkit-scrollbar-track { background: var(--apex-fundo); }
:root[data-skin="apex"] ::-webkit-scrollbar-thumb { background: #D0D5DD; border-radius: 6px; border: 2px solid var(--apex-fundo); }
:root[data-skin="apex"] ::-webkit-scrollbar-thumb:hover { background: #B0B7C3; }

/* Links: dourado de texto, sem sublinhado permanente */
:root[data-skin="apex"] a { color: var(--apex-primaria-texto); text-decoration: none; }
:root[data-skin="apex"] a:hover { text-decoration: underline; }

/* Seleção de texto no dourado da marca */
:root[data-skin="apex"] ::selection { background: rgba(206,160,70,.28); color: var(--apex-texto); }

/* A UI antiga usava brilho/blur decorativo. A apex nao tem nada disso. */
:root[data-skin="apex"] .card-glow,
:root[data-skin="apex"] .exec-card-glow { display: none !important; }


/* ===== 3. SIDEBAR ========================================================
   Unica area de cor solida da tela: gradiente escuro, 230px, item ativo com
   borda esquerda dourada de 4px. Vale para as duas sidebars do app
   (.sidebar do index.php e .team-sidebar do team.php).
   ========================================================================= */

:root[data-skin="apex"] .sidebar,
:root[data-skin="apex"] .team-sidebar {
  background: var(--apex-sidebar) !important;
  border-right: none !important;
  box-shadow: none;
}
:root[data-skin="apex"] .sidebar { width: 230px; padding: 20px 0; }
:root[data-skin="apex"] .team-sidebar { width: 230px; padding: 20px 12px; }

:root[data-skin="apex"] .sidebar-logo,
:root[data-skin="apex"] .team-sidebar-logo {
  border-bottom: 1px solid var(--apex-sidebar-borda);
}
:root[data-skin="apex"] .sidebar-logo.is-admin:hover { background: rgba(255,255,255,.04); }
:root[data-skin="apex"] .sidebar-logo-hint { color: var(--apex-sidebar-idle); }
:root[data-skin="apex"] .team-sidebar-logo .team-brand-name { color: #FFFFFF; }
:root[data-skin="apex"] .team-sidebar-logo .team-brand-sub { color: var(--apex-sidebar-idle); }

/* --- itens de navegacao: 38px, idle #98A2B3, ativo branco com barra dourada --- */
:root[data-skin="apex"] .nav-item,
:root[data-skin="apex"] .nav-group-header,
:root[data-skin="apex"] .team-nav-item {
  color: var(--apex-sidebar-idle);
  font-size: 14px;
  font-weight: 400;
  min-height: 38px;
  padding: 8px 8px 8px 20px;
  border-radius: 0;
  background: transparent;
  transition: background .12s, color .12s;
}
:root[data-skin="apex"] .team-nav-item { border-radius: 6px; padding-left: 14px; }

:root[data-skin="apex"] .nav-item:hover,
:root[data-skin="apex"] .nav-group-header:hover,
:root[data-skin="apex"] .team-nav-item:hover {
  background: rgba(255,255,255,.05);
  color: #FFFFFF;
}

:root[data-skin="apex"] .nav-item.active,
:root[data-skin="apex"] .nav-group-header.active,
:root[data-skin="apex"] .team-nav-item.active {
  background: var(--apex-sidebar-ativo) !important;
  color: #FFFFFF !important;
  font-weight: 500;
  box-shadow: none;
}
:root[data-skin="apex"] .nav-item.active::before,
:root[data-skin="apex"] .nav-group-header.active::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; border-radius: 0;
  background: var(--apex-nav-acento);
}
:root[data-skin="apex"] .team-nav-item.active {
  box-shadow: inset 4px 0 0 var(--apex-nav-acento) !important;
}

:root[data-skin="apex"] .nav-icon,
:root[data-skin="apex"] .team-nav-icon { opacity: .85; }
:root[data-skin="apex"] .nav-item.active .nav-icon,
:root[data-skin="apex"] .team-nav-item.active .team-nav-icon { opacity: 1; }

/* --- sub-itens (cascata do grupo Comercial) --- */
:root[data-skin="apex"] .nav-subitems {
  border-left: 1px solid var(--apex-sidebar-borda);
  background: transparent;
}
:root[data-skin="apex"] .nav-subitem {
  color: var(--apex-sidebar-idle);
  font-size: 13px;
}
:root[data-skin="apex"] .nav-subitem:hover { background: rgba(255,255,255,.05); color: #FFFFFF; }
:root[data-skin="apex"] .nav-subitem.active { color: var(--apex-nav-acento); font-weight: 500; background: transparent; }
:root[data-skin="apex"] .nav-subitem.active::before { background: var(--apex-nav-acento); }

/* --- rodape da sidebar: faixa #1C2838 --- */
:root[data-skin="apex"] .sidebar-bottom,
:root[data-skin="apex"] .team-sidebar-footer {
  border-top: 1px solid var(--apex-sidebar-borda);
}
:root[data-skin="apex"] .team-user-row {
  background: var(--apex-sidebar-rodape);
  border-radius: 6px;
  padding: 10px 10px;
}
:root[data-skin="apex"] .user-name,
:root[data-skin="apex"] .team-user-name { color: #FFFFFF; font-weight: 500; }
:root[data-skin="apex"] .user-info,
:root[data-skin="apex"] .team-user-cargo { color: var(--apex-sidebar-idle); }
/* RODADA 18 (2026-08-31, auditoria): o #sidebar-user-name do index.php vinha com o creme
   #f0e6d3 da folha base (escrita pra sidebar escura antiga) e sumia sobre o rodape claro
   da pele. Mesmo defeito de familia que a auditoria R17 achou no client.php. O token
   --apex-texto vira claro no tema escuro, entao a regra vale pros dois temas. */
:root[data-skin="apex"] .sidebar-user-name { color: var(--apex-texto); }
:root[data-skin="apex"] .team-user-avatar {
  background: var(--apex-primaria);
  color: #101828;
  font-weight: 600;
}
:root[data-skin="apex"] .btn-logout,
:root[data-skin="apex"] .team-logout-btn {
  background: transparent;
  border: 1px solid var(--apex-sidebar-borda);
  color: var(--apex-sidebar-idle);
  border-radius: 4px;
  font-weight: 500;
}
:root[data-skin="apex"] .btn-logout:hover,
:root[data-skin="apex"] .team-logout-btn:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.2);
  color: #FFFFFF;
}
:root[data-skin="apex"] .team-back-btn {
  background: transparent;
  border: 1px solid var(--apex-sidebar-borda);
  color: var(--apex-sidebar-idle);
  border-radius: 4px;
  font-weight: 500;
}
:root[data-skin="apex"] .team-back-btn:hover {
  background: rgba(255,255,255,.06);
  color: #FFFFFF;
  border-color: rgba(255,255,255,.2);
}
/* --- ITEM 78 (2026-09-04): modo claro quebrado na barra lateral -----------
   Relato da Gaby/Lucas: no tema claro a lateral fica "parte branca e parte mais
   escura". Causa: .team-foot-item (rodape: Calendario, Cursos, Acessos, Solicitacoes)
   e .team-nav-group-h (cabecalho de setor) eram as UNICAS classes da lateral sem
   regra da pele. Elas herdavam os tokens de SUPERFICIE do tema (--muted2 no texto,
   --surface2 no hover), escritos para fundo claro, mas a lateral da APEX e escura
   nos dois temas. No escuro passava despercebido porque --surface2 tambem e escuro;
   no claro virava bloco branco sobre a faixa navy. Aqui elas passam a usar a mesma
   paleta dos .team-nav-item, entao o tema deixa de influir na lateral.
   -------------------------------------------------------------------------- */
:root[data-skin="apex"] .team-foot-item,
:root[data-skin="apex"] .team-nav-group-h,
:root[data-skin="apex"] .nav-setor-h {
  color: var(--apex-sidebar-idle);
  background: transparent;
  border-radius: 6px;
}
:root[data-skin="apex"] .nav-setor-h { opacity: 1; }
:root[data-skin="apex"] .team-foot-item:hover,
:root[data-skin="apex"] .nav-setor-h:hover,
:root[data-skin="apex"] .team-nav-group-h:hover {
  background: rgba(255,255,255,.05);
  color: #FFFFFF;
}
:root[data-skin="apex"] .team-nav-group.open > .team-nav-group-h { color: var(--apex-nav-acento); }
:root[data-skin="apex"] .team-nav-sub { border-left: 1px solid var(--apex-sidebar-borda); }
:root[data-skin="apex"] .team-user-row[role="button"]:hover { background: rgba(255,255,255,.06); }
:root[data-skin="apex"] .team-user-row[role="button"]:focus-visible { outline: 2px solid var(--apex-nav-acento); }

:root[data-skin="apex"] .nav-badge,
:root[data-skin="apex"] .team-nav-badge {
  background: #F04438;
  color: #FFFFFF;
  box-shadow: none;
}
:root[data-skin="apex"] .nav-badge.warn { background: var(--apex-aviso-txt); color: #FFFFFF; }


/* ===== 4. CABECALHOS DE PAGINA E SECAO ===================================
   Escala curta do documento: 12 / 13 / 14 / 16 / 18 / 24. Hierarquia por peso
   e cor, nao por tamanho. Titulo de pagina 18/600, de secao 16/600.
   ========================================================================= */

:root[data-skin="apex"] .page-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--apex-borda);
}
:root[data-skin="apex"] .page-title,
:root[data-skin="apex"] .team-page-title {
  font-family: var(--apex-fonte);
  font-size: 18px;
  font-weight: 600;
  color: var(--apex-texto);
  letter-spacing: 0;
}
:root[data-skin="apex"] .page-subtitle,
:root[data-skin="apex"] .team-page-sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--apex-muted);
}
:root[data-skin="apex"] .section-title,
:root[data-skin="apex"] .team-section-title {
  font-family: var(--apex-fonte);
  font-size: 16px;
  font-weight: 600;
  color: var(--apex-texto);
}
:root[data-skin="apex"] .section-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--apex-borda);
}

/* Assinatura da marca: unico lugar onde Playfair sobrevive, porque ali ele nao
   e tipografia de interface e sim o logotipo escrito. */
:root[data-skin="apex"] .team-dash-brand-name,
:root[data-skin="apex"] .team-dash-brand-sub {
  font-family: var(--apex-fonte-marca);
  font-size: 22px;
}
:root[data-skin="apex"] .team-dash-brand-name { color: var(--apex-texto); font-weight: 700; }
:root[data-skin="apex"] .team-dash-brand-sub  { color: var(--apex-primaria-texto); }
:root[data-skin="apex"] .team-dash-brand-header { border-bottom: none; padding-bottom: 0; }


/* ===== 5. BOTOES =========================================================
   36px de altura, radius 4px, 14px/500, SEM sombra e SEM gradiente.
   Dourado so no primario; todo o resto e branco com borda hairline.
   ========================================================================= */

:root[data-skin="apex"] .btn,
:root[data-skin="apex"] .btn-primary,
:root[data-skin="apex"] .btn-secondary,
:root[data-skin="apex"] .btn-cancel,
:root[data-skin="apex"] .btn-save,
:root[data-skin="apex"] .action-btn,
:root[data-skin="apex"] .vd-btn,
:root[data-skin="apex"] .team-btn {
  font-family: var(--apex-fonte);
  font-size: 14px;
  font-weight: 500;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 4px;
  box-shadow: none !important;
  letter-spacing: 0;
  transition: background .12s, border-color .12s, color .12s;
}

/* --- primario: dourado solido, texto quase preto ---
   O documento pede texto branco no primario, o que funciona com o azul do
   JustCall (8,8:1) mas nao com o dourado (2,2:1, ilegivel). Mantido #101828,
   que da 9,1:1 sobre #CEA046 e preserva o dourado cheio da marca. */
:root[data-skin="apex"] .btn-primary,
:root[data-skin="apex"] .btn-save,
:root[data-skin="apex"] .btn-login {
  background: var(--apex-primaria) !important;
  background-image: none !important;
  color: #101828 !important;
  border: 1px solid var(--apex-primaria) !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
:root[data-skin="apex"] .btn-primary:hover,
:root[data-skin="apex"] .btn-save:hover,
:root[data-skin="apex"] .btn-login:hover {
  background: var(--apex-primaria-hover) !important;
  border-color: var(--apex-primaria-hover) !important;
  filter: none !important;
  transform: none !important;
  opacity: 1;
}
:root[data-skin="apex"] .btn-login {
  font-family: var(--apex-fonte);
  border-radius: 4px;
  padding: 0 16px;
  min-height: 40px;
}

/* --- secundario: branco, borda hairline --- */
:root[data-skin="apex"] .btn-secondary,
:root[data-skin="apex"] .btn-cancel,
:root[data-skin="apex"] .action-btn {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  color: var(--apex-texto);
}
:root[data-skin="apex"] .btn-secondary:hover,
:root[data-skin="apex"] .btn-cancel:hover,
:root[data-skin="apex"] .action-btn:hover {
  background: var(--apex-hover);
  border-color: #D0D5DD;
  color: var(--apex-texto);
}

/* --- destrutivo: vermelho semantico, sem !important gritante --- */
:root[data-skin="apex"] .btn-danger {
  background: #D92D20 !important;
  border: 1px solid #D92D20 !important;
  color: #FFFFFF !important;
}
:root[data-skin="apex"] .btn-danger:hover { background: #B42318 !important; border-color: #B42318 !important; }
:root[data-skin="apex"] .btn-danger-soft {
  background: var(--apex-erro-bg);
  border: 1px solid #FDA29B;
  color: var(--apex-erro-txt);
}
:root[data-skin="apex"] .btn-danger-soft:hover { background: #FEE4E2; border-color: #F97066; color: var(--apex-erro-txt); }

/* --- aprovar / bloquear (admin) em pastel --- */
:root[data-skin="apex"] .btn-approve {
  background: var(--apex-ok-bg); border: 1px solid #A6F4C5; color: var(--apex-ok-txt);
}
:root[data-skin="apex"] .btn-approve:hover { background: #D1FADF; color: var(--apex-ok-txt); }
:root[data-skin="apex"] .btn-block {
  background: var(--apex-erro-bg); border: 1px solid #FDA29B; color: var(--apex-erro-txt);
}
:root[data-skin="apex"] .btn-block:hover { background: #FEE4E2; color: var(--apex-erro-txt); }

/* --- botao de icone em linha de tabela: 36x36, branco, borda hairline --- */
:root[data-skin="apex"] .vd-icon-btn,
:root[data-skin="apex"] .icon-btn,
:root[data-skin="apex"] .table-action-btn {
  width: 36px; height: 36px; min-height: 36px;
  padding: 0;
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 4px;
  color: var(--apex-texto);
  box-shadow: none;
}
:root[data-skin="apex"] .vd-icon-btn:hover,
:root[data-skin="apex"] .icon-btn:hover,
:root[data-skin="apex"] .table-action-btn:hover { background: var(--apex-hover); border-color: #D0D5DD; }

/* --- botao-link: texto dourado, sem fundo --- */
:root[data-skin="apex"] .btn-link,
:root[data-skin="apex"] .link-btn {
  background: none; border: none; box-shadow: none;
  color: var(--apex-primaria-texto);
  font-size: 14px; font-weight: 500; padding: 0; min-height: 0;
}
:root[data-skin="apex"] .btn-link:hover,
:root[data-skin="apex"] .link-btn:hover { text-decoration: underline; background: none; }

/* --- login com Google: alinhado ao secundario --- */
:root[data-skin="apex"] .btn-google {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 4px;
  color: var(--apex-texto);
  font-weight: 500;
  min-height: 40px;
}
:root[data-skin="apex"] .btn-google:hover { background: var(--apex-hover); }

:root[data-skin="apex"] .btn:disabled,
:root[data-skin="apex"] .btn[disabled] { opacity: .5; }


/* ===== 6. ABAS ===========================================================
   Sem caixa e sem fundo: so o sublinhado dourado de 3px marca a ativa.
   ========================================================================= */

:root[data-skin="apex"] .admin-tabs,
:root[data-skin="apex"] .subtabs-bar,
:root[data-skin="apex"] .vd-tabs,
:root[data-skin="apex"] .team-tabs {
  border-bottom: 1px solid var(--apex-borda);
  gap: 0;
  margin-bottom: 20px;
}
:root[data-skin="apex"] .admin-tab-btn,
:root[data-skin="apex"] .subtabs-bar .subtab,
:root[data-skin="apex"] .vd-tab,
:root[data-skin="apex"] .team-tab {
  font-family: var(--apex-fonte);
  font-size: 14px;
  font-weight: 400;
  color: var(--apex-muted);
  background: none;
  border: none;
  border-radius: 0;
  padding: 10px 16px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  text-transform: none;
  letter-spacing: 0;
}
:root[data-skin="apex"] .admin-tab-btn:hover,
:root[data-skin="apex"] .subtabs-bar .subtab:hover,
:root[data-skin="apex"] .vd-tab:hover,
:root[data-skin="apex"] .team-tab:hover { color: var(--apex-texto); background: none; }

:root[data-skin="apex"] .admin-tab-btn.active,
:root[data-skin="apex"] .subtabs-bar .subtab.active,
:root[data-skin="apex"] .vd-tab.active,
:root[data-skin="apex"] .team-tab.active {
  color: var(--apex-texto);
  font-weight: 500;
  background: none;
  border-bottom: 3px solid var(--apex-primaria);
}
:root[data-skin="apex"] .admin-tab-badge { background: #F04438; color: #FFFFFF; font-weight: 600; }

/* Botoes de periodo (Dia / Semana / Quinzena / Mes / Periodo todo) e demais
   alternadores viram um segmented control neutro com o selecionado dourado. */
:root[data-skin="apex"] .vd-per-btn,
:root[data-skin="apex"] .vd-view-btn,
:root[data-skin="apex"] .obs-view-toggle button,
:root[data-skin="apex"] .team-cal-view-switch button {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 4px;
  color: var(--apex-texto);
  font-family: var(--apex-fonte);
  font-size: 14px;
  font-weight: 500;
  min-height: 36px;
  padding: 0 14px;
  box-shadow: none;
}
:root[data-skin="apex"] .vd-per-btn:hover,
:root[data-skin="apex"] .vd-view-btn:hover,
:root[data-skin="apex"] .obs-view-toggle button:hover,
:root[data-skin="apex"] .team-cal-view-switch button:hover { background: var(--apex-hover); }

:root[data-skin="apex"] .vd-per-btn.active,
:root[data-skin="apex"] .vd-view-btn.active,
:root[data-skin="apex"] .obs-view-toggle button.active,
:root[data-skin="apex"] .team-cal-view-switch button.active {
  background: var(--apex-primaria);
  border-color: var(--apex-primaria);
  color: #101828;
  font-weight: 600;
}


/* ===== 7. CARDS E KPIs ===================================================
   Branco, radius 8px, borda 1px hairline, SEM sombra, padding 24px.
   KPI: label muted 14 + numero 24/600 + pill pastel de variacao.
   ========================================================================= */

:root[data-skin="apex"] .card,
:root[data-skin="apex"] .exec-section,
:root[data-skin="apex"] .profile-card,
:root[data-skin="apex"] .team-member-card,
:root[data-skin="apex"] .vd-table-card,
:root[data-skin="apex"] .vd-lead-card,
:root[data-skin="apex"] .vd-obj-card,
:root[data-skin="apex"] .vd-price-card,
:root[data-skin="apex"] .vd-import-card,
:root[data-skin="apex"] .integration-card,
:root[data-skin="apex"] .dash-next-events .ne-card,
:root[data-skin="apex"] .table-wrap {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: none !important;
}
:root[data-skin="apex"] .card { padding: 20px 24px; }
:root[data-skin="apex"] .card:hover,
:root[data-skin="apex"] .team-member-card:hover {
  border-color: #D0D5DD;
  transform: none;   /* a apex nao levanta card no hover */
}
:root[data-skin="apex"] .dash-next-events .ne-card:hover { border-color: #D0D5DD; }

/* --- KPI --- */
:root[data-skin="apex"] .card-label,
:root[data-skin="apex"] .kpi-label,
:root[data-skin="apex"] .vd-kpi-label,
:root[data-skin="apex"] .stat-label {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;   /* o documento e explicito: sem caixa alta */
  color: var(--apex-muted);
  margin-bottom: 8px;
}
:root[data-skin="apex"] .card-value,
:root[data-skin="apex"] .kpi-value,
:root[data-skin="apex"] .vd-kpi-value,
:root[data-skin="apex"] .stats-value,
:root[data-skin="apex"] .summary-value {
  font-family: var(--apex-fonte);
  font-size: 24px;
  font-weight: 600;
  color: var(--apex-corpo);
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}
/* Numeros semanticos: o valor em si fica escuro; a COR vai para a pill de
   variacao. Assim o painel para de ser um mostruario de neon. */
:root[data-skin="apex"] .card-value.green,
:root[data-skin="apex"] .card-value.red,
:root[data-skin="apex"] .card-value.yellow,
:root[data-skin="apex"] .card-value.blue { color: var(--apex-corpo); }

:root[data-skin="apex"] .card-sub,
:root[data-skin="apex"] .vd-kpi-sub,
:root[data-skin="apex"] .stat-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--apex-muted);
  margin-top: 6px;
}
:root[data-skin="apex"] .cards-grid { gap: 16px; margin-bottom: 24px; }

/* Delta de KPI como pill pastel (capsula 34px, 12/500) */
:root[data-skin="apex"] .exec-card-delta,
:root[data-skin="apex"] .kpi-delta,
:root[data-skin="apex"] .vd-kpi-delta {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 34px;
  margin-top: 8px;
}
:root[data-skin="apex"] .exec-card-delta.up,
:root[data-skin="apex"] .kpi-delta.up   { background: var(--apex-ok-bg);   color: var(--apex-ok-txt); }
:root[data-skin="apex"] .exec-card-delta.down,
:root[data-skin="apex"] .kpi-delta.down { background: var(--apex-erro-bg); color: var(--apex-erro-txt); }
:root[data-skin="apex"] .exec-card-delta.flat,
:root[data-skin="apex"] .kpi-delta.flat { background: var(--apex-pag-ativa); color: var(--apex-muted); }

/* Estado vazio: hairline tracejada, sem caixa escura */
:root[data-skin="apex"] .team-empty-state,
:root[data-skin="apex"] .vd-empty,
:root[data-skin="apex"] .vd-kanban-empty,
:root[data-skin="apex"] .coming-soon {
  background: var(--apex-branco);
  border: 1px dashed var(--apex-borda);
  border-radius: 8px;
  color: var(--apex-muted);
  font-size: 14px;
}


/* ===== 8. TABELAS ========================================================
   th 12px/500 muted em #F9FAFB SEM caixa alta, td 14px, linha arejada,
   hover #F9FAFB, separador hairline. Nada de zebra na tabela padrao.
   ========================================================================= */

:root[data-skin="apex"] .table-wrap { overflow: hidden; }
:root[data-skin="apex"] .table-wrap > table,
:root[data-skin="apex"] .vd-table,
:root[data-skin="apex"] .data-table,
:root[data-skin="apex"] .users-table { font-size: 14px; }

:root[data-skin="apex"] thead th,
:root[data-skin="apex"] .vd-table thead th,
:root[data-skin="apex"] .data-table thead th,
:root[data-skin="apex"] .users-table thead th {
  background: var(--apex-th);
  color: var(--apex-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 16px;
  border-bottom: 1px solid var(--apex-borda);
  white-space: nowrap;
}
:root[data-skin="apex"] tbody td,
:root[data-skin="apex"] .vd-table tbody td,
:root[data-skin="apex"] .data-table tbody td,
:root[data-skin="apex"] .users-table tbody td {
  font-size: 14px;
  color: var(--apex-texto);
  padding: 14px 16px;
  border-bottom: 1px solid var(--apex-borda);
  vertical-align: middle;
}
:root[data-skin="apex"] tbody tr:hover td,
:root[data-skin="apex"] .vd-table tbody tr:hover,
:root[data-skin="apex"] .vd-table tbody tr:hover td,
:root[data-skin="apex"] .users-table tr:hover td { background: var(--apex-hover); }
:root[data-skin="apex"] tbody tr:last-child td { border-bottom: none; }

/* A coluna de acoes gruda na direita: sem a sombra preta da versao escura */
:root[data-skin="apex"] .table-wrap > table td:last-child {
  background: var(--apex-branco);
  box-shadow: -6px 0 6px -7px rgba(16,24,40,.12);
}
:root[data-skin="apex"] .table-wrap > table tr:hover td:last-child { background: var(--apex-hover); }

:root[data-skin="apex"] .vd-cell-primary { font-weight: 500; color: var(--apex-texto); }
:root[data-skin="apex"] .vd-cell-sub,
:root[data-skin="apex"] .vd-muted-cell { color: var(--apex-muted); font-size: 12px; }
:root[data-skin="apex"] .th-sort:hover { color: var(--apex-primaria-texto); }

/* Versao densa (analytics antiga do JustCall): zebra discreta */
:root[data-skin="apex"] .vd-mini-table tbody tr:nth-child(even) td,
:root[data-skin="apex"] .vd-preview-table tbody tr:nth-child(even) td { background: var(--apex-zebra); }
:root[data-skin="apex"] .vd-mini-table td,
:root[data-skin="apex"] .vd-preview-table td { padding: 8px 12px; font-size: 13px; }

/* Paginacao em quadrados 36x36 radius 6px */
:root[data-skin="apex"] .pagination button,
:root[data-skin="apex"] .pagination a,
:root[data-skin="apex"] .pager-btn {
  width: 36px; height: 36px; min-height: 36px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--apex-muted);
  font-size: 14px; font-weight: 500;
}
:root[data-skin="apex"] .pagination button:hover,
:root[data-skin="apex"] .pager-btn:hover { background: var(--apex-hover); color: var(--apex-texto); }
:root[data-skin="apex"] .pagination button.active,
:root[data-skin="apex"] .pager-btn.active { background: var(--apex-pag-ativa); color: var(--apex-texto); }


/* ===== 9. CAMPOS DE FORMULARIO ===========================================
   36px, branco, borda hairline, radius 4px, foco na cor do acento.
   ========================================================================= */

:root[data-skin="apex"] input[type="text"],
:root[data-skin="apex"] input[type="email"],
:root[data-skin="apex"] input[type="password"],
:root[data-skin="apex"] input[type="number"],
:root[data-skin="apex"] input[type="tel"],
:root[data-skin="apex"] input[type="search"],
:root[data-skin="apex"] input[type="date"],
:root[data-skin="apex"] input[type="time"],
:root[data-skin="apex"] select,
:root[data-skin="apex"] textarea,
:root[data-skin="apex"] .input-field,
:root[data-skin="apex"] .form-group input,
:root[data-skin="apex"] .obs-search,
:root[data-skin="apex"] .vd-search,
:root[data-skin="apex"] .team-filter-select,
:root[data-skin="apex"] .month-selector {
  font-family: var(--apex-fonte);
  font-size: 14px;
  color: var(--apex-texto);
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 4px;
  min-height: 36px;
  padding: 7px 12px;
  box-shadow: none;
  transition: border-color .12s, box-shadow .12s;
}
:root[data-skin="apex"] textarea { min-height: 88px; padding: 10px 12px; line-height: 1.5; }

:root[data-skin="apex"] input:focus,
:root[data-skin="apex"] select:focus,
:root[data-skin="apex"] textarea:focus,
:root[data-skin="apex"] .form-group input:focus {
  outline: none;
  border-color: var(--apex-primaria);
  box-shadow: 0 0 0 3px rgba(206,160,70,.18);
}
:root[data-skin="apex"] ::placeholder { color: var(--apex-muted); opacity: 1; }

/* Rotulos: 12px muted, sem caixa alta nem letter-spacing esticado */
:root[data-skin="apex"] .form-group label,
:root[data-skin="apex"] .field-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--apex-muted);
  margin-bottom: 6px;
}

:root[data-skin="apex"] .input-error,
:root[data-skin="apex"] input.input-error,
:root[data-skin="apex"] select.input-error,
:root[data-skin="apex"] textarea.input-error {
  border-color: #FDA29B !important;
  box-shadow: 0 0 0 3px rgba(217,45,32,.14) !important;
}

/* Toggle do modo master: pastilha neutra que acende dourado */
:root[data-skin="apex"] .master-edit-toggle input[type="checkbox"] { background: #E4E7EC; border-color: #D0D5DD; }
:root[data-skin="apex"] .master-edit-toggle input[type="checkbox"]::before { background: #FFFFFF; }
:root[data-skin="apex"] .master-edit-toggle input[type="checkbox"]:checked { background: var(--apex-primaria); border-color: var(--apex-primaria); }
:root[data-skin="apex"] .master-edit-toggle input[type="checkbox"]:checked::before { background: #FFFFFF; }


/* ===== 10. PILLS, BADGES E CHIPS =========================================
   Todo feedback vira pill pastel: fundo claro + texto escuro da MESMA familia.
   Nunca bloco saturado.
   ========================================================================= */

:root[data-skin="apex"] .vd-pill,
:root[data-skin="apex"] .vd-estado-pill,
:root[data-skin="apex"] .vd-etapa-badge,
:root[data-skin="apex"] .vd-chip,
:root[data-skin="apex"] .badge,
:root[data-skin="apex"] .badge-role,
:root[data-skin="apex"] .badge-status,
:root[data-skin="apex"] .status-pill,
:root[data-skin="apex"] .obs-status {
  display: inline-block;
  font-family: var(--apex-fonte);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  padding: 2px 8px;
  border-radius: 34px;
  border: none;
  letter-spacing: 0;
  text-transform: none;
  background: var(--apex-pag-ativa);
  color: var(--apex-corpo);
}

/* familias semanticas */
:root[data-skin="apex"] .badge-status.active,
:root[data-skin="apex"] .obs-status.ok,
:root[data-skin="apex"] .vd-estado-pill.e-fechou,
:root[data-skin="apex"] .vd-estado-pill.e-ganho,
:root[data-skin="apex"] .pill-ok { background: var(--apex-ok-bg); color: var(--apex-ok-txt); }

:root[data-skin="apex"] .badge-status.blocked,
:root[data-skin="apex"] .obs-status.err,
:root[data-skin="apex"] .vd-estado-pill.e-perdido,
:root[data-skin="apex"] .pill-erro { background: var(--apex-erro-bg); color: var(--apex-erro-txt); }

:root[data-skin="apex"] .badge-status.pending,
:root[data-skin="apex"] .pill-aviso { background: var(--apex-aviso-bg); color: var(--apex-aviso-txt); }

:root[data-skin="apex"] .pill-info { background: var(--apex-info-bg); color: var(--apex-info-txt); }

/* pill dourada: o estado em leads / marcador da marca */
:root[data-skin="apex"] .vd-estado-pill.e-emleads,
:root[data-skin="apex"] .pill-marca { background: var(--apex-primaria-fraca); color: var(--apex-primaria-texto); }

/* chips de filtro: capsula neutra, ativa dourada */
:root[data-skin="apex"] .vd-filter-chip {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 34px;
  color: var(--apex-corpo);
  font-size: 13px; font-weight: 500;
  padding: 5px 12px;
}
:root[data-skin="apex"] .vd-filter-chip:hover { background: var(--apex-hover); }
:root[data-skin="apex"] .vd-filter-chip.active {
  background: var(--apex-primaria-fraca);
  border-color: var(--apex-primaria);
  color: var(--apex-primaria-texto);
}

/* Banners informativos: fundo pastel + hairline, no lugar do bloco escuro */
:root[data-skin="apex"] .vd-info-banner,
:root[data-skin="apex"] .vault-status-locked {
  background: var(--apex-info-bg); border: 1px solid #B2DDFF; color: var(--apex-texto); border-radius: 8px;
}
:root[data-skin="apex"] .vault-status-warn {
  background: var(--apex-aviso-bg); border: 1px solid #FEDF89; color: var(--apex-aviso-txt); border-radius: 8px;
}
:root[data-skin="apex"] .vault-status-ok {
  background: var(--apex-ok-bg); border: 1px solid #A6F4C5; color: var(--apex-ok-txt); border-radius: 8px;
}
:root[data-skin="apex"] .vd-goal-banner {
  background: var(--apex-primaria-fraca);
  border: 1px solid rgba(206,160,70,.4);
  color: var(--apex-texto);
  border-radius: 8px;
}


/* ===== 11. MODAIS E OVERLAYS =============================================
   Painel branco, radius 8px, borda hairline (a versao escura usava borda
   dourada), sombra suave rgba(16,24,40,.08) e fundo do backdrop apagado.
   ========================================================================= */

:root[data-skin="apex"] .modal-overlay,
:root[data-skin="apex"] .team-modal-backdrop,
:root[data-skin="apex"] .overlay-backdrop,
:root[data-skin="apex"] .vd-modal-backdrop { background: rgba(16,24,40,.5); }

:root[data-skin="apex"] .modal,
:root[data-skin="apex"] .team-modal,
:root[data-skin="apex"] .vd-modal,
:root[data-skin="apex"] .dialog-box,
:root[data-skin="apex"] .confirm-box {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: rgba(16,24,40,.08) 0 8px 24px;
  color: var(--apex-texto);
}

:root[data-skin="apex"] .modal-header,
:root[data-skin="apex"] .team-modal-head,
:root[data-skin="apex"] .vd-modal-head {
  background: transparent;
  border-bottom: 1px solid var(--apex-borda);
  padding: 18px 24px;
}
:root[data-skin="apex"] .modal-title,
:root[data-skin="apex"] .team-modal-head h2,
:root[data-skin="apex"] .team-modal-head h3,
:root[data-skin="apex"] .vd-modal-head h2,
:root[data-skin="apex"] .vd-modal-head h3 {
  font-family: var(--apex-fonte);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--apex-texto);
}
:root[data-skin="apex"] .modal-body,
:root[data-skin="apex"] .team-modal-body,
:root[data-skin="apex"] .vd-modal-body { padding: 24px; }

:root[data-skin="apex"] .modal-footer,
:root[data-skin="apex"] .team-modal-footer,
:root[data-skin="apex"] .vd-modal-footer,
:root[data-skin="apex"] .modal-actions {
  background: transparent;
  border-top: 1px solid var(--apex-borda);
  padding: 16px 24px;
}

:root[data-skin="apex"] .modal-close,
:root[data-skin="apex"] .team-modal-close,
:root[data-skin="apex"] .vd-modal-close {
  width: 32px; height: 32px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--apex-muted);
}
:root[data-skin="apex"] .modal-close:hover,
:root[data-skin="apex"] .team-modal-close:hover,
:root[data-skin="apex"] .vd-modal-close:hover { background: var(--apex-hover); color: var(--apex-texto); }

/* Menus suspensos e paineis de filtro: 320px, branco, sombra suave */
:root[data-skin="apex"] .dropdown-menu,
:root[data-skin="apex"] .vd-dropdown,
:root[data-skin="apex"] .filter-panel,
:root[data-skin="apex"] .context-menu,
:root[data-skin="apex"] .autocomplete-list {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: rgba(16,24,40,.08) 0 8px 24px;
  padding: 6px;
}
:root[data-skin="apex"] .dropdown-menu button,
:root[data-skin="apex"] .dropdown-menu a,
:root[data-skin="apex"] .context-menu button,
:root[data-skin="apex"] .autocomplete-list li {
  border-radius: 4px;
  font-size: 14px;
  color: var(--apex-texto);
  padding: 8px 10px;
}
:root[data-skin="apex"] .dropdown-menu button:hover,
:root[data-skin="apex"] .context-menu button:hover,
:root[data-skin="apex"] .autocomplete-list li:hover { background: var(--apex-hover); }

/* Avisos flutuantes (toast) tambem viram cartao claro */
:root[data-skin="apex"] .toast,
:root[data-skin="apex"] .snackbar,
:root[data-skin="apex"] .team-toast {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: rgba(16,24,40,.08) 0 8px 24px;
  color: var(--apex-texto);
  font-size: 14px;
}
:root[data-skin="apex"] .toast.ok,
:root[data-skin="apex"] .team-toast.ok { border-color: #A6F4C5; background: var(--apex-ok-bg); color: var(--apex-ok-txt); }
:root[data-skin="apex"] .toast.err,
:root[data-skin="apex"] .team-toast.err { border-color: #FDA29B; background: var(--apex-erro-bg); color: var(--apex-erro-txt); }


/* ===== 12. KANBAN E CRM ==================================================
   O kanban do vendedor: colunas brancas com cabecalho estilo th, cartoes
   #F9FAFB com hairline. Nada de caixa escura no meio do conteudo.
   ========================================================================= */

:root[data-skin="apex"] .vd-kanban-board { gap: 14px; }

:root[data-skin="apex"] .vd-kanban-col {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: none;
}
:root[data-skin="apex"] .vd-kanban-col.drag-over {
  border-color: var(--apex-primaria);
  background: var(--apex-primaria-fraca);
}
:root[data-skin="apex"] .vd-kanban-col-head {
  background: var(--apex-th);
  color: var(--apex-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 14px;
  border-bottom: 1px solid var(--apex-borda);
  border-radius: 8px 8px 0 0;
}
:root[data-skin="apex"] .vd-kanban-col-count {
  background: var(--apex-pag-ativa);
  color: var(--apex-corpo);
  border: none;
  border-radius: 34px;
  font-size: 12px;
  font-weight: 500;
  padding: 1px 8px;
}

:root[data-skin="apex"] .vd-kanban-card {
  background: var(--apex-th);
  border: 1px solid var(--apex-borda);
  border-radius: 6px;
  box-shadow: none;
  padding: 12px;
}
:root[data-skin="apex"] .vd-kanban-card:hover {
  border-color: #D0D5DD;
  background: var(--apex-branco);
}
:root[data-skin="apex"] .vd-kanban-card.vd-crm-focus {
  outline: none;
  border-color: var(--apex-primaria);
  box-shadow: 0 0 0 3px rgba(206,160,70,.2);
}
:root[data-skin="apex"] .vd-kanban-card-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--apex-texto);
}
:root[data-skin="apex"] .vd-kanban-card-sub,
:root[data-skin="apex"] .vd-kanban-card-meta { font-size: 12px; color: var(--apex-muted); }
:root[data-skin="apex"] .vd-kanban-card-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--apex-primaria-texto);
  font-variant-numeric: tabular-nums;
}

/* Ranking da quinzena */
:root[data-skin="apex"] .vd-rank-me {
  background: var(--apex-primaria-fraca);
  border-radius: 6px;
}
:root[data-skin="apex"] .vd-rank-num {
  color: var(--apex-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
:root[data-skin="apex"] .vd-rank-me .vd-rank-num { color: var(--apex-primaria-texto); }
:root[data-skin="apex"] .vd-rank-premio {
  background: var(--apex-primaria-fraca);
  border: none;
  border-radius: 34px;
  color: var(--apex-primaria-texto);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
}

/* Ficha do lead, interacoes e importacao */
:root[data-skin="apex"] .vd-lf-field input,
:root[data-skin="apex"] .vd-lf-field select,
:root[data-skin="apex"] .vd-lf-field textarea {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 4px;
  min-height: 36px;
  font-size: 14px;
}
:root[data-skin="apex"] .vd-lf-label { font-size: 12px; font-weight: 500; color: var(--apex-muted); text-transform: none; letter-spacing: 0; }

:root[data-skin="apex"] .vd-inter-item {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 6px;
}
:root[data-skin="apex"] .vd-inter-data { font-size: 12px; color: var(--apex-muted); }

:root[data-skin="apex"] .vd-import-box,
:root[data-skin="apex"] .vd-import-card {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: none;
}
:root[data-skin="apex"] .vd-import-h {
  font-family: var(--apex-fonte);
  font-size: 16px;
  font-weight: 600;
  color: var(--apex-texto);
}
:root[data-skin="apex"] .vd-drop-zone {
  background: var(--apex-th);
  border: 1px dashed var(--apex-borda);
  border-radius: 8px;
  color: var(--apex-muted);
}
:root[data-skin="apex"] .vd-drop-zone.drag-over {
  border-color: var(--apex-primaria);
  background: var(--apex-primaria-fraca);
}


/* ===== 13. AGENDA E CALENDARIO ===========================================
   Grade branca com hairline, dia de hoje marcado por fundo pastel dourado,
   marcadores de evento em cor cheia mas pequena.
   ========================================================================= */

:root[data-skin="apex"] .team-cal,
:root[data-skin="apex"] .team-cal-grid,
:root[data-skin="apex"] .calendar-grid {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  overflow: hidden;
}
:root[data-skin="apex"] .team-cal-weekday,
:root[data-skin="apex"] .calendar-weekday {
  background: var(--apex-th);
  color: var(--apex-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--apex-borda);
}
:root[data-skin="apex"] .team-cal-day,
:root[data-skin="apex"] .calendar-day {
  background: var(--apex-branco);
  border-right: 1px solid var(--apex-borda);
  border-bottom: 1px solid var(--apex-borda);
  color: var(--apex-texto);
  font-size: 14px;
}
:root[data-skin="apex"] .team-cal-day:hover,
:root[data-skin="apex"] .calendar-day:hover { background: var(--apex-hover); }
:root[data-skin="apex"] .team-cal-day.other-month,
:root[data-skin="apex"] .calendar-day.other-month { background: var(--apex-th); color: #C4CAD4; }
:root[data-skin="apex"] .team-cal-day.today,
:root[data-skin="apex"] .calendar-day.today {
  background: var(--apex-primaria-fraca);
  color: var(--apex-texto);
  font-weight: 600;
}
:root[data-skin="apex"] .team-cal-day.selected,
:root[data-skin="apex"] .calendar-day.selected {
  background: var(--apex-primaria);
  color: #101828;
  font-weight: 600;
}

:root[data-skin="apex"] .team-cal-dot { background: var(--apex-primaria); }
:root[data-skin="apex"] .team-cal-dot.late { background: #D92D20; }
:root[data-skin="apex"] .team-cal-dot.done { background: #12B76A; }

/* Blocos de horario do wizard de agenda */
:root[data-skin="apex"] .vd-slot,
:root[data-skin="apex"] .team-slot {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 4px;
  color: var(--apex-corpo);
  font-size: 13px;
  min-height: 34px;
}
:root[data-skin="apex"] .vd-slot:hover,
:root[data-skin="apex"] .team-slot:hover { background: var(--apex-hover); }
:root[data-skin="apex"] .vd-slot.selected,
:root[data-skin="apex"] .team-slot.selected {
  background: var(--apex-primaria);
  border-color: var(--apex-primaria);
  color: #101828;
  font-weight: 500;
}
:root[data-skin="apex"] .vd-slot.busy,
:root[data-skin="apex"] .team-slot.busy {
  background: var(--apex-th);
  color: #C4CAD4;
  border-style: dashed;
}

:root[data-skin="apex"] .vd-ag-tipo {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 4px;
  color: var(--apex-corpo);
  font-size: 14px;
  font-weight: 400;
  min-height: 36px;
  padding: 7px 14px;
}
:root[data-skin="apex"] .vd-ag-tipo:hover { background: var(--apex-hover); }
:root[data-skin="apex"] .vd-ag-tipo.active {
  background: var(--apex-primaria);
  border-color: var(--apex-primaria);
  color: #101828;
  font-weight: 500;
}

/* Cartoes de proximos eventos do painel */
:root[data-skin="apex"] .dash-next-events .ne-card {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: none;
}
:root[data-skin="apex"] .dash-next-events .ne-hora {
  color: var(--apex-primaria-texto);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* ===== 14. GRAFICOS ======================================================
   Moldura do grafico igual a de um card, legenda em 12px muted e barras de
   progresso finas. As cores das series vivem no octopus-apex.js, que
   reescreve a configuracao do Chart.js quando a pele esta ligada; aqui ficam
   apenas a caixa e os elementos que sao HTML puro.
   ========================================================================= */

:root[data-skin="apex"] .chart-widget,
:root[data-skin="apex"] .prog-chart-wrap,
:root[data-skin="apex"] .chart-box {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: none;
  padding: 24px;
}
:root[data-skin="apex"] .chart-widget-header,
:root[data-skin="apex"] .prog-chart-toolbar {
  border-bottom: 1px solid var(--apex-borda);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
:root[data-skin="apex"] .chart-widget-title {
  font-family: var(--apex-fonte);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--apex-texto);
}
:root[data-skin="apex"] .chart-hint { font-size: 12px; color: var(--apex-muted); }
:root[data-skin="apex"] .chart-period-badge {
  background: var(--apex-pag-ativa);
  border: none;
  border-radius: 34px;
  color: var(--apex-corpo);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
}

:root[data-skin="apex"] .prog-chart-legend,
:root[data-skin="apex"] .cal-legend {
  font-size: 12px;
  color: var(--apex-muted);
  gap: 16px;
}
:root[data-skin="apex"] .legend-item { font-size: 12px; color: var(--apex-muted); }
:root[data-skin="apex"] .legend-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Barras de progresso: trilho neutro, preenchimento dourado, 6px */
:root[data-skin="apex"] .bar,
:root[data-skin="apex"] .progress-bar,
:root[data-skin="apex"] .task-card-progress,
:root[data-skin="apex"] .lead-score-bar,
:root[data-skin="apex"] .vd-goal-bar,
:root[data-skin="apex"] .vd-meta-bar {
  background: var(--apex-pag-ativa);
  border: none;
  border-radius: 34px;
  height: 6px;
  overflow: hidden;
}
:root[data-skin="apex"] .bar > *,
:root[data-skin="apex"] .progress-bar > *,
:root[data-skin="apex"] .task-card-progress > *,
:root[data-skin="apex"] .lead-score-bar > *,
:root[data-skin="apex"] .vd-goal-bar > *,
:root[data-skin="apex"] .vd-meta-bar > * {
  background: var(--apex-primaria);
  border-radius: 34px;
  box-shadow: none;
}
:root[data-skin="apex"] .bar.ok > *,
:root[data-skin="apex"] .vd-goal-bar.ok > * { background: #12B76A; }
:root[data-skin="apex"] .bar.err > *,
:root[data-skin="apex"] .vd-goal-bar.err > * { background: #D92D20; }

/* Barras de comparacao desenhadas em div (mini graficos do painel) */
:root[data-skin="apex"] .mini-bar,
:root[data-skin="apex"] .vd-bar-fill { background: var(--apex-primaria); border-radius: 3px; }
:root[data-skin="apex"] .mini-bar-track,
:root[data-skin="apex"] .vd-bar-track { background: var(--apex-pag-ativa); border-radius: 3px; }


/* ===== 15. AJUSTES FINAIS E MOBILE =======================================
   Sobras da era escura que ficariam invisiveis ou berrantes no claro, mais o
   comportamento em telas pequenas e o botao que liga e desliga a pele.
   ========================================================================= */

/* Texto branco cravado no atributo style so e sobra da era escura quando o
   elemento NAO define fundo proprio. Se ele define (botao do Instagram, do
   Pinterest, badge vermelho), o branco foi escolhido de proposito e fica. */
:root[data-skin="apex"] [style*="color:#fff"]:not([style*="background"]),
:root[data-skin="apex"] [style*="color: #fff"]:not([style*="background"]),
:root[data-skin="apex"] [style*="color:#ffffff"]:not([style*="background"]) { color: var(--apex-texto) !important; }

/* Divisores e faixas escuras remanescentes */
:root[data-skin="apex"] hr,
:root[data-skin="apex"] .divider,
:root[data-skin="apex"] .separator { border-color: var(--apex-borda); background: var(--apex-borda); }

/* Barras de ferramentas: fundo da pagina, separador hairline, sem caixa */
:root[data-skin="apex"] .team-toolbar,
:root[data-skin="apex"] .vd-toolbar,
:root[data-skin="apex"] .dash-toolbar,
:root[data-skin="apex"] .tasks-toolbar,
:root[data-skin="apex"] .hub-toolbar,
:root[data-skin="apex"] .obs-toolbar,
:root[data-skin="apex"] .filter-bar,
:root[data-skin="apex"] .leads-filter-bar,
:root[data-skin="apex"] .vd-leads-toolbar,
:root[data-skin="apex"] .team-cal-toolbar,
:root[data-skin="apex"] .team-dash-toolbar {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--apex-borda);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 14px;
  margin-bottom: 18px;
}

/* Faixa de resumo e rodapes de secao */
:root[data-skin="apex"] .summary-bar,
:root[data-skin="apex"] .vault-status-bar {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: none;
  color: var(--apex-corpo);
  font-size: 14px;
}

/* Botao do panico: acao unica e forte, entao ele fica solido dourado */
:root[data-skin="apex"] .vd-panic-btn,
:root[data-skin="apex"] .panic-fab {
  background: var(--apex-primaria);
  color: #101828;
  border: 1px solid var(--apex-primaria-hover);
  box-shadow: rgba(16,24,40,.16) 0 6px 20px;
  font-weight: 600;
}
:root[data-skin="apex"] .vd-panic-btn:hover,
:root[data-skin="apex"] .panic-fab:hover { background: var(--apex-primaria-hover); }

/* Cores de pessoa na agenda (borda esquerda de 3px) ficam pastel no claro:
   o octopus-apex.js troca a paleta, aqui so garantimos espessura legivel. */
:root[data-skin="apex"] .vd-list-row { border-radius: 6px; }
:root[data-skin="apex"] .vd-list-row:hover { background: var(--apex-hover); }

/* Foco visivel de teclado, que no escuro dependia de sombra clara */
:root[data-skin="apex"] a:focus-visible,
:root[data-skin="apex"] button:focus-visible,
:root[data-skin="apex"] [tabindex]:focus-visible {
  outline: 2px solid var(--apex-primaria);
  outline-offset: 2px;
}

/* Impressao: sem sidebar, tudo branco */
@media print {
  :root[data-skin="apex"] .sidebar,
  :root[data-skin="apex"] .team-sidebar { display: none; }
  :root[data-skin="apex"] .main,
  :root[data-skin="apex"] .team-main { margin-left: 0; background: #FFFFFF; }
}

/* Mobile: a sidebar escura vira gaveta, o resto so respira menos */
@media (max-width: 860px) {
  :root[data-skin="apex"] .main,
  :root[data-skin="apex"] .team-main { margin-left: 0; }
  :root[data-skin="apex"] .card,
  :root[data-skin="apex"] .exec-section,
  :root[data-skin="apex"] .chart-widget,
  :root[data-skin="apex"] .prog-chart-wrap { padding: 16px; }
  :root[data-skin="apex"] .modal-body,
  :root[data-skin="apex"] .team-modal-body,
  :root[data-skin="apex"] .vd-modal-body { padding: 16px; }
  :root[data-skin="apex"] .modal-header,
  :root[data-skin="apex"] .team-modal-head,
  :root[data-skin="apex"] .modal-footer,
  :root[data-skin="apex"] .team-modal-footer { padding: 14px 16px; }
  :root[data-skin="apex"] thead th { padding: 10px 12px; }
  :root[data-skin="apex"] tbody td { padding: 12px; }
  :root[data-skin="apex"] .page-title,
  :root[data-skin="apex"] .team-page-title { font-size: 17px; }
  :root[data-skin="apex"] .card-value { font-size: 22px; }
  :root[data-skin="apex"] .vd-kanban-col { flex-basis: 84vw; }
}

/* ===== Botao de troca de pele: REMOVIDO na rodada 11 (28/08/2026) ========
   A pele APEX passou a ser definitiva por decisao do Lucas, entao o botao
   flutuante "Pele nova / Pele antiga" e seus estilos sairam daqui e do
   octopus-apex.js.
   ========================================================================= */

/* Splash de abertura: era uma tela preta com a marca dourada. Na pele clara
   ela vira branca, senao o app pisca escuro antes de aparecer. */
:root[data-skin="apex"] #boot-splash { background: var(--apex-fundo); }
:root[data-skin="apex"] #boot-splash .bs-word { color: var(--apex-primaria-texto); font-size: 24px; }
:root[data-skin="apex"] #boot-splash .bs-word span { color: var(--apex-texto); }
:root[data-skin="apex"] #boot-splash .bs-spin {
  border-color: rgba(206,160,70,.25);
  border-top-color: var(--apex-primaria);
}

/* ===== 16. PAINEL DO CLIENTE (client.php) ================================
   O client.php nasceu antes e tem vocabulario proprio de tokens, em
   portugues (--preto, --painel, --borda, --gold ...). Como ele tambem e
   100% tokenizado, basta reescrever a lista dele para a pele valer ali
   tambem. O seletor precisa alcancar o body porque o tema claro nativo do
   arquivo redefine os tokens em body[data-tema="claro"], que fica mais
   perto no documento.
   ========================================================================= */

:root[data-skin="apex"] body[data-tema],
:root[data-skin="apex"] body[data-tema="escuro"],
:root[data-skin="apex"] body[data-tema="claro"] {
  --preto: #FFFFFF;              /* barra superior deixa de ser faixa preta */
  --escuro: #F5F7FA;             /* fundo da pagina e do quadro */
  --painel: #FFFFFF;             /* colunas do quadro, sidebar interna */
  --painel2: #F9FAFB;            /* segundo nivel, hover de botao secundario */
  --card: #FFFFFF;
  --card-hover: #F9FAFB;
  --borda: #E4E7EC;
  --borda2: #D0D5DD;
  --texto: #101828;
  --texto2: #303030;
  --muted: #667085;
  --gold: #CEA046;
  --gold-esc: #B08A38;
  --gold-soft: rgba(206,160,70,.12);
  --ok: #027A48;      --ok-bg: #ECFDF3;
  --erro: #B42318;    --erro-bg: #FEF3F2;
  --ajuste: #B54708;  --ajuste-bg: #FFFAEB;
  --pend: #667085;    --pend-bg: #F2F4F7;
  --azul: #0BA5EC;
  --sombra: none;
}

/* O halo dourado no topo do quadro era um efeito de tela escura */
:root[data-skin="apex"] body[data-tema] .main { background: var(--escuro); }

/* Barra superior: branca com hairline, no lugar da faixa preta */
:root[data-skin="apex"] body[data-tema] .topbar {
  background: #FFFFFF;
  border-bottom: 1px solid var(--apex-borda);
  height: 56px;
}

/* Colunas do quadro e cartoes seguem a regra geral: sem sombra */
:root[data-skin="apex"] body[data-tema] .lista {
  background: var(--apex-th);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: none;
}
:root[data-skin="apex"] body[data-tema] .lista__cab { padding: 12px 14px 8px; }
:root[data-skin="apex"] body[data-tema] .lista__nome { font-size: 14px; font-weight: 600; }
:root[data-skin="apex"] body[data-tema] .lista__cnt {
  background: var(--apex-pag-ativa);
  color: var(--apex-corpo);
  border-radius: 34px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
}
:root[data-skin="apex"] body[data-tema] .card {
  background: #FFFFFF;
  border: 1px solid var(--apex-borda);
  border-radius: 6px;
  box-shadow: none;
}
:root[data-skin="apex"] body[data-tema] .card:hover { border-color: #D0D5DD; background: #FFFFFF; }
:root[data-skin="apex"] body[data-tema] .card__titulo { font-size: 14px; color: var(--apex-texto); }
:root[data-skin="apex"] body[data-tema] .card__meta { font-size: 12px; color: var(--apex-muted); }

/* Botoes proprios do painel do cliente na mesma regua dos demais */
:root[data-skin="apex"] body[data-tema] .btn-g {
  height: 36px;
  padding: 0 16px;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid var(--apex-borda);
  color: var(--apex-texto);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}
:root[data-skin="apex"] body[data-tema] .btn-g:hover { background: var(--apex-hover); border-color: var(--apex-borda); color: var(--apex-texto); }
:root[data-skin="apex"] body[data-tema] .btn-gold {
  background: var(--apex-primaria);
  color: #101828;
  border: 1px solid var(--apex-primaria);
}
:root[data-skin="apex"] body[data-tema] .btn-gold:hover { background: var(--apex-primaria-hover); border-color: var(--apex-primaria-hover); filter: none; }

/* Botoes de aprovacao viram pastel, nao blocos saturados */
:root[data-skin="apex"] body[data-tema] .abtn { border-radius: 4px; height: 36px; font-size: 14px; font-weight: 500; }
:root[data-skin="apex"] body[data-tema] .abtn--ok { background: var(--apex-ok-bg); color: var(--apex-ok-txt); border: 1px solid #A6F4C5; }
:root[data-skin="apex"] body[data-tema] .abtn--aj { background: var(--apex-aviso-bg); color: var(--apex-aviso-txt); border: 1px solid #FEDF89; }
:root[data-skin="apex"] body[data-tema] .abtn--no { background: var(--apex-erro-bg); color: var(--apex-erro-txt); border: 1px solid #FDA29B; }

/* Pastilhas de estado e etiquetas do quadro */
:root[data-skin="apex"] body[data-tema] .badge-st,
:root[data-skin="apex"] body[data-tema] .pill,
:root[data-skin="apex"] body[data-tema] .etq,
:root[data-skin="apex"] body[data-tema] .dia-badge,
:root[data-skin="apex"] body[data-tema] .fchip {
  border-radius: 34px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  letter-spacing: 0;
  text-transform: none;
}
:root[data-skin="apex"] body[data-tema] .fchip--ativo {
  background: var(--apex-primaria-fraca);
  color: var(--apex-primaria-texto);
  border-color: var(--apex-primaria);
}

/* Modal do cartao */
:root[data-skin="apex"] body[data-tema] .modal {
  background: #FFFFFF;
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: rgba(16,24,40,.08) 0 8px 24px;
}
:root[data-skin="apex"] body[data-tema] .modal__titulo {
  font-family: var(--apex-fonte);
  font-size: 16px;
  font-weight: 600;
  color: var(--apex-texto);
}
:root[data-skin="apex"] body[data-tema] .scrim,
:root[data-skin="apex"] body[data-tema] .side-scrim { background: rgba(16,24,40,.5); }

/* Calendario do painel do cliente */
:root[data-skin="apex"] body[data-tema] .cal-wrap,
:root[data-skin="apex"] body[data-tema] .cal-grid {
  background: #FFFFFF;
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: none;
}
:root[data-skin="apex"] body[data-tema] .cal-card {
  background: var(--apex-th);
  border: 1px solid var(--apex-borda);
  border-radius: 6px;
  box-shadow: none;
}

/* Grade estilo Instagram e KPIs */
:root[data-skin="apex"] body[data-tema] .ig-cell,
:root[data-skin="apex"] body[data-tema] .gthumb,
:root[data-skin="apex"] body[data-tema] .galeria__palco { border-color: var(--apex-borda); }
:root[data-skin="apex"] body[data-tema] .kpi,
:root[data-skin="apex"] body[data-tema] .mini-stat,
:root[data-skin="apex"] body[data-tema] .painel-card {
  background: #FFFFFF;
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: none;
  padding: 20px;
}
:root[data-skin="apex"] body[data-tema] .sec-tit {
  font-family: var(--apex-fonte);
  font-size: 16px;
  font-weight: 600;
  color: var(--apex-texto);
  letter-spacing: 0;
  text-transform: none;
}

/* --- 16.1 Sidebar do painel do cliente (auditoria da rodada 17, 30/08/2026) ---
   A regra da secao 3 pinta ".sidebar" com o gradiente escuro. Ela foi escrita
   para o index.php, mas o client.php usa a MESMA classe, entao a sidebar dele
   tambem fica escura. Os textos de dentro, porem, continuavam lendo os tokens
   claros do arquivo (--texto #101828, --muted #667085, --borda #E4E7EC): o nome
   do cliente sumia por completo contra o fundo e o resto ficava abaixo do AA.
   Aqui os textos daquela area passam a usar a paleta de sidebar da pele.
   O tema escuro nao muda: la os tokens claros ja eram claros. */
:root[data-skin="apex"] body[data-tema] .side-idcli .nm { color: #FFFFFF; }
:root[data-skin="apex"] body[data-tema] .side-idcli .tp,
:root[data-skin="apex"] body[data-tema] .nav-grupo,
:root[data-skin="apex"] body[data-tema] .sidebar__rodape { color: var(--apex-sidebar-idle); }
:root[data-skin="apex"] body[data-tema] .side-idcli,
:root[data-skin="apex"] body[data-tema] .sidebar__rodape { border-color: var(--apex-sidebar-borda); }


/* ===== 17. TELAS DE ENTRADA E SOBRAS DA ERA ESCURA =======================
   Varredura feita direto na pagina rodando: tudo aqui e um valor escuro
   cravado no CSS antigo que o remapeamento de tokens nao alcanca, porque
   nao usa var(). Sao poucos e todos foram conferidos um a um.
   ========================================================================= */

/* ---- Tela de login ---------------------------------------------------
   O fundo tinha dois halos radiais, dourado e azul, que existiam para
   brilhar sobre o preto. Sobre #F5F7FA viram manchas, entao a tela fica
   chapada. O cartao volta para a regua de card: 8px, hairline, sem sombra.
   ---------------------------------------------------------------------- */
:root[data-skin="apex"] #login-screen {
  background: var(--apex-fundo);
  background-image: none;
}
:root[data-skin="apex"] .login-box {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: none;
  padding: 32px;
}

/* A assinatura da marca continua na serifada; o titulo do 2FA e instrucao
   de uso, entao volta para a fonte de interface. */
:root[data-skin="apex"] #login-title-2fa {
  font-family: var(--apex-fonte) !important;
  /* !important porque esse titulo traz font-family no atributo style do markup */
  font-size: 16px;
  font-weight: 600;
  color: var(--apex-texto);
  margin-bottom: 20px;
}
:root[data-skin="apex"] .login-title-inline { font-size: 28px; }
:root[data-skin="apex"] .login-title span { color: var(--apex-primaria-texto); }
:root[data-skin="apex"] .login-logo { color: var(--apex-primaria-texto); }

/* Entrar com Google e entrar por e-mail sao acoes secundarias: mesma regua
   do botao branco com hairline, sem borda dourada e sem sombra. */
:root[data-skin="apex"] .btn-google,
:root[data-skin="apex"] .btn-email-login {
  height: 40px;
  padding: 0 16px;
  margin-top: 8px;
  background: var(--apex-branco);
  color: var(--apex-texto);
  border: 1px solid var(--apex-borda);
  border-radius: 4px;
  font-family: var(--apex-fonte);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}
:root[data-skin="apex"] .btn-google:hover,
:root[data-skin="apex"] .btn-email-login:hover {
  background: var(--apex-hover);
  box-shadow: none;
}

:root[data-skin="apex"] .login-divider { color: var(--apex-muted); font-size: 12px; }
:root[data-skin="apex"] .login-divider::before,
:root[data-skin="apex"] .login-divider::after { background: var(--apex-borda); }
:root[data-skin="apex"] .login-hint { font-size: 12px; color: var(--apex-muted); }
:root[data-skin="apex"] .login-back-link {
  color: var(--apex-primaria-texto);
  font-size: 14px;
  font-weight: 500;
}
:root[data-skin="apex"] .login-back-link:hover { color: var(--apex-primaria-hover); }
/* R11 (2026-08-28): erro de login visivel tambem na pele APEX, com o
   vermelho da linguagem nova em vez do --red da era escura. */
:root[data-skin="apex"] .login-error { font-size: 14px; color: #D92D20; }
:root[data-skin="apex"] .login-error:not(:empty) {
  border-color: #D92D20;
  background: rgba(217, 45, 32, .06);
}

/* ---- Tela de conta aguardando liberacao ------------------------------- */
:root[data-skin="apex"] #pending-screen { background: var(--apex-fundo); }
:root[data-skin="apex"] .pending-card {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: none;
  padding: 32px;
}
:root[data-skin="apex"] .pending-card h2 {
  font-family: var(--apex-fonte);
  font-size: 18px;
  font-weight: 600;
  color: var(--apex-texto);
}
:root[data-skin="apex"] .pending-card p { color: var(--apex-corpo); font-size: 14px; }
:root[data-skin="apex"] .btn-logout-pending {
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  background: var(--apex-primaria);
  color: #101828;
  border-radius: 4px;
  font-family: var(--apex-fonte);
  font-size: 14px;
  font-weight: 500;
}
:root[data-skin="apex"] .btn-logout-pending:hover { background: var(--apex-primaria-hover); }

/* ---- Pagina de perfil ------------------------------------------------- */
:root[data-skin="apex"] .profile-card {
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 8px;
  box-shadow: none;
  padding: 24px;
}
:root[data-skin="apex"] .avatar-preview,
:root[data-skin="apex"] .sidebar-avatar { border-color: var(--apex-primaria); }
:root[data-skin="apex"] .btn-upload-avatar {
  height: 36px;
  padding: 0 16px;
  background: var(--apex-branco);
  color: var(--apex-texto);
  border: 1px solid var(--apex-borda);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}
:root[data-skin="apex"] .btn-upload-avatar:hover { background: var(--apex-hover); }

/* ---- Sobras avulsas conferidas na varredura --------------------------- */
:root[data-skin="apex"] .badge-role {
  background: var(--apex-pag-ativa);
  color: var(--apex-corpo);
  border-radius: 34px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  letter-spacing: 0;
  text-transform: none;
}
:root[data-skin="apex"] .btn-approve {
  background: var(--apex-ok-bg);
  color: var(--apex-ok-txt);
  border: 1px solid #A6F4C5;
}
:root[data-skin="apex"] .btn-approve:hover { background: #D1FADF; }
:root[data-skin="apex"] .vault-status-ok {
  background: var(--apex-ok-bg);
  color: var(--apex-ok-txt);
}
:root[data-skin="apex"] .users-filters input,
:root[data-skin="apex"] .users-filters select {
  height: 36px;
  background: var(--apex-branco);
  border: 1px solid var(--apex-borda);
  border-radius: 4px;
  color: var(--apex-texto);
  font-size: 14px;
}
:root[data-skin="apex"] .users-table tr:hover td { background: var(--apex-hover); }
:root[data-skin="apex"] .master-edit-toggle input[type="checkbox"] { background: var(--apex-borda); }
:root[data-skin="apex"] .master-edit-toggle input[type="checkbox"]:checked { background: var(--apex-primaria); }
:root[data-skin="apex"] .master-edit-toggle input[type="checkbox"]:checked::before { background: var(--apex-branco); }

/* ---- Barra de rolagem ------------------------------------------------- */
:root[data-skin="apex"] ::-webkit-scrollbar-track { background: var(--apex-fundo); }
:root[data-skin="apex"] ::-webkit-scrollbar-thumb { background: #D0D5DD; border-radius: 34px; }
:root[data-skin="apex"] ::-webkit-scrollbar-thumb:hover { background: #98A2B3; }
/* Dentro da barra lateral escura a rolagem continua escura */
:root[data-skin="apex"] .sidebar ::-webkit-scrollbar-thumb,
:root[data-skin="apex"] .team-sidebar ::-webkit-scrollbar-thumb { background: #344054; }


/* ===== 18. ESTILOS ESCUROS CRAVADOS NO ATRIBUTO STYLE ====================
   Um punhado de paineis, botoes e campos nasceu com o estilo escrito direto
   no atributo style do markup. Estilo embutido vence folha, entao a unica
   forma de alcancar sem mexer na marcacao e casar pelo proprio valor e usar
   !important. A lista abaixo saiu de uma varredura nos tres arquivos, nao e
   chute: cada seletor corresponde a uma ocorrencia real.

   Vantagem do metodo: continua reversivel. Desligando a pele, o atributo
   original volta a valer sozinho, intacto.
   ========================================================================= */

/* Painel e casca de modal escritos como #222629 */
:root[data-skin="apex"] [style*="background:#222629"],
:root[data-skin="apex"] [style*="background: #222629"],
:root[data-skin="apex"] [style*="surface2,#222629"] {
  background: var(--apex-branco) !important;
  border-color: var(--apex-borda) !important;
  box-shadow: none !important;
}
:root[data-skin="apex"] [style*="background:#222629"][style*="color:#fff"] { color: var(--apex-texto) !important; }

/* Campos de texto escritos como #222629 ou #000 */
:root[data-skin="apex"] input[style*="background:#222629"],
:root[data-skin="apex"] select[style*="background:#222629"],
:root[data-skin="apex"] textarea[style*="background:#222629"],
:root[data-skin="apex"] textarea[style*="background:#000"],
:root[data-skin="apex"] input[style*="background:#000"] {
  background: var(--apex-branco) !important;
  border-color: var(--apex-borda) !important;
  color: var(--apex-texto) !important;
}

/* Botao fantasma dourado sobre grafite (#1f1f1f com texto e borda #cea046).
   Vira o secundario branco de sempre, com o dourado so no texto. */
:root[data-skin="apex"] [style*="background:#1f1f1f"] {
  background: var(--apex-branco) !important;
  color: var(--apex-primaria-texto) !important;
  border-color: var(--apex-borda) !important;
}

/* Botao neutro escuro (#333 com texto branco) */
:root[data-skin="apex"] [style*="background:#333"] {
  background: var(--apex-branco) !important;
  color: var(--apex-texto) !important;
  border: 1px solid var(--apex-borda) !important;
}

/* Verde chapado de confirmacao vira pastilha positiva */
:root[data-skin="apex"] [style*="background:#1f6e3a"],
:root[data-skin="apex"] [style*="background:#0d2e1e"] {
  background: var(--apex-ok-bg) !important;
  color: var(--apex-ok-txt) !important;
}
:root[data-skin="apex"] [style*="color:#1f9e57"],
:root[data-skin="apex"] [style*="color:#2ecc71"],
:root[data-skin="apex"] [style*="color:#2bff8f"],
:root[data-skin="apex"] [style*="color:#4ad395"] { color: var(--apex-ok-txt) !important; }

/* Dourado claro de texto sobre preto nao tem contraste sobre branco */
:root[data-skin="apex"] [style*="color:#f0d8a8"],
:root[data-skin="apex"] [style*="color:#cea046"] { color: var(--apex-primaria-texto) !important; }

/* Chips e trilhos escuros */
:root[data-skin="apex"] [style*="background:#2a2f33"] {
  background: var(--apex-pag-ativa) !important;
  color: var(--apex-corpo) !important;
  border-color: var(--apex-borda) !important;
}
:root[data-skin="apex"] [style*="background:#1a1d1f"] { background: var(--apex-pag-ativa) !important; }
:root[data-skin="apex"] [style*="background:#0E0D0C"],
:root[data-skin="apex"] [style*="background:#141414"] {
  background: var(--apex-th) !important;
  border-color: var(--apex-borda) !important;
}

/* Bordas e sombras escuras escritas no atributo */
:root[data-skin="apex"] [style*="1px solid #333"] { border-color: var(--apex-borda) !important; }
:root[data-skin="apex"] [style*="rgba(0,0,0,.5)"],
:root[data-skin="apex"] [style*="rgba(0,0,0,0.5)"],
:root[data-skin="apex"] [style*="rgba(0,0,0,0.25)"] { box-shadow: rgba(16,24,40,.08) 0 8px 24px !important; }

/* A pastilha vermelha de aviso continua vermelha, so em tom legivel */
:root[data-skin="apex"] [style*="background:#ff4d6b"] { background: #D92D20 !important; }


/* ===== 19. ICONES DE LINHA (rodada 8.3) ==================================
   Pedido do Lucas: nada de emoji apagado; icone de verdade, so o traco,
   como no JustCall. O octopus-apex.js troca cada emoji conhecido por um
   svg de linha (stroke: currentColor, herda a cor do texto ao redor) e
   guarda o emoji original num span irmao. Com a pele ligada aparece o
   svg; desligada, volta o emoji colorido de sempre. O que nao tem
   traducao (pastilhas de status, medalhas, rostos, a marca 🐙) continua
   emoji colorido: cor com significado fica. Nenhum filtro, nenhuma
   dessaturacao. A rodada 8.2 (grayscale em tudo) foi desfeita aqui.
   ========================================================================= */

/* Fora da pele o svg some e o emoji original aparece */
.apex-emoji svg { display: none; }

:root[data-skin="apex"] .apex-emoji svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}
:root[data-skin="apex"] .apex-emoji .apex-emoji-org { display: none; }

/* Icones de navegacao um ponto acomodados: caixa fixa ja vem das classes
   .nav-icon / .team-nav-icon do app; o svg so precisa se centralizar nela */
:root[data-skin="apex"] .nav-icon .apex-emoji svg,
:root[data-skin="apex"] .team-nav-icon .apex-emoji svg { vertical-align: -0.15em; }


/* ===== 20. MODO ESCURO APEX (rodada 15, item 14, 2026-08-30) =============
   Pedido do Lucas: modo escuro seguindo a MESMA identidade APEX, com a
   sidebar de uma cor e o conteudo de outra, mantendo o modo claro atual
   exatamente como esta. Como o app inteiro le os primitivos --apex-*, o
   escuro entra redefinindo SO os primitivos sob [data-theme="dark"]; os
   remapeamentos (--bg, --surface, --accent...) seguem automaticamente por
   serem var(--apex-*). O seletor tem UM atributo a mais que os da secao 1,
   entao vence por especificidade sem depender de ordem.
   Quem liga o atributo: os seletores de tema que JA EXISTIAM nos 3 paineis
   (Preferencias do ADM, Minha Conta da equipe, Aparencia do cliente) e o
   normalizador do octopus-apex.js (sem escolha gravada = claro; "auto" e
   resolvido em dark/light pelo matchMedia, por isso nao ha media query aqui).
   ========================================================================= */

:root[data-skin="apex"][data-theme="dark"] {

  /* --- acento dourado: preenchimento igual; dourado-texto CLAREIA
         (#8A6A20 sobre fundo escuro nao passa em AA; #E0B45C passa) --- */
  --apex-primaria:        #CEA046;
  --apex-primaria-hover:  #DBB25F;
  --apex-primaria-texto:  #E0B45C;
  --apex-primaria-fraca:  rgba(206,160,70,.16);

  /* --- neutras escuras: conteudo em azul-noite, cards um degrau acima --- */
  --apex-fundo:      #0D1420;
  --apex-branco:     #16202F;
  --apex-texto:      #F2F4F7;
  --apex-corpo:      #D0D5DD;
  --apex-muted:      #98A2B3;
  --apex-borda:      #263243;
  --apex-hover:      #1B2636;
  --apex-th:         #1B2636;
  --apex-zebra:      #18232F;
  --apex-pag-ativa:  #223046;

  /* --- sidebar: MAIS escura que o conteudo, cor propria (pedido) --- */
  --apex-sidebar:        linear-gradient(176deg,#070B14 0%,#0B1322 100%);
  --apex-sidebar-ativo:  #131F33;
  --apex-sidebar-rodape: #10192A;
  --apex-sidebar-idle:   #8494AB;
  --apex-sidebar-borda:  rgba(255,255,255,.08);
  --apex-nav-acento:     #E0B45C;

  /* --- feedback: texto clareado, fundo translucido do proprio tom --- */
  --apex-ok-txt:    #75E0A7;  --apex-ok-bg:    rgba(2,122,72,.18);
  --apex-erro-txt:  #F97066;  --apex-erro-bg:  rgba(180,35,24,.18);
  --apex-aviso-txt: #FDB022;  --apex-aviso-bg: rgba(181,71,8,.18);
  --apex-info-txt:  #53B1FD;  --apex-info-bg:  rgba(23,92,211,.18);

  /* --- graficos: mesmas familias, um ponto mais claras --- */
  --apex-graf-1: #CEA046;
  --apex-graf-2: #9B8AEC;
  --apex-graf-3: #36BFFA;
  --apex-graf-4: #4AC97E;
  --apex-graf-5: #98A2B3;

  color-scheme: dark;
}

/* --- consertos pontuais: valores claros que ficaram hardcoded nas
       secoes 2 a 15 (borda de hover #D0D5DD, toggle, scrollbar) --- */

:root[data-skin="apex"][data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #35435A;
  border-color: var(--apex-fundo);
}
:root[data-skin="apex"][data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #46587A; }

:root[data-skin="apex"][data-theme="dark"] .btn-secondary:hover,
:root[data-skin="apex"][data-theme="dark"] .btn-cancel:hover,
:root[data-skin="apex"][data-theme="dark"] .action-btn:hover,
:root[data-skin="apex"][data-theme="dark"] .card:hover,
:root[data-skin="apex"][data-theme="dark"] .team-member-card:hover,
:root[data-skin="apex"][data-theme="dark"] .dash-next-events .ne-card:hover,
:root[data-skin="apex"][data-theme="dark"] .vd-kanban-card:hover { border-color: #35435A; }

:root[data-skin="apex"][data-theme="dark"] .btn-danger-soft { border-color: rgba(249,112,102,.45); }
:root[data-skin="apex"][data-theme="dark"] .btn-danger-soft:hover { background: rgba(180,35,24,.28); border-color: #F97066; }

:root[data-skin="apex"][data-theme="dark"] .master-edit-toggle input[type="checkbox"] {
  background: #263243;
  border-color: #35435A;
}

/* Selecao de texto continua no dourado, texto claro */
:root[data-skin="apex"][data-theme="dark"] ::selection { background: rgba(206,160,70,.35); color: #F2F4F7; }

/* --- painel do cliente: mesmo tratamento nos tokens proprios dele.
       O aplicarTema() do client.php espelha escuro/claro em data-theme
       no <html>, entao este bloco cobre o cliente que escolheu Escuro. --- */

:root[data-skin="apex"][data-theme="dark"] body[data-tema] {
  --preto: #0A101B;              /* barra superior escura, distinta do fundo */
  --escuro: #0D1420;
  --painel: #16202F;
  --painel2: #1B2636;
  --card: #16202F;
  --card-hover: #1B2636;
  --borda: #263243;
  --borda2: #35435A;
  --texto: #F2F4F7;
  --texto2: #D0D5DD;
  --muted: #98A2B3;
  --gold: #CEA046;
  --gold-esc: #DBB25F;
  --gold-soft: rgba(206,160,70,.16);
  --ok: #75E0A7;      --ok-bg: rgba(2,122,72,.18);
  --erro: #F97066;    --erro-bg: rgba(180,35,24,.18);
  --ajuste: #FDB022;  --ajuste-bg: rgba(181,71,8,.18);
  --pend: #98A2B3;    --pend-bg: rgba(152,162,179,.14);
  --azul: #36BFFA;
  --sombra: none;
}

:root[data-skin="apex"][data-theme="dark"] body[data-tema] .topbar {
  background: #0A101B;
  border-bottom: 1px solid var(--apex-borda);
}
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .card { background: var(--apex-branco); }
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .card:hover { border-color: #35435A; background: var(--apex-branco); }
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .btn-g {
  background: var(--apex-branco);
  color: var(--apex-texto);
}
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .modal { background: var(--apex-branco); box-shadow: rgba(0,0,0,.45) 0 8px 24px; }
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .cal-wrap,
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .cal-grid { background: var(--apex-branco); }
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .kpi,
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .mini-stat,
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .painel-card { background: var(--apex-branco); }
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .abtn--ok { border-color: rgba(117,224,167,.4); }
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .abtn--aj { border-color: rgba(253,176,34,.4); }
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .abtn--no { border-color: rgba(249,112,102,.4); }
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .scrim,
:root[data-skin="apex"][data-theme="dark"] body[data-tema] .side-scrim { background: rgba(0,0,0,.62); }