/*
 * DETALHE (pares rótulo + valor)
 * Apresenta dados de uma entidade em modo leitura (telas de detalhe).
 * Cada item é um rótulo discreto acima do valor. Itens se organizam
 * em grade que se adapta à largura. Agrupados por seções com divisor.
 */

/* Seção de detalhe: um título de grupo opcional e a grade de itens. */
.detail-section + .detail-section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.detail-section__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Duas colunas explícitas de cards no show (esquerda mais densa, direita
   complementar), empilhando em 1 coluna no mobile. */
.detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Variante assimétrica: coluna principal mais larga (ex.: imóvel). */
.detail-cols--2-1 {
  grid-template-columns: 2fr 1fr;
}

.detail-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* Último card de cada coluna estica para preencher a altura, deixando o
   rodapé das colunas no mesmo nível (ex.: Endereço alinha com Observações). */
.detail-col > .card:last-child {
  flex: 1;
}

/* Card que ocupa a linha inteira (largura das 2 colunas). */
.detail-row-full {
  margin-bottom: var(--space-4);
}

/* Dois cards lado a lado dentro de uma coluna (ex.: garantia + responsáveis).
   Empilham no mobile. */
.detail-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

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

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

/* Lista de definições: rótulo à esquerda, valor à direita, uma por linha.
   (Distinta da .detail-grid, que põe o rótulo acima do valor.) */
.detail-defs {
  display: flex;
  flex-direction: column;
}

.detail-def {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.detail-def + .detail-def {
  border-top: var(--border-width) solid var(--color-border);
}

/* Rótulo em coluna fixa: assim os valores alinham todos no mesmo X,
   começando na coluna da direita (em vez de colados no canto direito). */
.detail-def__label {
  flex: 0 0 10rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.detail-def__value {
  flex: 1;
  min-width: 0;
  text-align: left;
  color: var(--color-text);
  word-break: break-word;
}

/* Cabeçalho do card de detalhe: título à esquerda, complemento (ex.: badge
   de status) à direita, na mesma linha. */
.detail-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.detail-card__head .detail-card__title {
  margin-bottom: 0;
}

/* Título de seção dentro de um card de detalhe: forte (cor de texto), para
   destacar do conteúdo (rótulos discretos vêm em muted). */
.detail-card__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

/* Variante para card sem padding (ex.: card de tabela): o título recebe o
   recuo lateral que o card não dá. */
.detail-card__title--inset {
  padding: var(--space-5) var(--space-5) 0;
}

/* Grade de pares: colunas que se ajustam, quebram no mobile. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
}

/* Cada célula do .detail-grid: agrupa um par rótulo+valor. min-width:0
   permite que valores longos quebrem em vez de esticar a coluna. */
.detail__item {
  min-width: 0;
}

/* Cada par: rótulo pequeno em cima, valor abaixo. */
.detail__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.detail__value {
  color: var(--color-text);
}

/* Estado vazio dentro de uma seção de detalhe: discreto, à esquerda. */
.detail__empty {
  color: var(--color-text-muted);
}

/* Estado vazio em card sem padding (ex.: card de tabela): recebe recuo. */
.detail__empty--inset {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
}

/* Texto livre de detalhe (ex.: observações). Parágrafos com espaçamento. */
.detail__text {
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.detail__text p {
  margin: 0 0 var(--space-2);
}

.detail__text p:last-child {
  margin-bottom: 0;
}