/*
 * Styling for the MFA enrolment and OTP screens in this theme.
 *
 * master-v2.css already themes primary and outlined block buttons, form
 * controls and the page heading; the templates carry the PatternFly classes so
 * those rules apply on their own. What is here is the widgets master-v2.css has
 * never had to lay out, plus the corrections where a stock rule does not
 * survive contact with these pages.
 *
 * The look these screens are aiming at is the vitu theme's MFA flow: hero icon
 * over a two-line teal title, a 380px column, and tall method buttons with the
 * method icon on the left and a chevron on the right. The vitu theme gets that
 * from vitu-styles.css, which parents from keycloak (PatternFly 4) and cannot
 * be imported here, so these rules reproduce it on the keycloak.v2 base using
 * master-realm's own palette. The icons are the same artwork, lifted out of
 * vitu-styles.css's data URIs into ../img/mfa-*.svg.
 *
 * Loaded after master-v2.css - see `styles` in ../../theme.properties. Note it
 * loads on every page in the theme, so anything not scoped to an MFA-specific
 * class, id or page id is a theme-wide change.
 */

/* --- Page title ---------------------------------------------------------- *
 *
 * master-v2.css sets #kc-page-title to 72px with white-space: nowrap, sized for
 * a short heading like "Welcome back" centred over the full page width. These
 * screens have sentence-length titles, which at that size are forced onto one
 * line and run the width of the viewport.
 *
 * Overriding #kc-page-title directly would change every page in the theme, so
 * each template wraps its header text in .mfa-page-title: a span inside the h1,
 * which inherits the heading's type (weight 300, -0.03em, #013d4f) and
 * overrides only what does not suit a longer title.
 *
 * The 570px cap is what puts the enrolment title on two lines, as in the vitu
 * theme: "Protect your account with" / "Multi-Factor Authentication". Shorter
 * titles ("Enroll with SMS") just centre inside it.
 *
 * mfa-congrats.ftl deliberately does NOT use this - "Congratulations!" is short
 * and belongs at the theme's full heading size.
 */
.mfa-page-title {
    display: block;
    max-width: 570px;
    margin: 0 auto;
    font-size: 50px;
    line-height: 1.3;
    white-space: normal;
}

@media (max-width: 700px) {
    .mfa-page-title {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .mfa-page-title {
        font-size: 28px;
    }
}

/* Hero icon above the title. An empty <i> so it stays phrasing content inside
   the h1; display:block stacks it over the heading text. */
.mfa-hero-icon {
    display: block;
    width: 44px;
    height: 35px;
    margin: 0 auto 16px;
    background: url("../img/mfa-security-man.svg") no-repeat center;
    background-size: contain;
}

/* --- "Log Out" beside the username --------------------------------------- *
 *
 * Theme-wide fix, not MFA-specific. master-v2.css styles every .pf-m-control
 * button inside an input group as the password show/hide eye: absolutely
 * positioned, 42px wide, no label expected. keycloak.v2's username block puts
 * #reset-login - the restart-login action, icon plus a "Log Out" label - in
 * that same slot, so it inherits a 42px box its label cannot fit and the text
 * spills across the field.
 *
 * These pages are the first in this theme to render that block, which is why it
 * has not shown up before. Put the button back in flow and let it size to its
 * label; the id outranks the class selector that set the eye treatment.
 *
 * keycloak.v2's template.ftl hard-codes <i class="fa-sync-alt fas"> and ignores
 * this theme's kcResetFlowIcon=fa fa-power-off, so the glyph is swapped here for
 * the power symbol that property asks for - PatternFly bundles fa-power-off, and
 * it is the icon the vitu theme shows next to "Log Out".
 */
#reset-login.pf-v5-c-button {
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0 0 0 12px;
    color: #21bae7;
    white-space: nowrap;
    /* The rule this one overrides also makes the button a flex container, which
       drops the whitespace between the icon and the label. */
    gap: 6px;
}

#reset-login .fa-sync-alt::before {
    content: "\f011";
}

/* --- The username line on the MFA screens -------------------------------- *
 *
 * keycloak.v2 renders the attempted username as a full labelled form field: a
 * "Username" label over a 60px read-only input with "Log Out" alongside. On
 * these screens that block outweighs the title above it, where the vitu theme
 * shows one quiet line - "<username> [power] Log Out".
 *
 * Scoped two ways, so nothing else moves: to the MFA pages by the body's
 * data-page-id (keycloak.v2 emits data-page-id="login-${pageId}", i.e.
 * login-mfa-setup, login-mfa-congrats, login-vitu-otp), and to the one form
 * group that holds #kc-attempted-username, leaving each page's own fields
 * alone.
 */
[data-page-id^="login-mfa-"] .pf-v5-c-form:has(#kc-attempted-username),
[data-page-id="login-vitu-otp"] .pf-v5-c-form:has(#kc-attempted-username) {
    max-width: none;
    margin-bottom: 28px;
    text-align: center;
}

/* The label is redundant once the field reads as a line of text. */
[data-page-id^="login-mfa-"] .pf-v5-c-form:has(#kc-attempted-username) .pf-v5-c-form__group-label,
[data-page-id="login-vitu-otp"] .pf-v5-c-form:has(#kc-attempted-username) .pf-v5-c-form__group-label {
    display: none;
}

/* Shrink-wrap the group so the username/Log Out pair centres as a unit instead
   of stretching across the column. */
[data-page-id^="login-mfa-"] .pf-v5-c-form:has(#kc-attempted-username) .pf-v5-c-input-group,
[data-page-id="login-vitu-otp"] .pf-v5-c-form:has(#kc-attempted-username) .pf-v5-c-input-group {
    display: inline-flex;
    width: auto;
    align-items: center;
    justify-content: center;
}

[data-page-id^="login-mfa-"] .pf-v5-c-form:has(#kc-attempted-username) .pf-v5-c-input-group__item.pf-m-fill,
[data-page-id="login-vitu-otp"] .pf-v5-c-form:has(#kc-attempted-username) .pf-v5-c-input-group__item.pf-m-fill {
    flex: 0 0 auto;
}

/* Strip the field chrome: no border, no background, no 60px box. */
[data-page-id^="login-mfa-"] .pf-v5-c-form:has(#kc-attempted-username) .pf-v5-c-form-control,
[data-page-id="login-vitu-otp"] .pf-v5-c-form:has(#kc-attempted-username) .pf-v5-c-form-control {
    min-height: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* field-sizing lets the input shrink to its text, so the pair really is centred.
   Where it is unsupported the input keeps its default width and the right
   alignment still sets the username next to "Log Out". */
#kc-attempted-username {
    field-sizing: content;
    width: auto;
    max-width: 260px;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: right;
    text-overflow: ellipsis;
}

/* --- mfa-setup.ftl ------------------------------------------------------- *
 *
 * The enrolment form is its own element, not a .pf-v5-c-form, so master-v2.css's
 * 380px form column does not reach it - set the same width here.
 */
.login__mfa-setup {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.mfa-lede {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #333;
}

/* Instructions above a single input read better flush-left against it. */
.mfa-lede--muted {
    text-align: left;
    color: #999;
}

/* Method buttons: 70px tall, icon left, label left, chevron right. These carry
   no PatternFly classes (see mfa-setup.ftl), so everything is set here. */
.login__mfa-type-button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 70px;
    margin-top: 20px;
    padding: 0 20px;
    background: #fff;
    border: 1px solid #D5D5D5;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.login__mfa-type-button:hover,
.login__mfa-type-button:focus-visible {
    outline: none;
    border-color: #21BAE7;
    box-shadow: 0 0 3px 2px #bceaf8;
}

.login__mfa-type-button > span {
    flex: 1 1 auto;
    text-align: left;
    font: 400 18px/30px Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
}

/* Fixed 36px icon column so both labels start at the same x even though the two
   glyphs are different widths (SMS 30x25, email 28x29). */
.mfa-method-icon {
    flex: 0 0 36px;
    height: 29px;
    background-repeat: no-repeat;
    background-position: left center;
}

.mfa-method-icon--sms {
    background-image: url("../img/mfa-icon-sms.svg");
    background-size: 30px 25px;
}

.mfa-method-icon--email {
    background-image: url("../img/mfa-icon-email.svg");
    background-size: 28px 29px;
}

.mfa-method-chevron {
    flex: 0 0 10px;
    height: 15px;
    background: url("../img/mfa-icon-chevron.svg") no-repeat center;
    background-size: contain;
}

/* Back links. The arrow is a two-frame sprite, 16x42 - the gray arrow on top,
   the darker hover arrow below it - the same file the vitu theme uses. */
.login__go-back-action {
    margin-top: 28px;
    text-align: center;
}

.login__go-back-action a::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    transform: translateY(-1px);
    background: url("../img/mfa-icon-back-arrow.svg") no-repeat 0 0;
    background-size: 16px 42px;
}

.login__go-back-action a:hover::before,
.login__go-back-action a:focus::before {
    background-position: 0 -26px;
}

/* --- vitu-otp.ftl -------------------------------------------------------- *
 *
 * Same 380px column as the enrolment form, and for the same reason: .mfa-form
 * is its own element, not a .pf-v5-c-form, so master-v2.css's form width does
 * not reach it. At 380px the six boxes and their gaps come out exactly even
 * (6 x 55 + 5 x 10), as they do in the vitu theme.
 */
.mfa-form {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.mfa_pp {
    margin: 0 0 18px;
}

/* Second line of the lede is the quieter half. */
#enroll {
    color: #999;
}

/* Six single-character boxes. vitu-otp.js advances focus between them and
   concatenates their values into the hidden `otp` field on submit. */
.security-code {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.security-code_input {
    width: 100%;
    max-width: 55px;
    height: 60px;
    text-align: center;
    font: 24px/1 Roboto, "Helvetica Neue", Arial, sans-serif;
    border: 2px solid #d5d5d5;
    border-radius: 5px;
}

.security-code_input:focus,
.security-code_input:focus-visible {
    border-color: #21bae7;
    box-shadow: 0 0 3px 2px #bceaf8;
    outline: none;
}

/* "Resend Code" / the countdown that replaces it belong beside the boxes, not
 * under them - the same off-to-the-right treatment master-v2.css gives the
 * login form's "Forgot?" link, and what the vitu theme does here.
 *
 * The form group is the positioning context. 60px tall so the text centres on
 * the row of boxes, and out of flow so "Back" closes up directly underneath
 * them instead of leaving a gap where this used to sit. */
.mfa-form .pf-v5-c-form__group {
    position: relative;
}

.form-action_right {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 180px;
    height: 60px;
}

#countdownMsg {
    font-size: 14px;
}

/* 380px of column, 20px of gap and a 180px block do not fit beside each other
   once the page's side padding is counted: put it back under the boxes. */
@media (max-width: 700px) {
    .form-action_right {
        position: static;
        flex-direction: row;
        justify-content: flex-end;
        align-items: baseline;
        gap: 8px;
        width: auto;
        height: auto;
        margin-left: 0;
    }
}

/* --- mfa-congrats.ftl ---------------------------------------------------- */

#congratulations {
    text-align: center;
}

/* Narrow screens: let the code boxes shrink rather than overflow the column. */
@media (max-width: 480px) {
    .security-code {
        gap: 6px;
    }

    .security-code_input {
        height: 52px;
        font-size: 20px;
    }
}