/* Custom utilities complementing Tailwind */

.stat-card {
    @apply bg-white dark:bg-slate-800 p-5 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex flex-col gap-1;
}

.stat-label {
    @apply text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400;
}

.stat-value {
    @apply text-lg lg:text-xl font-mono font-bold text-slate-800 dark:text-slate-100;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
    display: flex !important;
    /* overrides hidden when active */
}

/* Base custom styles to ensure tailwind arbitrary values work smoothly with our script */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

@media (prefers-color-scheme: dark) {

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px #0f172a inset !important;
        -webkit-text-fill-color: white !important;
    }
}