/* Standard CSS resets if needed, but Tailwind handles most */

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(59, 62, 70, 0.5);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #3b3e46;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

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

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

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

/* Utility classes for specific states without @apply (since no build step) */

/* Focus state for inputs - applied directly via CSS override or JS class logic */
/* Note: Since we can't use @apply, we rely on the Tailwind classes in HTML. 
   However, for .meta-orange we need standard CSS gradients. */

.meta-orange {
    background-image: linear-gradient(to right, #f6851b, #f8a34d);
    /* Fallback color */
    background-color: #f6851b;
}

.meta-orange-hover:hover {
    background-image: linear-gradient(to right, #e2761b, #df9245);
}