:root{
  --brand:#a83ac4; --brand-600:#8f2ba8; --brand-050:#faeffc; --brand-100:#f2dcf7;
  --hijau:#009d61; --kuning:#ffdd21;
  --ink:#1f2233; --ink-2:#4a4f66; --muted:#8a90a8; --line:#e8eaf2; --bg:#f6f7fb;
  --ok:#0f9058; --ok-bg:#e4f5ec; --warn:#c47f00; --warn-bg:#fdf3e0;
  --bad:#dc3545; --bad-bg:#fdeaec; --info:#1f7ae0; --info-bg:#e8f2fd;
  --r:14px; --shadow:0 1px 2px rgba(31,34,51,.04),0 6px 20px rgba(31,34,51,.06);
}
/* Sisi desa memakai hijau, sisi kecamatan tetap ungu.

   Yang diganti hanya empat peubah warna utama, jadi seluruh tombol, lencana,
   menu aktif, dan tautan ikut berganti tanpa satu pun aturan tambahan. Lambang
   dan garis kaki halaman sengaja tidak ikut — keduanya identitas aplikasi,
   bukan penanda sisi. */
body.sisi-desa{
  --brand:#00875a; --brand-600:#006c48; --brand-050:#e9f7f1; --brand-100:#cdeedd;
}
/* Pita tipis di bawah bilah menu: penanda yang terbaca sekilas bahkan ketika
   halamannya belum selesai dimuat. */
.topnav{box-shadow:inset 0 -3px 0 var(--brand)}
*{-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--ink);font-family:Rubik,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px}
h1,h2,h3,h4,h5,h6{font-weight:600;color:var(--ink);letter-spacing:-.01em}
a{text-decoration:none}
.text-muted-2{color:var(--muted)!important}

/* ---------- kerangka: menu atas ---------- */
.app{min-height:100vh;display:flex;flex-direction:column}
.topnav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.topnav .inner{display:flex;align-items:center;gap:6px;height:68px;padding:0 22px;
  max-width:1480px;margin:0 auto}
.brand{display:flex;align-items:center;margin-right:20px;flex:0 0 auto;padding:4px 16px 4px 0;
  border-right:1px solid var(--line)}
.brand img.penuh{height:42px;width:auto;display:block}
.brand img.lambang{height:38px;width:auto;display:block}
@media(max-width:575px){.brand img.penuh{display:none}}
@media(min-width:576px){.brand img.lambang{display:none}}
.mainnav{display:flex;align-items:center;gap:3px;min-width:0}
.mnav{display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:9px;
  color:var(--ink-2);font-size:13.5px;font-weight:450;white-space:nowrap;
  transition:.13s;border:0;background:transparent}
.mnav i:first-child{font-size:16px;color:var(--muted)}
.mnav:hover{background:#f4f5fa;color:var(--ink)}
.mnav.active{background:var(--brand-050);color:var(--brand);font-weight:500}
.mnav.active i:first-child{color:var(--brand)}
.mnav .chev{font-size:10px;color:var(--muted);margin-left:1px}
.mnav .badge{font-weight:500;margin-left:2px}
.mnav .lonceng{margin-left:3px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--bad);color:#fff;font-size:11px;font-weight:600;display:inline-grid;place-items:center}
.mnav.active .lonceng{background:var(--bad)}
.who{margin-left:auto;display:flex;align-items:center;gap:11px;flex:0 0 auto;padding-left:26px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-100);color:var(--brand);
  display:grid;place-items:center;font-weight:600;font-size:13px}
/* Avatar yang diganti lencana juara. Dulu hanya ada di dashboard desa, jadi
   lencananya menghilang di halaman lain; sekarang di sini supaya berlaku di
   seluruh halaman, bilah atas maupun kartu profil. */
.avatar-lencana{padding:0;border:0;background:transparent;object-fit:contain}
.content{padding:22px;max-width:1480px;margin:0 auto;width:100%;flex:1}
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head h4{margin:0 0 3px;font-size:19px}
.page-head p{margin:0;color:var(--muted);font-size:13px}
.page-head .act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- menu turun ---------- */
.dropdown-menu{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:6px;font-size:13.5px;min-width:225px;margin-top:6px}
.dropdown-item{border-radius:8px;padding:8px 11px;color:var(--ink-2);
  display:flex;align-items:center;gap:10px}
.dropdown-item:hover{background:#f4f5fa;color:var(--ink)}
.dropdown-item.active{background:var(--brand-050);color:var(--brand);font-weight:500}
.dropdown-item i{font-size:15px;color:var(--muted);width:17px;text-align:center}
.dropdown-item.active i{color:var(--brand)}
.dropdown-sec{padding:9px 11px 4px;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.dropdown-item .ms-auto{margin-left:auto;font-size:10px;opacity:.65}

/* menu turun bertingkat */
.drop-sub{position:relative}
.drop-sub>.dropdown-item{width:100%;border:0;background:transparent;text-align:left}
.drop-sub>.dropdown-menu{display:none;position:absolute;top:-6px;left:100%;margin:0 0 0 4px}
.drop-sub:hover>.dropdown-menu,.drop-sub.buka>.dropdown-menu{display:block}
.drop-sub:hover>.dropdown-item,.drop-sub.buka>.dropdown-item{background:#f4f5fa;color:var(--ink)}
.drop-sub.dalam>.dropdown-item{background:var(--brand-050);color:var(--brand);font-weight:500}
.drop-sub.dalam>.dropdown-item i{color:var(--brand)}
@media(max-width:1400px){.drop-sub>.dropdown-menu{left:auto;right:100%;margin:0 4px 0 0}}

/* ---------- menu ponsel ---------- */
.offcanvas{width:270px}
.offcanvas-body{padding:10px}
.offcanvas .mnav{width:100%;margin-bottom:2px}
.offcanvas .sub .mnav{padding-left:38px;font-size:13px}
.mnav-sec{padding:14px 12px 5px;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
@media(max-width:1199px){.mainnav{display:none}}
@media(min-width:1200px){.tombol-menu{display:none}}


/* ---------- kaki halaman ---------- */
.kaki{background:#fff;border-top:1px solid var(--line);margin-top:34px}
/* Tiga kolom: identitas aplikasi, pintasan menu, alamat kantor. Sempat dua
   kolom sesudah Layanan dan Bantuan dihapus, dan tengahnya menganga lebar. */
.kaki .isi{max-width:1480px;margin:0 auto;padding:26px 22px 22px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px}
.kaki .lambang{display:flex;gap:13px;align-items:flex-start}
.kaki .lambang img{height:52px;width:auto;flex:0 0 auto}
.kaki h6{font-size:13px;font-weight:600;margin:0 0 11px;color:var(--ink)}
.kaki p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.65}
.kaki a{display:block;font-size:12.5px;color:var(--ink-2);padding:3px 0;transition:.13s}
.kaki a:hover{color:var(--brand)}
.kaki .nama{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.kaki .nama span{color:var(--brand)}
.kaki .versi{display:inline-block;margin-top:8px;padding:2px 9px;border-radius:20px;
  background:var(--brand-050);color:var(--brand);font-size:11px;font-weight:600;letter-spacing:.02em}
.kaki .garis{height:3px;background:linear-gradient(90deg,var(--hijau) 0%,var(--hijau) 33%,
  var(--kuning) 33%,var(--kuning) 66%,var(--brand) 66%,var(--brand) 100%)}
.kaki .bawah{border-top:1px solid var(--line)}
.kaki .bawah .isi{padding:13px 22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.kaki .bawah span{font-size:12px;color:var(--muted)}
.kaki .bawah .kanan{margin-left:auto;display:flex;gap:16px}
/* Pintasan mengalir ke bawah dulu, dua baris, lalu pindah lajur — supaya
   kaki halaman tidak menjulang setinggi lima tautan bertumpuk. */
.kaki .pintasan{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;
  grid-auto-columns:max-content;column-gap:26px}
.kaki .bawah .kanan span{color:var(--muted)}
@media(max-width:991px){.kaki .isi{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:575px){.kaki .isi{grid-template-columns:1fr;gap:22px}
  .kaki .pintasan{grid-auto-flow:row;grid-template-rows:none}}

/* ---------- kop surat (pratinjau layar) ---------- */
.kop{background:#fff;border:1px solid var(--line);border-radius:11px;padding:18px 22px 14px}
.kop .baris{display:flex;gap:16px;align-items:center}
.kop img{height:74px;width:auto;flex:0 0 auto}
.kop .teks{flex:1;text-align:center;font-family:'Times New Roman',Times,serif;color:#000;line-height:1.25}
.kop .teks .l1{font-size:15px;letter-spacing:.02em}
.kop .teks .l2{font-size:19px;font-weight:700;letter-spacing:.03em}
.kop .teks .l3{font-size:21px;font-weight:700;letter-spacing:.03em}
.kop .teks .l4{font-size:11.5px;margin-top:2px}
.kop .rule{border-bottom:3px solid #000;margin-top:9px}
.kop .rule2{border-bottom:1px solid #000;margin-top:2px}

/* ---------- tombol aksi baris ---------- */
.aksi{display:flex;gap:6px;justify-content:flex-end}
.ikon{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--ink-2);display:grid;place-items:center;font-size:14px;transition:.13s;padding:0}
.ikon:hover{background:var(--brand-050);border-color:#ecd0f4;color:var(--brand)}
.ikon.bahaya:hover{background:var(--bad-bg);border-color:#f6d5d9;color:var(--bad)}

/* ---------- SweetAlert selaras tema ---------- */
.swal2-popup{border-radius:16px;font-family:Rubik,system-ui,sans-serif;padding:26px 24px 22px}
.swal2-title{font-size:18px;font-weight:600;color:var(--ink)}
.swal2-html-container{font-size:13.5px;color:var(--ink-2);margin-top:6px}
.swal2-actions{gap:8px;margin-top:20px}
.swal2-styled{border-radius:9px!important;font-size:13.5px!important;font-weight:500!important;
  padding:9px 18px!important;box-shadow:none!important}
.swal2-toast{border-radius:12px!important;box-shadow:0 6px 26px rgba(31,34,51,.14)!important}
.swal2-toast .swal2-title{font-size:13.5px!important;font-weight:500!important}

/* ---------- modal ---------- */
.modal-content{border:0;border-radius:16px;box-shadow:0 18px 60px rgba(31,34,51,.18)}
.modal-header{border-bottom:1px solid var(--line);padding:18px 22px}
.modal-header h5{font-size:16px;margin:0}
.modal-header .sub{font-size:12.5px;color:var(--muted);margin:3px 0 0}
.modal-body{padding:20px 22px}
.modal-footer{border-top:1px solid var(--line);padding:14px 22px;gap:8px}
.blok{border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.blok+.blok{margin-top:10px}
.blok .jd{font-size:13.5px;font-weight:500;color:var(--ink)}
.blok .kt{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5}
.sakelar{display:flex;gap:14px;align-items:flex-start}
.sakelar .form-check{margin:0;flex:0 0 auto;padding-top:1px}

/* ---------- daftar tahap + batas waktu ---------- */
.tahap-judul{display:grid;grid-template-columns:1fr 150px 150px 32px;gap:8px;
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.tahap-baris{display:grid;grid-template-columns:1fr 150px 150px 32px;gap:8px;margin-bottom:8px;
  align-items:center}
.tahap-baris .ikon{width:32px;height:32px}
@media(max-width:767px){.tahap-judul{display:none}
  .tahap-baris{grid-template-columns:1fr 1fr;row-gap:4px}
  .tahap-baris input[name="tahap_nama[]"]{grid-column:1/-1}
  .tahap-baris .mini{display:none}}

/* ---------- tag ---------- */
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid #dfe2ee;
  border-radius:9px;padding:7px 8px;min-height:40px;background:#fff}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 10px;border-radius:7px;
  background:var(--brand-050);color:var(--brand);font-size:12.5px;font-weight:500}
.tag button{border:0;background:transparent;color:inherit;opacity:.6;font-size:11px;padding:0;line-height:1}
.tag button:hover{opacity:1}
.tags input{border:0;outline:0;font-size:13px;flex:1;min-width:90px;padding:2px}

/* ---------- kartu ---------- */
.card{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);background:#fff}
.card-header{background:#fff;border-bottom:1px solid var(--line);padding:15px 18px;
  border-radius:var(--r) var(--r) 0 0;display:flex;align-items:center;gap:10px}
.card-header h6{margin:0;font-size:14px;font-weight:600}
.card-header .sub{color:var(--muted);font-size:12px;margin:2px 0 0}
.card-body{padding:18px}
.card-flat{box-shadow:none}

/* ---------- statistik ---------- */
.stat{display:flex;align-items:center;gap:14px;padding:16px 18px}
.stat .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex:0 0 44px}
.stat .n{font-size:23px;font-weight:600;line-height:1.1;letter-spacing:-.02em}
.stat .l{color:var(--muted);font-size:12.5px;margin-top:2px}
.ic-brand{background:var(--brand-050);color:var(--brand)}
.ic-ok{background:var(--ok-bg);color:var(--ok)}
.ic-warn{background:var(--warn-bg);color:var(--warn)}
.ic-bad{background:var(--bad-bg);color:var(--bad)}
.ic-info{background:var(--info-bg);color:var(--info)}

/* ---------- lencana status ---------- */
.st{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
  font-size:11.5px;font-weight:500;white-space:nowrap}
.st::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.st-draft{background:#f0f1f5;color:#6b7189}
.st-proses{background:var(--warn-bg);color:var(--warn)}
.st-perbaikan{background:var(--bad-bg);color:var(--bad)}
.st-selesai{background:var(--ok-bg);color:var(--ok)}
.st-sementara{background:var(--info-bg);color:var(--info)}
.chip{display:inline-block;padding:2px 9px;border-radius:6px;background:#f2f3f8;
  color:var(--ink-2);font-size:11.5px;font-weight:500}
.chip-b{background:var(--brand-050);color:var(--brand)}
.chip-bad{background:var(--bad-bg);color:var(--bad)}

/* ---------- tabel ---------- */
.table{--bs-table-bg:transparent;margin:0;font-size:13.5px}
.table>thead th{background:#fafbfd;border-bottom:1px solid var(--line);color:var(--muted);
  font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:11px 14px;white-space:nowrap}
.table>tbody td{padding:12px 14px;border-bottom:1px solid #f1f2f7;vertical-align:middle;color:var(--ink-2)}
.table>tbody tr:last-child td{border-bottom:0}
.table>tbody tr:hover{background:#fafbfd}
.table .strong{color:var(--ink);font-weight:500}
.table-wrap{overflow-x:auto}

/* ---------- tombol & form ---------- */
.btn{border-radius:9px;font-size:13.5px;font-weight:500;padding:8px 15px}
.btn-sm{padding:5px 11px;font-size:12.5px;border-radius:8px}
.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-600);border-color:var(--brand-600)}
.btn-outline-primary{color:var(--brand);border-color:#cfcffa}
.btn-outline-primary:hover{background:var(--brand);border-color:var(--brand)}
.btn-light-x{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
/* Hijau: pekerjaan yang bukan bagian dari keputusan verifikasi — sejauh ini
   hanya pendataan kegiatan fisik, supaya tidak tertukar dengan tombol ungu
   "Permasalahan" yang berdampak pada berkasnya. */
.btn-hijau{background:var(--hijau);border-color:var(--hijau);color:#fff}
.btn-hijau:hover,.btn-hijau:focus{background:#008753;border-color:#008753;color:#fff}
.btn-light-x:hover{background:#f6f7fb;color:var(--ink)}
.form-label{font-size:12.5px;font-weight:500;color:var(--ink-2);margin-bottom:5px}
.form-control{border-radius:9px;border-color:#dfe2ee;font-size:13.5px;padding:8px 12px}
/* select butuh ruang kanan untuk panah bawaan Bootstrap — jangan pakai padding ringkas */
.form-select{border-radius:9px;border-color:#dfe2ee;font-size:13.5px;
  padding:8px 36px 8px 12px;background-position:right 13px center;background-size:13px 10px}
.form-select-sm{font-size:12.5px;padding:5px 32px 5px 11px;background-position:right 11px center}
.form-control-sm{font-size:12.5px;padding:5px 11px;border-radius:8px}
input[type=date].form-control,input[type=date].form-control-sm{padding-right:10px}

/* ---------- baris penyaring di atas tabel ---------- */
.filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filter .form-select,.filter .form-control{width:auto;min-width:172px}
.filter .form-control[type=date]{min-width:150px}
.filter .cari{min-width:210px}
.filter .kanan{margin-left:auto;display:flex;gap:8px;align-items:center}
.page-head .act .form-select,.page-head .act .form-control{width:auto;min-width:150px}
.card-header .form-select,.card-header .form-control{width:auto;min-width:140px}
.modal .form-select{background-position:right 13px center}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(168,58,196,.14)}
.form-text{font-size:11.5px;color:var(--muted)}
.req::after{content:' *';color:var(--bad)}

/* ---------- tab ---------- */
.nav-tabs{border-bottom:1px solid var(--line);gap:2px}
.nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;color:var(--muted);
  font-size:13.5px;font-weight:500;padding:9px 14px;border-radius:0}
.nav-tabs .nav-link:hover{color:var(--ink)}
.nav-tabs .nav-link.active{color:var(--brand);border-bottom-color:var(--brand);background:transparent}
.nav-tabs .nav-link .badge{margin-left:6px}

/* ---------- langkah / stepper ---------- */
.steps{display:flex;gap:0;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:9px;padding:0 20px 0 0;color:var(--muted);font-size:13px}
.steps li+li{padding-left:20px;border-left:0;position:relative}
.steps li+li::before{content:'';position:absolute;left:0;top:50%;width:12px;height:1px;background:var(--line);margin-left:-16px}
.steps .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;
  font-weight:600;background:#f0f1f5;color:var(--muted);flex:0 0 26px}
.steps .done .dot{background:var(--ok-bg);color:var(--ok)}
.steps .now .dot{background:var(--brand);color:#fff}
.steps .now{color:var(--ink);font-weight:500}

/* ---------- linimasa ---------- */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:'';position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl li{position:relative;padding:0 0 20px 34px}
.tl li:last-child{padding-bottom:0}
.tl .pt{position:absolute;left:4px;top:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--line)}
.tl .pt-ok{border-color:var(--ok)} .tl .pt-bad{border-color:var(--bad)} .tl .pt-b{border-color:var(--brand)}
.tl .t{font-size:13.5px;font-weight:500;color:var(--ink)}
.tl .d{font-size:12px;color:var(--muted);margin-top:1px}

/* ---------- daftar berkas ---------- */
.filerow{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);
  border-radius:11px;background:#fff;margin-bottom:8px}
.filerow .fi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:0 0 34px}
.filerow .nm{font-size:13.5px;font-weight:500;color:var(--ink)}
.filerow .mt{font-size:11.5px;color:var(--muted)}
.filerow .rt{margin-left:auto;display:flex;gap:6px;align-items:center}
.drop{border:1.5px dashed #d3d7e8;border-radius:11px;padding:20px;text-align:center;color:var(--muted);
  background:#fcfcff;font-size:13px}
.drop i{font-size:22px;display:block;margin-bottom:6px;color:#b9bed4}

/* ---------- checklist verifikasi ---------- */
.q{border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin-bottom:10px;background:#fff}
.q .qh{display:flex;gap:12px;align-items:flex-start}
.q .no{width:26px;height:26px;border-radius:8px;background:var(--brand-050);color:var(--brand);
  display:grid;place-items:center;font-size:12px;font-weight:600;flex:0 0 26px}
.q .qt{font-size:13.5px;color:var(--ink);line-height:1.55;flex:1}
.q .opts{display:flex;gap:8px;flex:0 0 auto}
.q .note{margin:11px 0 0 38px}
.grp{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:20px 0 9px;display:flex;align-items:center;gap:9px}
.grp::after{content:'';flex:1;height:1px;background:var(--line)}
.opt-yn{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.opt-yn label{padding:5px 14px;font-size:12.5px;cursor:pointer;color:var(--ink-2);background:#fff;margin:0}
.opt-yn label+label{border-left:1px solid var(--line)}
.opt-yn input{display:none}
.opt-yn input:checked+label.y{background:var(--ok-bg);color:var(--ok);font-weight:500}
.opt-yn input:checked+label.n{background:var(--bad-bg);color:var(--bad);font-weight:500}

/* Pilihan berganda berbentuk chip — beberapa boleh menyala sekaligus.
   Berbeda dengan .opt-yn di atas, yang sepasang ya/tidak dan hanya memberi
   gaya pada label ber-kelas .y atau .n. */
.chip-pilih input{display:none}
.chip-pilih label{display:inline-block;margin:0;padding:6px 14px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink-2);font-size:12.5px;cursor:pointer;
  user-select:none;transition:background .12s,border-color .12s,color .12s}
.chip-pilih label:hover{border-color:var(--brand);color:var(--brand)}
.chip-pilih input:checked+label{background:var(--brand-050);border-color:var(--brand);
  color:var(--brand);font-weight:600}

/* ---------- matriks dashboard kecamatan ---------- */
.mtx{font-size:12.5px;border-collapse:separate;border-spacing:0;width:100%}
.mtx th{position:sticky;top:0;background:#fafbfd;color:var(--muted);font-weight:600;font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;padding:10px 8px;border-bottom:1px solid var(--line);text-align:center}
.mtx th:first-child{text-align:left;left:0;z-index:2;padding-left:14px}
.mtx td{padding:7px 8px;border-bottom:1px solid #f1f2f7;text-align:center}
.mtx td:first-child{text-align:left;color:var(--ink);font-weight:500;padding-left:14px;
  position:sticky;left:0;background:#fff}
.mtx tr:hover td{background:#fafbfd}
.cell{display:inline-grid;place-items:center;width:30px;height:26px;border-radius:7px;
  font-size:11.5px;font-weight:600}
.c-ok{background:var(--ok-bg);color:var(--ok)}
.c-pr{background:var(--warn-bg);color:var(--warn)}
.c-bd{background:var(--bad-bg);color:var(--bad)}
.c-no{background:#f4f5f9;color:#c3c7d6}

/* ---------- lain-lain ---------- */
.kv{display:grid;grid-template-columns:150px 1fr;gap:9px 14px;font-size:13.5px}
.kv dt{color:var(--muted);font-weight:400}
.kv dd{margin:0;color:var(--ink);font-weight:500}
.note-box{background:#fffdf5;border:1px solid #f2e6c4;border-radius:11px;padding:13px 15px;font-size:13px;color:#7a5e12}
.note-box.bad{background:#fff7f7;border-color:#f6dada;color:#a33}
.note-box.info{background:#f5f9ff;border-color:#d9e6f8;color:#2a5d96}
.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty i{font-size:34px;color:#d5d9e8;display:block;margin-bottom:10px}
.mini{font-size:11.5px;color:var(--muted)}
.sep{height:1px;background:var(--line);margin:16px 0}
.hero{background:linear-gradient(120deg,var(--brand) 0%,#8b6ff0 100%);color:#fff;border:0}
.hero h5{color:#fff;margin:0 0 4px;font-size:17px}
.hero p{margin:0;opacity:.88;font-size:13px}
@media(max-width:767px){.content{padding:15px}.topnav .inner{padding:0 14px}}

/* ── penunjuk langkah (wizard rancangan APB Desa) ───────────────── */
.langkah-bar{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.langkah-titik{display:flex;align-items:center;gap:8px;padding:4px 14px 4px 0;cursor:pointer;
  color:var(--muted);font-size:13px;position:relative}
.langkah-titik+.langkah-titik{padding-left:14px}
.langkah-titik+.langkah-titik::before{content:"";position:absolute;left:0;top:50%;
  width:1px;height:20px;transform:translateY(-50%);background:var(--line)}
.langkah-titik .bulat{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:#eef0f6;color:var(--muted);
  font-size:12px;font-weight:600;flex:0 0 auto}
.langkah-titik.kini{color:var(--ink);font-weight:500}
.langkah-titik.kini .bulat{background:var(--brand);color:#fff}
.langkah-titik.lewat .bulat{background:var(--ok-bg);color:var(--ok)}
.langkah-titik.lewat{color:var(--ink-2)}

/* Judul kelompok isian di luar .blok */
.card-body>.jd{font-size:13.5px;font-weight:600;color:var(--ink)}

/* ── tangkapan layar bukti temuan ───────────────────────────────── */
.tangkap{border:1px dashed var(--line);border-radius:11px;padding:11px 12px;background:#fbfcfe}
.tangkap .aksi{display:flex;flex-wrap:wrap;gap:6px}
.tangkap .ket{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.5}
.tangkap .pratinjau{margin-top:9px;display:block;max-width:100%;max-height:190px;
  border:1px solid var(--line);border-radius:9px;background:#fff;object-fit:contain}

/* Alat penanda: kotak, garis, panah — semuanya merah */
.tangkap .tandai{margin-top:10px}
.tangkap .alat{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:7px}
.tangkap .alat .judul{font-size:11.5px;color:var(--muted);margin-right:2px}
.tangkap .alat .pisah{width:1px;height:18px;background:var(--line);margin:0 3px}
.tangkap .pilih{border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:3px 9px;font-size:12px;color:var(--ink-2);line-height:1.7;cursor:pointer}
.tangkap .pilih:hover{background:#f4f5fa}
.tangkap .pilih.aktif{border-color:#e5232b;background:#fff5f5;color:#c31d24;font-weight:500}
.tangkap canvas{display:block;max-width:100%;border:1px solid var(--line);border-radius:9px;
  background:#fff;cursor:crosshair;touch-action:none}
.tangkap.terisi{border-style:solid;border-color:#cdeedd;background:#f7fdfa}

/* ── satu temuan: catatan kecamatan dan tanggapan desa berdampingan ── */
.temuan-kepala{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.temuan-pasang{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:991px){.temuan-pasang{grid-template-columns:1fr}}

.temuan-sisi{border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:#fff}
.temuan-sisi .tajuk{font-size:11.5px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.temuan-sisi .label{font-size:11px;color:var(--muted);margin-top:9px;margin-bottom:2px}
.temuan-sisi .isi{font-size:13px;line-height:1.55;color:var(--ink)}

/* Warna memisahkan siapa yang menulis — merah kecamatan, hijau desa. */
.temuan-sisi.kec{background:#fffaf9;border-color:#f3dcda}
.temuan-sisi.kec .tajuk{color:#b3352f}
.temuan-sisi.desa{background:#f7fdfa;border-color:#cdeedd}
.temuan-sisi.desa .tajuk{color:#0d6b45}
.temuan-sisi.kosong{background:#fafbfd;border-style:dashed}
.temuan-sisi.kosong .tajuk{color:var(--muted)}

/* Bukti dibaca langsung di tempatnya, bukan gambar kuku 54 px */
.bukti-gambar{display:block;margin-top:8px;max-width:100%;max-height:180px;
  border:1px solid var(--line);border-radius:9px;background:#fff;object-fit:contain}

/* Daftar berkas syarat di kolom sempit (seperempat halaman): nama berkasnya
   yang panjang berhak atas seluruh baris, tombolnya turun ke bawahnya. */
@media(min-width:992px){
  .col-lg-4 .filerow{flex-wrap:wrap}
  .col-lg-4 .filerow>div:nth-child(2){min-width:0;flex:1 1 auto}
  .col-lg-4 .filerow .rt{width:100%;margin-top:7px;justify-content:flex-end}
}

/* ── pilih jenis kegiatan ────────────────────────────────────────────────
   Kartu bertumpuk, bukan deret pil: yang sebenarnya membedakan kedua jenis
   ini adalah keterangan di bawah judulnya, dan keterangan itu tidak muat di
   dalam pil. Pilihan yang namanya saja mirip — "rutin" dan "undangan" —
   akan ditebak salah oleh orang yang belum pernah diberi tahu bedanya. */
.pilih-jenis{display:grid;gap:8px}
.pilih-jenis .jenis{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:11px 13px;border:1.4px solid var(--line);border-radius:14px;background:#fff;
  transition:border-color .12s,background .12s}
.pilih-jenis .jenis:hover{border-color:#C9D6EA}
.pilih-jenis .jenis.aktif{border-color:var(--brand);border-width:1.6px;background:#F3F7FF}
.pilih-jenis .jenis input{margin-top:3px;flex:0 0 auto}
.pilih-jenis .jenis>i{font-size:17px;color:var(--muted);margin-top:1px}
.pilih-jenis .jenis.aktif>i{color:var(--brand)}
.pilih-jenis .jenis b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.pilih-jenis .jenis small{display:block;font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:2px}

/* Gaya kalender modal pindah ke viewnya sendiri —
   kecamatan/pengaturan/bagian/jadwal-kalender.blade.php. Hanya satu layar
   yang memakainya, dan aturan yang menumpang di berkas bersama adalah
   aturan yang tidak berani dihapus siapa pun ketika layarnya berubah. */

/* ── lonceng pemberitahuan di bilah atas ─────────────────────────────────
   Dihidupkan 5 Okt 2026. Sebelumnya tombolnya mati, dengan titik merah yang
   digambar tetap di dalam HTML sehingga menyala selamanya — dan titik merah
   yang tidak pernah padam berhenti berarti apa-apa dalam dua hari. */
.lonceng-titik{position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;
  padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;
  font-size:10px;font-weight:700;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px #fff}

.lonceng-panel{width:340px;max-width:calc(100vw - 24px);padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.lonceng-kepala{display:flex;align-items:baseline;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--line)}
.lonceng-kepala b{font-size:13.5px}
.lonceng-kepala .mini{margin-left:auto;color:var(--bad);font-weight:600}

/* Daftarnya bergulir, panelnya tidak. Delapan baris muat tanpa menggulung;
   batas ini hanya menjaga agar baris berketerangan panjang tidak mendorong
   kaki panel keluar layar. */
.lonceng-panel .lonceng-baris{display:block;padding:10px 14px;text-decoration:none;
  color:inherit;border-bottom:1px solid var(--line)}
a.lonceng-baris:hover{background:var(--bg)}
.lonceng-baris.baru{background:var(--brand-050)}
a.lonceng-baris.baru:hover{background:var(--brand-100)}
.lonceng-judul{font-size:12.8px;font-weight:600;line-height:1.35;color:var(--ink)}
.lonceng-isi{font-size:11.8px;color:var(--ink-2);line-height:1.4;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lonceng-kaki{font-size:10.5px;color:var(--muted);margin-top:3px}

.lonceng-kosong{padding:26px 16px;text-align:center;color:var(--muted);font-size:12.5px}
.lonceng-kosong i{font-size:22px;display:block;margin-bottom:7px;opacity:.6}

.lonceng-kaki-panel{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:9px 14px;background:var(--bg)}
.lonceng-kaki-panel a{font-weight:600}