/* Extracted CSS from student_login.php */

/* Set Inter font family */
body { font-family: 'Inter', sans-serif; }

/* Desktop-only aspect ratio for the login card so height scales with width */
@media (min-width: 1024px) {
    .login-card { aspect-ratio: 4 / 3; }
    .login-card { overflow: hidden; }
    .card-inner-content { height: 100%; display: flex; flex-direction: column; justify-content: center; }
}

/* Page background using the school's front image with an overlay gradient */
.page-bg {
    position: relative;
    /* Path is relative to this CSS file (css/), so go up one level to reach uploads/ */
    background-image: url('../uploads/pic/login-bg.png');
    background-size: cover;
    /* focal point slightly higher so subject sits under the card */
    background-position: 50% 73%;
    /* keep the background fixed so content scrolls over the image on desktop */
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.page-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    /* semi-transparent gradient overlay - adjust rgba alpha to tweak opacity */
    background: linear-gradient(180deg, #58ff6b0b, rgba(0, 91, 39, 0.22));
    pointer-events: none;
    z-index: 0;
}
/* Ensure page content sits above the overlay */
.page-bg > * { position: relative; z-index: 1; }

/* Glassmorphism card styles */
:root{
    --glass-bg: rgba(255, 255, 255, 0.11); /* more transparent */
    --glass-border: rgba(255,255,255,0.22);
    --glass-accent: rgba(34, 197, 94, 0.41); /* subtle green tint */
}

/* The login card uses a translucent background with stronger backdrop blur
   so the page background is visible through the card. Keep a soft border
   and shadow for separation. */
.login-card {
    position: relative;
    z-index: 1;
    /* frosted glass: translucent + blur so background is visible through the card */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.38) 100%);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 30px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.02);
    background-color: rgba(255,255,255,0.02);
    overflow: hidden;
}

/* Slight accent at the top of the card to match school green */
.login-card::before{
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, rgba(56,189,248,0) 0%, rgba(34,197,94,0.55) 50%, rgba(220,38,38,0) 100%);
    pointer-events: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Faux edge haze: simulates blur from the sides toward the center */
.login-card::after{
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    /* transparent center, subtle white haze at edges */
    background: radial-gradient(ellipse at center,
                rgba(255, 255, 255, 0.25) 45%,
                rgba(255,255,255,0.25) 65%,
                rgba(255,255,255,0.25) 100%);
    mix-blend-mode: normal;
    /* place haze behind inner content */
    z-index: 0;
}

/* Make sure inner white elements like inputs are slightly transparent to fit the glass look
   but still readable. */
/* Give the inner content a near-opaque panel so text stays readable */
.card-inner-content {
    /* keep inner content glassy but very transparent so background shows through */
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.10));
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 6px 22px rgba(15,23,42,0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(0,0,0,0.06);
    /* ensure content floats above haze */
    position: relative;
    z-index: 2;
}

/* Improve text contrast and input visibility inside the translucent card */
.card-inner-content {
    color: rgba(17,24,39,0.95); /* darker text for better contrast */
}
.card-inner-content h2 {
    color: rgba(17,24,39,0.98);
    font-weight: 700;
}
.card-inner-content p,
.card-inner-content label,
.card-inner-content .text-sm {
    color: rgba(17,24,39,0.75);
    font-weight: 600;
}
.card-inner-content input,
.card-inner-content textarea,
.card-inner-content select {
    background-color: rgba(255,255,255,0.96);
    color: rgba(17,24,39,0.95);
}
.card-inner-content input::placeholder,
.card-inner-content textarea::placeholder {
    color: rgba(17,24,39,0.45);
}
.card-inner-content button {
    color: #ffffff; /* ensure buttons keep white text */
}

.card-inner-content input,
.card-inner-content button {
    background-clip: padding-box;
}

/* Keep inputs slightly toned to match the glass look */
.card-inner-content input {
    background-color: rgba(255,255,255,0.88);
}

/* Make the resend countdown text match the Resend OTP link color (Tailwind's text-green-700) */
.card-inner-content #countdown,
#countdown {
    color: #2c2c2c; /* Tailwind: text-green-700 */
}

/* Mobile fallback: reduce blur and increase opacity for performance and clarity */
@media (max-width: 640px) {
    /* Mobile: avoid fixed backgrounds for performance and rendering issues */
    .page-bg { background-attachment: scroll; background-position: 45% center; }
    /* Use the outer .login-card as the single visible glass panel on mobile.
       Hide inner panel visuals to prevent a double-box effect. */
    .login-card {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.38) 100%);
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 0 8px 30px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.02);
        background-color: rgba(255,255,255,0.02);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: visible;
        margin: 1rem auto;
        max-width: 28rem;
        padding: 1rem; /* provide spacing inside the outer card */
        border-radius: 12px;
    }

    /* Make inner content visually neutral so only the outer card reads as the glass panel */
    .card-inner-content {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        border-radius: 8px;
        position: relative;
        z-index: 2;
    }
    .card-inner-content input { background-color: rgba(255,255,255,0.88); }

    /* Slightly softer haze on mobile but still visible behind the outer card */
    .login-card::after{
        background: radial-gradient(ellipse at center,
                    rgba(255, 255, 255, 0.18) 40%,
                    rgba(255,255,255,0.12) 70%,
                    rgba(255,255,255,0.06) 100%);
        z-index: 0;
    }
}

/* Extra mobile tweaks: full-width card, larger tappable controls */
@media (max-width: 480px) {
    .login-card {
        width: calc(100% - 2rem);
        max-width: none;
        margin: 0.75rem auto;
        min-height: auto;
        border-radius: 12px;
    }
    .card-inner-content {
        padding: 1.25rem;
        border-radius: 10px;
    }
    .card-inner-content h2 { font-size: 1.5rem; }
    .card-inner-content input { padding: 0.85rem 0.9rem; font-size: 0.98rem; }
    button#getOtpBtn, .card-inner-content button, #getOtpBtn {
        padding: 0.9rem 1rem; font-size: 1.05rem; border-radius: 8px;
    }
}

/* Admin-specific overrides (scoped) — applied only when the admin page adds id="admin-login" to the body */
@media (min-width: 1024px) {
    #admin-login .login-card {
        /* make admin card slightly taller on desktop */
        aspect-ratio: 3.4 / 3;
    }
}

/* Verify page override (scoped) — applied only when the verify page adds id="verify-login" to the body */
@media (min-width: 1024px) {
    #verify-login .login-card {
        /* make verify page card slightly taller on desktop (matches admin tweak) */
        aspect-ratio: 3.4 / 3;
    }
}

/* Admin verify page override */
@media (min-width: 1024px) {
    #admin-verify .login-card {
        aspect-ratio: auto; /* allow the verify card to grow vertically when alerts appear */
        overflow: visible; /* allow flash/alert blocks to expand the card instead of being clipped */
    }
}

/* Student verify page override: allow the verify card to grow so server-rendered notices
   (flash messages printed inside the card) push the card height instead of being clipped. */
@media (min-width: 1024px) {
    #verify-login .login-card {
        aspect-ratio: auto;
        overflow: visible;
    }
}

/* Student login page override (allow card to grow so alerts aren't clipped) */
@media (min-width: 1024px) {
    #student-login .login-card {
        aspect-ratio: auto; /* allow the student login card to grow vertically when alerts appear */
        overflow: visible; /* allow flash/alert blocks to expand the card instead of being clipped */
    }
}

/* When the global #messageBox is moved into the card-inner-content (see inline JS in admin pages),
   render it in-flow so the card expands naturally instead of the message overlaying content. */
.card-inner-content > #messageBox.in-card {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin: 0 0 1rem 0 !important;
    opacity: 1 !important;
}