/* css/style.css */

/* ==========================================================================
   1. VARIÁVEIS DE CORES E ESPAÇAMENTOS (O Padrão CPXB Soluções)
   ========================================================================== */
:root {
    --primary: #2563eb;       /* Azul Escuro (Confiança) */
    --primary-hover: #1d4ed8;
    --success: #10b981;       /* Verde (Ações positivas, Dinheiro) */
    --success-hover: #059669;
    --danger: #ef4444;       /* Vermelho (Erros, Bloqueios) */
    --dark: #0f172a;          /* Quase preto (Textos principais) */
    --light: #f8fafc;         /* Cinza muito claro (Fundo geral) */
    --gray: #64748b;          /* Cinza médio (Textos secundários) */
    --premium: #8b5cf6;       /* Roxo (Recursos pagos/Upsell) */
    --premium-hover: #7c3aed;
    --border: #e2e8f0;       /* Linhas e separadores */
}

/* ==========================================================================
   2. RESET E TIPOGRAFIA BÁSICA
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body { 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    background-color: var(--light); 
    color: var(--dark); 
    line-height: 1.6;
}

/* Fundo específico para a área administrativa */
.admin-bg { 
    background-color: #e2e8f0; 
    padding: 40px 20px; 
    min-height: 100vh;
}

/* ==========================================================================
   3. ESTRUTURA E CONTAINERS
   ========================================================================== */
.container-sm { 
    max-width: 600px; 
    margin: 0 auto; 
}

.card { 
    background: #ffffff; 
    padding: 30px; 
    border-radius: 12px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 
    margin-bottom: 20px;
}

.flex-center { 
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
}

/* ==========================================================================
   4. FORMULÁRIOS (Inputs, Selects e Textareas)
   ========================================================================== */
label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--dark);
    font-size: 0.95rem;
}

input, select, textarea { 
    width: 100%; 
    padding: 12px 15px; 
    margin-bottom: 20px; 
    border: 1px solid var(--border); 
    border-radius: 8px; 
    font-size: 1rem;
    background-color: #ffffff;
    color: var(--dark);
    transition: border-color 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ==========================================================================
   5. BOTÕES
   ========================================================================== */
.btn { 
    display: inline-block;
    width: 100%; 
    padding: 14px 20px; 
    font-size: 1.1rem; 
    font-weight: bold; 
    text-align: center;
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    color: #ffffff;
    background-color: var(--primary); 
}

.btn:hover { 
    background-color: var(--primary-hover); 
    transform: translateY(-1px);
}

.btn-green { 
    background-color: var(--success); 
}

.btn-green:hover { 
    background-color: var(--success-hover); 
}

.btn-premium { 
    background-color: var(--premium); 
}

.btn-premium:hover { 
    background-color: var(--premium-hover); 
    box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.39);
}

/* ==========================================================================
   6. TABELAS (Para Dashboard e Comissões)
   ========================================================================== */
table { 
    width: 100%; 
    border-collapse: collapse; 
    background: #ffffff; 
    margin-top: 20px; 
    border-radius: 8px;
    overflow: hidden;
}

th, td { 
    padding: 15px; 
    text-align: left; 
    border-bottom: 1px solid var(--border); 
}

th { 
    background-color: var(--dark); 
    color: #ffffff; 
    font-weight: 600;
}

tr:hover td {
    background-color: var(--light);
}

/* ==========================================================================
   7. UTILITÁRIOS DE TEXTO
   ========================================================================== */
.text-blue { color: var(--primary); }
.text-red { color: var(--danger); }
.text-green { color: var(--success); }
.text-gray { color: var(--gray); }
.text-premium { color: var(--premium); }
.text-dark { color: var(--dark); }
.text-center { text-align: center; }

h1, h2, h3 {
    margin-bottom: 15px;
}

/* =========================================
   MODO ESCURO (NIGHT MODE) - CORREÇÃO DEFINITIVA
   ========================================= */
[data-theme="dark"] body {
    background-color: #050505 !important; 
    color: #e2e8f0; 
}

[data-theme="dark"] ::selection { background-color: #f97316; color: #ffffff; }
::selection { background-color: #3b82f6; color: #ffffff; }

[data-theme="dark"] .admin-bg { background-color: #0a0a0a !important; }

/* 1. CARDS GENÉRICOS (Painéis brancos que viram pretos) */
[data-theme="dark"] .card, 
[data-theme="dark"] .card-config,
[data-theme="dark"] .espelho-card,
[data-theme="dark"] .filter-form {
    background-color: #121212 !important; 
    border: 1px solid #262626 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    color: #ffffff;
}

/* 2. CARDS DO DASHBOARD (Mantém cores e sombras originais intactas) */
[data-theme="dark"] .stat-card, 
[data-theme="dark"] .card-dash {
    color: #ffffff !important;
    /* SEM background-color e SEM box-shadow aqui, preservando o azul, laranja, verde... */
}

/* Headers internos que não afetam os cards coloridos */
[data-theme="dark"] .rh-info-header,
[data-theme="dark"] .rh-section {
    background-color: #1a1a1a !important;
    border: 1px solid #333333 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .resumo-box {
    background-color: #0a0a0a !important;
    border: 1px solid #262626 !important;
}

/* EFEITO NEON NOS ÍCONES DO DASHBOARD 
   Lê a cor nativa da fonte (currentColor) e projeta a luz.
*/
[data-theme="dark"] .stat-card i,
[data-theme="dark"] .card-dash i,
[data-theme="dark"] .icon {
    text-shadow: 0 0 15px currentColor;
    filter: drop-shadow(0 0 8px currentColor) brightness(1.2);
}

/* Títulos globais e Textos Brancos */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4,
[data-theme="dark"] .text-dark, 
[data-theme="dark"] strong, 
[data-theme="dark"] .valor,
[data-theme="dark"] .resumo-item strong {
    color: #ffffff;
}

/* Textos descritivos (Prata) */
[data-theme="dark"] p, 
[data-theme="dark"] span, 
[data-theme="dark"] label, 
[data-theme="dark"] td {
    color: #cbd5e1;
}

/* Mantém os textos explicitamente brancos na cor branca */
[data-theme="dark"] .text-white,
[data-theme="dark"] [style*="color: white"],
[data-theme="dark"] [style*="color:#fff"],
[data-theme="dark"] [style*="color: #fff"] {
    color: #ffffff !important;
}

/* Menu Lateral */
[data-theme="dark"] .sidebar {
    background-color: #000000 !important;
    border-right: 1px solid #1f2937 !important;
}
[data-theme="dark"] .sidebar a { color: #cbd5e1 !important; }
[data-theme="dark"] .sidebar a:hover {
    background-color: #1e293b !important;
    color: #3b82f6 !important; 
    border-left: 4px solid #f97316 !important; 
}

/* Entradas de Texto */
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
}
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus {
    border-color: #f97316 !important; 
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2) !important;
}

/* Tabelas Isoladas */
[data-theme="dark"] table,
[data-theme="dark"] .tabela-ponto {
    background-color: transparent !important;
}

[data-theme="dark"] table th, 
[data-theme="dark"] .tabela-ponto th {
    background-color: #0f172a !important; 
    color: #94a3b8 !important;
    border: 1px solid #1e293b !important;
}

/* Força fundos das tabelas ficarem limpos */
[data-theme="dark"] table td, 
[data-theme="dark"] .tabela-ponto td,
[data-theme="dark"] td[style] {
    background-color: transparent !important;
    border: 1px solid #1e293b !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] tr:hover td {
    background-color: #1e293b !important;
}

/* Cores de exceção na tabela de Ponto para manter contraste */
[data-theme="dark"] td[style*="color:#10b981"],
[data-theme="dark"] td[style*="color: #10b981"] {
    color: #34d399 !important; 
}

[data-theme="dark"] td[style*="color:#ef4444"],
[data-theme="dark"] td[style*="color: #ef4444"] {
    color: #f87171 !important; 
}