/* ============================================================
   loginflow.css
   Self-contained styles for the GPSBob login page.
   All selectors use the .lgn-* prefix so nothing collides with
   logingpsbob.css or any base stylesheet. Existing JS hooks
   (#btnLogin, #txtUserName, #PanelSelectForm, .LearnMore, etc.)
   are preserved on the markup so loginscript.js still binds.
   ============================================================ */

/* Shell: vertically centred on desktop, top-aligned on mobile so the
   form is reachable above the fold. Column direction so the form (card)
   and the optional LoginAdvert below it STACK rather than competing on a
   single row. align-items: center horizontally centres each child. */
.lgn-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
}
/* The Razor form is one of the column children — without an explicit width
   it would stretch to 100% of the shell, which left the card flush-left
   rather than centred. Total card width is tuned so the form column stays
   compact and the info column doesn't have so much horizontal slack it
   looks empty. */
.lgn-shell > form {
    width: min(660px, 100%);
    margin: 0;
}

/* Card: two side-by-side panels on desktop, stacked on mobile.
   Asymmetric columns — info on the left gets ~58%, login form on the right
   ~42% — so the SSO buttons / inputs don't look stretched. The marketing
   tier cards on the left benefit from the extra width too. */
.lgn-card {
    width: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,1.0) 100%);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.22);
    box-sizing: border-box;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    color: #1f2937;
}

.lgn-card * { box-sizing: border-box; }

/* Left "Did you know?" info column. Slightly washed-out background so
   the right-hand form pops as the primary call-to-action. */
.lgn-info {
    padding: 22px 20px;
    background: rgba(255,255,255,0.55);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lgn-info-title {
    text-align: center;
    font-size: 28px;
    color: #00C98E;
    font-weight: 700;
    margin: 4px 0 6px;
}
.lgn-info-blurb {
    text-align: center;
    font-size: 13px;
    color: #464646;
    margin: 0 6px 8px;
    line-height: 1.4;
}

/* Tier cards (Home / Professional / Enterprise). The .LearnMore class
   is preserved — loginscript.js binds a click handler to it that reads
   the [plat] attribute. */
.lgn-tier {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.lgn-tier:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.lgn-tier-name { color: #00C98E; font-weight: 700; font-size: 17px; }
.lgn-tier-body { color: #464646; font-size: 12px; line-height: 1.4; margin: 4px 0 6px; }
.lgn-tier-more { text-align: right; color: #00C98E; font-size: 12px; text-decoration: underline; }

.lgn-info-foot {
    text-align: center;
    margin-top: auto;
    padding-top: 8px;
}
.lgn-info-foot .register {
    cursor: pointer;
    font-weight: 700;
    color: #1f2937;
    background: rgba(255,255,255,0.55);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

.lgn-error {
    text-align: center;
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.8);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    margin-top: 6px;
}

/* Right login column. The gap between flex children is generous so inputs
   visually breathe rather than stacking flush. */
.lgn-form {
    padding: 22px 20px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Logo box. Note: legacy logingpsbob.css has `#LogoPanel.logo-panel`
   and `#LoginLogoImg.login-logo-img` rules that fight us with ID-level
   specificity. We win with `#LogoPanel.lgn-logo` (ID + class, specificity
   1,1,0) and `!important` on the img dimensions.

   IMPORTANT: use `background-color` (not the `background` shorthand) — v1
   uses an inline `background-image: url(data:image/png;base64,...)` to paint
   the logo on the same div, and `background: #ffffff !important` would
   reset background-image to none and wipe the logo out. */
.lgn-logo,
#LogoPanel.lgn-logo {
    background-color: #ffffff !important;
    border-radius: 14px !important;
    padding: 10px !important;
    margin: 0 auto 4px !important;
    /* width:100% (capped by max-width) so an empty div with just an inline
       background-image (v1's #LoginLogo pattern) still has a paintable area.
       width:auto would have collapsed it to padding-only — which gave us a
       12px-wide sliver instead of the logo. */
    width: 100% !important;
    max-width: 280px !important;
    min-height: 0 !important;
    height: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    align-self: center;   /* centre inside the flex column */
    overflow: hidden;
}
.lgn-logo img,
#LogoPanel.lgn-logo img,
.lgn-logo #LoginLogoImg {
    max-width: 100% !important;
    width: auto !important;
    max-height: 56px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain;
    object-position: center;
}
/* v1 fallback: base64 logo painted via background-image on a div. */
.lgn-logo.lgn-logo-bg {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 64px !important;
    padding: 6px !important;
    background-color: #ffffff !important;
}

/* SSO buttons */
.lgn-sso {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 6px;
}
.lgn-sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.10);
    background: #ffffff;
    color: #1f2937;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: box-shadow .12s ease, transform .12s ease;
}
.lgn-sso-btn:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.10); transform: translateY(-1px); }
.lgn-sso-btn i { font-size: 18px; }

/* "OR" divider between the SSO buttons and the credentials block. Thin
   rules either side of an uppercase "OR" label. Only rendered by the
   cshtml when SSO is enabled — otherwise there's nothing to divide. */
.lgn-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 2px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.lgn-or::before,
.lgn-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0,0,0,0.12);
}

/* Field block: label above its input. Sits as a single child of
   .lgn-form so the parent's 12px gap separates whole fields rather than
   each label-from-input. */
.lgn-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lgn-field-label {
    font-size: 12px;
    color: #2c2c2c;
    font-weight: 600;
    margin: 0 0 0 4px;
}

/* Inputs.
   Selector includes the literal IDs from logingpsbob.css so my rule matches
   them at the SAME ID-level specificity (1,0,0) — needed because the legacy
   `.glass-input, #txtUserName, #txtPassword, #txtAccountName { background:
   rgba(255,255,255,0.8) !important }` rule has both ID specificity and
   !important, and a class-only `.lgn-input` (0,1,0) loses the cascade. */
.lgn-input,
#txtUserName.lgn-input,
#txtPassword.lgn-input,
#txtAccountName.lgn-input {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    font-size: 16px !important;     /* prevents iOS focus zoom */
    color: #1e3a8a !important;
    /* Solid pale sage matching the brand green palette — picked by the user. */
    background: #eaf2f0 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55),
                inset 0 -1px 0 rgba(0,0,0,0.04),
                0 1px 2px rgba(0,0,0,0.06) !important;
    outline: none !important;
    transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease !important;
    box-sizing: border-box !important;
}
.lgn-input::placeholder,
#txtUserName.lgn-input::placeholder,
#txtPassword.lgn-input::placeholder { color: #6b7280 !important; }
.lgn-input:focus,
#txtUserName.lgn-input:focus,
#txtPassword.lgn-input:focus,
#txtAccountName.lgn-input:focus {
    background: #f3f8f7 !important;        /* slightly brighter on focus */
    border-color: rgba(0, 201, 142, 0.60) !important;
    box-shadow: 0 0 0 4px rgba(0,201,142,0.16),
                inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* Hidden inputs (mSessGUID, PlatformRequest, LoginVis) still need to
   exist in the DOM for the form post but shouldn't be visible. */
.lgn-hidden { display: none !important; }

/* Row that pairs "Remember my details" (left) with "Forgotten password?"
   (right) on the same line. The form column is fairly narrow on desktop
   so we tighten the gap, the labels and the pill padding so both fit. */
.lgn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 4px 0 2px;
    flex-wrap: nowrap;
}
.lgn-row > .lgn-remember,
.lgn-row > .lgn-forgot,
.lgn-row > #ForgotPassword {
    width: auto !important;
    margin: 0 !important;
    flex: 0 1 auto;          /* allow shrinking on very narrow viewports */
    min-width: 0;
}

/* Fallback for when the .lgn-row wrapper isn't in the DOM (e.g. the
   running app hasn't yet been recompiled to pick up the cshtml change).
   We float the two elements so they sit on the same visual row. When the
   wrapper IS present, .lgn-forgot and .lgn-remember are children of
   .lgn-row, not direct children of #LoginForm, so these selectors stop
   matching and the .lgn-row flex layout takes over. */
#LoginForm > .lgn-remember {
    float: left;
}
#LoginForm > .lgn-forgot {
    float: right;
    margin-top: 4px;
}
/* Clearfix so the Login button below isn't pulled up under the floats. */
#LoginForm > #btnLogin,
#LoginForm > .lgn-btn,
#LoginForm > .lgn-register {
    clear: both;
}

.lgn-forgot {
    cursor: pointer;
    font-size: 11px;
    color: #1f2937;
    font-weight: 600;
    text-decoration: underline;
    background: rgba(255,255,255,0.55);
    padding: 3px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.lgn-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #2c2c2c;
    white-space: nowrap;
}
.lgn-remember input { width: 14px; height: 14px; margin: 0; flex-shrink: 0; }
.lgn-remember label { cursor: pointer; }

/* Primary "Login" button. Kept as a <div> with inner <label> so the
   existing loginscript.js / savelogic.js wiring around #btnLogin works
   unchanged. */
.lgn-btn {
    display: block;
    width: 100%;
    padding: 14px 16px;
    margin-top: 6px;
    background: linear-gradient(135deg, #00C98E, #00b07a);
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow: 0 12px 30px rgba(0,0,0,0.22);
    transition: transform .12s ease, box-shadow .12s ease;
}
.lgn-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,0.28); }
.lgn-btn:active { transform: translateY(0); }
.lgn-btn label {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
}

.lgn-register {
    text-align: center;
    cursor: pointer;
    margin-top: 6px;
    font-weight: 700;
    color: #1f2937;
    font-size: 13px;
    background: rgba(255,255,255,0.55);
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
    align-self: center;
}

/* Platform select panel (multi-subscription accounts). */
.lgn-platform {
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
    padding: 12px;
    margin-top: 8px;
}
.lgn-platform-hint {
    text-align: center;
    font-size: 13px;
    color: #464646;
    margin-bottom: 8px;
    line-height: 1.4;
}
.lgn-platform-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 10px 12px;
    border: 2px solid #00C98E;
    border-radius: 10px;
    background: #ffffff;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #2c2c2c;
    transition: box-shadow .12s ease;
}
.lgn-platform-row:hover { box-shadow: 0 8px 22px rgba(0,201,142,0.18); }

/* Mobile app banner. Class names .mobileappslink / .mobileappslinkclose
   are JS hooks — keep them. */
.lgn-mobile-banner {
    display: none;
    background: linear-gradient(180deg, rgba(0,201,142,0.95), rgba(0,176,122,0.95));
    color: #ffffff;
    padding: 10px 14px;
    text-align: center;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.lgn-mobile-banner__text { cursor: pointer; text-decoration: underline; }
.lgn-mobile-banner__close { cursor: pointer; font-size: 20px; }

/* Version-switch icon (v1 only). */
.lgn-version-switch {
    position: absolute;
    top: 10px;
    right: 14px;
    color: #1f2937;
    cursor: pointer;
    font-size: 16px;
    z-index: 2;
}

/* Optional advert panel rendered below the login card when
   Model.LoginAdvert is set. The cshtml paints the image via an inline
   `background-image: url('data:image/png;base64,...')`; this rule supplies
   the size, rounded corners and shadow. When a click-through URL is
   supplied, .lgn-advert-link enables the hover lift + pointer cursor and
   the inline onclick opens it in a new tab. Width matches the login card
   so the advert lines up directly underneath. */
.lgn-advert {
    display: block;
    margin: 20px auto 0;
    width: min(660px, 100%);
    height: 220px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    background-color: rgba(255,255,255,0.10);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .15s ease, box-shadow .15s ease;
}
.lgn-advert.lgn-advert-link {
    cursor: pointer;
}
.lgn-advert.lgn-advert-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(0,0,0,.45);
}

/* -------------------- Responsive: stack on small screens -------------------- */
@media (max-width: 760px) {
    .lgn-shell { padding: 12px 10px; align-items: flex-start; }
    .lgn-card {
        grid-template-columns: 1fr;     /* stack the two columns */
        border-radius: 18px;
    }
    /* Form first, info below — login is the primary action on mobile. */
    .lgn-form { order: 0; padding: 18px 16px 22px; }
    .lgn-info { order: 1; padding: 18px 16px; }
    .lgn-info-title { font-size: 24px; }
    .lgn-advert { height: 160px; }
}

/* Below 600px the advert can feel cramped — hide it so the card has the
   full focus on small phones (mirrors what registerflow.css does). */
@media (max-width: 600px) {
    .lgn-advert { display: none; }
}