/* ==========================================================================
   Login screen — responsive layer (professional / modern)
   --------------------------------------------------------------------------
   The desktop (>=1200px) composition defined in loginscreen.css and the
   page's inline styles is left 100% untouched: every rule below lives
   inside a max-width media query.

   Breakpoint strategy
   - >=1200px  : original design, no overrides
   - 992-1199px: keep the split layout, re-anchor the card so it stays
                 balanced at laptop widths
   - <=991px   : stack — brand hero on top, overlapping form card below
   - <=575px   : phone refinements
   - <=359px   : very small phones
   - short landscape phones: compress the hero so the form stays usable
   ========================================================================== */

/* Shared design tokens (inert unless referenced inside the queries below) */
.login-page {
    --lgn-primary: #496aa1;
    --lgn-primary-dark: #2e4a7a;
    --lgn-primary-deep: #1d3557;
    --lgn-accent: #8aa4d6;
    --lgn-ink: #1e293b;
    --lgn-muted: #64748b;
    --lgn-line: #dbe3ef;
    --lgn-surface: #eef2f9;
    --lgn-ring: rgba(73, 106, 161, 0.16);
}

/* Guard against accidental horizontal scroll on any viewport
   (harmless on desktop: the layout never exceeds 100vw). */
.login-page-document,
.login-page-document body {
    max-width: 100%;
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   1) Laptop / small desktop: 992px – 1199px
   The original card is position:absolute with width:28% (inline) and
   margin-left:-9%, tuned for wide monitors. At laptop widths that pushes
   the card off-balance, so re-anchor it inside the right column while
   keeping the signature overlap onto the artwork.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .login-page .login-panel {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-page .login-card {
        position: static;
        box-sizing: border-box;
        width: 122% !important;
        max-width: 24.5rem;
        margin: 0 0 0 -28% !important;
        padding: 1.75rem 1.5rem !important;
        border-radius: 1.1rem !important;
        box-shadow: 0 10px 40px -6px rgba(73, 106, 161, 0.55);
    }

    .login-page .login-card > p,
    .login-page .login-card > h1 {
        margin-right: .5rem !important;
        margin-left: .5rem !important;
    }
}

/* --------------------------------------------------------------------------
   2) Tablets and below: stack the two panels
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .login-page {
        min-width: 0;
        background:
            radial-gradient(50rem 30rem at 110% 105%, rgba(73, 106, 161, 0.10), transparent 60%),
            radial-gradient(40rem 26rem at -15% 70%, rgba(138, 164, 214, 0.12), transparent 60%),
            var(--lgn-surface);
        font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .login-page-shell {
        min-height: 100svh;
        padding-inline: 0;
    }

    .login-page-row {
        display: flex;
        flex-direction: column;
        min-height: 100svh;
        min-width: 0;
        margin-inline: 0;
    }

    .login-page .login-visual,
    .login-page .login-panel {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-inline: 0;
    }

    /* ================= Brand hero ================= */
    .login-page .adjust {
        position: relative;
        display: flex;
        height: clamp(14rem, 34svh, 19rem);
        min-height: 14rem;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background-position: center 30%;
    }

    /* Cinematic scrim: deep navy top-left sweep keeps brand art rich and
       gives the logo guaranteed contrast on any part of the artwork. */
    .login-page .adjust::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(160deg,
                rgba(19, 34, 61, 0.68) 0%,
                rgba(29, 53, 87, 0.38) 42%,
                rgba(29, 53, 87, 0.18) 68%,
                rgba(19, 34, 61, 0.62) 100%);
        pointer-events: none;
    }

    .login-page .size {
        position: relative;
        z-index: 1;
        width: min(62vw, 15rem);
        height: auto;
        margin: 0 auto;
        margin-top: -2.5rem;               /* optical center above the overlapping card */
        filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.45));
        animation: lgn-fade-down .6s ease both;
    }

    /* The markup places .footer inside the hero (.adjust). On desktop the
       hero spans the full viewport, so "hero bottom" = page bottom. Once
       stacked, the hero is only a top strip — so re-anchor the footer to
       the VIEWPORT bottom, where a page footer belongs. */
    .login-page .footer {
        position: fixed;
        z-index: 5;
        right: 0;
        bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
        left: 0;
        top: auto;
        display: flex;
        width: auto;
        height: auto;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        margin: 0;
        padding-inline: 1.25rem;
        pointer-events: none;              /* never blocks taps on the form */
    }

    .login-page .logo {
        flex: 0 0 auto;
        width: 2.1rem;
        height: auto;
        margin-right: 0;
    }

    /* Footer now sits on the light page background — muted slate, no shadow.
       Full text always visible: wraps to multiple lines instead of truncating. */
    .login-page .font {
        max-width: calc(100vw - 5rem);
        margin: 0;
        color: #8a94a6;
        font-size: .625rem;
        font-weight: 500;
        letter-spacing: .01em;
        line-height: 1.35;
        white-space: normal;
        overflow-wrap: break-word;
        text-align: center;
    }

    /* ================= Form panel ================= */
    .login-page .login-panel {
        flex: 1 1 auto;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        /* extra bottom padding clears the fixed powered-by footer (up to 2 lines) */
        padding: 0 1.25rem calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    /* Neutralize the desktop absolute positioning + inline width */
    .login-page .login-card {
        box-sizing: border-box;
        position: relative;
        inset: auto;
        z-index: 2;
        min-width: 0;
        width: 100% !important;
        max-width: 27rem;
        margin: -2.75rem auto 0 !important;   /* card overlaps hero */
        padding: 1.9rem 1.6rem 1.75rem !important;
        border: 1px solid rgba(255, 255, 255, 0.75);
        border-radius: 1.25rem !important;
        background: rgba(255, 255, 255, 0.96);
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 24px 48px -16px rgba(29, 53, 87, 0.35);
        animation: lgn-fade-up .55s ease .1s both;
    }

    .login-page .login-card > p,
    .login-page .login-card > h1,
    .login-page .login-card > hr {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Eyebrow */
    .login-page .login-card > p {
        margin-top: 0 !important;
        margin-bottom: .3rem;
        color: var(--lgn-muted);
        font-size: .8125rem;
        font-weight: 500;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    /* Title — keep the theme's gradient text, refine scale & weight */
    .login-page .login-card > h1 {
        margin-bottom: .65rem;
        font-size: 1.85rem;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.15;
    }

    /* Divider — gradient accent bar instead of a plain rule */
    .login-page .login-card > hr {
        width: 3.25rem;
        height: 4px;
        margin: 0 auto 1.5rem;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--lgn-primary-deep), var(--lgn-primary) 55%, var(--lgn-accent));
        opacity: 1;
    }

    .login-page .login-card .alert {
        margin-bottom: 1.1rem;
        padding: .7rem .9rem;
        border-radius: .6rem;
        font-size: .8rem;
    }

    /* ================= Fields ================= */
    .login-page .login-card form .mb-3 {
        margin-bottom: 1.1rem !important;
    }

    .login-page .login-card .form-label {
        margin-bottom: .45rem;
        color: #334155;
        font-size: .8125rem;
        font-weight: 600;
        letter-spacing: .01em;
    }

    .login-page .login-card .form-control,
    .login-page .login-card .input-group-text {
        min-height: 2.9rem;
        border-color: var(--lgn-line);
        background: #fbfcfe;
        transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }

    .login-page .login-card .form-control {
        padding: .55rem .9rem;
        border-radius: .65rem;
        color: var(--lgn-ink);
        font-size: .92rem;
        box-shadow: none;
    }

    .login-page .login-card .form-control::placeholder {
        color: #9aa7ba;
    }

    .login-page .login-card .form-control:focus {
        border-color: var(--lgn-primary);
        background: #fff;
        box-shadow: 0 0 0 4px var(--lgn-ring);
    }

    /* Password group reads as ONE control */
    .login-page .login-card .input-group .form-control {
        border-right: 0;
        border-radius: .65rem 0 0 .65rem;
    }

    .login-page .login-card .input-group .form-control:focus {
        box-shadow: none;   /* the ring is drawn on the whole group instead */
    }

    .login-page .login-card .input-group-text {
        display: grid;
        place-items: center;
        min-width: 2.9rem;
        border-left: 0;
        border-radius: 0 .65rem .65rem 0;
        color: #94a3b8;
    }

    .login-page .login-card .input-group {
        border-radius: .65rem;
        transition: box-shadow .18s ease;
    }

    .login-page .login-card .input-group:focus-within {
        box-shadow: 0 0 0 4px var(--lgn-ring);
    }

    .login-page .login-card .input-group:focus-within .form-control,
    .login-page .login-card .input-group:focus-within .input-group-text {
        border-color: var(--lgn-primary);
        background: #fff;
    }

    .login-page .login-card .input-group-text:hover {
        color: var(--lgn-primary);
    }

    /* Autofill: keep fields white, not browser yellow */
    .login-page .login-card .form-control:-webkit-autofill,
    .login-page .login-card .form-control:-webkit-autofill:hover,
    .login-page .login-card .form-control:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #fff inset;
        -webkit-text-fill-color: var(--lgn-ink);
    }

    /* ================= Remember me ================= */
    .login-page .login-card .form-check {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-height: 1.5rem;
        padding-left: 0;
    }

    .login-page .login-card .form-check-input {
        position: static;
        flex: 0 0 auto;
        width: 1.05rem;
        height: 1.05rem;
        margin: 0;
        border: 1.5px solid #cbd5e1;
        border-radius: .3rem;
        cursor: pointer;
    }

    .login-page .login-card .form-check-input:checked {
        background-color: var(--lgn-primary);
        border-color: var(--lgn-primary);
    }

    .login-page .login-card .form-check-input:focus {
        border-color: var(--lgn-primary);
        box-shadow: 0 0 0 3px var(--lgn-ring);
    }

    .login-page .login-card .form-check-label {
        color: var(--lgn-muted);
        font-size: .8125rem;
        cursor: pointer;
        user-select: none;
    }

    /* ================= Submit ================= */
    .login-page .login-card .btn.btn-dark {
        width: 100%;
        min-height: 3rem;
        margin-bottom: 0 !important;
        border: 0;
        border-radius: .7rem;
        background: linear-gradient(120deg, var(--lgn-primary-deep) 0%, var(--lgn-primary) 60%, var(--lgn-accent) 140%);
        background-size: 150% 100%;
        font-size: .95rem;
        font-weight: 600;
        letter-spacing: .04em;
        box-shadow: 0 10px 22px -8px rgba(29, 53, 87, 0.55);
        transition: background-position .3s ease, transform .18s ease, box-shadow .18s ease;
    }

    .login-page .login-card .btn.btn-dark:hover,
    .login-page .login-card .btn.btn-dark:active {
        background-position: 90% 0;
        transform: translateY(-1px);
        box-shadow: 0 14px 26px -10px rgba(29, 53, 87, 0.6);
    }

    .login-page .login-card .btn.btn-dark:focus,
    .login-page .login-card .btn.btn-dark:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px var(--lgn-ring), 0 10px 22px -8px rgba(29, 53, 87, 0.55);
    }

    .login-page .login-card form .text-center {
        margin-top: 1.35rem;
    }
}

/* --------------------------------------------------------------------------
   3) Larger tablets get a roomier card (aligned with the hero width)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) and (min-width: 576px) {
    .login-page .login-card {
        max-width: 28.5rem;
        padding: 2.1rem 2rem 1.9rem !important;
    }

    .login-page .adjust {
        height: clamp(15rem, 36svh, 21rem);
    }

    .login-page .size {
        width: min(42vw, 16rem);
    }
}

/* --------------------------------------------------------------------------
   4) Phones: <=575px
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .login-page .adjust {
        height: clamp(12.5rem, 32svh, 15.5rem);
        min-height: 12.5rem;
    }

    .login-page .size {
        width: min(66vw, 13.5rem);
    }

    .login-page .login-panel {
        padding-inline: 1rem;
    }

    .login-page .login-card {
        max-width: 25.5rem;
        margin-top: -2.5rem !important;
        padding: 1.6rem 1.3rem 1.5rem !important;
        border-radius: 1.1rem !important;
    }

    .login-page .login-card > h1 {
        font-size: 1.6rem;
    }

    /* 16px inputs prevent iOS Safari zoom-on-focus */
    .login-page .login-card .form-control {
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   5) Very small phones: <=359px
   -------------------------------------------------------------------------- */
@media (max-width: 359.98px) {
    .login-page .adjust {
        height: 11.5rem;
        min-height: 11.5rem;
    }

    .login-page .size {
        width: 70vw;
    }

    .login-page .login-panel {
        padding-inline: .75rem;
    }

    .login-page .login-card {
        margin-top: -2.25rem !important;
        padding: 1.3rem 1rem 1.25rem !important;
    }

    .login-page .login-card > h1 {
        font-size: 1.45rem;
    }
}

/* --------------------------------------------------------------------------
   6) Short landscape phones (rotated devices)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) and (max-height: 640px) {
    .login-page .adjust {
        height: 10rem;
        min-height: 10rem;
    }

    .login-page .size {
        width: min(38vw, 11rem);
        margin-top: -1.8rem;
    }

    .login-page .login-card {
        margin-top: -1.9rem !important;
        padding: 1.2rem 1.2rem 1.1rem !important;
    }

    .login-page .login-card > p {
        margin-bottom: .2rem;
    }

    .login-page .login-card > h1 {
        margin-bottom: .4rem;
        font-size: 1.4rem;
    }

    .login-page .login-card > hr {
        margin-bottom: .9rem;
    }

    .login-page .login-card form .mb-3 {
        margin-bottom: .75rem !important;
    }

    .login-page .login-card form .text-center {
        margin-top: .9rem;
    }
}

/* --------------------------------------------------------------------------
   Animations & accessibility
   -------------------------------------------------------------------------- */
@keyframes lgn-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes lgn-fade-down {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .login-page *,
    .login-page *::before,
    .login-page *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}