/* A light-only public login. These rules are loaded by the login template only. */
.login-screen { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 48px 24px; background: #eeebe5; color: #222320; }
.login-screen::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url('../img/login-interior.svg') center / cover no-repeat; filter: blur(2px); pointer-events: none; }
.login-screen::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, rgba(248, 247, 244, .52), rgba(248, 247, 244, .24) 55%, rgba(248, 247, 244, .55)); pointer-events: none; }
.login-panel { width: min(460px, 100%); min-width: 0; padding: 36px; border: 1px solid rgba(255, 255, 255, .95); border-radius: 22px; background: #fff; box-shadow: 0 28px 70px -30px rgba(48, 41, 30, .35), 0 4px 20px rgba(48, 41, 30, .04); }
.login-brand-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 20px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid #eeede9; }
.login-brand { display: grid; justify-items: start; gap: 12px; min-width: 0; }
.login-brand-mark { display: block; width: 40px; height: 40px; object-fit: contain; border-radius: 9px; }
.login-company-logo { width: 112px; height: 42px; object-position: left center; border-radius: 0; }
.login-brand-text { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.login-brand-text strong { color: #252622; font-size: 17px; font-weight: 650; line-height: 1.35; }
.login-brand-text span { color: #666761; font-size: 11px; line-height: 1.5; }
.login-partner { padding: 3px 0 3px 18px; border-left: 1px solid #e8e7e2; }
.login-partner img { display: block; width: 116px; height: 38px; object-fit: contain; }
.login-intro { margin-bottom: 27px; }
.login-intro h1 { color: #222320; margin: 0; font-size: clamp(25px, 5vw, 29px); font-weight: 650; letter-spacing: -.7px; line-height: 1.25; }
:is(#login-form, #first-password-form) { display: grid; gap: 21px; }
:is(#login-form, #first-password-form) > div { min-width: 0; }
:is(#login-form, #first-password-form) .form-label { display: block; margin: 0 0 9px; color: #454640; font-size: 12px; font-weight: 600; }
:is(#login-form, #first-password-form) .form-control { width: 100%; min-width: 0; height: 50px; padding: 12px 14px; border: 1px solid #deded8; border-radius: 9px; background: #fafaf8; color: #252622; font-size: 15px; caret-color: #171816; }
:is(#login-form, #first-password-form) .form-control:focus { border-color: #676960; background: #fff; box-shadow: 0 0 0 3px rgba(45, 47, 40, .08); outline: none; }
.login-password { position: relative; }
:is(#login-form, #first-password-form) .login-password .form-control { padding-right: 54px; }
.login-password-toggle { position: absolute; right: 4px; top: 4px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #666761; }
.login-password-toggle:hover { color: #222320; background: #eeeee9; }
.login-eye-slash { display: none; }
.login-password-toggle[aria-pressed="true"] .login-eye-slash { display: block; }
.login-panel button:focus-visible { outline: 2px solid #454640; outline-offset: 3px; }
:is(#login-form, #first-password-form) > .login-submit { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; margin-top: 5px; border: 1px solid #111; border-radius: 9px; background: #111; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 4px 8px rgba(0, 0, 0, .08); }
:is(#login-form, #first-password-form) > .login-submit:hover, :is(#login-form, #first-password-form) > .login-submit:active { background: #000; border-color: #000; color: #fff; }
:is(#login-form, #first-password-form) > .login-submit:disabled { background: #333; border-color: #333; color: #fff; opacity: .7; }
.login-errors { margin: 0; padding: 12px 14px; font-size: 13px; line-height: 1.5; }
.login-errors ul { margin: 0; padding: 0; list-style: none; }
:is(#login-form, #first-password-form) .invalid-feedback { margin-top: 7px; }
@media (max-width: 479px) {
    .login-screen { padding: 24px 16px; }
    .login-screen::before { background-position: 60% center; }
    .login-screen::after { background: rgba(248, 247, 244, .48); }
    .login-panel { padding: 27px 23px; border-radius: 18px; }
    .login-brand-header { gap: 12px; margin-bottom: 24px; padding-bottom: 21px; }
    .login-partner { padding-left: 12px; }
    .login-partner img { width: 91px; height: 30px; }
    .login-brand-text strong { font-size: 15px; }
    .login-company-logo { width: 100px; height: 38px; max-width: 100%; }
}
.first-password-rules { margin: 8px 0 0; color: #6b6c66; font-size: 12px; line-height: 1.45; }
.first-password-rules li + li { margin-top: 2px; }