// Recursive MLS — Registry-powered Search (Surface C). The tenant's searchable fields
// render as typed filter controls, a criteria builder, and result columns — automatically.
// Any field MLS staff mark "searchable" in Field Studio shows up here the same day.
const { useState } = React;

const RS_RESULTS = [
  { id: "S-1", addr: "18 Elderwood", city: "San Antonio, TX 78248", price: 1295000, beds: 4, baths: 4, sqft: 3980, type: "Single Family Residence", status: "Coming Soon", dom: 1, gated: true, pool: true, lat: 40, lng: 44, fav: true, match: 97 },
  { id: "S-2", addr: "402 Rivermist", city: "San Antonio, TX 78216", price: 615000, beds: 3, baths: 2, sqft: 2110, type: "Single Family Residence", status: "Active", dom: 9, gated: false, pool: false, lat: 58, lng: 30, fav: false, match: 90 },
  { id: "S-3", addr: "9 Champions Run", city: "San Antonio, TX 78258", price: 1650000, beds: 5, baths: 5, sqft: 4820, type: "Single Family Residence", status: "Active", dom: 14, gated: true, pool: true, lat: 50, lng: 64, fav: false, match: 88 },
  { id: "S-4", addr: "127 Alta Vista", city: "San Antonio, TX 78209", price: 899000, beds: 3, baths: 3, sqft: 2680, type: "Townhouse", status: "Active", dom: 3, gated: false, pool: false, lat: 30, lng: 70, fav: true, match: 84 },
  { id: "S-5", addr: "715 Mission Reach", city: "San Antonio, TX 78210", price: 465000, beds: 2, baths: 2, sqft: 1440, type: "Condominium", status: "Active", dom: 6, gated: false, pool: true, lat: 68, lng: 50, fav: false, match: 81 },
  { id: "S-6", addr: "2200 Stone Oak Pkwy", city: "San Antonio, TX 78258", price: 1120000, beds: 4, baths: 3, sqft: 3240, type: "Single Family Residence", status: "Option Pending", dom: 21, gated: true, pool: true, lat: 44, lng: 22, fav: false, match: 78 },
];

function RegistrySearch({ go }) {
  const F = window.RC_FIELDS, D = window.RC_DATA;
  const searchable = F.fields.filter((f) => f.searchable && f.life === "active");
  const [layout, setLayout] = useState("split"); // split | list
  const [advanced, setAdvanced] = useState(false);
  const [cols, setCols] = useState(false);
  const [sel, setSel] = useState("S-1");
  const [favs, setFavs] = useState({ "S-1": true, "S-4": true });
  const saved = ["Stone Oak · 4bd · pool", "Alamo Heights < $1M", "Waterfront lots"];

  return (
    <div style={{ display: "grid", gridTemplateColumns: "296px 1fr", height: "100%", minHeight: 0 }}>
      {/* ===== registry-driven filter rail ===== */}
      <div style={{ borderRight: "1px solid #ececec", background: "#fff", overflowY: "auto", display: "flex", flexDirection: "column" }}>
        <div style={{ padding: "14px 16px", borderBottom: "1px solid #f1f0ea", position: "sticky", top: 0, background: "#fff", zIndex: 2 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
            <h2 style={{ margin: 0, fontSize: 15, fontWeight: 600, color: "#1d241f", flex: 1 }}>Filters</h2>
            <button onClick={() => setAdvanced(true)} style={{ ...rsBtnTiny, background: "#eef4f1", color: "#006747", border: "1px solid #cfe3d8" }}><Icon name="sliders-horizontal" size={12} color="#006747" /> Advanced</button>
          </div>
          <div style={{ fontSize: 11, color: "#a8aca6" }}>Built from {searchable.length} searchable {F.tenant.short} fields</div>
        </div>
        <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 16 }}>
          <FilterControl f={{ label: "Status", type: "status" }} />
          {searchable.map((f) => <FilterControl key={f.key} f={f} />)}
        </div>
      </div>

      {/* ===== results + map ===== */}
      <div style={{ display: "flex", flexDirection: "column", minWidth: 0, minHeight: 0 }}>
        {/* toolbar */}
        <div style={{ padding: "12px 20px", borderBottom: "1px solid #ececec", background: "#fff", display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, background: "#f6f5f1", border: "1px solid #e7e5df", borderRadius: 8, padding: "8px 12px", flex: 1, minWidth: 200, maxWidth: 360 }}>
            <Icon name="search" size={15} color="#a8aca6" />
            <input placeholder="Keyword or address — Stone Oak, 78248…" style={{ flex: 1, border: 0, outline: 0, background: "transparent", fontFamily: "inherit", fontSize: 13 }} />
          </div>
          <div style={{ display: "flex", background: "#f4f3ef", borderRadius: 8, padding: 3 }}>
            {[["split", "map"], ["list", "list"]].map(([k, ic]) => <button key={k} onClick={() => setLayout(k)} style={{ border: 0, background: layout === k ? "#fff" : "transparent", boxShadow: layout === k ? "0 1px 2px rgba(0,0,0,.1)" : "none", borderRadius: 6, padding: "6px 10px", cursor: "pointer", display: "flex" }}><Icon name={ic === "map" ? "map" : "list"} size={16} color={layout === k ? "#006747" : "#8a8e88"} /></button>)}
          </div>
          <button onClick={() => setCols(!cols)} style={rsBtnOutline}><Icon name="columns-3" size={14} color="#006747" /> Columns</button>
          <div style={{ position: "relative" }}>
            {cols && <ColumnPicker onClose={() => setCols(false)} />}
          </div>
          <select style={{ ...rsInp, width: "auto", padding: "8px 30px 8px 11px", appearance: "none", cursor: "pointer" }}><option>Best match</option><option>Price ↑</option><option>Price ↓</option><option>Newest</option></select>
        </div>
        {/* saved-search chips */}
        <div style={{ padding: "10px 20px", borderBottom: "1px solid #f1f0ea", background: "#faf9f5", display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
          <span style={{ fontSize: 11.5, fontWeight: 600, color: "#a8aca6", textTransform: "uppercase", letterSpacing: ".4px" }}>Saved</span>
          {saved.map((s) => <span key={s} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: "#4a504a", background: "#fff", border: "1px solid #e6e4dc", borderRadius: 999, padding: "5px 6px 5px 11px" }}>{s}<Icon name="pencil" size={11} color="#a8aca6" /></span>)}
          <span style={{ marginLeft: "auto", fontSize: 12.5, color: "#8a8e88" }}><strong style={{ color: "#1d241f", fontFamily: "'Space Mono', monospace" }}>{RS_RESULTS.length}</strong> homes</span>
          <button style={{ ...rsBtnTiny, background: "#fff", color: "#006747", border: "1px solid #d9d7cd" }}><Icon name="bell-plus" size={12} color="#006747" /> Save search</button>
        </div>

        {/* body */}
        <div style={{ flex: 1, display: layout === "split" ? "grid" : "block", gridTemplateColumns: layout === "split" ? "minmax(0,1fr) 1fr" : "1fr", minHeight: 0, overflow: "hidden" }}>
          <div style={{ overflowY: "auto", padding: 16, display: "grid", gridTemplateColumns: layout === "split" ? "1fr" : "repeat(auto-fill, minmax(280px, 1fr))", gap: 14, alignContent: "start" }}>
            {RS_RESULTS.map((r) => <ResultCard key={r.id} r={r} sel={sel === r.id} onSel={() => setSel(r.id)} fav={favs[r.id]} onFav={() => setFavs({ ...favs, [r.id]: !favs[r.id] })} wide={layout === "split"} />)}
          </div>
          {layout === "split" && <StylizedMap results={RS_RESULTS} sel={sel} onSel={setSel} />}
        </div>
      </div>

      {advanced && <CriteriaBuilder onClose={() => setAdvanced(false)} />}
    </div>
  );
}

/* filter controls generated per registry field type */
function FilterControl({ f }) {
  const F = window.RC_FIELDS;
  const head = (
    <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 8 }}>
      <span style={{ fontSize: 12, fontWeight: 600, color: "#4a504a" }}>{f.label}</span>
      {f.provenance && <ProvChip prov={f.provenance} size="xs" withLabel={f.provenance === "local"} />}
    </div>
  );
  if (f.type === "status") {
    return (<div>{head}<div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{F.statuses.filter((s) => s.visible).slice(0, 5).map((s) => (
      <span key={s.key} style={{ fontSize: 11.5, color: s.key === "Active" ? "#006747" : "#6b706a", background: s.key === "Active" ? "#eef4f1" : "#f4f3ef", border: "1px solid " + (s.key === "Active" ? "#cfe3d8" : "#e6e4dc"), borderRadius: 999, padding: "4px 10px", cursor: "pointer" }}>{s.name}</span>
    ))}</div></div>);
  }
  if (f.type === "money" || f.type === "number") {
    return (<div>{head}
      <div style={{ display: "flex", alignItems: "center", gap: 3, marginBottom: 6 }}>{[3, 7, 12, 18, 22, 16, 9, 5].map((h, i) => <div key={i} style={{ flex: 1, height: h + 6, background: i > 1 && i < 6 ? "#cfe3d8" : "#ece9df", borderRadius: 1 }} />)}</div>
      <div style={{ display: "flex", gap: 7 }}><div style={{ ...rsInp, flex: 1, color: "#8a8e88" }}>{f.type === "money" ? "$ Min" : "Min"}</div><div style={{ ...rsInp, flex: 1, color: "#8a8e88" }}>{f.type === "money" ? "$ Max" : "Max"}</div></div>
    </div>);
  }
  if (f.type === "boolean") return (<div>{head}<div style={{ display: "flex", borderRadius: 7, overflow: "hidden", boxShadow: "inset 0 0 0 1px #e2e0d8" }}>{["Yes", "No", "Any"].map((o, i) => <div key={o} style={{ flex: 1, textAlign: "center", padding: "7px 0", fontSize: 12.5, background: o === "Any" ? "#eef4f1" : "#fff", color: o === "Any" ? "#006747" : "#8a8e88", borderLeft: i ? "1px solid #eceae2" : 0, cursor: "pointer" }}>{o}</div>)}</div></div>);
  if (f.type === "enum" || f.type === "multi") {
    const opts = F.activeLookup(f.lookup).slice(0, 4);
    return (<div>{head}<div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{opts.map((o) => <span key={o.key} style={{ fontSize: 11.5, color: "#6b706a", background: "#f4f3ef", border: "1px solid #e6e4dc", borderRadius: 999, padding: "4px 10px", cursor: "pointer" }}>{o.label}</span>)}{F.activeLookup(f.lookup).length > 4 && <span style={{ fontSize: 11.5, color: "#8a8e88", padding: "4px 4px" }}>+{F.activeLookup(f.lookup).length - 4}</span>}</div>{f.dependsOn && <div style={{ fontSize: 10.5, color: "#a8aca6", marginTop: 5, display: "flex", alignItems: "center", gap: 4 }}><Icon name="corner-down-right" size={11} color="#c4c7c1" /> narrows under {f.dependsOn}</div>}</div>);
  }
  return (<div>{head}<div style={{ ...rsInp, color: "#b0b4ad" }}>Any</div></div>);
}

function ResultCard({ r, sel, onSel, fav, onFav, wide }) {
  const D = window.RC_DATA;
  const tone = r.status === "Coming Soon" ? "new" : r.status === "Active" ? "active" : "pending";
  return (
    <div onClick={onSel} style={{ display: wide ? "flex" : "block", gap: 13, background: "#fff", borderRadius: 10, boxShadow: sel ? "0 0 0 2px #006747, 0 4px 14px rgba(0,0,0,.08)" : "inset 0 0 0 1px rgba(0,0,0,.08)", overflow: "hidden", cursor: "pointer" }}>
      <div style={{ position: "relative", width: wide ? 150 : "100%", flex: "none", aspectRatio: wide ? "auto" : "3/2", minHeight: wide ? 120 : "auto", backgroundImage: `url(${D.gallery(parseInt(r.id.slice(2)))[0]})`, backgroundSize: "cover", backgroundPosition: "center" }}>
        <span style={{ position: "absolute", top: 8, left: 8 }}><Pill tone={tone}>{r.status}</Pill></span>
        <span onClick={(e) => { e.stopPropagation(); onFav(); }} style={{ position: "absolute", top: 8, right: 8, width: 28, height: 28, borderRadius: "50%", background: "rgba(255,255,255,.92)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="heart" size={14} color={fav ? "#c0392b" : "#8a8e88"} style={{ fill: fav ? "#c0392b" : "none" }} /></span>
      </div>
      <div style={{ padding: wide ? "12px 14px 12px 0" : 13, flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8 }}>
          <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 18, fontWeight: 700, color: "#1d241f" }}>{D.usd(r.price)}</span>
          <span style={{ fontSize: 11, fontWeight: 600, color: "#006747", background: "#eef4f1", borderRadius: 999, padding: "2px 8px" }}>{r.match}%</span>
        </div>
        <div style={{ display: "flex", gap: 10, fontSize: 12.5, color: "#4a504a", margin: "6px 0 7px" }}><span><strong>{r.beds}</strong>bd</span><span><strong>{r.baths}</strong>ba</span><span><strong>{r.sqft.toLocaleString()}</strong>sqft</span></div>
        <div style={{ fontSize: 13.5, fontWeight: 600, color: "#1d241f" }}>{r.addr}</div>
        <div style={{ fontSize: 12, color: "#8a8e88" }}>{r.city}</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 5, marginTop: 8 }}>
          <span style={rsTag}>{r.type}</span>
          {r.gated && <span style={{ ...rsTag, color: "#9a6a12", background: "#fbf2dc" }}>Guard-gated</span>}
          {r.pool && <span style={rsTag}>Pool</span>}
        </div>
      </div>
    </div>
  );
}

function StylizedMap({ results, sel, onSel }) {
  const D = window.RC_DATA;
  return (
    <div style={{ position: "relative", background: "#e8ece6", overflow: "hidden", borderLeft: "1px solid #ececec" }}>
      <svg width="100%" height="100%" style={{ position: "absolute", inset: 0 }} preserveAspectRatio="xMidYMid slice" viewBox="0 0 100 100">
        <rect width="100" height="100" fill="#eef1ec" />
        {[20, 40, 60, 80].map((y) => <line key={y} x1="0" y1={y} x2="100" y2={y} stroke="#dfe3dc" strokeWidth="0.3" />)}
        {[20, 40, 60, 80].map((x) => <line key={x} x1={x} y1="0" x2={x} y2="100" stroke="#dfe3dc" strokeWidth="0.3" />)}
        <path d="M0 62 Q30 55 55 68 T100 60" fill="none" stroke="#cdd8e0" strokeWidth="1.4" />
        <path d="M22 0 L26 40 L20 100" fill="none" stroke="#dbe0d6" strokeWidth="1" />
      </svg>
      {results.map((r) => (
        <button key={r.id} onClick={() => onSel(r.id)} style={{ position: "absolute", left: r.lng + "%", top: r.lat + "%", transform: "translate(-50%,-50%)", border: 0, cursor: "pointer",
          background: sel === r.id ? "#006747" : "#fff", color: sel === r.id ? "#fff" : "#1d241f", borderRadius: 999, padding: "4px 9px",
          fontFamily: "'Space Mono', monospace", fontSize: 11, fontWeight: 700, boxShadow: "0 2px 8px rgba(0,0,0,.2)", zIndex: sel === r.id ? 3 : 1 }}>
          ${Math.round(r.price / 1000)}k
        </button>
      ))}
      <div style={{ position: "absolute", top: 12, right: 12, display: "flex", flexDirection: "column", gap: 6 }}>
        <button style={mapCtl}><Icon name="pencil-ruler" size={15} color="#4a504a" /></button>
        <button style={mapCtl}><Icon name="plus" size={16} color="#4a504a" /></button>
        <button style={mapCtl}><Icon name="minus" size={16} color="#4a504a" /></button>
      </div>
      <div style={{ position: "absolute", bottom: 12, left: 12, background: "rgba(255,255,255,.92)", borderRadius: 8, padding: "7px 12px", fontSize: 11.5, color: "#4a504a", display: "flex", alignItems: "center", gap: 7 }}><Icon name="lasso" size={13} color="#006747" /> Draw a polygon to search an area</div>
    </div>
  );
}

/* C2 · advanced criteria builder */
function CriteriaBuilder({ onClose }) {
  const F = window.RC_FIELDS;
  const searchable = F.fields.filter((f) => f.searchable && f.life === "active");
  const [rows, setRows] = useState([{ field: "ListPrice", op: "range", val: "800k–1.5M" }, { field: "X_SABOR_GuardGated", op: "equals", val: "Yes" }]);
  const opFor = (t) => t === "money" || t === "number" ? ["range", "equals", "≥", "≤"] : t === "enum" || t === "multi" ? ["any of", "equals", "is empty"] : t === "boolean" ? ["equals"] : ["contains", "equals", "is empty"];
  return (
    <div onClick={onClose} style={rsOverlay}>
      <div onClick={(e) => e.stopPropagation()} style={{ ...rsModal, width: 640 }}>
        <div style={rsModalHead}><div><div style={{ fontSize: 16, fontWeight: 600, color: "#1d241f" }}>Advanced criteria</div><div style={{ fontSize: 12.5, color: "#8a8e88", marginTop: 2 }}>Search ANY searchable registry field — standard or local — with type-aware operators.</div></div><button onClick={onClose} style={rsIconBtn}><Icon name="x" size={16} color="#8a8e88" /></button></div>
        <div style={{ padding: 18 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
            {rows.map((row, i) => { const f = F.byKey(row.field) || {}; return (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                {i > 0 && <span style={{ fontSize: 11, fontWeight: 700, color: "#006747", width: 34 }}>AND</span>}
                <div style={{ position: "relative", flex: 2 }}>
                  <select value={row.field} onChange={(e) => setRows(rows.map((r, j) => j === i ? { ...r, field: e.target.value } : r))} style={{ ...rsInp, appearance: "none", paddingRight: 28, cursor: "pointer" }}>
                    {searchable.map((sf) => <option key={sf.key} value={sf.key}>{sf.label}{sf.provenance === "local" ? "  ·  SABOR" : ""}</option>)}
                  </select>
                </div>
                <select value={row.op} style={{ ...rsInp, flex: 1, appearance: "none", cursor: "pointer" }}>{opFor(f.type).map((o) => <option key={o}>{o}</option>)}</select>
                <input defaultValue={row.val} style={{ ...rsInp, flex: 1.4 }} />
                <ProvChip prov={f.provenance || "standard"} size="xs" withLabel={false} />
                <button onClick={() => setRows(rows.filter((_, j) => j !== i))} style={rsIconBtn}><Icon name="x" size={14} color="#a8aca6" /></button>
              </div>
            ); })}
          </div>
          <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
            <button onClick={() => setRows([...rows, { field: "PoolFeatures", op: "any of", val: "" }])} style={rsBtnOutline}><Icon name="plus" size={13} color="#006747" /> AND row</button>
            <button style={{ ...rsBtnOutline, color: "#6b706a" }}><Icon name="plus" size={13} color="#6b706a" /> OR group</button>
          </div>
          <div style={{ marginTop: 14, fontSize: 11.5, color: "#a8aca6", display: "flex", alignItems: "center", gap: 6 }}><Icon name="info" size={13} color="#a8aca6" /> Retired fields never appear here. A staffer adds a field in Field Studio → it's filterable the same day.</div>
        </div>
        <div style={{ padding: "14px 18px", borderTop: "1px solid #f1f0ea", display: "flex", justifyContent: "flex-end", gap: 10 }}>
          <button onClick={onClose} style={rsBtnOutline}>Cancel</button>
          <button onClick={onClose} style={rsBtnPrimary}><Icon name="search" size={14} color="#fff" /> Run search</button>
        </div>
      </div>
    </div>
  );
}

/* C3 · results column picker over the registry */
function ColumnPicker({ onClose }) {
  const F = window.RC_FIELDS;
  const cols = F.fields.filter((f) => f.searchable && f.life === "active");
  const [on, setOn] = useState({ ListPrice: true, BedroomsTotal: true, BathroomsTotalInteger: true, LivingArea: true, PropertySubType: true, X_SABOR_GuardGated: true });
  return (
    <div style={{ position: "absolute", top: "calc(100% + 6px)", right: 0, width: 280, background: "#fff", borderRadius: 10, boxShadow: "0 10px 30px rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.08)", zIndex: 20, overflow: "hidden" }}>
      <div style={{ padding: "12px 14px", borderBottom: "1px solid #f1f0ea", fontSize: 13, fontWeight: 600, color: "#1d241f" }}>Result columns</div>
      <div style={{ maxHeight: 280, overflowY: "auto", padding: 6 }}>
        {cols.map((f) => (
          <div key={f.key} onClick={() => setOn({ ...on, [f.key]: !on[f.key] })} className="rc-row" style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 9px", borderRadius: 6, cursor: "pointer" }}>
            <span style={{ width: 15, height: 15, borderRadius: 4, background: on[f.key] ? "#006747" : "#fff", boxShadow: on[f.key] ? "none" : "inset 0 0 0 1px #d4d2c8", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>{on[f.key] && <Icon name="check" size={11} color="#fff" />}</span>
            <span style={{ fontSize: 12.5, color: "#1d241f", flex: 1 }}>{f.label}</span>
            <ProvChip prov={f.provenance} size="xs" withLabel={false} />
          </div>
        ))}
      </div>
      <div style={{ padding: 10, borderTop: "1px solid #f1f0ea", display: "flex", gap: 8 }}>
        <button style={{ ...rsBtnTiny, background: "#006747", color: "#fff", border: 0, flex: 1, justifyContent: "center" }}>Save view</button>
        <button onClick={onClose} style={{ ...rsBtnTiny, background: "#fff", color: "#8a8e88", border: "1px solid #e6e4dc" }}>Done</button>
      </div>
    </div>
  );
}

const rsInp = { boxSizing: "border-box", border: "1px solid #e2e0d8", borderRadius: 7, padding: "8px 11px", fontFamily: "inherit", fontSize: 13, color: "#1d241f", background: "#fff", outline: "none" };
const rsBtnPrimary = { display: "inline-flex", alignItems: "center", gap: 7, background: "#006747", color: "#fff", border: 0, borderRadius: 8, padding: "9px 15px", fontFamily: "inherit", fontSize: 13, fontWeight: 600, cursor: "pointer" };
const rsBtnOutline = { display: "inline-flex", alignItems: "center", gap: 6, background: "#fff", color: "#006747", border: "1px solid #d9d7cd", borderRadius: 8, padding: "8px 12px", fontFamily: "inherit", fontSize: 12.5, fontWeight: 600, cursor: "pointer" };
const rsBtnTiny = { display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "inherit", fontSize: 11.5, fontWeight: 600, padding: "6px 10px", borderRadius: 7, cursor: "pointer" };
const rsIconBtn = { border: 0, background: "transparent", cursor: "pointer", display: "flex", padding: 4 };
const rsTag = { fontSize: 11, color: "#4a504a", background: "#f4f3ef", border: "1px solid #ececec", borderRadius: 4, padding: "2px 7px" };
const mapCtl = { width: 32, height: 32, borderRadius: 7, background: "#fff", border: 0, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", boxShadow: "0 1px 3px rgba(0,0,0,.15)" };
const rsOverlay = { position: "fixed", inset: 0, background: "rgba(20,28,22,.42)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 40, padding: 20 };
const rsModal = { background: "#fff", borderRadius: 12, boxShadow: "0 24px 60px rgba(0,0,0,.28)", maxHeight: "88vh", overflowY: "auto" };
const rsModalHead = { padding: "16px 18px", borderBottom: "1px solid #f1f0ea", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 10 };

window.RegistrySearch = RegistrySearch;