@import 'tailwindcss';

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

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

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --font-signature: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

    /* Brand — professional indigo */
    --color-brand-50: oklch(0.962 0.018 272.3);
    --color-brand-100: oklch(0.930 0.034 272.8);
    --color-brand-200: oklch(0.870 0.065 274.0);
    --color-brand-300: oklch(0.785 0.108 274.7);
    --color-brand-400: oklch(0.673 0.165 276.9);
    --color-brand-500: oklch(0.585 0.203 277.1);
    --color-brand-600: oklch(0.511 0.219 278.0);
    --color-brand-700: oklch(0.457 0.200 277.0);
    --color-brand-800: oklch(0.398 0.165 277.4);
    --color-brand-900: oklch(0.359 0.130 278.7);
    --color-brand-950: oklch(0.257 0.090 281.3);

    /* Field-type accents (used by the template builder + signing overlay) */
    --color-field-signature: oklch(0.55 0.22 277);
    --color-field-text: oklch(0.60 0.13 220);
    --color-field-date: oklch(0.62 0.17 150);
    --color-field-id_number: oklch(0.62 0.18 35);
    --color-field-file_upload: oklch(0.60 0.16 320);
    --color-field-checkbox: oklch(0.62 0.14 190);
    --color-field-label: oklch(0.55 0.02 260);
}

/*
| Reusable component classes. Each is self-contained — in Tailwind v4 @apply may
| only reference real utilities, not other custom classes, so we do not compose
| via @apply of `.btn`. The builder/signing overlay also builds class names
| dynamically in JS, which the content scanner cannot see, so those live here.
*/
@layer components {
    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-brand-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
    }
    .btn-secondary {
        @apply inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
    }
    .btn-ghost {
        @apply inline-flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 focus:outline-none disabled:opacity-50;
    }
    .btn-danger {
        @apply inline-flex items-center justify-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-red-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
    }

    .input {
        @apply block w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-brand-500 focus:ring-1 focus:ring-brand-500 disabled:bg-slate-50;
    }
    .label {
        @apply mb-1 block text-sm font-medium text-slate-700;
    }
    .card {
        @apply rounded-xl border border-slate-200 bg-white shadow-sm;
    }

    /* Template-builder field boxes — class is `field-box field-{type}`. */
    .field-box {
        @apply absolute box-border cursor-move rounded-sm border-2;
    }
    .field-box.selected {
        @apply ring-2 ring-brand-500 ring-offset-1;
    }
    .field-signature {
        border-color: var(--color-field-signature);
        background-color: color-mix(in oklch, var(--color-field-signature) 12%, transparent);
    }
    .field-text {
        border-color: var(--color-field-text);
        background-color: color-mix(in oklch, var(--color-field-text) 12%, transparent);
    }
    .field-date {
        border-color: var(--color-field-date);
        background-color: color-mix(in oklch, var(--color-field-date) 12%, transparent);
    }
    .field-id_number {
        border-color: var(--color-field-id_number);
        background-color: color-mix(in oklch, var(--color-field-id_number) 12%, transparent);
    }
    .field-file_upload {
        border-color: var(--color-field-file_upload);
        background-color: color-mix(in oklch, var(--color-field-file_upload) 12%, transparent);
    }
    .field-checkbox {
        border-color: var(--color-field-checkbox);
        background-color: color-mix(in oklch, var(--color-field-checkbox) 12%, transparent);
    }
    .field-label {
        border-color: var(--color-field-label);
        background-color: color-mix(in oklch, var(--color-field-label) 12%, transparent);
    }

    .resize-handle {
        @apply absolute h-2.5 w-2.5 rounded-full border border-white bg-brand-600;
    }
}