@import 'tailwindcss';

@source '../**/*.blade.php';
@source '../**/*.js';
@source '../../app/**/*.php';

/* Dark mode: <html class="dark">, set before paint by layouts/partials/head from the top-bar switch. */
@custom-variant dark (&:where(.dark, .dark *));

/* --brand is set at runtime from Settings → theme colour (see layouts/partials/head).
   --surface is the colour of cards, panels and inputs: white, or dark slate in dark mode. */
:root {
    --brand: #4f46e5;
    --surface: #fff;
}

@theme inline {
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', sans-serif;
}

/* Not inline: utilities read these variables, so dark mode can redefine them. */
@theme {
    --color-primary-50: color-mix(in oklab, var(--brand) 7%, white);
    --color-primary-100: color-mix(in oklab, var(--brand) 14%, white);
    --color-primary-200: color-mix(in oklab, var(--brand) 28%, white);
    --color-primary-300: color-mix(in oklab, var(--brand) 45%, white);
    --color-primary-500: color-mix(in oklab, var(--brand) 85%, white);
    --color-primary-600: var(--brand);
    --color-primary-700: color-mix(in oklab, var(--brand) 82%, black);
    --color-primary-800: color-mix(in oklab, var(--brand) 65%, black);
}

/*
 * Dark mode remaps the colour scales the app uses instead of adding dark: classes to every view:
 * light slate shades become dark ones and the reverse, light tints of the status colours become deep tones.
 * Screen only, so receipts, invoices and reports always print light.
 */
@media screen {
    html.dark {
        color-scheme: dark;
        /* slate: page 950, cards 900 (--surface), lines 700/800, text 200 to 50 */
        --color-slate-50: oklch(12.9% 0.042 264.695);
        --color-slate-100: oklch(27.9% 0.041 260.031);
        --color-slate-200: oklch(37.2% 0.044 257.287);
        --color-slate-300: oklch(44.6% 0.043 257.281);
        --color-slate-400: oklch(55.4% 0.046 257.417);
        --color-slate-500: oklch(70.4% 0.04 256.788);
        --color-slate-600: oklch(86.9% 0.022 252.894);
        --color-slate-700: oklch(92.9% 0.013 255.508);
        --color-slate-800: oklch(96.8% 0.007 247.896);
        --color-slate-900: oklch(98.4% 0.003 247.858);
        --color-slate-950: oklch(98.4% 0.003 247.858);
        /* rose: light tints and dark shades swap; 400-600 stay */
        --color-rose-50: oklch(27.1% 0.105 12.094);
        --color-rose-100: oklch(41% 0.159 10.272);
        --color-rose-200: oklch(45.5% 0.188 13.697);
        --color-rose-300: oklch(51.4% 0.222 16.935);
        --color-rose-700: oklch(81% 0.117 11.638);
        --color-rose-800: oklch(89.2% 0.058 10.001);
        --color-rose-900: oklch(94.1% 0.03 12.58);
        --color-rose-950: oklch(96.9% 0.015 12.422);
        /* emerald: light tints and dark shades swap; 400-600 stay */
        --color-emerald-50: oklch(26.2% 0.051 172.552);
        --color-emerald-100: oklch(37.8% 0.077 168.94);
        --color-emerald-200: oklch(43.2% 0.095 166.913);
        --color-emerald-300: oklch(50.8% 0.118 165.612);
        --color-emerald-700: oklch(84.5% 0.143 164.978);
        --color-emerald-800: oklch(90.5% 0.093 164.15);
        --color-emerald-900: oklch(95% 0.052 163.051);
        --color-emerald-950: oklch(97.9% 0.021 166.113);
        /* amber: light tints and dark shades swap; 400-600 stay */
        --color-amber-50: oklch(27.9% 0.077 45.635);
        --color-amber-100: oklch(41.4% 0.112 45.904);
        --color-amber-200: oklch(47.3% 0.137 46.201);
        --color-amber-300: oklch(55.5% 0.163 48.998);
        --color-amber-700: oklch(87.9% 0.169 91.605);
        --color-amber-800: oklch(92.4% 0.12 95.746);
        --color-amber-900: oklch(96.2% 0.059 95.617);
        --color-amber-950: oklch(98.7% 0.022 95.277);
        /* sky: light tints and dark shades swap; 400-600 stay */
        --color-sky-50: oklch(29.3% 0.066 243.157);
        --color-sky-100: oklch(39.1% 0.09 240.876);
        --color-sky-200: oklch(44.3% 0.11 240.79);
        --color-sky-300: oklch(50% 0.134 242.749);
        --color-sky-700: oklch(82.8% 0.111 230.318);
        --color-sky-800: oklch(90.1% 0.058 230.902);
        --color-sky-900: oklch(95.1% 0.026 236.824);
        --color-sky-950: oklch(97.7% 0.013 236.62);
        --surface: oklch(20.8% 0.042 265.755);
        --color-primary-50: color-mix(in oklab, var(--brand) 16%, #0f172a);
        --color-primary-100: color-mix(in oklab, var(--brand) 26%, #0f172a);
        --color-primary-200: color-mix(in oklab, var(--brand) 40%, #0f172a);
        --color-primary-300: color-mix(in oklab, var(--brand) 58%, #0f172a);
        --color-primary-700: color-mix(in oklab, var(--brand) 60%, white);
        --color-primary-800: color-mix(in oklab, var(--brand) 45%, white);
    }
}

@layer base {
    html { -webkit-tap-highlight-color: transparent; }
    body { @apply bg-slate-50 text-slate-700 antialiased; }
    [x-cloak], .hidden-init { display: none; }
    :focus-visible { @apply outline-2 outline-offset-2 outline-primary-500; }
}

@layer components {
    .btn { @apply inline-flex items-center justify-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium transition select-none whitespace-nowrap disabled:opacity-50 disabled:pointer-events-none cursor-pointer; }
    .btn-sm { @apply px-2.5 py-1.5 text-xs; }
    .btn-lg { @apply px-5 py-3 text-base; }
    .btn-primary { @apply bg-primary-600 text-white shadow-sm hover:bg-primary-700; }
    .btn-light { @apply bg-(--surface) text-slate-700 border border-slate-200 shadow-xs hover:bg-slate-50; }
    .btn-soft { @apply bg-primary-50 text-primary-700 hover:bg-primary-100; }
    .btn-danger { @apply bg-rose-600 text-white hover:bg-rose-700; }
    .btn-success { @apply bg-emerald-600 text-white hover:bg-emerald-700; }
    .btn-icon { @apply inline-flex size-8 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-800 transition cursor-pointer; }

    .label { @apply mb-1 block text-sm font-medium text-slate-700; }
    .input { @apply block w-full rounded-lg border border-slate-300 bg-(--surface) px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 shadow-xs focus:border-primary-500 focus:ring-3 focus:ring-primary-100 focus:outline-none disabled:bg-slate-100; }
    select.input { @apply pe-8; }
    .input-error { @apply border-rose-400 focus:border-rose-500 focus:ring-rose-100; }
    .field-error { @apply mt-1 text-xs text-rose-600; }
    .hint { @apply mt-1 text-xs text-slate-500; }
    .checkbox { @apply size-4 rounded border-slate-300 text-primary-600 accent-primary-600; }

    .card { @apply rounded-xl border border-slate-200 bg-(--surface) shadow-xs; }
    .card-header { @apply flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-3.5; }
    .card-title { @apply text-base font-semibold text-slate-800; }
    .card-body { @apply p-5; }

    .table { @apply w-full text-sm; }
    .table th { @apply bg-slate-50 px-4 py-2.5 text-start text-xs font-semibold uppercase tracking-wide text-slate-500 whitespace-nowrap; }
    .table td { @apply border-t border-slate-100 px-4 py-2.5 align-middle; }
    .table tbody tr:hover td { @apply bg-slate-50/60; }

    .badge { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap; }
    .badge-green { @apply bg-emerald-50 text-emerald-700; }
    .badge-red { @apply bg-rose-50 text-rose-700; }
    .badge-yellow { @apply bg-amber-50 text-amber-700; }
    .badge-blue { @apply bg-sky-50 text-sky-700; }
    .badge-gray { @apply bg-slate-100 text-slate-600; }
    .badge-primary { @apply bg-primary-50 text-primary-700; }

    .nav-link { @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition; }
    .nav-link.active { @apply bg-primary-50 text-primary-700; }
    .nav-group { @apply mt-5 mb-1 px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400; }

    .dropdown-menu { @apply absolute z-40 mt-2 min-w-48 rounded-xl border border-slate-200 bg-(--surface) p-1.5 shadow-lg; }
    .dropdown-item { @apply flex w-full items-center gap-2 rounded-lg px-3 py-2 text-start text-sm text-slate-700 hover:bg-slate-100 cursor-pointer; }

    /* autocomplete */
    .ac-menu { @apply absolute z-50 mt-1 max-h-80 w-full overflow-auto rounded-xl border border-slate-200 bg-(--surface) p-1 shadow-lg; }
    .ac-item { @apply flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm; }
    .ac-item.active, .ac-item:hover { @apply bg-primary-50; }
    .ac-empty { @apply px-3 py-2 text-sm text-slate-400; }
    .ac-group { @apply px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400; }

    .stat { @apply flex items-center gap-4 rounded-xl border border-slate-200 bg-(--surface) p-5 shadow-xs; }
    .stat-icon { @apply flex size-12 shrink-0 items-center justify-center rounded-xl; }
}

/* Receipts, invoices, labels */
@media print {
    .no-print { display: none !important; }
    body { background: white !important; }
    .print-area { box-shadow: none !important; border: 0 !important; margin: 0 !important; }
}