/**
 * Professional Dark Theme CSS
 * Modern, sleek design with neon accents and smooth animations
 */

/* Dark Theme Root Variables */
:root[data-theme="dark"] {
  /* Background Colors */
  --bg-primary: #0f0f23;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #16213e;
  --bg-card: #1e1e3f;
  --bg-modal: #0f0f23;
  
  /* Text Colors */
  --text-primary: #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-muted: #64748b;
  
  /* Border Colors */
  --border-primary: #334155;
  --border-secondary: #475569;
  --border-accent: #6366f1;
  
  /* Accent Colors */
  --accent-primary: #6366f1;
  --accent-secondary: #f97316;
  --accent-success: #22c55e;
  --accent-warning: #eab308;
  --accent-error: #f87171;
  
  /* Neon Effects */
  --neon-blue: #00d4ff;
  --neon-purple: #b794f6;
  --neon-green: #68d391;
  --neon-pink: #f687b3;
  
  /* Shadows and Glows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --glow-primary: 0 0 20px rgba(99, 102, 241, 0.4);
  --glow-secondary: 0 0 20px rgba(249, 115, 22, 0.4);
  --glow-success: 0 0 20px rgba(34, 197, 94, 0.4);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
  --gradient-success: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
  --gradient-dark: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
}

/* Base Dark Theme Styles */
[data-theme="dark"] body {
  background: var(--gradient-dark);
  color: var(--text-primary);
  min-height: 100vh;
}

/* Header Styles */
[data-theme="dark"] header {
  background: rgba(15, 15, 35, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-primary);
  box-shadow: var(--shadow-md);
}

/* Card Styles */
[data-theme="dark"] .bg-white {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
  background: var(--bg-tertiary) !important;
}

/* Text Color Overrides */
[data-theme="dark"] .text-gray-800 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-600 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-500 {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .text-gray-700 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-400 {
  color: var(--text-muted) !important;
}

/* Navigation Links */
[data-theme="dark"] .hover\:text-primary:hover {
  color: var(--accent-primary) !important;
}

/* Border Color Overrides */
[data-theme="dark"] .border-gray-200 {
  border-color: var(--border-primary) !important;
}

[data-theme="dark"] .border-gray-300 {
  border-color: var(--border-secondary) !important;
}

[data-theme="dark"] .bg-gray-200 {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .text-gray-700 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-300 {
  color: var(--text-secondary) !important;
}

/* Button Styles with Neon Effects */
[data-theme="dark"] .bg-primary,
[data-theme="dark"] .bg-blue-500,
[data-theme="dark"] .bg-indigo-500 {
  background: var(--gradient-primary) !important;
  box-shadow: var(--glow-primary) !important;
  border: none !important;
}

[data-theme="dark"] .bg-green-500 {
  background: var(--gradient-success) !important;
  box-shadow: var(--glow-success) !important;
}

[data-theme="dark"] .bg-red-500 {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.4) !important;
}

[data-theme="dark"] .bg-yellow-500 {
  background: linear-gradient(135deg, #ffd93d 0%, #ff9800 100%) !important;
  box-shadow: 0 0 20px rgba(255, 217, 61, 0.4) !important;
}

/* Hover Effects */
[data-theme="dark"] .bg-primary:hover,
[data-theme="dark"] .bg-blue-500:hover,
[data-theme="dark"] .bg-indigo-500:hover {
  box-shadow: var(--glow-primary), 0 0 30px rgba(99, 102, 241, 0.6) !important;
  transform: translateY(-2px);
}

/* Input Styles */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-primary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--glow-primary) !important;
}

/* Modal Styles */
[data-theme="dark"] .modal .bg-white {
  background: var(--bg-modal) !important;
  border: 1px solid var(--border-accent) !important;
  box-shadow: var(--glow-primary), var(--shadow-lg) !important;
}

/* Tab Navigation */
[data-theme="dark"] .tab-btn {
  color: var(--text-secondary) !important;
  border-bottom-color: transparent !important;
}

[data-theme="dark"] .tab-btn.border-primary,
[data-theme="dark"] .tab-btn[class*="border-primary"] {
  color: var(--neon-blue) !important;
  border-bottom-color: var(--neon-blue) !important;
  text-shadow: 0 0 10px var(--neon-blue);
}

[data-theme="dark"] .tab-btn:hover {
  color: var(--text-primary) !important;
  background: rgba(99, 102, 241, 0.1) !important;
}

/* Stats Cards with Animated Backgrounds */
[data-theme="dark"] .stats-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Notification Styles */
[data-theme="dark"] .notification {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-accent) !important;
  box-shadow: var(--glow-primary) !important;
}

/* Success/Error Message Styles */
[data-theme="dark"] .bg-green-100 {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .text-green-700 {
  color: var(--neon-green) !important;
}

[data-theme="dark"] .bg-red-100 {
  background: rgba(248, 113, 113, 0.1) !important;
  border: 1px solid rgba(248, 113, 113, 0.3) !important;
}

[data-theme="dark"] .text-red-700 {
  color: #ff6b6b !important;
}

[data-theme="dark"] .bg-blue-100 {
  background: rgba(99, 102, 241, 0.1) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] .text-blue-700 {
  color: var(--neon-blue) !important;
}

/* Pending Tasks Status Colors */
[data-theme="dark"] .bg-yellow-50 {
  background: rgba(234, 179, 8, 0.1) !important;
}

[data-theme="dark"] .border-yellow-200 {
  border-color: rgba(234, 179, 8, 0.3) !important;
}

[data-theme="dark"] .bg-yellow-100 {
  background: rgba(234, 179, 8, 0.15) !important;
}

[data-theme="dark"] .text-yellow-700,
[data-theme="dark"] .text-yellow-800 {
  color: #fbbf24 !important;
}

[data-theme="dark"] .bg-green-50 {
  background: rgba(34, 197, 94, 0.1) !important;
}

[data-theme="dark"] .border-green-200 {
  border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .text-green-800 {
  color: var(--neon-green) !important;
}

[data-theme="dark"] .bg-red-50 {
  background: rgba(248, 113, 113, 0.1) !important;
}

[data-theme="dark"] .border-red-200 {
  border-color: rgba(248, 113, 113, 0.3) !important;
}

[data-theme="dark"] .text-red-800 {
  color: #ff6b6b !important;
}

[data-theme="dark"] .text-green-600 {
  color: var(--neon-green) !important;
}

/* Task Card Completion Info */
[data-theme="dark"] .bg-blue-50 {
  background: rgba(99, 102, 241, 0.1) !important;
}

[data-theme="dark"] .border-blue-200 {
  border-color: rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] .border-blue-700 {
  border-color: rgba(99, 102, 241, 0.5) !important;
}

[data-theme="dark"] .text-black {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-orange-50 {
  background: rgba(249, 115, 22, 0.1) !important;
}

[data-theme="dark"] .border-orange-200 {
  border-color: rgba(249, 115, 22, 0.3) !important;
}

[data-theme="dark"] .border-orange-700 {
  border-color: rgba(249, 115, 22, 0.5) !important;
}

[data-theme="dark"] .text-orange-700 {
  color: #fb923c !important;
}

[data-theme="dark"] .text-orange-300 {
  color: #fdba74 !important;
}

/* Scrollbar Styles */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
  box-shadow: var(--glow-primary);
}

/* Loading Animations */
[data-theme="dark"] .loading-spinner {
  border-color: var(--border-primary);
  border-top-color: var(--accent-primary);
  box-shadow: var(--glow-primary);
}

/* Floating Elements */
[data-theme="dark"] .floating-element {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Pulse Animation for Important Elements */
[data-theme="dark"] .pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  from { 
    box-shadow: 0 0 5px rgba(99, 102, 241, 0.2);
  }
  to { 
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 
                0 0 30px rgba(99, 102, 241, 0.4);
  }
}

/* Gradient Text Effect */
[data-theme="dark"] .gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Neon Border Effect */
[data-theme="dark"] .neon-border {
  border: 1px solid var(--accent-primary);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.3),
              inset 0 0 10px rgba(99, 102, 241, 0.1);
}

/* Glass Morphism Effect */
[data-theme="dark"] .glass-effect {
  background: rgba(30, 30, 63, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Animated Background Particles */
[data-theme="dark"] .particles-bg::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(99, 102, 241, 0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(249, 115, 22, 0.3), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(34, 197, 94, 0.3), transparent);
  background-repeat: repeat;
  background-size: 100px 100px;
  animation: particleMove 20s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes particleMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100px, -100px); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  [data-theme="dark"] .glow-effect {
    box-shadow: none; /* Reduce effects on mobile for performance */
  }
  
  [data-theme="dark"] .particles-bg::before {
    display: none; /* Disable particles on mobile */
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  [data-theme="dark"] {
    --text-primary: #ffffff;
    --bg-primary: #000000;
    --border-primary: #ffffff;
  }
}

/* Notification Dropdown Styles */
[data-theme="dark"] #notificationDropdown {
  background: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}

[data-theme="dark"] #notificationDropdown .border-gray-200 {
  border-color: var(--border-primary) !important;
}

[data-theme="dark"] #notificationDropdown .border-gray-100 {
  border-color: var(--border-primary) !important;
}

[data-theme="dark"] #notificationDropdown .hover\:bg-gray-50:hover {
  background: rgba(99, 102, 241, 0.1) !important;
}

[data-theme="dark"] #notificationDropdown .active\:bg-gray-100:active {
  background: rgba(99, 102, 241, 0.2) !important;
}

/* Toggle Switch Styles for Dark Mode */
[data-theme="dark"] .peer:checked {
  background-color: var(--accent-primary) !important;
}

[data-theme="dark"] .peer {
  background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .peer:focus {
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2) !important;
}

[data-theme="dark"] .peer-checked\:bg-primary:checked {
  background-color: var(--accent-primary) !important;
}

[data-theme="dark"] .peer-checked\:bg-purple-600:checked {
  background-color: var(--accent-primary) !important;
}

[data-theme="dark"] .peer-checked\:bg-blue-600:checked {
  background-color: var(--neon-blue) !important;
}

/* Leaderboard Card Hover States */
.leaderboard-card:hover {
  background-color: #f9fafb;
}

[data-theme="dark"] .leaderboard-card:hover {
  background-color: rgba(99, 102, 241, 0.1) !important;
}

/* Ensure current user styling is preserved */
.leaderboard-card.bg-blue-50 {
  background-color: #eff6ff;
}

[data-theme="dark"] .leaderboard-card.bg-blue-50 {
  background-color: rgba(99, 102, 241, 0.2) !important;
}

/* Template Card Hover States */
.template-card:hover {
  background-color: #f9fafb;
}

[data-theme="dark"] .template-card:hover {
  background-color: rgba(99, 102, 241, 0.1) !important;
}

/* Template Button Hover States */
.template-use-btn:hover {
  background-color: rgba(79, 70, 229, 0.9);
}

[data-theme="dark"] .template-use-btn:hover {
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%) !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4) !important;
}

/* Mobile Todo Card Optimizations */
@media (max-width: 640px) {
  .todo-card {
    padding: 0.75rem !important;
  }
  
  .todo-card .flex.items-start {
    gap: 0.5rem !important;
  }
  
  .todo-card .flex.flex-wrap {
    gap: 0.25rem !important;
  }
  
  .todo-card .text-xs {
    font-size: 0.65rem !important;
    padding: 0.125rem 0.375rem !important;
  }
  
  .todo-card button {
    min-width: 2rem !important;
    min-height: 2rem !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}