/* ════════════════════════════════════════════════════════════
   Syftlearn Portal — Login page styles
   Clean, modern, professional. No "AI-generated" gradient slop.
   Palette: deep navy background + crisp white card + brand blue.
   ════════════════════════════════════════════════════════════ */

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

:root {
  --brand:        #1B4FBE;
  --brand-dark:   #0F3499;
  --brand-light:  #EFF6FF;
  --bg-1:         #0B1B3A;
  --bg-2:         #122A5C;
  --bg-3:         #1B4FBE;
  --ink:          #0F172A;
  --ink-2:        #475569;
  --muted:        #94A3B8;
  --line:         #E2E8F0;
  --success:      #16A34A;
  --success-dark: #15803D;
  --danger:       #DC2626;
  --radius:       14px;
  --t:            180ms ease;
}

html, body { height: 100%; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background:
    radial-gradient(circle at 12% 18%, rgba(96,165,250,0.18) 0%, transparent 55%),
    radial-gradient(circle at 88% 82%, rgba(168,85,247,0.10) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Login card ─────────────────────────────────────────── */
.login-shell {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 24px 60px -10px rgba(0,0,0,0.45),
    0 8px 20px -4px rgba(0,0,0,0.2);
  padding: 36px 34px 28px;
  position: relative;
  animation: shellIn 320ms cubic-bezier(.2,.7,.3,1.1);
}
@keyframes shellIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Brand strip ────────────────────────────────────────── */
.brand-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.brand-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.5px;
  box-shadow: 0 6px 14px -4px rgba(27,79,190,0.55);
  flex-shrink: 0;
}
.brand-mark img { width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); }
.brand-text {
  display: flex; flex-direction: column; line-height: 1.1;
}
.brand-name {
  font-size: 18px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.4px;
}
.brand-name em { font-style: normal; color: var(--brand); }
.brand-tag {
  font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.6px; text-transform: uppercase; margin-top: 3px;
}

/* ── Welcome summary (remembered user) ──────────────────── */
.welcome-back {
  display: none;
  background: var(--brand-light);
  border: 1px solid #DBEAFE;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  align-items: center;
  gap: 12px;
}
.welcome-back.show { display: flex; }
.wb-ava {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wb-info { flex: 1; min-width: 0; }
.wb-name { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-email { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-switch {
  font-size: 11px; font-weight: 700; color: var(--brand);
  background: none; border: none; cursor: pointer;
  white-space: nowrap; padding: 4px 6px; border-radius: 6px;
}
.wb-switch:hover { background: rgba(27,79,190,0.08); }

/* ── Form ───────────────────────────────────────────────── */
.form-heading {
  font-size: 22px; font-weight: 800; color: var(--ink);
  margin-bottom: 4px; letter-spacing: -0.5px;
}
.form-subheading {
  font-size: 13px; color: var(--ink-2);
  margin-bottom: 22px;
}

.field {
  margin-bottom: 14px;
  position: relative;
}
.field label {
  display: block;
  font-size: 12px; font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.field-wrap {
  position: relative;
  display: flex; align-items: center;
}
.field-wrap > i.lead {
  position: absolute; left: 14px;
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}
.input, .select {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
}
.select { padding-left: 14px; appearance: none; cursor: pointer; }
.input::placeholder { color: #B6C2D2; }
.input:focus, .select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(27,79,190,0.12);
}
.input.invalid, .select.invalid {
  border-color: var(--danger);
  background: #FEF2F2;
}
.eye-btn {
  position: absolute; right: 12px;
  background: none; border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  font-size: 14px;
}
.eye-btn:hover { color: var(--brand); }

.field-error {
  display: none;
  font-size: 12px; color: var(--danger);
  margin-top: 5px;
  align-items: center; gap: 5px;
}
.field-error.show { display: flex; }

/* ── Submit ─────────────────────────────────────────────── */
.btn-submit {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  transition: transform 100ms ease, box-shadow var(--t), opacity var(--t);
  box-shadow: 0 8px 16px -6px rgba(27,79,190,0.6);
  letter-spacing: 0.2px;
}
.btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -8px rgba(27,79,190,0.7);
}
.btn-submit:active { transform: translateY(0); }
.btn-submit:disabled { opacity: 0.7; cursor: wait; }

/* ── Auxiliary links ────────────────────────────────────── */
.aux-links {
  display: flex; justify-content: center;
  margin-top: 14px;
}
.forgot-link {
  font-size: 12.5px; font-weight: 600; color: var(--brand);
  text-decoration: none; padding: 6px 10px; border-radius: 6px;
}
.forgot-link:hover { background: var(--brand-light); text-decoration: underline; }

/* ── Server-side flash banner ───────────────────────────── */
.flash {
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  animation: flashIn 200ms ease-out;
}
.flash-error   { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.flash-success { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
@keyframes flashIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Footer ─────────────────────────────────────────────── */
.login-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
}
.login-foot a { color: var(--brand); text-decoration: none; font-weight: 600; }
.login-foot a:hover { text-decoration: underline; }

/* ── Mobile adjustments ─────────────────────────────────── */
@media (max-width: 480px) {
  .login-shell { padding: 28px 22px 22px; border-radius: 14px; }
  .form-heading { font-size: 20px; }
  .input, .select { font-size: 16px; } /* avoid iOS zoom */
}