/* CSS Variables - Fiacore 2025 */
/* Comprehensive Design Token System - Scalable for Multi-Theme Support */
/* To add a new theme: Copy the :root block and adjust values for [data-theme="your-theme"] */

:root {
    /* ===== PRIMITIVE TOKENS (Raw Palette) ===== */
    /* Blues */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    
    /* Greens (Income/Success) */
    --emerald-50: #ecfdf5;
    --emerald-100: #d1fae5;
    --emerald-200: #a7f3d0;
    --emerald-300: #6ee7b7;
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    
    /* Reds (Expense/Error) */
    --rose-50: #fff1f2;
    --rose-100: #ffe4e6;
    --rose-200: #fecdd3;
    --rose-300: #fda4af;
    --rose-400: #fb7185;
    --rose-500: #f43f5e;
    --rose-600: #e11d48;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    
    /* Ambers (Warning) */
    --amber-50: #fffbeb;
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-300: #fcd34d;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    
    /* Violets (Secondary/Info) */
    --violet-300: #c4b5fd;
    --violet-400: #a78bfa;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;
    
    /* Cyans (Dark Mode Accent) */
    --cyan-300: #67e8f9;
    --cyan-400: #22d3ee;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    
    /* Slates (Neutrals for Dark Mode) */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;
    
    /* Grays (Neutrals for Light Mode) */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* ===== SEMANTIC TOKENS (Theme-Aware) ===== */
    /* Brand Primary */
    --color-primary: var(--blue-500);
    --color-primary-light: var(--blue-400);
    --color-primary-dark: var(--blue-600);
    --color-primary-bg: rgba(59, 130, 246, 0.08);
    --color-primary-border: rgba(59, 130, 246, 0.2);
    
    /* Income / Success */
    --color-income: var(--emerald-500);
    --color-income-light: var(--emerald-400);
    --color-income-dark: var(--emerald-600);
    --color-income-bg: rgba(16, 185, 129, 0.08);
    --color-income-border: rgba(16, 185, 129, 0.2);
    
    /* Expense / Error */
    --color-expense: var(--red-400);
    --color-expense-light: var(--rose-300);
    --color-expense-dark: var(--red-500);
    --color-expense-bg: rgba(248, 113, 113, 0.08);
    --color-expense-border: rgba(248, 113, 113, 0.2);
    
    /* Warning */
    --color-warning: var(--amber-500);
    --color-warning-light: var(--amber-400);
    --color-warning-dark: var(--amber-600);
    --color-warning-bg: rgba(245, 158, 11, 0.08);
    --color-warning-border: rgba(245, 158, 11, 0.2);
    
    /* Info */
    --color-info: var(--blue-500);
    --color-info-light: var(--blue-400);
    --color-info-bg: rgba(59, 130, 246, 0.08);
    
    /* Success (alias for income) */
    --color-success: var(--color-income);
    --color-success-bg: var(--color-income-bg);
    
    /* Secondary / Violet */
    --color-secondary: var(--violet-500);
    --color-secondary-light: var(--violet-400);
    --color-secondary-bg: rgba(139, 92, 246, 0.08);
    
    /* ===== CHART COLOR PALETTE ===== */
    /* Light Mode Chart Colors */
    --chart-income: var(--emerald-500);
    --chart-expense: var(--red-500);
    --chart-primary: var(--blue-500);
    --chart-warning: var(--amber-500);
    --chart-info: var(--violet-500);
    --chart-secondary: var(--teal-400);
    --chart-neutral: var(--gray-500);
    
    /* Chart Series (for multi-series charts) */
    --chart-series-1: var(--blue-500);
    --chart-series-2: var(--emerald-500);
    --chart-series-3: var(--amber-500);
    --chart-series-4: var(--violet-500);
    --chart-series-5: var(--rose-500);
    --chart-series-6: var(--cyan-400);
    --chart-series-7: var(--teal-400);
    --chart-series-8: var(--amber-400);
    
    /* ===== TEXT COLORS ===== */
    --color-text-primary: var(--gray-800);
    --color-text-secondary: var(--gray-500);
    --color-text-muted: var(--gray-400);
    --color-text-disabled: var(--gray-300);
    --color-text-heading: var(--gray-900);
    --color-text-link: var(--blue-500);
    --color-text-link-hover: var(--blue-600);
    
    /* ===== BACKGROUND COLORS ===== */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: var(--gray-50);
    --color-bg-tertiary: var(--gray-100);
    --color-bg-hover: var(--gray-200);
    --color-bg-card: #FFFFFF;
    --color-bg-elevated: var(--gray-100);
    --color-bg-input: #FFFFFF;
    --color-bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* ===== BORDER COLORS ===== */
    --color-border-light: var(--gray-200);
    --color-border-medium: var(--gray-300);
    --color-border-dark: var(--gray-400);
    --color-border-divider: rgba(0, 0, 0, 0.1);
    --color-border-focus: var(--blue-500);
    
    /* ===== GRADIENT BACKGROUNDS ===== */
    --gradient-primary: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
    --gradient-income: linear-gradient(135deg, var(--emerald-400) 0%, var(--emerald-600) 100%);
    --gradient-expense: linear-gradient(135deg, var(--rose-400) 0%, var(--red-500) 100%);
    --gradient-card: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);
    --gradient-chart-bg: linear-gradient(135deg, #fefcfb 0%, #fef7f0 100%);
    
    /* ===== COMPONENT-SPECIFIC TOKENS ===== */
    /* Stat Cards */
    --stat-card-bg: var(--color-bg-card);
    --stat-card-border: var(--color-border-light);
    --stat-label-color: var(--gray-500);
    --stat-value-color: var(--gray-900);
    --stat-detail-color: var(--gray-400);
    
    /* Progress Bars */
    --progress-bg: var(--gray-200);
    --progress-track: var(--gray-100);
    
    /* Toggle Switches */
    --toggle-track-bg: var(--gray-300);
    --toggle-track-active: var(--blue-500);
    --toggle-knob-bg: #FFFFFF;
    --toggle-border: var(--gray-400);
    --toggle-label-color: var(--gray-500);
    --toggle-label-active: var(--blue-500);
    
    /* Icon Backgrounds */
    --icon-bg-income: rgba(16, 185, 129, 0.1);
    --icon-bg-expense: rgba(239, 68, 68, 0.1);
    --icon-bg-primary: rgba(59, 130, 246, 0.1);
    --icon-bg-warning: rgba(245, 158, 11, 0.1);
    --icon-bg-secondary: rgba(139, 92, 246, 0.1);
    
    /* ===== COMPONENT TOKENS (TIER 3) ===== */
    /* Buttons */
    --button-primary-bg: var(--color-primary);
    --button-primary-text: #FFFFFF;
    --button-primary-hover: var(--color-primary-dark);
    --button-primary-border: var(--color-primary);
    --button-secondary-bg: transparent;
    --button-secondary-text: var(--color-primary);
    --button-secondary-hover: var(--color-primary-bg);
    --button-secondary-border: var(--color-primary);
    --button-danger-bg: var(--color-expense);
    --button-danger-text: #FFFFFF;
    --button-danger-hover: var(--red-600);
    --button-success-bg: var(--color-income);
    --button-success-text: #FFFFFF;
    --button-success-hover: var(--emerald-600);
    --button-disabled-bg: var(--gray-200);
    --button-disabled-text: var(--gray-400);
    
    /* Cards */
    --card-bg: var(--color-bg-card);
    --card-border: var(--color-border-light);
    --card-header-bg: var(--color-bg-secondary);
    --card-header-text: var(--color-text-heading);
    --card-body-text: var(--color-text-primary);
    --card-shadow: var(--shadow-sm);
    --card-hover-shadow: var(--shadow-md);
    
    /* Forms / Inputs */
    --input-bg: var(--color-bg-input);
    --input-border: var(--color-border-medium);
    --input-text: var(--color-text-primary);
    --input-placeholder: var(--color-text-muted);
    --input-focus-border: var(--color-border-focus);
    --input-focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    --input-disabled-bg: var(--gray-100);
    --input-disabled-text: var(--gray-400);
    --input-error-border: var(--color-expense);
    --input-success-border: var(--color-income);
    
    /* Tables */
    --table-bg: var(--color-bg-card);
    --table-header-bg: var(--color-bg-secondary);
    --table-header-text: var(--color-text-heading);
    --table-row-hover: var(--color-bg-hover);
    --table-border: var(--color-border-light);
    --table-stripe-bg: var(--color-bg-secondary);
    
    /* Modals */
    --modal-bg: var(--color-bg-card);
    --modal-header-bg: var(--color-bg-secondary);
    --modal-header-text: var(--color-text-heading);
    --modal-body-text: var(--color-text-primary);
    --modal-footer-bg: var(--color-bg-secondary);
    --modal-overlay: var(--color-bg-overlay);
    --modal-border: var(--color-border-light);
    --modal-shadow: var(--shadow-xl);
    
    /* Dropdowns */
    --dropdown-bg: var(--color-bg-card);
    --dropdown-border: var(--color-border-light);
    --dropdown-item-hover: var(--color-bg-hover);
    --dropdown-item-text: var(--color-text-primary);
    --dropdown-item-active-bg: var(--color-primary-bg);
    --dropdown-item-active-text: var(--color-primary);
    --dropdown-shadow: var(--shadow-lg);
    
    /* Badges */
    --badge-success-bg: var(--color-income-bg);
    --badge-success-text: var(--color-income);
    --badge-danger-bg: var(--color-expense-bg);
    --badge-danger-text: var(--color-expense);
    --badge-warning-bg: var(--color-warning-bg);
    --badge-warning-text: var(--color-warning);
    --badge-info-bg: var(--color-info-bg);
    --badge-info-text: var(--color-info);
    --badge-neutral-bg: var(--gray-100);
    --badge-neutral-text: var(--gray-600);
    
    /* Alerts */
    --alert-success-bg: var(--color-income-bg);
    --alert-success-border: var(--color-income-border);
    --alert-success-text: var(--color-income-dark);
    --alert-danger-bg: var(--color-expense-bg);
    --alert-danger-border: var(--color-expense-border);
    --alert-danger-text: var(--color-expense-dark);
    --alert-warning-bg: var(--color-warning-bg);
    --alert-warning-border: var(--color-warning-border);
    --alert-warning-text: var(--color-warning-dark);
    --alert-info-bg: var(--color-info-bg);
    --alert-info-border: var(--color-primary-border);
    --alert-info-text: var(--color-primary-dark);
    
    /* Tabs / Navigation */
    --tab-bg: transparent;
    --tab-text: var(--color-text-secondary);
    --tab-active-bg: var(--color-primary-bg);
    --tab-active-text: var(--color-primary);
    --tab-hover-bg: var(--color-bg-hover);
    --tab-border: var(--color-border-light);
    
    /* Chart.js Specific */
    --chart-text-color: var(--gray-600);
    --chart-grid-color: rgba(0, 0, 0, 0.08);
    --chart-tooltip-bg: var(--gray-800);
    --chart-tooltip-text: #FFFFFF;
    --chart-legend-text: var(--gray-600);
    
    /* ===== SHADOWS ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
    --shadow-primary: 0 4px 14px rgba(59, 130, 246, 0.25);
    --shadow-income: 0 4px 14px rgba(16, 185, 129, 0.25);
    --shadow-expense: 0 4px 14px rgba(248, 113, 113, 0.25);
    
    /* ===== BORDER RADIUS ===== */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* ===== SPACING ===== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 400ms ease;
    
    /* ===== Z-INDEX LAYERS ===== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
}

/* ===== UTILITY CLASSES FOR COLORS ===== */
/* Text Colors */
.text-income { color: var(--color-income) !important; }
.text-expense { color: var(--color-expense) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-primary-brand { color: var(--color-primary) !important; }
.text-secondary-brand { color: var(--color-secondary) !important; }
.text-success { color: var(--color-income) !important; }
.text-danger { color: var(--red-500) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-muted-theme { color: var(--color-text-muted) !important; }
.text-heading { color: var(--color-text-heading) !important; }
.text-body { color: var(--color-text-primary) !important; }
.text-secondary-theme { color: var(--color-text-secondary) !important; }

/* Background Colors */
.bg-income { background-color: var(--color-income-bg) !important; }
.bg-expense { background-color: var(--color-expense-bg) !important; }
.bg-warning { background-color: var(--color-warning-bg) !important; }
.bg-success { background-color: var(--color-income) !important; }
.bg-primary-light { background-color: var(--color-primary-bg) !important; }
.bg-secondary-light { background-color: var(--color-secondary-bg) !important; }
.bg-card { background-color: var(--color-bg-card) !important; }
.bg-surface { background-color: var(--color-bg-secondary) !important; }
.bg-elevated { background-color: var(--color-bg-elevated) !important; }
.bg-primary-theme { background-color: var(--color-bg-primary) !important; }

/* Border Colors */
.border-income { border-color: var(--color-income-border) !important; }
.border-expense { border-color: var(--color-expense-border) !important; }
.border-warning { border-color: var(--color-warning-border) !important; }
.border-light { border-color: var(--color-border-light) !important; }
.border-divider { border-color: var(--color-border-divider) !important; }

/* ===== STAT CARD UTILITIES ===== */
.stat-card {
    background: var(--stat-card-bg) !important;
    border: 1px solid var(--stat-card-border) !important;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.stat-card .stat-label {
    color: var(--stat-label-color) !important;
    font-size: 0.875rem;
    font-weight: 500;
}

.stat-card .stat-value {
    color: var(--stat-value-color) !important;
    font-size: 1.5rem;
    font-weight: 700;
}

.stat-card .stat-detail {
    color: var(--stat-detail-color) !important;
    font-size: 0.75rem;
}

/* ===== STAT ICON UTILITIES ===== */
.stat-icon-income {
    background: var(--icon-bg-income) !important;
    color: var(--color-income) !important;
}

.stat-icon-expense {
    background: var(--icon-bg-expense) !important;
    color: var(--color-expense) !important;
}

.stat-icon-primary {
    background: var(--icon-bg-primary) !important;
    color: var(--color-primary) !important;
}

.stat-icon-warning {
    background: var(--icon-bg-warning) !important;
    color: var(--color-warning) !important;
}

.stat-icon-secondary {
    background: var(--icon-bg-secondary) !important;
    color: var(--color-secondary) !important;
}

/* ===== DIVIDER UTILITIES ===== */
.divider-theme {
    height: 1px;
    background: var(--color-border-divider) !important;
    border: none;
}

.divider-horizontal {
    width: 85%;
    height: 1px;
    background: var(--color-border-divider) !important;
    margin: 0 auto 2rem auto;
}

/* ===== PROGRESS BAR UTILITIES ===== */
.progress-theme {
    background: var(--progress-bg) !important;
}

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

.progress-track {
    background: var(--progress-track) !important;
}

/* ===== CHART CONTAINER UTILITIES ===== */
.chart-container-theme {
    background: var(--gradient-chart-bg) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.chart-title {
    color: var(--color-primary) !important;
    font-weight: 600;
}

/* ===== TOGGLE SWITCH UTILITIES ===== */
.toggle-switch-theme {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    border: 1px solid var(--toggle-border);
}

.toggle-switch-theme .toggle-track {
    width: 44px;
    height: 24px;
    background: var(--toggle-track-bg);
    border-radius: var(--radius-full);
    border: 1px solid var(--toggle-border);
    position: relative;
    cursor: pointer;
    transition: var(--transition-base);
}

.toggle-switch-theme .toggle-track.active {
    background: var(--toggle-track-active);
    border-color: var(--toggle-track-active);
}

.toggle-switch-theme .toggle-knob {
    width: 18px;
    height: 18px;
    background: var(--toggle-knob-bg);
    border-radius: var(--radius-full);
    position: absolute;
    top: 2px;
    left: 2px;
    transition: var(--transition-base);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch-theme .toggle-track.active .toggle-knob {
    left: calc(100% - 20px);
}

.toggle-switch-theme .toggle-label {
    color: var(--toggle-label-color);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-base);
}

.toggle-switch-theme .toggle-label.active {
    color: var(--toggle-label-active);
    font-weight: 600;
}

/* ===== CARD UTILITIES ===== */
.card-theme {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg);
}

.card-theme .card-header {
    background: var(--color-bg-elevated) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    color: var(--color-text-heading) !important;
}

.card-theme .card-body {
    color: var(--color-text-primary) !important;
}

/* ===== SECTION TITLE UTILITIES ===== */
.section-title {
    color: var(--color-primary) !important;
    font-weight: 600;
}

.section-title i {
    color: inherit !important;
}

/* ============================================================
   COMPREHENSIVE UTILITY CLASSES FOR TEMPLATE REFACTORING
   Replacing all hardcoded color instances with theme-aware classes
   ============================================================ */

/* ===== TEXT COLOR UTILITIES ===== */
/* Primary Brand Colors */
.text-brand { color: var(--color-primary) !important; }
.text-brand-dark { color: var(--color-primary-dark) !important; }
.text-brand-light { color: var(--color-primary-light) !important; }

/* Semantic Text Colors */
.text-income-theme { color: var(--color-income) !important; }
.text-income-dark { color: var(--color-income-dark) !important; }
.text-expense-theme { color: var(--color-expense) !important; }
.text-expense-dark { color: var(--color-expense-dark) !important; }
.text-warning-theme { color: var(--color-warning) !important; }
.text-warning-dark { color: var(--color-warning-dark) !important; }
.text-info-theme { color: var(--color-info) !important; }
.text-secondary-theme { color: var(--color-secondary) !important; }

/* Gray Text Scale (Light Mode → Dark Mode adaptive) */
.text-gray-900 { color: var(--color-text-heading) !important; }
.text-gray-800 { color: var(--color-text-primary) !important; }
.text-gray-700 { color: var(--gray-700) !important; }
.text-gray-600 { color: var(--gray-600) !important; }
.text-gray-500 { color: var(--color-text-secondary) !important; }
.text-gray-400 { color: var(--color-text-muted) !important; }
.text-slate-500 { color: var(--slate-500) !important; }
.text-slate-400 { color: var(--slate-400) !important; }

/* Dark mode overrides for gray text */
[data-theme="dark"] .text-gray-900 { color: #F1F5F9 !important; }
[data-theme="dark"] .text-gray-800 { color: #F1F5F9 !important; }
[data-theme="dark"] .text-gray-700 { color: #CBD5E1 !important; }
[data-theme="dark"] .text-gray-600 { color: #CBD5E1 !important; }
[data-theme="dark"] .text-gray-500 { color: #94A3B8 !important; }
[data-theme="dark"] .text-gray-400 { color: #64748B !important; }
[data-theme="dark"] .text-slate-500 { color: #94A3B8 !important; }
[data-theme="dark"] .text-slate-400 { color: #64748B !important; }

/* ===== BACKGROUND COLOR UTILITIES ===== */
/* Semantic Backgrounds */
.bg-brand { background-color: var(--color-primary) !important; }
.bg-brand-dark { background-color: var(--color-primary-dark) !important; }
.bg-brand-light { background-color: var(--color-primary-bg) !important; }
.bg-income-theme { background-color: var(--color-income-bg) !important; }
.bg-expense-theme { background-color: var(--color-expense-bg) !important; }
.bg-warning-theme { background-color: var(--color-warning-bg) !important; }
.bg-info-theme { background-color: var(--color-info-bg) !important; }
.bg-secondary-theme { background-color: var(--color-secondary-bg) !important; }

/* Light Blue Backgrounds (common in Fiacore) */
.bg-blue-50 { background-color: var(--blue-50) !important; }
.bg-blue-100 { background-color: var(--blue-100) !important; }
.bg-blue-200 { background-color: var(--blue-200) !important; }

/* Dark mode overrides for light backgrounds */
[data-theme="dark"] .bg-blue-50 { background-color: rgba(96, 165, 250, 0.1) !important; }
[data-theme="dark"] .bg-blue-100 { background-color: rgba(96, 165, 250, 0.15) !important; }
[data-theme="dark"] .bg-blue-200 { background-color: rgba(96, 165, 250, 0.2) !important; }

/* Gray/Neutral Backgrounds */
.bg-gray-50 { background-color: var(--gray-50) !important; }
.bg-gray-100 { background-color: var(--gray-100) !important; }
.bg-gray-200 { background-color: var(--gray-200) !important; }
.bg-slate-50 { background-color: var(--slate-50) !important; }
.bg-slate-100 { background-color: var(--slate-100) !important; }

/* Dark mode overrides for gray backgrounds */
[data-theme="dark"] .bg-gray-50 { background-color: #1E293B !important; }
[data-theme="dark"] .bg-gray-100 { background-color: #334155 !important; }
[data-theme="dark"] .bg-gray-200 { background-color: #475569 !important; }
[data-theme="dark"] .bg-slate-50 { background-color: #1E293B !important; }
[data-theme="dark"] .bg-slate-100 { background-color: #334155 !important; }

/* White Background (critical for dark mode) */
.bg-white-theme { background-color: var(--color-bg-card) !important; }
.bg-surface-theme { background-color: var(--color-bg-secondary) !important; }
.bg-elevated-theme { background-color: var(--color-bg-elevated) !important; }

/* ===== BORDER COLOR UTILITIES ===== */
.border-brand { border-color: var(--color-primary) !important; }
.border-brand-light { border-color: var(--color-primary-border) !important; }
.border-income-theme { border-color: var(--color-income-border) !important; }
.border-expense-theme { border-color: var(--color-expense-border) !important; }
.border-warning-theme { border-color: var(--color-warning-border) !important; }
.border-gray-200 { border-color: var(--gray-200) !important; }
.border-gray-300 { border-color: var(--gray-300) !important; }
.border-slate-200 { border-color: var(--slate-200) !important; }
.border-theme { border-color: var(--color-border-light) !important; }

/* Dark mode overrides for borders */
[data-theme="dark"] .border-gray-200 { border-color: rgba(255, 255, 255, 0.1) !important; }
[data-theme="dark"] .border-gray-300 { border-color: rgba(255, 255, 255, 0.15) !important; }
[data-theme="dark"] .border-slate-200 { border-color: rgba(255, 255, 255, 0.1) !important; }

/* ===== GRADIENT UTILITIES ===== */
.gradient-brand {
    background: var(--gradient-primary) !important;
}

.gradient-income {
    background: var(--gradient-income) !important;
}

.gradient-expense {
    background: var(--gradient-expense) !important;
}

.gradient-chart-bg {
    background: var(--gradient-chart-bg) !important;
}

/* ===== ICON CONTAINER UTILITIES ===== */
.icon-container-income {
    background: var(--icon-bg-income) !important;
    color: var(--color-income) !important;
    border-radius: var(--radius-lg);
    padding: 0.75rem;
}

.icon-container-expense {
    background: var(--icon-bg-expense) !important;
    color: var(--color-expense) !important;
    border-radius: var(--radius-lg);
    padding: 0.75rem;
}

.icon-container-brand {
    background: var(--icon-bg-primary) !important;
    color: var(--color-primary) !important;
    border-radius: var(--radius-lg);
    padding: 0.75rem;
}

.icon-container-warning {
    background: var(--icon-bg-warning) !important;
    color: var(--color-warning) !important;
    border-radius: var(--radius-lg);
    padding: 0.75rem;
}

.icon-container-secondary {
    background: var(--icon-bg-secondary) !important;
    color: var(--color-secondary) !important;
    border-radius: var(--radius-lg);
    padding: 0.75rem;
}

/* ===== PROFESSIONAL STAT CARD ===== */
.stat-card-pro {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition-base);
}

.stat-card-pro:hover {
    box-shadow: var(--shadow-md);
}

.stat-card-pro .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stat-card-pro .stat-title {
    color: var(--color-text-secondary) !important;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.stat-card-pro .stat-amount {
    color: var(--color-text-heading) !important;
    font-size: 1.5rem;
    font-weight: 700;
}

.stat-card-pro .stat-trend {
    font-size: 0.75rem;
    font-weight: 500;
}

.stat-card-pro .stat-trend.positive {
    color: var(--color-income) !important;
}

.stat-card-pro .stat-trend.negative {
    color: var(--color-expense) !important;
}

/* ===== CHART CARD ===== */
.chart-card-theme {
    background: var(--gradient-chart-bg) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.chart-card-theme .chart-title {
    color: var(--color-primary) !important;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-card-theme .chart-title i {
    color: inherit !important;
}

/* ===== BADGE UTILITIES ===== */
.badge-brand {
    background: var(--color-primary-bg) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary-border) !important;
}

.badge-income-theme {
    background: var(--color-income-bg) !important;
    color: var(--color-income) !important;
    border: 1px solid var(--color-income-border) !important;
}

.badge-expense-theme {
    background: var(--color-expense-bg) !important;
    color: var(--color-expense) !important;
    border: 1px solid var(--color-expense-border) !important;
}

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

/* ===== BUTTON UTILITIES ===== */
.btn-brand {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
}

.btn-brand:hover {
    opacity: 0.9;
}

.btn-brand-outline {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
}

.btn-income-theme {
    background: var(--color-income) !important;
    color: white !important;
    border: none !important;
}

.btn-expense-theme {
    background: var(--color-expense) !important;
    color: white !important;
    border: none !important;
}

/* ===== TABLE UTILITIES ===== */
.table-theme {
    background: var(--color-bg-card) !important;
}

.table-theme thead {
    background: var(--color-bg-elevated) !important;
}

.table-theme thead th {
    color: var(--color-text-heading) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

.table-theme tbody td {
    color: var(--color-text-primary) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

.table-theme tbody tr:hover {
    background: var(--color-bg-hover) !important;
}

/* ===== LOAN/GOAL/CREDIT CARD SPECIFIC ===== */
.loan-card-theme {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.loan-card-theme .loan-name {
    color: var(--color-text-heading) !important;
    font-weight: 600;
}

.loan-card-theme .loan-meta {
    color: var(--color-text-secondary) !important;
    font-size: 0.875rem;
}

.loan-card-theme .loan-amount {
    color: var(--color-primary) !important;
    font-weight: 700;
    font-size: 1.25rem;
}

.goal-card-theme {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.goal-card-theme .goal-name {
    color: var(--color-text-heading) !important;
    font-weight: 600;
}

.goal-card-theme .goal-type {
    color: var(--color-text-muted) !important;
    font-size: 0.75rem;
}

.goal-card-theme .goal-progress {
    color: var(--color-income) !important;
    font-weight: 700;
}

.credit-card-theme {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.credit-card-theme .card-name {
    color: var(--color-text-heading) !important;
    font-weight: 600;
}

.credit-card-theme .utilization-text {
    color: var(--color-text-secondary) !important;
}