/* Custom styles that extend Tailwind */
.calendar-day {
    @apply bg-white p-4 min-h-[120px] relative hover:bg-gray-50 transition;
}

.calendar-day.today {
    @apply bg-indigo-50 border-l-4 border-indigo-500;
}

.calendar-day.other-month {
    @apply text-gray-400;
}

.calendar-day-number {
    @apply font-bold text-gray-700 mb-1;
}

.today .calendar-day-number {
    @apply text-indigo-600;
}

/* Animation for calendar switch */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.calendar-animate {
    animation: fadeIn 0.3s ease-out forwards;
}