/* ============================================================
   admin-dark.css — Overrides do CRM pro dark mode v2.0 "Energy"
   ============================================================
   Carregado COM data-modo="dark" — só aplica no dark.
   Trata casos onde o admin.css usa var(--branco) esperando
   branco puro, mas no dark mode --branco virou navy (surface 1).
   ============================================================ */

/* Bottom layer só: garante que tudo herde o fundo escuro */
html[data-modo="dark"] body {
    background: var(--fundo-claro);
    color: var(--texto-corpo);
}

/* ============================================================
   SIDEBAR — fundo navy já é nativo, só precisa garantir textos brancos
   ============================================================ */
html[data-modo="dark"] .sidebar {
    background: linear-gradient(180deg, #070B17 0%, #0F1729 100%);
    border-right: 1px solid var(--borda);
}
html[data-modo="dark"] .sidebar-brand .logo,
html[data-modo="dark"] .sidebar-brand .logo span:not([style*="cor-acento"]) {
    color: #fff !important;
}
html[data-modo="dark"] .nav-link {
    color: rgba(255,255,255,0.7) !important;
}
html[data-modo="dark"] .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.05);
}
html[data-modo="dark"] .nav-link.ativo,
html[data-modo="dark"] .nav-link.active {
    background: rgba(0, 212, 255, 0.12);
    color: var(--cor-acento) !important;
    border-left-color: var(--cor-acento);
    box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.06);
}
html[data-modo="dark"] .sidebar-footer a,
html[data-modo="dark"] .sidebar-footer button {
    color: var(--texto-suave);
}
html[data-modo="dark"] .sidebar-footer a:hover {
    color: var(--cor-acento);
}

/* ============================================================
   BOTÕES — texto sempre branco puro sobre cor primária
   ============================================================ */
html[data-modo="dark"] .btn,
html[data-modo="dark"] .btn-primario {
    color: #fff !important;
    background: var(--cor-acento);
    border-color: var(--cor-acento);
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.25);
}
html[data-modo="dark"] .btn:hover,
html[data-modo="dark"] .btn-primario:hover {
    background: var(--cor-acento-clara);
    border-color: var(--cor-acento-clara);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}
html[data-modo="dark"] .btn-acento {
    color: #fff !important;
}
html[data-modo="dark"] .btn-secundario,
html[data-modo="dark"] .btn-outline {
    background: transparent;
    color: var(--texto-titulo) !important;
    border-color: var(--borda-escura);
}

/* ============================================================
   TOPBAR / MAIN
   ============================================================ */
html[data-modo="dark"] .main {
    background: var(--fundo-claro);
}
html[data-modo="dark"] .topbar {
    background: rgba(15, 23, 41, 0.6);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--borda);
    color: var(--texto-titulo);
}
html[data-modo="dark"] .topbar h1 {
    color: var(--texto-titulo);
}

/* ============================================================
   CARDS / SUPERFÍCIES
   ============================================================ */
html[data-modo="dark"] .card,
html[data-modo="dark"] .panel,
html[data-modo="dark"] .box {
    background: var(--branco);    /* surface elevation 1 no dark */
    border: 1px solid var(--borda);
    color: var(--texto-corpo);
    box-shadow: var(--sombra-md);
}

/* ============================================================
   FORMS
   ============================================================ */
html[data-modo="dark"] input[type="text"],
html[data-modo="dark"] input[type="email"],
html[data-modo="dark"] input[type="password"],
html[data-modo="dark"] input[type="search"],
html[data-modo="dark"] input[type="tel"],
html[data-modo="dark"] input[type="number"],
html[data-modo="dark"] input[type="date"],
html[data-modo="dark"] input[type="url"],
html[data-modo="dark"] textarea,
html[data-modo="dark"] select {
    background: var(--fundo-suave);
    color: var(--texto-titulo);
    border-color: var(--borda);
}
html[data-modo="dark"] input::placeholder,
html[data-modo="dark"] textarea::placeholder {
    color: var(--texto-claro);
}
html[data-modo="dark"] input:focus,
html[data-modo="dark"] textarea:focus,
html[data-modo="dark"] select:focus {
    border-color: var(--cor-acento);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
    outline: none;
}

/* ============================================================
   LOGO — PNG fica invisível no dark; aplica invert pra ficar branca.
   (.login-card .logo img é tratado no tema-base/tema-cliente-dark)
   ============================================================ */
html[data-modo="dark"] .sidebar-brand .logo img,
html[data-modo="dark"] .login-logo img,
html[data-modo="dark"] .auth-logo img {
    filter: brightness(0) invert(1);
}

/* ============================================================
   TOGGLE — botão de tema no topbar
   ============================================================ */
html[data-modo="dark"] #tema-toggle:hover {
    background: rgba(0, 212, 255, 0.1);
    color: var(--cor-acento);
}

/* ============================================================
   ABAS / TABS — texto ativo escuro vira ciano no dark
   ============================================================ */
html[data-modo="dark"] .aba.ativa,
html[data-modo="dark"] .tab.ativa,
html[data-modo="dark"] .tab.active {
    color: var(--cor-acento) !important;
    border-bottom-color: var(--cor-acento) !important;
}
html[data-modo="dark"] .aba:hover,
html[data-modo="dark"] .tab:hover {
    color: var(--texto-titulo) !important;
}
html[data-modo="dark"] .abas,
html[data-modo="dark"] .tabs {
    border-bottom-color: var(--borda) !important;
}

/* Filtros secundarios (Só minhas / Toda a equipe) */
html[data-modo="dark"] .filtros-secundarios a.ativo,
html[data-modo="dark"] .filtros-secundarios a.ativa {
    color: var(--cor-acento) !important;
}

/* ============================================================
   SCROLLBAR — refinada, na cor da identidade
   ============================================================ */
html[data-modo="dark"] *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html[data-modo="dark"] *::-webkit-scrollbar-track {
    background: transparent;
}
html[data-modo="dark"] *::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.15);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s;
}
html[data-modo="dark"] *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.35);
    background-clip: padding-box;
    border: 2px solid transparent;
}
html[data-modo="dark"] *::-webkit-scrollbar-corner {
    background: transparent;
}
/* Firefox */
html[data-modo="dark"] {
    scrollbar-color: rgba(0, 212, 255, 0.2) transparent;
    scrollbar-width: thin;
}

/* ============================================================
   KPIs / STATS — gradient ciano puro (primária some no dark)
   ============================================================ */
html[data-modo="dark"] .stat-valor,
html[data-modo="dark"] .stat-numero {
    background-image: linear-gradient(135deg, var(--cor-acento) 0%, var(--cor-acento-clara) 100%) !important;
    background-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
html[data-modo="dark"] .stat-card {
    background: var(--branco);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-md);
}
html[data-modo="dark"] .stat-label {
    color: var(--texto-suave);
}

/* ============================================================
   TABELAS
   ============================================================ */
html[data-modo="dark"] table {
    background: var(--branco);
    color: var(--texto-corpo);
}
html[data-modo="dark"] thead {
    background: var(--fundo-suave);
}
html[data-modo="dark"] th,
html[data-modo="dark"] td {
    border-color: var(--borda);
}
html[data-modo="dark"] tbody tr:hover {
    background: rgba(0, 212, 255, 0.04);
}