/* ==========================================================================
   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 {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 12px 20px;
  box-sizing: border-box;
}

.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-logo {
  height: 26px;
  width: auto;
  display: block;
}

.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-step {
  display: block;
  animation: paneFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-step.is-hidden {
  display: none !important;
}

@keyframes paneFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 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;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0);
}

.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: flex-end;
  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;
  }
}

/* --- Moving between the auth pages -------------------------------------- */

/* A cross-document view transition: following a link between two of these
   pages keeps the card on screen and reshapes it into the next one. Browsers
   without support simply load the next page, so nothing depends on it. */
@view-transition {
  navigation: auto;
}

.auth-card {
  view-transition-name: auth-card;
}

.auth-footer {
  view-transition-name: auth-footer;
}

/* The card's frame travels to its new size and position on the drawer
   curve: it leaves quickly and settles with almost no tail. */
::view-transition-group(auth-card) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* The two pages have different layouts, so the snapshots fill the moving
   frame from the top rather than being stretched to fit it. */
::view-transition-old(auth-card),
::view-transition-new(auth-card) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* The outgoing content clears first and the incoming content resolves from
   a soft blur as the frame arrives, so the two never read as overlapping. */
::view-transition-old(auth-card) {
  animation: auth-content-out 160ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(auth-card) {
  animation: auth-content-in 300ms cubic-bezier(0.23, 1, 0.32, 1) 90ms both;
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(auth-footer) {
  animation-duration: 240ms;
}

@keyframes auth-content-out {
  to {
    opacity: 0;
    filter: blur(6px);
  }
}

@keyframes auth-content-in {
  from {
    opacity: 0;
    filter: blur(8px);
  }
}

/* Where the page cannot morph, the card still arrives instead of appearing:
   a short rise and fade, once, on load. */
@supports not selector(:active-view-transition) {
  .auth-card {
    animation: auth-card-in 380ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }
}

@keyframes auth-card-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
}

/* Reduced motion keeps the change legible without anything travelling: the
   pages cross-fade in place and the card no longer rises. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(auth-card),
  ::view-transition-group(auth-footer) {
    animation-duration: 1ms;
  }

  ::view-transition-old(auth-card) {
    animation: auth-fade-out 180ms ease both;
  }

  ::view-transition-new(auth-card) {
    animation: auth-fade-in 180ms ease both;
  }

  .auth-card,
  .auth-step {
    animation: none;
  }
}

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

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

/* ==========================================================================
   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;
}

/* "Back to Home" sits at the far end of the logo row on Sign In and Sign Up,
   in the same style as "Back to Sign In" on the reset pages. The vertical
   padding gives it a finger-sized target without moving the row. */
.auth-home-link {
  margin: -10px 0 -10px auto;
  padding: 10px 0;
}

/* 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 .auth-heading,
body.auth-page-body .reset-form-title {
  color: var(--auth-text-headings);
}