/*
 * Authentication-only presentation layer.
 * It deliberately scopes every rule to .jp-auth-page so dashboard menus,
 * records, and application forms keep their existing visual system.
 */

:root {
  --jp-auth-ink: #020617;
  --jp-auth-muted: #64748b;
  --jp-auth-line: #e6e9ef;
  --jp-auth-soft: #f6f7f9;
  --jp-auth-surface: #ffffff;
  --jp-auth-action: #af1f24;
  --jp-auth-action-strong: #92181c;
}

body.jp-auth-page,
body.jp-auth-page.dark-mode-active {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--jp-auth-ink) !important;
  background: var(--jp-auth-soft) !important;
  font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: normal;
}

body.jp-auth-page .appHeader {
  display: none !important;
}

body.jp-auth-page #appCapsule {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 !important;
  padding: 24px !important;
  background: var(--jp-auth-soft) !important;
  border-radius: 0 !important;
}

.jp-auth-shell {
  display: grid;
  width: 100%;
  min-height: calc(100vh - 48px);
  min-height: calc(100dvh - 48px);
  place-items: center;
}

.jp-auth-card {
  width: min(100%, 432px);
  padding: 30px;
  color: var(--jp-auth-ink);
  background: var(--jp-auth-surface);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 16px 42px rgba(2, 6, 23, .065);
}

.jp-auth-card--wide {
  width: min(100%, 548px);
}

.jp-auth-signup-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 548px);
  width: min(100%, 930px);
  align-items: stretch;
  gap: 14px;
}

.jp-auth-signup-folder {
  position: relative;
  display: flex;
  min-height: 100%;
  padding: 78px 34px 34px;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-end;
  color: #020617;
  background: linear-gradient(145deg, #f3cfd2 0%, #f7dfe1 55%, #e3e9f1 100%);
  clip-path: polygon(0 0, 42% 0, 50% 28px, 100% 28px, 100% 100%, 0 100%);
}

.jp-auth-signup-folder::after {
  position: absolute;
  right: -62px;
  top: 72px;
  width: 220px;
  height: 220px;
  content: "";
  border: 35px solid rgba(255,255,255,.28);
  border-radius: 50%;
}

.jp-auth-signup-folder > * { position: relative; z-index: 1; }
.jp-auth-signup-folder__eyebrow { color: #7c2028; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.jp-auth-signup-folder h2 { max-width: 8ch; margin: 8px 0 12px; font-size: 36px; font-weight: 900; letter-spacing: -.055em; line-height: 1.02; }
.jp-auth-signup-folder p { max-width: 32ch; margin: 0; color: #5f4a50; font-size: 13px; font-weight: 650; line-height: 1.55; }
.jp-auth-signup-folder__items { display: flex; gap: 7px; margin-top: 24px; flex-wrap: wrap; }
.jp-auth-signup-folder__items span { display: inline-flex; min-height: 30px; padding: 6px 9px; align-items: center; gap: 5px; color: #4f2830; background: rgba(255,255,255,.6); border-radius: 999px; font-size: 10px; font-weight: 800; }
.jp-auth-signup-folder__items ion-icon { font-size: 14px; }

@media (max-width: 860px) {
  .jp-auth-signup-layout { display: block; width: min(100%, 548px); }
  .jp-auth-signup-folder { display: none; }
}

.jp-auth-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  margin-bottom: 30px;
}

.jp-auth-brand__link {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: var(--jp-auth-ink) !important;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.035em;
  text-decoration: none !important;
}

.jp-auth-brand__mark {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #fff;
  background: var(--jp-auth-ink);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.07em;
}

.jp-auth-brand__link:hover,
.jp-auth-brand__link:focus-visible {
  color: var(--jp-auth-action) !important;
}

.jp-auth-kicker {
  margin: 0 0 7px;
  color: var(--jp-auth-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.jp-auth-title {
  margin: 0;
  color: var(--jp-auth-ink) !important;
  font-size: clamp(25px, 5vw, 30px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.08;
}

.jp-auth-intro {
  max-width: 34ch;
  margin: 9px 0 0;
  color: var(--jp-auth-muted) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.jp-auth-notice {
  margin: 22px 0 0;
  padding: 10px 12px;
  color: var(--jp-auth-ink);
  background: #f8fafc;
  border: 1px solid var(--jp-auth-line);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

.jp-auth-form,
.jp-auth-card .section,
.jp-auth-card .login-form {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

.jp-auth-fields {
  display: grid;
  gap: 15px;
  margin-top: 26px;
  text-align: left;
}

.jp-auth-page .form-group.boxed.jp-auth-field {
  margin: 0 !important;
  padding: 0 !important;
}

.jp-auth-label {
  display: block;
  margin: 0 0 7px;
  color: var(--jp-auth-ink) !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.jp-auth-page .jp-auth-field .input-wrapper {
  position: relative;
  height: 44px;
  min-height: 44px;
  background: transparent !important;
  border: 0 !important;
}

.jp-auth-page .jp-auth-field .form-control {
  width: 100%;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 42px 0 12px !important;
  color: var(--jp-auth-ink) !important;
  background: #fff !important;
  border: 1px solid var(--jp-auth-line) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: normal;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.jp-auth-page .jp-auth-field .form-control::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.jp-auth-page .jp-auth-field .form-control:focus {
  border-color: var(--jp-auth-action) !important;
  box-shadow: 0 0 0 3px rgba(175, 31, 36, .1) !important;
}

.jp-auth-page .jp-auth-field .clear-input {
  display: none !important;
}

.jp-auth-page .jp-auth-field .iti,
.jp-auth-page .jp-auth-field .iti input {
  width: 100%;
  height: 44px;
}

.jp-auth-page .jp-auth-field .iti input {
  padding-left: 48px !important;
}

.jp-auth-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  margin: 17px 0 0;
}

.jp-auth-link,
.jp-auth-footer a,
.jp-auth-legal a {
  color: var(--jp-auth-action) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.jp-auth-link {
  font-size: 12px;
}

.jp-auth-link:hover,
.jp-auth-link:focus-visible,
.jp-auth-footer a:hover,
.jp-auth-footer a:focus-visible,
.jp-auth-legal a:hover,
.jp-auth-legal a:focus-visible {
  color: var(--jp-auth-action-strong) !important;
  text-decoration: underline !important;
}

.jp-auth-password-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: var(--jp-auth-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}

.jp-auth-password-toggle input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--jp-auth-action);
}

.jp-auth-actions,
.jp-auth-page .form-button-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  width: auto !important;
  min-height: 44px !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  position: static !important;
  background: transparent !important;
}

.jp-auth-page .form-button-group.form-button-group-local-test {
  flex-direction: row !important;
  align-items: center !important;
}

.jp-auth-page .jp-auth-actions .btn,
.jp-auth-page .form-button-group .btn {
  display: inline-flex !important;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 126px;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.jp-auth-page .jp-auth-primary,
.jp-auth-page .form-button-group .jp-auth-primary {
  color: #fff !important;
  background: var(--jp-auth-action) !important;
  border: 1px solid var(--jp-auth-action) !important;
}

.jp-auth-page .jp-auth-primary:hover,
.jp-auth-page .jp-auth-primary:focus-visible {
  color: #fff !important;
  background: var(--jp-auth-action-strong) !important;
  border-color: var(--jp-auth-action-strong) !important;
}

.jp-auth-page .jp-auth-secondary {
  color: var(--jp-auth-ink) !important;
  background: #fff !important;
  border: 1px solid var(--jp-auth-line) !important;
}

.jp-auth-page .jp-auth-secondary:hover,
.jp-auth-page .jp-auth-secondary:focus-visible {
  color: var(--jp-auth-ink) !important;
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.jp-auth-footer {
  margin: 24px 0 0;
  padding-top: 20px;
  color: var(--jp-auth-muted);
  border-top: 1px solid var(--jp-auth-line);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.jp-auth-legal {
  margin: 18px 0 0;
  color: var(--jp-auth-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
}

@media (max-width: 600px) {
  body.jp-auth-page #appCapsule {
    padding: 16px !important;
  }

  .jp-auth-shell {
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
    align-items: start;
  }

  .jp-auth-card,
  .jp-auth-card--wide {
    width: 100%;
    margin: 0;
    padding: 25px 20px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(2, 6, 23, .055);
  }

  .jp-auth-signup-layout { display: block; width: 100%; }
  .jp-auth-signup-folder { display: none; }

  .jp-auth-brand {
    margin-bottom: 25px;
  }

  .jp-auth-fields {
    margin-top: 23px;
  }

  .jp-auth-actions,
  .jp-auth-page .form-button-group,
  .jp-auth-page .form-button-group.form-button-group-local-test {
    justify-content: stretch;
  }

  .jp-auth-page .jp-auth-actions .btn,
  .jp-auth-page .form-button-group .btn {
    flex: 1 1 100%;
    width: 100% !important;
  }
}

@media (min-width: 601px) {
  .jp-auth-card--signup .jp-auth-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 14px;
  }

  .jp-auth-card--signup .jp-auth-field--phone {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .jp-auth-card,
  .jp-auth-card--wide {
    padding: 19px 17px;
  }

  .jp-auth-meta {
    align-items: flex-start;
    flex-direction: column-reverse;
  }
}