// ── Trip Efficiency Analytics — "Operational Performance Center" ───────────
// Full-screen premium drill-down for the "Trip Efficiency" KPI (Operational
// Overview). Mirrors the Settlement Performance Center's motion language and
// visual system (glass modal, ripple, grain chart, exec strip, sticky ledger)
// by reusing its global primitives — window.SEIcon / SEKpiTile / SETimeBar /
// SEGrainChart / SEExecStrip / SEKpiPopup / seRipple — so both feel like one
// product. Everything here is derived live from window.TripEfficiencyIntel
// over allTripsUnified; nothing is hardcoded.
const { useState: teSt, useMemo: teMemo } = React;

function TEPopStats({ items }) {
  return (
    <div className="se-pop-stats">
      {items.map((it, i) => (
        <div className="se-pop-stat" key={i}>
          <div className="se-pop-stat-lbl">{it.label}</div>
          <div className="se-pop-stat-val" style={{ color: it.color }}>{it.value}</div>
          {it.sub && <div className="se-pop-stat-sub">{it.sub}</div>}
        </div>
      ))}
    </div>
  );
}
function TEPopSection({ title, right, children }) {
  return <div className="se-pop-section"><div className="se-pop-section-hd"><span>{title}</span>{right}</div>{children}</div>;
}
// ── Generic labeled bar list — vehicle / transporter leaderboards, module mix ──
function TEBarList({ rows, valueKey, fmt, accent, onClick, activeId, subKey }) {
  if (!rows || !rows.length) return <div style={{ fontSize: 12, color: 'var(--txt3)', padding: '14px 0' }}>No records.</div>;
  const max = Math.max(1, ...rows.map(r => r[valueKey] || 0));
  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 && onClick(r)} style={{ cursor: onClick ? 'pointer' : 'default', position: 'relative', overflow: 'hidden', borderRadius: 6 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, marginBottom: 3, gap: 8 }}>
              <span style={{ fontWeight: isActive ? 800 : 600, color: isActive ? accent : 'var(--txt)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 190 }}>{r.name}</span>
              <span style={{ fontWeight: 700, color: 'var(--txt2)', whiteSpace: 'nowrap' }}>{fmt ? fmt(r[valueKey]) : r[valueKey]}{subKey ? <span style={{ color: 'var(--txt3)', fontWeight: 500 }}> · {r[subKey]}</span> : null}</span>
            </div>
            <window.PremiumProgress pct={Math.max(2, (r[valueKey] || 0) / max * 100)} color={isActive ? accent : accent + '55'} height={7} />
          </div>
        );
      })}
    </div>
  );
}
// ── Compact efficiency donut — executed vs exception, same visual language
// as SEDonutRing but with Trip-Efficiency-specific labels/colors. ───────────
function TEDonut({ executed, exceptions, onClick }) {
  const size = 200, stroke = 20;
  const [vis, setVis] = teSt({ a: true, b: true }); // a = executed, b = exceptions
  const [hover, setHover] = teSt(null);
  const noneVisible = !vis.a && !vis.b;
  const total = executed + exceptions || 1;
  const targetPct = noneVisible ? 0 : (vis.a && !vis.b ? 100 : (!vis.a && vis.b ? 0 : executed / total * 100));
  const pct = window.useSEAnimatedValue ? window.useSEAnimatedValue(targetPct, 450) : targetPct;
  const R = size / 2 - stroke / 2 - 4;
  const CIRC = 2 * Math.PI * R;
  const execLen = CIRC * pct / 100;
  const execEffPct = total > 0 ? (executed / total * 100) : 0;
  const excEffPct = total > 0 ? (exceptions / total * 100) : 0;
  function toggle(which) {
    setVis(v => which === 'both' ? { a: true, b: true } : { ...v, [which]: !v[which] });
  }
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap', justifyContent: 'center', padding: '8px 0' }}>
      {noneVisible ? (
        <div className="se-empty-dataset" style={{ width: '100%' }}>
          <window.SEIcon name="PieChart" size={26} color="var(--txt3)" />
          <div>No dataset selected</div>
          <button onMouseDown={window.seRipple} onClick={() => toggle('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="#FDE68A" strokeWidth={hover === 'exceptions' ? stroke + 8 : stroke}
            strokeDasharray={`${CIRC} ${CIRC}`} style={{ transition: 'stroke-width .2s cubic-bezier(.16,1,.3,1), opacity .3s ease', opacity: vis.b ? 1 : 0, filter: hover === 'exceptions' ? 'drop-shadow(0 0 10px rgba(253,230,138,.7))' : 'none', cursor: onClick ? 'pointer' : 'default' }}
            onMouseEnter={() => setHover('exceptions')} onMouseLeave={() => setHover(null)} onMouseDown={window.seRipple} onClick={() => onClick && vis.b && onClick('exceptions')} />
          <circle cx={size / 2} cy={size / 2} r={R} fill="none" stroke="#EA580C" strokeWidth={hover === 'executed' ? stroke + 8 : stroke}
            strokeDasharray={`${execLen} ${CIRC - execLen}`} strokeLinecap={execLen > 1 && execLen < CIRC ? 'butt' : 'round'}
            style={{ transition: 'stroke-dasharray .5s cubic-bezier(.16,1,.3,1), stroke-width .2s cubic-bezier(.16,1,.3,1), opacity .3s ease', opacity: vis.a ? 1 : 0, filter: hover === 'executed' ? 'drop-shadow(0 0 10px rgba(234,88,12,.5))' : 'none', cursor: onClick ? 'pointer' : 'default' }}
            onMouseEnter={() => setHover('executed')} onMouseLeave={() => setHover(null)} onMouseDown={window.seRipple} onClick={() => onClick && vis.a && onClick('executed')} />
        </svg>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
          <div style={{ fontSize: 30, fontWeight: 800, color: 'var(--txt)', letterSpacing: '-0.01em' }}>{pct.toFixed(0)}%</div>
          <div style={{ fontSize: 10.5, color: 'var(--txt3)', fontWeight: 700, letterSpacing: '.05em' }}>EFFICIENT</div>
        </div>
        {hover && (
          <div className="se-glasstip" style={{ left: '50%', top: -6, transform: 'translate(-50%,-100%)', whiteSpace: 'nowrap', minWidth: 168 }}>
            <div className="se-glasstip-hd">{hover === 'executed' ? 'Executed' : 'Exception'}</div>
            <div className="se-glasstip-row"><span>Status</span><b style={{ color: hover === 'executed' ? '#EA580C' : '#B45309' }}>{hover === 'executed' ? 'Completed' : 'Exception'}</b></div>
            <div className="se-glasstip-row"><span>Trip Count</span><b>{hover === 'executed' ? executed : exceptions}</b></div>
            <div className="se-glasstip-row"><span>Percentage</span><b>{(hover === 'executed' ? execEffPct : excEffPct).toFixed(1)}%</b></div>
            <div className="se-glasstip-row"><span>Contribution</span><b>{(hover === 'executed' ? execEffPct : excEffPct).toFixed(0)} of {total} trips</b></div>
            <div className="se-glasstip-row"><span>Efficiency</span><b>{hover === 'executed' ? 'Improves' : 'Reduces'} rate</b></div>
            {onClick && <div style={{ fontSize: 10, color: 'var(--txt3)', paddingTop: 3, textAlign: 'center' }}>Click to view details →</div>}
          </div>
        )}
      </div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13, minWidth: 150 }}>
        <button className={`se-legenditem se-legenditem-block ${vis.a ? 'se-legenditem-on' : 'se-legenditem-off'}`} title="Click to show or hide this dataset" onMouseDown={window.seRipple} onClick={() => toggle('a')} onMouseEnter={() => setHover('executed')} onMouseLeave={() => setHover(null)}><i style={{ background: '#EA580C' }} /><span>Executed</span><strong style={{ marginLeft: 'auto' }}>{executed}</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" onMouseDown={window.seRipple} onClick={() => toggle('b')} onMouseEnter={() => setHover('exceptions')} onMouseLeave={() => setHover(null)}><i style={{ background: '#FDE68A' }} /><span>Exceptions</span><strong style={{ marginLeft: 'auto' }}>{exceptions}</strong></button>
        {onClick && !noneVisible && <div style={{ fontSize: 10.5, color: 'var(--txt3)', paddingTop: 2 }}>Click a ring to drill in →</div>}
      </div>
    </div>
  );
}

// ── Vehicle Utilization Heatmap — premium enterprise-grade grid. Rounded
// cells, OM-orange intensity scale, hover elevation + tooltip, click drills
// into a per-vehicle/day popup. ─────────────────────────────────────────────
function TEHeatmap({ heat, onCell }) {
  const [hoverCell, setHoverCell] = teSt(null);
  if (!heat.vehicles.length || !heat.days.length) {
    return <div className="se-empty-dataset"><window.SEIcon name="Grid3x3" size={26} color="var(--txt3)" /><div>No trip activity yet for this range.</div></div>;
  }
  const shade = n => { // 0..1 intensity → OM orange scale
    if (n <= 0) return '#F3F4F6';
    const stops = ['#FDE9D9', '#FBCFA0', '#F6A961', '#EA580C', '#B84A0C', '#7C3308'];
    const idx = Math.min(stops.length - 1, Math.round(n * (stops.length - 1)));
    return stops[idx];
  };
  return (
    <div className="te-heatmap-wrap">
      <div className="te-heatmap-scroll">
        <div className="te-heatmap-grid" style={{ gridTemplateColumns: `120px repeat(${heat.days.length}, 34px)` }}>
          <div className="te-hm-corner" />
          {heat.days.map(d => <div key={d} className="te-hm-daylbl">{d.slice(5)}</div>)}
          {heat.vehicles.map(v => (
            <React.Fragment key={v}>
              <div className="te-hm-rowlbl" title={v}>{v}</div>
              {heat.days.map(d => {
                const c = heat.cell(v, d);
                const intensity = c ? c.trips / heat.maxTrips : 0;
                const isHover = hoverCell === v + '|' + d;
                return (
                  <div
                    key={d}
                    className={`te-hm-cell ${isHover ? 'te-hm-cell-hover' : ''}`}
                    style={{ background: shade(intensity), opacity: hoverCell && !isHover ? 0.55 : 1 }}
                    onMouseEnter={() => setHoverCell(v + '|' + d)}
                    onMouseLeave={() => setHoverCell(null)}
                    onMouseDown={c ? window.seRipple : undefined}
                    onClick={() => c && onCell(v, d, c)}
                  >
                    {isHover && c && (
                      <div className="se-glasstip te-hm-tip">
                        <div className="se-glasstip-hd">{v} · {d}</div>
                        <div className="se-glasstip-row"><span>Trips</span><b>{c.trips}</b></div>
                        <div className="se-glasstip-row"><span>Qty</span><b>{window.formatQuantity(c.qty)} T</b></div>
                        <div className="se-glasstip-row"><span>Modules</span><b>{c.modules}</b></div>
                        {c.exceptions > 0 && <div className="se-glasstip-row"><span>Exceptions</span><b style={{ color: '#DC2626' }}>{c.exceptions}</b></div>}
                      </div>
                    )}
                  </div>
                );
              })}
            </React.Fragment>
          ))}
        </div>
      </div>
      <div className="te-hm-legend">
        <span>Less</span>
        {[0, 0.2, 0.4, 0.6, 0.8, 1].map((n, i) => <i key={i} style={{ background: shade(n) }} />)}
        <span>More</span>
      </div>
    </div>
  );
}

// ── Popup dispatcher — one dedicated content view per KPI / chart / cell ───
function TERenderPopup({ kind, payload, ctx }) {
  const { TE, stats, prevStats, vehicleTable, transporterTable, live, C } = ctx;
  if (kind === 'efficiency') {
    const q = TE.trendByGranularity(live, 'quarterly').map(d => ({ name: d.month, value: d.count > 0 ? d.settled / d.count * 100 : 100 }));
    return (
      <>
        <TEPopStats items={[
          { label: 'Current Efficiency', value: stats.efficiencyPct.toFixed(1) + '%', color: '#EA580C' },
          { label: 'Previous Period', value: (prevStats.total > 0 ? prevStats.efficiencyPct.toFixed(1) : '—') + '%' },
          { label: 'Executed Trips', value: stats.executed, color: 'var(--ok)' },
          { label: 'Exception Trips', value: stats.exceptions, color: stats.exceptions > 0 ? '#DC2626' : 'var(--txt3)' },
        ]} />
        <TEPopSection title="Quarterly Efficiency Trend"><TEBarList rows={q.map((d, i) => ({ id: i, name: d.name, value: d.value }))} valueKey="value" fmt={v => v.toFixed(0) + '%'} accent="#EA580C" /></TEPopSection>
      </>
    );
  }
  if (kind === 'executed' || kind === 'exceptions') {
    const rows = kind === 'executed' ? stats.executedRows : stats.exceptionRows;
    return (
      <>
        <TEPopStats items={[
          { label: kind === 'executed' ? 'Executed Trips' : 'Exception Trips', value: rows.length, color: kind === 'executed' ? 'var(--ok)' : '#DC2626' },
          { label: 'Share of Total', value: (stats.total > 0 ? (rows.length / stats.total * 100).toFixed(1) : '0.0') + '%' },
        ]} />
        <TEPopSection title={kind === 'executed' ? 'Executed Trips' : 'Trips Missing Vehicle, Transporter or Quantity'}>
          <window.DashBTable rows={rows.slice(0, 200).map(t => ({ date: t.date ? window.fmtDate(t.date) : '—', module: t.module, vehicle: t.vehicle, transporter: t.transporter, material: t.material, qty: t.qty }))} cols={[{ k: 'date', h: 'Date' }, { k: 'module', h: 'Module' }, { k: 'vehicle', h: 'Vehicle' }, { k: 'transporter', h: 'Transporter' }, { k: 'material', h: 'Material' }, { k: 'qty', h: 'Qty', r: true, f: v => window.formatQuantity((v || 0)) + ' T' }]} maxH={420} />
        </TEPopSection>
      </>
    );
  }
  if (kind === 'vehicles' || kind === 'topvehicle') {
    const rows = vehicleTable.slice(0, kind === 'topvehicle' ? 1 : 50);
    return (
      <>
        <TEPopStats items={[
          { label: 'Active Vehicles', value: stats.activeVehicles },
          { label: 'Top Vehicle', value: stats.topVehicle ? stats.topVehicle.name : '—', sub: stats.topVehicle ? `${stats.topVehicle.trips} trips` : null, color: '#EA580C' },
          { label: 'Multi-Module Vehicles', value: stats.multiModuleVehicles },
        ]} />
        <TEPopSection title="Vehicle Performance"><window.DashBTable rows={rows} cols={[{ k: 'name', h: 'Vehicle', b: true }, { k: 'trips', h: 'Trips', r: true }, { k: 'qty', h: 'Qty', r: true, f: v => window.formatQuantity(v) + ' T' }, { k: 'avgQty', h: 'Avg Load', r: true, f: v => window.formatQuantity(v) + ' T' }, { k: 'modules', h: 'Modules', r: true }, { k: 'efficiencyPct', h: 'Efficiency', r: true, f: v => v.toFixed(0) + '%' }, { k: 'lastDate', h: 'Last Trip', f: v => v ? window.fmtDate(v) : '—' }]} maxH={420} /></TEPopSection>
      </>
    );
  }
  if (kind === 'transporters' || kind === 'topTransporter') {
    const rows = transporterTable.slice(0, kind === 'topTransporter' ? 1 : 50);
    return (
      <>
        <TEPopStats items={[
          { label: 'Active Transporters', value: stats.activeTransporters },
          { label: 'Top Transporter', value: stats.topTransporter ? stats.topTransporter.name : '—', sub: stats.topTransporter ? `${stats.topTransporter.trips} trips` : null, color: '#EA580C' },
        ]} />
        <TEPopSection title="Transporter Performance"><window.DashBTable rows={rows} cols={[{ k: 'name', h: 'Transporter', b: true }, { k: 'trips', h: 'Trips', r: true }, { k: 'qty', h: 'Qty', r: true, f: v => window.formatQuantity(v) + ' T' }, { k: 'avgQty', h: 'Avg Load', r: true, f: v => window.formatQuantity(v) + ' T' }, { k: 'efficiencyPct', h: 'Efficiency', r: true, f: v => v.toFixed(0) + '%' }, { k: 'lastDate', h: 'Last Trip', f: v => v ? window.fmtDate(v) : '—' }]} maxH={420} /></TEPopSection>
      </>
    );
  }
  if (kind === 'load') {
    const buckets = TE.loadDistribution(live);
    return (
      <>
        <TEPopStats items={[{ label: 'Avg Load / Trip', value: window.formatQuantity(stats.avgQty) + ' T', color: '#EA580C' }, { label: 'Total Qty Moved', value: window.formatQuantity(stats.totalQty) + ' T' }]} />
        <TEPopSection title="Load Size Distribution"><TEBarList rows={buckets.map(b => ({ id: b.id, name: b.label, value: b.count }))} valueKey="value" fmt={v => v + ' trips'} accent="#EA580C" /></TEPopSection>
      </>
    );
  }
  if (kind === 'modules') {
    const mix = TE.moduleMix(live);
    return <TEPopSection title="Module Mix"><window.DashBTable rows={mix} cols={[{ k: 'name', h: 'Module', b: true }, { k: 'trips', h: 'Trips', r: true }, { k: 'qty', h: 'Qty', r: true, f: v => window.formatQuantity(v) + ' T' }]} /></TEPopSection>;
  }
  if (kind === 'vehicleDay') {
    const c = payload.cell;
    const rows = live.filter(t => t.vehicle === payload.vehicle && t.date === payload.date);
    return (
      <>
        <TEPopStats items={[
          { label: 'Vehicle', value: payload.vehicle },
          { label: 'Date', value: window.fmtDate(payload.date) },
          { label: 'Trips', value: c.trips, color: '#EA580C' },
          { label: 'Qty Moved', value: window.formatQuantity(c.qty) + ' T' },
        ]} />
        <TEPopSection title="Trips on this Day"><window.DashBTable rows={rows.map(t => ({ module: t.module, transporter: t.transporter, material: t.material, party: t.party, qty: t.qty }))} cols={[{ k: 'module', h: 'Module' }, { k: 'transporter', h: 'Transporter' }, { k: 'material', h: 'Material' }, { k: 'party', h: 'Party' }, { k: 'qty', h: 'Qty', r: true, f: v => window.formatQuantity((v || 0)) + ' T' }]} /></TEPopSection>
      </>
    );
  }
  if (kind === 'period') {
    const d = payload.point;
    return (
      <TEPopStats items={[
        { label: 'Period', value: d.month },
        { label: 'Executed', value: d.settled, color: 'var(--ok)' },
        { label: 'Exceptions', value: d.pending, color: d.pending > 0 ? '#DC2626' : 'var(--txt3)' },
        { label: 'Total Trips', value: d.count },
      ]} />
    );
  }
  return null;
}
const TE_POPUP_META = {
  efficiency: { title: 'Trip Efficiency', subtitle: 'Historical trend · benchmark', icon: 'Gauge' },
  executed: { title: 'Completed Trip Ledger', subtitle: 'Every fully-executed trip', icon: 'CheckCircle2' },
  exceptions: { title: 'Exception Trips', subtitle: 'Trips missing vehicle, transporter or quantity', icon: 'AlertTriangle' },
  vehicles: { title: 'Vehicle Performance', subtitle: 'Trips · load · efficiency per vehicle', icon: 'Truck' },
  topvehicle: { title: 'Top Vehicle', subtitle: 'Highest-trip vehicle profile', icon: 'Trophy' },
  transporters: { title: 'Transporter Performance', subtitle: 'Trips · load · efficiency per transporter', icon: 'Users' },
  topTransporter: { title: 'Top Transporter', subtitle: 'Highest-trip transporter profile', icon: 'Award' },
  load: { title: 'Load Analysis', subtitle: 'Average load and distribution', icon: 'PackageOpen' },
  modules: { title: 'Module Mix', subtitle: 'Trip volume by originating module', icon: 'LayoutGrid' },
  vehicleDay: { title: 'Vehicle Activity Details', subtitle: 'Trips for the selected vehicle and day', icon: 'CalendarDays' },
  period: { title: 'Period Analysis', subtitle: 'Drill into this time bucket', icon: 'CalendarRange' },
};

// ── Main flow — single full-screen analytics center (no intermediate hub;
// there is only one stream here, unlike Vendor/Transport settlements). ─────
function TripEfficiencyFlow({ allTripsUnified, companyId, onClose }) {
  const TE = window.TripEfficiencyIntel;
  const C = window.fmtCur;
  const accent = '#EA580C';
  const [period, setPeriod] = teSt('all');
  const [custom, setCustom] = teSt({ from: '', to: '' });
  const [grain, setGrain] = teSt('monthly');
  const [popup, setPopup] = teSt(null);
  const [search, setSearch] = teSt('');
  const [statusFilter, setStatusFilter] = teSt(null);
  const [moduleFilter, setModuleFilter] = teSt(null);
  const [vehicleFilter, setVehicleFilter] = teSt(null);
  const [expandId, setExpandId] = teSt(null);

  const scoped = teMemo(() => (allTripsUnified || []).filter(t => !companyId || companyId === 'group' || t.companyId === companyId), [allTripsUnified, companyId]);
  const range = teMemo(() => TE.periodRange(period, custom.from, custom.to), [period, custom]);
  const live = teMemo(() => TE.filterByPeriod(scoped, range), [scoped, range]);
  const prevRange = teMemo(() => TE.shiftedPreviousRange(range), [range]);
  const prevLive = teMemo(() => TE.filterByPeriod(scoped, prevRange), [scoped, prevRange]);

  const stats = teMemo(() => TE.streamStats(live), [live]);
  const prevStats = teMemo(() => TE.streamStats(prevLive), [prevLive]);
  const trend = teMemo(() => TE.trendByGranularity(live, grain), [live, grain]);
  const vehicleTable = teMemo(() => TE.entityTable(live, 'vehicle'), [live]);
  const transporterTable = teMemo(() => TE.entityTable(live, 'transporter'), [live]);
  const moduleMix = teMemo(() => TE.moduleMix(live), [live]);
  const heat = teMemo(() => TE.heatmapData(live, { topN: 10, days: 14 }), [live]);
  const execStrip = teMemo(() => TE.buildExecStrip(stats, prevStats, vehicleTable, transporterTable), [stats, prevStats, vehicleTable, transporterTable]);

  const allModules = teMemo(() => [...new Set(live.map(t => t.module))].sort(), [live]);

  const filteredLedger = teMemo(() => {
    return live.filter(t => {
      if (search && !`${t.vehicle} ${t.transporter} ${t.material} ${t.party} ${t.challan}`.toLowerCase().includes(search.toLowerCase())) return false;
      if (moduleFilter && t.module !== moduleFilter) return false;
      if (vehicleFilter && t.vehicle !== vehicleFilter) return false;
      if (statusFilter === 'executed' && !TE.isExecuted(t)) return false;
      if (statusFilter === 'exception' && TE.isExecuted(t)) return false;
      return true;
    }).slice(0, 400);
  }, [live, search, moduleFilter, vehicleFilter, statusFilter]);

  const footTotals = teMemo(() => filteredLedger.reduce((a, t) => { a.qty += TE.num(t.qty); a.executed += TE.isExecuted(t) ? 1 : 0; return a; }, { qty: 0, executed: 0 }), [filteredLedger]);

  const ctx = { TE, C, stats, prevStats, vehicleTable, transporterTable, live };
  function openPopup(kind, payload) { setPopup({ kind, payload: payload || {} }); }
  function closePopup() { setPopup(null); }
  function exportCsv() {
    const head = ['Date', 'Module', 'Vehicle', 'Transporter', 'Material', 'Party', 'Challan', 'Qty', 'Status'];
    const lines = [head.join(',')].concat(filteredLedger.map(t => [t.date, t.module, t.vehicle, t.transporter, t.material, t.party, t.challan, t.qty, TE.isExecuted(t) ? 'Executed' : 'Exception'].map(v => `"${String(v == null ? '' : v).replace(/"/g, '""')}"`).join(',')));
    const blob = new Blob([lines.join('\n')], { type: 'text/csv' });
    const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'trip-efficiency-ledger.csv'; a.click();
  }

  const meta = popup ? TE_POPUP_META[popup.kind] || { title: 'Analytics', subtitle: '', icon: 'BarChart3' } : null;

  return ReactDOM.createPortal(
    <div className="se-full">
      <TEFullScreenStyles />
      <div className="se-full-hd">
        <button className="se-full-back" onClick={onClose}><window.SEIcon name="ChevronLeft" size={16} /> Back</button>
        <div className="se-full-hdtitle"><window.SEIcon name="Activity" size={18} color={accent} /> Trip Efficiency Analytics <span style={{ fontWeight: 500, color: 'var(--txt3)', fontSize: 12, marginLeft: 6 }}>Operational Performance Center</span></div>
        <button className="mod-x" onClick={onClose}>×</button>
      </div>
      <div className="se-full-body">
        <window.SETimeBar period={period} setPeriod={setPeriod} custom={custom} setCustom={setCustom} accent={accent} />

        <div className="se-kpi-strip">
          <window.SEKpiTile label="Trip Efficiency" value={stats.efficiencyPct.toFixed(1) + '%'} numeric={Math.round(stats.efficiencyPct * 10) / 10} suffix="%" color={accent} icon="Gauge" onClick={() => openPopup('efficiency')} sub={`${stats.executed} / ${stats.total} Trips`} />
          <window.SEKpiTile label="Completed Trips" numeric={stats.executed} value={stats.executed} color="var(--ok)" icon="CheckCircle2" onClick={() => openPopup('executed')} active={statusFilter === 'executed'} sub={`of ${stats.total} total`} />
          <window.SEKpiTile label="Exception Trips" numeric={stats.exceptions} value={stats.exceptions} color={stats.exceptions > 0 ? '#DC2626' : 'var(--txt3)'} icon="AlertTriangle" onClick={() => openPopup('exceptions')} active={statusFilter === 'exception'} sub="Missing vehicle/transporter/qty" />
          <window.SEKpiTile label="Active Vehicles" numeric={stats.activeVehicles} value={stats.activeVehicles} icon="Truck" onClick={() => openPopup('vehicles')} sub={`${stats.multiModuleVehicles} multi-module`} />
          <window.SEKpiTile label="Active Transporters" numeric={stats.activeTransporters} value={stats.activeTransporters} icon="Users" onClick={() => openPopup('transporters')} />
          <window.SEKpiTile label="Avg Load / Trip" value={window.formatQuantity(stats.avgQty) + ' T'} numeric={Math.round(stats.avgQty * 10) / 10} suffix=" T" icon="PackageOpen" onClick={() => openPopup('load')} sub={`${window.formatQuantity(stats.totalQty)} T total`} />
          <window.SEKpiTile label="Top Vehicle" value={stats.topVehicle ? stats.topVehicle.trips : '—'} sub={stats.topVehicle ? stats.topVehicle.name : 'No data'} icon="Trophy" color={accent} onClick={() => openPopup('topvehicle')} />
          <window.SEKpiTile label="Modules Covered" numeric={stats.modulesCovered} value={stats.modulesCovered} icon="LayoutGrid" onClick={() => openPopup('modules')} />
        </div>

        <window.SEExecStrip items={execStrip} accent={accent} onOpen={(kind, payload) => openPopup(kind, payload)} />

        <div className="se-chart-grid">
          <div className="se-chart-card" style={{ gridColumn: 'span 2' }}>
            <div className="se-chart-hd">Operational Trip Performance — Completed vs Planned (click a bar to drill in)</div>
            <window.SEGrainChart grain={grain} setGrain={setGrain} data={trend} C={v => v + ' trips'} aColor="#EA580C" bColor="#F59E0B" aLabel="Completed Trips" bLabel="Exception Trips" onBarClick={pt => openPopup('period', { point: pt })} />
          </div>
          <div className="se-chart-card se-chart-card-donut">
            <div className="se-chart-hd">Completed vs Exception</div>
            <TEDonut executed={stats.executed} exceptions={stats.exceptions} onClick={k => openPopup(k)} />
          </div>
          <div className="se-chart-card">
            <div className="se-chart-hd">Vehicle Performance Leaderboard {vehicleFilter && <span className="se-chip-clear" onClick={() => setVehicleFilter(null)}>clear filter</span>}</div>
            <TEBarList rows={vehicleTable.slice(0, 8)} valueKey="trips" fmt={v => v + ' trips'} accent={accent} activeId={vehicleFilter} onClick={r => { setVehicleFilter(r.id); openPopup('vehicles', { vehicle: r }); }} />
          </div>
          <div className="se-chart-card">
            <div className="se-chart-hd">Transporter Performance</div>
            <TEBarList rows={transporterTable.slice(0, 8)} valueKey="trips" fmt={v => v + ' trips'} accent="#1D4ED8" onClick={r => openPopup('transporters', { transporter: r })} />
          </div>
          <div className="se-chart-card">
            <div className="se-chart-hd">Module Mix {moduleFilter && <span className="se-chip-clear" onClick={() => setModuleFilter(null)}>clear filter</span>}</div>
            <TEBarList rows={moduleMix.map(m => ({ id: m.name, ...m }))} valueKey="trips" fmt={v => v + ' trips'} accent="#7C3AED" activeId={moduleFilter} onClick={r => { setModuleFilter(r.name); openPopup('modules'); }} />
          </div>
        </div>

        <div className="se-chart-card" style={{ marginBottom: 18 }}>
          <div className="se-chart-hd">Vehicle Utilization Heatmap <span style={{ fontWeight: 500, color: 'var(--txt3)', fontSize: 11 }}>· top 10 vehicles · last 14 active days · click a cell to drill in</span></div>
          <TEHeatmap heat={heat} onCell={(vehicle, date, cell) => openPopup('vehicleDay', { vehicle, date, cell })} />
        </div>

        <div className="se-table-card">
          <div className="se-chart-hd se-toolbar" style={{ justifyContent: 'space-between' }}>
            <span>Operational Trip Ledger ({filteredLedger.length}{live.length > 400 ? ` of ${live.length}` : ''})</span>
            <div className="se-toolbar">
              {['executed', 'exception'].map(s => (
                <button key={s} className={`se-statuschip ${statusFilter === s ? 'se-statuschip-on' : ''}`} style={statusFilter === s ? { background: accent, borderColor: accent } : null} onMouseDown={window.seRipple} onClick={() => setStatusFilter(v => v === s ? null : s)}>{s === 'executed' ? 'Executed' : 'Exception'}</button>
              ))}
              <select className="se-search" style={{ width: 150 }} value={moduleFilter || ''} onChange={e => setModuleFilter(e.target.value || null)}>
                <option value="">All Modules</option>
                {allModules.map(m => <option key={m} value={m}>{m}</option>)}
              </select>
              <input className="se-search" placeholder="Search vehicle, transporter…" value={search} onChange={e => setSearch(e.target.value)} />
              <button className="se-exportbtn" onMouseDown={window.seRipple} onClick={exportCsv}><window.SEIcon name="Download" size={13} /> Export CSV</button>
            </div>
          </div>
          <div className="se-table-scroll">
            <table className="se-table">
              <thead><tr>
                <th>Date</th><th>Module</th><th>Vehicle</th><th>Transporter</th><th>Material</th><th>Party</th><th className="r">Qty</th><th>Status</th>
              </tr></thead>
              <tbody>
                {filteredLedger.length === 0 && <tr><td colSpan={8} style={{ padding: 16, color: 'var(--txt3)', fontStyle: 'italic' }}>No trips match the current filters.</td></tr>}
                {filteredLedger.map(t => (
                  <tr className="se-row" key={t.id + t.module} onClick={() => setExpandId(expandId === t.id ? null : t.id)}>
                    <td>{t.date ? window.fmtDate(t.date) : '—'}</td>
                    <td>{t.module}</td>
                    <td style={{ fontWeight: 700 }}>{t.vehicle}</td>
                    <td>{t.transporter}</td>
                    <td>{t.material}</td>
                    <td>{t.party}</td>
                    <td className="r">{window.formatQuantity((t.qty || 0))} T</td>
                    <td>{TE.isExecuted(t) ? <span style={{ fontSize: 10.5, fontWeight: 700, padding: '2px 8px', borderRadius: 20, background: '#DCFCE7', color: '#166534' }}>Executed</span> : <span style={{ fontSize: 10.5, fontWeight: 700, padding: '2px 8px', borderRadius: 20, background: '#FEF3C7', color: '#92400E' }}>Exception</span>}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr className="se-table-foot">
                  <td colSpan={6}>Total ({filteredLedger.length})</td>
                  <td className="r">{window.formatQuantity(footTotals.qty)} T</td>
                  <td>{filteredLedger.length > 0 ? (footTotals.executed / filteredLedger.length * 100).toFixed(0) : 0}% executed</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>

      {popup && (
        <window.SEKpiPopup title={meta.title} subtitle={meta.subtitle} icon={meta.icon} accent={accent} onClose={closePopup} onExport={exportCsv} onPrint={() => window.print()} wide={popup.kind === 'vehicles' || popup.kind === 'transporters' || popup.kind === 'executed' || popup.kind === 'exceptions'}>
          <TERenderPopup kind={popup.kind} payload={popup.payload} ctx={ctx} />
        </window.SEKpiPopup>
      )}
    </div>,
    document.body
  );
}
window.TripEfficiencyFlow = TripEfficiencyFlow;

// ── Heatmap-specific CSS (kept alongside .se-full styles, injected by this
// flow so it works even when Settlement Performance Center hasn't mounted) ──
function TEFullScreenStyles() {
  return (
    <style>{`
      /* Full copy of the Settlement Performance Center's .se-full/.sekp-* system.
         TripEfficiencyFlow can mount standalone (Settlement Center may never
         have mounted this session), so it must carry its own complete copy
         rather than relying on the other flow's <style> tag being present. */
      .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 */
      .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 */
      .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 */
      .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 */
      .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 */
      .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;}

      .te-heatmap-wrap{display:flex;flex-direction:column;gap:12px;}
      .te-heatmap-scroll{overflow-x:auto;padding-bottom:4px;}
      .te-heatmap-grid{display:grid;gap:4px;align-items:center;}
      .te-hm-corner{}
      .te-hm-daylbl{font-size:9.5px;font-weight:700;color:var(--txt3);text-align:center;padding-bottom:2px;}
      .te-hm-rowlbl{font-size:11px;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px;}
      .te-hm-cell{position:relative;width:34px;height:26px;border-radius:7px;cursor:pointer;transition:transform .16s cubic-bezier(.16,1,.3,1),box-shadow .16s ease,opacity .25s ease;}
      .te-hm-cell:hover,.te-hm-cell-hover{transform:scale(1.18);box-shadow:0 6px 16px -4px rgba(234,88,12,0.45);z-index:5;}
      .te-hm-tip{left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;position:absolute;z-index:30;}
      .te-hm-legend{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--txt3);font-weight:600;}
      .te-hm-legend i{width:16px;height:10px;border-radius:3px;display:inline-block;}
    `}</style>
  );
}