/* SIGAP PBB-P2 Muna Barat — layout tahap 1 (tanpa backend). Vanilla CSS. */
:root{
  --bg:#eef2f7; --surface:#ffffff; --ink:#0f2437; --muted:#5b7186;
  --line:#dbe4ee; --brand:#0e7490; --brand-2:#0ea5e9; --accent:#f59e0b;
  --side:#0c1d31; --side-2:#12294a; --side-ink:#cfe0f2; --side-dim:#8ba3bd;
  --ok:#10b981; --warn:#f59e0b; --err:#e11d48; --info:#3b82f6;
  --side-w:264px; --side-mini:70px; --top-h:60px; --radius:12px;
  --shadow:0 8px 28px rgba(12,29,49,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit}

/* ===== Shell ===== */
.app-shell{display:flex;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column;margin-left:var(--side-w);transition:margin .22s ease}
body.side-mini .main{margin-left:var(--side-mini)}
.content{padding:18px 20px 28px;flex:1;min-width:0;display:flex;flex-direction:column}
.page{display:none;animation:fade .18s ease}
.page.active{display:block}
/* Peta: halaman memenuhi sisa tinggi konten agar tak ada strip kosong di bawah peta. */
.page.active[data-page="peta"]{display:flex;flex-direction:column;flex:1;min-height:0}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ===== Sidebar ===== */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side-w);background:linear-gradient(180deg,var(--side),var(--side-2));color:var(--side-ink);display:flex;flex-direction:column;z-index:60;transition:width .22s ease,transform .22s ease}
.side-brand{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,.09)}
.brand-text{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap;overflow:hidden}
.brand-text strong{font-size:15px;letter-spacing:.3px;color:#fff}
.brand-text small{font-size:11px;color:var(--side-dim)}
.side-pin{margin-left:auto;color:var(--side-dim);border:1px solid rgba(255,255,255,.14);border-radius:8px;width:30px;height:30px;display:grid;place-items:center}
.side-pin:hover{color:#fff;background:rgba(255,255,255,.08)}
body.side-mini .side-pin svg{transform:rotate(180deg)}
.side-nav{padding:10px;overflow-y:auto;flex:1}
.nav-item{width:100%;display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;color:var(--side-ink);font-weight:600;position:relative;text-align:left;margin-bottom:2px}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:linear-gradient(90deg,#0ea5e9,#0e7490);color:#fff;box-shadow:0 4px 14px rgba(14,165,233,.35)}
.nav-ico{display:grid;place-items:center;width:24px;flex:none}
.nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-badge{font-size:10px;font-weight:800;background:var(--accent);color:#231600;border-radius:20px;padding:2px 8px}
.caret{transition:transform .18s}
.nav-parent[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 35px;border-left:2px solid rgba(255,255,255,.12);padding-left:10px}
.nav-sub-item{text-align:left;color:var(--side-dim);padding:7px 10px;border-radius:8px;font-size:13px}
.nav-sub-item:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-sub-item.active{color:#fff;background:rgba(14,165,233,.25)}
.side-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:space-between;gap:8px}
.demo-note{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--side-dim)}
.pill{background:#f59e0b;color:#231600;font-weight:800;font-size:10px;border-radius:20px;padding:2px 8px;letter-spacing:.4px}
.side-ver{font-size:11px;color:var(--side-dim)}
.side-scrim{display:none}

/* Mini mode: ikon saja + tooltip */
body.side-mini .sidebar{width:var(--side-mini)}
body.side-mini .brand-text,body.side-mini .nav-label,body.side-mini .nav-badge,
body.side-mini .caret,body.side-mini .side-foot,body.side-mini .nav-sub{display:none!important}
body.side-mini .nav-item{justify-content:center;padding:11px 0}
body.side-mini .side-brand{justify-content:center;padding:14px 6px 12px}
body.side-mini .side-pin{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);margin:0}
body.side-mini .nav-item[data-tip]:hover::after,
.icon-btn[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#0c1d31;color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap;z-index:99;box-shadow:var(--shadow)}
.nav-item[data-tip]{position:relative}
.icon-btn[data-tip]{position:relative}

/* ===== Topbar ===== */
.topbar{height:var(--top-h);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 18px;position:sticky;top:0;z-index:50}
.top-left{display:flex;align-items:center;gap:10px;min-width:0}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13.5px;white-space:nowrap;overflow:hidden}
.crumb-app{font-weight:800;color:var(--brand)}
.crumb-sep{color:#9db2c6}
.crumb-page{font-weight:700}
.crumb-sub{color:var(--muted)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.env-pill{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#7c5a00;background:#fef3c7;border:1px solid #f5d67b;border-radius:20px;padding:5px 12px}
.env-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 4px rgba(245,158,11,.2)}
.icon-btn{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:#fff;color:#33475c}
.icon-btn:hover{border-color:var(--brand-2);color:var(--brand)}
.icon-btn.on{background:#e0f2fe;border-color:var(--brand-2);color:var(--brand)}
.only-mobile{display:none}
.user-chip{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:4px 10px 4px 4px;background:#fff;cursor:pointer}
.user-chip:hover{border-color:var(--brand-2)}
.avatar{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#0ea5e9,#0e7490);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.user-meta{display:flex;flex-direction:column;line-height:1.2}
.user-meta strong{font-size:12.5px}.user-meta small{font-size:11px;color:var(--muted)}
.popover{position:absolute;top:calc(var(--top-h) - 6px);right:16px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:14px;width:270px;z-index:80}
.pop-title{margin:0 0 2px;font-weight:800}
.pop-sub{margin:0 0 10px;color:var(--muted);font-size:12.5px}
.pop-hint{font-size:11.5px;color:var(--muted);margin:10px 0 0}
.switch-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px dashed var(--line);font-size:13px}
.switch{width:40px;height:22px;border-radius:20px;background:#cbd5e1;position:relative;transition:.18s}
.switch span{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.switch.on{background:var(--ok)}
.switch.on span{left:20px}

/* ===== Umum: kartu, tombol, head halaman ===== */
.page-head{display:flex;align-items:flex-end;gap:12px;margin:2px 0 14px;flex-wrap:wrap}
.page-head h1{font-size:20px;margin:0}
.page-head p{margin:2px 0 0;color:var(--muted);font-size:13px}
.page-head .spacer{flex:1}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 3px rgba(12,29,49,.06)}
.card-pad{padding:16px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:9px 15px;font-weight:700;border:1px solid transparent;font-size:13.5px}
.btn-primary{background:linear-gradient(90deg,#0ea5e9,#0e7490);color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{border-color:var(--line);background:#fff;color:#33475c}
.btn-ghost:hover{border-color:var(--brand-2);color:var(--brand)}
.btn-block{width:100%;justify-content:center;margin-top:8px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.tag{font-size:11px;font-weight:800;border-radius:20px;padding:3px 10px;letter-spacing:.3px}
.tag.demo{background:#fef3c7;color:#7c5a00;border:1px solid #f5d67b}
.tag.info{background:#e0f2fe;color:#075985;border:1px solid #bae6fd}
.tag.ok{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}
.tag.err{background:#ffe4e6;color:#9f1239;border:1px solid #fecdd3}
.notice{display:flex;gap:10px;align-items:flex-start;background:#fffbeb;border:1px solid #f5d67b;border-radius:10px;padding:11px 13px;font-size:13px;color:#6b4e00;margin-bottom:14px}
.grid{display:grid;gap:14px}
.grid.stats{grid-template-columns:repeat(4,1fr)}
.grid.stats.cols5{grid-template-columns:repeat(5,1fr)}
.stat[data-drill]{cursor:pointer}
.stat[data-drill]:hover{border-color:var(--brand-2);box-shadow:0 4px 16px rgba(14,165,233,.18)}
.stat{padding:15px 16px;display:flex;gap:12px;align-items:center}
.stat-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff}
.stat b{font-size:20px;display:block;line-height:1.1}
.stat small{color:var(--muted)}
.cols-2{grid-template-columns:1.4fr 1fr}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13px}
.list li:last-child{border-bottom:0}
.list .t{color:var(--muted);font-size:11.5px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.tbl th{background:#f1f5f9;text-align:left;padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:#475569;white-space:nowrap}
.tbl td{padding:10px 12px;border-top:1px solid var(--line);white-space:nowrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tab-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 14px;font-weight:700;font-size:13px;color:#475569}
.tab-btn.active{background:#0c1d31;color:#fff;border-color:#0c1d31}

/* ===== Halaman peta ===== */
.map-layout{display:flex;gap:14px;align-items:stretch;flex:1;min-height:0}
.map-workspace{flex:1;min-width:0;position:relative;isolation:isolate;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0b1f33;min-height:calc(100vh - 220px)}
#map{position:absolute;inset:0;z-index:1}
.leaflet-container{font:inherit}
.map-toolbar{position:absolute;left:12px;top:12px;z-index:500;display:flex;flex-direction:column;gap:7px}
.tool-group{background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.tool-group .icon-btn{border:0;border-radius:0;width:38px;height:38px}
.tool-group .icon-btn + .icon-btn{border-top:1px solid var(--line)}
.map-brand{position:absolute;left:12px;bottom:12px;z-index:500;background:rgba(12,29,49,.85);color:#fff;border-radius:10px;padding:7px 12px;font-size:11.5px;display:flex;gap:8px;align-items:center;backdrop-filter:blur(3px);transition:opacity .6s}
.map-brand.brand-hide{opacity:0;pointer-events:none}
.coords{position:absolute;right:12px;bottom:12px;z-index:500;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:9px;padding:5px 11px;font-size:11.5px;color:#33475c;font-variant-numeric:tabular-nums}
.scale-note{position:absolute;right:12px;top:12px;z-index:500;display:flex;gap:7px}
.map-legend{position:absolute;left:62px;top:12px;z-index:500;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:9px 13px;font-size:12px;line-height:1.75}
.map-legend b{font-size:12.5px}
.map-legend .lg-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lg-min{width:22px;height:22px;flex:none;border:1px solid var(--line);border-radius:6px;background:#fff;font-weight:800;font-size:14px;line-height:1;display:grid;place-items:center;color:#475569}
.lg-min:hover{border-color:var(--brand-2);color:var(--brand)}
.map-legend.min>div:not(.lg-head){display:none}
.map-legend.min{padding:7px 9px}
.tugas-pkt{display:block;background:#e0f2fe;border:1px solid #7dd3fc;color:#075985;border-radius:20px;padding:3px 10px;font-size:11.5px;font-weight:800;margin:4px 0 2px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tugas-pkt:hover{background:#bae6fd}
.tugas-pkt[hidden]{display:none}
.lg-tugas{cursor:pointer;user-select:none}
.lg-tugas:hover{color:#075985}
.lg-tugas[hidden]{display:none}
.lg-usul{cursor:default}
.lg-usul:hover{color:inherit}
.lg-dot{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:7px}
/* Label permanen nama+NOP di atas polygon */
.lbl-bidang{background:rgba(255,255,255,.88)!important;border:1px solid #94a3b8!important;border-radius:6px!important;font-size:10px!important;font-weight:700!important;color:#0f2437!important;padding:1px 6px!important;box-shadow:0 1px 4px rgba(0,0,0,.25)!important;line-height:1.35!important;text-align:center!important}
.lbl-bidang:before{display:none!important}
.lbl-bidang small{display:block;font-weight:600;color:#0e7490;font-size:9.5px}
#map.hide-labels .leaflet-tooltip.lbl-bidang{display:none}
/* Label per layer: hanya label layer yang saklarnya dimatikan yang disembunyikan */
#map.hide-lbl-batas_kabupaten .leaflet-tooltip.lbl-batas_kabupaten,
#map.hide-lbl-batas_kecamatan .leaflet-tooltip.lbl-batas_kecamatan,
#map.hide-lbl-batas_desa .leaflet-tooltip.lbl-batas_desa,
#map.hide-lbl-blok .leaflet-tooltip.lbl-blok,
#map.hide-lbl-bidang_tanah .leaflet-tooltip.lbl-bidang_tanah,
#map.hide-lbl-bidang_bangunan .leaflet-tooltip.lbl-bidang_bangunan{display:none}
.chip-btn{background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 13px;font-size:12.5px;font-weight:700;color:#33475c;box-shadow:var(--shadow);display:flex;gap:7px;align-items:center}
.chip-btn:hover,.chip-btn.on{border-color:var(--brand-2);color:var(--brand)}
.basemap-pop{position:absolute;right:12px;top:52px;z-index:600;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px;width:220px}
.basemap-pop p{margin:0 0 8px;font-weight:800;font-size:12.5px}
.basemap-pop label{display:flex;gap:9px;align-items:center;padding:7px 8px;border-radius:8px;font-size:13px;cursor:pointer}
.basemap-pop label:hover{background:#f1f5f9}
.info-panel{position:absolute;left:62px;bottom:12px;top:12px;z-index:500;width:460px;max-width:calc(100% - 90px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.info-panel header{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#0c1d31;color:#fff;font-weight:800;font-size:13px;flex:none}
.info-panel header button{margin-left:auto;color:#fff;opacity:.8}
.info-panel .body{padding:11px 12px;font-size:13px;overflow:auto;flex:1;min-height:0}
.info-panel[hidden]{display:none!important}
.table-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.info-panel .tbl{font-size:12px}
.info-panel .tbl th,.info-panel .tbl td{padding:6px 8px;white-space:nowrap}
.info-panel .tbl td:nth-child(2){white-space:normal;min-width:90px}
@media(min-width:1400px){.info-panel{width:540px}}
.kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:12.5px}

/* Saran NOP otomatis (ketik NOP atau nama WP) — tempel/koreksi NOP */
.sn-list{margin-top:4px;border:1px solid var(--line);border-radius:8px;background:var(--surface);max-height:250px;overflow:auto;box-shadow:var(--shadow)}
.sn-list[hidden]{display:none}
.sn-item{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;padding:7px 9px;border-bottom:1px solid var(--line);cursor:pointer;font-size:12.5px}
.sn-item:last-child{border-bottom:0}
.sn-item:hover,.sn-item.sn-aktif{background:#e9f1ff}
.sn-nop{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sn-nama{color:var(--muted);flex:1;min-width:0}
.sn-tag{font-size:10px;font-weight:800;padding:2px 6px;border-radius:99px;white-space:nowrap}
.sn-tag.sn-ambil{background:#fee2e2;color:#b91c1c}
.sn-tag.sn-nya{background:#e0f2fe;color:#0369a1}
.sn-empty{padding:9px;font-size:12.5px;color:var(--muted)}
.sn-empty.sn-err{color:#b91c1c}
.kv:last-child{border:0}
.kv span{color:var(--muted)}

/* Panel layer */
.layer-panel{width:308px;flex:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-height:0;overflow:hidden;transition:width .2s,opacity .2s,margin .2s}
.layer-panel.hidden{width:0;opacity:0;margin-left:-14px;border:0;pointer-events:none}
.layer-head{padding:13px 14px 10px;border-bottom:1px solid var(--line)}
.layer-head h2{margin:0;font-size:15px;display:flex;align-items:center;gap:8px}
.layer-head p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.layer-tools{display:flex;gap:6px;margin-top:10px}
.mini-btn{border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;color:#475569;background:#fff}
.mini-btn:hover{border-color:var(--brand-2);color:var(--brand)}
.layer-list{overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px;flex:1;min-height:0}
.layer-item{border:1px solid var(--line);border-radius:11px;padding:10px 11px;background:#fff}
.layer-item.off{opacity:.75}
.layer-top{display:flex;align-items:center;gap:9px}
.legend{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;background:#f1f5f9;border:1px solid var(--line)}
.status-dot{width:9px;height:9px;border-radius:50%;background:#cbd5e1;flex:none}
.layer-item.active .status-dot{background:var(--ok);box-shadow:0 0 0 4px rgba(16,185,129,.18)}
.layer-name{font-weight:800;font-size:13px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.layer-desc{font-size:11.5px;color:var(--muted);margin:7px 0 0}
.layer-adv{margin-top:9px;border-top:1px dashed var(--line);padding-top:9px;display:none}
.layer-item.open .layer-adv{display:block}
.layer-item.open .exp svg{transform:rotate(180deg)}
.op-row{display:flex;align-items:center;gap:9px;font-size:12px;color:#475569}
.op-row input[type=range]{flex:1;accent-color:var(--brand)}
/* Baris saklar label per layer di dalam kartu Panel Layer */
.op-row.lbl-row{justify-content:space-between}
.src-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:11.5px;color:var(--muted)}
.layer-foot{padding:10px 14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
/* switch kecil */
.cbx{position:relative;width:38px;height:21px;flex:none}
.cbx input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:2;margin:0}
.cbx i{position:absolute;inset:0;background:#cbd5e1;border-radius:20px;transition:.18s}
.cbx i::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.cbx input:checked + i{background:var(--ok)}
.cbx input:checked + i::after{left:19px}
.exp{margin-left:auto;color:#64748b;border:1px solid var(--line);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}

/* ===== Modal, drawer, toast, states ===== */
.modal-back{position:fixed;inset:0;background:rgba(12,29,49,.5);z-index:200;display:grid;place-items:center;padding:18px}
.modal{background:#fff;border-radius:14px;max-width:520px;width:100%;box-shadow:var(--shadow);overflow:hidden}
.modal header{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:800}
.modal header button{margin-left:auto}
.modal .body{padding:16px;font-size:13.5px}
.modal footer{padding:13px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);background:#fff;z-index:200;box-shadow:-12px 0 40px rgba(12,29,49,.2);display:flex;flex-direction:column;animation:slidein .2s ease}
.drawer[hidden],.modal-back[hidden],.popover[hidden]{display:none!important}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.drawer header{display:flex;align-items:center;padding:15px 16px;border-bottom:1px solid var(--line);font-weight:800}
.drawer header button{margin-left:auto}
.drawer .body{padding:16px;overflow:auto;font-size:13.5px}
.scrim{position:fixed;inset:0;background:rgba(12,29,49,.4);z-index:190}
#toasts{position:fixed;bottom:18px;right:18px;z-index:300;display:flex;flex-direction:column;gap:9px}
.toast{background:#0c1d31;color:#fff;border-radius:11px;padding:11px 15px;font-size:13px;box-shadow:var(--shadow);display:flex;gap:9px;align-items:center;animation:slidein .2s}
.state-box{border:1.5px dashed #b6c6d8;border-radius:12px;padding:26px 18px;text-align:center;color:var(--muted);background:#f8fafc}
.state-box .ico{width:46px;height:46px;border-radius:14px;background:#e2e8f0;display:grid;place-items:center;margin:0 auto 10px;color:#64748b}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid #cbd5e1;border-top-color:var(--brand);margin:0 auto 10px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{border-radius:8px;background:linear-gradient(90deg,#e2e8f0,#f1f5f9,#e2e8f0);background-size:200% 100%;animation:sk 1.2s infinite;min-height:14px}
@keyframes sk{to{background-position:-200% 0}}

/* dark map tweak */
body.dark-map .map-workspace{filter:saturate(.7) brightness(.92)}

/* ===== Responsif ===== */
@media(max-width:1200px){.grid.stats{grid-template-columns:repeat(2,1fr)}.cols-2{grid-template-columns:1fr}}
@media(max-width:992px){
  .main{margin-left:0!important}
  .sidebar{transform:translateX(-105%);width:min(280px,84vw)!important}
  body.side-open .sidebar{transform:none}
  body.side-open .side-scrim{display:block;position:fixed;inset:0;background:rgba(12,29,49,.45);z-index:55}
  body.side-mini .brand-text,body.side-mini .nav-label,body.side-mini .nav-badge,body.side-mini .caret,body.side-mini .side-foot,body.side-mini .nav-sub{display:block!important}
  body.side-mini .nav-item{justify-content:flex-start;padding:10px 11px}
  .only-mobile{display:inline-grid}
  .map-layout{flex-direction:column;flex:none}
  .map-workspace{min-height:62vh;height:62vh}
  .layer-panel{width:100%;max-height:none}
  .layer-panel.hidden{display:none;width:100%;margin:0}
  .user-meta{display:none}
  .content{padding:14px 12px 24px}
}
@media(max-width:560px){.grid.stats{grid-template-columns:1fr 1fr}.stat b{font-size:17px}.crumbs{font-size:12.5px}.env-pill{display:none}}

/* ===== Tugas Saya (mobile-first petugas) ===== */
.sy-paket{margin-bottom:12px}
.sy-mut{font-size:13px;color:var(--muted);margin:6px 0}
.sy-bar{height:10px;border-radius:6px;background:#e2e8f0;overflow:hidden}
.sy-bar i{display:block;height:100%;background:linear-gradient(90deg,#0ea5e9,#10b981)}
.sy-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;background:#f8fafc;border:1.5px solid var(--line);border-radius:12px;padding:12px;margin-top:8px;font-size:14px;min-height:56px}
.sy-item small{color:var(--muted)}
.sy-judul{font-size:16px;margin:0 0 10px}
.sy-judul small{color:var(--muted);font-weight:400}
.sy-panels{display:grid;grid-template-columns:1fr;gap:10px}
.sy-ref{background:#e0f2fe;border:1.5px solid #7dd3fc;border-radius:12px;padding:12px}
.sy-isi{background:#f0fdf4;border:1.5px solid #6ee7b7;border-radius:12px;padding:12px}
.sy-ref h4,.sy-isi h4{margin:0 0 8px;font-size:12px;text-transform:uppercase}
.sy-kv{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dashed rgba(0,0,0,.12);font-size:14px}
.sy-kv:last-child{border-bottom:0}
.sy-diff{color:#92400e;background:#fef3c7;border-radius:6px;padding:0 6px}
.sy-isi label{display:block;font-size:12px;font-weight:800;margin:8px 0 3px}
.sy-inp{width:100%;padding:12px;font-size:16px;border:1.5px solid #94a3b8;border-radius:10px;background:#fff;box-sizing:border-box}
.sy-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.sy-row .btn{flex:1;min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.sy-kirim{width:100%;min-height:52px;margin-top:10px;font-size:16px}
.sy-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.sy-thumbs img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
@media(min-width:993px){.sy-panels{grid-template-columns:1fr 1fr}}

/* ===== Formulir SPOP/LSPOP resmi ===== */
.spf-sec{border:1.5px solid var(--line);border-radius:10px;margin-top:8px;background:#fff}
.spf-sec summary{cursor:pointer;padding:10px 12px;font-weight:800;font-size:13px;min-height:44px;display:flex;align-items:center}
.spf-sec summary::-webkit-details-marker{display:none}
.spf-sec summary::before{content:"+";margin-right:8px;font-size:16px;color:var(--brand)}
.spf-sec[open] summary::before{content:"–"}
.spop-form .sy-inp{margin:2px 0 6px}
@media(max-width:992px){
  .btn,.icon-btn{min-height:44px}
  .nav-item{min-height:48px}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.data{min-width:640px}
  .modal-back{padding:0;place-items:end center}
  .modal{border-radius:16px 16px 0 0;max-width:100%}
  .drawer{width:100vw}
  .page-head h1{font-size:19px}
  .map-toolbar{flex-wrap:wrap}
  .map-toolbar .btn{min-height:44px}
  .info-panel{left:8px;right:8px;width:auto}
  input,select,textarea{font-size:16px}
  .card-pad{padding:12px}
}