{# Confirm delete modal - reusable across admin pages #}
<div class="op-modal" id="confirm-delete-modal" hidden>
    <div class="op-modal-backdrop" data-close-modal="confirm-delete-modal"></div>
    <div class="op-modal-dialog">
        <div class="op-modal-header">
            <h4>Confirm Delete</h4>
            <button type="button" class="op-modal-close" data-close-modal="confirm-delete-modal">×</button>
        </div>
        <div class="op-modal-body">
            <p>Are you sure you want to delete <strong id="delete-item-name"></strong>? This action cannot be undone.</p>
        </div>
        <div class="op-modal-footer">
            <button type="button" class="op-btn op-btn-outline" data-close-modal="confirm-delete-modal">Cancel</button>
            <form method="POST" id="delete-form" class="op-inline">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="_method" value="DELETE">
                <button type="submit" class="op-btn op-btn-danger">Delete</button>
            </form>
        </div>
    </div>
</div>

{# View detail modal - quick view for transactions/invoices #}
<div class="op-modal" id="detail-modal" hidden>
    <div class="op-modal-backdrop" data-close-modal="detail-modal"></div>
    <div class="op-modal-dialog op-modal-lg">
        <div class="op-modal-header">
            <h4 id="detail-modal-title">Details</h4>
            <button type="button" class="op-modal-close" data-close-modal="detail-modal">×</button>
        </div>
        <div class="op-modal-body" id="detail-modal-content">
            <div class="op-loading">Loading...</div>
        </div>
    </div>
</div>
{# Custom Confirmation Modal #}
<div class="op-modal" id="confirm-modal" hidden>
    <div class="op-modal-backdrop" id="confirm-modal-backdrop"></div>
    <div class="op-modal-dialog">
        <div class="op-modal-header">
            <h4 id="confirm-modal-title">Confirmation</h4>
            <button type="button" class="op-modal-close" id="confirm-modal-close">&times;</button>
        </div>
        <div class="op-modal-body">
            <p id="confirm-modal-message">Are you sure you want to proceed?</p>
        </div>
        <div class="op-modal-footer">
            <button type="button" class="op-btn op-btn-outline" id="confirm-modal-cancel">Cancel</button>
            <button type="button" class="op-btn op-btn-primary" id="confirm-modal-submit">Confirm</button>
        </div>
    </div>
</div>