/* ============================================================
   任务列表滚动和交互优化
   ============================================================ */

/* 1. 确保任务列表页面可以正常滚动 */
#tasksPage {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* iOS 平滑滚动 */
}

/* 2. 任务列表容器 - 允许滚动 */
#tasksList,
.tasks-list {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important; /* 允许内容溢出，让页面滚动 */
    padding: 20px 0 !important;
    margin: 0 !important;
}

/* 3. 模态框滚动优化 */
.modal {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important; /* 防止滚动穿透 */
}

.modal.active {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    min-height: 100vh !important;
}

.modal-content {
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    margin: auto !important;
}

/* 4. 任务详情模态框内容区域 - 确保可以滚动 */
#taskDetailContent {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important; /* 防止滚动穿透 */
    padding: 0 10px 0 0 !important; /* 右侧留出滚动条空间 */
    position: relative !important;
}

/* 任务详情模态框本身 */
#taskDetailModal {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

#taskDetailModal.active {
    display: flex !important;
}

/* 5. 主内容区域 - 允许滚动 */
.main-content {
    position: relative !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: calc(100vh - 80px) !important;
    -webkit-overflow-scrolling: touch !important;
}

.container {
    position: relative !important;
    overflow: visible !important; /* 允许内容溢出到页面级别 */
    height: auto !important;
}

/* 6. 页面区域 - 确保不阻止滚动 */
.page-section {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 200px) !important;
    overflow: visible !important; /* 不限制溢出，让父容器处理滚动 */
    padding-bottom: 40px !important; /* 底部留出空间 */
}

/* 7. 任务卡片 - 确保可以正常交互 */
.task-item {
    position: relative !important;
    touch-action: manipulation !important; /* 优化触摸交互 */
    -webkit-tap-highlight-color: transparent !important; /* 移除点击高亮 */
}

/* 8. 优化滚动条样式 */
.modal-content::-webkit-scrollbar,
#taskDetailContent::-webkit-scrollbar,
#tasksPage::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.modal-content::-webkit-scrollbar-track,
#taskDetailContent::-webkit-scrollbar-track,
#tasksPage::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb,
#taskDetailContent::-webkit-scrollbar-thumb,
#tasksPage::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: background 0.3s;
}

.modal-content::-webkit-scrollbar-thumb:hover,
#taskDetailContent::-webkit-scrollbar-thumb:hover,
#tasksPage::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 9. 确保页面标题和工具栏固定在顶部（当内容滚动时） */
.page-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: var(--bg-dark) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 15px 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--border) !important;
}

.task-toolbar {
    position: sticky !important;
    top: 80px !important; /* 在page-header下方 */
    z-index: 45 !important;
    background: var(--bg-dark) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    margin-bottom: 20px !important;
}

/* 10. 防止body滚动穿透到模态框 */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* 11. 过滤标签栏 - 固定在工具栏下方 */
.filter-tabs {
    position: sticky !important;
    top: 140px !important; /* 在toolbar下方 */
    z-index: 40 !important;
    background: var(--bg-dark) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 15px 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--border) !important;
}

/* 12. 任务列表网格布局 - 确保响应式 */
.tasks-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 20px !important;
    padding: 20px 0 !important;
    width: 100% !important;
}

/* 13. 移动端优化 */
@media (max-width: 768px) {
    .tasks-list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
        gap: 15px !important;
    }
    
    .page-header,
    .task-toolbar,
    .filter-tabs {
        position: relative !important;
        top: auto !important;
        position: sticky !important;
        top: 0 !important;
    }
    
    .modal-content {
        max-height: calc(100vh - 40px) !important;
        margin: 20px !important;
        border-radius: 16px !important;
    }
    
    .modal {
        padding: 20px 10px !important;
    }
    
    /* 移动端任务列表可横向滚动 */
    .filter-tabs {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }
}

/* 14. 确保空状态不阻止滚动 */
.empty-state {
    position: relative !important;
    padding: 60px 20px !important;
    text-align: center !important;
    min-height: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 15. 优化任务列表网格布局 */
#tasksList.tasks-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 20px !important;
    padding: 20px 0 60px 0 !important; /* 底部留出空间以便滚动 */
    width: 100% !important;
    min-height: 400px !important;
}

/* 15. 优化触摸手势 */
.task-item,
.task-btn,
.tab-btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(249, 115, 22, 0.2) !important;
}