{# templates/admin_modals/sys_confirm_modal.html #}
<div id="confirm-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition z-[99]"></div>
    <div
        class="modal-content glass-modal modal-radius-lg shadow-3xl p-8 w-full max-w-sm border border-white/10 modal-content-transition relative z-[100]">
        <div class="flex flex-col items-center text-center">
            <div class="p-4 bg-yellow-500/10 rounded-2xl border border-yellow-500/20 mb-6">
                <i id="confirm-modal-icon" data-lucide="alert-triangle" class="h-8 w-8 text-yellow-500"></i>
            </div>
            <h3 id="confirm-modal-title" class="text-xl font-bold mb-3 text-white">System Confirmation</h3>
            <p id="confirm-modal-message" class="text-sm text-zinc-500 leading-relaxed"></p>
        </div>
        <div class="mt-8 flex gap-3">
            <button id="confirm-modal-cancel"
                class="flex-1 glass-button py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-zinc-400">Abort</button>
            <button id="confirm-modal-confirm"
                class="flex-1 bg-yellow-600 hover:bg-yellow-500 text-white py-3 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all">Proceed</button>
        </div>
    </div>
</div>