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

// ── Filter ──
$tahun = isset($_GET['tahun']) ? intval($_GET['tahun']) : date('Y');
$bulan = isset($_GET['bulan']) ? intval($_GET['bulan']) : 0;
$jenis = isset($_GET['jenis']) ? $_GET['jenis'] : '';

$where = "YEAR(tanggal)='$tahun'";
if($bulan > 0) $where .= " AND MONTH(tanggal)='$bulan'";
if($jenis)     $where .= " AND jenis='".mysqli_real_escape_string($conn,$jenis)."'";

// ── Statistik ──
$total  = mysqli_fetch_array(mysqli_query($conn,"SELECT COUNT(*) t FROM surat WHERE $where"))['t'];
$masuk  = mysqli_fetch_array(mysqli_query($conn,"SELECT COUNT(*) t FROM surat WHERE $where AND jenis='Masuk'"))['t'];
$keluar = mysqli_fetch_array(mysqli_query($conn,"SELECT COUNT(*) t FROM surat WHERE $where AND jenis='Keluar'"))['t'];

// ── Prioritas ──
$prio_q = mysqli_query($conn,"SELECT prioritas,COUNT(*) c FROM surat WHERE $where GROUP BY prioritas");
$prio   = [];
while($r = mysqli_fetch_array($prio_q)) $prio[$r['prioritas']] = $r['c'];

// ── Bulanan ──
$monthly_q = mysqli_query($conn,"SELECT MONTH(tanggal) m,COUNT(*) t,SUM(CASE WHEN jenis='Masuk' THEN 1 ELSE 0 END) masuk,SUM(CASE WHEN jenis='Keluar' THEN 1 ELSE 0 END) keluar FROM surat WHERE YEAR(tanggal)='$tahun' GROUP BY MONTH(tanggal) ORDER BY MONTH(tanggal)");
$monthly = [];
while($r = mysqli_fetch_array($monthly_q)) $monthly[$r['m']] = $r;

// ── Top pengirim / penerima ──
$top_from = mysqli_query($conn,"SELECT keterangan,COUNT(*) c FROM surat WHERE $where AND jenis='Masuk' GROUP BY keterangan ORDER BY c DESC LIMIT 5");
$top_to   = mysqli_query($conn,"SELECT keterangan,COUNT(*) c FROM surat WHERE $where AND jenis='Keluar' GROUP BY keterangan ORDER BY c DESC LIMIT 5");

// ── Surat terbaru ──
$recent = mysqli_query($conn,"SELECT * FROM surat WHERE $where ORDER BY tanggal DESC,created_at DESC LIMIT 15");

$bnFull = [
    1=>'Januari',2=>'Februari',3=>'Maret',4=>'April',
    5=>'Mei',6=>'Juni',7=>'Juli',8=>'Agustus',
    9=>'September',10=>'Oktober',11=>'November',12=>'Desember'
];
?>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Source+Sans+3:wght@300;400;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">

<style>
/* ════════════════════════════════════════════════════════
   TOKEN LOKAL — prefix ls-
   Navbar sidebar: 272px (≥1025px) | 240px (769–1024px) | 0px (≤768px)
   Topbar mobile : 60px (≤768px)
════════════════════════════════════════════════════════ */
:root{
    --ls-ink:     #1C1917;
    --ls-ink2:    #44403C;
    --ls-ink3:    #78716C;
    --ls-parch:   #FAF7F2;
    --ls-cream:   #F5F0E8;
    --ls-cd:      #EDE7D9;
    --ls-cdd:     #DDD5C5;
    --ls-gold:    #B45309;
    --ls-gold-l:  #D97706;
    --ls-gold-xl: #F59E0B;
    --ls-gold-p:  #FEF3C7;
    --ls-ruby:    #9F1239;
    --ls-sapp:    #1E3A5F;
    --ls-sapp-p:  #DBEAFE;
    --ls-coral:   #C2410C;
    --ls-coral-p: #FFEDD5;
    --ls-sh-sm:   0 1px 3px rgba(0,0,0,.08);
    --ls-sh-md:   0 4px 16px rgba(0,0,0,.10);
    --ls-sh-lg:   0 12px 40px rgba(0,0,0,.14);
}

/* ── Background parchment pada .main ── */
.main{
    background: var(--ls-parch) !important;
    color: var(--ls-ink);
    overflow-x: hidden;
}
.main::after{
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
.main .wrap{
    position: relative;
    z-index: 1;
    font-family: 'Source Sans 3', sans-serif;
}

@keyframes lsFadeUp{
    from{ opacity:0; transform:translateY(18px) }
    to  { opacity:1; transform:translateY(0) }
}

/* ══════════════════════════════════════════
   TOPBAR HALAMAN
══════════════════════════════════════════ */
.ls-topbar{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ls-cdd);
    flex-wrap: wrap;
}
.ls-topbar-info{ flex: 1; min-width: 0; }
.ls-topbar-title{
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ls-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ls-topbar-sub{ font-size: .72rem; color: var(--ls-ink3); margin-top: 2px; }

.ls-topbar-btns{
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-shrink: 0;
}
.ls-btn-back{
    display: flex; align-items: center; gap: .4rem;
    padding: .5rem 1.25rem;
    background: #fff;
    color: var(--ls-ink2);
    border: 1.5px solid var(--ls-cdd);
    border-radius: 50px;
    font-size: .78rem; font-weight: 700;
    font-family: 'Source Sans 3', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: all .22s;
    white-space: nowrap;
}
.ls-btn-back:hover{
    background: var(--ls-cream);
    border-color: var(--ls-gold);
    color: var(--ls-gold);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(180,83,9,.15);
}
.ls-btn-print{
    display: flex; align-items: center; gap: .4rem;
    padding: .5rem 1.25rem;
    background: var(--ls-ink); color: #fff;
    border: none; border-radius: 50px;
    font-size: .78rem; font-weight: 700;
    font-family: 'Source Sans 3', sans-serif;
    cursor: pointer;
    transition: all .22s;
    white-space: nowrap;
}
.ls-btn-print:hover{ background: #292524; transform: translateY(-1px); }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.ls-hero{
    background: linear-gradient(135deg, var(--ls-ink) 0%, #292524 60%, var(--ls-gold) 100%);
    border-radius: 20px;
    padding: 2.25rem 2.5rem;
    margin-bottom: 1.75rem;
    position: relative; overflow: hidden;
    border: 1px solid rgba(180,83,9,.25);
    animation: lsFadeUp .5s ease-out;
    box-shadow: var(--ls-sh-lg);
}
/* shimmer deco */
.ls-hero::before{
    content:'';
    position:absolute; top:-60px; right:-60px;
    width:280px; height:280px; border-radius:50%;
    background: radial-gradient(circle, rgba(245,158,11,.15) 0%, transparent 70%);
    pointer-events:none;
}
.ls-hero-con{
    position: relative; z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.ls-hero-left{ flex: 1; min-width: 0; }
.ls-hero-title{
    font-family: 'Playfair Display', serif;
    font-size: 1.875rem; font-weight: 700;
    color: #fff; line-height: 1.15;
    margin-bottom: .4rem;
}
.ls-hero-sub{
    font-size: .875rem;
    color: rgba(255,255,255,.55);
    margin-bottom: .875rem;
}
.ls-hero-stats{ display: flex; gap: .875rem; flex-wrap: wrap; }
.ls-hs{
    text-align: center;
    padding: .875rem 1.25rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    min-width: 80px;
}
.ls-hs-n{
    font-family: 'DM Mono', monospace;
    font-size: 1.75rem; font-weight: 500;
    color: var(--ls-gold-xl);
    line-height: 1; margin-bottom: .2rem;
}
.ls-hs-l{
    font-size: .58rem; font-weight: 600;
    color: rgba(255,255,255,.4);
    text-transform: uppercase; letter-spacing: .08em;
}

/* ══════════════════════════════════════════
   FILTER CARD
══════════════════════════════════════════ */
.ls-filter{
    background: var(--ls-cream);
    border-radius: 18px;
    border: 1px solid var(--ls-cdd);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--ls-sh-sm);
    animation: lsFadeUp .4s .1s ease-out backwards;
}
.ls-filter-title{
    font-family: 'Playfair Display', serif;
    font-size: 1rem; font-weight: 700;
    color: var(--ls-ink);
    margin-bottom: 1.125rem;
    display: flex; align-items: center; gap: .5rem;
}
.ls-filter-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: end;
}
.ls-fg{ display: flex; flex-direction: column; gap: .4rem; }
.ls-flbl{
    font-size: .72rem; font-weight: 700;
    color: var(--ls-ink2);
    text-transform: uppercase; letter-spacing: .06em;
}
.ls-fsel{
    padding: .7rem .9rem;
    background: #fff;
    border: 1px solid var(--ls-cdd);
    border-radius: 10px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: .875rem; font-weight: 600;
    color: var(--ls-ink);
    cursor: pointer; transition: all .2s;
    width: 100%;
}
.ls-fsel:focus{ border-color: var(--ls-gold); outline: none; box-shadow: 0 0 0 3px rgba(180,83,9,.1); }
.ls-btn-filter{
    padding: .72rem 1.5rem;
    background: var(--ls-gold); color: #fff;
    border: none; border-radius: 10px;
    font-size: .875rem; font-weight: 700;
    font-family: 'Source Sans 3', sans-serif;
    cursor: pointer; transition: all .22s;
    width: 100%;
}
.ls-btn-filter:hover{ background: var(--ls-gold-l); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(180,83,9,.3); }

/* ══════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════ */
.ls-stat-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.125rem;
    margin-bottom: 1.75rem;
}
.ls-sc{
    background: var(--ls-cream);
    border-radius: 18px;
    border: 1px solid var(--ls-cdd);
    padding: 1.375rem 1.5rem;
    position: relative; overflow: hidden;
    transition: all .22s;
    cursor: default;
    animation: lsFadeUp .4s ease-out backwards;
    box-shadow: var(--ls-sh-sm);
}
.ls-sc:hover{ transform: translateY(-5px); box-shadow: var(--ls-sh-md); }
.ls-sc::before{
    content:''; position:absolute; top:0; left:0; right:0;
    height: 3px; border-radius: 18px 18px 0 0;
}
.ls-sc-all::before{ background: linear-gradient(90deg, var(--ls-ink), var(--ls-ink2)); }
.ls-sc-in::before { background: linear-gradient(90deg, var(--ls-sapp), #1D4ED8); }
.ls-sc-out::before{ background: linear-gradient(90deg, var(--ls-coral), var(--ls-gold-xl)); }
.ls-sc-top{
    display: flex; align-items: flex-start;
    justify-content: space-between; margin-bottom: .75rem;
}
.ls-sc-ico{
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.375rem;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
    flex-shrink: 0;
}
.ls-sc:hover .ls-sc-ico{ transform: scale(1.15) rotate(-6deg); }
.ls-sc-all .ls-sc-ico{ background: var(--ls-cd); }
.ls-sc-in  .ls-sc-ico{ background: var(--ls-sapp-p); }
.ls-sc-out .ls-sc-ico{ background: var(--ls-coral-p); }
.ls-sc-lbl{
    font-size: .67rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--ls-ink3); margin-bottom: .3rem;
}
.ls-sc-n{
    font-family: 'Playfair Display', serif;
    font-size: 2.25rem; font-weight: 700; line-height: 1;
    margin-bottom: .25rem;
}
.ls-sc-all .ls-sc-n{ color: var(--ls-ink); }
.ls-sc-in  .ls-sc-n{ color: var(--ls-sapp); }
.ls-sc-out .ls-sc-n{ color: var(--ls-coral); }
.ls-sc-sub{ font-size: .72rem; font-weight: 500; color: var(--ls-ink3); }

/* ══════════════════════════════════════════
   CONTENT CARDS
══════════════════════════════════════════ */
.ls-card{
    background: var(--ls-cream);
    border-radius: 18px;
    border: 1px solid var(--ls-cdd);
    box-shadow: var(--ls-sh-sm);
    margin-bottom: 1.75rem; overflow: hidden;
    animation: lsFadeUp .4s ease-out backwards;
}
.ls-chd{
    padding: 1.125rem 1.5rem;
    background: var(--ls-ink);
    display: flex; align-items: center;
    justify-content: space-between;
}
.ls-chd-title{
    font-family: 'Playfair Display', serif;
    font-size: 1rem; font-weight: 700;
    color: #fff;
    display: flex; align-items: center; gap: .625rem;
}
.ls-cbd{ padding: 1.5rem; }
.ls-cbd-p0{ padding: 0; }

/* ══════════════════════════════════════════
   PROGRESS BARS
══════════════════════════════════════════ */
.ls-pbar{ margin-bottom: 1rem; }
.ls-pbar:last-child{ margin-bottom: 0; }
.ls-plbl{
    display: flex; justify-content: space-between;
    margin-bottom: .4rem; gap: .5rem; flex-wrap: wrap;
}
.ls-plname{ font-size: .84rem; font-weight: 700; color: var(--ls-ink); }
.ls-plval { font-family: 'DM Mono', monospace; font-size: .78rem; color: var(--ls-ink3); flex-shrink: 0; }
.ls-ptrack{
    height: 26px; background: var(--ls-cd);
    border-radius: 13px; overflow: hidden;
}
.ls-pfill{
    height: 100%; border-radius: 13px;
    transition: width 1s cubic-bezier(.16,1,.3,1);
    display: flex; align-items: center;
    justify-content: flex-end;
    padding: 0 .75rem;
    font-size: .72rem; font-weight: 700; color: #fff;
}
.ls-pf-in  { background: linear-gradient(90deg, var(--ls-sapp), #1D4ED8); }
.ls-pf-out { background: linear-gradient(90deg, var(--ls-coral), var(--ls-gold-xl)); }
.ls-pf-prio{ background: linear-gradient(90deg, var(--ls-ruby), #E11D48); }

/* ══════════════════════════════════════════
   2-COL LAYOUT
══════════════════════════════════════════ */
.ls-2col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.125rem;
    margin-bottom: 1.75rem;
}

/* ══════════════════════════════════════════
   BULANAN ROWS
══════════════════════════════════════════ */
.ls-mon-row{
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 1rem;
    align-items: center;
    padding: .75rem .625rem;
    border-radius: 10px;
    margin-bottom: .375rem;
    transition: background .15s;
}
.ls-mon-row:hover{ background: rgba(255,255,255,.5); }
.ls-mon-label{
    font-size: .82rem; font-weight: 700;
    color: var(--ls-ink2); line-height: 1.2;
}
.ls-pbar-sm{ margin-bottom: .5rem; }
.ls-pbar-sm:last-child{ margin-bottom: 0; }
.ls-ptrack-sm{
    height: 18px; background: var(--ls-cd);
    border-radius: 9px; overflow: hidden;
}
.ls-pfill-sm{
    height: 100%; border-radius: 9px;
    transition: width 1s cubic-bezier(.16,1,.3,1);
    display: flex; align-items: center;
    justify-content: flex-end;
    padding: 0 .5rem;
    font-size: .65rem; font-weight: 700; color: #fff;
}

/* ══════════════════════════════════════════
   TABLE
══════════════════════════════════════════ */
.ls-tscr{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ls-tscr::-webkit-scrollbar{ height: 5px; }
.ls-tscr::-webkit-scrollbar-thumb{ background: var(--ls-cdd); border-radius: 5px; }
.ls-tbl{ width: 100%; border-collapse: collapse; min-width: 640px; }
.ls-tbl thead tr{ background: rgba(28,25,23,.04); border-bottom: 2px solid var(--ls-cdd); }
.ls-tbl th{
    padding: .875rem 1rem; text-align: left;
    font-size: .68rem; font-weight: 900;
    color: var(--ls-ink2);
    text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.ls-tbl tbody tr{ border-bottom: 1px solid var(--ls-cdd); transition: background .15s; }
.ls-tbl tbody tr:hover{ background: rgba(255,255,255,.65); }
.ls-tbl tbody tr:last-child{ border-bottom: none; }
.ls-tbl td{
    padding: .875rem 1rem;
    font-size: .875rem; font-weight: 500;
    color: var(--ls-ink); vertical-align: middle;
}
.ls-mono{ font-family: 'DM Mono', monospace; font-size: .82rem; }
.ls-bdg{
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .75rem; border-radius: 50px;
    font-size: .72rem; font-weight: 700;
    border: 1px solid transparent;
}
.ls-b-in { background: var(--ls-sapp-p);  color: var(--ls-sapp);  border-color: rgba(30,58,95,.2); }
.ls-b-out{ background: var(--ls-coral-p); color: var(--ls-coral); border-color: rgba(194,65,12,.2); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — SIDEBAR AWARE
   Navbar sidebar:
     ≥1025px     → 272px fixed kiri
     769–1024px  → 240px fixed kiri
     ≤768px      → sidebar hilang, topbar 60px di atas

   Strategi breakpoint konten:
     ≥1440px          → filter 4 kolom, stat 3 kolom, 2col aktif
     1200–1439px      → filter 4 kolom, stat 3 kolom (sidebar 272px)
     1025–1199px      → filter 2 kolom (konten sempit), stat 3 kolom
     769–1024px       → filter 2 kolom, stat 2 kolom, 2col stack jadi 1
     481–768px        → filter 1 kolom, stat 2 kolom, topbar kompak
     ≤480px           → stat 1 kolom, semua stack
══════════════════════════════════════════════════════════ */

/* ── Desktop sedang: sidebar 272px, konten 753–927px ── */
@media(min-width:1025px) and (max-width:1199px){
    .ls-filter-grid { grid-template-columns: 1fr 1fr; }
    .ls-stat-grid   { grid-template-columns: repeat(3,1fr); }
    .ls-hero        { padding: 1.875rem 2rem; }
    .ls-hero-title  { font-size: 1.625rem; }
    .ls-mon-row     { grid-template-columns: 72px 1fr; gap: .75rem; }
}

/* ── Tablet: sidebar 240px, konten 529–784px ── */
@media(min-width:769px) and (max-width:1024px){
    .ls-filter-grid  { grid-template-columns: 1fr 1fr; }
    .ls-stat-grid    { grid-template-columns: 1fr 1fr; }
    .ls-2col         { grid-template-columns: 1fr; }
    .ls-hero         { padding: 1.75rem; }
    .ls-hero-title   { font-size: 1.5rem; }
    .ls-hero-con     { flex-direction: column; align-items: flex-start; }
    .ls-hero-stats   { width: 100%; }
    .ls-hs           { flex: 1; }
    .ls-mon-row      { grid-template-columns: 68px 1fr; gap: .625rem; }
    .ls-sc           { padding: 1.125rem 1.25rem; }
    .ls-sc-n         { font-size: 1.875rem; }
    .ls-cbd          { padding: 1.25rem; }
}

/* ── Mobile (sidebar hilang, topbar 60px di atas) ── */
@media(max-width:768px){
    /* Topbar */
    .ls-topbar       { padding: 1rem 0; margin-bottom: 1.25rem; gap: .75rem; }
    .ls-topbar-title { font-size: 1.1rem; }
    .ls-topbar-btns  { gap: .5rem; }
    .ls-btn-back,
    .ls-btn-print    { padding: .45rem .9rem; font-size: .74rem; }

    /* Hero */
    .ls-hero         { padding: 1.5rem; border-radius: 16px; margin-bottom: 1.25rem; }
    .ls-hero-title   { font-size: 1.375rem; }
    .ls-hero-con     { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .ls-hero-stats   { width: 100%; gap: .5rem; }
    .ls-hs           { flex: 1; padding: .75rem .625rem; min-width: 0; }
    .ls-hs-n         { font-size: 1.5rem; }

    /* Filter */
    .ls-filter       { padding: 1.125rem; border-radius: 14px; margin-bottom: 1.25rem; }
    .ls-filter-grid  { grid-template-columns: 1fr 1fr; gap: .75rem; }

    /* Stat cards */
    .ls-stat-grid    { grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
    .ls-sc           { padding: 1rem 1.125rem; border-radius: 14px; }
    .ls-sc-n         { font-size: 1.75rem; }
    .ls-sc-ico       { width: 38px; height: 38px; font-size: 1.2rem; }

    /* 2-col stack */
    .ls-2col         { grid-template-columns: 1fr; gap: 0; }

    /* Bulanan */
    .ls-mon-row      { grid-template-columns: 62px 1fr; gap: .5rem; padding: .625rem .375rem; }
    .ls-mon-label    { font-size: .75rem; }

    /* Cards */
    .ls-card         { border-radius: 14px; margin-bottom: 1.25rem; }
    .ls-cbd          { padding: 1.125rem; }
    .ls-chd          { padding: 1rem 1.25rem; }
    .ls-chd-title    { font-size: .9rem; }
}

/* ── Mobile kecil ── */
@media(max-width:480px){
    /* Topbar */
    .ls-topbar-btns  { width: 100%; }
    .ls-btn-back,
    .ls-btn-print    { flex: 1; justify-content: center; padding: .55rem .75rem; }

    /* Hero */
    .ls-hero         { padding: 1.25rem 1.125rem; }
    .ls-hero-title   { font-size: 1.2rem; }
    .ls-hero-sub     { font-size: .8rem; }
    .ls-hs-n         { font-size: 1.375rem; }

    /* Filter - 1 kolom */
    .ls-filter-grid  { grid-template-columns: 1fr; gap: .75rem; }

    /* Stat cards - 1 kolom */
    .ls-stat-grid    { grid-template-columns: 1fr; gap: .75rem; }
    .ls-sc           { display: flex; align-items: center; padding: 1rem 1.125rem; }
    .ls-sc-top       { flex: 1; margin-bottom: 0; align-items: center; }
    .ls-sc-sub       { margin-left: auto; padding-left: 1rem; flex-shrink: 0; }
    .ls-sc-n         { font-size: 1.75rem; }

    /* Bulan label lebih kecil */
    .ls-mon-row      { grid-template-columns: 54px 1fr; gap: .375rem; }
    .ls-mon-label    { font-size: .7rem; }

    /* Card content */
    .ls-cbd          { padding: 1rem; }
    .ls-plname       { font-size: .8rem; }
}

/* ── Print ── */
@media print{
    .ls-topbar, .ls-filter{ display: none !important; }
    .main{ background: #fff !important; }
    .ls-hero{ box-shadow: none !important; }
    .ls-card{ box-shadow: none !important; break-inside: avoid; }
    .ls-2col{ grid-template-columns: 1fr 1fr !important; }
}
</style>

<div class="main">
<div class="wrap">

    <!-- ══ TOPBAR ══ -->
    <div class="ls-topbar">
        <div class="ls-topbar-info">
            <div class="ls-topbar-title">📊 Laporan Surat</div>
            <div class="ls-topbar-sub">Statistik &amp; Analisis Arsip Surat</div>
        </div>
        <div class="ls-topbar-btns">
            <a href="surat.php" class="ls-btn-back">← Kembali</a>
            <button class="ls-btn-print" onclick="window.print()">🖨️ Cetak</button>
        </div>
    </div>

    <!-- ══ HERO ══ -->
    <div class="ls-hero">
        <div class="ls-hero-con">
            <div class="ls-hero-left">
                <div class="ls-hero-title">Laporan Arsip Surat</div>
                <div class="ls-hero-sub">
                    Periode:
                    <?= $bulan > 0 ? $bnFull[$bulan].' ' : 'Semua Bulan — ' ?>
                    <?= $tahun ?>
                    <?= $jenis ? " · $jenis" : '' ?>
                </div>
            </div>
            <div class="ls-hero-stats">
                <div class="ls-hs">
                    <div class="ls-hs-n"><?= $total ?></div>
                    <div class="ls-hs-l">Total</div>
                </div>
                <div class="ls-hs">
                    <div class="ls-hs-n"><?= $masuk ?></div>
                    <div class="ls-hs-l">Masuk</div>
                </div>
                <div class="ls-hs">
                    <div class="ls-hs-n"><?= $keluar ?></div>
                    <div class="ls-hs-l">Keluar</div>
                </div>
            </div>
        </div>
    </div>

    <!-- ══ FILTER ══ -->
    <form method="GET" action="laporan_surat.php">
    <div class="ls-filter">
        <div class="ls-filter-title">🔍 Filter Laporan</div>
        <div class="ls-filter-grid">
            <div class="ls-fg">
                <label class="ls-flbl">Tahun</label>
                <select name="tahun" class="ls-fsel">
                    <?php for($y=date('Y');$y>=date('Y')-5;$y--): ?>
                    <option value="<?= $y ?>" <?= $y==$tahun?'selected':'' ?>><?= $y ?></option>
                    <?php endfor; ?>
                </select>
            </div>
            <div class="ls-fg">
                <label class="ls-flbl">Bulan</label>
                <select name="bulan" class="ls-fsel">
                    <option value="0">Semua Bulan</option>
                    <?php for($m=1;$m<=12;$m++): ?>
                    <option value="<?= $m ?>" <?= $m==$bulan?'selected':'' ?>><?= $bnFull[$m] ?></option>
                    <?php endfor; ?>
                </select>
            </div>
            <div class="ls-fg">
                <label class="ls-flbl">Jenis</label>
                <select name="jenis" class="ls-fsel">
                    <option value="">Semua Jenis</option>
                    <option value="Masuk"  <?= $jenis=='Masuk' ?'selected':'' ?>>Surat Masuk</option>
                    <option value="Keluar" <?= $jenis=='Keluar'?'selected':'' ?>>Surat Keluar</option>
                </select>
            </div>
            <div class="ls-fg">
                <label class="ls-flbl">&nbsp;</label>
                <button type="submit" class="ls-btn-filter">🔍 Terapkan Filter</button>
            </div>
        </div>
    </div>
    </form>

    <!-- ══ STAT CARDS ══ -->
    <div class="ls-stat-grid">
        <div class="ls-sc ls-sc-all" style="animation-delay:.05s">
            <div class="ls-sc-top">
                <div>
                    <div class="ls-sc-lbl">Total Surat</div>
                    <div class="ls-sc-n"><?= $total ?></div>
                </div>
                <div class="ls-sc-ico">📊</div>
            </div>
            <div class="ls-sc-sub">Periode dipilih</div>
        </div>
        <div class="ls-sc ls-sc-in" style="animation-delay:.1s">
            <div class="ls-sc-top">
                <div>
                    <div class="ls-sc-lbl">Surat Masuk</div>
                    <div class="ls-sc-n"><?= $masuk ?></div>
                </div>
                <div class="ls-sc-ico">📥</div>
            </div>
            <div class="ls-sc-sub"><?= $total>0?round($masuk/$total*100):0 ?>% dari total</div>
        </div>
        <div class="ls-sc ls-sc-out" style="animation-delay:.15s">
            <div class="ls-sc-top">
                <div>
                    <div class="ls-sc-lbl">Surat Keluar</div>
                    <div class="ls-sc-n"><?= $keluar ?></div>
                </div>
                <div class="ls-sc-ico">📤</div>
            </div>
            <div class="ls-sc-sub"><?= $total>0?round($keluar/$total*100):0 ?>% dari total</div>
        </div>
    </div>

    <!-- ══ PRIORITAS ══ -->
    <?php if(count($prio) > 0): ?>
    <div class="ls-card" style="animation-delay:.2s">
        <div class="ls-chd">
            <div class="ls-chd-title"><span>🎯</span> Berdasarkan Prioritas</div>
        </div>
        <div class="ls-cbd">
            <?php foreach($prio as $p => $c):
                $pct = $total > 0 ? round($c / $total * 100) : 0;
            ?>
            <div class="ls-pbar">
                <div class="ls-plbl">
                    <span class="ls-plname"><?= htmlspecialchars($p) ?></span>
                    <span class="ls-plval"><?= $c ?> surat (<?= $pct ?>%)</span>
                </div>
                <div class="ls-ptrack">
                    <div class="ls-pfill ls-pf-prio" data-w="<?= max($pct,8) ?>" style="width:6%"><?= $c ?></div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    <?php endif; ?>

    <!-- ══ STATISTIK BULANAN ══ -->
    <?php if(count($monthly) > 0):
        $mx = 1;
        foreach($monthly as $m) if($m['t'] > $mx) $mx = $m['t'];
    ?>
    <div class="ls-card" style="animation-delay:.25s">
        <div class="ls-chd">
            <div class="ls-chd-title"><span>📈</span> Statistik Per Bulan (<?= $tahun ?>)</div>
        </div>
        <div class="ls-cbd">
            <?php for($i=1; $i<=12; $i++):
                $d  = isset($monthly[$i]) ? $monthly[$i] : ['t'=>0,'masuk'=>0,'keluar'=>0];
                $wm = $mx > 0 ? round($d['masuk']  / $mx * 100) : 0;
                $wk = $mx > 0 ? round($d['keluar'] / $mx * 100) : 0;
            ?>
            <div class="ls-mon-row">
                <span class="ls-mon-label"><?= $bnFull[$i] ?></span>
                <div>
                    <div class="ls-pbar-sm">
                        <div class="ls-plbl" style="margin-bottom:.3rem">
                            <span style="font-size:.75rem;font-weight:700;color:var(--ls-ink)">📥 Masuk</span>
                            <span class="ls-plval"><?= $d['masuk'] ?></span>
                        </div>
                        <div class="ls-ptrack-sm">
                            <div class="ls-pfill-sm ls-pf-in" data-w="<?= max($wm,6) ?>" style="width:6%"><?= $d['masuk'] > 0 ? $d['masuk'] : '' ?></div>
                        </div>
                    </div>
                    <div class="ls-pbar-sm">
                        <div class="ls-plbl" style="margin-bottom:.3rem">
                            <span style="font-size:.75rem;font-weight:700;color:var(--ls-ink)">📤 Keluar</span>
                            <span class="ls-plval"><?= $d['keluar'] ?></span>
                        </div>
                        <div class="ls-ptrack-sm">
                            <div class="ls-pfill-sm ls-pf-out" data-w="<?= max($wk,6) ?>" style="width:6%"><?= $d['keluar'] > 0 ? $d['keluar'] : '' ?></div>
                        </div>
                    </div>
                </div>
            </div>
            <?php endfor; ?>
        </div>
    </div>
    <?php endif; ?>

    <!-- ══ TOP PENGIRIM / PENERIMA ══ -->
    <div class="ls-2col">
        <?php if(mysqli_num_rows($top_from) > 0):
            $mx_f = mysqli_fetch_array($top_from, MYSQLI_NUM)[1];
            mysqli_data_seek($top_from, 0);
        ?>
        <div class="ls-card" style="animation-delay:.3s">
            <div class="ls-chd">
                <div class="ls-chd-title"><span>📥</span> Top Pengirim Surat Masuk</div>
            </div>
            <div class="ls-cbd">
                <?php while($r = mysqli_fetch_array($top_from)):
                    $pct = $mx_f > 0 ? round($r['c'] / $mx_f * 100) : 0;
                ?>
                <div class="ls-pbar">
                    <div class="ls-plbl">
                        <span class="ls-plname"><?= htmlspecialchars($r['keterangan']) ?></span>
                        <span class="ls-plval"><?= $r['c'] ?></span>
                    </div>
                    <div class="ls-ptrack" style="height:20px">
                        <div class="ls-pfill ls-pf-in" data-w="<?= max($pct,8) ?>" style="width:6%"><?= $r['c'] ?></div>
                    </div>
                </div>
                <?php endwhile; ?>
            </div>
        </div>
        <?php endif; ?>

        <?php if(mysqli_num_rows($top_to) > 0):
            $mx_t = mysqli_fetch_array($top_to, MYSQLI_NUM)[1];
            mysqli_data_seek($top_to, 0);
        ?>
        <div class="ls-card" style="animation-delay:.35s">
            <div class="ls-chd">
                <div class="ls-chd-title"><span>📤</span> Top Penerima Surat Keluar</div>
            </div>
            <div class="ls-cbd">
                <?php while($r = mysqli_fetch_array($top_to)):
                    $pct = $mx_t > 0 ? round($r['c'] / $mx_t * 100) : 0;
                ?>
                <div class="ls-pbar">
                    <div class="ls-plbl">
                        <span class="ls-plname"><?= htmlspecialchars($r['keterangan']) ?></span>
                        <span class="ls-plval"><?= $r['c'] ?></span>
                    </div>
                    <div class="ls-ptrack" style="height:20px">
                        <div class="ls-pfill ls-pf-out" data-w="<?= max($pct,8) ?>" style="width:6%"><?= $r['c'] ?></div>
                    </div>
                </div>
                <?php endwhile; ?>
            </div>
        </div>
        <?php endif; ?>
    </div>

    <!-- ══ TABEL TERBARU ══ -->
    <?php if(mysqli_num_rows($recent) > 0): ?>
    <div class="ls-card" style="animation-delay:.4s">
        <div class="ls-chd">
            <div class="ls-chd-title"><span>📋</span> Daftar Surat Terbaru</div>
        </div>
        <div class="ls-cbd-p0">
            <div class="ls-tscr">
                <table class="ls-tbl">
                    <thead>
                        <tr>
                            <th>Tanggal</th>
                            <th>Nomor Surat</th>
                            <th>Jenis</th>
                            <th>Perihal</th>
                            <th>Dari / Kepada</th>
                            <th>Prioritas</th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php while($l = mysqli_fetch_array($recent)): ?>
                    <tr>
                        <td class="ls-mono"><?= date('d/m/Y', strtotime($l['tanggal'])) ?></td>
                        <td class="ls-mono" style="font-weight:600"><?= htmlspecialchars($l['nomor_surat']) ?></td>
                        <td>
                            <span class="ls-bdg ls-b-<?= $l['jenis']=='Masuk'?'in':'out' ?>">
                                <?= $l['jenis']=='Masuk' ? '📥' : '📤' ?> <?= $l['jenis'] ?>
                            </span>
                        </td>
                        <td style="max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                            <?= htmlspecialchars($l['perihal']) ?>
                        </td>
                        <td style="max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                            <?= htmlspecialchars($l['keterangan']) ?>
                        </td>
                        <td>
                            <span style="font-size:.75rem;font-weight:600;color:var(--ls-ink3)">
                                <?= htmlspecialchars($l['prioritas'] ?? 'Biasa') ?>
                            </span>
                        </td>
                    </tr>
                    <?php endwhile; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <?php endif; ?>

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

<script>
window.addEventListener('load', () => {
    /* Animasi progress bar */
    document.querySelectorAll('.ls-pfill[data-w], .ls-pfill-sm[data-w]').forEach(bar => {
        const target = bar.dataset.w + '%';
        setTimeout(() => { bar.style.width = target; }, 150);
    });
});
</script>