/* ============================================
   Video2 Theme - Dark Mode Support
   ============================================ */

/* Dark Mode Variables */
[data-theme="dark"],
.dark-mode {
  --color-primary: #5a9df8;
  --color-primary-dark: #4a8de8;
  --color-secondary: #ecf0f1;
  --color-success: #2ecc71;
  --color-danger: #e74c3c;
  --color-warning: #f39c12;
  --color-info: #3498db;
  
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --bg-dark: #0f0f0f;
  --bg-overlay: rgba(0, 0, 0, 0.85);
  
  --text-primary: #ecf0f1;
  --text-secondary: #bdc3c7;
  --text-light: #ffffff;
  --text-muted: #7f8c8d;
  
  --border-color: #404040;
}

/* Apply dark theme when checkbox is checked */
#dark-mode-toggle-compact:checked ~ *,
body.dark-mode {
  --color-primary: #5a9df8;
  --color-primary-dark: #4a8de8;
  --color-secondary: #ecf0f1;
  --color-success: #2ecc71;
  --color-danger: #e74c3c;
  --color-warning: #f39c12;
  --color-info: #3498db;
  
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --bg-dark: #0f0f0f;
  --bg-overlay: rgba(0, 0, 0, 0.85);
  
  --text-primary: #ecf0f1;
  --text-secondary: #bdc3c7;
  --text-light: #ffffff;
  --text-muted: #7f8c8d;
  
  --border-color: #404040;
}

/* Dark mode specific adjustments */
[data-theme="dark"] .modal-content,
.dark-mode .modal-content {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .online-details,
.dark-mode .online-details {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .input-wrapper,
.dark-mode .input-wrapper {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .message,
.dark-mode .message {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

[data-theme="dark"] .message-typing,
.dark-mode .message-typing {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}

[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
.dark-mode .form-group select,
.dark-mode .form-group textarea {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .button-secondary,
.dark-mode .button-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

[data-theme="dark"] .button-secondary:hover,
.dark-mode .button-secondary:hover {
  background-color: var(--border-color);
}

[data-theme="dark"] .mute-toggle-btn,
.dark-mode .mute-toggle-btn {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .mute-toggle-btn:hover,
.dark-mode .mute-toggle-btn:hover {
  background-color: var(--bg-tertiary);
}

/* Smooth theme transition */
* {
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
}

/* Preserve video and image colors */
.video-player,
.logo-image,
.watermark {
  transition: none;
}