/*
 * crash-bar.css — #1121. Styling for the support reference chip added to the
 * last-resort #blazor-error-ui crash bar.
 *
 * WHY A SEPARATE FILE rather than Styles/app.scss:
 *   1. wwwroot/css/app.css is a *build artifact* of Styles/app.scss (both are
 *      committed), so a rule added to the artifact alone silently disappears on
 *      the next compile, and one added to both has to be kept in sync by hand.
 *      A dedicated file has exactly one copy and cannot drift.
 *   2. It mirrors how KTS.Foundation ships this surface — the Foundation package
 *      carries the whole bar as its own asset, _content/KTS.Foundation/css/
 *      kts-crash-bar.css, which KeyID links directly. Keeping Simplinica's
 *      crash-bar additions in their own file is the same separation and makes a
 *      future move onto the Foundation asset a deletion rather than an excavation.
 *   3. This file is NOT a second copy of the Foundation bar. kts-crash-bar.css
 *      (0.68.0, the pinned version — byte-identical to the 0.65.0 asset this
 *      was written against) styles the bar chrome only — the container,
 *      .crash-row, .crash-icon, .crash-title, .reload and .dismiss — and contains
 *      no .crash-reference rule at all, because the reference chip is a
 *      Simplinica addition (#1121) that does not exist in Foundation's markup.
 *      Every selector below is a .crash-reference* selector, so there is nothing
 *      here that consuming the Foundation stylesheet could replace and nothing
 *      that can drift from it. Adopting kts-crash-bar.css for the CHROME is a
 *      real and worthwhile move — the chrome rules currently live in
 *      Styles/app.scss — but it is a migration of pre-existing styling, not part
 *      of this fix, and upstreaming the chip itself needs a change in the
 *      simplinica-ui repo plus a package release and a pin bump. Until then the
 *      chip tracks Foundation's --kts-crash-* tokens (see below) so the two
 *      palettes stay in step.
 *
 * The existing #blazor-error-ui / .crash-row / .crash-title / .reload / .dismiss
 * rules are untouched and still live in Styles/app.scss -> wwwroot/css/app.css.
 *
 * Colours come from the SAME --kts-crash-* tokens Foundation's kts-crash-bar.css
 * uses for the surrounding bar, each with the identical literal as its var()
 * fallback. That is deliberate on both counts:
 *   - the token keeps the chip from drifting away from the Foundation bar's
 *     palette when that palette is retuned or rethemed, and
 *   - the fallback keeps the chip correct with no custom property registered at
 *     all, which matters here more than anywhere else: this surface is shown
 *     when the app has already faulted. (The tokens ship in the statically
 *     linked kts-foundation-theme.css, so they are in fact present pre-boot —
 *     the fallback is belt and braces, not the expected path.)
 */

/* The chip is hidden until Program.cs stamps a reference into it, so the bar
   never shows an empty "Reference" with nothing after it (e.g. if the runtime
   died before startup completed). `hidden` is on the element in index.html;
   this makes the removal robust against the `display:flex` below winning. */
#blazor-error-ui .crash-reference[hidden] {
  display: none;
}

#blazor-error-ui .crash-reference {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  appearance: none;
  background: transparent;
  border: 1px solid var(--kts-crash-dismiss-border, rgba(229, 231, 235, 0.3));
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  margin-inline: 0.25rem;
  color: var(--kts-crash-dismiss-text, #e5e7eb);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}

#blazor-error-ui .crash-reference: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-reference:focus-visible {
  outline: 2px solid var(--kts-crash-focus-outline, #fafafa);
  outline-offset: 2px;
}

#blazor-error-ui .crash-reference-label {
  opacity: 0.75;
}

/* `user-select: all` is the belt-and-braces path behind the click-to-copy
   button: if the Clipboard API is unavailable AND execCommand is refused, one
   click still selects the whole id so it can be copied by hand. Matches the
   KeyID Client .crash-reference rule. tabular-nums keeps the hex id from
   jittering. */
#blazor-error-ui .crash-reference-value {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  user-select: all;
}

/* Copy confirmation. Purely visual + an aria-label swap done in crash-bar.js —
   deliberately NOT a text change, because the bar is aria-live="assertive" and
   mutating its text content would re-announce the entire alert. */
#blazor-error-ui .crash-reference.copied {
  border-color: var(--kts-crash-border, #f59e0b);
  background: color-mix(in srgb, var(--kts-crash-border, #f59e0b) 15%, transparent);
}

#blazor-error-ui .crash-reference.copied::after {
  content: "\2713"; /* ✓ */
  color: var(--kts-crash-border, #f59e0b);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  #blazor-error-ui .crash-reference {
    transition: none;
  }
}

/* The bar is a single nowrap row; on a narrow viewport the reference is the
   part that must yield, never the Reload action. Below 40rem the label is
   dropped and only the id (the bit support needs) is kept.

   Dropping the label is NOT enough on its own. The id is 40 characters
   ("session_" + a 32-char hex guid); at 0.75rem monospace that is roughly 18rem
   of unbreakable text, and the chip is `flex-shrink: 0` / `white-space: nowrap`
   at full width by design. Add icon, gaps, Reload, Dismiss and the bar's own
   padding and the row cannot fit a 20-25rem (320-400px) viewport: the actions
   get clipped or the page scrolls sideways. So below 40rem the chip is allowed
   to shrink and the id ellipsizes VISUALLY only —
     - `data-reference` still holds the whole id, and that attribute (never the
       rendered text) is what crash-bar.js copies, so one click still yields the
       complete reference; and
     - `user-select: all` on the value still selects the entire text node, so the
       manual fallback also still yields the complete reference.
   min-width: 0 on both is required: the default `min-width: auto` on a flex item
   pins it to its content width and would defeat flex-shrink and text-overflow
   alike. */
@media (max-width: 40rem) {
  #blazor-error-ui .crash-reference-label {
    display: none;
  }

  #blazor-error-ui .crash-reference {
    margin-inline: 0;
    padding: 0.25rem 0.375rem;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }

  #blazor-error-ui .crash-reference-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}