{{-- Toast stack (aria-live). Fed by Livewire 'toast' events, session flashes and window.toast(). --}}
<div aria-live="polite" aria-atomic="false" class="pointer-events-none fixed inset-x-0 top-0 z-[60] flex flex-col items-center gap-2 px-4 pt-4 sm:items-end sm:pr-6 sm:pt-20">
    <template x-for="item in $store.toasts.items" :key="item.id">
        <div x-transition:enter="transform ease-out duration-200" x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4" x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
             class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-slate-900/10"
             :role="item.type === 'error' ? 'alert' : 'status'">
            <div class="flex items-start gap-3 p-4">
                <span class="mt-0.5 shrink-0" :class="{
                        'text-emerald-600': item.type === 'success',
                        'text-rose-600': item.type === 'error',
                        'text-amber-600': item.type === 'warning',
                        'text-sky-600': item.type === 'info' }">
                    <template x-if="item.type === 'success'"><x-icon name="check-circle" class="size-5" /></template>
                    <template x-if="item.type === 'error'"><x-icon name="x-circle" class="size-5" /></template>
                    <template x-if="item.type === 'warning'"><x-icon name="exclamation-triangle" class="size-5" /></template>
                    <template x-if="item.type === 'info'"><x-icon name="information-circle" class="size-5" /></template>
                </span>
                <div class="min-w-0 flex-1">
                    <p class="text-sm font-semibold text-slate-900"
                       x-text="{ success: 'Success', error: 'Error', warning: 'Attention', info: 'Notice' }[item.type] || 'Notice'"></p>
                    <p class="mt-0.5 text-sm text-slate-600" x-text="item.message"></p>
                </div>
                <button type="button" class="btn-icon -mr-1 -mt-1 size-7" x-on:click="$store.toasts.dismiss(item.id)">
                    <x-icon name="x-mark" class="size-4" /><span class="sr-only">Dismiss notification</span>
                </button>
            </div>
        </div>
    </template>
</div>

{{-- Session flash toast after a redirect. @js() safely encodes the message. --}}
@if (session()->has('toast'))
    <div x-data x-init="$store.toasts.push(@js(session('toast')))"></div>
@endif

{{-- Expired session (HTTP 419) dialog --}}
<div x-data="{ open: false }" x-on:session-expired.window="open = true" x-show="open" x-cloak
     class="fixed inset-0 z-[70] flex items-center justify-center bg-slate-900/50 p-4" role="alertdialog" aria-modal="true" aria-labelledby="session-expired-title">
    <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl" x-trap.inert="open">
        <div class="flex items-start gap-4">
            <span class="icon-tile tone-warning"><x-icon name="clock" class="size-5" /></span>
            <div>
                <h2 id="session-expired-title" class="text-base font-semibold text-slate-900">Your session has expired</h2>
                <p class="mt-1 text-sm text-slate-600">For your security, please reload the page and sign in again. Unsaved changes on this page will be lost.</p>
            </div>
        </div>
        <div class="mt-6 flex justify-end">
            <button type="button" class="btn btn-primary" x-on:click="window.location.reload()">Reload page</button>
        </div>
    </div>
</div>