/* ==========================================================================
 * dashshow.css — Dashboard zone 3 «Showcase», first half (dashshow.js).
 * The header (`tb-sec-head`), the table chrome (`ev-table`, aliased in bbui.css) and the
 * grade badge (`rc-grade`, the Report Card's own) are the catalog's; this file only lays
 * them side by side, sizes the creative tile and tints the cell that is the row's reason.
 * Tokens only (`--bb-*`), mono via `--bb-mono`.
 * ========================================================================== */

.dsh-zone { margin: 0 0 16px; display: grid; gap: 16px; }
.dsh-zone[hidden] { display: none; }

.dsh-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .dsh-pair { grid-template-columns: minmax(0, 1fr); } }

.dsh-panel {
  min-width: 0;
  background: var(--bb-surface, #fff);
  border-radius: var(--bb-r-card, 10px);
  box-shadow: var(--bb-sh-card, 0 0 0 1px #E6E1D8);
  overflow: hidden;
}
.dsh-head { padding: 12px 14px 4px; }
.dsh-panel .ev-table-wrap { overflow-x: auto; }
.dsh-table { width: 100%; table-layout: auto; }
.dsh-table th, .dsh-table td { padding-left: 8px; padding-right: 8px; }
.dsh-cc { width: 100%; max-width: 0; }   /* the name column takes the slack and truncates */
.dsh-table th:first-child, .dsh-table td:first-child { padding-left: 14px; }
.dsh-table th:last-child, .dsh-table td:last-child { padding-right: 14px; }
.dsh-table td.num, .dsh-table th.num { text-align: right; white-space: nowrap; }
.dsh-table td.num { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; }

.dsh-row { cursor: pointer; }
.dsh-row:focus-visible { outline: 2px solid var(--bb-accent, #0D2A5E); outline-offset: -2px; }

/* Campaign cell: creative tile + name, the name truncates before any number does. */
.dsh-c { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dsh-nm { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.dsh-nm b { font-weight: 600; color: var(--bb-ink, #1F1D1A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsh-nm i { font-style: normal; font-size: 12px; color: var(--bb-ink-3, #8A8578); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsh-st { font-style: normal; color: var(--bb-orange, #C77D1B); }
.dsh-n { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; }

.dsh-th {
  flex: 0 0 auto; width: 44px; height: 44px;
  border-radius: 8px; overflow: hidden;
  background: var(--bb-field, #F5F3EE);
  display: flex; align-items: center; justify-content: center;
}
.dsh-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dsh-th.is-txt span {
  padding: 3px; font-size: 8.5px; line-height: 1.15; font-weight: 600;
  color: var(--bb-ink-2, #4A4740); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.dsh-th.is-wait { background: var(--bb-hover, #EFECE6); }

.dsh-g { width: 1%; }
.dsh-grade.rc-grade { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; }

/* The reason the row is on its side, and the column it is ranked by. */
.dsh-table td.is-rank { font-weight: 700; color: var(--bb-ink, #1F1D1A); }
.dsh-table td.is-good { color: var(--bb-green, #2E7D52); background: var(--bb-green-tint, #E9F3EC); font-weight: 600; }
.dsh-table td.is-bad  { color: var(--bb-red, #B23B3B); background: var(--bb-red-tint, #F8E9E9); font-weight: 600; }
.dsh-table td.is-dim  { opacity: .5; }
.dsh-table td.is-quiet { color: var(--bb-ink-3, #8A8578); }
.dsh-row.is-thin td { opacity: .55; }
.dsh-none { text-align: center; color: var(--bb-ink-3, #8A8578); padding: 18px; }