/* Login screen — a port of the app's login, which has NO card: the logo,
   the welcome line and the fields sit straight on the page, over the tenant's
   background image anchored to the bottom edge.

   Every class here is `lg-` prefixed on purpose. check-css-scope.mjs treats a
   class defined only in a non-shared stylesheet as a stray if a screen uses it,
   and this file is loaded by index.php alone — a generic name like `.field`
   here is a trap for a screen that later wants the same word.

   index.php pins data-theme="light", so nothing below needs a dark variant. */

/* index.php replaces this with url(...) when app_config.login_back_image is
   set. Kept as `none` so the background shorthand stays valid without one. */
:root { --lg-back: none; }

.lg-body {
  min-height: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The bottom padding reserves the strip the background image fills, so the
     sign-up line is never printed over the solid part of it. The top inset is
     0 outside an installed iOS app, where black-translucent puts the page under
     the status bar. */
  padding: calc(var(--sp-5) + env(safe-area-inset-top)) var(--sp-5) 22vh;
  background: var(--bg);
}

/* The tenant background, covering the whole viewport rather than a strip along
   the bottom. `cover` is what makes it tenant-proof: app_config takes any shape
   — Progoti's is a 3430x1440 panorama — and drawing it at its own aspect ratio
   gave a 151px band on a phone and a hard horizontal seam across the page.
   The mask is what keeps it usable: the image is held back over the top of the
   screen where the fields are, ramps in through the middle, and only reaches
   full strength below the last line of text. So the page reads as the app's -
   colour across the lower half, not a white sheet - without putting grey text
   on top of a saturated photo. */
.lg-body::after {
  content: "";
  position: fixed;
  inset: 0;
  /**
   * iOS Safari left a white band along the bottom of this layer.
   *
   * `inset: 0` sizes a fixed element to the SMALL viewport — the area left
   * once the address bar and the bottom toolbar are showing. Safari then hands
   * the page the LARGE viewport to paint into as those bars retract, so for
   * that difference in height there is nothing behind the content and the
   * canvas shows through. The canvas is --bg, a near-white, which is exactly
   * the strip that appeared.
   *
   * 100lvh is that larger height by definition, so the layer is never shorter
   * than what is on screen in any toolbar state. Declared AFTER inset so it
   * wins; a browser without lvh ignores the line and keeps the old behaviour.
   * With top, bottom and height all set the box is over-constrained and bottom
   * is the one dropped, which is what we want.
   */
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background: var(--lg-back) no-repeat center bottom / cover;
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, transparent 42%, rgba(0,0,0,.28) 62%,
      rgba(0,0,0,.70) 84%, #000 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0, transparent 42%, rgba(0,0,0,.28) 62%,
      rgba(0,0,0,.70) 84%, #000 100%);
}

.lg-wrap {
  width: 100%;
  max-width: 370px;
}

.lg-logo {
  height: auto;
  /* The app leaves a deliberate, large gap under the logo — about a seventh of
     the screen. Held proportional so it stays that gap on a tall phone, and
     clamped so it does not swallow a short one. */
  margin: 19px auto clamp(36px, 15vh, 130px);
}

.lg-welcome {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--login-blue);
  margin-bottom: var(--sp-1);
}

.lg-sub {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--login-ph);
  margin: 0 0 var(--sp-6);
}

.lg-error {
  display: none;
  background: var(--bill-due-bg);
  color: var(--error);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: var(--sp-3);
  font-size: 13px;
  text-align: center;
}
.lg-error--show { display: block; }

/* ---- fields ---------------------------------------------------------- */

.lg-field { position: relative; margin-bottom: var(--sp-3); }

.lg-field input {
  width: 100%;
  height: 52px;
  padding: 0 var(--sp-4) 0 46px;
  border: 1px solid var(--gray-line);
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  font-size: 17px;
  box-shadow: var(--shadow-1);
  transition: border-color 160ms var(--ease-standard),
              box-shadow   160ms var(--ease-standard);
}
.lg-field input::placeholder { color: var(--login-ph); }
.lg-field input:focus {
  outline: none;
  border-color: var(--login-btn);
  box-shadow: var(--shadow-1), 0 0 0 3px var(--tint-blue);
}

/* Room for the show/hide button. */
.lg-field--pw input { padding-right: 50px; }

.lg-ico {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text);
  pointer-events: none;
}

.lg-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text);
}
.lg-eye svg { width: 22px; height: 22px; }
/* Closed eye by default — the icon shows what a tap will do. */
.lg-eye .lg-eye__on { display: none; }
.lg-eye--on .lg-eye__off { display: none; }
.lg-eye--on .lg-eye__on { display: block; color: var(--login-btn); }

/* ---- remember me ----------------------------------------------------- */

.lg-remember {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-5) 2px;
}

.lg-switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 44px;
  height: 24px;
}
.lg-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.lg-slider {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: var(--login-off);
  pointer-events: none;
  transition: background 240ms var(--ease-standard);
}
.lg-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-1);
  transition: transform 240ms var(--ease-standard);
}
.lg-switch input:checked ~ .lg-slider { background: var(--login-on); }
.lg-switch input:checked ~ .lg-slider::before { transform: translateX(20px); }
.lg-switch input:focus-visible ~ .lg-slider { box-shadow: 0 0 0 3px var(--glow-on-mid); }

.lg-remember__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
}

/* ---- submit ---------------------------------------------------------- */

.lg-btn {
  width: 100%;
  /* Deliberately shorter than the two fields — the app's button is, and that
     small step is most of what stops the three bars reading as one stack. */
  height: 48px;
  border-radius: 12px;
  background: var(--login-btn);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .8px;
  box-shadow: var(--shadow-1);
  transition: transform 120ms var(--ease-standard),
              opacity   160ms var(--ease-standard);
}
.lg-btn:active { transform: translateY(1px); }
.lg-btn[disabled] { opacity: .6; cursor: default; }

/* Full --text rather than the muted grey the app uses: this line is the one
   piece of copy that sits over the background image, and grey loses against a
   strong tenant photo. */
.lg-signup {
  margin: 52px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--text);
}
/* The brand navy, not the lighter --login-blue used above: this link is the one
   that lands on the image, where azure-on-blue all but disappears. */
.lg-signup a { color: var(--brand-text); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .lg-slider, .lg-slider::before, .lg-btn, .lg-field input { transition: none; }
}