/**
 * EasyFlow Theme System
 * Light and Dark mode support with smooth transitions
 */

/* Root Variables - Light Mode (Default) */
:root {
    /* Primary Colors - Modern Blue Palette */
    --color-primary: #2563eb;
    --color-primary-light: #3b82f6;
    --color-primary-dark: #1d4ed8;
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    
    /* Neutral Colors - Modern Gray Scale */
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    
    /* Semantic Colors */
    --color-success: #059669;
    --color-success-light: #10b981;
    --color-success-dark: #047857;
    --color-success-50: #ecfdf5;
    --color-success-100: #d1fae5;
    
    --color-warning: #d97706;
    --color-warning-light: #f59e0b;
    --color-warning-dark: #b45309;
    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    
    --color-error: #dc2626;
    --color-error-light: #ef4444;
    --color-error-dark: #b91c1c;
    --color-error-50: #fef2f2;
    --color-error-100: #fee2e2;
    
    --color-info: #0284c7;
    --color-info-light: #0ea5e9;
    --color-info-dark: #0369a1;
    --color-info-50: #f0f9ff;
    --color-info-100: #e0f2fe;
    
    /* Background Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: var(--color-gray-50);
    --color-bg-tertiary: var(--color-gray-100);
    --color-bg-card: #ffffff;
    --color-bg-overlay: rgba(15, 23, 42, 0.5);
    --color-bg-glass: rgba(255, 255, 255, 0.8);
    
    /* Text Colors */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-tertiary: var(--color-gray-500);
    --color-text-inverse: #ffffff;
    --color-text-muted: var(--color-gray-400);
    
    /* Border Colors */
    --color-border-light: var(--color-gray-200);
    --color-border-medium: var(--color-gray-300);
    --color-border-dark: var(--color-gray-400);
    --color-border-focus: var(--color-primary);
    
    /* Legacy aliases for compatibility */
    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-dark);
    --secondary: var(--color-gray-500);
    --secondary-hover: var(--color-gray-600);
    --success: var(--color-success-light);
    --success-hover: var(--color-success);
    --error: var(--color-error-light);
    --error-hover: var(--color-error);
    --warning: var(--color-warning-light);
    --info: var(--color-info-light);

    /* Backgrounds */
    --bg-primary: var(--color-bg-primary);
    --bg-secondary: var(--color-bg-secondary);
    --bg-tertiary: var(--color-bg-tertiary);
    
    /* Text */
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-tertiary: var(--color-text-tertiary);
    
    /* Borders */
    --border-color: var(--color-border-light);
    --border-hover: var(--color-border-medium);
    
    /* Card */
    --card-bg: var(--color-bg-card);
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    /* Header */
    --header-bg: var(--color-bg-primary);
    --header-border: var(--color-border-light);
    
    /* Modal */
    --modal-bg: rgba(0, 0, 0, 0.5);
    --modal-content-bg: var(--color-bg-primary);
    
    /* Input */
    --input-bg: var(--color-bg-primary);
    --input-border: var(--color-border-light);
    --input-focus: var(--color-primary);
    
    /* Chart Colors */
    --chart-primary: var(--color-primary);
    --chart-secondary: var(--color-success-light);
    --chart-tertiary: var(--color-warning-light);
}

/* Dark Mode - Improved Palette */
:root.dark {
    /* Primary colors stay the same for consistency */
    
    /* Background Colors - Much better contrast */
    --color-bg-primary: #0a0a0a;           /* Very dark background */
    --color-bg-secondary: #1a1a1a;         /* Dark grey for cards */
    --color-bg-tertiary: #2a2a2a;          /* Medium grey for hover states */
    --color-bg-card: #1a1a1a;              /* Card background */
    --color-bg-overlay: rgba(0, 0, 0, 0.9); /* Stronger overlay */
    --color-bg-glass: rgba(26, 26, 26, 0.95); /* Glass effect */
    
    /* Text Colors - High contrast */
    --color-text-primary: #ffffff;         /* Pure white for main text */
    --color-text-secondary: #e0e0e0;      /* Light grey for secondary text */
    --color-text-tertiary: #b0b0b0;       /* Medium grey for tertiary text */
    --color-text-inverse: #0a0a0a;        /* Dark text for light backgrounds */
    --color-text-muted: #808080;          /* Muted grey */
    
    /* Border Colors - Subtle but visible */
    --color-border-light: #404040;        /* Light borders */
    --color-border-medium: #505050;       /* Medium borders */
    --color-border-dark: #606060;         /* Dark borders */
    
    /* Legacy aliases for compatibility */
    --bg-primary: var(--color-bg-primary);
    --bg-secondary: var(--color-bg-secondary);
    --bg-tertiary: var(--color-bg-tertiary);
    
    /* Text */
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-tertiary: var(--color-text-tertiary);
    
    /* Borders */
    --border-color: var(--color-border-light);
    --border-hover: var(--color-border-medium);
    
    /* Card */
    --card-bg: var(--color-bg-card);
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.8), 0 4px 6px -2px rgba(0, 0, 0, 0.6);
    
    /* Header */
    --header-bg: var(--color-bg-secondary);
    --header-border: var(--color-border-light);
    
    /* Modal */
    --modal-bg: rgba(0, 0, 0, 0.9);
    --modal-content-bg: var(--color-bg-card);
    
    /* Input */
    --input-bg: var(--color-bg-tertiary);
    --input-border: var(--color-border-light);
    --input-focus: var(--color-primary-light);
}

/* Apply Theme Variables */
body {
    background-color: var(--bg-secondary);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth transitions for theme change */
*,
*::before,
*::after {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Card Styles */
.card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: var(--card-shadow);
}

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

/* Header */
.header {
    background-color: var(--header-bg);
    border-bottom-color: var(--header-border);
}

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

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

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

.text-gray-600 {
    color: var(--text-secondary);
}

/* Links */
.nav-link {
    color: var(--text-secondary);
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary);
}

/* Modal */
.modal {
    background-color: var(--modal-bg);
}

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

/* Dark mode specific adjustments */
:root.dark .text-success {
    color: var(--color-success-light);
}

:root.dark .text-error {
    color: var(--color-error-light);
}

/* Improved dark mode card styling */
:root.dark .card {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    color: var(--color-text-primary) !important;
}

:root.dark .card h1,
:root.dark .card h2,
:root.dark .card h3,
:root.dark .card h4,
:root.dark .card h5,
:root.dark .card h6 {
    color: var(--color-text-primary) !important;
}

:root.dark .card p,
:root.dark .card span,
:root.dark .card div {
    color: var(--color-text-secondary) !important;
}

/* Fix for white content areas in dark mode */
:root.dark .card > div,
:root.dark .card .content,
:root.dark .card .card-body {
    background-color: var(--color-bg-card) !important;
    color: var(--color-text-primary) !important;
}

/* Table improvements for dark mode */
:root.dark .table {
    background-color: var(--color-bg-card) !important;
    color: var(--color-text-primary) !important;
}

:root.dark .table th {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-light) !important;
}

:root.dark .table td {
    background-color: var(--color-bg-card) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-light) !important;
}

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

/* Disable hover zoom effect for specific tables in dark theme */
:root.dark .table.no-hover-zoom tbody tr:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: var(--color-bg-tertiary) !important;
}

/* Button improvements */
:root.dark .btn {
    border-color: var(--color-border-light) !important;
}

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

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

:root.dark img {
    opacity: 0.9;
}

/* Dashboard specific improvements */
:root.dark .liquidity-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
    color: white !important;
}

:root.dark .liquidity-card .liquidity-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

:root.dark .liquidity-card .liquidity-amount {
    color: white !important;
}

/* Chart container improvements */
:root.dark .chart-container {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    color: var(--color-text-primary) !important;
}

:root.dark .chart-title {
    color: var(--color-text-primary) !important;
}

/* Dashboard title improvements */
:root.dark .dashboard-title {
    color: var(--color-text-primary) !important;
}

:root.dark .dashboard-subtitle {
    color: var(--color-text-secondary) !important;
}

/* Status badges improvements */
:root.dark .status-badge {
    background-color: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-light) !important;
    color: var(--color-text-primary) !important;
}

/* Form improvements */
:root.dark .form-control,
:root.dark .form-select {
    background-color: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-light) !important;
    color: var(--color-text-primary) !important;
}

:root.dark .form-control:focus,
:root.dark .form-select:focus {
    background-color: var(--color-bg-tertiary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-primary) !important;
}

/* Alert improvements */
:root.dark .alert {
    background-color: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-light) !important;
    color: var(--color-text-primary) !important;
}

/* Navigation improvements */
:root.dark .nav-link {
    color: var(--color-text-secondary) !important;
}

:root.dark .nav-link:hover,
:root.dark .nav-link.active {
    color: var(--color-primary) !important;
}

/* Header improvements */
:root.dark .header {
    background-color: var(--color-bg-secondary) !important;
    border-bottom-color: var(--color-border-light) !important;
}

:root.dark .header-logo {
    color: var(--color-text-primary) !important;
}

:root.dark .user-name {
    color: var(--color-text-primary) !important;
}

:root.dark .alert {
    border-width: 1px;
}

/* Scrollbar for dark mode */
:root.dark ::-webkit-scrollbar {
    background-color: var(--bg-secondary);
}

:root.dark ::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
}

:root.dark ::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-hover);
}

/* Comprehensive Dark Mode Styling */
:root.dark .dashboard-title,
:root.dark .dashboard-subtitle,
:root.dark .card-title,
:root.dark .card-subtitle,
:root.dark h1, :root.dark h2, :root.dark h3, :root.dark h4, :root.dark h5, :root.dark h6 {
    color: var(--text-primary);
}

:root.dark p,
:root.dark .form-label,
:root.dark label {
    color: var(--text-secondary);
}

:root.dark .table {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

:root.dark .table thead {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

:root.dark .table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

:root.dark .table tbody tr:hover {
    background-color: var(--bg-tertiary);
}

/* Disable hover zoom effect for specific tables in dark theme */
:root.dark .table.no-hover-zoom tbody tr:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: var(--color-bg-tertiary) !important;
}

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

:root.dark .btn-secondary:hover:not(:disabled) {
    background: var(--bg-primary);
    border-color: var(--primary);
}

:root.dark .text-gray-400,
:root.dark .text-gray-500 {
    color: var(--text-tertiary);
}

:root.dark .overflow-x-auto {
    background-color: var(--card-bg);
}

/* Fix for select dropdowns in dark mode */
:root.dark .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

/* Fix for badges in dark mode */
:root.dark .status-badge {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}