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

@layer base {
    body {
        @apply bg-gray-50 font-sans text-slate-900 antialiased;
    }
}

@layer components {
    .card {
        @apply rounded-2xl border border-slate-200/80 bg-white shadow-card;
    }

    .card-header {
        @apply flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-4;
    }

    .page-title {
        @apply text-xl font-bold tracking-tight text-slate-900;
    }

    .page-sub {
        @apply mt-0.5 text-sm text-slate-500;
    }

    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl bg-gold-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm shadow-gold-600/20 transition-colors hover:bg-gold-600 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:ring-offset-2 active:bg-gold-700 disabled:pointer-events-none disabled:opacity-60;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl bg-navy-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm shadow-navy-600/20 transition-colors hover:bg-navy-600 focus:outline-none focus:ring-2 focus:ring-navy-500 focus:ring-offset-2 active:bg-navy-700 disabled:pointer-events-none disabled:opacity-60;
    }

    .btn-success {
        @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm shadow-emerald-600/20 transition-colors hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 active:bg-emerald-800 disabled:pointer-events-none disabled:opacity-60;
    }

    .btn-danger {
        @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl bg-rose-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm shadow-rose-600/20 transition-colors hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 active:bg-rose-800 disabled:pointer-events-none disabled:opacity-60;
    }

    .btn-teal {
        @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl bg-teal-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm shadow-teal-600/20 transition-colors hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 active:bg-teal-800 disabled:pointer-events-none disabled:opacity-60;
    }

    .btn-danger-ghost {
        @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl px-3.5 py-2 text-sm font-semibold text-rose-600 transition-colors hover:bg-rose-50 focus:outline-none disabled:pointer-events-none disabled:opacity-60;
    }

    .btn-sm {
        @apply px-3 py-2 text-xs;
    }

    .input {
        @apply block w-full rounded-xl border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-brand-500 focus:ring-brand-500;
    }

    .label {
        @apply mb-1.5 block text-sm font-medium text-slate-700;
    }

    .tbl-card {
        @apply overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-card;
    }

    .tbl-wrap {
        @apply overflow-x-auto;
    }

    .tbl {
        @apply min-w-full divide-y divide-slate-200 text-sm;
    }

    .tbl .col-actions {
        width: 100%;
        white-space: nowrap;
        text-align: right;
    }

    .tbody {
        @apply divide-y divide-slate-100;
    }

    .thead {
        @apply bg-slate-50/80;
    }

    .th {
        @apply whitespace-nowrap px-5 py-3.5 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500;
    }

    .td {
        @apply whitespace-nowrap px-5 py-3.5 align-middle;
    }

    .badge {
        @apply inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-medium ring-1 ring-inset;
    }

    .badge-green {
        @apply bg-emerald-50 text-emerald-700 ring-emerald-600/20;
    }

    .badge-red {
        @apply bg-rose-50 text-rose-700 ring-rose-600/20;
    }

    .badge-yellow {
        @apply bg-amber-50 text-amber-700 ring-amber-600/20;
    }

    .badge-blue {
        @apply bg-brand-50 text-brand-700 ring-brand-600/20;
    }

    .badge-purple {
        @apply bg-purple-50 text-purple-700 ring-purple-600/20;
    }

    .badge-gray {
        @apply bg-slate-100 text-slate-600 ring-slate-500/10;
    }

    .alert {
        @apply flex items-start gap-3 rounded-xl border px-4 py-3 text-sm;
    }

    .alert-success {
        @apply border-emerald-200 bg-emerald-50 text-emerald-800;
    }

    .alert-warning {
        @apply border-amber-200 bg-amber-50 text-amber-800;
    }

    .alert-error {
        @apply border-rose-200 bg-rose-50 text-rose-800;
    }

    .alert-info {
        @apply border-brand-200 bg-brand-50 text-brand-800;
    }

    .stat-card {
        @apply card flex items-center gap-3 p-4 sm:gap-4 sm:p-5;
    }

    .stat-icon {
        @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-xl sm:h-12 sm:w-12;
    }

    .pagination-links {
        @apply mt-2 flex items-center justify-between;
    }

    .link {
        @apply font-medium text-brand-600 hover:text-brand-700 hover:underline;
    }
}