/* =========================
   AUTH PAGE - MINIMAL PREMIUM LOGIN
========================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body.auth-page {
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    overflow-x: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background:
        radial-gradient(circle at 12% 18%, rgba(212, 175, 55, 0.07), transparent 20%),
        radial-gradient(circle at 88% 82%, rgba(212, 175, 55, 0.06), transparent 22%),
        linear-gradient(135deg, #1c0002 0%, #2f0004 35%, #4a0007 70%, #1a0002 100%);
}

/* =========================
   FLOATING BACKGROUND ORBS
========================= */

.auth-bg-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(85px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    animation: floatOrb 10s ease-in-out infinite;
}

.auth-bg-orb.orb-one {
    width: 260px;
    height: 260px;
    top: 80px;
    left: -40px;
    background: rgba(255, 255, 255, 0.06);
}

.auth-bg-orb.orb-two {
    width: 320px;
    height: 320px;
    right: -90px;
    bottom: -60px;
    background: rgba(212, 175, 55, 0.08);
    animation-delay: 2s;
}

.auth-bg-orb.orb-three {
    width: 180px;
    height: 180px;
    top: 45%;
    right: 32%;
    background: rgba(255, 255, 255, 0.04);
    animation-delay: 4s;
}

/* =========================
   PAGE LAYOUT
   (card on the left, free-floating brand/hero text on the right)
========================= */

.auth-page-layout {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1600px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    flex-wrap: wrap;
}

/* =========================
   UNIFIED LOGIN SHELL
   (single card: photo on the left, form on the right)
========================= */

.auth-shell {
    position: relative;
    width: 100%;
    max-width: 1080px;
    min-height: 600px;
    margin-left: 540px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.50),
        0 0 0 1px rgba(212, 175, 55, 0.14);
}

/* =========================
   PHOTO PANEL (left)
========================= */

.auth-photo-panel {
    position: relative;
    background: url('../images/BPSU.jpg') center/cover no-repeat;
}

.auth-photo-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(58, 0, 7, 0.35), rgba(18, 0, 2, 0.55));
}

/* =========================
   BRAND / HERO (floating on the page background, right of the card)
========================= */

.auth-brand-side {
    position: fixed;
    top: 34px;
    left: 44px;
    z-index: 2;
    max-width: 540px;
}

.auth-photo-brand {
    display: flex;
    align-items: center;
    margin-bottom: -50px;
}

.photo-brand-logo {
    width: 240px;
    height: 240px;
    object-fit: contain;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 11px 18px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(212, 175, 55, 0.40);
    color: #f5e6c8;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 20px;
}

.auth-photo-hero h1 {
    margin: 0 0 16px;
    font-size: 58px;
    line-height: 1.1;
    letter-spacing: -1.2px;
    font-weight: 800;
    color: #ffffff;
}

.auth-photo-hero p {
    margin: 0 0 24px;
    font-size: 19px;
    line-height: 1.75;
    color: rgba(255, 245, 245, 0.80);
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-point {
    padding: 11px 16px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(212, 175, 55, 0.22);
    color: #fff4f4;
    font-size: 17px;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* =========================
   FORM PANEL (right)
========================= */

.auth-form-panel {
    position: relative;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(165deg, #3a0007 0%, #5a000c 100%);
}

.card-mini-text {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(240, 216, 138, 0.85);
    margin-bottom: 10px;
}

.card-title {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: #ffffff;
}

.card-subtitle {
    margin: 0 0 30px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 241, 241, 0.72);
}

/* =========================
   FORM FIELDS (underline style)
========================= */

.auth-form-panel label {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.2px;
}

.input-wrap {
    position: relative;
    margin-bottom: 22px;
}

.auth-form-panel input[type="text"],
.auth-form-panel input[type="password"] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.28);
    outline: none;
    padding: 6px 30px 10px 2px;
    font-size: 15.5px;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    transition: border-color 0.25s ease;
}

.auth-form-panel input::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.auth-form-panel input:focus {
    border-bottom-color: #d4af37;
}

.input-icon-right {
    position: absolute;
    top: 6px;
    right: 2px;
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    transition: color 0.25s ease;
}

.input-icon-right svg {
    width: 18px;
    height: 18px;
}

.input-wrap:focus-within .input-icon-right {
    color: #d4af37;
}

.password-wrap input {
    padding-right: 34px;
}

.toggle-password {
    position: absolute;
    top: 2px;
    right: 0;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.toggle-password:hover {
    opacity: 1;
}

.eye-icon {
    width: 18px;
    height: 18px;
    fill: rgba(255, 255, 255, 0.75);
    transition: fill 0.2s ease;
}

.toggle-password:hover .eye-icon {
    fill: #ffffff;
}

/* =========================
   OPTIONS
========================= */

.form-options {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 2px 0 24px;
}

.form-options.single-link {
    justify-content: flex-end;
}

.inline-link {
    color: #f0d88a;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    position: relative;
}

.inline-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: #d4af37;
    transition: width 0.25s ease;
}

.inline-link:hover::after {
    width: 100%;
}

/* =========================
   BUTTON
========================= */

.login-btn {
    position: relative;
    width: 100%;
    height: 50px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 8px;
    background: linear-gradient(90deg, #830d17 0%, #a5111f 48%, #c6172a 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow 0.25s ease, filter 0.25s ease;
    box-shadow:
        0 14px 30px rgba(122, 0, 12, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.login-btn span {
    position: relative;
    z-index: 2;
}

.login-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.14) 30%,
        rgba(255, 255, 255, 0.40) 50%,
        transparent 70%
    );
    transform: skewX(-20deg);
}

.login-btn:hover {
    filter: brightness(1.06);
    box-shadow:
        0 18px 36px rgba(122, 0, 12, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.login-btn:hover::before {
    animation: btnShine 1s ease;
}

/* =========================
   FOOTER
========================= */

.form-links {
    padding: 22px 0 0;
    text-align: center;
}

.form-links p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
}

.form-links a {
    color: #f0d88a;
    text-decoration: none;
    font-weight: 700;
    position: relative;
}

.form-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: #d4af37;
    transition: width 0.25s ease;
}

.form-links a:hover::after {
    width: 100%;
}

/* =========================
   ENTRANCE ANIMATIONS
========================= */

.fade-up {
    opacity: 0;
    transform: translateY(24px);
    animation: fadeUp 0.85s ease forwards;
}

.delay-1 { animation-delay: 0.12s; }
.delay-2 { animation-delay: 0.24s; }
.delay-3 { animation-delay: 0.36s; }
.delay-4 { animation-delay: 0.5s; }
.delay-5 { animation-delay: 0.64s; }
.delay-6 { animation-delay: 0.78s; }
.delay-7 { animation-delay: 0.92s; }

/* =========================
   KEYFRAMES
========================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatOrb {
    0% {
        transform: translateY(0) translateX(0) scale(1);
    }
    50% {
        transform: translateY(-18px) translateX(12px) scale(1.05);
    }
    100% {
        transform: translateY(0) translateX(0) scale(1);
    }
}

@keyframes btnShine {
    from {
        left: -120%;
    }
    to {
        left: 140%;
    }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {
    .auth-page-layout {
        flex-direction: column;
        gap: 36px;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        max-width: 460px;
        min-height: 0;
    }

    .auth-photo-panel {
        min-height: 200px;
    }

    .auth-brand-side {
        max-width: 460px;
        text-align: left;
    }

    .auth-photo-brand {
        justify-content: flex-start;
    }

    .hero-badge {
        margin-left: 0;
        margin-right: auto;
    }

    .hero-points {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    body.auth-page {
        padding: 20px 14px;
    }

    .auth-shell {
        border-radius: 14px;
    }

    .auth-photo-panel {
        min-height: 160px;
    }

    .auth-photo-hero h1 {
        font-size: 28px;
    }

    .auth-form-panel {
        padding: 34px 26px;
    }

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

/* =========================
   FOOTER
========================= */

.auth-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 1;
    text-align: center;
    pointer-events: none;
}

.auth-footer p {
    margin: 0;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.42);
}

@media (max-width: 520px) {
    .auth-footer {
        bottom: 8px;
    }

    .auth-footer p {
        font-size: 11px;
        padding: 0 12px;
    }
}

/* 🔥 ADMIN BUTTON TOP RIGHT */
.admin-top-btn {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 999;
}

.admin-top-btn a {
    display: inline-block;
    padding: 10px 16px;
    background: linear-gradient(135deg, #5a1f2e, #7b3043);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15.5px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    transition: 0.25s ease;
}

.admin-top-btn a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

/* =========================================================================
   PAGE SCALE

   Everything above is sized in fixed pixels for a tall desktop window. On a
   1366x599 laptop viewport that renders larger than intended: the hero column
   fills its full 540px, the headline breaks across two lines instead of three,
   and the card runs past the bottom of the screen.

   zoom scales the whole page uniformly -- type, spacing, AND container widths
   together -- which is what makes the proportions hold. The per-property media
   queries that used to live here shrank only the font sizes, leaving the
   containers at full width, so the headline re-wrapped and the layout never
   matched the intended one however the numbers were tuned.

   Keyed to viewport height so a tall window still gets the full-size design.
========================================================================= */

@media (max-height: 700px) {
    body.auth-page { zoom: 0.70; min-height: calc(100vh / 0.70); }
}

@media (max-height: 560px) {
    body.auth-page { zoom: 0.60; min-height: calc(100vh / 0.60); }
}

/* =========================================================================
   PAGE SCALE COMPENSATION

   The zoom rule above shrinks the whole page on a short viewport. zoom does NOT
   shrink the viewport itself, so anything sized to 100vh keeps measuring the
   full screen and then renders at a fraction of it -- leaving a strip of bare
   background across the bottom where the layout stops short.

   Dividing by the same factor cancels that: the element measures proportionally
   larger, the zoom scales it back down, and it covers the screen exactly.

   Split by property on purpose -- turning a min-height rule into a fixed height
   (or the reverse) would change how those layouts grow. Must stay in sync with
   the zoom values above.
========================================================================= */

@media (max-height: 700px) {
    body.classes-page,
    body.user-guide-page,
    body.report-result-body,
    body.reports-page-body,
    .admin-sidebar,
    .dashboard-clean,
    .dashboard-clean-shell { height: calc(100vh / 0.7); }

    body,
    body.auth-page,
    body.materials-page,
    body.register-hero-page,
    body.reports-page,
    body.student-feedbacks-page,
    body.upload-page,
    body.admin-auth-body,
    .register-hero-wrapper,
    .simple-auth-wrapper,
    .sf-page-wrap,
    .admin-shell,
    .dashboard-clean { min-height: calc(100vh / 0.7); }

    .report-page-shell,
    .reports-page-shell { height: calc((100vh - 40px) / 0.7); }
}

@media (max-height: 560px) {
    body.classes-page,
    body.user-guide-page,
    body.report-result-body,
    body.reports-page-body,
    .admin-sidebar,
    .dashboard-clean,
    .dashboard-clean-shell { height: calc(100vh / 0.6); }

    body,
    body.auth-page,
    body.materials-page,
    body.register-hero-page,
    body.reports-page,
    body.student-feedbacks-page,
    body.upload-page,
    body.admin-auth-body,
    .register-hero-wrapper,
    .simple-auth-wrapper,
    .sf-page-wrap,
    .admin-shell,
    .dashboard-clean { min-height: calc(100vh / 0.6); }

    .report-page-shell,
    .reports-page-shell { height: calc((100vh - 40px) / 0.6); }
}

/* -------------------------------------------------------------------------
   PAGE SCALE COMPENSATION -- max-height

   A capped element ignores a compensated height: .report-page-shell sets BOTH
   height and max-height to calc(100vh - 40px), so raising only the height left
   the cap doing the limiting and the card rendered at about 70% of the screen
   with empty space beneath it.

   Same factor, same reason as the block above.
------------------------------------------------------------------------- */

@media (max-height: 700px) {
    .report-page-shell  { max-height: calc((100vh - 40px) / 0.7); }
    .reports-page-shell { max-height: calc((100vh - 48px) / 0.7); }

    body.reports-page .reports-table-wrap { max-height: calc(58vh / 0.7); }
    body.reports-page .ai-chat-modal      { max-height: calc(82vh / 0.7); }
}

@media (max-height: 560px) {
    .report-page-shell  { max-height: calc((100vh - 40px) / 0.6); }
    .reports-page-shell { max-height: calc((100vh - 48px) / 0.6); }

    body.reports-page .reports-table-wrap { max-height: calc(58vh / 0.6); }
    body.reports-page .ai-chat-modal      { max-height: calc(82vh / 0.6); }
}