/* 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: 22px; font-weight: 700; }
.page-sub { font-size: 13px; color: var(--text-2); max-width: 640px; }

.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 (mesma linguagem visual da página Seguidores:
   borda colorida no topo do card + badge de ícone) — cada página de rede
   define --net-accent inline em .content, o resto herda por CSS custom
   property. Fallback var(--border) deixa páginas sem --net-accent (Ajustes,
   Calculadora) idênticas a antes. */
.net-card { border-top: 3px solid var(--net-accent, var(--border)); }
.stat-label .net-icon { width: 20px; height: 20px; border-radius: 6px; }
.stat-label .net-icon svg { width: 12px; height: 12px; }

/* ---------- ranking top 5 ---------- */
.ranking-list { display: flex; flex-direction: column; }
.rank-item {
  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; }
.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; }
.detail-table th.num { text-align: center; }
.table-scroll { overflow-x: auto; }

/* ---------- 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; }
.chart-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; }
@media (max-width: 900px) { .chart-row-2-1, .chart-row-2 { grid-template-columns: 1fr; } }

/* 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-sm);
  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; }