/* components.css — kpi card, delta, date range, badges, empty states */

/* ── Seletor de cliente ─────────────────────────────────────────────── */
.client-select {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--paper);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-family: var(--font);
  font-size: 0.9rem;
  min-width: 180px;
}
.client-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 0.4rem; }

/* ── Seletor de datas ───────────────────────────────────────────────── */
.date-inputs { display: flex; align-items: center; gap: 0.5rem; }
.date-inputs input[type="date"] {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--paper);
  border-radius: var(--radius-md);
  padding: 0.45rem 0.6rem;
  font-family: var(--font);
  font-size: 0.85rem;
  color-scheme: dark;
}
[data-theme="light"] .date-inputs input[type="date"] { color-scheme: light; }
.date-inputs span { color: var(--muted); font-size: 0.85rem; }

.preset-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--paper);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: var(--font);
}
.chip:hover { border-color: var(--blue); }
.chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.compare-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.compare-toggle input { accent-color: var(--blue); }

.granularity-tabs { display: flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.granularity-tabs button {
  background: var(--card-bg);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  padding: 0.45rem 0.8rem;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: var(--font);
}
.granularity-tabs button:last-child { border-right: none; }
.granularity-tabs button.active { background: var(--blue); color: #fff; }

/* ── KPI card (liquid glass) ──────────────────────────────────────────
   Fundo translúcido + blur revela o glow do body por trás (ver
   layout.css), borda clara fina + sombra funda simulam a borda/realce de
   vidro; inset highlight no topo é o "brilho" da borda superior. */
.kpi-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 1.1rem 1.25rem;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  transition: background 0.2s ease, transform 0.2s ease;
}
.kpi-card:hover { background: var(--glass-bg-hover); }
.kpi-lbl { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.3rem; }
.kpi-lbl .info { cursor: help; opacity: 0.7; }
.kpi-val { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.3rem; }
.delta { font-size: 0.78rem; font-weight: 700; padding: 2px 0; display: inline-block; }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.delta.flat { color: var(--muted); }
.delta-prev { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }

/* ── Badge de snapshot (não afetado pelo período) ──────────────────── */
.snapshot-badge {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.snapshot-badge strong { color: var(--paper); }

/* ── GMB: seletor de unidade ────────────────────────────────────────── */
.location-select {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--paper);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.6rem;
  font-family: var(--font);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* ── Estados vazio/carregando ───────────────────────────────────────── */
.empty-state, .loading-state {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

/* ── Grupo de anúncios (Google Ads: keywords agrupadas por ad group) ─── */
.ad-group-block { margin-bottom: 1.25rem; }
.ad-group-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--paper);
  background: var(--glass-bg-hover);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 0.6rem;
}

/* ── Tabela genérica (anúncios Meta Ads / keywords Google Ads) ───────── */
.data-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  margin-bottom: 1.5rem;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; white-space: nowrap; }
.data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--glass-border); }
.data-table thead th { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.03em; background: transparent; }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--paper); }
.data-table th.sortable.active { color: var(--blue); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--glass-bg-hover); }

.ad-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; display: block; }
.ad-thumb-empty { width: 44px; height: 44px; border-radius: 10px; background: var(--glass-bg); border: 1px dashed var(--glass-border); }

/* ── Pontos da análise semanal (✅/⚠️/🔧) ─────────────────────────────── */
.weekly-bullets-week { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.9rem; }
.weekly-bullets-group { margin-bottom: 1.25rem; }
.weekly-bullets-group h4 { font-size: 0.85rem; margin-bottom: 0.5rem; }
.weekly-bullets-group ul { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.weekly-bullets-group li {
  font-size: 0.85rem;
  padding: 0.75rem 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--radius-glass) * 0.6);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}

/* Tingimento leve por tipo — ✅ verde / ⚠️ amarelo / 🔧 azul (os dois
   sub-blocos de Plano, pronto e aguardando, levam a mesma cor) — camada
   de cor por cima do glass base, não substitui o blur/sombra. */
.weekly-bullets-group.wb-ok li { background: linear-gradient(rgba(87, 196, 13, 0.14), rgba(87, 196, 13, 0.14)), var(--glass-bg); border-color: rgba(87, 196, 13, 0.28); }
.weekly-bullets-group.wb-warn li { background: linear-gradient(rgba(242, 183, 5, 0.16), rgba(242, 183, 5, 0.16)), var(--glass-bg); border-color: rgba(242, 183, 5, 0.3); }
.weekly-bullets-group.wb-plan li { background: linear-gradient(rgba(26, 107, 255, 0.14), rgba(26, 107, 255, 0.14)), var(--glass-bg); border-color: rgba(26, 107, 255, 0.28); }