/* Pilkades Kepahiang — tema dashboard (mengikuti contoh desain: sidebar, kartu lembut, biru + amber) */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:800;font-display:swap;src:url(../fonts/inter-latin-800-normal.woff2) format("woff2")}

:root{
  --primary:#3b82f6;--primary-d:#2563eb;--primary-soft:#eaf1ff;
  --success:#22c55e;--success-soft:#e7f8ee;--warning:#f59e0b;--warning-soft:#fff4dc;
  --danger:#ef4444;--danger-soft:#fdeaea;--orange:#f97316;--orange-soft:#fff0e6;
  --bg:#f3f6fc;--card:#fff;--border:#e8edf6;--text:#1f2937;--muted:#6b7280;--banner:#fbf1e1;--banner-b:#f3e0bd;
  --radius:16px;--shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(59,130,246,.05);
  --sb-w:248px;
  --bs-body-font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs-body-color:var(--text);--bs-body-bg:var(--bg);--bs-primary:var(--primary);--bs-primary-rgb:59,130,246;
  --bs-border-color:var(--border);--bs-link-color:var(--primary-d);
}
html{scroll-padding-top:16px}
body{font-family:var(--bs-body-font-family);font-size:14px;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.01em}
.btn{font-weight:600;border-radius:10px;font-size:13.5px}
.btn-primary{--bs-btn-bg:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--primary-d);--bs-btn-hover-border-color:var(--primary-d);--bs-btn-active-bg:var(--primary-d)}
.btn-soft{background:var(--primary-soft);color:var(--primary-d);border:0}.btn-soft:hover{background:#dbe8ff;color:var(--primary-d)}
.form-control,.form-select{border-radius:10px;border-color:#dfe5f1;font-size:14px;padding:.55rem .8rem}
.form-select{padding-right:2.4rem}.form-select-sm{padding:.3rem 2.2rem .3rem .6rem}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 .2rem rgba(59,130,246,.15)}
.form-label{font-weight:600;font-size:12.5px;color:#475467;margin-bottom:.3rem}
.modal-content{border:0;border-radius:18px;box-shadow:0 20px 60px rgba(16,24,40,.2)}
.modal-header{border-bottom:1px solid var(--border)}.modal-footer{border-top:1px solid var(--border)}

/* ---- Layout ---- */
.app{display:flex;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sb-w);background:#fff;border-right:1px solid var(--border);padding:18px 14px;display:flex;flex-direction:column;z-index:1040;overflow-y:auto;transition:transform .25s}
.sb-brand{display:flex;align-items:center;gap:10px;padding:2px 6px 16px;text-decoration:none;color:var(--text)}
.sb-brand img{width:42px;height:42px;object-fit:contain}
.sb-brand b{display:block;font-size:15px;line-height:1.15;color:var(--primary-d)}.sb-brand small{color:var(--muted);font-size:11.5px}
.sb-label{font-size:11px;color:#98a2b3;text-transform:uppercase;letter-spacing:.08em;margin:14px 8px 6px;font-weight:600}
.sb-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.sb-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:#475467;text-decoration:none;font-weight:500;font-size:13.5px}
.sb-nav a i{font-size:16px;width:18px;text-align:center}
.sb-nav a:hover{background:#f4f7fd;color:var(--text)}
.sb-nav a.active{background:var(--primary);color:#fff;box-shadow:0 6px 14px rgba(59,130,246,.28)}
.sb-bottom{margin-top:auto;padding-top:14px}
.sb-overlay{display:none}
.main{margin-left:var(--sb-w);flex:1;min-width:0;padding:18px 24px 40px}
.topcard{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow);margin-bottom:16px}
.tc-icon{width:40px;height:40px;border-radius:11px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:18px;flex:none}
.tc-title{font-weight:700;font-size:15px;line-height:1.2}.tc-sub{color:var(--muted);font-size:12px}
.tc-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.menu-btn{display:none;border:0;background:var(--primary-soft);color:var(--primary-d);width:38px;height:38px;border-radius:10px;font-size:20px}
.pill{display:inline-flex;align-items:center;gap:6px;background:#f4f6fb;border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:12px;color:#475467;white-space:nowrap}
.user-chip{display:flex;align-items:center;gap:9px;text-align:right}
.user-chip .av{width:38px;height:38px;border-radius:50%;background:var(--primary-soft);color:var(--primary-d);display:grid;place-items:center;font-weight:700;font-size:13px;order:2}
.user-chip b{display:block;font-size:13px;line-height:1.1}.user-chip small{color:var(--muted);font-size:11.5px}

/* ---- Cards ---- */
.cx{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.cx-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;margin-bottom:14px}
.cx-title i{color:#344054}
.banner{display:flex;align-items:center;gap:12px;background:var(--banner);border:1px solid var(--banner-b);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px}
.banner .b-ic{width:34px;height:34px;border-radius:10px;background:var(--warning);color:#fff;display:grid;place-items:center;flex:none}
.live{margin-left:auto;background:var(--orange);color:#fff;border-radius:999px;padding:6px 14px;font-weight:700;font-size:12.5px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
.live.off{background:#98a2b3}.live.off::before{animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}
.stat{display:flex;gap:14px;align-items:flex-start;height:100%}
.stat .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:19px;flex:none}
.ic.blue{background:var(--primary)}.ic.green{background:var(--success)}.ic.orange{background:#f0714f}.ic.amber{background:var(--warning)}.ic.violet{background:#8b5cf6}.ic.slate{background:#64748b}
.stat .lbl{color:var(--muted);font-size:12.5px}.stat .val{font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.02em}.stat .sub{color:var(--muted);font-size:11.5px;margin-top:2px}
.mini-stat{display:flex;flex-direction:column;gap:2px}.mini-stat .lbl{font-size:12px;color:var(--muted)}.mini-stat .val{font-weight:800;font-size:22px}
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px dashed #d5dbe8}.kv:last-child{border:0}
.kv small{display:block;color:var(--muted)}.kv b{font-size:16px}
/* bar perbandingan */
.barrow{display:grid;grid-template-columns:150px 1fr 64px 92px;gap:12px;align-items:center;padding:7px 0}
.barrow .nm{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barrow .track{height:16px;background:#eef2fa;border-radius:999px;overflow:hidden}
.barrow .fill{height:100%;background:var(--primary);border-radius:999px;transition:width .6s}
.barrow .pc{font-weight:700;font-size:13px;text-align:right}
.barrow .dpt{background:#f1f4fa;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:600;text-align:center;color:#475467}
.barrow a{color:inherit;text-decoration:none}.barrow a:hover{color:var(--primary-d)}
/* tabel */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tbl th{background:#f6f8fc;color:#344054;font-weight:700;padding:11px 12px;white-space:nowrap;border-bottom:1px solid var(--border);cursor:default;font-size:12.5px}
.tbl th:first-child{border-radius:10px 0 0 10px}.tbl th:last-child{border-radius:0 10px 10px 0}
.tbl th[data-sort]{cursor:pointer}.tbl th.asc::after{content:" ▲";font-size:9px}.tbl th.desc::after{content:" ▼";font-size:9px}
.tbl td{padding:11px 12px;border-bottom:1px solid #f0f3f9;vertical-align:middle}
.tbl tbody tr:hover td{background:#fafcff}
.tbl td a.rowlink{color:var(--text);font-weight:600;text-decoration:none}.tbl td a.rowlink:hover{color:var(--primary-d)}
.tbl-tools{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.tbl-tools select,.tbl-tools input{border:1px solid #e3e8f2;background:#f7f9fc;border-radius:10px;padding:7px 12px;font-size:13px}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted);font-size:12.5px;flex-wrap:wrap;gap:8px}
.pager{display:flex;gap:4px}.pager button{border:1px solid var(--border);background:#fff;border-radius:8px;min-width:32px;height:32px;font-size:12.5px}
.pager button.on{background:var(--primary);border-color:var(--primary);color:#fff}.pager button:disabled{opacity:.4}
.badge-soft{border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:600;display:inline-block}
.badge-soft.success{background:var(--success-soft);color:#15803d}.badge-soft.primary{background:var(--primary-soft);color:var(--primary-d)}
.badge-soft.warning{background:var(--warning-soft);color:#b45309}.badge-soft.danger{background:var(--danger-soft);color:#b91c1c}.badge-soft.muted{background:#f1f3f8;color:#667085}
.chart-box{position:relative;height:280px}.chart-box.sm{height:220px}
.progress-thin{height:8px;background:#eef2fa;border-radius:999px;overflow:hidden}.progress-thin>i{display:block;height:100%;background:var(--primary);border-radius:999px}
/* kandidat */
.cand{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fff}
.cand.win{border-color:#bcd3ff;background:linear-gradient(0deg,#f7faff,#fff)}
.cand img{width:64px;height:76px;object-fit:cover;border-radius:12px;background:#eef2fa;flex:none}
.cand .no{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.thumb{width:40px;height:48px;object-fit:cover;border-radius:8px;background:#eef2fa}
.empty{text-align:center;color:var(--muted);padding:40px 10px}.empty i{font-size:38px;display:block;margin-bottom:8px;opacity:.5}
.flash{border-radius:12px;padding:11px 14px;margin-bottom:14px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start}
.flash.ok{background:var(--success-soft);color:#166534}.flash.err{background:var(--danger-soft);color:#991b1b}.flash.info{background:var(--primary-soft);color:#1e40af}
.foot{color:var(--muted);font-size:12px;text-align:center;margin-top:26px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.locked{opacity:.65}

/* ---- Login ---- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(1200px 500px at 10% -10%,#dbe8ff 0,transparent 60%),radial-gradient(900px 500px at 100% 110%,#fff0d6 0,transparent 55%),var(--bg)}
.login-card{width:100%;max-width:410px;background:#fff;border:1px solid var(--border);border-radius:22px;padding:30px 28px;box-shadow:0 24px 60px rgba(37,99,235,.12)}
.login-card .lg{width:92px;height:92px;object-fit:contain;display:block;margin:0 auto 10px}

/* ---- Responsif ---- */
@media (max-width:1199px){.barrow{grid-template-columns:120px 1fr 58px 78px}}
@media (max-width:991px){
  .sidebar{transform:translateX(-102%);box-shadow:none}
  body.sb-open .sidebar{transform:none;box-shadow:0 0 40px rgba(0,0,0,.2)}
  body.sb-open .sb-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1035}
  .main{margin-left:0;padding:12px 12px 32px}.menu-btn{display:grid;place-items:center}
  .tc-right .pill.upd{display:none}
}
@media (max-width:575px){
  .barrow{grid-template-columns:1fr 54px;grid-template-areas:"nm pc" "tr tr" "dp dp";gap:4px 8px}
  .barrow .nm{grid-area:nm}.barrow .pc{grid-area:pc}.barrow .track{grid-area:tr}.barrow .dpt{grid-area:dp;justify-self:start}
  .stat .val{font-size:20px}.user-chip div{display:none}.banner{flex-wrap:wrap}.live{margin-left:0}
  .cand img{width:52px;height:62px}
}
@media print{.sidebar,.topcard,.no-print,.menu-btn,.tbl-tools,.tbl-foot,.banner{display:none!important}.main{margin:0;padding:0}.cx{box-shadow:none;border:0;padding:0}body{background:#fff}}

/* ---- Data desa (klik) & modal detail ---- */
.tbl-click tbody tr[data-desa]{cursor:pointer}
.tbl-click tbody tr[data-desa]:hover td{background:#f3f7ff}
.tbl-click tbody tr[data-desa]:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.cx-title .hint{font-size:12px;font-weight:500;color:var(--muted)}
.dd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dd-stats>div{background:#f5f8ff;border-radius:12px;padding:10px 12px}
.dd-stats span{display:block;font-size:12px;color:var(--muted)}.dd-stats b{font-size:18px}
.dd-votes b{font-size:20px}
.dd-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:10px 14px;border-radius:12px;background:#eef4ff;font-weight:600}
.dd-total b{font-size:18px}
@media (max-width:575.98px){.dd-stats{grid-template-columns:repeat(2,1fr)}#modal-desa .modal-dialog{margin:.5rem}}