/* ═══════════════════════════════════════════════════════════════════════════ */
/* xablu-blazor-error-ui.css — v3.79.3 / closes #81                            */
/* ═══════════════════════════════════════════════════════════════════════════ */
/*
 * Drop-in stylesheet for the Blazor Server framework-emitted error overlay
 * (#blazor-error-ui). Opt in by adding to your App.razor / _Host.cshtml:
 *
 *     <link rel="stylesheet" href="_content/Xablu.Blazor/xablu-blazor-error-ui.css" />
 *
 * Replaces the Blazor starter template's hardcoded `lightyellow` background,
 * `0.6rem / 0.7rem / 1.25rem` padding, and `0.75rem / 0.5rem` dismiss-button
 * offsets with token-driven values that follow the suite-wide design system.
 * Defaults preserve the spirit of the Blazor template (warning-tinted banner
 * pinned to the bottom of the viewport) while replacing the magic numbers
 * with Xablu spacing/elevation/colour tokens.
 *
 * Token contract (declared in tokens.css):
 *   --x-error-ui-background          (default var(--x-color-warning-muted))
 *   --x-error-ui-foreground          (default var(--x-color-warning-foreground))
 *   --x-error-ui-padding-y-top       (default var(--x-spacing-3))
 *   --x-error-ui-padding-y-bottom    (default var(--x-spacing-3))
 *   --x-error-ui-padding-x           (default var(--x-spacing-5))
 *   --x-error-ui-box-shadow          (default var(--x-elevation-sm))
 *   --x-error-ui-dismiss-right       (default var(--x-spacing-3))
 *   --x-error-ui-dismiss-top         (default var(--x-spacing-2))
 *   --x-error-ui-z-index             (default 1000)
 *
 * Consumer override per-page (override at any ancestor scope; tokens
 * cascade like any other CSS custom property):
 *
 *   .my-app-shell {
 *       --x-error-ui-background:   var(--x-color-danger-muted);
 *       --x-error-ui-padding-x:    var(--x-spacing-6);
 *   }
 */

#blazor-error-ui {
    color-scheme: light only;
    background: var(--x-error-ui-background);
    color: var(--x-error-ui-foreground);
    bottom: 0;
    box-shadow: var(--x-error-ui-box-shadow);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding:
        var(--x-error-ui-padding-y-top)
        var(--x-error-ui-padding-x)
        var(--x-error-ui-padding-y-bottom)
        var(--x-error-ui-padding-x);
    position: fixed;
    width: 100%;
    z-index: var(--x-error-ui-z-index);
}

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