@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../views';

/* Safelist for dynamically-composed color utilities (badges, status dots, etc.) */
@source inline("{bg,text,ring,border}-{slate,sky,amber,rose,emerald,indigo,purple,teal,fuchsia}-{50,100,200,300,400,500,600,700}");

@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    --color-brand-50: #eef2ff;
    --color-brand-100: #e0e7ff;
    --color-brand-200: #c7d2fe;
    --color-brand-300: #a5b4fc;
    --color-brand-400: #818cf8;
    --color-brand-500: #6366f1;
    --color-brand-600: #4f46e5;
    --color-brand-700: #4338ca;
    --color-brand-800: #3730a3;
    --color-brand-900: #312e81;
}

@layer base {
    body {
        @apply bg-slate-50 text-slate-800 antialiased;
    }
}

@layer components {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-ghost,
    .btn-danger {
        @apply inline-flex items-center justify-center gap-2 rounded-lg px-3.5 py-2 text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/50 disabled:opacity-50 disabled:pointer-events-none;
    }
    .btn-primary {
        @apply bg-brand-600 text-white shadow-sm hover:bg-brand-700;
    }
    .btn-secondary {
        @apply bg-white text-slate-700 ring-1 ring-slate-200 hover:bg-slate-50;
    }
    .btn-ghost {
        @apply text-slate-600 hover:bg-slate-100;
    }
    .btn-danger {
        @apply bg-rose-600 text-white hover:bg-rose-700;
    }
    .input {
        @apply block w-full rounded-lg border-0 bg-white px-3 py-2 text-sm text-slate-900 ring-1 ring-inset ring-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-brand-500;
    }
    .label {
        @apply block text-sm font-medium text-slate-700 mb-1.5;
    }
    .card {
        @apply rounded-xl bg-white ring-1 ring-slate-200/70 shadow-sm;
    }
    .badge {
        @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium;
    }
}