/* ============================================
   VoxPulse Dark Mode Overrides for Tailwind

   These rules override Tailwind utility classes
   when dark mode is active. Uses a helper selector
   to reduce duplication.
   ============================================ */

/* Helper: Match dark mode contexts
   - [data-theme="dark"] = explicit dark mode
   - [data-theme="system"] + prefers-color-scheme = system dark mode
*/

/* ============================================
   Base Overrides (explicit dark mode)
   ============================================ */

/* Backgrounds */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-gray-50 {
  background-color: var(--bg-card) !important;
}
[data-theme="dark"] .bg-gray-100 {
  background-color: var(--bg-elevated) !important;
}

/* Borders */
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border-gray-100 {
  border-color: var(--border-default) !important;
}
[data-theme="dark"] .border-t,
[data-theme="dark"] .border-b {
  border-color: var(--border-default);
}

/* Text colors */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .text-gray-400 {
  color: var(--text-muted) !important;
}

/* Shadows */
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg {
  box-shadow: var(--shadow-md) !important;
}

/* Hover states */
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover {
  background-color: var(--bg-elevated) !important;
}

/* Form elements */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-default);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted);
}

/* Components */
[data-theme="dark"] .toast {
  background-color: var(--bg-card);
  color: var(--text-primary);
}
[data-theme="dark"] .modal {
  background-color: var(--bg-card);
}
[data-theme="dark"] .modal-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}
[data-theme="dark"] nav {
  background-color: var(--bg-card) !important;
  border-color: var(--border-default) !important;
}

/* Recording card */
[data-theme="dark"] .recording-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: none;
}
[data-theme="dark"] .recording-card:hover {
  border-color: var(--border-strong);
  box-shadow: none;
}
[data-theme="dark"] .recording-card.border-dashed {
  border-style: dashed;
  border-width: 2px;
  border-color: #6b7280;
  background-color: transparent;
}
[data-theme="dark"] .recording-card.border-dashed:hover {
  border-color: var(--accent-primary);
  background-color: rgba(200, 150, 100, 0.1);
}

/* Status badges */
[data-theme="dark"] .status-pending,
[data-theme="dark"] .status-processing {
  background-color: rgba(245, 158, 11, 0.2);
}
[data-theme="dark"] .status-completed {
  background-color: transparent;
  color: var(--text-secondary);
}
[data-theme="dark"] .status-failed {
  background-color: rgba(239, 68, 68, 0.2);
}

/* Purple to Copper accent conversion */
[data-theme="dark"] .bg-purple-600,
[data-theme="dark"] .bg-purple-700 {
  background-color: var(--accent-primary) !important;
  color: #1a1a1a !important;
}
[data-theme="dark"] .bg-purple-600:hover,
[data-theme="dark"] .hover\:bg-purple-700:hover {
  background-color: var(--accent-primary-hover) !important;
  color: #1a1a1a !important;
}
[data-theme="dark"] .bg-purple-600.text-white,
[data-theme="dark"] .bg-purple-700.text-white {
  color: #1a1a1a !important;
}
[data-theme="dark"] .bg-purple-100,
[data-theme="dark"] .bg-purple-50 {
  background-color: var(--accent-primary-glow) !important;
}
[data-theme="dark"] .text-purple-400,
[data-theme="dark"] .text-purple-600,
[data-theme="dark"] .text-purple-700,
[data-theme="dark"] .text-purple-800 {
  color: var(--accent-primary) !important;
}
[data-theme="dark"] .border-purple-200,
[data-theme="dark"] .border-purple-300,
[data-theme="dark"] .border-purple-400,
[data-theme="dark"] .border-purple-500 {
  border-color: var(--accent-primary) !important;
}
[data-theme="dark"] .hover\:border-purple-300:hover,
[data-theme="dark"] .hover\:border-purple-400:hover {
  border-color: var(--accent-primary) !important;
}
[data-theme="dark"] .ring-purple-500,
[data-theme="dark"] .focus\:ring-purple-500:focus {
  --tw-ring-color: var(--accent-primary) !important;
}
[data-theme="dark"] .hover\:bg-purple-50:hover {
  background-color: var(--accent-primary-glow) !important;
}
[data-theme="dark"] .hover\:text-purple-600:hover {
  color: var(--accent-primary) !important;
}
[data-theme="dark"] .hover\:bg-purple-200:hover {
  background-color: rgba(212, 165, 116, 0.25) !important;
}

/* Green colors */
[data-theme="dark"] .bg-green-100 {
  background-color: rgba(34, 197, 94, 0.15) !important;
}
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-green-600 {
  color: #4ade80 !important;
}
[data-theme="dark"] .hover\:bg-green-200:hover {
  background-color: rgba(34, 197, 94, 0.25) !important;
}

/* Red colors */
[data-theme="dark"] .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.15) !important;
}
[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700 {
  color: #f87171 !important;
}
[data-theme="dark"] .hover\:text-red-600:hover {
  color: #f87171 !important;
}
[data-theme="dark"] .hover\:bg-red-50:hover {
  background-color: rgba(239, 68, 68, 0.15) !important;
}

/* Blue colors */
[data-theme="dark"] .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.15) !important;
}
[data-theme="dark"] .text-blue-600 {
  color: #60a5fa !important;
}
[data-theme="dark"] .hover\:text-blue-600:hover {
  color: #60a5fa !important;
}
[data-theme="dark"] .hover\:bg-blue-50:hover {
  background-color: rgba(59, 130, 246, 0.15) !important;
}

/* Amber/Yellow colors */
[data-theme="dark"] .bg-amber-100 {
  background-color: rgba(245, 158, 11, 0.15) !important;
}
[data-theme="dark"] .hover\:border-amber-300:hover {
  border-color: #fbbf24 !important;
}

/* Prose (markdown rendered content) - inherit colors from parent */
[data-theme="dark"] .prose,
[data-theme="dark"] .prose h1,
[data-theme="dark"] .prose h2,
[data-theme="dark"] .prose h3,
[data-theme="dark"] .prose h4,
[data-theme="dark"] .prose strong,
[data-theme="dark"] .prose p,
[data-theme="dark"] .prose li,
[data-theme="dark"] .prose a {
  color: inherit !important;
}

/* Gradient backgrounds */
[data-theme="dark"] .bg-gradient-to-r {
  background-image: none !important;
  background-color: var(--bg-elevated) !important;
}

/* ============================================
   System Preference Dark Mode
   Duplicates above rules for [data-theme="system"]
   when system prefers dark
   ============================================ */
@media (prefers-color-scheme: dark) {
  /* Backgrounds */
  [data-theme="system"] .bg-white,
  [data-theme="system"] .bg-gray-50 {
    background-color: var(--bg-card) !important;
  }
  [data-theme="system"] .bg-gray-100 {
    background-color: var(--bg-elevated) !important;
  }

  /* Borders */
  [data-theme="system"] .border-gray-200,
  [data-theme="system"] .border-gray-300,
  [data-theme="system"] .border-gray-100 {
    border-color: var(--border-default) !important;
  }

  /* Text colors */
  [data-theme="system"] .text-gray-900,
  [data-theme="system"] .text-gray-800,
  [data-theme="system"] .text-gray-700 {
    color: var(--text-primary) !important;
  }
  [data-theme="system"] .text-gray-600,
  [data-theme="system"] .text-gray-500 {
    color: var(--text-secondary) !important;
  }
  [data-theme="system"] .text-gray-400 {
    color: var(--text-muted) !important;
  }

  /* Prose (markdown) */
  [data-theme="system"] .prose,
  [data-theme="system"] .prose h1,
  [data-theme="system"] .prose h2,
  [data-theme="system"] .prose h3,
  [data-theme="system"] .prose h4,
  [data-theme="system"] .prose strong,
  [data-theme="system"] .prose p,
  [data-theme="system"] .prose li,
  [data-theme="system"] .prose a {
    color: inherit !important;
  }

  /* Form elements */
  [data-theme="system"] input,
  [data-theme="system"] textarea,
  [data-theme="system"] select {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-default);
  }

  /* Components */
  [data-theme="system"] .toast {
    background-color: var(--bg-card);
    color: var(--text-primary);
  }
  [data-theme="system"] .modal {
    background-color: var(--bg-card);
  }
}