/* ============================================================
   Advatech ERP — Login Page Redesign
   Split-screen: Navy brand panel (left) + clean form (right)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --adva-red:         #ED1C24;
  --adva-red-mid:     #C51E3A;
  --adva-red-dark:    #A01020;
  --adva-red-dim:     rgba(237,28,36,0.15);
  --adva-red-glow:    rgba(237,28,36,0.30);
  --adva-white:       #FFFFFF;
  --adva-off-white:   #F5F8FC;
  --adva-gray-100:    #F1F3F7;
  --adva-gray-200:    #E4E8EF;
  --adva-gray-400:    #9BA8BC;
  --adva-gray-600:    #5A6680;
  --adva-gray-800:    #2D3748;
  --adva-text:        #1A2840;
  --adva-input-bg:    #F8FAFD;
  --adva-shadow-card: 0 20px 60px rgba(11,30,61,0.12), 0 4px 16px rgba(11,30,61,0.06);
  --adva-shadow-btn:  0 4px 14px rgba(237,28,36,0.35);
  --font-display:     'Outfit', sans-serif;
  --font-body:        'DM Sans', sans-serif;
}

/* ── Reset page — kill Frappe's default body layout on login ── */
body.login-page,
body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--adva-off-white) !important;
  font-family: var(--font-body) !important;
}

/* Hide web navbar and footer — belt-and-suspenders (also suppressed in template) */
nav.navbar,
.navbar.navbar-light,
.navbar-light,
.web-footer,
footer.web-footer,
.footer-info {
  display: none !important;
}

/* ── Escape Frappe web.html wrapper element padding ── */
/* full_width=True removes container my-4; these clean up the remaining wrappers */
.page-content-wrapper,
.page-breadcrumbs,
.page_content,
.page-header-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Kill redtheme_web.css .page-card fixed height — it wins via specificity otherwise */
.adva-form-panel .page-card,
.adva-form-panel .login-content.page-card,
.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card,
.for-login-with-email-link .page-card {
  height: auto !important;
  min-height: unset !important;
  max-width: 420px !important;
}

/* ── Root container: side-by-side split ──────────────────── */
.adva-login-root {
  display: flex !important;
  min-height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* ════════════════════════════════════════════════════════════
   LEFT BRAND PANEL
   ════════════════════════════════════════════════════════════ */
.adva-brand-panel {
  position: relative !important;
  flex: 0 0 42% !important;
  min-height: 100vh !important;
  background: linear-gradient(145deg, var(--adva-red-dark) 0%, var(--adva-red) 55%, var(--adva-red-mid) 100%) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
}

.adva-brand-inner {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 3.5rem 3rem 3rem !important;
  width: 100% !important;
}

/* Logo + wordmark row */
.adva-brand-logo-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-bottom: 3.5rem !important;
}

/* White pill container so JPEG logo (white bg) renders cleanly on navy */
.adva-brand-logo-pill {
  background: #ffffff !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  flex-shrink: 0 !important;
}

.adva-brand-logo-img {
  height: 28px !important;
  width: auto !important;
  max-width: 110px !important;
  object-fit: contain !important;
  filter: none !important;
}

.adva-brand-wordmark {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--adva-white) !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
}

/* Main copy */
.adva-brand-copy {
  margin-bottom: 3rem !important;
}

.adva-brand-headline {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
  line-height: 1.15 !important;
  color: var(--adva-white) !important;
  margin: 0 0 1.25rem !important;
  letter-spacing: -0.02em !important;
}

/* Teal accent on first word */
.adva-brand-headline::first-line {
  /* We can't target first word in pure CSS, the teal accent is via decorative border */
}

.adva-brand-desc {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.65) !important;
  margin: 0 !important;
  max-width: 28ch !important;
}

/* Teal accent bar above headline */
.adva-brand-copy::before {
  content: '' !important;
  display: block !important;
  width: 3rem !important;
  height: 3px !important;
  background: var(--adva-red) !important;
  border-radius: 2px !important;
  margin-bottom: 1.25rem !important;
}

/* KPI stats row */
.adva-kpis {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 14px !important;
  padding: 1.25rem 1.5rem !important;
  backdrop-filter: blur(8px) !important;
  margin-bottom: 2.5rem !important;
}

.adva-kpi {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.adva-kpi-num {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.65rem !important;
  color: var(--adva-red) !important;
  line-height: 1 !important;
  margin-bottom: 0.3rem !important;
  letter-spacing: -0.01em !important;
}

.adva-kpi-label {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.3 !important;
}

.adva-kpi-divider {
  width: 1px !important;
  height: 2.5rem !important;
  background: rgba(255,255,255,0.15) !important;
  flex-shrink: 0 !important;
  margin: 0 0.5rem !important;
}

/* Footer note */
.adva-brand-footer-note {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.35) !important;
  letter-spacing: 0.04em !important;
}

/* ── Decorative rings ───────────────────────────────────────── */
.adva-ring {
  position: absolute !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  pointer-events: none !important;
}

.adva-ring-xl {
  width: 600px !important;
  height: 600px !important;
  bottom: -200px !important;
  right: -220px !important;
}

.adva-ring-lg {
  width: 430px !important;
  height: 430px !important;
  bottom: -120px !important;
  right: -140px !important;
  border-color: rgba(255,255,255,0.25) !important;
}

.adva-ring-md {
  width: 280px !important;
  height: 280px !important;
  bottom: -60px !important;
  right: -70px !important;
  border-color: rgba(255,255,255,0.35) !important;
}

.adva-ring-sm {
  width: 140px !important;
  height: 140px !important;
  bottom: 20px !important;
  right: 10px !important;
  border-color: rgba(255,255,255,0.5) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* Dot grid texture */
.adva-dot-grid {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  mask-image: radial-gradient(ellipse 70% 70% at 80% 20%, black 20%, transparent 70%) !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 80% 20%, black 20%, transparent 70%) !important;
}

/* ════════════════════════════════════════════════════════════
   RIGHT FORM PANEL
   ════════════════════════════════════════════════════════════ */
.adva-form-panel {
  flex: 1 !important;
  min-height: 100vh !important;
  background: var(--adva-off-white) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem 1.5rem !important;
  position: relative !important;
  overflow-y: auto !important;
}

/* ── Kill Frappe's default section styling on the right ── */
/* NOTE: do NOT set display here — Frappe JS uses display:none to hide inactive sections */
.adva-form-panel .for-login,
.adva-form-panel .for-signup,
.adva-form-panel .for-forgot,
.adva-form-panel .for-email-login,
.adva-form-panel .for-login-with-email-link {
  background: transparent !important;
  min-height: unset !important;
  width: 100% !important;
  padding: 0 !important;
}
/* Only add flex layout when Frappe makes the section visible */
.adva-form-panel .for-login:not([style*="display: none"]),
.adva-form-panel .for-signup:not([style*="display: none"]),
.adva-form-panel .for-forgot:not([style*="display: none"]),
.adva-form-panel .for-email-login:not([style*="display: none"]),
.adva-form-panel .for-login-with-email-link:not([style*="display: none"]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* ── Card ───────────────────────────────────────────────────── */
.adva-form-panel .login-content.page-card,
.adva-form-panel .page-card {
  height: auto !important;
  min-height: unset !important;
  width: 100% !important;
  max-width: 420px !important;
  background: var(--adva-white) !important;
  border: 1px solid var(--adva-gray-200) !important;
  border-radius: 18px !important;
  box-shadow: var(--adva-shadow-card) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* ── Card head — clean, no color block ──────────────────────── */
.adva-form-panel .page-card-head {
  background: transparent !important;
  border-bottom: none !important;
  padding: 2.25rem 2.25rem 0.5rem !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.adva-form-panel .page-card-head .app-logo,
.adva-form-panel .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: none !important;
  margin-bottom: 1rem !important;
  border-radius: 6px !important;
}

.adva-form-panel .page-card-head h4 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  color: var(--adva-text) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

/* Subtle divider under card head */
.adva-form-panel .page-card-head::after {
  content: '' !important;
  display: block !important;
  width: 2.5rem !important;
  height: 2px !important;
  background: var(--adva-red) !important;
  border-radius: 2px !important;
  margin: 0.9rem auto 0 !important;
}

/* ── Card body ───────────────────────────────────────────── */
.adva-form-panel .page-card-body {
  padding: 1.5rem 2.25rem 0.5rem !important;
}

/* ── Input wrapper with icon ─────────────────────────────── */
.adva-field-wrap {
  position: relative !important;
}

.adva-field-icon {
  position: absolute !important;
  left: 0.875rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: var(--adva-gray-400) !important;
  opacity: 0.7 !important;
  z-index: 2 !important;
}

.adva-field-wrap .form-control {
  padding-left: 2.5rem !important;
}

/* ── Inputs ──────────────────────────────────────────────── */
.adva-form-panel .form-control,
.adva-form-panel input.form-control,
#login_email,
#login_password,
#forgot_email,
#login_with_email_link_email {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--adva-text) !important;
  background: var(--adva-input-bg) !important;
  border: 1.5px solid var(--adva-gray-200) !important;
  border-radius: 10px !important;
  height: auto !important;
  padding: 0.65rem 0.875rem 0.65rem 2.5rem !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  width: 100% !important;
}

.adva-form-panel .form-control:focus,
.adva-form-panel input.form-control:focus,
#login_email:focus,
#login_password:focus,
#forgot_email:focus,
#login_with_email_link_email:focus {
  border-color: var(--adva-red) !important;
  box-shadow: 0 0 0 3px var(--adva-red-dim) !important;
  background: var(--adva-white) !important;
  outline: none !important;
}

/* ── Form group spacing ─────────────────────────────────── */
.adva-form-panel .form-group {
  margin-bottom: 1rem !important;
}

/* ── Toggle password text ───────────────────────────────── */
.adva-form-panel .toggle-password {
  position: absolute !important;
  right: 0.875rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--adva-red) !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* ── Forgot password link ───────────────────────────────── */
.adva-form-panel .forgot-password-message {
  text-align: right !important;
  margin-top: -0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.adva-form-panel .forgot-password-message a,
.adva-form-panel .page-card a,
.adva-form-panel .login-content a {
  font-family: var(--font-body) !important;
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  color: var(--adva-red) !important;
  text-decoration: none !important;
}

.adva-form-panel .forgot-password-message a:hover,
.adva-form-panel .page-card a:hover {
  color: var(--adva-red) !important;
  text-decoration: underline !important;
}

/* ── Card actions (button area) ─────────────────────────── */
.adva-form-panel .page-card-actions {
  padding: 1rem 2.25rem 2rem !important;
}

/* ── Submit button ──────────────────────────────────────── */
.adva-btn-login,
.adva-form-panel .btn-primary,
.adva-form-panel .btn-login,
.adva-form-panel button.btn-primary,
.adva-form-panel .btn.btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  background: var(--adva-red) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--adva-white) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em !important;
  padding: 0.72rem 1.5rem !important;
  cursor: pointer !important;
  transition: background 0.18s, box-shadow 0.18s, transform 0.1s !important;
  box-shadow: var(--adva-shadow-btn) !important;
}

.adva-btn-login:hover,
.adva-form-panel .btn-primary:hover,
.adva-form-panel .btn-login:hover {
  background: var(--adva-red) !important;
  box-shadow: 0 6px 20px rgba(0,186,198,0.45) !important;
  transform: translateY(-1px) !important;
}

.adva-btn-login:active,
.adva-form-panel .btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* ── Sign-up prompt ─────────────────────────────────────── */
.adva-form-panel .sign-up-message {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--adva-gray-600) !important;
  text-align: center !important;
  margin-top: 1rem !important;
}

/* ── Form footer copyright ─────────────────────────────── */
.adva-form-footer {
  margin-top: auto !important;
  padding-top: 2.5rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: var(--adva-gray-400) !important;
  text-align: center !important;
  letter-spacing: 0.03em !important;
}

/* ════════════════════════════════════════════════════════════
   MOBILE: stack form over brand, hide brand panel
   ════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .adva-login-root {
    flex-direction: column !important;
  }

  .adva-brand-panel {
    flex: 0 0 auto !important;
    min-height: unset !important;
    padding: 0 !important;
  }

  .adva-brand-inner {
    padding: 2rem 1.5rem 2rem !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 1rem !important;
    justify-content: space-between !important;
  }

  .adva-brand-logo-wrap {
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
  }

  .adva-brand-copy,
  .adva-kpis,
  .adva-brand-footer-note {
    display: none !important;
  }

  .adva-ring,
  .adva-dot-grid {
    display: none !important;
  }

  .adva-form-panel {
    padding: 2rem 1rem !important;
    justify-content: flex-start !important;
    padding-top: 2.5rem !important;
  }
}

@media (max-width: 480px) {
  .adva-form-panel .page-card-body {
    padding: 1.25rem 1.5rem 0.5rem !important;
  }
  .adva-form-panel .page-card-actions {
    padding: 0.75rem 1.5rem 1.5rem !important;
  }
  .adva-form-panel .page-card-head {
    padding: 1.75rem 1.5rem 0.5rem !important;
  }
}

/* ════════════════════════════════════════════════════════════
   FRAPPE FRAMEWORK OVERRIDES
   (nuke legacy styles that conflict)
   ════════════════════════════════════════════════════════════ */

/* Reset sections — Frappe JS toggles display:none/block on these; do not override display */
.for-login,
.for-signup,
.for-forgot,
.for-email-login,
.for-login-with-email-link {
  background: transparent !important;
}

/* Hide signup-disabled section visual noise */
.for-signup.signup-disabled .page-card-head {
  background: transparent !important;
}

/* Frappe alert boxes inside login */
.adva-form-panel .alert {
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  margin: 0 2.25rem 0.75rem !important;
}

/* Social login buttons */
.adva-form-panel .social-login-buttons .btn-default {
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  border-color: var(--adva-gray-200) !important;
  color: var(--adva-gray-800) !important;
}

.adva-form-panel .login-divider {
  font-size: 0.8rem !important;
  color: var(--adva-gray-400) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.adva-form-panel .login-divider::before,
.adva-form-panel .login-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--adva-gray-200) !important;
}

/* ════════════════════════════════════════════════════════════
   LOGIN PAGE — DARK MODE
   Frappe sets [data-theme="dark"] on <html>/<body> from saved
   preference even on the login page. The brand panel is already
   dark navy so it needs no changes; only the form panel flips.
   ════════════════════════════════════════════════════════════ */

[data-theme="dark"] .adva-form-panel,
html[data-theme="dark"] .adva-form-panel {
  background: #131B2E !important;
}

[data-theme="dark"] .adva-form-panel .login-content.page-card,
[data-theme="dark"] .adva-form-panel .page-card,
html[data-theme="dark"] .adva-form-panel .page-card {
  background: #1A2540 !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2) !important;
}

[data-theme="dark"] .adva-form-panel .page-card-head h4,
html[data-theme="dark"] .adva-form-panel .page-card-head h4 {
  color: #E8EDF5 !important;
}

[data-theme="dark"] .adva-form-panel .form-control,
[data-theme="dark"] .adva-form-panel input.form-control,
html[data-theme="dark"] #login_email,
html[data-theme="dark"] #login_password,
html[data-theme="dark"] #forgot_email,
html[data-theme="dark"] #login_with_email_link_email {
  background: #111929 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #E8EDF5 !important;
}

[data-theme="dark"] .adva-form-panel .form-control:focus,
html[data-theme="dark"] #login_email:focus,
html[data-theme="dark"] #login_password:focus,
html[data-theme="dark"] #forgot_email:focus {
  background: #0E1525 !important;
  border-color: var(--adva-red) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18) !important;
}

[data-theme="dark"] .adva-form-panel .form-control::placeholder,
html[data-theme="dark"] #login_email::placeholder,
html[data-theme="dark"] #login_password::placeholder {
  color: rgba(255,255,255,0.3) !important;
}

[data-theme="dark"] .adva-form-panel .forgot-password-message a,
[data-theme="dark"] .adva-form-panel .page-card a,
[data-theme="dark"] .adva-form-panel .login-content a,
html[data-theme="dark"] .sign-up-message a {
  color: var(--adva-red-mid) !important;
}

[data-theme="dark"] .adva-form-panel .sign-up-message,
html[data-theme="dark"] .sign-up-message {
  color: rgba(255,255,255,0.45) !important;
}

[data-theme="dark"] .adva-form-footer,
html[data-theme="dark"] .adva-form-footer {
  color: rgba(255,255,255,0.25) !important;
}

[data-theme="dark"] .adva-field-icon,
html[data-theme="dark"] .adva-field-icon {
  color: rgba(255,255,255,0.35) !important;
}

[data-theme="dark"] .adva-btn-login,
html[data-theme="dark"] .adva-btn-login {
  background: var(--adva-red-mid) !important;
}

[data-theme="dark"] .adva-btn-login:hover,
html[data-theme="dark"] .adva-btn-login:hover {
  background: var(--adva-red) !important;
}