/* Experimental dark mode compatibility layer.
   Many templates still use fixed Tailwind gray/white utilities; this file nudges them toward a readable dark palette.
*/

html[data-theme="dark"] body.bg-gray-50 {
  background-color: #0b1220;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --tw-ring-offset-color: #0b1220;
}

html[data-theme="dark"] .bg-white {
  background-color: #0f172a;
}

html[data-theme="dark"] .bg-gray-50 {
  background-color: #0b1220;
}

html[data-theme="dark"] .bg-gray-100 {
  background-color: #0f172a;
}

html[data-theme="dark"] .bg-gray-200 {
  background-color: #111827;
}

html[data-theme="dark"] .bg-gray-300 {
  background-color: #1f2937;
}

html[data-theme="dark"] .border-gray-200 {
  border-color: #1f2937;
}

html[data-theme="dark"] .border-gray-300 {
  border-color: #334155;
}

html[data-theme="dark"] .border-gray-400 {
  border-color: #475569;
}

html[data-theme="dark"] .text-gray-900 {
  color: #f8fafc;
}

html[data-theme="dark"] .text-gray-800 {
  color: #e2e8f0;
}

html[data-theme="dark"] .text-gray-700 {
  color: #cbd5e1;
}

html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500 {
  color: #94a3b8;
}

html[data-theme="dark"] .text-gray-400 {
  color: #64748b;
}

html[data-theme="dark"] .text-gray-300 {
  color: #475569;
}

html[data-theme="dark"] .placeholder-gray-400::placeholder {
  color: #64748b;
}

html[data-theme="dark"] .placeholder-gray-500::placeholder {
  color: #64748b;
}

html[data-theme="dark"] .text-black {
  color: #f8fafc;
}

/* Bright informational callouts built with Tailwind blue/yellow utilities. */
html[data-theme="dark"] .bg-blue-50 {
  background-color: #0b1f3a;
}

html[data-theme="dark"] .bg-blue-100 {
  background-color: #0b2a4f;
}

html[data-theme="dark"] .border-blue-200 {
  border-color: #1e3a8a;
}

html[data-theme="dark"] .border-blue-100 {
  border-color: #1e3a8a;
}

html[data-theme="dark"] .text-blue-900 {
  color: #dbeafe;
}

html[data-theme="dark"] .text-blue-800 {
  color: #bfdbfe;
}

html[data-theme="dark"] .text-blue-700 {
  color: #93c5fd;
}

html[data-theme="dark"] .text-blue-600 {
  color: #60a5fa;
}

html[data-theme="dark"] .text-blue-500,
html[data-theme="dark"] .text-blue-400 {
  color: #93c5fd;
}

html[data-theme="dark"] .bg-yellow-50 {
  background-color: #231a07;
}

html[data-theme="dark"] .border-yellow-400 {
  border-color: #b45309;
}

html[data-theme="dark"] .text-yellow-800 {
  color: #fef3c7;
}

html[data-theme="dark"] .text-yellow-700 {
  color: #fde68a;
}

html[data-theme="dark"] .text-yellow-400 {
  color: #fbbf24;
}

html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .hover\\:bg-gray-50:hover {
  background-color: #111827;
}

html[data-theme="dark"] .hover\\:bg-gray-200:hover {
  background-color: #1f2937;
}

html[data-theme="dark"] .hover\\:text-gray-700:hover {
  color: #e2e8f0;
}

/* Ensure any leftover light-only hover utilities don't flash white in dark mode. */
html[data-theme="dark"] .hover\\:bg-white:hover,
html.dark .hover\\:bg-white:hover,
.dark .hover\\:bg-white:hover {
  background-color: color-mix(in oklab, var(--color-base-300) 35%, transparent) !important;
}

html[data-theme="dark"] .hm-customer-card:hover {
  background-color: color-mix(in oklab, var(--color-base-300) 35%, transparent) !important;
}

html.dark .hm-customer-card:hover,
.dark .hm-customer-card:hover {
  background-color: color-mix(in oklab, var(--color-base-300) 35%, transparent) !important;
}

html.dark .hover\\:bg-base-200\\/60:hover,
.dark .hover\\:bg-base-200\\/60:hover {
  background-color: color-mix(in oklab, var(--color-base-300) 35%, transparent) !important;
}