/* The result viewer emitted by history/templatetags/history_extras.py.
 *
 * A stylesheet rather than inline style attributes because a result table can
 * be 500 rows: repeating the same declarations on every cell was most of the
 * bytes on the page. It also has to reach content injected with innerHTML by
 * the workflow history panel, which a <style> in that partial could do but a
 * <script> could not - keeping both halves in static files keeps the pair
 * together and keeps Content-Security-Policy out of it. */

.res-view {
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  background: var(--color-background-primary);
  margin: 6px 0;
  overflow: hidden;
}

/* ── Tab bar ─────────────────────────────────────────────────────────── */

.res-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 6px;
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-tertiary);
}

.res-tabs, .res-actions { display: flex; align-items: center; gap: 4px; }

.res-tab, .res-btn {
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: var(--border-radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.res-tab:hover, .res-btn:hover {
  background: var(--color-background-primary);
  color: var(--color-text-primary);
}

.res-tab.active {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
  font-weight: 600;
}

.res-btn {
  border-color: var(--color-border-tertiary);
  background: var(--color-background-primary);
}

.res-btn-warn {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
}

.res-pane { padding: 6px 8px; }

/* ── Table ───────────────────────────────────────────────────────────── */

/* The scrolling box holds the table alone, so the sticky <th> is the only
   thing pinned to its top - the controls sit above it and never scroll. */
.res-grid { max-height: 620px; overflow: auto; }

.res-tablebar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.res-search {
  font: inherit;
  font-size: 11px;
  padding: 3px 8px;
  min-width: 180px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
}

.res-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  margin: 0 0 4px;
}

.res-table th {
  text-align: left;
  padding: 5px 8px;
  background: var(--color-background-secondary);
  border-bottom: 2px solid var(--color-border-tertiary);
  font-weight: 600;
  color: var(--color-text-primary);
  position: sticky;
  top: 0;
}

/* A nested table must not float its own header over the parent's rows. */
.res-table .res-table th { position: static; }

.res-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--color-border-tertiary);
  vertical-align: top;
}

.res-table .res-gutter {
  font-weight: 600;
  color: var(--color-text-primary);
  width: 30%;
}

/* The indexed-list layout only needs room for a row number. */
.res-table tbody tr .res-gutter:only-of-type { width: auto; }

/* Rows past the first page. Revealed by "Show all", and by any search - a
   filter that only looked at what happened to be on screen would be a trap. */
.res-gridwrap:not(.res-expanded) .res-row-extra { display: none; }

.res-note {
  font-size: 11px;
  color: var(--color-text-secondary);
  padding: 4px 2px;
}

.res-unsafe-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Text, raw ───────────────────────────────────────────────────────── */

.res-text, .res-raw {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
  margin: 0;
  background: var(--color-background-secondary);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-tertiary);
  color: var(--color-text-primary);
}

.res-raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  max-height: 520px;
  overflow: auto;
}

.res-empty { color: var(--color-text-secondary); font-style: italic; }

/* ── Images ──────────────────────────────────────────────────────────── */

.res-images {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.res-figure {
  margin: 0;
  padding: 8px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  max-width: 100%;
}

/* A chart is usually wider than the panel and a sparkline is tiny; both should
   arrive at their own size and stop at the edge rather than being stretched. */
.res-img {
  display: block;
  max-width: 100%;
  max-height: 620px;
  height: auto;
  border-radius: var(--border-radius-sm);
  /* Transparent PNGs - which is most charts - are unreadable on the dark
     theme without something behind them. */
  background: var(--media-backdrop);
}

.res-figure figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.res-figure figcaption a { color: var(--color-text-primary); }

.res-thumb {
  display: block;
  max-width: 160px;
  max-height: 90px;
  height: auto;
  border-radius: var(--border-radius-sm);
  background: var(--media-backdrop);
}

/* ── Chart, HTML ─────────────────────────────────────────────────────── */

.res-chart { position: relative; height: 320px; }

.res-frame {
  width: 100%;
  height: 120px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  background: var(--media-backdrop);
  display: block;
}

/* What replaces the frame when a staff user asks for the unsandboxed render.
   Scoped so a result's own CSS cannot leak upwards into the app's chrome any
   further than this box. */
.res-html-unsandboxed {
  padding: 8px 10px;
  border: 1px solid var(--warning-border);
  border-radius: var(--border-radius-md);
  max-height: 620px;
  overflow: auto;
}