/* ============================================
   AHDS App Store - Theme System
   Light & Dark Mode with Smooth Transitions
   ============================================ */

/* Dark Theme Variables */
[data-theme="dark"] {
  --primary-color: #42A5F5;
  --primary-dark: #1E88E5;
  --primary-light: #64B5F6;
  --secondary-color: #FF8A80;
  --success-color: #66BB6A;
  --warning-color: #FFB74D;
  --error-color: #EF5350;
  
  --bg-primary: #0A0E27;
  --bg-secondary: #151B3D;
  --bg-card: #1E2749;
  --bg-hover: #2A3454;
  
  --text-primary: #FFFFFF;
  --text-secondary: #B0B8D4;
  --text-tertiary: #7C8DB5;
  
  --border-color: #2A3454;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* Theme Transition */
body,
.header,
.hero,
.app-card,
.category-chip,
.search-box,
.theme-toggle,
.admin-btn,
.footer,
.toast {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Dark Mode Specific Adjustments */
[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 50%, #3B82F6 100%);
}

[data-theme="dark"] .hero::before {
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="white" opacity="0.05"/></svg>');
}

[data-theme="dark"] .app-card::before {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
}

[data-theme="dark"] .search-box:focus {
  box-shadow: 0 0 0 4px rgba(66, 165, 245, 0.2);
}

[data-theme="dark"] .spinner {
  border-color: var(--border-color);
  border-top-color: var(--primary-color);
}

/* Theme Toggle Button Animation */
.theme-toggle {
  position: relative;
  overflow: hidden;
}

.theme-toggle i {
  transition: all 0.3s ease;
}

[data-theme="light"] .theme-toggle .fa-moon {
  display: inline-block;
}

[data-theme="light"] .theme-toggle .fa-sun {
  display: none;
}

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

[data-theme="dark"] .theme-toggle .fa-sun {
  display: inline-block;
}

/* Glow Effect for Dark Mode */
[data-theme="dark"] .app-card:hover {
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(66, 165, 245, 0.1);
}

[data-theme="dark"] .admin-btn {
  box-shadow: 
    var(--shadow-sm),
    0 0 20px rgba(66, 165, 245, 0.2);
}

[data-theme="dark"] .admin-btn:hover {
  box-shadow: 
    var(--shadow-md),
    0 0 30px rgba(66, 165, 245, 0.3);
}

/* Featured Badge Glow in Dark Mode */
[data-theme="dark"] .featured-badge {
  box-shadow: 
    var(--shadow-sm),
    0 0 15px rgba(255, 215, 0, 0.3);
}

/* Category Chips Dark Mode */
[data-theme="dark"] .category-chip.active {
  box-shadow: 
    var(--shadow-md),
    0 0 15px rgba(66, 165, 245, 0.2);
}

/* Toast Notifications Dark Mode */
[data-theme="dark"] .toast {
  box-shadow: 
    var(--shadow-lg),
    0 0 20px rgba(66, 165, 245, 0.1);
}

/* Scrollbar Dark Mode */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--primary-color);
}

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

/* Selection Dark Mode */
[data-theme="dark"] ::selection {
  background: var(--primary-color);
  color: var(--bg-primary);
}

/* Image Brightness Adjustment for Dark Mode */
[data-theme="dark"] .app-icon {
  filter: brightness(0.95);
}

/* Link Colors Dark Mode */
[data-theme="dark"] a {
  color: var(--primary-light);
}

[data-theme="dark"] a:hover {
  color: var(--primary-color);
}

/* Border Glow Effect for Dark Mode */
[data-theme="dark"] .search-box:focus {
  border-color: var(--primary-color);
  box-shadow: 
    0 0 0 4px rgba(66, 165, 245, 0.2),
    0 0 20px rgba(66, 165, 245, 0.1);
}

/* Header Shadow in Dark Mode */
[data-theme="dark"] .header.scrolled {
  box-shadow: 
    var(--shadow-md),
    0 0 30px rgba(0, 0, 0, 0.3);
}

/* Smooth Theme Transition Animation */
@keyframes themeTransition {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

body[data-theme-transitioning] {
  animation: themeTransition 0.3s ease;
}

/* Neon Glow Effect for Dark Mode (Optional Enhancement) */
[data-theme="dark"] .hero-title {
  text-shadow: 
    0 2px 20px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(66, 165, 245, 0.2);
}

/* Card Hover Glow in Dark Mode */
[data-theme="dark"] .app-card:hover .app-icon {
  box-shadow: 
    var(--shadow-sm),
    0 0 20px rgba(66, 165, 245, 0.2);
}

/* Button Glow Effects */
[data-theme="dark"] .category-chip:hover {
  box-shadow: 
    var(--shadow-sm),
    0 0 15px rgba(66, 165, 245, 0.15);
}

/* Loading Spinner Glow */
[data-theme="dark"] .spinner {
  box-shadow: 0 0 20px rgba(66, 165, 245, 0.2);
}

/* Empty State Icon Glow */
[data-theme="dark"] .empty-icon {
  text-shadow: 0 0 30px rgba(66, 165, 245, 0.1);
}