/*
  INSPEKTA Irigasi v43 — Viewer overlap / layout fix
  Fokus: mencegah tombol, badge, dan panel saling tindih pada viewer
  tanpa mengubah fungsi JS dan struktur data.
*/

/* ===== Viewer desktop ===== */
.viewer-topbar{
  left:14px!important;
  right:14px!important;
  top:14px!important;
  width:auto!important;
  max-width:none!important;
  min-height:58px!important;
  padding:8px 10px!important;
  border-radius:20px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  z-index:42!important;
}
.viewer-topbar .topbar-left{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.viewer-topbar .round-link{
  flex:0 0 auto!important;
}
.viewer-topbar .scene-meta{
  min-width:0!important;
  flex:1 1 auto!important;
}
.viewer-topbar .scene-meta h1{
  font-size:1rem!important;
  line-height:1.15!important;
}
.viewer-topbar .scene-meta p{
  max-width:100%!important;
  font-size:.72rem!important;
  line-height:1.25!important;
}
.viewer-topbar .topbar-actions{
  position:static!important;
  top:auto!important;
  right:auto!important;
  z-index:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
  max-width:min(54vw, 760px)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  padding:0!important;
}
.viewer-topbar .topbar-actions::-webkit-scrollbar{display:none!important}
.viewer-topbar .topbar-actions .icon-btn{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  padding:9px 13px!important;
  min-height:38px!important;
  font-size:.83rem!important;
  line-height:1!important;
}

/* Elemen di bawah topbar digeser agar tidak menabrak */
.street-status{
  top:86px!important;
  left:16px!important;
  z-index:34!important;
}
.zoom-control{
  top:86px!important;
  right:16px!important;
}
.street-location-badge{
  top:84px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  min-width:min(420px,calc(100vw - 420px))!important;
  max-width:min(680px,calc(100vw - 420px))!important;
  z-index:38!important;
}
.street-compass{
  top:170px!important;
  right:16px!important;
}
.info-drawer{
  top:72px!important;
  right:16px!important;
  bottom:86px!important;
  width:min(360px,calc(100vw - 32px))!important;
}
.minimap-card.point-card{
  left:16px!important;
  bottom:88px!important;
  width:300px!important;
  height:272px!important;
  z-index:35!important;
}
.minimap-card.point-card:not(.expanded){
  transform:translateX(calc(-100% + 46px))!important;
}
.street-minimap-card{
  right:16px!important;
  bottom:88px!important;
  width:280px!important;
  height:208px!important;
  z-index:34!important;
}
.viewer-bottom{
  bottom:12px!important;
  width:min(760px,calc(100vw - 360px))!important;
  z-index:33!important;
}
.street-forward{bottom:160px!important}
.street-back{bottom:94px!important}
.street-arrow-left{left:16px!important}
.street-arrow-right{right:16px!important}

/* Hindari rail bawah menabrak panel bawah kiri/kanan pada layar medium */
@media (max-width: 1400px){
  .viewer-topbar .scene-meta p{display:none!important}
  .viewer-topbar .topbar-actions{max-width:min(56vw, 640px)!important}
  .street-location-badge{
    min-width:min(380px,calc(100vw - 380px))!important;
    max-width:min(560px,calc(100vw - 380px))!important;
  }
  .viewer-bottom{width:min(680px,calc(100vw - 340px))!important}
}

@media (max-width: 1200px){
  .viewer-topbar{
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:8px!important;
  }
  .viewer-topbar .topbar-actions{
    justify-content:flex-start!important;
    max-width:100%!important;
  }
  .street-status{top:118px!important}
  .street-location-badge{
    top:118px!important;
    min-width:min(360px,calc(100vw - 260px))!important;
    max-width:min(520px,calc(100vw - 260px))!important;
  }
  .zoom-control{top:118px!important}
  .info-drawer{top:104px!important}
  .street-compass{top:202px!important}
}

@media (max-width: 980px){
  .viewer-topbar{
    left:12px!important;
    right:12px!important;
    top:12px!important;
    padding:8px!important;
  }
  .viewer-topbar .topbar-left{
    align-items:flex-start!important;
  }
  .viewer-topbar .scene-meta p{display:none!important}
  .viewer-topbar .topbar-actions .icon-btn{
    padding:8px 11px!important;
    font-size:.78rem!important;
  }
  .street-status{top:112px!important;left:12px!important}
  .street-location-badge{
    top:156px!important;
    left:12px!important;
    right:12px!important;
    transform:none!important;
    min-width:0!important;
    max-width:none!important;
  }
  .zoom-control{top:112px!important;right:12px!important}
  .street-compass{top:244px!important;right:12px!important}
  .minimap-card.point-card{
    left:12px!important;
    bottom:146px!important;
    width:min(340px,calc(100vw - 24px))!important;
    height:250px!important;
  }
  .street-minimap-card{
    right:12px!important;
    bottom:146px!important;
    width:228px!important;
    height:174px!important;
  }
  .info-drawer{
    top:204px!important;
    right:12px!important;
    bottom:88px!important;
    width:min(360px,calc(100vw - 24px))!important;
  }
  .viewer-bottom{width:calc(100vw - 24px)!important;bottom:12px!important}
  .street-arrow{top:auto!important;bottom:86px!important;transform:none!important}
  .street-arrow:hover{transform:scale(1.03)!important}
  .street-forward{bottom:136px!important}
  .street-back{bottom:82px!important}
}

@media (max-width: 640px){
  .viewer-topbar .round-link{padding:8px 10px!important;font-size:.78rem!important}
  .viewer-topbar .scene-meta h1{font-size:.92rem!important}
  .viewer-topbar .topbar-actions{gap:6px!important}
  .viewer-topbar .topbar-actions .icon-btn{padding:8px 10px!important;font-size:.76rem!important}
  .street-status{display:none!important}
  .street-location-badge{
    top:144px!important;
    padding:9px 12px!important;
  }
  .zoom-control{top:106px!important;right:10px!important}
  .street-compass{display:none!important}
  .street-minimap-card{display:none!important}
  .minimap-card.point-card{
    left:10px!important;
    bottom:130px!important;
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    height:218px!important;
  }
  .viewer-bottom{bottom:10px!important;width:calc(100vw - 20px)!important}
  .street-arrow{bottom:74px!important}
  .street-forward{left:64%!important;bottom:72px!important}
  .street-back{left:36%!important;bottom:72px!important}
  .street-nearest-hint{bottom:126px!important}
  .info-drawer{
    top:194px!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    bottom:84px!important;
  }
}