/* =============================================================
   CoreIQ Office — Expansion part 3
   Finance · Government Programs · Operations · Admin
   ============================================================= */

// =================================================================
// FINANCE — PBS claims & reconciliation
// =================================================================
function PBSClaims() {
  const STX3 = { "S-001": "var(--teal-700)", "S-002": "var(--navy-600)", "S-003": "var(--violet-600)" };
  return (
    <window.Screen eyebrow="Finance · PBS Online Claiming" title="PBS claims &amp; reconciliation"
      actions={<>
        <button className="btn btn--ghost btn--sm">Export claim file</button>
        <button className="btn btn--secondary btn--sm"><OIcon name="transfer"/> Resubmit rejected</button>
        <button className="btn btn--primary btn--sm"><OIcon name="check"/> Submit batch</button>
      </>}>
      <div className="off-kpi-grid">
        <window.KpiCard label="Claims MTD" value="2,418" delta={{dir:"up", text:"▲ 4.2%"}}/>
        <window.KpiCard label="Subsidy received" value={oMoney(82418)} delta={{dir:"up", text:"From Services Australia"}}/>
        <window.KpiCard label="Rejected · open" value="12" delta={{dir:"down", text:"Awaiting resubmit"}}/>
        <window.KpiCard label="Avg payment time" value="6.4 days" delta={{text:"Submit → cleared"}}/>
      </div>

      <div className="off-table">
        <div className="off-grid" style={{gridTemplateColumns:'130px 110px 1.4fr 90px 110px 110px 110px 110px'}}>
          <div className="off-grid-headcell">Claim ID</div>
          <div className="off-grid-headcell">Date</div>
          <div className="off-grid-headcell">Drug · patient</div>
          <div className="off-grid-headcell">Store</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Co-pay</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Subsidy</div>
          <div className="off-grid-headcell">Submitted</div>
          <div className="off-grid-headcell">Status</div>
          {[
            {id:"PBS-2204182", d:"Today", drug:"Metformin XR 500mg", patient:"M. Tan", store:"S-001", co:7.30, sub:24.10, sub_ts:"14:18", status:"submitted"},
            {id:"PBS-2204181", d:"Today", drug:"Atorvastatin 40mg", patient:"H. Whitlock", store:"S-001", co:7.30, sub:10.90, sub_ts:"13:48", status:"submitted"},
            {id:"PBS-2204180", d:"Today", drug:"Endone 5mg", patient:"A. Costa", store:"S-003", co:7.30, sub:8.10, sub_ts:"12:30", status:"submitted"},
            {id:"PBS-2204170", d:"Yesterday", drug:"Sertraline 50mg", patient:"P. Sharma", store:"S-001", co:7.30, sub:14.80, sub_ts:"24/05", status:"approved"},
            {id:"PBS-2204168", d:"Yesterday", drug:"Insulin Glargine", patient:"H. Whitlock", store:"S-001", co:7.30, sub:34.00, sub_ts:"24/05", status:"approved"},
            {id:"PBS-2204150", d:"24/05/2026", drug:"Amoxicillin 500mg", patient:"L. Khoury", store:"S-001", co:7.30, sub:6.50, sub_ts:"24/05", status:"rejected", note:"Authority code missing"},
            {id:"PBS-2204148", d:"23/05/2026", drug:"Esomeprazole 20mg", patient:"B. Lim", store:"S-002", co:7.30, sub:5.10, sub_ts:"23/05", status:"paid"},
            {id:"PBS-2204120", d:"22/05/2026", drug:"Sertraline 50mg", patient:"P. Sharma", store:"S-001", co:7.30, sub:14.80, sub_ts:"22/05", status:"paid"},
          ].map(c => (
            <div key={c.id} className="off-grid-row">
              <div className="off-grid-cell off-cell-mono">{c.id}</div>
              <div className="off-grid-cell off-mono off-muted">{c.d}</div>
              <div className="off-grid-cell off-cell-strong">{c.drug} <span className="off-muted" style={{fontWeight:400}}>· {c.patient}</span>
                {c.note && <div style={{fontSize:11, color:'var(--void-text)', marginTop:2}}>{c.note}</div>}</div>
              <div className="off-grid-cell off-mono">{findS(c.store)?.code}</div>
              <div className="off-grid-cell off-cell-num">{oMoney(c.co)}</div>
              <div className="off-grid-cell off-cell-num off-cell-strong">{oMoney(c.sub)}</div>
              <div className="off-grid-cell off-cell-mono off-muted">{c.sub_ts}</div>
              <div className="off-grid-cell">
                {c.status === "submitted" && <window.StatusPill kind="hold" label="Submitted"/>}
                {c.status === "approved"  && <window.StatusPill kind="brand" label="Approved"/>}
                {c.status === "paid"      && <window.StatusPill kind="paid" label="Paid"/>}
                {c.status === "rejected"  && <window.StatusPill kind="void" label="Rejected"/>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </window.Screen>
  );
}

// =================================================================
// FINANCE — End-of-day reconciliation
// =================================================================
function EodReconciliation() {
  return (
    <window.Screen eyebrow="Finance · daily" title="End of day reconciliation"
      actions={<><button className="btn btn--primary btn--sm">Sign off day</button></>}>
      <div className="off-kpi-grid">
        <window.KpiCard label="Group net takings" value={oMoney(10359.90)} delta={{dir:"up", text:"Across 3 stores"}}/>
        <window.KpiCard label="Variance" value="$0.00" delta={{dir:"up", text:"Balanced"}}/>
        <window.KpiCard label="Cash count" value={oMoney(874.89)} delta={{text:"Matches expected"}}/>
        <window.KpiCard label="Held sales" value="0" delta={{dir:"up", text:"All resolved before close"}}/>
      </div>
      <div className="off-table">
        <div className="off-grid" style={{gridTemplateColumns:'1.4fr 90px 130px 130px 130px 130px 130px 110px'}}>
          <div className="off-grid-headcell">Store</div>
          <div className="off-grid-headcell">Register</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Card</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Cash</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Account</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Net</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Variance</div>
          <div className="off-grid-headcell">Status</div>
          {[
            {store:"S-001", reg:"Reg 01", card:2418.50, cash:184.00, acct:412.40, net:3014.90, var:0, status:"signed"},
            {store:"S-001", reg:"Reg 02", card:1812.30, cash:218.40, acct:228.20, net:2258.90, var:0, status:"signed"},
            {store:"S-001", reg:"Reg 03", card:589.85,  cash:72.40,  acct:0,      net:662.25,  var:0, status:"signed"},
            {store:"S-002", reg:"Reg 01", card:1318.20, cash:118.20, acct:182.40, net:1618.80, var:0, status:"signed"},
            {store:"S-002", reg:"Reg 02", card:1100.20, cash:48.40,  acct:0,      net:1148.60, var:0, status:"signed"},
            {store:"S-003", reg:"Reg 01", card:1820.50, cash:142.20, acct:0,      net:1962.70, var:0, status:"signed"},
            {store:"S-003", reg:"Reg 02", card:1300.35, cash:91.20,  acct:0,      net:1391.55, var:0, status:"pending"},
          ].map((r, i) => (
            <div key={i} className="off-grid-row">
              <div className="off-grid-cell off-cell-strong">{findS(r.store)?.name}</div>
              <div className="off-grid-cell off-mono">{r.reg}</div>
              <div className="off-grid-cell off-cell-num">{oMoney(r.card)}</div>
              <div className="off-grid-cell off-cell-num">{oMoney(r.cash)}</div>
              <div className="off-grid-cell off-cell-num">{r.acct > 0 ? oMoney(r.acct) : "—"}</div>
              <div className="off-grid-cell off-cell-num off-cell-strong">{oMoney(r.net)}</div>
              <div className="off-grid-cell off-cell-num" style={{color: r.var === 0 ? 'var(--paid-text)' : 'var(--hold-text)'}}>{r.var === 0 ? "Balanced" : oMoney(r.var)}</div>
              <div className="off-grid-cell">{r.status === "signed" ? <window.StatusPill kind="paid" label="Signed off"/> : <window.StatusPill kind="hold" label="Pending"/>}</div>
            </div>
          ))}
        </div>
      </div>
    </window.Screen>
  );
}

// =================================================================
// FINANCE — Invoice matching (3-way match)
// =================================================================
function InvoiceMatching() {
  return (
    <window.Screen eyebrow="Finance · supplier invoice matching" title="Invoice matching"
      actions={<><button className="btn btn--primary btn--sm">Match queue</button></>}>
      <div className="off-card" style={{padding:'14px 18px', marginBottom:14, flexDirection:'row', alignItems:'center', gap:14}}>
        <OIcon name="info" style={{color:'var(--brand)'}}/>
        <div style={{flex:1, fontSize:13, color:'var(--text-muted)'}}>
          3-way match: PO ↔ goods received (GRN) ↔ invoice. Discrepancies flagged for review before posting to Xero.
        </div>
      </div>
      <div className="off-kpi-grid">
        <window.KpiCard label="Auto-matched · 30d" value="284" delta={{dir:"up", text:"94% straight-through"}}/>
        <window.KpiCard label="Awaiting review" value="6" delta={{dir:"down", text:"Discrepancies"}}/>
        <window.KpiCard label="In dispute" value="2" delta={{dir:"down", text:"Escalated to supplier"}}/>
        <window.KpiCard label="Total matched value" value={oMoney(184220)} delta={{text:"Posted to Xero"}}/>
      </div>
      <div className="off-table">
        <div className="off-grid" style={{gridTemplateColumns:'140px 130px 130px 1.2fr 110px 110px 100px'}}>
          <div className="off-grid-headcell">Invoice</div>
          <div className="off-grid-headcell">PO</div>
          <div className="off-grid-headcell">GRN</div>
          <div className="off-grid-headcell">Supplier · discrepancy</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Invoice $</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>PO $</div>
          <div className="off-grid-headcell">Match</div>
          {[
            {inv:"INV-SIG-8841", po:"PO-4422", grn:"GRN-1102", sup:"Sigma", disc:"2 units short on Atorvastatin", iv:412.40, pv:432.40, m:"discrepancy"},
            {inv:"INV-SYM-2204", po:"PO-4423", grn:"GRN-1103", sup:"Symbion", disc:"—", iv:624.60, pv:624.60, m:"matched"},
            {inv:"INV-API-1140", po:"PO-4418", grn:"GRN-1098", sup:"API",    disc:"—", iv:1844.20, pv:1844.20, m:"matched"},
            {inv:"INV-NDSS-022", po:"PO-4408", grn:"GRN-1080", sup:"NDSS",   disc:"Pricing dispute · 4 lines", iv:488.50, pv:464.50, m:"dispute"},
            {inv:"INV-GSK-7720", po:"PO-4412", grn:"GRN-1088", sup:"GSK",    disc:"—", iv:980.40, pv:980.40, m:"matched"},
          ].map(r => (
            <div key={r.inv} className="off-grid-row">
              <div className="off-grid-cell off-cell-mono off-cell-strong">{r.inv}</div>
              <div className="off-grid-cell off-cell-mono">{r.po}</div>
              <div className="off-grid-cell off-cell-mono">{r.grn}</div>
              <div className="off-grid-cell">
                {r.sup}
                {r.disc !== "—" && <div className="off-muted" style={{fontSize:11, color: r.m === "dispute" ? 'var(--void-text)' : 'var(--hold-text)', marginTop:2}}>{r.disc}</div>}
              </div>
              <div className="off-grid-cell off-cell-num">{oMoney(r.iv)}</div>
              <div className="off-grid-cell off-cell-num">{oMoney(r.pv)}</div>
              <div className="off-grid-cell">
                {r.m === "matched"     && <window.StatusPill kind="paid" label="Matched"/>}
                {r.m === "discrepancy" && <window.StatusPill kind="hold" label="Review"/>}
                {r.m === "dispute"     && <window.StatusPill kind="void" label="Dispute"/>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </window.Screen>
  );
}

// =================================================================
// FINANCE — P&L by store
// =================================================================
function PnLByStore() {
  const PL = [
    {store:"S-001", rev:142418, cogs:88810, gross:53608, opex:31420, ebitda:22188, margin:15.6},
    {store:"S-002", rev:76210,  cogs:48420, gross:27790, opex:19840, ebitda:7950,  margin:10.4},
    {store:"S-003", rev:98442,  cogs:62418, gross:36024, opex:22810, ebitda:13214, margin:13.4},
  ];
  const totals = PL.reduce((acc, p) => ({rev:acc.rev+p.rev, cogs:acc.cogs+p.cogs, gross:acc.gross+p.gross, opex:acc.opex+p.opex, ebitda:acc.ebitda+p.ebitda}), {rev:0,cogs:0,gross:0,opex:0,ebitda:0});

  return (
    <window.Screen eyebrow="Finance · management reporting" title="Profit &amp; loss by store"
      actions={<>
        <button className="btn btn--ghost btn--sm">Date · 30d</button>
        <button className="btn btn--primary btn--sm">Export to Xero</button>
      </>}>
      <div className="off-table">
        <div className="off-grid" style={{gridTemplateColumns:'1.6fr repeat(6, 1fr)'}}>
          <div className="off-grid-headcell">Store</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Revenue</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>COGS</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Gross profit</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>OPEX</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>EBITDA</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>EBITDA %</div>
          {PL.map(p => (
            <div key={p.store} className="off-grid-row">
              <div className="off-grid-cell off-cell-strong">{findS(p.store)?.name}</div>
              <div className="off-grid-cell off-cell-num">{oMoney(p.rev)}</div>
              <div className="off-grid-cell off-cell-num" style={{color:'var(--void-text)'}}>− {oMoney(p.cogs)}</div>
              <div className="off-grid-cell off-cell-num off-cell-strong">{oMoney(p.gross)}</div>
              <div className="off-grid-cell off-cell-num" style={{color:'var(--void-text)'}}>− {oMoney(p.opex)}</div>
              <div className="off-grid-cell off-cell-num off-cell-strong" style={{color:'var(--paid-text)'}}>{oMoney(p.ebitda)}</div>
              <div className="off-grid-cell off-cell-num off-cell-strong" style={{color: p.margin >= 13 ? 'var(--paid-text)' : 'var(--hold-text)'}}>{p.margin.toFixed(1)}%</div>
            </div>
          ))}
          <div className="off-grid-row">
            <div className="off-grid-cell off-cell-strong" style={{background:'var(--bg-subtle)'}}>Group</div>
            <div className="off-grid-cell off-cell-num off-cell-strong" style={{background:'var(--bg-subtle)'}}>{oMoney(totals.rev)}</div>
            <div className="off-grid-cell off-cell-num off-cell-strong" style={{background:'var(--bg-subtle)', color:'var(--void-text)'}}>− {oMoney(totals.cogs)}</div>
            <div className="off-grid-cell off-cell-num off-cell-strong" style={{background:'var(--bg-subtle)'}}>{oMoney(totals.gross)}</div>
            <div className="off-grid-cell off-cell-num off-cell-strong" style={{background:'var(--bg-subtle)', color:'var(--void-text)'}}>− {oMoney(totals.opex)}</div>
            <div className="off-grid-cell off-cell-num off-cell-strong" style={{background:'var(--bg-subtle)', color:'var(--paid-text)'}}>{oMoney(totals.ebitda)}</div>
            <div className="off-grid-cell off-cell-num off-cell-strong" style={{background:'var(--bg-subtle)', color:'var(--paid-text)'}}>{(totals.ebitda / totals.rev * 100).toFixed(1)}%</div>
          </div>
        </div>
      </div>
    </window.Screen>
  );
}

// =================================================================
// FINANCE — Tax & BAS
// =================================================================
function Tax() {
  const [tab, setTab] = React.useState("bas");
  return (
    <window.Screen eyebrow="Finance · tax &amp; compliance" title="Tax &amp; statutory"
      activeTab={tab} onTab={setTab}
      subtabs={[
        {k:"bas", l:"BAS preparation"},
        {k:"gst", l:"GST split (PBS vs taxable)"},
        {k:"payroll", l:"Payroll tax by state"},
        {k:"fbt", l:"Fringe benefits"},
        {k:"rd", l:"R&D expenditure"},
        {k:"export", l:"Accountant export"},
      ]}
      actions={<><button className="btn btn--primary btn--sm">Run period close</button></>}>
      {tab === "bas" && <BASPrep/>}
      {tab === "gst" && <GSTSplit/>}
      {tab === "payroll" && <PayrollTax/>}
      {tab === "fbt" && <FBT/>}
      {tab === "rd" && <RDExpenditure/>}
      {tab === "export" && <AccountantExport/>}
    </window.Screen>
  );
}

function BASPrep() {
  return (
    <>
      <div className="off-card" style={{marginBottom:14, flexDirection:'row', alignItems:'center', gap:14, padding:'14px 18px'}}>
        <div style={{width:44, height:44, borderRadius:11, background:'var(--brand-bg)', color:'var(--brand)', display:'grid', placeItems:'center'}}><OIcon name="doc" width={20} height={20}/></div>
        <div style={{flex:1}}>
          <div style={{fontWeight:600, fontSize:16}}>April–June 2026 quarter</div>
          <div className="off-cell-mono off-muted" style={{fontSize:12, marginTop:2}}>BAS due 28 July 2026 · 62 days remaining</div>
        </div>
        <window.StatusPill kind="brand" label="In progress"/>
      </div>
      <div className="off-card">
        <h3 className="off-card-title">GST collected/paid by store · this quarter</h3>
        <div className="off-grid" style={{gridTemplateColumns:'1.4fr 130px 130px 130px 130px'}}>
          <div className="off-grid-headcell">Store</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>GST collected (1A)</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>GST paid (1B)</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Net</div>
          <div className="off-grid-headcell">Status</div>
          {[
            {s:"S-001", coll:14218, paid:8842, status:"reconciled"},
            {s:"S-002", coll:7610,  paid:4820, status:"reconciled"},
            {s:"S-003", coll:9842,  paid:6240, status:"reconciled"},
          ].map(r => (
            <div key={r.s} className="off-grid-row">
              <div className="off-grid-cell off-cell-strong">{findS(r.s)?.name}</div>
              <div className="off-grid-cell off-cell-num">{oMoney(r.coll)}</div>
              <div className="off-grid-cell off-cell-num">{oMoney(r.paid)}</div>
              <div className="off-grid-cell off-cell-num off-cell-strong">{oMoney(r.coll - r.paid)}</div>
              <div className="off-grid-cell"><window.StatusPill kind="paid" label="Reconciled"/></div>
            </div>
          ))}
        </div>
        <div style={{padding:'14px 18px', background:'var(--brand-bg)', borderRadius:8, marginTop:12, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div>
            <div style={{fontSize:12, color:'var(--brand)', fontWeight:500}}>NET GST PAYABLE</div>
            <div style={{fontSize:28, fontWeight:600, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.02em'}}>$11,768.00</div>
          </div>
          <button className="btn btn--primary">Lodge BAS via ATO</button>
        </div>
      </div>
    </>
  );
}

function GSTSplit() {
  return (
    <div className="off-card">
      <h3 className="off-card-title">PBS-subsidised vs taxable revenue · this quarter</h3>
      <div className="off-grid" style={{gridTemplateColumns:'1.6fr 130px 130px 130px 130px'}}>
        <div className="off-grid-headcell">Category</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Camberwell</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Glen Iris</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Ringwood</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Group total</div>
        {[
          {cat:"PBS prescriptions · GST-free", c:82418, g:48210, r:62210, status:"GST-free"},
          {cat:"Pharmacy medicines (S2/S3) · taxable", c:18420, g:11420, r:14420, status:"10% GST"},
          {cat:"Front of shop (FoS) · taxable", c:28420, g:14210, r:18840, status:"10% GST"},
          {cat:"Vaccinations · GST-free", c:8420, g:2420, r:4210, status:"GST-free"},
          {cat:"Professional services (MedsCheck etc) · GST-free", c:4740, g:1950, r:2980, status:"GST-free"},
        ].map((r, i) => (
          <div key={i} className="off-grid-row">
            <div className="off-grid-cell off-cell-strong">{r.cat}
              <div style={{fontSize:11, color:'var(--text-subtle)', marginTop:2}}>{r.status}</div></div>
            <div className="off-grid-cell off-cell-num">{oMoney(r.c)}</div>
            <div className="off-grid-cell off-cell-num">{oMoney(r.g)}</div>
            <div className="off-grid-cell off-cell-num">{oMoney(r.r)}</div>
            <div className="off-grid-cell off-cell-num off-cell-strong">{oMoney(r.c + r.g + r.r)}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function PayrollTax() {
  return (
    <div className="off-card">
      <h3 className="off-card-title">Payroll tax by state · this quarter</h3>
      <div className="off-grid" style={{gridTemplateColumns:'130px 1fr 130px 130px 130px 110px'}}>
        <div className="off-grid-headcell">State</div>
        <div className="off-grid-headcell">Stores</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Wages</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Rate</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Tax</div>
        <div className="off-grid-headcell">Status</div>
        {[
          {state:"VIC", stores:"All 3", wages:412180, rate:4.85, status:"reconciled", note:"Above $700k threshold"},
        ].map((r, i) => (
          <div key={i} className="off-grid-row">
            <div className="off-grid-cell off-cell-strong">{r.state}</div>
            <div className="off-grid-cell">{r.stores}
              <div className="off-cell-mono off-muted" style={{fontSize:11, marginTop:2}}>{r.note}</div></div>
            <div className="off-grid-cell off-cell-num">{oMoney(r.wages)}</div>
            <div className="off-grid-cell off-cell-num">{r.rate}%</div>
            <div className="off-grid-cell off-cell-num off-cell-strong">{oMoney(r.wages * r.rate / 100)}</div>
            <div className="off-grid-cell"><window.StatusPill kind="paid" label="Reconciled"/></div>
          </div>
        ))}
      </div>
      <div className="off-muted" style={{fontSize:12, marginTop:14, padding:'10px 14px', background:'var(--bg-subtle)', borderRadius:8}}>
        <strong style={{color:'var(--text)'}}>Future expansion:</strong> when stores open in NSW, QLD, WA, SA, each state's payroll tax thresholds and rates will be tracked separately. Group aggregation applies for multi-state.
      </div>
    </div>
  );
}

function FBT() {
  return (
    <div className="off-card">
      <h3 className="off-card-title">Fringe benefits · FBT year (Apr–Mar)</h3>
      <div className="off-grid" style={{gridTemplateColumns:'1.4fr 1fr 130px 130px 110px'}}>
        <div className="off-grid-headcell">Benefit</div>
        <div className="off-grid-headcell">Recipient</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Taxable value</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>FBT</div>
        <div className="off-grid-headcell">Period</div>
        {[
          {b:"Salary packaged car lease",   r:"Suni Kapoor",  v:18420, fbt:8920, p:"FY2026"},
          {b:"Phone & data allowance",       r:"Rachel Pham", v:1820,  fbt:880,  p:"FY2026"},
          {b:"Continuing education",         r:"James Liu",    v:2200,  fbt:1064, p:"FY2026"},
          {b:"Parking · CBD",                 r:"Bea Williams", v:3200,  fbt:1548, p:"FY2026"},
        ].map((r, i) => (
          <div key={i} className="off-grid-row">
            <div className="off-grid-cell off-cell-strong">{r.b}</div>
            <div className="off-grid-cell">{r.r}</div>
            <div className="off-grid-cell off-cell-num">{oMoney(r.v)}</div>
            <div className="off-grid-cell off-cell-num">{oMoney(r.fbt)}</div>
            <div className="off-grid-cell off-cell-mono">{r.p}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function RDExpenditure() {
  return (
    <>
      <div className="off-card" style={{marginBottom:14, padding:'14px 18px', flexDirection:'row', alignItems:'center', gap:14}}>
        <div style={{width:44, height:44, borderRadius:11, background:'var(--sched-bg)', color:'var(--sched)', display:'grid', placeItems:'center'}}><OIcon name="info" width={20} height={20}/></div>
        <div style={{flex:1}}>
          <div style={{fontWeight:600, fontSize:15}}>R&amp;D Tax Incentive · Ironbark clinical AI</div>
          <div className="off-muted" style={{fontSize:13, marginTop:2}}>Eligible expenditure tagged below qualifies for R&amp;DTI · 43.5% refundable for entities &lt;$20m turnover.</div>
        </div>
      </div>
      <div className="off-card">
        <div className="off-grid" style={{gridTemplateColumns:'1.6fr 1.2fr 130px 130px 110px'}}>
          <div className="off-grid-headcell">Activity</div>
          <div className="off-grid-headcell">Category</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Period</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Eligible $</div>
          <div className="off-grid-headcell">Status</div>
          {[
            {a:"Ironbark model training infrastructure", c:"Core R&D · cloud compute", p:"Q1 2026", v:42180, status:"tagged"},
            {a:"Drug-drug interaction algorithm dev",     c:"Core R&D · staff time",   p:"Q1 2026", v:88420, status:"tagged"},
            {a:"Clinical safety review (pharmacists)",   c:"Supporting R&D",          p:"Q1 2026", v:18420, status:"tagged"},
            {a:"NDIS programme automation",              c:"Core R&D · platform",     p:"Q1 2026", v:24420, status:"tagged"},
            {a:"PBS claims auto-validation",             c:"Core R&D · platform",     p:"Q1 2026", v:18810, status:"submitted"},
          ].map((r, i) => (
            <div key={i} className="off-grid-row">
              <div className="off-grid-cell off-cell-strong">{r.a}</div>
              <div className="off-grid-cell off-muted">{r.c}</div>
              <div className="off-grid-cell off-cell-mono">{r.p}</div>
              <div className="off-grid-cell off-cell-num">{oMoney(r.v)}</div>
              <div className="off-grid-cell">{r.status === "tagged" ? <window.StatusPill kind="brand" label="Tagged"/> : <window.StatusPill kind="paid" label="Submitted"/>}</div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function AccountantExport() {
  return (
    <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14}}>
      {[
        {name:"MYOB AccountRight", desc:"Direct sync · daily journals + payroll",        status:"connected", last:"Today 22:00"},
        {name:"Xero",              desc:"Direct sync · journals + invoices + payroll",  status:"connected", last:"Today 22:00", primary:true},
        {name:"ATO · direct lodge", desc:"BAS, IAS, STP, FBT lodgement",                 status:"connected", last:"Last BAS 28/04"},
        {name:"CSV export",        desc:"Manual download for any accountant",            status:"available", last:"—"},
        {name:"QuickBooks Online", desc:"Direct sync via API",                          status:"available", last:"Not connected"},
        {name:"Custom journal feed",desc:"Webhook to your accounting system",            status:"available", last:"—"},
      ].map((p, i) => (
        <div key={i} className="off-card">
          <div className="off-card-header">
            <h3 className="off-card-title">{p.name}</h3>
            {p.primary && <window.StatusPill kind="brand" label="Primary"/>}
          </div>
          <div className="off-muted" style={{fontSize:13}}>{p.desc}</div>
          <div className="off-mono off-muted" style={{fontSize:11}}>{p.last}</div>
          {p.status === "connected"
            ? <window.StatusPill kind="paid" label="Connected"/>
            : <button className="btn btn--secondary btn--sm" style={{alignSelf:'flex-start'}}>Connect</button>}
        </div>
      ))}
    </div>
  );
}

// =================================================================
// GOVERNMENT PROGRAMS
// =================================================================
function GovPrograms() {
  const [tab, setTab] = React.useState("federal");
  return (
    <window.Screen eyebrow="Government programs &amp; PPA" title="Government programs"
      activeTab={tab} onTab={setTab}
      subtabs={[
        {k:"federal", l:"Federal · PPA"},
        {k:"state",   l:"State-based"},
        {k:"compliance", l:"Compliance &amp; accreditation"},
      ]}>
      {tab === "federal" && <FederalPPA/>}
      {tab === "state"   && <StateBased/>}
      {tab === "compliance" && <ProgramCompliance/>}
    </window.Screen>
  );
}

function FederalPPA() {
  const PROGS = [
    {id:"6CPA-DAA",    name:"6CPA · Dose Administration Aids",     stores:3, claimed:142, paid:122, eligible:64, accred:true},
    {id:"6CPA-MC",     name:"6CPA · MedsCheck (standard)",          stores:3, claimed:86,  paid:84,  eligible:90, accred:true},
    {id:"6CPA-DMC",    name:"6CPA · Diabetes MedsCheck",             stores:3, claimed:22,  paid:22,  eligible:140, accred:true},
    {id:"6CPA-HMR",    name:"6CPA · Home Medicines Review",          stores:3, claimed:8,   paid:6,   eligible:215, accred:true},
    {id:"NIP-FLU",     name:"NIP · Influenza vaccination",           stores:3, claimed:248, paid:240, eligible:18.80, accred:true},
    {id:"NIP-COV",     name:"NIP · COVID vaccination",               stores:3, claimed:62,  paid:60,  eligible:18.80, accred:true},
    {id:"OTS",         name:"Opioid Treatment Service (OTS)",        stores:1, claimed:18,  paid:18,  eligible:6.10,  accred:true,  note:"Camberwell only"},
    {id:"STAGED-SUPPLY",name:"Staged supply (S8)",                    stores:1, claimed:14,  paid:14,  eligible:7.20,  accred:true,  note:"Camberwell only"},
  ];
  const PAYMENTS = [
    {p:"6CPA · MedsCheck",  expected:7740, received:7560, variance:-180, ts:"22/05/2026", status:"received"},
    {p:"NIP · Influenza",   expected:4662, received:4512, variance:-150, ts:"22/05/2026", status:"received"},
    {p:"6CPA · DAA",        expected:6048, received:6048, variance:0,    ts:"22/05/2026", status:"received"},
    {p:"6CPA · Diabetes MC", expected:3080, received:3080, variance:0,   ts:"22/05/2026", status:"received"},
    {p:"6CPA · HMR",        expected:1290, received:0,    variance:-1290, ts:"Pending",   status:"awaiting"},
  ];

  return (
    <>
      <div className="off-kpi-grid">
        <window.KpiCard label="Programs enrolled" value={PROGS.length} delta={{dir:"up", text: PROGS.filter(p => p.accred).length + " accredited"}}/>
        <window.KpiCard label="Services delivered · MTD" value={PROGS.reduce((s,p) => s+p.claimed,0)} delta={{dir:"up", text:"▲ 18% pre-flu peak"}}/>
        <window.KpiCard label="Payments received · MTD" value={oMoney(21200)} delta={{text:"From PPA / Services AU"}}/>
        <window.KpiCard label="Variance" value={oMoney(-1620)} delta={{dir:"down", text:"vs expected"}}/>
      </div>

      <div className="off-card">
        <h3 className="off-card-title">Program enrolment &amp; claim status</h3>
        <div className="off-grid" style={{gridTemplateColumns:'1.6fr 80px 100px 100px 110px 90px 110px'}}>
          <div className="off-grid-headcell">Program</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Stores</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Claimed MTD</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Paid</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Per claim</div>
          <div className="off-grid-headcell">Accredited</div>
          <div className="off-grid-headcell">Status</div>
          {PROGS.map(p => (
            <div key={p.id} className="off-grid-row">
              <div className="off-grid-cell off-cell-strong">{p.name}
                {p.note && <div className="off-cell-mono off-muted" style={{fontSize:11, marginTop:2}}>{p.note}</div>}</div>
              <div className="off-grid-cell off-cell-num">{p.stores}</div>
              <div className="off-grid-cell off-cell-num">{p.claimed}</div>
              <div className="off-grid-cell off-cell-num">{p.paid}</div>
              <div className="off-grid-cell off-cell-num">{typeof p.eligible === "number" && p.eligible < 100 ? oMoney(p.eligible) : oMoney(p.eligible)}</div>
              <div className="off-grid-cell">{p.accred ? <window.StatusPill kind="paid" label="Accredited"/> : <window.StatusPill kind="hold" label="Pending"/>}</div>
              <div className="off-grid-cell">{p.claimed === p.paid ? <window.StatusPill kind="paid" label="Cleared"/> : <window.StatusPill kind="hold" label="Awaiting"/>}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="off-card" style={{marginTop:14}}>
        <h3 className="off-card-title">Recent payments · expected vs received</h3>
        <div className="off-grid" style={{gridTemplateColumns:'1.4fr 130px 130px 130px 130px 110px'}}>
          <div className="off-grid-headcell">Program</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Expected</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Received</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Variance</div>
          <div className="off-grid-headcell">When</div>
          <div className="off-grid-headcell">Status</div>
          {PAYMENTS.map((r, i) => (
            <div key={i} className="off-grid-row">
              <div className="off-grid-cell off-cell-strong">{r.p}</div>
              <div className="off-grid-cell off-cell-num">{oMoney(r.expected)}</div>
              <div className="off-grid-cell off-cell-num">{r.received > 0 ? oMoney(r.received) : "—"}</div>
              <div className="off-grid-cell off-cell-num" style={{color: r.variance < 0 ? 'var(--void-text)' : 'var(--text)'}}>{r.variance === 0 ? "Balanced" : oMoney(r.variance)}</div>
              <div className="off-grid-cell off-cell-mono off-muted">{r.ts}</div>
              <div className="off-grid-cell">{r.status === "received" ? <window.StatusPill kind="paid" label="Received"/> : <window.StatusPill kind="hold" label="Awaiting"/>}</div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function StateBased() {
  return (
    <>
      <div className="off-card" style={{marginBottom:14, padding:'14px 18px', flexDirection:'row', alignItems:'center', gap:14}}>
        <OIcon name="info" style={{color:'var(--brand)'}}/>
        <div style={{flex:1, fontSize:13, color:'var(--text-muted)'}}>
          State-based programs tracked separately. Currently active in <strong style={{color:'var(--text)'}}>Victoria</strong>. Add other states as stores expand.
        </div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:14}}>
        {[
          {state:"VIC", color:"var(--teal-700)", active:true, programs:[
            {name:"VicSCRIPT real-time prescription monitoring", status:"active"},
            {name:"SafeScript integration · S8 lookup",          status:"active"},
            {name:"Naloxone distribution program",                status:"active"},
            {name:"Victorian COVID-19 vaccination programme",     status:"active"},
          ]},
          {state:"WA", color:"var(--violet-600)", active:true, programs:[
            {name:"EDR · Emergency Dispensing Relief",            status:"active",  note:"Bushfire/cyclone response"},
            {name:"Real Time Prescription Monitoring (RTPM)",     status:"active"},
            {name:"WA Country Health Service contracts",          status:"under-review"},
          ]},
          {state:"NSW", color:"var(--text-subtle)", active:false, programs:[
            {name:"SafeScript NSW",         status:"pending"},
            {name:"NSW Health vaccination",  status:"pending"},
          ]},
          {state:"QLD", color:"var(--text-subtle)", active:false, programs:[
            {name:"QScript · prescription monitoring", status:"pending"},
          ]},
        ].map(s => (
          <div key={s.state} className="off-card" style={{padding:0, overflow:'hidden', opacity: s.active ? 1 : 0.6}}>
            <div style={{padding:'14px 18px', borderBottom:'1px solid var(--border)', display:'flex', alignItems:'center', gap:12, background: s.active ? s.color + "11" : 'transparent'}}>
              <div style={{width:44, height:44, borderRadius:10, background:s.color, color:'#fff', display:'grid', placeItems:'center', fontWeight:600, fontSize:14}}>{s.state}</div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600, fontSize:15}}>{s.state === "VIC" ? "Victoria" : s.state === "WA" ? "Western Australia" : s.state === "NSW" ? "New South Wales" : "Queensland"}</div>
                <div className="off-muted" style={{fontSize:12, marginTop:2}}>{s.active ? "Active programs" : "No stores yet · prepared"}</div>
              </div>
              {s.active ? <window.StatusPill kind="paid" label="Live"/> : <window.StatusPill kind="neutral" label="Future"/>}
            </div>
            <div style={{padding:8}}>
              {s.programs.map((p, i) => (
                <div key={i} style={{padding:'8px 12px', borderBottom: i < s.programs.length - 1 ? '1px solid var(--border-subtle)' : 'none', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                  <div style={{fontSize:13}}>{p.name}
                    {p.note && <div className="off-muted" style={{fontSize:11, marginTop:2}}>{p.note}</div>}</div>
                  {p.status === "active"      && <window.StatusPill kind="paid" label="Active"/>}
                  {p.status === "under-review" && <window.StatusPill kind="hold" label="Review"/>}
                  {p.status === "pending"     && <window.StatusPill kind="neutral" label="Future"/>}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

function ProgramCompliance() {
  return (
    <div className="off-card">
      <h3 className="off-card-title">Program accreditation per store</h3>
      <div className="off-grid" style={{gridTemplateColumns:'1.6fr repeat(3, 110px) 130px 100px'}}>
        <div className="off-grid-headcell">Program</div>
        {OD.STORES.map(s => <div key={s.id} className="off-grid-headcell">{s.code}</div>)}
        <div className="off-grid-headcell">Last audit</div>
        <div className="off-grid-headcell">Status</div>
        {[
          {name:"QCPP accreditation",          c:true, g:true, r:true, audit:"22/01/2026"},
          {name:"6CPA program enrolment",       c:true, g:true, r:true, audit:"01/04/2026"},
          {name:"NIP vaccination provider",     c:true, g:true, r:true, audit:"15/02/2026"},
          {name:"AIR upload arrangement",       c:true, g:true, r:true, audit:"01/03/2026"},
          {name:"S8 controlled drug license",   c:true, g:true, r:true, audit:"30/03/2026"},
          {name:"OTS provider (S8 opioid)",     c:true, g:false, r:false, audit:"01/02/2026", note:"Camberwell only"},
          {name:"PSA training accreditation",  c:true, g:true, r:false, audit:"22/05/2026"},
        ].map((r, i) => (
          <div key={i} className="off-grid-row">
            <div className="off-grid-cell off-cell-strong">{r.name}
              {r.note && <div className="off-muted" style={{fontSize:11, marginTop:2}}>{r.note}</div>}</div>
            {["c","g","r"].map(k => (
              <div key={k} className="off-grid-cell" style={{display:'flex', alignItems:'center'}}>
                {r[k] ? <OIcon name="check" width={14} height={14} style={{color:'var(--paid)'}}/> : <span style={{color:'var(--text-subtle)'}}>—</span>}
              </div>
            ))}
            <div className="off-grid-cell off-cell-mono off-muted">{r.audit}</div>
            <div className="off-grid-cell"><window.StatusPill kind="paid" label="Compliant"/></div>
          </div>
        ))}
      </div>
    </div>
  );
}

// =================================================================
// OPERATIONS
// =================================================================
function Operations() {
  const [tab, setTab] = React.useState("incidents");
  return (
    <window.Screen eyebrow="Operations" title="Operations"
      activeTab={tab} onTab={setTab}
      subtabs={[
        {k:"incidents", l:"Incidents", badge: 2, badgeColor:'var(--void)'},
        {k:"reviews", l:"Post-incident reviews"},
        {k:"sla", l:"SLA &amp; uptime"},
        {k:"escalation", l:"Escalation rules"},
      ]}
      actions={<><button className="btn btn--primary btn--sm"><OIcon name="plus"/> Log incident</button></>}>
      {tab === "incidents" && <Incidents/>}
      {tab === "reviews"   && <PostIncidentReviews/>}
      {tab === "sla"       && <SLAUptime/>}
      {tab === "escalation"&& <EscalationRules/>}
    </window.Screen>
  );
}

function Incidents() {
  return (
    <>
      <div className="off-kpi-grid">
        <window.KpiCard label="Active incidents" value="2" delta={{dir:"down", text:"P2 + P3"}}/>
        <window.KpiCard label="MTTR · 30d" value="42 min" delta={{dir:"up", text:"▼ from 1h 12m"}}/>
        <window.KpiCard label="Incidents · 30d" value="11" delta={{text:"6 closed · 3 reviewed"}}/>
        <window.KpiCard label="Uptime · 30d" value="99.84%" delta={{dir:"up", text:"Across registers + dispensary"}}/>
      </div>
      <div className="off-table">
        <div className="off-grid" style={{gridTemplateColumns:'90px 1.4fr 1fr 110px 110px 110px 110px'}}>
          <div className="off-grid-headcell">ID</div>
          <div className="off-grid-headcell">Title</div>
          <div className="off-grid-headcell">Component</div>
          <div className="off-grid-headcell">Store</div>
          <div className="off-grid-headcell">Priority</div>
          <div className="off-grid-headcell">Opened</div>
          <div className="off-grid-headcell">Status</div>
          {[
            {id:"INC-218", t:"Eftpos terminal · Tyro Pro Bluetooth pairing", comp:"Payments", store:"S-001", pri:"P2", opened:"Today 13:42", status:"active"},
            {id:"INC-217", t:"Printer · Zebra label printer offline", comp:"Hardware", store:"S-003", pri:"P3", opened:"Today 11:18", status:"active"},
            {id:"INC-216", t:"PharmX sync delay (4h backlog)", comp:"Integrations", store:"All", pri:"P3", opened:"Yesterday 22:14", status:"resolved", closed:"Today 02:18"},
            {id:"INC-215", t:"PBS Online Claiming · cert renewal", comp:"Integrations", store:"All", pri:"P2", opened:"24/05/2026", status:"resolved", closed:"25/05/2026"},
            {id:"INC-214", t:"Cold-chain fridge temperature alert", comp:"Compliance", store:"S-001", pri:"P1", opened:"22/05/2026", status:"resolved", closed:"22/05/2026", review:true},
            {id:"INC-213", t:"Register 02 · Camberwell · BSOD", comp:"Hardware", store:"S-001", pri:"P3", opened:"20/05/2026", status:"closed", closed:"20/05/2026"},
          ].map(r => (
            <div key={r.id} className="off-grid-row">
              <div className="off-grid-cell off-cell-mono off-cell-strong">{r.id}</div>
              <div className="off-grid-cell off-cell-strong">{r.t}
                {r.review && <span className="badge badge--sched" style={{marginLeft:8, fontSize:10}}>Post-review</span>}</div>
              <div className="off-grid-cell">{r.comp}</div>
              <div className="off-grid-cell off-mono">{r.store === "All" ? "All" : findS(r.store)?.code}</div>
              <div className="off-grid-cell">
                {r.pri === "P1" && <window.StatusPill kind="void" label="P1"/>}
                {r.pri === "P2" && <window.StatusPill kind="hold" label="P2"/>}
                {r.pri === "P3" && <window.StatusPill kind="neutral" label="P3"/>}
              </div>
              <div className="off-grid-cell off-cell-mono off-muted">{r.opened}</div>
              <div className="off-grid-cell">
                {r.status === "active"   && <window.StatusPill kind="void" label="Active"/>}
                {r.status === "resolved" && <window.StatusPill kind="paid" label="Resolved"/>}
                {r.status === "closed"   && <window.StatusPill kind="neutral" label="Closed"/>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function PostIncidentReviews() {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:12}}>
      {[
        {id:"PIR-214", inc:"INC-214 · Cold-chain fridge temperature alert", date:"22/05/2026", owner:"Suni Kapoor", lessons:3, actions:5, status:"complete"},
        {id:"PIR-198", inc:"INC-198 · PBS submission service outage", date:"10/05/2026", owner:"Aleksei Markov", lessons:4, actions:7, status:"complete"},
        {id:"PIR-184", inc:"INC-184 · Camberwell stocktake variance", date:"01/04/2026", owner:"Rachel Pham", lessons:2, actions:4, status:"complete"},
      ].map(r => (
        <div key={r.id} className="off-card" style={{padding:0, overflow:'hidden'}}>
          <div style={{padding:'14px 18px', borderBottom:'1px solid var(--border)', display:'flex', alignItems:'center', gap:12}}>
            <div style={{width:40, height:40, borderRadius:10, background:'var(--sched-bg)', color:'var(--sched)', display:'grid', placeItems:'center'}}><OIcon name="doc" width={18} height={18}/></div>
            <div style={{flex:1}}>
              <div style={{fontWeight:600, fontSize:14}}>{r.id}</div>
              <div className="off-muted" style={{fontSize:12, marginTop:2}}>{r.inc}</div>
            </div>
            <window.StatusPill kind="paid" label="Complete"/>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)'}}>
            <div style={{padding:'12px 18px', borderRight:'1px solid var(--border)'}}>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Date</div>
              <div className="off-mono" style={{fontSize:13, marginTop:4}}>{r.date}</div>
            </div>
            <div style={{padding:'12px 18px', borderRight:'1px solid var(--border)'}}>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Owner</div>
              <div style={{fontSize:13, fontWeight:500, marginTop:4}}>{r.owner}</div>
            </div>
            <div style={{padding:'12px 18px', borderRight:'1px solid var(--border)'}}>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Lessons</div>
              <div style={{fontSize:18, fontWeight:600, fontVariantNumeric:'tabular-nums', marginTop:2}}>{r.lessons}</div>
            </div>
            <div style={{padding:'12px 18px'}}>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Actions</div>
              <div style={{fontSize:18, fontWeight:600, fontVariantNumeric:'tabular-nums', marginTop:2}}>{r.actions}</div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function SLAUptime() {
  const SLA = [
    {comp:"POS · register",     target:99.9, actual:99.84, store:"S-001"},
    {comp:"POS · register",     target:99.9, actual:99.92, store:"S-002"},
    {comp:"POS · register",     target:99.9, actual:99.88, store:"S-003"},
    {comp:"Dispensary system",  target:99.95, actual:99.98, store:"All"},
    {comp:"PharmX integration", target:99.5, actual:99.42, store:"All"},
    {comp:"PBS Online Claiming",target:99.0, actual:99.84, store:"All"},
    {comp:"Adyen payments",     target:99.95, actual:99.96, store:"All"},
    {comp:"Ironbark AI",        target:99.5, actual:99.78, store:"All"},
  ];
  return (
    <div className="off-table">
      <div className="off-grid" style={{gridTemplateColumns:'1.6fr 110px 110px 110px 1fr'}}>
        <div className="off-grid-headcell">Component</div>
        <div className="off-grid-headcell">Store</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>SLA target</div>
        <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Actual</div>
        <div className="off-grid-headcell">Performance</div>
        {SLA.map((r, i) => {
          const meeting = r.actual >= r.target;
          return (
            <div key={i} className="off-grid-row">
              <div className="off-grid-cell off-cell-strong">{r.comp}</div>
              <div className="off-grid-cell off-mono">{r.store}</div>
              <div className="off-grid-cell off-cell-num">{r.target.toFixed(2)}%</div>
              <div className="off-grid-cell off-cell-num off-cell-strong" style={{color: meeting ? 'var(--paid-text)' : 'var(--void-text)'}}>{r.actual.toFixed(2)}%</div>
              <div className="off-grid-cell">
                <div style={{display:'flex', alignItems:'center', gap:8}}>
                  <div style={{flex:1, height:6, background:'var(--bg-muted)', borderRadius:3, overflow:'hidden'}}>
                    <div style={{height:'100%', width: (r.actual / 100 * 100) + '%', background: meeting ? 'var(--paid)' : 'var(--void)'}}/>
                  </div>
                  {meeting ? <window.StatusPill kind="paid" label="Meeting"/> : <window.StatusPill kind="void" label="Breach"/>}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function EscalationRules() {
  return (
    <div className="off-table">
      <div className="off-grid" style={{gridTemplateColumns:'90px 1.4fr 1fr 130px 1fr'}}>
        <div className="off-grid-headcell">Priority</div>
        <div className="off-grid-headcell">Trigger</div>
        <div className="off-grid-headcell">Initial responder</div>
        <div className="off-grid-headcell">Escalation</div>
        <div className="off-grid-headcell">Notified</div>
        {[
          {p:"P1", trig:"Cold-chain breach · S8 register loss · register-wide POS outage", r:"On-call pharmacist", esc:"15 min", n:"PIC + Group manager + CTO"},
          {p:"P2", trig:"Payment terminal down · PBS submission failure · single register outage", r:"Store manager", esc:"30 min", n:"PIC + IT lead"},
          {p:"P3", trig:"Label printer down · Ironbark slow · scanner offline", r:"Store assistant", esc:"2 hours", n:"Store manager"},
          {p:"P4", trig:"Cosmetic issues · feature requests", r:"Store assistant", esc:"24 hours", n:"Office admin"},
        ].map((r, i) => (
          <div key={i} className="off-grid-row">
            <div className="off-grid-cell">
              {r.p === "P1" && <window.StatusPill kind="void" label="P1"/>}
              {r.p === "P2" && <window.StatusPill kind="hold" label="P2"/>}
              {r.p === "P3" && <window.StatusPill kind="brand" label="P3"/>}
              {r.p === "P4" && <window.StatusPill kind="neutral" label="P4"/>}
            </div>
            <div className="off-grid-cell">{r.trig}</div>
            <div className="off-grid-cell off-cell-strong">{r.r}</div>
            <div className="off-grid-cell">{r.esc}</div>
            <div className="off-grid-cell off-muted">{r.n}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// =================================================================
// ADMIN — Audit logs, integrations status, formulary
// =================================================================
function AuditLogs() {
  return (
    <window.Screen eyebrow="Administration" title="Audit logs"
      actions={<><button className="btn btn--ghost btn--sm">Export</button></>}>
      <div className="off-kpi-grid">
        <window.KpiCard label="Events today" value="2,418" delta={{text:"Across all stores"}}/>
        <window.KpiCard label="S8 entries" value="14" delta={{dir:"down", text:"1 awaiting countersign"}}/>
        <window.KpiCard label="Permission changes · 30d" value="8" delta={{text:"All approved by group mgr"}}/>
        <window.KpiCard label="Tamper-evident chain" value="OK" delta={{dir:"up", text:"Hash-chain verified"}}/>
      </div>
      <div className="off-card">
        <h3 className="off-card-title">Recent · all stores</h3>
        <div className="off-grid" style={{gridTemplateColumns:'110px 130px 1fr 1fr 110px 80px'}}>
          <div className="off-grid-headcell">Time</div>
          <div className="off-grid-headcell">Action</div>
          <div className="off-grid-headcell">Target</div>
          <div className="off-grid-headcell">Detail</div>
          <div className="off-grid-headcell">Store</div>
          <div className="off-grid-headcell">By</div>
          {OD.AUDIT.map((e, i) => (
            <div key={i} className="off-grid-row">
              <div className="off-grid-cell off-cell-mono off-muted">{e.ts}</div>
              <div className="off-grid-cell off-cell-strong">{e.action}</div>
              <div className="off-grid-cell">{e.target}</div>
              <div className="off-grid-cell off-muted">{e.detail}</div>
              <div className="off-grid-cell off-mono">S-001</div>
              <div className="off-grid-cell"><span className="audit-actor" style={{background:'var(--brand)', color:'#fff'}}>{e.actor}</span></div>
            </div>
          ))}
        </div>
      </div>
    </window.Screen>
  );
}

function IntegrationStatus() {
  const INT = [
    {name:"PBS Online Claiming",   cat:"Federal · Services AU", uptime:99.84, last:"4m ago",  cert:"Valid · expires 30/06/2027", status:"healthy"},
    {name:"AIR · vaccination",      cat:"Federal · Services AU", uptime:99.92, last:"18m ago", cert:"Valid · expires 30/06/2027", status:"healthy"},
    {name:"ePrescribing · MedView", cat:"Federal · ADHA",        uptime:99.88, last:"2m ago",  cert:"Valid", status:"healthy"},
    {name:"SafeScript VIC",         cat:"State · VIC",            uptime:99.72, last:"8m ago",  cert:"Valid", status:"healthy"},
    {name:"PharmX",                 cat:"Buying · ordering",     uptime:99.42, last:"12s ago", cert:"OAuth · refreshed daily", status:"healthy"},
    {name:"EDI · API",              cat:"Buying · ordering",     uptime:99.18, last:"2m ago",  cert:"Cert", status:"healthy"},
    {name:"EDI · NDSS",             cat:"Buying · ordering",     uptime:97.84, last:"4h ago",  cert:"Cert", status:"warning"},
    {name:"Adyen payments",         cat:"Finance · payments",     uptime:99.96, last:"8s ago",  cert:"API key", status:"healthy"},
    {name:"Xero",                   cat:"Finance · accounting",   uptime:99.94, last:"22h ago", cert:"OAuth · refreshes monthly", status:"healthy"},
    {name:"Healthbookings",         cat:"Customer · booking",     uptime:99.88, last:"1m ago",  cert:"Internal · shared spine", status:"healthy"},
    {name:"Tyro Pro · Eftpos",      cat:"Finance · payments",     uptime:98.18, last:"4h ago",  cert:"Bluetooth pair · expiring", status:"warning"},
    {name:"Ironbark · clinical AI", cat:"Clinical",               uptime:99.78, last:"6s ago",  cert:"Internal", status:"healthy"},
  ];
  return (
    <window.Screen eyebrow="Administration" title="Integration status"
      actions={<><button className="btn btn--secondary btn--sm"><OIcon name="transfer"/> Re-handshake all</button></>}>
      <div className="off-table">
        <div className="off-grid" style={{gridTemplateColumns:'1.4fr 1fr 100px 130px 1fr 110px'}}>
          <div className="off-grid-headcell">Integration</div>
          <div className="off-grid-headcell">Category</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Uptime 30d</div>
          <div className="off-grid-headcell">Last sync</div>
          <div className="off-grid-headcell">Certificate / auth</div>
          <div className="off-grid-headcell">Status</div>
          {INT.map((i, idx) => (
            <div key={idx} className="off-grid-row">
              <div className="off-grid-cell off-cell-strong">{i.name}</div>
              <div className="off-grid-cell off-muted">{i.cat}</div>
              <div className="off-grid-cell off-cell-num" style={{color: i.uptime > 99.5 ? 'var(--paid-text)' : 'var(--hold-text)'}}>{i.uptime.toFixed(2)}%</div>
              <div className="off-grid-cell off-cell-mono off-muted">{i.last}</div>
              <div className="off-grid-cell off-muted" style={{fontSize:12}}>{i.cert}</div>
              <div className="off-grid-cell">{i.status === "healthy" ? <window.StatusPill kind="paid" label="Healthy"/> : <window.StatusPill kind="hold" label="Warning"/>}</div>
            </div>
          ))}
        </div>
      </div>
    </window.Screen>
  );
}

window.OFFICE_SCREENS = Object.assign(window.OFFICE_SCREENS || {}, {
  pbsClaims: PBSClaims,
  eodRecon: EodReconciliation,
  invoiceMatching: InvoiceMatching,
  pnl: PnLByStore,
  tax: Tax,
  govPrograms: GovPrograms,
  operations: Operations,
  auditLogs: AuditLogs,
  integrations: IntegrationStatus,
});