/* Glassmorphism & Utilities */
.stat-card {
    @apply bg-slate-800 rounded-xl p-6 border border-slate-700 shadow-lg transition-all duration-300 hover:shadow-sky-500/10 hover:border-sky-500/30;
}

.input-field {
    @apply w-full bg-white border border-slate-300 rounded-lg px-4 py-2.5 text-black focus:ring-2 focus:ring-sky-500 focus:border-transparent outline-none transition-all placeholder:text-slate-500;
    color: #000000 !important;
    background-color: #ffffff !important;
}

.input-field::placeholder {
    color: #64748b !important;
    /* slate-500 */
    opacity: 1;
}

select.input-field option {
    background-color: #ffffff;
    color: #000000;
}

.btn-primary {
    @apply bg-sky-600 hover:bg-sky-500 text-white px-6 py-2.5 rounded-lg font-medium transition-all shadow-lg shadow-sky-500/20 flex items-center;
}

.btn-secondary {
    @apply bg-slate-700 hover:bg-slate-600 text-white px-6 py-2.5 rounded-lg font-medium transition-all border border-slate-600 flex items-center;
}

.nav-btn {
    @apply px-3 py-2 rounded-md text-sm font-medium text-slate-300 hover:text-white hover:bg-slate-700 transition-colors;
}

.nav-btn.active {
    @apply bg-sky-500/10 text-sky-400;
}

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

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

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

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}