/* Full-Screen Visual/Brand -- ported from the supplied elvis-fullscreen-login.html reference.
   Fully self-contained: every rule is scoped under .login-fullscreen so this file can be edited
   without any risk of affecting Split or Minimal, and vice versa. Named .btn-signin (not .btn)
   to avoid colliding with Bootstrap's own .btn reset, which this page also loads globally.
   Properties with an exact, viewport-independent Bootstrap utility equivalent (flex/position/
   text-align/w-100/h-100) are applied as classes on the elements in _LoginLayoutFullScreen.cshtml
   instead of being redeclared here. .hero and .form-card are the exception -- their `position`
   itself flips (absolute -> relative) in the 780px media query below, so it has to stay as real
   CSS rather than a static utility class. */
.login-fullscreen {
    width: 100%;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    background: #dfe9f5;
    color: #122041;
}

.login-fullscreen .hero {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 24, 48, .73) 0%, rgba(8, 24, 48, .45) 38%, rgba(8, 24, 48, .10) 68%, rgba(8, 24, 48, 0) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)),
        url("/images/login/fullscreen-hero.jpg") center/cover no-repeat;
}

.login-fullscreen .hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 30%;
    background: linear-gradient(180deg, transparent, rgba(5, 16, 31, .60));
}

.login-fullscreen .brand {
    top: 32px;
    left: 56px;
    z-index: 5;
    gap: 12px;
    color: #fff;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.03em;
}

.login-fullscreen .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
    display: grid;
    place-items: center;
    backdrop-filter: blur(8px);
}

.login-fullscreen .brand-mark i {
    font-size: 21px;
}

/* An actual organization logo comes in its own aspect ratio and usually a transparent background --
   the boxed/badge look above (fixed square, translucent fill) is only right for the icon fallback,
   so a real logo drops that box. Fixed width + height:auto (not a percentage height, which resolved
   against whatever ancestor happened to have an explicit height and blew the logo up huge) keeps it
   at a nominal, proportional size regardless of the source image's own dimensions. */
.login-fullscreen .brand-mark.brand-mark-logo {
    width: auto;
    height: auto;
    background: none;
    backdrop-filter: none;
    border-radius: 0;
}

/* Same max-height cap as login-split.css's .logo-slot-logo img, for the same reason -- a portrait/
   near-square logo scaled to width:150px alone could render tall enough to crowd the copy panel
   below it. */
.login-fullscreen .brand-mark-logo img {
    width: auto;
    max-width: 150px;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

.login-fullscreen .copy {
    left: 56px;
    top: 20%;
    z-index: 4;
    width: 42%;
    max-width: 640px;
    color: #fff;
}

.login-fullscreen .copy h1 {
    font-size: clamp(38px, 3.6vw, 62px);
    line-height: .98;
    margin: 0;
    letter-spacing: -.05em;
    font-weight: 800;
}

.login-fullscreen .copy h1 span {
    color: #77ddc0;
}

.login-fullscreen .copy p {
    font-size: 17px;
    line-height: 1.55;
    max-width: 500px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, .92);
}

.login-fullscreen .divider {
    width: 54px;
    height: 3px;
    background: #72ddbf;
    margin: 24px 0;
}

.login-fullscreen .quote {
    width: 380px;
    margin-top: 28px;
    padding: 18px 22px;
    border-radius: 16px;
    background: rgba(13, 28, 50, .48);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
}

.login-fullscreen .quote .quote-mark {
    font-size: 30px;
    color: #72e2bf;
    line-height: .5;
    font-weight: 800;
}

.login-fullscreen .quote p {
    font-size: 13px;
    line-height: 1.5;
    margin: 10px 0;
    color: #fff;
}

.login-fullscreen .quote small {
    color: rgba(255, 255, 255, .78);
}

.login-fullscreen .form-card {
    position: absolute;
    z-index: 7;
    right: 5.2%;
    top: 6%;
    width: 380px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 28px 28px 26px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 24px 80px rgba(9, 22, 47, .24);
    backdrop-filter: blur(14px);
}

.login-fullscreen .form-card .cap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f0faf7;
    display: grid;
    place-items: center;
    color: #159875;
    margin: 0 auto 16px;
}

.login-fullscreen .form-card .cap i {
    font-size: 22px;
}

.login-fullscreen .form-card h2 {
    font-size: 26px;
    letter-spacing: -.035em;
    margin: 0;
}

.login-fullscreen .form-card .sub {
    color: #77829a;
    margin: 8px 0 24px;
}

.login-fullscreen .form-card label {
    font-size: 13px;
    font-weight: 700;
    color: #1b2741;
    margin: 0 0 8px;
}

.login-fullscreen .form-card .field {
    margin-bottom: 15px;
}

.login-fullscreen .form-card .input {
    height: 46px;
    border: 1px solid #dce2ea;
    border-radius: 10px;
    gap: 10px;
    padding: 0 13px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(26, 44, 84, .03);
}

.login-fullscreen .form-card .input > i {
    font-size: 17px;
    color: #73829c;
    flex: none;
}

.login-fullscreen .form-card .input input {
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 14px;
    color: #1c2946;
}

.login-fullscreen .form-card .input input::placeholder {
    color: #8c98ac;
}

.login-fullscreen .form-card .pass .eye {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: #76839d;
    padding: 3px;
    cursor: pointer;
}

.login-fullscreen .form-card .pass .eye i {
    font-size: 17px;
}

.login-fullscreen .form-card .forgot {
    margin: -2px 0 16px;
}

.login-fullscreen .form-card .forgot a {
    color: #4f46e5;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.login-fullscreen .form-card .btn-signin {
    height: 48px;
    border: 0;
    border-radius: 10px;
    background: #159875;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    font-family: var(--login-font-family, "Inter", sans-serif);
    box-shadow: 0 10px 24px rgba(21, 152, 117, .20);
    cursor: pointer;
}

.login-fullscreen .form-card .btn-signin:hover {
    background: #128163;
}

.login-fullscreen .form-card .contact {
    color: #7c879b;
    font-size: 12px;
    margin: 16px 0 0;
}

.login-fullscreen .form-card .contact a {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 700;
}

.login-fullscreen .dots {
    right: 30px;
    bottom: 24px;
    width: 170px;
    height: 140px;
    opacity: .28;
    background-image: radial-gradient(#fff 1.2px, transparent 1.2px);
    background-size: 18px 18px;
    z-index: 2;
}

@media (max-width: 1000px) {
    .login-fullscreen .copy {
        width: 48%;
    }

    .login-fullscreen .form-card {
        right: 3%;
        width: 340px;
    }

    .login-fullscreen .copy p {
        font-size: 15px;
    }
}

@media (max-width: 780px) {
    /* Full redesign per explicit spec: mobile drops the desktop split-screen/background entirely
       (hero photo, org headline+description, testimonial) and becomes a single clean column --
       Elvis logo, then the form-card's OWN compact "Welcome back" greeting, then the login form.
       Nothing here touches the desktop rules above; every override is still scoped under
       .login-fullscreen and only fires at this breakpoint. */
    .login-fullscreen {
        height: auto;
        min-height: 100vh;
        overflow: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 28px 20px;
        box-sizing: border-box;
    }

    .login-fullscreen .copy,
    .login-fullscreen .quote,
    .login-fullscreen .dots {
        display: none;
    }

    /* Per explicit request: the hero photo comes back as a full-page backdrop behind the logo and
       login card (rather than the marketing headline/testimonial, which stay hidden). `fixed` +
       `inset:0` makes it always cover the whole viewport regardless of scroll, independent of
       .login-fullscreen's own height/overflow; its z-index sits behind .brand/.form-card (z-index
       5 and 7, set in the base rules above and unaffected by this media query). */
    .login-fullscreen .hero {
        position: fixed;
        inset: 0;
        z-index: 0;
    }

    /* The logo: normal flow (no longer position:absolute -- that was the original overlap bug),
       centered, sitting on top of the hero photo rather than its own banner/gradient, to match the
       "clean premium SaaS" look and keep vertical space for the form. */
    .login-fullscreen .brand {
        position: relative !important;
        top: auto;
        left: auto;
        justify-content: center;
        width: 100%;
        margin: 0 0 24px;
    }

    .login-fullscreen .brand-mark-logo img {
        max-width: 130px;
        max-height: 48px;
    }

    /* The form-card becomes the whole screen's content, not an overlay -- full width up to a
       comfortable cap, normal flow, no backdrop-blur (nothing behind it to blur any more). */
    .login-fullscreen .form-card {
        position: relative !important;
        right: auto;
        top: auto;
        width: 100%;
        max-width: 420px;
        max-height: none;
        padding: 24px 22px 22px;
        border-radius: 18px;
        background: #ffffff;
        backdrop-filter: none;
        box-shadow: 0 8px 28px rgba(9, 22, 47, .10);
        margin: 0;
    }

    /* The circular "cap" icon duplicates the Elvis logo already shown above it on mobile --
       dropping it keeps the greeting compact and avoids redundant branding in a short viewport. */
    .login-fullscreen .form-card .cap {
        display: none;
    }

    .login-fullscreen .form-card h2 {
        font-size: 24px;
    }

    .login-fullscreen .form-card .sub {
        font-size: 15px;
        margin: 6px 0 20px;
    }

    /* Touch-friendly sizing (spec: ~52-56px) -- desktop keeps its 46px/48px sizing untouched. */
    .login-fullscreen .form-card .input {
        height: 54px;
        border-radius: 12px;
    }

    .login-fullscreen .form-card .input input {
        font-size: 16px;
    }

    .login-fullscreen .form-card .btn-signin {
        height: 54px;
        border-radius: 12px;
        font-size: 16px;
    }

    .login-fullscreen .form-card .forgot {
        margin: 2px 0 20px;
        padding: 4px 0;
    }

    .login-fullscreen .form-card .forgot a {
        font-size: 14px;
    }
}