/*
 * Jiexing ERP login presentation layer
 * Taste Bank: Organic Biophilic / biophilic-wellness
 * Version: v3813
 *
 * This file changes presentation only. Authentication markup, field names,
 * CSRF handling, routes and JavaScript bindings remain untouched.
 */

:root {
  --sl-color-bg: #f5f5dc;
  --sl-color-surface: rgba(255,255,250,0.7);
  --sl-color-text: #2d3d2a;
  --sl-color-muted: #5a6b4a;
  --sl-color-line: rgba(255,255,255,0.6);
  --sl-color-accent: #228b22;
  --sl-color-forest: #228b22;
  --sl-color-earth: #8b4513;
  --sl-color-sky: #87ceeb;
  --sl-color-cream: #f5f5dc;
  --sl-font-display: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --sl-font-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --sl-size-display: 4rem;
  --sl-size-h1: 4rem;
  --sl-size-h2: 1.12rem;
  --sl-size-body: 0.88rem;
  --sl-size-small: 0.78rem;
  --sl-space-sm: 16px;
  --sl-space-md: 28px;
  --sl-space-lg: 48px;
  --sl-radius-sm: 20px;
  --sl-radius-md: 24px;
  --sl-shadow-card: 0 8px 32px rgba(45,61,42,0.1);
  --sl-duration: 400ms;
  --sl-easing: cubic-bezier(0.22,0.7,0.25,1);
  --sl-login-card-width: calc(
    var(--sl-space-lg) +
    var(--sl-space-lg) +
    var(--sl-space-lg) +
    var(--sl-space-lg) +
    var(--sl-space-lg) +
    var(--sl-space-lg) +
    var(--sl-radius-md)
  );
}

html,
body {
  min-height: 100%;
}

body.jx-login-page {
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--sl-color-text) !important;
  background: var(--sl-color-bg) !important;
  font-family: var(--sl-font-body) !important;
  font-size: var(--sl-size-body) !important;
}

body.jx-login-page,
body.jx-login-page button,
body.jx-login-page input {
  font-family: var(--sl-font-body) !important;
}

.jx-login-page .jx-login-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  gap: var(--sl-space-sm) !important;
  padding: var(--sl-space-sm) !important;
  background: var(--sl-color-bg) !important;
}

.jx-login-page .jx-login-visual,
.jx-login-page .jx-auth-pane {
  min-width: 0;
  min-height: calc(100dvh - var(--sl-space-sm) - var(--sl-space-sm));
  border: 1px solid var(--sl-color-line) !important;
  border-radius: var(--sl-radius-md) !important;
  overflow: hidden;
}

.jx-login-page .jx-login-visual {
  position: relative;
  isolation: isolate;
  color: var(--sl-color-cream) !important;
  background: var(--sl-color-forest) !important;
  box-shadow: none !important;
}

.jx-login-page .jx-login-visual > img {
  display: none !important;
}

.jx-login-page .jx-login-visual-shade {
  display: none !important;
}

.jx-login-page .jx-login-visual::before,
.jx-login-page .jx-login-visual::after {
  content: "";
  position: absolute;
  z-index: 2 !important;
  display: block;
  border-radius: var(--sl-radius-md);
  pointer-events: none;
  transition:
    transform var(--sl-duration) var(--sl-easing),
    opacity var(--sl-duration) var(--sl-easing);
}

.jx-login-page .jx-login-visual::before {
  top: calc(var(--sl-space-lg) * -1);
  right: calc(var(--sl-space-lg) * -1);
  width: 54%;
  height: 46%;
  background: var(--sl-color-sky) !important;
  clip-path: ellipse(48% 42% at 54% 48%);
  opacity: 0.34;
}

.jx-login-page .jx-login-visual::after {
  bottom: calc(var(--sl-space-lg) * -1);
  left: calc(var(--sl-space-lg) * -1);
  width: 46%;
  height: 52%;
  background: var(--sl-color-earth) !important;
  clip-path: ellipse(46% 50% at 48% 52%);
  opacity: 0.32;
}

.jx-login-page .jx-login-particles {
  z-index: 3 !important;
  opacity: 0.42;
}

.jx-login-page .jx-login-brand,
.jx-login-page .jx-login-copy,
.jx-login-page .jx-login-caption {
  z-index: 4 !important;
  color: var(--sl-color-cream) !important;
}

.jx-login-page .jx-login-brand {
  top: calc(var(--sl-space-lg) - var(--sl-space-sm)) !important;
  left: var(--sl-space-lg) !important;
  gap: var(--sl-space-sm) !important;
  padding: 0 !important;
  color: var(--sl-color-cream) !important;
}

.jx-login-page .jx-login-mark,
.jx-login-page .jx-mobile-brand span {
  width: calc(var(--sl-radius-sm) + var(--sl-radius-sm));
  height: calc(var(--sl-radius-sm) + var(--sl-radius-sm));
  border: 1px solid var(--sl-color-line) !important;
  border-radius: var(--sl-radius-sm) !important;
  color: var(--sl-color-forest) !important;
  background: var(--sl-color-cream) !important;
  background-image: none !important;
  box-shadow: var(--sl-shadow-card) !important;
  font-family: var(--sl-font-body) !important;
  font-size: var(--sl-size-small) !important;
}

.jx-login-page .jx-login-brand strong,
.jx-login-page .jx-login-brand small {
  color: var(--sl-color-cream) !important;
  font-family: var(--sl-font-body) !important;
}

.jx-login-page .jx-login-brand strong {
  font-size: var(--sl-size-body) !important;
}

.jx-login-page .jx-login-brand small {
  margin-top: 0 !important;
  font-size: var(--sl-size-small) !important;
}

.jx-login-page .jx-login-copy {
  right: var(--sl-space-lg) !important;
  bottom: calc(var(--sl-space-lg) + var(--sl-space-lg)) !important;
  left: calc(var(--sl-space-lg) + var(--sl-space-sm)) !important;
  max-width: none !important;
  padding: 0 !important;
}

.jx-login-page .jx-login-copy h1 {
  max-width: 11ch !important;
  margin: 0 !important;
  color: var(--sl-color-cream) !important;
  font-family: var(--sl-font-display) !important;
  font-size: var(--sl-size-h1) !important;
  line-height: 1.12;
  text-wrap: balance;
}

.jx-login-page .jx-login-copy p {
  max-width: 36ch;
  margin: var(--sl-space-sm) 0 0 !important;
  color: var(--sl-color-cream) !important;
  font-size: var(--sl-size-body) !important;
}

.jx-login-page .jx-login-caption {
  right: var(--sl-space-md) !important;
  bottom: var(--sl-space-sm) !important;
  margin: 0 !important;
  color: var(--sl-color-cream) !important;
  font-size: var(--sl-size-small) !important;
}

.jx-login-page .jx-auth-pane {
  height: calc(100dvh - var(--sl-space-sm) - var(--sl-space-sm));
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--sl-space-md) !important;
  color: var(--sl-color-text) !important;
  background: var(--sl-color-surface) !important;
  box-shadow: none !important;
  overflow: auto;
}

.jx-login-page[data-auth-mode="register"] .jx-auth-pane {
  align-items: start;
  padding: var(--sl-space-sm) !important;
}

.jx-login-page .jx-auth-content {
  min-width: 0;
  width: 100% !important;
  max-width: var(--sl-login-card-width) !important;
  padding: var(--sl-space-sm) !important;
  border: 1px solid var(--sl-color-line) !important;
  border-radius: var(--sl-radius-md) !important;
  color: var(--sl-color-text) !important;
  background: var(--sl-color-surface) !important;
  box-shadow: var(--sl-shadow-card) !important;
}

.jx-login-page .jx-mobile-brand {
  display: none;
}

.jx-login-page .jx-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 !important;
  margin: 0 0 var(--sl-space-sm) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--sl-radius-sm) !important;
  background: var(--sl-color-surface) !important;
  overflow: hidden;
}

.jx-login-page .jx-auth-tabs a {
  min-height: var(--sl-space-lg) !important;
  display: grid;
  place-items: center;
  padding: 0 var(--sl-space-sm) !important;
  border: 1px solid var(--sl-color-line) !important;
  border-radius: var(--sl-radius-sm) !important;
  color: var(--sl-color-muted) !important;
  background: var(--sl-color-cream) !important;
  font-family: var(--sl-font-body) !important;
  font-size: var(--sl-size-body) !important;
  text-decoration: none;
  transition:
    color var(--sl-duration) var(--sl-easing),
    background-color var(--sl-duration) var(--sl-easing),
    border-color var(--sl-duration) var(--sl-easing),
    transform var(--sl-duration) var(--sl-easing);
}

.jx-login-page .jx-auth-tabs a[aria-current="page"] {
  border-color: var(--sl-color-forest) !important;
  color: var(--sl-color-earth) !important;
  background: var(--sl-color-cream) !important;
  box-shadow: none !important;
}

.jx-login-page .jx-auth-heading {
  display: grid;
  gap: var(--sl-space-sm);
}

.jx-login-page .jx-secure-state {
  min-height: 0 !important;
  gap: var(--sl-space-sm) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--sl-color-forest) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--sl-font-body) !important;
  font-size: var(--sl-size-small) !important;
}

.jx-login-page .jx-secure-state svg,
.jx-login-page .jx-input-shell > svg,
.jx-login-page .jx-password-toggle svg,
.jx-login-page .jx-submit-button svg,
.jx-login-page .jx-auth-switch-button svg,
.jx-login-page .jx-auth-note svg {
  width: var(--sl-size-h2) !important;
  height: var(--sl-size-h2) !important;
}

.jx-login-page .jx-auth-heading h2 {
  margin: 0 !important;
  color: var(--sl-color-text) !important;
  font-family: var(--sl-font-display) !important;
  font-size: var(--sl-size-h2) !important;
}

.jx-login-page .jx-auth-heading p {
  margin: 0 !important;
  color: var(--sl-color-muted) !important;
  font-size: var(--sl-size-small) !important;
}

.jx-login-page .jx-form-alert {
  gap: var(--sl-space-sm) !important;
  margin: var(--sl-space-sm) 0 0 !important;
  padding: var(--sl-space-sm) !important;
  border: 1px solid var(--sl-color-earth) !important;
  border-radius: var(--sl-radius-sm) !important;
  color: var(--sl-color-earth) !important;
  background: var(--sl-color-surface) !important;
  box-shadow: none !important;
  font-size: var(--sl-size-small) !important;
}

.jx-login-page .jx-login-form {
  min-width: 0;
  gap: var(--sl-space-sm) !important;
  margin-top: var(--sl-space-sm) !important;
}

.jx-login-page .jx-field-group {
  min-width: 0;
  gap: var(--sl-space-sm) !important;
}

.jx-login-page .jx-field-group label {
  color: var(--sl-color-text) !important;
  font-size: var(--sl-size-body) !important;
}

.jx-login-page .jx-input-shell {
  position: relative;
  min-width: 0;
}

.jx-login-page .jx-input-shell > svg {
  left: var(--sl-space-sm) !important;
  color: var(--sl-color-muted) !important;
}

.jx-login-page .jx-input-shell input {
  min-width: 0;
  width: 100%;
  min-height: var(--sl-space-lg) !important;
  padding: 0 var(--sl-space-lg) !important;
  border: 1px solid var(--sl-color-muted) !important;
  border-radius: var(--sl-radius-sm) !important;
  color: var(--sl-color-text) !important;
  background: var(--sl-color-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0;
  font-family: var(--sl-font-body) !important;
  font-size: var(--sl-size-body) !important;
  transition:
    color var(--sl-duration) var(--sl-easing),
    background-color var(--sl-duration) var(--sl-easing),
    border-color var(--sl-duration) var(--sl-easing),
    box-shadow var(--sl-duration) var(--sl-easing);
}

.jx-login-page .jx-input-shell input::placeholder {
  color: var(--sl-color-muted) !important;
  opacity: 1;
}

.jx-login-page .jx-input-shell input:focus,
.jx-login-page .jx-input-shell input[aria-invalid="true"] {
  border-color: var(--sl-color-forest) !important;
  outline: 1px solid var(--sl-color-forest) !important;
  outline-offset: 0;
  box-shadow: none !important;
}

.jx-login-page .jx-password-toggle {
  right: 0 !important;
  width: var(--sl-space-lg) !important;
  height: var(--sl-space-lg) !important;
  min-height: var(--sl-space-lg) !important;
  padding: 0 !important;
  border: 1px solid var(--sl-color-muted) !important;
  border-radius: var(--sl-radius-sm) !important;
  color: var(--sl-color-earth) !important;
  background: var(--sl-color-cream) !important;
  box-shadow: none !important;
  transition:
    color var(--sl-duration) var(--sl-easing),
    background-color var(--sl-duration) var(--sl-easing),
    border-color var(--sl-duration) var(--sl-easing),
    transform var(--sl-duration) var(--sl-easing);
}

.jx-login-page .jx-password-toggle[aria-pressed="true"] {
  border-color: var(--sl-color-forest) !important;
}

.jx-login-page .jx-field-error,
.jx-login-page .jx-field-help,
.jx-login-page .jx-form-status {
  min-height: 0 !important;
  margin: 0 !important;
  color: var(--sl-color-earth) !important;
  font-family: var(--sl-font-body) !important;
  font-size: var(--sl-size-small) !important;
}

.jx-login-page .jx-field-help {
  color: var(--sl-color-muted) !important;
}

.jx-login-page .jx-field-error:empty,
.jx-login-page .jx-form-status:empty {
  display: none;
}

.jx-login-page .jx-submit-button,
.jx-login-page .jx-auth-switch-button {
  width: 100%;
  min-height: var(--sl-space-lg) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sl-space-sm) !important;
  margin: 0 !important;
  padding: 0 var(--sl-space-md) !important;
  border-radius: var(--sl-radius-sm) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-family: var(--sl-font-body) !important;
  font-size: var(--sl-size-body) !important;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--sl-duration) var(--sl-easing),
    background-color var(--sl-duration) var(--sl-easing),
    border-color var(--sl-duration) var(--sl-easing),
    transform var(--sl-duration) var(--sl-easing);
}

.jx-login-page .jx-submit-button {
  border: 1px solid var(--sl-color-forest) !important;
  color: var(--sl-color-earth) !important;
  background: var(--sl-color-cream) !important;
  box-shadow: var(--sl-shadow-card) !important;
}

.jx-login-page .jx-auth-switch-button {
  border: 1px solid var(--sl-color-earth) !important;
  color: var(--sl-color-earth) !important;
  background: var(--sl-color-cream) !important;
}

.jx-login-page .jx-submit-button:disabled {
  border-color: var(--sl-color-muted) !important;
  color: var(--sl-color-muted) !important;
  background: var(--sl-color-surface) !important;
  opacity: 1;
}

.jx-login-page .jx-submit-button.is-loading:disabled {
  border-color: var(--sl-color-forest) !important;
  color: var(--sl-color-earth) !important;
  background: var(--sl-color-cream) !important;
  box-shadow: none !important;
}

.jx-login-page .jx-button-spinner {
  border-color: var(--sl-color-line) !important;
  border-top-color: var(--sl-color-earth) !important;
}

.jx-login-page .jx-auth-note {
  display: flex;
  align-items: center;
  gap: var(--sl-space-sm) !important;
  margin: var(--sl-space-sm) 0 0 !important;
  padding: var(--sl-space-sm) !important;
  border: 1px solid var(--sl-color-line) !important;
  border-radius: var(--sl-radius-sm) !important;
  color: var(--sl-color-muted) !important;
  background: var(--sl-color-surface) !important;
  font-size: var(--sl-size-small) !important;
}

.jx-login-page .jx-auth-note a {
  color: var(--sl-color-forest) !important;
}

.jx-login-page .jx-login-skip {
  top: var(--sl-space-sm) !important;
  left: var(--sl-space-sm) !important;
  padding: var(--sl-space-sm) !important;
  border-radius: var(--sl-radius-sm) !important;
  border: 1px solid var(--sl-color-forest) !important;
  color: var(--sl-color-earth) !important;
  background: var(--sl-color-cream) !important;
  transition: transform var(--sl-duration) var(--sl-easing);
}

.jx-login-page :focus-visible {
  outline: 1px solid var(--sl-color-forest) !important;
  outline-offset: 0;
}

@media (hover: hover) and (pointer: fine) {
  .jx-login-page .jx-auth-tabs a:not([aria-current="page"]):hover,
  .jx-login-page .jx-password-toggle:hover {
    border-color: var(--sl-color-earth) !important;
    color: var(--sl-color-earth) !important;
    background: var(--sl-color-cream) !important;
  }

  .jx-login-page .jx-submit-button:not(:disabled):hover {
    border-color: var(--sl-color-earth) !important;
    color: var(--sl-color-earth) !important;
    background: var(--sl-color-cream) !important;
  }

  .jx-login-page .jx-auth-switch-button:hover {
    border-color: var(--sl-color-forest) !important;
    color: var(--sl-color-forest) !important;
    background: var(--sl-color-cream) !important;
  }
}

.jx-login-page .jx-auth-tabs a:active,
.jx-login-page .jx-password-toggle:active,
.jx-login-page .jx-submit-button:not(:disabled):active,
.jx-login-page .jx-auth-switch-button:active {
  transform: scale(0.98);
}

@media (max-width: 900px) {
  .jx-login-page .jx-login-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .jx-login-page .jx-login-visual,
  .jx-login-page .jx-auth-pane {
    height: auto;
    min-height: 0;
  }

  .jx-login-page .jx-login-visual {
    min-height: calc(
      var(--sl-space-lg) +
      var(--sl-space-lg) +
      var(--sl-space-lg) +
      var(--sl-space-lg)
    ) !important;
  }

  .jx-login-page .jx-login-brand {
    top: var(--sl-space-sm) !important;
    left: var(--sl-space-sm) !important;
  }

  .jx-login-page .jx-login-copy {
    right: var(--sl-space-sm) !important;
    bottom: var(--sl-space-sm) !important;
    left: var(--sl-space-sm) !important;
  }

  .jx-login-page .jx-login-copy h1 {
    max-width: 18ch !important;
    font-size: var(--sl-size-h2) !important;
  }

  .jx-login-page .jx-login-copy p,
  .jx-login-page .jx-login-caption {
    display: none;
  }

  .jx-login-page .jx-auth-pane {
    min-height: calc(
      100dvh -
      var(--sl-space-sm) -
      var(--sl-space-sm) -
      var(--sl-space-sm) -
      var(--sl-space-sm) -
      var(--sl-space-lg) -
      var(--sl-space-lg) -
      var(--sl-space-lg) -
      var(--sl-space-lg)
    );
    padding: var(--sl-space-md) !important;
  }
}

@media (max-width: 520px) {
  .jx-login-page .jx-login-shell {
    gap: var(--sl-space-sm) !important;
    padding: var(--sl-space-sm) !important;
  }

  .jx-login-page .jx-login-visual {
    min-height: calc(
      var(--sl-space-lg) +
      var(--sl-space-lg) +
      var(--sl-space-lg)
    ) !important;
  }

  .jx-login-page .jx-login-brand span:last-child,
  .jx-login-page .jx-login-copy {
    display: none;
  }

  .jx-login-page .jx-login-brand {
    display: inline-flex !important;
  }

  .jx-login-page .jx-auth-pane {
    min-height: auto;
    padding: var(--sl-space-sm) !important;
  }

  .jx-login-page .jx-auth-content {
    max-width: 100% !important;
  }

  .jx-login-page .jx-mobile-brand {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jx-login-page *,
  .jx-login-page *::before,
  .jx-login-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }

  .jx-login-page .jx-login-particles {
    display: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .jx-login-page .jx-auth-pane,
  .jx-login-page .jx-auth-content,
  .jx-login-page .jx-auth-tabs,
  .jx-login-page .jx-auth-tabs a,
  .jx-login-page .jx-input-shell input,
  .jx-login-page .jx-password-toggle,
  .jx-login-page .jx-auth-switch-button,
  .jx-login-page .jx-form-alert,
  .jx-login-page .jx-auth-note {
    background: var(--sl-color-cream) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}