@theme {
    --color-primary: #1c6b9c;
    --color-primary-50:  #d7edf5;
    --color-primary-100: #C7E7F2;
    --color-primary-200: #9AC8D9;
    --color-primary-300: #22A6D6;
    --color-primary-400: #1C89B0;
    --color-primary-500: #1D8DB9;
    --color-primary-600: #1c6b9c;
    --color-primary-700: #185A85;
    --color-primary-800: #084F69;
    --color-primary-900: #0C394A;

    --color-tint:       #e08b2d;
    --color-tint-50:    #e08b2d;
    --color-tint-100:   #e08b2d;
    --color-tint-200:   #e08b2d;
    --color-tint-300:   #e08b2d;
    --color-tint-400:   #e08b2d;
    --color-tint-500:   #e08b2d;
    --color-tint-600:   #e08b2d;
    --color-tint-700:   #e08b2d;
    --color-tint-800:   #e08b2d;
    --color-tint-900:   #e08b2d;
}

@layer base {
    :root {
        --bg-body: theme('colors.gray.50');
    }

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

/* Typography */
@plugin "@tailwindcss/typography";

/* Forms */
@plugin "@tailwindcss/forms" {
    strategy: "class";
}

@layer base {
    [type="text"],
    [type="email"],
    [type="url"],
    [type="password"],
    [type="number"],
    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="search"],
    [type="tel"],
    [type="time"],
    [type="week"] {
        @apply form-input;
    }

    textarea {
        @apply form-textarea;
    }

    select {
        @apply form-select;
    }

    [multiple] {
        @apply form-multiselect;
    }

    [type="checkbox"] {
        @apply form-checkbox;
    }

    [type="radio"] {
        @apply form-radio;
    }
}

@layer base {
    /* Textual inputs, textarea and select */
    [type='text'],
    [type='email'],
    [type='url'],
    [type='password'],
    [type='number'],
    [type='date'],
    [type='datetime-local'],
    [type='month'],
    [type='search'],
    [type='tel'],
    [type='time'],
    [type='week'],
    [multiple],
    textarea,
    select {
        width: 100%;
        border-color: theme('colors.gray.300');
        border-radius: theme('borderRadius.md');
        font-size: theme('fontSize.sm');
        --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
        var(--tw-ring-shadow, 0 0 #0000),
        var(--tw-shadow);
    }

    /* Focus state */
    [type='text']:focus,
    [type='email']:focus,
    [type='url']:focus,
    [type='password']:focus,
    [type='number']:focus,
    [type='date']:focus,
    [type='datetime-local']:focus,
    [type='month']:focus,
    [type='search']:focus,
    [type='tel']:focus,
    [type='time']:focus,
    [type='week']:focus,
    [multiple]:focus,
    textarea:focus,
    select:focus {
        --tw-ring-color: theme('colors.primary.500');
        border-color: theme('colors.primary.500');
    }

    /* Disabled state */
    [type='text']:disabled,
    [type='email']:disabled,
    [type='url']:disabled,
    [type='password']:disabled,
    [type='number']:disabled,
    [type='date']:disabled,
    [type='datetime-local']:disabled,
    [type='month']:disabled,
    [type='search']:disabled,
    [type='tel']:disabled,
    [type='time']:disabled,
    [type='week']:disabled,
    [multiple]:disabled,
    textarea:disabled,
    select:disabled {
        opacity: .5;
    }

    /* Dark mode adjustments */
    @media (prefers-color-scheme: dark) {
        [type='text'],
        [type='email'],
        [type='url'],
        [type='password'],
        [type='number'],
        [type='date'],
        [type='datetime-local'],
        [type='month'],
        [type='search'],
        [type='tel'],
        [type='time'],
        [type='week'],
        [multiple],
        textarea,
        select {
            background-color: rgba(255, 255, 255, .05);
            border-color: rgba(255, 255, 255, .1);
            color: rgb(255, 255, 255);
        }
    }

    /* Checkbox & radio inputs — the single source of truth for check controls.
       16px box, gray-300 edge, brand-coloured check + focus ring, dark-aware.
       The Symfony form-theme checkbox_widget used to hand-roll
       `h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:…`;
       that is now the default here, so a bare <input type="checkbox"> and a
       form-rendered one look identical. Mirrors admin-bundle/assets/styles/base.css. */
    [type='checkbox'],
    [type='radio'] {
        border-color: theme('colors.gray.300');
        color: theme('colors.primary.600');
        height: theme('spacing.4');
        width: theme('spacing.4');
    }

    [type='checkbox']:focus,
    [type='radio']:focus {
        --tw-ring-color: theme('colors.primary.500');
    }

    /* Checkbox specific rounding */
    [type='checkbox'] {
        border-radius: theme('borderRadius.sm');
    }

    @media (prefers-color-scheme: dark) {
        [type='checkbox'],
        [type='radio'] {
            border-color: theme('colors.gray.700');
            background-color: theme('colors.gray.800');
        }

        [type='checkbox']:checked,
        [type='radio']:checked {
            border-color: theme('colors.primary.600');
            background-color: theme('colors.primary.600');
        }
    }
}

@layer base {
    /* Validation error state.
       The Symfony form theme appends `border-red-700` to invalid controls, but
       that utility isn't generated in the frontend build (it lives in a vendor
       template the content scanner doesn't read). Give the hook a real
       treatment here: 1px red border + ~3px light-red ring. */
    [type='text'].border-red-700,
    [type='email'].border-red-700,
    [type='url'].border-red-700,
    [type='password'].border-red-700,
    [type='number'].border-red-700,
    [type='date'].border-red-700,
    [type='datetime-local'].border-red-700,
    [type='month'].border-red-700,
    [type='search'].border-red-700,
    [type='tel'].border-red-700,
    [type='time'].border-red-700,
    [type='week'].border-red-700,
    [multiple].border-red-700,
    textarea.border-red-700,
    select.border-red-700 {
        border-color: theme('colors.red.500');
        box-shadow: 0 0 0 3px rgb(254 202 202 / 0.7);
    }

    [type='text'].border-red-700:focus,
    [type='email'].border-red-700:focus,
    [type='url'].border-red-700:focus,
    [type='password'].border-red-700:focus,
    [type='number'].border-red-700:focus,
    [type='date'].border-red-700:focus,
    [type='datetime-local'].border-red-700:focus,
    [type='month'].border-red-700:focus,
    [type='search'].border-red-700:focus,
    [type='tel'].border-red-700:focus,
    [type='time'].border-red-700:focus,
    [type='week'].border-red-700:focus,
    [multiple].border-red-700:focus,
    textarea.border-red-700:focus,
    select.border-red-700:focus {
        border-color: theme('colors.red.500');
        box-shadow: 0 0 0 3px rgb(252 165 165 / 0.85);
        outline: none;
    }
}

@layer base {
    /* Tailwind v4 no longer sets `cursor: pointer` on <button> — it follows the
       CSS spec default (`default`). Restore the pointer for every interactive
       control so buttons, ARIA buttons, toggle switches and disclosure summaries
       feel clickable. Disabled controls are excluded (they keep default/not-allowed),
       and any explicit cursor-* utility still wins (utilities layer > base). */
    button:not(:disabled),
    [role="button"]:not(:disabled),
    [role="switch"]:not(:disabled),
    summary {
        cursor: pointer;
    }
}