/* CLASS ON Testing - Custom Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --brand-primary: #4F46E5;
    --brand-dark: #0F172A;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #F8FAFC;
    color: #1E293B;
}

/* Custom Sleek Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* 25-50-25 Custom Column Heights for Desktop */
@media (min-width: 1024px) {
    .column-height {
        height: calc(100vh - 5.5rem);
    }
}

/* Badge styles */
.badge-ui {
    background-color: #EEF2FF;
    color: #4F46E5;
    border: 1px solid #C7D2FE;
}
.badge-code {
    background-color: #FFF1F2;
    color: #E11D48;
    border: 1px solid #FECDD3;
}
.badge-suggestion {
    background-color: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
}
.badge-other {
    background-color: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
}

/* Status Badges */
.status-pending {
    background-color: #FFFBEB;
    color: #D97706;
    border: 1px solid #FDE68A;
}
.status-open {
    background-color: #F0F9FF;
    color: #0284C7;
    border: 1px solid #BAE6FD;
}
.status-working {
    background-color: #FAF5FF;
    color: #9333EA;
    border: 1px solid #E9D5FF;
}
.status-in-future {
    background-color: #F0FDFA;
    color: #0D9488;
    border: 1px solid #99F6E4;
}
.status-rejected {
    background-color: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FECACA;
}

/* Leaderboard Highlight Ranks */
.rank-1-border {
    border-color: #F59E0B;
    box-shadow: 0 4px 20px -2px rgba(245, 158, 11, 0.2);
}
.rank-2-border {
    border-color: #94A3B8;
    box-shadow: 0 4px 15px -2px rgba(148, 163, 184, 0.2);
}
.rank-3-border {
    border-color: #D97706;
    box-shadow: 0 4px 15px -2px rgba(217, 119, 6, 0.15);
}

/* Animations */
@keyframes pulseSubtle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}
.pulse-indicator {
    animation: pulseSubtle 2s infinite ease-in-out;
}

/* Modal Transition */
.modal-backdrop {
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
}