/* Login page: full-viewport brand gradient with a centered frosted-glass card. */
.login-page {
  position: relative;
  min-height: 100vh;                 /* fallback for browsers without dvh */
  min-height: 100dvh;                /* fit between the iOS Safari toolbars */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  /* Keep the card clear of the notch and the bottom browser search bar. */
  padding: max(var(--space-2), env(safe-area-inset-top)) var(--space-2)
           max(var(--space-2), env(safe-area-inset-bottom));
}
/* A FIXED solid-colour backdrop (not on .login-page) so iOS 26 Safari — which
   ignores <meta theme-color> and samples fixed elements at the viewport edges —
   tints both browser toolbars with exactly this colour: a seamless flat field,
   toolbars included. The darkest brand blue lets the lighter gradient card pop. */
.login-page::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background: var(--brand-gradient-to);
}
/* Fallback tint for browsers that don't sample the fixed backdrop (older iOS,
   Android Chrome, which still honours <meta theme-color>). */
body.login-body { background-color: var(--brand-gradient-to); }
/* Lift the card + footer above the fixed backdrop. */
.login-card, .login-footer { position: relative; z-index: 1; }
.login-card {
  width: 100%; max-width: 380px; padding: 2rem;
  /* Brand gradient moved onto the card — the visual accent on the flat field. */
  background: linear-gradient(150deg,
    var(--brand-gradient-from) 0%,
    var(--brand-gradient-via) 45%,
    var(--brand-gradient-to) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
  color: #fff;
}
.login-logo { max-height: 80px; margin: 0 auto 1.5rem; }
.login-card h1 { margin: 0 0 1.25rem; font-size: 1.4rem; text-align: center; }
.login-card label { color: #fff; }
.login-card input[type="text"],
.login-card input[type="password"] {
  background: rgba(255, 255, 255, 0.9);
}
.login-field { margin-bottom: 1rem; }
/* Design-only forgot-password link, centered below the submit button. */
.login-forgot {
  display: block; margin-top: 1rem; text-align: center;
  color: #fff; font-size: 0.85rem; font-weight: 500;
  opacity: 0.9; transition: opacity 0.15s ease, text-decoration-color 0.15s ease;
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.login-forgot:hover { opacity: 1; text-decoration-color: rgba(255, 255, 255, 0.8); }
.login-remember { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.login-remember label { margin: 0; font-weight: 500; cursor: pointer; }
/* Custom checkbox: a frosted white box that fills solid white with a brand-blue
   tick when checked — matching the card instead of the default OS control. */
.login-remember input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  display: inline-grid; place-content: center;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.login-remember input[type="checkbox"]::before {
  content: ""; width: 0.62rem; height: 0.62rem;
  transform: scale(0); transition: transform 0.12s ease;
  /* A checkmark drawn via clip-path, coloured in the darkest brand blue. */
  background: var(--brand-gradient-to);
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 72%);
}
.login-remember input[type="checkbox"]:checked { background: #fff; }
.login-remember input[type="checkbox"]:checked::before { transform: scale(1); }
.login-remember input[type="checkbox"]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}
.login-submit { width: 100%; text-transform: uppercase; letter-spacing: 0.03em; }
.login-errors {
  background: rgba(180, 30, 30, 0.85); color: #fff; padding: 0.6rem 0.8rem;
  border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.9rem;
}
.login-field .errorlist { color: #ffd7d7; list-style: none; padding: 0; margin: 0.3rem 0 0; font-size: 0.85rem; }
/* Pinned to the bottom of the viewport (like the legacy login), so the card
   stays vertically centered independently of the footer. */
.login-footer {
  position: absolute; bottom: calc(1rem + env(safe-area-inset-bottom)); right: 1.5rem;
  display: flex; align-items: center; gap: 0.5rem;
  color: rgba(255, 255, 255, 0.85); font-size: 0.8rem;
}
.login-footer-logo { height: 22px; width: auto; }