/* 13. InviteForm Component */
.c-invite-form {
    @apply mt-8;

    .c-invite-form__card {
        @apply overflow-hidden;
        background-color: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);

        .c-invite-form__body {
            @apply p-6;
            color: var(--foreground);

            .c-invite-form__title {
                @apply text-lg font-medium;
            }

            .c-invite-form__form {
                @apply mt-6 space-y-6;

                .c-invite-form__field {
                    @apply block;

                    .c-invite-form__label {
                        @apply block text-sm font-medium;
                        color: var(--foreground);
                    }

                    .c-invite-form__input {
                        @apply mt-1 block w-full rounded-md border shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
                        border-color: var(--border);
                        background-color: var(--background);
                        color: var(--foreground);
                    }

                    .c-invite-form__select {
                        @apply mt-1 block w-full rounded-md border p-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
                        border-color: var(--border);
                        background-color: var(--background);
                        color: var(--foreground);
                    }

                    .c-invite-form__error {
                        @apply text-sm;
                        color: var(--destructive);
                    }
                }

                .c-invite-form__actions {
                    @apply flex items-center gap-4;

                    .c-invite-form__submit-btn {
                        @apply inline-flex items-center border border-transparent px-4 py-2 text-xs font-semibold tracking-widest uppercase transition duration-150 ease-in-out focus:ring-2 focus:outline-none;
                        border-radius: var(--radius);
                        background-color: var(--primary);
                        color: var(--primary-foreground);

                        &:hover {
                            opacity: 0.9;
                        }
                    }
                }
            }
        }
    }
}