/*
 * detail.css — entity detail-view component family (HaTchi-MaXchi).
 *
 * The record/detail view: an entity's fields as a definition list inside a
 * card, header (back / title / actions), state-machine transition buttons, and
 * related-entity groups beneath; plus the workspace `display: detail` region
 * grid and the shared in-region empty placeholder. All values route through HM
 * tokens. Migrated from Dazzle `page/runtime/static/css/components/detail.css`
 * into HM (HMC-012, aggressive-mode convergence 2026-07-08).
 */
/* ─────────────────────────── outer wrapper ──────────────────────
 * Width changes when related-groups are present (more horizontal
 * room for the grouped tables). The component template branches on
 * `detail.related_groups` to apply .dz-detail-wide. */

.dz-detail {
  max-width: 48rem;  /* ~max-w-3xl */
  margin-inline: auto;
}

.dz-detail-wide {
  max-width: 64rem;  /* ~max-w-5xl — when related groups present */
}

/* ─────────────────────────── header row ─────────────────────────
 * Back-button + title on the left, action buttons on the right. */

.dz-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-xl);
}

.dz-detail-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.dz-detail-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--colour-text);
  margin: 0;
}

.dz-detail-actions {
  display: flex;
  gap: var(--space-sm);
}

/* ─────────────────────────── transition / external rows ──────────
 * State-machine transitions, integration actions, external link
 * actions — all share the same horizontal-button-row shape with
 * a small bottom margin. */

.dz-detail-toolbar {
  display: flex;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}

/* ─────────────────────────── detail card ────────────────────────
 * The main field-list lives inside a card. */

.dz-detail-card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.dz-detail-card-body {
  padding: var(--space-lg);
}

/* ─────────────────────────── definition list ───────────────────
 * Each row is a 3-column grid on wider viewports (label takes 1,
 * value takes 2). On narrow viewports rows stack with a small gap.
 * Uses container queries so the grid adapts to the container's
 * width, not the viewport. */

.dz-detail-list {
  container-type: inline-size;
}

.dz-detail-list > * + * {
  border-block-start: 1px solid var(--colour-border);
}

.dz-detail-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: var(--space-md);
}

@container (width > 32rem) {
  .dz-detail-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-lg);
  }
}

.dz-detail-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--colour-text-muted);
}

.dz-detail-value {
  font-size: var(--text-sm);
  color: var(--colour-text);
}

/* ─────────────────────────── file value link ────────────────────
 * `field.type == "file"` renders an icon + filename link. */

.dz-detail-file-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--colour-brand);
  text-decoration: none;
}

.dz-detail-file-link:hover {
  text-decoration: underline;
}

.dz-detail-file-icon {
  width: 1rem;
  height: 1rem;
}

/* ─────────────────────────── related groups ─────────────────────
 * After the main field card, related entities (one-to-many or
 * many-to-many) render as separate groups with their own labels
 * and content (table / status_cards / file_list). */

.dz-detail-related-group {
  margin-block-start: var(--space-xl);
}

.dz-detail-related-label {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--colour-text);
  margin-block-end: var(--space-md);
}

/* ─────────────────────────── workspace detail region ───────────
 * The workspace `display: detail` region shape is different from
 * the standalone detail_view component above — it renders inside
 * a region card slot, so the chrome (border, shadow, padding) is
 * provided by .region-card; here we only style the dl grid and
 * the empty placeholder. Two-column label/value grid (label left,
 * value right) — distinct from the row-stacked .dz-detail-row above. */

.dz-detail-region-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
}

.dz-detail-region-grid > dt.dz-detail-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--colour-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.dz-detail-region-grid > dd.dz-detail-value {
  font-size: var(--text-sm);
  color: var(--colour-text);
  margin: 0;
}

/* ─────────────────────────── shared empty placeholder ──────────
 * `.dz-empty-dense` is the in-region "no data" line used by the
 * detail region and ~20 other region templates. Centralised here
 * during the detail migration; remains in this file until the
 * region migrations proper move it to a shared location. */

.dz-empty-dense {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  margin: 0;
}