{{-- ── Toast CSS ── --}}
<style>
    .toast-container-custom {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 99999;
    }
    .custom-toast {
        display: none;
        align-items: center;
        gap: 15px;
        min-width: 300px;
        max-width: 380px;
        padding: 16px 18px;
        border-radius: 14px;
        color: #fff;
        font-family: 'Segoe UI', sans-serif;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        position: relative;
        overflow: hidden;
    }
    .toast-success { background: linear-gradient(135deg, #00c853, #43a047); }
    .toast-error   { background: linear-gradient(135deg, #ff5252, #d32f2f); }
    .toast-icon    { font-size: 22px; font-weight: bold; }
    .toast-content { flex: 1; }
    .toast-title   { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
    .toast-message { font-size: 13px; opacity: 0.9; }
    .toast-close {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }
    .toast-progress {
        position: absolute;
        bottom: 0; left: 0;
        height: 3px; width: 100%;
        background: rgba(255,255,255,0.6);
    }
    @keyframes slideIn {
        from { transform: translateX(120%); opacity: 0; }
        to   { transform: translateX(0);    opacity: 1; }
    }
    @keyframes fadeOut {
        to { opacity: 0; transform: translateX(120%); }
    }
    @keyframes progressBar {
        from { width: 100%; }
        to   { width: 0%;   }
    }
</style>

{{-- ── Toast HTML (for AJAX) ── --}}
<div class="toast-container-custom">
    <div id="liveToast" class="custom-toast">
        <div class="toast-icon"    id="toast_icon"></div>
        <div class="toast-content">
            <div class="toast-title"   id="toast_title"></div>
            <div class="toast-message" id="toast_message"></div>
        </div>
        <button class="toast-close" onclick="closeToast()">×</button>
        <div class="toast-progress" id="toast_progress"></div>
    </div>
</div>

{{-- ── Toast JS ── --}}
<script>
    function showToast(type, message) {
        const toast    = document.getElementById('liveToast');
        const icon     = document.getElementById('toast_icon');
        const title    = document.getElementById('toast_title');
        const msg      = document.getElementById('toast_message');
        const progress = document.getElementById('toast_progress');

        toast.classList.remove('toast-success', 'toast-error');
        if (type === 'success') {
            toast.classList.add('toast-success');
            icon.textContent  = '✓';
            title.textContent = 'Success';
        } else {
            toast.classList.add('toast-error');
            icon.textContent  = '⚠';
            title.textContent = 'Error';
        }

        msg.textContent          = message;
        toast.style.animation    = 'none';
        progress.style.animation = 'none';
        void toast.offsetWidth;

        toast.style.display      = 'flex';
        toast.style.animation    = 'slideIn 0.5s ease, fadeOut 0.5s ease 3s forwards';
        progress.style.animation = 'progressBar 3s linear forwards';

        clearTimeout(window._toastTimer);
        window._toastTimer = setTimeout(() => {
            toast.style.display = 'none';
        }, 3500);
    }

    function closeToast() {
        const toast = document.getElementById('liveToast');
        toast.style.animation = 'fadeOut 0.4s forwards';
        setTimeout(() => { toast.style.display = 'none'; }, 400);
    }

    {{-- ── For Form Submit Pages (session based) ── --}}
    @if(session('success') || session('error') || $errors->any())
    document.addEventListener('DOMContentLoaded', function () {
        showToast(
            '{{ session('success') ? 'success' : 'error' }}',
            '{{ session('success') ?? session('error') ?? $errors->first() }}'
        );
    });
    @endif
</script>