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

@layer utilities {
    .sidebar-scroll {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    .sidebar-scroll::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-scroll::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 9999px;
    }
}

@layer components {
    .data-table {
        @apply min-w-full divide-y divide-violet-100;
    }

    .data-table thead {
        @apply bg-gradient-to-r from-violet-50 to-indigo-50;
    }

    .data-table th {
        @apply px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-violet-700;
    }

    .data-table td {
        @apply px-6 py-4 text-sm text-slate-600;
    }

    .data-table tbody {
        @apply divide-y divide-violet-50 bg-white;
    }

    .data-table tbody tr {
        @apply transition hover:bg-violet-50/50;
    }

    .form-card {
        @apply space-y-4 rounded-2xl border border-violet-100/80 bg-white p-6 shadow-sm shadow-violet-100/50;
    }

    .form-select {
        @apply mt-1 block w-full rounded-xl border-violet-200 bg-white shadow-sm transition focus:border-violet-500 focus:ring-violet-500;
    }

    .link-action {
        @apply font-medium text-violet-600 transition hover:text-violet-800;
    }

    .link-danger {
        @apply font-medium text-rose-600 transition hover:text-rose-800;
    }

    .badge-success {
        @apply rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-700;
    }

    .badge-danger {
        @apply rounded-full bg-rose-100 px-2.5 py-1 text-xs font-semibold text-rose-700;
    }

    .badge-warning {
        @apply rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-700;
    }

    .badge-neutral {
        @apply rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700;
    }
}