@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .btn-primary {
        @apply bg-primary hover:bg-red-600 text-white px-4 py-2 rounded-md font-medium text-sm transition-colors shadow-sm flex items-center justify-center gap-2;
    }

    .btn-secondary {
        @apply bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 px-4 py-2 rounded-md font-medium text-sm transition-colors flex items-center justify-center gap-2;
    }

    .cat-btn {
        @apply w-full text-left px-3 py-2 rounded-md text-sm font-medium text-slate-400 hover:text-slate-200 hover:bg-slate-800/50 transition-colors border border-transparent;
    }

    .cat-btn.active {
        @apply bg-slate-800/80 text-primary border-slate-700;
    }

    .tag-badge {
        @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-slate-800 text-slate-300 border border-slate-700 cursor-pointer hover:border-slate-500 transition-colors;
    }

    .tag-badge.active {
        @apply bg-primary/20 text-primary border-primary/50;
    }

    .form-input {
        @apply w-full bg-slate-900 border border-slate-700 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:border-primary transition-colors;
    }

    .modal {
        @apply fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex justify-center items-start pt-20 overflow-y-auto;
    }

    .modal-content {
        @apply bg-surface w-full max-w-lg rounded-xl shadow-2xl border border-slate-700/50 p-6 mb-20 transform transition-transform;
    }
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

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

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

/* Error Card Hover FX */
.error-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.error-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    /* Primary Red tint */
}