/* ============================================================
   Sistem Informasi Desa Tedeng — stylesheet tunggal
   ============================================================ */
:root{
  --biru:#2563eb; --biru-tua:#1d4ed8; --biru-muda:#eff6ff;
  --hijau:#10b981; --ungu:#8b5cf6; --jingga:#f59e0b; --merah:#ef4444; --tosca:#06b6d4; --pink:#ec4899;
  --teks:#1e293b; --teks-lembut:#64748b; --garis:#e2e8f0; --latar:#f1f5f9;
  --bayangan:0 10px 30px rgba(15,23,42,.07);
  --bulat:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,Arial,sans-serif;background:var(--latar);color:var(--teks);font-size:15px;line-height:1.55}
a{color:var(--biru);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{margin:0 0 .4em}

/* ---------- Sidebar ---------- */
.sidebar-premium{
  position:fixed;left:0;top:0;width:282px;height:100vh;
  background:#fff;padding:22px 16px;box-shadow:0 8px 25px rgba(15,23,42,.08);
  overflow-y:auto;z-index:20;
}
.sidebar-premium::-webkit-scrollbar{width:6px}
.sidebar-premium::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px}
.brand{display:flex;align-items:center;gap:12px;padding:6px 4px 13px;border-bottom:1px solid var(--garis);margin-bottom:11px}
/* Logo perisai desa lebih tinggi daripada lebar: kotak 56x56 memaksanya
   berjarak sama di empat sisi sehingga terlihat seperti tempelan. */
.brand img{display:block;height:50px;width:auto;flex:0 0 auto}
.brand h2{font-size:18px;letter-spacing:.5px;margin:0 0 1px;color:#0f172a}
.brand p{margin:0;font-size:12px;color:var(--teks-lembut)}
/* Kelompok menu bisa dilipat. Dipakai <details>/<summary> supaya lipatan
   tetap bekerja tanpa JavaScript di halaman mana pun. */
.grup-menu{margin:0}
.sidebar-premium summary{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;letter-spacing:1.1px;color:var(--grup,#64748b);font-weight:700;
  margin:9px 2px 3px;padding:7px 11px;border-radius:10px;cursor:pointer;
  list-style:none;user-select:none;
}
.sidebar-premium summary::-webkit-details-marker{display:none}
.sidebar-premium summary:hover{background:var(--biru-muda)}
.sidebar-premium summary::after{content:"\203A";font-size:16px;line-height:1;color:var(--grup,#94a3b8);transition:transform .15s}
.grup-menu[open]>summary::after{transform:rotate(90deg)}
.sidebar-premium a{
  display:flex;align-items:center;gap:12px;
  padding:8px 13px;margin:2px 0;color:#334155;border-radius:12px;font-size:15.5px;
  transition:background .15s,color .15s;
}
.sidebar-premium a:hover{background:var(--biru-muda);text-decoration:none;color:var(--biru-tua)}
/* Kotak ikon: warna dari --c yang dipasang sidebar.php; garis ikon ikut currentColor. */
.sidebar-premium a i{
  font-style:normal;width:32px;height:32px;flex:0 0 32px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--c,#475569);color:#fff;border-radius:9px;
  box-shadow:0 3px 8px rgba(15,23,42,.16);
}
.sidebar-premium a i svg{width:19px;height:19px;display:block}
.sidebar-premium a.on{
  background:var(--biru);color:#fff;font-weight:600;
  box-shadow:0 6px 16px rgba(37,99,235,.28),inset 4px 0 0 rgba(255,255,255,.9);
}
.sidebar-premium a.on i{background:#fff;color:var(--biru);box-shadow:none}
.sidebar-premium .menu-top{margin-bottom:4px;font-weight:700}
.sidebar-premium .logout{background:#fef2f2;color:#dc2626;margin-top:14px;justify-content:center;font-weight:600}
.sidebar-premium .logout i{background:none;box-shadow:none;width:20px;height:20px;flex:0 0 20px;color:#dc2626}
.sidebar-premium .logout:hover{background:#fee2e2;color:#b91c1c}
.user-card{
  background:linear-gradient(135deg,#eff6ff,#e0e7ff);
  padding:12px 14px;border-radius:14px;margin-top:22px;
  display:flex;align-items:center;gap:11px;
}
.user-card .ava{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  background:var(--biru);color:#fff;font-weight:700;font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;
}
.user-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.user-nama{font-weight:700;color:#0f172a;font-size:15px}
.user-role{font-size:13px;color:var(--teks-lembut);font-weight:600}
.user-role::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:6px}

/* ---------- Area konten ---------- */
main,.content{margin-left:282px;padding:26px 30px;min-height:100vh}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap;
}
.topbar .cari{
  flex:1;min-width:240px;display:flex;gap:8px;align-items:center;
  background:#fff;border:1px solid var(--garis);border-radius:12px;padding:9px 14px;box-shadow:var(--bayangan);
}
.topbar .cari input{border:0;outline:0;flex:1;font:inherit;background:transparent}
.topbar .cari .kbd{font-size:11px;color:#94a3b8;border:1px solid var(--garis);border-radius:6px;padding:1px 6px}
.topbar .user-chip{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:7px 14px;box-shadow:var(--bayangan)}
.topbar .avatar{width:32px;height:32px;border-radius:50%;background:var(--biru);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.topbar .user-chip b{display:block;font-size:13.5px}
.topbar .user-chip span{font-size:11.5px;color:var(--teks-lembut)}

/* ---------- Kartu umum ---------- */
.card,.panel,.hero,.stats>div{background:#fff;border-radius:var(--bulat);padding:22px;box-shadow:var(--bayangan)}
.panel{margin-bottom:22px}
.panel h2{font-size:16px;margin-bottom:12px}
.hero{margin-bottom:22px}
.hero h1{font-size:24px;margin-bottom:4px}
.hero p{margin:0;color:var(--teks-lembut)}

/* ---------- Dashboard: hero bergradasi ---------- */
.dash-hero{
  display:grid;grid-template-columns:1.5fr 1fr;gap:0;overflow:hidden;
  padding:0;margin-bottom:22px;border-radius:22px;background:#fff;box-shadow:var(--bayangan);
}
.dash-hero .teks{padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.dash-hero .teks h1{font-size:25px;margin-bottom:6px}
.dash-hero .teks>p{color:var(--teks-lembut);margin:0 0 18px}
.dash-hero .ilustrasi{
  background:
    radial-gradient(circle at 78% 22%,rgba(255,255,255,.35),transparent 46%),
    linear-gradient(135deg,#059669 0%,#10b981 45%,#34d399 100%);
  position:relative;min-height:190px;
}
.dash-hero .ilustrasi::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(4,47,32,.35),transparent);
}
.dash-hero .ilustrasi::after{
  content:"🏛";position:absolute;right:26px;bottom:18px;font-size:74px;opacity:.9;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));
}
.dash-hero .ilustrasi .bendera{
  position:absolute;left:26px;top:22px;width:46px;height:32px;
  display:flex;flex-direction:column;border-radius:3px;overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.28);
}
.dash-hero .ilustrasi .bendera i{flex:1;display:block}
.dash-hero .ilustrasi .bendera i:first-child{background:#dc2626}
.dash-hero .ilustrasi .bendera i:last-child{background:#fff}
/* Foto kantor dari Profil Desa mengisi panel kanan sampai tepi. Sisi yang
   berlebih dipotong; tidak ada lagi ruang kosong bergradasi hijau. */
.dash-hero .ilustrasi.ada-foto::before,
.dash-hero .ilustrasi.ada-foto::after{display:none}
.dash-hero .ilustrasi.ada-foto{min-height:190px}
.dash-hero .ilustrasi.ada-foto img{
  display:block;width:100%;height:100%;object-fit:cover;
}

/* chip status */
.chip-row{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid var(--garis);
  border-radius:12px;padding:8px 12px;font-size:12.5px;
}
.chip b{display:block;font-size:12.5px;color:#0f172a}
.chip span{font-size:11px}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.dot.hijau{background:var(--hijau)} .dot.merah{background:var(--merah)} .dot.abu{background:#94a3b8}
.ok{color:var(--hijau);font-weight:700} .warn{color:var(--jingga);font-weight:700} .bad{color:var(--merah);font-weight:700}

/* ---------- Aksi cepat ---------- */
.aksi-cepat{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:22px}
.aksi{
  position:relative;overflow:hidden;
  border-radius:16px;padding:16px;color:#fff;box-shadow:var(--bayangan);
  display:flex;flex-direction:column;gap:6px;min-height:168px;justify-content:flex-start;
}
.aksi:hover{text-decoration:none;transform:translateY(-2px);transition:transform .15s}
.aksi b{font-size:14px;position:relative;z-index:1}
.aksi small{opacity:.92;font-size:11.5px;position:relative;z-index:1}
/* Gambar desa dibiarkan mengalir ke sudut kanan bawah kartu, bukan dikotakkan,
   supaya kartu terbaca seperti satu kesatuan dan teks tetap rata kiri atas. */
.aksi .ikon{position:absolute;right:8px;bottom:8px;width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(2,6,23,.25))}
.aksi.b1{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.aksi.b2{background:linear-gradient(135deg,#10b981,#059669)}
.aksi.b3{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.aksi.b4{background:linear-gradient(135deg,#fb923c,#ea580c)}
.aksi.b5{background:linear-gradient(135deg,#f472b6,#db2777)}
.aksi.b6{background:linear-gradient(135deg,#22d3ee,#0891b2)}

/* ---------- Kartu statistik ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}
.stats>div{padding:18px 20px;position:relative;overflow:hidden}
.stats .label{font-size:12.5px;color:var(--teks-lembut);display:flex;align-items:center;gap:8px}
.stats .angka{font-size:28px;font-weight:800;letter-spacing:-.5px;margin:6px 0 2px}
.stats .delta{font-size:11.5px;color:var(--teks-lembut)}
.stats .spark{position:absolute;right:14px;top:16px;opacity:.85}
.ic{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.ic svg{width:17px;height:17px}
.ic.biru{background:#dbeafe;color:#2563eb} .ic.hijau{background:#d1fae5;color:#059669} .ic.ungu{background:#ede9fe;color:#7c3aed} .ic.jingga{background:#ffedd5;color:#ea580c}

/* ---------- Grid dashboard ---------- */
.grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.sec-head h2{margin:0;font-size:16px}
.sec-head .tag{font-size:11.5px;color:var(--teks-lembut);background:#f1f5f9;border-radius:8px;padding:3px 9px}

/* daftar aktivitas */
.aktivitas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.aktivitas li{display:flex;gap:11px;align-items:flex-start}
.aktivitas .ic{flex:0 0 30px}
.aktivitas b{display:block;font-size:13.5px}
.aktivitas small{color:var(--teks-lembut);font-size:11.5px}

/* Batang per kategori: satu warna per golongan supaya mata memisahkan golongan
   tanpa membaca label lebih dulu. Batang diukur dari nilai terbesar. */
.bar-list{display:flex;flex-direction:column;gap:14px;margin:0}
.bar-list .row{display:grid;grid-template-columns:1fr auto;gap:5px 10px;font-size:13px}
.bar-list .nama{color:#334155;font-weight:600;display:flex;align-items:center;gap:8px}
.bar-list .nama::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:3px;background:linear-gradient(135deg,var(--c,#64748b),var(--c2,#94a3b8))}
.bar-list .nilai{font-weight:800;color:var(--cg,#0f172a);font-variant-numeric:tabular-nums}
.bar-list .nilai small{font-weight:600;color:#94a3b8;margin-left:6px;font-size:11.5px}
.bar-list .track{grid-column:1/-1;display:block;height:9px;background:#eef2f7;border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(15,23,42,.07)}
.bar-list .fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--c,#64748b),var(--c2,#94a3b8));box-shadow:inset 0 1px 0 rgba(255,255,255,.45);transform-origin:left center;animation:batang-tumbuh .8s cubic-bezier(.22,1,.36,1) both}
.bar-list .row:hover .fill{filter:saturate(1.2) brightness(1.06)}
.bar-list .row:hover .nama{color:var(--cg,#0f172a)}
@keyframes batang-tumbuh{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* piramida umur untuk laporan per kategori */
.piramida{display:flex;flex-direction:column;gap:8px}
.piramida .kepala,.piramida .baris{display:grid;grid-template-columns:56px 1fr 24% 1fr 56px;gap:10px;align-items:center}
.piramida .kepala{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#64748b}
.piramida .kepala .l{grid-column:2;text-align:right;color:#1d4ed8}
.piramida .kepala .tengah{grid-column:3;text-align:center}
.piramida .kepala .p{grid-column:4;text-align:left;color:#be185d}
.piramida .baris{font-size:12.5px}
.piramida .baris b{text-align:right;color:#1d4ed8;font-weight:800;font-variant-numeric:tabular-nums}
.piramida .baris b.kiri{text-align:left;color:#be185d}
.piramida .tengah{text-align:center;color:#334155;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.piramida .batang{height:13px;border-radius:999px;display:flex}
.piramida .batang.l{justify-content:flex-end;background:#e7edfb}
.piramida .batang.p{background:#fdeaf1}
.piramida .batang i{display:block;height:100%;border-radius:999px;animation:batang-tumbuh .8s cubic-bezier(.22,1,.36,1) both}
.piramida .batang.l i{background:linear-gradient(270deg,#2563eb,#8b5cf6);transform-origin:right center}
.piramida .batang.p i{background:linear-gradient(90deg,#e11d48,#f472b6);transform-origin:left center}
.piramida .baris:hover .batang{filter:saturate(1.18) brightness(1.03)}

/* kartu indikator golongan umur */
.indikator{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.indikator>div{position:relative;overflow:hidden;border:1px solid var(--garis);border-radius:14px;padding:13px 15px 13px 19px;background:#fff;transition:box-shadow .18s,transform .18s}
.indikator>div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--c,#6366f1),var(--c2,#22d3ee))}
.indikator>div:hover{box-shadow:0 6px 18px rgba(15,23,42,.09);transform:translateY(-1px)}
.indikator .lbl{font-size:12.5px;color:var(--teks-lembut);display:block}
.indikator b{display:block;font-size:25px;font-weight:800;letter-spacing:-.5px;margin:3px 0 2px;color:var(--cg,#0f172a);font-variant-numeric:tabular-nums}
.indikator small{font-size:11.5px;color:var(--teks-lembut)}

/* status sistem */
.sistem-list{display:flex;flex-direction:column;gap:11px;font-size:13px}
.sistem-list .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sistem-list .k{color:var(--teks-lembut);display:flex;align-items:center;gap:8px}
.meter{height:7px;background:#f1f5f9;border-radius:7px;overflow:hidden;margin-top:5px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#34d399,#10b981)}

/* donut + legenda */
.donut-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donut{transform-origin:center;animation:donut-muncul .7s ease-out both}
.donut circle[stroke-dasharray]:hover{stroke-width:24}
@keyframes donut-muncul{from{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}
.grafik-garis .titik:hover{r:6}
.legenda{display:flex;flex-direction:column;gap:10px;font-size:13px}
.legenda .row{display:grid;grid-template-columns:11px 1fr auto auto;gap:9px;align-items:center}
.legenda .dot{width:11px;height:11px;border-radius:4px}
.legenda .nm{color:#334155;font-weight:600}
.legenda b{font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums}
.legenda .tag{border-radius:7px;padding:2px 8px;font-size:11.5px;font-weight:700}

/* ---------- Toolbar & form ---------- */
.toolbar{display:flex;gap:12px;align-items:center;margin:16px 0;flex-wrap:wrap}
/* Anak toolbar boleh menyusut di bawah lebar bawaan inputnya; tanpa ini form satu baris menjebol layar sempit. */
.toolbar>div{min-width:0}
.toolbar input{flex:1;padding:12px;border:1px solid #d7dee8;border-radius:12px;font:inherit}
.panel form{display:flex;flex-direction:column;gap:10px;max-width:760px}
/* Aturan .panel form di atas memakai spesifikasi lebih tinggi daripada .toolbar,
   sehingga form cari di halaman daftar ikut menjadi kolom dan melebar hanya
   760px. Toolbar memang satu baris: input memanjang, tombol di kanannya. */
.panel form.toolbar{flex-direction:row;max-width:none}
.panel label{font-weight:600;color:#475569;font-size:13px}
.panel input,.panel select,.panel textarea{padding:11px;border:1px solid #d7dee8;border-radius:10px;font:inherit;background:#fff;width:100%}
.panel input[type=checkbox]{width:auto}
/* Input file bawaan browser: tombol bulat + alamat panjang yang melingkar ke
   baris kedua, dan ikut terbingkai kotak form. Di dalam .berkas kontrolnya
   dibangun ulang: tombol rata + satu baris nama berkas yang dipotong elipsis.
   Di luar .berkas, input file dibiarkan apa adanya supaya tidak hilang. */
.berkas input[type=file]{position:absolute;width:1px;height:1px;opacity:0;padding:0;border:0;overflow:hidden}
.berkas{display:flex;align-items:center;gap:10px;min-width:0;font-weight:500;color:#475569}
.berkas .pilih{
  flex:none;padding:9px 15px;border-radius:10px;background:var(--biru);color:#fff;
  font-size:13px;font-weight:600;cursor:pointer;
}
.berkas:hover .pilih,.berkas input:focus-visible+.pilih{background:#1d4ed8}
.berkas .nama{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;color:#64748b;
}
.berkas .nama.belum{font-style:normal;color:#94a3b8}

/* ---------- Unggah berkas KPU: area seret-lepas + pemetaan kolom ---------- */
.seret{
  display:flex;align-items:center;gap:14px;margin:16px 0 0;padding:20px 22px;
  border:2px dashed #c3cfe0;border-radius:14px;background:#f8fafc;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.seret:hover,.seret:focus-visible{border-color:var(--biru);background:#f3f7ff}
.seret.sasaran{border-color:var(--biru);background:#e8f0fe}
.seret.punya{border-style:solid;border-color:var(--hijau);background:#f0fdf4}
.seret svg{flex:none;width:32px;height:32px;color:var(--biru)}
.seret b{display:block;font-size:14.5px;color:#0f172a;overflow-wrap:anywhere}
.seret span{display:block;font-size:12.5px;color:var(--teks-lembut)}
.seret input[type=file]{position:absolute;width:1px;height:1px;opacity:0;padding:0;border:0;overflow:hidden}
.maju{height:8px;border-radius:99px;background:#e2e8f0;overflow:hidden;margin:12px 0 0}
.maju i{display:block;height:100%;width:0;background:var(--biru);transition:width .2s}
.gulir{overflow-x:auto;margin-top:14px}
.petak-tabel{table-layout:auto}
.petak-tabel th,.petak-tabel td{padding:8px 10px;font-size:12.5px;text-align:left;white-space:nowrap}
.petak-tabel thead th{background:#f1f5f9;color:#334155;font-weight:600;border-bottom:1px solid var(--garis);border-radius:0}
.petak-tabel thead th:first-child,.petak-tabel tbody th{background:#f8fafc;color:var(--teks-lembut);font-weight:600}
.petak-tabel td{max-width:240px;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid #eef2f7}
.petak-tabel select{width:100%;min-width:120px;padding:7px 8px;border:1px solid #d7dee8;border-radius:9px;background:#fff;font:inherit;font-size:12.5px}
/* Lipatan "Betulkan pemetaan kolom": tabelnya lebar, jadi ditutup dulu kalau
   blanko sudah dikenali. Ditutup memakai <details>, tetap tanpa JavaScript. */
#petak-rinci>summary{
  display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#334155;
  padding:8px 2px;cursor:pointer;list-style:none;user-select:none}
#petak-rinci>summary::-webkit-details-marker{display:none}
#petak-rinci>summary::before{content:"\25B8";font-size:13px;line-height:1;color:var(--biru)}
#petak-rinci[open]>summary::before{content:"\25BE"}
#petak-rinci>summary:hover{color:var(--biru)}
/* Kolom label ditahankan di kiri supaya nama baris tetap terbaca saat tabelnya
   digulir ke kanan — satu blanko KPU bisa 15 kolom. */
.petak-tabel th.label{position:sticky;left:0;background:#f8fafc;border-right:1px solid var(--garis)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px}
.form-grid .lebar{grid-column:1/-1}
fieldset{border:1px solid var(--garis);border-radius:12px;padding:14px 16px;margin:0 0 16px}
legend{font-size:12.5px;font-weight:700;color:var(--teks-lembut);padding:0 6px}

/* ---------- Tabel ---------- */
table{width:100%;border-collapse:collapse;margin-top:14px;background:#fff}
th{background:var(--biru);color:#fff;padding:11px 12px;text-align:left;font-size:12.5px;font-weight:600}
th:first-child{border-top-left-radius:10px} th:last-child{border-top-right-radius:10px}
td{padding:11px 12px;border-bottom:1px solid #eef2f7;font-size:13.5px}
tbody tr:hover td{background:#f8fafc}
td .aksi-tabel{display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px}
/* Tabel berisi pola/contoh nomor surat: boleh putus di tanda pemisah supaya layar sempit tidak menggulir. */
table.ulur td,table.ulur th{overflow-wrap:anywhere}
.kosong{text-align:center;color:var(--teks-lembut);padding:22px}
.catatan{margin:0;color:var(--teks-lembut);font-size:13px}
/* Kolom tanggal pada daftar: satu baris, jangan putus menjadi "2026-10-" / "25". */
td.tgl{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Penjelasan tahap di halaman daftar pemilih: satu baris tipis di bawah judul. */
.terang{margin:0 0 12px;color:var(--teks-lembut);font-size:13px}

/* Tombol kecil penyalin NIK, dipakai pada daftar selisih berkas KPU. */
.salin{
  display:inline-block;margin-left:6px;padding:2px 8px;border:1px solid var(--garis);
  border-radius:8px;background:#f8fafc;color:var(--teks-lembut);font-size:11px;cursor:pointer;
}
.salin:hover{background:#eef2ff;color:var(--biru)}

/* Alur DPS -> DPSHP -> DPT. Tiga petak sejajar; yang sedang dikerjakan ditandai,
   yang sudah disahkan hijau supaya terbaca sebagai berkas jadi. */
.tahap-alur{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.tahap-alur .lomp{flex:1;min-width:215px;border:1px solid var(--garis);border-radius:12px;padding:11px 14px;
  background:#fff;display:flex;flex-direction:column;gap:3px;box-shadow:var(--bayangan)}
.tahap-alur .lomp b{font-size:13.5px}
.tahap-alur .lomp small{font-size:11.5px;color:var(--teks-lembut)}
.tahap-alur .lomp.on{border-color:var(--biru);background:#eff6ff}
.tahap-alur .lomp.beres{border-color:#bbf7d0;background:#f0fdf4}

/* Tabel label-nilai untuk halaman detail biodata */
table.info{margin-top:0}
table.info th{background:#f8fafc;color:var(--teks-lembut);width:38%;font-weight:600;font-size:12.5px;
  border-bottom:1px solid #eef2f7;border-radius:0;text-transform:none;padding:10px 12px}
table.info tr:first-child th{border-top-left-radius:10px}
table.info td{font-size:13.5px}
table.info .belum{color:#cbd5e1}

/* ---------- Tombol & badge ---------- */
.btn{display:inline-block;padding:10px 18px;border:0;border-radius:12px;background:var(--biru);color:#fff;text-decoration:none;cursor:pointer;font:inherit;font-size:13.5px}
.btn:hover{background:var(--biru-tua);text-decoration:none;color:#fff}
.btn.green{background:var(--hijau)} .btn.green:hover{background:#059669}
.btn.red{background:var(--merah)} .btn.red:hover{background:#b91c1c}
.btn.grey{background:#e2e8f0;color:#334155} .btn.grey:hover{background:#cbd5e1;color:#0f172a}
.btn.kecil{padding:6px 12px;font-size:12px;border-radius:9px}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600}
.badge.hijau{background:#d1fae5;color:#065f46} .badge.merah{background:#fee2e2;color:#991b1b}
.badge.biru{background:#dbeafe;color:#1e40af} .badge.abu{background:#e2e8f0;color:#475569}
.badge.jingga{background:#ffedd5;color:#9a3412}

/* ---------- Pesan status ---------- */
.pesan{padding:13px 16px;border-radius:12px;margin-bottom:18px;font-size:13.5px;border:1px solid transparent}
.pesan.sukses{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.pesan.gagal{background:#fef2f2;border-color:#fecaca;color:#991b1c}
.pesan.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}

/* ---------- Footer ---------- */
.foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--garis);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--teks-lembut);font-size:12.5px}

/* ---------- Galeri latar halaman login ---------- */
.latar-kisi{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.latar-kartu{border:1px solid var(--garis);border-radius:14px;overflow:hidden;background:#fff}
.latar-kartu.aktif{border-color:var(--hijau);box-shadow:0 0 0 3px rgba(16,185,129,.16)}
.latar-liat{aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#0f172a}
.latar-bawah{display:flex;align-items:center;gap:8px;padding:10px 12px;flex-wrap:wrap}
.latar-bawah form{max-width:none;display:block;margin:0}
.latar-badge{font-size:11.5px;font-weight:800;letter-spacing:.6px;color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:8px;padding:5px 9px}
.latar-catatan{margin:0;padding:10px 12px;color:var(--merah);font-size:12.5px}
.latar-mati{margin-top:16px}
.latar-syarat{margin:16px 0 0;padding:13px 15px;border-radius:12px;background:#f8fafc;border:1px solid var(--garis);font-size:12.5px;line-height:1.7;color:#475569}
.latar-syarat b{color:#0f172a}

/* ---------- Editor kutipan halaman login ---------- */
.moto-ket{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:#f8fafc;border:1px solid var(--garis);font-size:12.5px;line-height:1.85;color:#475569}
.moto-ket code{background:#e2e8f0;border-radius:6px;padding:2px 6px;font-size:12px;color:#0f172a}
.moto-status{margin:0 0 14px;font-size:13px;color:#92400e}
.moto-baris{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;margin-bottom:10px}
.moto-nomor{display:grid;place-items:center;width:30px;height:30px;margin-top:6px;border-radius:9px;background:#e2e8f0;color:#475569;font-size:12px;font-weight:800}
.moto-liat{margin:6px 0 0;min-height:19px;font-size:12.5px;line-height:1.6;color:#334155;overflow-wrap:anywhere}
.moto-liat i{font-style:normal;font-weight:700;color:#a16207}
.moto-liat i.tosca{color:#0e7490}
.moto-liat i.pink{color:#be185d}
.moto-liat i.lime{color:#4d7c0f}
.moto-liat .moto-kosong{color:#94a3b8;font-style:italic}
.moto-reset{margin-top:16px}

/* ============================================================
   Halaman login — satu-satunya halaman tanpa sidebar, jadi
   seluruh aturannya berawalan .auth- dan tidak menimpa halaman lain.
   ============================================================ */
.auth-body{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(820px 520px at 10% 6%,rgba(16,185,129,.30),transparent 62%),
    radial-gradient(760px 520px at 92% 96%,rgba(37,99,235,.24),transparent 64%),
    #04231b;
}
/* Foto desa bersifat opsional. login.php hanya memasang kelas ini kalau
   berkasnya benar-benar ada, jadi tidak ada permintaan gambar yang gagal.
   Tanpa foto, seluruh halaman tetap tampak seperti sekarang. */
/* Elemen foto dibuat oleh login.php hanya kalau ada berkasnya, jadi tidak
   pernah ada permintaan gambar yang gagal. Url-nya dipasang lewat atribut
   style elemen ini, bukan lewat custom property: url() di dalam custom
   property diselesaikan relatif ke css/main.css, bukan ke halaman, sehingga
   asetnya justru dicari di css/assets/ dan 404. */
.auth-foto{
  position:fixed;inset:0;z-index:-1;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  /* Dibiarkan nyaris penuh: efek kaca di kartu kanan terbaca dari bentuk
     foto yang melembur, jadi foto yang ditenggelamkan membuatnya pudar. */
  opacity:.85;
}
/* Cangkangnya transparan: panel kiri duduk langsung di atas latar,
   hanya formulir yang jadi kartu kaca. minmax(0,..) menahan lajur supaya
   satu kata panjang buatan pengguna tidak melebarkan kolom. */
.auth-card{
  width:100%;max-width:1080px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
  gap:clamp(20px,3vw,44px);
}

/* Panel kiri */
.auth-intro{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,3vw,34px) clamp(24px,3.2vw,42px);color:#fff;overflow:hidden;
  container-type:inline-size;
  /* Kerudung searah: teks rata kiri jadi selalu duduk di bagian tergelap,
     sementara sisi kanan panel dibiarkan bening supaya fotonya tetap terlihat.
     Tanpa kerudung ini, judul kuning di atas foto langit yang cerah turun
     di bawah 3:1. */
  background:linear-gradient(100deg,rgba(2,26,20,.62) 0%,rgba(2,26,20,.48) 55%,rgba(2,26,20,0) 100%);
}
/* Tanpa pelat di belakang teks, bayangan halus ini yang menjaga tulisan
   tetap terbaca kalau foto desa dipasang sebagai latar. */
.auth-merek span,.auth-judul,.auth-lokasi{text-shadow:0 2px 14px rgba(2,20,15,.55)}
.auth-bola{position:absolute;border-radius:50%;filter:blur(48px);pointer-events:none}
.auth-bola.satu{width:270px;height:270px;background:rgba(52,211,153,.55);top:-90px;right:-70px}
.auth-bola.dua{width:230px;height:230px;background:rgba(34,211,238,.45);bottom:-80px;left:-60px}
/* Isi panel kiri sengaja diberi position:relative supaya duduk di atas
   ornamen, bukan lewat .auth-intro>* — aturan anak itu lebih spesifik
   daripada .auth-bola dan membuat ornamen ikut mengalir. */
.auth-merek,.auth-judul,.auth-lokasi,.auth-moto,.auth-fitur{position:relative;z-index:1}
.auth-merek{display:flex;align-items:center;gap:13px;margin-bottom:clamp(16px,1.6vw,22px)}
.auth-merek img{
  width:52px;height:52px;object-fit:contain;border-radius:14px;padding:6px;
  background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.auth-merek span{font-size:11.5px;font-weight:700;letter-spacing:1.6px;line-height:1.5;opacity:.9}
.auth-judul{font-size:clamp(34px,3.6vw,44px);font-weight:800;letter-spacing:-1.5px;line-height:1.04;margin:0}
.auth-judul em{display:block;font-style:normal;color:#fde047}
.auth-lokasi{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.86)}
.auth-lokasi b{color:#fff;font-weight:700}
/* Ukuran fluid: clamp(min, lajur pandang, maks) membuat kotak kutipan
   ikut membesar/mengecil di semua lebar layar tanpa aturan per-perangkat.
   Baris kedua ikut menentukan: cqw mengikat huruf ke lebar PANEL kiri
   (bukan lebar jendela) sehingga teks mengisi kotak; baris pertama adalah
   cadangan untuk browser tanpa container query unit. */
/* Pelat kutipan: kerudung panel sudah menggelapkan sisi kiri, .58 cukup
   untuk menaikkan warna sorotan tetap di atas 4,5:1 tanpa membuat kotak
   kutipan jadi blok pekat yang hilang garisnya. */
.auth-moto{
  display:grid;
  margin-top:clamp(16px,1.8vw,22px);
  padding:clamp(14px,1.4vw,17px) clamp(16px,1.8vw,20px);
  border-radius:clamp(14px,1.6vw,18px);
  background:rgba(2,39,30,.58);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  font-size:clamp(17px,1.6vw + 12px,32px);
  font-size:clamp(17px,6.6cqi,32px);
  font-weight:700;line-height:1.4;
  /* Isinya sekarang diketik perangkat desa: kata panjang tanpa spasi harus
     tetap bisa dipatahkan, tidak meluber keluar pelat. */
  overflow-wrap:break-word;
  overflow-wrap:anywhere;
}
/* Kata yang disorot berganti warna supaya tidak kaku. Paletnya terang agar
   tetap terbaca di atas gradasi hijau; <i> tanpa kelas = kuning. */
.auth-moto i{font-style:normal;color:#fde047}
.auth-moto i.tosca{color:#67e8f9}
.auth-moto i.pink{color:#ffb3e0}
.auth-moto i.lime{color:#bef264}
/* Semua kutipan ditumpuk di sel yang sama supaya tinggi kotak tidak
   berubah saat teks berganti — sel setinggi kutipan terpanjang.
   Sengaja tanpa text-wrap:balance: properti itu membagi kalimat jadi dua
   baris sama pendek sehingga keduanya berhenti di tengah kotak. */
.auth-moto-teks{grid-area:1/1;opacity:0;transition:opacity .7s ease;text-shadow:0 1px 10px rgba(0,0,0,.28)}
.auth-moto-teks.on{opacity:1}
.auth-fitur{display:grid;gap:8px;margin-top:auto;padding-top:clamp(16px,1.7vw,22px)}
.auth-fitur div{
  display:flex;align-items:center;gap:12px;
  padding:8px 13px;border-radius:12px;
  background:rgba(2,39,30,.62);border:1px solid rgba(255,255,255,.18);
  font-size:13.5px;
}
.auth-fitur b{font-weight:700;color:#fff}
.auth-fitur em{font-style:normal;font-size:16px;width:28px;height:28px;flex:0 0 28px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;background:rgba(255,255,255,.2)}

/* Panel kanan — kartu kaca mengambang. Kacanya diberi warna gelap, bukan
   putih: lewat warna apa pun foto di belakangnya, teks putih di atas pelat
   gelap ini tetap di atas 4,5:1. Pelat kaca putih akan hilang kontrasnya
   begitu fotonya cerah (langit, tembok kapur, semen jalan). */
.auth-form{
  width:100%;max-width:470px;margin:0 auto;
  padding:clamp(26px,3vw,40px);
  display:flex;flex-direction:column;justify-content:center;
  border-radius:26px;color:#fff;
  background:rgba(4,35,27,.55);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 30px 70px rgba(2,20,15,.45),inset 0 1px 0 rgba(255,255,255,.22);
  /* blur() + saturate() adalah yang membuat kartu terasa seperti kaca:
     latar di belakangnya ikut nembus, hanya melembur. -webkit- dipakai
     Safari; browser tanpa dukungan tetap menampilkan pelat transparan. */
  backdrop-filter:blur(14px) saturate(1.35);
  -webkit-backdrop-filter:blur(14px) saturate(1.35);
}
.auth-form h2{font-size:28px;font-weight:800;letter-spacing:-.4px;margin:0 0 4px;color:#fff}
.auth-form>p{margin:0 0 24px;color:rgba(255,255,255,.88);font-size:14px}
.auth-form>p b{color:#a7f3d0}
.auth-alert{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 20px;
  font-size:13.5px;font-weight:600;box-shadow:0 6px 16px rgba(153,27,28,.10);
}
.auth-alert em{font-style:normal}
.auth-field{margin-bottom:15px}
.auth-field>label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.3px;color:rgba(255,255,255,.92);margin-bottom:6px}
.auth-kotak{position:relative;display:flex;align-items:center}
.auth-kotak>i{
  position:absolute;left:14px;font-style:normal;font-size:15px;
  display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;
  border-radius:7px;background:#e6edf5;
}
/* Isian tetap putih solid: di atas kaca, teks gelap di kolom putih jauh
   lebih terbaca daripada teks putih di atas pelat transparan. */
.auth-kotak input{
  width:100%;padding:12px 44px 12px 46px;
  border:1.5px solid rgba(255,255,255,.55);border-radius:13px;background:rgba(255,255,255,.94);
  font:inherit;font-size:15px;color:#0f172a;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.auth-kotak input::placeholder{color:#94a3b8}
.auth-kotak input:focus{
  outline:none;background:#fff;border-color:var(--biru);
  box-shadow:0 0 0 4px rgba(37,99,235,.20);
}
.auth-lihat{
  position:absolute;right:9px;padding:7px 9px;border:0;border-radius:9px;
  background:transparent;cursor:pointer;font:inherit;font-size:14px;
  color:#475569;
}
.auth-lihat:hover{background:#e6edf5;color:#0f172a}
.auth-lihat:focus-visible{outline:2px solid var(--biru);outline-offset:2px}
.auth-tall{display:flex;justify-content:flex-end;margin:-4px 0 18px}
.auth-tall span{font-size:12px;color:rgba(255,255,255,.82)}
.auth-btn{
  width:100%;padding:14px;border:0;border-radius:13px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:700;letter-spacing:.5px;color:#fff;
  background:linear-gradient(100deg,#047857,#2563eb);
  box-shadow:0 12px 26px rgba(4,120,87,.26);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(4,120,87,.32);filter:saturate(1.08)}
.auth-btn:active{transform:translateY(0)}
.auth-btn[disabled]{opacity:.65;pointer-events:none}
.auth-info{
  margin-top:22px;padding:13px 15px;border-radius:13px;
  background:rgba(2,26,20,.38);border:1px solid rgba(255,255,255,.22);
  font-size:12.5px;line-height:1.6;color:#fff;
}
.auth-kaki{margin-top:24px;text-align:center;font-size:11.5px;color:rgba(255,255,255,.82);line-height:1.7}

@media (max-width:900px){
  .auth-body{padding:0;place-items:stretch}
  .auth-card{grid-template-columns:minmax(0,1fr);gap:0;align-items:stretch}
  .auth-intro{padding:26px 22px}
  .auth-merek{margin-bottom:18px}
  .auth-judul{font-size:34px}
  .auth-fitur{display:none}
  /* Satu kolom: tanpa batas ini kotak kutipan memanjang seukuran layar tablet. */
  .auth-moto{max-width:560px}
  /* Layar sempit: kartu kaca jadi panel selebar layar, sisa-sisa margin
     dan lengkung tepi hanya membuang ruang. */
  .auth-form{max-width:none;margin:0;border-radius:0;border-left:0;border-right:0;padding:28px 22px 34px}
}
@media (prefers-reduced-motion:reduce){
  .auth-btn{transition:none}
  .auth-btn:hover{transform:none;box-shadow:0 12px 26px rgba(4,120,87,.26)}
  .auth-moto-teks{transition:none}
}

/* ---------- Responsif ---------- */
@media (max-width:1200px){
  .aksi-cepat{grid-template-columns:repeat(3,1fr)}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .indikator{grid-template-columns:repeat(2,1fr)}
  .piramida .kepala,.piramida .baris{grid-template-columns:44px 1fr 22% 1fr 44px;gap:6px}
}
@media (max-width:900px){
  .sidebar-premium{position:static;width:auto;height:auto;box-shadow:none;border-bottom:1px solid var(--garis)}
  main,.content{margin-left:0;padding:18px}
  .dash-hero{grid-template-columns:1fr}
  .dash-hero .ilustrasi{min-height:120px}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .stats,.aksi-cepat{grid-template-columns:1fr}
}