html { scroll-behavior: smooth; }

* { font-family: 'DM Sans', 'Segoe UI', 'system-ui', sans-serif; }

/* Kompensasi sticky navbar saat lompat ke section */
section[id] { scroll-margin-top: 5.5rem; }

/* Efek hover kartu ringkasan / aksi */
.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -14px rgb(15 23 42 / .2); }

/* Keadaan dragover pada dropzone (elemen #dropZone di upload.php) */
#dropZone.dragover { border-color: #2563eb; background: #eff6ff; }

/* Skeleton shimmer saat memuat */
.skeleton { position: relative; overflow: hidden; background: #e2e8f0; }
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Spinner analisis */
.spinner {
  width: 44px; height: 44px; border-radius: 9999px;
  border: 4px solid #dbeafe; border-top-color: #2563eb;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Chip checkbox kolom identitas */
.chip-col {
  cursor: pointer; user-select: none;
  border: 1px solid #cbd5e1; background: #fff;
  border-radius: 9999px; padding: .45rem .9rem;
  font-size: .8rem; font-weight: 500; color: #475569;
  transition: all .15s ease;
}
.chip-col:hover { border-color: #60a5fa; color: #1d4ed8; }
.chip-col.on { background: #2563eb; border-color: #2563eb; color: #fff; }

/* Leaflet: sudut membulat & di bawah navbar */
.leaflet-container { border-radius: .75rem; font: inherit; z-index: 0; }

/* Angka tabular agar kolom angka rapi */
.tnum { font-variant-numeric: tabular-nums; }

/* ============ Dropdown Informasi Data SHPED ============ */
.dd-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  width: 280px;
  background: #fff; border-radius: .9rem;
  box-shadow: 0 18px 36px -12px rgb(15 23 42 / .25);
  border: 1px solid #e2e8f0;
}
/* Panel rata kiri — untuk dropdown KUESIONER yang berada paling kiri,
   agar panelnya tidak meluber keluar tepi layar */
.dd-panel-left { left: 0; right: auto; }
.dd-group { border-bottom: 1px solid #f1f5f9; }
.dd-group:last-child { border-bottom: none; }
.dd-name {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .5rem .65rem; border-radius: .55rem;
  font-size: .82rem; font-weight: 600; color: #334155; text-align: left;
}
.dd-name:hover { background: #f1f5f9; }
.dd-name .fa-chevron-down { font-size: .6rem; color: #94a3b8; transition: transform .15s; }
.dd-name.open .fa-chevron-down { transform: rotate(180deg); }
.dd-sub { padding: 0 .4rem .4rem .9rem; }
.dd-item {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .4rem .6rem; border-radius: .5rem;
  font-size: .8rem; color: #475569; text-align: left;
}
.dd-item:hover { background: #eff6ff; color: #1d4ed8; }
.dd-item.on { background: #2563eb; color: #fff; font-weight: 600; }
.dd-item.on .text-slate-400 { color: rgba(255,255,255,.75) !important; }

/* ============ Tab kelengkapan data ============ */
.tab-btn {
  cursor: pointer; border-radius: 9999px;
  padding: .5rem 1.1rem; font-size: .8rem; font-weight: 600;
  border: 1px solid #e2e8f0; transition: all .15s ease;
}
.tab-btn:hover { border-color: #93c5fd; }

/* ============ Kartu grafik PIHPS ============ */
.chart-card { transition: transform .2s ease, box-shadow .2s ease; }
.chart-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgb(15 23 42 / .2); }

/* ============ Tombol halaman (pagination) ============ */
.page-btn {
  cursor: pointer; min-width: 2.1rem;
  border-radius: .6rem; border: 1px solid #e2e8f0; background: #fff;
  padding: .4rem .6rem; font-size: .8rem; font-weight: 600; color: #475569;
}
.page-btn:hover:not(:disabled) { border-color: #60a5fa; color: #1d4ed8; }
.page-btn.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ============ Peta Halmahera Utara ============ */
.kec-label {
  background: rgba(255,255,255,.92);
  border: 1px solid #e2e8f0; border-radius: .5rem;
  padding: 1px 6px; font-size: 10.5px; font-weight: 600; color: #334155;
  box-shadow: 0 1px 4px rgb(15 23 42 / .12); white-space: nowrap;
}
.kec-label::before { display: none; }
.map-legend {
  background: #fff; border-radius: .75rem; padding: 10px 12px;
  box-shadow: 0 8px 24px -10px rgb(15 23 42 / .25); font: 11px/1.4 'DM Sans', sans-serif;
}
.map-legend .bar {
  height: 10px; border-radius: 9999px; margin: 6px 0 4px;
  background: linear-gradient(90deg, #16a34a, #a3e635, #facc15, #f97316, #dc2626);
}

/* ============ Modal metadata SHPED ============ */
/* Animasi halus saat modal metadata kegiatan statistik dibuka */
.md-backdrop { animation: mdFade .18s ease-out; }
.md-panel    { animation: mdPop  .22s ease-out; }
@keyframes mdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mdPop  { from { opacity: 0; transform: translateY(14px) scale(.97); }
                    to   { opacity: 1; transform: none; } }

/* ============ Panel peringkat harga kecamatan (ala PIHPS Nasional) ============ */
.rank-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .55rem; border-radius: .65rem;
  border: 1px solid transparent; transition: all .15s ease;
  text-align: left; cursor: pointer;
}
.rank-item:hover { background: #f8fafc; border-color: #e2e8f0; }
.rank-no {
  width: 1.35rem; height: 1.35rem; flex: none;
  display: grid; place-items: center;
  border-radius: .45rem; background: #f1f5f9;
  font-size: .65rem; font-weight: 700; color: #64748b;
}
.rank-item:nth-child(1) .rank-no { background: #fef3c7; color: #b45309; }  /* terendah */
.rank-dot {
  width: .8rem; height: .8rem; flex: none;
  border-radius: 9999px; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgb(15 23 42 / .15);
}
.rank-harga { font-size: .78rem; font-weight: 800; color: #0f172a; white-space: nowrap; }

/* Kartu ikon mengambang di sisi kanan layar*/
.float-btn { transition: transform .15s ease, background-color .15s ease; }
.float-btn:hover { transform: translateY(-2px); }