/* ==========================================================================
   iPlus Madrasah - Bootstrap modals as app sheets on a phone

   The theme opens dozens of Bootstrap 5 modals for students (lesson Q&A,
   quiz start/submit, leaderboard, noticeboard, surveys, wait list...).
   Rewriting each one is not worth the risk; on a phone they all get the
   same coat as our own sheets instead: full screen, sliding up, a white
   header with a round close button on the left, a scrolling body, and a
   footer that sits above the home indicator. Small confirmations become a
   bottom sheet. Desktop keeps Bootstrap's centred dialog untouched.

   Loaded after ipm-ui.css by the theme header, and by the full-screen
   player layout (which does not load ipm-ui.css).
   ========================================================================== */

@media (max-width: 767.98px) {
  /* slide up instead of Bootstrap's drop-in */
  .modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  }
  .modal.show .modal-dialog { transform: none; }

  /* the dialog fills the screen */
  .modal .modal-dialog {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: stretch !important;
  }
  .modal .modal-content {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    background: #f7f5ef;
    font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
  }

  /* header: close on the left, title beside it - the same as our sheets */
  .modal .modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
    background: #fff;
    border-bottom: 1px solid #ece7d9 !important;
    border-radius: 0 !important;
  }
  .modal .modal-header > div { flex: 1 1 auto; min-width: 0; }
  .modal .modal-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #14261d !important;
    line-height: 1.25;
    margin: 0;
  }
  .modal .modal-header .btn-close,
  .modal .modal-header .close {
    order: -1;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: #f1eee6 !important;   /* kills Bootstrap's svg X */
    color: #14261d !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
  }
  .modal .modal-header .btn-close i,
  .modal .modal-header .close i {
    display: inline-block !important;
    font-size: 14px;
    line-height: 1;
    color: #14261d;
  }
  .modal .modal-header .btn-close:empty::before {
    /* a bare Bootstrap close button with no icon inside */
    content: "\00d7";
    font-size: 22px;
    line-height: 1;
  }

  /* body scrolls, footer stays */
  .modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom)) !important;
  }
  .modal .modal-footer {
    flex: 0 0 auto;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    background: #fff;
    border-top: 1px solid #ece7d9 !important;
    border-radius: 0 !important;
    gap: 8px;
  }
  .modal .modal-footer .mt-40,
  .modal .modal-footer .mt-30,
  .modal .modal-footer .mt-20 { margin-top: 0 !important; }
  .modal .modal-footer .theme_btn,
  .modal .modal-footer .theme_line_btn { min-height: 46px; }

  /* short confirmations: a bottom sheet, not a whole screen */
  #StartConfirmModal .modal-dialog,
  #submitConfirmModal .modal-dialog,
  #deleteComment .modal-dialog,
  .modal-dialog.modal-sm,
  .modal.ipm-bottom .modal-dialog {
    height: auto;
    min-height: 0;
    align-items: flex-end !important;
  }
  #StartConfirmModal .modal-content,
  #submitConfirmModal .modal-content,
  #deleteComment .modal-content,
  .modal-dialog.modal-sm .modal-content,
  .modal.ipm-bottom .modal-content {
    height: auto;
    min-height: 0;
    border-radius: 22px 22px 0 0 !important;
    background: #fff;
    padding-top: 6px;
  }
  #StartConfirmModal .modal-header,
  #submitConfirmModal .modal-header,
  #deleteComment .modal-header,
  .modal-dialog.modal-sm .modal-header,
  .modal.ipm-bottom .modal-header { border-bottom: 0 !important; padding-bottom: 4px !important; }
  #StartConfirmModal .modal-body,
  #submitConfirmModal .modal-body,
  #deleteComment .modal-body,
  .modal-dialog.modal-sm .modal-body,
  .modal.ipm-bottom .modal-body { padding: 8px 18px 6px !important; font-size: 15px; line-height: 1.6; }
  #StartConfirmModal .modal-footer,
  #submitConfirmModal .modal-footer,
  #deleteComment .modal-footer,
  .modal-dialog.modal-sm .modal-footer,
  .modal.ipm-bottom .modal-footer { border-top: 0 !important; }
  #StartConfirmModal .modal-footer .mt-40,
  #submitConfirmModal .modal-footer .mt-40 { display: flex; gap: 8px; width: 100%; }
  #StartConfirmModal .modal-footer .mt-40 > *,
  #submitConfirmModal .modal-footer .mt-40 > * { flex: 1 1 auto; }

  .modal-backdrop.show { opacity: .6; background-color: #091a12; }
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog { transition: none !important; }
}