/* ============================================================================
   School ERP blue theme - public and auth pages

   Used by: userlogin, ufpassword, resetpassword, user/choose, share,
   admin/login, admin/forgotpassword, admin/admin_resetpassword.

   Component language follows the School ERP mobile app kit: royal blue app
   surfaces, deep navy headings, Poppins, underlined text fields with the label
   sitting above, pill search bars, arrow-chip buttons and soft-shadowed white
   cards on a pale blue ground.

   Token names mirror an MUI createTheme() palette so the two stay in step.
   Mobile first: 0-599 stacked, 600-1023 tablet split, 1024+ desktop split.
   ========================================================================== */

:root {
    --ml-font: "Poppins", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* palette.primary */
    --ml-primary: #4A6FC4;
    --ml-primary-light: #7C97DB;
    --ml-primary-dark: #3A579E;
    --ml-primary-soft: #EDF2FC;
    --ml-on-primary: #FFFFFF;
    /* palette.secondary - the amber used for badges in the app kit */
    --ml-secondary: #E08A16;
    /* palette.background + surfaces */
    --ml-bg: #F2F6FD;
    --ml-paper: #FFFFFF;
    --ml-fill: #F4F7FC;
    /* palette.text + lines */
    --ml-heading: #1E2A4E;
    --ml-text: #38415C;
    --ml-text-secondary: #5C6680;
    --ml-outline: #DDE5F3;
    --ml-divider: #EDF1F8;
    /* palette semantics */
    --ml-error: #C62828;
    --ml-error-bg: #FDECEC;
    --ml-success: #2E7D32;
    --ml-success-bg: #EBF4EC;
    --ml-info: #2F4E96;
    --ml-info-bg: #EAF0FC;
    /* shape + elevation */
    --ml-radius: 12px;
    --ml-radius-lg: 26px;
    --ml-elevation-1: 0 2px 6px rgba(30, 42, 78, .07), 0 1px 2px rgba(30, 42, 78, .06);
    --ml-elevation-8: 0 10px 24px rgba(74, 111, 196, .26), 0 2px 6px rgba(30, 42, 78, .10);
    --ml-focus-ring: 0 0 0 3px rgba(74, 111, 196, .30);
}

@media (prefers-color-scheme: dark) {
    :root {
        --ml-primary: #93B0F0;
        --ml-primary-light: #B4C8F6;
        --ml-primary-dark: #7195E6;
        --ml-primary-soft: #1B2540;
        --ml-on-primary: #101A33;
        --ml-secondary: #F0B357;
        --ml-bg: #0D1324;
        --ml-paper: #161E36;
        --ml-fill: #1C2540;
        --ml-heading: #EAF0FC;
        --ml-text: #D7DFF2;
        --ml-text-secondary: #9AA5C2;
        --ml-outline: #2F3A5C;
        --ml-divider: #26304C;
        --ml-error: #F2B8B5;
        --ml-error-bg: #3A1D1D;
        --ml-success: #A5D6A7;
        --ml-success-bg: #16301B;
        --ml-info: #B4C8F6;
        --ml-info-bg: #1B2540;
        --ml-elevation-1: 0 2px 6px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .35);
        --ml-elevation-8: 0 10px 24px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
        --ml-focus-ring: 0 0 0 3px rgba(147, 176, 240, .32);
    }

    /* logos are authored for a light ground, so keep one under them */
    .ml-logo {
        padding: 8px 12px;
        background: rgba(255, 255, 255, .92);
        border-radius: 10px;
    }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--ml-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ml-text);
    background: var(--ml-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; border: 0; }

/* ---------------------------------------------------------------- layout */

.ml-page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "art" "main" "notes";
    grid-template-rows: 172px 1fr auto;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: env(safe-area-inset-bottom);
}

/* art panel: the blue hero on phones, the full side panel from tablet up */
.ml-art {
    grid-area: art;
    position: relative;
    overflow: hidden;
    background-color: var(--ml-primary);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}

/* the school's uploaded photo reads as part of the app, not a stock hero */
.ml-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, rgba(74, 111, 196, .74) 0%, rgba(34, 55, 112, .88) 100%);
}

.ml-art__brand {
    position: relative;
    z-index: 2;
    padding: 0 22px 34px;
    color: #fff;
}

.ml-art__name {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .01em;
}

.ml-main {
    grid-area: main;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-top: -26px;
    background: var(--ml-paper);
    border-radius: var(--ml-radius-lg) var(--ml-radius-lg) 0 0;
    box-shadow: 0 -4px 18px rgba(30, 42, 78, .10);
}

.ml-inner { width: 100%; }

.ml-card { padding: 28px 22px 24px; }

.ml-logo { display: block; height: auto; max-height: 52px; width: auto; margin-bottom: 18px; }

.ml-title {
    margin: 0;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ml-heading);
}

.ml-sub { margin: 5px 0 0; font-size: 13.5px; color: var(--ml-text-secondary); }

.ml-form { margin: 26px 0 0; display: flex; flex-direction: column; gap: 22px; }

/* --------------------------------------------- underlined text field */

.ml-field { display: block; }

.ml-field__label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--ml-text-secondary);
    cursor: pointer;
}

.ml-field__control {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px 9px;
    border-bottom: 1.5px solid var(--ml-outline);
    transition: border-color .2s;
}

.ml-field__control:focus-within { border-bottom-color: var(--ml-primary); }
.ml-field:focus-within .ml-field__label { color: var(--ml-primary); }

/* 16px keeps iOS Safari from zooming the viewport on focus */
.ml-field__input {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--ml-heading);
    outline: none;
    box-shadow: none;
}

.ml-field__input::placeholder { color: var(--ml-text-secondary); font-weight: 400; opacity: .75; }
.ml-field__input:focus-visible { box-shadow: none; }

.ml-field--error .ml-field__control { border-bottom-color: var(--ml-error); }
.ml-field--error .ml-field__label { color: var(--ml-error); }

.ml-field-error {
    display: block;
    margin: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ml-error);
}

/* icon button inside a field (password visibility) */
.ml-toggle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: -8px -8px -9px 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ml-text-secondary);
    cursor: pointer;
}

.ml-toggle:hover { background: var(--ml-primary-soft); color: var(--ml-primary); }
.ml-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.ml-toggle .ml-icon-hide { display: none; }
.ml-toggle.is-visible .ml-icon-hide { display: block; }
.ml-toggle.is-visible .ml-icon-show { display: none; }

/* ----------------------------------------------------------- search bar
   The app kit's list screens (gallery, timetable, notices) share one search
   control. It is defined here with the rest of the theme so those screens can
   pick it up without a second source of truth. */

.ml-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 18px;
    background: var(--ml-fill);
    border: 1px solid var(--ml-outline);
    border-radius: 999px;
}

.ml-search:focus-within { border-color: var(--ml-primary); background: var(--ml-paper); }
.ml-search__icon { width: 18px; height: 18px; flex: 0 0 auto; fill: var(--ml-text-secondary); }
.ml-search:focus-within .ml-search__icon { fill: var(--ml-primary); }

.ml-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--ml-heading);
    outline: none;
}

.ml-search__input::placeholder { color: var(--ml-text-secondary); opacity: .8; }

/* ------------------------------------------------------------------ captcha */

.ml-field__control--captcha { gap: 12px; padding-bottom: 8px; }

.ml-captcha__image {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 5px;
    background: var(--ml-fill);
    border-radius: 8px;
    overflow: hidden;
}

.ml-captcha__image img { display: block; height: 32px; width: auto; border-radius: 5px; }

.ml-captcha__refresh {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: -6px -6px -7px 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--ml-primary-soft);
    color: var(--ml-primary);
    cursor: pointer;
}

.ml-captcha__refresh:hover { background: var(--ml-primary); color: var(--ml-on-primary); }
.ml-captcha__refresh svg { width: 19px; height: 19px; fill: currentColor; }

/* ------------------------------------------------------------------ actions */

.ml-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    padding: 0 60px 0 24px;
    border: 0;
    border-radius: 14px;
    background: var(--ml-primary);
    color: var(--ml-on-primary);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--ml-elevation-8);
    transition: background-color .2s, box-shadow .2s;
}

.ml-btn:hover, .ml-btn:active { background: var(--ml-primary-dark); }

/* the app kit puts the forward arrow in its own disc at the button's end */
.ml-btn__arrow {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

.ml-btn__arrow svg { width: 18px; height: 18px; fill: currentColor; }

.ml-actions { display: flex; align-items: center; justify-content: flex-end; }

.ml-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    color: var(--ml-primary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.ml-link:hover, .ml-link:focus { background: var(--ml-primary-soft); color: var(--ml-primary); text-decoration: none; }
.ml-link svg { width: 16px; height: 16px; fill: currentColor; }

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

.ml-alert {
    display: flex;
    gap: 10px;
    padding: 13px 15px;
    margin: 18px 0 0;
    border-radius: var(--ml-radius);
    font-size: 13.5px;
    line-height: 1.45;
}

.ml-alert svg { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.ml-alert--error { background: var(--ml-error-bg); color: var(--ml-error); }
.ml-alert--success { background: var(--ml-success-bg); color: var(--ml-success); }
.ml-alert--info { background: var(--ml-info-bg); color: var(--ml-info); }

/* ------------------------------------------------------------------ notices */

.ml-notes {
    grid-area: notes;
    --n-bg: var(--ml-paper);
    --n-fg: var(--ml-heading);
    --n-fg2: var(--ml-text-secondary);
    --n-line: var(--ml-divider);
    --n-link: var(--ml-primary);
    --n-chip: var(--ml-primary-soft);
    --n-chip-fg: var(--ml-primary);
    margin: 18px 16px 20px;
    background: var(--n-bg);
    border-radius: 18px;
    color: var(--n-fg);
    overflow: hidden;
    box-shadow: var(--ml-elevation-1);
}

.ml-notes__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--n-fg);
}

.ml-notes__head::-webkit-details-marker { display: none; }
.ml-notes__title { flex: 1 1 auto; min-width: 0; }

.ml-notes__count {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--n-chip);
    color: var(--n-chip-fg);
    font-size: 11px;
    font-weight: 600;
}

.ml-notes__chevron { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; color: var(--n-fg2); transition: transform .2s; }
.ml-notes[open] .ml-notes__chevron { transform: rotate(180deg); }
.ml-notes__list { border-top: 1px solid var(--n-line); }

.ml-note { padding: 14px 18px; border-bottom: 1px solid var(--n-line); }
.ml-note:last-child { border-bottom: 0; }
.ml-note__title { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--n-fg); }
.ml-note p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--n-fg2); overflow-wrap: break-word; }
.ml-note a { color: var(--n-link); font-weight: 500; text-decoration: none; }
.ml-note a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ radio choices
   Used for the student / parent switch on password recovery and for the class
   list on the panel chooser. */

.ml-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.ml-choices--stack { flex-direction: column; flex-wrap: nowrap; }

.ml-choice {
    position: relative;
    flex: 1 1 140px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ml-fill);
    border: 1.5px solid var(--ml-outline);
    border-radius: var(--ml-radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--ml-text);
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.ml-choices--stack .ml-choice { flex: 0 0 auto; }
.ml-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.ml-choice__dot {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ml-outline);
    border-radius: 50%;
    transition: border-color .2s;
}

.ml-choice__dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--ml-primary);
    transform: scale(0);
    transition: transform .15s;
}

.ml-choice input:checked ~ .ml-choice__dot { border-color: var(--ml-primary); }
.ml-choice input:checked ~ .ml-choice__dot::after { transform: scale(1); }
.ml-choice input:focus-visible ~ .ml-choice__dot { box-shadow: var(--ml-focus-ring); }
.ml-choice:hover { border-color: var(--ml-primary-light); }
.ml-choice:has(input:checked) { border-color: var(--ml-primary); background: var(--ml-primary-soft); }

/* --------------------------------------------- single-card pages
   The panel chooser and the shared-content page have no art column, so they
   centre one card on the app ground instead of using the split grid. */

.ml-shell {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    background: var(--ml-bg);
}

.ml-panel {
    width: 100%;
    max-width: 460px;
    padding: 26px 22px 24px;
    background: var(--ml-paper);
    border-radius: 20px;
    box-shadow: var(--ml-elevation-1);
}

.ml-panel--wide { max-width: 760px; }
.ml-panel__head { margin-bottom: 20px; }

/* ------------------------------------------------------- content lists
   Shared-content page: the metadata strip and the downloadable file rows. */

.ml-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    margin: 16px 0 0;
}

.ml-meta > div { display: flex; flex-direction: column; gap: 2px; }

.ml-meta dt {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ml-text-secondary);
}

.ml-meta dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--ml-heading); }

.ml-list { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ml-divider); }

.ml-list__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--ml-divider);
}

.ml-list__body { flex: 1 1 auto; min-width: 0; }
.ml-list__title { margin: 0; font-size: 14px; font-weight: 500; color: var(--ml-heading); overflow-wrap: break-word; }
.ml-list__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ml-text-secondary); }
.ml-list__thumb { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; object-fit: cover; }

.ml-iconbtn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--ml-primary-soft);
    color: var(--ml-primary);
    text-decoration: none;
    cursor: pointer;
}

.ml-iconbtn:hover { background: var(--ml-primary); color: var(--ml-on-primary); }
.ml-iconbtn svg { width: 19px; height: 19px; fill: currentColor; }

.ml-btn--auto { width: auto; align-self: flex-end; }

/* ----------------------------------------------------- tablet: 600 - 1023 */

@media (min-width: 600px) {
    .ml-page {
        grid-template-columns: minmax(340px, 47%) 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "main art";
    }

    .ml-art { align-items: center; justify-content: center; }
    .ml-art::after { background: linear-gradient(165deg, rgba(74, 111, 196, .78) 0%, rgba(30, 42, 78, .9) 100%); }
    .ml-art__brand { display: none; }

    .ml-main {
        margin-top: 0;
        border-radius: 0;
        box-shadow: none;
        justify-content: center;
        padding: 40px;
        overflow-y: auto;
    }

    .ml-card { padding: 0; }
    .ml-panel { padding: 34px 32px 30px; }
    .ml-logo { max-height: 62px; }
    .ml-title { font-size: 27px; }

    /* the notice card floats on the art panel instead of stacking below the form */
    .ml-notes {
        grid-area: art;
        --n-bg: rgba(18, 30, 62, .48);
        --n-fg: #fff;
        --n-fg2: rgba(255, 255, 255, .82);
        --n-line: rgba(255, 255, 255, .18);
        --n-link: #BFD2FA;
        --n-chip: rgba(255, 255, 255, .2);
        --n-chip-fg: #fff;
        align-self: center;
        justify-self: center;
        z-index: 2;
        margin: 0;
        width: calc(100% - 76px);
        max-width: 370px;
        max-height: calc(100% - 76px);
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 20px;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 12px 34px rgba(12, 22, 50, .34);
    }

    .ml-notes__head { cursor: default; pointer-events: none; padding: 18px 20px 15px; font-size: 15px; }
    .ml-notes__chevron { display: none; }
    .ml-note { padding: 15px 20px; }
}

/* --------------------------------------------------------- desktop: 1024+ */

@media (min-width: 1024px) {
    .ml-page { grid-template-columns: minmax(420px, 34%) 1fr; }
    .ml-main { padding: 48px 56px; }
    .ml-inner { max-width: 400px; margin: 0 auto; }
    .ml-notes { max-width: 400px; }
}

/* ------------------------------------------------------------ a11y + motion */

:focus-visible { outline: none; box-shadow: var(--ml-focus-ring); border-radius: 8px; }
.ml-btn:focus-visible, .ml-toggle:focus-visible, .ml-captcha__refresh:focus-visible,
.ml-link:focus-visible, .ml-notes__head:focus-visible { box-shadow: var(--ml-focus-ring); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}