/* ==========================================================================
   dissolveX HRMS — Centered Modal Card Login & Auth Stylesheet
   Single Viewport Screen Fit (No Vertical Scrollbar)
   Design System matching Landing Page & Request Demo (Contact Us)
   ========================================================================== */

:root {
  --auth-forest-primary: #0b2b20;
  --auth-forest-hover: #123d2f;
  --auth-emerald: #10b981;
  --auth-emerald-dark: #059669;
  --auth-emerald-deep: #065f46;
  --auth-mint-bg: #eaf6f0;
  --auth-mint-glow: rgba(16, 185, 129, 0.18);
  --auth-border-mint: rgba(16, 185, 129, 0.24);
  --auth-border-light: #e2e8f0;
  --auth-text-dark: #0f172a;
  --auth-text-headings: #0c2017;
  --auth-text-muted: #475569;
  --auth-text-subtle: #64748b;
  --auth-input-bg: #ffffff;
  --auth-input-border: #cbd5e1;
  --auth-font-heading: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --auth-font-body: 'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --auth-shadow-card: 0 18px 45px rgba(15, 57, 43, 0.08), 0 4px 14px rgba(15, 23, 42, 0.03);
}

/* Page baseline. These rules used to reach the auth pages from a copy of the
   landing stylesheets pasted into app.css, which also leaked onto every page
   of the app. They live here now so only the auth pages get them. The
   :where() keeps them at element specificity, as they were, so every rule
   below still wins. */
html {
  overflow-x: clip;
  background-color: var(--auth-mint-bg);
}

body {
  position: relative;
}

:where(.auth-page-body) h1,
:where(.auth-page-body) h2,
:where(.auth-page-body) h3,
:where(.auth-page-body) h4,
:where(.auth-page-body) h5,
:where(.auth-page-body) h6 {
  font-family: var(--auth-font-heading);
  letter-spacing: -0.025em;
}

:where(.auth-page-body input[type="checkbox"]) {
  margin: 0;
}

:where(.auth-page-body) [class*="-check-icon"] {
  width: 8px !important;
  height: 8px !important;
  background: #10b981 !important;
  color: transparent !important;
  font-size: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16) !important;
  flex-shrink: 0 !important;
  margin-top: 6px !important;
  display: inline-block !important;
  border: none !important;
}

/* Page Base & Viewport — Strict 100vh Single-Screen Fit */
body.auth-page-body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow-y: auto;
  background-color: var(--auth-mint-bg);
  background-image: radial-gradient(circle at 85% 65%, rgba(16, 185, 129, 0.12) 0%, transparent 60%), radial-gradient(circle at 50% 12%, rgba(16, 185, 129, 0.22) 0%, rgba(230, 247, 240, 0.75) 45%, #eaf6f0 85%);
  color: var(--auth-text-dark);
  font-family: var(--auth-font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.auth-viewport {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 12px 20px;
  box-sizing: border-box;
}

.auth-page-home-link {
  position: absolute;
  top: 8px;
  left: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(15, 57, 43, 0.16);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--auth-forest-primary);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(15, 57, 43, 0.04);
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.auth-page-home-link:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(16, 185, 129, 0.38);
  box-shadow: 0 5px 14px rgba(15, 57, 43, 0.09);
}

.auth-page-home-link:focus-visible {
  outline: 2px solid var(--auth-emerald-dark);
  outline-offset: 2px;
}

@media (max-width: 880px) {
  .auth-page-home-link {
    left: 14px;
  }
}

.auth-wrapper {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}

/* ==========================================================================
   CENTER MODAL CARD
   ========================================================================== */
.auth-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--auth-border-mint);
  border-radius: 20px;
  box-shadow: var(--auth-shadow-card);
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  overflow: hidden;
  box-sizing: border-box;
  align-items: stretch;
}

/* ==========================================================================
   LEFT COLUMN: Interactive Sign In Form Side
   ========================================================================== */
.auth-form-side {
  padding: 30px 40px 24px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #ffffff;
  box-sizing: border-box;
}

/* Corner Logo — Top Line Aligned with Showcase Window */
.auth-top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 16px 0;
  line-height: 1;
}

.auth-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.auth-brand-link:hover {
  opacity: 0.85;
}

.auth-brand-tagline {
  font-family: var(--auth-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: -10px 0 14px 0;
  line-height: 1;
}

.auth-header {
  margin-bottom: 16px;
}

.auth-header-title {
  font-family: var(--auth-font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--auth-text-headings);
  margin: 0 0 5px 0;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.auth-title-brand {
  color: var(--auth-emerald);
}

.auth-header-sub {
  color: var(--auth-text-subtle);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  max-width: 380px;
}

/* Form Panes */
.auth-form-pane {
  display: none;
  background: transparent;
}

.auth-form-pane.is-active {
  display: block;
}

/* Multi-Step Flow (Step 1: Email, Step 2: Password) */
#auth-login-form.auth-form-pane.is-active {
  display: grid;
}

#auth-login-form > .auth-step {
  grid-area: 1 / 1;
}

.auth-step {
  display: block;
  animation: paneFadeIn 0.2s ease both;
}

#auth-login-form > .auth-step.is-hidden {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  animation: none;
}

@keyframes paneFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* User Account Chip in Step 2 (Theme-aligned Emerald Pill) */
.auth-account-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.24);
  border-radius: 9999px;
  padding: 4px 12px 4px 6px;
  margin-bottom: 14px;
  max-width: 100%;
  box-sizing: border-box;
  gap: 8px;
}

.auth-account-info {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.auth-account-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--auth-forest-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-account-email {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--auth-forest-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.auth-account-change-btn {
  background: transparent;
  border: none;
  color: var(--auth-emerald-dark);
  font-family: var(--auth-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.auth-account-change-btn:hover {
  color: var(--auth-forest-primary);
  text-decoration: underline;
}

/* Feedback & Messages */
.auth-feedback-box {
  margin-bottom: 12px;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.auth-feedback-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.auth-feedback-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}

.auth-feedback-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}

/* Form Fields */
.auth-field {
  margin-bottom: 12px;
}

.auth-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.auth-label {
  display: block;
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 700;
  margin-bottom: 6px;
  font-family: var(--auth-font-body);
}

.auth-field-row .auth-label {
  margin-bottom: 0;
}

.auth-forgot-link {
  color: var(--auth-emerald-dark);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth-forgot-link:hover {
  color: var(--auth-forest-primary);
  text-decoration: underline;
}

.auth-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.auth-input-lead-icon {
  position: absolute;
  left: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  transition: color 0.2s ease;
}

.auth-input {
  width: 100%;
  height: 44px;
  font-family: var(--auth-font-body);
  font-size: 0.9rem;
  color: #0f172a;
  background: var(--auth-input-bg);
  border: 1.5px solid var(--auth-input-border);
  border-radius: 8px;
  padding: 0 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.auth-input.auth-input-with-icon {
  padding-left: 40px;
}

.auth-input.auth-input-with-toggle {
  padding-right: 42px;
}

.auth-input:hover {
  border-color: #94a3b8;
}

.auth-input:focus {
  background: #ffffff;
  border-color: var(--auth-emerald);
  box-shadow: 0 0 0 3px var(--auth-mint-glow);
}

.auth-input.has-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.auth-input::placeholder {
  color: #8c9ba5;
  font-size: 0.86rem;
}

.auth-input-btn-toggle {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.auth-input-btn-toggle:hover {
  color: var(--auth-forest-primary);
}

/* Submit Action Button */
.auth-submit-btn {
  width: 100%;
  height: 44px;
  background: var(--auth-forest-primary);
  color: #ffffff;
  font-family: var(--auth-font-heading);
  font-size: 0.94rem;
  font-weight: 700;
  padding: 0 20px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(11, 43, 32, 0.22);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-submit-btn:hover {
  background: var(--auth-forest-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(11, 43, 32, 0.28);
}

.auth-submit-btn:active {
  transform: translateY(0);
}

.auth-submit-btn.is-loading {
  opacity: 0.88;
  pointer-events: none;
  cursor: wait;
}

/* Sign Up Divider with Lines */
.auth-signup-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 16px 0 12px 0;
}

.auth-divider-line {
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.auth-divider-content {
  font-size: 0.84rem;
  color: var(--auth-text-muted);
  white-space: nowrap;
}

.auth-switch-link {
  color: var(--auth-emerald);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.auth-switch-link:hover {
  color: var(--auth-forest-primary);
  text-decoration: underline;
}

/* Bottom Left Sprout Doodle */
.auth-brand-doodle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.auth-doodle-sprout {
  flex-shrink: 0;
}

.auth-doodle-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  transform: rotate(-5deg);
}

.auth-doodle-line1,
.auth-doodle-line2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 0.84rem;
  color: #059669;
  line-height: 1.15;
}

.auth-doodle-curve {
  margin-top: 1px;
}

/* ==========================================================================
   RIGHT COLUMN: Product Showcase Side (Clean Light Card)
   Top-aligned with Left Side Logo, Static Card (No Hover Motion)
   ========================================================================== */
.auth-showcase-side {
  background: linear-gradient(180deg, #fbfdfc 0%, #f0f8f3 100%);
  border-left: 1px solid #eef5f1;
  padding: 30px 34px 24px 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}

.auth-showcase-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0;
}

/* Stationary showcase mockup box — Upper line matches logo height */
.auth-showcase-window {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(15, 57, 43, 0.08);
  margin: 0 0 14px 0;
  box-sizing: border-box;
}

.auth-mockup-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 5px 6px 5px;
}

.auth-mockup-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.auth-mockup-dot.auth-dot-red {
  background: #ff5f56;
}

.auth-mockup-dot.auth-dot-yellow {
  background: #ffbd2e;
}

.auth-mockup-dot.auth-dot-green {
  background: #27c93f;
}

.auth-showcase-img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  object-position: top;
  display: block;
}

.auth-showcase-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-showcase-title {
  font-family: var(--auth-font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--auth-text-headings);
  margin: 0 0 4px 0;
  letter-spacing: -0.015em;
}

.auth-showcase-desc {
  color: #5a6a85;
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0 0 14px 0;
  max-width: 340px;
}

/* Feature bullet checkpoints */
.auth-features-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 330px;
  margin-bottom: 4px;
  text-align: left;
}

.auth-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
}

.auth-check-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.14);
  color: var(--auth-emerald-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.auth-check-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2px;
}

.auth-feature-heading {
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 700;
}

/* ==========================================================================
   PASSWORD RESET PAGE STYLES (Single Screen Fit)
   ========================================================================== */
.reset-card {
  grid-template-columns: 1.05fr 1fr;
}

.reset-showcase-side {
  background: #ffffff;
  padding: 30px 38px 24px 38px;
}

.reset-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 9999px;
  padding: 3px 10px;
  color: #065f46;
  font-size: 0.74rem;
  font-weight: 700;
  margin-bottom: 10px;
  width: fit-content;
}

.reset-badge svg {
  color: #059669;
}

.reset-hero-title {
  font-family: var(--auth-font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  color: #0c2017;
  line-height: 1.15;
  margin: 0 0 5px 0;
  letter-spacing: -0.025em;
}

.reset-hero-highlight {
  color: var(--auth-emerald);
}

.reset-hero-sub {
  color: var(--auth-text-subtle);
  font-size: 0.84rem;
  line-height: 1.4;
  margin: 0 0 10px 0;
  max-width: 350px;
}

.reset-illustration-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0 12px 0;
}

.reset-illustration-svg {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}

.reset-trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.reset-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.reset-trust-icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reset-trust-icon svg {
  width: 13px;
  height: 13px;
}

.reset-trust-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.reset-trust-title {
  font-family: var(--auth-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: #0c2017;
}

.reset-trust-desc {
  font-size: 0.68rem;
  color: #64748b;
  line-height: 1.2;
}

/* Right Form Side */
.reset-form-side {
  background: #ffffff;
  border-left: 1px solid #f1f5f9;
  padding: 24px 38px 24px 38px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
}

.reset-top-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

.reset-top-back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0b2b20;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.reset-top-back-link:hover {
  color: var(--auth-emerald);
  transform: translateX(-2px);
}

.reset-form-container {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reset-mail-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.reset-mail-badge svg {
  width: 20px;
  height: 20px;
}

.reset-form-title {
  font-family: var(--auth-font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: #0c2017;
  margin: 0 0 4px 0;
  text-align: center;
  letter-spacing: -0.02em;
}

.reset-form-sub {
  color: #64748b;
  font-size: 0.84rem;
  margin: 0 0 16px 0;
  text-align: center;
}

.reset-form {
  width: 100%;
}

.reset-help-text {
  color: #64748b;
  font-size: 0.78rem;
  margin: 6px 0 0 0;
  line-height: 1.35;
}

.reset-submit-btn {
  margin-top: 14px;
}

.reset-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  width: 100%;
}

.reset-divider-line {
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.reset-divider-text {
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.reset-bottom-action {
  text-align: center;
  width: 100%;
}

.reset-bottom-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--auth-emerald-dark);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
}

.reset-bottom-link:hover {
  color: var(--auth-forest-primary);
  transform: translateX(-2px);
}

.reset-message-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 6px;
}

/* ==========================================================================
   FOOTER (Below Card Copyright & Legal Links)
   ========================================================================== */
.auth-footer {
  text-align: center;
  color: var(--auth-text-subtle);
  font-size: 0.74rem;
  width: 100%;
}

.auth-footer-copy {
  margin: 0 0 3px 0;
  color: var(--auth-text-subtle);
}

.auth-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.auth-footer-link {
  color: var(--auth-emerald-dark);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.auth-footer-link:hover {
  color: var(--auth-forest-primary);
  text-decoration: underline;
}

/* ==========================================================================
   SIGN UP PAGE STYLES (Mockup Match)
   ========================================================================== */
.auth-brand-highlight {
  color: var(--auth-emerald);
}

.auth-field-group {
  display: flex;
  flex-direction: column;
}

.auth-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--auth-text-dark);
  margin-bottom: 4px;
}

.auth-heading {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--auth-forest-primary);
  line-height: 1.25;
}

.auth-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-text-subtle);
  pointer-events: none;
}

.auth-optional-tag {
  font-weight: 400;
  color: var(--auth-text-subtle);
  font-size: 0.74rem;
}

.auth-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: var(--auth-text-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.auth-pw-toggle:hover {
  color: var(--auth-forest-primary);
}

.auth-required-star {
  color: #ef4444;
  font-weight: 700;
}

.auth-subtitle {
  font-size: 0.85rem;
  color: var(--auth-text-subtle);
}

.auth-tagline {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--auth-emerald-dark);
}

.eye-icon {
  display: block;
}

.eye-open {
  display: block;
}

.eye-closed {
  display: none;
}

.signup-wrapper {
  max-width: 1040px;
}

.signup-card {
  grid-template-columns: 1.15fr 1fr;
}

.signup-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.signup-form-side {
  padding: 24px 34px 18px 34px;
}

.signup-top-bar {
  margin: 0 0 2px 0;
}

.signup-tagline {
  margin: 0 0 8px 0;
}

.signup-heading {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 3px 0;
}

.signup-subtitle {
  font-size: 0.82rem;
  color: var(--auth-text-subtle);
  margin: 0 0 14px 0;
}

.signup-showcase-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}


.signup-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 9px;
}

.signup-password-group {
  margin-bottom: 9px;
}

/* ==========================================================================
   PASSWORD STRENGTH METER — compact so it fits the single-screen card
   ========================================================================== */
.pw-strength-meter {
  display: none;
  flex-direction: column;
  gap: 3px;
  margin-top: var(--s-4, 0.25rem);
}

.pw-strength-meter.is-visible { display: flex; }

.pw-strength-track {
  height: 3px;
  border-radius: 9999px;
  background: #e2e8f0;
  overflow: hidden;
}

.pw-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 9999px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.pw-strength-fill.pw-level-weak   { background: #ef4444; }
.pw-strength-fill.pw-level-fair   { background: #f59e0b; }
.pw-strength-fill.pw-level-good   { background: #10b981; }
.pw-strength-fill.pw-level-strong { background: #059669; }

.pw-strength-label {
  font-family: var(--auth-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: right;
  line-height: 1;
}

.pw-strength-label.pw-level-weak   { color: #ef4444; }
.pw-strength-label.pw-level-fair   { color: #d97706; }
.pw-strength-label.pw-level-good   { color: #059669; }
.pw-strength-label.pw-level-strong { color: #047857; }

.pw-strength-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 8px;
}

.pw-rule {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--auth-text-subtle, #64748b);
  line-height: 1.4;
  transition: color 0.15s ease;
}

.pw-rule-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  transition: background-color 0.2s ease;
}

.pw-rule-icon::after {
  content: "";
  display: block;
}

.pw-rule.is-pass .pw-rule-icon { background: #059669; }
.pw-rule.is-pass .pw-rule-icon::after {
  width: 3px; height: 6px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); margin-top: -1px;
}
.pw-rule.is-fail .pw-rule-icon { background: #fca5a5; }
.pw-rule.is-fail .pw-rule-icon::after {
  width: 5px; height: 1.5px; background: #b91c1c; border-radius: 1px;
}
.pw-rule.is-pass { color: #059669; }
.pw-rule.is-fail { color: #b91c1c; }

.signup-terms-row {
  margin: 4px 0 12px 0;
}

.signup-terms-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.signup-checkbox {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--auth-emerald);
  cursor: pointer;
}

.signup-terms-text {
  font-size: 0.78rem;
  line-height: 1.35;
  color: #475569;
}

.signup-legal-link {
  color: var(--auth-emerald);
  font-weight: 600;
  text-decoration: none;
}

.signup-legal-link:hover {
  text-decoration: underline;
  color: var(--auth-emerald-dark);
}

.signup-submit-btn {
  height: 42px;
  margin-top: 2px;
}

.signup-divider {
  margin: 10px 0 10px 0;
}

.signup-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.signup-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--auth-font-body);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.signup-social-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.signup-bottom-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}

.signup-signin-link {
  color: var(--auth-emerald);
  font-weight: 700;
  text-decoration: none;
}

.signup-signin-link:hover {
  text-decoration: underline;
}

/* Right Showcase Side */
.signup-showcase-side {
  padding: 24px 28px 18px 28px;
  background: #fdfefe;
  border-left: 1px solid rgba(16, 185, 129, 0.14);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.signup-showcase-tag {
  color: var(--auth-emerald);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.signup-showcase-heading {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--auth-forest-primary);
  line-height: 1.25;
  margin: 0 0 6px 0;
}

.signup-brand-highlight {
  color: var(--auth-emerald);
}

.signup-showcase-desc {
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.4;
  margin: 0 0 10px 0;
}

/* Showcase Window */
.signup-showcase-window {
  margin: 2px 0 10px 0;
  max-width: 440px;
  box-sizing: border-box;
}

.signup-mockup-wrapper {
  position: relative;
  margin: 2px 0 8px 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.signup-mockup-img {
  width: 100%;
  max-width: 440px;
  height: auto;
  max-height: 235px;
  object-fit: contain;
  display: block;
}

.signup-window-frame {
  width: 100%;
  max-width: 360px;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
  background: #ffffff;
  overflow: hidden;
}

.signup-showcase-img {
  width: 100%;
  max-height: 195px;
  object-fit: cover;
  object-position: top;
  display: block;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
}

.signup-float-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(16, 185, 129, 0.22);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  z-index: 2;
  pointer-events: none;
}

.badge-emp-mgmt {
  top: -2px;
  left: -6px;
}

.badge-attendance {
  top: -6px;
  right: -4px;
}

.badge-payroll {
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
}

.badge-security {
  bottom: -2px;
  right: -2px;
}

.signup-badge-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-emerald {
  background: #d1fae5;
  color: #059669;
}

.icon-teal {
  background: #ccfbf1;
  color: #0d9488;
}

.icon-forest {
  background: #eaf6f0;
  color: #065f46;
}

.signup-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.signup-badge-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f172a;
}

.signup-badge-sub {
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 500;
}

/* Feature checkmarks bottom row */
.signup-features-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

.signup-feature-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #334155;
  font-weight: 600;
  line-height: 1.25;
}

.signup-check-bullet {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--auth-emerald);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 880px) {
  .auth-card {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  .auth-showcase-side {
    display: none;
  }

  .auth-form-side {
    padding: 30px 24px;
  }

  .reset-card {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  .reset-showcase-side {
    display: none;
  }

  .reset-form-side {
    padding: 28px 22px;
    border-left: none;
  }

  .signup-card {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .signup-showcase-side {
    display: none;
  }

  .signup-form-side {
    padding: 28px 20px;
  }

  .signup-grid-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .signup-social-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 580px),
(max-width: 880px) {
  body.auth-page-body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }

  .auth-viewport {
    height: auto;
    min-height: 100vh;
    padding: 20px 14px 16px 14px;
  }

  .auth-form-side {
    padding: 24px 18px;
  }

  .reset-form-side {
    padding: 22px 16px;
  }

  .signup-form-side {
    padding: 20px 16px;
  }
}
/* ==========================================================================
   GLASS SURFACE & PAGE TRANSITIONS
   Sign In, Sign Up and Forgot Password share this card. It is a translucent
   material over a lightly coloured backdrop, and moving between the pages
   morphs the one card into the next instead of reloading a new one.
   ========================================================================== */

/* Glass only reads as glass when there is colour behind it to blur, so the
   backdrop gains three soft, static pools of the brand greens. Nothing here
   moves: a slow looping background is exactly what reduced motion asks us
   to avoid, and the card is where the eye should be. */
body.auth-page-body {
  background-image:
    radial-gradient(34rem 26rem at 14% 22%, rgba(16, 185, 129, 0.26) 0%, transparent 70%),
    radial-gradient(30rem 24rem at 86% 80%, rgba(13, 148, 136, 0.20) 0%, transparent 70%),
    radial-gradient(22rem 18rem at 70% 10%, rgba(52, 211, 153, 0.18) 0%, transparent 70%),
    radial-gradient(circle at 50% 12%, rgba(16, 185, 129, 0.22) 0%, rgba(230, 247, 240, 0.75) 45%, #eaf6f0 85%);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .auth-card {
    background: rgba(255, 255, 255, 0.56);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
    /* A bright top edge is light catching the material; the soft outer
       shadow lifts the card off the backdrop without a hard outline. */
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 24px 60px rgba(15, 57, 43, 0.12),
      0 4px 14px rgba(15, 23, 42, 0.04);
  }

  /* The panels inside were opaque white, which hid the material entirely.
     They stay a little denser than the card so the form keeps its contrast. */
  .auth-form-side,
  .reset-showcase-side,
  .reset-form-side {
    background: rgba(255, 255, 255, 0.52);
  }

  .auth-showcase-side,
  .signup-showcase-side {
    background: linear-gradient(180deg, rgba(251, 253, 252, 0.34) 0%, rgba(236, 248, 241, 0.46) 100%);
    border-left-color: rgba(255, 255, 255, 0.6);
  }
}

/* People who ask for less transparency get the solid card back. */
@media (prefers-reduced-transparency: reduce) {
  .auth-card {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--auth-border-mint);
  }

  .auth-form-side,
  .reset-showcase-side,
  .reset-form-side {
    background: #ffffff;
  }

  .auth-showcase-side {
    background: linear-gradient(180deg, #fbfdfc 0%, #f0f8f3 100%);
  }

  .signup-showcase-side {
    background: #fdfefe;
  }
}

@media (prefers-contrast: more) {
  .auth-card {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: #0f172a;
  }

  .auth-form-side,
  .reset-showcase-side,
  .reset-form-side,
  .auth-showcase-side,
  .signup-showcase-side {
    background: #ffffff;
  }
}

/* Fade complete pages in sequence so no two auth cards or Home links overlap. */
@view-transition {
  navigation: auto;
}

::view-transition {
  background: var(--auth-mint-bg);
}

::view-transition-old(root) {
  animation: auth-page-out 100ms ease-in both;
}

::view-transition-new(root) {
  animation: auth-page-in 160ms ease-out 100ms both;
}

@keyframes auth-page-out {
  to { opacity: 0; }
}

@keyframes auth-page-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }

  .auth-step {
    animation: none;
  }
}

/* ==========================================================================
   CLIENT-SIDE FIELD CHECKS
   Checks made in the browser before the form is sent use the same error box
   as the server's messages, hidden until they have something to say.
   ========================================================================== */
.auth-client-error {
  display: none;
  margin-top: 6px;
  padding: 6px 10px;
}

.auth-client-error.is-visible {
  display: flex;
}

.auth-submit-btn:disabled {
  cursor: progress;
}

/* Sign-up's field errors are the compact size the server's use. */
.signup-client-error {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 0.76rem;
}

/* With its link gone, the top row keeps the height the link gave it (one line
   of 0.82rem text), so nothing below it moves. */
.reset-top-action:empty {
  min-height: calc(0.82rem * 1.5);
}

/* Browser autofill paints its own grey-blue fill over saved credentials. An
   inset shadow is the only thing that covers it, so the field keeps the
   white of the design; the focus and error rings are layered on top. */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover {
  -webkit-text-fill-color: #0f172a;
  caret-color: #0f172a;
  -webkit-box-shadow: 0 0 0 1000px var(--auth-input-bg) inset;
  box-shadow: 0 0 0 1000px var(--auth-input-bg) inset;
  transition: background-color 9999s ease-out 0s;
}

.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px var(--auth-mint-glow);
  box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px var(--auth-mint-glow);
}

.auth-input.has-error:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--auth-input-bg) inset, 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
  box-shadow: 0 0 0 1000px var(--auth-input-bg) inset, 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}


/* ==========================================================================
   A LIGHT DESIGN, WHATEVER THE DEVICE PREFERS
   These pages are drawn light. The portal's own stylesheet is loaded on them
   too, and on a device set to dark it paints headings a pale colour — which
   left "Start your free trial" almost invisible on white. Declaring the
   colour scheme keeps the browser's own widgets light as well.
   ========================================================================== */
body.auth-page-body {
  color-scheme: light;
}
body.auth-page-body .signup-heading,
body.auth-page-body .signup-showcase-heading,
body.auth-page-body .auth-heading,
body.auth-page-body .reset-form-title {
  color: var(--auth-text-headings);
}

/* ==========================================================================
   BUYING A PLAN: the running total, the summary before paying, and what the
   plan includes. Colours are spelled out here rather than borrowed from the
   portal's tables and lists, which turn dark on a device set to dark.
   ========================================================================== */
.buy-total {
  margin: 4px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f0faf5;
  border: 1px solid rgba(16, 185, 129, 0.22);
  color: var(--auth-text-headings);
  font-size: 0.9rem;
  font-weight: 700;
}
.buy-total.is-over-limit {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
  font-weight: 500;
}

.buy-summary {
  margin: 0 0 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}
.buy-summary > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 14px;
  border-bottom: 1px solid #eef2f6;
}
.buy-summary > div:last-child { border-bottom: 0; }
.buy-summary dt {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.buy-summary dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--auth-text-headings);
  overflow-wrap: anywhere;
}
.buy-summary .buy-summary-total { background: #f0faf5; }
.buy-summary .buy-summary-total dd {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--auth-forest-primary);
}

.buy-includes { width: 100%; }
.buy-features {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.buy-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #eef5f1;
  font-size: 0.88rem;
  color: var(--auth-text-headings);
  text-align: left;
}
.buy-features li:last-child { border-bottom: 0; }
.buy-features li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--auth-emerald)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

.buy-pay-note {
  margin: 14px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #64748b;
  text-align: center;
}

/* What went wrong with a payment, on the page instead of in a pop-up. */
.pay-message {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 0.85rem;
  line-height: 1.45;
}

/* The buy and pay cards are a fixed width, not the width of their text: the
   "more than can be paid online" note used to push the whole card wider as
   it appeared. The columns may shrink below their content, and long words
   wrap instead of widening them. */
.signup-wrapper { width: 100%; }
.signup-card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.buy-total { overflow-wrap: anywhere; }

/* When billing starts and when the next bill falls, under the total. */
.buy-dates { margin: -6px 0 14px; font-size: 0.78rem; color: #64748b; }

/* "Resend the link" on the sign-in page. */
.auth-resend { margin-top: 10px; text-align: center; }
.auth-resend button { background: none; border: 0; cursor: pointer; font: inherit; }