const nm = el("input", {class:"inp", required:"required", placeholder:"e.g. Q1 invoices"});
    const ds = el("input", {class:"inp", placeholder:"Description (optional)"});
    openModal("New Recipient List", el("div",{class:"form"}, el("label",{},"List name"), nm, el("label",{},"Description"), ds), {
      buttons: [{ label:"Create", kind:"btn", onClick: async (close) => {
        await POST("/recipients/lists", { name: nm.value, description: ds.value });
        toast("List created", "ok"); close(); await loadLists();
      }}]
    });
  });
  $("#btnImport").addEventListener("click", () => {
    if (!state.lists.length) { toast("Create a list first", "warn"); return; }
    const sel = el("select", {class:"inp"}, ...state.lists.map(l => el("option",{value:l.id}, `${l.name} (${l.row_count})`)));
    openModal("Import into which list?", el("div",{class:"form"}, el("label",{},"Target list"), sel), {
      buttons: [{ label:"Continue", kind:"btn", onClick:(close)=>{ const id=+sel.value; close(); importModal(id); }}]
    });
  });
  $("#btnManual").addEventListener("click", () => {
    if (!state.lists.length) { toast("Create a list first", "warn"); return; }
    const sel = el("select", {class:"inp"}, ...state.lists.map(l => el("option",{value:l.id}, `${l.name} (${l.row_count})`)));
    openModal("Add to which list?", el("div",{class:"form"}, el("label",{},"Target list"), sel), {
      buttons: [{ label:"Continue", kind:"btn", onClick:(close)=>{ const id=+sel.value; close(); manualModal(id); }}]
    });
  });

  $("#listBody").addEventListener("click", (e) => {
    const b = e.target.closest("button"); if (!b) return;
    const id = +(b.dataset.view || b.dataset.import || b.dataset.clear || b.dataset.del);
    if (b.dataset.view) { state.cur = state.lists.find(l=>l.id===id); state.page=1; $("#recsCard").style.display=""; loadRecs(); }
    if (b.dataset.import) importModal(id);
    if (b.dataset.clear) confirmedAction("Remove ALL recipients from this list? The list itself is kept.", async () => {
      await POST(`/recipients/lists/${id}/clear`); toast("List cleared", "ok"); await loadLists(); if (state.cur) await loadRecs();
    });
    if (b.dataset.del) confirmedAction("Delete this list and ALL its recipients?", async () => {
      await api(`/recipients/lists/${id}`, { method:"DELETE" }); toast("List deleted", "ok");
      if (state.cur && state.cur.id === id) { state.cur=null; $("#recsCard").style.display="none"; }
      await loadLists();
    });
  });
  $("#recBody").addEventListener("click", async (e) => {
    const b = e.target.closest("button"); if (!b || !b.dataset.delrec) return;
    await api(`/recipients/${b.dataset.delrec}`, { method:"DELETE" });
    toast("Recipient deleted", "ok"); await loadRecs(); await loadLists();
  });
  $("#pager").addEventListener("click", (e) => {
    const b = e.target.closest("button"); if (!b || b.disabled) return;
    state.page = +b.dataset.pg; loadRecs();
  });
  $("#recSearch").addEventListener("input", debounce(() => { state.page=1; loadRecs(); }, 400));

  await loadLists();
};