/* ZLIX RESPONSIVE AUTH ENTRY POINTS v0.21.2d1b1b BEGIN */

:root {
    --zlix-auth-entry-max: 980px;
    --zlix-auth-entry-gutter: 24px;
}

/* ================================================================
 * DESKTOP
 * ================================================================ */

body.za-auth-page,
body.portal-login-page {
    min-height: 100vh;
    min-height: 100svh;
}

body.za-auth-page {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.za-auth-header-inner {
    min-height: 68px;
}

.za-auth-main {
    min-height: 0;
    display: flex;
    align-items: center;
    padding-block: 18px;
}

.za-auth-wrap {
    width: min(
        calc(
            100% -
            (var(--zlix-auth-entry-gutter) * 2)
        ),
        var(--zlix-auth-entry-max)
    );
    margin-inline: auto;
}

.za-auth-card {
    width: 100%;
    grid-template-columns:
        minmax(0, .88fr)
        minmax(420px, 1.12fr);
}

.za-auth-intro,
.za-auth-form-panel {
    padding: 32px 36px;
}

.za-auth-footer {
    padding-block: 8px;
}

.za-auth-footer-inner {
    min-height: 38px;
}

/* ================================================================
 * ADMIN BRAND
 * ================================================================ */

.za-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.za-auth-brand > img.za-auth-brand-mark {
    display: block;
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    object-fit: contain;
    flex: 0 0 40px;
}

.za-auth-brand-wordmark {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
    color: #123a5a;
}

.za-auth-brand-wordmark strong {
    font-size: 1.02rem;
    font-weight: 850;
    letter-spacing: -.02em;
}

.za-auth-brand-wordmark span {
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

/* ================================================================
 * PORTAL LOGIN
 * ================================================================ */

.portal-login-page {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.portal-login-page main {
    min-height: 0;
}

.portal-login-page .portal-auth-wrap {
    width: min(
        calc(
            100% -
            (var(--zlix-auth-entry-gutter) * 2)
        ),
        var(--zlix-auth-entry-max)
    );
    min-height: 100%;
    margin-inline: auto;
    padding-block: 18px;
    display: flex;
    align-items: center;
}

.portal-login-page .portal-auth-card {
    width: 100%;
    grid-template-columns:
        minmax(0, .88fr)
        minmax(420px, 1.12fr);
}

.portal-login-page .portal-auth-intro,
.portal-login-page .portal-auth-form-panel {
    padding: 32px 36px;
}

.portal-login-page footer {
    padding-block: 8px;
}

/* ================================================================
 * MEDIUM-WIDTH DESKTOP / LANDSCAPE TABLET
 * ================================================================ */

@media (max-width: 1100px) and (min-width: 761px) {
    :root {
        --zlix-auth-entry-gutter: 20px;
    }

    .za-auth-card,
    .portal-login-page .portal-auth-card {
        grid-template-columns:
            minmax(0, .82fr)
            minmax(390px, 1.18fr);
    }

    .za-auth-intro,
    .za-auth-form-panel,
    .portal-login-page .portal-auth-intro,
    .portal-login-page .portal-auth-form-panel {
        padding: 28px 30px;
    }
}

/* ================================================================
 * SHORT LAPTOP / DESKTOP VIEWPORTS
 *
 * Important for 1024x768-class machines where browser chrome leaves
 * substantially less than 768 CSS pixels of usable page height.
 * ================================================================ */

@media (min-width: 761px) and (max-height: 720px) {
    .za-auth-header-inner {
        min-height: 56px;
    }

    .za-auth-main,
    .portal-login-page .portal-auth-wrap {
        padding-block: 10px;
    }

    .za-auth-intro,
    .za-auth-form-panel,
    .portal-login-page .portal-auth-intro,
    .portal-login-page .portal-auth-form-panel {
        padding: 22px 28px;
    }

    .za-auth-intro h1,
    .portal-login-page .portal-auth-intro h1 {
        margin-bottom: 14px;
        font-size: clamp(2rem, 4vw, 2.65rem);
        line-height: 1.04;
    }

    .za-auth-heading h2,
    .portal-login-page .portal-card-heading h1 {
        margin-bottom: 6px;
        font-size: 2rem;
        line-height: 1.08;
    }

    .za-auth-feature-list,
    .za-auth-security-note,
    .portal-login-page .portal-feature-list {
        display: none !important;
    }

    .za-auth-intro > p:not(.za-auth-kicker),
    .portal-login-page
        .portal-auth-intro
        > p:not(.portal-kicker) {
        margin-bottom: 0;
    }

    .za-auth-field,
    .portal-login-page .portal-field {
        margin-bottom: 12px;
    }

    .za-auth-form-note,
    .portal-login-page .portal-form-note {
        margin-top: 10px;
    }

    .za-auth-help,
    .portal-login-page .portal-auth-support {
        margin-top: 12px;
        padding-top: 12px;
    }

    .za-auth-footer,
    .portal-login-page footer {
        padding-block: 5px;
        font-size: .72rem;
    }

    .za-auth-footer-inner {
        min-height: 30px;
    }
}

/* Very short desktop viewport:
 * prioritize authentication controls over secondary explanatory text.
 */

@media (min-width: 761px) and (max-height: 610px) {
    .za-auth-intro > p:not(.za-auth-kicker),
    .portal-login-page
        .portal-auth-intro
        > p:not(.portal-kicker),
    .za-auth-help,
    .portal-login-page .portal-auth-support {
        display: none !important;
    }

    .za-auth-intro,
    .za-auth-form-panel,
    .portal-login-page .portal-auth-intro,
    .portal-login-page .portal-auth-form-panel {
        padding-block: 18px;
    }
}

/* ================================================================
 * MOBILE / PORTRAIT TABLET
 * ================================================================ */

@media (max-width: 760px) {
    :root {
        --zlix-auth-entry-gutter: 14px;
    }

    body.za-auth-page,
    body.portal-login-page {
        display: block;
        min-height: 100vh;
        min-height: 100svh;
    }

    .za-auth-header-inner {
        min-height: 60px;
        gap: 12px;
    }

    .za-auth-brand > img.za-auth-brand-mark {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        flex-basis: 36px;
    }

    .za-auth-header-meta,
    .portal-login-page .portal-header-meta {
        gap: 7px;
    }

    .za-auth-product,
    .portal-login-page .portal-product {
        font-size: .82rem;
    }

    .za-auth-main,
    .portal-login-page .portal-auth-wrap {
        display: block;
        min-height: 0;
        padding-block: 14px 20px;
    }

    .za-auth-wrap,
    .portal-login-page .portal-auth-wrap {
        width: min(
            calc(
                100% -
                (var(--zlix-auth-entry-gutter) * 2)
            ),
            560px
        );
    }

    .za-auth-card,
    .portal-login-page .portal-auth-card {
        display: block;
        width: 100%;
    }

    /*
     * On phones the authentication action matters more than
     * promotional copy. Header + form still distinguish Admin
     * from Customer Portal clearly.
     */
    .za-auth-intro,
    .portal-login-page .portal-auth-intro {
        display: none !important;
    }

    .za-auth-form-panel,
    .portal-login-page .portal-auth-form-panel {
        padding: 22px 18px 20px;
    }

    .za-auth-heading h2,
    .portal-login-page .portal-card-heading h1 {
        font-size: 1.75rem;
        line-height: 1.1;
    }

    .za-auth-field,
    .portal-login-page .portal-field {
        margin-bottom: 14px;
    }

    .za-auth-submit,
    .portal-login-page .portal-button-primary {
        min-height: 46px;
    }

    .za-auth-footer,
    .portal-login-page footer {
        padding-block: 10px;
    }

    .za-auth-footer-inner,
    .portal-login-page footer > * {
        gap: 8px;
    }
}

@media (max-width: 460px) {
    .za-auth-header-meta,
    .portal-login-page .portal-header-meta {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .za-auth-environment,
    .portal-login-page .portal-environment {
        font-size: .66rem;
    }

    .za-auth-form-panel,
    .portal-login-page .portal-auth-form-panel {
        padding-inline: 16px;
    }

    .za-auth-footer-nav,
    .portal-login-page footer nav {
        flex-wrap: wrap;
    }
}

/* ZLIX RESPONSIVE AUTH ENTRY POINTS v0.21.2d1b1b END */

/* ZLIX AUTH COMMERCIAL POLISH v0.21.2d1b1b1 BEGIN */

/*
 * The original surface-specific auth layouts use large vertical
 * margins around the cards:
 *
 *   Admin:  54px top / 66px bottom
 *   Portal: 56px top / 68px bottom
 *
 * The responsive auth shell now owns vertical placement, so those
 * inherited margins must be removed. Leaving them in place creates
 * needless document overflow and causes the Portal card to sit lower
 * than the Admin card.
 */

.za-auth-wrap,
.portal-login-page .portal-auth-wrap {
    margin-block: 0;
}

/*
 * Keep both authentication entry points on the same geometry.
 * This affects Portal login only; authenticated Portal pages retain
 * their normal header/footer sizing.
 */

.za-auth-header-inner,
.portal-login-page .portal-header-inner {
    min-height: 60px;
}

/*
 * Let the middle grid row own all remaining viewport height.
 * Do not hide overflow: unusual zoom, accessibility text sizes,
 * virtual keyboards, and genuinely short screens must still scroll.
 */

.za-auth-main {
    min-height: 0;
    padding-block: 12px;
}

.portal-login-page .portal-main {
    min-height: 0;
    display: flex;
}

.portal-login-page .portal-auth-wrap {
    flex: 1 1 auto;
    min-height: 0;
    padding-block: 12px;
    align-items: center;
}

/*
 * Login pages do not need the tall marketing/application footer used
 * by a full Portal page. Keep all legal/navigation content, but use
 * the available space efficiently.
 */

.za-auth-footer-inner,
.portal-login-page .portal-footer-inner {
    min-height: 52px;
    padding-block: 6px;
}

.za-auth-footer-legal,
.portal-login-page .portal-footer-legal {
    gap: 2px;
    line-height: 1.25;
}

.portal-login-page .portal-footer-legal {
    font-size: .70rem;
}

.portal-login-page .portal-footer-legal strong {
    font-size: .76rem;
}

.portal-login-page .portal-footer-nav {
    gap: 6px 14px;
}

.portal-login-page .portal-footer-nav a {
    font-size: .74rem;
}

/*
 * Laptop/short-desktop tuning.
 *
 * Common 1024x768 desktops expose substantially less than 768 CSS
 * pixels after desktop panels and browser chrome. Keep the entire
 * normal login interaction visible without sacrificing field size.
 */

@media (min-width: 761px) and (max-height: 720px) {
    .za-auth-header-inner,
    .portal-login-page .portal-header-inner {
        min-height: 54px;
    }

    .za-auth-main,
    .portal-login-page .portal-auth-wrap {
        padding-block: 8px;
    }

    .za-auth-footer-inner,
    .portal-login-page .portal-footer-inner {
        min-height: 46px;
        padding-block: 4px;
    }

    .za-auth-intro,
    .za-auth-form-panel,
    .portal-login-page .portal-auth-intro,
    .portal-login-page .portal-auth-form-panel {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .za-auth-intro h1,
    .portal-login-page .portal-auth-intro h1 {
        font-size: clamp(
            1.95rem,
            3.7vw,
            2.45rem
        );
        line-height: 1.04;
    }
}

/*
 * Extremely short desktop windows may naturally scroll. The goal is
 * graceful degradation, not clipping.
 */

@media (min-width: 761px) and (max-height: 590px) {
    .za-auth-main,
    .portal-login-page .portal-auth-wrap {
        align-items: flex-start;
    }
}

/*
 * Mobile stays form-focused. Allow the footer to take natural height;
 * mobile scrolling is preferable to clipped legal/support content.
 */

@media (max-width: 760px) {
    .za-auth-header-inner,
    .portal-login-page .portal-header-inner {
        min-height: 58px;
    }

    .za-auth-main,
    .portal-login-page .portal-main {
        min-height: 0;
    }

    .za-auth-footer-inner,
    .portal-login-page .portal-footer-inner {
        min-height: 0;
        padding-block: 10px;
    }
}

/* ZLIX AUTH COMMERCIAL POLISH v0.21.2d1b1b1 END */

/* ZLIX AUTH SHELL PARITY v0.21.2d1b1b2 BEGIN */

/*
 * One Zlix authentication shell, two security contexts.
 *
 * Portal's historical .portal-auth-wrap contributes inline padding.
 * The shared responsive layer already owns the outer card inset.
 * Leaving that Portal-only padding in place makes the Portal card
 * grow nearly edge-to-edge while Admin retains the intended breathing
 * room.
 */

.za-auth-wrap,
.portal-login-page .portal-auth-wrap {
    box-sizing: border-box;

    width: min(
        calc(
            100% -
            (var(--zlix-auth-entry-gutter) * 2)
        ),
        var(--zlix-auth-entry-max)
    );

    margin-inline: auto;
}

.portal-login-page .portal-auth-wrap {
    padding-inline: 0;
}

.za-auth-card,
.portal-login-page .portal-auth-card {
    box-sizing: border-box;
    width: 100%;
    margin-inline: 0;
}

/*
 * Desktop/tablet uses exactly the same visual card split.
 * Copy remains context-specific; geometry does not.
 */

@media (min-width: 761px) {
    .za-auth-card,
    .portal-login-page .portal-auth-card {
        grid-template-columns:
            minmax(0, .82fr)
            minmax(390px, 1.18fr);
    }
}

/*
 * Preserve exactly the same outer inset contract on mobile.
 */

@media (max-width: 760px) {
    .za-auth-wrap,
    .portal-login-page .portal-auth-wrap {
        width: min(
            calc(
                100% -
                (var(--zlix-auth-entry-gutter) * 2)
            ),
            560px
        );

        padding-inline: 0;
    }
}

/* ZLIX AUTH SHELL PARITY v0.21.2d1b1b2 END */

/* ZLIX AUTH SHELL FINAL PARITY v0.21.2d1b1b3 BEGIN */

/*
 * Portal login uses a flex main region.
 *
 * An earlier login-specific rule gave .portal-auth-wrap:
 *
 *     flex: 1 1 auto;
 *
 * That allows the wrapper to grow across the available viewport,
 * defeating the shared width/max-width contract. Admin does not have
 * that growth behavior.
 *
 * Disable Portal flex growth so both surfaces obey the same centered
 * authentication-card geometry.
 */

.portal-login-page .portal-auth-wrap {
    flex: 0 1 auto;
}


/*
 * Authentication header branding standard.
 *
 * The Customer Portal's 42px mark and associated HTML wordmark are
 * the preferred sizing. Apply those same dimensions to both Admin
 * and Customer Portal without changing their application context.
 */

.za-auth-brand,
.portal-brand {
    gap: 9px;
}

.za-auth-brand > img.za-auth-brand-mark,
.portal-brand > img.portal-brand-mark {
    display: block;
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    flex: 0 0 42px;
    object-fit: contain;
}

.za-auth-brand-wordmark,
.portal-brand-wordmark {
    display: grid;
    gap: 0;
    line-height: 1;
}

.za-auth-brand-wordmark strong,
.portal-brand-wordmark strong {
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.za-auth-brand-wordmark span,
.portal-brand-wordmark span {
    margin-top: 3px;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}


/*
 * Keep the same brand proportions as the viewport narrows.
 */

@media (max-width: 700px) {
    .za-auth-brand,
    .portal-brand {
        gap: 7px;
    }

    .za-auth-brand > img.za-auth-brand-mark,
    .portal-brand > img.portal-brand-mark {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        flex-basis: 36px;
    }

    .za-auth-brand-wordmark strong,
    .portal-brand-wordmark strong {
        font-size: .98rem;
    }

    .za-auth-brand-wordmark span,
    .portal-brand-wordmark span {
        font-size: .50rem;
    }
}

@media (max-width: 430px) {
    .za-auth-brand > img.za-auth-brand-mark,
    .portal-brand > img.portal-brand-mark {
        width: 34px !important;
        height: 34px !important;
        max-width: 34px !important;
        flex-basis: 34px;
    }

    .za-auth-brand-wordmark strong,
    .portal-brand-wordmark strong {
        font-size: .92rem;
    }
}

/* ZLIX AUTH SHELL FINAL PARITY v0.21.2d1b1b3 END */