:root {
    /* Light Theme */
    --color-base: #f8fafc;
    /* slate-50 */
    --color-panel: #ffffff;
    --color-border: #e2e8f0;
    /* slate-200 */
    --color-text: #0f172a;
    /* slate-900 */
    --color-muted: #64748b;
    /* slate-500 */

    --color-primary: #0ea5e9;
    /* sky-500 */
    --color-success: #22c55e;
    /* green-500 */
    --color-warning: #eab308;
    /* yellow-500 */
    --color-danger: #ef4444;
    /* red-500 */
}

.dark {
    /* Dark Theme */
    --color-base: #0f172a;
    /* slate-900 */
    --color-panel: #1e293b;
    /* slate-800 */
    --color-border: #334155;
    /* slate-700 */
    --color-text: #f8fafc;
    /* slate-50 */
    --color-muted: #94a3b8;
    /* slate-400 */

    --color-primary: #38bdf8;
    /* sky-400 */
    --color-success: #4ade80;
    /* green-400 */
    --color-warning: #facc15;
    /* yellow-400 */
    --color-danger: #f87171;
    /* red-400 */
}

/* Custom 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: 3px;
}

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

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

/* Glassmorphism utilities */
.glass-nav {
    background: rgba(var(--color-panel), 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.glass-blur {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Status Badges */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.badge-A-plus,
.badge-A {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-B {
    background: rgba(234, 179, 8, 0.15);
    color: var(--color-warning);
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.badge-F {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-Pending {
    background: rgba(148, 163, 184, 0.15);
    color: var(--color-muted);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Animations */
.animate-spin-slow {
    animation: spin 3s linear infinite;
}

@keyframes flash {

    0%,
    100% {
        background-color: transparent
    }

    50% {
        background-color: rgba(99, 102, 241, 0.1)
    }
}

.row-update {
    animation: flash 1.5s ease;
}