/* ==================== THEME SYSTEM ==================== */
/* CSS Variables for Dark and Light Themes */

:root {
  /* Backgrounds - Dark Theme (Default) */
  --bg-primary: #0f0f23;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #16213e;
  --bg-card: rgba(26, 26, 46, 0.6);
  --bg-card-solid: #1a1a2e;
  --bg-input: rgba(15, 15, 35, 0.8);
  --bg-hover: rgba(255, 255, 255, 0.1);

  /* Text Colors - Dark Theme */
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-tertiary: #cbd5e1;
  --text-muted: #64748b;

  /* Gradients (same for both themes) */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-start: #667eea;
  --gradient-end: #764ba2;

  /* Borders - Dark Theme */
  --border-color: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.2);
  --border-focus: #667eea;

  /* Shadows - Dark Theme */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);

  /* Button Shadows */
  --shadow-button: 0 4px 15px rgba(102, 126, 234, 0.4);
  --shadow-button-hover: 0 6px 20px rgba(102, 126, 234, 0.5);

  /* Status Colors - Dark Theme */
  --success-bg: rgba(34, 197, 94, 0.1);
  --success-border: rgba(34, 197, 94, 0.3);
  --success-text: #4caf50;

  --warning-bg: rgba(255, 193, 7, 0.1);
  --warning-border: rgba(255, 193, 7, 0.3);
  --warning-text: #ffc107;

  --error-bg: rgba(244, 67, 54, 0.1);
  --error-border: rgba(244, 67, 54, 0.3);
  --error-text: #f44336;

  --info-bg: rgba(33, 150, 243, 0.1);
  --info-border: rgba(33, 150, 243, 0.3);
  --info-text: #2196f3;

  /* Backdrop */
  --backdrop-blur: blur(10px);
  --backdrop-blur-strong: blur(20px);
}

/* ==================== LIGHT THEME ==================== */
[data-theme="light"] {
  /* Backgrounds - Light Theme */
  --bg-primary: #eceff1;
  /* Blue Grey 50 - darker, premium off-white */
  --bg-secondary: #e2e8f0;
  --bg-tertiary: #e0e0e0;
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-card-solid: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.05);

  /* Text Colors - Light Theme */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-tertiary: #333333;
  --text-muted: #999999;

  /* Gradients - Same */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-start: #667eea;
  --gradient-end: #764ba2;

  /* Borders - Light Theme */
  --border-color: rgba(0, 0, 0, 0.1);
  --border-hover: rgba(0, 0, 0, 0.2);
  --border-focus: #667eea;

  /* Shadows - Light Theme */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);

  /* Button Shadows */
  --shadow-button: 0 4px 15px rgba(102, 126, 234, 0.4);
  --shadow-button-hover: 0 6px 20px rgba(102, 126, 234, 0.5);

  /* Status Colors - Light Theme */
  --success-bg: rgba(34, 197, 94, 0.1);
  --success-border: rgba(34, 197, 94, 0.3);
  --success-text: #2e7d32;

  --warning-bg: rgba(255, 193, 7, 0.1);
  --warning-border: rgba(255, 193, 7, 0.3);
  --warning-text: #f57c00;

  --error-bg: rgba(244, 67, 54, 0.1);
  --error-border: rgba(244, 67, 54, 0.3);
  --error-text: #c62828;

  --info-bg: rgba(33, 150, 243, 0.1);
  --info-border: rgba(33, 150, 243, 0.3);
  --info-text: #1976d2;

  /* Backdrop */
  --backdrop-blur: blur(10px);
  --backdrop-blur-strong: blur(20px);
}

/* ==================== THEME TOGGLE BUTTON ==================== */
.theme-toggle-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.theme-toggle-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  transform: scale(1.1) rotate(15deg);
}

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

/* ==================== SMOOTH TRANSITIONS ==================== */
* {
  transition: background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Disable transitions for elements that shouldn't animate */
*:not(.theme-toggle-btn):not(.btn):not(.card):not(a) {
  transition: none;
}

/* Re-enable for specific elements */
body,
.navbar,
.card,
.modal-content,
.report-item,
.feature-card,
input,
textarea,
select,
button {
  transition: background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}