/* Accent Color System for Trader Dewey */

/* Base accent color variables - Applied dynamically via JavaScript */
:root {
    --accent-primary: #667EEA; /* Default blue, overridden by JS */
    --accent-hover: #5A67D8;
    --accent-light: rgba(102, 126, 234, 0.1);
    --accent-medium: rgba(102, 126, 234, 0.3);
}

/* Apply accent colors throughout the application */

/* Primary Buttons */
.btn-primary {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    box-shadow: 0 0 0 0.2rem var(--accent-medium) !important;
}

/* Outline Buttons */
.btn-outline-primary {
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: white !important;
}

/* Links */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--accent-primary);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--accent-hover);
}

/* Form Controls */
.form-control:focus,
.form-select:focus,
.settings-input:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--accent-medium) !important;
}

/* Checkboxes and Radio Buttons */
.form-check-input:checked {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* Toggle Switches */
input:checked + .toggle-slider {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* Navigation Active States */
.nav-link.active,
.nav-item.active .nav-link,
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    color: var(--accent-primary) !important;
    background-color: var(--accent-light) !important;
}

/* Sidebar Navigation */
.sidebar-nav-item.active {
    background: var(--accent-light) !important;
    color: var(--accent-primary) !important;
    border-left: 3px solid var(--accent-primary) !important;
}

.sidebar-nav-item:hover {
    background: var(--accent-light) !important;
}

.sidebar-nav-item.active i {
    color: var(--accent-primary) !important;
}

/* Settings Navigation */
.settings-nav-item.active {
    background: var(--accent-light) !important;
    color: var(--accent-primary) !important;
}

/* Badges */
.badge-primary,
.badge.bg-primary {
    background-color: var(--accent-primary) !important;
}

/* Progress Bars */
.progress-bar,
.progress-bar.bg-primary {
    background-color: var(--accent-primary) !important;
}

/* Cards */
.card-primary,
.card-header.bg-primary {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* Trading Dashboard Elements */
.trade-card.profit {
    border-left: 4px solid var(--accent-primary) !important;
}

.metric-card.active,
.metric-card:hover {
    border-color: var(--accent-primary) !important;
}

.metric-trend.positive,
.metric-value.positive,
.stat-value.positive {
    color: var(--accent-primary) !important;
}

/* Charts */
.chart-line-primary,
.ct-series-a .ct-line,
.ct-series-a .ct-point {
    stroke: var(--accent-primary) !important;
}

.chart-fill-primary,
.ct-series-a .ct-area {
    fill: var(--accent-primary) !important;
    fill-opacity: 0.1;
}

/* Tabs */
.nav-tabs .nav-link.active {
    color: var(--accent-primary) !important;
    border-bottom: 2px solid var(--accent-primary) !important;
}

/* Modals */
.modal-header.bg-primary {
    background-color: var(--accent-primary) !important;
}

/* Tooltips */
.tooltip-inner {
    background-color: var(--accent-primary) !important;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--accent-primary) !important;
}

/* Dropdowns */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--accent-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--accent-light) !important;
    color: var(--accent-primary) !important;
}

/* Pagination */
.page-link {
    color: var(--accent-primary) !important;
}

.page-link:hover {
    background-color: var(--accent-light) !important;
    border-color: var(--accent-primary) !important;
}

.page-item.active .page-link {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* Alerts */
.alert-primary {
    background-color: var(--accent-light) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* Spinners */
.spinner-border,
.spinner-border-primary {
    color: var(--accent-primary) !important;
}

/* Icons */
.text-primary,
.feature-icon,
i.text-primary {
    color: var(--accent-primary) !important;
}

/* Achievement System */
.achievement-badge.unlocked {
    background-color: var(--accent-primary) !important;
}

.level-progress .progress-bar {
    background-color: var(--accent-primary) !important;
}

/* Trading Specific Elements */
.buy-button,
.btn-buy {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

.buy-button:hover,
.btn-buy:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

/* Theme Selector */
.theme-option input:checked + .theme-preview {
    border-color: var(--accent-primary) !important;
    background: var(--accent-light) !important;
}

/* Color Preview Selected */
.color-option input:checked + .color-preview {
    box-shadow: 0 0 0 3px var(--accent-light), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Dashboard Cards */
.dashboard-card:hover {
    border-color: var(--accent-primary) !important;
}

.dashboard-stat.primary {
    color: var(--accent-primary) !important;
}

/* AI Coach */
.ai-message.highlight {
    border-left: 3px solid var(--accent-primary) !important;
}

.ai-suggestion {
    background-color: var(--accent-light) !important;
    border-left: 3px solid var(--accent-primary) !important;
}

/* Notifications */
.notification-dot,
.notification-badge {
    background-color: var(--accent-primary) !important;
}

/* Calendar */
.calendar-day.selected,
.calendar-day.today {
    background-color: var(--accent-primary) !important;
    color: white !important;
}

/* Tags */
.tag-primary,
.badge-tag {
    background-color: var(--accent-light) !important;
    color: var(--accent-primary) !important;
    border: 1px solid var(--accent-primary) !important;
}

/* Focus States */
*:focus {
    outline-color: var(--accent-primary) !important;
}

/* Selection */
::selection {
    background-color: var(--accent-medium) !important;
    color: white !important;
}

::-moz-selection {
    background-color: var(--accent-medium) !important;
    color: white !important;
}

/* Loading States */
.loading-spinner {
    border-color: var(--accent-light) !important;
    border-top-color: var(--accent-primary) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-hover);
}

/* Special Elements */
.highlight {
    background-color: var(--accent-light) !important;
}

.border-primary {
    border-color: var(--accent-primary) !important;
}

.bg-primary-soft {
    background-color: var(--accent-light) !important;
}

/* Gamification Elements */
.xp-bar {
    background-color: var(--accent-primary) !important;
}

.rank-badge.active {
    background-color: var(--accent-primary) !important;
    color: white !important;
}

/* Trade Journal */
.trade-entry.selected {
    border-left: 3px solid var(--accent-primary) !important;
    background-color: var(--accent-light) !important;
}

/* Strategy Cards */
.strategy-card.active {
    border: 2px solid var(--accent-primary) !important;
    background-color: var(--accent-light) !important;
}

/* Quick Stats */
.quick-stat-icon {
    color: var(--accent-primary) !important;
}

/* Header Elements */
.header-icon:hover {
    color: var(--accent-primary) !important;
}

/* Success Messages */
.success-checkmark {
    color: var(--accent-primary) !important;
}

/* Interactive Elements */
.interactive:hover {
    color: var(--accent-primary) !important;
    transition: color 0.2s ease;
}

/* ===== MISSING HARDCODED BLUE ELEMENTS ===== */

/* Sidebar User Avatar Border */
.sidebar-user img {
    border-color: var(--accent-medium) !important;
}

/* Welcome Banner (Dashboard) */
.welcome-banner {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%) !important;
}

/* Today's Performance / Summary Banner */
.summary-banner {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%) !important;
}

/* Gradient Hero (used in various places) */
:root {
    --gradient-hero: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%);
}

/* Dewey Chat Button Background */
#dewey-chat-widget .dewey-chat-button,
.dewey-chat-button {
    background: var(--accent-primary) !important;
    box-shadow: 0 4px 12px var(--accent-medium) !important;
}

#dewey-chat-widget .dewey-chat-button:hover,
.dewey-chat-button:hover {
    box-shadow: 0 6px 20px var(--accent-medium) !important;
}

/* Advanced Journal Button */
.advanced-journal-btn {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

.advanced-journal-btn:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

/* Settings Primary Icon (gear icon in sidebar) */
.setting-primary {
    background-color: var(--accent-light) !important;
    color: var(--accent-primary) !important;
}

.setting-primary:hover {
    background-color: var(--accent-primary) !important;
    color: white !important;
}

/* XP Progress Bar */
.xp-progress-sidebar .xp-fill-sidebar,
.xp-progress .xp-fill {
    background: var(--accent-primary) !important;
}

/* Filter Chips (Search filters) */
.filter-chip.active {
    background: var(--accent-primary) !important;
    color: white !important;
    border-color: var(--accent-primary) !important;
}

/* Quick Action Buttons */
.quick-action-btn:hover,
.quick-action-btn.active {
    background: var(--accent-primary) !important;
    color: white !important;
}

/* Any element with ocean blue color */
[style*="#0891b2"] {
    background-color: var(--accent-primary) !important;
}

/* Fix for inline styles with the old blue color */
[style*="background: #0891b2"],
[style*="background-color: #0891b2"],
[style*="background: rgb(8, 145, 178)"],
[style*="background-color: rgb(8, 145, 178)"] {
    background: var(--accent-primary) !important;
}

/* Gradient with old blue colors */
[style*="linear-gradient"][style*="#0891b2"],
[style*="linear-gradient"][style*="rgb(8, 145, 178)"] {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%) !important;
}

/* Badge Primary */
.badge.badge-primary {
    background-color: var(--accent-primary) !important;
}

/* Notification Badge on Dewey */
.dewey-notification-badge {
    background: var(--accent-danger, #dc3545) !important;
}

/* Ocean/Teal gradient replacements */
[style*="#4facfe"],
[style*="#00f2fe"] {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%) !important;
}