/* Traces tab — expandable detail row layout. The chevron rotates 90°
   when the detail panel is open; Bootstrap toggles aria-expanded on
   the button so we can hook into it without JS. */

.trace-row__toggle .icon {
  transition: transform 0.15s ease;
}

.trace-row__toggle[aria-expanded="true"] .icon {
  transform: rotate(90deg);
}

.trace-detail-row > td {
  background-color: var(--tblr-bg-surface-secondary, #f7f8fa);
}

.trace-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 1rem 1.25rem;
}

.trace-detail__column {
  min-width: 0;
}

/* Empty state body — narrower than the empty-state default so the
   bullet list reads naturally; the surrounding `.empty` already
   centers everything horizontally. */
.trace-empty__body {
  max-width: 42rem;
  margin-inline: auto;
}

.trace-empty__body code {
  font-size: 0.875em;
  background-color: var(--tblr-bg-surface-secondary, #f7f8fa);
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
}

.traces-filters {
  background-color: var(--tblr-bg-surface-secondary, #f7f8fa);
}

.traces-filters .form-label {
  color: var(--tblr-secondary, #6c757d);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.6875rem;
}

.trace-detail__column + .trace-detail__column {
  border-left: 1px solid var(--tblr-border-color);
  padding-left: 2rem;
}

@media (max-width: 768px) {
  .trace-detail {
    grid-template-columns: 1fr;
  }

  .trace-detail__column + .trace-detail__column {
    border-left: 0;
    border-top: 1px solid var(--tblr-border-color);
    padding-left: 0;
    padding-top: 1rem;
  }
}