/* iRecovery Login Pages */
.login-wrapper {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.login-card {
  background: var(--white);
  border-radius: var(--rl);
  padding: 2.5rem 2rem;
  width: 100%; max-width: 420px;
  box-shadow: var(--shl);
  animation: slideUp .35s ease;
  border-top: 4px solid var(--blue2);
}
.login-card--station { border-top-color: #0891b2; }

.login-logo { text-align: center; margin-bottom: 1.5rem; }
.login-logo img { height: 52px; }

.login-heading { text-align: center; margin-bottom: 1.75rem; }
.login-heading h1 { font-size: 1.55rem; font-weight: 700; color: var(--navy); margin-bottom: .25rem; }
.login-heading p  { color: var(--muted); font-size: .88rem; margin: 0; }

.role-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #eff6ff; color: var(--blue2);
  border: 1px solid #bfdbfe; border-radius: 50px;
  padding: .2rem .8rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: .85rem;
}
.login-card--station .role-badge { background: #ecfeff; color: #0891b2; border-color: #a5f3fc; }

.login-card .form-label { font-weight: 600; font-size: .85rem; color: var(--navy2); margin-bottom: .35rem; }
.login-card .form-control {
  border-radius: var(--r);
  padding: .7rem 1rem .7rem 2.5rem;
  border: 1.5px solid var(--border);
  font-size: .92rem; transition: var(--ease);
}
.login-card .form-control:focus {
  border-color: var(--blue2);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  outline: none;
}

.input-icon-wrap { position: relative; }
.input-icon-wrap .bi {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .95rem; pointer-events: none;
}

.btn-login {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  width: 100%; padding: .78rem 1.5rem;
  background: var(--blue2); color: var(--white);
  font-family: var(--font); font-size: .95rem; font-weight: 700;
  border: none; border-radius: var(--r);
  cursor: pointer; transition: var(--ease);
}
.btn-login:hover { background: var(--blue); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.3); }
.login-card--station .btn-login { background: #0891b2; }
.login-card--station .btn-login:hover { background: #0e7490; }

.login-card .alert-danger {
  border-radius: var(--r); font-size: .85rem;
  padding: .6rem .9rem; margin-bottom: 1rem;
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
}

@media (max-width: 480px) {
  .login-card { padding: 2rem 1.25rem; }
  .login-heading h1 { font-size: 1.35rem; }
}