/* Clientes — adaptação visual e responsiva (Fase 6).
 *
 * `rClientes()`, `renderClientes()` e `filtrarClientes()` continuam iguais:
 * mesmo HTML, mesmos ids, mesmos `onclick`. Este arquivo reveste o que elas
 * produzem, escopado em `#lista-clientes` e no cartão de Clientes.
 *
 * Segue o padrão de `processos_lista.css`, mas é arquivo próprio e escopo
 * próprio — os dois módulos não se acoplam. O que Clientes tem a mais e exigiu
 * adaptação: avatar com iniciais, três ações no cabeçalho e o modal de
 * cadastro/mesclagem.
 *
 * Baseline medida: **as quatro linhas ficavam cortadas em TODAS as sete
 * larguras**, inclusive 1280 px — pior que a Lista de Processos, porque a coluna
 * de contato carrega e-mails longos.
 */

/* ── busca ─────────────────────────────────────────────────────────────── */
#lista-clientes ~ * .search-wrap,
.caixa-dash-scope .search-wrap:has(#bqc) { min-width: 0 }
.caixa-dash-scope #bqc { width: 100%; min-height: 38px }

/* ── tabela no desktop ──────────────────────────────────────────────────── */
#lista-clientes .table-wrap { overflow-x: auto }
#lista-clientes table.table { width: 100%; border-collapse: collapse; table-layout: fixed }
#lista-clientes 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;
}
#lista-clientes table.table td {
  padding: 11px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle;
  overflow-wrap: anywhere;
}
#lista-clientes tbody tr:last-child td { border-bottom: 0 }
#lista-clientes tbody tr.clickable { cursor: pointer; transition: background .12s ease }
#lista-clientes tbody tr.clickable:hover { background: #f8fafc }
#lista-clientes tbody tr.clickable:focus-visible { outline: 2px solid var(--jd-foco); outline-offset: -2px }

/* `table-layout: fixed` só funciona com larguras declaradas. Contato é a coluna
   que estourava (e-mail longo), então recebe a folga e quebra dentro dela. */
#lista-clientes table.table th:nth-child(1) { width: 34% }
#lista-clientes table.table th:nth-child(2) { width: 26% }
#lista-clientes table.table th:nth-child(3) { width: 18% }
#lista-clientes table.table th:nth-child(4) { width: 11% }
#lista-clientes table.table th:nth-child(5) { width: 11% }

/* ── avatar e identificação ─────────────────────────────────────────────── */
#lista-clientes .avatar-cell { display: flex; align-items: center; gap: 10px; min-width: 0 }
#lista-clientes .avatar {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
#lista-clientes .avatar-main { min-width: 0 }
#lista-clientes .avatar-name {
  font-size: 13.5px; font-weight: 600; color: #0f172a; line-height: 1.35;
  overflow-wrap: anywhere;
}
#lista-clientes .avatar-sub { font-size: 11.5px; color: #64748b }

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

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

/* ══ tablet e celular: a tabela vira cartões ═══════════════════════════════
   Mesmas <tr>/<td>, mesmos `onclick`. O rótulo da coluna, que no desktop está no
   <thead>, passa a aparecer por `::before` — que é decorativo e não entra na
   árvore de acessibilidade nem intercepta clique. */
@media (max-width: 900px) {
  #lista-clientes .table-wrap { overflow-x: visible }
  #lista-clientes table.table,
  #lista-clientes table.table tbody,
  #lista-clientes table.table tr,
  #lista-clientes table.table td { display: block; width: 100% }
  #lista-clientes table.table { table-layout: auto }
  #lista-clientes table.table thead { display: none }

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

  #lista-clientes table.table td { border: 0; padding: 0 }
  #lista-clientes table.table td + td {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px; font-size: 12.5px; color: #334155;
  }
  #lista-clientes table.table td + td::before {
    flex: 0 0 74px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: #94a3b8;
  }
  #lista-clientes table.table td:nth-child(2)::before { content: 'Contato' }
  #lista-clientes table.table td:nth-child(3)::before { content: 'CPF/CNPJ' }
  #lista-clientes table.table td:nth-child(4)::before { content: 'Processos' }
  #lista-clientes table.table td:nth-child(5)::before { content: 'Status' }

  /* numa célula flex o filho não encolhe sem `min-width:0` — foi o defeito que
     a Fase 5 revelou, e aqui vale igual (e-mail longo vaza do cartão) */
  #lista-clientes table.table td > *,
  #lista-clientes table.table td + td > * { min-width: 0; overflow-wrap: anywhere }
}

/* ── celular: alvos de toque e cabeçalho com três ações ─────────────────── */
@media (max-width: 767px) {
  .caixa-dash-scope #bqc { min-height: 42px }
  .caixa-dash-scope .search-wrap { max-width: none !important }
  #lista-clientes tbody tr.clickable { padding: 14px }
  #lista-clientes .empty-state .btn { min-height: 42px }
  /* "Descobrir no DJEN", "Mesclar duplicados" e "Novo Cliente" não cabem lado a
     lado: quebram em linha, com rótulo inteiro (o nome acessível não muda). */
}

/* ── modal de cliente e de mesclagem ───────────────────────────────────── */
@media (max-width: 767px) {
  #m-generico .ig { display: block }
  #m-generico .ig .inp,
  #m-generico .ig input,
  #m-generico .ig textarea,
  #m-generico .ig select { width: 100%; min-height: 42px; box-sizing: border-box }
  #m-generico .ig textarea { min-height: 76px }
  #m-generico .modal-h { flex-wrap: wrap; gap: 6px }
  #m-generico .modal-t { overflow-wrap: anywhere }
  /* Cancelar/Salvar empilham em vez de espremer */
  #m-generico .modal-acoes,
  #m-generico .ig-acoes { display: flex; flex-wrap: wrap; gap: 8px }
  #m-generico .modal-acoes .btn,
  #m-generico .ig-acoes .btn { flex: 1 1 auto; min-height: 44px; justify-content: center }
}

/* ── impressão ─────────────────────────────────────────────────────────── */
@media print {
  .caixa-dash-scope .search-wrap { display: none !important }
}

/* (a regra do cabeçalho móvel foi para shell_jurisdelfus.css, onde pertence:
   ela é global e valia para todos os módulos, não só Clientes) */