<!-- Reconcile Modal -->
<div class="modal fade" id="reconcileModal" tabindex="-1" aria-labelledby="reconcileLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-info text-white">
        <h5 class="modal-title"><i class="fas fa-balance-scale mr-2"></i>Bank Reconciliation</h5>
        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>Select transactions to mark as reconciled:</p>
        <table class="table table-bordered">
          <thead>
            <tr><th>Date</th><th>Description</th><th>Type</th><th>Amount</th><th>✔</th></tr>
          </thead>
          <tbody id="reconcileTableBody"></tbody>
        </table>
      </div>
      <div class="modal-footer bg-light">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
