/* ==========================================================================
   Login page styles — Attendance Management System
   Palette matches the console hero (teal -> cyan -> sky).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700&display=swap');

/* minimal reset — previously inherited from Bootstrap, now self-contained */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

:root{
    /* console hero palette */
    --teal:#0FA796; --teal-d:#0B7E70; --sky:#2E84E6; --sky-d:#2563EB;
    --cyan:#26C2D6; --ink:#161E2F; --muted:#6B7488; --border:#E5EAF1;
    --g-hero:linear-gradient(120deg,#0FB6A2 0%,#10B0C2 48%,#2E84E6 100%);
}

.account-page{margin:0;}

.auth-stage{
    position:fixed; inset:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    padding:1.25rem;
    background:#08272f;
    font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* animated multi-stop aurora backdrop + soft conic mesh glow */
.auth-stage::before{
    content:""; position:absolute; inset:-30%;
    background:
        radial-gradient(40% 55% at 20% 25%, rgba(31,194,172,.55), transparent 60%),
        radial-gradient(45% 50% at 80% 30%, rgba(63,217,236,.45), transparent 60%),
        radial-gradient(50% 55% at 60% 85%, rgba(90,160,242,.5), transparent 60%),
        linear-gradient(120deg,#0B7E70,#10657f 35%,#1E4F8A 65%,#0FB6A2);
    background-size:200% 200%,200% 200%,200% 200%,300% 300%;
    filter:saturate(1.15);
    animation:auroraShift 22s ease infinite;
}
@keyframes auroraShift{
    0%{background-position:0% 50%,100% 0%,50% 100%,0% 50%}
    50%{background-position:100% 50%,0% 100%,80% 0%,100% 50%}
    100%{background-position:0% 50%,100% 0%,50% 100%,0% 50%}
}

/* drifting twinkling particle field */
.auth-stage::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background-image:
        radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,.9), transparent),
        radial-gradient(2px 2px at 28% 70%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.5px 1.5px at 45% 35%, rgba(255,255,255,.8), transparent),
        radial-gradient(2px 2px at 62% 60%, rgba(255,255,255,.65), transparent),
        radial-gradient(1.5px 1.5px at 78% 18%, rgba(255,255,255,.85), transparent),
        radial-gradient(2px 2px at 88% 78%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.5px 1.5px at 55% 88%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 35% 12%, rgba(255,255,255,.75), transparent);
    background-repeat:no-repeat;
    animation:twinkle 6s ease-in-out infinite, driftUp 30s linear infinite;
}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes driftUp{from{transform:translateY(0)}to{transform:translateY(-40px)}}

/* drifting / pulsing blurred blobs */
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.45; mix-blend-mode:screen; will-change:transform;}
.blob.b1{width:420px;height:420px;background:#1FC2AC;top:-120px;left:-80px;animation:floatA 18s ease-in-out infinite;}
.blob.b2{width:380px;height:380px;background:#3FD9EC;bottom:-120px;right:-60px;animation:floatB 21s ease-in-out infinite;}
.blob.b3{width:300px;height:300px;background:#5AA0F2;top:40%;left:55%;animation:floatA 16s ease-in-out infinite reverse;}
.blob.b4{width:260px;height:260px;background:#0FB6A2;bottom:10%;left:10%;animation:floatB 19s ease-in-out infinite reverse;}
@keyframes floatA{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(60px,-40px) scale(1.12)}
    66%{transform:translate(-30px,50px) scale(.92)}
}
@keyframes floatB{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(-50px,30px) scale(.9)}
    66%{transform:translate(40px,-50px) scale(1.15)}
}

/* white card */
.glass-card{
    position:relative; z-index:5;
    width:100%; max-width:360px;
    padding:2rem 1.8rem 1.7rem;
    border-radius:22px;
    background:#ffffff;
    border:1px solid rgba(255,255,255,.6);
    box-shadow:0 26px 60px -22px rgba(8,30,40,.55);
    color:var(--ink);
    animation:cardIn .8s cubic-bezier(.2,.8,.2,1) both;
}
/* rotating conic glow halo behind the card */
.glass-card::after{
    content:""; position:absolute; inset:-2px; z-index:-1; border-radius:24px;
    background:conic-gradient(from 0deg,#0FB6A2,#26C2D6,#2E84E6,#3FD9EC,#0FB6A2);
    filter:blur(16px); opacity:.55;
    animation:haloSpin 8s linear infinite;
}
@keyframes haloSpin{to{transform:rotate(360deg)}}

/* inner wrapper clips the shimmer + top bar to the rounded card */
.glass-card .card-inner{position:relative; overflow:hidden; border-radius:22px; margin:-2rem -1.8rem -1.7rem; padding:2rem 1.8rem 1.7rem; background:#fff;}
/* slim animated accent bar across the top */
.glass-card .card-inner::before{
    content:""; position:absolute; top:0; left:0; right:0; height:5px;
    background:linear-gradient(120deg,#0FB6A2,#10B0C2,#2E84E6,#26C2D6);
    background-size:300% 300%;
    animation:authGradient 14s ease infinite;
    z-index:2;
}
/* diagonal shimmer sweep across the card face */
.glass-card .card-inner::after{
    content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
    background:linear-gradient(100deg,transparent,rgba(15,167,150,.12),rgba(46,132,230,.08),transparent);
    transform:skewX(-18deg);
    animation:shimmer 6.5s ease-in-out 1.2s infinite;
    pointer-events:none; z-index:1;
}
@keyframes shimmer{
    0%{left:-60%}
    35%,100%{left:140%}
}
@keyframes authGradient{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

/* keep form content above the shimmer/top-bar layers */
.card-inner > *{position:relative; z-index:3;}

.auth-logo{
    width:60px;height:60px;margin:0 auto 1rem;border-radius:18px;
    display:flex;align-items:center;justify-content:center;
    background:var(--g-hero);
    box-shadow:0 12px 26px -8px rgba(15,167,150,.6);
    animation:logoGlow 3.5s ease-in-out infinite;
}
@keyframes logoGlow{
    0%,100%{box-shadow:0 12px 26px -8px rgba(15,167,150,.55);transform:translateY(0)}
    50%{box-shadow:0 18px 38px -8px rgba(46,132,230,.7);transform:translateY(-3px)}
}
.auth-logo svg{width:30px;height:30px;color:#fff;}

.auth-title{
    font-family:'Fraunces',Georgia,serif;text-align:center;font-weight:600;
    font-size:1.6rem;line-height:1.15;letter-spacing:-.3px;margin:0 0 .3rem;
    background:var(--g-hero);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:var(--teal-d);
}
.auth-sub{text-align:center;font-size:.84rem;color:var(--muted);margin-bottom:1.4rem;}

.fld{margin-bottom:1.05rem;}
.fld label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.3px;margin-bottom:.4rem;color:#3A4255;}
.ig{position:relative;display:flex;align-items:center;}
.ig .lead{position:absolute;left:14px;display:flex;color:var(--teal-d);pointer-events:none;}
.ig .lead.lead-r{left:auto;right:14px;color:var(--muted);}
.ig .lead svg{width:18px;height:18px;}
.ig select.sel{
    width:100%;height:48px;padding:0 40px 0 42px;border-radius:13px;
    border:1px solid var(--border);background:#F7F9FC;
    color:var(--ink);font-size:.95rem;outline:none;cursor:pointer;transition:.2s;
    -webkit-appearance:none;appearance:none;
    font-family:inherit;
}
.ig select.sel:focus{border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(15,167,150,.15);}
.ig select.sel option{color:var(--ink);}
.ig input{
    width:100%; height:48px;
    padding:0 46px 0 42px;
    border-radius:13px;
    border:1px solid var(--border);
    background:#F7F9FC;
    color:var(--ink); font-size:.95rem;
    outline:none; transition:.2s;
    font-family:inherit;
}
.ig input::placeholder{color:#9AA2B1;}
.ig input:focus{border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(15,167,150,.15);}
.ig input:-webkit-autofill{-webkit-text-fill-color:var(--ink);transition:background-color 9999s;}
.eye{position:absolute;right:8px;width:34px;height:34px;border:0;background:transparent;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;border-radius:9px;}
.eye:hover{background:#EEF2F7;color:var(--teal-d);}
.eye svg{width:19px;height:19px;}

.row-between{display:flex;align-items:center;justify-content:space-between;margin:.2rem 0 1.3rem;}
.chk{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#3A4255;cursor:pointer;user-select:none;}
.chk input{width:17px;height:17px;accent-color:var(--teal);cursor:pointer;}

.btn-glass{
    width:100%;height:50px;border:0;border-radius:13px;cursor:pointer;
    font-family:'Outfit',sans-serif;
    font-size:1rem;font-weight:700;letter-spacing:.3px;color:#fff;
    background:var(--g-hero);
    box-shadow:0 14px 30px -10px rgba(15,167,150,.6);
    transition:.2s; display:flex;align-items:center;justify-content:center;gap:.5rem;
}
.btn-glass:hover{transform:translateY(-1px);box-shadow:0 18px 36px -10px rgba(15,167,150,.7);}
.btn-glass:active{transform:translateY(0);}
.btn-glass svg{width:18px;height:18px;}

.auth-err{
    display:flex;align-items:center;gap:.5rem;
    background:#FEE9E5;border:1px solid #F7B6AD;
    color:#C0392B;font-size:.85rem;border-radius:12px;padding:.6rem .8rem;margin-bottom:1.1rem;
}
.auth-err svg{width:18px;height:18px;flex:none;}
.auth-foot{text-align:center;font-size:.78rem;color:var(--muted);margin-top:1.4rem;}
.auth-foot code{background:#E2F5F1;padding:.05rem .35rem;border-radius:6px;color:var(--teal-d);font-weight:600;}

@media (prefers-reduced-motion: reduce){
    .auth-stage::before,.auth-stage::after,.blob,.glass-card,
    .glass-card::after,.card-inner::before,.card-inner::after,.auth-logo{animation:none;}
}

/* ===== MOBILE RESPONSIVE ENHANCEMENTS ===== */
/* Additive only; desktop (>=1025px) is untouched. The card padding and the
   matching .card-inner negative margins are intentionally NOT changed, to keep
   the shimmer/top-bar layer aligned to the rounded corners. We only widen the
   card and tune spacing / font-size / touch targets on phones. */

/* Short viewports (landscape phones, small heights): make the card reachable.
   The fixed stage has overflow:hidden, so a tall card could be clipped — allow
   the stage to scroll and anchor the card to the top instead of centering. */
@media (max-height:680px){
    .auth-stage{
        align-items:flex-start;
        overflow-x:hidden;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        padding-top:1.25rem;
        padding-bottom:1.25rem;
    }
}

/* Phones: full-width card within the stage padding, no horizontal overflow. */
@media (max-width:480px){
    .auth-stage{padding:1rem;}
    .glass-card{
        width:100%;
        max-width:none;
    }
    /* 16px controls stop iOS Safari from auto-zooming on focus; keep 48px height. */
    .ig input,
    .ig select.sel{font-size:16px;}
    /* Larger, more tap-friendly remember-me control. */
    .chk input{width:18px;height:18px;}
    /* Let the remember/forgot row wrap gracefully if both are long. */
    .row-between{flex-wrap:wrap;gap:.5rem .75rem;}
}

/* Small phones (<=360px): tighten stage padding and trim the display title a
   touch to guarantee no clipping while staying attractive. */
@media (max-width:360px){
    .auth-stage{padding:.85rem;}
    .glass-card{border-radius:18px;}
    .auth-title{font-size:1.45rem;}
}