@media(max-width:760px){
  .splice-view{overflow-x:auto!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:auto;background:linear-gradient(180deg,#eaf4f7,#f5f9fa)}
  .splice-header{left:0;width:100vw;box-shadow:0 5px 18px rgba(18,55,76,.10)!important}
  .splice-summary{width:calc(100vw - 24px);position:relative;left:0}
  .splice-instruction{border-radius:10px!important;background:#fff8df!important;border-color:#ecd68d!important;color:#6e5a19!important}
  .splice-board{width:820px!important;min-width:820px!important;margin:10px 12px 26px!important;padding:12px!important;grid-template-columns:350px 82px 350px!important;gap:7px!important;overflow:visible!important;touch-action:pan-x pan-y pinch-zoom;border-radius:16px!important}
  .splice-column,.cable-stack,.splice-cable{width:350px!important;min-width:350px!important;max-width:350px!important}
  .column-label{position:sticky;top:66px;z-index:5;min-height:48px!important;padding:9px 11px!important;box-shadow:0 5px 14px rgba(18,55,76,.08)}
  .column-label b{font-size:10px!important}.column-label span{display:block!important;margin-top:2px;font-size:7px!important;line-height:1.25}
  .splice-center{width:82px!important;min-width:82px!important}.flow-label{position:sticky!important;top:77px!important;margin-top:13px!important;padding:6px 3px!important;font-size:7px!important;box-shadow:0 4px 10px rgba(18,55,76,.08)}
  .splice-cable{border-radius:11px!important;box-shadow:0 6px 17px rgba(18,55,76,.08)!important}.splice-cable-head{min-height:48px!important;padding:8px 9px!important}.splice-cable-head b{font-size:10px!important;line-height:1.3!important}.splice-cable-head button{width:30px!important;min-width:30px!important;height:30px!important}
  .splice-row{height:38px!important;grid-template-columns:34px minmax(100px,1fr) 58px 28px 32px!important;font-size:9px!important}.splice-row.has-note{height:50px!important}.splice-row .usage{padding:0 7px!important;font-size:9px!important}.splice-row .core-note{font-size:7px!important}.splice-row .attenuation{min-width:52px;padding:4px 5px!important;font-size:8px!important}.splice-row .status{width:22px!important;max-width:22px!important;padding:4px 2px!important}.core-edit{width:28px!important;min-width:28px!important;height:28px!important;margin-right:2px!important}
  .splice-row .number{font-size:10px}.core-data-flow{stroke-width:3.5}
  dialog{max-height:calc(100dvh - 20px)!important;overflow:auto!important}dialog form{padding:15px!important}
  #cableDialog,#locationDialog,#editDialog,#editLocationDialog,#editCableDialog{width:calc(100vw - 20px)!important;max-width:420px!important;max-height:calc(100dvh - 20px)!important;margin:auto!important;padding:0!important;border-radius:16px!important;overflow:hidden!important}
  #cableDialog form,#locationDialog form,#editDialog form,#editLocationDialog form,#editCableDialog form{width:100%;max-height:calc(100dvh - 20px);padding:0!important;display:flex;flex-direction:column;overflow-y:auto;background:#fff}
  #cableDialog .modal-head,#locationDialog .modal-head,#editDialog .modal-head,#editLocationDialog .modal-head,#editCableDialog .modal-head{position:sticky;top:0;z-index:4;flex:none;margin:0;padding:15px 16px 13px;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid #dde8ed;box-shadow:0 5px 14px rgba(18,55,76,.06)}
  #cableDialog .modal-head h3,#locationDialog .modal-head h3,#editDialog .modal-head h3,#editLocationDialog .modal-head h3,#editCableDialog .modal-head h3{font-size:17px;line-height:1.2}
  #cableDialog form>label,#locationDialog form>label,#editDialog form>label{flex:none;margin:8px 16px 0!important;font-size:10px!important;color:#597485}
  #cableDialog form select,#cableDialog form input,#locationDialog form select,#locationDialog form input,#editDialog form select,#editDialog form input,#editDialog form textarea{width:100%!important;height:43px;margin-top:5px!important;padding:9px 11px!important;border-radius:9px!important;font-size:12px!important;background:#fbfdfe}
  #editDialog form textarea{height:auto;min-height:74px}.coordinate-grid{margin:0 16px}.coordinate-grid label{margin-top:8px!important}
  #cableDialog #existingCable{padding-right:34px!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
  #cableDialog .form-note{flex:none;margin:11px 16px 0!important;padding:10px 11px;border:1px solid #d7e8ef;border-radius:10px;background:#f2f8fa;color:#557383;font-size:10px;line-height:1.4}
  #cableDialog .modal-actions,#locationDialog .modal-actions,#editDialog .modal-actions,#editLocationDialog .modal-actions,#editCableDialog .modal-actions{position:sticky;bottom:0;z-index:4;flex:none;margin:12px 0 0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid #dde8ed;box-shadow:0 -5px 14px rgba(18,55,76,.06)}
  #cableDialog .modal-actions button,#locationDialog .modal-actions button,#editDialog .modal-actions button{min-height:42px;padding:9px 13px;font-size:11px}.icon-btn{min-width:34px;min-height:34px!important}
}

.splice-board{grid-template-columns:410px 130px 440px!important;justify-content:center!important}
.splice-cable-head b{white-space:normal!important;overflow-wrap:anywhere}
.splice-tools{display:flex!important;align-items:center;gap:8px!important}.splice-zoom-controls{display:flex;align-items:center;gap:4px;padding:3px;border:1px solid #d9e6eb;border-radius:10px;background:#f4f8fa}.splice-zoom-controls button{min-width:34px;padding:7px 8px;font-size:10px}.splice-zoom-controls #spliceZoomValue{min-width:48px;color:#24536d}

/* Tampilan HP mengikuti desktop: kiri, panah di tengah, kanan. Papan digeser horizontal. */
@media(max-width:760px){
  .splice-view{overflow-x:auto!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:auto!important;touch-action:pan-x pan-y pinch-zoom!important}
  .splice-header{position:sticky!important;left:0!important;top:0!important;width:100vw!important;min-width:100vw!important}
  .splice-title-group #closeSplice{display:grid!important;place-items:center!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:7px!important;overflow:hidden!important;font-size:0!important;border-radius:13px!important;color:#24536d!important}
  .splice-title-group #closeSplice:before{display:grid!important;place-items:center!important;flex:none!important;width:28px!important;height:28px!important;font-size:17px!important;line-height:1!important}
  .splice-title-group{grid-template-columns:44px minmax(0,1fr)!important;gap:10px!important}
  .splice-tools{gap:5px!important}.splice-zoom-controls{gap:2px!important;padding:2px!important}.splice-zoom-controls button{min-width:29px!important;width:29px!important;height:34px!important;padding:4px!important;font-size:11px!important}.splice-zoom-controls #spliceZoomValue{min-width:42px!important;width:42px!important;font-size:8px!important}
  .splice-summary{display:none!important}
  .splice-board{display:grid!important;grid-template-columns:230px 76px 250px!important;width:578px!important;min-width:578px!important;margin:7px 4px 22px!important;padding:7px!important;gap:3px!important;overflow:visible!important;touch-action:pan-x pan-y pinch-zoom!important;justify-content:start!important;border-radius:12px!important}
  .splice-column{display:block!important;width:auto!important;min-width:0!important;max-width:none!important;order:initial!important}
  .cable-stack,.splice-cable{width:100%!important;min-width:0!important;max-width:none!important}
  .column-label{position:sticky!important;top:72px!important;min-height:50px!important;padding:10px 12px!important}
  .column-label b{font-size:10px!important}.column-label span{display:block!important;font-size:8px!important}
  .splice-center{position:relative!important;width:76px!important;min-width:76px!important;min-height:500px!important;overflow:visible!important;order:initial!important;background:linear-gradient(90deg,transparent 49.5%,#e5ecef 50%,transparent 50.5%)!important}
  .splice-center .flow-label{display:block!important;position:sticky!important;top:84px!important;margin-top:16px!important;padding:6px 3px!important;font-size:8px!important}
  .splice-center svg{display:block!important;overflow:visible!important;clip-path:none!important}
  .mobile-connection-map{display:none!important}
  .splice-cable{margin-top:0!important}
  .splice-cable-head{min-height:46px!important;padding:6px!important}
  .splice-cable-head b{max-width:calc(100% - 105px)!important;font-size:8px!important;line-height:1.25!important}
  .splice-cable-head button{width:24px!important;min-width:24px!important;height:26px!important;padding:3px!important}
  .cable-head-actions{gap:2px!important}
  .splice-row{height:36px!important;grid-template-columns:30px minmax(62px,1fr) 44px 20px 26px!important;font-size:7px!important}
  .splice-row.has-note{height:50px!important}
  .splice-row .usage{padding:0 4px!important;font-size:7px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .splice-row .attenuation{min-width:40px!important;padding:3px 1px!important;font-size:6px!important}.splice-row .status{width:18px!important;max-width:18px!important;padding:2px 1px!important}.core-edit{width:24px!important;min-width:24px!important;height:25px!important;margin-right:1px!important;padding:2px!important}
}

/* Header HP dua tingkat agar tombol kembali tetap terbaca jelas. */
@media(max-width:760px){
  .splice-header{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important;padding:9px 12px!important}
  .splice-title-group{display:grid!important;grid-template-columns:132px minmax(0,1fr)!important;gap:9px!important;align-items:center!important}
  .splice-title-group #closeSplice{display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;width:132px!important;min-width:132px!important;height:42px!important;min-height:42px!important;padding:6px 10px 6px 7px!important;overflow:visible!important;white-space:nowrap!important;font-size:9px!important;line-height:1!important;border-radius:12px!important;color:#24536d!important}
  .splice-title-group #closeSplice:before{display:grid!important;place-items:center!important;flex:none!important;width:28px!important;height:28px!important;font-size:16px!important;line-height:1!important}
  .splice-title-group h2{font-size:14px!important}
  .splice-header>.splice-tools{position:static!important;display:flex!important;width:100%!important;margin:0!important;justify-content:flex-end!important;gap:6px!important}
}