<!-- Common reusable modals for all modules -->
<!-- Generic Bootstrap Message Modal -->
<div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="max-width:320px;">
    <div class="modal-content shadow" style="border-radius:1rem; background:#f8fafc;">
      <div class="modal-header py-2" id="messageModalHeader" style="background:#e9ecef; border-top-left-radius:1rem; border-top-right-radius:1rem; border-bottom:none;">
        <h5 class="modal-title w-100 text-center" id="messageModalLabel" style="width:100%;font-size:1.1em;"></h5>
        <button type="button" class="btn-close ms-2" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center py-3" id="messageModalBody" style="font-size:1em;"></div>
      <div class="modal-footer justify-content-center border-0 pt-0 pb-3" style="background:transparent;">
        <button type="button" class="btn btn-primary px-4" data-bs-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<!-- Generic Bootstrap Confirm Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmModalLabel">Confirm</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="confirmModalBody"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="confirmModalCancel">Cancel</button>
        <button type="button" class="btn btn-primary" id="confirmModalOk">OK</button>
      </div>
    </div>
  </div>
</div>

<style>
  #messageModal .modal-dialog {
    max-width: 320px;
    margin-top: 10vh;
  }

  #messageModal .modal-content {
    box-shadow: 0 8px 32px 0 rgba(60, 60, 90, 0.18), 0 1.5px 6px 0 rgba(0, 0, 0, 0.10);
    background: #f8fafc;
    border-radius: 1rem;
  }

  #messageModal .modal-header {
    background: #e9ecef !important;
    border-bottom: none;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }

  #messageModal .modal-footer {
    border-top: none;
    background: transparent;
  }

  #messageModal .modal-body {
    background: transparent;
  }
</style>