/* ==========================================================================
   Modern UI layer (login / 2FA pages) — modern-ui-login.css
   --------------------------------------------------------------------------
   BUG FIX (patch): login.php and verify_2fa.php already <link> this file,
   but it did not exist on disk (404 on every login page load). Browsers
   ignore a missing stylesheet silently, so the page rendered with only
   login.css — whose fixed vertical spacing (py-5 container padding +
   logo margin + 50px card padding + footer credit card) adds up to ~780px
   of content. That is taller than the visible viewport in Chrome on a
   typical laptop (a 1366x768 / 1440x900 screen only gives Chrome ~640-700px
   of vertical space once tabs/bookmarks/toolbar are subtracted), so the
   browser was forced to show a vertical scrollbar to reach the "Sign in"
   button / footer.

   Fix strategy: keep the exact same visual design, but (a) vertically
   center the card with flexbox instead of fixed top padding, and (b)
   progressively tighten vertical spacing as viewport HEIGHT shrinks
   (media queries on max-height, not max-width) so the whole card comfortably
   fits in one screen on laptops and phones. Tall desktop monitors keep the
   original spacious look untouched. Loaded after login.css so every rule
   below simply overrides it — nothing here is required to work standalone.
   ========================================================================== */

html {
    overflow-x: hidden;
}

/* Use the real visible viewport height. 100dvh accounts for the address bar
   that mobile Chrome shows/hides on scroll (the classic cause of a phantom
   scrollbar on phones with 100vh); browsers without dvh support just use
   the 100vh fallback declared first. */
.register-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 0;
    padding-bottom: 0;
}

.register-content .container {
    width: 100%;
}

/* Tighten the built-in Bootstrap py-5 (48px top+bottom) that login.php/
   verify_2fa.php apply directly on the .container — this is what pushed
   total content past 100vh on shorter screens. */
.register-content .container.py-5 {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
}

.pharmacare-logo {
    margin-bottom: 1.5rem !important;
}

.pharmacare-logo img {
    max-height: 55px;
    width: auto;
}

.form-card_body {
    padding: 30px !important;
}

@media (min-width: 576px) {
    .form-card_body {
        padding: 34px !important;
    }
}

.register-form .text-center.mb-5 {
    margin-bottom: 1.25rem !important;
}

.register-content .form-group {
    margin-bottom: 14px !important;
}

.product-credit {
    margin-top: 1rem !important;
    padding: 10px 18px !important;
}

/* --- Shorter viewports (typical laptop window height once Chrome's own
   chrome is subtracted, and phones in landscape): compact further so the
   whole card + footer still fits in view without a scrollbar. --- */
@media (max-height: 820px) {
    .register-content .container.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .pharmacare-logo {
        margin-bottom: 1rem !important;
    }
    .pharmacare-logo img {
        max-height: 44px;
    }
    .form-card {
        margin-bottom: 1rem !important;
    }
    .form-card_body {
        padding: 22px !important;
    }
    .register-form .text-center.mb-5 {
        margin-bottom: 0.75rem !important;
    }
    .display-4 {
        font-size: 17px;
    }
    .product-credit {
        margin-top: 0.5rem !important;
        padding: 8px 16px !important;
    }
    .product-credit_vendor {
        margin-top: 4px !important;
    }
}

/* --- Very short viewports (small phones, phones in landscape, split-screen
   windows): collapse to the minimum comfortable spacing. Content can still
   scroll here if a device is genuinely too short — that is expected and
   correct behaviour, unlike the earlier bug which forced a scrollbar even
   on normal-height screens. --- */
@media (max-height: 620px) {
    .pharmacare-logo {
        margin-bottom: 0.5rem !important;
    }
    .pharmacare-logo img {
        max-height: 36px;
    }
    .register-form .text-center.mb-5 {
        margin-bottom: 0.5rem !important;
    }
    .register-content .form-group {
        margin-bottom: 10px !important;
    }
    .form-card_body {
        padding: 16px !important;
    }
}

/* --- Mobile Chrome / narrow phones: keep the card edge-to-edge readable and
   make sure the OTP boxes on the 2FA page never force horizontal scroll. --- */
@media (max-width: 420px) {
    .register-content .container.py-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .form-card_body {
        padding: 18px !important;
    }
    .register-content .btn.btn-lg {
        font-size: 16px;
        padding: 10px;
    }
    .otp-input {
        letter-spacing: 6px !important;
        font-size: 22px !important;
    }
}

/* Password-recovery modal: on very small screens Bootstrap4's own
   margin/max-width already keeps it inside the viewport; this just removes
   extra outer scroll caused by the modal backdrop when the card is short. */
@media (max-width: 575.98px) {
    #passwordrecoverymodal .modal-dialog {
        margin: 0.75rem;
    }
}