/* ================================================================
   auth.css — Secure Auth Overlay (Login, Forgot, Reset, 2FA)
================================================================ */

/* ═══════════════════════════════════════════════════════════
   SECURE AUTH OVERLAY  — Login / Forgot / Reset
   ═══════════════════════════════════════════════════════════ */
#auth-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;min-height:100vh;background:linear-gradient(135deg,#060a14 0%,#0d1631 50%,#060a14 100%);}
#auth-overlay.hidden{display:none!important;}
/* animated bg dots */
#auth-overlay::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 50%,rgba(99,102,241,.12) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(6,182,212,.10) 0%,transparent 40%);pointer-events:none;}

.auth-wrap{display:flex;width:100%;max-width:900px;min-height:520px;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07);animation:authIn .35s cubic-bezier(.34,1.3,.64,1);}
.auth-left{flex:1;background:linear-gradient(145deg,#1e1b4b 0%,#312e81 45%,#1d4ed8 100%);padding:44px 36px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.auth-left::before{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:rgba(99,102,241,.18);pointer-events:none;}
.auth-left::after{content:'';position:absolute;bottom:-40px;left:-40px;width:180px;height:180px;border-radius:50%;background:rgba(6,182,212,.12);pointer-events:none;}
.auth-left-logo{display:flex;align-items:center;gap:12px;margin-bottom:40px;position:relative;z-index:1;}
.auth-left-logomark{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#06b6d4);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 6px 18px rgba(99,102,241,.45);}
.auth-left-logotext{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;color:#fff;letter-spacing:-.3px;}
.auth-left-logotext span{color:#67e8f9;}
.auth-left-title{font-family:'Inter',sans-serif;font-size:28px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.5px;margin-bottom:12px;position:relative;z-index:1;}
.auth-left-sub{font-size:14px;color:rgba(255,255,255,.6);line-height:1.6;position:relative;z-index:1;}
.auth-left-features{display:flex;flex-direction:column;gap:10px;margin-top:32px;position:relative;z-index:1;}
.auth-left-feature{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.75);}
.auth-left-feature span:first-child{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.auth-card{position:relative;background:#fff;border-radius:0;padding:40px 36px 32px;width:100%;max-width:420px;box-shadow:none;animation:none;}
@keyframes authIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:20px 20px 0 0;background:linear-gradient(90deg,#6366f1,#06b6d4,#10b981);}

/* logo */
.auth-logo-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:28px;}
.auth-shield{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,#4f46e5,#6366f1);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:12px;box-shadow:0 8px 20px rgba(99,102,241,.4);}
.auth-logo-wrap h2{font-size:20px;font-weight:800;color:#0f172a;margin:0 0 3px;letter-spacing:-.3px;}
.auth-logo-wrap p{font-size:12px;color:#64748b;margin:0;}

/* panels */
.auth-panel{display:none;} .auth-panel.active{display:block;}

/* alert boxes */
.auth-msg{border-radius:9px;padding:10px 13px;font-size:13px;display:none;align-items:flex-start;gap:8px;line-height:1.5;margin-bottom:14px;}
.auth-msg.show{display:flex;}
.auth-msg.err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;}
.auth-msg.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;}
.auth-msg.warn{background:#fffbeb;border:1px solid #fde68a;color:#b45309;}

/* form fields */
.af{margin-bottom:14px;}
.af label{display:block;font-size:11px;font-weight:700;color:#475569;margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px;}
.af input{width:100%;padding:10px 13px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:14px;outline:none;box-sizing:border-box;font-family:'Inter',sans-serif;background:#f8fafc;color:#0f172a;transition:border .18s,box-shadow .18s,background .18s;}
.af input:focus{border-color:#6366f1;background:#fff;box-shadow:0 0 0 3px rgba(99,102,241,.13);}
.af input.bad{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.1);}
.af .pw-row{position:relative;}
.af .pw-row input{padding-right:42px;}
.af .pw-eye{position:absolute;right:11px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#94a3b8;font-size:15px;padding:3px;line-height:1;}
.af .pw-eye:hover{color:#475569;}

/* password strength bar */
.pw-bar{height:4px;border-radius:2px;margin-top:6px;background:#e2e8f0;overflow:hidden;}
.pw-bar-fill{height:100%;border-radius:2px;width:0;transition:width .3s,background .3s;}
.pw-hint{font-size:11px;color:#94a3b8;margin-top:4px;}

/* submit button */
.auth-btn{width:100%;padding:12px;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:.2s;margin-top:4px;letter-spacing:.2px;display:flex;align-items:center;justify-content:center;gap:8px;}
.auth-btn.primary{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;box-shadow:0 4px 14px rgba(99,102,241,.35);}
.auth-btn.primary:hover:not(:disabled){filter:brightness(1.07);box-shadow:0 6px 20px rgba(99,102,241,.45);}
.auth-btn:disabled{opacity:.55;cursor:not-allowed;}

/* links */
.auth-lk{background:none;border:none;color:#6366f1;font-size:13px;cursor:pointer;padding:0;font-family:'Inter',sans-serif;text-decoration:underline;}
.auth-lk:hover{color:#4f46e5;}
.auth-footer{text-align:center;margin-top:14px;}

/* attempt counter */
.auth-attempts{font-size:11px;color:#ef4444;text-align:right;margin-top:4px;min-height:14px;}

/* ── Page-load overlay (prevents flash before session check) ── */
#page-load-overlay{position:fixed;inset:0;z-index:99999;background:linear-gradient(135deg,#0a0f1e 0%,#1a2744 50%,#0a0f1e 100%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;transition:opacity .3s ease;}
#page-load-overlay.fade-out{opacity:0;pointer-events:none;}
.plo-spinner{width:38px;height:38px;border:3px solid rgba(99,102,241,0.2);border-top-color:#6366f1;border-radius:50%;animation:plo-spin .7s linear infinite;}
@keyframes plo-spin{to{transform:rotate(360deg)}}
.plo-text{font-family:'Inter',sans-serif;font-size:13px;color:rgba(255,255,255,0.45);letter-spacing:.5px;}
#idle-warn{position:fixed;bottom:20px;right:20px;background:#1e293b;color:#f1f5f9;border-radius:12px;padding:14px 18px;font-size:13px;z-index:99999;display:none;gap:12px;align-items:center;box-shadow:0 8px 30px rgba(0,0,0,.35);max-width:320px;border:1px solid rgba(255,255,255,.08);}
#idle-warn.show{display:flex;}
#idle-warn button{background:#6366f1;color:#fff;border:none;border-radius:7px;padding:6px 12px;font-size:12px;cursor:pointer;font-weight:600;white-space:nowrap;}
/* Responsive — hide left panel on narrow screens */
@media(max-width:680px){
  .auth-left{display:none;}
  .auth-card{border-radius:20px;max-width:100%;}
  .auth-wrap{border-radius:20px;max-width:420px;}
}
@media(min-width:681px){
  .auth-card{border-radius:0 20px 20px 0;}
}