/*
 * login.css — Premium Login Page Styles
 * School Management System
 *
 * SCOPE: This file is ONLY loaded on the public login page.
 *        It does NOT affect the admin layout at all.
 *
 * Design language: Apple × Linear × Stripe — glassmorphism card on animated aurora.
 */

/* ─── Reset & Base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --lp-bg:          #071A2F;
    --lp-primary:     #0F4C81;
    --lp-accent:      #2563EB;
    --lp-accent-2:    #3B82F6;
    --lp-violet:      #7C3AED;
    --lp-violet-2:    #8B5CF6;
    --lp-cyan:        #0891B2;
    --lp-glass-bg:    rgba(255,255,255,0.06);
    --lp-glass-border:rgba(255,255,255,0.14);
    --lp-text:        #F0F6FF;
    --lp-text-muted:  #94A3B8;
    --lp-text-label:  #CBD5E1;
    --lp-input-bg:    rgba(255,255,255,0.07);
    --lp-input-border:rgba(255,255,255,0.15);
    --lp-focus-glow:  rgba(37,99,235,0.35);
    --lp-success:     #22C55E;
    --lp-error:       #F87171;
    --lp-error-bg:    rgba(248,113,113,0.1);
    --lp-radius:      26px;
    --lp-radius-sm:   12px;
    --lp-radius-xs:   8px;
    --lp-transition:  all .22s cubic-bezier(.4,0,.2,1);
    --lp-font:        'Inter', 'Poppins', system-ui, sans-serif;
}

html, body {
    height: 100%;
    font-family: var(--lp-font);
    background: var(--lp-bg);
    color: var(--lp-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Locks background scroll while the Result fullscreen overlay is open */
body.lp-fs-lock {
    overflow: hidden;
}

/* ─── Aurora Animated Background ─────────────────────────────────────── */
.lp-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at 20% 50%, #0a2448 0%, #071A2F 60%);
}

.lp-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    animation: lp-drift 18s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

.lp-blob-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, #1d4ed8 0%, #0f172a 70%);
    top: -150px; left: -150px;
    animation-delay: 0s;
    animation-duration: 20s;
}

.lp-blob-2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #0ea5e9 0%, #0f172a 70%);
    bottom: -120px; right: -100px;
    animation-delay: -6s;
    animation-duration: 24s;
}

.lp-blob-3 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, #6366f1 0%, #0f172a 70%);
    top: 40%; left: 55%;
    animation-delay: -12s;
    animation-duration: 16s;
}

.lp-blob-4 {
    width: 280px; height: 280px;
    background: radial-gradient(circle, #0f4c81 0%, #071A2F 70%);
    top: 10%; right: 15%;
    animation-delay: -3s;
    animation-duration: 22s;
}

@keyframes lp-drift {
    0%   { transform: translate(0,     0)     scale(1); }
    33%  { transform: translate(30px, -40px)  scale(1.05); }
    66%  { transform: translate(-20px, 25px)  scale(0.97); }
    100% { transform: translate(15px, -15px)  scale(1.03); }
}

.lp-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
}

/* ─── Page Layout ─────────────────────────────────────────────────────── */
.lp-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 80px;
}

/* ─── Glass Card ──────────────────────────────────────────────────────── */
.lp-card {
    width: 100%;
    max-width: 460px;
    background: var(--lp-glass-bg);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--lp-glass-border);
    border-radius: var(--lp-radius);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.45),
        0 2px 8px  rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.12);
    padding: 40px 40px 36px;
    animation: lp-card-enter .55s cubic-bezier(.22,1,.36,1) both;
}

@keyframes lp-card-enter {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ─── Branding ────────────────────────────────────────────────────────── */
.lp-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 28px;
    gap: 12px;
}

.lp-logo-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    animation: lp-logo-pop .6s cubic-bezier(.34,1.56,.64,1) .1s both;
    overflow: hidden;
}

@keyframes lp-logo-pop {
    from { opacity:0; transform: scale(.7); }
    to   { opacity:1; transform: scale(1);  }
}

.lp-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}

/* FIX: graceful lettermark fallback shown via JS if the logo 404s/errors,
   instead of leaving an empty broken-image box. Hidden by default. */
.lp-logo-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--lp-accent) 0%, var(--lp-accent-2) 100%);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .5px;
}

.lp-school-name {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--lp-text);
    letter-spacing: -.2px;
    line-height: 1.3;
}

.lp-school-sub {
    font-size: .72rem;
    font-weight: 500;
    color: var(--lp-text-muted);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-top: 2px;
}

.lp-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lp-glass-border), transparent);
    margin-bottom: 24px;
}

/* ─── Segmented Tab Control (3-way) ───────────────────────────────────── */
.lp-seg {
    position: relative;
    display: flex;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 28px;
    gap: 0;
}

/* Animated sliding pill — width is 1/3 of the track; JS moves it with
   translateX(N * 100%) which is relative to the pill's own width, so this
   works generically no matter how many segments exist. */
.lp-seg-pill {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: calc((100% - 8px) / 3);
    background: rgba(37,99,235,0.75);
    border-radius: 11px;
    box-shadow:
        0 2px 8px rgba(37,99,235,0.35),
        inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    z-index: 0;
    transform: translateX(0);
}

.lp-seg-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 6px;
    border: none;
    background: transparent;
    color: var(--lp-text-muted);
    font-family: var(--lp-font);
    font-size: .78rem;
    font-weight: 600;
    border-radius: 11px;
    cursor: pointer;
    transition: color .22s ease;
    white-space: nowrap;
    outline: none;
}

.lp-seg-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.lp-seg-btn.active {
    color: #fff;
}

/* ─── Alert Banners ───────────────────────────────────────────────────── */
.lp-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--lp-radius-xs);
    font-size: .8rem;
    font-weight: 500;
    margin-bottom: 18px;
    border: 1px solid transparent;
    animation: lp-slide-down .3s ease both;
    line-height: 1.5;
}

@keyframes lp-slide-down {
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0);    }
}

.lp-alert svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
    margin-top: 2px;
}

.lp-alert-success {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.3);
    color: #86efac;
}

.lp-alert-error {
    background: var(--lp-error-bg);
    border-color: rgba(248,113,113,0.3);
    color: var(--lp-error);
}

.lp-alert-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: .55;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.lp-alert-close:hover { opacity: 1; }
.lp-alert-close svg { width: 13px; height: 13px; margin-top: 1px; }

/* ─── Floating Label Inputs ───────────────────────────────────────────── */
.lp-field {
    position: relative;
    margin-bottom: 18px;
}

.lp-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    stroke: var(--lp-text-muted);
    fill: none;
    stroke-width: 2;
    pointer-events: none;
    transition: stroke .22s ease;
    z-index: 2;
}

.lp-input {
    display: block;
    width: 100%;
    height: 52px;
    padding: 18px 44px 6px 42px;
    font-family: var(--lp-font);
    font-size: .88rem;
    font-weight: 500;
    color: var(--lp-text);
    background: var(--lp-input-bg);
    border: 1.5px solid var(--lp-input-border);
    border-radius: var(--lp-radius-sm);
    outline: none;
    transition: var(--lp-transition);
    caret-color: var(--lp-accent-2);
    -webkit-text-fill-color: var(--lp-text);
}

.lp-input:-webkit-autofill,
.lp-input:-webkit-autofill:hover,
.lp-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px rgba(15,76,129,0.6) inset !important;
    -webkit-text-fill-color: var(--lp-text) !important;
    caret-color: var(--lp-text);
    border-color: var(--lp-input-border) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.lp-input::placeholder { color: transparent; }

.lp-input:focus {
    border-color: var(--lp-accent);
    background: rgba(37,99,235,0.08);
    box-shadow: 0 0 0 3.5px var(--lp-focus-glow);
}

.lp-input:focus ~ .lp-field-icon,
.lp-input:not(:placeholder-shown) ~ .lp-field-icon {
    stroke: var(--lp-accent-2);
}

.lp-label {
    position: absolute;
    left: 42px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .87rem;
    font-weight: 500;
    color: var(--lp-text-muted);
    pointer-events: none;
    transition: var(--lp-transition);
    z-index: 2;
    transform-origin: left center;
    white-space: nowrap;
}

.lp-input:focus ~ .lp-label,
.lp-input:not(:placeholder-shown) ~ .lp-label {
    top: 10px;
    transform: translateY(0) scale(.72);
    color: var(--lp-accent-2);
    font-weight: 600;
    letter-spacing: .2px;
}

.lp-pwd-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--lp-text-muted);
    transition: color .2s ease;
    z-index: 3;
    display: flex;
    align-items: center;
}
.lp-pwd-toggle:hover { color: var(--lp-text); }
.lp-pwd-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

.lp-input.has-toggle { padding-right: 44px; }

.lp-input-hint {
    font-size: .7rem;
    color: var(--lp-text-muted);
    margin-top: 5px;
    padding-left: 2px;
    line-height: 1.4;
}

.lp-input.is-invalid {
    border-color: var(--lp-error) !important;
    box-shadow: 0 0 0 3px rgba(248,113,113,0.18) !important;
}

/* ─── Remember Me Row (forgot-password link removed) ─────────────────── */
.lp-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 10px;
}

.lp-meta-row-single { justify-content: flex-start; }

.lp-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.lp-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--lp-input-border);
    background: var(--lp-input-bg);
    cursor: pointer;
    accent-color: var(--lp-accent);
    flex-shrink: 0;
}

.lp-remember-text {
    font-size: .78rem;
    font-weight: 500;
    color: var(--lp-text-muted);
}

/* ─── Submit Button ───────────────────────────────────────────────────── */
.lp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    border: none;
    border-radius: var(--lp-radius-sm);
    font-family: var(--lp-font);
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563EB 50%, #3b82f6 100%);
    box-shadow:
        0 4px 18px rgba(37,99,235,0.45),
        0 1px 3px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.2);
    cursor: pointer;
    transition: var(--lp-transition);
    position: relative;
    overflow: hidden;
    letter-spacing: .1px;
    margin-top: 4px;
}

.lp-btn-cyan {
    background: linear-gradient(135deg, #0e7490 0%, #0891b2 50%, #06b6d4 100%);
    box-shadow:
        0 4px 18px rgba(8,145,178,0.45),
        0 1px 3px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.lp-btn-violet {
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #a78bfa 100%);
    box-shadow:
        0 4px 18px rgba(124,58,237,0.45),
        0 1px 3px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.lp-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .5s ease;
}
.lp-btn:hover::before { transform: translateX(100%); }

.lp-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 8px 28px rgba(37,99,235,0.55),
        0 2px 6px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.lp-btn:active:not(:disabled) { transform: translateY(0px); }

.lp-btn:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
}

.lp-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    flex-shrink: 0;
}

.lp-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lp-spin .7s linear infinite;
    display: none;
    flex-shrink: 0;
}

@keyframes lp-spin { to { transform: rotate(360deg); } }

.lp-btn.loading .lp-btn-icon { display: none; }
.lp-btn.loading .lp-spinner  { display: block; }
.lp-btn.loading .lp-btn-text::after { content: '…'; }

/* ─── Result Search Form (inside the card) ────────────────────────────── */
.lp-result-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--lp-error-bg);
    border: 1px solid rgba(248,113,113,0.3);
    color: var(--lp-error);
    border-radius: var(--lp-radius-xs);
    padding: 9px 12px;
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 14px;
}
.lp-result-error svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
    margin-top: 1px;
}

.lp-result-hint {
    text-align: center;
    margin-top: 12px;
}

.lp-spinner-standalone {
    width: 26px;
    height: 26px;
    border: 3px solid rgba(15,76,129,0.15);
    border-top-color: var(--lp-primary);
    border-radius: 50%;
    animation: lp-spin .7s linear infinite;
}

/* ─── Result — Fullscreen Overlay ─────────────────────────────────────── *
 * Covers the entire viewport once a lookup succeeds. Rendered outside
 * .lp-card in the DOM. Exactly two actions live in the top bar:
 * "Back To Login" and "Search Another Result".
 * ──────────────────────────────────────────────────────────────────── */
.lp-result-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    animation: lp-fs-in .22s ease both;
}

@keyframes lp-fs-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lp-result-fs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: var(--lp-bg);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
}

.lp-result-fs-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--lp-text);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .2px;
}
.lp-result-fs-title svg {
    width: 16px;
    height: 16px;
    stroke: var(--lp-accent-2);
    fill: none;
    stroke-width: 2.2;
    flex-shrink: 0;
}

.lp-result-fs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--lp-font);
    font-size: .78rem;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--lp-transition);
    white-space: nowrap;
}
.lp-result-fs-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    flex-shrink: 0;
}

.lp-result-fs-btn-ghost {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
    color: var(--lp-text-label);
}
.lp-result-fs-btn-ghost:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
}

.lp-result-fs-btn-solid {
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #a78bfa 100%);
    color: #fff;
    box-shadow: 0 3px 12px rgba(124,58,237,0.4);
}
.lp-result-fs-btn-solid:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124,58,237,0.5);
}
.lp-result-fs-btn-solid:active { transform: translateY(0); }

.lp-result-fs-body {
    position: relative;
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #f1f3f9;
}

.lp-result-fs-iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    border: 0;
    opacity: 0;
    transition: opacity .3s ease;
    background: #fff;
}

.lp-result-fs-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffffff;
    color: #64748b;
    font-size: .82rem;
    font-weight: 600;
    z-index: 2;
}

@media (max-width: 560px) {
    .lp-result-fs-topbar {
        justify-content: center;
        text-align: center;
    }
    .lp-result-fs-title {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 4px;
    }
    .lp-result-fs-btn { flex: 1; justify-content: center; }
}

/* ─── Shared Support Line (all tabs) ──────────────────────────────────── */
.lp-support-line {
    width: 100%;
    max-width: 460px;
    text-align: center;
    font-size: .74rem;
    font-weight: 500;
    color: var(--lp-text-muted);
    margin-top: 18px;
    line-height: 1.6;
}
.lp-support-line a {
    color: var(--lp-accent-2);
    text-decoration: none;
    font-weight: 600;
}
.lp-support-line a:hover { text-decoration: underline; }

/* ─── Footer ──────────────────────────────────────────────────────────── */
.lp-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .7rem;
    color: rgba(148,163,184,0.55);
    padding: 12px;
    letter-spacing: .3px;
    z-index: 1;
}

/* ─── Panel Animation ─────────────────────────────────────────────────── */
.lp-panel {
    animation: lp-panel-in .25s ease both;
}

@keyframes lp-panel-in {
    from { opacity:0; transform:translateX(8px); }
    to   { opacity:1; transform:translateX(0);   }
}

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 500px) {
    .lp-card {
        padding: 28px 22px 28px;
        border-radius: 20px;
    }
    .lp-school-name { font-size: .95rem; }
}

@media (max-width: 360px) {
    .lp-card { padding: 22px 16px 22px; }
    .lp-btn  { height: 46px; font-size: .84rem; }
    .lp-seg-btn { font-size: .7rem; }
}