/* DATAKU untuk DISPANGTAN - gaya; semua kelas berawalan .dko- dan mewarisi font tema. Acuan warna: plugin lama dataku-diskominfo 1.0.9. */
.dko-app, .dko-wrap { --dko-biru: #1c3d6e; --dko-garis: #e2e4e8; --dko-latar: #f6f7f9; --dko-muted: #595959; --dko-jumlah: #f2f4f7; font-family: inherit; color: #222; max-width: 100%; }
.dko-app, .dko-app * { box-sizing: border-box; }
[hidden] { display: none !important; }

/* ---- tata letak daftar + panel ---- */
.dko-app { display: grid; grid-template-columns: minmax(180px, min(340px, 36%)) minmax(0, 1fr); gap: 24px; margin: 1em 0; align-items: stretch; }
.dko-samping { min-width: 0; background: var(--dko-latar); border: 1px solid var(--dko-garis); border-radius: 10px; padding: 18px 16px 18px 18px; }
.dko-panel { min-width: 0; background: #fff; border: 1px solid var(--dko-garis); border-radius: 10px; padding: 22px; font-size: 15px; line-height: 1.5; }
.dko-panel:focus { outline: 2px solid var(--dko-biru); outline-offset: 2px; }
.dko-app { scroll-margin-top: 16px; }
.admin-bar .dko-app { scroll-margin-top: 48px; }
@media (max-width: 782px) { .admin-bar .dko-app { scroll-margin-top: 62px; } }
.dko-panel-judul { scroll-margin-top: 16px; }
.dko-tunggal { grid-template-columns: minmax(0, 1fr); }
.dko-lewati { position: absolute; left: -9999px; top: auto; }
.dko-lewati:focus { position: static; display: inline-block; margin-bottom: 8px; padding: 4px 8px; background: #fff; color: var(--dko-biru); }
.dko-ringkas { display: none; appearance: none; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; font: inherit; font-weight: 700; color: var(--dko-biru); cursor: pointer; text-transform: none; }
.dko-ringkas-teks { flex: 1 1 auto; min-width: 0; }
.dko-ringkas-ikon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; color: var(--dko-biru); }
.dko-ringkas-ikon .dko-ikon { display: block; width: 24px; height: 24px; }
.dko-ringkas[aria-expanded="true"] .dko-ringkas-ikon { background: #e5e8ee; }
.dko-ringkas:focus-visible { outline: 2px solid var(--dko-biru); outline-offset: 2px; }
.dko-ringkas-aktif { display: block; font-weight: 400; font-size: 13px; color: var(--dko-muted); }
.dko-daftar-judul { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: #222; line-height: 1.4; }
.dko-daftar, .dko-daftar ul { list-style: none; margin: 0; padding: 0; }
.dko-daftar { max-height: min(70vh, 560px); overflow-y: auto; }
.dko-daftar li { margin: 0 0 8px; padding: 0; }
.dko-daftar a { display: block; padding: 11px 13px; border-radius: 8px; border: 1px solid transparent; font-size: 15px; line-height: 1.5; color: #333; text-decoration: none; background: transparent; box-shadow: none; }
.dko-daftar a:hover { background: #eef2f8; color: #333; }
.dko-daftar a:focus-visible { outline: 2px solid var(--dko-biru); outline-offset: 1px; }
.dko-daftar a[aria-current="true"] { background: var(--dko-biru); color: #fff; font-weight: 600; }
.dko-kelompok { margin-top: 10px; }
.dko-kelompok-judul { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--dko-muted); }
.dko-kepala { display: block; margin-bottom: 10px; }
.dko-panel-judul { margin: 0 0 14px; font-size: 22px; font-weight: 700; line-height: 1.32; color: #222; }
.dko-panel-judul:focus { outline: none; }
.dko-sumber-opd { margin: 0 0 18px; font-size: 13px; line-height: 2.2; color: #6b7280; }
.dko-form { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dko-form label { font-size: 13px; font-weight: 400; color: #555; margin: 0; }
.dko-form select { appearance: auto; font: inherit; font-size: 15px; text-transform: none; letter-spacing: normal; margin: 0; min-height: 0; padding: 6px 12px; border: 1px solid #b9bec7; border-radius: 8px; background: #fff; color: #222; box-shadow: none; max-width: 100%; }
.dko-form select:focus-visible, .dko-tombol:focus-visible, .dko-unduh:focus-visible { outline: 2px solid var(--dko-biru); outline-offset: 2px; }
.dko-tombol, .dko-unduh { appearance: none; font: inherit; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: normal; margin: 0; min-height: 0; padding: 8px 16px; border: 1px solid var(--dko-biru); border-radius: 8px; background: var(--dko-biru); color: #fff; cursor: pointer; box-shadow: none; line-height: 1.3; }
.dko-unduh[disabled] { opacity: .55; cursor: not-allowed; }
.dko-unduh-wrap { position: relative; display: inline-block; }
.dko-unduh-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; min-width: 100%; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid #b9bec7; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.dko-unduh-menu li { margin: 0; padding: 0; }
.dko-unduh-menu a { display: block; padding: 8px 16px; font-size: 15px; line-height: 1.4; color: #222; text-decoration: none; background: transparent; box-shadow: none; border: 0; white-space: nowrap; }
.dko-unduh-menu a:hover, .dko-unduh-menu a:focus { background: #eef2f8; color: #222; outline: none; }
.dko-unduh-menu a:focus-visible { outline: 2px solid var(--dko-biru); outline-offset: -2px; }
.dko-caret { display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; }
.dko-js .dko-form .dko-tombol { display: none; }
.dko-app[aria-busy="true"] .dko-isi { opacity: .55; }

/* ---- tombol Buka/Tutup sidebar (hanya tampil dengan JS dan pada kotak lebar) ---- */
.dko-sisi-tombol { appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #4b5563; cursor: pointer; box-shadow: none; line-height: 1; min-height: 0; }
.dko-sisi-tombol:hover { background: #e5e8ee; color: var(--dko-biru); }
.dko-sisi-tombol:focus-visible { outline: 2px solid var(--dko-biru); outline-offset: 2px; }
.dko-sisi-tombol .dko-ikon { display: block; width: 24px; height: 24px; }
.dko-sisi-tombol[hidden] { display: none !important; }
.dko-daftar-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; }
.dko-daftar-kepala .dko-daftar-judul { margin: 0; }
.dko-sisi-luar { display: none !important; }
.dko-sisi-tutup:not(.dko-sempit) .dko-sisi-luar:not([hidden]) { display: inline-flex !important; }
.dko-kepala-baris { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.dko-kepala-baris .dko-panel-judul { margin: 0; }
.dko-sisi-tutup:not(.dko-sempit) { grid-template-columns: minmax(0, 1fr); }
.dko-sisi-tutup:not(.dko-sempit) > .dko-samping { display: none; }
.dko-sempit .dko-sisi-tombol { display: none !important; }

/* ---- kotak sempit (< 560px, diukur JS pada kotak plugin, bukan layar): satu kolom, daftar menjadi lipatan ---- */
.dko-sempit { grid-template-columns: minmax(0, 1fr); }
.dko-sempit .dko-panel { padding: 12px; }
.dko-sempit .dko-gulir { max-height: 70vh; }
.dko-sempit .dko-ringkas { display: flex; }
.dko-sempit .dko-lipat > .dko-lipat-isi { display: none; margin-top: 10px; }
.dko-sempit .dko-lipat.dko-buka > .dko-lipat-isi { display: block; }
.dko-sempit .dko-lipat-isi > .dko-daftar-kepala { display: none; }
.dko-sempit .dko-daftar { max-height: 260px; }

/* ---- tabel ---- */
.dko-wrap { margin: 1em 0; }
.dko-bagian { margin-bottom: 2em; }
.dko-judul { font-size: 1.05em; margin: .75em 0 .5em; }
/* wadah gulir: bayangan tepi (tanpa JS) menandai ada kolom di luar layar; cincin fokus tipis hanya untuk papan ketik */
.dko-gulir { overflow: auto; max-width: 100%; max-height: min(75vh, 720px); margin: 0; -webkit-overflow-scrolling: touch; background:
	linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) 0 0 / 40px 100% no-repeat local,
	linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) 100% 0 / 40px 100% no-repeat local,
	radial-gradient(farthest-side at 0 50%, rgba(20, 33, 61, .28), rgba(20, 33, 61, 0)) 0 0 / 12px 100% no-repeat scroll,
	radial-gradient(farthest-side at 100% 50%, rgba(20, 33, 61, .28), rgba(20, 33, 61, 0)) 100% 0 / 12px 100% no-repeat scroll; }
/* gulir tidak "tembus" ke halaman hanya pada sumbu yang benar-benar bisa digulir (kelas dipasang JS); tabel pendek tidak menahan halaman */
@media (max-width: 782px) { .dko-gulir { max-height: 70vh; } }
.dko-gulir.dko-gulir-y { overscroll-behavior-y: contain; }
.dko-gulir.dko-gulir-x { overscroll-behavior-x: contain; }
.dko-gulir:focus { outline: none; }
.dko-gulir:focus-visible { outline: 2px solid #6b8fc7; outline-offset: -2px; }
.dko-gulir.dko-bisa-tarik { cursor: grab; }
.dko-gulir.dko-bisa-tarik a, .dko-gulir.dko-bisa-tarik button { cursor: pointer; }
.dko-gulir.dko-menarik, .dko-gulir.dko-menarik * { cursor: grabbing; user-select: none; -webkit-user-select: none; scroll-behavior: auto; }
.dko-petunjuk { margin: 4px 0 0; font-size: 12.5px; color: var(--dko-muted); }
.dko-gulir .dko-tabel { border-collapse: collapse; border-spacing: 0; table-layout: auto; width: 100%; max-width: none; font-size: 15px; line-height: 1.5; margin: 0; background: transparent; }
.dko-gulir .dko-tabel th, .dko-gulir .dko-tabel td { box-sizing: border-box; border: 1px solid #dfe3ea; padding: 11px 12px; vertical-align: middle; text-align: left; position: static; }
/* Header: biru tua (--dko-biru #1c3d6e), teks putih. Garis putih digambar sebagai bayangan dalam di sisi kanan+bawah tiap sel
   (bukan border tabel-collapse) sehingga tebalnya selalu 1px, juga di titik colspan/rowspan. */
.dko-gulir .dko-tabel thead th { background: var(--dko-biru); color: #fff; font-weight: 700; text-align: left; border: 0; box-shadow: inset -1px -1px 0 #fff; }
.dko-gulir .dko-tabel thead + tbody > tr:first-child > th, .dko-gulir .dko-tabel thead + tbody > tr:first-child > td { border-top: 0; }
/* header terkunci (kelas dko-kunci + --dko-atas per baris dipasang JS setelah mengukur tinggi tiap baris thead) */
.dko-gulir.dko-kunci .dko-tabel thead th { position: sticky; top: var(--dko-atas, 0px); z-index: 3; background: var(--dko-biru); }
.dko-gulir .dko-tabel thead th.dko-nilai { text-align: right; }
.dko-gulir .dko-tabel thead th[colspan] { text-align: center; }
.dko-gulir .dko-tabel tbody th { text-align: left; font-weight: normal; }
.dko-gulir .dko-tabel tbody th.dko-kode, .dko-gulir .dko-tabel td.dko-kode { text-align: center; white-space: nowrap; }
.dko-gulir .dko-tabel td.dko-nilai { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dko-gulir .dko-tabel .dko-grup th { font-weight: bold; background: rgba(0, 0, 0, .06); }
.dko-gulir .dko-tabel .dko-total th, .dko-gulir .dko-tabel .dko-total td { font-weight: bold; background: rgba(0, 0, 0, .04); }
/* satuan tunggal di bawah judul (mis. "Satuan: orang") */
.dko-satuan { margin: 0 0 .6em; font-size: 13px; color: #3c4043; }
.dko-satuan::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .45em; border-radius: 50%; background: var(--dko-biru); vertical-align: middle; }
/* subtotal kecamatan dan baris induk: lebih tegas dari baris data */
.dko-gulir .dko-tabel tr.dko-subkec th, .dko-gulir .dko-tabel tr.dko-subkec td,
.dko-gulir .dko-tabel tr.dko-induk th, .dko-gulir .dko-tabel tr.dko-induk td { background: #e3edfb; color: #14213d; font-weight: 700; border-color: #dfe3ea; }
.dko-gulir .dko-tabel tr.dko-subkec td.dko-nilai, .dko-gulir .dko-tabel tr.dko-induk td.dko-nilai { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dko-gulir .dko-tabel tr.dko-subkec th[scope="row"], .dko-gulir .dko-tabel tr.dko-induk th[scope="row"] { text-align: left; }
.dko-gulir .dko-tabel tr.dko-induk2 th[scope="row"] { padding-left: 1.4em; font-weight: 600; background: #f0f5fd; }
.dko-gulir .dko-tabel tr.dko-induk2 td { background: #f0f5fd; font-weight: 600; }
/* baris Jumlah: latar #f2f4f7, tebal, garis atas tegas */
.dko-gulir .dko-tabel tr.dko-jumlah th, .dko-gulir .dko-tabel tr.dko-jumlah td { background: var(--dko-jumlah); color: #14213d; font-weight: 700; border-top: 1px solid #dfe3ea; }
.dko-gulir .dko-tabel tr.dko-jumlah td.dko-nilai { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.dko-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dko-sumber, .dko-catatan { font-size: 13px; font-style: italic; margin: .25em 0; color: var(--dko-muted); }
.dko-pesan { padding: .6em .8em; background: rgba(0, 0, 0, .05); border-left: 3px solid rgba(0, 0, 0, .3); }
.dko-pesan.dko-uji { border-left-color: #b45309; background: #fff7e6; }
.dko-ulang { margin-left: .5em; }
@media print { .dko-samping, .dko-form, .dko-unduh-wrap, .dko-lewati { display: none; } .dko-panel { border: 0; padding: 0; } }