/* GEMTS — consistent modal forms (Student, Supervisor, Custodian, Admin) */
.modal,
.modal.fade,
.modal.fade.in,
div[id^="modal"],
div[id*="Modal"] {
  box-sizing: border-box;
}

/* Overlay-style modals (custom) */
.modal[style*="position:fixed"],
.modal.gemts-open {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  background: rgba(15, 23, 42, 0.5) !important;
  overflow-y: auto !important;
  padding: 16px !important;
}

/* Bootstrap-like student modals when shown */
.modal.show,
.modal.in.gemts-open,
#modal1.gemts-open,
#modal4.gemts-open {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  background: rgba(15, 23, 42, 0.5) !important;
  overflow-y: auto !important;
  padding: 16px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.modal .modal-dialog,
.modal-dialog {
  position: relative !important;
  margin: 4vh auto !important;
  max-width: 560px !important;
  width: 94% !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
}

.modal .modal-content,
.modal-content {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 0 !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  color: #0f172a !important;
}

.modal .modal-header,
.modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  border-radius: 12px 12px 0 0 !important;
  position: relative !important;
}

.modal .modal-header h1,
.modal .modal-header h2,
.modal .modal-header h3,
.modal .modal-header h4,
.modal .modal-title {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.modal .modal-body,
.modal-body,
.modal .modal-form,
.modal form.modal-form {
  display: block !important;
  padding: 16px 18px 20px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.modal .form-group,
.modal-form .form-group,
.modal .form-row {
  display: block !important;
  margin: 0 0 14px !important;
  visibility: visible !important;
}

.modal label,
.modal .form-group label,
.modal-form label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: normal !important;
}

.modal input[type="text"],
.modal input[type="number"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="date"],
.modal input:not([type]),
.modal select,
.modal textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #0f172a !important;
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 40px !important;
}

.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  outline: 2px solid #0f766e !important;
  border-color: #0f766e !important;
}

.modal textarea {
  min-height: 80px !important;
  resize: vertical !important;
}

.modal img,
.modal #myImage,
.modal .passport,
.modal img[id*="Image"],
.modal img[id*="photo"] {
  display: block !important;
  max-width: 160px !important;
  max-height: 180px !important;
  width: auto !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  margin-top: 6px !important;
  visibility: visible !important;
}

.modal .modal-footer,
.modal-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  padding: 12px 18px 16px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

.modal .btn,
.modal button:not(.nabteb-modal-close):not(.close-modal):not(.close) {
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

.nabteb-modal-close,
.modal .close-modal,
.modal button.close {
  position: absolute !important;
  right: 10px !important;
  top: 8px !important;
  border: none !important;
  background: transparent !important;
  font-size: 28px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  color: #475569 !important;
  z-index: 5 !important;
  padding: 4px 8px !important;
  min-width: 36px !important;
  min-height: 36px !important;
}

.modal iframe,
.modal #mapFrame,
.modal #mapFrame2 {
  display: block !important;
  width: 100% !important;
  min-height: 220px !important;
  height: 240px !important;
  max-height: 40vh !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #e8eef5 !important;
}

.modal p,
.modal .help-text,
.modal .w3-text-grey {
  color: #475569 !important;
  font-size: 13px !important;
  visibility: visible !important;
}

/* Offense booking / remarks cards inside pages (not only modals) */
#offenseBookingCard label,
.sup-actions + * label {
  font-weight: 600;
  color: #334155;
}

@media (max-width: 600px) {
  .modal .modal-dialog {
    width: 96% !important;
    margin: 2vh auto !important;
  }
  .modal .modal-header h2 {
    font-size: 1.05rem !important;
    padding-right: 36px !important;
  }
}

/* ========== GEMTS centred overlays (student exam + forms) ========== */
/* Force viewport-centred fixed overlays so sidebar / max-width layout cannot skew them */

.modal.gemts-open,
.modal.show,
#modal1.gemts-open,
#modal4.gemts-open,
#modal1.show,
#modal4.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 3000 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  overflow-y: auto !important;
  padding: 16px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

.modal.gemts-open > .modal-dialog,
.modal.show > .modal-dialog,
#modal1 > .modal-dialog,
#modal4 > .modal-dialog {
  position: relative !important;
  margin: auto !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  width: min(560px, 94vw) !important;
  max-width: 560px !important;
  float: none !important;
}

/* Exam instruction / quiz / result panels — centre on viewport */
.info_box.activeInfo,
.quiz_box.activeQuiz,
.result_box.activeResult {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
  margin: 0 !important;
  margin-left: 0 !important;
  z-index: 2500 !important;
  width: min(560px, 94vw) !important;
  max-width: 560px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28) !important;
  border-radius: 12px !important;
  background: #fff !important;
}

/* Hidden state for exam panels */
.info_box:not(.activeInfo),
.quiz_box:not(.activeQuiz),
.result_box:not(.activeResult) {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(0.92) !important;
}

/* Do not keep start_btn absolutely centred over the page */
.start_btn {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 12px 0 !important;
}

@media (max-width: 600px) {
  .info_box.activeInfo,
  .quiz_box.activeQuiz,
  .result_box.activeResult {
    width: 96vw !important;
    max-height: 92vh !important;
  }
}

/* ========== View Details + View Facilities: centred, 1/3 page ========== */
#modal1.gemts-open,
#modal1.show,
#modal1.in.gemts-open,
#modal4.gemts-open,
#modal4.show,
#modal4.in.gemts-open,
.modal.gemts-details-open,
.modal.gemts-facilities-open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 4000 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

#modal1.gemts-open > .modal-dialog,
#modal1.show > .modal-dialog,
#modal4.gemts-open > .modal-dialog,
#modal4.show > .modal-dialog,
.modal.gemts-details-open > .modal-dialog,
.modal.gemts-facilities-open > .modal-dialog {
  position: relative !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 33.333vw !important;
  height: 33.333vh !important;
  max-width: 33.333vw !important;
  max-height: 33.333vh !important;
  min-width: 280px !important;
  min-height: 200px !important;
  float: none !important;
  box-sizing: border-box !important;
}

#modal1 .modal-content,
#modal4 .modal-content,
.modal.gemts-details-open .modal-content,
.modal.gemts-facilities-open .modal-content {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 33.333vh !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28) !important;
  background: #fff !important;
}

#modal1 .modal-body,
#modal1 .modal-form,
#modal4 .modal-body,
#modal4 .modal-form {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  max-height: none !important;
  padding: 12px 14px !important;
}

#modal1 .modal-header,
#modal4 .modal-header {
  flex: 0 0 auto !important;
  padding: 10px 14px !important;
}

#modal1 iframe,
#modal4 iframe,
#modal1 #mapFrame2,
#modal4 #mapFrame2 {
  width: 100% !important;
  height: 100% !important;
  min-height: 120px !important;
  max-height: calc(33.333vh - 90px) !important;
}

@media (max-width: 720px) {
  #modal1.gemts-open > .modal-dialog,
  #modal4.gemts-open > .modal-dialog,
  #modal1.show > .modal-dialog,
  #modal4.show > .modal-dialog {
    width: 90vw !important;
    height: 40vh !important;
    max-width: 90vw !important;
    max-height: 40vh !important;
  }
  #modal1 .modal-content,
  #modal4 .modal-content {
    max-height: 40vh !important;
  }
}

/* ========== View Details / Facilities = exam instruction (info_box) look ========== */
.gemts-info-modal.gemts-open,
.gemts-info-modal.show,
#modal1.gemts-open,
#modal4.gemts-open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 4000 !important;
  background: rgba(15, 23, 42, 0.45) !important;
  margin: 0 !important;
  padding: 16px !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: auto !important;
}

/* Card matches .info_box (exam instructions) */
.gemts-info-modal .modal-dialog.gemts-info-card,
.gemts-info-modal .modal-dialog.info_box,
#modal1 .modal-dialog,
#modal4 .modal-dialog {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  width: min(540px, 94vw) !important;
  max-width: 540px !important;
  height: auto !important;
  max-height: min(80vh, 640px) !important;
  min-width: 280px !important;
  min-height: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: block !important;
}

.gemts-info-modal .modal-content {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) !important;
  border: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: auto !important;
  max-height: min(80vh, 640px) !important;
  display: flex !important;
  flex-direction: column !important;
}

.gemts-info-modal .info-title,
.gemts-info-modal .modal-header {
  height: auto !important;
  min-height: 52px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #1d3557 !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 12px 12px 0 0 !important;
  margin: 0 !important;
}

.gemts-info-modal .info-title span {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #1d3557 !important;
}

.gemts-info-modal .info-list,
.gemts-info-modal .modal-body {
  padding: 15px 24px 10px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

.gemts-info-modal .info,
.gemts-info-modal .form-group {
  margin: 8px 0 12px !important;
  font-size: 15px !important;
}

.gemts-info-modal label {
  display: block !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 4px !important;
  font-size: 14px !important;
}

.gemts-info-modal input[type="text"] {
  width: 100% !important;
  padding: 8px 10px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
}

.gemts-info-modal img#myImage {
  display: block !important;
  max-width: 140px !important;
  max-height: 160px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  object-fit: cover !important;
  margin-top: 6px !important;
}

.gemts-info-modal .buttons {
  height: auto !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 10px 20px 14px !important;
  float: none !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #fff !important;
  gap: 8px !important;
}

.gemts-info-modal .buttons button.quit,
.gemts-info-modal .buttons .nabteb-modal-close {
  margin: 0 !important;
  height: 40px !important;
  min-width: 100px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: none !important;
  border-radius: 8px !important;
  background: #1d3557 !important;
  color: #fff !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
}

.gemts-info-modal .buttons button.quit:hover {
  background: #0f2744 !important;
}

.gemts-info-modal .info-title .nabteb-modal-close,
.gemts-info-modal .modal-header .nabteb-modal-close {
  position: static !important;
  font-size: 26px !important;
  line-height: 1 !important;
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
  cursor: pointer !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 4px 8px !important;
}

.gemts-info-modal #mapFrame2,
.gemts-info-modal iframe {
  width: 100% !important;
  height: 220px !important;
  min-height: 180px !important;
  max-height: 36vh !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #e8eef5 !important;
  display: block !important;
}