/* Shared, deliberately scoped login layout. Dashboard styles stay independent. */
body.login-page {
  --login-ink: #183153;
  --login-muted: #61706e;
  --login-line: #dce2da;
  --login-green: #176959;
  margin: 0;
  background: #f7f6f2;
  color: var(--login-ink);
  font-family: Arial, Helvetica, sans-serif;
}
.login-page .login-shell {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #fffefa;
}
.login-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 4vw, 80px);
  background: #104b40;
  color: #f3f2df;
}
.login-wordmark { display: flex; align-items: center; gap: 10px; }
.login-wordmark img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.login-wordmark strong { font-size: 20px; letter-spacing: -.7px; }
.login-wordmark small { display: block; margin-top: 5px; font-size: 12px; color: #c0d2c6; }
.login-brand-copy { padding: 56px 0 72px; }
.login-kicker { margin: 0 0 24px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #bed1c4; }
.login-page .login-brand-title { margin: 0 0 24px; font-size: clamp(32px, 3.7vw, 44px); line-height: 1.12; letter-spacing: -1.6px; font-weight: 500; }
.login-brand-description { max-width: 265px; margin: 0; font-size: 14px; line-height: 1.7; color: #cfddcf; }
.login-brand-footer { font-size: 11px; line-height: 1.6; color: #bed1c4; }
.login-court { position: absolute; width: 360px; height: 240px; border: 1px solid #bfe2c628; transform: rotate(-30deg); right: -145px; bottom: 15px; border-radius: 110px; z-index: -1; }
.login-court::before, .login-court::after { content: ''; position: absolute; border: 1px solid #bfe2c628; border-radius: 90px; inset: 27px; }
.login-court::after { inset: 57px; border-radius: 70px; }
.login-content { display: flex; flex-direction: column; padding: 28px clamp(32px, 4vw, 80px) 24px; min-width: 0; }
.login-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.login-area { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--login-muted); }
.login-site { font-size: 12px; color: var(--login-muted); text-decoration: none; white-space: nowrap; padding: 8px 0; }
.login-form-wrap { width: 100%; max-width: 400px; margin: auto; padding: 40px 0; }
.login-club { margin: 0 0 24px; padding-left: 12px; border-left: 3px solid var(--accent, #176959); }
.login-club strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.login-club span { display: block; font-size: 12px; color: var(--login-muted); margin-top: 5px; }
.login-page .login-heading { font-size: 29px; line-height: 1.15; letter-spacing: -1px; margin: 0 0 10px; font-weight: 600; }
.login-intro { font-size: 14px; line-height: 1.6; color: var(--login-muted); margin: 0 0 24px; }
.login-page .form { display: grid; gap: 16px; }
.login-page .form input, .login-page .form textarea, .login-page .form select {
  width: 100%; min-width: 0; min-height: 47px; padding: 13px 14px; border: 1px solid var(--login-line);
  border-radius: 10px; background: #fffefa; color: var(--login-ink); font: inherit; font-size: 16px; box-shadow: none;
}
.login-page .form input::placeholder, .login-page .form textarea::placeholder { color: #707b77; font-size: 13px; }
.login-page .field-shell { display: grid; gap: 8px; }
.login-page .field-label { color: var(--login-ink); font-size: 12px; font-weight: 600; }
.login-page .password-field input { padding-right: 80px; }
.login-page .password-toggle { color: var(--login-muted); font-size: 12px; min-width: 64px; min-height: 40px; background: transparent; border: 0; border-radius: 7px; }
.login-page .button {
  gap: 10px;
  min-height: 47px; border: 1px solid var(--login-green); border-radius: 10px; padding: 13px 18px;
  background: var(--login-green); color: #fff; box-shadow: none; font-size: 14px; font-weight: 600; text-align: center;
}
.login-page .button:hover { transform: none; background: #105747; }
.login-page .button.secondary { background: #eaf1eb; border-color: var(--login-line); color: var(--login-ink); }
.login-page .button.active-tab { background: var(--login-green) !important; color: #fff !important; border-color: var(--login-green) !important; }
.login-page .login-link { display: inline-block; border: 0; background: transparent; padding: 6px 0; color: var(--login-green); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; text-decoration: none; }
.login-page .login-link:hover, .login-site:hover { text-decoration: underline; }
.login-page .login-mfa { color: var(--login-muted); font-weight: 400; justify-self: start; }
.login-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.login-secondary { border-top: 1px solid var(--login-line); margin-top: 24px; padding-top: 18px; }
.login-secondary p { font-size: 12px; line-height: 1.6; color: var(--login-muted); margin: 0 0 4px; }
.login-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; font-size: 11px; color: var(--login-muted); line-height: 1.6; }
.login-page .status-banner { font-size: 13px; line-height: 1.5; margin: 0 0 20px; padding: 12px; border-radius: 10px; overflow-wrap: anywhere; }
.login-page .status-banner.error { color: #8e3131; background: #f9e9e5; }
.login-page .status-banner.success { color: #23533b; background: #eaf1eb; }
.login-page .status-banner.info { color: var(--login-ink); background: #edf1f3; }
.login-page .list-item { border-radius: 10px; box-shadow: none; background: #f3f5f0; }
.login-page .actions { gap: 8px; }
.login-page :focus-visible { outline: 3px solid #387eab; outline-offset: 3px; }
.login-page [hidden] { display: none !important; }
.login-gym-page .login-footer { align-items: center; }
.login-gym-page .login-footer img { width: 26px; height: 26px; object-fit: contain; }
.login-gym-page .login-footer a { color: inherit; text-decoration: none; font-weight: 600; }
.login-gym-ready .login-shell { background: var(--login-background); }
.login-gym-ready .login-brand { background: var(--login-hero); color: var(--login-hero-ink); }
.login-gym-ready .login-wordmark { min-width: 0; gap: 18px; }
.login-gym-ready .login-wordmark > div { min-width: 0; }
.login-gym-ready .login-wordmark strong { font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.login-gym-ready .login-wordmark small { display: none; }
.login-gym-ready .login-gym-logo { width: 112px; height: 112px; object-fit: contain; border-radius: 14px; background: #fff; padding: 8px; }
.login-gym-ready .login-gym-logo[src="/static/club-logos/ghaya.png"] { background: var(--login-hero); padding: 0; }
.login-gym-ready .login-gym-initials { display: grid; place-items: center; width: 72px; height: 72px; flex-shrink: 0; border: 1px solid currentColor; border-radius: 16px; font-size: 24px; }
.login-gym-ready .login-brand-title { font-size: clamp(42px, 5vw, 80px); line-height: 1.05; letter-spacing: -.045em; overflow-wrap: anywhere; }
.login-gym-ready .login-brand-title::after { content: ''; display: block; width: 44px; height: 3px; background: var(--login-highlight); margin-top: 28px; }
.login-gym-ready .login-brand-description { max-width: 320px; }
.login-gym-ready .login-kicker, .login-gym-ready .login-brand-description, .login-gym-ready .login-brand-footer { color: var(--login-hero-ink); }
.login-gym-ready .login-content { background: var(--login-background); }
.login-gym-ready .login-club { padding: 0; border: 0; }
.login-gym-ready .login-club strong { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--login-link); }
.login-gym-ready .login-club span { display: none; }
.login-gym-ready .form input, .login-gym-ready .form textarea, .login-gym-ready .form select { background: var(--login-surface); color: var(--login-input-ink); }
.login-gym-ready .form input::placeholder, .login-gym-ready .form textarea::placeholder { color: var(--login-placeholder); }
.login-gym-ready .password-toggle { color: var(--login-input-ink); }
.login-gym-ready .button { color: var(--login-button-ink); }
.login-gym-ready .button:hover { background: var(--login-button-hover); color: var(--login-button-hover-ink); }
.login-gym-ready .button.secondary { background: var(--login-surface); color: var(--login-input-ink); }
.login-gym-ready .button.active-tab { color: var(--login-button-ink) !important; }
.login-gym-ready .login-link { color: var(--login-link); }
.login-gym-ready .list-item { background: var(--login-background); color: var(--login-ink); }
.login-gym-ready .status-banner.info { background: var(--login-surface); color: var(--login-input-ink); }
.login-gym-ready :focus-visible { outline-color: var(--login-link); }
/* Portrait tablets and split-screen windows keep the form below a compact masthead. */
@media (max-width: 1000px) {
  .login-page .login-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login-brand { padding: 24px 32px; }
  .login-brand-copy, .login-brand-footer, .login-court { display: none; }
  .login-content { padding: 20px 32px 24px; }
  .login-gym-ready .login-gym-logo { width: 84px; height: 84px; }
  .login-gym-ready .login-wordmark strong { font-size: clamp(24px, 4vw, 34px); }
  .login-gym-ready .login-club { display: none; }
}
@media (max-width: 600px) {
  .login-brand { padding: 20px 24px; }
  .login-brand-copy, .login-brand-footer, .login-court { display: none; }
  .login-content { padding: 16px 24px 24px; }
  .login-form-wrap { padding: 24px 0; }
  .login-page .login-heading { font-size: 27px; }
  .login-area { max-width: 58%; }
  .login-page .login-link { min-height: 44px; display: inline-flex; align-items: center; }
  .login-page .login-actions { gap: 0; }
  .login-gym-ready .login-wordmark { gap: 14px; }
  .login-gym-ready .login-gym-logo { width: 72px; height: 72px; }
  .login-gym-ready .login-gym-initials { width: 56px; height: 56px; }
}