/* ==========================================================================
   KBL English High School - Login page ("School Management Portal")
   Used only by Views/Account/login.cshtml.

   The design is laid out on the same 1672 x 941 grid as the approved mock-up
   (images/KBL School Login Portal at Sunrise.png). Every size is written as
   "N * var(--u)" where N is the pixel value measured on that mock-up and --u is
   the size of one mock-up pixel at the current screen size, so the card stays
   exactly on top of the card that is painted into the background picture.
   ========================================================================== */

:root {
    /* 1 mock-up pixel; same maths as background-size: cover on a 1672 x 941 picture */
    --u: calc(max(100vw, 177.66vh) / 1672);

    --kbl-navy: #12327a;
    --kbl-blue: #1b5cc8;
    --kbl-text: #243247;
    --kbl-muted: #70809a;
    --kbl-gold: #f2b630;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #2f6fc4;
}

/* ---- page background (full picture, centred, cropped like "cover") ---- */
.kbl-login-bg {
    position: fixed;
    inset: 0;
    background: #2f6fc4 url("../images/KBL%20School%20Login%20Portal%20at%20Sunrise.png") center center / cover no-repeat;
}

.kbl-login {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    overflow: hidden;
}

/* ---- the card (2 mock-up px larger on every side so it fully covers the card in the picture) ---- */
.kbl-card {
    position: relative;
    flex: none;
    width: calc(var(--u) * 527);
    height: calc(var(--u) * 704);
    /* the picture's card is 2.5 mock-up px below the exact page centre */
    transform: translateY(calc(var(--u) * 2.5));
    border-radius: calc(var(--u) * 30);
    border: calc(var(--u) * 1.5) solid rgba(255, 255, 255, .95);
    background: linear-gradient(180deg, #fbfdff 0%, #f3f7fd 55%, #edf3fb 100%);
    box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgba(28, 98, 214, .28),
                0 0 calc(var(--u) * 2) rgba(255, 255, 255, .9);
}

/* inner box = the 523 x 700 card of the mock-up; all children are placed with mock-up coordinates */
.kbl-card-inner {
    position: absolute;
    left: calc(var(--u) * 2);
    top: calc(var(--u) * 2);
    width: calc(var(--u) * 523);
    height: calc(var(--u) * 700);
}

.kbl-card form { margin: 0; }

.kbl-logo {
    position: absolute;
    left: calc(var(--u) * 160);
    top: calc(var(--u) * 37);
    width: calc(var(--u) * 203);
    height: auto;
    mix-blend-mode: multiply;   /* drops the white box around the logo file */
}

.kbl-title,
.kbl-subtitle,
.kbl-tagline {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

.kbl-title {
    top: calc(var(--u) * 224);
    font-size: calc(var(--u) * 28.4);
    line-height: calc(var(--u) * 36);
    font-weight: 700;
    color: var(--kbl-navy);
}

.kbl-subtitle {
    top: calc(var(--u) * 264);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 20);
    font-weight: 500;
    letter-spacing: calc(var(--u) * 1.45);
    text-transform: uppercase;
    color: #1a3a7a;
}

.kbl-divider {
    position: absolute;
    top: calc(var(--u) * 301);
    left: calc(var(--u) * 219);
    width: calc(var(--u) * 86);
    height: calc(var(--u) * 3);
    border-radius: 3px;
    background: linear-gradient(90deg,
        var(--kbl-gold) 0, var(--kbl-gold) 47.7%,
        transparent 47.7%, transparent 52.3%,
        var(--kbl-navy) 52.3%, var(--kbl-navy) 100%);
}

.kbl-tagline {
    top: calc(var(--u) * 324);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 18);
    letter-spacing: calc(var(--u) * 0.6);
    color: var(--kbl-muted);
}

/* ---- inputs ---- */
.kbl-field {
    position: absolute;
    left: calc(var(--u) * 47);
    width: calc(var(--u) * 428);
    height: calc(var(--u) * 57);
}

.kbl-field--user { top: calc(var(--u) * 369); }
.kbl-field--pass { top: calc(var(--u) * 442); }

.kbl-field input[type="text"],
.kbl-field input[type="password"] {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 calc(var(--u) * 52) 0 calc(var(--u) * 60);
    border: calc(var(--u) * 1.5) solid #e1e8f2;
    border-radius: calc(var(--u) * 29);
    background: #fff;
    box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(30, 70, 140, .06);
    font: inherit;
    font-size: calc(var(--u) * 17);
    color: var(--kbl-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.kbl-field input::placeholder { color: #8d99ab; opacity: 1; }

.kbl-field input:focus {
    border-color: #5b9af0;
    box-shadow: 0 0 0 calc(var(--u) * 3) rgba(37, 117, 232, .18);
}

.kbl-field .kbl-ico {
    position: absolute;
    left: calc(var(--u) * 18);
    top: 50%;
    width: calc(var(--u) * 18);
    height: calc(var(--u) * 18);
    transform: translateY(-50%);
    color: #5d6b7e;
    pointer-events: none;
}

.kbl-eye {
    position: absolute;
    right: calc(var(--u) * 7);
    top: 50%;
    width: calc(var(--u) * 38);
    height: calc(var(--u) * 38);
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7889;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kbl-eye:hover { color: var(--kbl-blue); }
.kbl-eye svg { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
.kbl-eye .kbl-eye-on { display: none; }
.kbl-eye.is-visible .kbl-eye-on { display: block; }
.kbl-eye.is-visible .kbl-eye-off { display: none; }

/* ---- remember me / forgot password ---- */
.kbl-row {
    position: absolute;
    left: calc(var(--u) * 47);
    top: calc(var(--u) * 514);
    width: calc(var(--u) * 428);
    height: calc(var(--u) * 24);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc(var(--u) * 15);
}

.kbl-remember {
    display: flex;
    align-items: center;
    margin: 0;
    color: #3b4a60;
    cursor: pointer;
    user-select: none;
}

.kbl-remember input {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: calc(var(--u) * 17);
    height: calc(var(--u) * 17);
    margin: 0 calc(var(--u) * 11) 0 calc(var(--u) * 1);
    border: calc(var(--u) * 1.5) solid #8b98ab;
    border-radius: calc(var(--u) * 3);
    background: #fff;
    cursor: pointer;
    display: grid;
    place-content: center;
}

.kbl-remember input::after {
    content: "";
    width: calc(var(--u) * 9);
    height: calc(var(--u) * 5);
    border-left: calc(var(--u) * 2) solid #fff;
    border-bottom: calc(var(--u) * 2) solid #fff;
    transform: translateY(-12%) rotate(-45deg) scale(0);
    transition: transform .1s;
}

.kbl-remember input:checked { background: #0b57d9; border-color: #0b57d9; }
.kbl-remember input:checked::after { transform: translateY(-12%) rotate(-45deg) scale(1); }
.kbl-remember input:focus-visible { box-shadow: 0 0 0 calc(var(--u) * 3) rgba(37, 117, 232, .25); }

.kbl-forgot { color: var(--kbl-blue); font-weight: 500; text-decoration: none; }
.kbl-forgot:hover { text-decoration: underline; }

/* ---- sign in button ---- */
.kbl-btn {
    position: absolute;
    left: calc(var(--u) * 47);
    top: calc(var(--u) * 561);
    width: calc(var(--u) * 428);
    height: calc(var(--u) * 58);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: calc(var(--u) * 29);
    background: linear-gradient(90deg, #0a55d8 0%, #1479e6 55%, #1a8aef 100%);
    box-shadow: 0 calc(var(--u) * 9) calc(var(--u) * 20) rgba(18, 100, 230, .38),
                inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, .25);
    color: #fff;
    font: inherit;
    font-size: calc(var(--u) * 19);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 10);
    transition: filter .15s, transform .15s;
}

.kbl-btn:hover { filter: brightness(1.07); }
.kbl-btn:active { transform: translateY(1px); }
.kbl-btn svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }

/* ---- login error ---- */
.kbl-msg {
    position: absolute;
    left: 0;
    top: calc(var(--u) * 634);
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: calc(var(--u) * 14.5);
    color: #d93025;
}

/* ---- phones / very tall screens: the picture's own card cannot fit, so show the
        left part of the picture (school building) and a normal-sized card ---- */
@media (max-width: 575px), (max-aspect-ratio: 3/4) {
    :root { --u: calc(min(92vw, 420px) / 527); }

    .kbl-login-bg { background-position: left center; }
    .kbl-card { transform: none; }
}