#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

/* Native form fields used on the Account pages (static SSR, no Blazor circuit — must stay plain
   <input> elements for ASP.NET Core's static form binding / raw POST to work), styled to match
   the "dark and stormy" MudTheme instead of MudTextField. */
.auth-input {
  width: 100%;
  background: #1b1e2c;
  border: 1px solid #3a3f58;
  border-radius: 8px;
  color: #e8e9f3;
  font: inherit;
  padding: 0.6rem 0.75rem;
}

.auth-input:focus {
  border-color: #7c8fff;
  outline: none;
}

/* Show/hide toggle for a password .auth-input — wraps the input so the button can sit inside it. Plain vanilla JS
   (wwwroot/js/passwordToggle.js), not @onclick, since these pages have no Blazor circuit (see .auth-input above). */
.auth-password-field {
  position: relative;
}

.auth-password-field .auth-input {
  padding-right: 2.5rem;
}

.auth-password-toggle {
  align-items: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: #9aa0c3;
  cursor: pointer;
  display: flex;
  padding: 0.35rem;
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  color: #e8e9f3;
}

.auth-password-toggle-slash {
  background: currentColor;
  border-radius: 1px;
  height: 2px;
  left: 3px;
  opacity: 0;
  position: absolute;
  top: 9px;
  transform: rotate(-45deg);
  width: 14px;
}

.auth-password-toggle[aria-pressed="true"] .auth-password-toggle-slash {
  opacity: 1;
}

.auth-checkbox {
  align-items: center;
  color: #c7cbe0;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
}

/* Hand-built "Sign in with Google" button (google-G.png icon + text) rather than the raw Google
   branding asset — matches Google's official light/dark button pair via prefers-color-scheme,
   since this page is static SSR (no circuit) and can't react to the app's own theme toggle. */
.google-btn {
  align-items: center;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 999px;
  color: #1f1f1f;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 500;
  gap: 0.75rem;
  justify-content: center;
  padding: 0.55rem 1.5rem 0.55rem 1rem;
  width: 100%;
}

.google-btn:hover {
  background: #f7f7f7;
}

.google-btn-icon {
  height: 20px;
  width: 20px;
}

@media (prefers-color-scheme: dark) {
  .google-btn {
    background: #131314;
    border-color: #8e918f;
    color: #e3e3e3;
  }

  .google-btn:hover {
    background: #1e1f20;
  }
}

/* Quick-pick grid attached to HoleParInput/StrokesTakenInput (opened via MudMenu). */
.lg-picker-input {
  gap: 4px;
}

.lg-picker-grid {
  display: grid;
  gap: 2px;
  padding: 4px;
}

/* Hole-by-hole grids (Overview page's scoring grid, Course Holes editor) — keeps the quick-pick pad icon hard
   against the textbox instead of the default .lg-picker-input gap. */
.lg-grid-cell {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.lg-grid-cell input {
  text-align: center;
}

/* Score-relative-to-par highlight for the Overview grid's Strokes cells — targets the actual <input> only (not
   the pop-pad icon button or the cell's padding), and needs !important since MudBlazor forces its own
   background-color/color on outlined inputs (see CLAUDE.md's dark-mode note). Text colour is explicit on every
   entry, not left to theme defaults, since a couple of these are light backgrounds. border-radius matches
   MudBlazor's own outlined-field rounding so the fill doesn't square off past the visible rounded border at the
   four corners (default --mud-default-borderradius is 4px). */
.lg-cell-eagle input,
.lg-cell-birdie input,
.lg-cell-bogey input,
.lg-cell-double input {
  border-radius: var(--mud-default-borderradius, 4px) !important;
}

.lg-cell-eagle input {
  background-color: #00b0ff !important;
  color: #ffffff !important;
}

.lg-cell-birdie input {
  background-color: #50c4fa !important;
  color: #212121 !important;
}

.lg-cell-bogey input {
  background-color: #da6200 !important;
  color: #212121 !important;
}

.lg-cell-double input {
  background-color: #ff2f2b !important;
  color: #ffffff !important;
}