/* =====================================================================
 * oasis/login.css  —  Login screen only styles
 *
 * Loaded by templates/auth/login.html AFTER auth.css. Most login styles
 * (card, submit button, password toggle, error) live in auth.css now —
 * this file only carries rules genuinely unique to the login screen.
 *
 * Sections:
 *   1. Card (mockup uses .login-card — same visual as .auth-card but
 *      scoped to login so the template matches oasis_login_v04.html
 *      verbatim)
 *   2. Form input override (flat white, not the green field-bg tint)
 *   3. Forgot-password link
 *   4. Remember-me custom checkbox
 *   5. Signup outline button
 *   6. "OR" divider
 *   7. First-login info note
 * ===================================================================== */


/* ---------- 1. Card (mockup uses .login-card — same visual as .auth-card
       but scoped to login so the template matches oasis_login_v04.html
       verbatim) ---------- */
.login-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 440px;
  padding: 40px 36px 32px;
  animation: cardIn 0.35s ease;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}


/* ---------- 2. Form input override ---------- */
.login-card .form-input { background: var(--surface); }
.login-card .form-group { margin-bottom: 18px; }
.login-card .form-group label .required {
  color: var(--danger); font-size: 0.7rem; margin-left: 4px;
}


/* ---------- 3. Forgot-password link ---------- */
.forgot-link {
  display: block; text-align: right;
  font-size: 0.75rem; color: var(--info-blue);
  text-decoration: none; margin-bottom: 18px;
  transition: color var(--transition);
}
.forgot-link:hover { color: #1976D2; text-decoration: underline; }


/* ---------- 4. Remember-me custom checkbox ---------- */
.checkbox-group { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.checkbox-group input[type="checkbox"] { display: none; }
.custom-checkbox {
  width: 18px; height: 18px;
  border: 2px solid var(--border); border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition); flex-shrink: 0;
}
.custom-checkbox svg {
  width: 12px; height: 12px; stroke: #FFF;
  opacity: 0; transition: opacity 0.15s ease;
}
.checkbox-group input:checked + .custom-checkbox {
  background: var(--accent); border-color: var(--accent);
}
.checkbox-group input:checked + .custom-checkbox svg { opacity: 1; }
.checkbox-group .cb-label {
  font-size: 0.78rem; color: var(--text-sec);
  cursor: pointer; user-select: none;
}


/* ---------- 5. Signup outline button ---------- */
.signup-btn {
  width: 100%; padding: 13px 24px; border-radius: var(--radius);
  background: transparent;
  color: var(--hdr-bg); border: 2px solid var(--hdr-bg);
  font-family: inherit; font-size: 0.92rem; font-weight: 700;
  cursor: pointer; transition: all var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.signup-btn:hover {
  background: #F0F9F4;
  box-shadow: 0 4px 14px rgba(1, 173, 110, 0.18);
}
.signup-btn svg { width: 18px; height: 18px; }


/* ---------- 6. "OR" divider ---------- */
.form-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 18px;
}
.form-divider::before,
.form-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border-light);
}
.form-divider span {
  font-size: 0.72rem; color: var(--text-muted); white-space: nowrap;
}


/* ---------- 7. First-login info note ---------- */
.first-note {
  display: flex; gap: 8px;
  font-size: 0.72rem; color: var(--text-sec);
  background: var(--surface-alt);
  border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: 11px 13px; line-height: 1.6; margin-top: 14px;
}
.first-note svg {
  width: 15px; height: 15px;
  stroke: var(--info-blue); flex-shrink: 0; margin-top: 1px;
}


/* ---------- 8. Server-rendered status banners (?error=pending carries
       an inline resend-activation form so users can recover without
       navigating away) ---------- */
.auth-status {
  padding: 12px 14px; margin-bottom: 20px;
  border-radius: var(--radius);
  font-size: 0.78rem; line-height: 1.55;
}
.auth-status-warn  { background: #FFF8E6; border: 1px solid #F5D77A; color: #8A6D1F; }
.auth-status-info  { background: #EAF4EE; border: 1px solid #B7D9C5; color: #2F6B4D; }
.auth-status-warn > span { display: block; margin-bottom: 10px; }

/* The resend form lives INSIDE .auth-status-warn so it must NOT inherit
   the full-width login-card .form-input look — keep it compact and inline
   so users can tell it apart from the login form below. */
.resend-form { display: flex; gap: 8px; align-items: stretch; }
.resend-form .form-input {
  flex: 1 1 auto; min-width: 0;
  font-size: 0.78rem; padding: 7px 10px;
  background: var(--surface);
}
.resend-form button {
  flex: 0 0 auto;
  font-size: 0.78rem; padding: 7px 14px;
  background: #FFF; border: 1.5px solid var(--accent); color: var(--accent);
  border-radius: var(--radius);
  font-family: inherit; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all var(--transition);
}
.resend-form button:hover { background: #E3F0E9; }


/* ---------- 9. Admin-only note (SCR-36 admin login) ----------
       Smaller + amber-tinted to set the admin namespace apart from the
       customer "first-time" note. Reuses the same icon-circle pattern. */
.admin-note {
  display: block;
  font-size: 0.7rem; color: var(--text-sec);
  background: #FFF8E6; border: 1px solid #F5D77A; border-radius: var(--radius);
  padding: 10px 12px; line-height: 1.6; margin-top: 16px;
}
.admin-note a { color: var(--info-blue); text-decoration: underline; }
.admin-note a:hover { color: #1976D2; }


/* ---------- 10. SCR-36 admin login — dark-green namespace theme
       (oasis_admin_login_v01.html mockup)
       REMOVED: admin login template is now self-contained (CSS + JS
       inlined in templates/admin/login/login.html). All admin-specific
       styling lives there so the customer login's theme.css / forms.css
       / auth.css / login.css chain is not loaded. This section kept as
       a no-op marker so future readers know where the moved code was. */