/*
============================================================
DCF_LOGIN_REDESIGN_V3
============================================================
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;
}


.login-page-body {
    min-height: 100vh;
    min-height: 100svh;

    overflow-x: hidden;

    background: #f8fafc;

    color: #102038;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


button,
input {
    font: inherit;
}



/* ============================================================
   SHELL
   ============================================================ */

.login-page-shell {
    display: grid;

    grid-template-columns:
        minmax(430px, 46%)
        minmax(0, 54%);

    min-height: 100vh;
    min-height: 100svh;
}



/* ============================================================
   BRAND SIDE
   ============================================================ */

.login-brand-panel {
    position: relative;

    min-width: 0;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 93% 8%,
            rgba(52, 211, 196, .28),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 94%,
            rgba(20, 184, 166, .15),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #07172b 0%,
            #08283c 55%,
            #073d46 100%
        );
}


.login-brand-panel::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .06;

    background-image:
        linear-gradient(
            rgba(255,255,255,.15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.15) 1px,
            transparent 1px
        );

    background-size:
        56px
        56px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 18%,
            #000 78%,
            transparent 100%
        );
}


.login-brand-decoration {
    position: absolute;

    pointer-events: none;

    border:
        1px solid
        rgba(94, 234, 212, .15);

    border-radius: 50%;
}


.login-brand-decoration-one {
    width: 360px;
    height: 360px;

    right: -180px;
    bottom: -90px;
}


.login-brand-decoration-two {
    width: 250px;
    height: 250px;

    right: -125px;
    bottom: -40px;
}


.login-brand-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    min-height: 100%;

    padding:
        clamp(48px, 7vw, 96px)
        clamp(42px, 6vw, 90px);
}


/* Logo placeholder */

.login-brand-logo {
    width: 82px;
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 34px;

    border:
        1px solid
        rgba(255,255,255,.19);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(45,212,191,.26),
            rgba(13,148,136,.14)
        );

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.18),
        inset
        0 1px 0
        rgba(255,255,255,.15);

    backdrop-filter:
        blur(8px);
}


.login-brand-logo span {
    color: #67e8d6;

    font-size: 26px;
    font-weight: 900;

    letter-spacing: -.04em;
}


.login-brand-copy {
    max-width: 600px;
}


.login-brand-copy h1 {
    margin: 0;

    font-size:
        clamp(
            46px,
            4.4vw,
            70px
        );

    line-height: 1.07;

    letter-spacing: -.045em;

    font-weight: 800;
}


.login-brand-welcome {
    display: block;

    color: #ffffff;
}


.login-brand-copy h1 strong {
    display: block;

    margin-top: 4px;

    color: #59ddcf;

    font-weight: 800;
}


.login-brand-copy p {
    margin:
        26px
        0
        0;

    max-width: 520px;

    color: #c7d8e4;

    font-size: 18px;

    line-height: 1.6;
}


.login-mobile-brand-copy {
    display: none;
}



/* ============================================================
   FORM SIDE
   ============================================================ */

.login-form-panel {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    min-height: 100svh;

    padding:
        52px
        clamp(42px, 7vw, 104px);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(45, 212, 191, .08),
            transparent 26%
        ),
        #ffffff;
}


.login-form-container {
    width: min(
        100%,
        570px
    );
}


.login-heading {
    margin-bottom: 38px;
}


.login-heading h2 {
    margin: 0;

    color: #0f1d34;

    font-size:
        clamp(
            38px,
            4vw,
            52px
        );

    line-height: 1.08;

    letter-spacing: -.035em;

    font-weight: 800;
}


.login-heading p {
    margin:
        12px
        0
        0;

    color: #697a91;

    font-size: 17px;

    line-height: 1.55;
}



/* ============================================================
   FORM
   ============================================================ */

.login-form {
    display: grid;

    gap: 22px;
}


.login-field {
    display: grid;

    gap: 8px;
}


.login-field label {
    color: #132039;

    font-size: 14px;
    font-weight: 750;
}


.login-input-wrap {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 58px;

    border:
        1px solid
        #d5dde7;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0
        1px
        2px
        rgba(15, 23, 42, .02);

    transition:
        border-color .16s ease,
        box-shadow .16s ease;
}


.login-input-wrap:hover {
    border-color:
        #b8c4d2;
}


.login-input-wrap:focus-within {
    border-color:
        #0f9f91;

    box-shadow:
        0
        0
        0
        4px
        rgba(15, 159, 145, .11);
}


.login-input-wrap.has-error {
    border-color:
        #dc2626;
}


.login-input-wrap.has-error:focus-within {
    box-shadow:
        0
        0
        0
        4px
        rgba(220, 38, 38, .10);
}


.login-input-icon {
    position: absolute;

    left: 18px;

    width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;

    color: #8291a5;

    font-size: 18px;
    font-weight: 750;
}


.login-input-icon svg {
    width: 20px;
    height: 20px;
}


.login-input-wrap input {
    width: 100%;
    height: 56px;

    padding:
        0
        56px
        0
        54px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #132039;

    font-size: 16px;
}


.login-input-wrap input::placeholder {
    color: #a0aec0;
}


.login-password-toggle {
    position: absolute;

    right: 8px;

    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: #59687b;

    cursor: pointer;

    transition:
        color .15s ease,
        background-color .15s ease;
}


.login-password-toggle:hover {
    color: #15243a;

    background: #f1f5f9;
}


.login-password-toggle:focus-visible {
    outline:
        3px solid
        rgba(13, 148, 136, .22);

    outline-offset: 1px;
}


.login-eye-icon {
    width: 21px;
    height: 21px;
}


.login-eye-icon.is-hidden {
    display: none;
}



/* ============================================================
   OPTIONS
   ============================================================ */

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: -2px;
}


.login-remember {
    display: inline-flex;
    align-items: center;

    min-height: 44px;

    gap: 10px;

    color: #5f6f83;

    font-size: 14px;

    cursor: pointer;
}


.login-remember input {
    width: 20px;
    height: 20px;

    margin: 0;

    accent-color: #0f9488;

    cursor: pointer;
}


.login-support-link {
    min-height: 44px;

    display: inline-flex;
    align-items: center;

    color: #087d73;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}


.login-support-link:hover {
    color: #065f57;

    text-decoration: underline;
}


.login-support-link:focus-visible {
    outline:
        3px solid
        rgba(13, 148, 136, .20);

    outline-offset: 3px;

    border-radius: 4px;
}



/* ============================================================
   SUBMIT
   ============================================================ */

.login-submit {
    width: 100%;
    min-height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    margin-top: 2px;

    padding:
        12px
        24px;

    border: 0;
    border-radius: 14px;

    background:
        linear-gradient(
            90deg,
            #12aa99,
            #0d8e82
        );

    color: #ffffff;

    box-shadow:
        0
        12px
        28px
        rgba(13, 148, 136, .18);

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}


.login-submit svg {
    width: 20px;
    height: 20px;
}


.login-submit:hover {
    filter:
        brightness(.96);

    transform:
        translateY(-1px);

    box-shadow:
        0
        15px
        32px
        rgba(13, 148, 136, .23);
}


.login-submit:active {
    transform:
        translateY(0);
}


.login-submit:focus-visible {
    outline:
        4px solid
        rgba(13, 148, 136, .22);

    outline-offset: 3px;
}



/* ============================================================
   DIALOG
   ============================================================ */

.login-feedback-dialog {
    width:
        min(
            430px,
            calc(100vw - 32px)
        );

    padding: 0;

    border: 0;
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0
        25px
        75px
        rgba(15, 23, 42, .30);
}


.login-feedback-dialog::backdrop {
    background:
        rgba(15, 23, 42, .58);

    backdrop-filter:
        blur(3px);
}


.login-dialog-content {
    padding: 26px;

    text-align: center;
}


.login-dialog-icon {
    width: 52px;
    height: 52px;

    margin:
        0
        auto
        15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fee2e2;

    color: #b91c1c;

    font-size: 27px;
    font-weight: 900;
}


.login-feedback-dialog.is-warning
.login-dialog-icon {
    background: #ffedd5;

    color: #c2410c;
}


.login-feedback-dialog.is-success
.login-dialog-icon {
    background: #dcfce7;

    color: #15803d;
}


.login-dialog-icon.is-support {
    background: #ccfbf1;

    color: #0f766e;
}


.login-dialog-content h3 {
    margin:
        0
        0
        9px;

    color: #142137;

    font-size: 21px;
}


.login-dialog-content p,
.login-dialog-content li {
    color: #64748b;

    font-size: 14px;

    line-height: 1.55;
}


.login-dialog-content ul {
    padding-left: 20px;

    text-align: left;
}


.login-dialog-ok {
    min-width: 110px;
    min-height: 42px;

    margin-top: 15px;

    padding:
        8px
        18px;

    border: 0;
    border-radius: 9px;

    background: #0f9488;

    color: #ffffff;

    font-weight: 750;

    cursor: pointer;
}



/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1050px) {

    .login-page-shell {
        grid-template-columns:
            minmax(350px, 42%)
            minmax(0, 58%);
    }


    .login-brand-content {
        padding:
            48px
            38px;
    }


    .login-brand-copy h1 {
        font-size:
            clamp(
                40px,
                5vw,
                54px
            );
    }


    .login-form-panel {
        padding:
            44px
            38px;
    }

}



/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .login-page-shell {
        display: grid;

        grid-template-columns: 1fr;
        grid-template-rows:
            auto
            minmax(0, 1fr);

        min-height: 100svh;
    }


    /*
     * Large desktop brand panel becomes a compact
     * mobile header rather than disappearing.
     */
    .login-brand-panel {
        min-height: 138px;
    }


    .login-brand-panel::before,
    .login-brand-decoration {
        display: none;
    }


    .login-brand-content {
        min-height: 138px;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;

        gap: 15px;

        padding:
            20px
            22px;
    }


    .login-brand-logo {
        width: 58px;
        height: 58px;

        flex:
            0
            0
            58px;

        margin: 0;

        border-radius: 16px;
    }


    .login-brand-logo span {
        font-size: 20px;
    }


    .login-brand-copy {
        display: none;
    }


    .login-mobile-brand-copy {
        display: flex;
        flex-direction: column;

        gap: 3px;
    }


    .login-mobile-brand-copy strong {
        color: #ffffff;

        font-size: 23px;

        line-height: 1.15;
    }


    .login-mobile-brand-copy span {
        color: #b8d4dc;

        font-size: 13px;
    }


    .login-form-panel {
        min-height:
            calc(
                100svh
                - 138px
            );

        align-items: flex-start;

        padding:
            34px
            20px
            42px;
    }


    .login-form-container {
        width: 100%;
        max-width: 520px;

        margin:
            0
            auto;
    }


    .login-heading {
        margin-bottom: 28px;
    }


    .login-heading h2 {
        font-size: 34px;
    }


    .login-heading p {
        margin-top: 9px;

        font-size: 15px;
    }


    .login-form {
        gap: 18px;
    }


    .login-input-wrap {
        min-height: 54px;
    }


    .login-input-wrap input {
        height: 52px;

        font-size: 16px;
    }


    .login-submit {
        min-height: 54px;
    }

}



/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 430px) {

    .login-brand-panel,
    .login-brand-content {
        min-height: 118px;
    }


    .login-brand-content {
        padding:
            16px
            18px;
    }


    .login-brand-logo {
        width: 52px;
        height: 52px;

        flex-basis: 52px;
    }


    .login-mobile-brand-copy strong {
        font-size: 21px;
    }


    .login-form-panel {
        min-height:
            calc(
                100svh
                - 118px
            );

        padding:
            28px
            16px
            34px;
    }


    .login-heading h2 {
        font-size: 31px;
    }


    .login-options {
        align-items: flex-start;

        gap: 10px;

        flex-direction: column;
    }


    .login-support-link {
        margin-top: -5px;
    }

}



/* ============================================================
   SHORT DESKTOP SCREENS
   ============================================================ */

@media (min-width: 761px) and (max-height: 720px) {

    .login-brand-content {
        padding-top: 34px;
        padding-bottom: 34px;
    }


    .login-brand-logo {
        width: 68px;
        height: 68px;

        margin-bottom: 24px;
    }


    .login-brand-copy h1 {
        font-size: 48px;
    }


    .login-brand-copy p {
        margin-top: 18px;
    }


    .login-form-panel {
        padding-top: 32px;
        padding-bottom: 32px;
    }


    .login-heading {
        margin-bottom: 26px;
    }

}



/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}