<!-- views/dashboard/index.php -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --teal-900: #0d3d38;
  --teal-800: #0b5a52; --teal-700: #0b7a6e; --teal-600: #0d9488;
  --teal-500: #14b8a6; --teal-400: #2dd4bf; --teal-50: #f0fdfa; --teal-100: #ccfbf1;
  --green-600: #059669; --green-500: #10b981;
  --red-700: #b91c1c; --red-600: #dc2626; --red-500: #ef4444; --red-50: #fef2f2;
  --amber-600: #d97706; --amber-500: #f59e0b; --amber-50: #fffbeb; --amber-100: #fef3c7;
  --blue-600: #2563eb; --blue-500: #3b82f6;
  --sky-600: #0284c7; --sky-500: #0ea5e9;
  --violet-600: #7c3aed;
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569;
  --slate-700: #334155; --slate-900: #0f172a;
  --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06);
}

.dashboard-wrapper {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--slate-900); padding-bottom: 40px;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:none; }
}
.anim-1 { animation: fadeUp .3s .04s ease both; }
.anim-2 { animation: fadeUp .3s .10s ease both; }
.anim-3 { animation: fadeUp .3s .16s ease both; }
.anim-4 { animation: fadeUp .3s .22s ease both; }
.anim-5 { animation: fadeUp .3s .28s ease both; }

.dash-greeting { margin-bottom: 22px; }
.dash-greeting h4 { font-size: 1.25rem; font-weight: 800; margin: 0 0 2px; }
.dash-greeting small { color: var(--slate-400); font-size: .8rem; font-weight: 500; }

/* ── Pending Alert Banner ── */
.dash-alert {
  background: linear-gradient(135deg, var(--amber-50), #fef9ee);
  border: 1px solid rgba(245,158,11,.2); border-left: 4px solid var(--amber-500);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 4px 20px rgba(245,158,11,.12); flex-wrap: wrap;
}
.dash-alert-icon { width:46px;height:46px;flex-shrink:0;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--amber-500);box-shadow:0 2px 8px rgba(0,0,0,.07); }
.dash-alert-body { flex:1;min-width:0; }
.dash-alert-body h5 { font-size:.95rem;font-weight:800;color:#92400e;margin:0 0 3px; }
.dash-alert-body p  { font-size:.8rem;color:var(--amber-600);margin:0 0 8px; }
.dash-alert-actions { display:flex;gap:7px;flex-wrap:wrap; }
.badge-pending-total { background:linear-gradient(135deg,var(--red-600),var(--red-500));color:#fff;padding:7px 16px;border-radius:30px;font-size:.82rem;font-weight:800;box-shadow:0 4px 12px rgba(239,68,68,.28);white-space:nowrap; }
.btn-a-amber { display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--amber-500),var(--amber-600));color:#fff;border:none;border-radius:8px;padding:7px 13px;font-size:.8rem;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 3px 10px rgba(245,158,11,.28);transition:transform .15s;white-space:nowrap; }
.btn-a-amber:hover { transform:translateY(-1px);color:#fff; }
.btn-a-sky { display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--sky-500),var(--sky-600));color:#fff;border:none;border-radius:8px;padding:7px 13px;font-size:.8rem;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 3px 10px rgba(14,165,233,.28);transition:transform .15s;white-space:nowrap; }
.btn-a-sky:hover { transform:translateY(-1px);color:#fff; }
.btn-a-green { display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--green-500),var(--green-600));color:#fff;border:none;border-radius:8px;padding:7px 13px;font-size:.8rem;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 3px 10px rgba(16,185,129,.28);transition:transform .15s;white-space:nowrap; }
.btn-a-green:hover { transform:translateY(-1px);color:#fff; }

/* ── Desktop Stat Grids ── */
.stat-grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px; }
.stat-grid-2 { display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px; }
.stat-grid-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px; }

/* ══════════════════════════════════════
   GRADIENT STAT CARDS
══════════════════════════════════════ */
.dash-stat-card {
  border-radius: 16px; padding: 22px 20px;
  position: relative; overflow: hidden;
  color: #fff; text-decoration: none !important;
  display: block; transition: transform .2s, box-shadow .2s; cursor: pointer;
}
.dash-stat-card:hover { transform: translateY(-5px); color: #fff; text-decoration: none; }
.dash-stat-card::before { content:'';position:absolute;top:-30px;right:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.10); }
.dash-stat-card::after  { content:'';position:absolute;bottom:-50px;right:40px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.06); }
.dash-stat-card .sc-label { font-size:.72rem;font-weight:700;opacity:.85;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;position:relative;z-index:1; }
.dash-stat-card .sc-value { font-size:1.35rem;font-weight:800;line-height:1.2;position:relative;z-index:1; }
.dash-stat-card .sc-sub   { font-size:.72rem;opacity:.75;margin-top:5px;position:relative;z-index:1; }
.dash-stat-card .sc-icon  { position:absolute;right:18px;top:50%;transform:translateY(-50%);width:52px;height:52px;background:rgba(255,255,255,.16);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;z-index:1;transition:background .2s; }
.dash-stat-card:hover .sc-icon { background:rgba(255,255,255,.26); }
.sc-notif { position:absolute;top:10px;left:10px;background:rgba(255,255,255,.25);border:1.5px solid rgba(255,255,255,.4);color:#fff;padding:2px 9px;border-radius:30px;font-size:.67rem;font-weight:800;z-index:2;backdrop-filter:blur(4px); }
.sc-action-btn { display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:8px;padding:5px 12px;font-size:.74rem;font-weight:700;margin-top:10px;position:relative;z-index:2;text-decoration:none;transition:background .15s;white-space:nowrap;backdrop-filter:blur(4px); }
.sc-action-btn:hover { background:rgba(255,255,255,.32);color:#fff;text-decoration:none; }

.sc-teal   { background:linear-gradient(135deg,var(--teal-800),var(--teal-600),var(--teal-400));box-shadow:0 8px 28px rgba(13,148,136,.30); }
.sc-teal:hover   { box-shadow:0 14px 36px rgba(13,148,136,.42); }
.sc-green  { background:linear-gradient(135deg,#059669,#10b981,#34d399);box-shadow:0 8px 28px rgba(16,185,129,.30); }
.sc-green:hover  { box-shadow:0 14px 36px rgba(16,185,129,.42); }
.sc-red    { background:linear-gradient(135deg,#b91c1c,#dc2626,#f87171);box-shadow:0 8px 28px rgba(220,38,38,.28); }
.sc-red:hover    { box-shadow:0 14px 36px rgba(220,38,38,.40); }
.sc-sky    { background:linear-gradient(135deg,#0369a1,#0ea5e9,#38bdf8);box-shadow:0 8px 28px rgba(14,165,233,.28); }
.sc-sky:hover    { box-shadow:0 14px 36px rgba(14,165,233,.40); }
.sc-blue   { background:linear-gradient(135deg,#1d4ed8,#3b82f6,#93c5fd);box-shadow:0 8px 28px rgba(59,130,246,.28); }
.sc-blue:hover   { box-shadow:0 14px 36px rgba(59,130,246,.40); }
.sc-amber  { background:linear-gradient(135deg,#b45309,#d97706,#fbbf24);box-shadow:0 8px 28px rgba(217,119,6,.30); }
.sc-amber:hover  { box-shadow:0 14px 36px rgba(217,119,6,.42); }
.sc-violet { background:linear-gradient(135deg,#5b21b6,#7c3aed,#a78bfa);box-shadow:0 8px 28px rgba(124,58,237,.28); }
.sc-violet:hover { box-shadow:0 14px 36px rgba(124,58,237,.40); }
.sc-emerald { background:linear-gradient(135deg,#065f46,#059669,#34d399);box-shadow:0 8px 28px rgba(5,150,105,.30); }
.sc-emerald:hover { box-shadow:0 14px 36px rgba(5,150,105,.42); }
.sc-muted  { background:linear-gradient(135deg,#334155,#475569,#94a3b8);box-shadow:0 4px 16px rgba(100,116,139,.22); }
.sc-muted:hover  { box-shadow:0 10px 28px rgba(100,116,139,.34); }

/* ── Cicilan Progress Card (warga) ── */
.cicilan-card { background:#fff;border-radius:14px;box-shadow:var(--card-shadow);border:1px solid var(--slate-200);overflow:hidden;margin-bottom:16px; }
.cicilan-head { background:linear-gradient(90deg,var(--teal-50),#fff);border-bottom:1px solid rgba(13,148,136,.12);padding:13px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px; }
.cicilan-head h5 { font-size:.9rem;font-weight:800;margin:0;color:var(--teal-800); }
.cicilan-body { padding:4px 0; }
.cicilan-row { display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--slate-100);transition:background .1s; }
.cicilan-row:last-child { border-bottom:none; }
.cicilan-row:hover { background:var(--teal-50); }
.cicilan-icon { width:38px;height:38px;border-radius:10px;flex-shrink:0;background:rgba(13,148,136,.1);display:flex;align-items:center;justify-content:center;color:var(--teal-600);font-size:.9rem; }
.cicilan-info { flex:1;min-width:0; }
.cicilan-name { font-size:.84rem;font-weight:700;color:var(--slate-800); }
.cicilan-meta { font-size:.72rem;color:var(--slate-400);margin-top:2px; }
.cicilan-prog-wrap { min-width:120px; }
.cicilan-prog-track { background:var(--slate-100);border-radius:999px;height:6px;overflow:hidden;margin-bottom:3px; }
.cicilan-prog-fill  { background:linear-gradient(90deg,var(--teal-500),var(--teal-400));height:100%;border-radius:999px;transition:width .4s; }
.cicilan-prog-lbl   { font-size:.67rem;font-weight:700;color:var(--teal-600);text-align:right; }
.cicilan-amount { text-align:right;flex-shrink:0;min-width:90px; }
.cicilan-paid   { font-size:.8rem;font-weight:800;color:var(--green-600); }
.cicilan-remain { font-size:.7rem;color:var(--red-500);margin-top:2px; }
.btn-lanjut-cicil { display:inline-flex;align-items:center;gap:4px;background:var(--teal-600);color:#fff;border:none;border-radius:7px;padding:4px 10px;font-size:.72rem;font-weight:700;text-decoration:none;margin-top:5px;transition:background .15s; }
.btn-lanjut-cicil:hover { background:var(--teal-700);color:#fff; }

/* ── Pending Card (desktop) ── */
.pending-card { background:#fff;border-radius:14px;box-shadow:var(--card-shadow);border:1px solid var(--slate-200);border-top:3px solid var(--amber-500);overflow:hidden;margin-bottom:16px; }
.pending-head { background:linear-gradient(90deg,var(--amber-50),#fff);border-bottom:1px solid rgba(245,158,11,.15);padding:15px 20px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px; }
.pending-head h5 { font-size:.95rem;font-weight:800;margin:0 0 2px; }
.pending-head small { color:var(--slate-400);font-size:.76rem; }
.pending-table-wrap { overflow-x:auto; }
.pending-table { width:100%;border-collapse:collapse;font-size:.82rem;min-width:700px; }
.pending-table thead th { padding:10px 14px;background:var(--slate-50);border-bottom:2px solid var(--slate-200);font-size:.73rem;font-weight:700;color:var(--slate-400);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap; }
.pending-table tbody tr { border-bottom:1px solid #f8fafc;transition:background .1s; }
.pending-table tbody tr:hover { background:var(--teal-50); }
.pending-table tbody td { padding:10px 14px;vertical-align:middle; }
.badge-pinjaman { display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:.72rem;font-weight:700;background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border:1px solid rgba(245,158,11,.25); }
.badge-iuran    { display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:.72rem;font-weight:700;background:linear-gradient(135deg,#e0f2fe,#bae6fd);color:#0c4a6e;border:1px solid rgba(14,165,233,.25); }
.badge-cicilan  { display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:.72rem;font-weight:700;background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46;border:1px solid rgba(16,185,129,.25); }
.btn-verif-sm { display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,var(--green-500),var(--green-600));color:#fff;border:none;border-radius:7px;padding:5px 12px;font-size:.78rem;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 3px 8px rgba(16,185,129,.25);transition:all .15s; }
.btn-verif-sm:hover { background:linear-gradient(135deg,var(--green-600),#047857);color:#fff; }

/* ── Info cards ── */
.info-wrap { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px; }
.info-card { background:#fff;border-radius:14px;box-shadow:var(--card-shadow);border:1px solid var(--slate-200);overflow:hidden; }
.info-head { display:flex;align-items:center;gap:8px;padding:13px 18px;background:linear-gradient(90deg,var(--teal-50),#fff);border-bottom:1px solid rgba(13,148,136,.1);font-weight:800;font-size:.85rem;color:var(--teal-800); }
.info-head i { color:var(--teal-600); }
.info-body { padding:14px 18px; }
.pay-item { display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--slate-100); }
.pay-item:last-child { border-bottom:none; }
.pay-name { font-size:.84rem;font-weight:700;color:var(--slate-700);margin-bottom:2px; }
.pay-sub  { font-size:.74rem;color:var(--slate-400); }
.pay-nom  { font-size:.84rem;font-weight:800;color:var(--green-600);white-space:nowrap; }
.pay-date { font-size:.72rem;color:var(--slate-400);text-align:right;margin-top:2px; }
.surat-count { font-size:2rem;font-weight:800;color:var(--amber-500);line-height:1; }

.kas-banner { background:linear-gradient(135deg,var(--teal-50),#fff);border:1px solid rgba(13,148,136,.15);border-radius:14px;padding:18px 22px;box-shadow:0 2px 12px rgba(13,148,136,.08);display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap; }
.kas-banner-left { display:flex;align-items:center;gap:14px; }
.kas-banner-icon { width:48px;height:48px;border-radius:12px;flex-shrink:0;background:rgba(13,148,136,.12);display:flex;align-items:center;justify-content:center;color:var(--teal-600);font-size:1.3rem; }
.kas-banner-label { font-size:.72rem;color:var(--slate-400);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px; }
.kas-banner-value { font-size:1.3rem;font-weight:800;color:var(--teal-700); }
.dc-action { display:inline-flex;align-items:center;gap:5px;border:1px solid var(--teal-600);background:var(--teal-600);color:#fff;border-radius:9px;padding:8px 18px;font-size:.82rem;font-weight:700;text-decoration:none;transition:all .15s; }
.dc-action:hover { background:var(--teal-700);color:#fff; }
.dc-cta { display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:none;border-radius:8px;padding:8px 12px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;font-weight:700;text-decoration:none;margin-top:12px;cursor:pointer;transition:all .15s; }
.cta-amber { background:linear-gradient(135deg,var(--amber-500),var(--amber-600));color:#fff;box-shadow:0 3px 10px rgba(245,158,11,.28); }
.cta-amber:hover { background:linear-gradient(135deg,var(--amber-600),#b45309);color:#fff; }
.cta-green { background:linear-gradient(135deg,var(--green-500),var(--green-600));color:#fff;box-shadow:0 3px 10px rgba(16,185,129,.28); }
.cta-sky { background:linear-gradient(135deg,var(--sky-500),var(--sky-600));color:#fff;box-shadow:0 3px 10px rgba(14,165,233,.26); }

.quick-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }
.quick-card { background:#fff;border-radius:12px;padding:18px 12px;text-align:center;text-decoration:none!important;display:block;box-shadow:var(--card-shadow);border:1px solid var(--slate-200);transition:transform .18s,box-shadow .18s; }
.quick-card:hover { transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.1); }
.qm-icon { width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;background:color-mix(in srgb,var(--qc,#14b8a6) 14%,white);font-size:1.2rem;color:var(--qc,#14b8a6); }
.quick-card h6 { font-size:.84rem;font-weight:800;color:var(--slate-800);margin:0 0 3px; }
.quick-card small { font-size:.72rem;color:var(--slate-400); }

/* ═══════════════════════════════════════════
   MOBILE LAYOUT
═══════════════════════════════════════════ */
.mobile-dash { display:none; }

@media (max-width:767px) {
  .desktop-dash { display:none!important; }
  .mobile-dash  { display:block; }
  .dashboard-wrapper { padding-bottom:24px; }

  .m-hero { background:linear-gradient(135deg,var(--teal-800) 0%,var(--teal-600) 55%,var(--teal-400) 100%);border-radius:16px;padding:18px 16px 20px;margin-bottom:14px;position:relative;overflow:hidden;box-shadow:0 8px 28px rgba(13,148,136,.28); }
  .m-hero::before { content:'';position:absolute;top:-30px;right:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.09); }
  .m-hero::after  { content:'';position:absolute;bottom:-40px;right:50px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.05); }
  .m-hero-role { font-size:.68rem;font-weight:700;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px; }
  .m-hero-name { font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:14px;position:relative;z-index:1; }
  .m-hero-stats { display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative;z-index:1; }
  .m-hero-stats::-webkit-scrollbar { display:none; }
  .m-stat-pill { background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:9px 13px;flex-shrink:0;min-width:100px;text-decoration:none!important;transition:background .15s,transform .15s;cursor:pointer; }
  .m-stat-pill:active { transform:scale(.95);background:rgba(255,255,255,.22); }
  .m-stat-pill .spl { font-size:.62rem;font-weight:700;color:rgba(255,255,255,.68);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px; }
  .m-stat-pill .spv { font-size:.88rem;font-weight:800;color:#fff;line-height:1.1; }
  .m-stat-pill .spv.danger { color:#fca5a5; }
  .m-stat-pill .spv.warn   { color:#fde68a; }

  .m-alert-strip { background:linear-gradient(135deg,var(--amber-50),#fef9ee);border:1px solid rgba(245,158,11,.22);border-left:3px solid var(--amber-500);border-radius:10px;padding:11px 12px;display:flex;align-items:center;gap:10px;margin-bottom:14px;box-shadow:0 2px 10px rgba(245,158,11,.1); }
  .m-alert-strip i { color:var(--amber-500);font-size:1.1rem;flex-shrink:0; }
  .m-alert-strip .mas-body { flex:1;min-width:0; }
  .m-alert-strip .mas-title { font-size:.82rem;font-weight:800;color:#92400e; }
  .m-alert-strip .mas-sub   { font-size:.71rem;color:var(--amber-600);margin-top:1px; }
  .m-alert-strip .mas-btn   { flex-shrink:0;background:var(--amber-500);color:#fff;border:none;border-radius:7px;padding:6px 11px;font-size:.74rem;font-weight:700;text-decoration:none;white-space:nowrap; }

  /* Cicilan progress mobile */
  .m-cicilan-strip { background:#fff;border-radius:12px;border:1px solid var(--slate-200);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05);margin-bottom:12px; }
  .m-cicilan-strip-head { padding:10px 14px;background:linear-gradient(90deg,var(--teal-50),#fff);border-bottom:1px solid rgba(13,148,136,.1);font-size:.78rem;font-weight:800;color:var(--teal-800);display:flex;align-items:center;gap:6px; }
  .m-cicilan-item { display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--slate-100); }
  .m-cicilan-item:last-child { border-bottom:none; }
  .m-cicilan-item-icon { width:34px;height:34px;border-radius:9px;flex-shrink:0;background:rgba(13,148,136,.1);display:flex;align-items:center;justify-content:center;color:var(--teal-600);font-size:.82rem; }
  .m-cicilan-item-body { flex:1;min-width:0; }
  .m-cicilan-item-name { font-size:.8rem;font-weight:700;color:var(--slate-800); }
  .m-cicilan-item-meta { font-size:.68rem;color:var(--slate-400);margin-top:1px; }
  .m-cicilan-prog-track { background:var(--slate-100);border-radius:999px;height:5px;overflow:hidden;margin-top:5px; }
  .m-cicilan-prog-fill  { background:linear-gradient(90deg,var(--teal-500),var(--teal-400));height:100%;border-radius:999px; }
  .m-cicilan-item-right { text-align:right;flex-shrink:0; }
  .m-cicilan-pct { font-size:.78rem;font-weight:800;color:var(--teal-600); }
  .m-cicilan-sisa { font-size:.68rem;color:var(--red-500);margin-top:2px; }

  .m-tabs { display:flex;background:var(--slate-100);border-radius:12px;padding:4px;gap:2px;margin-bottom:14px; }
  .m-tab { flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:9px;border:none;background:transparent;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:.62rem;font-weight:700;color:var(--slate-400);transition:all .2s;position:relative; }
  .m-tab i { font-size:.95rem; }
  .m-tab.active { background:#fff;color:var(--teal-700);box-shadow:0 2px 8px rgba(0,0,0,.1); }
  .tab-notif { position:absolute;top:4px;right:calc(50% - 14px);width:7px;height:7px;border-radius:50%;background:var(--red-500);border:2px solid var(--slate-100);display:none; }
  .tab-notif.show { display:block; }
  .m-tab.active .tab-notif { border-color:#fff; }

  .m-panel { display:none;animation:fadeUp .22s ease; }
  .m-panel.active { display:block; }

  .m-grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px; }
  .m-mini-card { border-radius:14px;padding:16px 14px 14px;position:relative;overflow:hidden;color:#fff;text-decoration:none!important;transition:transform .15s,box-shadow .15s;display:block; }
  .m-mini-card:active { transform:scale(.97);color:#fff; }
  .m-mini-card:hover  { color:#fff; }
  .m-mini-card::before { content:'';position:absolute;top:-20px;right:-20px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.10); }
  .m-mini-card::after  { content:'';position:absolute;bottom:-30px;right:20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.06); }
  .mmc-icon  { width:32px;height:32px;border-radius:9px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;background:rgba(255,255,255,.18);color:#fff;position:relative;z-index:1; }
  .mmc-label { font-size:.62rem;font-weight:700;opacity:.8;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;position:relative;z-index:1; }
  .mmc-val   { font-size:.95rem;font-weight:800;color:#fff;line-height:1.2;word-break:break-word;position:relative;z-index:1; }
  .mmc-sub   { font-size:.65rem;opacity:.72;margin-top:2px;position:relative;z-index:1; }
  .mmc-notif { position:absolute;top:8px;right:8px;background:rgba(255,255,255,.25);border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:20px;font-size:.58rem;font-weight:800;padding:1px 6px;z-index:2; }

  .mc-teal   { background:linear-gradient(135deg,var(--teal-800),var(--teal-600),var(--teal-400));box-shadow:0 6px 20px rgba(13,148,136,.30); }
  .mc-sky    { background:linear-gradient(135deg,#0369a1,var(--sky-500),#38bdf8);box-shadow:0 6px 20px rgba(14,165,233,.28); }
  .mc-green  { background:linear-gradient(135deg,#059669,#10b981,#34d399);box-shadow:0 6px 20px rgba(16,185,129,.28); }
  .mc-red    { background:linear-gradient(135deg,#b91c1c,var(--red-600),#f87171);box-shadow:0 6px 20px rgba(220,38,38,.26); }
  .mc-amber  { background:linear-gradient(135deg,#b45309,var(--amber-600),#fbbf24);box-shadow:0 6px 20px rgba(217,119,6,.28); }
  .mc-blue   { background:linear-gradient(135deg,#1d4ed8,var(--blue-500),#93c5fd);box-shadow:0 6px 20px rgba(59,130,246,.26); }
  .mc-violet { background:linear-gradient(135deg,#5b21b6,var(--violet-600),#a78bfa);box-shadow:0 6px 20px rgba(124,58,237,.26); }
  .mc-emerald { background:linear-gradient(135deg,#065f46,#059669,#34d399);box-shadow:0 6px 20px rgba(5,150,105,.28); }
  .mc-muted  { background:linear-gradient(135deg,#334155,#475569,#94a3b8);box-shadow:0 4px 14px rgba(100,116,139,.20); }

  .m-pill-link { display:flex;align-items:center;justify-content:space-between;border-radius:14px;padding:16px 18px;margin-bottom:10px;text-decoration:none!important;box-shadow:0 5px 18px rgba(0,0,0,.14);position:relative;overflow:hidden; }
  .m-pill-link::before { content:'';position:absolute;top:-25px;right:-25px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.09); }
  .m-pill-link:last-child { margin-bottom:0; }
  .mpl-left .mpl-label { font-size:.67rem;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px; }
  .mpl-left .mpl-value { font-size:1.1rem;font-weight:800;color:#fff; }
  .mpl-icon { width:42px;height:42px;background:rgba(255,255,255,.18);border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;flex-shrink:0; }

  .m-pending-list { display:flex;flex-direction:column;gap:9px; }
  .mob-pend { background:#fff;border:1px solid var(--slate-200);border-radius:10px;padding:12px 13px;box-shadow:0 1px 4px rgba(0,0,0,.05);border-left:3px solid var(--amber-400); }
  .mob-pend.cicilan-type { border-left-color:var(--green-500); }
  .mob-pend-top { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px; }
  .mob-pend-name { font-size:.84rem;font-weight:700;margin:3px 0 2px; }
  .mob-pend-detail { font-size:.72rem;color:var(--slate-400); }
  .mob-pend-amount { font-size:.9rem;font-weight:800;color:var(--green-600);white-space:nowrap; }
  .mob-pend-footer { display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--slate-100);padding-top:8px; }
  .mob-pend-meta { font-size:.7rem;color:var(--slate-400); }

  .m-pay-list { background:#fff;border-radius:12px;border:1px solid var(--slate-200);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05); }
  .m-pay-head { padding:11px 14px;background:linear-gradient(90deg,var(--teal-50),#fff);border-bottom:1px solid rgba(13,148,136,.1);font-size:.8rem;font-weight:800;color:var(--teal-800);display:flex;align-items:center;gap:6px; }
  .m-pay-head i { color:var(--teal-600); }
  .m-pay-row { display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--slate-100); }
  .m-pay-row:last-child { border-bottom:none; }
  .m-pay-name { font-size:.82rem;font-weight:700; }
  .m-pay-sub  { font-size:.71rem;color:var(--slate-400);margin-top:1px; }
  .m-pay-nom  { font-size:.84rem;font-weight:800;color:var(--green-600); }
  .m-pay-date { font-size:.69rem;color:var(--slate-400);text-align:right;margin-top:1px; }

  .m-quick-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
  .m-quick-card { background:#fff;border-radius:12px;padding:16px 10px;text-align:center;text-decoration:none!important;display:flex;flex-direction:column;align-items:center;gap:7px;box-shadow:0 1px 4px rgba(0,0,0,.05);border:1px solid var(--slate-200);transition:transform .15s; }
  .m-quick-card:active { transform:scale(.96); }
  .m-qm-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:color-mix(in srgb,var(--qc,var(--teal-500)) 14%,white);color:var(--qc,var(--teal-500)); }
  .m-quick-card span { font-size:.78rem;font-weight:800;color:var(--slate-700); }

  .m-section-label { font-size:.68rem;font-weight:800;color:var(--slate-400);text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px;display:flex;align-items:center;gap:7px; }
  .m-section-label::after { content:'';flex:1;height:1px;background:var(--slate-100); }
  .m-empty { text-align:center;padding:28px 0;color:var(--slate-300);font-size:.84rem; }
  .m-empty i { font-size:1.6rem;display:block;margin-bottom:8px; }
}

@media (min-width:768px) { .mobile-dash { display:none!important; } }
@media (max-width:1199px) { .stat-grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px)  { .stat-grid-4,.stat-grid-3,.stat-grid-2 { grid-template-columns:repeat(2,1fr); } }
</style>

<?php
// ── Helper: safe strtotime (FIX: hindari null/empty ke strtotime) ──
function safe_strtotime($val) {
    return !empty($val) ? strtotime($val) : 0;
}

// ── Kalkulasi pending terpusat (dipakai desktop & mobile) ──
$total_pending_pinjaman  = isset($total_pembayaran_pending)    ? (int)$total_pembayaran_pending              : 0;
$total_pending_iuran     = isset($pembayaran_iuran_pending)    ? count($pembayaran_iuran_pending)             : 0;
$total_pending_cicilan   = isset($total_cicilan_iuran_pending) ? (int)$total_cicilan_iuran_pending            : 0;
$total_all_pending       = $total_pending_pinjaman + $total_pending_iuran + $total_pending_cicilan;
$has_pending             = $total_all_pending > 0;
$total_iuran_semua_pending = $total_pending_iuran + $total_pending_cicilan;

// ── Helper: gabung & sort pending list ──
function build_combined_pending($pembayaran_pending_list, $pembayaran_iuran_pending, $cicilan_iuran_pending, $limit = 8) {
    $cp = [];
    if (!empty($pembayaran_pending_list))  foreach ($pembayaran_pending_list  as $pp) $cp[] = ['type' => 'pinjaman', 'data' => $pp];
    if (!empty($pembayaran_iuran_pending)) foreach ($pembayaran_iuran_pending as $pi) $cp[] = ['type' => 'iuran',    'data' => $pi];
    if (!empty($cicilan_iuran_pending))    foreach ($cicilan_iuran_pending    as $ci) $cp[] = ['type' => 'cicilan',  'data' => $ci];
    usort($cp, function($a, $b) {
        // FIX: gunakan !empty() agar null/empty string tidak masuk strtotime
        $ta = !empty($a['data']->created_at) ? strtotime($a['data']->created_at) : 0;
        $tb = !empty($b['data']->created_at) ? strtotime($b['data']->created_at) : 0;
        return $tb - $ta;
    });
    return array_slice($cp, 0, $limit);
}
?>

<?php 
// ── Cek Ulang Tahun User yang Login Hari Ini ──
$is_my_birthday_today = false;
$nama_user = $this->session->userdata('nama');
if(!empty($ulang_tahun_bulan_ini)) {
    foreach($ulang_tahun_bulan_ini as $ut) {
        if (date('m-d') == date('m-d', strtotime($ut->tanggal_lahir)) && strtolower($ut->nama_lengkap) == strtolower($nama_user)) {
            $is_my_birthday_today = true;
            break;
        }
    }
}
?>

<div class="dashboard-wrapper">

<?php if($is_my_birthday_today): ?>
<!-- Confetti JS -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var duration = 10 * 1000;
    var animationEnd = Date.now() + duration;
    var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 99999 };

    function randomInRange(min, max) {
      return Math.random() * (max - min) + min;
    }

    var interval = setInterval(function() {
      var timeLeft = animationEnd - Date.now();

      if (timeLeft <= 0) {
        return clearInterval(interval);
      }

      var particleCount = 50 * (timeLeft / duration);
      confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
      confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
    }, 250);
});
</script>

<!-- Modal Ucapan -->
<div class="modal fade" id="modalUltah" tabindex="-1" aria-labelledby="modalUltahLabel" aria-hidden="true" style="z-index:99998;">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content" style="border:none;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.2);">
      <div style="background:linear-gradient(135deg, #f59e0b, #ea580c);color:#fff;padding:40px 20px;text-align:center;">
        <i class="bi bi-gift-fill" style="font-size:4rem;text-shadow:0 4px 10px rgba(0,0,0,0.2);"></i>
        <h2 style="font-weight:800;margin-top:20px;margin-bottom:10px;">Selamat Ulang Tahun!</h2>
        <h4 style="font-weight:700;margin-bottom:0;opacity:0.9;"><?php echo htmlspecialchars($nama_user); ?></h4>
      </div>
      <div class="modal-body text-center" style="padding:30px 20px;">
        <p style="color:var(--slate-600);font-size:1.1rem;margin-bottom:0;">
          Semoga panjang umur, sehat selalu, dan dilimpahkan rezeki yang berkah.<br>Salam hangat dari seluruh pengurus dan warga RT!
        </p>
      </div>
      <div class="modal-footer" style="border:none;justify-content:center;padding-bottom:30px;">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" style="border-radius:10px;padding:10px 30px;font-weight:700;background:var(--amber-500);border:none;">Terima Kasih!</button>
      </div>
    </div>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var myModal = new bootstrap.Modal(document.getElementById('modalUltah'));
    myModal.show();
});
</script>
<?php endif; ?>

<!-- ════════════════════ DESKTOP ════════════════════ -->
<div class="desktop-dash">

  <!-- Greeting -->
  <div class="dash-greeting anim-1">
    <div class="d-flex align-items-start justify-content-between flex-wrap gap-3">
      <div>
        <h4>Selamat Datang, <?php echo $this->session->userdata('nama'); ?>!</h4>
        <small>
          <?php if(is_admin()): ?>
            <i class="bi bi-shield-lock me-1 text-success"></i> Dashboard Administrator
          <?php else: ?>
            <i class="bi bi-people me-1 text-success"></i> Dashboard Warga
          <?php endif; ?>
        </small>
      </div>
      <?php if(!empty($pengaturan)): ?>
      <div style="background:linear-gradient(135deg,var(--teal-50),#fff);border:1px solid rgba(13,148,136,.15);border-left:3px solid var(--teal-500);border-radius:10px;padding:8px 14px;font-size:.78rem;line-height:1.6;color:var(--slate-600);min-width:200px;">
        <div style="font-weight:800;color:var(--teal-700);font-size:.82rem;margin-bottom:2px;">
          <i class="bi bi-geo-alt-fill me-1" style="color:var(--teal-500)"></i>
          <?php echo $pengaturan->nama_rt ?? 'RT'; ?> / <?php echo $pengaturan->nama_rw ?? 'RW'; ?>
        </div>
        <?php if(!empty($pengaturan->nama_kelurahan)): ?>
        <div><i class="bi bi-building me-1 text-muted"></i><?php echo $pengaturan->nama_kelurahan; ?><?php echo !empty($pengaturan->nama_kecamatan) ? ', Kec. '.$pengaturan->nama_kecamatan : ''; ?></div>
        <?php endif; ?>
        <?php if(!empty($pengaturan->nama_kota)): ?>
        <div><i class="bi bi-map me-1 text-muted"></i><?php echo $pengaturan->nama_kota; ?><?php echo !empty($pengaturan->kode_pos) ? ' '.$pengaturan->kode_pos : ''; ?></div>
        <?php endif; ?>
      </div>
      <?php endif; ?>
    </div>
  </div>

  <!-- ── Widget Ulang Tahun (Desktop) ── -->
  <?php if(!empty($ulang_tahun_bulan_ini)): ?>
  <div class="dash-alert anim-1" style="background:linear-gradient(135deg,var(--sky-50),#eff6ff);border:1px solid rgba(14,165,233,.2);border-left:4px solid var(--sky-500);align-items:flex-start;">
    <div class="dash-alert-icon" style="color:var(--sky-500)"><i class="bi bi-gift-fill"></i></div>
    <div class="dash-alert-body">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h5 style="color:var(--sky-800);margin:0;"><i class="bi bi-calendar-event me-1"></i>Ulang Tahun Bulan Ini 🎂</h5>
        <?php if(is_admin()): ?>
          <button id="btnBroadcastUltah" class="btn-a-sky" style="padding:4px 10px; font-size:0.7rem;">
            <i class="bi bi-send-fill"></i> Broadcast WA
          </button>
        <?php endif; ?>
      </div>
      <p style="color:var(--sky-700);margin-bottom:12px;">Selamat kepada warga yang merayakan hari lahirnya di bulan ini:</p>
      <div style="display:flex;gap:8px;flex-wrap:wrap;">
        <?php foreach($ulang_tahun_bulan_ini as $ut): 
          $tgl = date('d M', strtotime($ut->tanggal_lahir));
          $is_today = (date('m-d') == date('m-d', strtotime($ut->tanggal_lahir)));
          $bg = $is_today ? 'background:linear-gradient(135deg,var(--amber-500),var(--amber-600));color:#fff;border:none;box-shadow:0 3px 8px rgba(245,158,11,.3);' : 'background:#fff;border:1px solid rgba(14,165,233,.3);color:var(--sky-700);';
          $icon = $is_today ? '<i class="bi bi-star-fill me-1" style="color:#fef3c7;"></i>' : '';
          
          $wa_link = '';
          if ($is_today && !empty($ut->no_hp)) {
             $no_hp = preg_replace('/[^0-9]/', '', $ut->no_hp);
             if(substr($no_hp, 0, 1) == '0') $no_hp = '62' . substr($no_hp, 1);
             $pesan_wa_1 = "Selamat Ulang Tahun, *" . $ut->nama_lengkap . "*!";
             $pesan_wa_2 = "Semoga panjang umur, sehat selalu, dan dilancarkan rezekinya. Salam hangat dari seluruh Pengurus RT.";
             $wa_url = "https://wa.me/" . $no_hp . "?text=" . rawurlencode($pesan_wa_1) . "%0A%0A" . rawurlencode($pesan_wa_2);
             $wa_link = '<a href="'.$wa_url.'" target="_blank" title="Kirim Ucapan via WA Link" style="color:#fff;margin-left:6px;text-decoration:none;"><i class="bi bi-whatsapp"></i></a>';
             if(is_admin()) {
               $wa_link .= '<button onclick="kirimUltahWaById('.$ut->id.', \''.addslashes($ut->nama_lengkap).'\')" title="Kirim WA Otomatis (WAHA)" style="background:transparent; border:none; color:#fff; margin-left:6px; padding:0; cursor:pointer;"><i class="bi bi-send-fill"></i></button>';
             }
          }
        ?>
        <span style="border-radius:20px;padding:5px 12px;font-size:0.75rem;font-weight:700;display:inline-flex;align-items:center;<?php echo $bg; ?>">
          <?php echo $icon . htmlspecialchars($ut->nama_lengkap); ?> (<?php echo $tgl; ?>) <?php echo $wa_link; ?>
        </span>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
  <?php endif; ?>

  <?php if(is_admin()): ?>

  <!-- ── Alert Banner ── -->
  <?php if($has_pending): ?>
  <div class="dash-alert anim-1">
    <div class="dash-alert-icon"><i class="bi bi-bell-fill"></i></div>
    <div class="dash-alert-body">
      <h5><i class="bi bi-clock-history me-1"></i>Ada <?php echo $total_all_pending; ?> Pembayaran Menunggu Verifikasi</h5>
      <p>Perlu diproses dan dimasukkan ke kas.</p>
      <div class="dash-alert-actions">
        <?php if($total_pending_pinjaman > 0): ?>
        <a href="<?php echo base_url('pinjaman/verifikasi_pembayaran_list'); ?>" class="btn-a-amber">
          <i class="bi bi-cash-coin"></i><?php echo $total_pending_pinjaman; ?> Pinjaman
        </a>
        <?php endif; ?>
        <?php if($total_pending_iuran > 0): ?>
        <a href="<?php echo base_url('iuran'); ?>" class="btn-a-sky">
          <i class="bi bi-cash-stack"></i><?php echo $total_pending_iuran; ?> Iuran Penuh
        </a>
        <?php endif; ?>
        <?php if($total_pending_cicilan > 0): ?>
        <a href="<?php echo base_url('iuran'); ?>" class="btn-a-green">
          <i class="bi bi-credit-card"></i><?php echo $total_pending_cicilan; ?> Cicilan
        </a>
        <?php endif; ?>
      </div>
    </div>
    <div><span class="badge-pending-total"><?php echo $total_all_pending; ?> Pending</span></div>
  </div>
  <?php endif; ?>

  <!-- ── Stat Row 1 ── -->
  <div class="stat-grid-4 anim-2">
    <a href="<?php echo base_url('warga'); ?>" class="dash-stat-card sc-teal">
      <div class="sc-label"><i class="bi bi-people-fill me-1"></i>Total Warga</div>
      <div class="sc-value"><?php echo number_format($total_warga); ?></div>
      <div class="sc-sub">Warga terdaftar</div>
      <div class="sc-icon"><i class="bi bi-people-fill"></i></div>
    </a>
    <a href="<?php echo base_url('iuran'); ?>" class="dash-stat-card sc-green">
      <div class="sc-label"><i class="bi bi-cash-stack me-1"></i>Iuran Bulan Ini</div>
      <div class="sc-value">Rp <?php echo number_format($total_iuran_bulan_ini,0,',','.'); ?></div>
      <div class="sc-sub">Total terkumpul</div>
      <div class="sc-icon"><i class="bi bi-cash-stack"></i></div>
    </a>
    <a href="<?php echo base_url('iuran'); ?>" class="dash-stat-card sc-red">
      <div class="sc-label"><i class="bi bi-exclamation-triangle me-1"></i>Tunggakan</div>
      <div class="sc-value">Rp <?php echo number_format($total_tunggakan,0,',','.'); ?></div>
      <div class="sc-sub">Belum dibayar</div>
      <div class="sc-icon"><i class="bi bi-exclamation-triangle-fill"></i></div>
    </a>
    <a href="<?php echo base_url('kas'); ?>" class="dash-stat-card sc-sky">
      <div class="sc-label"><i class="bi bi-bank me-1"></i>Saldo Kas</div>
      <div class="sc-value">Rp <?php echo number_format($saldo_kas,0,',','.'); ?></div>
      <div class="sc-sub">Saldo kas RT</div>
      <div class="sc-icon"><i class="bi bi-bank"></i></div>
    </a>
  </div>

  <!-- ── Stat Row 2 ── -->
  <div class="stat-grid-4 anim-3">
    <a href="<?php echo base_url('tabungan'); ?>" class="dash-stat-card sc-blue">
      <div class="sc-label"><i class="bi bi-piggy-bank-fill me-1"></i>Total Tabungan</div>
      <div class="sc-value">Rp <?php echo number_format($total_tabungan,0,',','.'); ?></div>
      <div class="sc-sub">Dari <?php echo number_format($jumlah_penabung); ?> penabung</div>
      <div class="sc-icon"><i class="bi bi-piggy-bank-fill"></i></div>
    </a>
    <a href="<?php echo base_url($total_pending_pinjaman>0 ? 'pinjaman/verifikasi_pembayaran_list' : 'pinjaman'); ?>" class="dash-stat-card sc-amber">
      <?php if($total_pending_pinjaman>0): ?><span class="sc-notif"><i class="bi bi-clock me-1"></i><?php echo $total_pending_pinjaman; ?> Pending</span><?php endif; ?>
      <div class="sc-label"><i class="bi bi-cash-coin me-1"></i>Pinjaman Aktif</div>
      <div class="sc-value">Rp <?php echo number_format($total_pinjaman_dicairkan,0,',','.'); ?></div>
      <div class="sc-sub"><?php echo number_format($jumlah_pinjaman_aktif); ?> pinjaman aktif</div>
      <div class="sc-icon"><i class="bi bi-cash-coin"></i></div>
      <?php if($total_pending_pinjaman>0): ?>
      <a href="<?php echo base_url('pinjaman/verifikasi_pembayaran_list'); ?>" class="sc-action-btn" onclick="event.stopPropagation()">
        <i class="bi bi-clock-history"></i>Verifikasi <?php echo $total_pending_pinjaman; ?>
      </a>
      <?php endif; ?>
    </a>
    <!-- Iuran Pending Card (gabungan penuh + cicilan) -->
    <a href="<?php echo base_url('iuran'); ?>" class="dash-stat-card sc-emerald">
      <?php if($total_iuran_semua_pending>0): ?>
        <span class="sc-notif"><i class="bi bi-clock me-1"></i><?php echo $total_iuran_semua_pending; ?> Pending</span>
      <?php endif; ?>
      <div class="sc-label"><i class="bi bi-cash-stack me-1"></i>Iuran Pending</div>
      <div class="sc-value"><?php echo $total_iuran_semua_pending; ?></div>
      <div class="sc-sub">
        <?php
          $parts = [];
          if($total_pending_iuran  > 0) $parts[] = $total_pending_iuran  . ' penuh';
          if($total_pending_cicilan> 0) $parts[] = $total_pending_cicilan . ' cicilan';
          echo $parts ? implode(' · ', $parts) : 'Tidak ada pending';
        ?>
      </div>
      <div class="sc-icon"><i class="bi bi-cash-stack"></i></div>
      <?php if($total_iuran_semua_pending>0): ?>
      <span class="sc-action-btn"><i class="bi bi-check-circle"></i>Verifikasi Sekarang</span>
      <?php endif; ?>
    </a>
    <a href="<?php echo base_url('pinjaman/laporan'); ?>" class="dash-stat-card sc-violet">
      <div class="sc-label"><i class="bi bi-receipt me-1"></i>Piutang Pinjaman</div>
      <div class="sc-value">Rp <?php echo number_format($total_piutang_pinjaman,0,',','.'); ?></div>
      <div class="sc-sub">Belum terbayar</div>
      <div class="sc-icon"><i class="bi bi-receipt"></i></div>
    </a>
  </div>

  <!-- ── Tabel Pending ── -->
  <?php if($has_pending):
    $cp = build_combined_pending(
        $pembayaran_pending_list  ?? [],
        $pembayaran_iuran_pending ?? [],
        $cicilan_iuran_pending    ?? [],
        8
    );
  ?>
  <div class="pending-card anim-4">
    <div class="pending-head">
      <div>
        <h5><i class="bi bi-clock-history me-2" style="color:var(--amber-500)"></i>Pembayaran Menunggu Verifikasi</h5>
        <small>Klik "Verifikasi" untuk memproses · <?php echo $total_all_pending; ?> total pending</small>
      </div>
    </div>
    <div class="pending-table-wrap">
      <table class="pending-table">
        <thead>
          <tr>
            <th>Jenis</th><th>Warga</th><th>Detail</th>
            <th class="text-end">Nominal</th><th>Metode</th><th>Waktu</th>
            <th class="text-center">Aksi</th>
          </tr>
        </thead>
        <tbody>
        <?php foreach($cp as $item):
          $isp = ($item['type']==='pinjaman');
          $isc = ($item['type']==='cicilan');
          $d   = $item['data'];
          $lnk = $isp ? base_url('pinjaman/verifikasi_pembayaran/'.$d->id)
                      : ($isc ? base_url('iuran/verifikasi_cicilan/'.$d->id)
                               : base_url('iuran/verifikasi/'.$d->id));
          $mt  = $isp ? ($d->metode_bayar??'transfer') : ($d->metode_pembayaran??'transfer');
          $nm  = $isp ? ($d->nominal_bayar??0) : ($isc ? ($d->nominal_cicilan??0) : ($d->nominal??0));
          // FIX: gunakan safe_strtotime agar null tidak menyebabkan deprecated notice
          $waktu = !empty($d->created_at) ? date('d M Y H:i', strtotime($d->created_at)) : '-';
        ?>
        <tr>
          <td>
            <?php if($isp): ?>
              <span class="badge-pinjaman"><i class="bi bi-cash-coin"></i>Pinjaman</span>
            <?php elseif($isc): ?>
              <span class="badge-cicilan"><i class="bi bi-credit-card"></i>Cicilan</span>
            <?php else: ?>
              <span class="badge-iuran"><i class="bi bi-cash-stack"></i>Iuran</span>
            <?php endif; ?>
          </td>
          <td style="font-weight:700"><?php echo htmlspecialchars($d->nama_lengkap); ?></td>
          <td>
            <?php if($isp): ?>
              <?php echo $d->kode_pinjaman; ?>
              <small class="d-block" style="color:var(--slate-400)">Angsuran Ke-<?php echo $d->angsuran_ke; ?></small>
            <?php elseif($isc): ?>
              <?php echo $d->nama_iuran; ?>
              <span style="font-size:.7rem;background:var(--teal-50);color:var(--teal-700);border-radius:4px;padding:1px 5px;margin-left:3px;">Ke-<?php echo $d->ke; ?></span>
              <small class="d-block" style="color:var(--slate-400)">
                Terbayar: Rp <?php echo number_format($d->nominal_tagihan??0,0,',','.'); ?> total
              </small>
            <?php else: ?>
              <?php echo $d->nama_iuran??'Iuran Bulanan'; ?>
              <small class="d-block" style="color:var(--slate-400)"><?php echo $d->bulan??date('M Y'); ?></small>
            <?php endif; ?>
          </td>
          <td class="text-end" style="font-weight:700;color:var(--green-600)">
            Rp <?php echo number_format($nm,0,',','.'); ?>
          </td>
          <td><small><?php echo ucfirst(str_replace('_',' ',$mt)); ?></small></td>
          <td>
            <small style="color:var(--slate-400)">
              <i class="bi bi-clock me-1"></i><?php echo $waktu; ?>
            </small>
          </td>
          <td class="text-center">
            <a href="<?php echo $lnk; ?>" class="btn-verif-sm"><i class="bi bi-check-lg"></i>Verifikasi</a>
          </td>
        </tr>
        <?php endforeach; ?>
        </tbody>
      </table>
    </div>
    <?php if($total_all_pending > 8): ?>
    <div style="padding:10px 18px;text-align:center;font-size:.76rem;color:var(--slate-400);border-top:1px solid var(--slate-100);">
      + <?php echo $total_all_pending - 8; ?> pembayaran lainnya —
      <a href="<?php echo base_url('iuran'); ?>" style="color:var(--teal-600);font-weight:700;">Lihat Semua</a>
    </div>
    <?php endif; ?>
  </div>
  <?php endif; ?>

  <!-- ── Info Row ── -->
  <div class="info-wrap anim-5">
    <div class="info-card">
      <div class="info-head"><i class="bi bi-file-text"></i> Permohonan Surat Pending</div>
      <div class="info-body">
        <div class="d-flex align-items-center justify-content-between gap-3">
          <div>
            <div style="font-size:.82rem;color:var(--slate-500);margin-bottom:6px;">Total surat menunggu diproses</div>
            <div class="surat-count"><?php echo $surat_pending; ?></div>
          </div>
          <a href="<?php echo base_url('surat'); ?>" class="dc-cta cta-amber" style="width:auto;white-space:nowrap;">
            <i class="bi bi-eye"></i> Lihat Detail
          </a>
        </div>
      </div>
    </div>
    <div class="info-card">
      <div class="info-head"><i class="bi bi-clock-history"></i> Pembayaran Iuran Terbaru</div>
      <div class="info-body">
        <?php if(!empty($pembayaran_terbaru)): foreach($pembayaran_terbaru as $p): ?>
        <div class="pay-item">
          <div>
            <div class="pay-name"><?php echo htmlspecialchars($p->nama_lengkap); ?></div>
            <div class="pay-sub"><?php echo $p->nama_iuran; ?></div>
          </div>
          <div style="text-align:right">
            <div class="pay-nom">Rp <?php echo number_format($p->nominal,0,',','.'); ?></div>
            <!-- FIX: cek empty sebelum date() agar tidak tampil 01/01/1970 -->
            <div class="pay-date"><?php echo !empty($p->tanggal_bayar) ? date('d/m/Y', strtotime($p->tanggal_bayar)) : '-'; ?></div>
          </div>
        </div>
        <?php endforeach; else: ?>
        <div class="m-empty"><i class="bi bi-inbox"></i>Belum ada pembayaran</div>
        <?php endif; ?>
      </div>
    </div>
  </div>

  <?php else: /* ─────────── WARGA DESKTOP ─────────── */ ?>

  <!-- ── Warga Stat Row 1 ── -->
  <div class="stat-grid-3 anim-2">
    <a href="<?php echo base_url('iuran'); ?>" class="dash-stat-card sc-red">
      <div class="sc-label"><i class="bi bi-exclamation-circle me-1"></i>Tagihan Bulan Ini</div>
      <div class="sc-value"><?php echo $tagihan_bulan_ini; ?></div>
      <div class="sc-sub"><?php echo $tagihan_bulan_ini>0 ? 'Belum dibayar' : 'Sudah lunas ✓'; ?></div>
      <div class="sc-icon"><i class="bi bi-exclamation-circle-fill"></i></div>
      <?php if($tagihan_bulan_ini>0): ?>
      <span class="sc-action-btn"><i class="bi bi-credit-card"></i>Bayar Sekarang</span>
      <?php endif; ?>
    </a>
    <a href="<?php echo base_url('iuran'); ?>" class="dash-stat-card sc-amber">
      <div class="sc-label"><i class="bi bi-cash-stack me-1"></i>Total Tunggakan</div>
      <div class="sc-value">Rp <?php echo number_format($total_tunggakan,0,',','.'); ?></div>
      <div class="sc-sub">Harus segera dibayar</div>
      <div class="sc-icon"><i class="bi bi-cash-stack"></i></div>
      <?php if($total_tunggakan>0): ?>
      <span class="sc-action-btn"><i class="bi bi-eye"></i>Lihat Detail</span>
      <?php endif; ?>
    </a>
    <a href="<?php echo base_url('surat'); ?>" class="dash-stat-card sc-sky">
      <div class="sc-label"><i class="bi bi-file-text me-1"></i>Surat Dalam Proses</div>
      <div class="sc-value"><?php echo $surat_proses; ?></div>
      <div class="sc-sub">Menunggu diproses</div>
      <div class="sc-icon"><i class="bi bi-file-text-fill"></i></div>
      <span class="sc-action-btn"><i class="bi bi-plus-circle"></i>Ajukan Surat</span>
    </a>
  </div>

  <!-- ── Warga Stat Row 2 ── -->
  <div class="stat-grid-2 anim-3">
    <a href="<?php echo base_url('tabungan'); ?>" class="dash-stat-card sc-blue">
      <div class="sc-label"><i class="bi bi-piggy-bank-fill me-1"></i>Tabungan Saya</div>
      <div class="sc-value">Rp <?php echo number_format($saldo_tabungan_saya,0,',','.'); ?></div>
      <div class="sc-sub">Saldo tersedia</div>
      <div class="sc-icon"><i class="bi bi-piggy-bank-fill"></i></div>
    </a>
    <a href="<?php echo base_url('pinjaman'); ?>" class="dash-stat-card sc-amber">
      <div class="sc-label"><i class="bi bi-cash-coin me-1"></i>Pinjaman Saya</div>
      <div class="sc-value">Rp <?php echo number_format($sisa_pinjaman_saya,0,',','.'); ?></div>
      <div class="sc-sub"><?php echo $sisa_pinjaman_saya>0 ? 'Sisa yang harus dibayar' : 'Tidak ada pinjaman aktif'; ?></div>
      <div class="sc-icon"><i class="bi bi-cash-coin"></i></div>
    </a>
  </div>

  <!-- ── Iuran Bercicilan (Warga) ── -->
  <?php if(!empty($iuran_dengan_cicilan)): ?>
  <div class="cicilan-card anim-4">
    <div class="cicilan-head">
      <h5><i class="bi bi-credit-card-fill me-2" style="color:var(--teal-500)"></i>Tagihan Dalam Cicilan</h5>
      <a href="<?php echo base_url('iuran'); ?>" style="font-size:.75rem;color:var(--teal-600);font-weight:700;text-decoration:none;">Lihat Semua →</a>
    </div>
    <div class="cicilan-body">
      <?php
        $bulan_nm = ['','Jan','Feb','Mar','Apr','Mei','Jun','Jul','Ags','Sep','Okt','Nov','Des'];
        foreach($iuran_dengan_cicilan as $ic):
          $terbayar = $ic->total_terbayar ?: 0;
          $persen   = $ic->nominal > 0 ? round(($terbayar/$ic->nominal)*100) : 0;
          $sisa     = $ic->nominal - $terbayar;
      ?>
      <div class="cicilan-row">
        <div class="cicilan-icon"><i class="bi bi-receipt"></i></div>
        <div class="cicilan-info">
          <div class="cicilan-name"><?php echo htmlspecialchars($ic->nama_iuran); ?></div>
          <div class="cicilan-meta">
            <?php echo $bulan_nm[(int)$ic->periode_bulan].' '.$ic->periode_tahun; ?>
          </div>
          <a href="<?php echo base_url('iuran/cicil/'.$ic->id); ?>" class="btn-lanjut-cicil">
            <i class="bi bi-plus-circle"></i>Lanjut Cicil
          </a>
        </div>
        <div class="cicilan-prog-wrap">
          <div class="cicilan-prog-track">
            <div class="cicilan-prog-fill" style="width:<?php echo $persen; ?>%"></div>
          </div>
          <div class="cicilan-prog-lbl"><?php echo $persen; ?>% lunas</div>
        </div>
        <div class="cicilan-amount">
          <div class="cicilan-paid">Rp <?php echo number_format($terbayar,0,',','.'); ?></div>
          <div class="cicilan-remain">Sisa Rp <?php echo number_format($sisa,0,',','.'); ?></div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
  <?php endif; ?>

  <!-- ── Kas Banner ── -->
  <div class="kas-banner anim-5">
    <div class="kas-banner-left">
      <div class="kas-banner-icon"><i class="bi bi-cash-coin"></i></div>
      <div>
        <div class="kas-banner-label">Saldo Kas RT</div>
        <div class="kas-banner-value">Rp <?php echo number_format($saldo_kas,0,',','.'); ?></div>
      </div>
    </div>
    <a href="<?php echo base_url('kas'); ?>" class="dc-action"><i class="bi bi-eye"></i> Lihat Laporan</a>
  </div>

  <!-- ── Quick Menu Warga ── -->
  <div class="info-card anim-5">
    <div class="info-head"><i class="bi bi-grid-3x3-gap"></i> Menu Cepat</div>
    <div class="info-body">
      <div class="quick-grid">
        <a href="<?php echo base_url('iuran'); ?>" class="quick-card" style="--qc:#14b8a6"><div class="qm-icon"><i class="bi bi-cash-stack"></i></div><h6>Iuran</h6><small>Lihat & Bayar</small></a>
        <a href="<?php echo base_url('tabungan'); ?>" class="quick-card" style="--qc:var(--blue-500)"><div class="qm-icon"><i class="bi bi-wallet2"></i></div><h6>Tabungan</h6><small>Cek Saldo</small></a>
        <a href="<?php echo base_url('pinjaman'); ?>" class="quick-card" style="--qc:var(--amber-500)"><div class="qm-icon"><i class="bi bi-cash-coin"></i></div><h6>Pinjaman</h6><small>Ajukan</small></a>
        <a href="<?php echo base_url('pengumuman'); ?>" class="quick-card" style="--qc:var(--violet-600)"><div class="qm-icon"><i class="bi bi-megaphone-fill"></i></div><h6>Pengumuman</h6><small>Lihat Info</small></a>
      </div>
    </div>
  </div>

  <?php endif; ?>
</div><!-- /desktop-dash -->


<!-- ════════════════════ MOBILE ════════════════════ -->
<div class="mobile-dash">

  <div style="padding:0 0 10px 0;">
    <?php $this->load->view('dashboard/_widget_cuaca'); ?>
  </div>

  <!-- Hero -->
  <div class="m-hero anim-1">
    <div class="m-hero-role"><?php echo is_admin() ? 'Administrator' : 'Warga'; ?></div>
    <div class="m-hero-name">👋 <?php echo $this->session->userdata('nama'); ?></div>
    <?php if(!empty($pengaturan)): ?>
    <div style="display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:6px 10px;margin-bottom:10px;font-size:.72rem;color:rgba(255,255,255,.9);position:relative;z-index:1;">
      <i class="bi bi-geo-alt-fill" style="flex-shrink:0;font-size:.8rem;"></i>
      <div>
        <span style="font-weight:800;"><?php echo $pengaturan->nama_rt ?? 'RT'; ?> / <?php echo $pengaturan->nama_rw ?? 'RW'; ?></span>
        <?php if(!empty($pengaturan->nama_kelurahan)): ?> · <?php echo $pengaturan->nama_kelurahan; ?><?php endif; ?>
        <?php if(!empty($pengaturan->nama_kecamatan)): ?> · Kec. <?php echo $pengaturan->nama_kecamatan; ?><?php endif; ?>
      </div>
    </div>
    <?php endif; ?>
    <div class="m-hero-stats">
      <?php if(is_admin()): ?>
        <a href="<?php echo base_url('warga'); ?>" class="m-stat-pill"><div class="spl">Warga</div><div class="spv"><?php echo number_format($total_warga); ?></div></a>
        <a href="<?php echo base_url('kas'); ?>" class="m-stat-pill"><div class="spl">Kas RT</div><div class="spv">Rp <?php echo number_format($saldo_kas/1000,0,',','.'); ?>K</div></a>
        <a href="<?php echo base_url('iuran'); ?>" class="m-stat-pill"><div class="spl">Iuran</div><div class="spv">Rp <?php echo number_format($total_iuran_bulan_ini/1000,0,',','.'); ?>K</div></a>
        <a href="<?php echo base_url('iuran'); ?>" class="m-stat-pill"><div class="spl">Tunggakan</div><div class="spv danger">Rp <?php echo number_format($total_tunggakan/1000,0,',','.'); ?>K</div></a>
        <?php if($total_all_pending>0): ?>
        <a href="<?php echo base_url('iuran'); ?>" class="m-stat-pill"><div class="spl">Pending</div><div class="spv warn"><?php echo $total_all_pending; ?> item</div></a>
        <?php endif; ?>
      <?php else: ?>
        <a href="<?php echo base_url('iuran'); ?>" class="m-stat-pill"><div class="spl">Tagihan</div><div class="spv <?php echo $tagihan_bulan_ini>0?'danger':''; ?>"><?php echo $tagihan_bulan_ini>0 ? $tagihan_bulan_ini.' item' : 'Lunas ✓'; ?></div></a>
        <a href="<?php echo base_url('tabungan'); ?>" class="m-stat-pill"><div class="spl">Tabungan</div><div class="spv">Rp <?php echo number_format($saldo_tabungan_saya/1000,0,',','.'); ?>K</div></a>
        <a href="<?php echo base_url('pinjaman'); ?>" class="m-stat-pill"><div class="spl">Pinjaman</div><div class="spv warn">Rp <?php echo number_format($sisa_pinjaman_saya/1000,0,',','.'); ?>K</div></a>
        <a href="<?php echo base_url('kas'); ?>" class="m-stat-pill"><div class="spl">Kas RT</div><div class="spv">Rp <?php echo number_format($saldo_kas/1000,0,',','.'); ?>K</div></a>
      <?php endif; ?>
    </div>
  </div>

  <!-- Alert Strip -->
  <?php if($has_pending): ?>
  <div class="m-alert-strip anim-1">
    <i class="bi bi-bell-fill"></i>
    <div class="mas-body">
      <div class="mas-title"><?php echo $total_all_pending; ?> pembayaran pending</div>
      <div class="mas-sub">
        <?php
          $parts = [];
          if($total_pending_pinjaman > 0) $parts[] = $total_pending_pinjaman.' pinjaman';
          if($total_pending_iuran    > 0) $parts[] = $total_pending_iuran.' iuran';
          if($total_pending_cicilan  > 0) $parts[] = $total_pending_cicilan.' cicilan';
          echo implode(' · ', $parts);
        ?>
      </div>
    </div>
    <a href="<?php echo base_url($total_pending_pinjaman>0 ? 'pinjaman/verifikasi_pembayaran_list' : 'iuran'); ?>" class="mas-btn">Lihat →</a>
  </div>
  <?php endif; ?>

  <!-- ── Widget Ulang Tahun (Mobile) ── -->
  <?php if(!empty($ulang_tahun_bulan_ini)): ?>
  <div class="m-alert-strip anim-1" style="background:linear-gradient(135deg,var(--sky-50),#eff6ff);border-color:rgba(14,165,233,.2);border-left-color:var(--sky-500);align-items:flex-start;">
    <i class="bi bi-gift-fill" style="color:var(--sky-500);font-size:1.4rem;"></i>
    <div class="mas-body">
      <div class="d-flex justify-content-between align-items-center mb-1">
        <div class="mas-title" style="color:var(--sky-800);">Ulang Tahun Bulan Ini 🎂</div>
        <?php if(is_admin()): ?>
          <button onclick="document.getElementById('btnBroadcastUltah').click()" style="background:var(--sky-500); color:#fff; border:none; border-radius:6px; padding:2px 8px; font-size:0.65rem; font-weight:700;">
            <i class="bi bi-send-fill"></i> Broadcast
          </button>
        <?php endif; ?>
      </div>
      <div style="display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;">
        <?php foreach($ulang_tahun_bulan_ini as $ut): 
          $tgl = date('d M', strtotime($ut->tanggal_lahir));
          $is_today = (date('m-d') == date('m-d', strtotime($ut->tanggal_lahir)));
          $bg = $is_today ? 'background:linear-gradient(135deg,var(--amber-500),var(--amber-600));color:#fff;border:none;' : 'background:#fff;border:1px solid rgba(14,165,233,.3);color:var(--sky-700);';
          
          $wa_link = '';
          if ($is_today && !empty($ut->no_hp)) {
             $no_hp = preg_replace('/[^0-9]/', '', $ut->no_hp);
             if(substr($no_hp, 0, 1) == '0') $no_hp = '62' . substr($no_hp, 1);
             $pesan_wa_1 = "Selamat Ulang Tahun, *" . $ut->nama_lengkap . "*!";
             $pesan_wa_2 = "Semoga panjang umur, sehat selalu, dan dilancarkan rezekinya. Salam hangat dari seluruh Pengurus RT.";
             $wa_url = "https://wa.me/" . $no_hp . "?text=" . rawurlencode($pesan_wa_1) . "%0A%0A" . rawurlencode($pesan_wa_2);
             $wa_link = '<a href="'.$wa_url.'" target="_blank" title="Kirim Ucapan via WA Link" style="color:#fff;margin-left:5px;text-decoration:none;"><i class="bi bi-whatsapp"></i></a>';
             if(is_admin()) {
               $wa_link .= '<button onclick="kirimUltahWaById('.$ut->id.', \''.addslashes($ut->nama_lengkap).'\')" title="Kirim WA Otomatis (WAHA)" style="background:transparent; border:none; color:#fff; margin-left:5px; padding:0; cursor:pointer;"><i class="bi bi-send-fill"></i></button>';
             }
          }
        ?>
        <span style="border-radius:12px;padding:3px 8px;font-size:0.65rem;font-weight:700;display:inline-block;<?php echo $bg; ?>">
          <?php echo htmlspecialchars($ut->nama_lengkap); ?> (<?php echo $tgl; ?>) <?php echo $wa_link; ?>
        </span>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
  <?php endif; ?>

  <!-- Cicilan strip untuk warga mobile -->
  <?php if(!is_admin() && !empty($iuran_dengan_cicilan)): ?>
  <div class="m-cicilan-strip">
    <div class="m-cicilan-strip-head">
      <i class="bi bi-credit-card-fill" style="color:var(--teal-500)"></i>
      Tagihan Dalam Cicilan
    </div>
    <?php
      $bulan_nm = ['','Jan','Feb','Mar','Apr','Mei','Jun','Jul','Ags','Sep','Okt','Nov','Des'];
      foreach($iuran_dengan_cicilan as $ic):
        $terbayar = $ic->total_terbayar ?: 0;
        $persen   = $ic->nominal > 0 ? round(($terbayar/$ic->nominal)*100) : 0;
        $sisa     = $ic->nominal - $terbayar;
    ?>
    <div class="m-cicilan-item">
      <div class="m-cicilan-item-icon"><i class="bi bi-receipt"></i></div>
      <div class="m-cicilan-item-body">
        <div class="m-cicilan-item-name"><?php echo htmlspecialchars($ic->nama_iuran); ?></div>
        <div class="m-cicilan-item-meta"><?php echo $bulan_nm[(int)$ic->periode_bulan].' '.$ic->periode_tahun; ?></div>
        <div class="m-cicilan-prog-track">
          <div class="m-cicilan-prog-fill" style="width:<?php echo $persen; ?>%"></div>
        </div>
      </div>
      <div class="m-cicilan-item-right">
        <div class="m-cicilan-pct"><?php echo $persen; ?>%</div>
        <div class="m-cicilan-sisa">Sisa Rp <?php echo number_format($sisa/1000,0,',','.'); ?>K</div>
        <a href="<?php echo base_url('iuran/cicil/'.$ic->id); ?>" style="display:inline-block;margin-top:4px;font-size:.68rem;font-weight:700;color:var(--teal-600);">
          Cicil →
        </a>
      </div>
    </div>
    <?php endforeach; ?>
  </div>
  <?php endif; ?>

  <!-- Tab Nav -->
  <div class="m-tabs anim-2">
    <?php if(is_admin()): ?>
    <button class="m-tab active" onclick="mTab('ringkasan')" id="tab-ringkasan"><i class="bi bi-grid-1x2"></i>Ringkasan</button>
    <button class="m-tab" onclick="mTab('keuangan')" id="tab-keuangan"><i class="bi bi-cash-stack"></i>Keuangan</button>
    <button class="m-tab" onclick="mTab('pending')" id="tab-pending">
      <i class="bi bi-clock-history"></i>Pending
      <span class="tab-notif <?php echo $has_pending ? 'show' : ''; ?>"></span>
    </button>
    <button class="m-tab" onclick="mTab('menu')" id="tab-menu"><i class="bi bi-grid"></i>Menu</button>
    <?php else: ?>
    <button class="m-tab active" onclick="mTab('ringkasan')" id="tab-ringkasan"><i class="bi bi-grid-1x2"></i>Ringkasan</button>
    <button class="m-tab" onclick="mTab('keuangan')" id="tab-keuangan"><i class="bi bi-wallet2"></i>Keuangan</button>
    <button class="m-tab" onclick="mTab('menu')" id="tab-menu"><i class="bi bi-grid"></i>Menu</button>
    <?php endif; ?>
  </div>

  <?php if(is_admin()): ?>

  <!-- ADMIN: Ringkasan -->
  <div class="m-panel active" id="panel-ringkasan">
    <div class="m-grid-2">
      <a href="<?php echo base_url('warga'); ?>" class="m-mini-card mc-teal">
        <div class="mmc-icon"><i class="bi bi-people-fill"></i></div>
        <div class="mmc-label">Total Warga</div>
        <div class="mmc-val"><?php echo number_format($total_warga); ?></div>
        <div class="mmc-sub">Warga terdaftar</div>
      </a>
      <a href="<?php echo base_url('kas'); ?>" class="m-mini-card mc-sky">
        <div class="mmc-icon"><i class="bi bi-bank"></i></div>
        <div class="mmc-label">Saldo Kas</div>
        <div class="mmc-val">Rp <?php echo number_format($saldo_kas,0,',','.'); ?></div>
      </a>
      <a href="<?php echo base_url('pinjaman/laporan'); ?>" class="m-mini-card mc-violet">
        <div class="mmc-icon"><i class="bi bi-receipt"></i></div>
        <div class="mmc-label">Piutang</div>
        <div class="mmc-val">Rp <?php echo number_format($total_piutang_pinjaman,0,',','.'); ?></div>
        <div class="mmc-sub">Belum terbayar</div>
      </a>
      <a href="<?php echo base_url('surat'); ?>" class="m-mini-card mc-amber">
        <div class="mmc-icon"><i class="bi bi-file-text"></i></div>
        <div class="mmc-label">Surat Pending</div>
        <div class="mmc-val"><?php echo $surat_pending; ?></div>
      </a>
    </div>
    <?php if(!empty($pembayaran_terbaru)): ?>
    <div class="m-section-label"><i class="bi bi-clock-history" style="color:var(--teal-500)"></i>Pembayaran Terbaru</div>
    <div class="m-pay-list">
      <div class="m-pay-head"><i class="bi bi-cash-stack"></i>Iuran Terbaru</div>
      <?php foreach($pembayaran_terbaru as $p): ?>
      <div class="m-pay-row">
        <div>
          <div class="m-pay-name"><?php echo htmlspecialchars($p->nama_lengkap); ?></div>
          <div class="m-pay-sub"><?php echo $p->nama_iuran; ?></div>
        </div>
        <div>
          <div class="m-pay-nom">Rp <?php echo number_format($p->nominal,0,',','.'); ?></div>
          <!-- FIX: cek empty sebelum date() -->
          <div class="m-pay-date"><?php echo !empty($p->tanggal_bayar) ? date('d/m/Y', strtotime($p->tanggal_bayar)) : '-'; ?></div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <?php endif; ?>
  </div>

  <!-- ADMIN: Keuangan -->
  <div class="m-panel" id="panel-keuangan">
    <div class="m-grid-2">
      <a href="<?php echo base_url('iuran'); ?>" class="m-mini-card mc-green">
        <div class="mmc-icon"><i class="bi bi-cash-stack"></i></div>
        <div class="mmc-label">Iuran Bln Ini</div>
        <div class="mmc-val">Rp <?php echo number_format($total_iuran_bulan_ini,0,',','.'); ?></div>
      </a>
      <a href="<?php echo base_url('iuran'); ?>" class="m-mini-card mc-red">
        <div class="mmc-icon"><i class="bi bi-exclamation-triangle-fill"></i></div>
        <div class="mmc-label">Tunggakan</div>
        <div class="mmc-val">Rp <?php echo number_format($total_tunggakan,0,',','.'); ?></div>
      </a>
      <a href="<?php echo base_url('tabungan'); ?>" class="m-mini-card mc-blue">
        <div class="mmc-icon"><i class="bi bi-piggy-bank-fill"></i></div>
        <div class="mmc-label">Total Tabungan</div>
        <div class="mmc-val">Rp <?php echo number_format($total_tabungan,0,',','.'); ?></div>
        <div class="mmc-sub"><?php echo $jumlah_penabung; ?> penabung</div>
      </a>
      <a href="<?php echo base_url($total_pending_pinjaman>0 ? 'pinjaman/verifikasi_pembayaran_list' : 'pinjaman'); ?>" class="m-mini-card mc-amber">
        <?php if($total_pending_pinjaman>0): ?><span class="mmc-notif"><?php echo $total_pending_pinjaman; ?></span><?php endif; ?>
        <div class="mmc-icon"><i class="bi bi-cash-coin"></i></div>
        <div class="mmc-label">Pinjaman Aktif</div>
        <div class="mmc-val">Rp <?php echo number_format($total_pinjaman_dicairkan,0,',','.'); ?></div>
        <div class="mmc-sub"><?php echo $jumlah_pinjaman_aktif; ?> pinjaman</div>
      </a>
      <!-- Iuran Pending Card mobile -->
      <a href="<?php echo base_url('iuran'); ?>" class="m-mini-card mc-emerald" style="grid-column:1/-1">
        <?php if($total_iuran_semua_pending>0): ?><span class="mmc-notif"><?php echo $total_iuran_semua_pending; ?></span><?php endif; ?>
        <div class="mmc-icon"><i class="bi bi-cash-stack"></i></div>
        <div class="mmc-label">Iuran Pending</div>
        <div class="mmc-val"><?php echo $total_iuran_semua_pending; ?> item</div>
        <div class="mmc-sub">
          <?php
            $parts = [];
            if($total_pending_iuran  > 0) $parts[] = $total_pending_iuran  . ' penuh';
            if($total_pending_cicilan> 0) $parts[] = $total_pending_cicilan . ' cicilan';
            echo $parts ? implode(' · ', $parts) : 'Tidak ada pending';
          ?>
        </div>
      </a>
    </div>
  </div>

  <!-- ADMIN: Pending -->
  <div class="m-panel" id="panel-pending">
    <?php if($has_pending):
      $cp_mobile = build_combined_pending(
          $pembayaran_pending_list  ?? [],
          $pembayaran_iuran_pending ?? [],
          $cicilan_iuran_pending    ?? [],
          8
      );
    ?>
    <div class="m-section-label"><i class="bi bi-clock-history" style="color:var(--amber-500)"></i>Menunggu Verifikasi</div>
    <div class="m-pending-list">
      <?php foreach($cp_mobile as $item):
        $isp = ($item['type']==='pinjaman');
        $isc = ($item['type']==='cicilan');
        $d   = $item['data'];
        $lnk = $isp ? base_url('pinjaman/verifikasi_pembayaran/'.$d->id)
                    : ($isc ? base_url('iuran/verifikasi_cicilan/'.$d->id)
                             : base_url('iuran/verifikasi/'.$d->id));
        $mt  = $isp ? ($d->metode_bayar??'transfer') : ($d->metode_pembayaran??'transfer');
        $nm  = $isp ? ($d->nominal_bayar??0) : ($isc ? ($d->nominal_cicilan??0) : ($d->nominal??0));
        // FIX: safe date format
        $waktu_mob = !empty($d->created_at) ? date('d M, H:i', strtotime($d->created_at)) : '-';
      ?>
      <div class="mob-pend <?php echo $isc ? 'cicilan-type' : ''; ?>">
        <div class="mob-pend-top">
          <div>
            <?php if($isp): ?>
              <span class="badge-pinjaman" style="font-size:.68rem;margin-bottom:4px;display:inline-flex"><i class="bi bi-cash-coin"></i>Pinjaman</span>
            <?php elseif($isc): ?>
              <span class="badge-cicilan" style="font-size:.68rem;margin-bottom:4px;display:inline-flex"><i class="bi bi-credit-card"></i>Cicilan</span>
            <?php else: ?>
              <span class="badge-iuran" style="font-size:.68rem;margin-bottom:4px;display:inline-flex"><i class="bi bi-cash-stack"></i>Iuran</span>
            <?php endif; ?>
            <div class="mob-pend-name"><?php echo htmlspecialchars($d->nama_lengkap); ?></div>
            <div class="mob-pend-detail">
              <?php if($isp): echo $d->kode_pinjaman.' · Angsuran Ke-'.$d->angsuran_ke;
                elseif($isc): echo ($d->nama_iuran??'Iuran').' · Cicilan Ke-'.$d->ke;
                else:         echo ($d->nama_iuran??'Iuran').' · '.($d->bulan??date('M Y'));
              endif; ?>
            </div>
          </div>
          <div class="mob-pend-amount">Rp <?php echo number_format($nm,0,',','.'); ?></div>
        </div>
        <div class="mob-pend-footer">
          <div class="mob-pend-meta"><i class="bi bi-clock me-1"></i><?php echo $waktu_mob; ?></div>
          <a href="<?php echo $lnk; ?>" class="btn-verif-sm" style="font-size:.72rem;padding:5px 10px"><i class="bi bi-check-lg"></i>Verifikasi</a>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <?php if($total_all_pending > 8): ?>
    <div style="text-align:center;padding:10px 0;font-size:.74rem;color:var(--slate-400)">
      + <?php echo $total_all_pending - 8; ?> lainnya —
      <a href="<?php echo base_url('iuran'); ?>" style="color:var(--teal-600);font-weight:700;">Lihat Semua</a>
    </div>
    <?php endif; ?>
    <?php else: ?>
    <div class="m-empty"><i class="bi bi-check-circle" style="color:var(--green-500)"></i>Tidak ada pembayaran pending</div>
    <?php endif; ?>
  </div>

  <!-- ADMIN: Menu -->
  <div class="m-panel" id="panel-menu">
    <div class="m-quick-grid">
      <a href="<?php echo base_url('kas'); ?>" class="m-quick-card" style="--qc:var(--teal-600)"><div class="m-qm-icon"><i class="bi bi-bank"></i></div><span>Kas RT</span></a>
      <a href="<?php echo base_url('iuran'); ?>" class="m-quick-card" style="--qc:var(--green-500)"><div class="m-qm-icon"><i class="bi bi-cash-stack"></i></div><span>Iuran</span></a>
      <a href="<?php echo base_url('tabungan'); ?>" class="m-quick-card" style="--qc:var(--blue-500)"><div class="m-qm-icon"><i class="bi bi-piggy-bank-fill"></i></div><span>Tabungan</span></a>
      <a href="<?php echo base_url('pinjaman'); ?>" class="m-quick-card" style="--qc:var(--amber-500)"><div class="m-qm-icon"><i class="bi bi-cash-coin"></i></div><span>Pinjaman</span></a>
      <a href="<?php echo base_url('surat'); ?>" class="m-quick-card" style="--qc:var(--sky-500)"><div class="m-qm-icon"><i class="bi bi-file-text"></i></div><span>Surat</span></a>
      <a href="<?php echo base_url('warga'); ?>" class="m-quick-card" style="--qc:var(--violet-600)"><div class="m-qm-icon"><i class="bi bi-people-fill"></i></div><span>Data Warga</span></a>
      <a href="<?php echo base_url('pengumuman'); ?>" class="m-quick-card" style="--qc:#0891b2"><div class="m-qm-icon"><i class="bi bi-megaphone-fill"></i></div><span>Pengumuman</span></a>
      <a href="<?php echo base_url('laporan'); ?>" class="m-quick-card" style="--qc:var(--teal-700)"><div class="m-qm-icon"><i class="bi bi-bar-chart-fill"></i></div><span>Laporan</span></a>
    </div>
  </div>

  <?php else: /* ─────────── WARGA MOBILE ─────────── */ ?>

  <!-- WARGA: Ringkasan -->
  <div class="m-panel active" id="panel-ringkasan">
    <div class="m-grid-2">
      <a href="<?php echo base_url('iuran'); ?>" class="m-mini-card mc-red">
        <div class="mmc-icon"><i class="bi bi-exclamation-circle-fill"></i></div>
        <div class="mmc-label">Tagihan Bln Ini</div>
        <div class="mmc-val"><?php echo $tagihan_bulan_ini>0 ? $tagihan_bulan_ini.' item' : 'Lunas ✓'; ?></div>
      </a>
      <a href="<?php echo base_url('iuran'); ?>" class="m-mini-card mc-amber">
        <div class="mmc-icon"><i class="bi bi-cash-stack"></i></div>
        <div class="mmc-label">Tunggakan</div>
        <div class="mmc-val">Rp <?php echo number_format($total_tunggakan,0,',','.'); ?></div>
      </a>
      <a href="<?php echo base_url('surat'); ?>" class="m-mini-card mc-sky">
        <div class="mmc-icon"><i class="bi bi-file-text-fill"></i></div>
        <div class="mmc-label">Surat Proses</div>
        <div class="mmc-val"><?php echo $surat_proses; ?></div>
      </a>
      <a href="<?php echo base_url('kas'); ?>" class="m-mini-card mc-teal">
        <div class="mmc-icon"><i class="bi bi-bank"></i></div>
        <div class="mmc-label">Kas RT</div>
        <div class="mmc-val">Rp <?php echo number_format($saldo_kas,0,',','.'); ?></div>
      </a>
    </div>
  </div>

  <!-- WARGA: Keuangan -->
  <div class="m-panel" id="panel-keuangan">
    <a href="<?php echo base_url('tabungan'); ?>" class="m-pill-link" style="background:linear-gradient(135deg,#1d4ed8,var(--blue-500),#60a5fa);box-shadow:0 5px 18px rgba(37,99,235,.28);">
      <div class="mpl-left"><div class="mpl-label">Tabungan Saya</div><div class="mpl-value">Rp <?php echo number_format($saldo_tabungan_saya,0,',','.'); ?></div></div>
      <div class="mpl-icon"><i class="bi bi-piggy-bank-fill"></i></div>
    </a>
    <a href="<?php echo base_url('pinjaman'); ?>" class="m-pill-link" style="background:linear-gradient(135deg,#b45309,var(--amber-600),#fbbf24);box-shadow:0 5px 18px rgba(217,119,6,.28);">
      <div class="mpl-left"><div class="mpl-label">Pinjaman Saya</div><div class="mpl-value">Rp <?php echo number_format($sisa_pinjaman_saya,0,',','.'); ?></div></div>
      <div class="mpl-icon"><i class="bi bi-cash-coin"></i></div>
    </a>
    <a href="<?php echo base_url('kas'); ?>" class="m-pill-link" style="background:linear-gradient(135deg,var(--teal-800),var(--teal-600),var(--teal-400));box-shadow:0 5px 18px rgba(13,148,136,.28);">
      <div class="mpl-left"><div class="mpl-label">Saldo Kas RT</div><div class="mpl-value">Rp <?php echo number_format($saldo_kas,0,',','.'); ?></div></div>
      <div class="mpl-icon"><i class="bi bi-bank"></i></div>
    </a>
    <!-- Cicilan progress mobile dalam tab keuangan -->
    <?php if(!empty($iuran_dengan_cicilan)): ?>
    <div style="height:10px"></div>
    <div class="m-section-label"><i class="bi bi-credit-card-fill" style="color:var(--teal-500)"></i>Dalam Cicilan</div>
    <div class="m-cicilan-strip">
      <?php
        $bulan_nm = ['','Jan','Feb','Mar','Apr','Mei','Jun','Jul','Ags','Sep','Okt','Nov','Des'];
        foreach($iuran_dengan_cicilan as $ic):
          $terbayar = $ic->total_terbayar ?: 0;
          $persen   = $ic->nominal > 0 ? round(($terbayar/$ic->nominal)*100) : 0;
          $sisa     = $ic->nominal - $terbayar;
      ?>
      <div class="m-cicilan-item">
        <div class="m-cicilan-item-icon"><i class="bi bi-receipt"></i></div>
        <div class="m-cicilan-item-body">
          <div class="m-cicilan-item-name"><?php echo htmlspecialchars($ic->nama_iuran); ?></div>
          <div class="m-cicilan-item-meta"><?php echo $bulan_nm[(int)$ic->periode_bulan].' '.$ic->periode_tahun; ?></div>
          <div class="m-cicilan-prog-track">
            <div class="m-cicilan-prog-fill" style="width:<?php echo $persen; ?>%"></div>
          </div>
        </div>
        <div class="m-cicilan-item-right">
          <div class="m-cicilan-pct"><?php echo $persen; ?>%</div>
          <div class="m-cicilan-sisa">Sisa Rp <?php echo number_format($sisa/1000,0,',','.'); ?>K</div>
          <a href="<?php echo base_url('iuran/cicil/'.$ic->id); ?>" style="display:inline-block;margin-top:4px;font-size:.68rem;font-weight:700;color:var(--teal-600);">Cicil →</a>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <?php endif; ?>
  </div>

  <!-- WARGA: Menu -->
  <div class="m-panel" id="panel-menu">
    <div class="m-quick-grid">
      <a href="<?php echo base_url('iuran'); ?>" class="m-quick-card" style="--qc:#14b8a6"><div class="m-qm-icon"><i class="bi bi-cash-stack"></i></div><span>Iuran Saya</span></a>
      <a href="<?php echo base_url('tabungan'); ?>" class="m-quick-card" style="--qc:var(--blue-500)"><div class="m-qm-icon"><i class="bi bi-wallet2"></i></div><span>Tabungan</span></a>
      <a href="<?php echo base_url('pinjaman'); ?>" class="m-quick-card" style="--qc:var(--amber-500)"><div class="m-qm-icon"><i class="bi bi-cash-coin"></i></div><span>Pinjaman</span></a>
      <a href="<?php echo base_url('surat'); ?>" class="m-quick-card" style="--qc:var(--sky-500)"><div class="m-qm-icon"><i class="bi bi-file-text"></i></div><span>Surat</span></a>
      <a href="<?php echo base_url('pengumuman'); ?>" class="m-quick-card" style="--qc:var(--violet-600)"><div class="m-qm-icon"><i class="bi bi-megaphone-fill"></i></div><span>Pengumuman</span></a>
      <a href="<?php echo base_url('kas'); ?>" class="m-quick-card" style="--qc:var(--teal-600)"><div class="m-qm-icon"><i class="bi bi-bank"></i></div><span>Kas RT</span></a>
    </div>
  </div>

  <?php endif; ?>
</div><!-- /mobile-dash -->

</div><!-- /dashboard-wrapper -->

<script>
function mTab(name) {
  document.querySelectorAll('.m-tab').forEach(t => t.classList.remove('active'));
  document.querySelectorAll('.m-panel').forEach(p => p.classList.remove('active'));
  var tab   = document.getElementById('tab-' + name);
  var panel = document.getElementById('panel-' + name);
  if (tab)   tab.classList.add('active');
  if (panel) panel.classList.add('active');
}

// ── WAHA Birthday Messaging Logic ──
function showToastUltah(msg, tipe = 'success') {
    const icon = tipe === 'success' ? 'bi-balloon-heart-fill' : 'bi-exclamation-triangle-fill';
    const div = document.createElement('div');
    div.className = 'alert alert-' + tipe + ' alert-dismissible fade show';
    div.style.cssText = 'position:fixed;top:20px;right:20px;z-index:99999;min-width:300px;border-radius:12px;font-size:.85rem;box-shadow:0 4px 20px rgba(0,0,0,.15);';
    div.innerHTML = '<i class="bi ' + icon + ' me-2"></i>' + msg + '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>';
    document.body.appendChild(div);
    setTimeout(() => {
        div.classList.remove('show');
        setTimeout(() => div.remove(), 400);
    }, 5000);
}

function kirimUltahWaById(wargaId, nama) {
    const modalEl = document.getElementById('modalKonfirmasiWaha');
    const modalBody = document.getElementById('wahaModalBody');
    const btnProses = document.getElementById('btnProsesWaha');
    
    modalBody.innerHTML = 'Kirim ucapan selamat ulang tahun ke <strong>' + nama + '</strong> via WhatsApp otomatis (WAHA)?';
    
    const myModal = new bootstrap.Modal(modalEl);
    myModal.show();

    btnProses.onclick = function() {
        myModal.hide();
        
        const formData = new FormData();
        formData.append('warga_id', wargaId);

        fetch('<?php echo base_url("warga/kirim_ucapan_ultah"); ?>', {
            method: 'POST',
            body: formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(async r => {
            const text = await r.text();
            try {
                return JSON.parse(text);
            } catch (e) {
                console.error('JSON Parse Error. Raw Response:', text);
                throw new Error('Respon server tidak valid (bukan JSON).');
            }
        })
        .then(data => {
            if (data.status === 'ok') showToastUltah(data.msg || 'Ucapan terkirim ke ' + nama);
            else showToastUltah(data.msg || 'Gagal mengirim', 'danger');
        })
        .catch(e => {
            console.error(e);
            showToastUltah('Kesalahan sistem: ' + e.message, 'danger');
        });
    };
}

document.addEventListener('DOMContentLoaded', function() {
    const btnBroadcast = document.getElementById('btnBroadcastUltah');
    if (btnBroadcast) {
        btnBroadcast.addEventListener('click', function() {
            const modalEl = document.getElementById('modalKonfirmasiWaha');
            const modalBody = document.getElementById('wahaModalBody');
            const btnProses = document.getElementById('btnProsesWaha');
            
            modalBody.innerHTML = 'Kirim ucapan selamat ulang tahun ke <strong>SEMUA</strong> warga yang berulang tahun HARI INI via WhatsApp otomatis (WAHA)?';
            
            const myModal = new bootstrap.Modal(modalEl);
            myModal.show();

            btnProses.onclick = function() {
                myModal.hide();
                
                btnBroadcast.disabled = true;
                const origHtml = btnBroadcast.innerHTML;
                btnBroadcast.innerHTML = '<i class="bi bi-hourglass-split"></i>';

                fetch('<?php echo base_url("warga/kirim_ucapan_ultah"); ?>', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(async r => {
                    const text = await r.text();
                    try {
                        return JSON.parse(text);
                    } catch (e) {
                        console.error('JSON Parse Error. Raw Response:', text);
                        throw new Error('Respon server tidak valid (bukan JSON).');
                    }
                })
                .then(data => {
                    if (data.status === 'ok') showToastUltah(data.msg);
                    else showToastUltah(data.msg, 'danger');
                })
                .catch(e => showToastUltah('Kesalahan: ' + e.message, 'danger'))
                .finally(() => {
                    btnBroadcast.disabled = false;
                    btnBroadcast.innerHTML = origHtml;
                });
            };
        });
    }
});
</script>

<!-- Modal Konfirmasi WAHA -->
<div class="modal fade" id="modalKonfirmasiWaha" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content" style="border-radius:15px; border:none; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
      <div class="modal-header" style="border:none; padding: 20px 25px 10px;">
        <h5 class="modal-title fw-bold" id="wahaModalTitle">Konfirmasi Pengiriman</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" style="padding: 10px 25px 25px;">
        <p id="wahaModalBody" class="text-muted" style="font-size:.95rem;"></p>
      </div>
      <div class="modal-footer" style="border:none; padding: 0 25px 25px; gap: 10px;">
        <button type="button" class="btn" data-bs-dismiss="modal" style="border-radius:10px; padding: 10px 20px; font-size:.85rem; font-weight:600; background:#f1f5f9; color:#475569; border:none; flex:1;">Batal</button>
        <button type="button" id="btnProsesWaha" class="btn" style="border-radius:10px; padding: 10px 20px; font-size:.85rem; font-weight:600; background:linear-gradient(135deg, #25D366, #128C7E); color:#fff; border:none; flex:1; box-shadow: 0 4px 15px rgba(37,211,102,0.3);">
            <i class="bi bi-send-fill me-1"></i>Kirim Sekarang
        </button>
      </div>
    </div>
  </div>
</div>
