/* =========================================================
   Auth Pages - Login Layout
   ========================================================= */

/* =========================================================
   Login Page — reference-match redesign (lgn-* classes)
   ========================================================= */

.lgn-page {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #f2f2f2;
}

.lgn-card {
    display: flex;
    width: min(1060px, 100%);
    min-height: 620px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .10);
    overflow: hidden;
    animation: lgn-enter .5s ease;
}

@keyframes lgn-enter {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ---- LEFT: Form side ---- */
.lgn-form-side {
    flex: 1;
    padding: 3.2rem 3.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lgn-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2.25rem;
    font-weight: 800;
    color: #111;
    margin-bottom: .5rem;
}

.lgn-sub {
    font-size: .88rem;
    color: #999;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 330px;
}

.lgn-sub strong { color: #666; }

.lgn-alert {
    background: #fdecea;
    border: 1px solid #f5c6c6;
    color: #c62828;
    border-radius: 50px;
    padding: .65rem 1.3rem;
    font-size: .85rem;
    margin-bottom: 1.2rem;
}

/* Pill inputs */
.lgn-form { width: 100%; }

.lgn-input-wrap {
    position: relative;
    margin-bottom: 1rem;
}

.lgn-input {
    width: 100%;
    padding: .88rem 1.4rem;
    border: 1.5px solid #e5e5e5;
    border-radius: 50px;
    font-size: .9rem;
    font-family: 'Manrope', sans-serif;
    color: #333;
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.lgn-input::placeholder { color: #bbb; }

.lgn-input:focus {
    border-color: #ccc;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
}

.lgn-pw-wrap .lgn-input { padding-right: 3.2rem; }

.lgn-eye {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #bbb;
    display: flex;
    align-items: center;
    padding: 0;
    line-height: 1;
}

.lgn-eye:hover { color: #888; }

.lgn-val {
    display: block;
    font-size: .78rem;
    color: #e53935;
    padding-left: 1rem;
    margin-top: .3rem;
}

.lgn-forgot-row {
    text-align: right;
    margin-bottom: 1.5rem;
}

.lgn-forgot {
    font-size: .82rem;
    color: #aaa;
    text-decoration: none;
    font-weight: 500;
}

.lgn-forgot:hover { color: #333; }

.lgn-btn {
    width: 100%;
    padding: .9rem;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: .96rem;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    transition: background .2s, transform .1s;
    letter-spacing: .02em;
}

.lgn-btn:hover  { background: #2c2c2c; }
.lgn-btn:active { transform: scale(.98); }

/* Divider */
.lgn-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.5rem 0;
    font-size: .82rem;
    color: #bbb;
}

.lgn-divider::before,
.lgn-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eee;
}

/* Social circle buttons */
.lgn-social {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.lgn-social form { margin: 0; }

.lgn-social-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #111;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .12s;
    color: #fff;
}

.lgn-social-btn:hover  { background: #333; }
.lgn-social-btn:active { transform: scale(.94); }

.lgn-register {
    text-align: center;
    font-size: .85rem;
    color: #aaa;
    margin-top: auto;
}

.lgn-register a {
    color: #2f7f4b;
    font-weight: 700;
    text-decoration: none;
}

.lgn-register a:hover { text-decoration: underline; }

/* ---- RIGHT: Illustration side ---- */
.lgn-illus-side {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    align-items: stretch;
}

.lgn-illus-card {
    background: #0d1117;
    border-radius: 18px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 1.8rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.lgn-illus-body {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

.lgn-illus-svg {
    width: min(260px, 90%);
    height: auto;
}

/* Floating task card */
.lgn-task-card {
    position: absolute;
    bottom: 8%;
    left: 4%;
    background: #fff;
    border-radius: 14px;
    padding: .8rem 1rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
    text-align: left;
    min-width: 148px;
}

.lgn-task-title  { font-size: .82rem; font-weight: 700; color: #111; margin-bottom: .1rem; }
.lgn-task-sub    { font-size: .72rem; color: #aaa; margin-bottom: .55rem; }
.lgn-task-footer { display: flex; align-items: center; gap: .5rem; }

.lgn-task-badge {
    background: #f0f0f0;
    border-radius: 50px;
    padding: .18rem .6rem;
    font-size: .7rem;
    color: #555;
    font-weight: 600;
}

.lgn-task-ring {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: conic-gradient(#5dab76 0% 84%, #e8e8e8 84% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    color: #333;
}

/* Avatar circles */
.lgn-av {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    border: 2.5px solid #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.lgn-av-tl { top: 8%;  left: 6%;  width: 46px; height: 46px; }
.lgn-av-r  { top: 32%; right: 4%; width: 46px; height: 46px; }

/* Pagination dots */
.lgn-dots {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin: 1.2rem 0 .9rem;
}

.lgn-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: inline-block;
    transition: all .2s;
}

.lgn-dots span.active {
    width: 26px;
    border-radius: 4px;
    background: #3d9a60;
}

.lgn-caption {
    font-size: .9rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.55;
    font-weight: 500;
    max-width: 260px;
}

.lgn-caption strong { color: #fff; font-weight: 800; }

/* Responsive */
@media (max-width: 820px) {
    .lgn-illus-side { display: none; }
    .lgn-form-side  { padding: 2.5rem 2rem; }
}

@media (max-width: 480px) {
    .lgn-page      { padding: 1rem; }
    .lgn-form-side { padding: 2rem 1.5rem; }
    .lgn-title     { font-size: 1.8rem; }
}

/* =========================================================
   End Login redesign
   ========================================================= */

:root {
    --auth-bg-a: #d8e6dd;
    --auth-bg-b: #c7d9ce;
    --auth-panel: #ffffff;
    --auth-left: #d6efe0;
    --auth-title: #203228;
    --auth-copy: #5b7164;
    --auth-stroke: #dce6df;
    --auth-accent: #5cab76;
    --auth-accent-deep: #2f7f4b;
    --auth-btn: #1f2c38;
    --auth-btn-hover: #2a3b4c;
}

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

html, body {
    height: 100%;
    font-family: 'Manrope', sans-serif;
}

body {
    background: #f2f2f2;
}

.global-loader {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .8rem;
    background: rgba(255, 255, 255, .92);
    z-index: 9999;
}

.global-loader.is-visible {
    display: flex;
}

.global-loader p {
    margin: 0;
    color: var(--auth-accent-deep);
    font-size: .9rem;
    font-weight: 600;
}

.loader-spin {
    width: 36px;
    height: 36px;
    border: 3px solid #c8e6c9;
    border-top-color: var(--auth-accent-deep);
    border-radius: 50%;
    animation: loader-spin .8s linear infinite;
}

@keyframes loader-spin {
    to { transform: rotate(360deg); }
}

.auth-wrapper {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-left {
    flex: 1.08;
    background: #0d1117;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 2.05rem 1.7rem;
    border-radius: 18px 0 0 18px;
}

.auth-left::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(61, 154, 96, 0.10);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.auth-left::after {
    content: '';
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(61, 154, 96, 0.06);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.auth-left-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 350px;
}

.auth-illustration {
    width: min(300px, 100%);
    height: auto;
    margin: 0 auto 1.1rem;
    display: block;
    filter: drop-shadow(0 12px 22px rgba(61, 154, 96, 0.25));
}

.auth-left-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: .45rem;
    letter-spacing: 0.02em;
}

.auth-left-sub {
    font-size: .9rem;
    color: rgba(255,255,255,0.62);
    line-height: 1.55;
    max-width: 280px;
    margin: 0 auto 1.35rem;
}

.auth-dots {
    display: flex;
    gap: .5rem;
    justify-content: center;
}
.auth-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: inline-block;
    transition: background .2s;
}
.auth-dots span.active {
    background: #3d9a60;
    width: 22px;
    border-radius: 4px;
}

.auth-right {
    flex: .92;
    background: var(--auth-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.3rem 2.2rem;
    border-radius: 0 18px 18px 0;
    border-left: 1px solid #edf3ee;
}

.auth-form-box {
    width: 100%;
    max-width: 355px;
    transform: translateY(-2px);
}

.auth-logo {
    text-align: center;
    margin-bottom: 1.85rem;
}
.auth-logo-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.34rem;
    font-weight: 700;
    color: #28342b;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}
.auth-logo-text .accent {
    color: var(--auth-accent);
}
.auth-logo-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: linear-gradient(145deg, #9bdab1, #4ea66f);
    border-radius: 50% 50% 50% 0;
    margin-right: 6px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}
.auth-logo-icon::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.auth-logo-img {
    width: 155px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.auth-symbol-logo {
    width: min(155px, 70%);
    height: auto;
    display: block;
    margin: 0 auto 1.4rem;
    filter: drop-shadow(0 8px 24px rgba(61, 154, 96, 0.45));
}
.lgn-logo-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    flex: 1;
}
.lgn-logo-full {
    width: min(240px, 80%);
    height: auto;
}
.lgn-logo-tagline {
    color: rgba(255,255,255,0.62);
    font-size: .9rem;
    text-align: center;
    font-weight: 500;
    line-height: 1.55;
}
.lgn-logo-tagline strong { color: #fff; font-weight: 800; }

.auth-form .form-label {
    font-size: .78rem;
    font-weight: 600;
    color: #5b685f;
    margin-bottom: .35rem;
    display: inline-block;
}

.auth-form .form-control {
    border: 1.4px solid var(--auth-stroke);
    border-radius: 8px;
    padding: .58rem .8rem;
    font-size: .88rem;
    color: #222;
    background: #fbfdfb;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}
.auth-form .form-control:focus {
    border-color: #85c79e;
    box-shadow: 0 0 0 3px rgba(118, 194, 145, .14);
    background: #fff;
    outline: none;
}
.auth-form .form-control.is-invalid {
    border-color: #e53935;
}

.auth-form .pw-row {
    position: relative;
}
.auth-form .forgot-link {
    position: absolute;
    right: 0;
    top: -1.35rem;
    font-size: .74rem;
    color: #6da67f;
    text-decoration: none;
    font-weight: 500;
}
.auth-form .forgot-link:hover { text-decoration: underline; }

.btn-signin {
    width: 100%;
    padding: .62rem;
    background: var(--auth-btn);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .1s;
    margin-top: .5rem;
}
.btn-signin:hover { background: var(--auth-btn-hover); }
.btn-signin:active { transform: scale(.98); }

.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
    color: #aeb7b2;
    font-size: .82rem;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e4ebe6;
}

.btn-google {
    width: 100%;
    padding: .58rem;
    border: 1.4px solid #dce5df;
    border-radius: 8px;
    background: #fcfdfc;
    font-size: .82rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: border-color .2s, box-shadow .2s;
}
.btn-google:hover {
    border-color: #bdd3c4;
    box-shadow: 0 5px 14px rgba(45, 74, 53, .09);
}
.btn-google svg { flex-shrink: 0; }

.auth-register {
    text-align: center;
    margin-top: 1rem;
    font-size: .82rem;
    color: #67756e;
}
.auth-register a {
    color: var(--auth-accent-deep);
    font-weight: 600;
    text-decoration: none;
}
.auth-register a:hover { text-decoration: underline; }

.auth-alert {
    background: #fdecea;
    border: 1px solid #f5c6c6;
    color: #c62828;
    border-radius: 8px;
    padding: .65rem .9rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

.auth-wrapper {
    width: min(1120px, 100%);
    margin: 0 auto;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 48px rgba(29, 52, 39, 0.16);
    overflow: hidden;
    transform: translateY(0);
    animation: auth-card-enter .55s ease;
}

@media (min-width: 1024px) {
    .auth-wrapper {
        width: min(1140px, 91vw);
        min-height: 646px;
    }

    .auth-left {
        flex: 1.11;
    }

    .auth-right {
        flex: .89;
    }
}

@media (min-width: 1400px) {
    .auth-wrapper {
        width: min(1180px, 87vw);
    }

    .auth-left,
    .auth-right {
        min-height: 656px;
    }
}

@keyframes auth-card-enter {
    from { opacity: .45; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
    .auth-wrapper {
        border-radius: 16px;
        box-shadow: 0 16px 34px rgba(27, 54, 39, 0.15);
    }

    .auth-left {
        display: none;
    }

    .auth-right {
        border-radius: 16px;
        padding: 1.45rem 1rem;
    }

    .auth-logo {
        margin-bottom: 1.45rem;
    }

    .auth-logo-text {
        font-size: 1.24rem;
    }
}

@media (min-width: 769px) {
    .auth-left,
    .auth-right {
        min-height: 640px;
    }
}