/* assets/css/login.css - Login Page */

.login-body {
  background: var(--ink-2);
  min-height: 100vh;
  min-height: 100dvh;  /* dynamic viewport on mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  position: relative;
  padding: 1rem;
}

/* Animated background blobs */
.login-bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.login-bg-shape {
  position: absolute; border-radius: 50%;
  opacity: .1; filter: blur(60px);
  animation: floatShape 9s ease-in-out infinite alternate;
}
.s1 { width: 480px; height: 480px; background: var(--accent);   top: -120px; left: -100px; animation-delay: 0s; }
.s2 { width: 380px; height: 380px; background: var(--accent-2); bottom: -80px; right: -60px; animation-delay: -4s; }
.s3 { width: 260px; height: 260px; background: #06b6d4; top: 45%; left: 50%; animation-delay: -7s; }
@keyframes floatShape { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(24px,16px) scale(1.06)} }

/* Card */
.login-wrap { position: relative; z-index: 1; width: 100%; max-width: 420px; }
.login-card {
  background: rgba(255,255,255,.98);
  border-radius: 18px;
  padding: 2.2rem 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.15);
  animation: cardIn .35s ease forwards;
}
@keyframes cardIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* Brand */
.login-brand { text-align: center; margin-bottom: 1.75rem; }
.brand-icon  { font-size: 2.2rem; color: var(--accent); margin-bottom: .5rem; display: block; }
.login-logo-img {
  display: block;
  max-height: 60px;
  max-width: 180px;
  width: auto;
  margin: 0 auto .65rem;
  object-fit: contain;
}
.login-brand h1 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 1.75rem);
  font-weight: 800; letter-spacing: -.03em; color: var(--ink);
}
.login-brand p { font-size: .8rem; color: #64748b; margin-top: .25rem; }

/* Form */
.login-form { display: flex; flex-direction: column; gap: .9rem; }
.input-wrap { position: relative; }
.input-icon {
  position: absolute; left: .8rem; top: 50%;
  transform: translateY(-50%); font-size: .9rem;
  color: #94a3b8; pointer-events: none;
}
.input-wrap input {
  width: 100%;
  padding: .62rem .85rem .62rem 2.35rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .9rem;
  background: var(--surface); outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance: none;
}
.input-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  background: #fff;
}
.toggle-pwd {
  position: absolute; right: .7rem; top: 50%;
  transform: translateY(-50%); background: none; border: none;
  cursor: pointer; font-size: .9rem; color: #94a3b8;
  padding: .2rem; line-height: 1;
  /* Ensure it doesn't trigger form submit */
  type: button;
}

/* Submit */
.btn-login {
  width: 100%; padding: .72rem;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: .95rem; font-weight: 700;
  cursor: pointer; letter-spacing: .02em;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  margin-top: .25rem;
  touch-action: manipulation;  /* prevents 300ms delay on iOS */
}
.btn-login:hover  { background: var(--accent-h); box-shadow: 0 4px 14px rgba(37,99,235,.38); transform: translateY(-1px); }
.btn-login:active { transform: translateY(0); }

/* Footer text under form */
.login-footer-text {
  font-size: .72rem; color: #94a3b8;
  text-align: center; margin-top: 1.25rem; line-height: 1.5;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 440px) {
  .login-card  { padding: 1.75rem 1.25rem; border-radius: 14px; }
  .login-brand { margin-bottom: 1.4rem; }
}

@media (max-width: 360px) {
  .login-card  { padding: 1.5rem 1rem; }
  .login-brand h1 { font-size: 1.3rem; }
}