<?php
/* ── Bootstrap — HARUS di paling atas sebelum output apapun ── */
$page_title  = "Dashboard Arsip Surat — MA As-Syafi'iyah 02";
$active_menu = 'surat';
$loader_text = 'Memuat Arsip Surat';
include 'navbar.php';   // handles session, guard, HTML <head>, sidebar, loader, overlay, JS toggle

/* ── Koneksi & data ── */
include 'koneksi.php';
date_default_timezone_set('Asia/Jakarta');

$hour = (int)date('H');
if     ($hour>=5  && $hour<11) { $greeting='Selamat Pagi';   $greet_icon='🌅'; }
elseif ($hour>=11 && $hour<15) { $greeting='Selamat Siang';  $greet_icon='☀️'; }
elseif ($hour>=15 && $hour<18) { $greeting='Selamat Sore';   $greet_icon='🌤️'; }
else                           { $greeting='Selamat Malam';  $greet_icon='🌙'; }

$all_letters   = mysqli_query($conn,"SELECT * FROM surat ORDER BY tanggal DESC,created_at DESC LIMIT 20");
$total         = mysqli_fetch_array(mysqli_query($conn,"SELECT COUNT(*) as t FROM surat"))['t'];
$total_masuk   = mysqli_fetch_array(mysqli_query($conn,"SELECT COUNT(*) as t FROM surat WHERE jenis='Masuk'"))['t'];
$total_keluar  = mysqli_fetch_array(mysqli_query($conn,"SELECT COUNT(*) as t FROM surat WHERE jenis='Keluar'"))['t'];
$total_penting = mysqli_fetch_array(mysqli_query($conn,"SELECT COUNT(*) as t FROM surat WHERE prioritas IN ('Penting','Sangat Penting')"))['t'];
$total_bulan   = mysqli_fetch_array(mysqli_query($conn,"SELECT COUNT(*) as t FROM surat WHERE MONTH(tanggal)=MONTH(CURRENT_DATE()) AND YEAR(tanggal)=YEAR(CURRENT_DATE())"))['t'];
$total_hari    = mysqli_fetch_array(mysqli_query($conn,"SELECT COUNT(*) as t FROM surat WHERE DATE(tanggal)=CURRENT_DATE()"))['t'];
$res_bulan     = mysqli_query($conn,"SELECT MONTH(tanggal) as bulan,COUNT(*) as total,SUM(CASE WHEN jenis='Masuk' THEN 1 ELSE 0 END) as masuk,SUM(CASE WHEN jenis='Keluar' THEN 1 ELSE 0 END) as keluar FROM surat WHERE YEAR(tanggal)=YEAR(CURRENT_DATE()) GROUP BY MONTH(tanggal) ORDER BY MONTH(tanggal)");
$monthly = [];
while ($r = mysqli_fetch_array($res_bulan)) $monthly[$r['bulan']] = $r;
?>

<!-- ══════════════════════════════════════════
     STYLE — hanya style khusus halaman ini
     (token warna, loader, sidebar sudah ada di navbar.php)
══════════════════════════════════════════ -->
<style>
/* ── Token warna tambahan (accent) ── */
:root {
    --sapphire:      #4F8FFF;
    --sapphire-l:    #A0C4FF;
    --sapphire-glow: rgba(79,143,255,.18);
    --aurora:        #00E5CC;
    --aurora-l:      #7FFFF4;
    --aurora-glow:   rgba(0,229,204,.18);
    --violet:        #B66EFF;
    --violet-l:      #D4A8FF;
    --violet-glow:   rgba(182,110,255,.2);
    --rose:          #FF6B9D;
    --rose-l:        #FFB3D1;
    --rose-glow:     rgba(255,107,157,.2);
    --coral:         #FF8C5A;
    --coral-l:       #FFB899;
    --coral-glow:    rgba(255,140,90,.18);
    --emerald:       #2ECC71;
    --emerald-l:     #7FEBA1;
    --emerald-glow:  rgba(46,204,113,.18);
    --pearl:         #F8F6FF;
    --mist:          #B8B4CC;
    --g-glow:        rgba(201,168,76,.22);
    --r:     12px;
    --r-lg:  18px;
    --r-xl:  24px;
    --ease:  cubic-bezier(.4,0,.2,1);
    --spring:cubic-bezier(.34,1.4,.64,1);
}

/* ── Override body background ke dark ── */
body { background:var(--ob) !important; color:var(--pearl) !important; overflow-x:hidden; }

/* ── Aurora animated background layer ── */
body::before {
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(ellipse 800px 500px at 10%  0%,  rgba(182,110,255,.06) 0%,transparent 60%),
        radial-gradient(ellipse 600px 400px at 90% 10%,  rgba(0,229,204,.05)   0%,transparent 60%),
        radial-gradient(ellipse 500px 350px at 70% 85%,  rgba(201,168,76,.05)  0%,transparent 60%),
        radial-gradient(ellipse 450px 320px at  5% 90%,  rgba(255,107,157,.04) 0%,transparent 60%);
    animation:auroraShift 18s ease-in-out infinite alternate;
}
/* ── Dot-grid texture ── */
body::after {
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(201,168,76,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,.025) 1px, transparent 1px);
    background-size:32px 32px;
}

/* ── .main dari navbar.php — override warna ── */
.main { background:var(--ob); color:var(--pearl); }

/* ── .wrap dari navbar.php — override max-width & padding ── */
.wrap { max-width:1440px; padding:1.875rem 2rem; }

@keyframes auroraShift { 0%{opacity:1;transform:scale(1)}  100%{opacity:.8;transform:scale(1.04)} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse   { 0%,100%{opacity:1;transform:scale(1)}  50%{opacity:.5;transform:scale(.85)} }
@keyframes float   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-7px)} }
@keyframes shimmer { 0%{background-position:0% 50%}  100%{background-position:200% 50%} }

/* ════════════════════════════════════════
   DESKTOP TOPBAR (di dalam .main)
════════════════════════════════════════ */
.ds-topbar {
    position:sticky; top:0; z-index:50;
    height:68px;
    background:rgba(8,12,20,.90);
    backdrop-filter:blur(22px) saturate(170%);
    border-bottom:1px solid rgba(201,168,76,.12);
    display:flex; align-items:center;
    padding:0 2rem; gap:1rem;
}
.ds-topbar-left  { flex:1; }
.ds-topbar-title { font-family:'DM Serif Display',serif; font-size:1.2rem; color:var(--g-fg); letter-spacing:.03em; }
.ds-topbar-sub   { font-size:.68rem; color:rgba(255,255,255,.3); margin-top:2px; letter-spacing:.04em; }
.ds-topbar-right { display:flex; align-items:center; gap:.75rem; }
.ds-date {
    font-size:.72rem; font-weight:500; color:var(--mist);
    padding:.36rem .95rem;
    background:rgba(255,255,255,.04); border:1px solid rgba(201,168,76,.15);
    border-radius:50px; white-space:nowrap;
    font-family:'DM Mono',monospace;
}

/* ── COMBOBOX NAV ── */
.nav-combo-wrap { position:relative; }
.nav-combo {
    display:flex; align-items:center; gap:.5rem;
    padding:.44rem 1.05rem;
    background:rgba(201,168,76,.08);
    border:1.5px solid rgba(201,168,76,.25);
    border-radius:50px; cursor:pointer; transition:all .22s;
    font-family:'Outfit',sans-serif; user-select:none; min-width:158px;
}
.nav-combo:hover { border-color:rgba(201,168,76,.45); background:rgba(201,168,76,.13); }
.nav-combo.open  { border-color:var(--g); box-shadow:0 0 0 3px rgba(201,168,76,.12); }
.nav-combo-icon  { font-size:.95rem; flex-shrink:0; }
.nav-combo-label { font-size:.8rem; font-weight:700; color:var(--g-l); flex:1; letter-spacing:.02em; }
.nav-combo-arrow { font-size:.68rem; color:rgba(255,255,255,.35); transition:transform .22s; flex-shrink:0; }
.nav-combo.open .nav-combo-arrow { transform:rotate(180deg); }

.nav-dropdown {
    position:absolute; top:calc(100% + 8px); right:0;
    min-width:224px;
    background:var(--ob-m);
    border:1px solid rgba(201,168,76,.2);
    border-radius:var(--r-lg);
    box-shadow:0 16px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04);
    overflow:hidden;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .22s, visibility .22s, transform .22s var(--spring);
    z-index:300;
}
.nav-dropdown.show { opacity:1; visibility:visible; transform:translateY(0); }

.nd-section { font-size:.56rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.25); padding:.7rem 1rem .28rem; }
.nd-item {
    display:flex; align-items:center; gap:.72rem;
    padding:.62rem 1rem; color:rgba(255,255,255,.5);
    text-decoration:none; font-size:.84rem; font-weight:500;
    transition:all .18s; border-left:2px solid transparent;
}
.nd-item:hover     { color:var(--g-l); background:rgba(201,168,76,.07); border-left-color:var(--g); }
.nd-item.nd-active { color:var(--g-l); background:rgba(201,168,76,.09); border-left-color:var(--g); font-weight:700; }
.nd-item-ico { font-size:.95rem; width:20px; text-align:center; flex-shrink:0; }
.nd-badge {
    margin-left:auto; font-size:.58rem; font-weight:700;
    padding:.07rem .5rem; border-radius:50px;
    background:rgba(79,143,255,.15); color:var(--sapphire-l);
    border:1px solid rgba(79,143,255,.25); font-family:'DM Mono',monospace;
}
.nd-badge-hot { background:rgba(255,107,157,.15); color:var(--rose-l); border-color:rgba(255,107,157,.3); }
.nd-divider   { height:1px; background:rgba(255,255,255,.06); margin:.22rem 0; }
.nd-logout {
    display:flex; align-items:center; gap:.72rem;
    padding:.62rem 1rem; color:rgba(255,100,100,.75);
    font-size:.84rem; font-weight:600; text-decoration:none; cursor:pointer;
    transition:all .18s; border-top:1px solid rgba(255,255,255,.06);
}
.nd-logout:hover { color:#FF6B6B; background:rgba(155,28,28,.12); }

/* ── CTA Gold Button ── */
.btn-new {
    position:relative; overflow:hidden;
    display:flex; align-items:center; gap:.4rem;
    padding:.44rem 1.2rem; border-radius:50px;
    font-size:.78rem; font-weight:800; cursor:pointer;
    text-decoration:none; font-family:'Outfit',sans-serif; letter-spacing:.05em;
    color:var(--ob);
    background:linear-gradient(135deg,var(--g-fg),var(--g-l),var(--g),var(--g-l));
    background-size:200% auto; animation:shimmer 4s linear infinite;
    border:none;
    box-shadow:0 4px 18px var(--g-glow), 0 0 0 1px rgba(201,168,76,.3);
    transition:transform .2s var(--spring), box-shadow .2s;
}
.btn-new:hover { transform:translateY(-2px); box-shadow:0 8px 28px var(--g-glow), 0 0 0 1px rgba(201,168,76,.4); }

/* ── Mobile sticky nav bar (under .nb-top dari navbar.php) ── */
.ds-mobile-bar {
    display:none; align-items:center; gap:.625rem;
    padding:.65rem 1rem;
    background:rgba(8,12,20,.92);
    border-bottom:1px solid rgba(201,168,76,.12);
    position:sticky; top:60px; z-index:40;
    backdrop-filter:blur(16px);
}
.ds-mobile-title { font-family:'DM Serif Display',serif; font-size:.88rem; color:var(--g-fg); flex:1; }
.ds-mobile-wrap  { position:relative; }
.ds-mobile-combo {
    display:flex; align-items:center; gap:.4rem;
    padding:.36rem .85rem;
    background:rgba(201,168,76,.08); border:1.5px solid rgba(201,168,76,.22);
    border-radius:50px; cursor:pointer;
    font-family:'Outfit',sans-serif; font-size:.76rem; font-weight:700; color:var(--g-l);
    transition:all .2s;
}
.ds-mobile-combo:hover { border-color:rgba(201,168,76,.42); }
.ds-mobile-combo.open  { border-color:var(--g); box-shadow:0 0 0 3px rgba(201,168,76,.1); }

/* ════════════════════════════════════════
   HERO BANNER
════════════════════════════════════════ */
.hero-banner {
    position:relative; overflow:hidden;
    border-radius:var(--r-xl); padding:2.25rem 2.5rem;
    margin-bottom:1.875rem;
    border:1px solid rgba(201,168,76,.15);
    background:linear-gradient(135deg,rgba(14,21,32,.98),rgba(8,12,20,.96));
    animation:fadeUp .5s var(--ease);
}
.hero-orbs { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-orbs span { position:absolute; border-radius:50%; filter:blur(70px); opacity:.45; }
.hero-orbs span:nth-child(1){width:480px;height:380px;top:-110px;right:-60px;background:radial-gradient(circle,rgba(182,110,255,.3),transparent 70%);animation:float 8s ease-in-out infinite;}
.hero-orbs span:nth-child(2){width:320px;height:280px;bottom:-50px;left:3%;background:radial-gradient(circle,rgba(0,229,204,.22),transparent 70%);animation:float 11s ease-in-out infinite reverse;}
.hero-orbs span:nth-child(3){width:280px;height:230px;top:25%;right:22%;background:radial-gradient(circle,rgba(201,168,76,.16),transparent 70%);animation:float 14s ease-in-out infinite;}
.hero-banner::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--violet) 15%,var(--aurora) 40%,var(--g) 65%,var(--rose) 85%,transparent);opacity:.5;}

.hero-con      { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.875rem; }
.hero-eyebrow  { display:flex; align-items:center; gap:.6rem; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; margin-bottom:.7rem; color:var(--aurora-l); }
.hero-pulse    { width:7px; height:7px; border-radius:50%; background:var(--aurora); box-shadow:0 0 10px var(--aurora); animation:pulse 1.8s ease-in-out infinite; }
.hero-title    { font-family:'DM Serif Display',serif; font-size:2.375rem; color:var(--pearl); line-height:1.1; margin-bottom:.6rem; letter-spacing:.01em; }
.hero-title em { font-style:italic; background:linear-gradient(90deg,var(--g-l),var(--rose-l),var(--violet-l),var(--aurora-l),var(--g-l)); background-size:300% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:shimmer 4s linear infinite; }
.hero-sub      { font-size:.875rem; color:rgba(255,255,255,.55); margin-bottom:1.1rem; line-height:1.7; max-width:460px; }
.hero-chips    { display:flex; flex-wrap:wrap; gap:.45rem; }
.hero-chip     { display:flex; align-items:center; gap:.4rem; padding:.3rem .85rem; border-radius:50px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); font-size:.73rem; font-weight:600; color:rgba(255,255,255,.6); transition:all .2s; }
.hero-chip:hover { border-color:rgba(201,168,76,.35); color:var(--g-l); background:rgba(201,168,76,.06); }

.hero-stats    { display:flex; gap:.75rem; flex-shrink:0; flex-wrap:wrap; }
.hs { text-align:center; min-width:82px; padding:.95rem 1.1rem; border-radius:var(--r-lg); position:relative; overflow:hidden; transition:transform .25s var(--spring),box-shadow .25s; cursor:default; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); }
.hs::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:var(--r-lg) var(--r-lg) 0 0;}
.hs:nth-child(1)::after{background:linear-gradient(90deg,var(--violet),var(--aurora));}
.hs:nth-child(2)::after{background:linear-gradient(90deg,var(--sapphire),var(--violet));}
.hs:nth-child(3)::after{background:linear-gradient(90deg,var(--coral),var(--rose));}
.hs:nth-child(4)::after{background:linear-gradient(90deg,var(--g),var(--aurora));}
.hs:hover { transform:translateY(-5px); box-shadow:0 10px 32px rgba(0,0,0,.4); }
.hs-icon { font-size:1.2rem; margin-bottom:.28rem; display:block; }
.hs-n    { font-family:'DM Mono',monospace; font-size:1.75rem; font-weight:500; line-height:1; margin-bottom:.18rem; position:relative; z-index:1; }
.hs:nth-child(1) .hs-n{color:var(--violet-l);} .hs:nth-child(2) .hs-n{color:var(--sapphire-l);} .hs:nth-child(3) .hs-n{color:var(--coral-l);} .hs:nth-child(4) .hs-n{color:var(--g-l);}
.hs-l    { font-size:.55rem; font-weight:700; color:rgba(255,255,255,.28); text-transform:uppercase; letter-spacing:.1em; }

/* ── QUICK NAV ── */
.qnav { display:grid; grid-template-columns:1fr 1fr; gap:1.125rem; margin-bottom:1.875rem; }
.qnav-card { display:flex; align-items:center; gap:1.25rem; padding:1.5rem 1.75rem; border-radius:var(--r-lg); text-decoration:none; position:relative; overflow:hidden; transition:transform .3s var(--spring),box-shadow .3s; border:1px solid transparent; animation:fadeUp .4s var(--ease) backwards; }
.qnav-card:nth-child(1){animation-delay:.06s;background:linear-gradient(135deg,rgba(79,143,255,.1),rgba(182,110,255,.06));border-color:rgba(79,143,255,.2);}
.qnav-card:nth-child(2){animation-delay:.12s;background:linear-gradient(135deg,rgba(255,140,90,.1),rgba(201,168,76,.06));border-color:rgba(255,140,90,.2);}
.qnav-card::before{content:'';position:absolute;top:-50%;left:-100%;width:80%;height:200%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.04),transparent);transform:skewX(-15deg);transition:left .6s;}
.qnav-card:hover::before{left:150%;}
.qnav-card::after{content:'›';position:absolute;right:1.375rem;top:50%;transform:translateY(-50%);font-size:1.4rem;opacity:.3;transition:opacity .2s,transform .2s,right .2s;}
.qnav-card:nth-child(1)::after{color:var(--sapphire-l);} .qnav-card:nth-child(2)::after{color:var(--coral-l);}
.qnav-card:hover::after{opacity:.8;transform:translateY(-50%) translateX(5px);right:1.125rem;}
.qnav-card:hover{transform:translateY(-5px);}
.qnav-card:nth-child(1):hover{border-color:rgba(79,143,255,.35);box-shadow:0 14px 42px rgba(79,143,255,.1);}
.qnav-card:nth-child(2):hover{border-color:rgba(255,140,90,.35);box-shadow:0 14px 42px rgba(255,140,90,.1);}
.qnav-ico{width:54px;height:54px;flex-shrink:0;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.75rem;transition:transform .35s var(--spring);border:1px solid rgba(255,255,255,.07);}
.qnav-card:hover .qnav-ico{transform:scale(1.15) rotate(-8deg);}
.qnav-card:nth-child(1) .qnav-ico{background:rgba(79,143,255,.14);} .qnav-card:nth-child(2) .qnav-ico{background:rgba(255,140,90,.14);}
.qnav-tag{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px;}
.qnav-card:nth-child(1) .qnav-tag{color:var(--sapphire-l);} .qnav-card:nth-child(2) .qnav-tag{color:var(--coral-l);}
.qnav-title{font-size:1.05rem;font-weight:800;color:var(--pearl);}
.qnav-count{font-size:.72rem;color:rgba(255,255,255,.35);font-family:'DM Mono',monospace;margin-top:3px;}

/* ── SECTION HEADER ── */
.sec-hd    { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; }
.sec-icon  { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; background:rgba(255,255,255,.04); border:1px solid rgba(201,168,76,.15); }
.sec-title { font-family:'DM Serif Display',serif; font-size:1.15rem; color:var(--pearl); letter-spacing:.03em; }
.sec-line  { flex:1; height:1px; background:linear-gradient(90deg,rgba(201,168,76,.2),transparent); }

/* ── STAT GRID ── */
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.125rem; margin-bottom:1.875rem; }
.sc { background:var(--ob-l); border-radius:var(--r-lg); border:1px solid rgba(201,168,76,.1); padding:1.25rem 1.375rem; position:relative; overflow:hidden; transition:transform .3s var(--spring),box-shadow .3s,border-color .3s; cursor:default; animation:fadeUp .4s var(--ease) backwards; }
.sc:nth-child(1){animation-delay:.04s} .sc:nth-child(2){animation-delay:.08s} .sc:nth-child(3){animation-delay:.12s}
.sc:nth-child(4){animation-delay:.16s} .sc:nth-child(5){animation-delay:.20s} .sc:nth-child(6){animation-delay:.24s}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:var(--r-lg) var(--r-lg) 0 0;}
.sc::after {content:'';position:absolute;inset:0;border-radius:var(--r-lg);opacity:0;transition:opacity .3s;pointer-events:none;}
.sc:hover  {transform:translateY(-6px);} .sc:hover::after{opacity:1;} .sc:hover .sc-ico{transform:scale(1.18) rotate(-7deg);}
.sc-all::before{background:linear-gradient(90deg,#6366F1,#8B5CF6);}     .sc-all::after{background:radial-gradient(ellipse at 85% 15%,rgba(99,102,241,.08),transparent 65%);}   .sc-all:hover{box-shadow:0 14px 42px rgba(99,102,241,.15);}
.sc-in::before{background:linear-gradient(90deg,var(--sapphire),var(--aurora));}  .sc-in::after{background:radial-gradient(ellipse at 85% 15%,rgba(79,143,255,.08),transparent 65%);}   .sc-in:hover{box-shadow:0 14px 42px rgba(79,143,255,.15);}
.sc-out::before{background:linear-gradient(90deg,var(--coral),var(--g));}         .sc-out::after{background:radial-gradient(ellipse at 85% 15%,rgba(255,140,90,.08),transparent 65%);}  .sc-out:hover{box-shadow:0 14px 42px rgba(255,140,90,.12);}
.sc-hot::before{background:linear-gradient(90deg,var(--rose),#E879F9);}            .sc-hot::after{background:radial-gradient(ellipse at 85% 15%,rgba(255,107,157,.1),transparent 65%);} .sc-hot:hover{box-shadow:0 14px 42px rgba(255,107,157,.15);}
.sc-month::before{background:linear-gradient(90deg,var(--emerald),var(--aurora));} .sc-month::after{background:radial-gradient(ellipse at 85% 15%,rgba(46,204,113,.08),transparent 65%);} .sc-month:hover{box-shadow:0 14px 42px rgba(46,204,113,.12);}
.sc-today::before{background:linear-gradient(90deg,var(--g),var(--coral));}        .sc-today::after{background:radial-gradient(ellipse at 85% 15%,rgba(201,168,76,.08),transparent 65%);} .sc-today:hover{box-shadow:0 14px 42px rgba(201,168,76,.12);}
.sc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.8rem;position:relative;z-index:1;}
.sc-ico{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.375rem;flex-shrink:0;transition:transform .35s var(--spring);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);}
.sc-lbl{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:.28rem;position:relative;z-index:1;}
.sc-n  {font-family:'DM Mono',monospace;font-size:2.125rem;font-weight:500;line-height:1;margin-bottom:.18rem;position:relative;z-index:1;}
.sc-all .sc-n{color:#A5B4FC;} .sc-in .sc-n{color:var(--sapphire-l);} .sc-out .sc-n{color:var(--coral-l);}
.sc-hot .sc-n{color:var(--rose-l);}  .sc-month .sc-n{color:var(--emerald-l);}  .sc-today .sc-n{color:var(--g-l);}
.sc-sub{font-size:.7rem;color:rgba(255,255,255,.3);position:relative;z-index:1;}

/* ── CHART ── */
.chart-card    {background:var(--ob-l);border-radius:var(--r-lg);border:1px solid rgba(201,168,76,.1);margin-bottom:1.875rem;overflow:hidden;animation:fadeUp .4s .22s var(--ease) backwards;}
.chart-hd      {padding:1.1rem 1.5rem;background:linear-gradient(135deg,var(--ob-ll),var(--ob-m));border-bottom:1px solid rgba(201,168,76,.1);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.chart-hd-title{font-family:'DM Serif Display',serif;font-size:1rem;color:var(--pearl);display:flex;align-items:center;gap:.6rem;letter-spacing:.03em;}
.chart-legend  {display:flex;gap:.7rem;}
.cl-item{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.1);border-radius:50px;padding:.28rem .8rem;font-size:.7rem;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.04em;}
.cl-dot {width:8px;height:8px;border-radius:50%;}
.cl-dot.in {background:var(--sapphire);box-shadow:0 0 7px var(--sapphire);}
.cl-dot.out{background:var(--coral);   box-shadow:0 0 7px var(--coral);}
.chart-body{padding:1.1rem 1.5rem;}
.mrow{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:.875rem;padding:.52rem .75rem;border-radius:var(--r);border:1px solid transparent;transition:all .2s var(--ease);}
.mrow:hover{background:rgba(255,255,255,.03);border-color:rgba(201,168,76,.1);transform:translateX(4px);}
.mrow-label{font-size:.73rem;font-weight:700;color:rgba(255,255,255,.32);display:flex;align-items:center;gap:.35rem;}
.mrow-label.current{color:var(--aurora-l);}
.mrow-bars{display:flex;flex-direction:column;gap:3px;}
.bar-row  {display:flex;align-items:center;gap:.7rem;}
.bar-tag  {font-size:.61rem;font-weight:700;color:rgba(255,255,255,.28);width:56px;flex-shrink:0;display:flex;align-items:center;gap:.3rem;}
.bar-track{flex:1;background:rgba(255,255,255,.05);border-radius:5px;height:18px;overflow:hidden;}
.bar-fill {height:100%;border-radius:5px;display:flex;align-items:center;justify-content:flex-end;padding-right:.45rem;font-size:.61rem;font-weight:700;color:rgba(255,255,255,.85);min-width:28px;transition:width 1s var(--spring);font-family:'DM Mono',monospace;}
.bar-fill.in {background:linear-gradient(90deg,rgba(79,143,255,.35),var(--sapphire));}
.bar-fill.out{background:linear-gradient(90deg,rgba(255,140,90,.35),var(--coral));}

/* ── FILTER BAR ── */
.filter-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.8rem 1.125rem;background:var(--ob-l);border-radius:var(--r-lg);border:1px solid rgba(201,168,76,.1);margin-bottom:1.375rem;}
.filter-lbl{font-size:.75rem;font-weight:700;color:rgba(255,255,255,.28);white-space:nowrap;letter-spacing:.04em;}
.fbtn      {display:flex;align-items:center;gap:.35rem;padding:.36rem .95rem;border-radius:50px;border:1px solid rgba(201,168,76,.1);background:rgba(255,255,255,.03);color:rgba(255,255,255,.32);font-size:.75rem;font-weight:700;cursor:pointer;transition:all .2s var(--ease);font-family:'Outfit',sans-serif;}
.fbtn:hover  {border-color:rgba(201,168,76,.2);color:rgba(255,255,255,.65);}
.fbtn.active {background:linear-gradient(135deg,var(--violet),var(--sapphire));color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(182,110,255,.28);}

/* ── TIMELINE ── */
.tl-wrap{display:flex;flex-direction:column;gap:.875rem;}
.tl-item{background:var(--ob-l);border-radius:var(--r-lg);border:1px solid rgba(201,168,76,.1);padding:1.5rem;position:relative;overflow:hidden;cursor:pointer;transition:all .25s var(--ease);animation:fadeUp .4s var(--ease) backwards;}
.tl-item:hover{transform:translateX(7px);border-color:rgba(255,255,255,.12);}
.tl-item::before{content:'';position:absolute;left:0;top:0;width:4px;height:100%;border-radius:4px 0 0 4px;transition:width .2s;}
.tl-item:hover::before{width:5px;}
.tl-item.tl-masuk::before {background:linear-gradient(180deg,var(--sapphire),var(--aurora));box-shadow:2px 0 10px var(--sapphire-glow);}
.tl-item.tl-keluar::before{background:linear-gradient(180deg,var(--coral),var(--g));       box-shadow:2px 0 10px var(--coral-glow);}
.tl-item.tl-masuk:hover  {background:linear-gradient(135deg,rgba(79,143,255,.04),var(--ob-l) 60%);box-shadow:0 10px 36px rgba(79,143,255,.1);}
.tl-item.tl-keluar:hover {background:linear-gradient(135deg,rgba(255,140,90,.04),var(--ob-l) 60%);box-shadow:0 10px 36px rgba(255,140,90,.1);}
.tl-item::after{content:attr(data-icon);position:absolute;right:1.375rem;top:50%;transform:translateY(-50%);font-size:3.25rem;opacity:.04;pointer-events:none;transition:opacity .3s,transform .3s;}
.tl-item:hover::after{opacity:.07;transform:translateY(-50%) scale(1.1);}
.tl-head{display:flex;align-items:flex-start;gap:.875rem;margin-bottom:.95rem;}
.tl-icon{width:46px;height:46px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:transform .35s var(--spring);border:1px solid rgba(255,255,255,.07);}
.tl-item:hover .tl-icon{transform:scale(1.12) rotate(-6deg);}
.tl-item.tl-masuk .tl-icon {background:rgba(79,143,255,.12);}
.tl-item.tl-keluar .tl-icon{background:rgba(255,140,90,.12);}
.tl-meta {flex:1;min-width:0;}
.tl-date {font-size:.7rem;font-weight:600;color:rgba(255,255,255,.32);display:flex;align-items:center;gap:.45rem;margin-bottom:.26rem;font-family:'DM Mono',monospace;}
.tl-chip {display:inline-flex;align-items:center;gap:.25rem;padding:.07rem .58rem;border-radius:50px;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-family:'Outfit',sans-serif;}
.chip-masuk {background:rgba(79,143,255,.14);color:var(--sapphire-l);border:1px solid rgba(79,143,255,.22);}
.chip-keluar{background:rgba(255,140,90,.14);color:var(--coral-l);   border:1px solid rgba(255,140,90,.22);}
.tl-nomor  {font-family:'DM Mono',monospace;font-size:.8rem;font-weight:500;color:rgba(255,255,255,.32);}
.tl-subject{font-size:.925rem;font-weight:700;color:var(--pearl);line-height:1.45;margin-bottom:.55rem;}
.tl-from   {font-size:.8rem;color:rgba(255,255,255,.32);display:flex;align-items:center;gap:.4rem;}
.tl-from strong{color:rgba(255,255,255,.58);font-weight:700;}
.tl-foot   {display:flex;align-items:center;justify-content:space-between;padding-top:.875rem;border-top:1px solid rgba(255,255,255,.06);margin-top:.875rem;}
.prio      {display:inline-flex;align-items:center;gap:.4rem;padding:.22rem .78rem;border-radius:50px;font-size:.64rem;font-weight:700;border:1px solid transparent;font-family:'Outfit',sans-serif;letter-spacing:.04em;}
.prio-dot  {width:6px;height:6px;border-radius:50%;display:inline-block;}
.p-biasa  {background:rgba(255,255,255,.04);color:rgba(255,255,255,.32);border-color:rgba(255,255,255,.08);}  .p-biasa  .prio-dot{background:rgba(255,255,255,.32);}
.p-penting{background:rgba(201,168,76,.12);color:var(--g-l);     border-color:rgba(201,168,76,.25);}          .p-penting .prio-dot{background:var(--g);     box-shadow:0 0 8px var(--g);}
.p-sangat {background:rgba(255,107,157,.12);color:var(--rose-l); border-color:rgba(255,107,157,.25);}         .p-sangat  .prio-dot{background:var(--rose);  box-shadow:0 0 8px var(--rose);}
.p-segera {background:rgba(182,110,255,.12);color:var(--violet-l);border-color:rgba(182,110,255,.25);}        .p-segera  .prio-dot{background:var(--violet);box-shadow:0 0 8px var(--violet);animation:pulse 1.8s ease-in-out infinite;}
.tl-cta    {display:flex;align-items:center;gap:.35rem;padding:.36rem .95rem;border-radius:50px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:rgba(255,255,255,.38);font-size:.73rem;font-weight:700;text-decoration:none;transition:all .2s var(--ease);font-family:'Outfit',sans-serif;letter-spacing:.03em;}
.tl-item.tl-masuk  .tl-cta:hover{background:linear-gradient(135deg,var(--sapphire),var(--aurora));color:#fff;border-color:transparent;box-shadow:0 4px 14px var(--sapphire-glow);transform:translateX(4px);}
.tl-item.tl-keluar .tl-cta:hover{background:linear-gradient(135deg,var(--coral),var(--g));         color:#fff;border-color:transparent;box-shadow:0 4px 14px var(--coral-glow);    transform:translateX(4px);}

.empty-box  {text-align:center;padding:4rem 2rem;background:var(--ob-l);border-radius:var(--r-xl);border:1.5px dashed rgba(255,255,255,.07);}
.empty-icon {font-size:3.75rem;margin-bottom:1rem;display:block;animation:float 3.5s ease-in-out infinite;opacity:.4;}
.empty-text {font-size:1rem;font-weight:800;color:rgba(255,255,255,.45);margin-bottom:.32rem;}
.empty-sub  {font-size:.8rem;color:rgba(255,255,255,.22);}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--ob);}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width:1280px){.stat-grid{grid-template-columns:repeat(2,1fr)}.wrap{padding:1.5rem}}
@media (max-width:900px) {.stat-grid{grid-template-columns:repeat(2,1fr)}.hero-con{flex-direction:column}.hero-stats{align-self:flex-start}.qnav{grid-template-columns:1fr}}
@media (max-width:768px) {
    .ds-topbar{display:none;}
    .ds-mobile-bar{display:flex;}
    .wrap{padding:1rem;}
}
@media (min-width:769px){.ds-mobile-bar{display:none !important;}}
@media (max-width:600px) {.wrap{padding:.875rem .75rem}.hero-banner{padding:1.5rem 1.25rem}.hero-title{font-size:1.875rem}.stat-grid{grid-template-columns:1fr 1fr}.sc-n{font-size:1.75rem}}
@media (max-width:400px) {.stat-grid{grid-template-columns:1fr 1fr}.hero-title{font-size:1.625rem}}
</style>

<!-- ══════════════════════════════════════════
     .main + .wrap  (pola dari navbar.php)
══════════════════════════════════════════ -->
<div class="main">

    <!-- ── Desktop Topbar ── -->
    <div class="ds-topbar">
        <div class="ds-topbar-left">
            <div class="ds-topbar-title">Dashboard Arsip Surat</div>
            <div class="ds-topbar-sub">◈ Sistem Manajemen Dokumen &amp; Surat Menyurat — MA As-Syafi'iyah 02</div>
        </div>
        <div class="ds-topbar-right">
            <div class="ds-date">🗓 <?= date('d M Y') ?></div>

            <!-- COMBOBOX NAVIGASI -->
            <div class="nav-combo-wrap">
                <div class="nav-combo" id="navCombo" onclick="toggleNavDropdown()">
                    <span class="nav-combo-icon">📂</span>
                    <span class="nav-combo-label">Arsip Surat</span>
                    <span class="nav-combo-arrow">▼</span>
                </div>
                <div class="nav-dropdown" id="navDropdown">
                    <div class="nd-section">Dashboard</div>
                    <a href="dashboard.php" class="nd-item"><span class="nd-item-ico">📊</span>Overview</a>

                    <div class="nd-section">Manajemen Surat</div>
                    <a href="dashboard_surat.php" class="nd-item nd-active"><span class="nd-item-ico">📂</span>Arsip Surat</a>
                    <a href="suratmasuk.php"  class="nd-item"><span class="nd-item-ico">📬</span>Surat Masuk <span class="nd-badge"><?= $total_masuk ?></span></a>
                    <a href="suratkeluar.php" class="nd-item"><span class="nd-item-ico">📮</span>Surat Keluar<span class="nd-badge"><?= $total_keluar ?></span></a>
                    <?php if ($total_penting > 0): ?>
                    <a href="suratmasuk.php?prioritas=Penting" class="nd-item"><span class="nd-item-ico">🚨</span>Surat Penting<span class="nd-badge nd-badge-hot"><?= $total_penting ?></span></a>
                    <?php endif; ?>
                    <a href="laporan_surat.php" class="nd-item"><span class="nd-item-ico">📈</span>Laporan Surat</a>
                    <a href="arsip.php"         class="nd-item"><span class="nd-item-ico">🗄️</span>Arsip Dokumen</a>


                </div>
            </div>

            <a href="suratmasuk.php" class="btn-new">✦ Tambah Surat</a>
        </div>
    </div>

    <!-- ── Mobile nav bar ── -->
    <div class="ds-mobile-bar">
        <div class="ds-mobile-title">📂 Arsip Surat</div>
        <div class="ds-mobile-wrap">
            <div class="ds-mobile-combo" id="mNavCombo" onclick="toggleMobileNav()">🗂️ Menu ▼</div>
            <div class="nav-dropdown" id="mNavDropdown" style="right:0;top:calc(100% + 8px);">
                <div class="nd-section">Dashboard</div>
                <a href="dashboard.php" class="nd-item"><span class="nd-item-ico">📊</span>Overview</a>
                <div class="nd-section">Manajemen Surat</div>
                <a href="dashboard_surat.php" class="nd-item nd-active"><span class="nd-item-ico">📂</span>Arsip Surat</a>
                <a href="suratmasuk.php"  class="nd-item"><span class="nd-item-ico">📬</span>Surat Masuk <span class="nd-badge"><?= $total_masuk ?></span></a>
                <a href="suratkeluar.php" class="nd-item"><span class="nd-item-ico">📮</span>Surat Keluar<span class="nd-badge"><?= $total_keluar ?></span></a>
                <?php if ($total_penting > 0): ?>
                <a href="suratmasuk.php?prioritas=Penting" class="nd-item"><span class="nd-item-ico">🚨</span>Surat Penting<span class="nd-badge nd-badge-hot"><?= $total_penting ?></span></a>
                <?php endif; ?>
                <a href="laporan_surat.php" class="nd-item"><span class="nd-item-ico">📈</span>Laporan</a>
                <a href="arsip.php"         class="nd-item"><span class="nd-item-ico">🗄️</span>Arsip Dokumen</a>
                <div class="nd-divider"></div>
                <a href="suratmasuk.php" class="nd-item" style="color:var(--g-l);font-weight:700;">✦ Tambah Surat</a>
            </div>
        </div>
    </div>

    <!-- ══════ WRAP ══════ -->
    <div class="wrap">

        <!-- HERO -->
        <div class="hero-banner">
            <div class="hero-orbs"><span></span><span></span><span></span></div>
            <div class="hero-con">
                <div>
                    <div class="hero-eyebrow"><span class="hero-pulse"></span><?= $greet_icon ?>&nbsp;<?= $greeting ?></div>
                    <div class="hero-title">Halo, <em><?= htmlspecialchars($_nb_nama) ?></em> 👋</div>
                    <div class="hero-sub">Selamat datang di pusat manajemen arsip surat.<br>Berikut ringkasan terkini yang perlu kamu ketahui hari ini.</div>
                    <div class="hero-chips">
                        <div class="hero-chip">🗂️ <?= $total ?> Total Surat</div>
                        <div class="hero-chip">🗓️ <?= $total_bulan ?> Bulan Ini</div>
                        <div class="hero-chip">⚡ <?= $total_hari ?> Hari Ini</div>
                        <?php if ($total_penting > 0): ?>
                        <div class="hero-chip" style="border-color:rgba(255,107,157,.3);color:var(--rose-l);">🚨 <?= $total_penting ?> Butuh Perhatian</div>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="hero-stats">
                    <div class="hs"><span class="hs-icon">🗂️</span><div class="hs-n"><?= $total ?></div><div class="hs-l">Total</div></div>
                    <div class="hs"><span class="hs-icon">📬</span><div class="hs-n"><?= $total_masuk ?></div><div class="hs-l">Masuk</div></div>
                    <div class="hs"><span class="hs-icon">📮</span><div class="hs-n"><?= $total_keluar ?></div><div class="hs-l">Keluar</div></div>
                    <div class="hs"><span class="hs-icon">⚡</span><div class="hs-n"><?= $total_hari ?></div><div class="hs-l">Hari Ini</div></div>
                </div>
            </div>
        </div>

        <!-- QUICK NAV -->
        <div class="qnav">
            <a href="suratmasuk.php" class="qnav-card">
                <div class="qnav-ico">📬</div>
                <div><div class="qnav-tag">✦ Kelola</div><div class="qnav-title">Surat Masuk</div><div class="qnav-count"><?= $total_masuk ?> surat terdaftar</div></div>
            </a>
            <a href="suratkeluar.php" class="qnav-card">
                <div class="qnav-ico">📮</div>
                <div><div class="qnav-tag">✦ Kelola</div><div class="qnav-title">Surat Keluar</div><div class="qnav-count"><?= $total_keluar ?> surat terkirim</div></div>
            </a>
        </div>

        <!-- STATISTIK -->
        <div class="sec-hd"><div class="sec-icon">📊</div><div class="sec-title">Statistik Surat</div><div class="sec-line"></div></div>
        <div class="stat-grid">
            <?php foreach([
                ['sc-all',  '🗂️','Total Arsip',   $total,         'Semua jenis surat'],
                ['sc-in',   '📬','Surat Masuk',   $total_masuk,   'Dokumen diterima'],
                ['sc-out',  '📮','Surat Keluar',  $total_keluar,  'Dokumen terkirim'],
                ['sc-hot',  '🚨','Surat Penting', $total_penting, 'Perlu perhatian'],
                ['sc-month','🗓️','Bulan Ini',     $total_bulan,   date('F Y')],
                ['sc-today','⚡','Hari Ini',       $total_hari,    date('d M Y')],
            ] as [$cls,$ico,$lbl,$n,$sub]): ?>
            <div class="sc <?= $cls ?>">
                <div class="sc-top"><div><div class="sc-lbl"><?= $lbl ?></div><div class="sc-n"><?= $n ?></div></div><div class="sc-ico"><?= $ico ?></div></div>
                <div class="sc-sub"><?= $sub ?></div>
            </div>
            <?php endforeach; ?>
        </div>

        <!-- CHART -->
        <div class="chart-card">
            <div class="chart-hd">
                <div class="chart-hd-title">📈&nbsp;Statistik Per Bulan — <?= date('Y') ?></div>
                <div class="chart-legend">
                    <div class="cl-item"><span class="cl-dot in"></span>Masuk</div>
                    <div class="cl-item"><span class="cl-dot out"></span>Keluar</div>
                </div>
            </div>
            <div class="chart-body">
                <?php
                $bn   = [1=>'Jan',2=>'Feb',3=>'Mar',4=>'Apr',5=>'Mei',6=>'Jun',7=>'Jul',8=>'Agu',9=>'Sep',10=>'Okt',11=>'Nov',12=>'Des'];
                $curM = (int)date('n');
                $mx   = 1;
                foreach ($monthly as $m) if ($m['total'] > $mx) $mx = $m['total'];
                for ($i=1; $i<=12; $i++):
                    $d    = $monthly[$i] ?? ['total'=>0,'masuk'=>0,'keluar'=>0];
                    $wm   = $mx>0 ? round($d['masuk']  / $mx * 100) : 0;
                    $wk   = $mx>0 ? round($d['keluar'] / $mx * 100) : 0;
                    $isCur = ($i === $curM);
                ?>
                <div class="mrow">
                    <div class="mrow-label <?= $isCur?'current':'' ?>"><?= $isCur?'◉':'◎' ?> <?= $bn[$i] ?></div>
                    <div class="mrow-bars">
                        <div class="bar-row"><div class="bar-tag">📬 Masuk</div><div class="bar-track"><div class="bar-fill in"  style="width:<?= max($wm,4) ?>%"><?= $d['masuk'] ?></div></div></div>
                        <div class="bar-row"><div class="bar-tag">📮 Keluar</div><div class="bar-track"><div class="bar-fill out" style="width:<?= max($wk,4) ?>%"><?= $d['keluar'] ?></div></div></div>
                    </div>
                </div>
                <?php endfor; ?>
            </div>
        </div>

        <!-- FILTER -->
        <div class="filter-bar">
            <span class="filter-lbl">✦ Filter :</span>
            <button class="fbtn active" onclick="doFilter('all',this)">Semua</button>
            <button class="fbtn" onclick="doFilter('masuk',this)">📬 Masuk</button>
            <button class="fbtn" onclick="doFilter('keluar',this)">📮 Keluar</button>
        </div>

        <!-- TIMELINE -->
        <div class="sec-hd"><div class="sec-icon">🕐</div><div class="sec-title">Riwayat Surat Terbaru</div><div class="sec-line"></div></div>
        <div class="tl-wrap" id="tlWrap">
        <?php
        $pMap  = ['Penting'=>'p-penting','Sangat Penting'=>'p-sangat','Segera'=>'p-segera','Biasa'=>'p-biasa'];
        $delay = 0;
        if (mysqli_num_rows($all_letters) > 0):
            while ($l = mysqli_fetch_array($all_letters)):
                $jn   = strtolower($l['jenis']);
                $pc   = $pMap[$l['prioritas']] ?? 'p-biasa';
                $link = $l['jenis']==='Masuk' ? 'suratmasuk.php' : 'suratkeluar.php';
                $icon = $l['jenis']==='Masuk' ? '📬' : '📮';
        ?>
        <div class="tl-item tl-<?= $jn ?>"
             data-type="<?= $jn ?>"
             data-icon="<?= $icon ?>"
             style="animation-delay:<?= $delay ?>s"
             onclick="location.href='<?= $link ?>'">
            <div class="tl-head">
                <div class="tl-icon"><?= $icon ?></div>
                <div class="tl-meta">
                    <div class="tl-date">🗓 <?= date('d M Y',strtotime($l['tanggal'])) ?><span class="tl-chip chip-<?= $jn ?>"><?= $l['jenis'] ?></span></div>
                    <div class="tl-nomor"><?= htmlspecialchars($l['nomor_surat']) ?></div>
                </div>
            </div>
            <div class="tl-subject"><?= htmlspecialchars($l['perihal']) ?></div>
            <div class="tl-from"><span><?= $l['jenis']==='Masuk'?'✉️ Dari':'📍 Kepada' ?>:</span><strong><?= htmlspecialchars($l['keterangan']) ?></strong></div>
            <div class="tl-foot">
                <span class="prio <?= $pc ?>"><span class="prio-dot"></span><?= htmlspecialchars($l['prioritas']??'Biasa') ?></span>
                <a href="<?= $link ?>" class="tl-cta" onclick="event.stopPropagation()">Lihat Detail &nbsp;›</a>
            </div>
        </div>
        <?php
            $delay += 0.04;
            endwhile;
        else: ?>
        <div class="empty-box">
            <span class="empty-icon">📭</span>
            <div class="empty-text">Belum ada arsip surat</div>
            <div class="empty-sub">Mulai tambahkan surat masuk atau keluar ke dalam sistem</div>
        </div>
        <?php endif; ?>
        </div><!-- /tl-wrap -->

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

<!-- ══════════════════════════════════════════
     PAGE SCRIPTS
══════════════════════════════════════════ -->
<script>
(function () {
    'use strict';

    /* ── Desktop combobox ── */
    var combo = document.getElementById('navCombo');
    var drop  = document.getElementById('navDropdown');
    window.toggleNavDropdown = function () {
        var open = drop.classList.contains('show');
        closeAll();
        if (!open) { drop.classList.add('show'); combo.classList.add('open'); }
    };

    /* ── Mobile combobox ── */
    var mCombo = document.getElementById('mNavCombo');
    var mDrop  = document.getElementById('mNavDropdown');
    window.toggleMobileNav = function () {
        var open = mDrop.classList.contains('show');
        closeAll();
        if (!open) { mDrop.classList.add('show'); if (mCombo) mCombo.classList.add('open'); }
    };

    function closeAll () {
        if (drop)   drop.classList.remove('show');
        if (combo)  combo.classList.remove('open');
        if (mDrop)  mDrop.classList.remove('show');
        if (mCombo) mCombo.classList.remove('open');
    }
    document.addEventListener('click', function (e) {
        if (!e.target.closest('.nav-combo-wrap') && !e.target.closest('.ds-mobile-wrap')) closeAll();
    });

    /* ── Filter ── */
    window.doFilter = function (type, btn) {
        document.querySelectorAll('.fbtn').forEach(function (b) { b.classList.remove('active'); });
        btn.classList.add('active');
        document.querySelectorAll('.tl-item').forEach(function (el, i) {
            var show = (type === 'all' || el.dataset.type === type);
            if (show) {
                el.style.display = 'block';
                setTimeout(function () { el.style.opacity='1'; el.style.transform='translateX(0)'; }, i*42);
            } else {
                el.style.opacity='0'; el.style.transform='translateX(-16px)';
                setTimeout(function () { el.style.display='none'; }, 270);
            }
        });
    };
    document.querySelectorAll('.tl-item').forEach(function (el) {
        el.style.transition = 'opacity .27s ease, transform .27s ease';
    });

    /* ── Bar animation on load ── */
    window.addEventListener('load', function () {
        document.querySelectorAll('.bar-fill').forEach(function (b) {
            var t = b.style.width; b.style.width = '0%';
            requestAnimationFrame(function () { setTimeout(function () { b.style.width = t; }, 200); });
        });
        document.querySelectorAll('.sc, .tl-item, .qnav-card').forEach(function (el, i) {
            el.style.opacity='0'; el.style.transform='translateY(20px)';
            setTimeout(function () {
                el.style.transition='opacity .48s ease,transform .48s cubic-bezier(.34,1.2,.64,1)';
                el.style.opacity='1'; el.style.transform='translateY(0)';
            }, 80 + i*50);
        });
    });
})();
</script>