/* ========================================================================
   Login - standalone presentation layer.

   The sign-in screen is the only page in the app that carries no dashboard
   chrome, so it does not need the dashboard stylesheets fighting over it.
   login.php therefore drops the `latest-theme auth-body` body classes and
   uses the `lg-` names below; nothing in style.css or modern.css targets
   them, so this file owns the screen outright and can be read on its own.

   One exception: the form column also carries `.auth-card`, because
   mobile-app.js appends the iOS "add to Home Screen" button to that
   selector. Its legacy rules are restated here rather than inherited.
   ======================================================================== */

/* This page loads no other stylesheet, so it carries its own reset. Without
   the border-box rule a 100%-wide input adds its padding on top of that and
   spills out of the card. */
.lg-page,
.lg-page *,
.lg-page *::before,
.lg-page *::after {
  box-sizing: border-box;
}

.lg-page {
  --lg-teal: #00b5ad;
  --lg-teal-deep: #067f79;
  --lg-ink: #10201f;
  --lg-muted: #5f6f6d;
  --lg-surface: #ffffff;
  --lg-surface-sunk: #f4f8f7;
  --lg-line: #dde7e5;
  --lg-line-strong: #c6d6d3;
  --lg-danger: #b42318;
  --lg-danger-bg: #fef3f2;
  --lg-danger-line: #fecdca;
  --lg-radius: 28px;
  --lg-shadow: 0 2px 6px rgba(6, 63, 61, 0.04), 0 24px 60px -18px rgba(6, 63, 61, 0.28);

  color-scheme: light dark;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  color: var(--lg-ink);
  background:
    radial-gradient(760px 460px at 8% -6%, rgba(0, 181, 173, 0.18), transparent 64%),
    radial-gradient(680px 520px at 104% 108%, rgba(82, 75, 72, 0.14), transparent 62%),
    linear-gradient(180deg, #f7fbfa 0%, #eaf2f1 100%);
  font-family: "Poppins", "Segoe UI Variable Display", "Segoe UI", system-ui,
               -apple-system, Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.lg-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

/* -- The card ----------------------------------------------------------- */

.lg-page .lg-card {
  position: relative;
  width: min(100%, 460px);
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--lg-radius);
  background: var(--lg-surface);
  box-shadow: var(--lg-shadow);
  animation: lgCardIn 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes lgCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* -- Brand panel -------------------------------------------------------- */

.lg-brand {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: 26px 30px;
  overflow: hidden;
  background:
    radial-gradient(120% 180% at 4% 0%, rgba(0, 181, 173, 0.55), transparent 62%),
    linear-gradient(155deg, #0a5b57 0%, #063f3d 62%, #052f2e 100%);
}

/* Two slow-drifting glows keep the panel from reading as a flat block. */
.lg-brand::before,
.lg-brand::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  opacity: 0.5;
}

.lg-brand::before {
  width: 220px; height: 220px;
  top: -130px; right: -60px;
  background: radial-gradient(circle, rgba(0, 181, 173, 0.7), transparent 68%);
  animation: lgDrift 13s ease-in-out infinite;
}

.lg-brand::after {
  width: 180px; height: 180px;
  bottom: -120px; left: -50px;
  background: radial-gradient(circle, rgba(209, 183, 80, 0.42), transparent 68%);
  animation: lgDrift 17s ease-in-out infinite reverse;
}

@keyframes lgDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-16px, 22px, 0) scale(1.09); }
}

.lg-logo {
  display: block;
  width: 156px;
  max-width: 70%;
  height: auto;
}

/* -- Form column -------------------------------------------------------- */

.lg-page .lg-form-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 46px 44px;
  border: 0;
  border-radius: 0;
  background: var(--lg-surface);
  box-shadow: none;
}

.lg-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  padding: 5px 11px 5px 8px;
  border: 1px solid rgba(0, 181, 173, 0.22);
  border-radius: 999px;
  color: var(--lg-teal-deep);
  background: rgba(0, 181, 173, 0.08);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lg-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lg-teal);
  box-shadow: 0 0 0 3px rgba(0, 181, 173, 0.18);
}

.lg-page .lg-form-col h1 {
  margin: 16px 0 0;
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--lg-ink);
}

.lg-page .lg-form-col p.lg-lede {
  margin: 9px 0 0;
  color: var(--lg-muted);
  font-size: 0.93rem;
  font-weight: 400;
  line-height: 1.55;
}

.lg-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid var(--lg-danger-line);
  border-radius: 14px;
  color: var(--lg-danger);
  background: var(--lg-danger-bg);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.45;
}

.lg-alert svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }

.lg-form {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

/* Floating label. The input carries placeholder=" " so :placeholder-shown
   tracks emptiness without a visible placeholder competing with the label. */
.lg-field { position: relative; }

.lg-field > input {
  width: 100%;
  height: 58px;
  padding: 22px 14px 8px 46px;
  border: 1px solid var(--lg-line-strong);
  border-radius: 14px;
  color: var(--lg-ink);
  background: var(--lg-surface-sunk);
  font: inherit;
  font-size: 0.96rem;
  font-weight: 500;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  -webkit-appearance: none;
  appearance: none;
}

.lg-field.has-toggle > input { padding-right: 52px; }

.lg-field > label {
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lg-muted);
  font-size: 0.95rem;
  font-weight: 400;
  pointer-events: none;
  transition: transform 0.16s ease, font-size 0.16s ease, color 0.16s ease;
}

.lg-field > input:focus + label,
.lg-field > input:not(:placeholder-shown) + label {
  transform: translateY(-166%);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lg-teal-deep);
}

.lg-field > input:focus {
  border-color: var(--lg-teal);
  background: var(--lg-surface);
  box-shadow: 0 0 0 4px rgba(0, 181, 173, 0.15);
}

.lg-field > input[readonly] {
  color: var(--lg-muted);
  background: #eef4f3;
}

.lg-field-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: #8b9d9a;
  pointer-events: none;
  transition: color 0.16s ease;
}

.lg-field > input:focus ~ .lg-field-icon { color: var(--lg-teal-deep); }

.lg-reveal {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 11px;
  color: var(--lg-muted);
  background: transparent;
  cursor: pointer;
}

.lg-reveal:hover { color: var(--lg-teal-deep); background: rgba(0, 181, 173, 0.08); }
.lg-reveal svg { width: 19px; height: 19px; }
.lg-reveal .lg-eye-off { display: none; }
.lg-reveal[aria-pressed="true"] .lg-eye-off { display: block; }
.lg-reveal[aria-pressed="true"] .lg-eye-on { display: none; }

.lg-submit {
  position: relative;
  min-height: 54px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--lg-teal) 0%, var(--lg-teal-deep) 55%, #0a5b57 100%);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(6, 127, 121, 0.75);
  transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.lg-submit svg { width: 18px; height: 18px; transition: transform 0.18s ease; }
.lg-submit:hover { filter: brightness(1.05); box-shadow: 0 16px 32px -10px rgba(6, 127, 121, 0.8); }
.lg-submit:hover svg { transform: translateX(3px); }
.lg-submit:active { transform: translateY(1px); }

.lg-submit:focus-visible,
.lg-reveal:focus-visible,
.lg-field > input:focus-visible {
  outline: 2px solid var(--lg-teal-deep);
  outline-offset: 2px;
}

/* Submitting: the label is replaced by a spinner so a slow login cannot be
   double-submitted, and the wait is visibly acknowledged. */
.lg-submit.is-busy { pointer-events: none; color: transparent; }

.lg-submit.is-busy::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.4px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: lgSpin 0.7s linear infinite;
}

@keyframes lgSpin { to { transform: rotate(360deg); } }

/* The iOS install button that mobile-app.js appends to .auth-card. */
.lg-page .app-login-install {
  margin-top: 14px;
  min-height: 46px;
  width: 100%;
  border: 1px solid var(--lg-line-strong);
  border-radius: 14px;
  color: var(--lg-teal-deep);
  background: var(--lg-surface-sunk);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

/* -- Phone -------------------------------------------------------------- */

@media (max-width: 860px) {
  .lg-shell { align-items: start; }

  .lg-page .lg-card { border-radius: 24px; }

  .lg-brand { padding: 22px 24px; }
  .lg-logo { width: 146px; }

  .lg-page .lg-form-col { padding: 28px 24px 30px; }
  .lg-page .lg-form-col h1 { margin-top: 14px; font-size: 1.55rem; }
  .lg-form { margin-top: 22px; gap: 14px; }
}

@media (max-width: 380px) {
  .lg-page .lg-form-col { padding: 24px 18px 26px; }
  .lg-brand { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-page .lg-card,
  .lg-brand::before,
  .lg-brand::after,
  .lg-submit.is-busy::after {
    animation: none !important;
  }
  .lg-submit,
  .lg-submit svg,
  .lg-field > label { transition: none !important; }
}

/* -- Dark ---------------------------------------------------------------
   The Android web view is allowed to darken pages that do not state a
   preference. This page states one, so the dark rendering is designed here
   rather than being derived automatically. */
@media (prefers-color-scheme: dark) {
  .lg-page {
    --lg-ink: #e8f2f1;
    --lg-muted: #9bb0ad;
    --lg-surface: #10201f;
    --lg-surface-sunk: #162928;
    --lg-line: #24403e;
    --lg-line-strong: #2e4d4a;
    --lg-danger: #ff9c92;
    --lg-danger-bg: rgba(180, 35, 24, 0.16);
    --lg-danger-line: rgba(255, 156, 146, 0.3);
    --lg-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 26px 60px -18px rgba(0, 0, 0, 0.7);

    background:
      radial-gradient(760px 460px at 8% -6%, rgba(0, 181, 173, 0.16), transparent 64%),
      radial-gradient(680px 520px at 104% 108%, rgba(0, 90, 86, 0.22), transparent 62%),
      linear-gradient(180deg, #081716 0%, #051110 100%);
  }

  .lg-page .lg-card { border-color: #24403e; }
  .lg-field > input[readonly] { background: #142625; }
  .lg-badge { background: rgba(0, 181, 173, 0.12); }
}