:root {
  --green: #2e7d32;
  --green-dark: #1b5e20;
  --bg: #f4f6f4;
  --panel: #ffffff;
  --text: #1f2a1f;
  --muted: #6b766b;
  --border: #dfe5df;
  --danger: #c62828;
  --radius: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); font-size: 14px; }
a { color: var(--green); }

header.topbar {
  height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--green-dark); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); position: relative; z-index: 1000;
}
header.topbar h1 { font-size: 17px; margin: 0; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.topbar a, header.topbar button.link { color: #fff; text-decoration: none; font-size: 13px; background: rgba(255,255,255,.12); padding: 6px 12px; border-radius: 6px; border: 0; cursor: pointer; }
header.topbar a:hover, header.topbar button.link:hover { background: rgba(255,255,255,.22); }
.menu-toggle { display: none; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; padding: 0 4px; }

.layout { display: flex; height: calc(100% - 52px); }
.sidebar { width: 330px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; padding: 14px; }
#map { flex: 1; height: 100%; }

.section { margin-bottom: 18px; }
.section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }

label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
input, select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; color: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(46,125,50,.35); border-color: var(--green); }
input[type=color] { padding: 2px; height: 36px; }
input[type=checkbox] { width: auto; }
.field { margin-bottom: 10px; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; min-width: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--green); background: var(--green); color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.btn:hover { background: var(--green-dark); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--green); }
.btn.secondary:hover { background: #eef5ee; }
.btn.danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: #fdecec; }
.btn.sm { padding: 4px 9px; font-size: 12px; }

.layer-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; cursor: pointer; }
.layer-item:hover { background: #f7faf7; }
.swatch { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.25); margin-top: 1px; }
.layer-item .info { flex: 1; min-width: 0; }
.layer-item .title { font-weight: 600; }
.layer-item .meta { font-size: 12px; color: var(--muted); }

.summary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.summary-table td { padding: 4px 0; border-bottom: 1px solid var(--border); }
.summary-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.summary-table tr.total td { font-weight: 700; border-bottom: 0; }

.empty { color: var(--muted); font-size: 13px; padding: 8px 0; }

.leaflet-popup-content { font-size: 13px; max-height: min(420px, 60vh); overflow-y: auto; }
.popup-table { border-collapse: collapse; }
.popup-table td { padding: 2px 6px 2px 0; vertical-align: top; }
.popup-table td:first-child { color: var(--muted); white-space: nowrap; }
.popup-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }

.legend { background: #fff; padding: 8px 10px; border-radius: 6px; box-shadow: 0 1px 5px rgba(0,0,0,.3); font-size: 12px; line-height: 1.6; max-height: 40vh; overflow-y: auto; }
.legend div { display: flex; align-items: center; gap: 6px; }

/* ---------- Admin ---------- */
.login-wrap { min-height: calc(100% - 52px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.login-card { width: 100%; max-width: 360px; }
.login-card h2 { margin: 0 0 16px; font-size: 18px; }
.alert { padding: 8px 10px; border-radius: 6px; font-size: 13px; margin-bottom: 10px; }
.alert.error { background: #fdecec; color: var(--danger); }
.alert.ok { background: #e8f5e9; color: var(--green-dark); }
.alert.info { background: #eef3fb; color: #1e4f91; }

.admin-layout { display: grid; grid-template-columns: 400px 1fr; height: calc(100% - 52px); }
.admin-form { overflow-y: auto; padding: 14px; background: var(--panel); border-right: 1px solid var(--border); }
.admin-main { display: grid; grid-template-rows: 55% 45%; min-height: 0; }
#adminMap { height: 100%; }
.table-wrap { overflow: auto; background: var(--panel); border-top: 1px solid var(--border); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
table.data th { position: sticky; top: 0; background: #f0f4f0; font-weight: 600; z-index: 1; }
table.data tr:hover td { background: #f7faf7; }
table.data tr.selected td { background: #e8f5e9; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; background: #e0e0e0; }
.badge.on { background: #c8e6c9; color: var(--green-dark); }
.badge.ok { background: #c8e6c9; color: var(--green-dark); }
.badge.wait { background: #fff3cd; color: #8a6100; }
.badge.no { background: #fdecec; color: var(--danger); }
.layer-item .badge { margin-top: 4px; }
.layer-item.active { border-color: var(--green); background: #f3f9f3; }

.status-box { border-radius: 6px; padding: 7px 9px; margin: 4px 0 8px; font-size: 13px; border-left: 4px solid; }
.status-box.ok { background: #e8f5e9; border-color: #2e7d32; color: var(--green-dark); }
.status-box.wait { background: #fff8e1; border-color: #f9a825; color: #6d4c00; }
.status-box.no { background: #fdecec; border-color: var(--danger); color: #8e1c1c; }
.status-reason { margin-top: 4px; white-space: pre-wrap; color: var(--text); }
.status-meta { margin-top: 3px; font-size: 11px; opacity: .75; }
.layer-detail .status-box { margin-bottom: 0; }

dialog.modal { border: 0; border-radius: 10px; padding: 18px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
dialog.modal::backdrop { background: rgba(0,0,0,.4); }
dialog.modal h3 { margin: 0 0 6px; font-size: 16px; }
dialog.modal p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.role-tag { font-size: 11px; background: rgba(255,255,255,.25); padding: 1px 6px; border-radius: 8px; margin-left: 4px; }

.dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 18px; text-align: center; color: var(--muted); cursor: pointer; transition: .15s; }
.dropzone.drag, .dropzone:hover { border-color: var(--green); background: #f3f9f3; color: var(--green-dark); }
.dropzone strong { color: var(--text); }
.file-info { font-size: 12px; margin-top: 8px; }
.form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.form-head h2 { margin: 0; font-size: 16px; }
.actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.hidden { display: none !important; }

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .sidebar { position: absolute; top: 52px; left: 0; bottom: 0; z-index: 900; transform: translateX(-100%); transition: transform .2s; width: min(330px, 88vw); box-shadow: 2px 0 8px rgba(0,0,0,.2); }
  .sidebar.open { transform: none; }
  .admin-layout { display: block; height: auto; }
  .admin-form { border-right: 0; }
  .admin-main { grid-template-rows: 360px auto; }
  .table-wrap { max-height: none; }
}

/* Kolom aksi menempel di kanan agar tombol Setujui/Tolak/Edit selalu terlihat */
table.data th:last-child, table.data td:last-child { position: sticky; right: 0; background: #fff; box-shadow: -6px 0 8px -6px rgba(0,0,0,.25); z-index: 1; }
table.data th:last-child { background: #f0f4f0; z-index: 2; }
table.data tr:hover td:last-child { background: #f7faf7; }
table.data tr.selected td:last-child { background: #e8f5e9; }

/* Tab sumber polygon: upload file / input manual polygon */
.tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.tab { flex: 1; padding: 8px 10px; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.active { color: var(--green-dark); border-bottom-color: var(--green); font-weight: 600; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
#btnKlik[aria-pressed="true"] { background: var(--green); color: #fff; }
.map-pick, .map-pick .leaflet-interactive { cursor: crosshair !important; }

/* Input + tombol menempel (koordinat lokasi) */
.input-btn { display: flex; gap: 6px; }
.input-btn input { flex: 1; min-width: 0; }
.input-btn .btn { padding: 6px 12px; }
#btnPin[aria-pressed="true"] { background: var(--green); color: #fff; }

/* Kontrol layer peta (Satelit / OpenStreetMap): jangan ikut gaya input & label form */
input[type=radio] { width: auto; }
.leaflet-control-layers-expanded { padding: 8px 12px; }
.leaflet-control-layers label { display: block; margin: 0; padding: 3px 0; font-size: 13px; color: var(--text); cursor: pointer; }
.leaflet-control-layers label > span { display: flex; align-items: center; gap: 8px; }
.leaflet-control-layers-selector { width: auto; margin: 0; padding: 0; flex-shrink: 0; accent-color: var(--green); }

#editHint { margin-top: 2px; }

/* Level user: verifikator tidak menginput data → form disembunyikan, peta + tabel selebar layar */
body.role-verifikator .admin-form { display: none; }
body.role-verifikator .admin-layout { grid-template-columns: 1fr; }
dialog.modal.wide { width: min(1100px, calc(100vw - 32px)); }
.lock { font-size: 12px; color: var(--muted); }
#userBody select { width: auto; padding: 4px 6px; }

table.data td.center, table.data th.center { text-align: center; }
.cek-tampil { width: 18px; height: 18px; cursor: pointer; accent-color: var(--green); vertical-align: middle; }
.cek-tampil:disabled { cursor: not-allowed; opacity: .5; }

/* Lokasi kekeringan */
.kek-dot { width: 18px; height: 18px; border-radius: 50%; background: #c62828; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.4);
  color: #fff; font: 700 10px/14px system-ui, sans-serif; text-align: center; }
.kek-pop { min-width: 190px; }
.kek-pop .kek-title { font-weight: 700; color: #c62828; margin-bottom: 6px; }
.kek-pop input { margin: 4px 0 8px; }
.kek-pop .actions { margin-top: 0; }
.legend .kek-dot { width: 12px; height: 12px; display: inline-block; flex-shrink: 0; }

/* Tab tabel: Rencana Tanam | Lokasi Kekeringan */
.table-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 2px; padding: 6px 8px 0; background: #e6ece6; border-bottom: 1px solid var(--border); height: 39px; }
.ttab { border: 1px solid transparent; border-bottom: 0; background: none; padding: 6px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 6px 6px 0 0; }
.ttab.active { background: #fff; color: var(--green-dark); border-color: var(--border); }
.ttab[data-mode="kek"].active { color: #c62828; }
.ttab .cnt { font-weight: 400; font-size: 12px; background: rgba(0,0,0,.07); padding: 0 6px; border-radius: 8px; }
.ttab .cnt:empty { display: none; }
.admin-main .table-wrap table.data th { top: 39px; }

/* Pilihan input di atas panel form */
.mode-switch { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: #e6ece6; border-radius: 8px; }
.mode-switch .ttab { flex: 1; border-radius: 6px; border: 1px solid transparent; padding: 8px 6px; font-size: 13px; }
.mode-switch .ttab.active { background: #fff; border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Dokumentasi: galeri di popup & form */
.dok-box { margin-top: 8px; font-size: 12px; color: var(--muted); }
.dok-title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.dok-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.dok-item { position: relative; display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #eef1ee; border: 1px solid var(--border); }
.dok-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dok-file { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--text); padding: 4px; text-align: center; }
.dok-file span { font-size: 22px; }
.dok-file small { font-size: 10px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.dok-item .dok-del { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(198,40,40,.92); color: #fff; font-size: 12px; cursor: pointer; line-height: 22px; padding: 0; }
.dok-item.pending { outline: 2px dashed var(--green); outline-offset: -2px; }
.dok-item.pending::after { content: 'baru'; position: absolute; left: 2px; bottom: 2px; font-size: 9px; background: var(--green); color: #fff; padding: 0 4px; border-radius: 3px; }
.dok-pick { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.leaflet-popup-content .dok-grid { grid-template-columns: repeat(3, 72px); }
.dok-item > .dok-file, .dok-item > a { width: 100%; height: 100%; }

.summary-table tr.sub td { font-size: 12px; color: var(--muted); border-bottom: 0; padding: 2px 0; }
.legend .lg-sub { margin-top: 4px; font-weight: 600; color: var(--muted); font-size: 11px; }

/* Filter musim tanam berupa ceklist */
.cek-musim { display: flex; gap: 6px; flex-wrap: wrap; }
.cek-musim .cek-item { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; color: var(--text); cursor: pointer; background: #fff; user-select: none; }
.cek-musim .cek-item:has(input:checked) { border-color: var(--green); background: #f3f9f3; }
.cek-musim .cek-item input { margin: 0; accent-color: var(--green); }
.cek-musim .swatch { width: 14px; height: 14px; margin-top: 0; }

/* Progres simpan (data + dokumentasi) */
.progress { margin-top: 10px; }
.progress-track { height: 10px; background: #e3e9e3; border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--green); border-radius: 6px; transition: width .15s linear; }
.progress-text { margin-top: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress.proses .progress-fill { background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%);
  background-size: 16px 16px; animation: progres-jalan .8s linear infinite; }
.progress.done .progress-text { color: var(--green-dark); font-weight: 600; }
@keyframes progres-jalan { from { background-position: 0 0; } to { background-position: 16px 0; } }

/* Judul panjang: di layar kecil boleh dua baris agar tidak terpotong */
@media (max-width: 900px) {
  header.topbar h1 { white-space: normal; font-size: 14px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
/* Admin di layar kecil: judul satu baris penuh, tombol di bawahnya */
@media (max-width: 900px) {
  body:has(#adminView) header.topbar { flex-wrap: wrap; height: auto; padding: 8px 16px; row-gap: 6px; }
  body:has(#adminView) header.topbar h1 { flex-basis: 100%; }
}

.dok-item .geo-tag { position: absolute; left: 2px; top: 2px; font-size: 10px; background: rgba(0,0,0,.65); color: #fff; padding: 0 4px; border-radius: 3px; }

/* Titik lokasi kekeringan: banyak titik, masing-masing berketerangan */
.lbl-sub { font-weight: 400; color: var(--muted); }

/* Klarifikasi: khusus admin */
body:not(.role-admin) .admin-only { display: none !important; }
.ttab[data-mode="klar"].active { color: #1b5e20; }
.klar-lap { margin: -4px 0 12px; padding: 8px 10px; border: 1px solid #c8e6c9; border-left: 4px solid #2e7d32; border-radius: 6px; background: #f3faf3; font-size: 13px; }
.klar-lap .judul { font-weight: 700; color: #1b5e20; margin-bottom: 4px; }
.klar-lap table td { padding: 1px 8px 1px 0; vertical-align: top; }
.klar-lap table td:first-child { color: var(--muted); white-space: nowrap; }
.klar-luas { margin: -4px 0 12px; padding: 8px 10px; border-radius: 6px; background: #e8f5e9; color: #1b5e20; font-size: 13px; }
.klar-luas b { font-size: 15px; }
.klar-pop .klar-title { font-weight: 700; color: #1b5e20; margin-bottom: 6px; }
.leaflet-tooltip.klar-tip { background: #1b5e20; color: #fff; border: 0; font-weight: 600; font-size: 12px; padding: 3px 7px; }
.leaflet-tooltip.klar-tip::before { border-top-color: #1b5e20; }

/* Toolbar alat edit polygon (lokasi kekeringan) */
.alat-bar { margin-top: 8px; border: 1px solid #d7e3d5; border-radius: 8px; padding: 8px; background: #f7faf6; }
.alat-judul { font-size: 12px; font-weight: 700; color: #33691e; margin-bottom: 6px; }
.alat-tombol { display: flex; flex-wrap: wrap; gap: 4px; }
.alat-tombol .btn[aria-pressed="true"] { background: #e65100; border-color: #e65100; color: #fff; }
#alatHint:empty { display: none; }
#alatHint { margin-top: 6px; }

/* Jadwal tanam: rentang bulan */
.jadwal-range { display: flex; align-items: center; gap: 6px; }
.jadwal-range input { flex: 1; min-width: 0; }
.jadwal-range span { font-size: 12px; color: var(--muted); }

/* ================= Tampilan aplikasi mobile (HP, lebar ≤ 900 px; diaktifkan js/mobile.js) ================= */
.m-nav, .m-sheet-handle, .m-akun { display: none; }
@media (max-width: 900px) {
  body.m-app { --nav-h: calc(60px + env(safe-area-inset-bottom)); overscroll-behavior: none; }
  body.m-app input, body.m-app select, body.m-app textarea { font-size: 16px; } /* cegah zoom otomatis saat mengetik */
  body.m-app header.topbar { height: 52px; flex-wrap: nowrap; padding: 0 14px; padding-top: env(safe-area-inset-top); }
  body.m-app header.topbar h1 { font-size: 15px; flex-basis: auto; }
  body.m-app .menu-toggle { display: none; }

  /* Navigasi bawah */
  body.m-app .m-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: var(--nav-h); padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -2px 10px rgba(0,0,0,.08); z-index: 1200; }
  body.m-app.m-login .m-nav { display: none; }
  .m-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none;
    font: inherit; font-size: 11px; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .m-nav .m-ikon { font-size: 21px; line-height: 1; padding: 3px 18px; border-radius: 14px; transition: background .15s; }
  .m-nav button.aktif { color: var(--green-dark); font-weight: 700; }
  .m-nav button.aktif .m-ikon { background: #dcefdc; }

  /* ----- Halaman publik: peta penuh + bottom sheet ----- */
  body.m-app .layout { height: calc(100% - 52px - var(--nav-h)); }
  body.m-app .sidebar { position: fixed; left: 0; right: 0; top: auto; bottom: var(--nav-h); width: auto; max-height: 74vh; z-index: 1100;
    border-right: 0; border-radius: 18px 18px 0 0; padding: 4px 16px 16px; box-shadow: 0 -6px 24px rgba(0,0,0,.25);
    transform: translateY(calc(100% + var(--nav-h))); transition: transform .25s ease; }
  body.m-app .sidebar.open { transform: none; }
  body.m-app .m-sheet-handle { display: block; position: sticky; top: -4px; width: 100%; height: 22px; margin-bottom: 4px; border: 0; cursor: pointer;
    background: linear-gradient(#fff, #fff) padding-box; z-index: 2; }
  body.m-app .m-sheet-handle::before { content: ''; display: block; width: 42px; height: 5px; border-radius: 3px; background: #cfd6cf; margin: 8px auto 0; }
  body.m-app[data-mtab="filter"] .sidebar [data-mpanel]:not([data-mpanel="filter"]),
  body.m-app[data-mtab="ringkasan"] .sidebar [data-mpanel]:not([data-mpanel="ringkasan"]),
  body.m-app[data-mtab="layer"] .sidebar [data-mpanel]:not([data-mpanel="layer"]) { display: none; }
  body.m-app .sidebar .section h3 { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text); }
  body.m-app .layer-item { padding: 10px; border-radius: 12px; }
  body.m-app .legend { max-height: 30vh; font-size: 11px; }

  /* ----- Halaman admin: satu panel per tab ----- */
  body.m-app .login-wrap { min-height: calc(100% - 52px); align-items: flex-start; padding-top: 12vh; }
  body.m-app .login-card { border-radius: 16px; padding: 24px 20px; }
  body.m-app .login-card .btn { padding: 12px; font-size: 16px; }
  body.m-app #adminView { display: flex; flex-direction: column; height: calc(100% - 52px - var(--nav-h)); }
  body.m-app .admin-form { order: 2; flex: 1; min-height: 0; overflow-y: auto; border-right: 0; padding: 14px 14px 24px; }
  body.m-app .admin-main { order: 1; display: flex; flex-direction: column; min-height: 0; }
  body.m-app #adminMap { flex: 1; min-height: 0; height: auto; }
  body.m-app .admin-main .table-wrap { flex: 1; min-height: 0; max-height: none; border-top: 0; background: var(--bg); }
  /* Peta: peta penuh */
  body.m-app[data-mtab="peta"] .admin-form,
  body.m-app[data-mtab="peta"] .admin-main .table-wrap { display: none; }
  body.m-app[data-mtab="peta"] .admin-main { flex: 1; }
  /* Input: peta di atas (untuk klik/gambar polygon), form di bawah */
  body.m-app[data-mtab="input"] .admin-main { flex: 0 0 38%; }
  body.m-app[data-mtab="input"] .admin-main .table-wrap { display: none; }
  body.m-app[data-mtab="input"] .admin-form { box-shadow: 0 -4px 12px rgba(0,0,0,.08); border-radius: 16px 16px 0 0; position: relative; z-index: 2; }
  /* Data: daftar data penuh */
  body.m-app[data-mtab="data"] .admin-form,
  body.m-app[data-mtab="data"] #adminMap { display: none; }
  body.m-app[data-mtab="data"] .admin-main { flex: 1; }
  /* Akun */
  body.m-app[data-mtab="akun"] .admin-form,
  body.m-app[data-mtab="akun"] .admin-main { display: none; }
  body.m-app[data-mtab="akun"] .m-akun { display: block; flex: 1; overflow-y: auto; padding: 18px 16px; }
  .m-akun h2 { font-size: 18px; margin: 0 0 12px; }
  .m-akun-list { display: flex; flex-direction: column; gap: 10px; }
  .m-akun-list > a, .m-akun-list > button { display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border);
    background: #fff; color: var(--text); font: inherit; font-size: 15px; text-decoration: none; cursor: pointer; }
  .m-akun-list > #btnLogout { color: var(--danger); border-color: #f3c6c6; }
  .m-akun-list .role-tag { background: #e8f5e9; color: var(--green-dark); }

  /* Tombol mode (Rencana / Kekeringan / Klarifikasi) bisa digeser ke samping */
  body.m-app .mode-switch, body.m-app .table-tabs { overflow-x: auto; scrollbar-width: none; }
  body.m-app .table-tabs { display: flex; gap: 6px; height: auto; padding: 8px 10px; border-bottom: 0; position: sticky; top: 0; z-index: 3; background: var(--bg); }
  body.m-app .table-tabs .ttab { flex: 0 0 auto; white-space: nowrap; height: auto; line-height: 1.3; margin: 0; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border); background: #fff; }
  body.m-app .table-tabs { align-items: center; overflow-y: hidden; }
  body.m-app .table-tabs .ttab.active { background: #dcefdc; border-color: var(--green); }
  body.m-app .btn { min-height: 40px; }
  body.m-app .btn.sm { min-height: 34px; padding: 6px 11px; }

  /* Tabel → kartu */
  body.m-app table.data thead { display: none; }
  body.m-app table.data, body.m-app table.data tbody, body.m-app table.data tr, body.m-app table.data td { display: block; width: auto; }
  body.m-app table.data tr { margin: 10px 10px 0; padding: 10px 12px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
  body.m-app table.data tr.selected { border-color: var(--green); box-shadow: 0 0 0 2px rgba(46,125,50,.25); }
  body.m-app table.data tr:hover td, body.m-app table.data tr.selected td { background: none; }
  /* label kolom di kiri (36%), isi sel mengalir biasa di kanan */
  body.m-app table.data td { position: relative; padding: 4px 0 4px 38%; border: 0; white-space: normal; max-width: none !important; text-align: left; min-height: 24px; }
  body.m-app table.data td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 35%; font-size: 12px; color: var(--muted); }
  body.m-app table.data td:first-child { font-size: 15px; font-weight: 600; padding: 2px 0 6px; }
  body.m-app table.data td:first-child::before { display: none; }
  body.m-app table.data td:last-child { position: static; box-shadow: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 0; margin-top: 4px; border-top: 1px solid var(--border); background: none; }
  body.m-app table.data td:last-child::before { display: none; }
  body.m-app table.data td[colspan] { display: block; text-align: center; padding: 16px 0; }
  body.m-app table.data tr:has(td[colspan]) { background: none; border: 0; box-shadow: none; }
  body.m-app .table-wrap table.data { padding-bottom: 12px; }
  body.m-app dialog.modal { width: calc(100vw - 20px); max-height: 88vh; padding: 16px; border-radius: 16px; }
}

/* ---------- Dropdown yang bisa dicari (PRT.cariSelect) ---------- */
.cs { position: relative; }
.cs-asli { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; padding: 0 !important; border: 0 !important; }
.cs-tombol { width: 100%; text-align: left; padding: 8px 32px 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font: inherit; color: inherit; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; min-height: 36px; }
.cs-tombol::after { content: ''; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); }
.cs-tombol:focus { outline: 2px solid rgba(46,125,50,.35); border-color: var(--green); }
.cs-tombol.kosong { color: var(--muted); }
.cs-tombol:disabled { background: #f3f3f3; cursor: not-allowed; }
.cs-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1500; background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); display: flex; flex-direction: column; max-height: 340px; }
.cs-cari { position: relative; padding: 8px; border-bottom: 1px solid var(--border); }
.cs-cari input { padding-right: 70px; }
.cs-info { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); pointer-events: none; }
.cs-daftar { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; min-height: 0; }
.cs-grup { padding: 8px 12px 3px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cs-opsi { padding: 7px 12px 7px 20px; cursor: pointer; }
.cs-opsi.sorot, .cs-opsi:hover { background: #eef5ee; }
.cs-opsi.terpilih { font-weight: 700; color: var(--green-dark); }
.cs-opsi.terpilih::after { content: ' ✓'; }
.cs-opsi.selalu { border-top: 1px solid var(--border); margin-top: 4px; color: var(--green); }
.cs-kosong { padding: 14px 12px; color: var(--muted); text-align: center; }
/* HP: panel dari bawah layar */
.cs-panel.cs-hp { position: fixed; left: 0; right: 0; top: auto; bottom: 0; max-height: 82vh; border-radius: 18px 18px 0 0; border: 0; z-index: 3000;
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 30px rgba(0,0,0,.3); animation: cs-naik .2s ease; }
.cs-latar { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: -1; }
.cs-panel.cs-hp > :not(.cs-latar) { background: #fff; }
.cs-panel.cs-hp .cs-kepala { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; border-radius: 18px 18px 0 0; font-size: 16px; }
.cs-tutup { border: 0; background: #eef1ee; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; cursor: pointer; }
.cs-panel.cs-hp .cs-cari { padding: 8px 14px 10px; }
.cs-panel.cs-hp .cs-cari input { font-size: 16px; padding-top: 10px; padding-bottom: 10px; border-radius: 10px; }
.cs-panel.cs-hp .cs-opsi { padding: 12px 16px 12px 22px; font-size: 15px; border-bottom: 1px solid #f0f2f0; }
.cs-panel.cs-hp .cs-grup { padding: 12px 16px 4px; background: #f7f9f7; }
body.cs-buka { overflow: hidden; }
@keyframes cs-naik { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* Isian yang tidak bisa diubah (mis. No. HP & NIP di Profil Saya) */
input[readonly] { background: #f1f3f1; color: var(--muted); cursor: not-allowed; }
input[readonly]:focus { outline: none; border-color: var(--border); }

/* Profil: daftar nama poktan */
.poktan-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.poktan-list .baris { display: flex; gap: 6px; }
.poktan-list .baris input { flex: 1; }
.poktan-pilih { margin-bottom: 6px; }