// epic-zone.jsx — Epic Hyperspace, faithful enough to hurt.
// Chrome + patient sidebar + a tab-routed content area. The hostile-UI point is
// made here structurally, not with a caption: the creatinine story is genuinely
// split across Results / MAR / Notes / I&O / Problems, reference ranges live in
// a separate frozen column, targets are 10px, and the tab you need is under More.
// Exports on window: EpicZone, EPIC_TABS

const EPIC_TABS = [
  { id: 'snapshot', label: 'SnapShot' },
  { id: 'results',  label: 'Results Review' },
  { id: 'mar',      label: 'MAR' },
  { id: 'notes',    label: 'Notes' },
  { id: 'orders',   label: 'Orders' },
];
const EPIC_MORE_TABS = [
  { id: 'io',       label: 'Intake/Output' },
  { id: 'problems', label: 'Problem List' },
  { id: 'allergies',label: 'Allergies' },
];

function EpicZone({ activeTab, setActiveTab, orderState, orderActions, loading }) {
  const [moreOpen, setMoreOpen] = React.useState(false);
  const moreRef = React.useRef(null);
  const P = window.PATIENT;

  // Without this the menu hangs over the chart until you click it again.
  React.useEffect(() => {
    if (!moreOpen) return;
    const onDown = (e) => { if (moreRef.current && !moreRef.current.contains(e.target)) setMoreOpen(false); };
    document.addEventListener('mousedown', onDown);
    return () => document.removeEventListener('mousedown', onDown);
  }, [moreOpen]);

  const allTabs = [...EPIC_TABS, ...EPIC_MORE_TABS];
  const current = allTabs.find(t => t.id === activeTab) || EPIC_TABS[0];

  return (
    <div style={ez.root}>
      {/* ── Bar 1 ── */}
      <div style={ez.bar1}>
        <div style={ez.epicLogo}>
          <svg width="38" height="18" viewBox="0 0 38 18"><rect width="38" height="18" rx="2" fill="#fff"/><text x="4" y="13" fontFamily="Arial" fontWeight="900" fontSize="13" fill="#8B1A1A">Epic</text></svg>
        </div>
        <span style={ez.bar1Title}>Hyperspace — ROG HT2 NEPHROLOGY</span>
        <div style={ez.bar1Search}>
          <span style={{color:'#FCA5A5',fontSize:11}}>🔍</span>
          <span style={{color:'#FCA5A5',fontSize:11,marginLeft:4}}>Search (Ctrl+Space)</span>
        </div>
        <div style={ez.bar1Right}>
          <span style={ez.bar1Icon}>🖨</span><span style={ez.bar1Icon}>🔒</span>
          <span style={{...ez.bar1Icon, fontSize:11}}>Log Out</span>
        </div>
      </div>

      {/* ── Bar 2 ── */}
      <div style={ez.bar2}>
        {['🏠 Home','📅 Schedule','📥 In Basket','📋 Chart','⚕ Encounter','📞 Telephone Call','👥 Patient Lists','📖 Phone Book','🔗 Links','More ▾'].map((item,i) => (
          <span key={i} style={ez.bar2Item}>{item}</span>
        ))}
        <div style={{flex:1}}></div>
        <span style={ez.bar2Item}>Print ▾</span><span style={ez.bar2Item}>Secure</span><span style={ez.bar2Item}>Log Out ▾</span>
      </div>

      {/* ── Bar 3: activity tabs ── */}
      <div style={ez.bar3}>
        <div style={ez.bar3Icons}>
          {['≡','⊞','💬','◁','▷'].map((c,i) => <span key={i} style={ez.iconBtn}>{c}</span>)}
        </div>
        <div style={ez.patientTab}>
          <div style={ez.patientTabAvatar}>{P.initials}</div>
          <span style={ez.patientTabName}>{P.name}</span>
          <span style={ez.patientTabClose}>✕</span>
        </div>
        <div style={ez.contentTabs} ref={moreRef}>
          {EPIC_TABS.map(t => (
            <span key={t.id}
              data-gc={`tab-${t.id}`}
              style={{...ez.contentTab, ...(activeTab===t.id ? ez.contentTabActive : {})}}
              onClick={() => setActiveTab(t.id)}>{t.label}</span>
          ))}
          {/* The one you need is, of course, in here. */}
          <span data-gc="tab-more"
            style={{...ez.contentTab, ...(EPIC_MORE_TABS.some(t=>t.id===activeTab) ? ez.contentTabActive : {})}}
            onClick={() => setMoreOpen(o => !o)}>More ▾</span>
          {moreOpen && (
            <div style={ez.moreMenu}>
              {EPIC_MORE_TABS.map(t => (
                <div key={t.id} data-gc={`tab-${t.id}`} style={ez.moreItem}
                  onClick={() => { setActiveTab(t.id); setMoreOpen(false); }}>{t.label}</div>
              ))}
            </div>
          )}
        </div>
        <div style={{flex:1}}></div>
        <span style={{fontSize:11,color:'#374151',marginRight:8}}>▸</span>
      </div>

      {/* ── Main ── */}
      <div style={ez.mainRow}>
        <PatientSidebar />
        <div style={ez.pane}>
          <div style={ez.paneHead}>
            <span style={ez.paneTitle}>{current.label}</span>
            <span style={ez.paneCrumb}>Doe, John A · 7N-412B · Day 4 · Nephrology Inpatient</span>
          </div>
          {loading
            ? <LoadingPane label={current.label} />
            : <PaneRouter tab={activeTab} orderState={orderState} orderActions={orderActions} />}
        </div>
      </div>
    </div>
  );
}

function LoadingPane({ label }) {
  return (
    <div style={ez.loading}>
      <div style={ez.spinner} />
      <div style={ez.loadingText}>Retrieving {label}…</div>
    </div>
  );
}

function PaneRouter({ tab, orderState, orderActions }) {
  switch (tab) {
    case 'results':   return <ResultsPane />;
    case 'mar':       return <MarPane />;
    case 'notes':     return <NotesPane />;
    case 'orders':    return <window.OrdersPane state={orderState} actions={orderActions} />;
    case 'io':        return <IOPane />;
    case 'problems':  return <ProblemsPane />;
    case 'allergies': return <AllergiesPane />;
    default:          return <SnapshotPane />;
  }
}

// ── Sidebar ─────────────────────────────────────────────────────────────────
function PatientSidebar() {
  const P = window.PATIENT;
  const careGaps = [
    { label:'IMM: DTap/Td (2 …' }, { label:'IMM: Influenza (1)' },
    { label:'COVID-19 Vaccine (5…' }, { label:'HIV SCREENING' },
  ];
  return (
    <div style={ez.sidebar}>
      <div style={ez.sideAvatar}>{P.initials}</div>
      <div style={ez.sideName}>{P.name}</div>
      <div style={ez.sideMeta}>{P.sex}, {P.age} year old, {P.dob}</div>
      <div style={ez.sideMeta}>MRN: {P.mrn}</div>
      <div style={ez.sideMeta}>CSN: {P.csn}</div>
      <div style={ez.sideMeta}>Cur Location: {P.location}</div>
      <div style={ez.sideMeta}>Code: {P.code}</div>
      <div style={ez.sideWarning}>Adv. Directives: {P.advDirectives}</div>
      <div style={ez.sideWarning}>Isolation: {P.isolation}</div>
      <div style={ez.sideDivider}></div>
      <div style={ez.sideVisit}>
        <div style={ez.sideVisitLabel}>ADMIT · DAY {P.admitDay}</div>
        <div style={ez.sideVisitType}>{P.service}</div>
        <div style={ez.sideVisitNote}>{P.summary}</div>
      </div>
      <div style={ez.sideDivider}></div>
      <div style={ez.sideVitals}>
        {[['Weight',P.weight],['BMI',P.bmi],['BP',P.bp],['HR',P.hr]].map(([k,v]) => (
          <div key={k} style={ez.sideVitalRow}><span style={ez.sideVitalLabel}>{k}</span><span>{v}</span></div>
        ))}
      </div>
      <div style={ez.sideDivider}></div>
      <div style={ez.sideSectionLabel}>CARE TEAM</div>
      {window.CONSULTS.map(c => (
        <div key={c.service} style={ez.sideMeta}>{c.service}</div>
      ))}
      <div style={ez.sideDivider}></div>
      <div style={ez.sideSectionLabel}>CARE GAPS</div>
      {careGaps.map((g,i) => (
        <div key={i} style={ez.sideGap}><span style={{color:'#DC2626',fontSize:9.5}}>●</span> {g.label}</div>
      ))}
    </div>
  );
}

// ── Results: the flowsheet ──────────────────────────────────────────────────
function ResultsPane() {
  const [panel, setPanel] = React.useState('ALL');
  const panels = ['ALL','BMP','RENAL','CBC','HEP','DRUG'];
  const rows = window.LABS.filter(l => panel === 'ALL' || l.panel === panel);
  const abn = v => /[↑↓]/.test(v);

  return (
    <div style={ez.paneBody}>
      <div style={ez.filterBar}>
        {panels.map(p => (
          <span key={p} data-gc={`lab-panel-${p}`}
            style={{...ez.filterChip, ...(panel===p ? ez.filterChipOn : {})}}
            onClick={() => setPanel(p)}>{p}</span>
        ))}
        <div style={{flex:1}} />
        <span style={ez.filterNote}>7 columns · scroll → for earlier</span>
      </div>
      {/* Horizontal scroll with the ref range pinned in its own column, which is
          exactly why you can never see the range and the value together. */}
      <div style={ez.flowWrap}>
        <table style={ez.flow}>
          <thead>
            <tr>
              <th style={{...ez.fh, ...ez.fhSticky, left:0, minWidth:126}}>Component</th>
              <th style={{...ez.fh, ...ez.fhSticky, left:126, minWidth:106}}>Ref Range</th>
              {window.LAB_DATES.map((d,i) => (
                <th key={d} style={{...ez.fh, minWidth:74, ...(i===window.LAB_DATES.length-1 ? ez.fhToday : {})}}>{d}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map(r => (
              <tr key={r.name} style={ez.fr}>
                <td style={{...ez.fc, ...ez.fcSticky, left:0}}>{r.name}</td>
                <td style={{...ez.fc, ...ez.fcSticky, left:126, color:'#9CA3AF', fontSize:10}}>{r.ref}</td>
                {r.vals.map((v,i) => (
                  <td key={i} style={{
                    ...ez.fv,
                    color: abn(v) ? '#DC2626' : '#111827',
                    fontWeight: abn(v) ? 700 : 400,
                    background: i===r.vals.length-1 ? '#EFF6FF' : 'transparent',
                  }}>{v}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={ez.paneFoot}>Showing {rows.length} of {window.LABS.length} components · Filed by Lab Interface · Last refresh 06:14</div>
    </div>
  );
}

// ── MAR ─────────────────────────────────────────────────────────────────────
function MarPane() {
  return (
    <div style={ez.paneBody}>
      <div style={ez.filterBar}><span style={ez.filterNote}>Active &amp; PRN · 04/30 · 14 orders</span></div>
      <div style={ez.tableWrap}>
        <table style={ez.tbl}>
          <thead><tr>{['Medication','Sig','Route','Start','Class','Status'].map(h => <th key={h} style={ez.th}>{h}</th>)}</tr></thead>
          <tbody>
            {window.MEDS.map(m => (
              <tr key={m.name} style={ez.tr}>
                <td style={{...ez.td, fontWeight:600}}>
                  {m.name}
                  {m.flag==='renal' && <span style={ez.pillRenal}>RENAL DOSE</span>}
                </td>
                <td style={{...ez.td, color:'#4B5563'}}>{m.sig}</td>
                <td style={ez.td}>{m.route}</td>
                <td style={ez.td}>{m.start}</td>
                <td style={{...ez.td, color:'#6B7280'}}>{m.cls}</td>
                <td style={ez.td}>
                  <span style={m.status==='HELD' ? ez.pillHeld : m.status==='PRN' ? ez.pillPrn : ez.pillActive}>{m.status}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={ez.paneFoot}>Vancomycin last administered 04/29 20:00 · next due 04/30 20:00</div>
    </div>
  );
}

// ── Notes ───────────────────────────────────────────────────────────────────
function NotesPane() {
  return (
    <div style={ez.paneBody}>
      <div style={ez.filterBar}><span style={ez.filterNote}>This encounter · 5 notes · 3 authors</span></div>
      <div style={ez.tableWrap}>
        <table style={ez.tbl}>
          <thead><tr>{['Filed','Type','Service','Author','Length'].map(h => <th key={h} style={ez.th}>{h}</th>)}</tr></thead>
          <tbody>
            {window.PRIOR_NOTES.map((n,i) => (
              <tr key={i} style={ez.tr} data-gc={`note-row-${i}`}>
                <td style={ez.td}>{n.date}</td>
                <td style={{...ez.td, fontWeight:600, color:'#0066CC'}}>{n.title}</td>
                <td style={ez.td}>{n.svc}</td>
                <td style={ez.td}>{n.author}</td>
                <td style={{...ez.td, color:'#6B7280'}}>{n.words} words</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={ez.paneFoot}>5 notes filed this encounter · sorted by most recent</div>
    </div>
  );
}

// ── I&O ─────────────────────────────────────────────────────────────────────
function IOPane() {
  return (
    <div style={ez.paneBody}>
      <div style={ez.filterBar}><span style={ez.filterNote}>Shift totals · mL</span></div>
      <div style={ez.tableWrap}>
        <table style={ez.tbl}>
          <thead><tr>{['Date','Intake PO','Intake IV','Output','Net','Daily Weight'].map(h => <th key={h} style={ez.th}>{h}</th>)}</tr></thead>
          <tbody>
            {window.IO_DATA.map(r => (
              <tr key={r.date} style={ez.tr}>
                <td style={{...ez.td, fontWeight:600}}>{r.date}</td>
                <td style={ez.td}>{r.inPO}</td>
                <td style={ez.td}>{r.inIV}</td>
                <td style={ez.td}>{r.out}</td>
                <td style={{...ez.td, fontWeight:700, color: r.net < 0 ? '#166534' : '#DC2626'}}>{r.net > 0 ? '+' : ''}{r.net}</td>
                <td style={ez.td}>{r.weight}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={ez.paneFoot}>Shift totals recorded by nursing · last entry 04/30 06:00</div>
    </div>
  );
}

// ── Problem list ────────────────────────────────────────────────────────────
function ProblemsPane() {
  return (
    <div style={ez.paneBody}>
      <div style={ez.filterBar}><span style={ez.filterNote}>Active · 11 problems</span></div>
      <div style={ez.tableWrap}>
        <table style={ez.tbl}>
          <thead><tr>{['#','Problem','ICD-10','Onset','Noted by'].map(h => <th key={h} style={ez.th}>{h}</th>)}</tr></thead>
          <tbody>
            {window.PROBLEMS.map(p => (
              <tr key={p.n} style={ez.tr}>
                <td style={{...ez.td, color:'#9CA3AF'}}>{p.n}</td>
                <td style={{...ez.td, fontWeight:600}}>{p.name}</td>
                <td style={{...ez.td, color:'#6B7280'}}>{p.icd}</td>
                <td style={ez.td}>{p.onset}</td>
                <td style={{...ez.td, color:'#6B7280'}}>{p.by}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Allergies ───────────────────────────────────────────────────────────────
function AllergiesPane() {
  return (
    <div style={ez.paneBody}>
      <div style={ez.filterBar}><span style={ez.filterNote}>4 recorded</span></div>
      <div style={ez.tableWrap}>
        <table style={ez.tbl}>
          <thead><tr>{['Agent','Reaction','Severity','Noted'].map(h => <th key={h} style={ez.th}>{h}</th>)}</tr></thead>
          <tbody>
            {window.ALLERGIES.map(a => (
              <tr key={a.agent} style={ez.tr}>
                <td style={{...ez.td, fontWeight:600}}>{a.agent}</td>
                <td style={ez.td}>{a.reaction}</td>
                <td style={ez.td}>{a.severity}</td>
                <td style={{...ez.td, color:'#6B7280'}}>{a.noted}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── SnapShot ────────────────────────────────────────────────────────────────
function SnapshotPane() {
  return (
    <div style={ez.paneBody}>
      <div style={ez.snapGrid}>
        <div style={ez.snapCard}>
          <div style={ez.snapTitle}>Recent Vitals</div>
          {window.VITALS.map(v => (
            <div key={v.t} style={ez.snapRow}>
              <span style={ez.snapK}>{v.t}</span>
              <span style={ez.snapV}>{v.bp} · HR {v.hr} · RR {v.rr} · {v.temp}°C · {v.spo2}</span>
            </div>
          ))}
        </div>
        <div style={ez.snapCard}>
          <div style={ez.snapTitle}>Consulting Services</div>
          {window.CONSULTS.map(c => (
            <div key={c.service} style={ez.snapRow}>
              <span style={ez.snapK}>{c.service}</span>
              <span style={ez.snapV}>{c.md} — {c.status}</span>
            </div>
          ))}
        </div>
        <div style={ez.snapCard}>
          <div style={ez.snapTitle}>Allergies</div>
          {window.ALLERGIES.map(a => (
            <div key={a.agent} style={ez.snapRow}>
              <span style={ez.snapK}>{a.agent}</span><span style={ez.snapV}>{a.reaction}</span>
            </div>
          ))}
        </div>
        <div style={ez.snapCard}>
          <div style={ez.snapTitle}>Active Problems (11)</div>
          {window.PROBLEMS.slice(0,6).map(p => (
            <div key={p.n} style={ez.snapRow}><span style={ez.snapK}>{p.icd}</span><span style={ez.snapV}>{p.name}</span></div>
          ))}
          <div style={{...ez.snapRow, color:'#0066CC', cursor:'pointer'}}>+ 5 more…</div>
        </div>
      </div>
      <div style={ez.paneFoot}>SnapShot · configured by department template</div>
    </div>
  );
}

// ── Styles ──────────────────────────────────────────────────────────────────
const EPIC_FONT = '"Segoe UI", system-ui, -apple-system, sans-serif';
// Epic's chrome is maroon, not navy. These are v1's values.
const EPIC_RED = '#8B1A1A';
const EPIC_RED2 = '#7A1616';
const EPIC_BLUE = '#0066CC';
const ez = {
  root: { width:'100%', height:'100%', display:'flex', flexDirection:'column', background:'#F0F0F0', color:'#111827', fontFamily:EPIC_FONT, fontSize:12, overflow:'hidden' },
  bar1: { height:28, background:EPIC_RED, color:'white', display:'flex', alignItems:'center', padding:'0 8px', gap:8, flexShrink:0, overflow:'hidden' },
  epicLogo: { display:'flex', alignItems:'center' },
  bar1Title: { color:'#FECACA', fontSize:12, fontWeight:500 },
  bar1Search: { background:'rgba(255,255,255,0.15)', border:'1px solid rgba(255,255,255,0.25)', borderRadius:3, padding:'3px 10px', display:'flex', alignItems:'center', marginLeft:12, width:200 },
  bar1Right: { marginLeft:'auto', display:'flex', alignItems:'center', gap:10 },
  bar1Icon: { color:'#FCA5A5', fontSize:12, cursor:'pointer' },
  bar2: { height:24, background:EPIC_RED2, borderBottom:'1px solid rgba(0,0,0,0.2)', display:'flex', alignItems:'center', padding:'0 6px', gap:6, flexShrink:0, overflow:'hidden' },
  bar2Item: { fontSize:10.5, color:'#FECACA', cursor:'pointer', whiteSpace:'nowrap', flexShrink:0 },
  bar3: { height:30, background:'#D1D5DB', borderBottom:'2px solid #9CA3AF', display:'flex', alignItems:'center', padding:'0 6px', gap:6, flexShrink:0, position:'relative' },
  bar3Icons: { display:'flex', gap:3 },
  iconBtn: { fontSize:13, color:'#374151', cursor:'pointer', padding:'0 3px' },
  patientTab: { display:'flex', alignItems:'center', gap:5, background:'#fff', border:'1px solid #CBD5E1', borderRadius:'3px 3px 0 0', padding:'3px 7px', marginLeft:4 },
  patientTabAvatar: { width:18, height:18, borderRadius:'50%', background:'#7C3AED', color:'#fff', fontSize:9, display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700 },
  patientTabName: { fontSize:11, fontWeight:600, color:'#111827' },
  patientTabClose: { fontSize:9.5, color:'#9CA3AF', cursor:'pointer' },
  contentTabs: { display:'flex', alignItems:'center', gap:1, marginLeft:8, position:'relative' },
  contentTab: { fontSize:11, color:'#374151', cursor:'pointer', padding:'4px 10px', background:'#E5E7EB', border:'1px solid #9CA3AF', borderBottom:'none', borderRadius:'3px 3px 0 0', whiteSpace:'nowrap' },
  contentTabActive: { background:'white', color:'#1E3A5F', fontWeight:600 },
  moreMenu: { position:'absolute', top:28, right:0, background:'#fff', border:'1px solid #9CA3AF', borderRadius:3, boxShadow:'0 4px 12px rgba(0,0,0,0.14)', zIndex:60, minWidth:132 },
  moreItem: { fontSize:11, padding:'6px 10px', cursor:'pointer', color:'#374151', borderBottom:'1px solid #F3F4F6' },
  mainRow: { flex:1, display:'flex', overflow:'hidden' },
  sidebar: { width:178, background:'white', borderRight:'1px solid #D1D5DB', padding:'8px 8px 12px', overflowY:'auto', flexShrink:0 },
  sideAvatar: { width:40, height:40, borderRadius:'50%', background:'#7C3AED', color:'#fff', fontSize:16, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 6px' },
  sideName: { fontSize:13, fontWeight:700, color:'#111827', textAlign:'center', marginBottom:5 },
  sideMeta: { fontSize:10.5, color:'#374151', lineHeight:1.6 },
  sideWarning: { fontSize:10, background:'#FEF9C3', color:'#92400E', fontWeight:700, padding:'3px 5px', borderRadius:2, margin:'3px 0', lineHeight:1.3 },
  sideDivider: { height:1, background:'#E5E7EB', margin:'6px 0' },
  sideVisit: { background:'#F9FAFB', border:'1px solid #E5E7EB', borderRadius:3, padding:'5px 6px' },
  sideVisitLabel: { fontSize:9, fontWeight:700, color:'#0066CC', letterSpacing:0.4 },
  sideVisitType: { fontSize:11, fontWeight:600, color:'#111827', marginTop:2 },
  sideVisitNote: { fontSize:10, color:'#4B5563', marginTop:1 },
  sideVitals: { display:'flex', flexDirection:'column', gap:2 },
  sideVitalRow: { display:'flex', justifyContent:'space-between', fontSize:10, color:'#111827' },
  sideVitalLabel: { color:'#6B7280' },
  sideSectionLabel: { fontSize:10, fontWeight:700, color:'#9CA3AF', letterSpacing:0.5, marginBottom:3, textTransform:'uppercase' },
  sideGap: { fontSize:10, color:'#4B5563', lineHeight:1.7 },
  pane: { flex:1, display:'flex', flexDirection:'column', background:'#fff', overflow:'hidden' },
  paneHead: { height:30, borderBottom:'1px solid #E5E7EB', display:'flex', alignItems:'center', padding:'0 10px', gap:10, background:'white', flexShrink:0 },
  paneTitle: { fontSize:14, fontWeight:600, color:EPIC_BLUE },
  paneCrumb: { fontSize:10, color:'#9CA3AF' },
  paneBody: { flex:1, display:'flex', flexDirection:'column', overflow:'hidden' },
  filterBar: { height:27, display:'flex', alignItems:'center', gap:4, padding:'0 10px', borderBottom:'1px solid #F3F4F6', flexShrink:0 },
  filterChip: { fontSize:10.5, padding:'3px 9px', border:'1px solid #CBD5E1', borderRadius:2, cursor:'pointer', color:'#374151', background:'#EBF1F8' },
  filterChipOn: { background:EPIC_BLUE, color:'#fff', borderColor:EPIC_BLUE, fontWeight:600 },
  filterNote: { fontSize:10, color:'#9CA3AF' },
  flowWrap: { flex:1, overflow:'auto' },
  flow: { borderCollapse:'separate', borderSpacing:0, fontSize:11, width:'100%' },
  fh: { background:'#F8FAFC', borderBottom:'1px solid #CBD5E1', borderRight:'1px solid #F3F4F6', padding:'4px 6px', textAlign:'left', fontSize:10, fontWeight:700, color:'#4B5563', position:'sticky', top:0, zIndex:2, whiteSpace:'nowrap' },
  fhSticky: { position:'sticky', zIndex:3, background:'#F8FAFC' },
  fhToday: { background:'#EFF6FF', color:'#1E40AF' },
  fr: { borderBottom:'1px solid #F3F4F6' },
  fc: { padding:'3px 6px', borderBottom:'1px solid #F3F4F6', borderRight:'1px solid #F3F4F6', background:'#fff', whiteSpace:'nowrap', fontSize:10.5 },
  fcSticky: { position:'sticky', zIndex:1 },
  fv: { padding:'3px 6px', borderBottom:'1px solid #F3F4F6', textAlign:'center', fontSize:10.5, whiteSpace:'nowrap' },
  tableWrap: { flex:1, overflow:'auto' },
  tbl: { width:'100%', borderCollapse:'collapse', fontSize:11 },
  th: { background:'#F8FAFC', borderBottom:'1px solid #CBD5E1', padding:'5px 8px', textAlign:'left', fontSize:10, fontWeight:700, color:'#4B5563', position:'sticky', top:0, zIndex:2 },
  tr: { borderBottom:'1px solid #F3F4F6' },
  td: { padding:'4px 8px', fontSize:10.5, color:'#111827', verticalAlign:'top' },
  pillActive: { fontSize:9, fontWeight:700, background:'#DCFCE7', color:'#166534', padding:'1px 5px', borderRadius:2 },
  pillHeld: { fontSize:9, fontWeight:700, background:'#FEF9C3', color:'#92400E', padding:'1px 5px', borderRadius:2 },
  pillPrn: { fontSize:9, fontWeight:700, background:'#F3F4F6', color:'#6B7280', padding:'1px 5px', borderRadius:2 },
  pillRenal: { fontSize:9, fontWeight:700, background:'#FECACA', color:'#DC2626', padding:'1px 4px', borderRadius:2, marginLeft:5 },
  paneFoot: { height:25, borderTop:'1px solid #F3F4F6', display:'flex', alignItems:'center', padding:'0 10px', fontSize:10, color:'#9CA3AF', flexShrink:0 },
  snapGrid: { flex:1, display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, padding:10, overflow:'auto' },
  snapCard: { border:'1px solid #E5E7EB', borderRadius:3, padding:'7px 9px' },
  snapTitle: { fontSize:11, fontWeight:700, color:'#111827', marginBottom:5, paddingBottom:4, borderBottom:'1px solid #F3F4F6' },
  snapRow: { display:'flex', gap:8, fontSize:10, lineHeight:1.75 },
  snapK: { color:'#6B7280', minWidth:124, flexShrink:0 },
  snapV: { color:'#111827' },
  loading: { flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:10 },
  spinner: { width:22, height:22, border:'2.5px solid #E5E7EB', borderTopColor:'#0066CC', borderRadius:'50%', animation:'ezSpin 720ms linear infinite' },
  loadingText: { fontSize:11, color:'#9CA3AF' },
};

Object.assign(window, { EpicZone, EPIC_TABS, EPIC_MORE_TABS });