/* ==========================================================================
   HRMS — sign-in, register and password pages
   The mockups have no auth screen; this is the same design system applied
   to one: the app background, a white card, the logo, the blue primary.
   Loaded after app.css, so every token and component there applies.
   ========================================================================== */

.auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px;
  background:
    radial-gradient(900px 480px at 100% 0%, var(--primary-soft), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, #f0edff, transparent 60%),
    var(--bg);
}

.auth-card {
  width: 100%; max-width: 420px;
  padding: 32px 32px 28px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-pop);
}

.auth-brand { display: flex; justify-content: center; margin-bottom: 24px; }
.auth-brand img { height: 40px; width: auto; }

.auth-title { text-align: center; margin-bottom: 22px; }
.auth-title h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--head); }
.auth-title p { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.auth-card .field { position: relative; }
.auth-card .field .ic {
  position: absolute; left: 12px; bottom: 11px;
  font-size: 13px; color: #9ca3af; pointer-events: none;
}
.auth-card .field .form-control { padding-left: 36px; }
.auth-card .field .form-control:focus ~ .ic { color: var(--primaryColor); }
.auth-card .field .toggle-password {
  position: absolute; right: 6px; bottom: 4px;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: #9ca3af; cursor: pointer;
}
.auth-card .field .toggle-password:hover { color: var(--primaryColor); background: var(--primary-soft); }
.auth-card .field.with-toggle .form-control { padding-right: 40px; }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 20px; font-size: 12.5px; }
.auth-row .form-check { margin: 0; }
.auth-row .form-check-label { color: var(--text); }
.auth-row a { font-weight: 600; }

.auth-card .btn.btn-theme { width: 100%; min-height: 40px; font-size: 13px; }

.auth-foot { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--muted); }

.auth-card .alert { margin-bottom: 16px; }