/* Dark Mode Improvements - Fix contrast issues */

/* Override custom colors for dark mode */
.dark {
  /* Better background colors */
  --surface: #1f2937;  /* gray-800 */
  --surface-strong: #111827;  /* gray-900 */
  --border: rgba(75, 85, 99, 0.3);  /* gray-600 with opacity */
  --content: #f3f4f6;  /* gray-100 */
  --muted: #9ca3af;  /* gray-400 */
}

/* Fix white backgrounds in dark mode */
.dark .bg-white {
  background-color: #1f2937 !important;  /* gray-800 */
}

.dark .bg-surface-strong {
  background-color: #111827 !important;  /* gray-900 */
}

.dark .bg-surface {
  background-color: #1f2937 !important;  /* gray-800 */
}

.dark .bg-surface\/50 {
  background-color: rgba(31, 41, 55, 0.5) !important;
}

/* Fix text colors in dark mode */
.dark .text-content {
  color: #f3f4f6 !important;  /* gray-100 */
}

.dark .text-muted {
  color: #9ca3af !important;  /* gray-400 */
}

.dark .text-gray-900 {
  color: #f3f4f6 !important;  /* gray-100 instead of gray-900 */
}

.dark .text-gray-800 {
  color: #e5e7eb !important;  /* gray-200 instead of gray-800 */
}

.dark .text-gray-700 {
  color: #d1d5db !important;  /* gray-300 instead of gray-700 */
}

.dark .text-gray-600 {
  color: #9ca3af !important;  /* gray-400 instead of gray-600 */
}

/* Fix borders in dark mode */
.dark .border-border {
  border-color: rgba(75, 85, 99, 0.3) !important;
}

.dark .border-gray-200,
.dark .border-gray-300 {
  border-color: #374151 !important;  /* gray-700 */
}

.dark .divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(75, 85, 99, 0.3) !important;
}

/* Fix hover states in dark mode */
.dark .hover\:bg-surface:hover {
  background-color: #374151 !important;  /* gray-700 */
}

.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-100:hover {
  background-color: #374151 !important;  /* gray-700 */
}

/* Fix table rows in dark mode */
.dark table tbody tr {
  background-color: #1f2937;  /* gray-800 */
}

.dark table tbody tr:hover {
  background-color: #374151;  /* gray-700 */
}

.dark table thead {
  background-color: #111827;  /* gray-900 */
}

/* Fix form inputs in dark mode */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="search"],
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"],
.dark select,
.dark textarea {
  background-color: #374151 !important;  /* gray-700 */
  border-color: #4b5563 !important;  /* gray-600 */
  color: #f3f4f6 !important;  /* gray-100 */
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #6b7280 !important;  /* gray-500 */
}

/* Fix cards and panels in dark mode */
.dark .rounded-2xl.bg-white,
.dark .rounded-xl.bg-white,
.dark .rounded-lg.bg-white {
  background-color: #1f2937 !important;  /* gray-800 */
}

/* Fix sidebar in dark mode */
.dark aside {
  background-color: #111827 !important;  /* gray-900 */
  border-color: #374151 !important;  /* gray-700 */
}

/* Fix header in dark mode */
.dark header {
  background-color: rgba(31, 41, 55, 0.8) !important;  /* gray-800 with opacity */
}

/* Fix footer in dark mode */
.dark footer {
  background-color: #111827 !important;  /* gray-900 */
  border-color: #374151 !important;  /* gray-700 */
}

/* Fix alerts and badges in dark mode */
.dark .bg-blue-50 {
  background-color: rgba(30, 58, 138, 0.2) !important;
}

.dark .bg-green-50 {
  background-color: rgba(20, 83, 45, 0.2) !important;
}

.dark .bg-yellow-50 {
  background-color: rgba(113, 63, 18, 0.2) !important;
}

.dark .bg-red-50 {
  background-color: rgba(127, 29, 29, 0.2) !important;
}

.dark .bg-purple-50 {
  background-color: rgba(88, 28, 135, 0.2) !important;
}

.dark .bg-orange-50 {
  background-color: rgba(124, 45, 18, 0.2) !important;
}

/* Fix button hover states */
.dark button:hover,
.dark a.inline-flex:hover {
  opacity: 0.9;
}

/* Ensure good contrast for accent color text */
.dark .text-accent {
  color: #60a5fa !important;  /* blue-400 for better contrast */
}

/* Fix shadow colors in dark mode */
.dark .shadow,
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg {
  --tw-shadow-color: rgba(0, 0, 0, 0.5);
}