/* ============================================
   SISTEMA DE TEMAS - LIGHT & DARK
   ============================================ */

/* Tema Padrão: DARK (fallback) */
:root {
    /* Background Colors */
    --bg-primary: #0a0a0a;
    --bg-secondary: #0e0f16;
    --bg-tertiary: #1e1e1e;
    --bg-hover: #282828;
    --bg-input: #0e0f16;
    --bg-card: #0e0f16;

    /* Text Colors */
    --text-primary: #e8eaed;
    --text-secondary: #a8a8a8;
    --text-tertiary: #7a7a7a;
    --text-muted: #5a5a5a;

    /* Border Colors */
    --border-primary: #242424;
    --border-secondary: #2e2e2e;
    --border-focus: #444444;

    /* Brand Colors */
    --brand-primary: #3a3a3a;
    --brand-secondary: #0089d3;
    --brand-gradient-start: #0089d3;
    --brand-gradient-end: #0089d3;

    /* Status Colors */
    --success: rgb(16 185 129 / 67%);
    --success-bg: rgba(16, 185, 129, 0.1);
    --success-border: rgba(16, 185, 129, 0.3);

    --danger: rgb(255 60 60 / 54%);
    --danger-bg: rgba(239, 68, 68, 0.1);
    --danger-border: rgba(239, 68, 68, 0.3);

    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --warning-border: rgba(245, 158, 11, 0.3);

    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.1);
    --info-border: rgba(59, 130, 246, 0.3);

    /* Chart Colors */
    --chart-profit: rgb(16 185 129 / 67%);
    --chart-loss: rgb(255 60 60 / 54%);
    --chart-grid: #1e1e1e;
    --chart-text: #a8a8a8;

    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);

    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.95);
}

/* Tema LIGHT */
[data-theme="light"] {
    /* Background Colors */
    --bg-primary: #e9ecef;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e9ecef;
    --bg-hover: #dee2e6;
    --bg-input: #ffffff;
    --bg-card: #ffffff;

    /* Text Colors */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-tertiary: #718096;
    --text-muted: #a0aec0;

    /* Border Colors */
    --border-primary: #f1f5f9;
    --border-secondary: #e2e8f0;
    --border-focus: #0089d3;

    /* Brand Colors (mantém as mesmas) */
    --brand-primary: #4299e1;
    --brand-secondary: #0089d3;
    --brand-gradient-start: #0089d3;
    --brand-gradient-end: #764ba2;

    /* Status Colors (ajustadas para melhor contraste) */
    --success: #0dba87;
    --success-bg: rgba(4, 120, 87, 0.1);
    --success-border: rgba(4, 120, 87, 0.3);

    --danger: #e51111;
    --danger-bg: rgba(229, 17, 17, 0.1);
    --danger-border: rgba(229, 17, 17, 0.3);

    --warning: #d97706;
    --warning-bg: rgba(217, 119, 6, 0.1);
    --warning-border: rgba(217, 119, 6, 0.3);

    --info: #2563eb;
    --info-bg: rgba(37, 99, 235, 0.1);
    --info-border: rgba(37, 99, 235, 0.3);

    /* Chart Colors */
    --chart-profit: #0dba87;
    --chart-loss: #e51111;
    --chart-grid: #f1f5f9;
    --chart-text: #4a5568;

    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.5);
}

/* ============================================
   APLICAÇÃO DAS VARIÁVEIS
   ============================================ */

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Headers e Cards */
.header,
.header-simple {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-primary);
}

.card,
.dashboard-card,
.stat-card,
.brokers-card,
.settings-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}

/* Inputs e Forms */
input,
textarea,
select {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--border-focus);
}

/* Botões */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--bg-hover);
}

/* Text Colors */
.text-secondary {
    color: var(--text-secondary);
}

.text-muted {
    color: var(--text-muted);
}

/* Borders */
.border {
    border-color: var(--border-primary);
}

/* Tables */
table {
    border-color: var(--border-primary);
}

table th {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

table td {
    border-color: var(--border-primary);
    color: var(--text-primary);
}

table tr:hover {
    background: var(--bg-hover);
}

/* Modals */
.modal-content {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

.modal-overlay {
    background: var(--overlay-bg);
}

/* Dropdown */
.dropdown-menu {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-lg);
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

/* Status Badges */
.badge-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.badge-info {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-border);
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */

.theme-toggle {
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.theme-toggle:hover {
    background: var(--bg-tertiary);
}

/* Icons no toggle */
.theme-toggle i {
    font-size: 14px;
    transition: all 0.3s ease;
    color: #94a3b8 !important;
}

.theme-toggle .fa-sun {
    color: #94a3b8 !important;
}

.theme-toggle .fa-moon {
    color: #94a3b8 !important;
}