:root {
    --iqa-navy: #071f3b;
    --iqa-navy-2: #0c3154;
    --iqa-cyan: #08b9d1;
    --iqa-cyan-dark: #007f98;
    --iqa-ink: #13243a;
    --iqa-muted: #607087;
    --iqa-line: #d8e2eb;
    --iqa-soft: #f3f8fb;
    --iqa-white: #fff;
}

/*
 * Auth V2 is loaded as a blocking stylesheet in Moodle's document head.
 * Keep the native RemUI login shell out of the first paint while the approved
 * structure is assembled. The animation is a safety fallback if JavaScript is
 * prevented from running, so authentication never becomes inaccessible.
 */
html { background: #eef4f8; }
body.pagelayout-login:not(.iq-auth-v2) {
    visibility: hidden;
    animation: iqa-auth-failsafe 0s 4s forwards;
}
body.iq-auth-v2:not(.iqa-auth-ready) { visibility: hidden; }
body.iq-auth-v2.iqa-auth-ready { visibility: visible; }
@keyframes iqa-auth-failsafe { to { visibility: visible; } }

body.iq-auth-v2 {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto minmax(min-content, 1fr) auto;
    min-height: 100vh;
    margin: 0;
    color: var(--iqa-ink);
    background: #eef4f8;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Keep the approved learning image visible while long account-creation forms
 * scroll. A fixed layer avoids the blank/gray area that appears when a
 * viewport-sized background is captured beyond the first screen. */
body.iq-auth-v2::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(235, 244, 248, .42)),
        url("../iqgradshome/pix/learn-online.webp") center/cover no-repeat;
}

body.iq-auth-v2 #page,
body.iq-auth-v2 #page-wrapper,
body.iq-auth-v2 #page-content,
body.iq-auth-v2 #region-main,
body.iq-auth-v2 .login-wrapper {
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Moodle's grid shell can otherwise size its direct children to the
 * mobile header's intrinsic width (414px on a 390px viewport). Keep every
 * page row shrinkable so the auth surface never introduces horizontal scroll. */
body.iq-auth-v2 > .iqa-header,
body.iq-auth-v2 > #page-wrapper,
body.iq-auth-v2 > .iqa-footer,
body.iq-auth-v2 #page,
body.iq-auth-v2 #page-content,
body.iq-auth-v2 #region-main-box,
body.iq-auth-v2 #region-main {
    width: 100%;
    min-width: 0;
}

/*
 * RemUI gives the authentication page chain a viewport-height flex basis.
 * Keep the body as the page-height owner, then centre the real Moodle form
 * inside the available row between the IQGRADS header and footer. This makes
 * the shell follow its content instead of inheriting a tall blank column.
 */
body.iq-auth-v2 #page-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 0 !important;
}

body.iq-auth-v2 #page,
body.iq-auth-v2 #page-content,
body.iq-auth-v2 #region-main {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
}

body.iq-auth-v2 #page {
    flex: 0 1 auto;
}

body.iq-auth-v2 #page-content {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

body.iq-auth-v2 .navbar,
body.iq-auth-v2 #page-footer,
body.iq-auth-v2 .secondary-navigation,
body.iq-auth-v2 .drawer-toggles,
body.iq-auth-v2 .simplesearchform {
    display: none !important;
}

.iqa-skip-link {
    position: fixed;
    z-index: 10000;
    top: -60px;
    left: 24px;
    padding: 11px 16px;
    border-radius: 0 0 9px 9px;
    color: #fff !important;
    background: var(--iqa-navy);
    font-size: .84rem;
    font-weight: 700;
    transition: top .15s;
}

.iqa-skip-link:focus { top: 0; }

.iqa-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    min-height: 60px;
    padding: 0 clamp(22px, 3.5vw, 56px);
    border-bottom: 1px solid #dfe8ef;
    background: rgba(255, 255, 255, .97);
}

.iqa-brand { display: inline-flex; align-items: center; }
.iqa-brand img { display: block; width: 142px; height: 44px; object-fit: contain; }
.iqa-header nav { display: flex; justify-content: flex-end; align-items: center; gap: 26px; }
.iqa-header a { color: #334760; font-size: .82rem; font-weight: 650; text-decoration: none !important; }
.iqa-header a:hover,
.iqa-header a:focus { color: var(--iqa-cyan-dark); text-decoration: none !important; }
.iqa-back { padding: 9px 13px; border: 1px solid var(--iqa-line); border-radius: 8px; }

body.iq-auth-v2 .login-wrapper.iqa-shell {
    display: block;
    width: min(720px, calc(100% - 40px));
    min-height: 0;
    height: auto !important;
    margin: 14px auto 16px;
    overflow: hidden;
    border: 1px solid #d9e4ed;
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(16px) saturate(112%);
    backdrop-filter: blur(16px) saturate(112%);
    box-shadow: 0 18px 58px rgba(7, 31, 59, .18);
}

.iqa-context {
    display: none !important;
}

.iqa-context::after {
    position: absolute;
    right: -100px;
    bottom: -120px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(75, 214, 230, .2);
    border-radius: 50%;
    content: "";
}

.iqa-context__body,
.iqa-context__footer { position: relative; z-index: 1; }
.iqa-eyebrow { margin: 0 0 13px; color: #66d9e7; font-size: .62rem; font-weight: 760; letter-spacing: .13em; }
.iqa-context h2 { max-width: 420px; margin: 0 0 12px; color: #fff; font-size: clamp(1.5rem, 2vw, 1.82rem); font-weight: 470; letter-spacing: -.022em; line-height: 1.14; }
.iqa-context__body > p:not(.iqa-eyebrow) { max-width: 420px; margin: 0; color: rgba(255, 255, 255, .8); font-size: .77rem; line-height: 1.52; }

.iqa-journey { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 21px 0 18px; padding: 0; list-style: none; }
.iqa-journey li { display: grid; grid-template-columns: 24px 1fr; gap: 9px; min-height: 38px; color: rgba(255, 255, 255, .66); }
.iqa-journey li b { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; font-size: .62rem; }
.iqa-journey li span { display: grid; align-content: start; gap: 2px; }
.iqa-journey strong { color: #fff; font-size: .69rem; font-weight: 650; }
.iqa-journey small { font-size: .6rem; }
.iqa-journey li:not(:last-child) b::after { display: none; }
.iqa-context__footer { display: flex; flex-wrap: wrap; gap: 9px 15px; color: rgba(255, 255, 255, .64); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.iqa-context__footer i { align-self: center; width: 3px; height: 3px; border-radius: 50%; background: var(--iqa-cyan); }

body.iq-auth-v2 .login-container {
    align-self: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 !important;
    height: fit-content !important;
    min-height: 0 !important;
    padding: 24px 36px 22px !important;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .9);
    box-shadow: none;
}

.iqa-form-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.iqa-step { display: inline-flex; align-items: center; gap: 8px; color: var(--iqa-cyan-dark); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.iqa-step::before { width: 7px; height: 7px; border-radius: 50%; background: var(--iqa-cyan); content: ""; }
.iqa-secure { color: #6b7d91; font-size: .7rem; font-weight: 650; }
.iqa-secure::before { margin-right: 6px; color: #15936c; content: "✓"; }

body.iq-auth-v2 .login-container > h1 {
    margin: 0 0 14px;
    color: var(--iqa-ink);
    font-size: clamp(1.9rem, 2.5vw, 2.35rem);
    font-weight: 510;
    letter-spacing: -.028em;
    line-height: 1.15;
}

body.iq-auth-v2 .login-container h2,
body.iq-auth-v2 .login-container .login-heading {
    margin: 16px 0 8px;
    color: var(--iqa-ink);
    font-size: clamp(1.05rem, 1.45vw, 1.3rem);
    font-weight: 560;
    letter-spacing: -.012em;
    line-height: 1.3;
}

body.iq-auth-v2 .login-container .login-logo img {
    width: min(158px, 42%);
    max-height: 58px;
    object-fit: contain;
}

body.iq-auth-v2 .login-container > .logo-area { display: none !important; }

.iqa-lead { max-width: 560px; margin: 0 0 8px; color: var(--iqa-muted); font-size: .78rem; line-height: 1.48; }
body.iq-auth-v2 .login-container label { color: #293d55; font-size: .76rem; font-weight: 680; }
body.iq-auth-v2 .login-container .form-control,
body.iq-auth-v2 .login-container input:not([type="checkbox"]):not([type="radio"]),
body.iq-auth-v2 .login-container select {
    min-height: 40px;
    border: 1px solid #cbd7e1;
    border-radius: 8px;
    color: var(--iqa-ink);
    background-color: #fff;
    font-size: .82rem;
    box-shadow: none;
}
body.iq-auth-v2 .login-container input:focus,
body.iq-auth-v2 .login-container select:focus { border-color: var(--iqa-cyan-dark); box-shadow: 0 0 0 3px rgba(8, 185, 209, .14); }
body.iq-auth-v2 .login-container .btn-primary,
body.iq-auth-v2 .login-container input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid var(--iqa-cyan);
    border-radius: 8px;
    color: #fff;
    background: var(--iqa-cyan);
    font-size: .8rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    box-shadow: none;
}
body.iq-auth-v2 .login-container .btn-primary:hover,
body.iq-auth-v2 .login-container input[type="submit"]:hover { border-color: #079bb1; background: #079bb1; }
body.iq-auth-v2 .login-container .btn-secondary { min-height: 40px; border-color: var(--iqa-line); border-radius: 8px; color: #294159; background: #fff; font-size: .76rem; font-weight: 660; }
body.iq-auth-v2 .login-container a { color: var(--iqa-cyan-dark); text-decoration: none !important; font-weight: 650; }
body.iq-auth-v2 .login-container a:hover { color: #005f73; text-decoration: none !important; }
body.iq-auth-v2 .login-container .divider { color: #8391a1; font-size: .7rem; }
body.iq-auth-v2 .login-container .alert { border: 0; border-left: 4px solid; border-radius: 8px; font-size: .78rem; }
body.iq-auth-v2 .login-container .login-identityproviders .btn { min-height: 40px; border-color: var(--iqa-line); border-radius: 8px; background: #fff; }
body.iq-auth-v2 .login-container .mform .form-group { margin-bottom: 12px; }
body.iq-auth-v2 .login-container .mform fieldset { margin-bottom: 16px; }
body.iq-auth-v2 .login-container .collapsible-actions { display: none; }

/* RemUI's native login utility spacing is intentionally reduced here so the
 * enterprise shell stays compact without hiding any account or access route. */
body.iq-auth-v2 .login-container .loginform { height: auto !important; min-height: 0 !important; gap: 8px !important; }
body.iq-auth-v2 .login-container .login-welcome-wrapper { gap: 3px !important; }
body.iq-auth-v2 .login-container .login-welcome-wrapper > .para-regular-3 { display: none !important; }
body.iq-auth-v2 .login-container .login-form { margin: 0 !important; }
body.iq-auth-v2 .login-container .login-identityproviders { gap: 7px !important; }
body.iq-auth-v2 .login-container .login-form .form-group { margin-bottom: 9px !important; }
body.iq-auth-v2 .login-container .cookies-section { min-height: 22px; height: auto !important; align-items: center; padding: 10px 0 !important; }
body.iq-auth-v2 .login-container .login-welcome-wrapper h2 { margin: 0 !important; }

.iqa-secondary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.iqa-secondary-actions > div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: stretch;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: .72rem;
}
.iqa-secondary-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px !important;
    padding: 6px 10px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}
.iqa-secondary-actions .login-instructions,
.iqa-secondary-actions h2,
.iqa-secondary-actions .login-heading {
    display: none !important;
}
.iqa-secondary-actions form,
.iqa-secondary-actions .login-signup { margin: 0 !important; }

.iqa-form-note { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin: 10px 0 0; padding: 9px 11px; border: 1px solid #d8e8ec; border-radius: 8px; color: #4f657b; background: #f4fbfc; font-size: .65rem; line-height: 1.4; }
.iqa-form-note::before { color: #15936c; font-weight: 800; content: "✓"; }
.iqa-footer { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 40px; padding: 0 clamp(22px, 3.5vw, 56px); color: #718095; font-size: .64rem; }

@media (min-width: 921px) {
    body.iqa-page-login .login-wrapper.iqa-shell,
    body.iqa-page-forgot .login-wrapper.iqa-shell,
    body.iqa-page-confirm .login-wrapper.iqa-shell,
    body.iqa-page-reset .login-wrapper.iqa-shell,
    body.iqa-page-mfa .login-wrapper.iqa-shell {
        min-height: 0;
    }
}
.iqa-footer nav { display: flex; gap: 18px; }
.iqa-footer a { color: #52677d; text-decoration: none !important; }

@media (max-width: 920px) {
    .iqa-header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
    .iqa-header nav { min-width: 0; }
    .iqa-header > span { display: none; }
    .iqa-header nav a:not(.iqa-back) { display: none; }
    body.iq-auth-v2 .login-wrapper.iqa-shell { width: min(680px, calc(100% - 28px)); }
    .iqa-context { min-height: 210px; padding: 28px 32px; }
    .iqa-context h2 { max-width: 600px; font-size: 1.75rem; }
    .iqa-context__body > p:not(.iqa-eyebrow) { max-width: 600px; }
    .iqa-journey { display: none; }
    .iqa-context__footer { margin-top: 26px; }
    body.iq-auth-v2 .login-container { padding: 32px 30px !important; }
}

@media (max-width: 560px) {
    .iqa-header { min-height: 60px; padding: 0 15px; }
    .iqa-brand img { width: 132px; height: 44px; }
    .iqa-back { padding: 8px 10px; font-size: .72rem !important; }
    body.iq-auth-v2 {
        background-position: 52% center;
        background-attachment: scroll;
    }
    body.iq-auth-v2 .login-wrapper.iqa-shell {
        width: calc(100% - 24px);
        margin: 12px auto;
        border: 1px solid rgba(216, 226, 235, .94);
        border-radius: 14px;
        box-shadow: 0 12px 36px rgba(7, 31, 59, .16);
    }
    body.iq-auth-v2 .login-container { padding: 24px 20px !important; }
    .iqa-form-topline { align-items: flex-start; flex-direction: column; gap: 8px; }
    .iqa-footer { align-items: flex-start; flex-direction: column; justify-content: center; padding: 16px 20px; }
    .iqa-secondary-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 340px) {
    .iqa-secondary-actions { grid-template-columns: 1fr; }
    .iqa-secondary-actions > div { min-height: 0; }
}