/* HYPERPART: related-tables */
/* Promoted VERBATIM from Dazzle fragments.css (W2, fleet convergence).
 * The Dazzle emitter contract predates the move and is unchanged. */

/* ─────────────────────────── related-* fragments ────────────────
 * Shared chrome across related_status_cards, related_table_group,
 * related_file_list — each renders one or more "tabs" of related
 * entities. Group label, create button, and card/row hover all
 * share the same shape. */

.dz-related-group {
  margin-block-end: var(--space-md);
}

.dz-related-tab-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--colour-text-muted);
  margin-block-end: var(--space-sm);
}

.dz-related-create-row {
  display: flex;
  justify-content: flex-end;
  margin-block-end: var(--space-sm);
}

.dz-related-create-button {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding-inline: 0.625rem;
  border-radius: var(--radius-sm);
  background: var(--colour-brand);
  color: var(--colour-brand-contrast);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: filter var(--duration-fast) var(--ease-out);
}

.dz-related-create-button:hover {
  filter: brightness(1.1);
}

.dz-related-empty {
  text-align: center;
  padding-block: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

/* status_cards — auto-fit so invoice id + amount stay readable (minmax
 * floor ~14rem). Fixed 2/3-col tracks in a narrow gallery column were
 * clipping primary amounts mid-value (coherence HMC-063). */
.dz-related-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-md);
}

.dz-related-status-card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: pointer;
  transition: box-shadow var(--duration-base) var(--ease-out);
}

.dz-related-status-card:hover {
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.06);
}

.dz-related-status-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.dz-related-status-card-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.dz-related-status-card-primary {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--colour-text);
  /* Prefer wrap over ellipsis on money/id — amounts must stay legible */
  white-space: normal;
  overflow: visible;
  margin: 0;
  line-height: 1.35;
}

.dz-related-status-card-secondary {
  display: block;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  white-space: normal;
  overflow: visible;
  margin: 0;
  line-height: 1.35;
}

.dz-related-status-card-badge {
  flex-shrink: 0;
}

/* table_group — tab strip rides the HM tabs Hyperpart (Tier F4):
 * .dz-tabs__list/.dz-tabs__tab from tabs.css, driven by dz-tabs.js.
 * The bespoke .dz-related-tabs/.dz-related-tab pill family (visually
 * the same underline idiom) was retired with the Alpine activeTab
 * island. Only the count chip stays related-specific. */
.dz-related-tab-count {
  margin-inline-start: 0.25rem;
  display: inline-flex;
  align-items: center;
  padding-inline: 0.375rem;
  height: 1rem;
  border-radius: var(--radius-sm);
  background: var(--colour-bg);
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

.dz-related-table-card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-block-start: var(--space-sm);
}

.dz-related-table-create-row {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-md);
  padding-block-end: 0;
}

.dz-related-table-scroll {
  overflow-x: auto;
}

.dz-related-table {
  width: 100%;
  border-collapse: collapse;
}

.dz-related-table > thead > tr {
  background: color-mix(in oklch, var(--colour-bg) 70%, transparent);
  border-block-end: 1px solid var(--colour-border);
}

.dz-related-table th {
  text-align: start;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--colour-text-muted);
  padding-inline: var(--space-md);
  padding-block: var(--space-sm);
  letter-spacing: -0.01em;
}

.dz-related-table > tbody > tr {
  border-block-end: 1px solid var(--colour-border);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.dz-related-table > tbody > tr:last-child {
  border-block-end: 0;
}

.dz-related-table > tbody > tr:hover {
  background: var(--colour-bg);
}

.dz-related-table td {
  font-size: var(--text-sm);
  color: var(--colour-text);
  padding-inline: var(--space-md);
  padding-block: 0.625rem;
}

.dz-related-table-empty-cell {
  text-align: center;
  padding-block: var(--space-2xl);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

/* file_list — compact rows for documents/evidence */
.dz-related-file-list {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

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

.dz-related-file-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-inline: var(--space-md);
  padding-block: var(--space-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.dz-related-file-row:hover {
  background: var(--colour-bg);
}

.dz-related-file-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: color-mix(in oklch, var(--colour-text-muted) 60%, transparent);
}

.dz-related-file-text {
  flex: 1 1 0;
  min-width: 0;
}

.dz-related-file-primary {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--colour-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.dz-related-file-secondary {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.dz-related-file-date {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  flex-shrink: 0;
}