/* PR-A — login pages (login / loginAdmin / loginEditor / logincustomer).
 * Phase 1 + Phase 2 redesign per docs/UI_UX_PAGE_REDESIGN.md.
 *
 * Layout: centered card on a base background, full-bleed brand strip at the
 * top so the page no longer leads with the legacy dark-grey nav block.
 *
 * Constraints honoured:
 *   - No id / name attribute changes; selectors target classes + role/aria.
 *   - Reuses .c-card, .c-btn, .c-input, .c-pill from _components.css.
 */

/* Page chrome -------------------------------------------------------------- */

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: var(--bg-base);
}

.login-brandstrip {
  background-color: var(--brand-primary-600);
  color: var(--text-inverse);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.login-brandstrip__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}
.login-brandstrip__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.login-brandstrip__links a {
  color: var(--text-inverse);
  text-decoration: none;
  font-size: var(--fs-sm);
  opacity: 0.9;
  transition: opacity 120ms ease;
}
.login-brandstrip__links a:hover,
.login-brandstrip__links a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

/* Inline language switcher (login pages) ---------------------------------- */
.login-langswitch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
}
.login-langswitch__opt {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-inverse) !important;
  opacity: 0.75;
  text-decoration: none !important;
}
.login-langswitch__opt:hover,
.login-langswitch__opt:focus-visible {
  opacity: 1;
  text-decoration: none !important;
}
.login-langswitch__opt.is-active {
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--brand-primary-700) !important;
  opacity: 1;
  font-weight: var(--fw-semibold);
}

/* Centered card slot ------------------------------------------------------- */

.login-shell {
  display: grid;
  /* Phase C.10 — cap the card column at 420px but let it shrink to the viewport
     (minmax(0, …)). `place-items: center` alone sized the card to its max-content,
     so a page with wider content (customerlogin's phone/OTP form + long Lao
     divider) overflowed at 320px. minmax(0, 420px) makes content wrap instead. */
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
  align-items: center;
  padding: var(--space-5) var(--space-3);
}
.login-card {
  width: 100%;
  max-width: 100%;
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.login-card__logo {
  display: block;
  margin: 0 auto var(--space-3);
  width: 96px;
  height: 96px;
  object-fit: contain;
}
.login-card__title {
  /* Inter for Latin, Noto Serif Lao / Noto Sans Thai for the matching scripts.
   * Listing both Lao + Thai explicitly stops the browser from falling through
   * to a random system font when the heading mixes scripts. Cap weight at 700
   * since Noto Serif Lao only ships 400 + 700 — semibold (600) would trigger
   * faux-bold synthesis and look chunky. */
  font-family: "Inter", "Noto Serif Lao", "Noto Sans Thai", system-ui, sans-serif;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
  line-height: 1.3;
}
/* When the page renders in Lao, prefer the Lao face up front so the heading
 * doesn't switch fonts mid-line if the EN copy is also present. */
html[lang="lo"] .login-card__title,
body[lang="lo"] .login-card__title {
  font-family: "Noto Serif Lao", "Inter", system-ui, sans-serif;
}
html[lang="th"] .login-card__title,
body[lang="th"] .login-card__title {
  font-family: "Noto Sans Thai", "Inter", system-ui, sans-serif;
}
.login-card__subtitle {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-5);
}

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

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.login-field .c-input {
  min-height: 44px;
}
.login-actions {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.login-actions .c-btn {
  min-height: 44px;
  font-size: var(--fs-md);
}

/* Role segmented switch (admin / user / editor) --------------------------- */

.login-roles {
  display: inline-flex;
  background-color: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin: var(--space-4) auto 0;
  align-self: center;
}
.login-roles input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.login-roles__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  user-select: none;
  margin: 0;
  min-width: 88px;
  text-align: center;
}
.login-roles__option:hover {
  color: var(--text-primary);
}
.login-roles input[type="radio"]:checked + .login-roles__option {
  background-color: var(--brand-primary-600);
  color: var(--text-inverse);
}
.login-roles input[type="radio"]:focus-visible + .login-roles__option {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Inline messages (server-rendered errors) -------------------------------- */

.login-msg {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  text-align: left;
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-left-width: 4px;
}

/* Footer links ------------------------------------------------------------- */

.login-footer {
  text-align: center;
  padding: var(--space-4) var(--space-3) var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* Mobile polish ------------------------------------------------------------ */

@media (max-width: 480px) {
  .login-card {
    padding: var(--space-5) var(--space-4);
  }
  .login-roles__option {
    min-width: 72px;
    padding: var(--space-1) var(--space-3);
  }
}