/* GLink NA Authentication UI
 * Visual direction: soft cyan/blue/purple gradient with a centered translucent login panel.
 * No external background image or watermark is used.
 */
.auth-page {
    min-height: 100vh;
    margin: 0;
    color: #28314a;
    background:
        radial-gradient(circle at 10% 12%, rgba(255,255,255,.42) 0 9%, transparent 26%),
        radial-gradient(circle at 90% 88%, rgba(255,255,255,.28) 0 8%, transparent 25%),
        linear-gradient(135deg, #36e6de 0%, #61cfe8 36%, #a4b7f2 68%, #e7a8ee 100%);
    overflow-x: hidden;
}

.auth-page::before,
.auth-page::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    filter: blur(2px);
}

.auth-page::before {
    width: 320px;
    height: 320px;
    top: -150px;
    left: -120px;
    background: rgba(255,255,255,.14);
    box-shadow: 420px 520px 0 30px rgba(255,255,255,.07), 850px 90px 0 70px rgba(255,255,255,.06);
}

.auth-page::after {
    width: 260px;
    height: 260px;
    right: -100px;
    bottom: -120px;
    background: rgba(255,255,255,.12);
    box-shadow: -520px -420px 0 40px rgba(255,255,255,.06);
}

.auth-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
}

.auth-card {
    width: min(100%, 430px);
    padding: 34px 34px 30px;
    background: rgba(255,255,255,.46);
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(75, 76, 132, .18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    text-align: center;
}

.auth-brand-mark {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #6d3de1, #7653df);
    border: 4px solid rgba(255,255,255,.72);
    box-shadow: 0 8px 22px rgba(93, 66, 202, .28), inset 0 0 0 3px rgba(255,255,255,.15);
    font-size: 34px;
}

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

.auth-heading {
    margin-bottom: 20px;
    text-align: center;
}

.auth-heading h1 {
    margin: 0;
    color: #3f465b;
    font-size: 2.35rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.auth-heading p {
    margin: 7px 0 0;
    color: rgba(49, 58, 87, .72);
    font-size: 1rem;
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    border-radius: 10px;
}

.auth-form {
    display: grid;
    gap: 16px;
}

.auth-field {
    position: relative;
}

.auth-field .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-icon {
    position: absolute;
    top: 50%;
    left: 18px;
    z-index: 2;
    width: 24px;
    transform: translateY(-50%);
    color: #7651d9;
    text-align: center;
    font-size: 20px;
    pointer-events: none;
}

.auth-field .form-control {
    width: 100%;
    min-height: 50px;
    padding: 12px 18px 12px 58px;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 11px;
    background: rgba(255,255,255,.94);
    color: #343b50;
    box-shadow: 0 4px 12px rgba(75, 76, 132, .06);
}

.auth-field .form-control::placeholder {
    color: #74788a;
    opacity: 1;
}

.auth-field .form-control:focus {
    border-color: rgba(105, 74, 211, .55);
    box-shadow: 0 0 0 3px rgba(112, 76, 215, .15);
    background: #fff;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #7b7f90;
    cursor: pointer;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
    background: rgba(118,81,217,.08);
    color: #6544c9;
}

.auth-password-field .form-control {
    padding-right: 52px;
}

.auth-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 1px;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: rgba(49,58,87,.76);
    font-size: .875rem;
    cursor: pointer;
}

.auth-remember input {
    width: 16px;
    height: 16px;
    accent-color: #7651d9;
}

.auth-help-text {
    color: rgba(49,58,87,.66);
    font-size: .8rem;
    text-align: right;
}

.auth-submit {
    width: 100%;
    min-height: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #7141d7, #7548d7);
    color: #fff;
    box-shadow: 0 10px 22px rgba(103, 68, 204, .25);
}

.auth-submit:hover {
    background: linear-gradient(135deg, #6534cd, #6d3ed0);
    color: #fff;
    transform: translateY(-1px);
}

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

.auth-footer-note {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.48);
    color: rgba(49,58,87,.58);
    font-size: .75rem;
    text-align: center;
}

.auth-session-card {
    width: min(100%, 620px);
}

.auth-session-data {
    display: grid;
    gap: 0;
    margin: 0 0 24px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.56);
}

.auth-session-data div {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.5);
}

.auth-session-data div:last-child { border-bottom: 0; }
.auth-session-data dt { color: rgba(49,58,87,.66); }
.auth-session-data dd { margin: 0; font-weight: 500; }

.auth-session-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-session-actions form { margin: 0; }

@media (max-width: 575.98px) {
    .auth-shell { padding: 24px 14px; }
    .auth-card { padding: 28px 20px 24px; border-radius: 20px; }
    .auth-brand-mark { width: 72px; height: 72px; font-size: 29px; }
    .auth-heading h1 { font-size: 2rem; }
    .auth-remember-row { align-items: flex-start; }
    .auth-session-data div { grid-template-columns: 1fr; gap: 4px; }
    .auth-session-actions { align-items: stretch; }
    .auth-session-actions > *, .auth-session-actions form, .auth-session-actions .btn { width: 100%; }
}

@media (max-width: 380px) {
    .auth-card { padding-left: 16px; padding-right: 16px; }
    .auth-heading h1 { font-size: 1.8rem; }
    .auth-remember-row { flex-direction: column; }
    .auth-help-text { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-submit { transition: none; }
}


.auth-alert-text {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--color-danger);
    font-size: .875rem;
    line-height: 1.45;
}
.auth-alert-text i { flex: 0 0 auto; }

/* Change Password enhancements — inherits the Login Redesign v3 visual language. */
.auth-password-card {
    width: min(100%, 460px);
}

.auth-password-form .auth-field .form-label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 0 7px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    color: rgba(var(--color-text-rgb),.86);
    font-size: .9rem;
    font-weight: 500;
}

.required-mark {
    color: var(--color-danger);
}

.auth-password-input {
    position: relative;
}

.auth-password-input .form-control {
    padding-left: 58px;
    padding-right: 52px;
}

.auth-password-input .auth-input-icon {
    top: 50%;
    left: 18px;
    width: 24px;
    transform: translateY(-50%);
    color: var(--color-primary);
    text-align: center;
    font-size: 19px;
}

.auth-password-input .auth-password-toggle {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.auth-password-form .form-text {
    margin-top: 6px;
    color: rgba(var(--color-text-rgb),.62);
    font-size: .78rem;
    line-height: 1.45;
}

.password-rules {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.password-rule {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 6px 8px;
    border: 1px solid rgba(var(--color-white-rgb),.62);
    border-radius: 8px;
    background: rgba(var(--color-white-rgb),.28);
    color: rgba(var(--color-text-rgb),.68);
    font-size: .77rem;
    line-height: 1.35;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.password-rule-icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.password-rule.is-valid {
    border-color: rgba(var(--color-success-rgb),.55);
    background: rgba(var(--color-success-rgb),.14);
    color: var(--color-success);
}

.password-rule.is-invalid {
    border-color: rgba(var(--color-danger-rgb),.52);
    background: rgba(var(--color-danger-rgb),.12);
    color: var(--color-danger);
}

.password-rule.is-neutral {
    border-color: rgba(var(--color-white-rgb),.62);
    background: rgba(var(--color-white-rgb),.28);
    color: rgba(var(--color-text-rgb),.68);
}

.auth-password-actions {
    margin-top: 4px;
}

.auth-password-actions .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 10px;
}

/* Keep Change Password buttons consistent with Login Redesign v3. */
.auth-password-actions .btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: var(--color-text-inverse);
    box-shadow: 0 10px 22px rgba(var(--color-primary-rgb), .20);
}

.auth-password-actions .btn-primary:hover,
.auth-password-actions .btn-primary:focus-visible {
    border-color: transparent;
    background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-hover));
    color: var(--color-text-inverse);
}

.auth-password-actions .btn-outline-secondary {
    border-color: rgba(63,70,91,.55);
    color: rgba(var(--color-text-rgb),.76);
    background: rgba(var(--color-white-rgb),.22);
}

.auth-password-actions .btn-outline-secondary:hover,
.auth-password-actions .btn-outline-secondary:focus-visible {
    border-color: rgba(63,70,91,.72);
    color: var(--color-text);
    background: rgba(var(--color-white-rgb),.52);
}

.password-rule-status {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 7px;
    padding: 6px 8px;
    border: 1px solid rgba(var(--color-white-rgb),.62);
    border-radius: 8px;
    background: rgba(var(--color-white-rgb),.28);
    color: rgba(var(--color-text-rgb),.68);
    font-size: .78rem;
    line-height: 1.35;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.password-rule-status .password-rule-icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.password-rule-status.is-valid {
    border-color: rgba(var(--color-success-rgb),.58);
    background: rgba(var(--color-success-rgb),.16);
    color: var(--color-success);
}

.password-rule-status.is-invalid {
    border-color: rgba(var(--color-danger-rgb),.58);
    background: rgba(var(--color-danger-rgb),.14);
    color: var(--color-danger);
}

.password-rule-status.is-neutral {
    border-color: rgba(var(--color-white-rgb),.62);
    background: rgba(var(--color-white-rgb),.28);
    color: rgba(var(--color-text-rgb),.68);
}

.password-rule-status.is-valid .password-rule-icon {
    color: var(--color-success);
}

.password-rule-status.is-invalid .password-rule-icon {
    color: var(--color-danger);
}

@media (max-width: 575.98px) {
    .auth-password-card {
        width: min(100%, 430px);
    }

    .auth-password-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .auth-password-actions .btn {
        width: 100%;
    }
}

/* Phase 0 standard: Change Password card remains readable on desktop. */
.profile-narrow-card {
    width: min(100%, 800px);
    max-width: 800px;
}

@media (max-width: 767.98px) {
    .profile-narrow-card {
        width: 100%;
        max-width: 100%;
    }
}