/* ══════════════════════════════════════════════════════════════════
   eGradeBook — LOGIN (split panel)

   Dalawang panel: sa KALIWA ang produkto mismo (isang piraso ng grading
   matrix na napupunan pagbukas ng pahina), sa KANAN ang sign-in.

   Tema: kapareho ng buong app — `body.light-mode` ang light, hindi
   `data-theme`, at ang `html.preload-light` (itinatakda sa <head> bago
   pa mag-render) ang pumipigil sa pagkislap ng madilim bago tumakbo ang
   JS. Kaya kailangang magkasama ang dalawang selector sa bawat token
   override sa ibaba.

   SADYANG nananatiling MADILIM ang kaliwang panel sa dalawang tema —
   surface iyon ng produkto (ganoon ang hitsura ng grading sheet), hindi
   kasangkapan ng pahina. Kaya hiwalay ang mga --ink-* na token nito at
   hindi kasama sa pagpapalit ng tema.
   ────────────────────────────────────────────────────────────────── */

/* ─── Tokens (dark ang default — dark-first ang app) ─────────────── */
:root {
    /* Ang KANANG panel ay isang hakbang na mas maliwanag kaysa sa slab
       (#0a0b11) — kung hindi, iisang itim ang dalawa at nawawala ang hati. */
    --bg: #10121c;
    --panel: #181c2b;
    --panel2: #20253a;
    --line: rgba(255, 255, 255, .075);
    --line-firm: rgba(255, 255, 255, .14);
    --text: #e8eaf0;
    --text-dim: #9aa3b8;
    --muted: #5a6278;
    --accent: #2470c4;
    /* Masyadong madilim ang #2470c4 bilang TEKSTO sa itim na ground,
       kaya may hiwalay na mas maliwanag na bersyon para doon. */
    --accent-lift: #5a9ee8;
    --accent2: #06b6d4;
    --danger: #ef4444;
    --pass: #34d399;
    --warn: #fbbf24;
    --field: rgba(255, 255, 255, .035);
    --field-focus: rgba(36, 112, 196, .10);
    --ring: rgba(90, 158, 232, .5);
    --shadow: 0 24px 64px rgba(0, 0, 0, .55);

    /* Ang madilim na slab — hindi nagbabago kahit anong tema. */
    --ink: #0a0b11;
    --ink-line: rgba(255, 255, 255, .08);
    --ink-line2: rgba(255, 255, 255, .14);
    --ink-text: #e8eaf0;
    --ink-dim: #98a1b6;
    --ink-muted: #5a6278;

    --radius: 14px;
    --radius-sm: 9px;
}

body.light-mode,
html.preload-light body {
    --bg: #eef0f6;
    --panel: #ffffff;
    --panel2: #e9ecf4;
    --line: rgba(16, 20, 38, .10);
    --line-firm: rgba(16, 20, 38, .18);
    --text: #14172a;
    --text-dim: #4b5268;
    --muted: #737b90;
    --accent: #2470c4;
    --accent-lift: #1c5da6;
    --accent2: #0891b2;
    --danger: #dc2626;
    --pass: #059669;
    --warn: #b45309;
    --field: #f2f4f9;
    --field-focus: rgba(36, 112, 196, .07);
    --ring: rgba(36, 112, 196, .4);
    --shadow: 0 20px 50px rgba(20, 23, 42, .14);
}

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

body {
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ─── Balangkas ──────────────────────────────────────────────────── */
.shell {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    min-height: 100vh;
}

/* ═══ KALIWA — ang slab ng produkto ══════════════════════════════ */
.slab {
    position: relative;
    background: var(--ink);
    color: var(--ink-text);
    padding: clamp(2rem, 4vw, 3.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.6rem, 3vw, 2.6rem);
    overflow: hidden;
    isolation: isolate;
}

/* Ambient wash — dating nasa body::before, dito na nakatira ngayon. */
.slab::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 80% 60% at 12% -8%, rgba(36, 112, 196, .30) 0%, transparent 58%),
        radial-gradient(ellipse 55% 45% at 92% 104%, rgba(6, 182, 212, .16) 0%, transparent 55%);
}

/* Banayad na grid lines, pinaparam sa gilid. */
.slab::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 90% 75% at 30% 40%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse 90% 75% at 30% 40%, #000 20%, transparent 78%);
}

.lockup {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.lockup img {
    width: 38px;
    height: 38px;
    flex: none;
    object-fit: contain;
}

.wordmark {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -.022em;
}

.wordmark em {
    font-style: normal;
    color: var(--accent-lift);
}

.lede {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: clamp(1.85rem, 3.1vw, 2.7rem);
    line-height: 1.06;
    letter-spacing: -.028em;
    text-wrap: balance;
    max-width: 15ch;
}

.lede-sub {
    margin-top: .85rem;
    color: var(--ink-dim);
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.6;
    max-width: 44ch;
}

/* ─── Ang grading matrix ─────────────────────────────────────────── */
.sheet {
    background: linear-gradient(180deg, rgba(22, 25, 39, .94), rgba(16, 18, 28, .94));
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .45);
    overflow: hidden;
    margin-top: auto;
}

.sheet-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--ink-line);
    background: rgba(255, 255, 255, .018);
}

.sheet-ctx {
    font-size: .74rem;
    letter-spacing: .04em;
    color: var(--ink-dim);
    font-weight: 500;
}

.pill {
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .085em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--ink-line2);
    color: var(--ink-dim);
    white-space: nowrap;
}

.pill-term {
    color: var(--accent-lift);
    border-color: rgba(90, 158, 232, .4);
    background: rgba(36, 112, 196, .13);
}

/* Ang talahanayan ang tanging tumatabas nang pahalang — hindi ang pahina. */
.sheet-scroll {
    overflow-x: auto;
}

table.matrix {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: .78rem;
}

.matrix th,
.matrix td {
    padding: .5rem .7rem;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
    white-space: nowrap;
}

.matrix thead th {
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-bottom: .55rem;
    border-bottom-color: var(--ink-line2);
}

.matrix th.who,
.matrix td.who {
    text-align: left;
}

.matrix thead th .of {
    display: block;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-size: .6rem;
}

.matrix tbody tr:last-child td {
    border-bottom: none;
}

.who b {
    font-weight: 500;
    font-size: .8rem;
}

.sno {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .66rem;
    color: var(--ink-muted);
    letter-spacing: -.01em;
}

.mark {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: .74rem;
    color: var(--ink-dim);
}

.mark s {
    text-decoration: none;
    color: var(--ink-muted);
}

/* Ang na-transmute na 1.00–5.00 */
.eq {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .78rem;
    padding: .16rem .44rem;
    border-radius: 6px;
    background: rgba(52, 211, 153, .13);
    color: var(--pass);
    border: 1px solid rgba(52, 211, 153, .25);
}

.eq.edge {
    background: rgba(251, 191, 36, .12);
    color: var(--warn);
    border-color: rgba(251, 191, 36, .28);
}

.eq.drp {
    background: rgba(255, 255, 255, .05);
    color: var(--ink-muted);
    border-color: var(--ink-line2);
    font-size: .68rem;
    letter-spacing: .06em;
}

.sheet-foot {
    padding: .7rem 1rem .8rem;
    border-top: 1px solid var(--ink-line);
    font-size: .72rem;
    color: var(--ink-muted);
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    line-height: 1.5;
}

.sheet-foot i {
    color: var(--accent2);
    font-size: .8rem;
    margin-top: .1rem;
}

/* Punan ang mga cell minsan pagbukas — hindi paulit-ulit. */
.fill {
    animation: fill .5s cubic-bezier(.22, .9, .3, 1) both;
    animation-delay: var(--d, 0s);
}

@keyframes fill {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ═══ KANAN — sign in ════════════════════════════════════════════ */
.side {
    background: var(--bg);
    /* Manipis na tahi sa pagitan ng dalawang panel — nagbibigay ng gilid sa
       hati kahit magkalapit ang dalawang kulay. Nagiging pang-itaas ito
       kapag naging isang column (tingnan ang media query sa ibaba). */
    border-left: 1px solid var(--line);
    padding: clamp(1.75rem, 3.4vw, 3rem);
    display: flex;
    flex-direction: column;
}

.side-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.theme-toggle {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--panel2);
    color: var(--text-dim);
    font-size: .85rem;
    cursor: pointer;
    transition: color .16s, border-color .16s;
}

.theme-toggle:hover {
    color: var(--accent-lift);
    border-color: var(--line-firm);
}

.login-card {
    margin: auto 0;
    width: 100%;
    max-width: 27rem;
    padding: clamp(1.5rem, 2.4vw, 2.1rem);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    animation: fadeUp .4s ease both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.card-head h2 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: -.025em;
    line-height: 1.15;
}

.card-head p {
    margin-top: .45rem;
    color: var(--text-dim);
    font-size: .875rem;
    font-weight: 300;
    line-height: 1.55;
}

/* ─── Dynamic island (ang alert ng login) ─────────────────────────
   Kapsulang lumulutang sa itaas-gitna: lumalabas bilang maliit na pill,
   lumalawak sa sukat ng mensahe, tapos umuurong at naglalaho. Ang
   `--iw` / `--ih` ay itinatakda ng JS mula sa sinukat na laki ng nilalaman
   — hindi puwedeng i-transition ang `auto`, kaya kailangang piksel.

   ITIM ito sa DALAWANG tema, gaya ng island sa telepono: iisang bagay ito
   na lumulutang sa ibabaw ng pahina, hindi bahagi ng alinmang panel — at
   nakapatong nga ito sa tahi ng madilim na slab at ng maliwanag na side.
   Kaya may sariling matigas na kulay ito at hindi sumusunod sa tema. */
.island {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 900;

    /* Sarado: maliit na pill (hindi bilog) — kagaya ng island na
       naghihintay. Pinapalitan ng JS ang dalawang ito ng sinukat na laki. */
    width: var(--iw, 56px);
    height: var(--ih, 36px);
    max-width: min(92vw, 27rem);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    overflow: hidden;

    padding: .6rem 1.05rem;
    border-radius: 999px;
    background: #05060a;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(0, 0, 0, .35);
    color: #f2f4f9;
    cursor: pointer;

    opacity: 0;
    transform: translate(-50%, -18px) scale(.86);
    pointer-events: none;

    transition:
        width .52s cubic-bezier(.32, .72, 0, 1),
        height .52s cubic-bezier(.32, .72, 0, 1),
        opacity .28s ease,
        transform .52s cubic-bezier(.32, .72, 0, 1);
}

.island.is-open {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    pointer-events: auto;
}

/* Habang sinusukat: walang animasyon at hindi nakikita, pero may laki
   pa rin — doon kinukuha ng JS ang tunay na sukat ng nilalaman.

   MAHALAGA ang `transform: none`. Ang island ay naka-scale(.86) habang
   sarado, at IPINAPAKITA ng getBoundingClientRect() ang sukat MATAPOS ang
   transform — kaya 14% na masyadong makitid ang nasusukat at naputol ang
   dulo ng mensahe. Gumagamit na rin ang JS ng offsetWidth/offsetHeight,
   na hindi apektado ng transform; dalawang belt ito para sa iisang sinturon. */
.island.is-measuring {
    transition: none;
    visibility: hidden;
    transform: none;
}

.island-in {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    font-size: .82rem;
    line-height: 1.35;
    opacity: 0;
    transition: opacity .2s ease;
}

.island.is-open .island-in {
    opacity: 1;
    transition-delay: .14s;
}

.island-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .2);
}

.island i {
    flex: none;
    color: #ff6b6b;
    font-size: .95rem;
}

/* Mahabang mensahe: hayaang bumalot at lumaki ang taas — kagaya rin ng
   island na nag-a-adjust sa laman nito. */
@media (max-width: 520px) {
    .island-in {
        white-space: normal;
    }

    .island {
        top: 10px;
        border-radius: 20px;
        padding: 0 .85rem;
    }
}

form {
    margin-top: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.field label {
    display: block;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .095em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .4rem;
}

.field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.field-wrap .fi {
    position: absolute;
    left: .8rem;
    font-size: .9rem;
    color: var(--muted);
    pointer-events: none;
    transition: color .16s;
}

.field-wrap input {
    width: 100%;
    font: inherit;
    font-size: .9rem;
    color: var(--text);
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .7rem .8rem .7rem 2.4rem;
    transition: border-color .16s, background .16s, box-shadow .16s;
}

.field-wrap input::placeholder {
    color: var(--muted);
}

.field-wrap input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--field-focus);
    box-shadow: 0 0 0 3px var(--ring);
}

.field-wrap:focus-within .fi {
    color: var(--accent-lift);
}

/* may butones ang password field sa kanan — bigyan ng puwang */
#passInput {
    padding-right: 2.6rem;
}

.toggle-pass {
    position: absolute;
    right: .45rem;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: .9rem;
    cursor: pointer;
    transition: color .16s, background .16s;
}

.toggle-pass:hover {
    color: var(--text);
    background: var(--panel2);
}

.btn-login {
    margin-top: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font: inherit;
    font-size: .92rem;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(180deg, #2f7fd4, var(--accent));
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-sm);
    padding: .78rem 1rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(36, 112, 196, .32);
    transition: transform .14s, box-shadow .16s, filter .16s;
}

.btn-login:hover {
    filter: brightness(1.07);
    box-shadow: 0 9px 24px rgba(36, 112, 196, .4);
}

.btn-login:active {
    transform: translateY(1px);
}

.bridge-note {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-size: .78rem;
    line-height: 1.6;
    color: var(--muted);
}

.bridge-note strong {
    color: var(--text-dim);
    font-weight: 500;
}

.side-foot {
    margin-top: 1.5rem;
    font-size: .72rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.side-foot span {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.side-foot strong {
    color: var(--text-dim);
    font-weight: 500;
}

.side-foot i {
    font-size: .78rem;
}

.side-foot .bi-lightning-charge-fill {
    color: var(--accent);
}

:where(a, button, input):focus-visible {
    outline: 2px solid var(--accent-lift);
    outline-offset: 2px;
}

/* ═══ Makitid ════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .shell {
        grid-template-columns: 1fr;
    }

    .slab {
        gap: 1.4rem;
        padding: 1.75rem 1.35rem 2rem;
    }

    /* wala nang ilalaglag ang `margin-top:auto` sa isang column */
    .slab .sheet {
        margin-top: 0;
    }

    .lede {
        font-size: 1.7rem;
        max-width: 100%;
    }

    .side {
        border-left: none;
        border-top: 1px solid var(--line);
        padding: 1.75rem 1.35rem 2.25rem;
    }

    .login-card {
        max-width: 100%;
        margin: 1.5rem 0 0;
        padding: 1.35rem 1.15rem;
        box-shadow: none;
    }
}

@media (max-width: 480px) {
    .wordmark {
        font-size: 1.2rem;
    }

    .lockup img {
        width: 32px;
        height: 32px;
    }

    .lede {
        font-size: 1.5rem;
    }

    .lede-sub {
        font-size: .88rem;
    }

    .card-head h2 {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .fill,
    .login-card {
        animation: none;
    }

    /* Walang paglawak — sumusulpot na lang ito sa buong sukat. */
    .island {
        transform: translate(-50%, 0);
    }

    * {
        transition-duration: .01ms !important;
    }
}