/* Dark mode overrides - Make dark mode class-based instead of media-query-based */

/* DISABLE prefers-color-scheme dark mode when .dark class is NOT present */
@media (prefers-color-scheme: dark) {
  html:not(.dark) {
    color-scheme: light !important;
  }

  /* Use !important to override Tailwind's dark variants at every level */
  html:not(.dark) .dark\:bg-neutral-900\/70,
  html:not(.dark) .dark\:bg-neutral-950\/40,
  html:not(.dark) .dark\:bg-neutral-950,
  html:not(.dark) .dark\:bg-neutral-900,
  html:not(.dark) .dark\:bg-slate-950\/40,
  html:not(.dark) .dark\:bg-slate-950\/20,
  html:not(.dark) .dark\:bg-slate-950\/30,
  html:not(.dark) .dark\:bg-slate-900\/60,
  html:not(.dark) .dark\:bg-white\/10 {
    background-color: var(--color-white) !important;
  }

  html:not(.dark) .dark\:border-neutral-800\/70,
  html:not(.dark) .dark\:border-neutral-800\/60,
  html:not(.dark) .dark\:border-neutral-800\/50,
  html:not(.dark) .dark\:border-neutral-700,
  html:not(.dark) .dark\:border-slate-700\/60,
  html:not(.dark) .dark\:border-slate-800\/60,
  html:not(.dark) .dark\:border-slate-300 {
    border-color: var(--color-slate-200) !important;
  }

  html:not(.dark) .dark\:text-white,
  html:not(.dark) .dark\:text-slate-100,
  html:not(.dark) .dark\:text-slate-200,
  html:not(.dark) .dark\:text-slate-300,
  html:not(.dark) .dark\:text-slate-400,
  html:not(.dark) .dark\:text-slate-500 {
    color: var(--color-slate-900) !important;
  }

  html:not(.dark) .dark\:shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a) !important;
  }

  html:not(.dark) .dark\:shadow-black\/40 {
    --tw-shadow-color: #0000001a !important;
  }

  html:not(.dark) .dark\:shadow-black\/60 {
    --tw-shadow-color: #0000001a !important;
  }

  html:not(.dark) .dark\:divide-slate-800\/60 > * {
    border-color: var(--color-slate-200) !important;
  }

  html:not(.dark) .dark\:hover\:border-neutral-600\/40:hover {
    border-color: var(--color-slate-300) !important;
  }

  html:not(.dark) .dark\:hover\:bg-neutral-950\/60:hover {
    background-color: var(--color-slate-50) !important;
  }

  html:not(.dark) .dark\:hover\:text-slate-200:hover {
    color: var(--color-slate-700) !important;
  }
}

.dark {
  color-scheme: dark;
}

.dark .bg-white { background-color: var(--color-neutral-950); }
.dark .bg-slate-50 { background-color: var(--color-neutral-950); }
.dark .bg-slate-100 { background-color: var(--color-neutral-900); }
.dark .bg-slate-200 { background-color: var(--color-neutral-900); }
.dark .bg-gray-100 { background-color: var(--color-neutral-900); }

.dark .text-white { color: var(--color-white); }
.dark .text-slate-50 { color: var(--color-white); }
.dark .text-slate-100 { color: var(--color-slate-100); }
.dark .text-slate-200 { color: var(--color-slate-200); }
.dark .text-slate-200\/80 { color: color-mix(in oklab, var(--color-slate-200) 80%, transparent); }
.dark .text-slate-300 { color: var(--color-slate-300); }
.dark .text-slate-400 { color: var(--color-slate-400); }
.dark .text-slate-500 { color: var(--color-slate-500); }
.dark .text-slate-600 { color: var(--color-slate-400); }
.dark .text-slate-700 { color: var(--color-slate-300); }
.dark .text-slate-800 { color: var(--color-slate-300); }
.dark .text-slate-900 { color: var(--color-white); }

.dark .text-gray-500 { color: var(--color-gray-500); }
.dark .text-gray-700 { color: var(--color-gray-700); }
.dark .text-gray-900 { color: var(--color-gray-900); }

.dark .border-slate-100 { border-color: var(--color-neutral-800); }
.dark .border-slate-200 { border-color: var(--color-neutral-700); }
.dark .border-slate-200\/70 { border-color: color-mix(in oklab, var(--color-neutral-700) 70%, transparent); }
.dark .border-slate-300 { border-color: var(--color-neutral-700); }
.dark .border-slate-300\/70 { border-color: color-mix(in oklab, var(--color-neutral-700) 70%, transparent); }
.dark .border-slate-300\/80 { border-color: color-mix(in oklab, var(--color-neutral-700) 80%, transparent); }
.dark .border-slate-500 { border-color: var(--color-neutral-600); }
.dark .border-slate-600 { border-color: var(--color-neutral-600); }
.dark .border-slate-700 { border-color: var(--color-neutral-600); }
.dark .border-slate-900 { border-color: var(--color-neutral-800); }

.dark .shadow { --tw-shadow-color: #0006; }
.dark .shadow-sm { --tw-shadow-color: #0006; }
.dark .shadow-lg { --tw-shadow-color: #0006; }
.dark .shadow-xl { --tw-shadow-color: #0006; }

.dark .ring-slate-300\/40 { --tw-ring-color: color-mix(in oklab, var(--color-neutral-600) 40%, transparent); }
.dark .ring-slate-400\/30 { --tw-ring-color: color-mix(in oklab, var(--color-neutral-600) 30%, transparent); }
.dark .ring-slate-500\/40 { --tw-ring-color: color-mix(in oklab, var(--color-neutral-600) 40%, transparent); }
.dark .ring-slate-600\/20 { --tw-ring-color: color-mix(in oklab, var(--color-neutral-600) 20%, transparent); }

/* Button and input states */
.dark .hover\:bg-slate-50:hover { background-color: var(--color-neutral-900); }
.dark .hover\:bg-slate-100:hover { background-color: var(--color-neutral-800); }
.dark .hover\:bg-slate-200:hover { background-color: var(--color-neutral-700); }
.dark .hover\:text-slate-700:hover { color: var(--color-slate-300); }
.dark .hover\:text-slate-800:hover { color: var(--color-slate-300); }
.dark .hover\:text-slate-900:hover { color: var(--color-slate-100); }

/* Backgrounds with opacity */
.dark .bg-slate-50\/70 { background-color: color-mix(in oklab, var(--color-neutral-950) 70%, transparent); }
.dark .bg-slate-50\/80 { background-color: color-mix(in oklab, var(--color-neutral-950) 80%, transparent); }
.dark .bg-slate-500\/20 { background-color: color-mix(in oklab, var(--color-neutral-600) 20%, transparent); }
.dark .bg-slate-500\/30 { background-color: color-mix(in oklab, var(--color-neutral-600) 30%, transparent); }
.dark .bg-slate-700\/30 { background-color: color-mix(in oklab, var(--color-neutral-800) 30%, transparent); }
.dark .bg-white\/10 { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); }

/* Dividers */
.dark .divide-slate-200 > :not(:last-child) { border-color: var(--color-neutral-700); }
.dark .divide-slate-200\/70 > :not(:last-child) { border-color: color-mix(in oklab, var(--color-neutral-700) 70%, transparent); }
.dark .divide-slate-700 > :not(:last-child) { border-color: var(--color-neutral-600); }
.dark .divide-slate-800\/50 > :not(:last-child) { border-color: color-mix(in oklab, var(--color-neutral-700) 50%, transparent); }
.dark .divide-slate-800\/60 > :not(:last-child) { border-color: color-mix(in oklab, var(--color-neutral-700) 60%, transparent); }

/* Gradients */
.dark .from-white { --tw-gradient-from: color-mix(in oklab, var(--color-neutral-900) 40%, transparent); }
.dark .from-slate-100 { --tw-gradient-from: color-mix(in oklab, var(--color-neutral-900) 40%, transparent); }
.dark .via-slate-900 { --tw-gradient-via: var(--color-neutral-950); }
.dark .to-slate-50 { --tw-gradient-to: var(--color-black); }

/* Focus states */
.dark .focus\:border-indigo-300:focus { border-color: var(--color-indigo-300); }
.dark .focus\:ring-indigo-500:focus { --tw-ring-color: var(--color-indigo-500); }

/* Placeholder text */
.dark .placeholder\:text-slate-400::placeholder { color: var(--color-slate-400); }