/* Flow-OS — Overview rebuilt to match the bold credit-score reference */
const { useState: useS, useEffect: useE, useRef: useR } = React;

// Per-department recommended-action counts (drives the Flow Score CTA)
const DEPT_ACTIONS = {
  all: 6,
  product: 4,
  'eng-be': 3,
  'eng-fe': 2,
  design: 2,
  sales: 5,
  ops: 3,
  people: 1
};

// Per-bureau metric data — base values (used as default for "all" + "today")
const BUREAUS = {
  flow:     { l: 'Flow Score',  value: 51, delta: -4, unit: '/ 100',     caption: 'FLOW SCORE GLOBAL', cta: 'Ver 6 acciones recomendadas' },
  recovery: { l: 'Recovery',    value: 58, delta: -7, unit: '/ 100',     caption: 'RECOVERY MEDIO',     cta: 'Ver protocolo de recuperación' },
  sleep:    { l: 'Sueño',       value: 72, delta: +3, unit: '/ 100',     caption: 'CALIDAD SUEÑO',      cta: 'Ver patrones por equipo' },
  hrv:      { l: 'HRV',         value: 48, delta: -6, unit: 'ms',        caption: 'HRV COLECTIVO',      cta: 'Ver tendencia 30 días' }
};

// Per-department offsets vs the global baseline (Flow / Recovery / Sleep / HRV).
// Positive = better than global. Sleep stored as minutes-of-sleep offset (gauge uses base + offset).
const DEPT_OFFSETS = {
  all:       { flow:   0, recovery:   0, sleep:   0, hrv:   0, sleepMin:    0 },
  product:   { flow: -10, recovery:  -8, sleep:  -7, hrv:  -8, sleepMin:  -42 },
  'eng-be':  { flow:  -3, recovery:  -2, sleep:  -3, hrv:  -2, sleepMin:  -18 },
  'eng-fe':  { flow:  +4, recovery:  +5, sleep:  +4, hrv:  +5, sleepMin:  +22 },
  design:    { flow:  +6, recovery:  +7, sleep:  +6, hrv:  +6, sleepMin:  +28 },
  sales:     { flow:  -7, recovery:  -5, sleep:  -4, hrv:  -6, sleepMin:  -26 },
  ops:       { flow:  -2, recovery:  -1, sleep:  -2, hrv:  -1, sleepMin:  -12 },
  people:    { flow:  +8, recovery:  +9, sleep:  +5, hrv:  +7, sleepMin:  +24 }
};

// Per-time-range multiplier on the delta + slight offset on value
const TIME_MOD = {
  today:    { vAdj:   0, dMul: 1.0 },
  week:     { vAdj:  -1, dMul: 1.0 },
  month:    { vAdj:  -3, dMul: 1.4 },
  quarter:  { vAdj:  -5, dMul: 1.8 }
};

function clampInt(n, lo = 0, hi = 100) { return Math.max(lo, Math.min(hi, Math.round(n))); }

// Resolve gauge metrics for current bureau + dept + time
function resolveMetric(bureau, deptId, timeId) {
  const base = BUREAUS[bureau];
  const off = (DEPT_OFFSETS[deptId] || DEPT_OFFSETS.all);
  const tm = TIME_MOD[timeId] || TIME_MOD.today;
  if (bureau === 'hrv') {
    const value = clampInt(base.value + off.hrv + tm.vAdj, 20, 80);
    const delta = Math.round(base.delta * tm.dMul);
    return { value, delta, sleepStr: null };
  }
  if (bureau === 'sleep') {
    const value = clampInt(base.value + off.sleep + tm.vAdj, 30, 99);
    const delta = Math.round(base.delta * tm.dMul);
    // Compute sleep duration string: base 7h00 + sleepMin offset + time offset
    const baseMin = 7 * 60 + 0;
    const totalMin = baseMin + off.sleepMin + (tm.vAdj * 4);
    const h = Math.floor(totalMin / 60);
    const m = ((totalMin % 60) + 60) % 60;
    const sleepStr = `${h}h${String(m).padStart(2, '0')}`;
    return { value, delta, sleepStr };
  }
  // flow / recovery
  const key = bureau === 'recovery' ? 'recovery' : 'flow';
  const value = clampInt(base.value + off[key] + tm.vAdj, 10, 99);
  const delta = Math.round(base.delta * tm.dMul);
  return { value, delta, sleepStr: null };
}

// Smoothly animate a number from `from` to `to` with easing
function useAnimatedNumber(target, ms = 700) {
  const [val, setVal] = useS(target);
  const fromRef = useR(target);
  const startRef = useR(performance.now());
  useE(() => {
    fromRef.current = val;
    startRef.current = performance.now();
    let raf;
    const tick = (now) => {
      const t = Math.min(1, (now - startRef.current) / ms);
      // easeOutQuart for elegant settle
      const eased = 1 - Math.pow(1 - t, 4);
      setVal(fromRef.current + (target - fromRef.current) * eased);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  // eslint-disable-next-line
  }, [target]);
  return val;
}

function OverviewPage() {
  const route = useRoute();
  const [bureau, setBureau] = useS('flow');
  const [isMob, setIsMob] = useS(typeof window !== 'undefined' && window.innerWidth <= 640);
  useE(() => {
    const onR = () => setIsMob(window.innerWidth <= 640);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);
  const [deptFilter, setDeptFilter] = useS('all');
  const [deptOpen, setDeptOpen] = useS(false);
  const [timeRange, setTimeRange] = useS(() => (typeof window !== 'undefined' && window.__sharedTimeRange) || 'week');
  const [timeOpen, setTimeOpen] = useS(false);

  // Sync timeRange globally so the mobile drawer can read/write it
  useE(() => {
    window.__sharedTimeRange = timeRange;
    window.__setSharedTimeRange = setTimeRange;
    const handler = (e) => setTimeRange(e.detail);
    window.addEventListener('shared-time-range-change', handler);
    return () => window.removeEventListener('shared-time-range-change', handler);
  }, [timeRange]);
  const bureauRef = useR(null);
  const [bureauW, setBureauW] = useS(null);
  useE(() => {
    if (!isMob) { setBureauW(null); return; }
    const measure = () => { if (bureauRef.current) setBureauW(bureauRef.current.offsetWidth); };
    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, [isMob]);
  const data = BUREAUS[bureau];
  const resolved = resolveMetric(bureau, deptFilter, timeRange);
  const flowGlobal = resolved.value;
  const delta = resolved.delta;

  return (
    <div style={{
      position: 'relative',
      minHeight: 'calc(100vh - 81px)',
      padding: '30px 48px 80px',
      background: isMob ? `
        radial-gradient(900px 380px at 80% 8%, rgba(79,214,147,0.18), transparent 55%),
        radial-gradient(900px 500px at 20% 75%, rgba(245,230,184,0.35), transparent 60%),
        var(--bg)
      ` : `
        radial-gradient(900px 380px at 80% 8%, rgba(79,214,147,0.18), transparent 55%),
        radial-gradient(900px 500px at 20% 60%, rgba(245,230,184,0.35), transparent 60%),
        var(--bg)
      `,
      overflow: 'hidden'
    }}>
      {/* Massive headline */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
        <div style={{ display: 'flex', flex: isMob ? 1 : '0 0 auto' }}>
          {!isMob && (
            <TimeRangeDropdown
              value={timeRange}
              onChange={setTimeRange}
              open={timeOpen}
              setOpen={setTimeOpen}
            />
          )}
        </div>
        <div style={{ display: 'flex' }}>
          {!isMob && !route.aiOpen && (
            <button onClick={() => route.toggleAi()} style={{
              padding: '10px 16px', borderRadius: 999, border: '1px solid var(--line)',
              background: 'var(--bg-card)', fontSize: 13, cursor: 'pointer',
              display: 'flex', alignItems: 'center', gap: 8,
              height: 38, boxSizing: 'border-box'
            }}>
              <span style={{ width: 18, height: 18, borderRadius: 5, overflow: 'hidden', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <img src="assets/mihai-chat-icon.png" alt="" width="18" height="18" style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }}/>
              </span>
              Pregunta a Mihai
            </button>
          )}
        </div>
      </div>
      {/* Bureau-style segmented selector (like TransUnion/Equifax/Experian) */}
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: isMob ? -8 : 12, marginBottom: 24 }}>
        <div ref={bureauRef} style={{ display: 'flex', gap: 10, padding: 6, background: 'rgba(255,255,255,0.5)', backdropFilter: 'blur(10px)', borderRadius: 999, border: '1px solid rgba(255,255,255,0.6)' }}>
          {[
            { id: 'flow', l: isMob ? 'Flow' : 'Flow Score' },
            { id: 'recovery', l: 'Recovery' },
            { id: 'sleep', l: 'Sueño' },
            { id: 'hrv', l: 'HRV' }
          ].map(b => {
            const active = bureau === b.id;
            return (
              <button key={b.id} onClick={() => setBureau(b.id)} style={{
                padding: '10px 22px', borderRadius: 999, border: 'none',
                background: active ? '#fff' : 'transparent',
                color: active ? 'var(--ink)' : 'var(--ink-3)',
                fontSize: 14, fontWeight: active ? 500 : 400, cursor: 'pointer',
                boxShadow: active ? '0 4px 14px rgba(0,0,0,0.06)' : 'none', fontFamily: 'var(--sans)'
              }}>{b.l}</button>
            );
          })}
        </div>
      </div>

      {/* HERO GAUGE — big and bold */}
      <div style={{ display: 'flex', justifyContent: 'center', position: 'relative', paddingTop: isMob ? 35 : 0, marginTop: 0, marginBottom: isMob ? 60 : 8 }}>
        <BigTickGauge value={flowGlobal} delta={delta} unit={data.unit} caption={buildCaption(bureau, deptFilter)} metric={bureau} subValue={bureau === 'sleep' ? resolved.sleepStr : null} subColor="var(--red)" />
      </div>

      {/* Big black pill action + dept filter */}
      <div style={{ display: 'flex', flexDirection: isMob ? 'column' : 'row', alignItems: 'center', justifyContent: 'center', gap: 12, marginTop: isMob ? 40 : -20, marginBottom: 28 }}>
        {!isMob && (
          <DeptFilterDropdown
            value={deptFilter}
            onChange={setDeptFilter}
            open={deptOpen}
            setOpen={setDeptOpen}
          />
        )}
        {isMob && (
          <div style={{ width: bureauW || 'auto', maxWidth: '100%', boxSizing: 'border-box' }}>
            <TimeRangeDropdown
              value={timeRange}
              onChange={setTimeRange}
              open={timeOpen}
              setOpen={setTimeOpen}
              isMob={true}
            />
          </div>
        )}
        {isMob && (
          <div style={{ width: bureauW || 'auto', maxWidth: '100%', boxSizing: 'border-box' }}>
            <DeptFilterDropdown
              value={deptFilter}
              onChange={setDeptFilter}
              open={deptOpen}
              setOpen={setDeptOpen}
              isMob={true}
            />
          </div>
        )}
        {isMob ? (
          <div style={{ width: bureauW || 'auto', maxWidth: '100%', boxSizing: 'border-box' }}>
            <button onClick={() => {
              if (deptFilter && deptFilter !== 'all') route.goDept(deptFilter);
              else route.go('recommendations');
            }} style={{
              padding: '14px 16px', borderRadius: 14, border: 'none',
              background: 'var(--ink)', color: '#fff', fontSize: 13.3, fontWeight: 500,
              cursor: 'pointer', fontFamily: 'var(--sans)',
              boxShadow: '0 8px 22px rgba(0,0,0,0.18)',
              display: 'flex', alignItems: 'center', gap: 9,
              width: '100%', justifyContent: 'center', boxSizing: 'border-box'
            }}>
              {bureau === 'flow' ? `Ver ${DEPT_ACTIONS[deptFilter] ?? 6} acciones recomendadas` : data.cta}
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, opacity: 0.6 }}>→</span>
            </button>
          </div>
        ) : (
          <button onClick={() => {
            if (deptFilter && deptFilter !== 'all') route.goDept(deptFilter);
            else route.go('recommendations');
          }} style={{
            padding: '13px 32px', borderRadius: 999, border: 'none',
            background: 'var(--ink)', color: '#fff', fontSize: 13.3, fontWeight: 500,
            cursor: 'pointer', fontFamily: 'var(--sans)',
            boxShadow: '0 8px 22px rgba(0,0,0,0.18)',
            display: 'flex', alignItems: 'center', gap: 9, justifyContent: 'center'
          }}>
            {bureau === 'flow' ? `Ver ${DEPT_ACTIONS[deptFilter] ?? 6} acciones recomendadas` : data.cta}
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, opacity: 0.6 }}>→</span>
          </button>
        )}
      </div>

      {/* Mobile: date selector moved to drawer (main menu) */}

      {/* Cards grid below — 2x2, large like the reference */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, maxWidth: 1100, margin: '0 auto 16px' }}>
        <BigCategoryCard
          team={TEAMS.find(t => t.id === 'product')}
          title="Producto · Madrid"
          metric="41"
          metricLabel="Flow Score"
          impact="Riesgo alto"
          impactColor="var(--red)"
          desc="10 días con degradación sostenida. Recovery medio 58, sueño −1h 18m."
          onClick={() => route.goDept('product')}
        />
        <BigCategoryCard
          team={TEAMS.find(t => t.id === 'eng-be')}
          title="Engineering · Backend"
          metric="78"
          metricLabel="Flow Score"
          impact="Óptimo"
          impactColor="var(--green)"
          desc="Condiciones ideales para sprint intensivo. Ventana ideal: jue 9–13h."
          onClick={() => route.goDept('eng-be')}
        />
        <BigCategoryCard
          team={TEAMS.find(t => t.id === 'sales')}
          title="Ventas · EMEA"
          metric="54"
          metricLabel="Flow Score"
          impact="Aviso"
          impactColor="var(--amber)"
          desc="6 días con Recovery bajo tras lanzamiento Q2. Picos de estrés mar/jue."
          onClick={() => route.goDept('sales')}
        />
        <BigCategoryCard
          team={TEAMS.find(t => t.id === 'cs')}
          title="Customer Success"
          metric="59"
          metricLabel="Flow Score"
          impact="Aviso"
          impactColor="var(--amber)"
          desc="HRV colectivo bajando 8% en 7 días. Sueño −22 min vs media."
          onClick={() => route.goDept('cs')}
        />
      </div>

      {/* Bottom stripe: heatmap link + privacy */}
      <div className="ov-bottom-stripe" style={{ maxWidth: 1100, margin: '32px auto 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div onClick={() => route.go('departments')} style={{
          padding: '22px 26px', background: 'var(--bg-card)', border: '1px solid var(--line)', borderRadius: 22, cursor: 'pointer',
          display: 'flex', flexDirection: isMob ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMob ? 'stretch' : 'center', gap: isMob ? 14 : 0,
          transition: 'transform 0.15s, box-shadow 0.15s'
        }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 14px 36px rgba(0,0,0,0.08)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
        >
          <div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 22, display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                width: 34, height: 34, borderRadius: '50%',
                background: 'var(--bg)', border: '1px solid var(--line)', flex: '0 0 auto'
              }}>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="3.5" y1="10.5" x2="10.5" y2="3.5" />
                  <polyline points="4.5 3.5 10.5 3.5 10.5 9.5" />
                </svg>
              </span>
              Ver equipos
            </div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 9, marginTop: 4 }}>
              ÚLTIMOS 40 DÍAS
              <span style={{ fontFamily: 'var(--mono)', fontSize: 14, opacity: 0.6 }}>{isMob ? '↓' : '→'}</span>
            </div>
          </div>
          <MiniHeatmap isMob={isMob} />
        </div>
        <AddMemberCard />
      </div>

      {/* Footer · sync metadata */}
      <div className="ov-footer-sync" style={{
        maxWidth: 1100, margin: '40px auto 0',
        paddingTop: 22, borderTop: '1px solid var(--line)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 12
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            display: 'inline-block', width: 7, height: 7, minWidth: 7, minHeight: 7, flex: '0 0 7px', borderRadius: '50%',
            background: 'var(--green)', boxShadow: '0 0 0 4px rgba(46,166,106,0.18)'
          }}></span>
          <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>
            SYNC HACE 4 MIN · 138 PERSONAS · 82% OPT-IN
          </span>
        </div>
        <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.12em' }}>
          FLOW-OS · NEUROTROPY · 03 MAY 2026
        </span>
      </div>
    </div>
  );
}

// Emoji-style status indicator
function SemEmoji({ value }) {
  const c = statusColor(value);
  const face = value >= 70 ? '😀' : value >= 55 ? '😐' : '😣';
  return (
    <span style={{
      display: 'inline-flex', width: 64, height: 64, borderRadius: '50%',
      background: c.soft || (value >= 70 ? 'var(--green-soft)' : value >= 55 ? 'var(--amber-soft)' : 'var(--red-soft)'),
      alignItems: 'center', justifyContent: 'center', fontSize: 38,
      verticalAlign: 'middle', marginLeft: 8
    }}>{face}</span>
  );
}

// =============== BIG TICK GAUGE (the reference look) ===============
function buildCaption(bureau, deptFilter) {
  // Caption prefix per bureau
  const prefix = {
    flow:     'FLOW SCORE',
    recovery: 'RECOVERY',
    sleep:    'SUEÑO',
    hrv:      'HRV'
  }[bureau] || 'FLOW SCORE';
  // Suffix is "GLOBAL" / "MEDIO" / "MEDIO" / "COLECTIVO" for "all", or the dept name otherwise
  if (!deptFilter || deptFilter === 'all') {
    const allSuffix = {
      flow:     'GLOBAL',
      recovery: 'MEDIO',
      sleep:    'CALIDAD',
      hrv:      'COLECTIVO'
    }[bureau] || 'GLOBAL';
    return `${prefix} ${allSuffix}`;
  }
  const dept = (DEPT_OPTIONS.find(d => d.id === deptFilter) || {}).l || '';
  return dept.toUpperCase();
}

function BigTickGauge({ value, delta, unit = '/ 100', caption = 'FLOW SCORE GLOBAL', metric = 'flow', subValue = null, subColor = 'var(--red)' }) {
  // Detect mobile so we can simplify the gauge (fewer ticks, longer)
  const [isMob, setIsMob] = useS(typeof window !== 'undefined' && window.innerWidth <= 640);
  useE(() => {
    const onR = () => setIsMob(window.innerWidth <= 640);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);

  const W = 760, H = 400;
  const cx = W / 2, cy = H * 0.78;
  const r = 280;
  const ticks = isMob ? 45 : 90;       // half count on mobile
  const tickInset = isMob ? 44 : 22;   // 2× longer on mobile (inner edge moves further inside)
  const tickInactiveCut = isMob ? 22 : 11;
  const startA = 180, endA = 360;

  // Animate the displayed value smoothly when `value` changes
  const animVal = useAnimatedNumber(value, 850);
  const animDelta = useAnimatedNumber(delta, 850);
  const displayValue = Math.round(animVal);
  const displayDelta = Math.round(animDelta);
  const valuePct = animVal / 100;
  const c = statusColor(displayValue, metric === 'flow');

  // Subtle key for fade-on-change
  const [pulseKey, setPulseKey] = useS(0);
  useE(() => { setPulseKey(k => k + 1); }, [value]);

  function colorAt(t) {
    if (metric === 'flow') {
      // Flow Score: very light green → very dark green (high contrast)
      return mix('#d4f0dc', '#0d4a2a', t);
    }
    // Recovery / Sueño / HRV: red → amber → green (semaphore)
    if (t < 0.4) {
      const k = t / 0.4;
      return mix('#e1473d', '#e8b53a', k);
    } else if (t < 0.7) {
      const k = (t - 0.4) / 0.3;
      return mix('#e8b53a', '#4fd693', k);
    } else {
      const k = (t - 0.7) / 0.3;
      return mix('#4fd693', '#2ea66a', k);
    }
  }
  function mix(a, b, t) {
    const ah = a.replace('#', ''), bh = b.replace('#', '');
    const ar = parseInt(ah.slice(0, 2), 16), ag = parseInt(ah.slice(2, 4), 16), ab = parseInt(ah.slice(4, 6), 16);
    const br = parseInt(bh.slice(0, 2), 16), bg = parseInt(bh.slice(2, 4), 16), bb = parseInt(bh.slice(4, 6), 16);
    return `rgb(${Math.round(ar + (br - ar) * t)},${Math.round(ag + (bg - ag) * t)},${Math.round(ab + (bb - ab) * t)})`;
  }
  // Convert "rgb(r,g,b)" → "rgba(r,g,b,a)"
  function rgba(rgb, a) {
    return rgb.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${a})`);
  }

  const tickEls = [];
  for (let i = 0; i < ticks; i++) {
    const t = i / (ticks - 1);
    const a = startA + (endA - startA) * t;
    const rad = (a * Math.PI) / 180;
    const isActive = t <= valuePct + 0.001;
    const color = colorAt(t);
    const innerR = r - tickInset;
    const outerR = isActive ? r : r - tickInactiveCut;
    const x1 = cx + Math.cos(rad) * innerR;
    const y1 = cy + Math.sin(rad) * innerR;
    const x2 = cx + Math.cos(rad) * outerR;
    const y2 = cy + Math.sin(rad) * outerR;
    tickEls.push(
      <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
        className="gauge-tick"
        stroke={color}
        strokeOpacity={isActive ? 1 : 0.32}
        strokeWidth={2.2} strokeLinecap="round" />
    );
  }

  // Inner dots row — flow metric only. Sit ~10px inside the active bars' inner edge,
  // count scaled to keep ~the same physical spacing as the bars on the bigger arc.
  const dotEls = [];
  if (metric === 'flow') {
    const barInnerR = r - tickInset;
    const dotR = barInnerR - (isMob ? 13 : 10);
    const dotCount = Math.round(ticks * (dotR / r)); // proportional to arc length, scales with tick count
    const filledCount = Math.round(dotCount * 0.06);
    for (let i = 0; i < dotCount; i++) {
      const t = i / (dotCount - 1);
      const a = startA + (endA - startA) * t;
      const rad = (a * Math.PI) / 180;
      const dx = cx + Math.cos(rad) * dotR;
      const dy = cy + Math.sin(rad) * dotR;
      const filled = i < filledCount;
      dotEls.push(
        <circle key={`d-${i}`} cx={dx} cy={dy} r={2.625}
          fill={filled ? '#7c5fd1' : 'rgba(0,0,0,0.07)'} />
      );
    }
  }

  // Pointer (delta indicator)
  const ptA = startA + (endA - startA) * valuePct;
  const ptRad = (ptA * Math.PI) / 180;
  const ptX = cx + Math.cos(ptRad) * (r + 24);
  const ptY = cy + Math.sin(ptRad) * (r + 24);

  // Labels along arc
  const labels = metric === 'flow'
    ? [
        { v: 0, t: 0 },
        { v: 25, t: 0.25 },
        { v: 75, t: 0.75 },
        { v: 100, t: 1 }
      ]
    : [
        { v: 0, t: 0 },
        { v: 25, t: 0.25 },
        { v: 75, t: 0.75 },
        { v: 100, t: 1 }
      ];

  // On mobile, scale down the whole gauge so all overlays stay positioned correctly.
  // Then bump it 10% extra per design.
  const baseScale = isMob ? Math.min(1, (typeof window !== 'undefined' ? window.innerWidth - 32 : 360) / W) : 1;
  const scale = isMob ? baseScale * 1.10 : 1;

  return (
    <div style={{ width: W * baseScale, height: H * baseScale, position: 'relative', overflow: 'visible' }}>
      <div style={{ position: 'relative', width: W, height: H, transform: `scale(${scale})`, transformOrigin: 'top center', left: '50%', marginLeft: -W / 2 }}>
      <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} style={{ display: 'block' }}>
        {tickEls}
        {dotEls}
        {labels.map(l => {
          const a = startA + (endA - startA) * l.t;
          const rad = (a * Math.PI) / 180;
          // Give right-side labels (last tick) the same visual gap as the left-side "0".
          const radial = r + 22 + (l.t > 0.85 ? 8 : 0);
          const lx = cx + Math.cos(rad) * radial;
          const ly = cy + Math.sin(rad) * radial;
          return (
            <text key={l.v} x={lx} y={ly + 4}
              textAnchor={l.t < 0.15 ? 'start' : l.t > 0.85 ? 'end' : 'middle'}
              fontSize={isMob ? "26" : "13"} fill="var(--ink-3)" fontFamily="var(--mono)">{l.v}</text>
          );
        })}
      </svg>

      {/* Soft glow blob behind value — matches the colour at the tip of the gradient */}
      <div style={{
        position: 'absolute',
        left: '50%', bottom: -80,
        transform: 'translateX(-50%)',
        width: 857, height: 612,
        background: `radial-gradient(closest-side, ${rgba(colorAt(valuePct), 0.224)}, transparent 75%)`,
        filter: 'blur(60px)',
        pointerEvents: 'none'
      }}></div>

      {/* Center value */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0,
        bottom: isMob ? 28 : 53,
        textAlign: 'center'
      }}>
        {subValue && !isMob && (
          <div style={{
            fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1, color: subColor, fontVariantNumeric: 'tabular-nums', marginBottom: 14
          }}>{subValue}</div>
        )}
        <div style={{
          fontFamily: 'var(--serif)', fontSize: isMob ? 150 : 144, lineHeight: 0.9, letterSpacing: '-0.04em',
          color: 'var(--ink)',
          fontVariantNumeric: 'tabular-nums'
        }}>{metric === 'flow' ? displayValue + 6 : displayValue}</div>
        <div key={pulseKey} className="mono gauge-caption-fade"
          style={{ fontSize: isMob ? 22 : 11, letterSpacing: '0.16em', color: 'var(--ink-3)', marginTop: isMob ? 32 : 26 }}>
          {caption}
        </div>
      </div>
      {subValue && isMob && (
        <div style={{
          position: 'absolute',
          left: 0, right: 0,
          bottom: -32,
          textAlign: 'center',
          fontFamily: 'var(--serif)', fontSize: 36, lineHeight: 1, color: subColor, fontVariantNumeric: 'tabular-nums'
        }}>{subValue}</div>
      )}

      {/* Delta pill (like "+6 pts" in ref) */}
      <div style={{
        position: 'absolute',
        left: ptX - (metric === 'flow' ? (isMob ? 80 : 50) : 30), top: ptY - (isMob ? 26 : 18),
        background: '#fff',
        border: '1px solid var(--line)',
        borderRadius: 999,
        padding: '5px 11px',
        fontFamily: 'var(--mono)', fontSize: isMob ? 22 : 12,
        display: 'flex', alignItems: 'center', gap: isMob ? 8 : 5,
        boxShadow: '0 6px 16px rgba(0,0,0,0.08)',
        transition: 'left 0.85s cubic-bezier(.22,1,.36,1), top 0.85s cubic-bezier(.22,1,.36,1)',
        fontVariantNumeric: 'tabular-nums'
      }}>
        {metric === 'flow' && <span style={{ color: 'var(--ink-2)' }}>{displayValue}%</span>}
        <span style={{ color: displayDelta < 0 ? 'var(--red)' : 'var(--green)' }}>{displayDelta < 0 ? '▼' : '▲'}</span>
        {Math.abs(displayDelta)}{unit.includes('ms') ? ' ms' : ' pts'}
      </div>

      {/* Inner deep-flow badge (only on flow metric) */}
      {metric === 'flow' && (() => {
        // Position at the leftmost dot of the inner arc (t = 0.06, so just past the filled segment)
        const dotInnerR = r - tickInset - (isMob ? 13 : 10);
        const innerT = 0.06;
        const innerA = startA + (endA - startA) * innerT;
        const innerRad = (innerA * Math.PI) / 180;
        const ix = cx + Math.cos(innerRad) * dotInnerR;
        const iy = cy + Math.sin(innerRad) * dotInnerR;
        return (
          <div style={{
            position: 'absolute',
            left: isMob ? ix + 4 : ix + 14,
            top: isMob ? iy - 8 : iy - 12,
            transform: isMob ? 'translate(-50%, -100%)' : 'none',
            background: '#fff',
            border: '1px solid var(--line)',
            borderRadius: 999,
            padding: '5px 11px',
            fontFamily: 'var(--mono)', fontSize: isMob ? 22 : 12,
            display: 'flex', alignItems: 'center', gap: isMob ? 8 : 5,
            boxShadow: '0 6px 16px rgba(0,0,0,0.08)',
            fontVariantNumeric: 'tabular-nums',
            whiteSpace: 'nowrap'
          }}>
            <span style={{ color: '#7c5fd1' }}>6%</span>
            <span style={{ color: 'var(--green)' }}>▲</span>
            2 pts
          </div>
        );
      })()}
      </div>
    </div>
  );
}

// =============== BIG CATEGORY CARD (like Payment history / Credit card use) ===============
function BigCategoryCard({ title, metric, metricLabel, impact, impactColor, desc, onClick, team }) {
  return (
    <div onClick={onClick} style={{
      background: 'rgba(255,255,255,0.6)',
      backdropFilter: 'blur(10px)',
      border: '1px solid rgba(255,255,255,0.7)',
      borderRadius: 22,
      padding: 26,
      cursor: 'pointer',
      display: 'flex', flexDirection: 'column', gap: 14,
      transition: 'transform 0.15s, box-shadow 0.15s',
      boxShadow: '0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 24px rgba(0,0,0,0.04)'
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 1px 0 rgba(255,255,255,0.5) inset, 0 14px 36px rgba(0,0,0,0.08)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 24px rgba(0,0,0,0.04)'; }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 16, fontWeight: 500 }}>{title}</div>
        <button style={{
          width: 32, height: 32, borderRadius: '50%', border: '1px solid var(--line)',
          background: 'var(--bg)', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17 17 7M9 7h8v8"/></svg>
        </button>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, justifyContent: 'space-between' }}>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 64, lineHeight: 0.95, letterSpacing: '-0.02em' }}>{metric}</div>
        <div className="pill" style={{
          background: impactColor === 'var(--red)' ? 'var(--red)' : impactColor === 'var(--amber)' ? 'var(--amber)' : 'var(--green)',
          color: '#fff', borderColor: 'transparent', fontWeight: 600, padding: '5px 12px'
        }}>{impact}</div>
      </div>
      <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.5 }}>{desc}</div>
    </div>
  );
}

function MiniHeatmap({ isMob }) {
  // Mirrors Departments Vista (filtered "Semana"): one row per team,
  // last 2 months = 8 weeks × 5 working days = 40 cells per row.
  // Uses the SAME statusColor palette as the full heatmap (red→amber→green→purple).
  const teams = (typeof TEAMS !== 'undefined' ? TEAMS : []).slice().sort((a, b) => b.flow - a.flow);
  const WEEKS = 8;
  const DAYS = 5;
  const isFlow = true; // overview shows Flow Score globally
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2, width: isMob ? '100%' : 280, flex: isMob ? 1 : 'none', minWidth: 0 }}>
      {teams.map((t, i) => {
        const seed = i * 7 + 13;
        const cells = Array.from({ length: WEEKS * DAYS }, (_, j) => {
          const noise = ((seed + j * 17) % 100) / 100;
          const spread = 36;
          const base = t.flow + (noise - 0.5) * spread;
          return Math.max(15, Math.min(98, base));
        });
        return (
          <div key={t.id} style={{ display: 'grid', gridTemplateColumns: `repeat(${WEEKS * DAYS}, minmax(0, 1fr))`, gap: isMob ? 1 : 1.5, width: '100%' }}>
            {cells.map((cv, j) => {
              const c = statusColor(cv, isFlow);
              return (
                <div key={j} style={{
                  aspectRatio: '1/1.5',
                  background: c.bg,
                  opacity: 0.55 + (cv / 100) * 0.45,
                  borderRadius: 1.5,
                  minWidth: 0
                }}></div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

// =============== TIME RANGE DROPDOWN ===============
const TIME_OPTIONS = [
  { id: 'today',     l: 'Lun 4 mayo 2026' },
  { id: 'week',      l: 'Esta semana' },
  { id: 'month',     l: 'Este mes' },
  { id: 'quarter',   l: 'Este trimestre' }
];

function TimeRangeDropdown({ value, onChange, open, setOpen, isMob, pillStyle, innerWhite }) {
  const ref = useR(null);
  useE(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);
  const current = TIME_OPTIONS.find(d => d.id === value) || TIME_OPTIONS[0];
  return (
    <div ref={ref} style={{ position: 'relative', display: 'inline-block', width: '100%' }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          padding: innerWhite ? '10px 14px' : '14px 16px',
          borderRadius: pillStyle ? 999 : (isMob ? 14 : 999),
          border: innerWhite ? 'none' : (pillStyle ? '1px solid rgba(255,255,255,0.6)' : '1px solid var(--line)'),
          background: innerWhite ? '#fff' : (pillStyle ? 'rgba(255,255,255,0.5)' : '#fff'),
          backdropFilter: 'blur(10px)',
          fontSize: pillStyle ? 12 : 13.3,
          fontWeight: pillStyle ? 500 : 500,
          color: 'var(--ink)',
          cursor: 'pointer',
          fontFamily: 'var(--sans)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 9,
          boxShadow: innerWhite ? '0 4px 14px rgba(0,0,0,0.06)' : (pillStyle ? 'none' : '0 3px 10px rgba(0,0,0,0.05)'),
          width: '100%',
          boxSizing: 'border-box',
          textAlign: 'left'
        }}
      >
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{current.l}</span>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transition: 'transform 200ms', transform: open ? 'rotate(180deg)' : 'none', opacity: 0.55, flexShrink: 0 }}>
          <polyline points="6 9 12 15 18 9"/>
        </svg>
      </button>
      {open && (
        <div style={{
          position: 'absolute',
          top: 'calc(100% + 8px)',
          left: 0,
          minWidth: 220,
          background: '#fff',
          border: '1px solid var(--line)',
          borderRadius: 18,
          padding: 6,
          boxShadow: '0 18px 50px rgba(0,0,0,0.16)',
          zIndex: 20
        }}>
          {TIME_OPTIONS.map(d => {
            const active = d.id === value;
            return (
              <button
                key={d.id}
                onClick={() => { onChange(d.id); setOpen(false); }}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  width: '100%',
                  padding: '12px 14px',
                  borderRadius: 12,
                  border: 'none',
                  background: active ? 'rgba(0,0,0,0.05)' : 'transparent',
                  fontSize: 14,
                  fontFamily: 'var(--sans)',
                  color: 'var(--ink)',
                  cursor: 'pointer',
                  textAlign: 'left',
                  fontWeight: active ? 500 : 400
                }}
                onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'rgba(0,0,0,0.035)'; }}
                onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}
              >
                <span>{d.l}</span>
                {active && (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="20 6 9 17 4 12"/>
                  </svg>
                )}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

// =============== DEPT FILTER DROPDOWN ===============
const DEPT_OPTIONS = [
  { id: 'all',       l: 'Todos los departamentos' },
  { id: 'product',   l: 'Producto · Madrid' },
  { id: 'eng-be',    l: 'Engineering Backend' },
  { id: 'eng-fe',    l: 'Engineering Frontend' },
  { id: 'design',    l: 'Diseño' },
  { id: 'sales',     l: 'Comercial' },
  { id: 'ops',       l: 'Operaciones' },
  { id: 'people',    l: 'People' }
];

function DeptFilterDropdown({ value, onChange, open, setOpen, isMob }) {
  const ref = useR(null);
  useE(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);
  const current = DEPT_OPTIONS.find(d => d.id === value) || DEPT_OPTIONS[0];
  return (
    <div ref={ref} style={{ position: 'relative', display: 'inline-block' }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          padding: '14px 16px',
          borderRadius: isMob ? 14 : 999,
          border: '1px solid var(--line)',
          background: '#fff',
          backdropFilter: 'blur(10px)',
          fontSize: 13.3,
          fontWeight: 500,
          color: 'var(--ink)',
          cursor: 'pointer',
          fontFamily: 'var(--sans)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 9,
          boxShadow: '0 3px 10px rgba(0,0,0,0.05)',
          width: '100%',
          boxSizing: 'border-box'
        }}
      >
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {current.l}
        </span>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transition: 'transform 200ms', transform: open ? 'rotate(180deg)' : 'none', opacity: 0.55, flexShrink: 0 }}>
          <polyline points="6 9 12 15 18 9"/>
        </svg>
      </button>
      {open && (
        <div style={{
          position: 'absolute',
          top: 'calc(100% + 8px)',
          left: 0,
          minWidth: 280,
          background: '#fff',
          border: '1px solid var(--line)',
          borderRadius: 18,
          padding: 6,
          boxShadow: '0 18px 50px rgba(0,0,0,0.16)',
          zIndex: 20,
          maxHeight: 360,
          overflowY: 'auto'
        }}>
          {DEPT_OPTIONS.map(d => {
            const active = d.id === value;
            return (
              <button
                key={d.id}
                onClick={() => { onChange(d.id); setOpen(false); }}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  width: '100%',
                  padding: '12px 14px',
                  borderRadius: 12,
                  border: 'none',
                  background: active ? 'rgba(0,0,0,0.05)' : 'transparent',
                  fontSize: 14,
                  fontFamily: 'var(--sans)',
                  color: 'var(--ink)',
                  cursor: 'pointer',
                  textAlign: 'left',
                  fontWeight: active ? 500 : 400
                }}
                onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'rgba(0,0,0,0.035)'; }}
                onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}
              >
                <span>{d.l}</span>
                {active && (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="20 6 9 17 4 12"/>
                  </svg>
                )}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

// =============== ADD TEAM MEMBER CARD ===============
function AddMemberCard() {
  const [open, setOpen] = useS(false);
  const [name, setName] = useS('');
  const [email, setEmail] = useS('');
  const [team, setTeam] = useS('eng-be');
  const [role, setRole] = useS('member');
  const [sent, setSent] = useS(false);
  const teams = (typeof TEAMS !== 'undefined' ? TEAMS : []);

  function submit() {
    if (!name.trim() || !email.trim()) return;
    setSent(true);
    setTimeout(() => {
      setSent(false); setOpen(false); setName(''); setEmail('');
    }, 1800);
  }

  if (!open) {
    return (
      <div onClick={() => setOpen(true)} style={{
        padding: '22px 26px', background: 'var(--ink)', color: '#fff', borderRadius: 22,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer',
        transition: 'transform 0.15s, box-shadow 0.15s'
      }}
        onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 14px 36px rgba(0,0,0,0.18)'; }}
        onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
      >
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 4, lineHeight: 1.2, maxWidth: 320 }}>Añadir un miembro al equipo</div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 6 }}>Invitación con opt-in y k≥5 por defecto</div>
        </div>
        <div style={{
          width: 56, height: 56, borderRadius: '50%',
          background: 'var(--green-bright)', color: 'var(--ink)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
          boxShadow: '0 8px 20px rgba(79,214,147,0.35)'
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
            <path d="M12 5v14M5 12h14"/>
          </svg>
        </div>
      </div>
    );
  }

  return (
    <div style={{
      padding: '22px 26px', background: 'var(--ink)', color: '#fff', borderRadius: 22,
      display: 'flex', flexDirection: 'column', gap: 14
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.5)' }}>NUEVO MIEMBRO</div>
        <button onClick={() => setOpen(false)} style={{
          background: 'transparent', border: 'none', color: 'rgba(255,255,255,0.6)', cursor: 'pointer', fontSize: 18, lineHeight: 1, padding: 0
        }}>×</button>
      </div>

      {sent ? (
        <div style={{ padding: '14px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{
            width: 28, height: 28, borderRadius: '50%', background: 'var(--green-bright)', color: 'var(--ink)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700
          }}>✓</span>
          <div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>Invitación enviada a {email}</div>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>El miembro recibirá un correo con el alta y los términos de privacidad.</div>
          </div>
        </div>
      ) : (
        <>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <input value={name} onChange={e => setName(e.target.value)} placeholder="Nombre y apellido"
              style={inputDark} />
            <input value={email} onChange={e => setEmail(e.target.value)} placeholder="email@neurotropy.com" type="email"
              style={inputDark} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <select value={team} onChange={e => setTeam(e.target.value)} style={inputDark}>
              {teams.map(t => (
                <option key={t.id} value={t.id} style={{ color: 'var(--ink)' }}>
                  {t.name}{t.sub ? ` · ${t.sub}` : ''}
                </option>
              ))}
            </select>
            <select value={role} onChange={e => setRole(e.target.value)} style={inputDark}>
              <option value="member" style={{ color: 'var(--ink)' }}>Miembro</option>
              <option value="lead" style={{ color: 'var(--ink)' }}>Lead</option>
              <option value="manager" style={{ color: 'var(--ink)' }}>Manager</option>
            </select>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginTop: 4, flexWrap: 'wrap' }}>
            <span className="mono" style={{ fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.12em' }}>
              OPT-IN POR DEFECTO · K ≥ 5 · DATOS AGREGADOS
            </span>
            <button onClick={submit} disabled={!name.trim() || !email.trim()} style={{
              padding: '9px 18px', borderRadius: 999, border: 'none',
              background: (!name.trim() || !email.trim()) ? 'rgba(255,255,255,0.18)' : 'var(--green-bright)',
              color: 'var(--ink)', fontSize: 13, fontWeight: 600,
              cursor: (!name.trim() || !email.trim()) ? 'not-allowed' : 'pointer',
              fontFamily: 'var(--sans)'
            }}>Enviar invitación →</button>
          </div>
        </>
      )}
    </div>
  );
}

const inputDark = {
  padding: '10px 12px', borderRadius: 10,
  background: 'rgba(255,255,255,0.06)',
  border: '1px solid rgba(255,255,255,0.12)',
  color: '#fff', fontSize: 13, fontFamily: 'var(--sans)', outline: 'none',
  width: '100%', boxSizing: 'border-box'
};

Object.assign(window, { OverviewPage });