/* ============================================================
   desktop.css — classes reutilizáveis extraídas de style="" inline
   repetidos nas páginas do painel (clientes, oportunidades, planos,
   usuários, permissões, logs, WhatsApp, sidebar). Mesmo objetivo do
   web/assets/css/mobile/mobile.css: eliminar blocos de estilo
   idênticos duplicados em vários arquivos .php.

   Vários desses seletores (.filter-badge, .sort-badge, .clid-head-icon,
   .clg-head-icon) já existiam como nome de classe no HTML/JS, mas
   nunca tiveram uma regra CSS correspondente — a aparência vinha
   inteiramente do style="" repetido em cada página. Aqui centralizamos
   a definição real dessas classes.

   Carregar depois de style.css/responsive.css, antes do tema (mesma
   posição de app-fixes.css, mas sem a mesma exigência de "por último"
   — nada aqui depende de sobrescrever variável de tema).
   ============================================================ */

/* ---- Busca / larguras mínimas padronizadas ----
   .search-box-sm: input-group de busca no cabeçalho das listagens.
   .min-w-*: reaproveitado tanto em menus dropdown (filtro, column-visibility)
   quanto em colunas de tabela — é só um valor de min-width, não é
   exclusivo de dropdown. */
.search-box-sm { width: 200px; }
.min-w-180 { min-width: 180px; }
.min-w-200 { min-width: 200px; }
.min-w-230 { min-width: 230px; }

/* ---- Colunas de tabela estreitas — ações/checkboxes/badges de status ---- */
.col-w-75  { width: 75px; }
.col-w-200 { width: 200px; }

/* ---- Badge de contagem em botões de filtro/ordenação ----
   Classes já usadas em clientes/oportunidades/planos/usuários/wa-conversas/
   wa-triggers, sem CSS central — cada página duplicava o style inline. */
.filter-badge,
.sort-badge {
  font-size: 10px;
  background: rgba(var(--primary), 1);
  color: #fff;
}

/* ---- Ícones de ação no cabeçalho das páginas de comparação de log ----
   Mesma história: .clid-head-icon/.clg-head-icon já usadas no HTML/JS
   (inclusive com regras de :hover/active nas próprias páginas), só
   faltava a definição base. */
.clid-head-icon,
.clg-head-icon {
  text-decoration: none;
  vertical-align: top;
}
/* Ícones de ação da toolbar de log-tabela.php (refresh, filtro de período, filtro de usuário) */
.log-toolbar-icon { text-decoration: none; width: 2.2rem; height: 2.2rem; }
/* Spinner de carregamento (páginas de comparação de log) */
.spinner-md { width: 2.5rem; height: 2.5rem; }

/* ---- Sidebar — ícone de menu com tamanho fixo + divisor inferior por item ---- */
.menu-icon-fix { width: 1.375rem; height: 1.375rem; font-size: 1.2rem; margin-right: 0.3rem; }
.menu-link-bd  { border-bottom: 2px solid var(--bodybg-color) !important; }

/* ---- Botão "pill" moderno — totalmente arredondado, ícone+texto com gap ----
   Inspirado no padrão button-fill/button-round (ícone + label, gap:8px) pedido
   para a tela de login. Usa os ícones Phosphor que o app já carrega — não
   introduz nenhuma fonte de ícone nova só por causa deste estilo. */
.btn-pill {
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 10px;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden; /* rede de segurança: se o texto não couber, corta em vez de vazar pra fora do pill */
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-pill i,
.btn-pill [class*="ph"] {
  font-size: 15px;
  margin: 0 !important;
  flex: 0 0 auto;
  /* Botões pill aqui são sempre preenchidos (fundo sólido colorido) — força o
     ícone a branco explicitamente. Sem isso, .btn-primary herdava a cor do
     tema (rgba(var(--primary),1)) no ícone, que é a MESMA cor do fundo do
     botão — o ícone ficava "invisível" (mesma cor do botão). */
  color: #fff !important;
}
.btn-pill:hover  { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .3); }
.btn-pill:active { transform: translateY(0); }