/* Modern login theme for Frappe/ERPNext */

:root {
  --login-bg: #f8fafc;
  --login-card-bg: #fff;
  --login-btn-sec-bg: linear-gradient(90deg, #f8fafc 0%, #e2e8f0 100%);
  --login-btn-bg: #3a57e8c4;
  --login-btn-bg-hover: #23358ec4;
  --login-btn-sec-bg-hover: linear-gradient(90deg, #e2e8f0 0%, #f8fafc 100%);
  --login-btn-color: #ffff;
  --login-btn-color-hover: #ffff;
  --login-btn-sec-color: #242d49;
  --login-btn-sec-color-hover: #242d49;
  --login-input-bg: #f9f9fb;
  --login-input-border: #e0e0e0;
  --login-input-focus: #4f8cff;
}

html[data-theme-mode="dark"] {
  --login-bg: #171717;
  --login-card-bg: #23272f;
  --login-btn-bg: linear-gradient(90deg, #23272f 0%, #2d3340 100%);
  --login-btn-bg-hover: linear-gradient(90deg, #2d3340 0%, #23272f 100%);
  --login-btn-color: #f3f4f6;
  --login-btn-color-hover: #60a5fa;
  --login-input-bg: #23272f;
  --login-input-border: #2d3340;
  --login-input-focus: #60a5fa;
}

/* body.login-page {
  background: var(--login-bg) !important;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: #222;
} */

.for-login .page-card, 
.for-forgot .page-card, 
.for-login-with-email-link .page-card, 
.for-signup .page-card, 
.for-email-login .page-card {
  border-radius: 1.5rem !important;
  box-shadow: 0 4px 24px rgba(30, 41, 59, 0.12), 0 1.5px 6px rgba(30, 41, 59, 0.08) !important;
  border: none !important;
  padding: 2.5rem 2rem;
  transition: box-shadow 0.2s, background 0.2s;
  /* padding: 45px 10px; */
  background-color: #fff;
  /* max-width: 400px; */
  margin: 0 auto;
  /* border: 1px solid var(--border-color); */
}

.page-card-head {
  font-weight: 800;
  color: #3a57e8;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}

.page-card-head h4 {
  color: #3a57e8;
}

.for-login input,
.for-login select,
.for-login textarea {
  border-radius: 8px;
  border: 1px solid var(--login-input-border);
  background: var(--login-input-bg);
  transition: border 0.2s;
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

.for-login input:focus,
.for-login select:focus,
.for-login textarea:focus {
  border-color: var(--login-input-focus);
  outline: none;
}

.for-login .btn-login-with-email-link {
  border-radius: 1.25rem !important;
  background: var(--login-btn-sec-bg) !important;
  border: none !important;
  color: var(--login-btn-sec-color) !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(30, 41, 59, 0.08);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  padding: 0.75rem 2rem;
  font-size: 1.05rem;
}

.for-login .btn-primary {
  border-radius: 1.25rem !important;
  background: var(--login-btn-bg) !important;
  border: none !important;
  color: var(--login-btn-color) !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(30, 41, 59, 0.08);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  padding: 0.75rem 2rem;
  font-size: 1.05rem;
}

.for-login .btn-login-with-email-link:hover,
.for-login .btn-login-with-email-link:focus {
  background: var(--login-btn-sec-bg-hover) !important;
  color: var(--login-btn-sec-color-hover) !important;
  box-shadow: 0 4px 16px rgba(30, 64, 175, 0.12);
  outline: none;
}

.for-login .btn-primary:hover,
.for-login .btn-primary:focus {
  background: var(--login-btn-bg-hover) !important;
  color: var(--login-btn-color-hover) !important;
  box-shadow: 0 4px 16px rgba(30, 64, 175, 0.12);
  outline: none;
}

.for-login a {
  color: #131b43 !important;
  font-weight: 600;
  text-decoration: none;
}

.for-login a:hover {
  color: #131b4366 !important;
}

/* Hide Frappe's default login logo if you want to use your own */
.for-login .login-brand {
  filter: brightness(0) invert(1);
  margin-bottom: 2rem;
  height: 48px;
}