// Warehouse dashboard — Sylius/Tabler-inspired admin layout (original design for KMK WMS)

const STOCK_ROWS = [
  { sku: 'CEG-CZE-2512', name: 'Cegła czerwona 250×120×65',  stock: 14820, unit: 'szt.', status: 'ok',    delta: '+2 480', loc: 'A-12', value: '35 568 zł' },
  { sku: 'CEG-GRA-2512', name: 'Cegła grafit 250×120×65',    stock: 9220,  unit: 'szt.', status: 'ok',    delta: '+960',   loc: 'A-08', value: '22 128 zł' },
  { sku: 'PLT-NAT-2406', name: 'Płytka naturalna 245×65×9',  stock: 612,   unit: 'm²',   status: 'low',   delta: '−84',    loc: 'B-03', value: '54 468 zł' },
  { sku: 'CEG-CIE-2912', name: 'Cegła cieniowana 290×140',   stock: 3640,  unit: 'szt.', status: 'ok',    delta: '+1 200', loc: 'A-21', value: '11 648 zł' },
  { sku: 'KSZ-CZE-1115', name: 'Kształtka czerwona 115',     stock: 184,   unit: 'szt.', status: 'crit',  delta: '−48',    loc: 'C-02', value: '883 zł' },
  { sku: 'DRG-GRA-2010', name: 'Klinkier drogowy grafit',    stock: 1840,  unit: 'm²',   status: 'ok',    delta: '+0',     loc: 'D-04', value: '228 160 zł' },
];

const ORDERS = [
  { id: '#KM-26144', client: 'Budimex S.A.',  pal: 14, dest: 'Wrocław', status: 'loading', val: '38 920 zł', eta: '12.05 · 14:30' },
  { id: '#KM-26145', client: 'Polbruk Sp.',   pal: 8,  dest: 'Gdańsk',  status: 'route',   val: '19 240 zł', eta: '12.05 · 18:00' },
  { id: '#KM-26146', client: 'Erbud',         pal: 22, dest: 'Kraków',  status: 'route',   val: '54 800 zł', eta: '13.05 · 09:15' },
  { id: '#KM-26147', client: 'Strabag',       pal: 6,  dest: 'Olsztyn', status: 'queued',  val: '14 760 zł', eta: '13.05 · 12:00' },
];

const NAV = [
  { id: 'dash',  label: 'Pulpit',       icon: 'grid',   active: true,  badge: null },
  { id: 'stock', label: 'Stany',        icon: 'box',    active: false, badge: '187' },
  { id: 'ord',   label: 'Zamówienia',   icon: 'doc',    active: false, badge: '12' },
  { id: 'tr',    label: 'Trasy / flota', icon: 'route',  active: false, badge: '14' },
  { id: 'cli',   label: 'Klienci',      icon: 'user',   active: false, badge: null },
  { id: 'rep',   label: 'Raporty',      icon: 'chart',  active: false, badge: null },
  { id: 'cfg',   label: 'Ustawienia',   icon: 'cog',    active: false, badge: null },
];

// ----- Simple line icons (Tabler-style — pure geometric primitives) -----
const Icon = ({ name, size = 18 }) => {
  const p = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const i = {
    grid:  <g {...p}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></g>,
    box:   <g {...p}><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4"/><path d="M12 11v10"/></g>,
    doc:   <g {...p}><rect x="5" y="3" width="14" height="18" rx="1"/><path d="M9 8h6M9 12h6M9 16h4"/></g>,
    route: <g {...p}><circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M6 8v6a4 4 0 0 0 4 4h6"/></g>,
    user:  <g {...p}><circle cx="12" cy="8" r="3.5"/><path d="M5 21c0-4 3-7 7-7s7 3 7 7"/></g>,
    chart: <g {...p}><path d="M3 21h18"/><rect x="6" y="13" width="3" height="6"/><rect x="11" y="9" width="3" height="10"/><rect x="16" y="5" width="3" height="14"/></g>,
    cog:   <g {...p}><circle cx="12" cy="12" r="3"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"/></g>,
    bell:  <g {...p}><path d="M6 8a6 6 0 0 1 12 0v5l1.5 3h-15L6 13z"/><path d="M10 19a2 2 0 0 0 4 0"/></g>,
    search:<g {...p}><circle cx="11" cy="11" r="6"/><path d="m20 20-4-4"/></g>,
    plus:  <g {...p}><path d="M12 5v14M5 12h14"/></g>,
    arrow: <g {...p}><path d="M5 12h14M13 6l6 6-6 6"/></g>,
    truck: <g {...p}><rect x="2" y="7" width="11" height="10" rx="1"/><path d="M13 10h4l4 4v3h-8z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></g>,
    warn:  <g {...p}><path d="M12 3 2 21h20z"/><path d="M12 10v5M12 17.5v.5"/></g>,
    check: <g {...p}><path d="m5 12 5 5L20 7"/></g>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block' }}>{i[name] || null}</svg>;
};

// ----- Status pill -----
const StatusTag = ({ kind }) => {
  const map = {
    ok:      { bg: '#e7f5ee', fg: '#1d7a4f', label: 'OK',          dot: '#22a06b' },
    low:     { bg: '#fff4d6', fg: '#8a6500', label: 'NISKI',       dot: '#d98c00' },
    crit:    { bg: '#fce0e4', fg: '#a3142a', label: 'KRYTYCZNY',   dot: 'var(--accent)' },
    loading: { bg: '#fff4d6', fg: '#8a6500', label: 'ZAŁADUNEK',   dot: '#d98c00' },
    route:   { bg: '#e8efff', fg: '#1e3a8a', label: 'W TRASIE',    dot: '#3b6bff' },
    queued:  { bg: '#ededea', fg: '#5a5a60', label: 'KOLEJKA',     dot: '#8a8a90' },
  };
  const c = map[kind] || map.ok;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: c.bg, color: c.fg, padding: '3px 8px 3px 7px', borderRadius: 999,
      fontSize: 11, fontWeight: 500, letterSpacing: '0.01em', fontFamily: 'var(--font-sans)',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: c.dot }} />
      {c.label}
    </span>
  );
};

// ----- Deliveries chart (last 14 days) -----
const DELIVERIES = [
  { d: '10.05', v: 38, lbl: 'Pn' }, { d: '11.05', v: 52, lbl: 'Wt' },
  { d: '12.05', v: 61, lbl: 'Śr' }, { d: '13.05', v: 48, lbl: 'Cz' },
  { d: '14.05', v: 72, lbl: 'Pt' }, { d: '15.05', v: 24, lbl: 'Sb' },
  { d: '17.05', v: 42, lbl: 'Pn' }, { d: '18.05', v: 58, lbl: 'Wt' },
  { d: '19.05', v: 67, lbl: 'Śr' }, { d: '20.05', v: 81, lbl: 'Cz' },
  { d: '21.05', v: 73, lbl: 'Pt' }, { d: '22.05', v: 28, lbl: 'Sb' },
  { d: '23.05', v: 64, lbl: 'Pn' }, { d: '24.05', v: 78, lbl: 'Wt', today: true },
];

const DeliveriesChart = () => {
  const max = Math.max(...DELIVERIES.map(d => d.v));
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'stretch', gap: 8, height: 180, paddingTop: 8 }}>
        {DELIVERIES.map((d, i) => {
          const h = (d.v / max) * 100;
          return (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, minWidth: 0 }}>
              <div style={{ flex: 1, width: '100%', display: 'flex', alignItems: 'flex-end', position: 'relative', minHeight: 0 }}>
                <div style={{
                  width: '100%', height: `${h}%`, borderRadius: '3px 3px 0 0',
                  background: d.today ? 'var(--accent)' : '#1f1f24',
                  position: 'relative',
                }}>
                  {d.today && (
                    <div className="mono" style={{
                      position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)',
                      background: 'var(--ink)', color: '#fff', padding: '2px 6px', borderRadius: 2,
                      fontSize: 9, letterSpacing: '0.06em', whiteSpace: 'nowrap',
                    }}>{d.v}</div>
                  )}
                </div>
              </div>
              <span className="mono" style={{ fontSize: 9, color: 'var(--ink-4)', letterSpacing: '0.04em' }}>{d.lbl}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ----- Sidebar nav item -----
const SidebarItem = ({ item }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 12, padding: '9px 14px',
    borderRadius: 6, cursor: 'pointer',
    background: item.active ? '#fff' : 'transparent',
    color: item.active ? 'var(--ink)' : 'var(--ink-3)',
    boxShadow: item.active ? '0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px var(--line)' : 'none',
    fontSize: 13, fontWeight: item.active ? 500 : 400,
    transition: 'background .12s',
  }}>
    <span style={{ color: item.active ? 'var(--accent)' : 'var(--ink-4)' }}>
      <Icon name={item.icon} size={17} />
    </span>
    <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.label}</span>
    {item.badge && (
      <span className="mono" style={{
        background: item.active ? 'var(--accent-soft)' : 'var(--bone)',
        color: item.active ? 'var(--accent)' : 'var(--ink-4)',
        fontSize: 10, padding: '2px 6px', borderRadius: 999, letterSpacing: '0.04em',
      }}>{item.badge}</span>
    )}
  </div>
);

// ----- Main dashboard -----
const WarehouseDashboard = () => {
  return (
    <div style={{
      background: '#fff', border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden',
      display: 'grid', gridTemplateColumns: '200px 1fr', minHeight: 760,
      boxShadow: '0 1px 0 rgba(0,0,0,0.02), 0 10px 30px rgba(0,0,0,0.04)',
    }}>
      {/* ===== SIDEBAR ===== */}
      <aside style={{
        background: 'var(--bone)', borderRight: '1px solid var(--line)',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Brand badge */}
        <div style={{ padding: '18px 16px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 6, background: 'var(--accent)', color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700, fontSize: 12, letterSpacing: '0.04em',
          }}>GC</div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', lineHeight: 1 }}>WMS Panel</div>
            <div className="mono" style={{ fontSize: 9, color: 'var(--ink-4)', marginTop: 3, letterSpacing: '0.08em' }}>v2.6 · BŁONIE</div>
          </div>
        </div>

        {/* Nav */}
        <nav style={{ padding: '12px 10px', display: 'grid', gap: 2, alignContent: 'start' }}>
          <div className="mono" style={{ fontSize: 9, letterSpacing: '0.14em', color: 'var(--ink-4)', padding: '6px 14px 4px' }}>OPERACJE</div>
          {NAV.slice(0, 4).map(n => <SidebarItem key={n.id} item={n} />)}
          <div className="mono" style={{ fontSize: 9, letterSpacing: '0.14em', color: 'var(--ink-4)', padding: '14px 14px 4px' }}>CRM &amp; RAPORTY</div>
          {NAV.slice(4).map(n => <SidebarItem key={n.id} item={n} />)}
        </nav>

        {/* User card */}
        <div style={{ padding: 12, borderTop: '1px solid var(--line)' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, padding: 8, borderRadius: 6, background: '#fff',
            boxShadow: '0 0 0 1px var(--line)',
          }}>
            <div style={{
              width: 28, height: 28, borderRadius: '50%', background: 'var(--ink)', color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600,
            }}>PT</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 500, lineHeight: 1.2 }}>Paweł T.</div>
              <div className="mono" style={{ fontSize: 9, color: 'var(--ink-4)', letterSpacing: '0.06em' }}>SZEF B2B</div>
            </div>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#22a06b' }} />
          </div>
        </div>
      </aside>

      {/* ===== MAIN ===== */}
      <main style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        {/* Topbar */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '12px 24px', borderBottom: '1px solid var(--line)', background: '#fff',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--ink-3)', fontSize: 13 }}>
            <span style={{ color: 'var(--ink-4)' }}>WMS</span>
            <span style={{ color: 'var(--ink-4)' }}>/</span>
            <span style={{ color: 'var(--ink)', fontWeight: 500 }}>Pulpit</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '7px 12px', borderRadius: 6, border: '1px solid var(--line)',
              background: 'var(--bone)', minWidth: 220,
            }}>
              <span style={{ color: 'var(--ink-4)' }}><Icon name="search" size={14} /></span>
              <span style={{ fontSize: 12, color: 'var(--ink-4)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Szukaj SKU, klienta…</span>
              <span className="mono" style={{ marginLeft: 'auto', fontSize: 10, color: 'var(--ink-4)', background: '#fff', padding: '2px 6px', borderRadius: 3, border: '1px solid var(--line)' }}>⌘K</span>
            </div>
            <button style={iconBtn}><Icon name="bell" size={16} /><span style={{ position: 'absolute', top: 6, right: 6, width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }} /></button>
            <button style={{ ...iconBtn, width: 'auto', display: 'flex', alignItems: 'center', gap: 6, padding: '8px 14px', fontSize: 12, fontWeight: 500, background: 'var(--ink)', color: '#fff', border: 'none', whiteSpace: 'nowrap' }}>
              <Icon name="plus" size={14} /> Nowe zamówienie
            </button>
          </div>
        </div>

        {/* Page header */}
        <div style={{ padding: '24px 24px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'end' }}>
          <div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em' }}>● LIVE · 23.05.2026 · 09:42</div>
            <h3 style={{ fontSize: 22, fontWeight: 600, marginTop: 6, letterSpacing: '-0.02em' }}>Dzień dobry, Paweł.</h3>
            <p style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4 }}>Magazyn Centralny / Błonie · 38 hal z 48 zajętych · 14 ciężarówek w trasie</p>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            {['1D', '7D', '14D', '30D', '90D'].map(p => (
              <button key={p} className="mono" style={{
                padding: '6px 12px', borderRadius: 6,
                border: '1px solid var(--line)', background: p === '14D' ? 'var(--ink)' : '#fff',
                color: p === '14D' ? '#fff' : 'var(--ink-2)', fontSize: 11, letterSpacing: '0.06em', cursor: 'pointer',
              }}>{p}</button>
            ))}
          </div>
        </div>

        {/* KPI tiles */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, padding: '14px 24px' }}>
          <KpiCard label="Zajętość"      value="78%" sub="18.7 / 24 ha" trend="+4 pp" trendDir="up" icon="box" />
          <KpiCard label="Palety dziś"   value="312" sub="załadunek 184" trend="+12%" trendDir="up" icon="truck" />
          <KpiCard label="W trasie"     value="14"  sub="3 240 km dziś" trend="ETA 100%" trendDir="neutral" icon="route" />
          <KpiCard label="Alerty"       value="2"   sub="niskie stany"   trend="−1" trendDir="down" icon="warn" accent />
        </div>

        {/* Chart + side widget */}
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14, padding: '0 24px 14px' }}>
          {/* Chart card */}
          <div style={card}>
            <div style={cardHead}>
              <div>
                <div style={cardTitle}>Dostawy · 14 dni</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 4, letterSpacing: '0.04em' }}>
                  Sumarycznie · <strong style={{ color: 'var(--ink)' }}>786 palet</strong> · ⌀ <strong style={{ color: 'var(--ink)' }}>56 / dzień</strong>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                <Legend color="#1f1f24" label="Dni minione" />
                <Legend color="var(--accent)" label="Dziś" />
              </div>
            </div>
            <div style={{ padding: '12px 20px 20px' }}>
              <DeliveriesChart />
            </div>
          </div>

          {/* Top SKUs */}
          <div style={card}>
            <div style={cardHead}>
              <div style={cardTitle}>Top SKU · obrót 7 dni</div>
              <a href="#" style={{ fontSize: 11, color: 'var(--accent)', textDecoration: 'none' }}>Wszystkie →</a>
            </div>
            <div style={{ padding: '4px 20px 16px' }}>
              {[
                { sku: 'CEG-CZE-2512', n: '4 320 szt.', pct: 92 },
                { sku: 'PLT-NAT-2406', n: '186 m²',      pct: 71 },
                { sku: 'CEG-GRA-2512', n: '2 880 szt.', pct: 64 },
                { sku: 'CEG-CIE-2912', n: '1 920 szt.', pct: 48 },
                { sku: 'DRG-GRA-2010', n: '74 m²',       pct: 22 },
              ].map((r, i) => (
                <div key={r.sku} style={{
                  display: 'grid', gridTemplateColumns: '1fr auto', gap: 8, padding: '10px 0',
                  borderBottom: i < 4 ? '1px solid var(--line-2)' : 'none',
                }}>
                  <div>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--ink-2)' }}>{r.sku}</div>
                    <div style={{ height: 4, background: 'var(--bone)', borderRadius: 2, marginTop: 6, overflow: 'hidden' }}>
                      <div style={{ width: `${r.pct}%`, height: '100%', background: i === 0 ? 'var(--accent)' : 'var(--ink-2)' }} />
                    </div>
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', alignSelf: 'center', whiteSpace: 'nowrap' }}>{r.n}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Stock table + Orders */}
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14, padding: '0 24px 24px', flex: 1 }}>
          <div style={card}>
            <div style={cardHead}>
              <div>
                <div style={cardTitle}>Stany magazynowe</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 4 }}>187 SKU</div>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <button className="mono" style={tabBtn(true)}>Wszystkie</button>
                <button className="mono" style={tabBtn(false)}>Niskie<span style={tabCount}>2</span></button>
                <button className="mono" style={tabBtn(false)}>Kryt.<span style={tabCount}>1</span></button>
              </div>
            </div>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12, tableLayout: 'auto' }}>
              <thead>
                <tr style={{ color: 'var(--ink-4)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em', background: 'var(--bone)' }}>
                  <th style={{ ...th, width: '13%' }}>SKU</th>
                  <th style={th}>PRODUKT</th>
                  <th style={{ ...th, textAlign: 'right', width: '12%' }}>STAN</th>
                  <th style={{ ...th, textAlign: 'right', width: '9%' }}>24 H</th>
                  <th style={{ ...th, width: '8%' }}>LOK.</th>
                  <th style={{ ...th, width: '14%', textAlign: 'right' }}></th>
                </tr>
              </thead>
              <tbody>
                {STOCK_ROWS.map(r => (
                  <tr key={r.sku} style={{ borderTop: '1px solid var(--line-2)' }}>
                    <td style={{ ...td, fontFamily: 'var(--font-mono)', color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>{r.sku}</td>
                    <td style={{ ...td, color: 'var(--ink)' }}>{r.name}</td>
                    <td style={{ ...td, textAlign: 'right', fontFamily: 'var(--font-mono)', color: 'var(--ink)', whiteSpace: 'nowrap' }}>
                      {r.stock.toLocaleString('pl-PL')} <span style={{ color: 'var(--ink-4)' }}>{r.unit}</span>
                    </td>
                    <td style={{ ...td, textAlign: 'right', fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap',
                      color: r.delta.startsWith('+') && r.delta !== '+0' ? '#1d7a4f'
                           : r.delta === '+0' ? 'var(--ink-4)' : '#a3142a' }}>{r.delta}</td>
                    <td style={{ ...td, fontFamily: 'var(--font-mono)', color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>{r.loc}</td>
                    <td style={{ ...td, textAlign: 'right' }}><StatusTag kind={r.status} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div style={card}>
            <div style={cardHead}>
              <div>
                <div style={cardTitle}>Zamówienia dziś</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 4 }}>4 aktywne · 127 720 zł</div>
              </div>
              <a href="#" style={{ fontSize: 11, color: 'var(--accent)', textDecoration: 'none', whiteSpace: 'nowrap' }}>Wszystkie →</a>
            </div>
            <div style={{ padding: '0 20px 16px' }}>
              {ORDERS.map((o, i) => (
                <div key={o.id} style={{
                  display: 'grid', gap: 6, padding: '14px 0',
                  borderBottom: i < ORDERS.length - 1 ? '1px solid var(--line-2)' : 'none',
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{o.id}</span>
                    <StatusTag kind={o.status} />
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <span style={{ fontSize: 14, fontWeight: 500 }}>{o.client}</span>
                    <span className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{o.val}</span>
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', display: 'flex', justifyContent: 'space-between' }}>
                    <span>{o.pal} plt → {o.dest}</span>
                    <span>{o.eta}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

// ----- Helpers / shared bits -----
const KpiCard = ({ label, value, sub, trend, trendDir, icon, accent }) => {
  const trendColor = trendDir === 'up' ? '#1d7a4f' : trendDir === 'down' ? 'var(--accent)' : 'var(--ink-4)';
  const trendBg    = trendDir === 'up' ? '#e7f5ee' : trendDir === 'down' ? '#fce0e4' : 'var(--bone)';
  return (
    <div style={card}>
      <div style={{ padding: '18px 18px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-4)', textTransform: 'uppercase' }}>{label}</span>
          <span style={{
            width: 28, height: 28, borderRadius: 6, background: 'var(--bone)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: accent ? 'var(--accent)' : 'var(--ink-3)',
          }}><Icon name={icon} size={14} /></span>
        </div>
        <div style={{
          fontSize: 30, fontWeight: 600, letterSpacing: '-0.025em',
          color: accent ? 'var(--accent)' : 'var(--ink)', fontFamily: 'var(--font-display)',
        }}>{value}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{sub}</span>
          <span className="mono" style={{
            background: trendBg, color: trendColor,
            fontSize: 10, padding: '2px 7px', borderRadius: 999, letterSpacing: '0.04em', fontWeight: 600,
          }}>{trend}</span>
        </div>
      </div>
    </div>
  );
};

const Legend = ({ color, label }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
    <span style={{ width: 10, height: 10, borderRadius: 2, background: color }} />
    <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{label}</span>
  </div>
);

const card = { background: '#fff', border: '1px solid var(--line)', borderRadius: 8, overflow: 'hidden' };
const cardHead = {
  padding: '16px 20px', borderBottom: '1px solid var(--line-2)',
  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10,
};
const cardTitle = { fontSize: 14, fontWeight: 600, letterSpacing: '-0.005em', whiteSpace: 'nowrap' };
const iconBtn = {
  width: 34, height: 34, borderRadius: 6, border: '1px solid var(--line)', background: '#fff',
  display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-3)', cursor: 'pointer',
  position: 'relative',
};
const tabBtn = (active) => ({
  padding: '5px 10px', borderRadius: 5, border: '1px solid var(--line)',
  background: active ? 'var(--ink)' : '#fff', color: active ? '#fff' : 'var(--ink-3)',
  fontSize: 10, letterSpacing: '0.06em', cursor: 'pointer', fontFamily: 'var(--font-mono)',
  display: 'inline-flex', alignItems: 'center', gap: 6,
});
const tabCount = {
  background: 'rgba(0,0,0,0.08)', color: 'inherit', padding: '1px 5px', borderRadius: 999,
  fontSize: 9, fontWeight: 600,
};
const th = { padding: '11px 12px 9px', fontWeight: 500, textTransform: 'uppercase', textAlign: 'left' };
const td = { padding: '12px 12px', verticalAlign: 'middle' };

window.WarehouseDashboard = WarehouseDashboard;