/* ============================================================
   login.css  -  Easy Edu-Manage login (desktop + mobile)

   Link this AFTER assets/css/style.css, on login.php only.
   It replaces BOTH the "EASY EDU-MANAGE LOGIN - DESKTOP" block
   in style.css and login_mobile.css.

   Brand colours: change the tokens below, nothing else.
   School photo:  assets/img/login-school.jpg
   ============================================================ */

:root {
    --edu-navy: #0b2350;      /* headings, button, icons */
    --edu-brand: #082d5c;     /* left panel / mobile header */
    --edu-accent: #38bdf8;    /* cyan divider */
    --edu-border: #d5dfeb;
    --edu-field-bg: #f8faff;
    --edu-muted: #6b7690;
    --edu-link: #0a5bd8;
    --edu-page: #f7f9fd;
    --edu-gap: clamp(14px, 1.8vw, 28px);   /* breathing space around the desktop page */
    --edu-gap-m: clamp(10px, 3vw, 22px);   /* breathing space around the mobile page (set to 0 for full-bleed) */
}

/* ---------- Font: Roboto, self-hosted so it also works offline (XAMPP clients) ---------- */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/roboto-latin-300-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2");
}

.login-page {
    font-family: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   SHARED (every screen size)
   ============================================================ */

.login-page,
.login-page *,
.login-page *::before,
.login-page *::after { box-sizing: border-box; }

.login-body { margin: 0; }

/* ----- Fields ----- */
.login-page .input-wrap { position: relative; width: 100%; }

.login-page .input-icon {
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--edu-navy);
    pointer-events: none;
}
.login-page .input-icon svg,
.login-page .toggle-password svg {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.login-page .form-control {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 52px 0 50px;
    font-family: inherit;
    font-size: 16px;               /* 16px stops iOS Safari zooming on focus */
    color: #18233b;
    background: var(--edu-field-bg);
    border: 1px solid var(--edu-border);
    border-radius: 11px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.login-page .form-control::placeholder { color: #98a3b8; opacity: 1; }
.login-page .form-control:focus {
    background: #fff;
    border-color: var(--edu-navy);
    box-shadow: 0 0 0 3px rgba(11, 35, 80, .12);
}

/* ----- Show / hide password ----- */
.login-page .toggle-password {
    position: absolute;
    right: 4px;
    top: 50%;
    z-index: 3;
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    color: var(--edu-navy);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.login-page .toggle-password .icon-eye-off { display: none; }
.login-page .toggle-password.is-showing .icon-eye { display: none; }
.login-page .toggle-password.is-showing .icon-eye-off { display: block; }
.login-page .toggle-password:focus-visible {
    outline: 2px solid var(--edu-navy);
    outline-offset: -4px;
}

/* ----- Remember me / Forgot password ----- */
.login-page .login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 22px;
    font-size: 14px;
}
.login-page .remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--edu-navy);
    cursor: pointer;
}
.login-page .remember input {
    width: 19px;
    height: 19px;
    margin: 0;
    accent-color: var(--edu-navy);
    cursor: pointer;
}
.login-page .forgot-link {
    padding: 0;
    font: inherit;
    color: var(--edu-link);
    background: none;
    border: 0;
    cursor: pointer;
}
.login-page .forgot-link:hover { text-decoration: underline; }
.login-page .forgot-link:focus-visible,
.login-page .remember input:focus-visible {
    outline: 2px solid var(--edu-link);
    outline-offset: 3px;
    border-radius: 4px;
}
.login-page .forgot-panel {
    margin: -6px 0 18px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--edu-navy);
    background: #eef4ff;
    border: 1px solid #cfe0fb;
    border-radius: 10px;
}
.login-page .forgot-panel[hidden] { display: none; }
.login-page .forgot-panel a { color: var(--edu-link); font-weight: 600; text-decoration: none; }

/* ----- Sign in button ----- */
.login-page .login-submit {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #12315f, #071f47);
    border: 0;
    border-radius: 11px;
    box-shadow: 0 8px 20px rgba(11, 35, 80, .18);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.login-page .login-submit:hover {
    background: linear-gradient(135deg, #12315f, #071f47);
    transform: translateY(-2px);
    box-shadow: 0 12px 27px rgba(11, 35, 80, .25);
}
.login-page .login-submit:active { transform: translateY(0) scale(.99); }
.login-page .login-submit:focus-visible {
    outline: 3px solid rgba(56, 189, 248, .6);
    outline-offset: 2px;
}
.login-page .login-submit:disabled { cursor: wait; opacity: .85; transform: none; }
.login-page .login-arrow {
    font-size: 21px;
    line-height: 1;
    transition: transform .2s ease;
}
.login-page .login-submit:hover .login-arrow { transform: translateX(4px); }

.login-page .alert { margin: 0 0 18px; }

/* Mobile-only pieces stay hidden until the mobile block turns them on */
.login-page .login-credit-mobile { display: none; }

/* ============================================================
   DESKTOP  (769px and wider)
   ============================================================ */

@media (min-width: 769px) {

    /* Breathing space: the page floats inside a soft pale-blue frame.
       Change --edu-gap at the top of this file to make the frame wider or thinner. */
    .login-body {
        padding: var(--edu-gap);
        background: #eaf0f7;
    }

    .login-page {
        position: relative;
        display: flex;
        width: 100%;
        min-height: calc(100vh - (var(--edu-gap) * 2));
        height: auto;
        margin: 0;
        overflow: hidden;
        background: var(--edu-page);
        border-radius: clamp(20px, 2vw, 30px);
        box-shadow: 0 18px 55px rgba(16, 36, 68, .14);
    }

    /* ----- Left: school panel ----- */
    .login-page .login-brand {
        position: relative;
        flex: 0 0 60%;
        width: 60%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 12% clamp(28px, 6vh, 64px) 4%;   /* extra right padding keeps text clear of the curve */
        overflow: hidden;
        text-align: center;
        color: #fff;
        background: var(--edu-brand);
        isolation: isolate;
    }

    /* School photo under a navy wash. If the photo is missing you just see the navy. */
    .login-page .login-brand::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background-image:
            linear-gradient(135deg,
                rgba(3, 36, 78, .93) 0%,
                rgba(5, 50, 100, .80) 45%,
                rgba(8, 68, 128, .52) 100%),
            url("../img/josanschool.JPEG");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        transform: translate3d(0, 0, 0) scale(1.04);
        transform-origin: center center;
        will-change: transform;          /* own GPU layer: painted once, then just scaled */
        backface-visibility: hidden;
        animation: eduSchoolMove 32s ease-in-out infinite alternate;
    }
    .login-page .login-brand::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(90deg,
            rgba(2, 26, 60, .25) 0%,
            rgba(3, 35, 74, .04) 60%,
            rgba(2, 29, 65, .14) 100%);
    }

    .login-page .login-brand-content {
        position: relative;
        z-index: 2;
        width: 100%;
        margin: auto 0;            /* centres the text in the space above the credit */
        display: flex;
        flex-direction: column;
        align-items: center;
        animation: eduBrandEnter .9s cubic-bezier(.2, .7, .2, 1) both;
    }

    .login-page .login-brand .emoji {
        margin: 0 0 clamp(10px, 1.2vw, 20px);
        line-height: 0;
        filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .24));
        animation: eduCapEnter .8s cubic-bezier(.2, .8, .2, 1) both;
    }
    .login-page .login-brand .emoji svg {
        display: block;
        width: clamp(80px, 8vw, 130px);
        height: auto;
    }
    /* A school's own logo sits on a white badge so it reads on any photo */
    .login-page .login-brand .emoji .school-logo {
        display: block;
        width: clamp(120px, 11vw, 190px);
        height: auto;
        padding: 10px;
        background: #fff;
        border-radius: 22px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    }

    .login-page .login-brand h1 {
        margin: 0;
        font-size: clamp(34px, 3.4vw, 56px);
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: -.03em;
        color: #fff;
        text-shadow: 0 3px 12px rgba(0, 0, 0, .2);
    }
    .login-page .brand-subtitle {
        margin: .3em 0 0;
        font-size: clamp(16px, 1.6vw, 26px);
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: .01em;
        color: rgba(255, 255, 255, .92);
    }
    .login-page .brand-divider {
        width: clamp(64px, 6.5vw, 110px);
        height: 4px;
        margin: clamp(16px, 1.8vw, 26px) auto;
        border-radius: 20px;
        background: linear-gradient(90deg, #35baf5, #82dcff);
        box-shadow: 0 0 17px rgba(56, 189, 248, .34);
    }
    .login-page .brand-tagline {
        margin: 0;
        font-size: clamp(14px, 1.25vw, 20px);
        line-height: 1.55;
        letter-spacing: .06em;
        color: rgba(255, 255, 255, .96);
    }

    /* ----- Built by / contacts ----- */
    .login-page .login-brand .credit {
        position: relative;        /* sits in the normal flow, so it shares the exact centre line of the text above */
        width: 100%;
        flex-shrink: 0;
        margin-top: clamp(20px, 4vh, 44px);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .4em;
        font-size: clamp(13px, 1.1vw, 17px);
        line-height: 1.4;
        color: rgba(255, 255, 255, .93);
        animation: eduCreditEnter .9s .45s ease both;
    }
    .login-page .credit-built { margin-bottom: .2em; }
    .login-page .credit-built strong { font-weight: 700; color: #fff; }
    .login-page .credit-contact {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .55em;
    }
    .login-page .credit-contact svg {
        width: 1.15em;
        height: 1.15em;
        flex-shrink: 0;
        color: #fff;
    }
    .login-page .credit-contact a {
        color: rgba(255, 255, 255, .95);
        text-decoration: none;
        transition: color .2s ease;
    }
    .login-page .credit-contact a:hover { color: #fff; text-decoration: underline; }
    .login-page .credit-contact strong { font-weight: 700; color: #fff; }

    /* ----- Right: sign-in side ----- */
    .login-page .login-formside {
        position: relative;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48px 4% 48px 3%;
        background: var(--edu-page);
        overflow: visible;             /* the curve below bulges out to the left */
        isolation: isolate;
    }

    /* Big curved edge: an ellipse centred on the bottom-left corner of this side.
       ::before is the solid edge, ::after is the pale translucent band behind it.
       To make the curve deeper or shallower, change the width % (and left = -half of it). */
    .login-page .login-formside::before {
        content: "";
        position: absolute;
        top: 0;
        left: -25%;
        width: 50%;
        height: 200%;
        z-index: 0;
        border-radius: 50%;
        background: var(--edu-page);
        pointer-events: none;
    }
    .login-page .login-formside::after {
        content: "";
        position: absolute;
        top: -4%;
        left: -32%;
        width: 64%;
        height: 208%;
        z-index: -1;
        border-radius: 50%;
        background: rgba(255, 255, 255, .34);
        pointer-events: none;
    }

    .login-page .login-card {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 500px;
        margin: 0;
        padding: clamp(28px, 2.6vw, 44px) clamp(24px, 2.5vw, 40px);
        background: #fff;
        border: 1px solid rgba(219, 227, 238, .9);
        border-radius: 22px;
        box-shadow: 0 22px 60px rgba(20, 33, 61, .14);
        animation: eduCardEnter .85s .12s cubic-bezier(.2, .7, .2, 1) both;
    }
    .login-page .login-card h2 {
        margin: 0 0 6px;
        font-size: clamp(24px, 2vw, 32px);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.02em;
        color: var(--edu-navy);
    }
    .login-page .login-card .subtitle {
        margin: 0 0 clamp(20px, 2vw, 30px);
        font-size: clamp(13px, 1vw, 15px);
        line-height: 1.5;
        color: var(--edu-muted);
    }
    .login-page .login-card .form-group { margin-bottom: 20px; }
    .login-page .form-control { font-size: 15px; }
    .login-page .login-card .form-label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--edu-navy);
    }

    /* ----- Entrance animations (one moment, plays once) ----- */
    @keyframes eduSchoolMove {
        from { transform: translate3d(0, 0, 0) scale(1.04); }
        to   { transform: translate3d(0, 0, 0) scale(1.12); }
    }
    @keyframes eduBrandEnter {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes eduCapEnter {
        from { opacity: 0; transform: translateY(-15px) scale(.9); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes eduCardEnter {
        from { opacity: 0; transform: translateX(35px) translateY(8px); }
        to   { opacity: 1; transform: translateX(0) translateY(0); }
    }
    @keyframes eduCreditEnter {
        from { opacity: 0; transform: translateY(15px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* Smaller laptops */
@media (min-width: 769px) and (max-width: 1100px) {
    .login-page .login-brand { flex-basis: 58%; width: 58%; padding-right: 10%; }
    .login-page .login-formside { padding: 32px 24px 32px 20px; }
    .login-page .login-card { padding: 34px 28px; }
    .login-page .form-control { height: 48px; }
    .login-page .login-submit { min-height: 48px; }
}

/* ============================================================
   MOBILE  (768px and narrower)  -  Design 1: Clean & Simple
   ============================================================ */

@media (max-width: 768px) {

    /* Breathing space: the whole mobile page floats inside a pale frame.
       Set --edu-gap-m to 0 at the top of this file for edge-to-edge. */
    .login-body {
        padding: var(--edu-gap-m);
        background: #eaf0f7;
    }

    .login-page {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - (var(--edu-gap-m) * 2));
        min-height: calc(100dvh - (var(--edu-gap-m) * 2));
        height: auto;
        overflow: hidden;
        background: var(--edu-brand);
        border-radius: 26px;
        box-shadow: 0 12px 36px rgba(16, 36, 68, .16);
    }

    /* ----- Navy header (about 38% of the screen) ----- */
    .login-page .login-brand {
        flex: none;
        width: 100%;
        min-height: 38vh;
        min-height: 38dvh;
        padding: 40px 20px 56px;       /* extra bottom room for the card overlap */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: var(--edu-brand);
    }
    .login-page .login-brand-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .login-page .login-brand .emoji { margin: 0 0 12px; line-height: 0; }
    .login-page .login-brand .emoji svg { display: block; width: 84px; height: auto; }
    .login-page .login-brand .emoji .school-logo { display: block; width: 112px; height: auto; padding: 7px; background: #fff; border-radius: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
    .login-page .login-brand h1 {
        margin: 0 0 6px;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -.2px;
        color: #fff;
    }
    .login-page .brand-subtitle {
        margin: 0;
        font-size: 15px;
        font-weight: 400;
        color: rgba(255, 255, 255, .88);
    }
    .login-page .brand-divider,
    .login-page .brand-tagline,
    .login-page .login-brand .credit { display: none; }

    /* ----- White sheet that overlaps the header ----- */
    .login-page .login-formside {
        flex: 1;
        width: 100%;
        margin-top: -28px;
        padding: 30px 22px 24px;
        display: flex;
        align-items: stretch;
        justify-content: center;
        position: relative;
        background: #fff;
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -6px 24px rgba(8, 23, 57, .18);
    }
    .login-page .login-card {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        background: transparent;
        border: 0;
        box-shadow: none;
        animation: none;
    }
    .login-page .login-card h2 {
        margin: 0 0 4px;
        font-size: 24px;
        font-weight: 700;
        color: var(--edu-navy);
    }
    .login-page .login-card .subtitle {
        margin: 0 0 22px;
        font-size: 14px;
        color: var(--edu-muted);
    }

    /* Labels give way to icons + placeholders, but stay readable to screen readers */
    .login-page .login-card .form-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .login-page .login-card .form-group { margin-bottom: 14px; }

    .login-page .form-control { height: 50px; border-radius: 10px; }
    .login-page .login-options { margin: 4px 0 20px; font-size: 14px; }

    .login-page .login-submit {
        min-height: 52px;
        margin: 0;
        padding: 0;
        font-size: 16px;
        border-radius: 10px;
    }
    .login-page .login-submit:hover { transform: none; }
    .login-page .login-arrow { display: none; }
    .login-page .login-card .alert { font-size: 14px; }

    /* ----- Footer credit ----- */
    .login-page .login-credit-mobile {
        display: block;
        margin-top: auto;
        padding-top: 32px;
        text-align: center;
        font-size: 12.5px;
        line-height: 1.75;
        color: var(--edu-muted);
    }
    .login-page .login-credit-mobile strong { font-weight: 600; color: var(--edu-navy); }
    .login-page .login-credit-mobile a { color: inherit; text-decoration: none; }
}

/* Tablet in portrait: a little more breathing room */
@media (min-width: 481px) and (max-width: 768px) {
    .login-page .login-brand { padding-top: 56px; }
    .login-page .login-formside { padding: 40px 32px 28px; }
}

/* Very small phones */
@media (max-width: 380px) {
    .login-page .login-brand .emoji svg { width: 70px; }
    .login-page .login-brand .emoji .school-logo { width: 96px; }
    .login-page .login-brand h1 { font-size: 26px; }
    .login-page .login-formside { padding: 26px 16px 20px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .login-page .login-brand::before,
    .login-page .login-brand-content,
    .login-page .login-brand .emoji,
    .login-page .login-brand .credit,
    .login-page .login-card { animation: none !important; }
}