/*
   kts-crash-bar.css — Foundation-owned styling for the last-resort
   #blazor-error-ui crash bar (compact single-line variant).

   Blazor's framework JS toggles the bar's `display` when an unhandled
   exception escapes the component tree — BEFORE any .razor component can
   render, which is why this ships as a static asset instead of a component.
   Per-page API/data errors belong in KtsPageState; this bar only fires when
   the WASM runtime itself faults.

   Consumer wiring (see docs/consumer-snippets/crash-bar.html for the markup):

     <link rel="stylesheet" href="_content/KTS.Foundation/css/kts-crash-bar.css" />

   Link it AFTER kts-foundation-theme.css so this file wins the source-order
   tiebreak against the theme's legacy default-template #blazor-error-ui rules.
   (The layout-critical rules below carry higher specificity on purpose, so
   the bar stays intact even if a consumer gets the order wrong.)

   Design decisions (KeyID #549): icon + title + Reload + Dismiss on a single
   row, ~40px tall, no stacked subtitle. The longer explanation lives as a
   <title> tooltip on the SVG icon. Dark amber palette with WCAG AA contrast
   (#fafafa on #1f1206 ≈ 17.6:1; #1f1206 on #f59e0b ≈ 9.4:1) that reads well
   on both light and dark app themes — the palette is deliberately fixed
   rather than theme-adaptive. Retheme via the --kts-crash-* custom
   properties; the var() fallbacks below mean the file also works standalone
   without kts-foundation-theme.css.

   Every rule is scoped under #blazor-error-ui so nothing can bleed into the
   consuming app.
*/

/*
   `div#blazor-error-ui` (specificity 1,0,1) — NOT a plain `#blazor-error-ui`
   (1,0,0) — so this surface beats the stock Blazor-template rule
   (`background: lightyellow; padding: …`) that both kts-foundation-theme.css
   and un-migrated consumer stylesheets still carry at (1,0,0), regardless of
   link order. Retheme via the --kts-crash-* tokens, not by out-specifying
   this selector.
*/
div#blazor-error-ui {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: none;
    box-sizing: border-box;
    padding: 0.5rem 1rem;

    background: var(--kts-crash-bg, #1f1206);
    border-top: 2px solid var(--kts-crash-border, #f59e0b);
    color: var(--kts-crash-title, #fafafa);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.35);

    font-family: var(--kts-body-font-family, 'Inter', system-ui, -apple-system, sans-serif);
    font-size: 0.875rem;
    line-height: 1.4;
}

#blazor-error-ui .crash-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 80rem;
    margin: 0 auto;
    /* Guard the flex-shrink math: without min-width the row's content-based
       minimum can exceed narrow viewports and push items into each other. */
    min-width: 0;
}

/*
   Defensive layout reset — the KeyID #1059 fix, by construction.

   Root cause of that bug: kts-foundation-theme.css still ships the default
   Blazor-template rule `#blazor-error-ui .dismiss { position: absolute;
   right: 0.75rem; top: 0.5rem; }` (for consumers on the stock template
   markup). KeyID's hand-authored crash-bar CSS restyled .dismiss but never
   declared `position`, so the theme's `absolute` survived — yanking the ×
   out of flex flow and pinning it to the bar's right edge, exactly on top
   of the Reload chip on narrow viewports (on desktop the 80rem-centred row
   kept them apart, which is why it only surfaced on mobile).

   These rules use the `.crash-row` ancestor on purpose: specificity (1,2,0)
   beats the theme's (1,1,0) `#blazor-error-ui .dismiss` regardless of
   stylesheet link order, and beats any ambient consumer reset targeting
   bare `button` / `.dismiss`. Do NOT "simplify" the selector down to
   `#blazor-error-ui .dismiss` — that reintroduces the load-order lottery.
*/
#blazor-error-ui .crash-row .crash-icon,
#blazor-error-ui .crash-row .reload,
#blazor-error-ui .crash-row .dismiss {
    position: static;
    inset: auto;
    margin: 0;
    float: none;
    transform: none;
    flex-shrink: 0;
}

#blazor-error-ui .crash-row .crash-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--kts-crash-border, #f59e0b);
}

#blazor-error-ui .crash-row .crash-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--kts-crash-title, #fafafa);
    /* Narrow viewports: truncate before the title pushes Reload off-screen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#blazor-error-ui .crash-row .reload {
    appearance: none;
    background: var(--kts-crash-reload-bg, #f59e0b);
    color: var(--kts-crash-reload-text, #1f1206);
    border: 0;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 120ms ease;
}

#blazor-error-ui .crash-row .reload:hover {
    background: var(--kts-crash-reload-hover-bg, #fbbf24);
}

#blazor-error-ui .crash-row .reload:focus-visible {
    outline: 2px solid var(--kts-crash-focus-outline, #fafafa);
    outline-offset: 2px;
}

#blazor-error-ui .crash-row .dismiss {
    appearance: none;
    background: transparent;
    color: var(--kts-crash-dismiss-text, #e5e7eb);
    border: 1px solid var(--kts-crash-dismiss-border, rgba(229, 231, 235, 0.3));
    border-radius: 0.375rem;
    width: 1.625rem;
    height: 1.625rem;
    box-sizing: border-box;
    padding: 0;
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, border-color 120ms ease;
}

#blazor-error-ui .crash-row .dismiss:hover {
    background: var(--kts-crash-dismiss-hover-bg, rgba(229, 231, 235, 0.1));
    border-color: var(--kts-crash-dismiss-hover-border, rgba(229, 231, 235, 0.5));
}

#blazor-error-ui .crash-row .dismiss:focus-visible {
    outline: 2px solid var(--kts-crash-focus-outline, #fafafa);
    outline-offset: 2px;
}