/* eslint-disable */
/* © 2026 K2B NETWORK SOLUTIONS LLC. All rights reserved.
   Proprietary and confidential. Unauthorized copying, distribution, or use of
   this file, via any medium, is strictly prohibited. Original work product. */
// JBREWS DMS — Service Repair Orders.
// RC32 (lane ros, owner 2026-10-25 "the RO screens are way too crowded"): "one step at a time".
//   • No RO open: the full-width RO list, grouped by the 5 steps (Write-up · Waiting · In progress · Ready · Closed), or a Board.
//   • An RO open: a slim list on the left (or a thin strip on a small laptop; behind "☰ RO list" on a tablet / phone) and the RO:
//     a 2-line header (⋯ More holds the rarely used buttons), the 5-step line with ONE yellow next-step button, tabs (Jobs ·
//     Customer & vehicle · Notes · Inspection · Payments · ⋯ More) and a short money line with Details.
//   • Jobs fold to one line each; the job being priced (Write-up) or worked (In progress) opens by itself; the Customer OK card sits on
//     top until the customer approves; the payment form opens at Ready (owner Q4).
//   • Every move between steps goes through DMS.svcMoveTo (ServiceCore, RC32 foundation): one stored step at a time through today's
//     Advance check — never past "Awaiting Approval" without the customer's OK. Money is untouched: Close RO & Post, payments, voids,
//     refunds and the Sunbit close are the same server commands; only the buttons moved.
//   • Settings are read ONLY through DMS.svcSettings() / the svc* helpers (RC32 foundation); a store that never saved them reads the
//     defaults (INTERFACE.md section 2); "Aa My view" is the person's own view (browser only).
//   • Phones: one column, a pinned bottom bar (🖨 Invoice | the yellow button | Close RO). One DOM tree per layout, picked in JS from the
//     window's width (desk ≥ 1000, narrow 600-999, phone < 600) — the hooks the tests use exist exactly once.
// Logic lives in ServiceCore / DMSCore.

// Today's lists (RC31). The screens read the store's lists from the settings (L4 op catalog, L1 advisors, L3 inspection, L5 methods);
// these stay as the "today" values other screens and the foundation test compare with.
const SVC_OP_CATALOG = [
  { op: "OIL-LOF",    desc: "Oil Change Lube Filter",          hrs: 0.5, lab:  65.50 },
  { op: "OIL-SYN",    desc: "Synthetic Oil Change",            hrs: 0.5, lab:  79.50 },
  { op: "BRK-PADS-F", desc: "Front Brake Pad Replacement",     hrs: 1.5, lab: 189.00 },
  { op: "BRK-PADS-R", desc: "Rear Brake Pad Replacement",      hrs: 1.5, lab: 189.00 },
  { op: "BRK-RTR-F",  desc: "Front Rotor Replacement",         hrs: 1.2, lab: 158.00 },
  { op: "TIRE-ROT",   desc: "Tire Rotation",                   hrs: 0.3, lab:  32.40 },
  { op: "TIRE-MNT",   desc: "Mount and Balance — 4 Tires",     hrs: 0.8, lab:  98.00 },
  { op: "ALIGN-4W",   desc: "4-Wheel Alignment",               hrs: 1.0, lab: 129.00 },
  { op: "DIAG-CEL",   desc: "Diagnostic — Check Engine Light", hrs: 1.0, lab: 129.00 },
  { op: "DIAG-AC",    desc: "Diagnostic — Climate / A/C",      hrs: 1.0, lab: 129.00 },
  { op: "BATT-RPL",   desc: "Battery Replacement",             hrs: 0.4, lab:  48.00 },
  { op: "STATE-INSP", desc: "MO State Safety Inspection",      hrs: 0.5, lab:  12.00 },
  { op: "WARR-PCM",   desc: "Warranty — PCM Reflash",          hrs: 1.2, lab: 142.00 },
  { op: "SVC-30K",    desc: "30,000 Mile Service",             hrs: 2.5, lab: 318.00 },
  { op: "SVC-60K",    desc: "60,000 Mile Service",             hrs: 3.5, lab: 442.00 },
  { op: "LABOR",      desc: "Custom Labor Operation",          hrs: 1.0, lab: 145.00 },
];
const SVC_ADVISORS = ["Mark Service", "Shannon Keyes", "Bryce Tanner", "Delaney Riley"];
const OP_STATUS_TONE = { DONE: "var(--jb-green)", ACTIVE: "var(--jb-blue)", PEND: "var(--jb-amber)", HOLD: "var(--jb-red)" };
const RO_PAY_TYPE_TONE = { Customer: "#1B66A8", Warranty: "#B26A00", "Service Contract": "#0E7A6E", Internal: "#8050B0", Courtesy: "#8a1c1c" };

const roAgeDays = (ro) => Math.floor((Date.now() - new Date(ro.opened)) / 86400000);
const roM$ = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

// Size of an element (ResizeObserver) — drives the layout (desk / narrow / phone).
// RC32: a CALLBACK ref — the window can mount after the first render (the technician's phone shows My jobs first), so the observer
// (re)attaches whenever the element appears; the first width is read at once (before paint) so the right layout draws first time.
const useRoBox = () => {
  const [box, setBox] = React.useState(() => ({ w: typeof window !== "undefined" && window.innerWidth ? Math.max(320, window.innerWidth - (window.innerWidth >= 1100 ? 244 : window.innerWidth > 640 ? 68 : 0)) : 1400, h: 900 }));
  const cleanup = React.useRef(null);
  const ref = React.useCallback((el) => {
    if (cleanup.current) { cleanup.current(); cleanup.current = null; }
    if (!el) return;
    const upd = () => setBox(b => (b.w === el.clientWidth && b.h === el.clientHeight ? b : { w: el.clientWidth, h: el.clientHeight }));
    upd();
    if (typeof ResizeObserver === "undefined") { window.addEventListener("resize", upd); cleanup.current = () => window.removeEventListener("resize", upd); return; }
    const ro = new ResizeObserver(upd); ro.observe(el); cleanup.current = () => ro.disconnect();
  }, []);
  React.useEffect(() => () => { if (cleanup.current) cleanup.current(); }, []);
  return [ref, box];
};

// ─── RC32 helpers: settings, steps, who, what the RO is waiting on ──────
// The store's settings, resolved by the foundation (every missing / broken setting reads its default). Never read serviceSettings.ro raw.
const roCfgOf = () => {
  const D = window.DMS;
  try { const s = D && D.svcSettings ? D.svcSettings() : null; if (s && s.ro && s.money) return s; } catch (e) {}
  const t = (D && D.SVC_RO_TODAY) || { ro: null, money: null };
  return { ro: t.ro, money: t.money };
};
const RO_GROUPS = ["writeup", "waiting", "progress", "ready", "closed"];
const RO_GROUP_META = {
  writeup:  { n: 1, label: "Write-up",    hint: "get the customer's OK, then send it to the shop", dot: "#D99A1E", bg: "#FFF6E2", fg: "#8A5A00" },
  waiting:  { n: 2, label: "Waiting",     hint: "sent to the shop, nobody working on it yet",      dot: "#8050B0", bg: "#F1EAFB", fg: "#5E3596" },
  progress: { n: 3, label: "In progress", hint: "a technician is working",                         dot: "#1B66A8", bg: "#E5EFFA", fg: "#1456A0" },
  ready:    { n: 4, label: "Ready",       hint: "work done: call the customer, take payment, close", dot: "#16A34A", bg: "#E6F7EC", fg: "#0E7A37" },
  closed:   { n: 5, label: "Closed",      hint: "posted to the books",                             dot: "#9AA3AE", bg: "#EEF1F5", fg: "#5B6578" },
};
const roGroupLabel = (g) => { try { const x = (window.DMS && DMS.SVC_STEP_GROUPS || []).find(s => s.key === g); if (x && x.label) return x.label; } catch (e) {} return (RO_GROUP_META[g] || {}).label || g; };
// cfg (optional) = a resolved settings object (Service Setup's "Preview an RO" passes the unsaved choices); missing = the station's settings
const roGroupOf = (ro, cfg) => { try { return window.DMS && DMS.svcStepGroup ? DMS.svcStepGroup(ro, cfg && cfg.ro ? { settings: cfg } : undefined) : (ro.status === "Closed" ? "closed" : "writeup"); } catch (e) { return ro && ro.status === "Closed" ? "closed" : "writeup"; } };
const roLive = (ro) => ((ro && ro.ops) || []).filter(j => j && j.approval !== "declined");
const roOkOf = (ro) => { try { return DMS.svcOkState(ro); } catch (e) { return { given: !!ro.authorization, needed: !ro.authorization && roLive(ro).length > 0 }; } };
// What the customer owes NOW. Open RO: the shared calculation. Closed RO: the committed balance less the payments recorded after the
// close (their own PMT- / RF- entries) — screen only; fixes the closed, paid RO that still said "customer owes" (ux-shots finding).
const roOwesNow = (ro) => {
  const m = window.DMS && DMS.roMoney ? DMS.roMoney(ro) : null;
  if (!m || (ro && ro.status === "Void")) return 0;   // RC36 (rov36): a VOID / REVERSED RO owes nothing
  const bal = +m.customerBalance || 0;
  if (ro.status !== "Closed") return Math.max(0, bal);
  let after = 0;
  (ro.payments || []).forEach(p => { if (p && !p.voided && p.jeId && /^(PMT|RF)-/.test(String(p.jeId))) after += +p.amount || 0; });
  return Math.max(0, Math.round((bal - after) * 100) / 100);
};
const roTime = (iso) => { const d = new Date(iso); return isNaN(d) ? "" : d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }); };
const roPromiseText = (ro) => {
  if (!ro || !ro.promise) return "";
  const d = new Date(ro.promise); if (isNaN(d)) return "";
  const now = new Date(), t = roTime(ro.promise);
  if (d.toDateString() === now.toDateString()) return t;
  if (d.toDateString() === new Date(now.getTime() + 86400000).toDateString()) return "Tomorrow " + t;
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" }) + " " + t;
};
const roPromiseLate = (ro) => { if (!ro || !ro.promise || ro.status === "Closed") return false; const d = new Date(ro.promise); return !isNaN(d) && d.getTime() < Date.now() && roGroupOf(ro) !== "ready"; };
const roStatusWord = (code, cfg) => { const w = cfg && cfg.ro && cfg.ro.lists && cfg.ro.lists.jobStatus; return (w && w[code]) || code || "PEND"; };
// "Waiting on / next step" — plain words for the list, the board and the slim cards.
const roWaitingOn = (ro, owes) => {
  if (ro && ro.status === "Void") return { text: (ro.roVoid && ro.roVoid.kind === "reversed" ? "REVERSED" : "VOID") + (ro.roVoid && ro.roVoid.reasonLabel ? " · " + ro.roVoid.reasonLabel : ""), dot: "#B23A2E" };   // RC36 (rov36)
  const g = roGroupOf(ro);
  if (g === "closed") return { text: owes > 0.005 ? "Closed · owes " + roM$(owes) : "Closed", dot: RO_GROUP_META.closed.dot };
  const live = roLive(ro);
  if (!(ro.ops || []).length) return { text: "Add jobs", dot: "#C7CDD4" };
  const hold = live.find(j => j.status === "HOLD");
  if (hold) return { text: "On hold" + (hold.holdReason ? " · " + hold.holdReason : ""), dot: "#B23A2E" };
  const ok = roOkOf(ro);
  if (ok.needed && g !== "ready") {
    const sent = ro.signRequest && ro.signRequest.status === "sent" ? " · e-sign sent " + roTime(ro.signRequest.sentAt) : "";
    return { text: "Customer OK needed" + sent, dot: RO_GROUP_META.writeup.dot };
  }
  if (g === "writeup") return { text: "Send to the shop", dot: RO_GROUP_META.writeup.dot };
  if (g === "waiting") {
    const w = ro.payType === "Warranty" || live.some(j => j.payType === "Warranty") ? " · warranty" : "";
    return { text: (ro.stage === "In Diagnosis" ? "Diagnosis" : ro.stage === "Estimate" ? "Estimate" : "Waiting for tech") + w, dot: RO_GROUP_META.waiting.dot };
  }
  if (g === "progress") { const done = live.filter(j => j.status === "DONE").length; return { text: "Working" + (done ? ` · ${done} of ${live.length} jobs done` : ""), dot: RO_GROUP_META.progress.dot }; }
  return { text: owes > 0.005 ? "Customer owes " + roM$(owes) : "Ready to close", dot: RO_GROUP_META.ready.dot };
};
// Who is "me": the technicians linked to this sign-in (T1, technicians[].userId) and the advisor name of this sign-in.
const roMeIds = () => {
  const D = window.DMS; const me = String((D && D.userId && D.userId()) || "");
  const techIds = me ? ((D && D.technicians && D.technicians()) || []).filter(t => t && t.userId != null && String(t.userId) === me).map(t => t.id) : [];
  const u = ((D && D.roster && D.roster()) || []).find(x => x && String(x.id) === me);
  return { me, techIds, advisor: u ? String(u.name || u.id || "") : "" };
};
const roIsMine = (ro, who) => !!who && (
  (who.techIds.length && ((ro.ops || []).some(o => who.techIds.includes(o.techId)) || who.techIds.includes(ro.techId)))
  || (who.advisor && ro.advisor === who.advisor) || (who.me && String(ro.openedBy || "") === who.me));
const roMyViewGet = () => { try { return window.DMS && DMS.svcMyView ? DMS.svcMyView() : null; } catch (e) { return null; } };
const roRoleViewGet = () => {
  try { const v = window.DMS && DMS.svcRoleView ? DMS.svcRoleView() : null; if (v) return v; } catch (e) {}
  return { chip: "open", counters: "tiles", acct: "tab", acctDetail: "open", tabs: ["cust", "jobs", "notes", "pay"] };
};
const roRoleKey = () => { try { return window.DMS && DMS.svcRoleKey ? DMS.svcRoleKey() : "advisor"; } catch (e) { return "advisor"; } };
const roDeviceType = () => { try { return window.DMS && DMS.svcDeviceType ? DMS.svcDeviceType() : "laptop"; } catch (e) { return "laptop"; } };
const roSay = (r) => { if (r && r.msg) window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 3200); return r || { ok: false }; };
// R3 (owner Q3): after a change that may move the RO, move it by itself — only through svcMoveTo (one stored step at a time, never past the OK)
// RC32 fix (r32-aud M1, owner Q1): when the customer OKs the WHOLE estimate (X4 = whole), every job in it (not declined, still waiting) is
// marked approved BEFORE the authorization is saved — the job rows stop asking "Approve / Decline" and authorization.amount (today's
// approved-labor figure, read by reports and old prints) is that estimate's labor. A labor-only store (X4 = labor) keeps today's rule:
// the advisor approves each job. Nothing about money changes (pending and approved jobs bill alike). Also used by the e-sign page.
const roOkWholeJobs = (roId, shown) => {
  try {
    if (shown !== "whole" || !window.DMS || !DMS.setOpApproval) return 0;
    const ro = (DMS.repairOrders() || []).find(r => r.id === roId); if (!ro) return 0;
    const declined = DMS.roDeclinedJobIds ? DMS.roDeclinedJobIds(ro) : new Set();
    let n = 0;
    (ro.ops || []).slice().forEach(o => { if (o && (!o.approval || o.approval === "pending") && !declined.has(String(o.id))) { const r = DMS.setOpApproval(roId, o.id, "approved"); if (r && r.ok) n++; } });
    return n;
  } catch (e) { return 0; }
};
// RC32 fix (r32-aud M2): the RO's totals for the editor — the store's figures, or (Setup › "Preview an RO": a made-up RO that is not in
// the store) the same figures worked out from the RO itself through the one money calculation (DMS.roMoney).
const roTotalsFor = (ro) => {
  const t = ro && DMS.roTotals ? DMS.roTotals(ro.id) : null;
  if (t) return t;
  const R2 = (n) => Math.round((+n || 0) * 100) / 100;
  const m = ro && DMS.roMoney ? DMS.roMoney(ro) : null;
  const live = ((ro && ro.payments) || []).filter(p => p && !p.voided);
  const allocated = R2(live.reduce((s, p) => s + (+p.amount || 0), 0));
  const fees = R2(live.reduce((s, p) => s + (+p.fee || 0), 0));
  const total = m ? m.total : R2((ro && ro.total) || 0);
  return { total, allocated, fees, balance: R2(total - allocated), customerBalance: m ? m.customerBalance : undefined, collect: R2(allocated + fees), byPayType: (m && m.byPayer) || {}, byMethod: {}, live, money: m };
};
// Approved / Pending / Declined labor of the RO (the same sums as DMS.roEstimateTotals, from the RO itself so a preview RO reads too)
const roEstFor = (ro) => {
  const ops = (ro && ro.ops) || [];
  const sum = (f) => +ops.filter(f).reduce((s, o) => s + (+o.lab || 0), 0).toFixed(2);
  return { approved: sum(o => o.approval === "approved"), declined: sum(o => o.approval === "declined"), pending: sum(o => !o.approval || o.approval === "pending") };
};
const roAutoMove = (roId, event) => { try { if (window.DMS && DMS.svcAutoMove) { const r = DMS.svcAutoMove(roId, event); if (r && r.ok && !r.noop && r.msg) window.k2bToast && window.k2bToast(r.msg + " (moved by itself)", "ok", 2600); } } catch (e) {} };
// Carfax from a menu item (same launch as the Carfax button)
const roCarfaxOn = () => { const A = window.K2BApps; return !(A && A.isEnabled && !A.isEnabled("carfax")); };
const roCarfaxOpen = (vin, ctx) => { const A = window.K2BApps; if (!A) { window.jbCarfaxOpen && window.jbCarfaxOpen(vin, ctx); return; } A.open("carfax", { vin, ctx }); };
// The technician for a new job (L2): the RO's "New jobs go to" pick, none, or the next tech up (fewest open jobs).
const roNewJobTech = (ro, cfg) => {
  const how = (cfg && cfg.ro && cfg.ro.lists && cfg.ro.lists.newJobTech) || "ro";
  if (how === "none") return "";
  if (how === "next") {
    const techs = (DMS.technicians() || []).filter(t => t && t.active !== false);
    if (!techs.length) return ro.techId || "";
    const load = {}; (DMS.repairOrders() || []).filter(r => r.status === "Open").forEach(r => (r.ops || []).forEach(o => { if (o.techId && o.status !== "DONE" && o.approval !== "declined") load[o.techId] = (load[o.techId] || 0) + 1; }));
    return techs.slice().sort((a, b) => (load[a.id] || 0) - (load[b.id] || 0) || String(a.name).localeCompare(String(b.name)))[0].id;
  }
  return ro.techId || "";
};

const ServiceTickets = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => DMS.subscribe(force), []);

  const cfg   = roCfgOf();
  const ros   = DMS.repairOrders();
  const techs = DMS.technicians();
  const parts = DMS.parts();
  const canSvc = !!(DMS.can && DMS.can("service"));
  const isTech = !!(DMS.roleIs && DMS.roleIs("Technician"));
  // RC32 (rset, SPEC 3.2): a read-only sign-in (Technician, Sales, GM) never writes an RO. RC31 materialised an old summary-only RO's
  // lines on open and saved them; the server now refuses that save from a Technician (filed as a sync issue). Writers keep RC31's
  // behaviour; the money is the same either way (FopsCalc reads a summary-only RO the way hydrateROLines would).
  const hydrate = (id) => { if (canSvc && id) DMS.hydrateROLines(id); };
  const view  = roRoleViewGet();
  const who   = roMeIds();

  const [myView, setMyView] = React.useState(() => roMyViewGet() || { size: "standard", bigText: false, list: "auto", remember: true, start: "store", open: {} });
  const startChip = () => { const c = myView && myView.start === "mine" ? "mine" : (view.chip || "open"); return c === "mine" && !(who.techIds.length || who.advisor || isTech) ? "open" : c; };
  const [q, setQ]           = React.useState("");
  const [filter, setFilter] = React.useState(startChip);
  const [selId, setSelId]   = React.useState(null);   // RC32: the list is the landing page (no RO opens by itself)
  const [modal, setModal]   = React.useState(null);   // {type, ...}
  const [queueOpen, setQueueOpen] = React.useState(false);
  const [mode, setMode]     = React.useState("list");  // list | board (no RO open)
  const [railPick, setRailPick] = React.useState(null);  // null = My view (P3); "full" | "strip"
  const [mvOpen, setMvOpen] = React.useState(false);
  const [techView, setTechView] = React.useState("myjobs");
  const [rootRef, box] = useRoBox();
  const layout = DMS.svcLayout ? DMS.svcLayout(box.w) : (box.w >= 1000 ? "desk" : box.w >= 600 ? "narrow" : "phone");
  const phone = layout === "phone";
  const act = roSay;
  const saveMyView = (patch) => { const r = DMS.svcMyViewSave ? DMS.svcMyViewSave(patch) : { ok: false, view: { ...myView, ...patch } }; setMyView(r.view || { ...myView, ...patch }); if (!r.ok && r.msg) window.k2bToast && window.k2bToast(r.msg, "warn", 3600); return r; };
  const resetMyView = () => { const r = DMS.svcMyViewReset ? DMS.svcMyViewReset() : { view: null }; setMyView(r.view || roMyViewGet()); setRailPick(null); setFilter(view.chip === "mine" && !(who.techIds.length || isTech) ? "open" : (view.chip || "open")); };

  // Hand-off pointer from Service Reports / Recon tracker / other screens: open that RO once, with the "All" list.
  React.useEffect(() => {
    let id = null; try { id = localStorage.getItem("jb_ro_focus"); } catch (e) {}
    id = id || window.jbROFocus || null;
    if (!id) return;
    try { localStorage.removeItem("jb_ro_focus"); } catch (e) {}
    window.jbROFocus = null;
    if (ros.find(r => r.id === id)) { setSelId(id); setFilter("all"); setTechView("ro"); hydrate(id); }
  }, []);

  // Sales features (H6): when another PC took this RO number at the same moment, ours was re-numbered —
  // keep the advisor on THEIR RO (the new number), not on the other PC's record under the old one.
  React.useEffect(() => {
    const h = (e) => { const d = e && e.detail; if (d && d.collection === "repairOrders") setSelId(cur => (cur === d.from ? d.to : cur)); };
    window.addEventListener("k2b-rekeyed", h);
    return () => window.removeEventListener("k2b-rekeyed", h);
  }, []);

  const sel = ros.find(r => r.id === selId) || null;
  React.useEffect(() => { if (selId) hydrate(selId); }, [selId]);
  const pick = (id) => { setSelId(id); hydrate(id); setQueueOpen(false); setTechView("ro"); };

  // ── queue filtering ──
  const agedDays = (cfg.ro && cfg.ro.workflow.agedDays) || 7;
  const matchQ = (r) => {
    if (!q) return true;
    const hay = [r.id, r.customer, r.vehicle, r.vin, r.advisor, r.tech, r.payType, r.concern, r.custNum, r.cust && r.cust.phone, r.cust && r.cust.email].join(" ").toLowerCase();
    // RC31 (fx31, RC30 acceptance F6): an OLD 10-digit number / a phone in any format finds the RO of its account (DMS.custQueryHit — one reading)
    return hay.includes(q.toLowerCase()) || (window.DMS && window.DMS.custQueryHit ? window.DMS.custQueryHit(q, r.custNum, [r.cust && r.cust.phone]) : false);
  };
  const FILTERS = [
    { k: "mine",     label: "Mine",     test: (r) => r.status === "Open" && roIsMine(r, who) },
    { k: "open",     label: "Open",     test: (r) => r.status === "Open" },
    { k: "aged",     label: "Aged",     test: (r) => r.status === "Open" && roAgeDays(r) >= agedDays, tone: "red" },
    { k: "warranty", label: "Warranty", test: (r) => r.payType === "Warranty" || (r.ops || []).some(o => o.payType === "Warranty") },
    { k: "internal", label: "Internal", test: (r) => r.payType === "Internal" || (r.ops || []).some(o => o.payType === "Internal") },
    { k: "closed",   label: "Closed",   test: (r) => r.status === "Closed" },
    { k: "void",     label: "Void",     test: (r) => r.status === "Void" },   // RC36 (rov36): voided / reversed ROs stay in the list (never on Open)
    { k: "all",      label: "All",      test: () => true },
  ];
  const curFilter = FILTERS.find(f => f.k === filter) || FILTERS[1];
  const queue = ros.filter(r => matchQ(r) && curFilter.test(r));
  const chipCount = (f) => ros.filter(r => matchQ(r) && f.test(r)).length;

  // ── counters (R10: tiles / one line / off) — "Closed today" counts the STORE's day (the station's local date, not UTC) ──
  const openROs = ros.filter(r => r.status === "Open");
  const wip = openROs.reduce((s, r) => s + ((+r.laborSale || 0) + (+r.partsSale || 0) + (+r.tax || 0)), 0);
  const aged = openROs.filter(r => roAgeDays(r) >= agedDays).length;
  const todayKey = new Date().toDateString();
  const closedToday = ros.filter(r => r.status === "Closed" && (typeof svcIsToday === "function" ? svcIsToday(r.closed) : (r.closed && new Date(r.closed).toDateString() === todayKey))).length;
  const countersLine = `${openROs.length} open · ${aged} aged · WIP ${jbm0(wip)} · ${closedToday} closed today`;

  // ── close RO → ONE server command (RC20 fops); the confirmation is built from the COMMITTED answer only ──
  const [closing, setClosing] = React.useState(null);
  const doClose = async (ro) => {
    if (closing) return { ok: false, msg: "Already closing…" };
    setClosing(ro.id);
    let r;
    try { r = await DMS.closeRO(ro.id); } finally { setClosing(null); }
    if (!r.ok) { act(r); return r; }
    const jeRec = (r.records || []).find(x => x.collection === "journalEntries");
    const je = jeRec ? jeRec.record : null;   // the office sees the entry; a service login sees the committed invoice
    const after = DMS.repairOrders().find(x => x.id === ro.id) || ro;
    const effects = [];
    (after.partsLines || []).forEach(pl => effects.push({ label: `Parts inventory relieved`, detail: `${pl.qty}× ${pl.part} pulled from stock (acct 242)` }));
    if (after.flagHours) effects.push({ label: `${after.flagHours}h flagged`, detail: "rolls to payroll & productivity" });
    (after.payments || []).filter(p => !p.voided).forEach(p => effects.push({ label: `${DMS.roPayLabel ? DMS.roPayLabel(p.method) : p.method} ${roM$(p.amount)}${p.fee ? " + fee " + roM$(p.fee) : ""}`, detail: `${p.receiptNo} → acct ${DMS.roPayAcct ? DMS.roPayAcct(p, after) : ""}${p.claimNo ? " · claim " + p.claimNo : ""}` }));
    const inv = r.invoice || {};
    if (inv.customerBalanceCents) effects.push({ label: `Customer balance ${roM$(inv.customerBalanceCents / 100)} booked`, detail: "to customer A/R (acct 220) — not cash" });
    (inv.receivables || []).filter(x => x.payer !== "Customer").forEach(x => effects.push({ label: `${x.payer} share ${roM$(x.amountCents / 100)} booked`, detail: x.payer === "Warranty" ? "warranty claim receivable (263)" : x.payer === "Internal" ? "charged to the unit (recon)" : "receivable" }));
    (r.warnings || []).forEach(w => effects.push({ label: "Note", detail: w }));
    // R14: the posting window (today) or a short note with "Print invoice?"
    if (cfg.ro && cfg.ro.layout.afterClose === "note") {
      act(r);
      if (window.confirm(`${ro.id} closed and posted (${r.jeId || "posted"}). Print the invoice now?`)) window.k2bPrintRO && window.k2bPrintRO(after, after.payType === "Warranty" && !Array.isArray(after.payments) ? "warranty" : "invoice");
      return r;
    }
    setModal({ type: "gl", je, effects, invoice: inv, jeId: r.jeId, title: `${ro.id} closed — posted to General Ledger (${r.jeId})`, ro: after });
    act(r);
    return r;
  };

  // ── the technician's phone (owner Q2, T2): My jobs, view only — never mounted together with the RO editor ──
  const techPhone = typeof window.svcTechPhoneMode === "function" && window.svcTechPhoneMode() && typeof window.TechJobs === "function";
  if (techPhone && (techView === "myjobs" || !sel)) {
    const TJ = window.TechJobs;
    return <TJ ros={ros} techs={techs} cfg={cfg} go={go} onClose={onClose} who={who} onFullRo={(id) => pick(id)} />;
  }

  // ── the "Aa My view" panel + the title bar ──
  const titleExtra = (
    <span data-ro-titlebar-extra="1" style={{ display: "inline-flex", gap: 6, alignItems: "center", marginLeft: "auto", marginRight: 6, flexWrap: "nowrap", flex: "0 0 auto" }}>
      {phone && typeof window.k2bToggleAppMenu === "function" && <RoBtn small onClick={() => window.k2bToggleAppMenu()} title="The DMS menu" style={{ minHeight: 32 }}>☰ Menu</RoBtn>}
      {phone && window.JBHelperButton ? <window.JBHelperButton compact tb /> : null}{/* RC34 (hlp): the helper button where the phone's top bar would be (CSS shows it only when the top bar steps aside) */}
      {canSvc && <RoBtn small onClick={() => setModal({ type: "new" })} data-ro-new="1" style={{ background: "var(--jb-yellow)", fontWeight: 700, minHeight: phone ? 32 : undefined }}>+ New RO</RoBtn>}
      {!phone && <RoBtn small onClick={() => go && go("servicedept")}>📅 Schedule</RoBtn>}
      <RoBtn small data-ro-myview="btn" onClick={() => setMvOpen(o => !o)} title="Your own view of this screen (kept on this computer)" style={{ minHeight: phone ? 32 : undefined }}>Aa{phone ? "" : " My view"}</RoBtn>
    </span>
  );
  const railMode = (() => { const p = railPick || (myView && myView.list) || "auto"; if (p === "full") return "full"; if (p === "strip") return "strip"; return (typeof window !== "undefined" && window.innerWidth < 1300) ? "strip" : "full"; })();
  const listHidden = !!sel && layout !== "desk";
  const dense = myView && myView.size === "compact";
  const zoom = myView && myView.bigText ? 1.12 : 1;

  const chipsRow = (which, small) => (
    <div style={{ display: "flex", gap: small ? 4 : 6, flexWrap: "wrap", alignItems: "center" }}>
      {FILTERS.filter(f => !which || which.includes(f.k)).map(f => (
        <JBChip key={f.k} active={filter === f.k} tone={f.tone} onClick={() => setFilter(f.k)} count={chipCount(f)}>{f.label}</JBChip>
      ))}
    </div>
  );
  const searchBox = (ph) => <JBSearch value={q} onChange={setQ} name="k2b-ro-queue-find" placeholder={ph || "Search RO#, customer, phone, VIN, vehicle…"} />;
  const emptyMsg = queue.length === 0 ? (q ? <JBSearchEmpty q={q} noun="repair orders" onClear={() => setQ("")} /> : <div style={{ padding: "26px 14px", textAlign: "center", color: "var(--jb-text-muted)", fontSize: 13 }}>No repair orders match.</div>) : null;

  // the full-width list (no RO open)
  const fullList = (
    <RoQueue queue={queue} cfg={cfg} view={view} layout={layout} mode={mode} setMode={setMode} chipsRow={chipsRow} searchBox={searchBox}
             countersLine={countersLine} tiles={view.counters === "tiles" && !phone} counters={view.counters} openCount={openROs.length} aged={aged} wip={wip} closedToday={closedToday}
             emptyMsg={emptyMsg} onPick={pick} dense={dense} />
  );
  const rail = (
    <RoRail queue={queue} sel={selId} cfg={cfg} mode={railMode} chipsRow={chipsRow} searchBox={searchBox} countersLine={view.counters === "off" ? "" : countersLine} emptyMsg={emptyMsg}
            filter={filter} onPick={pick} onFold={() => setRailPick(railMode === "strip" ? "full" : "strip")} onFullList={() => { setSelId(null); setQueueOpen(false); }} overlay={false} />
  );

  return (
    <div ref={rootRef} className="k2b-window" data-ro-screen="1" data-ro-layout={layout} style={{ width: "100%", maxWidth: 1600, height: "calc(100vh - 110px)", minHeight: 420,
                                          margin: "0 auto", display: "flex", flexDirection: "column",
                                          background: "var(--jb-bg)", position: "relative", overflow: "hidden" }}>
      <K2BTitlebar title="Service — Repair Orders" icon="store" onClose={onClose} extra={titleExtra} />
      {mvOpen && <RoMyViewPanel view={myView} onSave={saveMyView} onReset={resetMyView} onClose={() => setMvOpen(false)} phone={phone} />}

      {/* Body: the full list (no RO open) | slim list + the RO */}
      <div style={{ flex: 1, display: "flex", minHeight: 0, minWidth: 0, position: "relative", zoom: zoom !== 1 ? zoom : undefined }}>
        {!sel ? fullList : (
          <>
            {layout === "desk" && rail}
            {listHidden && queueOpen && (
              <div style={{ position: "absolute", inset: 0, zIndex: 30, display: "flex" }}>
                <div style={{ width: phone ? "88%" : 340, maxWidth: 380, boxShadow: "var(--jb-shadow)", height: "100%", background: "var(--jb-surface)" }}>
                  <RoRail queue={queue} sel={selId} cfg={cfg} mode="full" chipsRow={chipsRow} searchBox={searchBox} countersLine={view.counters === "off" ? "" : countersLine} emptyMsg={emptyMsg}
                          filter={filter} onPick={pick} onFullList={() => { setSelId(null); setQueueOpen(false); }} overlay={true} onHide={() => setQueueOpen(false)} />
                </div>
                <div style={{ flex: 1, background: "rgba(10,20,40,0.25)" }} onClick={() => setQueueOpen(false)} />
              </div>
            )}
            <div style={{ flex: 1, minHeight: 0, minWidth: 0, display: "flex", flexDirection: "column" }}>
              <RoEditor key={sel.id} ro={sel} techs={techs} parts={parts} act={act} go={go} layout={layout} cfg={cfg} view={view} dense={dense}
                        myView={myView} saveMyView={saveMyView} closing={closing === sel.id}
                        listHidden={listHidden} listCount={queue.length} onShowList={() => setQueueOpen(true)}
                        techPhone={techPhone} onBackToJobs={() => setTechView("myjobs")}
                        onCloseRO={() => doClose(sel)}
                        onFlag={() => setModal({ type: "flag", ro: sel })}
                        onChangeCustomer={() => setModal({ type: "cust", ro: sel })} />
            </div>
          </>
        )}
      </div>

      {modal && modal.type === "flag"    && <FlagModal ro={modal.ro} act={act} cfg={cfg} onClose={() => setModal(null)} />}
      {modal && modal.type === "new"     && <RoCustomerSearchModal mode="new" techs={techs} act={act} go={go} cfg={cfg} onClose={() => setModal(null)} onCreated={(id) => { setFilter(f => (f === "closed" ? "open" : f)); pick(id); }} />}
      {modal && modal.type === "cust"    && <RoCustomerSearchModal mode="change" ro={modal.ro} techs={techs} act={act} go={go} cfg={cfg} onClose={() => setModal(null)} />}
      {modal && modal.type === "gl"      && <GLConfirmModal {...modal} onClose={() => setModal(null)} />}
    </div>
  );
};

// ─── "Aa My view" (P1-P6) — this person on this kind of device; kept in the browser only ─────
const RoMyViewPanel = ({ view, onSave, onReset, onClose, phone }) => {
  const v = view || {};
  const row = (label, node) => <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 0", borderTop: "1px solid var(--jb-border)" }}><span style={{ flex: 1, fontSize: 13 }}>{label}</span>{node}</div>;
  const seg = (k, opts) => (
    <span style={{ display: "inline-flex", border: "1px solid var(--jb-border-strong)", borderRadius: 8, overflow: "hidden" }}>
      {opts.map(([val, lab]) => <button key={String(val)} type="button" onClick={() => onSave({ [k]: val })} data-ro-myview={k + ":" + val}
                                        style={{ border: 0, padding: "6px 10px", minHeight: 32, cursor: "pointer", fontSize: 12.5, fontWeight: v[k] === val ? 800 : 600, background: v[k] === val ? "var(--jb-navy)" : "var(--jb-surface)", color: v[k] === val ? "#fff" : "var(--jb-text-dim)" }}>{lab}</button>)}
    </span>
  );
  return (
    <div data-ro-myview="panel" style={{ position: "absolute", right: 8, top: 44, zIndex: 60, width: phone ? "calc(100% - 16px)" : 380, maxWidth: "calc(100% - 16px)", boxSizing: "border-box",
                                          background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: 10, boxShadow: "var(--jb-shadow)", padding: "10px 14px" }}>
      <div style={{ display: "flex", alignItems: "center", marginBottom: 4 }}>
        <b style={{ fontSize: 13.5, color: "var(--jb-navy)", flex: 1 }}>My view <span style={{ fontWeight: 500, color: "var(--jb-text-muted)", fontSize: 12 }}>· this sign-in on this {v.device || "computer"}</span></b>
        <RoBtn small onClick={onClose} style={{ minHeight: 30 }}>✕</RoBtn>
      </div>
      {row("Size", seg("size", [["standard", "Standard"], ["compact", "Compact"]]))}
      {row("Bigger text", seg("bigText", [[false, "Off"], [true, "On"]]))}
      {row("RO list beside an open RO", seg("list", [["auto", "Automatic"], ["full", "Full"], ["strip", "Thin strip"]]))}
      {row("Remember which parts of a job I keep open", seg("remember", [[true, "On"], [false, "Off"]]))}
      {row("Start my RO list on", seg("start", [["store", "Store's choice"], ["mine", "Mine"]]))}
      <div style={{ display: "flex", alignItems: "center", gap: 8, paddingTop: 8, borderTop: "1px solid var(--jb-border)" }}>
        <span style={{ flex: 1, fontSize: 12, color: "var(--jb-text-muted)" }}>Kept in this browser only — nothing goes to the server.</span>
        <RoBtn small data-ro-myview="reset" onClick={onReset} style={{ minHeight: 32 }}>Reset my view</RoBtn>
      </div>
    </div>
  );
};

// ─── The full-width RO list (no RO open): rows grouped by step, the old cards, or a board ─────
const RO_QCOL = { ro: ["RO", "104px"], cust: ["Customer · vehicle", "minmax(160px, 1.7fr)"], waiting: ["Waiting on / next step", "minmax(140px, 1.4fr)"], tech: ["Technician", "minmax(90px, 0.9fr)"],
                  promised: ["Promised", "minmax(84px, 0.8fr)"], pay: ["Pay type", "minmax(76px, 0.7fr)"], total: ["Total", "96px"] };
const roSortInGroup = (a, b) => {
  const pa = a.promise ? new Date(a.promise).getTime() : Infinity, pb = b.promise ? new Date(b.promise).getTime() : Infinity;
  if (pa !== pb) return (isNaN(pa) ? Infinity : pa) - (isNaN(pb) ? Infinity : pb);
  return String(a.id).localeCompare(String(b.id));
};
const roGrouped = (queue) => {
  const by = {}; RO_GROUPS.forEach(g => { by[g] = []; });
  queue.forEach(r => { const g = roGroupOf(r); (by[g] || by.writeup).push(r); });
  RO_GROUPS.forEach(g => by[g].sort(roSortInGroup));
  return by;
};
const RoQueue = ({ queue, cfg, view, layout, mode, setMode, chipsRow, searchBox, countersLine, tiles, counters, openCount, aged, wip, closedToday, emptyMsg, onPick, dense }) => {
  const qs = (cfg.ro && cfg.ro.layout.queue) || { style: "rows", groupBySteps: true, columns: ["ro", "cust", "waiting", "tech", "promised", "total"], fold: "never" };
  const narrowish = layout !== "desk";
  const cols = (qs.columns || []).filter(c => RO_QCOL[c]);
  const [folded, setFolded] = React.useState({});
  const by = roGrouped(queue);
  const flat = qs.groupBySteps ? null : queue.slice().sort((a, b) => String(b.id).localeCompare(String(a.id)));
  const row = (r) => (qs.style === "cards" && !narrowish) ? null : <RoQueueRow key={r.id} ro={r} cols={cols} narrow={narrowish} onClick={() => onPick(r.id)} dense={dense} />;
  const groupBlock = (g) => {
    const list = by[g]; if (!list.length) return null;
    const meta = RO_GROUP_META[g];
    const long = qs.fold === "long" && list.length > 8;
    const isFolded = folded[g] != null ? folded[g] : false;
    const shown = long && isFolded ? [] : list;
    return (
      <div key={g} data-ro-qgroup={g}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 12px", background: "var(--jb-surface-2)", borderTop: "1px solid var(--jb-border)", borderBottom: "1px solid var(--jb-border)", position: "sticky", top: narrowish ? 0 : 30, zIndex: 1 }}>
          <span style={{ width: 8, height: 8, borderRadius: 99, background: meta.dot }} />
          <b style={{ fontSize: 13, color: "var(--jb-navy)" }}>{roGroupLabel(g)}</b>
          <span style={{ fontSize: 12, fontWeight: 700, background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: 99, padding: "0 7px", color: "var(--jb-text-dim)" }}>{list.length}</span>
          {!narrowish && <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>{meta.hint}</span>}
          {long && <RoBtn small style={{ marginLeft: "auto" }} onClick={() => setFolded(f => ({ ...f, [g]: !isFolded }))}>{isFolded ? "Show all" : "Fold"}</RoBtn>}
        </div>
        {qs.style === "cards" && !narrowish
          ? <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gap: 8, padding: 10 }}>{shown.map(r => <RoCard key={r.id} ro={r} active={false} onClick={() => onPick(r.id)} />)}</div>
          : shown.map(row)}
      </div>
    );
  };
  return (
    <div data-ro-queue="1" style={{ flex: 1, minHeight: 0, minWidth: 0, display: "flex", flexDirection: "column", background: "var(--jb-surface)" }}>
      <div style={{ padding: narrowish ? "8px 10px" : "10px 14px 8px", display: "flex", flexDirection: "column", gap: 8, borderBottom: "1px solid var(--jb-border)", flexShrink: 0 }}>
        <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
          <div style={{ flex: "1 1 260px", minWidth: 0, maxWidth: narrowish ? "none" : 420, display: "flex" }}>{searchBox()}</div>
          {counters !== "off" && !tiles && <span data-ro-counters="line" style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>{countersLine}</span>}
          <span style={{ flex: 1 }} />
          <span style={{ display: "inline-flex", border: "1px solid var(--jb-border-strong)", borderRadius: 8, overflow: "hidden" }}>
            {[["list", "☰ List"], ["board", "▦ Board"]].map(([k, l]) => <button key={k} type="button" data-ro-qmode={k} onClick={() => setMode(k)} style={{ border: 0, padding: "5px 11px", minHeight: 30, fontSize: 12.5, fontWeight: 700, cursor: "pointer", background: mode === k ? "var(--jb-navy)" : "var(--jb-surface)", color: mode === k ? "#fff" : "var(--jb-text-dim)" }}>{l}</button>)}
          </span>
        </div>
        {tiles && (
          <div data-ro-counters="tiles" style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <JBKpi icon="🔧" label="Open ROs" value={openCount} tone={aged ? "amber" : "blue"} sub={aged ? `${aged} aged` : "all current"} />
            <JBKpi icon="💵" label="Work In Process" value={jbm0(wip)} sub="labor + parts + tax open" />
            <JBKpi icon="⏱" label="Aged ROs" value={aged} tone={aged ? "red" : "ok"} sub={`open ${(cfg.ro && cfg.ro.workflow.agedDays) || 7}+ days`} />
            <JBKpi icon="✓" label="Closed Today" value={closedToday} tone="ok" sub="posted to GL" />
          </div>
        )}
        <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
          {chipsRow(null)}
          {!narrowish && qs.groupBySteps && <span style={{ marginLeft: "auto", fontSize: 12, color: "var(--jb-text-muted)" }}>Inside each step: soonest promise first</span>}
        </div>
      </div>
      <div style={{ flex: 1, minHeight: 0, overflow: "auto" }} data-ro-list-body="1">
        {emptyMsg}
        {mode === "board" && queue.length > 0 ? <RoBoard by={by} onPick={onPick} /> : (
          <>
            {!narrowish && qs.style !== "cards" && queue.length > 0 && (
              <div style={{ display: "grid", gridTemplateColumns: cols.map(c => RO_QCOL[c][1]).join(" "), gap: 10, padding: "7px 14px", position: "sticky", top: 0, zIndex: 2, background: "var(--jb-surface)", borderBottom: "1px solid var(--jb-border)" }}>
                {cols.map(c => <span key={c} style={{ ...roLbl, fontSize: 12, textAlign: c === "total" ? "right" : "left" }}>{RO_QCOL[c][0]}</span>)}
              </div>
            )}
            {qs.groupBySteps ? RO_GROUPS.map(groupBlock) : (qs.style === "cards" && !narrowish
              ? <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gap: 8, padding: 10 }}>{flat.map(r => <RoCard key={r.id} ro={r} active={false} onClick={() => onPick(r.id)} />)}</div>
              : flat.map(row))}
          </>
        )}
      </div>
    </div>
  );
};
// One row of the list: still a <button> holding the RO number (data-ro-card / data-ro-card-total — the tests' hooks).
const RoQueueRow = ({ ro, cols, narrow, onClick, dense }) => {
  const money = DMS.roMoney ? DMS.roMoney(ro) : null;
  const total = money ? money.total : (ro.total != null ? ro.total : ro.laborSale + ro.partsSale + (ro.tax || 0));
  const owes = roOwesNow(ro);
  const w = roWaitingOn(ro, owes);
  const late = roPromiseLate(ro);
  const prom = roPromiseText(ro);
  const transport = ro.transport && ro.transport !== "Drop-off" ? ro.transport : "";
  const promTxt = [transport, prom].filter(Boolean).join(" · ") || "—";
  const g = roGroupOf(ro);
  const veh = String(ro.vehicle || "").replace(/^(\d{4})\s+(CHEVROLET|CHEVY|GMC|BUICK|CADILLAC)\s+/i, "$1 ");
  const stripe = ro.payType === "Warranty" ? "var(--jb-amber)" : ro.payType === "Internal" ? "#8050B0" : RO_GROUP_META[g].dot;
  if (narrow) return (
    <button type="button" onClick={onClick} data-ro-card={ro.id}
            style={{ display: "block", width: "100%", textAlign: "left", border: 0, borderBottom: "1px solid var(--jb-border)", borderLeft: "3px solid " + stripe, background: "var(--jb-surface)",
                     padding: dense ? "7px 12px" : "10px 12px", cursor: "pointer", fontFamily: "var(--jb-font)", color: "var(--jb-text)", minHeight: 48 }}>
      <span style={{ display: "flex", gap: 8, alignItems: "baseline" }}>
        <b style={{ fontFamily: "var(--jb-mono)", fontSize: 13, color: "var(--jb-navy)" }}>{ro.id}</b>
        <b style={{ fontSize: 13.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0, flex: 1 }}>{ro.customer}</b>
        <span data-ro-card-total="1" style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 13, color: "var(--jb-navy)" }}>{jbm(total)}</span>
      </span>
      <span style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 3, fontSize: 12.5, color: "var(--jb-text-dim)" }}>
        <span style={{ width: 7, height: 7, borderRadius: 99, background: w.dot, flexShrink: 0 }} />
        <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{w.text} · {veh}</span>
        <span style={{ color: late ? "#B23A2E" : "var(--jb-text-muted)", fontWeight: late ? 800 : 500, whiteSpace: "nowrap" }}>{prom ? prom + (late ? " · late" : "") : ""}</span>
      </span>
    </button>
  );
  const cell = (c) => {
    if (c === "ro") return <b key={c} style={{ fontFamily: "var(--jb-mono)", fontSize: 13, color: "var(--jb-navy)" }}>{ro.id}</b>;
    if (c === "cust") return <span key={c} style={{ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}><b style={{ fontSize: 13.5 }}>{ro.customer}</b> <span style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>{veh}</span></span>;
    if (c === "waiting") return <span key={c} style={{ display: "flex", gap: 7, alignItems: "center", minWidth: 0, fontSize: 13 }}><span style={{ width: 7, height: 7, borderRadius: 99, background: w.dot, flexShrink: 0 }} /><span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{w.text}</span></span>;
    if (c === "tech") return <span key={c} style={{ fontSize: 13, color: "var(--jb-text-dim)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{ro.tech || "—"}</span>;
    if (c === "promised") return <span key={c} style={{ fontSize: 13, color: late ? "#B23A2E" : "var(--jb-text-dim)", fontWeight: late ? 800 : 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{promTxt}{late ? " · late" : ""}</span>;
    if (c === "pay") return <span key={c} style={{ fontSize: 12.5, color: RO_PAY_TYPE_TONE[ro.payType] || "var(--jb-text-dim)", fontWeight: 600 }}>{ro.payType || "Customer"}</span>;
    if (c === "total") return <span key={c} data-ro-card-total="1" style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 13, color: "var(--jb-navy)", textAlign: "right" }}>{jbm(total)}</span>;
    return null;
  };
  return (
    <button type="button" onClick={onClick} data-ro-card={ro.id}
            style={{ display: "grid", gridTemplateColumns: cols.map(c => RO_QCOL[c][1]).join(" "), gap: 10, alignItems: "center", width: "100%", textAlign: "left",
                     border: 0, borderBottom: "1px solid var(--jb-border)", borderLeft: "3px solid " + stripe, background: "var(--jb-surface)",
                     padding: dense ? "6px 14px 6px 11px" : "9px 14px 9px 11px", cursor: "pointer", fontFamily: "var(--jb-font)", color: "var(--jb-text)" }}>
      {cols.map(cell)}
    </button>
  );
};
const RoBoard = ({ by, onPick }) => (
  <div data-ro-board="1" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 10, padding: 10, alignItems: "start" }}>
    {RO_GROUPS.filter(g => g !== "closed" || by.closed.length).map(g => (
      <div key={g} style={{ background: "var(--jb-surface-2)", border: "1px solid var(--jb-border)", borderRadius: 10, padding: 8, display: "flex", flexDirection: "column", gap: 6 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "2px 4px" }}>
          <span style={{ width: 8, height: 8, borderRadius: 99, background: RO_GROUP_META[g].dot }} />
          <b style={{ fontSize: 13, color: "var(--jb-navy)" }}>{roGroupLabel(g)}</b>
          <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>{by[g].length}</span>
        </div>
        {by[g].map(r => <RoRailCard key={r.id} ro={r} active={false} onClick={() => onPick(r.id)} />)}
      </div>
    ))}
  </div>
);

// ─── Beside an open RO: the slim list (3-line cards) or a thin strip (RO numbers) ─────
const RoRail = ({ queue, sel, cfg, mode, chipsRow, searchBox, countersLine, emptyMsg, onPick, onFold, onFullList, overlay, onHide, filter }) => {
  const by = roGrouped(queue);
  const railChips = ["open", "mine", "closed", "all"].concat(filter && !["open", "mine", "closed", "all"].includes(filter) ? [filter] : []);
  if (mode === "strip" && !overlay) return (
    <div data-ro-rail="strip" style={{ width: 112, flexShrink: 0, borderRight: "1px solid var(--jb-border)", background: "var(--jb-surface)", display: "flex", flexDirection: "column", minHeight: 0 }}>
      <div style={{ padding: "8px 6px 6px", display: "flex", flexDirection: "column", gap: 4, borderBottom: "1px solid var(--jb-border)" }}>
        <RoBtn small data-ro-list-fold="strip" onClick={onFold} title="Show the full list beside the RO" style={{ width: "100%", justifyContent: "center" }}>☰ List ⇥</RoBtn>
        {chipsRow(railChips, true)}
      </div>
      <div style={{ flex: 1, overflow: "auto", padding: "6px 6px 10px", display: "flex", flexDirection: "column", gap: 5 }}>
        {queue.length === 0 && <div style={{ fontSize: 12, color: "var(--jb-text-muted)", padding: 4 }}>None.</div>}
        {RO_GROUPS.map(g => by[g].map(r => {
          const money = DMS.roMoney ? DMS.roMoney(r) : null;
          const active = r.id === sel;
          return (
            <button key={r.id} type="button" data-ro-card={r.id} onClick={() => onPick(r.id)} title={`${r.id} · ${r.customer} · ${roGroupLabel(g)}`}
                    style={{ textAlign: "left", cursor: "pointer", width: "100%", border: "1px solid " + (active ? "var(--jb-blue)" : "var(--jb-border)"), borderLeft: "3px solid " + RO_GROUP_META[g].dot,
                             background: active ? "var(--jb-blue-tint)" : "var(--jb-surface)", borderRadius: 6, padding: "5px 6px", fontFamily: "var(--jb-font)", color: "var(--jb-text)" }}>
              <span style={{ display: "block", fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 12, color: "var(--jb-navy)" }}>{r.id}</span>
              <span style={{ display: "block", fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{String(r.customer || "").split(/[ ,]/)[0]}</span>
              <span data-ro-card-total="1" style={{ display: "block", fontFamily: "var(--jb-mono)", fontSize: 12, color: "var(--jb-text-dim)" }}>{jbm(money ? money.total : r.total)}</span>
            </button>
          );
        }))}
      </div>
    </div>
  );
  return (
    <div data-ro-rail={overlay ? "overlay" : "full"} style={{ width: overlay ? "100%" : 236, flexShrink: 0, borderRight: overlay ? 0 : "1px solid var(--jb-border)", background: "var(--jb-surface)", display: "flex", flexDirection: "column", minHeight: 0, height: "100%" }}>
      <div style={{ padding: "8px 8px 6px", display: "flex", flexDirection: "column", gap: 6, borderBottom: "1px solid var(--jb-border)" }}>
        <div style={{ display: "flex", gap: 6, alignItems: "center" }}>{searchBox("Search RO#, customer, VIN…")}{overlay && <RoBtn small onClick={onHide} style={{ minHeight: 36 }}>✕</RoBtn>}</div>
        {chipsRow(overlay ? null : railChips, true)}
        <div style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 12, color: "var(--jb-text-muted)" }}>
          <span style={{ flex: 1, minWidth: 0 }}>{countersLine}</span>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <RoBtn small onClick={onFullList} title="Close the RO and show the full list" style={{ flex: 1, minHeight: overlay ? 40 : undefined }}>⤢ Full list</RoBtn>
          {!overlay && <RoBtn small data-ro-list-fold="full" onClick={onFold} title="Fold the list to a thin strip (more room for the RO)">⇤</RoBtn>}
        </div>
      </div>
      <div style={{ flex: 1, overflow: "auto", padding: "4px 8px 12px" }}>
        {emptyMsg}
        {RO_GROUPS.map(g => by[g].length ? (
          <div key={g}>
            <div style={{ ...roLbl, fontSize: 12, padding: "8px 2px 4px", color: RO_GROUP_META[g].fg }}>{roGroupLabel(g)}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>{by[g].map(r => <RoRailCard key={r.id} ro={r} active={r.id === sel} onClick={() => onPick(r.id)} tall={overlay} />)}</div>
          </div>
        ) : null)}
      </div>
    </div>
  );
};
const RoRailCard = ({ ro, active, onClick, tall }) => {
  const money = DMS.roMoney ? DMS.roMoney(ro) : null;
  const total = money ? money.total : (ro.total != null ? ro.total : ro.laborSale + ro.partsSale + (ro.tax || 0));
  const owes = roOwesNow(ro);
  const w = roWaitingOn(ro, owes);
  const late = roPromiseLate(ro);
  const g = roGroupOf(ro);
  const veh = String(ro.vehicle || "").replace(/^\d{4}\s+(CHEVROLET|CHEVY|GMC|BUICK|CADILLAC)\s+/i, "");
  return (
    <button type="button" onClick={onClick} data-ro-card={ro.id}
            style={{ textAlign: "left", cursor: "pointer", width: "100%", display: "block",
                     borderTop: "1px solid " + (active ? "var(--jb-blue)" : "var(--jb-border)"), borderRight: "1px solid " + (active ? "var(--jb-blue)" : "var(--jb-border)"),
                     borderBottom: "1px solid " + (active ? "var(--jb-blue)" : "var(--jb-border)"),
                     borderLeft: "3px solid " + (ro.payType === "Warranty" ? "var(--jb-amber)" : ro.payType === "Internal" ? "#8050B0" : RO_GROUP_META[g].dot),
                     background: active ? "var(--jb-blue-tint)" : "var(--jb-surface)", borderRadius: "var(--jb-r)", padding: tall ? "10px 10px" : "6px 9px",
                     boxShadow: active ? "var(--jb-shadow)" : "none", fontFamily: "var(--jb-font)", color: "var(--jb-text)" }}>
      <span style={{ display: "flex", justifyContent: "space-between", gap: 6 }}>
        <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 12.5, color: "var(--jb-navy)" }}>{ro.id}</span>
        <span data-ro-card-total="1" style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 12.5, color: "var(--jb-navy)" }}>{jbm(total)}</span>
      </span>
      <span style={{ display: "block", fontSize: 13, fontWeight: 700, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{ro.customer}</span>
      <span style={{ display: "flex", gap: 5, alignItems: "center", fontSize: 12, color: late ? "#B23A2E" : "var(--jb-text-dim)" }}>
        <span style={{ width: 7, height: 7, borderRadius: 99, background: w.dot, flexShrink: 0 }} />
        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{veh}{veh ? " · " : ""}{late ? "late · " : ""}{w.text}</span>
      </span>
    </button>
  );
};

// ─── Queue card (today's look: R11 style "cards") ─────────────────────────
const RoCard = ({ ro, active, onClick }) => {
  const days = roAgeDays(ro);
  const cfg = roCfgOf();
  const aged = ro.status === "Open" && days >= ((cfg.ro && cfg.ro.workflow.agedDays) || 7);
  const money = DMS.roMoney ? DMS.roMoney(ro) : null;   // RC20: the same total the editor, the board, the invoice and the journal use
  const total = money ? money.total : (ro.total != null ? ro.total : ro.laborSale + ro.partsSale + (ro.tax || 0));
  return (
    <button onClick={onClick} data-ro-card={ro.id}
            style={{ textAlign: "left", cursor: "pointer", width: "100%", display: "block",
                     borderTop: "1px solid " + (active ? "var(--jb-blue)" : "var(--jb-border)"),
                     borderRight: "1px solid " + (active ? "var(--jb-blue)" : "var(--jb-border)"),
                     borderBottom: "1px solid " + (active ? "var(--jb-blue)" : "var(--jb-border)"),
                     background: active ? "var(--jb-blue-tint)" : "var(--jb-surface)",
                     borderLeft: "3px solid " + (aged ? "var(--jb-red)" : ro.payType === "Warranty" ? "var(--jb-amber)" : ro.payType === "Internal" ? "#8050B0" : "var(--jb-blue)"),
                     borderRadius: "var(--jb-r)", padding: "10px 12px", boxShadow: active ? "var(--jb-shadow)" : "var(--jb-shadow-sm)",
                     fontFamily: "var(--jb-font)", transition: "all .1s" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
        <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 13, color: "var(--jb-navy)" }}>{ro.id}</span>
        <JBBadge kind={ro.status === "Closed" ? "Closed" : aged ? "Aged" : ro.payType}>
          {ro.status === "Closed" ? "Closed" : aged ? `${days}d aged` : ro.status}
        </JBBadge>
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, color: "var(--jb-text)", marginTop: 3 }}>{ro.customer}</div>
      <div style={{ fontSize: 12, color: "var(--jb-text-dim)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{ro.vehicle}</div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 6 }}>
        <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>{ro.tech || "unassigned"} · {ro.payType}</span>
        <span data-ro-card-total="1" style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, fontSize: 12.5, color: "var(--jb-navy)" }}>{jbm(total)}</span>
      </div>
    </button>
  );
};

// ─── The 5-step line + the ONE yellow next-step button (SPEC 1.1) ────────
// Every move goes through DMS.svcMoveTo (one stored step at a time, the Advance check, never past the customer's OK).
const RoStepBar = ({ ro, cfg, next, ok, phone, readOnlyRole, onNext, nextRef, busy }) => {
  const g = roGroupOf(ro, cfg);
  const cur = RO_GROUPS.indexOf(g);
  const canMove = !readOnlyRole && ro.status !== "Closed";
  const back = (k) => {
    if (!canMove) return;
    const steps = (DMS.svcSteps ? DMS.svcSteps(cfg && cfg.ro ? { settings: cfg } : undefined) : []).filter(s => s.on && s.group === k);
    const target = steps.length ? steps[0].stage : null;
    if (!target) return;
    if (!window.confirm(`Move ${ro.id} back to "${roGroupLabel(k)}" (${target})?`)) return;
    roSay(DMS.svcMoveTo(ro.id, target));
  };
  const okChip = ok.given
    ? <span data-ro-ok="given" title={ok.by ? "by " + ok.by : ""} style={{ fontSize: 12, fontWeight: 700, color: "#0E7A37", background: "#E6F7EC", border: "1px solid #BFE6C7", borderRadius: 99, padding: "2px 9px", whiteSpace: "nowrap" }}>✓ OK {ok.method === "esign" ? "by e-sign" : ok.method === "phone" ? "by phone" : ok.method ? ok.method : ""} {roTime(ok.at)}</span>
    : ok.needed ? <span data-ro-ok="needed" style={{ fontSize: 12, fontWeight: 700, color: "#8A5A00", background: "#FFF6E2", border: "1px solid #F0DBA8", borderRadius: 99, padding: "2px 9px", whiteSpace: "nowrap" }}>⚠ OK needed</span> : null;
  const btn = next && next.key ? (
    <RoNextButton next={next} onNext={onNext} nextRef={nextRef} busy={busy} phone={false} />
  ) : null;
  if (phone) return (
    <div data-ro-stepline="1" style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 12px", borderBottom: "1px solid var(--jb-border)", background: "var(--jb-surface)" }}>
      <span data-ro-step={g} style={{ display: "inline-flex", gap: 4, alignItems: "center" }}>
        {RO_GROUPS.map((k, i) => <span key={k} style={{ width: i === cur ? 14 : 9, height: 9, borderRadius: 99, background: i < cur ? "#16A34A" : i === cur ? "var(--jb-yellow)" : "#C7CDD4", border: i === cur ? "1px solid #C89A00" : 0 }} />)}
      </span>
      <b style={{ fontSize: 13, color: "var(--jb-navy)", flex: 1, minWidth: 0 }}>Step {cur + 1} of 5 · {roGroupLabel(g)}</b>
      {okChip}
    </div>
  );
  return (
    <div data-ro-stepline="1" style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 14px", borderBottom: "1px solid var(--jb-border)", background: "var(--jb-surface)", flexWrap: "wrap", flexShrink: 0 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 4, flexWrap: "wrap" }}>
        {RO_GROUPS.map((k, i) => {
          const done = i < cur, here = i === cur;
          const body = (
            <>
              <span style={{ width: 22, height: 22, borderRadius: 99, display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 800,
                             background: done ? "#16A34A" : here ? "var(--jb-yellow)" : "#C7CDD4", color: done ? "#fff" : here ? "var(--jb-navy)" : "#fff" }}>{done ? "✓" : i + 1}</span>
              <span style={{ fontSize: 13, fontWeight: here ? 800 : 700, color: done ? "#0E7A37" : here ? "#fff" : "var(--jb-text-muted)" }}>{roGroupLabel(k)}</span>
            </>
          );
          const st = { display: "inline-flex", alignItems: "center", gap: 6, padding: here ? "3px 10px 3px 4px" : "3px 6px 3px 2px", borderRadius: 99, background: here ? "var(--jb-navy)" : "transparent", border: 0, fontFamily: "var(--jb-font)" };
          return (
            <React.Fragment key={k}>
              {done && canMove && k !== "closed"
                ? <button type="button" onClick={() => back(k)} title={`Move back to ${roGroupLabel(k)}…`} style={{ ...st, cursor: "pointer" }}>{body}</button>
                : <span data-ro-step={here ? k : undefined} style={st}>{body}</span>}
              {i < RO_GROUPS.length - 1 && <span style={{ width: 12, height: 2, background: i < cur ? "#16A34A" : "#D6DBE2" }} />}
            </React.Fragment>
          );
        })}
      </div>
      {okChip}
      <div style={{ flex: 1 }} />
      {readOnlyRole
        ? <span data-ro-viewonly-pill="1" title="Your sign-in can look at repair orders; the service advisors make the changes." style={{ fontSize: 12.5, fontWeight: 700, color: "#1456A0", background: "#E5EFFA", border: "1px solid #CBE0F4", borderRadius: 99, padding: "4px 12px" }}>ⓘ View only</span>
        : btn}
    </div>
  );
};
// RC32 fix (r32-aud L1): on a phone the amount ("· $157.13") is never cut off — the label may wrap after its first part, and each part
// stays whole (the button's text is unchanged: "💳 Take payment · $157.13").
const roNextLabelParts = (label, phone) => {
  const s = String(label || ""); const i = s.lastIndexOf(" · ");
  if (!phone || i < 0) return s;
  return <><span style={{ whiteSpace: "nowrap" }}>{s.slice(0, i)}</span> <span data-ro-next-amt="1" style={{ whiteSpace: "nowrap" }}>{s.slice(i + 1)}</span></>;
};
// The yellow button. key "pay" also carries data-ro-take-pay; key "close" carries data-ro-close (one element, never two).
const RoNextButton = ({ next, onNext, nextRef, busy, phone }) => {
  if (!next || !next.key) return null;
  const grey = next.enabled === false;
  const extra = next.key === "pay" ? { "data-ro-take-pay": "1" } : next.key === "close" && next.enabled !== false && !next.closeNote ? { "data-ro-close": "1" } : {};
  const label = next.key === "pay" ? "💳 " + next.label : next.key === "ok" ? "✎ " + next.label : next.label;
  return (
    <span style={{ display: "inline-flex", flexDirection: "column", alignItems: phone ? "stretch" : "flex-end", gap: 2, flex: phone ? 1 : undefined, minWidth: 0 }}>
      <button type="button" ref={nextRef} data-ro-next={next.key} {...extra} disabled={!!busy || (next.key === "close" && grey)} onClick={onNext}
              title={next.hint || ""}
              style={{ border: "1px solid " + (grey ? "#E6D79B" : "#E8B820"), background: grey ? "#FBF1C8" : "var(--jb-yellow)", color: grey ? "#8A7A3A" : "var(--jb-navy)", fontWeight: 800,
                       fontSize: phone ? 15 : 14.5, padding: phone ? "0 10px" : "8px 18px", minHeight: phone ? 48 : 40, borderRadius: 8, cursor: busy ? "wait" : "pointer", fontFamily: "var(--jb-font)",
                       whiteSpace: phone ? "normal" : "nowrap", lineHeight: phone ? 1.2 : undefined, overflow: "hidden", textOverflow: "ellipsis", boxShadow: grey ? "none" : "0 1px 2px rgba(0,0,0,.12)" }}>
        {busy ? "Working…" : roNextLabelParts(label, phone)}
      </button>
      {!phone && next.hint && <span style={{ fontSize: 12, color: "var(--jb-text-muted)", whiteSpace: "nowrap" }}>{next.hint}</span>}
      {!phone && !next.hint && next.key === "pay" && <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>then Close RO &amp; Post</span>}
    </span>
  );
};

// ─── More › Detailed step: the 12 stored steps, Back / Advance one step (both through svcMoveTo) ───
const RoStepDetailModal = ({ ro, readOnlyRole, onClose }) => {
  const steps = DMS.svcSteps ? DMS.svcSteps() : (DMS.RO_STAGES || []).map((s, i) => ({ stage: s, on: true, label: s, index: i }));
  const idx = Math.max(0, steps.findIndex(s => s.stage === (ro.stage || "Write-Up")));
  const closed = ro.status === "Closed";
  const hist = ro.stageHist || {};
  const prevUsed = (() => { for (let i = idx - 1; i >= 0; i--) if (steps[i].on) return steps[i].stage; return null; })();
  const nextAny = idx < steps.length - 1 ? steps[idx + 1].stage : null;
  return (
    <K2BModal title={`Detailed step — ${ro.id}`} onClose={onClose} width={560}
      buttons={<>
        {!closed && !readOnlyRole && prevUsed && <RoBtn data-ro-detail-back="1" onClick={() => { const r = roSay(DMS.svcMoveTo(ro.id, prevUsed)); if (r.ok) onClose(); }}>← Back one step</RoBtn>}
        {!closed && !readOnlyRole && nextAny && <RoBtn data-ro-detail-advance="1" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => { const r = roSay(DMS.svcMoveTo(ro.id, nextAny)); if (r.ok) onClose(); }}>Advance one step →</RoBtn>}
        <K2BButton onClick={onClose}>Close</K2BButton>
      </>}>
      <div style={{ fontSize: 13, marginBottom: 8 }}>Now: <b style={{ color: "var(--jb-navy)" }}>{ro.stage || "Write-Up"}</b>{closed ? " · closed" : ""}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
        {steps.map((s, i) => {
          const h = hist[s.stage];
          const when = h && typeof h === "object" ? (h.skipped ? "skipped (turned off)" : "") : h ? new Date(h).toLocaleString() : "";
          return (
            <div key={s.stage} style={{ display: "flex", gap: 8, alignItems: "center", padding: "4px 8px", borderRadius: 6, background: i === idx ? "var(--jb-blue-tint)" : "transparent", opacity: s.on ? 1 : 0.5 }}>
              <span style={{ width: 20, textAlign: "right", fontFamily: "var(--jb-mono)", fontSize: 12, color: "var(--jb-text-muted)" }}>{i + 1}</span>
              <span style={{ flex: 1, fontSize: 13, fontWeight: i === idx ? 800 : 600 }}>{s.label || s.stage}{s.label && s.label !== s.stage ? <span style={{ color: "var(--jb-text-muted)", fontWeight: 500 }}> ({s.stage})</span> : null}{!s.on ? " · turned off" : ""}</span>
              <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>{RO_GROUP_META[s.group] ? roGroupLabel(s.group) : ""}</span>
              <span style={{ fontSize: 12, color: "var(--jb-text-dim)", minWidth: 140, textAlign: "right" }}>{when}</span>
            </div>
          );
        })}
      </div>
      <div style={{ fontSize: 12, color: "var(--jb-text-muted)", marginTop: 10 }}>An RO moves one stored step at a time and never passes "Awaiting Approval" without the customer's OK. Steps turned off in Service Dept › Setup are passed over and marked "skipped".</div>
    </K2BModal>
  );
};
// "Send to shop" with jobs that have no technician yet: ask once, then move
const RoPickTechModal = ({ ro, techs, jobIds, cfg, target, onClose }) => {
  const [techId, setTechId] = React.useState(roNewJobTech(ro, cfg) || "");
  const go = () => {
    if (techId) jobIds.forEach(id => DMS.updateROJob(ro.id, id, { techId }));
    const r = roSay(DMS.svcMoveTo(ro.id, target, techId ? { techId } : undefined));   // RC33 (part C, F2): + the RO's own technician when it has none
    if (r.ok || r.noop) onClose();
  };
  return (
    <K2BModal title={`Send ${ro.id} to the shop`} onClose={onClose} width={460}
      buttons={<><K2BButton onClick={onClose}>Cancel</K2BButton><RoBtn data-ro-picktech-ok="1" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={go}>Send to shop ▸</RoBtn></>}>
      <div style={{ fontSize: 13, marginBottom: 8 }}>{jobIds.length === 1 ? "One job has" : jobIds.length + " jobs have"} no technician yet. Who does {jobIds.length === 1 ? "it" : "them"}?</div>
      <select data-ro-picktech="1" value={techId} onChange={(e) => setTechId(e.target.value)} style={{ ...roInp, minHeight: 36 }}>
        <option value="">— send without a technician —</option>{techs.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
      </select>
    </K2BModal>
  );
};
// More › Authorization text (the RO's own wording; X2 decides whether an advisor may change it on one RO)
const RoAuthTextModal = ({ ro, act, cfg, readOnly, onClose }) => (
  <K2BModal title={`Authorization text — ${ro.id}`} onClose={onClose} width={640}>
    <RoDisclosureCard ro={ro} act={act} cfg={cfg} readOnly={readOnly} open={true} onToggle={() => {}} />
  </K2BModal>
);

// ─── RO editor (header · step line · tabs · money line; one tree per layout) ──
const RoEditor = ({ ro, techs, parts, act, go, layout, cfg, view, dense, myView, saveMyView, closing, listHidden, listCount, onShowList, techPhone, onBackToJobs, onCloseRO, onFlag, onChangeCustomer }) => {
  const closed = ro.status === "Closed";
  const isVoid = ro.status === "Void";   // RC36 (rov36): a VOID / REVERSED RO is history — read-only for every role
  const canSvc = !!(DMS.can && DMS.can("service"));
  const readOnlyRole = !canSvc;
  const readOnly = closed || isVoid || readOnlyRole;
  const phone = layout === "phone";
  const roleKey = roRoleKey();
  const sOpt = cfg && cfg.ro ? { settings: cfg } : {};
  const g = roGroupOf(ro, cfg);
  const agedDays = (cfg.ro && cfg.ro.workflow.agedDays) || 7;
  const days = roAgeDays(ro);
  const aged = !closed && days >= agedDays;
  const tot = roTotalsFor(ro);
  const money = DMS.roMoney ? DMS.roMoney(ro) : null;   // RC20 (fops): ONE calculation — the editor, the board, the invoice and the journal agree
  const owes = roOwesNow(ro);
  const canClose = !isVoid && !!(DMS.fopsCanCloseRO && DMS.fopsCanCloseRO());   // RC36 (rov36): a VOID RO is never closed
  const splitPay = Array.isArray(ro.payments);
  const jobs = ro.ops || [];
  const ok = isVoid ? Object.assign({}, roOkOf(ro), { needed: false }) : roOkOf(ro);   // RC36 (rov36): a VOID RO asks for nothing
  const next = isVoid ? { key: null } : DMS.svcNextStep ? DMS.svcNextStep(ro, { ...sOpt, owes, readOnly: readOnlyRole, canClose }) : { key: null };
  const closeSpot = isVoid ? null : DMS.svcCloseSpot ? DMS.svcCloseSpot(ro, layout, { ...sOpt, owes, readOnly: readOnlyRole, canClose }) : (!readOnly && canClose ? (phone ? "phonebar" : "footer") : null);
  const checklist = DMS.svcCloseChecklist ? DMS.svcCloseChecklist(ro, sOpt) : { mode: "off", items: [], left: 0, blocking: false };
  const headerBtns = (cfg.ro && cfg.ro.layout.headerButtons) || [];
  const isTechRole = roleKey === "tech";
  const mpiAsTab = (view.tabs || []).includes("mpi");
  const mpiItems = (cfg.ro && cfg.ro.lists.inspection.items) || RO_MPI_ITEMS;
  const mpiRed = mpiItems.filter(i => (ro.mpi || {})[i] === "r").length;

  const defTab = g === "ready" || g === "closed" ? (isTechRole ? "jobs" : "pay") : "jobs";
  const [tab, setTab] = React.useState(defTab);
  const prevG = React.useRef(g);
  React.useEffect(() => { if (prevG.current !== g) { prevG.current = g; if (g === "ready" && !isTechRole) setTab("pay"); } }, [g]);
  const [esign, setEsign] = React.useState(false);
  const [moreOpen, setMoreOpen] = React.useState(false);
  const [tabMore, setTabMore] = React.useState(false);
  const [detailsOpen, setDetailsOpen] = React.useState(false);
  const [sub, setSub] = React.useState(null);   // { t: "step" | "auth" | "vin" | "tech" }
  const [busy, setBusy] = React.useState(false);
  const [okFlash, setOkFlash] = React.useState(0);
  const [stdSignal, setStdSignal] = React.useState(0);
  const [paySignal, setPaySignal] = React.useState(0);
  const approvalRef = React.useRef(null);
  const nextRef = React.useRef(null);
  const printInvoice = () => window.k2bPrintRO && window.k2bPrintRO(DMS.repairOrders().find(r => r.id === ro.id) || ro, ro.payType === "Warranty" && !splitPay ? "warranty" : "invoice");

  // the yellow button
  const onNext = async () => {
    if (!next || !next.key || busy) return;
    if (next.key === "invoice") return printInvoice();
    if (next.key === "jobs") { setTab("jobs"); setStdSignal(n => n + 1); return; }
    if (next.key === "ok") { setTab("jobs"); setOkFlash(n => n + 1); setTimeout(() => { try { approvalRef.current && approvalRef.current.scrollIntoView({ block: "start", behavior: "smooth" }); } catch (e) {} }, 60); return; }
    if (next.key === "shop" || next.key === "start") {   // jobs going to the shop without a technician: ask once (SPEC 1.1), then move
      const need = (next.needTech && next.needTech.length ? next.needTech : roLive(ro).filter(j => !j.techId).map(j => j.id));
      const target = next.target || (next.key === "start" ? "In Progress" : null);
      if (need.length && techs.length) { setSub({ t: "tech", jobIds: need, target }); return; }
      roSay(DMS.svcMoveTo(ro.id, target)); return;
    }
    if (next.key === "ready") {
      if (next.enabled === false) { const left = (next.left || []).map(id => { const j = jobs.find(x => String(x.id) === String(id)); const n = jobs.indexOf(j) + 1; return j ? `Job ${n} ${j.desc || j.op}` : ""; }).filter(Boolean); window.k2bToast && window.k2bToast(`Not ready yet (${next.hint}). Still to finish: ${left.join(" · ")}`, "warn", 4200); return; }
      roSay(DMS.svcMoveTo(ro.id, next.target)); return;
    }
    if (next.key === "pay") { setTab("pay"); setPaySignal(n => n + 1); return; }
    if (next.key === "close") {
      if (next.enabled === false) { window.k2bToast && window.k2bToast(next.hint || "Closing: service advisor / office", "warn", 3000); return; }
      if (checklist.blocking) { window.k2bToast && window.k2bToast("Finish the \"Before you close\" list first (the store set it to must be done).", "warn", 3600); setTab("pay"); return; }
      setBusy(true); try { await onCloseRO(); } finally { setBusy(false); }
    }
  };
  const doCloseFooter = async () => {
    if (checklist.blocking) { window.k2bToast && window.k2bToast("Finish the \"Before you close\" list first (the store set it to must be done).", "warn", 3600); setTab("pay"); return; }
    const r = await onCloseRO(); if (r && !r.ok && splitPay && r.code === "payments") setTab("pay");
  };

  // tabs (R10 order; Accounting a tab for the office, under ⋯ More for everyone else; a technician's Payments under More too)
  const order = (view.tabs && view.tabs.length ? view.tabs : ["jobs", "cust", "notes", "mpi", "pay"]).filter(k => ["jobs", "cust", "notes", "mpi", "pay"].includes(k));
  const label = {
    jobs: `Jobs (${jobs.length})`,
    cust: phone ? "Customer" : "Customer & vehicle",
    notes: "Notes",
    mpi: phone ? "Inspect" : "Inspection",
    pay: phone ? "Pay" : `Payments${owes > 0.009 ? " · owes " + roM$(owes) : (splitPay && !money && Math.abs(tot.balance) > 0.009 ? " · " + roM$(tot.balance) + " due" : "")}`,
    acct: "Accounting",
  };
  const rowTabs = order.filter(k => !(isTechRole && k === "pay") && !(phone && false));
  const moreTabs = [];
  if (isTechRole && order.includes("pay")) moreTabs.push("pay");
  if (view.acct === "tab" && !phone) rowTabs.push("acct"); else moreTabs.push("acct");

  // header pieces
  const hdrBtn = (k) => headerBtns.includes(k);
  const custBtn = !readOnly ? <RoBtn small data-ro-find-cust="1" onClick={onChangeCustomer}>🔍 Customer…</RoBtn> : null;
  const MORE = [
    !readOnly && !hdrBtn("cust") && { k: "cust", label: "Change customer…", run: onChangeCustomer, hook: true },
    !hdrBtn("carfax") && roCarfaxOn() && { k: "carfax", label: "Carfax report", run: () => roCarfaxOpen(ro.vin, ro.vehicle), off: !ro.vin },
    !hdrBtn("vin") && window.ImpVehicleHistory && String(ro.vin || "").trim().length >= 11 && { k: "vin", label: "History by VIN", run: () => setSub({ t: "vin" }) },
    !readOnly && !hdrBtn("flag") && { k: "flag", label: "Flag hours…", run: onFlag },
    { k: "step", label: "Detailed step…", run: () => setSub({ t: "step" }) },
    { k: "auth", label: "Authorization text…", run: () => setSub({ t: "auth" }) },
    { k: "acct", label: "Accounting", run: () => setTab("acct") },
    moreTabs.includes("pay") && { k: "pay", label: "Payments", run: () => setTab("pay") },
    !isVoid && !closed && window.RoVoidDialog && DMS.roCanVoid && DMS.roCanVoid() && { k: "void", label: "Void RO…", run: () => setSub({ t: "void" }) },   // RC36 (rov36): the Service Manager + the office
    !isVoid && closed && window.RoVoidDialog && DMS.roCanReverse && DMS.roCanReverse() && { k: "reverse", label: "Reverse closed RO…", run: () => setSub({ t: "reverse" }) },   // RC36 (rov36): the office, a fresh code
  ].filter(Boolean);
  const moreMenu = (
    <span style={{ position: "relative", display: "inline-flex" }}>
      <RoBtn small data-ro-more="1" onClick={() => setMoreOpen(o => !o)} aria-expanded={moreOpen} style={phone ? { minHeight: 44, minWidth: 44, background: "transparent", color: "#fff", border: "1px solid rgba(255,255,255,.35)" } : undefined}>⋯{phone ? "" : " More"}</RoBtn>
      {moreOpen && (
        <>
          <span onClick={() => setMoreOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 40 }} />
          <span role="menu" style={{ position: "absolute", right: 0, top: "calc(100% + 4px)", zIndex: 41, minWidth: 220, background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: 8, boxShadow: "var(--jb-shadow)", padding: 4, display: "flex", flexDirection: "column" }}>
            {MORE.map(m => (
              <button key={m.k} type="button" role="menuitem" data-ro-more-item={m.k} {...(m.hook ? { "data-ro-find-cust": "1" } : {})} disabled={!!m.off}
                      onClick={() => { setMoreOpen(false); m.run(); }}
                      style={{ textAlign: "left", border: 0, background: "transparent", padding: "9px 12px", minHeight: phone ? 44 : 34, fontSize: 13.5, cursor: m.off ? "default" : "pointer", color: m.off ? "var(--jb-text-muted)" : "var(--jb-text)", borderRadius: 6, fontFamily: "var(--jb-font)" }}>{m.label}</button>
            ))}
          </span>
        </>
      )}
    </span>
  );
  const vehLine = [ro.vehicle, ro.vin ? "VIN " + ro.vin : "", ro.miles ? Number(ro.miles).toLocaleString() + " mi" : ""].filter(Boolean).join(" · ");
  const promTxt = roPromiseText(ro), late = roPromiseLate(ro);
  const chips = (
    <>
      {promTxt && <span data-ro-promise="1" style={{ fontSize: 12, border: "1px solid " + (late ? "#F2C9CE" : "var(--jb-border)"), background: late ? "#FDF1F2" : "var(--jb-surface)", color: late ? "#B23A2E" : "var(--jb-text-dim)", borderRadius: 99, padding: "2px 9px", whiteSpace: "nowrap" }}>⏰ Promised <b>{promTxt}</b>{late ? " · late" : ""}</span>}
      {ro.transport && <span data-ro-transport="1" style={{ fontSize: 12, border: "1px solid var(--jb-border)", borderRadius: 99, padding: "2px 9px", color: "var(--jb-text-dim)", whiteSpace: "nowrap" }}>🚗 {ro.transport}</span>}
      {!ro.custNum && !ro.internalStock && !closed && <span style={{ fontSize: 12, border: "1px solid #F0DBA8", background: "#FFF8E9", color: "#8A5A00", borderRadius: 99, padding: "2px 9px", whiteSpace: "nowrap" }}>not linked to a customer file</span>}
    </>
  );
  const groupBadge = isVoid ? <span data-ro-void-badge="1" style={{ fontSize: 12, fontWeight: 800, color: "#fff", background: "#B23A2E", borderRadius: 99, padding: "2px 10px", whiteSpace: "nowrap" }}>{ro.roVoid && ro.roVoid.kind === "reversed" ? "REVERSED" : "VOID"}</span> : (
    <span style={{ display: "inline-flex", gap: 5, alignItems: "center", fontSize: 12, fontWeight: 800, color: RO_GROUP_META[g].fg, background: RO_GROUP_META[g].bg, borderRadius: 99, padding: "2px 10px", whiteSpace: "nowrap" }}>
      <span style={{ width: 7, height: 7, borderRadius: 99, background: RO_GROUP_META[g].dot }} />{roGroupLabel(g)}
    </span>
  );
  const agedBadge = aged ? <span style={{ fontSize: 12, fontWeight: 800, color: "#B23A2E", background: "#FDF1F2", borderRadius: 99, padding: "2px 9px", whiteSpace: "nowrap" }}>{days}d aged</span> : null;
  const svcMenu = !closed && !isVoid && window.SvcMenuButton ? <window.SvcMenuButton ro={ro} /> : null;   // RC28 (svc): the service menu presentation · RC32: "· n due"
  const printBtn = <RoBtn small onClick={() => window.k2bPrintSelectRO && window.k2bPrintSelectRO(ro)} title="Print RO documents">🖨 Print…</RoBtn>;

  // ── tab bodies ──
  const body = (
    <>
      {isVoid && window.RoVoidBanner && <window.RoVoidBanner ro={ro} />}
      {tab === "cust" && (
        <>
          <RoCustVehCard ro={ro} readOnly={readOnly} act={act} onChangeCustomer={onChangeCustomer} techs={techs} cfg={cfg} phone={phone} />
          <RoDisclosureCard ro={ro} act={act} cfg={cfg} readOnly={readOnly} />
          {!mpiAsTab && <RoMpiCard ro={ro} act={act} cfg={cfg} readOnly={readOnly} />}
        </>
      )}
      {tab === "jobs" && <RoJobsTab ro={ro} techs={techs} parts={parts} act={act} go={go} readOnly={readOnly} cfg={cfg} phone={phone} dense={dense} group={g} ok={ok} next={next}
                                    aged={aged} days={days} approvalRef={approvalRef} okFlash={okFlash} stdSignal={stdSignal} onEsign={() => setEsign(true)} myView={myView} saveMyView={saveMyView} />}
      {tab === "notes" && <RoNotesTab ro={ro} readOnly={readOnly} cfg={cfg} phone={phone} />}
      {tab === "mpi" && <RoMpiCard ro={ro} act={act} cfg={cfg} readOnly={readOnly} openAlways={true} phone={phone} />}
      {tab === "pay" && <RoPaymentsTab ro={ro} tot={tot} act={act} cfg={cfg} view={view} checklist={checklist} owes={owes} paySignal={paySignal} phone={phone} />}
      {tab === "acct" && <RoAcctTab ro={ro} go={go} />}
      {esign && window.RoEsignModal && <RoEsignModal ro={ro} act={act} onClose={() => setEsign(false)} />}
    </>
  );
  const subModals = (
    <>
      {sub && sub.t === "step" && <RoStepDetailModal ro={ro} readOnlyRole={readOnlyRole} onClose={() => setSub(null)} />}
      {sub && sub.t === "auth" && <RoAuthTextModal ro={ro} act={act} cfg={cfg} readOnly={readOnly} onClose={() => setSub(null)} />}
      {sub && sub.t === "vin" && window.ImpVehicleHistory && <window.ImpVehicleHistory vin={String(ro.vin || "").trim()} onClose={() => setSub(null)} />}
      {sub && sub.t === "tech" && <RoPickTechModal ro={ro} techs={techs} jobIds={sub.jobIds} cfg={cfg} target={sub.target} onClose={() => setSub(null)} />}
      {sub && (sub.t === "void" || sub.t === "reverse") && window.RoVoidDialog && <window.RoVoidDialog ro={ro} mode={sub.t} onClose={() => setSub(null)} />}
    </>
  );

  // ── money line (R13 short / full; "Details ▾" keeps the rest in the page, folded) ──
  const short = !(cfg.ro && cfg.ro.layout.moneyLine === "full");
  const fig = (lab, val, hook, color) => <span>{lab} <b {...(hook ? { [hook]: "1" } : {})} style={{ fontFamily: "var(--jb-mono)", color: color || "var(--jb-text)" }}>{val}</b></span>;
  const payers = money ? Object.keys(money.byPayer || {}).filter(k => k !== "Customer") : [];
  const detailFigs = (
    <>
      {fig("Labor", roM$(money ? money.labor : ro.laborSale))}
      {fig("Parts", roM$(money ? money.parts : ro.partsSale))}
      {(money ? money.sublet : +ro.subletSale) ? fig("Sublet", roM$(money ? money.sublet : ro.subletSale)) : null}
      {money && money.fees ? fig("Fees", roM$(money.fees)) : null}
      {payers.map(k => <span key={k}>{k} <b style={{ fontFamily: "var(--jb-mono)", color: "var(--jb-text)" }}>{roM$(money.byPayer[k])}</b></span>)}
      {tot.fees ? <span>Card fees <b style={{ fontFamily: "var(--jb-mono)" }}>{roM$(tot.fees)}</b></span> : null}
    </>
  );
  const paidNow = closed && money ? (money.paid || 0) : (tot.allocated || 0);
  const owesFig = <span title="Customer owes">{phone ? "Owes" : "Customer owes"} <b data-ro-balance="1" style={{ fontFamily: "var(--jb-mono)", color: owes > 0.009 ? "#B23A2E" : "#0E7A37" }}>{roM$(owes)}</b></span>;
  const moneyFigs = (
    <div data-ro-moneyline="1" style={{ display: "flex", gap: phone ? 8 : 14, alignItems: phone ? "center" : "baseline", flexWrap: "wrap", fontSize: 12.5, color: "var(--jb-text-dim)", minWidth: 0 }}>
      {!short && detailFigs}
      <span style={phone && short ? { display: detailsOpen ? undefined : "none" } : undefined}>Tax <b data-ro-tax="1" style={{ fontFamily: "var(--jb-mono)", color: "var(--jb-text)" }}>{roM$(money ? money.tax : ro.tax)}</b></span>
      <span style={{ fontSize: 13 }}>Total <b data-ro-total="1" style={{ fontFamily: "var(--jb-mono)", color: "var(--jb-navy)", fontSize: 15 }}>{roM$(money ? money.total : tot.total)}</b></span>
      {!phone && <span>Paid <b style={{ fontFamily: "var(--jb-mono)", color: "#0E7A37" }}>{roM$(paidNow)}</b></span>}
      {owesFig}
      {short && <button type="button" data-ro-details="1" onClick={() => setDetailsOpen(o => !o)} title="Labor · parts · sublet · fees · who pays what" style={{ border: "1px solid #CBE0F4", background: "#F3F8FD", color: "var(--jb-blue)", fontWeight: 700, cursor: "pointer", fontSize: 12.5, padding: phone ? "8px 8px" : "4px 10px", minHeight: phone ? 40 : 28, borderRadius: 6, fontFamily: "var(--jb-font)", marginLeft: phone ? "auto" : undefined }}>Details {detailsOpen ? "▴" : "▾"}</button>}
      {short && <span data-ro-details-body="1" style={{ display: detailsOpen ? "contents" : "none" }}>{detailFigs}{phone && <span>Paid <b style={{ fontFamily: "var(--jb-mono)", color: "#0E7A37" }}>{roM$(paidNow)}</b></span>}</span>}
    </div>
  );
  const closeBtn = closeSpot === "footer" || closeSpot === "phonebar"
    ? <RoBtn small={!phone} data-ro-close="1" disabled={!!closing || checklist.blocking} title={checklist.blocking ? "Finish the Before you close list first" : ""} onClick={doCloseFooter}
             style={{ fontWeight: 800, background: phone ? "var(--jb-surface)" : undefined, minHeight: phone ? 48 : undefined, padding: phone ? "0 10px" : undefined }}>{closing ? "Closing…" : phone ? "Close RO" : <>Close RO &amp; Post →</>}</RoBtn>
    : null;
  const closeNote = !closed && !isVoid && !readOnlyRole && !canClose
    ? <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }} title="Closing posts the RO to the books — a service advisor, the service manager or the office closes it.">Closing: service advisor / office</span> : null;
  const takePay = !phone && !closed && !isVoid && !readOnlyRole && next.key !== "pay"
    ? <RoBtn small data-ro-take-pay="1" onClick={() => { setTab("pay"); setPaySignal(n => n + 1); }}>💳 Payment</RoBtn> : null;

  // ─── PHONE (RO box < 600): one column, pinned bottom bar ───
  if (phone) {
    const pbBtn = { minHeight: 48, minWidth: 48, borderRadius: 8, fontSize: 15, fontWeight: 700 };
    return (
      <div data-ro-editor={ro.id} data-ro-layout="phone" style={{ display: "flex", flexDirection: "column", minHeight: 0, height: "100%", fontFamily: "var(--jb-font)", background: "var(--jb-bg)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 8px", background: "var(--jb-navy)", color: "#fff", flexShrink: 0 }}>
          {techPhone
            ? <RoBtn small onClick={onBackToJobs} style={{ minHeight: 44, minWidth: 44, background: "transparent", color: "#fff", border: "1px solid rgba(255,255,255,.35)" }}>‹ My jobs</RoBtn>
            : <RoBtn small data-ro-queue-toggle="1" onClick={onShowList} title="The RO list" style={{ minHeight: 44, minWidth: 44, background: "transparent", color: "#fff", border: "1px solid rgba(255,255,255,.35)" }}>☰ <span style={{ fontSize: 12 }}>{listCount}</span></RoBtn>}
          <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 17 }}>{ro.id}</span>
          {groupBadge}
          <span style={{ flex: 1 }} />
          {techPhone && <span data-tech-viewonly="1" title="View only — the service advisors make the changes" style={{ fontSize: 12, fontWeight: 700, background: "rgba(255,255,255,.16)", borderRadius: 99, padding: "3px 9px" }}>👁 View only</span>}
          {moreMenu}
        </div>
        <div data-ro-body="1" style={{ flex: 1, minHeight: 0, overflowY: "auto", overflowX: "hidden" }}>
          <div style={{ padding: "10px 12px", background: "var(--jb-surface)", borderBottom: "1px solid var(--jb-border)" }}>
            <div style={{ fontSize: 16, fontWeight: 800, overflowWrap: "anywhere" }}>{ro.customer || "— no customer —"}{ro.custNum ? <span style={{ fontFamily: "var(--jb-mono)", fontSize: 12.5, color: "var(--jb-text-muted)", fontWeight: 600 }}> #{ro.custNum}</span> : null} {agedBadge}</div>
            <div style={{ fontSize: 13, color: "var(--jb-text-dim)", overflowWrap: "anywhere", marginTop: 2 }}>{vehLine}</div>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 6, alignItems: "center" }}>
              {chips}
              {ro.cust && ro.cust.phone ? <a href={"tel:" + String(ro.cust.phone).replace(/[^0-9+]/g, "")} style={{ fontSize: 13, border: "1px solid var(--jb-border)", borderRadius: 99, padding: "0 12px", minHeight: 36, display: "inline-flex", alignItems: "center", color: "var(--jb-text-dim)", textDecoration: "none" }}>📞 {ro.cust.phone}</a> : null}
            </div>
            <div className="ro-phone-btns" style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 8 }}>{printBtn}{svcMenu}{hdrBtn("cust") && custBtn}{hdrBtn("carfax") && <CarfaxButton small vin={ro.vin} ctx={ro.vehicle} />}{hdrBtn("vin") && ro.vin && window.ImpVinHistoryButton ? <window.ImpVinHistoryButton vin={ro.vin} /> : null}{hdrBtn("flag") && !readOnly && <RoBtn small onClick={onFlag}>⏱ Flag hours</RoBtn>}</div>
          </div>
          <RoStepBar ro={ro} cfg={cfg} next={next} ok={ok} phone={true} readOnlyRole={readOnlyRole} />
          <div role="tablist" style={{ display: "grid", gridTemplateColumns: `repeat(${rowTabs.length}, minmax(0, 1fr))`, background: "var(--jb-surface)", borderBottom: "1px solid var(--jb-border)", position: "sticky", top: 0, zIndex: 3 }}>
            {rowTabs.map(k => (
              <button key={k} role="tab" data-ro-tab={k} aria-selected={tab === k} onClick={() => setTab(k)}
                      style={{ border: 0, borderBottom: "3px solid " + (tab === k ? "var(--jb-yellow)" : "transparent"), background: "transparent", padding: "0 2px", minHeight: 46, fontSize: 13,
                               fontWeight: tab === k ? 800 : 600, color: tab === k ? "var(--jb-navy)" : "var(--jb-text-dim)", cursor: "pointer", fontFamily: "var(--jb-font)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                {label[k]}{k === "mpi" && mpiRed ? <span style={{ marginLeft: 3, color: "#B23A2E", fontWeight: 800 }}>{mpiRed}</span> : null}
              </button>
            ))}
          </div>
          <div style={{ padding: "10px 10px 16px", display: "grid", gridTemplateColumns: "minmax(0, 1fr)", gap: 10 }}>
            {(tab === "acct" || (isTechRole && tab === "pay")) && <div style={{ display: "flex", gap: 6 }}><RoBtn small onClick={() => setTab("jobs")}>‹ Back to the RO</RoBtn></div>}
            {body}
          </div>
        </div>
        <div style={{ flexShrink: 0, borderTop: "1px solid var(--jb-border)", background: "var(--jb-surface)", padding: "2px 12px" }}>{moneyFigs}</div>
        <div data-ro-phonebar="1" style={{ flexShrink: 0, display: "flex", gap: 8, padding: "8px 10px calc(8px + env(safe-area-inset-bottom, 0px))", background: "var(--jb-surface)", borderTop: "1px solid var(--jb-border)", boxShadow: "0 -2px 8px rgba(0,0,0,0.06)" }}>
          <RoBtn data-ro-print-invoice="1" onClick={printInvoice} title="Print the invoice" style={pbBtn}>🖨</RoBtn>
          {next && next.key && next.key !== "invoice" ? <RoNextButton next={next} onNext={onNext} nextRef={nextRef} busy={busy || !!closing} phone={true} />
            : <span style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13, color: "var(--jb-text-muted)" }}>{closed ? "Closed · posted" : readOnlyRole ? "View only" : ""}</span>}
          {closeBtn}
        </div>
        {subModals}
      </div>
    );
  }

  // ─── DESK / NARROW ───
  return (
    <div data-ro-editor={ro.id} data-ro-layout={layout} style={{ display: "flex", flexDirection: "column", minHeight: 0, height: "100%", fontFamily: "var(--jb-font)" }}>
      {/* Header: line 1 RO · step · customer · buttons; line 2 vehicle · VIN · miles (never cut off) + promised / transport */}
      <div style={{ padding: dense ? "6px 14px 5px" : "9px 16px 7px", borderBottom: "1px solid var(--jb-border)", background: "var(--jb-surface)", flexShrink: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          {listHidden && <RoBtn small data-ro-queue-toggle="1" onClick={onShowList} style={{ minHeight: 34 }}>☰ RO list ({listCount})</RoBtn>}
          <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 19, color: "var(--jb-navy)" }}>{ro.id}</span>
          {groupBadge}{agedBadge}
          <span style={{ fontSize: 15, fontWeight: 800, color: "var(--jb-text)", minWidth: 0 }}>{ro.customer || "— no customer —"}{ro.custNum ? <span style={{ fontFamily: "var(--jb-mono)", fontSize: 12, color: "var(--jb-text-muted)", fontWeight: 600 }}> #{ro.custNum}</span> : null}</span>
          <span style={{ flex: 1 }} />
          <span style={{ display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }}>
            {hdrBtn("cust") && custBtn}
            {printBtn}
            {hdrBtn("carfax") && <CarfaxButton small vin={ro.vin} ctx={ro.vehicle} />}
            {hdrBtn("vin") && ro.vin && window.ImpVinHistoryButton ? <window.ImpVinHistoryButton vin={ro.vin} /> : null}{/* RC26 (inv): the vehicle's whole history by VIN */}
            {hdrBtn("flag") && !readOnly && <RoBtn small onClick={onFlag}>⏱ Flag hours</RoBtn>}
            {svcMenu}
            {moreMenu}
          </span>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", marginTop: 3 }}>
          <span style={{ fontSize: 13, color: "var(--jb-text-dim)", overflowWrap: "anywhere" }}>{vehLine}</span>
          <span style={{ flex: 1 }} />
          {chips}
        </div>
      </div>
      <RoStepBar ro={ro} cfg={cfg} next={next} ok={ok} phone={false} readOnlyRole={readOnlyRole} onNext={onNext} nextRef={nextRef} busy={busy || !!closing} />

      {/* Tabs */}
      <div role="tablist" style={{ display: "flex", gap: 2, padding: "6px 12px 0", borderBottom: "1px solid var(--jb-border)", background: "var(--jb-surface-2)", flexShrink: 0, flexWrap: "wrap", position: "relative" }}>
        {rowTabs.map(k => (
          <button key={k} role="tab" data-ro-tab={k} aria-selected={tab === k} onClick={() => setTab(k)}
                  style={{ border: "1px solid " + (tab === k ? "var(--jb-border)" : "transparent"), borderBottom: tab === k ? "1px solid var(--jb-surface)" : "1px solid transparent",
                           marginBottom: -1, background: tab === k ? "var(--jb-surface)" : "transparent", borderRadius: "6px 6px 0 0", padding: "7px 13px", minHeight: 34,
                           fontSize: 13, fontWeight: tab === k ? 800 : 600, color: tab === k ? "var(--jb-navy)" : "var(--jb-text-dim)", cursor: "pointer", whiteSpace: "nowrap", fontFamily: "var(--jb-font)" }}>
            {label[k]}{k === "mpi" && mpiRed ? <span style={{ marginLeft: 6, fontSize: 12, fontWeight: 800, color: "#B23A2E", background: "#FDF1F2", borderRadius: 99, padding: "0 6px" }}>{mpiRed}</span> : null}
          </button>
        ))}
        {moreTabs.length > 0 && (
          <span style={{ position: "relative", display: "inline-flex" }}>
            <button type="button" role="tab" data-ro-tab="more" aria-selected={moreTabs.includes(tab)} onClick={() => setTabMore(o => !o)}
                    style={{ border: "1px solid " + (moreTabs.includes(tab) ? "var(--jb-border)" : "transparent"), borderBottom: moreTabs.includes(tab) ? "1px solid var(--jb-surface)" : "1px solid transparent", marginBottom: -1,
                             background: moreTabs.includes(tab) ? "var(--jb-surface)" : "transparent", borderRadius: "6px 6px 0 0", padding: "7px 13px", minHeight: 34, fontSize: 13, fontWeight: moreTabs.includes(tab) ? 800 : 600,
                             color: moreTabs.includes(tab) ? "var(--jb-navy)" : "var(--jb-text-dim)", cursor: "pointer", whiteSpace: "nowrap", fontFamily: "var(--jb-font)" }}>
              ⋯ More{moreTabs.includes(tab) ? " · " + label[tab].split(" · ")[0] : ""}
            </button>
            <span role="menu" style={{ display: tabMore ? "flex" : "none", position: "absolute", left: 0, top: "100%", zIndex: 30, minWidth: 180, background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: 8, boxShadow: "var(--jb-shadow)", padding: 4, flexDirection: "column" }}>
              {moreTabs.map(k => <button key={k} type="button" role="menuitem" data-ro-tab={k} onClick={() => { setTab(k); setTabMore(false); }}
                                          style={{ textAlign: "left", border: 0, background: tab === k ? "var(--jb-blue-tint)" : "transparent", padding: "8px 12px", minHeight: 34, fontSize: 13.5, cursor: "pointer", borderRadius: 6, fontFamily: "var(--jb-font)", color: "var(--jb-text)" }}>{label[k]}</button>)}
            </span>
          </span>
        )}
      </div>

      {/* Scrolling body */}
      <div data-ro-body="1" style={{ flex: 1, minHeight: 0, overflow: "auto", padding: dense ? "8px 12px 14px" : "12px 16px 18px", display: "grid", gridTemplateColumns: "minmax(0, 1fr)", gridAutoRows: "max-content", alignContent: "start", gap: dense ? 8 : 12 }}>
        {body}
      </div>

      {/* Money line + the footer buttons */}
      <div data-ro-footer="1" style={{ flexShrink: 0, borderTop: "1px solid var(--jb-border)", background: "var(--jb-surface)", padding: "7px 12px",
                                       display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", boxShadow: "0 -2px 8px rgba(0,0,0,0.05)" }}>
        {moneyFigs}
        <div style={{ flex: 1 }} />
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }}>
          <RoBtn small data-ro-print-invoice="1" onClick={printInvoice}>🖨 Invoice</RoBtn>
          {closed ? (
            <RoBtn small data-ro-view-gl="1" onClick={() => setTab("acct")}>📒 GL entries</RoBtn>
          ) : !readOnlyRole && (
            <>
              {takePay}
              {closeBtn}
              {closeNote}
            </>
          )}
        </div>
      </div>
      {subModals}
    </div>
  );
};

// ─── Authorization wording (prints on the RO; the customer's e-sign page shows the RO's own text) ──────
// X2: the store's wording (blank = the standard RO_AUTH_DISCLAIMER); "per-RO edit" lets an advisor change it on one RO.
const roStoreAuthText = (cfg) => (cfg && cfg.ro && cfg.ro.texts.authText && cfg.ro.texts.authText.text) || window.RO_AUTH_DISCLAIMER || "";
const RoDisclosureCard = ({ ro, act, cfg, readOnly, open: openProp, onToggle }) => {
  const closed = ro.status === "Closed";
  const [openLocal, setOpenLocal] = React.useState(false);
  const open = openProp != null ? openProp : openLocal;
  const setOpen = (fn) => { const v = typeof fn === "function" ? fn(open) : fn; onToggle ? onToggle(v) : setOpenLocal(v); };
  const storeText = roStoreAuthText(cfg || roCfgOf());
  const perRo = !(cfg && cfg.ro && cfg.ro.texts.authText && cfg.ro.texts.authText.perRoEdit === false);
  const val = ro.disclosure != null ? ro.disclosure : storeText;
  const canEdit = !closed && !readOnly && perRo;
  return (
    <div style={{ border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", background: "var(--jb-surface)", overflow: "hidden" }}>
      <div onClick={() => setOpen(o => !o)} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 14px", cursor: "pointer", background: "var(--jb-surface-2)", minHeight: 24 }}>
        <span style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.3, color: "var(--jb-text-dim)" }}>Customer Disclosure (prints on RO)</span>
        <div style={{ flex: 1 }} />
        {ro.disclosure != null && ro.disclosure !== storeText && <span style={{ fontSize: 12, color: "#9A6700", fontWeight: 700 }}>customized</span>}
        <span style={{ color: "#999", fontSize: 12 }}>{open ? "▴" : "▾"}</span>
      </div>
      {open && (
        <div style={{ padding: "10px 14px" }}>
          <textarea rows={4} value={val} disabled={!canEdit}
                    onChange={(e) => act(DMS.updateRODetail(ro.id, { disclosure: e.target.value }))}
                    style={{ width: "100%", boxSizing: "border-box", fontSize: 12.5, lineHeight: 1.5, padding: "8px 10px", border: "1px solid #C8CCD2", borderRadius: 4, fontFamily: "var(--jb-font)", resize: "vertical", background: !canEdit ? "#F0F0F0" : "#FFFEF8" }} />
          <div style={{ display: "flex", gap: 8, marginTop: 6, alignItems: "center", flexWrap: "wrap" }}>
            <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>This text prints in the Authorization section of the repair order and shows on the customer's e-sign page.{!perRo && !closed ? " The store's wording is fixed for every RO (Service Dept › Setup)." : ""}</span>
            <div style={{ flex: 1 }} />
            {canEdit && <button className="k2b-button small" onClick={() => act(DMS.updateRODetail(ro.id, { disclosure: null }))}>Reset to standard</button>}
          </div>
        </div>
      )}
    </div>
  );
};

// ─── Multi-point inspection (L3 items + grades; its own tab, or inside Customer & vehicle in today's look) ─────
const RO_MPI_ITEMS = [
  "Engine oil & filter", "Tire pressure / tread", "Brake pads / rotors", "Wiper blades",
  "Air filter", "Cabin filter", "Battery / charging", "Coolant level", "Belts & hoses",
  "Lights / signals", "Steering / suspension", "Exhaust system", "Fluid leaks", "Drive axle / CV boots",
];
const MPI_TONE = { g: { bg: "#16A34A", label: "OK" }, y: { bg: "#C8862A", label: "Attn" }, r: { bg: "#B23A2E", label: "Now" } };
const roMpiGrades = (cfg) => { const gr = cfg && cfg.ro && cfg.ro.lists.inspection && cfg.ro.lists.inspection.grades; return { g: (gr && gr[0]) || "OK", y: (gr && gr[1]) || "Attn", r: (gr && gr[2]) || "Now" }; };
const RoMpiCard = ({ ro, act, cfg, readOnly, openAlways, phone }) => {
  const closed = ro.status === "Closed";
  const dis = closed || readOnly;
  const [openLocal, setOpen] = React.useState(false);
  const open = openAlways || openLocal;
  const mpi = ro.mpi || {};
  const items = (cfg && cfg.ro && cfg.ro.lists.inspection.items) || RO_MPI_ITEMS;
  const grades = roMpiGrades(cfg);
  const set = (item, v) => act(DMS.updateRODetail(ro.id, { mpi: { ...mpi, [item]: mpi[item] === v ? undefined : v } }));
  const counts = { g: 0, y: 0, r: 0 };
  items.forEach(i => { if (counts[mpi[i]] != null) counts[mpi[i]]++; });
  const done = counts.g + counts.y + counts.r;
  return (
    <div data-ro-mpi="1" style={{ border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", background: "var(--jb-surface)", overflow: "hidden" }}>
      <div onClick={() => !openAlways && setOpen(o => !o)} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 14px", cursor: openAlways ? "default" : "pointer", background: "var(--jb-surface-2)" }}>
        <span style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.3, color: "var(--jb-text-dim)" }}>Multi-Point Inspection</span>
        <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>{done}/{items.length}</span>
        <div style={{ flex: 1 }} />
        {counts.g > 0 && <span style={{ fontSize: 12, fontWeight: 700, color: "#0E7A37" }}>● {counts.g} {grades.g}</span>}
        {counts.y > 0 && <span style={{ fontSize: 12, fontWeight: 700, color: "#9A6700" }}>● {counts.y} {grades.y}</span>}
        {counts.r > 0 && <span style={{ fontSize: 12, fontWeight: 700, color: "#B23A2E" }}>● {counts.r} {grades.r}</span>}
        {!openAlways && <span style={{ color: "#999", fontSize: 12 }}>{open ? "▴" : "▾"}</span>}
      </div>
      {open && (
        <div style={{ padding: "8px 14px 12px" }}>
          <div style={{ display: "grid", gridTemplateColumns: phone ? "1fr" : "repeat(auto-fit, minmax(300px, 1fr))", gap: "3px 22px" }}>
            {items.map(item => (
              <div key={item} style={{ display: "flex", alignItems: "center", gap: 8, padding: "2px 0" }}>
                <span style={{ flex: 1, fontSize: 13 }}>{item}</span>
                {["g", "y", "r"].map(v => (
                  <button key={v} disabled={dis} onClick={() => set(item, v)} title={grades[v]}
                          style={{ minWidth: phone ? 48 : 40, height: phone ? 36 : 24, borderRadius: 5, cursor: dis ? "default" : "pointer", fontSize: 12, fontWeight: 800, color: mpi[item] === v ? "#fff" : "#667",
                                   border: "1px solid " + (mpi[item] === v ? MPI_TONE[v].bg : "#C8CCD2"),
                                   background: mpi[item] === v ? MPI_TONE[v].bg : "#fff" }}>{grades[v]}</button>
                ))}
              </div>
            ))}
          </div>
          <textarea rows={2} placeholder="Inspection notes / recommendations…" disabled={dis} value={ro.mpiNotes || ""}
                    onChange={(e) => act(DMS.updateRODetail(ro.id, { mpiNotes: e.target.value }))}
                    style={{ width: "100%", boxSizing: "border-box", marginTop: 8, fontSize: 13, padding: "6px 8px", border: "1px solid #C8CCD2", borderRadius: 4, fontFamily: "var(--jb-font)", resize: "vertical", background: dis ? "#F0F0F0" : "#FFFEF8" }} />
          <div style={{ fontSize: 12, color: "var(--jb-text-muted)", marginTop: 4 }}>{grades.g} = fine · {grades.y} = needs attention soon · {grades.r} = needs attention now. Prints on the repair order.</div>
        </div>
      )}
    </div>
  );
};

// ─── Bulk oil dispense (RO) — L7 quick amounts ──────────────────────────
const RoBulkOilModal = ({ ro, act, cfg, onClose }) => {
  const status = (window.DMS && DMS.bulkOilStatus) ? DMS.bulkOilStatus() : [];
  const bq = (cfg && cfg.ro && cfg.ro.lists.bulkOilQts) || { quick: [5, 6, 8], pick: 6 };
  const [fluidId, setFluidId] = React.useState(status[0] ? status[0].id : "");
  const [qts, setQts] = React.useState(String(bq.pick));
  const f = status.find(x => x.id === fluidId);
  const q = parseFloat(qts) || 0;
  return (
    <K2BModal title={`Bulk Oil — ${ro.id}`} onClose={onClose} width={520}
      buttons={<>
        <K2BButton onClick={onClose}>Cancel</K2BButton>
        <K2BButton primary onClick={async () => { const r = await DMS.dispenseBulkOil(ro.id, fluidId, qts); act(r); if (r.ok) onClose(); }}>
          Add {q || 0} qt to RO
        </K2BButton>
      </>}>
      {!status.length ? (
        <div style={{ color: "#888", fontSize: 13 }}>No bulk fluids set up. Add tanks in Parts Dept → Bulk Oil.</div>
      ) : (
        <>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {status.map(s => (
              <label key={s.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", borderRadius: 6, cursor: "pointer",
                            border: "1px solid " + (s.id === fluidId ? "var(--jb-blue, #1B66A8)" : "var(--jb-border)"),
                            background: s.id === fluidId ? "var(--jb-blue-tint, #E5EFFA)" : "#fff" }}>
                <input type="radio" checked={s.id === fluidId} onChange={() => setFluidId(s.id)} />
                <span style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ fontWeight: 700, fontSize: 13 }}>{s.name}</span>
                  <span style={{ display: "block", fontSize: 12, color: s.low ? "var(--k2b-maroon)" : "var(--jb-text-muted)" }}>
                    {s.tank} · {s.onHand}/{s.capacity} {s.uom} ({s.pct}%){s.low ? " · ⚠ below reorder point" : ""}
                  </span>
                </span>
                <span style={{ fontFamily: "var(--jb-mono)", fontSize: 12.5, fontWeight: 700 }}>${(+s.sale).toFixed(2)}/{s.uom}</span>
              </label>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 12, flexWrap: "wrap" }}>
            <span style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>Quarts:</span>
            <input value={qts} onChange={(e) => setQts(e.target.value.replace(/[^0-9.]/g, ""))} autoComplete="off" name="k2b-bulk-qts"
                   style={{ width: 80, fontSize: 14, fontWeight: 700, padding: "6px 8px", border: "1px solid #C8CCD2", borderRadius: 4, fontFamily: "var(--jb-mono)" }} />
            {(bq.quick || []).map(n => <button key={n} className="k2b-button small" onClick={() => setQts(String(n))}>{n}</button>)}
            {f && <span style={{ fontSize: 12.5, color: "var(--jb-text-dim)", marginLeft: "auto", fontFamily: "var(--jb-mono)" }}>= ${(q * f.sale).toFixed(2)}</span>}
          </div>
        </>
      )}
    </K2BModal>
  );
};

// ─── Flag hours (L8: the starting hours) ─────────────────────────────────
const FlagModal = ({ ro, act, cfg, onClose }) => {
  const start = cfg && cfg.ro && cfg.ro.lists.flagStart != null ? cfg.ro.lists.flagStart : 1;
  const [h, setH] = React.useState((+start).toFixed(1));
  return (
    <K2BModal title={`Flag Hours — ${ro.id}`} onClose={onClose}
              buttons={<>
                <K2BButton onClick={onClose}>Cancel</K2BButton>
                <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }}
                           onClick={() => { act(DMS.flagHoursOnRO(ro.id, parseFloat(h) || 0)); onClose(); }}>Flag Hours</K2BButton>
              </>}>
      <div style={{ fontSize: 13, lineHeight: 1.7 }}>
        <div><b>{ro.customer}</b> · {ro.tech || "unassigned"}</div>
        <div style={{ color: "var(--jb-text-dim)", fontSize: 12 }}>Currently flagged: {ro.flagHours || 0}h · drives tech productivity and payroll.</div>
        <div style={{ marginTop: 10, display: "flex", gap: 8, alignItems: "center" }}>
          <span>Add hours:</span>
          <input value={h} onChange={(e) => setH(e.target.value.replace(/[^0-9.]/g, ""))} autoComplete="off" name="k2b-flag-hours" style={{ width: 90 }} />
        </div>
      </div>
    </K2BModal>
  );
};

// ─── GL confirmation (R14 "window", today) ───────────────────────────────
const GLConfirmModal = ({ je, effects, title, ro, onClose, invoice, jeId }) => {
  const nm = (a) => (DMS.acctName ? DMS.acctName(a) : "") || (window.glName ? window.glName(a) : "");
  const lines = (je && je.lines) || [];
  const b = DMS.jeBalance ? DMS.jeBalance(lines) : { ok: true, dr: 0, cr: 0 };
  const td = { padding: "4px 8px", borderTop: "1px solid var(--jb-border)", fontSize: 12.5 };
  return (
    <K2BModal title={title} onClose={onClose} width={640}
              buttons={<K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={onClose}>Done</K2BButton>}>
      {invoice && invoice.totalCents != null && (
        <div data-ro-closed-invoice={invoice.roId} style={{ fontSize: 13, display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 10 }}>
          <span>RO total <b data-ro-closed-total="1" style={{ fontFamily: "var(--jb-mono)" }}>{roM$(invoice.totalCents / 100)}</b></span>
          <span>Tax <b style={{ fontFamily: "var(--jb-mono)" }}>{roM$(invoice.taxCents / 100)}</b></span>
          <span>Paid <b style={{ fontFamily: "var(--jb-mono)" }}>{roM$(invoice.paidCents / 100)}</b></span>
          <span>Customer balance <b data-ro-closed-balance="1" style={{ fontFamily: "var(--jb-mono)" }}>{roM$(invoice.customerBalanceCents / 100)}</b></span>
        </div>
      )}
      {!je ? <div style={{ fontSize: 13, color: "var(--jb-text-dim)" }}>Posted to the books as <b>{jeId || ""}</b> — the office sees the journal entry in the General Ledger.{effects && effects.length ? " " + effects.map(e => e.label).join(" · ") : ""}</div> : (
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
            <b style={{ fontFamily: "var(--jb-mono)", color: "var(--jb-navy)" }}>{je.id}</b>
            <span style={{ fontSize: 12.5 }}>Journal {je.jrn} · {je.date} · {je.desc}</span>
            <div style={{ flex: 1 }} />
            <span style={{ fontSize: 12, fontWeight: 800, color: b.ok ? "#0E7A37" : "#B23A2E" }}>{b.ok ? "✓ Balanced" : "✕ Out of balance"} · DR {roM$(b.dr)} = CR {roM$(b.cr)}</span>
          </div>
          <div style={{ border: "1px solid var(--jb-border)", borderRadius: 6, maxHeight: "48vh", overflow: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse" }}>
              <thead><tr style={{ background: "var(--jb-surface-2)" }}>{["Acct", "Name", "Memo", "Debit", "Credit"].map(h => <th key={h} style={{ ...roLbl, padding: "5px 8px", textAlign: h === "Debit" || h === "Credit" ? "right" : "left", position: "sticky", top: 0, background: "var(--jb-surface-2)" }}>{h}</th>)}</tr></thead>
              <tbody>{lines.map((l, i) => (
                <tr key={i}><td style={{ ...td, fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{l.acct}</td><td style={td}>{nm(l.acct)}</td><td style={{ ...td, color: "var(--jb-text-dim)", fontSize: 12 }}>{l.desc || ""}</td>
                  <td style={{ ...td, textAlign: "right", fontFamily: "var(--jb-mono)" }}>{l.dr ? roM$(l.dr) : ""}</td><td style={{ ...td, textAlign: "right", fontFamily: "var(--jb-mono)" }}>{l.cr ? roM$(l.cr) : ""}</td></tr>
              ))}</tbody>
            </table>
          </div>
          {effects && effects.length > 0 && (
            <div style={{ fontSize: 12.5 }}>
              <div style={{ ...roLbl, marginBottom: 4 }}>Also happened</div>
              {effects.map((e, i) => <div key={i} style={{ padding: "2px 0" }}>✓ <b>{e.label}</b> <span style={{ color: "var(--jb-text-muted)" }}>— {e.detail}</span></div>)}
            </div>
          )}
        </div>
      )}
    </K2BModal>
  );
};

// ─── styles ──────────────────────────────────────────────────────────────
const editSelect = { fontFamily: "var(--jb-font)", fontSize: 12.5, padding: "4px 6px", minWidth: 130 };
const iconBtn = { border: "none", background: "transparent", color: "var(--jb-text-muted)", cursor: "pointer",
                  fontSize: 16, lineHeight: 1, width: 26, height: 26, borderRadius: 4 };

const APPROVAL_TONE = { approved: { bg: "#E6F7EC", fg: "#0E7A37", label: "✓ Approved" }, declined: { bg: "#FBE9E7", fg: "#B23A2E", label: "✕ Declined" }, pending: { bg: "#FBF3E0", fg: "#9A6700", label: "Pending" } };

// ─── Text field that keeps its own state and saves on pause / blur ─────────
// (long notes never fight the shared-state re-render while typing)
const RoLazyText = ({ value, onCommit, multiline, rows, disabled, placeholder, style, dataKey, onKeyDown }) => {
  const [v, setV] = React.useState(value == null ? "" : String(value));
  const dirty = React.useRef(false), timer = React.useRef(null), latest = React.useRef(v), cb = React.useRef(onCommit), base = React.useRef(value);
  cb.current = onCommit; base.current = value;
  React.useEffect(() => { if (!dirty.current) { const x = value == null ? "" : String(value); setV(x); latest.current = x; } }, [value]);
  const flush = () => { clearTimeout(timer.current); if (!dirty.current) return; dirty.current = false; if (latest.current !== (base.current == null ? "" : String(base.current))) cb.current(latest.current); };
  React.useEffect(() => () => flush(), []);
  const onChange = (e) => { const x = e.target.value; setV(x); latest.current = x; dirty.current = true; clearTimeout(timer.current); timer.current = setTimeout(flush, 700); };
  const common = { value: v, onChange, onBlur: flush, disabled, placeholder, "data-ro-field": dataKey, autoComplete: "off",
                   onKeyDown: (e) => { if (!multiline && e.key === "Enter") flush(); onKeyDown && onKeyDown(e); },
                   style: { width: "100%", boxSizing: "border-box", fontSize: 13, padding: "6px 8px", border: "1px solid #C8CCD2", borderRadius: 4,
                            fontFamily: "var(--jb-font)", background: disabled ? "var(--jb-surface-2, #F0F0F0)" : "var(--jb-surface, #fff)", color: "var(--jb-text)", ...(style || {}) } };
  return multiline ? <textarea rows={rows || 4} {...common} style={{ ...common.style, resize: "vertical", lineHeight: 1.45 }} /> : <input {...common} />;
};
// Read-only text (a view-only sign-in sees words, not greyed-out boxes)
const RoTextView = ({ value, empty, mono }) => <div style={{ fontSize: 13, lineHeight: 1.45, whiteSpace: "pre-wrap", overflowWrap: "anywhere", color: value ? "var(--jb-text)" : "var(--jb-text-muted)", fontStyle: value ? "normal" : "italic", fontFamily: mono ? "var(--jb-mono)" : undefined }}>{value || empty || "Not written yet."}</div>;

const RoPill = ({ tone, children, title }) => {
  const c = { print: ["#E6F7EC", "#0E7A37"], internal: ["#FBE9E7", "#B23A2E"], info: ["#E5EFFA", "#1456A0"], warn: ["#FBF3E0", "#9A6700"] }[tone] || ["#EEE", "#555"];
  return <span title={title} style={{ background: c[0], color: c[1], borderRadius: 999, padding: "1px 8px", fontSize: 12, fontWeight: 800, letterSpacing: 0.3, whiteSpace: "nowrap" }}>{children}</span>;
};

// Same look as K2BButton, but passes data-* attributes through (used by probes / automation).
const RoBtn = ({ small, children, style, ...rest }) => <button type="button" className={"k2b-button" + (small ? " small" : "")} style={style} {...rest}>{children}</button>;
const roLbl = { fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--jb-text-muted)" };
const roCardBox = { border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", background: "var(--jb-surface)", overflow: "hidden" };
const roInp = { width: "100%", boxSizing: "border-box", fontSize: 13, padding: "6px 8px", border: "1px solid #C8CCD2", borderRadius: 4, fontFamily: "var(--jb-font)", background: "var(--jb-surface, #fff)", color: "var(--jb-text)" };
// datetime-local <-> ISO (the promise time)
const roLocalInput = (iso) => { if (!iso) return ""; const d = new Date(iso); if (isNaN(d)) return ""; const p = (n) => String(n).padStart(2, "0"); return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`; };
const roHoursAhead = (h) => { const d = new Date(Date.now() + (+h || 0) * 3600000); d.setSeconds(0, 0); const m = d.getMinutes(); d.setMinutes(m - (m % 15) + (m % 15 ? 15 : 0)); return d.toISOString(); };

// ─── Customer search (new RO / change customer) ──────────────────────────
// RC32: the advisor list comes from the user list and starts on the person signed in (L1); optional promise time (R6) and transport (R7);
// walk-in ROs can be turned off by the store (X8).
const RoCustomerSearchModal = ({ mode, ro, techs, act, go, cfg, onClose, onCreated }) => {
  cfg = cfg || roCfgOf();
  const [q, setQ] = React.useState("");
  const [pick, setPick] = React.useState(null);          // { custNum, name, phone, email, vehicles }
  const [veh, setVeh] = React.useState(null);            // chosen vehicle or null
  const [nv, setNv] = React.useState({ vin: "", yr: "", mk: "", mdl: "", miles: "" });
  // "A different vehicle": a 17-character VIN typed / pasted here fills the still-blank Year / Make / Model from our server
  // (window.DMS.vin: MarketCheck -> NHTSA -> the VIN itself). What the person typed is never overwritten; Undo puts the filled values back.
  const nvTyped = React.useRef(new Set());
  const nvSet = (k, v) => { nvTyped.current.add(k); setNv(s => ({ ...s, [k]: v })); };
  const nvFill = (typeof VlUseVinFill === "function") ? VlUseVinFill({
    vin: nv.vin, enabled: !veh, keys: { yr: "year", mk: "make", mdl: "model" },
    read: () => nv, write: (p) => setNv(s => ({ ...s, ...p })), typed: () => nvTyped.current, shape: { yr: (n) => String(n) },
  }) : null;
  const adv = DMS.svcAdvisors ? DMS.svcAdvisors({}) : { names: SVC_ADVISORS, pick: SVC_ADVISORS[0] };
  const promiseCfg = (cfg.ro && cfg.ro.workflow.promise) || { mode: "off", suggestHrs: 2, waiterHrs: 1 };
  const transports = (cfg.ro && cfg.ro.lists.transport) || [];
  const walkInOk = !(cfg.ro && cfg.ro.texts.newRo && cfg.ro.texts.newRo.walkIn === false);
  const [walkIn, setWalkIn] = React.useState(false);
  const [internal, setInternal] = React.useState(false);
  const [stock, setStock] = React.useState("");
  const [f, setF] = React.useState({ concern: "", advisor: adv.pick, techId: "", miles: "", promise: "", transport: "" });
  const rows = React.useMemo(() => (q.trim().length >= 2 ? DMS.customerSearch(q) : []), [q]);
  const unit = internal && stock ? DMS._unit(stock) : null;
  const useVeh = veh || (nv.vin || nv.mdl ? nv : null);

  const submit = () => {
    if (mode === "change") {
      if (!pick) return act({ ok: false, msg: "Pick a customer first." });
      const r = act(DMS.setROCustomer(ro.id, pick, useVeh ? { ...useVeh, miles: f.miles || useVeh.miles } : null));
      if (r.ok) onClose();
      return;
    }
    let d;
    if (internal) {
      if (!unit) return act({ ok: false, msg: "Enter a stock # that's in inventory." });
      d = { customer: "INTERNAL — " + unit.stock, veh: { vin: unit.vin, yr: unit.yr, mk: unit.mk, mdl: unit.mdl, miles: f.miles || unit.miles, stock: unit.stock }, internalStock: unit.stock, payType: "Internal" };
    } else if (pick) d = { cust: pick, veh: useVeh ? { ...useVeh, miles: f.miles || useVeh.miles } : null };
    else if (walkIn && walkInOk && q.trim()) d = { customer: q.trim().toUpperCase(), veh: useVeh };
    else return act({ ok: false, msg: walkInOk ? "Search and pick the customer (or choose walk-in / internal)." : "Search and pick the customer (or choose internal)." });
    const r = act(DMS.openServiceRO({ ...d, concern: f.concern, advisor: f.advisor, techId: f.techId, miles: f.miles }));
    if (r.ok) {
      const extra = {};
      if (f.promise) extra.promise = f.promise;
      if (f.transport) extra.transport = f.transport;
      if (Object.keys(extra).length) DMS.updateRODetail(r.id, extra);
      onCreated && onCreated(r.id); onClose();
    }
  };

  return (
    <K2BModal title={mode === "change" ? `Customer & Vehicle — ${ro.id}` : "Open New Repair Order"} onClose={onClose} width={860}
              buttons={<>
                <K2BButton onClick={onClose}>Cancel</K2BButton>
                <RoBtn data-ro-cust-submit="1" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={submit}>{mode === "change" ? "Use this customer" : "Open RO"}</RoBtn>
              </>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 10, maxHeight: "min(64vh, 560px)", overflow: "auto", paddingRight: 2 }}>
        {mode !== "change" && (
          <div style={{ display: "flex", gap: 14, fontSize: 12.5, flexWrap: "wrap" }}>
            <label style={{ display: "flex", gap: 5, alignItems: "center" }}><input type="radio" checked={!internal} onChange={() => setInternal(false)} /> Customer RO</label>
            <label style={{ display: "flex", gap: 5, alignItems: "center" }}><input type="radio" data-ro-internal="1" checked={internal} onChange={() => setInternal(true)} /> Internal / recon RO (charge to a stock unit)</label>
          </div>
        )}
        {internal ? (
          <div style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 8, alignItems: "center", fontSize: 13 }}>
            <span style={roLbl}>Stock #</span>
            <input autoFocus value={stock} onChange={(e) => setStock(e.target.value.toUpperCase())} placeholder="U24-9002" autoComplete="off" name="k2b-ro-stock" style={roInp} />
            <span />
            <span style={{ fontSize: 12.5, color: unit ? "var(--jb-text)" : "var(--jb-text-muted)" }}>{unit ? `${unit.yr} ${unit.mk} ${unit.mdl} · VIN ${unit.vin} · ${unit.type || ""}` : "Type a stock # from inventory."}</span>
          </div>
        ) : (
          <>
            <div>
              <div style={roLbl}>Find customer — name, phone, email or customer #</div>
              <input autoFocus data-ro-cust-q="1" value={q} onChange={(e) => { setQ(e.target.value); setPick(null); setVeh(null); }} autoComplete="off" name="k2b-ro-cust-find" data-lpignore="true" data-1p-ignore="true" data-form-type="other"
                     placeholder="e.g. SMITH · 573-555-0101 · jo@example.com · 5550101 (Customer #)" style={{ ...roInp, fontSize: 14, marginTop: 4 }} />
            </div>
            <div style={{ border: "1px solid var(--jb-border)", borderRadius: 6, maxHeight: 200, overflow: "auto" }}>
              {q.trim().length < 2 && <div style={{ padding: 10, fontSize: 12.5, color: "var(--jb-text-muted)" }}>Type at least 2 characters.</div>}
              {q.trim().length >= 2 && rows.length === 0 && (
                <div style={{ padding: 10, fontSize: 12.5, color: "var(--jb-text-muted)", display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
                  No customer matches. New customers are added in the CRM.
                  {go && <K2BButton small onClick={() => { onClose(); go("crm"); }}>Open CRM</K2BButton>}
                  <button type="button" className="k2b-button small" data-search-clear="1" onClick={() => setQ("")}>Clear search</button>
                  {mode !== "change" && walkInOk && <label style={{ display: "flex", gap: 4, alignItems: "center" }}><input type="checkbox" checked={walkIn} onChange={(e) => setWalkIn(e.target.checked)} /> Open as walk-in "{q.trim().toUpperCase()}"</label>}
                </div>
              )}
              {rows.map(c => (
                <button key={c.custNum} data-ro-cust-row={c.custNum} onClick={() => { setPick(c); setVeh(c.vehicles[0] || null); }}
                        style={{ display: "grid", gridTemplateColumns: "minmax(140px,1.3fr) 120px minmax(120px,1fr) 70px", gap: 8, width: "100%", textAlign: "left", padding: "8px 10px",
                                 border: "none", borderBottom: "1px solid var(--jb-border)", cursor: "pointer", fontSize: 12.5, fontFamily: "var(--jb-font)",
                                 background: pick && pick.custNum === c.custNum ? "var(--jb-blue-tint)" : "var(--jb-surface)", color: "var(--jb-text)" }}>
                  <span><b>{c.name}</b><span style={{ display: "block", fontSize: 12, color: "var(--jb-text-muted)", fontFamily: "var(--jb-mono)" }}>#{c.custNum}</span></span>
                  <span style={{ fontFamily: "var(--jb-mono)" }}>{c.phone}</span>
                  <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.email || "—"}</span>
                  <span style={{ textAlign: "right", color: "var(--jb-text-muted)" }}>{c.vehicles.length} veh</span>
                </button>
              ))}
            </div>
            {(pick || walkIn) && (
              <div>
                <div style={roLbl}>Vehicle {pick ? `— ${pick.name}` : ""}</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 4 }}>
                  {pick && pick.vehicles.map(v => (
                    <label key={v.vin || v.label || v.mdl} data-ro-veh={v.vin} style={{ display: "flex", gap: 8, alignItems: "center", padding: "6px 10px", borderRadius: 6, cursor: "pointer", fontSize: 12.5,
                                                               border: "1px solid " + (veh === v ? "var(--jb-blue)" : "var(--jb-border)"), background: veh === v ? "var(--jb-blue-tint)" : "var(--jb-surface)" }}>
                      <input type="radio" checked={veh === v} onChange={() => setVeh(v)} />
                      <span style={{ flex: 1, minWidth: 0 }}><b>{[v.yr, v.mk, v.mdl].filter(Boolean).join(" ") || v.label}</b> <span style={{ fontFamily: "var(--jb-mono)", color: "var(--jb-text-dim)" }}>{v.vin}</span></span>
                      <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>{v.src}{v.miles ? " · " + Number(v.miles).toLocaleString() + " mi" : ""}</span>
                    </label>
                  ))}
                  <label style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 12.5 }}>
                    <input type="radio" checked={!veh} onChange={() => setVeh(null)} /> A different vehicle:
                  </label>
                  {!veh && (
                    <div>
                      <div style={{ display: "grid", gridTemplateColumns: "2fr 70px 1fr 1.4fr", gap: 6 }}>
                        <input id="ro-nv-vin" value={nv.vin} onChange={(e) => nvSet("vin", e.target.value.toUpperCase())} onBlur={() => nvFill && nvFill.onBlur()} placeholder="VIN" spellCheck={false} autoComplete="off" style={{ ...roInp, fontFamily: "var(--jb-mono)" }} />
                        <input id="ro-nv-yr" value={nv.yr} onChange={(e) => nvSet("yr", e.target.value.replace(/\D/g, "").slice(0, 4))} placeholder="Year" autoComplete="off" style={roInp} />
                        <input id="ro-nv-mk" value={nv.mk} onChange={(e) => nvSet("mk", e.target.value.toUpperCase())} placeholder="Make" autoComplete="off" style={roInp} />
                        <input id="ro-nv-mdl" value={nv.mdl} onChange={(e) => nvSet("mdl", e.target.value.toUpperCase())} placeholder="Model" autoComplete="off" style={roInp} />
                      </div>
                      {nvFill && typeof VlVinNote === "function" && <VlVinNote fill={nvFill} id="ro-nv-vin-note" />}
                    </div>
                  )}
                </div>
              </div>
            )}
          </>
        )}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))", gap: 8 }}>
          <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={roLbl}>Mileage in</span><input data-ro-miles="1" value={f.miles} onChange={(e) => setF({ ...f, miles: e.target.value.replace(/\D/g, "") })} autoComplete="off" name="k2b-ro-miles" style={roInp} /></label>
          {mode !== "change" && <>
            <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={roLbl}>Advisor</span><select data-ro-advisor="1" value={f.advisor} onChange={(e) => setF({ ...f, advisor: e.target.value })} style={roInp}>{adv.names.map(a => <option key={a}>{a}</option>)}</select></label>
            <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={roLbl}>New jobs go to</span><select value={f.techId} onChange={(e) => setF({ ...f, techId: e.target.value })} style={roInp}><option value="">— assign later —</option>{techs.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}</select></label>
            {promiseCfg.mode !== "off" && (
              <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={roLbl}>Promised (optional)</span>
                <span style={{ display: "flex", gap: 4 }}>
                  <input type="datetime-local" data-ro-new-promise="1" value={roLocalInput(f.promise)} onChange={(e) => setF({ ...f, promise: e.target.value ? new Date(e.target.value).toISOString() : "" })} style={{ ...roInp, minWidth: 0 }} />
                  <RoBtn small onClick={() => setF({ ...f, promise: roHoursAhead(f.transport === "Waiter" ? promiseCfg.waiterHrs : promiseCfg.suggestHrs) })} title="Suggest a time">+{f.transport === "Waiter" ? promiseCfg.waiterHrs : promiseCfg.suggestHrs} h</RoBtn>
                </span>
              </label>
            )}
            {transports.length > 0 && (
              <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={roLbl}>Transport (optional)</span>
                <select data-ro-new-transport="1" value={f.transport} onChange={(e) => setF({ ...f, transport: e.target.value })} style={roInp}><option value="">—</option>{transports.map(t => <option key={t}>{t}</option>)}</select></label>
            )}
          </>}
        </div>
        {mode !== "change" && (
          <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={roLbl}>Customer concern (you can add much more on the Notes tab)</span>
            <textarea rows={2} value={f.concern} onChange={(e) => setF({ ...f, concern: e.target.value })} placeholder="Customer states…" style={{ ...roInp, resize: "vertical" }} /></label>
        )}
      </div>
    </K2BModal>
  );
};

// ─── Customer & vehicle tab ──────────────────────────────────────────────
const RoCustVehCard = ({ ro, readOnly, act, onChangeCustomer, techs, cfg, phone }) => {
  const c = ro.cust || {};
  const v = ro.veh || {};
  const setV = (k) => (x) => act(DMS.setROVehicleField(ro.id, { [k]: x }));
  const cell = (label, node) => (<label style={{ display: "flex", flexDirection: "column", gap: 3, minWidth: 0 }}><span style={roLbl}>{label}</span>{node}</label>);
  const ro2 = (t) => <div style={{ ...roInp, background: "var(--jb-surface-2)", minHeight: 31, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{t || "—"}</div>;
  const adv = DMS.svcAdvisors ? DMS.svcAdvisors({ current: ro.advisor || "" }) : { names: SVC_ADVISORS, pick: ro.advisor || SVC_ADVISORS[0] };
  const advVal = ro.advisor && adv.names.includes(ro.advisor) ? ro.advisor : adv.pick;
  const promiseCfg = (cfg && cfg.ro && cfg.ro.workflow.promise) || { mode: "off" };
  const transports = (cfg && cfg.ro && cfg.ro.lists.transport) || [];
  const techName = (techs.find(t => t.id === ro.techId) || {}).name || "";
  return (
    <div style={{ display: "grid", gridTemplateColumns: phone ? "minmax(0, 1fr)" : "repeat(auto-fit, minmax(300px, 1fr))", gap: 12 }}>
      <div style={roCardBox}>
        <JBPanelHead right={!readOnly && <button className="k2b-button small" onClick={onChangeCustomer}>🔍 Find / change</button>}>Customer</JBPanelHead>
        <div style={{ padding: 12, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 10 }}>
          {cell("Name", ro2(ro.customer))}
          {cell("Customer #", ro2(ro.custNum || c.custNum))}
          {cell("Phone", ro2(c.phone))}
          {cell("Email", ro2(c.email))}
        </div>
        {!ro.custNum && !readOnly && <div style={{ padding: "0 12px 12px", fontSize: 12.5, color: "#9A6700" }}>Not linked to a customer file — use Find to search by name, phone, email or customer #.</div>}
      </div>
      <div style={roCardBox}>
        <JBPanelHead>Vehicle</JBPanelHead>
        <div style={{ padding: 12, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(110px, 1fr))", gap: 10 }}>
          {cell("Year", readOnly ? ro2(v.yr) : <RoLazyText value={v.yr || ""} onCommit={setV("yr")} />)}
          {cell("Make", readOnly ? ro2(v.mk) : <RoLazyText value={v.mk || ""} onCommit={setV("mk")} />)}
          {cell("Model", readOnly ? ro2(v.mdl || (!v.yr ? ro.vehicle : "")) : <RoLazyText value={v.mdl || (!v.yr ? ro.vehicle : "")} onCommit={setV("mdl")} />)}
          {cell("Mileage", readOnly ? ro2(ro.miles || v.miles) : <RoLazyText dataKey="miles" value={ro.miles || v.miles || ""} onCommit={setV("miles")} />)}
          <div style={{ gridColumn: "1 / -1" }}>{cell("VIN", readOnly ? ro2(ro.vin || v.vin) : <RoLazyText value={ro.vin || v.vin || ""} onCommit={setV("vin")} style={{ fontFamily: "var(--jb-mono)" }} />)}</div>
          {(ro.internalStock || v.stock) && <div style={{ gridColumn: "1 / -1", fontSize: 12.5, color: "#8050B0", fontWeight: 700 }}>Internal / recon RO on stock {ro.internalStock || v.stock}</div>}
        </div>
      </div>
      <div style={{ ...roCardBox, gridColumn: "1 / -1" }}>
        <div style={{ padding: 12, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 10 }}>
          {cell("Advisor", readOnly ? ro2(ro.advisor) : <select value={advVal} onChange={(e) => act(DMS.updateRODetail(ro.id, { advisor: e.target.value }))} style={roInp}>{adv.names.map(a => <option key={a}>{a}</option>)}</select>)}
          {cell("New jobs go to", ro2(techName ? techName + (readOnly ? "" : " (change on the Jobs tab)") : "— unassigned —"))}
          {cell("Opened", ro2(ro.opened ? new Date(ro.opened).toLocaleString() : ""))}
          {(promiseCfg.mode !== "off" || ro.promise) && cell("Promised", readOnly ? ro2(roPromiseText(ro)) : (
            <span style={{ display: "flex", gap: 4 }}>
              <input type="datetime-local" data-ro-promise-input="1" value={roLocalInput(ro.promise)} onChange={(e) => act(DMS.updateRODetail(ro.id, { promise: e.target.value ? new Date(e.target.value).toISOString() : "" }))} style={{ ...roInp, minWidth: 0 }} />
              {ro.promise ? <RoBtn small onClick={() => act(DMS.updateRODetail(ro.id, { promise: "" }))} title="No promise time">✕</RoBtn> : null}
            </span>
          ))}
          {(transports.length > 0 || ro.transport) && cell("Transport", readOnly ? ro2(ro.transport) : (
            <select data-ro-transport-input="1" value={ro.transport || ""} onChange={(e) => act(DMS.updateRODetail(ro.id, { transport: e.target.value }))} style={roInp}>
              <option value="">—</option>{transports.concat(ro.transport && !transports.includes(ro.transport) ? [ro.transport] : []).map(t => <option key={t}>{t}</option>)}
            </select>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── The Customer OK card (top of the Jobs tab until the customer approves) ───
// Shows the whole estimate (labor + parts + sublet + tax — what the customer approves, owner Q1 / X4) and today's labor-only figure.
const RoApprovalCard = ({ ro, act, cfg, ok, next, readOnly, onEsign, flash, cardRef, phone }) => {
  const est = roEstFor(ro);
  const money = DMS.roMoney ? DMS.roMoney(ro) : null;
  const shows = (cfg && cfg.ro && cfg.ro.texts.approvalAmount) || "labor";
  const whole = money ? money.total : 0;
  const labor = (+est.approved || 0) + (+est.pending || 0);
  const [hi, setHi] = React.useState(false);
  React.useEffect(() => { if (!flash) return; setHi(true); const t = setTimeout(() => setHi(false), 1600); return () => clearTimeout(t); }, [flash]);
  const sent = ro.signRequest && ro.signRequest.status === "sent";
  const phoneNo = ro.cust && ro.cust.phone;
  const okBy = (method) => { roOkWholeJobs(ro.id, shows); const r = act(DMS.authorizeRO(ro.id, { method, by: ro.customer, shown: shows })); if (r && r.ok) roAutoMove(ro.id, "ok"); };
  const fig = (key, title, amt, sub2, isNew) => (
    <div data-ro-auth-fig={key} style={{ flex: "1 1 200px", minWidth: 0, border: "1px solid " + (shows === key ? "#9CC2EA" : "var(--jb-border)"), background: shows === key ? "#EEF5FD" : "var(--jb-surface)", borderRadius: 8, padding: "8px 12px" }}>
      <div style={{ ...roLbl, display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }}>{title}{isNew ? <span style={{ background: "#1456A0", color: "#fff", borderRadius: 99, padding: "0 6px", fontSize: 12 }}>NEW</span> : null}</div>
      <div {...(key === "whole" ? { "data-ro-auth-est": "1" } : {})} style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 18, color: "var(--jb-navy)" }}>{roM$(amt)}</div>
      <div style={{ fontSize: 12, color: "var(--jb-text-dim)" }}>{sub2}</div>
      {shows === key && <div style={{ fontSize: 12, fontWeight: 700, color: "#1456A0", marginTop: 2 }}>✓ the customer approves this figure</div>}
    </div>
  );
  return (
    <div ref={cardRef} data-ro-approval="1" style={{ border: "1px solid " + (hi ? "#E8B820" : "#F0DBA8"), background: "#FFFBEF", borderRadius: "var(--jb-r)", padding: "10px 14px", boxShadow: hi ? "0 0 0 3px rgba(232,184,32,.35)" : "none", transition: "box-shadow .3s" }}>
      <div style={{ display: "flex", gap: 10, alignItems: "baseline", flexWrap: "wrap" }}>
        <b style={{ fontSize: 14, color: "#7A4F00" }}>⚠ Customer OK needed{ok.given ? " for the added work" : " before work starts"}</b>
        <span style={{ flex: 1 }} />
        <span style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>{phoneNo ? "📞 " + phoneNo + " · " : ""}Approved {roM$(est.approved)} · Pending {roM$(est.pending)} · Declined {roM$(est.declined)} <span style={{ color: "var(--jb-text-muted)" }}>(labor)</span></span>
      </div>
      <div style={{ display: "flex", gap: 10, marginTop: 8, flexWrap: "wrap", alignItems: "stretch" }}>
        {fig("whole", "Whole estimate", whole, money ? `labor ${roM$(money.labor)} + parts ${roM$(money.parts)}${money.sublet ? " + sublet " + roM$(money.sublet) : ""}${money.fees ? " + fees " + roM$(money.fees) : ""} + tax ${roM$(money.tax)}` : "", true)}
        {fig("labor", "Labor only", labor, "what the e-sign page showed before RC32")}
        {!readOnly && (
          <div style={{ display: "flex", flexDirection: phone ? "row" : "column", gap: 6, flex: phone ? "1 1 100%" : "0 0 auto", flexWrap: "wrap" }}>
            <RoBtn data-ro-ok-esign="1" onClick={onEsign} style={{ background: "var(--jb-navy, #1B66A8)", color: "#fff", fontWeight: 700, minHeight: phone ? 44 : 34, flex: phone ? "1 1 100%" : undefined }}>✎ Send e-sign</RoBtn>
            <RoBtn data-ro-ok-phone="1" onClick={() => okBy("phone")} style={{ minHeight: phone ? 44 : 32, flex: phone ? 1 : undefined }}>📞 OK by phone</RoBtn>
            <RoBtn data-ro-ok-person="1" onClick={() => okBy("in-person")} style={{ minHeight: phone ? 44 : 32, flex: phone ? 1 : undefined }}>🤝 OK in person</RoBtn>
          </div>
        )}
      </div>
      {(sent || (next && next.alt && !readOnly)) && (
        <div style={{ display: "flex", gap: 10, alignItems: "center", marginTop: 8, flexWrap: "wrap" }}>
          {sent && <span style={{ fontSize: 12.5, color: "#1456A0" }}>Sign request sent ({ro.signRequest.via}{ro.signRequest.sentAt ? " " + roTime(ro.signRequest.sentAt) : ""}) — waiting for the signature</span>}
          <span style={{ flex: 1 }} />
          {next && next.alt && !readOnly && <RoBtn small data-ro-next-alt={next.alt.key} onClick={() => roSay(DMS.svcMoveTo(ro.id, next.alt.target))} title="A diagnosis visit can go to the shop before the OK">{next.alt.label}</RoBtn>}
        </div>
      )}
    </div>
  );
};
// One slim line once the customer said OK (Write-up / Waiting)
const RoOkLine = ({ ro, ok }) => {
  const a = ro.authorization || {};
  return (
    <div data-ro-ok-line="1" style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", border: "1px solid #BFE6C7", background: "#F0FBF1", borderRadius: "var(--jb-r)", padding: "6px 12px", fontSize: 12.5, color: "#0E7A37" }}>
      <b>✓ Repairs authorized</b>
      <span style={{ color: "var(--jb-text-dim)" }}>{a.method === "esign" ? "e-signed" : a.method} by {a.by} · {a.at ? new Date(a.at).toLocaleString() : ""}{a.estimate && a.estimate.total != null ? " · " + roM$(a.estimate.total) + (a.estimate.shown === "labor" ? " (labor)" : " (whole estimate)") : a.amount != null ? " · " + roM$(a.amount) + " (labor)" : ""}</span>
    </div>
  );
};
// "In the shop": who is on which job (In progress) — for when the customer calls
const RoShopCard = ({ ro, techs, cfg }) => {
  const live = roLive(ro);
  const subs = ro.sublets || [];
  return (
    <div data-ro-shop="1" style={{ ...roCardBox, padding: "8px 12px" }}>
      <div style={{ display: "flex", gap: 8, alignItems: "baseline" }}><b style={{ fontSize: 13.5, color: "var(--jb-navy)" }}>🔧 In the shop</b><span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>who is on what, for when the customer calls</span></div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 8, marginTop: 6 }}>
        {live.map((j) => {
          const n = (ro.ops || []).indexOf(j) + 1;
          const t = (techs.find(x => x.id === j.techId) || {}).name || "no technician yet";
          return (
            <div key={j.id} style={{ border: "1px solid var(--jb-border)", borderRadius: 8, padding: "6px 10px" }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>Job {n} · {j.desc || j.op}</div>
              <div style={{ fontSize: 12.5, color: j.status === "HOLD" ? "#B23A2E" : "var(--jb-text-dim)" }}>{t} · {roStatusWord(j.status || "PEND", cfg)}{j.status === "HOLD" && j.holdReason ? " · " + j.holdReason : ""}</div>
            </div>
          );
        })}
        {subs.map(s => (
          <div key={s.id} style={{ border: "1px dashed var(--jb-border)", borderRadius: 8, padding: "6px 10px" }}>
            <div style={{ fontSize: 13, fontWeight: 700 }}>Sublet · {s.vendor}</div>
            <div style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>{s.desc}{s.po ? " · PO " + s.po : ""}{s.due ? " · due " + s.due : ""}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─── Jobs tab ────────────────────────────────────────────────────────────
// Customer OK card first (until approved), "In the shop" while in progress, the add-work row (+ Standard job… · Bulk oil · + More ▾ ·
// New jobs go to), then the jobs — one line each (R12 "fold"); the job being priced / worked opens by itself; "keep every job open"
// (R12 "open") shows today's full cards. The other-parts and sublet panels stay in the page (hidden while empty).
const RoJobsTab = ({ ro, techs, parts, act, go, readOnly, cfg, phone, dense, group, ok, next, aged, days, approvalRef, okFlash, stdSignal, onEsign, myView, saveMyView }) => {
  const [modal, setModal] = React.useState(null);
  const [addMore, setAddMore] = React.useState(false);
  const jobs = ro.ops || [];
  const closed = ro.status === "Closed";
  const loose = (ro.partsLines || []).filter(l => l.jobId == null || !jobs.some(o => String(o.id) === String(l.jobId)));
  const looseSub = (ro.sublets || []).filter(l => l.jobId == null || !jobs.some(o => String(o.id) === String(l.jobId)));
  const defPay = DMS.svcDefaultPayType ? DMS.svcDefaultPayType(ro) : (ro.payType === "Internal" || ro.recon ? "Internal" : "Customer");
  const Recon = window.ReconBudgetPanel;
  const aw = (cfg.ro && cfg.ro.layout.addWork) || { bulkOil: "on", laborOp: true, blankJob: true };
  const hasTank = (() => { try { return !!(DMS.bulkOilStatus && DMS.bulkOilStatus().length); } catch (e) { return false; } })();
  const showOil = aw.bulkOil === "on" || (aw.bulkOil === "auto" && hasTank);
  const opsCat = (cfg.money && cfg.money.opCatalog) || { on: true, ops: SVC_OP_CATALOG };
  const showOp = aw.laborOp !== false && opsCat.on !== false;
  const blank = (cfg.ro && cfg.ro.lists.blankJob) || { op: "LABOR", desc: "New job", hrs: 1 };
  const how = (cfg.ro && cfg.ro.lists.newJobTech) || "ro";
  const newTech = roNewJobTech(ro, cfg);
  const fold = !(cfg.ro && cfg.ro.layout.jobRows === "open");
  const pricing = group === "writeup" || group === "waiting";
  // the job that opens by itself: the first one being priced (not approved yet) in Write-up / Waiting, the one worked in In progress
  const live = roLive(ro);
  const autoOpen = pricing ? (live.find(j => j.approval !== "approved") || null) : group === "progress" ? (live.find(j => j.status === "ACTIVE") || live.find(j => j.status !== "DONE") || null) : null;
  const remember = !(myView && myView.remember === false);
  const [openMap, setOpenMap] = React.useState({});
  const isOpen = (j) => { if (openMap[j.id] != null) return openMap[j.id]; const k = ro.id + ":" + j.id; if (remember && myView && myView.open && myView.open[k] != null) return myView.open[k]; return !!autoOpen && autoOpen.id === j.id; };
  const toggle = (j) => { const v = !isOpen(j); setOpenMap(m => ({ ...m, [j.id]: v })); if (remember && saveMyView) saveMyView({ open: { [ro.id + ":" + j.id]: v } }); };
  React.useEffect(() => { if (stdSignal) setModal({ t: "std" }); }, [stdSignal]);
  const showApproval = !closed && live.length > 0 && ok.needed && group !== "ready";
  const addBlank = () => act(DMS.addROJob(ro.id, { op: blank.op, desc: blank.desc, hrs: blank.hrs, payType: defPay, techId: newTech }));
  const moreItems = [
    showOp && { k: "op", label: "Labor op…", run: () => setModal({ t: "op" }) },
    aw.blankJob !== false && { k: "blank", label: "Blank job", run: addBlank, hook: { "data-ro-add-job": "1" } },
    { k: "part", label: "Part not tied to a job…", run: () => setModal({ t: "part", jobId: null }) },
    { k: "sublet", label: "Sublet / outside work…", run: () => setModal({ t: "sublet", jobId: null }), hook: { "data-ro-add-sublet": "1" } },
  ].filter(Boolean);
  const btnH = phone ? { minHeight: 44 } : {};
  return (
    <>
      {aged && <div style={{ fontSize: 12.5, color: "#B23A2E", fontWeight: 700 }}>⏱ This RO has been open {days} days — aged ROs tie up work-in-process cash; close it once the work is done.</div>}
      {Recon && <Recon ro={ro} go={go} />}
      {showApproval && <RoApprovalCard ro={ro} act={act} cfg={cfg} ok={ok} next={next} readOnly={readOnly} onEsign={onEsign} flash={okFlash} cardRef={approvalRef} phone={phone} />}
      {!closed && ok.given && !showApproval && pricing && <RoOkLine ro={ro} ok={ok} />}
      {group === "progress" && live.length > 0 && <RoShopCard ro={ro} techs={techs} cfg={cfg} />}
      <div data-ro-addwork="1" style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }}>
        <span style={{ ...roLbl, fontSize: 12 }}>Jobs on this RO</span>
        {/* RC32 fix (r32-aud L5): the labor approved / pending / declined stays in view at every step once the OK card is gone
            (RC31 showed it on Customer & Vehicle) — the declined total is the follow-up call list */}
        {!showApproval && jobs.length > 0 && (() => { const e = roEstFor(ro); if (phone && !(e.pending > 0.005 || e.declined > 0.005)) return null;
          return <span data-ro-auth-totals="1" style={{ fontSize: 12, color: "var(--jb-text-dim)" }}>Labor: approved <b style={{ fontFamily: "var(--jb-mono)" }}>{roM$(e.approved)}</b>{e.pending > 0.005 ? <> · pending <b style={{ fontFamily: "var(--jb-mono)" }}>{roM$(e.pending)}</b></> : null}{e.declined > 0.005 ? <> · declined <b style={{ fontFamily: "var(--jb-mono)", color: "#B23A2E" }}>{roM$(e.declined)}</b></> : null}</span>; })()}
        <div style={{ flex: 1 }} />
        {!readOnly && how !== "none" && (
          <span style={{ display: "inline-flex", gap: 6, alignItems: "center", fontSize: 12.5, color: "var(--jb-text-dim)" }}>New jobs go to
            {how === "ro"
              ? <select data-ro-newjobs-tech="1" value={ro.techId || ""} onChange={(e) => act(DMS.updateRODetail(ro.id, { techId: e.target.value }))} style={{ ...roInp, width: "auto", minWidth: 120, padding: "4px 6px", ...btnH }}><option value="">— unassigned —</option>{techs.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}</select>
              : <b>{(techs.find(t => t.id === newTech) || {}).name || "the next tech up"}</b>}
          </span>
        )}
        {!readOnly && <>
          <RoBtn small data-ro-add-std="1" onClick={() => setModal({ t: "std" })} style={{ background: group === "writeup" ? "var(--jb-yellow)" : undefined, fontWeight: 700, ...btnH }}>+ Standard job…</RoBtn>
          {showOil && <RoBtn small onClick={() => setModal({ t: "oil" })} style={btnH}>🛢 Bulk oil</RoBtn>}
          <span style={{ position: "relative", display: "inline-flex" }}>
            <RoBtn small data-ro-add-more="1" onClick={() => setAddMore(o => !o)} style={btnH}>+ More ▾</RoBtn>
            <span role="menu" style={{ display: addMore ? "flex" : "none", position: "absolute", right: 0, top: "calc(100% + 4px)", zIndex: 25, minWidth: 220, flexDirection: "column", background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: 8, boxShadow: "var(--jb-shadow)", padding: 4 }}>
              {moreItems.map(m => <button key={m.k} type="button" role="menuitem" data-ro-add-item={m.k} {...(m.hook || {})} onClick={() => { setAddMore(false); m.run(); }}
                                           style={{ textAlign: "left", border: 0, background: "transparent", padding: "8px 12px", minHeight: phone ? 44 : 32, fontSize: 13.5, cursor: "pointer", borderRadius: 6, fontFamily: "var(--jb-font)", color: "var(--jb-text)" }}>{m.label}</button>)}
            </span>
          </span>
        </>}
      </div>
      {jobs.length === 0 && <div style={{ ...roCardBox, padding: 16, fontSize: 13, color: "var(--jb-text-muted)" }}>No jobs yet. Add a standard job, a labor op, or a blank job.</div>}
      {fold
        ? jobs.map((o, i) => <RoJobRow key={o.id} ro={ro} job={o} n={i + 1} techs={techs} act={act} readOnly={readOnly} cfg={cfg} phone={phone} dense={dense} pricing={pricing}
                                       open={isOpen(o)} onToggle={() => toggle(o)} onAddPart={() => setModal({ t: "part", jobId: o.id })} onAddSublet={() => setModal({ t: "sublet", jobId: o.id })} />)
        : jobs.map((o, i) => <RoJobCard key={o.id} ro={ro} job={o} n={i + 1} techs={techs} act={act} readOnly={readOnly} cfg={cfg} onAddPart={() => setModal({ t: "part", jobId: o.id })} onAddSublet={() => setModal({ t: "sublet", jobId: o.id })} />)}
      {/* kept in the page; shown when it has lines (or always in today's look R12 "open" for an advisor, as RC31) */}
      <div style={{ ...roCardBox, display: loose.length > 0 || (!fold && !readOnly) ? undefined : "none" }}>
        <JBPanelHead right={!readOnly && <button className="k2b-button small" onClick={() => setModal({ t: "part", jobId: null })}>+ Part</button>}>Other parts (not tied to a job)</JBPanelHead>
        <RoPartsTable ro={ro} lines={loose} parts={parts} act={act} readOnly={readOnly} />
      </div>
      <div style={{ ...roCardBox, display: looseSub.length > 0 || (!fold && !readOnly) ? undefined : "none" }}>
        <JBPanelHead right={!readOnly && <button className="k2b-button small" onClick={() => setModal({ t: "sublet", jobId: null })}>+ Sublet</button>}>Sublet / outside work</JBPanelHead>
        <RoSubletTable ro={ro} act={act} readOnly={readOnly} keepHead={true} />
      </div>
      {modal && modal.t === "std" && <RoStdJobModal ro={ro} techs={techs} act={act} defPay={defPay} defTech={newTech} onClose={() => setModal(null)} />}
      {modal && modal.t === "op" && <AddOpModal ro={ro} act={act} defPay={defPay} defTech={newTech} cfg={cfg} onClose={() => setModal(null)} />}
      {modal && modal.t === "oil" && <RoBulkOilModal ro={ro} act={act} cfg={cfg} onClose={() => setModal(null)} />}
      {modal && modal.t === "part" && <AddPartModal ro={ro} parts={parts} act={act} onClose={() => setModal(null)}
                                                    onPick={(p) => act(DMS.addROJobPart(ro.id, modal.jobId, { part: p.part, qty: 1 }))} />}
      {modal && modal.t === "sublet" && <RoSubletModal ro={ro} jobId={modal.jobId} act={act} cfg={cfg} onClose={() => setModal(null)} />}
    </>
  );
};

// One job, folded to one line (number · what · op · std tag · complaint | tech | status words | Approve / Decline | total).
// The body stays in the page (hidden while folded — the tests read the "Sublet vendor" header with textContent).
const RoJobRow = ({ ro, job, n, techs, act, readOnly, cfg, phone, dense, pricing, open, onToggle, onAddPart, onAddSublet }) => {
  const o = job;
  const up = (patch) => act(DMS.updateROJob(ro.id, o.id, patch));
  const ap = o.approval || "pending";
  const declined = ap === "declined";
  const t = APPROVAL_TONE[ap] || APPROVAL_TONE.pending;
  const tone = RO_PAY_TYPE_TONE[o.payType || ro.payType || "Customer"] || "#1B66A8";
  const jparts = (ro.partsLines || []).filter(l => l.jobId != null && String(l.jobId) === String(o.id));
  const jsub = (ro.sublets || []).filter(l => l.jobId != null && String(l.jobId) === String(o.id));
  const partsTotal = jparts.reduce((s, l) => s + (+l.sale || 0) * (+l.qty || 0), 0) + jsub.reduce((s, l) => s + (+l.sale || 0) * (l.qty == null ? 1 : +l.qty || 0), 0);
  const tName = (techs.find(x => x.id === o.techId) || {}).name || "";
  const mode = o.rateMode || "flat";
  const statusWord = roStatusWord(o.status || "PEND", cfg);
  const holdReasons = (cfg.ro && cfg.ro.lists.holdReasons) || [];
  const threeCs = (cfg.ro && cfg.ro.layout.threeCs) || "both";
  const [all, setAll] = React.useState(false);
  const [laborEdit, setLaborEdit] = React.useState(false);
  const [showParts, setShowParts] = React.useState(false);
  const show = (on, how) => (on ? (how || undefined) : "none");
  const setStatus = (s) => {
    const r = act(DMS.updateROOp(ro.id, o.id, { status: s }));
    if (r && r.ok !== false) { if (s === "ACTIVE") roAutoMove(ro.id, "working"); if (s === "DONE") roAutoMove(ro.id, "done"); }
  };
  const cell = (label, node, w) => (<label style={{ display: "flex", flexDirection: "column", gap: 3, minWidth: 0, flex: w || "1 1 120px" }}><span style={roLbl}>{label}</span>{node}</label>);
  const cBox = (k, label, color, ph, prints) => (
    <label key={k} style={{ display: "flex", flexDirection: "column", gap: 3, minWidth: 0 }}>
      <span style={{ display: "flex", gap: 6, alignItems: "center" }}><span style={{ ...roLbl, color }}>{label}</span>{prints ? <RoPill tone="print">prints</RoPill> : <RoPill tone="internal">never prints</RoPill>}</span>
      {readOnly ? <RoTextView value={o[k]} /> : <RoLazyText multiline rows={2} dataKey={`job-${k}-${n}`} value={o[k] || ""} placeholder={ph} onCommit={(x) => act(DMS.setOpDiagnosis(ro.id, o.id, { [k]: x }))} style={k === "techNotes" ? { background: "#FFF8F6" } : undefined} />}
    </label>
  );
  const laborFields = (
    <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "flex-end" }}>
      {cell("Op code", <RoLazyText dataKey={`job-op-${n}`} value={o.op} disabled={readOnly} onCommit={(x) => up({ op: x.toUpperCase() })} style={{ fontFamily: "var(--jb-mono)", fontWeight: 700 }} />, "0 1 130px")}
      {cell("Description", <RoLazyText dataKey={`job-desc-${n}`} value={o.desc} disabled={readOnly} onCommit={(x) => up({ desc: x })} />, "1 1 200px")}
      {cell("Pay type", <select data-ro-job-pay={n} disabled={readOnly} value={o.payType || ro.payType || "Customer"} onChange={(e) => up({ payType: e.target.value })} style={{ ...roInp, color: tone, fontWeight: 700 }}>{(DMS.SVC_JOB_PAY_TYPES || ["Customer", "Warranty", "Internal"]).map(p => <option key={p}>{p}</option>)}</select>, "1 1 150px")}
      {cell("Hours", <RoLazyText dataKey={`job-hrs-${n}`} value={o.hrs} disabled={readOnly} onCommit={(x) => up({ hrs: parseFloat(x) || 0 })} style={{ textAlign: "right", fontFamily: "var(--jb-mono)" }} />, "0 1 80px")}
      {cell("Pricing", <select disabled={readOnly} value={mode} onChange={(e) => up({ rateMode: e.target.value, ...(e.target.value === "flat" ? { flat: o.lab } : {}) })} style={roInp}><option value="rate">Hours × rate</option><option value="flat">Flat</option></select>, "1 1 120px")}
      {mode === "rate"
        ? cell("Rate $/hr", <RoLazyText dataKey={`job-rate-${n}`} value={o.rate != null ? o.rate : ""} disabled={readOnly} onCommit={(x) => up({ rate: parseFloat(x) || 0 })} style={{ textAlign: "right", fontFamily: "var(--jb-mono)" }} />, "0 1 100px")
        : cell("Flat $", <RoLazyText dataKey={`job-flat-${n}`} value={o.flat != null ? o.flat : o.lab} disabled={readOnly} onCommit={(x) => up({ flat: parseFloat(x) || 0 })} style={{ textAlign: "right", fontFamily: "var(--jb-mono)" }} />, "0 1 100px")}
    </div>
  );
  const laborSummary = mode === "rate" ? `${(+o.hrs || 0).toFixed(1)} h × ${roM$(o.rate)} = ${roM$(o.lab)} · ${o.payType || ro.payType || "Customer"}` : `Flat ${roM$(o.lab)} (${(+o.hrs || 0).toFixed(1)} h) · ${o.payType || ro.payType || "Customer"}`;
  const statusSel = (
    <select disabled={readOnly} value={o.status || "PEND"} onChange={(e) => setStatus(e.target.value)} data-ro-job-status={n}
            style={{ ...roInp, fontWeight: 700, color: OP_STATUS_TONE[o.status || "PEND"], minHeight: phone ? 44 : undefined }}>
      {["PEND", "ACTIVE", "DONE", "HOLD"].map(s => <option key={s} value={s}>{roStatusWord(s, cfg)}</option>)}
    </select>
  );
  const showLabor = all || (pricing && !readOnly) || laborEdit;
  const showStatus = all || !pricing;
  const cPricing = threeCs !== "notes" && !all;
  const showComplaint = all || (cPricing && pricing);
  const showWork = all || (cPricing && !pricing);
  const showTables = all || pricing || showParts;
  const statusPill = <span style={{ fontSize: 12, fontWeight: 800, color: OP_STATUS_TONE[o.status || "PEND"], background: "var(--jb-surface-2)", borderRadius: 6, padding: "2px 8px", whiteSpace: "nowrap" }}>{statusWord}{o.status === "HOLD" && o.holdReason ? " · " + o.holdReason : ""}</span>;
  const approveBtns = !readOnly && ap === "pending" ? (
    <span style={{ display: "inline-flex", gap: 4 }}>
      <RoBtn small data-ro-job-approve={n} onClick={() => act(DMS.setOpApproval(ro.id, o.id, "approved"))} style={{ color: "#0E7A37", minHeight: phone ? 40 : undefined }}>✓ Approve</RoBtn>
      <RoBtn small data-ro-job-decline={n} onClick={() => act(DMS.setOpApproval(ro.id, o.id, "declined"))} style={{ color: "#B23A2E", minHeight: phone ? 40 : undefined }}>✕ Decline</RoBtn>
    </span>
  ) : <span style={{ background: t.bg, color: t.fg, borderRadius: 999, padding: "2px 9px", fontSize: 12, fontWeight: 700, whiteSpace: "nowrap" }}>{t.label}</span>;
  const [menu, setMenu] = React.useState(false);
  return (
    <div data-ro-job={o.id} style={{ ...roCardBox, boxShadow: "inset 4px 0 0 " + tone, opacity: declined ? 0.6 : 1 }}>
      <div style={{ display: "flex", gap: 8, alignItems: "center", padding: dense ? "5px 10px 5px 12px" : (phone ? "8px 10px 8px 12px" : "7px 12px"), flexWrap: phone ? "wrap" : "nowrap", minHeight: phone ? 44 : undefined }}>
        <button type="button" data-ro-job-row={n} onClick={onToggle} aria-expanded={!!open}
                style={{ display: "flex", gap: 8, alignItems: "center", flex: "1 1 220px", minWidth: 0, textAlign: "left", border: 0, background: "transparent", padding: 0, cursor: "pointer", fontFamily: "var(--jb-font)", color: "var(--jb-text)", minHeight: phone ? 40 : 32 }}>
          <span style={{ color: "var(--jb-text-muted)", fontSize: 12, width: 12 }}>{open ? "▾" : "▸"}</span>
          <b style={{ fontFamily: "var(--jb-mono)", color: "var(--jb-navy)", fontSize: 13 }}>{n}</b>
          <span style={{ minWidth: 0, flex: 1 }}>
            <span style={{ display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              <b style={{ fontSize: 13.5, textDecoration: declined ? "line-through" : "none" }}>{o.desc || "Job " + n}</b>
              <span style={{ fontFamily: "var(--jb-mono)", fontSize: 12, color: "var(--jb-text-muted)", marginLeft: 6 }}>{o.op}</span>
              {o.stdJobId && <span style={{ marginLeft: 6 }}><RoPill tone="info" title="Copied from a standard job — edits here change only this RO">std job</RoPill></span>}
            </span>
            <span style={{ display: "block", fontSize: 12.5, color: "var(--jb-text-dim)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {o.complaint ? "“" + String(o.complaint).split("\n")[0] + "”" : ""}{o.complaint && (jparts.length || jsub.length) ? " · " : ""}{jparts.length ? jparts.length + " part" + (jparts.length === 1 ? "" : "s") : ""}{jparts.length && jsub.length ? " · " : ""}{jsub.length ? jsub.length + " sublet" : ""}
            </span>
          </span>
        </button>
        {!phone && (readOnly || declined
          ? <span style={{ fontSize: 12.5, color: "var(--jb-text-dim)", whiteSpace: "nowrap", minWidth: 110 }}>👤 {tName || "—"}</span>
          : <select data-ro-job-tech={n} value={o.techId || ""} onChange={(e) => up({ techId: e.target.value })} title="Technician" style={{ ...roInp, width: 140, flex: "0 0 140px", padding: "4px 6px" }}><option value="">— unassigned —</option>{techs.map(x => <option key={x.id} value={x.id}>{x.name}</option>)}</select>)}
        {phone && <span style={{ fontSize: 12.5, color: "var(--jb-text-dim)", whiteSpace: "nowrap" }}>👤 {tName || "—"}</span>}
        {!declined && statusPill}
        {approveBtns}
        <b style={{ fontFamily: "var(--jb-mono)", fontSize: 13.5, color: "var(--jb-navy)", minWidth: 84, textAlign: "right", marginLeft: phone ? "auto" : undefined }}>{roM$((+o.lab || 0) + partsTotal)}</b>
        {!readOnly && (
          <span style={{ position: "relative", display: "inline-flex" }}>
            <button type="button" title="More for this job" data-ro-job-menu={n} onClick={() => setMenu(m => !m)} style={{ ...iconBtn, width: phone ? 40 : 28, height: phone ? 40 : 28 }}>⋯</button>
            <span role="menu" style={{ display: menu ? "flex" : "none", position: "absolute", right: 0, top: "100%", zIndex: 20, minWidth: 170, flexDirection: "column", background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: 8, boxShadow: "var(--jb-shadow)", padding: 4 }}>
              {ap !== "pending" && <button type="button" role="menuitem" onClick={() => { setMenu(false); act(DMS.setOpApproval(ro.id, o.id, "pending")); }} style={{ textAlign: "left", border: 0, background: "transparent", padding: "8px 12px", cursor: "pointer", fontSize: 13 }}>Back to pending</button>}
              <button type="button" role="menuitem" data-ro-job-remove={n} onClick={() => { setMenu(false); if (window.confirm(`Remove job ${n} (${o.op}) and its parts from ${ro.id}?`)) act(DMS.removeROJob(ro.id, o.id)); }} style={{ textAlign: "left", border: 0, background: "transparent", padding: "8px 12px", cursor: "pointer", fontSize: 13, color: "#B23A2E" }}>Remove job</button>
            </span>
          </span>
        )}
      </div>
      <div data-ro-job-open={o.id} style={{ display: open ? undefined : "none", borderTop: "1px dashed var(--jb-border)", padding: phone ? "8px 10px 10px" : "8px 12px 10px 34px" }}>
        {phone && !readOnly && !declined && <div style={{ marginBottom: 8 }}>{cell("Technician", <select data-ro-job-tech-phone={n} value={o.techId || ""} onChange={(e) => up({ techId: e.target.value })} style={{ ...roInp, minHeight: 44 }}><option value="">— unassigned —</option>{techs.map(x => <option key={x.id} value={x.id}>{x.name}</option>)}</select>)}</div>}
        <div style={{ display: show(showLabor), marginBottom: 8 }}>{laborFields}</div>
        <div style={{ display: show(!showLabor, "flex"), marginBottom: 8, alignItems: "center", gap: 8, flexWrap: "wrap" }}>
          <span style={{ ...roLbl }}>Labor</span>
          <span style={{ fontSize: 13, fontFamily: "var(--jb-mono)", border: "1px solid var(--jb-border)", borderRadius: 6, padding: "4px 10px", background: "var(--jb-surface-2)" }}>{laborSummary}</span>
          {!readOnly && <RoBtn small onClick={() => setLaborEdit(true)}>Change</RoBtn>}
        </div>
        <div style={{ display: show(showStatus, "flex"), gap: 10, flexWrap: "wrap", alignItems: "flex-end", marginBottom: 8 }}>
          {cell("Status", readOnly ? <RoTextView value={statusWord} /> : statusSel, "0 1 170px")}
          {(o.status === "HOLD" || o.holdReason) && cell("On hold because", readOnly ? <RoTextView value={o.holdReason} empty="—" /> : (
            <select data-ro-job-hold={n} value={o.holdReason || ""} onChange={(e) => act(DMS.updateROOp(ro.id, o.id, { holdReason: e.target.value }))} style={{ ...roInp, minHeight: phone ? 44 : undefined }}>
              <option value="">— why? —</option>{holdReasons.concat(o.holdReason && !holdReasons.includes(o.holdReason) ? [o.holdReason] : []).map(h => <option key={h}>{h}</option>)}
            </select>), "1 1 220px")}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: phone ? "minmax(0, 1fr)" : "repeat(auto-fit, minmax(220px, 1fr))", gap: 10, marginBottom: 8 }}>
          <div style={{ display: show(showComplaint) }}>{cBox("complaint", "Complaint", "#1456A0", "What the customer reports…", true)}</div>
          <div style={{ display: show(showWork) }}>{cBox("cause", "Cause", "#9A6700", "Root cause found…", true)}</div>
          <div style={{ display: show(showWork) }}>{cBox("correction", "Correction", "#0E7A37", "Repair performed…", true)}</div>
          <div style={{ display: show(showWork) }}>{cBox("techNotes", "Tech notes", "var(--jb-text-muted)", "Measurements, torque specs, recommendations…", false)}</div>
          {all && cPricing === false && threeCs === "notes" ? null : null}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", border: "1px dashed var(--jb-border)", borderRadius: 8, padding: "5px 10px", fontSize: 12.5 }}>
          <span style={{ flex: 1, minWidth: 0, color: "var(--jb-text-dim)" }}>📦 {jparts.length} part{jparts.length === 1 ? "" : "s"}{jparts.length ? " · " + jparts.slice(0, 2).map(l => `${l.desc || l.part} × ${l.qty}`).join(" · ") : ""}{jsub.length ? ` · ${jsub.length} sublet` : ""}{partsTotal ? " · " + roM$(partsTotal) : ""}</span>
          {!pricing && !all && (jparts.length > 0 || jsub.length > 0) && <RoBtn small onClick={() => setShowParts(s => !s)}>{showParts ? "Hide parts" : "Show parts"}</RoBtn>}
          {!readOnly && !declined && <RoBtn small data-ro-job-addpart={n} onClick={onAddPart}>+ Part</RoBtn>}
          {!readOnly && !declined && <RoBtn small onClick={onAddSublet}>+ Sublet</RoBtn>}
          <RoBtn small data-ro-job-all={n} onClick={() => setAll(a => !a)} style={{ color: "var(--jb-blue)" }}>{all ? "Fewer fields" : "All fields"}</RoBtn>
        </div>
        <div style={{ display: show(showTables && (jparts.length > 0 || jsub.length > 0)), marginTop: 6 }}>
          {jparts.length > 0 && <RoPartsTable ro={ro} lines={jparts} act={act} readOnly={readOnly} />}
          {jsub.length > 0 && <RoSubletTable ro={ro} lines={jsub} act={act} readOnly={readOnly} />}
        </div>
      </div>
    </div>
  );
};

// Today's full job card (R12 "open" — "Back to today's look")
const RoJobCard = ({ ro, job, n, techs, act, readOnly, cfg, onAddPart, onAddSublet }) => {
  const o = job;
  const up = (patch) => act(DMS.updateROJob(ro.id, o.id, patch));
  const ap = o.approval || "pending";
  const t = APPROVAL_TONE[ap] || APPROVAL_TONE.pending;
  const tone = RO_PAY_TYPE_TONE[o.payType || ro.payType || "Customer"] || "#1B66A8";
  const jparts = (ro.partsLines || []).filter(l => l.jobId != null && String(l.jobId) === String(o.id));
  const jsub = (ro.sublets || []).filter(l => l.jobId != null && String(l.jobId) === String(o.id));
  const mode = o.rateMode || "flat";
  const cell = (label, node, w) => (<label style={{ display: "flex", flexDirection: "column", gap: 3, minWidth: 0, flex: w || "1 1 120px" }}><span style={roLbl}>{label}</span>{node}</label>);
  const partsTotal = jparts.reduce((s, l) => s + (+l.sale || 0) * (+l.qty || 0), 0) + jsub.reduce((s, l) => s + (+l.sale || 0) * (l.qty == null ? 1 : +l.qty || 0), 0);
  const setStatus = (s) => { const r = act(DMS.updateROOp(ro.id, o.id, { status: s })); if (r && r.ok !== false) { if (s === "ACTIVE") roAutoMove(ro.id, "working"); if (s === "DONE") roAutoMove(ro.id, "done"); } };
  return (
    <div data-ro-job={o.id} style={{ ...roCardBox, boxShadow: "inset 4px 0 0 " + tone }}>
      <div style={{ display: "flex", gap: 8, alignItems: "center", padding: "8px 12px", background: "var(--jb-surface-2)", borderBottom: "1px solid var(--jb-border)", flexWrap: "wrap" }}>
        <b style={{ fontFamily: "var(--jb-mono)", color: "var(--jb-navy)" }}>Job {n}</b>
        <div style={{ width: 130 }}><RoLazyText dataKey={`job-op-${n}`} value={o.op} disabled={readOnly} onCommit={(x) => up({ op: x.toUpperCase() })} style={{ fontFamily: "var(--jb-mono)", fontWeight: 700 }} /></div>
        <div style={{ flex: "1 1 200px", minWidth: 160 }}><RoLazyText dataKey={`job-desc-${n}`} value={o.desc} disabled={readOnly} onCommit={(x) => up({ desc: x })} /></div>
        {o.stdJobId && <RoPill tone="info" title="Copied from a standard job — edits here change only this RO">from std job</RoPill>}
        <span style={{ background: t.bg, color: t.fg, borderRadius: 999, padding: "2px 9px", fontSize: 12, fontWeight: 700 }}>{t.label}</span>
        {!readOnly && <button onClick={() => { if (window.confirm(`Remove job ${n} (${o.op}) and its parts from ${ro.id}?`)) act(DMS.removeROJob(ro.id, o.id)); }} title="Remove job" style={iconBtn}>×</button>}
      </div>
      <div style={{ padding: "10px 12px", display: "flex", gap: 10, flexWrap: "wrap", alignItems: "flex-end" }}>
        {cell("Technician", <select data-ro-job-tech={n} disabled={readOnly} value={o.techId || ""} onChange={(e) => up({ techId: e.target.value })} style={roInp}><option value="">— unassigned —</option>{techs.map(x => <option key={x.id} value={x.id}>{x.name}</option>)}</select>, "1 1 150px")}
        {cell("Pay type", <select data-ro-job-pay={n} disabled={readOnly} value={o.payType || ro.payType || "Customer"} onChange={(e) => up({ payType: e.target.value })} style={{ ...roInp, color: tone, fontWeight: 700 }}>{(DMS.SVC_JOB_PAY_TYPES || ["Customer", "Warranty", "Internal"]).map(p => <option key={p}>{p}</option>)}</select>, "1 1 150px")}
        {cell("Hours", <RoLazyText dataKey={`job-hrs-${n}`} value={o.hrs} disabled={readOnly} onCommit={(x) => up({ hrs: parseFloat(x) || 0 })} style={{ textAlign: "right", fontFamily: "var(--jb-mono)" }} />, "0 1 80px")}
        {cell("Pricing", <select disabled={readOnly} value={mode} onChange={(e) => up({ rateMode: e.target.value, ...(e.target.value === "flat" ? { flat: o.lab } : {}) })} style={roInp}><option value="rate">Hours × rate</option><option value="flat">Flat</option></select>, "1 1 120px")}
        {mode === "rate"
          ? cell("Rate $/hr", <RoLazyText dataKey={`job-rate-${n}`} value={o.rate != null ? o.rate : ""} disabled={readOnly} onCommit={(x) => up({ rate: parseFloat(x) || 0 })} style={{ textAlign: "right", fontFamily: "var(--jb-mono)" }} />, "0 1 100px")
          : cell("Flat $", <RoLazyText dataKey={`job-flat-${n}`} value={o.flat != null ? o.flat : o.lab} disabled={readOnly} onCommit={(x) => up({ flat: parseFloat(x) || 0 })} style={{ textAlign: "right", fontFamily: "var(--jb-mono)" }} />, "0 1 100px")}
        {cell("Status", <select disabled={readOnly} value={o.status || "PEND"} onChange={(e) => setStatus(e.target.value)} style={{ ...roInp, fontWeight: 700, color: OP_STATUS_TONE[o.status] }}>{["PEND", "ACTIVE", "DONE", "HOLD"].map(s => <option key={s} value={s}>{roStatusWord(s, cfg)}</option>)}</select>, "0 1 100px")}
        <div style={{ flex: "0 1 150px", textAlign: "right" }}>
          <div style={roLbl}>Labor · parts</div>
          <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 14, color: "var(--jb-navy)" }}>{roM$(o.lab)}{partsTotal ? <span style={{ fontSize: 12, color: "var(--jb-text-dim)", fontWeight: 600 }}> + {roM$(partsTotal)}</span> : null}</div>
        </div>
      </div>
      <div style={{ padding: "0 12px 10px", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", gap: 10 }}>
        {[["complaint", "Complaint", "#1456A0", "What the customer reports…"], ["cause", "Cause (diagnosis)", "#9A6700", "Root cause found…"], ["correction", "Correction (work performed)", "#0E7A37", "Repair performed…"]].map(([k, label, color, ph]) => (
          <label key={k} style={{ display: "flex", flexDirection: "column", gap: 3, minWidth: 0 }}>
            <span style={{ display: "flex", gap: 6, alignItems: "center" }}><span style={{ ...roLbl, color }}>{label}</span><RoPill tone="print">prints</RoPill></span>
            <RoLazyText multiline rows={3} dataKey={`job-${k}-${n}`} value={o[k] || ""} disabled={readOnly} placeholder={ph} onCommit={(x) => act(DMS.setOpDiagnosis(ro.id, o.id, { [k]: x }))} />
          </label>
        ))}
        <label style={{ display: "flex", flexDirection: "column", gap: 3, minWidth: 0, gridColumn: "1 / -1" }}>
          <span style={{ display: "flex", gap: 6, alignItems: "center" }}><span style={roLbl}>Tech notes</span><RoPill tone="internal">internal only — never prints</RoPill></span>
          <RoLazyText multiline rows={2} dataKey={`job-techNotes-${n}`} value={o.techNotes || ""} disabled={readOnly} placeholder="Measurements, torque specs, recommendations…" onCommit={(x) => act(DMS.setOpDiagnosis(ro.id, o.id, { techNotes: x }))} style={{ background: "#FFF8F6" }} />
        </label>
      </div>
      <div style={{ borderTop: "1px solid var(--jb-border)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 12px", background: "var(--jb-surface-2)", flexWrap: "wrap" }}>
          <span style={{ ...roLbl, flex: 1 }}>Parts for job {n}</span>
          {!readOnly && <button className="k2b-button small" data-ro-job-addpart={n} onClick={onAddPart}>+ Part</button>}
          {!readOnly && <button className="k2b-button small" onClick={onAddSublet}>+ Sublet</button>}
          {!readOnly && <>
            <button className="k2b-button small" onClick={() => act(DMS.setOpApproval(ro.id, o.id, "approved"))} style={ap === "approved" ? { background: "var(--jb-green, #16A34A)", color: "#fff", fontWeight: 700 } : {}}>Approve</button>
            <button className="k2b-button small" onClick={() => act(DMS.setOpApproval(ro.id, o.id, "declined"))} style={ap === "declined" ? { background: "var(--k2b-maroon, #8a1c1c)", color: "#fff", fontWeight: 700 } : {}}>Decline</button>
          </>}
        </div>
        {jparts.length > 0 && <RoPartsTable ro={ro} lines={jparts} act={act} readOnly={readOnly} />}
        {jsub.length > 0 && <RoSubletTable ro={ro} lines={jsub} act={act} readOnly={readOnly} />}
      </div>
    </div>
  );
};

const RoPartsTable = ({ ro, lines, act, readOnly }) => {
  const grid = "minmax(90px,120px) minmax(120px,1fr) 64px 90px 96px 28px";
  if (!lines.length) return <div style={{ padding: "10px 12px", fontSize: 12.5, color: "var(--jb-text-muted)" }}>No parts.</div>;
  return (
    <div style={{ overflowX: "auto" }}>
      <div style={{ minWidth: 480 }}>
        <div style={{ display: "grid", gridTemplateColumns: grid, gap: 6, padding: "4px 12px", ...roLbl, fontSize: 12 }}>
          <span>Part #</span><span>Description</span><span style={{ textAlign: "right" }}>Qty</span><span style={{ textAlign: "right" }}>Price</span><span style={{ textAlign: "right" }}>Ext</span><span />
        </div>
        {lines.map(l => (
          <div key={l.id} style={{ display: "grid", gridTemplateColumns: grid, gap: 6, padding: "4px 12px", alignItems: "center", borderTop: "1px solid var(--jb-border)", fontSize: 12.5 }}>
            <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)", overflow: "hidden", textOverflow: "ellipsis" }}>{l.part}</span>
            {readOnly ? <span>{l.desc}</span> : <RoLazyText value={l.desc} onCommit={(x) => act(DMS.updateROPartLine(ro.id, l.id, { desc: x }))} style={{ padding: "3px 6px", fontSize: 12.5 }} />}
            {readOnly ? <span style={{ textAlign: "right" }}>{l.qty}</span> : <RoLazyText value={l.qty} onCommit={(x) => act(DMS.updateROPartLine(ro.id, l.id, { qty: parseFloat(x) || 0 }))} style={{ padding: "3px 6px", textAlign: "right", fontFamily: "var(--jb-mono)" }} />}
            {readOnly ? <span style={{ textAlign: "right" }}>{roM$(l.sale)}</span> : <RoLazyText value={l.sale} onCommit={(x) => act(DMS.updateROPartLine(ro.id, l.id, { sale: parseFloat(x) || 0 }))} style={{ padding: "3px 6px", textAlign: "right", fontFamily: "var(--jb-mono)" }} />}
            <span style={{ textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{roM$((+l.sale || 0) * (+l.qty || 0))}</span>
            <span>{!readOnly && <button onClick={() => act(DMS.updateROPartLine(ro.id, l.id, { qty: 0 }))} title="Remove" style={iconBtn}>×</button>}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// keepHead: the RO-level sublet panel renders its header even with no lines (folded panel kept in the page)
const RoSubletTable = ({ ro, lines, act, readOnly, keepHead }) => {
  const rows = lines || (ro.sublets || []).filter(l => l.jobId == null || !(ro.ops || []).some(o => String(o.id) === String(l.jobId)));
  // round 2 (decision 12 on the lines): the sublet COST column only for the roles that see RO cost (the server strips it for the others
  // and keeps the stored figure on a save); the cost is still typed once when the sublet is added (the vendor's bill).
  const seeCost = !!(DMS.fopsSeesShopCost && DMS.fopsSeesShopCost());
  const grid = seeCost ? "minmax(100px,1fr) minmax(120px,1.4fr) 90px 90px 28px" : "minmax(100px,1fr) minmax(120px,1.4fr) 90px 28px";
  if (!rows.length && !keepHead) return <div style={{ padding: "10px 12px", fontSize: 12.5, color: "var(--jb-text-muted)" }}>No sublet work.</div>;
  return (
    <div style={{ overflowX: "auto" }}>
      <div style={{ minWidth: 420 }}>
        {rows.length > 0 && (
          <div style={{ display: "grid", gridTemplateColumns: grid, gap: 6, padding: "4px 12px", ...roLbl, fontSize: 12 }}>
            <span>Sublet vendor</span><span>Description</span>{seeCost && <span style={{ textAlign: "right" }}>Cost</span>}<span style={{ textAlign: "right" }}>Sale</span><span />
          </div>
        )}
        {!rows.length && <div style={{ padding: "10px 12px", fontSize: 12.5, color: "var(--jb-text-muted)" }}>No sublet work.</div>}
        {rows.map(l => (
          <div key={l.id} style={{ display: "grid", gridTemplateColumns: grid, gap: 6, padding: "4px 12px", alignItems: "center", borderTop: "1px solid var(--jb-border)", fontSize: 12.5 }}>
            <span style={{ fontWeight: 700 }}>{l.vendor}</span><span>{l.desc}</span>
            {seeCost && (readOnly ? <span style={{ textAlign: "right" }}>{roM$(l.cost)}</span> : <RoLazyText value={l.cost} onCommit={(x) => act(DMS.updateROSublet(ro.id, l.id, { cost: parseFloat(x) || 0 }))} style={{ padding: "3px 6px", textAlign: "right", fontFamily: "var(--jb-mono)" }} />)}
            {readOnly ? <span style={{ textAlign: "right" }}>{roM$(l.sale)}</span> : <RoLazyText value={l.sale} onCommit={(x) => act(DMS.updateROSublet(ro.id, l.id, { sale: parseFloat(x) || 0 }))} style={{ padding: "3px 6px", textAlign: "right", fontFamily: "var(--jb-mono)" }} />}
            <span>{!readOnly && <button onClick={() => act(DMS.removeROSublet(ro.id, l.id))} title="Remove" style={iconBtn}>×</button>}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// M4: the sale can fill in from the cost (store setting; off = today)
const RoSubletModal = ({ ro, jobId, act, cfg, onClose }) => {
  const mk = (cfg && cfg.money && cfg.money.subletMarkup) || { on: false, factor: 1.25 };
  const [f, setF] = React.useState({ vendor: "", desc: "", cost: "", sale: "", po: "" });
  const [saleTyped, setSaleTyped] = React.useState(false);
  const set = (k) => (e) => {
    const v = k === "cost" || k === "sale" ? e.target.value.replace(/[^0-9.]/g, "") : e.target.value;
    if (k === "sale") setSaleTyped(true);
    setF(s => { const n = { ...s, [k]: v }; if (k === "cost" && mk.on && !saleTyped) n.sale = v ? (Math.round(+v * mk.factor * 100) / 100).toFixed(2) : ""; return n; });
  };
  return (
    <K2BModal title={`Sublet / outside work — ${ro.id}`} onClose={onClose} width={520}
      buttons={<><K2BButton onClick={onClose}>Cancel</K2BButton><K2BButton primary onClick={() => { const r = act(DMS.addROSublet(ro.id, { ...f, jobId })); if (r.ok) onClose(); }}>Add sublet</K2BButton></>}>
      <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 8, alignItems: "center", fontSize: 13 }}>
        <span style={roLbl}>Vendor</span><input autoFocus value={f.vendor} onChange={set("vendor")} autoComplete="off" name="k2b-sublet-vendor" style={roInp} />
        <span style={roLbl}>Description</span><input value={f.desc} onChange={set("desc")} autoComplete="off" style={roInp} />
        <span style={roLbl}>Vendor PO / inv</span><input value={f.po} onChange={set("po")} autoComplete="off" style={roInp} />
        <span style={roLbl}>Cost $</span><input value={f.cost} onChange={set("cost")} autoComplete="off" style={roInp} />
        <span style={roLbl}>Sale $</span><input value={f.sale} onChange={set("sale")} autoComplete="off" placeholder={mk.on ? `cost × ${mk.factor}` : ""} style={roInp} />
      </div>
    </K2BModal>
  );
};

// ─── Standard job picker (copies the template into the RO) ───────────────
const RoStdJobModal = ({ ro, techs, act, defPay, defTech, onClose }) => {
  const [q, setQ] = React.useState("");
  const [techId, setTechId] = React.useState(defTech != null ? defTech : (ro.techId || ""));
  const [payType, setPayType] = React.useState("");
  const all = (DMS.stdJobs() || []).filter(j => j.active !== false);
  const rows = all.filter(j => !q || (j.laborOp + " " + j.desc).toLowerCase().includes(q.toLowerCase()));
  return (
    <K2BModal title={`Add Standard Job — ${ro.id}`} onClose={onClose} width={720}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))", gap: 8, marginBottom: 10 }}>
        <JBSearch value={q} onChange={setQ} autoFocus name="k2b-std-job-find" placeholder="Find standard job…" />
        <select value={techId} onChange={(e) => setTechId(e.target.value)} style={roInp}><option value="">— tech later —</option>{techs.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}</select>
        <select value={payType} onChange={(e) => setPayType(e.target.value)} style={roInp}><option value="">Template pay type</option>{(DMS.SVC_JOB_PAY_TYPES || []).map(p => <option key={p}>{p}</option>)}</select>
      </div>
      <div style={{ border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", maxHeight: 360, overflow: "auto" }}>
        {rows.length === 0 && (q && all.length ? <JBSearchEmpty q={q} noun="standard jobs" onClear={() => setQ("")} /> : <div style={{ padding: 16, fontSize: 13, color: "var(--jb-text-muted)" }}>{all.length ? "No match." : "No standard jobs yet — an office manager or admin adds them in Service → Setup (or Settings → Service Setup)."}</div>)}
        {rows.map(j => (
          <button key={j.id} data-ro-std={j.id} onClick={() => { const r = act(DMS.applyStdJob(ro.id, j.id, { techId, payType: payType || undefined })); if (r.ok) onClose(); }}
                  style={{ display: "grid", gridTemplateColumns: "120px 1fr 110px 90px", gap: 8, width: "100%", textAlign: "left", padding: "9px 12px", border: "none", borderBottom: "1px solid var(--jb-border)",
                           background: "var(--jb-surface)", cursor: "pointer", fontFamily: "var(--jb-font)", fontSize: 12.5, alignItems: "center", color: "var(--jb-text)" }}>
            <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{j.laborOp}</span>
            <span>{j.desc}<span style={{ display: "block", fontSize: 12, color: "var(--jb-text-muted)" }}>{(j.parts || []).length} part(s) · {j.payType}</span></span>
            <span style={{ fontFamily: "var(--jb-mono)", color: "var(--jb-text-dim)" }}>{j.rateMode === "flat" ? "flat" : `${j.estHours}h × ${j.rateSource === "custom" ? roM$(j.rate) : "shop"}`}</span>
            <span style={{ textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{roM$(j.rateMode === "flat" ? j.flat : j.estHours * (j.rateSource === "custom" ? j.rate : DMS.svcRateFor(payType || j.payType)))}</span>
          </button>
        ))}
      </div>
      <div style={{ fontSize: 12, color: "var(--jb-text-muted)", marginTop: 8 }}>The job is copied onto this RO. Change it freely here — the standard job itself doesn't change.</div>
    </K2BModal>
  );
};

// ─── Notes tab (R15: where the 3 C's are typed — "both" today; "job" folds the RO-level boxes) ─────────
const RO_NOTE_FIELDS = [
  { k: "complaint",     label: "Complaint / customer concern", print: true,  ph: "In the customer's words…" },
  { k: "diagnosis",     label: "Diagnosis",                    print: true,  ph: "What the technician found…" },
  { k: "workPerformed", label: "Work performed",               print: true,  ph: "What was done…" },
  { k: "customer",      label: "Notes for the customer",       print: true,  ph: "Recommendations, next service due, anything the customer should read…" },
  { k: "internal",      label: "Internal notes",               print: false, ph: "Shop-only: parts ETA, calls, goodwill discussion, anything the customer should NOT see…" },
];
const RoNotesTab = ({ ro, readOnly, cfg, phone }) => {
  const notes = ro.notes || { complaint: ro.concern || "" };
  const threeCs = (cfg && cfg.ro && cfg.ro.layout.threeCs) || "both";
  const ccc = ["complaint", "diagnosis", "workPerformed"];
  const valOf = (k) => notes[k] != null ? notes[k] : (k === "complaint" ? ro.concern || "" : "");
  const anyCcc = ccc.some(k => String(valOf(k) || "").trim());
  const [cccOpen, setCccOpen] = React.useState(false);
  const foldCcc = threeCs === "job" && !anyCcc && !cccOpen;
  const box = (nf) => {
    const val = valOf(nf.k);
    return (
      <div key={nf.k} data-ro-note-box={nf.k} style={{ ...roCardBox, border: nf.print ? "1px solid var(--jb-border)" : "2px dashed #D99A90", background: nf.print ? "var(--jb-surface)" : "#FFF8F6",
                                                        gridColumn: nf.k === "internal" ? "1 / -1" : undefined, display: ccc.includes(nf.k) && foldCcc ? "none" : undefined }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 12px", borderBottom: "1px solid var(--jb-border)", flexWrap: "wrap" }}>
          <span style={{ fontWeight: 800, fontSize: 13, color: nf.print ? "var(--jb-navy)" : "#B23A2E" }}>{nf.label}</span>
          <div style={{ flex: 1 }} />
          <span style={{ fontSize: 12, color: "var(--jb-text-muted)", fontFamily: "var(--jb-mono)" }}>{String(val || "").length.toLocaleString()} chars</span>
          <RoPill tone={nf.print ? "print" : "internal"}>{nf.print ? "PRINTS ON INVOICE" : "INTERNAL ONLY — NEVER PRINTS"}</RoPill>
        </div>
        <div style={{ padding: 8 }}>
          {readOnly ? <div style={{ padding: "4px 8px" }}><RoTextView value={val} empty="—" /></div> : (
            <RoLazyText multiline rows={nf.k === "internal" ? 5 : (phone ? 4 : 6)} dataKey={"note-" + nf.k} value={val} placeholder={nf.ph}
                        onCommit={(x) => DMS.setRONotes(ro.id, { [nf.k]: x })}
                        style={{ minHeight: phone ? 90 : 120, maxHeight: 520, border: "none", padding: "6px 8px", background: "transparent" }} />
          )}
        </div>
      </div>
    );
  };
  return (
    <>
      <div style={{ fontSize: 12.5, color: "var(--jb-text-dim)", display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
        <RoPill tone="print">PRINTS ON INVOICE</RoPill> the customer sees these. <RoPill tone="internal">INTERNAL ONLY</RoPill> never prints on any document.
      </div>
      {threeCs === "job" && !anyCcc && <RoBtn small onClick={() => setCccOpen(o => !o)} style={{ justifySelf: "start" }}>{cccOpen ? "Hide" : "Show"} the RO-level boxes (complaint · diagnosis · work performed) ▸</RoBtn>}
      <div style={{ display: "grid", gridTemplateColumns: phone ? "minmax(0, 1fr)" : "repeat(auto-fit, minmax(340px, 1fr))", gap: 12 }}>
        {RO_NOTE_FIELDS.map(box)}
      </div>
    </>
  );
};

// ─── Payments tab ────────────────────────────────────────────────────────
const RO_PAY_OPTS = [
  { m: "cash", label: "Cash", icon: "💵" }, { m: "card", label: "Credit card", icon: "💳" }, { m: "invoice", label: "Invoice (A/R)", icon: "🧾" },
  { m: "warranty", label: "Warranty", icon: "🛡" }, { m: "contract", label: "Service contract", icon: "📄" }, { m: "courtesy", label: "Courtesy", icon: "🤝" },
  { m: "internal", label: "Internal", icon: "🏷" },
  { m: "sunbit", label: "Sunbit", icon: "🌤" },   // RC28 (svc): pay over time — recorded by the server with Close RO / after the close
];
const RO_PAYTYPE_TO_METHOD = { Warranty: "warranty", "Service Contract": "contract", Courtesy: "courtesy", Internal: "internal" };
const RO_DRAWER_KEY = "k2b.svc.drawer";   // L6: the last cash drawer used on THIS computer (pre-fill only — the reference stays required)
const roDrawerGet = () => { try { return localStorage.getItem(RO_DRAWER_KEY) || ""; } catch (e) { return ""; } };
const roDrawerSet = (v) => { try { if (v) localStorage.setItem(RO_DRAWER_KEY, String(v).slice(0, 40)); } catch (e) {} };

const RoPayForm = ({ ro, tot, act, initial, lockAmount, onSubmit, submitLabel, cfg, view, amountRef }) => {
  cfg = cfg || roCfgOf();
  const pm = (cfg.money && cfg.money.payMethods) || { offered: RO_PAY_OPTS.map(o => o.m), first: "card", cardBrands: ["Visa", "Mastercard", "Amex", "Discover", "Debit"] };
  const canInvoice = !!(DMS.can && DMS.can("acct"));
  const opts = RO_PAY_OPTS.filter(o => (o.m !== "invoice" || canInvoice) && (pm.offered || []).includes(o.m));
  const first = opts.some(o => o.m === pm.first) ? pm.first : (opts[0] ? opts[0].m : "card");
  const drawer0 = cfg.money && cfg.money.drawerRemember ? roDrawerGet() : "";
  const [f, setF] = React.useState(() => ({ method: first, amount: tot && tot.balance > 0 ? String(tot.balance.toFixed(2)) : "", tendered: "", drawerRef: drawer0, ref: "", last4: "", cardBrand: "",
                                            account: "", dueDate: "", provider: "", claimNo: "", approvedAmt: "", customerResp: "", note: "", stock: ro.internalStock || "", sunbitRef: "", merchantFee: "", ...(initial || {}) }));
  const set = (k) => (e) => setF({ ...f, [k]: e && e.target ? (e.target.type === "checkbox" ? e.target.checked : e.target.value) : e });
  const money = (k) => (e) => setF({ ...f, [k]: e.target.value.replace(/[^0-9.]/g, "") });
  // Service contract: the amount applied IS the approved amount (the customer's share is its own line).
  const amt = f.method === "contract" ? (+f.approvedAmt || 0) : (+f.amount || 0);
  const fee = f.method === "card" ? DMS.roCardFee(amt) : { fee: 0, pct: 0, on: false };
  const arAccts = DMS.arCustomers ? DMS.arCustomers() : [];
  const acct = arAccts.find(a => a.acct === f.account);
  const glPrev = DMS.roPaymentGLPreview ? DMS.roPaymentGLPreview(ro.id, { method: f.method, amount: amt, fee: fee.fee, stock: f.stock, account: f.account }) : [];
  const cell = (label, node, span) => (<label style={{ display: "flex", flexDirection: "column", gap: 3, minWidth: 0, gridColumn: span ? "1 / -1" : undefined }}><span style={roLbl}>{label}</span>{node}</label>);
  const [busy, setBusy] = React.useState(false);
  const detailOpen0 = !view || view.acctDetail === "open";
  const [acctOpen, setAcctOpen] = React.useState(detailOpen0);
  const methodLabel = (RO_PAY_OPTS.find(o => o.m === f.method) || {}).label || f.method;
  const plain = [methodLabel, f.method === "card" && f.cardBrand ? f.cardBrand : "", f.method === "card" && f.last4 ? "…" + f.last4 : "", ro.status === "Closed" ? "posts to the books now" : "posts to the books when the RO closes"].filter(Boolean).join(" · ");
  const inp = { autoComplete: "off" };
  // RC24 (svcm): on a closed RO the payment is a SERVER command (a Promise) — the amounts are confirmed first, the result is the server's
  const submit = async () => {
    const payload = { ...f, amount: amt };
    // RC28 (svc): Sunbit on an OPEN RO closes and posts it with the Sunbit payment (one server command) — asked first
    if (f.method === "sunbit" && ro.status !== "Closed" && !onSubmit && !window.confirm(`Close ${ro.id} and post it with the Sunbit payment of ${roM$(amt)} (Sunbit ref ${f.sunbitRef || "—"})?\nEvery job must be DONE. The server closes the RO, posts it and puts it on the "Sunbit to collect" list until Sunbit's deposit clears it.`)) return { ok: false };
    if (ro.status === "Closed" && !onSubmit) {
      if (!window.confirm(`Record ${methodLabel} ${roM$(amt)}${fee.fee ? " + card fee " + roM$(fee.fee) + " (charge the card " + roM$(amt + fee.fee) + ")" : ""} on ${ro.id}?\nThe server issues the receipt and posts it to the books now (nothing changes until it answers).`)) return { ok: false };
    }
    setBusy(true);
    let r;
    try { r = await Promise.resolve(onSubmit ? onSubmit(payload) : DMS.recordROPayment(ro.id, payload)); if (!onSubmit) act(r); }
    finally { setBusy(false); }
    if (r && r.ok && f.method === "cash" && cfg.money && cfg.money.drawerRemember) roDrawerSet(f.drawerRef);
    if (r && r.ok && !onSubmit) setF(x => ({ ...x, amount: "", ref: "", last4: "", claimNo: "", approvedAmt: "", customerResp: "", note: "", tendered: "" }));
    return r;
  };
  return (
    <div data-ro-payform="1" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <div data-ro-pm-row="1" style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
        {opts.map(o => (
          <button key={o.m} type="button" data-ro-pm={o.m} onClick={() => setF({ ...f, method: o.m })} className="k2b-button small"
                  style={{ background: f.method === o.m ? "var(--jb-navy, #1B66A8)" : undefined, color: f.method === o.m ? "#fff" : undefined, fontWeight: f.method === o.m ? 800 : 600, minHeight: 34 }}>{o.icon} {o.label}</button>
        ))}
      </div>
      {f.method === "card" && (
        <div data-ro-card-notice="1" style={{ border: "1px solid #CBE0F4", background: "#EEF5FD", borderRadius: 6, padding: "6px 12px", fontSize: 12.5, color: "#0B3B73" }}>
          <b>Run the card on the terminal, then record its reference here.</b> Never type a card number or security code into the DMS — only the processor reference / auth code and (optionally) the last 4 digits.
        </div>
      )}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 10 }}>
        {f.method !== "contract" && cell("Amount applied to RO $", <input ref={amountRef} data-ro-pay="amount" disabled={lockAmount} value={f.amount} onChange={money("amount")} {...inp} name="k2b-pay-amount" style={{ ...roInp, fontFamily: "var(--jb-mono)", fontWeight: 700 }} />)}
        {f.method === "cash" && <>
          {cell("Cash received $", <input data-ro-pay="tendered" value={f.tendered} onChange={money("tendered")} placeholder={f.amount} {...inp} style={roInp} />)}
          {cell("Drawer / deposit ref", <input data-ro-pay="drawerRef" value={f.drawerRef} onChange={set("drawerRef")} placeholder="DRAWER-1" {...inp} name="k2b-pay-drawer" style={roInp} />)}
          {+f.tendered > amt && cell("Change due", <div style={{ ...roInp, background: "var(--jb-surface-2)", fontFamily: "var(--jb-mono)" }}>{roM$(+f.tendered - amt)}</div>)}
        </>}
        {f.method === "card" && <>
          {cell("Processor ref / auth code", <input data-ro-pay="ref" value={f.ref} onChange={set("ref")} placeholder="AUTH 04211C" {...inp} name="k2b-pay-authref" style={roInp} />)}
          {cell("Last 4 (optional)", <input data-ro-pay="last4" value={f.last4} maxLength={4} onChange={(e) => setF({ ...f, last4: e.target.value.replace(/\D/g, "").slice(0, 4) })} {...inp} name="k2b-pay-last4" style={{ ...roInp, fontFamily: "var(--jb-mono)" }} />)}
          {cell("Card brand (optional)", <select value={f.cardBrand} onChange={set("cardBrand")} style={roInp}><option value="">—</option>{(pm.cardBrands || []).map(b => <option key={b}>{b}</option>)}</select>)}
        </>}
        {f.method === "invoice" && <>
          {cell("A/R account", <select data-ro-pay="account" value={f.account} onChange={set("account")} style={roInp}><option value="">— pick account —</option>{arAccts.map(a => <option key={a.acct} value={a.acct}>{a.acct} — {a.name}</option>)}</select>)}
          {cell("Due date", <input type="date" value={f.dueDate} onChange={set("dueDate")} style={roInp} />)}
          {acct && cell("Open balance / terms", <div style={{ ...roInp, background: "var(--jb-surface-2)" }}>{roM$((acct.txns || []).reduce((s, x) => s + (+x.charge || 0) - (+x.credit || 0), 0))} · {acct.terms || "Net 30"}</div>)}
        </>}
        {(f.method === "warranty" || f.method === "contract") && <>
          {cell(f.method === "warranty" ? "Responsible provider" : "Contract provider", <input data-ro-pay="provider" value={f.provider} onChange={set("provider")} placeholder={f.method === "warranty" ? "GM Warranty" : "GM Protection Plan"} {...inp} style={roInp} />)}
          {cell(f.method === "warranty" ? "Claim / reference #" : "Authorization / claim #", <input data-ro-pay="claimNo" value={f.claimNo} onChange={set("claimNo")} {...inp} style={roInp} />)}
        </>}
        {f.method === "contract" && <>
          {cell("Approved amount $", <input data-ro-pay="approvedAmt" value={f.approvedAmt} onChange={money("approvedAmt")} {...inp} style={{ ...roInp, fontFamily: "var(--jb-mono)", fontWeight: 700 }} />)}
          {cell("Customer responsibility $", <input data-ro-pay="customerResp" value={f.customerResp} onChange={money("customerResp")} placeholder="deductible" {...inp} style={roInp} />)}
        </>}
        {f.method === "internal" && cell("Stock # charged", <input data-ro-pay="stock" value={f.stock} onChange={(e) => setF({ ...f, stock: e.target.value.toUpperCase() })} {...inp} style={roInp} />)}
        {f.method === "sunbit" && <>
          {cell("Sunbit reference (from the Sunbit merchant portal)", <input data-ro-pay="sunbitRef" value={f.sunbitRef} onChange={set("sunbitRef")} placeholder="Sunbit transaction / plan #" {...inp} style={roInp} />)}
          {cell("Sunbit merchant fee $ (the store's cost — optional)", <input data-ro-pay="merchantFee" value={f.merchantFee} onChange={money("merchantFee")} placeholder={(DMS._svc && DMS._svc.config && DMS._svc.config.settings && DMS._svc.config.settings.sunbit && DMS._svc.config.settings.sunbit.feePct) ? DMS._svc.config.settings.sunbit.feePct + "% (store setting)" : "0.00"} {...inp} style={roInp} />)}
        </>}
        {(f.method === "courtesy" || f.method === "internal" || f.method === "invoice") && cell(f.method === "courtesy" ? "Reason (required)" : "Note", <input data-ro-pay="note" value={f.note} onChange={set("note")} placeholder={f.method === "courtesy" ? "Comeback — goodwill per service manager" : ""} {...inp} style={roInp} />, true)}
        {f.method === "card" && (
          <div data-ro-fee-preview="1" style={{ gridColumn: "1 / -1", display: "flex", gap: 16, alignItems: "baseline", flexWrap: "wrap", padding: "7px 12px", border: "1px solid #F0DBA8", borderRadius: 6, background: "#FFFBEF", fontSize: 13 }}>
            {fee.on && fee.pct ? <>
              <span>Card fee <b>{fee.pct}%</b>: <b data-ro-fee="1" style={{ fontFamily: "var(--jb-mono)" }}>{roM$(fee.fee)}</b></span>
              <span>Charge the card: <b data-ro-card-total="1" style={{ fontFamily: "var(--jb-mono)", fontSize: 15, color: "var(--jb-navy)" }}>{roM$(amt + fee.fee)}</b></span>
              <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>Tell the customer before running the card. Prints on the receipt.</span>
            </> : <span>No card fee (turned off in Service Setup). Charge the card: <b style={{ fontFamily: "var(--jb-mono)" }}>{roM$(amt)}</b></span>}
          </div>
        )}
      </div>
      {f.method === "sunbit" && <div data-ro-sunbit-notice="1" style={{ border: "1px solid #E0B341", background: "#FFF8E6", borderRadius: 6, padding: "8px 12px", fontSize: 12.5, color: "#5A4300" }}>
        <b>Sunbit:</b> enter the amount Sunbit approved / funded for this repair order and the Sunbit reference. The amount is a receivable from Sunbit until its deposit arrives (Service › Sunbit to collect); Sunbit's merchant fee is the store's cost — never added to the customer's bill. {ro.status === "Closed" ? "" : "On an open RO this closes and posts the RO with the Sunbit payment."}
      </div>}
      {f.method === "contract" && +f.customerResp > 0 && <div style={{ fontSize: 12.5, color: "#9A6700" }}>Customer responsibility {roM$(f.customerResp)} — record it as its own cash / card line.</div>}
      <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
        <button type="button" data-ro-acct-detail="1" onClick={() => setAcctOpen(o => !o)} style={{ border: 0, background: "transparent", color: "var(--jb-blue)", fontWeight: 700, cursor: "pointer", fontSize: 12.5, padding: "4px 0", fontFamily: "var(--jb-font)" }}>{acctOpen ? "▾" : "▸"} Accounting detail</button>
        <span style={{ fontSize: 12.5, color: "var(--jb-text-muted)", flex: 1, minWidth: 0 }}>{plain}</span>
        <RoBtn data-ro-pay-submit="1" disabled={busy} style={{ background: "var(--jb-yellow)", fontWeight: 800, minHeight: 38 }} onClick={submit}>{busy ? "Recording…" : (submitLabel || (f.method === "sunbit" && ro.status !== "Closed" ? "Close RO & post with Sunbit" : "Record payment"))}</RoBtn>
      </div>
      <div data-ro-acct-detail-body="1" style={{ display: acctOpen ? undefined : "none", fontSize: 12, color: "var(--jb-text-dim)", borderTop: "1px dotted var(--jb-border)", paddingTop: 6 }}>
        {glPrev.length > 0 && <div>GL {ro.status === "Closed" ? "this posts now" : "(posts when the RO is closed)"}: {glPrev.map((l, i) => <span key={i} style={{ marginRight: 10, fontFamily: "var(--jb-mono)" }}>{l.dr ? "DR" : "CR"} {l.acct} {DMS.acctName ? DMS.acctName(l.acct) : ""} {roM$(l.dr || l.cr)}</span>)}</div>}
        {f.method === "courtesy" && <div style={{ color: "#8a1c1c" }}>Courtesy is charged against the service department's gross — it posts to {DMS._ACCT && DMS._ACCT.svcCourtesy} ({DMS.acctName && DMS._ACCT && DMS.acctName(DMS._ACCT.svcCourtesy)}).</div>}
        {ro.status === "Closed" && <div>The server issues the receipt number and posts it (RC24).</div>}
      </div>
    </div>
  );
};

const RoPayActionModal = ({ ro, pay, kind, act, onClose }) => {
  const [reason, setReason] = React.useState("");
  const [amount, setAmount] = React.useState(kind === "refund" ? String(pay.amount) : "");
  const [method, setMethod] = React.useState(pay.method === "card" ? "card" : "cash");   // RC24: cash / card back, or a check through Check Writing
  const [busy, setBusy] = React.useState(false);
  const title = kind === "void" ? `Void ${pay.receiptNo}` : kind === "refund" ? `Refund ${pay.receiptNo}` : `Change pay type — ${pay.receiptNo}`;
  const posted = pay.posted || ro.status === "Closed";
  const closed = ro.status === "Closed";
  const tot = { balance: pay.amount };
  const already = (ro.payments || []).filter(x => x.refundOf === pay.id && !x.voided).reduce((s, x) => s - (+x.amount || 0), 0);
  const left = +(+pay.amount - already).toFixed(2);
  const feeShare = pay.fee && +amount > 0 && +pay.amount > 0 ? Math.round((+pay.fee * 100) * (+amount) / (+pay.amount)) / 100 : 0;
  // RC24 (svcm): on a closed RO the void / refund is a SERVER command (a Promise) — a linked reversing entry; a check refund issues the check number
  const run = async () => {
    setBusy(true);
    try {
      const r = await Promise.resolve(kind === "void" ? DMS.voidROPayment(ro.id, pay.id, reason) : DMS.refundROPayment(ro.id, pay.id, +amount || 0, reason, { method }));
      act(r);
      if (r.ok) onClose();
    } finally { setBusy(false); }
  };
  return (
    <K2BModal title={title} onClose={onClose} width={kind === "change" ? 760 : 480}
      buttons={kind === "change" ? <K2BButton onClick={onClose}>Cancel</K2BButton> : <>
        <K2BButton onClick={onClose}>Cancel</K2BButton>
        <RoBtn data-ro-payact-ok="1" disabled={busy} style={{ background: "var(--jb-yellow)", fontWeight: 800 }} onClick={run}>{busy ? "Posting…" : kind === "void" ? "Void payment" : "Refund"}</RoBtn>
      </>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
        <div>{DMS.roPayLabel(pay.method)} <b style={{ fontFamily: "var(--jb-mono)" }}>{roM$(pay.amount)}</b>{pay.fee ? ` + fee ${roM$(pay.fee)}` : ""} · {pay.receiptNo}{pay.jeId ? ` · ${pay.jeId}` : ""}</div>
        <div style={{ fontSize: 12, color: posted ? "#8a1c1c" : "var(--jb-text-dim)" }}>
          {posted ? (closed ? "This payment is posted. The server posts a linked reversing entry (nothing is deleted or edited), marks the receipt and writes the audit row — all in one step. Needs the office (Admin / F&I, Office Manager, Accounting)." : "This payment is posted. A reversing journal entry will be posted (nothing is deleted) and the change is written to the audit log. Needs office manager / admin.") : "Not posted yet — no journal entry is needed; the change is written to the audit log."}
        </div>
        {kind === "refund" && <>
          <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={roLbl}>Refund amount (of the RO portion) $ — at most {roM$(left)}{already ? ` (${roM$(already)} already refunded)` : ""}</span><input data-ro-payact="amount" value={amount} onChange={(e) => setAmount(e.target.value.replace(/[^0-9.]/g, ""))} autoComplete="off" style={roInp} /></label>
          {closed && <div style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }}>
            <span style={roLbl}>Pay it back by</span>
            {[["cash", "💵 Cash"], ["card", "💳 Card (credit the card)"], ["check", "🧾 Check (Check Writing issues the number)"]].map(([m, l]) => (
              <button key={m} data-ro-refund-method={m} className="k2b-button small" onClick={() => setMethod(m)} style={{ background: method === m ? "var(--jb-navy, #1B66A8)" : undefined, color: method === m ? "#fff" : undefined, fontWeight: method === m ? 800 : 600 }}>{l}</button>
            ))}
          </div>}
          {closed && +amount > 0 && <div data-ro-refund-preview="1" style={{ fontSize: 12.5, padding: "8px 12px", border: "1px solid var(--jb-border)", borderRadius: 6, background: "var(--jb-surface-2)" }}>
            Pays back <b style={{ fontFamily: "var(--jb-mono)" }}>{roM$((+amount || 0) + feeShare)}</b>{feeShare ? ` (${roM$(+amount)} + ${roM$(feeShare)} card fee share)` : ""} by {method}{method === "check" ? " — the check is written and printed in Check Writing; voiding that check later undoes this refund" : ""}. {ro.id} then shows {roM$(+amount || 0)} more due.
          </div>}
        </>}
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={roLbl}>Reason (required)</span><input data-ro-payact="reason" autoFocus value={reason} onChange={(e) => setReason(e.target.value)} autoComplete="off" style={roInp} /></label>
        {kind === "change" && (
          <div style={{ borderTop: "1px solid var(--jb-border)", paddingTop: 10 }}>
            <div style={{ ...roLbl, marginBottom: 6 }}>New pay type for {roM$(pay.amount)}</div>
            <RoPayForm ro={ro} tot={tot} act={act} lockAmount initial={{ amount: String(pay.amount), method: pay.method === "card" ? "cash" : "card" }} submitLabel="Void old line & record new"
                       onSubmit={async (p) => { const r = act(await Promise.resolve(DMS.changeROPayType(ro.id, pay.id, p, reason))); if (r.ok) onClose(); return r; }} />
          </div>
        )}
      </div>
    </K2BModal>
  );
};

// "Before you close" (R4 — reminders by default; "must be done" only holds back the screen's Close button)
// RC32 fix (r32-aud L4): one row — the items still to do as chips, the done ones folded into "✓ n done" (a click shows them)
const RoCloseList = ({ checklist, phone }) => {
  const [showDone, setShowDone] = React.useState(false);
  if (!checklist || !checklist.items || !checklist.items.length) return null;
  const must = checklist.items.some(x => x.must);
  const done = checklist.items.filter(x => x.done);
  const chip = (it) => <span key={it.key} data-ro-closeitem={it.key} data-done={it.done ? "1" : "0"} style={{ display: it.done && !showDone ? "none" : undefined, fontSize: 12.5, fontWeight: 600, borderRadius: 99, padding: "3px 10px", background: it.done ? "#E6F7EC" : (it.must ? "#FBE9E7" : "#FFF3D9"), color: it.done ? "#0E7A37" : (it.must ? "#B23A2E" : "#8A5A00") }}>{it.done ? "✓" : "○"} {it.label}</span>;
  return (
    <div data-ro-closelist={checklist.mode} style={{ border: "1px solid " + (checklist.left ? (must ? "#F2C9CE" : "#F0DBA8") : "#BFE6C7"), background: checklist.left ? (must ? "#FDF6F7" : "#FFFBEF") : "#F0FBF1", borderRadius: "var(--jb-r)", padding: "6px 12px" }}>
      <div style={{ display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }}>
        <b style={{ fontSize: 13.5, color: "var(--jb-navy)", marginRight: 2 }} title={must ? "The store set these to must be done" : "Reminders only · the store picks them in Setup"}>Before you close</b>
        {checklist.items.filter(x => !x.done).map(chip)}
        {done.length > 0 && <button type="button" data-ro-closedone={done.length} onClick={() => setShowDone(v => !v)} title={done.map(x => "✓ " + x.label).join("\n")}
                                    style={{ fontSize: 12.5, fontWeight: 700, borderRadius: 99, padding: "3px 10px", minHeight: phone ? 40 : 26, border: "1px solid #BFE6C7", background: "#E6F7EC", color: "#0E7A37", cursor: "pointer", fontFamily: "var(--jb-font)" }}>✓ {done.length === checklist.items.length ? "All " : ""}{done.length} done {showDone ? "▴" : "▾"}</button>}
        {done.map(chip)}
        <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>{must ? "must be done" : "reminders only"}</span>
      </div>
    </div>
  );
};

const RoPaymentsTab = ({ ro, tot, act, cfg, view, checklist, owes, paySignal, phone }) => {
  const [modal, setModal] = React.useState(null);
  const pays = ro.payments || [];
  const canPay = ro.status !== "Void" && DMS.can && DMS.can("service");   // RC36 (rov36): a VOID / REVERSED RO takes no payment, void or refund (a reversal's credit is refunded in A/R)
  const canPost = ro.status !== "Void" && DMS.svcCanPostChange && DMS.svcCanPostChange();
  const closed = ro.status === "Closed";
  const suggest = Object.keys(tot.byPayType || {}).filter(k => tot.byPayType[k] > 0);
  const amountRef = React.useRef(null);
  React.useEffect(() => { if (paySignal && amountRef.current) { try { amountRef.current.focus(); amountRef.current.select(); amountRef.current.scrollIntoView({ block: "center" }); } catch (e) {} } }, [paySignal]);
  // one payment's cells (desk table and phone cards read the same)
  const payCells = (p) => {
    const detailText = [p.sunbitRef ? "Sunbit ref " + p.sunbitRef : "", p.method === "sunbit" && +p.merchantFee ? "merchant fee " + roM$(p.merchantFee) + " (store cost)" : "", p.last4 ? "•••• " + p.last4 : "", p.ref ? "ref " + p.ref : "", p.drawerRef ? "drawer " + p.drawerRef : "", p.provider, p.claimNo ? "claim " + p.claimNo : "", p.approvedAmt ? "approved " + roM$(p.approvedAmt) : "", p.customerResp ? "cust resp " + roM$(p.customerResp) : "", p.account ? p.account + " " + (p.acctName || "") : "", p.dueDate ? "due " + p.dueDate : "", p.stock, p.note].filter(Boolean).join(" · ");
    return {
      paidBy: <>{DMS.roPayLabel(p.tender === "check" ? "check" : p.method)}{p.refundOf ? ` (refund${p.refundMethod ? " by " + p.refundMethod : ""}${p.checkNum ? " — check #" + p.checkNum : ""})` : ""}{p.server ? <span data-ro-pay-server={p.receiptNo} title="Recorded by the server (RC24)" style={{ marginLeft: 6, fontSize: 12, background: "#E5EFFA", color: "#1456A0", borderRadius: 999, padding: "1px 6px", fontWeight: 700 }}>server</span> : null}{p.voided ? <span data-ro-pay-state={p.receiptNo} style={{ marginLeft: 6, fontSize: 12, background: "#FBE9E7", color: "#B23A2E", borderRadius: 999, padding: "1px 6px", fontWeight: 700, textDecoration: "none" }}>VOID</span> : (ro.payments || []).some(x => x.refundOf === p.id && !x.voided) ? <span data-ro-pay-state={p.receiptNo} style={{ marginLeft: 6, fontSize: 12, background: "#FBF3E0", color: "#9A6700", borderRadius: 999, padding: "1px 6px", fontWeight: 700 }}>REFUNDED {roM$((ro.payments || []).filter(x => x.refundOf === p.id && !x.voided).reduce((s, x) => s - (+x.amount || 0), 0))}</span> : null}</>,
      detailText,
      detail: <>{detailText}{p.voided && <div style={{ color: "#B23A2E", textDecoration: "none" }}>VOID — {p.voidReason} ({p.voidedBy})</div>}</>,
      gl: <>{p.jeId || (p.voided ? "" : "at close")}{p.voidJeId ? <div>{p.voidJeId}</div> : null}</>,
      glText: p.jeId || (p.voided ? "" : "at close"),
      actions: <>
                      <button className="k2b-button small" title="Print receipt" data-ro-receipt={p.receiptNo} onClick={() => window.k2bPrintROReceipt && window.k2bPrintROReceipt(DMS.repairOrders().find(r => r.id === ro.id) || ro, p.id)}>🖨</button>
                      {!p.voided && !p.refundOf && (((p.posted || closed) ? canPost : canPay)) && <>
                        <button className="k2b-button small" data-ro-void={p.receiptNo} onClick={() => setModal({ kind: "void", pay: p })}>Void</button>
                        <button className="k2b-button small" onClick={() => setModal({ kind: "change", pay: p })}>Change type</button>
                        {p.posted && ["cash", "card"].includes(p.method) && canPost && <button className="k2b-button small" onClick={() => setModal({ kind: "refund", pay: p })}>Refund</button>}
                      </>}
      </>,
    };
  };
  const sums = [["RO total", tot.total, "var(--jb-navy)"], ["Applied", tot.allocated, "#0E7A37"], ["Not yet allocated", tot.balance, Math.abs(tot.balance) > 0.009 ? "#B23A2E" : "#0E7A37"], ...(tot.customerBalance != null ? [["Customer owes", closed ? owes : tot.customerBalance, (closed ? owes : tot.customerBalance) > 0.009 ? "#B23A2E" : "#0E7A37"]] : []), ["Card fees", tot.fees, "var(--jb-text)"]];
  return (
    <>
      {!closed && <RoCloseList checklist={checklist} phone={phone} />}
      <div data-ro-sumline="1" style={{ ...roCardBox, padding: "8px 12px", display: "flex", gap: phone ? 10 : 18, flexWrap: "wrap", alignItems: "baseline", fontSize: 12.5, color: "var(--jb-text-dim)" }}>
        {sums.map(([l, v, c]) => <span key={l}>{l} <b data-ro-sum={l} style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 14, color: c }}>{roM$(v)}</b></span>)}
        {/* RC32 fix (r32-aud L4): who pays what rides on the same line (was its own row) */}
        {suggest.length > 0 && (
          <span data-ro-bypaytype="1" style={{ display: "inline-flex", gap: 10, flexWrap: "wrap", alignItems: "baseline" }}>
            <span style={roLbl}>By job pay type</span>
            {suggest.map(k => <span key={k}><b style={{ color: RO_PAY_TYPE_TONE[k] }}>{k}</b> {roM$(tot.byPayType[k])}{k === "Customer" ? " (incl. tax)" : ""}</span>)}
          </span>
        )}
      </div>
      {!closed && Math.abs(tot.balance) > 0.009 && tot.balance < 0 && <JBAssist tone="red" icon="⚠" title="Over-allocated" body={`Payments exceed the RO total by ${roM$(-tot.balance)}. Void or change a line before closing.`} />}

      {canPay && (Math.abs(tot.balance) > 0.009 && tot.balance > 0) && (
        <div data-ro-takepay-card="1" style={{ ...roCardBox, padding: 12 }}>
          <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 8, flexWrap: "wrap" }}>
            <b style={{ fontSize: 13.5, color: "var(--jb-navy)" }}>Take a payment / split</b>
            <span style={{ fontSize: 12.5, color: "var(--jb-text-muted)" }}>{roM$(tot.balance)} still to allocate.{closed ? " RO is posted — the server records the payment and posts it now (never more than the balance); other pay types need the office." : ""}</span>
          </div>
          {/* created when Payments opens and again whenever the balance changes, so the amount always follows the balance */}
          <RoPayForm key={pays.length + ":" + Math.round((tot.balance || 0) * 100)} ro={ro} tot={tot} act={act} cfg={cfg} view={view} amountRef={amountRef} />
        </div>
      )}
      {!canPay && <div style={{ fontSize: 12.5, color: "#9A6700" }}>{ro.status === "Void" ? "This repair order is VOID — no payment is taken, voided or refunded here (a reversal's credit is refunded in A/R)." : "Your role can view payments but not take them."}</div>}

      <div style={roCardBox}>
        <JBPanelHead>Payments on this RO</JBPanelHead>
        {pays.length === 0 && <div style={{ padding: 12, fontSize: 12.5, color: "var(--jb-text-muted)" }}>No payments yet. Payments recorded on an open RO post when the RO is closed; whatever the customer still owes then goes to their account{view && view.acctDetail === "open" ? " (A/R 220)" : ""} — never to cash.</div>}
        {pays.length > 0 && !phone && (
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5, minWidth: 680 }}>
              <thead><tr style={{ background: "var(--jb-surface-2)" }}>
                {["Receipt", "Paid by", "Detail", "Amount", "Fee", "Taken", "GL", ""].map(h => <th key={h} style={{ ...roLbl, textAlign: h === "Amount" || h === "Fee" ? "right" : "left", padding: "6px 8px" }}>{h}</th>)}
              </tr></thead>
              <tbody>
                {pays.map(p => { const c = payCells(p); return (
                  <tr key={p.id} data-ro-payrow={p.receiptNo} style={{ borderTop: "1px solid var(--jb-border)", opacity: p.voided ? 0.55 : 1, textDecoration: p.voided ? "line-through" : "none" }}>
                    <td style={{ padding: "6px 8px", fontFamily: "var(--jb-mono)", fontWeight: 700, whiteSpace: "nowrap" }}>{p.receiptNo}</td>
                    <td style={{ padding: "6px 8px" }}>{c.paidBy}</td>
                    <td style={{ padding: "6px 8px", fontSize: 12, color: "var(--jb-text-dim)" }}>{c.detail}</td>
                    <td style={{ padding: "6px 8px", textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{roM$(p.amount)}</td>
                    <td style={{ padding: "6px 8px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{p.fee ? roM$(p.fee) : ""}</td>
                    <td style={{ padding: "6px 8px", fontSize: 12 }}>{p.by}<br />{new Date(p.at).toLocaleString()}</td>
                    <td style={{ padding: "6px 8px", fontSize: 12, fontFamily: "var(--jb-mono)" }}>{c.gl}</td>
                    <td style={{ padding: "6px 8px", whiteSpace: "nowrap" }}>{c.actions}</td>
                  </tr>
                ); })}
              </tbody>
            </table>
          </div>
        )}
        {/* RC32 fix (r32-aud L2): on a phone each payment is a short card (no table scrolling sideways) — same facts, same buttons */}
        {pays.length > 0 && phone && (
          <div data-ro-paycards="1" style={{ display: "flex", flexDirection: "column" }}>
            {pays.map(p => { const c = payCells(p); return (
              <div key={p.id} data-ro-payrow={p.receiptNo} style={{ borderTop: "1px solid var(--jb-border)", padding: "8px 10px", opacity: p.voided ? 0.55 : 1, fontSize: 13, minWidth: 0 }}>
                <div style={{ display: "flex", gap: 8, alignItems: "baseline", flexWrap: "wrap", textDecoration: p.voided ? "line-through" : "none" }}>
                  <b style={{ fontFamily: "var(--jb-mono)" }}>{p.receiptNo}</b>
                  <span style={{ flex: 1, minWidth: 0 }}>{c.paidBy}</span>
                  <b style={{ fontFamily: "var(--jb-mono)", fontSize: 14 }}>{roM$(p.amount)}</b>
                </div>
                {(c.detailText || p.voided) && <div style={{ fontSize: 12, color: "var(--jb-text-dim)", overflowWrap: "anywhere" }}>{c.detail}</div>}
                <div style={{ fontSize: 12, color: "var(--jb-text-muted)", overflowWrap: "anywhere" }}>{p.fee ? "fee " + roM$(p.fee) + " · " : ""}{p.by} · {new Date(p.at).toLocaleString()}{c.glText ? " · GL " + c.glText : ""}</div>
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 6 }}>{c.actions}</div>
              </div>
            ); })}
          </div>
        )}
      </div>
      {modal && <RoPayActionModal ro={ro} pay={modal.pay} kind={modal.kind} act={act} onClose={() => setModal(null)} />}
    </>
  );
};

// ─── Accounting tab (the office) / ⋯ More › Accounting (everyone else) ─────────
const RoAcctTab = ({ ro, go }) => {
  const [jeId, setJeId] = React.useState(null);
  const [mapOpen, setMapOpen] = React.useState(false);
  const A = DMS._ACCT || {};
  const nm = (a) => (DMS.acctName ? DMS.acctName(a) : "") || "";
  const jes = DMS.roJournalEntries ? DMS.roJournalEntries(ro.id) : [];
  const pv = ro.status !== "Closed" && DMS.roCloseLines ? DMS.roCloseLines(ro.id) : null;
  const splitPay = Array.isArray(ro.payments);
  const bal = pv && DMS.jeBalance ? DMS.jeBalance(pv.lines) : null;
  const MAP = [
    ["Cash", "DR " + A.cashOnHand, "cash on hand / drawer"], ["Credit card", "DR " + A.cardDeposit + " (amount + fee) · CR " + A.cardFeeIncome + " fee", "processor deposit; fee is income, not processing cost"],
    ["Invoice to A/R account", "DR " + A.arCustomer, "A/R sub-ledger charge on the account, due date per terms"], ["Warranty", "DR " + A.warrantyRec, "warranty claim receivable (claim # → Warranty Claims)"],
    ["Service contract", "DR " + A.contractRec, "contract claims receivable (approved amount); customer responsibility is its own line"],
    ["Courtesy", "DR " + A.svcCourtesy, "Courtesy — service dept gross (same account as policy adjustments)"], ["Internal", "DR unit inventory (" + A.invUsedCar + "/" + A.invUsedTruck + "/" + A.invNewCar + ")", "capitalized into the unit's recon"],
  ];
  const SALES = [["Labor — Customer / Courtesy", A.custLabor], ["Labor — Warranty", A.warrLabor], ["Labor — Service contract", A.contractLabor], ["Labor — Internal", A.internalLabor], ["Parts on RO", A.partsCarRO], ["Sublet", A.subletSale], ["Sales tax (customer-pay jobs)", A.salesTaxPay], ["Cost of labor / labor applied", A.costLabor + " / " + A.laborApplied], ["Cost of parts / parts inventory", A.costPartsRO + " / " + A.invParts], ["Cost of sublet / sublet inventory", A.subletCost + " / " + A.subletInv]];
  const JE = window.JeDetailModal;
  const th = { ...roLbl, textAlign: "left", padding: "5px 8px", background: "var(--jb-surface-2)" };
  const td = { padding: "4px 8px", borderTop: "1px solid var(--jb-border)", fontSize: 12.5 };
  const LineTable = ({ lines }) => (
    <div style={{ overflowX: "auto" }}>
      <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 480 }}>
        <thead><tr><th style={th}>Acct</th><th style={th}>Name</th><th style={th}>Memo</th><th style={{ ...th, textAlign: "right" }}>Debit</th><th style={{ ...th, textAlign: "right" }}>Credit</th></tr></thead>
        <tbody>{lines.map((l, i) => (
          <tr key={i}><td style={{ ...td, fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{l.acct}</td><td style={td}>{nm(l.acct)}</td><td style={{ ...td, color: "var(--jb-text-dim)" }}>{l.desc || ""}</td>
            <td style={{ ...td, textAlign: "right", fontFamily: "var(--jb-mono)" }}>{l.dr ? roM$(l.dr) : ""}</td><td style={{ ...td, textAlign: "right", fontFamily: "var(--jb-mono)" }}>{l.cr ? roM$(l.cr) : ""}</td></tr>
        ))}</tbody>
      </table>
    </div>
  );
  return (
    <>
      <div style={roCardBox}>
        <JBPanelHead>Journal entries for {ro.id}</JBPanelHead>
        {jes.length === 0 && <div style={{ padding: 12, fontSize: 12.5, color: "var(--jb-text-muted)" }}>Nothing posted yet — the close entry posts when the RO is closed.</div>}
        {jes.map(j => {
          const b = DMS.jeBalance ? DMS.jeBalance(j.lines || []) : { ok: true, dr: 0, cr: 0 };
          return (
            <div key={j.id} data-ro-je={j.id} style={{ borderTop: "1px solid var(--jb-border)" }}>
              <div style={{ display: "flex", gap: 10, alignItems: "center", padding: "8px 12px", flexWrap: "wrap" }}>
                <button onClick={() => JE ? setJeId(j.id) : null} title="Open journal entry" style={{ border: "none", background: "none", padding: 0, cursor: "pointer", color: "var(--jb-blue, #1B66A8)", textDecoration: "underline", fontFamily: "var(--jb-mono)", fontWeight: 800 }}>{j.id}</button>
                <span style={{ fontSize: 12.5 }}>{j.date} · {j.desc}</span>
                <div style={{ flex: 1 }} />
                <span style={{ fontSize: 12, fontWeight: 700, color: b.ok ? "#0E7A37" : "#B23A2E" }}>{b.ok ? "✓ balanced" : "✕ out of balance"} {roM$(b.dr)}</span>
                {j.reversedBy && <RoPill tone="warn">reversed by {j.reversedBy}</RoPill>}
              </div>
              <LineTable lines={j.lines || []} />
            </div>
          );
        })}
      </div>
      {pv && splitPay && (
        <div style={roCardBox}>
          <JBPanelHead right={bal && <span style={{ fontSize: 12, fontWeight: 700, color: bal.ok ? "#0E7A37" : "#B23A2E" }}>{bal.ok ? "✓ balances" : "out of balance " + roM$(bal.diff)}</span>}>Preview — the close entry this RO will post</JBPanelHead>
          {pv.problems && pv.problems.length > 0 && <div style={{ padding: "6px 12px", fontSize: 12.5, color: "#B23A2E" }}>{pv.problems[0]}</div>}
          {pv.balance > 0.009 && <div style={{ padding: "6px 12px", fontSize: 12.5, color: "var(--jb-text-dim)" }}>Customer balance {roM$(pv.balance)} goes to A/R (220) at close. Preview — the server posts the entry when the RO is closed.</div>}
          <LineTable lines={pv.lines} />
        </div>
      )}
      <div style={roCardBox}>
        <div onClick={() => setMapOpen(o => !o)} style={{ cursor: "pointer" }}><JBPanelHead right={<span style={{ color: "var(--jb-text-muted)", fontSize: 12 }}>{mapOpen ? "▴" : "▸"}</span>}>How an RO posts (GL map)</JBPanelHead></div>
        <div data-ro-glmap="1" style={{ display: mapOpen ? "grid" : "none", padding: "8px 12px", fontSize: 12.5, gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 12 }}>
          <div>
            <div style={{ ...roLbl, marginBottom: 4 }}>Who pays → receivable side (one line per payment)</div>
            {MAP.map(([k, a, why]) => <div key={k} style={{ padding: "3px 0", borderTop: "1px dotted var(--jb-border)" }}><b>{k}</b>: <span style={{ fontFamily: "var(--jb-mono)" }}>{a}</span> <span style={{ color: "var(--jb-text-muted)" }}>— {why}</span></div>)}
          </div>
          <div>
            <div style={{ ...roLbl, marginBottom: 4 }}>Sales & cost side</div>
            {SALES.map(([k, a]) => <div key={k} style={{ padding: "3px 0", borderTop: "1px dotted var(--jb-border)" }}><b>{k}</b>: <span style={{ fontFamily: "var(--jb-mono)" }}>{a}</span> <span style={{ color: "var(--jb-text-muted)" }}>{String(a).split(" / ").map(nm).join(" / ")}</span></div>)}
            <div style={{ marginTop: 6, color: "var(--jb-text-muted)" }}>Payments after close post their own entry against A/R {A.arCustomer}. Voids and refunds post reversing entries — nothing is deleted. Every entry carries the RO #.</div>
          </div>
        </div>
      </div>
      {jeId && JE && <JE id={jeId} go={go} onClose={() => setJeId(null)} onOpenJe={(x) => setJeId(x)} />}
    </>
  );
};

// ─── Add Labor Op (L4: the store's op list → a new job's starting price) ─────────────
const AddOpModal = ({ ro, act, defPay, defTech, cfg, onClose }) => {
  const [q, setQ] = React.useState("");
  const cat = ((cfg && cfg.money && cfg.money.opCatalog && cfg.money.opCatalog.ops) || SVC_OP_CATALOG);
  const rows = cat.filter(o => !q || (o.op + " " + o.desc).toLowerCase().includes(q.toLowerCase()));
  return (
    <K2BModal title={`Add Labor Op — ${ro.id}`} onClose={onClose} width={620}>
      <div style={{ marginBottom: 10 }}><JBSearch value={q} onChange={setQ} autoFocus name="k2b-labor-op-find" placeholder="OIL, BRK, DIAG, ALIGN…" /></div>
      <div style={{ border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", maxHeight: 360, overflow: "auto" }}>
        {rows.length === 0 && q && <JBSearchEmpty q={q} noun="labor ops" onClear={() => setQ("")} />}
        {rows.map(o => (
          <button key={o.op} onClick={() => { act(DMS.addROJob(ro.id, { op: o.op, desc: o.desc, hrs: o.hrs, rateMode: "flat", flat: o.lab, payType: defPay || "Customer", techId: defTech != null ? defTech : (ro.techId || "") })); onClose(); }}
                  style={{ display: "grid", gridTemplateColumns: "120px 1fr 60px 90px", gap: 8, width: "100%", textAlign: "left",
                           padding: "9px 12px", border: "none", borderBottom: "1px solid var(--jb-border)", background: "var(--jb-surface)",
                           cursor: "pointer", fontFamily: "var(--jb-font)", fontSize: 12.5, alignItems: "center", color: "var(--jb-text)" }}>
            <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{o.op}</span>
            <span>{o.desc}</span>
            <span style={{ textAlign: "right", fontFamily: "var(--jb-mono)", color: "var(--jb-text-dim)" }}>{(+o.hrs || 0).toFixed(1)}h</span>
            <span style={{ textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{jbm(o.lab)}</span>
          </button>
        ))}
      </div>
    </K2BModal>
  );
};

// ─── Add Part (live availability) ────────────────────────────────────────
const AddPartModal = ({ ro, parts, act, onClose, onPick }) => {
  const [q, setQ] = React.useState("");
  const [custom, setCustom] = React.useState({ part: "", desc: "", qty: "1", price: "", cost: "" });
  const rows = parts.filter(p => !q || (p.part + " " + (p.desc || "") + " " + (p.bin || "")).toLowerCase().includes(q.toLowerCase())).slice(0, 80);
  const choose = (p) => { const r = onPick ? onPick(p) : act(DMS.addROPart(ro.id, p.part, 1)); if (!r || r.ok) onClose(); };
  return (
    <K2BModal title={`Add Part — ${ro.id}`} onClose={onClose} width={720}>
      <div style={{ marginBottom: 10 }}><JBSearch value={q} onChange={setQ} autoFocus name="k2b-part-find" placeholder="Part # / description / bin…" /></div>
      <div style={{ border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", maxHeight: 300, overflow: "auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "130px 1fr 70px 70px 80px", gap: 8, padding: "6px 12px",
                      fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em",
                      color: "var(--jb-text-muted)", background: "var(--jb-surface-2)", borderBottom: "1px solid var(--jb-border)", position: "sticky", top: 0 }}>
          <span>Part #</span><span>Description</span><span style={{ textAlign: "right" }}>Avail</span><span style={{ textAlign: "right" }}>Cost</span><span style={{ textAlign: "right" }}>List</span>
        </div>
        {rows.map(p => {
          const avail = p.onHand - p.committed;
          return (
            <button key={p.part} data-ro-partpick={p.part} onClick={() => choose(p)}
                    style={{ display: "grid", gridTemplateColumns: "130px 1fr 70px 70px 80px", gap: 8, width: "100%", textAlign: "left",
                             padding: "8px 12px", border: "none", borderBottom: "1px solid var(--jb-border)", background: "var(--jb-surface)",
                             cursor: "pointer", fontFamily: "var(--jb-font)", fontSize: 12.5, alignItems: "center", color: "var(--jb-text)" }}>
              <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{p.part}</span>
              <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.desc}{p.bin ? <span style={{ color: "var(--jb-text-muted)" }}> · {p.bin}</span> : null}</span>
              <span style={{ textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700, color: avail <= 0 ? "var(--jb-red)" : avail <= 4 ? "var(--jb-amber)" : "var(--jb-green)" }}>{avail}</span>
              <span style={{ textAlign: "right", fontFamily: "var(--jb-mono)", color: "var(--jb-text-dim)" }}>{jbm(p.cost)}</span>
              <span style={{ textAlign: "right", fontFamily: "var(--jb-mono)" }}>{jbm(p.list)}</span>
            </button>
          );
        })}
        {rows.length === 0 && <div style={{ padding: 16, color: "var(--jb-text-muted)", fontSize: 13, display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>No parts match{q ? ` '${q}'` : ""} — order it from the Parts Department, or add it as a non-stock line below.{q ? <button type="button" className="k2b-button small" data-search-clear="1" onClick={() => setQ("")}>Clear search</button> : null}</div>}
      </div>
      {onPick && (
        <div style={{ marginTop: 10, display: "grid", gridTemplateColumns: "110px 1fr 60px 80px 80px auto", gap: 6, alignItems: "center" }}>
          <input value={custom.part} onChange={(e) => setCustom({ ...custom, part: e.target.value.toUpperCase() })} placeholder="Part #" autoComplete="off" style={roInp} />
          <input value={custom.desc} onChange={(e) => setCustom({ ...custom, desc: e.target.value })} placeholder="Non-stock description" autoComplete="off" style={roInp} />
          <input value={custom.qty} onChange={(e) => setCustom({ ...custom, qty: e.target.value.replace(/[^0-9.]/g, "") })} autoComplete="off" style={roInp} />
          <input value={custom.cost} onChange={(e) => setCustom({ ...custom, cost: e.target.value.replace(/[^0-9.]/g, "") })} placeholder="Cost" autoComplete="off" style={roInp} />
          <input value={custom.price} onChange={(e) => setCustom({ ...custom, price: e.target.value.replace(/[^0-9.]/g, "") })} placeholder="Price" autoComplete="off" style={roInp} />
          <K2BButton small onClick={() => { if (!custom.desc || !(+custom.price > 0)) return act({ ok: false, msg: "Non-stock part needs a description and a price." }); const r = onPick({ ...custom, qty: +custom.qty || 1 }); if (!r || r.ok) onClose(); }}>Add</K2BButton>
        </div>
      )}
    </K2BModal>
  );
};


// ─── Service Setup › "Preview an RO" (lane rset): the RO screen for a made-up RO with the UNSAVED choices, look only ─────
//   <RoScreenPreview settings={DMS.svcResolveSettings(unsaved, {})} ro={madeUpRo} role="Service Advisor" layout="desk" height={620} />
// Nothing in it acts (inert); the helpers read the passed settings, so steps, words, lists, tabs, money line and buttons follow them.
const RoScreenPreview = ({ settings, ro, role, layout, height }) => {
  const cfg = settings && settings.ro ? settings : roCfgOf();
  const view = (() => { try { return DMS.svcRoleView({ settings: cfg, role }); } catch (e) { return roRoleViewGet(); } })();
  const lay = layout || "desk";
  const ref = React.useRef(null);
  React.useEffect(() => { try { if (ref.current) ref.current.setAttribute("inert", ""); } catch (e) {} }, []);
  if (!ro) return null;
  return (
    <div ref={ref} data-ro-preview="1" aria-label="Preview — nothing here can be changed" style={{ height: height || 620, width: lay === "phone" ? 390 : "100%", maxWidth: "100%", border: "1px dashed var(--jb-border-strong)", borderRadius: 10, overflow: "hidden", background: "var(--jb-bg)", pointerEvents: "none", display: "flex", flexDirection: "column" }}>
      <RoEditor ro={ro} techs={(DMS.technicians && DMS.technicians()) || []} parts={[]} act={() => ({ ok: false })} go={null} layout={lay} cfg={cfg} view={view} dense={false}
                myView={{ remember: false, open: {} }} saveMyView={() => ({ ok: false })} closing={false} listHidden={false} listCount={0} onShowList={() => {}}
                techPhone={false} onBackToJobs={() => {}} onCloseRO={async () => ({ ok: false })} onFlag={() => {}} onChangeCustomer={() => {}} />
    </div>
  );
};

Object.assign(window, { ServiceTickets, RoScreenPreview, roOkWholeJobs, RoMpiCard, roGroupOf, roWaitingOn, roPromiseText, roPromiseLate, roOwesNow, roMeIds, roIsMine, roStatusWord, RO_GROUP_META, RO_GROUPS, roGroupLabel, roCfgOf });