/* app/css/demanda.css
   A tela de uma demanda: o detalhe, o histórico e os painéis do lado. */

/* ── Demand detail ────────────────────────────────────────────────────── */
.dm-detail { display: grid; grid-template-columns: 2fr 1fr; gap: var(--dm-sp-5); align-items: start; }
/* Uma coluna de grade não encolhe abaixo do seu conteúdo sem isto, e um texto
   grande empurrava a página para o lado. */
.dm-detail > div { min-width: 0; }
/* Os cartões da coluna do lado ficam separados, não colados um no outro. */
.dm-detail > div:last-child { display: grid; gap: var(--dm-sp-4); align-content: start; }
@media (max-width: 760px) { .dm-detail { grid-template-columns: 1fr; } }
.dm-detail-head { display: flex; align-items: center; gap: var(--dm-sp-3); flex-wrap: wrap; margin-bottom: var(--dm-sp-2); }
.dm-detail h1 { font-size: var(--dm-fs-lg); margin: 0 0 var(--dm-sp-3); }
.dm-block { margin-bottom: var(--dm-sp-5); }
.dm-block-l { font-size: var(--dm-fs-sm); font-weight: var(--dm-fw-forte); color: var(--dm-text-3); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: var(--dm-sp-1); }
.dm-block-v { white-space: pre-wrap; overflow-wrap: anywhere; }
.dm-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--dm-sp-2) var(--dm-sp-4); font-size: var(--dm-fs-md); }
.dm-kv dt { color: var(--dm-text-3); }
.dm-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ── Timeline ─────────────────────────────────────────────────────────── */
.dm-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--dm-border); }
.dm-timeline li { position: relative; padding: 0 0 var(--dm-sp-4) var(--dm-sp-5); }
.dm-timeline li::before {
  content: ""; position: absolute; left: -7px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--dm-surface); border: 2px solid var(--dm-primary);
}
.dm-timeline li.dm-ev--comment::before { border-color: var(--dm-accent); }
.dm-ev-head { font-size: var(--dm-fs-sm); color: var(--dm-text-2); }
.dm-ev-head strong { color: var(--dm-text); }
.dm-ev-body { margin-top: var(--dm-sp-1); white-space: pre-wrap; }
.dm-ev-time { font-size: var(--dm-fs-sm); color: var(--dm-text-3); }
.dm-comment-box { margin-top: var(--dm-sp-3); }

/* ── Demand page: the turn line, internal rows ─────────────────────────── */
.dm-turn { font-size: var(--dm-fs-sm); color: var(--dm-text-2); margin: var(--dm-sp-2) 0 0; }
.dm-turn--mine { color: var(--dm-warn); font-weight: var(--dm-fw-forte); }
.dm-internal { border-color: var(--dm-warn); }
.dm-ev--internal { border-left-color: var(--dm-warn); background: var(--dm-warn-bg); border-radius: 0 var(--dm-radius-sm) var(--dm-radius-sm) 0; }
.dm-tag-int {
  font-size: var(--dm-fs-xs); text-transform: uppercase; letter-spacing: 0.5px; font-weight: var(--dm-fw-forte);
  background: var(--dm-warn); color: var(--dm-on-primary);
  padding: 1px var(--dm-sp-1); border-radius: 3px; margin-left: var(--dm-sp-2);
}
.dm-tag-resposta {
  font-size: var(--dm-fs-xs); text-transform: uppercase; letter-spacing: 0.5px; font-weight: var(--dm-fw-forte);
  background: var(--dm-info); color: var(--dm-on-primary);
  padding: 1px var(--dm-sp-1); border-radius: 3px; margin-left: var(--dm-sp-2);
}
.dm-pede-resposta { display: flex; align-items: center; gap: var(--dm-sp-2); font-size: var(--dm-fs-md); color: var(--dm-text-2); cursor: pointer; margin-right: auto; }
.dm-pede-resposta input { width: 16px; height: 16px; accent-color: var(--dm-primary); }

.dm-action-card { border-color: var(--dm-warn); }
.dm-action-row { flex-wrap: wrap; gap: var(--dm-sp-2); }
.dm-claim { display: flex; align-items: center; justify-content: space-between; gap: var(--dm-sp-3); flex-wrap: wrap; }
.dm-claim .dm-sub { margin: 0; }
.dm-claim .dm-form-actions { margin-top: 0; }