{{-- POST target must live outside x-teleport so Alpine $refs.taskDialogPostForm resolves on confirm. --}}
<form x-ref="taskDialogPostForm" method="post" action="#" class="hidden" data-turbo="false" aria-hidden="true">
    @csrf
</form>
<template x-teleport="body">
<div
    x-show="dq.open"
    x-cloak
    class="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-4 sm:p-6"
    role="dialog"
    aria-modal="true"
    @keydown.escape.window="dq.open && closeTaskDialog()"
>
    <div class="absolute inset-0 bg-[#0B1120]/50 backdrop-blur-[2px]" @click="closeTaskDialog()" aria-hidden="true"></div>
    <div
        class="relative w-full max-w-lg rounded-2xl border border-[#ECECEC] bg-white shadow-2xl shadow-[#012169]/10 max-h-[min(90vh,32rem)] flex flex-col"
        @click.stop
    >
        <div class="px-5 pt-5 pb-3 border-b border-[#ECECEC] shrink-0">
            <h2 id="task-dialog-title" class="text-lg font-bold text-[#012169]" x-text="dq.title"></h2>
            <p class="text-xs text-[#7B7B7B] mt-1" x-show="dq.taskTitle || dq.amountDisplay">
                <span class="font-mono text-[#4A4A4A]" x-text="dq.taskTitle"></span>
                <span x-show="dq.taskTitle && dq.amountDisplay"> · </span>
                <span class="font-semibold text-[#111] tabular-nums" x-text="dq.amountDisplay"></span>
            </p>
        </div>
        <div class="px-5 py-4 overflow-y-auto flex-1 space-y-3 text-sm text-[#4A4A4A] leading-relaxed">
            <p x-text="dq.lead"></p>
            <div class="rounded-xl border border-[#ECECEC] bg-[#FAFBFE] px-3 py-2.5 text-xs text-[#5A5A5A]" x-show="dq.taskSummary">
                <p class="font-semibold text-[#111] text-[11px] uppercase tracking-wide text-[#6F6F6F]">Task summary</p>
                <p class="mt-1" x-text="dq.taskSummary"></p>
                <p class="mt-2 text-[11px] text-[#7B7B7B]" x-show="dq.taskStatus">Status: <span class="font-mono" x-text="dq.taskStatus"></span></p>
            </div>
            <div class="rounded-xl border border-amber-100 bg-amber-50/90 px-3 py-2.5 text-xs text-amber-950 leading-relaxed" x-show="dq.steps">
                <p class="font-semibold text-amber-950">Process</p>
                <p class="mt-1" x-text="dq.steps"></p>
            </div>
        </div>
        <div class="px-5 py-4 border-t border-[#ECECEC] flex flex-wrap items-center justify-end gap-2 shrink-0 bg-[#FAFBFE]/80 rounded-b-2xl">
            <button type="button" class="h-9 px-4 rounded-lg border border-[#ECECEC] bg-white text-xs font-semibold text-[#012169] hover:bg-white" @click="closeTaskDialog()">Cancel</button>
            <button type="button" class="h-9 px-4 rounded-lg bg-[#012169] text-white text-xs font-semibold hover:bg-[#001550]" @click="confirmTaskDialog()" x-text="dq.confirmLabel"></button>
        </div>
    </div>
</div>
</template>