/* ==========================================================================
   ProjectManagementPro.ClientWASM — reset, element defaults and the error bar
   Only what the browser must agree on before any layout or component rule applies:
   the box model, the document defaults, text rhythm, links, the one focus treatment,
   and the two global helpers every family uses.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
figure {
  margin: 0 0 var(--space-md);
}

h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

h3 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-primary-strong);
}

/* The one focus treatment of the application, and nothing removes it. It is a real
   outline rather than a box-shadow: an outline is not clipped by an ancestor's
   `overflow`, it does not replace an element's own elevation, and it is still drawn
   in a forced-colors theme. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Text that only a screen reader reads: the "(required)" that follows the visual
   marker, the label of a spinner, and any status a component announces but does not
   draw. Clipped rather than hidden, so it stays in the accessibility tree. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Unhandled-error bar --------------------------------------------- */
/* `blazor.webassembly.js` looks for this element by id in wwwroot/index.html and
   reveals it (with an inline `display`) when an exception escapes a component. The
   `.reload` link and the `.dismiss` control are wired by the same script, so the ids,
   the two class names and the text stay as they are in that file. index.html is not
   part of this delivery: this rule only styles the markup it already contains. */
#blazor-error-ui {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-error-soft);
  border-top: var(--border-width) solid var(--color-error-border);
  color: var(--color-error-strong);
  box-shadow: var(--shadow-md);
}

#blazor-error-ui .reload {
  color: var(--color-error-strong);
  font-weight: var(--font-weight-semibold);
}

#blazor-error-ui .dismiss {
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-sm);
  cursor: pointer;
}