:root{--g:#126b43;--g2:#0d5134;--bg:#eef4ef;--ink:#183127;--muted:#6d7d75;--line:#dce8df;--low:#d95852;--mid:#dfb83f;--high:#48a56a}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,Segoe UI,sans-serif;color:var(--ink);background:var(--bg);overflow:hidden}header{height:68px;background:linear-gradient(120deg,var(--g2),var(--g));color:white;display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 3px 18px #1233;position:relative;z-index:1000}header b{display:block;font-size:1.15rem}header small{display:block;opacity:.8;margin-top:2px}header a{color:#fff;text-decoration:none;font-weight:800}.card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 32px rgba(18,71,45,.08)}.workspace{height:calc(100vh - 68px);padding:14px;display:grid;grid-template-columns:292px minmax(0,1fr);gap:14px;min-width:0}.sidebar{padding:16px;overflow:auto;min-width:0}.sidehead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:15px}.sidehead small{font-size:.68rem;letter-spacing:.12em;color:var(--g);font-weight:900}.sidehead h2{font-size:1.08rem;margin:3px 0 0}.dot{width:10px;height:10px;border-radius:50%;background:var(--high);box-shadow:0 0 0 5px #48a56a20;margin-top:7px}.filter-stack{display:grid;gap:12px}.field label{display:block;font-size:.76rem;font-weight:900;margin:0 0 5px}.field select,.field input{width:100%;padding:10px 11px;border:1px solid #cbdcd1;border-radius:10px;background:#fff;color:var(--ink);outline:none;transition:.16s border-color,.16s box-shadow}.field select:focus,.field input:focus{border-color:#55a37b;box-shadow:0 0 0 3px #55a37b22}.field select:disabled{background:#f1f4f2;color:#9aa49f;cursor:not-allowed}.field small{display:block;color:var(--muted);margin-top:4px}.side-divider{height:1px;background:var(--line);margin:16px 0}.primary{width:100%;min-height:43px;border:0;border-radius:11px;background:var(--g);color:#fff;font-weight:900;cursor:pointer;margin-top:15px;transition:.15s transform,.15s opacity}.primary:hover:not(:disabled){transform:translateY(-1px)}.primary:disabled{opacity:.45;cursor:not-allowed}.note{margin-top:12px;color:var(--muted);font-size:.78rem;line-height:1.45;background:#f6faf7;border:1px solid var(--line);border-radius:10px;padding:9px}.note.error{background:#fff4f2;border-color:#f0cbc6;color:#9a433a}.note.ok{background:#f2faf5;border-color:#cfe8d7;color:#35634b}.mapcard{overflow:hidden;position:relative;min-width:0}.mapcard #map{height:100%;min-height:420px}.mapstatus{position:absolute;z-index:600;left:12px;bottom:12px;right:12px;max-width:max-content;background:rgba(255,255,255,.95);padding:8px 11px;border-radius:10px;box-shadow:0 5px 18px #0002;font-size:.8rem}.detail{padding:18px;overflow:auto;min-width:0}.empty-state{text-align:center;color:var(--muted);padding:34px 12px}.empty-state h3{color:var(--ink);margin:6px 0}.empty-icon{width:48px;height:48px;border-radius:15px;margin:0 auto 10px;display:grid;place-items:center;background:#edf7f1;color:var(--g);font-size:1.7rem;font-weight:900}.title-row{display:flex;justify-content:space-between;gap:10px}.title-row h2{margin:3px 0 10px}.idpill{background:#eaf5ee;border:1px solid #cbe3d4;padding:7px 10px;height:max-content;border-radius:999px;font-weight:900}.basic{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}.basic>div{background:#f6faf7;border:1px solid var(--line);padding:9px;border-radius:10px}.basic small{display:block;color:var(--muted);font-size:.7rem}.basic b{display:block;margin-top:3px}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:12px 0}.tab{border:1px solid var(--line);background:#f7faf8;padding:9px;border-radius:10px;font-weight:850;cursor:pointer}.tab.active{background:var(--g);color:#fff;border-color:var(--g)}.tabpane{display:none}.tabpane.active{display:block}.reco-grid{display:grid;gap:7px}.reco-item{display:grid;grid-template-columns:1fr auto auto;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px}.reco-item small{color:var(--muted)}.methodnote{font-size:.8rem;color:var(--muted);line-height:1.5;margin-top:9px}.attrs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px}.attr{border-bottom:1px dashed #dde6df;padding:5px 0;word-break:break-word}.attr small{display:block;color:var(--muted)}details{margin-top:16px}summary{cursor:pointer;font-weight:900}.leaflet-popup-content{min-width:230px}.popup-loading{font-weight:800}@media(max-width:1250px){.workspace{grid-template-columns:280px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}.detail{grid-column:1/-1;max-height:38vh}.attrs{grid-template-columns:repeat(3,1fr)}}@media(max-width:780px){body{overflow:auto}header{height:auto;min-height:68px;padding:12px 16px}.workspace{height:auto;display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:10px;padding:10px}.sidebar,.mapcard,.detail{grid-column:1}.mapcard #map{height:65vh;min-height:460px}.detail{max-height:none}.basic,.attrs{grid-template-columns:1fr}.tabs{grid-template-columns:1fr}}

/* V2.4 — hover polygon + popup kebutuhan pupuk */
.leaflet-interactive{transition:fill-opacity .09s ease,stroke-width .09s ease,fill .09s ease}
.hara-popup{font-size:12px;line-height:1.35;min-width:300px}.hara-popup .popup-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}.hara-popup .popup-head small{display:block;font-size:9px;letter-spacing:.11em;color:var(--muted);font-weight:900}.hara-popup .popup-head b{display:block;font-size:16px;color:var(--g2)}.hara-popup .popup-head>strong{font-size:14px;color:var(--g2)}.popup-place{font-weight:800;margin:8px 0;color:var(--ink)}.popup-npk{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:7px 0 10px}.popup-npk span{background:#f3f8f5;border:1px solid var(--line);border-radius:8px;padding:6px;text-align:center}.popup-npk b{display:block;margin-top:2px;font-size:13px}.popup-reco{margin-top:9px;border-top:1px solid var(--line);padding-top:8px}.popup-reco-title{font-size:11px;font-weight:900;color:var(--g);margin-bottom:5px}.popup-reco-row{display:grid;grid-template-columns:minmax(75px,1fr) auto auto;gap:7px;align-items:center;padding:4px 0;border-bottom:1px dashed #e4ece7}.popup-reco-row:last-child{border-bottom:0}.popup-reco-row span{color:var(--muted);white-space:nowrap}.popup-reco-row strong{white-space:nowrap;color:var(--ink)}.popup-empty{color:var(--muted);font-style:italic}.popup-error{color:#9a433a;font-weight:800}.leaflet-popup-content{min-width:300px;max-height:430px;overflow:auto;margin:13px 16px}.leaflet-tooltip{font-weight:800}


/* V3.1 - popup-only info, right panel removed */
.detail-hidden{display:none !important}
.popup-place-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 10px}.popup-place-grid>div{background:#f6faf7;border:1px solid var(--line);padding:7px 8px;border-radius:8px}.popup-place-grid small{display:block;color:var(--muted);font-size:10px}.popup-place-grid b{display:block;margin-top:2px;color:var(--ink)}
@media(max-width:1250px){.workspace{grid-template-columns:280px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}}


/* V3.2 — basemap selector + legend status hara */
.leaflet-control-layers{border:1px solid rgba(20,72,45,.18)!important;border-radius:10px!important;box-shadow:0 5px 18px rgba(0,0,0,.16)!important}
.leaflet-control-layers-expanded{padding:9px 11px!important;font-size:12px;color:var(--ink)}
.leaflet-control-layers label{margin:3px 0;cursor:pointer}
.hara-legend{background:rgba(255,255,255,.96);border:1px solid rgba(20,72,45,.18);border-radius:10px;box-shadow:0 5px 18px rgba(0,0,0,.16);padding:10px 12px;min-width:145px;color:var(--ink);font-size:12px;line-height:1.25}
.hara-legend-title{font-weight:900;margin-bottom:7px;color:var(--g2)}
.hara-legend-row{display:flex;align-items:center;gap:8px;margin:5px 0}
.hara-legend .swatch{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}
.hara-legend .swatch.low{background:#d95852}
.hara-legend .swatch.medium{background:#dfb83f}
.hara-legend .swatch.high{background:#48a56a}
@media(max-width:780px){.hara-legend{font-size:11px;min-width:132px;padding:8px 10px}.hara-legend .swatch{width:14px;height:14px}}

/* V3.3 — header branding, search, dynamic 5-class legend */
:root{--sr:#8b1e1e;--r:#e53935;--s:#f9a825;--t:#66bb6a;--st:#1b5e20}
.app-header{height:68px;padding:0 18px}.header-left{min-width:0;display:flex;align-items:center;gap:13px;flex:1}.header-logos{height:44px;display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-right:3px}.header-logos img{display:block;height:38px;width:auto;object-fit:contain}.header-logos img.brmp-logo{height:35px;max-width:145px}.app-name{font-weight:900;font-size:1.12rem;white-space:nowrap;flex:0 0 auto}.mode-link{flex:0 0 auto;margin-left:14px}.location-search{position:relative;width:min(430px,35vw);min-width:230px;margin-left:5px}.location-search input{width:100%;height:39px;border:1px solid rgba(255,255,255,.28);border-radius:11px;background:rgba(255,255,255,.96);padding:0 38px 0 36px;color:#183127;outline:none;box-shadow:0 4px 14px rgba(0,0,0,.12)}.location-search input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.22),0 4px 18px rgba(0,0,0,.18)}.search-icon{position:absolute;left:12px;top:8px;color:#527164;font-size:20px;z-index:2;pointer-events:none}.location-results{position:absolute;top:44px;left:0;right:0;z-index:2500;background:#fff;border:1px solid #d8e5dc;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.22);overflow:hidden;max-height:360px;overflow-y:auto}.search-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;border:0;border-bottom:1px solid #edf2ee;background:#fff;padding:10px 12px;cursor:pointer;color:#183127}.search-item:last-child{border-bottom:0}.search-item:hover,.search-item:focus{background:#f0f8f3}.search-item b{display:block;font-size:.84rem}.search-item small{display:block;color:#72837a;margin-top:2px;font-size:.7rem}.search-item em{font-style:normal;font-size:1.2rem;color:#43815f}.search-empty{padding:12px;color:#718078;font-size:.8rem}
.sidebar-legend{border:1px solid var(--line);border-radius:12px;background:#f8fbf9;padding:10px 11px}.sidebar-legend-title{font-size:.78rem;font-weight:900;color:var(--g2);margin-bottom:7px}.legend-row{display:grid;grid-template-columns:15px 1fr auto;align-items:center;gap:7px;padding:4px 0;font-size:.72rem}.legend-row strong{font-size:.68rem;color:#54675e;font-weight:800}.legend-swatch{width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}.legend-swatch.sangat-rendah{background:#8b1e1e!important}.legend-swatch.rendah{background:#e53935!important}.legend-swatch.sedang{background:#f9a825!important}.legend-swatch.tinggi{background:#66bb6a!important}.legend-swatch.sangat-tinggi{background:#1b5e20!important}.legend-total{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:7px;padding-top:8px;border-top:1px solid #dce8df;font-size:.73rem}.legend-total b{color:var(--g2);text-align:right}.legend-location{margin-top:4px;font-size:.65rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* V3.2 map legend is intentionally disabled; legend now lives only in sidebar. */
.hara-legend{display:none!important}
@media(max-width:1050px){.app-name{font-size:1rem}.location-search{width:min(360px,32vw);min-width:190px}.header-logos img{height:33px}.header-logos img.brmp-logo{height:31px;max-width:125px}}
@media(max-width:780px){.app-header{height:auto;min-height:68px;flex-wrap:wrap;gap:8px;padding:9px 12px}.header-left{width:100%;flex-wrap:wrap;gap:8px}.header-logos{height:34px}.header-logos img{height:30px}.header-logos img.brmp-logo{height:28px;max-width:115px}.app-name{font-size:.98rem}.location-search{order:3;width:100%;min-width:100%;margin:0}.mode-link{position:absolute;right:12px;top:13px;font-size:.75rem}.workspace{height:auto}}

/* V3.3.1 legend color hotfix: explicit colors, no undefined CSS variables */
.legend-swatch.sangat-rendah{background-color:#8b1e1e!important}
.legend-swatch.rendah{background-color:#e53935!important}
.legend-swatch.sedang{background-color:#f9a825!important}
.legend-swatch.tinggi{background-color:#66bb6a!important}
.legend-swatch.sangat-tinggi{background-color:#1b5e20!important}

/* V3.3.2 - Popup section titles */
.popup-section-title{
  margin:10px 0 6px;
  font-size:12px;
  font-weight:900;
  color:var(--g2);
  letter-spacing:.01em;
}
.popup-section-title-fertilizer{
  margin-top:12px;
  padding-top:9px;
  border-top:1px solid var(--line);
}


/* V3.4 - Responsive mobile map, collapsible filter drawer, responsive popup */
:root{--app-header-h:68px}
.workspace{height:calc(100dvh - var(--app-header-h));min-height:0}
.mapcard,#map{min-width:0;min-height:0}
.mobile-menu-toggle,.mobile-menu-close,.sidebar-backdrop{display:none}
.side-actions{display:flex;align-items:center;gap:9px}

/* Popup must stay inside the device viewport. */
.leaflet-popup{max-width:calc(100vw - 16px)!important}
.leaflet-popup-content-wrapper{max-width:calc(100vw - 16px);overflow:hidden}
.leaflet-popup-content{
  width:auto!important;
  max-width:calc(100vw - 52px)!important;
  min-width:0!important;
  max-height:min(520px,calc(100dvh - var(--app-header-h) - 70px));
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.hara-popup{min-width:0;width:100%;max-width:100%}
.popup-reco-row>*{min-width:0}

@media(max-width:780px){
  html,body{height:100%;overflow:hidden}
  body{overflow:hidden}
  .app-header{position:relative;z-index:2100}
  .header-left{padding-right:0}
  .app-name{max-width:calc(100% - 82px);overflow:hidden;text-overflow:ellipsis}
  .mobile-menu-toggle{
    display:inline-flex;align-items:center;gap:5px;
    border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;
    border-radius:9px;padding:6px 9px;font-size:.75rem;font-weight:850;cursor:pointer;
    flex:0 0 auto
  }
  .mobile-menu-toggle span:first-child{font-size:1rem;line-height:1}
  .mode-link{top:12px}
  .location-search{width:100%;min-width:0}

  .workspace{
    height:calc(100dvh - var(--app-header-h));
    padding:0;
    display:block;
    min-height:0;
    overflow:hidden;
  }
  .mapcard{
    width:100%;
    height:100%;
    min-height:0;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .mapcard #map{
    width:100%;
    height:100%;
    min-height:0;
  }
  .mapstatus{
    left:8px;right:8px;bottom:8px;
    max-width:calc(100% - 16px);
    font-size:.72rem
  }

  .sidebar{
    display:block;
    position:fixed;
    z-index:3200;
    top:0;bottom:0;left:0;
    width:min(88vw,340px);
    max-width:340px;
    height:100dvh;
    padding:16px;
    border-radius:0 18px 18px 0;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:14px 0 38px rgba(0,0,0,.28);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .sidebar.is-open{transform:translateX(0)}
  .mobile-menu-close{
    display:grid;place-items:center;
    width:34px;height:34px;border:0;border-radius:9px;
    background:#edf6f0;color:var(--g2);font-size:1.65rem;line-height:1;cursor:pointer
  }
  .sidebar-backdrop{
    position:fixed;z-index:3100;inset:0;
    width:100%;height:100%;border:0;margin:0;padding:0;
    background:rgba(8,27,17,.42);
  }
  .sidebar-backdrop:not([hidden]){display:block}
  body.sidebar-open{overflow:hidden}

  .leaflet-control-layers{margin-top:10px!important;margin-right:10px!important}
  .leaflet-popup{max-width:calc(100vw - 12px)!important}
  .leaflet-popup-content-wrapper{
    width:auto!important;
    max-width:calc(100vw - 12px)!important;
    border-radius:13px;
  }
  .leaflet-popup-content{
    width:calc(100vw - 52px)!important;
    max-width:calc(100vw - 52px)!important;
    min-width:0!important;
    margin:12px 14px!important;
    max-height:calc(100dvh - var(--app-header-h) - 76px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .hara-popup{width:100%;min-width:0!important;font-size:12px}
  .popup-head{align-items:flex-start!important}
  .popup-place-grid{grid-template-columns:1fr 1fr;gap:5px}
  .popup-reco-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:3px 8px;
    align-items:start
  }
  .popup-reco-row strong{grid-column:1/-1;white-space:normal}
  .popup-reco-row span{white-space:normal;font-size:11px}
  .popup-reco-row span:last-child{text-align:right}
  .popup-npk{grid-template-columns:repeat(3,minmax(0,1fr))}
  .leaflet-popup-close-button{font-size:22px!important;padding:5px 6px 0 0!important}
}

@media(max-width:390px){
  .app-name{font-size:.9rem}
  .header-logos img{height:27px}
  .header-logos img.brmp-logo{height:25px;max-width:102px}
  .mobile-menu-toggle{padding:6px 8px}
  .popup-place-grid{grid-template-columns:1fr}
  .leaflet-popup-content{
    width:calc(100vw - 42px)!important;
    max-width:calc(100vw - 42px)!important;
    margin:10px!important
  }
}

/* V3.5 - automatic location workflow */
.note.auto-flow:before{content:'AUTO';font-size:.62rem;font-weight:900;letter-spacing:.08em;margin-right:6px;color:var(--g)}


/* V3.6 - prominent popup close button, optimized for touch */
.popup-mobile-actions{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  justify-content:flex-end;
  margin:-2px -2px 6px;
  padding:2px 0 4px;
  background:linear-gradient(to bottom,rgba(255,255,255,.98) 75%,rgba(255,255,255,0));
}
.popup-close-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:34px;
  padding:6px 10px;
  border:1px solid #cbdcd1;
  border-radius:9px;
  background:#fff;
  color:var(--g2);
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.popup-close-btn:active{transform:translateY(1px)}
.popup-close-btn span{display:inline}

/* Keep Leaflet's native X visible as a secondary close control. */
.leaflet-popup-close-button{
  z-index:30!important;
  width:34px!important;
  height:34px!important;
  line-height:30px!important;
  font-size:25px!important;
  font-weight:700!important;
  color:#214d38!important;
}

@media(max-width:780px){
  .popup-mobile-actions{
    margin:-3px -2px 7px;
    padding-top:1px;
  }
  .popup-close-btn{
    min-height:40px;
    padding:8px 12px;
    font-size:13px;
    border-radius:10px;
  }
  .leaflet-popup-content{
    /* Leave room so the top close controls are never clipped. */
    padding-top:1px;
  }
}


/* V3.7 - adaptive popup width + transparent logo/header text */
.header-logos img:first-child{background:transparent!important}
.app-name{
  line-height:1.08;
  white-space:normal;
  max-width:390px;
}

/* Desktop: wider popup to keep recommendation text and numbers readable. */
@media(min-width:781px){
  .leaflet-popup{max-width:min(660px,calc(100vw - 40px))!important}
  .leaflet-popup-content-wrapper{
    width:auto!important;
    max-width:min(650px,calc(100vw - 48px))!important;
    overflow:hidden;
  }
  .leaflet-popup-content{
    width:600px!important;
    min-width:520px!important;
    max-width:calc(100vw - 88px)!important;
    max-height:min(620px,calc(100dvh - 96px))!important;
    margin:14px 18px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-gutter:stable;
  }
  .hara-popup{width:100%!important;min-width:0!important;max-width:100%!important}
  .popup-place-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .popup-reco-row{grid-template-columns:minmax(180px,1fr) minmax(92px,auto) minmax(110px,auto);gap:10px}
  .popup-reco-row strong{white-space:normal}
  .popup-reco-row span{white-space:nowrap}
}

/* Mobile: follow the phone width, with an internal vertical scrollbar. */
@media(max-width:780px){
  .app-name{
    max-width:calc(100% - 82px);
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    font-size:.9rem;
    line-height:1.05;
  }
  .leaflet-popup{
    width:auto!important;
    max-width:calc(100vw - 8px)!important;
  }
  .leaflet-popup-content-wrapper{
    width:auto!important;
    max-width:calc(100vw - 8px)!important;
    overflow:hidden!important;
  }
  .leaflet-popup-content{
    width:calc(100vw - 38px)!important;
    min-width:0!important;
    max-width:calc(100vw - 38px)!important;
    max-height:calc(100dvh - var(--app-header-h) - 34px)!important;
    margin:10px 12px!important;
    padding-top:1px;
    overflow-y:scroll!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
  }
  .hara-popup{width:100%!important;min-width:0!important;max-width:100%!important}
  .popup-place-grid{grid-template-columns:1fr 1fr;gap:5px}
}

@media(max-width:390px){
  .app-name{font-size:.82rem;max-width:calc(100% - 78px)}
  .leaflet-popup-content{
    width:calc(100vw - 30px)!important;
    max-width:calc(100vw - 30px)!important;
    margin:8px!important;
  }
  .popup-place-grid{grid-template-columns:1fr}
}