/* MathVenture Login Fullscreen Responsive v2.37
   Scope: login viewport sizing only. No authentication, routing, or app-page changes. */

/* Lock the document to the visible browser viewport while the login view is active. */
html:has(#view-login:not(.hidden)),
body:has(#view-login:not(.hidden)) {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#app:has(#view-login:not(.hidden)) {
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#view-login.mv-login-page {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#view-login .mv-login-shell,
#view-login .mv-login-hero {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

#view-login .mv-login-scene {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Desktop/laptop: reserve a stable, non-scrolling viewport for the card. */
#view-login .mv-login-panel {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  padding-top: clamp(90px, 12vh, 126px) !important;
  padding-bottom: clamp(16px, 2.8vh, 30px) !important;
}

#view-login .mv-login-card {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
}

/* Tablet: keep the background full-screen and scale spacing rather than scrolling. */
@media (max-width: 1100px) {
  #view-login .mv-login-panel {
    width: min(455px, 46vw) !important;
    min-width: 350px !important;
    padding: clamp(82px, 10vh, 106px) 22px clamp(14px, 2.2vh, 22px) !important;
  }

  #view-login .mv-login-hero-brand {
    top: clamp(12px, 2vh, 22px) !important;
    right: clamp(46px, 5vw, 72px) !important;
    width: clamp(154px, 18vw, 198px) !important;
  }

  #view-login .mv-login-card {
    padding: 24px !important;
    border-radius: 21px !important;
  }

  #view-login .mv-login-card-heading {
    margin-bottom: 18px !important;
  }

  #view-login .mv-login-form {
    gap: 14px !important;
  }
}

/* Phone/compact tablet portrait: one fixed viewport, card floating over artwork. */
@media (max-width: 700px) {
  #view-login .mv-login-scene {
    object-position: 28% 50% !important;
  }

  #view-login .mv-login-hero-brand {
    top: clamp(10px, 2.2vh, 18px) !important;
    left: 50% !important;
    right: auto !important;
    width: min(176px, 46vw) !important;
    transform: translateX(-50%) !important;
  }

  #view-login .mv-login-panel {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: clamp(104px, 18vh, 146px) 12px clamp(8px, 1.8vh, 16px) !important;
    overflow: hidden !important;
  }

  #view-login .mv-login-card {
    width: min(100%, 448px) !important;
    max-height: 100% !important;
    padding: clamp(17px, 2.8vh, 22px) 18px !important;
    border-radius: 18px !important;
  }

  #view-login .mv-login-card-heading {
    margin-bottom: clamp(12px, 2vh, 18px) !important;
  }

  #view-login .mv-login-card-heading h1 {
    font-size: clamp(1.35rem, 7vw, 1.55rem) !important;
  }

  #view-login #login-mode-label {
    margin-top: 5px !important;
    font-size: 10px !important;
  }

  #view-login .mv-login-form {
    gap: clamp(9px, 1.6vh, 13px) !important;
  }

  #view-login .mv-login-field label {
    margin-bottom: 5px !important;
    font-size: 12px !important;
  }

  #view-login .mv-login-input-wrap input {
    min-height: clamp(43px, 6.2vh, 48px) !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  #view-login .mv-login-primary-btn {
    min-height: clamp(43px, 6.2vh, 48px) !important;
  }

  #view-login .mv-login-admin-switch {
    margin-top: clamp(10px, 1.8vh, 15px) !important;
  }

  #view-login .mv-login-divider {
    margin-bottom: clamp(8px, 1.4vh, 12px) !important;
  }

  #view-login .mv-login-teacher-link,
  #view-login .mv-login-back-btn {
    min-height: clamp(40px, 5.8vh, 44px) !important;
  }

  #view-login .mv-login-demo-panel {
    margin-top: clamp(8px, 1.5vh, 12px) !important;
    padding-top: clamp(7px, 1.2vh, 10px) !important;
  }

  #view-login .mv-login-demo-title {
    min-height: 26px !important;
  }
}

/* Short screens (small phones, landscape phones, split-screen tablets):
   compact the card enough to remain fully visible without page scrolling. */
@media (max-height: 740px) {
  #view-login .mv-login-panel {
    padding-top: 74px !important;
    padding-bottom: 8px !important;
  }

  #view-login .mv-login-hero-brand {
    top: 9px !important;
    width: clamp(132px, 18vw, 166px) !important;
  }

  #view-login .mv-login-card {
    padding: 15px 18px !important;
    border-radius: 16px !important;
  }

  #view-login .mv-login-card-heading {
    margin-bottom: 10px !important;
  }

  #view-login .mv-login-card-heading h1 {
    font-size: 1.3rem !important;
  }

  #view-login #login-mode-label {
    margin-top: 3px !important;
    font-size: 9px !important;
  }

  #view-login .mv-login-form {
    gap: 8px !important;
  }

  #view-login .mv-login-field label {
    margin-bottom: 3px !important;
    font-size: 11px !important;
  }

  #view-login .mv-login-input-wrap input,
  #view-login .mv-login-primary-btn {
    min-height: 41px !important;
  }

  #view-login .mv-login-admin-switch {
    margin-top: 8px !important;
  }

  #view-login .mv-login-divider {
    gap: 9px !important;
    margin-bottom: 7px !important;
  }

  #view-login .mv-login-teacher-link,
  #view-login .mv-login-back-btn {
    min-height: 39px !important;
  }

  #view-login .mv-login-demo-panel {
    margin-top: 7px !important;
    padding-top: 6px !important;
  }

  #view-login .mv-login-demo-title {
    min-height: 23px !important;
    font-size: 9px !important;
  }
}

/* Very short landscape viewport: move the logo away from the card and
   compact further instead of allowing document scrolling. */
@media (max-height: 560px) {
  #view-login .mv-login-hero-brand {
    top: 10px !important;
    left: 14px !important;
    right: auto !important;
    width: 124px !important;
    transform: none !important;
  }

  #view-login .mv-login-panel {
    padding: 8px 12px !important;
    align-items: center !important;
  }

  #view-login .mv-login-card {
    width: min(405px, 48vw) !important;
    margin-left: auto !important;
    padding: 12px 15px !important;
    border-radius: 14px !important;
  }

  #view-login .mv-login-card-heading {
    margin-bottom: 7px !important;
  }

  #view-login .mv-login-card-heading h1 {
    font-size: 1.12rem !important;
  }

  #view-login #login-mode-label {
    display: none !important;
  }

  #view-login .mv-login-form {
    gap: 6px !important;
  }

  #view-login .mv-login-field label {
    margin-bottom: 2px !important;
    font-size: 10px !important;
  }

  #view-login .mv-login-input-wrap input,
  #view-login .mv-login-primary-btn {
    min-height: 36px !important;
    font-size: 13px !important;
  }

  #view-login .mv-login-password-toggle {
    width: 32px !important;
    height: 32px !important;
  }

  #view-login .mv-login-admin-switch {
    margin-top: 6px !important;
  }

  #view-login .mv-login-divider {
    margin-bottom: 5px !important;
    font-size: 10px !important;
  }

  #view-login .mv-login-teacher-link,
  #view-login .mv-login-back-btn {
    min-height: 34px !important;
    font-size: 11px !important;
  }

  #view-login .mv-login-demo-panel {
    margin-top: 5px !important;
    padding-top: 4px !important;
  }

  #view-login .mv-login-demo-title {
    min-height: 20px !important;
    font-size: 8px !important;
  }
}