/* The approved light login design is independent of the dashboard theme. */
.login-page {
    margin: 0;
    color: #0c1b3b;
    background:
        radial-gradient(ellipse at 8% 77%, #e5f2ff 0, transparent 47%),
        radial-gradient(ellipse at 85% 30%, #eff6ff 0, transparent 46%),
        #f8fafc;
    color-scheme: light;
}

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

.login-page-shell {
    width: min(100%, 1380px);
    min-height: 100vh;
    min-height: 100dvh;
    margin-inline: auto;
    padding: clamp(20px, 4dvh, 36px) 56px clamp(32px, 6dvh, 56px);
    display: flex;
    flex-direction: column;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.login-brand-logo-frame {
    position: relative;
    width: 192px;
    height: 31px;
    overflow: hidden;
    mix-blend-mode: multiply;
}

.login-brand-logo {
    /* Frame the wordmark inside the original logo's generous white margins. */
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 143%;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
}

.login-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 6vw, 88px);
    padding-block: 16px clamp(24px, 5dvh, 48px);
}

.login-intro { min-width: 0; }

.login-intro-description {
    margin: 0;
    color: #566781;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.5;
}

.login-illustration {
    display: block;
    width: 100%;
    height: auto;
    margin: 10px auto -12px;
}

.login-card {
    width: 100%;
    max-width: 480px;
    justify-self: end;
    padding: clamp(28px, 3.4vw, 44px);
    background: #fff;
    border: 1px solid #dce8f6;
    border-radius: 22px;
    box-shadow: 0 4px 10px #244a7b04, 0 18px 50px #244a7b06;
}

.login-card h1 {
    margin: 0;
    font-size: clamp(23px, 2.3vw, 30px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -1px;
}

.login-card-description {
    margin: 10px 0 32px;
    color: #61718a;
    font-size: 16px;
    line-height: 1.5;
}

.login-form { display: flex; flex-direction: column; gap: 22px; }
.login-field { min-width: 0; }
.login-field label { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 600; }
.login-input-wrap { position: relative; }

.login-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #63748c;
    font-size: 21px;
    pointer-events: none;
}

.login-page .login-input {
    width: 100%;
    height: 54px;
    padding: 12px 16px 12px 48px;
    border: 1px solid #d3deec;
    border-radius: 10px;
    background: #fff;
    color: #132747;
    font-family: inherit;
    font-size: 16px;
    box-shadow: 0 2px 3px #16386304;
    transition: border-color 150ms, box-shadow 150ms;
}

.login-page .login-input::placeholder { color: #8190a5; opacity: 1; }
.login-page .login-input:focus { outline: none; border-color: #0866f5; box-shadow: 0 0 0 3px #0866f51a; }
.login-page .login-password-input { padding-right: 50px; }
.login-page .input-validation-error { border-color: #e05967; }

.login-password-toggle {
    position: absolute;
    right: 4px;
    top: 5px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: #63748c;
    background: transparent;
    cursor: pointer;
}

.login-password-toggle:hover { color: #0866f5; background: #f0f6ff; }
.login-password-toggle:focus-visible, .login-submit:focus-visible { outline: 3px solid #80b4ff; outline-offset: 3px; }
.login-field-error { display: block; margin-top: 6px; color: #c8293d; font-size: 13px; line-height: 1.5; }
.login-field-error:empty { display: none; }

.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid #ffc9d0;
    border-radius: 10px;
    background: #fff0f2;
    color: #c8293d;
    font-size: 13px;
    line-height: 1.6;
}

.login-alert > .material-symbols-outlined { flex-shrink: 0; font-size: 21px; }
.login-alert ul { padding: 0; margin: 0; list-style: none; }

.login-submit {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #fff;
    background: #0866f5;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms, box-shadow 150ms;
}

.login-submit:hover { background: #0758d4; box-shadow: 0 4px 12px #0866f526; }
.login-submit:active { background: #084cb3; }
.login-submit > .material-symbols-outlined { font-size: 22px; }

.login-security {
    margin: 28px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #738199;
    font-size: 12px;
}

.login-security > .material-symbols-outlined { font-size: 18px; }
.login-footer { flex-shrink: 0; padding-top: 14px; border-top: 1px solid #dce7f3; color: #738199; font-size: 12px; }

@media (max-width: 1100px) {
    .login-page-shell { padding-inline: 32px; }
    .login-main { gap: 32px; }
    .login-card { padding: 30px; }
}

@media (max-width: 899px) {
    .login-page-shell { max-width: 600px; padding-inline: 24px; }
    .login-brand { align-self: center; align-items: center; text-align: center; }
    .login-main { grid-template-columns: minmax(0, 1fr); }
    .login-intro { display: none; }
    .login-card { justify-self: center; }
    .login-footer { text-align: center; }
}

@media (max-width: 480px) {
    .login-page-shell { padding-inline: 18px; }
    .login-card { padding: 28px 22px; border-radius: 18px; }
    .login-card-description { font-size: 14px; margin-bottom: 26px; }
}

@media (max-height: 760px) {
    .login-page-shell { padding-block: 20px 32px; }
    .login-main { padding-block: 16px 24px; }
    .login-card { padding-block: 24px; }
    .login-card-description { margin-bottom: 22px; }
    .login-form { gap: 16px; }
    .login-security { margin-top: 18px; }
}

@media (max-height: 640px) {
    .login-page-shell { padding-block: 14px 24px; }
    .login-main { padding-block: 12px; }
    .login-card { padding-block: 18px; }
    .login-card-description { margin-block: 8px 16px; }
    .login-form { gap: 12px; }
    .login-field label { margin-bottom: 6px; }
    .login-security { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-page .login-input, .login-submit { transition: none; }
}