/*
 * Gandaki University examination portal login.
 * Page-scoped: loaded only by school-account/login-guniv.jsp, so nothing here
 * has to co-exist with the school layouts' stylesheets.
 */

:root {
    --gu-indigo: #2e2a80;
    --gu-indigo-dark: #221e60;
    --gu-indigo-ink: #2b2870;
    --gu-red: #dc2e24;
    --gu-red-dark: #bc251d;
    --gu-text: #344054;
    --gu-muted: #667085;
    --gu-placeholder: #98a2b3;
    --gu-line: #e4e7ec;
    --gu-field-line: #d0d5dd;
    --gu-surface: #f7f7fb;
    --gu-lavender: #ecebfa;
    --gu-topbar-height: clamp(62px, 9.4vh, 92px);
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: #ffffff;
    color: var(--gu-text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(46, 42, 128, .16);
}

.gu-login {
    caret-color: var(--gu-indigo);
}

.gu-login :focus-visible {
    outline: 2px solid var(--gu-indigo);
    outline-offset: 2px;
}

/* reCAPTCHA v3 badge - the notice is carried in the card footer instead */
.grecaptcha-badge {
    visibility: hidden;
}

/* ---------------------------------------------------------------- top bar */

.gu-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--gu-topbar-height);
    padding: clamp(8px, 1.4vh, 12px) 44px;
    background: #ffffff;
    border-bottom: 1px solid var(--gu-line);
}

.gu-topbar-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* the university's own lockup - crest and both names are inside the file */
.gu-topbar-brand img {
    display: block;
    width: auto;
    height: clamp(44px, 6.8vh, 64px);
    flex-shrink: 0;
}

.gu-topbar-system {
    text-align: right;
}

.gu-system-name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gu-indigo-ink);
}

.gu-system-office {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--gu-muted);
}

/* ------------------------------------------------------------ page split */

/*
 * The page frame: top bar, the split, then the footer, filling the screen once
 * and growing past it only when the sign-in card genuinely needs more room. It
 * is min-height rather than a fixed 100vh with overflow hidden - that locked
 * version never showed a scrollbar because it clipped the bottom of the card
 * instead, which on a laptop put the Log in button out of reach.
 */
body.gu-login {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.gu-topbar,
.gu-footer {
    flex: 0 0 auto;
}

.gu-main {
    display: grid;
    grid-template-columns: 54fr 46fr;
    /* no min-height: 0 - the row must not shrink below the card it holds */
    flex: 1 1 auto;
    /* minmax(0, 1fr), not auto: an auto row grows to the card's own height and
       pushed the left column past the screen, which clipped the artwork */
    grid-template-rows: minmax(0, 1fr);
}

/* ----------------------------------------------------------- left column */

.gu-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 58px 56px 0 60px;
    background: var(--gu-surface);
    overflow: hidden;
}

.gu-eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--gu-red);
}

.gu-eyebrow::before {
    content: "";
    width: 46px;
    height: 2px;
    background: var(--gu-red);
    flex-shrink: 0;
}

.gu-headline {
    margin: 0 0 26px;
    /* wide enough for "Management System" to sit on one line and too narrow for
       "Examination Management", so the title always breaks into the same two
       lines without relying on text-wrap: balance being supported */
    max-width: 20ch;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(38px, 4.1vw, 60px);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -.01em;
    color: var(--gu-indigo-ink);
    text-wrap: balance;
}

.gu-lead {
    margin: 0 0 34px;
    max-width: 56ch;
    font-size: 17px;
    line-height: 1.6;
    color: #475467;
}

.gu-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 480px;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid var(--gu-line);
    border-left: 3px solid var(--gu-red);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(43, 40, 112, .05);
}

.gu-note .material-icons {
    font-size: 21px;
    color: var(--gu-red);
    flex-shrink: 0;
}

.gu-note p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #475467;
}

.gu-campus {
    position: relative;
    margin: 28px -56px 0;
}

/* the photo's top edge fades into the column colour (--gu-surface), so there
   is no hard seam under the note */
.gu-campus::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 18%;
    background: linear-gradient(#f7f7fb, rgba(247, 247, 251, 0));
}

.gu-campus img {
    display: block;
    /* full width at its own proportions, so the whole photo is always shown */
    width: 100%;
    height: auto;
    opacity: .3;
}

/* ---------------------------------------------------------------- footer */

/* one row: the contact links on the left, the copyright line on the right */
.gu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 32px;
    padding: 14px 44px;
    background: #fff;
    border-top: 1px solid var(--gu-line);
}

.gu-footer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gu-footer-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #56607a;
}

.gu-footer-list .material-icons {
    font-size: 17px;
    color: #7b86a2;
    flex-shrink: 0;
}

.gu-footer-list a {
    color: inherit;
}

.gu-footer-list a:hover {
    color: var(--gu-indigo);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gu-footer-legal {
    margin: 0;
    font-size: 13px;
    color: #56607a;
}

.gu-footer-legal strong {
    color: #101828;
}

/* ---------------------------------------------------------- right column */

.gu-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2.5vh, 48px) 44px;
    background: linear-gradient(155deg, #332e92 0%, var(--gu-indigo) 46%, var(--gu-indigo-dark) 100%);
    overflow: hidden;
}

/* faint concentric arcs sweeping out of the top-right corner */
.gu-panel::before {
    content: "";
    position: absolute;
    top: -38%;
    right: -30%;
    width: 128%;
    aspect-ratio: 1;
    background: repeating-radial-gradient(circle at center,
    rgba(255, 255, 255, 0) 0 78px,
    rgba(255, 255, 255, .055) 78px 79px);
}

/* dot grid, bottom-left */
.gu-panel::after {
    content: "";
    position: absolute;
    left: 26px;
    bottom: 26px;
    width: 128px;
    height: 168px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .22) 1.1px, transparent 1.1px);
    background-size: 15px 15px;
    opacity: .75;
}

.gu-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    padding: clamp(16px, 2.4vh, 34px) 40px clamp(10px, 1.6vh, 22px);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(17, 15, 60, .28), 0 2px 6px rgba(17, 15, 60, .14);
}

.gu-card-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(38px, 5.6vh, 56px);
    height: clamp(38px, 5.6vh, 56px);
    margin-bottom: clamp(6px, 1.5vh, 16px);
    background: var(--gu-lavender);
    border-radius: 14px;
}

.gu-card-badge .material-icons {
    font-size: 27px;
    color: var(--gu-indigo);
}

.gu-card-eyebrow {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gu-indigo);
}

.gu-card-title {
    margin: 0 0 clamp(4px, .8vh, 8px);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(23px, 3.3vh, 34px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--gu-indigo-ink);
}

.gu-card-sub {
    margin: 0 0 clamp(10px, 2.3vh, 24px);
    font-size: 15px;
    color: var(--gu-muted);
}

/* ------------------------------------------------- role segmented control */

/*
 * option-login-role.jsp is shared with the other login pages, so its markup is
 * restyled rather than rewritten. Two declarations need !important to beat what
 * that partial ships: Bootstrap's .pl-4 utility and the label's inline font-size.
 * The rest matches MDB's own radio selectors so it wins on specificity alone.
 */
.gu-role {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: clamp(12px, 2.3vh, 24px);
    padding: 4px;
    background: #ffffff;
    border: 1px solid var(--gu-field-line);
    border-radius: 10px;
}

.gu-role .form-check {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    min-height: 0;
}

.gu-role .form-check-input {
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.gu-role .form-check-input[type=radio]:checked + label,
.gu-role .form-check-input[type=radio]:not(:checked) + label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: clamp(38px, 4.5vh, 46px);
    margin: 0;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: clamp(38px, 4.5vh, 46px);
    color: var(--gu-muted);
    background: #ffffff;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.gu-role .form-check-input[type=radio]:checked + label:before,
.gu-role .form-check-input[type=radio]:not(:checked) + label:before {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    transform: none;
    font-family: 'Material Icons', sans-serif;
    font-size: 20px;
    font-weight: normal;
    line-height: 1;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}

.gu-role .form-check-input[type=radio]:checked + label:after,
.gu-role .form-check-input[type=radio]:not(:checked) + label:after {
    display: none;
}

.gu-role #roleAdmin + label:before {
    content: "person";
}

.gu-role #roleStudentOrParent + label:before {
    content: "school";
}

.gu-role .form-check-input[type=radio]:not(:checked) + label:hover {
    background: #f6f6fb;
    color: var(--gu-indigo);
}

.gu-role .form-check-input[type=radio]:checked + label {
    color: #ffffff;
    background: var(--gu-indigo);
}

.gu-role .form-check-input:focus-visible + label {
    outline: 2px solid var(--gu-indigo);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- fields */

.gu-label {
    display: block;
    margin: 0 0 clamp(4px, .8vh, 8px);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gu-text);
}

.gu-field {
    position: relative;
    /* the bottom margin also holds the validation message, which is absolutely
       positioned so an invalid field does not shift the form */
    margin-bottom: clamp(18px, 2.2vh, 22px);
}

.gu-field > .material-icons {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--gu-placeholder);
    pointer-events: none;
}

.gu-input {
    display: block;
    width: 100%;
    height: clamp(42px, 4.9vh, 50px);
    padding: 0 46px;
    font-size: 15px;
    font-weight: 500;
    color: var(--gu-text);
    background: #ffffff;
    border: 1px solid var(--gu-field-line);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.gu-input::placeholder {
    color: var(--gu-placeholder);
    font-weight: 500;
}

.gu-input:hover {
    border-color: #b7bdcb;
}

.gu-input:focus {
    outline: none;
    border-color: var(--gu-indigo);
    box-shadow: 0 0 0 3px rgba(46, 42, 128, .13);
}

.gu-input.error {
    border-color: var(--gu-red);
}

.gu-input.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 46, 36, .13);
}

.gu-eye {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--gu-placeholder);
    cursor: pointer;
}

.gu-eye:hover {
    color: var(--gu-indigo);
    background: #f4f4fa;
}

.gu-eye .material-icons {
    font-size: 20px;
}

/* jquery-validate drops its message straight after the input */
.gu-field > div.error {
    position: absolute;
    top: calc(100% + 5px);
    left: 2px;
    font-size: 12px;
    line-height: 1.2;
    color: var(--gu-red);
}

.gu-forgot-row {
    margin: 0 0 clamp(10px, 2vh, 20px);
    text-align: right;
}

.gu-forgot-row a {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gu-indigo);
}

.gu-forgot-row a:hover {
    color: var(--gu-indigo-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gu-submit {
    display: block;
    width: 100%;
    min-height: clamp(42px, 5.1vh, 52px);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #ffffff;
    background: var(--gu-red);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.gu-submit:hover:not(:disabled) {
    background: var(--gu-red-dark);
    box-shadow: 0 8px 18px rgba(220, 46, 36, .28);
}

.gu-submit:active:not(:disabled) {
    transform: translateY(1px);
}

.gu-submit:disabled {
    background: #e7a49f;
    cursor: default;
}

/* ----------------------------------------------------------- card footer */

.gu-card-foot {
    margin-top: clamp(12px, 2.5vh, 26px);
    text-align: center;
}

.gu-card-rule {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(8px, 1.5vh, 16px);
}

.gu-card-rule::before,
.gu-card-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eaecf0;
}

.gu-card-rule .material-icons {
    font-size: 21px;
    color: var(--gu-placeholder);
}

.gu-card-foot p {
    margin: 0;
    font-size: 13px;
    color: var(--gu-muted);
}

.gu-card-foot .gu-version {
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: .04em;
    color: #a1a8b8;
}

/* ----------------------------------------------------------------- alerts */

.gu-card .alert {
    margin-bottom: 18px;
    padding: 12px 16px;
    font-size: 13.5px;
    border-radius: 8px;
}

/* ------------------------------------------------------------- entrance */

/* the campus photo is deliberately left out: it is the backdrop the text
   rises over, not part of the entrance */
.gu-card,
.gu-eyebrow,
.gu-headline,
.gu-lead,
.gu-note {
    animation: guRise .5s cubic-bezier(.16, .84, .3, 1) both;
}

.gu-headline {
    animation-delay: .05s;
}

.gu-lead {
    animation-delay: .1s;
}

.gu-note {
    animation-delay: .15s;
}

@keyframes guRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gu-card,
    .gu-intro > * {
        animation: none;
    }
}

/* ------------------------------------------------------- the split column */

@media (min-width: 1081px) {
    .gu-intro {
        min-height: 0;
    }

    .gu-panel {
        min-height: 0;
    }

    /*
     * The photo is a faint full-bleed layer on the floor of the column rather
     * than a block in the flow, so it never adds height and is never cropped:
     * at its own proportions across the full width the whole photo is shown,
     * and the text sits over it, kept readable by the low opacity.
     */
    .gu-campus {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        z-index: 0;
    }

    .gu-intro > .gu-eyebrow,
    .gu-intro > .gu-headline,
    .gu-intro > .gu-lead,
    .gu-intro > .gu-note {
        position: relative;
        z-index: 1;
    }
}

/* ---------------------------------------------------------- responsive */


@media (max-width: 1280px) {
    .gu-intro {
        padding: 46px 40px 0 44px;
    }

    .gu-campus {
        margin-right: -40px;
        margin-left: -44px;
    }

    .gu-card {
        padding: 30px 32px 24px;
    }
}

/*
 * Once the split stacks there is no room for the introduction beside the form,
 * and stacked it only pushes the form around, so the whole left column is
 * dropped and the sign-in panel takes the screen. Body is a flex column here so
 * the panel fills the height left by the top bar whatever height that turns out
 * to be - the bar wraps onto two lines on a phone.
 */
@media (max-width: 1080px) {
    .gu-main {
        grid-template-columns: 1fr;
    }

    .gu-intro {
        display: none;
    }

    .gu-panel {
        padding: 40px 28px;
    }

    .gu-footer {
        padding: 16px 28px;
    }
}

@media (max-width: 720px) {
    .gu-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 20px;
    }

    .gu-topbar-brand img {
        height: 44px;
        max-width: 100%;
    }

    .gu-topbar-system {
        text-align: left;
    }

    .gu-system-name,
    .gu-system-office {
        font-size: 13px;
    }

    .gu-panel {
        padding: 28px 16px;
    }

    .gu-panel::after {
        display: none;
    }

    .gu-card {
        padding: 26px 22px 20px;
        border-radius: 10px;
    }

    .gu-card-title {
        font-size: 28px;
    }

    .gu-footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .gu-footer-list {
        flex-direction: column;
    }
}