/**
 * public/css/components.css — Componentes reutilizáveis.
 *
 * Nota: A seção "Badge de notificação" define a bolinha vermelha piscando
 * que aparece na sidebar e no dashboard quando há chamados sem resposta.
 * A animação é controlada pela classe .notif-badge e pode ser customizada
 * mudando as variáveis CSS em variables.css (--cor-perigo).
 *
 * Contém:
 *   - Botões (.btn, .btn-primario, .btn-perigo, etc.)
 *   - Cards (.card)
 *   - Badges de status (.badge, .badge-ok, .badge-inativo, etc.)
 *   - Formulários (.form-grupo, .form-label, .form-input)
 *   - Modais (.modal, .modal-conteudo)
 *   - Tabelas (.tabela)
 *   - Toasts (.toast)
 *   - Spinner de carregamento (.spinner)
 *   - Página vazia (.vazio)
 */

/* ============================================================
 * BOTÕES
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-xs);
  padding: var(--espaco-sm) var(--espaco-md);
  border: none;
  border-radius: var(--raio-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Botão primário — dourado */
.btn-primario {
  background: var(--cor-primaria);
  color: #fff;
}
.btn-primario:hover:not(:disabled) {
  background: var(--cor-primaria-escura);
}

/* Botão de perigo — vermelho */
.btn-perigo {
  background: var(--cor-perigo);
  color: #fff;
}
.btn-perigo:hover:not(:disabled) {
  background: #c82333;
}

/* Botão fantasma (outline) */
.btn-fantasma {
  background: transparent;
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
}
.btn-fantasma:hover:not(:disabled) {
  background: var(--cor-fundo);
}

/* Botão sucesso */
.btn-sucesso {
  background: var(--cor-sucesso);
  color: #fff;
}
.btn-sucesso:hover:not(:disabled) {
  background: #218838;
}

/* Botão pequeno */
.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

/* Botão com ícone apenas */
.btn-icone {
  padding: var(--espaco-xs) var(--espaco-sm);
  background: transparent;
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-secundario);
  border-radius: var(--raio-sm);
}
.btn-icone:hover {
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

/* ============================================================
 * CARDS
 * ============================================================ */

.card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: var(--espaco-lg);
  box-shadow: var(--sombra-card);
}

.card-titulo {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--espaco-md);
  color: var(--cor-texto);
}

.card-subtitulo {
  font-size: 12px;
  color: var(--cor-texto-secundario);
  margin-bottom: var(--espaco-sm);
}

/* ============================================================
 * BADGES DE STATUS
 * ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--raio-pill);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Status do cliente */
.badge-ok {
  background: var(--cor-ok-fundo);
  color: var(--cor-ok);
}
.badge-inativo {
  background: var(--cor-inativo-fundo);
  color: var(--cor-inativo);
}
.badge-atualizando {
  background: var(--cor-atualizando-fundo);
  color: var(--cor-atualizando);
}

/* Status dos tickets */
.badge-aberto {
  background: var(--cor-ticket-aberto-fundo);
  color: var(--cor-ticket-aberto);
}
.badge-em-andamento {
  background: var(--cor-ticket-em-andamento-fundo);
  color: var(--cor-ticket-em-andamento);
}
.badge-resolvido {
  background: var(--cor-ticket-resolvido-fundo);
  color: var(--cor-ticket-resolvido);
}
.badge-fechado {
  background: var(--cor-ticket-fechado-fundo);
  color: var(--cor-ticket-fechado);
}

/* ============================================================
 * FORMULÁRIOS
 * ============================================================ */

.form-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  margin-bottom: var(--espaco-md);
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--cor-texto);
}

.form-label.obrigatorio::after {
  content: ' *';
  color: var(--cor-perigo);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--espaco-sm) var(--espaco-md);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-card);
  color: var(--cor-texto);
  transition: border-color 0.15s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--cor-borda-input-foco);
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-erro {
  font-size: 12px;
  color: var(--cor-perigo);
  margin-top: 4px;
}

.form-dica {
  font-size: 12px;
  color: var(--cor-texto-secundario);
}

/* Grupo de botões no fim do formulário */
.form-acoes {
  display: flex;
  gap: var(--espaco-sm);
  justify-content: flex-end;
  margin-top: var(--espaco-lg);
}

/* Campo com botão ao lado (ex: gerar senha) */
.form-grupo-inline {
  display: flex;
  gap: var(--espaco-sm);
  align-items: flex-end;
}
.form-grupo-inline .form-input {
  flex: 1;
}

/* ============================================================
 * MODAL
 * ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--espaco-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.ativo {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--cor-fundo-card);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-modal);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.modal-overlay.ativo .modal {
  transform: scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espaco-lg);
  border-bottom: 1px solid var(--cor-borda);
}

.modal-titulo {
  font-size: 16px;
  font-weight: 600;
}

.modal-fechar {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--cor-texto-secundario);
  line-height: 1;
  padding: 4px;
  border-radius: var(--raio-sm);
}
.modal-fechar:hover {
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.modal-corpo {
  padding: var(--espaco-lg);
}

.modal-rodape {
  padding: var(--espaco-md) var(--espaco-lg);
  border-top: 1px solid var(--cor-borda);
  display: flex;
  gap: var(--espaco-sm);
  justify-content: flex-end;
}

/* ============================================================
 * TABELAS
 * ============================================================ */

.tabela-wrapper {
  overflow-x: auto; /* Scroll horizontal em mobile */
  border-radius: var(--raio-lg);
  border: 1px solid var(--cor-borda);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--cor-fundo-card);
}

.tabela thead {
  background: var(--cor-fundo);
  border-bottom: 2px solid var(--cor-borda);
}

.tabela th {
  padding: var(--espaco-sm) var(--espaco-md);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cor-texto-secundario);
  white-space: nowrap;
}

.tabela td {
  padding: var(--espaco-sm) var(--espaco-md);
  border-bottom: 1px solid var(--cor-borda);
  vertical-align: middle;
  font-size: 14px;
}

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

.tabela tbody tr:hover {
  background: var(--cor-primaria-clara);
}

/* Coluna de ações (botões) */
.tabela .coluna-acoes {
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
 * TOASTS (notificações temporárias)
 * ============================================================ */

#toast-container {
  position: fixed;
  bottom: var(--espaco-lg);
  right: var(--espaco-lg);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
  pointer-events: none;
}

.toast {
  padding: var(--espaco-sm) var(--espaco-md);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-toast);
  font-size: 14px;
  font-weight: 500;
  min-width: 200px;
  max-width: 360px;
  pointer-events: auto;
  animation: toast-entrar 0.3s ease forwards;
}

@keyframes toast-entrar {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.toast-sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border-left: 4px solid var(--cor-sucesso); }
.toast-erro    { background: var(--cor-perigo-fundo);  color: var(--cor-perigo);  border-left: 4px solid var(--cor-perigo); }
.toast-alerta  { background: var(--cor-alerta-fundo);  color: #856404;            border-left: 4px solid var(--cor-alerta); }
.toast-info    { background: var(--cor-info-fundo);    color: var(--cor-info);    border-left: 4px solid var(--cor-info); }

/* ============================================================
 * SPINNER DE CARREGAMENTO
 * ============================================================ */

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--cor-borda);
  border-top-color: var(--cor-primaria);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

.carregando-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-md);
  padding: var(--espaco-xxl);
  color: var(--cor-texto-secundario);
}

/* ============================================================
 * ESTADO VAZIO (quando não há dados)
 * ============================================================ */

.vazio {
  text-align: center;
  padding: var(--espaco-xxl);
  color: var(--cor-texto-secundario);
}

.vazio-icone {
  font-size: 48px;
  margin-bottom: var(--espaco-md);
}

.vazio-titulo {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--espaco-sm);
  color: var(--cor-texto);
}

/* ============================================================
 * CAIXA DE CREDENCIAIS (exibida após criar cliente)
 * ============================================================ */

.caixa-credenciais {
  background: var(--cor-primaria-clara);
  border: 2px solid var(--cor-primaria);
  border-radius: var(--raio-md);
  padding: var(--espaco-md);
  margin-top: var(--espaco-md);
}

.caixa-credenciais .aviso {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-primaria-escura);
  margin-bottom: var(--espaco-sm);
}

.caixa-credenciais .campo-copiavel {
  display: flex;
  align-items: center;
  gap: var(--espaco-sm);
  margin: var(--espaco-xs) 0;
}

.caixa-credenciais .campo-copiavel span {
  font-family: var(--fonte-mono);
  background: var(--cor-fundo-card);
  padding: 4px 8px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--cor-borda);
  flex: 1;
  font-size: 13px;
}

/* ============================================================
 * THREAD DE MENSAGENS (tickets)
 * ============================================================ */

.thread-mensagens {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
  max-height: 300px;
  overflow-y: auto;
  padding: var(--espaco-sm);
  background: var(--cor-fundo);
  border-radius: var(--raio-md);
  border: 1px solid var(--cor-borda);
}

.mensagem-balao {
  max-width: 80%;
  padding: var(--espaco-sm) var(--espaco-md);
  border-radius: var(--raio-md);
  font-size: 14px;
  line-height: 1.5;
}

.mensagem-balao.cliente {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  align-self: flex-start;
}

.mensagem-balao.admin {
  background: var(--cor-primaria-clara);
  border: 1px solid var(--cor-primaria);
  align-self: flex-end;
}

.mensagem-meta {
  font-size: 11px;
  color: var(--cor-texto-secundario);
  margin-top: 4px;
}

/* ============================================================
 * BARRA DE FILTROS
 * ============================================================ */

.barra-filtros {
  display: flex;
  gap: var(--espaco-sm);
  align-items: center;
  flex-wrap: wrap;
}

.filtro-btn {
  padding: 4px 12px;
  border-radius: var(--raio-pill);
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-card);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filtro-btn:hover,
.filtro-btn.ativo {
  background: var(--cor-primaria);
  color: #fff;
  border-color: var(--cor-primaria);
}

/* ============================================================
 * CAMPO DE BUSCA
 * ============================================================ */

.campo-busca {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.campo-busca input {
  width: 100%;
  padding: var(--espaco-sm) var(--espaco-md);
  padding-left: 36px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  background: var(--cor-fundo-card);
  font-size: 14px;
}

.campo-busca::before {
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
}

/* ============================================================
 * INDICADOR DE PRAZO VENCIDO
 * ============================================================ */

.prazo-vencido {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cor-perigo);
  font-size: 12px;
  font-weight: 600;
}

.prazo-ok {
  color: var(--cor-sucesso);
  font-size: 12px;
}

/* ============================================================
 * BADGE DE NOTIFICAÇÃO — bolinha vermelha piscando
 *
 * Uso: <span class="notif-badge">3</span>
 *
 * Aparece ao lado dos itens da sidebar e no botão do dashboard
 * quando há chamados aguardando resposta.
 *
 * Para mudar a cor: altere --cor-perigo em variables.css
 * Para mudar a velocidade do pulso: altere a duração em "pulso 1.4s"
 * ============================================================ */

.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--raio-pill);
  background: var(--cor-perigo);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-left: 6px;
  animation: pulso 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulso {
  0%, 100% { opacity: 1;   transform: scale(1);    box-shadow: 0 0 0 0 rgba(220,53,69,0.5); }
  50%       { opacity: 0.85; transform: scale(1.15); box-shadow: 0 0 0 5px rgba(220,53,69,0);  }
}

/* Versão sem número (só bolinha) */
.notif-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-perigo);
  margin-left: 6px;
  animation: pulso 1.4s ease-in-out infinite;
  flex-shrink: 0;
  vertical-align: middle;
}