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

@layer components {
    /* ── Buttons ── */
    .btn {
        @apply inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-1;
    }
    .btn-primary {
        @apply btn bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm;
    }
    .btn-secondary {
        @apply btn bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 focus:ring-slate-300 shadow-sm;
    }
    .btn-danger {
        @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-sm;
    }
    .btn-success {
        @apply btn bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500 shadow-sm;
    }
    .btn-warning {
        @apply btn bg-amber-500 text-white hover:bg-amber-600 focus:ring-amber-400 shadow-sm;
    }
    .btn-sm {
        @apply px-3 py-1.5 text-xs;
    }

    /* ── Cards ── */
    .card {
        @apply bg-white rounded-2xl shadow-sm border border-slate-200;
    }
    .card-header {
        @apply px-6 py-4 border-b border-slate-100 flex items-center justify-between;
    }
    .card-body {
        @apply p-6;
    }

    /* ── Form controls ── */
    .form-label {
        @apply block text-sm font-medium text-slate-700 mb-1.5;
    }
    .form-input {
        @apply w-full border border-slate-300 rounded-lg px-3 py-2 text-sm text-slate-800
               focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400
               placeholder-slate-400 bg-white transition;
    }
    .form-select {
        @apply form-input cursor-pointer;
    }
    .form-textarea {
        @apply form-input resize-none;
    }
    .form-input-error {
        @apply border-red-400 focus:ring-red-400 focus:border-red-400;
    }

    /* ── Tables ── */
    .table-wrapper {
        @apply bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden;
    }
    .table-base {
        @apply min-w-full divide-y divide-slate-100 text-sm;
    }
    .table-base thead {
        @apply bg-slate-50;
    }
    .table-base th {
        @apply px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider;
    }
    .table-base td {
        @apply px-5 py-3.5 text-slate-700;
    }
    .table-base tbody tr {
        @apply hover:bg-slate-50 transition-colors;
    }

    /* ── Badges ── */
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
    }
    .badge-green  { @apply badge bg-emerald-100 text-emerald-700; }
    .badge-red    { @apply badge bg-red-100 text-red-700; }
    .badge-yellow { @apply badge bg-amber-100 text-amber-700; }
    .badge-blue   { @apply badge bg-blue-100 text-blue-700; }
    .badge-gray   { @apply badge bg-slate-100 text-slate-600; }
    .badge-violet { @apply badge bg-violet-100 text-violet-700; }
    .badge-orange { @apply badge bg-orange-100 text-orange-700; }

    /* ── Page header ── */
    .page-header {
        @apply flex items-center justify-between mb-6;
    }
    .page-title {
        @apply text-xl font-bold text-slate-800;
    }
    .page-subtitle {
        @apply text-sm text-slate-500 mt-0.5;
    }

    /* ── Section heading ── */
    .section-title {
        @apply text-base font-semibold text-slate-700 mb-4;
    }
}