.gantt-chart { width: 100%; height: 100%; display: flex; flex-direction: column; } .header { display: flex; background: #fff; } .machine-label { width: 80px; text-align: center; font-weight: bold; background: #ffffff; line-height: 40px; border-bottom: 1px solid #ffffff; } .time-scale { display: flex; flex: 1; } .time-cell { flex: 1; text-align: center; border-bottom: 1px solid #ddd; font-size: 15px; line-height: 40px; font-weight: bold; } .rows { flex: 1; overflow-y: auto; } .row { display: flex; min-height: 60px; border-bottom: 1px solid #ddd; } .row-timeline { position: relative; flex: 1; overflow: hidden; } .vertical-line { position: absolute; top: 0; bottom: 0; width: 1px; background-color: #ddd; } .order { position: absolute; top: 10px; height: 40px; color: #fff; border-radius: 20px; user-select: none; display: flex; align-items: center; z-index: 1; } .order-content { flex: 1; text-align: center; line-height: 40px; cursor: grab; padding: 0 10px; } .resize-handle { width: 5px; height: 100%; cursor: ew-resize; position: absolute; } .resize-handle.left { left: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .resize-handle.right { right: 0; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .order.faded { opacity: 0.3; } .drag-ghost { box-sizing: border-box; text-align: center; pointer-events: none; } .pagination { display: flex; justify-content: flex-start; align-items: center; gap: 5px; width: 100%; margin-top: 10px; } .page-btn { background: #ffffff; border: 1px solid #ffffff; padding: 5px 10px; cursor: pointer; font-size: 14px; position: relative; } .page-btn.active { background: #007bff; color: #ffffff; } .page-btn.add-page { font-weight: bold; background: #ffffff; } /* สไตล์สำหรับปุ่ม Delete ที่แสดงเมื่อคลิกขวา */ .delete-btn { margin-left: 5px; background-color: red; color: #fff; border: none; padding: 2px 5px; cursor: pointer; border-radius: 3px; font-size: 12px; } /* สไตล์สำหรับ Order Dialog */ .order-dialog-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; } .order-dialog { background: #fff; padding: 20px; border-radius: 8px; width: 300px; text-align: center; } .dialog-buttons button { margin: 5px; }