/*
 * Button hover fix
 * This file must be loaded AFTER Tailwind CSS to override hover states.
 * Fixes issue where hover:bg-* classes don't work correctly on colored backgrounds.
 */

/* Target the Tailwind hover classes directly */
.hover\:bg-indigo-700:hover {
  background-color: #4338ca !important;
}

.hover\:bg-indigo-500:hover {
  background-color: #6366f1 !important;
}

.hover\:bg-red-700:hover {
  background-color: #b91c1c !important;
}

.hover\:bg-red-500:hover {
  background-color: #ef4444 !important;
}

.hover\:bg-green-700:hover {
  background-color: #15803d !important;
}

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

.hover\:bg-purple-700:hover {
  background-color: #7e22ce !important;
}

.hover\:bg-purple-500:hover {
  background-color: #a855f7 !important;
}

.hover\:bg-yellow-700:hover {
  background-color: #a16207 !important;
}

.hover\:bg-yellow-500:hover {
  background-color: #eab308 !important;
}

/* Also ensure base backgrounds stay correct */
.bg-indigo-600 {
  background-color: #4f46e5 !important;
}

.bg-red-600 {
  background-color: #dc2626 !important;
}

.bg-green-600 {
  background-color: #16a34a !important;
}

.bg-purple-600 {
  background-color: #9333ea !important;
}

.bg-yellow-600 {
  background-color: #ca8a04 !important;
}

/* Force white text on colored backgrounds */
.bg-indigo-600,
.bg-indigo-500,
.bg-red-600,
.bg-red-500,
.bg-green-600,
.bg-green-500,
.bg-purple-600,
.bg-purple-500 {
  color: white !important;
}