/**
 * Importação em massa de usuários — só o que não existia em nenhuma tela
 * anterior: seleção em massa numa tabela e o rodapé fixo de confirmação.
 * Stepper, upload, cartões e avisos vêm de `dados.css`/`importacao.css`
 * (mesmas classes que a importação de saldo já usa).
 */

/* --- resumo compacto (seção 24 do pedido: "não usar cards gigantes") ----- */
.imp-usuarios__resumo { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* --- filtros em pílula + busca ------------------------------------------- */
.imp-usuarios__filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
}
.imp-usuarios__pilulas { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.imp-usuarios__pilula {
  border: 1px solid var(--linha); background: var(--surface);
  color: var(--texto-2); border-radius: var(--raio-pill, 999px);
  padding: 0.3rem 0.75rem; font-size: var(--txt-sm); cursor: pointer;
  line-height: 1.4;
}
.imp-usuarios__pilula:hover { border-color: var(--azul-500); color: var(--texto); }
.imp-usuarios__pilula[aria-pressed="true"] {
  background: var(--azul-500); border-color: var(--azul-500); color: var(--neutro-0);
}
.imp-usuarios__busca { flex: 1 1 16rem; min-width: 12rem; }

/* --- tabela de revisão: cabeçalho fixo dentro do próprio scroll ---------- */
.imp-usuarios__tabela-wrapper {
  max-height: min(60vh, 34rem); overflow-y: auto; overflow-x: auto;
  border: 1px solid var(--linha); border-radius: var(--raio);
}
/* `min-width` força a rolagem HORIZONTAL do wrapper em vez de espremer as
   10 colunas até o Função/Status ficarem ilegíveis — a tabela é densa de
   propósito (seção 66 do pedido: "preferir tabela densa"), então rolar de
   lado em telas menores que ~1400px é o comportamento certo, não um bug. */
.imp-usuarios__tabela-wrapper .tabela { margin: 0; min-width: 76rem; }
.imp-usuarios__tabela-wrapper .tabela thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-2);
}
.imp-usuarios__tabela-wrapper .tabela td.imp-usuarios__col-nome { white-space: normal; }
.imp-usuarios__tabela-wrapper .tabela td.imp-usuarios__col-funcao {
  white-space: normal; display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start;
}

.imp-usuarios__linha--erro td { background: color-mix(in srgb, var(--falta) 6%, transparent); }
.imp-usuarios__linha--confirmar td { background: color-mix(in srgb, var(--atencao) 8%, transparent); }
.imp-usuarios__linha--ignorada { opacity: 0.55; }

.imp-usuarios__select-perfil { min-width: 11rem; }

/* Badge de confiança/status com ícone, não só cor (seção 36 do pedido:
   "não depender apenas da cor"). Reaproveita a paleta de `.selo`. */
.imp-usuarios__badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--txt-xs); white-space: nowrap;
}

/* --- barra de ações em massa ---------------------------------------------- */
.imp-usuarios__barra-massa {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  background: var(--surface-2); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: var(--e-2) var(--e-3);
}
.imp-usuarios__barra-massa__contagem { font-size: var(--txt-sm); color: var(--texto-2); margin-right: auto; }

/* --- rodapé com o resumo final e o CTA -------------------------------------
   NÃO é `position: sticky`: o `.cartao` que envolve toda a tela não é ele
   mesmo um contêiner de scroll (quem rola é a página), então um rodapé
   sticky aqui prende ao viewport, não ao cartão — e passa a flutuar por
   CIMA das linhas da tabela em vez de ficar abaixo dela. Só a tabela
   (`.imp-usuarios__tabela-wrapper`) tem scroll próprio; o rodapé fica
   depois dela, no fluxo normal. */
.imp-usuarios__rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3);
  background: var(--surface-2); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: var(--e-3);
}
.imp-usuarios__rodape__resumo { font-size: var(--txt-sm); color: var(--texto-2); margin-right: auto; }

/* --- linhas em cards no mobile (a revisão continua utilizável, mesmo sem
   sacrificar a densidade no desktop — seção 69 do pedido) ------------------ */
@media (max-width: 720px) {
  .imp-usuarios__tabela-wrapper { max-height: none; overflow-x: visible; }
  .imp-usuarios__tabela-wrapper .tabela thead { display: none; }
  .imp-usuarios__tabela-wrapper .tabela,
  .imp-usuarios__tabela-wrapper .tabela tbody,
  .imp-usuarios__tabela-wrapper .tabela tr,
  .imp-usuarios__tabela-wrapper .tabela td { display: block; width: 100%; }
  .imp-usuarios__tabela-wrapper .tabela tr {
    border: 1px solid var(--linha); border-radius: var(--raio);
    margin-bottom: var(--e-2); padding: var(--e-2);
  }
  .imp-usuarios__tabela-wrapper .tabela td {
    border-bottom: 0; padding: 0.2rem 0; white-space: normal;
  }
  .imp-usuarios__tabela-wrapper .tabela td[data-label]::before {
    content: attr(data-label); display: block; font-size: var(--txt-xs);
    color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.02em;
  }
}