/* ===== Daftar Sumber Air Baku =====
   Palet & navbar disamakan dengan apps/peta-ipa-sumur & apps/library. */

:root{
  --bg:#EFF5F6;
  --surface:#FFFFFF;
  --ink:#0E2A32;
  --ink-soft:#4C6870;
  --primary:#0B5566;
  --primary-light:#1C8CA0;
  --primary-pale:#DCEEF1;
  --accent:#D98F3E;
  --accent-pale:#FBEBD8;
  --line:#C7DADD;
  --sumur:#2F8F5B;
  --sumur-pale:#E1F1E6;
  --danger:#C6553D;
  --danger-pale:#FAEDEA;
  --ok:#2F7A4D;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:'Inter',sans-serif; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.ptmb-nav-links a,.ptmb-btn-login,.admin-chip,.menu-btn,.btn-primary,.btn-ghost{
  font-family:'Space Grotesk',sans-serif;
}
a{ color:var(--primary); }

/* ===== Navbar bersama (namespace: ptmb-nav-*) ===== */
.ptmb-navbar{
  position:sticky; top:0; z-index:999;
  background:rgba(244,248,250,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #DCE9EF;
}
.ptmb-nav-inner{
  max-width:var(--w-page,1280px); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:20px;
}
.ptmb-brand{ display:flex; align-items:center; gap:10px; font-weight:600; color:#0A2537; text-decoration:none; }
.ptmb-brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(160deg,#0E8E96 0%,#0A2537 100%);
  display:grid; place-items:center; color:#fff;
  font-size:13px; font-weight:700;
}
.ptmb-brand small{ display:block; font-size:11px; font-weight:400; color:#3C5A6E; line-height:1.2; }
.ptmb-nav-links{ display:flex; gap:4px; margin-left:auto; }
.ptmb-nav-links a{
  padding:7px 12px; border-radius:8px; font-size:14px; color:#3C5A6E; text-decoration:none;
  transition:background .15s, color .15s;
}
.ptmb-nav-links a:hover, .ptmb-nav-links a.active{ background:#E7F1F4; color:#0A2537; }
.ptmb-btn-login{
  padding:8px 18px; border-radius:9px; font-size:14px; font-weight:600;
  background:#0A2537; color:#fff; text-decoration:none; transition:background .15s;
}
.ptmb-btn-login:hover{ background:#0A6A72; }
.ptmb-nav-toggle{ display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;position:relative; }
.ptmb-nav-toggle span{ width:22px;height:2px;background:#0A2537;border-radius:2px;transition:transform .2s ease,opacity .2s ease; }
.ptmb-nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.ptmb-nav-toggle.open span:nth-child(2){ opacity:0; }
.ptmb-nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.ptmb-nav-ic{ display:none;flex-shrink:0; }
.ptmb-nav-backdrop{ display:none;position:fixed;inset:0;background:rgba(10,37,55,.35);z-index:40; }
@media(max-width:720px){
  .ptmb-nav-toggle{ display:flex;margin-left:auto; }
  .ptmb-nav-backdrop.open{ display:block; }
  .ptmb-nav-links{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;top:100%;left:0;right:0;
    background:#FFFFFF;border-bottom:1px solid #DCE9EF;
    padding:10px 20px 14px;box-shadow:0 12px 24px -12px rgba(14,42,50,.15);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  .ptmb-nav-links.open{ opacity:1;visibility:visible;transform:translateY(0); }
  .ptmb-nav-links a{ display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px; }
  .ptmb-nav-ic{ display:inline-flex; }
}
.nav-right{ display:flex; align-items:center; gap:10px; }
.admin-wrap{ position:relative; }
.admin-chip{
  display:flex; align-items:center; gap:8px;
  padding:6px 12px 6px 6px; border-radius:99px;
  border:1px solid #DCE9EF; background:#FFFFFF;
  font-size:13px; font-weight:600; color:#0A2537;
  transition:border-color .15s, background .15s;
}
.admin-chip:hover{ border-color:#BFD8E0; background:#F6FAFB; }
.admin-avatar{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; color:#fff; font-size:11.5px; font-weight:700;
  background:linear-gradient(150deg,#0E8E96 0%,#0A2537 100%);
}
.admin-chip .role{ font-size:10.5px; font-weight:500; color:#3C5A6E; display:block; margin-top:-1px; }
.admin-chip .name-block{ text-align:left; line-height:1.15; }
.admin-caret{
  width:7px; height:7px; border-right:1.6px solid #3C5A6E; border-bottom:1.6px solid #3C5A6E;
  transform:rotate(45deg); transition:transform .15s; margin-left:2px;
}
.admin-wrap.open .admin-caret{ transform:rotate(-135deg); margin-top:3px; }
.admin-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:150px;
  background:#FFFFFF; border:1px solid #DCE9EF; border-radius:12px;
  padding:6px; box-shadow:0 18px 36px rgba(10,37,55,.14);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s, transform .15s, visibility .15s;
  z-index:60;
}
.admin-wrap.open .admin-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.admin-menu a, .admin-menu .logout{
  width:100%; display:flex; align-items:center; gap:8px;
  padding:9px 11px; border-radius:9px; font-size:13.5px; font-weight:600;
  transition:background .12s; text-align:left; font-family:'Inter',sans-serif;
}
.admin-menu a{ color:#0A2537; text-decoration:none; }
.admin-menu a:hover{ background:#F4F8FA; }
.admin-menu .logout{ color:#B97709; }
.admin-menu .logout:hover{ background:#FBF1DE; }
@media(max-width:820px){ .admin-chip .name-block{ display:none; } }

/* ===== Header halaman ===== */
header.page-top {
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px;
  padding:18px 5vw; background:var(--surface); border-bottom:1px solid var(--line);
}
.title-block h1 {
  font-weight:700; font-size:19px; color:var(--ink); line-height:1.25;
}
.title-block p { font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

.menu-tabs{ display:flex; gap:8px; }
.menu-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600;
  color:var(--ink-soft); background:var(--bg);
  border:1px solid var(--line); padding:9px 18px; border-radius:999px;
  cursor:pointer; transition:all .18s ease;
}
.menu-btn:hover{ color:var(--primary); background:var(--primary-pale); border-color:var(--primary-pale); }
.menu-btn.active{ color:#fff; background:var(--primary); border-color:var(--primary); }
.menu-btn.active.m-sumur{ background:var(--sumur); border-color:var(--sumur); }

/* ===== Konten ===== */
.wrap{ max-width:var(--w-inner,1180px); margin:0 auto; padding:24px 20px 70px; }

.lock-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--accent-pale); border:1px solid var(--accent);
  color:var(--ink); padding:14px 16px; border-radius:var(--radius-md);
  margin-bottom:20px; font-size:13.5px;
}
.lock-banner b{ font-weight:600; }
.lock-banner .btn-primary{ margin-left:auto; }

.toolbar{ display:flex; justify-content:space-between; align-items:center; margin:18px 0 6px; }
.toolbar .count{ font-size:12.5px; color:var(--ink-soft); }

.install-group{ margin-top:26px; }
.install-group h2{
  font-size:15px; color:var(--primary); font-weight:600;
  display:flex; align-items:center; gap:8px;
  padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:14px;
}
.install-group h2 .dot{ width:9px; height:9px; border-radius:50%; background:var(--sumur); flex:none; }
.install-group h2 .sub{ font-size:12px; color:var(--ink-soft); font-family:'Inter',sans-serif; font-weight:400; }

.sumber-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.sumber-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px; display:flex; flex-direction:column; gap:12px;
  transition:box-shadow .15s, transform .15s;
}
.sumber-card:hover{ box-shadow:0 10px 24px -14px rgba(14,42,50,.18); transform:translateY(-2px); }
.card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card-head h3{ font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.card-head .sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; }

.card-foto{
  width:100%; height:150px; object-fit:cover; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bg);
}
.card-foto-empty{
  width:100%; height:110px; border-radius:var(--radius-sm);
  border:1px dashed var(--line); background:var(--bg);
  display:grid; place-items:center; color:var(--ink-soft); font-size:12.5px;
}

.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; font-size:12.5px; }
.detail-grid .full{ grid-column:1 / -1; }
.detail-grid .k{ color:var(--ink-soft); }
.detail-grid .v{ font-weight:600; text-align:right; word-break:break-word; }

.keterangan{
  grid-column:1 / -1; border-top:1px dashed var(--line); padding-top:8px;
  font-size:12.5px; color:var(--ink); white-space:pre-line;
}

.gmaps-aksi{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:2px; }
.gm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 10px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:600;
  text-decoration:none; cursor:pointer; font-family:'Inter',sans-serif;
}
.gm-btn.solid{ background:var(--primary); color:#fff; border:1px solid var(--primary); }
.gm-btn.ghost{ background:var(--surface); color:var(--primary); border:1px solid var(--line); }
.gm-btn.ghost:hover{ border-color:var(--primary); }

.lampiran-row{ display:flex; flex-direction:column; gap:6px; }
.lampiran-row .lbl{ font-size:12px; color:var(--ink-soft); }
.attach-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:600;
  background:var(--sumur-pale); color:var(--sumur); text-decoration:none;
}
.attach-link:hover{ filter:brightness(.97); }
.attach-empty{ font-size:12px; color:var(--ink-soft); font-style:italic; }

.placeholder{
  border:1px dashed var(--line); border-radius:var(--radius-sm);
  padding:10px 12px; font-size:12.5px; color:var(--ink-soft); background:var(--bg);
}

/* ===== Tombol admin ===== */
.card-tools{ display:flex; gap:8px; margin-top:auto; }
.mini-btn{
  flex:1; padding:9px 10px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:600;
  cursor:pointer; font-family:'Inter',sans-serif; border:1px solid var(--line); background:var(--surface);
}
.mini-btn:hover{ border-color:var(--primary); color:var(--primary); }
.mini-btn.danger:hover{ border-color:var(--danger); color:var(--danger); background:var(--danger-pale); }

/* ===== Modal ===== */
.modal{
  position:fixed; inset:0; background:rgba(10,37,55,.45); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-card{
  background:var(--surface); border-radius:var(--radius-lg); padding:24px;
  width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
  box-shadow:0 24px 60px -20px rgba(10,37,55,.4);
}
.modal-card h2{ font-size:17px; font-weight:600; color:var(--ink); margin-bottom:4px; }
.modal-card .hint{ font-size:12.5px; color:var(--ink-soft); margin-bottom:14px; }
.modal-card h3{ font-size:14px; font-weight:600; color:var(--primary); margin:18px 0 8px; border-bottom:1px solid var(--line); padding-bottom:6px; }

label.field{ display:block; font-size:12px; color:var(--ink-soft); margin:12px 0 5px; font-weight:500; }
label.field:first-child{ margin-top:0; }
input[type=text], input[type=number], textarea, select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:14px; font-family:'Inter',sans-serif; background:#fff; color:var(--ink);
}
input:focus, textarea:focus, select:focus{ outline:2px solid var(--primary-light); outline-offset:1px; }
input[readonly]{ background:var(--bg); color:var(--ink-soft); }
textarea{ resize:vertical; min-height:72px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-row > div{ min-width:0; }

.lampiran-box{
  border:1px dashed var(--line); border-radius:var(--radius-sm);
  padding:12px; margin-top:4px; background:var(--bg);
  display:flex; flex-direction:column; gap:8px;
}
.lampiran-box .cur{ font-size:12px; color:var(--ink-soft); word-break:break-all; }
.lampiran-box input[type=file]{ font-size:12.5px; color:var(--ink-soft); }

.modal-actions{ display:flex; gap:10px; margin-top:20px; }
.btn-primary, .btn-ghost{
  flex:1; padding:12px; border-radius:var(--radius-sm); font-size:14px; font-weight:600;
  cursor:pointer; border:none;
}
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-light); }
.btn-primary:disabled{ background:#A9B4C0; cursor:not-allowed; }
.btn-ghost{ background:var(--surface); color:var(--primary); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--primary); }

.status-msg{ font-size:13px; text-align:center; margin-top:10px; min-height:18px; }
.status-msg.error{ color:var(--danger); }
.status-msg.ok{ color:var(--ok); font-weight:600; }

.loading-note, .error-note{ padding:40px 20px; text-align:center; color:var(--ink-soft); font-size:13.5px; }
.error-note{ color:var(--danger); }

.spinner{
  width:16px; height:16px; border:2px solid #fff; border-top-color:transparent;
  border-radius:50%; display:inline-block; animation:spin .7s linear infinite;
  vertical-align:-3px; margin-right:6px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }