/* Compartilhado por toda página de métrica de rede (Instagram, TikTok,
   YouTube, Meta Ads, Google Ads). Cores vêm inline via JS de cada página,
   usando a paleta por-rede (design system seção 3) — nunca hardcode cor
   de marca aqui, isso quebraria o reuso entre páginas. */

.page-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-badge {
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.page-badge svg { width: 22px; height: 22px; }
.page-head h1 { margin: 0 0 2px; font-size: 24px; font-weight: 700; }
.page-sub { font-size: 13px; color: var(--text-2); max-width: 640px; }

/* ---------- cabeçalho de perfil (estilo v1 "studio header") — usado nas
   páginas de rede orgânica em vez do page-head genérico: mostra @handle e
   bio de verdade, não só o nome da rede. A legenda (.page-sub) mora DENTRO
   de .studio-info, junto com handle/bio — não como irmão solto abaixo de
   .studio-head, senão ela começa colada na margem esquerda da página em
   vez de alinhada com o texto acima dela (achado testando Instagram). */
.studio-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.studio-avatar {
  width: 48px; height: 48px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.studio-avatar svg { width: 26px; height: 26px; }
.studio-info { min-width: 0; }
.studio-info .page-sub { margin-top: 4px; }
.studio-handle { font-size: 18px; font-weight: 700; }
.studio-bio { font-size: 13px; color: var(--text-2); }
.studio-right { margin-left: auto; align-self: flex-start; }
.badge-count {
  font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--page);
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px 12px;
}

.cards-row-5 { grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.stat-label .rank { font-size: 10px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }

/* ---------- acento por-rede (2026-09: removido) — cada página de rede
   definia --net-accent inline em .content (cor da marca da rede: rosa do
   Instagram, roxo do TikTok etc.), deixando a borda de cima do card
   colorida. Migração pro Lucri DS V1 deixou o resto da UI mais sóbrio
   (preto/verde/branco) e essa cor vibrante por rede passou a destoar —
   removida a propósito, todo .net-card cai no fallback var(--border)
   (cinza neutro), igual as páginas que nunca tiveram --net-accent
   (Ajustes, Calculadora). O nome da classe ficou (renomear tocaria muitos
   arquivos sem ganho), só o acento colorido foi embora. */
.net-card { border-top: 3px solid var(--net-accent, var(--border)); position: relative; }
.stat-label .net-icon { width: 20px; height: 20px; border-radius: var(--radius-badge); }
.stat-label .net-icon svg { width: 12px; height: 12px; }

/* ---------- anel de progresso vs. meta (Ajustes > Metas por rede) ----------
   canto superior direito do card; só aparece quando há meta configurada
   pra aquela métrica/rede (goalRingHtml em metric-widgets.js retorna vazio
   sem meta). Azul enquanto não bate 100%, verde quando bate. */
.goal-ring { position: absolute; top: var(--space-3); right: var(--space-3); width: 40px; height: 40px; }
.goal-ring svg { transform: rotate(-90deg); }
.goal-ring .ring-bg { fill: none; stroke: var(--grid); }
.goal-ring .ring-value { fill: none; stroke: var(--brand-accent); stroke-linecap: round; transition: stroke-dashoffset .3s ease; }
.goal-ring.met .ring-value { stroke: var(--good); }
.goal-ring-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-1);
}

/* ---------- ranking top 5 ---------- */
.ranking-list { display: flex; flex-direction: column; }
.rank-item {
  position: relative; display: grid; grid-template-columns: 24px 1fr auto; align-items: center;
  gap: var(--space-3); padding: 10px 4px; border-bottom: 1px solid var(--grid);
}
.rank-item:last-child { border-bottom: none; }
/* barra de magnitude proporcional ao maior valor do ranking — ver applyRankBars()
   em metric-widgets.js. Sem data-bar-value/--bar-pct, fica 0% (invisível). */
.rank-item::before {
  content: ''; position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0;
  width: calc(var(--bar-pct, 0) * 1%);
  background: color-mix(in srgb, var(--net-accent, var(--brand-accent)) 10%, transparent);
  border-radius: var(--radius-sm);
}
.rank-item > * { position: relative; z-index: 1; }
.rank-pos { font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }
.rank-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rank-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.type-chip {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  padding: 2px 7px; border-radius: var(--radius-pill); color: #fff; flex-shrink: 0;
}
.rank-meta { font-size: 12px; color: var(--text-2); }
.rank-stats { display: flex; gap: var(--space-5); font-size: 12px; text-align: right; }
.rank-stats div span { display: block; font-size: 14px; font-weight: 700; color: var(--text-1); }

/* ---------- tabela detalhada ---------- */
.detail-card { margin-top: 0; }
.detail-table { font-size: 12px; }
.detail-table th, .detail-table td { padding: 8px 10px; white-space: nowrap; }
/* bate com "table td.num" (style.css) — antes só o cabeçalho centralizava
   e o dado ficava à direita, então número não alinhava com sua coluna. */
.detail-table th.num { text-align: right; }
.table-scroll { overflow-x: auto; }

/* ---------- paginação de tabelas administrativas (sheet-utils.js renderPager) ---------- */
.pager { display: flex; align-items: center; gap: 4px; margin-top: var(--space-3); flex-wrap: wrap; }
.pager-btn {
  height: 30px; min-width: 30px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--page); color: var(--text-1); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pager-btn:hover:not(:disabled) { background: var(--grid); }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-btn.active { border-color: transparent; background: var(--brand-accent); color: var(--brand-accent-text); }
.pager-ellipsis { padding: 0 4px; color: var(--text-2); font-size: 12.5px; }

/* ---------- gráfico com scroll horizontal (largura fixa por ponto) ---------- */
.chart-scroll { overflow-x: auto; }
.chart-scroll svg { display: block; }
/* item de grid tem min-width:auto por padrão (= tamanho do conteúdo, não 0) —
   sem isso, um SVG largo dentro do card força a COLUNA do grid a crescer pra
   caber o gráfico inteiro em vez de deixar o .chart-scroll rolar por dentro. */
.grid-2 > *, .chart-row-2-1 > *, .chart-row-2 > * { min-width: 0; }

/* ---------- expandir/recolher (clique no título do card) ---------- */
.collapsible { max-height: 460px; overflow-y: auto; }
.collapsible.expanded { max-height: none; }
h2.expand-toggle { cursor: pointer; user-select: none; transition: opacity .15s; }
h2.expand-toggle:hover { opacity: .65; }

/* ---------- widgets compartilhados (metric-widgets.js) ---------- */
.widget-empty { color: var(--text-2); font-size: 13px; }
.chart-row-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: stretch; margin-bottom: var(--space-4); }
.chart-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; margin-bottom: var(--space-4); }
@media (max-width: 900px) { .chart-row-2-1, .chart-row-2 { grid-template-columns: 1fr; } }
.chart-split-label { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: var(--space-2); }

/* cards soltos (fora de .cards-row/.chart-row-2*, que já têm gap próprio)
   empilhados direto em .content sem espaço nenhum entre eles — só não
   aparecia antes porque a borda de cima era cinza claro; com .net-card
   (borda colorida) a emenda ficava muito visível. */
.content > .card { margin-bottom: var(--space-4); }

/* heatmap */
.heatmap-grid { display: grid; gap: 4px; font-size: 11px; }
.heatmap-hour, .heatmap-day { color: var(--text-2); text-align: center; padding: 4px 0; }
.heatmap-day { text-align: right; padding-right: 6px; font-weight: 600; }
.heatmap-cell {
  height: 36px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-1);
}

/* card "melhor post" */
.top-card { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.top-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-meta { font-size: 12px; color: var(--text-2); }
.top-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px,1fr)); gap: var(--space-3); margin-top: auto; }
.top-stat-lbl { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: .02em; }
.top-stat-val { font-size: 16px; font-weight: 700; }
.top-footer { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--grid); font-size: 12px; color: var(--text-2); }
.top-footer-lbl { color: var(--text-2); }

/* stats agregados */
.info-card { display: flex; flex-direction: column; }
.info-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid var(--grid); }
.info-row:last-child { border-bottom: none; }
.info-lbl { font-size: 12px; color: var(--text-2); }
.info-val { font-size: 14px; font-weight: 700; }

/* grid de posts */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--space-3); }
.posts-empty { color: var(--text-2); font-size: 13px; margin: 0; padding: 8px 4px; }
.post-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-3); cursor: pointer; transition: border-color .15s;
}
.post-card:hover, .post-card:focus-visible { border-color: var(--text-2); outline: none; }
.post-card-header { margin-bottom: var(--space-3); }
.post-card-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-card-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--text-2); margin-top: 2px; }
.post-card-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.post-stat-lbl { font-size: 10px; color: var(--text-2); }
.post-stat-val { font-size: 13px; font-weight: 700; }
.post-card-footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--grid); font-size: 11px; color: var(--text-2); }
.post-footer-lbl { color: var(--text-2); }

/* modal de detalhamento */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200;
  align-items: center; justify-content: center; padding: var(--space-4);
}
.modal-overlay.open { display: flex; }
.modal-panel {
  background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--border);
  padding: var(--space-4); width: 100%; max-width: 380px; max-height: 80vh; overflow-y: auto;
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.modal-title { font-size: 15px; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--text-2); font-size: 14px; cursor: pointer; padding: 4px; line-height: 1; }
.modal-meta { font-size: 12px; color: var(--text-2); margin-top: 4px; margin-bottom: var(--space-3); }
.modal-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin: var(--space-3) 0 4px; }
.modal-section-label:first-child { margin-top: 0; }
.modal-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--grid); }
.modal-row:last-child { border-bottom: none; }
.modal-row-lbl { font-size: 12px; color: var(--text-2); }
.modal-row-val { font-size: 13px; font-weight: 700; }

.modal-ai-btn {
  width: 100%; margin-top: var(--space-3); padding: 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--page); color: var(--text-1);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.modal-ai-btn:disabled { opacity: .6; cursor: default; }
.modal-ai-result {
  display: none; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--grid);
  font-size: 13px; line-height: 1.5; color: var(--text-1); white-space: pre-wrap;
}
.modal-ai-result.show { display: block; }