/* app/css/lista.css
   Listas e tabelas: a tabela, os selos, a barra de busca e filtros, a
   ordenação, os quatro estados de uma lista e as linhas do painel. */

/* ── Table / list ─────────────────────────────────────────────────────── */
.dm-table { width: 100%; border-collapse: collapse; overflow-wrap: normal; }
.dm-table th, .dm-table td { padding: var(--dm-sp-3) var(--dm-sp-3); text-align: left; border-bottom: 1px solid var(--dm-border); vertical-align: top; }
.dm-table th { font-size: var(--dm-fs-sm); text-transform: uppercase; letter-spacing: 0.4px; color: var(--dm-text-3); font-weight: var(--dm-fw-forte); }
.dm-table tr:last-child td { border-bottom: 0; }
.dm-table tr.dm-row { cursor: pointer; }
.dm-table tr.dm-row:hover td { background: var(--dm-surface-2); }
.dm-num { font-family: var(--dm-mono); font-size: var(--dm-fs-sm); color: var(--dm-text-2); white-space: nowrap; }
.dm-title { font-weight: var(--dm-fw-forte); }
.dm-sub { font-size: var(--dm-fs-sm); color: var(--dm-text-3); }
.dm-empty { padding: var(--dm-sp-8); text-align: center; color: var(--dm-text-3); }
.dm-table-wrap { overflow-x: auto; }
.dm-filters { display: flex; gap: var(--dm-sp-2); flex-wrap: wrap; margin-bottom: var(--dm-sp-3); }
.dm-chip {
  padding: var(--dm-sp-1) var(--dm-sp-3); border-radius: 999px; border: 1px solid var(--dm-border);
  background: var(--dm-surface); font-size: var(--dm-fs-sm); cursor: pointer; color: var(--dm-text-2);
}
.dm-chip.dm-active { background: var(--dm-primary); color: var(--dm-on-primary); border-color: var(--dm-primary); }

/* ── Status badges (one tone per family) ──────────────────────────────── */
.dm-badge {
  display: inline-block; padding: 2px var(--dm-sp-2); border-radius: 999px;
  font-size: var(--dm-fs-sm); font-weight: var(--dm-fw-forte); white-space: nowrap;
  /* Plano B 6: o selo fica numa linha e, se não couber, corta com reticências. */
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
  background: var(--dm-muted-bg); color: var(--dm-text-2);
}
.dm-badge--aguardando_endosso { background: var(--dm-warn-bg); color: var(--dm-warn); }
.dm-badge--enviada { background: var(--dm-info-bg); color: var(--dm-info); }
.dm-badge--em_atendimento { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-badge--fechada { background: var(--dm-muted-bg); color: var(--dm-text-2); }
/* Os estados abaixo de `nova` são de antes de 26/10/2026 e só aparecem no histórico. */
.dm-badge--nova { background: var(--dm-info-bg); color: var(--dm-info); }
.dm-badge--em_triagem { background: var(--dm-warn-bg); color: var(--dm-warn); }
.dm-badge--aceita_no_ciclo { background: var(--dm-success-bg); color: var(--dm-success); }
.dm-badge--virou_tarefa { background: var(--dm-success-bg); color: var(--dm-success); }
.dm-badge--enfileirada { background: var(--dm-muted-bg); color: var(--dm-text-2); }
.dm-badge--nao_aplicavel { background: var(--dm-danger-bg); color: var(--dm-danger); }
.dm-badge--entregue { background: var(--dm-success-bg); color: var(--dm-success); }
.dm-badge--devolvida { background: var(--dm-warn-bg); color: var(--dm-warn); }
.dm-badge--em_desenvolvimento { background: var(--dm-info-bg); color: var(--dm-info); }
.dm-badge--aguardando_solicitante { background: var(--dm-muted-bg); color: var(--dm-text-2); }
.dm-badge--em_validacao { background: var(--dm-warn-bg); color: var(--dm-warn); }
.dm-badge--reaberta { background: var(--dm-danger-bg); color: var(--dm-danger); }
.dm-badge--urg-alta, .dm-badge--pri-critico { background: var(--dm-danger-bg); color: var(--dm-danger); }
.dm-badge--urg-media, .dm-badge--pri-alta { background: var(--dm-warn-bg); color: var(--dm-warn); }
.dm-badge--urg-baixa, .dm-badge--pri-media, .dm-badge--pri-baixa { background: var(--dm-muted-bg); color: var(--dm-text-2); }
/* Tons para o que não é estado nem prioridade (Ativo, Inativo). */
.dm-badge--tom-sucesso { background: var(--dm-success-bg); color: var(--dm-success); }
.dm-badge--tom-perigo { background: var(--dm-danger-bg); color: var(--dm-danger); }
.dm-overdue { color: var(--dm-danger); font-weight: var(--dm-fw-forte); }

/* ── List bar: search, filters, count ─────────────────────────────────── */
.dm-listbar { display: flex; align-items: center; gap: var(--dm-sp-3); flex-wrap: wrap; margin-bottom: var(--dm-sp-3); }
.dm-search { min-width: 280px; flex: 1 1 280px; }
.dm-select--sm { width: auto; padding: var(--dm-sp-2) var(--dm-sp-3); font-size: var(--dm-fs-md); }
.dm-listbar-count { margin-left: auto; font-size: var(--dm-fs-sm); color: var(--dm-text-3); white-space: nowrap; }
.dm-filter-status { width: auto; min-width: 150px; font-size: var(--dm-fs-sm); padding: var(--dm-sp-1) var(--dm-sp-3); }

/* ── Sortable header ──────────────────────────────────────────────────── */
.dm-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.dm-th-sort:hover { color: var(--dm-text-2); }
.dm-th-active { color: var(--dm-primary); }
.dm-sort-mark { display: inline-block; width: 1em; margin-left: var(--dm-sp-1); font-size: var(--dm-fs-xs); }

/* ── The four list states ─────────────────────────────────────────────── */
.dm-state { padding: var(--dm-sp-8); text-align: center; color: var(--dm-text-3); display: flex; flex-direction: column; align-items: center; gap: var(--dm-sp-3); }
.dm-state--error .dm-state-msg { color: var(--dm-danger); }

/* ── List rows: the unread mark, the turn, and the phone layout ────────── */
/* The painel renders both a table and a card stack from the same rows; one of
   the two is shown. A six-column table does not fit a phone, and a sideways
   scroller hides the columns that matter most. */
.dm-only-narrow { display: none; }
@media (max-width: 760px) {
  .dm-only-wide { display: none; }
  .dm-only-narrow { display: block; }
}

.dm-list-host { padding: 0; overflow: hidden; }

/* Unread: the dot plus a weight change, so the mark does not rely on colour. */
.dm-flag { width: 22px; padding-right: 0 !important; }
.dm-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dm-warn); flex: none;
}
.dm-unread .dm-title { font-weight: var(--dm-fw-titulo); }
.dm-table tr.dm-unread td { background: var(--dm-warn-bg); }
.dm-table tr.dm-unread:hover td { background: var(--dm-warn-bg); }
/* Assigned to whoever is reading. */
.dm-table tr.dm-mine td:first-child { box-shadow: inset 3px 0 0 var(--dm-primary); }

.dm-action { font-size: var(--dm-fs-sm); color: var(--dm-text-2); }
.dm-action--mine { font-weight: var(--dm-fw-forte); color: var(--dm-warn); }

/* Phone cards. */
.dm-cards { list-style: none; margin: 0; padding: 0; }
.dm-dcard {
  display: grid; gap: var(--dm-sp-1); padding: var(--dm-sp-3) var(--dm-sp-4); cursor: pointer;
  border-bottom: 1px solid var(--dm-border);
}
.dm-dcard:last-child { border-bottom: 0; }
.dm-dcard.dm-unread { background: var(--dm-warn-bg); }
.dm-dcard.dm-mine { box-shadow: inset 3px 0 0 var(--dm-primary); }
.dm-dcard-top, .dm-dcard-foot { display: flex; align-items: center; gap: var(--dm-sp-2); flex-wrap: wrap; }
.dm-dcard-foot { margin-top: var(--dm-sp-1); }
.dm-dcard-sp { flex: 1; }