/* ==========================================================================
   css/login-app.css — login.php ONLY (loaded after css/loginstyle.css, which
   forgotPassword / createPassword / … also share, so nothing here leaks there).

   1. Fixed mobile-app screen: the page never scrolls or bounces — not left /
      right, not up / down. html + body are locked to the visible viewport
      (--app-h, kept in sync by login.php's JS with the on-screen keyboard).
   2. When the keyboard opens (body.kb-open) the banner + logo shrink / hide so
      the Mobile, Password and Sign In stay on screen without scrolling.
   3. Password field is a masked text field (.dss-secret) — no saved-password
      / autofill suggestions in Chrome or the React Native WebView APK.
   ========================================================================== */

html.login-app-html,
body.login-app {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--app-h, 100dvh);
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;        /* no pull-to-refresh / rubber-band */
    touch-action: manipulation;       /* no double-tap zoom */
    -webkit-text-size-adjust: 100%;
}

body.login-app {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}
body.login-app input { -webkit-user-select: text; user-select: text; }

/* Bootstrap's .row has negative side margins → it pushed the page sideways. */
body.login-app .login-shell,
body.login-app .login-shell > .row {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 14px;
}
body.login-app .login-shell > .row { padding: 0; }

body.login-app .login-container {
    max-width: 380px;
    margin: 0 auto;
    max-height: calc(var(--app-h, 100dvh) - 16px);
    display: flex;
    flex-direction: column;
}
body.login-app .login-container .card {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Header: logo + banner scale with the screen height */
body.login-app .card-header { padding: 14px 14px 0; }
body.login-app .logo-wrap {
    padding: 16px 16px 0;
    transition: padding 0.25s ease;
}
body.login-app .login-logo {
    display: block;
    width: 170px;
    max-width: 52vw;
    height: auto;
    margin: 0 auto;
}
body.login-app .login-banner {
    display: block;
    width: 190px;
    max-width: 55vw;
    max-height: 24vh;
    height: auto;
    margin: 8px auto 0;
    object-fit: contain;
    transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
}

body.login-app .card-body.p-4 { padding: 14px 18px 16px !important; }
body.login-app .login-form-body { padding: 4px 2px 0 !important; }
body.login-app .login-title { margin-bottom: 12px; }
body.login-app .login-form-body .mb-3 { margin-bottom: 12px !important; }
body.login-app .btn-login { margin-top: 10px; padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
body.login-app .forgetpass_division.mt-3 { margin-top: 4px !important; }

/* 16px text → Android / iOS never zoom the page when a field is focused */
body.login-app .form-control { font-size: 16px; height: 46px; }
body.login-app .input-group-text,
body.login-app .toggle-password { height: 46px; }
body.login-app ::placeholder { font-size: 13px; }

/* Masked password (type="text" + dots): browsers / WebView autofill treat it
   as a normal field → no "use saved password" / "suggest password" popups. */
.dss-secret { -webkit-text-security: disc; text-security: disc; }
.dss-secret.is-visible { -webkit-text-security: none; text-security: none; }

/* ── Short screens ── */
@media (max-height: 700px) {
    body.login-app .logo-wrap { padding: 12px 14px 0; }
    body.login-app .login-banner { max-height: 18vh; }
    body.login-app .login-title h4 { font-size: 18px; }
}
@media (max-height: 560px) {
    body.login-app .login-banner { max-height: 0; opacity: 0; margin: 0 auto; }
    body.login-app .login-title { margin-bottom: 6px; }
}
@media (max-height: 460px) {
    body.login-app .login-title { display: none; }
    body.login-app .logo-wrap { padding: 8px 12px 6px; }
    body.login-app .login-logo { width: 120px; }
    body.login-app .card-header { padding-top: 8px; }
    body.login-app .card-body.p-4 { padding-top: 10px !important; padding-bottom: 10px !important; }
    body.login-app .btn-login { margin-top: 4px; }
}

/* ── Keyboard open: keep the form, drop the pictures ── */
body.login-app.kb-open .login-banner { max-height: 0; opacity: 0; margin: 0 auto; }
body.login-app.kb-open .logo-wrap { padding: 8px 12px 6px; }
body.login-app.kb-open .login-logo { width: 120px; }
body.login-app.kb-open .card-header { padding-top: 8px; }
body.login-app.kb-open .login-title { display: none; }
body.login-app.kb-open .forgetpass_division.d-md-block { display: none !important; }
body.login-app.kb-open .login-container { justify-content: flex-start; }

/* SweetAlert: keep the locked height (it normally sets body height:auto) */
html.login-app-html.swal2-height-auto,
body.login-app.swal2-height-auto { height: var(--app-h, 100dvh) !important; }
body.login-app.swal2-shown { padding-right: 0 !important; overflow: hidden !important; }