/* CalendarGrid — appointment cards + day-cell scrollbars.
   Already uses plain .dark (correct) — kept as-is. .line-clamp-2 (identical to Tailwind's
   utility) is scoped under .calendar-grid so it no longer overrides the global utility. */
.calendar-appointment-card {
    transform-origin: center;
}

.calendar-grid .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smooth scrollbar styling for day cells */
.calendar-day-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.calendar-day-scroll::-webkit-scrollbar {
    width: 6px;
}

.calendar-day-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.calendar-day-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

.calendar-day-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.7);
}

/* Dark mode scrollbar */
.dark .calendar-day-scroll {
    scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
}

.dark .calendar-day-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.5);
}

.dark .calendar-day-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(75, 85, 99, 0.7);
}