/* ============================================================
   tabDragSort.css — 頁籤拖曳排序共用樣式
   搭配 tabDragSort.js 使用
   ============================================================ */

/* 拖曳進行中 — body 加上 tab-sorting class，強制全域 grabbing 游標 */
body.tab-sorting,
body.tab-sorting * {
    cursor: grabbing !important;
}

/* 頁籤 <li> 平時顯示可拖曳游標 */
.tab-sortable > .nav-item {
    cursor: grab;
}

/* SortableJS ghostClass：被拖曳中的 <li> 半透明 + 藍底提示 */
li.tab-li-dragging {
    opacity: 0.45;
    background-color: #d0ebff !important;
    border-radius: 4px;
}

/* 放置目標指示線（右側藍色豎線） */
li.tab-drag-over > .nav-link::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: #1890ff;
    border-radius: 2px;
}

/* 確保 .nav-link 有 position:relative 以便 ::after 定位 */
li.tab-drag-over > .nav-link {
    position: relative;
}