<?php
session_start();
if(!isset($_SESSION['login'])){ header("Location: login.php"); exit(); }
include 'koneksi.php';

$res_kelas = mysqli_query($conn, "SELECT DISTINCT kelas FROM siswa WHERE kelas IS NOT NULL AND kelas != '' ORDER BY kelas");
$daftar_kelas = [];
while($k = mysqli_fetch_assoc($res_kelas)) $daftar_kelas[] = $k['kelas'];

usort($daftar_kelas, function($a, $b){
    $order = ['X'=>1,'XI'=>2,'XII'=>3];
    preg_match('/^(XII|XI|X)\s*/i', $a, $mA);
    preg_match('/^(XII|XI|X)\s*/i', $b, $mB);
    $oA = isset($mA[1]) ? ($order[strtoupper($mA[1])]??99) : 99;
    $oB = isset($mB[1]) ? ($order[strtoupper($mB[1])]??99) : 99;
    if($oA !== $oB) return $oA - $oB;
    return strnatcasecmp($a, $b);
});

$res_siswa = mysqli_query($conn, "SELECT * FROM siswa ORDER BY kelas, nama");
$siswa_per_kelas = [];
$total_per_kelas = [];
while($s = mysqli_fetch_assoc($res_siswa)){
    $kls = $s['kelas'] ?: 'Belum Ada Kelas';
    $siswa_per_kelas[$kls][] = $s;
    $total_per_kelas[$kls] = ($total_per_kelas[$kls]??0) + 1;
}

$total_siswa = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) as c FROM siswa"))['c'];
$total_lk    = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) as c FROM siswa WHERE jk='Laki-laki'"))['c'];
$total_pr    = mysqli_fetch_assoc(mysqli_query($conn,"SELECT COUNT(*) as c FROM siswa WHERE jk='Perempuan'"))['c'];

$kelas_aktif = $_GET['kelas'] ?? ($daftar_kelas[0] ?? '');

$page_title  = "Siswa Per Kelas — MA As-Syafi'iyah 02";
$active_menu = 'siswa';
$loader_text = 'Memuat Data Kelas';
include 'navbar.php';
?>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">

<div class="main">
<div id="skw" class="wrap">
<style>
/* =============================================
   TOKENS & RESET
============================================= */
#skw,#skw *{box-sizing:border-box;font-family:'Plus Jakarta Sans',sans-serif}
#skw{
  --p:#1E40AF;--p2:#2563EB;--p3:#3B82F6;--pl:#EFF6FF;--pm:#BFDBFE;--pd:#1D4ED8;
  --t:#0F766E;--t2:#14B8A6;--tl:#F0FDFA;--tm:#99F6E4;
  --r2:#BE123C;--r3:#E11D48;--rl:#FFF1F2;--rm:#FECDD3;
  --a:#B45309;--a2:#D97706;--al:#FFFBEB;--am:#FDE68A;
  --g:#15803D;--g2:#16A34A;--gl:#F0FDF4;--gm:#BBF7D0;
  --i:#4338CA;--i2:#6366F1;--il:#EEF2FF;--im:#C7D2FE;
  --bg:#F1F5F9;--sur:#FFF;--bd:#E2E8F0;--bd2:#CBD5E1;
  --tx:#0F172A;--tx2:#1E293B;--tx3:#475569;--tx4:#94A3B8;
  --ss:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sm:0 4px 12px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.04);
  --sl:0 8px 28px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);
  --sxl:0 20px 56px rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.06);
  --rs:8px;--r:12px;--rl2:16px;--rx:20px;--rxx:24px;
  padding:0;max-width:1440px;
}
@keyframes fuUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fuPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.a0{animation:fuUp .48s cubic-bezier(.22,1,.36,1) both}
.a1{animation:fuUp .48s cubic-bezier(.22,1,.36,1) .06s both}
.a2{animation:fuUp .48s cubic-bezier(.22,1,.36,1) .12s both}
.a3{animation:fuUp .48s cubic-bezier(.22,1,.36,1) .18s both}

/* =============================================
   HERO BANNER
============================================= */
.sk-hero{
  border-radius:var(--rxx);
  background:linear-gradient(135deg,#0A1F6E 0%,#1E40AF 45%,#0E7490 100%);
  padding:clamp(22px,5vw,40px) clamp(20px,4.5vw,44px);
  margin-bottom:18px;position:relative;overflow:hidden;
  box-shadow:var(--sxl);
}
.sk-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 80% at 85% 40%,rgba(56,189,248,.2) 0%,transparent 60%),
    radial-gradient(ellipse 40% 60% at 5% 90%,rgba(99,102,241,.18) 0%,transparent 55%);
}
.sk-hero::after{
  content:'';position:absolute;
  width:260px;height:260px;border-radius:50%;
  background:rgba(255,255,255,.055);
  top:-80px;right:-50px;pointer-events:none;
}
.sk-hero-in{
  position:relative;z-index:2;
  display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.sk-hero-l{flex:1;min-width:0}
.sk-hero-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  border-radius:50px;padding:5px 14px;
  font-size:11px;font-weight:700;
  color:rgba(255,255,255,.88);
  letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:13px;backdrop-filter:blur(10px);
}
.sk-hero-h1{
  font-size:clamp(1.45rem,3.8vw,2.2rem);
  font-weight:900;color:#fff;
  line-height:1.12;margin-bottom:7px;
  letter-spacing:-.025em;
}
.sk-hero-h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#FCD34D,#7DD3FC);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.sk-hero-sub{
  font-size:clamp(.78rem,1vw,.9rem);
  color:rgba(255,255,255,.62);font-weight:500;
}
.sk-hero-r{
  display:flex;flex-direction:column;
  align-items:flex-end;gap:12px;flex-shrink:0;
}
.sk-stats{display:flex;gap:10px;flex-wrap:wrap}
.sk-stat{
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.17);
  border-radius:14px;padding:13px 18px;
  min-width:86px;text-align:center;
  backdrop-filter:blur(8px);
  transition:background .2s;
}
.sk-stat:hover{background:rgba(255,255,255,.19)}
.sk-stat-n{
  font-size:clamp(1.3rem,3.2vw,1.9rem);
  font-weight:900;color:#fff;
  font-family:'Fira Code',monospace;line-height:1;
}
.sk-stat-l{
  font-size:10px;font-weight:700;
  color:rgba(255,255,255,.58);
  text-transform:uppercase;letter-spacing:.1em;
  margin-top:3px;
}

/* =============================================
   BACK BUTTON & TOPBAR
============================================= */
.sk-topbar{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;flex-wrap:wrap;
}
.sk-back-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border-radius:50px;
  background:#fff;border:1.5px solid var(--bd);
  color:var(--tx2);font-size:12px;font-weight:700;
  text-decoration:none;box-shadow:var(--ss);
  transition:all .2s;flex-shrink:0;white-space:nowrap;
}
.sk-back-btn:hover{border-color:var(--p2);color:var(--p2);transform:translateY(-1px);box-shadow:var(--sm)}
.sk-srch-wrap{position:relative;flex:1;min-width:180px;max-width:400px}
.sk-srch-wrap::before{
  content:'🔍';position:absolute;left:13px;top:50%;
  transform:translateY(-50%);font-size:13px;pointer-events:none;
}
.sk-srch{
  width:100%;padding:10px 14px 10px 38px;
  border-radius:50px;border:1.5px solid var(--bd);
  background:#fff;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;font-weight:600;outline:none;
  box-shadow:var(--ss);transition:all .2s;
}
.sk-srch:focus{border-color:var(--p2);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.sk-srch::placeholder{color:var(--tx4)}
.sk-view-tog{
  display:flex;gap:3px;background:#fff;
  border:1.5px solid var(--bd);border-radius:10px;
  padding:3px;box-shadow:var(--ss);flex-shrink:0;
}
.sk-vtb{
  padding:7px 12px;border-radius:7px;border:none;
  cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;font-weight:800;color:var(--tx3);
  background:transparent;transition:all .2s;white-space:nowrap;
}
.sk-vtb.on,.sk-vtb:hover{
  background:linear-gradient(135deg,var(--p2),var(--i2));color:#fff;
}
.sk-cpill{
  background:#fff;border:1.5px solid var(--bd);
  border-radius:50px;padding:7px 14px;
  font-size:12px;font-weight:800;color:var(--tx3);
  box-shadow:var(--ss);white-space:nowrap;flex-shrink:0;
}
.sk-cpill strong{color:var(--p2)}

/* =============================================
   MAIN PANEL CARD
============================================= */
.sk-main-card{
  background:#fff;border-radius:var(--rx);
  border:1.5px solid var(--bd);box-shadow:var(--sm);
  overflow:hidden;
}

/* =============================================
   TABS
============================================= */
.sk-tabs-head{
  padding:clamp(14px,2.5vw,20px) clamp(16px,2.5vw,22px) 0;
  border-bottom:1.5px solid var(--bd);
  background:linear-gradient(180deg,#EFF6FF,#fff);
}
.sk-tabs-top{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.sk-tabs-ico{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,var(--p2),var(--i2));
  display:flex;align-items:center;justify-content:center;
  font-size:16px;box-shadow:0 4px 12px rgba(37,99,235,.25);
}
.sk-tabs-title{font-size:14px;font-weight:800;color:var(--tx)}
.sk-tabs-sub{font-size:11px;font-weight:500;color:var(--tx3);margin-top:2px}
.sk-tabs-row{
  display:flex;gap:4px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.sk-tabs-row::-webkit-scrollbar{display:none}
.sk-tab{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 15px;border-radius:10px 10px 0 0;
  border:1.5px solid transparent;border-bottom:none;
  cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;font-weight:800;color:var(--tx3);
  background:transparent;transition:all .2s;
  white-space:nowrap;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.sk-tab:hover{background:var(--pl);color:var(--p2)}
.sk-tab.on{
  background:#fff;color:var(--p2);
  border-color:var(--bd);border-bottom-color:#fff;
  margin-bottom:-1.5px;z-index:2;
}
.sk-tab-n{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--pl);color:var(--p2);
  border-radius:50px;padding:1px 7px;
  font-size:10px;font-weight:900;min-width:20px;
  transition:all .2s;
}
.sk-tab.on .sk-tab-n{
  background:linear-gradient(135deg,var(--p2),var(--i2));color:#fff;
}

/* =============================================
   KELAS PANEL
============================================= */
.sk-kpanel{display:none}
.sk-kpanel.on{display:block;animation:fuUp .3s ease-out}

/* Kelas info bar */
.sk-kbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding:clamp(13px,2vw,18px) clamp(14px,2.5vw,22px);
  background:linear-gradient(135deg,#EFF6FF,#F0F9FF);
  border-bottom:1.5px solid var(--pm);
}
.sk-kbar-l{display:flex;align-items:center;gap:12px}
.sk-kbar-orb{
  width:46px;height:46px;min-width:46px;border-radius:13px;
  background:linear-gradient(135deg,var(--p2),var(--i2));
  display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:0 4px 14px rgba(37,99,235,.28);
  flex-shrink:0;
}
.sk-kbar-name{font-size:clamp(15px,2vw,18px);font-weight:900;color:var(--tx)}
.sk-kbar-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.sk-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 9px;border-radius:50px;
  font-size:11px;font-weight:800;
}
.skc-t{background:var(--pl);color:var(--pd);border:1.5px solid var(--pm)}
.skc-l{background:var(--il);color:var(--i);border:1.5px solid var(--im)}
.skc-p{background:var(--rl);color:var(--r2);border:1.5px solid var(--rm)}
.sk-kbar-r{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sk-ka{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:10px;
  font-size:12px;font-weight:800;text-decoration:none;
  border:1.5px solid transparent;transition:all .22s;
  font-family:'Plus Jakarta Sans',sans-serif;cursor:pointer;
  -webkit-tap-highlight-color:transparent;white-space:nowrap;
}
.sk-ka:hover{transform:translateY(-2px)}
.sk-ka-exp{background:var(--gl);color:var(--g);border-color:var(--gm)}
.sk-ka-exp:hover{box-shadow:0 4px 12px rgba(21,128,61,.2)}
.sk-ka-add{
  background:linear-gradient(135deg,var(--p2),var(--i2));
  color:#fff;border:none;box-shadow:0 4px 12px rgba(37,99,235,.28);
}
.sk-ka-add:hover{box-shadow:0 8px 20px rgba(37,99,235,.4)}

/* =============================================
   DESKTOP TABLE
============================================= */
.sk-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sk-tbl-wrap::-webkit-scrollbar{height:4px}
.sk-tbl-wrap::-webkit-scrollbar-track{background:var(--bg)}
.sk-tbl-wrap::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:10px}
.sk-tbl{width:100%;border-collapse:collapse;min-width:880px}
.sk-tbl thead tr{background:var(--bg)}
.sk-tbl th{
  padding:10px 12px;text-align:left;
  font-size:10px;font-weight:800;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.09em;
  white-space:nowrap;border-bottom:2px solid var(--bd);
}
.sk-tbl tbody tr{border-bottom:1px solid var(--bd);transition:background .15s}
.sk-tbl tbody tr:hover{background:#F8FAFF}
.sk-tbl tbody tr:last-child{border-bottom:none}
.sk-tbl td{padding:11px 12px;font-size:12px;color:var(--tx);vertical-align:middle}
/* cell helpers */
.tc-no{font-family:'Fira Code',monospace;font-size:11px;color:var(--tx4);text-align:center;width:30px}
.tc-photo img{width:40px;height:50px;object-fit:cover;border-radius:8px;border:2px solid var(--bd);display:block}
.tc-noph{width:40px;height:50px;border-radius:8px;background:linear-gradient(135deg,var(--pl),var(--pm));border:2px solid var(--pm);display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.tc-nis{display:inline-flex;background:var(--pl);color:var(--pd);border:1.5px solid var(--pm);border-radius:6px;padding:2px 7px;font-family:'Fira Code',monospace;font-size:10px;font-weight:600}
.tc-nm{font-weight:800;font-size:13px;color:var(--tx)}
.tc-nm small{display:block;font-size:10px;color:var(--tx3);font-weight:500;margin-top:2px}
.tc-jk{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:50px;font-size:11px;font-weight:800}
.jkl{background:var(--il);color:var(--i);border:1px solid var(--im)}
.jkp{background:var(--rl);color:var(--r2);border:1px solid var(--rm)}
.tc-ln{font-size:12px;line-height:1.6;color:var(--tx2);margin-bottom:2px}
.tc-ln:last-child{margin-bottom:0}
.tc-ln strong{font-weight:700;color:var(--tx)}
.tc-act{display:flex;gap:4px}
.sk-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 9px;border-radius:7px;
  font-size:11px;font-weight:800;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:all .2s;
  font-family:'Plus Jakarta Sans',sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.sk-btn:hover{transform:translateY(-2px)}
.sk-btn-edt{background:var(--al);color:var(--a);border-color:var(--am)}
.sk-btn-edt:hover{background:#FEF3C7;box-shadow:0 3px 10px rgba(180,83,9,.18)}
.sk-btn-del{background:var(--rl);color:var(--r2);border-color:var(--rm)}
.sk-btn-del:hover{background:#FFE4E6;box-shadow:0 3px 10px rgba(190,18,60,.18)}
/* Hide cols on smaller desktop */
@media(max-width:1100px){.tc-hide-lg{display:none}}
@media(max-width:960px){.tc-hide-md{display:none}.sk-tbl{min-width:700px}}

/* =============================================
   MOBILE LIST (hidden on desktop)
============================================= */
.sk-mob-list{display:none;flex-direction:column;gap:10px;padding:14px}
.sk-mob-card{
  background:#fff;border:1.5px solid var(--bd);
  border-radius:var(--rl2);padding:14px;
  box-shadow:var(--ss);transition:all .2s;
}
.sk-mob-card:hover{box-shadow:var(--sm);transform:translateY(-1px)}
.sk-mob-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.sk-mob-photo img{width:52px;height:64px;object-fit:cover;border-radius:9px;border:2px solid var(--bd)}
.sk-mob-noph{width:52px;height:64px;border-radius:9px;background:linear-gradient(135deg,var(--pl),var(--pm));border:2px solid var(--pm);display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.sk-mob-info{flex:1;min-width:0}
.sk-mob-name{font-size:15px;font-weight:900;color:var(--tx);line-height:1.3;margin-bottom:4px}
.sk-mob-nis{margin-bottom:5px}
.sk-mob-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.sk-mob-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:7px 10px;padding:11px;
  background:var(--bg);border-radius:10px;
  margin-bottom:11px;
}
.sk-mob-fl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx4);margin-bottom:2px}
.sk-mob-fv{font-size:12px;font-weight:600;color:var(--tx2);line-height:1.4}
.sk-mob-acts{display:flex;gap:7px;padding-top:11px;border-top:1px solid var(--bd)}
.sk-mob-acts .sk-btn{flex:1;justify-content:center;padding:8px;font-size:12px}

/* =============================================
   CARD GRID VIEW
============================================= */
.sk-cg{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(185px,1fr));
  gap:13px;padding:16px;
}
.sk-gc{
  background:#fff;border:1.5px solid var(--bd);
  border-radius:var(--rl2);overflow:hidden;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
  animation:fuPop .3s ease-out;
}
.sk-gc:hover{transform:translateY(-4px);border-color:var(--p2);box-shadow:0 12px 28px rgba(37,99,235,.12)}
.sk-gc-top{
  height:84px;display:flex;align-items:center;justify-content:center;
  position:relative;
  background:linear-gradient(135deg,var(--pl),var(--pm));
}
.sk-gc-top.lk{background:linear-gradient(135deg,var(--il),var(--im))}
.sk-gc-top.pr{background:linear-gradient(135deg,var(--rl),var(--rm))}
.sk-gc-img{width:54px;height:66px;object-fit:cover;border-radius:9px;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.sk-gc-ph{width:54px;height:66px;border-radius:9px;border:3px solid #fff;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.sk-gc-rank{position:absolute;top:6px;left:8px;background:rgba(255,255,255,.85);border-radius:6px;padding:2px 6px;font-size:10px;font-weight:900;font-family:'Fira Code',monospace;color:var(--tx3)}
.sk-gc-body{padding:11px 12px}
.sk-gc-name{font-size:13px;font-weight:900;color:var(--tx);margin-bottom:3px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-gc-nis{font-size:10px;font-family:'Fira Code',monospace;color:var(--tx3);background:var(--pl);display:inline-block;padding:2px 6px;border-radius:5px;border:1px solid var(--pm)}
.sk-gc-rows{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.sk-gc-row{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--tx3);font-weight:600}
.sk-gc-jk{margin-top:5px}
.sk-gc-acts{display:flex;gap:5px;margin-top:8px;padding-top:8px;border-top:1.5px dashed var(--bd)}
.sk-gc-acts .sk-btn{flex:1;justify-content:center;font-size:11px;padding:7px}

/* =============================================
   EMPTY STATE
============================================= */
.sk-empty{text-align:center;padding:clamp(40px,8vw,72px) 20px}
.sk-empty-ico{font-size:3rem;display:block;margin-bottom:10px}
.sk-empty-t{font-size:15px;font-weight:800;color:var(--tx);margin-bottom:5px}
.sk-empty-s{font-size:13px;color:var(--tx3)}
.sk-nokelas{background:#fff;border-radius:var(--rx);border:1.5px solid var(--bd);text-align:center;padding:clamp(48px,10vw,88px) 20px;box-shadow:var(--sm)}

/* =============================================
   DELETE MODAL
============================================= */
.sk-modal{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:16px;
}
.sk-modal.on{display:flex}
.sk-modal-box{
  background:#fff;border-radius:var(--rx);
  padding:clamp(20px,4vw,30px);max-width:400px;width:100%;
  box-shadow:var(--sxl);animation:fuPop .3s cubic-bezier(.22,1,.36,1);
}
.sk-modal-ico{width:52px;height:52px;border-radius:14px;background:var(--rl);display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin-bottom:14px}
.sk-modal-t{font-size:17px;font-weight:800;color:var(--tx);margin-bottom:7px}
.sk-modal-d{font-size:13px;color:var(--tx3);line-height:1.7}
.sk-modal-ft{display:flex;gap:9px;margin-top:20px}
.sk-modal-ft .sk-btn{flex:1;justify-content:center;padding:11px;font-size:13px}
.sk-mb-cancel{background:var(--bg)!important;color:var(--tx2)!important;border-color:var(--bd)!important}
.sk-mb-cancel:hover{border-color:var(--bd2)!important}
.sk-mb-del{background:linear-gradient(135deg,var(--r3),#F43F5E)!important;color:#fff!important;border:none!important;box-shadow:0 5px 14px rgba(190,18,60,.3);}
.sk-mb-del:hover{box-shadow:0 8px 22px rgba(190,18,60,.42)!important}

/* =============================================
   RESPONSIVE BREAKPOINTS
============================================= */

/* Tablet landscape ≤1100px */
@media(max-width:1100px){
  .sk-stat{min-width:80px;padding:10px 14px}
}

/* Tablet portrait ≤900px */
@media(max-width:900px){
  .sk-hero{border-radius:var(--rl2)}
  .sk-hero-in{flex-direction:column;align-items:flex-start}
  .sk-hero-r{width:100%;flex-direction:row;justify-content:space-between;align-items:center}
  .sk-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;flex:none;gap:8px}
  .sk-stat{padding:10px;min-width:0}
  .sk-stat-n{font-size:1.5rem}
  .sk-kbar{flex-direction:column;align-items:flex-start}
  .sk-kbar-r{width:100%}
  .sk-cg{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
}

/* HP Landscape & Tablet kecil ≤768px */
@media(max-width:768px){
  .sk-hero{border-radius:var(--rl2);margin-bottom:14px}
  .sk-hero-tag{font-size:10px;padding:4px 12px}
  .sk-hero-h1{font-size:1.45rem}
  .sk-topbar{gap:8px}
  .sk-srch-wrap{order:1;flex:1 1 100%;max-width:100%}
  .sk-view-tog{order:2}
  .sk-cpill{order:3;flex:1 1 100%;text-align:center}
  /* Sembunyikan tabel, tampilkan mobile list */
  .sk-tbl-wrap{display:none!important}
  .sk-mob-list{display:flex!important}
  /* Sembunyikan card view di mobile (default ke mobile list) */
  .view-card{display:none!important}
  .sk-vtb[onclick*="card"]{display:none}
  .sk-cg{grid-template-columns:repeat(2,1fr);gap:8px;padding:10px}
  .sk-ka{font-size:11px;padding:7px 11px}
  .sk-kbar-orb{width:40px;height:40px;font-size:17px}
}

/* HP portrait ≤480px */
@media(max-width:480px){
  #skw{--rxx:16px;--rx:14px;--rl2:12px}
  .sk-hero{padding:18px 16px;border-radius:16px}
  .sk-hero-tag{display:none}
  .sk-hero-h1{font-size:1.3rem}
  .sk-hero-sub{font-size:.78rem}
  .sk-stats{grid-template-columns:1fr 1fr}
  .sk-hero-r{flex-direction:column;align-items:flex-start;gap:8px}
  .sk-kbar-r{flex-direction:column}
  .sk-ka{width:100%;justify-content:center}
  .sk-mob-grid{grid-template-columns:1fr}
  .sk-cg{grid-template-columns:repeat(2,1fr);gap:7px;padding:8px}
  .sk-gc-body{padding:9px 10px}
  .sk-gc-name{font-size:12px}
  .sk-gc-top{height:74px}
  .sk-gc-img,.sk-gc-ph{width:48px;height:60px}
  .sk-tabs-sub{display:none}
  .sk-tab{font-size:11px;padding:7px 11px}
  .sk-modal-ft{flex-direction:column}
}

/* Sangat kecil ≤360px */
@media(max-width:360px){
  .sk-hero-h1{font-size:1.2rem}
  .sk-stats{grid-template-columns:repeat(3,1fr)}
  .sk-hero-r{flex-direction:column;align-items:flex-start}
}
</style>

<!-- ═══════ HERO ═══════ -->
<div class="sk-hero a0">
  <div class="sk-hero-in">
    <div class="sk-hero-l">
      <div class="sk-hero-tag">🏫 Manajemen Kelas</div>
      <h1 class="sk-hero-h1">Rekap Siswa <em>Per Kelas</em></h1>
      <p class="sk-hero-sub">MA As-Syafi'iyah 02 &mdash; Kelola &amp; pantau data siswa per kelas</p>
    </div>
    <div class="sk-hero-r">
      <div class="sk-stats">
        <div class="sk-stat">
          <div class="sk-stat-n"><?= $total_siswa ?></div>
          <div class="sk-stat-l">Total</div>
        </div>
        <div class="sk-stat">
          <div class="sk-stat-n"><?= count($daftar_kelas) ?></div>
          <div class="sk-stat-l">Kelas</div>
        </div>
        <div class="sk-stat">
          <div class="sk-stat-n" style="font-size:clamp(.95rem,2.2vw,1.4rem)">♂<?= $total_lk ?>/♀<?= $total_pr ?></div>
          <div class="sk-stat-l">L / P</div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php if(empty($daftar_kelas)): ?>
<!-- ═══════ EMPTY ═══════ -->
<div class="sk-nokelas a1">
  <div style="font-size:3.5rem;margin-bottom:12px">📚</div>
  <div style="font-size:17px;font-weight:900;margin-bottom:7px;color:var(--tx)">Belum ada data kelas</div>
  <div style="color:var(--tx3);font-size:13px;max-width:280px;margin:0 auto">Tambahkan siswa terlebih dahulu di halaman Data Siswa.</div>
  <a href="siswa.php" style="display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding:12px 22px;background:linear-gradient(135deg,var(--p2),var(--i2));color:#fff;border-radius:12px;font-weight:800;text-decoration:none;font-size:14px;box-shadow:0 5px 16px rgba(37,99,235,.3)">➕ Tambah Siswa</a>
</div>

<?php else: ?>

<!-- ═══════ TOPBAR ═══════ -->
<div class="sk-topbar a1">
  <a href="siswa.php" class="sk-back-btn">← Semua Siswa</a>
  <div class="sk-srch-wrap">
    <input type="text" class="sk-srch" id="srchi"
           placeholder="Cari nama, NIS, kelas…" oninput="doSearch()">
  </div>
  <div class="sk-view-tog">
    <button class="sk-vtb on" id="vbtn-table" onclick="setView('table')">☰ Tabel</button>
    <button class="sk-vtb" id="vbtn-card" onclick="setView('card')">⊞ Kartu</button>
  </div>
  <div class="sk-cpill">Tampil: <strong id="visCount"><?= $total_siswa ?></strong> siswa</div>
</div>

<!-- ═══════ TABS + PANELS ═══════ -->
<div class="sk-main-card a2">

  <!-- Tabs header -->
  <div class="sk-tabs-head">
    <div class="sk-tabs-top">
      <div class="sk-tabs-ico">🏫</div>
      <div>
        <div class="sk-tabs-title">Pilih Kelas</div>
        <div class="sk-tabs-sub"><?= count($daftar_kelas) ?> kelas — ketuk tab untuk berpindah</div>
      </div>
    </div>
    <div class="sk-tabs-row" id="tabsRow">
      <?php foreach($daftar_kelas as $kls):
        $tot = $total_per_kelas[$kls] ?? 0;
        $isA = ($kls === $kelas_aktif);
      ?>
      <button class="sk-tab <?= $isA?'on':'' ?>"
              onclick="switchTab('<?= htmlspecialchars($kls,ENT_QUOTES) ?>')"
              id="tab-<?= md5($kls) ?>">
        🏫 <?= htmlspecialchars($kls) ?>
        <span class="sk-tab-n"><?= $tot ?></span>
      </button>
      <?php endforeach; ?>
    </div>
  </div>

  <!-- Panels per kelas -->
  <?php foreach($daftar_kelas as $kls):
    $sl  = $siswa_per_kelas[$kls] ?? [];
    $tot = count($sl);
    $lk  = count(array_filter($sl,fn($s)=>$s['jk']==='Laki-laki'));
    $pr  = $tot - $lk;
    $isA = ($kls === $kelas_aktif);
  ?>
  <div class="sk-kpanel <?= $isA?'on':'' ?>" id="panel-<?= md5($kls) ?>">

    <!-- Kelas bar -->
    <div class="sk-kbar">
      <div class="sk-kbar-l">
        <div class="sk-kbar-orb">🏫</div>
        <div>
          <div class="sk-kbar-name">Kelas <?= htmlspecialchars($kls) ?></div>
          <div class="sk-kbar-chips">
            <span class="sk-chip skc-t">👥 <?= $tot ?></span>
            <span class="sk-chip skc-l">♂ <?= $lk ?></span>
            <span class="sk-chip skc-p">♀ <?= $pr ?></span>
          </div>
        </div>
      </div>
      <div class="sk-kbar-r">
        <a href="siswa.php?export=excel&kelas=<?= urlencode($kls) ?>" class="sk-ka sk-ka-exp">📊 Ekspor</a>
        <a href="siswa.php" class="sk-ka sk-ka-add">➕ Tambah Siswa</a>
      </div>
    </div>

    <!-- ═══ TABLE VIEW (desktop) ═══ -->
    <div class="view-table" id="vtable-<?= md5($kls) ?>">
    <?php if(empty($sl)): ?>
      <div class="sk-empty"><span class="sk-empty-ico">📭</span><div class="sk-empty-t">Tidak ada siswa di kelas ini</div><div class="sk-empty-s">Tambahkan siswa via halaman Data Siswa</div></div>
    <?php else: ?>
    <div class="sk-tbl-wrap">
    <table class="sk-tbl">
      <thead><tr>
        <th>No</th><th>Foto</th><th>NIS</th><th>Nama Siswa</th>
        <th>JK</th><th>TTL</th><th>Agama</th>
        <th class="tc-hide-md">Alamat</th>
        <th>Kontak</th>
        <th class="tc-hide-md">Orang Tua</th>
        <th class="tc-hide-lg">Fisik</th>
        <th class="tc-hide-lg">Kesehatan</th>
        <th class="tc-hide-lg">Prestasi</th>
        <th>Aksi</th>
      </tr></thead>
      <tbody>
      <?php $no=1; foreach($sl as $d): ?>
      <tr class="srow"
          data-name="<?= htmlspecialchars(strtolower($d['nama'])) ?>"
          data-nis="<?= htmlspecialchars(strtolower($d['nis'])) ?>"
          data-kelas="<?= htmlspecialchars(strtolower($d['kelas'])) ?>">
        <td class="tc-no"><?= $no++ ?></td>
        <td class="tc-photo">
          <?php if(!empty($d['foto'])&&file_exists($d['foto'])): ?>
            <img src="<?= htmlspecialchars($d['foto']) ?>" alt="">
          <?php else: ?><div class="tc-noph">👤</div><?php endif; ?>
        </td>
        <td><span class="tc-nis"><?= htmlspecialchars($d['nis']) ?></span></td>
        <td class="tc-nm"><?= htmlspecialchars($d['nama']) ?>
          <?php if(!empty($d['nisn'])): ?><small>NISN: <?= htmlspecialchars($d['nisn']) ?></small><?php endif; ?>
        </td>
        <td><span class="tc-jk <?= $d['jk']==='Laki-laki'?'jkl':'jkp' ?>"><?= $d['jk']==='Laki-laki'?'♂':'♀' ?> <?= htmlspecialchars($d['jk']) ?></span></td>
        <td>
          <div class="tc-ln" style="font-weight:700"><?= htmlspecialchars($d['tempat_lahir']) ?></div>
          <div class="tc-ln" style="font-family:'Fira Code',monospace;font-size:10px;color:var(--tx3)"><?= date('d/m/Y',strtotime($d['tanggal_lahir'])) ?></div>
        </td>
        <td style="font-size:12px"><?= htmlspecialchars($d['agama']) ?></td>
        <td class="tc-hide-md">
          <div class="tc-ln"><strong><?= htmlspecialchars(mb_substr($d['alamat'],0,35)).(mb_strlen($d['alamat'])>35?'…':'') ?></strong></div>
          <div class="tc-ln" style="color:var(--tx3)">RT<?= $d['rt'] ?>/RW<?= $d['rw'] ?>, <?= htmlspecialchars($d['kelurahan']) ?></div>
          <div class="tc-ln" style="color:var(--tx3)"><?= htmlspecialchars($d['kota']) ?></div>
        </td>
        <td>
          <?php if(!empty($d['no_telp'])): ?><div class="tc-ln">📱 <?= htmlspecialchars($d['no_telp']) ?></div><?php endif; ?>
          <?php if(!empty($d['email'])): ?><div class="tc-ln" style="font-size:11px">✉️ <?= htmlspecialchars($d['email']) ?></div><?php endif; ?>
        </td>
        <td class="tc-hide-md">
          <div class="tc-ln"><strong>Ayah:</strong> <?= htmlspecialchars($d['nama_ayah']) ?></div>
          <div class="tc-ln" style="color:var(--tx3);font-size:11px"><?= $d['pekerjaan_ayah'] ?></div>
          <div class="tc-ln" style="margin-top:2px"><strong>Ibu:</strong> <?= htmlspecialchars($d['nama_ibu']) ?></div>
          <div class="tc-ln" style="color:var(--tx3);font-size:11px"><?= $d['pekerjaan_ibu'] ?></div>
          <?php if(!empty($d['no_telp_ortu'])): ?><div class="tc-ln">📞 <?= htmlspecialchars($d['no_telp_ortu']) ?></div><?php endif; ?>
        </td>
        <td class="tc-hide-lg">
          <?php if(!empty($d['tinggi_badan'])): ?><div class="tc-ln">📏 <?= $d['tinggi_badan'] ?>cm/<?= $d['berat_badan'] ?>kg</div><?php endif; ?>
          <?php if(!empty($d['golongan_darah'])): ?><div class="tc-ln">🩸 <?= $d['golongan_darah'] ?></div><?php endif; ?>
          <?php if(empty($d['tinggi_badan'])&&empty($d['golongan_darah'])): ?><span style="color:var(--tx4);font-size:11px">—</span><?php endif; ?>
        </td>
        <td class="tc-hide-lg">
          <?php if(!empty($d['riwayat_penyakit'])): ?><div class="tc-ln" style="color:var(--r2);font-size:11px">🏥 <?= htmlspecialchars(mb_substr($d['riwayat_penyakit'],0,40)) ?></div><?php endif; ?>
          <?php if(!empty($d['alergi'])): ?><div class="tc-ln" style="color:var(--a);font-size:11px">⚠️ <?= htmlspecialchars($d['alergi']) ?></div><?php endif; ?>
          <?php if(empty($d['riwayat_penyakit'])&&empty($d['alergi'])): ?><span style="color:var(--g2);font-size:11px">✅ Sehat</span><?php endif; ?>
        </td>
        <td class="tc-hide-lg">
          <?php if(!empty($d['prestasi'])): ?><div class="tc-ln" style="font-size:11px">🏆 <?= htmlspecialchars(mb_substr($d['prestasi'],0,40)) ?></div>
          <?php else: ?><span style="color:var(--tx4);font-size:11px">—</span><?php endif; ?>
        </td>
        <td>
          <div class="tc-act">
            <a href="siswa.php?edit=<?= $d['id'] ?>" class="sk-btn sk-btn-edt">✏️</a>
            <button class="sk-btn sk-btn-del"
                    onclick="konfirmHapus(<?= $d['id'] ?>,'<?= htmlspecialchars($d['nama'],ENT_QUOTES) ?>')">🗑️</button>
          </div>
        </td>
      </tr>
      <?php endforeach; ?>
      </tbody>
    </table>
    </div>
    <?php endif; ?>
    </div><!-- /view-table -->

    <!-- ═══ MOBILE LIST (HP only) ═══ -->
    <div class="sk-mob-list" id="vmob-<?= md5($kls) ?>">
    <?php if(empty($sl)): ?>
      <div class="sk-empty"><span class="sk-empty-ico">📭</span><div class="sk-empty-t">Tidak ada siswa</div></div>
    <?php else: foreach($sl as $d): ?>
    <div class="sk-mob-card scard"
         data-name="<?= htmlspecialchars(strtolower($d['nama'])) ?>"
         data-nis="<?= htmlspecialchars(strtolower($d['nis'])) ?>"
         data-kelas="<?= htmlspecialchars(strtolower($d['kelas'])) ?>">
      <div class="sk-mob-top">
        <div class="sk-mob-photo">
          <?php if(!empty($d['foto'])&&file_exists($d['foto'])): ?><img src="<?= htmlspecialchars($d['foto']) ?>" alt=""><?php else: ?><div class="sk-mob-noph">👤</div><?php endif; ?>
        </div>
        <div class="sk-mob-info">
          <div class="sk-mob-name"><?= htmlspecialchars($d['nama']) ?></div>
          <div class="sk-mob-nis"><span class="tc-nis"><?= htmlspecialchars($d['nis']) ?></span></div>
          <div class="sk-mob-tags">
            <span class="tc-jk <?= $d['jk']==='Laki-laki'?'jkl':'jkp' ?>"><?= $d['jk']==='Laki-laki'?'♂':'♀' ?> <?= htmlspecialchars($d['jk']) ?></span>
            <?php if(!empty($d['riwayat_penyakit'])): ?><span class="sk-chip skc-p" style="font-size:10px">🏥</span><?php endif; ?>
            <?php if(!empty($d['prestasi'])): ?><span class="sk-chip skc-t" style="font-size:10px">🏆</span><?php endif; ?>
          </div>
        </div>
      </div>
      <div class="sk-mob-grid">
        <div><div class="sk-mob-fl">TTL</div><div class="sk-mob-fv"><?= htmlspecialchars($d['tempat_lahir']) ?>, <?= date('d/m/Y',strtotime($d['tanggal_lahir'])) ?></div></div>
        <div><div class="sk-mob-fl">Agama</div><div class="sk-mob-fv"><?= htmlspecialchars($d['agama']) ?></div></div>
        <div><div class="sk-mob-fl">HP Siswa</div><div class="sk-mob-fv"><?= !empty($d['no_telp'])?htmlspecialchars($d['no_telp']):'—' ?></div></div>
        <div><div class="sk-mob-fl">HP Ortu</div><div class="sk-mob-fv"><?= !empty($d['no_telp_ortu'])?htmlspecialchars($d['no_telp_ortu']):'—' ?></div></div>
        <div><div class="sk-mob-fl">Ayah</div><div class="sk-mob-fv"><?= htmlspecialchars($d['nama_ayah']) ?></div></div>
        <div><div class="sk-mob-fl">Ibu</div><div class="sk-mob-fv"><?= htmlspecialchars($d['nama_ibu']) ?></div></div>
        <div style="grid-column:1/-1"><div class="sk-mob-fl">Alamat</div><div class="sk-mob-fv"><?= htmlspecialchars(mb_substr($d['alamat'],0,55)).(mb_strlen($d['alamat'])>55?'…':'') ?>, <?= htmlspecialchars($d['kota']) ?></div></div>
      </div>
      <div class="sk-mob-acts">
        <a href="siswa.php?edit=<?= $d['id'] ?>" class="sk-btn sk-btn-edt">✏️ Edit</a>
        <button class="sk-btn sk-btn-del"
                onclick="konfirmHapus(<?= $d['id'] ?>,'<?= htmlspecialchars($d['nama'],ENT_QUOTES) ?>')">🗑️ Hapus</button>
      </div>
    </div>
    <?php endforeach; endif; ?>
    </div><!-- /sk-mob-list -->

    <!-- ═══ CARD GRID VIEW ═══ -->
    <div class="view-card" id="vcard-<?= md5($kls) ?>" style="display:none">
    <?php if(empty($sl)): ?>
      <div class="sk-empty"><span class="sk-empty-ico">📭</span><div class="sk-empty-t">Tidak ada siswa</div></div>
    <?php else: ?>
    <div class="sk-cg">
    <?php $cn=1; foreach($sl as $d): ?>
    <div class="sk-gc scard"
         data-name="<?= htmlspecialchars(strtolower($d['nama'])) ?>"
         data-nis="<?= htmlspecialchars(strtolower($d['nis'])) ?>"
         data-kelas="<?= htmlspecialchars(strtolower($d['kelas'])) ?>">
      <div class="sk-gc-top <?= $d['jk']==='Laki-laki'?'lk':'pr' ?>">
        <span class="sk-gc-rank">#<?= $cn++ ?></span>
        <?php if(!empty($d['foto'])&&file_exists($d['foto'])): ?><img class="sk-gc-img" src="<?= htmlspecialchars($d['foto']) ?>" alt=""><?php else: ?><div class="sk-gc-ph">👤</div><?php endif; ?>
      </div>
      <div class="sk-gc-body">
        <div class="sk-gc-name"><?= htmlspecialchars($d['nama']) ?></div>
        <div><span class="sk-gc-nis"><?= htmlspecialchars($d['nis']) ?></span></div>
        <div class="sk-gc-rows">
          <div class="sk-gc-row">📅 <?= date('d/m/Y',strtotime($d['tanggal_lahir'])) ?></div>
          <div class="sk-gc-row">🕌 <?= htmlspecialchars($d['agama']) ?></div>
          <?php if(!empty($d['no_telp'])): ?><div class="sk-gc-row">📱 <?= htmlspecialchars($d['no_telp']) ?></div><?php endif; ?>
        </div>
        <div class="sk-gc-jk"><span class="tc-jk <?= $d['jk']==='Laki-laki'?'jkl':'jkp' ?>"><?= $d['jk']==='Laki-laki'?'♂ Laki-laki':'♀ Perempuan' ?></span></div>
        <div class="sk-gc-acts">
          <a href="siswa.php?edit=<?= $d['id'] ?>" class="sk-btn sk-btn-edt">✏️ Edit</a>
          <button class="sk-btn sk-btn-del"
                  onclick="konfirmHapus(<?= $d['id'] ?>,'<?= htmlspecialchars($d['nama'],ENT_QUOTES) ?>')">🗑️</button>
        </div>
      </div>
    </div>
    <?php endforeach; ?>
    </div>
    <?php endif; ?>
    </div><!-- /view-card -->

  </div><!-- /sk-kpanel -->
  <?php endforeach; ?>
</div><!-- /sk-main-card -->

<?php endif; ?>
</div><!-- /.wrap -->
</div><!-- /.main -->

<!-- DELETE MODAL -->
<div class="sk-modal" id="delModal" onclick="if(event.target===this)this.classList.remove('on')">
  <div class="sk-modal-box">
    <div class="sk-modal-ico">⚠️</div>
    <div class="sk-modal-t">Konfirmasi Hapus</div>
    <div class="sk-modal-d" id="delMsg"></div>
    <div class="sk-modal-ft">
      <button class="sk-btn sk-mb-cancel"
              onclick="document.getElementById('delModal').classList.remove('on')">✕ Batal</button>
      <button class="sk-btn sk-mb-del" id="delConfirm">🗑️ Ya, Hapus</button>
    </div>
  </div>
</div>

<script>
/* ─── kelasMap (PHP → md5 key mapping) ─── */
const kelasMap = {
<?php foreach($daftar_kelas as $kls): ?>
  <?= json_encode($kls) ?>: <?= json_encode(md5($kls)) ?>,
<?php endforeach; ?>
};
let currentKelas = <?= json_encode($kelas_aktif) ?>;

/* ─── Tab switch ─── */
function switchTab(kls){
  document.querySelectorAll('.sk-tab').forEach(b=>b.classList.remove('on'));
  document.querySelectorAll('.sk-kpanel').forEach(p=>p.classList.remove('on'));
  const key = kelasMap[kls]||'';
  const btn = document.getElementById('tab-'+key);
  const pan = document.getElementById('panel-'+key);
  if(btn) btn.classList.add('on');
  if(pan) pan.classList.add('on');
  currentKelas = kls;
  history.replaceState(null,'','?kelas='+encodeURIComponent(kls));
  if(btn) btn.scrollIntoView({behavior:'smooth',block:'nearest',inline:'center'});
  updateVisCount();
}

/* ─── View toggle (table/card) ─── */
let currentView = 'table';
function setView(v){
  currentView = v;
  document.getElementById('vbtn-table').classList.toggle('on', v==='table');
  document.getElementById('vbtn-card').classList.toggle('on',  v==='card');
  document.querySelectorAll('.sk-kpanel').forEach(pan=>{
    const id = pan.id.replace('panel-','');
    const tbl = document.getElementById('vtable-'+id);
    const crd = document.getElementById('vcard-'+id);
    const mob = document.getElementById('vmob-'+id);
    /* On desktop: toggle between table and card grid */
    const isMob = window.innerWidth <= 768;
    if(!isMob){
      if(tbl) tbl.style.display = v==='table'?'block':'none';
      if(crd) crd.style.display = v==='card'?'block':'none';
    }
  });
  updateVisCount();
}

/* ─── Search ─── */
function doSearch(){
  const q = document.getElementById('srchi').value.toLowerCase().trim();
  let vis = 0;
  document.querySelectorAll('.srow,.scard,.sk-mob-card').forEach(el=>{
    const nm  = el.dataset.name  || '';
    const nis = el.dataset.nis   || '';
    const kls = el.dataset.kelas || '';
    const show = !q || nm.includes(q) || nis.includes(q) || kls.includes(q);
    el.style.display = show ? '' : 'none';
    if(show) vis++;
  });
  document.getElementById('visCount').textContent = q ? vis : <?= $total_siswa ?>;
}

function updateVisCount(){
  const active = document.querySelector('.sk-kpanel.on');
  if(!active){ document.getElementById('visCount').textContent = <?= $total_siswa ?>; return; }
  const tot = active.querySelectorAll('.srow,.scard,.sk-mob-card').length;
  document.getElementById('visCount').textContent = tot;
}

/* ─── Delete modal ─── */
let delId = null;
function konfirmHapus(id,nama){
  delId = id;
  document.getElementById('delMsg').textContent = 'Hapus data siswa "'+nama+'"? Tindakan ini tidak dapat dibatalkan.';
  document.getElementById('delModal').classList.add('on');
}
document.getElementById('delConfirm').addEventListener('click',()=>{
  if(delId) location.href='siswa.php?hapus='+delId;
});
document.addEventListener('keydown',e=>{
  if(e.key==='Escape') document.getElementById('delModal').classList.remove('on');
});
</script>