@import 'tailwindcss';

@source '../views';

/* Class-based dark mode (toggled on <html>) */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    --color-brand-50: #eef4ff;
    --color-brand-100: #dbe6fe;
    --color-brand-200: #bfd3fe;
    --color-brand-300: #93b4fd;
    --color-brand-400: #608afa;
    --color-brand-500: #3b63f6;
    --color-brand-600: #2547ea;
    --color-brand-700: #1d38d7;
    --color-brand-800: #1e30ae;
    --color-brand-900: #1e2d89;
    --color-brand-950: #171e53;
}

@layer base {
    html { @apply antialiased; }
    body { @apply bg-slate-100 text-slate-800 dark:bg-slate-950 dark:text-slate-200; }
    [x-cloak] { display: none !important; }
}

@utility btn {
    @apply inline-flex items-center justify-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium transition
        focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2
        disabled:opacity-50 disabled:pointer-events-none;
}
@utility btn-primary { @apply btn bg-brand-600 text-white hover:bg-brand-700 shadow-sm; }
@utility btn-secondary {
    @apply btn bg-white text-slate-700 ring-1 ring-slate-300 hover:bg-slate-50
        dark:bg-slate-800 dark:text-slate-200 dark:ring-slate-600 dark:hover:bg-slate-700;
}
@utility btn-danger { @apply btn bg-rose-600 text-white hover:bg-rose-700 shadow-sm; }
@utility btn-ghost { @apply btn text-slate-600 hover:bg-slate-200/70 dark:text-slate-300 dark:hover:bg-slate-800; }

@utility card { @apply rounded-xl bg-white shadow-sm ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-800; }
@utility card-pad { @apply card p-5; }

@utility 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-300
        placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-brand-500
        dark:bg-slate-800 dark:text-slate-100 dark:ring-slate-600;
}
@utility label { @apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1; }
@utility help { @apply mt-1 text-xs text-slate-500 dark:text-slate-400; }
@utility error-text { @apply mt-1 text-xs text-rose-600 dark:text-rose-400; }

@utility table-wrap { @apply card overflow-x-auto; }

@utility badge { @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium; }
@utility badge-green { @apply badge bg-emerald-100 text-emerald-800 dark:bg-emerald-900/50 dark:text-emerald-300; }
@utility badge-red { @apply badge bg-rose-100 text-rose-800 dark:bg-rose-900/50 dark:text-rose-300; }
@utility badge-amber { @apply badge bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-300; }
@utility badge-blue { @apply badge bg-sky-100 text-sky-800 dark:bg-sky-900/50 dark:text-sky-300; }
@utility badge-gray { @apply badge bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300; }
@utility badge-purple { @apply badge bg-violet-100 text-violet-800 dark:bg-violet-900/50 dark:text-violet-300; }

@utility nav-link {
    @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-300
        hover:bg-slate-800 hover:text-white transition;
}
@utility nav-link-active { @apply bg-brand-600 text-white hover:bg-brand-600; }

@utility progress-track { @apply h-2 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700; }
@utility progress-bar { @apply h-full rounded-full bg-brand-500 transition-all duration-500; }

@layer components {
    .table { @apply min-w-full divide-y divide-slate-200 dark:divide-slate-800 text-sm; }
    .table thead th {
        @apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400
            bg-slate-50 dark:bg-slate-900/60 whitespace-nowrap;
    }
    .table tbody tr { @apply hover:bg-slate-50 dark:hover:bg-slate-800/50; }
    .table tbody td { @apply px-4 py-3 align-middle whitespace-nowrap; }
}