/* 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; }
/* Uma palavra sem espaço não pode alargar a coluna e empurrar as outras para fora. */
.dm-title { font-weight: var(--dm-fw-forte); overflow-wrap: anywhere; }
/* "12/11/2026 · atrasada" pode descer de linha: é a coluna que mais alargava a tabela. */
.dm-num.dm-previsao { white-space: normal; }
.dm-title-link { color: inherit; text-decoration: none; }
.dm-title-link:hover { text-decoration: underline; }
.dm-title-link:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.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); }
/* O amarelo do papel de teste, o mesmo do nome no alto (shell.css). */
.dm-badge--tom-aviso { background: var(--dm-warn-bg); color: var(--dm-warn); box-shadow: inset 0 0 0 1px var(--dm-warn); }
.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-listbar-count { margin-left: auto; font-size: var(--dm-fs-sm); color: var(--dm-text-3); white-space: nowrap; }

/* ── Column header: opens the column's sort and filter menu ───────────── */
.dm-th-btn {
  all: unset; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
}
.dm-th-btn:hover { color: var(--dm-text-2); }
.dm-th-btn:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
.dm-th-btn::after { content: "▾"; margin-left: var(--dm-sp-1); font-size: var(--dm-fs-xs); opacity: 0.6; }
.dm-th-active { color: var(--dm-primary); }
.dm-sort-mark { 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; }
}

/* As visões do painel: seis cartões; no telefone, dois por linha e mais baixos. */
.dm-stats--visoes { margin-bottom: var(--dm-sp-5); }
@media (max-width: 760px) {
  /* Em rem: com a letra no dobro, um cartão por linha em vez de rótulo partido. */
  .dm-stats--visoes { grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); gap: var(--dm-sp-2); }
  .dm-stats--visoes .dm-stat { padding: var(--dm-sp-2) var(--dm-sp-3); }
}

.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; }
.dm-list-host + .dm-card { margin-top: var(--dm-sp-5); }