/* Theme Switcher CSS
 * This file is the central hub for color variables with theme switching support
 */

/* CONSOLIDATED COLOR SYSTEM - SINGLE SOURCE OF TRUTH */
:root {
    color-scheme: light;
    
    /* Brand Colors - Purple gradients preserved */
    --brand-1: #667eea;
    --brand-2: #764ba2;
    --brand-rgb: 102, 126, 234;
    --brand-2-rgb: 118, 75, 162;
    
    /* Legacy compatibility - Light theme */
    --color-primary: var(--blue);
    --color-primary-light: #80bdff;
    --color-primary-dark: var(--blue-dark);
    --color-secondary: var(--gray-600);
    --color-secondary-light: #a1a9b0;
    --color-secondary-dark: var(--gray-700);
    --color-success: var(--success);
    --color-success-light: #48c76a;
    --color-success-dark: var(--success-dark);
    --color-danger: var(--danger);
    --color-danger-light: #e25563;
    --color-danger-dark: var(--danger-dark);
    --color-warning: var(--warning);
    --color-warning-light: #ffca2c;
    --color-warning-dark: var(--warning-dark);
    --color-info: var(--info);
    --color-info-light: #31d2f2;
    --color-info-dark: var(--info-dark);
    --color-light: var(--gray-100);
    --color-light-dark: var(--gray-200);
    --color-lighter: #f1f1f1;
    --color-dark: var(--gray-800);
    --color-dark-light: var(--gray-700);
    --color-text: var(--gray-800);
    --color-text-secondary: var(--gray-600);
    --color-background: var(--white);
    --color-coach-message: #007AFF;
    --color-user-message: #34C759;
    --color-muted: #CCCCCC;
    --color-border: #e1e1e1;
    --border-color: var(--color-border);
    --in-progress-bg-color: rgba(var(--warning-rgb), 0.1);
    --completed-bg-color: rgba(var(--success-rgb), 0.1);
    --color-background-muted: rgba(0, 0, 0, 0.05);
    --color-background-muted-dark: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
    --shadow-focus: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    
    /* States */
    --blue: #007bff;
    --blue-dark: #0056b3;
    --blue-rgb: 0, 123, 255;
    
    --success: #28a745;
    --success-aux: #20c997;
    --success-dark: #1e7e34;
    --success-darker: #155724;
    --success-rgb: 40, 167, 69;
    --success-text: #155724;
    
    --danger: #dc3545;
    --danger-rgb: 220, 53, 69;
    --danger-dark: #c82333;
    --danger-text: #721c24;
    
    --info: #17a2b8;
    --info-text: #0c5460;
    --info-dark: #117a8b;
    
    --warning: #ffc107;
    --warning-rgb: 255, 193, 7;
    --warning-text: #856404;
    --warning-dark: #e67e22;
    
    --orange: #fd7e14;
    --orange-rgb: 253, 126, 20;
    
    /* Neutrals */
    --white: #ffffff;
    --white-rgb: 255, 255, 255;
    --black: #000000;
    --black-rgb: 0, 0, 0;
    
    --gray-100: #f8f9fa;
    --gray-100-rgb: 248, 249, 250;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-600-rgb: 108, 117, 125;
    --gray-700: #495057;
    --gray-800: #333333;
    --gray-900: #111111;
    
    /* Additional text tones */
    --ink-strong: #2c3e50; /* deep slate for info boxes */
    --text-500: #555555;   /* mid text for typing indicator */

    /* Accents */
    --accent-completed: #3128a7;
    
    /* Effects */
    --surface: rgba(var(--white-rgb), 0.95);
    --glass-border: rgba(var(--white-rgb), 0.2);
    --brand-border: rgba(var(--brand-rgb), 0.2);
    --brand-border-strong: rgba(var(--brand-rgb), 0.3);
    
    --shadow-s: 0 4px 15px rgba(var(--brand-rgb), 0.3);
    --shadow-m: 0 8px 25px rgba(var(--brand-rgb), 0.3);
    --shadow-hov: 0 6px 20px rgba(var(--brand-rgb), 0.4);
    --shadow-card: 0 20px 40px rgba(var(--black-rgb), 0.1);
    --shadow-modal: 0 20px 60px rgba(var(--black-rgb), 0.3), 0 8px 25px rgba(var(--black-rgb), 0.15);
    
    /* Centralized card shadows */
    --shadow-main-card: 0 12px 30px rgba(0, 0, 0, 0.25);
    --shadow-combo-card: var(--shadow-main-card);
    --shadow-goal-item: var(--shadow-main-card);
    
    /* Radii - Backup values */
    --radius-xs: 0.125rem;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-pill: 50px;
    --radius-rounded: 0.375rem;
    
    /* Gradients - Keep purple */
    --grad-brand: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    --grad-brand-90: linear-gradient(90deg, var(--brand-1), var(--brand-2));
    --grad-brand-rev: linear-gradient(135deg, var(--brand-2), var(--brand-1));
    
    /* State gradients */
    --color-success-gradient: linear-gradient(135deg, var(--success), var(--success-aux));
    --color-success-gradient-hover: linear-gradient(135deg, var(--success-aux), var(--success));
    --color-danger-gradient: linear-gradient(135deg, var(--danger), var(--danger-dark));
    --color-danger-gradient-hover: linear-gradient(135deg, var(--danger-dark), var(--danger));
    --color-warning-gradient: linear-gradient(135deg, var(--warning), #e67e22);
    --color-warning-gradient-hover: linear-gradient(135deg, #e67e22, var(--warning));
    --color-info-gradient: linear-gradient(135deg, var(--info), var(--blue));
    --color-info-gradient-hover: linear-gradient(135deg, var(--blue), var(--info));

    /* Session tile gradients - from gradient_colors.json */
    --gradient-1: linear-gradient(135deg, #d84f76 0%, #e0b820 100%);   /* quick_win_5: Pink to Gold */
    --gradient-2: linear-gradient(135deg, #2d8bd9 0%, #00b8d4 100%);   /* quick_win_3: Blue to Cyan */
    --gradient-3: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);   /* main_2: Magenta to Red */
    --gradient-4: linear-gradient(135deg, #7C5FFF 0%, #B855FF 100%);   /* quick_win_7: Violet to Purple */
    --gradient-5: linear-gradient(135deg, #75c7c4 0%, #d9a4b9 100%);   /* quick_win_1: Teal to Pink */
    --gradient-6: linear-gradient(135deg, #d66fe0 0%, #d43d52 100%);   /* quick_win_2: Magenta to Red */
    --gradient-7: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);   /* main_3: Electric Blue to Cyan */
    --gradient-8: linear-gradient(135deg, #e0bc92 0%, #d88b6f 100%);   /* quick_win_9: Light Orange to Brown */
    --gradient-9: linear-gradient(135deg, #1fa5a6 0%, #1f0540 100%);   /* quick_win_6: Teal to Dark Purple */
    --gradient-10: linear-gradient(135deg, #2bc261 0%, #1ec7a7 100%);  /* quick_win_4: Green to Teal */
    --gradient-11: linear-gradient(135deg, #d96d72 0%, #d89fc5 100%);  /* quick_win_8: Red to Pink */
    --gradient-12: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  /* main_1: Purple to Dark Purple */
    --gradient-13: linear-gradient(135deg, #fa709a 0%, #fee140 100%);  /* gradient_12: Pink to Yellow */
    --gradient-14: linear-gradient(135deg, #30cfd0 0%, #330867 100%);  /* gradient_13: Cyan to Dark Purple */
    --gradient-15: linear-gradient(135deg, #FF7C3C 0%, #FF3C7C 100%);  /* gradient_14: Orange-Coral to Hot Pink */
    --gradient-16: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);  /* gradient_15: Light Cyan to Light Pink */
    --gradient-17: linear-gradient(135deg, #2e2e78 0%, #662d91 100%);  /* gradient_16: Dark Blue to Dark Purple */
    --gradient-18: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);  /* gradient_17: Green to Bright Green */

    /* Use consistent --color-* naming */
    --color-surface: var(--white);
    --color-surface-secondary: var(--gray-100);
    --color-surface-tertiary: var(--gray-200);
    
    /* Utility */
    --text-gradient: var(--grad-brand);
    --text-muted: var(--color-text-secondary);
    --bg-secondary: var(--color-surface-secondary);
    --body-background: var(--grad-brand);

    /* Chat message colors */
    --chat-coach-color: var(--blue);
    --chat-coach-color-dark: var(--blue-dark);
    --chat-coach-gradient: linear-gradient(135deg, var(--chat-coach-color), var(--chat-coach-color-dark));
    --chat-user-color: var(--brand-1);
    --chat-user-color-dark: var(--brand-2);
    --chat-user-gradient: linear-gradient(135deg, var(--chat-user-color), var(--chat-user-color-dark));

    /* Layout widths */
    --content-max: 83.333333%;
    --content-narrow: 66.666667%;
    --content-wide: 100%;
}

/* Theme transition effects */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
    background: var(--body-background, var(--grad-brand));
    color: var(--color-text);
    min-height: 100vh;
}

/* Global placeholder styling - uses semantic tokens that adapt to theme */
::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.form-select::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

/* Global input/form styling - use same background as navbar/header */
input,
textarea,
.form-control,
.form-select,
select {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

input:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
select:focus {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--brand-1) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.25) !important;
}


/* Dark Theme Override - Variables Only */
.theme-dark {
    color-scheme: dark;
    --body-background: #0f0f0f;

    /* Semantic Tokens - Dark Theme Overrides */
    --color-text: var(--gray-900);
    --color-text-secondary: var(--gray-700);
    --color-border: var(--gray-300);
    --color-surface: var(--gray-100);
    --color-surface-secondary: var(--gray-200);
    --color-background: #1a1a1a;

    /* Brand Colors - Purple gradients preserved */
    --brand-1: #667eea;
    --brand-2: #764ba2;
    --brand-rgb: 102, 126, 234;
    --brand-2-rgb: 118, 75, 162;

    /* States - Dark variants */
    --blue: #4dabff;
    --blue-dark: #1a91ff;
    --blue-rgb: 77, 171, 255;

    --success: #2ecc71;
    --success-aux: #27ae60;
    --success-dark: #25a25a;
    --success-rgb: 46, 204, 113;
    --success-text: #a3e6c1;

    --danger: #e74c3c;
    --danger-dark: #c0392b;
    --danger-text: #f1948a;

    --info: #3498db;
    --info-text: #85c1e9;
    --info-dark: #2980b9;

    --warning: #f39c12;
    --warning-text: #f8c471;
    --warning-dark: #d68910;

    --orange: #ff8c42;
    --orange-rgb: 255, 140, 66;

    /* Legacy compatibility - Dark variants */
    --color-primary: var(--blue);
    --color-primary-light: #80bdff;
    --color-primary-dark: var(--blue-dark);
    --color-secondary: var(--gray-600);
    --color-secondary-light: var(--gray-700);
    --color-success: var(--success);
    --color-success-light: #55d98d;
    --color-success-dark: var(--success-dark);
    --color-danger: var(--danger);
    --color-danger-light: #ed7669;
    --color-danger-dark: var(--danger-dark);
    --color-warning: var(--warning);
    --color-warning-light: #f7bc5d;
    --color-warning-dark: var(--warning-dark);
    --color-info: var(--info);
    --color-info-light: #75b9e7;
    --color-info-dark: var(--info-dark);
    --color-light: var(--gray-100);
    --color-light-dark: var(--gray-200);
    --color-lighter: var(--gray-300);
    --color-dark: var(--gray-800);
    --color-dark-light: var(--gray-700);
    --color-coach-message: var(--success);
    --color-user-message: var(--info);
    --color-muted: #6c757d;
    --border-color: var(--color-border);
    --in-progress-bg-color: rgba(var(--warning-rgb), 0.15);
    --completed-bg-color: rgba(var(--success-rgb), 0.15);
    --color-background-muted: rgba(255, 255, 255, 0.05);
    --color-background-muted-dark: rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.05);
    --shadow-md: 0 2px 10px rgba(255, 255, 255, 0.08);
    --shadow-lg: 0 10px 20px rgba(255, 255, 255, 0.1);
    --shadow-focus: 0 0 0 0.2rem rgba(102, 126, 234, 0.4);
    
    /* Neutrals - Keep literal in both themes */
    --white: #ffffff;
    --white-rgb: 255, 255, 255;
    --black: #000000;
    --black-rgb: 0, 0, 0;
    
    --gray-100: #2c2c2c;
    --gray-100-rgb: 44, 44, 44;
    --gray-200: #3a3a3a;
    --gray-300: #4a4a4a;
    --gray-400: #5a5a5a;
    --gray-500: #6a6a6a;
    --gray-600: #8a8a8a;
    --gray-600-rgb: 138, 138, 138;
    --gray-700: #ced4da;
    --gray-800: #e9ecef;
    --gray-900: #f8f9fa;
    
    /* Additional text tones - Dark variants */
    --ink-strong: #f8f9fa;
    --text-500: #adb5bd;
    
    /* Accents - Keep purple */
    --accent-completed: #667eea;
    
    /* Effects - Dark variants */
    --surface: rgba(26, 26, 26, 0.95);
    --glass-border: rgba(255, 255, 255, 0.1);
    --brand-border: rgba(var(--brand-rgb), 0.3);
    --brand-border-strong: rgba(var(--brand-rgb), 0.4);
    
    --shadow-s: 0 4px 15px rgba(255, 255, 255, 0.1);
    --shadow-m: 0 8px 25px rgba(255, 255, 255, 0.12);
    --shadow-hov: 0 6px 20px rgba(var(--brand-rgb), 0.3);
    --shadow-card: 0 20px 40px rgba(255, 255, 255, 0.08);
    --shadow-modal: 0 20px 60px rgba(255, 255, 255, 0.15), 0 8px 25px rgba(255, 255, 255, 0.08);
    
    /* Centralized card shadows - Dark theme */
    --shadow-main-card: 0 12px 30px rgba(255, 255, 255, 0.1);
    --shadow-combo-card: var(--shadow-main-card);
    --shadow-goal-item: var(--shadow-main-card);
    
    /* Gradients - Solid purple in dark theme */
    --grad-brand: linear-gradient(135deg, #a49cef, #a49cef);
    --grad-brand-90: linear-gradient(90deg, #a49cef, #a49cef);
    --grad-brand-rev: linear-gradient(135deg, #a49cef, #a49cef);
    
    /* Dark theme color overrides - black backgrounds */
    --color-surface: #1a1a1a;
    --color-surface-secondary: var(--gray-100);
    --color-surface-tertiary: var(--gray-200);
    
    /* Utility - Dark variants */
    --text-gradient: var(--grad-brand);
    --text-muted: var(--color-text-secondary);
    --bg-secondary: var(--color-surface-secondary);

    /* Chat message colors - Dark theme */
    --chat-coach-color: var(--blue);
    --chat-coach-color-dark: var(--blue-dark);
    --chat-coach-gradient: linear-gradient(135deg, var(--chat-coach-color), var(--chat-coach-color-dark));
    --chat-user-color: var(--brand-1);
    --chat-user-color-dark: var(--brand-2);
    --chat-user-gradient: linear-gradient(135deg, var(--chat-user-color), var(--chat-user-color-dark));

}

/* Bootstrap component overrides for dark theme */
.theme-dark .card,
.theme-dark .modal-content,
.theme-dark .dropdown-menu,
.theme-dark .navbar {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .card-body,
.theme-dark .modal-body,
.theme-dark .modal-header,
.theme-dark .modal-footer {
    background-color: transparent !important;
    color: var(--color-text) !important;
}

.theme-dark .form-control,
.theme-dark .form-select,
.theme-dark textarea,
.theme-dark input {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.theme-dark .form-control:focus,
.theme-dark .form-select:focus,
.theme-dark textarea:focus,
.theme-dark input:focus {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--brand-1) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.25) !important;
}

.theme-dark .form-control::placeholder,
.theme-dark textarea::placeholder {
    color: var(--color-text-secondary) !important;
    opacity: 0.7;
}

/* Dark theme for search and filter inputs */
.theme-dark input[type="search"] {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.theme-dark .btn-primary,
.theme-dark .btn-secondary {
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .btn-primary:hover,
.theme-dark .btn-secondary:hover {
    background-color: var(--brand-1) !important;
    color: var(--white) !important;
}

/* Dark theme overrides for page containers and content */
.theme-dark .page-header-card,
.theme-dark .main-card,
.theme-dark .content-card,
.theme-dark .admin-card {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .list-group-item {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .list-group-item:hover {
    background-color: var(--gray-100) !important;
}

.theme-dark .text-muted {
    color: var(--color-text-secondary) !important;
}

.theme-dark .page-title,
.theme-dark .page-description,
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6 {
    color: var(--color-text) !important;
}

/* Dark theme for content containers */
.theme-dark .page-wrapper,
.theme-dark .content-container {
    background-color: transparent !important;
    color: var(--color-text) !important;
}

/* Dark theme for footer */
.theme-dark .footer,
.theme-dark footer,
.theme-dark .site-footer,
.theme-dark .page-footer {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
    border-top: 1px solid var(--gray-300) !important;
}

.theme-dark .footer a,
.theme-dark footer a,
.theme-dark .site-footer a,
.theme-dark .page-footer a {
    color: var(--color-text-secondary) !important;
}

.theme-dark .footer a:hover,
.theme-dark footer a:hover,
.theme-dark .site-footer a:hover,
.theme-dark .page-footer a:hover {
    color: var(--brand-1) !important;
}

.theme-dark .footer .text-muted,
.theme-dark footer .text-muted,
.theme-dark .site-footer .text-muted,
.theme-dark .page-footer .text-muted {
    color: var(--color-text-secondary) !important;
}

/* Dark theme for tables */
.theme-dark .table {
    color: var(--color-text) !important;
    background-color: var(--color-surface) !important;
}

.theme-dark .table th {
    background-color: var(--gray-100) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .table td {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > td,
.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--gray-100) !important;
}

.theme-dark .table-hover > tbody > tr:hover > td,
.theme-dark .table-hover > tbody > tr:hover > th {
    background-color: var(--gray-200) !important;
}

/* Dark theme for data tables and grids */
.theme-dark .dataTables_wrapper,
.theme-dark .dataTable {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

.theme-dark .dataTables_info,
.theme-dark .dataTables_length,
.theme-dark .dataTables_filter {
    color: var(--color-text) !important;
}

.theme-dark .dataTables_paginate .paginate_button {
    background-color: var(--gray-100) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .dataTables_paginate .paginate_button:hover {
    background-color: var(--gray-200) !important;
    color: var(--color-text) !important;
}

/* Dark theme for pagination */
.theme-dark .pagination .page-item .page-link {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .pagination .page-item.active .page-link {
    background-color: var(--brand-1) !important;
    color: var(--white) !important;
    border-color: var(--brand-1) !important;
}

.theme-dark .pagination .page-item:hover .page-link {
    background-color: var(--gray-100) !important;
    color: var(--color-text) !important;
}

/* Dark theme for dropdowns in tables */
.theme-dark select.form-select,
.theme-dark select.form-control {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.theme-dark select.form-select option,
.theme-dark select.form-control option {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

/* Dark theme for badges and labels */
.theme-dark .badge.bg-secondary {
    background-color: var(--gray-600) !important;
    color: var(--color-text) !important;
}

.theme-dark .badge.bg-light {
    background-color: var(--gray-100) !important;
    color: var(--color-text) !important;
}

/* Dark theme for alerts */
.theme-dark .alert {
    background-color: var(--gray-100) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .alert-info {
    background-color: rgba(var(--info-rgb), 0.1) !important;
    color: var(--info-text) !important;
    border-color: var(--info) !important;
}

.theme-dark .alert-success {
    background-color: rgba(var(--success-rgb), 0.1) !important;
    color: var(--success-text) !important;
    border-color: var(--success) !important;
}

.theme-dark .alert-warning {
    background-color: rgba(var(--warning-rgb), 0.1) !important;
    color: var(--warning-text) !important;
    border-color: var(--warning) !important;
}

.theme-dark .alert-danger {
    background-color: rgba(var(--danger-rgb), 0.1) !important;
    color: var(--danger-text) !important;
    border-color: var(--danger) !important;
}