/* ============================================================
   Nutrir — App-level styles
   Blazor validation, error boundary, and framework overrides.
   Depends on: design-system.css
   ============================================================ */

/* ── Blazor Validation States ─────────────────────────────── */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-error);
}

.validation-message {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin-top: var(--space-1);
}

/* ── Blazor Error Boundary ────────────────────────────────── */

.blazor-error-boundary {
    background: var(--color-error);
    padding: var(--space-4);
    color: white;
    border-radius: var(--radius-md);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ── Blazor Error UI (bottom bar) ─────────────────────────── */

#blazor-error-ui {
    background: var(--color-warning);
    color: var(--color-text);
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-6);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: none;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    margin-left: var(--space-4);
}

/* ── Focus heading reset ──────────────────────────────────── */

h1:focus {
    outline: none;
}