<?php
/* ══════════════════════════════════════════════════════
   spp.php — Sistem Pembayaran SPP
   MA As-Syafi'iyah 02 Bekasi
   FIX: session_start + ob_start + error handling yang benar
══════════════════════════════════════════════════════ */

// ── 1. Session harus dimulai PERTAMA sebelum apapun ──
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// ── 2. Output buffer: cegah "headers already sent" ──
ob_start();

$page_title  = "Pembayaran SPP — MA As-Syafi'iyah 02";
$active_menu = 'spp';
$loader_text = 'Memuat Data SPP';

include 'navbar.php';
include 'koneksi.php';

// ── 3. dbError: bersihkan buffer lalu die ──
function dbError($conn, $label, $extra = '') {
    $err = mysqli_error($conn);
    ob_end_clean();
    die("<!DOCTYPE html><html><head><meta charset='UTF-8'>
         <title>Database Error</title></head>
         <body style='font-family:Georgia,serif;padding:3rem;background:#0B1628;
         min-height:100vh;color:#D4AF6A'>
         <h2 style='font-size:1.5rem;margin-bottom:1rem'>⊹ Database Error — {$label}</h2>
         <pre style='background:#12203A;padding:1rem;border:1px solid rgba(212,175,106,.3);
         color:#A0B8D8;font-size:.82rem;border-radius:4px'>"
         . htmlspecialchars($err ?: $extra) .
         "</pre>
         <a href='spp.php' style='color:#D4AF6A;margin-top:1rem;display:inline-block'>← Kembali</a>
         </body></html>");
}

// ── 4. Redirect helper: flush buffer lalu redirect ──
function spRedirect($url) {
    ob_end_clean();
    header("Location: " . $url);
    exit();
}

// ══ HAPUS ══
if (isset($_GET['delete'])) {
    $id = (int)$_GET['delete'];

    $stmt = mysqli_prepare($conn, "SELECT bukti_bayar FROM spp WHERE id=?");
    if (!$stmt) dbError($conn, "PREPARE DELETE-SELECT");
    mysqli_stmt_bind_param($stmt, "i", $id);
    mysqli_stmt_execute($stmt);
    $row = mysqli_fetch_assoc(mysqli_stmt_get_result($stmt));
    mysqli_stmt_close($stmt);

    if (!empty($row['bukti_bayar'])) {
        $p = 'uploads/bukti_bayar/' . $row['bukti_bayar'];
        if (file_exists($p)) unlink($p);
    }

    $stmt = mysqli_prepare($conn, "DELETE FROM spp WHERE id=?");
    if (!$stmt) dbError($conn, "PREPARE DELETE");
    mysqli_stmt_bind_param($stmt, "i", $id);
    if (!mysqli_stmt_execute($stmt)) dbError($conn, "DELETE", mysqli_stmt_error($stmt));
    mysqli_stmt_close($stmt);

    spRedirect("spp.php?deleted=1");
}

// ══ UPLOAD BUKTI ══
function uploadBukti($fn) {
    if (!isset($_FILES[$fn]) || $_FILES[$fn]['error'] !== UPLOAD_ERR_OK) return null;

    $al = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'application/pdf'];
    $f  = $_FILES[$fn];

    if (!in_array($f['type'], $al)) {
        $_SESSION['upload_error'] = "Tipe file tidak didukung. Gunakan JPG, PNG, GIF, atau PDF.";
        return null;
    }
    if ($f['size'] > 5 * 1024 * 1024) {
        $_SESSION['upload_error'] = "Ukuran file melebihi batas 5MB.";
        return null;
    }
    if (!is_dir('uploads/bukti_bayar')) {
        mkdir('uploads/bukti_bayar', 0777, true);
    }

    $ext  = strtolower(pathinfo($f['name'], PATHINFO_EXTENSION));
    $name = 'bukti_' . uniqid() . '_' . time() . '.' . $ext;

    if (!move_uploaded_file($f['tmp_name'], 'uploads/bukti_bayar/' . $name)) {
        $_SESSION['upload_error'] = "Gagal menyimpan file ke server.";
        return null;
    }
    return $name;
}

// ══ UPDATE ══
if (isset($_POST['update'])) {
    $id      = (int)$_POST['id'];
    $siswa   = (int)$_POST['siswa'];
    $bulan   = trim($_POST['bulan']);
    $tahun   = (int)$_POST['tahun'];
    $nominal = (int)$_POST['nominal'];
    $metode  = trim($_POST['metode_bayar']);
    $status  = trim($_POST['status']);
    $tgl     = trim($_POST['tanggal_bayar']);
    $catatan = trim($_POST['catatan']);
    $petugas = isset($_SESSION['nama']) ? $_SESSION['nama'] : 'Admin';

    $bn = uploadBukti('bukti_bayar');

    if ($bn !== null) {
        // Ada file baru → hapus file lama dulu
        $qOld = mysqli_prepare($conn, "SELECT bukti_bayar FROM spp WHERE id=?");
        mysqli_stmt_bind_param($qOld, "i", $id);
        mysqli_stmt_execute($qOld);
        $old = mysqli_fetch_assoc(mysqli_stmt_get_result($qOld));
        mysqli_stmt_close($qOld);

        if (!empty($old['bukti_bayar'])) {
            $op = 'uploads/bukti_bayar/' . $old['bukti_bayar'];
            if (file_exists($op)) unlink($op);
        }

        $stmt = mysqli_prepare($conn,
            "UPDATE spp SET siswa_id=?,bulan=?,tahun=?,nominal=?,status=?,
             metode_bayar=?,petugas=?,tanggal_bayar=?,catatan=?,bukti_bayar=?
             WHERE id=?");
        if (!$stmt) dbError($conn, "PREPARE UPDATE+BUKTI");
        mysqli_stmt_bind_param($stmt, "isiissssssi",
            $siswa, $bulan, $tahun, $nominal, $status,
            $metode, $petugas, $tgl, $catatan, $bn, $id);
    } else {
        $stmt = mysqli_prepare($conn,
            "UPDATE spp SET siswa_id=?,bulan=?,tahun=?,nominal=?,status=?,
             metode_bayar=?,petugas=?,tanggal_bayar=?,catatan=?
             WHERE id=?");
        if (!$stmt) dbError($conn, "PREPARE UPDATE");
        mysqli_stmt_bind_param($stmt, "isiisssssi",
            $siswa, $bulan, $tahun, $nominal, $status,
            $metode, $petugas, $tgl, $catatan, $id);
    }

    if (!mysqli_stmt_execute($stmt)) {
        $errMsg = mysqli_stmt_error($stmt);
        mysqli_stmt_close($stmt);
        dbError($conn, "UPDATE", $errMsg);
    }
    mysqli_stmt_close($stmt);
    spRedirect("spp.php?updated=1");
}

// ══ INSERT / BAYAR ══
if (isset($_POST['bayar'])) {
    $siswa   = (int)$_POST['siswa'];
    $bulan   = trim($_POST['bulan']);
    $tahun   = (int)$_POST['tahun'];
    $nominal = (int)$_POST['nominal'];
    $metode  = trim($_POST['metode_bayar']);
    $status  = trim($_POST['status']);
    $tgl     = trim($_POST['tanggal_bayar']);
    $catatan = trim($_POST['catatan']);
    $petugas = isset($_SESSION['nama']) ? $_SESSION['nama'] : 'Admin';

    // Validasi
    $errs = [];
    if ($siswa  <= 0) $errs[] = "Siswa wajib dipilih.";
    if (!$bulan)      $errs[] = "Bulan wajib dipilih.";
    if ($tahun  <= 0) $errs[] = "Tahun tidak valid.";
    if ($nominal<= 0) $errs[] = "Nominal harus lebih dari 0.";
    if (!$metode)     $errs[] = "Metode bayar wajib dipilih.";
    if (!$status)     $errs[] = "Status wajib dipilih.";
    if (!$tgl)        $errs[] = "Tanggal bayar wajib diisi.";

    if (!empty($errs)) {
        $_SESSION['form_error'] = implode("<br>", $errs);
        spRedirect("spp.php");
    }

    // Cek siswa valid
    $chkStmt = mysqli_prepare($conn, "SELECT id FROM siswa WHERE id=?");
    if (!$chkStmt) dbError($conn, "PREPARE CHECK SISWA");
    mysqli_stmt_bind_param($chkStmt, "i", $siswa);
    mysqli_stmt_execute($chkStmt);
    mysqli_stmt_store_result($chkStmt);
    $rowCount = mysqli_stmt_num_rows($chkStmt);
    mysqli_stmt_close($chkStmt);

    if ($rowCount === 0) {
        $_SESSION['form_error'] = "Siswa tidak ditemukan di database.";
        spRedirect("spp.php");
    }

    // Upload bukti (opsional)
    $bukti = uploadBukti('bukti_bayar') ?? '';

    // Insert
    $stmt = mysqli_prepare($conn,
        "INSERT INTO spp
         (siswa_id, bulan, tahun, nominal, status, metode_bayar, petugas, catatan, tanggal_bayar, bukti_bayar)
         VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");

    if (!$stmt) dbError($conn, "PREPARE INSERT");

    mysqli_stmt_bind_param($stmt, "isiissssss",
        $siswa, $bulan, $tahun, $nominal,
        $status, $metode, $petugas, $catatan, $tgl, $bukti);

    if (!mysqli_stmt_execute($stmt)) {
        $errMsg = mysqli_stmt_error($stmt);
        mysqli_stmt_close($stmt);
        dbError($conn, "INSERT", $errMsg);
    }
    mysqli_stmt_close($stmt);
    spRedirect("spp.php?success=1");
}

// ══ EDIT DATA ══
$edit_data = null;
if (isset($_GET['edit'])) {
    $eid  = (int)$_GET['edit'];
    $stmt = mysqli_prepare($conn, "SELECT * FROM spp WHERE id=?");
    if (!$stmt) dbError($conn, "PREPARE EDIT");
    mysqli_stmt_bind_param($stmt, "i", $eid);
    mysqli_stmt_execute($stmt);
    $edit_data = mysqli_fetch_assoc(mysqli_stmt_get_result($stmt));
    mysqli_stmt_close($stmt);
}

// ══ DATA LIST ══
$siswa_list = mysqli_query($conn, "SELECT * FROM siswa ORDER BY nama");
$data       = mysqli_query($conn,
    "SELECT spp.*, siswa.nama
     FROM spp
     JOIN siswa ON spp.siswa_id = siswa.id
     ORDER BY spp.id DESC");

if (!$data) dbError($conn, "SELECT LIST");

$total_bayar = 0;
$bayar_bulan = 0;
$jml         = mysqli_num_rows($data);

while ($d = mysqli_fetch_assoc($data)) {
    $total_bayar += $d['nominal'];
    if (date('Y-m', strtotime($d['tanggal_bayar'])) == date('Y-m')) {
        $bayar_bulan += $d['nominal'];
    }
}
mysqli_data_seek($data, 0);

$current_year = date('Y');
$bulan_list   = ['Januari','Februari','Maret','April','Mei','Juni',
                 'Juli','Agustus','September','Oktober','November','Desember'];

$form_error   = isset($_SESSION['form_error'])   ? $_SESSION['form_error']   : null;
$upload_error = isset($_SESSION['upload_error']) ? $_SESSION['upload_error'] : null;
unset($_SESSION['form_error'], $_SESSION['upload_error']);
?>

<!-- Fonts tambahan (Art Deco theme) -->
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Cinzel:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
/* ════════════════════════════════════════════════════════
   TOKEN LOKAL — prefix sp- agar tidak konflik navbar
   Theme: Royal Navy × Champagne Gold (Art Deco Modern)
════════════════════════════════════════════════════════ */
:root {
    --sp-n0:#060E1C; --sp-n1:#0B1628; --sp-n2:#12203A;
    --sp-n3:#1A2E50; --sp-n4:#243D68; --sp-n5:#2E4D82;
    --sp-g0:#8A6820; --sp-g1:#B89040; --sp-g2:#D4AF6A;
    --sp-g3:#E8CE96; --sp-g4:#F5E8C4;
    --sp-bg:#0E1B30; --sp-s1:#111F36; --sp-s2:#162540;
    --sp-s3:#1C2D4E; --sp-s4:#22355A;
    --sp-tx:#E8DFC8; --sp-txm:#A0B0C8; --sp-txl:#5A6E88;
    --sp-bd:rgba(212,175,106,.2); --sp-bdh:rgba(212,175,106,.45);
    --sp-em:#1A6B4A; --sp-em2:#25956A; --sp-em3:#C8EDE0;
    --sp-cr:#7A1E1E; --sp-cr2:#B03030; --sp-cr3:#F0D0D0;
    --sp-sa:#1840A0; --sp-sa2:#2E5AC8;
    --sp-bdg:linear-gradient(90deg,transparent,rgba(212,175,106,.5),transparent);
}

.main .wrap { font-family:'Outfit',sans-serif; }
.main { background:var(--sp-bg); }

.main::before {
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:repeating-linear-gradient(
        -45deg,transparent 0px,transparent 28px,
        rgba(212,175,106,.018) 28px,rgba(212,175,106,.018) 29px
    );
}
.main::after {
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(ellipse 80% 60% at 0% 0%,rgba(212,175,106,.06) 0%,transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%,rgba(26,107,74,.05) 0%,transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 0%,rgba(24,64,160,.06) 0%,transparent 55%);
}

@keyframes spFadeUp  { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes spFadeIn  { from{opacity:0} to{opacity:1} }
@keyframes spPopIn   { 0%{opacity:0;transform:scale(.9)} 65%{transform:scale(1.02)} 100%{opacity:1;transform:scale(1)} }
@keyframes spFloat   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes spBlink   { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes spModalIn { from{opacity:0;transform:scale(.9) translateY(24px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes spGold    { 0%,100%{box-shadow:0 0 0 0 rgba(212,175,106,0)} 50%{box-shadow:0 0 18px 4px rgba(212,175,106,.15)} }
@keyframes spShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ════ HERO ════ */
.sp-hero {
    position:relative; overflow:hidden;
    border-radius:10px; margin-bottom:2rem;
    border:1px solid var(--sp-bd);
    box-shadow:0 12px 50px rgba(0,0,0,.5),0 0 0 1px rgba(212,175,106,.08);
    animation:spFadeUp .65s ease-out;
}
.sp-hbg {
    position:absolute; inset:0;
    background:linear-gradient(135deg,#060E1C 0%,#0B1628 35%,#0E1F3A 65%,#091422 100%);
}
.sp-hgeo { position:absolute; inset:0; overflow:hidden; }
.sp-hgeo::before {
    content:''; position:absolute; right:-80px; top:-80px;
    width:420px; height:420px; border-radius:50%;
    border:1px solid rgba(212,175,106,.07);
    box-shadow:inset 0 0 0 30px rgba(212,175,106,.03),
               inset 0 0 0 80px rgba(212,175,106,.02),
               inset 0 0 0 150px rgba(212,175,106,.015);
}
.sp-hgeo::after {
    content:''; position:absolute; left:40%; bottom:-60px;
    width:200px; height:200px;
    border:1px solid rgba(212,175,106,.06); transform:rotate(45deg);
}
.sp-hsweep {
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse 55% 80% at 8% 50%,rgba(212,175,106,.11) 0%,transparent 60%),
        radial-gradient(ellipse 40% 60% at 95% 30%,rgba(26,107,74,.07) 0%,transparent 55%);
}
.sp-hhatch {
    position:absolute; inset:0; opacity:.04;
    background-image:
        linear-gradient(rgba(212,175,106,1) 1px,transparent 1px),
        linear-gradient(90deg,rgba(212,175,106,1) 1px,transparent 1px);
    background-size:40px 40px;
}
.sp-hbody {
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    padding:2.5rem 3rem; gap:2rem;
}
.sp-hlabel {
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
    color:var(--sp-g1); margin-bottom:.875rem;
}
.sp-hlline { width:24px; height:1px; background:var(--sp-g1); }
.sp-htit {
    font-family:'Cinzel',serif;
    font-size:2.4rem; font-weight:700; line-height:1.15; color:#F0EAD8;
    letter-spacing:.02em;
}
.sp-htit .sp-acc {
    background:linear-gradient(90deg,var(--sp-g1),var(--sp-g3),var(--sp-g2),var(--sp-g1));
    background-size:200%;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    animation:spShimmer 5s linear infinite;
}
.sp-hdiv { display:flex; align-items:center; gap:.75rem; margin:1rem 0; }
.sp-hdiv::before,.sp-hdiv::after { content:''; flex:0 0 36px; height:1px; background:var(--sp-g1); opacity:.6; }
.sp-hdiv-gem { color:var(--sp-g1); font-size:.7rem; }
.sp-hsub { font-size:.9rem; color:var(--sp-txm); line-height:1.7; font-weight:300; max-width:520px; }
.sp-hright { display:flex; align-items:stretch; gap:1.5rem; flex-shrink:0; }
.sp-hemblem {
    display:flex; align-items:center; justify-content:center;
    font-size:5rem; line-height:1;
    filter:drop-shadow(0 0 28px rgba(212,175,106,.45)) drop-shadow(0 4px 12px rgba(0,0,0,.5));
    animation:spFloat 4s ease-in-out infinite;
}
.sp-hkpis { display:flex; flex-direction:column; gap:.75rem; }
.sp-kpi {
    background:rgba(212,175,106,.07);
    border:1px solid rgba(212,175,106,.18); border-radius:8px;
    padding:.875rem 1.25rem; min-width:185px;
    display:flex; align-items:center; gap:.875rem;
    transition:all .22s; position:relative; overflow:hidden;
}
.sp-kpi::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:linear-gradient(180deg,transparent,var(--sp-g2),transparent);
}
.sp-kpi:hover { background:rgba(212,175,106,.13); border-color:rgba(212,175,106,.35); }
.sp-kico {
    width:38px; height:38px; border-radius:6px;
    background:rgba(212,175,106,.1); border:1px solid rgba(212,175,106,.2);
    display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0;
}
.sp-kval {
    font-family:'Libre Baskerville',serif;
    font-size:1.45rem; font-weight:700; color:var(--sp-g2); line-height:1;
}
.sp-klbl { font-size:.58rem; font-weight:500; color:var(--sp-txm); text-transform:uppercase; letter-spacing:.1em; margin-top:3px; }

/* ════ ALERTS ════ */
.sp-alert {
    display:flex; align-items:flex-start; gap:.875rem;
    padding:.9rem 1.25rem; border-radius:6px; margin-bottom:1.5rem;
    font-size:.875rem; font-weight:400; line-height:1.5;
    animation:spPopIn .4s ease-out; border:1px solid;
    font-family:'Outfit',sans-serif;
}
.sp-aic { font-size:1.2rem; flex-shrink:0; margin-top:.1rem; }
.sp-aok  { background:rgba(26,107,74,.12); color:#5ECFA0; border-color:rgba(26,107,74,.35); }
.sp-adel { background:rgba(122,30,30,.12); color:#E07070; border-color:rgba(122,30,30,.35); }
.sp-aedt { background:rgba(212,175,106,.08); color:var(--sp-g2); border-color:rgba(212,175,106,.3); }
.sp-aerr { background:rgba(122,30,30,.12); color:#E07070; border-color:rgba(122,30,30,.35); }

/* ════ STAT CARDS ════ */
.sp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-bottom:2rem; }
.sp-scard {
    background:var(--sp-s1); border:1px solid var(--sp-bd); border-radius:10px;
    padding:1.5rem 1.625rem; display:flex; align-items:center; gap:1.25rem;
    box-shadow:0 4px 20px rgba(0,0,0,.3); transition:all .3s ease;
    animation:spFadeUp .5s ease-out backwards; position:relative; overflow:hidden;
}
.sp-scard::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--sp-g0),var(--sp-g2),var(--sp-g0),transparent);
    opacity:0; transition:opacity .3s;
}
.sp-scard:hover { transform:translateY(-5px); box-shadow:0 10px 36px rgba(0,0,0,.45); border-color:var(--sp-bdh); }
.sp-scard:hover::after { opacity:1; }
.sp-scard:nth-child(1){animation-delay:.05s} .sp-scard:nth-child(2){animation-delay:.1s} .sp-scard:nth-child(3){animation-delay:.15s}
.sp-sico {
    width:56px; height:56px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:1.75rem;
    border:1px solid var(--sp-bd); transition:transform .3s ease;
}
.sp-scard:hover .sp-sico { transform:scale(1.1) rotate(-6deg); }
.sp-si1{background:linear-gradient(135deg,rgba(212,175,106,.12),rgba(212,175,106,.06))}
.sp-si2{background:linear-gradient(135deg,rgba(26,107,74,.15),rgba(26,107,74,.07))}
.sp-si3{background:linear-gradient(135deg,rgba(24,64,160,.18),rgba(24,64,160,.08))}
.sp-slbl { font-size:.64rem; font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--sp-txl); margin-bottom:.4rem; }
.sp-sval { font-family:'Libre Baskerville',serif; font-size:1.65rem; font-weight:700; line-height:1; color:var(--sp-tx); }
.sp-ssub { font-size:.7rem; color:var(--sp-txl); margin-top:.4rem; font-weight:400; }

/* ════ MAIN GRID ════ */
.sp-grid { display:grid; grid-template-columns:400px 1fr; gap:1.75rem; align-items:start; }

/* ════ FORM CARD ════ */
.sp-fcard {
    background:var(--sp-s1); border:1px solid var(--sp-bd); border-radius:10px;
    box-shadow:0 6px 30px rgba(0,0,0,.35); overflow:hidden;
    position:sticky; top:1.5rem;
    animation:spFadeUp .5s ease-out .08s backwards;
}
.sp-fcard.sp-em { border-color:rgba(212,175,106,.4); box-shadow:0 6px 30px rgba(212,175,106,.1); }
.sp-fhead {
    padding:1.25rem 1.625rem;
    background:linear-gradient(135deg,var(--sp-n1),var(--sp-n2));
    position:relative;
}
.sp-fhead::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,var(--sp-g1),var(--sp-g2),var(--sp-g1),transparent);
}
.sp-fhead.sp-ehead { background:linear-gradient(135deg,rgba(212,175,106,.08),rgba(212,175,106,.04)); }
.sp-fhr { display:flex; align-items:center; justify-content:space-between; }
.sp-fhl { display:flex; align-items:center; gap:.875rem; }
.sp-fhico {
    width:40px; height:40px; border-radius:8px;
    background:rgba(212,175,106,.1); border:1px solid rgba(212,175,106,.25);
    display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.sp-fhtit { font-family:'Cinzel',serif; font-size:1rem; font-weight:600; color:var(--sp-g2); letter-spacing:.04em; }
.sp-fhsub { font-size:.62rem; font-weight:400; color:var(--sp-txm); margin-top:2px; letter-spacing:.06em; text-transform:uppercase; }
.sp-bcan {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.35rem .75rem; border-radius:4px;
    background:rgba(176,48,48,.12); border:1px solid rgba(176,48,48,.3);
    color:#E07070; font-size:.75rem; font-weight:500; font-family:'Outfit',sans-serif;
    text-decoration:none; transition:all .2s; cursor:pointer;
}
.sp-bcan:hover { background:rgba(176,48,48,.22); }

.sp-fbdy {
    padding:1.5rem 1.625rem;
    max-height:calc(100vh - 180px); overflow-y:auto;
}
.sp-fbdy::-webkit-scrollbar { width:3px; }
.sp-fbdy::-webkit-scrollbar-thumb { background:var(--sp-bd); border-radius:50px; }
.sp-fbdy::-webkit-scrollbar-thumb:hover { background:var(--sp-g1); }

.sp-fg  { display:flex; flex-direction:column; gap:.4rem; margin-bottom:.9rem; }
.sp-fg2 { display:grid; grid-template-columns:1fr 1fr; gap:.875rem; }
.sp-flbl {
    font-size:.63rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.1em; color:var(--sp-txm);
    display:inline-flex; align-items:center; gap:.35rem;
    line-height:1.4;
}
.sp-flbl-ico {
    font-size:.85rem; line-height:1;
    display:inline-flex; align-items:center; flex-shrink:0;
    text-transform:none; letter-spacing:0;
}
.sp-req { color:var(--sp-cr2); }
.sp-opt {
    background:rgba(26,107,74,.15); color:var(--sp-em2);
    border:1px solid rgba(26,107,74,.25); border-radius:3px;
    padding:.05rem .42rem; font-size:.56rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em;
}
.sp-fi,.sp-fs,.sp-fta {
    padding:.8rem 1rem;
    background:var(--sp-n2); border:1px solid rgba(212,175,106,.15);
    border-radius:6px; font-size:.88rem; font-family:'Outfit',sans-serif;
    font-weight:400; color:var(--sp-tx); transition:all .2s; outline:none; width:100%;
    appearance:none; -webkit-appearance:none;
}
.sp-fi::placeholder { color:var(--sp-txl); }
.sp-fi:focus,.sp-fs:focus,.sp-fta:focus {
    border-color:rgba(212,175,106,.5); background:var(--sp-n3);
    box-shadow:0 0 0 3px rgba(212,175,106,.08);
}
.sp-fta { resize:vertical; min-height:78px; line-height:1.6; }
.sp-fs {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D4AF6A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right .875rem center;
    padding-right:2.5rem; cursor:pointer;
}
.sp-fs option { background:var(--sp-n2); color:var(--sp-tx); }
.sp-nwrap { position:relative; }
.sp-npfx {
    position:absolute; left:1rem; top:50%; transform:translateY(-50%);
    font-family:'Libre Baskerville',serif; font-size:.95rem; font-weight:700;
    color:var(--sp-g1); pointer-events:none;
}
.sp-nfi { padding-left:2.875rem; font-family:'Libre Baskerville',serif; font-size:1.05rem; }
.sp-srule { display:flex; align-items:center; gap:.75rem; margin:.5rem 0 1rem; }
.sp-srule::before,.sp-srule::after { content:''; flex:1; height:1px; background:rgba(212,175,106,.18); }
.sp-srtxt { font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--sp-txl); white-space:nowrap; }

.sp-dzone {
    border:1.5px dashed rgba(212,175,106,.25); border-radius:8px;
    padding:1.125rem; background:rgba(212,175,106,.03);
    display:flex; align-items:center; gap:.875rem;
    cursor:pointer; transition:all .25s;
}
.sp-dzone:hover,.sp-dzone.over { border-color:rgba(212,175,106,.55); background:rgba(212,175,106,.07); box-shadow:0 0 0 3px rgba(212,175,106,.06); }
.sp-dzico {
    width:42px; height:42px; border-radius:8px; flex-shrink:0;
    background:rgba(212,175,106,.1); border:1px solid rgba(212,175,106,.22);
    display:flex; align-items:center; justify-content:center; font-size:1.25rem; transition:transform .3s;
}
.sp-dzone:hover .sp-dzico { transform:scale(1.08) rotate(-5deg); }
.sp-dzt1 { font-size:.84rem; font-weight:500; color:var(--sp-tx); }
.sp-dzt2 { font-size:.68rem; color:var(--sp-txl); margin-top:2px; }
input[type="file"] { display:none; }
.sp-fprev {
    margin-top:.75rem; padding:.8rem 1rem;
    background:rgba(212,175,106,.06); border:1px solid rgba(212,175,106,.18);
    border-radius:8px; display:none; align-items:center; gap:.875rem;
}
.sp-fprev.show { display:flex; }
.sp-pthumb { width:46px; height:46px; border-radius:6px; object-fit:cover; border:1px solid var(--sp-bd); }
.sp-ppdf { width:46px; height:46px; border-radius:6px; background:rgba(122,30,30,.18); border:1px solid rgba(122,30,30,.3); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.sp-pinfo { flex:1; min-width:0; }
.sp-pnm { font-size:.8rem; font-weight:500; color:var(--sp-tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-psz { font-size:.68rem; color:var(--sp-txl); margin-top:2px; }
.sp-prm { width:28px; height:28px; border-radius:5px; flex-shrink:0; background:rgba(122,30,30,.15); color:#E07070; border:1px solid rgba(122,30,30,.25); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.75rem; transition:all .2s; }
.sp-prm:hover { background:rgba(176,48,48,.3); }
.sp-efchip {
    margin-top:.6rem; padding:.75rem 1rem;
    background:rgba(26,107,74,.08); border:1px solid rgba(26,107,74,.2);
    border-radius:8px; display:flex; align-items:center; gap:.75rem;
}
.sp-efimg { width:40px; height:40px; border-radius:6px; object-fit:cover; border:1px solid var(--sp-bd); }
.sp-efpdf { width:40px; height:40px; border-radius:6px; background:rgba(122,30,30,.15); border:1px solid rgba(122,30,30,.25); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.sp-efl { font-size:.75rem; font-weight:500; color:var(--sp-em2); text-decoration:none; }
.sp-efl:hover { text-decoration:underline; }

.sp-bsub {
    width:100%; padding:1rem; border:none; border-radius:7px;
    background:linear-gradient(135deg,var(--sp-n3),var(--sp-n4));
    color:var(--sp-g2); font-size:.92rem; font-weight:600;
    font-family:'Cinzel',serif; cursor:pointer;
    border:1px solid rgba(212,175,106,.35);
    box-shadow:0 4px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(212,175,106,.1);
    display:flex; align-items:center; justify-content:center; gap:.625rem;
    transition:all .28s; margin-top:.5rem; letter-spacing:.06em;
    position:relative; overflow:hidden;
}
.sp-bsub::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(212,175,106,.08),transparent); opacity:0; transition:opacity .2s; }
.sp-bsub:hover { transform:translateY(-2px); border-color:var(--sp-g1); color:var(--sp-g3); box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 20px rgba(212,175,106,.12); }
.sp-bsub:hover::after { opacity:1; }
.sp-bsub:active { transform:translateY(0); }
.sp-bsub.sp-ebtn { background:linear-gradient(135deg,rgba(212,175,106,.12),rgba(212,175,106,.06)); color:var(--sp-g3); }
.sp-bsub.sp-ebtn:hover { box-shadow:0 8px 28px rgba(212,175,106,.2); }

/* ════ TABLE CARD ════ */
.sp-tcard {
    background:var(--sp-s1); border:1px solid var(--sp-bd); border-radius:10px;
    box-shadow:0 6px 30px rgba(0,0,0,.35); overflow:hidden;
    animation:spFadeUp .5s ease-out .15s backwards;
}
.sp-thead {
    padding:1.125rem 1.625rem;
    background:linear-gradient(135deg,var(--sp-n1),var(--sp-n2));
    border-bottom:1px solid var(--sp-bd);
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    position:relative;
}
.sp-thead::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,var(--sp-g0),var(--sp-g2),var(--sp-g0),transparent);
}
.sp-thl { display:flex; align-items:center; gap:.875rem; flex-wrap:wrap; }
.sp-thico { font-size:1.2rem; }
.sp-thtit { font-family:'Cinzel',serif; font-size:1.05rem; font-weight:600; color:var(--sp-g2); letter-spacing:.05em; }
.sp-thbdg {
    background:rgba(212,175,106,.1); border:1px solid rgba(212,175,106,.22);
    border-radius:4px; padding:.18rem .7rem;
    font-size:.66rem; font-weight:500; color:var(--sp-g1); letter-spacing:.08em;
}
.sp-swrap { position:relative; }
.sp-sico { position:absolute; left:.875rem; top:50%; transform:translateY(-50%); font-size:.85rem; color:var(--sp-txl); pointer-events:none; }
.sp-sin {
    padding:.55rem .875rem .55rem 2.5rem;
    background:rgba(212,175,106,.06); border:1px solid rgba(212,175,106,.2);
    border-radius:5px; color:var(--sp-tx); font-size:.84rem; font-family:'Outfit',sans-serif;
    outline:none; width:220px; transition:all .2s;
}
.sp-sin::placeholder { color:var(--sp-txl); }
.sp-sin:focus { border-color:rgba(212,175,106,.5); background:rgba(212,175,106,.1); }

.sp-tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sp-tscroll::-webkit-scrollbar { height:4px; }
.sp-tscroll::-webkit-scrollbar-thumb { background:var(--sp-bd); border-radius:50px; }
.sp-tscroll table { width:100%; border-collapse:collapse; min-width:980px; table-layout:fixed; }
.sp-tscroll thead tr { background:var(--sp-s2); border-bottom:1px solid var(--sp-bd); }
.sp-tscroll th {
    padding:.75rem .875rem; text-align:left;
    font-size:.6rem; font-weight:600; color:var(--sp-txm);
    text-transform:uppercase; letter-spacing:.1em;
    white-space:nowrap; font-family:'Outfit',sans-serif;
    overflow:hidden;
}
/* lebar kolom tetap agar tidak berantakan */
.sp-tscroll col.c-no     { width:42px; }
.sp-tscroll col.c-nama   { width:160px; }
.sp-tscroll col.c-periode{ width:110px; }
.sp-tscroll col.c-nominal{ width:120px; }
.sp-tscroll col.c-tgl    { width:110px; }
.sp-tscroll col.c-metode { width:100px; }
.sp-tscroll col.c-status { width:115px; }
.sp-tscroll col.c-catatan{ width:120px; }
.sp-tscroll col.c-bukti  { width:90px; }
.sp-tscroll col.c-aksi   { width:75px; }

/* header label — ikon + teks dipisah */
.sp-th-inner {
    display:inline-flex; align-items:center; gap:.35rem;
    line-height:1;
}
.sp-th-ico {
    font-size:.85rem; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0;
}

.sp-tscroll tbody tr { border-bottom:1px solid rgba(212,175,106,.07); transition:background .15s; }
.sp-tscroll tbody tr:hover { background:rgba(212,175,106,.04); }
.sp-tscroll tbody tr:last-child { border-bottom:none; }
.sp-tscroll td {
    padding:.8rem .875rem; font-size:.83rem; font-weight:400;
    color:var(--sp-tx); vertical-align:middle;
    font-family:'Outfit',sans-serif;
    overflow:hidden; text-overflow:ellipsis;
}

/* No */
.sp-tdno {
    font-family:'Libre Baskerville',serif; font-size:.82rem;
    color:var(--sp-txl); text-align:center; white-space:nowrap;
}
/* Nama */
.sp-tdnm { font-weight:600; color:#F0EAD8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Periode */
.sp-period { display:flex; flex-direction:column; gap:3px; }
.sp-bbln {
    display:inline-flex; align-items:center; gap:.25rem;
    background:rgba(212,175,106,.1); color:var(--sp-g2);
    border:1px solid rgba(212,175,106,.22); border-radius:4px;
    padding:.15rem .5rem; font-size:.61rem; font-weight:500; white-space:nowrap;
    line-height:1.4;
}
.sp-bthn {
    display:inline-flex; align-items:center; gap:.25rem;
    background:rgba(24,64,160,.15); color:#7AA0E8;
    border:1px solid rgba(24,64,160,.3); border-radius:4px;
    padding:.15rem .5rem; font-size:.61rem; font-weight:500;
    white-space:nowrap; line-height:1.4;
}
/* badge ikon kecil sejajar */
.sp-bbln .sp-bico,
.sp-bthn .sp-bico {
    font-size:.72rem; line-height:1;
    display:inline-flex; align-items:center; flex-shrink:0;
}
/* Nominal */
.sp-tdnom {
    font-family:'Libre Baskerville',serif; font-size:.88rem;
    font-weight:700; color:var(--sp-g2); white-space:nowrap;
}
/* Tanggal */
.sp-tddt { font-size:.77rem; font-weight:400; white-space:nowrap; color:var(--sp-txm); line-height:1.5; }
.sp-tddt small { display:block; font-size:.64rem; color:var(--sp-txl); margin-top:2px; }
/* Metode badge */
.sp-bmet {
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.22rem .6rem; border-radius:4px;
    font-size:.61rem; font-weight:500; white-space:nowrap; line-height:1.4;
}
.sp-bmet .sp-bico { font-size:.78rem; line-height:1; display:inline-flex; align-items:center; flex-shrink:0; }
.sp-bmt  { background:rgba(26,107,74,.12); color:#5ECFA0; border:1px solid rgba(26,107,74,.28); }
.sp-bmtr { background:rgba(24,64,160,.12); color:#7AA0E8; border:1px solid rgba(24,64,160,.3); }
.sp-bmew { background:rgba(212,175,106,.1); color:var(--sp-g2); border:1px solid rgba(212,175,106,.25); }
.sp-bmot { background:rgba(90,110,136,.12); color:var(--sp-txm); border:1px solid rgba(90,110,136,.25); }
/* Status badge */
.sp-bsts {
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.22rem .6rem; border-radius:4px;
    font-size:.61rem; font-weight:500; white-space:nowrap; line-height:1.4;
}
.sp-sdot {
    width:5px; height:5px; border-radius:50%; flex-shrink:0;
    animation:spBlink 2.5s ease-in-out infinite;
    margin-top:1px; /* optical alignment */
}
.sp-bsl  { background:rgba(26,107,74,.12); color:#5ECFA0; border:1px solid rgba(26,107,74,.28); }
.sp-bsl .sp-sdot { background:#25956A; }
.sp-bsb  { background:rgba(122,30,30,.12); color:#E07070; border:1px solid rgba(122,30,30,.3); }
.sp-bsb .sp-sdot { background:var(--sp-cr2); }
.sp-bsc  { background:rgba(212,175,106,.1); color:var(--sp-g2); border:1px solid rgba(212,175,106,.25); }
.sp-bsc .sp-sdot { background:var(--sp-g1); }
.sp-bso  { background:rgba(90,110,136,.12); color:var(--sp-txm); border:1px solid rgba(90,110,136,.25); }
.sp-bso .sp-sdot { background:var(--sp-txl); }
/* Catatan */
.sp-tdcat { font-size:.75rem; line-height:1.5; word-break:break-word; color:var(--sp-txm); }
.sp-nocat { color:var(--sp-txl); font-style:italic; font-size:.73rem; }
/* Bukti */
.sp-bbkt {
    display:inline-flex; align-items:center; gap:.28rem;
    padding:.24rem .6rem; border-radius:4px;
    background:rgba(26,107,74,.1); color:#5ECFA0;
    border:1px solid rgba(26,107,74,.25);
    font-size:.63rem; font-weight:500; cursor:pointer;
    transition:all .2s; text-decoration:none; white-space:nowrap;
    line-height:1.4;
}
.sp-bbkt .sp-bico { font-size:.78rem; line-height:1; display:inline-flex; align-items:center; flex-shrink:0; }
.sp-bbkt:hover { background:rgba(26,107,74,.22); border-color:var(--sp-em2); transform:translateY(-1px); }
.sp-nobkt { color:var(--sp-txl); font-size:.72rem; font-style:italic; }
/* Aksi */
.sp-acts { display:flex; gap:.3rem; align-items:center; }
.sp-ab {
    width:30px; height:30px; border-radius:5px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:.82rem; line-height:1;
    border:1px solid; cursor:pointer; text-decoration:none;
    transition:all .2s; flex-shrink:0;
}
.sp-ab:hover { transform:translateY(-2px) scale(1.08); }
.sp-abe { background:rgba(212,175,106,.08); color:var(--sp-g2); border-color:rgba(212,175,106,.25); }
.sp-abe:hover { background:rgba(212,175,106,.2); border-color:var(--sp-g1); }
.sp-abd { background:rgba(122,30,30,.08); color:#E07070; border-color:rgba(122,30,30,.25); }
.sp-abd:hover { background:rgba(176,48,48,.2); border-color:var(--sp-cr2); }

.sp-empty { text-align:center; padding:4rem 2rem; }
.sp-empic { font-size:4rem; margin-bottom:1rem; animation:spFloat 3s ease-in-out infinite; opacity:.7; }
.sp-emtit { font-family:'Cinzel',serif; font-size:1.1rem; font-weight:600; color:var(--sp-g2); margin-bottom:.5rem; letter-spacing:.06em; }
.sp-emsub { font-size:.86rem; color:var(--sp-txm); }

/* ════ MODAL ════ */
.sp-mbg {
    display:none; position:fixed; inset:0;
    background:rgba(6,14,28,.92); backdrop-filter:blur(20px);
    z-index:900; align-items:center; justify-content:center; padding:2rem;
}
.sp-mbg.open { display:flex; }
.sp-mbox {
    background:var(--sp-s1); border-radius:12px;
    padding:2rem; max-width:800px; width:100%; max-height:90vh; overflow-y:auto;
    border:1px solid var(--sp-bd);
    box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 0 1px rgba(212,175,106,.08);
    animation:spModalIn .35s cubic-bezier(.34,1.2,.64,1);
}
.sp-mbox::-webkit-scrollbar { width:4px; }
.sp-mbox::-webkit-scrollbar-thumb { background:var(--sp-bd); border-radius:50px; }
.sp-mhd { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; padding-bottom:1.25rem; border-bottom:1px solid var(--sp-bd); }
.sp-mtit { font-family:'Cinzel',serif; font-size:1.05rem; font-weight:600; color:var(--sp-g2); display:flex; align-items:center; gap:.625rem; letter-spacing:.04em; }
.sp-mcls {
    width:34px; height:34px; border-radius:6px;
    background:var(--sp-s2); border:1px solid var(--sp-bd); cursor:pointer;
    font-size:.9rem; color:var(--sp-txm);
    display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.sp-mcls:hover { background:rgba(122,30,30,.15); border-color:rgba(176,48,48,.4); color:#E07070; }
.sp-mimg { width:100%; border-radius:8px; object-fit:contain; max-height:56vh; border:1px solid var(--sp-bd); }
.sp-mpdf { width:100%; height:460px; border-radius:8px; border:1px solid var(--sp-bd); }
.sp-mdl {
    display:inline-flex; align-items:center; gap:.625rem;
    margin-top:1.125rem; padding:.7rem 1.625rem;
    border-radius:7px; text-decoration:none; font-weight:500;
    font-family:'Outfit',sans-serif; font-size:.86rem; transition:all .22s; border:1px solid;
}
.sp-mdl:hover { transform:translateY(-2px); }
.sp-dlg { background:rgba(26,107,74,.12); color:#5ECFA0; border-color:rgba(26,107,74,.3); }
.sp-dlg:hover { background:rgba(26,107,74,.22); }
.sp-dlr { background:rgba(122,30,30,.1); color:#E07070; border-color:rgba(122,30,30,.3); }
.sp-dlr:hover { background:rgba(176,48,48,.2); }

/* ════ FOOTER ════ */
.sp-foot { position:relative; z-index:1; text-align:center; padding:1.5rem 2rem; margin-top:.5rem; }
.sp-fline { height:1px; margin-bottom:.875rem; background:linear-gradient(90deg,transparent,rgba(212,175,106,.3),rgba(212,175,106,.6),rgba(212,175,106,.3),transparent); }
.sp-ftxt { font-family:'Cinzel',serif; font-size:.66rem; color:var(--sp-txl); letter-spacing:.2em; }
.sp-fgem { color:var(--sp-g1); margin:0 .5rem; }

/* ════ RESPONSIVE ════ */
@media(min-width:1400px){
    .sp-grid { grid-template-columns:420px 1fr; gap:2rem; }
    .sp-hbody { padding:2.75rem 3.5rem; }
    .sp-stats { grid-template-columns:repeat(3,1fr); gap:1.5rem; }
}
@media(min-width:1200px) and (max-width:1399px){
    .sp-grid { grid-template-columns:380px 1fr; gap:1.625rem; }
    .sp-hbody { padding:2.25rem 2.75rem; }
    .sp-htit { font-size:2rem; }
    .sp-stats { grid-template-columns:repeat(3,1fr); }
    .sp-kpi { min-width:170px; }
}
@media(min-width:1024px) and (max-width:1199px){
    .sp-grid { grid-template-columns:1fr; gap:1.5rem; }
    .sp-fcard { position:relative; top:0; }
    .sp-fbdy { max-height:none; }
    .sp-fg2 { grid-template-columns:1fr 1fr; }
    .sp-hbody { padding:2rem 2.25rem; gap:1.5rem; }
    .sp-htit { font-size:1.875rem; }
    .sp-hdiv { margin:.75rem 0; }
    .sp-hemblem { font-size:4rem; }
    .sp-kpi { min-width:160px; padding:.75rem 1.125rem; }
    .sp-kval { font-size:1.25rem; }
    .sp-stats { grid-template-columns:repeat(3,1fr); gap:1rem; }
    .sp-sval { font-size:1.4rem; }
    .sp-sico { width:48px; height:48px; font-size:1.5rem; }
    .sp-sin { width:200px; }
}
@media(min-width:769px) and (max-width:1023px){
    .sp-grid { grid-template-columns:1fr; gap:1.5rem; }
    .sp-fcard { position:relative; top:0; }
    .sp-fbdy { max-height:none; }
    .sp-hbody { flex-direction:column; align-items:flex-start; padding:1.875rem 2rem; gap:1.25rem; }
    .sp-hright { align-self:flex-end; flex-direction:row; gap:1.125rem; }
    .sp-htit { font-size:1.625rem; }
    .sp-hlabel { font-size:.6rem; }
    .sp-hsub { font-size:.84rem; }
    .sp-hemblem { font-size:3.5rem; }
    .sp-kpi { min-width:155px; padding:.75rem 1rem; }
    .sp-kval { font-size:1.25rem; }
    .sp-stats { grid-template-columns:repeat(3,1fr); gap:.875rem; }
    .sp-scard { padding:1.125rem 1.25rem; }
    .sp-sval { font-size:1.35rem; }
    .sp-sico { width:46px; height:46px; font-size:1.4rem; }
    .sp-slbl { font-size:.6rem; }
    .sp-fg2 { grid-template-columns:1fr 1fr; }
    .sp-thead { flex-direction:column; align-items:flex-start; gap:.75rem; }
    .sp-sin { width:100%; }
    .sp-swrap { width:100%; }
    .sp-tscroll::before { content:'← Geser untuk lihat lebih →'; display:block; text-align:center; font-size:.62rem; color:var(--sp-txm); padding:.4rem; background:rgba(212,175,106,.04); border-bottom:1px solid var(--sp-bd); }
}
@media(max-width:768px){
    .sp-grid { grid-template-columns:1fr; gap:1.25rem; }
    .sp-fcard { position:relative; top:0; }
    .sp-fbdy { max-height:none; padding:1.25rem; }
    .sp-fhead { padding:1.125rem 1.25rem; }
    .sp-hbody { flex-direction:column; align-items:flex-start; padding:1.625rem 1.5rem; gap:1.25rem; }
    .sp-hright { align-self:stretch; flex-direction:row; justify-content:flex-end; gap:1rem; }
    .sp-htit { font-size:1.75rem; }
    .sp-hemblem { font-size:3.75rem; }
    .sp-kpi { min-width:0; flex:1; padding:.75rem 1rem; }
    .sp-kval { font-size:1.2rem; }
    .sp-klbl { font-size:.55rem; }
    .sp-stats { grid-template-columns:1fr; gap:.875rem; margin-bottom:1.5rem; }
    .sp-scard { padding:1.125rem 1.25rem; }
    .sp-fg2 { grid-template-columns:1fr 1fr; }
    .sp-thead { flex-direction:column; align-items:flex-start; padding:1rem 1.25rem; gap:.75rem; }
    .sp-sin { width:100%; }
    .sp-swrap { width:100%; }
    .sp-tscroll::before { content:'← Geser untuk lihat lebih →'; display:block; text-align:center; font-size:.62rem; color:var(--sp-txm); padding:.4rem; background:rgba(212,175,106,.04); border-bottom:1px solid var(--sp-bd); }
}
@media(max-width:480px){
    .sp-hbody { padding:1.25rem 1.125rem; gap:1rem; }
    .sp-hlabel { display:none; }
    .sp-htit { font-size:1.375rem; }
    .sp-hdiv { margin:.625rem 0; }
    .sp-hsub { font-size:.8rem; }
    .sp-hemblem { font-size:3rem; }
    .sp-hright { gap:.75rem; }
    .sp-kpi { padding:.625rem .875rem; }
    .sp-kval { font-size:1.1rem; }
    .sp-stats { grid-template-columns:1fr 1fr; gap:.75rem; }
    .sp-scard { padding:1rem .875rem; border-radius:9px; }
    .sp-sico { width:42px; height:42px; font-size:1.3rem; }
    .sp-sval { font-size:1.25rem; }
    .sp-slbl { font-size:.58rem; }
    .sp-ssub { display:none; }
    .sp-fg2 { grid-template-columns:1fr; }
    .sp-fbdy { padding:1rem; }
    .sp-fhead { padding:1rem; }
    .sp-thead { padding:.875rem 1rem; }
    .sp-tscroll table { min-width:980px; }
    .sp-tscroll td,.sp-tscroll th { padding:.7rem .75rem; font-size:.78rem; }
}
@media(max-width:360px){
    .sp-htit { font-size:1.25rem; }
    .sp-stats { grid-template-columns:1fr; }
    .sp-hright { flex-direction:column; align-items:flex-start; gap:.625rem; }
    .sp-hkpis { flex-direction:row; }
    .sp-kpi { min-width:0; flex:1; }
    .sp-tscroll table { min-width:600px; }
}
@media(max-height:500px) and (orientation:landscape){
    .sp-hbody { padding:1rem 1.5rem; flex-direction:row; }
    .sp-htit { font-size:1.375rem; }
    .sp-hemblem { font-size:3rem; }
    .sp-stats { grid-template-columns:repeat(3,1fr); gap:.75rem; }
    .sp-fbdy { max-height:calc(100vh - 140px); }
}
</style>

<!-- ══════════════════════════════════════════════════════
     KONTEN UTAMA
══════════════════════════════════════════════════════ -->
<div class="main">
<div class="wrap fade-up">

<!-- HERO -->
<div class="sp-hero">
    <div class="sp-hbg"></div>
    <div class="sp-hgeo"></div>
    <div class="sp-hsweep"></div>
    <div class="sp-hhatch"></div>
    <div class="sp-hbody">
        <div>
            <div class="sp-hlabel">
                <span class="sp-hlline"></span>Administrasi Keuangan Sekolah<span class="sp-hlline"></span>
            </div>
            <h1 class="sp-htit">Pembayaran<br><span class="sp-acc">SPP Siswa</span></h1>
            <div class="sp-hdiv"><span class="sp-hdiv-gem">◆</span></div>
            <p class="sp-hsub">Catat, pantau dan kelola seluruh transaksi pembayaran siswa secara sistematis, akurat dan terpercaya.</p>
        </div>
        <div class="sp-hright">
            <div class="sp-hemblem">🏛️</div>
            <div class="sp-hkpis">
                <div class="sp-kpi">
                    <div class="sp-kico">📊</div>
                    <div><div class="sp-kval"><?=$jml?></div><div class="sp-klbl">Total Transaksi</div></div>
                </div>
                <div class="sp-kpi">
                    <div class="sp-kico">💰</div>
                    <div>
                        <div class="sp-kval" style="font-size:1.15rem">Rp <?=number_format($bayar_bulan/1000,0,',','.')?>K</div>
                        <div class="sp-klbl">Penerimaan Bulan Ini</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ALERTS -->
<?php if(isset($_GET['success'])): ?>
<div class="sp-alert sp-aok"><span class="sp-aic">✔</span><div><strong>Pembayaran berhasil dicatat.</strong> Data telah tersimpan ke dalam basis data.</div></div>
<?php endif; ?>
<?php if(isset($_GET['updated'])): ?>
<div class="sp-alert sp-aok"><span class="sp-aic">✔</span><div><strong>Data berhasil diperbarui.</strong> Perubahan telah disimpan.</div></div>
<?php endif; ?>
<?php if(isset($_GET['deleted'])): ?>
<div class="sp-alert sp-adel"><span class="sp-aic">✕</span><div><strong>Data berhasil dihapus.</strong> Pembayaran telah dihapus dari sistem.</div></div>
<?php endif; ?>
<?php if($edit_data): ?>
<div class="sp-alert sp-aedt"><span class="sp-aic">✎</span><div>Mode sunting aktif — <a href="spp.php" style="color:var(--sp-g2);font-weight:600">Batalkan</a></div></div>
<?php endif; ?>
<?php if($form_error): ?>
<div class="sp-alert sp-aerr"><span class="sp-aic">⚠</span><div><strong>Gagal menyimpan.</strong><br><?=$form_error?></div></div>
<?php endif; ?>
<?php if($upload_error): ?>
<div class="sp-alert sp-aerr"><span class="sp-aic">⚠</span><div><?=$upload_error?></div></div>
<?php endif; ?>

<!-- STAT CARDS -->
<div class="sp-stats">
    <div class="sp-scard">
        <div class="sp-sico sp-si1">💰</div>
        <div>
            <div class="sp-slbl">Total Seluruh Pembayaran</div>
            <div class="sp-sval" style="font-size:1.35rem">Rp <?=number_format($total_bayar,0,',','.')?></div>
            <div class="sp-ssub">↑ Akumulasi semua transaksi</div>
        </div>
    </div>
    <div class="sp-scard">
        <div class="sp-sico sp-si2">📅</div>
        <div>
            <div class="sp-slbl">Penerimaan Bulan Ini</div>
            <div class="sp-sval" style="font-size:1.35rem">Rp <?=number_format($bayar_bulan,0,',','.')?></div>
            <div class="sp-ssub"><?=date('F Y')?></div>
        </div>
    </div>
    <div class="sp-scard">
        <div class="sp-sico sp-si3">📋</div>
        <div>
            <div class="sp-slbl">Jumlah Transaksi</div>
            <div class="sp-sval"><?=$jml?></div>
            <div class="sp-ssub">Data tersimpan di sistem</div>
        </div>
    </div>
</div>

<!-- MAIN GRID -->
<div class="sp-grid">

<!-- ═══ FORM ═══ -->
<div class="sp-fcard <?=$edit_data?'sp-em':''?>">
    <div class="sp-fhead <?=$edit_data?'sp-ehead':''?>">
        <div class="sp-fhr">
            <div class="sp-fhl">
                <div class="sp-fhico"><?=$edit_data?'✎':'💳'?></div>
                <div>
                    <div class="sp-fhtit"><?=$edit_data?'Sunting Pembayaran':'Catat Pembayaran'?></div>
                    <div class="sp-fhsub"><?=$edit_data?'Perbarui data yang ada':'Rekam transaksi baru'?></div>
                </div>
            </div>
            <?php if($edit_data): ?><a href="spp.php" class="sp-bcan">✕ Batal</a><?php endif; ?>
        </div>
    </div>

    <div class="sp-fbdy">
    <form method="POST" enctype="multipart/form-data">
        <?php if($edit_data): ?><input type="hidden" name="id" value="<?=(int)$edit_data['id']?>"><?php endif; ?>

        <!-- Siswa -->
        <div class="sp-fg">
            <label class="sp-flbl"><span class="sp-flbl-ico">&#128100;</span>Nama Siswa <span class="sp-req">*</span></label>
            <select name="siswa" class="sp-fs" required>
                <option value="">— Pilih Siswa —</option>
                <?php mysqli_data_seek($siswa_list,0); while($s=mysqli_fetch_assoc($siswa_list)): ?>
                <option value="<?=(int)$s['id']?>" <?=($edit_data&&$edit_data['siswa_id']==$s['id'])?'selected':''?>>
                    <?=htmlspecialchars($s['nama'])?> (<?=htmlspecialchars($s['nis'])?>)
                </option>
                <?php endwhile; ?>
            </select>
        </div>

        <!-- Bulan & Tahun -->
        <div class="sp-fg2">
            <div class="sp-fg">
                <label class="sp-flbl"><span class="sp-flbl-ico">&#128198;</span>Bulan <span class="sp-req">*</span></label>
                <select name="bulan" class="sp-fs" required>
                    <option value="">Pilih...</option>
                    <?php foreach($bulan_list as $b): ?>
                    <option value="<?=$b?>" <?=($edit_data&&$edit_data['bulan']==$b)?'selected':''?>><?=$b?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="sp-fg">
                <label class="sp-flbl"><span class="sp-flbl-ico">&#128197;</span>Tahun <span class="sp-req">*</span></label>
                <select name="tahun" class="sp-fs" required>
                    <?php for($i=$current_year-2;$i<=$current_year+1;$i++): ?>
                    <option value="<?=$i?>" <?=($edit_data?$edit_data['tahun']==$i:$i==$current_year)?'selected':''?>><?=$i?></option>
                    <?php endfor; ?>
                </select>
            </div>
        </div>

        <!-- Nominal -->
        <div class="sp-fg">
            <label class="sp-flbl"><span class="sp-flbl-ico">&#128181;</span>Nominal Pembayaran <span class="sp-req">*</span></label>
            <div class="sp-nwrap">
                <span class="sp-npfx">Rp</span>
                <input type="number" name="nominal" class="sp-fi sp-nfi" placeholder="500000" min="1"
                    value="<?=$edit_data?(int)$edit_data['nominal']:''?>" required>
            </div>
        </div>

        <!-- Metode & Status -->
        <div class="sp-fg2">
            <div class="sp-fg">
                <label class="sp-flbl"><span class="sp-flbl-ico">&#128179;</span>Metode <span class="sp-req">*</span></label>
                <select name="metode_bayar" class="sp-fs" required>
                    <option value="">Pilih...</option>
                    <option value="Tunai"    <?=($edit_data&&$edit_data['metode_bayar']=='Tunai')?'selected':''?>>Tunai</option>
                    <option value="Transfer" <?=($edit_data&&$edit_data['metode_bayar']=='Transfer')?'selected':''?>>Transfer</option>
                    <option value="E-Wallet" <?=($edit_data&&$edit_data['metode_bayar']=='E-Wallet')?'selected':''?>>E-Wallet</option>
                </select>
            </div>
            <div class="sp-fg">
                <label class="sp-flbl"><span class="sp-flbl-ico">&#127991;</span>Status <span class="sp-req">*</span></label>
                <select name="status" class="sp-fs" required>
                    <option value="">Pilih...</option>
                    <?php foreach([['Lunas','✅'],['Belum Lunas','⏳'],['Cicilan PPDB','📝'],['Lunas PPDB','✅'],['Lunas SPP','✅'],['Cicilan LKS','📝'],['Lunas LKS','✅']] as [$sv,$si]): ?>
                    <option value="<?=$sv?>" <?=($edit_data?$edit_data['status']==$sv:$sv=='Lunas')?'selected':''?>><?=$si?> <?=$sv?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>

        <!-- Tanggal -->
        <div class="sp-fg">
            <label class="sp-flbl"><span class="sp-flbl-ico">&#9200;</span>Tanggal Bayar <span class="sp-req">*</span></label>
            <input type="datetime-local" name="tanggal_bayar" class="sp-fi"
                value="<?=$edit_data?date('Y-m-d\TH:i',strtotime($edit_data['tanggal_bayar'])):date('Y-m-d\TH:i')?>" required>
        </div>

        <div class="sp-srule"><span class="sp-srtxt">⊹ Lampiran &amp; Keterangan</span></div>

        <!-- Bukti Bayar -->
        <div class="sp-fg">
            <label class="sp-flbl"><span class="sp-flbl-ico">&#129534;</span>Bukti Pembayaran <span class="sp-opt">Opsional</span></label>
            <?php if($edit_data&&!empty($edit_data['bukti_bayar'])): ?>
            <div class="sp-efchip">
                <?php $exte=strtolower(pathinfo($edit_data['bukti_bayar'],PATHINFO_EXTENSION));
                if(in_array($exte,['jpg','jpeg','png','gif'])): ?>
                <img src="uploads/bukti_bayar/<?=htmlspecialchars($edit_data['bukti_bayar'])?>" class="sp-efimg" alt="Bukti">
                <?php else: ?><div class="sp-efpdf">📄</div><?php endif; ?>
                <div>
                    <div style="font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--sp-txl);margin-bottom:3px">Berkas Saat Ini</div>
                    <a href="uploads/bukti_bayar/<?=htmlspecialchars($edit_data['bukti_bayar'])?>" target="_blank" class="sp-efl">↗ <?=htmlspecialchars($edit_data['bukti_bayar'])?></a>
                </div>
            </div>
            <p style="font-size:.7rem;color:var(--sp-txl);margin:.5rem 0">Unggah berkas baru untuk mengganti:</p>
            <?php endif; ?>
            <label for="sp-binp">
                <div class="sp-dzone" id="sp-dz">
                    <div class="sp-dzico">🧾</div>
                    <div>
                        <div class="sp-dzt1">Klik atau seret berkas ke sini</div>
                        <div class="sp-dzt2">JPG · PNG · PDF — Maks. 5 MB</div>
                    </div>
                </div>
            </label>
            <input type="file" id="sp-binp" name="bukti_bayar" accept="image/*,application/pdf">
            <div class="sp-fprev" id="sp-fprev">
                <div id="sp-pthumb"></div>
                <div class="sp-pinfo"><div class="sp-pnm" id="sp-pnm"></div><div class="sp-psz" id="sp-psz"></div></div>
                <button type="button" class="sp-prm" onclick="spRmFile()">✕</button>
            </div>
        </div>

        <!-- Catatan -->
        <div class="sp-fg">
            <label class="sp-flbl"><span class="sp-flbl-ico">&#128221;</span>Catatan <span class="sp-opt">Opsional</span></label>
            <textarea name="catatan" class="sp-fta" placeholder="Tambahkan catatan tambahan..."><?=$edit_data?htmlspecialchars($edit_data['catatan']):''?></textarea>
        </div>

        <button type="submit" name="<?=$edit_data?'update':'bayar'?>" class="sp-bsub <?=$edit_data?'sp-ebtn':''?>">
            <?=$edit_data?'⊹ Simpan Perubahan':'⊹ Proses Pembayaran'?>
        </button>
    </form>
    </div>
</div>

<!-- ═══ TABLE ═══ -->
<div class="sp-tcard">
    <div class="sp-thead">
        <div class="sp-thl">
            <span class="sp-thico">📜</span>
            <span class="sp-thtit">Riwayat Pembayaran</span>
            <span class="sp-thbdg"><?=$jml?> Transaksi</span>
        </div>
        <div class="sp-swrap">
            <span class="sp-sico">🔍</span>
            <input type="text" class="sp-sin" id="sp-si" placeholder="Cari nama siswa..." onkeyup="spSearch()">
        </div>
    </div>

    <div class="sp-tscroll">
        <?php if($jml>0): ?>
        <table id="sp-tbl">
            <colgroup>
                <col class="c-no"><col class="c-nama"><col class="c-periode">
                <col class="c-nominal"><col class="c-tgl">
                <col class="c-metode"><col class="c-status">
                <col class="c-catatan"><col class="c-bukti"><col class="c-aksi">
            </colgroup>
            <thead>
            <tr>
                <th><span class="sp-th-inner">No</span></th>
                <th><span class="sp-th-inner"><span class="sp-th-ico">&#128100;</span>Siswa</span></th>
                <th><span class="sp-th-inner"><span class="sp-th-ico">&#128198;</span>Periode</span></th>
                <th><span class="sp-th-inner"><span class="sp-th-ico">&#128176;</span>Nominal</span></th>
                <th><span class="sp-th-inner"><span class="sp-th-ico">&#128197;</span>Tanggal</span></th>
                <th><span class="sp-th-inner"><span class="sp-th-ico">&#128179;</span>Metode</span></th>
                <th><span class="sp-th-inner"><span class="sp-th-ico">&#127991;</span>Status</span></th>
                <th><span class="sp-th-inner"><span class="sp-th-ico">&#128221;</span>Catatan</span></th>
                <th><span class="sp-th-inner"><span class="sp-th-ico">&#129534;</span>Bukti</span></th>
                <th><span class="sp-th-inner"><span class="sp-th-ico">&#9881;</span>Aksi</span></th>
            </tr>
            </thead>
            <?php $no=1; while($d=mysqli_fetch_assoc($data)):
                $met=$d['metode_bayar'];
                $mc=$met=='Tunai'?'sp-bmt':($met=='Transfer'?'sp-bmtr':($met=='E-Wallet'?'sp-bmew':'sp-bmot'));
                $mi=$met=='Tunai'?'&#128181;':($met=='Transfer'?'&#127970;':($met=='E-Wallet'?'&#128241;':'&#128179;'));
                $sv=$d['status'];
                $sc=(strpos($sv,'Lunas')!==false&&strpos($sv,'Belum')===false)?'sp-bsl':(strpos($sv,'Belum')!==false?'sp-bsb':(strpos($sv,'Cicilan')!==false?'sp-bsc':'sp-bso'));
            ?>
            <tr>
                <td class="sp-tdno"><?=$no++?></td>
                <td class="sp-tdnm"><?=htmlspecialchars($d['nama'])?></td>
                <td>
                    <div class="sp-period">
                        <span class="sp-bbln"><span class="sp-bico">&#128198;</span><?=htmlspecialchars($d['bulan'])?></span>
                        <span class="sp-bthn"><span class="sp-bico">&#128197;</span><?=htmlspecialchars($d['tahun'])?></span>
                    </div>
                </td>
                <td class="sp-tdnom">Rp&nbsp;<?=number_format($d['nominal'],0,',','.')?></td>
                <td class="sp-tddt"><?=date('d/m/Y',strtotime($d['tanggal_bayar']))?><small>&#9200; <?=date('H:i',strtotime($d['tanggal_bayar']))?> WIB</small></td>
                <td><span class="sp-bmet <?=$mc?>"><span class="sp-bico"><?=$mi?></span><?=htmlspecialchars($met)?></span></td>
                <td><span class="sp-bsts <?=$sc?>"><span class="sp-sdot"></span><?=htmlspecialchars($sv)?></span></td>
                <td><?=!empty($d['catatan'])?'<span class="sp-tdcat">'.htmlspecialchars($d['catatan']).'</span>':'<span class="sp-nocat">&#8212;</span>'?></td>
                <td>
                    <?php if(!empty($d['bukti_bayar'])):
                        $ext=strtolower(pathinfo($d['bukti_bayar'],PATHINFO_EXTENSION));
                        $fp='uploads/bukti_bayar/'.$d['bukti_bayar'];
                        $sn=htmlspecialchars($d['nama'],ENT_QUOTES);
                        $sp2=htmlspecialchars($fp,ENT_QUOTES);
                        if(in_array($ext,['jpg','jpeg','png','gif'])): ?>
                        <button class="sp-bbkt" onclick="spShowBukti('<?=$sp2?>','img','<?=$sn?>')"><span class="sp-bico">&#128444;</span>Lihat</button>
                        <?php elseif($ext=='pdf'): ?>
                        <button class="sp-bbkt" onclick="spShowBukti('<?=$sp2?>','pdf','<?=$sn?>')"><span class="sp-bico">&#128196;</span>Lihat</button>
                        <?php else: ?>
                        <a href="<?=$sp2?>" target="_blank" class="sp-bbkt"><span class="sp-bico">&#128206;</span>Unduh</a>
                        <?php endif;
                    else: ?><span class="sp-nobkt">&#8212; Tidak ada</span><?php endif; ?>
                </td>
                <td>
                    <div class="sp-acts">
                        <a href="spp.php?edit=<?=(int)$d['id']?>" class="sp-ab sp-abe" title="Sunting">&#9998;</a>
                        <button class="sp-ab sp-abd" title="Hapus" onclick="spDelete(<?=(int)$d['id']?>)">&#10005;</button>
                    </div>
                </td>
            </tr>
            <?php endwhile; ?>
            </tbody>
        </table>
        <?php else: ?>
        <div class="sp-empty">
            <div class="sp-empic">📜</div>
            <div class="sp-emtit">Belum Ada Transaksi</div>
            <div class="sp-emsub">Mulai catat pembayaran menggunakan formulir di sebelah kiri.</div>
        </div>
        <?php endif; ?>
    </div>
</div>

</div><!-- /sp-grid -->

<!-- FOOTER -->
<div class="sp-foot">
    <div class="sp-fline"></div>
    <div class="sp-ftxt">
        <span class="sp-fgem">◆</span>Sistem Pembayaran SPP<span class="sp-fgem">◆</span><?=date('Y')?><span class="sp-fgem">◆</span>
    </div>
</div>

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

<!-- MODAL -->
<div class="sp-mbg" id="sp-modal" onclick="spCloseModal(event)">
    <div class="sp-mbox">
        <div class="sp-mhd">
            <div class="sp-mtit" id="sp-mtit">🧾 Bukti Pembayaran</div>
            <button class="sp-mcls" onclick="document.getElementById('sp-modal').classList.remove('open')">✕</button>
        </div>
        <div id="sp-mbdy"></div>
    </div>
</div>

<script>
/* ── Search ── */
function spSearch(){
    const q=document.getElementById('sp-si').value.toLowerCase();
    document.querySelectorAll('#sp-tbl tbody tr').forEach(r=>{
        r.style.display=r.textContent.toLowerCase().includes(q)?'':'none';
    });
}
/* ── Delete ── */
function spDelete(id){
    if(confirm('Hapus data pembayaran ini?\nBerkas bukti juga akan terhapus secara permanen.'))
        location.href='spp.php?delete='+id;
}
/* ── File upload preview ── */
const spFi=document.getElementById('sp-binp');
const spDz=document.getElementById('sp-dz');
const spFp=document.getElementById('sp-fprev');
const spPt=document.getElementById('sp-pthumb');
const spPn=document.getElementById('sp-pnm');
const spPs=document.getElementById('sp-psz');
spFi?.addEventListener('change',()=>{ if(spFi.files[0]) spShowPrev(spFi.files[0]); });
spDz?.addEventListener('dragover',e=>{ e.preventDefault(); spDz.classList.add('over'); });
spDz?.addEventListener('dragleave',()=>spDz.classList.remove('over'));
spDz?.addEventListener('drop',e=>{
    e.preventDefault(); spDz.classList.remove('over');
    if(e.dataTransfer.files[0]){ spFi.files=e.dataTransfer.files; spShowPrev(e.dataTransfer.files[0]); }
});
function spShowPrev(f){
    if(f.size>5*1024*1024){ alert('Berkas maksimal 5MB!'); spFi.value=''; return; }
    spPn.textContent=f.name; spPs.textContent=spFmtSz(f.size); spPt.innerHTML='';
    if(f.type.startsWith('image/')){
        const img=document.createElement('img'); img.className='sp-pthumb';
        const r=new FileReader(); r.onload=e=>img.src=e.target.result; r.readAsDataURL(f);
        spPt.appendChild(img);
    } else {
        const d=document.createElement('div'); d.className='sp-ppdf'; d.textContent='📄'; spPt.appendChild(d);
    }
    spFp.classList.add('show');
}
function spRmFile(){ spFi.value=''; spFp.classList.remove('show'); spPt.innerHTML=''; }
function spFmtSz(b){ return b<1024?b+' B':b<1048576?(b/1024).toFixed(1)+' KB':(b/1048576).toFixed(1)+' MB'; }
/* ── Auto-hide alerts ── */
document.querySelectorAll('.sp-alert').forEach(a=>{
    setTimeout(()=>{
        a.style.transition='opacity .6s,transform .6s';
        a.style.opacity='0'; a.style.transform='translateY(-10px)';
        setTimeout(()=>a.remove(),600);
    },5500);
});
/* ── Modal ── */
function spShowBukti(path,type,name){
    document.getElementById('sp-mtit').textContent='🧾 Bukti — '+name;
    const b=document.getElementById('sp-mbdy');
    b.innerHTML=type==='img'
        ?`<img src="${path}" class="sp-mimg" alt="Bukti"><div style="text-align:center"><a href="${path}" download target="_blank" class="sp-mdl sp-dlg">↓ Unduh Gambar</a></div>`
        :`<iframe src="${path}" class="sp-mpdf" title="PDF"></iframe><div style="text-align:center"><a href="${path}" download target="_blank" class="sp-mdl sp-dlr">↓ Unduh PDF</a></div>`;
    document.getElementById('sp-modal').classList.add('open');
}
function spCloseModal(e){ if(e.target===document.getElementById('sp-modal')) document.getElementById('sp-modal').classList.remove('open'); }
document.addEventListener('keydown',e=>{ if(e.key==='Escape') document.getElementById('sp-modal').classList.remove('open'); });
/* ── Nominal digits only ── */
document.querySelector('input[name="nominal"]')?.addEventListener('input',function(){ this.value=this.value.replace(/[^\d]/g,''); });
/* ── Scroll to form on edit ── */
<?php if($edit_data): ?>
window.addEventListener('load',()=>document.querySelector('.sp-fcard')?.scrollIntoView({behavior:'smooth',block:'start'}));
<?php endif; ?>
</script>