/*
 * intely login styling (DEV-5375 Slice 4).
 *
 * Makes Keycloak's login look like the app's own sign-in page so the redirect is not jarring: white
 * header bar with the intely mark, a centred card on a light background, and the brand gradient
 * along the bottom.
 *
 * Only styling — the markup comes from the inherited keycloak.v2 templates, so upstream keeps
 * ownership of the form, its validation messages, and the required-action screens (profile
 * completion, TOTP enrolment) that appear on a user's first Keycloak login.
 */

:root {
    /* Brand colours, taken from the app's logo and gradient */
    --intely-orange: #fcb54b;
    --intely-green: #19c686;
    --intely-blue: #3a71d5;
    --intely-page-background: #ffffff;
    --intely-card-background: #ffffff;
    --intely-text: #3c4257;
    --intely-muted-text: #6b7280;
    --intely-border: #d2d6dc;
    /* Fill for read-only inputs (the pre-filled email on the two-factor page). */
    --intely-readonly-background: #f7f8fa;
    --intely-header-height: 64px;
    --intely-footer-height: 8rem;
}

/* ── Page shell ─────────────────────────────────────────────────────────── */

html,
body {
    height: 100%;
    margin: 0;
    background: var(--intely-page-background);
    color: var(--intely-text);
    font-family:
        'Roboto',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Helvetica,
        Arial,
        sans-serif;
}

/*
 * The brand gradient sits on the body rather than in the markup, because this theme deliberately
 * does not override the templates. A fixed strip at the bottom reproduces the app's footer without
 * needing an extra element.
 */
body::after {
    content: '';
    position: fixed;
    inset: auto 0 0 0;
    height: var(--intely-footer-height);
    background: linear-gradient(to right, var(--intely-orange), var(--intely-green), var(--intely-blue));
}

/*
 * PatternFly's login is a SIDE-BY-SIDE layout: .pf-v5-c-login__container is a grid whose areas are
 * `"main header"`, putting the card in the left column and the branding in the right. That is why the
 * card read as off-centre and the logo appeared beside it rather than above — confirmed by measuring
 * the rendered boxes, not inferable from the templates.
 *
 * The grid is collapsed to a single centred column, and the header is lifted out of it to become the
 * page's top bar.
 */
.login-pf-page,
.pf-v5-c-login,
.pf-c-login {
    background: transparent !important;
    display: block !important;
    min-height: 100vh !important;
    padding: 0 !important;
    position: relative !important;
}

/*
 * !important throughout: PatternFly's own selectors for these are more specific than a plain class
 * rule, so the grid template would otherwise keep its side-by-side value. Verified against the
 * computed style, not just the served stylesheet.
 */
.pf-v5-c-login__container {
    display: grid !important;
    grid-template-columns: minmax(0, 30rem) !important;
    grid-template-areas: 'main' 'footer' !important;
    justify-content: center !important;
    align-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    /*
     * The header bar and the gradient strip are both taken out of the flow (absolute and fixed
     * respectively), so the container has to reserve their space itself as padding rather than by
     * shrinking its min-height. Padding keeps working once the card is taller than the viewport and
     * the page starts to scroll: the strip would otherwise sit on top of the last 8rem of the card,
     * hiding Cancel and clipping Submit on the taller required-action screens (TOTP enrolment,
     * profile completion). With min-height at the full viewport, a card that does fit still centres
     * between the two, and one that does not simply scrolls clear of them.
     */
    min-height: 100vh !important;
    padding: var(--intely-header-height) 1rem var(--intely-footer-height) !important;
    box-sizing: border-box !important;
}

/* ── Header / logo ──────────────────────────────────────────────────────── */

/*
 * The header leaves the grid and becomes the full-width white bar at the top of the page.
 */
#kc-header,
.pf-v5-c-login__header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--intely-header-height) !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 1.25rem !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eceff3 !important;
    box-sizing: border-box !important;
}

.pf-v5-c-login__main,
.card-pf {
    grid-area: main !important;
    width: 100% !important;
    margin: 0 !important;
}

#kc-header-wrapper,
#kc-header .pf-v5-c-brand {
    font-size: 0;
    line-height: 0;
    background: url('../img/intely-logo.svg') no-repeat left center;
    background-size: contain;
    width: 128px;
    height: 34px;
    max-height: 34px;
    margin: 0;
    padding: 0;
    border: none;
}

/*
 * The logo is a link back to the app (injected via the loginTitleHtml message — see
 * messages/messages_en.properties). Two things this rule has to do:
 *
 *   1. Re-hide the anchor's text. `font-size: 0` on the wrapper above does NOT cascade into it —
 *      PatternFly's anchor styling sets its own size, so without this the word "intely" renders on
 *      top of the logo image.
 *   2. Make the whole logo clickable. The anchor only wraps its (invisible) text, which measured
 *      30x15px inside the 128x34 logo, so most of the mark was dead space.
 */
#kc-header-wrapper a,
#kc-header .pf-v5-c-brand a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 0;
    line-height: 0;
    color: transparent;
    text-decoration: none;
}

/* ── The card ───────────────────────────────────────────────────────────── */

.card-pf,
.pf-v5-c-login__main,
.pf-c-login__main {
    background: var(--intely-card-background);
    border: none;
    border-radius: 8px;
    /* Soft elevation, matching the app's login card */
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 2.5rem 2.5rem 2rem;
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
}

/*
 * PatternFly gives the card 40px of padding and then adds another 48px on the body and header, so
 * the fields ended up 304px wide inside a 480px card — visibly narrow, and worst on the resumed
 * login screen where the username shares its row with the "Start over" control. Measured, not
 * guessed: 480 -> 400 (body padding) -> 304 (form width).
 *
 * The card keeps its own padding; the inner padding is dropped so fields fill the card.
 */
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#kc-form-login,
.pf-v5-c-form,
.pf-v5-c-form__group {
    width: 100% !important;
}

#kc-page-title {
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    color: var(--intely-text);
    margin: 0 0 1.75rem;
}

/* ── Fields ─────────────────────────────────────────────────────────────── */

.pf-v5-c-form__label,
.pf-c-form__label,
.pf-v5-c-form__label-text {
    font-size: 0.75rem;
    color: var(--intely-muted-text);
    font-weight: 400;
}

/*
 * PatternFly v5 wraps the input in <span class="pf-v5-c-form-control"> and draws the border there.
 * Styling the input as well produced a border inside a border, so the wrapper owns the frame and
 * the input is made transparent.
 */
.pf-v5-c-form-control {
    border: 1px solid var(--intely-border) !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100%;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
    /* PatternFly draws its focus/hover underline with pseudo-elements */
    border: none !important;
}

.pf-v5-c-form-control > input,
.pf-c-form-control,
input[type='text'],
input[type='email'],
input[type='password'] {
    border: none !important;
    border-radius: 4px !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    color: var(--intely-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100%;
}

.pf-v5-c-form-control:focus-within {
    border-color: var(--intely-blue) !important;
    box-shadow: 0 0 0 1px var(--intely-blue) !important;
}

/*
 * Read-only fields must LOOK read-only.
 *
 * On the two-factor page the template renders the already-entered email as
 * <span class="pf-v5-c-form-control pf-m-readonly"><input readonly></span> — functionally correct, but
 * the `background: #ffffff !important` above (needed to beat PatternFly's own frame) also overrode
 * PatternFly's grey read-only fill, so it rendered identically to the editable one-time-code field
 * below it. Users saw two matching boxes and no cue which one they could type in.
 *
 * Restoring the tint here rather than weakening the rule above, because that rule is what makes every
 * other field look right. Also suppresses the focus ring: focus-within would otherwise highlight a
 * field that cannot be edited.
 */
.pf-v5-c-form-control.pf-m-readonly,
.pf-v5-c-form-control:has(> input[readonly]) {
    background: var(--intely-readonly-background) !important;
    border-color: var(--intely-border) !important;
    cursor: default;
}

.pf-v5-c-form-control.pf-m-readonly:focus-within,
.pf-v5-c-form-control:has(> input[readonly]):focus-within {
    border-color: var(--intely-border) !important;
    box-shadow: none !important;
}

.pf-v5-c-form-control.pf-m-readonly > input,
.pf-v5-c-form-control > input[readonly] {
    color: var(--intely-muted-text) !important;
    cursor: default;
}

/*
 * On the resumed-login screen the username shares its input-group row with the "Start over"
 * control, which squeezed the field to roughly a third of its width. Letting the input flex and
 * keeping the control to its content width restores a usable field on both screens.
 */
.pf-v5-c-input-group__item.pf-m-fill {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.pf-v5-c-input-group__item:not(.pf-m-fill) {
    flex: 0 0 auto !important;
}

.pf-v5-c-input-group .pf-v5-c-form-control {
    width: 100% !important;
}

/* The password field and its show/hide toggle share one bordered row. */
.pf-v5-c-input-group {
    border: 1px solid var(--intely-border);
    border-radius: 4px;
    background: #ffffff;
    overflow: hidden;
}

.pf-v5-c-input-group:focus-within {
    border-color: var(--intely-blue);
    box-shadow: 0 0 0 1px var(--intely-blue);
}

.pf-v5-c-input-group .pf-v5-c-form-control {
    border: none !important;
    box-shadow: none !important;
}

/*
 * The show/hide password toggle.
 *
 * PatternFly resolves its colours through CSS custom properties, so setting `background` on the
 * element is overridden by the component's own `--pf-v5-c-button--m-control--BackgroundColor`.
 * The variables have to be overridden instead — that is why the earlier direct-property attempt
 * left a dark block.
 */
.pf-v5-c-input-group__item .pf-v5-c-button.pf-m-control,
.pf-v5-c-button.pf-m-control {
    --pf-v5-c-button--m-control--BackgroundColor: transparent;
    --pf-v5-c-button--m-control--Color: var(--intely-muted-text);
    --pf-v5-c-button--m-control--BorderTopColor: transparent;
    --pf-v5-c-button--m-control--BorderRightColor: transparent;
    --pf-v5-c-button--m-control--BorderBottomColor: transparent;
    --pf-v5-c-button--m-control--BorderLeftColor: transparent;
    --pf-v5-c-button--m-control--after--BorderColor: transparent;
    --pf-v5-c-button--m-control--after--BorderBottomWidth: 0;
    --pf-v5-c-button--m-control--hover--BackgroundColor: transparent;
    --pf-v5-c-button--m-control--hover--Color: var(--intely-text);
    --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: 0;
    --pf-v5-c-button--m-control--active--BackgroundColor: transparent;
    --pf-v5-c-button--m-control--active--after--BorderBottomWidth: 0;
    --pf-v5-c-button--m-control--focus--BackgroundColor: transparent;
    --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.pf-v5-c-input-group__item .pf-v5-c-button.pf-m-control::after,
.pf-v5-c-button.pf-m-control::after {
    /* PatternFly's underline element */
    border: none !important;
}

/*
 * Same story for the text inputs: the border comes from the form-control's own variables, so the
 * wrapper AND the component variables both need setting or a second border shows through.
 */
.pf-v5-c-form-control {
    --pf-v5-c-form-control--BorderWidth: 0;
    --pf-v5-c-form-control--BorderBottomWidth: 0;
    --pf-v5-c-form-control--after--BorderBottomWidth: 0;
    --pf-v5-c-form-control--after--BorderBottomColor: transparent;
    --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
    --pf-v5-c-form-control--BackgroundColor: #ffffff;
}

/* ── Submit button ──────────────────────────────────────────────────────── */

#kc-login,
.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary,
input[type='submit'] {
    background: var(--intely-blue) !important;
    border: none !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    padding: 0.75rem 1rem !important;
    width: 100%;
    text-transform: none !important;
}

#kc-login:hover,
.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover {
    /* Slightly darker on hover; same hue */
    background: #2f60ba !important;
}

/* ── Secondary links ────────────────────────────────────────────────────── */

#kc-form-options a,
#kc-registration a,
.pf-v5-c-login__main-footer a,
a {
    color: var(--intely-muted-text);
    font-size: 0.8125rem;
    text-decoration: none;
}

#kc-form-options a:hover,
#kc-registration a:hover,
a:hover {
    color: var(--intely-blue);
    text-decoration: none;
}

/*
 * PatternFly renders the forgot-password link above the submit button; the app places it below, so
 * the form's flex order is adjusted rather than moving the markup.
 */
#kc-form-login {
    display: flex;
    flex-direction: column;
}

#kc-form-options {
    order: 10;
    margin-top: 1rem;
    text-align: left;
}

#kc-form-buttons {
    order: 5;
    margin-top: 1.5rem;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */

.pf-v5-c-alert,
.pf-c-alert,
.alert {
    border-radius: 4px;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.pf-v5-c-alert.pf-m-danger,
.pf-c-alert.pf-m-danger {
    border-left: 3px solid #d64545;
}

/* Keep the card readable on small screens, where the fixed gradient eats vertical space. */
@media (max-height: 640px) {
    :root {
        --intely-footer-height: 4rem;
    }

    .card-pf,
    .pf-v5-c-login__main,
    .pf-c-login__main {
        padding: 1.75rem 1.5rem 1.25rem;
    }
}