@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

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

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --color-zinc-50: #fafafa;
    --color-zinc-100: #f5f5f5;
    --color-zinc-200: #e5e5e5;
    --color-zinc-300: #d4d4d4;
    --color-zinc-400: #a3a3a3;
    --color-zinc-500: #737373;
    --color-zinc-600: #525252;
    --color-zinc-700: #404040;
    --color-zinc-800: #262626;
    --color-zinc-900: #171717;
    --color-zinc-950: #0a0a0a;

    --color-accent: var(--color-neutral-800);
    --color-accent-content: var(--color-neutral-800);
    --color-accent-foreground: var(--color-white);
}

@layer theme {
    .dark {
        --color-accent: var(--color-white);
        --color-accent-content: var(--color-white);
        --color-accent-foreground: var(--color-neutral-800);
    }
}

@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

[data-flux-field]:not(ui-radio, ui-checkbox) {
    @apply grid gap-2;
}

[data-flux-label] {
    @apply  !mb-0 !leading-tight;
}

input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}

/* \[:where(&)\]:size-4 {
    @apply size-4;
} */

@layer components {
    .admin-main {
        @apply relative overflow-hidden bg-zinc-100/80 p-0 dark:bg-zinc-950;
    }

    .admin-canvas {
        @apply relative min-h-full w-full overflow-hidden;
    }

    .admin-canvas-pattern {
        @apply pointer-events-none fixed inset-y-0 right-0 z-0 h-full w-[calc(100%-16rem)] stroke-zinc-900/10 dark:stroke-white/10;
    }

    .admin-page {
        @apply relative z-10 mx-auto flex min-h-full w-full max-w-[1800px] flex-col p-4 sm:p-6 lg:p-8;
    }

    /* Normalise the first page wrapper used across modules. */
    .admin-page > :where(div, main, section, article) {
        @apply w-full;
    }

    /* Page headings gain a consistent visual anchor without requiring view rewrites. */
    .admin-page :where(h1) {
        @apply tracking-tight text-zinc-950 dark:text-white;
    }

    .admin-page :where(h1:first-child),
    .admin-page :where(div > h1:first-child) {
        @apply relative;
    }

    .admin-page :where(h1:first-child)::after,
    .admin-page :where(div > h1:first-child)::after {
        content: '';
        @apply mt-3 block h-1 w-14 rounded-full bg-gradient-to-r from-blue-500 via-violet-500 to-fuchsia-500;
    }

    /* Shared surface treatment for cards, forms and data containers. */
    .admin-page :where(
        form[class*='rounded'],
        section[class*='rounded'],
        article[class*='rounded'],
        div[class*='rounded'][class*='border'],
        div[class*='overflow-hidden'][class*='border']
    ) {
        @apply border-zinc-200/80 bg-white/88 shadow-sm backdrop-blur-md dark:border-zinc-700/80 dark:bg-zinc-900/88;
    }

    /* Give card grids restrained colour and depth instead of flat white blocks. */
    .admin-page :where(.grid) > :where(
        div[class*='rounded'][class*='border'],
        section[class*='rounded'][class*='border'],
        article[class*='rounded'][class*='border']
    ) {
        @apply relative overflow-hidden;
    }

    .admin-page :where(.grid) > :where(
        div[class*='rounded'][class*='border'],
        section[class*='rounded'][class*='border'],
        article[class*='rounded'][class*='border']
    )::before {
        content: '';
        @apply absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-blue-500 via-violet-500 to-cyan-400 opacity-80;
    }

    .admin-page :where(.grid) > :where(
        div[class*='rounded'][class*='border'],
        section[class*='rounded'][class*='border'],
        article[class*='rounded'][class*='border']
    ):nth-child(3n + 2)::before {
        @apply from-emerald-500 via-teal-500 to-cyan-400;
    }

    .admin-page :where(.grid) > :where(
        div[class*='rounded'][class*='border'],
        section[class*='rounded'][class*='border'],
        article[class*='rounded'][class*='border']
    ):nth-child(3n)::before {
        @apply from-amber-400 via-orange-500 to-rose-500;
    }

    /* Tables use the same translucent surface and clearer hierarchy. */
    .admin-page table {
        @apply w-full text-zinc-700 dark:text-zinc-200;
    }

    .admin-page thead {
        @apply bg-gradient-to-r from-zinc-50/95 to-blue-50/70 text-zinc-700 dark:from-zinc-800/95 dark:to-blue-950/30 dark:text-zinc-200;
    }

    .admin-page tbody tr {
        @apply transition-colors hover:bg-blue-50/60 dark:hover:bg-blue-950/20;
    }

    .admin-page tbody tr + tr {
        @apply border-t border-zinc-200/70 dark:border-zinc-800;
    }

    /* Forms become visually consistent even where modules only supplied borders. */
    .admin-page form[class*='space-y'],
    .admin-page form[class*='rounded'] {
        @apply rounded-2xl border border-zinc-200/80 bg-white/90 p-5 shadow-sm backdrop-blur-md dark:border-zinc-700/80 dark:bg-zinc-900/90 sm:p-6;
    }

    .admin-page input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
    .admin-page textarea,
    .admin-page select {
        @apply bg-white/90 dark:bg-zinc-950/70;
    }

    /* Common success/error notices receive stronger colour and contrast. */
    .admin-page :where([class*='bg-green-50'], [class*='bg-emerald-50']) {
        @apply shadow-sm dark:border-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-200;
    }

    .admin-page :where([class*='bg-red-50']) {
        @apply shadow-sm dark:border-red-800 dark:bg-red-950/60 dark:text-red-200;
    }

    /* Pagination sits on the same design language as cards. */
    .admin-page nav[role='navigation'] {
        @apply rounded-xl bg-white/75 p-2 shadow-sm backdrop-blur dark:bg-zinc-900/75;
    }

    @media (max-width: 1023px) {
        .admin-canvas-pattern {
            @apply w-full;
        }
    }
}