@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

html, body, #root {
  height: 100%;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in { animation: fade-in 0.15s ease-out; }
.animate-slide-up { animation: slide-up 0.2s ease-out; }
.animate-scale-in { animation: scale-in 0.15s ease-out; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }

input[type="time"]::-webkit-calendar-picker-indicator {
  filter: var(--tw-brightness, );
}
