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

/* ============================================================
   0. HIDE NAVBAR, FOOTER, BREADCRUMBS ON LOGIN
   ============================================================ */

body[data-path="login"] nav.navbar,
body[data-path="login"] .navbar,
body[data-path="login"] .web-header,
body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] footer,
body[data-path="login"] .web-footer,
body[data-path="login"] .page-footer,
body[data-path="login"] [class*="powered"],
body[data-path="login"] [class*="frappe-footer"],
body[data-path="login"] .login-footer {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* ============================================================
   1. BODY & OUTER CONTAINERS — full viewport, no scroll
   ============================================================ */

body[data-path="login"] {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}

/* Break out of Bootstrap .container max-width */
body[data-path="login"] main.container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body[data-path="login"] main.container .my-4 {
  margin: 0 !important;
}

body[data-path="login"] .page_content,
body[data-path="login"] #page-login,
body[data-path="login"] .page-content-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide non-login sections */
body[data-path="login"] section.for-signup,
body[data-path="login"] section.for-forgot,
body[data-path="login"] section.for-login-with-email-link {
  display: none !important;
}

/* ============================================================
   2. FOR-LOGIN SECTION — the two-panel flex container
   The JS appends .vyn-login-right inside .login-content.page-card.
   But .page-card-head sits OUTSIDE .login-content.page-card,
   so we make section.for-login the flex parent instead.
   ============================================================ */

body[data-path="login"] section.for-login {
  display: flex !important;
  flex-direction: row !important;
  min-height: 100vh !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   3. LEFT PANEL — form side
   .page-card-head + .login-content.page-card together form left
   We wrap them visually by making .login-content.page-card a
   flex column that takes up the left portion.
   ============================================================ */

/* .page-card-head is a sibling in the flex row — must hide it
   or it becomes a third flex column and breaks the layout */
body[data-path="login"] section.for-login > .page-card-head {
  display: none !important;
}

/* The card itself becomes the left panel */
body[data-path="login"] .login-content.page-card {
  flex: 0 0 40% !important;
  width: 40% !important;
  min-width: 480px !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.06) !important;
  margin: 0 !important;
  padding: 0 72px !important;
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  max-width: none !important;
}

/* "Sign in" heading injected by JS above the form */
body[data-path="login"] .vyn-form-heading {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 32px !important;
  width: 100% !important;
  text-align: center !important;
}

/* .page-card-body inside it — full width, no extra padding */
body[data-path="login"] .page-card-body {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* More spacing between form groups */
body[data-path="login"] .page-card .form-group {
  margin-bottom: 20px !important;
  width: 100% !important;
}

/* Ensure field wrappers stretch full width */
body[data-path="login"] .email-field,
body[data-path="login"] .password-field {
  width: 100% !important;
  position: relative !important;
}

/* Center all form content */
body[data-path="login"] .login-content.page-card {
  align-items: center !important;
}

body[data-path="login"] .social-logins.text-center {
  text-align: center !important;
}

/* Buttons and actions full width */
body[data-path="login"] .page-card-actions {
  width: 100% !important;
}

body[data-path="login"] .form-signin {
  width: 100% !important;
}

/* ============================================================
   4. FORM ELEMENTS
   ============================================================ */

body[data-path="login"] label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

body[data-path="login"] .page-card input[type="text"],
body[data-path="login"] .page-card input[type="email"],
body[data-path="login"] .page-card input[type="password"] {
  width: 100% !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 14px 14px 14px 40px !important;
  font-size: 15px !important;
  height: 48px !important;
  color: #111827 !important;
  background: #FFFFFF !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
  font-family: 'DM Sans', sans-serif !important;
}

body[data-path="login"] .page-card input:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.1) !important;
  outline: none !important;
}

body[data-path="login"] .page-card input::placeholder {
  color: #9CA3AF !important;
}

body[data-path="login"] .field-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none !important;
}

body[data-path="login"] .field-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #9CA3AF !important;
}

body[data-path="login"] .page-card a {
  font-size: 13px !important;
  color: #10B981 !important;
  text-decoration: none !important;
}

body[data-path="login"] .page-card a:hover {
  color: #0d9e6e !important;
}

/* ============================================================
   5. BUTTONS
   ============================================================ */

body[data-path="login"] .btn-primary,
body[data-path="login"] .btn-primary:focus {
  font-family: 'DM Sans', sans-serif !important;
  width: 100% !important;
  background: #10B981 !important;
  border-color: #10B981 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 20px !important;
  height: 48px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(16,185,129,0.3) !important;
  margin-top: 16px !important;
  transition: background 0.15s ease !important;
}

body[data-path="login"] .btn-primary:hover {
  background: #0d9e6e !important;
  border-color: #0d9e6e !important;
}

body[data-path="login"] .btn-login-option,
body[data-path="login"] .btn-default {
  font-family: 'DM Sans', sans-serif !important;
  width: 100% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E5E7EB !important;
  color: #374151 !important;
  font-size: 14px !important;
  padding: 11px 20px !important;
  border-radius: 8px !important;
  margin-top: 8px !important;
}

body[data-path="login"] .btn-login-option:hover {
  border-color: #10B981 !important;
  color: #10B981 !important;
}

/* ============================================================
   6. RIGHT PANEL — injected by vyn_login.js
   ============================================================ */

.vyn-login-right {
  flex: 1 !important;
  min-height: 100vh !important;
  background: #1A1A2E !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 60px 64px !important;
  position: relative !important;
  overflow: hidden !important;
}

.vyn-login-right::before {
  content: '' !important;
  position: absolute !important;
  top: -120px !important;
  right: -120px !important;
  width: 400px !important;
  height: 400px !important;
  border-radius: 50% !important;
  background: rgba(16,185,129,0.06) !important;
  pointer-events: none !important;
}

.vyn-login-right::after {
  content: '' !important;
  position: absolute !important;
  bottom: -80px !important;
  left: -80px !important;
  width: 300px !important;
  height: 300px !important;
  border-radius: 50% !important;
  background: rgba(16,185,129,0.04) !important;
  pointer-events: none !important;
}

.vyn-login-right .vyn-right-logo {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 56px !important;
  position: relative !important;
  z-index: 1 !important;
  font-family: 'DM Sans', sans-serif !important;
}

.vyn-login-right .vyn-right-logo span {
  color: #10B981 !important;
}

.vyn-login-right .vyn-eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #10B981 !important;
  margin-bottom: 16px !important;
  position: relative !important;
  z-index: 1 !important;
  font-family: 'DM Sans', sans-serif !important;
}

.vyn-login-right .vyn-tagline {
  font-size: 44px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.12 !important;
  letter-spacing: -1px !important;
  margin-bottom: 24px !important;
  max-width: 460px !important;
  position: relative !important;
  z-index: 1 !important;
  font-family: 'DM Sans', sans-serif !important;
}

.vyn-login-right .vyn-tagline .vyn-highlight {
  color: #10B981 !important;
}

.vyn-login-right .vyn-subtitle {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.5) !important;
  line-height: 1.65 !important;
  max-width: 380px !important;
  margin-bottom: 52px !important;
  position: relative !important;
  z-index: 1 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  body[data-path="login"] section.for-login {
    flex-direction: column !important;
  }
  body[data-path="login"] .login-content.page-card {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    padding: 40px 24px !important;
  }
  .vyn-login-right {
    min-height: 200px !important;
    padding: 40px 24px !important;
  }
  .vyn-login-right .vyn-tagline {
    font-size: 28px !important;
  }
}