/* =========================================================
   PETA DESA PULOSARI - MOBILE RESPONSIVE FINAL
========================================================= */

@media (max-width:850px){

  :root{
    --mobile-header-h:58px;
    --mobile-toolbar-h:58px;
  }

  html,body{
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    overscroll-behavior:none;
  }

  body{
    position:fixed;
    inset:0;
  }

  .app{
    width:100%!important;
    height:var(--peta-mobile-height,100dvh)!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:var(--mobile-header-h) minmax(0,1fr)!important;
    overflow:hidden!important;
  }

  header{
    height:var(--mobile-header-h)!important;
    min-height:var(--mobile-header-h)!important;
    padding:7px 10px!important;
    gap:8px!important;
    flex:0 0 auto!important;
  }

  header .logo{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    border-radius:10px!important;
    font-size:18px!important;
  }

  header .brand{
    gap:9px!important;
    min-width:0!important;
    max-width:calc(100vw - 60px)!important;
  }

  header .brand > div:last-child{
    min-width:0!important;
  }

  header .brand h1{
    margin:0!important;
    font-size:16px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  header .brand p{
    display:none!important;
  }

  header .badges{
    display:none!important;
  }

  .layout{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    display:block!important;
    position:relative!important;
    overflow:hidden!important;
  }

  main{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  #map{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    z-index:1!important;
  }

  /* =======================================================
     DRAWER LAYER
  ======================================================= */
  .layout > aside{
    display:block!important;
    position:fixed!important;
    top:var(--mobile-header-h)!important;
    left:0!important;
    bottom:0!important;
    width:min(88vw,360px)!important;
    height:calc(var(--peta-mobile-height,100dvh) - var(--mobile-header-h))!important;
    min-height:0!important;
    padding:10px 10px calc(var(--mobile-toolbar-h) + 18px)!important;
    margin:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    background:#f7fbff!important;
    border-right:1px solid #c9d8e5!important;
    box-shadow:16px 0 34px rgba(0,0,0,.25)!important;
    z-index:7000!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
  }

  .layout > aside.mobile-final-open{
    transform:translateX(0)!important;
  }

  #mobileFinalLayerHeader{
    display:flex!important;
    position:sticky!important;
    top:-10px!important;
    z-index:20!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin:-10px -10px 10px!important;
    padding:11px 12px!important;
    background:#0b2f5b!important;
    color:#fff!important;
    box-shadow:0 3px 10px rgba(0,0,0,.15)!important;
  }

  #mobileFinalLayerHeader b{
    font-size:14px!important;
  }

  #mobileFinalLayerHeader button{
    width:auto!important;
    min-width:40px!important;
    height:38px!important;
    padding:0 11px!important;
    border:1px solid rgba(255,255,255,.32)!important;
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
    border-radius:9px!important;
    font-size:18px!important;
  }

  #mobileFinalBackdrop{
    display:block;
    position:fixed!important;
    top:var(--mobile-header-h)!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:6900!important;
    background:rgba(4,22,40,.46)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .2s ease,visibility .2s ease!important;
  }

  #mobileFinalBackdrop.show{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* =======================================================
     TOOLBAR BAWAH HP
  ======================================================= */
  #mobileFinalToolbar{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:7px!important;
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:max(7px,env(safe-area-inset-bottom))!important;
    z-index:6800!important;
    padding:6px!important;
    border:1px solid rgba(190,210,225,.95)!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 8px 26px rgba(0,0,0,.20)!important;
    backdrop-filter:blur(8px);
  }

  #mobileFinalToolbar button{
    width:100%!important;
    min-height:42px!important;
    margin:0!important;
    padding:7px 6px!important;
    border:0!important;
    border-radius:10px!important;
    background:#eef5fb!important;
    color:#0b2f5b!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1.15!important;
  }

  #mobileFinalToolbar button.active{
    background:#1267c9!important;
    color:#fff!important;
  }

  /* Quick tools desktop tidak diperlukan di HP */
  .peta-quick-tools{
    display:none!important;
  }

  /* Tombol lama dari patch sebelumnya disembunyikan */
  #mobileLayerButton,
  #mobileLayerClose,
  #mobileLayerBackdrop{
    display:none!important;
  }

  /* =======================================================
     PANEL INFO / EDIT MENJADI BOTTOM SHEET
  ======================================================= */
  #infoPanel{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:calc(var(--mobile-toolbar-h) + 18px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:62vh!important;
    overflow:auto!important;
    z-index:6750!important;
    border-radius:15px!important;
  }

  #editBarPeta,
  .editbar{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:calc(var(--mobile-toolbar-h) + 18px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:55vh!important;
    overflow:auto!important;
    transform:none!important;
    z-index:6750!important;
    justify-content:flex-start!important;
  }

  #editBarPeta button,
  .editbar button{
    min-height:40px!important;
    flex:1 1 calc(50% - 8px)!important;
  }

  .edit-note{
    display:none!important;
  }

  /* Ringkasan kanan atas tetap tersembunyi; bila dibuka, jadi compact */
  .map-card.is-open{
    position:fixed!important;
    top:calc(var(--mobile-header-h) + 8px)!important;
    right:8px!important;
    left:8px!important;
    min-width:0!important;
    width:auto!important;
    max-height:32vh!important;
    overflow:auto!important;
    z-index:6600!important;
  }

  .coord{
    bottom:calc(var(--mobile-toolbar-h) + 22px + env(safe-area-inset-bottom))!important;
    max-width:80vw!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Leaflet control lebih mudah disentuh */
  .leaflet-control-zoom a{
    width:38px!important;
    height:38px!important;
    line-height:38px!important;
    font-size:22px!important;
  }

  .leaflet-control-container .leaflet-top{
    top:6px!important;
  }

  /* Sidebar lebih nyaman disentuh */
  .layout > aside .section{
    padding:12px!important;
    margin-bottom:9px!important;
    border-radius:12px!important;
  }

  .layout > aside label{
    font-size:12px!important;
    line-height:1.4!important;
  }

  .layout > aside select,
  .layout > aside input[type="text"],
  .layout > aside input[type="file"],
  .layout > aside button{
    min-height:42px!important;
    font-size:12px!important;
  }

  .layout > aside input[type="checkbox"]{
    width:18px!important;
    height:18px!important;
    vertical-align:middle!important;
    margin-right:5px!important;
  }

  .grid2{
    grid-template-columns:1fr 1fr!important;
  }
}

@media (max-width:420px){
  header .brand h1{
    font-size:14px!important;
  }

  .layout > aside{
    width:92vw!important;
  }

  #mobileFinalToolbar button{
    font-size:10px!important;
    padding:6px 3px!important;
  }

  .grid2{
    grid-template-columns:1fr 1fr!important;
  }
}

@media (min-width:851px){
  #mobileFinalToolbar,
  #mobileFinalBackdrop,
  #mobileFinalLayerHeader{
    display:none!important;
  }

  .layout > aside{
    transform:none!important;
  }
}