[x-cloak] { display: none !important; }

/* Prevent blank toggle text before JS sync runs */
html[data-theme="light"] [data-theme-label]:empty::before {
  content: "Turn off the light";
}

html[data-theme="dark"] [data-theme-label]:empty::before {
  content: "Turn on the light";
}

html[data-theme="light"] [data-theme-icon="moon"] {
  display: block !important;
}

html[data-theme="dark"] [data-theme-icon="sun"] {
  display: block !important;
}

html.dark body {
  background-color: #020617;
  color: #e5e7eb;
}

html.dark .bg-white {
  background-color: #0f172a !important;
}

html.dark .bg-gray-50 {
  background-color: #172033 !important;
}

html.dark .bg-gray-100 {
  background-color: #1e293b !important;
}

html.dark .bg-dimma-bg {
  background: radial-gradient(circle at top, rgba(157, 14, 88, 0.2), transparent 40%), #020617 !important;
}

html.dark .bg-dimma-light {
  background-color: rgba(157, 14, 88, 0.18) !important;
}

html.dark .text-gray-900 {
  color: #f8fafc !important;
}

/* Ensure titles using Tailwind's text-black are readable in dark mode */
html.dark .text-black {
  color: #f8fafc !important;
}

/* Slightly brighten gray-800 text in dark mode for contrast */
html.dark .text-gray-800 {
  color: #e2e8f0 !important;
}

html.dark .text-gray-700 {
  color: #dbe4f0 !important;
}

html.dark .text-gray-600,
html.dark .text-gray-500 {
  color: #94a3b8 !important;
}

html.dark .border-gray-200,
html.dark .border-gray-100 {
  border-color: #334155 !important;
}

html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #334155 !important;
}

html.dark .hover\:bg-gray-50:hover {
  background-color: #1e293b !important;
}

html.dark .hover\:bg-gray-100:hover {
  background-color: #334155 !important;
}

html.dark .bg-black.bg-opacity-50 {
  background-color: rgba(2, 6, 23, 0.78) !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  background-color: #0f172a;
  color: #f8fafc;
  border-color: #334155;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8;
}

html.dark select option {
  background-color: #0f172a;
  color: #f8fafc;
}

html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-lg,
html.dark .shadow-xl {
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.45) !important;
}