// Admin web screens — Org admin (school owner) + Super admin (Gurukool internal)

// ─── Sidebar nav ──────────────────────────────────────────────
function AdminSidebar({ active, onNav, items, brand = 'Gurukool', sub = '', collapsed = false }) {
  return (
    <div style={{
      width: collapsed ? 64 : 240, flexShrink: 0,
      background: 'var(--surface)', borderRight: '1px solid var(--border)',
      display: 'flex', flexDirection: 'column', height: '100%',
    }}>
      <div style={{ padding: collapsed ? '20px 12px' : '20px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: 'linear-gradient(135deg, var(--accent), var(--gk-lime-600))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, flexShrink: 0 }}>G</div>
        {!collapsed && (
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>{brand}</div>
            {sub && <div style={{ fontSize: 11, color: 'var(--text-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{sub}</div>}
          </div>
        )}
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: 10 }}>
        {items.map(group => (
          <div key={group.label} style={{ marginBottom: 16 }}>
            {!collapsed && <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--text-muted)', padding: '6px 10px' }}>{group.label}</div>}
            {group.items.map(it => (
              <div key={it.id} onClick={() => onNav?.(it.id)} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: collapsed ? '10px 12px' : '9px 12px',
                borderRadius: 8, cursor: 'pointer',
                background: active === it.id ? 'var(--accent-soft)' : 'transparent',
                color: active === it.id ? 'var(--accent-ink)' : 'var(--text-soft)',
                fontWeight: active === it.id ? 600 : 500,
                fontSize: 13, marginBottom: 2,
              }}>
                <Icon name={it.icon} size={18} strokeWidth={active === it.id ? 2.2 : 1.75}/>
                {!collapsed && <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.label}</span>}
                {!collapsed && it.badge && <Badge tone={it.badgeTone || 'warn'} size="sm">{it.badge}</Badge>}
              </div>
            ))}
          </div>
        ))}
      </div>
      {!collapsed && (
        <div style={{ padding: 10, borderTop: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 8, background: 'var(--surface-2)' }}>
            <Avatar name="Ravi Menon" size={30}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Ravi Menon</div>
              <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>Principal · Admin</div>
            </div>
            <Icon name="chevronRight" size={14} style={{ color: 'var(--text-muted)' }}/>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Topbar ───────────────────────────────────────────────────
function AdminTopbar({ title, subtitle, actions, breadcrumb }) {
  return (
    <div style={{
      padding: '18px 28px', borderBottom: '1px solid var(--border)',
      background: 'var(--surface)',
      display: 'flex', alignItems: 'center', gap: 16,
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        {breadcrumb && (
          <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
            {breadcrumb.map((b, i) => (
              <React.Fragment key={i}>
                {i > 0 && <Icon name="chevronRight" size={12}/>}
                <span style={{ color: i === breadcrumb.length - 1 ? 'var(--text-soft)' : 'var(--text-muted)' }}>{b}</span>
              </React.Fragment>
            ))}
          </div>
        )}
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, margin: 0, letterSpacing: -0.3 }}>{title}</h1>
        {subtitle && <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 3 }}>{subtitle}</div>}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ position: 'relative' }}>
          <Icon name="search" size={14} style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }}/>
          <input placeholder="Search students, staff, classes…" style={{
            width: 300, padding: '9px 12px 9px 34px', borderRadius: 10,
            border: '1px solid var(--border)', background: 'var(--surface-2)',
            fontSize: 13, color: 'var(--text)', fontFamily: 'var(--font-sans)',
            outline: 'none',
          }}/>
        </div>
        <div style={{ position: 'relative', padding: 9, background: 'var(--surface-2)', borderRadius: 10, border: '1px solid var(--border)', cursor: 'pointer' }}>
          <Icon name="bell" size={16}/>
          <div style={{ position: 'absolute', top: 6, right: 6, width: 8, height: 8, background: 'var(--gk-danger)', borderRadius: '50%' }}/>
        </div>
        {actions}
      </div>
    </div>
  );
}

// ─── KPI stat card ────────────────────────────────────────────
function KPICard({ label, value, delta, trend, icon, tone = 152 }) {
  const up = trend === 'up';
  return (
    <Card padding={18}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 10 }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: 'var(--text-muted)' }}>{label}</div>
        {icon && (
          <div style={{ width: 30, height: 30, borderRadius: 8, background: `oklch(93% 0.06 ${tone})`, color: `oklch(38% 0.12 ${tone})`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name={icon} size={16}/>
          </div>
        )}
      </div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 600, lineHeight: 1, letterSpacing: -0.5 }}>{value}</div>
      {delta && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 8, fontSize: 12 }}>
          <Icon name={up ? 'arrowUp' : 'arrowDown'} size={12} style={{ color: up ? 'var(--gk-success)' : 'var(--gk-danger)' }}/>
          <span style={{ color: up ? 'var(--gk-success)' : 'var(--gk-danger)', fontWeight: 600 }}>{delta}</span>
          <span style={{ color: 'var(--text-muted)' }}>vs last week</span>
        </div>
      )}
    </Card>
  );
}

// ─── Inline bar chart ────────────────────────────────────────
function BarChart({ data, height = 160, color = 'var(--accent)' }) {
  const max = Math.max(...data.map(d => d.v));
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height, padding: '0 4px' }}>
      {data.map((d, i) => (
        <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <div style={{ flex: 1, width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
            <div style={{
              height: `${(d.v / max) * 100}%`,
              background: d.highlight ? color : 'color-mix(in oklch, var(--accent) 30%, transparent)',
              borderRadius: '6px 6px 2px 2px',
              position: 'relative',
            }}>
              {d.highlight && (
                <div style={{ position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)', fontSize: 11, fontWeight: 700, color: 'var(--text)', whiteSpace: 'nowrap' }}>{d.v}%</div>
              )}
            </div>
          </div>
          <div style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 500 }}>{d.l}</div>
        </div>
      ))}
    </div>
  );
}

// ─── Line spark chart ────────────────────────────────────────
function Sparkline({ data, height = 60, color = 'var(--accent)', fill = true }) {
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const w = 240, h = height;
  const points = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / range) * (h - 8) - 4;
    return [x, y];
  });
  const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0]} ${p[1]}`).join(' ');
  const area = `${path} L ${w} ${h} L 0 ${h} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} preserveAspectRatio="none">
      {fill && <path d={area} fill={color} opacity="0.12"/>}
      <path d={path} stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke"/>
    </svg>
  );
}

// ─── Data table ──────────────────────────────────────────────
function DataTable({ columns, rows, selectable = false }) {
  return (
    <Card padding={0} style={{ overflow: 'hidden' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
        <thead>
          <tr style={{ background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' }}>
            {selectable && <th style={{ width: 36, padding: '12px 14px' }}><input type="checkbox"/></th>}
            {columns.map(c => (
              <th key={c.key} style={{
                textAlign: c.align || 'left',
                padding: '12px 14px',
                fontSize: 11, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase',
                color: 'var(--text-muted)',
              }}>{c.label}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, ri) => (
            <tr key={ri} style={{ borderBottom: ri < rows.length - 1 ? '1px solid var(--border)' : 'none' }}>
              {selectable && <td style={{ padding: '12px 14px' }}><input type="checkbox"/></td>}
              {columns.map(c => (
                <td key={c.key} style={{ padding: '12px 14px', textAlign: c.align || 'left', color: 'var(--text)' }}>
                  {c.render ? c.render(r) : r[c.key]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </Card>
  );
}

// ─── Org admin: Dashboard ────────────────────────────────────
function OrgDashboardScreen() {
  return (
    <div style={{ padding: '24px 28px', background: 'var(--bg)', minHeight: '100%' }}>
      {/* KPIs */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 20 }}>
        <KPICard label="Students" value="1,284" delta="+12" trend="up" icon="users" tone={152}/>
        <KPICard label="Attendance today" value="93.4%" delta="+1.2%" trend="up" icon="calendar" tone={128}/>
        <KPICard label="HW completion" value="87%" delta="-2%" trend="down" icon="book" tone={25}/>
        <KPICard label="Fees collected" value="₹42.8L" delta="+₹3.1L" trend="up" icon="trophy" tone={55}/>
      </div>

      {/* Charts row */}
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16, marginBottom: 20 }}>
        <Card padding={20}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: 'var(--text-muted)' }}>Attendance · this week</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, marginTop: 4 }}>Overall 93.4%</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {['Week', 'Month', 'Term'].map((l,i) => (
                <div key={l} style={{ padding: '6px 12px', borderRadius: 8, fontSize: 12, fontWeight: 600, background: i === 0 ? 'var(--accent-soft)' : 'transparent', color: i === 0 ? 'var(--accent-ink)' : 'var(--text-muted)', cursor: 'pointer' }}>{l}</div>
              ))}
            </div>
          </div>
          <BarChart height={180} data={[
            { l: 'Mon', v: 91 },
            { l: 'Tue', v: 94 },
            { l: 'Wed', v: 93, highlight: true },
            { l: 'Thu', v: 0 },
            { l: 'Fri', v: 0 },
          ]}/>
          <div style={{ display: 'flex', gap: 16, marginTop: 16, fontSize: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><StatusDot tone="success"/> Present 1,196</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><StatusDot tone="warn"/> Late 38</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><StatusDot tone="danger"/> Absent 50</div>
          </div>
        </Card>
        <Card padding={20}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 10 }}>Credits issued · 30d</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, marginBottom: 12 }}>18,420</div>
          <Sparkline data={[12, 18, 14, 22, 28, 20, 30, 26, 34, 30, 42, 38, 48]}/>
          <JaliDivider/>
          <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.5 }}>
            Most credits issued by <b style={{ color: 'var(--text)' }}>Ms. Kavita Rao</b> (Math) — 2,140.
          </div>
        </Card>
      </div>

      {/* Requires attention */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 20 }}>
        <Card padding={20}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, margin: 0 }}>Needs attention</h3>
            <span style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 600 }}>View all →</span>
          </div>
          {[
            { i: 'alert', c: 'danger', t: '3 staff absent · Math, Sci, Hindi', sub: 'Substitute needed by 10:30' },
            { i: 'users', c: 'warn', t: '12 students absent 3+ days', sub: 'Contact parents recommended' },
            { i: 'book', c: 'warn', t: 'Grade 7A HW completion 42%', sub: 'Below 70% threshold this week' },
            { i: 'message', c: 'neutral', t: '4 parent feedback items', sub: 'Pending response over 24h' },
          ].map((r,i,a) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: i < a.length - 1 ? '1px solid var(--border)' : 'none' }}>
              <div style={{
                width: 34, height: 34, borderRadius: 10,
                background: r.c === 'danger' ? 'color-mix(in oklch, var(--gk-danger) 12%, transparent)' :
                           r.c === 'warn' ? 'color-mix(in oklch, var(--gk-warn) 18%, transparent)' : 'var(--gk-stone-100)',
                color: r.c === 'danger' ? 'var(--gk-danger)' : r.c === 'warn' ? 'oklch(42% 0.13 75)' : 'var(--text-soft)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}><Icon name={r.i} size={16}/></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{r.t}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{r.sub}</div>
              </div>
              <Icon name="chevronRight" size={14} style={{ color: 'var(--text-muted)' }}/>
            </div>
          ))}
        </Card>

        <Card padding={20}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, margin: 0 }}>Leaderboard · This week</h3>
            <Badge tone="lime">Live</Badge>
          </div>
          {[
            { rank: 1, n: 'Grade 5A', s: 'Ms. Rao', p: 96, c: 328 },
            { rank: 2, n: 'Grade 6B', s: 'Mr. Iyer', p: 94, c: 301 },
            { rank: 3, n: 'Grade 4A', s: 'Mrs. Desai', p: 93, c: 278 },
            { rank: 4, n: 'Grade 5B', s: 'Ms. Rao', p: 92, c: 264 },
            { rank: 5, n: 'Grade 3A', s: 'Mr. Mehta', p: 91, c: 241 },
          ].map((r,i,a) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: i < a.length - 1 ? '1px solid var(--border)' : 'none' }}>
              <div style={{
                width: 26, height: 26, borderRadius: '50%',
                background: r.rank === 1 ? 'linear-gradient(135deg, #f5c04c, #c6902a)' : r.rank === 2 ? 'var(--gk-stone-300)' : r.rank === 3 ? 'oklch(72% 0.1 55)' : 'var(--surface-2)',
                color: r.rank <= 3 ? '#fff' : 'var(--text-muted)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 700,
              }}>{r.rank}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{r.n}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{r.s}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent)' }}>{r.p}%</div>
                <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>{r.c} credits</div>
              </div>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

// ─── Org admin: Students list ────────────────────────────────
function OrgStudentsScreen() {
  const rows = [
    { gr: 'GR-142', n: 'Aanya Patel', cls: 'Grade 5A', par: 'Priya Patel', att: 94, cr: 482, st: 'active' },
    { gr: 'GR-143', n: 'Arnav Sharma', cls: 'Grade 5A', par: 'Rajesh Sharma', att: 91, cr: 401, st: 'active' },
    { gr: 'GR-144', n: 'Diya Krishnan', cls: 'Grade 5A', par: 'Meera Krishnan', att: 97, cr: 512, st: 'active' },
    { gr: 'GR-145', n: 'Ishaan Mehta', cls: 'Grade 5A', par: 'Anil Mehta', att: 85, cr: 290, st: 'warn' },
    { gr: 'GR-146', n: 'Kavya Iyer', cls: 'Grade 5A', par: 'Sanjay Iyer', att: 93, cr: 388, st: 'active' },
    { gr: 'GR-147', n: 'Manav Patel', cls: 'Grade 5A', par: 'Priya Patel', att: 68, cr: 210, st: 'risk' },
    { gr: 'GR-148', n: 'Nisha Rao', cls: 'Grade 5A', par: 'Veena Rao', att: 96, cr: 456, st: 'active' },
    { gr: 'GR-149', n: 'Rahul Shah', cls: 'Grade 5A', par: 'Kiran Shah', att: 92, cr: 402, st: 'active' },
    { gr: 'GR-150', n: 'Riya Desai', cls: 'Grade 5A', par: 'Sunita Desai', att: 89, cr: 355, st: 'active' },
  ];
  return (
    <div style={{ padding: '24px 28px', background: 'var(--bg)', minHeight: '100%' }}>
      {/* Filters */}
      <Card padding={16} style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
          <div style={{ position: 'relative', flex: 1, minWidth: 200 }}>
            <Icon name="search" size={14} style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }}/>
            <input placeholder="Search by name, GR no, parent..." style={{
              width: '100%', padding: '9px 12px 9px 34px', borderRadius: 10,
              border: '1px solid var(--border)', background: 'var(--surface)',
              fontSize: 13, outline: 'none', boxSizing: 'border-box',
            }}/>
          </div>
          {['Grade 5A ▾', 'All sections ▾', 'Status: All ▾', 'Attendance: All ▾'].map(l => (
            <div key={l} style={{ padding: '8px 14px', borderRadius: 10, background: 'var(--surface)', border: '1px solid var(--border)', fontSize: 13, color: 'var(--text-soft)', cursor: 'pointer', fontWeight: 500 }}>{l}</div>
          ))}
          <div style={{ flex: 1 }}/>
          <Button variant="outline" size="sm" leftIcon="upload">Import CSV</Button>
          <Button variant="primary" size="sm" leftIcon="plus">Add student</Button>
        </div>
      </Card>

      {/* Summary strip */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 12, fontSize: 12, color: 'var(--text-muted)' }}>
        <span><b style={{ color: 'var(--text)' }}>28</b> students in Grade 5A</span>
        <span>·</span>
        <span><b style={{ color: 'var(--gk-success)' }}>25</b> active</span>
        <span>·</span>
        <span><b style={{ color: 'var(--gk-warn)' }}>2</b> attention</span>
        <span>·</span>
        <span><b style={{ color: 'var(--gk-danger)' }}>1</b> at risk</span>
      </div>

      <DataTable selectable columns={[
        { key: 'gr', label: 'GR No', render: r => <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)' }}>{r.gr}</span> },
        { key: 'n', label: 'Student', render: r => (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Avatar name={r.n} size={30}/>
            <div>
              <div style={{ fontWeight: 600 }}>{r.n}</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{r.par}</div>
            </div>
          </div>
        )},
        { key: 'cls', label: 'Section' },
        { key: 'att', label: 'Attendance', render: r => (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ flex: 1, height: 6, borderRadius: 3, background: 'var(--surface-2)', overflow: 'hidden', maxWidth: 80 }}>
              <div style={{ width: `${r.att}%`, height: '100%', background: r.att >= 90 ? 'var(--gk-success)' : r.att >= 75 ? 'var(--gk-warn)' : 'var(--gk-danger)' }}/>
            </div>
            <span style={{ fontSize: 12, fontWeight: 600, minWidth: 36 }}>{r.att}%</span>
          </div>
        )},
        { key: 'cr', label: 'Credits', align: 'right', render: r => <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, color: 'var(--accent)' }}>{r.cr}</span> },
        { key: 'st', label: 'Status', render: r => (
          <Badge tone={r.st === 'active' ? 'success' : r.st === 'warn' ? 'warn' : 'danger'} size="sm">
            {r.st === 'active' ? 'Active' : r.st === 'warn' ? 'Attention' : 'At risk'}
          </Badge>
        )},
        { key: 'a', label: '', align: 'right', render: () => <Icon name="chevronRight" size={14} style={{ color: 'var(--text-muted)' }}/> },
      ]} rows={rows}/>

      {/* Pagination */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14, fontSize: 12, color: 'var(--text-muted)' }}>
        <span>Showing 1–9 of 28</span>
        <div style={{ display: 'flex', gap: 4 }}>
          {['‹', '1', '2', '3', '›'].map((p,i) => (
            <div key={i} style={{
              width: 30, height: 30, borderRadius: 8,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: p === '1' ? 'var(--accent)' : 'var(--surface)',
              color: p === '1' ? '#fff' : 'var(--text-soft)',
              border: p === '1' ? 'none' : '1px solid var(--border)',
              cursor: 'pointer', fontSize: 12, fontWeight: 600,
            }}>{p}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Org admin: Student detail (360) ─────────────────────────
function OrgStudentDetailScreen() {
  return (
    <div style={{ padding: '24px 28px', background: 'var(--bg)', minHeight: '100%' }}>
      {/* Hero */}
      <Card padding={24} style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
          <Avatar name="Aanya Patel" size={80}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: 'var(--text-muted)' }}>GR-142 · Grade 5A · Roll 12</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, margin: '2px 0 4px' }}>Aanya Patel</h2>
            <div style={{ fontSize: 13, color: 'var(--text-soft)' }}>Priya Patel (Mother) · +91 98765 43210 · Admitted Jun 2022</div>
          </div>
          <div style={{ display: 'flex', gap: 20 }}>
            {[
              { l: 'Attendance', v: '94%', s: 'success' },
              { l: 'Credits', v: '482', s: 'accent' },
              { l: 'HW done', v: '8/12', s: 'warn' },
              { l: 'Behaviour', v: '4.6/5', s: 'success' },
            ].map(k => (
              <div key={k.l} style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, color: k.s === 'success' ? 'var(--gk-success)' : k.s === 'warn' ? 'var(--gk-warn)' : 'var(--accent)' }}>{k.v}</div>
                <div style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', marginTop: 2 }}>{k.l}</div>
              </div>
            ))}
          </div>
        </div>
      </Card>

      {/* Tab bar */}
      <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--border)', marginBottom: 20 }}>
        {['Overview', 'Attendance', 'Academics', 'Homework', 'Behaviour', 'Credits', 'Fees', 'Documents'].map((t,i) => (
          <div key={t} style={{
            padding: '10px 16px', fontSize: 13, fontWeight: 600, cursor: 'pointer',
            color: i === 0 ? 'var(--accent-ink)' : 'var(--text-muted)',
            borderBottom: i === 0 ? '2px solid var(--accent)' : '2px solid transparent',
            marginBottom: -1,
          }}>{t}</div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Card padding={20}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, margin: 0 }}>Attendance · Apr</h3>
              <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>14 of 15 days</span>
            </div>
            <BarChart height={120} data={[
              { l: 'W1', v: 100 }, { l: 'W2', v: 100 }, { l: 'W3', v: 90, highlight: true }, { l: 'W4', v: 0 }, { l: 'W5', v: 0 },
            ]}/>
          </Card>
          <Card padding={20}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, margin: '0 0 16px' }}>Recent activity</h3>
            {[
              { t: 'Marked "Very Good" in Math by Ms. Rao', when: '2h ago', i: 'star', tone: 'lime' },
              { t: 'Homework verified — Science', when: '1d ago', i: 'check', tone: 'success' },
              { t: 'Fractions worksheet submitted', when: '1d ago', i: 'book', tone: 'info' },
              { t: 'Arrived late — 9:18 AM', when: '8 Apr', i: 'clock', tone: 'warn' },
              { t: 'Earned "Attendance Master" badge', when: '1 Apr', i: 'trophy', tone: 'lime' },
            ].map((r,i,a) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: i < a.length - 1 ? '1px solid var(--border)' : 'none' }}>
                <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--accent-soft)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={r.i} size={14}/>
                </div>
                <div style={{ flex: 1, fontSize: 13 }}>{r.t}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{r.when}</div>
              </div>
            ))}
          </Card>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Card padding={20}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, margin: '0 0 14px' }}>Subjects</h3>
            {[
              { s: 'Math', g: 'A', p: 88 },
              { s: 'English', g: 'A', p: 84 },
              { s: 'Science', g: 'A+', p: 94 },
              { s: 'Hindi', g: 'B+', p: 78 },
              { s: 'Social', g: 'A', p: 86 },
            ].map(s => (
              <div key={s.s} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0' }}>
                <div style={{ flex: 1, fontSize: 13, fontWeight: 500 }}>{s.s}</div>
                <div style={{ width: 80, height: 6, borderRadius: 3, background: 'var(--surface-2)', overflow: 'hidden' }}>
                  <div style={{ width: `${s.p}%`, height: '100%', background: 'var(--accent)' }}/>
                </div>
                <div style={{ width: 30, fontSize: 12, fontWeight: 700, color: 'var(--accent)', textAlign: 'right' }}>{s.g}</div>
              </div>
            ))}
          </Card>
          <Card padding={20}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, margin: '0 0 14px' }}>Quick actions</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <Button variant="outline" size="sm" block leftIcon="message">Message parent</Button>
              <Button variant="outline" size="sm" block leftIcon="clipboard">Generate report card</Button>
              <Button variant="outline" size="sm" block leftIcon="star">Award credits</Button>
              <Button variant="ghost" size="sm" block leftIcon="logout">Transfer section</Button>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

// ─── Org admin: Timetable builder ────────────────────────────
function OrgTimetableScreen() {
  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const periods = ['9:00', '9:45', '10:30', '10:45', '11:30', '12:15', '1:00', '1:45', '2:30'];
  // grid[dayIdx][periodIdx]
  const grid = {
    '0-0': { s: 'Math', t: 'Rao', c: 195 },
    '0-1': { s: 'English', t: 'Mehta', c: 25 },
    '0-2': { b: true },
    '0-3': { s: 'Science', t: 'Desai', c: 145 },
    '0-4': { s: 'Hindi', t: 'Sharma', c: 55 },
    '0-5': { s: 'PE', t: 'Singh', c: 270 },
    '0-6': { l: true },
    '0-7': { s: 'Social', t: 'Patel', c: 35 },
    '0-8': { s: 'Art', t: 'Iyer', c: 340 },
    '1-0': { s: 'English', t: 'Mehta', c: 25 },
    '1-1': { s: 'Math', t: 'Rao', c: 195 },
    '1-2': { b: true },
    '1-3': { s: 'Hindi', t: 'Sharma', c: 55 },
    '1-4': { empty: true },
    '1-5': { s: 'Science', t: 'Desai', c: 145 },
    '1-6': { l: true },
    '1-7': { s: 'Math', t: 'Rao', c: 195 },
    '1-8': { s: 'Library', t: '—', c: 300 },
    '2-0': { s: 'Science', t: 'Desai', c: 145 },
    '2-1': { s: 'Math', t: 'Rao', c: 195, now: true },
    '2-3': { s: 'English', t: 'Mehta', c: 25 },
    '2-2': { b: true },
    '2-6': { l: true },
  };
  return (
    <div style={{ padding: '24px 28px', background: 'var(--bg)', minHeight: '100%' }}>
      <Card padding={16} style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <Badge tone="accent">Grade 5A</Badge>
          <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>Term 2 · 2025-26</span>
          <div style={{ flex: 1 }}/>
          <Button variant="outline" size="sm" leftIcon="upload">Import</Button>
          <Button variant="outline" size="sm" leftIcon="clipboard">Print</Button>
          <Button variant="primary" size="sm" leftIcon="check">Publish</Button>
        </div>
      </Card>

      <Card padding={0} style={{ overflow: 'hidden' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12, tableLayout: 'fixed' }}>
          <thead>
            <tr style={{ background: 'var(--surface-2)' }}>
              <th style={{ width: 80, padding: '10px 12px', textAlign: 'left', fontSize: 10, letterSpacing: 1, textTransform: 'uppercase', color: 'var(--text-muted)', borderBottom: '1px solid var(--border)' }}>Day</th>
              {periods.map((p,i) => (
                <th key={i} style={{ padding: '10px 8px', textAlign: 'center', fontSize: 10, letterSpacing: 0.5, fontWeight: 600, color: 'var(--text-muted)', borderBottom: '1px solid var(--border)', borderLeft: '1px solid var(--border)' }}>
                  P{i+1}<br/>
                  <span style={{ fontSize: 9, fontWeight: 500 }}>{p}</span>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {days.map((d, di) => (
              <tr key={di}>
                <td style={{ padding: '4px 12px', fontWeight: 700, borderBottom: '1px solid var(--border)', background: 'var(--surface-2)', fontSize: 12, color: 'var(--text-soft)' }}>{d}</td>
                {periods.map((_, pi) => {
                  const cell = grid[`${di}-${pi}`] || {};
                  if (cell.b) return <td key={pi} style={{ padding: 6, borderLeft: '1px solid var(--border)', borderBottom: '1px solid var(--border)', textAlign: 'center', fontSize: 9, color: 'var(--text-muted)', fontStyle: 'italic' }}>break</td>;
                  if (cell.l) return <td key={pi} style={{ padding: 6, borderLeft: '1px solid var(--border)', borderBottom: '1px solid var(--border)', textAlign: 'center', fontSize: 9, color: 'var(--text-muted)', fontStyle: 'italic' }}>lunch</td>;
                  if (cell.empty) return <td key={pi} style={{ padding: 6, borderLeft: '1px solid var(--border)', borderBottom: '1px solid var(--border)', textAlign: 'center', fontSize: 14, color: 'var(--text-muted)' }}>+</td>;
                  if (!cell.s) return <td key={pi} style={{ padding: 6, borderLeft: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}/>;
                  return (
                    <td key={pi} style={{ padding: 3, borderLeft: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
                      <div style={{
                        padding: '6px 7px', borderRadius: 6,
                        background: cell.now ? 'var(--accent)' : `oklch(93% 0.05 ${cell.c})`,
                        color: cell.now ? '#fff' : `oklch(30% 0.12 ${cell.c})`,
                        fontSize: 11,
                        border: cell.now ? `2px solid var(--accent)` : 'none',
                      }}>
                        <div style={{ fontWeight: 700 }}>{cell.s}</div>
                        <div style={{ fontSize: 9, opacity: cell.now ? 0.9 : 0.7 }}>{cell.t}</div>
                      </div>
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      <div style={{ marginTop: 16, display: 'flex', gap: 16, fontSize: 11, color: 'var(--text-muted)', flexWrap: 'wrap' }}>
        <span><b style={{ color: 'var(--text)' }}>Drag to move</b> · click empty cell to add · right-click for options</span>
        <span>·</span>
        <span style={{ color: 'var(--gk-danger)' }}>1 clash detected (Mr. Sharma, Tue P5)</span>
      </div>
    </div>
  );
}

// ─── Org admin: Announcements ─────────────────────────────────
function OrgAnnouncementsScreen() {
  return (
    <div style={{ padding: '24px 28px', background: 'var(--bg)', minHeight: '100%' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 20 }}>
        <div>
          <Card padding={0} style={{ marginBottom: 16 }}>
            <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, margin: 0, flex: 1 }}>Compose announcement</h3>
              <Badge tone="lime">Draft</Badge>
            </div>
            <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Input label="Title" defaultValue="Annual Sports Day — Friday 24 April"/>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>Message</span>
                <textarea rows={6} defaultValue={"Dear parents,\n\nWe are delighted to invite you to our Annual Sports Day on Friday, 24 April. Events begin at 8:30 AM on the main ground. Please ensure students wear their sports uniform and bring a water bottle.\n\nWarm regards,\nMrs. Neela Iyer\nPrincipal"} style={{
                  padding: 14, borderRadius: 12, border: '1px solid var(--border)',
                  background: 'var(--surface)', fontSize: 13, fontFamily: 'var(--font-sans)',
                  color: 'var(--text)', lineHeight: 1.5, resize: 'none',
                }}/>
              </label>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div>
                  <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>Audience</label>
                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    {[['All parents', true], ['Grade 5', false], ['Staff', false]].map(([l, sel]) => (
                      <Badge key={l} tone={sel ? 'accent' : 'neutral'}>{l}</Badge>
                    ))}
                  </div>
                </div>
                <div>
                  <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>Channels</label>
                  <div style={{ display: 'flex', gap: 6 }}>
                    {[['App', true], ['SMS', true], ['Email', false]].map(([l, sel]) => (
                      <Badge key={l} tone={sel ? 'success' : 'neutral'}>{sel ? '✓ ' : ''}{l}</Badge>
                    ))}
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
                <Button variant="ghost" size="md">Save draft</Button>
                <div style={{ flex: 1 }}/>
                <Button variant="outline" size="md">Schedule</Button>
                <Button variant="primary" size="md" leftIcon="bell">Send now · 1,284 parents</Button>
              </div>
            </div>
          </Card>
        </div>
        <div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, margin: '0 0 12px' }}>Recent</h3>
          {[
            { t: 'Exam schedule · Term 2', by: 'Ravi Menon', when: '2d ago', reach: '98%' },
            { t: 'Holiday · Ram Navami', by: 'Neela Iyer', when: '12 Apr', reach: '100%' },
            { t: 'Parent-teacher meet', by: 'Ravi Menon', when: '8 Apr', reach: '94%' },
            { t: 'Fee reminder · Q1', by: 'Accounts', when: '1 Apr', reach: '100%' },
          ].map((a,i) => (
            <Card key={i} padding={14} style={{ marginBottom: 10 }}>
              <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>{a.t}</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)', display: 'flex', justifyContent: 'space-between' }}>
                <span>{a.by} · {a.when}</span>
                <span style={{ color: 'var(--gk-success)', fontWeight: 600 }}>{a.reach} reach</span>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Super admin: Org list ───────────────────────────────────
function SuperOrgsScreen() {
  const orgs = [
    { n: 'Sunrise Public School', loc: 'Pune, MH', plan: 'Premium', st: 1284, s: 'active', uptime: 99.8, rev: '₹4.8L' },
    { n: 'Shree Saraswati Vidyalaya', loc: 'Ahmedabad, GJ', plan: 'Standard', st: 842, s: 'active', uptime: 99.5, rev: '₹2.2L' },
    { n: 'Little Champs Academy', loc: 'Indore, MP', plan: 'Standard', st: 420, s: 'active', uptime: 99.9, rev: '₹1.1L' },
    { n: 'DPS International', loc: 'Gurgaon, HR', plan: 'Enterprise', st: 2140, s: 'active', uptime: 99.2, rev: '₹12.4L' },
    { n: 'Rajlaxmi English School', loc: 'Nashik, MH', plan: 'Trial', st: 312, s: 'trial', uptime: 100, rev: '—' },
    { n: 'Bharti Kids School', loc: 'Surat, GJ', plan: 'Standard', st: 680, s: 'attn', uptime: 94.2, rev: '₹1.8L' },
  ];
  return (
    <div style={{ padding: '24px 28px', background: 'var(--bg)', minHeight: '100%' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 20 }}>
        <KPICard label="Active orgs" value="142" delta="+6" trend="up" icon="building" tone={152}/>
        <KPICard label="Total students" value="84,210" delta="+1,240" trend="up" icon="users" tone={128}/>
        <KPICard label="MRR" value="₹38.2L" delta="+₹2.1L" trend="up" icon="trophy" tone={55}/>
        <KPICard label="Platform uptime" value="99.82%" delta="+0.03%" trend="up" icon="shield" tone={270}/>
      </div>

      <Card padding={16} style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <div style={{ position: 'relative', flex: 1 }}>
            <Icon name="search" size={14} style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }}/>
            <input placeholder="Search organizations..." style={{
              width: '100%', padding: '9px 12px 9px 34px', borderRadius: 10,
              border: '1px solid var(--border)', background: 'var(--surface)',
              fontSize: 13, outline: 'none', boxSizing: 'border-box',
            }}/>
          </div>
          {['All plans ▾', 'Region: All ▾', 'Status: All ▾'].map(l => (
            <div key={l} style={{ padding: '8px 14px', borderRadius: 10, background: 'var(--surface)', border: '1px solid var(--border)', fontSize: 13, color: 'var(--text-soft)', cursor: 'pointer', fontWeight: 500 }}>{l}</div>
          ))}
          <Button variant="primary" size="sm" leftIcon="plus">Onboard org</Button>
        </div>
      </Card>

      <DataTable columns={[
        { key: 'n', label: 'Organization', render: r => (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--accent-soft)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 700 }}>
              {r.n.split(' ').slice(0,2).map(w => w[0]).join('')}
            </div>
            <div>
              <div style={{ fontWeight: 600 }}>{r.n}</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{r.loc}</div>
            </div>
          </div>
        )},
        { key: 'plan', label: 'Plan', render: r => (
          <Badge tone={r.plan === 'Enterprise' ? 'accent' : r.plan === 'Premium' ? 'lime' : r.plan === 'Trial' ? 'warn' : 'neutral'} size="sm">{r.plan}</Badge>
        )},
        { key: 'st', label: 'Students', align: 'right', render: r => <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600 }}>{r.st.toLocaleString()}</span> },
        { key: 'uptime', label: 'Uptime', align: 'right', render: r => (
          <span style={{ color: r.uptime >= 99 ? 'var(--gk-success)' : r.uptime >= 95 ? 'var(--gk-warn)' : 'var(--gk-danger)', fontWeight: 600 }}>{r.uptime}%</span>
        )},
        { key: 'rev', label: 'MRR', align: 'right' },
        { key: 's', label: 'Status', render: r => (
          <Badge tone={r.s === 'active' ? 'success' : r.s === 'trial' ? 'info' : 'warn'} size="sm">
            {r.s === 'active' ? 'Active' : r.s === 'trial' ? 'Trial · 12d' : 'Attention'}
          </Badge>
        )},
        { key: 'a', label: '', align: 'right', render: () => <Icon name="chevronRight" size={14} style={{ color: 'var(--text-muted)' }}/> },
      ]} rows={orgs}/>
    </div>
  );
}

// ─── Super admin: System health ──────────────────────────────
function SuperHealthScreen() {
  return (
    <div style={{ padding: '24px 28px', background: 'var(--bg)', minHeight: '100%' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 20 }}>
        {[
          { s: 'API', v: '99.98%', d: '84ms p50', up: true },
          { s: 'App', v: '99.95%', d: '1.2s TTI', up: true },
          { s: 'SMS', v: '98.1%', d: '12s delivery', up: false },
          { s: 'Database', v: '99.99%', d: '< 10ms', up: true },
        ].map(k => (
          <Card key={k.s} padding={18}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <StatusDot tone={k.up ? 'success' : 'warn'} size={10}/>
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: 'var(--text-muted)' }}>{k.s}</span>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600 }}>{k.v}</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>{k.d}</div>
          </Card>
        ))}
      </div>

      <Card padding={20}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, margin: 0 }}>Active incidents</h3>
          <Badge tone="warn">1 open</Badge>
        </div>
        <div style={{ padding: 16, border: '1px solid color-mix(in oklch, var(--gk-warn) 40%, var(--border))', borderRadius: 12, background: 'color-mix(in oklch, var(--gk-warn) 6%, transparent)', marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
            <Icon name="alert" size={18} style={{ color: 'var(--gk-warn)' }}/>
            <div style={{ fontSize: 13, fontWeight: 700 }}>SMS gateway degraded · Bharti Kids School</div>
            <Badge tone="warn" size="sm">INVESTIGATING</Badge>
          </div>
          <div style={{ fontSize: 12, color: 'var(--text-soft)', marginLeft: 28 }}>
            Delivery latency rising past 30s on SMS-Country. Fallback to Twilio triggered automatically at 10:14 AM.
            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', marginLeft: 8 }}>INC-0042 · opened 24m ago</span>
          </div>
        </div>

        <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600, margin: '16px 0 10px' }}>Recent events</h4>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.8, color: 'var(--text-soft)' }}>
          {[
            ['10:38', 'INFO', 'Payment webhook processed · ₹82,400 across 12 orgs'],
            ['10:22', 'WARN', 'SMS gateway SMS-Country p95 > 30s (3 min sustained)'],
            ['10:14', 'ALERT', 'INC-0042 opened · auto-failover to Twilio'],
            ['09:50', 'INFO', 'Deploy web@v1.48.2 rolled to 100% · no regressions'],
            ['09:12', 'INFO', 'Background job: leaderboard recompute · 142 orgs · 8.2s'],
            ['08:00', 'INFO', 'Nightly backup complete · 24.8 GB · S3-ap-south-1'],
          ].map(([t, lv, msg], i) => (
            <div key={i}>
              <span style={{ color: 'var(--text-muted)' }}>{t}</span>{' '}
              <span style={{ color: lv === 'ALERT' ? 'var(--gk-danger)' : lv === 'WARN' ? 'var(--gk-warn)' : 'var(--gk-success)', fontWeight: 700 }}>{lv.padEnd(5)}</span>{' '}
              {msg}
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, {
  AdminSidebar, AdminTopbar, KPICard, BarChart, Sparkline, DataTable,
  OrgDashboardScreen, OrgStudentsScreen, OrgStudentDetailScreen, OrgTimetableScreen, OrgAnnouncementsScreen,
  SuperOrgsScreen, SuperHealthScreen,
});