/* Custom dark mode styles */
html.dark {
  color-scheme: dark;
}

/* Body background - solid dark with subtle texture */
html.dark body {
  background-color: #0f172a;
  color: #e2e8f0;
}

/* Text colors - improved readability */
html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #f1f5f9 !important;
}

html.dark .text-slate-700,
html.dark .text-slate-600 {
  color: #e2e8f0 !important;
}

html.dark .text-slate-500,
html.dark .text-slate-400,
html.dark .text-slate-300 {
  color: #94a3b8 !important;
}

/* Card backgrounds with glass effect - but NOT dropdowns */
html.dark .bg-white:not([data-dropdown-target]):not([data-combobox-target]) {
  background-color: rgba(30, 41, 59, 0.5) !important;
  backdrop-filter: blur(8px);
}

/* Stat cards and rounded panels */
html.dark .rounded-xl.border.bg-white,
html.dark .rounded-2xl.border.bg-white {
  background: rgba(30, 41, 59, 0.4) !important;
  border-color: rgba(71, 85, 105, 0.3) !important;
  backdrop-filter: blur(12px);
}

/* Panel/Card headers - MUCH DARKER */
html.dark .bg-slate-50 {
  background-color: rgba(30, 41, 59, 0.7) !important;
}

html.dark .border-b.bg-slate-50,
html.dark div.bg-slate-50 {
  background-color: rgba(30, 41, 59, 0.7) !important;
}

/* Table backgrounds */
html.dark table tbody.bg-white {
  background: rgba(15, 23, 42, 0.4) !important;
}

/* Table hover states - MUCH more visible now */
html.dark tr.hover\:bg-slate-50:hover,
html.dark tr:hover {
  background-color: rgba(51, 65, 85, 0.6) !important;
  transition: background-color 0.15s ease;
}

/* ALL HOVER STATES - FULLY OPAQUE DARK BACKGROUNDS */
html.dark button.hover\:bg-slate-100:hover,
html.dark a.hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-100:hover {
  background-color: rgb(51, 65, 85) !important;
  color: #f1f5f9 !important;
}

html.dark button.hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-50:hover {
  background-color: rgb(51, 65, 85) !important;
  color: #f1f5f9 !important;
}

html.dark .hover\:bg-indigo-50:hover {
  background-color: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
}

html.dark .hover\:bg-emerald-100:hover {
  background-color: rgba(16, 185, 129, 0.25) !important;
}

/* Table header - darker with better contrast */
html.dark thead.bg-slate-50 {
  background: rgba(30, 41, 59, 0.8) !important;
  border-bottom: 1px solid rgba(71, 85, 105, 0.5);
}

/* Borders - subtle but visible */
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-slate-100 {
  border-color: rgba(71, 85, 105, 0.4) !important;
}

html.dark .border-white\/40,
html.dark .border-slate-200\/70 {
  border-color: rgba(71, 85, 105, 0.35) !important;
}

html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(71, 85, 105, 0.3) !important;
}

html.dark .divide-slate-700 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(71, 85, 105, 0.3) !important;
}

/* Form inputs - HIGH CONTRAST for visibility */
html.dark input[type="text"],
html.dark input[type="search"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="password"],
html.dark input[type="file"],
html.dark select,
html.dark textarea {
  background-color: rgba(30, 41, 59, 0.9) !important;
  border-color: rgba(71, 85, 105, 0.6) !important;
  color: #f1f5f9 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: rgba(148, 163, 184, 0.5) !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: rgba(59, 130, 246, 0.8) !important;
  background-color: rgba(30, 41, 59, 1) !important;
  ring-color: rgba(59, 130, 246, 0.3);
}

/* RESET/CANCEL BUTTONS - FULLY VISIBLE */
html.dark .bg-slate-100,
html.dark button.text-slate-700,
html.dark a.text-slate-700 {
  background-color: rgba(51, 65, 85, 0.7) !important;
  color: #e2e8f0 !important;
}

html.dark .bg-slate-100:hover,
html.dark button.text-slate-700:hover,
html.dark a.text-slate-700:hover {
  background-color: rgb(51, 65, 85) !important;
  color: #f1f5f9 !important;
}

html.dark .bg-slate-200:hover {
  background-color: rgb(71, 85, 105) !important;
}

/* Secondary buttons (back buttons, etc) - but NOT dropdowns */
html.dark button.bg-slate-800,
html.dark a.bg-slate-800 {
  background-color: rgba(51, 65, 85, 0.9) !important;
}

html.dark button.bg-slate-800:hover,
html.dark a.bg-slate-800:hover {
  background-color: rgb(51, 65, 85) !important;
}

/* ALL DROPDOWNS - FULLY OPAQUE - NO TRANSPARENCY WHATSOEVER */
html.dark div[data-dropdown-target="menu"],
html.dark [data-dropdown-target="menu"],
html.dark div[data-combobox-target="dropdown"],
html.dark [data-combobox-target="dropdown"] {
  background-color: #1e293b !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Override ALL possible background classes on dropdowns - NUCLEAR OPTION */
html.dark [data-dropdown-target="menu"].bg-white,
html.dark [data-dropdown-target="menu"].dark\:bg-slate-800,
html.dark [data-combobox-target="dropdown"].bg-white,
html.dark [data-combobox-target="dropdown"].dark\:bg-slate-800 {
  background-color: #1e293b !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Dropdown container - absolute positioning fix */
html.dark .absolute.z-10.bg-white[data-dropdown-target="menu"],
html.dark .absolute[data-dropdown-target="menu"] {
  background: #1e293b !important;
}

/* Combobox/Dropdown backgrounds - FULLY OPAQUE */
html.dark div.bg-slate-800,
html.dark div.dark\:bg-slate-800 {
  background-color: #1e293b !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Force all child elements in combobox to also be opaque */
html.dark [data-combobox-target="dropdown"] > *,
html.dark [data-combobox-target="dropdown"] .bg-slate-50 {
  background-color: rgb(30, 41, 59) !important;
}

html.dark div.bg-slate-900,
html.dark input.bg-slate-900,
html.dark [data-combobox-target="input"],
html.dark .dark\:bg-slate-900 {
  background-color: rgb(15, 23, 42) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Contact selector combobox option items hover */
html.dark [data-combobox-target="option"]:hover,
html.dark .dark\:hover\:bg-slate-700\/50:hover {
  background-color: rgb(51, 65, 85) !important;
  color: #f1f5f9 !important;
}

/* Dropdown menu items with proper contrast */
html.dark .text-slate-700.hover\:bg-slate-100 {
  color: #e2e8f0 !important;
}

html.dark .text-slate-700.hover\:bg-slate-100:hover {
  background-color: rgb(51, 65, 85) !important;
  color: #f1f5f9 !important;
}

/* Dropdown dark variant items */
html.dark .dark\:text-slate-200 {
  color: #e2e8f0 !important;
}

html.dark .dark\:hover\:bg-slate-700:hover {
  background-color: rgb(51, 65, 85) !important;
  color: #f1f5f9 !important;
}

/* Icon backgrounds in stat cards */
html.dark .rounded-full.bg-slate-100 {
  background-color: rgba(51, 65, 85, 0.6) !important;
}

html.dark .rounded-full.bg-slate-800 {
  background-color: rgba(51, 65, 85, 0.5) !important;
}

/* Emerald backgrounds (for matched items) */
html.dark .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.18) !important;
}

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

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

/* VENDOR PILL FIX - Better colors for dark mode */
html.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.18) !important;
}

html.dark .text-emerald-700 {
  color: #6ee7b7 !important;
}

html.dark .text-emerald-600 {
  color: #6ee7b7 !important;
}

html.dark .text-emerald-400 {
  color: #6ee7b7 !important;
}

/* Amber backgrounds (for needs review) */
html.dark .bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.12) !important;
}

html.dark .bg-amber-100 {
  background-color: rgba(245, 158, 11, 0.18) !important;
}

html.dark .bg-amber-900\/20 {
  background-color: rgba(245, 158, 11, 0.15) !important;
}

html.dark .bg-amber-900\/30 {
  background-color: rgba(245, 158, 11, 0.2) !important;
}

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

html.dark .text-amber-600 {
  color: #fbbf24 !important;
}

html.dark .text-amber-400 {
  color: #fbbf24 !important;
}

/* Purple backgrounds (for pattern rules) */
html.dark .bg-purple-100 {
  background-color: rgba(168, 85, 247, 0.18) !important;
}

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

html.dark .bg-purple-900\/30 {
  background-color: rgba(168, 85, 247, 0.2) !important;
}

/* Blue backgrounds (for exact match rules) */
html.dark .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.18) !important;
}

html.dark .text-blue-700 {
  color: #93c5fd !important;
}

html.dark .bg-blue-900\/30 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

/* Slate Blue backgrounds */
html.dark .bg-indigo-100 {
  background-color: rgba(59, 130, 246, 0.18) !important;
}

html.dark .bg-indigo-900\/30 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

html.dark .text-indigo-600 {
  color: #60a5fa !important;
}

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

html.dark .text-indigo-500 {
  color: #3b82f6 !important;
}

/* Landing page invite badge - keep light on dark mode */
html.dark .dark\:text-white {
  color: #ffffff !important;
}

/* Rose backgrounds */
html.dark .text-rose-600 {
  color: #fb7185 !important;
}

html.dark .text-rose-400 {
  color: #fb7185 !important;
}

html.dark .hover\:text-rose-900:hover,
html.dark .hover\:text-rose-300:hover {
  color: #fda4af !important;
}

/* Border colors for status cards */
html.dark .border-amber-300 {
  border-color: rgba(245, 158, 11, 0.5) !important;
}

html.dark .border-amber-700 {
  border-color: rgba(245, 158, 11, 0.6) !important;
}

html.dark .border-slate-700 {
  border-color: rgba(71, 85, 105, 0.4) !important;
}

html.dark .border-indigo-300 {
  border-color: rgba(59, 130, 246, 0.5) !important;
}

html.dark .border-indigo-600 {
  border-color: rgba(59, 130, 246, 0.6) !important;
}

/* Dropdown/select styling */
html.dark select option {
  background-color: #1e293b;
  color: #f1f5f9;
}

/* Shadow enhancements for depth */
html.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(71, 85, 105, 0.2) !important;
}

html.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4) !important;
}

html.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4) !important;
}

/* Primary action buttons - Slate Blue with refined glow */
html.dark .bg-indigo-600 {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

html.dark .bg-indigo-600:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45);
}

html.dark .bg-indigo-700:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

html.dark .bg-emerald-600 {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

html.dark .bg-emerald-600:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
}

html.dark .bg-emerald-700:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
}

/* Link colors - Slate Blue for better visibility */
html.dark .text-indigo-600 {
  color: #60a5fa !important;
}

html.dark .text-indigo-600:hover,
html.dark .hover\:text-indigo-900:hover,
html.dark .hover\:text-indigo-800:hover {
  color: #93c5fd !important;
}

html.dark .text-indigo-400 {
  color: #60a5fa !important;
}

html.dark .text-indigo-400:hover,
html.dark .dark\:hover\:text-indigo-300:hover {
  color: #93c5fd !important;
}

html.dark .hover\:text-indigo-600:hover {
  color: #93c5fd !important;
}

html.dark .hover\:text-slate-700:hover {
  color: #f1f5f9 !important;
}

html.dark .hover\:text-slate-600:hover {
  color: #e2e8f0 !important;
}

/* Expanded row in table */
html.dark .border-slate-100 {
  border-color: rgba(71, 85, 105, 0.3) !important;
}

html.dark .border-slate-800 {
  border-color: rgba(71, 85, 105, 0.4) !important;
}

html.dark tr.bg-slate-50 {
  background-color: rgba(30, 41, 59, 0.3) !important;
}

html.dark .bg-slate-800\/50 {
  background-color: rgba(30, 41, 59, 0.5) !important;
}

/* Pagination and table footer - DARK BACKGROUND */
html.dark .border-t.border-slate-200.bg-slate-50 {
  background-color: rgba(30, 41, 59, 0.7) !important;
  border-color: rgba(71, 85, 105, 0.4) !important;
}

/* Modal overlays */
html.dark .bg-black\/50 {
  background-color: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(4px);
}

/* Modal content */
html.dark .dark\:bg-slate-900 {
  background-color: rgb(15, 23, 42) !important;
}

/* Filter panel */
html.dark .rounded-2xl.border.bg-white.p-6 {
  background: rgba(30, 41, 59, 0.5) !important;
  backdrop-filter: blur(10px);
}

/* Matching rules record panels */
html.dark .rounded-xl.bg-slate-50,
html.dark .hover\:bg-white:hover {
  background-color: rgba(30, 41, 59, 0.5) !important;
}

html.dark .rounded-xl.border.bg-slate-50 {
  background-color: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(71, 85, 105, 0.4) !important;
}

html.dark .rounded-xl.border.bg-slate-50:hover {
  background-color: rgba(30, 41, 59, 0.7) !important;
}

/* Priority badge backgrounds */
html.dark .bg-slate-200 {
  background-color: rgba(51, 65, 85, 0.7) !important;
}

html.dark .bg-slate-700 {
  background-color: rgba(51, 65, 105, 0.6) !important;
}

/* Upload dropzone */
html.dark .dark\:bg-slate-800\/50 {
  background-color: rgba(30, 41, 59, 0.5) !important;
}

html.dark .hover\:border-slate-400:hover {
  border-color: rgba(59, 130, 246, 0.5) !important;
}

html.dark .dark\:border-slate-600 {
  border-color: rgba(71, 85, 105, 0.5) !important;
}

/* CANCEL BUTTON SPECIFIC FIX */
html.dark button.text-slate-700.hover\:bg-slate-100,
html.dark a.text-slate-700.hover\:bg-slate-100 {
  color: #e2e8f0 !important;
  background-color: transparent !important;
}

html.dark button.text-slate-700.hover\:bg-slate-100:hover,
html.dark a.text-slate-700.hover\:bg-slate-100:hover {
  background-color: rgb(51, 65, 85) !important;
  color: #f1f5f9 !important;
}

html.dark .dark\:text-slate-300 {
  color: #cbd5e1 !important;
}

html.dark .dark\:hover\:bg-slate-800:hover {
  background-color: rgb(51, 65, 85) !important;
}

/* FINAL OVERRIDE - DROPDOWNS MUST BE SOLID */
html.dark [data-dropdown-target="menu"] {
  background: #1e293b !important;
  backdrop-filter: none !important;
}

html.dark [data-combobox-target="dropdown"] {
  background: #1e293b !important;
  backdrop-filter: none !important;
}

/* Combobox dropdown positioning - prevent page shift and clipping */
[data-combobox-target="dropdown"] {
  max-height: 16rem;
}