/* Dark mode styles */
.dark body {
  background-color: #101c22;
  color: #e5e7eb;
}

.dark .bg-white {
  background-color: #182832 !important;
}

.dark .bg-\[\#f6f7f8\] {
  background-color: #101c22 !important;
}

.dark .bg-gray-50 {
  background-color: #182832 !important;
}

.dark .text-gray-900,
.dark .text-black,
.dark .text-black\/80,
.dark .text-black\/90 {
  color: #e5e7eb !important;
}

.dark .text-gray-700,
.dark .text-gray-600,
.dark .text-black\/60,
.dark .text-black\/70 {
  color: #9ca3af !important;
}

.dark .text-gray-500,
.dark .text-gray-400,
.dark .text-black\/40,
.dark .text-black\/50 {
  color: #6b7280 !important;
}

.dark .text-gray-300 {
  color: #4b5563 !important;
}

.dark .border-black\/10,
.dark .border-black\/5,
.dark .border-gray-200,
.dark .border-gray-300 {
  border-color: #374151 !important;
}

.dark .divide-gray-200 > :not(:last-child),
.dark .divide-black\/10 > :not(:last-child) {
  border-color: #374151 !important;
}

.dark .hover\:bg-black\/5:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .hover\:bg-gray-50:hover,
.dark tr.hover\:bg-gray-50:hover,
.dark tr.hover\:bg-gray-50:hover td {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark .hover\:bg-gray-100:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .bg-black\/5 {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode for form inputs */
.dark input,
.dark select,
.dark textarea {
  background-color: #182832 !important;
  color: #e5e7eb !important;
  border-color: #374151 !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: #1193d4 !important;
}

/* Dark mode for dropdowns and menus */
.dark details > div {
  background-color: #182832 !important;
  border-color: #374151 !important;
}

/* Flash messages in dark mode */
.dark .bg-green-50 {
  background-color: rgba(34, 197, 94, 0.1) !important;
}

.dark .text-green-700 {
  color: #4ade80 !important;
}

.dark .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.1) !important;
}

.dark .text-red-600,
.dark .text-red-700 {
  color: #f87171 !important;
}

/* Badges in dark mode - transparent background with colored border */

/* Purple badges */
.dark .bg-purple-50,
.dark .bg-purple-100 {
  background-color: transparent !important;
}

.dark .text-purple-700 {
  color: #a855f7 !important;
}

/* Green badges */
.dark .bg-green-50,
.dark .bg-green-100 {
  background-color: transparent !important;
}

.dark .text-green-700 {
  color: #4ade80 !important;
}

/* Blue badges */
.dark .bg-blue-50,
.dark .bg-blue-100 {
  background-color: transparent !important;
}

.dark .text-blue-700 {
  color: #60a5fa !important;
}

/* Yellow badges */
.dark .bg-yellow-50,
.dark .bg-yellow-100 {
  background-color: transparent !important;
}

.dark .text-yellow-700,
.dark .text-yellow-800 {
  color: #facc15 !important;
}

/* Red backgrounds */
.dark .bg-red-50,
.dark .bg-red-100 {
  background-color: rgba(248, 113, 113, 0.15) !important;
}

.dark .text-red-700 {
  color: #f87171 !important;
}

/* Orange badges */
.dark .bg-orange-50,
.dark .bg-orange-100 {
  background-color: transparent !important;
}

.dark .text-orange-700 {
  color: #fb923c !important;
}

/* Indigo badges */
.dark .bg-indigo-50,
.dark .bg-indigo-100 {
  background-color: transparent !important;
}

.dark .text-indigo-600,
.dark .text-indigo-700,
.dark .text-indigo-800 {
  color: #a5b4fc !important;
}

/* Teal badges */
.dark .bg-teal-50,
.dark .bg-teal-100 {
  background-color: transparent !important;
}

.dark .text-teal-700 {
  color: #2dd4bf !important;
}

/* Gray backgrounds */
.dark .bg-gray-100 {
  background-color: #1f2937 !important;
}

/* Text gray-800 for dark mode */
.dark .text-gray-800 {
  color: #e5e7eb !important;
}

/* Primary color badge */
.dark .bg-\[\#1193d4\]\/10 {
  background-color: transparent !important;
  border: 1px solid #1193d4 !important;
}

.dark .text-\[\#1193d4\] {
  color: #1193d4 !important;
}

/* Amber badges */
.dark .bg-amber-50,
.dark .bg-amber-100 {
  background-color: transparent !important;
}

.dark .text-amber-700,
.dark .text-amber-800 {
  color: #fbbf24 !important;
}

/* Update border colors in dark mode to match text */
.dark .border-purple-200,
.dark .border-purple-300 {
  border-color: #a855f7 !important;
}

.dark .text-purple-600 {
  color: #c084fc !important;
}

.dark .text-purple-900 {
  color: #e9d5ff !important;
}

.dark .border-green-300 {
  border-color: #4ade80 !important;
}

.dark .border-blue-300 {
  border-color: #60a5fa !important;
}

.dark .border-yellow-300 {
  border-color: #facc15 !important;
}

.dark .border-red-300 {
  border-color: #f87171 !important;
}

.dark .border-orange-300 {
  border-color: #fb923c !important;
}

.dark .border-indigo-300 {
  border-color: #818cf8 !important;
}

.dark .ring-indigo-500 {
  --tw-ring-color: #38bdf8 !important;
}

.dark .border-teal-300 {
  border-color: #2dd4bf !important;
}

.dark .border-amber-300 {
  border-color: #fbbf24 !important;
}

/* Soften intense action buttons in dark mode */
.dark .bg-amber-500 {
  background-color: transparent !important;
  border: 1px solid #fbbf24 !important;
  color: #fbbf24 !important;
}

.dark .bg-amber-500:hover {
  background-color: rgba(251, 191, 36, 0.1) !important;
}

.dark .bg-amber-600 {
  background-color: transparent !important;
  border: 1px solid #d97706 !important;
  color: #fbbf24 !important;
}

.dark .bg-amber-600:hover {
  background-color: rgba(217, 119, 6, 0.1) !important;
}

.dark .bg-\[\#1193d4\] {
  background-color: transparent !important;
  border: 1px solid #1193d4 !important;
  color: #1193d4 !important;
}

.dark .bg-\[\#1193d4\]:hover {
  background-color: rgba(17, 147, 212, 0.1) !important;
}

.dark .bg-red-600 {
  background-color: transparent !important;
  border: 1px solid #f87171 !important;
  color: #f87171 !important;
}

.dark .bg-red-600:hover,
.dark .hover\:bg-red-700:hover {
  background-color: rgba(248, 113, 113, 0.1) !important;
}

/* Toggle switches in dark mode */
.dark .bg-gray-300 {
  background-color: #4b5563 !important;
}

.dark .bg-green-500 {
  background-color: #22c55e !important;
}