/*
  Erugo layout fix
  ------------------------
  Fixes: registration/login/password forms (.auth-container) get cut off
  on short viewports (mobile portrait AND landscape, short desktop windows)
  because #app is locked to height:100vh with no overflow, .main clips
  content with overflow:hidden, and .auth-container has no responsive
  width/height handling.

  Applied unconditionally (no media query) since it's harmless on any
  screen size — it only kicks in when content is actually too tall.
*/

#app {
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
}

.main {
  overflow: visible !important;
  height: auto !important;
  min-height: 100% !important;
  justify-content: flex-start !important;
  padding-top: 20px !important;
}

.auth-container {
  width: 90vw !important;
  max-width: 400px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  justify-content: flex-start !important;
}

/* Keep the background image locked to the viewport instead of
   trying to match #app's now-flexible content height. */
.backgrounds {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}