/* Shared by the sign-in page and the existing session sign-in overlay. */
.sc-berry .sc-login-success {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(380px, calc(100vw - 32px));
    padding: 18px 20px 21px;
    overflow: hidden;
    background: var(--sc-surface);
    color: var(--sc-heading);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgb(32 24 64 / 16%);
}
.sc-login-success-icon {
    flex: 0 0 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--sc-purple), var(--sc-primary));
    font-size: 22px;
}
.sc-login-success strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; }
.sc-login-success p { margin: 4px 0 0; color: var(--sc-muted); font-size: 13px; }
.sc-login-success-progress {
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sc-purple), var(--sc-primary));
    transform-origin: left;
    animation: sc-login-countdown 3s linear forwards;
}
@keyframes sc-login-countdown { to { transform: scaleX(0); } }
.sc-login.sc-login-leaving { animation: sc-login-fade-out 600ms ease-out forwards; pointer-events: none; }
@keyframes sc-login-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .sc-login-success-progress { animation: none; }
    .sc-login.sc-login-leaving { animation: none; opacity: 0; }
}

.sc-theme-selector {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    margin: 0 auto 24px;
    width: fit-content;
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    background: var(--sc-field);
}
.sc-theme-selector button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--sc-muted);
    font: 500 13px var(--fontFamily);
}
.sc-theme-selector button[aria-pressed="true"] { background: var(--sc-purple-soft); color: var(--sc-purple); }
.sc-theme-selector button:hover { color: var(--sc-heading); }
.sc-theme-selector button:focus-visible { outline: 2px solid var(--sc-purple); outline-offset: 2px; }
.sc-berry .sc-login {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    background: linear-gradient(135deg, rgb(69 32 119 / 84%) 0%, rgb(42 30 83 / 86%) 45%, rgb(27 48 88 / 88%) 100%),
                url('../images/saintclaire-accounting-login-clean.png') center / cover no-repeat,
                var(--sc-nav);
    color: var(--sc-text);
}
.sc-berry .sc-login::before { content: none; }
.sc-login .sc-login-layout {
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
    display: grid;
    place-items: center;
}
.sc-berry .sc-login .sc-login-card {
    width: min(100%, 420px);
    padding: 24px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgb(0 0 0 / 18%);
}
.sc-login .sc-theme-selector { margin-bottom: 16px; }
.sc-login #logInForm {
    display: grid;
    gap: 16px;
    width: 100%;
    padding: 0;
    margin: 0;
    position: static;
    transform: none;
    background: transparent;
    box-shadow: none;
}
.sc-login .sc-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--sc-heading);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}
.sc-login .sc-login-brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--sc-purple);
    color: #fff;
    font-size: 22px;
}
.sc-login .sc-login-brand small {
    color: var(--sc-purple);
    font-size: 10px;
    vertical-align: super;
    margin-left: 2px;
}
.sc-login .sc-login-heading { text-align: center; }
.sc-login .sc-login-heading h1 {
    color: var(--sc-purple);
    font-size: 25px;
    font-weight: 600;
    margin: 0 0 6px;
}
.sc-login .sc-login-heading p,
.sc-login .sc-login-footer {
    color: var(--sc-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}
.sc-login .sc-login-footer {
    text-align: center;
    border-top: 1px solid var(--sc-border);
    padding-top: 12px;
    font-size: 12px;
}
.sc-login .dx-texteditor.dx-editor-outlined {
    background: var(--sc-field);
    border-color: var(--sc-border);
    border-radius: var(--sc-radius);
    min-height: 42px;
}
.sc-login .dx-texteditor-input { color: var(--sc-heading); font-size: 14px; }
.sc-login .dx-texteditor-label { color: var(--sc-muted); }
.sc-login .dx-texteditor.dx-state-focused { border-color: var(--sc-purple); }
.sc-login .dx-texteditor.dx-invalid { border-color: #ef7886; }
.sc-login .dx-texteditor .dx-button .dx-icon { color: var(--sc-muted); }
.sc-login #submitButton {
    width: 100%;
    min-height: 42px;
    background: var(--sc-primary);
    border: 1px solid var(--sc-primary);
    border-radius: var(--sc-radius);
    color: #fff;
    box-shadow: none;
}
.sc-login #submitButton.dx-state-hover { background: #367acb; }
.sc-login #submitButton.dx-state-focused { outline: 2px solid var(--sc-purple); outline-offset: 3px; }
.sc-login #submitButton .dx-button-text { text-transform: none; font-size: 14px; font-weight: 600; }
.sc-login #summary:empty { display: none; }
.sc-login .dx-fieldset { margin: 0; }
.sc-login .dx-fieldset:first-child { display: grid; gap: 22px; }
.sc-login .dx-field { margin: 0; }
.sc-login .dx-field-value { width: 100% !important; float: none; }
@media (max-width: 480px) {
    .sc-berry .sc-login { padding: 16px; }
    .sc-login .sc-login-layout { min-height: calc(100dvh - 32px); }
    .sc-berry .sc-login .sc-login-card { padding: 24px 20px; }
}