/* App-level styles. The DI Solutions design system (css/styles.css) owns the reset,
   tokens, typography, and base element styling. Keep this file for app-specific
   overrides only — use var(--…) tokens, never hardcode brand values. */

/* Blazor's <FocusOnNavigate Selector="h1"> focuses the page heading on every
   navigation (for screen readers). Hide the resulting focus outline on the
   non-interactive <h1> so it doesn't show a box around the title on load. */
h1:focus,
h1:focus-visible {
    outline: none;
}

/* Blazor error UI (dark-themed to match the design system). */
#blazor-error-ui {
    color: var(--text-primary, #ECE9F5);
    background: var(--surface-card, #1A1527);
    border-top: 1px solid var(--border-default, rgba(255, 255, 255, .11));
    bottom: 0;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, .4));
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.85rem 1.25rem 0.85rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.blazor-error-boundary {
    background: var(--danger-bg, rgba(248, 113, 113, .14));
    color: var(--danger, #F87171);
    padding: 1rem;
    border-radius: var(--radius-card, 20px);
}

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

/* Validation states for EditForm — themed to design tokens. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success, #34D399);
}

.invalid {
    outline: 1px solid var(--danger, #F87171);
}

.validation-message {
    color: var(--danger, #F87171);
}