{{-- Layer toast global: dengarkan event browser 'toast' (dari trait Concerns\Toasts). --}}
<div x-data="{
        items: [],
        push(detail) {
            const id = Date.now() + Math.random();
            this.items.push({ id, type: detail.type || 'success', title: detail.title, message: detail.message });
            setTimeout(() => { this.items = this.items.filter(i => i.id !== id); }, detail.timeout || 3500);
        }
     }"
     x-on:toast.window="push($event.detail)"
     class="fixed top-4 right-4 z-[10000] w-80 max-w-[90vw] space-y-2">
    <template x-for="t in items" :key="t.id">
        <div x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 translate-x-4"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-end="opacity-0 translate-x-4"
             class="rounded-lg shadow-lg border px-4 py-3 flex items-start gap-3 bg-white dark:bg-card"
             :class="{
                'border-emerald-200 dark:border-emerald-500/30': t.type === 'success',
                'border-rose-200 dark:border-rose-500/30': t.type === 'error',
                'border-amber-200 dark:border-amber-500/30': t.type === 'warning',
             }">
            <span class="mt-0.5 w-2 h-2 rounded-full shrink-0"
                  :class="{
                    'bg-emerald-500': t.type === 'success',
                    'bg-rose-500': t.type === 'error',
                    'bg-amber-500': t.type === 'warning',
                  }"></span>
            <div class="min-w-0 flex-1">
                <p x-show="t.title" x-text="t.title" class="text-sm font-semibold text-foreground"></p>
                <p x-text="t.message" class="text-sm text-muted-foreground"></p>
            </div>
        </div>
    </template>
</div>