/* Shared sign-in and password recovery design. */
body:has(.login-panel) { background: #f2f6f7 !important; color: #213e44; }
body:has(.login-panel) .custom-login-inner { display: flex; min-height: 100dvh; padding: 32px 20px !important; align-items: center; }
body:has(.login-panel) .custom-wrapper { width: 100%; max-width: 1000px; padding: 0 !important; margin: auto !important; }
body:has(.login-panel) .custom-row { display: block; width: 100%; margin: 0 !important; }
body:has(.login-panel) .custom-row > .card { width: 100%; margin: 0; background: #fff; border: 1px solid #ddebee; border-radius: 20px; box-shadow: 0 16px 48px #203e440d; overflow: hidden; }
body .login-panel { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 560px; padding: 0 !important; }
.login-brand { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 44px 36px; min-width: 0; background: #007f96; color: #fff; overflow: hidden; }
.login-brand::after { content: ''; position: absolute; width: 320px; height: 320px; border: 1px solid #ffffff16; border-radius: 50%; bottom: -180px; right: -140px; box-shadow: 0 0 0 40px #ffffff06, 0 0 0 80px #ffffff04; z-index: -1; }
.login-brand-name { font-size: 18px; letter-spacing: 2px; font-weight: 700; }
.login-brand > div { margin-block: auto; }
.login-brand-caption { display: block; font-size: 11px; letter-spacing: 2px; color: #c9e4e9; margin-bottom: 14px; }
.login-brand h2 { color: #fff; font-size: clamp(26px, 2.8vw, 34px); font-weight: 600; line-height: 1.5; margin: 0 0 16px; }
.login-brand p { color: #d8ebef; font-size: 14px; line-height: 1.9; margin: 0; }
.login-brand-footer { font-size: 12px; color: #bedae0; }
.login-fields { align-self: center; width: 100%; min-width: 0; padding: 40px 48px; }
.login-heading { color: #203e44; font-size: 28px; font-weight: 700; margin: 24px 0 8px; line-height: 1.4; }
.login-intro { color: #5098a7; font-size: 14px; margin-bottom: 26px; }
body .login-panel .form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; color: #2d545c; }
.login-input-wrap { position: relative; }
.login-input-wrap > i { position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%); color: #6aaab7; pointer-events: none; }
body .login-panel .form-control { width: 100%; min-height: 48px; border-radius: 8px; border: 1px solid #d1e5e9 !important; background: #fbfcfd !important; color: #213e44; font-size: 16px; padding: 11px 14px 11px 42px; box-shadow: none; }
body .login-panel .form-control::placeholder { color: #83b8c3; }
body .login-panel .form-control:is(:focus,:focus-visible,.is-valid),body .login-panel .was-validated .form-control:valid { border-color: #4f96a4 !important; box-shadow: 0 0 0 3px #4f96a418 !important; outline: none !important; background-image: none !important; }
body .login-panel .form-control.is-invalid,body .login-panel .was-validated .form-control:invalid { border-color: #b4233b !important; box-shadow: none !important; }
body .login-panel #saveBtn { width: 100%; min-height: 48px; height: auto; padding: 12px 16px; border-radius: 8px; background: #007f96 !important; border: 1px solid #007f96 !important; color: white !important; font-size: 15px; font-weight: 600; line-height: 1.5; white-space: normal; }
body .login-panel #saveBtn:hover { background: #008ba5 !important; }
body .login-panel a { color: #008ba5 !important; font-size: 13px; }
body .login-panel :is(input,a,button):focus-visible { outline: 2px solid #4f96a4; outline-offset: 3px; }
.login-remember { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #4c919f; }
.login-remember input { accent-color: #007f96; width: 16px; height: 16px; }
body .login-panel .error { display: block; font-size: 13px; overflow-wrap: anywhere; margin-top: 6px; }
@media(max-width:767px) {
 body:has(.login-panel) .custom-wrapper { max-width: 460px; }
 body .login-panel { grid-template-columns: minmax(0,1fr); min-height: 0; }
 .login-brand { padding: 22px 24px; gap: 0; }
 .login-brand > div,.login-brand-footer { display: none; }
 .login-fields { padding: 26px; }
 .login-heading { margin-top: 20px; font-size: 25px; }
}
@media(max-width:380px) { body:has(.login-panel) .custom-login-inner { padding: 16px 8px !important; } .login-fields { padding: 18px; } }
@media(prefers-reduced-motion:reduce) { body .login-panel * { transition: none !important; } }

/* Single centered form, without the decorative welcome panel. */
body:has(.login-panel) .custom-wrapper { max-width: 480px; }
body .login-panel { display: block; min-height: 0; }
body .login-panel .login-fields { padding: 32px 36px; }
@media(max-width:575px) {
    body .login-panel .login-fields { padding: 24px; }
}
@media(max-width:380px) {
    body .login-panel .login-fields { padding: 18px; }
}

/* Wider single-form layout with provider choices. */
body:has(.login-panel) .custom-wrapper { max-width: 620px; }
body .login-panel .login-fields { padding: 36px 42px; }
.login-heading,.login-intro { text-align: center; }
.login-social-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: #569fae; font-size: 13px; }
.login-social-divider::before,.login-social-divider::after { content: ''; flex: 1; height: 1px; background: #dcebee; }
.login-social-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.login-social-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px; border: 1px solid #d1e5e9; border-radius: 8px; background: #fff; color: #34636d; font-size: 13px; }
.login-social-button:disabled { cursor: not-allowed; }
.social-google { color: #4285f4; font-size: 23px; font-weight: 700; }
.social-facebook { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 50%; background: #1877f2; color: white; font: bold 24px Arial; }
.social-microsoft { display: grid; grid-template-columns: repeat(2,9px); gap: 2px; }
.social-microsoft i { height: 9px; background: #f25022; }
.social-microsoft i:nth-child(2) { background: #7fba00; }
.social-microsoft i:nth-child(3) { background: #00a4ef; }
.social-microsoft i:nth-child(4) { background: #ffb900; }
.login-social-status { text-align: center; color: #569fae; font-size: 12px; margin: 12px 0 0; }
@media(max-width:575px) { body .login-panel .login-fields { padding: 24px; } }
@media(max-width:380px) { body .login-panel .login-fields { padding: 18px; } .login-social-options { grid-template-columns: minmax(0,1fr); } }

/* Override the legacy 440px right-aligned card body. */
body .custom-login .custom-wrapper .card .card-body.login-panel {
    display: block; width: 100%; max-width: none; height: auto;
    margin: 0; padding: 0 !important; box-shadow: none; border-radius: inherit !important;
}
body .login-panel .login-fields { width: 100%; max-width: none; margin: 0; }
.login-social-button > :is(img,svg) { flex: 0 0 24px; object-fit: contain; }

/* Readable 16px text across sign-in and password recovery. */
body .login-panel,
body .login-panel :is(.form-label, .form-control, .login-intro, .login-remember, .error, .invalid-feedback, .invalid-feedback small, .login-social-divider, .login-social-button, .login-social-status, a, p),
body .login-panel #saveBtn { font-size: 16px !important; line-height: 1.5; }
@media (max-width: 575px) {
    .login-social-options { grid-template-columns: minmax(0, 1fr); }
}

.login-legal-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid #dcebee; text-align: center; color: #4c919f; }
.login-legal-footer p { margin: 0 0 10px; overflow-wrap: anywhere; }
.login-legal-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }

/* Soft ambient purple background, rendered without images or animation. */
body:has(.login-panel) { background: #eaf1f2 !important; }
body:has(.login-panel) .custom-login {
    background-color: #eaf1f2 !important;
    background-image:
        radial-gradient(ellipse at 5% 12%, #a3cfd880, transparent 48%),
        radial-gradient(ellipse at 95% 85%, #85bac46b, transparent 45%),
        radial-gradient(ellipse at 50% 45%, #ffffff, #f1f6f7 70%) !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 100dvh;
}
body:has(.login-panel) .custom-login-inner { background: transparent !important; }
@media (max-width: 575px) {
    body:has(.login-panel) .custom-login {
        background-image: radial-gradient(ellipse at 0% 0%, #c4e2e8, #f5f8f9 70%) !important;
    }
}

/* Compact sign-in card while preserving readable controls. */
body:has(#loginForm) .custom-wrapper { max-width: 520px; }
body:has(#loginForm) .custom-login-inner { padding: 16px !important; }
body:has(#loginForm) .login-panel .login-fields { padding: 24px 28px; }
body:has(#loginForm) .login-fields > .text-center:first-child { margin-bottom: 10px !important; }
body:has(#loginForm) .login-fields > .text-center:first-child img:not(.accountzure-brand__image) { max-width: 128px !important; max-height: 68px !important; }
body:has(#loginForm) .login-heading { font-size: 25px; margin: 12px 0 6px; }
body:has(#loginForm) .login-intro { margin-bottom: 18px; }
body #loginForm .form-group { margin-bottom: 12px !important; }
body #loginForm .form-label { margin-bottom: 5px; }
body #loginForm .form-control { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
body #loginForm #saveBtn { min-height: 44px; padding: 9px 16px; }
body #loginForm p.my-4 { margin: 14px 0 !important; }
body:has(#loginForm) .login-social-divider { margin: 14px 0; }
body:has(#loginForm) .login-social-button { min-height: 44px; gap: 5px; padding: 7px 5px; }
body:has(#loginForm) .login-legal-footer { margin-top: 16px; padding-top: 12px; }
@media (min-width: 480px) {
    body:has(#loginForm) .login-social-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
    body:has(#loginForm) .custom-login-inner { padding: 12px !important; }
    body:has(#loginForm) .login-panel .login-fields { padding: 20px 16px; }
}

/* AiWork branding matches the dashboard sidebar. */
body .login-panel .login-aiwork-logo { display: inline-flex; text-decoration: none; }
.login-aiwork-logo .aiwork-wordmark { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; line-height: 1; white-space: nowrap; padding: 3px 0; }
.login-aiwork-logo .aiwork-wordmark::after { content: ''; width: 5px; height: 5px; flex: 0 0 5px; background: #C51589; border-radius: 50%; align-self: flex-end; margin: 0 0 8px -3px; }
.login-aiwork-logo .aiwork-wordmark__mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px 10px 4px 10px; background: #007f96; color: #FFCC00; font-size: 24px; font-weight: 800; letter-spacing: -1px; }
.login-aiwork-logo .aiwork-wordmark__name { color: #007f96; font-size: 27px; font-weight: 600; letter-spacing: -.8px; }
body:has(#loginForm) .login-panel .login-fields { padding-block: 18px; }
body:has(#loginForm) .login-heading { margin-top: 6px; }
body:has(#loginForm) .login-intro { margin-bottom: 12px; }
body #loginForm .form-group { margin-bottom: 10px !important; }
body #loginForm p.my-4 { margin-block: 10px !important; }
body:has(#loginForm) .login-social-divider { margin-block: 10px; }
body:has(#loginForm) .login-social-status { margin-top: 8px; }
body:has(#loginForm) .login-legal-footer { margin-top: 10px; padding-top: 10px; }
body:has(#loginForm) .login-legal-footer p { margin-bottom: 6px; }

/* Compact sign-in spacing with the full AccountZure logo. */
body:has(#loginForm) .custom-wrapper { max-width: 540px; }
body:has(#loginForm) .login-panel .login-fields { padding: 18px 28px; }
body:has(#loginForm) .login-fields > .text-center:first-child { margin-bottom: 4px !important; line-height: 0; }
body:has(#loginForm) .login-aiwork-logo .accountzure-brand { margin: 0; }
body:has(#loginForm) .login-heading { margin: 4px 0 12px; }
body #loginForm .form-group { margin-bottom: 10px !important; }
body #loginForm .form-label { margin-bottom: 5px; }
body #loginForm p.my-4 { margin-block: 10px !important; }
body:has(#loginForm) .login-social-divider { margin-block: 10px; }
body:has(#loginForm) .login-social-status { margin-top: 8px; }
body:has(#loginForm) .login-legal-footer { margin-top: 12px; padding-top: 10px; }
body:has(#loginForm) .login-legal-footer p { margin-bottom: 6px; }
@media (max-width: 479px) {
    body:has(#loginForm) .login-panel .login-fields { padding: 16px; }
}

body:has(#loginForm) .login-panel .login-legal-footer .login-connection-security {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 8px 0 0; color: #6c757d; font-size: 13px !important; line-height: 1.5;
}
.login-connection-security svg { flex: 0 0 14px; }

/* Center the full AccountZure mark above the sign-in fields at a readable size. */
body:has(#loginForm) .login-fields > .text-center:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 16px !important;
}
body:has(#loginForm) .login-aiwork-logo {
    display: flex;
    width: 100%;
    justify-content: center;
}
body:has(#loginForm) .login-aiwork-logo .accountzure-brand--full {
    width: min(100%, 380px);
    margin: 0 !important;
}

/* Shared sign-in and password recovery typography: headings 16px, labels 14px, controls 13px. */
body:has(#loginForm, #passwordRecoveryForm) .login-panel .login-heading { font-size: 16px; line-height: 1.5; }
body:has(#loginForm, #passwordRecoveryForm) .login-panel :is(.form-label, .login-remember) { font-size: 14px !important; }
body:has(#loginForm, #passwordRecoveryForm) .login-panel :is(.form-control, a, .login-social-button, .login-social-divider, .error, .invalid-feedback, .invalid-feedback small),
body :is(#loginForm, #passwordRecoveryForm) #saveBtn { font-size: 13px !important; }
body:has(#loginForm, #passwordRecoveryForm) .login-panel p { font-size: 14px !important; }
body:has(#loginForm, #passwordRecoveryForm) .login-panel :is(.login-social-status, .login-legal-footer p, .login-legal-footer a) { font-size: 12px !important; }
/* Keep mobile inputs readable without browser focus zoom. */
@media (max-width: 575px) {
    body :is(#loginForm, #passwordRecoveryForm) .form-control { font-size: 16px !important; }
}

body #loginForm .login-lockout-alert {
    margin-bottom: 16px; padding: 12px 14px; border: 1px solid #e3b94f;
    border-radius: 8px; background: #fff7df; color: #704c10;
    font-size: 14px; line-height: 1.6; overflow-wrap: anywhere;
}