/**
 * Importação em massa de lojas — mesmo raciocínio de `usuarios-importacao.css`:
 * só o que não existia em nenhuma tela anterior (seleção em massa numa
 * tabela, rodapé fixo de confirmação). Stepper, upload, cartões e avisos vêm
 * de `dados.css`/`importacao.css`.
 */

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

/* --- filtros em pílula + busca ------------------------------------------- */
.imp-lojas__filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
}
.imp-lojas__pilulas { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.imp-lojas__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-lojas__pilula:hover { border-color: var(--azul-500); color: var(--texto); }
.imp-lojas__pilula[aria-pressed="true"] {
  background: var(--azul-500); border-color: var(--azul-500); color: var(--neutro-0);
}
.imp-lojas__busca { flex: 1 1 16rem; min-width: 12rem; }

/* --- tabela de revisão: cabeçalho fixo dentro do próprio scroll ---------- */
.imp-lojas__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
   colunas até Regional/Marca/Status ficarem ilegíveis — a tabela é densa de
   propósito (seção 55 do pedido: "tabela, não card por loja"). */
.imp-lojas__tabela-wrapper .tabela { margin: 0; min-width: 68rem; }
.imp-lojas__tabela-wrapper .tabela thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-2);
}
.imp-lojas__tabela-wrapper .tabela td.imp-lojas__col-nome { white-space: normal; }
.imp-lojas__tabela-wrapper .tabela td.imp-lojas__col-relacionamento {
  white-space: normal; display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start;
}

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

.imp-lojas__select-relacionamento { min-width: 10rem; }

/* Badge de situação com ícone, não só cor (seção 26 do pedido: "não depender
   apenas da cor"). Reaproveita a paleta de `.selo`. */
.imp-lojas__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-lojas__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-lojas__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` — mesmo motivo de `usuarios-importacao.css`: o
   `.cartao` que envolve a tela não é ele mesmo um contêiner de scroll. */
.imp-lojas__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-lojas__rodape__resumo { font-size: var(--txt-sm); color: var(--texto-2); margin-right: auto; }

/* --- linhas em cards no mobile (seção 56 do pedido: desktop prioritário,
   mas mobile precisa funcionar) -------------------------------------------- */
@media (max-width: 720px) {
  .imp-lojas__tabela-wrapper { max-height: none; overflow-x: visible; }
  .imp-lojas__tabela-wrapper .tabela thead { display: none; }
  .imp-lojas__tabela-wrapper .tabela,
  .imp-lojas__tabela-wrapper .tabela tbody,
  .imp-lojas__tabela-wrapper .tabela tr,
  .imp-lojas__tabela-wrapper .tabela td { display: block; width: 100%; }
  .imp-lojas__tabela-wrapper .tabela tr {
    border: 1px solid var(--linha); border-radius: var(--raio);
    margin-bottom: var(--e-2); padding: var(--e-2);
  }
  .imp-lojas__tabela-wrapper .tabela td {
    border-bottom: 0; padding: 0.2rem 0; white-space: normal;
  }
  .imp-lojas__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;
  }
}