/* school.css - Styles for isolated School Attendance Module */

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #475569;
}

/* Badge variants */
.badge {
    @apply px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border;
}

.badge-present {
    @apply bg-green-50 text-green-700 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800;
}

.badge-absent {
    @apply bg-red-50 text-red-700 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800;
}

.badge-leave {
    @apply bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/20 dark:text-amber-400 dark:border-amber-800;
}

.badge-holiday {
    @apply bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/20 dark:text-purple-400 dark:border-purple-800;
}

/* Calendar Grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background-color: #e2e8f0;
}

.dark .calendar-grid {
    background-color: #334155;
}

.calendar-cell {
    @apply bg-white dark:bg-slate-800 min-h-[100px] p-2 flex flex-col relative;
}

.calendar-cell-other-month {
    @apply bg-slate-50 dark:bg-slate-900 text-slate-400 dark:text-slate-500;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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