/* Keep the shared confirmation modal out of normal document flow until an action opens it. */
#globalConfirmModal {
  display: none;
}

/* #globalConfirmModal's only other styling came from page-scoped rules
   (principal_management_workspace_v3.css's `body.principal-edit-teacher-page
   > .modal-overlay`, profile_cropper.css's `#cropperModal.modal-overlay`) --
   nothing ever gave the *shared, cross-page* modal itself real overlay
   positioning. Outside those specific pages it just rendered as a plain
   in-flow block wherever it fell in the DOM (in practice, off-screen below
   the page's actual content), so showThemedConfirm() would flip its display
   to `flex` with no visible effect -- exactly what made the teacher grading
   CSV-upload confirmation (its only caller on this page) look like it
   silently did nothing. This is the base overlay this modal always needed;
   display:none above still fully suppresses it while closed, and the
   page-scoped rules' `!important` values still take over on the pages that
   declare them. */
#globalConfirmModal.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
  overflow: auto;
  background: rgba(15, 23, 42, .55);
}

/* Same gap as the overlay above: .modal-content-card also had no generic
   base anywhere, only a page-scoped rule elsewhere, so the confirm dialog's
   inner card rendered as unstyled text with the page bleeding through it. */
#globalConfirmModal.modal-overlay > .modal-content-card {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 24px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .35);
}