/**
 * EuroSoccer Academy - Color System
 * Version: 2.0.0
 *
 * A sophisticated color system with:
 * - Enhanced light mode palette with depth
 * - Full dark mode support
 * - Semantic color tokens
 * - Smooth theme transitions
 */

/* ========================================
   LIGHT MODE (Default)
   ======================================== */
:root {
  /* === BRAND COLORS === */

  /* Primary Blue - Deep, rich navy */
  --color-primary-50: #E8F4FD;
  --color-primary-100: #C5E3FA;
  --color-primary-200: #91C8F4;
  --color-primary-300: #5AABEC;
  --color-primary-400: #2E8FE0;
  --color-primary-500: #1565C0;
  --color-primary-600: #0D47A1;
  --color-primary-700: #0A3A82;
  --color-primary-800: #072D64;
  --color-primary-900: #041E45;

  /* Gold Accent - Warm, luxurious */
  --color-gold-50: #FFFDF0;
  --color-gold-100: #FEF9E7;
  --color-gold-200: #FCF3CF;
  --color-gold-300: #F9E79F;
  --color-gold-400: #F7DC6F;
  --color-gold-500: #FFD700;
  --color-gold-600: #F1C40F;
  --color-gold-700: #D4AC0D;
  --color-gold-800: #B7950B;
  --color-gold-900: #7D6608;

  /* Success Green - Field green */
  --color-success-50: #E8F5E9;
  --color-success-100: #C8E6C9;
  --color-success-200: #A5D6A7;
  --color-success-300: #81C784;
  --color-success-400: #66BB6A;
  --color-success-500: #43A047;
  --color-success-600: #388E3C;
  --color-success-700: #2E7D32;
  --color-success-800: #256427;
  --color-success-900: #1B5E20;

  /* Danger Red - Alert, attention */
  --color-danger-50: #FFEBEE;
  --color-danger-100: #FFCDD2;
  --color-danger-200: #EF9A9A;
  --color-danger-300: #E57373;
  --color-danger-400: #EF5350;
  --color-danger-500: #F44336;
  --color-danger-600: #E53935;
  --color-danger-700: #D32F2F;
  --color-danger-800: #C62828;
  --color-danger-900: #B71C1C;

  /* Warning Orange */
  --color-warning-50: #FFF8E1;
  --color-warning-100: #FFECB3;
  --color-warning-200: #FFE082;
  --color-warning-300: #FFD54F;
  --color-warning-400: #FFCA28;
  --color-warning-500: #FFC107;
  --color-warning-600: #FFB300;
  --color-warning-700: #FFA000;
  --color-warning-800: #FF8F00;
  --color-warning-900: #FF6F00;

  /* Info Blue - Lighter, informational */
  --color-info-50: #E3F2FD;
  --color-info-100: #BBDEFB;
  --color-info-200: #90CAF9;
  --color-info-300: #64B5F6;
  --color-info-400: #42A5F5;
  --color-info-500: #2196F3;
  --color-info-600: #1E88E5;
  --color-info-700: #1976D2;
  --color-info-800: #1565C0;
  --color-info-900: #0D47A1;

  /* === NEUTRAL COLORS === */

  /* Gray Scale */
  --color-gray-0: #FFFFFF;
  --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;
  --color-gray-950: #020617;

  /* === SEMANTIC TOKENS (Light Mode) === */

  /* Backgrounds */
  --bg-primary: var(--color-gray-0);
  --bg-secondary: var(--color-gray-50);
  --bg-tertiary: var(--color-gray-100);
  --bg-elevated: var(--color-gray-0);
  --bg-sunken: var(--color-gray-100);
  --bg-overlay: rgba(15, 23, 42, 0.5);
  --bg-page: linear-gradient(145deg, #E3F2FD 0%, #F8FAFC 50%, #E8F5E9 100%);

  /* Surfaces */
  --surface-card: var(--color-gray-0);
  --surface-card-hover: var(--color-gray-50);
  --surface-input: var(--color-gray-0);
  --surface-input-hover: var(--color-gray-50);
  --surface-button: var(--color-primary-500);
  --surface-button-hover: var(--color-primary-600);

  /* Sidebar */
  --sidebar-bg: linear-gradient(145deg, #1E88E5 0%, #1565C0 50%, #0D47A1 100%);
  --sidebar-text: rgba(255, 255, 255, 0.9);
  --sidebar-text-muted: rgba(255, 255, 255, 0.6);
  --sidebar-hover: rgba(255, 255, 255, 0.1);
  --sidebar-active: rgba(255, 215, 0, 0.2);
  --sidebar-border: rgba(255, 255, 255, 0.1);

  /* Header */
  --header-bg: rgba(255, 255, 255, 0.85);
  --header-border: rgba(0, 0, 0, 0.05);
  --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  /* Text */
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-700);
  --text-tertiary: var(--color-gray-500);
  --text-muted: var(--color-gray-400);
  --text-disabled: var(--color-gray-300);
  --text-inverse: var(--color-gray-0);
  --text-link: var(--color-primary-600);
  --text-link-hover: var(--color-primary-700);

  /* Borders */
  --border-light: var(--color-gray-200);
  --border-default: var(--color-gray-300);
  --border-strong: var(--color-gray-400);
  --border-focus: var(--color-primary-500);

  /* 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-glow-primary: 0 0 20px rgba(21, 101, 192, 0.3);
  --shadow-glow-gold: 0 0 20px rgba(255, 215, 0, 0.4);
  --shadow-glow-success: 0 0 20px rgba(67, 160, 71, 0.3);
  --shadow-glow-danger: 0 0 20px rgba(239, 68, 68, 0.3);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(21, 101, 192, 0.2);
  --focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.2);

  /* Status Indicators */
  --status-online: var(--color-success-500);
  --status-offline: var(--color-gray-400);
  --status-busy: var(--color-danger-500);
  --status-away: var(--color-warning-500);

  /* Charts & Data */
  --chart-1: var(--color-primary-500);
  --chart-2: var(--color-gold-500);
  --chart-3: var(--color-success-500);
  --chart-4: var(--color-info-500);
  --chart-5: var(--color-danger-500);
  --chart-grid: var(--color-gray-200);

  /* Transitions */
  --transition-colors: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ========================================
   DARK MODE
   ======================================== */
[data-theme="dark"],
.dark-mode {
  /* === SEMANTIC TOKENS (Dark Mode) === */

  /* Backgrounds */
  --bg-primary: var(--color-gray-900);
  --bg-secondary: var(--color-gray-800);
  --bg-tertiary: var(--color-gray-700);
  --bg-elevated: #1A2332;
  --bg-sunken: var(--color-gray-950);
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-page: linear-gradient(145deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);

  /* Surfaces */
  --surface-card: #1A2332;
  --surface-card-hover: #243044;
  --surface-input: var(--color-gray-800);
  --surface-input-hover: var(--color-gray-700);
  --surface-button: var(--color-primary-500);
  --surface-button-hover: var(--color-primary-400);

  /* Sidebar */
  --sidebar-bg: linear-gradient(145deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
  --sidebar-text: rgba(255, 255, 255, 0.9);
  --sidebar-text-muted: rgba(255, 255, 255, 0.5);
  --sidebar-hover: rgba(255, 255, 255, 0.08);
  --sidebar-active: rgba(255, 215, 0, 0.15);
  --sidebar-border: rgba(255, 255, 255, 0.08);

  /* Header */
  --header-bg: rgba(26, 35, 50, 0.9);
  --header-border: rgba(255, 255, 255, 0.05);
  --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

  /* Text */
  --text-primary: var(--color-gray-50);
  --text-secondary: var(--color-gray-300);
  --text-tertiary: var(--color-gray-400);
  --text-muted: var(--color-gray-500);
  --text-disabled: var(--color-gray-600);
  --text-inverse: var(--color-gray-900);
  --text-link: var(--color-primary-400);
  --text-link-hover: var(--color-primary-300);

  /* Borders */
  --border-light: var(--color-gray-700);
  --border-default: var(--color-gray-600);
  --border-strong: var(--color-gray-500);
  --border-focus: var(--color-primary-400);

  /* Shadows - More dramatic in dark mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-glow-primary: 0 0 30px rgba(30, 136, 229, 0.4);
  --shadow-glow-gold: 0 0 30px rgba(255, 215, 0, 0.5);
  --shadow-glow-success: 0 0 30px rgba(102, 187, 106, 0.4);
  --shadow-glow-danger: 0 0 30px rgba(239, 83, 80, 0.4);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(30, 136, 229, 0.4);
  --focus-ring-danger: 0 0 0 3px rgba(239, 83, 80, 0.4);

  /* Charts & Data - Brighter for dark bg */
  --chart-1: var(--color-primary-400);
  --chart-2: var(--color-gold-400);
  --chart-3: var(--color-success-400);
  --chart-4: var(--color-info-400);
  --chart-5: var(--color-danger-400);
  --chart-grid: var(--color-gray-700);
}

/* ========================================
   BASE TRANSITIONS
   ======================================== */
body,
body * {
  transition: var(--transition-theme);
}

/* Exclude elements that shouldn't transition */
body img,
body video,
body iframe,
body canvas,
body svg path,
body .no-transition,
body .chart-container * {
  transition: none !important;
}

/* ========================================
   THEME TOGGLE COMPONENT
   ======================================== */
.theme-toggle {
  position: relative;
  width: 56px;
  height: 28px;
  border-radius: 14px;
  background: var(--color-gray-200);
  border: none;
  cursor: pointer;
  padding: 2px;
  transition: background-color 0.3s ease;
}

[data-theme="dark"] .theme-toggle,
.dark-mode .theme-toggle {
  background: var(--color-gray-700);
}

.theme-toggle-track {
  position: absolute;
  inset: 2px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}

.theme-toggle-icon {
  font-size: 12px;
  color: var(--color-gray-400);
  transition: color 0.3s ease;
}

.theme-toggle-icon.sun {
  color: var(--color-gold-500);
}

[data-theme="dark"] .theme-toggle-icon.moon,
.dark-mode .theme-toggle-icon.moon {
  color: var(--color-primary-300);
}

.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gray-0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .theme-toggle-thumb,
.dark-mode .theme-toggle-thumb {
  transform: translateX(28px);
  background: var(--color-gray-800);
}

/* Compact toggle for header */
.theme-toggle-compact {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.theme-toggle-compact:hover {
  background: var(--surface-card-hover);
  border-color: var(--border-default);
}

.theme-toggle-compact i {
  font-size: 18px;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.theme-toggle-compact .fa-sun {
  display: none;
}

.theme-toggle-compact .fa-moon {
  display: block;
}

[data-theme="dark"] .theme-toggle-compact .fa-sun,
.dark-mode .theme-toggle-compact .fa-sun {
  display: block;
  color: var(--color-gold-400);
}

[data-theme="dark"] .theme-toggle-compact .fa-moon,
.dark-mode .theme-toggle-compact .fa-moon {
  display: none;
}

/* ========================================
   COMPONENT DARK MODE OVERRIDES
   ======================================== */

/* Body */
[data-theme="dark"] body,
.dark-mode body {
  background: var(--bg-page);
  color: var(--text-primary);
}

/* Cards & Panels */
[data-theme="dark"] .panel,
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card-secondary,
[data-theme="dark"] .stat-card-tertiary,
[data-theme="dark"] .quick-actions-secondary,
.dark-mode .panel,
.dark-mode .card,
.dark-mode .stat-card-secondary,
.dark-mode .stat-card-tertiary,
.dark-mode .quick-actions-secondary {
  background: var(--surface-card);
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .panel:hover,
[data-theme="dark"] .card:hover,
.dark-mode .panel:hover,
.dark-mode .card:hover {
  background: var(--surface-card-hover);
}

/* Panel Headers */
[data-theme="dark"] .panel-heading,
.dark-mode .panel-heading {
  background: var(--bg-tertiary);
  border-color: var(--border-light);
}

[data-theme="dark"] .panel-heading-modern,
.dark-mode .panel-heading-modern {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
}

/* Tables */
[data-theme="dark"] .table,
.dark-mode .table {
  background: var(--surface-card);
}

[data-theme="dark"] .table > thead > tr > th,
.dark-mode .table > thead > tr > th {
  background: var(--color-primary-700);
  color: var(--text-inverse);
  border-color: var(--color-primary-800);
}

[data-theme="dark"] .table > tbody > tr > td,
.dark-mode .table > tbody > tr > td {
  border-color: var(--border-light);
  color: var(--text-secondary);
}

[data-theme="dark"] .table > tbody > tr:hover,
.dark-mode .table > tbody > tr:hover {
  background: var(--surface-card-hover);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--bg-secondary);
}

/* Forms */
[data-theme="dark"] .form-control,
.dark-mode .form-control {
  background: var(--surface-input);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
.dark-mode .form-control:focus {
  background: var(--surface-input-hover);
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

[data-theme="dark"] .form-control::placeholder,
.dark-mode .form-control::placeholder {
  color: var(--text-muted);
}

[data-theme="dark"] label,
[data-theme="dark"] .control-label,
.dark-mode label,
.dark-mode .control-label {
  color: var(--text-secondary);
}

/* Buttons */
[data-theme="dark"] .btn-default,
.dark-mode .btn-default {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .btn-default:hover,
.dark-mode .btn-default:hover {
  background: var(--surface-card-hover);
  border-color: var(--border-strong);
}

/* Modals */
[data-theme="dark"] .modal-content,
.dark-mode .modal-content {
  background: var(--surface-card);
  border: 1px solid var(--border-light);
}

[data-theme="dark"] .modal-header,
.dark-mode .modal-header {
  background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-900) 100%);
  border-color: var(--border-light);
}

[data-theme="dark"] .modal-body,
.dark-mode .modal-body {
  background: var(--surface-card);
  color: var(--text-primary);
}

[data-theme="dark"] .modal-footer,
.dark-mode .modal-footer {
  background: var(--bg-secondary);
  border-color: var(--border-light);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu,
.dark-mode .dropdown-menu {
  background: var(--surface-card);
  border-color: var(--border-light);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .dropdown-menu > li > a,
.dark-mode .dropdown-menu > li > a {
  color: var(--text-secondary);
}

[data-theme="dark"] .dropdown-menu > li > a:hover,
.dark-mode .dropdown-menu > li > a:hover {
  background: var(--surface-card-hover);
  color: var(--text-primary);
}

/* Alerts */
[data-theme="dark"] .alert-success,
.dark-mode .alert-success {
  background: rgba(67, 160, 71, 0.15);
  border-color: var(--color-success-700);
}

[data-theme="dark"] .alert-danger,
.dark-mode .alert-danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--color-danger-700);
}

[data-theme="dark"] .alert-warning,
.dark-mode .alert-warning {
  background: rgba(255, 193, 7, 0.15);
  border-color: var(--color-warning-700);
}

[data-theme="dark"] .alert-info,
.dark-mode .alert-info {
  background: rgba(33, 150, 243, 0.15);
  border-color: var(--color-info-700);
}

/* Text colors in dark mode */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
.dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode h4, .dark-mode h5, .dark-mode h6 {
  color: var(--text-primary);
}

[data-theme="dark"] p,
.dark-mode p {
  color: var(--text-secondary);
}

[data-theme="dark"] a,
.dark-mode a {
  color: var(--text-link);
}

[data-theme="dark"] a:hover,
.dark-mode a:hover {
  color: var(--text-link-hover);
}

/* Scrollbar dark mode */
[data-theme="dark"] ::-webkit-scrollbar-track,
.dark-mode ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--color-gray-600);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-500);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Background utilities */
.bg-surface { background: var(--surface-card) !important; }
.bg-elevated { background: var(--bg-elevated) !important; }
.bg-sunken { background: var(--bg-sunken) !important; }

/* Text utilities */
.text-primary-color { color: var(--text-primary) !important; }
.text-secondary-color { color: var(--text-secondary) !important; }
.text-muted-color { color: var(--text-muted) !important; }
.text-link { color: var(--text-link) !important; }

/* Border utilities */
.border-light { border-color: var(--border-light) !important; }
.border-default { border-color: var(--border-default) !important; }
.border-strong { border-color: var(--border-strong) !important; }

/* Shadow utilities */
.shadow-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-glow-primary { box-shadow: var(--shadow-glow-primary) !important; }
.shadow-glow-gold { box-shadow: var(--shadow-glow-gold) !important; }

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
  :root,
  [data-theme="dark"],
  .dark-mode {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --text-primary: #000000;
    --text-secondary: #333333;
    --border-light: #cccccc;
  }
}