/*
 * hax-validation.css
 *
 * Shared cross-discipline validation styling for user-input surfaces. Modules with data-entry
 * forms (bowling result entry, future chess / table tennis result entry, etc.) reference these
 * classes directly so the visual language for "this field needs attention" stays consistent
 * across every discipline.
 *
 * Loaded site-wide from App.razor — no per-module wiring needed; classes are immediately
 * available to any Razor component once the link is present.
 *
 * Patterns:
 *   .hax-field-required  — inline chip placed next to a required-but-blank input
 *   .hax-form-error      — block-level banner placed near the submit button when a form-level
 *                          rule blocks submission (e.g. all-zero bowling submissions)
 *
 * Color choices: red-300 (#FCA5A5) text on a translucent red-500 fill. The default
 * --mud-palette-error red is too dark to read against the app's dark-green page bg; the
 * lighter red-300 mirrors how the lime-400 (#A3E635) win-state accent reads on the same bg.
 */

/* Per-field validation chip — sized to text content, intended as a sibling of the input
   element it annotates. When used inside a CSS grid cell, callers should add justify-self:
   start (or use a fixed-width column) so the chip doesn't stretch to fill its grid cell. */
.hax-field-required {
    color: #FCA5A5;
    background-color: rgba(244, 67, 54, 0.15);
    border: 1px solid rgba(244, 67, 54, 0.35);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
    justify-self: start;
}

/* Form-level submit-blocking error banner. Block-level by default; sits in the document
   flow above the submit button so it's adjacent to the action that triggered it. */
.hax-form-error {
    color: #FCA5A5;
    font-size: 0.95rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background-color: rgba(244, 67, 54, 0.12);
    border-left: 3px solid #FCA5A5;
}