/**
 * Design System Color Overrides
 * Maps Tailwind color utilities to design system CSS variables
 * Load this after Tailwind to override with design system colors
 */

/* Primary Blue Colors - Map to Design System Primary */
.text-blue-600 {
  color: var(--color-primary) !important;
}

.text-blue-400 {
  color: var(--color-primary-light) !important;
}

.text-blue-800 {
  color: var(--color-primary-dark) !important;
}

.bg-blue-600 {
  background-color: var(--color-primary) !important;
}

.bg-blue-700 {
  background-color: var(--color-primary-dark) !important;
}

.bg-blue-50 {
  background-color: rgba(52, 152, 219, 0.1) !important;
}

.bg-blue-100 {
  background-color: rgba(52, 152, 219, 0.15) !important;
}

.bg-blue-200 {
  background-color: rgba(52, 152, 219, 0.25) !important;
}

.border-blue-200,
.border-blue-600,
.border-blue-700,
.border-blue-800 {
  border-color: var(--color-primary) !important;
}

/* Dark mode adjustments for blue */
.dark .bg-blue-900\/20 {
  background-color: rgba(52, 152, 219, 0.1) !important;
}

.dark .bg-blue-900\/30 {
  background-color: rgba(52, 152, 219, 0.15) !important;
}

.dark .border-blue-800 {
  border-color: rgba(52, 152, 219, 0.3) !important;
}

.dark .text-blue-300 {
  color: var(--color-primary-light) !important;
}

/* Green Colors - Map to Design System Secondary/Success */
.text-green-600 {
  color: var(--color-secondary) !important;
}

.text-green-400 {
  color: var(--color-success) !important;
}

.bg-green-600 {
  background-color: var(--color-secondary) !important;
}

.bg-green-700 {
  background-color: var(--color-secondary-dark) !important;
}

.bg-green-50 {
  background-color: rgba(16, 185, 129, 0.1) !important;
}

.border-green-200,
.border-green-600,
.border-green-800 {
  border-color: var(--color-secondary) !important;
}

.dark .bg-green-900\/20 {
  background-color: rgba(16, 185, 129, 0.1) !important;
}

.dark .border-green-800 {
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.dark .text-green-300,
.dark .text-green-400 {
  color: var(--color-success) !important;
}

/* Emerald Colors - Map to Design System Success/Emerald Green */
.text-emerald-600 {
  color: var(--color-secondary) !important;
}

.text-emerald-400 {
  color: var(--color-success) !important;
}

.bg-emerald-500 {
  color: var(--color-secondary) !important;
}

.bg-emerald-600 {
  background-color: var(--color-secondary-dark) !important;
}

.bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.1) !important;
}

.border-emerald-200,
.border-emerald-800 {
  border-color: var(--color-secondary) !important;
}

.dark .bg-emerald-900\/20 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}

.dark .border-emerald-800 {
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.hover\:bg-emerald-600:hover {
  background-color: var(--color-secondary-dark) !important;
}

/* Purple Colors for Save Bill button */
.bg-purple-600 {
  background-color: var(--color-purple) !important;
}

.bg-purple-700 {
  background-color: var(--color-purple-dark) !important;
}

.hover\:bg-purple-700:hover {
  background-color: var(--color-purple-dark) !important;
}

/* Teal Colors - Map to Design System Teal */
.text-teal-600 {
  color: var(--color-teal) !important;
}

.text-teal-400 {
  color: var(--color-teal-light) !important;
}

.bg-teal-600 {
  background-color: var(--color-teal) !important;
}

.bg-teal-700 {
  background-color: var(--color-teal-dark) !important;
}

.bg-teal-50 {
  background-color: rgba(20, 184, 166, 0.1) !important;
}

.bg-teal-100 {
  background-color: rgba(20, 184, 166, 0.15) !important;
}

.border-teal-200,
.border-teal-600,
.border-teal-700 {
  border-color: var(--color-teal) !important;
}

.dark .bg-teal-900\/20,
.dark .bg-teal-900\/30 {
  background-color: rgba(20, 184, 166, 0.1) !important;
}

.dark .text-teal-300,
.dark .text-teal-400 {
  color: var(--color-teal-light) !important;
}

/* Red/Error Colors - Map to Design System Error */
.text-red-600 {
  color: var(--color-error) !important;
}

.text-red-400 {
  color: var(--color-error) !important;
}

.bg-red-600 {
  background-color: var(--color-error) !important;
}

.bg-red-700 {
  background-color: var(--color-error-dark) !important;
}

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

.border-red-200,
.border-red-800 {
  border-color: var(--color-error) !important;
}

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

.dark .text-red-300,
.dark .text-red-400 {
  color: var(--color-error-light) !important;
}

/* Orange Colors - Map to Design System Accent */
.text-orange-600 {
  color: var(--color-accent) !important;
}

.text-orange-400 {
  color: var(--color-accent) !important;
}

.bg-orange-600 {
  background-color: var(--color-accent) !important;
}

.bg-orange-700 {
  background-color: var(--color-accent-dark) !important;
}

.bg-orange-50 {
  background-color: rgba(245, 158, 11, 0.1) !important;
}

.bg-orange-100 {
  background-color: rgba(245, 158, 11, 0.15) !important;
}

.border-orange-200,
.border-orange-300 {
  border-color: var(--color-accent) !important;
}

.dark .text-orange-300,
.dark .text-orange-400 {
  color: var(--color-accent-light) !important;
}

/* Yellow Colors - Map to Design System Warning */
.text-yellow-600 {
  color: var(--color-warning) !important;
}

.text-yellow-400 {
  color: var(--color-warning) !important;
}

.bg-yellow-600 {
  background-color: var(--color-warning) !important;
}

.bg-yellow-700 {
  background-color: var(--color-accent-dark) !important;
}

.dark .text-yellow-300,
.dark .text-yellow-400 {
  color: var(--color-warning-light) !important;
}

/* Gray Colors - Map to Design System Neutrals */
.text-gray-900 {
  color: var(--text-primary) !important;
}

.text-gray-800 {
  color: var(--text-primary) !important;
}

.text-gray-600 {
  color: var(--text-secondary) !important;
}

.text-gray-500 {
  color: var(--text-tertiary) !important;
}

.text-gray-400 {
  color: var(--text-tertiary) !important;
}

.bg-gray-50 {
  background-color: var(--bg-elevated) !important;
}

.bg-gray-100 {
  background-color: var(--color-gray-100) !important;
}

.bg-gray-200 {
  background-color: var(--color-gray-200) !important;
}

.bg-gray-700 {
  background-color: var(--color-gray-700) !important;
}

.bg-gray-800 {
  background-color: var(--color-gray-800) !important;
}

.bg-gray-900 {
  background-color: var(--color-gray-900) !important;
}

.border-gray-100,
.border-gray-200 {
  border-color: var(--border-base) !important;
}

.border-gray-300 {
  border-color: var(--border-strong) !important;
}

.border-gray-700 {
  border-color: var(--border-base) !important;
}

/* Dark mode gray adjustments */
.dark .text-gray-100 {
  color: var(--text-primary) !important;
}

.dark .text-gray-200 {
  color: var(--text-primary) !important;
}

.dark .text-gray-300 {
  color: var(--text-secondary) !important;
}

.dark .text-gray-400 {
  color: var(--text-tertiary) !important;
}

.dark .bg-gray-800 {
  background-color: var(--bg-elevated) !important;
}

.dark .bg-gray-900 {
  background-color: var(--bg-base) !important;
}

.dark .border-gray-700 {
  border-color: var(--border-base) !important;
}

.dark .border-gray-600 {
  border-color: var(--border-strong) !important;
}

/* White */
.bg-white {
  background-color: var(--bg-base) !important;
}

.text-white {
  color: var(--text-inverse) !important;
}
.txt-white {
  color: #FFFFFF !important;
}

.dark .bg-white {
  background-color: var(--bg-base) !important;
}

/* Hover states using design system colors */
.hover\:bg-blue-700:hover {
  background-color: var(--color-primary-dark) !important;
}

.hover\:bg-blue-200:hover {
  background-color: rgba(52, 152, 219, 0.3) !important;
}

.hover\:bg-green-700:hover {
  background-color: var(--color-secondary-dark) !important;
}

.hover\:bg-teal-700:hover {
  background-color: var(--color-teal-dark) !important;
}

.hover\:bg-gray-200:hover {
  background-color: var(--color-gray-200) !important;
}

.hover\:bg-gray-300:hover {
  background-color: var(--color-gray-300) !important;
}

.dark .hover\:bg-gray-600:hover {
  background-color: var(--color-gray-600) !important;
}

.dark .hover\:bg-blue-900\/50:hover {
  background-color: rgba(52, 152, 219, 0.2) !important;
}

/* Text hover states */
.hover\:text-blue-600:hover,
.hover\:text-blue-400:hover {
  color: var(--color-primary) !important;
}

.dark .hover\:text-blue-400:hover {
  color: var(--color-primary-light) !important;
}

/* Custom Scrollbar Styles */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-elevated);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 5px;
  border: 2px solid var(--bg-elevated);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
  background: var(--color-gray-800);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--color-gray-600);
  border-color: var(--color-gray-800);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-500);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) var(--bg-elevated);
}

.dark * {
  scrollbar-color: var(--color-gray-600) var(--color-gray-800);
}