// Screens 3/3 — Auth, Permissions, Notifications, DAR editor, Reports archive,
// Incident detail, Live team map, Approval queue, Site detail/Post Orders, Visitor log, Shift swap
const { Card, Pill, SectionLabel, Button, BottomNav, AppBar, Avatar, Screen } = window;
const { Icon, BDLogo } = window;
const _T3 = () => window.__BD_THEME__ || window.BD_TOKENS.dark;

// ════════════════════════════════════════════════════════════
// 14. LOGIN — PIN keypad + biometric
// ════════════════════════════════════════════════════════════
function ScreenLogin() {
  const t = _T3();
  const nav = window.Nav.useNav();
  const [pin, setPin] = React.useState('');
  const dotsArr = [0,1,2,3,4,5].map(i => i < pin.length ? 1 : 0);
  const tryLogin = (next) => {
    if (next.length >= 6) {
      // accept any 6-digit pin in this prototype
      setTimeout(() => nav.reset('home'), 120);
    }
  };
  const onPress = (n) => {
    if (pin.length >= 6) return;
    const next = pin + n;
    setPin(next);
    tryLogin(next);
  };
  const onBack = () => setPin(p => p.slice(0,-1));
  const onBio = () => nav.reset('home');
  return (
    <div style={{ flex:1, position:'relative', overflow:'hidden',
      background: `radial-gradient(120% 60% at 50% 0%, ${t.primary}33, transparent 60%), ${t.bg}` }}>
      {/* status bar handled by frame */}
      <div style={{ flex:1, display:'flex', flexDirection:'column', padding:'80px 24px 28px', gap:20 }}>
        {/* hero */}
        <div style={{ textAlign:'center' }}>
          <div style={{ display:'inline-flex', padding:14, borderRadius:22,
            background:t.surface, border:`1px solid ${t.line}` }}>
            <BDLogo size={44}/>
          </div>
          <div style={{ fontSize:24, fontWeight:800, color:t.text, marginTop:14, letterSpacing:-0.4 }}>Welcome back, Officer</div>
          <div style={{ fontSize:13, color:t.text3, marginTop:4 }}>Enter your 6-digit passcode</div>
        </div>

        {/* user chip */}
        <div style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 14px',
          background:t.surface, border:`1px solid ${t.line}`, borderRadius:999, alignSelf:'center' }}>
          <Avatar size={28} name="JS" tone="gold" t={t}/>
          <div style={{ fontSize:13, fontWeight:700, color:t.text }}>John Smith</div>
          <span style={{ width:1, height:14, background:t.line }}/>
          <div style={{ fontSize:11.5, color:t.text3, fontWeight:600 }}>SG-1024</div>
          <Icon.ChevD size={14} stroke={t.text3}/>
        </div>

        {/* dots */}
        <div style={{ display:'flex', gap:14, justifyContent:'center', padding:'12px 0' }}>
          {dotsArr.map((on,i)=>(
            <div key={i} style={{
              width:14, height:14, borderRadius:999,
              background: on ? t.primary : 'transparent',
              border: `2px solid ${on ? t.primary : t.lineStrong}`,
              boxShadow: on ? `0 0 12px ${t.primary}66` : 'none',
            }}/>
          ))}
        </div>

        {/* keypad */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12, padding:'0 8px' }}>
          {['1','2','3','4','5','6','7','8','9'].map(n=>(
            <KeypadKey t={t} key={n} num={n} sub={KEYPAD_SUB[n]} onClick={()=>onPress(n)}/>
          ))}
          <button onClick={onBio} style={{
            appearance:'none', cursor:'pointer', border:'none', background:'transparent',
            height:64, color:t.primary, display:'flex', alignItems:'center', justifyContent:'center',
            fontSize:13, fontWeight:700, fontFamily:window.BD_FONT, letterSpacing:0.3,
          }}><Icon.Finger size={26}/></button>
          <KeypadKey t={t} num="0" onClick={()=>onPress('0')}/>
          <button onClick={onBack} style={{
            appearance:'none', cursor:'pointer', border:'none', background:'transparent',
            height:64, color:t.text2, display:'flex', alignItems:'center', justifyContent:'center',
          }}><Icon.X size={20} sw={2}/></button>
        </div>

        <div style={{ display:'flex', justifyContent:'space-between', padding:'4px 8px' }}>
          <button onClick={()=>nav.push('forgot')} style={{ appearance:'none', background:'transparent', border:'none', cursor:'pointer', padding:0, fontSize:12.5, color:t.text3, fontWeight:600, fontFamily:window.BD_FONT }}>Forgot passcode?</button>
          <button onClick={onBio} style={{ appearance:'none', background:'transparent', border:'none', cursor:'pointer', padding:0, fontSize:12.5, color:t.primary, fontWeight:700, display:'flex', alignItems:'center', gap:5, fontFamily:window.BD_FONT }}>
            <Icon.Finger size={14}/> Use Face ID
          </button>
        </div>
      </div>
    </div>
  );
}
const KEYPAD_SUB = {
  '2':'ABC','3':'DEF','4':'GHI','5':'JKL','6':'MNO','7':'PQRS','8':'TUV','9':'WXYZ'
};
function KeypadKey({ t, num, sub, onClick }) {
  return (
    <button onClick={onClick} style={{
      appearance:'none', cursor:'pointer', border:`1px solid ${t.line}`,
      background:t.surface, height:64, borderRadius:18, color:t.text,
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
      fontFamily: window.BD_FONT,
    }}>
      <span style={{ fontSize:24, fontWeight:600, lineHeight:1 }}>{num}</span>
      {sub && <span style={{ fontSize:9, color:t.text3, fontWeight:700, letterSpacing:1.5, marginTop:2 }}>{sub}</span>}
    </button>
  );
}

// ════════════════════════════════════════════════════════════
// 15. PERMISSIONS — onboarding
// ════════════════════════════════════════════════════════════
function ScreenPermissions() {
  const t = _T3();
  return (
    <>
      <div style={{ padding:'54px 18px 0', display:'flex', justifyContent:'space-between' }}>
        <BDLogo size={28}/>
        <span style={{ fontSize:12, color:t.text3, fontWeight:700 }}>3 of 4</span>
      </div>
      <Screen t={t} bottomPad={130}>
        <div style={{ padding:'8px 4px' }}>
          <div style={{ fontSize:12, color:t.primary, fontWeight:800, letterSpacing:1.2, textTransform:'uppercase' }}>Setup</div>
          <div style={{ fontSize:24, fontWeight:800, color:t.text, letterSpacing:-0.4, marginTop:4 }}>Grant a few permissions</div>
          <div style={{ fontSize:13, color:t.text3, marginTop:6, lineHeight:1.5 }}>ByDuty needs these to keep you safe and verify patrols. You can change them anytime in iOS Settings.</div>
        </div>

        <PermRow t={t} icon={<Icon.Pin size={20}/>} tone="primary"
          title="Location · Always" status="granted"
          desc="Verify checkpoint scans and stream live position to dispatch during shifts."/>
        <PermRow t={t} icon={<Icon.Camera size={20}/>} tone="purple"
          title="Camera" status="granted"
          desc="Scan QR checkpoints and capture photo evidence on incidents."/>
        <PermRow t={t} icon={<Icon.Mic size={20}/>} tone="teal"
          title="Microphone" status="pending"
          desc="Voice notes on patrols and dictation for incident reports."/>
        <PermRow t={t} icon={<Icon.Bell size={20}/>} tone="warn"
          title="Notifications" status="needed"
          desc="Dispatch broadcasts, shift reminders, and missed-checkpoint alerts."/>
        <PermRow t={t} icon={<Icon.Finger size={20}/>} tone="gold"
          title="Face ID / Touch ID" status="optional"
          desc="Skip the passcode on app launch. Used only on this device."/>

        <div style={{
          display:'flex', gap:10, padding:12, background:t.successSoft,
          border:`1px solid ${t.success}33`, borderRadius:12,
        }}>
          <Icon.Shield size={18} stroke={t.success}/>
          <div style={{ fontSize:12, color:t.text2, lineHeight:1.5 }}>
            Your location is shared with ByDuty <b style={{color:t.text}}>only when you're on duty</b>. Audio recording requires a tap to start.
          </div>
        </div>
      </Screen>

      <div style={{ position:'absolute', left:0, right:0, bottom:0, padding:'10px 16px 32px',
        background: `linear-gradient(180deg, transparent, ${t.bg2})`, display:'flex', gap:10 }}>
        <Button t={t} tone="ghost" size="lg" style={{ flex:1 }}>Skip</Button>
        <Button t={t} tone="primary" size="lg" style={{ flex:2 }}>Continue</Button>
      </div>
    </>
  );
}
function PermRow({ t, icon, tone, title, desc, status }) {
  const map = {
    granted: ['Granted','success', <Icon.Check size={12} sw={3}/>],
    pending: ['Asking now','primary', null],
    needed:  ['Needed','warn', null],
    optional:['Optional','muted', null],
  };
  const [label, pillTone, pillIcon] = map[status];
  return (
    <Card t={t}>
      <div style={{ display:'flex', gap:12 }}>
        <div style={{ width:42, height:42, borderRadius:12, flexShrink:0,
          background:t[tone+'Soft'], color:t[tone],
          display:'flex', alignItems:'center', justifyContent:'center' }}>{icon}</div>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
            <div style={{ fontSize:14.5, fontWeight:700, color:t.text }}>{title}</div>
            <Pill tone={pillTone} t={t} size="sm">{pillIcon}{label}</Pill>
          </div>
          <div style={{ fontSize:12, color:t.text3, marginTop:4, lineHeight:1.45 }}>{desc}</div>
        </div>
      </div>
    </Card>
  );
}

// ════════════════════════════════════════════════════════════
// 16. NOTIFICATIONS — center
// ════════════════════════════════════════════════════════════
function ScreenNotifications() {
  const t = _T3();
  return (
    <>
      <AppBar t={t} title="Notifications" back/>
      <Screen t={t}>
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', padding:'0 4px' }}>
          <div>
            <div style={{ fontSize:13, color:t.text3, fontWeight:600 }}>4 unread</div>
            <div style={{ fontSize:22, fontWeight:800, color:t.text, letterSpacing:-0.3 }}>Activity</div>
          </div>
          <span style={{ fontSize:13, color:t.primary, fontWeight:700 }}>Mark all read</span>
        </div>

        <div style={{ display:'flex', gap:6, padding:4, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
          {[['All',true],['Critical',false,1],['Mentions',false,2],['System',false]].map(([l,on,b],i)=>(
            <div key={i} style={{ flex:1, textAlign:'center', padding:'7px 8px', borderRadius:8,
              background: on?t.primary:'transparent', color:on?'#fff':t.text2,
              fontSize:12, fontWeight:700 }}>
              {l}{b!=null && <span style={{ marginLeft:6, fontSize:10, padding:'1px 5px',
                borderRadius:999, background:t.dangerSoft, color:t.danger }}>{b}</span>}
            </div>
          ))}
        </div>

        <SectionLabel t={t}>Today</SectionLabel>
        <NotifRow t={t} unread tone="danger" icon={<Icon.AlertTri size={18}/>}
          title="Panic alert resolved" sub="Officer Sarah Williams · Building C"
          when="just now" cta="View"/>
        <NotifRow t={t} unread tone="warn" icon={<Icon.Bolt size={18}/>}
          title="Missed checkpoint" sub="PR-001 · South Gate · auto-flagged"
          when="12 min" cta="Review"/>
        <NotifRow t={t} unread tone="primary" icon={<Icon.Headset size={18}/>}
          title="Dispatch broadcast" sub="“All units, severe weather warning until 14:00.”"
          when="38 min"/>
        <NotifRow t={t} unread tone="purple" icon={<Icon.Chat size={18}/>}
          title="Mike Johnson mentioned you" sub="“@John can you take the lobby?”"
          when="1h"/>

        <SectionLabel t={t}>Yesterday</SectionLabel>
        <NotifRow t={t} tone="success" icon={<Icon.ClipChk size={18}/>}
          title="Daily Activity Report submitted" sub="DAR-20240519 · approved by M. Johnson"
          when="May 19"/>
        <NotifRow t={t} tone="muted" icon={<Icon.Cal size={18}/>}
          title="Shift swap approved" sub="Swapped Sat May 25 with David Brown"
          when="May 19"/>
        <NotifRow t={t} tone="muted" icon={<Icon.Wrench size={18}/>}
          title="App update available" sub="ByDuty 3.0.2 · maintenance window 23:00 UTC"
          when="May 18"/>
      </Screen>
      <BottomNav active="more" t={t}/>
    </>
  );
}
function NotifRow({ t, tone, icon, title, sub, when, unread, cta }) {
  return (
    <div style={{
      display:'flex', gap:12, alignItems:'flex-start', padding:'12px 12px',
      background: unread ? t.primarySoft : t.surface,
      border:`1px solid ${unread ? t.primary+'30' : t.line}`, borderRadius:14,
      position:'relative',
    }}>
      <div style={{ width:36, height:36, borderRadius:10, flexShrink:0,
        background:t[tone+'Soft']||t.line, color:t[tone]||t.text2,
        display:'flex', alignItems:'center', justifyContent:'center' }}>{icon}</div>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ display:'flex', justifyContent:'space-between', gap:8 }}>
          <div style={{ fontSize:13.5, fontWeight:700, color:t.text }}>{title}</div>
          <span style={{ fontSize:11, color:t.text3, fontWeight:700, whiteSpace:'nowrap' }}>{when}</span>
        </div>
        <div style={{ fontSize:12, color:t.text3, marginTop:2, lineHeight:1.45 }}>{sub}</div>
        {cta && <div style={{ marginTop:8 }}><Button t={t} tone="soft" size="md">{cta}</Button></div>}
      </div>
      {unread && <span style={{ position:'absolute', top:14, right:14, width:8, height:8, borderRadius:999, background:t.primary }}/>}
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 17. DAILY ACTIVITY REPORT (DAR) — editor with signature
// ════════════════════════════════════════════════════════════
function ScreenDAREditor() {
  const t = _T3();
  return (
    <>
      <AppBar t={t} title="New Report" back right={
        <Pill tone="warn" t={t} size="sm">Draft</Pill>
      }/>
      <Screen t={t}>
        <div style={{ padding:'0 4px' }}>
          <div style={{ fontSize:12, color:t.primary, fontWeight:800, letterSpacing:1.2, textTransform:'uppercase' }}>Daily Activity Report</div>
          <div style={{ fontSize:22, fontWeight:800, color:t.text, letterSpacing:-0.3, marginTop:2 }}>Tue, May 14 · Day Shift</div>
          <div style={{ fontSize:12, color:t.text3, marginTop:2 }}>Auto-saved 2 min ago · DAR-20240514-SG1024</div>
        </div>

        {/* meta */}
        <Card t={t} pad={0}>
          {[
            [<Icon.Pin size={16}/>,'Site','Main Building · 123 Security Blvd'],
            [<Icon.Clock size={16}/>,'Shift','07:00 → 15:00 (8h)'],
            [<Icon.User size={16}/>,'Officer','John Smith · SG-1024'],
            [<Icon.Users size={16}/>,'Supervisor','Mike Johnson'],
          ].map(([icon,k,v],i,a)=>(
            <div key={i} style={{ display:'flex', alignItems:'center', gap:10, padding:'11px 14px',
              borderBottom: i===a.length-1?'none':`1px solid ${t.line}` }}>
              <span style={{ color:t.text3 }}>{icon}</span>
              <span style={{ fontSize:11.5, color:t.text3, fontWeight:700, width:74, letterSpacing:0.3, textTransform:'uppercase' }}>{k}</span>
              <span style={{ flex:1, fontSize:13, fontWeight:600, color:t.text }}>{v}</span>
              <Icon.Chev size={14} stroke={t.text3}/>
            </div>
          ))}
        </Card>

        {/* tally row */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:8 }}>
          {[['Patrols','3','primary'],['Checkpoints','24','success'],['Incidents','1','danger'],['Visitors','12','purple']].map(([l,n,tone],i)=>(
            <div key={i} style={{ background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, padding:'10px 8px', textAlign:'center' }}>
              <div style={{ fontSize:18, fontWeight:800, color:t[tone], letterSpacing:-0.3 }}>{n}</div>
              <div style={{ fontSize:10, color:t.text3, fontWeight:700, letterSpacing:0.4, textTransform:'uppercase', marginTop:2 }}>{l}</div>
            </div>
          ))}
        </div>

        <SectionLabel t={t} action="Add entry">Activity log</SectionLabel>
        <Card t={t} pad={0}>
          {[
            ['07:00','Clocked in','Main Entrance','success'],
            ['07:15','Started Patrol PR-001','3 of 6 checkpoints','primary'],
            ['09:45','Reported INC-1007','Suspicious activity · resolved','danger'],
            ['11:00','Lunch break','30 min','warn'],
            ['12:30','Patrol PR-002 complete','8/8 · all on time','success'],
          ].map(([t1,what,where,tone],i,a)=>(
            <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:10, padding:'10px 14px',
              borderBottom: i===a.length-1?'none':`1px solid ${t.line}` }}>
              <span style={{ width:42, fontSize:11.5, color:t.text3, fontWeight:700, fontFamily:'"JetBrains Mono",monospace', paddingTop:1 }}>{t1}</span>
              <span style={{ width:8, height:8, borderRadius:999, background:t[tone], marginTop:5, flexShrink:0 }}/>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:13, fontWeight:700, color:t.text }}>{what}</div>
                <div style={{ fontSize:11.5, color:t.text3 }}>{where}</div>
              </div>
            </div>
          ))}
        </Card>

        <SectionLabel t={t}>Narrative</SectionLabel>
        <Card t={t} style={{ minHeight:104, padding:14 }}>
          <div style={{ fontSize:13, color:t.text2, lineHeight:1.55 }}>
            Shift uneventful aside from incident #INC-1007 at 09:45, where I identified an individual loitering near the loading dock.
            Subject was approached, identified, and asked to leave the premises. All checkpoints completed on schedule…
          </div>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:10 }}>
            <div style={{ display:'flex', gap:6 }}>
              <Pill tone="primary" t={t} size="sm"><Icon.Mic size={11}/> Dictate</Pill>
              <Pill tone="purple" t={t} size="sm"><Icon.Sparkle size={11}/> AI assist</Pill>
            </div>
            <span style={{ fontSize:11, color:t.text3 }}>248 / 2000</span>
          </div>
        </Card>

        <SectionLabel t={t}>Signature</SectionLabel>
        <Card t={t} pad={0} style={{ overflow:'hidden' }}>
          <div style={{ height:120, position:'relative', background: t.surfaceHi,
            backgroundImage: `linear-gradient(${t.line} 1px, transparent 1px)`, backgroundSize: '1px 24px' }}>
            <svg viewBox="0 0 320 120" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
              <path d="M30 80 C 60 50, 90 90, 120 60 S 180 30, 220 70 S 280 80, 300 50"
                stroke={t.text} strokeWidth="2.4" fill="none" strokeLinecap="round"/>
            </svg>
            <div style={{ position:'absolute', left:14, bottom:8, fontSize:10.5, color:t.text3, fontWeight:700, letterSpacing:0.3, textTransform:'uppercase' }}>
              John Smith · {new Date().toLocaleString()}
            </div>
          </div>
          <div style={{ display:'flex', gap:8, padding:10, borderTop:`1px solid ${t.line}` }}>
            <Button t={t} tone="ghost" size="md" full icon={<Icon.Refresh size={14}/>}>Clear</Button>
            <Button t={t} tone="ghost" size="md" full icon={<Icon.Sig size={14}/>}>Saved sig</Button>
          </div>
        </Card>

        <div style={{ display:'flex', gap:10 }}>
          <Button t={t} tone="ghost" size="lg" style={{ flex:1 }}>Save draft</Button>
          <Button t={t} tone="primary" size="lg" style={{ flex:2 }} icon={<Icon.Send size={16} sw={2.2}/>}>Submit DAR</Button>
        </div>
      </Screen>
      <BottomNav active="reports" t={t}/>
    </>
  );
}

// ════════════════════════════════════════════════════════════
// 18. REPORTS ARCHIVE — DAR list
// ════════════════════════════════════════════════════════════
function ScreenReports() {
  const t = _T3();
  return (
    <>
      <AppBar t={t} title="Reports"/>
      <Screen t={t}>
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', padding:'0 4px' }}>
          <div>
            <div style={{ fontSize:13, color:t.text3, fontWeight:600 }}>Last 30 days</div>
            <div style={{ fontSize:22, fontWeight:800, color:t.text, letterSpacing:-0.3 }}>22 reports</div>
          </div>
          <Button t={t} tone="primary" size="md" icon={<Icon.Plus size={16} sw={2.5}/>}>New DAR</Button>
        </div>

        {/* sparkline-ish bar chart */}
        <Card t={t}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', height:64, gap:4 }}>
            {[2,3,1,4,3,2,5,3,4,6,4,3,5,4,3,5,7,4,3,5,4,6,4,5,3,4,5,3,6,4].map((v,i)=>(
              <div key={i} style={{
                flex:1, height:`${v*12}px`, borderRadius:3,
                background: i===28 ? t.primary : t.lineStrong,
              }}/>
            ))}
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', marginTop:8, fontSize:11, color:t.text3, fontWeight:600 }}>
            <span>Apr 15</span>
            <span style={{color:t.text}}><b>22</b> reports · 3 pending review</span>
            <span>May 14</span>
          </div>
        </Card>

        {/* search + filters */}
        <div style={{ display:'flex', gap:8 }}>
          <div style={{ flex:1, display:'flex', alignItems:'center', gap:8, padding:'10px 12px',
            background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
            <Icon.Search size={16} stroke={t.text3}/>
            <span style={{ fontSize:13, color:t.text3 }}>Search reports…</span>
          </div>
          <button style={{ appearance:'none', cursor:'pointer', padding:'10px 14px', borderRadius:12,
            background:t.surface, border:`1px solid ${t.line}`, color:t.text2, fontSize:12.5, fontWeight:700,
            display:'flex', alignItems:'center', gap:6, fontFamily:window.BD_FONT }}>
            <Icon.Filter size={14}/> May
          </button>
        </div>

        <div style={{ display:'flex', gap:6, overflowX:'auto', padding:'0 4px' }}>
          {[['All',true],['Drafts'],['Submitted'],['Approved'],['Rejected']].map(([l,on],i)=>(
            <button key={i} style={{
              appearance:'none', cursor:'pointer', padding:'7px 13px', borderRadius:999,
              border: on?'none':`1px solid ${t.line}`,
              background: on?t.primary:t.surface, color: on?'#fff':t.text2,
              fontSize:12, fontWeight:700, whiteSpace:'nowrap', fontFamily:window.BD_FONT,
            }}>{l}</button>
          ))}
        </div>

        {[
          ['DAR-20240514','Today','Day Shift · Main Building','draft','warn','01:23 PM'],
          ['DAR-20240513','Yesterday','Day Shift · Main Building','submitted','primary','03:12 PM'],
          ['DAR-20240512','May 12','Day Shift · Warehouse','approved','success','04:00 PM'],
          ['DAR-20240511','May 11','Night Shift · Building C','approved','success','07:18 AM'],
          ['DAR-20240510','May 10','Day Shift · Main Building','rejected','danger','03:45 PM'],
        ].map(([id,date,detail,status,tone,time],i)=>(
          <Card key={i} t={t}>
            <div style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
              <div style={{ width:42, height:42, borderRadius:11, background:t[tone+'Soft'], color:t[tone],
                display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <Icon.Doc size={18}/>
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
                  <div style={{ fontSize:14, fontWeight:700, color:t.text, fontFamily:'"JetBrains Mono",monospace' }}>{id}</div>
                  <Pill tone={tone} t={t} size="sm">{status}</Pill>
                </div>
                <div style={{ fontSize:11.5, color:t.text3, marginTop:4, display:'flex', alignItems:'center', gap:8 }}>
                  <span style={{color:t.text2, fontWeight:700}}>{date}</span>
                  <span>·</span>
                  <span style={{flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{detail}</span>
                </div>
                <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:8 }}>
                  <div style={{ display:'flex', gap:8, fontSize:11, color:t.text3, fontWeight:600 }}>
                    <span style={{display:'flex', alignItems:'center', gap:3}}><Icon.Map size={11}/>3</span>
                    <span style={{display:'flex', alignItems:'center', gap:3}}><Icon.AlertTri size={11}/>1</span>
                    <span style={{display:'flex', alignItems:'center', gap:3}}><Icon.Camera size={11}/>4</span>
                  </div>
                  <span style={{ fontSize:11, color:t.text3 }}>{time}</span>
                </div>
              </div>
            </div>
          </Card>
        ))}
      </Screen>
      <BottomNav active="reports" t={t}/>
    </>
  );
}

// ════════════════════════════════════════════════════════════
// 19. INCIDENT DETAIL — timeline, evidence, comments
// ════════════════════════════════════════════════════════════
function ScreenIncidentDetail() {
  const t = _T3();
  return (
    <>
      <AppBar t={t} title="INC-1007" back right={
        <button style={{ appearance:'none', border:`1px solid ${t.line}`, background:t.surface,
          width:36, height:36, borderRadius:12, display:'flex', alignItems:'center', justifyContent:'center',
          color:t.text, cursor:'pointer' }}><Icon.More size={18}/></button>
      }/>
      <Screen t={t}>
        {/* hero */}
        <Card t={t} pad={0} style={{ overflow:'hidden' }}>
          <div style={{ padding:14, display:'flex', gap:12, alignItems:'flex-start',
            background:`linear-gradient(135deg, ${t.danger}1A, transparent)`, borderBottom:`1px solid ${t.line}` }}>
            <div style={{ width:44, height:44, borderRadius:12, background:t.dangerSoft, color:t.danger,
              display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
              <Icon.AlertTri size={22}/>
            </div>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:8 }}>
                <div style={{ fontSize:11, color:t.danger, fontWeight:800, letterSpacing:1, textTransform:'uppercase' }}>High · Suspicious activity</div>
                <Pill tone="danger" t={t} size="sm">Open</Pill>
              </div>
              <div style={{ fontSize:17, fontWeight:800, color:t.text, marginTop:2, letterSpacing:-0.3 }}>Loitering near loading dock</div>
              <div style={{ fontSize:12, color:t.text3, marginTop:4, display:'flex', gap:8 }}>
                <span style={{display:'flex', alignItems:'center', gap:4}}><Icon.Pin size={11}/> Building A · Loading Dock</span>
                <span>·</span>
                <span style={{display:'flex', alignItems:'center', gap:4}}><Icon.Clock size={11}/> 09:45 AM</span>
              </div>
            </div>
          </div>

          {/* mini map */}
          <div style={{ height:120, position:'relative', background:`radial-gradient(120% 80% at 30% 30%, ${t.surfaceHi}, ${t.bg2})` }}>
            <svg viewBox="0 0 360 120" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
              <g stroke={t.line} strokeWidth="1">
                {Array.from({length:9}).map((_,i)=> <line key={i} x1={i*45} y1="0" x2={i*45} y2="120"/>)}
                {Array.from({length:4}).map((_,i)=> <line key={i} x1="0" y1={i*30} x2="360" y2={i*30}/>)}
              </g>
              <rect x="120" y="40" width="120" height="50" fill={t.line}/>
              <rect x="240" y="55" width="60" height="35" fill={t.lineStrong}/>
              <circle cx="220" cy="80" r="14" fill={t.danger} fillOpacity="0.2"/>
              <circle cx="220" cy="80" r="8" fill={t.danger} stroke="#fff" strokeWidth="2"/>
              <text x="220" y="83.5" textAnchor="middle" fontSize="9" fill="#fff" fontWeight="700">!</text>
            </svg>
            <div style={{ position:'absolute', left:10, bottom:8, padding:'4px 10px',
              background:t.chrome, border:`1px solid ${t.line}`, borderRadius:999, fontSize:11, color:t.text2, fontWeight:600,
              backdropFilter:'blur(10px)' }}>
              40.7128° N, 74.0060° W
            </div>
          </div>
        </Card>

        {/* assignment row */}
        <Card t={t}>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <Avatar size={36} name="JS" tone="gold" t={t}/>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:11, color:t.text3, fontWeight:700, textTransform:'uppercase', letterSpacing:0.4 }}>Reported by</div>
              <div style={{ fontSize:13.5, fontWeight:700, color:t.text }}>John Smith · SG-1024</div>
            </div>
            <div style={{ width:1, height:34, background:t.line }}/>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:11, color:t.text3, fontWeight:700, textTransform:'uppercase', letterSpacing:0.4 }}>Assigned</div>
              <div style={{ fontSize:13.5, fontWeight:700, color:t.text, display:'flex', alignItems:'center', gap:5 }}>
                <Avatar size={20} name="MJ" tone="primary" t={t}/> Mike J.
              </div>
            </div>
          </div>
        </Card>

        {/* evidence strip */}
        <SectionLabel t={t} action="Add">Evidence · 4</SectionLabel>
        <div style={{ display:'flex', gap:8, overflowX:'auto', padding:'0 2px' }}>
          {[
            ['photo','purple', '09:46'],
            ['photo','purple', '09:47'],
            ['video','primary','09:48'],
            ['voice','teal',   '09:50'],
          ].map(([kind,tone,time],i)=>(
            <div key={i} style={{ width:96, height:96, borderRadius:12, flexShrink:0,
              background:t.surface, border:`1px solid ${t.line}`, position:'relative', overflow:'hidden' }}>
              <div style={{
                position:'absolute', inset:0, background:
                  `linear-gradient(135deg, ${t[tone]}40, ${t.surface2})`,
                display:'flex', alignItems:'center', justifyContent:'center', color:t[tone],
              }}>
                {kind==='photo' && <Icon.Camera size={26}/>}
                {kind==='video' && <Icon.Play size={26}/>}
                {kind==='voice' && <Icon.Wave size={26}/>}
              </div>
              <span style={{ position:'absolute', bottom:6, left:6, fontSize:10, color:'#fff', fontWeight:700,
                background:'rgba(0,0,0,0.5)', padding:'2px 6px', borderRadius:6, backdropFilter:'blur(4px)' }}>{time}</span>
            </div>
          ))}
        </div>

        {/* description */}
        <SectionLabel t={t}>Description</SectionLabel>
        <Card t={t}>
          <div style={{ fontSize:13.5, color:t.text2, lineHeight:1.55 }}>
            Subject was observed loitering near the loading dock for &gt;10 minutes, attempting to look through windows.
            Approached and identified at 09:50. Subject claimed to be waiting for a delivery; no scheduled delivery on log.
            Asked to leave premises; complied without incident.
          </div>
        </Card>

        {/* timeline */}
        <SectionLabel t={t}>Timeline</SectionLabel>
        <Card t={t} pad={0}>
          {[
            ['09:45','Incident reported','John Smith','danger',<Icon.AlertTri size={14}/>],
            ['09:48','Photos & video added','+3 attachments','primary',<Icon.Camera size={14}/>],
            ['09:52','Mike Johnson assigned','Supervisor','purple',<Icon.User size={14}/>],
            ['10:05','Status: investigating','Hand-off acknowledged','warn',<Icon.Clock size={14}/>],
            ['10:18','Subject identified','Visitor log updated','primary',<Icon.ClipChk size={14}/>],
          ].map(([time,what,sub,tone,icon],i,a)=>(
            <div key={i} style={{ display:'flex', gap:10, padding:'12px 14px',
              borderBottom: i===a.length-1?'none':`1px solid ${t.line}`, position:'relative' }}>
              <span style={{ width:42, fontSize:11, color:t.text3, fontWeight:700, fontFamily:'"JetBrains Mono",monospace', paddingTop:3 }}>{time}</span>
              <div style={{ position:'relative', display:'flex', flexDirection:'column', alignItems:'center' }}>
                <div style={{ width:24, height:24, borderRadius:999, background:t[tone+'Soft'], color:t[tone],
                  display:'flex', alignItems:'center', justifyContent:'center' }}>{icon}</div>
                {i<a.length-1 && <div style={{ flex:1, width:2, background:t.line, marginTop:2 }}/>}
              </div>
              <div style={{ flex:1, paddingBottom: i===a.length-1?0:6 }}>
                <div style={{ fontSize:13, fontWeight:700, color:t.text }}>{what}</div>
                <div style={{ fontSize:11.5, color:t.text3, marginTop:1 }}>{sub}</div>
              </div>
            </div>
          ))}
        </Card>

        {/* actions */}
        <div style={{ display:'flex', gap:10 }}>
          <Button t={t} tone="ghost" size="lg" style={{ flex:1 }} icon={<Icon.Chat size={16}/>}>Comment</Button>
          <Button t={t} tone="success" size="lg" style={{ flex:1 }} icon={<Icon.Check size={16} sw={2.2}/>}>Resolve</Button>
        </div>
      </Screen>
    </>
  );
}

// ════════════════════════════════════════════════════════════
// 20. LIVE TEAM MAP — supervisor
// ════════════════════════════════════════════════════════════
function ScreenTeamMap() {
  const t = _T3();
  return (
    <>
      <AppBar t={t} title="Live Team" back right={
        <Pill tone="success" t={t} size="sm">
          <span style={{ width:5, height:5, borderRadius:999, background:t.success }}/> Live
        </Pill>
      }/>

      {/* map fills available height */}
      <div style={{ flex:1, position:'relative', overflow:'hidden', background:t.bg2, margin:'0 16px', borderRadius:18, border:`1px solid ${t.line}` }}>
        <svg viewBox="0 0 360 460" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
          <defs>
            <pattern id="teamgrid" width="36" height="36" patternUnits="userSpaceOnUse">
              <path d="M36 0H0V36" fill="none" stroke={t.line} strokeWidth="1"/>
            </pattern>
          </defs>
          <rect width="360" height="460" fill="url(#teamgrid)"/>
          {/* buildings */}
          <g fill={t.surface} stroke={t.lineStrong} strokeWidth="1">
            <rect x="40" y="50" width="120" height="80" rx="4"/>
            <rect x="200" y="60" width="130" height="60" rx="4"/>
            <rect x="60" y="180" width="160" height="100" rx="4"/>
            <rect x="240" y="200" width="80" height="80" rx="4"/>
            <rect x="100" y="320" width="180" height="90" rx="4"/>
          </g>
          {/* paths */}
          <path d="M80 100 L150 200 L250 250 L200 350" stroke={t.primary} strokeOpacity="0.4" strokeDasharray="4 4" strokeWidth="2" fill="none"/>
          <path d="M280 90 L300 230" stroke={t.purple} strokeOpacity="0.4" strokeDasharray="4 4" strokeWidth="2" fill="none"/>

          {/* officer markers */}
          <Marker cx={150} cy={200} name="JS" tone={t.primary} active/>
          <Marker cx={280} cy={90}  name="MJ" tone={t.purple}/>
          <Marker cx={250} cy={250} name="SW" tone={t.success}/>
          <Marker cx={130} cy={360} name="DB" tone={t.warn}/>
          <Marker cx={300} cy={360} name="RG" tone={t.danger} alert/>

          {/* incident pin */}
          <g>
            <circle cx="200" cy="220" r="14" fill={t.danger} fillOpacity="0.15"/>
            <circle cx="200" cy="220" r="8" fill={t.danger} stroke="#fff" strokeWidth="2"/>
            <text x="200" y="223.5" textAnchor="middle" fontSize="9" fill="#fff" fontWeight="700">!</text>
          </g>
        </svg>

        {/* stat overlay top */}
        <div style={{ position:'absolute', top:10, left:10, right:10, display:'flex', gap:8 }}>
          {[['On Duty','5','success'],['On Patrol','3','primary'],['Alerts','1','danger']].map(([l,n,tone],i)=>(
            <div key={i} style={{ flex:1, padding:'8px 10px', background:t.chrome, backdropFilter:'blur(10px)',
              border:`1px solid ${t.line}`, borderRadius:10 }}>
              <div style={{ fontSize:10, color:t.text3, fontWeight:700, textTransform:'uppercase', letterSpacing:0.4 }}>{l}</div>
              <div style={{ fontSize:18, fontWeight:800, color:t[tone], letterSpacing:-0.3 }}>{n}</div>
            </div>
          ))}
        </div>

        {/* zoom buttons */}
        <div style={{ position:'absolute', right:10, bottom:130, display:'flex', flexDirection:'column', gap:6 }}>
          {[<Icon.Plus size={16}/>, <span style={{fontSize:18,fontWeight:700}}>−</span>, <Icon.Crosshair size={16}/>].map((c,i)=>(
            <button key={i} style={{ width:34, height:34, borderRadius:10, border:`1px solid ${t.line}`,
              background:t.chrome, backdropFilter:'blur(10px)', color:t.text2, cursor:'pointer',
              display:'flex', alignItems:'center', justifyContent:'center' }}>{c}</button>
          ))}
        </div>
      </div>

      {/* officer list overlay */}
      <div style={{ padding:'12px 16px', background:t.bg2, borderTop:`1px solid ${t.line}` }}>
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:8 }}>
          <div style={{ fontSize:13, color:t.text, fontWeight:700 }}>5 officers on shift</div>
          <span style={{ fontSize:12, color:t.primary, fontWeight:700 }}>Filter</span>
        </div>
        <div style={{ display:'flex', gap:8, overflowX:'auto' }}>
          {[
            ['JS','John Smith','Patrolling','primary'],
            ['MJ','Mike J.','Stationed','purple'],
            ['SW','Sarah W.','En route','success'],
            ['DB','David B.','Break','warn'],
            ['RG','R. Garcia','SOS','danger'],
          ].map(([n,name,status,tone],i)=>(
            <div key={i} style={{ flexShrink:0, width:120, padding:10, borderRadius:12,
              background:t.surface, border: tone==='danger'?`1px solid ${t.danger}`:`1px solid ${t.line}` }}>
              <Avatar size={28} name={n} tone={tone} t={t}/>
              <div style={{ fontSize:12, fontWeight:700, color:t.text, marginTop:6, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{name}</div>
              <div style={{ fontSize:10.5, color:t[tone], fontWeight:700, letterSpacing:0.4, textTransform:'uppercase', marginTop:2 }}>{status}</div>
            </div>
          ))}
        </div>
      </div>

      <BottomNav active="patrol" t={t}/>
    </>
  );
}
function Marker({ cx, cy, name, tone, active, alert }) {
  return (
    <g>
      {(active || alert) && <circle cx={cx} cy={cy} r="20" fill={tone} fillOpacity={alert?0.25:0.15}/>}
      <circle cx={cx} cy={cy} r="14" fill={tone} stroke="#fff" strokeWidth="2"/>
      <text x={cx} y={cy+4} textAnchor="middle" fontSize="10" fill="#fff" fontWeight="700">{name}</text>
      {alert && <circle cx={cx+11} cy={cy-11} r="4.5" fill="#EF4444" stroke="#fff" strokeWidth="1.5"/>}
    </g>
  );
}

// ════════════════════════════════════════════════════════════
// 21. APPROVAL QUEUE — supervisor
// ════════════════════════════════════════════════════════════
function ScreenApprovals() {
  const t = _T3();
  return (
    <>
      <AppBar t={t} title="Approvals" back/>
      <Screen t={t}>
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', padding:'0 4px' }}>
          <div>
            <div style={{ fontSize:13, color:t.text3, fontWeight:600 }}>Awaiting your review</div>
            <div style={{ fontSize:22, fontWeight:800, color:t.text, letterSpacing:-0.3 }}>9 pending</div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontSize:11, color:t.text3, fontWeight:700, letterSpacing:0.3, textTransform:'uppercase' }}>Avg time</div>
            <div style={{ fontSize:14, fontWeight:800, color:t.success }}>1.2h</div>
          </div>
        </div>

        {/* type tabs */}
        <div style={{ display:'flex', gap:6, padding:4, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
          {[['All',9,true],['Timesheets',4],['Time-off',2],['Swaps',2],['DARs',1]].map(([l,b,on],i)=>(
            <div key={i} style={{ flex:1, textAlign:'center', padding:'7px 6px', borderRadius:8,
              background: on?t.primary:'transparent', color:on?'#fff':t.text2,
              fontSize:11.5, fontWeight:700, position:'relative' }}>
              {l}
              <span style={{ marginLeft:4, fontSize:10, padding:'1px 5px', borderRadius:999,
                background: on?'#ffffff33':t.surface2, color: on?'#fff':t.text3 }}>{b}</span>
            </div>
          ))}
        </div>

        <ApprovalRow t={t} tone="primary" icon={<Icon.Clock size={18}/>}
          who="Sarah Williams" type="Timesheet" detail="May 13 · 8h 14m · 14m overtime"
          deadline="Today 17:00" priority="High"/>
        <ApprovalRow t={t} tone="purple" icon={<Icon.Cal size={18}/>}
          who="David Brown" type="Time-off" detail="May 24 — 26 · PTO · 24h"
          deadline="May 21" priority="Medium"/>
        <ApprovalRow t={t} tone="teal" icon={<Icon.Swap size={18}/>}
          who="John Smith ↔ David Brown" type="Shift swap" detail="Sat May 25 · Day Shift"
          deadline="May 22" priority="Medium"/>
        <ApprovalRow t={t} tone="warn" icon={<Icon.Doc size={18}/>}
          who="John Smith" type="DAR" detail="DAR-20240514 · 3 patrols, 1 incident"
          deadline="Tomorrow" priority="Low"/>
        <ApprovalRow t={t} tone="primary" icon={<Icon.Clock size={18}/>}
          who="Mike Johnson" type="Timesheet" detail="May 12 · 8h · clean"
          deadline="May 16" priority="Low"/>
      </Screen>
      <BottomNav active="more" t={t}/>
    </>
  );
}
function ApprovalRow({ t, tone, icon, who, type, detail, deadline, priority }) {
  const pTone = priority==='High'?'danger':priority==='Medium'?'warn':'muted';
  return (
    <Card t={t}>
      <div style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
        <div style={{ width:38, height:38, borderRadius:11, flexShrink:0,
          background:t[tone+'Soft'], color:t[tone],
          display:'flex', alignItems:'center', justifyContent:'center' }}>{icon}</div>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
            <div style={{ fontSize:11, color:t[tone], fontWeight:800, letterSpacing:0.5, textTransform:'uppercase' }}>{type}</div>
            <Pill tone={pTone} t={t} size="sm">{priority}</Pill>
          </div>
          <div style={{ fontSize:14, fontWeight:700, color:t.text, marginTop:2 }}>{who}</div>
          <div style={{ fontSize:12, color:t.text3, marginTop:3 }}>{detail}</div>
          <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:6, fontSize:11.5, color:t.text3 }}>
            <Icon.Clock size={11}/> Due {deadline}
          </div>
        </div>
      </div>
      <div style={{ display:'flex', gap:8, marginTop:12 }}>
        <Button t={t} tone="ghost" size="md" style={{ flex:1 }}>Review</Button>
        <Button t={t} tone="primary" size="md" style={{ flex:1 }} icon={<Icon.Check size={14} sw={2.5}/>}>Approve</Button>
      </div>
    </Card>
  );
}

// ════════════════════════════════════════════════════════════
// 22. SITE DETAIL / POST ORDERS / SOPs
// ════════════════════════════════════════════════════════════
function ScreenSiteDetail() {
  const t = _T3();
  return (
    <>
      <AppBar t={t} title="Main Building" back right={
        <Pill tone="success" t={t} size="sm">Active</Pill>
      }/>
      <Screen t={t}>
        {/* hero */}
        <Card t={t} pad={0} style={{ overflow:'hidden' }}>
          <div style={{ height:120, position:'relative',
            background:`linear-gradient(135deg, ${t.primary}, ${t.purple}99)` }}>
            <svg viewBox="0 0 360 120" preserveAspectRatio="none" style={{ position:'absolute', inset:0, width:'100%', height:'100%', opacity:0.25 }}>
              <g fill="#fff">
                <rect x="20" y="50" width="60" height="70"/>
                <rect x="100" y="35" width="80" height="85"/>
                <rect x="200" y="55" width="70" height="65"/>
                <rect x="290" y="40" width="60" height="80"/>
              </g>
            </svg>
            <div style={{ position:'absolute', bottom:12, left:14 }}>
              <div style={{ fontSize:10.5, color:'#fff', fontWeight:800, letterSpacing:1, textTransform:'uppercase', opacity:0.85 }}>Site SE-001</div>
              <div style={{ fontSize:20, fontWeight:800, color:'#fff', letterSpacing:-0.3, marginTop:2 }}>Main Building</div>
              <div style={{ fontSize:12, color:'#fff', opacity:0.85, marginTop:2, display:'flex', alignItems:'center', gap:5 }}>
                <Icon.Pin size={11}/> 123 Security Blvd · NYC
              </div>
            </div>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)' }}>
            {[['Posts','3'],['Patrols','6'],['CPs','24'],['Officers','5']].map(([l,n],i,a)=>(
              <div key={i} style={{ padding:'10px 4px', textAlign:'center',
                borderRight: i===a.length-1?'none':`1px solid ${t.line}`,
                borderTop: 'none' }}>
                <div style={{ fontSize:18, fontWeight:800, color:t.text, letterSpacing:-0.3 }}>{n}</div>
                <div style={{ fontSize:10, color:t.text3, fontWeight:700, letterSpacing:0.4, textTransform:'uppercase', marginTop:1 }}>{l}</div>
              </div>
            ))}
          </div>
        </Card>

        {/* contacts strip */}
        <Card t={t}>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <Avatar size={32} name="MJ" tone="primary" t={t}/>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:11, color:t.text3, fontWeight:700, letterSpacing:0.4, textTransform:'uppercase' }}>Site Supervisor</div>
              <div style={{ fontSize:13.5, fontWeight:700, color:t.text }}>Mike Johnson</div>
            </div>
            <Button t={t} tone="soft" size="md" icon={<Icon.Phone size={14}/>}>Call</Button>
            <Button t={t} tone="soft" size="md" icon={<Icon.Chat size={14}/>}>Chat</Button>
          </div>
        </Card>

        {/* SOPs */}
        <SectionLabel t={t} action="View all">Post Orders & SOPs</SectionLabel>
        {[
          ['Standard Operating Procedures','12 sections · updated May 1','primary',<Icon.Doc size={18}/>,'Required'],
          ['Emergency Action Plan','Fire, medical, evacuation','danger',<Icon.AlertTri size={18}/>,'Acknowledged'],
          ['Visitor Access Policy','Employees · contractors · guests','purple',<Icon.User size={18}/>,'Updated'],
          ['Vehicle & Loading Dock','Inspection checklist','gold',<Icon.Truck size={18}/>,null],
        ].map(([t1,sub,tone,icon,badge],i)=>(
          <div key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:12,
            background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
            <div style={{ width:36, height:36, borderRadius:10, background:t[tone+'Soft'], color:t[tone],
              display:'flex', alignItems:'center', justifyContent:'center' }}>{icon}</div>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:13.5, fontWeight:700, color:t.text }}>{t1}</div>
              <div style={{ fontSize:11.5, color:t.text3, marginTop:2 }}>{sub}</div>
            </div>
            {badge && <Pill tone={badge==='Required'?'danger':badge==='Updated'?'warn':'success'} t={t} size="sm">{badge}</Pill>}
            <Icon.Chev size={14} stroke={t.text3}/>
          </div>
        ))}

        <SectionLabel t={t}>Posts</SectionLabel>
        <Card t={t} pad={0}>
          {[
            ['North Gate','Primary entry · 24/7','success','You'],
            ['South Loading Dock','Mon — Fri · 06:00–18:00','primary','S. Williams'],
            ['Roving Interior','Building A & B','purple','D. Brown'],
          ].map(([n,sub,tone,who],i,a)=>(
            <div key={i} style={{ display:'flex', alignItems:'center', gap:10, padding:'12px 14px',
              borderBottom: i===a.length-1?'none':`1px solid ${t.line}` }}>
              <div style={{ width:8, height:8, borderRadius:999, background:t[tone] }}/>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:13.5, fontWeight:700, color:t.text }}>{n}</div>
                <div style={{ fontSize:11.5, color:t.text3, marginTop:1 }}>{sub}</div>
              </div>
              <div style={{ fontSize:11.5, color:t.text3, fontWeight:600 }}>{who}</div>
            </div>
          ))}
        </Card>

        <SectionLabel t={t}>Quick info</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
          {[
            ['Geofence','120m radius'],
            ['Time zone','UTC−5'],
            ['Hours','24 / 7'],
            ['Area','42,000 sq ft'],
          ].map(([k,v],i)=>(
            <div key={i} style={{ padding:12, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
              <div style={{ fontSize:10.5, color:t.text3, fontWeight:700, letterSpacing:0.4, textTransform:'uppercase' }}>{k}</div>
              <div style={{ fontSize:14, fontWeight:700, color:t.text, marginTop:3 }}>{v}</div>
            </div>
          ))}
        </div>
      </Screen>
      <BottomNav active="more" t={t}/>
    </>
  );
}

// ════════════════════════════════════════════════════════════
// 23. VISITOR LOG / CHECK-IN
// ════════════════════════════════════════════════════════════
function ScreenVisitorLog() {
  const t = _T3();
  return (
    <>
      <AppBar t={t} title="Visitor Log" back right={
        <Button t={t} tone="primary" size="md" icon={<Icon.PinAdd size={14} sw={2.2}/>}>Check in</Button>
      }/>
      <Screen t={t}>
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', padding:'0 4px' }}>
          <div>
            <div style={{ fontSize:13, color:t.text3, fontWeight:600 }}>Today · Tue, May 14</div>
            <div style={{ fontSize:22, fontWeight:800, color:t.text, letterSpacing:-0.3 }}>12 visitors</div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontSize:11, color:t.text3, fontWeight:700, letterSpacing:0.4, textTransform:'uppercase' }}>On site</div>
            <div style={{ fontSize:18, fontWeight:800, color:t.success, letterSpacing:-0.3 }}>4</div>
          </div>
        </div>

        {/* tabs */}
        <div style={{ display:'flex', gap:6, padding:4, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
          {[['All',true],['On site',false,4],['Expected',false,2],['Today',false]].map(([l,on,b],i)=>(
            <div key={i} style={{ flex:1, textAlign:'center', padding:'7px 8px', borderRadius:8,
              background: on?t.primary:'transparent', color: on?'#fff':t.text2,
              fontSize:12, fontWeight:700 }}>
              {l}{b!=null && <span style={{ marginLeft:5, fontSize:10, padding:'1px 5px',
                borderRadius:999, background:t.successSoft, color:t.success }}>{b}</span>}
            </div>
          ))}
        </div>

        {/* search */}
        <div style={{ display:'flex', alignItems:'center', gap:8, padding:'10px 12px',
          background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
          <Icon.Search size={16} stroke={t.text3}/>
          <span style={{ fontSize:13, color:t.text3 }}>Search by name, host, badge…</span>
        </div>

        {[
          ['Anna Chen','Acme Corp · Contractor','Host: M. Johnson','onsite','success','V-1042','In · 09:15'],
          ['Robert Vega','Skyline Couriers · Delivery','Host: Loading Dock','onsite','success','V-1041','In · 09:02'],
          ['Lin Park','Capital Audit · Visitor','Host: Finance Dept','expected','warn','—','Expected 14:00'],
          ['Marco Reyes','HVAC Tech · Contractor','Host: Facilities','outsite','muted','V-1039','Out · 11:42'],
          ['Jordan Hill','Visitor · Personal','Host: D. Brown','flagged','danger','V-1038','Watchlist match'],
        ].map(([name,org,host,status,tone,badge,when],i)=>(
          <Card key={i} t={t}>
            <div style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
              <div style={{ width:42, height:42, borderRadius:12, flexShrink:0,
                background:t[tone+'Soft'], color:t[tone],
                display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
                <Icon.User size={20}/>
                {status==='flagged' && <span style={{ position:'absolute', top:-3, right:-3, width:14, height:14, borderRadius:999, background:t.danger, border:`2px solid ${t.surface}`, display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontSize:8.5, fontWeight:800 }}>!</span>}
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
                  <div style={{ fontSize:14.5, fontWeight:700, color:t.text }}>{name}</div>
                  <Pill tone={tone} t={t} size="sm">{status==='onsite'?'On site':status==='expected'?'Expected':status==='outsite'?'Checked out':'Flagged'}</Pill>
                </div>
                <div style={{ fontSize:11.5, color:t.text3, marginTop:3 }}>{org}</div>
                <div style={{ fontSize:11.5, color:t.text3, marginTop:1 }}>{host}</div>
                <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:8 }}>
                  <span style={{ fontSize:11, color:t.text3, fontWeight:700, fontFamily:'"JetBrains Mono",monospace' }}>{badge}</span>
                  <span style={{ fontSize:11, color:t.text3 }}>{when}</span>
                </div>
              </div>
            </div>
          </Card>
        ))}
      </Screen>
      <BottomNav active="more" t={t}/>
    </>
  );
}

// ════════════════════════════════════════════════════════════
// 24. SHIFT SWAP — request flow
// ════════════════════════════════════════════════════════════
function ScreenShiftSwap() {
  const t = _T3();
  return (
    <>
      <AppBar t={t} title="Request Swap" back/>
      <Screen t={t}>
        <div style={{ padding:'0 4px' }}>
          <div style={{ fontSize:12, color:t.primary, fontWeight:800, letterSpacing:1.2, textTransform:'uppercase' }}>Step 2 of 3</div>
          <div style={{ fontSize:22, fontWeight:800, color:t.text, letterSpacing:-0.3, marginTop:2 }}>Pick someone to cover</div>
          <div style={{ fontSize:13, color:t.text3, marginTop:4 }}>We've found 3 officers eligible to swap.</div>
        </div>

        {/* shift recap */}
        <Card t={t} style={{ background:t.primarySoft, border:`1px solid ${t.primary}33` }}>
          <div style={{ display:'flex', alignItems:'center', gap:12 }}>
            <div style={{ textAlign:'center' }}>
              <div style={{ fontSize:10.5, color:t.primary, fontWeight:800, letterSpacing:0.4, textTransform:'uppercase' }}>Sat</div>
              <div style={{ fontSize:22, fontWeight:800, color:t.text, lineHeight:1, marginTop:2 }}>25</div>
              <div style={{ fontSize:10, color:t.text3, fontWeight:700, marginTop:2 }}>MAY</div>
            </div>
            <div style={{ width:1, alignSelf:'stretch', background:t.primary+'33' }}/>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:14, fontWeight:700, color:t.text }}>Day Shift · 08:00 → 16:00</div>
              <div style={{ fontSize:11.5, color:t.text3, marginTop:2 }}>Main Building · 8h scheduled</div>
              <div style={{ display:'flex', gap:5, marginTop:6 }}>
                <Pill tone="primary" t={t} size="sm"><Icon.Swap size={11}/> Your shift</Pill>
              </div>
            </div>
          </div>
        </Card>

        {/* swap arrow */}
        <div style={{ display:'flex', alignItems:'center', gap:10, padding:'4px 4px' }}>
          <div style={{ flex:1, height:1, background:t.line }}/>
          <div style={{ width:30, height:30, borderRadius:999, background:t.surface, border:`1px solid ${t.line}`,
            color:t.text2, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Icon.Swap size={14}/>
          </div>
          <div style={{ flex:1, height:1, background:t.line }}/>
        </div>

        <SectionLabel t={t}>Eligible officers</SectionLabel>
        {[
          ['DB','David Brown','Off Sat May 25 · 6 swaps · 4.9★','primary','Best match',true],
          ['SW','Sarah Williams','Off Sat May 25 · 12 swaps · 4.8★','success','Available'],
          ['EN','Emma Nguyen','Off Sat May 25 · 3 swaps · 4.7★','muted','Available'],
        ].map(([n,name,sub,tone,badge,sel],i)=>(
          <div key={i} style={{
            display:'flex', alignItems:'center', gap:12, padding:14,
            background: sel ? t.primarySoft : t.surface,
            border: sel ? `2px solid ${t.primary}` : `1px solid ${t.line}`,
            borderRadius:14,
          }}>
            <Avatar size={42} name={n} tone={tone==='muted'?'primary':tone} t={t}/>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                <div style={{ fontSize:14, fontWeight:700, color:t.text }}>{name}</div>
                {sel && <Pill tone="primary" t={t} size="sm"><Icon.Sparkle size={10}/> {badge}</Pill>}
              </div>
              <div style={{ fontSize:11.5, color:t.text3, marginTop:2 }}>{sub}</div>
            </div>
            <div style={{
              width:22, height:22, borderRadius:999,
              background: sel ? t.primary : 'transparent',
              border: sel ? 'none' : `2px solid ${t.lineStrong}`,
              display:'flex', alignItems:'center', justifyContent:'center', color:'#fff',
            }}>{sel && <Icon.Check size={12} sw={3}/>}</div>
          </div>
        ))}

        <SectionLabel t={t}>Reason (optional)</SectionLabel>
        <Card t={t}>
          <div style={{ fontSize:13, color:t.text2, lineHeight:1.5 }}>
            Family event. Will return to normal rotation Monday.
          </div>
        </Card>

        <div style={{ display:'flex', gap:10 }}>
          <Button t={t} tone="ghost" size="lg" style={{ flex:1 }}>Back</Button>
          <Button t={t} tone="primary" size="lg" style={{ flex:2 }} icon={<Icon.Send size={16} sw={2.2}/>}>Send request</Button>
        </div>

        <div style={{ display:'flex', gap:8, padding:10,
          background:t.warnSoft, border:`1px solid ${t.warn}33`, borderRadius:12 }}>
          <Icon.Info size={16} stroke={t.warn}/>
          <div style={{ fontSize:11.5, color:t.text2, lineHeight:1.45 }}>
            Swap requires both officer acceptance and supervisor approval before it's confirmed.
          </div>
        </div>
      </Screen>
      <BottomNav active="more" t={t}/>
    </>
  );
}

Object.assign(window, {
  ScreenLogin, ScreenPermissions, ScreenNotifications, ScreenDAREditor, ScreenReports,
  ScreenIncidentDetail, ScreenTeamMap, ScreenApprovals, ScreenSiteDetail, ScreenVisitorLog, ScreenShiftSwap,
});