/* Lista de Processos — adaptação visual e responsiva (Fase 5).
 *
 * `rProcessos()` e `rTbl()` continuam iguais: mesmo HTML, mesmos ids, mesmos
 * `onclick`, mesma tabela. Este arquivo só reveste o que elas produzem, escopado
 * ao bloco da lista (`#tp`) e à barra de filtros — nada vaza para o Dashboard
 * nem para os outros módulos, que usam o mesmo `.caixa-dash-scope`.
 *
 * A medição da baseline nas sete larguras mostrou o problema concreto: da faixa
 * de tablet para baixo, **as linhas da tabela ficavam cortadas** — os dados só
 * eram alcançáveis rolando lateralmente dentro do quadro. No celular havia ainda
 * oito controles abaixo do alvo de toque.
 */

/* ── barra de busca e filtros ───────────────────────────────────────────── */
.caixa-dash-scope .search-wrap { position: relative; min-width: 0 }
.caixa-dash-scope .search-wrap .input { width: 100%; min-height: 38px }
.caixa-dash-scope .select { min-height: 38px }

.caixa-dash-scope .filter-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.caixa-dash-scope .filter-row .chip {
  min-height: 34px; display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; border: 1px solid #e2e8f0; background: #fff;
  color: #334155; font-size: 12.5px; padding: 0 12px;
}
.caixa-dash-scope .filter-row .chip:hover { border-color: #cbd5e1; background: #f8fafc }
.caixa-dash-scope .filter-row .chip:focus-visible {
  outline: 2px solid var(--jd-foco); outline-offset: 2px;
}
.caixa-dash-scope .filter-count {
  margin-left: auto; font-size: 12px; color: #64748b; white-space: nowrap;
}

/* ── tabela no desktop ──────────────────────────────────────────────────── */
#tp .table-wrap { overflow-x: auto }
#tp table.table { width: 100%; border-collapse: collapse }
#tp table.table th {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #64748b; text-align: left; padding: 9px 12px;
  border-bottom: 1px solid #e2e8f0; background: #f8fafc;
  white-space: nowrap;
}
#tp table.table td {
  padding: 11px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: top;
}
#tp tbody tr:last-child td { border-bottom: 0 }
#tp tbody tr.clickable { cursor: pointer; transition: background .12s ease }
#tp tbody tr.clickable:hover { background: #f8fafc }
#tp tbody tr.clickable:focus-visible { outline: 2px solid var(--jd-foco); outline-offset: -2px }

/* hierarquia: o identificador do processo domina, o resto é apoio */
#tp .cell-title {
  font-size: 13.5px; font-weight: 600; color: #0f172a; line-height: 1.35;
}
#tp .cell-sub { font-size: 11.5px; color: #64748b; line-height: 1.45 }

/* Números CNJ e nomes longos: quebram em vez de esticar a coluna. */
#tp td:first-child { max-width: 520px }
#tp .cell-title, #tp .cell-sub { overflow-wrap: anywhere }

#tp .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap }

/* ── estado vazio e carregando ──────────────────────────────────────────── */
#tp .empty-state { padding: 34px 18px; text-align: center; color: #64748b }
#tp .empty-state .es-title { font-size: 14px; font-weight: 600; color: #334155; margin-top: 8px }
#tp .empty-state .es-sub { font-size: 12.5px; margin-top: 3px }
#tp .loading { padding: 26px; text-align: center; color: #64748b; font-size: 13px }

/* ══ celular e tablet estreito: a tabela vira cartões ═══════════════════════
   Nenhuma mudança no HTML: as mesmas <tr>/<td>, os mesmos `onclick`. Cada célula
   passa a mostrar o rótulo da coluna, que no desktop está no <thead>. Assim nada
   é escondido e a linha inteira continua clicável. */
@media (max-width: 860px) {
  #tp .table-wrap { overflow-x: visible }
  #tp table.table,
  #tp table.table tbody,
  #tp table.table tr,
  #tp table.table td { display: block; width: 100% }
  #tp table.table thead { display: none }

  #tp tbody tr.clickable {
    border: 1px solid #e2e8f0; border-radius: 9px;
    padding: 12px 14px; margin-bottom: 10px; background: #fff;
  }
  #tp tbody tr.clickable:hover { background: #f8fafc; border-color: #cbd5e1 }
  #tp tbody tr:last-child { margin-bottom: 0 }

  #tp table.table td { border: 0; padding: 0 }
  /* a 1ª célula é o título do cartão; as demais viram "rótulo: valor" */
  #tp table.table td + td {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px; font-size: 12.5px; color: #334155;
  }
  #tp table.table td + td::before {
    content: attr(data-rotulo);
    flex: 0 0 62px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: #94a3b8;
  }
  #tp table.table td:nth-child(2)::before { content: 'Cliente' }
  #tp table.table td:nth-child(3)::before { content: 'Área' }
  #tp table.table td:nth-child(4)::before { content: 'Status' }
  #tp table.table td:nth-child(5)::before { content: 'Docs' }

  #tp td:first-child { max-width: none }
  #tp .cell-title { font-size: 14px }
}

/* ── celular: alvos de toque ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .caixa-dash-scope .search-wrap .input,
  .caixa-dash-scope .select { min-height: 42px }
  .caixa-dash-scope .filter-row .chip { min-height: 40px; padding: 0 14px }
  .caixa-dash-scope .filter-count { margin-left: 0; width: 100% }
  #tp tbody tr.clickable { padding: 14px }
}

/* ── impressão: filtros não vão para o papel ───────────────────────────── */
@media print {
  .caixa-dash-scope .filter-row,
  .caixa-dash-scope .search-wrap,
  .caixa-dash-scope .select { display: none !important }
}

/* ── barra de filtros ────────────────────────────────────────────────────
   Era `grid-template-columns:1fr auto auto` inline: no celular o campo de busca
   e os dois seletores não cabem lado a lado. A classe permite empilhar. */
.caixa-dash-scope .proc-filtros {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
}
@media (max-width: 767px) {
  .caixa-dash-scope .proc-filtros { grid-template-columns: 1fr }
  .caixa-dash-scope .proc-filtros .select { width: 100% !important; min-width: 0 !important }
}

/* O botão "Novo processo" do cabeçalho do cartão vinha com 24 px de altura. */
.caixa-dash-scope .card-header .btn { min-height: 34px; display: inline-flex; align-items: center; gap: 5px }
@media (max-width: 767px) {
  .caixa-dash-scope .card-header { flex-wrap: wrap; gap: 8px }
  .caixa-dash-scope .card-header .btn { min-height: 40px }
}

/* Numa célula flex, o filho não encolhe abaixo do próprio conteúdo sem
   `min-width:0` — era por isso que nome de cliente e título longos vazavam da
   borda do cartão no celular, mesmo com `overflow-wrap`. */
#tp table.table td > * { min-width: 0 }
#tp table.table td { overflow-wrap: anywhere }
@media (max-width: 860px) {
  #tp table.table td + td > span,
  #tp table.table td + td > * { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere }
  #tp table.table td:first-child > * { max-width: 100% }
}