<!-- Modal Voir Détail Demande Document -->
<div class="modal-overlay" id="detailModal">
    <div class="modal-content modal-large">
        <div class="modal-header">
            <h2>Détails de la Demande</h2>
            <button type="button" class="modal-close" onclick="closeDetailModal()">&times;</button>
        </div>

        <div class="modal-body" id="detailContent">
            <!-- Le contenu sera injecté par JavaScript -->
        </div>

        <div class="modal-footer" style="display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;">
            
            <!-- هنا غادي يتحطو أزرار تغيير الحالة -->
            <div id="detailEtatActions"></div>

            <div style="display:flex; gap:10px;">
                <!-- زر التعديل من داخل modal -->
                <button type="button" class="btn btn-warning" id="editFromDetailBtn" onclick="editFromDetail()" style="display:none;">
                    <i class="fas fa-edit"></i> Modifier
                </button>

                <button type="button" class="btn btn-secondary" onclick="closeDetailModal()">
                    <i class="fas fa-times"></i> Fermer
                </button>
            </div>
        </div>
    </div>
</div>