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

/* ══════════ CSS VARIABLES ══════════ */
:root {
  --teal-900: #0d3d38;
  --teal-800: #0b5a52;
  --teal-700: #0b7a6e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal-100: #ccfbf1;
  --teal-50:  #f0fdfa;
  --green-500: #10b981;
  --green-600: #059669;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --red-400:  #f87171;
  --red-500:  #ef4444;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-700:#334155;
  --slate-900:#0f172a;
  --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06);
}

/* ══════════ BASE ══════════ */
.pemilu-wrapper {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--slate-900);
}
.pemilu-wrapper .btn:focus,
.pemilu-wrapper .form-control:focus,
.pemilu-wrapper .form-select:focus { box-shadow: none; }
.pemilu-wrapper .form-control:focus,
.pemilu-wrapper .form-select:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.pemilu-wrapper .form-control,
.pemilu-wrapper .form-select {
  border-radius: 8px; border: 1.5px solid #e5e7eb;
  font-size: .88rem; padding: 8px 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ══════════ PAGE HEADER ══════════ */
.ar-page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 14px; margin-bottom: 24px;
}
.ar-header-left h4 {
  font-size: 1.25rem; font-weight: 800; color: var(--teal-800);
  margin: 0 0 5px; display: flex; align-items: center; gap: 11px; letter-spacing: -.3px;
}
.ar-header-left h4 .hi {
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(13,148,136,.32); flex-shrink: 0;
}
.ar-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: .77rem; color: #94a3b8; padding-left: 51px;
}
.ar-breadcrumb a { color: var(--teal-600); text-decoration: none; font-weight: 600; }
.ar-breadcrumb a:hover { text-decoration: underline; }
.ar-breadcrumb .sep { color: #e2e8f0; }

/* ══════════ EXPORT BUTTONS ══════════ */
.btn-export {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 50px; border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 700; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: all .2s;
}
.btn-exp-excel {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff; box-shadow: 0 4px 12px rgba(16,185,129,.28);
}
.btn-exp-excel:hover {
  transform: translateY(-2px); color: #fff;
  box-shadow: 0 8px 20px rgba(16,185,129,.38);
}
.btn-exp-print {
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: #fff; box-shadow: 0 4px 12px rgba(13,148,136,.28);
}
.btn-exp-print:hover {
  transform: translateY(-2px); color: #fff;
  box-shadow: 0 8px 20px rgba(13,148,136,.38);
}

/* ══════════ STAT CARDS ══════════ */
.pemilu-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.pemilu-stat-card {
  border-radius: 14px; padding: 20px 18px;
  position: relative; overflow: hidden; color: #fff;
  transition: transform .2s, box-shadow .2s; cursor: default;
}
.pemilu-stat-card:hover { transform: translateY(-4px); }
.pemilu-stat-card::before {
  content: ''; position: absolute; top: -28px; right: -28px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.1);
}
.pemilu-stat-card::after {
  content: ''; position: absolute; bottom: -45px; right: 40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.pemilu-stat-card .sc-label {
  font-size: .72rem; font-weight: 600; opacity: .85;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px; position: relative; z-index: 1;
}
.pemilu-stat-card .sc-value {
  font-size: 1.5rem; font-weight: 800; line-height: 1.15;
  position: relative; z-index: 1;
}
.pemilu-stat-card .sc-sub {
  font-size: .72rem; opacity: .75; margin-top: 5px;
  position: relative; z-index: 1;
}
.pemilu-stat-card .sc-icon {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px;
  background: rgba(255,255,255,.16); border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; z-index: 1;
}

/* Card color variants — konsisten dengan pinjaman */
.sc-teal   { background: linear-gradient(135deg, var(--teal-800), var(--teal-600), var(--teal-400)); box-shadow: 0 8px 28px rgba(13,148,136,.28); }
.sc-green  { background: linear-gradient(135deg, #059669, #10b981, #34d399); box-shadow: 0 8px 28px rgba(16,185,129,.28); }
.sc-orange { background: linear-gradient(135deg, #d97706, #f59e0b, #fbbf24); box-shadow: 0 8px 28px rgba(245,158,11,.28); }
.sc-amber  { background: linear-gradient(135deg, #b45309, #d97706, #f59e0b); box-shadow: 0 8px 28px rgba(245,158,11,.30); }
.sc-muted  { background: linear-gradient(135deg, #475569, #64748b, #94a3b8); box-shadow: 0 4px 16px rgba(100,116,139,.2); }

/* ══════════ INFO BOX ══════════ */
.info-ketentuan {
  display: flex; align-items: center; gap: 10px;
  background: var(--teal-50); border: 1.5px solid var(--teal-100);
  border-left: 4px solid var(--teal-400);
  border-radius: 10px; padding: 11px 16px;
  font-size: .79rem; color: var(--teal-700); margin-bottom: 16px;
}
.info-ketentuan i { font-size: 1rem; color: var(--teal-500); flex-shrink: 0; }

/* ══════════ FILTER BAR ══════════ */
.filter-bar {
  background: var(--teal-50); border: 1.5px solid var(--teal-100);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.filter-bar .fb-label {
  font-size: .75rem; font-weight: 700; color: var(--teal-700);
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.filter-bar .form-select {
  border-color: var(--teal-100); font-size: .8rem;
  color: var(--slate-700); background-color: #fff;
}
.filter-count {
  font-size: .78rem; font-weight: 700; color: var(--teal-600);
  background: var(--teal-100); padding: 3px 10px; border-radius: 20px;
}

/* ══════════ SECTION CARD ══════════ */
.section-card {
  border-radius: 14px; border: 1px solid var(--slate-200);
  box-shadow: var(--card-shadow); overflow: hidden; margin-bottom: 16px; background: #fff;
}
.section-card-header {
  padding: 14px 20px; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 8px;
  background: linear-gradient(90deg, var(--teal-50), #fff);
  border-bottom: 1px solid rgba(13,148,136,.1);
}
.section-card-header .title {
  font-size: .95rem; font-weight: 800; color: var(--slate-900);
  display: flex; align-items: center; gap: 7px;
}
.section-card-header .title i { color: var(--teal-600); }
.record-pill {
  background: var(--teal-50); color: var(--teal-700);
  border: 1px solid rgba(13,148,136,.2);
  padding: 4px 10px; border-radius: 20px;
  font-size: .74rem; font-weight: 700;
}

/* ══════════ TABLE ══════════ */
.pemilu-table { width: 100%; border-collapse: collapse; font-size: .83rem; min-width: 780px; }
.pemilu-table thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--slate-500); font-weight: 700; padding: 10px 14px;
  background: var(--slate-50); border-bottom: 2px solid var(--slate-200); white-space: nowrap;
}
.pemilu-table tbody tr { border-bottom: 1px solid #f8fafc; transition: background .12s; }
.pemilu-table tbody tr:last-child { border-bottom: none; }
.pemilu-table tbody tr:hover { background: var(--teal-50); }
.pemilu-table tbody td { padding: 10px 14px; vertical-align: middle; }

/* person cell */
.person-cell { display: flex; align-items: center; gap: 9px; }
.person-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.person-avatar.teal  { background: var(--teal-50); color: var(--teal-600); }
.person-avatar.blue  { background: #dbeafe; color: #1d4ed8; }
.person-avatar.purple{ background: #ede9fe; color: #7c3aed; }

/* ══════════ BADGES ══════════ */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .71rem; font-weight: 700; white-space: nowrap;
}
.sb-pemula { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.sb-muda   { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.sb-dewasa { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.sb-lansia { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.sb-tua    { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

.badge-nik {
  background: var(--slate-100); color: var(--slate-500);
  padding: 3px 8px; border-radius: 5px;
  font-size: .73rem; font-weight: 700; font-family: monospace;
}

/* ══════════ MOBILE CARD ══════════ */
.desktop-table { display: block; }
.mobile-list   { display: none; }

/* ══════════ ANIMATIONS ══════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.pemilu-stat-grid  { animation: fadeUp .35s ease both; }
.info-ketentuan    { animation: fadeUp .38s .05s ease both; }
.filter-bar        { animation: fadeUp .4s .1s ease both; }
.section-card      { animation: fadeUp .4s .15s ease both; }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 1199px) {
  .pemilu-stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .ar-page-header { flex-direction: column; align-items: flex-start; }
  .pemilu-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pemilu-stat-card .sc-value { font-size: 1.1rem; }
  .pemilu-stat-card .sc-icon { width: 42px; height: 42px; font-size: 1.1rem; right: 12px; }
  .filter-bar { flex-direction: column; align-items: flex-start; }
  .desktop-table { display: none !important; }
  .mobile-list   { display: flex !important; flex-direction: column; gap: 8px; padding: 10px; }
  .btn-export { width: 100%; justify-content: center; }
}

/* ══════════ PRINT ══════════ */
@media print {
  .no-print, .filter-bar, .section-card-header .d-flex { display: none !important; }
  .pemilu-table thead th {
    background: var(--teal-700) !important; color: #fff !important;
    -webkit-print-color-adjust: exact;
  }
  body { font-size: 11px; }
}
</style>

<?php
$today = new DateTime();

function kelompok_umur($umur) {
    if ($umur >= 17 && $umur <= 21) return ['label'=>'Pemula',  'cls'=>'sb-pemula'];
    if ($umur >= 22 && $umur <= 35) return ['label'=>'Muda',    'cls'=>'sb-muda'];
    if ($umur >= 36 && $umur <= 55) return ['label'=>'Dewasa',  'cls'=>'sb-dewasa'];
    if ($umur >= 56 && $umur <= 70) return ['label'=>'Lansia',  'cls'=>'sb-lansia'];
    return ['label'=>'Tua', 'cls'=>'sb-tua'];
}
?>

<div class="pemilu-wrapper">
<div class="container-fluid px-2 px-md-3 py-3">

<!-- ══════════ PAGE HEADER ══════════ -->
<div class="ar-page-header no-print">
  <div class="ar-header-left">
    <h4>
      <span class="hi"><i class="bi bi-person-vcard"></i></span>
      Data Pemilih Pemilu
    </h4>
    <div class="ar-breadcrumb">
      <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
      <span class="sep">/</span>
      <a href="<?php echo base_url('warga'); ?>">Kependudukan</a>
      <span class="sep">/</span>
      <span>Pemilih Pemilu</span>
    </div>
  </div>
<div class="d-flex gap-2 flex-wrap">
   <a href="<?php echo base_url('warga/cetak_pemilih'); ?>" 
   target="_blank" class="btn-export btn-exp-print">
    <i class="bi bi-printer-fill"></i> Cetak
</a>
    <a href="<?php echo base_url('export/index/pemilih/excel'); ?>" class="btn-export btn-exp-excel">
        <i class="bi bi-file-earmark-excel-fill"></i> Export Excel
    </a>
    <a href="<?php echo base_url('export/index/pemilih/pdf'); ?>" class="btn-export" 
       style="background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;box-shadow:0 4px 12px rgba(220,38,38,.28);">
        <i class="bi bi-file-earmark-pdf-fill"></i> Export PDF
    </a>
</div>
</div>

<!-- Flash -->
<?php if($this->session->flashdata('success')): ?>
<div class="alert alert-success alert-dismissible fade show"
     style="border-radius:10px; font-size:.84rem; border:1.5px solid #6ee7b7; font-family:'Plus Jakarta Sans',sans-serif;">
  <i class="bi bi-check-circle-fill me-2"></i><?php echo $this->session->flashdata('success'); ?>
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<!-- ══════════ STAT CARDS ══════════ -->
<div class="pemilu-stat-grid">

  <!-- Total Pemilih -->
  <div class="pemilu-stat-card sc-teal">
    <div class="sc-label"><i class="bi bi-people-fill me-1"></i>Total Pemilih</div>
    <div class="sc-value"><?php echo number_format($stat['total']); ?></div>
    <div class="sc-sub">dari <?php echo number_format($stat['total_warga']); ?> jiwa</div>
    <div class="sc-icon"><i class="bi bi-people-fill"></i></div>
  </div>

  <!-- Laki-laki -->
  <div class="pemilu-stat-card sc-green">
    <div class="sc-label"><i class="bi bi-gender-male me-1"></i>Laki-Laki</div>
    <div class="sc-value"><?php echo number_format($stat['pria']); ?></div>
    <div class="sc-sub"><?php echo $stat['total'] > 0 ? round($stat['pria']/$stat['total']*100,1) : 0; ?>% dari pemilih</div>
    <div class="sc-icon"><i class="bi bi-gender-male"></i></div>
  </div>

  <!-- Perempuan -->
  <div class="pemilu-stat-card sc-orange">
    <div class="sc-label"><i class="bi bi-gender-female me-1"></i>Perempuan</div>
    <div class="sc-value"><?php echo number_format($stat['wanita']); ?></div>
    <div class="sc-sub"><?php echo $stat['total'] > 0 ? round($stat['wanita']/$stat['total']*100,1) : 0; ?>% dari pemilih</div>
    <div class="sc-icon"><i class="bi bi-gender-female"></i></div>
  </div>

  <!-- Pemilih Pemula -->
  <div class="pemilu-stat-card sc-amber">
    <div class="sc-label"><i class="bi bi-person-plus-fill me-1"></i>Pemilih Pemula</div>
    <div class="sc-value"><?php echo number_format($stat['pemula']); ?></div>
    <div class="sc-sub">Usia 17–21 tahun</div>
    <div class="sc-icon"><i class="bi bi-person-plus-fill"></i></div>
  </div>

  <!-- Lansia -->
  <div class="pemilu-stat-card sc-muted">
    <div class="sc-label"><i class="bi bi-person-cane me-1"></i>Lansia (56+)</div>
    <div class="sc-value"><?php echo number_format($stat['lansia']); ?></div>
    <div class="sc-sub">Usia 56 tahun ke atas</div>
    <div class="sc-icon"><i class="bi bi-person-cane"></i></div>
  </div>

</div>

<!-- ══════════ INFO KETENTUAN ══════════ -->
<div class="info-ketentuan no-print">
  <i class="bi bi-info-circle-fill"></i>
  <span>
    <strong>Ketentuan pemilih:</strong> WNI berusia <strong>≥ 17 tahun</strong> atau sudah/pernah menikah,
    bukan warga yang meninggal, terdaftar di KK wilayah ini.
    Data dihitung per <strong><?php echo date('d F Y'); ?></strong>.
  </span>
</div>

<!-- ══════════ FILTER BAR ══════════ -->
<div class="filter-bar no-print">
  <span class="fb-label"><i class="bi bi-funnel-fill"></i> Filter:</span>

  <div class="d-flex align-items-center gap-2">
    <label style="font-size:.75rem; font-weight:700; color:var(--slate-700); margin:0; white-space:nowrap;">Kelompok Umur</label>
    <select id="filterKelompok" class="form-select form-select-sm" style="width:auto;">
      <option value="">Semua</option>
      <option value="Pemula">Pemula (17–21)</option>
      <option value="Muda">Muda (22–35)</option>
      <option value="Dewasa">Dewasa (36–55)</option>
      <option value="Lansia">Lansia (56–70)</option>
      <option value="Tua">Tua (71+)</option>
    </select>
  </div>

  <div class="d-flex align-items-center gap-2">
    <label style="font-size:.75rem; font-weight:700; color:var(--slate-700); margin:0; white-space:nowrap;">Jenis Kelamin</label>
    <select id="filterJK" class="form-select form-select-sm" style="width:auto;">
      <option value="">Semua</option>
      <option value="L">Laki-laki</option>
      <option value="P">Perempuan</option>
    </select>
  </div>

  <div class="d-flex align-items-center gap-2">
    <label style="font-size:.75rem; font-weight:700; color:var(--slate-700); margin:0; white-space:nowrap;">Domisili</label>
    <select id="filterDomisili" class="form-select form-select-sm" style="width:auto;">
      <option value="">Semua</option>
      <option value="tetap">Tetap</option>
      <option value="kost">Kost</option>
      <option value="kontrak">Kontrak</option>
      <option value="pendatang">Pendatang</option>
      <option value="sementara">Sementara</option>
    </select>
  </div>

  <div class="ms-auto">
    <span id="jumlahTampil" class="filter-count" style="display:none;"></span>
  </div>
</div>

<!-- ══════════ TABEL ══════════ -->
<div class="section-card">
  <div class="section-card-header">
    <div class="title">
     <i class="bi bi-person-vcard"></i>
      Daftar Pemilih
    </div>
    <span class="record-pill"><?php echo count($pemilih); ?> orang memenuhi syarat</span>
  </div>

  <?php if(!empty($pemilih)): ?>

  <!-- Desktop Table -->
  <div class="desktop-table table-responsive">
    <table class="pemilu-table" id="tabelPemilih">
      <thead>
        <tr>
          <th style="width:46px;">No</th>
          <th>NIK</th>
          <th>Nama Lengkap</th>
          <th>L/P</th>
          <th>Tgl Lahir</th>
          <th>Umur</th>
          <th>Kelompok</th>
          <th>Status Kawin</th>
          <th>Domisili</th>
          <th>No KK / Kepala KK</th>
        </tr>
      </thead>
      <tbody>
      <?php $no = 1; foreach($pemilih as $p):
        $tgl_lahir = $p->tanggal_lahir ?? null;
        $umur = 0;
        if ($tgl_lahir) {
          $lahir = new DateTime($tgl_lahir);
          $umur  = $today->diff($lahir)->y;
        }
        $kel = kelompok_umur($umur);
        $dom = $p->status_domisili ?? 'tetap';
        $dom_label = ['tetap'=>'Tetap','kost'=>'Kost','kontrak'=>'Kontrak','pendatang'=>'Pendatang','sementara'=>'Sementara'];
        $dom_style = [
          'tetap'     => 'background:#dcfce7;color:#166534;border:1px solid #bbf7d0;',
          'kost'      => 'background:#fef3c7;color:#92400e;border:1px solid #fde68a;',
          'kontrak'   => 'background:#cffafe;color:#155e75;border:1px solid #a5f3fc;',
          'pendatang' => 'background:#fee2e2;color:#991b1b;border:1px solid #fecaca;',
          'sementara' => 'background:#f3f4f6;color:#6b7280;border:1px solid #e5e7eb;',
        ];
        $kawin_label = ['belum_kawin'=>'Belum Kawin','kawin'=>'Kawin','cerai_hidup'=>'Cerai Hidup','cerai_mati'=>'Cerai Mati'];
        $kawin = $p->status_perkawinan ?? '';
        $jk = $p->jenis_kelamin ?? '';
      ?>
      <tr data-kelompok="<?php echo $kel['label']; ?>"
          data-jk="<?php echo $jk; ?>"
          data-domisili="<?php echo $dom; ?>">

        <td style="font-size:.8rem; color:var(--slate-400); font-weight:600;"><?php echo $no++; ?></td>

        <td>
          <span class="badge-nik"><?php echo htmlspecialchars($p->nik ?? '-'); ?></span>
        </td>

        <td>
          <div class="person-cell">
            <div class="person-avatar <?php echo $jk === 'L' ? 'blue' : 'purple'; ?>">
              <i class="bi bi-person-fill"></i>
            </div>
            <div>
              <div style="font-weight:700; font-size:.84rem;"><?php echo htmlspecialchars($p->nama_lengkap ?? '-'); ?></div>
              <?php if(!empty($p->tempat_lahir)): ?>
              <small style="color:var(--slate-400); font-size:.73rem;"><?php echo htmlspecialchars($p->tempat_lahir); ?></small>
              <?php endif; ?>
            </div>
          </div>
        </td>

        <td>
          <?php if($jk === 'L'): ?>
          <span style="color:#1d4ed8; font-weight:800; font-size:.83rem;"><i class="bi bi-gender-male me-1"></i>L</span>
          <?php else: ?>
          <span style="color:#7c3aed; font-weight:800; font-size:.83rem;"><i class="bi bi-gender-female me-1"></i>P</span>
          <?php endif; ?>
        </td>

        <td style="font-size:.8rem; color:var(--slate-700); white-space:nowrap;">
          <?php echo $tgl_lahir ? date('d/m/Y', strtotime($tgl_lahir)) : '-'; ?>
        </td>

        <td>
          <span style="font-weight:800; color:var(--teal-700); font-size:.9rem;"><?php echo $umur; ?></span>
          <small style="color:var(--slate-400);"> thn</small>
        </td>

        <td>
          <span class="status-badge <?php echo $kel['cls']; ?>"><?php echo $kel['label']; ?></span>
        </td>

        <td style="font-size:.79rem; color:var(--slate-500);">
          <?php echo $kawin_label[$kawin] ?? ($kawin ?: '-'); ?>
        </td>

        <td>
          <span style="display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:.71rem;font-weight:700;<?php echo $dom_style[$dom] ?? 'background:#f3f4f6;color:#6b7280;'; ?>">
            <?php echo $dom_label[$dom] ?? ucfirst($dom); ?>
          </span>
        </td>

        <td style="font-size:.79rem;">
          <?php if(!empty($p->kk_id)): ?>
          <a href="<?php echo base_url('kartu-keluarga/detail/'.$p->kk_id); ?>"
             style="color:var(--teal-600); text-decoration:none; font-weight:700; font-size:.77rem;"
             title="Buka detail KK">
            <?php echo htmlspecialchars($p->no_kk ?? '-'); ?>
          </a>
          <?php if(!empty($p->nama_kepala_kk)): ?>
          <br><small style="color:var(--slate-400);"><?php echo htmlspecialchars($p->nama_kepala_kk); ?></small>
          <?php endif; ?>
          <?php else: ?>
          <span style="color:var(--slate-400);">-</span>
          <?php endif; ?>
        </td>

      </tr>
      <?php endforeach; ?>
      </tbody>
    </table>
  </div>

  <!-- Mobile List -->
  <div class="mobile-list">
    <?php
    $bc_map = ['tetap'=>'#14b8a6','kost'=>'#f59e0b','kontrak'=>'#0ea5e9','pendatang'=>'#ef4444','sementara'=>'#9ca3af'];
    foreach($pemilih as $p):
      $tgl_lahir = $p->tanggal_lahir ?? null;
      $umur = 0;
      if ($tgl_lahir) { $lahir = new DateTime($tgl_lahir); $umur = $today->diff($lahir)->y; }
      $kel = kelompok_umur($umur);
      $dom = $p->status_domisili ?? 'tetap';
      $dom_label = ['tetap'=>'Tetap','kost'=>'Kost','kontrak'=>'Kontrak','pendatang'=>'Pendatang','sementara'=>'Sementara'];
      $jk = $p->jenis_kelamin ?? '';
    ?>
    <div style="border-radius:11px; border:1.5px solid #f1f3f5; border-left:4px solid <?php echo $bc_map[$dom]??'#e5e7eb'; ?>; background:#fff; padding:11px 14px;"
         data-kelompok="<?php echo $kel['label']; ?>"
         data-jk="<?php echo $jk; ?>"
         data-domisili="<?php echo $dom; ?>">
      <div class="d-flex justify-content-between align-items-start mb-1">
        <div>
          <div style="font-weight:700; font-size:.88rem;"><?php echo htmlspecialchars($p->nama_lengkap ?? '-'); ?></div>
          <span class="badge-nik mt-1 d-inline-block"><?php echo htmlspecialchars($p->nik ?? '-'); ?></span>
        </div>
        <span class="status-badge <?php echo $kel['cls']; ?> flex-shrink-0 ms-2"><?php echo $kel['label']; ?></span>
      </div>
      <div class="d-flex flex-wrap gap-2 mt-2" style="font-size:.75rem; color:var(--slate-500);">
        <?php if($jk === 'L'): ?>
        <span style="color:#1d4ed8;font-weight:700;"><i class="bi bi-gender-male me-1"></i>Laki-laki</span>
        <?php else: ?>
        <span style="color:#7c3aed;font-weight:700;"><i class="bi bi-gender-female me-1"></i>Perempuan</span>
        <?php endif; ?>
        <span>·</span>
        <span><strong style="color:var(--teal-700);"><?php echo $umur; ?></strong> tahun</span>
        <?php if($tgl_lahir): ?><span>·</span><span><?php echo date('d/m/Y', strtotime($tgl_lahir)); ?></span><?php endif; ?>
        <span>·</span>
        <span><?php echo $dom_label[$dom] ?? ucfirst($dom); ?></span>
        <?php if(!empty($p->kk_id)): ?>
        <span>·</span>
        <a href="<?php echo base_url('kartu-keluarga/detail/'.$p->kk_id); ?>"
           style="color:var(--teal-600); text-decoration:none; font-weight:700;">
          <i class="bi bi-house-door me-1"></i>KK <?php echo htmlspecialchars($p->no_kk ?? ''); ?>
        </a>
        <?php endif; ?>
      </div>
    </div>
    <?php endforeach; ?>
  </div>

  <?php else: ?>
  <div style="padding:50px 20px; text-align:center; color:var(--slate-400);">
    <div style="width:64px;height:64px;border-radius:16px;background:var(--teal-50);color:var(--teal-400);display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin:0 auto 14px;">
      <i class="bi bi-ballot-check"></i>
    </div>
    <div style="font-weight:700; font-size:.9rem; color:var(--slate-600); margin-bottom:4px;">Belum ada data pemilih yang memenuhi syarat</div>
    <small>Pastikan data tanggal lahir warga sudah diisi</small>
  </div>
  <?php endif; ?>
</div>

</div><!-- /.container-fluid -->
</div><!-- /.pemilu-wrapper -->

<script>
document.addEventListener('DOMContentLoaded', function () {
  var fKel = document.getElementById('filterKelompok');
  var fJK  = document.getElementById('filterJK');
  var fDom = document.getElementById('filterDomisili');
  var info = document.getElementById('jumlahTampil');

  function applyFilter() {
    var kel = fKel ? fKel.value : '';
    var jk  = fJK  ? fJK.value  : '';
    var dom = fDom ? fDom.value : '';
    var count = 0;

    document.querySelectorAll('#tabelPemilih tbody tr').forEach(function(row) {
      var match = true;
      if (kel && row.dataset.kelompok !== kel) match = false;
      if (jk  && row.dataset.jk !== jk)       match = false;
      if (dom && row.dataset.domisili !== dom) match = false;
      row.style.display = match ? '' : 'none';
      if (match) count++;
    });

    document.querySelectorAll('.mobile-list > div[data-kelompok]').forEach(function(card) {
      var match = true;
      if (kel && card.dataset.kelompok !== kel) match = false;
      if (jk  && card.dataset.jk !== jk)       match = false;
      if (dom && card.dataset.domisili !== dom) match = false;
      card.style.display = match ? '' : 'none';
    });

    if (info) {
      if (kel || jk || dom) {
        info.textContent = count + ' data ditampilkan';
        info.style.display = 'inline-flex';
      } else {
        info.style.display = 'none';
      }
    }
  }

  if (fKel) fKel.addEventListener('change', applyFilter);
  if (fJK)  fJK.addEventListener('change', applyFilter);
  if (fDom) fDom.addEventListener('change', applyFilter);
});
</script>