/* styles/dialogs.css — crash screen, destructive action + confirm dialog. Order in VulnerabilityCore.html is the cascade order. */

/* ------------------------------------------------------------ crash screen */
/* Rendered by AppErrorBoundary, so it stands OUTSIDE the app shell — no sidebar or
   topbar to inherit padding from, hence its own centering. */
.crashpage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
}
.crashpage .empty-card {
  width: min(560px, 100%);
}
.crashpage-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

/* ------------------------------------------------------- destructive action */
/* One button style for the one irreversible action in the product: deleting a
   component. Built on --sev-critical rather than a new token so it reads as the
   same "this is the bad end of the scale" red the severity chips already use, and
   so it re-tints correctly in the dark theme where that token is redefined. */
.btn-danger {
  background: var(--sev-critical);
  border-color: var(--sev-critical);
  color: #ffffff;
}
.btn-danger:hover:not(:disabled) {
  filter: brightness(1.08);
  background: var(--sev-critical);
}
.btn-danger:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Destructive action at the top of the component detail side rail. Outlined, not
   filled: it has to be findable at a glance without reading as the page's primary
   action, which a solid red block sitting above the Attribution card would. It commits
   to full red only on hover/focus, once the pointer is deliberately on it. */
.side-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-danger-outline {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--sev-critical) 42%, transparent);
  color: var(--sev-critical);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn-danger-outline:hover:not(:disabled),
.btn-danger-outline:focus-visible {
  background: var(--sev-critical);
  border-color: var(--sev-critical);
  color: #ffffff;
}
.btn-danger-outline:disabled {
  opacity: 0.55;
  cursor: default;
}

/* The confirm dialog is a .usm, but a short one — the width that suits an SBOM
   editor is far too wide for four lines of consequences. */
.usm-narrow {
  max-width: 480px;
}
/* The consequence list is the whole argument this dialog makes, and it was rendering as
   default disc bullets in --text-dim — the same weight as the sentence above it. Given
   the .rev-item grammar from the wizard's match list instead: a bordered stack,
   hairline-separated rows, one rail down the left.

   ONE rail for the list, not one per row. Five red ticks read as five separate warnings;
   a single rail reads as "everything inside this bracket goes", which is what is true.

   --danger arrives by inheritance from .usm-danger. Every current .del-list sits inside
   DeleteConfirm, which always sets it; the fallback repeats the same mix rather than
   reaching for the raw token so a future list outside .usm-danger does not fall back to
   raw --sev-critical, which measures 2.7:1 against this tint in dark — too weak for a
   rail that is the row's only colour. */
.del-list {
  position: relative;
  list-style: none;
  margin: 12px 0 14px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--sev-critical) 20%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--sev-critical) 5%, transparent);
}
.del-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--danger, color-mix(in oklab, var(--sev-critical) 68%, var(--text)));
}
.del-list li {
  padding: 8px 12px 8px 15px;
  border-top: 1px solid color-mix(in oklab, var(--sev-critical) 13%, var(--line));
  font: 12.5px/1.45 var(--font);
  color: var(--text-dim);
}
.del-list li:first-child {
  border-top: none;
}
/* The mono family was doing two jobs and one of them badly: right for the "5" in the
   company dialog, wrong for "unassigned" and "stay" in the user one, which it turns into
   code tokens mid-sentence. Weight and --text carry the emphasis instead; tabular-nums
   keeps the count from shifting the line it sits on. */
.del-list b {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* .usm-body carries min-height:230px so the SBOM editor's tab panes do not jump as you
   switch between them. The confirm dialog has no tabs and, for the user delete, about
   140px of content — so that rule was buying it ~90px of empty floor between the last
   consequence and the Delete button, which reads as a dialog that failed to finish
   loading. Scoped to .usm-narrow (0,0,2,0) so it outranks wizard.css's .usm-body even
   though this sheet loads earlier. */
.usm-narrow .usm-body {
  min-height: 0;
}