/* ── Override CrossSite.css legacy minimums ──────────────────────────────────
   CrossSite sets body { min-width: 960px; overflow: auto }.  The login page
   does not load Frame.css (which resets these for the main app), so we reset
   them here for a mobile-friendly layout. */
body
{
    min-width: 0;
    overflow-x: hidden;
}

html
{
    overflow-x: hidden;
}

/* Prevent the login content from overflowing the viewport width. */
.sg-main-content
{
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.sg-login li {
    list-style-type: disc;
}

.sg-login .sg-login-verify-message {
    font-size: 14px;
    line-height: 1.5;
}

.sg-login .sg-login-input select {
    width: 100%;
    height: 42px;
    font-size: 18px;
    line-height: 22px;
    color: #333333;
    padding-left: 10px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-radius: 5px;
}

.sg-login .sg-login-labels input[type=radio] + label {
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
    padding-left: 10px;
}

.sg-login-validation {
    display: inline-block;
    color: #EB0017;
    margin-top: 5px;
}

.sg-mfa-validation {
    font-size: 16px;
    line-height: 1.5;
    color: #EB0017;
    padding-left: 10px;
}

.sg-mfa-message {
    font-size: 16px;
    line-height: 1.5;
    color: green;
    padding-left: 10px;
}

.validation-summary-errors li {
    color: #EB0017;
}

.sg-login-register {
    margin-top: 6px;
}

.sg-login-forgot-password-divider {
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.08em;
}

.sg-unified-classroom-link {
    font-size: 12px;
}

.sg-unified-classroom-link a {
    text-decoration: underline;
}

.sg-login-validation-summary {
    margin-top: 20px;
    font-size: 16px;
}

.sg-login-validation-summary:empty {
    margin-top: 0px;
}

.login-custom-logo {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile responsive overrides (≤ 767 px)
   sungard-login.css has no mobile breakpoints, so everything here augments it.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px)
{
    /* Shrink the large top gap – 100 px wastes half a phone screen. */
    .sg-login .sg-login-separator-100 { height: 24px; }

    /* Scale down the large "Welcome to" headline. */
    .sg-login .sg-login-welcome
    {
        font-size: 26px;
        line-height: 36px;
    }

    /* The logo is hard-coded to 450 px – make it fluid so it never overflows. */
    .sg-login .sg-login-app-logo
    {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        background-size: contain;
    }

    /* Tighten other separators to reclaim vertical space on a small screen. */
    .sg-login .sg-login-separator-37 { height: 20px; }
    .sg-login .sg-login-separator-40 { height: 20px; }
    .sg-login .sg-login-separator-30 { height: 16px; }

    /* The copyright uses a negative margin (-80 px) designed for a wide desktop
       column; on mobile it causes horizontal overflow. */
    .sg-login .sg-login-copyright
    {
        margin: 0;
        padding: 0 10px;
        text-align: center;
    }

    /* Ensure the Bootstrap column and login card don't add extra side padding. */
    .sg-login-container { padding: 0 4px; }

    /* Give the card a subtle shadow so it reads as a focused form card. */
    .sg-login
    {
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
        padding: 16px 12px 24px;
    }

    /* Labels slightly smaller so they don't crowd narrow fields. */
    .sg-login .sg-login-labels,
    .sg-login .sg-login-text
    {
        font-size: 14px;
    }

    /* Inputs: full-width, comfortable touch height. */
    .sg-login .sg-login-input input,
    .sg-login .sg-login-input select
    {
        height: 48px;
        font-size: 16px; /* prevents iOS auto-zoom on focus */
    }

    /* Login button: full-width and tall enough to tap easily. */
    .sg-login .sg-login-sign-in button
    {
        font-size: 16px;
        padding: 14px;
    }

    /* Links: slightly more line-height for easier tapping. */
    .sg-login .sg-login-link
    {
        line-height: 1.8;
        font-size: 14px;
    }

    .sg-login-forgot-password-divider
    {
        font-size: 11px;
    }
}