/**
 * Dark Mode Enhancements
 * Additional styling for optimal dark mode experience
 */

/* ============================================================
 * THEME TOGGLE COMPONENT
 * ============================================================ */

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.theme-toggle:hover {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: all var(--transition-fast);
}

/* Theme toggle animation */
.theme-toggle.transitioning svg {
  transform: rotate(180deg);
  opacity: 0.5;
}

/* ============================================================
 * DARK MODE SPECIFIC COMPONENTS
 * ============================================================ */

/* Enhanced dark mode cards */
[data-theme="dark"] .card-elevated {
  background: linear-gradient(145deg, #1a1f26, #0f1419);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Enhanced dark mode hero section */
[data-theme="dark"] .hero-section {
  background: 
    radial-gradient(ellipse at top, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #0b0e13 0%, #161b22 50%, #21262d 100%);
}

/* Dark mode code blocks */
[data-theme="dark"] code {
  background: rgba(255, 255, 255, 0.1);
  color: var(--brand-primary-300);
}

/* Dark mode tables */
[data-theme="dark"] .table thead th {
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Dark mode form enhancements */
[data-theme="dark"] .form-input::placeholder {
  color: var(--color-text-tertiary);
  opacity: 0.6;
}

[data-theme="dark"] .form-checkbox:checked {
  background: var(--brand-primary-500);
  border-color: var(--brand-primary-500);
}

/* Dark mode badges */
[data-theme="dark"] .badge-gray {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
}

/* Dark mode navigation */
[data-theme="dark"] .nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .nav-link.is-active {
  background: rgba(16, 185, 129, 0.15);
  color: var(--brand-primary-300);
}

/* Dark mode dropdowns */
[data-theme="dark"] .dropdown-menu {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Dark mode alerts */
[data-theme="dark"] .alert-success {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

[data-theme="dark"] .alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

[data-theme="dark"] .alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fcd34d;
}

[data-theme="dark"] .alert-info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

/* ============================================================
 * DARK MODE TRADING SPECIFIC
 * ============================================================ */

/* Trading colors in dark mode */
[data-theme="dark"] .text-profit,
[data-theme="dark"] .badge-profit {
  color: #22c55e;
}

[data-theme="dark"] .text-loss,
[data-theme="dark"] .badge-loss {
  color: #ef4444;
}

[data-theme="dark"] .text-long,
[data-theme="dark"] .badge-long {
  color: #10b981;
}

[data-theme="dark"] .text-short,
[data-theme="dark"] .badge-short {
  color: #f43f5e;
}

/* Dark mode chart placeholders */
[data-theme="dark"] .chart-placeholder {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Dark mode metric cards */
[data-theme="dark"] .metric-card {
  background: linear-gradient(145deg, #1a1f26, #151a20);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================================
 * THEME TRANSITION ANIMATION
 * ============================================================ */

/* Smooth theme transitions */
html {
  transition: background-color var(--transition-normal);
}

body {
  transition: color var(--transition-normal);
}

.card,
.btn,
.form-input,
.nav-link {
  transition: 
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal),
    box-shadow var(--transition-normal);
}

/* ============================================================
 * SYSTEM PREFERENCE DETECTION
 * ============================================================ */

/* Respect system theme preference if no user preference is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg-primary: #0b0e13;
    --color-bg-secondary: #161b22;
    --color-bg-tertiary: #21262d;
    --color-text-primary: #f0f6fc;
    --color-text-secondary: #8b949e;
    --color-text-tertiary: #656d76;
    --color-border-primary: #30363d;
    --color-border-secondary: #21262d;
  }
}

/* ============================================================
 * ACCESSIBILITY ENHANCEMENTS
 * ============================================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
  [data-theme="dark"] {
    --color-text-primary: #ffffff;
    --color-text-secondary: #e6e6e6;
    --color-border-primary: #666666;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .card,
  .btn {
    transition: none;
  }
  
  .theme-toggle.transitioning svg {
    transform: none;
  }
}