/* ============================================
   THEME OVERRIDES - DASHBOARD
   Substitui cores hard-coded por variáveis CSS
   ============================================ */

/* Cards e Containers */
.stat-card,
.card,
.kpi-card,
.chart-card,
.dashboard-card {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
}

/* Calendar */
.calendar-day-header {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

/* Calendar day - only override empty/default cells */
/* Empty calendar days - white in light theme, transparent in dark theme */
.calendar-day:not(.profit):not(.loss):not(.breakeven) {
    background: transparent !important;
    border-color: var(--border-primary) !important;
}

[data-theme="light"] .calendar-day:not(.profit):not(.loss):not(.breakeven) {
    background: #ffffff !important;
    border-color: var(--border-primary) !important;
}

/* Profit cells - keep original styling */
.calendar-day.profit {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.calendar-day.profit .calendar-day-value {
    color: rgb(16 185 129 / 67%) !important;
}

[data-theme="light"] .calendar-day.profit {
    background: rgba(4, 120, 87, 0.12) !important;
    border: 1px solid rgba(4, 120, 87, 0.35) !important;
}

[data-theme="light"] .calendar-day.profit .calendar-day-value {
    color: #0dba87 !important;
}

/* Loss cells - red */
.calendar-day.loss {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.calendar-day.loss .calendar-day-value {
    color: rgb(255 60 60 / 54%) !important;
}

[data-theme="light"] .calendar-day.loss {
    background: rgba(229, 17, 17, 0.12) !important;
    border: 1px solid rgba(229, 17, 17, 0.35) !important;
}

[data-theme="light"] .calendar-day.loss .calendar-day-value {
    color: #e51111 !important;
}

.calendar-day.breakeven {
    background: var(--bg-hover) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-primary) !important;
}

.calendar-day.neutral {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

.calendar-nav-btn {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

.calendar-nav-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.week-card {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

.week-card:hover {
    border-color: var(--brand-secondary) !important;
    background: var(--bg-hover) !important;
}

/* Tables */
.table-container {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
}

thead th {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

tbody tr {
    background: var(--bg-card) !important;
}

tbody tr:hover {
    background: var(--bg-hover) !important;
}

/* User Menu & Dropdowns */
.user-menu-dropdown,
.alerts-dropdown,
.language-submenu {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

.user-menu-item:hover,
.language-submenu-option:hover,
.alert-item:hover {
    background: var(--bg-tertiary) !important;
}

.user-menu-link,
.user-menu-link span,
.user-menu-item {
    color: var(--text-primary) !important;
}

.language-submenu-option.active {
    color: var(--text-primary) !important;
}

.language-submenu-option {
    color: var(--text-secondary) !important;
}

.user-menu-divider {
    background: var(--border-primary) !important;
}

.user-profile-info:hover {
    background: var(--bg-tertiary) !important;
}

/* Inputs & Selects */
.search-box,
#addResultModal .form-input {
    background: var(--bg-input) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

.broker-selector {
    background: var(--bg-input) !important;
    border-color: var(--border-primary) !important;
    color: #0089d3 !important;
}

.broker-selector:hover {
    background: var(--bg-hover) !important;
    border-color: var(--brand-secondary) !important;
}

/* Buttons */
.back-btn:hover {
    background: var(--bg-tertiary) !important;
}

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

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

.logout-btn:hover {
    background: var(--bg-hover) !important;
}

.period-btn:hover,
.period-btn.active,
.chart-btn:hover,
.chart-btn.active {
    background: var(--brand-secondary) !important;
    color: white !important;
    border-color: var(--brand-secondary) !important;
}

/* Modals */
#noBrokerModal .modal-content,
#addResultModal .modal-content,
.modal-content {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

.modal-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

.modal-body {
    background: var(--bg-secondary) !important;
}

.modal-footer {
    background: var(--bg-primary) !important;
    border-top-color: var(--border-primary) !important;
}

#noBrokerModal .modal-close:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Existing Trades */
.existing-trades-container {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
}

.existing-trades-table thead {
    background: var(--bg-tertiary) !important;
}

.existing-trades-table tbody td {
    background: var(--bg-card) !important;
}

/* Alert Footer */
.alert-footer {
    background: var(--bg-hover) !important;
}

.alert-footer:hover {
    background: var(--bg-tertiary) !important;
}

/* Progress Bar */
.progress-bar-bg {
    background: var(--bg-tertiary) !important;
}

.progress-bar {
    background: var(--bg-tertiary) !important;
}

.progress-fill,
.progress-bar-fill {
    background: var(--brand-secondary) !important;
}

/* Broker usage bars */
.broker-name,
.broker-label {
    color: var(--text-secondary) !important;
}

.broker-percentage,
.usage-percentage {
    color: var(--text-primary) !important;
}

/* Navigation Menu - removed to let dashboard.css handle it */

/* Nav Divider */
.nav-divider {
    background: var(--border-secondary) !important;
}
[data-theme="light"] .nav-divider {
    background: #94a3b8 !important;
    opacity: 0.8;
}

/* Scrollbar */
.existing-trades-cards-wrapper::-webkit-scrollbar-track {
    background: var(--bg-primary) !important;
}

.existing-trades-cards-wrapper::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary) !important;
}

.existing-trades-cards-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--brand-secondary) !important;
}

/* Tooltip */
.tooltip {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Chart específico - sobrescrever depois via JS se necessário */
canvas {
    filter: none;
}

/* Chart containers */
.chart-container,
.chart-wrapper,
.performance-chart,
.pnl-chart,
.drawdown-chart {
    background: transparent !important;
}

/* Mini charts in stats cards */
.mini-chart-container {
    background: transparent !important;
}

/* Read-only inputs */
#addResultModal .form-input:read-only {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

/* Brand colors que não mudam */
.btn-primary:not(#addResultBtn):not(.btn-add-trade):not(.btn-add-account),
.card-header .btn.btn-primary:not(#addResultBtn):not(.btn-add-trade):not(.btn-add-account),
#addResultModal .btn-primary {
    background: var(--brand-secondary) !important;
}

.btn-primary:not(#addResultBtn):not(.btn-add-trade):not(.btn-add-account):hover,
#addResultModal .btn-primary:hover {
    background: var(--brand-gradient-start) !important;
}

.user-avatar {
    background: #0089d3 !important;
}

.notification-dot {
    background: var(--brand-secondary) !important;
}

.alerts-count {
    background: var(--brand-secondary) !important;
}

/* EA Indicators mantém as cores originais */
.ea-indicator.online {
    background: var(--success) !important;
}

.ea-indicator.offline {
    background: var(--danger) !important;
}

/* Disabled state */
#addResultModal .btn-primary:disabled {
    background: var(--text-muted) !important;
}

#addResultModal .btn-secondary {
    background: var(--text-tertiary) !important;
}

#addResultModal .btn-secondary:hover {
    background: var(--text-secondary) !important;
}

/* Counter badge */
.user-plan-badge {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

/* Stats com cor de fundo escura no tema claro também */
.time-display {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Text Colors - ensure proper contrast */
.stat-label,
.calendar-day-number,
.week-number,
.trade-id,
.trade-symbol,
.kpi-label,
.metric-label {
    color: var(--text-secondary) !important;
}

.stat-value,
/* KPI values - allow JS to set dynamic colors
 * Colors are set via JavaScript for dynamic states:
 * - Biggest Profit: #2d5cf6 (blue)
 * - Biggest Loss: #da5656 (red)
 * - Total P&L: rgb(16 185 129 / 67%) (green) / #da5656 (red)
 * - Best Day %: #f59e0b (orange)
 * - Profit Factor: #60a5fa (light blue)
 * These colors work well in both light and dark themes
 */
.kpi-value {
    color: var(--text-primary);
}

.metric-value,
.card-title,
.table-title {
    color: var(--text-primary) !important;
}

/* Header user profile */
.user-name {
    color: var(--text-primary) !important;
}

.user-plan {
    color: var(--text-secondary) !important;
}

/* Trade count text on calendar */
.trade-count-text {
    color: #7c838e !important;
    opacity: 1;
}

.text-muted,
.subtitle,
.helper-text {
    color: var(--text-muted) !important;
}

/* Links */
a:not(.btn) {
    color: var(--brand-secondary) !important;
}

a:not(.btn):hover {
    color: var(--brand-gradient-start) !important;
}

/* Status colors - mantém cores específicas mas ajusta luminosidade se necessário */
.positive,
.profit,
.win {
    color: var(--success) !important;
}

.negative,
.loss,
.lose {
    color: var(--danger) !important;
}

.neutral,
.breakeven {
    color: var(--text-secondary) !important;
}

/* Badges */
.badge {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

.badge.success {
    background: var(--success) !important;
    color: white !important;
}

.badge.danger {
    background: var(--danger) !important;
    color: white !important;
}

.badge.warning {
    background: var(--warning) !important;
    color: white !important;
}

/* Additional text elements that need contrast */
.kpi-subtitle,
.monthly-trades-count,
#balance-subtitle,
#monthly-trades-count {
    color: var(--text-secondary) !important;
}

/* Notification bell and icons */
.notification-icon {
    color: var(--text-secondary) !important;
}

.notification-icon:hover {
    color: var(--text-primary) !important;
}

/* Theme toggle button */
.theme-toggle {
    color: var(--text-secondary) !important;
}

.theme-toggle:hover {
    color: var(--text-primary) !important;
}

/* Alert items */
.alert-type-title {
    color: var(--text-primary) !important;
}

.alert-message {
    color: var(--text-secondary) !important;
}

.alert-time {
    color: var(--text-muted) !important;
}

/* Alerts header */
.alerts-title {
    color: var(--text-primary) !important;
}

/* User menu items - removed to allow dashboard.css to control colors */

/* Market Ticker */
.market-ticker {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

.ticker-item {
    border-right-color: var(--border-primary) !important;
}

.ticker-item:hover {
    background: var(--bg-hover) !important;
}

/* ============================================
   KPI CARD COLOR CLASSES - substituem inline styles
   ============================================ */

.kpi-color-profit {
    color: rgb(16 185 129 / 67%);
}

.kpi-color-loss {
    color: rgb(255 60 60 / 54%);
}

[data-theme="light"] .kpi-color-profit {
    color: #0dba87 !important;
}

[data-theme="light"] .kpi-color-loss {
    color: #e51111 !important;
}

[data-theme="light"] #radar-score-bar {
    background: linear-gradient(to right, rgba(239,68,68,0.85), rgba(245,158,11,0.85), rgba(34,197,94,0.85)) !important;
}

/* ============================================
   LIGHT THEME - Dashboard color overrides
   Cores hardcoded no dashboard.css precisam
   ser sobrescritas aqui para o tema claro
   ============================================ */

/* Stat cards (topo do dashboard) */
[data-theme="light"] .stat-change.positive,
[data-theme="light"] .ea-profit.positive,
[data-theme="light"] .week-total.profit,
[data-theme="light"] .evolution-positive,
[data-theme="light"] .history-evolution.positive,
[data-theme="light"] .kpi-trend.positive,
[data-theme="light"] .calendar-stat-value.profit,
[data-theme="light"] .alert-type.success,
[data-theme="light"] .positive,
[data-theme="light"] .profit:not(.calendar-day),
[data-theme="light"] .win {
    color: #0dba87 !important;
}

[data-theme="light"] .kpi-trend.positive {
    background: rgba(4, 120, 87, 0.1) !important;
}

[data-theme="light"] .stat-change.negative,
[data-theme="light"] .ea-profit.negative,
[data-theme="light"] .week-total.loss,
[data-theme="light"] .evolution-negative,
[data-theme="light"] .history-evolution.negative,
[data-theme="light"] .kpi-trend.negative,
[data-theme="light"] .calendar-stat-value.loss,
[data-theme="light"] .negative,
[data-theme="light"] .loss:not(.calendar-day),
[data-theme="light"] .lose {
    color: #e51111 !important;
}

[data-theme="light"] .kpi-trend.negative {
    background: rgba(229, 17, 17, 0.1) !important;
}

.market-name {
    color: var(--text-primary) !important;
}

.market-status.closed {
    color: var(--text-muted) !important;
}

/* Market progress bar maintains its gradient colors */
.market-progress-bar {
    background: var(--bg-tertiary) !important;
}