/* ==========================================================================
   Nexoriss Finance — Form validation styles
   Built on top of EditContext.FieldCssClass ("modified", "valid", "invalid")
   and the semantic danger tokens defined in tokens.css. Loaded after
   components.css so it wins over legacy per-page validation rules.
   ========================================================================== */

/* -- Field-level validation message (<ValidationMessage For="..." />) ----- */
.validation-message {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--danger-text);
}

/* -- Invalid input state (mirrors EditContext.FieldCssClass output) ------- */
input.invalid,
select.invalid,
textarea.invalid,
.modified.invalid {
    border-color: var(--danger-line);
    background-color: var(--danger-bg);
}

input.invalid:focus,
select.invalid:focus,
textarea.invalid:focus,
.modified.invalid:focus {
    outline: none;
    border-color: var(--danger-line);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-line) 55%, transparent);
}

/* -- Form-level summary (<ValidationSummary />) --------------------------- */
ul.validation-errors {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
    color: var(--danger-text);
    font-size: var(--fs-sm);
    list-style: disc;
}

ul.validation-errors li {
    margin-bottom: var(--space-1);
}

/* -- Required field marker ------------------------------------------------ */
.form-field--required > label::after {
    content: " *";
    color: var(--danger-text);
}

/* -- Global unhandled-error banner (Blazor Web App / blazor.web.js) ------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1080;
    padding: var(--space-4) var(--page-gutter);
    background: var(--danger-bg);
    border-top: 1px solid var(--danger-line);
    color: var(--danger-text);
    box-shadow: var(--shadow);
}

#blazor-error-ui .reload {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

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