/* peta-baru.css - PATAS: peta penuh layar dengan kontrol melayang.
   Pasang SETELAH blok <style> utama di index.html.
   Batalkan: hapus baris <link> ke file ini. */

:root {
  --pb-primary: #134e4a;               /* warna tombol utama, ganti di sini */
  --pb-shadow: 0 4px 18px rgba(15, 23, 42, .22);
}

#mainApp footer { display: none; }

/* 1. Peta memenuhi layar */
#mainApp .layout {
  position: fixed; inset: 0; display: block;
  margin: 0; padding: 0; background: none;
}
#mainApp .map-col {
  position: absolute; inset: 0; margin: 0; padding: 0;
  width: auto; height: auto;
}
#mainApp #map {
  position: absolute !important; inset: 0;
  width: 100% !important; height: 100% !important; border-radius: 0;
}

/* 2. Header menjadi baris kontrol melayang */
#mainApp header.top {
  position: fixed; top: 12px; left: 12px; right: 12px; z-index: 1100;
  display: flex; align-items: center; gap: 10px;
  padding: 0; margin: 0; background: transparent;
  border: 0; box-shadow: none; pointer-events: none;
}
#mainApp header.top > * { pointer-events: auto; }

.pb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; border: 0; border-radius: 12px;
  background: var(--pb-primary); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: var(--pb-shadow);
}
.pb-btn svg { flex: none; }
.pb-btn.light { background: #fff; color: #0f172a; }

#mainApp .brand {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px 0 8px;
  background: #fff; border-radius: 12px; box-shadow: var(--pb-shadow);
}
#mainApp .brand-text h1 { margin: 0; font-size: 15px; line-height: 1.1; color: #0f172a; }
#mainApp .brand-text span { display: none; }

/* 3. Kotak pencarian bulat di kanan atas */
#mainApp .search-area {
  position: relative; display: flex; align-items: center;
  margin-left: auto; flex: 0 1 460px; height: 44px;
  padding: 0 6px 0 14px; background: #fff;
  border-radius: 999px; box-shadow: var(--pb-shadow);
}
#mainApp .search-wrap {
  flex: 1; display: flex; align-items: center; gap: 8px;
  min-width: 0; padding: 0; background: transparent; border: 0;
}
#mainApp .search-wrap svg { stroke: #64748b; flex: none; }
#mainApp #searchInput {
  flex: 1; min-width: 0; padding: 0; background: transparent;
  border: 0; outline: 0; color: #0f172a; font-size: 14px;
}
#mainApp #searchInput::placeholder { color: #94a3b8; }
#mainApp .search-tools-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 34px; padding: 0 10px; background: transparent;
  border: 0; border-radius: 999px; color: #475569; cursor: pointer;
}

/* 4. Tombol admin menjadi panel "Peralatan" */
#mainApp .admin-bar {
  position: fixed; top: 68px; right: 12px; z-index: 1100;
  display: none; flex-direction: column; gap: 8px;
  min-width: 200px; padding: 10px; background: #fff;
  border-radius: 14px; box-shadow: var(--pb-shadow);
}
body.tools-open #mainApp .admin-bar { display: flex; }
#mainApp .admin-bar .btn { width: 100%; justify-content: flex-start; text-align: left; }
#mainApp .admin-bar .btn-outline-light {
  color: #0f172a; background: #fff; border: 1px solid #cbd5e1;
}

/* 5. Panel Menu: statistik + filter, buka-tutup dari kiri */
#mainApp .filters {
  position: fixed; left: 12px; top: 68px; bottom: 12px; z-index: 1100;
  width: min(360px, calc(100vw - 24px)); margin: 0; padding: 16px;
  background: #fff; border: 0; border-radius: 16px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .28);
  overflow-y: auto; overflow-x: hidden;
  transform: translateX(calc(-100% - 24px));
  visibility: hidden; transition: transform .25s ease, visibility .25s;
}
body.panel-open #mainApp .filters { transform: none; visibility: visible; }

#mainApp .filters #statsStrip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0 0 16px; padding: 0; background: transparent; border: 0;
}
#mainApp .filters #statsStrip > * {
  padding: 10px 12px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 10px;
}

/* 6. Kontrol Leaflet, pesan status */
#mainApp .leaflet-top { margin-top: 64px; }
#mainApp .leaflet-bar {
  border: 0 !important; border-radius: 12px; overflow: hidden;
  box-shadow: var(--pb-shadow);
}
#mainApp .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
#mainApp .leaflet-bar.map-legend,
#mainApp .leaflet-bar.map-locate { overflow: visible; }
#mainApp .leaflet-control-layers { border: 0; border-radius: 12px; box-shadow: var(--pb-shadow); }
#mainApp .leaflet-popup-content-wrapper { border-radius: 12px; }

#mainApp #loadStatus {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%);
  z-index: 1300; max-width: 90vw; padding: 8px 16px !important;
  border: 0; border-radius: 999px; box-shadow: var(--pb-shadow);
}

/* HP dan layar sempit: hanya ikon, merek disembunyikan */
@media (max-width: 900px) {
  #mainApp .brand { display: none; }
  #mainApp .search-area { flex: 1; margin-left: 0; }
  .pb-btn { width: 44px; padding: 0; }
  .pb-btn .pb-label { display: none; }
}

/* Tombol Peralatan: hanya ikon */
#btnPeralatan .pb-label { display: none; }
#btnPeralatan { width: 44px; padding: 0; }

/* Tombol hapus teks pencarian */
#mainApp .search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%;
  background: #e2e8f0; color: #475569; cursor: pointer;
}
#mainApp .search-clear:hover { background: #cbd5e1; }
#mainApp .search-clear[hidden] { display: none; }

/* Cegah browser HP memperbesar halaman saat kolom pencarian diketuk */
@media (max-width: 900px) {
  #mainApp #searchInput { font-size: 16px; }
}

/* Sembunyikan filter Status Pemanfaatan, Papan nama, dan Sertifikat dari panel filter samping.
   Elemennya sengaja tidak dihapus dari index.html karena masih dirujuk oleh JavaScript. */
#mainApp .filter-group:has(#statusMsel),
#mainApp .filter-group:has(#papanMsel),
#mainApp .filter-group:has(#sertifikatMsel) { display: none !important; }