/* Página Seguidores — porta a aba "Seguidores" do v1 (dado mensal por
   rede, [SEGUIDORES]) pro 2.0. Reaproveita .card/.cards-row/.page-head já
   existentes em style.css/metric-page.css, só o que é específico daqui. */

/* .goal-ring (metric-page.css) é position:absolute — precisa de um
   ancestral position:relative, que os cards de rede aqui não tinham
   (diferente de .net-card nas páginas de métrica). */
.cards-row .card { position: relative; }

.seg-kpi-sub { font-size: 12px; margin-top: 4px; }
.seg-kpi-sub .gain { color: var(--good); font-weight: 600; }
.seg-kpi-sub .loss { color: var(--critical); font-weight: 600; }

.seg-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.seg-chart-card { border-top: 3px solid var(--grid); }
.seg-chart-header { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: var(--space-3); }
.seg-chart-header .net-icon { width: 22px; height: 22px; }

.seg-year-label {
  margin: var(--space-5) 0 var(--space-3);
  font-size: 12px; font-weight: 700; color: var(--text-2);
  letter-spacing: .04em; text-transform: uppercase;
}

.seg-tables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--space-4); }
.seg-table-card { padding: var(--space-4); }
.seg-table-header { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: var(--space-3); }
.seg-table-header .net-icon { width: 22px; height: 22px; }
.seg-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.seg-table th, .seg-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--grid); }
.seg-table th:first-child, .seg-table td:first-child { text-align: left; }
.seg-table th { color: var(--text-2); font-weight: 500; font-size: 11px; }
.seg-table td.gain { color: var(--good); }
.seg-table td.loss { color: var(--critical); }

/* ---------- editar histórico (banco de dados, ver functions/api/historico/seguidores.js) ---------- */
.hist-seg-card { margin-top: var(--space-5); }
.hist-seg-card .ajustes-hint { font-size: 12px; color: var(--text-2); margin: -4px 0 var(--space-4); }
.hist-seg-form {
  display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-3); padding: var(--space-4);
  background: var(--page); border: 1px solid var(--border); border-radius: var(--radius-md);
}
/* .form-field em si (label empilhado sobre o campo) só existia em
   relatorio.css, que esta página não carrega — sem isso o label ficava
   colado no input em vez de em cima, empilhado sem espaçamento. */
.hist-seg-form .form-field { display: flex; flex-direction: column; gap: 4px; }
.hist-seg-form .form-field label { font-size: 11px; color: var(--text-2); font-weight: 600; }
.hist-seg-form .form-field input, .hist-seg-form .form-field select {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px;
  font-size: 13px; background: var(--surface); color: var(--text-1); font-family: inherit; width: 110px;
}
/* mesmo motivo do .form-field acima — botão "Salvar" não tinha estilo
   nenhum nesta página, só existia como .rep-week-preset-btn em relatorio.css */
.hist-seg-form .rep-week-preset-btn {
  display: flex; align-items: center; gap: 6px; padding: 9px 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-1); font-size: 12px; font-weight: 600; cursor: pointer;
}
.hist-seg-form .rep-week-preset-btn:hover { border-color: var(--brand-accent); }
.hist-seg-form .rep-week-preset-btn.primary { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-accent-text); }
.hist-seg-status { font-size: 12px; margin: 0 0 var(--space-3); min-height: 16px; }
.hist-seg-status.ok { color: var(--good); }
.hist-seg-status.err { color: var(--critical); }
.hist-seg-row-del {
  border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px; text-decoration: underline;
}
.hist-seg-row-del:hover { color: var(--critical); }