@layer components {

    /* ==========================
     * Labels / help / errors
     * ========================== */
    .form-label {
        @apply mb-1 block text-sm font-semibold text-slate-900;
    }

    .form-label-muted {
        @apply text-slate-700;
    }

    .form-required::after {
        content: " *";
        @apply text-rose-600;
    }

    .form-help {
        @apply mt-1 text-sm text-slate-600;
    }

    .form-hint {
        @apply text-xs text-slate-500;
    }

    .form-error {
        @apply mt-1 text-sm text-rose-700;
    }

    .form-success {
        @apply mt-1 text-sm text-emerald-700;
    }

    /* ==========================
     * Base input
     * ========================== */
    .form-control {
        @apply block w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-300 focus:border-slate-300 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500 read-only:bg-slate-50;
    }

    /* Textarea tweaks */
    textarea.form-control {
        @apply min-h-[110px] resize-y;
    }

    /* Select tweaks */
    select.form-control {
        @apply pe-10;
    }

    /* Sizes */
    .form-control-sm {
        @apply px-3 py-1.5 text-sm rounded-lg;
    }

    .form-control-lg {
        @apply px-4 py-3 text-base rounded-2xl;
    }

    /* ==========================
     * Validation states
     * ========================== */
    .is-invalid {
        @apply border-rose-300 focus:border-rose-300 focus:ring-rose-200;
    }

    .is-valid {
        @apply border-emerald-300 focus:border-emerald-300 focus:ring-emerald-200;
    }

    .is-warning {
        @apply border-amber-300 focus:border-amber-300 focus:ring-amber-200;
    }

    /* ==========================
     * Input group (prefix/suffix)
     * ========================== */
    .input-group {
        @apply flex w-full items-stretch overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm;
    }

    .input-group:focus-within {
        @apply ring-2 ring-slate-300 border-slate-300;
    }

    .input-group .form-control {
        @apply border-0 shadow-none focus:ring-0 rounded-none;
    }

    .input-addon {
        @apply inline-flex items-center gap-2 bg-slate-50 px-3 text-sm font-semibold text-slate-700;
    }

    .input-addon-muted {
        @apply font-medium text-slate-600;
    }

    .input-addon svg {
        @apply h-4 w-4;
    }

    /* ==========================
     * Input with icon (inside)
     * ========================== */
    .input-icon {
        @apply relative;
    }

    .input-icon-start {
        @apply absolute inset-y-0 start-0 flex items-center ps-3 text-slate-400;
    }

    .input-icon-end {
        @apply absolute inset-y-0 end-0 flex items-center pe-3 text-slate-400;
    }

    .input-icon .form-control {
        @apply ps-10;
    }

    .input-icon.has-end .form-control {
        @apply pe-10;
    }

    /* ==========================
     * Checkbox / radio
     * ========================== */
    .form-check {
        @apply flex items-start gap-3;
    }

    .form-check-input {
        @apply mt-1 h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-2 focus:ring-slate-300;
    }

    .form-radio-input {
        @apply mt-1 h-4 w-4 border-slate-300 text-slate-900 focus:ring-2 focus:ring-slate-300;
    }

    .form-check-label {
        @apply text-sm text-slate-800;
    }

    .form-check-help {
        @apply mt-1 text-sm text-slate-600;
    }

    /* ==========================
     * Switch
     * ========================== */
    .switch {
        @apply relative inline-flex h-6 w-11 items-center rounded-full bg-slate-200 transition;
    }

    .switch input {
        @apply sr-only;
    }

    .switch-dot {
        @apply inline-block h-5 w-5 translate-x-0 rounded-full bg-white shadow transition;
    }

    .switch input:checked+.switch-dot {
        @apply translate-x-5;
    }

    .switch input:checked~.switch-track {
        @apply bg-slate-900;
    }

    .switch-track {
        @apply absolute inset-0 rounded-full bg-slate-200;
    }

    /* ==========================
     * File input (simple)
     * ========================== */
    .form-file {
        @apply block w-full text-sm text-slate-700;
    }

    .form-file::file-selector-button {
        @apply me-3 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-900 hover:bg-slate-50 transition;
    }

    /* ==========================
     * Fieldset
     * ========================== */
    .form-fieldset {
        @apply rounded-2xl border border-slate-200 bg-white p-5;
    }

    .form-legend {
        @apply text-sm font-semibold text-slate-900;
    }

    /* ==========================
     * Row layout helpers
     * ========================== */
    .form-row {
        @apply grid gap-4 sm:grid-cols-2;
    }

    .form-row-3 {
        @apply grid gap-4 sm:grid-cols-3;
    }

    .form-actions {
        @apply flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-end;
    }
}