/* ════════════════════════════════════════════════
   ARC Visa Services — Login Pages — Light Theme
   Shared: login.html, admin_login.html, org/login.html, org/team_login.html
   ════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:        #EFF3F8;
  --card:      #FFFFFF;
  --surface:   #F8FAFC;
  --border:    #E2E8F0;
  --border-2:  #CBD5E1;

  --accent:    #3B82F6;
  --accent-lt: #EFF6FF;
  --accent-mid:#BFDBFE;
  --red:       #DC2626;
  --red-lt:    #FEE2E2;

  --text:      #1E293B;
  --text-2:    #475569;
  --muted:     #64748B;
  --muted-2:   #94A3B8;

  --sans:  'Inter', system-ui, -apple-system, sans-serif;
  --serif: 'Syne', system-ui, sans-serif;
  --mono:  'Fira Code', 'Cascadia Code', ui-monospace, monospace;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;

  --ease: cubic-bezier(0.22,1,0.36,1);
}

html{font-size:15px;-webkit-text-size-adjust:100%}

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* Subtle blue gradient mesh */
body::before{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse 65% 60% at 20% 30%, rgba(59,130,246,0.07), transparent 55%),
    radial-gradient(ellipse 50% 55% at 80% 70%, rgba(124,58,237,0.04), transparent 50%);
  pointer-events:none;z-index:0;
}

/* Dot grid overlay */
body::after{
  content:'';position:fixed;inset:0;
  background-image:radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,black 20%,transparent 75%);
  pointer-events:none;z-index:0;
}

/* ── Page wrapper ── */
.login-wrap{
  position:relative;z-index:1;
  width:100%;max-width:420px;
  padding:20px;
}

/* ── Card ── */
.login-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:40px 36px 36px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.06),
    0 8px 32px rgba(0,0,0,0.08);
}

/* ── Logo block ── */
.login-logo{
  display:flex;align-items:center;gap:11px;
  margin-bottom:28px;
}
.login-logo-icon{
  width:40px;height:40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;flex-shrink:0;
  object-fit:contain;
  /* colour overridden per-page with inline <style> */
}
.login-logo-name{
  font-family:var(--serif);
  font-size:0.92rem;font-weight:800;
  color:var(--text);line-height:1.15;
}
.login-logo-sub{
  font-size:0.6rem;color:var(--muted);
  letter-spacing:0.09em;text-transform:uppercase;
  margin-top:2px;
}

/* ── Role tag ── */
.login-role-tag{
  display:inline-block;
  font-size:0.58rem;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;
  border-radius:99px;padding:3px 12px;
  margin-bottom:16px;border:1px solid;
  /* colour overridden per-page */
}

/* ── Headings ── */
.login-title{
  font-family:var(--serif);
  font-size:1.6rem;font-weight:800;
  color:var(--text);margin-bottom:6px;
  line-height:1.15;
}
.login-sub{
  font-size:0.8rem;color:var(--muted);
  margin-bottom:28px;line-height:1.6;
}

/* ── Error box ── */
.login-err{
  background:var(--red-lt);
  border:1px solid rgba(220,38,38,0.25);
  color:var(--red);
  border-radius:var(--r-sm);
  padding:10px 14px;
  font-size:0.8rem;
  margin-bottom:14px;
  display:none;
  line-height:1.5;
}

/* ── Form field ── */
.f{margin-bottom:16px;}
.f label{
  display:block;
  font-size:0.64rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.f input{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--r-sm);
  color:var(--text);
  font-family:var(--mono);
  font-size:0.88rem;
  padding:11px 14px;
  outline:none;
  transition:border-color .18s, box-shadow .18s;
  letter-spacing:0.04em;
}
.f input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-lt);
}
.f input::placeholder{color:var(--muted-2);}

/* ── Submit button (default: blue — overridden per-page) ── */
.login-btn{
  width:100%;
  padding:13px 20px;
  border-radius:var(--r);
  border:none;
  background:var(--accent);
  color:#fff;
  font-family:var(--serif);
  font-size:0.95rem;font-weight:700;
  cursor:pointer;
  transition:background .2s, transform .2s, box-shadow .2s;
  margin-top:4px;
  box-shadow:0 4px 18px rgba(59,130,246,0.26);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.login-btn:hover{
  background:#2563EB;
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(59,130,246,0.38);
}
.login-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;}

/* ── Footer link ── */
.login-footer{
  margin-top:22px;
  text-align:center;
  font-size:0.72rem;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;
}
.login-footer a{
  color:var(--muted);
  border-bottom:1px solid var(--border-2);
  padding-bottom:1px;
  transition:color .18s, border-color .18s;
}
.login-footer a:hover{color:var(--accent);border-color:var(--accent);}

/* ── Focus ring (WCAG AA) ── */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}