/* Custom styles complementing Tailwind */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.grade-A-plus { color: #16a34a; border-color: #16a34a; background: #f0fdf4; }
.grade-A { color: #22c55e; border-color: #22c55e; background: #f0fdf4; }
.grade-B { color: #eab308; border-color: #eab308; background: #fefce8; }
.grade-C { color: #f97316; border-color: #f97316; background: #fff7ed; }
.grade-D { color: #ef4444; border-color: #ef4444; background: #fef2f2; }
.grade-F { color: #b91c1c; border-color: #b91c1c; background: #fef2f2; }

.dark .grade-A-plus { color: #4ade80; border-color: #4ade80; background: rgba(22, 163, 74, 0.1); }
.dark .grade-A { color: #4ade80; border-color: #4ade80; background: rgba(34, 197, 94, 0.1); }
.dark .grade-B { color: #facc15; border-color: #facc15; background: rgba(234, 179, 8, 0.1); }
.dark .grade-C { color: #fb923c; border-color: #fb923c; background: rgba(249, 115, 22, 0.1); }
.dark .grade-D { color: #f87171; border-color: #f87171; background: rgba(239, 68, 68, 0.1); }
.dark .grade-F { color: #fca5a5; border-color: #fca5a5; background: rgba(185, 28, 28, 0.1); }