/* =========================================================
   QUICK ADMISSION GHANA
   GLOBAL MOBILE LAYOUT AND INFINITE-SCROLL FIX
   Loaded after page-level styles so it can correct old layout rules.
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: auto !important;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  position: relative;
  color: #002b4c;
  background: #c0ebff;
}

img,
svg,
video,
canvas,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#app,
.app,
.app-shell,
.app-wrapper,
.page-wrapper,
.layout-wrapper,
.main-wrapper,
.dashboard-wrapper,
.portal-wrapper,
.admin-wrapper,
.student-wrapper {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto !important;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

header,
.header,
.site-header,
.main-header,
.app-header,
.dashboard-header {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
}

main,
.main,
.main-content,
.page-content,
.content,
.content-wrapper,
.dashboard-content,
.portal-content,
.admin-content,
.student-content,
.auth-page,
.login-page,
.register-page,
.token-page {
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

section,
.container,
.container-fluid,
.page-container,
.content-container,
.card-container,
.form-container,
.login-container,
.auth-container,
.dashboard-container,
.portal-container,
.token-container,
.school-container {
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
}

.card,
.form-card,
.login-card,
.auth-card,
.token-card,
.help-card,
.dashboard-card,
.portal-card {
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
}

footer,
.footer,
.site-footer,
.main-footer,
.app-footer,
.dashboard-footer,
.portal-footer,
.developer-footer,
body > footer {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  transform: none !important;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}

[hidden],
.d-none,
.hidden,
.screen-hidden,
.page-hidden,
.view-hidden,
.portal-screen:not(.active),
.app-view:not(.active),
.page-view:not(.active),
.system-view:not(.active),
.tab-content:not(.active),
.screen:not(.active),
.offcanvas:not(.show),
.sidebar-overlay:not(.active),
.mobile-menu:not(.active) {
  display: none !important;
}

.portal-screen.active,
.app-view.active,
.page-view.active,
.system-view.active,
.tab-content.active,
.screen.active {
  display: block;
}

.table-responsive,
.table-wrapper,
.data-table-wrapper,
.table-wrap,
.tbl-wrap,
.cls-wrap,
.panel:has(table) {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  max-width: 100%;
}

.sidebar,
.main-sidebar,
.admin-sidebar,
.dashboard-sidebar {
  max-height: 100dvh;
}

/* App-specific corrections for the current QuickAdmissionGH pages. */
.screen {
  min-height: 0 !important;
}

.auth {
  min-height: 100dvh !important;
  height: auto !important;
}

.app {
  min-height: 0 !important;
  height: auto !important;
}

.main {
  min-height: 0 !important;
  height: auto !important;
}

.content {
  min-height: 0 !important;
  height: auto !important;
}

.portal-footer {
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

/* Public buy-token and retrieve-token pages: keep the card layout intact after
   the global theme overrides, and make the custom school dropdown full width. */
body #s-purchase .auth,
body #s-retrieve .auth {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  padding: clamp(18px, 4vw, 36px) 16px !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

body #s-purchase .auth-card,
body #s-retrieve .auth-card {
  display: block !important;
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

body #s-purchase .card,
body #s-retrieve .card {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: clamp(18px, 3.4vw, 26px) !important;
  overflow: visible !important;
}

body #s-purchase .login-input-shell.login-school-shell.no-icon,
body #s-retrieve .login-input-shell.login-school-shell.no-icon {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body #s-purchase .login-school-picker,
body #s-retrieve .login-school-picker,
body #s-purchase .login-school-trigger,
body #s-retrieve .login-school-trigger,
body #s-purchase .login-school-panel,
body #s-retrieve .login-school-panel {
  width: 100% !important;
  min-width: 0 !important;
}

body #s-purchase .login-school-panel,
body #s-retrieve .login-school-panel {
  z-index: 99999 !important;
}

body #s-purchase .grid-2,
body #s-retrieve .grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 13px !important;
}

body #s-purchase .pay-methods {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body #s-purchase .pay-opt {
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
}

@media screen and (max-width: 560px) {
  body #s-purchase .grid-2,
  body #s-retrieve .grid-2,
  body #s-purchase .pay-methods {
    grid-template-columns: 1fr !important;
  }
}

/* Homepage login split layout: avoid a second scrollbar inside the peach/cream hero panel. */
body #s-login .qa-page-shell,
body #s-login .qa-hero-panel,
body #s-login .qa-admission-card {
  height: auto !important;
  max-height: none !important;
}

body #s-login .qa-page-shell {
  align-items: start !important;
  overflow-y: visible !important;
}

body #s-login .qa-hero-panel {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  align-self: start !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body #s-login.screen.active,
body #s-login.screen.active .qa-page-shell {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body #s-login .qa-hero-panel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body #s-login.screen.active::-webkit-scrollbar,
body #s-login.screen.active .qa-page-shell::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* On the public login page, keep scrolling available but hide the extra browser
   scrollbar that appears on the cream background beside the admission card. */
html.qa-login-screen-active,
body.qa-login-screen-active,
html:has(body #s-login.screen.active),
body:has(#s-login.screen.active) {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html.qa-login-screen-active::-webkit-scrollbar,
body.qa-login-screen-active::-webkit-scrollbar,
html:has(body #s-login.screen.active)::-webkit-scrollbar,
body:has(#s-login.screen.active)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.empty-section:empty,
.empty-container:empty,
.empty-footer:empty,
.placeholder:empty,
body > div:last-child:empty,
main > section:last-child:empty,
.main-content > div:last-child:empty,
.page-content > div:last-child:empty {
  display: none !important;
}

@media screen and (max-width: 768px) {
  html {
    width: 100%;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    width: 100%;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }

  /* The public login screen contains its own footer. Keeping the generic
     viewport-sized screen min-height here leaves a large empty panel below
     that footer on short mobile pages and makes scrolling appear endless. */
  body #s-login.screen.active {
    min-height: 0 !important;
    height: auto !important;
    overscroll-behavior-y: none !important;
  }

  #app,
  .app,
  .app-shell,
  .app-wrapper,
  .page-wrapper,
  .layout-wrapper,
  .main-wrapper,
  .dashboard-wrapper,
  .portal-wrapper,
  .admin-wrapper,
  .student-wrapper {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  main,
  .main,
  .main-content,
  .page-content,
  .content,
  .content-wrapper,
  .dashboard-content,
  .portal-content,
  .admin-content,
  .student-content,
  .auth-page,
  .login-page,
  .register-page,
  .token-page {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  section,
  .container,
  .container-fluid,
  .page-container,
  .content-container,
  .card-container,
  .form-container,
  .login-container,
  .auth-container,
  .dashboard-container,
  .portal-container,
  .token-container,
  .school-container {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  footer,
  .footer,
  .site-footer,
  .main-footer,
  .app-footer,
  .dashboard-footer,
  .portal-footer,
  .developer-footer,
  body > footer {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 16px;
  }

  main,
  .main-content,
  .page-content,
  .content-wrapper,
  .dashboard-content,
  .portal-content {
    padding-bottom: 16px;
  }

  .container,
  .container-fluid,
  .page-container,
  .content-container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

}

/* The login page owns its full content flow. Do not force the document to
   remain viewport-height after its footer, especially on mobile Safari where
   -webkit-fill-available can recreate the empty scroll area. */
@media screen and (max-width: 768px) {
  html.qa-login-screen-active,
  body.qa-login-screen-active,
  html:has(body #s-login.screen.active),
  body:has(#s-login.screen.active) {
    height: auto !important;
    min-height: 0 !important;
    overscroll-behavior-y: none !important;
  }
}

/* The student portal footer stays in normal document flow. This makes the
   footer the real end of the page instead of showing it before content ends. */
body.student-portal-page > .portal-footer,
body.student-dashboard-active > .portal-footer {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  min-height: var(--portal-footer-height, 46px) !important;
  margin: 0 !important;
  z-index: auto;
}

body.student-portal-page > .footer-gap {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  flex: 0 0 0;
}

body.student-dashboard-active #s-app.screen.active .pmain {
  padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important;
}

body.student-dashboard-active #s-app.screen.active .psidebar {
  bottom: 0 !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}

@media screen and (min-width: 640px) and (max-height: 600px) {
  /* Public admission landing page. */
  body.system-footer-page > #s-login.screen.active .qa-page-shell {
    width: min(1200px, calc(100% - 24px)) !important;
    margin: 14px auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.95fr) !important;
    gap: 16px !important;
  }

  body.system-footer-page > #s-login.screen.active .qa-hero-panel,
  body.system-footer-page > #s-login.screen.active .qa-admission-card {
    min-height: 0 !important;
    padding: 24px !important;
  }

  body.system-footer-page > #s-login.screen.active .qa-hero-panel h1 {
    font-size: clamp(32px, 5vw, 48px) !important;
  }

  body.system-footer-page > #s-login.screen.active :is(.qa-steps, .qa-form-links) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.system-footer-page > #s-login.screen.active .login-token-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body.system-footer-page > #s-login.screen.active .qa-footer-inner {
    flex-direction: row !important;
    text-align: left !important;
  }

  /* Legacy student-portal entry page. */
  body.system-footer-page > #s-login.screen.active .portal-login-brand {
    flex-direction: row !important;
    text-align: left !important;
  }

  body.system-footer-page > #s-login.screen.active .portal-brand-copy {
    align-items: stretch !important;
  }

  body.system-footer-page > #s-login.screen.active .portal-brand-helpdesk-links {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }

  body.system-footer-page > #s-login.screen.active .portal-brand-helpdesk-sep {
    display: inline !important;
  }

  body.system-footer-page > #s-login.screen.active .portal-login-shell {
    grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr) !important;
    gap: 14px !important;
    padding: 14px !important;
  }

  body.system-footer-page > #s-login.screen.active :is(.portal-login-info, .portal-login-form) {
    padding: 18px !important;
  }

  /* Token purchase/retrieval screens use the older split-card shell. */
  body.system-footer-page > :is(#s-purchase, #s-retrieve).screen.active .auth-split {
    max-width: 1060px !important;
    grid-template-columns: minmax(240px, 0.72fr) minmax(300px, 1.28fr) !important;
    gap: 18px !important;
  }

  body.system-footer-page > :is(#s-purchase, #s-retrieve).screen.active .auth-hero {
    order: 1 !important;
  }

  body.system-footer-page > :is(#s-purchase, #s-retrieve).screen.active .auth-card {
    order: 2 !important;
  }

  /* Shared school-admin and super-admin login shell. */
  body.system-footer-page #authGate .qa-login-shell {
    width: min(1080px, 100%) !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr) !important;
  }

  body.system-footer-page #authGate :is(.qa-brand-panel, .qa-login-panel) {
    min-height: 0 !important;
    padding: 24px !important;
  }

  body.system-footer-page #authGate .qa-brand-panel {
    border-right: 1px solid #001619 !important;
    border-bottom: 0 !important;
  }

  body.system-footer-page #authGate .qa-brand-panel h1 {
    font-size: 36px !important;
  }

  body.system-footer-page #authGate .qa-brand-bottom {
    margin-top: 20px !important;
  }
}

/* Class subject preview and popup. Keep the action label readable and make
   the popup an opaque, bounded card instead of inheriting translucent cards. */
body .cls-subject-more {
  background: #002b4c !important;
  color: #c0ebff !important;
  -webkit-text-fill-color: #c0ebff !important;
  border: 1px solid #002b4c !important;
}

body .cls-subject-more:hover,
body .cls-subject-more:focus-visible {
  background: #001d33 !important;
  color: #c0ebff !important;
  -webkit-text-fill-color: #c0ebff !important;
}

body .subject-combo-overlay {
  z-index: 45 !important;
  padding: max(76px, calc(var(--portal-topbar-height, 61px) + 15px)) 14px
    calc(var(--portal-footer-height, 46px) + 15px) !important;
  background: rgba(0, 43, 76, 0.24) !important;
  backdrop-filter: none !important;
}

body.student-dashboard-active .subject-combo-overlay {
  inset: var(--portal-topbar-height, 61px) 0
    calc(var(--portal-footer-height, 46px) + env(safe-area-inset-bottom))
    0 !important;
  align-items: center !important;
  padding: 16px !important;
}

body .subject-combo-dialog,
body .subject-combo-head,
body .subject-combo-list {
  background: #c0ebff !important;
  color: #002b4c !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}

body .subject-combo-dialog {
  width: min(560px, 100%) !important;
  max-height: calc(
    100dvh - var(--portal-topbar-height, 61px) -
      var(--portal-footer-height, 46px) - 30px
  ) !important;
  box-shadow: 0 24px 54px -24px rgba(0, 43, 76, 0.62) !important;
}

body .subject-combo-list li {
  background: #d8f3ff !important;
  color: #002b4c !important;
  opacity: 1 !important;
}

body .subject-combo-close,
body .subject-combo-close:hover,
body .subject-combo-close:focus-visible {
  background: #002b4c !important;
  color: #c0ebff !important;
  -webkit-text-fill-color: #c0ebff !important;
}

@media screen and (min-width: 1025px) {
  body.student-dashboard-active .subject-combo-overlay {
    left: 240px !important;
  }
}

@media screen and (max-width: 640px) {
  body .subject-combo-overlay {
    align-items: center !important;
    padding: calc(var(--portal-topbar-height, 61px) + 10px) 10px
      calc(var(--portal-footer-height, 46px) + 10px) !important;
  }

  body.student-dashboard-active .subject-combo-overlay {
    padding: 10px !important;
  }

  body .subject-combo-dialog {
    max-height: calc(
      100dvh - var(--portal-topbar-height, 61px) -
        var(--portal-footer-height, 46px) - 20px
    ) !important;
    border-radius: 12px !important;
  }

  body .subject-combo-head {
    padding: 14px !important;
  }

  body .subject-combo-list {
    padding: 14px 14px 14px 42px !important;
  }
}

/* Final foreground contrast guard for every dark-blue action control.
   Component styles sometimes colour nested spans after the shared button rule;
   keep labels and SVGs tied to the control foreground. */
body button:not(:where(.qa-toggle-password, .login-school-trigger, .icon-btn, .icon, .ico)),
body .btn,
body .button,
body .action-button,
body .act,
body .qa,
body .btn-grn,
body .exp-btn,
body .finance-request-btn,
body .admin-login-button,
body .portal-link-btn,
body .corner-nav a,
body .pay-opt,
body .class-subject-more,
body .cls-subject-more,
body .qa-btn:not(.qa-btn-outline),
body input[type="button"],
body input[type="submit"],
body input[type="reset"] {
  color: #c0ebff !important;
  -webkit-text-fill-color: #c0ebff !important;
}

body button:not(:where(.qa-toggle-password, .login-school-trigger, .icon-btn, .icon, .ico)) *,
body .btn *,
body .button *,
body .action-button *,
body .act *,
body .qa *,
body .btn-grn *,
body .exp-btn *,
body .finance-request-btn *,
body .admin-login-button *,
body .portal-link-btn *,
body .corner-nav a *,
body .pay-opt *,
body .class-subject-more *,
body .cls-subject-more *,
body .qa-btn:not(.qa-btn-outline) * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

body button:not(:where(.qa-toggle-password, .login-school-trigger, .icon-btn, .icon, .ico)) svg,
body .btn svg,
body .button svg,
body .action-button svg,
body .act svg,
body .qa svg,
body .btn-grn svg,
body .exp-btn svg,
body .finance-request-btn svg,
body .admin-login-button svg,
body .portal-link-btn svg,
body .corner-nav a svg,
body .pay-opt svg,
body .class-subject-more svg,
body .cls-subject-more svg,
body .qa-btn:not(.qa-btn-outline) svg {
  color: inherit !important;
  fill: currentColor;
  stroke: currentColor;
}

/* Orange icon blocks deliberately use the dark foreground for contrast. */
body :is(button, .btn, .button, .action-button, .act, .qa, .portal-link-btn, .pay-opt)
  :is(.ico, .icon, .b, .nav-badge) {
  background: #f59e71 !important;
  color: #002b4c !important;
  -webkit-text-fill-color: #002b4c !important;
}

body :is(button, .btn, .button, .action-button, .act, .qa, .portal-link-btn, .pay-opt)
  :is(.ico, .icon, .b, .nav-badge) * {
  color: #002b4c !important;
  -webkit-text-fill-color: #002b4c !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* School pickers are light controls, so their prompt and selected school need
   the dark foreground instead of the action-button foreground. */
body #s-login .login-school-trigger,
body #s-purchase .login-school-trigger,
body #s-retrieve .login-school-trigger {
  background: #ffffff !important;
  background-image: none !important;
  color: #002b4c !important;
  -webkit-text-fill-color: #002b4c !important;
  border: 1px solid #002b4c !important;
}

body #s-login .login-school-trigger,
body #s-login .login-school-trigger *,
body #s-login .login-school-trigger.has-placeholder,
body #s-login .login-school-trigger.has-placeholder *,
body #s-login .login-school-trigger-text.is-placeholder,
body #s-login #loginSchoolTriggerText.is-placeholder,
body #s-login #purchaseSchoolTriggerText.is-placeholder,
body #s-login #retrieveSchoolTriggerText.is-placeholder,
body #s-purchase .login-school-trigger *,
body #s-retrieve .login-school-trigger * {
  color: #002b4c !important;
  -webkit-text-fill-color: #002b4c !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* =========================================================
   FINAL MOBILE CHROME / SAFARI / EDGE HEIGHT FIX
   The document owns vertical scrolling. Wrappers grow naturally.
========================================================= */

html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  height: auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

body:not(.sidebar-open) :is(
  #app,
  .app,
  .app-shell,
  .app-wrapper,
  .page-wrapper,
  .layout-wrapper,
  .main-wrapper,
  .dashboard-wrapper,
  .portal-wrapper,
  .admin-wrapper,
  .student-wrapper,
  .main,
  .content,
  .main-content,
  .content-wrapper
) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* Mobile Chrome's address bar changes viewport height dynamically.
   Do not force page wrappers to 100vh/100dvh on phones or tablets. */
@media screen and (max-width: 1024px) {
  body,
  #app,
  .app,
  .app-shell,
  .app-wrapper,
  .page-wrapper,
  .layout-wrapper,
  .main-wrapper,
  .dashboard-wrapper,
  .portal-wrapper,
  .admin-wrapper,
  .student-wrapper,
  .screen.active,
  .main,
  .content,
  .main-content,
  .content-wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body #s-login.screen.active,
  body #s-login.screen.active .auth,
  body.student-dashboard-active #s-app.screen.active,
  body.student-dashboard-active #s-app.screen.active .pbody,
  body.student-dashboard-active #s-app.screen.active .pmain {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.student-dashboard-active #s-app.screen.active .pbody {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.student-dashboard-active #s-app.screen.active .psidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(86vw, 300px) !important;
    max-width: calc(100vw - 20px) !important;
    height: 100svh !important;
    transform: translate3d(-105%, 0, 0) !important;
    overflow-y: auto !important;
    z-index: 1100 !important;
  }

  @supports (height: 100dvh) {
    body.student-dashboard-active #s-app.screen.active .psidebar {
      height: 100dvh !important;
    }
  }

  body.student-dashboard-active #s-app.screen.active .psidebar.open {
    transform: translate3d(0, 0, 0) !important;
  }

  body.student-dashboard-active #s-app.screen.active .pmain {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

@media screen and (min-width: 540px) and (max-width: 932px) and (max-height: 600px) {
  body.student-dashboard-active #s-app.screen.active .wu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.student-dashboard-active #s-app.screen.active :is(.grid-2, .grid-3, .prog-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   DESKTOP SCROLL OWNERSHIP

   The school administration dashboard is intentionally a viewport-height
   shell: only its content pane scrolls. The generic mobile flow rules above
   must not turn that pane into a visible-overflow element on desktop, because
   its parent shell clips overflow by design.
========================================================= */
@media screen and (min-width: 1025px) {
  body:has(.school-admin-login-wrapper) > .app {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body:has(.school-admin-login-wrapper) .app > .main {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body:has(.school-admin-login-wrapper) .app > .main > .content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* Do not hide the browser scrollbar on the student sign-in page. Hidden
     desktop scrollbars make a long login page look and behave as if it cannot
     be scrolled. */
  html.qa-login-screen-active,
  body.qa-login-screen-active,
  html:has(body #s-login.screen.active),
  body:has(#s-login.screen.active) {
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
  }

  html.qa-login-screen-active::-webkit-scrollbar,
  body.qa-login-screen-active::-webkit-scrollbar,
  html:has(body #s-login.screen.active)::-webkit-scrollbar,
  body:has(#s-login.screen.active)::-webkit-scrollbar {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
  }
}

/* Keep one vertical scroll owner. With one axis set to `hidden`, browsers
   compute the other axis's `visible` value as `auto`, which creates a second,
   non-scrollable body container that absorbs wheel and trackpad input. */
html {
  overflow-x: clip !important;
  overflow-y: auto !important;
}

body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}