/* ===================================================================
   components.css — só o que o Bootstrap NÃO tem, no desenho do NotaFácil
   (notafacil/adm/css/components.css): marca, cabeçalho de tela, busca com
   lupa, filtro em pílulas, cartão com tabela colada, selos e o login.
=================================================================== */

/* Marca: quadradinho preto com o balão + o nome. Fica no header e no login. */
.wb-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text);
  white-space: nowrap;
}

.wb-marca__icone {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-lima);
  display: grid;
  place-items: center;
  font-size: 17px;
}

/* Cabeçalho de tela: título + explicação à esquerda, botão à direita. */
.wb-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.wb-page-header h1 {
  font-size: 24px;
  margin-bottom: 4px;
}

.wb-page-header p {
  color: var(--color-text-muted);
  margin: 0;
}

/* Linha de filtros: pílulas à esquerda, busca à direita. */
.wb-filtros {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.wb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.wb-chip {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
}

.wb-chip:hover {
  background: var(--color-primary-light);
}

.wb-chip b {
  margin-left: 4px;
  color: var(--color-text-muted);
}

.wb-chip.is-ativo {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.wb-chip.is-ativo b {
  color: var(--color-lima);
}

.wb-busca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 0.5rem 0.85rem;
  background: var(--color-surface);
  flex: 0 1 320px;
  min-width: 220px;
}

.wb-busca:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(92, 118, 46, 0.15);
}

.wb-busca i {
  color: var(--color-text-muted);
}

.wb-busca input {
  border: none;
  outline: none;
  background: none;
  font-size: 14px;
  width: 100%;
  color: var(--color-text);
}

/* Cartão com a tabela colada nas bordas (o .nf-card--flush do NotaFácil). */
.wb-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.wb-tabela {
  width: 100%;
  margin: 0;
  font-size: 14px;
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--color-primary-light);
}

.wb-tabela th,
.wb-tabela td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  white-space: nowrap;
}

.wb-tabela th {
  background: var(--color-primary-light);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: 700;
}

.wb-tabela tbody tr:last-child td {
  border-bottom: none;
}

/* No celular a tabela precisa caber sem rolar para o lado: menos folga e o
   nome da loja pode quebrar em duas linhas. */
@media (max-width: 767.98px) {
  .wb-tabela th,
  .wb-tabela td {
    padding: 12px 8px;
  }

  .wb-tabela td:first-child {
    white-space: normal;
  }

  .wb-acoes {
    gap: 4px;
  }

  .wb-acoes .btn-sm {
    --bs-btn-padding-x: 0.55rem;
  }
}

/* Botões da linha (Abrir, Editar, Excluir) lado a lado. */
.wb-acoes {
  display: inline-flex;
  gap: 8px;
}

.wb-tabela__vazio {
  text-align: center;
  color: var(--color-text-muted);
  padding: 40px 16px !important;
  white-space: normal !important;
}

/* Selo (pílula com bolinha): o estado do bot. Cor E texto, nunca só cor. */
.wb-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-primary-light);
  color: var(--color-text-muted);
}

.wb-selo::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.wb-selo--ligado {
  background: rgba(61, 122, 46, 0.12);
  color: var(--color-success);
}

/* Esperando o QR Code: âmbar. Desconectado: vermelho. */
.wb-selo--espera {
  background: rgba(168, 118, 26, 0.14);
  color: #8a5f12;
}

.wb-selo--caiu {
  background: rgba(179, 56, 44, 0.12);
  color: var(--color-danger);
}

/* Nome da loja na lista: é o link para a tela dela. */
.wb-link-forte {
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

.wb-link-forte:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Nome do provedor: etiqueta discreta, para não competir com o selo. */
.wb-provedor {
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--color-text-muted);
}

/* Tela do cliente --------------------------------------------------------- */

.wb-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: 8px;
}

/* Abas: a de agora fica preta com o traço embaixo. */
.wb-abas {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}

.wb-aba {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.wb-aba.is-ativa {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

/* As abas são links (cada uma é uma tela). No celular as cinco não cabem
   lado a lado: a faixa rola para o lado em vez de quebrar a linha. */
a.wb-aba {
  text-decoration: none;
  white-space: nowrap;
}

a.wb-aba:hover {
  color: var(--color-text);
}

.wb-abas {
  overflow-x: auto;
  scrollbar-width: none;
}

.wb-card--corpo {
  padding: 22px;
}

/* Dados à esquerda, QR à direita. No celular o QR desce. */
.wb-conexao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
}

.wb-conexao__dados {
  display: grid;
  gap: 18px;
}

.wb-dados {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
}

.wb-dados dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.wb-dados dd {
  margin: 0;
}

.wb-qr {
  width: 280px;
  max-width: 100%;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
}

.wb-qr img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  margin-bottom: 12px;
}

.wb-qr p {
  font-size: 13px;
  margin-bottom: 6px;
}

@media (max-width: 767.98px) {
  .wb-conexao {
    grid-template-columns: 1fr;
  }

  .wb-dados {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .wb-dados dd {
    margin-bottom: 10px;
  }

  .wb-qr {
    justify-self: center;
  }
}

/* Confirmação do SweetAlert2 no mesmo desenho dos modais e botões. */
/* Aba Menu: árvore | formulário | prévia ----------------------------------- */

.wb-menu-editor {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 280px;
  min-height: 420px;
}

.wb-arvore {
  border-right: 1px solid var(--color-border);
  padding: 8px 0;
}

.wb-arvore__menu {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 6px;
}

/* Botões que parecem linha de lista: a árvore inteira é clicável. */
.wb-arvore__titulo,
.wb-arvore__opcao,
.wb-arvore__nova {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  color: var(--color-text);
  font: inherit;
}

.wb-arvore__titulo {
  padding: 8px 14px 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}

.wb-arvore__titulo small {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 11px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0 7px;
}

.wb-arvore__titulo i {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-muted);
}

.wb-arvore__opcao {
  padding: 5px 14px 5px 22px;
  font-size: 14px;
}

.wb-arvore__titulo:hover,
.wb-arvore__opcao:hover {
  background: var(--color-primary-light);
}

.wb-arvore__titulo.is-ativa,
.wb-arvore__opcao.is-ativa {
  background: var(--color-primary-light);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.wb-arvore__numero {
  width: 20px;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.wb-arvore__rotulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-arvore__opcao em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.wb-arvore__vazio {
  margin: 0;
  padding: 4px 14px 4px 22px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.wb-arvore__nova {
  padding: 4px 14px 6px 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
}

.wb-arvore__nova--menu {
  padding-left: 14px;
}

.wb-menu-editor__meio {
  padding: 20px;
}

/* A prévia tem o fundo bege do WhatsApp e o balão branco de quem recebe. */
.wb-previa {
  border-left: 1px solid var(--color-border);
  background: #e9e4dc;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wb-previa__titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.wb-balao {
  background: #fff;
  border-radius: 2px 10px 10px 10px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
  overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
  .wb-menu-editor {
    grid-template-columns: 1fr;
  }

  .wb-arvore {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .wb-previa {
    border-left: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

/* Aba Atendentes: o "quem atende quando o cliente se perde" ---------------- */

.wb-reserva {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
}

.wb-reserva .form-select {
  width: auto;
  min-width: 180px;
}

/* Aba Horário e textos ----------------------------------------------------- */

.wb-semana {
  display: grid;
  gap: 8px;
  max-width: 460px;
}

.wb-semana__dia {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
}

.wb-semana__horas {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wb-semana__horas .form-control {
  width: 110px;
}

/* O botão de salvar fica sempre à vista: a aba é comprida (sete dias e dez textos). */
.wb-salvar-fixo {
  position: sticky;
  bottom: 0;
  padding: 12px 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  z-index: 5;
}

@media (max-width: 767.98px) {
  .wb-salvar-fixo {
    bottom: var(--bottom-nav-height);
  }
}

/* Aba Conversas ------------------------------------------------------------
   Duas colunas: a lista de quem escreveu e a conversa aberta. Cada uma rola
   sozinha, para a conversa comprida não empurrar a lista para fora da tela.
   No celular fica uma coluna por vez (is-lendo = a conversa está aberta). */

.wb-conversas {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: max(480px, calc(100vh - 250px));
}

.wb-conversas__lista {
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wb-conversas__topo {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--color-border);
}

.wb-conversas__topo .wb-busca {
  flex: 1;
  min-width: 0;
}

#con-contatos {
  overflow-y: auto;
}

.wb-conversas__vazio {
  color: var(--color-text-muted);
  font-size: 14px;
  text-align: center;
  padding: 32px 16px;
  margin: 0;
}

.wb-contato {
  display: grid;
  gap: 3px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 10px 14px;
  color: var(--color-text);
}

.wb-contato:hover {
  background: var(--color-primary-light);
}

.wb-contato.is-ativo {
  background: var(--color-primary-light);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.wb-contato__linha {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.wb-contato__linha small,
.wb-contato__telefone {
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.wb-contato__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.wb-conversas__conversa {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wb-conversas__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 57px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}

/* O fundo bege do WhatsApp, o mesmo da prévia do Menu. */
.wb-linha {
  flex: 1;
  overflow-y: auto;
  background: #e9e4dc;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wb-linha__dia {
  align-self: center;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 6px;
}

/* Por que o bot não respondeu a mensagem de cima. */
.wb-linha__nota {
  align-self: flex-start;
  max-width: 78%;
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: -4px;
}

.wb-msg {
  max-width: 78%;
  padding: 7px 10px 6px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}

.wb-msg time {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--color-text-muted);
}

.wb-msg__quem {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.wb-msg--cliente {
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 2px;
}

.wb-msg--bot,
.wb-msg--loja {
  align-self: flex-end;
  background: #d9fdd3;
  border-top-right-radius: 2px;
}

.wb-msg--falha {
  background: #fde4e1;
  border: 1px solid var(--color-danger);
}

/* O aviso ao atendente não é balão da conversa: é um registro no meio dela. */
.wb-aviso {
  align-self: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 12px;
  color: var(--color-success);
  text-align: center;
}

.wb-aviso--falha {
  border-radius: 10px;
  border-color: var(--color-danger);
  background: #fde4e1;
  color: var(--color-text);
  padding: 8px 12px;
  max-width: 78%;
  text-align: left;
}

.wb-aviso--falha > b {
  color: var(--color-danger);
}

.wb-falha {
  white-space: normal;
  display: grid;
  gap: 6px;
  justify-items: start;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(179, 56, 44, .3);
  text-align: left;
}

.wb-falha > b {
  color: var(--color-danger);
}

.wb-falha small {
  color: var(--color-text-muted);
  font-size: 11px;
}

@media (max-width: 991.98px) {
  .wb-conversas {
    grid-template-columns: 1fr;
    height: max(480px, calc(100vh - 250px - var(--bottom-nav-height)));
  }

  .wb-conversas__lista {
    border-right: 0;
  }

  .wb-conversas.is-lendo .wb-conversas__lista,
  .wb-conversas:not(.is-lendo) .wb-conversas__conversa {
    display: none;
  }

  .wb-msg,
  .wb-aviso--falha {
    max-width: 90%;
  }
}

.swal2-popup {
  border-radius: var(--radius);
  background: var(--color-surface);
  font-family: var(--font-base);
}

.swal2-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
}

.swal2-styled {
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
}

/* Login ------------------------------------------------------------------ */

.wb-login-pagina {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.wb-login-cartao {
  width: 100%;
  max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 36px 34px;
}

.wb-login-cartao__topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 28px;
}

.wb-login-cartao__topo .wb-marca {
  margin-bottom: 18px;
}

.wb-login-cartao__topo h1 {
  font-size: 22px;
  margin-bottom: 4px;
}

.wb-login-cartao__topo p {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0;
}