/* Walhalla Admin - Custom CSS */
/* Tailwind CSS is loaded via CDN script tag in development */
/* For production, compile Tailwind and replace this file */

/* Custom animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in-from-top-4 {
  from { transform: translateY(-1rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-in {
  animation: fade-in 0.3s ease-out, slide-in-from-top-4 0.3s ease-out;
}

/* HTMX loading indicator */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: flex;
}

/* Dark mode transition */
html {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

html.dark {
  color-scheme: dark;
}

/* Smooth color transitions for theme toggle */
body,
.bg-white,
.bg-gray-50,
.bg-gray-100,
.border-gray-200,
.text-gray-900 {
  transition: background-color 0.2s ease-in-out,
              border-color 0.2s ease-in-out,
              color 0.2s ease-in-out;
}

/* Dark mode scrollbar styling */
html.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dark ::-webkit-scrollbar-track {
  background: #1f2937;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}