/* Sortable.js 拖拽样式 - 完全无占位符版本 */

.sortable-drag,
.sortable-fallback {
    opacity: 1 !important;
    background: #eff6ff !important;
    border: 2px solid #2563eb !important;
    transform: none !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    z-index: 9999 !important;
    position: absolute !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* 强制单行布局 */
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    width: max-content !important;
    min-width: 200px !important;
    max-width: 400px !important;
}

.sortable-fallback {
    background: #f0f9ff !important;
    border: 2px solid #0ea5e9 !important;
    cursor: grabbing !important;
}

/* 拖拽元素内的链接 */
.sortable-drag a,
.sortable-fallback a {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    flex: none !important;
    width: auto !important;
}

/* 拖拽元素内的手柄 */
.sortable-drag .drag-handle,
.sortable-fallback .drag-handle {
    display: inline-block !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}

/* 完全隐藏任何可能的占位符 */
.sortable-ghost,
li[data-sortable-ghost] {
    display: block !important;
    visibility: visible !important;
    opacity: 0.3 !important;
    height: auto !important;
    width: auto !important;
    margin: auto !important;
    padding: auto !important;
    border: auto !important;
    background: rgba(0, 0, 0, 0.05) !important;
}


/* 导航列表项布局 */
#navList li {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

#navList li a {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0; /* 允许flex项目收缩 */
}

/* 拖拽手柄样式 */
.drag-handle {
    cursor: grab;
    color: #666;
    padding: 4px 8px;
    margin-left: 8px;
    user-select: none;
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    white-space: nowrap;
}

/* 拖拽时的手柄样式 */
.sortable-drag .drag-handle,
.sortable-fallback .drag-handle {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

.drag-handle:hover {
    color: #333;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.drag-handle:active {
    cursor: grabbing;
    background-color: #e5e5e5;
}

/* 拖拽提示样式 */
.drag-hint {
    user-select: none;
    pointer-events: none !important;
}

.save-confirmation {
    user-select: none;
    pointer-events: none !important;
}


/* 完全隐藏任何可能的占位符 */
.sortable-chosen,
li[data-sortable-chosen] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    margin: auto !important;
    padding: auto !important;
    border: auto !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

#navList .sortable-fallback,
.sortable-drag {
    opacity: 0 !important;
}

/* 移动端触摸优化 */
@media (max-width: 767px) {
    .sortable-drag {
        transform: none !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
        opacity: 0 !important;
        background: #eff6ff !important;
        border: 2px solid #2563eb !important;
        z-index: 10000 !important;
        position: absolute !important;
    }
    
    .sortable-fallback {
        transform: none !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
        opacity: 0 !important;
        background: #f0f9ff !important;
        border: 2px solid #0ea5e9 !important;
        z-index: 10000 !important;
        position: absolute !important;
    }
    
    #navList.dragging {
        touch-action: none;
    }
    
    #navList li {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}