/* ========== Login – split panel (PersonaX) ========== */
html:has(.login-page-payroll.login-split),
html:has(.login-page-payroll.login-split) body {
  min-height: 100%;
  background-color: #0f0f0f;
}

/* Theme sets body { height: 100% }; allow document to grow when login content is taller than the viewport (zoom). */
html:has(.login-page-payroll.login-split) body {
  height: auto;
  min-height: 100%;
  min-height: 100dvh;
  min-height: calc((var(--vh, 1vh) * 100));
}

html:has(.login-page-payroll.login-split) {
  height: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Background: Sean Pollock — https://unsplash.com/photos/PhYq704ffdA */
.login-page-payroll.login-split::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #0f0f0f;
  background-image: linear-gradient(
      rgba(10, 12, 18, 0.82),
      rgba(10, 12, 18, 0.72)
    ),
    url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=max&w=3840&q=88");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  pointer-events: none;
}

@supports (background-image: image-set(url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&w=64&q=70") 1x)) {
  .login-page-payroll.login-split::before {
    background-image: linear-gradient(
        rgba(10, 12, 18, 0.82),
        rgba(10, 12, 18, 0.72)
      ),
      image-set(
        url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=max&w=1920&q=82") 1x,
        url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=max&w=3840&q=88") 2x
      );
  }
}

.login-page-payroll.login-split {
  /* CSS named color darkblue = #00008B */
  --login-primary: darkblue;
  --login-primary-hover: #0000b0;
  --login-primary-soft: rgba(0, 0, 139, 0.12);
  --login-primary-ring: rgba(0, 0, 139, 0.28);
  box-sizing: border-box;
  /* One scroll context; grid with 1fr rows vertically centers card + footer when they fit the viewport. */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: calc((var(--vh, 1vh) * 100));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
  justify-items: center;
  align-content: stretch;
  position: relative;
  z-index: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: clamp(1rem, 4vmin, 2.25rem) clamp(0.75rem, 2vw, 1rem);
  padding-top: max(clamp(1rem, 4vmin, 2.25rem), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(1rem, 4vmin, 2.25rem), env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.login-page-payroll.login-split .login-payroll-bg,
.login-page-payroll.login-split .login-payroll-overlay {
  display: none;
}

.login-split-outer {
  grid-row: 2;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(1000px, 96vw);
  margin-inline: auto;
}

.login-split-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: clamp(12px, 2.2vw, 20px);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  /* Natural height only — do not cap with max-height + inner scroll (breaks browser zoom). */
  background: #ffffff;
}

/* Forgot page: make shell about 5% taller than login on desktop. */
.login-page-payroll.login-split.login-split-forgot-page .login-split-shell {
  min-height: clamp(409.5px, 51.975vh, 488.25px);
}

/* Reset page: same size treatment as Forgot page. */
.login-page-payroll.login-split.login-split-reset-page .login-split-shell {
  min-height: clamp(409.5px, 51.975vh, 488.25px);
}

.login-split-aside {
  background: linear-gradient(165deg, #020038 0%, #000055 42%, #00008b 100%);
  color: #fff;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 3.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  text-align: left;
}

.login-split-brand-mark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: auto;
}

.login-split-brand-badge {
  width: clamp(2.1rem, 4vw, 2.5rem);
  height: clamp(2.1rem, 4vw, 2.5rem);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.login-split-brand-logo {
  display: block;
  height: clamp(1.6rem, 3.5vw + 0.7rem, 2.6rem);
  width: auto;
  max-width: min(220px, 42vw);
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.login-split-brand-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 0 2rem;
}

.login-split-brand-title {
  font-size: clamp(1.45rem, 3.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: #fff;
}

.login-split-brand-desc {
  margin: 0;
  font-size: clamp(0.875rem, 1.6vw, 0.98rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 22rem;
}

.login-split-dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 1.25rem;
}

.login-split-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.2s ease, width 0.2s ease;
}

.login-split-dots span.is-active {
  width: 1.75rem;
  background: #fff;
}

.login-split-panel {
  background: #ffffff;
  color: #1e293b;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 3.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid #e2e8f0;
}

.login-split-panel-head {
  margin-bottom: 0.25rem;
}

.login-split-panel-title {
  font-size: clamp(1.35rem, 2.5vw, 1.6rem);
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

.login-split-panel-sub {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: #64748b;
}

.login-split-form {
  margin-top: 0.25rem;
}

.login-split-panel .form-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #191c22;
  margin-bottom: 0.35rem;
}

.login-split-panel .form-control {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 8px !important;
  padding: clamp(0.45rem, 1.2vw, 0.6rem) clamp(0.65rem, 1.8vw, 0.85rem);
  font-size: clamp(0.8125rem, 0.28vw + 0.78rem, 0.9375rem);
}

.login-split-panel .form-control::placeholder {
  color: #94a3b8;
}

.login-split-panel .form-control:focus {
  border-color: var(--login-primary) !important;
  box-shadow: 0 0 0 3px var(--login-primary-ring) !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.login-split-panel .input-group .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.login-split-panel .input-group-text {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-left: none !important;
  color: #64748b !important;
  border-radius: 0 8px 8px 0 !important;
}

.login-split-panel .input-group-text svg,
.login-split-panel .input-group-text .feather {
  stroke: #64748b;
}

.login-split-forgot {
  font-size: 0.8125rem;
  color: var(--login-primary) !important;
  text-decoration: none;
}

.login-split-forgot:hover {
  color: var(--login-primary-hover) !important;
  text-decoration: underline;
}

.login-split-panel .form-check {
  padding-left: 1.5rem;
}

.login-split-panel .form-check-input {
  background-color: #ffffff;
  border-color: #cbd5e1;
}

.login-split-panel .form-check-input:checked {
  background-color: var(--login-primary);
  border-color: var(--login-primary);
}

.login-split-panel .form-check-label {
  font-size: 0.85rem;
  color: #191c22;
}

.login-split-submit {
  margin-top: 0.25rem;
  padding: clamp(0.55rem, 1.2vw, 0.7rem) clamp(0.85rem, 2vw, 1rem) !important;
  font-weight: 500 !important;
  font-size: clamp(0.8125rem, 0.28vw + 0.78rem, 0.9375rem) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  background-color: var(--login-primary) !important;
  border: 1px solid var(--login-primary) !important;
}

.login-split-submit:hover:not(:disabled) {
  background-color: var(--login-primary-hover) !important;
  border-color: var(--login-primary-hover) !important;
  color: #ffffff !important;
}

.login-split-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.login-split-panel .alert {
  border-radius: 8px;
  font-size: 0.85rem;
}

.login-split-panel .demo-spacing-0 {
  margin-bottom: 0.75rem;
}

.login-split-panel .alert-danger,
.login-split-panel .alert-validation-msg {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.login-split-panel .alert-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.login-page-payroll.login-split .login-payroll-footer {
  grid-row: 3;
  position: relative;
  z-index: 1;
  margin-top: 0.75rem;
  margin-bottom: 0;
  padding-top: 0.35rem;
  width: 100%;
  max-width: min(1000px, 96vw);
}

.login-page-payroll.login-split .login-payroll-copyright {
  color: #6b7280;
  font-size: 0.78rem;
}

@media (max-width: 960px) {
  .login-page-payroll.login-split.login-split-forgot-page .login-split-shell {
    min-height: auto;
  }
  .login-page-payroll.login-split.login-split-reset-page .login-split-shell {
    min-height: auto;
  }

  .login-split-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .login-split-aside {
    order: 1;
    padding-bottom: 1.5rem;
  }

  .login-split-brand-body {
    padding: 1rem 0 1.25rem;
  }

  .login-split-dots {
    margin-top: 0;
    padding-top: 0.5rem;
  }

  .login-split-panel {
    order: 2;
    padding-top: 0.5rem;
    border-left: none;
    border-top: 1px solid #e2e8f0;
  }
}

@media (max-height: 780px) {
  .login-page-payroll.login-split {
    padding-top: clamp(0.5rem, 1.5vmin, 1rem);
  }

  .login-split-aside,
  .login-split-panel {
    padding-top: clamp(1.1rem, 3vw, 1.75rem);
    padding-bottom: clamp(1.1rem, 3vw, 1.75rem);
  }

  .login-split-brand-body {
    padding: 0.85rem 0 1rem;
  }

  .login-split-brand-title {
    margin-bottom: 0.65rem;
  }

  .login-split-panel-sub {
    margin-bottom: 1rem;
  }

  .login-split-panel .mb-2 {
    margin-bottom: 0.55rem !important;
  }

  .login-split-panel .mb-3 {
    margin-bottom: 0.6rem !important;
  }
}

@media (max-height: 640px) {
  .login-split-dots {
    padding-top: 0.65rem;
  }

  .login-split-brand-desc {
    font-size: clamp(0.8rem, 1.4vw, 0.9rem);
  }

  .login-split-panel-title {
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  }
}

/* Browser zoom 125% / 150% shrinks the CSS viewport — tighten card + form when vertical space is limited. */
@media (max-height: 900px), ((max-width: 1100px) and (max-height: 940px)) {
  .login-page-payroll.login-split {
    padding: clamp(0.65rem, 2vmin, 1.25rem) clamp(0.65rem, 1.5vw, 0.9rem);
  }

  .login-split-outer,
  .login-page-payroll.login-split .login-payroll-footer {
    max-width: min(860px, 94vw);
  }

  .login-split-shell {
    border-radius: clamp(10px, 1.8vw, 16px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  }

  .login-split-aside,
  .login-split-panel {
    padding: clamp(1.15rem, 3vw, 1.85rem) clamp(1.1rem, 2.5vw, 1.5rem);
  }

  .login-split-brand-logo {
    height: clamp(1.6rem, 3.5vw + 0.7rem, 2.6rem);
    max-width: min(190px, 48vw);
  }

  .login-split-brand-body {
    padding: 1.1rem 0 1.35rem;
  }

  .login-split-brand-title {
    font-size: clamp(1.2rem, 2.6vw, 1.75rem);
    margin-bottom: 0.65rem;
  }

  .login-split-brand-desc {
    font-size: clamp(0.8rem, 1.35vw, 0.9rem);
    line-height: 1.45;
  }

  .login-split-dots {
    padding-top: 0.85rem;
  }

  .login-split-panel-title {
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  }

  .login-split-panel-sub {
    margin-bottom: 1.05rem;
    font-size: 0.82rem;
  }

  .login-split-panel .form-label {
    font-size: 0.6rem;
    margin-bottom: 0.28rem;
  }

  .login-split-panel .form-control {
    padding: clamp(0.38rem, 1vw, 0.5rem) clamp(0.55rem, 1.4vw, 0.72rem);
    font-size: clamp(0.78rem, 0.22vw + 0.72rem, 0.875rem);
  }

  .login-split-panel .form-check-label {
    font-size: 0.8rem;
  }

  .login-split-submit {
    padding: clamp(0.45rem, 1vw, 0.55rem) clamp(0.72rem, 1.6vw, 0.85rem) !important;
    font-size: clamp(0.78rem, 0.22vw + 0.72rem, 0.875rem) !important;
  }

  .login-split-panel .mb-2 {
    margin-bottom: 0.48rem !important;
  }

  .login-split-panel .mb-3 {
    margin-bottom: 0.55rem !important;
  }

  .login-split-forgot {
    font-size: 0.75rem;
  }

  .login-page-payroll.login-split .login-payroll-footer {
    margin-top: 0.5rem;
  }

  .login-page-payroll.login-split .login-payroll-copyright {
    font-size: 0.72rem;
  }
}

@media (max-height: 740px), ((max-width: 1000px) and (max-height: 820px)) {
  .login-split-outer,
  .login-page-payroll.login-split .login-payroll-footer {
    max-width: min(720px, 92vw);
  }

  .login-split-aside,
  .login-split-panel {
    padding: clamp(0.85rem, 2.5vw, 1.25rem) clamp(0.85rem, 2.2vw, 1.15rem);
  }

  .login-split-brand-badge {
    width: 2rem;
    height: 2rem;
    font-size: 0.82rem;
  }

  .login-split-brand-logo {
    height:clamp(1.6rem, 3.5vw + 0.7rem, 2.6rem);
    max-width: min(160px, 50vw);
  }

  .login-split-brand-body {
    padding: 0.65rem 0 0.85rem;
  }

  .login-split-brand-title {
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    margin-bottom: 0.5rem;
  }

  .login-split-brand-desc {
    font-size: clamp(0.74rem, 1.2vw, 0.82rem);
    line-height: 1.4;
  }

  .login-split-dots {
    padding-top: 0.55rem;
  }

  .login-split-panel-title {
    font-size: clamp(1.02rem, 2vw, 1.25rem);
  }

  .login-split-panel-sub {
    margin-bottom: 0.75rem;
    font-size: 0.78rem;
  }

  .login-split-panel .form-control {
    padding: 0.35rem 0.55rem;
    font-size: 0.8rem;
    border-radius: 6px !important;
  }

  .login-split-panel .input-group-text {
    border-radius: 0 6px 6px 0 !important;
  }

  .login-split-panel .form-label {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }

  .login-split-submit {
    padding: 0.42rem 0.7rem !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
  }

  .login-split-panel .form-check {
    padding-left: 1.35rem;
  }

  .login-split-panel .form-check-label {
    font-size: 0.75rem;
  }

  .login-split-panel .mb-2 {
    margin-bottom: 0.4rem !important;
  }

  .login-split-panel .mb-3 {
    margin-bottom: 0.45rem !important;
  }

  .login-split-panel .form-control:focus {
    box-shadow: 0 0 0 2px var(--login-primary-ring) !important;
  }
}

/* ====================================================================
   Windows display scaling 125% / 150%
   At 125% → devicePixelRatio 1.25 → CSS viewport ≈ 80% of physical
   At 150% → devicePixelRatio 1.50 → CSS viewport ≈ 67% of physical
   rem/px values don't shrink with the viewport, so we must explicitly
   cap every font-size, padding, and max-width that would otherwise look
   oversized on scaled screens.
   ==================================================================== */

/* ---- 125% scaling (DPR ≥ 1.25) ------------------------------------ */
@media (min-resolution: 1.25dppx), (-webkit-min-device-pixel-ratio: 1.25) {
  /* Page outer padding */
  .login-page-payroll.login-split {
    padding: clamp(0.5rem, 1.5vmin, 1rem) clamp(0.5rem, 1.2vw, 0.75rem);
  }

  /* Card container width */
  .login-split-outer,
  .login-page-payroll.login-split .login-payroll-footer {
    max-width: min(780px, 94vw);
  }

  /* Card shell */
  .login-split-shell {
    border-radius: clamp(8px, 1.5vw, 14px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
  }

  /* Aside + panel inner padding */
  .login-split-aside,
  .login-split-panel {
    padding: clamp(1rem, 2.4vw, 1.55rem) clamp(0.9rem, 2vw, 1.25rem);
  }

  /* Brand logo */
  .login-split-brand-logo {
    height: clamp(1.1rem, 1.6vw + 0.4rem, 1.55rem);
    max-width: min(170px, 44vw);
  }

  /* Brand badge */
  .login-split-brand-badge {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.82rem;
  }

  /* Brand body */
  .login-split-brand-body {
    padding: 0.9rem 0 1.1rem;
  }

  /* Brand title */
  .login-split-brand-title {
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

  /* Brand description */
  .login-split-brand-desc {
    font-size: clamp(0.75rem, 1.2vw, 0.86rem);
    line-height: 1.45;
  }

  /* Dots */
  .login-split-dots {
    padding-top: 0.7rem;
  }

  .login-split-dots span {
    width: 6px;
    height: 6px;
  }

  .login-split-dots span.is-active {
    width: 1.35rem;
  }

  /* Panel title */
  .login-split-panel-title {
    font-size: clamp(1.05rem, 1.9vw, 1.3rem);
    font-weight: 500;
    margin-bottom: 0.3rem;
  }

  /* Panel subtitle */
  .login-split-panel-sub {
    font-size: 0.78rem;
    margin-bottom: 0.9rem;
  }

  /* Form labels */
  .login-split-panel .form-label {
    font-size: 0.58rem;
    letter-spacing: 0.11em;
    margin-bottom: 0.24rem;
  }

  /* Form inputs */
  .login-split-panel .form-control {
    font-size: 0.8rem;
    padding: 0.36rem 0.55rem;
    border-radius: 7px !important;
  }

  /* Input group addon */
  .login-split-panel .input-group-text {
    border-radius: 0 7px 7px 0 !important;
  }
  .login-split-panel .input-group .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* Checkbox label */
  .login-split-panel .form-check-label {
    font-size: 0.76rem;
  }

  /* Forgot password link */
  .login-split-forgot,
  .login-split-panel .text-end .login-split-forgot {
    font-size: 0.72rem;
  }

  /* Submit button */
  .login-split-submit {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.7rem !important;
    border-radius: 7px !important;
  }

  /* Field spacing */
  .login-split-panel .mb-2 {
    margin-bottom: 0.44rem !important;
  }
  .login-split-panel .mb-3 {
    margin-bottom: 0.5rem !important;
  }

  /* Focus ring */
  .login-split-panel .form-control:focus {
    box-shadow: 0 0 0 2px var(--login-primary-ring) !important;
  }

  /* Footer */
  .login-page-payroll.login-split .login-payroll-footer {
    margin-top: 0.4rem;
  }
  .login-page-payroll.login-split .login-payroll-copyright {
    font-size: 0.68rem;
  }

  /* Validation / alert text inside panels */
  .login-split-panel .text-danger,
  .login-split-panel .validation-summary-errors {
    font-size: 0.75rem;
  }
  .login-split-panel .alert {
    font-size: 0.78rem;
    padding: 0.5rem 0.7rem;
  }

  /* Forgot-page back link */
  .login-split-forgot-page .login-split-panel .mt-2 {
    font-size: 0.74rem;
    margin-top: 0.6rem !important;
  }

  /* Reset-page helper text */
  .login-split-reset-page .login-split-panel small.text-muted {
    font-size: 0.68rem;
  }
}

/* ---- 150% scaling (DPR ≥ 1.5) — tighten further ------------------- */
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  /* Page outer padding */
  .login-page-payroll.login-split {
    padding: clamp(0.35rem, 1.2vmin, 0.75rem) clamp(0.35rem, 1vw, 0.6rem);
  }

  /* Card container width */
  .login-split-outer,
  .login-page-payroll.login-split .login-payroll-footer {
    max-width: min(640px, 94vw);
  }

  /* Card shell */
  .login-split-shell {
    border-radius: clamp(6px, 1.2vw, 10px);
  }

  /* Aside + panel inner padding */
  .login-split-aside,
  .login-split-panel {
    padding: clamp(0.8rem, 2vw, 1.2rem) clamp(0.75rem, 1.7vw, 1rem);
  }

  /* Brand logo */
  .login-split-brand-logo {
    height: clamp(0.95rem, 1.4vw + 0.3rem, 1.3rem);
    max-width: min(145px, 42vw);
  }

  /* Brand body */
  .login-split-brand-body {
    padding: 0.7rem 0 0.85rem;
  }

  /* Brand title */
  .login-split-brand-title {
    font-size: clamp(0.95rem, 1.9vw, 1.35rem);
    margin-bottom: 0.4rem;
  }

  /* Brand description */
  .login-split-brand-desc {
    font-size: clamp(0.68rem, 1.1vw, 0.78rem);
    line-height: 1.38;
  }

  /* Dots */
  .login-split-dots {
    padding-top: 0.55rem;
  }

  /* Panel title */
  .login-split-panel-title {
    font-size: clamp(0.92rem, 1.65vw, 1.12rem);
    margin-bottom: 0.2rem;
  }

  /* Panel subtitle */
  .login-split-panel-sub {
    font-size: 0.7rem;
    margin-bottom: 0.7rem;
  }

  /* Form labels */
  .login-split-panel .form-label {
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.2rem;
  }

  /* Form inputs */
  .login-split-panel .form-control {
    font-size: 0.74rem;
    padding: 0.3rem 0.48rem;
    border-radius: 6px !important;
  }

  .login-split-panel .input-group-text {
    border-radius: 0 6px 6px 0 !important;
  }
  .login-split-panel .input-group .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* Checkbox label */
  .login-split-panel .form-check-label {
    font-size: 0.68rem;
  }

  /* Forgot link */
  .login-split-forgot,
  .login-split-panel .text-end .login-split-forgot {
    font-size: 0.65rem;
  }

  /* Submit button */
  .login-split-submit {
    font-size: 0.74rem !important;
    padding: 0.34rem 0.6rem !important;
    border-radius: 6px !important;
  }

  /* Field spacing */
  .login-split-panel .mb-2 {
    margin-bottom: 0.36rem !important;
  }
  .login-split-panel .mb-3 {
    margin-bottom: 0.4rem !important;
  }

  /* Footer */
  .login-page-payroll.login-split .login-payroll-copyright {
    font-size: 0.6rem;
  }

  /* Validation / alert text inside panels */
  .login-split-panel .text-danger,
  .login-split-panel .validation-summary-errors {
    font-size: 0.68rem;
  }
  .login-split-panel .alert {
    font-size: 0.7rem;
    padding: 0.42rem 0.6rem;
  }

  /* Forgot-page back link */
  .login-split-forgot-page .login-split-panel .mt-2 {
    font-size: 0.66rem;
    margin-top: 0.45rem !important;
  }

  /* Reset-page helper text */
  .login-split-reset-page .login-split-panel small.text-muted {
    font-size: 0.62rem;
  }
}

/* ===== Reset page – responsive extras ===== */

/* Alert (password expiry banner) inside split panel */
.login-split-reset-page .login-split-panel .alert {
  font-size: clamp(0.78rem, 1.4vw, 0.875rem);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.85rem;
}

.login-split-reset-page .login-split-panel .alert .fas {
  font-size: clamp(14px, 2vw, 18px) !important;
}

/* Helper text under current-password field */
.login-split-reset-page .login-split-panel small.text-muted {
  font-size: clamp(0.7rem, 1.2vw, 0.8rem);
  line-height: 1.4;
  display: block;
  margin-top: 0.25rem;
}

/* Inline field-level validation spans */
.login-split-reset-page .login-split-panel span.text-danger {
  font-size: clamp(0.7rem, 1.2vw, 0.78rem);
  display: block;
  margin-top: 0.2rem;
}

/* Model-level validation summary */
.login-split-reset-page .login-split-panel .text-danger:not(span) {
  font-size: clamp(0.78rem, 1.4vw, 0.875rem);
  margin-bottom: 0.75rem;
}

/* Stack label + icon nicely on narrow panels */
@media (max-width: 960px) {
  .login-split-reset-page .login-split-panel .alert {
    font-size: 0.8rem;
    padding: 0.55rem 0.75rem;
  }

  .login-split-reset-page .login-split-panel small.text-muted {
    font-size: 0.72rem;
  }
}

/* Compact everything further at low viewport heights (keyboard open on mobile) */
@media (max-height: 640px) {
  .login-split-reset-page .login-split-panel .alert {
    display: none; /* hide expiry banner when space is very tight; form fields take priority */
  }

  .login-split-reset-page .login-split-panel small.text-muted {
    font-size: 0.68rem;
  }
}

/* ===== Login page – responsive extras ===== */

/* Validation summary rendered inside the panel */
.login-page-payroll.login-split:not(.login-split-forgot-page):not(.login-split-reset-page) .login-split-panel .validation-summary-errors,
.login-page-payroll.login-split:not(.login-split-forgot-page):not(.login-split-reset-page) .login-split-panel .text-danger {
  font-size: clamp(0.75rem, 1.3vw, 0.85rem);
  margin-bottom: 0.65rem;
}

/* Alert shown when no login schemes are configured */
.login-page-payroll.login-split:not(.login-split-forgot-page):not(.login-split-reset-page) .login-split-panel .alert {
  font-size: clamp(0.78rem, 1.4vw, 0.875rem);
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
}

/* "Forgot Password?" link – keep readable at all sizes */
.login-split-panel .text-end .login-split-forgot {
  font-size: clamp(0.72rem, 1.2vw, 0.8125rem);
  display: inline-block;
  margin-top: 0.2rem;
}

/* Remember Me checkbox row */
.login-split-panel .form-check-label {
  font-size: clamp(0.78rem, 1.3vw, 0.875rem);
  line-height: 1.4;
}

@media (max-width: 960px) {
  .login-page-payroll.login-split:not(.login-split-forgot-page):not(.login-split-reset-page) .login-split-panel .alert {
    font-size: 0.8rem;
    padding: 0.55rem 0.75rem;
  }

  .login-split-panel .text-end .login-split-forgot {
    font-size: 0.75rem;
  }
}

/* ===== Forgot page – responsive extras ===== */

/* "Remembered Password? Click here" back link */
.login-split-forgot-page .login-split-panel .mt-2 {
  font-size: clamp(0.78rem, 1.3vw, 0.875rem);
  line-height: 1.5;
  color: #1b2129;
  margin-top: 0.85rem !important;
}

/* Email hint (suggestEmail) revealed after user lookup */
.login-split-forgot-page .login-split-panel #userDetails small {
  font-size: clamp(0.72rem, 1.2vw, 0.8rem);
  display: block;
  margin-bottom: 0.35rem;
  color: #64748b;
}

/* Model-level validation summary */
.login-split-forgot-page .login-split-panel .text-danger {
  font-size: clamp(0.75rem, 1.3vw, 0.85rem);
  margin-bottom: 0.65rem;
}

@media (max-width: 960px) {
  .login-split-forgot-page .login-split-panel .mt-2 {
    font-size: 0.8rem;
    margin-top: 0.75rem !important;
  }

  .login-split-forgot-page .login-split-panel #userDetails small {
    font-size: 0.74rem;
  }
}

@media (max-height: 640px) {
  .login-split-forgot-page .login-split-panel .mt-2 {
    margin-top: 0.5rem !important;
    font-size: 0.75rem;
  }
}

/* ================================================================
   LOCKOUT PAGE  (.login-split-lockout-page)
   ================================================================ */

/* Slightly taller card to fit the lockout content blocks */
.login-split-lockout-page .login-split-shell {
  min-height: clamp(520px, 68vh, 680px);
}

/* The panel scrolls on short screens instead of clipping */
.login-split-lockout-panel {
  overflow-y: auto;
}

/* Danger banner at the top of the panel */
.lockout-alert-danger {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: #fff1f2;
  border-left: 3px solid #ef4444;
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.85rem;
}

.lockout-alert-danger strong {
  display: block;
  font-size: clamp(0.8rem, 1.3vw, 0.875rem);
  font-weight: 600;
  color: #b91c1c;
  margin-bottom: 0.2rem;
}

.lockout-alert-danger p {
  margin: 0;
  font-size: clamp(0.73rem, 1.2vw, 0.8rem);
  color: #991b1b;
  line-height: 1.45;
}

.lockout-alert-icon {
  flex-shrink: 0;
  font-size: 1rem;
  color: #ef4444;
  margin-top: 0.1rem;
}

/* Info blocks (details / policy / what-to-do) */
.lockout-info-block {
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.75rem;
}

.lockout-info-heading {
  margin: 0 0 0.4rem;
  font-size: clamp(0.78rem, 1.3vw, 0.85rem);
  font-weight: 600;
}

.lockout-info-block p,
.lockout-info-block ul {
  margin: 0;
  font-size: clamp(0.72rem, 1.2vw, 0.8rem);
  line-height: 1.5;
}

.lockout-info-block p + p {
  margin-top: 0.25rem;
}

.lockout-info-block p span {
  font-weight: 600;
}

/* Colour variants */
.lockout-info-danger {
  background: #fef2f2;
  border-left: 3px solid #ef4444;
}
.lockout-info-danger .lockout-info-heading { color: #dc2626; }
.lockout-info-danger p { color: #7f1d1d; }

.lockout-info-blue {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
}
.lockout-info-blue .lockout-info-heading { color: #1d4ed8; }
.lockout-info-blue p { color: #1e40af; }

.lockout-info-warning {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
}
.lockout-info-warning .lockout-info-heading { color: #92400e; }
.lockout-info-warning p,
.lockout-info-warning ul { color: #78350f; }

.lockout-list {
  padding-left: 1.1rem;
  list-style: disc;
}
.lockout-list li {
  margin-bottom: 0.3rem;
}
.lockout-list li:last-child {
  margin-bottom: 0;
}

/* Back link row */
.lockout-back-link {
  text-align: center;
  margin-top: 0.85rem;
}

/* ================================================================
   TWO-FACTOR AUTH PAGE  (.login-split-2fa-page)
   ================================================================ */

/* Slightly taller card to comfortably fit digit inputs */
.login-split-2fa-page .login-split-shell {
  min-height: clamp(480px, 64vh, 620px);
}

/* Countdown / resend row */
.twofa-countdown-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.twofa-countdown-wrap #countdown-container,
.twofa-countdown-wrap #resend-container {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.twofa-countdown-wrap small {
  font-size: clamp(0.73rem, 1.2vw, 0.8rem);
  color: #64748b;
}

.twofa-countdown-wrap strong {
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

.twofa-clock-icon {
  width: 14px;
  height: 14px;
  color: #94a3b8;
  flex-shrink: 0;
}

/* Resend button matches submit style but smaller */
.twofa-resend-btn {
  font-size: clamp(0.75rem, 1.2vw, 0.82rem) !important;
  padding: 0.42rem 1rem !important;
  min-height: unset !important;
}

/* Six-digit input row */
.twofa-input-row {
  display: flex;
  gap: clamp(0.3rem, 1vw, 0.6rem);
  justify-content: center;
  margin-top: 0.4rem;
  margin-bottom: 0.15rem;
}

.twofa-digit {
  width: clamp(2.4rem, 5.5vw, 3rem) !important;
  height: clamp(2.6rem, 5.8vw, 3.25rem) !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: clamp(1rem, 2vw, 1.25rem) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  flex-shrink: 0;
  transition: border-color 0.18s, box-shadow 0.18s;
  appearance: none;
  -moz-appearance: textfield;
}

.twofa-digit:focus {
  border-color: var(--login-primary) !important;
  box-shadow: 0 0 0 3px var(--login-primary-ring) !important;
  outline: none;
}

/* Hide browser spin buttons on number inputs */
.twofa-digit::-webkit-outer-spin-button,
.twofa-digit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- 125% scaling ------------------------------------------------ */
@media (min-resolution: 1.25dppx), (-webkit-min-device-pixel-ratio: 1.25) {
  /* Lockout */
  .lockout-alert-danger strong { font-size: 0.8rem; }
  .lockout-alert-danger p,
  .lockout-info-block p,
  .lockout-info-block ul { font-size: 0.72rem; }
  .lockout-info-heading { font-size: 0.78rem; }
  .lockout-info-block { padding: 0.55rem 0.75rem; margin-bottom: 0.6rem; }
  .lockout-alert-danger { padding: 0.6rem 0.75rem; margin-bottom: 0.7rem; }

  /* 2FA */
  .twofa-digit {
    width: 2.2rem !important;
    height: 2.4rem !important;
    font-size: 0.95rem !important;
  }
  .twofa-input-row { gap: 0.28rem; }
  .twofa-countdown-wrap { padding: 0.4rem 0.6rem; margin-bottom: 0.75rem; }
  .twofa-countdown-wrap small { font-size: 0.72rem; }
}

/* ---- 150% scaling ------------------------------------------------ */
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  /* Lockout */
  .lockout-alert-danger strong { font-size: 0.76rem; }
  .lockout-alert-danger p,
  .lockout-info-block p,
  .lockout-info-block ul { font-size: 0.68rem; }
  .lockout-info-heading { font-size: 0.73rem; }
  .lockout-info-block { padding: 0.45rem 0.65rem; margin-bottom: 0.5rem; }
  .lockout-alert-danger { padding: 0.5rem 0.65rem; margin-bottom: 0.6rem; }

  /* 2FA */
  .twofa-digit {
    width: 2rem !important;
    height: 2.2rem !important;
    font-size: 0.88rem !important;
  }
  .twofa-input-row { gap: 0.22rem; }
  .twofa-countdown-wrap { padding: 0.35rem 0.5rem; margin-bottom: 0.6rem; }
  .twofa-countdown-wrap small { font-size: 0.68rem; }
}

/* ================================================================
   STATUS / INFO PANEL PAGES
   Used by: AccessDenied, LockoutFailed, ForgotPasswordConfirmation,
            TwoFactorFailed  (.login-split-status-page)
   ================================================================ */

/* Slightly smaller card — no form fields */
.login-split-status-page .login-split-shell {
  min-height: clamp(400px, 56vh, 540px);
}

/* Centred icon badge */
.status-panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 7vw, 60px);
  height: clamp(48px, 7vw, 60px);
  border-radius: 50%;
  margin: 0 auto 1rem;
}

.status-panel-icon svg,
.status-panel-icon [data-feather] {
  width: clamp(20px, 3.5vw, 26px);
  height: clamp(20px, 3.5vw, 26px);
}

.status-panel-icon-success { background: #dcfce7; color: #16a34a; }
.status-panel-icon-error   { background: #fef2f2; color: #dc2626; }
.status-panel-icon-info    { background: #eff6ff; color: #2563eb; }
.status-panel-icon-warning { background: #fffbeb; color: #d97706; }

/* Body copy inside status panel */
.status-panel-message {
  font-size: clamp(0.8rem, 1.4vw, 0.88rem);
  color: #475569;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

/* Action buttons row */
.status-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Logout page — icon + button layout */
.login-split-logout-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logout-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 8vw, 64px);
  height: clamp(52px, 8vw, 64px);
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  margin: 0 auto 1rem;
}

.logout-icon {
  width: clamp(22px, 3.8vw, 28px) !important;
  height: clamp(22px, 3.8vw, 28px) !important;
}

.logout-confirm-form { width: 100%; }

.logout-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.logout-cancel-btn {
  background: transparent !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  font-size: clamp(0.82rem, 1.4vw, 0.9rem);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.65rem 1rem;
  transition: background 0.18s, border-color 0.18s;
}

.logout-cancel-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #1e293b !important;
}

/* Recovery code info note */
.login-split-info-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 7px;
  padding: 0.6rem 0.8rem;
  font-size: clamp(0.72rem, 1.2vw, 0.8rem);
  color: #78350f;
  line-height: 1.5;
}

/* ---- 125% scaling ----------------------------------------------- */
@media (min-resolution: 1.25dppx), (-webkit-min-device-pixel-ratio: 1.25) {
  .login-split-status-page .login-split-shell {
    min-height: clamp(360px, 52vh, 490px);
  }
  .status-panel-message { font-size: 0.78rem; margin-bottom: 1.2rem; }
  .status-panel-icon { width: 44px; height: 44px; }
  .login-split-info-note { font-size: 0.7rem; padding: 0.5rem 0.65rem; }
  .logout-icon-wrap { width: 48px; height: 48px; }
}

/* ---- 150% scaling ----------------------------------------------- */
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  .login-split-status-page .login-split-shell {
    min-height: clamp(320px, 48vh, 450px);
  }
  .status-panel-message { font-size: 0.73rem; margin-bottom: 1rem; }
  .status-panel-icon { width: 40px; height: 40px; }
  .login-split-info-note { font-size: 0.66rem; padding: 0.4rem 0.55rem; }
  .logout-icon-wrap { width: 44px; height: 44px; }
}

/* ================================================================
   CONFIRM EMAIL / ACCOUNT PAGE  (.login-split-confirm-page)
   ================================================================ */

/* Card height — three fields sit comfortably without scrolling */
.login-split-confirm-page .login-split-shell {
  min-height: clamp(510px, 66vh, 640px);
}

/* Read-only Staff ID / Username field */
.login-split-confirm-page #userName {
  background: #f8fafc;
  color: #64748b;
  cursor: default;
}

/* Passwords-do-not-match hint */
#matchPass {
  font-size: clamp(0.72rem, 1.2vw, 0.78rem);
  margin-top: 0.25rem;
  display: block;
}

/* ---- 125% scaling ----------------------------------------------- */
@media (min-resolution: 1.25dppx), (-webkit-min-device-pixel-ratio: 1.25) {
  .login-split-confirm-page .login-split-shell {
    min-height: clamp(460px, 62vh, 580px);
  }
  #matchPass { font-size: 0.7rem; }
}

/* ---- 150% scaling ----------------------------------------------- */
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  .login-split-confirm-page .login-split-shell {
    min-height: clamp(420px, 58vh, 530px);
  }
  #matchPass { font-size: 0.66rem; }
}