// Recursive MLS — Add/Edit companion flows: Start chooser, Drafts dashboard, Media manager.
const { useState } = React;

const RC_DRAFTS = [
  { id: "d1", addr: "18 Elderwood", city: "San Antonio, TX 78248", source: "address", pct: 62, edited: "2 min ago", retain: "29 days", status: "draft", photo: 3 },
  { id: "d2", addr: "402 Rivermist", city: "San Antonio, TX 78216", source: "copy", pct: 88, edited: "yesterday", retain: "27 days", status: "pending", photo: 1 },
  { id: "d3", addr: "9 Champions Run", city: "San Antonio, TX 78258", source: "cma", pct: 34, edited: "3 days ago", retain: "24 days", status: "draft", photo: 0 },
  { id: "d4", addr: "127 Alta Vista", city: "San Antonio, TX 78209", source: "blank", pct: 12, edited: "1 week ago", retain: "20 days", status: "draft", photo: 0 },
];
const SRC_ICON = { address: "map-pin", copy: "copy", cma: "line-chart", blank: "file" };
const SRC_LABEL = { address: "From address", copy: "Copied listing", cma: "From CMA", blank: "Blank form" };

/* ============================ A1 · Start chooser ============================ */
function StartChooser({ go }) {
  const D = window.RC_DATA;
  const cards = [
    { key: "address", icon: "map-pin", title: "Start from address", body: "Type the address — we prefill up to ~80% from public records and prior listings.", accent: true },
    { key: "copy", icon: "copy", title: "Copy a listing", body: "Duplicate one of your listings. Copies everything except photos, status, dates, and attribution." },
    { key: "cma", icon: "line-chart", title: "From CMA", body: "Carry over the subject property and pricing from a comparative market analysis." },
    { key: "blank", icon: "file-plus", title: "Blank form", body: "Start with an empty form and enter every field yourself." },
  ];
  const [addr, setAddr] = useState("");
  const sugg = ["18 Elderwood, San Antonio, TX 78248", "1804 Elmwood St, San Antonio, TX 78201", "18 Elmhurst Ave, Alamo Heights, TX 78209"];
  return (
    <div style={{ padding: "26px 30px 60px", maxWidth: 1040, margin: "0 auto" }}>
      <div style={{ marginBottom: 22 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <h1 style={{ margin: 0, fontSize: 24, fontWeight: 600, letterSpacing: "-0.6px", color: "#1d241f" }}>New listing</h1>
          <ProvBadgeTenant />
        </div>
        <p style={{ margin: "6px 0 0", fontSize: 14, color: "#8a8e88" }}>Choose how you'd like to start. Address-first is fastest — we do the typing for you.</p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
        {cards.map((c) => (
          <button key={c.key} onClick={() => go && go("addedit")} style={{ textAlign: "left", cursor: "pointer", fontFamily: "inherit", background: "#fff", border: 0,
            borderRadius: 12, padding: 22, boxShadow: c.accent ? "inset 0 0 0 1.5px #006747" : "inset 0 0 0 1px rgba(0,0,0,.08)", display: "flex", flexDirection: "column", gap: 12, position: "relative" }}>
            <span style={{ width: 44, height: 44, borderRadius: 10, background: c.accent ? "#006747" : "#eef4f1", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name={c.icon} size={22} color={c.accent ? "#fff" : "#006747"} />
            </span>
            <div>
              <div style={{ fontSize: 17, fontWeight: 600, color: "#1d241f", display: "flex", alignItems: "center", gap: 8 }}>{c.title}{c.accent && <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: ".5px", color: "#006747", background: "#eef4f1", borderRadius: 999, padding: "2px 8px" }}>FASTEST</span>}</div>
              <div style={{ fontSize: 13, color: "#8a8e88", lineHeight: 1.5, marginTop: 5 }}>{c.body}</div>
            </div>
            {c.key === "address" && (
              <div onClick={(e) => e.stopPropagation()} style={{ marginTop: 2 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 9, background: "#f6f5f1", border: "1px solid #e7e5df", borderRadius: 8, padding: "10px 12px" }}>
                  <Icon name="search" size={16} color="#8a8e88" />
                  <input value={addr} onChange={(e) => setAddr(e.target.value)} placeholder="123 Main St, San Antonio, TX" style={{ flex: 1, border: 0, background: "transparent", outline: 0, fontFamily: "inherit", fontSize: 13.5, color: "#1d241f" }} />
                </div>
                {addr && (
                  <div style={{ marginTop: 6, background: "#fff", borderRadius: 8, boxShadow: "0 6px 20px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.07)", overflow: "hidden" }}>
                    {sugg.filter((s) => s.toLowerCase().includes(addr.toLowerCase())).slice(0, 3).map((s) => (
                      <div key={s} onClick={() => go && go("addedit")} className="rc-row" style={{ display: "flex", alignItems: "center", gap: 9, padding: "9px 12px", cursor: "pointer", fontSize: 13 }}>
                        <Icon name="map-pin" size={14} color="#006747" /> {s}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}
            {c.key === "copy" && <div style={{ display: "flex", gap: 6, marginTop: 2 }}>{D.myListings.slice(0, 3).map((l) => <span key={l.id} style={{ fontSize: 11, color: "#6b706a", background: "#f4f3ef", borderRadius: 6, padding: "4px 8px" }}>{l.addr}</span>)}</div>}
          </button>
        ))}
      </div>

      {/* My drafts resume */}
      <div style={{ marginTop: 30 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
          <h2 style={{ margin: 0, fontSize: 16, fontWeight: 600, color: "#1d241f" }}>Resume a draft</h2>
          <button onClick={() => go && go("drafts")} style={{ ...btnOutline, padding: "7px 13px", fontSize: 12.5 }}>All drafts <Icon name="arrow-right" size={14} color="#006747" /></button>
        </div>
        <div style={{ background: "#fff", borderRadius: 10, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.07)", overflow: "hidden" }}>
          {RC_DRAFTS.slice(0, 3).map((d, i) => (
            <div key={d.id} onClick={() => go && go("addedit")} className="rc-row" style={{ display: "flex", alignItems: "center", gap: 14, padding: "13px 16px", cursor: "pointer", borderTop: i ? "1px solid #f4f3ee" : "none" }}>
              <Icon name={SRC_ICON[d.source]} size={17} color="#8a8e88" />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: "#1d241f" }}>{d.addr}</div>
                <div style={{ fontSize: 12, color: "#8a8e88" }}>{d.city} · {SRC_LABEL[d.source]}</div>
              </div>
              <div style={{ width: 120 }}><PctBar pct={d.pct} /></div>
              <div style={{ fontSize: 12, color: "#8a8e88", width: 90, textAlign: "right" }}>{d.edited}</div>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11.5, color: "#9a6a12" }}><Icon name="clock" size={12} color="#c0a24a" /> {d.retain}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ============================ A5 · Drafts dashboard ============================ */
function DraftsDashboard({ go }) {
  const [sort, setSort] = useState("edited");
  const list = [...RC_DRAFTS];
  return (
    <div style={{ padding: "22px 30px 60px", maxWidth: 1040, margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 18, flexWrap: "wrap", gap: 12 }}>
        <div>
          <h1 style={{ margin: 0, fontSize: 24, fontWeight: 600, letterSpacing: "-0.6px", color: "#1d241f" }}>My drafts</h1>
          <p style={{ margin: "6px 0 0", fontSize: 14, color: "#8a8e88" }}>{list.length} in progress · unfinished drafts auto-delete after 30 days.</p>
        </div>
        <button onClick={() => go && go("newlisting")} style={btnPrimary}><Icon name="plus" size={15} color="#fff" /> New listing</button>
      </div>

      <div style={{ background: "#fff", borderRadius: 10, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.07)", overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 130px 150px 120px 150px", gap: 12, padding: "11px 18px", background: "#faf9f5", borderBottom: "1px solid #f1f0ea", fontSize: 11, fontWeight: 600, letterSpacing: ".4px", textTransform: "uppercase", color: "#a8aca6" }}>
          {[["addr", "Listing"], ["source", "Source"], ["pct", "Completeness"], ["edited", "Last edited"], ["", "Actions"]].map(([k, l]) => (
            <button key={l} onClick={() => k && setSort(k)} style={{ textAlign: "left", border: 0, background: "transparent", cursor: k ? "pointer" : "default", fontFamily: "inherit", fontSize: 11, fontWeight: 600, letterSpacing: ".4px", textTransform: "uppercase", color: sort === k ? "#006747" : "#a8aca6", padding: 0 }}>{l}</button>
          ))}
        </div>
        {list.map((d, i) => (
          <div key={d.id} style={{ display: "grid", gridTemplateColumns: "1fr 130px 150px 120px 150px", gap: 12, padding: "14px 18px", alignItems: "center", borderTop: i ? "1px solid #f4f3ee" : "none" }} className="rc-row">
            <div style={{ display: "flex", alignItems: "center", gap: 11, minWidth: 0 }}>
              <div style={{ width: 40, height: 40, borderRadius: 7, background: d.photo ? "#e7e1d4" : "#f4f3ef", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={d.photo ? "image" : "image-off"} size={17} color="#a8aca6" /></div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: "#1d241f", display: "flex", alignItems: "center", gap: 8 }}>{d.addr}
                  {d.status === "pending" && <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: ".4px", color: "#9a6a12", background: "#fbf2dc", borderRadius: 999, padding: "2px 8px" }}>PENDING APPROVAL</span>}
                </div>
                <div style={{ fontSize: 12, color: "#8a8e88" }}>{d.city}</div>
              </div>
            </div>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "#6b706a" }}><Icon name={SRC_ICON[d.source]} size={14} color="#8a8e88" /> {SRC_LABEL[d.source]}</span>
            <PctBar pct={d.pct} />
            <span style={{ fontSize: 12.5, color: "#8a8e88" }}>{d.edited}</span>
            <div style={{ display: "flex", gap: 6 }}>
              {d.status === "pending" ? (
                <>
                  <button style={{ ...btnTiny2, background: "#eef4f1", color: "#006747", border: "1px solid #cfe3d8" }}><Icon name="check" size={12} color="#006747" /> Approve</button>
                  <button style={{ ...btnTiny2, background: "#fff", color: "#b3261e", border: "1px solid #f0d6d3" }}>Reject</button>
                </>
              ) : (
                <>
                  <button onClick={() => go && go("addedit")} style={{ ...btnTiny2, background: "#006747", color: "#fff", border: 0 }}>Resume</button>
                  <button style={{ ...btnTiny2, background: "#fff", color: "#8a8e88", border: "1px solid #e6e4dc" }}>Discard</button>
                </>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============================ A4 · Photos & Media manager ============================ */
function MediaManager({ go }) {
  const D = window.RC_DATA;
  const base = [...D.gallery(3), ...D.gallery(1), ...D.gallery(4)].slice(0, 8);
  const [photos, setPhotos] = useState(base.map((src, i) => ({ id: i, src, cap: i === 0 ? "Front elevation at dusk" : "" })));
  const move = (i, dir) => { const j = i + dir; if (j < 0 || j >= photos.length) return; const n = [...photos]; [n[i], n[j]] = [n[j], n[i]]; setPhotos(n); };
  const del = (id) => setPhotos(photos.filter((p) => p.id !== id));
  const [tags, setTags] = useState([
    { id: "t1", field: "PoolFeatures", value: "In Ground", from: "photo 3", state: null },
    { id: "t2", field: "Flooring", value: "Hardwood", from: "photo 5", state: null },
    { id: "t3", field: "Cooling", value: "Central Air", from: "photo 2", state: null },
    { id: "t4", field: "PoolFeatures", value: "Heated", from: "photo 3", state: null },
  ]);
  const setTag = (id, s) => setTags(tags.map((t) => t.id === id ? { ...t, state: s } : t));
  const pending = tags.filter((t) => !t.state).length;
  const min = 12;

  return (
    <div style={{ padding: "20px 30px 60px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
        <button onClick={() => go && go("addedit")} style={iconBtnA}><Icon name="arrow-left" size={17} color="#4a504a" /></button>
        <div style={{ flex: 1 }}>
          <h1 style={{ margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: "-0.5px", color: "#1d241f" }}>Photos & media</h1>
          <p style={{ margin: "3px 0 0", fontSize: 13, color: "#8a8e88" }}>18 Elderwood · drag to reorder or use the arrows · first photo is the cover.</p>
        </div>
        <PhotoMeter n={photos.length} min={min} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) 340px", gap: 22, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {/* upload zone */}
          <div style={{ border: "1.5px dashed #cfcdc2", borderRadius: 12, padding: "22px", display: "flex", alignItems: "center", gap: 16, background: "#fbfaf7" }}>
            <span style={{ width: 48, height: 48, borderRadius: 10, background: "#eef4f1", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name="upload-cloud" size={24} color="#006747" /></span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14.5, fontWeight: 600, color: "#1d241f" }}>Drag photos here or browse</div>
              <div style={{ fontSize: 12.5, color: "#8a8e88", marginTop: 2 }}>JPG / PNG up to 25MB · up to 3 upload at once · min {min}, max 50</div>
            </div>
            <button style={btnPrimary}><Icon name="image-plus" size={15} color="#fff" /> Add photos</button>
          </div>
          {/* uploading progress example */}
          <div style={{ background: "#fff", borderRadius: 10, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.07)", padding: "12px 14px", display: "flex", alignItems: "center", gap: 12 }}>
            <Icon name="loader" size={16} color="#006747" style={{ animation: "rc-spin 1s linear infinite" }} />
            <span style={{ fontSize: 13, color: "#4a504a", flex: 1 }}>Uploading <strong>kitchen-wide.jpg</strong> · 2 more queued</span>
            <div style={{ width: 140 }}><div style={{ height: 6, borderRadius: 3, background: "#eeede7" }}><div style={{ width: "64%", height: "100%", borderRadius: 3, background: "#006747" }} /></div></div>
            <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 12, color: "#8a8e88" }}>64%</span>
          </div>
          {/* grid */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
            {photos.map((p, i) => (
              <div key={p.id} style={{ background: "#fff", borderRadius: 9, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.08)", overflow: "hidden" }}>
                <div style={{ position: "relative", aspectRatio: "4/3", backgroundImage: `url(${p.src})`, backgroundSize: "cover", backgroundPosition: "center" }}>
                  {i === 0 ? <span style={{ position: "absolute", top: 7, left: 7, fontSize: 9.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".5px", background: "#006747", color: "#fff", padding: "3px 7px", borderRadius: 4 }}>Cover</span>
                    : <button onClick={() => move(i, -photos.length)} style={{ position: "absolute", top: 7, left: 7, ...tileBtn, fontSize: 10.5, padding: "3px 7px", width: "auto" }}>Set as cover</button>}
                  <div style={{ position: "absolute", top: 7, right: 7, display: "flex", gap: 4 }}>
                    <button title="Rotate" style={tileBtn}><Icon name="rotate-cw" size={13} color="#4a504a" /></button>
                    <button title="Delete" onClick={() => del(p.id)} style={tileBtn}><Icon name="trash-2" size={13} color="#b3261e" /></button>
                  </div>
                  <div style={{ position: "absolute", bottom: 7, right: 7, display: "flex", gap: 4 }}>
                    <button onClick={() => move(i, -1)} style={tileBtn}><Icon name="chevron-left" size={14} color="#4a504a" /></button>
                    <button onClick={() => move(i, 1)} style={tileBtn}><Icon name="chevron-right" size={14} color="#4a504a" /></button>
                  </div>
                </div>
                <input value={p.cap} onChange={(e) => setPhotos(photos.map((x) => x.id === p.id ? { ...x, cap: e.target.value } : x))} placeholder="Add caption…" style={{ width: "100%", border: 0, borderTop: "1px solid #f1f0ea", padding: "8px 10px", fontFamily: "inherit", fontSize: 12, color: "#4a504a", outline: 0, boxSizing: "border-box" }} />
              </div>
            ))}
          </div>
          {/* media rows */}
          <MediaRow icon="video" title="Virtual tour" sub="Branded &amp; unbranded tour links" value="Matterport · 2 links" />
          <MediaRow icon="youtube" title="Video" sub="Walkthrough or aerial video URLs" value="1 video" />
          <MediaRow icon="file-text" title="Documents" sub="Lattice-tenant document vault" value={null} gated />
        </div>

        {/* AI feature-tagging review tray */}
        <div style={{ position: "sticky", top: 20, background: "#fff", borderRadius: 12, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.08)", overflow: "hidden" }}>
          <div style={{ padding: "14px 16px", borderBottom: "1px solid #f1f0ea", display: "flex", alignItems: "center", gap: 9 }}>
            <span style={{ width: 26, height: 26, borderRadius: 7, background: "#fbf2dc", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="sparkles" size={15} color="#9a6a12" /></span>
            <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 600, color: "#1d241f" }}>AI feature tags</div><div style={{ fontSize: 11.5, color: "#8a8e88" }}>{pending} to review · from your photos</div></div>
          </div>
          <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8 }}>
            {tags.map((t) => {
              const F = window.RC_FIELDS; const prov = (F.byKey(t.field) || { provenance: "standard" }).provenance;
              return (
                <div key={t.id} style={{ borderRadius: 9, background: t.state === "in" ? "#f5f9f7" : t.state === "out" ? "#faf9f5" : "#fbfaf7", boxShadow: "inset 0 0 0 1px rgba(0,0,0,.06)", padding: 11, opacity: t.state === "out" ? 0.55 : 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ fontSize: 11, fontWeight: 600, color: "#6b706a" }}>{(F.byKey(t.field) || { label: t.field }).label}</span>
                    <ProvChip prov={prov} size="xs" withLabel={false} />
                    <span style={{ marginLeft: "auto", fontSize: 10.5, color: "#a8aca6" }}>from {t.from}</span>
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: "#1d241f", margin: "5px 0 9px" }}>{t.value}</div>
                  {t.state ? (
                    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11.5, fontWeight: 600, color: t.state === "in" ? "#1f8a5b" : "#8a8e88" }}>
                      <Icon name={t.state === "in" ? "check-circle-2" : "x-circle"} size={13} color={t.state === "in" ? "#1f8a5b" : "#8a8e88"} /> {t.state === "in" ? "Added to field" : "Dismissed"}
                    </span>
                  ) : (
                    <div style={{ display: "flex", gap: 7 }}>
                      <button onClick={() => setTag(t.id, "in")} style={{ ...btnTiny2, background: "#006747", color: "#fff", border: 0, flex: 1, justifyContent: "center" }}>Accept</button>
                      <button onClick={() => setTag(t.id, "out")} style={{ ...btnTiny2, background: "#fff", color: "#8a8e88", border: "1px solid #e6e4dc", flex: 1, justifyContent: "center" }}>Dismiss</button>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

function MediaRow({ icon, title, sub, value, gated }) {
  return (
    <div style={{ background: gated ? "#faf9f5" : "#fff", borderRadius: 10, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.07)", padding: "14px 16px", display: "flex", alignItems: "center", gap: 13 }}>
      <span style={{ width: 38, height: 38, borderRadius: 8, background: "#f4f3ef", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={icon} size={18} color="#8a8e88" /></span>
      <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 600, color: "#1d241f" }} dangerouslySetInnerHTML={{ __html: title }} /><div style={{ fontSize: 12, color: "#8a8e88", marginTop: 1 }} dangerouslySetInnerHTML={{ __html: sub }} /></div>
      {gated ? <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11.5, color: "#9a6a12", background: "#fbf2dc", borderRadius: 999, padding: "5px 11px" }}><Icon name="lock" size={12} color="#9a6a12" /> Lattice tenants only</span>
        : value ? <span style={{ fontSize: 12.5, color: "#4a504a", fontWeight: 500 }}>{value}</span> : null}
      {!gated && <button style={{ ...btnTiny2, background: "#fff", color: "#006747", border: "1px solid #d9d7cd" }}><Icon name="plus" size={12} color="#006747" /> Add</button>}
    </div>
  );
}

/* ---- shared bits ---- */
function PctBar({ pct }) {
  const col = pct >= 80 ? "#1f8a5b" : pct >= 50 ? "#9a6a12" : "#c0612f";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <div style={{ flex: 1, height: 6, borderRadius: 3, background: "#eeede7", overflow: "hidden" }}><div style={{ width: pct + "%", height: "100%", background: col }} /></div>
      <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 11.5, color: col, fontWeight: 700, width: 34, textAlign: "right" }}>{pct}%</span>
    </div>
  );
}
function PhotoMeter({ n, min }) {
  const ok = n >= min;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, background: ok ? "#e8f4ee" : "#faf0e8", borderRadius: 10, padding: "9px 14px" }}>
      <Icon name={ok ? "shield-check" : "images"} size={17} color={ok ? "#1f8a5b" : "#c0612f"} />
      <div>
        <div style={{ fontSize: 13, fontWeight: 600, color: ok ? "#1f8a5b" : "#c0612f" }}>{n} of {min} min photos</div>
        <div style={{ fontSize: 11, color: "#8a8e88" }}>{ok ? "Meets publish requirement" : `${min - n} more to publish · max 50`}</div>
      </div>
    </div>
  );
}
function ProvBadgeTenant() {
  const F = window.RC_FIELDS;
  return <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11.5, fontWeight: 600, color: "#6b706a", background: "#f0efe9", borderRadius: 999, padding: "4px 11px" }}><Icon name="building-2" size={13} color="#8a8e88" /> {F.tenant.short}</span>;
}

const iconBtnA = { border: "1px solid #e2e0d8", background: "#fff", borderRadius: 7, width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" };
const btnTiny2 = { display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "inherit", fontSize: 12, fontWeight: 600, padding: "6px 11px", borderRadius: 7, cursor: "pointer" };
const tileBtn = { border: 0, background: "rgba(255,255,255,.92)", borderRadius: 6, width: 26, height: 26, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", boxShadow: "0 1px 3px rgba(0,0,0,.15)", fontFamily: "inherit", fontWeight: 600, color: "#4a504a" };

Object.assign(window, { StartChooser, DraftsDashboard, MediaManager });