{{-- Global Toast (Alpine + Livewire dispatch) --}}
<div
    x-data="{
        show: false,
        type: 'success',
        message: '',
        timeout: null,
        open(t, m) {
            this.type = t || 'success';
            this.message = m || '';
            this.show = true;

            if (this.timeout) clearTimeout(this.timeout);
            this.timeout = setTimeout(() => this.show = false, 2600);
        }
    }"
    @toast.window="open($event.detail.type, $event.detail.message)"
    class="fixed top-4 right-4 z-[9999] pointer-events-none"
>
    <div
        x-show="show"
        x-transition.opacity.duration.150ms
        x-transition.scale.duration.150ms
        class="pointer-events-auto w-[340px] max-w-[90vw] rounded-2xl border px-4 py-3 shadow-lg bg-white"
        :class="type === 'success' ? 'border-gray-200' : 'border-red-200'"
    >
        <div class="flex items-start gap-3">
            <div class="mt-0.5">
                <div
                    class="h-2.5 w-2.5 rounded-full"
                    :class="type === 'success' ? 'bg-green-600' : 'bg-red-600'"
                ></div>
            </div>

            <div class="flex-1">
                <div class="text-sm font-semibold text-gray-900"
                     x-text="type === 'success' ? 'Operazione completata' : 'Attenzione'"></div>
                <div class="text-sm text-gray-700 mt-0.5" x-text="message"></div>
            </div>

            <button
                type="button"
                class="text-gray-400 hover:text-gray-600"
                @click="show = false"
                aria-label="Chiudi"
            >
                ✕
            </button>
        </div>
    </div>
</div>