/* ========================================
   4i4A Group - Step 6: Simple Theme System
   Gradual Migration - Theme Switching (Final Step)
   ======================================== */

/* ===== THEME SYSTEM VARIABLES ===== */
:root {
  /* Theme transition */
  --theme-transition: all 0.3s ease;
  
  /* Theme switcher positioning */
  --switcher-top: 20px;
  --switcher-right: 20px;
  --switcher-z-index: 9999;
}

/* ===== THEME SWITCHER UI ===== */
.u-theme-switcher {
  position: fixed !important;
  top: var(--switcher-top) !important;
  right: var(--switcher-right) !important;
  z-index: 99999 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid var(--electric-cyan, #00ffff) !important;
  border-radius: 4px !important;
  padding: 6px !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  transition: var(--theme-transition) !important;
  min-width: 100px !important;
  max-width: 120px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.u-theme-switcher:hover {
  border-color: var(--toxic-yellow, #ffff00) !important;
  box-shadow: 0 0 15px rgba(255, 255, 0, 0.3) !important;
}

.u-theme-label {
  display: block !important;
  color: var(--electric-cyan, #00ffff) !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 3px !important;
  font-family: 'Share Tech Mono', monospace !important;
}

.u-theme-select {
  background: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid var(--electric-cyan, #00ffff) !important;
  border-radius: 3px !important;
  color: var(--pure-white, #ffffff) !important;
  padding: 3px 6px !important;
  font-size: 9px !important;
  font-family: 'Share Tech Mono', monospace !important;
  cursor: pointer !important;
  outline: none !important;
  transition: var(--theme-transition) !important;
  min-width: 90px !important;
}

.u-theme-select:hover {
  border-color: var(--neon-green, #00ff88) !important;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.3) !important;
}

.u-theme-select:focus {
  border-color: var(--toxic-yellow, #ffff00) !important;
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.4) !important;
}

.u-theme-select option {
  background: rgba(0, 0, 0, 0.95) !important;
  color: var(--pure-white, #ffffff) !important;
  padding: 8px !important;
}

/* ===== THEME DEFINITIONS ===== */

/* Industrial Hacker Theme (Default) */
:root,
[data-theme="industrial"] {
  --theme-primary: var(--electric-cyan, #00ffff);
  --theme-secondary: var(--neon-green, #00ff88);
  --theme-accent: var(--toxic-yellow, #ffff00);
  --theme-danger: var(--hacker-red, #ff0040);
  --theme-bg-primary: rgba(26, 26, 26, 0.8);
  --theme-bg-secondary: rgba(0, 0, 0, 0.5);
  --theme-text-primary: var(--pure-white, #ffffff);
  --theme-text-secondary: var(--light-blue, #cfe3ff);
  --theme-border-primary: var(--electric-cyan, #00ffff);
}

/* Cyber Neon Theme */
[data-theme="cyber-neon"] {
  --theme-primary: #00ff41;
  --theme-secondary: #ff0080;
  --theme-accent: #00ffff;
  --theme-danger: #ff4444;
  --theme-bg-primary: rgba(10, 10, 10, 0.9);
  --theme-bg-secondary: rgba(0, 0, 0, 0.7);
  --theme-text-primary: #00ff41;
  --theme-text-secondary: #00cc33;
  --theme-border-primary: #00ff41;
  
  /* Override component colors */
  --electric-cyan: #00ff41;
  --neon-green: #ff0080;
  --toxic-yellow: #00ffff;
  --pure-white: #00ff41;
  --light-blue: #00cc33;
  --news-border-primary: #00ff41;
  --crypto-solana: #ff0080;
  --crypto-doge: #00ffff;
}

/* Retro Wave Theme */
[data-theme="retro-wave"] {
  --theme-primary: #ff6ec7;
  --theme-secondary: #00d9ff;
  --theme-accent: #ff9a00;
  --theme-danger: #ff073a;
  --theme-bg-primary: rgba(26, 0, 51, 0.8);
  --theme-bg-secondary: rgba(51, 0, 102, 0.6);
  --theme-text-primary: #ff6ec7;
  --theme-text-secondary: #cc55a0;
  --theme-border-primary: #ff6ec7;
  
  /* Override component colors */
  --electric-cyan: #00d9ff;
  --neon-green: #ff9a00;
  --toxic-yellow: #ff6ec7;
  --pure-white: #ff6ec7;
  --light-blue: #cc55a0;
  --news-border-primary: #00d9ff;
  --crypto-solana: #ff6ec7;
  --crypto-doge: #ff9a00;
}

/* Minimal Dark Theme */
[data-theme="minimal-dark"] {
  --theme-primary: #007acc;
  --theme-secondary: #4fc3f7;
  --theme-accent: #ffb74d;
  --theme-danger: #f44336;
  --theme-bg-primary: rgba(30, 30, 30, 0.95);
  --theme-bg-secondary: rgba(0, 0, 0, 0.8);
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #b0b0b0;
  --theme-border-primary: #007acc;
  
  /* Override component colors */
  --electric-cyan: #007acc;
  --neon-green: #4fc3f7;
  --toxic-yellow: #ffb74d;
  --pure-white: #ffffff;
  --light-blue: #b0b0b0;
  --news-border-primary: #007acc;
  --crypto-solana: #9c27b0;
  --crypto-doge: #ff9800;
}

/* Matrix Green Theme */
[data-theme="matrix-green"] {
  --theme-primary: #39ff14;
  --theme-secondary: #00ff00;
  --theme-accent: #32cd32;
  --theme-danger: #ff6b6b;
  --theme-bg-primary: rgba(0, 0, 0, 0.95);
  --theme-bg-secondary: rgba(0, 20, 0, 0.8);
  --theme-text-primary: #39ff14;
  --theme-text-secondary: #00ff00;
  --theme-border-primary: #39ff14;
  
  /* Override component colors */
  --electric-cyan: #39ff14;
  --neon-green: #00ff00;
  --toxic-yellow: #32cd32;
  --pure-white: #39ff14;
  --light-blue: #00ff00;
  --news-border-primary: #39ff14;
  --crypto-solana: #32cd32;
  --crypto-doge: #39ff14;
}

/* ===== THEME TRANSITION EFFECTS ===== */
* {
  transition-property: color, background-color, border-color, box-shadow, text-shadow !important;
  transition-duration: 0.3s !important;
  transition-timing-function: ease !important;
}

/* Disable transitions during theme switch for instant change */
.theme-switching * {
  transition: none !important;
}

/* ===== THEME-SPECIFIC ENHANCEMENTS ===== */

/* Cyber Neon theme enhancements */
[data-theme="cyber-neon"] .u-crypto-value,
[data-theme="cyber-neon"] .eth-price-amount {
  text-shadow: 0 0 8px currentColor, 0 0 16px currentColor !important;
}

[data-theme="cyber-neon"] .u-news-item {
  background: rgba(0, 255, 65, 0.05) !important;
  border-color: rgba(0, 255, 65, 0.3) !important;
}

/* Retro Wave theme enhancements */
[data-theme="retro-wave"] .u-crypto-panel,
[data-theme="retro-wave"] .custom-eth-price {
  background: linear-gradient(135deg, rgba(26, 0, 51, 0.8) 0%, rgba(51, 0, 102, 0.6) 100%) !important;
}

[data-theme="retro-wave"] .u-crypto-value,
[data-theme="retro-wave"] .eth-price-amount {
  background: linear-gradient(45deg, #ff6ec7, #00d9ff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Matrix Green theme enhancements */
[data-theme="matrix-green"] .u-news-item {
  background: rgba(0, 255, 0, 0.05) !important;
  border-color: rgba(57, 255, 20, 0.3) !important;
}

[data-theme="matrix-green"] .u-crypto-value,
[data-theme="matrix-green"] .eth-price-amount {
  text-shadow: 0 0 10px #39ff14, 0 0 20px #00ff00 !important;
}

/* Minimal Dark theme enhancements */
[data-theme="minimal-dark"] .u-crypto-panel,
[data-theme="minimal-dark"] .custom-eth-price,
[data-theme="minimal-dark"] .u-news-panel {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="minimal-dark"] .u-crypto-panel:hover,
[data-theme="minimal-dark"] .custom-eth-price:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ===== PANEL SPACING ADJUSTMENTS ===== */
body[data-layout="crypto-dashboard"] main {
  padding-top: 30px !important; /* Extra space for theme switcher */
}

/* Ensure panels don't overlap with theme switcher */
.news-panel,
.u-news-panel {
  margin-top: 10px !important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .u-theme-switcher {
    top: 10px !important;
    right: 10px !important;
    padding: 8px !important;
    min-width: 140px !important;
    max-width: 160px !important;
  }
  
  .u-theme-select {
    min-width: 120px !important;
    font-size: 11px !important;
  }
  
  body[data-layout="crypto-dashboard"] main {
    padding-top: 80px !important; /* More space on mobile */
  }
}

/* ===== STEP 6 COMPLETE - THEME SYSTEM READY ===== */