// Dashboard — לוח בקרה ראשי
// 3 roles: owner (all projects), admin (all + PM mode), pm (own only)
(function(){
const { useState, useMemo, useEffect } = React;

const PM_LIST = [];
const CURRENT_USER = { id: '', name: '', role: 'admin' };

const fmtNum = (n) => {
  if (!n) return '—';
  if (n >= 1000000) return (n/1000000).toFixed(1) + 'M ₪';
  if (n >= 1000) return Math.round(n/1000) + 'K ₪';
  return n + ' ₪';
};

const DashboardScreen = ({ onOpenProject, onOpenReports, onNewMeeting, onBack }) => {
  const allProjects = YBP_DATA.projects;
  const [filterPm, setFilterPm] = useState('all'); // 'all' | pm id
  const [pmMode, setPmMode] = useState(false); // admin: switch to own projects only
  const [tab, setTab] = useState('overview');
  const [kpiFilter, setKpiFilter] = useState(null); // 'active' | 'delayed' | 'soon' | null
  const { isMobile, isLandscape } = useViewport();

  // v3.9.0.36: real budget totals from Supabase BudgetStore (replaces project.budget which was empty)
  const [budgetTotals, setBudgetTotals] = useState({});
  useEffect(() => {
    if (!window.BudgetStore) return;
    window.BudgetStore.getAllProjectTotals()
      .then(setBudgetTotals)
      .catch(() => setBudgetTotals({}));
  }, []);

  // Effective project list
  const projects = useMemo(() => {
    if (CURRENT_USER.role === 'pm') {
      const myPm = PM_LIST.find(p => p.id === CURRENT_USER.id);
      return allProjects.filter(p => myPm?.projects.includes(p.id));
    }
    if (pmMode) {
      const myPm = PM_LIST.find(p => p.id === CURRENT_USER.id);
      return allProjects.filter(p => myPm?.projects.includes(p.id));
    }
    if (filterPm !== 'all') {
      const pm = PM_LIST.find(p => p.id === filterPm);
      return allProjects.filter(p => pm?.projects.includes(p.id));
    }
    return allProjects;
  }, [filterPm, pmMode]);

  // KPIs
  const kpis = useMemo(() => {
    const active = projects.filter(p => p.status === 'active').length;
    const delayed = projects.filter(p => p.status === 'delay' || p.status === 'attention').length;
    // v3.9.0.36: scoped to currently filtered project ids; budget = offer, spent = actual
    const projectIds = new Set(projects.map(p => p.id));
    let totalBudget = 0, totalSpent = 0;
    Object.entries(budgetTotals).forEach(([pid, t]) => {
      if (projectIds.has(pid)) {
        totalBudget += +t.offer  || 0;
        totalSpent  += +t.actual || 0;
      }
    });
    const openIssues = projects.reduce((s,p) => s+p.openIssues, 0);
    const daysLeft = projects.filter(p => p.status !== 'done' && p.daysLeft < 30).length;
    return { active, delayed, totalBudget, totalSpent, openIssues, daysLeft };
  }, [projects, budgetTotals]);

  // Effective project list (after PM filter + KPI filter)
  const filteredProjects = useMemo(() => {
    let list = projects;
    if (kpiFilter === 'active') list = list.filter(p => p.status === 'active');
    if (kpiFilter === 'delayed') list = list.filter(p => p.status === 'delay' || p.status === 'attention');
    if (kpiFilter === 'soon') list = list.filter(p => p.daysLeft > 0 && p.daysLeft < 30);
    return list;
  }, [projects, kpiFilter]);
  const meetings = YBP_DATA.projectDetail.meetings?.slice(0, 5) || [];

  // Critical tasks
  const criticalTasks = YBP_DATA.projectDetail.tasks?.filter(t =>
    t.status !== 'done' && (t.priority === 'דחוף' || t.priority === 'גבוהה')
  ) || [];

  // Recent updates
  const updates = YBP_DATA.projectDetail.updates?.slice(0, 5) || [];

  const isOwnerOrAdmin = CURRENT_USER.role === 'owner' || CURRENT_USER.role === 'admin';

  return (
    <div style={{
      background: '#0f1419', minHeight: '100%',
      fontFamily: 'Assistant, sans-serif', color: '#e5e7eb', direction: 'rtl',
    }}>
      {/* Header */}
      <header style={{
        background: '#1a2230', borderBottom: '1px solid #2a3444',
        padding: '0 12px', display: 'flex', alignItems: 'center', gap: 6,
        height: isMobile ? 46 : 52, overflowX: isMobile ? 'auto' : 'visible',
      }}>
        {!isMobile && <><img src="assets/ybp-logo-new.png" alt="YBP" style={{ height: 28, objectFit: 'contain', marginLeft: 12 }}/><div style={{ width: 1, height: 32, background: '#2a3444', marginLeft: 8 }}/></>}

        {/* Tabs */}
        {[
          { k: 'overview', label: 'סקירה' },
          { k: 'alerts', label: `התראות${kpis.openIssues > 0 ? ` (${kpis.openIssues})` : ''}` },
          { k: 'meetings', label: 'פגישות' },
          { k: 'updates', label: 'עדכונים' },
        ].map(t => (
          <button key={t.k} onClick={() => setTab(t.k)} style={{
            background: tab === t.k ? '#2a3444' : 'transparent',
            border: 'none', height: '100%', padding: isMobile ? '0 12px' : '0 16px',
            fontSize: isMobile ? 12 : 13, whiteSpace: 'nowrap', flexShrink: 0,
            cursor: 'pointer', color: tab === t.k ? '#fff' : '#9ca3af',
            fontFamily: 'inherit',
            borderBottom: tab === t.k ? '2px solid #3b82f6' : '2px solid transparent',
          }}>{t.label}</button>
        ))}

        <div style={{ flex: 1, minWidth: isMobile ? 8 : 0 }}/>

        {!isMobile && isOwnerOrAdmin && (
          <button onClick={() => { setPmMode(!pmMode); setFilterPm('all'); }} style={{
            background: pmMode ? '#3b82f6' : 'rgba(255,255,255,0.08)',
            border: 'none', padding: '5px 12px', borderRadius: 4, fontSize: 12,
            fontWeight: 600, color: '#fff', cursor: 'pointer', fontFamily: 'inherit', marginLeft: 8,
          }}>
            {pmMode ? '👁 הפרויקטים שלי' : '🏢 כל הפרויקטים'}
          </button>
        )}
        {!isMobile && isOwnerOrAdmin && !pmMode && (
          <select value={filterPm} onChange={e => setFilterPm(e.target.value)} style={{
            background: '#2a3444', border: '1px solid #374151', color: '#e5e7eb',
            padding: '5px 10px', borderRadius: 4, fontSize: 12, fontFamily: 'inherit', cursor: 'pointer',
          }}>
            <option value="all">כל המנהלים</option>
            {PM_LIST.map(pm => (
              <option key={pm.id} value={pm.id}>{pm.name}</option>
            ))}
          </select>
        )}

        <button onClick={onNewMeeting} style={{
          background: '#3b82f6', border: 'none', color: '#fff',
          padding: isMobile ? '5px 10px' : '6px 12px', borderRadius: 4,
          fontSize: 12, fontWeight: 600, flexShrink: 0,
          cursor: 'pointer', fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 4,
        }}>
          <Icon name="plus" size={12}/>{!isMobile && ' פגישה חדשה'}
        </button>
      </header>

      {/* Breadcrumb */}
      <div style={{ padding: '8px 20px', fontSize: 12, color: '#6b7280', borderBottom: '1px solid #2a3444', display: 'flex', alignItems: 'center', gap: 6 }}>
        <span>לוח בקרה</span>
        {pmMode && <><Icon name="chevron" size={10} color="#4b5563"/><span style={{ color: '#3b82f6' }}>מצב מנהל פרויקט</span></>}
        {filterPm !== 'all' && <><Icon name="chevron" size={10} color="#4b5563"/><span style={{ color: '#3b82f6' }}>{PM_LIST.find(p=>p.id===filterPm)?.name}</span></>}
        <span style={{ marginRight: 'auto', fontSize: 11, color: '#4b5563' }}>
          {new Date().toLocaleDateString('he-IL', { weekday:'long', day:'numeric', month:'long', year:'numeric' })}
        </span>
      </div>

      <div style={{ padding: 16, maxWidth: 1400, margin: '0 auto' }}>

        {/* ===== OVERVIEW TAB ===== */}
        {tab === 'overview' && (
          <>
            {/* KPI Row */}
            <div style={{ display: 'grid', gridTemplateColumns: !isMobile ? 'repeat(5, 1fr)' : isLandscape ? 'repeat(5, 1fr)' : 'repeat(2, 1fr)', gap: isMobile ? 8 : 12, marginBottom: isMobile ? 10 : 16 }}>
              {[
                { label: 'פרויקטים פעילים', value: kpis.active, sub: `${projects.length} סה"כ`, color: '#3b82f6', onClick: () => setKpiFilter('active') },
                { label: 'בעיכוב / דחוף', value: kpis.delayed, sub: 'דורש מעקב', color: kpis.delayed > 0 ? '#f59e0b' : '#34d399', onClick: () => setKpiFilter('delayed') },
                { label: 'בעיות פתוחות', value: kpis.openIssues, sub: 'ריג׳קטים ומשימות', color: kpis.openIssues > 5 ? '#ef4444' : '#f59e0b', onClick: () => setTab('alerts') },
                { label: 'מסיימים בקרוב', value: kpis.daysLeft, sub: 'פחות מ-30 יום', color: '#8b5cf6', onClick: () => setKpiFilter('soon') },
                { label: 'פגישות השבוע', value: meetings.filter(m => m.status !== 'past').length, sub: 'מתוכננות', color: '#3b82f6', onClick: () => setTab('meetings') },
              ].map(k => (
                <div key={k.label} onClick={k.onClick} style={{
                  background: kpiFilter === k.label ? '#212b3c' : '#1a2230',
                  border: `1px solid ${kpiFilter === k.label ? k.color : '#2a3444'}`,
                  borderRadius: 6, padding: '14px 16px', borderRight: `3px solid ${k.color}`,
                  cursor: 'pointer', transition: 'all 0.15s',
                }}
                onMouseEnter={e => e.currentTarget.style.background = '#212b3c'}
                onMouseLeave={e => e.currentTarget.style.background = kpiFilter === k.label ? '#212b3c' : '#1a2230'}>
                  <div style={{ fontSize: isMobile ? 10 : 11, color: '#6b7280', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.4 }}>{k.label}</div>
                  <div style={{ fontSize: isMobile ? 22 : 26, fontWeight: 800, color: '#fff', marginTop: 4, letterSpacing: -0.5 }}>{k.value}</div>
                  {!isMobile && <div style={{ fontSize: 11, color: '#4b5563', marginTop: 2, display: 'flex', justifyContent: 'space-between' }}>
                    <span>{k.sub}</span>
                    <span style={{ color: k.color, fontSize: 10, fontWeight: 600 }}>לחץ לצפייה ›</span>
                  </div>}
                </div>
              ))}
            </div>

            {/* Projects + sidebar */}
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 320px', gap: isMobile ? 10 : 14 }}>
              {/* Projects list */}
              <div style={{ background: '#1a2230', border: '1px solid #2a3444', borderRadius: 6, overflow: 'hidden' }}>
                <div style={{ padding: '10px 16px', borderBottom: '1px solid #2a3444', display: 'flex', alignItems: 'center' }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: '#e5e7eb', textTransform: 'uppercase', letterSpacing: 0.5 }}>פרויקטים</div>
                  <span style={{ marginRight: 8, fontSize: 11, color: '#6b7280' }}>{filteredProjects.length}</span>
                  {kpiFilter && (
                    <button onClick={() => setKpiFilter(null)} style={{
                      marginRight: 8, background: '#2a3444', border: 'none', color: '#9ca3af',
                      padding: '3px 8px', borderRadius: 4, fontSize: 11, cursor: 'pointer', fontFamily: 'inherit',
                    }}>✕ נקה פילטר</button>
                  )}
                </div>
                {!isMobile && <div style={{ display: 'grid', gridTemplateColumns: '2.5fr 1fr 1.5fr 1fr 0.8fr', gap: 10, padding: '8px 16px', fontSize: 10.5, color: '#6b7280', fontWeight: 600, textTransform: 'uppercase', borderBottom: '1px solid #212b3c' }}>
                  <div>פרויקט</div><div>סטטוס</div><div>התקדמות</div><div>סיום</div><div>בעיות</div>
                </div>}
                {filteredProjects.map(p => {
                  const statColors = { active: '#60a5fa', done: '#34d399', attention: '#fbbf24', delay: '#f87171' };
                  const statLabels = { active: 'בביצוע', done: 'הושלם', attention: 'תשומת לב', delay: 'בעיכוב' };
                  const c = statColors[p.status] || '#94a3b8';
                  if (isMobile) return (
                    <div key={p.id} onClick={() => onOpenProject(p.id)} style={{
                      padding: '12px 14px', borderBottom: '1px solid #212b3c',
                      cursor: 'pointer', borderRight: `3px solid ${c}`,
                    }}
                    onMouseEnter={e => e.currentTarget.style.background = '#212b3c'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                        <ProjectPlaceholder kind={p.cover} style={{ width: 36, height: 36, borderRadius: 5, flexShrink: 0 }}/>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ color: '#e5e7eb', fontWeight: 700, fontSize: 14, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
                          <div style={{ fontSize: 11, color: '#6b7280', marginTop: 2, display: 'flex', alignItems: 'center', gap: 5 }}>
                            <span style={{ color: c, fontWeight: 700 }}>{statLabels[p.status]}</span>
                            {p.openIssues > 0 && <span style={{ color: '#f87171' }}>· ⚠️ {p.openIssues}</span>}
                          </div>
                        </div>
                        <span style={{ color: '#6b7280', fontSize: 16 }}>›</span>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div style={{ flex: 1, height: 4, background: '#2a3444', borderRadius: 2, overflow: 'hidden' }}>
                          <div style={{ height: '100%', width: `${p.progress}%`, background: c }}/>
                        </div>
                        <span style={{ fontSize: 11, color: '#9ca3af', minWidth: 32 }}>{p.progress}%</span>
                      </div>
                    </div>
                  );
                  return (
                    <div key={p.id} onClick={() => onOpenProject(p.id)} style={{
                      display: 'grid', gridTemplateColumns: '2.5fr 1fr 1.5fr 1fr 0.8fr',
                      gap: 10, padding: '11px 16px', borderBottom: '1px solid #212b3c',
                      cursor: 'pointer', fontSize: 12.5, alignItems: 'center',
                    }}
                    onMouseEnter={e => e.currentTarget.style.background = '#212b3c'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                      <div style={{ display: 'flex', gap: 10, alignItems: 'center', minWidth: 0 }}>
                        <ProjectPlaceholder kind={p.cover} style={{ width: 30, height: 30, borderRadius: 4, flexShrink: 0 }}/>
                        <div style={{ minWidth: 0 }}>
                          <div style={{ color: '#e5e7eb', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.name}</div>
                          <div style={{ fontSize: 10.5, color: '#6b7280' }}>{(() => { const pm = PM_LIST.find(pm => pm.projects.includes(p.id)); return pm?.name || '—'; })()}</div>
                        </div>
                      </div>
                      <div><span style={{ background: `${c}20`, color: c, fontSize: 11, fontWeight: 700, padding: '2px 8px', borderRadius: 3 }}>{statLabels[p.status]}</span></div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        <div style={{ flex: 1, height: 4, background: '#2a3444', borderRadius: 2, overflow: 'hidden' }}>
                          <div style={{ height: '100%', width: `${p.progress}%`, background: c }}/>
                        </div>
                        <span style={{ fontSize: 11, color: '#9ca3af', minWidth: 28 }}>{p.progress}%</span>
                      </div>
                      <div style={{ fontSize: 11, color: p.daysLeft < 14 && p.daysLeft > 0 ? '#f87171' : '#6b7280' }}>
                        {p.daysLeft === 0 ? '—' : p.daysLeft + 'd'}
                      </div>
                      <div>{p.openIssues > 0 ? <span style={{ background: 'rgba(239,68,68,0.15)', color: '#f87171', fontSize: 11, fontWeight: 700, padding: '2px 7px', borderRadius: 3 }}>{p.openIssues}</span> : <span style={{ color: '#4b5563' }}>—</span>}</div>
                    </div>
                  );
                })}
              </div>

              {/* Sidebar */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {/* Today's meetings */}
                <div style={{ background: '#1a2230', border: '1px solid #2a3444', borderRadius: 6 }}>
                  <div style={{ padding: '10px 14px', borderBottom: '1px solid #2a3444', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div style={{ fontSize: 12, fontWeight: 700, color: '#e5e7eb', textTransform: 'uppercase', letterSpacing: 0.5 }}>פגישות השבוע</div>
                    <button onClick={onNewMeeting} style={{ background: 'transparent', border: 'none', color: '#3b82f6', fontSize: 11, cursor: 'pointer', fontFamily: 'inherit', fontWeight: 600 }}>+ חדשה</button>
                  </div>
                  {meetings.slice(0, 4).map(m => (
                    <div key={m.id} style={{ padding: '10px 14px', borderBottom: '1px solid #212b3c' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div style={{ width: 4, height: 32, background: m.status === 'today' ? '#ef4444' : '#3b82f6', borderRadius: 2 }}/>
                        <div style={{ flex: 1 }}>
                          <div style={{ fontSize: 12.5, color: '#e5e7eb', fontWeight: 500 }}>{m.title}</div>
                          <div style={{ fontSize: 10.5, color: '#6b7280' }}>{m.date} · {m.time}</div>
                        </div>
                        {m.status === 'today' && <span style={{ fontSize: 10, background: '#dc2626', color: '#fff', padding: '2px 6px', borderRadius: 2, fontWeight: 700 }}>היום</span>}
                      </div>
                    </div>
                  ))}
                </div>

                {/* Critical tasks */}
                <div style={{ background: '#1a2230', border: '1px solid #2a3444', borderRadius: 6 }}>
                  <div style={{ padding: '10px 14px', borderBottom: '1px solid #2a3444' }}>
                    <div style={{ fontSize: 12, fontWeight: 700, color: '#e5e7eb', textTransform: 'uppercase', letterSpacing: 0.5 }}>משימות דחופות</div>
                  </div>
                  {criticalTasks.slice(0, 5).map(t => (
                    <div key={t.id} style={{ padding: '9px 14px', borderBottom: '1px solid #212b3c', display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                      <div style={{ width: 6, height: 6, borderRadius: 3, background: t.priority === 'דחוף' ? '#ef4444' : '#f59e0b', marginTop: 5, flexShrink: 0 }}/>
                      <div>
                        <div style={{ fontSize: 12, color: '#e5e7eb' }}>{t.title}</div>
                        <div style={{ fontSize: 10.5, color: '#6b7280' }}>{t.assignee} · {t.due}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </>
        )}

        {/* ===== ALERTS TAB ===== */}
        {tab === 'alerts' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxWidth: 760, margin: '0 auto' }}>
            <div style={{ fontSize: 12, color: '#6b7280', marginBottom: 4 }}>
              {kpis.openIssues} בעיות פתוחות · לחץ לסימון כטופלה
            </div>
            {(() => {
              const alerts = [];
              projects.forEach(p => {
                if (p.status === 'delay' || p.status === 'attention') alerts.push({ level: 'critical', project: p.name, text: `פרויקט ${p.openIssues > 0 ? `— ${p.openIssues} ממצאים פתוחים` : 'בעיכוב'}` });
                else if (p.openIssues > 0) alerts.push({ level: 'warning', project: p.name, text: `${p.openIssues} ממצאים פתוחים — מעקב נדרש` });
                else if (p.daysLeft > 0 && p.daysLeft <= 14 && p.status !== 'completed') alerts.push({ level: 'warning', project: p.name, text: `${p.daysLeft} ימים לסיום פרויקט` });
              });
              if (alerts.length === 0) return (
                <div style={{ padding: '32px 0', textAlign: 'center', color: '#6b7280', fontSize: 14 }}>אין התראות פעילות</div>
              );
              return alerts.slice(0, 8).map((a, i) => {
                const c = a.level === 'critical' ? '#f87171' : a.level === 'warning' ? '#fbbf24' : '#60a5fa';
                return (
                  <div key={i} style={{
                    background: '#1a2230', border: `1px solid ${c}30`,
                    borderRight: `4px solid ${c}`, borderRadius: 6, padding: '14px 16px',
                    display: 'flex', alignItems: 'center', gap: 12,
                  }}>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 12, color: '#6b7280', marginBottom: 2 }}>
                        <span style={{ color: c, fontWeight: 600 }}>{a.project}</span>
                      </div>
                      <div style={{ fontSize: 13.5, color: '#e5e7eb' }}>{a.text}</div>
                    </div>
                    <button style={{
                      background: 'transparent', border: '1px solid #2a3444', color: '#9ca3af',
                      padding: '5px 10px', borderRadius: 4, fontSize: 11, cursor: 'pointer', fontFamily: 'inherit',
                    }}>סמן כטופל</button>
                  </div>
                );
              });
            })()}
          </div>
        )}

        {/* ===== MEETINGS TAB ===== */}
        {tab === 'meetings' && (
          <div style={{ maxWidth: 900, margin: '0 auto' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <div style={{ fontSize: 13, color: '#6b7280' }}>פגישות השבוע וקרובות</div>
              <button onClick={onNewMeeting} style={{
                background: '#3b82f6', border: 'none', color: '#fff', padding: '8px 14px',
                borderRadius: 4, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
              }}>+ תאם פגישה חדשה</button>
            </div>
            {meetings.map(m => (
              <div key={m.id} style={{
                background: '#1a2230', border: '1px solid #2a3444', borderRadius: 6,
                padding: '14px 18px', marginBottom: 10, display: 'flex', alignItems: 'center', gap: 16,
              }}>
                <div style={{ width: 4, height: 40, background: m.status === 'today' ? '#ef4444' : m.status === 'past' ? '#374151' : '#3b82f6', borderRadius: 2 }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: '#e5e7eb' }}>{m.title}</div>
                  <div style={{ fontSize: 12, color: '#6b7280', marginTop: 3 }}>
                    {m.date} · {m.time} · {m.duration}ד׳ · 📍{m.location}
                  </div>
                </div>
                {m.status === 'today' && <span style={{ fontSize: 11, background: '#dc2626', color: '#fff', padding: '3px 8px', borderRadius: 3, fontWeight: 700 }}>היום</span>}
                {m.status === 'past' && m.reportId && (
                  <span style={{ fontSize: 11, background: '#1a2230', border: '1px solid #2a3444', color: '#9ca3af', padding: '3px 8px', borderRadius: 3, fontFamily: 'ui-monospace, monospace' }}>{m.reportId}</span>
                )}
              </div>
            ))}
          </div>
        )}

        {/* ===== UPDATES TAB ===== */}
        {tab === 'updates' && (
          <div style={{ maxWidth: 760, margin: '0 auto' }}>
            <div style={{ fontSize: 13, color: '#6b7280', marginBottom: 14 }}>עדכונים אחרונים מהשטח — כל הפרויקטים</div>
            {updates.map(u => {
              const c = u.type === 'alert' ? '#f87171' : u.type === 'milestone' ? '#c084fc' : '#60a5fa';
              return (
                <div key={u.id} style={{
                  background: '#1a2230', border: '1px solid #2a3444', borderRadius: 6,
                  padding: '14px 16px', marginBottom: 10,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                    <span style={{ width: 6, height: 6, borderRadius: 3, background: c }}/>
                    <Avatar name={u.author} size={22}/>
                    <span style={{ fontSize: 12, fontWeight: 600, color: '#e5e7eb' }}>{u.author}</span>
                    <span style={{ fontSize: 11, color: '#6b7280' }}>{u.team}</span>
                    <span style={{ fontSize: 11, color: '#4b5563', marginRight: 'auto' }}>{u.time}</span>
                  </div>
                  <div style={{ fontSize: 13, color: '#d1d5db', lineHeight: 1.5 }}>{u.text}</div>
                </div>
              );
            })}
          </div>
        )}

        {/* Footer */}
        <div style={{ marginTop: 24, textAlign: 'center', fontSize: 10.5, color: '#374151', paddingBottom: 8 }}>
          © 2026 YBPROJECTS · כל הזכויות שמורות
        </div>
      </div>
    </div>
  );
};

window.DashboardScreen = DashboardScreen;
})();