/* assets/css/login.css — Login Page
   Clean traditional design, no animated backgrounds
   ============================================================ */

.login-body {
  background: #e8eaf0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* ── Card ─────────────────────────────────────────────────── */
.login-wrap { width: 100%; max-width: 400px; }

.login-card {
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 2.25rem 2rem 1.75rem;
  box-shadow: var(--shadow-lg);
}

/* ── 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: 56px; max-width: 180px;
  width: auto; margin: 0 auto .65rem;
  object-fit: contain;
}
.login-brand h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
}
.login-brand p { font-size: .84rem; color: var(--muted); margin-top: .25rem; }

/* ── Form ─────────────────────────────────────────────────── */
.login-form { display: flex; flex-direction: column; gap: .9rem; }

.form-group label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-3);
}

.input-wrap { position: relative; }
.input-icon {
  position: absolute; left: .75rem; top: 50%;
  transform: translateY(-50%); font-size: .9rem;
  color: var(--subtle); pointer-events: none;
}
.input-wrap input {
  width: 100%;
  padding: .55rem .85rem .55rem 2.25rem;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .9rem;
  background: var(--white); outline: none; color: var(--ink);
  transition: border-color var(--t-fast);
  -webkit-appearance: none;
}
.input-wrap input:hover:not(:focus) { border-color: var(--accent); }
.input-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(26,86,219,.12);
}
.input-wrap input::placeholder { color: var(--subtle); }

.toggle-pwd {
  position: absolute; right: .65rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; font-size: .9rem;
  color: var(--subtle); padding: .2rem;
  transition: color var(--t-fast); line-height: 1;
}
.toggle-pwd:hover { color: var(--ink); }

/* ── Submit button ────────────────────────────────────────── */
.btn-login {
  width: 100%; padding: .65rem;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent-h);
  border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: .95rem; font-weight: 700;
  cursor: pointer; margin-top: .25rem;
  transition: background var(--t-fast);
  touch-action: manipulation;
}
.btn-login:hover { background: var(--accent-h); }
.btn-login:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Footer ───────────────────────────────────────────────── */
.login-footer-text {
  font-size: .75rem; color: var(--subtle);
  text-align: center; margin-top: 1.25rem; line-height: 1.5;
}

/* ── Alert ────────────────────────────────────────────────── */
.alert.alert-error {
  margin-bottom: .5rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 440px) {
  .login-body { padding: 1rem; }
  .login-card { padding: 1.75rem 1.35rem 1.5rem; }
}