/* Framework-level styles that Tailwind cannot express, because Blazor applies
   these class names itself. Loaded after tailwind.css, so it wins on conflict.

   Everything Bootstrap-flavoured that shipped with the project template
   (.form-check-input, .form-floating, .darker-border-checkbox) has been
   removed — no Bootstrap is loaded, so those rules styled nothing. */

/* --- EditForm validation ------------------------------------------------- */
/* Blazor stamps these on inputs as the user edits. Rendered as a ring rather
   than an outline so they follow the input's rounded corners. */
.valid.modified:not([type='checkbox']) {
  border-color: #12b76a; /* success-500 */
}

.invalid {
  border-color: #f04438; /* danger-500 */
}

.invalid:focus {
  --tw-ring-color: #f04438;
  border-color: #f04438;
}

.validation-message {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: #b42318; /* danger-700 — 4.5:1 on white, unlike danger-500 */
}

/* --- ErrorBoundary fallback ---------------------------------------------- */
/* Rendered by <ErrorBoundary> when a component throws. The default template
   markup is a base64 warning glyph on brick red; this matches the design
   system instead. */
.blazor-error-boundary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #fecdca; /* danger-200 */
  border-radius: 0.5rem;
  background-color: #fef3f2; /* danger-50 */
  color: #7a271a; /* danger-900 */
  font-size: 0.875rem;
}

.blazor-error-boundary::before {
  content: '!';
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background-color: #d92d20; /* danger-600 */
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
}

.blazor-error-boundary::after {
  content: 'Something went wrong rendering this section. Reload the page to try again.';
}

/* --- Blazor circuit error bar -------------------------------------------- */
/* Global, not scoped to a layout: the id is a framework contract and the bar is
   rendered once in App.razor. It previously lived in MainLayout.razor.css,
   which meant the AuthLayout pages rendered the same element with no styling —
   so `display: none` never applied and the bar showed permanently. */
#blazor-error-ui {
  color-scheme: light only;
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1000;
  box-sizing: border-box;
  padding: 0.75rem 3rem 0.75rem 1.25rem;
  background: #fef3f2;          /* danger-50 */
  border-top: 1px solid #fecdca; /* danger-200 */
  color: #7a271a;                /* danger-900 */
  font-size: 0.875rem;
}

#blazor-error-ui .reload {
  color: #b42318;
  font-weight: 600;
  text-decoration: underline;
}

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