// ── Settlement Performance Center — premium executive drill-down for the
// "Settlement Efficiency" KPI. Apple-style glass modal → two settlement
// streams (Vendor / Transport) → full BI analytics screens (separate files).
// Everything here is derived live from window.SettlementIntel — no
// hardcoded figures. Drill hierarchy:
//   Settlement Efficiency KPI → Performance Center → Vendor/Transport →
//   Analytics Dashboard → Party → Settlement History
const { useState: sepSt, useMemo: sepMemo, useEffect: sepEf } = React;

function SEIcon({ name, size, color, strokeWidth }) {
  return window.LucideIcon
    ? <window.LucideIcon name={name} size={size || 20} strokeWidth={strokeWidth || 2} color={color || 'currentColor'} />
    : null;
}
window.SEIcon = SEIcon;

function SEStatusPill({ status }) {
  const m = {
    'Fully Settled': { bg: '#DCFCE7', color: '#166534' },
    'Overdue': { bg: '#FEE2E2', color: '#991B1B' },
    'In Progress': { bg: '#FEF3C7', color: '#92400E' },
  };
  const c = m[status] || m['In Progress'];
  return <span style={{ fontSize: 10.5, fontWeight: 700, padding: '2px 8px', borderRadius: 20, background: c.bg, color: c.color, whiteSpace: 'nowrap' }}>{status}</span>;
}
window.SEStatusPill = SEStatusPill;

// ── Animated-number hook — eases numeric values toward a target so KPI tiles
// and chart fills "roll"/"fill" instead of snapping. Non-numeric strings pass
// through untouched (e.g. "97.8%" is animated on its numeric part by caller).
function useAnimatedValue(target, duration) {
  const [val, setVal] = sepSt(target);
  const ref = React.useRef({ raf: null, from: target, start: 0 });
  sepEf(() => {
    if (typeof target !== 'number' || isNaN(target)) { setVal(target); return; }
    const r = ref.current;
    cancelAnimationFrame(r.raf);
    r.from = typeof val === 'number' ? val : 0;
    r.start = performance.now();
    const dur = duration || 550;
    const tick = now => {
      const t = Math.min(1, (now - r.start) / dur);
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(r.from + (target - r.from) * eased);
      if (t < 1) r.raf = requestAnimationFrame(tick);
    };
    r.raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(r.raf);
    // eslint-disable-next-line
  }, [target]);
  return val;
}
window.useSEAnimatedValue = useAnimatedValue;

// ── Shared KPI strip tile for the full analytics dashboards — every tile is
// now a clickable drill entry point (per-KPI onClick supplied by the caller).
function SEKpiTile({ label, value, sub, color, icon, onClick, active, numeric, suffix, numericFmt }) {
  const animated = useAnimatedValue(typeof numeric === 'number' ? numeric : null);
  const display = typeof numeric === 'number'
    ? (numericFmt ? numericFmt(animated) : (Number.isInteger(numeric) ? Math.round(animated).toLocaleString() : animated.toFixed(1)) + (suffix || ''))
    : value;
  return (
    <div
      className={`se-kpi ${onClick ? 'se-kpi-click' : ''} ${active ? 'se-kpi-active' : ''}`}
      onClick={onClick}
      onMouseDown={onClick ? window.seRipple : undefined}
      onKeyDown={onClick ? (e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(e); } }) : undefined}
      role={onClick ? 'button' : undefined}
      tabIndex={onClick ? 0 : undefined}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--txt2)', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.04em' }}>
        {icon && <SEIcon name={icon} size={13} color="var(--txt3)" />}
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
        {onClick && <SEIcon name="ArrowUpRight" size={12} color="var(--txt3)" style={{ marginLeft: 'auto', opacity: .55 }} />}
      </div>
      <div style={{ fontSize: 21, fontWeight: 800, color: color || 'var(--txt)', letterSpacing: '-0.01em' }}>{display}</div>
      {sub && <div style={{ fontSize: 10.5, color: 'var(--txt3)' }}>{sub}</div>}
    </div>
  );
}
window.SEKpiTile = SEKpiTile;

// ── Global time-intelligence bar: period + granularity, shared by both
// analytics screens. Pure controlled component — the screen owns state and
// re-filters/re-buckets its data live, no reload.
const SE_PERIODS = [
  { id: 'today', label: 'Today' }, { id: 'yesterday', label: 'Yesterday' },
  { id: 'week', label: 'This Week' }, { id: 'month', label: 'This Month' },
  { id: 'quarter', label: 'Quarter' }, { id: 'fy', label: 'Financial Year' },
  { id: 'prevyear', label: 'Previous Year' }, { id: 'all', label: 'All Time' },
  { id: 'custom', label: 'Custom' },
];
const SE_GRAINS = [
  { id: 'daily', label: 'Daily' }, { id: 'weekly', label: 'Weekly' },
  { id: 'monthly', label: 'Monthly' }, { id: 'quarterly', label: 'Quarterly' },
  { id: 'yearly', label: 'Yearly' },
];
function SETimeBar({ period, setPeriod, custom, setCustom, accent }) {
  return (
    <div className="se-timebar">
      <div className="se-timebar-row">
        <SEIcon name="CalendarRange" size={14} color="var(--txt3)" />
        {SE_PERIODS.map(p => (
          <button key={p.id} className={`se-timechip ${period === p.id ? 'se-timechip-on' : ''}`} style={period === p.id ? { background: accent, borderColor: accent } : null} onMouseDown={window.seRipple} onClick={() => setPeriod(p.id)}>{p.label}</button>
        ))}
        {period === 'custom' && (
          <span className="se-custom-range">
            <input type="date" value={custom.from} onChange={e => setCustom({ ...custom, from: e.target.value })} />
            <span>–</span>
            <input type="date" value={custom.to} onChange={e => setCustom({ ...custom, to: e.target.value })} />
          </span>
        )}
      </div>
    </div>
  );
}
window.SETimeBar = SETimeBar;

// ── The chart IS the time selector — grain tabs drive an animated grouped
// bar chart (two metrics per bucket). Switching tabs re-mounts the bar
// group (keyed by grain) so the whole dataset fades/slides in as one move —
// bars themselves also animate height on data change within a grain. The
// legend is a live toggle: hiding a series smoothly collapses it and the
// remaining bar expands to fill the freed space (flex-grow interpolates).
function SEGrainChart({ grain, setGrain, data, C, aColor, bColor, aLabel, bLabel, onBarClick }) {
  const [hoverKey, setHoverKey] = sepSt(null);
  const [vis, setVis] = sepSt({ a: true, b: true });
  const max = Math.max(1, ...data.flatMap(d => [vis.a ? (d.settled || 0) : 0, vis.b ? (d.pending || 0) : 0]));
  const noneVisible = !vis.a && !vis.b;
  const toggle = k => setVis(v => {
    const nv = { ...v, [k]: !v[k] };
    if (!nv.a && !nv.b) return v; // never let both disappear
    return nv;
  });
  return (
    <div className="se-grainchart">
      <div className="se-grainchart-tabs">
        <SEIcon name="BarChart3" size={13} color="var(--txt3)" />
        {SE_GRAINS.map(g => (
          <button key={g.id} className={`se-graintab ${grain === g.id ? 'se-graintab-on' : ''}`} style={grain === g.id ? { background: aColor, borderColor: aColor } : null} onMouseDown={window.seRipple} onClick={() => setGrain(g.id)}>{g.label}</button>
        ))}
      </div>
      <div className="se-grainchart-body" key={grain}>
        {data.length === 0 && <div className="se-empty-dataset" style={{ width: '100%' }}><SEIcon name="BarChart3" size={26} color="var(--txt3)" /><div>No data for this range.</div></div>}
        {data.map((d, i) => {
          const total = (d.settled || 0) + (d.pending || 0);
          const hs = Math.max(3, (d.settled || 0) / max * 100);
          const hp = Math.max(3, (d.pending || 0) / max * 100);
          const isHover = hoverKey === d.month;
          const prev = data[i - 1];
          const prevTotal = prev ? (prev.settled || 0) + (prev.pending || 0) : 0;
          const diff = total - prevTotal;
          const growthPct = prevTotal > 0 ? (diff / prevTotal * 100) : (total > 0 ? 100 : 0);
          const settlementPct = total > 0 ? (d.settled || 0) / total * 100 : 0;
          const avgSettlement = d.count > 0 ? total / d.count : 0;
          return (
            <div key={d.month} className="se-graincol" onMouseEnter={() => setHoverKey(d.month)} onMouseLeave={() => setHoverKey(null)}>
              {isHover && (
                <div className="se-bartip">
                  <div className="se-bartip-hd">{d.month}</div>
                  <div className="se-bartip-grid">
                    <div className="se-bartip-row"><span>{aLabel}</span><b style={{ color: aColor }}>{C(d.settled || 0)}</b></div>
                    <div className="se-bartip-row"><span>{bLabel}</span><b style={{ color: bColor }}>{C(d.pending || 0)}</b></div>
                    <div className="se-bartip-row"><span>Settlement %</span><b>{settlementPct.toFixed(0)}%</b></div>
                    <div className="se-bartip-row"><span>vs Previous</span><b style={{ color: diff >= 0 ? 'var(--ok)' : '#DC2626' }}>{diff >= 0 ? '+' : ''}{C(diff)}</b></div>
                    <div className="se-bartip-row"><span>Growth</span><b style={{ color: growthPct >= 0 ? 'var(--ok)' : '#DC2626' }}>{growthPct >= 0 ? '+' : ''}{growthPct.toFixed(1)}%</b></div>
                    <div className="se-bartip-row"><span>Total Settlements</span><b>{d.count || 0}</b></div>
                    <div className="se-bartip-row"><span>Avg Settlement</span><b>{C(avgSettlement)}</b></div>
                  </div>
                </div>
              )}
              <div className="se-grainbars" style={{ opacity: noneVisible ? 0.3 : 1 }}>
                <div
                  className="se-grainbar se-grainbar-outline"
                  style={{ height: hs + '%', borderColor: aColor, color: aColor, flex: vis.a ? 1 : '0 0 0px', opacity: vis.a ? 1 : 0, '--glow': aColor + '55' }}
                  onMouseDown={window.seRipple} onClick={() => onBarClick && onBarClick(d)}
                />
                <div
                  className="se-grainbar se-grainbar-fill"
                  style={{ height: hp + '%', background: bColor, flex: vis.b ? 1 : '0 0 0px', opacity: vis.b ? 1 : 0, '--glow': bColor + '55' }}
                  onMouseDown={window.seRipple} onClick={() => onBarClick && onBarClick(d)}
                />
              </div>
              <div className="se-graincol-lbl">{(d.month || '').slice(5) || d.month}</div>
            </div>
          );
        })}
      </div>
      <div className="se-chart-legend">
        <button className={`se-legenditem se-legenditem-outline ${vis.a ? 'se-legenditem-on' : 'se-legenditem-off'}`} style={{ '--lc': aColor }} title="Click to show or hide this series" onClick={() => toggle('a')}>
          <i className="se-legendswatch se-legendswatch-outline" />{aLabel}
        </button>
        <button className={`se-legenditem ${vis.b ? 'se-legenditem-on' : 'se-legenditem-off'}`} style={{ '--lc': bColor }} title="Click to show or hide this series" onClick={() => toggle('b')}>
          <i className="se-legendswatch" style={{ background: bColor }} />{bLabel}
        </button>
      </div>
    </div>
  );
}
window.SEGrainChart = SEGrainChart;

// ── Executive Summary Strip — natural-language chips replacing the old
// progress bar. Each chip is computed live (window.SettlementIntel.
// buildExecStrip) and opens its own dedicated analytics popup on click.
function SEExecStrip({ items, accent, onOpen }) {
  const [show, setShow] = sepSt(false);
  sepEf(() => { const t = setTimeout(() => setShow(true), 10); return () => clearTimeout(t); }, [items]);
  if (!items || !items.length) return null;
  const icon = k => k === 'up' ? 'TrendingUp' : k === 'down' ? 'TrendingDown' : k === 'flag' ? 'Sparkles' : 'Minus';
  const color = k => k === 'up' ? 'var(--ok)' : k === 'down' ? '#DC2626' : k === 'flag' ? accent : 'var(--txt3)';
  return (
    <div className="se-execstrip">
      {items.map((it, i) => (
        <button
          key={i}
          className={`se-execchip ${show ? 'se-execchip-in' : ''}`}
          style={{ transitionDelay: show ? (i * 45) + 'ms' : '0ms' }}
          onMouseDown={window.seRipple}
          onClick={() => onOpen && it.action && onOpen(it.action.kind, it.action.payload)}
        >
          <span className="se-execchip-ic" style={{ color: color(it.kind), background: color(it.kind) + '14' }}><SEIcon name={icon(it.kind)} size={14} /></span>
          <span className="se-execchip-txt">{it.text}</span>
          <SEIcon name="ChevronRight" size={13} color="var(--txt3)" />
        </button>
      ))}
    </div>
  );
}
window.SEExecStrip = SEExecStrip;

// ── One premium settlement-stream card inside the Performance Center ───────
function SettlementStreamCard({ title, icon, accent, stats, onClick }) {
  const C = window.fmtCur;
  const pct = stats.efficiencyPct;
  return (
    <div className="se-stream-card" onClick={onClick} style={{ '--se-accent': accent }}>
      <div className="se-stream-hd">
        <div className="se-stream-ic" style={{ background: accent + '14', color: accent }}><SEIcon name={icon} size={22} /></div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="se-stream-title">{title}</div>
          <div className="se-stream-eff" style={{ color: accent }}>{pct.toFixed(1)}%<span> settlement efficiency</span></div>
        </div>
        <SEIcon name="ChevronRight" size={18} color="var(--txt3)" />
      </div>
      <div className="se-stream-grid">
        <div><div className="se-stream-lbl">Pending Amount</div><div className="se-stream-val" style={{ color: stats.pendingAmount > 0 ? '#B45309' : 'var(--txt)' }}>{C(stats.pendingAmount)}</div></div>
        <div><div className="se-stream-lbl">Total Settled</div><div className="se-stream-val" style={{ color: 'var(--ok)' }}>{C(stats.settledAmount)}</div></div>
        <div><div className="se-stream-lbl">Pending Records</div><div className="se-stream-val">{stats.pendingCount}</div></div>
        <div><div className="se-stream-lbl">Last Settlement</div><div className="se-stream-val">{stats.lastSettlementDate ? window.fmtDate(stats.lastSettlementDate) : '—'}</div></div>
      </div>
    </div>
  );
}

// ── Shared lightweight chart primitives for the Vendor/Transport BI screens ──
// Deliberately simple SVG/CSS — no charting library — so render stays instant
// even with hundreds of settlement records, per the performance requirement.

function SEDualLineChart({ data, aKey, bKey, aLabel, bLabel, aColor, bColor, fmt, visible, onToggle, C }) {
  const W = 720, H = 200, padL = 8, padR = 8, padT = 16, padB = 26;
  const [hoverI, setHoverI] = sepSt(null);
  const vis = visible || { a: true, b: true };
  const noneVisible = !vis.a && !vis.b;
  if (!data || !data.length) return <div style={{ fontSize: 12, color: 'var(--txt3)', padding: '30px 0', textAlign: 'center' }}>No trend data yet.</div>;
  const max = Math.max(1, ...data.map(d => Math.max(vis.a ? (d[aKey] || 0) : 0, vis.b ? (d[bKey] || 0) : 0)));
  const stepX = (W - padL - padR) / Math.max(1, data.length - 1);
  const y = v => H - padB - (v / max) * (H - padT - padB);
  const path = key => data.map((d, i) => `${i === 0 ? 'M' : 'L'}${padL + i * stepX},${y(d[key] || 0)}`).join(' ');
  const hd = hoverI != null ? data[hoverI] : null;
  return (
    <div style={{ position: 'relative' }}>
      {noneVisible ? (
        <div className="se-empty-dataset">
          <SEIcon name="LineChart" size={26} color="var(--txt3)" />
          <div>No dataset selected</div>
          <button onClick={() => onToggle && onToggle('both')}>Show All</button>
        </div>
      ) : (
        <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} style={{ overflow: 'visible' }} onMouseLeave={() => setHoverI(null)}>
          {[0.25, 0.5, 0.75].map(f => <line key={f} x1={padL} x2={W - padR} y1={padT + f * (H - padT - padB)} y2={padT + f * (H - padT - padB)} stroke="#F3F4F6" strokeWidth="1" style={{ transition: 'opacity .3s' }} />)}
          <path d={path(bKey)} fill="none" stroke={bColor} strokeWidth="2.5" strokeDasharray="5 4" style={{ opacity: vis.b ? 0.85 : 0, transition: 'opacity .28s ease-in-out, d .4s cubic-bezier(.16,1,.3,1)' }} />
          <path d={path(aKey)} fill="none" stroke={aColor} strokeWidth="2.75" style={{ opacity: vis.a ? 1 : 0, transition: 'opacity .28s ease-in-out, d .4s cubic-bezier(.16,1,.3,1)' }} />
          {data.map((d, i) => (
            <g key={i} style={{ transition: 'opacity .28s' }}>
              {vis.a && <circle cx={padL + i * stepX} cy={y(d[aKey] || 0)} r={hoverI === i ? 4.5 : 3} fill={aColor} style={{ transition: 'r .15s' }} />}
              {vis.b && <circle cx={padL + i * stepX} cy={y(d[bKey] || 0)} r={hoverI === i ? 4.5 : 3} fill={bColor} style={{ transition: 'r .15s' }} />}
              <rect x={padL + i * stepX - stepX / 2} y={0} width={stepX} height={H} fill="transparent" onMouseEnter={() => setHoverI(i)} style={{ cursor: 'crosshair' }} />
              <text x={padL + i * stepX} y={H - 8} textAnchor="middle" fontSize="9" fill="var(--txt3)">{(d.month || '').slice(5)}</text>
            </g>
          ))}
          {hoverI != null && <line x1={padL + hoverI * stepX} x2={padL + hoverI * stepX} y1={padT} y2={H - padB} stroke="#D1D5DB" strokeWidth="1" strokeDasharray="3 3" />}
        </svg>
      )}
      {hd && (
        <div className="se-glasstip" style={{ left: Math.min(78, Math.max(0, (padL + hoverI * stepX) / W * 100)) + '%', top: 4 }}>
          <div className="se-glasstip-hd">{hd.month}</div>
          {vis.a && <div className="se-glasstip-row"><span>{aLabel}</span><b style={{ color: aColor }}>{C ? C(hd[aKey] || 0) : (hd[aKey] || 0)}</b></div>}
          {vis.b && <div className="se-glasstip-row"><span>{bLabel}</span><b style={{ color: bColor }}>{C ? C(hd[bKey] || 0) : (hd[bKey] || 0)}</b></div>}
        </div>
      )}
      <div className="se-chart-legend">
        <button className={`se-legenditem ${vis.a ? 'se-legenditem-on' : 'se-legenditem-off'}`} title="Click to show or hide this dataset" onClick={() => onToggle && onToggle('a')}>
          <i style={{ background: aColor }} />{aLabel}
        </button>
        <button className={`se-legenditem ${vis.b ? 'se-legenditem-on' : 'se-legenditem-off'}`} title="Click to show or hide this dataset" onClick={() => onToggle && onToggle('b')}>
          <i style={{ background: bColor }} />{bLabel}
        </button>
      </div>
    </div>
  );
}
window.SEDualLineChart = SEDualLineChart;

function SEAgingBars({ buckets, onClick, activeId, C }) {
  const max = Math.max(1, ...buckets.map(b => b.amount));
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {buckets.map(b => {
        const isActive = activeId === b.id;
        const pct = Math.max(2, b.amount / max * 100);
        return (
          <div key={b.id} onMouseDown={b.count > 0 ? window.seRipple : undefined} onClick={() => onClick(isActive ? null : b.id)} style={{ cursor: b.count > 0 ? 'pointer' : 'default', opacity: b.count === 0 ? 0.45 : 1, position: 'relative', overflow: 'hidden', borderRadius: 6 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 3 }}>
              <span style={{ fontWeight: isActive ? 800 : 600, color: isActive ? '#B45309' : 'var(--txt2)' }}>{b.label}{isActive ? ' ✓' : ''}</span>
              <span style={{ fontWeight: 700, color: 'var(--txt)' }}>{C(b.amount)} · {b.count}</span>
            </div>
            <window.PremiumProgress pct={pct} color={isActive ? '#D97706' : (b.id === 'b5' ? '#DC2626' : b.id === 'b4' ? '#F59E0B' : '#93C5FD')} height={8} />
          </div>
        );
      })}
    </div>
  );
}
window.SEAgingBars = SEAgingBars;

function SEDonutRing({ settled, pending, C, visible, onToggle, onSliceClick, size }) {
  size = size || 236;
  const vis = visible || { a: true, b: true };
  const noneVisible = !vis.a && !vis.b;
  const s = vis.a ? settled : 0, p = vis.b ? pending : 0;
  const total = s + p || 1;
  const targetPct = noneVisible ? 0 : (vis.a && !vis.b ? 100 : (!vis.a && vis.b ? 0 : s / total * 100));
  const pct = useAnimatedValue(targetPct, 450);
  const [hover, setHover] = sepSt(null);
  const stroke = Math.round(size * 0.1);
  const R = size / 2 - stroke / 2 - 4;
  const CIRC = 2 * Math.PI * R;
  const settledLen = CIRC * pct / 100;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap', justifyContent: 'center', padding: '8px 0' }}>
      {noneVisible ? (
        <div className="se-empty-dataset" style={{ width: '100%' }}>
          <SEIcon name="PieChart" size={26} color="var(--txt3)" />
          <div>No dataset selected</div>
          <button onClick={() => onToggle && onToggle('both')}>Show All</button>
        </div>
      ) : (
        <>
          <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
            <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ transform: 'rotate(-90deg)', overflow: 'visible' }}>
              <circle cx={size / 2} cy={size / 2} r={R} fill="none" stroke="#F3F4F6" strokeWidth={stroke} />
              <circle cx={size / 2} cy={size / 2} r={R} fill="none" stroke="#FDBA74" strokeWidth={hover === 'pending' ? stroke + 9 : stroke}
                strokeDasharray={`${CIRC} ${CIRC}`}
                style={{ transition: 'stroke-width .2s cubic-bezier(.16,1,.3,1)', filter: hover === 'pending' ? 'drop-shadow(0 0 10px rgba(251,146,60,.45))' : 'none', cursor: onSliceClick ? 'pointer' : 'default' }}
                onMouseEnter={() => setHover('pending')} onMouseLeave={() => setHover(null)}
                onMouseDown={window.seRipple} onClick={() => onSliceClick && onSliceClick('pending')} />
              <circle cx={size / 2} cy={size / 2} r={R} fill="none" stroke="#38BDF8" strokeWidth={hover === 'settled' ? stroke + 9 : stroke}
                strokeDasharray={`${settledLen} ${CIRC - settledLen}`} strokeLinecap={settledLen > 1 && settledLen < CIRC ? 'butt' : 'round'}
                style={{ transition: 'stroke-dasharray .5s cubic-bezier(.16,1,.3,1), stroke-width .2s cubic-bezier(.16,1,.3,1)', filter: hover === 'settled' ? 'drop-shadow(0 0 10px rgba(56,189,248,.45))' : 'none', cursor: onSliceClick ? 'pointer' : 'default' }}
                onMouseEnter={() => setHover('settled')} onMouseLeave={() => setHover(null)}
                onMouseDown={window.seRipple} onClick={() => onSliceClick && onSliceClick('settled')} />
            </svg>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
              <div style={{ fontSize: size * 0.155, fontWeight: 800, color: 'var(--txt)', letterSpacing: '-0.01em' }}>{pct.toFixed(0)}%</div>
              <div style={{ fontSize: 11.5, color: 'var(--txt3)', fontWeight: 700, letterSpacing: '.05em' }}>SETTLED</div>
            </div>
            {hover && (
              <div className="se-glasstip" style={{ left: '50%', top: -6, transform: 'translate(-50%,-100%)', whiteSpace: 'nowrap' }}>
                <div className="se-glasstip-hd">{hover === 'settled' ? 'Settled' : 'Pending'}</div>
                <div className="se-glasstip-row"><b style={{ color: hover === 'settled' ? '#0284C7' : '#C2410C' }}>{C(hover === 'settled' ? settled : pending)}</b></div>
              </div>
            )}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13, minWidth: 160 }}>
            <button className={`se-legenditem se-legenditem-block ${vis.a ? 'se-legenditem-on' : 'se-legenditem-off'}`} title="Click to show or hide this dataset" onClick={() => onToggle && onToggle('a')}><i style={{ background: '#38BDF8' }} /><span>Settled</span><strong style={{ marginLeft: 'auto' }}>{C(settled)}</strong></button>
            <button className={`se-legenditem se-legenditem-block ${vis.b ? 'se-legenditem-on' : 'se-legenditem-off'}`} title="Click to show or hide this dataset" onClick={() => onToggle && onToggle('b')}><i style={{ background: '#FDBA74' }} /><span>Pending</span><strong style={{ marginLeft: 'auto' }}>{C(pending)}</strong></button>
            {onSliceClick && <div style={{ fontSize: 10.5, color: 'var(--txt3)', paddingTop: 2 }}>Click a ring to drill in →</div>}
          </div>
        </>
      )}
    </div>
  );
}
window.SEDonutRing = SEDonutRing;

function SERankBars({ rows, onClick, activeId, C, accent }) {
  if (!rows.length) return <div style={{ fontSize: 12, color: 'var(--txt3)', padding: '20px 0', textAlign: 'center' }}>No records.</div>;
  const max = Math.max(1, ...rows.map(r => r.pendingAmount));
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
      {rows.map(r => {
        const isActive = activeId === r.id;
        return (
          <div key={r.id} onMouseDown={window.seRipple} onClick={() => onClick(isActive ? null : r.id)} style={{ cursor: 'pointer', position: 'relative', overflow: 'hidden', borderRadius: 6 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, marginBottom: 3 }}>
              <span style={{ fontWeight: isActive ? 800 : 600, color: isActive ? accent : 'var(--txt)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 180 }}>{r.name}</span>
              <span style={{ fontWeight: 700, color: 'var(--txt2)' }}>{C(r.pendingAmount)}</span>
            </div>
            <window.PremiumProgress pct={Math.max(2, r.pendingAmount / max * 100)} color={isActive ? accent : accent + '55'} height={7} />
          </div>
        );
      })}
    </div>
  );
}
window.SERankBars = SERankBars;

// ── Performance Center modal ─────────────────────────────────────────────
function SettlementPerformanceCenterModal({ vStats, tStats, onOpenVendor, onOpenTransport, onClose }) {
  const [show, setShow] = sepSt(false);
  sepEf(() => { const t = setTimeout(() => setShow(true), 10); return () => clearTimeout(t); }, []);
  return (
    <div className={`se-modal-bg ${show ? 'se-in' : ''}`} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="se-modal">
        <button className="mod-x" style={{ position: 'absolute', top: 20, right: 20 }} onClick={onClose}>×</button>
        <div className="se-modal-hd">
          <div className="se-modal-ic"><SEIcon name="ShieldCheck" size={26} color="#fff" /></div>
          <div>
            <div className="se-modal-title">Settlement Performance Center</div>
            <div className="se-modal-sub">Vendor + Transport settlement health, in one place</div>
          </div>
        </div>
        <div className="se-modal-cards">
          <SettlementStreamCard title="Vendor Settlement" icon="Building2" accent="#7C3AED" stats={vStats} onClick={onOpenVendor} />
          <SettlementStreamCard title="Transport Settlement" icon="Truck" accent="#1D4ED8" stats={tStats} onClick={onOpenTransport} />
        </div>
      </div>
      <style>{`
        .se-modal-bg{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;}
        .se-modal-bg::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(17,17,20,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);transition:background .32s ease,backdrop-filter .32s ease,-webkit-backdrop-filter .32s ease;pointer-events:none;}
        .se-modal-bg.se-in::before{background:rgba(17,17,20,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
        .se-modal{background:#fff;border-radius:24px;width:min(760px,94vw);padding:36px 40px 40px;box-shadow:0 30px 80px -20px rgba(0,0,0,0.35),0 0 0 1px rgba(0,0,0,0.04);opacity:0;transform:scale(.96) translateY(6px);transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1);position:relative;}
        .se-modal-bg.se-in .se-modal{opacity:1;transform:scale(1) translateY(0);}
        .se-modal-hd{display:flex;align-items:center;gap:14px;margin-bottom:28px;}
        .se-modal-ic{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#111827,#374151);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
        .se-modal-title{font-size:21px;font-weight:800;color:var(--txt);letter-spacing:-0.01em;}
        .se-modal-sub{font-size:12.5px;color:var(--txt2);margin-top:2px;}
        .se-modal-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
        @media (max-width:640px){.se-modal-cards{grid-template-columns:1fr;} .se-modal{padding:28px 22px 30px;}}
        .se-stream-card{border:1px solid var(--bdr);border-radius:16px;padding:20px;cursor:pointer;background:#fff;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,border-color .18s;}
        .se-stream-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -12px rgba(0,0,0,0.14);border-color:var(--se-accent);}
        .se-stream-card:active{transform:none;opacity:.95;transition:opacity .12s ease-out;}
        .se-stream-hd{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
        .se-stream-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
        .se-stream-title{font-size:14px;font-weight:700;color:var(--txt);}
        .se-stream-eff{font-size:19px;font-weight:800;margin-top:1px;}
        .se-stream-eff span{font-size:11px;font-weight:600;color:var(--txt3);margin-left:5px;}
        .se-stream-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:16px;border-top:1px solid #F3F4F6;}
        .se-stream-lbl{font-size:10px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;}
        .se-stream-val{font-size:14px;font-weight:700;color:var(--txt);}
      `}</style>
    </div>
  );
}
window.SettlementPerformanceCenterModal = SettlementPerformanceCenterModal;

// ── Shared CSS for the full-screen analytics screens ──
// IMPORTANT: this must live in a component that stays mounted across the
// Center → Vendor/Transport transition (SettlementEfficiencyFlow itself), NOT
// inside SettlementPerformanceCenterModal — that modal unmounts the instant
// the user opens an analytics screen, which would rip out its <style> tag
// (and every .se-full/.se-table rule with it) right when it's needed most.
function SEFullScreenStyles() {
  return (
    <style>{`
      .se-full{position:fixed;inset:0;z-index:9500;background:#fff;display:flex;flex-direction:column;animation:seFullIn .28s cubic-bezier(.16,1,.3,1);}
      @keyframes seFullIn{from{opacity:0;transform:scale(.985);}to{opacity:1;transform:scale(1);}}
      .se-full-hd{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--bdr);flex-shrink:0;background:#fff;}
      @media(max-width:768px) and (orientation:portrait){.se-full-hd{padding-top:calc(14px + env(safe-area-inset-top));}}
      .se-full-back{display:flex;align-items:center;gap:4px;border:none;background:none;color:var(--txt2);font-size:12.5px;font-weight:700;cursor:pointer;padding:6px 8px;border-radius:8px;}
      .se-full-back:hover{background:#F3F4F6;color:var(--txt);}
      .se-full-hdtitle{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--txt);flex:1;}
      .se-full-body{flex:1;overflow-y:auto;padding:22px;background:#FAFAFA;}
      .se-kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
      @media (max-width:1100px){.se-kpi-strip{grid-template-columns:repeat(2,1fr);}}
      .se-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
      @media (max-width:900px){.se-chart-grid{grid-template-columns:1fr;} .se-chart-grid > div[style*="span 2"]{grid-column:span 1 !important;}}
      .se-chart-card{background:#fff;border:1px solid var(--bdr);border-radius:14px;padding:16px 18px;}
      .se-chart-card-donut{padding:26px 22px;display:flex;flex-direction:column;}
      .se-chart-hd{font-size:12px;font-weight:700;color:var(--txt);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;}
      .se-chip-clear{font-size:10.5px;font-weight:600;color:var(--txt3);cursor:pointer;text-decoration:underline;}
      .se-table-card{background:#fff;border:1px solid var(--bdr);border-radius:14px;padding:16px 18px;}
      .se-search{border:1px solid var(--bdr);border-radius:8px;padding:6px 10px;font-size:12px;width:200px;}
      .se-table{width:100%;border-collapse:collapse;font-size:12px;}
      .se-table th{text-align:left;font-size:10.5px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.03em;padding:7px 10px;border-bottom:1px solid var(--bdr);background:#F9FAFB;position:sticky;top:0;}
      .se-table th.r,.se-table td.r{text-align:right;}
      .se-table td{padding:8px 10px;border-bottom:1px solid #F3F4F6;color:var(--txt);}
      .se-row{cursor:pointer;transition:background .12s;}
      .se-row:hover{background:#F9FAFB;}

      /* KPI tiles — clickable drill entry points */
      .se-kpi{background:#fff;border:1px solid var(--bdr);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0;transition:transform .16s cubic-bezier(.16,1,.3,1),box-shadow .16s,border-color .16s;}
      .se-kpi-click{cursor:pointer;}
      .se-kpi-click:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,0.14);border-color:#D1D5DB;}
      .se-kpi-click:active{transform:none;opacity:.9;transition:opacity .12s ease-out;}
      .se-kpi-active{border-color:var(--txt);box-shadow:0 0 0 1.5px var(--txt) inset;}
      @keyframes seFlash{0%{box-shadow:0 0 0 3px rgba(124,58,237,.35);}100%{box-shadow:none;}}
      .se-flash{animation:seFlash .9s ease-out;}

      /* Time-intelligence bar */
      .se-timebar{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;background:#fff;border:1px solid var(--bdr);border-radius:14px;padding:12px 14px;}
      .se-timebar-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
      .se-timechip{border:1px solid var(--bdr);background:#F9FAFB;color:var(--txt2);font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:20px;cursor:pointer;transition:all .16s ease;}
      .se-timechip:hover{border-color:#D1D5DB;color:var(--txt);}
      .se-timechip-on{color:#fff !important;}
      .se-grainchip{border:1px solid transparent;background:none;color:var(--txt3);font-size:11px;font-weight:700;padding:3px 9px;border-radius:14px;cursor:pointer;transition:all .16s ease;}
      .se-grainchip:hover{color:var(--txt);}
      .se-grainchip-on{border-color:currentColor;background:currentColor10;}
      .se-custom-range{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--txt3);}
      .se-custom-range input{border:1px solid var(--bdr);border-radius:6px;padding:3px 6px;font-size:11px;}

      /* Glass tooltip — Apple-style */
      .se-glasstip{position:absolute;background:rgba(255,255,255,0.85);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(0,0,0,0.06);border-radius:12px;padding:10px 13px;font-size:11px;box-shadow:0 14px 32px -10px rgba(0,0,0,0.22);pointer-events:none;z-index:20;min-width:120px;animation:seTipIn .16s cubic-bezier(.16,1,.3,1);}
      @keyframes seTipIn{from{opacity:0;transform:scale(.94) translateY(3px);}to{opacity:1;transform:scale(1) translateY(0);}}
      .se-glasstip-hd{font-weight:800;color:var(--txt);margin-bottom:5px;font-size:11px;}
      .se-glasstip-row{display:flex;justify-content:space-between;gap:14px;color:var(--txt2);padding:1.5px 0;}
      .se-glasstip-row b{font-weight:700;}
      .se-glasstip-bar{position:absolute;top:-42px;left:50%;transform:translateX(-50%);white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:1px;}
      .se-glasstip-bar strong{font-size:12px;}

      /* Chart legends — interactive toggle buttons */
      .se-chart-legend{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
      .se-legenditem{display:flex;align-items:center;gap:6px;border:1px solid var(--bdr);background:#F9FAFB;border-radius:20px;padding:5px 12px 5px 8px;font-size:11px;font-weight:700;color:var(--txt2);cursor:pointer;transition:all .18s ease;}
      .se-legenditem i{width:9px;height:9px;border-radius:3px;display:inline-block;transition:opacity .2s;}
      .se-legenditem-on{border-color:#D1D5DB;background:#fff;color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,0.06);}
      .se-legenditem-off{opacity:.5;}
      .se-legenditem-off i{opacity:.35;}
      .se-legenditem:hover{opacity:.85;}
      .se-legenditem-block{width:100%;background:none;border:1px solid transparent;border-radius:8px;padding:4px 6px;justify-content:flex-start;}
      .se-legenditem-block.se-legenditem-on{background:#F9FAFB;border-color:var(--bdr);}
      .se-empty-dataset{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:38px 10px;color:var(--txt3);font-size:12.5px;font-weight:600;}
      .se-empty-dataset button{border:1px solid var(--bdr);background:#fff;border-radius:20px;padding:6px 16px;font-size:11.5px;font-weight:700;color:var(--txt);cursor:pointer;transition:all .15s;}
      .se-empty-dataset button:hover{background:#F3F4F6;}

      /* Executive Summary Strip — premium clickable insight chips (replaces
         the old settled/pending/overdue progress bar) */
      .se-execstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:10px;margin-bottom:18px;}
      .se-execchip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--bdr);border-radius:14px;padding:12px 12px 12px 10px;font-size:12.5px;font-weight:600;color:var(--txt2);text-align:left;cursor:pointer;line-height:1.4;
        opacity:0;transform:translateY(8px) scale(.985);
        transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1),box-shadow .18s ease,border-color .18s ease;}
      .se-execchip-in{opacity:1;transform:translateY(0) scale(1);}
      .se-execchip:hover{box-shadow:0 12px 28px -12px rgba(0,0,0,0.16);border-color:#D1D5DB;transform:translateY(-2px);}
      .se-execchip:active{transform:none;opacity:.88;transition:opacity .12s ease-out;}
      .se-execchip-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
      .se-execchip-txt{flex:1;color:var(--txt);}
      .se-execchip > svg:last-child{opacity:.45;flex-shrink:0;}

      /* Table extras */
      .se-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
      .se-th-sort{cursor:pointer;user-select:none;}
      .se-th-sort:hover{color:var(--txt);}
      .se-exportbtn{border:1px solid var(--bdr);background:#fff;border-radius:8px;padding:6px 12px;font-size:11.5px;font-weight:700;color:var(--txt2);cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s;}
      .se-exportbtn:hover{background:#F3F4F6;color:var(--txt);}
      .se-statuschip{border:1px solid var(--bdr);background:#F9FAFB;color:var(--txt2);font-size:11px;font-weight:700;padding:5px 11px;border-radius:20px;cursor:pointer;transition:all .16s;position:relative;overflow:hidden;}
      .se-statuschip:hover{border-color:#D1D5DB;}
      .se-statuschip-on{color:#fff !important;}

      /* Ripple micro-interaction */
      .se-timechip,.se-exportbtn,.se-graincol,.se-legenditem{position:relative;overflow:hidden;}
      .se-ripple{position:absolute;border-radius:50%;background:rgba(0,0,0,0.10);transform:scale(0);animation:seRippleAnim .5s ease-out;pointer-events:none;}
      @keyframes seRippleAnim{to{transform:scale(1);opacity:0;}}
      .se-exec-title-click{cursor:pointer;transition:background .15s;}
      .se-exec-title-click:hover{background:#F3F4F6;}

      /* Focus-visible + pressed states for every clickable analytics surface */
      .se-kpi:focus-visible,.se-graincol:focus-visible,.se-timechip:focus-visible,.se-exportbtn:focus-visible{outline:2px solid var(--txt);outline-offset:2px;}
      .se-kpi-click:active,.se-graincol:active,.se-exportbtn:active,.se-timechip:active{transform:none;opacity:.88;transition:opacity .12s ease-out;}

      /* Grain chart — the chart itself is the time-grain selector. Compact,
         balanced proportions per the premium-BI redesign: dual bars per
         period (outlined = settled, filled = pending), smooth rounded caps,
         GPU-accelerated legend-driven collapse/expand. */
      .se-grainchart-tabs{display:flex;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
      .se-graintab{border:1px solid var(--bdr);background:#F9FAFB;color:var(--txt2);font-size:11.5px;font-weight:700;padding:6px 14px;border-radius:20px;cursor:pointer;transition:all .16s ease;position:relative;overflow:hidden;}
      .se-graintab:hover{border-color:#D1D5DB;color:var(--txt);}
      .se-graintab-on{color:#fff !important;}
      .se-grainchart-body{display:flex;align-items:flex-end;gap:14px;height:168px;padding:0 6px 6px;overflow-x:auto;animation:seGrainIn .4s cubic-bezier(.16,1,.3,1);}
      @keyframes seGrainIn{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
      .se-graincol{position:relative;flex:1;min-width:34px;max-width:64px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;border-radius:8px;padding-top:6px;}
      .se-grainbars{display:flex;align-items:flex-end;gap:5px;width:100%;height:100%;transition:opacity .25s ease;}
      .se-grainbar{width:100%;border-radius:6px 6px 3px 3px;cursor:pointer;transform:translateZ(0);will-change:height,flex-grow,opacity;
        transition:height .5s cubic-bezier(.16,1,.3,1),flex-grow .32s cubic-bezier(.16,1,.3,1),opacity .28s ease,transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease;}
      .se-grainbar-fill{box-shadow:0 0 0 0 transparent;}
      .se-grainbar-outline{background:color-mix(in srgb, var(--glow) 12%, transparent);border:2px solid;box-shadow:0 0 0 0 transparent;}
      .se-grainbar:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 8px 18px -6px var(--glow);filter:brightness(1.05);}
      .se-graincol-lbl{font-size:10px;font-weight:600;color:var(--txt3);margin-top:8px;white-space:nowrap;}

      /* Premium floating bar tooltip */
      .se-bartip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.92);backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(0,0,0,0.06);border-radius:12px;padding:11px 14px;box-shadow:0 18px 40px -12px rgba(0,0,0,0.24);pointer-events:none;z-index:30;white-space:nowrap;animation:seTipIn .16s cubic-bezier(.16,1,.3,1);}
      .se-bartip-hd{font-size:11.5px;font-weight:800;color:var(--txt);margin-bottom:6px;}
      .se-bartip-grid{display:flex;flex-direction:column;gap:2.5px;}
      .se-bartip-row{display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--txt2);}
      .se-bartip-row b{font-weight:700;}

      /* Legend swatches — outline vs filled, to match the dual-bar language */
      .se-legendswatch{width:11px;height:11px;border-radius:3px;display:inline-block;background:var(--lc);transition:opacity .2s;}
      .se-legendswatch-outline{background:transparent;border:2px solid var(--lc);}
      .se-legenditem-outline.se-legenditem-off .se-legendswatch-outline{border-color:var(--lc);}

      /* KPI popup — glass, Apple-style, bigger than the Performance Center modal */
      .sekp-bg{position:fixed;inset:0;z-index:9800;display:flex;align-items:center;justify-content:center;padding:20px;}
      .sekp-bg::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(17,17,20,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);transition:background .32s ease,backdrop-filter .32s ease,-webkit-backdrop-filter .32s ease;pointer-events:none;}
      .sekp-bg.sekp-in::before{background:rgba(17,17,20,0.5);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);}
      .sekp-modal{background:rgba(255,255,255,0.92);border-radius:22px;width:min(880px,95vw);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 40px 90px -24px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.05);opacity:0;transform:scale(.96) translateY(6px);transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1);}
      .sekp-modal.sekp-wide{width:min(1080px,96vw);}
      .sekp-bg.sekp-in .sekp-modal{opacity:1;transform:scale(1) translateY(0);}
      .sekp-hd{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid rgba(0,0,0,.06);flex-shrink:0;}
      .sekp-hd-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
      .sekp-title{font-size:16.5px;font-weight:800;color:var(--txt);letter-spacing:-0.01em;}
      .sekp-sub{font-size:12px;color:var(--txt2);margin-top:1px;}
      .sekp-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
      .sekp-body{flex:1;overflow-y:auto;padding:22px;}
      @media (max-width:680px){.sekp-hd{padding:14px 16px;flex-wrap:wrap;} .sekp-body{padding:16px;} .sekp-actions{width:100%;justify-content:flex-end;}}
      @media(max-width:768px) and (orientation:portrait){.sekp-hd{padding-top:calc(14px + env(safe-area-inset-top));}}

      /* Popup content primitives */
      .se-pop-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px;}
      .se-pop-stat{background:#fff;border:1px solid var(--bdr);border-radius:12px;padding:12px 14px;}
      .se-pop-stat-lbl{font-size:10px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
      .se-pop-stat-val{font-size:18px;font-weight:800;color:var(--txt);letter-spacing:-0.01em;}
      .se-pop-stat-sub{font-size:10.5px;color:var(--txt3);margin-top:2px;}
      .se-pop-section{margin-bottom:20px;}
      .se-pop-section-hd{font-size:12.5px;font-weight:700;color:var(--txt);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}

      /* Sticky ledger footer */
      .se-table-scroll{overflow-x:auto;max-height:520px;overflow-y:auto;position:relative;}
      .se-table-foot td{position:sticky;bottom:0;background:#F9FAFB;font-weight:800;border-top:2px solid var(--bdr);border-bottom:none;z-index:3;}
    `}</style>
  );
}

// ── Top-level flow: owns navigation between Center → Vendor/Transport analytics ──
function SettlementEfficiencyFlow({ vendorSettlements, transportSettlements, companyId, onClose }) {
  const [view, setView] = sepSt('center'); // 'center' | 'vendor' | 'transport'
  const SE = window.SettlementIntel;
  const vStats = sepMemo(() => SE.streamStats(vendorSettlements, { companyId }), [vendorSettlements, companyId]);
  const tStats = sepMemo(() => SE.streamStats(transportSettlements, { companyId }), [transportSettlements, companyId]);

  return (
    <>
      <SEFullScreenStyles />
      {view === 'vendor'
        ? <window.VendorSettlementAnalytics vendorSettlements={vendorSettlements} companyId={companyId} stats={vStats} onBack={() => setView('center')} onClose={onClose} />
        : view === 'transport'
        ? <window.TransportSettlementAnalytics transportSettlements={transportSettlements} companyId={companyId} stats={tStats} onBack={() => setView('center')} onClose={onClose} />
        : <SettlementPerformanceCenterModal
            vStats={vStats} tStats={tStats}
            onOpenVendor={() => setView('vendor')}
            onOpenTransport={() => setView('transport')}
            onClose={onClose}
          />
      }
    </>
  );
}
window.SettlementEfficiencyFlow = SettlementEfficiencyFlow;