* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: #101828;
  background: #f4f6f9;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.appHeader {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 20px;
  background: white;
  border-bottom: 1px solid #dde3eb;
}

.appHeader h1 {
  margin: 0;
  font-size: 26px;
}

.appHeader p {
  margin: 4px 0 0;
  color: #667085;
}

.systemStatus {
  font-weight: 800;
  white-space: nowrap;
}

.workspace {
  height: calc(100vh - 84px);
  display: grid;
  grid-template-columns: minmax(360px, 470px) 1fr;
}

.controlPanel {
  overflow-y: auto;
  padding: 14px;
  border-right: 1px solid #dde3eb;
}

.regionPanel,
.panel {
  background: white;
  border: 1px solid #d8e0ea;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}

.regionPanel {
  border: 2px solid #111;
}

.sectionTitle {
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 12px;
}

.regionButtons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.regionBtn,
#searchBtn,
#scanBtn,
.smallBtn {
  border: 0;
  border-radius: 10px;
  padding: 11px 12px;
  font-weight: 900;
}

.regionBtn {
  background: #eef1f5;
  color: #111;
}

.regionBtn.active {
  background: #111;
  color: white;
}

.searchRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.searchRow input,
.scannerRow input {
  width: 100%;
  border: 1px solid #cfd7e2;
  border-radius: 10px;
  padding: 11px;
}

#searchBtn,
#scanBtn {
  background: #111;
  color: white;
}

.muted {
  margin-top: 9px;
  color: #667085;
  font-size: 13px;
  line-height: 1.4;
}

.searchResults {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.searchCard {
  width: 100%;
  text-align: left;
  border: 1px solid #d9e1eb;
  border-radius: 12px;
  background: white;
  padding: 11px;
}

.searchCard:hover {
  background: #f7f9fc;
}

.searchCard strong {
  display: block;
  font-size: 16px;
}

.searchCard span {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
}

.searchMeta {
  margin-top: 7px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.searchMeta b {
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 999px;
  background: #eef2f7;
}

.hidden {
  display: none !important;
}

.selectedHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.selectedHead strong {
  display: block;
  font-size: 22px;
}

.selectedHead span {
  color: #667085;
}

.statusPill {
  padding: 5px 7px;
  border-radius: 999px;
  background: #eef2f7;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.kpiGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 12px 0;
}

.kpiGrid > div {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 9px;
}

.kpiGrid span {
  display: block;
  color: #667085;
  font-size: 11px;
}

.kpiGrid strong {
  display: block;
  margin-top: 4px;
  font-size: 17px;
}

.notice {
  border-radius: 10px;
  padding: 10px;
  background: #f6f8fb;
  border: 1px solid #e1e7ef;
  font-size: 12px;
  line-height: 1.45;
}

.notice.warn {
  background: #fff8e6;
}

.notice.error {
  background: #fff0f0;
}

.layerRow {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 10px 0;
  font-size: 12px;
}

.layerRow label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
}

.scopeRow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
  padding: 9px;
  border-radius: 10px;
  background: #f8fafc;
}

.scopeRow span {
  color: #667085;
  font-size: 12px;
}

.smallBtn {
  padding: 7px 8px;
  font-size: 10px;
  background: #e9edf3;
}

.rwList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  max-height: 360px;
  overflow: auto;
}

.rwCard {
  border: 1px solid #dfe5ec;
  border-radius: 11px;
  padding: 9px;
  background: white;
  text-align: left;
}

.rwCard.hasPolygon {
  border-width: 2px;
}

.rwCard.active {
  outline: 3px solid rgba(17, 24, 39, .15);
}

.rwCard strong {
  display: block;
}

.rwCard span,
.rwCard small {
  display: block;
  color: #667085;
  font-size: 10px;
  margin-top: 3px;
}

.scannerRow {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: end;
}

.scannerRow label {
  font-size: 11px;
  font-weight: 800;
}

.scannerRow input {
  margin-top: 5px;
}

.scanSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.scanStat {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
}

.scanStat span {
  display: block;
  color: #667085;
  font-size: 10px;
}

.scanStat strong {
  display: block;
  margin-top: 3px;
}

.candidateList {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.candidateCard {
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  padding: 10px;
  background: white;
}

.candidateCard.top {
  border-width: 2px;
}

.candidateHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.candidateGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 10px;
  margin-top: 8px;
  font-size: 12px;
}

.candidateGrid span {
  color: #667085;
}

.candidateActions {
  margin-top: 8px;
}

.candidateActions button {
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 8px;
  font-weight: 800;
}

.mapPanel {
  position: relative;
  min-width: 0;
}

#map {
  width: 100%;
  height: 100%;
  background: #e8edf3;
}

.mapLegend {
  position: absolute;
  z-index: 500;
  right: 14px;
  bottom: 14px;
  background: rgba(255,255,255,.94);
  border: 1px solid #d8e0e8;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11px;
}

.mapLegend > div {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
}

.legendBox {
  width: 14px;
  height: 10px;
  display: inline-block;
  border: 2px solid;
}

.legendBox.kel {
  border-color: #2563eb;
}

.legendBox.rw {
  border-color: #d97706;
}

.legendBox.rt {
  border-color: #64748b;
}

.legendBox.candidate {
  border-color: #7c3aed;
}

@media(max-width: 900px) {
  .appHeader {
    height: auto;
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace {
    height: auto;
    min-height: calc(100vh - 120px);
    grid-template-columns: 1fr;
  }

  .controlPanel {
    border-right: 0;
  }

  .mapPanel {
    height: 65vh;
  }

  .rwList {
    grid-template-columns: 1fr;
  }
}

/* v2.0.9 */
.rwCard.provisional {
  border-style: dashed;
  background: #fffdf7;
}

.rwCard .rwFootprint {
  margin-top: 5px;
  font-size: 11px;
  color: #344054;
}

.rwCard .rwFootprint b {
  color: #101828;
  font-size: 12px;
}

.rwCard .rwFootprint.muted {
  color: #98a2b3;
  font-size: 10px;
}

/* v2.2.5 clean detailed navigation */
.headerActions{display:flex;align-items:center;gap:10px}.headerActions a{border:1px solid #d7dee8;border-radius:10px;padding:8px 11px;text-decoration:none;color:#101828;font-size:12px;font-weight:800;background:#fff}
.scopePath{margin:8px 0 0;font-size:13px;color:#475467;font-weight:700}
.rtList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}.rtCard{border:1px solid #d8e0ea;border-radius:10px;background:#fff;padding:8px;text-align:left}.rtCard.active{border:2px solid #111;background:#f5f7fa}.rtCard strong,.rtCard span,.rtCard small{display:block}.rtCard span,.rtCard small{font-size:11px;color:#667085;margin-top:2px}
.cleanHint{font-size:11px;color:#667085;line-height:1.45;margin-top:8px}.cleanHint b{color:#101828}
#scannerPanel .scanStat:nth-child(6),#scannerPanel .scanStat:nth-child(7){display:none}
@media(max-width:900px){.rtList{grid-template-columns:repeat(2,minmax(0,1fr))}.headerActions{gap:4px}.headerActions a{display:none}}

/* v2.2.5 Homepass Intelligence */
.homepassIntel{margin-top:10px;border:1px solid #d8e0ea;border-radius:12px;padding:11px;background:#fff}
.homepassIntel.hidden{display:none}
.homepassIntel.vertical{border-color:#d97706;background:#fffaf0}
.intelHead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.intelHead strong{display:block;font-size:13px;color:#111827}
.intelHead small{display:block;margin-top:3px;color:#6b7280;line-height:1.35}
.intelBadge{border:1px solid #d97706;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:900;color:#92400e;background:#fffbeb}
.intelGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}
.intelGrid>div{border:1px solid #e5e7eb;border-radius:9px;padding:7px;background:#fff}
.intelGrid span,.intelGrid strong{display:block}
.intelGrid span{font-size:10px;color:#6b7280}
.intelGrid strong{font-size:12px;margin-top:2px;color:#111827}
.intelNote{font-size:11px;line-height:1.45;color:#4b5563;margin-top:8px}
.intelAction{width:100%;margin-top:9px;border:0;border-radius:9px;padding:9px 10px;font-weight:900;background:#111;color:#fff;cursor:pointer}
.intelAction:disabled{opacity:.55;cursor:wait}
@media(max-width:900px){.intelGrid{grid-template-columns:1fr}}

/* v2.2.5 RT restore */
#rtListWrap:not(.hidden){display:block!important;margin-top:8px}
#rtListWrap .rtList{max-height:230px;overflow:auto;padding-right:3px}
#rtSectionTitle{position:sticky;top:0;background:#fff;z-index:2;padding:4px 0}


/* v2.2.5 dual RW/RT scanner */
#rtListWrap:not(.hidden){display:block!important;margin-top:14px;border-top:2px solid #101828;padding-top:12px}
.rtSectionHead{display:flex;flex-direction:column;gap:3px;margin-bottom:7px}
.rtSectionHead .sectionTitle{margin:0}
.rtBreakdownSummary{font-size:11px;font-weight:800;color:#344054;line-height:1.4}
.rtHelp{font-size:11px;line-height:1.45;color:#667085;background:#f8fafc;border-radius:9px;padding:8px;margin-bottom:8px}
#rtListWrap .rtList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:330px;overflow:auto;padding-right:3px}
.rtCard{min-height:72px}
.rtCard small{font-weight:700}
.targetOnlyRow{margin-bottom:8px}
.targetOnlyRow label{display:block;font-size:11px;font-weight:900;color:#344054}
.targetOnlyRow input{display:block;width:140px;margin-top:5px}
.scanModeGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.scanModeGrid button{border:0;border-radius:10px;padding:12px 8px;background:#111;color:#fff;font-weight:900}
.scanModeGrid button:disabled{background:#d0d5dd;color:#667085;cursor:not-allowed}
@media(max-width:900px){#rtListWrap .rtList{grid-template-columns:repeat(2,minmax(0,1fr))}.scanModeGrid{grid-template-columns:1fr}}


/* v2.2.6 dual census scanner */
.scanHelpBox{font-size:12px;line-height:1.45;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:9px 10px;margin:8px 0}
.censusTitle{font-size:13px;font-weight:900;margin:10px 0 7px}
.censusTable{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.censusRow{border:1px solid #d8e0ea;border-radius:9px;padding:8px;background:#fff}
.censusRow b,.censusRow span{display:block}.censusRow span{font-size:12px;color:#475467;margin-top:3px}
.rtSingleResult{border:2px solid #111;border-radius:12px;padding:12px;background:#fff;display:grid;gap:4px}
.rtSingleResult strong{font-size:24px}.rtSingleResult span{font-size:12px;color:#667085}
.candidateActionWrap{margin-top:12px;border-top:2px solid #101828;padding-top:12px}
.candidateActionText{display:grid;gap:2px;margin-bottom:8px}.candidateActionText span{font-size:12px;color:#667085}
.candidateTargetRow{display:grid;grid-template-columns:150px 1fr;gap:8px;align-items:end}
.candidateTargetRow label{font-size:12px;font-weight:800}.candidateTargetRow input{width:100%;box-sizing:border-box;margin-top:4px}
.candidateTargetRow button{border:0;border-radius:10px;padding:12px;background:#111;color:#fff;font-weight:900}
.candidateTargetRow button:disabled{background:#d0d5dd;color:#667085}
@media(max-width:900px){.censusTable{grid-template-columns:repeat(2,minmax(0,1fr))}.candidateTargetRow{grid-template-columns:1fr}}

/* v2.2.9: RT harus selalu terlihat setelah RW Jakarta dipilih */
#rtListWrap:not(.hidden){
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  margin-top:14px;
  padding-top:12px;
  border-top:2px solid #111827;
}
#rtListWrap .rtList{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  max-height:360px;
  overflow:auto;
}
.scanModeGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.scanModeGrid button{min-height:50px;font-weight:900}
#scanBtn{display:none !important}
#homepassIntel.hidden{display:none !important}
@media(max-width:900px){#rtListWrap .rtList{grid-template-columns:repeat(2,minmax(0,1fr))}.scanModeGrid{grid-template-columns:1fr}}


/* v2.2.9: kandidat 512 selalu berbasis total RW; RT hanya detail kontribusi */
.candidateBasisInfo{margin-top:7px;padding:8px 10px;border:1px solid #d8e0ea;border-radius:9px;background:#f8fafc;color:#344054;font-size:11px;font-weight:800;line-height:1.45}
.rtCard.active{box-shadow:inset 0 0 0 2px #111827}

/* v2.2.9: tombol hitung memberi feedback jelas saat request berjalan */
.scanModeGrid button:disabled{cursor:wait;opacity:.62;}

/* v2.4.0 mixed MDU final */
.homepassIntel.vertical{margin-top:12px}
.homepassIntel .intelNote{line-height:1.45}