<?php
/* ══════════════════════════════════════════════════════
   laporan.php — Laporan & Statistik
   MA As-Syafi'iyah 02 Bekasi
   Integrasi: navbar.php (sidebar + topbar + loader)
══════════════════════════════════════════════════════ */
$page_title  = "Laporan & Statistik — MA As-Syafi'iyah 02";
$active_menu = 'laporan';
$loader_text = 'Memuat Laporan';
include 'navbar.php';
include 'koneksi.php';

$user_name = $_SESSION['nama'] ?? 'Admin';
$user_role = $_SESSION['role'] ?? 'admin';

$total_siswa  = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) c FROM siswa WHERE status_siswa='Aktif'"))['c'];
$total_surat  = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) c FROM surat"))['c'];
$total_mapel  = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) c FROM mata_pelajaran"))['c'];
$total_nilai  = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) c FROM nilai"))['c'];

$siswa_l=0; $siswa_p=0;
$q=mysqli_query($conn,"SELECT jenis_kelamin,COUNT(*) c FROM siswa WHERE status_siswa='Aktif' GROUP BY jenis_kelamin");
if($q) while($r=mysqli_fetch_assoc($q)){ if($r['jenis_kelamin']==='Laki-laki') $siswa_l=$r['c']; else $siswa_p=$r['c']; }

$spk_list=[];
$q=mysqli_query($conn,"SELECT kelas,COUNT(*) c FROM siswa WHERE status_siswa='Aktif' AND kelas IS NOT NULL AND kelas!='' GROUP BY kelas ORDER BY kelas");
if($q) while($r=mysqli_fetch_assoc($q)) $spk_list[]=$r;

$BNAMEID=[1=>'Januari',2=>'Februari',3=>'Maret',4=>'April',5=>'Mei',6=>'Juni',7=>'Juli',8=>'Agustus',9=>'September',10=>'Oktober',11=>'November',12=>'Desember'];
$bln_en=date('F'); $bln_id=$BNAMEID[(int)date('m')]; $thn=date('Y');
$spp_lunas   =mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(DISTINCT siswa_id) c FROM spp WHERE status LIKE '%Lunas%' AND bulan='$bln_en' AND tahun=$thn"))['c'];
$spp_belum   =max(0,$total_siswa-$spp_lunas);
$pct_lunas   =$total_siswa>0?round($spp_lunas/$total_siswa*100,1):0;
$total_pmasuk=mysqli_fetch_assoc(mysqli_query($conn,"SELECT COALESCE(SUM(nominal),0) t FROM spp WHERE DATE_FORMAT(tanggal_bayar,'%Y-%m')='".date('Y-m')."'"))['t'];

$rekap=[];
for($i=5;$i>=0;$i--){
    $b=date('F',strtotime("-$i months")); $y=date('Y',strtotime("-$i months")); $bid=(int)date('m',strtotime("-$i months"));
    $r=mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(DISTINCT siswa_id) c,COALESCE(SUM(nominal),0) t FROM spp WHERE bulan='$b' AND tahun=$y AND status LIKE '%Lunas%'"));
    $rekap[]=['label'=>substr($BNAMEID[$bid],0,3)."'".$y[2].$y[3],'jml'=>(int)($r['c']??0),'total'=>(int)($r['t']??0)];
}
$max_rekap=max(1,max(array_column($rekap,'jml')));

$rata_nilai=round(mysqli_fetch_assoc(mysqli_query($conn,"SELECT COALESCE(AVG(nilai_akhir),0) r FROM nilai"))['r'],2);
$dist_pred=[];
$q=mysqli_query($conn,"SELECT predikat,COUNT(*) c FROM nilai WHERE predikat IS NOT NULL GROUP BY predikat ORDER BY predikat");
if($q) while($r=mysqli_fetch_assoc($q)) $dist_pred[$r['predikat']]=$r['c'];
$top10=[];
$q=mysqli_query($conn,"SELECT s.nama,s.kelas,AVG(n.nilai_akhir) rata FROM nilai n JOIN siswa s ON n.siswa_id=s.id WHERE n.nilai_akhir IS NOT NULL GROUP BY n.siswa_id ORDER BY rata DESC LIMIT 10");
if($q) while($r=mysqli_fetch_assoc($q)) $top10[]=$r;

$abs=['Hadir'=>0,'Izin'=>0,'Sakit'=>0,'Alpha'=>0];
$q=mysqli_query($conn,"SELECT status,COUNT(*) c FROM absensi WHERE DATE_FORMAT(tanggal,'%Y-%m')='".date('Y-m')."' GROUP BY status");
if($q) while($r=mysqli_fetch_assoc($q)) $abs[$r['status']]=(int)$r['c'];
$abs_total=array_sum($abs);

$tab=$_GET['type']??'overview';
?>
<style>
:root{
  --a1:#00D4FF;--a2:#7B61FF;--a3:#FF6B9D;
  --a4:#00FFC2;--a5:#FFB347;--a6:#FF4757;
  --ds:#050B18;--ds-l:#0C1428;--ds-ll:#111C35;
  --gl:rgba(255,255,255,.04);--glb:rgba(255,255,255,.07);
  --glbd:rgba(255,255,255,.08);--glhv:rgba(255,255,255,.09);
  --dtx:#E8EDF5;--dtxm:#7B8BA8;--dtxd:#3D4F6E;
}
.main{background:var(--ds)!important;color:var(--dtx);}
.main::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:128px 128px;opacity:.022;}
.main .wrap{position:relative;z-index:1;font-family:'Outfit',sans-serif;}

@keyframes lpFU{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes lpDP{from{r:0;opacity:0}to{r:3;opacity:1}}
@keyframes lpDL{to{stroke-dashoffset:0}}
@keyframes lpHG{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,15px) scale(1.1)}}
@keyframes lpIF{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── HERO ── */
.lp-hero{position:relative;overflow:hidden;border-radius:24px;margin-bottom:2rem;min-height:210px;
  background:linear-gradient(135deg,var(--ds-l),var(--ds-ll));border:1px solid var(--glbd);
  box-shadow:0 24px 64px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);animation:lpFU .7s cubic-bezier(.16,1,.3,1) both;}
.lp-hero::before{content:'';position:absolute;width:500px;height:200px;top:-60px;right:-40px;
  background:radial-gradient(ellipse,rgba(0,212,255,.1) 0%,rgba(123,97,255,.06) 40%,transparent 70%);
  animation:lpHG 8s ease-in-out infinite;pointer-events:none;}
.lp-hchart{position:absolute;right:0;bottom:0;width:320px;height:130px;opacity:.18;pointer-events:none;}
.lp-hline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.lp-hl1{stroke:url(#lLg1);stroke-dasharray:280;stroke-dashoffset:280;animation:lpDL 2.5s cubic-bezier(.16,1,.3,1) .3s forwards}
.lp-hl2{stroke:url(#lLg2);stroke-dasharray:240;stroke-dashoffset:240;animation:lpDL 2.5s cubic-bezier(.16,1,.3,1) .55s forwards}
.lp-hl3{stroke:url(#lLg3);stroke-dasharray:200;stroke-dashoffset:200;animation:lpDL 2.5s cubic-bezier(.16,1,.3,1) .8s forwards}
.lp-hdots circle{animation:lpDP .4s cubic-bezier(.34,1.56,.64,1) both}
.lp-hcon{position:relative;z-index:2;padding:2.5rem 3rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap;}
.lp-hico{width:76px;height:76px;border-radius:22px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,212,255,.12),rgba(123,97,255,.1));
  border:1.5px solid rgba(0,212,255,.2);display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;box-shadow:0 0 32px rgba(0,212,255,.1),inset 0 1px 0 rgba(255,255,255,.08);
  animation:lpIF 5s ease-in-out infinite;}
.lp-htx{flex:1;min-width:200px;}
.lp-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .875rem;border-radius:50px;
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2);color:var(--a1);margin-bottom:.875rem;}
.lp-htit{font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;line-height:1.1;margin-bottom:.375rem;
  background:linear-gradient(135deg,#E8EDF5,#B0C4DE);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lp-hsub{font-size:.875rem;color:var(--dtxm);margin-bottom:1.125rem;}
.lp-hstats{display:flex;gap:1.5rem;flex-wrap:wrap;}
.lp-hs{display:flex;align-items:center;gap:.5rem;}
.lp-hs-n{font-family:'JetBrains Mono',monospace;font-size:1.125rem;font-weight:600;color:var(--dtx);}
.lp-hs-l{font-size:.68rem;color:var(--dtxm);font-weight:500;}
.lp-hs-d{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

/* ── TABS ── */
.lp-tw{position:sticky;top:1rem;z-index:100;margin-bottom:2rem;animation:lpFU .5s .1s cubic-bezier(.16,1,.3,1) both;}
.lp-ti{display:inline-flex;gap:.375rem;flex-wrap:wrap;
  background:rgba(8,15,32,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glbd);border-radius:18px;padding:.4rem;box-shadow:0 8px 32px rgba(0,0,0,.35);}
.lp-tb{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.375rem;border-radius:12px;
  font-size:.8rem;font-weight:700;font-family:'Syne',sans-serif;color:var(--dtxm);text-decoration:none;
  transition:all .28s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;}
.lp-tb:hover{color:var(--dtx);background:var(--gl);}
.lp-tb.on{color:var(--ds);background:linear-gradient(135deg,var(--a1),var(--a4));
  box-shadow:0 4px 20px rgba(0,212,255,.35),0 0 0 1px rgba(0,212,255,.2);}

/* ── ACTIONS ── */
.lp-acts{display:flex;gap:.875rem;margin-bottom:2rem;flex-wrap:wrap;}
.lp-btn{display:inline-flex;align-items:center;gap:.625rem;padding:.75rem 1.5rem;border-radius:12px;
  font-size:.8rem;font-weight:700;font-family:'Syne',sans-serif;letter-spacing:.04em;
  cursor:pointer;text-decoration:none;border:none;transition:all .28s cubic-bezier(.34,1.56,.64,1);}
.lp-bg{background:var(--glb);border:1px solid var(--glbd);color:var(--dtx);}
.lp-bg:hover{background:var(--glhv);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.25);}
.lp-bn{background:linear-gradient(135deg,var(--a1),var(--a2));color:var(--ds);box-shadow:0 4px 20px rgba(0,212,255,.3);}
.lp-bn:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,212,255,.45);}

/* ── STAT CARDS ── */
.lp-sr{display:grid;grid-template-columns:repeat(4,1fr);gap:1.125rem;margin-bottom:2rem;}
.lp-sc{background:var(--gl);border:1px solid var(--glbd);border-radius:20px;padding:1.5rem;
  position:relative;overflow:hidden;transition:all .35s cubic-bezier(.34,1.56,.64,1);
  animation:lpFU .6s ease-out backwards;cursor:default;}
.lp-sc::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;border-radius:20px 20px 0 0;transition:height .35s;}
.lp-sc::after{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;
  border-radius:50%;opacity:.1;transition:opacity .35s;filter:blur(20px);}
.lp-sc:hover{background:var(--glhv);transform:translateY(-7px) scale(1.02);
  box-shadow:0 20px 50px rgba(0,0,0,.3);border-color:rgba(255,255,255,.14);}
.lp-sc:hover::before{height:2.5px}.lp-sc:hover::after{opacity:.2}
.lp-sc:nth-child(1){animation-delay:.06s}.lp-sc:nth-child(2){animation-delay:.1s}
.lp-sc:nth-child(3){animation-delay:.14s}.lp-sc:nth-child(4){animation-delay:.18s}
.lp-sc.s1::before{background:linear-gradient(90deg,var(--a1),var(--a4))}.lp-sc.s1::after{background:var(--a1)}
.lp-sc.s2::before{background:linear-gradient(90deg,var(--a2),var(--a3))}.lp-sc.s2::after{background:var(--a2)}
.lp-sc.s3::before{background:linear-gradient(90deg,var(--a5),var(--a6))}.lp-sc.s3::after{background:var(--a5)}
.lp-sc.s4::before{background:linear-gradient(90deg,var(--a3),var(--a2))}.lp-sc.s4::after{background:var(--a3)}
.lp-scr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;}
.lp-scl{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dtxm);}
.lp-sci{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.lp-sc:hover .lp-sci{transform:rotate(-10deg) scale(1.18);}
.lp-sc.s1 .lp-sci{background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2)}
.lp-sc.s2 .lp-sci{background:rgba(123,97,255,.1);border:1px solid rgba(123,97,255,.2)}
.lp-sc.s3 .lp-sci{background:rgba(255,179,71,.1);border:1px solid rgba(255,179,71,.2)}
.lp-sc.s4 .lp-sci{background:rgba(255,107,157,.1);border:1px solid rgba(255,107,157,.2)}
.lp-scv{font-family:'JetBrains Mono',monospace;font-size:2.5rem;font-weight:600;line-height:1;margin-bottom:.25rem;}
.lp-sc.s1 .lp-scv{color:var(--a1)}.lp-sc.s2 .lp-scv{color:var(--a2)}
.lp-sc.s3 .lp-scv{color:var(--a5)}.lp-sc.s4 .lp-scv{color:var(--a3)}
.lp-scs{font-size:.73rem;font-weight:500;color:var(--dtxm);}

/* ── LAYOUT ── */
.lp-2c{display:grid;grid-template-columns:1fr 1fr;gap:1.375rem;margin-bottom:1.75rem;}

/* ── CARD ── */
.lp-card{background:var(--gl);border:1px solid var(--glbd);border-radius:20px;overflow:hidden;
  animation:lpFU .6s ease-out backwards;margin-bottom:1.75rem;}
.lp-card:nth-child(1){animation-delay:.08s}.lp-card:nth-child(2){animation-delay:.14s}
.lp-chd{padding:1.25rem 1.625rem;border-bottom:1px solid var(--glbd);display:flex;align-items:center;justify-content:space-between;}
.lp-chdl{display:flex;align-items:center;gap:.75rem;}
.lp-cbdg{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.lp-cbdg.cy{background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2)}
.lp-cbdg.vi{background:rgba(123,97,255,.1);border:1px solid rgba(123,97,255,.2)}
.lp-cbdg.am{background:rgba(255,179,71,.1);border:1px solid rgba(255,179,71,.2)}
.lp-cbdg.mn{background:rgba(0,255,194,.1);border:1px solid rgba(0,255,194,.2)}
.lp-ctit{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--dtx);}
.lp-csub{font-size:.65rem;font-weight:600;color:var(--dtxm);margin-top:1px;}
.lp-cbd{padding:1.5rem 1.625rem;}.lp-cbd0{padding:0;}

/* ── PROGRESS ── */
.lp-pi{margin-bottom:1rem;}.lp-pi:last-child{margin-bottom:0;}
.lp-pl{display:flex;justify-content:space-between;margin-bottom:.45rem;}
.lp-pln{font-size:.8rem;font-weight:600;color:var(--dtx);display:flex;align-items:center;gap:.5rem;}
.lp-plv{font-family:'JetBrains Mono',monospace;font-size:.73rem;color:var(--dtxm);}
.lp-pt{height:7px;background:rgba(255,255,255,.06);border-radius:50px;overflow:visible;position:relative;}
.lp-pf{height:100%;border-radius:50px;position:relative;transition:width 1.3s cubic-bezier(.16,1,.3,1);box-shadow:0 0 10px currentColor;}
.lp-pf::after{content:'';position:absolute;inset:-3px;border-radius:50px;background:inherit;opacity:.25;filter:blur(6px);z-index:-1;}
.lp-ptlg{height:11px;}
.lp-fcy{background:linear-gradient(90deg,#009FBF,var(--a1));color:var(--a1)}
.lp-fvi{background:linear-gradient(90deg,#5B47CC,var(--a2));color:var(--a2)}
.lp-fmn{background:linear-gradient(90deg,#00C494,var(--a4));color:var(--a4)}
.lp-fam{background:linear-gradient(90deg,#CC8A00,var(--a5));color:var(--a5)}
.lp-fpk{background:linear-gradient(90deg,#CC3F6E,var(--a3));color:var(--a3)}
.lp-frd{background:linear-gradient(90deg,#CC1E2B,var(--a6));color:var(--a6)}

/* ── BAR CHART ── */
.lp-bc{display:flex;align-items:flex-end;gap:.75rem;height:130px;padding-top:.5rem;}
.lp-bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.lp-bfw{flex:1;width:100%;display:flex;align-items:flex-end;}
.lp-bf{width:100%;border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,var(--a1),rgba(0,212,255,.3));
  transition:height 1.2s cubic-bezier(.16,1,.3,1);min-height:3px;position:relative;cursor:default;
  box-shadow:0 0 12px rgba(0,212,255,.25);}
.lp-bf::before{content:'';position:absolute;top:0;left:0;right:0;height:30%;background:rgba(255,255,255,.15);border-radius:8px 8px 0 0}
.lp-bf:hover{filter:brightness(1.2);box-shadow:0 0 20px rgba(0,212,255,.4);}
.lp-bf::after{content:attr(data-n);position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:600;color:var(--a1);
  white-space:nowrap;opacity:0;transition:opacity .2s;}
.lp-bf:hover::after{opacity:1;}
.lp-bla{font-size:.58rem;font-weight:600;color:var(--dtxm);text-align:center;line-height:1.3;white-space:nowrap;}
.lp-bax{height:1px;background:var(--glbd);width:100%;margin-bottom:.5rem;}

/* ── TABLE ── */
.lp-ts{overflow-x:auto;}.lp-ts::-webkit-scrollbar{height:5px;width:5px;}
.lp-ts::-webkit-scrollbar-thumb{background:var(--a2);border-radius:50px;}
.lp-t{width:100%;border-collapse:collapse;min-width:500px;}
.lp-t thead tr{background:rgba(255,255,255,.03);border-bottom:1px solid var(--glbd);}
.lp-t th{padding:.8rem 1.125rem;text-align:left;font-family:'Syne',sans-serif;font-size:.6rem;font-weight:700;
  color:var(--dtxm);text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;}
.lp-t th.ct,.lp-t td.ct{text-align:center;}
.lp-t tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .14s;}
.lp-t tbody tr:hover{background:rgba(255,255,255,.04);}
.lp-t tbody tr:last-child{border-bottom:none;}
.lp-t td{padding:.85rem 1.125rem;font-size:.84rem;font-weight:500;color:var(--dtx);vertical-align:middle;}
.lp-mo{font-family:'JetBrains Mono',monospace;font-size:.78rem;}
.lp-bdg{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .7rem;border-radius:50px;font-size:.68rem;font-weight:700;border:1px solid transparent;}
.lp-bA{background:rgba(0,255,194,.1);color:#00FFC2;border-color:rgba(0,255,194,.2)}
.lp-bB{background:rgba(0,212,255,.1);color:var(--a1);border-color:rgba(0,212,255,.2)}
.lp-bC{background:rgba(255,179,71,.1);color:var(--a5);border-color:rgba(255,179,71,.2)}
.lp-bD{background:rgba(255,107,157,.1);color:var(--a3);border-color:rgba(255,107,157,.2)}
.lp-bE{background:rgba(255,71,87,.1);color:var(--a6);border-color:rgba(255,71,87,.2)}

/* ── ABSENSI TILES ── */
.lp-ag{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.75rem;}
.lp-at{background:var(--gl);border:1px solid var(--glbd);border-radius:18px;padding:1.375rem;
  text-align:center;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;}
.lp-at::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:0 0 18px 18px;}
.lp-at:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.3);background:var(--glhv);}
.lp-at.ha::before{background:var(--a4)}.lp-at.iz::before{background:var(--a1)}
.lp-at.sk::before{background:var(--a5)}.lp-at.al::before{background:var(--a6)}
.lp-atn{font-family:'JetBrains Mono',monospace;font-size:2.5rem;font-weight:600;line-height:1;margin-bottom:.25rem;}
.lp-at.ha .lp-atn{color:var(--a4)}.lp-at.iz .lp-atn{color:var(--a1)}
.lp-at.sk .lp-atn{color:var(--a5)}.lp-at.al .lp-atn{color:var(--a6)}
.lp-atl{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dtxm);}
.lp-atp{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:600;margin-top:.2rem;}
.lp-at.ha .lp-atp{color:var(--a4)}.lp-at.iz .lp-atp{color:var(--a1)}
.lp-at.sk .lp-atp{color:var(--a5)}.lp-at.al .lp-atp{color:var(--a6)}

/* ── SPP PILLS ── */
.lp-sp{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.75rem;}
.lp-spi{background:var(--gl);border:1px solid var(--glbd);border-radius:18px;padding:1.25rem;
  text-align:center;transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.lp-spi:hover{transform:translateY(-4px);background:var(--glhv);}
.lp-spin{font-family:'JetBrains Mono',monospace;font-size:2rem;font-weight:600;line-height:1;margin-bottom:.2rem;}
.lp-spil{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dtxm);}
.lp-spi.lu .lp-spin{color:var(--a4)}.lp-spi.bl .lp-spin{color:var(--a6)}.lp-spi.pct .lp-spin{color:var(--a5)}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — navbar sidebar 272px/240px/0px
════════════════════════════════════════════════════════ */
@media(min-width:1024px) and (max-width:1199px){
  .lp-sr{grid-template-columns:1fr 1fr;}
  .lp-hchart{display:none;}
  .lp-hcon{padding:2rem;}
}
@media(min-width:769px) and (max-width:1023px){
  .lp-sr{grid-template-columns:1fr 1fr;}
  .lp-2c{grid-template-columns:1fr;}
  .lp-hchart{display:none;}
  .lp-hcon{padding:1.75rem;}
  .lp-hico{width:60px;height:60px;font-size:2rem;}
  .lp-htit{font-size:1.625rem;}
}
@media(max-width:768px){
  .lp-sr{grid-template-columns:1fr 1fr;}
  .lp-2c{grid-template-columns:1fr;}
  .lp-ag{grid-template-columns:1fr 1fr;}
  .lp-sp{grid-template-columns:1fr 1fr;gap:.75rem;}
  .lp-sp .lp-spi:last-child{grid-column:1/-1;}
  .lp-hchart{display:none;}
  .lp-hcon{padding:1.5rem 1.25rem;gap:1rem;}
  .lp-hico{width:54px;height:54px;font-size:1.75rem;}
  .lp-htit{font-size:1.4rem;}
  .lp-ti{padding:.3rem;gap:.25rem;}
  .lp-tb{padding:.5rem 1rem;font-size:.72rem;}
  .lp-scv{font-size:2rem;}
  .lp-atn{font-size:2rem;}
}
@media(max-width:480px){
  .lp-sr{grid-template-columns:1fr;}
  .lp-ag{grid-template-columns:1fr;}
  .lp-sp{grid-template-columns:1fr;}
  .lp-sp .lp-spi:last-child{grid-column:auto;}
  .lp-hcon{flex-direction:column;align-items:flex-start;}
  .lp-hstats{gap:.875rem;}
  .lp-acts{gap:.5rem;}
  .lp-btn{padding:.6rem 1rem;font-size:.75rem;}
  .lp-sc{padding:1.125rem;}
}
@media print{.lp-tw,.lp-acts{display:none!important;}.main{background:#fff!important;color:#000!important;}}
</style>
<div class="main"><div class="wrap">

<!-- HERO -->
<header class="lp-hero">
  <svg class="lp-hchart" viewBox="0 0 320 130" preserveAspectRatio="none">
    <defs>
      <linearGradient id="lLg1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#00D4FF"/><stop offset="100%" stop-color="#00FFC2"/></linearGradient>
      <linearGradient id="lLg2" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#7B61FF"/><stop offset="100%" stop-color="#FF6B9D"/></linearGradient>
      <linearGradient id="lLg3" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#FFB347"/><stop offset="100%" stop-color="#FF4757"/></linearGradient>
    </defs>
    <path class="lp-hline lp-hl1" d="M10,100 Q50,40 90,70 T170,30 T250,60 T310,20"/>
    <path class="lp-hline lp-hl2" d="M10,110 Q60,80 100,90 T180,60 T260,80 T310,50"/>
    <path class="lp-hline lp-hl3" d="M10,120 Q70,100 110,108 T190,90 T270,100 T310,80"/>
    <g class="lp-hdots">
      <circle cx="90" cy="70" r="3" fill="#00D4FF" style="animation-delay:.8s"/>
      <circle cx="170" cy="30" r="3" fill="#00D4FF" style="animation-delay:1.2s"/>
      <circle cx="250" cy="60" r="3" fill="#00D4FF" style="animation-delay:1.6s"/>
    </g>
  </svg>
  <div class="lp-hcon">
    <div class="lp-hico">📊</div>
    <div class="lp-htx">
      <div class="lp-pill">📈 Analitik Real-time · <?php echo date('d/m/Y'); ?></div>
      <h1 class="lp-htit">Laporan &amp; Statistik</h1>
      <p class="lp-hsub">Pantau performa dan aktivitas akademik MA As-Syafi'iyah 02 secara menyeluruh</p>
      <div class="lp-hstats">
        <div class="lp-hs"><div class="lp-hs-d" style="background:var(--a1)"></div><span class="lp-hs-n"><?php echo $total_siswa; ?></span><span class="lp-hs-l">Siswa</span></div>
        <div class="lp-hs"><div class="lp-hs-d" style="background:var(--a2)"></div><span class="lp-hs-n"><?php echo $total_nilai; ?></span><span class="lp-hs-l">Nilai</span></div>
        <div class="lp-hs"><div class="lp-hs-d" style="background:var(--a4)"></div><span class="lp-hs-n"><?php echo $pct_lunas; ?>%</span><span class="lp-hs-l">SPP Lunas</span></div>
        <div class="lp-hs"><div class="lp-hs-d" style="background:var(--a5)"></div><span class="lp-hs-n"><?php echo $total_surat; ?></span><span class="lp-hs-l">Surat</span></div>
      </div>
    </div>
  </div>
</header>

<!-- TABS -->
<div class="lp-tw">
  <div class="lp-ti">
    <a href="?type=overview" class="lp-tb <?php echo $tab==='overview'?'on':''; ?>">📊 Ringkasan</a>
    <a href="?type=akademik" class="lp-tb <?php echo $tab==='akademik'?'on':''; ?>">🎓 Akademik</a>
    <a href="?type=keuangan" class="lp-tb <?php echo $tab==='keuangan'?'on':''; ?>">💰 Keuangan</a>
    <a href="?type=absensi"  class="lp-tb <?php echo $tab==='absensi'?'on':''; ?>">✅ Absensi</a>
  </div>
</div>

<!-- ACTIONS -->
<div class="lp-acts">
  <button onclick="window.print()" class="lp-btn lp-bg">🖨️ Cetak Laporan</button>
  <a href="export_excel.php?type=<?php echo $tab; ?>" class="lp-btn lp-bn">📥 Export Excel</a>
</div>
<?php if($tab==='overview'): ?>
<div class="lp-sr">
  <div class="lp-sc s1"><div class="lp-scr"><div class="lp-scl">Total Siswa</div><div class="lp-sci">🎓</div></div><div class="lp-scv lp-ctr" data-t="<?=$total_siswa?>"><?=$total_siswa?></div><div class="lp-scs">Siswa aktif terdaftar</div></div>
  <div class="lp-sc s2"><div class="lp-scr"><div class="lp-scl">Mata Pelajaran</div><div class="lp-sci">📚</div></div><div class="lp-scv lp-ctr" data-t="<?=$total_mapel?>"><?=$total_mapel?></div><div class="lp-scs">Mapel tersedia</div></div>
  <div class="lp-sc s3"><div class="lp-scr"><div class="lp-scl">Total Nilai</div><div class="lp-sci">📝</div></div><div class="lp-scv lp-ctr" data-t="<?=$total_nilai?>"><?=$total_nilai?></div><div class="lp-scs">Data penilaian</div></div>
  <div class="lp-sc s4"><div class="lp-scr"><div class="lp-scl">Arsip Surat</div><div class="lp-sci">📬</div></div><div class="lp-scv lp-ctr" data-t="<?=$total_surat?>"><?=$total_surat?></div><div class="lp-scs">Dokumen tersimpan</div></div>
</div>
<div class="lp-2c">
  <div class="lp-card">
    <div class="lp-chd"><div class="lp-chdl"><div class="lp-cbdg cy">👥</div><div><div class="lp-ctit">Distribusi Gender</div><div class="lp-csub">Siswa aktif</div></div></div></div>
    <div class="lp-cbd">
      <div class="lp-pi"><div class="lp-pl"><span class="lp-pln">👨 Laki-laki</span><span class="lp-plv"><?=$siswa_l?> siswa</span></div><div class="lp-pt"><div class="lp-pf lp-fcy" data-w="<?=$total_siswa>0?round($siswa_l/$total_siswa*100):0?>" style="width:0%"></div></div></div>
      <div class="lp-pi"><div class="lp-pl"><span class="lp-pln">👩 Perempuan</span><span class="lp-plv"><?=$siswa_p?> siswa</span></div><div class="lp-pt"><div class="lp-pf lp-fpk" data-w="<?=$total_siswa>0?round($siswa_p/$total_siswa*100):0?>" style="width:0%"></div></div></div>
    </div>
  </div>
  <div class="lp-card">
    <div class="lp-chd"><div class="lp-chdl"><div class="lp-cbdg mn">💳</div><div><div class="lp-ctit">Status SPP <?=$bln_id?></div><div class="lp-csub"><?=$thn?></div></div></div></div>
    <div class="lp-cbd">
      <div class="lp-pi"><div class="lp-pl"><span class="lp-pln">✅ Lunas</span><span class="lp-plv"><?=$spp_lunas?> siswa — <?=$pct_lunas?>%</span></div><div class="lp-pt lp-ptlg"><div class="lp-pf lp-fmn" data-w="<?=$pct_lunas?>" style="width:0%"></div></div></div>
      <div class="lp-pi"><div class="lp-pl"><span class="lp-pln">⏳ Belum Lunas</span><span class="lp-plv"><?=$spp_belum?> siswa</span></div><div class="lp-pt lp-ptlg"><div class="lp-pf lp-fam" data-w="<?=$total_siswa>0?round($spp_belum/$total_siswa*100):0?>" style="width:0%"></div></div></div>
    </div>
  </div>
</div>
<?php if(count($spk_list)>0): ?>
<div class="lp-card">
  <div class="lp-chd"><div class="lp-chdl"><div class="lp-cbdg am">🏫</div><div><div class="lp-ctit">Distribusi Siswa per Kelas</div><div class="lp-csub"><?=count($spk_list)?> kelas</div></div></div></div>
  <div class="lp-cbd">
  <?php $maxK=max(1,max(array_column($spk_list,'c')));
  $pfx=['lp-fcy','lp-fvi','lp-fmn','lp-fam','lp-fpk','lp-frd'];
  foreach($spk_list as $i=>$spk): $pc=round($spk['c']/$maxK*100); ?>
  <div class="lp-pi"><div class="lp-pl"><span class="lp-pln">Kelas <?=htmlspecialchars($spk['kelas'])?></span><span class="lp-plv"><?=$spk['c']?> siswa</span></div><div class="lp-pt"><div class="lp-pf <?=$pfx[$i%6]?>" data-w="<?=$pc?>" style="width:0%"></div></div></div>
  <?php endforeach; ?>
  </div>
</div>
<?php endif; ?>

<?php elseif($tab==='akademik'): ?>
<div class="lp-sr">
  <div class="lp-sc s1"><div class="lp-scr"><div class="lp-scl">Rata-rata Nilai</div><div class="lp-sci">📊</div></div><div class="lp-scv"><?=number_format($rata_nilai,2)?></div><div class="lp-scs">Keseluruhan mapel</div></div>
  <div class="lp-sc s2"><div class="lp-scr"><div class="lp-scl">Total Nilai</div><div class="lp-sci">📝</div></div><div class="lp-scv lp-ctr" data-t="<?=$total_nilai?>"><?=$total_nilai?></div><div class="lp-scs">Data penilaian</div></div>
  <div class="lp-sc s3"><div class="lp-scr"><div class="lp-scl">Mata Pelajaran</div><div class="lp-sci">📚</div></div><div class="lp-scv lp-ctr" data-t="<?=$total_mapel?>"><?=$total_mapel?></div><div class="lp-scs">Mapel aktif</div></div>
  <div class="lp-sc s4"><div class="lp-scr"><div class="lp-scl">Siswa Aktif</div><div class="lp-sci">🎓</div></div><div class="lp-scv lp-ctr" data-t="<?=$total_siswa?>"><?=$total_siswa?></div><div class="lp-scs">Mengikuti pembelajaran</div></div>
</div>
<?php if(count($dist_pred)>0): ?>
<div class="lp-card">
  <div class="lp-chd"><div class="lp-chdl"><div class="lp-cbdg cy">📈</div><div><div class="lp-ctit">Distribusi Predikat Nilai</div><div class="lp-csub"><?=$total_nilai?> data</div></div></div></div>
  <div class="lp-cbd">
  <?php $pcm=['A'=>'lp-fmn','B'=>'lp-fcy','C'=>'lp-fam','D'=>'lp-fpk','E'=>'lp-frd'];
  foreach($dist_pred as $pred=>$jml): $pct=$total_nilai>0?round($jml/$total_nilai*100,1):0; ?>
  <div class="lp-pi"><div class="lp-pl"><span class="lp-pln"><span class="lp-bdg lp-b<?=$pred?>"><?=$pred?></span> &nbsp;Predikat <?=$pred?></span><span class="lp-plv"><?=$jml?> nilai · <?=$pct?>%</span></div><div class="lp-pt lp-ptlg"><div class="lp-pf <?=$pcm[$pred]??'lp-fcy'?>" data-w="<?=$pct?>" style="width:0%"></div></div></div>
  <?php endforeach; ?>
  </div>
</div>
<?php endif; ?>
<?php if(count($top10)>0): ?>
<div class="lp-card">
  <div class="lp-chd"><div class="lp-chdl"><div class="lp-cbdg am">🏆</div><div><div class="lp-ctit">Top 10 Siswa Berprestasi</div><div class="lp-csub">Rata-rata nilai tertinggi</div></div></div></div>
  <div class="lp-cbd0"><div class="lp-ts"><table class="lp-t">
    <thead><tr><th>#</th><th>Nama Siswa</th><th>Kelas</th><th class="ct">Rata-rata</th><th class="ct">Predikat</th></tr></thead>
    <tbody>
    <?php $rn=1; foreach($top10 as $ts):
      $pred=$ts['rata']>=90?'A':($ts['rata']>=80?'B':($ts['rata']>=70?'C':($ts['rata']>=60?'D':'E')));
      $ri=$rn===1?'🥇':($rn===2?'🥈':($rn===3?'🥉':$rn));
    ?>
    <tr>
      <td style="font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--dtxm)"><?=$ri?></td>
      <td><strong style="color:var(--dtx)"><?=htmlspecialchars($ts['nama'])?></strong></td>
      <td style="color:var(--dtxm)"><?=htmlspecialchars($ts['kelas'])?></td>
      <td class="ct lp-mo" style="color:var(--a4);font-weight:600"><?=number_format($ts['rata'],2)?></td>
      <td class="ct"><span class="lp-bdg lp-b<?=$pred?>"><?=$pred?></span></td>
    </tr>
    <?php $rn++; endforeach; ?>
    </tbody>
  </table></div></div>
</div>
<?php endif; ?>

<?php elseif($tab==='keuangan'): ?>
<div class="lp-sp">
  <div class="lp-spi lu"><div class="lp-spin lp-ctr" data-t="<?=$spp_lunas?>"><?=$spp_lunas?></div><div class="lp-spil">✅ Lunas <?=$bln_id?></div></div>
  <div class="lp-spi bl"><div class="lp-spin lp-ctr" data-t="<?=$spp_belum?>"><?=$spp_belum?></div><div class="lp-spil">⏳ Belum Lunas</div></div>
  <div class="lp-spi pct"><div class="lp-spin"><?=$pct_lunas?>%</div><div class="lp-spil">📊 Tingkat Bayar</div></div>
</div>
<div class="lp-2c">
  <div class="lp-card">
    <div class="lp-chd"><div class="lp-chdl"><div class="lp-cbdg cy">📈</div><div><div class="lp-ctit">SPP 6 Bulan Terakhir</div><div class="lp-csub">Siswa bayar lunas</div></div></div></div>
    <div class="lp-cbd">
      <div class="lp-bc" id="lpBc">
      <?php foreach($rekap as $rs): $pct=$max_rekap>0?round($rs['jml']/$max_rekap*100):0; ?>
      <div class="lp-bcol"><div class="lp-bfw"><div class="lp-bf" style="height:<?=$pct?>%" data-n="<?=$rs['jml']?>"></div></div><div class="lp-bla"><?=$rs['label']?></div></div>
      <?php endforeach; ?>
      </div>
      <div class="lp-bax"></div>
    </div>
  </div>
  <div class="lp-card">
    <div class="lp-chd"><div class="lp-chdl"><div class="lp-cbdg mn">💰</div><div><div class="lp-ctit">Pembayaran <?=$bln_id?></div><div class="lp-csub" style="color:var(--a4)">Rp <?=number_format($total_pmasuk,0,',','.')?></div></div></div></div>
    <div class="lp-cbd">
      <div class="lp-pi"><div class="lp-pl"><span class="lp-pln">✅ Lunas</span><span class="lp-plv"><?=$spp_lunas?> siswa</span></div><div class="lp-pt lp-ptlg"><div class="lp-pf lp-fmn" data-w="<?=$pct_lunas?>" style="width:0%"></div></div></div>
      <div class="lp-pi"><div class="lp-pl"><span class="lp-pln">⏳ Belum Lunas</span><span class="lp-plv"><?=$spp_belum?> siswa</span></div><div class="lp-pt lp-ptlg"><div class="lp-pf lp-frd" data-w="<?=$total_siswa>0?round($spp_belum/$total_siswa*100):0?>" style="width:0%"></div></div></div>
      <div style="margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--glbd)">
        <div style="font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dtxm);margin-bottom:.4rem">Total Pemasukan Bulan Ini</div>
        <div style="font-family:'JetBrains Mono',monospace;font-size:1.625rem;font-weight:600;color:var(--a4)">Rp <?=number_format($total_pmasuk,0,',','.')?></div>
      </div>
    </div>
  </div>
</div>
<div class="lp-card">
  <div class="lp-chd"><div class="lp-chdl"><div class="lp-cbdg vi">📋</div><div><div class="lp-ctit">Rekap SPP 6 Bulan</div><div class="lp-csub">Detail per bulan</div></div></div></div>
  <div class="lp-cbd0"><div class="lp-ts"><table class="lp-t">
    <thead><tr><th>Bulan</th><th>Tahun</th><th class="ct">Siswa Bayar</th><th class="ct">Total Pemasukan</th><th class="ct">Persentase</th></tr></thead>
    <tbody>
    <?php foreach($rekap as $idx=>$rs): $pct=$total_siswa>0?round($rs['jml']/$total_siswa*100,1):0; ?>
    <tr>
      <td><strong><?=$rs['label']?></strong></td>
      <td class="lp-mo" style="color:var(--dtxm)"><?=date('Y',strtotime("-$idx months"))?></td>
      <td class="ct"><?=$rs['jml']?> <span style="color:var(--dtxm);font-size:.75rem">siswa</span></td>
      <td class="ct lp-mo" style="font-weight:600;color:var(--a4)">Rp <?=number_format($rs['total'],0,',','.')?></td>
      <td class="ct"><div style="display:flex;align-items:center;gap:.5rem;justify-content:center"><div class="lp-pt" style="width:72px;height:5px"><div class="lp-pf lp-fmn" data-w="<?=$pct?>" style="width:0%"></div></div><span class="lp-mo" style="font-size:.68rem;color:var(--dtxm)"><?=$pct?>%</span></div></td>
    </tr>
    <?php endforeach; ?>
    </tbody>
  </table></div></div>
</div>

<?php elseif($tab==='absensi'): ?>
<div class="lp-ag">
  <?php $aconf=['Hadir'=>['ha','✅'],'Izin'=>['iz','📝'],'Sakit'=>['sk','🏥'],'Alpha'=>['al','❌']];
  foreach($abs as $st=>$n): $ac=$aconf[$st]; $pct=$abs_total>0?round($n/$abs_total*100,1):0; ?>
  <div class="lp-at <?=$ac[0]?>"><div class="lp-atn lp-ctr" data-t="<?=$n?>"><?=$n?></div><div class="lp-atl"><?=$ac[1]?> <?=$st?></div><div class="lp-atp"><?=$pct?>% dari total</div></div>
  <?php endforeach; ?>
</div>
<div class="lp-card">
  <div class="lp-chd"><div class="lp-chdl"><div class="lp-cbdg cy">📊</div><div><div class="lp-ctit">Grafik Kehadiran <?=$bln_id?></div><div class="lp-csub"><?=$abs_total?> total catatan</div></div></div></div>
  <div class="lp-cbd">
  <?php $apf=['Hadir'=>'lp-fmn','Izin'=>'lp-fcy','Sakit'=>'lp-fam','Alpha'=>'lp-frd'];
  foreach($abs as $st=>$n): $pct=$abs_total>0?round($n/$abs_total*100,1):0; ?>
  <div class="lp-pi"><div class="lp-pl"><span class="lp-pln"><?=$st?></span><span class="lp-plv"><?=$n?> kali · <?=$pct?>%</span></div><div class="lp-pt lp-ptlg"><div class="lp-pf <?=$apf[$st]?>" data-w="<?=$pct?>" style="width:0%"></div></div></div>
  <?php endforeach; ?>
  </div>
</div>
<?php endif; ?>

</div></div>
<script>
document.addEventListener('DOMContentLoaded',()=>{
  // Progress bars
  const io1=new IntersectionObserver(entries=>{
    entries.forEach(e=>{if(e.isIntersecting){const el=e.target;setTimeout(()=>{el.style.width=el.dataset.w+'%'},80);io1.unobserve(el);}});
  },{threshold:.1});
  document.querySelectorAll('.lp-pf[data-w]').forEach(f=>io1.observe(f));

  // Counter
  const io2=new IntersectionObserver(entries=>{
    entries.forEach(e=>{if(e.isIntersecting){const el=e.target,target=parseInt(el.dataset.t)||0;let cur=0;const step=Math.ceil(target/50);const t=setInterval(()=>{cur=Math.min(cur+step,target);el.textContent=cur.toLocaleString();if(cur>=target)clearInterval(t);},18);io2.unobserve(el);}});
  },{threshold:.2});
  document.querySelectorAll('.lp-ctr[data-t]').forEach(c=>io2.observe(c));

  // Bar chart
  const bars=document.querySelectorAll('.lp-bf');
  if(bars.length){
    const saved=Array.from(bars).map(b=>b.style.height);
    bars.forEach(b=>{b.style.transition='none';b.style.height='0%';});
    const io3=new IntersectionObserver(entries=>{
      entries.forEach(e=>{if(e.isIntersecting){bars.forEach((b,i)=>{setTimeout(()=>{b.style.transition='height 1.1s cubic-bezier(.16,1,.3,1)';b.style.height=saved[i];},i*70);});io3.disconnect();}});
    },{threshold:.1});
    const chart=document.getElementById('lpBc');
    if(chart)io3.observe(chart);
  }
});
</script>