/* ────────────────────────────────────────────────────────────────────
   JSON Detail Table
   Renderização chave/valor recursiva para payloads de auditoria,
   anexos de bureaus e outros campos JSON exibidos no admin.
   Linkado por: _JsonDetailTable.cshtml + _JsonDetailNode.cshtml
   ──────────────────────────────────────────────────────────────────── */

.json-detail-wrapper {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-secondary, #1e293b);
}

.json-detail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.json-detail-table th,
.json-detail-table td {
  padding: 0.5rem 0.75rem;
  vertical-align: top;
  border-bottom: 1px solid var(--color-surface-200, #e2e8f0);
  word-break: break-word;
}

.json-detail-table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary, #475569);
  background: var(--color-surface-100, #f8fafc);
  width: 30%;
  min-width: 8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
}

.json-detail-table td {
  background: var(--color-surface, #ffffff);
}

/* Tabelas aninhadas: removem o gap visual e ganham borda lateral pra indicar nesting */
.json-detail-table .json-detail-table {
  margin: -0.5rem -0.75rem;
  border-left: 2px solid var(--color-surface-300, #cbd5e1);
}

.json-detail-table .json-detail-table th {
  background: var(--color-hover-muted, #f1f5f9);
}

.json-detail-array > tbody > tr > .json-detail-key {
  color: var(--color-tone-slate, #94a3b8);
  font-style: italic;
}

.json-detail-string {
  color: var(--color-secondary, #1e293b);
}

.json-detail-number {
  color: var(--color-info, #2563eb);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.json-detail-bool {
  color: var(--color-tone-purple, #7c3aed);
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.json-detail-null {
  color: var(--color-tone-slate, #94a3b8);
  font-style: italic;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.json-detail-empty {
  color: var(--color-tone-slate, #94a3b8);
  font-style: italic;
  margin: 0;
}

.json-detail-empty-marker {
  color: var(--color-tone-slate, #94a3b8);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
}

/* Fallback para texto não-JSON: bloco monospace com quebra suave */
.json-detail-raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
  background: var(--color-hover-muted, #f1f5f9);
  border: 1px solid var(--color-surface-200, #e2e8f0);
  border-radius: 6px;
  padding: 0.75rem;
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-secondary, #1e293b);
}

/* Quando dois blocos lado a lado (audit diff antes/depois): respiro visual */
.audit-diff-grid .json-detail-wrapper,
.audit-diff-grid .json-detail-raw {
  height: 100%;
}