/* Editar Dados — form de lançamento manual em historico_posts, ver
   editar-dados.js + functions/api/historico/posts.js. Campos agrupados em
   seções (mesmo padrão de hierarquia visual do resto do dashboard — cards
   com título, não um form plano) + badge de rede que muda de cor/ícone
   junto com o seletor, igual ao .page-badge de cada página de métrica. */

.ed-form .form-field { display: flex; flex-direction: column; gap: 4px; }
.ed-form .form-field label { font-size: 11px; color: var(--text-2); font-weight: 600; }
.ed-form .form-field input, .ed-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: 128px;
}
.ed-form .form-field input[type="date"] { width: 148px; }
/* Interações/Taxa Replay/Engajamento/Retenção — calculados a partir dos
   outros campos (ver recalcDerived() em editar-dados.js), nunca digitados
   na mão. readonly em vez de disabled pra continuar indo no payload/tab
   order normalmente, só sem aceitar digitação. */
.ed-form .form-field input[readonly] { background: var(--grid); color: var(--text-2); cursor: default; }
/* Campo escondido pelo JS conforme a rede selecionada (nem toda rede usa
   todo campo — ex. YouTube não tem "Alcance") — display:none no lugar de
   remover do DOM, pra não perder o valor já digitado ao trocar de rede sem
   querer. */
.ed-form .form-field[hidden] { display: none; }

.ed-form-head {
  display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4); margin-bottom: var(--space-3);
  background: var(--page); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.ed-net-badge {
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background-color .15s ease;
}
.ed-net-badge svg { width: 22px; height: 22px; }

.ed-form-section {
  padding: var(--space-4); margin-bottom: var(--space-3);
  background: var(--page); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.ed-section-title { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; margin-bottom: var(--space-3); }
.ed-section-fields { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Seção some inteira quando nenhum campo dela se aplica à rede selecionada
   (ex. "Watch time" pra Stories) — evita título de seção vazio na tela. */
.ed-form-section.ed-section-empty { display: none; }

.ed-form-actions { display: flex; align-items: center; gap: var(--space-2); }
.ed-form .rep-week-preset-btn {
  display: flex; align-items: center; gap: 6px; padding: 9px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-1); font-size: 12px; font-weight: 600; cursor: pointer;
}
.ed-form .rep-week-preset-btn:hover { border-color: var(--brand-accent); }
.ed-form .rep-week-preset-btn.primary { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-accent-text); }
/* display:flex acima tem mais especificidade que o UA stylesheet do
   atributo [hidden] (display:none) — sem isso "Cancelar edição" ficava
   sempre visível, mesmo escondido via `.hidden = true` no JS. */
.ed-form .rep-week-preset-btn[hidden] { display: none; }

.ed-status { font-size: 12px; margin: var(--space-3) 0 0; min-height: 16px; }
.ed-status.ok { color: var(--good); }
.ed-status.err { color: var(--critical); }

.ed-list-filters { display: flex; gap: var(--space-2); margin-left: auto; }
.ed-list-filters select, .ed-list-filters input {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 9px;
  font-size: 12.5px; background: var(--surface); color: var(--text-1); font-family: inherit;
}

/* Cabeçalho clicável pra ordenar a lista (ver sortRows() em editar-dados.js)
   — clique alterna asc/desc na coluna; a seta some nas colunas que não são
   a ordenação ativa no momento. */
.ed-sortable { cursor: pointer; user-select: none; }
.ed-sortable:hover { color: var(--text-1); }
.ed-sortable .ed-sort-arrow { margin-left: 4px; opacity: .4; }
.ed-sortable.ed-sort-active .ed-sort-arrow { opacity: 1; color: var(--brand-accent); }

.ed-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ed-row-btn {
  width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.ed-row-btn svg { width: 13px; height: 13px; }
.ed-row-btn:hover { border-color: var(--brand-accent); color: var(--text-1); }
.ed-row-btn.danger:hover { border-color: var(--critical); color: var(--critical); }

/* ---------- edição inline dentro do card de uma página de rede (ver
   instagram.js) — mesmo form acima, só com o botão "Adicionar post" +
   filtro de ano no cabeçalho do card em vez de numa página própria. ---------- */
.ed-inline-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.ed-year-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.ed-year-input {
  width: 72px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 9px;
  font-size: 12.5px; background: var(--surface); color: var(--text-1); font-family: inherit;
}

/* ---------- edição direto na linha da tabela (sem form separado) — a linha
   em edição troca texto estático por input, mesma largura de coluna, com
   fundo levemente destacado pra ficar claro qual linha está aberta. ---------- */
.ed-editable-table tr.ed-row-editing { background: color-mix(in srgb, var(--brand-accent) 8%, transparent); }
.ed-editable-table input, .ed-editable-table select, .ed-editable-table textarea {
  width: 100%; min-width: 64px; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 6px; font-size: 12.5px; background: var(--surface); color: var(--text-1); font-family: inherit;
}
.ed-editable-table textarea { min-width: 160px; resize: vertical; }
.ed-copy-cell {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: var(--text-2);
}
.ed-editable-table td:has(input[type="date"]) input,
.ed-editable-table td:has(input[type="text"]) input,
.ed-editable-table td:has(select) select { min-width: 110px; }
.ed-editable-table input[readonly] { background: var(--grid); color: var(--text-2); cursor: default; }
.ed-editable-table input[type="number"] { text-align: right; }
/* ID do post — mesmo texto puro nas duas colunas de mostrar/editar, só que
   monoespaçado (facilita comparar/copiar contra a URL real do post). */
.ed-post-id { font-family: "SFMono-Regular", Menlo, monospace; font-size: 11.5px; color: var(--text-2); }
.ed-editable-table td:has(#igRowPostId) input { font-family: "SFMono-Regular", Menlo, monospace; font-size: 11.5px; }