/* ============================================
   THEME SYSTEM - GLASS & BRIGHT THEMES
   ============================================ */

/* Glass Theme (Dark with glassmorphism) - DEFAULT */
[data-theme="glass"],
:root {
  /* Background Colors */
  --bg-body: #050810;
  --bg-primary: #0a0e1a;
  --bg-secondary: #0d1117;
  --bg-tertiary: #161b22;
  
  /* Glass Effects */
  --glass-bg: rgba(13, 17, 23, 0.75);
  --glass-bg-bright: rgba(34, 211, 238, 0.1);
  --glass-border: rgba(88, 166, 255, 0.3);
  --glass-border-bright: rgba(34, 211, 238, 0.4);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(88, 166, 255, 0.1);
  --glass-shadow-bright: 0 8px 32px rgba(34, 211, 238, 0.2), 0 0 0 1px rgba(34, 211, 238, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --glass-blur: 16px;
  
  /* Border Colors */
  --border-primary: #30363d;
  --border-muted: #21262d;
  
  /* Text Colors */
  --text-primary: #e6edf3;
  --text-secondary: #ffffff;
  --text-muted: #7d8590;
  --text-link: #58a6ff;
  --text-link-hover: #79c0ff;
  
  /* Accent Colors */
  --accent-blue: #1f6feb;
  --accent-emphasis: #58a6ff;
  --accent-cyan: #22d3ee;
  --accent-bright-cyan: #67e8f9;
  --accent-success: #3fb950;
  --accent-warning: #fbbf24;
  --accent-danger: #f85149;
  
  /* Component Specific */
  --nav-bg: var(--glass-bg);
  --nav-border: var(--glass-border);
  --card-bg: var(--glass-bg-bright);
  --card-border: var(--glass-border);
  --button-bg: var(--glass-bg);
  --button-border: var(--glass-border);
  --menu-text: #ffffff;
  --menu-text-hover: #ffffff;
  
  /* Background Gradient Overlays */
  --bg-gradient-overlay: linear-gradient(180deg, rgba(5, 8, 16, 0.4), rgba(10, 14, 26, 0.6));
  --bg-radial-1: radial-gradient(circle at 20% 50%, rgba(31, 111, 235, 0.15) 0%, transparent 50%);
  --bg-radial-2: radial-gradient(circle at 80% 20%, rgba(34, 211, 238, 0.12) 0%, transparent 50%);
  --bg-radial-3: radial-gradient(circle at 50% 80%, rgba(88, 166, 255, 0.1) 0%, transparent 50%);
  --bg-radial-4: radial-gradient(circle at 10% 10%, rgba(103, 232, 249, 0.08) 0%, transparent 40%);
  
  /* Shadows & Effects */
  --shadow-sm: 0 4px 12px rgba(34, 211, 238, 0.1);
  --shadow-md: 0 8px 20px rgba(34, 211, 238, 0.2);
  --shadow-lg: 0 12px 32px rgba(34, 211, 238, 0.3);
  --glow-cyan: 0 0 10px rgba(34, 211, 238, 0.4);
  --glow-blue: 0 0 10px rgba(88, 166, 255, 0.3);
}

/* Bright Theme (White with colored glass panels) */
[data-theme="bright"] {
  /* Background Colors */
  --bg-body: #f8fafc;
  --bg-primary: #ffffff;
  --bg-secondary: #f1f5f9;
  --bg-tertiary: #e2e8f0;
  
  /* Glass Effects - Colored panels with transparency */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-bg-bright: rgba(59, 130, 246, 0.08);
  --glass-border: rgba(59, 130, 246, 0.25);
  --glass-border-bright: rgba(16, 185, 129, 0.3);
  --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(59, 130, 246, 0.15);
  --glass-shadow-bright: 0 8px 24px rgba(59, 130, 246, 0.15), 0 0 0 1px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --glass-blur: 20px;
  
  /* Border Colors */
  --border-primary: #cbd5e1;
  --border-muted: #e2e8f0;
  
  /* Text Colors */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-link: #2563eb;
  --text-link-hover: #1d4ed8;
  
  /* Accent Colors */
  --accent-blue: #3b82f6;
  --accent-emphasis: #2563eb;
  --accent-cyan: #06b6d4;
  --accent-bright-cyan: #0891b2;
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-danger: #ef4444;
  
  /* Component Specific */
  --nav-bg: rgba(255, 255, 255, 0.9);
  --nav-border: rgba(59, 130, 246, 0.2);
  --card-bg: rgba(255, 255, 255, 0.8);
  --card-border: rgba(59, 130, 246, 0.25);
  --button-bg: rgba(255, 255, 255, 0.7);
  --button-border: rgba(59, 130, 246, 0.3);
  --menu-text: #0f172a;
  --menu-text-hover: #0f172a;
  
  /* Background Gradient Overlays */
  --bg-gradient-overlay: linear-gradient(180deg, rgba(248, 250, 252, 0.8), rgba(241, 245, 249, 0.9));
  --bg-radial-1: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.12) 0%, transparent 50%);
  --bg-radial-2: radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
  --bg-radial-3: radial-gradient(circle at 50% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
  --bg-radial-4: radial-gradient(circle at 10% 10%, rgba(139, 92, 246, 0.06) 0%, transparent 40%);
  
  /* Shadows & Effects */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
  --glow-cyan: 0 0 12px rgba(6, 182, 212, 0.4);
  --glow-blue: 0 0 12px rgba(59, 130, 246, 0.4);
}

/* Theme-specific adjustments */
[data-theme="bright"] {
  /* Gradient text needs different colors for readability */
  --gradient-heading-start: #0f172a;
  --gradient-heading-mid: #3b82f6;
  --gradient-heading-end: #06b6d4;
  
  /* Button gradients */
  --btn-gradient-start: #3b82f6;
  --btn-gradient-end: #06b6d4;
  --btn-gradient-hover-start: #2563eb;
  --btn-gradient-hover-end: #0891b2;
  
  /* Success button */
  --btn-success-start: #10b981;
  --btn-success-end: #059669;
  --btn-success-hover-start: #059669;
  --btn-success-hover-end: #047857;
  
  /* Danger button */
  --btn-danger-start: #ef4444;
  --btn-danger-end: #dc2626;
  
  /* Warning highlights */
  --warning-bg: rgba(245, 158, 11, 0.12);
  --warning-border: rgba(245, 158, 11, 0.35);
  --warning-text: #b45309;
  
  /* Badge colors */
  --badge-brk-bg: rgba(245, 158, 11, 0.15);
  --badge-brk-border: rgba(245, 158, 11, 0.4);
  --badge-brk-text: #d97706;
  --badge-lab-bg: rgba(100, 116, 139, 0.15);
  --badge-lab-border: rgba(100, 116, 139, 0.3);
  --badge-lab-text: #475569;
  --badge-thr-bg: rgba(6, 182, 212, 0.15);
  --badge-thr-border: rgba(6, 182, 212, 0.4);
  --badge-thr-text: #0891b2;
  
  /* Countdown colors */
  --countdown-bg: rgba(59, 130, 246, 0.12);
  --countdown-border: rgba(59, 130, 246, 0.3);
  --countdown-value: #1d4ed8;
  --countdown-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  --countdown-label: #1e293b;
  --countdown-unit: #334155;
  
  /* Table hover */
  --table-hover-bg: rgba(59, 130, 246, 0.05);
  --table-header-bg: rgba(59, 130, 246, 0.08);
  
  /* Top button */
  --toTop-bg-start: #10b981;
  --toTop-bg-end: #059669;
  --toTop-border: rgba(16, 185, 129, 0.5);
  --toTop-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

[data-theme="glass"] {
  /* Glass theme specific overrides */
  --gradient-heading-start: #ffffff;
  --gradient-heading-mid: #67e8f9;
  --gradient-heading-end: #58a6ff;
  
  --btn-gradient-start: #22d3ee;
  --btn-gradient-end: #1f6feb;
  --btn-gradient-hover-start: #67e8f9;
  --btn-gradient-hover-end: #22d3ee;
  
  --btn-success-start: #3fb950;
  --btn-success-end: #2ea043;
  --btn-success-hover-start: #3fb950;
  --btn-success-hover-end: #3fb950;
  
  --btn-danger-start: #f85149;
  --btn-danger-end: #da3633;
  
  --warning-bg: rgba(251, 191, 36, 0.15);
  --warning-border: rgba(251, 191, 36, 0.4);
  --warning-text: #fbbf24;
  
  --badge-brk-bg: rgba(251, 191, 36, 0.25);
  --badge-brk-border: rgba(251, 191, 36, 0.5);
  --badge-brk-text: #fbbf24;
  --badge-lab-bg: rgba(127, 133, 144, 0.2);
  --badge-lab-border: var(--border-primary);
  --badge-lab-text: #ffffff;
  --badge-thr-bg: rgba(34, 211, 238, 0.2);
  --badge-thr-border: rgba(34, 211, 238, 0.4);
  --badge-thr-text: #67e8f9;
  
  --countdown-bg: rgba(34, 211, 238, 0.2);
  --countdown-border: rgba(34, 211, 238, 0.4);
  --countdown-value: #67e8f9;
  --countdown-shadow: 0 4px 12px rgba(34, 211, 238, 0.2);
  
  --table-hover-bg: rgba(88, 166, 255, 0.08);
  --table-header-bg: rgba(34, 211, 238, 0.1);
  
  --toTop-bg-start: rgba(63, 185, 80, 0.8);
  --toTop-bg-end: rgba(46, 160, 67, 0.75);
  --toTop-border: rgba(63, 185, 80, 0.6);
  --toTop-shadow: 0 4px 12px rgba(63, 185, 80, 0.3);
}

/* Theme Switcher Button Styles */
.theme-switcher {
  position: fixed;
  bottom: 160px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  gap: 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 8px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  min-width: fit-content;
}

.theme-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.theme-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.theme-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.theme-btn.active {
  border-color: var(--accent-emphasis);
  box-shadow: 0 0 0 3px var(--glass-border-bright);
}

.theme-btn[data-theme="glass"] {
  background: linear-gradient(135deg, #0a0e1a 0%, #161b22 100%);
}

.theme-btn[data-theme="glass"]::before {
  background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.3), transparent 70%);
}

.theme-btn[data-theme="bright"] {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  border: 1px solid #cbd5e1;
}

.theme-btn[data-theme="bright"]::before {
  background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.2), transparent 70%);
}

@media (max-width: 768px) {
  .theme-switcher {
    bottom: 140px;
    right: 16px;
  }
  
  .theme-btn {
    width: 28px;
    height: 28px;
  }
}