<?php
session_start();
date_default_timezone_set('Asia/Jakarta');
if(!isset($_SESSION['siswa_login'])){ header("Location: login_siswa.php"); exit(); }
include 'koneksi.php';

$siswa_id   = intval($_SESSION['siswa_id']);
$siswa_nama = $_SESSION['siswa_nama'];
$siswa_kelas= $_SESSION['siswa_kelas'];
$siswa_data = $_SESSION['siswa_data'];

// ── AUTO-DETECT KOLOM ──────────────────────────────────
function gc($conn,$t){$c=[];$r=mysqli_query($conn,"SHOW COLUMNS FROM `$t`");if($r)while($row=mysqli_fetch_assoc($r))$c[]=$row['Field'];return $c;}
$nKol=gc($conn,'nilai'); $aKol=gc($conn,'absensi'); $sKol=gc($conn,'siswa');
$hNA   =in_array('nilai_akhir',$nKol);
$hPred =in_array('predikat',$nKol);
$hSmt  =in_array('semester',$nKol);
$hThn  =in_array('tahun_ajaran',$nKol);
$hKet  =in_array('keterangan',$aKol);
$hFoto =in_array('foto',$sKol);

// ── NILAI ─────────────────────────────────────────────
$nilaiSel = "n.id,n.mapel_id,n.nilai_tugas,n.nilai_uts,n.nilai_uas,m.nama_mapel,m.kkm";
if($hNA)   $nilaiSel.=",n.nilai_akhir";
if($hPred) $nilaiSel.=",n.predikat";
if($hSmt)  $nilaiSel.=",n.semester";
if($hThn)  $nilaiSel.=",n.tahun_ajaran";
$nilaiQ=mysqli_query($conn,"SELECT $nilaiSel FROM nilai n JOIN mata_pelajaran m ON n.mapel_id=m.id WHERE n.siswa_id=$siswa_id ORDER BY m.nama_mapel");
$nilaiList=[];
$totalNA=0; $countNA=0;
while($r=mysqli_fetch_assoc($nilaiQ)){
    $na=$hNA?floatval($r['nilai_akhir']):round((floatval($r['nilai_tugas'])+floatval($r['nilai_uts'])+floatval($r['nilai_uas']))/3,2);
    $r['_na']=$na;
    $r['_pred']=$hPred?($r['predikat']??''):($na>=90?'A':($na>=80?'B':($na>=70?'C':($na>=60?'D':'E'))));
    $r['_lulus']=$na>=(floatval($r['kkm'])>0?floatval($r['kkm']):75);
    $nilaiList[]=$r;
    $totalNA+=$na; $countNA++;
}
$rataNA=$countNA>0?round($totalNA/$countNA,1):0;
$lulusCount=count(array_filter($nilaiList,fn($x)=>$x['_lulus']));

// ── ABSENSI ─────────────────────────────────
$bln=date('Y-m');
$absenQ=mysqli_query($conn,"SELECT status,COUNT(*) c FROM absensi WHERE siswa_id=$siswa_id AND DATE_FORMAT(tanggal,'%Y-%m')='$bln' GROUP BY status");
$absStat=['Hadir'=>0,'Izin'=>0,'Sakit'=>0,'Alpha'=>0];
while($r=mysqli_fetch_assoc($absenQ)) $absStat[$r['status']]=(int)$r['c'];
$totalHari=array_sum($absStat);
$pHadir=$totalHari>0?round($absStat['Hadir']/$totalHari*100):0;

$recAbsQ=mysqli_query($conn,"SELECT tanggal,status".($hKet?',keterangan':'')." FROM absensi WHERE siswa_id=$siswa_id ORDER BY tanggal DESC LIMIT 10");
$recAbs=[]; while($r=mysqli_fetch_assoc($recAbsQ)) $recAbs[]=$r;

// ── SPP ───────────────────────────────────────────────
$sppQ=mysqli_query($conn,"SELECT bulan,tahun,nominal,status,tanggal_bayar,metode_bayar FROM spp WHERE siswa_id=$siswa_id ORDER BY tahun DESC, FIELD(bulan,'Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember') DESC");
$sppList=[]; while($r=mysqli_fetch_assoc($sppQ)) $sppList[]=$r;
$sppLunas  =count(array_filter($sppList,fn($x)=>str_contains($x['status'],'Lunas')));
$sppBelum  =count($sppList)-$sppLunas;
$totalNominal=array_sum(array_column($sppList,'nominal'));

$fotoUrl='assets/default_student.png';
if($hFoto && !empty($siswa_data['foto']) && file_exists($siswa_data['foto'])) $fotoUrl=$siswa_data['foto'];

if(isset($_GET['logout'])){ session_destroy(); header("Location: login_siswa.php"); exit(); }
$activeTab = isset($_GET['tab']) ? $_GET['tab'] : 'beranda';
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Portal Siswa — <?=htmlspecialchars($siswa_nama)?></title>
<link rel="icon" href="assets/sekolah.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Source+Sans+3:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ═══════════════════════════════════════════
   ROOT TOKENS — Classic Scholar Palette
═══════════════════════════════════════════ */
:root{
    --ink:        #1C1917;
    --ink-2:      #44403C;
    --ink-3:      #78716C;
    --parchment:  #FAF7F2;
    --cream:      #F5F0E8;
    --cream-d:    #EDE7D9;
    --gold:       #B45309;
    --gold-l:     #D97706;
    --gold-xl:    #F59E0B;
    --gold-pale:  #FEF3C7;
    --forest:     #166534;
    --forest-l:   #15803D;
    --forest-pale:#DCFCE7;
    --ruby:       #9F1239;
    --ruby-pale:  #FFE4E6;
    --sapphire:   #1E3A5F;
    --sapphire-l: #1D4ED8;
    --sapphire-pale:#DBEAFE;
    --sidebar-w:  270px;
    --sidebar-bg: #1C1917;
    --topbar-h:   64px;
    --radius:     12px;
    --radius-lg:  18px;
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:  0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    --shadow-lg:  0 12px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);
    --transition: all .22s cubic-bezier(.4,0,.2,1);
}

/* ═══════════ BASE ═══════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:'Source Sans 3',sans-serif;
    background:var(--parchment);
    color:var(--ink);
    min-height:100vh;
    display:flex;
    overflow-x:hidden;
}

/* Parchment texture overlay */
body::before{
    content:'';
    position:fixed;inset:0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    pointer-events:none;z-index:0;
}

/* ═══════════ SIDEBAR ═══════════ */
.sidebar{
    position:fixed;
    left:0;top:0;bottom:0;
    width:var(--sidebar-w);
    background:var(--sidebar-bg);
    display:flex;flex-direction:column;
    z-index:100;
    box-shadow:4px 0 24px rgba(0,0,0,.3);
    overflow:hidden;
}

/* Sidebar ornamental top line */
.sidebar::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg, var(--gold) 0%, var(--gold-xl) 50%, var(--gold) 100%);
}

/* Sidebar pattern */
.sidebar::after{
    content:'';
    position:absolute;inset:0;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,transparent 60px,
            rgba(255,255,255,.012) 60px,rgba(255,255,255,.012) 61px
        );
    pointer-events:none;
}

.sb-brand{
    padding:1.75rem 1.5rem 1.25rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    position:relative;z-index:1;
}
.sb-logo-wrap{
    display:flex;align-items:center;gap:.875rem;
    margin-bottom:1.25rem;
}
.sb-logo{
    width:44px;height:44px;
    border-radius:10px;
    border:2px solid rgba(180,83,9,.5);
    background:rgba(180,83,9,.15);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;flex-shrink:0;
}
.sb-logo img{width:32px;height:32px;object-fit:contain}
.sb-school{font-family:'Playfair Display',serif;font-size:.95rem;font-weight:700;color:#fff;line-height:1.2}
.sb-tagline{font-size:.65rem;color:rgba(255,255,255,.4);font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}

/* Sidebar profile */
.sb-profile{
    display:flex;align-items:center;gap:.875rem;
    padding:.875rem 1rem;
    background:rgba(255,255,255,.05);
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,.08);
}
.sb-ava{
    width:42px;height:42px;border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(180,83,9,.6);
    background:rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;flex-shrink:0;overflow:hidden;
}
.sb-ava img{width:42px;height:42px;object-fit:cover;border-radius:50%}
.sb-pname{font-size:.875rem;font-weight:600;color:#fff;line-height:1.2}
.sb-pkls{font-size:.7rem;color:rgba(255,255,255,.45);font-weight:400;margin-top:2px}

/* Sidebar nav */
.sb-nav{
    flex:1;
    padding:1.25rem .875rem;
    overflow-y:auto;
    position:relative;z-index:1;
}
.sb-nav::-webkit-scrollbar{width:4px}
.sb-nav::-webkit-scrollbar-track{background:transparent}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}

.sb-section-label{
    font-size:.6rem;font-weight:700;
    color:rgba(255,255,255,.3);
    text-transform:uppercase;letter-spacing:.12em;
    padding:.5rem .625rem .375rem;
    margin-top:.75rem;
}
.sb-section-label:first-child{margin-top:0}

.nav-item{
    display:flex;align-items:center;gap:.875rem;
    padding:.7rem .875rem;
    border-radius:var(--radius);
    font-size:.875rem;font-weight:500;
    color:rgba(255,255,255,.55);
    cursor:pointer;
    transition:var(--transition);
    text-decoration:none;
    margin-bottom:2px;
    position:relative;
    border:1px solid transparent;
    user-select:none;
}
.nav-item:hover{
    color:rgba(255,255,255,.9);
    background:rgba(255,255,255,.07);
}
.nav-item.active{
    color:#fff;
    background:rgba(180,83,9,.22);
    border-color:rgba(180,83,9,.4);
    font-weight:600;
}
.nav-item.active::before{
    content:'';
    position:absolute;left:0;top:25%;bottom:25%;
    width:3px;border-radius:0 3px 3px 0;
    background:var(--gold-xl);
}
.nav-icon{font-size:1.1rem;width:22px;text-align:center;flex-shrink:0}
.nav-badge{
    margin-left:auto;
    font-size:.6rem;font-weight:700;
    padding:.15rem .5rem;border-radius:50px;
    background:rgba(180,83,9,.3);color:var(--gold-xl);
    border:1px solid rgba(180,83,9,.4);
}

/* Sidebar footer */
.sb-footer{
    padding:1rem .875rem;
    border-top:1px solid rgba(255,255,255,.08);
    position:relative;z-index:1;
}
.btn-logout-sb{
    display:flex;align-items:center;gap:.75rem;
    width:100%;padding:.7rem .875rem;
    border-radius:var(--radius);
    font-size:.875rem;font-weight:600;
    color:rgba(255,255,255,.5);
    background:transparent;
    border:1px solid rgba(255,255,255,.06);
    cursor:pointer;
    transition:var(--transition);
    font-family:'Source Sans 3',sans-serif;
    text-decoration:none;
}
.btn-logout-sb:hover{
    color:#FCA5A5;
    background:rgba(159,18,57,.15);
    border-color:rgba(159,18,57,.3);
}
.sb-version{text-align:center;font-size:.6rem;color:rgba(255,255,255,.2);margin-top:.75rem;letter-spacing:.08em}

/* ═══════════ MAIN AREA ═══════════ */
.main-wrap{
    margin-left:var(--sidebar-w);
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    position:relative;z-index:1;
}

/* ═══════════ TOPBAR ═══════════ */
.topbar{
    position:sticky;top:0;z-index:50;
    height:var(--topbar-h);
    background:rgba(250,247,242,.92);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--cream-d);
    display:flex;align-items:center;
    padding:0 2rem;
    gap:1rem;
    box-shadow:var(--shadow-sm);
}
.topbar-title{
    font-family:'Playfair Display',serif;
    font-size:1.25rem;
    font-weight:700;
    color:var(--ink);
    flex:1;
}
.topbar-sub{font-size:.78rem;color:var(--ink-3);font-weight:400;margin-top:1px}
.topbar-date{
    font-size:.8rem;font-weight:500;color:var(--ink-3);
    display:flex;align-items:center;gap:.5rem;
    padding:.4rem .9rem;
    background:var(--cream);
    border:1px solid var(--cream-d);
    border-radius:50px;
    white-space:nowrap;
}

/* ═══════════ CONTENT ═══════════ */
.content{
    flex:1;
    padding:2rem;
    max-width:1400px;
    width:100%;
}

/* Panel system */
.panel{display:none;animation:fadeUp .35s ease-out}
.panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════ BERANDA HERO ═══════════ */
.hero-banner{
    background:linear-gradient(135deg, #1C1917 0%, #292524 40%, #1C1917 100%);
    border-radius:var(--radius-lg);
    padding:2.25rem 2.5rem;
    margin-bottom:1.75rem;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(180,83,9,.3);
}
.hero-banner::before{
    content:'';
    position:absolute;
    top:-60px;right:-60px;
    width:280px;height:280px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(180,83,9,.2) 0%, transparent 70%);
}
.hero-banner::after{
    content:'';
    position:absolute;
    bottom:-40px;left:30%;
    width:200px;height:200px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 70%);
}
/* Decorative line pattern */
.hero-deco{
    position:absolute;top:0;right:0;bottom:0;
    width:240px;
    background-image:repeating-linear-gradient(
        -60deg,
        transparent,transparent 18px,
        rgba(255,255,255,.025) 18px,rgba(255,255,255,.025) 19px
    );
}
.hero-content{position:relative;z-index:2;display:flex;align-items:center;gap:2rem}
.hero-ava{
    width:96px;height:96px;
    border-radius:16px;
    border:3px solid rgba(180,83,9,.5);
    object-fit:cover;overflow:hidden;
    background:rgba(255,255,255,.08);
    display:flex;align-items:center;justify-content:center;
    font-size:3rem;flex-shrink:0;
    box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.hero-ava img{width:96px;height:96px;object-fit:cover;border-radius:13px}
.hero-info{flex:1}
.hero-greeting{
    font-size:.72rem;font-weight:600;
    color:var(--gold-l);
    text-transform:uppercase;letter-spacing:.1em;
    margin-bottom:.4rem;
}
.hero-name{
    font-family:'Playfair Display',serif;
    font-size:1.875rem;font-weight:700;
    color:#fff;line-height:1.15;
    margin-bottom:.6rem;
}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.hero-chip{
    display:flex;align-items:center;gap:.4rem;
    padding:.3rem .8rem;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:50px;
    font-size:.75rem;font-weight:500;
    color:rgba(255,255,255,.75);
}
.hero-stats{
    display:flex;gap:.875rem;flex-shrink:0;
}
.hero-stat{
    text-align:center;
    padding:1rem 1.25rem;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--radius);
    min-width:90px;
}
.hero-stat-n{
    font-family:'DM Mono',monospace;
    font-size:1.875rem;font-weight:500;
    color:var(--gold-xl);line-height:1;
    margin-bottom:.25rem;
}
.hero-stat-l{font-size:.6rem;font-weight:600;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em}

/* ═══════════ QUICK STATS ═══════════ */
.qstats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.25rem;
    margin-bottom:1.75rem;
}
.qs{
    background:var(--cream);
    border-radius:var(--radius-lg);
    border:1px solid var(--cream-d);
    padding:1.375rem 1.5rem;
    position:relative;
    overflow:hidden;
    transition:var(--transition);
    cursor:default;
}
.qs:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
    border-color:var(--cream-d);
}
/* Top accent line */
.qs::before{
    content:'';
    position:absolute;top:0;left:0;right:0;height:3px;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.qs.gold::before{background:linear-gradient(90deg,var(--gold),var(--gold-xl))}
.qs.forest::before{background:linear-gradient(90deg,var(--forest),var(--forest-l))}
.qs.ruby::before{background:linear-gradient(90deg,var(--ruby),#E11D48)}
.qs.sapphire::before{background:linear-gradient(90deg,var(--sapphire),var(--sapphire-l))}

/* Corner ornament */
.qs::after{
    content:'';
    position:absolute;bottom:-20px;right:-20px;
    width:80px;height:80px;
    border-radius:50%;
    opacity:.06;
}
.qs.gold::after{background:var(--gold)}
.qs.forest::after{background:var(--forest)}
.qs.ruby::after{background:var(--ruby)}
.qs.sapphire::after{background:var(--sapphire)}

.qs-icon{font-size:1.5rem;margin-bottom:.625rem;display:block}
.qs-num{
    font-family:'Playfair Display',serif;
    font-size:2.25rem;font-weight:700;
    line-height:1;margin-bottom:.25rem;
}
.qs.gold .qs-num{color:var(--gold)}
.qs.forest .qs-num{color:var(--forest)}
.qs.ruby .qs-num{color:var(--ruby)}
.qs.sapphire .qs-num{color:var(--sapphire)}
.qs-label{font-size:.72rem;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.875rem}
.qs-bar{height:5px;background:var(--cream-d);border-radius:50px;overflow:hidden}
.qs-fill{height:100%;border-radius:50px;transition:width .9s ease}
.qs.gold .qs-fill{background:linear-gradient(90deg,var(--gold),var(--gold-xl))}
.qs.forest .qs-fill{background:linear-gradient(90deg,var(--forest),var(--forest-l))}
.qs.ruby .qs-fill{background:linear-gradient(90deg,var(--ruby),#E11D48)}
.qs.sapphire .qs-fill{background:linear-gradient(90deg,var(--sapphire),var(--sapphire-l))}

/* ═══════════ CARDS ═══════════ */
.card{
    background:var(--cream);
    border-radius:var(--radius-lg);
    border:1px solid var(--cream-d);
    overflow:hidden;
    margin-bottom:1.5rem;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}
.card:hover{box-shadow:var(--shadow-md)}

.card-header{
    padding:1.25rem 1.75rem;
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--cream-d);
    background:rgba(255,255,255,.5);
}
.card-header-l{display:flex;align-items:center;gap:.875rem}
.card-icon{
    width:40px;height:40px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;
    flex-shrink:0;
}
.ci-gold{background:var(--gold-pale);border:1px solid rgba(180,83,9,.2)}
.ci-forest{background:var(--forest-pale);border:1px solid rgba(22,101,52,.2)}
.ci-ruby{background:var(--ruby-pale);border:1px solid rgba(159,18,57,.2)}
.ci-sapphire{background:var(--sapphire-pale);border:1px solid rgba(29,78,216,.2)}

.card-title{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--ink)}
.card-sub{font-size:.72rem;color:var(--ink-3);font-weight:400;margin-top:2px}
.card-body{padding:1.5rem 1.75rem}

/* ═══════════ TABLE ═══════════ */
.tscroll{overflow-x:auto}
.tscroll::-webkit-scrollbar{height:5px}
.tscroll::-webkit-scrollbar-track{background:var(--cream-d)}
.tscroll::-webkit-scrollbar-thumb{background:var(--gold);border-radius:50px}

table{width:100%;border-collapse:collapse;min-width:680px}
thead tr{border-bottom:2px solid var(--cream-d)}
th{
    padding:.75rem 1rem;
    text-align:left;
    font-size:.67rem;font-weight:700;
    color:var(--ink-3);
    text-transform:uppercase;letter-spacing:.09em;
    white-space:nowrap;
}
tbody tr{
    border-bottom:1px solid var(--cream-d);
    transition:background .15s;
}
tbody tr:hover{background:rgba(255,255,255,.7)}
tbody tr:last-child{border-bottom:none}
td{
    padding:.875rem 1rem;
    font-size:.875rem;font-weight:500;
    color:var(--ink);
    vertical-align:middle;
}
.mono{font-family:'DM Mono',monospace;font-size:.82rem}

/* ═══════════ BADGES ═══════════ */
.badge{
    display:inline-flex;align-items:center;gap:.3rem;
    padding:.25rem .7rem;
    border-radius:50px;
    font-size:.7rem;font-weight:700;
    border:1px solid transparent;
    white-space:nowrap;
}
.bA{background:var(--forest-pale);color:var(--forest);border-color:rgba(22,101,52,.25)}
.bB{background:var(--sapphire-pale);color:var(--sapphire);border-color:rgba(29,78,216,.25)}
.bC{background:var(--gold-pale);color:var(--gold);border-color:rgba(180,83,9,.25)}
.bD,.bE{background:var(--ruby-pale);color:var(--ruby);border-color:rgba(159,18,57,.25)}
.bl-lulus{background:var(--forest-pale);color:var(--forest);border-color:rgba(22,101,52,.25)}
.bl-blm{background:var(--ruby-pale);color:var(--ruby);border-color:rgba(159,18,57,.25)}

/* Status absensi */
.abs-st{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .7rem;border-radius:50px;font-size:.7rem;font-weight:700;border:1px solid transparent}
.ast-H{background:var(--forest-pale);color:var(--forest);border-color:rgba(22,101,52,.25)}
.ast-I{background:var(--sapphire-pale);color:var(--sapphire);border-color:rgba(29,78,216,.25)}
.ast-S{background:var(--gold-pale);color:var(--gold);border-color:rgba(180,83,9,.25)}
.ast-A{background:var(--ruby-pale);color:var(--ruby);border-color:rgba(159,18,57,.25)}

/* SPP */
.spL{background:var(--forest-pale);color:var(--forest);border-color:rgba(22,101,52,.25)}
.spB{background:var(--ruby-pale);color:var(--ruby);border-color:rgba(159,18,57,.25)}
.spC{background:var(--gold-pale);color:var(--gold);border-color:rgba(180,83,9,.25)}

/* ═══════════ SCORE BAR ═══════════ */
.sbar{display:flex;align-items:center;gap:.625rem}
.sbar-track{flex:1;height:7px;background:var(--cream-d);border-radius:50px;overflow:hidden;min-width:60px}
.sbar-fill{height:100%;border-radius:50px;transition:width .8s ease}
.sbar-val{font-family:'DM Mono',monospace;font-size:.8rem;font-weight:500;min-width:38px;text-align:right;color:var(--ink-2)}

/* ═══════════ ABSENSI ═══════════ */
.abs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
.abs-card{
    background:rgba(255,255,255,.6);
    border-radius:var(--radius);
    border:1px solid var(--cream-d);
    padding:1.25rem;text-align:center;
    transition:var(--transition);
}
.abs-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.abs-icon{font-size:2rem;margin-bottom:.5rem;display:block}
.abs-num{font-family:'Playfair Display',serif;font-size:2rem;font-weight:700;line-height:1}
.abs-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-top:.25rem}
.abs-h .abs-num{color:var(--forest)}
.abs-i .abs-num{color:var(--sapphire)}
.abs-s .abs-num{color:var(--gold)}
.abs-a .abs-num{color:var(--ruby)}

.pct-row{
    display:flex;align-items:center;gap:1rem;
    background:rgba(255,255,255,.6);
    border-radius:var(--radius);
    border:1px solid var(--cream-d);
    padding:1rem 1.25rem;
    margin-bottom:1.25rem;
}
.pct-label{font-size:.8rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.pct-bar-wrap{flex:1}
.pct-bar{height:10px;background:var(--cream-d);border-radius:50px;overflow:hidden}
.pct-fill{height:100%;background:linear-gradient(90deg,var(--forest),#22C55E);border-radius:50px;transition:width .9s ease}
.pct-value{font-family:'DM Mono',monospace;font-size:.9rem;font-weight:600;color:var(--forest);white-space:nowrap}

/* ═══════════ SPP SUMMARY ═══════════ */
.spp-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}
.spp-chip{
    text-align:center;
    background:rgba(255,255,255,.6);
    border:1px solid var(--cream-d);
    border-radius:var(--radius);
    padding:1.125rem 1rem;
}
.spp-chip-n{font-family:'Playfair Display',serif;font-size:1.75rem;font-weight:700;line-height:1;margin-bottom:.25rem}
.spp-chip-l{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}

/* ═══════════ PROFIL ═══════════ */
.profil-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.pdata-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.875rem}
.pitem{
    background:rgba(255,255,255,.6);
    border-radius:var(--radius);
    border:1px solid var(--cream-d);
    padding:.875rem 1rem;
}
.pitem.full{grid-column:1/-1}
.pitem-lbl{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:.375rem}
.pitem-val{font-size:.9rem;font-weight:600;color:var(--ink)}

.foto-box{
    display:flex;flex-direction:column;align-items:center;
    gap:1rem;padding:2rem;
    background:rgba(255,255,255,.6);border-radius:var(--radius);
    border:1px solid var(--cream-d);margin-bottom:1rem;
}
.foto-img{
    width:160px;height:160px;
    border-radius:16px;
    object-fit:cover;
    border:3px solid var(--cream-d);
    box-shadow:var(--shadow-md);
    background:var(--cream-d);
    display:flex;align-items:center;justify-content:center;
    font-size:4.5rem;overflow:hidden;
}
.foto-img img{width:160px;height:160px;object-fit:cover}
.foto-name{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--ink);text-align:center}
.foto-kls{font-size:.8rem;color:var(--ink-3);font-weight:500;text-align:center;margin-top:.25rem}

.summary-list{display:flex;flex-direction:column;gap:.625rem}
.sum-item{
    display:flex;align-items:center;justify-content:space-between;
    padding:.75rem 1rem;
    background:rgba(255,255,255,.6);
    border-radius:var(--radius);
    border:1px solid var(--cream-d);
}
.sum-key{font-size:.875rem;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:.5rem}
.sum-val{font-family:'DM Mono',monospace;font-size:.875rem;font-weight:600;color:var(--gold)}

/* ═══════════ SECTION TITLE ═══════════ */
.sec-title{
    font-family:'Playfair Display',serif;
    font-size:1.375rem;font-weight:700;
    color:var(--ink);
    margin-bottom:1.25rem;
    display:flex;align-items:center;gap:.75rem;
}
.sec-title::after{
    content:'';flex:1;
    height:1px;
    background:linear-gradient(90deg,var(--cream-d),transparent);
}

/* Divider */
.divider{height:1px;background:var(--cream-d);margin:1.5rem 0}

/* ═══════════ EMPTY STATE ═══════════ */
.empty{text-align:center;padding:3rem;color:var(--ink-3)}
.empty-icon{font-size:4rem;margin-bottom:1rem;display:block;opacity:.4}
.empty-text{font-size:1rem;font-weight:600}

/* ═══════════ MOBILE TOGGLE ═══════════ */
.sb-toggle{
    display:none;
    position:fixed;top:.875rem;left:.875rem;z-index:300;
    width:38px;height:38px;border-radius:10px;
    background:var(--sidebar-bg);color:#fff;
    border:1px solid rgba(255,255,255,.1);
    cursor:pointer;font-size:1.1rem;
    align-items:center;justify-content:center;
    box-shadow:var(--shadow-md);
    transition:var(--transition);
}
.sb-toggle:hover{background:#292524}
.sb-overlay{
    display:none;
    position:fixed;inset:0;z-index:99;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px);
}
.sb-overlay.visible{display:block}

/* ═══════════ DECORATIVE DIVIDER LINE ═══════════ */
.classic-rule{
    display:flex;align-items:center;gap:.75rem;
    margin:1.5rem 0;color:var(--gold);font-size:.875rem;
}
.classic-rule::before,.classic-rule::after{
    content:'';flex:1;height:1px;
    background:linear-gradient(90deg,transparent,var(--gold-pale),var(--cream-d));
}

/* ═══════════ RESPONSIVE ═══════════ */

/* Laptop kecil (≤1280px) */
@media(max-width:1280px){
    .qstats{grid-template-columns:repeat(2,1fr)}
    .content{padding:1.5rem}
}

/* Tablet landscape / laptop kecil (≤1100px) */
@media(max-width:1100px){
    :root{--sidebar-w:240px}
    .sb-school{font-size:.85rem}
    .nav-item{font-size:.82rem;padding:.625rem .75rem}
    .qstats{grid-template-columns:repeat(2,1fr)}
    .hero-name{font-size:1.625rem}
    .hero-stats{gap:.625rem}
    .hero-stat{min-width:80px;padding:.875rem 1rem}
    .hero-stat-n{font-size:1.625rem}
}

/* Tablet portrait (≤900px) — sidebar jadi overlay */
@media(max-width:900px){
    :root{--sidebar-w:270px}
    .sidebar{
        transform:translateX(-100%);
        transition:transform .3s cubic-bezier(.4,0,.2,1);
        box-shadow:none;
    }
    .sidebar.open{
        transform:translateX(0);
        box-shadow:6px 0 32px rgba(0,0,0,.35);
    }
    .main-wrap{margin-left:0}
    .sb-toggle{display:flex}
    /* Topbar padding kiri supaya tidak tertutup toggle */
    .topbar{padding-left:4rem}
    .topbar-title{font-size:1.1rem}

    .hero-content{flex-direction:column;align-items:flex-start;gap:1.25rem}
    .hero-stats{align-self:stretch;justify-content:flex-start;gap:.625rem;flex-wrap:wrap}
    .hero-stat{flex:1;min-width:80px}
    .hero-name{font-size:1.5rem}

    .profil-grid{grid-template-columns:1fr}
    .abs-grid{grid-template-columns:1fr 1fr}
    .spp-summary{grid-template-columns:repeat(3,1fr)}

    /* Beranda 2-col grid jadi 1-col */
    .panel#panel-beranda > div[style*="grid-template-columns:1fr 1fr"]{
        grid-template-columns:1fr !important;
    }
}

/* HP besar (≤640px) */
@media(max-width:640px){
    .content{padding:1rem}
    .topbar{padding:0 1rem 0 3.75rem;height:56px}
    .topbar-title{font-size:1rem}
    .topbar-date{display:none}

    .hero-banner{padding:1.25rem 1.25rem 1.5rem;border-radius:var(--radius)}
    .hero-ava{width:72px;height:72px;border-radius:12px;font-size:2.25rem}
    .hero-ava img{width:72px;height:72px}
    .hero-name{font-size:1.25rem}
    .hero-greeting{font-size:.67rem}
    .hero-chips{gap:.375rem}
    .hero-chip{font-size:.7rem;padding:.25rem .625rem}
    .hero-stat{padding:.75rem .875rem;min-width:72px}
    .hero-stat-n{font-size:1.375rem}
    .hero-stat-l{font-size:.55rem}

    .qstats{grid-template-columns:1fr 1fr;gap:.875rem}
    .qs{padding:1.1rem 1.125rem}
    .qs-num{font-size:1.75rem}
    .qs-icon{font-size:1.25rem}

    .card-header{padding:1rem 1.25rem}
    .card-body{padding:1.125rem 1.25rem}
    .card-title{font-size:.92rem}
    .card-icon{width:34px;height:34px;font-size:1.1rem}

    .abs-grid{grid-template-columns:1fr 1fr;gap:.75rem}
    .abs-card{padding:1rem}
    .abs-icon{font-size:1.625rem}
    .abs-num{font-size:1.625rem}

    .spp-summary{grid-template-columns:1fr;gap:.75rem}
    .pdata-grid{grid-template-columns:1fr}

    .sec-title{font-size:1.15rem}
    table{min-width:520px}
    th{font-size:.62rem;padding:.625rem .75rem}
    td{font-size:.82rem;padding:.75rem .75rem}
}

/* HP kecil (≤400px) */
@media(max-width:400px){
    .content{padding:.75rem}
    .topbar{padding:0 .75rem 0 3.5rem;height:52px}
    .hero-banner{padding:1rem 1rem 1.25rem}
    .hero-name{font-size:1.1rem}
    .hero-stats{gap:.5rem}
    .hero-stat{padding:.625rem .75rem;min-width:64px}
    .hero-stat-n{font-size:1.25rem}
    .qstats{grid-template-columns:1fr 1fr;gap:.625rem}
    .qs-num{font-size:1.5rem}
    .card-header{padding:.875rem 1rem}
    .card-body{padding:1rem}
    .abs-grid{grid-template-columns:1fr 1fr;gap:.5rem}
    .foto-img{width:130px;height:130px}
    .foto-img img{width:130px;height:130px}
}
</style>
</head>
<body>

<!-- ═══════ MOBILE TOGGLE ═══════ -->
<button class="sb-toggle" id="sbToggle" onclick="toggleSidebar()" aria-label="Menu">☰</button>
<div class="sb-overlay" id="sbOverlay" onclick="closeSidebar()"></div>

<!-- ═══════════ SIDEBAR ═══════════ -->
<aside class="sidebar" id="sidebar">
    <div class="sb-brand">
        <div class="sb-logo-wrap">
            <div class="sb-logo"><img src="assets/sekolah.png" alt="" onerror="this.parentNode.innerHTML='🏫'"></div>
            <div>
                <div class="sb-school">MA As-Syafi'iyah 02</div>
                <div class="sb-tagline">Portal Akademik Siswa</div>
            </div>
        </div>
        <div class="sb-profile">
            <div class="sb-ava">
                <?php if(!empty($siswa_data['foto']) && file_exists($siswa_data['foto'])): ?>
                <img src="<?=htmlspecialchars($siswa_data['foto'])?>" alt="">
                <?php else: ?>👤<?php endif; ?>
            </div>
            <div>
                <div class="sb-pname"><?=htmlspecialchars($siswa_nama)?></div>
                <div class="sb-pkls">Kelas <?=htmlspecialchars($siswa_kelas)?></div>
            </div>
        </div>
    </div>

    <nav class="sb-nav">
        <div class="sb-section-label">Menu Utama</div>
        <a class="nav-item <?=$activeTab=='beranda'?'active':''?>" href="?tab=beranda" onclick="showTab('beranda');return false;">
            <span class="nav-icon">🏠</span> Beranda
        </a>
        <a class="nav-item <?=$activeTab=='nilai'?'active':''?>" href="?tab=nilai" onclick="showTab('nilai');return false;">
            <span class="nav-icon">📝</span> Nilai Akademik
            <?php if($countNA>0): ?><span class="nav-badge"><?=$countNA?></span><?php endif; ?>
        </a>
        <a class="nav-item <?=$activeTab=='absensi'?'active':''?>" href="?tab=absensi" onclick="showTab('absensi');return false;">
            <span class="nav-icon">📅</span> Absensi
        </a>
        <a class="nav-item <?=$activeTab=='spp'?'active':''?>" href="?tab=spp" onclick="showTab('spp');return false;">
            <span class="nav-icon">💳</span> Pembayaran SPP
            <?php if($sppBelum>0): ?><span class="nav-badge" style="background:rgba(159,18,57,.3);color:#FCA5A5;border-color:rgba(159,18,57,.4)"><?=$sppBelum?></span><?php endif; ?>
        </a>

        <div class="sb-section-label">Informasi Pribadi</div>
        <a class="nav-item <?=$activeTab=='profil'?'active':''?>" href="?tab=profil" onclick="showTab('profil');return false;">
            <span class="nav-icon">👤</span> Profil Saya
        </a>
    </nav>

    <div class="sb-footer">
        <a href="?logout=1" class="btn-logout-sb" onclick="return confirm('Yakin ingin keluar?')">
            <span>🚪</span> Keluar dari Portal
        </a>
        <div class="sb-version">© <?=date('Y')?> MA As-Syafi'iyah 02</div>
    </div>
</aside>

<!-- ═══════════ MAIN ═══════════ -->
<div class="main-wrap">
    <!-- Topbar -->
    <div class="topbar">
        <div style="flex:1">
            <div class="topbar-title" id="topbar-title">Beranda</div>
            <div class="topbar-sub" id="topbar-sub">Selamat datang di portal siswa</div>
        </div>
        <div class="topbar-date">📅 <?=date('l, d F Y')?></div>
    </div>

    <!-- Content -->
    <div class="content">

        <!-- ════════ PANEL: BERANDA ════════ -->
        <div class="panel active" id="panel-beranda">
            <!-- Hero -->
            <div class="hero-banner">
                <div class="hero-deco"></div>
                <div class="hero-content">
                    <div class="hero-ava">
                        <?php if(!empty($siswa_data['foto']) && file_exists($siswa_data['foto'])): ?>
                        <img src="<?=htmlspecialchars($siswa_data['foto'])?>" alt="">
                        <?php else: ?>🧑‍🎓<?php endif; ?>
                    </div>
                    <div class="hero-info">
                        <div class="hero-greeting">✦ Siswa Aktif · Selamat Datang</div>
                        <div class="hero-name"><?=htmlspecialchars($siswa_nama)?></div>
                        <div class="hero-chips">
                            <div class="hero-chip">🏫 <?=htmlspecialchars($siswa_kelas)?></div>
                            <div class="hero-chip">🪪 NIS: <?=htmlspecialchars($siswa_data['nis'])?></div>
                            <div class="hero-chip">🆔 NISN: <?=htmlspecialchars($siswa_data['nisn'])?></div>
                            <?php if(!empty($siswa_data['agama'])): ?>
                            <div class="hero-chip">🕌 <?=htmlspecialchars($siswa_data['agama'])?></div>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="hero-stats">
                        <div class="hero-stat">
                            <div class="hero-stat-n"><?=$rataNA?:'-'?></div>
                            <div class="hero-stat-l">Rata Nilai</div>
                        </div>
                        <div class="hero-stat">
                            <div class="hero-stat-n"><?=$pHadir?>%</div>
                            <div class="hero-stat-l">Kehadiran</div>
                        </div>
                        <div class="hero-stat">
                            <div class="hero-stat-n"><?=$sppLunas?></div>
                            <div class="hero-stat-l">SPP Lunas</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick stats -->
            <div class="qstats">
                <div class="qs gold">
                    <span class="qs-icon">📊</span>
                    <div class="qs-num"><?=$rataNA?:'-'?></div>
                    <div class="qs-label">Rata-rata Nilai</div>
                    <div class="qs-bar"><div class="qs-fill" data-pct="<?=$rataNA?>" style="width:0%"></div></div>
                </div>
                <div class="qs forest">
                    <span class="qs-icon">✅</span>
                    <div class="qs-num"><?=$lulusCount?>/<?=$countNA?></div>
                    <div class="qs-label">Lulus KKM</div>
                    <div class="qs-bar"><div class="qs-fill" data-pct="<?=$countNA>0?round($lulusCount/$countNA*100):0?>" style="width:0%"></div></div>
                </div>
                <div class="qs sapphire">
                    <span class="qs-icon">📅</span>
                    <div class="qs-num"><?=$pHadir?>%</div>
                    <div class="qs-label">Kehadiran Bulan Ini</div>
                    <div class="qs-bar"><div class="qs-fill" data-pct="<?=$pHadir?>" style="width:0%"></div></div>
                </div>
                <div class="qs <?=$sppBelum>0?'ruby':'forest'?>">
                    <span class="qs-icon"><?=$sppBelum>0?'⚠️':'💳'?></span>
                    <div class="qs-num"><?=$sppBelum?></div>
                    <div class="qs-label">SPP Belum Lunas</div>
                    <div class="qs-bar"><div class="qs-fill" data-pct="<?=count($sppList)>0?round($sppBelum/count($sppList)*100):0?>" style="width:0%"></div></div>
                </div>
            </div>

            <!-- Quick Summary Row -->
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem">
                <!-- Nilai singkat -->
                <div class="card">
                    <div class="card-header">
                        <div class="card-header-l">
                            <div class="card-icon ci-gold">📝</div>
                            <div>
                                <div class="card-title">Nilai Terakhir</div>
                                <div class="card-sub">5 mata pelajaran terbaru</div>
                            </div>
                        </div>
                        <a href="#" onclick="showTab('nilai');return false;" style="font-size:.78rem;font-weight:600;color:var(--gold);text-decoration:none">Lihat semua →</a>
                    </div>
                    <div class="card-body" style="padding:0">
                        <?php if(count($nilaiList)>0): ?>
                        <table>
                            <thead><tr><th>Mata Pelajaran</th><th>Akhir</th><th>Status</th></tr></thead>
                            <tbody>
                            <?php foreach(array_slice($nilaiList,0,5) as $n): ?>
                            <tr>
                                <td style="font-weight:600"><?=htmlspecialchars($n['nama_mapel'])?></td>
                                <td><span class="mono" style="font-weight:600;color:var(--gold)"><?=number_format($n['_na'],1)?></span></td>
                                <td><?php if($n['_lulus']): ?><span class="badge bl-lulus">✓ Lulus</span><?php else: ?><span class="badge bl-blm">✗ Remedial</span><?php endif; ?></td>
                            </tr>
                            <?php endforeach; ?>
                            </tbody>
                        </table>
                        <?php else: ?><div class="empty"><span class="empty-icon">📭</span><div class="empty-text">Belum ada data</div></div><?php endif; ?>
                    </div>
                </div>

                <!-- Absensi singkat -->
                <div class="card">
                    <div class="card-header">
                        <div class="card-header-l">
                            <div class="card-icon ci-sapphire">📅</div>
                            <div>
                                <div class="card-title">Absensi Terbaru</div>
                                <div class="card-sub">5 catatan terakhir</div>
                            </div>
                        </div>
                        <a href="#" onclick="showTab('absensi');return false;" style="font-size:.78rem;font-weight:600;color:var(--sapphire-l);text-decoration:none">Lihat semua →</a>
                    </div>
                    <div class="card-body" style="padding:0">
                        <?php if(count($recAbs)>0): ?>
                        <table>
                            <thead><tr><th>Tanggal</th><th>Hari</th><th>Status</th></tr></thead>
                            <tbody>
                            <?php foreach(array_slice($recAbs,0,5) as $a):
                                $stCls=['Hadir'=>'H','Izin'=>'I','Sakit'=>'S','Alpha'=>'A'][$a['status']]??'H';
                            ?>
                            <tr>
                                <td class="mono"><?=date('d/m/Y',strtotime($a['tanggal']))?></td>
                                <td style="color:var(--ink-3)"><?=date('l',strtotime($a['tanggal']))?></td>
                                <td><span class="abs-st ast-<?=$stCls?>"><?=$a['status']?></span></td>
                            </tr>
                            <?php endforeach; ?>
                            </tbody>
                        </table>
                        <?php else: ?><div class="empty"><span class="empty-icon">📭</span><div class="empty-text">Belum ada data</div></div><?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- ════════ PANEL: NILAI ════════ -->
        <div class="panel" id="panel-nilai">
            <div class="sec-title">Rekap Nilai Akademik</div>
            <div class="qstats" style="grid-template-columns:repeat(4,1fr)">
                <div class="qs gold"><span class="qs-icon">📊</span><div class="qs-num"><?=$rataNA?:'-'?></div><div class="qs-label">Rata-rata</div><div class="qs-bar"><div class="qs-fill" data-pct="<?=$rataNA?>" style="width:0%"></div></div></div>
                <div class="qs sapphire"><span class="qs-icon">📚</span><div class="qs-num"><?=$countNA?></div><div class="qs-label">Mata Pelajaran</div><div class="qs-bar"><div class="qs-fill" style="width:100%"></div></div></div>
                <div class="qs forest"><span class="qs-icon">✅</span><div class="qs-num"><?=$lulusCount?></div><div class="qs-label">Lulus KKM</div><div class="qs-bar"><div class="qs-fill" data-pct="<?=$countNA>0?round($lulusCount/$countNA*100):0?>" style="width:0%"></div></div></div>
                <div class="qs <?=$countNA-$lulusCount>0?'ruby':'forest'?>"><span class="qs-icon"><?=$countNA-$lulusCount>0?'⚠️':'🏆'?></span><div class="qs-num"><?=$countNA-$lulusCount?></div><div class="qs-label">Remedial</div><div class="qs-bar"><div class="qs-fill" data-pct="<?=$countNA>0?round(($countNA-$lulusCount)/$countNA*100):0?>" style="width:0%"></div></div></div>
            </div>

            <div class="card">
                <div class="card-header">
                    <div class="card-header-l">
                        <div class="card-icon ci-gold">📋</div>
                        <div>
                            <div class="card-title">Daftar Nilai Seluruh Mata Pelajaran</div>
                            <div class="card-sub">Tahun Ajaran <?=date('Y').'/'.(date('Y')+1)?></div>
                        </div>
                    </div>
                </div>
                <div class="card-body" style="padding:0">
                <?php if(count($nilaiList)>0): ?>
                <div class="tscroll">
                <table>
                <thead><tr>
                    <th>No</th>
                    <th>Mata Pelajaran</th>
                    <th>Tugas</th><th>UTS</th><th>UAS</th>
                    <th>Nilai Akhir</th>
                    <?php if($hPred): ?><th>Predikat</th><?php endif; ?>
                    <th>KKM</th>
                    <th>Grafik</th>
                    <th>Status</th>
                </tr></thead>
                <tbody>
                <?php foreach($nilaiList as $i=>$n):
                    $na=$n['_na'];$pred=$n['_pred'];$lulus=$n['_lulus'];
                    $kkm=floatval($n['kkm'])>0?floatval($n['kkm']):75;
                    $barPct=min(100,round($na));
                    $barCol=$na>=80?'linear-gradient(90deg,var(--forest),#22C55E)':($na>=70?'linear-gradient(90deg,var(--gold),var(--gold-xl))':'linear-gradient(90deg,var(--ruby),#E11D48)');
                ?>
                <tr>
                    <td class="mono" style="color:var(--ink-3)"><?=$i+1?></td>
                    <td><strong style="font-weight:700"><?=htmlspecialchars($n['nama_mapel'])?></strong></td>
                    <td class="mono"><?=number_format(floatval($n['nilai_tugas']),1)?></td>
                    <td class="mono"><?=number_format(floatval($n['nilai_uts']),1)?></td>
                    <td class="mono"><?=number_format(floatval($n['nilai_uas']),1)?></td>
                    <td><strong class="mono" style="font-size:.92rem;color:var(--gold)"><?=number_format($na,1)?></strong></td>
                    <?php if($hPred): ?><td><span class="badge b<?=htmlspecialchars($pred)?>"><?=htmlspecialchars($pred)?></span></td><?php endif; ?>
                    <td class="mono" style="color:var(--ink-3)"><?=$kkm?></td>
                    <td style="min-width:120px">
                        <div class="sbar">
                            <div class="sbar-track"><div class="sbar-fill" style="width:<?=$barPct?>%;background:<?=$barCol?>"></div></div>
                            <span class="sbar-val"><?=$barPct?>%</span>
                        </div>
                    </td>
                    <td>
                        <?php if($lulus): ?>
                        <span class="badge bl-lulus">✓ Lulus</span>
                        <?php else: ?>
                        <span class="badge bl-blm">✗ Remedial</span>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
                </tbody>
                </table>
                </div>
                <?php else: ?>
                <div class="empty"><span class="empty-icon">📭</span><div class="empty-text">Belum ada data nilai</div></div>
                <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- ════════ PANEL: ABSENSI ════════ -->
        <div class="panel" id="panel-absensi">
            <div class="sec-title">Rekap Kehadiran</div>
            <div class="card">
                <div class="card-header">
                    <div class="card-header-l">
                        <div class="card-icon ci-sapphire">📅</div>
                        <div>
                            <div class="card-title">Kehadiran Bulan <?=date('F Y')?></div>
                            <div class="card-sub"><?=$totalHari?> hari tercatat</div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="abs-grid">
                        <?php foreach([
                            ['Hadir','✅','abs-h',$absStat['Hadir']],
                            ['Izin','📝','abs-i',$absStat['Izin']],
                            ['Sakit','🏥','abs-s',$absStat['Sakit']],
                            ['Alpha','❌','abs-a',$absStat['Alpha']],
                        ] as [$lbl,$ico,$cls,$val]): ?>
                        <div class="abs-card <?=$cls?>">
                            <span class="abs-icon"><?=$ico?></span>
                            <div class="abs-num"><?=$val?></div>
                            <div class="abs-lbl"><?=$lbl?></div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                    <div class="pct-row">
                        <span class="pct-label">📊 Tingkat Kehadiran</span>
                        <div class="pct-bar-wrap">
                            <div class="pct-bar"><div class="pct-fill" data-pct="<?=$pHadir?>" style="width:0%"></div></div>
                        </div>
                        <span class="pct-value"><?=$pHadir?>%</span>
                    </div>
                    <div style="text-align:center;font-size:.82rem;font-weight:600;color:var(--ink-3)">
                        <?php if($pHadir>=90): ?>🌟 Kehadiran sangat baik! Pertahankan terus ya!
                        <?php elseif($pHadir>=75): ?>👍 Kehadiran cukup baik, tingkatkan lagi!
                        <?php else: ?>⚠️ Kehadiran perlu ditingkatkan. Semangat! <?php endif; ?>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <div class="card-header-l">
                        <div class="card-icon ci-sapphire">🗓️</div>
                        <div>
                            <div class="card-title">Riwayat Absensi Terbaru</div>
                            <div class="card-sub">10 data terakhir</div>
                        </div>
                    </div>
                </div>
                <div class="card-body" style="padding:0">
                <?php if(count($recAbs)>0): ?>
                <div class="tscroll">
                <table>
                <thead><tr>
                    <th>No</th><th>Tanggal</th><th>Hari</th><th>Status</th>
                    <?php if($hKet): ?><th>Keterangan</th><?php endif; ?>
                </tr></thead>
                <tbody>
                <?php foreach($recAbs as $i=>$a):
                    $stCls=['Hadir'=>'H','Izin'=>'I','Sakit'=>'S','Alpha'=>'A'][$a['status']]??'H';
                ?>
                <tr>
                    <td class="mono" style="color:var(--ink-3)"><?=$i+1?></td>
                    <td class="mono">📅 <?=date('d/m/Y',strtotime($a['tanggal']))?></td>
                    <td style="font-weight:600"><?=date('l',strtotime($a['tanggal']))?></td>
                    <td><span class="abs-st ast-<?=$stCls?>"><?=$a['status']?></span></td>
                    <?php if($hKet): ?><td style="color:var(--ink-3);max-width:200px"><?=htmlspecialchars($a['keterangan']??'-')?></td><?php endif; ?>
                </tr>
                <?php endforeach; ?>
                </tbody>
                </table>
                </div>
                <?php else: ?>
                <div class="empty"><span class="empty-icon">📭</span><div class="empty-text">Belum ada data absensi</div></div>
                <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- ════════ PANEL: SPP ════════ -->
        <div class="panel" id="panel-spp">
            <div class="sec-title">Pembayaran SPP</div>
            <div class="card">
                <div class="card-header">
                    <div class="card-header-l">
                        <div class="card-icon ci-forest">💳</div>
                        <div>
                            <div class="card-title">Status Pembayaran SPP</div>
                            <div class="card-sub">Total <?=count($sppList)?> transaksi tercatat</div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="spp-summary">
                        <div class="spp-chip">
                            <div class="spp-chip-n" style="color:var(--forest)"><?=$sppLunas?></div>
                            <div class="spp-chip-l">✅ Bulan Lunas</div>
                        </div>
                        <div class="spp-chip">
                            <div class="spp-chip-n" style="color:var(--ruby)"><?=$sppBelum?></div>
                            <div class="spp-chip-l">⏳ Belum Lunas</div>
                        </div>
                        <div class="spp-chip">
                            <div class="spp-chip-n" style="font-size:1.3rem;color:var(--gold)">Rp <?=number_format($totalNominal,0,',','.')?></div>
                            <div class="spp-chip-l">💰 Total Nominal</div>
                        </div>
                    </div>
                </div>
                <?php if(count($sppList)>0): ?>
                <div style="border-top:1px solid var(--cream-d)">
                <div class="tscroll">
                <table>
                <thead><tr>
                    <th>No</th><th>Bulan</th><th>Tahun</th>
                    <th>Nominal</th><th>Status</th><th>Metode</th><th>Tgl Bayar</th>
                </tr></thead>
                <tbody>
                <?php foreach($sppList as $i=>$sp):
                    $stCls=str_contains($sp['status'],'Lunas')?'spL':(str_contains($sp['status'],'Cicilan')?'spC':'spB');
                    $stIco=str_contains($sp['status'],'Lunas')?'✓':(str_contains($sp['status'],'Cicilan')?'↻':'⏳');
                ?>
                <tr>
                    <td class="mono" style="color:var(--ink-3)"><?=$i+1?></td>
                    <td style="font-weight:700"><?=htmlspecialchars($sp['bulan'])?></td>
                    <td class="mono"><?=$sp['tahun']?></td>
                    <td class="mono" style="font-weight:700;color:var(--gold)">Rp <?=number_format($sp['nominal'],0,',','.')?></td>
                    <td><span class="badge <?=$stCls?>"><?=$stIco?> <?=htmlspecialchars($sp['status'])?></span></td>
                    <td><?=htmlspecialchars($sp['metode_bayar']??'-')?></td>
                    <td class="mono" style="color:var(--ink-3)"><?=!empty($sp['tanggal_bayar'])?date('d/m/Y',strtotime($sp['tanggal_bayar'])):'-'?></td>
                </tr>
                <?php endforeach; ?>
                </tbody>
                </table>
                </div>
                </div>
                <?php else: ?>
                <div class="empty"><span class="empty-icon">💳</span><div class="empty-text">Belum ada data SPP</div></div>
                <?php endif; ?>
            </div>
        </div>

        <!-- ════════ PANEL: PROFIL ════════ -->
        <div class="panel" id="panel-profil">
            <div class="sec-title">Profil Siswa</div>
            <div class="profil-grid">
                <!-- Data pribadi -->
                <div class="card">
                    <div class="card-header">
                        <div class="card-header-l">
                            <div class="card-icon ci-ruby">📋</div>
                            <div>
                                <div class="card-title">Data Pribadi</div>
                                <div class="card-sub">Biodata lengkap siswa</div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="pdata-grid">
                            <div class="pitem"><div class="pitem-lbl">Nama Lengkap</div><div class="pitem-val"><?=htmlspecialchars($siswa_data['nama'])?></div></div>
                            <div class="pitem"><div class="pitem-lbl">NIS</div><div class="pitem-val" style="font-family:'DM Mono',monospace"><?=htmlspecialchars($siswa_data['nis'])?></div></div>
                            <div class="pitem"><div class="pitem-lbl">NISN</div><div class="pitem-val" style="font-family:'DM Mono',monospace"><?=htmlspecialchars($siswa_data['nisn'])?></div></div>
                            <div class="pitem"><div class="pitem-lbl">Jenis Kelamin</div><div class="pitem-val"><?=htmlspecialchars($siswa_data['jk'])?></div></div>
                            <div class="pitem"><div class="pitem-lbl">Tempat Lahir</div><div class="pitem-val"><?=htmlspecialchars($siswa_data['tempat_lahir'])?></div></div>
                            <div class="pitem"><div class="pitem-lbl">Tanggal Lahir</div><div class="pitem-val"><?=date('d F Y',strtotime($siswa_data['tanggal_lahir']))?></div></div>
                            <div class="pitem"><div class="pitem-lbl">Agama</div><div class="pitem-val"><?=htmlspecialchars($siswa_data['agama'])?></div></div>
                            <div class="pitem"><div class="pitem-lbl">Kelas</div><div class="pitem-val"><?=htmlspecialchars($siswa_data['kelas'])?></div></div>
                            <?php if(!empty($siswa_data['tahun_masuk'])): ?>
                            <div class="pitem"><div class="pitem-lbl">Tahun Masuk</div><div class="pitem-val"><?=htmlspecialchars($siswa_data['tahun_masuk'])?></div></div>
                            <?php endif; ?>
                            <?php if(!empty($siswa_data['no_telp'])): ?>
                            <div class="pitem"><div class="pitem-lbl">No. Telepon</div><div class="pitem-val"><?=htmlspecialchars($siswa_data['no_telp'])?></div></div>
                            <?php endif; ?>
                            <?php if(!empty($siswa_data['email'])): ?>
                            <div class="pitem full"><div class="pitem-lbl">Email</div><div class="pitem-val"><?=htmlspecialchars($siswa_data['email'])?></div></div>
                            <?php endif; ?>
                            <div class="pitem full"><div class="pitem-lbl">Alamat</div><div class="pitem-val"><?=htmlspecialchars($siswa_data['alamat'])?></div></div>
                            <?php if(!empty($siswa_data['kota'])): ?>
                            <div class="pitem"><div class="pitem-lbl">Kota</div><div class="pitem-val"><?=htmlspecialchars($siswa_data['kota'])?></div></div>
                            <?php endif; ?>
                            <?php if(!empty($siswa_data['provinsi'])): ?>
                            <div class="pitem"><div class="pitem-lbl">Provinsi</div><div class="pitem-val"><?=htmlspecialchars($siswa_data['provinsi'])?></div></div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <!-- Foto + Ringkasan -->
                <div>
                    <div class="card" style="margin-bottom:1.5rem">
                        <div class="card-header">
                            <div class="card-header-l">
                                <div class="card-icon ci-gold">📸</div>
                                <div><div class="card-title">Foto Siswa</div></div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="foto-box">
                                <div class="foto-img">
                                    <?php if(!empty($siswa_data['foto']) && file_exists($siswa_data['foto'])): ?>
                                    <img src="<?=htmlspecialchars($siswa_data['foto'])?>" alt="">
                                    <?php else: ?>🧑‍🎓<?php endif; ?>
                                </div>
                                <div>
                                    <div class="foto-name"><?=htmlspecialchars($siswa_nama)?></div>
                                    <div class="foto-kls">Kelas <?=htmlspecialchars($siswa_kelas)?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <div class="card-header-l">
                                <div class="card-icon ci-gold">📊</div>
                                <div><div class="card-title">Ringkasan Akademik</div></div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="summary-list">
                                <?php foreach([
                                    ['📊','Rata-rata Nilai',$rataNA?:'-'],
                                    ['📚','Mata Pelajaran',$countNA.' mapel'],
                                    ['✅','Lulus KKM',$lulusCount.' mapel'],
                                    ['📅','Kehadiran Bln Ini',$pHadir.'%'],
                                    ['💳','SPP Lunas',$sppLunas.' bulan'],
                                ] as [$ico,$key,$val]): ?>
                                <div class="sum-item">
                                    <div class="sum-key"><?=$ico?> <?=$key?></div>
                                    <div class="sum-val"><?=$val?></div>
                                </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div><!-- /content -->
</div><!-- /main-wrap -->

<script>
// Tab config
const tabMeta = {
    beranda:  {title:'Beranda',          sub:'Selamat datang di portal siswa'},
    nilai:    {title:'Nilai Akademik',   sub:'Rekap nilai seluruh mata pelajaran'},
    absensi:  {title:'Absensi',          sub:'Rekap kehadiran dan riwayat absensi'},
    spp:      {title:'Pembayaran SPP',   sub:'Status dan riwayat pembayaran SPP'},
    profil:   {title:'Profil Saya',      sub:'Data pribadi dan biodata lengkap'},
};

function showTab(id){
    // Panels
    document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
    document.querySelectorAll('.nav-item').forEach(n=>n.classList.remove('active'));
    document.getElementById('panel-'+id).classList.add('active');
    document.querySelectorAll('.nav-item').forEach(n=>{
        if(n.getAttribute('href')&&n.getAttribute('href').includes('tab='+id))n.classList.add('active');
    });
    // Topbar
    const m=tabMeta[id];
    if(m){
        document.getElementById('topbar-title').textContent=m.title;
        document.getElementById('topbar-sub').textContent=m.sub;
    }
    // Animate bars
    setTimeout(animBars,80);
    // Close sidebar on mobile
    if(window.innerWidth<900) closeSidebar();
}

function animBars(){
    document.querySelectorAll('.panel.active [data-pct]').forEach(el=>{
        el.style.width=(parseFloat(el.dataset.pct)||0)+'%';
    });
}

function toggleSidebar(){
    const sb = document.getElementById('sidebar');
    const ov = document.getElementById('sbOverlay');
    sb.classList.toggle('open');
    ov.classList.toggle('visible');
}
function closeSidebar(){
    document.getElementById('sidebar').classList.remove('open');
    document.getElementById('sbOverlay').classList.remove('visible');
}

// Close on outside click (mobile)
document.addEventListener('click',function(e){
    const sb=document.getElementById('sidebar');
    const btn=document.getElementById('sbToggle');
    if(window.innerWidth<900 && sb.classList.contains('open') && !sb.contains(e.target) && !btn.contains(e.target)){
        closeSidebar();
    }
});

// Init
window.addEventListener('DOMContentLoaded',()=>{
    // Set active tab from URL
    const params=new URLSearchParams(location.search);
    const tab=params.get('tab')||'beranda';
    showTab(tab);
});
</script>
</body>
</html>