/* =====================================================================
   Legacy auth pages — responsive (mobile + tablet) support ONLY.
   Layout/sizing adjustments for small screens. No color or visual
   theme changes. Self-contained; referenced only from the legacy
   Views/Authentication/** views (never from Views_Modern).
   ===================================================================== */

/* ---- Standalone pages (Login, Register, Auth/PasswordReset) ----
   These use a fixed 450px login box. Let it shrink on small screens. */
@media (max-width: 480px) {
    /* fixed-width login box -> fluid */
    div[style*="width: 450px"],
    div[style*="width:450px"] {
        width: 100% !important;
        max-width: 450px;
    }

    .login-container {
        padding: 0 12px;
    }

    .login-banner {
        padding: 14px 16px;
    }

    .login-form {
        padding: 16px;
    }

    /* the big vertical spacer above the login box */
    body > div[style*="line-height: 8em"] {
        line-height: 2em !important;
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    /* tablet: keep the box centered and comfortably sized */
    div[style*="width: 450px"],
    div[style*="width:450px"] {
        width: 90% !important;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---- Site.Master pages (PasswordReset New/Questions/Change/Success,
   FirstTimeUser New/Success) ----
   These use fixed-width <table> layouts inside the master. Allow the
   content wrapper and tables to reflow on small screens. */
@media (max-width: 1024px) {
    /* master main content wrapper is an inline-styled 95% div already;
       make nested fixed-width table cells fluid */
    .standardTable,
    .standardTable td {
        width: auto !important;
    }

    table[style*="width: 400px"],
    table td[style*="width: 400px"] {
        width: 100% !important;
        display: block;
    }

    /* password inputs on Change page use inline width:200px */
    input[style*="width:200px"],
    input[style*="width: 200px"] {
        width: 100% !important;
        max-width: 260px;
        box-sizing: border-box;
    }

    /* security-question answer boxes use size=50; let them fit */
    .standardTable input.required,
    input.required[size] {
        width: 100% !important;
        max-width: 320px;
        box-sizing: border-box;
    }
}

@media (max-width: 600px) {
    /* stack the Change-page two-column layout (form | password rules) */
    .standardTable,
    .standardTable tbody,
    .standardTable tr,
    .standardTable td {
        display: block;
        width: 100% !important;
    }

    .policy_rules {
        padding-left: 18px;
    }
}

/* ---- Bare-input pages (PasswordReset/New, FirstTimeUser/New) ----
   These have no table wrapper: a plain "Username:" label, a .loginBox
   input and a .loginSubmit button rendered inline. On narrow screens
   the input and button don't line up (see button stretching full
   width). Normalize them to the same width and stack vertically.
   Applies on tablet + mobile; layout only, no color changes. */
@media (max-width: 1024px) {
    .loginBox,
    input.loginBox {
        display: block;
        width: 100% !important;
        max-width: 340px;
        box-sizing: border-box;
        margin-top: 6px;
    }

    .loginSubmit,
    input.loginSubmit {
        display: block;
        width: 100% !important;
        max-width: 340px;
        box-sizing: border-box;
        margin-top: 10px;
        text-align: center;
    }
}