/* PFOA Candidate D treatment for the unauthenticated ASM login only. */

body:has(#asm-login-window) {
    margin: 0;
    min-height: 100vh;
    background-color: var(--pfoa-surface-subtle) !important;
    color: var(--pfoa-text-primary);
}

#asm-login-window,
#asm-login-window * {
    box-sizing: border-box;
}

#asm-login-window {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    width: calc(100% - 24px);
    max-width: 400px;
    max-height: calc(100vh - 24px);
    overflow: auto;
    transform: translate(-50%, -50%);
    background-color: var(--pfoa-surface-page) !important;
    color: var(--pfoa-text-primary);
    border: 1px solid var(--pfoa-border-default) !important;
    border-radius: 12px;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--pfoa-surface-structural) 18%, transparent);
}

#asm-login-window a {
    color: var(--pfoa-action-primary);
}

#asm-login-splash {
    width: 100%;
    height: 200px;
    background-color: var(--pfoa-surface-page);
    border-bottom: 1px solid var(--pfoa-border-default);
}

#asm-login-window label {
    color: var(--pfoa-text-primary);
}

#asm-login-window label[for="rememberme"] {
    color: var(--pfoa-text-muted);
}

#asm-login-window input.asm-textbox {
    background-color: var(--pfoa-surface-page) !important;
    color: var(--pfoa-text-primary) !important;
    border: 1px solid var(--pfoa-border-default) !important;
    border-radius: 4px;
}

#asm-login-window input.asm-textbox:focus {
    border-color: var(--pfoa-focus-ring) !important;
}

#asm-login-window #loginbutton {
    min-height: 36px;
    padding: 7px 16px;
    border: 1px solid var(--pfoa-action-primary) !important;
    border-radius: 4px;
    background: var(--pfoa-action-primary) !important;
    color: var(--pfoa-text-on-action) !important;
    cursor: pointer;
    font-weight: 600;
    box-shadow: none;
}

#asm-login-window #loginbutton:hover:not(:disabled) {
    border-color: var(--pfoa-action-hover) !important;
    background: var(--pfoa-action-hover) !important;
}

#asm-login-window #loginbutton:active:not(:disabled) {
    border-color: var(--pfoa-action-active) !important;
    background: var(--pfoa-action-active) !important;
}

#asm-login-window input:focus,
#asm-login-window button:focus,
#asm-login-window a:focus {
    outline: 3px solid var(--pfoa-focus-ring) !important;
    outline-offset: 2px;
}