{action==='approve' ? '✓ Hesabatı Təsdiqlə' : '↩ Hesabatı Geri Qaytar'}

{selected.dept}

{selected.id} · {selected.period}

{action === 'return' && (

Geri qaytarılma səbəbi *

setComment(e.target.value)}
                placeholder="Nə düzəldilməlidir? Müəllif üçün aydın izahat verin..."/>
              <div style={{fontSize:11,color:'#6b7280',marginTop:4}}>Müəllif bu şərhi alacaq və hesabatı düzəldib yenidən təqdim edəcək.</div>
            </div>
          )}
          {action === 'approve' && (
            <div style={S.field}>
              <label style={S.label}>Əlavə qeyd (ixtiyari)</label>
              <textarea style={S.textarea} rows={3} value={comment} onChange={e=>setComment(e.target.value)}
                placeholder="Müəllif üçün əlavə rəy (ixtiyari)..."/>
            </div>
          )}
          <div style={{display:'flex',gap:8}}>
            <button style={S.cancelBtn} onClick={()=>setAction(null)}>Ləğv Et</button>
            <button style={{...S.confirmBtn, background: action==='approve'?'#16a34a':'#dc2626'}} disabled={action==='return'&&!comment}>
              {action==='approve' ? '✓ Təsdiqlə' : '↩ Geri Qaytar'}
            </button>
          </div>
        </div>
      </div>
    );
  }

if (selected) {
    return (
      <div style={S.detailLayout}>
        <div style={S.detailSide}>
          <button style={S.backBtn} onClick={()=>setSelected(null)}>← Geri dön</button>
          <div style={{marginTop:16}}>
            <div style={{fontSize:15,fontWeight:600,color:'var(--p-text-primary)',marginBottom:4}}>{selected.dept}</div>
            <div style={{fontSize:12,color:'var(--p-text-muted)',marginBottom:12}}>{selected.id} · {selected.author} · {selected.submitted}</div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:16}}>
              {[
                {label:'Tamlıq',value:`${selected.completeness}%`,color:selected.completeness>=95?'#16a34a':selected.completeness>=80?'#d97706':'#dc2626'},
                {label:'AI Balı',value:`${selected.aiScore}%`,color:'#2563d8'},
                {label:'KPI',value:selected.kpiCount,color:'#374151'},
                {label:'Risk',value:selected.riskCount,color:selected.riskCount>0?'#d97706':'#374151'},
              ].map((m,i)=>(
                <div key={i} style={S.metricBox}>
                  <div style={{fontSize:20,fontWeight:700,color:m.color,fontFamily:'monospace'}}>{m.value}</div>
                  <div style={{fontSize:11,color:'#6b7280'}}>{m.label}</div>
                </div>
              ))}
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              <button style={{...S.approveBtn}} onClick={()=>setAction('approve')}>✓ Hesabatı Təsdiqlə</button>
              <button style={{...S.returnBtn}} onClick={()=>setAction('return')}>↩ Geri Qaytar</button>
            </div>
            <div style={{marginTop:16,padding:'12px',background:'#f0f5ff',borderRadius:8,border:'1px solid #c7d9fd'}}>
              <div style={{fontSize:10,fontWeight:700,color:'#1a4498',textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:6}}>AYRA AI Analizi</div>
              <div style={{fontSize:11,color:'#1a4498',lineHeight:1.6}}>Hesabat {selected.aiScore}% keyfiyyət balı aldı. {selected.riskCount > 0 ? `${selected.riskCount} risk qeyd edilib.` : 'Risk aşkarlanmadı.'} Rəsmi ton uyğundur.</div>
            </div>
          </div>
        </div>
        <div style={S.detailMain}>
          <div style={{padding:'16px 20px',borderBottom:'1px solid #e5e7eb'}}>
            <div style={{fontSize:13,fontWeight:600,color:'var(--p-text-primary)',marginBottom:12}}>Hesabat Məzmunu</div>
            {[
              {title:'Əsas Xülasə', content:'Bu dövrdə büdcə icrası planın 87.4%-ni təşkil etmişdir. Əsas məsrəf maddələri üzrə hədəflərə çatılmışdır. Kadr məsrəflərindəki sapma texniki işçilərin işə götürülməsinin gecikməsi ilə əlaqədardır.'},
              {title:'KPI Nəticələri', content:'6 KPI-dan 5-i hədəfə çatıb. Xidmət Göstəricisi 78.1% ilə hədəfin (85%) altında qalıb — əsas səbəb: sistem yenilənməsi dövrü.'},
              {title:'Risklər', content:'1. Büdcə kəsiri riski Q3 üçün. 2. Sistem yenilənməsi gecikmə riski. Hər ikisi üçün plan mövcuddur.'},
            ].map((s,i)=>(
              <div key={i} style={{marginBottom:16}}>
                <div style={{fontSize:12,fontWeight:600,color:'#374151',marginBottom:6}}>{s.title}</div>
                <div style={{fontSize:12,color:'#6b7280',lineHeight:1.7,background:'#f9fafb',padding:'10px 12px',borderRadius:8}}>{s.content}</div>
              </div>
            ))}
          </div>
          <div style={{padding:'14px 20px'}}>
            <div style={{fontSize:12,fontWeight:600,color:'#374151',marginBottom:8}}>Əlavə Edilmiş Sübut Sənədləri ({selected.evidenceCount})</div>
            {['Büdcə İcra Hesabatı.pdf','KPI Hesablaması.xlsx','Şöbə Rəhbəri Təsdiqi.pdf','Sistem Yenilənməsi Protokolu.docx'].slice(0,selected.evidenceCount).map((f,i)=>(
              <div key={i} style={{display:'flex',alignItems:'center',gap:8,padding:'7px 0',borderBottom:'1px solid #f3f4f6',fontSize:12,color:'#374151'}}>
                <span style={{color:'#6b7280'}}>📎</span> {f}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',marginBottom:16,alignItems:'center'}}>
        <div>
          <div style={{fontSize:13,color:'#6b7280'}}>May 2026 · Maliyyə Nazirliyi — Menecer baxışı</div>
        </div>
        <div style={{background:'#fef2f2',border:'1px solid #fecaca',borderRadius:8,padding:'6px 12px',fontSize:12,color:'#b91c1c',fontWeight:500}}>
          {queue.filter(q=>q.urgent).length} təcili · {queue.length} cəmi gözlənilir
        </div>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:8}}>
        {queue.map((r,i)=>(
          <div key={i} style={{...S.queueItem, borderLeft:`3px solid ${r.urgent?'#dc2626':'#e5e7eb'}`}} onClick={()=>setSelected(r)}>
            <div style={{flex:1}}>
              <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
                <span style={{fontSize:13,fontWeight:600,color:'var(--p-text-primary)'}}>{r.dept}</span>
                {r.urgent && <span style={{fontSize:9,fontWeight:700,color:'#b91c1c',background:'#fef2f2',padding:'1px 5px',borderRadius:3}}>TƏCİLİ</span>}
              </div>
              <div style={{fontSize:11,color:'#6b7280'}}>{r.id} · {r.author} · {r.submitted}</div>
              <div style={{display:'flex',gap:16,marginTop:8}}>
                <span style={{fontSize:11,color:'#374151'}}>Tamlıq: <strong style={{color:r.completeness>=95?'#16a34a':'#d97706'}}>{r.completeness}%</strong></span>
                <span style={{fontSize:11,color:'#374151'}}>AI Balı: <strong style={{color:'#2563d8'}}>{r.aiScore}%</strong></span>
                <span style={{fontSize:11,color:'#374151'}}>KPI: <strong>{r.kpiCount}</strong></span>
                <span style={{fontSize:11,color:'#374151'}}>Risk: <strong style={{color:r.riskCount>0?'#d97706':'#374151'}}>{r.riskCount}</strong></span>
              </div>
            </div>
            <span style={{color:'#9ca3af',fontSize:18}}>›</span>
          </div>
        ))}
      </div>
    </div>
  );
}

const reviewStyles = {
  queueItem:{background:'#fff',border:'1px solid #e5e7eb',borderRadius:10,padding:'14px 18px',display:'flex',alignItems:'center',gap:12,cursor:'pointer',transition:'all 150ms',boxShadow:'0 1px 3px rgba(0,0,0,0.05)'},
  detailLayout:{display:'flex',gap:0,flex:1,overflow:'hidden',height:'100%'},
  detailSide:{width:280,borderRight:'1px solid #e5e7eb',padding:'16px 20px',flexShrink:0,overflowY:'auto',background:'#f9fafb'},
  detailMain:{flex:1,overflowY:'auto'},
  actionPanel:{flex:1,overflow:'auto'},
  actionHeader:{display:'flex',alignItems:'center',gap:12,padding:'14px 20px',borderBottom:'1px solid #e5e7eb',marginBottom:0},
  backBtn:{background:'transparent',border:'1px solid #e5e7eb',borderRadius:6,padding:'5px 10px',fontSize:12,color:'#6b7280',cursor:'pointer'},
  reviewSummary:{background:'#f0f5ff',border:'1px solid #c7d9fd',borderRadius:8,padding:'12px 16px',marginBottom:16},
  field:{marginBottom:16},
  label:{display:'block',fontSize:12,fontWeight:600,color:'#374151',marginBottom:6},
  textarea:{width:'100%',padding:'9px 12px',border:'1px solid #d1d5db',borderRadius:8,fontSize:13,fontFamily:'inherit',resize:'vertical',outline:'none'},
  cancelBtn:{padding:'8px 20px',borderRadius:8,fontSize:13,fontWeight:500,cursor:'pointer',background:'#fff',border:'1px solid #e5e7eb',color:'#6b7280'},
  confirmBtn:{padding:'8px 24px',borderRadius:8,fontSize:13,fontWeight:600,cursor:'pointer',border:'none',color:'#fff'},
  approveBtn:{width:'100%',padding:'10px',borderRadius:8,fontSize:13,fontWeight:600,cursor:'pointer',border:'none',background:'#16a34a',color:'#fff'},
  returnBtn:{width:'100%',padding:'10px',borderRadius:8,fontSize:13,fontWeight:500,cursor:'pointer',border:'1px solid #e5e7eb',background:'#fff',color:'#374151'},
  metricBox:{background:'#fff',border:'1px solid #e5e7eb',borderRadius:8,padding:'10px 12px',textAlign:'center'},
};

// ── Strategic Goals Page ──────────────────────────────────
function PortalGoalsPage() {
  const goals = [
    {id:'SG-01', title:'Büdcə Şəffaflığının Artırılması', owner:'F. Quliyev', deadline:'31.12.2026', progress:68, kpis:['KPI-001','KPI-006'], status:'on-track', milestones:[{label:'Hesabat portalı',done:true},{label:'Açıq məlumat API',done:true},{label:'Vətəndaş tablosu',done:false}]},
    {id:'SG-02', title:'Rəqəmsal Xidmət Göstəricisinin 90%-ə Çatdırılması', owner:'A. Məmmədov', deadline:'30.09.2026', progress:78, kpis:['KPI-004'], status:'at-risk', milestones:[{label:'SLA monitoru',done:true},{label:'API modernləşdirməsi',done:false},{label:'90% hədəf',done:false}]},
    {id:'SG-03', title:'Kadr Potensialının Gücləndirilməsi', owner:'L. Hüseynova', deadline:'31.12.2026', progress:45, kpis:['KPI-003'], status:'on-track', milestones:[{label:'Təlim planı',done:true},{label:'Sertifikasiyalar',done:false},{label:'Qiymətləndirmə',done:false}]},
  ];

const statusMeta = {'on-track':{color:'#16a34a',bg:'#f0fdf4',label:'Hədəfdə'},'at-risk':{color:'#d97706',bg:'#fffbeb',label:'Risklə'},'behind':{color:'#dc2626',bg:'#fef2f2',label:'Gecikir'}};

return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',marginBottom:16,alignItems:'center'}}>
        <div style={{fontSize:13,color:'#6b7280'}}>2026-cı il üçün 3 strateji məqsəd</div>
        <button style={{padding:'7px 16px',background:'#2557d6',color:'#fff',border:'none',borderRadius:8,fontSize:12,fontWeight:500,cursor:'pointer'}}>+ Məqsəd Əlavə Et</button>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        {goals.map((g,i)=>(
          <div key={i} style={{background:'#fff',border:'1px solid #e5e7eb',borderRadius:12,padding:'18px 20px',boxShadow:'0 1px 3px rgba(0,0,0,0.05)'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:12}}>
              <div style={{flex:1}}>
                <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
                  <span style={{fontFamily:'monospace',fontSize:10,color:'#9ca3af'}}>{g.id}</span>
                  <span style={{fontSize:10,fontWeight:600,padding:'2px 8px',borderRadius:10,background:statusMeta[g.status]?.bg,color:statusMeta[g.status]?.color}}>{statusMeta[g.status]?.label}</span>
                </div>
                <div style={{fontSize:14,fontWeight:600,color:'#0f1c30',marginBottom:4}}>{g.title}</div>
                <div style={{fontSize:11,color:'#6b7280'}}>Sahib: {g.owner} · Son tarix: {g.deadline}</div>
              </div>
              <div style={{textAlign:'right',flexShrink:0,marginLeft:20}}>
                <div style={{fontSize:28,fontWeight:700,color:'#0f1c30',fontFamily:'monospace',lineHeight:1}}>{g.progress}%</div>
                <div style={{fontSize:10,color:'#9ca3af'}}>tamamlanıb</div>
              </div>
            </div>
            <div style={{height:6,background:'#e5e7eb',borderRadius:3,marginBottom:14,overflow:'hidden'}}>
              <div style={{height:'100%',width:`${g.progress}%`,background:statusMeta[g.status]?.color,borderRadius:3,transition:'width 0.6s'}}/>
            </div>
            <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
              {g.milestones.map((m,j)=>(
                <div key={j} style={{display:'flex',alignItems:'center',gap:5,padding:'4px 10px',borderRadius:20,background:m.done?'#f0fdf4':'#f9fafb',border:`1px solid ${m.done?'#bbf7d0':'#e5e7eb'}`,fontSize:11,color:m.done?'#15803d':'#6b7280'}}>
                  <span>{m.done?'✓':'○'}</span> {m.label}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Risk Registration Page ────────────────────────────────
function PortalRisksPage() {
  const [showForm, setShowForm] = React.useState(false);
  const [sev, setSev] = React.useState('');
  const [prob, setProb] = React.useState('');

const risks = [
    {id:'RSK-048', title:'Büdcə kəsiri — Q3 2026', dept:'Büdcə Şöbəsi', sev:'high', prob:'medium', owner:'N. Əliyeva', mitigation:'Xərc optimallaşdırma planı', status:'monitoring', date:'10.05.2026'},
    {id:'RSK-047', title:'Sistem yenilənməsi gecikmə riski', dept:'RİA', sev:'medium', prob:'low', owner:'A. Məmmədov', mitigation:'Alternativ provayder müqaviləsi', status:'mitigating', date:'08.05.2026'},
    {id:'RSK-046', title:'Kadr çatışmazlığı — texniki mütəxəssis', dept:'Büdcə Şöbəsi', sev:'low', prob:'high', owner:'L. Hüseynova', mitigation:'İşə götürmə kampaniyası başlanıb', status:'closed', date:'01.05.2026'},
  ];

return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',marginBottom:16,alignItems:'center'}}>
        <div style={{fontSize:13,color:'#6b7280'}}>{risks.length} risk · {risks.filter(r=>r.status!=='closed').length} aktiv</div>
        <button style={{padding:'7px 16px',background:'#2557d6',color:'#fff',border:'none',borderRadius:8,fontSize:12,fontWeight:500,cursor:'pointer'}} onClick={()=>setShowForm(true)}>+ Risk Qeydiyyatı</button>
      </div>

{showForm && (
        <div style={{background:'#fff',border:'1px solid #e5e7eb',borderRadius:12,padding:'20px',marginBottom:16,boxShadow:'0 4px 16px rgba(0,0,0,0.08)'}}>
          <div style={{fontSize:14,fontWeight:600,color:'#0f1c30',marginBottom:16}}>Yeni Risk Qeydiyyatı</div>
          <div style={{background:'#f0f5ff',border:'1px solid #c7d9fd',borderRadius:8,padding:'10px 14px',marginBottom:14}}>
            <div style={{fontSize:10,fontWeight:700,color:'#1a4498',marginBottom:4}}>AYRA AI — Risk Aşkarlanması</div>
            <div style={{fontSize:11,color:'#1a4498',lineHeight:1.6}}>Hesabat mətninizdən 2 potensial risk aşkarlandı: büdcə kəsiri və kadr məsələsi. Avtomatik əlavə etmək istəyirsinizmi?</div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,marginBottom:12}}>
            <div>
              <label style={{display:'block',fontSize:12,fontWeight:500,color:'#374151',marginBottom:5}}>Ciddilik</label>
              <select style={{width:'100%',padding:'8px 10px',border:'1px solid #d1d5db',borderRadius:8,fontSize:12}} value={sev} onChange={e=>setSev(e.target.value)}>
                <option value="">Seçin...</option>
                <option value="high">Yüksək</option><option value="medium">Orta</option><option value="low">Aşağı</option>
              </select>
            </div>
            <div>
              <label style={{display:'block',fontSize:12,fontWeight:500,color:'#374151',marginBottom:5}}>Ehtimal</label>
              <select style={{width:'100%',padding:'8px 10px',border:'1px solid #d1d5db',borderRadius:8,fontSize:12}} value={prob} onChange={e=>setProb(e.target.value)}>
                <option value="">Seçin...</option>
                <option value="high">Yüksək</option><option value="medium">Orta</option><option value="low">Aşağı</option>
              </select>
            </div>
          </div>
          {sev && prob && (
            <div style={{background: sev==='high'&&prob==='high'?'#fef2f2':sev==='low'&&prob==='low'?'#f0fdf4':'#fffbeb', border:'1px solid #e5e7eb',borderRadius:8,padding:'10px 14px',marginBottom:12,display:'flex',alignItems:'center',gap:10}}>
              <div style={{width:40,height:40,borderRadius:8,background:sev==='high'&&prob==='high'?'#dc2626':sev==='low'&&prob==='low'?'#16a34a':'#d97706',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontWeight:700,fontSize:12}}>
                {sev==='high'&&prob==='high'?'KRİT':sev==='low'&&prob==='low'?'AŞQ':'ORTA'}
              </div>
              <div style={{fontSize:12,color:'#374151'}}>Risk matrisi: <strong>{sev==='high'&&prob==='high'?'Kritik — dərhal cavab tələb olunur':sev==='low'&&prob==='low'?'Aşağı — müntəzəm izlənilir':'Orta — plan tələb olunur'}</strong></div>
            </div>
          )}
          <textarea style={{width:'100%',padding:'9px 12px',border:'1px solid #d1d5db',borderRadius:8,fontSize:12,fontFamily:'inherit',marginBottom:12}} rows={3} placeholder="Risk təsvirini daxil edin..."/>
          <div style={{display:'flex',gap:8}}>
            <button style={{padding:'8px 20px',borderRadius:8,fontSize:12,cursor:'pointer',border:'1px solid #e5e7eb',background:'#fff',color:'#6b7280'}} onClick={()=>setShowForm(false)}>Ləğv Et</button>
            <button style={{padding:'8px 20px',borderRadius:8,fontSize:12,fontWeight:600,cursor:'pointer',border:'none',background:'#2557d6',color:'#fff'}}>Riski Qeydiyyata Al</button>
          </div>
        </div>
      )}

<div style={{display:'flex',flexDirection:'column',gap:8}}>
        {risks.map((r,i)=>(
          <div key={i} style={{background:'#fff',border:'1px solid #e5e7eb',borderLeft:`4px solid ${sevMeta[r.sev]?.color}`,borderRadius:10,padding:'14px 18px',boxShadow:'0 1px 3px rgba(0,0,0,0.04)'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
              <div>
                <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
                  <span style={{fontFamily:'monospace',fontSize:10,color:'#9ca3af'}}>{r.id}</span>
                  <span style={{fontSize:10,fontWeight:600,padding:'2px 7px',borderRadius:10,background:sevMeta[r.sev]?.bg,color:sevMeta[r.sev]?.color}}>{sevMeta[r.sev]?.label} Risk</span>
                  <span style={{fontSize:10,fontWeight:600,padding:'2px 7px',borderRadius:10,background:stMeta[r.status]?.bg,color:stMeta[r.status]?.color}}>{stMeta[r.status]?.label}</span>
                </div>
                <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:4}}>{r.title}</div>
                <div style={{fontSize:11,color:'#6b7280'}}>Sahib: {r.owner} · {r.dept} · {r.date}</div>
              </div>
            </div>
            {r.mitigation && <div style={{marginTop:10,padding:'8px 12px',background:'#f9fafb',borderRadius:6,fontSize:11,color:'#374151'}}><strong>Azaldılma:</strong> {r.mitigation}</div>}
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Central Analytics Page ────────────────────────────────
function PortalCentralAnalyticsPage() {
  const depts = [
    {name:'Maliyyə Nazirliyi', submitted:14, total:16, avgKPI:87.4, risks:4, status:'partial'},
    {name:'Əmək Nazirliyi', submitted:16, total:16, avgKPI:91.2, risks:2, status:'complete'},
    {name:'Səhiyyə Nazirliyi', submitted:21, total:28, avgKPI:83.6, risks:7, status:'partial'},
    {name:'Rəqəmsal İnk. Agentliyi', submitted:8, total:8, avgKPI:94.1, risks:1, status:'complete'},
    {name:'Hesablama Palatası', submitted:0, total:0, avgKPI:0, risks:0, status:'auditor'},
  ];

const submData = [{label:'Mal.',values:[14,2]},{label:'Əmək',values:[16,0]},{label:'Səh.',values:[21,7]},{label:'RİA',values:[8,0]}];

return (
    <div>
      <div style={{fontSize:13,color:'#6b7280',marginBottom:16}}>Mərkəzi Analitika · May 2026 · Bütün departamentlər</div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:20}}>
        {[
          {label:'Cəmi Hesabat',value:'59 / 68',sub:'87% təqdim edilib',color:'#2557d6'},
          {label:'Ortalama KPI Balı',value:'89.1%',sub:'Plan: 90%',color:'#16a34a'},
          {label:'Aktiv Risklər',value:'14',sub:'3 yüksək prioritet',color:'#d97706'},
          {label:'Gecikmiş Bölmələr',value:'9',sub:'Son tarix: 22.05.2026',color:'#dc2626'},
        ].map((c,i)=>(
          <div key={i} style={{background:'#fff',border:'1px solid #e5e7eb',borderTop:`3px solid ${c.color}`,borderRadius:10,padding:'16px',boxShadow:'0 1px 3px rgba(0,0,0,0.05)'}}>
            <div style={{fontSize:11,color:'#6b7280',marginBottom:6}}>{c.label}</div>
            <div style={{fontSize:24,fontWeight:700,color:'#0f1c30',fontFamily:'monospace',lineHeight:1}}>{c.value}</div>
            <div style={{fontSize:11,color:'#9ca3af',marginTop:4}}>{c.sub}</div>
          </div>
        ))}
      </div>
      <div style={{background:'#fff',border:'1px solid #e5e7eb',borderRadius:12,overflow:'hidden',boxShadow:'0 1px 3px rgba(0,0,0,0.05)'}}>
        <div style={{padding:'14px 18px',borderBottom:'1px solid #f3f4f6',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <span style={{fontSize:13,fontWeight:600,color:'#0f1c30'}}>Departament Konsolidasiyası</span>
          <button style={{padding:'5px 12px',background:'#2557d6',color:'#fff',border:'none',borderRadius:6,fontSize:11,fontWeight:500,cursor:'pointer'}}>↓ Excel İxrac</button>
        </div>
        <table style={{width:'100%',borderCollapse:'collapse'}}>
          <thead><tr style={{background:'#f9fafb'}}>
            {['Departament','Təqdim edilmiş','Ortalama KPI','Risklər','Status'].map(h=>(
              <th key={h} style={{textAlign:'left',fontSize:10,fontWeight:700,color:'#9ca3af',textTransform:'uppercase',letterSpacing:'0.06em',padding:'10px 18px',borderBottom:'1px solid #e5e7eb'}}>{h}</th>
            ))}
          </tr></thead>
          <tbody>
            {depts.map((d,i)=>(
              <tr key={i} style={{borderBottom:'1px solid #f3f4f6'}}>
                <td style={{padding:'12px 18px',fontSize:12,fontWeight:500,color:'#0f1c30'}}>{d.name}</td>
                <td style={{padding:'12px 18px'}}>
                  {d.total > 0 ? (
                    <div>
                      <div style={{display:'flex',justifyContent:'space-between',fontSize:11,color:'#6b7280',marginBottom:4}}>
                        <span style={{fontFamily:'monospace'}}>{d.submitted}/{d.total}</span>
                        <span>{Math.round(d.submitted/d.total*100)}%</span>
                      </div>
                      <div style={{height:4,background:'#e5e7eb',borderRadius:2}}><div style={{height:'100%',width:`${d.submitted/d.total*100}%`,background:d.submitted===d.total?'#16a34a':'#2557d6',borderRadius:2}}/></div>
                    </div>
                  ) : <span style={{fontSize:11,color:'#9ca3af'}}>Tətbiq olunmur</span>}
                </td>
                <td style={{padding:'12px 18px'}}>
                  {d.avgKPI > 0 ? <span style={{fontSize:12,fontFamily:'monospace',fontWeight:600,color:d.avgKPI>=90?'#16a34a':d.avgKPI>=80?'#d97706':'#dc2626'}}>{d.avgKPI}%</span> : <span style={{color:'#9ca3af'}}>—</span>}
                </td>
                <td style={{padding:'12px 18px'}}>
                  <span style={{fontSize:12,fontFamily:'monospace',fontWeight:600,color:d.risks>0?'#d97706':'#6b7280'}}>{d.risks > 0 ? d.risks : '—'}</span>
                </td>
                <td style={{padding:'12px 18px'}}>
                  <span style={{fontSize:10,fontWeight:600,padding:'2px 8px',borderRadius:10,background:d.status==='complete'?'#f0fdf4':d.status==='auditor'?'#f9fafb':'#fffbeb',color:d.status==='complete'?'#15803d':d.status==='auditor'?'#6b7280':'#d97706'}}>
                    {d.status==='complete'?'Tamamlandı':d.status==='auditor'?'Auditor':'Natamam'}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { PortalReviewPage, PortalGoalsPage, PortalRisksPage, PortalCentralAnalyticsPage });