/* Garage Hub sign-in page (used when hub.auth = "on"). Greyhound brand: green #006647 / deep #004C35, yellow #FFB819 only as a small accent,
   the real white logo, a depot-at-dusk background. Drop a photo of the garage at static/login-photo.jpg and it covers the drawing. */
.login-page {
  min-height: 100vh; margin: 0; display: flex; flex-direction: column; color: #14241C; position: relative;
  background-color: #00241A;
  background-image: url("/static/login-photo.jpg"), url("/static/login-bg.svg");
  background-size: cover; background-position: center bottom; background-repeat: no-repeat;
}
.login-page::before {            /* keeps the card and the white logo readable on any picture */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 36, 26, .62) 0%, rgba(0, 36, 26, .2) 48%, rgba(0, 36, 26, .42) 100%);
}
.login-top, .login-wrap { position: relative; z-index: 1; }
.login-top { display: flex; align-items: center; gap: 14px; padding: 22px clamp(16px, 4vw, 44px); }
.login-logo { height: 54px; width: auto; display: block; }
.login-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 16px 28px; }

.login-card { width: min(100%, 440px); background: rgba(255, 255, 255, .96); border-radius: 22px; padding: 30px 28px 26px;
              box-shadow: 0 26px 64px rgba(0, 0, 0, .38); }
.login-card h1 { margin: 0; font-size: 32px; line-height: 1.1; letter-spacing: -.01em; color: #006647; font-weight: 700; }
.login-card h1::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: #FFB819; margin: 10px 0 12px; }
.login-sub { margin: 0 0 20px; color: #41524A; font-size: 16px; }
.login-card label { display: block; font-weight: 700; margin-bottom: 14px; color: #14241C; font-size: 15px; }
.login-card input { display: block; width: 100%; margin-top: 5px; padding: 13px 14px; font-size: 17px; color: #14241C;
                    border: 1px solid #C9D3CE; border-radius: 14px; background: #fff; box-sizing: border-box; }
.login-card input:focus-visible { outline: none; border-color: #006647; box-shadow: 0 0 0 4px rgba(0, 102, 71, .22); }
.login-card .btn.primary { width: 100%; margin-top: 4px; padding: 14px; font-size: 17px; font-weight: 700; border-radius: 999px;
                           background: #006647; border-color: #006647; color: #fff; }
.login-card .btn.primary:hover { background: #004C35; border-color: #004C35; }
.login-card .btn.primary:focus-visible, .btn-ms:focus-visible { outline: 3px solid #FFB819; outline-offset: 2px; }

.btn-ms { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 14px; box-sizing: border-box;
          border: 1px solid #8C8C8C; border-radius: 999px; background: #fff; color: #14241C; font-size: 17px; font-weight: 700;
          text-decoration: none; }
.btn-ms:hover { background: #F4F7F4; }
.login-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; color: #6E7E76; font-size: 13px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: #DDE4E0; }

.login-msg { background: #FDE8E6; color: #C8362B; border-radius: 12px; padding: 11px 13px; font-weight: 700; margin-top: 14px; }
.login-foot { margin: 20px 0 0; max-width: 460px; text-align: center; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .9);
              text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }

@media (max-width: 560px) {
  .login-logo { height: 42px; }
  .login-card { padding: 24px 20px 22px; border-radius: 18px; }
  .login-card h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: no-preference) {      /* slide only, never fade: the card is fully readable even if the animation stalls */
  .login-card { animation: login-rise .45s ease-out; }
  @keyframes login-rise { from { transform: translateY(14px); } to { transform: none; } }
}