/* The public pages (sign-in, MFA, password reset, consent): the new HRLocker login design, as
 * HRLocker.Core.Web/wwwroot/css/pages/login.css draws it — brand shapes on sand, a 396px white box
 * (radius 4, 32/24 padding, 0 2px 0 shadow), 24px semibold title, primary action right-aligned,
 * footer link under the box.
 *
 * The product theme is the body class the OAuth client's registration selects
 * (body.theme-hrlocker | perform | recruit | onboard): it picks the accent and the background.
 */
body.public {
    --login-background: url("/images/public-background.svg");

    min-height: 100dvh;
    background-color: var(--hrl-canvas-public);
    background-image: var(--login-background);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

body.public.theme-perform,
body.public.theme-recruit {
    --login-background: url("/images/perform-background.svg");
    --hrl-primary: var(--hrl-orange-500);
    --hrl-primary: light-dark(var(--hrl-orange-500), var(--hrl-orange-300));
    --hrl-primary-hover: var(--hrl-orange-600);
    --hrl-primary-hover: light-dark(var(--hrl-orange-600), var(--hrl-orange-200));
    --hrl-primary-active: var(--hrl-orange-700);
    --hrl-on-primary: var(--hrl-white);
    --hrl-on-primary: light-dark(var(--hrl-white), var(--hrl-orange-900));
}

body.public.theme-onboard {
    --hrl-primary: var(--hrl-green-600);
    --hrl-primary: light-dark(var(--hrl-green-600), var(--hrl-green-300));
    --hrl-primary-hover: var(--hrl-green-700);
    --hrl-primary-hover: light-dark(var(--hrl-green-700), var(--hrl-green-200));
    --hrl-primary-active: var(--hrl-green-800);
    --hrl-on-primary: var(--hrl-white);
    --hrl-on-primary: light-dark(var(--hrl-white), var(--hrl-green-900));
}

/* The shapes are a light-canvas asset; the dark scheme keeps the plain canvas. Custom properties
   cannot be read in media queries, so the scheme is repeated here once. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.public {
        --login-background: none;
    }
}

:root[data-theme="dark"] body.public {
    --login-background: none;
}

.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--hrl-space-xl) var(--hrl-space-l);
}

.login__box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 396px;
    padding: var(--hrl-space-2xl) var(--hrl-space-xl);
    background-color: var(--hrl-surface);
    border-radius: var(--hrl-border-radius-base);
    box-shadow: 0 2px 0 var(--hrl-surface-shadow);
}

.login__box--wide {
    max-width: 468px;
}

.login__logo {
    display: flex;
    justify-content: center;
}

.login__mark {
    display: grid;
    place-items: center;
    width: var(--hrl-space-3xl);
    height: var(--hrl-space-3xl);
    border-radius: var(--hrl-border-radius-large);
    background-color: var(--hrl-orange-500);
}

.login__title {
    margin: var(--hrl-space-xl) 0;
    font-size: var(--hrl-font-size-h2);
    text-align: center;
}

.login__title--tight {
    margin-bottom: var(--hrl-space-s);
}

.login__lead {
    margin: 0 0 var(--hrl-space-l);
    color: var(--hrl-text-muted);
    text-wrap: pretty;
}

.login__note {
    margin: var(--hrl-space-l) 0 0;
    color: var(--hrl-text-subtle);
    font-size: var(--hrl-font-size-tiny);
}

.login__or {
    margin: var(--hrl-space-l) 0;
    color: var(--hrl-text-muted);
    text-align: center;
}

.login__alt {
    margin: var(--hrl-space-l) 0 0;
    font-size: var(--hrl-font-size-tiny);
    text-align: center;
}

.login__footer {
    margin-top: var(--hrl-space-2xl);
    text-align: center;
}

.login__footer p {
    margin: 0 0 var(--hrl-space-l);
    color: var(--hrl-text);
}

.login__footer .theme-menu {
    margin-bottom: var(--hrl-space-xl);
}

/* Authenticator enrolment and recovery codes, when they sit in the public box. */
.login__qr {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--hrl-space-s);
}

.login__qr svg {
    width: 180px;
    height: 180px;
    padding: var(--hrl-space-s);
    background-color: var(--hrl-white);
    border-radius: var(--hrl-border-radius-base);
}

.codes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hrl-space-xs) var(--hrl-space-l);
    list-style: none;
    margin: 0 0 var(--hrl-space-xl);
    padding: var(--hrl-space-m) var(--hrl-space-l);
    background-color: var(--hrl-surface-muted);
    border: 1px solid var(--hrl-border);
    border-radius: var(--hrl-border-radius-base);
}

.codes code {
    font-size: var(--hrl-font-size-base);
}