/*
====================================================
DoseClock Auth Styles
Centred, accessible authentication screens
Phase 5 Package 7
====================================================
*/

/*
Auth page wrapper
Use with common login/auth template containers.
These selectors are intentionally broad but safe.
*/
.auth-page,
.login-page,
.login-wrapper,
.auth-wrapper {
  min-height: calc(100vh - 12rem);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem) 1rem;
}

.auth-container,
.login-container,
.auth-card,
.login-card,
form.auth-form,
form.login-form {
  width: 100%;
  max-width: 30rem;
}

/*
Card treatment for login/auth forms.
*/
.auth-card,
.login-card,
.auth-panel,
.login-panel,
.auth-container,
.login-container {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(10, 45, 111, 0.12);
  border-radius: var(--radius-lg, 1rem);
  box-shadow: var(--shadow-md, 0 0.75rem 2rem rgba(15, 23, 42, 0.12));
  padding: clamp(1.25rem, 4vw, 2rem);
}

.auth-container h1,
.auth-container h2,
.login-container h1,
.login-container h2,
.auth-card h1,
.auth-card h2,
.login-card h1,
.login-card h2 {
  text-align: center;
  margin-bottom: 1.25rem;
  color: var(--color-heading, #0a2d6f);
}

.auth-intro,
.login-intro,
.auth-help,
.login-help {
  text-align: center;
  color: var(--color-muted, #475569);
  margin-bottom: 1.5rem;
}

/*
Forms inside auth cards
*/
.auth-card form,
.login-card form,
.auth-container form,
.login-container form,
form.auth-form,
form.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-card label,
.login-card label,
.auth-container label,
.login-container label,
form.auth-form label,
form.login-form label {
  font-weight: 700;
  color: var(--color-heading, #0a2d6f);
  margin-bottom: 0.25rem;
}

.auth-card input,
.login-card input,
.auth-container input,
.login-container input,
form.auth-form input,
form.login-form input {
  width: 100%;
  min-height: 3rem;
  font-size: 1.05rem;
}

.auth-card button[type="submit"],
.login-card button[type="submit"],
.auth-container button[type="submit"],
.login-container button[type="submit"],
form.auth-form button[type="submit"],
form.login-form button[type="submit"],
.auth-submit,
.login-submit {
  width: 100%;
  min-height: 3.25rem;
  margin-top: 0.5rem;
  border-radius: var(--radius-md, 0.75rem);
  font-size: 1.05rem;
  font-weight: 800;
}

/*
If the login page does not yet use auth-specific classes,
this targets common simple login pages safely.
*/
.page-main > form:only-child,
.page-main > .login-form,
.page-main > .auth-form {
  width: 100%;
  max-width: 30rem;
  margin: clamp(1.5rem, 4vw, 3rem) auto;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(10, 45, 111, 0.12);
  border-radius: var(--radius-lg, 1rem);
  box-shadow: var(--shadow-md, 0 0.75rem 2rem rgba(15, 23, 42, 0.12));
  padding: clamp(1.25rem, 4vw, 2rem);
}

/*
Auth background polish.
*/
body:has(.auth-page),
body:has(.login-page),
body:has(.login-container),
body:has(.auth-container),
body:has(form.login-form),
body:has(form.auth-form) {
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.14), transparent 32rem),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.auth-logo,
.login-logo {
  display: block;
  max-width: 12rem;
  height: auto;
  margin: 0 auto 1.25rem auto;
}

.auth-links,
.login-links {
  margin-top: 1rem;
  text-align: center;
  font-weight: 700;
}

.auth-error,
.login-error {
  border-radius: var(--radius-md, 0.75rem);
  padding: 0.8rem 1rem;
  background: #fff1f2;
  color: #9f1239;
  border: 1px solid rgba(159, 18, 57, 0.18);
  font-weight: 700;
}

@media (max-width: 640px) {
  .auth-page,
  .login-page,
  .login-wrapper,
  .auth-wrapper {
    min-height: auto;
    padding: 1rem;
  }

  .auth-card,
  .login-card,
  .auth-panel,
  .login-panel,
  .auth-container,
  .login-container,
  .page-main > form:only-child,
  .page-main > .login-form,
  .page-main > .auth-form {
    max-width: 100%;
    padding: 1.15rem;
  }
}