/* Compartilhado por Meta Ads e Google Ads — funil de conversão e ranking
   top 3 por CTR. Reusa page-head/cards-row-5/rank-item/detail-table de
   metric-page.css; isso aqui só adiciona o que é específico de ads. */

/* ---------- funil (forma "corneta", estilo UTMify) ---------- */
.funnel { overflow-x: auto; }
.funnel-svg { display: block; }
.funnel-divider { stroke: var(--border); stroke-width: 1; opacity: .6; }
.funnel-v2-lbl { font-size: 11px; font-weight: 700; fill: var(--text-2); text-transform: uppercase; letter-spacing: .02em; }
.funnel-v2-pct { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.funnel-v2-pct-out { font-size: 13px; font-weight: 800; fill: var(--text-1); font-variant-numeric: tabular-nums; }
.funnel-v2-val { font-size: 12px; font-weight: 600; fill: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- top 3 ---------- */
.top3-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--space-3); }
.top3-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); }
.top3-rank { font-size: 11px; font-weight: 700; color: var(--muted); }
.top3-name { font-size: 13px; font-weight: 600; margin: 4px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top3-path { font-size: 11px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; }
.top3-stats { display: flex; gap: var(--space-4); }
.top3-stats div span { display: block; font-size: 14px; font-weight: 700; }
.top3-stats div small { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: .02em; }

.ads-empty { color: var(--text-2); font-size: 13px; padding: 8px 4px; }

/* ---------- múltiplas tabelas de detalhamento empilhadas ---------- */
.detail-card + .detail-card { margin-top: var(--space-4); }

/* ---------- comparativo Meta vs Google (Tráfego Pago Geral) ---------- */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--space-3); }
.compare-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); display: flex; flex-direction: column; }
.compare-metric-label { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: var(--space-2); }
.compare-sides { display: flex; gap: var(--space-3); flex: 1; }
.compare-side { flex: 1; padding: 8px; border-radius: var(--radius-sm); background: var(--page); display: flex; flex-direction: column; justify-content: center; }
.compare-side-lbl { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--text-2); }
.compare-side-val { display: block; font-size: 15px; font-weight: 700; margin-top: 2px; }
.compare-side.win { background: color-mix(in srgb, var(--good) 12%, transparent); }
.compare-side.win .compare-side-val { color: var(--good); }

/* ---------- filtro de campanha (topbar, ao lado do period-picker) — select
   nativo estilizado igual .date-trigger-btn, pra ficar no mesmo idioma
   visual do seletor de período que já mora ali do lado. ---------- */
.campaign-filter { position: relative; }
.campaign-filter select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  display: block; min-width: 190px; max-width: 240px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 30px 8px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-1);
  cursor: pointer; text-overflow: ellipsis;
}
.campaign-filter select:hover, .campaign-filter select:focus { border-color: var(--brand-accent); outline: none; }
.campaign-filter::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
@media (max-width: 900px) { .campaign-filter select { min-width: 0; flex: 1 1 140px; } }

/* ---------- toggle colapsável das tabelas de "Detalhamento" (item 12,
   fechado por padrão) ---------- */
.detail-toggle {
  width: 28px; height: 28px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-2); flex-shrink: 0;
}
.detail-toggle:hover { border-color: var(--brand-accent); }
.detail-toggle svg { width: 14px; height: 14px; transition: transform .15s; }
.detail-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- cabeçalhos ordenáveis (tabela de palavras-chave, Google Ads) —
   cada métrica sempre ordena maior→menor ao clicar, Grupo de Anúncio sempre
   A→Z; não é toggle (uma direção fixa por coluna, ver item 16 do pedido). */
.sortable-table th.sortable { cursor: pointer; user-select: none; }
.sortable-table th.sortable:hover { color: var(--text-1); }
.sortable-table .sort-arrow { font-size: 9px; opacity: .35; margin-left: 2px; }
.sortable-table th.sortable.active { color: var(--brand-accent); }
.sortable-table th.sortable.active .sort-arrow { opacity: 1; }

/* ---------- Comportamento de Leads (lead-behavior.js) — barras
   horizontais agrupadas em HTML/CSS (rótulos de resposta são longos, não cabem
   num eixo SVG). Cor nunca sozinha: cada barra leva o nome do público na linha. ---------- */
.lb-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lb-select { position: relative; }
.lb-select select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  display: block; max-width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 30px 8px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-1);
  cursor: pointer; text-overflow: ellipsis;
}
.lb-select select:hover, .lb-select select:focus { border-color: var(--brand-accent); outline: none; }
.lb-select::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.lb-base { font-size: 12px; color: var(--text-2); margin-bottom: var(--space-3); }
.lb-group { margin-bottom: var(--space-4); }
.lb-group:last-child { margin-bottom: 0; }
.lb-group-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.lb-bar-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 4px; }
.lb-bar-name { flex: 0 0 108px; font-size: 11px; font-weight: 600; color: var(--text-2); }
.lb-track { flex: 1; height: 14px; background: var(--grid); border-radius: 4px; overflow: hidden; }
.lb-fill { height: 100%; border-radius: 4px; min-width: 2px; }
.lb-val { flex: 0 0 76px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 600px) { .lb-bar-name { flex-basis: 84px; } .lb-val { flex-basis: 64px; } }