@import 'tailwindcss';
@import 'tom-select/dist/css/tom-select.css';

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

@custom-variant dark (&:where(.dark, .dark *));

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

    /* Brand: Top Gear amber bulb + orange accent line */
    --color-brand-50: #fffbeb;
    --color-brand-100: #fef3c7;
    --color-brand-200: #fde68a;
    --color-brand-300: #fcd34d;
    --color-brand-400: #fbbf24;
    --color-brand-500: #f59e0b;
    --color-brand-600: #d97706;
    --color-brand-700: #b45309;
    --color-brand-800: #92400e;
    --color-brand-900: #78350f;

    --color-ink-50: #f8fafc;
    --color-ink-100: #f1f5f9;
    --color-ink-200: #e2e8f0;
    --color-ink-300: #cbd5e1;
    --color-ink-400: #94a3b8;
    --color-ink-500: #64748b;
    --color-ink-600: #475569;
    --color-ink-700: #334155;
    --color-ink-800: #1e293b;
    --color-ink-900: #0f172a;
    --color-ink-950: #0b1120;
}

@layer base {
    html { -webkit-font-smoothing: antialiased; }
    body { @apply bg-ink-50 text-ink-800 dark:bg-ink-950 dark:text-ink-200; }
    [x-cloak] { display: none !important; }
    ::selection { @apply bg-brand-200 text-ink-900; }
}

@layer components {
    /* ---------- Surfaces ---------- */
    .card { @apply rounded-2xl border border-ink-200/80 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.04)] dark:border-ink-800 dark:bg-ink-900; }
    .card-header { @apply flex flex-wrap items-center justify-between gap-3 border-b border-ink-100 px-5 py-4 dark:border-ink-800; }
    .card-title { @apply text-sm font-semibold text-ink-900 dark:text-white; }
    .card-body { @apply p-5; }

    /* ---------- Buttons ---------- */
    .btn { @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-medium whitespace-nowrap transition focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:ring-offset-ink-900; }
    .btn-sm { @apply rounded-lg px-3 py-1.5 text-xs; }
    .btn-primary { @apply bg-ink-900 text-white shadow-sm hover:bg-ink-800 focus-visible:ring-ink-500 dark:bg-brand-500 dark:text-ink-950 dark:hover:bg-brand-400; }
    .btn-brand { @apply bg-brand-500 text-ink-950 shadow-sm hover:bg-brand-400 focus-visible:ring-brand-500; }
    .btn-secondary { @apply border border-ink-200 bg-white text-ink-700 shadow-sm hover:bg-ink-50 focus-visible:ring-ink-300 dark:border-ink-700 dark:bg-ink-800 dark:text-ink-200 dark:hover:bg-ink-700; }
    .btn-danger { @apply bg-rose-600 text-white shadow-sm hover:bg-rose-500 focus-visible:ring-rose-500; }
    .btn-success { @apply bg-emerald-600 text-white shadow-sm hover:bg-emerald-500 focus-visible:ring-emerald-500; }
    .btn-ghost { @apply text-ink-600 hover:bg-ink-100 hover:text-ink-900 dark:text-ink-300 dark:hover:bg-ink-800 dark:hover:text-white; }
    .btn-icon { @apply inline-flex h-8 w-8 items-center justify-center rounded-lg text-ink-500 transition hover:bg-ink-100 hover:text-ink-900 dark:hover:bg-ink-800 dark:hover:text-white; }

    /* ---------- Forms ---------- */
    .form-label { @apply mb-1.5 block text-xs font-medium tracking-wide text-ink-600 dark:text-ink-400; }
    .form-input { @apply block w-full rounded-xl border border-ink-200 bg-white px-3.5 py-2 text-sm text-ink-900 shadow-sm placeholder:text-ink-400 transition focus:border-brand-500 focus:ring-4 focus:ring-brand-500/15 focus:outline-none disabled:bg-ink-50 disabled:text-ink-500 dark:border-ink-700 dark:bg-ink-900 dark:text-ink-100 dark:focus:border-brand-400; }
    .form-input-sm { @apply rounded-lg px-2.5 py-1.5 text-xs; }
    .form-error { @apply mt-1 text-xs text-rose-600; }
    .form-hint { @apply mt-1 text-xs text-ink-500; }
    .form-checkbox { @apply h-4 w-4 rounded border-ink-300 text-brand-600 focus:ring-brand-500; accent-color: var(--color-brand-500); }

    /* ---------- Tables ---------- */
    .table-wrap { @apply overflow-x-auto; }
    .table { @apply min-w-full divide-y divide-ink-100 text-sm dark:divide-ink-800; }
    .table thead th { @apply sticky top-0 z-[1] bg-ink-50/90 px-4 py-3 text-left text-[11px] font-semibold tracking-wider whitespace-nowrap text-ink-500 uppercase backdrop-blur dark:bg-ink-900/90 dark:text-ink-400; }
    .table tbody td { @apply px-4 py-3 align-middle whitespace-nowrap text-ink-700 dark:text-ink-300; }
    .table tbody tr { @apply transition-colors hover:bg-brand-50/40 dark:hover:bg-ink-800/50; }
    .table-compact tbody td { @apply py-2; }

    /* ---------- Badges ---------- */
    .badge { @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-medium whitespace-nowrap ring-1 ring-inset; }
    .badge-gray { @apply bg-ink-100 text-ink-700 ring-ink-200 dark:bg-ink-800 dark:text-ink-300 dark:ring-ink-700; }
    .badge-green { @apply bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-500/10 dark:text-emerald-400; }
    .badge-red { @apply bg-rose-50 text-rose-700 ring-rose-600/20 dark:bg-rose-500/10 dark:text-rose-400; }
    .badge-amber { @apply bg-brand-50 text-brand-800 ring-brand-600/20 dark:bg-brand-500/10 dark:text-brand-300; }
    .badge-blue { @apply bg-sky-50 text-sky-700 ring-sky-600/20 dark:bg-sky-500/10 dark:text-sky-400; }
    .badge-violet { @apply bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-500/10 dark:text-violet-400; }

    /* ---------- Navigation ---------- */
    .nav-link { @apply flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium text-ink-400 transition hover:bg-white/5 hover:text-white; }
    .nav-link.active { @apply bg-brand-500/10 text-brand-300 ring-1 ring-brand-500/20; }
    .nav-section { @apply px-3 pt-5 pb-2 text-[10px] font-semibold tracking-[0.14em] text-ink-500 uppercase; }

    /* ---------- Tom Select theming ---------- */
    .ts-wrapper .ts-control { @apply min-h-[38px] rounded-xl border-ink-200 px-3 py-1.5 text-sm shadow-sm dark:border-ink-700 dark:bg-ink-900 dark:text-ink-100; }
    .ts-wrapper.focus .ts-control { @apply border-brand-500 ring-4 ring-brand-500/15; }
    .ts-dropdown { @apply rounded-xl border-ink-200 text-sm shadow-lg dark:border-ink-700 dark:bg-ink-900 dark:text-ink-100; }
    .ts-dropdown .active { @apply bg-brand-50 text-ink-900 dark:bg-ink-800 dark:text-white; }
    .ts-wrapper.multi .ts-control > div { @apply rounded-md bg-brand-100 text-brand-900; }
}