/* "After" screens — redesigned counterparts. */

/* Shared bits ------------------------------------------------- */

function Metric({ value, label, delta, deltaDir, mono = true }) {
  const dcol = deltaDir === 'up' ? 'var(--ok)' : deltaDir === 'down' ? 'var(--bad)' : 'var(--steel)';
  return (
    <div style={{ padding: '18px 20px', borderRight: '1px solid var(--rule)' }}>
      <div style={{
        fontFamily: 'IBM Plex Mono', fontSize: 10, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: 'var(--steel)', marginBottom: 8,
      }}>{label}</div>
      <div style={{
        fontFamily: mono ? 'IBM Plex Mono' : 'Inter',
        fontSize: 26, fontWeight: 500, color: 'var(--ink)',
        letterSpacing: '-0.01em', lineHeight: 1, fontFeatureSettings: '"zero"',
      }}>{value}</div>
      {delta && (
        <div style={{ fontSize: 11, color: dcol, marginTop: 8, fontFamily: 'IBM Plex Mono' }}>
          <i className={`bi bi-arrow-${deltaDir === 'up' ? 'up' : deltaDir === 'down' ? 'down' : 'right'}-right`} style={{ marginRight: 3 }} />
          {delta}
        </div>
      )}
    </div>
  );
}

function Chip({ kind = 'neutral', children, dot }) {
  const styles = {
    neutral: { bg: 'var(--paper-2)', fg: 'var(--slate)', dot: 'var(--steel)' },
    ok:      { bg: 'var(--ok-tint)', fg: 'var(--ok)',     dot: 'var(--ok)'    },
    warn:    { bg: 'var(--warn-tint)', fg: 'oklch(0.4 0.13 80)', dot: 'var(--warn)' },
    bad:     { bg: 'var(--bad-tint)', fg: 'var(--bad)',   dot: 'var(--bad)'   },
    cool:    { bg: 'var(--cool-tint)', fg: 'var(--cool)', dot: 'var(--cool)'  },
    ember:   { bg: 'var(--ember-tint)', fg: 'var(--ember-ink)', dot: 'var(--ember)' },
  }[kind];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: styles.bg, color: styles.fg,
      padding: '2px 8px 2px 7px', borderRadius: 99,
      fontFamily: 'IBM Plex Mono', fontSize: 10.5, fontWeight: 500,
      letterSpacing: '0.02em',
    }}>
      {dot !== false && <span style={{ width: 5, height: 5, borderRadius: 99, background: styles.dot }} />}
      {children}
    </span>
  );
}

/* =======================
   DASHBOARD — AFTER
   ======================= */
function DashboardAfter() {
  return (
    <div style={{ display: 'flex', background: 'var(--paper)' }}>
      <SidebarAfter />
      <div style={{ flex: 1, minWidth: 0 }}>
        <TopbarAfter title="Good morning, John." breadcrumbs={['Today', 'Overview']} />
        <div style={{ padding: '22px 28px' }}>

          {/* Hero: today */}
          <div style={{
            background: 'var(--card)', border: '1px solid var(--rule)', borderRadius: 8,
            display: 'grid', gridTemplateColumns: '1.6fr 1fr', marginBottom: 18,
          }}>
            <div style={{ padding: '22px 24px', borderRight: '1px solid var(--rule)' }}>
              <div style={{
                fontFamily: 'IBM Plex Mono', fontSize: 10, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: 'var(--steel)', marginBottom: 10,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 5, height: 5, borderRadius: 99, background: 'var(--ember)' }} />
                Saturday · April 18
              </div>
              <div style={{
                fontFamily: 'Fraunces', fontWeight: 500, fontSize: 26,
                letterSpacing: '-0.015em', color: 'var(--ink)', lineHeight: 1.2,
              }}>
                <span>12 jobs on the floor, </span>
                <span style={{ color: 'var(--bad)' }}>3 running hot</span>
                <span>. One oven cycle left before lunch.</span>
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
                <button style={{ background: 'var(--ink)', color: 'var(--paper)', border: 'none', borderRadius: 6, padding: '8px 14px', fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>
                  Open daily board <i className="bi bi-arrow-right" style={{ marginLeft: 4 }} />
                </button>
                <button style={{ background: 'var(--card)', color: 'var(--ink)', border: '1px solid var(--rule)', borderRadius: 6, padding: '8px 14px', fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>
                  Oven schedule
                </button>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
              <Metric label="Collected · Apr" value="$48,290" delta="+14% vs Mar" deltaDir="up" />
              <Metric label="Outstanding A/R" value="$12,450" delta="2 invoices > 30d" deltaDir="down" />
              <Metric label="Active customers" value="84" delta="+3 this week" deltaDir="up" />
              <div style={{ padding: '18px 20px' }}>
                <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--steel)', marginBottom: 8 }}>Margin · Apr</div>
                <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 26, fontWeight: 500, color: 'var(--ink)', lineHeight: 1, letterSpacing: '-0.01em' }}>38.2%</div>
                <div style={{ fontSize: 11, color: 'var(--ok)', marginTop: 8, fontFamily: 'IBM Plex Mono' }}><i className="bi bi-arrow-up-right" style={{ marginRight: 3 }} />+2.1 pts</div>
              </div>
            </div>
          </div>

          {/* Attention row: only what needs action */}
          <div style={{
            background: 'var(--card)', border: '1px solid var(--rule)', borderRadius: 8,
            marginBottom: 18, overflow: 'hidden',
          }}>
            <div style={{
              padding: '12px 20px', borderBottom: '1px solid var(--rule)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontWeight: 600, fontSize: 14, letterSpacing: '-0.01em' }}>Needs attention</span>
                <Chip kind="bad">6 items</Chip>
              </div>
              <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--steel)' }}>filtered · next 48 h</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)' }}>
              {[
                { kind: 'bad', tag: 'OVERDUE', primary: '$3,240', label: '4 invoices past due', detail: 'Oldest: Rodriguez, 42d · $980' },
                { kind: 'warn', tag: 'TIGHT', primary: '7', label: 'jobs due in < 48h', detail: '2 in Prep · 4 in Coating · 1 in Curing' },
                { kind: 'cool', tag: 'LOW', primary: '8', label: 'powders below reorder', detail: 'Gloss black (3.2 lb) · Satin bronze · +6' },
              ].map((a, i) => (
                <div key={i} style={{
                  padding: '16px 20px',
                  borderRight: i < 2 ? '1px solid var(--rule)' : 'none',
                }}>
                  <Chip kind={a.kind}>{a.tag}</Chip>
                  <div style={{
                    marginTop: 10, fontFamily: 'IBM Plex Mono', fontSize: 22, fontWeight: 500,
                    color: 'var(--ink)', lineHeight: 1, letterSpacing: '-0.01em',
                  }}>{a.primary}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--slate)', marginTop: 4 }}>{a.label}</div>
                  <div style={{ fontSize: 11, color: 'var(--steel)', marginTop: 6, fontFamily: 'IBM Plex Mono' }}>{a.detail}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Two-up */}
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
            <div style={{ background: 'var(--card)', border: '1px solid var(--rule)', borderRadius: 8 }}>
              <div style={{ padding: '12px 20px', borderBottom: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontWeight: 600, fontSize: 14 }}>Floor activity</span>
                <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: 'var(--steel)' }}>last 6 h</span>
              </div>
              {[
                ['09:42', 'J-2041', 'Rodriguez · Fence gate', 'moved to Coating', 'warn'],
                ['09:28', 'J-2044', 'D&T Auto · Wheel set', 'completed Prep', 'ok'],
                ['09:05', 'J-2040', 'Summit · Railing', 'flagged rework · pinholing', 'bad'],
                ['08:51', 'J-2038', 'Heritage · Bumper', 'pulled from oven · 180 °C', 'cool'],
                ['08:20', 'J-2037', 'Parkside · Chair set', 'received at intake', 'neutral'],
              ].map((r, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '52px 70px 1fr auto',
                  gap: 14, alignItems: 'center', padding: '11px 20px',
                  borderBottom: i < 4 ? '1px solid var(--rule-soft)' : 'none',
                  fontSize: 13,
                }}>
                  <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11.5, color: 'var(--steel)' }}>{r[0]}</span>
                  <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11.5, fontWeight: 500 }}>{r[1]}</span>
                  <span style={{ color: 'var(--slate)' }}>
                    <span style={{ color: 'var(--ink)' }}>{r[2].split(' · ')[0]}</span>
                    <span style={{ color: 'var(--steel)' }}> · {r[2].split(' · ')[1]}</span>
                  </span>
                  <Chip kind={r[4]}>{r[3]}</Chip>
                </div>
              ))}
            </div>

            <div style={{ background: 'var(--card)', border: '1px solid var(--rule)', borderRadius: 8 }}>
              <div style={{ padding: '12px 20px', borderBottom: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontWeight: 600, fontSize: 14 }}>A/R aging</span>
                <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: 'var(--steel)' }}>$12,450</span>
              </div>
              <div style={{ padding: 18 }}>
                {[
                  ['Current',     8420, 'ok'],
                  ['1 – 30 d',    2100, 'cool'],
                  ['31 – 60 d',   1430, 'warn'],
                  ['60 + d',        500, 'bad'],
                ].map(([l, v, k], i) => {
                  const palette = { ok: 'var(--ok)', cool: 'var(--cool)', warn: 'var(--warn)', bad: 'var(--bad)' };
                  return (
                    <div key={i} style={{ marginBottom: 14 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 5 }}>
                        <span style={{ color: 'var(--slate)' }}>{l}</span>
                        <span style={{ fontFamily: 'IBM Plex Mono', color: 'var(--ink)', fontWeight: 500 }}>${v.toLocaleString()}</span>
                      </div>
                      <div style={{ height: 4, background: 'var(--rule-soft)', borderRadius: 0, overflow: 'hidden' }}>
                        <div style={{ height: '100%', width: `${(v / 12450) * 100}%`, background: palette[k] }} />
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}

/* =======================
   JOBS INDEX — AFTER
   ======================= */
function JobsIndexAfter() {
  const jobs = [
    ['J-2041', 'Fence gate',          'Anodized black',   'Rodriguez Metal',      'Apr 19', 'Coating',          'bad',     'High',   780, 'hot'],
    ['J-2040', 'Wheel set (4)',       'Gloss white',      'D&T Auto',             'Apr 19', 'Queued',           'cool',    'Normal', 420, ''],
    ['J-2039', 'Patio table',         'Matte black',      'Mercer Residential',   'Apr 20', 'Curing',           'ember',   'Normal', 210, ''],
    ['J-2038', 'Trailer frame',       'Zinc primer',      'Bluegrass Trailers',   'Apr 22', 'Prep',             'warn',    'Low',   1640, ''],
    ['J-2037', 'Bumper',              'Satin bronze',     'Heritage Restoration', 'Apr 22', 'Ready for pickup', 'ok',      'Normal', 340, ''],
    ['J-2036', 'Railing',             'Hammered copper',  'Summit Builders',      'Apr 23', 'Queued',           'cool',    'High',   980, ''],
  ];
  return (
    <div style={{ display: 'flex', background: 'var(--paper)' }}>
      <SidebarAfter />
      <div style={{ flex: 1, minWidth: 0 }}>
        <TopbarAfter title="Jobs" breadcrumbs={['Pipeline', 'Jobs']} />
        <div style={{ padding: '22px 28px' }}>

          {/* Single-row metric strip — no cards */}
          <div style={{
            background: 'var(--card)', border: '1px solid var(--rule)', borderRadius: 8,
            display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', marginBottom: 18,
          }}>
            <Metric label="Open" value="47" delta="+4 wk" deltaDir="up" />
            <Metric label="On floor" value="12" />
            <Metric label="Due ≤ 48 h" value="7" delta="2 hot" deltaDir="down" />
            <Metric label="Completed · Apr" value="28" delta="+11% MoM" deltaDir="up" />
            <div style={{ padding: '18px 20px' }}>
              <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--steel)', marginBottom: 8 }}>Open value</div>
              <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 26, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.01em', lineHeight: 1 }}>$18,420</div>
              <div style={{ fontSize: 11, color: 'var(--steel)', marginTop: 8, fontFamily: 'IBM Plex Mono' }}>avg $392 / job</div>
            </div>
          </div>

          {/* Toolbar */}
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            gap: 12, marginBottom: 12,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 8,
                padding: '7px 10px', background: 'var(--card)',
                border: '1px solid var(--rule)', borderRadius: 6, width: 300,
              }}>
                <i className="bi bi-search" style={{ color: 'var(--steel)', fontSize: 13 }} />
                <span style={{ fontSize: 13, color: 'var(--steel)', flex: 1 }}>Search jobs, customers, PO…</span>
                <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, padding: '1px 5px', border: '1px solid var(--rule)', borderRadius: 3, color: 'var(--steel)' }}>/</span>
              </div>
              {['All', 'Due ≤ 48h', 'On floor', 'Ready', 'Mine'].map((t, i) => (
                <button key={i} style={{
                  padding: '7px 11px', fontSize: 12.5, borderRadius: 6, cursor: 'pointer',
                  background: i === 0 ? 'var(--ink)' : 'var(--card)',
                  color: i === 0 ? 'var(--paper)' : 'var(--slate)',
                  border: `1px solid ${i === 0 ? 'var(--ink)' : 'var(--rule)'}`,
                  fontWeight: 500,
                }}>{t}</button>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={{ padding: '7px 11px', fontSize: 12.5, background: 'var(--card)', color: 'var(--slate)', border: '1px solid var(--rule)', borderRadius: 6 }}>
                <i className="bi bi-sliders" /> Filters
              </button>
              <button style={{ padding: '7px 12px', fontSize: 13, background: 'var(--ink)', color: 'var(--paper)', border: 'none', borderRadius: 6, fontWeight: 500 }}>
                <i className="bi bi-plus-lg" /> New job
              </button>
            </div>
          </div>

          {/* Table */}
          <div style={{ background: 'var(--card)', border: '1px solid var(--rule)', borderRadius: 8, overflow: 'hidden' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
              <thead>
                <tr>
                  {['Job', 'Description', 'Customer', 'Due', 'Status', 'Priority', 'Total', ''].map((h, i) => (
                    <th key={i} style={{
                      padding: '10px 16px', textAlign: i === 6 ? 'right' : 'left',
                      background: 'transparent', color: 'var(--steel)',
                      fontFamily: 'IBM Plex Mono', fontSize: 10, fontWeight: 500,
                      textTransform: 'uppercase', letterSpacing: '0.12em',
                      borderBottom: '1px solid var(--rule)',
                    }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {jobs.map((j, i) => {
                  const hot = j[9] === 'hot';
                  return (
                    <tr key={i} style={{ borderBottom: i < jobs.length - 1 ? '1px solid var(--rule-soft)' : 'none' }}>
                      <td style={{ padding: '13px 16px', fontFamily: 'IBM Plex Mono', fontWeight: 500, color: 'var(--ink)', position: 'relative' }}>
                        {hot && <span style={{ position: 'absolute', left: 0, top: 8, bottom: 8, width: 2, background: 'var(--bad)' }} />}
                        {j[0]}
                      </td>
                      <td style={{ padding: '13px 16px' }}>
                        <div style={{ color: 'var(--ink)', fontWeight: 500 }}>{j[1]}</div>
                        <div style={{ color: 'var(--steel)', fontSize: 11.5, marginTop: 1, fontFamily: 'IBM Plex Mono' }}>
                          <span style={{ display: 'inline-block', width: 6, height: 6, background: 'var(--ink)', borderRadius: 99, marginRight: 6, verticalAlign: 'middle' }} />
                          {j[2]}
                        </div>
                      </td>
                      <td style={{ padding: '13px 16px', color: 'var(--slate)' }}>{j[3]}</td>
                      <td style={{ padding: '13px 16px', fontFamily: 'IBM Plex Mono', color: hot ? 'var(--bad)' : 'var(--slate)' }}>{j[4]}</td>
                      <td style={{ padding: '13px 16px' }}><Chip kind={j[6]}>{j[5]}</Chip></td>
                      <td style={{ padding: '13px 16px', color: 'var(--slate)', fontSize: 12 }}>{j[7]}</td>
                      <td style={{ padding: '13px 16px', textAlign: 'right', fontFamily: 'IBM Plex Mono', color: 'var(--ink)' }}>${j[8].toLocaleString()}</td>
                      <td style={{ padding: '13px 16px', width: 30, color: 'var(--steel)' }}><i className="bi bi-three-dots" /></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            <div style={{
              padding: '10px 16px', borderTop: '1px solid var(--rule)',
              display: 'flex', justifyContent: 'space-between',
              fontFamily: 'IBM Plex Mono', fontSize: 11, color: 'var(--steel)',
            }}>
              <span>Showing 1 – 6 of 47</span>
              <span>↑↓ to move · ↵ to open · ⌘F to filter</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* =======================
   JOBS BOARD — AFTER
   ======================= */
function JobsBoardAfter() {
  const cols = [
    { title: 'Intake',  id: 'INTAKE',  count: 3, cards: [
      { id: 'J-2049', cust: 'Pine Ridge Metal',   desc: 'Gate hardware set', due: 'Apr 24', days: '+6', powder: 'Gloss black', parts: 12, prio: 'normal' },
      { id: 'J-2048', cust: 'Highway Fabworks',   desc: 'Railing brackets',   due: 'Apr 25', days: '+7', powder: 'Matte white', parts: 24, prio: 'low' },
      { id: 'J-2047', cust: 'Crestline Custom',   desc: 'Bumper set',         due: 'Apr 26', days: '+8', powder: 'Satin bronze', parts: 2, prio: 'normal' },
    ]},
    { title: 'Prep',    id: 'PREP',    count: 2, cards: [
      { id: 'J-2045', cust: 'Rodriguez Metal',    desc: 'Fence gate',         due: 'Apr 19', days: '+1', powder: 'Anodized black', parts: 1, prio: 'high', hot: true },
      { id: 'J-2044', cust: 'D&T Auto',           desc: 'Wheel set (4)',      due: 'Apr 19', days: '+1', powder: 'Gloss white', parts: 4, prio: 'normal' },
    ]},
    { title: 'Coating', id: 'COAT',    count: 3, cards: [
      { id: 'J-2042', cust: 'Mercer',             desc: 'Patio table',        due: 'Apr 20', days: '+2', powder: 'Matte black', parts: 1, prio: 'normal' },
      { id: 'J-2041', cust: 'Bluegrass',          desc: 'Trailer frame',      due: 'Apr 22', days: '+4', powder: 'Zinc primer', parts: 1, prio: 'low' },
      { id: 'J-2040', cust: 'Summit',             desc: 'Railing',            due: 'Apr 23', days: '+5', powder: 'Hammered copper', parts: 8, prio: 'high' },
    ]},
    { title: 'Curing',  id: 'CURE',    count: 2, meter: '180°C · 14 min', cards: [
      { id: 'J-2038', cust: 'Heritage',           desc: 'Bumper',             due: 'Apr 22', days: '+4', powder: 'Satin bronze', parts: 1, prio: 'normal' },
      { id: 'J-2037', cust: 'Parkside',           desc: 'Chair set (6)',      due: 'Apr 22', days: '+4', powder: 'Gloss red', parts: 6, prio: 'normal' },
    ]},
    { title: 'Ready',   id: 'READY',   count: 1, cards: [
      { id: 'J-2034', cust: 'Lakeside Marina',    desc: 'Railing kit',        due: 'Apr 18', days: '0', powder: 'Matte white', parts: 4, prio: 'low' },
    ]},
  ];
  const prioDot = { high: 'var(--bad)', normal: 'var(--steel)', low: 'var(--rule)' };
  return (
    <div style={{ display: 'flex', background: 'var(--paper)' }}>
      <SidebarAfter />
      <div style={{ flex: 1, minWidth: 0 }}>
        <TopbarAfter title="Daily board" breadcrumbs={['Today', 'Daily board']} />
        <div style={{ padding: '18px 24px' }}>
          {/* compact toolbar */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14, gap: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                display: 'flex', gap: 0, border: '1px solid var(--rule)', borderRadius: 6, overflow: 'hidden',
              }}>
                {['Board', 'List', 'Oven'].map((t, i) => (
                  <button key={i} style={{
                    padding: '6px 12px', fontSize: 12, fontWeight: 500, cursor: 'pointer',
                    background: i === 0 ? 'var(--ink)' : 'var(--card)',
                    color: i === 0 ? 'var(--paper)' : 'var(--slate)',
                    border: 'none', borderRight: i < 2 ? '1px solid var(--rule)' : 'none',
                  }}>{t}</button>
                ))}
              </div>
              <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: 'var(--steel)', letterSpacing: '0.05em' }}>
                11 jobs on floor · 2 hot · avg cycle 3.2 d
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={{ padding: '6px 11px', fontSize: 12, border: '1px solid var(--rule)', background: 'var(--card)', borderRadius: 6, color: 'var(--slate)' }}>Group: <b style={{ color: 'var(--ink)' }}>Stage</b> <i className="bi bi-chevron-down" style={{ fontSize: 10, marginLeft: 4 }} /></button>
              <button style={{ padding: '6px 11px', fontSize: 12, border: '1px solid var(--rule)', background: 'var(--card)', borderRadius: 6, color: 'var(--slate)' }}>Hide completed</button>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 10, overflow: 'hidden' }}>
            {cols.map((c, i) => (
              <div key={i} style={{
                width: 228, flexShrink: 0, display: 'flex', flexDirection: 'column',
                background: 'transparent',
              }}>
                {/* column header */}
                <div style={{
                  padding: '8px 10px 10px',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  borderBottom: '1px solid var(--rule)',
                  marginBottom: 8,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{
                      fontFamily: 'IBM Plex Mono', fontSize: 10.5, letterSpacing: '0.14em',
                      textTransform: 'uppercase', color: 'var(--ink)', fontWeight: 500,
                    }}>{c.id}</span>
                    <span style={{
                      fontFamily: 'IBM Plex Mono', fontSize: 10.5, color: 'var(--steel)',
                      padding: '1px 6px', border: '1px solid var(--rule)', borderRadius: 99,
                    }}>{c.count}</span>
                  </div>
                  <i className="bi bi-plus" style={{ color: 'var(--steel)', fontSize: 14 }} />
                </div>

                {c.meter && (
                  <div style={{
                    background: 'var(--ember-tint)', color: 'var(--ember-ink)',
                    padding: '6px 10px', borderRadius: 4, marginBottom: 8,
                    fontFamily: 'IBM Plex Mono', fontSize: 10.5, letterSpacing: '0.04em',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  }}>
                    <span><i className="bi bi-fire" style={{ marginRight: 6 }} />{c.meter}</span>
                    <span style={{ width: 6, height: 6, borderRadius: 99, background: 'var(--ember)', animation: 'pulse 1.5s infinite' }} />
                  </div>
                )}

                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {c.cards.map((card, j) => (
                    <div key={j} style={{
                      background: 'var(--card)', border: '1px solid var(--rule)',
                      borderRadius: 6, padding: '10px 11px',
                      position: 'relative',
                    }}>
                      {card.hot && <span style={{ position: 'absolute', left: -1, top: -1, bottom: -1, width: 2, background: 'var(--bad)', borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }} />}
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                        <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, fontWeight: 500, color: 'var(--ink)' }}>{card.id}</span>
                        <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 10.5, color: card.hot ? 'var(--bad)' : 'var(--steel)' }}>{card.due} <span style={{ opacity: 0.5 }}>({card.days}d)</span></span>
                      </div>
                      <div style={{ fontSize: 12.5, color: 'var(--ink)', fontWeight: 500, marginBottom: 2, lineHeight: 1.3 }}>{card.desc}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--slate)', marginBottom: 8 }}>{card.cust}</div>
                      <div style={{
                        display: 'flex', alignItems: 'center', gap: 8,
                        paddingTop: 7, borderTop: '1px solid var(--rule-soft)',
                        fontFamily: 'IBM Plex Mono', fontSize: 10.5, color: 'var(--steel)',
                      }}>
                        <span style={{
                          width: 9, height: 9, borderRadius: 2,
                          background: powderSwatch(card.powder), border: '1px solid rgba(0,0,0,0.12)',
                        }} />
                        <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--slate)' }}>{card.powder}</span>
                        <span>{card.parts}p</span>
                        <span style={{ width: 6, height: 6, borderRadius: 99, background: prioDot[card.prio] }} />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }`}</style>
    </div>
  );
}

function powderSwatch(name) {
  const m = {
    'Gloss black': '#111',
    'Matte white': '#f3f1eb',
    'Satin bronze': '#8c6a3d',
    'Anodized black': '#1a1a1c',
    'Gloss white': '#ffffff',
    'Matte black': '#222',
    'Zinc primer': '#9aa0a6',
    'Hammered copper': '#b87333',
    'Gloss red': '#b91c1c',
  };
  return m[name] || '#777';
}

Object.assign(window, { DashboardAfter, JobsIndexAfter, JobsBoardAfter, Chip, Metric });