/* keycloak.v2 (PatternFly 5) in the family's clothes, per the mockup's panel 5: the page on
   paper under the 3px accent bar, one white card with the portal's logo, the client's name,
   the form. Colours, type and radii come from tokens.css; the accent is the portal's navy. */

:root {
    --keycloak-bg-logo-url: none;
    --keycloak-card-top-color: transparent;
    --pf-v5-global--FontFamily--text: var(--bw-font);
    --pf-v5-global--FontFamily--heading: var(--bw-font);
    --pf-v5-global--FontFamily--monospace: var(--bw-font-mono);
    --pf-v5-global--FontSize--md: var(--bw-text);
    --pf-v5-global--FontSize--sm: var(--bw-text-sm);
    --pf-v5-global--Color--100: var(--bw-ink);
    --pf-v5-global--Color--200: var(--bw-muted);
    --pf-v5-global--BorderColor--100: var(--bw-line);
    --pf-v5-global--primary-color--100: var(--bw-accent);
    --pf-v5-global--primary-color--200: color-mix(in srgb, var(--bw-accent) 86%, #000);
    --pf-v5-global--link--Color: var(--bw-accent);
    --pf-v5-global--link--Color--hover: color-mix(in srgb, var(--bw-accent) 80%, #000);
    --pf-v5-global--danger-color--100: var(--bw-bad);
    --pf-v5-global--success-color--100: var(--bw-good);
    --pf-v5-global--warning-color--100: var(--bw-warn);
    --pf-v5-global--info-color--100: var(--bw-info);
    --pf-v5-global--BorderRadius--sm: var(--bw-radius-field);
    --pf-v5-c-button--BorderRadius: var(--bw-radius-field);
    --pf-v5-c-form-control--BorderRadius: var(--bw-radius-field);
    --pf-v5-c-form-control--before--BorderColor: var(--bw-line);
    --pf-v5-c-form-control--after--BorderColor: transparent;
    --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--bw-accent);
    --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--bw-accent);
}

.login-pf body, body#keycloak-bg {
    background: var(--bw-paper);
    color: var(--bw-ink);
    font-family: var(--bw-font);
}
body#keycloak-bg::before {
    content: ""; position: fixed; inset: 0 0 auto; height: 3px; background: var(--bw-accent); z-index: 1;
}

/* The card holds the header (the logo) and the main (title and form). */
.pf-v5-c-login__container {
    grid-template-columns: minmax(0, 25rem);
    grid-template-areas: "header" "main";
    background: var(--bw-surface);
    border: 1px solid var(--bw-line);
    border-radius: var(--bw-radius);
    box-shadow: 0 8px 24px #0f172a14;
    padding: 28px;
    row-gap: 0;
    width: min(calc(25rem + 58px), calc(100% - 32px));
    margin-inline: auto;
    box-sizing: border-box;
}
.pf-v5-c-login__header { padding: 0; margin: 0 0 18px; }
#kc-header-wrapper {
    font-size: 0; color: transparent; padding: 0; margin: 0;
    height: 30px; width: 100%;
    background: url("../img/brainwatt-commons.svg") no-repeat left center / auto 30px;
}
.pf-v5-c-login__main { background: transparent; box-shadow: none; margin: 0; padding: 0; }
.pf-v5-c-login__main-header { border-top: none; padding: 0 0 8px; margin: 0; display: block; }
#kc-page-title {
    font: 400 var(--bw-text)/1.45 var(--bw-font); color: var(--bw-muted); margin: 0;
}
#kc-page-title .bw-client { color: var(--bw-ink); font-weight: 600; }
.pf-v5-c-login__main-body { padding: 8px 0 0; }
.pf-v5-c-login__main-footer { padding: 0; }
.pf-v5-c-login__main-footer-band { padding: 12px 0 0; border: none; background: transparent; font-size: var(--bw-text-sm); }

.pf-v5-c-form__label-text { font-size: var(--bw-text-sm); color: var(--bw-muted); font-weight: 400; }
.pf-v5-c-form-control { font-family: var(--bw-font); }
.pf-v5-c-button { font-weight: 600; font-family: var(--bw-font); }
.pf-v5-c-button.pf-m-primary { background: var(--bw-accent); }
.pf-v5-c-button.pf-m-primary:hover { background: color-mix(in srgb, var(--bw-accent) 86%, #000); }
:focus-visible { outline: var(--bw-focus-width) solid var(--bw-focus); outline-offset: var(--bw-focus-offset); }
a { color: var(--bw-accent); }