/* R78-HF248-FIX24 | presentation-only password dialogs and personnel search.
   This stylesheet deliberately does not modify authentication, MySQL, permissions,
   account state, login layout templates, or the personnel search event handler. */

/* The required-password dialog is opened while the login scene is still visible.
   Give password dialogs their own above-scene stacking level; keep all other
   account/personnel/project dialogs at their established stacking levels. */
html body #passwordChangeOverlay.show,
html body #hf28SelfPasswordOverlay.show {
  position:fixed!important;
  inset:0!important;
  z-index:2147483500!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(12px,2vw,24px)!important;
  width:100%!important;
  height:100dvh!important;
  max-height:100dvh!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  isolation:isolate;
}
/* The email-forgot-password dialog uses inline display toggling, not .show. */
html body #hf99ForgotOverlay {
  z-index:2147483500!important;
  box-sizing:border-box!important;
  padding:clamp(12px,2vw,24px)!important;
  max-height:100dvh!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  isolation:isolate;
}
html body #passwordChangeOverlay.show > .modal,
html body #hf28SelfPasswordOverlay.show > .modal,
html body #hf99ForgotOverlay > .hf99-forgot-card {
  box-sizing:border-box!important;
  position:relative!important;
  inset:auto!important;
  flex:0 1 auto!important;
  width:min(620px,100%)!important;
  max-width:100%!important;
  height:auto!important;
  max-height:calc(100dvh - 32px)!important;
  margin:auto!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
html body #hf28SelfPasswordOverlay.show > .modal {width:min(570px,100%)!important;}
html body #hf99ForgotOverlay > .hf99-forgot-card {width:min(470px,100%)!important;}
/* Keep forms and the confirmation controls accessible under short-height viewports
   without broad changes to .overlay, .modal, or business form styles. */
html body #passwordChangeOverlay.show .modalbody,
html body #hf28SelfPasswordOverlay.show .modalbody {
  max-height:none!important;
  overflow:visible!important;
}
html body #passwordChangeOverlay.show .modalfoot,
html body #hf28SelfPasswordOverlay.show .modalfoot {
  position:relative!important;
  z-index:1;
  background:#fff;
  flex-wrap:wrap;
}
@media (max-width:600px), (max-height:600px) {
  html body #passwordChangeOverlay.show,
  html body #hf28SelfPasswordOverlay.show,
  html body #hf99ForgotOverlay {align-items:flex-start!important;}
  html body #passwordChangeOverlay.show > .modal,
  html body #hf28SelfPasswordOverlay.show > .modal,
  html body #hf99ForgotOverlay > .hf99-forgot-card {
    margin:auto!important;
    max-height:calc(100dvh - 24px)!important;
  }
}