/* ============================================================================
   Neurodor — Palette overrides Metronic
   ----------------------------------------------------------------------------
   PROBLEMA: páginas do tema /desempenho/, /videoaulas/ usam classes Metronic
   (.bg-active-primary, .text-primary, .btn-primary, ki-duotone .text-primary)
   que dependem de --bs-primary. tokens-palettes.css só sobrescreve --nd-brand.
   Resultado: a paleta escolhida pelo aluno não muda cores Metronic.

   SOLUÇÃO ROBUSTA (B.F5.7): em `body.nd-logged-area`, REDEFINIMOS --bs-primary
   para --nd-brand. Isso reativa TODAS as classes Bootstrap/Metronic
   (.text-primary, .bg-primary, .btn-primary, .bg-active-primary, .border-primary,
   .alert-primary, .table-primary, etc) automaticamente sem precisar enumerar
   cada seletor. Escopado SÓ na área logada — não vaza pra checkout público
   nem cadastro (que não têm essa classe no body).

   Mantemos também os overrides específicos como cinto de segurança.
============================================================================ */

/* ─── SOLUÇÃO B.F5.10 — RGB dinâmico por paleta vem de tokens-palettes.css
   Aqui sobrescrevemos só seletores específicos como reforço quando classes
   Metronic não consomem corretamente as vars `--bs-*` recém-definidas em
   [data-palette]. NÃO redefinimos --bs-primary/--bs-primary-rgb aqui mais
   (estavam hardcoded e impediam reatividade por paleta).
   Ver: docs/Visual_Aspect_Control-v1.md */

/* B.F5.11 — Spans .path1/.path2 dos ki-duotone Metronic precisam herdar
   color do parent <i>. Estilos Metronic definem cor por span — forçamos
   currentColor para garantir que a paleta penetra. */
html[data-palette] .app-sidebar .menu-icon i.ki-duotone span,
html[data-palette] #kt_app_sidebar_menu_scroll .menu-icon i.ki-duotone span {
    color: inherit;
}

/* ════════════════════════════════════════════════════════════════════════
   B.F5.12 — OVERRIDE DAS 9 REGRAS HARDCODED EM INTERFACE-EAD
   ----------------------------------------------------------------------------
   interface-ead.php:4081-4145 emite CSS inline com cores HARDCODED
   (sidebar_bg_color, menuTextColor, menuActiveColor, etc) que vencem qualquer
   paleta porque vêm DEPOIS no source e usam seletores .interface-ead específicos.

   Problema: paleta do USUÁRIO (Noturno/Azul/Sépia) NÃO atualiza essas regras.
   Resultado: sidebar fica cinza (#d6d6d6) mesmo com paleta dark/escolhida.

   Solução: aplicar overrides escopados em html[data-palette] + .interface-ead
   apontando para tokens --nd-* dinâmicos. Specificity 0,3,1 vence 0,2,1 do
   interface-ead. Cobre as 9 regras conhecidas.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. Sidebar background — era hardcoded #d6d6d6 */
html[data-palette] body.interface-ead .app-sidebar,
html[data-palette] body.interface-ead .app-sidebar-menu {
    background: var(--nd-bg-surface, #fff) !important;
}

/* 2. Menu link color (inativo) */
html[data-palette] body.interface-ead .app-sidebar-menu .menu .menu-link {
    color: var(--nd-text, #0F172A) !important;
}

/* 3. Menu link active color */
html[data-palette] body.interface-ead .app-sidebar-menu .menu .menu-link.active,
html[data-palette] body.interface-ead .app-sidebar-menu .menu .menu-link.active .menu-title {
    color: var(--nd-brand, #1FBA7A) !important;
    background: var(--nd-brand-soft, rgba(31, 186, 122, .12)) !important;
}

/* 4. Menu icon color (também herda paleta) */
html[data-palette] body.interface-ead .app-sidebar-menu .menu .menu-icon i,
html[data-palette] body.interface-ead .app-sidebar-menu .menu .menu-icon i.ki-duotone {
    color: var(--nd-brand, #1FBA7A) !important;
}
html[data-palette] body.interface-ead .app-sidebar-menu .menu .menu-icon i span {
    color: inherit !important;
}

/* 5. .bg-active-primary do tema reage à paleta */
html[data-palette] body.interface-ead .bg-active-primary.active {
    background-color: var(--nd-brand-soft, rgba(31, 186, 122, .12)) !important;
    color: var(--nd-brand, #1FBA7A) !important;
}

/* 6. .btn-success (Metronic usa como "primary" do tema) — paleta também guia */
html[data-palette] body.interface-ead .btn-success {
    background-color: var(--nd-brand, #1FBA7A) !important;
    border-color: var(--nd-brand, #1FBA7A) !important;
    color: var(--nd-on-brand, #fff) !important;
}
html[data-palette] body.interface-ead .btn-success:hover,
html[data-palette] body.interface-ead .btn-success:focus {
    background-color: var(--nd-brand-hover, #16a364) !important;
    border-color: var(--nd-brand-hover, #16a364) !important;
}

/* 7. Toolbar (#kt_app_toolbar) — fundo reage à paleta */
html[data-palette] body.interface-ead #kt_app_toolbar {
    background: var(--nd-bg-surface-2, #F8FAFC) !important;
    color: var(--nd-text, #0F172A) !important;
}

/* 8. Toolbar accent (acidente lateral colorido) */
html[data-palette] body.interface-ead #kt_app_toolbar:before {
    background: var(--nd-brand, #1FBA7A) !important;
}

/* 9. Toolbar button success — reage à paleta */
html[data-palette] body.interface-ead #kt_app_toolbar .btn-success {
    background-color: var(--nd-brand, #1FBA7A) !important;
    color: var(--nd-on-brand, #fff) !important;
}

/* ─── Sidebar Metronic — alta especificidade vence style.bundle.css ─── */
/* NOTA: o tema gera id="#kt_app_sidebar_menu" (com # literal dentro do id) —
   inválido como seletor; usamos #kt_app_sidebar_menu_scroll (válido) + .app-sidebar. */

/* Item ATIVO — fundo brand-soft */
html[data-palette] .app-sidebar .menu-item .menu-link.active,
html[data-palette] #kt_app_sidebar_menu_scroll .menu-item .menu-link.active,
html[data-palette] .app-sidebar .menu-link.bg-active-primary.active {
    background-color: var(--nd-brand-soft, rgba(31, 186, 122, .12)) !important;
    color: var(--nd-brand, #1FBA7A) !important;
}
html[data-palette] .app-sidebar .menu-link.active .menu-title,
html[data-palette] #kt_app_sidebar_menu_scroll .menu-link.active .menu-title {
    color: var(--nd-brand, #1FBA7A) !important;
}
html[data-palette] .app-sidebar .menu-link.active .menu-icon i,
html[data-palette] .app-sidebar .menu-link.active .menu-icon i.ki-duotone,
html[data-palette] .app-sidebar .menu-link.active .menu-icon i.ki-duotone.text-primary,
html[data-palette] #kt_app_sidebar_menu_scroll .menu-link.active .menu-icon i {
    color: var(--nd-brand, #1FBA7A) !important;
}

/* Item INATIVO — ícone .text-primary fica brand (era cinza/azul Metronic) */
html[data-palette] .app-sidebar .menu-item .menu-icon i.text-primary,
html[data-palette] .app-sidebar .menu-item .menu-icon i.ki-duotone.text-primary,
html[data-palette] #kt_app_sidebar_menu_scroll .menu-icon i.text-primary,
html[data-palette] #kt_app_sidebar_menu_scroll .menu-icon i.ki-duotone.text-primary {
    color: var(--nd-brand, #1FBA7A) !important;
}

/* Sub-paths do ki-duotone (Metronic usa span.path1/.path2 com opacity) */
html[data-palette] .app-sidebar .menu-icon i.text-primary span,
html[data-palette] #kt_app_sidebar_menu_scroll .menu-icon i.text-primary span {
    color: inherit !important;
}

/* Hover */
html[data-palette] .app-sidebar .menu-item .menu-link:not(.active):hover,
html[data-palette] #kt_app_sidebar_menu_scroll .menu-link:not(.active):hover {
    background-color: var(--nd-brand-soft, rgba(31, 186, 122, .12)) !important;
}
html[data-palette] .app-sidebar .menu-link:not(.active):hover .menu-icon i,
html[data-palette] .app-sidebar .menu-link:not(.active):hover .menu-title {
    color: var(--nd-brand, #1FBA7A) !important;
}

/* ─── Toolbar/header tema (h1, page-heading, dropdowns ativos) ─────────── */
[data-palette] body.nd-logged-area .text-primary {
    color: var(--nd-brand, #1FBA7A) !important;
}
[data-palette] body.nd-logged-area a.text-primary:hover {
    color: var(--nd-brand-hover, #16a364) !important;
}

/* ─── Botões .btn-primary do tema em área logada ─────────────────────── */
[data-palette] body.nd-logged-area .btn-primary,
[data-palette] body.nd-logged-area .btn.btn-primary {
    background-color: var(--nd-brand, #1FBA7A);
    border-color: var(--nd-brand, #1FBA7A);
    color: var(--nd-on-brand, #fff);
}
[data-palette] body.nd-logged-area .btn-primary:hover,
[data-palette] body.nd-logged-area .btn.btn-primary:hover {
    background-color: var(--nd-brand-hover, #16a364);
    border-color: var(--nd-brand-hover, #16a364);
}

/* ─── Selo "active" das categorias/cards do videoaulas ──────────────── */
[data-palette] body.nd-logged-area .border-hover-success:hover {
    border-color: var(--nd-brand, #1FBA7A) !important;
}
[data-palette] body.nd-logged-area .btn-success,
[data-palette] body.nd-logged-area .btn.btn-success {
    background-color: var(--nd-brand, #1FBA7A);
    border-color: var(--nd-brand, #1FBA7A);
}

/* ─── ApexCharts series (gráficos /desempenho/) — gradient via fill ──── */
/* Sem JS extra: o ndResolveColor() existente em nd-components-v2.js
   já passa --nd-brand para configs. Se houver charts usando .text-primary
   no CSS de label, herdam corretamente. */

/* ─── B.F5.5-B Botão hamburger mobile do sidebar ─────────────────────── */
/* Estado padrão Metronic: .btn.btn-icon.btn-active-color-primary (transparente,
   só ganha cor primary no :active). Repaginamos para CTA visível, igual ao
   .nd-avatar do menu de usuário (quadrado brand). */
#kt_app_sidebar_mobile_toggle {
    background: var(--nd-brand, #1FBA7A) !important;
    color: var(--nd-on-brand, #fff) !important;
    border-radius: var(--nd-radius-sm, 8px);
    width: 38px !important;
    height: 38px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
    transition: background .15s ease, transform .15s ease;
}
#kt_app_sidebar_mobile_toggle:hover {
    background: var(--nd-brand-hover, #16a364) !important;
    transform: translateY(-1px);
}
#kt_app_sidebar_mobile_toggle i,
#kt_app_sidebar_mobile_toggle i.ki-duotone,
#kt_app_sidebar_mobile_toggle i.ki-duotone span {
    color: var(--nd-on-brand, #fff) !important;
}

/* ─── Page Toolbar (DSV2) — força brand consistente ──────────────────── */
[data-palette] .nd-page-toolbar {
    /* Já consome --nd-brand via nd-components-v2.css — esta regra é redundância
       defensiva para evitar regressão futura. */
    background: linear-gradient(135deg, var(--nd-brand, #1FBA7A), var(--nd-brand-strong, #16a364)) !important;
}