/* Relay — chrome: nav rail, top bar, toolbar, detail slide-over, toasts */
const { BRANCHES, statusOrder } = window.RelayData;

// ---------------- Nav rail ----------------
function NavRail({ view, setView }) {
  const items = [
    { id: "dashboard", icon: I.dashboard, label: "Canlı pano" },
    { id: "orders", icon: I.orders, label: "Tüm siparişler" },
    { id: "catalog", icon: I.catalog, label: "Katalog" },
    { id: "reports", icon: I.reports, label: "Raporlar" },
    { id: "integrations", icon: I.integrations, label: "Entegrasyonlar" },
  ];
  const [hover, setHover] = React.useState(null);
  return (
    <nav style={{
      width: 64, background: "var(--graphite)", display: "flex", flexDirection: "column",
      alignItems: "center", padding: "14px 0", gap: 4, flexShrink: 0,
    }}>
      <div style={{
        width: 38, height: 38, borderRadius: 10, background: "#fff", color: "var(--graphite)",
        display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 10,
        fontWeight: 700, position: "relative",
      }} title="Relay">
        <span style={{ width: 14, height: 14, borderRadius: 4, border: "3px solid var(--graphite)", position: "relative" }}>
          <span style={{ position: "absolute", width: 6, height: 6, borderRadius: 999, background: "var(--new)", right: -4, top: -4 }} />
        </span>
      </div>
      {/* POS / new order — primary action */}
      <div onMouseEnter={() => setHover("pos")} onMouseLeave={() => setHover(null)} style={{ position: "relative", marginBottom: 8 }}>
        <button onClick={() => setView("pos")} style={{
          width: 44, height: 44, borderRadius: 12, border: "none",
          background: view === "pos" ? "#fff" : "var(--new)", color: view === "pos" ? "var(--graphite)" : "#fff",
          display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 2px 8px rgba(37,99,235,.4)",
        }}><I.plus size={22} /></button>
        {hover === "pos" && (
          <span style={{ position: "absolute", left: 52, top: "50%", transform: "translateY(-50%)", background: "var(--graphite)", color: "#fff", fontSize: 12, fontWeight: 600, padding: "5px 10px", borderRadius: 6, whiteSpace: "nowrap", zIndex: 50, boxShadow: "var(--shadow-md)" }}>Yeni sipariş (POS)</span>
        )}
      </div>
      {items.map((it) => {
        const Ico = it.icon;
        const active = view === it.id;
        return (
          <div key={it.id} onMouseEnter={() => setHover(it.id)} onMouseLeave={() => setHover(null)}
            style={{ position: "relative" }}>
            <button onClick={() => setView(it.id)} style={{
              width: 44, height: 44, borderRadius: 11, border: "none",
              background: active ? "rgba(255,255,255,.14)" : "transparent",
              color: active ? "#fff" : "rgba(255,255,255,.55)",
              display: "flex", alignItems: "center", justifyContent: "center", transition: "all .12s",
            }}><Ico size={20} /></button>
            {hover === it.id && (
              <span style={{
                position: "absolute", left: 52, top: "50%", transform: "translateY(-50%)",
                background: "var(--graphite)", color: "#fff", fontSize: 12, fontWeight: 600,
                padding: "5px 10px", borderRadius: 6, whiteSpace: "nowrap", zIndex: 50,
                boxShadow: "var(--shadow-md)",
              }}>{it.label}</span>
            )}
          </div>
        );
      })}
      <div style={{ flex: 1 }} />
      <button style={{ width: 44, height: 44, borderRadius: 11, border: "none", background: "transparent", color: "rgba(255,255,255,.55)", display: "flex", alignItems: "center", justifyContent: "center" }}><I.settings size={20} /></button>
      <div style={{ width: 34, height: 34, borderRadius: 999, background: "#3b59c3", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 13, marginTop: 6 }}>MK</div>
    </nav>
  );
}

// ---------------- Top bar ----------------
function TopBar({ branch, setBranch, soundOn, setSoundOn, now, newCount, search, setSearch, showSearch = true }) {
  const [open, setOpen] = React.useState(false);
  return (
    <header style={{
      height: 60, background: "var(--surface)", borderBottom: "1px solid var(--border)",
      display: "flex", alignItems: "center", gap: 16, padding: "0 20px", flexShrink: 0, zIndex: 30,
    }}>
      {/* branch selector */}
      <div style={{ position: "relative" }}>
        <button onClick={() => setOpen(!open)} style={{
          display: "flex", alignItems: "center", gap: 10, background: "var(--surface-2)",
          border: "1px solid var(--border)", borderRadius: "var(--radius-sm)", padding: "7px 11px",
          color: "var(--text)",
        }}>
          <I.store size={17} style={{ flexShrink: 0 }} />
          <div style={{ textAlign: "left", lineHeight: 1.15 }}>
            <div style={{ fontWeight: 600, fontSize: 13, whiteSpace: "nowrap" }}>{branch.name}</div>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--text-3)" }}>{branch.code}</div>
          </div>
          <I.chevronDown size={15} style={{ color: "var(--text-3)" }} />
        </button>
        {open && (
          <>
            <div onClick={() => setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 40 }} />
            <div style={{
              position: "absolute", top: 48, left: 0, width: 240, background: "var(--surface)",
              border: "1px solid var(--border)", borderRadius: "var(--radius)", boxShadow: "var(--shadow-lg)",
              padding: 6, zIndex: 41,
            }}>
              <div style={{ fontSize: 10.5, fontWeight: 600, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: ".05em", padding: "6px 10px 4px" }}>Şubeler</div>
              {BRANCHES.map((b) => (
                <button key={b.id} onClick={() => { setBranch(b); setOpen(false); }} style={{
                  display: "flex", alignItems: "center", gap: 10, width: "100%", textAlign: "left",
                  padding: "8px 10px", border: "none", borderRadius: 7,
                  background: b.id === branch.id ? "var(--surface-3)" : "transparent", color: "var(--text)",
                }}>
                  <I.store size={16} style={{ color: "var(--text-3)" }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{b.name}</div>
                    <div className="mono" style={{ fontSize: 10.5, color: "var(--text-3)" }}>{b.code}</div>
                  </div>
                  {b.id === branch.id && <I.check size={15} style={{ color: "var(--ready)" }} />}
                </button>
              ))}
              <div style={{ borderTop: "1px solid var(--border)", marginTop: 4, paddingTop: 4 }}>
                <button style={{ display: "flex", alignItems: "center", gap: 8, width: "100%", padding: "8px 10px", border: "none", borderRadius: 7, background: "transparent", color: "var(--text-2)", fontSize: 13, fontWeight: 600 }}>
                  <I.dashboard size={15} /> Tüm şubeler
                </button>
              </div>
            </div>
          </>
        )}
      </div>

      {/* search */}
      {showSearch ? (
        <div style={{ flex: 1, maxWidth: 420, position: "relative" }}>
          <span style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "var(--text-3)" }}><I.search size={16} /></span>
          <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Sipariş, müşteri, referans ara…" style={{
            width: "100%", padding: "9px 12px 9px 36px", borderRadius: "var(--radius-sm)",
            border: "1px solid var(--border)", background: "var(--surface-2)", fontSize: 13, color: "var(--text)", outline: "none",
          }} />
        </div>
      ) : <div style={{ flex: 1 }} />}

      {/* live status */}
      <div style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12.5, fontWeight: 600, color: "var(--ready)" }}>
        <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--ready)", animation: "liveDot 1.6s infinite" }} />
        Canlı
        <span style={{ color: "var(--text-3)", fontWeight: 500 }} className="mono">{clockTime(now)}</span>
      </div>

      {/* sound */}
      <button onClick={() => setSoundOn(!soundOn)} title={soundOn ? "Ses açık" : "Sessiz"} style={{
        width: 38, height: 38, borderRadius: "var(--radius-sm)", border: "1px solid var(--border)",
        background: soundOn ? "var(--surface-2)" : "var(--surface)", color: soundOn ? "var(--text)" : "var(--text-3)",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>{soundOn ? <I.soundOn size={18} /> : <I.soundOff size={18} />}</button>

      {/* bell */}
      <button style={{
        width: 38, height: 38, borderRadius: "var(--radius-sm)", border: "1px solid var(--border)",
        background: "var(--surface)", color: "var(--text)", display: "flex", alignItems: "center", justifyContent: "center", position: "relative",
      }}>
        <I.bell size={18} />
        {newCount > 0 && <span style={{ position: "absolute", top: 5, right: 6, minWidth: 16, height: 16, padding: "0 4px", borderRadius: 999, background: "var(--cancelled)", color: "#fff", fontSize: 10, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center" }}>{newCount}</span>}
      </button>
    </header>
  );
}

// ---------------- Toolbar (filters + layout switch) ----------------
function Toolbar({ typeFilter, setTypeFilter, platFilter, togglePlat, clearPlat, statusFilter, setStatusFilter, layout, setLayout, simOn, setSimOn, counts }) {
  const platList = Object.values(PLATFORMS);
  const layouts = [
    { id: "list", icon: I.list, label: "Liste" },
    { id: "grid", icon: I.grid, label: "Izgara" },
    { id: "columns", icon: I.columns, label: "Sütunlar" },
  ];
  const statuses = [
    { id: "active", label: "Aktif" },
    { id: "new", label: "Yeni" },
    { id: "preparing", label: "Hazırlanıyor" },
    { id: "ready", label: "Hazır" },
    { id: "completed", label: "Tamamlandı" },
    { id: "all", label: "Tümü" },
  ];
  const seg = (active) => ({
    padding: "6px 12px", fontSize: 12.5, fontWeight: 600, border: "none",
    background: active ? "var(--surface)" : "transparent",
    color: active ? "var(--text)" : "var(--text-2)", borderRadius: 6,
    boxShadow: active ? "var(--shadow-sm)" : "none",
  });
  return (
    <div style={{ background: "var(--surface)", borderBottom: "1px solid var(--border)", padding: "11px 20px", display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap", flexShrink: 0 }}>
      {/* type */}
      <div style={{ display: "flex", background: "var(--surface-3)", borderRadius: 8, padding: 3, gap: 2 }}>
        {[["all", "Tümü"], ["food", "Yemek"], ["retail", "Perakende"]].map(([id, lbl]) => (
          <button key={id} onClick={() => setTypeFilter(id)} style={seg(typeFilter === id)}>
            {id !== "all" && <TypeIcon type={id} size={12} />} {lbl}
          </button>
        ))}
      </div>

      {/* status pills */}
      <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
        {statuses.map((s) => (
          <button key={s.id} onClick={() => setStatusFilter(s.id)} style={{
            padding: "6px 12px", fontSize: 12.5, fontWeight: 600, borderRadius: 999,
            border: "1px solid " + (statusFilter === s.id ? "var(--graphite)" : "var(--border)"),
            background: statusFilter === s.id ? "var(--graphite)" : "var(--surface)",
            color: statusFilter === s.id ? "#fff" : "var(--text-2)",
          }}>{s.label}{s.id === "new" && counts.new > 0 ? ` (${counts.new})` : ""}</button>
        ))}
      </div>

      <div style={{ flex: 1 }} />

      {/* platform filter chips */}
      <div style={{ display: "flex", gap: 5, alignItems: "center", flexWrap: "wrap", maxWidth: 360 }}>
        {platList.map((p) => {
          const on = platFilter.includes(p.id);
          const anyOn = platFilter.length > 0;
          return (
            <button key={p.id} onClick={() => togglePlat(p.id)} title={p.name} style={{
              display: "inline-flex", alignItems: "center", gap: 5, padding: "4px 8px 4px 5px",
              borderRadius: 999, border: "1px solid " + (on ? p.color : "var(--border)"),
              background: on ? p.color : "var(--surface)", color: on ? "#fff" : "var(--text-2)",
              fontSize: 11.5, fontWeight: 600, opacity: anyOn && !on ? 0.55 : 1, transition: "all .12s",
            }}>
              <span style={{ width: 16, height: 16, borderRadius: 4, background: on ? "rgba(255,255,255,.25)" : p.color, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--mono)", fontSize: 8.5, fontWeight: 700 }}>{p.short}</span>
              {p.name}
            </button>
          );
        })}
        {platFilter.length > 0 && <button onClick={clearPlat} style={{ border: "none", background: "transparent", color: "var(--text-3)", fontSize: 12, fontWeight: 600, padding: "4px 6px" }}>Temizle</button>}
      </div>

      {/* sim toggle */}
      <button onClick={() => setSimOn(!simOn)} title="Gelen siparişleri simüle et" style={{
        display: "inline-flex", alignItems: "center", gap: 6, padding: "7px 11px", borderRadius: "var(--radius-sm)",
        border: "1px solid " + (simOn ? "transparent" : "var(--border)"),
        background: simOn ? "var(--new-bg)" : "var(--surface)", color: simOn ? "var(--new)" : "var(--text-2)", fontSize: 12.5, fontWeight: 600,
      }}>
        <span style={{ width: 7, height: 7, borderRadius: 999, background: simOn ? "var(--new)" : "var(--text-3)", animation: simOn ? "liveDot 1.4s infinite" : "none" }} />
        {simOn ? "Canlı akış açık" : "Akış duraklatıldı"}
      </button>

      {/* layout switch */}
      <div style={{ display: "flex", background: "var(--surface-3)", borderRadius: 8, padding: 3, gap: 2 }}>
        {layouts.map((l) => {
          const Ico = l.icon;
          return (
            <button key={l.id} onClick={() => setLayout(l.id)} title={l.label} style={{ ...seg(layout === l.id), display: "flex", alignItems: "center", gap: 6, padding: "6px 10px" }}>
              <Ico size={15} />{l.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ---------------- Detail slide-over ----------------
function DetailPanel({ order, now, onClose, onAccept, onReject, onAdvance, onReject2 }) {
  if (!order) return null;
  const f = FLOW_LABELS[order.type];
  const act = actionFor(order);
  const isNew = order.status === "new";
  const steps = statusOrder.map((k) => ({ key: k, label: f[k] }));
  const curIdx = order.status === "cancelled" ? -1 : statusOrder.indexOf(order.status);
  return (
    <>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(20,24,29,.32)", zIndex: 60, animation: "toastIn .01s" }} />
      <aside style={{
        position: "fixed", top: 0, right: 0, bottom: 0, width: 440, background: "var(--surface)",
        zIndex: 61, boxShadow: "var(--shadow-lg)", display: "flex", flexDirection: "column",
        animation: "slideInRight .22s cubic-bezier(.2,.8,.2,1)",
      }}>
        {/* header */}
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <PlatformBadge pid={order.platformId} withName size={28} />
            <button onClick={onClose} style={{ width: 32, height: 32, borderRadius: 8, border: "1px solid var(--border)", background: "var(--surface)", color: "var(--text-2)", display: "flex", alignItems: "center", justifyContent: "center" }}><I.x size={17} /></button>
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div>
              <div style={{ fontSize: 19, fontWeight: 700 }}>{order.customer}</div>
              <div className="mono" style={{ fontSize: 12, color: "var(--text-3)", marginTop: 2 }}>{order.id} · {order.channelRef}</div>
            </div>
            <StatusPill status={order.status} type={order.type} />
          </div>
        </div>

        {/* scroll body */}
        <div style={{ flex: 1, overflowY: "auto", padding: "16px 20px", display: "flex", flexDirection: "column", gap: 18 }}>
          {/* status timeline */}
          <div style={{ display: "flex", alignItems: "center", gap: 0 }}>
            {steps.map((s, i) => {
              const done = i < curIdx, current = i === curIdx;
              const c = done || current ? STATUS[s.key].color : "var(--border-strong)";
              return (
                <React.Fragment key={s.key}>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 5, flex: "0 0 auto", width: 72 }}>
                    <span style={{ width: 24, height: 24, borderRadius: 999, background: done ? c : current ? `var(--${s.key}-bg)` : "var(--surface-3)", color: done ? "#fff" : c, display: "flex", alignItems: "center", justifyContent: "center", border: current ? `2px solid ${c}` : "none" }}>
                      {done ? <I.check size={13} /> : <span style={{ width: 7, height: 7, borderRadius: 999, background: c }} />}
                    </span>
                    <span style={{ fontSize: 10.5, fontWeight: 600, color: done || current ? "var(--text)" : "var(--text-3)", textAlign: "center", lineHeight: 1.2 }}>{s.label}</span>
                  </div>
                  {i < steps.length - 1 && <span style={{ flex: 1, height: 2, background: i < curIdx ? STATUS[steps[i + 1].key].color : "var(--border)", marginTop: -16 }} />}
                </React.Fragment>
              );
            })}
          </div>

          {/* prep timer / meta row */}
          <div style={{ display: "flex", gap: 10 }}>
            <div style={{ flex: 1, background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 9, padding: "10px 12px" }}>
              <div style={{ fontSize: 10.5, color: "var(--text-3)", fontWeight: 600, textTransform: "uppercase", letterSpacing: ".04em" }}>Teslimat Şekli</div>
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 4, fontWeight: 600, fontSize: 13.5 }}><TypeIcon type={order.type} />{order.fulfillment}</div>
            </div>
            <div style={{ flex: 1, background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 9, padding: "10px 12px" }}>
              <div style={{ fontSize: 10.5, color: "var(--text-3)", fontWeight: 600, textTransform: "uppercase", letterSpacing: ".04em" }}>{isNew ? "Bekleyen" : "Geçen Süre"}</div>
              <div style={{ marginTop: 4 }}><PrepTimer order={order} now={now} /></div>
            </div>
            <div style={{ flex: 1, background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 9, padding: "10px 12px" }}>
              <div style={{ fontSize: 10.5, color: "var(--text-3)", fontWeight: 600, textTransform: "uppercase", letterSpacing: ".04em" }}>Hedef</div>
              <div className="mono" style={{ marginTop: 4, fontWeight: 600, fontSize: 13.5 }}>{order.prepMins} dk</div>
            </div>
          </div>

          {/* customer */}
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: ".05em", marginBottom: 8 }}>Müşteri ve teslimat</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 7, fontSize: 13.5 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 9, color: "var(--text-2)" }}><I.pin size={15} style={{ color: "var(--text-3)" }} /><span><b style={{ color: "var(--text)" }}>{order.area}</b> · {order.fulfillment}</span></div>
              <div style={{ display: "flex", alignItems: "center", gap: 9, color: "var(--text-2)" }}><I.phone size={15} style={{ color: "var(--text-3)" }} /><span className="mono">+971 5{minsAgo(order.placedAt, now) % 10}{order.id.slice(-1)} {order.channelRef.slice(-3)} {order.channelRef.slice(-4, -1)}</span></div>
            </div>
            {order.note && (
              <div style={{ marginTop: 10, background: "var(--preparing-bg)", border: "1px solid #f4dcb4", borderRadius: 8, padding: "9px 12px", fontSize: 13, color: "#8a5a12", display: "flex", gap: 8 }}>
                <I.bolt size={15} style={{ flexShrink: 0, marginTop: 1 }} /><span>{order.note}</span>
              </div>
            )}
          </div>

          {/* items */}
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: ".05em", marginBottom: 8 }}>{itemCount(order)} ürün</div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {order.items.map((it, i) => (
                <div key={i} style={{ display: "flex", gap: 11, padding: "9px 0", borderBottom: i < order.items.length - 1 ? "1px solid var(--border)" : "none" }}>
                  <span className="mono" style={{ fontWeight: 600, color: "var(--text)", minWidth: 26 }}>{it.qty}×</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 500 }}>{it.name}</div>
                    {it.sku && <div className="mono" style={{ fontSize: 11, color: "var(--text-3)", marginTop: 1 }}>SKU {it.sku}</div>}
                    {it.mods && it.mods.map((m, j) => <div key={j} style={{ fontSize: 12, color: "var(--text-2)", marginTop: 1 }}>+ {m}</div>)}
                  </div>
                  <span className="mono" style={{ fontSize: 13, color: "var(--text-2)" }}>{fmtMoney(it.price * it.qty)}</span>
                </div>
              ))}
            </div>
          </div>

          {/* totals */}
          <div style={{ background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 9, padding: "12px 14px", display: "flex", flexDirection: "column", gap: 7 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, color: "var(--text-2)" }}><span>Ara Toplam</span><span className="mono">{fmtMoney(order.subtotal)}</span></div>
            {order.fee > 0 && <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, color: "var(--text-2)" }}><span>Hizmet Bedeli</span><span className="mono">{fmtMoney(order.fee)}</span></div>}
            <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, fontSize: 15.5, borderTop: "1px solid var(--border)", paddingTop: 8 }}><span>Toplam</span><span className="mono">{order.currency} {fmtMoney(order.total)}</span></div>
          </div>
        </div>

        {/* footer actions */}
        <div style={{ padding: "14px 20px", borderTop: "1px solid var(--border)", display: "flex", gap: 10 }}>
          <Btn kind="default" onClick={() => window.print && alert("Mutfak fişi yazıcıya gönderiliyor…")} title="Fiş yazdır"><I.printer size={16} /></Btn>
          {isNew && <>
            <Btn kind="reject" onClick={() => { onReject(order); onClose(); }}><I.x size={15} />Reddet</Btn>
            <Btn kind="accept" full onClick={() => { onAccept(order); }}><I.check size={15} />{f.acceptCta}</Btn>
          </>}
          {act && <Btn kind="primary" full onClick={() => onAdvance(order)}>{act.label}<I.arrowRight size={15} /></Btn>}
          {!isNew && !act && <Btn kind="default" full onClick={onClose}>Kapat</Btn>}
        </div>
      </aside>
    </>
  );
}

// ---------------- Toasts ----------------
function Toasts({ toasts, onClick }) {
  return (
    <div style={{ position: "fixed", top: 70, right: 20, zIndex: 80, display: "flex", flexDirection: "column", gap: 10, width: 320 }}>
      {toasts.map((t) => (
        <div key={t.id} onClick={() => onClick(t.order)} style={{
          background: "var(--surface)", border: "1px solid var(--border)", borderLeft: "3px solid var(--new)",
          borderRadius: "var(--radius)", boxShadow: "var(--shadow-lg)", padding: "12px 14px",
          display: "flex", alignItems: "center", gap: 11, cursor: "pointer", animation: "toastIn .3s cubic-bezier(.2,.8,.2,1)",
        }}>
          <PlatformBadge pid={t.order.platformId} size={32} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: "var(--new)", textTransform: "uppercase", letterSpacing: ".04em" }}>Yeni sipariş</div>
            <div style={{ fontWeight: 600, fontSize: 13.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.order.customer}</div>
            <div style={{ fontSize: 11.5, color: "var(--text-3)" }}>{PLATFORMS[t.order.platformId].name} · {t.order.currency} {fmtMoney(t.order.total)}</div>
          </div>
          <I.arrowRight size={16} style={{ color: "var(--text-3)" }} />
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { NavRail, TopBar, Toolbar, DetailPanel, Toasts });
