/**
 * Dark Theme Fixes
 * Fix white/black color mismatches in dark mode
 */

/* ========================================
   Force Dark Mode for Editor Components
   ======================================== */

/* Override white backgrounds in editor (dark mode only) */
body.app-theme-dark .editor-shell .bg-white,
body.app-theme-dark .editor-shell [class*="bg-white"],
body.app-theme-dark .bg-white {
  background: rgba(30, 41, 59, 0.8) !important;
}

/* Override slate-50 backgrounds */
body.app-theme-dark .editor-shell .bg-slate-50,
body.app-theme-dark .editor-shell [class*="bg-slate-50"],
body.app-theme-dark .bg-slate-50 {
  background: rgba(15, 23, 42, 0.6) !important;
}

/* Override light text colors */
body.app-theme-dark .editor-shell .text-slate-800,
body.app-theme-dark .editor-shell [class*="text-slate-800"],
body.app-theme-dark .text-slate-800 {
  color: #f1f5f9 !important;
}

body.app-theme-dark .editor-shell .text-slate-700,
body.app-theme-dark .editor-shell [class*="text-slate-700"],
body.app-theme-dark .text-slate-700 {
  color: #e2e8f0 !important;
}

body.app-theme-dark .editor-shell .text-slate-600,
body.app-theme-dark .editor-shell [class*="text-slate-600"],
body.app-theme-dark .text-slate-600 {
  color: #cbd5e1 !important;
}

/* Override border colors */
body.app-theme-dark .editor-shell .border-slate-200,
body.app-theme-dark .editor-shell [class*="border-slate-200"],
body.app-theme-dark .border-slate-200 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Override hover states */
body.app-theme-dark .editor-shell .hover\:bg-slate-50:hover,
body.app-theme-dark .hover\:bg-slate-50:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ========================================
   Speaker Manager Fixes (dark mode only)
   ======================================== */

body.app-theme-dark .speaker-manager .bg-white,
body.app-theme-dark .speaker-manager [class*="bg-white"] {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.app-theme-dark .speaker-manager .text-slate-800 {
  color: #f1f5f9 !important;
}

body.app-theme-dark .speaker-manager select,
body.app-theme-dark .speaker-manager input {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
}

body.app-theme-dark .speaker-manager .bg-slate-50 {
  background: rgba(15, 23, 42, 0.4) !important;
}

/* ========================================
   Subtitle Editor Fixes (dark mode only)
   ======================================== */

body.app-theme-dark .subtitle-editor .bg-white,
body.app-theme-dark .subtitle-editor [class*="bg-white"] {
  background: rgba(30, 41, 59, 0.6) !important;
}

body.app-theme-dark .subtitle-editor .text-slate-800 {
  color: #f1f5f9 !important;
}

body.app-theme-dark .subtitle-editor .text-slate-700 {
  color: #e2e8f0 !important;
}

body.app-theme-dark .subtitle-editor .border-slate-200 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.app-theme-dark .subtitle-editor .hover\:bg-slate-50:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

body.app-theme-dark .subtitle-editor .hover\:bg-slate-50\/50:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Batch menu fixes */
body.app-theme-dark .subtitle-batch-menu {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
}

body.app-theme-dark .subtitle-batch-menu button {
  color: #e2e8f0 !important;
}

body.app-theme-dark .subtitle-batch-menu button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   Modal Fixes (dark mode only)
   ======================================== */

body.app-theme-dark .modal-box .bg-white,
body.app-theme-dark .modal-box [class*="bg-white"] {
  background: rgba(30, 41, 59, 0.95) !important;
}

body.app-theme-dark .modal-box .text-slate-800 {
  color: #f1f5f9 !important;
}

body.app-theme-dark .modal-box .text-slate-600 {
  color: #cbd5e1 !important;
}

body.app-theme-dark .modal-box .border-slate-200 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.app-theme-dark .modal-box .hover\:bg-slate-50:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ========================================
   Upload View Fixes (dark mode only)
   ======================================== */

body.app-theme-dark .upload-flow .bg-white,
body.app-theme-dark .upload-flow [class*="bg-white"] {
  background: rgba(30, 41, 59, 0.6) !important;
}

body.app-theme-dark .upload-flow .text-slate-800 {
  color: #f1f5f9 !important;
}

body.app-theme-dark .upload-flow select {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
}

/* ========================================
   Preview View Fixes (dark mode only)
   ======================================== */

body.app-theme-dark .preview-view .bg-white,
body.app-theme-dark .preview-view [class*="bg-white"] {
  background: rgba(30, 41, 59, 0.6) !important;
}

body.app-theme-dark .preview-view .text-slate-800 {
  color: #f1f5f9 !important;
}

/* Slider thumb fix */
body.app-theme-dark .preview-view .bg-white.border-2 {
  background: #f1f5f9 !important;
  border-color: #3b82f6 !important;
}

/* ========================================
   Timeline Fixes (dark mode only)
   ======================================== */

body.app-theme-dark .timeline-canvas .border-slate-200 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.app-theme-dark .timeline-left-rail {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   Animation Panel Fixes (dark mode only)
   ======================================== */

body.app-theme-dark .animation-panel .bg-white,
body.app-theme-dark .animation-panel [class*="bg-white"] {
  background: rgba(30, 41, 59, 0.6) !important;
}

body.app-theme-dark .animation-panel .text-slate-800 {
  color: #f1f5f9 !important;
}

/* ========================================
   Input & Select Global Fixes
   ======================================== */

body.app-theme-dark input[type="text"],
body.app-theme-dark input[type="number"],
body.app-theme-dark select,
body.app-theme-dark textarea {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
}

body.app-theme-dark input::placeholder,
body.app-theme-dark textarea::placeholder {
  color: #64748b !important;
}

/* Focus states */
body.app-theme-dark input:focus,
body.app-theme-dark select:focus,
body.app-theme-dark textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* ========================================
   Button Fixes
   ======================================== */

body.app-theme-dark button:not(.grad-btn):not(.bg-brand-500):not(.bg-blue-500) {
  color: #e2e8f0;
}

/* Keep white text on colored buttons */
body.app-theme-dark .grad-btn,
body.app-theme-dark .bg-brand-500,
body.app-theme-dark .bg-blue-500 {
  color: white !important;
}

/* ========================================
   Table Fixes
   ======================================== */

body.app-theme-dark table {
  color: #e2e8f0;
}

body.app-theme-dark th {
  background: rgba(15, 23, 42, 0.6) !important;
  color: #f1f5f9 !important;
}

body.app-theme-dark td {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ========================================
   Scrollbar Fixes for Dark Mode
   ======================================== */

body.app-theme-dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.app-theme-dark ::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

body.app-theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

body.app-theme-dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}