/* MSM responsive layer — load after the existing theme and page styles.
   Desktop artwork, colours, typography and application states are preserved.
   No zoom/transform scaling; tables scroll inside their own containers. */

:is(#msmApp, #msmIndividualApp) .wrap {
  max-width: 1200px;
  grid-template-columns: var(--left-col) minmax(0, 1fr);
}
:is(#msmApp, #msmIndividualApp) :is(.right, .panel, .section, .flow-stage,
  .corporate-student-step, .corporate-student-section, .corporate-assignment-section,
  .corporate-payment-step, .individual-exam-shell, .msm-field, .msm-core) {
  min-width: 0;
}
:is(#msmApp, #msmIndividualApp) :is(.corporate-student-table-wrap,
  .corporate-assignment-table-wrap, .studentTableWrap, .msm-tableWrap) {
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
:is(#msmApp, #msmIndividualApp) :is(.msm-drawer, .individual-billing-drawer) {
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
:is(#msmApp, #msmIndividualApp) .msm-drawerBody {
  min-height: 0;
  overscroll-behavior: contain;
}
:is(#msmApp, #msmIndividualApp) .msm-drawerFoot {
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}
:is(#msmApp, #msmIndividualApp) :is(.msm-drawerTitle, .msm-modalTitleText,
  .corporate-bank-row b, .individual-billing-saved__body) {
  min-width: 0;
  overflow-wrap: anywhere;
}
:is(.msm-apply-modal__dialog, .msm-digital-modal__dialog, .flow-sms-modal__dialog) {
  box-sizing: border-box;
  max-width: calc(100% - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#msmApp .msm-excelPreviewModal .msm-modalPanel {
  max-width: calc(100vw - 28px) !important;
  max-height: calc(100vh - 28px) !important;
  max-height: calc(100dvh - 28px) !important;
  min-height: 0 !important;
}
#msmApp .msm-excelPreviewModal :is(.msm-modalBody, .msm-tableWrap) {
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Tablet: keep every step and action available in normal document flow. */
@media (max-width: 980px) {
  :is(#msmApp, #msmIndividualApp) .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(#msmApp, #msmIndividualApp) .wrap > .right { grid-column: 1; }
  :is(#msmApp, #msmIndividualApp) .wrap > .profile {
    position: relative !important;
    top: auto !important;
    left: auto;
    width: 100%;
    max-height: none;
  }
  #msmApp .profile-photo { height: 100px; }
  #msmApp .profile-photo img {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
  }
  #msmApp .profile-body { padding: 12px 16px; overflow: visible; }
  #msmApp .vstep {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
  }
  #msmApp .vstep::before { display: none; }
  :is(#msmApp, #msmIndividualApp) .vstep li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 6px;
    min-width: 0;
    min-height: 48px;
  }
  :is(#msmApp, #msmIndividualApp) .vstep .dot {
    position: relative;
    inset: auto;
    flex-shrink: 0;
  }
  :is(#msmApp, #msmIndividualApp) .vstep .lbl {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #msmApp .vstep .lbl b { font-size: 12px; }
  #msmApp .vstep .lbl span { font-size: 10px; }
  #msmApp .side-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #msmApp .side-actions .nav-btn {
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 10px;
    white-space: normal;
  }
  #msmApp .side-actions .btn-text { min-width: 0; }
}

/* A sidebar leaves less room than viewport breakpoints alone suggest. */
@media (min-width: 981px) and (max-width: 1199px) {
  #msmApp .corporate-exam-list { grid-template-columns: minmax(0, 1fr); }
  #msmIndividualApp .individual-exam-list { grid-template-columns: minmax(0, 1fr); }
  #msmIndividualApp .individual-exam-package-pricing { flex-wrap: wrap; gap: 10px; }
  #msmIndividualApp .individual-exam-package-pricing__items {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :is(#msmApp, #msmIndividualApp) :is(.corporate-student-head,
    .corporate-student-head__actions, .corporate-assignment-head,
    .corporate-assignment-head__actions) { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  :is(#msmApp, #msmIndividualApp) :is(.corporate-student-head__actions,
    .corporate-assignment-head__actions) { flex-wrap: wrap; max-width: 100%; }
  :is(#msmApp, #msmIndividualApp) :is(.corporate-student-search,
    .corporate-assignment-search) { min-width: 0; max-width: 100%; flex: 1 1 180px; }
  :is(#msmApp, #msmIndividualApp) :is(.corporate-student-search input,
    .corporate-assignment-search input) { min-width: 0; width: 100%; }
  #msmApp :is(.corporate-checkout-summary__head, .corporate-receipt-card__head,
    .corporate-bank-row--iban > div, .corporate-bank-row--recipient > div) {
    flex-wrap: wrap;
  }
  #msmApp :is(.corporate-bank-row b, .corporate-bank-row code) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #msmApp .corporate-student-step .summaryFormula { flex-wrap: wrap; }
  #msmIndividualApp :is(.individual-exam-intro, .individual-billing-summary__head,
    .individual-payment-summary__top, .guardian-details__heading) { flex-wrap: wrap; }
  #msmIndividualApp .individual-billing-summary__title { min-width: 0; }
}

@media (max-width: 640px) {
  :is(#msmApp, #msmIndividualApp) .wrap {
    --page-gutter: 12px;
    width: calc(100% - 24px);
    margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  #msmApp .panel > .section { padding: 20px 16px; }
  #msmApp .vstep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #msmApp .vstep .dot { width: 28px; height: 28px; font-size: 11px; }
  #msmApp .side-actions { grid-template-columns: minmax(0, 1fr); }
  :is(#msmApp, #msmIndividualApp) .actionbar {
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
  :is(#msmApp, #msmIndividualApp) .actionbar-right {
    width: 100%;
    min-width: 0;
    gap: 8px;
  }
  :is(#msmApp, #msmIndividualApp) .actionbar .cta-btn {
    min-width: 0;
    min-height: 44px;
    height: auto;
    padding: 10px;
    white-space: normal;
    line-height: 1.35;
  }
  :is(#msmApp, #msmIndividualApp) .actionbar .cta-btn--primary { flex: 1; }
  :is(#msmApp, #msmIndividualApp) .actionbar .cta-btn svg { flex-shrink: 0; }
  :is(#msmApp, #msmIndividualApp) .msm-drawerFootRow { min-width: 0; gap: 8px; }
  :is(#msmApp, #msmIndividualApp) .msm-drawerBtn {
    min-width: 0;
    min-height: 44px;
    height: auto;
    white-space: normal;
  }
  #msmIndividualApp .guardian-otp__inputs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
    max-width: 318px;
  }
  #msmIndividualApp .guardian-otp__inputs input {
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
  }
  :is(.msm-digital-otp, .flow-otp-inputs) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    max-width: 318px;
    margin-inline: auto;
  }
  :is(.msm-digital-otp, .flow-otp-inputs) input {
    width: 100% !important;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
  }
  #msmApp .msm-excelPreviewModal :is(.msm-modalTitle, .msm-modalTitleText,
    .msm-modalMeta, .msm-excelStats, .msm-excelStat) { min-width: 0 !important; }
  #msmApp .msm-excelPreviewModal .msm-modalMeta {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #msmApp .msm-excelPreviewModal .msm-modalFooter .msm-btn.primary {
    min-width: 0 !important;
  }
}

@media (max-width: 440px) {
  #msmApp .corporate-exam-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }
  #msmApp .corporate-exam-card__action {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
    padding: 8px 0 0;
  }
  #msmApp .corporate-exam-card__content { margin-left: 0; }
  #msmApp .corporate-exam-card__content .corporate-exam-date {
    max-width: 100%;
    white-space: normal;
    line-height: 1.3;
  }
  #msmIndividualApp .flow-vstep li { flex-direction: column; text-align: center; gap: 6px; }
  #msmIndividualApp .flow-vstep .lbl b { margin: 0; line-height: 1.4; }
}

/* Short laptop / landscape windows: the fixed brand area must not consume
   the entire viewport or hide the sidebar's final actions. */
@media (min-width: 981px) and (max-height: 700px) {
  :is(#msmApp, #msmIndividualApp) .wrap > .profile {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  :is(#msmApp, #msmIndividualApp) :is(.profile-head, .profile-photo, .profile-body) {
    flex: 0 0 auto;
  }
  :is(#msmApp, #msmIndividualApp) .profile-body { overflow: visible; }
}
@media (max-height: 500px) {
  #msmApp .msm-excelPreviewModal .msm-modalPanel {
    overflow-y: auto !important;
    display: block !important;
  }
  #msmApp .msm-excelPreviewModal .msm-tableWrap { max-height: 45vh !important; }
}

/* Tablet Excel footer: allow the note to shrink before the action buttons. */
@media (min-width: 621px) and (max-width: 880px) {
  #msmApp .msm-excelPreviewModal .msm-modalFooter .msm-modalHint {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  #msmApp .msm-excelPreviewModal .msm-footerBtns {
    flex: 0 0 auto !important;
  }
}
/* Height constraints also apply when the theme uses overflow:hidden. */
#msmApplyModal .msm-apply-modal__dialog {
  overflow-y: auto !important;
}