<!-- 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-800: #0b5a52; --teal-700: #0b7a6e; --teal-600: #0d9488;
  --teal-500: #14b8a6; --teal-400: #2dd4bf; --teal-50: #f0fdfa;
  --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;
  --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; }

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

/* ── Clickable Card Base ── */
.dash-card {
  background:#fff;border-radius:12px;padding:14px 16px;position:relative;overflow:hidden;
  box-shadow:var(--card-shadow);border:1px solid var(--slate-200);
  border-left:3px solid var(--accent,var(--teal-500));
  transition:transform .18s,box-shadow .18s;height:100%;
  display:block; text-decoration:none!important; color:inherit;
}
.dash-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(0,0,0,.13);
  color:inherit;
  text-decoration:none;
}

/* Arrow indicator on hover */
.dash-card::after {
  content: '\F138'; /* bi-arrow-right-circle */
  font-family: 'bootstrap-icons';
  position:absolute; bottom:10px; right:12px;
  font-size:.85rem;
  color: var(--accent, var(--teal-500));
  opacity:0;
  transition:opacity .18s, transform .18s;
  transform: translateX(-4px);
}
.dash-card:hover::after {
  opacity:.6;
  transform: translateX(0);
}

.dash-card .dc-top { display:flex;justify-content:space-between;align-items:flex-start;gap:8px; }
.dc-icon { width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.88rem;background:color-mix(in srgb,var(--accent,var(--teal-500)) 14%,white);color:var(--accent,var(--teal-500)); }
.dc-label { font-size:.68rem;font-weight:700;color:var(--slate-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;display:block; }
.dc-value { font-size:1rem;font-weight:800;line-height:1.2;color:var(--accent,var(--teal-500)); }
.dc-value.neutral { color:var(--slate-700); }
.dc-value.danger  { color:var(--red-500); }
.dc-value.warning { color:var(--amber-600); }
.dc-sub { font-size:.7rem;color:var(--slate-400);margin-top:2px;font-weight:500; }
.dc-notif { position:absolute;top:-4px;right:-4px;background:linear-gradient(135deg,var(--red-600),var(--red-500));color:#fff;padding:2px 7px;border-radius:30px;font-size:.66rem;font-weight:800;box-shadow:0 2px 8px rgba(239,68,68,.35);z-index:10; }
.dc-action { display:inline-flex;align-items:center;gap:4px;border:1px solid var(--accent,var(--teal-500));background:var(--accent,var(--teal-500));color:#fff;border-radius:7px;padding:4px 10px;font-size:.73rem;font-weight:700;text-decoration:none;transition:all .15s;white-space:nowrap;flex-shrink:0; }
.dc-action:hover { background:transparent;color:var(--accent,var(--teal-500)); }
.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-green:hover { background:linear-gradient(135deg,var(--green-600),#047857);color:#fff; }
.cta-red { background:linear-gradient(135deg,var(--red-500),var(--red-600));color:#fff;box-shadow:0 3px 10px rgba(239,68,68,.26); }
.cta-red:hover { background:linear-gradient(135deg,var(--red-600),var(--red-700));color:#fff; }
.cta-sky { background:linear-gradient(135deg,var(--sky-500),var(--sky-600));color:#fff;box-shadow:0 3px 10px rgba(14,165,233,.26); }
.cta-sky:hover { background:linear-gradient(135deg,var(--sky-600),#0369a1);color:#fff; }

/* ── Click hint label (shows on hover) ── */
.dc-hint {
  display:inline-flex;align-items:center;gap:4px;
  font-size:.67rem;font-weight:700;color:var(--accent,var(--teal-500));
  margin-top:8px;opacity:0;
  transition:opacity .18s;
}
.dc-hint i { font-size:.7rem; }
.dash-card:hover .dc-hint { opacity:1; }

/* ── Pending Card (desktop) ── */
.pending-card { background:#fff;border-radius:12px;box-shadow:var(--card-shadow);border:1px solid var(--slate-200);border-top:3px solid var(--amber-500);overflow:hidden;margin-bottom:14px; }
.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,.badge-iuran { display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:.72rem;font-weight:700; }
.badge-pinjaman { background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border:1px solid rgba(245,158,11,.25); }
.badge-iuran { background:linear-gradient(135deg,#e0f2fe,#bae6fd);color:#0c4a6e;border:1px solid rgba(14,165,233,.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:14px;margin-bottom:14px; }
.info-card { background:#fff;border-radius:12px;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:12px;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:14px;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); }

.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 — Tab navigation
═══════════════════════════════════════════ */
.mobile-dash { display:none; }

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

  /* Hero Card */
  .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; }

  /* Hero stat pills — clickable */
  .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; }

  /* Alert strip */
  .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; }

  /* Tab bar */
  .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; }

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

  /* 2x2 mini card grid */
  .m-grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px; }

  /* Mobile mini card — clickable */
  .m-mini-card {
    background:#fff;border-radius:12px;padding:13px 12px 11px;
    border:1px solid var(--slate-200);border-top:3px solid var(--mc,var(--teal-500));
    box-shadow:0 1px 4px rgba(0,0,0,.05);position:relative;overflow:hidden;
    text-decoration:none!important; color:inherit;
    transition:transform .15s, box-shadow .15s;
    display:block;
  }
  .m-mini-card:active { transform:scale(.97); box-shadow:0 4px 16px rgba(0,0,0,.1); color:inherit; }
  .m-mini-card:hover  { color:inherit; }

  .mmc-icon { width:30px;height:30px;border-radius:8px;margin-bottom:7px;display:flex;align-items:center;justify-content:center;font-size:.8rem;background:color-mix(in srgb,var(--mc,var(--teal-500)) 13%,white);color:var(--mc,var(--teal-500)); }
  .mmc-label { font-size:.62rem;font-weight:700;color:var(--slate-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px; }
  .mmc-val { font-size:.9rem;font-weight:800;color:var(--mc,var(--teal-500));line-height:1.2;word-break:break-word; }
  .mmc-val.danger  { color:var(--red-500); }
  .mmc-val.warning { color:var(--amber-600); }
  .mmc-val.neutral { color:var(--slate-700); }
  .mmc-sub { font-size:.65rem;color:var(--slate-400);margin-top:2px; }
  .mmc-notif { position:absolute;top:8px;right:8px;background:var(--red-500);color:#fff;border-radius:20px;font-size:.58rem;font-weight:800;padding:1px 6px; }

  /* Arrow hint on mini card */
  .mmc-arrow {
    position:absolute;bottom:8px;right:10px;
    font-size:.7rem;color:var(--mc,var(--teal-500));
    opacity:.35;
  }

  .mmc-cta { display:flex;align-items:center;justify-content:center;gap:4px;margin-top:9px;padding:6px 8px;border-radius:7px;font-size:.68rem;font-weight:700;text-decoration:none;border:none;cursor:pointer;width:100%;font-family:'Plus Jakarta Sans',sans-serif;transition:all .15s; }
  .mmc-cta-teal   { background:linear-gradient(135deg,var(--teal-600),var(--teal-400));color:#fff; }
  .mmc-cta-green  { background:linear-gradient(135deg,var(--green-500),var(--green-600));color:#fff; }
  .mmc-cta-red    { background:linear-gradient(135deg,var(--red-500),var(--red-600));color:#fff; }
  .mmc-cta-amber  { background:linear-gradient(135deg,var(--amber-500),var(--amber-600));color:#fff; }
  .mmc-cta-sky    { background:linear-gradient(135deg,var(--sky-500),var(--sky-600));color:#fff; }
  .mmc-cta-blue   { background:linear-gradient(135deg,var(--blue-500),var(--blue-600));color:#fff; }
  .mmc-cta-violet { background:linear-gradient(135deg,var(--violet-600),#6d28d9);color:#fff; }

  /* Horizontal scroll pills (Warga keuangan) */
  .m-pill-link {
    display:flex;align-items:center;justify-content:space-between;
    border-radius:12px;padding:14px 16px;margin-bottom:10px;
    text-decoration:none!important;
    box-shadow:0 4px 16px rgba(0,0,0,.12);
  }
  .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:38px;height:38px;background:rgba(255,255,255,.18);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem; }

  /* Pending list */
  .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-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); }

  /* Recent payments */
  .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; }

  /* Quick menu 2x3 or 2x4 */
  .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); }

  /* Section label */
  .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); }

  /* Empty */
  .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:1023px) { .stat-grid-4 { grid-template-columns:repeat(2,1fr); } }
</style>

<div>

<!-- ════════════════════ DESKTOP ════════════════════ -->
<div class="desktop-dash">
 <div class="dash-greeting anim-1">
    <div class="d-flex align-items-start justify-content-between flex-wrap gap-2">
        <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>


  <?php if(is_admin()):
    $total_pending_pinjaman = isset($total_pembayaran_pending) ? $total_pembayaran_pending : 0;
    $total_pending_iuran    = isset($pembayaran_iuran_pending) ? count($pembayaran_iuran_pending) : 0;
    $total_all_pending      = $total_pending_pinjaman + $total_pending_iuran;
  ?>

  <?php if($total_all_pending > 0): ?>
  <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</a><?php endif; ?>
      </div>
    </div>
    <div><span class="badge-pending-total"><?php echo $total_all_pending; ?> Pending</span></div>
  </div>
  <?php endif; ?>

  <!-- ADMIN STAT ROW 1: Semua card clickable -->
  <div class="stat-grid-4 anim-2">
    <!-- Total Warga → /warga -->
    <a href="<?php echo base_url('warga'); ?>" class="dash-card" style="--accent:var(--teal-600)" title="Lihat Data Warga">
      <div class="dc-top">
        <div>
          <span class="dc-label">Total Warga</span>
          <div class="dc-value"><?php echo number_format($total_warga); ?></div>
          <div class="dc-sub">Warga terdaftar</div>
        </div>
        <div class="dc-icon" style="--accent:var(--teal-600)"><i class="bi bi-people-fill"></i></div>
      </div>
      <div class="dc-hint"><i class="bi bi-arrow-right-circle"></i> Lihat Data Warga</div>
    </a>

    <!-- Iuran Bulan Ini → /iuran -->
    <a href="<?php echo base_url('iuran'); ?>" class="dash-card" style="--accent:var(--green-600)" title="Lihat Iuran">
      <div class="dc-top">
        <div>
          <span class="dc-label">Iuran Bulan Ini</span>
          <div class="dc-value">Rp <?php echo number_format($total_iuran_bulan_ini,0,',','.'); ?></div>
          <div class="dc-sub">Total terkumpul</div>
        </div>
        <div class="dc-icon" style="--accent:var(--green-600)"><i class="bi bi-cash-stack"></i></div>
      </div>
      <div class="dc-hint"><i class="bi bi-arrow-right-circle"></i> Lihat Iuran</div>
    </a>

    <!-- Tunggakan → /iuran/tunggakan atau /iuran -->
    <a href="<?php echo base_url('iuran'); ?>" class="dash-card" style="--accent:var(--red-500)" title="Lihat Tunggakan">
      <div class="dc-top">
        <div>
          <span class="dc-label">Tunggakan</span>
          <div class="dc-value danger">Rp <?php echo number_format($total_tunggakan,0,',','.'); ?></div>
          <div class="dc-sub">Belum dibayar</div>
        </div>
        <div class="dc-icon" style="--accent:var(--red-500)"><i class="bi bi-exclamation-triangle-fill"></i></div>
      </div>
      <div class="dc-hint"><i class="bi bi-arrow-right-circle"></i> Lihat Tunggakan</div>
    </a>

    <!-- Saldo Kas → /kas -->
    <a href="<?php echo base_url('kas'); ?>" class="dash-card" style="--accent:var(--sky-500)" title="Lihat Kas RT">
      <div class="dc-top">
        <div>
          <span class="dc-label">Saldo Kas</span>
          <div class="dc-value">Rp <?php echo number_format($saldo_kas,0,',','.'); ?></div>
          <div class="dc-sub">Saldo kas RT</div>
        </div>
        <div class="dc-icon" style="--accent:var(--sky-500)"><i class="bi bi-bank"></i></div>
      </div>
      <div class="dc-hint"><i class="bi bi-arrow-right-circle"></i> Lihat Kas RT</div>
    </a>
  </div>

  <!-- ADMIN STAT ROW 2: Semua card clickable -->
  <div class="stat-grid-4 anim-3">
    <!-- Total Tabungan → /tabungan -->
    <a href="<?php echo base_url('tabungan'); ?>" class="dash-card" style="--accent:var(--blue-600)" title="Lihat Tabungan">
      <div class="dc-top">
        <div class="d-flex align-items-center gap-3 flex-grow-1">
          <div class="dc-icon" style="--accent:var(--blue-600);width:40px;height:40px;font-size:1rem;flex-shrink:0"><i class="bi bi-piggy-bank-fill"></i></div>
          <div>
            <span class="dc-label">Total Tabungan</span>
            <div class="dc-value">Rp <?php echo number_format($total_tabungan,0,',','.'); ?></div>
            <div class="dc-sub">Dari <?php echo number_format($jumlah_penabung); ?> penabung</div>
          </div>
        </div>
        <i class="bi bi-arrow-right-circle" style="color:var(--blue-600);font-size:1.1rem;opacity:.5;flex-shrink:0;align-self:center;"></i>
      </div>
    </a>

    <!-- Pinjaman Aktif → /pinjaman -->
    <a href="<?php echo base_url('pinjaman'); ?>" class="dash-card" style="--accent:var(--amber-600)" title="Lihat Pinjaman">
      <?php if($total_pending_pinjaman>0): ?><span class="dc-notif"><?php echo $total_pending_pinjaman; ?></span><?php endif; ?>
      <div class="dc-top">
        <div class="d-flex align-items-center gap-3 flex-grow-1">
          <div class="dc-icon" style="--accent:var(--amber-600);width:40px;height:40px;font-size:1rem;flex-shrink:0"><i class="bi bi-cash-coin"></i></div>
          <div>
            <span class="dc-label">Pinjaman Aktif</span>
            <div class="dc-value warning">Rp <?php echo number_format($total_pinjaman_dicairkan,0,',','.'); ?></div>
            <div class="dc-sub"><?php echo number_format($jumlah_pinjaman_aktif); ?> pinjaman aktif</div>
          </div>
        </div>
        <i class="bi bi-arrow-right-circle" style="color:var(--amber-600);font-size:1.1rem;opacity:.5;flex-shrink:0;align-self:center;"></i>
      </div>
      <?php if($total_pending_pinjaman>0): ?>
      <a href="<?php echo base_url('pinjaman/verifikasi_pembayaran_list'); ?>" class="dc-cta cta-amber" onclick="event.stopPropagation()"><i class="bi bi-clock-history"></i><?php echo $total_pending_pinjaman; ?> Menunggu Verifikasi</a>
      <?php endif; ?>
    </a>

    <!-- Iuran Online → /iuran -->
    <a href="<?php echo base_url('iuran'); ?>" class="dash-card" style="--accent:var(--green-600)" title="Verifikasi Iuran Online">
      <?php if($total_pending_iuran>0): ?><span class="dc-notif"><?php echo $total_pending_iuran; ?></span><?php endif; ?>
      <div class="dc-top">
        <div class="d-flex align-items-center gap-3 flex-grow-1">
          <div class="dc-icon" style="--accent:var(--green-600);width:40px;height:40px;font-size:1rem;flex-shrink:0"><i class="bi bi-cash-stack"></i></div>
          <div>
            <span class="dc-label">Iuran Online</span>
            <div class="dc-value"><?php echo $total_pending_iuran; ?></div>
            <div class="dc-sub">Menunggu verifikasi</div>
          </div>
        </div>
        <i class="bi bi-arrow-right-circle" style="color:var(--green-600);font-size:1.1rem;opacity:.5;flex-shrink:0;align-self:center;"></i>
      </div>
      <?php if($total_pending_iuran>0): ?>
      <span class="dc-cta cta-green" style="pointer-events:none;"><i class="bi bi-clock-history"></i>Verifikasi Sekarang</span>
      <?php endif; ?>
    </a>

    <!-- Piutang Pinjaman → /pinjaman/laporan -->
    <a href="<?php echo base_url('pinjaman/laporan'); ?>" class="dash-card" style="--accent:var(--violet-600)" title="Lihat Laporan Piutang">
      <div class="dc-top">
        <div class="d-flex align-items-center gap-3 flex-grow-1">
          <div class="dc-icon" style="--accent:var(--violet-600);width:40px;height:40px;font-size:1rem;flex-shrink:0"><i class="bi bi-receipt"></i></div>
          <div>
            <span class="dc-label">Piutang Pinjaman</span>
            <div class="dc-value" style="color:var(--violet-600)">Rp <?php echo number_format($total_piutang_pinjaman,0,',','.'); ?></div>
            <div class="dc-sub">Belum terbayar</div>
          </div>
        </div>
        <i class="bi bi-arrow-right-circle" style="color:var(--violet-600);font-size:1.1rem;opacity:.5;flex-shrink:0;align-self:center;"></i>
      </div>
    </a>
  </div>

  <?php if($total_all_pending > 0):
    $cp=[];
    if(isset($pembayaran_pending_list)&&!empty($pembayaran_pending_list)) foreach($pembayaran_pending_list as $pp) $cp[]=['type'=>'pinjaman','data'=>$pp];
    if(isset($pembayaran_iuran_pending)&&!empty($pembayaran_iuran_pending)) foreach($pembayaran_iuran_pending as $pi) $cp[]=['type'=>'iuran','data'=>$pi];
    usort($cp,fn($a,$b)=>strtotime($b['data']->created_at??'now')-strtotime($a['data']->created_at??'now'));
    $cp=array_slice($cp,0,5);
  ?>
  <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</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');$d=$item['data'];$lnk=$isp?base_url('pinjaman/verifikasi_pembayaran/'.$d->id):base_url('iuran/verifikasi/'.$d->id);$mt=$isp?($d->metode_bayar??'transfer'):($d->metode_pembayaran??'transfer'); ?>
        <tr><td><?php echo $isp?'<span class="badge-pinjaman"><i class="bi bi-cash-coin"></i>Pinjaman</span>':'<span class="badge-iuran"><i class="bi bi-cash-stack"></i>Iuran</span>'; ?></td><td style="font-weight:700"><?php echo htmlspecialchars($d->nama_lengkap); ?></td><td><?php if($isp): echo $d->kode_pinjaman; ?><small class="d-block" style="color:var(--slate-400)">Angsuran Ke-<?php echo $d->angsuran_ke; ?></small><?php else: 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($d->nominal_bayar??$d->nominal??0,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 date('d M Y H:i',strtotime($d->created_at)); ?></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>
  </div>
  <?php endif; ?>

  <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><div class="pay-date"><?php echo 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 */
    $total_pending_pinjaman=0;$total_pending_iuran=0;$total_all_pending=0;
  ?>

  <!-- WARGA STAT ROW 1: Semua card clickable -->
  <div class="stat-grid-3 anim-2">
    <!-- Tagihan Bulan Ini → /iuran -->
    <a href="<?php echo base_url('iuran'); ?>" class="dash-card" style="--accent:var(--red-500)" title="Lihat Tagihan">
      <div class="dc-top">
        <div>
          <span class="dc-label">Tagihan Bulan Ini</span>
          <div class="dc-value <?php echo $tagihan_bulan_ini>0?'danger':'neutral'; ?>"><?php echo $tagihan_bulan_ini; ?></div>
          <div class="dc-sub"><?php echo $tagihan_bulan_ini>0?'Belum dibayar':'Sudah lunas ✓'; ?></div>
        </div>
        <div class="dc-icon" style="--accent:var(--red-500)"><i class="bi bi-exclamation-circle-fill"></i></div>
      </div>
      <?php if($tagihan_bulan_ini>0): ?>
      <span class="dc-cta cta-red" style="pointer-events:none;"><i class="bi bi-credit-card"></i>Bayar Sekarang</span>
      <?php else: ?>
      <div class="dc-hint"><i class="bi bi-arrow-right-circle"></i> Lihat Iuran</div>
      <?php endif; ?>
    </a>

    <!-- Tunggakan → /iuran -->
    <a href="<?php echo base_url('iuran'); ?>" class="dash-card" style="--accent:var(--amber-600)" title="Lihat Tunggakan">
      <div class="dc-top">
        <div>
          <span class="dc-label">Total Tunggakan</span>
          <div class="dc-value warning">Rp <?php echo number_format($total_tunggakan,0,',','.'); ?></div>
          <div class="dc-sub">Harus segera dibayar</div>
        </div>
        <div class="dc-icon" style="--accent:var(--amber-600)"><i class="bi bi-cash-stack"></i></div>
      </div>
      <?php if($total_tunggakan>0): ?>
      <span class="dc-cta cta-amber" style="pointer-events:none;"><i class="bi bi-eye"></i>Lihat Detail</span>
      <?php else: ?>
      <div class="dc-hint"><i class="bi bi-arrow-right-circle"></i> Lihat Iuran</div>
      <?php endif; ?>
    </a>

    <!-- Surat Dalam Proses → /surat -->
    <a href="<?php echo base_url('surat'); ?>" class="dash-card" style="--accent:var(--sky-500)" title="Ajukan & Lihat Surat">
      <div class="dc-top">
        <div>
          <span class="dc-label">Surat Dalam Proses</span>
          <div class="dc-value"><?php echo $surat_proses; ?></div>
          <div class="dc-sub">Menunggu diproses</div>
        </div>
        <div class="dc-icon" style="--accent:var(--sky-500)"><i class="bi bi-file-text-fill"></i></div>
      </div>
      <span class="dc-cta cta-sky" style="pointer-events:none;"><i class="bi bi-plus-circle"></i>Ajukan Surat</span>
    </a>
  </div>

  <!-- WARGA STAT ROW 2: Semua card clickable -->
  <div class="stat-grid-2 anim-3">
    <!-- Tabungan Saya → /tabungan -->
    <a href="<?php echo base_url('tabungan'); ?>" class="dash-card" style="--accent:var(--blue-600)" title="Lihat Tabungan">
      <div class="dc-top">
        <div class="d-flex align-items-center gap-3 flex-grow-1">
          <div class="dc-icon" style="--accent:var(--blue-600);width:40px;height:40px;font-size:1rem;flex-shrink:0"><i class="bi bi-piggy-bank-fill"></i></div>
          <div>
            <span class="dc-label">Tabungan Saya</span>
            <div class="dc-value">Rp <?php echo number_format($saldo_tabungan_saya,0,',','.'); ?></div>
            <div class="dc-sub">Saldo tersedia</div>
          </div>
        </div>
        <i class="bi bi-arrow-right-circle" style="color:var(--blue-600);font-size:1.1rem;opacity:.5;flex-shrink:0;align-self:center;"></i>
      </div>
    </a>

    <!-- Pinjaman Saya → /pinjaman -->
    <a href="<?php echo base_url('pinjaman'); ?>" class="dash-card" style="--accent:var(--amber-600)" title="Lihat Pinjaman">
      <div class="dc-top">
        <div class="d-flex align-items-center gap-3 flex-grow-1">
          <div class="dc-icon" style="--accent:var(--amber-600);width:40px;height:40px;font-size:1rem;flex-shrink:0"><i class="bi bi-cash-coin"></i></div>
          <div>
            <span class="dc-label">Pinjaman Saya</span>
            <div class="dc-value warning">Rp <?php echo number_format($sisa_pinjaman_saya,0,',','.'); ?></div>
            <div class="dc-sub"><?php echo $sisa_pinjaman_saya>0?'Sisa yang harus dibayar':'Tidak ada pinjaman aktif'; ?></div>
          </div>
        </div>
        <i class="bi bi-arrow-right-circle" style="color:var(--amber-600);font-size:1.1rem;opacity:.5;flex-shrink:0;align-self:center;"></i>
      </div>
    </a>
  </div>

  <div class="kas-banner anim-4"><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" style="--accent:var(--teal-600);padding:9px 18px;font-size:.82rem"><i class="bi bi-eye"></i> Lihat Laporan</a></div>
  <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">
  <?php
    $total_pending_pinjaman = isset($total_pembayaran_pending) ? $total_pembayaran_pending : 0;
    $total_pending_iuran    = isset($pembayaran_iuran_pending) ? count($pembayaran_iuran_pending) : 0;
    $total_all_pending      = $total_pending_pinjaman + $total_pending_iuran;
    $has_pending            = $total_all_pending > 0;
  ?>

  <!-- 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; ?>

    <!-- Hero stats: setiap pill bisa diklik -->
    <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 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">Klik untuk memverifikasi</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; ?>

  <!-- 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-apps"></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-apps"></i>Menu</button>
    <?php endif; ?>
  </div>

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

  <!-- ADMIN: Ringkasan — mini cards clickable -->
  <div class="m-panel active" id="panel-ringkasan">
    <div class="m-grid-2">
      <a href="<?php echo base_url('warga'); ?>" class="m-mini-card" style="--mc:var(--teal-600)">
        <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>
        <i class="bi bi-arrow-right mmc-arrow"></i>
      </a>
      <a href="<?php echo base_url('kas'); ?>" class="m-mini-card" style="--mc:var(--sky-500)">
        <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>
        <i class="bi bi-arrow-right mmc-arrow"></i>
      </a>
      <a href="<?php echo base_url('pinjaman/laporan'); ?>" class="m-mini-card" style="--mc:var(--violet-600)">
        <div class="mmc-icon"><i class="bi bi-receipt"></i></div>
        <div class="mmc-label">Piutang</div>
        <div class="mmc-val" style="color:var(--violet-600)">Rp <?php echo number_format($total_piutang_pinjaman,0,',','.'); ?></div>
        <div class="mmc-sub">Belum terbayar</div>
        <i class="bi bi-arrow-right mmc-arrow"></i>
      </a>
      <a href="<?php echo base_url('surat'); ?>" class="m-mini-card" style="--mc:var(--amber-500)">
        <div class="mmc-icon"><i class="bi bi-file-text"></i></div>
        <div class="mmc-label">Surat Pending</div>
        <div class="mmc-val warning"><?php echo $surat_pending; ?></div>
        <i class="bi bi-arrow-right mmc-arrow"></i>
      </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><div class="m-pay-date"><?php echo date('d/m/Y',strtotime($p->tanggal_bayar)); ?></div></div></div>
      <?php endforeach; ?>
    </div>
    <?php endif; ?>
  </div>

  <!-- ADMIN: Keuangan — mini cards clickable -->
  <div class="m-panel" id="panel-keuangan">
    <div class="m-grid-2">
      <a href="<?php echo base_url('iuran'); ?>" class="m-mini-card" style="--mc:var(--green-600)">
        <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>
        <i class="bi bi-arrow-right mmc-arrow"></i>
      </a>
      <a href="<?php echo base_url('iuran'); ?>" class="m-mini-card" style="--mc:var(--red-500)">
        <div class="mmc-icon"><i class="bi bi-exclamation-triangle-fill"></i></div>
        <div class="mmc-label">Tunggakan</div>
        <div class="mmc-val danger">Rp <?php echo number_format($total_tunggakan,0,',','.'); ?></div>
        <i class="bi bi-arrow-right mmc-arrow"></i>
      </a>
      <a href="<?php echo base_url('tabungan'); ?>" class="m-mini-card" style="--mc:var(--blue-600)">
        <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>
        <i class="bi bi-arrow-right mmc-arrow"></i>
      </a>
      <a href="<?php echo base_url($total_pending_pinjaman>0?'pinjaman/verifikasi_pembayaran_list':'pinjaman'); ?>" class="m-mini-card" style="--mc:var(--amber-600)">
        <?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 warning">Rp <?php echo number_format($total_pinjaman_dicairkan,0,',','.'); ?></div>
        <div class="mmc-sub"><?php echo $jumlah_pinjaman_aktif; ?> pinjaman</div>
        <i class="bi bi-arrow-right mmc-arrow"></i>
      </a>
    </div>
  </div>

  <!-- ADMIN: Pending -->
  <div class="m-panel" id="panel-pending">
    <?php if($has_pending):
      $cp=[];
      if(isset($pembayaran_pending_list)&&!empty($pembayaran_pending_list)) foreach($pembayaran_pending_list as $pp) $cp[]=['type'=>'pinjaman','data'=>$pp];
      if(isset($pembayaran_iuran_pending)&&!empty($pembayaran_iuran_pending)) foreach($pembayaran_iuran_pending as $pi) $cp[]=['type'=>'iuran','data'=>$pi];
      usort($cp,fn($a,$b)=>strtotime($b['data']->created_at??'now')-strtotime($a['data']->created_at??'now'));
      $cp=array_slice($cp,0,5);
    ?>
    <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 as $item): $isp=($item['type']=='pinjaman');$d=$item['data'];$lnk=$isp?base_url('pinjaman/verifikasi_pembayaran/'.$d->id):base_url('iuran/verifikasi/'.$d->id);$mt=$isp?($d->metode_bayar??'transfer'):($d->metode_pembayaran??'transfer');$nm=$d->nominal_bayar??$d->nominal??0; ?>
      <div class="mob-pend">
        <div class="mob-pend-top">
          <div>
            <?php echo $isp?'<span class="badge-pinjaman" style="font-size:.68rem;margin-bottom:4px;display:inline-flex"><i class="bi bi-cash-coin"></i>Pinjaman</span>':'<span class="badge-iuran" style="font-size:.68rem;margin-bottom:4px;display:inline-flex"><i class="bi bi-cash-stack"></i>Iuran</span>'; ?>
            <div class="mob-pend-name"><?php echo htmlspecialchars($d->nama_lengkap); ?></div>
            <div class="mob-pend-detail"><?php echo $isp?$d->kode_pinjaman.' · Angsuran Ke-'.$d->angsuran_ke:($d->nama_iuran??'Iuran').' · '.($d->bulan??date('M Y')); ?></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 date('d M, H:i',strtotime($d->created_at)); ?></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>5): ?><div style="text-align:center;padding:10px 0;font-size:.74rem;color:var(--slate-400)">+ <?php echo $total_all_pending-5; ?> lainnya</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 — mini cards clickable -->
  <div class="m-panel active" id="panel-ringkasan">
    <div class="m-grid-2">
      <a href="<?php echo base_url('iuran'); ?>" class="m-mini-card" style="--mc:var(--red-500)">
        <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?'danger':'neutral'; ?>"><?php echo $tagihan_bulan_ini>0?$tagihan_bulan_ini.' item':'Lunas ✓'; ?></div>
        <i class="bi bi-arrow-right mmc-arrow"></i>
      </a>
      <a href="<?php echo base_url('iuran'); ?>" class="m-mini-card" style="--mc:var(--amber-600)">
        <div class="mmc-icon"><i class="bi bi-cash-stack"></i></div>
        <div class="mmc-label">Tunggakan</div>
        <div class="mmc-val warning">Rp <?php echo number_format($total_tunggakan,0,',','.'); ?></div>
        <i class="bi bi-arrow-right mmc-arrow"></i>
      </a>
      <a href="<?php echo base_url('surat'); ?>" class="m-mini-card" style="--mc:var(--sky-500)">
        <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>
        <i class="bi bi-arrow-right mmc-arrow"></i>
      </a>
      <a href="<?php echo base_url('kas'); ?>" class="m-mini-card" style="--mc:var(--teal-600)">
        <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>
        <i class="bi bi-arrow-right mmc-arrow"></i>
      </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,var(--blue-600),var(--blue-500),#60a5fa);box-shadow:0 4px 16px 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,var(--amber-600),var(--amber-500),#fbbf24);box-shadow:0 4px 16px 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 4px 16px 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>
  </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'));
  const tab = document.getElementById('tab-' + name);
  const panel = document.getElementById('panel-' + name);
  if (tab)   tab.classList.add('active');
  if (panel) panel.classList.add('active');
}
</script>