/* ============================================
   Mobile Responsive Overrides for Login Screen
   Phase 1: Safe, additive-only changes
   Breakpoint: max-width 767px (tablets and below)
   ============================================ */

@media only screen and (max-width: 767px) {

    /* --- Layout Structure --- */
    .body-container {
        height: auto;
        min-height: 100vh;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    .login-form-wrapper,
    .login-img-wrapper {
        width: 100%;
        display: block;
    }

    /* The desktop illustration is a wide landscape side-panel graphic; it
       letterboxes badly when forced into a mobile-width banner, so it's
       hidden here and the Kibo logo becomes the visual anchor instead. */
    .login-img-wrapper {
        display: none;
        background: none; /* belt-and-suspenders: clears the desktop illustration URL in case a browser still fetches background-images on hidden elements */
    }

    /* Form area fills the screen; no banner competing for vertical space */
    .login-form-wrapper {
        height: auto !important;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px 12px;
        box-sizing: border-box;
    }

    .login-form-flex {
        width: 100%;
        max-width: 100%;
    }

    /* main.css's .login-form-flex .wrap is display:flex with justify-content:center
       and its .row child uses flex:0 1 auto (flex-basis:auto), so .row shrink-to-fits
       around its content instead of filling .wrap - depending on a page's form content
       that resolves to a different width per page (e.g. narrow login form vs wider
       forgot-password form), producing inconsistent outer margins between pages.
       Forcing .row to width:100% makes every page's card fill .wrap the same way. */
    .login-form-flex .wrap .row {
        width: 100%;
    }

    /* --- Container --- slightly wider card, capped so it never touches screen edges */
    .login-bg-container {
        /* !important needed: some views (e.g. ApiDocs.cshtml) set inline max-width/width
           on this element, which otherwise beats this media-query rule and overflows. */
        max-width: 460px !important;
        width: 100% !important;
        min-height: auto;
        padding: 28px 24px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* --- Logo --- larger since it's now the top-of-page focal point --- */
    .login-form-wrapper .logo {
        margin-bottom: 32px;
        text-align: center;
    }

    .login-form-wrapper .logo img {
        width: 210px;
        height: auto;
        max-width: 100%;
    }

    /* --- Headings --- */
    .login-form-flex .mz-heading {
        font-size: 22px;
        margin-bottom: 20px;
        text-align: center;
        word-break: break-word;
        white-space: normal;
    }

    /* --- Form Inputs --- */
    .login-form-flex .mz-input-wrapper {
        margin: 20px 0;
    }

    .login-form-flex .mz-input-wrapper .mz-input {
        width: 100%;
        max-width: 100%;
        height: 52px; /* Slightly larger for touch */
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 14px 16px;
        box-sizing: border-box;
    }

    .login-form-wrapper .label-input {
        font-size: 16px;
        padding-left: 16px;
    }

    .login-form-wrapper .mz-input-wrapper .mz-input:focus + .focus-input + .label-input,
    .login-form-wrapper .mz-input-wrapper .mz-input.active + .focus-input + .label-input {
        font-size: 13px;
        top: 6px;
    }

    /* --- Buttons --- prominent but not edge-to-edge now that the card is wider */
    .action-container .mz-btn-primary,
    .login-form-wrapper .mz-btn,
    .kibo-dark .mz-btn {
        width: auto;
        min-width: 200px;
        max-width: 100%;
        min-height: 48px; /* Touch-friendly minimum */
        padding: 12px 40px;
        font-size: 16px;
        box-sizing: border-box;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Desktop hover/focus rules force margin: 0 which would shove the centered
       button to the left — keep it centered on interaction too */
    .login-form-wrapper .mz-btn:hover,
    .login-form-wrapper .mz-btn:focus {
        margin-left: auto;
        margin-right: auto;
    }

    .mz-btn-wrapper {
        width: 100%;
        display: block;
        text-align: center;
    }

    /* --- Flex Row for Login Button + Forgot Password --- */
    .flex.justify-space-between {
        flex-direction: column;
        align-items: stretch;
    }

    .flex.justify-space-between .instruction,
    .flex.justify-space-between .form-links,
    .flex.justify-space-between .mz-btn-wrapper {
        width: 100%;
        text-align: center;
    }

    .flex.justify-space-between .instruction,
    .flex.justify-space-between .form-links {
        margin-left: 0; /* reset main.css's .kibo-dark .form-links desktop margin-left: 40px */
        margin-bottom: 16px;
        order: 2;
    }

    .flex.justify-space-between .mz-btn-wrapper {
        order: 1;
        margin-bottom: 16px;
    }

    .login-form-wrapper .forgot-password {
        display: block;
        text-align: center;
        margin-top: 8px;
    }

    /* --- Turnstile --- */
    .cf-turnstile {
        margin-top: 20px;
    }

    .cf-turnstile iframe {
        max-width: 100%;
    }

    /* --- Footer Links --- tightened so links don't eat up the remaining
       viewport height with large stacked gaps --- */
    .footer-list {
        margin-top: 28px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-list li {
        margin: 2px 0;
        display: block;
    }

    .footer-list a {
        margin-right: 0;
        font-size: 14px;
        display: inline-block;
        padding: 6px 16px;
        min-height: 32px; /* Still a reasonable touch target without huge gaps */
        line-height: 20px;
        box-sizing: border-box;
    }

    .footer {
        text-align: center;
        padding: 10px;
        font-size: 13px;
    }

    /* --- Validation Messages --- */
    .login-form-wrapper .message-bar {
        font-size: 14px;
        padding: 12px;
        margin: 12px 0;
    }

    /* --- Password Reset Notice --- */
    .password-reset-notice {
        font-size: 14px;
        padding: 12px 14px;
        margin-bottom: 20px;
    }

    /* --- Email Label (when email entered) --- */
    .login-form-wrapper .email-label {
        font-size: 16px;
        margin-bottom: 12px;
        word-break: break-all;
    }

    /* --- Flex End (Next button row) --- */
    .flex.flex-end {
        justify-content: center;
    }

    /* --- Prevent zoom on input focus (iOS) --- */
    input[type="text"],
    input[type="password"],
    input[type="email"] {
        font-size: 16px;
    }
}

/* ============================================
   Small Mobile (max-width: 480px)
   Extra tightening for very small screens
   ============================================ */
@media only screen and (max-width: 480px) {

    .login-form-wrapper {
        padding: 16px 12px;
    }

    .login-bg-container {
        padding: 22px 18px;
    }

    .login-form-flex .mz-heading {
        font-size: 20px;
    }

    .login-form-wrapper .logo img {
        width: 150px;
    }
}

/* ============================================
   Landscape orientation fix
   ============================================ */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .login-form-wrapper {
        min-height: auto;
        padding: 12px;
    }

    .login-bg-container {
        padding: 16px;
    }

    .footer-list {
        margin-top: 20px;
    }
}