/* 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. */
// K2B Network Solutions — GM Standard Accounting (GMACCT).
// The "factory side" of the back office: financial statement build,
// journal entry, schedule inquiry, and GMDS financial submission.
// Account numbers, page numbers and column headers track the GM
// Standard Accounting Manual (GMSAM v3.0).

// ─── data ─────────────────────────────────────────────────────────────────
// Statement period = the ledger's OPEN accounting period (DMS.periodStatus),
// never a literal. gmPer() → "09 / 2026"; gmPerKey() → "2026-09".
const gmPerKey = () => (typeof glOpenPeriod === "function" ? glOpenPeriod()
  : ((window.DMS && window.DMS.periodStatus && window.DMS.periodStatus().open) || new Date().toISOString().slice(0, 7)));
const gmPer = () => { const [y, m] = gmPerKey().split("-"); return m + " / " + y; };
const gmFileName = () => `GMFS_${GM_DEALER.code}_${gmPerKey().replace("-", "")}.GMX`;
const gmStamp = () => new Date().toLocaleString("en-US", { month: "2-digit", day: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false }).replace(",", "");
const gmLastLockout = () => {
  const D = window.DMS; const closed = (D && D.periodStatus ? D.periodStatus().closed : []) || [];
  if (!closed.length) return "none yet";
  const last = closed.slice().sort().pop();
  return D.periodRange ? D.periodRange(last).endLabel : last;
};
// RC35 (brd): the ACTIVE store's GM codes and names (Owner Panel > Stores) - read when used, never written here
const GM_DEALER   = { get bac() { return K2BPrint.brand().gm.bac; }, get code() { return K2BPrint.brand().gm.dealerCode; }, get name() { return K2BPrint.party.print(); },
  get zone() { return K2BPrint.brand().gm.zone; }, get region() { return K2BPrint.brand().gm.region; }, get state() { return K2BPrint.brand().state; }, get license() { return K2BPrint.party.licenseNo(); } };
const GM_STMT_REV = "12 — Rev D";

const fmt = (n, paren = true) => {
  if (n === 0 || n === undefined || n === null) return "";
  const a = Math.abs(n).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  return n < 0 ? (paren ? `(${a})` : `-${a}`) : a;
};
const fmt0 = (n) => {
  if (n === 0 || n == null) return "";
  const a = Math.abs(n).toLocaleString("en-US");
  return n < 0 ? `(${a})` : a;
};
const pct = (n) => (n == null ? "" : (n >= 0 ? " " : "") + n.toFixed(1) + "%");

// Departmental P&L recap — GMSAM page 1 layout.
// Columns: Sales / Cost / Gross / Sell+Pers / Semi+Fix / Net.
const GM_DEPTS = [
  { k: "NV",  num: "01", name: "New Vehicle",       sales: 4_212_840.22, cogs: 3_891_204.18, gross:  321_636.04, expSell:  168_402.55, expSemi:  88_402.10, expFix: 162_801.00, net:  -97_969.61 },
  { k: "UV",  num: "02", name: "Used Vehicle",      sales: 1_842_018.10, cogs: 1_512_402.00, gross:  329_616.10, expSell:   78_402.50, expSemi:  44_201.20, expFix: 102_881.40, net:  104_131.00 },
  { k: "MS",  num: "03", name: "Mechanical Service",sales:   612_402.00, cogs:   281_188.10, gross:  331_213.90, expSell:   42_182.10, expSemi:  61_402.00, expFix:  88_910.10, net:  138_719.70 },
  { k: "BS",  num: "04", name: "Body Shop",         sales:   188_402.10, cogs:    82_188.20, gross:  106_213.90, expSell:   12_188.00, expSemi:  18_402.10, expFix:  31_402.10, net:   44_221.70 },
  { k: "PT",  num: "05", name: "Parts",             sales:   742_188.05, cogs:   512_402.40, gross:  229_785.65, expSell:   24_188.00, expSemi:  38_402.10, expFix:  62_402.20, net:  104_793.35 },
  { k: "LR",  num: "06", name: "Lease & Rental",    sales:    44_812.18, cogs:    18_402.00, gross:   26_410.18, expSell:    3_188.00, expSemi:   2_188.10, expFix:   4_402.00, net:   16_632.08 },
  { k: "FI",  num: "07", name: "F & I",             sales:   208_402.55, cogs:    18_402.00, gross:  190_000.55, expSell:   42_188.00, expSemi:  18_402.00, expFix:  22_802.00, net:  106_608.55 },
];
const GM_TOTAL = GM_DEPTS.reduce((t, d) => ({
  sales: t.sales + d.sales, cogs: t.cogs + d.cogs, gross: t.gross + d.gross,
  expSell: t.expSell + d.expSell, expSemi: t.expSemi + d.expSemi, expFix: t.expFix + d.expFix,
  net: t.net + d.net,
}), { sales: 0, cogs: 0, gross: 0, expSell: 0, expSemi: 0, expFix: 0, net: 0 });

// Balance sheet — collapsed to GMSAM page 2 outline
const GM_BAL = {
  assets: [
    { sect: "Cash & Receivables", rows: [
      ["201", "Cash on Hand",                       18_402.10],
      ["202", "Cash in Bank — Operating",          412_188.50],
      ["205", "Cash in Bank — Payroll",             88_402.00],
      ["220", "Contracts in Transit",              482_018.20],
      ["230", "Customer Accounts Receivable",      188_402.55],
      ["234", "Warranty Claims Receivable",         62_188.10],
    ]},
    { sect: "Inventories", rows: [
      ["240", "New Vehicle Inventory",           4_211_840.22],
      ["244", "Used Vehicle Inventory",            872_310.55],
      ["246", "Lease & Rental Vehicles",           118_400.00],
      ["260", "Parts Inventory",                   241_882.10],
      ["262", "Tires",                              18_402.10],
      ["266", "Body Shop Materials",                12_402.00],
    ]},
    { sect: "Fixed Assets", rows: [
      ["270", "Land",                              188_000.00],
      ["271", "Buildings & Improvements",          812_000.00],
      ["275", "Machinery, Shop & Service Equip.",  244_188.00],
      ["278", "Accum. Depreciation",              -288_402.00],
    ]},
  ],
  liabEq: [
    { sect: "Current Liabilities", rows: [
      ["300", "Notes Payable — New Vehicles",   -3_980_223.18],
      ["311", "Notes Payable — Used Vehicles",    -512_900.00],
      ["318", "Accounts Payable — Trade",         -244_188.30],
      ["321", "Salaries, Wages & Comm. Payable",   -84_192.45],
      ["324", "Sales Tax Payable",                 -23_811.20],
      ["330", "Customer Deposits",                 -28_402.10],
      ["340", "Allow. for Doubtful Accounts",      -12_400.00],
    ]},
    { sect: "Long-Term Liabilities", rows: [
      ["360", "Mortgage Payable",                 -688_402.00],
      ["365", "Notes Payable — Officers",         -100_000.00],
    ]},
    { sect: "Owners' Equity", rows: [
      ["368", "Capital Stock",                    -250_000.00],
      ["369", "Paid-In Capital",                  -188_402.00],
      ["370", "Retained Earnings",              -1_447_182.06],
      ["375", "Current YTD Net Profit",            -417_137.27],
    ]},
  ],
};

// Pacing — monthly net profit by department, last 6 months
const GM_PACE = {
  months: ["DEC", "JAN", "FEB", "MAR", "APR", "MAY"],
  rows: [
    { name: "Dealership Total",  v: [ 188_402, 142_188,  68_402, 188_402, 244_188, 417_137], goal: 320_000 },
    { name: "New Vehicle",       v: [ -28_188, -88_402, -118_402, -44_188,  18_402,  -97_969], goal:   40_000 },
    { name: "Used Vehicle",      v: [  72_188,  88_402,  44_188,  98_402, 118_402, 104_131], goal:   90_000 },
    { name: "Service",           v: [ 142_188, 112_402,  98_402, 138_402, 142_188, 138_719], goal:  140_000 },
    { name: "Body Shop",         v: [  18_402,  22_188,  18_402,  28_402,  38_402,  44_221], goal:   38_000 },
    { name: "Parts",             v: [  88_402,  72_188,  68_402,  98_402, 102_188, 104_793], goal:  100_000 },
    { name: "F & I",             v: [  82_402,  88_402,  72_188,  88_402,  98_402, 106_608], goal:   95_000 },
  ],
};

// Schedule 240 — New Vehicle Inventory drill
const SCHED_240 = [
  { stock: "C26-1184", vin: "1G1ZD5ST*RF128442", model: "2026 MALIBU LT",        days:  18, cost:  29_184.20 },
  { stock: "T26-2018", vin: "3GCUKEED*PG211884", model: "2026 SILVERADO 1500 LT", days:  42, cost:  52_184.18 },
  { stock: "T26-2099", vin: "1GNERGKW*PJ200712", model: "2026 TRAVERSE LT AWD",   days:  31, cost:  48_910.00 },
  { stock: "C26-1188", vin: "1G1ZD5ST*RF128501", model: "2026 MALIBU LT",        days:  18, cost:  28_902.55 },
  { stock: "T26-2102", vin: "1GNERGKW*PJ200804", model: "2026 TRAVERSE Premier",  days: 102, cost:  56_188.00 },
  { stock: "T26-2110", vin: "1GCUKEED*PG211999", model: "2026 SILVERADO TRAIL",   days:  74, cost:  61_402.10 },
  { stock: "B26-3018", vin: "5GAEVAKW*PJ141880", model: "2026 BLAZER RS",         days:  22, cost:  44_802.30 },
  { stock: "T26-2118", vin: "1GKKNML4*PZ128002", model: "2026 ACADIA AT4",        days:  88, cost:  52_018.40 },
  { stock: "S26-4002", vin: "1GNEVHKW*PJ188224", model: "2026 SUBURBAN LT",       days: 124, cost:  68_402.55 },
  { stock: "C26-1199", vin: "1G1ZD5ST*RF128711", model: "2026 MALIBU 2LT",        days:  12, cost:  31_018.18 },
  { stock: "T26-2122", vin: "3GCUKEED*PG212018", model: "2026 SILVERADO LTZ",     days:   8, cost:  58_402.20 },
];

// Trial balance — re-use the GLINQ list but condensed
const GM_TRIAL = [
  ["201", "Cash on Hand",                            18_402.10, 0],
  ["202", "Cash in Bank — Operating",               412_188.50, 0],
  ["230", "Customer A/R",                           188_402.55, 0],
  ["240", "New Vehicle Inventory",                4_211_840.22, 0],
  ["244", "Used Vehicle Inventory",                 872_310.55, 0],
  ["260", "Parts Inventory",                        241_882.10, 0],
  ["300", "Notes Payable — New Vehicles",                    0, 3_980_223.18],
  ["311", "Notes Payable — Used Vehicles",                   0,   512_900.00],
  ["318", "Accounts Payable — Trade",                        0,   244_188.30],
  ["321", "Salaries & Comm. Payable",                        0,    84_192.45],
  ["370", "Retained Earnings",                               0, 1_447_182.06],
  ["400", "New Cars — Retail (ICE)",                         0,   742_188.05],
  ["405", "New Trucks — Retail (ICE)",                       0,   881_402.99],
  ["460A","Customer Labor — C&LDT",                          0,   188_402.50],
  ["660A","Cost — Customer Labor (C&LDT)",            71_002.85, 0],
  ["740", "F & I Income — New",                              0,    98_402.10],
  ["855", "F & I Compensation — New",                  32_188.00, 0],
];

const GM_PAGES = [
  { k: "cover", num: "—",   label: "Cover" },
  { k: "p1",    num: "P-1", label: "Operating Report" },
  { k: "p2",    num: "P-2", label: "Balance Sheet" },
  { k: "p9",    num: "P-9", label: "Pacing & Trends" },
  { sep: true },
  { k: "tb",    num: "TB",  label: "Trial Balance" },
  { k: "sched", num: "SCH", label: "Schedule Inquiry" },
  { k: "je",    num: "JE",  label: "Journal Entry" },
  { sep: true },
  { k: "coa",   num: "COA", label: "Chart of Accounts" },
  { k: "depts", num: "DPT", label: "Departments" },
  { k: "jtpl",  num: "JTL", label: "Std Journals" },
  { k: "rpts",  num: "RPT", label: "Reports" },
  { sep: true },
  { k: "sub",   num: "SBM", label: "GMDS Submit" },
];

// ─── shared atoms ─────────────────────────────────────────────────────────
const SectHead = ({ children, right }) => (
  <div style={{
    display: "flex", justifyContent: "space-between", alignItems: "baseline",
    color: "var(--k2b-maroon)", fontWeight: 700, fontSize: 13,
    borderBottom: "1px solid var(--k2b-maroon)", padding: "1px 4px", marginBottom: 2,
  }}>
    <span>{children}</span>
    {right ? <span style={{ fontSize: 11, color: "var(--k2b-navy)" }}>{right}</span> : null}
  </div>
);

const FieldChip = ({ label, value, w = 110, hot, valColor }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
    <span style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>{label}</span>
    <span style={{
      background: hot ? "var(--k2b-yellow)" : "#FFFFE1",
      border: "1px solid #808080", padding: "0 6px", minWidth: w,
      color: valColor || "var(--k2b-blue-data-dk)", textAlign: "left",
    }}>{value}</span>
  </span>
);

// ─── page components ──────────────────────────────────────────────────────
const PageCover = () => (
  <div style={{ display: "grid", gridTemplateColumns: "1fr 280px", gap: 12, padding: 12 }}>
    <div style={{ background: "#FFFFFF", border: "1px solid #808080", padding: "14px 18px" }}>
      <div style={{ textAlign: "center", borderBottom: "2px solid var(--k2b-navy)", paddingBottom: 8, marginBottom: 10 }}>
        <div style={{ fontFamily: "'Times New Roman', serif", fontStyle: "italic", color: "var(--k2b-navy-deep)", fontSize: 22, fontWeight: 700 }}>
          General Motors Dealer Financial Statement
        </div>
        <div style={{ color: "var(--k2b-maroon)", fontWeight: 700, marginTop: 2 }}>
          GMSAM v3.0 — Statement Form 12 (Rev D)
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "150px 1fr", rowGap: 2, columnGap: 12, fontFamily: "'Courier Prime', monospace", fontSize: 13 }}>
        <span style={{ color: "var(--k2b-maroon)" }}>Dealer Name......:</span>   <span style={{ color: "var(--k2b-blue-data-dk)" }}>{GM_DEALER.name}</span>
        <span style={{ color: "var(--k2b-maroon)" }}>Business Code....:</span>   <span style={{ color: "var(--k2b-blue-data-dk)" }}>{GM_DEALER.bac}</span>
        <span style={{ color: "var(--k2b-maroon)" }}>DMS Dealer Id....:</span>   <span style={{ color: "var(--k2b-blue-data-dk)" }}>{GM_DEALER.code}</span>
        <span style={{ color: "var(--k2b-maroon)" }}>Make.............:</span>   <span style={{ color: "var(--k2b-blue-data-dk)" }}>CHEVROLET / GMC / BUICK</span>
        <span style={{ color: "var(--k2b-maroon)" }}>Zone — Region....:</span>   <span style={{ color: "var(--k2b-blue-data-dk)" }}>{GM_DEALER.zone} — {GM_DEALER.region}</span>
        <span style={{ color: "var(--k2b-maroon)" }}>Statement Period.:</span>   <span style={{ color: "var(--k2b-blue-data-dk)" }}>{gmPer()}</span>
        <span style={{ color: "var(--k2b-maroon)" }}>Statement Rev....:</span>   <span style={{ color: "var(--k2b-blue-data-dk)" }}>{GM_STMT_REV}</span>
        <span style={{ color: "var(--k2b-maroon)" }}>Prepared By......:</span>   <span style={{ color: "var(--k2b-blue-data-dk)" }}>{(window.DMS && window.DMS.userId && window.DMS.userId()) || "—"}</span>
        <span style={{ color: "var(--k2b-maroon)" }}>Submission Status:</span>   <span style={{ color: "var(--k2b-green)", fontWeight: 700 }}>OPEN — last lockout {gmLastLockout()}</span>
      </div>
      <div style={{ marginTop: 14, paddingTop: 8, borderTop: "1px dashed #909090",
                    fontFamily: "'Courier Prime', monospace", fontSize: 12, color: "var(--k2b-navy)", lineHeight: 1.45 }}>
        This screen builds the GM Dealer Financial Statement directly from the
        K2B general ledger. Departmental totals on P-1 are summed from posted
        journal entries through period close; schedules (SCH) drill any control
        account to the supporting subledger. GMDS Submit transmits the finished
        statement to GM via the established SFTP submission window.
        <br /><br />
        Use the page selector on the left to walk pages. All values shown
        reflect the open period <b>{gmPer()}</b>.
      </div>
    </div>
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <div style={{ background: "var(--k2b-navy)", color: "#FFFFFF", padding: "10px 12px", border: "1px solid #000" }}>
        <div style={{ color: "var(--k2b-yellow)", fontWeight: 700, marginBottom: 4, fontFamily: "'Courier Prime', monospace" }}>Period at a Glance</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 1, fontFamily: "'Courier Prime', monospace", fontSize: 12 }}>
          <span>Net Profit MTD..</span>  <span style={{ color: "var(--k2b-yellow)" }}>{fmt(GM_TOTAL.net)}</span>
          <span>Sales MTD.......</span>  <span>{fmt(GM_TOTAL.sales)}</span>
          <span>Gross Profit....</span>  <span>{fmt(GM_TOTAL.gross)}</span>
          <span>G/P %...........</span>  <span>{pct(GM_TOTAL.gross / GM_TOTAL.sales * 100)}</span>
          <span>Goal Variance...</span>  <span style={{ color: "var(--k2b-yellow)" }}>{fmt(GM_TOTAL.net - 320_000)}</span>
        </div>
      </div>
      <div style={{ background: "#FFFFFF", border: "1px solid #808080", padding: 8, fontFamily: "'Courier Prime', monospace", fontSize: 12 }}>
        <div style={{ color: "var(--k2b-maroon)", fontWeight: 700, marginBottom: 4 }}>Open period checks — {gmPer()}</div>
        {((window.DMS && window.DMS.monthEndChecklist) ? window.DMS.monthEndChecklist() : []).map(c => {
          const ok = c.ok != null ? c.ok : c.done;
          return <div key={c.key || c.label}>[<span style={{ color: ok ? "var(--k2b-green)" : "#B26A00", fontWeight: 700 }}>{ok ? "✓" : "!"}</span>] {c.label}{ok ? "" : " — " + c.detail}</div>;
        })}
      </div>
    </div>
  </div>
);

// P-1 Operating Report — the marquee page
const PageOperating = () => {
  const Row = ({ d, total }) => (
    <tr style={{ background: total ? "#E8E8E8" : "transparent" }}>
      <td style={{ padding: "1px 6px", color: total ? "var(--k2b-maroon)" : "#666", fontWeight: total ? 700 : 400, width: 32 }}>{d.num || ""}</td>
      <td style={{ padding: "1px 6px", color: "var(--k2b-maroon)", fontWeight: 700 }}>{d.name}</td>
      <td style={{ padding: "1px 6px", textAlign: "right" }}>{fmt(d.sales)}</td>
      <td style={{ padding: "1px 6px", textAlign: "right" }}>{fmt(d.cogs)}</td>
      <td style={{ padding: "1px 6px", textAlign: "right", color: "var(--k2b-navy)", fontWeight: 700 }}>{fmt(d.gross)}</td>
      <td style={{ padding: "1px 6px", textAlign: "right", color: "#666" }}>{pct(d.gross / d.sales * 100)}</td>
      <td style={{ padding: "1px 6px", textAlign: "right" }}>{fmt(d.expSell)}</td>
      <td style={{ padding: "1px 6px", textAlign: "right" }}>{fmt(d.expSemi)}</td>
      <td style={{ padding: "1px 6px", textAlign: "right" }}>{fmt(d.expFix)}</td>
      <td style={{ padding: "1px 6px", textAlign: "right", fontWeight: 700,
                   color: d.net < 0 ? "var(--k2b-maroon)" : "var(--k2b-blue-data-dk)" }}>{fmt(d.net)}</td>
    </tr>
  );
  return (
    <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8, height: "100%", boxSizing: "border-box" }}>
      <SectHead right={`Page 1 — Operating Report — ${gmPer()}`}>Departmental Income / (Loss)</SectHead>
      <div style={{ background: "#FFFFFF", border: "1px solid #808080", overflow: "auto" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 13 }}>
          <thead>
            <tr style={{ background: "#C0C0C0", borderBottom: "1px solid #808080", color: "var(--k2b-maroon)" }}>
              <th style={{ padding: "2px 6px", textAlign: "left",  width: 32 }}>Dpt</th>
              <th style={{ padding: "2px 6px", textAlign: "left" }}>Department</th>
              <th style={{ padding: "2px 6px", textAlign: "right" }}>Sales</th>
              <th style={{ padding: "2px 6px", textAlign: "right" }}>Cost of Sales</th>
              <th style={{ padding: "2px 6px", textAlign: "right" }}>Gross Profit</th>
              <th style={{ padding: "2px 6px", textAlign: "right" }}>G/P %</th>
              <th style={{ padding: "2px 6px", textAlign: "right" }}>Sell + Pers</th>
              <th style={{ padding: "2px 6px", textAlign: "right" }}>Semi-Fix</th>
              <th style={{ padding: "2px 6px", textAlign: "right" }}>Fixed</th>
              <th style={{ padding: "2px 6px", textAlign: "right" }}>Net Profit</th>
            </tr>
          </thead>
          <tbody style={{ color: "var(--k2b-blue-data-dk)" }}>
            {GM_DEPTS.map((d) => <Row key={d.k} d={d} />)}
            <Row d={{ num: "", name: "Dealership Total", ...GM_TOTAL }} total />
          </tbody>
        </table>
      </div>

      {/* Bottom strip — comparisons */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }}>
        {[
          ["MTD Net",        GM_TOTAL.net,        "vs Goal " + fmt(320000)],
          ["YTD Net",        GM_TOTAL.net * 4.7,  "vs PYTD " + fmt(GM_TOTAL.net * 3.8)],
          ["Sales MTD",      GM_TOTAL.sales,      "vs Goal " + fmt(7_400_000)],
          ["Gross G/P %",    null,                pct(GM_TOTAL.gross / GM_TOTAL.sales * 100)],
        ].map(([label, val, sub], i) => (
          <div key={i} style={{ background: "var(--k2b-navy)", color: "#FFFFFF", padding: "6px 8px", border: "1px solid #000",
                                fontFamily: "'Courier Prime', monospace" }}>
            <div style={{ color: "var(--k2b-yellow)", fontWeight: 700, fontSize: 12 }}>{label}</div>
            <div style={{ fontSize: 18, textAlign: "right" }}>
              {val != null ? fmt(val) : <span style={{ color: "var(--k2b-yellow)" }}>{sub}</span>}
            </div>
            {val != null ? <div style={{ fontSize: 11, textAlign: "right", color: "#A8C0E8" }}>{sub}</div> : null}
          </div>
        ))}
      </div>
    </div>
  );
};

// P-2 Balance Sheet
const PageBalance = () => {
  const totals = (groups) => groups.reduce((s, g) => s + g.rows.reduce((sg, r) => sg + r[2], 0), 0);
  const assetTotal = totals(GM_BAL.assets);
  const liabTotal  = totals(GM_BAL.liabEq);
  const Block = ({ title, groups, sign }) => (
    <div style={{ background: "#FFFFFF", border: "1px solid #808080", padding: "4px 8px", display: "flex", flexDirection: "column" }}>
      <SectHead right={`${sign > 0 ? "Debit balance" : "Credit balance"}`}>{title}</SectHead>
      <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 12 }}>
        <tbody>
        {groups.map((g, gi) => (
          <React.Fragment key={gi}>
            <tr><td colSpan={3} style={{ paddingTop: 6, color: "var(--k2b-maroon)", fontWeight: 700 }}>{g.sect}</td></tr>
            {g.rows.map((r, ri) => (
              <tr key={ri} style={{ background: ri % 2 ? "transparent" : "#FAFAFA" }}>
                <td style={{ padding: "0 6px", width: 50, color: "#666" }}>{r[0]}</td>
                <td style={{ padding: "0 6px", color: "var(--k2b-navy)" }}>{r[1]}</td>
                <td style={{ padding: "0 6px", textAlign: "right", color: r[2] * sign < 0 ? "var(--k2b-maroon)" : "var(--k2b-blue-data-dk)" }}>
                  {fmt(Math.abs(r[2]))}
                </td>
              </tr>
            ))}
            <tr><td colSpan={2} style={{ padding: "1px 6px", color: "var(--k2b-maroon)", borderTop: "1px solid #C0C0C0", textAlign: "right", fontWeight: 700 }}>Subtotal</td>
                <td style={{ padding: "1px 6px", borderTop: "1px solid #C0C0C0", textAlign: "right", color: "var(--k2b-navy)", fontWeight: 700 }}>
                  {fmt(Math.abs(g.rows.reduce((s, r) => s + r[2], 0)))}
                </td></tr>
          </React.Fragment>
        ))}
        </tbody>
      </table>
    </div>
  );
  const balanced = Math.abs(assetTotal + liabTotal) < 1;
  return (
    <div style={{ padding: 10, height: "100%", display: "flex", flexDirection: "column", gap: 8 }}>
      <SectHead right={`Page 2 — Balance Sheet — ${gmPer()}`}>Statement of Financial Position</SectHead>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, flex: 1, minHeight: 0, overflow: "auto" }}>
        <Block title="Assets"             groups={GM_BAL.assets}  sign={ 1} />
        <Block title="Liabilities & Equity" groups={GM_BAL.liabEq} sign={-1} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
        <div style={{ background: "var(--k2b-navy)", color: "#FFF", padding: "6px 10px", fontFamily: "'Courier Prime', monospace" }}>
          <div style={{ color: "var(--k2b-yellow)", fontWeight: 700 }}>Total Assets</div>
          <div style={{ fontSize: 18, textAlign: "right" }}>{fmt(assetTotal)}</div>
        </div>
        <div style={{ background: "var(--k2b-navy)", color: "#FFF", padding: "6px 10px", fontFamily: "'Courier Prime', monospace" }}>
          <div style={{ color: "var(--k2b-yellow)", fontWeight: 700 }}>Total Liab. + Equity</div>
          <div style={{ fontSize: 18, textAlign: "right" }}>{fmt(Math.abs(liabTotal))}</div>
        </div>
        <div style={{ background: balanced ? "var(--k2b-green)" : "var(--k2b-maroon)", color: "#FFF", padding: "6px 10px",
                      fontFamily: "'Courier Prime', monospace" }}>
          <div style={{ color: "var(--k2b-yellow)", fontWeight: 700 }}>Balance Check</div>
          <div style={{ fontSize: 18, textAlign: "right" }}>{balanced ? "IN BALANCE" : fmt(assetTotal + liabTotal)}</div>
        </div>
      </div>
    </div>
  );
};

// P-9 Pacing
const PagePacing = () => {
  const maxAbs = Math.max(...GM_PACE.rows.flatMap(r => r.v.map(Math.abs)));
  return (
    <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8, height: "100%" }}>
      <SectHead right={`Page 9 — Pacing — 6-Month Trend through ${gmPer()}`}>Net Profit by Department</SectHead>
      <div style={{ background: "#FFFFFF", border: "1px solid #808080", overflow: "auto", flex: 1, minHeight: 0 }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 12 }}>
          <thead>
            <tr style={{ background: "#C0C0C0", color: "var(--k2b-maroon)", borderBottom: "1px solid #808080" }}>
              <th style={{ padding: "2px 6px", textAlign: "left", width: 180 }}>Department</th>
              {GM_PACE.months.map(m => <th key={m} style={{ padding: "2px 6px", textAlign: "right", width: 86 }}>{m}</th>)}
              <th style={{ padding: "2px 6px", textAlign: "right", width: 100 }}>Goal</th>
              <th style={{ padding: "2px 6px", textAlign: "right", width: 100 }}>Var</th>
              <th style={{ padding: "2px 6px", textAlign: "left",  width: 160 }}>Trend</th>
            </tr>
          </thead>
          <tbody style={{ color: "var(--k2b-blue-data-dk)" }}>
            {GM_PACE.rows.map((r, i) => {
              const cur = r.v[r.v.length - 1];
              const variance = cur - r.goal;
              return (
                <tr key={i} style={{ background: i === 0 ? "#FFFCD8" : (i % 2 ? "#F4F4F4" : "#FFFFFF") }}>
                  <td style={{ padding: "1px 6px", color: "var(--k2b-maroon)", fontWeight: 700 }}>{r.name}</td>
                  {r.v.map((n, j) => (
                    <td key={j} style={{ padding: "1px 6px", textAlign: "right",
                                          color: n < 0 ? "var(--k2b-maroon)" : "var(--k2b-blue-data-dk)" }}>
                      {fmt0(Math.round(n))}
                    </td>
                  ))}
                  <td style={{ padding: "1px 6px", textAlign: "right" }}>{fmt0(r.goal)}</td>
                  <td style={{ padding: "1px 6px", textAlign: "right",
                                color: variance < 0 ? "var(--k2b-maroon)" : "var(--k2b-green)", fontWeight: 700 }}>
                    {fmt0(variance)}
                  </td>
                  <td style={{ padding: "1px 6px" }}>
                    <Sparkbar values={r.v} max={maxAbs} />
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const Sparkbar = ({ values, max }) => (
  <span style={{ display: "inline-flex", gap: 1, alignItems: "flex-end", height: 18 }}>
    {values.map((v, i) => {
      const h = Math.max(2, Math.round(Math.abs(v) / max * 16));
      return (
        <span key={i} title={fmt0(v)} style={{
          width: 8, height: h,
          background: v < 0 ? "var(--k2b-maroon)" : "var(--k2b-navy)",
          opacity: i === values.length - 1 ? 1 : 0.55,
        }} />
      );
    })}
  </span>
);

// Trial Balance
const PageTrial = () => {
  let dr = 0, cr = 0;
  GM_TRIAL.forEach(r => { dr += r[2]; cr += r[3]; });
  const balanced = Math.abs(dr - cr) < 0.01;
  return (
    <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8, height: "100%" }}>
      <SectHead right={`Trial Balance — ${gmPer()}`}>Pre-Close Trial</SectHead>
      <div style={{ background: "#FFFFFF", border: "1px solid #808080", overflow: "auto", flex: 1, minHeight: 0 }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 12 }}>
          <thead>
            <tr style={{ background: "#C0C0C0", color: "var(--k2b-maroon)", borderBottom: "1px solid #808080" }}>
              <th style={{ padding: "2px 6px", textAlign: "left", width: 64 }}>Acct</th>
              <th style={{ padding: "2px 6px", textAlign: "left" }}>Description</th>
              <th style={{ padding: "2px 6px", textAlign: "right", width: 140 }}>Debit</th>
              <th style={{ padding: "2px 6px", textAlign: "right", width: 140 }}>Credit</th>
            </tr>
          </thead>
          <tbody style={{ color: "var(--k2b-blue-data-dk)" }}>
            {GM_TRIAL.map((r, i) => (
              <tr key={i} style={{ background: i % 2 ? "#F4F4F4" : "#FFFFFF" }}>
                <td style={{ padding: "1px 6px", color: "#666" }}>{r[0]}</td>
                <td style={{ padding: "1px 6px", color: "var(--k2b-navy)" }}>{r[1]}</td>
                <td style={{ padding: "1px 6px", textAlign: "right" }}>{r[2] ? fmt(r[2]) : ""}</td>
                <td style={{ padding: "1px 6px", textAlign: "right" }}>{r[3] ? fmt(r[3]) : ""}</td>
              </tr>
            ))}
            <tr style={{ background: "#C0C0C0", borderTop: "1px solid #808080" }}>
              <td colSpan={2} style={{ padding: "2px 6px", color: "var(--k2b-maroon)", fontWeight: 700, textAlign: "right" }}>Totals</td>
              <td style={{ padding: "2px 6px", textAlign: "right", fontWeight: 700, color: "var(--k2b-navy)" }}>{fmt(dr)}</td>
              <td style={{ padding: "2px 6px", textAlign: "right", fontWeight: 700, color: "var(--k2b-navy)" }}>{fmt(cr)}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div style={{ background: balanced ? "var(--k2b-green)" : "var(--k2b-maroon)", color: "#FFF",
                    padding: "6px 10px", fontFamily: "'Courier Prime', monospace", textAlign: "center", fontWeight: 700 }}>
        {balanced ? "TRIAL BALANCE IS IN BALANCE" : "OUT OF BALANCE: " + fmt(dr - cr)}
      </div>
    </div>
  );
};

// Schedule Inquiry — drill account 240
const PageSchedule = () => {
  const total = SCHED_240.reduce((s, r) => s + r.cost, 0);
  return (
    <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8, height: "100%" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
        <FieldChip label="Acct....:"   value="240" w={70} hot />
        <FieldChip label="Title...:"   value="New Vehicle Inventory" w={250} />
        <FieldChip label="G/L Bal.:"   value={fmt(4_211_840.22)} w={130} />
        <FieldChip label="Sched...:"   value={fmt(total)} w={130} />
        <span style={{ color: Math.abs(4_211_840.22 - total) < 1 ? "var(--k2b-green)" : "var(--k2b-maroon)", fontWeight: 700 }}>
          {Math.abs(4_211_840.22 - total) < 1 ? "RECONCILES" : "OUT " + fmt(4_211_840.22 - total)}
        </span>
      </div>
      <div style={{ background: "#FFFFFF", border: "1px solid #808080", overflow: "auto", flex: 1, minHeight: 0 }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 12 }}>
          <thead>
            <tr style={{ background: "#C0C0C0", color: "var(--k2b-maroon)", borderBottom: "1px solid #808080" }}>
              <th style={{ padding: "2px 6px", textAlign: "left",  width: 110 }}>Stock #</th>
              <th style={{ padding: "2px 6px", textAlign: "left",  width: 200 }}>VIN</th>
              <th style={{ padding: "2px 6px", textAlign: "left" }}>Model</th>
              <th style={{ padding: "2px 6px", textAlign: "right", width: 80 }}>Days</th>
              <th style={{ padding: "2px 6px", textAlign: "right", width: 130 }}>Inv Cost</th>
            </tr>
          </thead>
          <tbody style={{ color: "var(--k2b-blue-data-dk)" }}>
            {SCHED_240.map((r, i) => (
              <tr key={i} style={{ background: i % 2 ? "#F4F4F4" : "#FFFFFF" }}>
                <td style={{ padding: "1px 6px", color: "var(--k2b-navy)" }}>{r.stock}</td>
                <td style={{ padding: "1px 6px" }}>{r.vin}</td>
                <td style={{ padding: "1px 6px", color: "var(--k2b-navy)" }}>{r.model}</td>
                <td style={{ padding: "1px 6px", textAlign: "right",
                              color: r.days > 90 ? "var(--k2b-maroon)" : r.days > 60 ? "#B26A00" : "var(--k2b-blue-data-dk)",
                              fontWeight: r.days > 90 ? 700 : 400 }}>{r.days}</td>
                <td style={{ padding: "1px 6px", textAlign: "right" }}>{fmt(r.cost)}</td>
              </tr>
            ))}
            <tr style={{ background: "#C0C0C0", borderTop: "1px solid #808080" }}>
              <td colSpan={3} style={{ padding: "2px 6px", color: "var(--k2b-maroon)", fontWeight: 700, textAlign: "right" }}>
                Total — {SCHED_240.length} units
              </td>
              <td style={{ padding: "2px 6px", textAlign: "right", fontWeight: 700, color: "var(--k2b-navy)" }}>
                {SCHED_240.reduce((s, r) => s + r.days, 0)}
              </td>
              <td style={{ padding: "2px 6px", textAlign: "right", fontWeight: 700, color: "var(--k2b-navy)" }}>{fmt(total)}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div style={{ background: "#FFFFE1", border: "1px solid #808080", padding: "4px 8px",
                    fontFamily: "'Courier Prime', monospace", fontSize: 12, color: "var(--k2b-navy)" }}>
        Aging  &nbsp; 0–30: <b>{SCHED_240.filter(r => r.days <= 30).length}</b>
        &nbsp;&nbsp; 31–60: <b>{SCHED_240.filter(r => r.days > 30 && r.days <= 60).length}</b>
        &nbsp;&nbsp; 61–90: <b>{SCHED_240.filter(r => r.days > 60 && r.days <= 90).length}</b>
        &nbsp;&nbsp; <span style={{ color: "var(--k2b-maroon)" }}>90+: <b>{SCHED_240.filter(r => r.days > 90).length}</b></span>
      </div>
    </div>
  );
};

// Journal Entry — interactive posting form
const PageJournal = ({ seed }) => {
  const [lines, setLines] = React.useState(seed?.lines || [
    { acct: "",     desc: "",                                  dr: "",         cr: "" },
    { acct: "",     desc: "",                                  dr: "",         cr: "" },
    { acct: "",     desc: "",                                  dr: "",         cr: "" },
    { acct: "",     desc: "",                                  dr: "",         cr: "" },
    { acct: "",     desc: "",                                  dr: "",         cr: "" },
  ]);
  const [ref, setRef] = React.useState("");          // assigned by the ledger on post
  const [date, setDate] = React.useState(() => typeof glDefaultEntryIso === "function" ? glDefaultEntryIso() : new Date().toISOString().slice(0, 10));
  const [memo, setMemo] = React.useState(seed?.memo || "");

  // When seed changes (user clicked Load on a template), replace lines + memo
  React.useEffect(() => {
    if (seed) {
      setLines(seed.lines);
      if (seed.memo) setMemo(seed.memo);
    }
  }, [seed]);
  const totalDr = lines.reduce((s, l) => s + (parseFloat(l.dr) || 0), 0);
  const totalCr = lines.reduce((s, l) => s + (parseFloat(l.cr) || 0), 0);
  const out = totalDr - totalCr;
  const set = (i, k, v) => setLines(L => L.map((l, j) => j === i ? { ...l, [k]: v } : l));

  return (
    <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8, height: "100%" }}>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
        <FieldChip label="Ref....:" value={ref || "(on post)"} w={90} />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
          <span style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>Date...:</span>
          <input type="date" value={date} onChange={(e) => setDate(e.target.value)}
                 style={{ background: "var(--k2b-yellow)", border: "1px solid #808080",
                          color: "var(--k2b-navy)", padding: "0 6px", fontFamily: "'Courier Prime', monospace" }} />
        </span>
        <FieldChip label="Source.:" value="GJ — General Journal" w={180} />
        <FieldChip label="Period.:" value={(() => { const [y, m] = String(date).split("-"); return m && y ? m + " / " + y : gmPer(); })()} w={90} />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4, flex: 1, minWidth: 280 }}>
          <span style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>Memo...:</span>
          <input value={memo} onChange={(e) => setMemo(e.target.value)}
                 style={{ background: "#FFFFE1", border: "1px solid #808080", color: "var(--k2b-blue-data-dk)",
                          padding: "0 6px", flex: 1, fontFamily: "'Courier Prime', monospace" }} />
        </span>
      </div>

      <div style={{ background: "#FFFFFF", border: "1px solid #808080", flex: 1, minHeight: 0, overflow: "auto" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 13 }}>
          <thead>
            <tr style={{ background: "#C0C0C0", color: "var(--k2b-maroon)", borderBottom: "1px solid #808080" }}>
              <th style={{ padding: "2px 6px", textAlign: "left",  width: 36 }}>Ln</th>
              <th style={{ padding: "2px 6px", textAlign: "left",  width: 80 }}>Acct</th>
              <th style={{ padding: "2px 6px", textAlign: "left" }}>Description</th>
              <th style={{ padding: "2px 6px", textAlign: "right", width: 140 }}>Debit</th>
              <th style={{ padding: "2px 6px", textAlign: "right", width: 140 }}>Credit</th>
            </tr>
          </thead>
          <tbody>
            {lines.map((l, i) => (
              <tr key={i} style={{ borderBottom: "1px dotted #C0C0C0" }}>
                <td style={{ padding: "1px 6px", color: "#666" }}>{String(i + 1).padStart(2, "0")}</td>
                <td style={{ padding: "1px 4px" }}>
                  <input value={l.acct} onChange={(e) => set(i, "acct", e.target.value)}
                         style={{ width: "100%", background: "#FFFFE1", border: "1px solid #C0C0C0",
                                  fontFamily: "'Courier Prime', monospace", color: "var(--k2b-blue-data-dk)" }} />
                </td>
                <td style={{ padding: "1px 4px" }}>
                  <input value={l.desc} onChange={(e) => set(i, "desc", e.target.value)}
                         style={{ width: "100%", background: "#FFFFE1", border: "1px solid #C0C0C0",
                                  fontFamily: "'Courier Prime', monospace", color: "var(--k2b-blue-data-dk)" }} />
                </td>
                <td style={{ padding: "1px 4px" }}>
                  <input value={l.dr} onChange={(e) => set(i, "dr", e.target.value)}
                         style={{ width: "100%", textAlign: "right", background: "#FFFFE1", border: "1px solid #C0C0C0",
                                  fontFamily: "'Courier Prime', monospace", color: "var(--k2b-blue-data-dk)" }} />
                </td>
                <td style={{ padding: "1px 4px" }}>
                  <input value={l.cr} onChange={(e) => set(i, "cr", e.target.value)}
                         style={{ width: "100%", textAlign: "right", background: "#FFFFE1", border: "1px solid #C0C0C0",
                                  fontFamily: "'Courier Prime', monospace", color: "var(--k2b-blue-data-dk)" }} />
                </td>
              </tr>
            ))}
            <tr style={{ background: "#C0C0C0", borderTop: "1px solid #808080" }}>
              <td colSpan={3} style={{ padding: "2px 6px", textAlign: "right", color: "var(--k2b-maroon)", fontWeight: 700 }}>Totals</td>
              <td style={{ padding: "2px 6px", textAlign: "right", fontWeight: 700, color: "var(--k2b-navy)" }}>{fmt(totalDr)}</td>
              <td style={{ padding: "2px 6px", textAlign: "right", fontWeight: 700, color: "var(--k2b-navy)" }}>{fmt(totalCr)}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
        <div style={{ flex: 1, padding: "4px 8px",
                      background: Math.abs(out) < 0.005 ? "var(--k2b-green)" : "var(--k2b-maroon)",
                      color: "#FFF", fontFamily: "'Courier Prime', monospace", fontWeight: 700, textAlign: "center" }}>
          {Math.abs(out) < 0.005 ? `BALANCED — Dr ${fmt(totalDr)} = Cr ${fmt(totalCr)}` : `OUT OF BALANCE: ${fmt(out)}`}
        </div>
        <K2BButton small onClick={() => setLines(L => [...L, { acct: "", desc: "", dr: "", cr: "" }])}>F3-Add Line</K2BButton>
        <K2BButton small onClick={() => {
          if (Math.abs(out) >= 0.005) {
            window.k2bToast && window.k2bToast(`Cannot post — out of balance by ${fmt(out)}.`, "warn", 3200);
            return;
          }
          const D = window.DMS;
          const r = D && D.postJournalEntry ? D.postJournalEntry({
            date: typeof glUsFromIso === "function" ? glUsFromIso(date) : date, desc: memo || "GM general journal entry", jrn: 80, src: "Accounting",
            lines: lines.filter(l => l.acct).map(l => ({ acct: String(l.acct).trim(), dr: parseFloat(l.dr) || 0, cr: parseFloat(l.cr) || 0, desc: l.desc || "" })),
          }) : { ok: false, msg: "Ledger unavailable." };
          window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 4200);
          if (r.ok) { setRef(r.id); setLines([0, 1, 2, 3, 4].map(() => ({ acct: "", desc: "", dr: "", cr: "" }))); setMemo(""); }
        }}>F5-Post</K2BButton>
        <K2BButton small onClick={() => {
          const html = `${window.dealerHeadHtml()}
            <div class="doc-title">JOURNAL ENTRY</div>
            <div class="doc-sub">${ref} · ${date} · Period ${gmPer()} · ${memo}</div>
            <table class="totals">
              <thead><tr><td><b>Acct</b></td><td><b>Description</b></td><td style="text-align:right"><b>Debit</b></td><td style="text-align:right"><b>Credit</b></td></tr></thead>
              ${lines.filter(l => l.acct).map(l => `<tr><td>${l.acct}</td><td>${l.desc}</td><td style="text-align:right;font-family:'Courier New',monospace">${l.dr ? fmt(parseFloat(l.dr)) : ""}</td><td style="text-align:right;font-family:'Courier New',monospace">${l.cr ? fmt(parseFloat(l.cr)) : ""}</td></tr>`).join("")}
              <tr class="total"><td colspan="2" style="text-align:right">Totals</td><td style="text-align:right">${fmt(totalDr)}</td><td style="text-align:right">${fmt(totalCr)}</td></tr>
            </table>
            <div class="sig-row">
              <div class="sig-box">Prepared By · Date</div>
              <div class="sig-box">Approved By · Date</div>
            </div>`;
          window.k2bPrint && window.k2bPrint(html, { title: "Journal Entry " + ref });
        }}>🖨 F6-Print</K2BButton>
        <K2BButton small onClick={() => window.k2bToast && window.k2bToast(`Saved as recurring template "${memo.slice(0, 32)}".`, "ok", 2400)}>F8-Save Recurring</K2BButton>
      </div>
    </div>
  );
};

// GMDS Submit
const PageSubmit = () => {
  const [running, setRunning] = React.useState(false);
  const [log, setLog] = React.useState(() => {
    const jes = typeof glJEsIn === "function" ? glJEsIn(gmPerKey()) : [];
    return [
      `[${gmStamp()}]  Statement build for period ${gmPer()} — ${jes.length} journal entr${jes.length === 1 ? "y" : "ies"} in the ledger`,
      `[${gmStamp()}]  Statement file: ${gmFileName()} (download with F8)`,
      `[${gmStamp()}]  Direct GMDS transmission is not configured on this station.`,
    ];
  });
  const run = () => {
    if (running) return;
    setLog(L => [...L, `[${gmStamp()}]  Submit requested by ${(window.DMS && window.DMS.userId && window.DMS.userId()) || "operator"} — no GMDS connection configured. Download the .GMX (F8) and upload it in GM's dealer portal.`]);
  };
  return (
    <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8, height: "100%" }}>
      <SectHead right={`GMDS Financial Submission — ${gmPer()}`}>Submit Dealer Financial Statement to GM</SectHead>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 6 }}>
        {[
          ["File........", gmFileName()],
          ["Generated...", gmStamp()],
          ["Transmission", "manual upload"],
          ["BAC.........", GM_DEALER.bac],
          ["Period......", gmPer()],
          ["Schedules...", "5 reconciled"],
        ].map((r, i) => (
          <div key={i} style={{ background: "#FFFFFF", border: "1px solid #808080", padding: "4px 8px",
                                fontFamily: "'Courier Prime', monospace", fontSize: 12 }}>
            <span style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>{r[0]} </span>
            <span style={{ color: "var(--k2b-blue-data-dk)" }}>{r[1]}</span>
          </div>
        ))}
      </div>
      <div style={{ background: "#000000", color: "#55FF55", border: "1px solid #808080",
                    padding: "8px 12px", flex: 1, minHeight: 0, overflow: "auto",
                    fontFamily: "'Courier Prime', monospace", fontSize: 12, whiteSpace: "pre" }}>
        {log.join("\n")}
        {running ? "\n_" : ""}
      </div>
      <div style={{ display: "flex", gap: 6 }}>
        <K2BButton small onClick={run}>F5-Submit to GMDS</K2BButton>
        <K2BButton small onClick={() => {
          const html = `${window.dealerHeadHtml()}
            <div class="doc-title">GM DEALER FINANCIAL STATEMENT</div>
            <div class="doc-sub">Form 12 (Rev D) · Period ${gmPer()} · BAC ${GM_DEALER.bac} · Dealer Code ${GM_DEALER.code}</div>
            <h3 class="sect">Departmental Net Income</h3>
            <table class="totals">
              <thead><tr><td><b>Department</b></td><td style="text-align:right"><b>Sales</b></td><td style="text-align:right"><b>Gross</b></td><td style="text-align:right"><b>Net</b></td></tr></thead>
              ${GM_DEPTS.map(d => `<tr><td>${d.name}</td><td style="text-align:right;font-family:'Courier New',monospace">${fmt(d.sales)}</td><td style="text-align:right;font-family:'Courier New',monospace">${fmt(d.gross)}</td><td style="text-align:right;font-family:'Courier New',monospace">${fmt(d.net)}</td></tr>`).join("")}
              <tr class="total"><td>Total Dealership</td><td style="text-align:right">${fmt(GM_TOTAL.sales)}</td><td style="text-align:right">${fmt(GM_TOTAL.gross)}</td><td style="text-align:right">${fmt(GM_TOTAL.net)}</td></tr>
            </table>
            <div class="sig-row">
              <div class="sig-box">Prepared By — Controller</div>
              <div class="sig-box">Dealer Principal — ${K2BPrint.esc(K2BPrint.party.print())}</div>
            </div>`;
          window.k2bPrint && window.k2bPrint(html, { title: "GM Financial Statement " + gmPer() });
        }}>🖨 F6-Print Statement</K2BButton>
        <K2BButton small onClick={() => {
          // Build a minimal pipe-delimited .GMX manifest and trigger a download.
          const lines = [
            `HEADER|GMFS|${GM_DEALER.bac}|${GM_DEALER.code}|${gmPerKey().replace("-", "")}|FORM12`,
            ...GM_DEPTS.map(d => `DEPT|${d.num}|${d.k}|${d.sales.toFixed(2)}|${d.cogs.toFixed(2)}|${d.gross.toFixed(2)}|${d.net.toFixed(2)}`),
            `TOTAL|99|ALL|${GM_TOTAL.sales.toFixed(2)}|${GM_TOTAL.cogs.toFixed(2)}|${GM_TOTAL.gross.toFixed(2)}|${GM_TOTAL.net.toFixed(2)}`,
            `EOF`,
          ];
          const blob = new Blob([lines.join("\n")], { type: "text/plain" });
          const url = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url; a.download = gmFileName();
          a.click(); URL.revokeObjectURL(url);
          window.k2bToast && window.k2bToast(".GMX file downloaded.", "ok");
        }}>F8-Download .GMX</K2BButton>
        <K2BButton small onClick={() => window.k2bToast && window.k2bToast(`No GMDS receipt on file for ${gmPer()} — this station doesn't transmit to GM directly.`, "info", 3600)}>F9-View Receipt</K2BButton>
      </div>
    </div>
  );
};

// ─── COA / Departments / Std Journals / Reports (GM Manual full coverage) ───

const PageCoa = () => {
  const [q, setQ] = React.useState("");
  const [type, setType] = React.useState("ALL");
  const types = ["ALL", "A", "CA", "L", "E", "R", "COGS", "X"];
  const typeName = { A: "Asset", CA: "Contra-Asset", L: "Liability", E: "Equity", R: "Revenue", COGS: "COGS", X: "Expense" };
  const list = (window.GM_COA || []).filter(r => {
    if (type !== "ALL" && r[2] !== type) return false;
    if (q) {
      const qq = q.toLowerCase();
      return r[0].toLowerCase().includes(qq) || r[1].toLowerCase().includes(qq) || r[4].toLowerCase().includes(qq);
    }
    return true;
  });
  // group by section
  const groups = {};
  list.forEach(r => { (groups[r[4]] = groups[r[4]] || []).push(r); });
  return (
    <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8, height: "100%" }}>
      <SectHead right={`${list.length} of ${(window.GM_COA || []).length} accounts — per GMSAM v3.0`}>
        Chart of Accounts (GM Standard)
      </SectHead>
      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
        <span style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>Find:</span>
        <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="acct # or text"
                style={{ background: "var(--k2b-yellow)", border: "1px solid #808080",
                         color: "var(--k2b-navy)", padding: "0 6px", width: 280,
                         fontFamily: "'Courier Prime', monospace" }} />
        <span style={{ color: "var(--k2b-maroon)", fontWeight: 700, marginLeft: 8 }}>Type:</span>
        {types.map(t => (
          <button key={t} className="k2b-button small"
                  onClick={() => setType(t)}
                  style={{ background: type === t ? "var(--k2b-navy)" : undefined,
                           color: type === t ? "#FFF" : undefined, fontWeight: type === t ? 700 : 400 }}>
            {t === "ALL" ? "All" : (typeName[t] || t)}
          </button>
        ))}
      </div>
      <div style={{ background: "#FFFFFF", border: "1px solid #808080", overflow: "auto", flex: 1, minHeight: 0 }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 12 }}>
          <thead style={{ position: "sticky", top: 0, zIndex: 2 }}>
            <tr style={{ background: "#C0C0C0", color: "var(--k2b-maroon)", borderBottom: "1px solid #808080" }}>
              <th style={{ padding: "2px 6px", textAlign: "left", width: 70 }}>Acct</th>
              <th style={{ padding: "2px 6px", textAlign: "left" }}>Description</th>
              <th style={{ padding: "2px 6px", textAlign: "left", width: 100 }}>Type</th>
              <th style={{ padding: "2px 6px", textAlign: "center", width: 60 }}>Bal</th>
              <th style={{ padding: "2px 6px", textAlign: "left",  width: 180 }}>Section</th>
            </tr>
          </thead>
          <tbody style={{ color: "var(--k2b-blue-data-dk)" }}>
            {Object.entries(groups).map(([section, rows]) => (
              <React.Fragment key={section}>
                <tr style={{ background: "#EFE7D2", borderBottom: "1px solid #C0A050" }}>
                  <td colSpan={5} style={{ padding: "3px 6px", color: "var(--k2b-maroon)", fontWeight: 700 }}>
                    ▸ {section} <span style={{ color: "#888", fontWeight: 400 }}>· {rows.length}</span>
                  </td>
                </tr>
                {rows.map((r, i) => (
                  <tr key={r[0] + i} style={{ background: i % 2 ? "#F4F4F4" : "#FFFFFF" }}>
                    <td style={{ padding: "1px 6px", fontWeight: 700 }}>{r[0]}</td>
                    <td style={{ padding: "1px 6px", color: "var(--k2b-navy)" }}>{r[1]}</td>
                    <td style={{ padding: "1px 6px", color: "#666" }}>{typeName[r[2]] || r[2]}</td>
                    <td style={{ padding: "1px 6px", textAlign: "center", fontWeight: 700,
                                  color: r[3] === "Dr" ? "var(--k2b-blue-data-dk)" : "var(--k2b-maroon)" }}>{r[3]}</td>
                    <td style={{ padding: "1px 6px", color: "#888" }}>{r[4]}</td>
                  </tr>
                ))}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ background: "#FFFFE1", border: "1px solid #808080", padding: "4px 8px",
                    fontFamily: "'Courier Prime', monospace", fontSize: 11, color: "var(--k2b-navy)" }}>
        <b>Department-coded expenses:</b> any expense account (e.g. 013) combines with a 2-digit
        department code (e.g. 01 = New Vehicles) to form the posting account — <b>013-01 Delivery Expense (New)</b>.
        See the Departments tab for the full code list.
      </div>
    </div>
  );
};

const PageDepts = () => (
  <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8, height: "100%" }}>
    <SectHead right="Per GMSAM v3.0 — Departmental Coding">Departmental Code Structure</SectHead>
    <div style={{ background: "#FFFFFF", border: "1px solid #808080", padding: "8px 12px",
                  fontFamily: "'Courier Prime', monospace", fontSize: 13, color: "var(--k2b-navy)" }}>
      Expenses are distributed to each department by creating sub-accounts formed by combining the
      three-digit expense account number with the two-digit department code. For example,
      Delivery Expenses charged to the New Vehicle Department post to account <b>013-01</b>,
      Delivery Expense (New). Freight for Parts shipments posts to account <b>033-07</b>, Freight (Parts).
    </div>
    <div style={{ background: "#FFFFFF", border: "1px solid #808080", overflow: "auto", flex: 1, minHeight: 0 }}>
      <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 13 }}>
        <thead>
          <tr style={{ background: "#C0C0C0", color: "var(--k2b-maroon)", borderBottom: "1px solid #808080" }}>
            <th style={{ padding: "3px 6px", textAlign: "left", width: 90 }}>Code</th>
            <th style={{ padding: "3px 6px", textAlign: "left" }}>Department</th>
            <th style={{ padding: "3px 6px", textAlign: "left" }}>Typical posting example</th>
          </tr>
        </thead>
        <tbody style={{ color: "var(--k2b-blue-data-dk)" }}>
          {(window.GM_DEPT_CODES || []).map((d, i) => (
            <tr key={d.code} style={{ background: i % 2 ? "#F4F4F4" : "#FFFFFF" }}>
              <td style={{ padding: "2px 6px", fontWeight: 700, fontSize: 16 }}>{d.code}</td>
              <td style={{ padding: "2px 6px", color: "var(--k2b-navy)", fontWeight: 700 }}>{d.name}</td>
              <td style={{ padding: "2px 6px", color: "#666" }}>
                {d.code === "01" && "013-01 Delivery Expense · 011-01 Sales Comp · 065-01 Advertising"}
                {d.code === "02" && "013-02 Delivery Expense · 011-02 Sales Comp · 065-02 Advertising"}
                {d.code === "03" && "087-03 Utilities · 056-03 Insurance (lease units)"}
                {d.code === "04" && "855-04 F&I Comp · 070-04 Travel & Ent."}
                {d.code === "05" && "023-05 Other Wages · 061-05 Other Supplies"}
                {d.code === "06" && "061-06 Other Supplies · 090-06 Repairs-Equipment"}
                {d.code === "07" && "033-07 Postage/Freight · 069-07 Outside Services"}
                {d.code === "09" && "022-09 Salaries Clerical · 070-09 Travel & Ent. · 068-09 IT Services"}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

const PageJournalTpls = ({ onLoad }) => {
  const [open, setOpen] = React.useState(null);
  const list = window.GM_JOURNAL_TEMPLATES || [];
  return (
    <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8, height: "100%" }}>
      <SectHead right="Standard journal entry posting patterns per GMSAM">Standard Journals</SectHead>
      <div style={{ background: "#FFFFFF", border: "1px solid #808080", overflow: "auto", flex: 1, minHeight: 0 }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 12 }}>
          <thead>
            <tr style={{ background: "#C0C0C0", color: "var(--k2b-maroon)", borderBottom: "1px solid #808080" }}>
              <th style={{ padding: "2px 6px", textAlign: "left", width: 90 }}>Code</th>
              <th style={{ padding: "2px 6px", textAlign: "left" }}>Description</th>
              <th style={{ padding: "2px 6px", textAlign: "left", width: 220 }}>Journal</th>
              <th style={{ padding: "2px 6px", textAlign: "left", width: 220 }}>Reference</th>
              <th style={{ padding: "2px 6px", textAlign: "right", width: 90 }}>Lines</th>
              <th style={{ padding: "2px 6px", textAlign: "center", width: 130 }}></th>
            </tr>
          </thead>
          <tbody style={{ color: "var(--k2b-blue-data-dk)" }}>
            {list.map((t, i) => (
              <React.Fragment key={t.code}>
                <tr style={{ background: i % 2 ? "#F4F4F4" : "#FFFFFF" }}>
                  <td style={{ padding: "2px 6px", fontWeight: 700 }}>{t.code}</td>
                  <td style={{ padding: "2px 6px", color: "var(--k2b-navy)", fontWeight: 600 }}>{t.title}</td>
                  <td style={{ padding: "2px 6px", color: "#666" }}>{t.journal}</td>
                  <td style={{ padding: "2px 6px", color: "#666" }}>{t.ref}</td>
                  <td style={{ padding: "2px 6px", textAlign: "right" }}>{t.lines.length}</td>
                  <td style={{ padding: "2px 6px", textAlign: "center", display: "flex", gap: 4, justifyContent: "center" }}>
                    <button className="k2b-button small" onClick={() => setOpen(open === t.code ? null : t.code)}>
                      {open === t.code ? "Hide" : "View"}
                    </button>
                    <button className="k2b-button small" onClick={() => onLoad && onLoad(t)}
                             style={{ background: "var(--k2b-yellow)", fontWeight: 700 }}>Load</button>
                  </td>
                </tr>
                {open === t.code && (
                  <tr>
                    <td colSpan={6} style={{ padding: "4px 18px", background: "#FFFFE1", borderTop: "1px dotted #C0C0C0" }}>
                      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
                        <thead>
                          <tr style={{ color: "var(--k2b-maroon)" }}>
                            <th style={{ textAlign: "left", padding: "1px 6px", width: 90 }}>Acct</th>
                            <th style={{ textAlign: "left", padding: "1px 6px" }}>Description</th>
                            <th style={{ textAlign: "right", padding: "1px 6px", width: 110 }}>Debit</th>
                            <th style={{ textAlign: "right", padding: "1px 6px", width: 110 }}>Credit</th>
                          </tr>
                        </thead>
                        <tbody>
                          {t.lines.map((l, j) => (
                            <tr key={j}>
                              <td style={{ padding: "1px 6px", fontWeight: 700 }}>{l.acct}</td>
                              <td style={{ padding: "1px 6px", color: "var(--k2b-navy)" }}>{l.desc}</td>
                              <td style={{ padding: "1px 6px", textAlign: "right" }}>{l.dr ? fmt(l.dr) : ""}</td>
                              <td style={{ padding: "1px 6px", textAlign: "right" }}>{l.cr ? fmt(l.cr) : ""}</td>
                            </tr>
                          ))}
                          <tr style={{ borderTop: "1px solid #808080" }}>
                            <td colSpan={2} style={{ padding: "1px 6px", textAlign: "right", color: "var(--k2b-maroon)", fontWeight: 700 }}>Totals</td>
                            <td style={{ padding: "1px 6px", textAlign: "right", fontWeight: 700 }}>
                              {fmt(t.lines.reduce((s, l) => s + (l.dr || 0), 0))}
                            </td>
                            <td style={{ padding: "1px 6px", textAlign: "right", fontWeight: 700 }}>
                              {fmt(t.lines.reduce((s, l) => s + (l.cr || 0), 0))}
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                )}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ background: "#FFFFE1", border: "1px solid #808080", padding: "4px 8px",
                    fontFamily: "'Courier Prime', monospace", fontSize: 11, color: "var(--k2b-navy)" }}>
        <b>Tip:</b> Click <b>Load</b> on any template to copy it onto a new Journal Entry (JE) page,
        change the amounts, and post.
      </div>
    </div>
  );
};

const PageReports = () => (
  <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8, height: "100%" }}>
    <SectHead right="GM-Standard reports per GMSAM v3.0">Standard Reports Library</SectHead>
    <div style={{ background: "#FFFFFF", border: "1px solid #808080", overflow: "auto", flex: 1, minHeight: 0,
                  padding: 6 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 6 }}>
        {(window.GM_REPORTS || []).map((r) => (
          <div key={r.code} style={{ background: "#F4F4F4", border: "1px solid #808080",
                                       padding: "8px 10px 10px", display: "flex", flexDirection: "column", gap: 4 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span style={{ color: "var(--k2b-maroon)", fontWeight: 700, fontSize: 14 }}>{r.name}</span>
              <span style={{ background: "var(--k2b-navy)", color: "var(--k2b-yellow)",
                              padding: "0 6px", fontFamily: "'Courier Prime', monospace", fontSize: 11 }}>{r.code}</span>
            </div>
            <div style={{ fontFamily: "'Courier Prime', monospace", fontSize: 11, color: "#444", flex: 1 }}>
              {r.desc}
            </div>
            <div style={{ display: "flex", gap: 4, marginTop: 2 }}>
              <button className="k2b-button small"
                       onClick={() => window.k2bToast && window.k2bToast(`${r.name} — generated for ${gmPer()}.`, "ok", 2400)}>
                Run
              </button>
              <button className="k2b-button small"
                       onClick={() => window.k2bToast && window.k2bToast(`${r.name} — sent to printer.`, "ok", 2200)}>
                🖨 Print
              </button>
              <button className="k2b-button small"
                       onClick={() => window.k2bToast && window.k2bToast(`${r.name} — exported to CSV.`, "ok", 2200)}>
                CSV
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ─── main shell ───────────────────────────────────────────────────────────
const GmAccounting = ({ onClose, go }) => {
  const [page, setPage] = React.useState("p1");
  const [jeSeed, setJeSeed] = React.useState(null);

  const loadTemplate = (t) => {
    // Build JE lines from template
    const seed = t.lines.map(l => ({
      acct: l.acct,
      desc: l.desc,
      dr: l.dr ? Number(l.dr).toFixed(2) : "",
      cr: l.cr ? Number(l.cr).toFixed(2) : "",
    }));
    while (seed.length < 5) seed.push({ acct: "", desc: "", dr: "", cr: "" });
    setJeSeed({ memo: `${t.code} — ${t.title}`, lines: seed });
    setPage("je");
    window.k2bToast && window.k2bToast(`Loaded template "${t.title}" into Journal Entry.`, "ok", 2400);
  };

  const body = (() => {
    switch (page) {
      case "cover": return <PageCover />;
      case "p1":    return <PageOperating />;
      case "p2":    return <PageBalance />;
      case "p9":    return <PagePacing />;
      case "tb":    return <PageTrial />;
      case "sched": return <PageSchedule />;
      case "je":    return <PageJournal seed={jeSeed} />;
      case "coa":   return <PageCoa />;
      case "depts": return <PageDepts />;
      case "jtpl":  return <PageJournalTpls onLoad={loadTemplate} />;
      case "rpts":  return <PageReports />;
      case "sub":   return <PageSubmit />;
      default:      return <PageCover />;
    }
  })();

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1220, height: 740, margin: "0 auto", background: "#C0C0C0" }}>
      <K2BTitlebar title="GMACCT - GM Standard Accounting" onClose={onClose} onMin={() => {}} onMax={() => {}} />

      <div style={{ flex: 1, padding: "8px 12px", background: "#C0C0C0",
                    fontFamily: "'Courier Prime', monospace", color: "var(--k2b-navy)",
                    display: "flex", flexDirection: "column", gap: 8, minHeight: 0 }}>

        {/* top strip */}
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", fontSize: 13 }}>
          <FieldChip label="BAC.....:"     value={GM_DEALER.bac}                          w={90} />
          <FieldChip label="Dealer..:"     value={`${GM_DEALER.code} — ${GM_DEALER.name}`} w={260} />
          <FieldChip label="Period..:"     value={gmPer()}                              w={90} hot />
          <FieldChip label="Stmt....:"     value={`Form 12 (Rev D)`}                       w={130} />
          <div style={{ flex: 1 }} />
          <span style={{ color: "var(--k2b-green)", fontWeight: 700 }}>OPEN PERIOD</span>
        </div>

        {/* main: left rail + body */}
        <div style={{ display: "grid", gridTemplateColumns: "190px 1fr", gap: 8, flex: 1, minHeight: 0 }}>

          <div style={{ background: "#FFFFFF", border: "1px solid #808080", padding: "4px 0", display: "flex", flexDirection: "column" }}>
            <div style={{ color: "var(--k2b-maroon)", fontWeight: 700, padding: "2px 8px", borderBottom: "1px solid #C0C0C0", fontSize: 12 }}>
              Statement Pages
            </div>
            {GM_PAGES.map((p, i) => p.sep ? (
              <div key={i} style={{ borderTop: "1px solid #C0C0C0", margin: "4px 6px" }} />
            ) : (
              <div key={p.k}
                   onClick={() => setPage(p.k)}
                   style={{
                     padding: "2px 8px", cursor: "default", fontSize: 13,
                     background: page === p.k ? "var(--k2b-navy)" : "transparent",
                     color: page === p.k ? "#FFFFFF" : "var(--k2b-navy)",
                     display: "grid", gridTemplateColumns: "40px 1fr", gap: 4,
                   }}>
                <span style={{ color: page === p.k ? "var(--k2b-yellow)" : "var(--k2b-maroon)", fontWeight: 700 }}>{p.num}</span>
                <span>{p.label}</span>
              </div>
            ))}
            <div style={{ flex: 1 }} />
            <div style={{ padding: "4px 8px", borderTop: "1px solid #C0C0C0", fontSize: 11, color: "#666" }}>
              GMSAM v3.0<br />Statement {GM_STMT_REV}
            </div>
          </div>

          <div style={{ background: "#F0F0F0", border: "1px solid #808080", overflow: "auto", minHeight: 0 }}>
            {body}
          </div>
        </div>

        {/* bottom F-key bar */}
        <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
          <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
          <K2BButton small onClick={() => alert("GM Standard Accounting (GMACCT)\n\nESC  Close\nF1   Help\nF2   Open Schedule Inquiry\nF3   New Journal Entry\nF4   Trial Balance\nF5   Recalculate current page\nF6   Print current page\nF7   GMDS Feeds\nF8   Submit to GMDS\nF9   Top (Operating Report)\n\nLeft rail walks the statement (P-1 → P-9), schedules, journals, COA, depts, standard journals & reports.")}>F1-Help</K2BButton>
          <K2BButton small onClick={() => setPage("sched")}>F2-Sched</K2BButton>
          <K2BButton small onClick={() => setPage("je")}>F3-New JE</K2BButton>
          <K2BButton small onClick={() => setPage("tb")}>F4-Trial</K2BButton>
          <K2BButton small onClick={() => window.k2bToast && window.k2bToast(`Recalculated — ${page.toUpperCase()} refreshed from G/L snapshot.`, "ok")}>F5-Recalc</K2BButton>
          <K2BButton small onClick={() => window.k2bToast && window.k2bToast(`Page ${page.toUpperCase()} sent to printer.`, "ok")}>🖨 F6-Print Pg</K2BButton>
          <K2BButton small onClick={() => go && go("gmds")}>F7-GMDS Feeds</K2BButton>
          <K2BButton small onClick={() => setPage("sub")}>F8-Submit</K2BButton>
          <K2BButton small onClick={() => setPage("p1")}>F9-Top</K2BButton>
          <span style={{ flex: 1 }} />
          <span style={{ background: "var(--msg-bg, #FFFFE1)", border: "1px solid #808080",
                          padding: "0 8px", color: "var(--k2b-navy)", fontSize: 12 }}>
            Use the page rail at left to walk the statement. ESC to leave.
          </span>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { GmAccounting, GM_DEPTS, GM_BAL, GM_PACE, SCHED_240, GM_TRIAL });