/*
    The sign-in, sign-up and password pages, which Breezer renders outside the Blazor app. Each host's auth.less imports
    this whole. Breezer's auth stylesheet reads the same CSS variables as the app, so setting them themes most of it;
    the rest is scoped under .auth-page so nothing here reaches the app's own pages, which also load auth.css.
*/
body:has(.auth-page) {
  background: #F4F7FA;
}
.auth-page {
  --background-colour: #F4F7FA;
  --primary-colour: #0D7C5F;
  --secondary-colour: #1A2332;
  --text-colour: #1A2332;
  --secondary-text-colour: #5A6B7F;
  --warning-colour: #E85D3A;
  --border-colour: #E2E7ED;
  --white: #FFFFFF;
  color: #1A2332;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.auth-page h1,
.auth-page h2,
.auth-page h3 {
  font-family: 'Fredoka', 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  color: #1A2332;
}
.auth-page a {
  color: #0D7C5F;
  font-weight: 500;
  text-decoration: none;
}
.auth-page a:hover {
  color: #095C47;
  text-decoration: underline;
}
.auth-page .auth-body-container {
  width: 440px;
  min-width: 0;
  max-width: calc(100vw - 32px);
  padding: 40px;
  border: 1px solid #E2E7ED;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(26, 35, 50, 0.08);
  background: #FFFFFF;
  box-sizing: border-box;
}
.auth-page .logo-container img {
  max-height: 72px;
  width: auto;
}
.auth-page .form-group label {
  font-size: 13px;
  font-weight: 500;
  color: #1A2332;
}
.auth-page .form-group input:not([type="checkbox"]) {
  padding: 10px 12px;
  border: 1px solid #D0D7E0;
  border-radius: 6px;
  background: #FFFFFF;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
}
.auth-page .form-group input:not([type="checkbox"]):focus {
  outline: none;
  border-color: #0D7C5F;
  box-shadow: 0 0 0 3px #E8F5F0;
}
.auth-page input[type="checkbox"] {
  accent-color: #0D7C5F;
}
.auth-page button,
.auth-page .button {
  width: 100%;
  padding: 11px 18px;
  border: 1px solid #0D7C5F;
  border-radius: 8px;
  background: #0D7C5F;
  color: #fff;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.auth-page button:hover,
.auth-page .button:hover {
  border-color: #095C47;
  background: #095C47;
}
.auth-page .pw-wrapper > button.pw-toggle {
  width: auto;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #8E9BB0;
  font-size: 12px;
  font-weight: 500;
}
.auth-page .pw-wrapper > button.pw-toggle:hover {
  background: none;
  color: #095C47;
}
.auth-page .section-separator {
  border-color: #E2E7ED;
}
.auth-page .auth-links {
  font-size: 14px;
  color: #5A6B7F;
}