/* WION authentication surfaces. Scoped to Frappe's auth sections so regular
   website pages keep their own layout while sharing the WION visual system. */
:root {
  --wion-login-navy: #252b78;
  --wion-login-navy-hover: #1c2263;
  --wion-login-canvas: #f5f7ff;
  --wion-login-surface: #ffffff;
  --wion-login-control: #f3f3f3;
  --wion-login-border: #e2e2e2;
  --wion-login-text: #383838;
  --wion-login-muted: #6f7487;
  --wion-login-focus: rgb(37 43 120 / 12%);
}

html:has(.for-login, .for-forgot, .for-login-with-email-link, .for-signup),
body:has(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) {
  min-height: 100%;
  background: var(--wion-login-canvas);
}

body:has(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) {
  color: var(--wion-login-text);
  font-family: "WION Inter", InterVariable, Inter, "Segoe UI", sans-serif;
}

body:has(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) main.container {
  display: grid;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 32px;
  place-items: center;
}

body:has(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) .page-header-wrapper {
  display: none;
}

body:has(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) .page_content {
  width: 100%;
}

:is(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) {
  width: 100%;
  padding: 0;
}

:is(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) .login-content.page-card {
  width: min(420px, calc(100vw - 32px));
  max-width: none;
  margin: 0 auto;
  padding: 32px;
  overflow: hidden;
  background: var(--wion-login-surface);
  border: 1px solid var(--wion-login-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgb(37 43 120 / 8%);
}

:is(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) .page-card-head {
  margin-bottom: 28px;
}

:is(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) .page-card-head .app-logo {
  display: block;
  width: 104px;
  max-height: 42px;
  margin: 0 0 24px;
  object-fit: contain;
  object-position: left center;
}

:is(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) .page-card-head h4 {
  margin: 0;
  color: var(--wion-login-text);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 32px;
}

:is(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) .page-card-subtitle {
  margin: 6px 0 0;
  color: var(--wion-login-muted);
  font-size: 14px;
  line-height: 20px;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .page-card-body {
  padding: 0;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .form-group {
  margin-bottom: 20px;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .form-label {
  margin: 0 0 8px;
  color: var(--wion-login-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) :is(.email-field, .password-field) {
  position: relative;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .form-control {
  height: 44px !important;
  min-height: 44px;
  padding: 0 42px;
  color: var(--wion-login-text);
  background: var(--wion-login-control) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 14px;
  line-height: 20px;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .form-control:hover {
  border-color: #cfd2df !important;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .form-control:focus {
  background: var(--wion-login-surface) !important;
  border-color: var(--wion-login-navy) !important;
  box-shadow: 0 0 0 3px var(--wion-login-focus) !important;
  outline: none;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .form-control::placeholder {
  color: #9296a6;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) :is(.field-icon, .toggle-password) {
  top: 50%;
  color: var(--wion-login-muted);
  transform: translateY(-50%);
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .forgot-password-message {
  margin: 10px 0 0;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) a {
  color: var(--wion-login-navy);
  font-weight: 500;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) a:hover {
  color: var(--wion-login-navy-hover);
  text-decoration: none;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .page-card-actions {
  padding: 4px 0 0;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .page-card-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px !important;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .page-card-actions :is(.btn-login, .btn-forgot, .btn-login-with-email-link) {
  color: #fff !important;
  background: var(--wion-login-navy) !important;
  border-color: var(--wion-login-navy) !important;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .page-card-actions :is(.btn-login, .btn-forgot, .btn-login-with-email-link):hover:not(:disabled) {
  color: #fff !important;
  background: var(--wion-login-navy-hover) !important;
  border-color: var(--wion-login-navy-hover) !important;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .page-card-actions .btn-login-option {
  margin-top: 12px;
  color: var(--wion-login-navy) !important;
  background: var(--wion-login-surface) !important;
  border: 1px solid var(--wion-login-border) !important;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .page-card-actions .btn-login-option:hover {
  color: var(--wion-login-navy-hover) !important;
  background: #f8f9ff !important;
  border-color: #cfd2df !important;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .page-card-actions .btn:focus-visible {
  box-shadow: 0 0 0 3px var(--wion-login-focus);
  outline: none;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) .page-card-actions .btn:disabled {
  opacity: 0.5;
}

:is(.for-login, .for-forgot, .for-login-with-email-link) :is(.login-error-banner, .login-success-banner) {
  margin-bottom: 20px;
  border-radius: 8px;
}

:is(.for-forgot, .for-login-with-email-link) .sign-up-message {
  margin: 20px 0 0;
}

@media (max-width: 575px) {
  body:has(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) main.container {
    padding: 16px;
  }

  :is(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) .login-content.page-card {
    width: 100%;
    padding: 24px;
    border-radius: 10px;
  }
}

@media (min-width: 576px) {
  body:has(.for-login, .for-forgot, .for-login-with-email-link, .for-signup) {
    overflow: hidden;
  }
}