/*
 * The login of Bartels Werkt: the dark blue page of the mockup with a glass
 * card and the white logo, on top of the login of the theme bundle. The
 * password reset and two-factor pages use the same card (auth/base.html.twig),
 * with the component classes (.form-field, .field-input, .button) inside it.
 */

/* The login keeps the dark blue of the mockup. */
:root {
    --bartels-topbar: #0e2848;
}

/* The login of the mockup: a dark blue page with a glass card and the white logo. */
body.enmasse-login-page,
.enmasse-login-page .wrapper {
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(0, 114, 188, 0.35), transparent 60%),
        linear-gradient(160deg, #0f1318 0%, var(--bartels-topbar) 100%) fixed;
    min-height: 100vh;
}

.enmasse-login-page .enmasse-login {
    background: transparent;
}

.enmasse-login-page {
    font-family: var(--font);
}

/* The card has a fixed width; without it the centred wrapper shrinks it to its content. */
.enmasse-login-page .enmasse-login__card {
    width: min(400px, calc(100vw - 32px));
    background: rgba(14, 40, 72, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    backdrop-filter: blur(12px);
}

/* The company logo is the only brand on the login. The theme shows either a
   logo image or the wordmark; the logo here is a decorative background, and
   the wordmark stays for screen readers as the name of the page. */
.enmasse-login-page .enmasse-login__brand::before {
    content: "";
    display: block;
    width: 168px;
    height: 86px;
    margin: 0 auto var(--space-2);
    background: url("../images/logo/bartels-montage-white-72SnOqE.svg") no-repeat center / contain;
}

.enmasse-login-page .enmasse-login__wordmark {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.enmasse-login-page .enmasse-login__card label,
.enmasse-login-page .enmasse-login__card .form-check-label,
.enmasse-login-page .enmasse-login__forgot a,
.enmasse-login-page .auth-card__links a,
.enmasse-login-page .auth-card__text a {
    color: rgba(255, 255, 255, 0.85);
}

.enmasse-login-page .enmasse-login__card .form-control,
.enmasse-login-page .enmasse-login__card .field-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-radius: 10px;
    min-height: 44px;
}

.enmasse-login-page .enmasse-login__card .form-control:focus,
.enmasse-login-page .enmasse-login__card .field-input:focus-visible {
    border-color: var(--ea-brand-accent);
    box-shadow: 0 0 0 0.2rem rgba(0, 114, 188, 0.35);
    background: rgba(255, 255, 255, 0.1);
}

/* The primary button of the design system (.button--primary), full width. */
.enmasse-login-page .enmasse-login__submit,
.enmasse-login-page .auth-card .button {
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--primary);
    border-radius: 10px;
    background: var(--primary);
    color: var(--on-primary);
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: 700;
}

.enmasse-login-page .enmasse-login__submit:hover,
.enmasse-login-page .enmasse-login__submit:focus-visible,
.enmasse-login-page .auth-card .button--primary:hover,
.enmasse-login-page .auth-card .button--primary:focus-visible {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
    color: var(--on-primary);
}

/* "Onthoud mij" lines up with the fields. */
.enmasse-login-page .enmasse-login__card .form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-left: 0;
}

.enmasse-login-page .enmasse-login__card .form-check-input {
    float: none;
    margin: 0;
}

/* ---------- Auth card: the password reset and two-factor pages ---------- */

/* A card taller than the screen (the QR code on a phone) scrolls the page;
   without this the glow of the background repeats below the first screen. */
body.enmasse-login-page {
    background-repeat: no-repeat;
}

.enmasse-login-page .auth-card {
    display: grid;
    gap: var(--space-4);
}

/* The grid gap spaces the card; the theme margins would double it. */
.enmasse-login-page .auth-card .enmasse-login__brand {
    margin-bottom: 0;
}

.auth-card__title {
    margin: 0;
    color: var(--on-primary);
    font-size: var(--text-lg);
    font-weight: 800;
    text-align: center;
}

.auth-card__text {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--text-base);
    line-height: 1.5;
}

.auth-card__form {
    display: grid;
    gap: var(--space-4);
}

.enmasse-login-page .auth-card .form-field__label {
    font-size: var(--text-sm);
    font-weight: 600;
}

/* The field and the button keep the height of the login. */
.enmasse-login-page .auth-card .field-input {
    height: 44px;
    padding: 0 var(--space-3);
    font-size: var(--text-md);
}

.enmasse-login-page .auth-card .field-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.enmasse-login-page .auth-card .button {
    height: auto;
}

/* A secondary action on the dark card: an outline in white. */
.enmasse-login-page .auth-card .button:not(.button--primary) {
    border-color: rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--on-primary);
}

.enmasse-login-page .auth-card .button:not(.button--primary):hover,
.enmasse-login-page .auth-card .button:not(.button--primary):focus-visible {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.enmasse-login-page .auth-card .field-check {
    color: rgba(255, 255, 255, 0.85);
}

/* Form errors of Symfony come as a list. */
.form-field__error:empty {
    display: none;
}

.form-field__error ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--danger-soft);
    font-size: var(--text-sm);
}

.auth-card__message {
    padding: var(--space-3) 14px;
    border-radius: var(--radius-tab);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.auth-card__message--error {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.auth-card__message--success {
    background: var(--ok-soft);
    color: var(--ok-text);
}

.auth-card__links {
    margin: 0;
    font-size: var(--text-sm);
    text-align: center;
}

/* A link inside running text needs more than its colour. */
.enmasse-login-page .auth-card__text a {
    text-decoration: underline;
}

.enmasse-login-page .auth-card__links a:hover,
.enmasse-login-page .auth-card__text a:hover {
    color: var(--on-primary);
}

/* The QR code needs a light ground to scan. */
.auth-qr {
    justify-self: center;
    padding: var(--space-2);
    border-radius: var(--radius);
    background: var(--surface);
    line-height: 0;
}

.auth-qr__image {
    width: 184px;
    height: 184px;
}

.auth-secret {
    display: grid;
    gap: var(--space-1);
    justify-items: center;
    text-align: center;
}

.auth-secret__code {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: var(--on-primary);
    font-size: var(--text-md);
    letter-spacing: 0.08em;
    word-break: break-all;
    text-wrap: balance;
}