@tailwind base;
@tailwind components;
@tailwind utilities;

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

@layer base {
    /*
     * Dark mode — champs de formulaire
     * Appliqué globalement pour couvrir tous les <input>, <select>, <textarea>
     * bruts qui n'utilisent pas le composant <x-text-input>.
     * La spécificité (.dark + élément) surpasse les resets de @tailwindcss/forms.
     */
    .dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]),
    .dark select,
    .dark textarea {
        background-color: theme('colors.gray.700');
        border-color: theme('colors.gray.600');
        color: theme('colors.gray.100');
    }

    .dark input::placeholder,
    .dark textarea::placeholder {
        color: theme('colors.gray.400');
    }

    /* Options du <select> natif (fond navigateur) */
    .dark select option {
        background-color: theme('colors.gray.700');
        color: theme('colors.gray.100');
    }
}