/* =========================================================
   HITECH BIMS — Login page
   Its own stylesheet, not auth.css: the login page is now a
   two-panel layout while register and forgot-password remain
   single centred cards, and folding both into one file would
   mean every login tweak risking those two.
   ========================================================= */
:root {
  --brand:        #15803d;  /* the logo's green — also the app's icon background */
  --brand-dark:   #14532d;
  --brand-light:  #dcfce7;
  --ink:          #0f172a;
  --ink-soft:     #475569;
  --ink-faint:    #94a3b8;
  --line:         #e2e8f0;
  --surface:      #ffffff;
  --canvas:       #f4f7f4;
  --danger:       #b91c1c;
  --danger-bg:    #fee2e2;
  --radius:       12px;
  --radius-lg:    20px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  height: 100vh;
  overflow: hidden;
  font-family: 'Poppins', system-ui, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

/* ---------- layout ---------------------------------------------------- */

.login-shell {
  flex: 1;
  min-height: 0;            /* lets the grid shrink inside the fixed-height body */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* ---------- left: the product, standing on the farm -------------------- */

/* The photograph runs the whole column rather than sitting in a box under the
   text — the copy is laid over its sky, where there is nothing to lose. */
/* The left half of the screen, edge to edge: the photograph fills it, the copy
   sits over its sky, and the feature card rests on its bottom edge. */
.pitch {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  isolation: isolate;
}

.pitch-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../images/login-hero.jpg") center 62% / cover no-repeat;
  /* Slow drift, so the panel is alive without asking to be watched. Transform
     only — a moving background-position would repaint every frame. */
  animation: hero-drift 32s ease-in-out infinite alternate;
  transform-origin: center 60%;
}
@keyframes hero-drift {
  from { transform: scale(1.01); }
  to   { transform: scale(1.06) translateX(-1%); }
}

/* Light at the top so the dark headline reads over the sky, clear in the
   middle so the flock and sheds are actually visible. */
.pitch-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(248, 250, 248, 0.94) 0%,
    rgba(248, 250, 248, 0.88) 34%,
    rgba(248, 250, 248, 0.55) 46%,
    rgba(248, 250, 248, 0.12) 56%,
    rgba(248, 250, 248, 0) 64%);
}

.pitch-body { padding: 24px 40px 0; }

.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.login-brand img { width: 46px; height: auto; }
.login-brand .name { font-size: 1.4rem; font-weight: 700; color: var(--brand); line-height: 1.1; }
.login-brand .sub {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 2.5px;
  color: var(--ink-soft); text-transform: uppercase;
  border-top: 1.5px solid var(--brand-light); padding-top: 3px; margin-top: 3px;
}

.pitch h1 {
  font-size: 1.85rem; line-height: 1.18; font-weight: 700; letter-spacing: -0.5px;
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(248, 250, 248, 0.9);
}
.pitch h1 em { color: var(--brand); font-style: normal; }
.pitch p {
  margin-top: 10px; font-size: 0.88rem; line-height: 1.5;
  color: #33415c; max-width: 26rem; font-weight: 500;
  text-shadow: 0 1px 10px rgba(248, 250, 248, 0.95);
}

/* Sits below the card, inside the form column — not a separate strip under
   the photo. A second crop of the photo was tried there first to fill it;
   at that sliver of height it just repeated the same hens, reading as a
   glitch rather than a continuation. Living in the form column instead
   means the photo beside it is one continuous box that stretches to match
   whatever height this column ends up being, with nothing to seam against. */
.login-tiles-row {
  width: 100%;
  max-width: 760px;
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.login-tiles-row > div {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.login-tiles-row .f-icon {
  width: 26px; height: 26px; margin: 0; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--brand-light);
  color: var(--brand);
  font-size: 0.76rem;
}
.login-tiles-row .f-label, .login-tiles-row .f-sub { text-align: left; }
.login-tiles-row .f-label { font-size: 0.72rem; font-weight: 700; color: var(--brand); line-height: 1.25; white-space: nowrap; }
.login-tiles-row .f-sub   { font-size: 0.62rem; color: var(--ink-soft); line-height: 1.25; }

/* ---------- right: the form column ------------------------------------- */

.form-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 14px 32px;
  background: var(--canvas);
  /* The card is the one thing that must never be cut off. If the window is too
     short for it, this column scrolls rather than the page — the photo beside
     it stays put and the layout does not break. */
  overflow-y: auto;
}

.login-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  padding: 18px 26px;
  max-width: 440px;
  width: 100%;
}

.login-card .lock {
  width: 40px; height: 40px; margin: 0 auto 8px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand);
  font-size: 1rem;
}

.login-card h2 { text-align: center; font-size: 1.15rem; font-weight: 700; }
.login-card .lead { text-align: center; color: var(--ink-soft); font-size: 0.82rem; margin: 3px 0 12px; }

.login-error {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 0.82rem;
  margin-bottom: 12px;
}

.field { margin-bottom: 9px; }
.field label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; }

.control { position: relative; display: flex; align-items: center; }
.control .lead-icon {
  position: absolute; left: 15px; color: var(--brand); font-size: 0.95rem; pointer-events: none;
}
.control input {
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 9px 44px 9px 42px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.control input::placeholder { color: var(--ink-faint); }
.control input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.10);
}

/* Reveal toggle. A <button>, not an icon with a click handler: it has to be
   reachable by keyboard, and it must not submit the form on Enter. */
.control .reveal {
  position: absolute; right: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-faint); font-size: 0.95rem;
  padding: 8px 10px; border-radius: 8px; line-height: 1;
}
.control .reveal:hover  { color: var(--ink-soft); }
.control .reveal:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.row-between {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 2px 0 10px;
}
.remember { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; cursor: pointer; }
.remember input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.link-brand { color: var(--brand); font-size: 0.83rem; font-weight: 600; text-decoration: none; }
.link-brand:hover { text-decoration: underline; }

.btn-login {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px;
  border: 0; border-radius: var(--radius);
  background: var(--brand); color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.05s;
}
.btn-login:hover  { background: var(--brand-dark); }
.btn-login:active { transform: translateY(1px); }

.assure {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 10px; padding: 9px;
  background: #f0fdf4;
  border-radius: var(--radius);
}
.assure i { color: var(--brand); font-size: 0.95rem; margin-top: 2px; }
.assure .t { font-size: 0.82rem; font-weight: 600; color: var(--brand-dark); }
.assure .d { font-size: 0.75rem; color: var(--ink-soft); line-height: 1.4; margin-top: 1px; }

.lang {
  position: absolute;
  top: 22px; right: 22px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.87rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
.lang i { color: var(--ink-soft); }

.or-split {
  display: flex; align-items: center; gap: 14px;
  margin: 8px 0;
  color: var(--ink-faint); font-size: 0.8rem; letter-spacing: 1px;
}
.or-split::before, .or-split::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* Present but not pretending. There is no OTP backend, so the control is
   disabled and says so rather than accepting a click that goes nowhere. */
.btn-otp {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  padding: 8px;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius);
  background: transparent; color: var(--brand);
}
.btn-otp[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-otp-note {
  text-align: center; font-size: 0.72rem; color: var(--ink-faint); margin-top: 4px;
}

/* ---------- single-card variant (reset password) ----------------------- */

/* One column, card centred. The login page earns two panels because it is the
   front door; a one-field form does not, and stretching it across the same
   grid would leave a conspicuously empty half. */
.login-shell--single {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
}
.login-shell--single .login-card { justify-self: center; }

.login-brand--stacked {
  flex-direction: column;
  gap: 10px;
  text-align: center;
  margin-bottom: 28px;
}
.login-brand--stacked img { width: 64px; }
.login-brand--stacked .name { font-size: 1.5rem; }
.login-brand--stacked .sub { display: inline-block; }

.card-foot {
  margin-top: 24px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.card-foot .link-brand { margin-left: 4px; }

/* ---------- footer ----------------------------------------------------- */

.login-foot {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 10px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--ink-soft);
}
.login-foot a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 9px; }
.login-foot a:hover { color: var(--brand); }
.login-foot .powered { font-weight: 600; color: var(--ink); }
.login-foot .foot-tel { color: var(--brand); margin-left: 6px; white-space: nowrap; }

/* ---------- short windows ---------------------------------------------- */

/*
 * The base sizing above is already compact enough to fit a typical laptop
 * window (around 650-700px tall once browser chrome is gone) without any of
 * this — these two tiers are only for windows shorter than that, and shed
 * what they can afford to lose in order of how little it costs the person
 * signing in.
 */
@media (max-height: 620px) {
  /* The OTP note explains a control that is disabled anyway, and the
     reassurance panel is decoration next to the fields themselves. */
  .btn-otp-note { display: none; }
  .assure { display: none; }
  .login-card .lock { width: 34px; height: 34px; font-size: 0.9rem; margin-bottom: 6px; }
  .pitch h1 { font-size: 1.5rem; }
  .pitch p { margin-top: 6px; }
}

@media (max-height: 540px) {
  /* Below this the pitch copy is what goes: the form has to survive intact. */
  .pitch p { display: none; }
  .or-split, .btn-otp { display: none; }
  .login-card .lock { display: none; }
  .login-tiles-row { display: none; }
}

/* ---------- narrow screens -------------------------------------------- */

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; gap: 32px; padding: 28px 20px; }
  .login-card  { justify-self: stretch; max-width: none; padding: 32px 24px; }
  .login-pitch h1 { font-size: 2rem; }
  .login-hero  { height: 170px; }
}

/* Below tablet the pitch is scenery in front of the thing the user came for. */
@media (max-width: 640px) {
  .login-pitch, .login-hero { display: none; }
  .login-brand { justify-content: center; margin-bottom: 24px; }
  /* One row is the desktop card's whole point; a phone-width screen has no
     room for it, so it wraps back to a grid instead of overflowing. */
  .login-tiles-row { flex-wrap: wrap; gap: 14px 24px; padding: 12px 20px; }
  .login-tiles-row .f-label, .login-tiles-row .f-sub { white-space: normal; }
  .login-foot { justify-content: center; text-align: center; }
}