/*
 * The brand colour is not compiled in: the layout sets `--brand` on <html> from settings
 * and every `brand-*` utility derives from it via color-mix(), so rebranding needs no rebuild.
 */
@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../views/**/*.blade.php';
@source '../js/**/*.js';
@source '../../app/Support/AdminMenu.php';

/* Dark mode is toggled with a `.dark` class on <html> (saved in localStorage). */
@custom-variant dark (&:where(.dark, .dark *));

:root {
    --brand: #0f9d58;
}

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

    --color-brand-50: color-mix(in oklab, var(--brand) 7%, white);
    --color-brand-100: color-mix(in oklab, var(--brand) 15%, white);
    --color-brand-200: color-mix(in oklab, var(--brand) 30%, white);
    --color-brand-300: color-mix(in oklab, var(--brand) 50%, white);
    --color-brand-400: color-mix(in oklab, var(--brand) 75%, white);
    --color-brand-500: var(--brand);
    --color-brand-600: color-mix(in oklab, var(--brand) 88%, black);
    --color-brand-700: color-mix(in oklab, var(--brand) 75%, black);
    --color-brand-800: color-mix(in oklab, var(--brand) 60%, black);
    --color-brand-900: color-mix(in oklab, var(--brand) 45%, black);
}

@layer base {
    html {
        -webkit-font-smoothing: antialiased;
    }

    /* Scrollbars, date pickers and other native controls follow the panel's theme, not the system's. */
    html.dark {
        color-scheme: dark;
    }

    [x-cloak] {
        display: none !important;
    }

    /* Tailwind's img reset resizes Leaflet map tiles (visible seams). */
    .leaflet-container img {
        max-width: none;
        height: auto;
    }
}

@layer components {
    /* Form controls – used by the <x-admin.input/select/textarea> components. */
    .form-label {
        @apply mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300;
    }

    .form-control {
        @apply block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-xs
            placeholder:text-gray-400 focus:border-brand-500 focus:ring-3 focus:ring-brand-500/20 focus:outline-none
            dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500;
    }

    .form-error {
        @apply mt-1.5 text-sm text-red-600 dark:text-red-400;
    }

    .card {
        @apply rounded-xl border border-gray-200 bg-white shadow-xs dark:border-gray-800 dark:bg-gray-900;
    }

    /* Filter, section and language pills: .pill plus .pill-active or .pill-idle (light on hover, so its text turns black). */
    .pill {
        @apply rounded-lg px-3 py-1.5 text-sm font-medium;
    }

    .pill-active {
        @apply bg-brand-600 text-white;
    }

    .pill-idle {
        @apply bg-white text-gray-600 ring-1 ring-gray-200 hover:bg-gray-50 hover:text-gray-900
            dark:bg-gray-900 dark:text-gray-300 dark:ring-gray-800;
    }

    .table-base {
        @apply min-w-full divide-y divide-gray-200 text-sm dark:divide-gray-800;
    }

    .table-base th {
        @apply px-4 py-3 text-start text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400;
    }

    .table-base td {
        @apply px-4 py-3 whitespace-nowrap text-gray-700 dark:text-gray-300;
    }

    .table-base tbody tr {
        @apply hover:bg-gray-50 dark:hover:bg-gray-800/50;
    }
}