/*
 * Login page styling — recreates the look & feel of the SCTP_UI_Mock_Ups
 * design (deep-green/mint palette, Figtree font, split hero/form layout)
 * using the app's existing Bulma stack. Scoped entirely under .login-page
 * so it never leaks into other Bulma-based pages that share unsecured-base.peb.
 */

.login-page {
  --login-primary: #1d6f55;
  --login-primary-dark: #17583f;
  --login-bg: #ffffff;
  --login-text-muted: #475467;
  --login-input-bg: #fbfcfb;
  --login-input-border: rgba(0, 0, 0, 0.08);
  --login-focus-ring: rgba(29, 111, 85, 0.25);

  font-family: "Figtree", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--login-bg);
  /* A hard cap (not min-height) is required: with only a floor, this
     container simply grows past the viewport to fit its children's natural
     content size instead of capping them and letting .login-form-panel's
     own overflow-y:auto take over — which is what actually keeps the hero
     panel fully on-screen on short viewports. */
  height: 100vh;
  /* auto, not hidden: normally this never triggers (0 overflow at any
     realistic window size), but it's a fallback so content stays reachable
     by scrolling rather than being silently clipped on pathologically short
     windows, instead of relying solely on .login-form-panel's own scroll. */
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.login-page .columns {
  /* Flex child of .login-page's column layout: absorbs exactly the space
     left over after the env banner, whatever that banner's height ends up
     being, instead of a hardcoded calc() that ignored it. min-height:0
     overrides flexbox's default min-height:auto, which would otherwise let
     the form column's content push this row (and the whole page) taller
     than the viewport instead of scrolling internally. */
  flex: 1;
  min-height: 0;
  margin: 0;
}

/* Environment banner sits above the split panels, full width */
.login-page .env-banner-wrap {
  margin-bottom: 1rem;
  /* Flex items default to shrink:1, and with .columns' flex-basis:0% this
     banner would otherwise absorb almost all of the flex-shrink deficit
     under a short viewport (per the flexbox spec's proportional shrink
     formula) — but it can't actually compress below its own text/padding,
     so the container would still overflow. Pin it to its natural size so
     100% of any needed shrinkage lands on .columns, which can genuinely
     shrink (min-height:0) and hand off to .login-form-panel's own scroll. */
  flex-shrink: 0;
}

/* Left panel: hero image carousel */
.login-hero {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  min-height: 320px;
  align-self: stretch;
}

.login-hero .swiper {
  position: absolute;
  inset: 0;
}

.login-hero .swiper-slide {
  background-size: cover;
  background-position: center;
  position: relative;
}

.login-hero .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--login-primary) 100%);
}

.login-hero-caption {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  right: 2rem;
  z-index: 2;
  color: #ffffff;
}

.login-hero-caption h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #ffffff;
}

.login-hero-caption p {
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.9;
  color: #ffffff;
}

.login-hero-counter {
  position: absolute;
  bottom: 2rem;
  right: 8rem;
  z-index: 3;
  height: 32px;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.login-hero-nav {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}

.login-hero-nav button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.login-hero-nav button:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

@media screen and (max-width: 768px) {
  .login-hero {
    display: none;
  }
}

/* Right panel: sign-in form */
.login-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 2rem;
  min-height: 0;
  /* Safety net for short viewports: the hero panel and page must never
     need a page-level scroll, so if the form's own content is taller than
     the available row height, only this column scrolls internally. */
  overflow-y: auto;
}

.login-form-panel .login-form-inner {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.login-form-panel .login-logo {
  display: block;
  max-width: 140px;
  margin: 0 auto 1rem;
}

.login-form-panel h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.25rem;
  text-align: center;
}

.login-form-panel .login-subtitle {
  color: var(--login-text-muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  text-align: center;
}

.login-page .field {
  padding-bottom: 0.65rem;
}

.login-page .input {
  background-color: var(--login-input-bg);
  border: 1px solid var(--login-input-border);
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

.login-page .input:focus,
.login-page .input:active {
  border-color: #8eb7aa;
  box-shadow: 0 0 0 0.25rem var(--login-focus-ring);
}

/* Reset-password page: server-generated image captcha */
.login-page .captcha-image {
  max-width: 100%;
  border-radius: 0.625rem;
  border: 1px solid var(--login-input-border);
}

.login-page .login-forgot-link {
  display: block;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--login-primary);
  margin-bottom: 0.75rem;
}

#login-btn {
  background-color: var(--login-primary);
  border-color: var(--login-primary);
  color: #ffffff;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease-in-out;
}

#login-btn:hover {
  background-color: var(--login-primary-dark);
  border-color: var(--login-primary-dark);
  color: #ffffff;
}

.login-page .login-footer-links {
  margin-top: 1.25rem;
  text-align: center;
  color: var(--login-text-muted);
}

.login-page .login-footer-links a {
  color: var(--login-primary);
  font-weight: 600;
}