/* BetaHub Reports — issue-detail / widget-submit set.
 *
 * Mirrors the real backend's issue detail view (col-md-8 main + col-md-4
 * media sidebar) and the HTML-widget's floating form. Palette is sampled
 * from the live V2 backend dark theme so the demotape visuals match what
 * a signed-up user sees.
 *
 * Roots:
 *   .bhr             Issue detail view (dashboard side)
 *   .bhr-widget      In-game / in-app widget form (player side)
 *   .bhr-list        Issues index list (for custom-fields + filter moment)
 */

.bhr,
.bhr-list {
  /* Palette — sampled from live V2 backend (dark theme). Kept in-sync
   * with betahub-sentiments/sentiments.css so cross-page visuals read
   * as the same product. */
  --bhr-bg: #0b1420;
  --bhr-panel: #111b2a;
  --bhr-panel-2: #0d1624;
  --bhr-panel-3: #0a1321;
  --bhr-panel-border: rgba(108, 148, 220, 0.12);
  --bhr-panel-border-strong: rgba(108, 148, 220, 0.22);
  --bhr-text: #e6edf7;
  --bhr-text-dim: #8a96ad;
  --bhr-text-faint: #5b6681;

  --bhr-blue: #3b7bff;
  --bhr-blue-soft: #5a92ff;
  --bhr-blue-muted: #1f3562;
  --bhr-cyan: #4db5f5;
  --bhr-green: #4db84a;
  --bhr-orange: #ff8854;
  --bhr-red: #e85d4d;
  --bhr-purple: #a97cff;
  --bhr-yellow: #f5c451;

  position: relative;
  width: 100%;
  min-height: 100%;
  background: var(--bhr-bg);
  color: var(--bhr-text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  box-sizing: border-box;
}

.bhr *,
.bhr-list *,
.bhr-widget * {
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════
 * Custom-fields moment — code panel (left) + Custom Fields card (right)
 * ═══════════════════════════════════════════════════════════════════ */
.bhr-fields-stage {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 34px;
  align-items: center;
  height: 100%;
  padding: 36px 40px;
}
.bhr-fields-stage__code { min-width: 0; }
.bhr-fields-stage__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bhr-fields-stage__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bhr-text-dim);
}
.bhr-fields-stage .bhr-card--fields { min-height: 300px; }

/* empty state + row entrance for the fields card */
.bhr-fields__empty {
  display: none;
  padding: 18px 4px;
  font-size: 13.5px;
  color: var(--bhr-text-faint);
}
.bhr-card--fields.is-empty .bhr-fields__empty { display: block; }
.bhr-fields__row {
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bhr-fields__row.is-new {
  opacity: 0;
  transform: translateX(-10px);
}

/* the code panel */
.bhr-code {
  border-radius: 10px;
  background: #0a1019;
  border: 1px solid var(--bhr-panel-border-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}
.bhr-code__tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 0;
  background: #0d1522;
  border-bottom: 1px solid var(--bhr-panel-border);
}
.bhr-code__tab {
  display: inline-block;
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--bhr-text);
  background: #0a1019;
  border-right: 1px solid var(--bhr-panel-border);
}
.bhr-code__lang {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bhr-text-faint);
}
.bhr-code__body {
  padding: 14px 0 16px;
  font-size: 13px;
  line-height: 1.6;
}
.bhr-code__line {
  display: grid;
  grid-template-columns: 44px 1fr;
  padding: 1px 18px 1px 0;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 240ms ease, transform 240ms ease, background-color 240ms ease;
  min-height: 1.6em;
}
.bhr-code__line.is-shown { opacity: 1; transform: none; }
.bhr-code__line.is-lit {
  background: rgba(59, 123, 255, 0.12);
  box-shadow: inset 3px 0 0 var(--bhr-blue);
}
.bhr-code__num {
  text-align: right;
  padding-right: 16px;
  color: var(--bhr-text-faint);
  user-select: none;
}
.bhr-code__src { color: #d6deeb; }
.bhr-code .tok-k { color: #c792ea; }
.bhr-code .tok-t { color: #ffcb6b; }
.bhr-code .tok-f { color: #82aaff; }
.bhr-code .tok-s { color: #c3e88d; }
.bhr-code .tok-c { color: #5f6f8a; font-style: italic; }
.bhr-code .tok-n { color: #f78c6c; }

/* ═══════════════════════════════════════════════════════════════════
 * Manifest showcase — "everything one report carries" (static)
 * ═══════════════════════════════════════════════════════════════════ */
.bhr-manifest-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 30px 60px;
}
.bhr-manifest {
  width: 100%;
  border-radius: 12px;
  background: var(--bhr-panel);
  border: 1px solid var(--bhr-panel-border-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  padding: 20px 26px 22px;
}
.bhr-manifest__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--bhr-panel-border);
}
.bhr-manifest__title { font-size: 17px; font-weight: 700; }
.bhr-manifest__title span { font-weight: 500; color: var(--bhr-text-dim); font-size: 14px; }
.bhr-manifest__legend { font-size: 12.5px; color: var(--bhr-text-dim); display: inline-flex; align-items: center; gap: 8px; }
.bhr-manifest__grid {
  display: grid;
  grid-template-columns: 1fr;
}
.bhr-manifest__row {
  display: grid;
  grid-template-columns: 30px 220px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--bhr-panel-border);
  font-size: 15px;
}
.bhr-manifest__grid .bhr-manifest__row:last-child { border-bottom: 0; }
.bhr-manifest__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(59, 123, 255, 0.12);
  color: #8fb3ff;
}
.bhr-manifest__icon svg { width: 16px; height: 16px; }
.bhr-manifest__name { font-weight: 600; color: var(--bhr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bhr-manifest__how { color: var(--bhr-text-dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bhr-manifest__meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bhr-text-dim); }
.bhr-manifest__meta b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bhr-manifest__pill {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(116, 255, 226, 0.12);
  color: #74ffe2;
  border: 1px solid rgba(116, 255, 226, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════
 * Issues list  —  props/issues-list.js (Discord Bot hub reveal).
 * ═══════════════════════════════════════════════════════════════════ */

.bhr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bhr-badge--open     { background: rgba(59, 123, 255, 0.15);  color: #8fb3ff;  border: 1px solid rgba(59, 123, 255, 0.3); }
.bhr-badge--resolved { background: rgba(77, 184, 74, 0.15);   color: #8bd489;  border: 1px solid rgba(77, 184, 74, 0.3); }
.bhr-badge--high     { background: rgba(232, 93, 77, 0.15);   color: #f48b7d;  border: 1px solid rgba(232, 93, 77, 0.3); }
.bhr-badge--medium   { background: rgba(245, 196, 81, 0.15);  color: #ffd97a;  border: 1px solid rgba(245, 196, 81, 0.3); }
.bhr-badge--low      { background: rgba(110, 118, 132, 0.18); color: var(--bhr-text-dim); border: 1px solid rgba(110, 118, 132, 0.35); }

.bhr-muted {
  color: var(--bhr-text-faint);
}

.bhr-list {
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bhr-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bhr-list__title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--bhr-text);
}
.bhr-list__count {
  color: var(--bhr-text-faint);
  font-size: 13px;
  margin-left: 8px;
}

.bhr-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bhr-panel);
  border: 1px solid var(--bhr-panel-border);
  border-radius: 8px;
  flex-wrap: wrap;
}
.bhr-filter-bar__search {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bhr-panel-2);
  border: 1px solid var(--bhr-panel-border);
  border-radius: 6px;
  color: var(--bhr-text-faint);
  font-size: 12.5px;
}
.bhr-filter-bar__divider {
  width: 1px;
  height: 20px;
  background: var(--bhr-panel-border);
}
.bhr-filter-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bhr-panel-2);
  border: 1px solid var(--bhr-panel-border);
  border-radius: 6px;
  color: var(--bhr-text-dim);
  font-size: 12.5px;
  cursor: pointer;
}
.bhr-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 11px;
  background: rgba(59, 123, 255, 0.14);
  color: #8fb3ff;
  border: 1px solid rgba(59, 123, 255, 0.35);
  border-radius: 999px;
  font-size: 12px;
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  opacity: 0;
  transform: scale(0.85);
  transform-origin: left center;
  transition: opacity 180ms ease, transform 180ms ease;
}
.bhr-filter-chip.is-shown {
  opacity: 1;
  transform: scale(1);
}
.bhr-filter-chip__x {
  color: #8fb3ff;
  opacity: 0.6;
  padding-left: 2px;
}

.bhr-list__rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bhr-panel-border);
  border-radius: 8px;
  background: var(--bhr-panel);
  overflow: hidden;
}
.bhr-row {
  display: grid;
  /* ID · Title · Release · Priority · Heat · Updated */
  grid-template-columns: 64px 1fr 72px 84px 72px 56px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bhr-panel-border);
  font-size: 13px;
  transition: opacity 220ms ease, filter 220ms ease, max-height 280ms ease, padding 240ms ease, border-color 240ms ease;
  overflow: hidden;
  max-height: 60px;
}
.bhr-row:last-child { border-bottom: none; }
.bhr-row--head {
  padding-top: 9px;
  padding-bottom: 9px;
  background: var(--bhr-panel-2);
  color: var(--bhr-text-dim);
  font-size: 12px;
  font-weight: 600;
}

/* Heat — IssuesHelper#heat: badge fs--1, min-width 60px, white on the
   heat colour (set inline by issues-list.js). */
.bhr-heat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.bhr-row__id {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  color: var(--bhr-text-dim);
  font-size: 12px;
}
.bhr-row__title {
  color: var(--bhr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bhr-row__build {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  color: var(--bhr-cyan);
  font-size: 12px;
}

/* Fade-out/collapse state for rows that don't match the active filter */
.bhr-row.is-out {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
  filter: blur(2px);
}