/* ============================================================
   Advatech ERP — Web / Login CSS
   Scoped tightly to login-specific selectors.
   Must override redtheme_v13b which sets:
     .form-control  { border-radius: 2px !important }
     .page-card     { height: 275px }
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400;500&display=swap');

:root {
  --adva-red: #ED1C24;
  --adva-red-dark: #C51E3A;
  --adva-black: #111111;
}

/* ── Page background ── */
.for-login,
.for-signup,
.for-forgot,
.for-email-login,
.for-login-with-email-link {
  background: #f4f5f7 !important;
  min-height: 100vh;
}

/* ── Login card — override redtheme's fixed height ── */
.login-content.page-card,
.for-login .page-card,
.for-signup .page-card,
.for-forgot .page-card,
.for-email-login .page-card,
.for-login-with-email-link .page-card {
  height: auto !important;
  min-height: unset !important;
  max-width: 440px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

/* ── Red header bar at top of card ── */
.page-card-head {
  background: var(--adva-red) !important;
  border-bottom: none !important;
  padding: 1.5rem 2rem 1.25rem !important;
  text-align: center !important;
}

/* ── Logo inside header — white so it pops on red ── */
.page-card-head .app-logo,
.page-card-head img.app-logo {
  height: 40px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
  display: inline-block !important;
  filter: brightness(0) invert(1) !important;
  margin-bottom: 6px !important;
}

/* ── "Log in to …" title in header ── */
.page-card-head h4 {
  color: rgba(255,255,255,0.95) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin: 0 !important;
  letter-spacing: 0.01em !important;
}

/* ── Card body padding ── */
.page-card-body {
  padding: 1.5rem 2rem 0.5rem !important;
}

/* ── Form labels ── */
.for-login .form-label,
.for-forgot .form-label,
.for-signup .form-label,
.login-content .form-label,
.for-login label,
.for-forgot label {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  color: #374151 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 4px !important;
}

/* ── Inputs — override redtheme's border-radius:2px with higher specificity ── */
.login-content.page-card .form-control,
.for-login .page-card-body .form-control,
.for-forgot .page-card-body .form-control,
.for-signup .page-card-body .form-control,
section.for-login input.form-control,
section.for-forgot input.form-control,
section.for-signup input.form-control,
#login_email,
#login_password,
#forgot_email {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 0.6rem 0.875rem !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 0.9rem !important;
  color: #111111 !important;
  background: #f9fafb !important;
  height: auto !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.login-content.page-card .form-control:focus,
.for-login .page-card-body .form-control:focus,
section.for-login input.form-control:focus,
section.for-forgot input.form-control:focus,
#login_email:focus,
#login_password:focus,
#forgot_email:focus {
  border-color: var(--adva-red) !important;
  box-shadow: 0 0 0 3px rgba(237,28,36,0.12) !important;
  background: #ffffff !important;
  outline: none !important;
}

/* ── Page-card actions (button area) ── */
.page-card-actions {
  padding: 1rem 2rem 1.5rem !important;
}

/* ── Login / submit buttons ── */
.for-login .btn-primary,
.for-login .btn-login,
.for-forgot .btn-primary,
.for-signup .btn-primary,
.for-login-with-email-link .btn-primary,
.page-card-actions .btn-primary,
.page-card-actions .btn-login,
section.for-login .btn,
section.for-login button.btn-primary {
  background: var(--adva-red) !important;
  background-image: none !important;
  border-color: var(--adva-red) !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0.65rem 1.5rem !important;
  font-size: 0.92rem !important;
  width: 100% !important;
  letter-spacing: 0.02em !important;
  transition: background 0.15s, border-color 0.15s !important;
}

.for-login .btn-primary:hover,
.for-login .btn-login:hover,
.for-forgot .btn-primary:hover,
.page-card-actions .btn-primary:hover {
  background: var(--adva-red-dark) !important;
  border-color: var(--adva-red-dark) !important;
}

/* ── Forgot password and in-card links ── */
.for-login .page-card a,
.for-forgot .page-card a,
.login-content a,
.forgot-password-message a,
.sign-up-message a {
  color: var(--adva-red) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.85rem !important;
}
.for-login .page-card a:hover,
.forgot-password-message a:hover {
  color: var(--adva-red-dark) !important;
  text-decoration: underline !important;
}

/* ── "Don't have an account?" line ── */
.sign-up-message {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.85rem !important;
  color: #6b7280 !important;
  text-align: center !important;
  padding: 0.75rem 0 1rem !important;
}

/* ── Form-group spacing ── */
.for-login .form-group,
.for-forgot .form-group,
.for-signup .form-group {
  margin-bottom: 1rem !important;
}

/* ── Forgot password message inside form ── */
.forgot-password-message {
  text-align: right !important;
  margin-top: -0.5rem !important;
  margin-bottom: 0.5rem !important;
}