// MOTIONS PLATFORM — shared tokens (plum / royal purple accent)
const Tmn = window.ArbiterTokens;

const mn = {
  // Accent — plum / gravitas purple
  plum: '#7E22CE',
  plumDeep: '#6B21A8',
  plumLight: '#A855F7',
  plumBg: 'rgba(126,34,206,0.06)',
  plumBorder: 'rgba(126,34,206,0.22)',
  // Palette
  slate: '#475569',
  slateBg: 'rgba(71,85,105,0.06)',
  amber: '#B45309',
  amberBg: 'rgba(180,83,9,0.08)',
  orange: '#EA580C',
  orangeBg: 'rgba(234,88,12,0.08)',
  crimson: '#B91C1C',
  crimsonBg: 'rgba(185,28,28,0.06)',
  emerald: '#059669',
  emeraldBg: 'rgba(5,150,105,0.08)',
  teal: '#0D9488',
  tealBg: 'rgba(13,148,136,0.06)',
  cobalt: '#1D4ED8',
  cobaltBg: 'rgba(29,78,216,0.06)',
  violet: '#7C3AED',
  violetBg: 'rgba(124,58,237,0.06)',

  container: { flex: 1, overflow: 'auto', background: Tmn.color.bg.primary, containerType: 'inline-size' },
  header: {
    padding: 'clamp(12px, 1.4vw, 18px) clamp(16px, 2vw, 28px)',
    borderBottom: `1px solid ${Tmn.color.border.light}`,
    background: Tmn.color.bg.card,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    gap: '16px', flexWrap: 'wrap', rowGap: '10px',
  },
  headerTitle: { display: 'flex', alignItems: 'center', gap: '12px', minWidth: 0, flex: '1 1 320px' },
  headerActions: {
    display: 'flex', alignItems: 'center', gap: '10px',
    flexWrap: 'wrap', justifyContent: 'flex-end', rowGap: '8px',
  },
  mnIcon: {
    width: '32px', height: '32px', borderRadius: '6px',
    background: 'linear-gradient(135deg, #7E22CE 0%, #6B21A8 100%)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontSize: '16px', fontWeight: 700, color: '#fff', flexShrink: 0,
  },
  title: { fontSize: 'clamp(15px, 1.1vw + 8px, 20px)', fontWeight: 700, color: Tmn.color.text.primary, letterSpacing: '-0.02em' },
  subtitle: { fontSize: 'clamp(10.5px, 0.35vw + 10px, 13px)', color: Tmn.color.text.tertiary, marginTop: '1px', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' },
  tabs: {
    display: 'flex', gap: '0', borderBottom: `1px solid ${Tmn.color.border.light}`,
    background: Tmn.color.bg.card, padding: '0 clamp(12px, 1.8vw, 28px)',
    overflowX: 'auto', scrollbarWidth: 'thin',
  },
  tab: {
    padding: '10px clamp(10px, 1vw, 18px)', fontSize: 'clamp(11px, 0.35vw + 10px, 13px)', fontWeight: 500,
    color: Tmn.color.text.tertiary, cursor: 'pointer', border: 'none', background: 'none',
    borderBottom: '2px solid transparent', fontFamily: Tmn.font.family,
    transition: 'all 0.15s', marginBottom: '-1px', whiteSpace: 'nowrap', flexShrink: 0,
  },
  tabActive: { color: '#7E22CE', borderBottom: '2px solid #7E22CE', fontWeight: 600 },
  body: {
    padding: 'clamp(14px, 1.3vw, 24px) clamp(16px, 2vw, 28px)',
    maxWidth: 'min(100%, 1760px)', marginInline: 'auto', boxSizing: 'border-box',
  },

  card: { background: Tmn.color.bg.card, border: `1px solid ${Tmn.color.border.light}`, borderRadius: Tmn.radius.lg, overflow: 'hidden', marginBottom: '16px' },
  cardH: { padding: '10px 16px', borderBottom: `1px solid ${Tmn.color.border.light}`, fontSize: '12px', fontWeight: 600, color: Tmn.color.text.primary, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '10px', flexWrap: 'wrap', rowGap: '6px' },

  stat: { display: 'flex', flexDirection: 'column', gap: '2px', padding: 'clamp(10px, 0.7vw + 6px, 14px) clamp(12px, 0.9vw + 8px, 18px)', background: Tmn.color.bg.secondary, borderRadius: '6px', border: `1px solid ${Tmn.color.border.light}`, minWidth: 0 },
  statLabel: { fontSize: '10px', fontWeight: 600, color: Tmn.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
  statValue: { fontSize: 'clamp(17px, 0.9vw + 12px, 24px)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.1, color: Tmn.color.text.primary },
  statDelta: { fontSize: '10px', fontWeight: 500, marginTop: '2px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },

  // Dynamic grid helpers — use in place of `repeat(N, 1fr)` so layouts reflow.
  stripAuto: (minPx) => ({
    display: 'grid',
    gridTemplateColumns: `repeat(auto-fit, minmax(min(${minPx}px, 100%), 1fr))`,
    gap: 'clamp(8px, 0.6vw + 6px, 14px)',
    marginBottom: 'clamp(12px, 1vw + 6px, 18px)',
  }),
  stripKpi: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(min(170px, 100%), 1fr))',
    gap: 'clamp(8px, 0.6vw + 6px, 14px)',
    marginBottom: 'clamp(12px, 1vw + 6px, 18px)',
  },
  cardGrid: (minPx = 380) => ({
    display: 'grid',
    gridTemplateColumns: `repeat(auto-fill, minmax(min(${minPx}px, 100%), 1fr))`,
    gap: 'clamp(10px, 0.8vw + 6px, 16px)',
  }),
  split: (minPx = 320) => ({
    display: 'grid',
    gridTemplateColumns: `repeat(auto-fit, minmax(min(${minPx}px, 100%), 1fr))`,
    gap: 'clamp(10px, 0.8vw + 6px, 16px)',
  }),
  // Horizontal scroll wrapper for wide tables. Prevents layout-blowout on narrow screens.
  tableWrap: { width: '100%', overflowX: 'auto', WebkitOverflowScrolling: 'touch' },
  tableFixed: { width: '100%', borderCollapse: 'collapse', minWidth: '720px' },

  tag: { display: 'inline-flex', alignItems: 'center', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 600 },
  pill: { display: 'inline-flex', alignItems: 'center', padding: '3px 10px', borderRadius: '12px', fontSize: '11px', fontWeight: 500, gap: '4px' },

  th: { fontSize: '10px', fontWeight: 600, color: Tmn.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '8px 12px', textAlign: 'left', background: Tmn.color.bg.secondary, borderBottom: `1px solid ${Tmn.color.border.light}` },
  td: { fontSize: '12px', color: Tmn.color.text.primary, padding: '10px 12px', borderBottom: `1px solid ${Tmn.color.border.light}`, verticalAlign: 'middle' },

  btnPrimary: { padding: '6px 14px', borderRadius: '6px', background: '#7E22CE', border: 'none', color: '#fff', fontSize: '12px', fontWeight: 700, cursor: 'pointer', fontFamily: Tmn.font.family },
  btnSecondary: { padding: '5px 12px', borderRadius: '6px', border: `1px solid ${Tmn.color.border.light}`, background: Tmn.color.bg.card, fontSize: '11px', fontWeight: 500, color: Tmn.color.text.secondary, cursor: 'pointer', fontFamily: Tmn.font.family },
  btnGhost: { padding: '4px 10px', borderRadius: '5px', border: 'none', background: 'transparent', fontSize: '11px', fontWeight: 500, color: '#7E22CE', cursor: 'pointer', fontFamily: Tmn.font.family },

  // Motion status
  statusColor: (s) => {
    const map = {
      'Drafting':          { bg: 'rgba(71,85,105,0.08)',  color: '#475569' },
      'Partner Review':    { bg: 'rgba(124,58,237,0.08)', color: '#7C3AED' },
      'Client Review':     { bg: 'rgba(180,83,9,0.08)',   color: '#B45309' },
      'Filed':             { bg: 'rgba(29,78,216,0.08)',  color: '#1D4ED8' },
      'Opposition Pending':{ bg: 'rgba(234,88,12,0.08)',  color: '#EA580C' },
      'Fully Briefed':     { bg: 'rgba(126,34,206,0.08)', color: '#7E22CE' },
      'Awaiting Argument': { bg: 'rgba(126,34,206,0.08)', color: '#7E22CE' },
      'Under Submission':  { bg: 'rgba(126,34,206,0.08)', color: '#7E22CE' },
      'Granted':           { bg: 'rgba(5,150,105,0.08)',  color: '#059669' },
      'Granted in Part':   { bg: 'rgba(13,148,136,0.08)', color: '#0D9488' },
      'Denied':            { bg: 'rgba(185,28,28,0.08)',  color: '#B91C1C' },
      'Moot':              { bg: Tmn.color.bg.secondary, color: Tmn.color.text.tertiary },
      'Withdrawn':         { bg: Tmn.color.bg.secondary, color: Tmn.color.text.tertiary },
    };
    return map[s] || { bg: Tmn.color.bg.secondary, color: Tmn.color.text.secondary };
  },

  // Motion type icon + color
  typeStyle: (t) => {
    if (t.includes('Dismiss') || t.includes('MTD')) return { bg: 'rgba(185,28,28,0.08)', color: '#B91C1C', icon: 'x' };
    if (t.includes('Summary Judgment') || t.includes('MSJ')) return { bg: 'rgba(126,34,206,0.08)', color: '#7E22CE', icon: '•' };
    if (t.includes('Compel')) return { bg: 'rgba(180,83,9,0.08)', color: '#B45309', icon: '▶' };
    if (t.includes('Suppress')) return { bg: 'rgba(185,28,28,0.08)', color: '#B91C1C', icon: '⊘' };
    if (t.includes('Daubert') || t.includes('Expert')) return { bg: 'rgba(13,148,136,0.08)', color: '#0D9488', icon: '◇' };
    if (t.includes('Limine')) return { bg: 'rgba(234,88,12,0.08)', color: '#EA580C', icon: '◼' };
    if (t.includes('Sever') || t.includes('Class')) return { bg: 'rgba(29,78,216,0.08)', color: '#1D4ED8', icon: 'cmd' };
    if (t.includes('Reconsider') || t.includes('Rehearing')) return { bg: 'rgba(124,58,237,0.08)', color: '#7C3AED', icon: '↻' };
    if (t.includes('Protective')) return { bg: 'rgba(13,148,136,0.08)', color: '#0D9488', icon: '●' };
    if (t.includes('Sanctions')) return { bg: 'rgba(185,28,28,0.08)', color: '#B91C1C', icon: '!' };
    if (t.includes('Appeal')) return { bg: 'rgba(126,34,206,0.08)', color: '#7E22CE', icon: '↗' };
    return { bg: Tmn.color.bg.secondary, color: Tmn.color.text.secondary, icon: '◆' };
  },

  // Judge tendency color (based on grant rate %)
  tendencyColor: (pct) => {
    if (pct >= 65) return '#059669';       // pro-movant
    if (pct >= 45) return '#B45309';       // mixed
    return '#B91C1C';                       // pro-respondent
  },

  // Win-rate color
  winColor: (pct) => {
    if (pct >= 70) return '#059669';
    if (pct >= 55) return '#7E22CE';
    if (pct >= 40) return '#B45309';
    return '#B91C1C';
  },

  num: (n) => n == null ? '—' : n.toLocaleString(),
  money: (n) => {
    if (n == null) return '—';
    const abs = Math.abs(n);
    if (abs >= 1_000_000) return `$${(n / 1_000_000).toFixed(2)}M`;
    if (abs >= 1_000) return `$${(n / 1_000).toFixed(0)}K`;
    return `$${n.toFixed(0)}`;
  },
};

window.__mn = mn;